@strapi/design-system 1.9.0 → 1.10.0

package/dist/Accordion/AccordionToggle.mjs

@@ -0,0 +1,78 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CarretDown } from '@strapi/icons';
+import styled from 'styled-components';
+import { AccordionTypography } from './Accordion.mjs';
+import { useAccordion } from './AccordionContext.mjs';
+import { getBackground } from './utils.mjs';
+import { TextButton } from '../TextButton/TextButton.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const ToggleButton = styled(TextButton) `
+  text-align: left;
+
+  // necessary to make the ellipsis prop work on the title
+  > span {
+    max-width: 100%;
+  }
+
+  svg {
+    width: ${14 / 16}rem;
+    height: ${14 / 16}rem;
+
+    path {
+      fill: ${({ theme, expanded }) => (expanded ? theme.colors.primary600 : theme.colors.neutral500)};
+    }
+  }
+`;
+const FlexWithSize = styled(Flex) `
+  min-height: ${({ theme, size }) => theme.sizes.accordions[size]};
+  border-radius: ${({ theme, expanded }) => expanded ? `${theme.borderRadius} ${theme.borderRadius} 0 0` : theme.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+`;
+const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'right', action, ...props }) => {
+    const { onToggle, toggle, expanded, id, size, variant, disabled } = useAccordion();
+    // Accessibility identifiers
+    const ariaControls = `accordion-content-${id}`;
+    const ariaLabelId = `accordion-label-${id}`;
+    const ariaDescriptionId = `accordion-desc-${id}`;
+    // Style overrides
+    const boxPaddingX = size === 'M' ? 6 : 4;
+    const boxPaddingY = size === 'M' ? boxPaddingX : boxPaddingX - 2;
+    const boxBackground = getBackground({ expanded, disabled, variant });
+    const titleColor = expanded ? 'primary600' : 'neutral700';
+    const titleProps = {
+        as,
+        fontWeight: size === 'S' ? 'bold' : undefined,
+        id: ariaLabelId,
+        textColor: titleColor,
+        ellipsis: true,
+        variant: size === 'M' ? 'delta' : undefined,
+    };
+    const descriptionColor = expanded ? 'primary600' : 'neutral600';
+    const iconColor = expanded ? 'primary200' : 'neutral200';
+    const iconSize = size === 'M' ? `${32 / 16}rem` : `${24 / 16}rem`;
+    const handleToggle = () => {
+        if (!disabled) {
+            if (toggle && !onToggle) {
+                console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead');
+                toggle();
+            }
+            else if (onToggle) {
+                onToggle();
+            }
+        }
+    };
+    const dropdownIcon = (jsx(Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, shrink: 0, children: jsx(Icon, { as: CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
+    return (jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : '', children: jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsx(ToggleButton, { onClick: handleToggle, "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxs(Fragment, { children: [jsx(AccordionTypography, { ...titleProps, children: title }), description && (jsx(Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxs(Flex, { gap: 3, children: [dropdownIcon, action] })), togglePosition === 'left' && action] }) }));
+};
+
+export { AccordionToggle };

package/dist/Accordion/index.js

@@ -1,11 +1,16 @@
-import { Accordion as c, AccordionTypography as n } from "./Accordion.js";
-import { AccordionContent as e } from "./AccordionContent.js";
-import { AccordionToggle as d } from "./AccordionToggle.js";
-import { AccordionGroup as A } from "./AccordionGroup.js";
-export {
-  c as Accordion,
-  e as AccordionContent,
-  A as AccordionGroup,
-  d as AccordionToggle,
-  n as AccordionTypography
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Accordion = require('./Accordion.js');
+const AccordionContent = require('./AccordionContent.js');
+const AccordionToggle = require('./AccordionToggle.js');
+const AccordionGroup = require('./AccordionGroup.js');
+
+
+
+exports.Accordion = Accordion.Accordion;
+exports.AccordionTypography = Accordion.AccordionTypography;
+exports.AccordionContent = AccordionContent.AccordionContent;
+exports.AccordionToggle = AccordionToggle.AccordionToggle;
+exports.AccordionGroup = AccordionGroup.AccordionGroup;

package/dist/Accordion/index.mjs

@@ -0,0 +1,4 @@
+export { Accordion, AccordionTypography } from './Accordion.mjs';
+export { AccordionContent } from './AccordionContent.mjs';
+export { AccordionToggle } from './AccordionToggle.mjs';
+export { AccordionGroup } from './AccordionGroup.mjs';

package/dist/Accordion/utils.js

@@ -1,7 +1,19 @@
-const n = ({ expanded: e, disabled: t, variant: a }) => {
-  let r = "neutral100";
-  return e ? r = "primary100" : t ? r = "neutral150" : a === "primary" && (r = "neutral0"), r;
-};
-export {
-  n as getBackground
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const getBackground = ({ expanded, disabled, variant, }) => {
+    let boxBackground = 'neutral100';
+    if (expanded) {
+        boxBackground = 'primary100';
+    }
+    else if (disabled) {
+        boxBackground = 'neutral150';
+    }
+    else if (variant === 'primary') {
+        boxBackground = 'neutral0';
+    }
+    return boxBackground;
 };
+
+exports.getBackground = getBackground;

package/dist/Accordion/utils.mjs

@@ -0,0 +1,15 @@
+const getBackground = ({ expanded, disabled, variant, }) => {
+    let boxBackground = 'neutral100';
+    if (expanded) {
+        boxBackground = 'primary100';
+    }
+    else if (disabled) {
+        boxBackground = 'neutral150';
+    }
+    else if (variant === 'primary') {
+        boxBackground = 'neutral0';
+    }
+    return boxBackground;
+};
+
+export { getBackground };

package/dist/Alert/Alert.js

@@ -1,40 +1,62 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { Cross as u, CheckCircle as f, ExclamationMarkCircle as C, Information as x } from "@strapi/icons";
-import a from "styled-components";
-import { handleIconColor as n, handleBackgroundColor as w, handleBorderColor as b } from "./utils.js";
-import { buttonFocusStyle as $ } from "../themes/utils.js";
-import { Box as s } from "../Box/Box.js";
-import { Flex as i } from "../Flex/Flex.js";
-import { Typography as h } from "../Typography/Typography.js";
-const k = a(s)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const utils$1 = require('./utils.js');
+const utils = require('../themes/utils.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CloseButton = styled__default.default(Box.Box) `
   svg {
     height: 100%;
     width: 100%;
 
     path {
-      fill: ${({ theme: o }) => o.colors.neutral700};
+      fill: ${({ theme }) => theme.colors.neutral700};
     }
   }
 
-  ${$};
-`, I = a(i)`
+  ${utils.buttonFocusStyle};
+`;
+const AlertIconWrapper = styled__default.default(Flex.Flex) `
   svg {
     height: 100%;
     width: 100%;
 
     path {
-      fill: ${n};
+      fill: ${utils$1.handleIconColor};
     }
   }
-`, B = ({ variant: o, ...e }) => o === "success" ? r(f, { ...e }) : o === "danger" || o === "warning" ? r(C, { ...e }) : r(x, { ...e }), y = a(s)`
+`;
+const AlertIcon = ({ variant, ...props }) => {
+    if (variant === 'success') {
+        return jsxRuntime.jsx(icons.CheckCircle, { ...props });
+    }
+    if (variant === 'danger' || variant === 'warning') {
+        return jsxRuntime.jsx(icons.ExclamationMarkCircle, { ...props });
+    }
+    return jsxRuntime.jsx(icons.Information, { ...props });
+};
+const ActionBox = styled__default.default(Box.Box) `
   & a > span {
-    color: ${n};
+    color: ${utils$1.handleIconColor};
   }
 
   svg path {
-    fill: ${n};
+    fill: ${utils$1.handleIconColor};
   }
-`, M = ({ title: o, children: e, variant: t = "default", onClose: c, closeLabel: m, titleAs: g = "p", action: l, ...p }) => d(i, { alignItems: "flex-start", background: w(t), borderColor: b(t), boxShadow: "filterShadow", gap: 3, hasRadius: !0, padding: 5, paddingRight: 6, variant: t, ...p, children: [r(I, { height: `${20 / 16}rem`, shrink: 0, variant: t, width: `${20 / 16}rem`, children: r(B, { "aria-hidden": !0, variant: t }) }), d(i, { alignItems: "start", gap: l ? 2 : 1, wrap: "wrap", role: t === "danger" ? "alert" : "status", width: "100%", children: [r(h, { fontWeight: "bold", textColor: "neutral800", as: g, children: o }), r(h, { as: "p", textColor: "neutral800", children: e }), l && r(y, { variant: t, children: l })] }), r(k, { as: "button", background: "transparent", borderColor: void 0, height: `${12 / 16}rem`, marginTop: 1, onClick: c, width: `${12 / 16}rem`, "aria-label": m, children: r(u, { "aria-hidden": !0 }) })] });
-export {
-  M as Alert
+`;
+const Alert = ({ title, children, variant = 'default', onClose, closeLabel, titleAs = 'p', action, ...props }) => {
+    return (jsxRuntime.jsxs(Flex.Flex, { alignItems: "flex-start", background: utils$1.handleBackgroundColor(variant), borderColor: utils$1.handleBorderColor(variant), boxShadow: "filterShadow", gap: 3, hasRadius: true, padding: 5, paddingRight: 6, variant: variant, ...props, children: [jsxRuntime.jsx(AlertIconWrapper, { height: `${20 / 16}rem`, shrink: 0, variant: variant, width: `${20 / 16}rem`, children: jsxRuntime.jsx(AlertIcon, { "aria-hidden": true, variant: variant }) }), jsxRuntime.jsxs(Flex.Flex, { alignItems: "start", gap: action ? 2 : 1, wrap: "wrap", role: variant === 'danger' ? 'alert' : 'status', width: "100%", children: [jsxRuntime.jsx(Typography.Typography, { fontWeight: "bold", textColor: "neutral800", as: titleAs, children: title }), jsxRuntime.jsx(Typography.Typography, { as: "p", textColor: "neutral800", children: children }), action && jsxRuntime.jsx(ActionBox, { variant: variant, children: action })] }), jsxRuntime.jsx(CloseButton, { as: "button", background: "transparent", borderColor: undefined, height: `${12 / 16}rem`, marginTop: 1, onClick: onClose, width: `${12 / 16}rem`, "aria-label": closeLabel, children: jsxRuntime.jsx(icons.Cross, { "aria-hidden": true }) })] }));
 };
+
+exports.Alert = Alert;

package/dist/Alert/Alert.mjs

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Cross, CheckCircle, ExclamationMarkCircle, Information } from '@strapi/icons';
+import styled from 'styled-components';
+import { handleIconColor, handleBackgroundColor, handleBorderColor } from './utils.mjs';
+import { buttonFocusStyle } from '../themes/utils.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const CloseButton = styled(Box) `
+  svg {
+    height: 100%;
+    width: 100%;
+
+    path {
+      fill: ${({ theme }) => theme.colors.neutral700};
+    }
+  }
+
+  ${buttonFocusStyle};
+`;
+const AlertIconWrapper = styled(Flex) `
+  svg {
+    height: 100%;
+    width: 100%;
+
+    path {
+      fill: ${handleIconColor};
+    }
+  }
+`;
+const AlertIcon = ({ variant, ...props }) => {
+    if (variant === 'success') {
+        return jsx(CheckCircle, { ...props });
+    }
+    if (variant === 'danger' || variant === 'warning') {
+        return jsx(ExclamationMarkCircle, { ...props });
+    }
+    return jsx(Information, { ...props });
+};
+const ActionBox = styled(Box) `
+  & a > span {
+    color: ${handleIconColor};
+  }
+
+  svg path {
+    fill: ${handleIconColor};
+  }
+`;
+const Alert = ({ title, children, variant = 'default', onClose, closeLabel, titleAs = 'p', action, ...props }) => {
+    return (jsxs(Flex, { alignItems: "flex-start", background: handleBackgroundColor(variant), borderColor: handleBorderColor(variant), boxShadow: "filterShadow", gap: 3, hasRadius: true, padding: 5, paddingRight: 6, variant: variant, ...props, children: [jsx(AlertIconWrapper, { height: `${20 / 16}rem`, shrink: 0, variant: variant, width: `${20 / 16}rem`, children: jsx(AlertIcon, { "aria-hidden": true, variant: variant }) }), jsxs(Flex, { alignItems: "start", gap: action ? 2 : 1, wrap: "wrap", role: variant === 'danger' ? 'alert' : 'status', width: "100%", children: [jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: titleAs, children: title }), jsx(Typography, { as: "p", textColor: "neutral800", children: children }), action && jsx(ActionBox, { variant: variant, children: action })] }), jsx(CloseButton, { as: "button", background: "transparent", borderColor: undefined, height: `${12 / 16}rem`, marginTop: 1, onClick: onClose, width: `${12 / 16}rem`, "aria-label": closeLabel, children: jsx(Cross, { "aria-hidden": true }) })] }));
+};
+
+export { Alert };

package/dist/Alert/index.js

@@ -1,4 +1,9 @@
-import { Alert as o } from "./Alert.js";
-export {
-  o as Alert
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Alert = require('./Alert.js');
+
+
+
+exports.Alert = Alert.Alert;

package/dist/Alert/index.mjs

@@ -0,0 +1 @@
+export { Alert } from './Alert.mjs';

package/dist/Alert/utils.js

@@ -1,17 +1,36 @@
-const s = (r) => {
-  switch (r) {
-    case "danger":
-      return "danger100";
-    case "success":
-      return "success100";
-    case "warning":
-      return "warning100";
-    default:
-      return "primary100";
-  }
-}, c = (r) => s(r).replace("100", "200"), e = ({ theme: r, variant: n }) => n === "danger" ? r.colors.danger700 : n === "success" ? r.colors.success700 : n === "warning" ? r.colors.warning700 : r.colors.primary700;
-export {
-  s as handleBackgroundColor,
-  c as handleBorderColor,
-  e as handleIconColor
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const handleBackgroundColor = (variant) => {
+    switch (variant) {
+        case 'danger':
+            return 'danger100';
+        case 'success':
+            return 'success100';
+        case 'warning':
+            return 'warning100';
+        default:
+            return 'primary100';
+    }
 };
+// border-color is always 1 shade darker than background-color
+const handleBorderColor = (variant) => {
+    return handleBackgroundColor(variant).replace('100', '200');
+};
+const handleIconColor = ({ theme, variant }) => {
+    if (variant === 'danger') {
+        return theme.colors.danger700;
+    }
+    if (variant === 'success') {
+        return theme.colors.success700;
+    }
+    if (variant === 'warning') {
+        return theme.colors.warning700;
+    }
+    return theme.colors.primary700;
+};
+
+exports.handleBackgroundColor = handleBackgroundColor;
+exports.handleBorderColor = handleBorderColor;
+exports.handleIconColor = handleIconColor;

package/dist/Alert/utils.mjs

@@ -0,0 +1,30 @@
+const handleBackgroundColor = (variant) => {
+    switch (variant) {
+        case 'danger':
+            return 'danger100';
+        case 'success':
+            return 'success100';
+        case 'warning':
+            return 'warning100';
+        default:
+            return 'primary100';
+    }
+};
+// border-color is always 1 shade darker than background-color
+const handleBorderColor = (variant) => {
+    return handleBackgroundColor(variant).replace('100', '200');
+};
+const handleIconColor = ({ theme, variant }) => {
+    if (variant === 'danger') {
+        return theme.colors.danger700;
+    }
+    if (variant === 'success') {
+        return theme.colors.success700;
+    }
+    if (variant === 'warning') {
+        return theme.colors.warning700;
+    }
+    return theme.colors.primary700;
+};
+
+export { handleBackgroundColor, handleBorderColor, handleIconColor };

package/dist/Avatar/Avatar.js

@@ -1,39 +1,69 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import * as h from "react";
-import o from "styled-components";
-import { previewSize as s, avatarSize as t } from "./constants.js";
-import { Box as d } from "../Box/Box.js";
-import { Flex as u } from "../Flex/Flex.js";
-import { Typography as m } from "../Typography/Typography.js";
-const x = o.img`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const constants = require('./constants.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const AvatarImg = styled__default.default.img `
   border-radius: 50%;
   object-fit: cover;
   display: block;
   position: relative;
-`, f = o.img`
+`;
+const PreviewContainer = styled__default.default.img `
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
-  transform: translate(-${(s - t) / 2}px, -100%);
-  margin-top: -${({ theme: e }) => e.spaces[1]};
-`, g = o(d)`
+  transform: translate(-${(constants.previewSize - constants.avatarSize) / 2}px, -100%);
+  margin-top: -${({ theme }) => theme.spaces[1]};
+`;
+const Overlay = styled__default.default(Box.Box) `
   opacity: 0.4;
-`, I = ({ src: e, alt: n, preview: r }) => {
-  const [c, p] = h.useState(!1), a = !!(r && c);
-  return l("span", { children: [a ? i(f, {
-    "aria-hidden": !0,
-    alt: "",
-    width: `${s}px`,
-    height: `${s}px`,
-    // eslint-disable-next-line no-nested-ternary
-    src: r === !0 ? e : typeof r == "string" ? r : ""
-  }) : null, l(d, { zIndex: a ? 1 : void 0, position: "relative", onMouseEnter: () => p(!0), onMouseLeave: () => p(!1), width: `${t}px`, height: `${t}px`, children: [a ? i(g, { background: "neutral0", borderRadius: "50%", position: "absolute", width: `${t}px`, height: `${t}px`, zIndex: 1 }) : null, i(x, { src: e, alt: n, width: `${t}px`, height: `${t}px` })] })] });
-}, b = o(u)`
+`;
+const Avatar = ({ src, alt, preview }) => {
+    const [previewVisible, setPreviewVisible] = React__namespace.useState(false);
+    const isHovering = Boolean(preview && previewVisible);
+    return (jsxRuntime.jsxs("span", { children: [isHovering ? (jsxRuntime.jsx(PreviewContainer, { "aria-hidden": true, alt: "", width: `${constants.previewSize}px`, height: `${constants.previewSize}px`, 
+                // eslint-disable-next-line no-nested-ternary
+                src: preview === true ? src : typeof preview === 'string' ? preview : '' })) : null, jsxRuntime.jsxs(Box.Box, { zIndex: isHovering ? 1 : undefined, position: "relative", onMouseEnter: () => setPreviewVisible(true), onMouseLeave: () => setPreviewVisible(false), width: `${constants.avatarSize}px`, height: `${constants.avatarSize}px`, children: [isHovering ? (jsxRuntime.jsx(Overlay, { background: "neutral0", borderRadius: "50%", position: "absolute", width: `${constants.avatarSize}px`, height: `${constants.avatarSize}px`, zIndex: 1 })) : null, jsxRuntime.jsx(AvatarImg, { src: src, alt: alt, width: `${constants.avatarSize}px`, height: `${constants.avatarSize}px` })] })] }));
+};
+const InitialsWrapper = styled__default.default(Flex.Flex) `
   span {
     line-height: 0;
   }
-`, S = ({ children: e, background: n = "primary600", textColor: r = "buttonNeutral0" }) => i(b, { background: n, borderRadius: "50%", width: `${t}px`, height: `${t}px`, justifyContent: "center", children: i(m, { fontSize: 0, fontWeight: "bold", textColor: r, textTransform: "uppercase", children: e }) });
-export {
-  I as Avatar,
-  S as Initials
+`;
+const Initials = ({ children, background = 'primary600', textColor = 'buttonNeutral0' }) => {
+    return (jsxRuntime.jsx(InitialsWrapper, { background: background, borderRadius: "50%", width: `${constants.avatarSize}px`, height: `${constants.avatarSize}px`, justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { fontSize: 0, fontWeight: "bold", textColor: textColor, textTransform: "uppercase", children: children }) }));
 };
