@pega/cosmos-react-core 7.0.0-build.22.8 → 7.0.0-build.23.0

package/lib/components/Button/Button.js

@@ -3,7 +3,7 @@ import { useRef, useEffect, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { meetsContrastGuidelines, mix } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils';
+import { isPositionWithinRect, tryCatch } from '../../utils';
 import { getActiveColors, getHoverColors, omitProps, readableColor, readableHue } from '../../styles';
 import { useElement, useConsolidatedRef } from '../../hooks';
 import Tooltip from '../Tooltip';
@@ -43,9 +43,26 @@ const baseStyles = (theme) => {
     }
   `;
 };
+const getFilledButtonStyles = (color) => ({
+    contrastColor: tryCatch(() => readableColor(color)),
+    hoverColors: getHoverColors(color),
+    activeColors: getActiveColors(color)
+});
+const getOutlinedButtonStyles = (color, backgroundColor) => {
+    const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;
+    const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);
+    const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, usableColor));
+    const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));
+    return {
+        textColor: backgroundUsable ? color : readableColor(color),
+        hoverBg: hoverBackgroundColor,
+        hoverFg: readableHue(usableColor, hoverBackgroundColor ?? 'transparent'),
+        activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),
+        activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')
+    };
+};
 export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme }) => {
-    const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed, timing: { ease } } }, components: { button: { color, 'secondary-color': secondaryColor, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
-    const contrastColor = tryCatch(() => readableColor(color));
+    const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed, timing: { ease } } }, components: { button: { color, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
     // Base
     const base = baseStyles(theme);
     // Non-text base
@@ -112,13 +129,12 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
         translate: 0 -0.0625rem;
       }
     `;
-    // Primary
-    const hoverColors = getHoverColors(color);
-    const activeColors = getActiveColors(color);
-    const primary = css `
-      --button-background-color: ${color};
+    // Primary and Secondary-filled
+    const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(variant === 'primary' ? color : secondaryColor);
+    const solidButtonStyles = css `
+      --button-background-color: ${variant === 'primary' ? color : secondaryColor};
       color: ${contrastColor};
-      background-color: ${color};
+      background-color: ${variant === 'primary' ? color : secondaryColor};
 
       @media (hover: hover) {
         &:hover {
@@ -134,39 +150,35 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
         text-decoration: none;
       }
     `;
-    // Secondary
-    const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;
-    const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);
-    const secondaryHoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));
-    const secondaryHoverForegroundColor = readableHue(usableColor, secondaryHoverBackgroundColor ?? 'transparent');
-    const secondaryActiveBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));
-    const secondaryActiveForegroundColor = readableHue(usableColor, secondaryActiveBackgroundColor ?? 'transparent');
+    // Secondary-outline
+    const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);
     const secondary = css `
-      --button-background-color: ${secondaryColor};
-      color: ${usableColor};
-      background-color: ${secondaryColor};
-      border-color: ${usableColor};
+      --button-background-color: ${backgroundColor};
+      color: ${secondaryOutlineButtonStyles.textColor};
+      background-color: ${backgroundColor};
+      border-color: ${secondaryColor};
 
       @media (hover: hover) {
         &:hover {
-          color: ${secondaryHoverForegroundColor};
-          background-color: ${secondaryHoverBackgroundColor};
+          color: ${secondaryOutlineButtonStyles.hoverFg};
+          background-color: ${secondaryOutlineButtonStyles.hoverBg};
           text-decoration: none;
-          border-color: ${secondaryHoverForegroundColor};
+          border-color: ${secondaryOutlineButtonStyles.hoverFg};
         }
       }
 
       &:active {
-        color: ${secondaryActiveForegroundColor};
-        background-color: ${secondaryActiveBackgroundColor};
-        border-color: ${secondaryActiveForegroundColor};
+        color: ${secondaryOutlineButtonStyles.activeFg};
+        background-color: ${secondaryOutlineButtonStyles.activeBg};
+        border-color: ${secondaryOutlineButtonStyles.activeFg};
         text-decoration: none;
       }
     `;
     // Simple
+    const simpleButtonStyles = getOutlinedButtonStyles(fillStyle === 'outline' ? secondaryColor : color, backgroundColor);
     const simple = css `
       --button-background-color: ${icon ? 'transparent' : backgroundColor};
-      color: ${icon ? 'currentColor' : usableColor};
+      color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};
       background-color: ${icon ? 'transparent' : backgroundColor};
 
       @media (hover: hover) {
@@ -188,9 +200,9 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
 
           ${!icon &&
         css `
-            background-color: ${secondaryHoverBackgroundColor};
-            color: ${secondaryHoverForegroundColor};
-            border-color: ${secondaryHoverForegroundColor};
+            background-color: ${simpleButtonStyles.hoverBg};
+            color: ${simpleButtonStyles.hoverFg};
+            border-color: ${simpleButtonStyles.hoverFg};
             text-decoration: none;
           `}
         }
@@ -213,9 +225,9 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
 
           ${!icon &&
         css `
-            background-color: ${secondaryActiveBackgroundColor};
-            color: ${secondaryActiveForegroundColor};
-            border-color: ${secondaryActiveForegroundColor};
+            background-color: ${simpleButtonStyles.activeBg};
+            color: ${simpleButtonStyles.activeFg};
+            border-color: ${simpleButtonStyles.activeFg};
             text-decoration: none;
           `}
         }
