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

package/lib/components/Button/Button.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { meetsContrastGuidelines, mix } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { isPositionWithinRect, tryCatch } from '../../utils';
-import { getActiveColors, getHoverColors, omitProps, readableColor, readableHue } from '../../styles';
+import { getActiveColors, getHoverColors, isSolidColor, omitProps, readableColor, readableHue } from '../../styles';
 import { useElement, useConsolidatedRef } from '../../hooks';
 import Tooltip from '../Tooltip';
 import Progress, { StyledProgressRing } from '../Progress';
@@ -43,13 +43,16 @@ const baseStyles = (theme) => {
     }
   `;
 };
-const getFilledButtonStyles = (color) => ({
-    contrastColor: tryCatch(() => readableColor(color)),
-    hoverColors: getHoverColors(color),
-    activeColors: getActiveColors(color)
+/* If the background color is not provided, the color will be used for the hover and active styles */
+const getFilledButtonStyles = (color, backgroundColor) => ({
+    contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),
+    hoverColors: getHoverColors(backgroundColor || color),
+    activeColors: getActiveColors(backgroundColor || color)
 });
 const getOutlinedButtonStyles = (color, backgroundColor) => {
-    const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;
+    // If the background color is not solid, use the readable color for the text
+    const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);
+    const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);
     const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);
     const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));
     const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));
@@ -62,7 +65,7 @@ const getOutlinedButtonStyles = (color, backgroundColor) => {
     };
 };
 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, timing: { ease } } }, components: { button: { color, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = 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, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
     // Base
     const base = baseStyles(theme);
     // Non-text base
@@ -77,6 +80,7 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
       border-radius: calc(${baseBorderRadius} * ${borderRadius});
       -webkit-user-select: none;
       user-select: none;
+      white-space: nowrap;
 
       ${!icon &&
         css `
@@ -116,21 +120,13 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
       &:active {
         translate: 0 0.0625rem;
       }
-
-      &::after {
-        content: '';
-        position: absolute;
-        inset: calc(-1 * ${borderWidth});
-        border-radius: calc(${baseBorderRadius} * ${borderRadius});
-        transition: translate calc(0.5 * ${speed}) ${ease};
-      }
-
-      &:active::after {
-        translate: 0 -0.0625rem;
-      }
     `;
     // Primary and Secondary-filled
-    const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(variant === 'primary' ? color : secondaryColor);
+    /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background
+       For secondary button, always use the secondary color */
+    const { contrastColor, hoverColors, activeColors } = variant !== 'primary' || foregroundColor === 'auto'
+        ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)
+        : getFilledButtonStyles(foregroundColor, color);
     const solidButtonStyles = css `
       --button-background-color: ${variant === 'primary' ? color : secondaryColor};
       color: ${contrastColor};
@@ -237,6 +233,10 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
         solidButtonStyles}
       ${variant === 'secondary' && fillStyle === 'outline' && secondary}
       ${variant === 'simple' && simple}
