@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqB3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyP7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Lightbox/Lightbox.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, forwardRef } from 'react';
+import { cap, getFocusables } from '../../utils';
+import Flex from '../Flex';
+import MetaList from '../MetaList';
+import Icon from '../Icon';
+import Text from '../Text';
+import { useConsolidatedRef, useDirection, useI18n, useScrollToggle } from '../../hooks';
+import ErrorState from '../ErrorState';
+import { StyledHeader, StyledCountTracker, StyledInfo, StyledActionButton, StyledPreviewRegion, StyledNavButton, StyledImageContainer, StyledImage, StyledLiveRegion, StyledLightbox } from './Lightbox.styles';
+const Lightbox = forwardRef(({ items, defaultIndex = 0, cycle, onItemLoad, onItemError, onNavigate, onItemDownload, onAfterClose, ...restProps }, refArg) => {
+    const t = useI18n();
+    const { start, end } = useDirection();
+    const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+    const currentItem = items[currentIndex];
+    const { disableScroll, enableScroll } = useScrollToggle();
+    const lightboxRef = useConsolidatedRef(refArg);
+    const headerRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const prevButtonRef = useRef(null);
+    const nextButtonRef = useRef(null);
+    const [open, setOpen] = useState(true);
+    const imageRef = useConsolidatedRef(currentItem.ref);
+    const [error, setError] = useState(false);
+    const [liveText, setLiveText] = useState('');
+    const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';
+    const close = () => {
+        setOpen(false);
+    };
+    const navigate = (direction) => {
+        if (direction === 1) {
+            if (currentIndex < items.length - 1) {
+                setCurrentIndex(cur => cur + 1);
+                setError(false);
+            }
+            else if (cycle) {
+                setCurrentIndex(0);
+                setError(false);
+            }
+        }
+        else if (currentIndex > 0) {
+            setCurrentIndex(cur => cur - 1);
+            setError(false);
+        }
+        else if (cycle) {
+            setCurrentIndex(items.length - 1);
+            setError(false);
+        }
+    };
+    const onKeydown = (e) => {
+        if (e.repeat)
+            return;
+        if (e.key === 'Escape') {
+            close();
+        }
+        else if (e.key === `Arrow${cap(end)}`) {
+            navigate(1);
+        }
+        else if (e.key === `Arrow${cap(start)}`) {
+            navigate(-1);
+        }
+        if (e.key === 'Tab') {
+            const focusables = getFocusables(lightboxRef);
+            if (!focusables || focusables.length < 2)
+                return;
+            const firstFocusable = focusables[0];
+            const lastFocusable = focusables[focusables.length - 1];
+            if (!e.shiftKey &&
+                (document.activeElement === lightboxRef.current ||
+                    document.activeElement === lastFocusable)) {
+                firstFocusable?.focus();
+                e.preventDefault();
+            }
+            else if (e.shiftKey &&
+                (document.activeElement === lightboxRef.current ||
+                    document.activeElement === firstFocusable)) {
+                lastFocusable?.focus();
+                e.preventDefault();
+            }
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', onKeydown);
+        return () => {
+            document.removeEventListener('keydown', onKeydown);
+        };
+    }, [onKeydown]);
+    useEffect(() => {
+        setLiveText(`${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''} ${currentItem.description}.`);
+    }, [currentItem.name, countTrackerText, currentItem.description]);
+    useEffect(() => {
+        lightboxRef.current?.focus();
+    }, []);
+    return (_jsxs(StyledLightbox, { ...restProps, tabIndex: -1, ref: lightboxRef, open: open, role: 'dialog', "aria-modal": 'true', container: { alignItems: 'start', justify: 'start', direction: 'column' }, alpha: 0.9, variant: 'dark', transitionSpeed: 'slow', onBeforeTransitionIn: disableScroll, onAfterTransitionOut: () => {
+            enableScroll();
+            onAfterClose?.();
+        }, children: [_jsxs(Flex, { as: StyledHeader, ref: headerRef, container: {
+                    justify: 'between',
+                    alignItems: 'center',
+                    gap: 2
+                }, onMouseDown: (e) => {
+                    if (e.button !== 0)
+                        return;
+                    if (e.target === e.currentTarget)
+                        close();
+                }, children: [_jsx(StyledCountTracker, { "aria-hidden": 'true', children: countTrackerText }, void 0), _jsxs(Flex, { as: StyledInfo, container: {
+                            wrap: 'wrap',
+                            alignItems: 'center',
+                            justify: 'center',
+                            colGap: 2,
+                            rowGap: 0.5
+                        }, children: [_jsx(Text, { variant: 'primary', as: 'h2', children: currentItem.name }, void 0), currentItem.metadata && _jsx(MetaList, { items: currentItem.metadata }, void 0)] }, void 0), _jsxs(Flex, { container: true, children: [onItemDownload && (_jsx(StyledActionButton, { variant: 'simple', "aria-label": t('download'), icon: true, onClick: () => onItemDownload(currentItem.id), children: _jsx(Icon, { name: 'download' }, void 0) }, void 0)), _jsx(StyledActionButton, { variant: 'simple', ref: closeButtonRef, "aria-label": t('close'), icon: true, onClick: close, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0)] }, void 0), _jsxs(Flex, { container: { justify: 'between' }, as: StyledPreviewRegion, item: { grow: 1, shrink: 0 }, children: [items.length > 1 && (_jsx(StyledNavButton, { ref: prevButtonRef, variant: 'simple', "aria-label": t('pagination_prev'), hidden: !cycle && currentIndex === 0, icon: true, onClick: () => {
+                            navigate(-1);
+                        }, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-left' }, void 0) }, void 0) }, void 0)), _jsx(Flex, { item: { grow: 1 }, as: StyledImageContainer, children: _jsx(Flex, { container: { alignItems: 'center' }, onMouseDown: (e) => {
+                                if (e.button !== 0)
+                                    return;
+                                if (e.target === e.currentTarget)
+                                    close();
+                            }, children: error ? (_jsx(ErrorState, { message: t('image_load_error') }, void 0)) : (_jsx(StyledImage, { ref: imageRef, src: currentItem.src, alt: currentItem.description, onLoad: (e) => {
+                                    onItemLoad?.(currentItem.id, e);
+                                }, onError: (e) => {
+                                    onItemError?.(currentItem.id, e);
+                                    setError(true);
+                                } }, void 0)) }, void 0) }, void 0), items.length > 1 && (_jsx(StyledNavButton, { ref: nextButtonRef, variant: 'simple', "aria-label": t('pagination_next'), hidden: !cycle && currentIndex === items.length - 1, icon: true, onClick: () => {
+                            navigate(1);
+                        }, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-right' }, void 0) }, void 0) }, void 0))] }, void 0), _jsx(StyledLiveRegion, { "aria-live": 'polite', "aria-label": liveText }, void 0)] }, void 0));
+});
+export default Lightbox;
+//# sourceMappingURL=Lightbox.js.map

package/lib/components/Lightbox/Lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  useEffect,\n  useRef,\n  Ref,\n  useState,\n  forwardRef,\n  MouseEvent,\n  SyntheticEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport { cap, getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { useConsolidatedRef, useDirection, useI18n, useScrollToggle } from '../../hooks';\nimport ErrorState from '../ErrorState';\n\nimport {\n  StyledHeader,\n  StyledCountTracker,\n  StyledInfo,\n  StyledActionButton,\n  StyledPreviewRegion,\n  StyledNavButton,\n  StyledImageContainer,\n  StyledImage,\n  StyledLiveRegion,\n  StyledLightbox\n} from './Lightbox.styles';\nimport { LightboxProps } from './Lightbox.types';\n\nconst Lightbox: FunctionComponent<LightboxProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      defaultIndex = 0,\n      cycle,\n      onItemLoad,\n      onItemError,\n      onNavigate,\n      onItemDownload,\n      onAfterClose,\n      ...restProps\n    }: PropsWithoutRef<LightboxProps>,\n    refArg: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const { start, end } = useDirection();\n    const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n    const currentItem = items[currentIndex];\n    const { disableScroll, enableScroll } = useScrollToggle();\n    const lightboxRef = useConsolidatedRef(refArg);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const prevButtonRef = useRef<HTMLButtonElement>(null);\n    const nextButtonRef = useRef<HTMLButtonElement>(null);\n    const [open, setOpen] = useState(true);\n    const imageRef = useConsolidatedRef(currentItem.ref);\n    const [error, setError] = useState(false);\n    const [liveText, setLiveText] = useState('');\n    const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n\n    const close = () => {\n      setOpen(false);\n    };\n\n    const navigate = (direction: 1 | -1) => {\n      if (direction === 1) {\n        if (currentIndex < items.length - 1) {\n          setCurrentIndex(cur => cur + 1);\n          setError(false);\n        } else if (cycle) {\n          setCurrentIndex(0);\n          setError(false);\n        }\n      } else if (currentIndex > 0) {\n        setCurrentIndex(cur => cur - 1);\n        setError(false);\n      } else if (cycle) {\n        setCurrentIndex(items.length - 1);\n        setError(false);\n      }\n    };\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.repeat) return;\n\n      if (e.key === 'Escape') {\n        close();\n      } else if (e.key === `Arrow${cap(end)}`) {\n        navigate(1);\n      } else if (e.key === `Arrow${cap(start)}`) {\n        navigate(-1);\n      }\n\n      if (e.key === 'Tab') {\n        const focusables = getFocusables(lightboxRef);\n        if (!focusables || focusables.length < 2) return;\n        const firstFocusable = focusables[0];\n        const lastFocusable = focusables[focusables.length - 1];\n\n        if (\n          !e.shiftKey &&\n          (document.activeElement === lightboxRef.current ||\n            document.activeElement === lastFocusable)\n        ) {\n          firstFocusable?.focus();\n          e.preventDefault();\n        } else if (\n          e.shiftKey &&\n          (document.activeElement === lightboxRef.current ||\n            document.activeElement === firstFocusable)\n        ) {\n          lastFocusable?.focus();\n          e.preventDefault();\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [onKeydown]);\n\n    useEffect(() => {\n      setLiveText(\n        `${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''} ${\n          currentItem.description\n        }.`\n      );\n    }, [currentItem.name, countTrackerText, currentItem.description]);\n\n    useEffect(() => {\n      lightboxRef.current?.focus();\n    }, []);\n\n    return (\n      <StyledLightbox\n        {...restProps}\n        tabIndex={-1}\n        ref={lightboxRef}\n        open={open}\n        role='dialog'\n        aria-modal='true'\n        container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n        alpha={0.9}\n        variant='dark'\n        transitionSpeed='slow'\n        onBeforeTransitionIn={disableScroll}\n        onAfterTransitionOut={() => {\n          enableScroll();\n          onAfterClose?.();\n        }}\n      >\n        <Flex\n          as={StyledHeader}\n          ref={headerRef}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 2\n          }}\n          onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n            if (e.button !== 0) return;\n            if (e.target === e.currentTarget) close();\n          }}\n        >\n          <StyledCountTracker aria-hidden='true'>{countTrackerText}</StyledCountTracker>\n\n          <Flex\n            as={StyledInfo}\n            container={{\n              wrap: 'wrap',\n              alignItems: 'center',\n              justify: 'center',\n              colGap: 2,\n              rowGap: 0.5\n            }}\n          >\n            <Text variant='primary' as='h2'>\n              {currentItem.name}\n            </Text>\n            {currentItem.metadata && <MetaList items={currentItem.metadata} />}\n          </Flex>\n\n          <Flex container>\n            {onItemDownload && (\n              <StyledActionButton\n                variant='simple'\n                aria-label={t('download')}\n                icon\n                onClick={() => onItemDownload(currentItem.id)}\n              >\n                <Icon name='download' />\n              </StyledActionButton>\n            )}\n            <StyledActionButton\n              variant='simple'\n              ref={closeButtonRef}\n              aria-label={t('close')}\n              icon\n              onClick={close}\n            >\n              <Icon name='times' />\n            </StyledActionButton>\n          </Flex>\n        </Flex>\n\n        <Flex\n          container={{ justify: 'between' }}\n          as={StyledPreviewRegion}\n          item={{ grow: 1, shrink: 0 }}\n        >\n          {items.length > 1 && (\n            <StyledNavButton\n              ref={prevButtonRef}\n              variant='simple'\n              aria-label={t('pagination_prev')}\n              hidden={!cycle && currentIndex === 0}\n              icon\n              onClick={() => {\n                navigate(-1);\n              }}\n            >\n              <span>\n                <Icon name='caret-left' />\n              </span>\n            </StyledNavButton>\n          )}\n\n          <Flex item={{ grow: 1 }} as={StyledImageContainer}>\n            <Flex\n              container={{ alignItems: 'center' }}\n              onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n                if (e.button !== 0) return;\n                if (e.target === e.currentTarget) close();\n              }}\n            >\n              {error ? (\n                <ErrorState message={t('image_load_error')} />\n              ) : (\n                <StyledImage\n                  ref={imageRef}\n                  src={currentItem.src}\n                  alt={currentItem.description}\n                  onLoad={(e: SyntheticEvent<HTMLImageElement>) => {\n                    onItemLoad?.(currentItem.id, e);\n                  }}\n                  onError={(e: SyntheticEvent<HTMLImageElement>) => {\n                    onItemError?.(currentItem.id, e);\n                    setError(true);\n                  }}\n                />\n              )}\n            </Flex>\n          </Flex>\n\n          {items.length > 1 && (\n            <StyledNavButton\n              ref={nextButtonRef}\n              variant='simple'\n              aria-label={t('pagination_next')}\n              hidden={!cycle && currentIndex === items.length - 1}\n              icon\n              onClick={() => {\n                navigate(1);\n              }}\n            >\n              <span>\n                <Icon name='caret-right' />\n              </span>\n            </StyledNavButton>\n          )}\n        </Flex>\n        <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n      </StyledLightbox>\n    );\n  }\n);\n\nexport default Lightbox;\n"]}

package/lib/components/Lightbox/Lightbox.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCountTracker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNavButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledActionButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPreviewRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Image").ImageProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLiveRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLightbox: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Backdrop/Backdrop").BackdropProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Lightbox.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY,4GAkBvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,yGAKrB,CAAC;AAIH,eAAO,MAAM,eAAe,oNAgE1B,CAAC;AAIH,eAAO,MAAM,kBAAkB,qMAS7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAkB/B,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC;AAEF,eAAO,MAAM,WAAW,mMAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAE5B,CAAC;AAEF,eAAO,MAAM,cAAc,kNAI1B,CAAC"}

package/lib/components/Lightbox/Lightbox.styles.js

@@ -0,0 +1,166 @@
+import styled, { css } from 'styled-components';
+import { hideVisually, rgba } from 'polished';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+import { calculateFontSize } from '../../styles';
+import Image from '../Image';
+import Button from '../Button';
+import BareButton from '../Button/BareButton';
+import { StyledIcon } from '../Icon';
+import { StyledMetaList } from '../MetaList/MetaList';
+import { StyledErrorState } from '../ErrorState';
+import { StyledText } from '../Text';
+import { useDirection } from '../../hooks';
+import Backdrop from '../Backdrop';
+export const StyledHeader = styled.header(({ theme }) => {
+    const color = tryCatch(() => rgba(theme.base.palette.light, theme.base.transparency['transparent-2']));
+    return css `
+    position: relative;
+    width: 100%;
+    padding: ${theme.base.spacing};
+    color: ${color};
+
+    ${StyledMetaList} {
+      justify-content: center;
+      li {
+        color: ${color};
+      }
+    }
+  `;
+});
+StyledHeader.defaultProps = defaultThemeProp;
+export const StyledCountTracker = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize.xs};
+    text-align: center;
+    min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});
+
+    @media (pointer: coarse) {
+      min-width: calc(2 * ${theme.base['hit-area']['finger-min']});
+    }
+  `;
+});
+StyledCountTracker.defaultProps = defaultThemeProp;
+export const StyledInfo = styled.div(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.light};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+  `;
+});
+StyledInfo.defaultProps = defaultThemeProp;
+export const StyledNavButton = styled(BareButton)(({ theme }) => {
+    const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));
+    const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));
+    const { rtl } = useDirection();
+    return css `
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    min-width: ${theme.base['hit-area']['mouse-min']};
+    color: ${theme.base.palette['foreground-color']};
+    box-shadow: none;
+    border-radius: 0;
+
+    @media (pointer: coarse) {
+      min-width: ${theme.base['hit-area']['finger-min']};
+    }
+
+    &[hidden] {
+      display: none;
+    }
+
+    & > span {
+      display: inline-block;
+      background-color: ${bg};
+
+      ${StyledIcon} {
+        color: ${theme.base.palette.light};
+        width: 2rem;
+        height: 3rem;
+
+        ${rtl &&
+        css `
+          transform: rotateZ(180deg);
+        `}
+      }
+    }
+
+    &:nth-of-type(1) {
+      inset-inline-start: 0;
+      text-align: start;
+      & > span {
+        border-start-end-radius: calc(${theme.base['border-radius']} / 2);
+        border-end-end-radius: calc(${theme.base['border-radius']} / 2);
+      }
+    }
+
+    &:nth-of-type(2) {
+      inset-inline-end: 0;
+      text-align: end;
+      & > span {
+        border-start-start-radius: calc(${theme.base['border-radius']} / 2);
+        border-end-start-radius: calc(${theme.base['border-radius']} / 2);
+      }
+    }
+
+    &:hover > span {
+      background-color: ${hoverBg};
+    }
+
+    &:focus > span {
+      box-shadow: ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledNavButton.defaultProps = defaultThemeProp;
+export const StyledActionButton = styled(Button)(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    color: ${theme.base.palette.light};
+
+    &:focus:enabled {
+      box-shadow: ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledActionButton.defaultProps = defaultThemeProp;
+export const StyledImageContainer = styled.div(({ theme }) => {
+    return css `
+    position: relative;
+
+    & > div {
+      position: absolute;
+      inset-block-start: 0;
+      inset-block-end: calc(2 * ${theme.base.spacing});
+      inset-inline: 0;
+    }
+
+    ${StyledErrorState} {
+      margin: auto;
+      & > ${StyledText} {
+        color: ${theme.base.palette.light};
+      }
+    }
+  `;
+});
+StyledImageContainer.defaultProps = defaultThemeProp;
+export const StyledPreviewRegion = styled.div `
+  position: relative;
+  width: 100%;
+`;
+export const StyledImage = styled(Image) `
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+`;
+export const StyledLiveRegion = styled.div `
+  ${hideVisually}
+`;
+export const StyledLightbox = styled(Backdrop) `
+  &:focus {
+    outline: none;
+  }
+`;
+//# sourceMappingURL=Lightbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Image from '../Image';\nimport Button from '../Button';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  const color: string | undefined = tryCatch(() =>\n    rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    position: relative;\n    width: 100%;\n    padding: ${theme.base.spacing};\n    color: ${color};\n\n    ${StyledMetaList} {\n      justify-content: center;\n      li {\n        color: ${color};\n      }\n    }\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize.xs};\n    text-align: center;\n    min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n    @media (pointer: coarse) {\n      min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n    }\n  `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.light};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n  const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n  const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n  const { rtl } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block: 0;\n    min-width: ${theme.base['hit-area']['mouse-min']};\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: none;\n    border-radius: 0;\n\n    @media (pointer: coarse) {\n      min-width: ${theme.base['hit-area']['finger-min']};\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    & > span {\n      display: inline-block;\n      background-color: ${bg};\n\n      ${StyledIcon} {\n        color: ${theme.base.palette.light};\n        width: 2rem;\n        height: 3rem;\n\n        ${rtl &&\n        css`\n          transform: rotateZ(180deg);\n        `}\n      }\n    }\n\n    &:nth-of-type(1) {\n      inset-inline-start: 0;\n      text-align: start;\n      & > span {\n        border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n        border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n      }\n    }\n\n    &:nth-of-type(2) {\n      inset-inline-end: 0;\n      text-align: end;\n      & > span {\n        border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n        border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n      }\n    }\n\n    &:hover > span {\n      background-color: ${hoverBg};\n    }\n\n    &:focus > span {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledActionButton = styled(Button)(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    color: ${theme.base.palette.light};\n\n    &:focus:enabled {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledActionButton.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n\n    & > div {\n      position: absolute;\n      inset-block-start: 0;\n      inset-block-end: calc(2 * ${theme.base.spacing});\n      inset-inline: 0;\n    }\n\n    ${StyledErrorState} {\n      margin: auto;\n      & > ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n  `;\n});\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const StyledImage = styled(Image)`\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n`;\n\nexport const StyledLiveRegion = styled.div`\n  ${hideVisually}\n`;\n\nexport const StyledLightbox = styled(Backdrop)`\n  &:focus {\n    outline: none;\n  }\n`;\n"]}

package/lib/components/Lightbox/Lightbox.types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, SyntheticEvent } from 'react';
+import { NoChildrenProp, BaseProps } from '../../types';
+import { BackdropProps } from '../Backdrop/Backdrop';
+import { ImageProps } from '../Image';
+export interface LightboxProps extends NoChildrenProp, BaseProps {
+    /** A list of compatible content to present in the lightbox. */
+    items: LightboxItem[];
+    /**
+     * The index of the item to present on mount.
+     * @default 0
+     * */
+    defaultIndex?: number;
+    /** Allow cycling through the items in either direction. */
+    cycle?: true;
+    /** Called when an item's file is loaded. */
+    onItemLoad?: (id: LightboxItem['id'], e: SyntheticEvent<HTMLImageElement>) => void;
+    /** Called when an item's file encounters an error while loading. */
+    onItemError?: (id: LightboxItem['id'], e: SyntheticEvent<HTMLImageElement>) => void;
+    /** Called when the user navigates between items. */
+    onNavigate?: (id: LightboxItem['id']) => void;
+    /** Called when a download action is triggered for an item's file. */
+    onItemDownload?: (id: LightboxItem['id']) => void;
+    /** Called after the lightbox has transitioned out. */
+    onAfterClose?: BackdropProps['onAfterTransitionOut'];
+    /** A ref to the underlying root element of the lightbox. */
+    ref?: BackdropProps['ref'];
+}
+export interface LightboxItem {
+    /** A unique identifier for the item. */
+    id: string;
+    /** The item's name e.g. filename. */
+    name: string;
+    /** Text to describe the item. */
+    description: ImageProps['alt'];
+    /** URL for the item's binary file. */
+    src: string;
+    /** Additional info about the item. */
+    metadata?: ReactNode[];
+    /** A ref to the item's underlying element. */
+    ref?: ImageProps['ref'];
+}
+//# sourceMappingURL=Lightbox.types.d.ts.map

package/lib/components/Lightbox/Lightbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS;IAC9D,+DAA+D;IAC/D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;;SAGK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,4CAA4C;IAC5C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,oEAAoE;IACpE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpF,oDAAoD;IACpD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,sDAAsD;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACrD,4DAA4D;IAC5D,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC/B,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;CACzB"}

package/lib/components/Lightbox/Lightbox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Lightbox.types.js.map

package/lib/components/Lightbox/Lightbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.types.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, SyntheticEvent } from 'react';\n\nimport { NoChildrenProp, BaseProps } from '../../types';\nimport { BackdropProps } from '../Backdrop/Backdrop';\nimport { ImageProps } from '../Image';\n\nexport interface LightboxProps extends NoChildrenProp, BaseProps {\n  /** A list of compatible content to present in the lightbox. */\n  items: LightboxItem[];\n  /**\n   * The index of the item to present on mount.\n   * @default 0\n   * */\n  defaultIndex?: number;\n  /** Allow cycling through the items in either direction. */\n  cycle?: true;\n  /** Called when an item's file is loaded. */\n  onItemLoad?: (id: LightboxItem['id'], e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Called when an item's file encounters an error while loading. */\n  onItemError?: (id: LightboxItem['id'], e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Called when the user navigates between items. */\n  onNavigate?: (id: LightboxItem['id']) => void;\n  /** Called when a download action is triggered for an item's file. */\n  onItemDownload?: (id: LightboxItem['id']) => void;\n  /** Called after the lightbox has transitioned out. */\n  onAfterClose?: BackdropProps['onAfterTransitionOut'];\n  /** A ref to the underlying root element of the lightbox. */\n  ref?: BackdropProps['ref'];\n}\n\nexport interface LightboxItem {\n  /** A unique identifier for the item. */\n  id: string;\n  /** The item's name e.g. filename. */\n  name: string;\n  /** Text to describe the item. */\n  description: ImageProps['alt'];\n  /** URL for the item's binary file. */\n  src: string;\n  /** Additional info about the item. */\n  metadata?: ReactNode[];\n  /** A ref to the item's underlying element. */\n  ref?: ImageProps['ref'];\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Lightbox';
+export { LightboxProps, LightboxItem } from './Lightbox.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/Lightbox/index.js

@@ -0,0 +1,2 @@
+export { default } from './Lightbox';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Lightbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Lightbox';\nexport { LightboxProps, LightboxItem } from './Lightbox.types';\n"]}

package/lib/components/Link/Link.js

@@ -78,19 +78,18 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
         setPopover(false);
     };
     const onKeyUp = (event) => {
-        var _a, _b, _c;
         if (event.keyCode === 27) {
             closePopover();
         }
         if (event.keyCode === 38 || event.keyCode === 40) {
-            (_a = previewBtnRef === null || previewBtnRef === void 0 ? void 0 : previewBtnRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            previewBtnRef?.current?.focus();
         }
         if (event.keyCode === 37 || event.keyCode === 39) {
             if (previewBtnRef.current === document.activeElement) {
-                (_b = openInTabBtnRef === null || openInTabBtnRef === void 0 ? void 0 : openInTabBtnRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                openInTabBtnRef?.current?.focus();
             }
             else {
-                (_c = previewBtnRef === null || previewBtnRef === void 0 ? void 0 : previewBtnRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                previewBtnRef?.current?.focus();
             }
         }
     };
@@ -99,11 +98,9 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
             openPopover();
     };
     const onPreviewClick = () => {
-        onPreview === null || onPreview === void 0 ? void 0 : onPreview({ href });
+        onPreview?.({ href });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledLink, Object.assign({ href: href, variant: variant, ref: linkRef }, restProps, { onMouseEnter: onEnterLink, onMouseLeave: closePopover, onFocus: onEnterLink, onKeyUp: onKeyUp, onBlur: closePopover }), void 0),
-            _jsxs(Popover, Object.assign({ show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: 'short', placement: 'bottom', target: linkRef.current, onMouseEnter: openPopover, onMouseLeave: closePopover, as: StyledLinkPopover, arrow: true }, { children: [_jsx(StyledLinkPopoverBtn, Object.assign({ preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: 0, onFocus: openPopover, onKeyUp: onKeyUp }, { children: t('link_preview') }), void 0),
-                    _jsx(StyledLinkPopoverBtn, Object.assign({ forwardedAs: 'a', href: href, ref: openInTabBtnRef, target: '_blank', rel: 'noreferrer', onBlur: closePopover, onKeyUp: onKeyUp }, { children: t('link_open_in_tab') }), void 0)] }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledLink, { href: href, variant: variant, ref: linkRef, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: closePopover, onFocus: onEnterLink, onKeyUp: onKeyUp, onBlur: closePopover }, void 0), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: 'short', placement: 'bottom', target: linkRef.current, onMouseEnter: openPopover, onMouseLeave: closePopover, as: StyledLinkPopover, arrow: true, children: [_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: 0, onFocus: openPopover, onKeyUp: onKeyUp, children: t('preview') }, void 0), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, ref: openInTabBtnRef, target: '_blank', rel: 'noreferrer', onBlur: closePopover, onKeyUp: onKeyUp, children: t('link_open_in_tab_text') }, void 0)] }, void 0)] }, void 0));
 });
 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} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useBreakpoint, useConsolidatedRef, useI18n } from '../../hooks';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\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`\n  background-color: ${props => props.theme.components.tooltip['background-color']};\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    &:nth-child(2)::after {\n      content: '';\n      position: absolute;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:nth-child(2) {\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-inline-start: -1px;\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 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 linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const openInTabBtnRef = useRef<HTMLAnchorElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n\n    const openPopover = () => {\n      if (isSmallOrAbove) setPopover(true);\n    };\n\n    const closePopover = () => {\n      setPopover(false);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n      if (event.keyCode === 27) {\n        closePopover();\n      }\n\n      if (event.keyCode === 38 || event.keyCode === 40) {\n        previewBtnRef?.current?.focus();\n      }\n\n      if (event.keyCode === 37 || event.keyCode === 39) {\n        if (previewBtnRef.current === document.activeElement) {\n          openInTabBtnRef?.current?.focus();\n        } else {\n          previewBtnRef?.current?.focus();\n        }\n      }\n    };\n\n    const onEnterLink = () => {\n      if (previewable) openPopover();\n    };\n\n    const onPreviewClick = () => {\n      onPreview?.({ href });\n    };\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={closePopover}\n          onFocus={onEnterLink}\n          onKeyUp={onKeyUp}\n          onBlur={closePopover}\n        />\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay='short'\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={openPopover}\n          onMouseLeave={closePopover}\n          as={StyledLinkPopover}\n          arrow\n        >\n          <StyledLinkPopoverBtn\n            preview\n            type='button'\n            ref={previewBtnRef}\n            onClick={onPreviewClick}\n            tabIndex={0}\n            onFocus={openPopover}\n            onKeyUp={onKeyUp}\n          >\n            {t('link_preview')}\n          </StyledLinkPopoverBtn>\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            ref={openInTabBtnRef}\n            target='_blank'\n            rel='noreferrer'\n            onBlur={closePopover}\n            onKeyUp={onKeyUp}\n          >\n            {t('link_open_in_tab')}\n          </StyledLinkPopoverBtn>\n        </Popover>\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} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useBreakpoint, useConsolidatedRef, useI18n } from '../../hooks';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\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`\n  background-color: ${props => props.theme.components.tooltip['background-color']};\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    &:nth-child(2)::after {\n      content: '';\n      position: absolute;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:nth-child(2) {\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-inline-start: -1px;\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 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 linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const openInTabBtnRef = useRef<HTMLAnchorElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n\n    const openPopover = () => {\n      if (isSmallOrAbove) setPopover(true);\n    };\n\n    const closePopover = () => {\n      setPopover(false);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n      if (event.keyCode === 27) {\n        closePopover();\n      }\n\n      if (event.keyCode === 38 || event.keyCode === 40) {\n        previewBtnRef?.current?.focus();\n      }\n\n      if (event.keyCode === 37 || event.keyCode === 39) {\n        if (previewBtnRef.current === document.activeElement) {\n          openInTabBtnRef?.current?.focus();\n        } else {\n          previewBtnRef?.current?.focus();\n        }\n      }\n    };\n\n    const onEnterLink = () => {\n      if (previewable) openPopover();\n    };\n\n    const onPreviewClick = () => {\n      onPreview?.({ href });\n    };\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={closePopover}\n          onFocus={onEnterLink}\n          onKeyUp={onKeyUp}\n          onBlur={closePopover}\n        />\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay='short'\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={openPopover}\n          onMouseLeave={closePopover}\n          as={StyledLinkPopover}\n          arrow\n        >\n          <StyledLinkPopoverBtn\n            preview\n            type='button'\n            ref={previewBtnRef}\n            onClick={onPreviewClick}\n            tabIndex={0}\n            onFocus={openPopover}\n            onKeyUp={onKeyUp}\n          >\n            {t('preview')}\n          </StyledLinkPopoverBtn>\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            ref={openInTabBtnRef}\n            target='_blank'\n            rel='noreferrer'\n            onBlur={closePopover}\n            onKeyUp={onKeyUp}\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}

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

@@ -0,0 +1,15 @@
+import { FunctionComponent, ReactNode, Ref } from 'react';
+import { BaseProps, ForwardProps } from '../../types';
+export interface CommaSeparatedListProps extends BaseProps {
+    /** List content. */
+    items: ReactNode[];
+    /** List Heading. */
+    heading?: string;
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledCommaSeparatedList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCommaSeparatedListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+declare const CommaSeparatedList: FunctionComponent<CommaSeparatedListProps & ForwardProps>;
+export default CommaSeparatedList;
+//# sourceMappingURL=CommaSeparatedList.d.ts.map

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

@@ -0,0 +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,yGAOnC,CAAC;AAIH,eAAO,MAAM,4BAA4B,wGAMxC,CAAC;AAyDF,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAmBjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/List/CommaSeparatedList.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useLayoutEffect, useMemo, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { useI18n } from '../../hooks';
+import Button from '../Button';
+import Text from '../Text';
+import ExpandCollapse from '../ExpandCollapse';
+import { windowIsAvailable } from '../../utils';
+export const StyledCommaSeparatedList = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    h3 {
+      padding-block-end: calc(2 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledCommaSeparatedList.defaultProps = defaultThemeProp;
+export const StyledCommaSeparatedListItem = styled.li `
+  display: inline;
+
+  &:not(:last-child)::after {
+    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(_Fragment, { children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx("div", { ref: textRef, children: children }, void 0) }, void 0), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }, void 0))] }, void 0));
+};
+const CommaSeparatedList = forwardRef(({ items, heading }, ref) => {
+    return (_jsxs(StyledCommaSeparatedList, { ref: ref, children: [heading && _jsx(Text, { variant: 'h3', children: heading }, void 0), _jsx(DynamicHeightValue, { children: _jsx("ul", { style: { listStyle: 'none' }, children: items.map((value, i) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    _jsx(StyledCommaSeparatedListItem, { children: value }, i))) }, void 0) }, void 0)] }, void 0));
+});
+export default CommaSeparatedList;
+//# sourceMappingURL=CommaSeparatedList.js.map