@@ -224,8 +236,9 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
     return css `
       ${base}
       ${nonTextual}
-      ${variant === 'primary' && primary}
-      ${variant === 'secondary' && secondary}
+      ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&
+        solidButtonStyles}
+      ${variant === 'secondary' && fillStyle === 'outline' && secondary}
       ${variant === 'simple' && simple}
 
       ${loading &&
@@ -293,22 +306,41 @@ StyledButtonLink.defaultProps = defaultThemeProp;
 const Button = forwardRef(function Button({ variant = 'secondary', type = 'button', disabled = false, icon = false, compact = false, href, as, forwardedAs, label, 'aria-label': ariaLabel, loading = false, children, ...restProps }, ref) {
     const [buttonEl, setButtonEl] = useElement();
     const mouseDownEvent = useRef();
+    const mouseDownPosition = useRef();
+    const mouseDownTimestamp = useRef();
     const buttonRef = useConsolidatedRef(ref, setButtonEl);
     const isTextual = ['link', 'text'].includes(variant);
     const showProgress = loading && !isTextual;
     const StyledComp = isTextual ? StyledButtonLink : StyledButton;
+    const handleClickWithElementShift = (e) => {
+        if (buttonRef.current &&
+            mouseDownPosition.current &&
+            mouseDownTimestamp.current &&
+            isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&
+            Date.now() - mouseDownTimestamp.current < 500) {
+            buttonRef.current.click();
+        }
+    };
     useEffect(() => {
+        document.addEventListener('mouseup', handleClickWithElementShift);
         return () => {
+            document.removeEventListener('mouseup', handleClickWithElementShift);
             mouseDownEvent.current = undefined;
+            mouseDownPosition.current = undefined;
+            mouseDownTimestamp.current = undefined;
         };
     }, []);
     return (_jsxs(_Fragment, { children: [_jsxs(StyledComp, { ...restProps, ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: forwardedAs || (href ? 'a' : 'button'), variant: variant, icon: icon, compact: compact, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label, onMouseDown: (e) => {
                     restProps.onMouseDown?.(e);
                     e.persist();
                     mouseDownEvent.current = e;
+                    mouseDownPosition.current = e.currentTarget.getBoundingClientRect();
+                    mouseDownTimestamp.current = Date.now();
                 }, onMouseUp: (e) => {
                     const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;
                     mouseDownEvent.current = undefined;
+                    mouseDownPosition.current = undefined;
+                    mouseDownTimestamp.current = undefined;
                     if (shouldFocus && buttonRef.current !== document.activeElement) {
                         buttonRef.current?.focus();
                     }

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport {\n  getActiveColors,\n  getHoverColors,\n  omitProps,\n  readableColor,\n  readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /** The label text will be used inside a Tooltip. */\n  label?: string;\n  /** The aria label text will be inserted as the aria-label on the Button. */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n  const {\n    base: {\n      spacing,\n      animation: {\n        speed,\n        timing: { ease }\n      },\n      'disabled-opacity': disabledOpacity\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow }\n    }\n  } = theme;\n\n  return css`\n    outline: none;\n    text-decoration: none;\n    transition-property: background-color, color, border-color, box-shadow, translate;\n    transition-duration: calc(0.5 * ${speed});\n    transition-timing-function: ${ease};\n    cursor: pointer;\n\n    & + & {\n      margin-inline-start: ${spacing};\n    }\n\n    /* Not able to combine with selector above. Stylis bug? */\n    & + ${StyledPopover} + & {\n      margin-inline-start: ${spacing};\n    }\n\n    &:disabled,\n    &[disabled] {\n      opacity: ${disabledOpacity};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({ variant, icon, loading, compact, theme }) => {\n    const {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    // Base\n    const base = baseStyles(theme);\n\n    // Non-text base\n    const nonTextual = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: ${hitAreaMouse};\n      min-width: ${hitAreaMouse};\n      border: ${borderWidth} solid transparent;\n      border-radius: calc(${baseBorderRadius} * ${borderRadius});\n      -webkit-user-select: none;\n      user-select: none;\n\n      ${!icon &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${icon &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      @media (pointer: coarse) {\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        ${!compact &&\n        css`\n          min-height: ${hitAreaFinger};\n          min-width: ${hitAreaFinger};\n        `}\n\n        ${!icon &&\n        css`\n          padding: ${touchPadding};\n        `}\n      }\n\n      &:active {\n        translate: 0 0.0625rem;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: calc(-1 * ${borderWidth});\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        transition: translate calc(0.5 * ${speed}) ${ease};\n      }\n\n      &:active::after {\n        translate: 0 -0.0625rem;\n      }\n    `;\n\n    // Primary\n    const hoverColors = getHoverColors(color);\n    const activeColors = getActiveColors(color);\n    const primary = css`\n      --button-background-color: ${color};\n      color: ${contrastColor};\n      background-color: ${color};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        background-color: ${activeColors.background};\n        color: ${activeColors.foreground};\n        text-decoration: none;\n      }\n    `;\n\n    // Secondary\n    const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;\n    const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);\n    const secondaryHoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));\n    const secondaryHoverForegroundColor = readableHue(\n      usableColor,\n      secondaryHoverBackgroundColor ?? 'transparent'\n    );\n    const secondaryActiveBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));\n    const secondaryActiveForegroundColor = readableHue(\n      usableColor,\n      secondaryActiveBackgroundColor ?? 'transparent'\n    );\n    const secondary = css`\n      --button-background-color: ${secondaryColor};\n      color: ${usableColor};\n      background-color: ${secondaryColor};\n      border-color: ${usableColor};\n\n      @media (hover: hover) {\n        &:hover {\n          color: ${secondaryHoverForegroundColor};\n          background-color: ${secondaryHoverBackgroundColor};\n          text-decoration: none;\n          border-color: ${secondaryHoverForegroundColor};\n        }\n      }\n\n      &:active {\n        color: ${secondaryActiveForegroundColor};\n        background-color: ${secondaryActiveBackgroundColor};\n        border-color: ${secondaryActiveForegroundColor};\n        text-decoration: none;\n      }\n    `;\n\n    // Simple\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : usableColor};\n      background-color: ${icon ? 'transparent' : backgroundColor};\n\n      @media (hover: hover) {\n        &:hover {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.1;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${secondaryHoverBackgroundColor};\n            color: ${secondaryHoverForegroundColor};\n            border-color: ${secondaryHoverForegroundColor};\n            text-decoration: none;\n          `}\n        }\n\n        &:active {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.2;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${secondaryActiveBackgroundColor};\n            color: ${secondaryActiveForegroundColor};\n            border-color: ${secondaryActiveForegroundColor};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${variant === 'primary' && primary}\n      ${variant === 'secondary' && secondary}\n      ${variant === 'simple' && simple}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: var(--button-background-color);\n          border-radius: inherit;\n        }\n\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n\n          ${!icon &&\n          css`\n            margin-inline-end: calc(${spacing} / 2);\n          `}\n\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<\n  Pick<ButtonPropsWithDefaults, 'variant'> &\n    // Needed for omitProps\n    Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant }) => {\n  const {\n    base: {\n      palette: { 'foreground-color': textColor }\n    },\n    components: {\n      link: { color: linkColor }\n    }\n  } = theme;\n\n  const base = baseStyles(theme);\n\n  const textual = css`\n    background-color: transparent;\n    display: inline;\n    text-align: start;\n    border: none;\n\n    @media (hover: hover) {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    > ${StyledIcon} {\n      vertical-align: bottom;\n    }\n  `;\n\n  const { background: activeColor } = getActiveColors(linkColor);\n  const link = css`\n    color: ${linkColor};\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n\n  const text = css`\n    color: ${textColor};\n  `;\n\n  return css`\n    ${base}\n    ${textual}\n      ${variant === 'link' && link}\n      ${variant === 'text' && text}\n  `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n  {\n    variant = 'secondary',\n    type = 'button',\n    disabled = false,\n    icon = false,\n    compact = false,\n    href,\n    as,\n    forwardedAs,\n    label,\n    'aria-label': ariaLabel,\n    loading = false,\n    children,\n    ...restProps\n  }: PropsWithoutRef<ButtonProps> & ForwardProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const [buttonEl, setButtonEl] = useElement();\n  const mouseDownEvent = useRef<MouseEvent>();\n  const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n  const isTextual = ['link', 'text'].includes(variant);\n  const showProgress = loading && !isTextual;\n  const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n  useEffect(() => {\n    return () => {\n      mouseDownEvent.current = undefined;\n    };\n  }, []);\n\n  return (\n    <>\n      <StyledComp\n        {...restProps}\n        ref={buttonRef}\n        as={as || (href ? 'a' : 'button')}\n        forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n        variant={variant}\n        icon={icon}\n        compact={compact}\n        type={href ? undefined : type}\n        href={href}\n        disabled={disabled && !href}\n        loading={showProgress}\n        aria-label={ariaLabel || label}\n        onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n        }}\n        onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n\n          if (shouldFocus && buttonRef.current !== document.activeElement) {\n            buttonRef.current?.focus();\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n        }}\n      >\n        {showProgress && <Progress variant='ring' placement='inline' />}\n        {!icon || !showProgress ? children : null}\n      </StyledComp>\n\n      {buttonEl && label && (\n        <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch } from '../../utils';\nimport {\n  getActiveColors,\n  getHoverColors,\n  omitProps,\n  readableColor,\n  readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /** The label text will be used inside a Tooltip. */\n  label?: string;\n  /** The aria label text will be inserted as the aria-label on the Button. */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n  const {\n    base: {\n      spacing,\n      animation: {\n        speed,\n        timing: { ease }\n      },\n      'disabled-opacity': disabledOpacity\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow }\n    }\n  } = theme;\n\n  return css`\n    outline: none;\n    text-decoration: none;\n    transition-property: background-color, color, border-color, box-shadow, translate;\n    transition-duration: calc(0.5 * ${speed});\n    transition-timing-function: ${ease};\n    cursor: pointer;\n\n    & + & {\n      margin-inline-start: ${spacing};\n    }\n\n    /* Not able to combine with selector above. Stylis bug? */\n    & + ${StyledPopover} + & {\n      margin-inline-start: ${spacing};\n    }\n\n    &:disabled,\n    &[disabled] {\n      opacity: ${disabledOpacity};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n};\n\nconst getFilledButtonStyles = (color: string) => ({\n  contrastColor: tryCatch(() => readableColor(color)),\n  hoverColors: getHoverColors(color),\n  activeColors: getActiveColors(color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n  const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;\n  const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, usableColor));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n  return {\n    textColor: backgroundUsable ? color : readableColor(color),\n    hoverBg: hoverBackgroundColor,\n    hoverFg: readableHue(usableColor, hoverBackgroundColor ?? 'transparent'),\n    activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n    activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n  };\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({ variant, icon, loading, compact, theme }) => {\n    const {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          'secondary-fill-style': fillStyle,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\n\n    // Base\n    const base = baseStyles(theme);\n\n    // Non-text base\n    const nonTextual = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: ${hitAreaMouse};\n      min-width: ${hitAreaMouse};\n      border: ${borderWidth} solid transparent;\n      border-radius: calc(${baseBorderRadius} * ${borderRadius});\n      -webkit-user-select: none;\n      user-select: none;\n\n      ${!icon &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${icon &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      @media (pointer: coarse) {\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        ${!compact &&\n        css`\n          min-height: ${hitAreaFinger};\n          min-width: ${hitAreaFinger};\n        `}\n\n        ${!icon &&\n        css`\n          padding: ${touchPadding};\n        `}\n      }\n\n      &:active {\n        translate: 0 0.0625rem;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: calc(-1 * ${borderWidth});\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        transition: translate calc(0.5 * ${speed}) ${ease};\n      }\n\n      &:active::after {\n        translate: 0 -0.0625rem;\n      }\n    `;\n\n    // Primary and Secondary-filled\n    const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(\n      variant === 'primary' ? color : secondaryColor\n    );\n    const solidButtonStyles = css`\n      --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n      color: ${contrastColor};\n      background-color: ${variant === 'primary' ? color : secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        background-color: ${activeColors.background};\n        color: ${activeColors.foreground};\n        text-decoration: none;\n      }\n    `;\n\n    // Secondary-outline\n    const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n    const secondary = css`\n      --button-background-color: ${backgroundColor};\n      color: ${secondaryOutlineButtonStyles.textColor};\n      background-color: ${backgroundColor};\n      border-color: ${secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          color: ${secondaryOutlineButtonStyles.hoverFg};\n          background-color: ${secondaryOutlineButtonStyles.hoverBg};\n          text-decoration: none;\n          border-color: ${secondaryOutlineButtonStyles.hoverFg};\n        }\n      }\n\n      &:active {\n        color: ${secondaryOutlineButtonStyles.activeFg};\n        background-color: ${secondaryOutlineButtonStyles.activeBg};\n        border-color: ${secondaryOutlineButtonStyles.activeFg};\n        text-decoration: none;\n      }\n    `;\n\n    // Simple\n    const simpleButtonStyles = getOutlinedButtonStyles(\n      fillStyle === 'outline' ? secondaryColor : color,\n      backgroundColor\n    );\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n      background-color: ${icon ? 'transparent' : backgroundColor};\n\n      @media (hover: hover) {\n        &:hover {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.1;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.hoverBg};\n            color: ${simpleButtonStyles.hoverFg};\n            border-color: ${simpleButtonStyles.hoverFg};\n            text-decoration: none;\n          `}\n        }\n\n        &:active {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.2;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.activeBg};\n            color: ${simpleButtonStyles.activeFg};\n            border-color: ${simpleButtonStyles.activeFg};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n      solidButtonStyles}\n      ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n      ${variant === 'simple' && simple}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: var(--button-background-color);\n          border-radius: inherit;\n        }\n\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n\n          ${!icon &&\n          css`\n            margin-inline-end: calc(${spacing} / 2);\n          `}\n\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<\n  Pick<ButtonPropsWithDefaults, 'variant'> &\n    // Needed for omitProps\n    Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant }) => {\n  const {\n    base: {\n      palette: { 'foreground-color': textColor }\n    },\n    components: {\n      link: { color: linkColor }\n    }\n  } = theme;\n\n  const base = baseStyles(theme);\n\n  const textual = css`\n    background-color: transparent;\n    display: inline;\n    text-align: start;\n    border: none;\n\n    @media (hover: hover) {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    > ${StyledIcon} {\n      vertical-align: bottom;\n    }\n  `;\n\n  const { background: activeColor } = getActiveColors(linkColor);\n  const link = css`\n    color: ${linkColor};\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n\n  const text = css`\n    color: ${textColor};\n  `;\n\n  return css`\n    ${base}\n    ${textual}\n      ${variant === 'link' && link}\n      ${variant === 'text' && text}\n  `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n  {\n    variant = 'secondary',\n    type = 'button',\n    disabled = false,\n    icon = false,\n    compact = false,\n    href,\n    as,\n    forwardedAs,\n    label,\n    'aria-label': ariaLabel,\n    loading = false,\n    children,\n    ...restProps\n  }: PropsWithoutRef<ButtonProps> & ForwardProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const [buttonEl, setButtonEl] = useElement();\n  const mouseDownEvent = useRef<ReactMouseEvent>();\n  const mouseDownPosition = useRef<DOMRect>();\n  const mouseDownTimestamp = useRef<number>();\n  const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n  const isTextual = ['link', 'text'].includes(variant);\n  const showProgress = loading && !isTextual;\n  const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n  const handleClickWithElementShift = (e: MouseEvent) => {\n    if (\n      buttonRef.current &&\n      mouseDownPosition.current &&\n      mouseDownTimestamp.current &&\n      isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n      Date.now() - mouseDownTimestamp.current < 500\n    ) {\n      buttonRef.current.click();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleClickWithElementShift);\n\n    return () => {\n      document.removeEventListener('mouseup', handleClickWithElementShift);\n      mouseDownEvent.current = undefined;\n      mouseDownPosition.current = undefined;\n      mouseDownTimestamp.current = undefined;\n    };\n  }, []);\n\n  return (\n    <>\n      <StyledComp\n        {...restProps}\n        ref={buttonRef}\n        as={as || (href ? 'a' : 'button')}\n        forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n        variant={variant}\n        icon={icon}\n        compact={compact}\n        type={href ? undefined : type}\n        href={href}\n        disabled={disabled && !href}\n        loading={showProgress}\n        aria-label={ariaLabel || label}\n        onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n          mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n          mouseDownTimestamp.current = Date.now();\n        }}\n        onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n          mouseDownPosition.current = undefined;\n          mouseDownTimestamp.current = undefined;\n\n          if (shouldFocus && buttonRef.current !== document.activeElement) {\n            buttonRef.current?.focus();\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n        }}\n      >\n        {showProgress && <Progress variant='ring' placement='inline' />}\n        {!icon || !showProgress ? children : null}\n      </StyledComp>\n\n      {buttonEl && label && (\n        <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKnE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA6BpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMnE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6HA6CrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA6BpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -4,8 +4,10 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { StyledPopover } from '../Popover';
+import { useFullscreenContext } from '../Fullscreen';
 import { StyledCardMedia } from './CardMedia';
 export const StyledCard = styled.article(props => {
+    const fullscreen = useFullscreenContext();
     const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
     const interactive = props.interactive
         ? css `
@@ -35,6 +37,12 @@ export const StyledCard = styled.article(props => {
           border-radius: ${borderRadius} ${borderRadius} 0 0;
         }
       }
+
+      ${fullscreen?.[0] &&
+        css `
+        block-size: 100%;
+        border-radius: 0;
+      `}
     }
   `;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;MACN,aAAa;0BACO,UAAU;uBACb,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;GAIpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    ${StyledPopover} &, &:not(& &) {\n      background-color: ${background};\n      border-radius: ${borderRadius};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: ${borderRadius} ${borderRadius} 0 0;\n        }\n      }\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(function Card(\n  { children, as, onClick, interactive = false, ...restProps }: PropsWithoutRef<CardProps>,\n  ref: CardProps['ref']\n) {\n  const interactiveProps = {\n    ...(onClick && {\n      onClick,\n      tabIndex: 0,\n      role: 'button'\n    }),\n    ...(interactive && {\n      tabIndex: 0\n    }),\n    interactive\n  };\n\n  return (\n    <Flex\n      role='none'\n      container={{ direction: 'column' }}\n      as={StyledCard}\n      forwardedAs={as}\n      ref={ref}\n      {...interactiveProps}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Card;\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;MACN,aAAa;0BACO,UAAU;uBACb,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;QAI/C,UAAU,EAAE,CAAC,CAAC,CAAC;QACjB,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { useFullscreenContext } from '../Fullscreen';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const fullscreen = useFullscreenContext();\n\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    ${StyledPopover} &, &:not(& &) {\n      background-color: ${background};\n      border-radius: ${borderRadius};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: ${borderRadius} ${borderRadius} 0 0;\n        }\n      }\n\n      ${fullscreen?.[0] &&\n      css`\n        block-size: 100%;\n        border-radius: 0;\n      `}\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(function Card(\n  { children, as, onClick, interactive = false, ...restProps }: PropsWithoutRef<CardProps>,\n  ref: CardProps['ref']\n) {\n  const interactiveProps = {\n    ...(onClick && {\n      onClick,\n      tabIndex: 0,\n      role: 'button'\n    }),\n    ...(interactive && {\n      tabIndex: 0\n    }),\n    interactive\n  };\n\n  return (\n    <Flex\n      role='none'\n      container={{ direction: 'column' }}\n      as={StyledCard}\n      forwardedAs={as}\n      ref={ref}\n      {...interactiveProps}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Card;\n"]}

package/lib/components/ColorPicker/ColorPicker.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,yGAyD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;SAczB,CAAC"}
+{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,yGAyD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;SAkBzB,CAAC"}

package/lib/components/ComboBox/ComboBox.styles.js

@@ -67,6 +67,10 @@ export const StyledComboBox = styled(StyledFormControl)(() => {
     return css `
     border: 0;
 
+    &:focus {
+      z-index: 1;
+    }
+
     ${StyledPopover} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;UAKxC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;sBAK/D,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;MAGN,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n\n    div {\n      min-height: calc(\n        ${components.input.height} - 2 * ${components['form-control']['border-width']}\n      );\n    }\n\n    &:focus-within {\n      border-color: ${components['form-control'][':focus']['border-color']};\n      box-shadow: ${components['form-control'][':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n      color: ${components['form-control']['foreground-color']};\n      text-overflow: ellipsis;\n      margin-inline: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n\n    & > ${StyledButton} {\n      align-self: stretch;\n      height: auto;\n      margin-block: -0.0625rem;\n      margin-inline-end: -0.0625rem;\n      border-start-start-radius: 0;\n      border-start-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n      border-end-start-radius: 0;\n      border-end-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      ${StyledMenu},\n      ${StyledMenuListWrapper} {\n        max-height: inherit;\n      }\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;UAKxC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;sBAK/D,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n\n    div {\n      min-height: calc(\n        ${components.input.height} - 2 * ${components['form-control']['border-width']}\n      );\n    }\n\n    &:focus-within {\n      border-color: ${components['form-control'][':focus']['border-color']};\n      box-shadow: ${components['form-control'][':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n      color: ${components['form-control']['foreground-color']};\n      text-overflow: ellipsis;\n      margin-inline: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n\n    & > ${StyledButton} {\n      align-self: stretch;\n      height: auto;\n      margin-block: -0.0625rem;\n      margin-inline-end: -0.0625rem;\n      border-start-start-radius: 0;\n      border-start-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n      border-end-start-radius: 0;\n      border-end-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    &:focus {\n      z-index: 1;\n    }\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      ${StyledMenu},\n      ${StyledMenuListWrapper} {\n        max-height: inherit;\n      }\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Configuration/Configuration.d.ts

@@ -5,6 +5,7 @@ import type { StyleSheetManagerProps } from 'styled-components';
 import '../../init';
 import type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
 import type { Translation, TranslationPack } from '../../i18n';
+import './connected-watcher';
 export interface ConfigurationProps {
     /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */
     children: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}