@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/Modal/Modal.js

@@ -10,154 +10,136 @@ import ButtonClose from '../ButtonClose/ButtonClose.js';
 import getElevationShadow from '../../utils/common.js';
 
 const sizeMap = {
-    mobile: '375px',
-    small: '480px',
-    medium: '768px',
-    large: '960px',
-    wide: '1535px',
+  mobile: '375px',
+  small: '480px',
+  medium: '768px',
+  large: '960px',
+  wide: '1535px'
 };
-const GlobalStyle = createGlobalStyle `
-    body.ReactModal__Body--open {
-        overflow: hidden;
-    }
-`;
-const StyledReactModal = styled(ReactModal) `
-    position: relative;
-    max-width: 100vw;
-    width: 100vw;
-    max-height: 100vh;
-    height: 100vh;
-    overflow-y: auto;
-
-    ${getElevationShadow({ elevation: 'extraHigh' })}
-
-    @media (min-width: ${sizeMap.mobile}) {
-        max-width: ${({ size }) => sizeMap[size]};
-        max-height: 90%;
-        margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
-    }
-
-    @media (min-width: ${sizeMap.small}) {
-        width: 90vw;
-        max-height: 60%;
-    }
-
-    @media (min-width: ${sizeMap.wide}) {
-        max-width: 100%;
-        width: 960px;
-    }
-`;
-const StyledOverlay = styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 9999;
-    background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
-    animation: fadeIn 0.2s ease-in-out;
-
-    @keyframes fadeIn {
-        0% {
-            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T0};
-        }
-
-        100% {
-            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
-        }
-    }
-`;
-const StyledBox = styled(Box) `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 0;
-    border: none;
-    overflow-y: auto;
-
-    @media (max-width: ${sizeMap.mobile}) {
-        border-radius: 0;
-    }
-`;
-const StyledContent = styled.div `
-    &:focus {
-        outline: none;
-    }
-
-    @media (min-width: ${sizeMap.small}) {
-        border-radius: ${theme.radius.default};
-    }
-`;
-const ContentWrapper = styled.div `
-    padding-top: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    padding-left: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    padding-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    padding-right: ${getMultipliedSize(theme.base.baseWidth, 2)};
-`;
-const Header = styled.div `
-    padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    background-color: ${({ $variant }) => $variant === 'dark'
-    ? theme.color.background.plum.E02
-    : theme.color.background.white.default};
-    width: 100%;
-
-    h2,
-    p {
-        margin: 0;
-    }
-`;
-const Title = styled.h2 `
-    font-size: ${theme.fontSize.h2M};
-    line-height: ${theme.lineHeight.h2M};
-    color: ${({ $variant }) => $variant === 'light' ? theme.color.default.black : theme.color.default.white};
-
-    @media (max-width: ${sizeMap.small}) {
-        font-size: ${theme.fontSize.h2S};
-        line-height: ${theme.lineHeight.h2S};
-    }
-`;
-const CloseButton = styled(ButtonClose) `
-    margin: 0;
-    padding: 0.5rem;
-    border-radius: 0 ${theme.radius.default} 0 ${theme.radius.default};
-    background-color: ${({ $variant }) => $variant === 'light'
-    ? theme.color.background.sand.E01
-    : theme.color.background.plum.default};
-    @media (max-width: ${sizeMap.mobile}) {
-        border-radius: 0 0 0 ${theme.radius.default};
-    }
-`;
-const Footer = styled.div `
-    position: sticky;
-    bottom: 0;
-    width: 100%;
-    margin-top: auto;
-    padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    background-color: ${theme.color.background.white.default};
-`;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const GlobalStyle = createGlobalStyle(["body.ReactModal__Body--open{overflow:hidden;}"]);
+const StyledReactModal = styled(ReactModal).withConfig({
+  displayName: "Modal__StyledReactModal",
+  componentId: "sc-hk3kl0-0"
+})(["position:relative;max-width:100vw;width:100vw;max-height:100vh;height:100vh;overflow-y:auto;", " @media (min-width:", "){max-width:", ";max-height:90%;margin:0 ", ";}@media (min-width:", "){width:90vw;max-height:60%;}@media (min-width:", "){max-width:100%;width:960px;}"], getElevationShadow({
+  elevation: 'extraHigh'
+}), sizeMap.mobile, ({
+  size
+}) => sizeMap[size], getMultipliedSize(theme.base.baseWidth, 1), sizeMap.small, sizeMap.wide);
+const StyledOverlay = styled.div.withConfig({
+  displayName: "Modal__StyledOverlay",
+  componentId: "sc-hk3kl0-1"
+})(["display:flex;justify-content:center;align-items:center;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;background-color:", "", ";animation:fadeIn 0.2s ease-in-out;@keyframes fadeIn{0%{background-color:", "", ";}100%{background-color:", "", ";}}"], theme.color.background.plum.default, theme.color.transparency.T40, theme.color.background.plum.default, theme.color.transparency.T0, theme.color.background.plum.default, theme.color.transparency.T40);
+const StyledBox = styled(Box).withConfig({
+  displayName: "Modal__StyledBox",
+  componentId: "sc-hk3kl0-2"
+})(["display:flex;flex-direction:column;height:100%;padding:0;border:none;overflow-y:auto;@media (max-width:", "){border-radius:0;}"], sizeMap.mobile);
+const StyledContent = styled.div.withConfig({
+  displayName: "Modal__StyledContent",
+  componentId: "sc-hk3kl0-3"
+})(["&:focus{outline:none;}@media (min-width:", "){border-radius:", ";}"], sizeMap.small, theme.radius.default);
+const ContentWrapper = styled.div.withConfig({
+  displayName: "Modal__ContentWrapper",
+  componentId: "sc-hk3kl0-4"
+})(["padding-top:", ";padding-left:", ";padding-bottom:", ";padding-right:", ";"], getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseWidth, 2));
+const Header = styled.div.withConfig({
+  displayName: "Modal__Header",
+  componentId: "sc-hk3kl0-5"
+})(["padding:", ";background-color:", ";width:100%;h2,p{margin:0;}"], getMultipliedSize(theme.base.baseWidth, 2), ({
+  $variant
+}) => $variant === 'dark' ? theme.color.background.plum.E02 : theme.color.background.white.default);
+const Title = styled.h2.withConfig({
+  displayName: "Modal__Title",
+  componentId: "sc-hk3kl0-6"
+})(["font-size:", ";line-height:", ";color:", ";@media (max-width:", "){font-size:", ";line-height:", ";}"], theme.fontSize.h2M, theme.lineHeight.h2M, ({
+  $variant
+}) => $variant === 'light' ? theme.color.default.black : theme.color.default.white, sizeMap.small, theme.fontSize.h2S, theme.lineHeight.h2S);
+const CloseButton = styled(ButtonClose).withConfig({
+  displayName: "Modal__CloseButton",
+  componentId: "sc-hk3kl0-7"
+})(["margin:0;padding:0.5rem;border-radius:0 ", " 0 ", ";background-color:", ";@media (max-width:", "){border-radius:0 0 0 ", ";}"], theme.radius.default, theme.radius.default, ({
+  $variant
+}) => $variant === 'light' ? theme.color.background.sand.E01 : theme.color.background.plum.default, sizeMap.mobile, theme.radius.default);
+const Footer = styled.div.withConfig({
+  displayName: "Modal__Footer",
+  componentId: "sc-hk3kl0-8"
+})(["position:sticky;bottom:0;width:100%;margin-top:auto;padding:", ";background-color:", ";"], getMultipliedSize(theme.base.baseWidth, 2), theme.color.background.white.default);
+const ModalOverlay = ({
+  ref,
+  onClick,
+  onMouseDown,
+  className
+}, contentElement) => (/*#__PURE__*/React__default.createElement(StyledOverlay, {
+  ref: ref,
+  onClick: onClick,
+  onMouseDown: onMouseDown,
+  className: className
+}, contentElement));
 const ModalContent = (_a, children) => {
-    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = __rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+  var {
+      ref,
+      tabIndex,
+      role,
+      onKeyDown,
+      onMouseDown,
+      onMouseUp,
+      onClick,
+      className
+    } = _a,
+    contentProps = __rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+  return /*#__PURE__*/React__default.createElement(StyledContent, {
+    ref: ref,
+    tabIndex: tabIndex,
+    role: role,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onClick: onClick,
+    "aria-label": contentProps['aria-label'],
+    "aria-modal": contentProps['aria-modal'],
+    className: className
+  }, children);
 };
-const Modal = (_a) => {
-    var { appElement = '#__next', size = 'medium', variant = 'light', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "variant", "closeButton", "isClosable", 'data-testid']);
-    ReactModal.setAppElement(appElement);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledReactModal, { id: props.id, size: size, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable },
-            React__default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
-                closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, "$variant": variant },
-                    React__default.createElement(Close, { color: variant === 'light'
-                            ? theme.color.default.plum
-                            : theme.color.default.white }))),
-                props.title && (React__default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
-                    React__default.createElement(Title, { "$size": size, "$variant": variant }, props.title))),
-                React__default.createElement(ContentWrapper, null, props.children),
-                props.footer && (React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
-        React__default.createElement(GlobalStyle, null)));
+const Modal = _a => {
+  var {
+      appElement = '#__next',
+      size = 'medium',
+      variant = 'light',
+      closeButton = true,
+      isClosable = true,
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["appElement", "size", "variant", "closeButton", "isClosable", 'data-testid']);
+  ReactModal.setAppElement(appElement);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledReactModal, {
+    id: props.id,
+    size: size,
+    isOpen: props.isOpen,
+    overlayElement: ModalOverlay,
+    contentElement: ModalContent,
+    onRequestClose: props.onRequestClose,
+    portalClassName: props.className,
+    contentLabel: props.contentLabel,
+    shouldCloseOnEsc: isClosable,
+    shouldCloseOnOverlayClick: isClosable
+  }, /*#__PURE__*/React__default.createElement(StyledBox, {
+    elevation: "extraHigh",
+    "data-testid": dataTestId
+  }, closeButton && isClosable && (/*#__PURE__*/React__default.createElement(CloseButton, {
+    onClick: props.onRequestClose,
+    "aria-label": props.closeLabel,
+    "data-testid": dataTestId && `${dataTestId}-close-button`,
+    "$variant": variant
+  }, /*#__PURE__*/React__default.createElement(Close, {
+    color: variant === 'light' ? theme.color.default.plum : theme.color.default.white
+  }))), props.title && (/*#__PURE__*/React__default.createElement(Header, {
+    "$variant": variant,
+    "data-testid": dataTestId && `${dataTestId}-header`
+  }, /*#__PURE__*/React__default.createElement(Title, {
+    "$size": size,
+    "$variant": variant
+  }, props.title))), /*#__PURE__*/React__default.createElement(ContentWrapper, null, props.children), props.footer && (/*#__PURE__*/React__default.createElement(Footer, {
+    "data-testid": dataTestId && `${dataTestId}-footer`
+  }, props.footer)))), /*#__PURE__*/React__default.createElement(GlobalStyle, null));
 };
 
 export { Modal as default };

package/build/es/components/Notification/Notification.js

@@ -6,61 +6,81 @@ import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
 const iconsMap = {
-    info: Info,
-    success: Check,
-    warning: Warning,
-    error: Error,
+  info: Info,
+  success: Check,
+  warning: Warning,
+  error: Error
 };
-const sharedStyles = css `
-    display: flex;
-    gap: 1rem;
-    line-height: ${theme.lineHeight.default};
-    color: ${theme.color.text.black};
-    background-color: ${theme.color.background.white.default};
-    border-radius: ${theme.radius.s};
-    border: 2px solid ${({ $type }) => theme.color.notification[$type]};
-`;
-const NotificationWrapper = styled.div `
-    ${sharedStyles}
-    border-color: ${({ $type }) => theme.color.notification[$type]};
-`;
-const StaticWrapper = styled.div `
-    ${sharedStyles}
-    border-color: ${({ $type }) => theme.color.notification[$type]};
-`;
-const IconWrapper = styled.div `
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
-    background-color: ${({ $type }) => theme.color.notification[$type]};
-`;
-const ContentWrapper = styled.div `
-    margin: auto 0;
-    padding: 0.5rem 0;
-    width: 100%;
-`;
-const ButtonCloseStyled = styled(ButtonClose) `
-    position: static;
-    margin: auto 0.5rem;
-
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-    }
-`;
-const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = false, className, children, closeButton = false, closeButtonLabel, onClickCloseButton, dismissed = false, ariaLabel, }) => {
-    if (dismissed)
-        return null;
-    const IconToUse = iconsMap[type];
-    const renderContent = () => (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(IconWrapper, { "$type": type },
-            React__default.createElement(Icon, { icon: IconToUse, size: "2rem", color: theme.color.default.white, "aria-hidden": true })),
-        React__default.createElement(ContentWrapper, null, children),
-        closeButton && (React__default.createElement(ButtonCloseStyled, { onClick: onClickCloseButton, "aria-label": closeButtonLabel },
-            React__default.createElement(Icon, { icon: Close, color: "currentColor", "aria-hidden": true })))));
-    return isStatic ? (React__default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel, role: "region" }, renderContent())) : (React__default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
+const sharedStyles = css(["display:flex;gap:1rem;line-height:", ";color:", ";background-color:", ";border-radius:", ";border:2px solid ", ";"], theme.lineHeight.default, theme.color.text.black, theme.color.background.white.default, theme.radius.s, ({
+  $type
+}) => theme.color.notification[$type]);
+const NotificationWrapper = styled.div.withConfig({
+  displayName: "Notification__NotificationWrapper",
+  componentId: "sc-1fzdznv-0"
+})(["", " border-color:", ";"], sharedStyles, ({
+  $type
+}) => theme.color.notification[$type]);
+const StaticWrapper = styled.div.withConfig({
+  displayName: "Notification__StaticWrapper",
+  componentId: "sc-1fzdznv-1"
+})(["", " border-color:", ";"], sharedStyles, ({
+  $type
+}) => theme.color.notification[$type]);
+const IconWrapper = styled.div.withConfig({
+  displayName: "Notification__IconWrapper",
+  componentId: "sc-1fzdznv-2"
+})(["display:flex;align-items:center;padding:0.5rem;background-color:", ";"], ({
+  $type
+}) => theme.color.notification[$type]);
+const ContentWrapper = styled.div.withConfig({
+  displayName: "Notification__ContentWrapper",
+  componentId: "sc-1fzdznv-3"
+})(["margin:auto 0;padding:0.5rem 0;width:100%;"]);
+const ButtonCloseStyled = styled(ButtonClose).withConfig({
+  displayName: "Notification__ButtonCloseStyled",
+  componentId: "sc-1fzdznv-4"
+})(["position:static;margin:auto 0.5rem;&:focus-visible{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}"], theme.color.focus.light, theme.color.focus.dark);
+const Notification = ({
+  type = 'info',
+  'data-testid': dataTestId,
+  isStatic = false,
+  className,
+  children,
+  closeButton = false,
+  closeButtonLabel,
+  onClickCloseButton,
+  dismissed = false,
+  ariaLabel
+}) => {
+  if (dismissed) return null;
+  const IconToUse = iconsMap[type];
+  const renderContent = () => (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconWrapper, {
+    "$type": type
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: IconToUse,
+    size: "2rem",
+    color: theme.color.default.white,
+    "aria-hidden": true
+  })), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children), closeButton && (/*#__PURE__*/React__default.createElement(ButtonCloseStyled, {
+    onClick: onClickCloseButton,
+    "aria-label": closeButtonLabel
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Close,
+    color: "currentColor",
+    "aria-hidden": true
+  })))));
+  return isStatic ? (/*#__PURE__*/React__default.createElement(StaticWrapper, {
+    "$type": type,
+    className: className,
+    "data-testid": dataTestId,
+    "aria-label": ariaLabel,
+    role: "region"
+  }, renderContent())) : (/*#__PURE__*/React__default.createElement(NotificationWrapper, {
+    "$type": type,
+    className: className,
+    "data-testid": dataTestId,
+    role: "alert"
+  }, renderContent()));
 };
 
 export { Notification as default };

package/build/es/components/NotificationBadge/NotificationBadge.js

@@ -3,43 +3,40 @@ import React__default from 'react';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 
-const NotificationBadgeElement = styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: ${theme.fontSize.xs};
-    font-weight: ${theme.fontWeight.bold};
-    position: ${({ $position }) => $position || 'absolute'};
-    top: ${({ $top }) => $top || '0'};
-    right: ${({ $right }) => $right || '0'};
-    width: 1rem;
-    height: 1rem;
-    color: ${theme.color.text.white};
-    background-color: ${theme.color.notification.error};
-    border-radius: ${theme.radius.circle};
-`;
+const NotificationBadgeElement = styled.div.withConfig({
+  displayName: "NotificationBadge__NotificationBadgeElement",
+  componentId: "sc-rd2upr-0"
+})(["display:flex;justify-content:center;align-items:center;font-size:", ";font-weight:", ";position:", ";top:", ";right:", ";width:1rem;height:1rem;color:", ";background-color:", ";border-radius:", ";"], theme.fontSize.xs, theme.fontWeight.bold, ({
+  $position
+}) => $position || 'absolute', ({
+  $top
+}) => $top || '0', ({
+  $right
+}) => $right || '0', theme.color.text.white, theme.color.notification.error, theme.radius.circle);
 /**
  * TODO: Replace the VisuallyHidden styled component with the global class name.
  * Ticket: https://jira.dna.fi/browse/STYLE-916
  */
