@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/cjs/components/Modal/Modal.js

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

package/build/cjs/components/Notification/Notification.js

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

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -11,43 +11,40 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const NotificationBadgeElement = styledComponents.styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: ${theme.default.fontSize.xs};
-    font-weight: ${theme.default.fontWeight.bold};
-    position: ${({ $position }) => $position || 'absolute'};
-    top: ${({ $top }) => $top || '0'};
-    right: ${({ $right }) => $right || '0'};
-    width: 1rem;
-    height: 1rem;
-    color: ${theme.default.color.text.white};
-    background-color: ${theme.default.color.notification.error};
-    border-radius: ${theme.default.radius.circle};
-`;
+const NotificationBadgeElement = styledComponents.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.default.fontSize.xs, theme.default.fontWeight.bold, ({
+  $position
+}) => $position || 'absolute', ({
+  $top
+}) => $top || '0', ({
+  $right
+}) => $right || '0', theme.default.color.text.white, theme.default.color.notification.error, theme.default.radius.circle);
 /**
  * TODO: Replace the VisuallyHidden styled component with the global class name.
  * Ticket: https://jira.dna.fi/browse/STYLE-916
  */
-const VisuallyHidden = styledComponents.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 = styledComponents.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 = tslib.__rest(_a, ['data-testid', "visuallyHiddenText"]);
-    return (React__default.default.createElement(React__default.default.Fragment, null,
-        visuallyHiddenText && React__default.default.createElement(VisuallyHidden, null, visuallyHiddenText),
-        React__default.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 = tslib.__rest(_a, ['data-testid', "visuallyHiddenText"]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, visuallyHiddenText && /*#__PURE__*/React__default.default.createElement(VisuallyHidden, null, visuallyHiddenText), /*#__PURE__*/React__default.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));
 };
 
 exports.default = NotificationBadge;