@pega/cosmos-react-core 2.0.0-dev.12.1 → 2.0.0-dev.14.2

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  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.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"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  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/Button/Button.d.ts

@@ -25,6 +25,11 @@ export interface ButtonProps extends BaseProps, AsProp {
      * @default false
      */
     icon?: boolean;
+    /**
+     * Used for a smaller sized button.
+     * @default false
+     */
+    compact?: boolean;
     /**
      * The label text will be used inside a Tooltip.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIA2MxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA+CzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIAyNxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiDzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Button/Button.js

@@ -11,7 +11,7 @@ import Progress, { StyledProgressRing } from '../Progress';
 import { StyledBackdrop } from '../Backdrop';
 import { StyledIcon } from '../Icon';
 import { StyledPopover } from '../Popover';
-export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, theme: { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor, 'foreground-color': textColor }, sizes: { 'touch-mouse': touchMouse, 'touch-finger': touchFinger }, animation: { speed, timing: { ease } }, 'disabled-opacity': disabledOpacity }, components: { button: { color, 'secondary-color': secondaryColor, padding, 'border-radius': borderRadius, 'border-width': borderWidth, 'focus-shadow': focusShadow, touch: { padding: touchPadding } }, link: { color: linkColor } } } }) => {
+export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme: { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor, 'foreground-color': textColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed, timing: { ease } }, 'disabled-opacity': disabledOpacity }, components: { button: { color, 'secondary-color': secondaryColor, padding, 'border-radius': borderRadius, 'border-width': borderWidth, 'focus-shadow': focusShadow, touch: { padding: touchPadding } }, link: { color: linkColor } } } }) => {
     const borderColor = variant === 'secondary' ? color : 'transparent';
     const contrastColor = tryCatch(() => readableColor(color));
     const hoverColors = getHoverColors(color);
@@ -118,13 +118,19 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
       ${variant !== 'link' &&
         variant !== 'text' &&
         css `
-        min-height: ${touchMouse};
-        min-width: ${touchMouse};
+        min-height: ${hitAreaMouse};
+        min-width: ${hitAreaMouse};
         border-radius: calc(${baseBorderRadius} * ${borderRadius});
         -webkit-user-select: none;
         user-select: none;
       `}
 
+      ${compact &&
+        css `
+        min-height: ${hitAreaCompact};
+        min-width: ${hitAreaCompact};
+      `}
+
       ${!icon &&
         variant !== 'link' &&
         variant !== 'text' &&
@@ -136,8 +142,11 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
         variant !== 'text' &&
         css `
         @media (pointer: coarse) {
-          min-height: ${touchFinger};
-          min-width: ${touchFinger};
+          ${!compact &&
+            css `
+            min-height: ${hitAreaFinger};
+            min-width: ${hitAreaFinger};
+          `}
           border-radius: calc(${baseBorderRadius} * ${borderRadius});
           ${!icon &&
             css `
@@ -185,11 +194,11 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
     `;
 });
 StyledButton.defaultProps = defaultThemeProp;
-const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled = false, icon = false, href, as, label, 'aria-label': ariaLabel, loading = false, children, ...restProps }, ref) => {
+const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled = false, icon = false, compact = false, href, as, label, 'aria-label': ariaLabel, loading = false, children, ...restProps }, ref) => {
     const [buttonEl, setButtonEl] = useElement();
     const buttonRef = useConsolidatedRef(ref, setButtonEl);
     const showProgress = loading && variant !== 'link' && variant !== 'text';
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({}, restProps, { ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: href ? 'a' : 'button', variant: variant, icon: icon, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label }, { children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }), void 0), buttonEl && label && (_jsx(Tooltip, Object.assign({ target: buttonEl, showDelay: 'none', hideDelay: 'none' }, { children: label }), void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({}, restProps, { ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: href ? 'a' : 'button', variant: variant, icon: icon, compact: compact, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label }, { children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }), void 0), buttonEl && label && (_jsx(Tooltip, Object.assign({ target: buttonEl, showDelay: 'none', hideDelay: 'none' }, { children: label }), void 0))] }, void 0));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default \"secondary\"\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * The label text will be used inside a Tooltip.\n   */\n  label?: string;\n  /**\n   * The aria label text will be inserted as the aria-label on the Button.\n   */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({\n    variant,\n    icon,\n    loading,\n    theme: {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n        sizes: { 'touch-mouse': touchMouse, 'touch-finger': touchFinger },\n        animation: {\n          speed,\n          timing: { ease }\n        },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          'focus-shadow': focusShadow,\n          touch: { padding: touchPadding }\n        },\n        link: { color: linkColor }\n      }\n    }\n  }) => {\n    const borderColor = variant === 'secondary' ? color : 'transparent';\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    const hoverColors = getHoverColors(color);\n    const hoverPrimaryColor = hoverColors.background;\n    const hoverContrastColor = hoverColors.foreground;\n\n    const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n    let buttonColor = contrastColor;\n    let buttonBackgroundColor = color;\n    if (variant === 'secondary') {\n      buttonColor = color;\n      buttonBackgroundColor = secondaryColor;\n    } else if (variant === 'simple') {\n      if (icon) {\n        buttonColor = 'currentColor';\n        buttonBackgroundColor = 'transparent';\n      } else {\n        buttonColor = color;\n        buttonBackgroundColor = backgroundColor;\n      }\n    } else if (variant === 'link') {\n      buttonColor = linkColor;\n      buttonBackgroundColor = 'transparent';\n    } else if (variant === 'text') {\n      buttonColor = textColor;\n      buttonBackgroundColor = 'transparent';\n    }\n\n    return css`\n      color: ${buttonColor};\n      background-color: ${buttonBackgroundColor};\n      display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};\n      align-items: center;\n      outline: none;\n      text-decoration: none;\n      transition: all calc(0.5 * ${speed}) ${ease};\n      cursor: pointer;\n\n      ${variant !== 'link' && variant !== 'text'\n        ? css`\n            justify-content: center;\n            line-height: 1;\n            border: ${borderWidth} solid ${borderColor};\n            position: relative;\n          `\n        : css`\n            text-align: start;\n            border: none;\n\n            > ${StyledIcon} {\n              vertical-align: bottom;\n            }\n          `}\n\n      & + & {\n        margin-inline-start: ${spacing};\n      }\n\n      /* Not able to combine with selector above. Stylis bug? */\n      & + ${StyledPopover} + & {\n        margin-inline-start: ${spacing};\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          ${variant === 'primary' &&\n          css`\n            background-color: ${hoverPrimaryColor};\n            color: ${hoverContrastColor};\n            text-decoration: none;\n          `}\n\n          ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&\n          css`\n            background-color: ${secondaryHoverColor};\n            text-decoration: none;\n          `}\n\n          ${variant === 'simple' &&\n          icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.15;\n            }\n          `}\n\n          ${(variant === 'link' || variant === 'text') &&\n          css`\n            text-decoration: underline;\n          `}\n        }\n      }\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        min-height: ${touchMouse};\n        min-width: ${touchMouse};\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        -webkit-user-select: none;\n        user-select: none;\n      `}\n\n      ${!icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        @media (pointer: coarse) {\n          min-height: ${touchFinger};\n          min-width: ${touchFinger};\n          border-radius: calc(${baseBorderRadius} * ${borderRadius});\n          ${!icon &&\n          css`\n            padding: ${touchPadding};\n          `}\n        }\n      `}\n\n      &:disabled,\n      &[disabled] {\n        opacity: ${disabledOpacity};\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${focusShadow};\n      }\n\n      ${icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: ${buttonBackgroundColor};\n          border-radius: inherit;\n        }\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'secondary',\n      type = 'button',\n      disabled = false,\n      icon = false,\n      href,\n      as,\n      label,\n      'aria-label': ariaLabel,\n      loading = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<ButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const [buttonEl, setButtonEl] = useElement();\n    const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n    const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n    return (\n      <>\n        <StyledButton\n          {...restProps}\n          ref={buttonRef}\n          as={as || (href ? 'a' : 'button')}\n          forwardedAs={href ? 'a' : 'button'}\n          variant={variant}\n          icon={icon}\n          type={href ? undefined : type}\n          href={href}\n          disabled={disabled && !href}\n          loading={showProgress}\n          aria-label={ariaLabel || label}\n        >\n          {showProgress && <Progress variant='ring' placement='local' />}\n          {children}\n        </StyledButton>\n        {buttonEl && label && (\n          <Tooltip target={buttonEl} showDelay='none' hideDelay='none'>\n            {label}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default \"secondary\"\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * The label text will be used inside a Tooltip.\n   */\n  label?: string;\n  /**\n   * The aria label text will be inserted as the aria-label on the Button.\n   */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({\n    variant,\n    icon,\n    loading,\n    compact,\n    theme: {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          'focus-shadow': focusShadow,\n          touch: { padding: touchPadding }\n        },\n        link: { color: linkColor }\n      }\n    }\n  }) => {\n    const borderColor = variant === 'secondary' ? color : 'transparent';\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    const hoverColors = getHoverColors(color);\n    const hoverPrimaryColor = hoverColors.background;\n    const hoverContrastColor = hoverColors.foreground;\n\n    const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n    let buttonColor = contrastColor;\n    let buttonBackgroundColor = color;\n    if (variant === 'secondary') {\n      buttonColor = color;\n      buttonBackgroundColor = secondaryColor;\n    } else if (variant === 'simple') {\n      if (icon) {\n        buttonColor = 'currentColor';\n        buttonBackgroundColor = 'transparent';\n      } else {\n        buttonColor = color;\n        buttonBackgroundColor = backgroundColor;\n      }\n    } else if (variant === 'link') {\n      buttonColor = linkColor;\n      buttonBackgroundColor = 'transparent';\n    } else if (variant === 'text') {\n      buttonColor = textColor;\n      buttonBackgroundColor = 'transparent';\n    }\n\n    return css`\n      color: ${buttonColor};\n      background-color: ${buttonBackgroundColor};\n      display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};\n      align-items: center;\n      outline: none;\n      text-decoration: none;\n      transition: all calc(0.5 * ${speed}) ${ease};\n      cursor: pointer;\n\n      ${variant !== 'link' && variant !== 'text'\n        ? css`\n            justify-content: center;\n            line-height: 1;\n            border: ${borderWidth} solid ${borderColor};\n            position: relative;\n          `\n        : css`\n            text-align: start;\n            border: none;\n\n            > ${StyledIcon} {\n              vertical-align: bottom;\n            }\n          `}\n\n      & + & {\n        margin-inline-start: ${spacing};\n      }\n\n      /* Not able to combine with selector above. Stylis bug? */\n      & + ${StyledPopover} + & {\n        margin-inline-start: ${spacing};\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          ${variant === 'primary' &&\n          css`\n            background-color: ${hoverPrimaryColor};\n            color: ${hoverContrastColor};\n            text-decoration: none;\n          `}\n\n          ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&\n          css`\n            background-color: ${secondaryHoverColor};\n            text-decoration: none;\n          `}\n\n          ${variant === 'simple' &&\n          icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.15;\n            }\n          `}\n\n          ${(variant === 'link' || variant === 'text') &&\n          css`\n            text-decoration: underline;\n          `}\n        }\n      }\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        min-height: ${hitAreaMouse};\n        min-width: ${hitAreaMouse};\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        -webkit-user-select: none;\n        user-select: none;\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      ${!icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        @media (pointer: coarse) {\n          ${!compact &&\n          css`\n            min-height: ${hitAreaFinger};\n            min-width: ${hitAreaFinger};\n          `}\n          border-radius: calc(${baseBorderRadius} * ${borderRadius});\n          ${!icon &&\n          css`\n            padding: ${touchPadding};\n          `}\n        }\n      `}\n\n      &:disabled,\n      &[disabled] {\n        opacity: ${disabledOpacity};\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${focusShadow};\n      }\n\n      ${icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: ${buttonBackgroundColor};\n          border-radius: inherit;\n        }\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'secondary',\n      type = 'button',\n      disabled = false,\n      icon = false,\n      compact = false,\n      href,\n      as,\n      label,\n      'aria-label': ariaLabel,\n      loading = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<ButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const [buttonEl, setButtonEl] = useElement();\n    const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n    const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n    return (\n      <>\n        <StyledButton\n          {...restProps}\n          ref={buttonRef}\n          as={as || (href ? 'a' : 'button')}\n          forwardedAs={href ? 'a' : 'button'}\n          variant={variant}\n          icon={icon}\n          compact={compact}\n          type={href ? undefined : type}\n          href={href}\n          disabled={disabled && !href}\n          loading={showProgress}\n          aria-label={ariaLabel || label}\n        >\n          {showProgress && <Progress variant='ring' placement='local' />}\n          {children}\n        </StyledButton>\n        {buttonEl && label && (\n          <Tooltip target={buttonEl} showDelay='none' hideDelay='none'>\n            {label}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Button;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI9D,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAOD,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8BrD,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAK9D,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAOD,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8BrD,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
+import { StyledPopover } from '../Popover';
 import { StyledCardMedia } from './CardMedia';
 const defaultProps = {
     interactive: false,
@@ -23,7 +24,7 @@ export const StyledCard = styled.article(props => {
       `
         : undefined;
     return css `
-    &:not(& &) {
+    ${StyledPopover} &, &:not(& &) {
       background-color: ${background};
       border-radius: ${borderRadius};
 

package/lib/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAoB9C,MAAM,YAAY,GAAuB;IACvC,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;;0BAEc,UAAU;uBACb,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;GAIpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,GAAG,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC;QACrB,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,IACJ,gBAAgB,EAChB,SAAS,cAEZ,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;AAEjC,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { ForwardProps, BaseProps, AsProp } from '../../types';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: (event: any) => void;\n  /**\n   * HTML role attribute for accessibility.\n   * @default \"region\"\n   */\n  role?: string;\n}\n\nconst defaultProps: Partial<CardProps> = {\n  interactive: false,\n  role: 'region'\n};\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    &:not(& &) {\n      background-color: ${background};\n      border-radius: ${borderRadius};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: ${borderRadius} ${borderRadius} 0 0;\n        }\n      }\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CardProps>, ref: Ref<HTMLElement>) => {\n    const { children, as, onClick, interactive, role, ...restProps } = props;\n\n    const interactiveProps = {\n      ...(onClick && {\n        onClick,\n        tabIndex: 0,\n        role: 'button'\n      }),\n      ...(interactive && {\n        tabIndex: 0\n      }),\n      ...(role && { role }),\n      interactive\n    };\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledCard}\n        forwardedAs={as}\n        ref={ref}\n        {...interactiveProps}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nCard.defaultProps = defaultProps;\n\nexport default Card;\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAoB9C,MAAM,YAAY,GAAuB;IACvC,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;MACN,aAAa;0BACO,UAAU;uBACb,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;GAIpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,GAAG,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC;QACrB,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,IACJ,gBAAgB,EAChB,SAAS,cAEZ,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;AAEjC,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: (event: any) => void;\n  /**\n   * HTML role attribute for accessibility.\n   * @default \"region\"\n   */\n  role?: string;\n}\n\nconst defaultProps: Partial<CardProps> = {\n  interactive: false,\n  role: 'region'\n};\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    ${StyledPopover} &, &:not(& &) {\n      background-color: ${background};\n      border-radius: ${borderRadius};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: ${borderRadius} ${borderRadius} 0 0;\n        }\n      }\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CardProps>, ref: Ref<HTMLElement>) => {\n    const { children, as, onClick, interactive, role, ...restProps } = props;\n\n    const interactiveProps = {\n      ...(onClick && {\n        onClick,\n        tabIndex: 0,\n        role: 'button'\n      }),\n      ...(interactive && {\n        tabIndex: 0\n      }),\n      ...(role && { role }),\n      interactive\n    };\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledCard}\n        forwardedAs={as}\n        ref={ref}\n        {...interactiveProps}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nCard.defaultProps = defaultProps;\n\nexport default Card;\n"]}

package/lib/components/Card/CardContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,iBAAiB,yGAY5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAUnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAM1C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,iBAAiB,yGAY5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAUnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Card/CardContent.js

@@ -2,17 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
+import { StyledPopover } from '../Popover';
 import { StyledCard } from './Card';
 import { StyledCardFooter } from './CardFooter';
 export const StyledCardContent = styled.div(({ theme }) => {
     return css `
-    &:not(${StyledCard} ${StyledCard} > &) {
+    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {
       position: relative;
-      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
+      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
 
       & + &,
       & + ${StyledCardFooter} {
-        padding-top: 0;
+        padding-block-start: 0;
       }
     }
   `;

package/lib/components/Card/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.js","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAmB,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;YACA,UAAU,IAAI,UAAU;;6BAEP,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;YAG1E,gBAAgB;;;;GAIzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,CAAC,EACvE,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACuC,EAAE,EAAE;IACvD,OAAO,CACL,KAAC,IAAI,oBAAK,SAAS,IAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,gBACzF,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\n\nimport { StyledCard } from './Card';\nimport { StyledCardFooter } from './CardFooter';\n\nexport interface CardContentProps extends BaseProps {\n  /** The content of the Card. */\n  children: ReactNode;\n  container?: Exclude<FlexProps['container'], boolean>;\n}\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      position: relative;\n      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      & + &,\n      & + ${StyledCardFooter} {\n        padding-top: 0;\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nconst CardContent: FunctionComponent<CardContentProps & ForwardProps> = ({\n  children,\n  container,\n  ...restProps\n}: PropsWithChildren<CardContentProps & ForwardProps>) => {\n  return (\n    <Flex {...restProps} container={{ direction: 'column', ...container }} as={StyledCardContent}>\n      {children}\n    </Flex>\n  );\n};\n\nexport default CardContent;\n"]}
+{"version":3,"file":"CardContent.js","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAmB,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;;4BAE5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;YAGzE,gBAAgB;;;;GAIzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,CAAC,EACvE,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACuC,EAAE,EAAE;IACvD,OAAO,CACL,KAAC,IAAI,oBAAK,SAAS,IAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,gBACzF,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCard } from './Card';\nimport { StyledCardFooter } from './CardFooter';\n\nexport interface CardContentProps extends BaseProps {\n  /** The content of the Card. */\n  children: ReactNode;\n  container?: Exclude<FlexProps['container'], boolean>;\n}\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      position: relative;\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      & + &,\n      & + ${StyledCardFooter} {\n        padding-block-start: 0;\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nconst CardContent: FunctionComponent<CardContentProps & ForwardProps> = ({\n  children,\n  container,\n  ...restProps\n}: PropsWithChildren<CardContentProps & ForwardProps>) => {\n  return (\n    <Flex {...restProps} container={{ direction: 'column', ...container }} as={StyledCardContent}>\n      {children}\n    </Flex>\n  );\n};\n\nexport default CardContent;\n"]}

package/lib/components/Card/CardFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAI7D,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAItD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sFAAsF;IACtF,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAkBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CardFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAI7D,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sFAAsF;IACtF,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAkBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Card/CardFooter.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
+import { StyledPopover } from '../Popover';
 import { StyledCard } from './Card';
 export const StyledCardFooter = styled.footer(({ theme }) => {
     return css `
-    &:not(${StyledCard} ${StyledCard} > &) {
-      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
+    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {
+      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
     }
   `;
 });

package/lib/components/Card/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../../../src/components/Card/CardFooter.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAA4B,MAAM,SAAS,CAAC;AAGnD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAOpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;YACA,UAAU,IAAI,UAAU;6BACP,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;GAEnF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,CACpE,KAAyC,EACzC,EAAE;IACF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,KAAC,IAAI,kBACH,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,QAAQ;YACpB,OAAO;SACR,IACG,SAAS,cAEZ,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, PropsWithChildren } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex, { FlexContainerProps } from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nimport { StyledCard } from './Card';\n\nexport interface CardFooterProps extends BaseProps {\n  /** [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/) */\n  justify?: FlexContainerProps['justify'];\n}\n\nexport const StyledCardFooter = styled.footer(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n    }\n  `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nconst CardFooter: FunctionComponent<CardFooterProps & ForwardProps> = (\n  props: PropsWithChildren<CardFooterProps>\n) => {\n  const { children, justify, ...restProps } = props;\n\n  return (\n    <Flex\n      as={StyledCardFooter}\n      container={{\n        wrap: 'wrap',\n        alignItems: 'center',\n        justify\n      }}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n};\n\nexport default CardFooter;\n"]}
+{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../../../src/components/Card/CardFooter.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAA4B,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAOpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;4BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;GAElF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,CACpE,KAAyC,EACzC,EAAE;IACF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,KAAC,IAAI,kBACH,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,QAAQ;YACpB,OAAO;SACR,IACG,SAAS,cAEZ,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, PropsWithChildren } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex, { FlexContainerProps } from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCard } from './Card';\n\nexport interface CardFooterProps extends BaseProps {\n  /** [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/) */\n  justify?: FlexContainerProps['justify'];\n}\n\nexport const StyledCardFooter = styled.footer(({ theme }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n    }\n  `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nconst CardFooter: FunctionComponent<CardFooterProps & ForwardProps> = (\n  props: PropsWithChildren<CardFooterProps>\n) => {\n  const { children, justify, ...restProps } = props;\n\n  return (\n    <Flex\n      as={StyledCardFooter}\n      container={{\n        wrap: 'wrap',\n        alignItems: 'center',\n        justify\n      }}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n};\n\nexport default CardFooter;\n"]}

package/lib/components/Card/CardHeader.d.ts

@@ -1,10 +1,12 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
 export interface CardHeaderProps extends BaseProps {
     /** The Card header content. */
     children: ReactNode;
     /** Action Buttons that will render within the header. */
     actions?: ReactNode;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, CardHeaderProps, never>;
 declare const CardHeader: FunctionComponent<CardHeaderProps & ForwardProps>;

package/lib/components/Card/CardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,yHAc3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAuBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKzF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yHAc3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAyBjE,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/lib/components/Card/CardHeader.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
+import { StyledPopover } from '../Popover';
 import { StyledCard } from './Card';
 import { StyledCardContent } from './CardContent';
 export const StyledCardHeader = styled.header(({ theme, onClick }) => {
     return css `
-    &:not(${StyledCard} ${StyledCard} > &) {
-      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
+    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {
+      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
 
       + ${StyledCardContent} {
-        padding-top: 0;
+        padding-block-start: 0;
       }
 
       &:hover {
@@ -20,8 +22,9 @@ export const StyledCardHeader = styled.header(({ theme, onClick }) => {
   `;
 });
 StyledCardHeader.defaultProps = defaultThemeProp;
-const CardHeader = ({ children, actions, ...restProps }) => {
-    return (_jsx(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader }, restProps, { children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, item: { grow: 1 } }, { children: children }), void 0), _jsx("div", { children: actions }, void 0)] }, void 0)) : (children) }), void 0));
-};
+const CardHeader = forwardRef(({ children, actions, ...restProps }, ref) => {
+    return (_jsx(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader }, restProps, { ref: ref }, { children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, item: { grow: 1 } }, { children: children }), void 0), _jsx("div", { children: actions }, void 0)] }, void 0)) : (children) }), void 0));
+});
+CardHeader.displayName = 'CardHeader';
 export default CardHeader;
 //# sourceMappingURL=CardHeader.js.map

