@pega/cosmos-react-core 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/components/Banner/Banner.js

@@ -5,12 +5,16 @@ import { getContrast, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Icon, { registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
+import * as checkIcon from '../Icon/icons/check.icon';
+import * as bulbIcon from '../Icon/icons/bulb.icon';
+import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
+import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
 import Button from '../Button';
 import { tryCatch } from '../../utils';
 import { useDirection, useI18n } from '../../hooks';
 import Flex from '../Flex';
 import Text from '../Text';
-registerIcon(timesIcon);
+registerIcon(timesIcon, checkIcon, bulbIcon, warnSolidIcon, flagWaveSolidIcon);
 export const StyledBannerMessages = styled.ul(({ theme, inline }) => {
     return css `
     list-style-position: inside;
@@ -44,6 +48,8 @@ StyledBannerContent.defaultProps = defaultThemeProp;
 export const StyledBannerMessage = styled.li(({ inline, theme }) => {
     return css `
     color: ${theme.base.palette['foreground-color']};
+    word-break: break-word;
+
     ${inline &&
         css `
       display: inline-block;
@@ -104,16 +110,16 @@ const Banner = forwardRef(({ variant, heading, headingTag = 'h2', messages, onDi
         role = undefined;
     }
     else if (variant === 'warning') {
-        bannerIcon = 'warn';
+        bannerIcon = 'flag-wave-solid';
     }
     const t = useI18n();
-    return (_jsxs(Flex, { ...restProps, container: true, as: StyledBanner, role: role, "aria-live": ariaLive, id: id, ref: ref, children: [_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { shrink: 0 }, as: StyledBannerStatus, variant: variant, children: _jsx(Icon, { name: bannerIcon }, void 0) }, void 0), _jsxs(Flex, { container: singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }, item: { grow: 1 }, as: StyledBannerContent, hasDismiss: hasDismiss, children: [heading && (_jsx(Text, { variant: 'h4', as: headingTag, children: heading }, void 0)), _jsx(StyledBannerMessages, { inline: inline, children: messages.map((msg, index) => (
+    return (_jsxs(Flex, { ...restProps, container: true, as: StyledBanner, role: role, "aria-live": ariaLive, id: id, ref: ref, children: [_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { shrink: 0 }, as: StyledBannerStatus, variant: variant, children: _jsx(Icon, { name: bannerIcon }) }), _jsxs(Flex, { container: singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }, item: { grow: 1 }, as: StyledBannerContent, hasDismiss: hasDismiss, children: [heading && (_jsx(Text, { variant: 'h4', as: headingTag, children: heading })), _jsx(StyledBannerMessages, { inline: inline, children: messages.map((msg, index) => (
                         // eslint-disable-next-line react/no-array-index-key
-                        _jsx(StyledBannerMessage, { inline: inline, children: msg }, `${msg}+${index}`))) }, void 0), action] }, void 0), onDismiss && (_jsx(Flex, { container: {
+                        _jsx(StyledBannerMessage, { inline: inline, children: msg }, `${msg}+${index}`))) }), action] }), onDismiss && (_jsx(Flex, { container: {
                     direction: 'column',
                     justify: singleLine ? 'center' : undefined,
                     pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]
-                }, as: StyledBannerDismissColumn, children: _jsx(StyledBannerDismissButton, { variant: 'simple', icon: true, onClick: () => onDismiss(id), "aria-label": t('banner_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0) }, void 0))] }, void 0));
+                }, as: StyledBannerDismissColumn, children: _jsx(StyledBannerDismissButton, { variant: 'simple', icon: true, onClick: () => onDismiss(id), "aria-label": t('banner_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) }) }))] }));
 });
 export default Banner;
 //# sourceMappingURL=Banner.js.map

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'success' | 'warning' | 'info';\n  /**  Heading text for the Banner. */\n  heading?: string;\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default \"h2\"\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: string[];\n  /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */\n  id: string;\n  /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */\n  action?: ReactNode;\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n  return css`\n    list-style-position: inside;\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n  const { end } = useDirection();\n  return css`\n    position: relative;\n    padding: calc(1.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n    ${\n      hasDismiss &&\n      css`\n        border-inline-end: none;\n        padding-inline-end: calc(0.75 * ${theme.base.spacing});\n        border-radius: 0;\n      `\n    }\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n  const { end } = useDirection();\n  return css`\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n  `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background: bg } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(bg, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(bg)\n  );\n\n  const { start } = useDirection();\n\n  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-top-${start}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      heading,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      action,\n      id,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const inline = messages.length === 1;\n    const singleLine = inline && !heading;\n    const hasDismiss = !!onDismiss;\n\n    let bannerIcon = 'warn-solid';\n    let role: string | undefined = 'alert';\n    let ariaLive = 'assertive';\n\n    if (variant === 'info') {\n      bannerIcon = 'bulb-solid';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'success') {\n      bannerIcon = 'check';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'warning') {\n      bannerIcon = 'warn';\n    }\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledBanner}\n        role={role}\n        aria-live={ariaLive}\n        id={id}\n        ref={ref}\n      >\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          item={{ shrink: 0 }}\n          as={StyledBannerStatus}\n          variant={variant}\n        >\n          <Icon name={bannerIcon} />\n        </Flex>\n\n        <Flex\n          container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n          item={{ grow: 1 }}\n          as={StyledBannerContent}\n          hasDismiss={hasDismiss}\n        >\n          {heading && (\n            <Text variant='h4' as={headingTag}>\n              {heading}\n            </Text>\n          )}\n\n          <StyledBannerMessages inline={inline}>\n            {messages.map((msg, index) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n                {msg}\n              </StyledBannerMessage>\n            ))}\n          </StyledBannerMessages>\n\n          {action}\n        </Flex>\n\n        {onDismiss && (\n          <Flex\n            container={{\n              direction: 'column',\n              justify: singleLine ? 'center' : undefined,\n              pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n            }}\n            as={StyledBannerDismissColumn}\n          >\n            <StyledBannerDismissButton\n              variant='simple'\n              icon\n              onClick={() => onDismiss(id)}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n            >\n              <Icon name='times' />\n            </StyledBannerDismissButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Banner;\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as bulbIcon from '../Icon/icons/bulb.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon, checkIcon, bulbIcon, warnSolidIcon, flagWaveSolidIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'success' | 'warning' | 'info';\n  /**  Heading text for the Banner. */\n  heading?: string;\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default \"h2\"\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: string[];\n  /** ID for the Banner. Used both as onDismiss callback arg and DOM id. */\n  id: string;\n  /** Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. */\n  action?: ReactNode;\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n  return css`\n    list-style-position: inside;\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n  const { end } = useDirection();\n  return css`\n    position: relative;\n    padding: calc(1.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n    ${\n      hasDismiss &&\n      css`\n        border-inline-end: none;\n        padding-inline-end: calc(0.75 * ${theme.base.spacing});\n        border-radius: 0;\n      `\n    }\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    word-break: break-word;\n\n    ${inline &&\n    css`\n      display: inline-block;\n      margin-inline-end: ${theme.base.spacing};\n    `}\n  `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n  const { end } = useDirection();\n  return css`\n    border-top-${end}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n  `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background: bg } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(bg, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(bg)\n  );\n\n  const { start } = useDirection();\n\n  return css`\n    background-color: ${bg};\n    width: 3.125rem;\n    color: ${color};\n    border-top-${start}-radius: ${theme.components.card['border-radius']};\n    border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      heading,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      action,\n      id,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const inline = messages.length === 1;\n    const singleLine = inline && !heading;\n    const hasDismiss = !!onDismiss;\n\n    let bannerIcon = 'warn-solid';\n    let role: string | undefined = 'alert';\n    let ariaLive = 'assertive';\n\n    if (variant === 'info') {\n      bannerIcon = 'bulb-solid';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'success') {\n      bannerIcon = 'check';\n      ariaLive = 'polite';\n      role = undefined;\n    } else if (variant === 'warning') {\n      bannerIcon = 'flag-wave-solid';\n    }\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        {...restProps}\n        container\n        as={StyledBanner}\n        role={role}\n        aria-live={ariaLive}\n        id={id}\n        ref={ref}\n      >\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          item={{ shrink: 0 }}\n          as={StyledBannerStatus}\n          variant={variant}\n        >\n          <Icon name={bannerIcon} />\n        </Flex>\n\n        <Flex\n          container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n          item={{ grow: 1 }}\n          as={StyledBannerContent}\n          hasDismiss={hasDismiss}\n        >\n          {heading && (\n            <Text variant='h4' as={headingTag}>\n              {heading}\n            </Text>\n          )}\n\n          <StyledBannerMessages inline={inline}>\n            {messages.map((msg, index) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n                {msg}\n              </StyledBannerMessage>\n            ))}\n          </StyledBannerMessages>\n\n          {action}\n        </Flex>\n\n        {onDismiss && (\n          <Flex\n            container={{\n              direction: 'column',\n              justify: singleLine ? 'center' : undefined,\n              pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n            }}\n            as={StyledBannerDismissColumn}\n          >\n            <StyledBannerDismissButton\n              variant='simple'\n              icon\n              onClick={() => onDismiss(id)}\n              aria-label={t('banner_dismiss_button_label_a11y')}\n            >\n              <Icon name='times' />\n            </StyledBannerDismissButton>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Banner;\n"]}

package/lib/components/Boolean/BooleanDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAYD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAyBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BooleanDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAMD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Boolean/BooleanDisplay.js

@@ -1,24 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import Icon, { StyledIcon } from '../Icon';
-const StyledBooleanDisplay = styled.span(({ theme }) => {
-    return css `
-    ${StyledIcon} {
-      margin-inline-end: ${theme.base.spacing};
-    }
-  `;
-});
+const StyledBooleanDisplay = styled.span ``;
 StyledBooleanDisplay.defaultProps = defaultThemeProp;
 const BooleanDisplay = forwardRef(({ value, trueLabel, falseLabel, ...restProps }, ref) => {
     const t = useI18n();
-    const iconName = value ? 'check' : 'times';
     const displayText = value
         ? trueLabel || t('boolean_display_true_label')
         : falseLabel || t('boolean_display_false_label');
-    return (_jsx(StyledBooleanDisplay, { ref: ref, ...restProps, children: value !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: iconName }, void 0), displayText] }, void 0)) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0)) }, void 0));
+    return (_jsx(StyledBooleanDisplay, { ref: ref, ...restProps, children: value !== undefined ? _jsx(_Fragment, { children: displayText }) : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) }));
 });
 export default BooleanDisplay;
 //# sourceMappingURL=BooleanDisplay.js.map

package/lib/components/Boolean/BooleanDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDisplay.js","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiB3C,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;MACN,UAAU;2BACW,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAwC,EACpF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,4BAA4B,CAAC;QAC9C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,WAAI,EACvB,WAAW,YACX,CACJ,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,WACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Icon, { StyledIcon } from '../Icon';\n\nexport interface BooleanDisplayProps extends BaseProps, NoChildrenProp {\n  /** Boolean value */\n  value?: boolean;\n  /** The text to be displayed when value is true.\n   * @default \"Yes\"\n   */\n  trueLabel?: string;\n  /** The text to be displayed when value is false.\n   * @default \"No\"\n   */\n  falseLabel?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst StyledBooleanDisplay = styled.span(({ theme }) => {\n  return css`\n    ${StyledIcon} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledBooleanDisplay.defaultProps = defaultThemeProp;\n\nconst BooleanDisplay: FunctionComponent<BooleanDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, trueLabel, falseLabel, ...restProps }: PropsWithoutRef<BooleanDisplayProps>,\n    ref: BooleanDisplayProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const iconName = value ? 'check' : 'times';\n    const displayText = value\n      ? trueLabel || t('boolean_display_true_label')\n      : falseLabel || t('boolean_display_false_label');\n\n    return (\n      <StyledBooleanDisplay ref={ref} {...restProps}>\n        {value !== undefined ? (\n          <>\n            <Icon name={iconName} />\n            {displayText}\n          </>\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </StyledBooleanDisplay>\n    );\n  }\n);\n\nexport default BooleanDisplay;\n"]}
+{"version":3,"file":"BooleanDisplay.js","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAkB/C,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE3C,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAwC,EACpF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,4BAA4B,CAAC;QAC9C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,4BAAG,WAAW,GAAI,CAAC,CAAC,CAAC,8BAAkB,MAAM,6BAAsB,GACrE,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface BooleanDisplayProps extends BaseProps, NoChildrenProp {\n  /** Boolean value */\n  value?: boolean;\n  /** The text to be displayed when value is true.\n   * @default \"Yes\"\n   */\n  trueLabel?: string;\n  /** The text to be displayed when value is false.\n   * @default \"No\"\n   */\n  falseLabel?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst StyledBooleanDisplay = styled.span``;\n\nStyledBooleanDisplay.defaultProps = defaultThemeProp;\n\nconst BooleanDisplay: FunctionComponent<BooleanDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, trueLabel, falseLabel, ...restProps }: PropsWithoutRef<BooleanDisplayProps>,\n    ref: BooleanDisplayProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const displayText = value\n      ? trueLabel || t('boolean_display_true_label')\n      : falseLabel || t('boolean_display_false_label');\n\n    return (\n      <StyledBooleanDisplay ref={ref} {...restProps}>\n        {value !== undefined ? <>{displayText}</> : <span aria-hidden='true'>&ndash;&ndash;</span>}\n      </StyledBooleanDisplay>\n    );\n  }\n);\n\nexport default BooleanDisplay;\n"]}

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,5 @@
 import { FunctionComponent, Ref } from 'react';
+import { DefaultTheme } from 'styled-components';
 import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
 import { MenuItemProps } from '../Menu';
 export interface BreadcrumbsProps extends BaseProps, NoChildrenProp {
@@ -7,7 +8,7 @@ export interface BreadcrumbsProps extends BaseProps, NoChildrenProp {
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", DefaultTheme, {
     oneItemRemaining: boolean;
 }, never>;
 declare const Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SAoBtE,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoGnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SA0BtE,CAAC;AAyBF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwHnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,19 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
 import { useElement, useConsolidatedRef, useDirection } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import { debounce } from '../../utils';
-import Button from '../Button';
+import { debounce, tryCatch } from '../../utils';
+import Button, { StyledButton } from '../Button';
 import Flex from '../Flex';
-import Link from '../Link';
+import Link, { StyledLink } from '../Link';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import MenuButton from '../MenuButton';
-import Text from '../Text';
+import Text, { StyledText } from '../Text';
 registerIcon(caretLeftIcon, caretRightIcon);
-export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
+const StyledSeparator = styled(Icon)(({ theme }) => {
+    const color = tryCatch(() => rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    return css `
+    color: ${color};
+  `;
+});
+export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css `
     white-space: nowrap;
     overflow: visible;
     visibility: hidden;
@@ -24,6 +31,12 @@ export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
       flex-shrink: 0;
     }
 
+    ${StyledLink},
+    ${StyledButton},
+    ${StyledText} {
+      max-width: ${theme.base['content-width'].md};
+    }
+
     ${oneItemRemaining &&
     css `
       & > :last-child {
@@ -33,6 +46,20 @@ export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
     `}
   `);
 StyledBreadcrumbs.defaultProps = defaultThemeProp;
+const getEllipsisStyles = ({ theme }) => {
+    return css `
+    min-width: ${theme.base['content-width'].xs};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+};
+const StyledEllipsizedLink = styled(Link)(getEllipsisStyles);
+StyledEllipsizedLink.defaultProps = defaultThemeProp;
+const StyledEllipsizedButton = styled(Button)(getEllipsisStyles);
+StyledEllipsizedButton.defaultProps = defaultThemeProp;
+const StyledEllipsizedText = styled(Text)(getEllipsisStyles);
+StyledEllipsizedText.defaultProps = defaultThemeProp;
 const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
     const [breadcrumbsEl, setBreadcrumbsEl] = useElement();
     const [numMenuItems, setNumMenuItems] = useState(0);
@@ -72,19 +99,23 @@ const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
         }
     }, [breadcrumbsEl, numMenuItems]);
     const { end } = useDirection();
-    return (_jsxs(Flex, { ...restProps, container: { gap: 1, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }, void 0), _jsx(Icon, { name: `caret-${end}` }, void 0)] }, void 0)), path.slice(numMenuItems).map((crumb, index) => {
-                const { id, primary, visual, ...restCrumbProps } = crumb;
+    return (_jsxs(Flex, { ...restProps, container: { gap: 0.5, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(StyledSeparator, { name: `caret-${end}` })] })), path.slice(numMenuItems).map((crumb, index) => {
+                const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;
                 let Comp;
-                if (crumb.href)
-                    Comp = (_jsxs(Link, { href: crumb.href, ...restCrumbProps, children: [visual, " ", primary] }, id));
-                else if (crumb.onClick)
-                    Comp = (_jsxs(Button, { variant: 'link', ...restCrumbProps, children: [visual, " ", primary] }, id));
+                if (href)
+                    Comp = (_jsxs(Link, { href: href, as: primary.length > 60 ? StyledEllipsizedLink : undefined, onClick: (e) => {
+                            onClick?.(id, e);
+                        }, ...restCrumbProps, children: [visual, " ", primary] }, id));
+                else if (onClick)
+                    Comp = (_jsxs(Button, { variant: 'link', as: primary.length > 60 ? StyledEllipsizedButton : undefined, onClick: (e) => {
+                            onClick(id, e);
+                        }, ...restCrumbProps, children: [visual, " ", primary] }, id));
                 else
-                    Comp = (_jsxs(Text, { ...restCrumbProps, children: [visual, " ", primary] }, id));
+                    Comp = (_jsxs(Text, { as: primary.length > 60 ? StyledEllipsizedText : undefined, ...restCrumbProps, children: [visual, " ", primary] }, id));
                 if (index === path.slice(numMenuItems).length - 1)
                     return Comp;
-                return (_jsxs(Fragment, { children: [Comp, _jsx(Icon, { name: `caret-${end}` }, void 0)] }, id));
-            })] }, void 0));
+                return (_jsxs(Fragment, { children: [Comp, _jsx(StyledSeparator, { name: `caret-${end}` })] }, id));
+            })] }));
 });
 export default Breadcrumbs;
 //# sourceMappingURL=Breadcrumbs.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 1, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <Icon name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, ...restCrumbProps } = crumb;\n          let Comp;\n          if (crumb.href)\n            Comp = (\n              <Link key={id} href={crumb.href} {...restCrumbProps}>\n                {visual} {primary}\n              </Link>\n            );\n          else if (crumb.onClick)\n            Comp = (\n              <Button key={id} variant='link' {...restCrumbProps}>\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text key={id} {...restCrumbProps}>\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <Icon name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce, tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Flex from '../Flex';\nimport Link, { StyledLink } from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledSeparator: typeof Icon = styled(Icon)(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    color: ${color};\n  `;\n});\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ theme, oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${StyledLink},\n    ${StyledButton},\n    ${StyledText} {\n      max-width: ${theme.base['content-width'].md};\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst getEllipsisStyles = ({ theme }: { theme: DefaultTheme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n};\n\nconst StyledEllipsizedLink = styled(Link)(getEllipsisStyles);\n\nStyledEllipsizedLink.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedButton = styled(Button)(getEllipsisStyles);\n\nStyledEllipsizedButton.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled(Text)(getEllipsisStyles);\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 0.5, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <StyledSeparator name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;\n          let Comp;\n          if (href)\n            Comp = (\n              <Link\n                key={id}\n                href={href}\n                as={primary.length > 60 ? StyledEllipsizedLink : undefined}\n                onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n                  onClick?.(id, e);\n                }}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Link>\n            );\n          else if (onClick)\n            Comp = (\n              <Button\n                key={id}\n                variant='link'\n                as={primary.length > 60 ? StyledEllipsizedButton : undefined}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                  onClick(id, e);\n                }}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text\n                key={id}\n                as={primary.length > 60 ? StyledEllipsizedText : undefined}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <StyledSeparator name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}

package/lib/components/Button/BareButton.js

@@ -34,7 +34,7 @@ const BareButton = forwardRef(({ type = 'button', disabled = false, href, ...res
                 buttonRef.current?.focus();
             }
             return restProps.onMouseUp?.(e);
-        } }, void 0));
+        } }));
 });
 export default BareButton;
 //# sourceMappingURL=BareButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;2BAQlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;YACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;YAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;YAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,WACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      type = 'button',\n      disabled = false,\n      href,\n      ...restProps\n    }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const mouseDownEvent = useRef<MouseEvent>();\n    const buttonRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      return () => {\n        mouseDownEvent.current = undefined;\n      };\n    }, []);\n\n    return (\n      <StyledBareButton\n        ref={buttonRef}\n        as={href ? ('a' as any) : undefined}\n        type={href ? undefined : type}\n        disabled={disabled}\n        {...restProps}\n        href={href}\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    );\n  }\n);\n\nexport default BareButton;\n"]}
