@pega/cosmos-react-core 2.0.0-dev.2.0 → 2.0.0-dev.21.1

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

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

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

@@ -36,27 +36,27 @@ export interface BackdropProps extends BaseProps {
     /**
      * Accepts a callback function for click event on Backdrop.
      */
-    onClick?(e: MouseEvent<HTMLDivElement>): void;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     /**
      * Accepts a callback that gets invoked before opening Backdrop.
      */
-    onBeforeTransitionIn?(): void;
+    onBeforeTransitionIn?: () => void;
     /**
      * Accepts a callback that gets invoked after opening Backdrop.
      */
-    onAfterTransitionIn?(): void;
+    onAfterTransitionIn?: () => void;
     /**
      * Accepts a callback that gets invoked before closing Backdrop.
      */
-    onBeforeTransitionOut?(): void;
+    onBeforeTransitionOut?: () => void;
     /**
      * Accepts a callback that gets invoked after closing Backdrop
      */
-    onAfterTransitionOut?(): void;
+    onAfterTransitionOut?: () => void;
     /** Ref for a Backdrop's root div element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
     opacity: 0 | 1;
 }, never>;
 declare const Backdrop: FunctionComponent<BackdropProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,iBAAiB,EACjB,SAAS,EAKT,GAAG,EACH,UAAU,EAEX,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC9C;;OAEG;IACH,oBAAoB,CAAC,IAAI,IAAI,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B;;OAEG;IACH,qBAAqB,CAAC,IAAI,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,CAAC,IAAI,IAAI,CAAC;IAC9B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc;aAAqD,CAAC,GAAG,CAAC;SAoCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAKT,GAAG,EACH,UAAU,EAEX,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc;aAAqD,CAAC,GAAG,CAAC;SAqCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Backdrop/Backdrop.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, useCallback, forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import { reflow } from '../../utils';
@@ -20,6 +21,7 @@ export const StyledBackdrop = styled.div(props => {
     left: 0;
     height: 100%;
     width: 100%;
+    border-radius: inherit;
     opacity: ${opacity};
     transition-property: opacity;
     transition-timing-function: ${props.theme.base.animation.timing.ease};
@@ -43,36 +45,36 @@ export const StyledBackdrop = styled.div(props => {
 });
 StyledBackdrop.defaultProps = defaultThemeProp;
 const Backdrop = forwardRef((props, ref) => {
-    const { children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.4, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps } = props;
+    const { children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps } = props;
     const [state, setState] = useState('closed');
     const onTransitionEnd = useCallback((e) => {
-        if (e.propertyName !== 'opacity')
+        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget)
             return;
         let nextState;
         if (state === 'closing') {
             nextState = 'closed';
-            onAfterTransitionOut === null || onAfterTransitionOut === void 0 ? void 0 : onAfterTransitionOut();
+            onAfterTransitionOut?.();
         }
         else {
             nextState = 'open';
-            onAfterTransitionIn === null || onAfterTransitionIn === void 0 ? void 0 : onAfterTransitionIn();
+            onAfterTransitionIn?.();
         }
         setState(nextState);
     }, [state, onAfterTransitionOut, onAfterTransitionIn]);
     useEffect(() => {
         if (open) {
             if (state === 'closed' || state === 'closing') {
-                onBeforeTransitionIn === null || onBeforeTransitionIn === void 0 ? void 0 : onBeforeTransitionIn();
+                onBeforeTransitionIn?.();
                 reflow();
                 setState('opening');
             }
         }
         else if (state === 'open' || state === 'opening') {
-            onBeforeTransitionOut === null || onBeforeTransitionOut === void 0 ? void 0 : onBeforeTransitionOut();
+            onBeforeTransitionOut?.();
             setState('closing');
         }
     }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);
-    return !open && state === 'closed' ? null : (React.createElement(Flex, { container: { justify: 'center', alignItems: 'center', ...container }, as: StyledBackdrop, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: ref, ...restProps }, children));
+    return !open && state === 'closed' ? null : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center', ...container }, as: StyledBackdrop, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: ref, ...restProps, children: children }, void 0));
 });
 export default Backdrop;
 //# sourceMappingURL=Backdrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /**\n   * Any React Node to be rendered on top of the Backdrop component.\n   */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: Exclude<FlexProps['container'], boolean>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default \"dark\"\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default \"medium\"\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default \"fixed\"\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Accepts a callback function for click event on Backdrop.\n   */\n  onClick?(e: MouseEvent<HTMLDivElement>): void;\n  /**\n   * Accepts a callback that gets invoked before opening Backdrop.\n   */\n  onBeforeTransitionIn?(): void;\n  /**\n   * Accepts a callback that gets invoked after opening Backdrop.\n   */\n  onAfterTransitionIn?(): void;\n  /**\n   * Accepts a callback that gets invoked before closing Backdrop.\n   */\n  onBeforeTransitionOut?(): void;\n  /**\n   * Accepts a callback that gets invoked after closing Backdrop\n   */\n  onAfterTransitionOut?(): void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<BackdropProps>, ref: BackdropProps['ref']) => {\n    const {\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.4,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    } = props;\n\n    const [state, setState] = useState<State>('closed');\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity') return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);\n\n    return !open && state === 'closed' ? null : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center', ...container }}\n        as={StyledBackdrop}\n        transitionSpeed={transitionSpeed}\n        opacity={state === 'opening' || state === 'open' ? 1 : 0}\n        alpha={alpha}\n        variant={variant}\n        position={position}\n        onTransitionEnd={onTransitionEnd}\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default Backdrop;\n"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EAIX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,IAAmB,MAAM,SAAS,CAAC;AA+D1C,MAAM,sBAAsB,GAAG;IAC7B,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,CAAC;CACC,CAAC;AAEX,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAiD,KAAK,CAAC,EAAE;IAC/F,MAAM,EACJ,KAAK,EAAE,EAAE,IAAI,EAAE,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,kBAAkB,GAAG,YAAY,sBAAsB,CAAC,KAAK,CAAC,eAAe,CAAC,MAClF,IAAI,CAAC,SAAS,CAAC,KACjB,SAAS,CAAC;IAEV,OAAO,GAAG,CAAA;gBACI,QAAQ;eACT,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,GAAG,CAAC;;;;;;eAM7E,OAAO;;kCAEY,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;2BAI7C,kBAAkB;;;;MAIvC,OAAO,KAAK,MAAM;QACpB,GAAG,CAAA;kCAC2B,KAAK;KAClC;;MAEC,OAAO,KAAK,OAAO;QACrB,GAAG,CAAA;wCACiC,KAAK;KACxC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAI/C,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,MAAM,EAChB,eAAe,GAAG,QAAQ,EAC1B,KAAK,GAAG,GAAG,EACX,QAAQ,GAAG,OAAO,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,QAAQ,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACzE,IAAI,SAAgB,CAAC;QAErB,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,SAAS,GAAG,QAAQ,CAAC;YACrB,oBAAoB,EAAE,EAAE,CAAC;SAC1B;aAAM;YACL,SAAS,GAAG,MAAM,CAAC;YACnB,mBAAmB,EAAE,EAAE,CAAC;SACzB;QAED,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,CAAC,CACnD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE;YACR,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE;gBAC7C,oBAAoB,EAAE,EAAE,CAAC;gBACzB,MAAM,EAAE,CAAC;gBACT,QAAQ,CAAC,SAAS,CAAC,CAAC;aACrB;SACF;aAAM,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS,EAAE;YAClD,qBAAqB,EAAE,EAAE,CAAC;YAC1B,QAAQ,CAAC,SAAS,CAAC,CAAC;SACrB;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAExD,OAAO,CAAC,IAAI,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1C,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACpE,EAAE,EAAE,cAAc,EAClB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,GAAG,EAAE,GAAG,KACJ,SAAS,YAEZ,QAAQ,WACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /**\n   * Any React Node to be rendered on top of the Backdrop component.\n   */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: Exclude<FlexProps['container'], boolean>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default \"dark\"\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default \"medium\"\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default \"fixed\"\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Accepts a callback function for click event on Backdrop.\n   */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  /**\n   * Accepts a callback that gets invoked before opening Backdrop.\n   */\n  onBeforeTransitionIn?: () => void;\n  /**\n   * Accepts a callback that gets invoked after opening Backdrop.\n   */\n  onAfterTransitionIn?: () => void;\n  /**\n   * Accepts a callback that gets invoked before closing Backdrop.\n   */\n  onBeforeTransitionOut?: () => void;\n  /**\n   * Accepts a callback that gets invoked after closing Backdrop\n   */\n  onAfterTransitionOut?: () => void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<BackdropProps>, ref: BackdropProps['ref']) => {\n    const {\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.6,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    } = props;\n\n    const [state, setState] = useState<State>('closed');\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open, onBeforeTransitionIn, onBeforeTransitionOut]);\n\n    return !open && state === 'closed' ? null : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center', ...container }}\n        as={StyledBackdrop}\n        transitionSpeed={transitionSpeed}\n        opacity={state === 'opening' || state === 'open' ? 1 : 0}\n        alpha={alpha}\n        variant={variant}\n        position={position}\n        onTransitionEnd={onTransitionEnd}\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default Backdrop;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,UAAU;IACzB,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iHAYtB,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAKxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,UAAU;IACzB,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iHAYtB,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAKxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Badges/Alert.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 export const StyledAlert = styled.div(props => {
@@ -17,7 +18,7 @@ export const StyledAlert = styled.div(props => {
 StyledAlert.defaultProps = defaultThemeProp;
 const Alert = forwardRef((props, ref) => {
     const { variant, ...restProps } = props;
-    return React.createElement(StyledAlert, { ...restProps, variant: variant, ref: ref });
+    return _jsx(StyledAlert, { ...restProps, variant: variant, ref: ref }, void 0);
 });
 export default Alert;
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAwB,EAAE,EAAE;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,oBAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACpE,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import React, { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'urgent' | 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n  const alerts = props.theme.components.badges.alert;\n  const { background } = alerts[props.variant];\n  const { 'border-color': borderColor } = alerts.base;\n  return css`\n    background: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n  `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(\n  (props: PropsWithoutRef<AlertProps>, ref: Ref<HTMLDivElement>) => {\n    const { variant, ...restProps } = props;\n    return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n  }\n);\n\nexport default Alert;\n"]}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAwB,EAAE,EAAE;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,WAAI,CAAC;AACpE,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'urgent' | 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n  const alerts = props.theme.components.badges.alert;\n  const { background } = alerts[props.variant];\n  const { 'border-color': borderColor } = alerts.base;\n  return css`\n    background: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n  `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(\n  (props: PropsWithoutRef<AlertProps>, ref: Ref<HTMLDivElement>) => {\n    const { variant, ...restProps } = props;\n    return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n  }\n);\n\nexport default Alert;\n"]}

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,OAAc,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAMpE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5D,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,aAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;SAkC5D,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CASxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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,aAAa,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5D,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,aAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;SAkC5D,CAAC;AAIH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CASxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Badges/Count.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, transparentize } from 'polished';
 import { defaultThemeProp } from '../../theme';
@@ -35,7 +36,7 @@ export const StyledCount = styled.span(props => {
 StyledCount.defaultProps = defaultThemeProp;
 const Count = forwardRef((props, ref) => {
     const { variant = 'default', children, ...restProps } = props;
-    return Number.isInteger(children) ? (React.createElement(StyledCount, { variant: variant, ...restProps, ref: ref }, children > 99 ? '99+' : `${children}`)) : null;
+    return Number.isInteger(children) ? (_jsx(StyledCount, { variant: variant, ...restProps, ref: ref, children: children > 99 ? '99+' : `${children}` }, void 0)) : 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":"AAAA,OAAO,KAAK,EAAE,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAajD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,KAAK,CAAC,EAAE;IACR,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC9B,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,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;kBACM,iBAAiB;kCACD,YAAY;aACjC,UAAU;;iBAEN,QAAQ,CAAC,GAAG;;;;MAIvB,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3B,GAAG,CAAA;mBACY,OAAO;KACrB;MACC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAC7B,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAyB,EAAE,EAAE;IAChE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,IAClD,QAAmB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CACtC,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import React, { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/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' | 'interactive' | 'inverted' | '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>(props => {\n  const { foreground, background } =\n    props.variant === 'default'\n      ? props.theme.components.badges.count.base\n      : props.theme.components.badges.count[props.variant];\n\n  const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n\n  const displayBackground = props.variant === 'inverted' ? invertedBackground : background;\n\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background: ${displayBackground};\n    border-radius: calc(1.125 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: normal;\n    text-align: center;\n    ${props.children.length > 1 &&\n    css`\n      padding: 0 ${spacing};\n    `}\n    ${props.children.length === 1 &&\n    css`\n      width: 1.125rem;\n    `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n  (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n    const { variant = 'default', children, ...restProps } = props;\n    return Number.isInteger(children) ? (\n      <StyledCount variant={variant} {...restProps} ref={ref}>\n        {(children as number) > 99 ? '99+' : `${children}`}\n      </StyledCount>\n    ) : null;\n  }\n);\n\nexport default Count;\n"]}
+{"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAajD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,KAAK,CAAC,EAAE;IACR,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC9B,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,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;kBACM,iBAAiB;kCACD,YAAY;aACjC,UAAU;;iBAEN,QAAQ,CAAC,GAAG;;;;MAIvB,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3B,GAAG,CAAA;mBACY,OAAO;KACrB;MACC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAC7B,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAyB,EAAE,EAAE;IAChE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAClD,QAAmB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,WACtC,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/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' | 'interactive' | 'inverted' | '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>(props => {\n  const { foreground, background } =\n    props.variant === 'default'\n      ? props.theme.components.badges.count.base\n      : props.theme.components.badges.count[props.variant];\n\n  const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n\n  const displayBackground = props.variant === 'inverted' ? invertedBackground : background;\n\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background: ${displayBackground};\n    border-radius: calc(1.125 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: normal;\n    text-align: center;\n    ${props.children.length > 1 &&\n    css`\n      padding: 0 ${spacing};\n    `}\n    ${props.children.length === 1 &&\n    css`\n      width: 1.125rem;\n    `}\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n  (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n    const { variant = 'default', children, ...restProps } = props;\n    return Number.isInteger(children) ? (\n      <StyledCount variant={variant} {...restProps} ref={ref}>\n        {(children as number) > 99 ? '99+' : `${children}`}\n      </StyledCount>\n    ) : null;\n  }\n);\n\nexport default Count;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA4ClD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIlD,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA4ClD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Badges/Selection.js

@@ -1,10 +1,13 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, transparentize } from 'polished';
 import { tryCatch } from '../../utils/utils';
 import BareButton, { StyledBareButton } from '../Button/BareButton';
-import Icon, { StyledIcon } from '../Icon';
+import Icon, { registerIcon, StyledIcon } from '../Icon';
+import * as timesIcon from '../Icon/icons/times.icon';
 import { useConsolidatedRef } from '../../hooks';
+registerIcon(timesIcon);
 export const StyledSelectable = styled.div(props => {
     const { foreground, background } = props.theme.components.badges.selectable.base;
     const { dark } = props.theme.base.palette;
@@ -62,27 +65,24 @@ const Selectable = forwardRef((props, ref) => {
     const consolidatedRef = useConsolidatedRef(ref);
     const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;
     const handleClick = (e) => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(id);
+        onClick?.(e);
+        onSelect?.(id);
     };
     const handleCloseClick = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        onRemove === null || onRemove === void 0 ? void 0 : onRemove(id);
+        onRemove?.(id);
     };
     const handleKeyUp = (e) => {
-        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(e);
+        onKeyUp?.(e);
         if (e.key === 'Enter') {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(id);
+            onSelect?.(id);
         }
         if (e.key === 'Backspace' || e.key === 'Delete') {
-            onRemove === null || onRemove === void 0 ? void 0 : onRemove(id);
+            onRemove?.(id);
         }
     };
-    return (React.createElement(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps },
-        children,
-        React.createElement(BareButton, { tabIndex: '-1', onClick: handleCloseClick },
-            React.createElement(Icon, { name: 'times' }))));
+    return (_jsxs(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, _jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
 });
 export default Selectable;
 //# sourceMappingURL=Selection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { StyledIcon } from '../Icon';\nimport { useConsolidatedRef } from '../../hooks';\nimport { FormControlProps } from '../FormControl';\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** The content of the Badge. */\n  children: string;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n  const { foreground, background } = props.theme.components.badges.selectable.base;\n  const { dark } = props.theme.base.palette;\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n  const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n  const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n  const height = 1.125;\n  return css`\n    background: ${displayBackground};\n    border: 0 solid transparent;\n    border-radius: calc(${height} * ${borderRadius});\n    color: ${foreground};\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    font-size: 0.75rem;\n    height: ${height}rem;\n    padding: 0 ${spacing};\n    min-width: max-content;\n    line-height: 1;\n\n    &:hover {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 0.0625rem ${background};\n    }\n\n    &:focus {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n      outline: none;\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledIcon} {\n      margin-inline-start: ${spacing};\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectableProps>, ref: Ref<HTMLButtonElement>) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;\n\n    const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n      onClick?.(e);\n      onSelect?.(id);\n    };\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n      if (e.key === 'Enter') {\n        onSelect?.(id);\n      }\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n\n    return (\n      <BareButton\n        role='button'\n        tabIndex='0'\n        as={StyledSelectable}\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        <BareButton tabIndex='-1' onClick={handleCloseClick}>\n          <Icon name='times' />\n        </BareButton>\n      </BareButton>\n    );\n  }\n);\n\nexport default Selectable;\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef } from '../../hooks';\nimport { FormControlProps } from '../FormControl';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** The content of the Badge. */\n  children: string;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n  const { foreground, background } = props.theme.components.badges.selectable.base;\n  const { dark } = props.theme.base.palette;\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n\n  const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n  const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n  const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n  const height = 1.125;\n  return css`\n    background: ${displayBackground};\n    border: 0 solid transparent;\n    border-radius: calc(${height} * ${borderRadius});\n    color: ${foreground};\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    font-size: 0.75rem;\n    height: ${height}rem;\n    padding: 0 ${spacing};\n    min-width: max-content;\n    line-height: 1;\n\n    &:hover {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 0.0625rem ${background};\n    }\n\n    &:focus {\n      color: ${props.theme.base.palette.interactive};\n      box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n      outline: none;\n\n      ${StyledBareButton} {\n        color: ${props.theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledIcon} {\n      margin-inline-start: ${spacing};\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectableProps>, ref: Ref<HTMLButtonElement>) => {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;\n\n    const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n      onClick?.(e);\n      onSelect?.(id);\n    };\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n      if (e.key === 'Enter') {\n        onSelect?.(id);\n      }\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n\n    return (\n      <BareButton\n        role='button'\n        tabIndex='0'\n        as={StyledSelectable}\n        ref={consolidatedRef}\n        onClick={handleClick}\n        onKeyUp={handleKeyUp}\n        {...restProps}\n      >\n        {children}\n        <BareButton tabIndex='-1' onClick={handleCloseClick}>\n          <Icon name='times' />\n        </BareButton>\n      </BareButton>\n    );\n  }\n);\n\nexport default Selectable;\n"]}

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

@@ -1,10 +1,10 @@
-import { FC } from 'react';
+import { FC, ReactText } from 'react';
 import { ForwardProps } from '../../types';
 export interface StatusProps {
     /** 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: string;
+    children: ReactText;
 }
 export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StatusProps, never>;
 declare const Status: FC<StatusProps & ForwardProps>;

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,OAAc,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAMpE,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,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,mHAqBvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAW1C,CAAC;AAMF,eAAe,MAAM,CAAC"}
+{"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,CAW1C,CAAC;AAMF,eAAe,MAAM,CAAC"}

package/lib/components/Badges/Status.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { calculateFontSize } from '../../styles';
@@ -26,7 +27,7 @@ export const StyledStatus = styled.span(props => {
 });
 StyledStatus.defaultProps = defaultThemeProp;
 const Status = forwardRef(({ variant, children, ...restProps }, ref) => {
-    return (React.createElement(StyledStatus, { ...restProps, variant: variant, ref: ref }, children));
+    return (_jsx(StyledStatus, { ...restProps, variant: variant, ref: ref, children: children }, void 0));
 });
 Status.defaultProps = {
     variant: 'info'

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,KAAK,EAAE,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AACpE,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,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,oBAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IACpD,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React, { FC, forwardRef, PropsWithoutRef, 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: string;\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(\n  (\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);\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,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,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACpD,QAAQ,WACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,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(\n  (\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);\n\nStatus.defaultProps = {\n  variant: 'info'\n};\n\nexport default Status;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAMpE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,0GAiCpB,CAAC;AAIH,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAQpC,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,0GAiCpB,CAAC;AAIH,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAQpC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/components/Badges/Tag.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp } from '../../theme';
@@ -35,7 +36,7 @@ export const StyledTag = styled.span(props => {
 });
 StyledTag.defaultProps = defaultThemeProp;
 const Tag = forwardRef(({ children, ...restProps }, ref) => {
-    return (React.createElement(StyledTag, { ...restProps, tabIndex: 0, ref: ref }, children));
+    return (_jsx(StyledTag, { ...restProps, tabIndex: 0, ref: ref, children: children }, void 0));
 });
 export default Tag;
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ7C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAA6B,EAAE,GAAyB,EAAE,EAAE;IACnF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,IAC5C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import React, { FC, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps } from '../../types';\n\nexport interface TagProps {\n  /** The content of the Badge. */\n  children: string;\n}\n\nexport const StyledTag = styled.span(props => {\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n  const { foreground, background } = props.theme.components.badges.tag;\n\n  const borderColor = tryCatch(() =>\n    mix(0.85, props.theme.base.palette['primary-background'], background)\n  );\n  const boxShadow = props.theme.base.shadow.focus;\n\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: 0.75rem;\n    padding: 0 ${spacing};\n\n    &:hover {\n      border-color: ${background};\n    }\n\n    &:focus {\n      border-color: ${background};\n      box-shadow: ${boxShadow};\n      outline: none;\n    }\n\n    &:active {\n      border: 0.0625rem solid ${borderColor};\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(\n  ({ children, ...restProps }: PropsWithoutRef<TagProps>, ref: Ref<HTMLSpanElement>) => {\n    return (\n      <StyledTag {...restProps} tabIndex={0} ref={ref}>\n        {children}\n      </StyledTag>\n    );\n  }\n);\n\nexport default Tag;\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ7C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAA6B,EAAE,GAAyB,EAAE,EAAE;IACnF,OAAO,CACL,KAAC,SAAS,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,YAC5C,QAAQ,WACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps } from '../../types';\n\nexport interface TagProps {\n  /** The content of the Badge. */\n  children: string;\n}\n\nexport const StyledTag = styled.span(props => {\n  const borderRadius = props.theme.base['border-radius'];\n  const { spacing } = props.theme.base;\n  const { foreground, background } = props.theme.components.badges.tag;\n\n  const borderColor = tryCatch(() =>\n    mix(0.85, props.theme.base.palette['primary-background'], background)\n  );\n  const boxShadow = props.theme.base.shadow.focus;\n\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    display: inline-block;\n    font-size: 0.75rem;\n    padding: 0 ${spacing};\n\n    &:hover {\n      border-color: ${background};\n    }\n\n    &:focus {\n      border-color: ${background};\n      box-shadow: ${boxShadow};\n      outline: none;\n    }\n\n    &:active {\n      border: 0.0625rem solid ${borderColor};\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(\n  ({ children, ...restProps }: PropsWithoutRef<TagProps>, ref: Ref<HTMLSpanElement>) => {\n    return (\n      <StyledTag {...restProps} tabIndex={0} ref={ref}>\n        {children}\n      </StyledTag>\n    );\n  }\n);\n\nexport default Tag;\n"]}

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode, Ref } from 'react';
+import { FunctionComponent, ReactNode, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
 export interface BannerProps extends BaseProps {
     /** Controls the styling of the Banner. */
@@ -17,7 +17,7 @@ export interface BannerProps extends BaseProps {
     /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */
     action?: ReactNode;
     /** Callback when user explicitly dismisses the Banner. */
-    onDismiss?(id: string): void;
+    onDismiss?: (id: string) => void;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledBannerMessages: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
@@ -30,7 +30,7 @@ export declare const StyledBannerMessage: import("styled-components").StyledComp
     inline: boolean;
 }, never>;
 export declare const StyledBannerDismissColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBannerDismissButton: import("styled-components").StyledComponent<React.FunctionComponent<import("../Button").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerDismissButton: import("styled-components").StyledComponent<FunctionComponent<import("../Button").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBannerStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerProps, "variant">, never>;
 export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Banner: FunctionComponent<BannerProps & ForwardProps>;

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,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAI9F,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,iIAAiI;IACjI,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB;YAAuB,OAAO;SAS7D,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAgBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAS5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,2KAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAgB7B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAKvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqGzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAYtD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,iIAAiI;IACjI,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB;YAAuB,OAAO;SAS7D,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAmBjE,CAAC;AAIH,eAAO,MAAM,mBAAmB;YAAuB,OAAO;SAS5D,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAQpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qKAAmB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,mIAkB7B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAKvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqGzD,CAAC;AAEF,eAAe,MAAM,CAAC"}