package/lib/components/Card/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AASlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;YACA,UAAU,IAAI,UAAU;6BACP,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;UAE5E,iBAAiB;;;;;UAKjB,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,CAAC,EACrE,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACuB,EAAE,EAAE;IACvC,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,IAChB,SAAS,cAEZ,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,gBACzD,QAAQ,YACJ,EACP,wBAAM,OAAO,WAAO,YACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nimport { StyledCard } from './Card';\nimport { StyledCardContent } from './CardContent';\n\nexport interface CardHeaderProps extends BaseProps {\n  /** The Card header content. */\n  children: ReactNode;\n  /** Action Buttons that will render within the header. */\n  actions?: ReactNode;\n}\n\nexport const StyledCardHeader = styled.header<CardHeaderProps>(({ theme, onClick }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      + ${StyledCardContent} {\n        padding-top: 0;\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: FunctionComponent<CardHeaderProps & ForwardProps> = ({\n  children,\n  actions,\n  ...restProps\n}: PropsWithChildren<CardHeaderProps>) => {\n  return (\n    <Flex\n      container={{ alignItems: 'center', justify: 'between' }}\n      as={StyledCardHeader}\n      {...restProps}\n    >\n      {actions ? (\n        <>\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }}>\n            {children}\n          </Flex>\n          <div>{actions}</div>\n        </>\n      ) : (\n        children\n      )}\n    </Flex>\n  );\n};\n\nexport default CardHeader;\n"]}
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAwD,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;4BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;UAE3E,iBAAiB;;;;;UAKjB,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EACvE,GAA2B,EAC3B,EAAE;IACF,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,IAChB,SAAS,IACb,GAAG,EAAE,GAAG,gBAEP,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,gBACzD,QAAQ,YACJ,EACP,wBAAM,OAAO,WAAO,YACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithChildren, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCard } from './Card';\nimport { StyledCardContent } from './CardContent';\n\nexport interface CardHeaderProps extends BaseProps {\n  /** The Card header content. */\n  children: ReactNode;\n  /** Action Buttons that will render within the header. */\n  actions?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCardHeader = styled.header<CardHeaderProps>(({ theme, onClick }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      + ${StyledCardContent} {\n        padding-block-start: 0;\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: FunctionComponent<CardHeaderProps & ForwardProps> = forwardRef(\n  (\n    { children, actions, ...restProps }: PropsWithChildren<CardHeaderProps>,\n    ref: CardHeaderProps['ref']\n  ) => {\n    return (\n      <Flex\n        container={{ alignItems: 'center', justify: 'between' }}\n        as={StyledCardHeader}\n        {...restProps}\n        ref={ref}\n      >\n        {actions ? (\n          <>\n            <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }}>\n              {children}\n            </Flex>\n            <div>{actions}</div>\n          </>\n        ) : (\n          children\n        )}\n      </Flex>\n    );\n  }\n);\n\nCardHeader.displayName = 'CardHeader';\nexport default CardHeader;\n"]}

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import ComboBoxProps from './ComboBox.types';
-export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
 declare const ComboBox: FunctionComponent<ComboBoxProps & ForwardProps>;
 export default ComboBox;
 //# sourceMappingURL=ComboBox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AA6B7C,eAAO,MAAM,cAAc,gOAO1B,CAAC;AAQF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8L7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AA6B7C,eAAO,MAAM,cAAc,4PAO1B,CAAC;AAQF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8L7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/ComboBox/ComboBox.js

@@ -10,6 +10,7 @@ import { StyledFormControl } from '../FormControl';
 import Menu from '../Menu';
 import Button from '../Button';
 import { navigatorIsAvailable } from '../../utils';
+import menuHelpers from '../Menu/helpers';
 import ComboBoxInput from './ComboBoxInput';
 const popoverModifiers = [
     {
@@ -126,7 +127,7 @@ const ComboBox = forwardRef((props, ref) => {
                             setOpen(false);
                         }
                         menu.onItemClick?.(itemId, e);
-                        const clickedItem = menu.items.find(item => item.id === itemId);
+                        const clickedItem = menuHelpers.getItem(menu.items, itemId);
                         if (clickedItem?.primary && !clickedItem?.selected) {
                             selected?.onNew?.(clickedItem?.primary);
                         }

package/lib/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nconst popoverModifiers: PopoverProps['modifiers'] = [\n  {\n    name: 'flip',\n    enabled: true,\n    options: {\n      fallbackPlacements: ['top-start']\n    }\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true\n  },\n  {\n    name: 'hide',\n    enabled: false\n  },\n  {\n    name: 'sameWidth',\n    enabled: true,\n    phase: 'beforeWrite',\n    fn({ state }) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    requires: ['computeStyles']\n  }\n];\n\nexport const StyledComboBox = styled(StyledFormControl)`\n  border: 0;\n\n  & ${StyledPopover} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      value,\n      required,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      readOnly,\n      disabled,\n      mode = 'single-select',\n      selected,\n      onChange,\n      actions,\n      onFocus,\n      onBlur,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      menu,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const menuComponentId = `${id}-listbox`;\n\n    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n    const [, setContainerEl] = useElement();\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n    useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        onBlur?.(selected?.items);\n      } else {\n        onFocus?.(selected?.items);\n        if (isMobile) {\n          setTimeout(() => {\n            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }, 150); // delay it to let keyboard expand first\n        }\n      }\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) setOpen(true);\n            break;\n          case 'Escape':\n            e.preventDefault();\n            if (open) e.stopPropagation();\n            setOpen(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\n          aria-label={t(\n            open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n          )}\n          icon\n          variant='simple'\n          onClick={onDropdownButtonClick}\n          disabled={disabled}\n          tabIndex='-1'\n        >\n          <Icon name={open ? 'caret-up' : 'caret-down'} />\n        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value]);\n\n    // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n    // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n    const inputActions = (\n      <>\n        {dropdownButton}\n        {actions}\n      </>\n    );\n\n    const Comp = (\n      <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n        <ComboBoxInput\n          ref={inputRef}\n          role='combobox'\n          aria-haspopup='listbox'\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-describedby={`${id}-inputDescription`}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          {...restProps}\n        />\n\n        <StyledAriaDescription id={`${id}-inputDescription`}>\n          {t('combobox_open_close')}\n          {!!onChange && ` ${t('combobox_search_instructions')}`}\n        </StyledAriaDescription>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={popoverModifiers}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\n              id={menuComponentId}\n              role='listbox'\n              mode={mode}\n              {...menu}\n              items={menu.items}\n              focusControlEl={inputRef.current || undefined}\n              onItemClick={(itemId, e) => {\n                if (mode === 'single-select') {\n                  setOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n\n                const clickedItem = menu.items.find(item => item.id === itemId);\n\n                if (clickedItem?.primary && !clickedItem?.selected) {\n                  selected?.onNew?.(clickedItem?.primary);\n                }\n              }}\n              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default ComboBox;\n"]}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nconst popoverModifiers: PopoverProps['modifiers'] = [\n  {\n    name: 'flip',\n    enabled: true,\n    options: {\n      fallbackPlacements: ['top-start']\n    }\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true\n  },\n  {\n    name: 'hide',\n    enabled: false\n  },\n  {\n    name: 'sameWidth',\n    enabled: true,\n    phase: 'beforeWrite',\n    fn({ state }) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    requires: ['computeStyles']\n  }\n];\n\nexport const StyledComboBox = styled(StyledFormControl)`\n  border: 0;\n\n  & ${StyledPopover} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      value,\n      required,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      readOnly,\n      disabled,\n      mode = 'single-select',\n      selected,\n      onChange,\n      actions,\n      onFocus,\n      onBlur,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      menu,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const menuComponentId = `${id}-listbox`;\n\n    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n    const [, setContainerEl] = useElement();\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n    useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        onBlur?.(selected?.items);\n      } else {\n        onFocus?.(selected?.items);\n        if (isMobile) {\n          setTimeout(() => {\n            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }, 150); // delay it to let keyboard expand first\n        }\n      }\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) setOpen(true);\n            break;\n          case 'Escape':\n            e.preventDefault();\n            if (open) e.stopPropagation();\n            setOpen(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\n          aria-label={t(\n            open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n          )}\n          icon\n          variant='simple'\n          onClick={onDropdownButtonClick}\n          disabled={disabled}\n          tabIndex='-1'\n        >\n          <Icon name={open ? 'caret-up' : 'caret-down'} />\n        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value]);\n\n    // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n    // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n    const inputActions = (\n      <>\n        {dropdownButton}\n        {actions}\n      </>\n    );\n\n    const Comp = (\n      <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n        <ComboBoxInput\n          ref={inputRef}\n          role='combobox'\n          aria-haspopup='listbox'\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-describedby={`${id}-inputDescription`}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          {...restProps}\n        />\n\n        <StyledAriaDescription id={`${id}-inputDescription`}>\n          {t('combobox_open_close')}\n          {!!onChange && ` ${t('combobox_search_instructions')}`}\n        </StyledAriaDescription>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={popoverModifiers}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\n              id={menuComponentId}\n              role='listbox'\n              mode={mode}\n              {...menu}\n              items={menu.items}\n              focusControlEl={inputRef.current || undefined}\n              onItemClick={(itemId, e) => {\n                if (mode === 'single-select') {\n                  setOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n\n                const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                if (clickedItem?.primary && !clickedItem?.selected) {\n                  selected?.onNew?.(clickedItem?.primary);\n                }\n              }}\n              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default ComboBox;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,iBAAiB,4HAuD5B,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,iBAAiB,4HAwD5B,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js

@@ -28,6 +28,7 @@ export const StyledMultiSelect = styled.div(props => {
 
     input {
       min-width: 0;
+      width: 100%;
       color: ${formControl['foreground-color']};
       text-overflow: ellipsis;
       margin-inline-start: ${base.spacing};

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { StyledButton } from '../../Button';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelect = styled.div<MultiSelectInputProps>(props => {\n  const {\n    theme: {\n      components: {\n        'form-control': formControl,\n        input: { height }\n      },\n      base\n    }\n  } = props;\n\n  return css`\n    min-height: ${height};\n\n    &:focus-within {\n      border-color: ${formControl[':focus']['border-color']};\n      box-shadow: ${formControl[':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    input {\n      min-width: 0;\n      color: ${formControl['foreground-color']};\n      text-overflow: ellipsis;\n      margin-inline-start: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${base.spacing});\n    }\n\n    > ${StyledButton} {\n      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n      height: calc(${height} - 2 * ${formControl['border-width']});\n    }\n  `;\n});\n\nStyledMultiSelect.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        const lastIndex = selected.length - 1;\n        if (e.key === 'Backspace' && !value && selected.length > 0) {\n          onRemove?.(selected[lastIndex].id, lastIndex);\n        }\n        onKeyDown?.(e);\n      },\n      [onKeyDown, value, selected]\n    );\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        as={StyledMultiSelect}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex\n          ref={listRef}\n          as='ul'\n          item={{ grow: 1 }}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onBlur={() => {\n            listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n              el.tabIndex = -1;\n            });\n            if (inputRef.current) inputRef.current.tabIndex = 0;\n          }}\n        >\n          {selected.map((element, idx) => {\n            return (\n              <li key={element.id}>\n                <Selectable\n                  id={element.id.toString()}\n                  disabled={readOnly || disabled}\n                  status={status}\n                  onRemove={id => {\n                    onRemove?.(id, idx);\n                    inputRef.current?.focus();\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                    if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n                      inputRef.current?.focus();\n                  }}\n                >\n                  {element.text}\n                </Selectable>\n              </li>\n            );\n          })}\n          <Flex as='li' item={{ grow: 1 }} container>\n            <input\n              size={5}\n              ref={inputRef}\n              value={value}\n              // no-op avoids react uncontrolled warning\n              onChange={onChange || (() => {})}\n              onKeyDown={onInputKeyDown}\n              readOnly={readOnly || !onChange}\n              placeholder={selected?.length ? undefined : placeholder}\n              autoComplete='off'\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...restProps}\n            />\n          </Flex>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}
+{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { StyledButton } from '../../Button';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelect = styled.div<MultiSelectInputProps>(props => {\n  const {\n    theme: {\n      components: {\n        'form-control': formControl,\n        input: { height }\n      },\n      base\n    }\n  } = props;\n\n  return css`\n    min-height: ${height};\n\n    &:focus-within {\n      border-color: ${formControl[':focus']['border-color']};\n      box-shadow: ${formControl[':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      color: ${formControl['foreground-color']};\n      text-overflow: ellipsis;\n      margin-inline-start: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${base.spacing});\n    }\n\n    > ${StyledButton} {\n      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n      height: calc(${height} - 2 * ${formControl['border-width']});\n    }\n  `;\n});\n\nStyledMultiSelect.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        const lastIndex = selected.length - 1;\n        if (e.key === 'Backspace' && !value && selected.length > 0) {\n          onRemove?.(selected[lastIndex].id, lastIndex);\n        }\n        onKeyDown?.(e);\n      },\n      [onKeyDown, value, selected]\n    );\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        as={StyledMultiSelect}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex\n          ref={listRef}\n          as='ul'\n          item={{ grow: 1 }}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onBlur={() => {\n            listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n              el.tabIndex = -1;\n            });\n            if (inputRef.current) inputRef.current.tabIndex = 0;\n          }}\n        >\n          {selected.map((element, idx) => {\n            return (\n              <li key={element.id}>\n                <Selectable\n                  id={element.id.toString()}\n                  disabled={readOnly || disabled}\n                  status={status}\n                  onRemove={id => {\n                    onRemove?.(id, idx);\n                    inputRef.current?.focus();\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                    if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n                      inputRef.current?.focus();\n                  }}\n                >\n                  {element.text}\n                </Selectable>\n              </li>\n            );\n          })}\n          <Flex as='li' item={{ grow: 1 }} container>\n            <input\n              size={5}\n              ref={inputRef}\n              value={value}\n              // no-op avoids react uncontrolled warning\n              onChange={onChange || (() => {})}\n              onKeyDown={onInputKeyDown}\n              readOnly={readOnly || !onChange}\n              placeholder={selected?.length ? undefined : placeholder}\n              autoComplete='off'\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...restProps}\n            />\n          </Flex>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\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;AAsD/D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/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;AAM5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAuD/D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}