+{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;2BAQlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;YACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;YAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;YAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      type = 'button',\n      disabled = false,\n      href,\n      ...restProps\n    }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const mouseDownEvent = useRef<MouseEvent>();\n    const buttonRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      return () => {\n        mouseDownEvent.current = undefined;\n      };\n    }, []);\n\n    return (\n      <StyledBareButton\n        ref={buttonRef}\n        as={href ? ('a' as any) : undefined}\n        type={href ? undefined : type}\n        disabled={disabled}\n        {...restProps}\n        href={href}\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    );\n  }\n);\n\nexport default BareButton;\n"]}

package/lib/components/Button/BareRoleButton.js

@@ -14,7 +14,7 @@ const BareRoleButton = forwardRef(({ children, onClick, onKeyDown, ...restProps
                 e.target.closest("button, a, [role='button'], [role='link']") !== e.currentTarget)
                 return;
             return onClick?.(e);
-        }, ref: ref, children: children }, void 0));
+        }, ref: ref, children: children }));
 });
 export default BareRoleButton;
 //# sourceMappingURL=BareRoleButton.js.map

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

@@ -1 +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"]}
+{"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,GACY,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

@@ -215,7 +215,7 @@ const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled =
                         buttonRef.current?.focus();
                     }
                     return restProps.onMouseUp?.(e);
-                }, 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));
+                }, children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }), children] }), buttonEl && label && (_jsx(Tooltip, { target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: label }))] }));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

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

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

package/lib/components/Card/Card.js

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

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

package/lib/components/Card/CardFooter.js

@@ -18,7 +18,7 @@ const CardFooter = (props) => {
             wrap: 'wrap',
             alignItems: 'center',
             justify
-        }, ...restProps, children: children }, void 0));
+        }, ...restProps, children: children }));
 };
 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,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"]}
+{"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,GACJ,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"]}