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

package/lib/components/Link/Link.d.ts

@@ -8,7 +8,7 @@ export interface LinkProps extends BaseProps {
     href: string;
     /**
      * Controls the styling of the Link.
-     * @default "link"
+     * @default 'link'
      */
     variant?: ButtonProps['variant'];
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAQ7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAI3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAoKrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAU7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAM3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA2LrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Link/Link.js

@@ -7,15 +7,20 @@ import Popover from '../Popover';
 import BareButton from '../Button/BareButton';
 import { defaultThemeProp } from '../../theme';
 import { useBreakpoint, useConsolidatedRef, useI18n, useUID, useModalContext, useOS } from '../../hooks';
-import { tryCatch } from '../../utils';
+import { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';
 import { calculateFontSize } from '../../styles';
 import AppShellContext from '../AppShell/AppShellContext';
 import { Keyboard } from '../Badges';
 import Text, { StyledText } from '../Text';
 import { StyledKeyboard } from '../Badges/Keyboard';
 import Flex from '../Flex';
+import Icon, { registerIcon } from '../Icon';
+import * as openIcon from '../Icon/icons/open.icon';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 export const StyledLinkPopover = styled.div(({ theme, preview }) => css `
     background-color: ${theme.components.tooltip['background-color']};
+    z-index: ${theme.base['z-index'].tooltip};
+
     ${preview &&
     css `
       padding: ${theme.base.spacing};
@@ -23,7 +28,7 @@ export const StyledLinkPopover = styled.div(({ theme, preview }) => css `
   `);
 StyledLinkPopover.defaultProps = defaultThemeProp;
 export const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {
-    const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));
+    const contrastColor = tryCatch(() => readableColor(theme.components.tooltip['background-color']));
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
     position: relative;
@@ -99,7 +104,8 @@ export const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme
 StyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;
 export const StyledLink = styled(Button) ``;
 StyledLink.defaultProps = defaultThemeProp;
-const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...restProps }, ref) => {
+registerIcon(openIcon);
+const Link = forwardRef(({ href, variant = 'link', icon = false, previewable, onPreview, target: targetProp, children, ...restProps }, ref) => {
     const { initialized: inModal } = useModalContext();
     const { previewTriggerRef } = useContext(AppShellContext);
     const uid = useUID();
@@ -112,6 +118,11 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
     const t = useI18n();
     const { macintosh } = useOS();
     const contextMenuOpened = useRef(false);
+    const url = new URL(href, document.location.href);
+    const crossOrigin = documentIsAvailable
+        ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)
+        : false;
+    const target = crossOrigin ? '_blank' : targetProp;
     const showPopover = () => {
         if (isSmallOrAbove) {
             setPopover(true);
@@ -154,12 +165,12 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
             setPopoverHideDelay('short');
         }
     }, [popoverHideDelay, popover, previewPopover]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledLink, { href: href, variant: variant, ref: linkRef, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: hidePopover, onFocus: onFocusLink, onBlur: onBlurLink, onKeyUp: onKeyUp, onContextMenu: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledLink, { href: href, variant: variant, ref: linkRef, target: target, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: hidePopover, onFocus: onFocusLink, onBlur: onBlurLink, onKeyUp: onKeyUp, onContextMenu: () => {
                     contextMenuOpened.current = true;
                     setPopoverHideDelay('none');
                     setPreviewPopover(false);
                     setPopover(false);
-                }, "aria-describedby": previewable ? `${uid}-preview-instructions` : undefined }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
+                }, children: [children, target === '_blank' && (_jsx(VisuallyHiddenText, { children: t('opens_in_a_new_tab') })), !icon && target === '_blank' && _jsx(Icon, { name: 'open' })] }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, portal: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, portal: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
 });
 export default Link;
 //# sourceMappingURL=Link.js.map

