@pega/cosmos-react-core 2.0.0-dev.18.0 → 2.0.0-dev.20.0

package/lib/components/Button/BareRoleButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+export const StyledBareRoleButton = styled.div ``;
+const BareRoleButton = forwardRef(({ children, onClick, onKeyDown, ...restProps }, ref) => {
+    return (_jsx(StyledBareRoleButton, { ...restProps, tabIndex: 0, role: 'button', onKeyDown: (e) => {
+            if ((e.key === ' ' || e.key === 'Enter') && e.target === e.currentTarget) {
+                e.currentTarget.click();
+            }
+            return onKeyDown?.(e);
+        }, onClick: (e) => {
+            if (e.target instanceof Element &&
+                // Ignore clicks on other interactive elements within this element.
+                e.target.closest("button, a, [role='button'], [role='link']") !== e.currentTarget)
+                return;
+            return onClick?.(e);
+        }, ref: ref, children: children }, void 0));
+});
+export default BareRoleButton;
+//# sourceMappingURL=BareRoleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,WACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n  children: ReactNode;\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div``;\n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n    ref: BareRoleButtonProps['ref']\n  ) => {\n    return (\n      <StyledBareRoleButton\n        {...restProps}\n        tabIndex={0}\n        role='button'\n        onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n          if ((e.key === ' ' || e.key === 'Enter') && e.target === e.currentTarget) {\n            (e.currentTarget as HTMLDivElement).click();\n          }\n\n          return onKeyDown?.(e);\n        }}\n        onClick={(e: MouseEvent<HTMLDivElement>) => {\n          if (\n            e.target instanceof Element &&\n            // Ignore clicks on other interactive elements within this element.\n            e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n          )\n            return;\n\n          return onClick?.(e);\n        }}\n        ref={ref}\n      >\n        {children}\n      </StyledBareRoleButton>\n    );\n  }\n);\n\nexport default BareRoleButton;\n"]}

package/lib/components/Button/Button.js

@@ -199,7 +199,7 @@ const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled =
     const shouldFocus = useRef(false);
     const buttonRef = useConsolidatedRef(ref, setButtonEl);
     const showProgress = loading && variant !== 'link' && variant !== 'text';
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({}, restProps, { ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: forwardedAs || (href ? 'a' : 'button'), variant: variant, icon: icon, compact: compact, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label, onMouseDown: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, { ...restProps, ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: forwardedAs || (href ? 'a' : 'button'), variant: variant, icon: icon, compact: compact, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label, onMouseDown: (e) => {
                     if (restProps.onMouseDown) {
                         const handlerReturn = restProps.onMouseDown?.(e);
                         if (handlerReturn === false || e.defaultPrevented)
@@ -215,7 +215,7 @@ const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled =
                         shouldFocus.current = false;
                     }
                     return restProps.onMouseUp?.(e);
-                } }, { children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }), void 0), buttonEl && label && (_jsx(Tooltip, Object.assign({ target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false }, { children: label }), void 0))] }, void 0));
+                }, children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }, void 0), buttonEl && label && (_jsx(Tooltip, { target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: label }, void 0))] }, void 0));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

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

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

package/lib/components/Card/Card.js

@@ -57,7 +57,7 @@ const Card = forwardRef((props, ref) => {
         ...(role && { role }),
         interactive
     };
-    return (_jsx(Flex, Object.assign({ container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref }, interactiveProps, restProps, { children: children }), void 0));
+    return (_jsx(Flex, { container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }, void 0));
 });
 Card.defaultProps = defaultProps;
 export default Card;

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

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

package/lib/components/Card/CardContent.js

@@ -20,7 +20,7 @@ export const StyledCardContent = styled.div(({ theme }) => {
 });
 StyledCardContent.defaultProps = defaultThemeProp;
 const CardContent = ({ children, container, ...restProps }) => {
-    return (_jsx(Flex, Object.assign({}, restProps, { container: { direction: 'column', ...container }, as: StyledCardContent }, { children: children }), void 0));
+    return (_jsx(Flex, { ...restProps, container: { direction: 'column', ...container }, as: StyledCardContent, children: children }, void 0));
 };
 export default CardContent;
 //# sourceMappingURL=CardContent.js.map

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

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