+
+exports.Avatar = Avatar;
+exports.Initials = Initials;

package/dist/Avatar/Avatar.mjs

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styled from 'styled-components';
+import { previewSize, avatarSize } from './constants.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const AvatarImg = styled.img `
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  position: relative;
+`;
+const PreviewContainer = styled.img `
+  border-radius: 50%;
+  object-fit: cover;
+  position: absolute;
+  transform: translate(-${(previewSize - avatarSize) / 2}px, -100%);
+  margin-top: -${({ theme }) => theme.spaces[1]};
+`;
+const Overlay = styled(Box) `
+  opacity: 0.4;
+`;
+const Avatar = ({ src, alt, preview }) => {
+    const [previewVisible, setPreviewVisible] = React.useState(false);
+    const isHovering = Boolean(preview && previewVisible);
+    return (jsxs("span", { children: [isHovering ? (jsx(PreviewContainer, { "aria-hidden": true, alt: "", width: `${previewSize}px`, height: `${previewSize}px`, 
+                // eslint-disable-next-line no-nested-ternary
+                src: preview === true ? src : typeof preview === 'string' ? preview : '' })) : null, jsxs(Box, { zIndex: isHovering ? 1 : undefined, position: "relative", onMouseEnter: () => setPreviewVisible(true), onMouseLeave: () => setPreviewVisible(false), width: `${avatarSize}px`, height: `${avatarSize}px`, children: [isHovering ? (jsx(Overlay, { background: "neutral0", borderRadius: "50%", position: "absolute", width: `${avatarSize}px`, height: `${avatarSize}px`, zIndex: 1 })) : null, jsx(AvatarImg, { src: src, alt: alt, width: `${avatarSize}px`, height: `${avatarSize}px` })] })] }));
+};
+const InitialsWrapper = styled(Flex) `
+  span {
+    line-height: 0;
+  }
+`;
+const Initials = ({ children, background = 'primary600', textColor = 'buttonNeutral0' }) => {
+    return (jsx(InitialsWrapper, { background: background, borderRadius: "50%", width: `${avatarSize}px`, height: `${avatarSize}px`, justifyContent: "center", children: jsx(Typography, { fontSize: 0, fontWeight: "bold", textColor: textColor, textTransform: "uppercase", children: children }) }));
+};
+
+export { Avatar, Initials };

package/dist/Avatar/AvatarGroup.js

@@ -1,11 +1,19 @@
-import r from "styled-components";
-import { avatarSize as o } from "./constants.js";
-import { Flex as t } from "../Flex/Flex.js";
-const e = r(t)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+const constants = require('./constants.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const AvatarGroup = styled__default.default(Flex.Flex) `
   & > * + * {
-    margin-left: -${o / 2}px;
+    margin-left: -${constants.avatarSize / 2}px;
   }
 `;
-export {
-  e as AvatarGroup
-};
+
+exports.AvatarGroup = AvatarGroup;

package/dist/Avatar/AvatarGroup.mjs

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { avatarSize } from './constants.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const AvatarGroup = styled(Flex) `
+  & > * + * {
+    margin-left: -${avatarSize / 2}px;
+  }
+`;
+
+export { AvatarGroup };

package/dist/Avatar/constants.js

@@ -1,5 +1,9 @@
-const e = 32, t = 64;
-export {
-  e as avatarSize,
-  t as previewSize
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const avatarSize = 32;
+const previewSize = 64;
+
+exports.avatarSize = avatarSize;
+exports.previewSize = previewSize;

package/dist/Avatar/constants.mjs

@@ -0,0 +1,4 @@
+const avatarSize = 32;
+const previewSize = 64;
+
+export { avatarSize, previewSize };

package/dist/Avatar/index.js

@@ -1,7 +1,12 @@
-import { Avatar as o, Initials as t } from "./Avatar.js";
-import { AvatarGroup as e } from "./AvatarGroup.js";
-export {
-  o as Avatar,
-  e as AvatarGroup,
-  t as Initials
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Avatar = require('./Avatar.js');
+const AvatarGroup = require('./AvatarGroup.js');
+
+
+
+exports.Avatar = Avatar.Avatar;
+exports.Initials = Avatar.Initials;
+exports.AvatarGroup = AvatarGroup.AvatarGroup;

package/dist/Avatar/index.mjs

@@ -0,0 +1,2 @@
+export { Avatar, Initials } from './Avatar.mjs';
+export { AvatarGroup } from './AvatarGroup.mjs';