-const VisuallyHidden = styled.span `
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-`;
+const VisuallyHidden = styled.span.withConfig({
+  displayName: "NotificationBadge__VisuallyHidden",
+  componentId: "sc-rd2upr-1"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;"]);
 /** @visibleName Notification Badge */
-const NotificationBadge = (_a) => {
-    var { 'data-testid': dataTestId, visuallyHiddenText } = _a, props = __rest(_a, ['data-testid', "visuallyHiddenText"]);
-    return (React__default.createElement(React__default.Fragment, null,
-        visuallyHiddenText && React__default.createElement(VisuallyHidden, null, visuallyHiddenText),
-        React__default.createElement(NotificationBadgeElement, { id: props.id, "$position": props.position, "$top": props.top, "$right": props.right, className: props.className, "data-testid": dataTestId, "aria-hidden": "true" }, props.children)));
+const NotificationBadge = _a => {
+  var {
+      'data-testid': dataTestId,
+      visuallyHiddenText
+    } = _a,
+    props = __rest(_a, ['data-testid', "visuallyHiddenText"]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, visuallyHiddenText && /*#__PURE__*/React__default.createElement(VisuallyHidden, null, visuallyHiddenText), /*#__PURE__*/React__default.createElement(NotificationBadgeElement, {
+    id: props.id,
+    "$position": props.position,
+    "$top": props.top,
+    "$right": props.right,
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-hidden": "true"
+  }, props.children));
 };
 
 export { NotificationBadge as default };

package/build/es/components/Overlay/Overlay.js

@@ -4,76 +4,78 @@ import { createPortal } from 'react-dom';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 
-const Element = styled.div `
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
-    animation: fadeIn 0.2s ease-in-out;
-
-    @keyframes fadeIn {
-        0% {
-            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T0};
-        }
-
-        100% {
-            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
-        }
-    }
-`;
+const Element = styled.div.withConfig({
+  displayName: "Overlay__Element",
+  componentId: "sc-vgn95v-0"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;background-color:", "", ";animation:fadeIn 0.2s ease-in-out;@keyframes fadeIn{0%{background-color:", "", ";}100%{background-color:", "", ";}}"], theme.color.background.plum.default, theme.color.transparency.T40, theme.color.background.plum.default, theme.color.transparency.T0, theme.color.background.plum.default, theme.color.transparency.T40);
 /** @visibleName Overlay */
-const Overlay = (_a) => {
-    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId, as = 'section', role, isFocusTrapped = true } = _a, props = __rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
-    const contentRef = useRef(null);
-    const portalContainer = portalContainerSelector
-        ? document.querySelector(portalContainerSelector)
-        : null;
-    const appElement = document.querySelector(appElementSelector);
-    const overlayElement = (React__default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId, onKeyDown: props.onKeyDown, "aria-label": props.ariaLabel, as: as, role: as === 'div' ? role : undefined },
-        React__default.createElement("div", { ref: contentRef, tabIndex: -1, "data-testid": dataTestId ? `${dataTestId}-content` : '' }, props.children)));
-    useEffect(() => {
-        if (preventBodyScroll) {
-            document.body.style.setProperty('overflow', 'hidden');
-            document.body.style.setProperty('position', 'relative');
-            document.body.style.setProperty('top', '0');
-            document.body.style.setProperty('left', '0');
-            return () => {
-                document.body.style.removeProperty('overflow');
-            };
-        }
-        return undefined;
-    }, [preventBodyScroll]);
-    useEffect(() => {
+const Overlay = _a => {
+  var {
+      portalContainer: portalContainerSelector = 'body',
+      appElement: appElementSelector = '#__next',
+      preventBodyScroll = true,
+      'data-testid': dataTestId,
+      as = 'section',
+      role,
+      isFocusTrapped = true
+    } = _a,
+    props = __rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
+  const contentRef = useRef(null);
+  const portalContainer = portalContainerSelector ? document.querySelector(portalContainerSelector) : null;
+  const appElement = document.querySelector(appElementSelector);
+  const overlayElement = /*#__PURE__*/React__default.createElement(Element, {
+    id: props.id,
+    onClick: props.onClick,
+    className: props.className,
+    "data-testid": dataTestId,
+    onKeyDown: props.onKeyDown,
+    "aria-label": props.ariaLabel,
+    as: as,
+    role: as === 'div' ? role : undefined
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    tabIndex: -1,
+    "data-testid": dataTestId ? `${dataTestId}-content` : ''
+  }, props.children));
+  useEffect(() => {
+    if (preventBodyScroll) {
+      document.body.style.setProperty('overflow', 'hidden');
+      document.body.style.setProperty('position', 'relative');
+      document.body.style.setProperty('top', '0');
+      document.body.style.setProperty('left', '0');
+      return () => {
+        document.body.style.removeProperty('overflow');
+      };
+    }
+    return undefined;
+  }, [preventBodyScroll]);
+  useEffect(() => {
+    var _a;
+    if (appElement) {
+      const focusTrapStart = document.createElement('div');
+      focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
+      focusTrapStart.addEventListener('focus', () => {
+        var _a;
+        (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+      const focusTrapEnd = focusTrapStart.cloneNode();
+      focusTrapEnd.addEventListener('focus', () => {
         var _a;
-        if (appElement) {
-            const focusTrapStart = document.createElement('div');
-            focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
-            focusTrapStart.addEventListener('focus', () => {
-                var _a;
-                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-            const focusTrapEnd = focusTrapStart.cloneNode();
-            focusTrapEnd.addEventListener('focus', () => {
-                var _a;
-                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-            (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            document.body.prepend(focusTrapStart);
-            document.body.append(focusTrapEnd);
-            appElement.setAttribute('inert', 'true');
-            return () => {
-                document.body.removeChild(focusTrapStart);
-                document.body.removeChild(focusTrapEnd);
-                appElement.removeAttribute('inert');
-            };
-        }
-        return undefined;
-    }, [appElement, contentRef, isFocusTrapped]);
-    return portalContainerSelector === false
-        ? overlayElement
-        : createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+        (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+      (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      document.body.prepend(focusTrapStart);
+      document.body.append(focusTrapEnd);
+      appElement.setAttribute('inert', 'true');
+      return () => {
+        document.body.removeChild(focusTrapStart);
+        document.body.removeChild(focusTrapEnd);
+        appElement.removeAttribute('inert');
+      };
+    }
+    return undefined;
+  }, [appElement, contentRef, isFocusTrapped]);
+  return portalContainerSelector === false ? overlayElement : /*#__PURE__*/createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 };
 
 export { Overlay as default };