+      ${variant === 'primary' &&
+        css `
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      `}
 
       ${loading &&
         css `
@@ -262,8 +262,14 @@ 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;
+export const StyledButtonLink = styled.a.withConfig(omitProps('loading'))(({ theme, variant, href }) => {
+    const { base: { palette: { 'foreground-color': textVariantColor } }, components: { button: { color: primaryColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle }, link: { color: linkColor } } } = theme;
+    let linkVariantColor = linkColor;
+    if (!href) {
+        linkVariantColor = fillStyle === 'outline' ? secondaryColor : primaryColor;
+    }
+    const { background: activeLinkColor } = getActiveColors(linkVariantColor);
+    const { background: activeTextColor } = getActiveColors(textVariantColor);
     const base = baseStyles(theme);
     const textual = css `
     background-color: transparent;
@@ -281,22 +287,25 @@ export const StyledButtonLink = styled.a.withConfig(omitProps('loading'))(({ the
       vertical-align: bottom;
     }
   `;
-    const { background: activeColor } = getActiveColors(linkColor);
     const link = css `
-    color: ${linkColor};
+    color: ${linkVariantColor};
 
     &:active {
-      color: ${activeColor};
+      color: ${activeLinkColor};
     }
   `;
     const text = css `
-    color: ${textColor};
+    color: ${textVariantColor};
+
+    &:active {
+      color: ${activeTextColor};
+    }
   `;
     return css `
     ${base}
     ${textual}
-      ${variant === 'link' && link}
-      ${variant === 'text' && text}
+    ${variant === 'link' && link}
+    ${variant === 'text' && text}
   `;
 });
 StyledButtonLink.defaultProps = defaultThemeProp;

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 { useRef, useEffect, forwardRef } from 'react';\nimport type {\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch } from '../../utils';\nimport {\n  getActiveColors,\n  getHoverColors,\n  omitProps,\n  readableColor,\n  readableHue\n} 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, border-color, box-shadow, translate;\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\nconst getFilledButtonStyles = (color: string) => ({\n  contrastColor: tryCatch(() => readableColor(color)),\n  hoverColors: getHoverColors(color),\n  activeColors: getActiveColors(color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n  const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;\n  const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n  return {\n    textColor: backgroundUsable ? color : readableColor(color),\n    hoverBg: hoverBackgroundColor,\n    hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n    activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n    activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\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: {\n          speed,\n          timing: { ease }\n        }\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          'secondary-fill-style': fillStyle,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\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      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      &:active {\n        translate: 0 0.0625rem;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: calc(-1 * ${borderWidth});\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        transition: translate calc(0.5 * ${speed}) ${ease};\n      }\n\n      &:active::after {\n        translate: 0 -0.0625rem;\n      }\n    `;\n\n    // Primary and Secondary-filled\n    const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(\n      variant === 'primary' ? color : secondaryColor\n    );\n    const solidButtonStyles = css`\n      --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n      color: ${contrastColor};\n      background-color: ${variant === 'primary' ? color : secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverColors.background};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        background-color: ${activeColors.background};\n        color: ${activeColors.foreground};\n        text-decoration: none;\n      }\n    `;\n\n    // Secondary-outline\n    const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n    const secondary = css`\n      --button-background-color: ${backgroundColor};\n      color: ${secondaryOutlineButtonStyles.textColor};\n      background-color: ${backgroundColor};\n      border-color: ${secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${secondaryOutlineButtonStyles.hoverBg};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        color: ${secondaryOutlineButtonStyles.activeFg};\n        background-color: ${secondaryOutlineButtonStyles.activeBg};\n        border-color: ${secondaryOutlineButtonStyles.activeFg};\n        text-decoration: none;\n      }\n    `;\n\n    // Simple\n    const simpleButtonStyles = getOutlinedButtonStyles(\n      fillStyle === 'outline' ? secondaryColor : color,\n      backgroundColor\n    );\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\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.1;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.hoverBg};\n            color: ${simpleButtonStyles.hoverFg};\n            border-color: ${simpleButtonStyles.hoverFg};\n            text-decoration: none;\n          `}\n        }\n\n        &:active {\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.2;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.activeBg};\n            color: ${simpleButtonStyles.activeFg};\n            border-color: ${simpleButtonStyles.activeFg};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n      solidButtonStyles}\n      ${variant === 'secondary' && fillStyle === 'outline' && 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<\n  Pick<ButtonPropsWithDefaults, 'variant'> &\n    // Needed for omitProps\n    Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ 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 { background: activeColor } = getActiveColors(linkColor);\n  const link = css`\n    color: ${linkColor};\n\n    &:active {\n      color: ${activeColor};\n    }\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\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\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<ReactMouseEvent>();\n  const mouseDownPosition = useRef<DOMRect>();\n  const mouseDownTimestamp = useRef<number>();\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  const handleClickWithElementShift = (e: MouseEvent) => {\n    if (\n      buttonRef.current &&\n      mouseDownPosition.current &&\n      mouseDownTimestamp.current &&\n      isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n      Date.now() - mouseDownTimestamp.current < 500\n    ) {\n      buttonRef.current.click();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleClickWithElementShift);\n\n    return () => {\n      document.removeEventListener('mouseup', handleClickWithElementShift);\n      mouseDownEvent.current = undefined;\n      mouseDownPosition.current = undefined;\n      mouseDownTimestamp.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: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n          mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n          mouseDownTimestamp.current = Date.now();\n        }}\n        onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n          mouseDownPosition.current = undefined;\n          mouseDownTimestamp.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\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n  BaseProps,\n  ForwardProps,\n  ForwardRefForwardPropsComponent,\n  PropsWithDefaults,\n  AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch } from '../../utils';\nimport {\n  getActiveColors,\n  getHoverColors,\n  isSolidColor,\n  omitProps,\n  readableColor,\n  readableHue\n} 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, border-color, box-shadow, translate;\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\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n  contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n  hoverColors: getHoverColors(backgroundColor || color),\n  activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n  // If the background color is not solid, use the readable color for the text\n  const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n  const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n  const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n  return {\n    textColor: backgroundUsable ? color : readableColor(color),\n    hoverBg: hoverBackgroundColor,\n    hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n    activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n    activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\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          'foreground-color': foregroundColor,\n          'secondary-color': secondaryColor,\n          'secondary-fill-style': fillStyle,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\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      border: ${borderWidth} solid transparent;\n      border-radius: calc(${baseBorderRadius} * ${borderRadius});\n      -webkit-user-select: none;\n      user-select: none;\n      white-space: nowrap;\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      &:active {\n        translate: 0 0.0625rem;\n      }\n    `;\n\n    // Primary and Secondary-filled\n    /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n       For secondary button, always use the secondary color */\n    const { contrastColor, hoverColors, activeColors } =\n      variant !== 'primary' || foregroundColor === 'auto'\n        ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n        : getFilledButtonStyles(foregroundColor, color);\n\n    const solidButtonStyles = css`\n      --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n      color: ${contrastColor};\n      background-color: ${variant === 'primary' ? color : secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverColors.background};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        background-color: ${activeColors.background};\n        color: ${activeColors.foreground};\n        text-decoration: none;\n      }\n    `;\n\n    // Secondary-outline\n    const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n    const secondary = css`\n      --button-background-color: ${backgroundColor};\n      color: ${secondaryOutlineButtonStyles.textColor};\n      background-color: ${backgroundColor};\n      border-color: ${secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${secondaryOutlineButtonStyles.hoverBg};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        color: ${secondaryOutlineButtonStyles.activeFg};\n        background-color: ${secondaryOutlineButtonStyles.activeBg};\n        border-color: ${secondaryOutlineButtonStyles.activeFg};\n        text-decoration: none;\n      }\n    `;\n\n    // Simple\n    const simpleButtonStyles = getOutlinedButtonStyles(\n      fillStyle === 'outline' ? secondaryColor : color,\n      backgroundColor\n    );\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\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.1;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.hoverBg};\n            color: ${simpleButtonStyles.hoverFg};\n            border-color: ${simpleButtonStyles.hoverFg};\n            text-decoration: none;\n          `}\n        }\n\n        &:active {\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.2;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.activeBg};\n            color: ${simpleButtonStyles.activeFg};\n            border-color: ${simpleButtonStyles.activeFg};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n      solidButtonStyles}\n      ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n      ${variant === 'simple' && simple}\n      ${variant === 'primary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      `}\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<\n  Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n    // Needed for omitProps\n    Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant, href }) => {\n  const {\n    base: {\n      palette: { 'foreground-color': textVariantColor }\n    },\n    components: {\n      button: {\n        color: primaryColor,\n        'secondary-color': secondaryColor,\n        'secondary-fill-style': fillStyle\n      },\n      link: { color: linkColor }\n    }\n  } = theme;\n\n  let linkVariantColor = linkColor;\n  if (!href) {\n    linkVariantColor = fillStyle === 'outline' ? secondaryColor : primaryColor;\n  }\n  const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n  const { background: activeTextColor } = getActiveColors(textVariantColor);\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: ${linkVariantColor};\n\n    &:active {\n      color: ${activeLinkColor};\n    }\n  `;\n\n  const text = css`\n    color: ${textVariantColor};\n\n    &:active {\n      color: ${activeTextColor};\n    }\n  `;\n\n  return css`\n    ${base}\n    ${textual}\n    ${variant === 'link' && link}\n    ${variant === 'text' && text}\n  `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\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<ReactMouseEvent>();\n  const mouseDownPosition = useRef<DOMRect>();\n  const mouseDownTimestamp = useRef<number>();\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  const handleClickWithElementShift = (e: MouseEvent) => {\n    if (\n      buttonRef.current &&\n      mouseDownPosition.current &&\n      mouseDownTimestamp.current &&\n      isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n      Date.now() - mouseDownTimestamp.current < 500\n    ) {\n      buttonRef.current.click();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleClickWithElementShift);\n\n    return () => {\n      document.removeEventListener('mouseup', handleClickWithElementShift);\n      mouseDownEvent.current = undefined;\n      mouseDownPosition.current = undefined;\n      mouseDownTimestamp.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: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n          mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n          mouseDownTimestamp.current = Date.now();\n        }}\n        onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n          mouseDownPosition.current = undefined;\n          mouseDownTimestamp.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\nexport default Button;\n"]}

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref, ReactNode, MouseEventHandler } from 'react';
-import type { ForwardProps, BaseProps, AsProp } from '../../types';
+import type { Ref, ReactNode, MouseEventHandler } from 'react';
+import type { ForwardRefForwardPropsComponent, BaseProps, AsProp } from '../../types';
 export interface CardProps extends BaseProps, AsProp {
     /** Components and content for the Card. */
     children?: ReactNode;
@@ -15,6 +15,6 @@ export interface CardProps extends BaseProps, AsProp {
     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>;
+declare const Card: ForwardRefForwardPropsComponent<CardProps>;
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMnE,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,6HA6CrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA6BpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAAE,+BAA+B,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMtF,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,6HA6CrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CA6BnD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -23,7 +23,7 @@ export const StyledCard = styled.article(props => {
         : undefined;
     return css `
     ${StyledPopover} &, &:not(& &) {
-      background-color: ${background};
+      background: ${background};
       border-radius: ${borderRadius};
 
       &:focus {

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,EAAE,MAAM,OAAO,CAAC;AAEnC,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;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,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;;;;QAI/C,UAAU,EAAE,CAAC,CAAC,CAAC;QACjB,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,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,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { useFullscreenContext } from '../Fullscreen';\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 fullscreen = useFullscreenContext();\n\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      ${fullscreen?.[0] &&\n      css`\n        block-size: 100%;\n        border-radius: 0;\n      `}\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(function Card(\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\nexport default Card;\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,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;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,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;oBACC,UAAU;uBACP,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;QAI/C,UAAU,EAAE,CAAC,CAAC,CAAC;QACjB,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,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,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardRefForwardPropsComponent, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { useFullscreenContext } from '../Fullscreen';\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 fullscreen = useFullscreenContext();\n\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: ${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      ${fullscreen?.[0] &&\n      css`\n        block-size: 100%;\n        border-radius: 0;\n      `}\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: ForwardRefForwardPropsComponent<CardProps> = forwardRef(function Card(\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\nexport default Card;\n"]}

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent, ReactNode, Ref } from 'react';
-import type { BaseProps, ForwardProps } from '../../types';
+import type { ReactNode, Ref } from 'react';
+import type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';
 export interface CardHeaderProps extends BaseProps {
     /** The Card header content. */
     children: ReactNode;
@@ -9,6 +9,6 @@ export interface CardHeaderProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, CardHeaderProps, never>;
-declare const CardHeader: FunctionComponent<CardHeaderProps & ForwardProps>;
+declare const CardHeader: ForwardRefForwardPropsComponent<CardHeaderProps>;
 export default CardHeader;
 //# sourceMappingURL=CardHeader.d.ts.map

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKlF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3D,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"}
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAO7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAM9E,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,yHA2B3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuB/D,CAAC;AAGH,eAAe,UAAU,CAAC"}

package/lib/components/Card/CardHeader.js

@@ -1,6 +1,8 @@
 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 { StyledTabPanel } from '../Tabs/TabPanel';
+import { StyledTabs } from '../Tabs/Tabs.styles';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { StyledPopover } from '../Popover';
@@ -11,8 +13,21 @@ export const StyledCardHeader = styled.header(({ theme, onClick }) => {
     ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {
       padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
 
+      &:has(${StyledTabs}:first-child) {
+        padding-block-start: 0;
+      }
+
+      > ${StyledTabs} {
+        min-inline-size: calc(100% + ${theme.components.card.padding} * 4);
+        margin-inline-start: calc(${theme.components.card.padding} * -2);
+      }
+
       + ${StyledCardContent} {
         padding-block-start: 0;
+
+        > ${StyledTabPanel} {
+          padding-block-start: 0;
+        }
       }
 
       &:hover {

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,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,SAAS,UAAU,CACjB,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EACvE,GAA2B;IAE3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,KAChB,SAAS,EACb,GAAG,EAAE,GAAG,YAEP,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACzD,QAAQ,GACJ,EACP,wBAAM,OAAO,GAAO,IACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithChildren, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { 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  function CardHeader(\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"]}
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,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;;cAEvE,UAAU;;;;UAId,UAAU;uCACmB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;oCAChC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;UAGvD,iBAAiB;;;YAGf,cAAc;;;;;;UAMhB,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,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoC,EACrE,GAA2B;IAE3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,KAChB,SAAS,EACb,GAAG,EAAE,GAAG,YAEP,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACzD,QAAQ,GACJ,EACP,wBAAM,OAAO,GAAO,IACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { StyledTabPanel } from '../Tabs/TabPanel';\nimport { StyledTabs } from '../Tabs/Tabs.styles';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { BaseProps, ForwardRefForwardPropsComponent } 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      &:has(${StyledTabs}:first-child) {\n        padding-block-start: 0;\n      }\n\n      > ${StyledTabs} {\n        min-inline-size: calc(100% + ${theme.components.card.padding} * 4);\n        margin-inline-start: calc(${theme.components.card.padding} * -2);\n      }\n\n      + ${StyledCardContent} {\n        padding-block-start: 0;\n\n        > ${StyledTabPanel} {\n          padding-block-start: 0;\n        }\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: ForwardRefForwardPropsComponent<CardHeaderProps> = forwardRef(function CardHeader(\n  { children, actions, ...restProps }: PropsWithoutRef<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\nCardHeader.displayName = 'CardHeader';\nexport default CardHeader;\n"]}

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,7 @@
 import type { RadioCheckProps } from '../RadioCheck';
 export type CheckboxProps = Omit<RadioCheckProps, 'type'>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
 export default _default;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKrD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;AAE1D,wBAIE"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AASrD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;;;AAU1D,wBAAyD"}

package/lib/components/Checkbox/Checkbox.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import RadioCheck from '../RadioCheck';
-export default forwardRef(function Checkbox(props, ref) {
-    return _jsx(RadioCheck, { ...props, type: 'checkbox', ref: ref });
+import { useTestIds } from '../../hooks';
+import { withTestIds } from '../../utils';
+import { getCheckboxTestIds } from './Checkbox.test-ids';
+const Checkbox = forwardRef(function Checkbox({ testId, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getCheckboxTestIds);
+    return _jsx(RadioCheck, { ...restProps, testId: testIds, type: 'checkbox', ref: ref });
 });
+export default withTestIds(Checkbox, getCheckboxTestIds);
 //# sourceMappingURL=Checkbox.js.map

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,UAAU,MAAM,eAAe,CAAC;AAQvC,eAAe,UAAU,CACvB,SAAS,QAAQ,CAAC,KAAK,EAAE,GAAG;IAC1B,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AAC7D,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport RadioCheck from '../RadioCheck';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport type { RefElement } from '../../types';\n\n// Use Omit here to avoid listing all props for HTMLInputElement.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CheckboxProps = Omit<RadioCheckProps, 'type'>;\n\nexport default forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxProps>>(\n  function Checkbox(props, ref) {\n    return <RadioCheck {...props} type='checkbox' ref={ref} />;\n  }\n);\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,UAAU,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzD,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,OAAO,KAAC,UAAU,OAAK,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AAClF,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport RadioCheck from '../RadioCheck';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport type { RefElement } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getCheckboxTestIds } from './Checkbox.test-ids';\n\n// Use Omit here to avoid listing all props for HTMLInputElement.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CheckboxProps = Omit<RadioCheckProps, 'type'>;\n\nconst Checkbox = forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxProps>>(\n  function Checkbox({ testId, ...restProps }, ref) {\n    const testIds = useTestIds(testId, getCheckboxTestIds);\n\n    return <RadioCheck {...restProps} testId={testIds} type='checkbox' ref={ref} />;\n  }\n);\n\nexport default withTestIds(Checkbox, getCheckboxTestIds);\n"]}

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

@@ -0,0 +1,3 @@
+export declare const getCheckboxTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getCheckboxCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["control", "content", "image", "control", "actions"]>;
+//# sourceMappingURL=Checkbox.test-ids.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.test-ids.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,0LAA+D,CAAC;AAE/F,eAAO,MAAM,sBAAsB,sJAGxB,CAAC"}

package/lib/components/Checkbox/Checkbox.test-ids.js

@@ -0,0 +1,9 @@
+import { createTestIds } from '../../utils';
+import { elements } from '../FormField/FormField.test-ids';
+import { radioCheckCardElements } from '../RadioCheckCard/RadioCheckCard.test-ids';
+export const getCheckboxTestIds = createTestIds('checkbox', ['control', ...elements]);
+export const getCheckboxCardTestIds = createTestIds('checkbox-card', [
+    'control',
+    ...radioCheckCardElements
+]);
+//# sourceMappingURL=Checkbox.test-ids.js.map

package/lib/components/Checkbox/Checkbox.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.test-ids.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC,CAAC;AAE/F,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,eAAe,EAAE;IACnE,SAAS;IACT,GAAG,sBAAsB;CACjB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\nimport { radioCheckCardElements } from '../RadioCheckCard/RadioCheckCard.test-ids';\n\nexport const getCheckboxTestIds = createTestIds('checkbox', ['control', ...elements] as const);\n\nexport const getCheckboxCardTestIds = createTestIds('checkbox-card', [\n  'control',\n  ...radioCheckCardElements\n] as const);\n"]}

package/lib/components/Checkbox/CheckboxCard.d.ts

@@ -0,0 +1,7 @@
+import type { RadioCheckCardProps } from '../RadioCheckCard';
+export type CheckboxCardProps = Omit<RadioCheckCardProps, 'type'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "content", "image", "control", "actions"]>;
+};
+export default _default;
+//# sourceMappingURL=CheckboxCard.d.ts.map

package/lib/components/Checkbox/CheckboxCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAS7D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;;;;AAUlE,wBAAiE"}

package/lib/components/Checkbox/CheckboxCard.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import RadioCheckCard from '../RadioCheckCard';
+import { useTestIds } from '../../hooks';
+import { withTestIds } from '../../utils';
+import { getCheckboxCardTestIds } from './Checkbox.test-ids';
+const CheckboxCard = forwardRef(function CheckboxCard({ testId, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getCheckboxCardTestIds);
+    return _jsx(RadioCheckCard, { ...restProps, testId: testIds, type: 'checkbox', ref: ref });
+});
+export default withTestIds(CheckboxCard, getCheckboxCardTestIds);
+//# sourceMappingURL=CheckboxCard.js.map

package/lib/components/Checkbox/CheckboxCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAM7D,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IACjD,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IAE3D,OAAO,KAAC,cAAc,OAAK,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AACtF,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,YAAY,EAAE,sBAAsB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport RadioCheckCard from '../RadioCheckCard';\nimport type { RadioCheckCardProps } from '../RadioCheckCard';\nimport type { RefElement } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getCheckboxCardTestIds } from './Checkbox.test-ids';\n\n// Use Omit here to avoid listing all props for HTMLInputElement.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CheckboxCardProps = Omit<RadioCheckCardProps, 'type'>;\n\nconst CheckboxCard = forwardRef<RefElement<CheckboxCardProps>, PropsWithoutRef<CheckboxCardProps>>(\n  function CheckboxCard({ testId, ...restProps }, ref) {\n    const testIds = useTestIds(testId, getCheckboxCardTestIds);\n\n    return <RadioCheckCard {...restProps} testId={testIds} type='checkbox' ref={ref} />;\n  }\n);\n\nexport default withTestIds(CheckboxCard, getCheckboxCardTestIds);\n"]}

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

@@ -1,3 +1,5 @@
 export { default } from './Checkbox';
+export { default as CheckboxCard } from './CheckboxCard';
 export type { CheckboxProps } from './Checkbox';
+export type { CheckboxCardProps } from './CheckboxCard';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Checkbox/index.js

@@ -1,2 +1,3 @@
 export { default } from './Checkbox';
+export { default as CheckboxCard } from './CheckboxCard';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Checkbox';\nexport type { CheckboxProps } from './Checkbox';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Checkbox';\nexport { default as CheckboxCard } from './CheckboxCard';\nexport type { CheckboxProps } from './Checkbox';\nexport type { CheckboxCardProps } from './CheckboxCard';\n"]}

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -47,7 +47,7 @@ type ColorResult = {
 };
 type ColorChangeHandler = (color: ColorResult, event: ChangeEvent<HTMLInputElement>) => void;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=ColorPicker.d.ts.map

package/lib/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, parseToRgb } from 'polished';\n\nimport type {\n  NoChildrenProp,\n  PropsWithDefaults,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport { withTestIds } from '../../utils';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useOuterEvent, useTestIds } from '../../hooks';\n\nimport { getColorPickerTestIds } from './ColorPicker.test-ids';\n\nexport type ColorPickerProps = WithAttributes<\n  'input',\n  TestIdProp &\n    NoChildrenProp & {\n      /** label for the color picker control */\n      label: FormControlProps['label'];\n      /**\n       * Color picker value in hex\n       * @default '#000000'\n       */\n      value?: FormControlProps['value'];\n      /**\n       * Show color swatch without hex value display.\n       * @default false\n       */\n      swatchOnly?: boolean;\n      /** Visually hides the label region. */\n      labelHidden?: FormControlProps['labelHidden'];\n      /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n      info?: FormControlProps['info'];\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Layout field elements inline in a row. */\n      inline?: FormFieldProps['inline'];\n      /** Button when clicked will show additional information on the color picker */\n      additionalInfo?: FormFieldProps['additionalInfo'];\n      /** onChange event handler that gets called on change of value. */\n      onChange?: ColorChangeHandler;\n      /** onBeforeClose of the color picker */\n      onBeforeClose?: () => void;\n    }\n>;\n\ntype RGBColor = {\n  r: number;\n  g: number;\n  b: number;\n};\n\ntype HSLColor = {\n  h: number;\n  s: number;\n  l: number;\n};\n\ntype ColorResult = {\n  hex: string;\n  rgb: RGBColor;\n  hsl: HSLColor;\n};\n\ntype ColorChangeHandler = (color: ColorResult, event: ChangeEvent<HTMLInputElement>) => void;\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n  forwardRef<RefElement<ColorPickerProps>, PropsWithoutRef<ColorPickerProps>>(\n    function ColorPicker(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        value = '#000000',\n        label,\n        info,\n        disabled,\n        status,\n        required,\n        readOnly,\n        labelHidden,\n        swatchOnly = false,\n        inline,\n        onClick,\n        onChange,\n        onBeforeClose,\n        additionalInfo,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getColorPickerTestIds);\n\n      const inputRef = useConsolidatedRef(ref);\n      const [showColorPicker, setShowColorPicker] = useState(false);\n\n      const hideColorPicker = () => {\n        if (showColorPicker) {\n          onBeforeClose?.();\n        }\n\n        setShowColorPicker(false);\n      };\n\n      useOuterEvent('mousedown', [inputRef], hideColorPicker);\n\n      useEffect(() => {\n        if (showColorPicker) {\n          inputRef?.current?.focus();\n          inputRef?.current?.click();\n        }\n      }, [showColorPicker]);\n\n      const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n        const color = e.target.value;\n        const { red: r, green: g, blue: b } = parseToRgb(color);\n        const { hue: h, saturation: s, lightness: l } = parseToHsl(color);\n        onChange?.(\n          {\n            hex: color,\n            rgb: { r, g, b },\n            hsl: { h, s, l }\n          },\n          e\n        );\n      };\n\n      return (\n        <FormField\n          testId={testIds}\n          inline={inline}\n          container={inline ? { justify: 'between' } : undefined}\n          as={StyledColorPicker}\n          id={id}\n          label={label}\n          labelHidden={labelHidden}\n          swatchOnly={swatchOnly}\n          info={info}\n          disabled={disabled}\n          status={status}\n          required={required}\n          additionalInfo={additionalInfo}\n        >\n          <Flex\n            container={{ alignItems: 'center' }}\n            item={swatchOnly ? { alignSelf: 'start' } : undefined}\n            as={StyledFormControl}\n            disabled={disabled}\n            status={status}\n            required={required}\n            readOnly={readOnly}\n            onClick={readOnly || disabled ? undefined : () => setShowColorPicker(true)}\n          >\n            <input\n              data-testid={testIds.control}\n              {...restProps}\n              id={id}\n              type={readOnly ? undefined : 'color'}\n              ref={inputRef}\n              value={value}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={onChangeHandler}\n            />\n            <div style={{ backgroundColor: value }} />\n            {!swatchOnly && value}\n          </Flex>\n        </FormField>\n      );\n    }\n  ),\n  getColorPickerTestIds\n);\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAShE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAyD/D,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;QACN,iBAAiB;;;UAGf,CAAC,UAAU;QACb,GAAG,CAAA;;SAEF;;UAEC,CAAC,UAAU;QACb,GAAG,CAAA;gCACqB,KAAK,CAAC,IAAI,CAAC,OAAO;SACzC;;;wBAGe,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;YAKnC,YAAY;;;2BAGG,IAAI,WAAW,WAAW;;cAEvC,UAAU;QACV,CAAC,CAAC,GAAG,CAAA;gCACa,IAAI,WAAW,WAAW;iBACzC;QACH,CAAC,CAAC,GAAG,CAAA;oCACiB,IAAI,MAAM,WAAW;uCAClB,KAAK,CAAC,IAAI,CAAC,OAAO;uCAClB,WAAW;sBAC5B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;iBACrD;;;;qBAII,IAAI;sBACH,IAAI;;;;;;;;;;yBAUD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;2BAMvB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;;;;KAI/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,WAAW,CACxB,UAAU,CACR,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,GAAG,SAAS,EACjB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,aAAa,EACb,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,eAAe,EAAE,CAAC;YACpB,aAAa,EAAE,EAAE,CAAC;QACpB,CAAC;QAED,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,eAAe,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,EAAE,CAAC;YACpB,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAC3B,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,eAAe,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC3D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAClE,QAAQ,EAAE,CACR;YACE,GAAG,EAAE,KAAK;YACV,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YAChB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;SACjB,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,EACtD,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,YAE9B,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EACnC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,EACrD,EAAE,EAAE,iBAAiB,EACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAE1E,+BACe,OAAO,CAAC,OAAO,KACxB,SAAS,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACpC,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,eAAe,GACzB,EACF,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,EACzC,CAAC,UAAU,IAAI,KAAK,IAChB,GACG,CACb,CAAC;AACJ,CAAC,CACF,EACD,qBAAqB,CACtB,CAAC","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, parseToRgb } from 'polished';\n\nimport type {\n  NoChildrenProp,\n  PropsWithDefaults,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport { withTestIds } from '../../utils';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useOuterEvent, useTestIds } from '../../hooks';\n\nimport { getColorPickerTestIds } from './ColorPicker.test-ids';\n\nexport type ColorPickerProps = WithAttributes<\n  'input',\n  TestIdProp &\n    NoChildrenProp & {\n      /** label for the color picker control */\n      label: FormControlProps['label'];\n      /**\n       * Color picker value in hex\n       * @default '#000000'\n       */\n      value?: FormControlProps['value'];\n      /**\n       * Show color swatch without hex value display.\n       * @default false\n       */\n      swatchOnly?: boolean;\n      /** Visually hides the label region. */\n      labelHidden?: FormControlProps['labelHidden'];\n      /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n      info?: FormControlProps['info'];\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Layout field elements inline in a row. */\n      inline?: FormFieldProps['inline'];\n      /** Button when clicked will show additional information on the color picker */\n      additionalInfo?: FormFieldProps['additionalInfo'];\n      /** onChange event handler that gets called on change of value. */\n      onChange?: ColorChangeHandler;\n      /** onBeforeClose of the color picker */\n      onBeforeClose?: () => void;\n    }\n>;\n\ntype RGBColor = {\n  r: number;\n  g: number;\n  b: number;\n};\n\ntype HSLColor = {\n  h: number;\n  s: number;\n  l: number;\n};\n\ntype ColorResult = {\n  hex: string;\n  rgb: RGBColor;\n  hsl: HSLColor;\n};\n\ntype ColorChangeHandler = (color: ColorResult, event: ChangeEvent<HTMLInputElement>) => void;\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n  forwardRef<RefElement<ColorPickerProps>, PropsWithoutRef<ColorPickerProps>>(\n    function ColorPicker(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        value = '#000000',\n        label,\n        info,\n        disabled,\n        status,\n        required,\n        readOnly,\n        labelHidden,\n        swatchOnly = false,\n        inline,\n        onClick,\n        onChange,\n        onBeforeClose,\n        additionalInfo,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getColorPickerTestIds);\n\n      const inputRef = useConsolidatedRef(ref);\n      const [showColorPicker, setShowColorPicker] = useState(false);\n\n      const hideColorPicker = () => {\n        if (showColorPicker) {\n          onBeforeClose?.();\n        }\n\n        setShowColorPicker(false);\n      };\n\n      useOuterEvent('mousedown', [inputRef], hideColorPicker);\n\n      useEffect(() => {\n        if (showColorPicker) {\n          inputRef?.current?.focus();\n          inputRef?.current?.click();\n        }\n      }, [showColorPicker]);\n\n      const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n        const color = e.target.value;\n        const { red: r, green: g, blue: b } = parseToRgb(color);\n        const { hue: h, saturation: s, lightness: l } = parseToHsl(color);\n        onChange?.(\n          {\n            hex: color,\n            rgb: { r, g, b },\n            hsl: { h, s, l }\n          },\n          e\n        );\n      };\n\n      return (\n        <FormField\n          testId={testIds}\n          inline={inline}\n          container={inline ? { justify: 'between' } : undefined}\n          as={StyledColorPicker}\n          id={id}\n          label={label}\n          labelHidden={labelHidden}\n          swatchOnly={swatchOnly}\n          info={info}\n          disabled={disabled}\n          status={status}\n          required={required}\n          additionalInfo={additionalInfo}\n        >\n          <Flex\n            container={{ alignItems: 'center' }}\n            item={swatchOnly ? { alignSelf: 'start' } : undefined}\n            as={StyledFormControl}\n            disabled={disabled}\n            status={status}\n            required={required}\n            readOnly={readOnly}\n            onClick={readOnly || disabled ? undefined : () => setShowColorPicker(true)}\n          >\n            <input\n              data-testid={testIds.control}\n              {...restProps}\n              id={id}\n              type={readOnly ? undefined : 'color'}\n              ref={inputRef}\n              value={value}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={onChangeHandler}\n            />\n            <div style={{ backgroundColor: value }} />\n            {!swatchOnly && value}\n          </Flex>\n        </FormField>\n      );\n    }\n  ),\n  getColorPickerTestIds\n);\n"]}