package/lib/components/Card/CardFooter.js

@@ -14,11 +14,11 @@ export const StyledCardFooter = styled.footer(({ theme }) => {
 StyledCardFooter.defaultProps = defaultThemeProp;
 const CardFooter = (props) => {
     const { children, justify, ...restProps } = props;
-    return (_jsx(Flex, Object.assign({ as: StyledCardFooter, container: {
+    return (_jsx(Flex, { as: StyledCardFooter, container: {
             wrap: 'wrap',
             alignItems: 'center',
             justify
-        } }, restProps, { children: children }), void 0));
+        }, ...restProps, children: children }, void 0));
 };
 export default CardFooter;
 //# sourceMappingURL=CardFooter.js.map

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

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

package/lib/components/Card/CardHeader.js

@@ -23,7 +23,7 @@ export const StyledCardHeader = styled.header(({ theme, onClick }) => {
 });
 StyledCardHeader.defaultProps = defaultThemeProp;
 const CardHeader = forwardRef(({ children, actions, ...restProps }, ref) => {
-    return (_jsx(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader }, restProps, { ref: ref }, { children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, item: { grow: 1 } }, { children: children }), void 0), _jsx("div", { children: actions }, void 0)] }, void 0)) : (children) }), void 0));
+    return (_jsx(Flex, { container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader, ...restProps, ref: ref, children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, children: children }, void 0), _jsx("div", { children: actions }, void 0)] }, void 0)) : (children) }, void 0));
 });
 CardHeader.displayName = 'CardHeader';
 export default CardHeader;

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

package/lib/components/Card/CardMedia.js

@@ -10,7 +10,7 @@ const StyledCardMedia = styled.div `
   }
 `;
 const CardMedia = ({ children, ...restProps }) => {
-    return (_jsx(Flex, Object.assign({ container: true, as: StyledCardMedia }, restProps, { children: children }), void 0));
+    return (_jsx(Flex, { container: true, as: StyledCardMedia, ...restProps, children: children }, void 0));
 };
 export default CardMedia;
 export { StyledCardMedia };

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

@@ -1 +1 @@
-{"version":3,"file":"CardMedia.js","sourceRoot":"","sources":["../../../src/components/Card/CardMedia.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAQ3B,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;CAO1D,CAAC;AAEF,MAAM,SAAS,GAAqD,CAAC,EACnE,QAAQ,EACR,GAAG,SAAS,EACG,EAAE,EAAE;IACnB,OAAO,CACL,KAAC,IAAI,kBAAC,SAAS,QAAC,EAAE,EAAE,eAAe,IAAM,SAAS,cAC/C,QAAQ,YACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface CardMediaProps extends BaseProps {\n  /** The content for the media. */\n  children: ReactNode;\n}\n\nconst StyledCardMedia = styled.div<Partial<CardMediaProps>>`\n  img,\n  video,\n  audio {\n    object-fit: cover;\n    width: 100%;\n  }\n`;\n\nconst CardMedia: FunctionComponent<CardMediaProps & ForwardProps> = ({\n  children,\n  ...restProps\n}: CardMediaProps) => {\n  return (\n    <Flex container as={StyledCardMedia} {...restProps}>\n      {children}\n    </Flex>\n  );\n};\n\nexport default CardMedia;\nexport { StyledCardMedia };\n"]}
+{"version":3,"file":"CardMedia.js","sourceRoot":"","sources":["../../../src/components/Card/CardMedia.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAQ3B,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;CAO1D,CAAC;AAEF,MAAM,SAAS,GAAqD,CAAC,EACnE,QAAQ,EACR,GAAG,SAAS,EACG,EAAE,EAAE;IACnB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,eAAe,KAAM,SAAS,YAC/C,QAAQ,WACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface CardMediaProps extends BaseProps {\n  /** The content for the media. */\n  children: ReactNode;\n}\n\nconst StyledCardMedia = styled.div<Partial<CardMediaProps>>`\n  img,\n  video,\n  audio {\n    object-fit: cover;\n    width: 100%;\n  }\n`;\n\nconst CardMedia: FunctionComponent<CardMediaProps & ForwardProps> = ({\n  children,\n  ...restProps\n}: CardMediaProps) => {\n  return (\n    <Flex container as={StyledCardMedia} {...restProps}>\n      {children}\n    </Flex>\n  );\n};\n\nexport default CardMedia;\nexport { StyledCardMedia };\n"]}