package/lib/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  KeyboardEvent,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useBreakpoint,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useModalContext,\n  useOS\n} from '../../hooks';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\n\nexport interface LinkProps extends BaseProps {\n  /** Text or content for the Link. */\n  children: ReactNode;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /**\n   * Controls the styling of the Link.\n   * @default \"link\"\n   */\n  variant?: ButtonProps['variant'];\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: ButtonProps['icon'];\n  /** Determines if the Link should render a popover when focused or hovered over. */\n  previewable?: boolean;\n  /** Callback function that is run when the preview popover is interacted with. */\n  onPreview?: (e: { href: string }) => void;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n  ({ theme, preview }) => css`\n    background-color: ${theme.components.tooltip['background-color']};\n    ${preview &&\n    css`\n      padding: ${theme.base.spacing};\n    `}\n  `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n  const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    z-index: 1;\n    padding: 0 ${theme.base.spacing};\n    min-height: 1.5rem;\n    line-height: 1;\n    color: ${contrastColor};\n    font-size: ${fontSize.xs};\n    text-decoration: none;\n\n    /* FIXME: Button selector specificity... */\n    & + & {\n      margin: 0;\n    }\n\n    & + &::before {\n      content: '';\n      position: absolute;\n      inset-inline-start: 0;\n      inset-block: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:hover,\n    &:active {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n        0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n  return css`\n    width: 100%;\n    padding: unset;\n\n    &:hover,\n    &:active {\n      text-decoration: none;\n      ${StyledText} span {\n        text-decoration: underline;\n      }\n    }\n\n    ${StyledText} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n\n    ${StyledKeyboard} {\n      color: ${theme.base.palette.light};\n      background-color: ${theme.base.colors.gray.dark};\n      border-color: ${theme.base.colors.gray.medium};\n      inset-block-start: unset;\n\n      &:first-of-type {\n        margin-inline: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n  (\n    { href, variant = 'link', previewable, onPreview, ...restProps }: PropsWithoutRef<LinkProps>,\n    ref: LinkProps['ref']\n  ) => {\n    const { initialized: inModal } = useModalContext();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const uid = useUID();\n    const linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n    const [previewPopover, setPreviewPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n    const { macintosh } = useOS();\n    const contextMenuOpened = useRef(false);\n\n    const showPopover = () => {\n      if (isSmallOrAbove) {\n        setPopover(true);\n        setPreviewPopover(false);\n      }\n    };\n\n    const showPreviewPopover = () => {\n      if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n    };\n\n    const hidePopover = () => {\n      setPopover(false);\n    };\n\n    const hidePreviewPopover = () => {\n      setPreviewPopover(false);\n    };\n\n    const onEnterLink = () => {\n      if (previewable) showPopover();\n    };\n\n    const onFocusLink = () => {\n      if (previewable) showPreviewPopover();\n    };\n\n    const onBlurLink = () => {\n      contextMenuOpened.current = false;\n      hidePreviewPopover();\n    };\n\n    const onPreviewClick = () => {\n      previewTriggerRef.current = linkRef.current;\n      onPreview?.({ href });\n    };\n\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.getModifierState('Alt') && e.code === 'KeyP') {\n        onPreviewClick();\n      }\n    };\n\n    useEffect(() => {\n      if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n        setPopoverHideDelay('short');\n      }\n    }, [popoverHideDelay, popover, previewPopover]);\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={hidePopover}\n          onFocus={onFocusLink}\n          onBlur={onBlurLink}\n          onKeyUp={onKeyUp}\n          onContextMenu={() => {\n            contextMenuOpened.current = true;\n\n            setPopoverHideDelay('none');\n            setPreviewPopover(false);\n            setPopover(false);\n          }}\n          aria-describedby={previewable ? `${uid}-preview-instructions` : undefined}\n        />\n\n        {!inModal && (\n          <Popover\n            show={previewPopover}\n            groupId='link_preview'\n            showDelay='short'\n            hideDelay={popoverHideDelay}\n            placement='bottom'\n            target={linkRef.current}\n            onMouseEnter={showPreviewPopover}\n            onMouseLeave={hidePreviewPopover}\n            as={StyledLinkPopover}\n            arrow\n            preview\n            onHide={hidePreviewPopover}\n          >\n            <StyledLinkPreviewPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              <Text>\n                <span>{t('preview')}</span>\n                <Flex container={{ inline: true, justify: 'end' }}>\n                  <Keyboard keyName='Alt' />\n                  <Keyboard keyName='P' />\n                </Flex>\n              </Text>\n            </StyledLinkPreviewPopoverBtn>\n          </Popover>\n        )}\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay={popoverHideDelay}\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={showPopover}\n          onMouseLeave={hidePopover}\n          as={StyledLinkPopover}\n          arrow\n        >\n          {!inModal && (\n            <StyledLinkPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              {t('preview')}\n            </StyledLinkPopoverBtn>\n          )}\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            target='_blank'\n            rel='noreferrer'\n            tabIndex='-1'\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n\n        {previewable && (\n          <span id={`${uid}-preview-instructions`} hidden>\n            {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n          </span>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  KeyboardEvent,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useBreakpoint,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useModalContext,\n  useOS\n} from '../../hooks';\nimport { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface LinkProps extends BaseProps {\n  /** Text or content for the Link. */\n  children: ReactNode;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /**\n   * Controls the styling of the Link.\n   * @default 'link'\n   */\n  variant?: ButtonProps['variant'];\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: ButtonProps['icon'];\n  /** Determines if the Link should render a popover when focused or hovered over. */\n  previewable?: boolean;\n  /** Callback function that is run when the preview popover is interacted with. */\n  onPreview?: (e: { href: string }) => void;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n  ({ theme, preview }) => css`\n    background-color: ${theme.components.tooltip['background-color']};\n    z-index: ${theme.base['z-index'].tooltip};\n\n    ${preview &&\n    css`\n      padding: ${theme.base.spacing};\n    `}\n  `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n  const contrastColor = tryCatch(() => readableColor(theme.components.tooltip['background-color']));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    z-index: 1;\n    padding: 0 ${theme.base.spacing};\n    min-height: 1.5rem;\n    line-height: 1;\n    color: ${contrastColor};\n    font-size: ${fontSize.xs};\n    text-decoration: none;\n\n    /* FIXME: Button selector specificity... */\n    & + & {\n      margin: 0;\n    }\n\n    & + &::before {\n      content: '';\n      position: absolute;\n      inset-inline-start: 0;\n      inset-block: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:hover,\n    &:active {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n        0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n  return css`\n    width: 100%;\n    padding: unset;\n\n    &:hover,\n    &:active {\n      text-decoration: none;\n      ${StyledText} span {\n        text-decoration: underline;\n      }\n    }\n\n    ${StyledText} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n\n    ${StyledKeyboard} {\n      color: ${theme.base.palette.light};\n      background-color: ${theme.base.colors.gray.dark};\n      border-color: ${theme.base.colors.gray.medium};\n      inset-block-start: unset;\n\n      &:first-of-type {\n        margin-inline: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nregisterIcon(openIcon);\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n  (\n    {\n      href,\n      variant = 'link',\n      icon = false,\n      previewable,\n      onPreview,\n      target: targetProp,\n      children,\n      ...restProps\n    }: PropsWithoutRef<LinkProps>,\n    ref: LinkProps['ref']\n  ) => {\n    const { initialized: inModal } = useModalContext();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const uid = useUID();\n    const linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n    const [previewPopover, setPreviewPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n    const { macintosh } = useOS();\n    const contextMenuOpened = useRef(false);\n\n    const url = new URL(href, document.location.href);\n    const crossOrigin = documentIsAvailable\n      ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)\n      : false;\n    const target = crossOrigin ? '_blank' : targetProp;\n\n    const showPopover = () => {\n      if (isSmallOrAbove) {\n        setPopover(true);\n        setPreviewPopover(false);\n      }\n    };\n\n    const showPreviewPopover = () => {\n      if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n    };\n\n    const hidePopover = () => {\n      setPopover(false);\n    };\n\n    const hidePreviewPopover = () => {\n      setPreviewPopover(false);\n    };\n\n    const onEnterLink = () => {\n      if (previewable) showPopover();\n    };\n\n    const onFocusLink = () => {\n      if (previewable) showPreviewPopover();\n    };\n\n    const onBlurLink = () => {\n      contextMenuOpened.current = false;\n      hidePreviewPopover();\n    };\n\n    const onPreviewClick = () => {\n      previewTriggerRef.current = linkRef.current;\n      onPreview?.({ href });\n    };\n\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.getModifierState('Alt') && e.code === 'KeyP') {\n        onPreviewClick();\n      }\n    };\n\n    useEffect(() => {\n      if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n        setPopoverHideDelay('short');\n      }\n    }, [popoverHideDelay, popover, previewPopover]);\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          target={target}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={hidePopover}\n          onFocus={onFocusLink}\n          onBlur={onBlurLink}\n          onKeyUp={onKeyUp}\n          onContextMenu={() => {\n            contextMenuOpened.current = true;\n\n            setPopoverHideDelay('none');\n            setPreviewPopover(false);\n            setPopover(false);\n          }}\n        >\n          {children}\n          {target === '_blank' && (\n            <VisuallyHiddenText>{t('opens_in_a_new_tab')}</VisuallyHiddenText>\n          )}\n          {!icon && target === '_blank' && <Icon name='open' />}\n        </StyledLink>\n\n        {!inModal && (\n          <Popover\n            show={previewPopover}\n            groupId='link_preview'\n            showDelay='short'\n            hideDelay={popoverHideDelay}\n            placement='bottom'\n            target={linkRef.current}\n            onMouseEnter={showPreviewPopover}\n            onMouseLeave={hidePreviewPopover}\n            as={StyledLinkPopover}\n            arrow\n            preview\n            portal\n            onHide={hidePreviewPopover}\n          >\n            <StyledLinkPreviewPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              <Text>\n                <span>{t('preview')}</span>\n                <Flex container={{ inline: true, justify: 'end' }}>\n                  <Keyboard keyName='Alt' />\n                  <Keyboard keyName='P' />\n                </Flex>\n              </Text>\n            </StyledLinkPreviewPopoverBtn>\n          </Popover>\n        )}\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay={popoverHideDelay}\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={showPopover}\n          onMouseLeave={hidePopover}\n          as={StyledLinkPopover}\n          arrow\n          portal\n        >\n          {!inModal && (\n            <StyledLinkPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              {t('preview')}\n            </StyledLinkPopoverBtn>\n          )}\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            target='_blank'\n            rel='noreferrer'\n            tabIndex='-1'\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n\n        {previewable && (\n          <span id={`${uid}-preview-instructions`} hidden>\n            {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n          </span>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}

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

@@ -1,3 +1,4 @@
 export { default } from './Link';
-export { StyledLink, StyledLinkPopover, LinkProps } from './Link';
+export { StyledLink, StyledLinkPopover } from './Link';
+export type { LinkProps } from './Link';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAa,MAAM,QAAQ,CAAC","sourcesContent":["export { default } from './Link';\nexport { StyledLink, StyledLinkPopover, LinkProps } from './Link';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default } from './Link';\nexport { StyledLink, StyledLinkPopover } from './Link';\nexport type { LinkProps } from './Link';\n"]}

package/lib/components/List/CommaSeparatedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.d.ts","sourceRoot":"","sources":["../../../src/components/List/CommaSeparatedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAIT,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQtD,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,oBAAoB;IACpB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAErD,eAAO,MAAM,4BAA4B,wGAMxC,CAAC;AAyDF,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAuBjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"CommaSeparatedList.d.ts","sourceRoot":"","sources":["../../../src/components/List/CommaSeparatedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,oBAAoB;IACpB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAErD,eAAO,MAAM,4BAA4B,wGAMxC,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAyBjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/List/CommaSeparatedList.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useLayoutEffect, useMemo, useRef } from 'react';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { useI18n } from '../../hooks';
-import Button from '../Button';
 import Text from '../Text';
-import ExpandCollapse from '../ExpandCollapse';
-import { windowIsAvailable } from '../../utils';
 import Flex from '../Flex';
+import ShowMoreLess from '../ShowMoreLess';
 export const StyledCommaSeparatedList = styled.div ``;
 export const StyledCommaSeparatedListItem = styled.li `
   display: inline;
@@ -15,39 +12,10 @@ export const StyledCommaSeparatedListItem = styled.li `
     content: ', ';
   }
 `;
-const DynamicHeightValue = ({ children }) => {
-    const [collapsed, setCollapsed] = useState(true);
-    const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
-    const textRef = useRef(null);
-    const t = useI18n();
-    const maxTextHeight = useMemo(() => {
-        if (!windowIsAvailable)
-            return Infinity;
-        const computedLineHeight = Number.parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10) * 1.25;
-        return 3 * computedLineHeight;
-    }, []);
-    useLayoutEffect(() => {
-        if (!textRef.current)
-            return;
-        const observer = new ResizeObserver(entries => {
-            const exceedsHeight = entries.some(({ target, contentRect }) => {
-                if (target !== textRef.current)
-                    return;
-                return contentRect.height > maxTextHeight;
-            });
-            setExceedsMaxHeight(exceedsHeight);
-        });
-        observer.observe(textRef.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, [textRef.current, maxTextHeight]);
-    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 0.25 }, children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx("div", { ref: textRef, children: children }) }), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }))] }));
-};
 const CommaSeparatedList = forwardRef(({ items, heading }, ref) => {
-    return (_jsxs(Flex, { container: { direction: 'column', wrap: 'wrap', gap: 2 }, as: StyledCommaSeparatedList, ref: ref, children: [heading && _jsx(Text, { variant: 'h3', children: heading }), _jsx(DynamicHeightValue, { children: _jsx("ul", { children: items.map((value, i) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    _jsx(StyledCommaSeparatedListItem, { children: value }, i))) }) })] }));
+    return (_jsxs(Flex, { container: { direction: 'column', wrap: 'wrap', gap: 2 }, as: StyledCommaSeparatedList, ref: ref, children: [heading && _jsx(Text, { variant: 'h3', children: heading }), _jsx(Flex, { container: { direction: 'column', alignItems: 'start', gap: 0.25 }, children: _jsx(ShowMoreLess, { lines: 3, children: _jsx("ul", { children: items.map((value, i) => (
+                        // eslint-disable-next-line react/no-array-index-key
+                        _jsx(StyledCommaSeparatedListItem, { children: value }, i))) }) }) })] }));
 });
 export default CommaSeparatedList;
 //# sourceMappingURL=CommaSeparatedList.js.map

package/lib/components/List/CommaSeparatedList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.js","sourceRoot":"","sources":["../../../src/components/List/CommaSeparatedList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  forwardRef,\n  useState,\n  PropsWithoutRef,\n  Ref,\n  useLayoutEffect,\n  useMemo,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Text from '../Text';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { windowIsAvailable } from '../../utils';\nimport Flex from '../Flex';\n\nexport interface CommaSeparatedListProps extends BaseProps {\n  /** List content. */\n  items: ReactNode[];\n  /** List Heading. */\n  heading?: string;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCommaSeparatedList = styled.div``;\n\nexport const StyledCommaSeparatedListItem = styled.li`\n  display: inline;\n\n  &:not(:last-child)::after {\n    content: ', ';\n  }\n`;\n\nconst DynamicHeightValue = ({ children }: { children: ReactNode }): JSX.Element => {\n  const [collapsed, setCollapsed] = useState(true);\n  const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);\n  const textRef = useRef<HTMLDivElement>(null);\n  const t = useI18n();\n\n  const maxTextHeight = useMemo(() => {\n    if (!windowIsAvailable) return Infinity;\n\n    const computedLineHeight =\n      Number.parseInt(\n        window.getComputedStyle(document.documentElement).getPropertyValue('font-size'),\n        10\n      ) * 1.25;\n\n    return 3 * computedLineHeight;\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!textRef.current) return;\n\n    const observer = new ResizeObserver(entries => {\n      const exceedsHeight = entries.some(({ target, contentRect }) => {\n        if (target !== textRef.current) return;\n\n        return contentRect.height > maxTextHeight;\n      });\n\n      setExceedsMaxHeight(exceedsHeight);\n    });\n\n    observer.observe(textRef.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [textRef.current, maxTextHeight]);\n\n  return (\n    <Flex container={{ direction: 'column', alignItems: 'start', gap: 0.25 }}>\n      <ExpandCollapse\n        collapsed={collapsed}\n        min={exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content'}\n      >\n        <div ref={textRef}>{children}</div>\n      </ExpandCollapse>\n      {exceedsMaxHeight && (\n        <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n          {collapsed ? t('show_more') : t('show_less')}\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nconst CommaSeparatedList: FunctionComponent<CommaSeparatedListProps & ForwardProps> = forwardRef(\n  (\n    { items, heading }: PropsWithoutRef<CommaSeparatedListProps>,\n    ref: CommaSeparatedListProps['ref']\n  ) => {\n    return (\n      <Flex\n        container={{ direction: 'column', wrap: 'wrap', gap: 2 }}\n        as={StyledCommaSeparatedList}\n        ref={ref}\n      >\n        {heading && <Text variant='h3'>{heading}</Text>}\n        <DynamicHeightValue>\n          <ul>\n            {items.map((value, i) => (\n              // eslint-disable-next-line react/no-array-index-key\n              <StyledCommaSeparatedListItem key={i}>{value}</StyledCommaSeparatedListItem>\n            ))}\n          </ul>\n        </DynamicHeightValue>\n      </Flex>\n    );\n  }\n);\n\nexport default CommaSeparatedList;\n"]}
+{"version":3,"file":"CommaSeparatedList.js","sourceRoot":"","sources":["../../../src/components/List/CommaSeparatedList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,UAAU,EAAwB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAW3C,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;CAMpD,CAAC;AAEF,MAAM,kBAAkB,GAA8D,UAAU,CAC9F,CACE,EAAE,KAAK,EAAE,OAAO,EAA4C,EAC5D,GAAmC,EACnC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,EACxD,EAAE,EAAE,wBAAwB,EAC5B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,EAC/C,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,YACtE,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YACpB,uBACG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;wBACvB,oDAAoD;wBACpD,KAAC,4BAA4B,cAAU,KAAK,IAAT,CAAC,CAAwC,CAC7E,CAAC,GACC,GACQ,GACV,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport ShowMoreLess from '../ShowMoreLess';\n\nexport interface CommaSeparatedListProps extends BaseProps {\n  /** List content. */\n  items: ReactNode[];\n  /** List Heading. */\n  heading?: string;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCommaSeparatedList = styled.div``;\n\nexport const StyledCommaSeparatedListItem = styled.li`\n  display: inline;\n\n  &:not(:last-child)::after {\n    content: ', ';\n  }\n`;\n\nconst CommaSeparatedList: FunctionComponent<CommaSeparatedListProps & ForwardProps> = forwardRef(\n  (\n    { items, heading }: PropsWithoutRef<CommaSeparatedListProps>,\n    ref: CommaSeparatedListProps['ref']\n  ) => {\n    return (\n      <Flex\n        container={{ direction: 'column', wrap: 'wrap', gap: 2 }}\n        as={StyledCommaSeparatedList}\n        ref={ref}\n      >\n        {heading && <Text variant='h3'>{heading}</Text>}\n        <Flex container={{ direction: 'column', alignItems: 'start', gap: 0.25 }}>\n          <ShowMoreLess lines={3}>\n            <ul>\n              {items.map((value, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <StyledCommaSeparatedListItem key={i}>{value}</StyledCommaSeparatedListItem>\n              ))}\n            </ul>\n          </ShowMoreLess>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default CommaSeparatedList;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAOtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,oBAAoB;IACpB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oBAAoB;IACpB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,oDAAqD,CAAC;AACnE,QAAA,MAAM,OAAO,uCAAwC,CAAC;AAEtD,eAAO,MAAM,UAAU;WACd,MAAM;cACH,CAAA,cAAc,EAAC,MAAM,CAAC,GAAG,CAAA,cAAc,EAAC,MAAM,CAAC;SAgCzD,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAE7B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA2C3D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAOtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,oBAAoB;IACpB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oBAAoB;IACpB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,oDAAqD,CAAC;AACnE,QAAA,MAAM,OAAO,uCAAwC,CAAC;AAEtD,eAAO,MAAM,UAAU;WACd,MAAM;cACH,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC;SA0C7D,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAE7B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA2C3D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/List/List.js

@@ -12,7 +12,7 @@ export const StyledList = styled.div(({ theme, depth, listType }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
     padding-inline-start: calc(2 * ${theme.base.spacing});
-    list-style-position: inside;
+
     h3 {
       margin-block-end: calc(2 * ${theme.base.spacing});
     }
@@ -36,6 +36,16 @@ export const StyledList = styled.div(({ theme, depth, listType }) => {
               }
             `}
       }
+
+      ${depth === 0 &&
+        css `
+        padding-inline-start: calc(2 * ${theme.base.spacing});
+      `}
+    }
+
+    & & > ol,
+    & & > ul {
+      padding-inline-start: 0;
     }
   `;
 });

package/lib/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nexport interface ListProps extends BaseProps, NoChildrenProp {\n  /** List content. */\n  items: ReactNode[];\n  /** List Heading. */\n  heading?: string;\n  /** Number of list items that need to be shown. */\n  count?: number;\n  /** Callback to display more/less items. */\n  onToggleShow?: () => void;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface VisualListProps extends ListProps {\n  /** Type of list. */\n  variant: 'ordered' | 'unordered';\n  /** Depth of list (used for recursion). */\n  depth?: number;\n}\n\nconst olTypes = ['decimal', 'lower-alpha', 'lower-roman'] as const;\nconst ulTypes = ['disc', 'circle', 'square'] as const;\n\nexport const StyledList = styled.div<{\n  depth: number;\n  listType: typeof olTypes[number] | typeof ulTypes[number];\n}>(({ theme, depth, listType }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    list-style-position: inside;\n    h3 {\n      margin-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    & > ol,\n    & > ul {\n      list-style-type: ${listType};\n\n      & > li {\n        &:not(:last-child) {\n          margin-block-end: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${depth > 0\n          ? css`\n              font-size: ${fontSize.xs};\n            `\n          : css`\n              &::marker {\n                font-weight: ${theme.base['font-weight'].bold};\n              }\n            `}\n      }\n    }\n  `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledSublistItem = styled.li`\n  list-style: none;\n`;\n\nconst List: FunctionComponent<VisualListProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      variant,\n      count,\n      onToggleShow,\n      depth = 0,\n      heading,\n      ...restProps\n    }: PropsWithoutRef<VisualListProps>,\n    ref: VisualListProps['ref']\n  ) => {\n    const t = useI18n();\n    const listContent = items.map((value, idx) =>\n      Array.isArray(value) ? (\n        // eslint-disable-next-line react/no-array-index-key\n        <StyledSublistItem key={idx}>\n          <List depth={depth + 1} variant={variant} items={value} />\n        </StyledSublistItem>\n      ) : (\n        // eslint-disable-next-line react/no-array-index-key\n        <li key={idx}>{value}</li>\n      )\n    );\n\n    return (\n      <StyledList\n        {...restProps}\n        ref={ref}\n        depth={depth}\n        listType={(variant === 'ordered' ? olTypes : ulTypes)[depth % 3]}\n      >\n        {heading && <Text variant='h3'>{heading}</Text>}\n        {variant === 'ordered' ? <ol>{listContent}</ol> : <ul>{listContent}</ul>}\n        {count && onToggleShow && (\n          <Button variant='link' onClick={onToggleShow}>\n            {count > items.flat().length ? t('show_more') : t('show_less')}\n          </Button>\n        )}\n      </StyledList>\n    );\n  }\n);\n\nexport default List;\n"]}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nexport interface ListProps extends BaseProps, NoChildrenProp {\n  /** List content. */\n  items: ReactNode[];\n  /** List Heading. */\n  heading?: string;\n  /** Number of list items that need to be shown. */\n  count?: number;\n  /** Callback to display more/less items. */\n  onToggleShow?: () => void;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface VisualListProps extends ListProps {\n  /** Type of list. */\n  variant: 'ordered' | 'unordered';\n  /** Depth of list (used for recursion). */\n  depth?: number;\n}\n\nconst olTypes = ['decimal', 'lower-alpha', 'lower-roman'] as const;\nconst ulTypes = ['disc', 'circle', 'square'] as const;\n\nexport const StyledList = styled.div<{\n  depth: number;\n  listType: (typeof olTypes)[number] | (typeof ulTypes)[number];\n}>(({ theme, depth, listType }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n\n    h3 {\n      margin-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    & > ol,\n    & > ul {\n      list-style-type: ${listType};\n\n      & > li {\n        &:not(:last-child) {\n          margin-block-end: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${depth > 0\n          ? css`\n              font-size: ${fontSize.xs};\n            `\n          : css`\n              &::marker {\n                font-weight: ${theme.base['font-weight'].bold};\n              }\n            `}\n      }\n\n      ${depth === 0 &&\n      css`\n        padding-inline-start: calc(2 * ${theme.base.spacing});\n      `}\n    }\n\n    & & > ol,\n    & & > ul {\n      padding-inline-start: 0;\n    }\n  `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledSublistItem = styled.li`\n  list-style: none;\n`;\n\nconst List: FunctionComponent<VisualListProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      variant,\n      count,\n      onToggleShow,\n      depth = 0,\n      heading,\n      ...restProps\n    }: PropsWithoutRef<VisualListProps>,\n    ref: VisualListProps['ref']\n  ) => {\n    const t = useI18n();\n    const listContent = items.map((value, idx) =>\n      Array.isArray(value) ? (\n        // eslint-disable-next-line react/no-array-index-key\n        <StyledSublistItem key={idx}>\n          <List depth={depth + 1} variant={variant} items={value} />\n        </StyledSublistItem>\n      ) : (\n        // eslint-disable-next-line react/no-array-index-key\n        <li key={idx}>{value}</li>\n      )\n    );\n\n    return (\n      <StyledList\n        {...restProps}\n        ref={ref}\n        depth={depth}\n        listType={(variant === 'ordered' ? olTypes : ulTypes)[depth % 3]}\n      >\n        {heading && <Text variant='h3'>{heading}</Text>}\n        {variant === 'ordered' ? <ol>{listContent}</ol> : <ul>{listContent}</ul>}\n        {count && onToggleShow && (\n          <Button variant='link' onClick={onToggleShow}>\n            {count > items.flat().length ? t('show_more') : t('show_less')}\n          </Button>\n        )}\n      </StyledList>\n    );\n  }\n);\n\nexport default List;\n"]}

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

@@ -1,5 +1,6 @@
 export { default as UnorderedList } from './UnorderedList';
 export { default as OrderedList } from './OrderedList';
-export { ListProps as UnorderedListProps, ListProps as OrderedListProps } from './List';
-export { default as CommaSeparatedList, CommaSeparatedListProps } from './CommaSeparatedList';
+export type { ListProps as UnorderedListProps, ListProps as OrderedListProps } from './List';
+export { default as CommaSeparatedList } from './CommaSeparatedList';
+export type { CommaSeparatedListProps } from './CommaSeparatedList';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,SAAS,IAAI,kBAAkB,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAA2B,MAAM,sBAAsB,CAAC","sourcesContent":["export { default as UnorderedList } from './UnorderedList';\nexport { default as OrderedList } from './OrderedList';\nexport { ListProps as UnorderedListProps, ListProps as OrderedListProps } from './List';\nexport { default as CommaSeparatedList, CommaSeparatedListProps } from './CommaSeparatedList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { default as UnorderedList } from './UnorderedList';\nexport { default as OrderedList } from './OrderedList';\nexport type { ListProps as UnorderedListProps, ListProps as OrderedListProps } from './List';\nexport { default as CommaSeparatedList } from './CommaSeparatedList';\nexport type { CommaSeparatedListProps } from './CommaSeparatedList';\n"]}

package/lib/components/ListToolbar/ListToolbar.d.ts

@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
-import { ListToolbarProps } from './ListToolbar.types';
-declare const ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps>;
-export default ListToolbar;
+import type { ListToolbarProps } from './ListToolbar.types';
+declare const _default: FunctionComponent<ListToolbarProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["view-selector", "count", "heading"]>;
+};
+export default _default;
 //# sourceMappingURL=ListToolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBnD,OAAO,EACL,gBAAgB,EAIjB,MAAM,qBAAqB,CAAC;AA2F7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqRnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAiCnD,OAAO,KAAK,EACV,gBAAgB,EAMjB,MAAM,qBAAqB,CAAC;;;;AAsY7B,wBAA+D"}