@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/Button/Button.js

@@ -1,101 +1,148 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { mix, readableColor } from 'polished';
+import { meetsContrastGuidelines, mix, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
-import { getHoverColors, omitProps } from '../../styles';
+import { getHoverColors, omitProps, readableHue } from '../../styles';
 import { useElement, useConsolidatedRef } from '../../hooks';
 import Tooltip from '../Tooltip';
 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, 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);
-    const hoverPrimaryColor = hoverColors.background;
-    const hoverContrastColor = hoverColors.foreground;
-    const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));
-    let buttonColor = contrastColor;
-    let buttonBackgroundColor = color;
-    if (variant === 'secondary') {
-        buttonColor = color;
-        buttonBackgroundColor = secondaryColor;
+const baseStyles = (theme) => {
+    const { base: { spacing, animation: { speed, timing: { ease } }, 'disabled-opacity': disabledOpacity }, components: { button: { 'focus-shadow': focusShadow } } } = theme;
+    return css `
+    outline: none;
+    text-decoration: none;
+    transition-property: background-color, color, box-shadow;
+    transition-duration: calc(0.5 * ${speed});
+    transition-timing-function: ${ease};
+    cursor: pointer;
+
+    & + & {
+      margin-inline-start: ${spacing};
     }
-    else if (variant === 'simple') {
-        if (icon) {
-            buttonColor = 'currentColor';
-            buttonBackgroundColor = 'transparent';
-        }
-        else {
-            buttonColor = color;
-            buttonBackgroundColor = backgroundColor;
-        }
+
+    /* Not able to combine with selector above. Stylis bug? */
+    & + ${StyledPopover} + & {
+      margin-inline-start: ${spacing};
     }
-    else if (variant === 'link') {
-        buttonColor = linkColor;
-        buttonBackgroundColor = 'transparent';
+
+    &:disabled,
+    &[disabled] {
+      opacity: ${disabledOpacity};
+      cursor: not-allowed;
+      pointer-events: none;
     }
-    else if (variant === 'text') {
-        buttonColor = textColor;
-        buttonBackgroundColor = 'transparent';
+
+    &:enabled:focus,
+    &:not([disabled]):focus {
+      box-shadow: ${focusShadow};
     }
-    return css `
-      color: ${buttonColor};
-      background-color: ${buttonBackgroundColor};
-      display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};
+  `;
+};
+export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme }) => {
+    const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, 'secondary-color': buttonSecondaryColor, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
+    const contrastColor = tryCatch(() => readableColor(color));
+    // Base
+    const base = baseStyles(theme);
+    // Non-text base
+    const nonTextual = css `
+      position: relative;
+      display: inline-flex;
       align-items: center;
-      outline: none;
-      text-decoration: none;
-      transition-property: background-color, color, box-shadow;
-      transition-duration: calc(0.5 * ${speed});
-      transition-timing-function: ${ease};
-      cursor: pointer;
-
-      ${variant !== 'link' && variant !== 'text'
-        ? css `
-            justify-content: center;
-            line-height: 1;
-            border: ${borderWidth} solid ${borderColor};
-            position: relative;
-          `
-        : css `
-            text-align: start;
-            border: none;
-
-            > ${StyledIcon} {
-              vertical-align: bottom;
-            }
-          `}
+      justify-content: center;
+      min-height: ${hitAreaMouse};
+      min-width: ${hitAreaMouse};
+      line-height: 1;
+      border: ${borderWidth} solid transparent;
+      border-radius: calc(${baseBorderRadius} * ${borderRadius});
+      -webkit-user-select: none;
+      user-select: none;
 
-      & + & {
-        margin-inline-start: ${spacing};
-      }
+      ${!icon &&
+        css `
+        padding: ${padding};
+      `}
+
+      ${icon &&
+        css `
+        border-radius: calc(${baseBorderRadius} * ${borderRadius});
+
+        > svg {
+          display: block;
+        }
+      `}
+
+      ${compact &&
+        css `
+        min-height: ${hitAreaCompact};
+        min-width: ${hitAreaCompact};
+      `}
+
+      @media (pointer: coarse) {
+        border-radius: calc(${baseBorderRadius} * ${borderRadius});
 
-      /* Not able to combine with selector above. Stylis bug? */
-      & + ${StyledPopover} + & {
-        margin-inline-start: ${spacing};
+        ${!compact &&
+        css `
+          min-height: ${hitAreaFinger};
+          min-width: ${hitAreaFinger};
+        `}
+
+        ${!icon &&
+        css `
+          padding: ${touchPadding};
+        `}
       }
+    `;
+    // Primary
+    const hoverColors = getHoverColors(color);
+    const hoverPrimaryColor = hoverColors.background;
+    const hoverContrastColor = hoverColors.foreground;
+    const primary = css `
+      --button-background-color: ${color};
+      color: ${contrastColor};
+      background-color: ${color};
 
       @media (hover: hover) {
         &:hover {
-          ${variant === 'primary' &&
-        css `
-            background-color: ${hoverPrimaryColor};
-            color: ${hoverContrastColor};
-            text-decoration: none;
-          `}
+          background-color: ${hoverPrimaryColor};
+          color: ${hoverContrastColor};
+          text-decoration: none;
+        }
+      }
+    `;
+    // Secondary
+    const backgroundUsable = meetsContrastGuidelines(color, buttonSecondaryColor).AA;
+    const secondaryColor = backgroundUsable ? buttonSecondaryColor : readableColor(color);
+    const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor, color));
+    const secondaryHoverForegroundColor = readableHue(color, secondaryHoverBackgroundColor ?? 'transparent');
+    const secondary = css `
+      --button-background-color: ${secondaryColor};
+      color: ${color};
+      background-color: ${secondaryColor};
+      border-color: ${color};
 
-          ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&
-        css `
-            background-color: ${secondaryHoverColor};
-            text-decoration: none;
-          `}
+      @media (hover: hover) {
+        &:hover {
+          color: ${secondaryHoverForegroundColor};
+          background-color: ${secondaryHoverBackgroundColor};
+          text-decoration: none;
+          border-color: ${secondaryHoverForegroundColor};
+        }
+      }
+    `;
+    // Simple
+    const simple = css `
+      --button-background-color: ${icon ? 'transparent' : backgroundColor};
+      color: ${icon ? 'currentColor' : color};
+      background-color: ${icon ? 'transparent' : backgroundColor};
 
-          ${variant === 'simple' &&
-        icon &&
+      @media (hover: hover) {
+        &:hover {
+          ${icon &&
         css `
             ::before {
               content: '';
@@ -110,84 +157,39 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
             }
           `}
 
-          ${(variant === 'link' || variant === 'text') &&
-        css `
-            text-decoration: underline;
-          `}
-        }
-      }
-
-      ${variant !== 'link' &&
-        variant !== 'text' &&
-        css `
-        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' &&
-        css `
-        padding: ${padding};
-      `}
-
-      ${variant !== 'link' &&
-        variant !== 'text' &&
-        css `
-        @media (pointer: coarse) {
-          ${!compact &&
-            css `
-            min-height: ${hitAreaFinger};
-            min-width: ${hitAreaFinger};
-          `}
-          border-radius: calc(${baseBorderRadius} * ${borderRadius});
           ${!icon &&
-            css `
-            padding: ${touchPadding};
+        css `
+            background-color: ${secondaryHoverBackgroundColor};
+            color: ${secondaryHoverForegroundColor};
+            border-color: ${secondaryHoverForegroundColor};
+            text-decoration: none;
           `}
         }
-      `}
-
-      &:disabled,
-      &[disabled] {
-        opacity: ${disabledOpacity};
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      &:enabled:focus,
-      &:not([disabled]):focus {
-        box-shadow: ${focusShadow};
       }
-
-      ${icon &&
-        variant !== 'link' &&
-        variant !== 'text' &&
-        css `
-        border-radius: calc(${baseBorderRadius} * ${borderRadius});
-        > svg {
-          display: block;
-        }
-      `}
+    `;
+    return css `
+      ${base}
+      ${nonTextual}
+      ${variant === 'primary' && primary}
+      ${variant === 'secondary' && secondary}
+      ${variant === 'simple' && simple}
 
       ${loading &&
         css `
         ${StyledBackdrop} {
-          background-color: ${buttonBackgroundColor};
+          background-color: var(--button-background-color);
           border-radius: inherit;
         }
+
         ${StyledProgressRing} {
           width: 1em;
           height: 1em;
+
+          ${!icon &&
+            css `
+            margin-inline-end: calc(${spacing} / 2);
+          `}
+
           circle:nth-child(2) {
             animation-duration: calc(${speed} * 2);
           }
@@ -196,17 +198,52 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
     `;
 });
 StyledButton.defaultProps = defaultThemeProp;
+export const StyledButtonLink = styled.a.withConfig(omitProps('loading'))(({ theme, variant }) => {
+    const { base: { palette: { 'foreground-color': textColor } }, components: { link: { color: linkColor } } } = theme;
+    const base = baseStyles(theme);
+    const textual = css `
+      background-color: transparent;
+      display: inline;
+      text-align: start;
+      border: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      > ${StyledIcon} {
+        vertical-align: bottom;
+      }
+    `;
+    const link = css `
+      color: ${linkColor};
+    `;
+    const text = css `
+      color: ${textColor};
+    `;
+    return css `
+      ${base}
+      ${textual}
+      ${variant === 'link' && link}
+      ${variant === 'text' && text}
+    `;
+});
+StyledButtonLink.defaultProps = defaultThemeProp;
 const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled = false, icon = false, compact = false, href, as, forwardedAs, label, 'aria-label': ariaLabel, loading = false, children, ...restProps }, ref) => {
     const [buttonEl, setButtonEl] = useElement();
     const mouseDownEvent = useRef();
     const buttonRef = useConsolidatedRef(ref, setButtonEl);
-    const showProgress = loading && variant !== 'link' && variant !== 'text';
+    const isTextual = ['link', 'text'].includes(variant);
+    const showProgress = loading && !isTextual;
+    const StyledComp = isTextual ? StyledButtonLink : StyledButton;
     useEffect(() => {
         return () => {
             mouseDownEvent.current = undefined;
         };
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, { ...restProps, ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: 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, onMouseDown: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledComp, { ...restProps, ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: 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, onMouseDown: (e) => {
                     restProps.onMouseDown?.(e);
                     e.persist();
                     mouseDownEvent.current = e;
@@ -217,7 +254,7 @@ const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled =
                         buttonRef.current?.focus();
                     }
                     return restProps.onMouseUp?.(e);
-                }, children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }), children] }), buttonEl && label && (_jsx(Tooltip, { target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: label }))] }));
+                }, children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'inline' }), !icon || !showProgress ? children : null] }), buttonEl && label && (_jsx(Tooltip, { target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: label }))] }));
 });
 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 {\n  useRef,\n  useEffect,\n  forwardRef,\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} 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-property: background-color, color, box-shadow;\n      transition-duration: calc(0.5 * ${speed});\n      transition-timing-function: ${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      forwardedAs,\n      label,\n      'aria-label': ariaLabel,\n      loading = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<ButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const [buttonEl, setButtonEl] = useElement();\n    const mouseDownEvent = useRef<MouseEvent>();\n    const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n    const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n    useEffect(() => {\n      return () => {\n        mouseDownEvent.current = undefined;\n      };\n    }, []);\n\n    return (\n      <>\n        <StyledButton\n          {...restProps}\n          ref={buttonRef}\n          as={as || (href ? 'a' : 'button')}\n          forwardedAs={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          onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n            e.persist();\n            mouseDownEvent.current = e;\n          }}\n          onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n            mouseDownEvent.current = undefined;\n\n            if (shouldFocus && buttonRef.current !== document.activeElement) {\n              buttonRef.current?.focus();\n            }\n\n            return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n          }}\n        >\n          {showProgress && <Progress variant='ring' placement='local' />}\n          {children}\n        </StyledButton>\n        {buttonEl && label && (\n          <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\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 {\n  useRef,\n  useEffect,\n  forwardRef,\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps, readableHue } 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  /** The label text will be used inside a Tooltip. */\n  label?: string;\n  /** The aria label text will be inserted as the aria-label on the Button. */\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\nconst baseStyles = (theme: DefaultTheme) => {\n  const {\n    base: {\n      spacing,\n      animation: {\n        speed,\n        timing: { ease }\n      },\n      'disabled-opacity': disabledOpacity\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow }\n    }\n  } = theme;\n\n  return css`\n    outline: none;\n    text-decoration: none;\n    transition-property: background-color, color, box-shadow;\n    transition-duration: calc(0.5 * ${speed});\n    transition-timing-function: ${ease};\n    cursor: pointer;\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    &: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};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({ variant, icon, loading, compact, theme }) => {\n    const {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: { speed }\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': buttonSecondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    // Base\n    const base = baseStyles(theme);\n\n    // Non-text base\n    const nonTextual = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: ${hitAreaMouse};\n      min-width: ${hitAreaMouse};\n      line-height: 1;\n      border: ${borderWidth} solid transparent;\n      border-radius: calc(${baseBorderRadius} * ${borderRadius});\n      -webkit-user-select: none;\n      user-select: none;\n\n      ${!icon &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${icon &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      @media (pointer: coarse) {\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        ${!compact &&\n        css`\n          min-height: ${hitAreaFinger};\n          min-width: ${hitAreaFinger};\n        `}\n\n        ${!icon &&\n        css`\n          padding: ${touchPadding};\n        `}\n      }\n    `;\n\n    // Primary\n    const hoverColors = getHoverColors(color);\n    const hoverPrimaryColor = hoverColors.background;\n    const hoverContrastColor = hoverColors.foreground;\n    const primary = css`\n      --button-background-color: ${color};\n      color: ${contrastColor};\n      background-color: ${color};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverPrimaryColor};\n          color: ${hoverContrastColor};\n          text-decoration: none;\n        }\n      }\n    `;\n\n    // Secondary\n    const backgroundUsable = meetsContrastGuidelines(color, buttonSecondaryColor).AA;\n    const secondaryColor = backgroundUsable ? buttonSecondaryColor : readableColor(color);\n    const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor, color));\n    const secondaryHoverForegroundColor = readableHue(\n      color,\n      secondaryHoverBackgroundColor ?? 'transparent'\n    );\n    const secondary = css`\n      --button-background-color: ${secondaryColor};\n      color: ${color};\n      background-color: ${secondaryColor};\n      border-color: ${color};\n\n      @media (hover: hover) {\n        &:hover {\n          color: ${secondaryHoverForegroundColor};\n          background-color: ${secondaryHoverBackgroundColor};\n          text-decoration: none;\n          border-color: ${secondaryHoverForegroundColor};\n        }\n      }\n    `;\n\n    // Simple\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : color};\n      background-color: ${icon ? 'transparent' : backgroundColor};\n\n      @media (hover: hover) {\n        &:hover {\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          ${!icon &&\n          css`\n            background-color: ${secondaryHoverBackgroundColor};\n            color: ${secondaryHoverForegroundColor};\n            border-color: ${secondaryHoverForegroundColor};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${variant === 'primary' && primary}\n      ${variant === 'secondary' && secondary}\n      ${variant === 'simple' && simple}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: var(--button-background-color);\n          border-radius: inherit;\n        }\n\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n\n          ${!icon &&\n          css`\n            margin-inline-end: calc(${spacing} / 2);\n          `}\n\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({ theme, variant }) => {\n    const {\n      base: {\n        palette: { 'foreground-color': textColor }\n      },\n      components: {\n        link: { color: linkColor }\n      }\n    } = theme;\n\n    const base = baseStyles(theme);\n\n    const textual = css`\n      background-color: transparent;\n      display: inline;\n      text-align: start;\n      border: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      > ${StyledIcon} {\n        vertical-align: bottom;\n      }\n    `;\n\n    const link = css`\n      color: ${linkColor};\n    `;\n\n    const text = css`\n      color: ${textColor};\n    `;\n\n    return css`\n      ${base}\n      ${textual}\n      ${variant === 'link' && link}\n      ${variant === 'text' && text}\n    `;\n  }\n);\n\nStyledButtonLink.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      forwardedAs,\n      label,\n      'aria-label': ariaLabel,\n      loading = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<ButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const [buttonEl, setButtonEl] = useElement();\n    const mouseDownEvent = useRef<MouseEvent>();\n    const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n    const isTextual = ['link', 'text'].includes(variant);\n    const showProgress = loading && !isTextual;\n    const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n    useEffect(() => {\n      return () => {\n        mouseDownEvent.current = undefined;\n      };\n    }, []);\n\n    return (\n      <>\n        <StyledComp\n          {...restProps}\n          ref={buttonRef}\n          as={as || (href ? 'a' : 'button')}\n          forwardedAs={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          onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n            e.persist();\n            mouseDownEvent.current = e;\n          }}\n          onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n            mouseDownEvent.current = undefined;\n\n            if (shouldFocus && buttonRef.current !== document.activeElement) {\n              buttonRef.current?.focus();\n            }\n\n            return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n          }}\n        >\n          {showProgress && <Progress variant='ring' placement='inline' />}\n          {!icon || !showProgress ? children : null}\n        </StyledComp>\n\n        {buttonEl && label && (\n          <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n            {label}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Button;\n"]}

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

@@ -1,4 +1,3 @@
-export { default } from './Button';
-export { ButtonProps } from './Button';
-export { StyledButton } from './Button';
+export { default, StyledButton, StyledButtonLink } from './Button';
+export type { ButtonProps } from './Button';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Button/index.js

@@ -1,3 +1,2 @@
-export { default } from './Button';
-export { StyledButton } from './Button';
+export { default, StyledButton, StyledButtonLink } from './Button';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Button';\nexport { ButtonProps } from './Button';\nexport { StyledButton } from './Button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default, StyledButton, StyledButtonLink } from './Button';\nexport type { ButtonProps } from './Button';\n"]}

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, Ref, ReactNode, MouseEventHandler } from 'react';
 import { ForwardProps, BaseProps, AsProp } from '../../types';
 export interface CardProps extends BaseProps, AsProp {
     /** Components and content for the Card. */
@@ -10,12 +10,9 @@ export interface CardProps extends BaseProps, AsProp {
      */
     interactive?: boolean;
     /** Callback for onClick event. */
-    onClick?: (event: any) => void;
-    /**
-     * HTML role attribute for accessibility.
-     * @default "region"
-     */
-    role?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLElement>;
 }
 export declare const StyledCard: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<CardProps>, never>;
 declare const Card: FunctionComponent<CardProps & ForwardProps>;

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;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"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EAEH,SAAS,EACT,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAKf,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,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA+BrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -5,10 +5,6 @@ import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { StyledPopover } from '../Popover';
 import { StyledCardMedia } from './CardMedia';
-const defaultProps = {
-    interactive: false,
-    role: 'region'
-};
 export const StyledCard = styled.article(props => {
     const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
     const interactive = props.interactive
@@ -43,8 +39,7 @@ export const StyledCard = styled.article(props => {
   `;
 });
 StyledCard.defaultProps = defaultThemeProp;
-const Card = forwardRef((props, ref) => {
-    const { children, as, onClick, interactive, role, ...restProps } = props;
+const Card = forwardRef(({ children, as, onClick, interactive = false, ...restProps }, ref) => {
     const interactiveProps = {
         ...(onClick && {
             onClick,
@@ -54,11 +49,9 @@ const Card = forwardRef((props, ref) => {
         ...(interactive && {
             tabIndex: 0
         }),
-        ...(role && { role }),
         interactive
     };
-    return (_jsx(Flex, { container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
+    return (_jsx(Flex, { role: 'none', container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
 });
-Card.defaultProps = defaultProps;
 export default Card;
 //# sourceMappingURL=Card.js.map

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;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,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,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"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AACf,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;AAiB9C,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,CACE,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB,EACrB,EAAE;IACF,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,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  MouseEventHandler\n} 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?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\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  (\n    { children, as, onClick, interactive = false, ...restProps }: PropsWithoutRef<CardProps>,\n    ref: CardProps['ref']\n  ) => {\n    const interactiveProps = {\n      ...(onClick && {\n        onClick,\n        tabIndex: 0,\n        role: 'button'\n      }),\n      ...(interactive && {\n        tabIndex: 0\n      }),\n      interactive\n    };\n\n    return (\n      <Flex\n        role='none'\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\nexport default Card;\n"]}

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

@@ -1,10 +1,10 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
+import { BaseProps, ExcludeStrict, ForwardProps } from '../../types';
 import { FlexProps } from '../Flex';
 export interface CardContentProps extends BaseProps {
     /** The content of the Card. */
     children: ReactNode;
-    container?: Exclude<FlexProps['container'], boolean>;
+    container?: ExcludeStrict<FlexProps['container'], true>;
 }
 export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const CardContent: FunctionComponent<CardContentProps & ForwardProps>;

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;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"}
+{"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,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACrE,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,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;CACzD;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.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;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,OAAK,SAAS,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,YACzF,QAAQ,GACJ,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"]}
+{"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,OAAK,SAAS,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,YACzF,QAAQ,GACJ,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, ExcludeStrict, 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?: ExcludeStrict<FlexProps['container'], true>;\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"]}