package/lib/components/Card/CollapsibleCard.js

@@ -30,7 +30,7 @@ const CollapsibleCard = (props) => {
         setCollapsed(!collapsed);
         onChange?.({ collapsed: !collapsed });
     };
-    return (_jsxs(Card, Object.assign({}, restProps, { children: [media && _jsx(CardMedia, { children: media }, void 0), _jsxs(CardHeader, Object.assign({ actions: actions, onClick: toggleCollapse }, { children: [_jsx(StyledToggleButton, Object.assign({ as: Button, variant: 'simple', icon: true, onClick: toggleCollapse, collapsed: collapsed }, { children: _jsx(Icon, { name: 'caret-down' }, void 0) }), void 0), header] }), void 0), _jsxs(ExpandCollapse, Object.assign({ collapsed: collapsed }, { children: [children && _jsx(CardContent, { children: children }, void 0), footer && _jsx(CardFooter, Object.assign({ justify: 'center' }, { children: footer }), void 0)] }), void 0)] }), void 0));
+    return (_jsxs(Card, { ...restProps, children: [media && _jsx(CardMedia, { children: media }, void 0), _jsxs(CardHeader, { actions: actions, onClick: toggleCollapse, children: [_jsx(StyledToggleButton, { as: Button, variant: 'simple', icon: true, onClick: toggleCollapse, collapsed: collapsed, children: _jsx(Icon, { name: 'caret-down' }, void 0) }, void 0), header] }, void 0), _jsxs(ExpandCollapse, { collapsed: collapsed, children: [children && _jsx(CardContent, { children: children }, void 0), footer && _jsx(CardFooter, { justify: 'center', children: footer }, void 0)] }, void 0)] }, void 0));
 };
 CollapsibleCard.defaultProps = defaultProps;
 export default CollapsibleCard;

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleCard.js","sourceRoot":"","sources":["../../../src/components/Card/CollapsibleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,IAAmB,MAAM,QAAQ,CAAC;AACzC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,YAAY,CAAC,aAAa,CAAC,CAAC;AAe5B,MAAM,YAAY,GAAkC,EAAE,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;QACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;iBACvB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;oCACvB,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,kBAAkB;AAClB,MAAM,eAAe,GAA4C,CAC/D,KAA8C,EAC9C,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;QACzB,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,oBAAK,SAAS,eAChB,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,WAAa,EACxC,MAAC,UAAU,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,iBACnD,KAAC,kBAAkB,kBACjB,EAAE,EAAE,MAAM,EACV,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,gBAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,YACP,EACpB,MAAM,aACI,EACb,MAAC,cAAc,kBAAC,SAAS,EAAE,SAAS,iBACjC,QAAQ,IAAI,KAAC,WAAW,cAAE,QAAQ,WAAe,EACjD,MAAM,IAAI,KAAC,UAAU,kBAAC,OAAO,EAAC,QAAQ,gBAAE,MAAM,YAAc,aAC9C,aACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;AAE5C,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode, PropsWithChildren, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport ExpandCollapse from '../ExpandCollapse';\n\nimport Card, { CardProps } from './Card';\nimport CardHeader from './CardHeader';\nimport CardMedia from './CardMedia';\nimport CardContent from './CardContent';\nimport CardFooter from './CardFooter';\n\nregisterIcon(caretDownIcon);\n\nexport interface CollapsibleCardProps extends CardProps {\n  /** The header content. */\n  header?: ReactElement;\n  /** Action Buttons that will render in the header. */\n  actions?: ReactElement | ReactElement[];\n  /** The footer content. */\n  footer?: ReactNode;\n  /** CardMedia content that will render above the header. */\n  media?: ReactElement;\n  /** Callback when the Card toggles from collapsed to expanded. */\n  onChange?: (event: { collapsed: boolean }) => void;\n}\n\nconst defaultProps: Partial<CollapsibleCardProps> = {};\n\nconst StyledToggleButton = styled.button<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    margin-inline-end: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst CollapsibleCard: FunctionComponent<CollapsibleCardProps> = (\n  props: PropsWithChildren<CollapsibleCardProps>\n) => {\n  const { header, actions, footer, media, onChange, children, ...restProps } = props;\n  const [collapsed, setCollapsed] = useState(false);\n\n  const toggleCollapse = () => {\n    setCollapsed(!collapsed);\n    onChange?.({ collapsed: !collapsed });\n  };\n\n  return (\n    <Card {...restProps}>\n      {media && <CardMedia>{media}</CardMedia>}\n      <CardHeader actions={actions} onClick={toggleCollapse}>\n        <StyledToggleButton\n          as={Button}\n          variant='simple'\n          icon\n          onClick={toggleCollapse}\n          collapsed={collapsed}\n        >\n          <Icon name='caret-down' />\n        </StyledToggleButton>\n        {header}\n      </CardHeader>\n      <ExpandCollapse collapsed={collapsed}>\n        {children && <CardContent>{children}</CardContent>}\n        {footer && <CardFooter justify='center'>{footer}</CardFooter>}\n      </ExpandCollapse>\n    </Card>\n  );\n};\n\nCollapsibleCard.defaultProps = defaultProps;\n\nexport default CollapsibleCard;\n"]}
+{"version":3,"file":"CollapsibleCard.js","sourceRoot":"","sources":["../../../src/components/Card/CollapsibleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,IAAmB,MAAM,QAAQ,CAAC;AACzC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,YAAY,CAAC,aAAa,CAAC,CAAC;AAe5B,MAAM,YAAY,GAAkC,EAAE,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;QACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;iBACvB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;oCACvB,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,kBAAkB;AAClB,MAAM,eAAe,GAA4C,CAC/D,KAA8C,EAC9C,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;QACzB,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,aAChB,KAAK,IAAI,KAAC,SAAS,cAAE,KAAK,WAAa,EACxC,MAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,aACnD,KAAC,kBAAkB,IACjB,EAAE,EAAE,MAAM,EACV,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,WACP,EACpB,MAAM,YACI,EACb,MAAC,cAAc,IAAC,SAAS,EAAE,SAAS,aACjC,QAAQ,IAAI,KAAC,WAAW,cAAE,QAAQ,WAAe,EACjD,MAAM,IAAI,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,YAAE,MAAM,WAAc,YAC9C,YACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;AAE5C,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode, PropsWithChildren, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport ExpandCollapse from '../ExpandCollapse';\n\nimport Card, { CardProps } from './Card';\nimport CardHeader from './CardHeader';\nimport CardMedia from './CardMedia';\nimport CardContent from './CardContent';\nimport CardFooter from './CardFooter';\n\nregisterIcon(caretDownIcon);\n\nexport interface CollapsibleCardProps extends CardProps {\n  /** The header content. */\n  header?: ReactElement;\n  /** Action Buttons that will render in the header. */\n  actions?: ReactElement | ReactElement[];\n  /** The footer content. */\n  footer?: ReactNode;\n  /** CardMedia content that will render above the header. */\n  media?: ReactElement;\n  /** Callback when the Card toggles from collapsed to expanded. */\n  onChange?: (event: { collapsed: boolean }) => void;\n}\n\nconst defaultProps: Partial<CollapsibleCardProps> = {};\n\nconst StyledToggleButton = styled.button<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    margin-inline-end: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst CollapsibleCard: FunctionComponent<CollapsibleCardProps> = (\n  props: PropsWithChildren<CollapsibleCardProps>\n) => {\n  const { header, actions, footer, media, onChange, children, ...restProps } = props;\n  const [collapsed, setCollapsed] = useState(false);\n\n  const toggleCollapse = () => {\n    setCollapsed(!collapsed);\n    onChange?.({ collapsed: !collapsed });\n  };\n\n  return (\n    <Card {...restProps}>\n      {media && <CardMedia>{media}</CardMedia>}\n      <CardHeader actions={actions} onClick={toggleCollapse}>\n        <StyledToggleButton\n          as={Button}\n          variant='simple'\n          icon\n          onClick={toggleCollapse}\n          collapsed={collapsed}\n        >\n          <Icon name='caret-down' />\n        </StyledToggleButton>\n        {header}\n      </CardHeader>\n      <ExpandCollapse collapsed={collapsed}>\n        {children && <CardContent>{children}</CardContent>}\n        {footer && <CardFooter justify='center'>{footer}</CardFooter>}\n      </ExpandCollapse>\n    </Card>\n  );\n};\n\nCollapsibleCard.defaultProps = defaultProps;\n\nexport default CollapsibleCard;\n"]}

