@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/Accordion/AccordionToggle.js

@@ -1,90 +0,0 @@
-'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 Accordion = require('./Accordion.js');
-const AccordionContext = require('./AccordionContext.js');
-const utils = require('./utils.js');
-const TextButton = require('../TextButton/TextButton.js');
-const Icon = require('../Icon/Icon.js');
-const Flex = require('../Flex/Flex.js');
-const Typography = require('../Typography/Typography.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const ToggleButton = styled__default.default(TextButton.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__default.default(Flex.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 } = AccordionContext.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 = utils.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 = (jsxRuntime.jsx(Flex.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', shrink: 0, children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
-    const stopPropagation = (e) => {
-        e.stopPropagation();
-    };
-    return (jsxRuntime.jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxRuntime.jsxs(Flex.Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsxRuntime.jsx(ToggleButton, { "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: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Accordion.AccordionTypography, { ...titleProps, children: title }), description && (jsxRuntime.jsx(Typography.Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxRuntime.jsxs(Flex.Flex, { gap: 3, children: [dropdownIcon, jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
-};
-
-exports.AccordionToggle = AccordionToggle;

package/dist/Accordion/AccordionToggle.mjs

@@ -1,82 +0,0 @@
-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';
-import { Box } from '../Box/Box.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', shrink: 0, children: jsx(Icon, { as: CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
-    const stopPropagation = (e) => {
-        e.stopPropagation();
-    };
-    return (jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsx(ToggleButton, { "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, jsx(Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsx(Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
-};
-
-export { AccordionToggle };

package/dist/Accordion/index.js

@@ -1,16 +0,0 @@
-'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

@@ -1,4 +0,0 @@
-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,19 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-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,62 +0,0 @@
-'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 }) => theme.colors.neutral700};
-    }
-  }
-
-  ${utils.buttonFocusStyle};
-`;
-const AlertIconWrapper = styled__default.default(Flex.Flex) `
-  svg {
-    height: 100%;
-    width: 100%;
-
-    path {
-      fill: ${utils$1.handleIconColor};
-    }
-  }
-`;
-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: ${utils$1.handleIconColor};
-  }
-
-  svg path {
-    fill: ${utils$1.handleIconColor};
-  }
-`;
-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: [title && (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

@@ -1,54 +0,0 @@
-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: [title && (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,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Alert = require('./Alert.js');
-
-
-
-exports.Alert = Alert.Alert;

package/dist/Alert/index.mjs

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

package/dist/Alert/utils.js

@@ -1,36 +0,0 @@
-'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

@@ -1,30 +0,0 @@
-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,69 +0,0 @@
-'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;
-`;
-const PreviewContainer = styled__default.default.img `
-  border-radius: 50%;
-  object-fit: cover;
-  position: absolute;
-  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;
-`;
-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;
-  }
-`;
-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

@@ -1,41 +0,0 @@
-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,19 +0,0 @@
-'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: -${constants.avatarSize / 2}px;
-  }
-`;
-
-exports.AvatarGroup = AvatarGroup;

package/dist/Avatar/AvatarGroup.mjs

@@ -1,11 +0,0 @@
-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,9 +0,0 @@
-'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

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

package/dist/Avatar/index.js

@@ -1,12 +0,0 @@
-'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

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

package/dist/Badge/Badge.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-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 Base = styled__default.default(Flex.Flex) `
-  border-radius: ${({ theme, size }) => (size === 'S' ? '2px' : theme.borderRadius)};
-  height: ${({ size, theme }) => theme.sizes.badge[size]};
-`;
-const Badge = ({ active = false, size = 'M', textColor = 'neutral600', backgroundColor = 'neutral150', children, minWidth = 5, ...props }) => {
-    const paddingX = size === 'S' ? 1 : 2;
-    return (jsxRuntime.jsx(Base, { inline: true, alignItem: "center", justifyContent: "center", minWidth: minWidth, paddingLeft: paddingX, paddingRight: paddingX, background: active ? 'primary200' : backgroundColor, size: size, ...props, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: active ? 'primary600' : textColor, children: children }) }));
-};
-
-exports.Badge = Badge;

package/dist/Badge/Badge.mjs

@@ -1,15 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const Base = styled(Flex) `
-  border-radius: ${({ theme, size }) => (size === 'S' ? '2px' : theme.borderRadius)};
-  height: ${({ size, theme }) => theme.sizes.badge[size]};
-`;
-const Badge = ({ active = false, size = 'M', textColor = 'neutral600', backgroundColor = 'neutral150', children, minWidth = 5, ...props }) => {
-    const paddingX = size === 'S' ? 1 : 2;
-    return (jsx(Base, { inline: true, alignItem: "center", justifyContent: "center", minWidth: minWidth, paddingLeft: paddingX, paddingRight: paddingX, background: active ? 'primary200' : backgroundColor, size: size, ...props, children: jsx(Typography, { variant: "sigma", textColor: active ? 'primary600' : textColor, children: children }) }));
-};
-
-export { Badge };