package/lib/components/Card/SelectableCard.js

@@ -38,7 +38,7 @@ const SelectableCard = (props) => {
         }
     };
     const debouncedClickListener = () => debounce(onCardClick, 100)();
-    return (_jsx(StyledSelectableCard, Object.assign({ type: type, interactive: true, checked: checked, onClick: () => debouncedClickListener() }, { children: _jsx(CardContent, { children: _jsx(Flex, Object.assign({ container: { alignItems: 'start' } }, { children: _jsx("div", { children: _jsx(RadioCheck, { checked: checked, type: type, label: children, onChange: () => debouncedClickListener() }, void 0) }, void 0) }), void 0) }, void 0) }), void 0));
+    return (_jsx(StyledSelectableCard, { type: type, interactive: true, checked: checked, onClick: () => debouncedClickListener(), children: _jsx(CardContent, { children: _jsx(Flex, { container: { alignItems: 'start' }, children: _jsx("div", { children: _jsx(RadioCheck, { checked: checked, type: type, label: children, onChange: () => debouncedClickListener() }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
 };
 SelectableCard.defaultProps = defaultProps;
 export default SelectableCard;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableCard.js","sourceRoot":"","sources":["../../../src/components/Card/SelectableCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,UAAU,MAAM,eAAe,CAAC;AAGvC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAgBpC,MAAM,YAAY,GAAiC;IACjD,cAAc,EAAE,KAAK;CACtB,CAAC;AAMF,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,CAA2B;;MAEpE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;;;;QAIzE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;;;IAG5E,UAAU,GAAG,UAAU;;;;IAIvB,UAAU,GAAG,UAAU;;;CAG1B,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAE5D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC;QACxB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;SACjC;IACH,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,oBAAoB,kBACnB,IAAI,EAAE,IAAI,EACV,WAAW,QACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,EAAE,gBAEvC,KAAC,WAAW,cACV,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,gBACtC,wBACE,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,GAAG,EAAE,CAAC,sBAAsB,EAAE,WACxC,WACE,YACD,WACK,YACO,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { debounce } from '../../utils';\nimport Flex, { StyledFlex } from '../Flex/Flex';\nimport RadioCheck from '../RadioCheck';\nimport { RadioCheckProps } from '../RadioCheck/RadioCheck';\n\nimport CardContent from './CardContent';\nimport { StyledCard } from './Card';\n\nexport interface SelectableCardProps extends BaseProps {\n  /** The type of Card selection. Either 'checkbox' or 'radio'. */\n  type: RadioCheckProps['type'];\n  /** The content of the Card. */\n  children: ReactElement<any>;\n  /**\n   * Determines whether the Card is selected by default.\n   * @default false\n   */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /** Callback when the Card is selected or de-selected. */\n  onChange?: (event: { checked: boolean }) => void;\n}\n\nconst defaultProps: Partial<SelectableCardProps> = {\n  defaultChecked: false\n};\n\ninterface StyledSelectableCardProps extends SelectableCardProps {\n  checked: boolean;\n}\n\nconst StyledSelectableCard = styled(StyledCard)<StyledSelectableCardProps>`\n  border: 0.0625rem solid\n    ${props => (props.checked ? props.theme.base.palette.interactive : '#f4f4f4')};\n\n  &:hover {\n    border: 0.0625rem solid\n      ${props => (props.checked ? props.theme.base.palette.interactive : 'gray')};\n  }\n\n  ${StyledFlex}${StyledFlex}:nth-child(1) {\n    margin-right: 0.625rem;\n  }\n\n  ${StyledFlex}${StyledFlex}:nth-child(2) {\n    margin-top: -0.1875rem;\n  }\n`;\n\nStyledSelectableCard.defaultProps = defaultThemeProp;\n\nconst SelectableCard: FunctionComponent<SelectableCardProps & ForwardProps> = (\n  props: SelectableCardProps\n) => {\n  const { type, defaultChecked, onChange, children } = props;\n  const [checked, changeChecked] = useState(!!defaultChecked);\n\n  const onCardClick = () => {\n    changeChecked(!checked);\n    if (onChange) {\n      onChange({ checked: !checked });\n    }\n  };\n\n  const debouncedClickListener = () => debounce(onCardClick, 100)();\n\n  return (\n    <StyledSelectableCard\n      type={type}\n      interactive\n      checked={checked}\n      onClick={() => debouncedClickListener()}\n    >\n      <CardContent>\n        <Flex container={{ alignItems: 'start' }}>\n          <div>\n            <RadioCheck\n              checked={checked}\n              type={type}\n              label={children}\n              onChange={() => debouncedClickListener()}\n            />\n          </div>\n        </Flex>\n      </CardContent>\n    </StyledSelectableCard>\n  );\n};\n\nSelectableCard.defaultProps = defaultProps;\n\nexport default SelectableCard;\n"]}
+{"version":3,"file":"SelectableCard.js","sourceRoot":"","sources":["../../../src/components/Card/SelectableCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,UAAU,MAAM,eAAe,CAAC;AAGvC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAgBpC,MAAM,YAAY,GAAiC;IACjD,cAAc,EAAE,KAAK;CACtB,CAAC;AAMF,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,CAA2B;;MAEpE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;;;;QAIzE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;;;IAG5E,UAAU,GAAG,UAAU;;;;IAIvB,UAAU,GAAG,UAAU;;;CAG1B,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAE5D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC;QACxB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;SACjC;IACH,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,oBAAoB,IACnB,IAAI,EAAE,IAAI,EACV,WAAW,QACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,EAAE,YAEvC,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,YACtC,wBACE,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,GAAG,EAAE,CAAC,sBAAsB,EAAE,WACxC,WACE,WACD,WACK,WACO,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { debounce } from '../../utils';\nimport Flex, { StyledFlex } from '../Flex/Flex';\nimport RadioCheck from '../RadioCheck';\nimport { RadioCheckProps } from '../RadioCheck/RadioCheck';\n\nimport CardContent from './CardContent';\nimport { StyledCard } from './Card';\n\nexport interface SelectableCardProps extends BaseProps {\n  /** The type of Card selection. Either 'checkbox' or 'radio'. */\n  type: RadioCheckProps['type'];\n  /** The content of the Card. */\n  children: ReactElement<any>;\n  /**\n   * Determines whether the Card is selected by default.\n   * @default false\n   */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /** Callback when the Card is selected or de-selected. */\n  onChange?: (event: { checked: boolean }) => void;\n}\n\nconst defaultProps: Partial<SelectableCardProps> = {\n  defaultChecked: false\n};\n\ninterface StyledSelectableCardProps extends SelectableCardProps {\n  checked: boolean;\n}\n\nconst StyledSelectableCard = styled(StyledCard)<StyledSelectableCardProps>`\n  border: 0.0625rem solid\n    ${props => (props.checked ? props.theme.base.palette.interactive : '#f4f4f4')};\n\n  &:hover {\n    border: 0.0625rem solid\n      ${props => (props.checked ? props.theme.base.palette.interactive : 'gray')};\n  }\n\n  ${StyledFlex}${StyledFlex}:nth-child(1) {\n    margin-right: 0.625rem;\n  }\n\n  ${StyledFlex}${StyledFlex}:nth-child(2) {\n    margin-top: -0.1875rem;\n  }\n`;\n\nStyledSelectableCard.defaultProps = defaultThemeProp;\n\nconst SelectableCard: FunctionComponent<SelectableCardProps & ForwardProps> = (\n  props: SelectableCardProps\n) => {\n  const { type, defaultChecked, onChange, children } = props;\n  const [checked, changeChecked] = useState(!!defaultChecked);\n\n  const onCardClick = () => {\n    changeChecked(!checked);\n    if (onChange) {\n      onChange({ checked: !checked });\n    }\n  };\n\n  const debouncedClickListener = () => debounce(onCardClick, 100)();\n\n  return (\n    <StyledSelectableCard\n      type={type}\n      interactive\n      checked={checked}\n      onClick={() => debouncedClickListener()}\n    >\n      <CardContent>\n        <Flex container={{ alignItems: 'start' }}>\n          <div>\n            <RadioCheck\n              checked={checked}\n              type={type}\n              label={children}\n              onChange={() => debouncedClickListener()}\n            />\n          </div>\n        </Flex>\n      </CardContent>\n    </StyledSelectableCard>\n  );\n};\n\nSelectableCard.defaultProps = defaultProps;\n\nexport default SelectableCard;\n"]}

package/lib/components/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import RadioCheck from '../RadioCheck';
 // Odd issue with SB doc prop table not being generated when called Checkbox...so using CB
-const CB = forwardRef((props, ref) => (_jsx(RadioCheck, Object.assign({}, props, { type: 'checkbox', ref: ref }), void 0)));
+const CB = forwardRef((props, ref) => (_jsx(RadioCheck, { ...props, type: 'checkbox', ref: ref }, void 0)));
 // Adding here for doc purposes only
 CB.defaultProps = RadioCheck.defaultProps;
 export default CB;

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,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,YAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps } from '../../types';\n\nexport interface CheckboxProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='checkbox' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,WAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps } from '../../types';\n\nexport interface CheckboxProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='checkbox' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}

package/lib/components/ColorPicker/ColorPicker.js

@@ -107,13 +107,13 @@ const ColorPicker = forwardRef((props, ref) => {
             popoverEl?.focus();
         }
     }, [showPopOver]);
-    return (_jsx(FormField, Object.assign({ inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required }, { children: _jsxs(Flex, Object.assign({ container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly ? undefined : () => setShowPopOver(true) }, { children: [_jsx("input", Object.assign({}, restProps, { id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
+    return (_jsx(FormField, { inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly ? undefined : () => setShowPopOver(true), children: [_jsx("input", { ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
                         e.preventDefault();
                         if (readOnly)
                             e.preventDefault();
-                    } }), void 0), _jsx("div", { style: { backgroundColor: value }, ref: maskedSwatchRef }, void 0), !swatchOnly && value, _jsx(Popover, Object.assign({ placement: 'bottom-start', style: { zIndex: '3000' }, show: showPopOver, ref: setPopoverEl, groupId: 'popover', target: maskedSwatchRef.current }, { children: _jsx(ChromePicker, { disableAlpha: !alpha, color: value, onChange: (color, e) => {
+                    } }, void 0), _jsx("div", { style: { backgroundColor: value }, ref: maskedSwatchRef }, void 0), !swatchOnly && value, _jsx(Popover, { placement: 'bottom-start', style: { zIndex: '3000' }, show: showPopOver, ref: setPopoverEl, groupId: 'popover', target: maskedSwatchRef.current, children: _jsx(ChromePicker, { disableAlpha: !alpha, color: value, onChange: (color, e) => {
                             onChange?.(color, e);
-                        } }, void 0) }), void 0)] }), void 0) }), void 0));
+                        } }, void 0) }, void 0)] }, void 0) }, void 0));
 });
 export default ColorPicker;
 //# sourceMappingURL=ColorPicker.js.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 {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent } from '../../hooks';\nimport Popover from '../Popover';\n\nexport interface ColorPickerProps extends BaseProps {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\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  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\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  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\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\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\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      >\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 ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n              if (readOnly) e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent } from '../../hooks';\nimport Popover from '../Popover';\n\nexport interface ColorPickerProps extends BaseProps {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\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  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\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  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\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\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\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      >\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 ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n              if (readOnly) e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\n"]}

package/lib/components/ComboBox/ComboBox.js

@@ -101,7 +101,7 @@ const ComboBox = forwardRef((props, ref) => {
         setOpen(!open);
     }, [open, onDropdownButtonClickProp]);
     const dropdownButton = useMemo(() => {
-        return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, Object.assign({ "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, disabled: disabled, tabIndex: '-1' }, { children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }, void 0) }), void 0)) : null;
+        return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, { "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }, void 0) }, void 0)) : null;
     }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);
     const onInputClick = useCallback((e) => {
         if (readOnly)
@@ -117,15 +117,15 @@ const ComboBox = forwardRef((props, ref) => {
     // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.
     // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.
     const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }, void 0));
-    const Comp = (_jsxs(StyledComboBox, Object.assign({ ref: containerRef, as: StyledFormControl, id: `${id}-combobox` }, { children: [_jsx(ComboBoxInput, Object.assign({ ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-describedby": `${id}-inputDescription`, selected: selected?.items, spellCheck: false }, {
-                id,
-                readOnly,
-                disabled,
-                onChange,
-                value,
-                mode,
-                status
-            }, { actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown }, restProps), void 0), _jsxs(StyledAriaDescription, Object.assign({ id: `${id}-inputDescription` }, { children: [t('combobox_open_close'), !!onChange && ` ${t('combobox_search_instructions')}`] }), void 0), _jsx(Popover, Object.assign({ show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: popoverModifiers, strategy: isMobile ? 'absolute' : 'fixed', onMouseDown: (e) => e.preventDefault() }, { children: menu && (_jsx(Menu, Object.assign({ ref: menuRef, id: menuComponentId, role: 'listbox', mode: mode }, menu, { items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
+    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-describedby": `${id}-inputDescription`, selected: selected?.items, spellCheck: false, ...{
+                    id,
+                    readOnly,
+                    disabled,
+                    onChange,
+                    value,
+                    mode,
+                    status
+                }, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, ...restProps }, void 0), _jsxs(StyledAriaDescription, { id: `${id}-inputDescription`, children: [t('combobox_open_close'), !!onChange && ` ${t('combobox_search_instructions')}`] }, void 0), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: popoverModifiers, strategy: isMobile ? 'absolute' : 'fixed', onMouseDown: (e) => e.preventDefault(), children: menu && (_jsx(Menu, { ref: menuRef, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
                         if (mode === 'single-select') {
                             setOpen(false);
                         }
@@ -134,8 +134,8 @@ const ComboBox = forwardRef((props, ref) => {
                         if (clickedItem?.primary && !clickedItem?.selected) {
                             selected?.onNew?.(clickedItem?.primary);
                         }
-                    }, arrowNavigationUnsupported: true }), void 0)) }), void 0)] }), void 0));
-    return label ? (_jsx(FormField, Object.assign({}, { label, labelHidden, id, info, status, required, disabled }, { children: Comp }), void 0)) : (Comp);
+                    }, arrowNavigationUnsupported: true }, void 0)) }, void 0)] }, void 0));
+    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
 });
 export default ComboBox;
 //# sourceMappingURL=ComboBox.js.map