@ndla/ui 8.2.4 → 9.0.1

package/src/Notion/Notion.tsx

@@ -5,17 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
+import React, { Fragment, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { parseMarkdown } from '@ndla/util';
-import React, { Fragment, ReactNode } from 'react';
-import { keyframes } from '@emotion/core';
-import Button from '@ndla/button';
-import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { CursorClick } from '@ndla/icons/action';
-import { Play, ArrowCollapse } from '@ndla/icons/common';
-import { ImageCrop, ImageFocalPoint, makeSrcQueryString } from '../Image';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const NotionContainer = styled.div``;
 
@@ -26,11 +20,7 @@ const ContentWrapper = styled.div`
   }
   .c-figure {
     margin: 0;
-    position: relative !important;
-    left: 0 !important;
-    width: 25% !important;
     padding: 0 0 0 20px;
-    float: right;
     &.expanded {
       width: 100% !important;
       padding: 0;
@@ -44,114 +34,21 @@ const ContentWrapper = styled.div`
 `;
 const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
   width: ${(props) => (props.hasVisualElement ? '75%' : '100%')};
+
   ${mq.range({ until: breakpoints.tabletWide })} {
     width: 100%;
   }
-  font-family: ${fonts.serif};
+  font-family: ${fonts.sans};
   ${fonts.sizes('18px', '28px')};
   ${ContentWrapper} .c-figure.expanded + & {
     width: 100%;
   }
 `;
 
-const ImageElement = styled.img``;
-
-const fadeInMediaKeyframe = keyframes`
-  0% {
-    opacity: 0;
-    height: auto;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-const fadeOutMediaKeyframe = keyframes`
-  0% {
-    opacity: 1;
-    height: auto;
-  }
-  100% {
-    opacity: 0;
-    height:0;
-    overflow: hidden;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  float: right;
-  width: 25%;
-  padding-left: ${spacing.normal};
-  position: relative;
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    width: 100%;
-    padding-left: 0;
-  }
-`;
-
-const ExpandVisualElementButton = styled(Button)`
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  transition: all ${animations.durations.normal};
-  &,
-  &:focus,
-  &:active {
-    background-color: rgba(255, 255, 255, 0.65);
-  }
-
-  color: ${colors.brand.primary};
-  border-radius: 50%;
-  border: 0;
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  svg {
-    transition: transform ${animations.durations.normal} ease-out;
-  }
-  ${ContentWrapper}:hover & {
-    background-color: #fff;
-    svg {
-      transform: scale(1.2);
-    }
-  }
-`;
-
-const ExpandIcon = styled.span`
-  ${ExpandVisualElementButton}.expanded & {
-    display: none;
-  }
-`;
-const CollapseIcon = styled.span`
-  display: none;
-  ${ExpandVisualElementButton}.expanded & {
-    display: inline-block;
-  }
-`;
-
 const ClearWrapper = styled.div`
   clear: both;
 `;
 
-const MediaContainer = styled.div`
-  opacity: 0;
-  height: 0;
-  overflow: hidden;
-  &.expanded {
-    animation-name: ${fadeInMediaKeyframe};
-    animation-duration: 2.8s;
-    opacity: 1;
-    height: auto;
-  }
-  &.fadeOut {
-    animation-name: ${fadeOutMediaKeyframe};
-    animation-duration: 2.8s;
-  }
-`;
-
 const LabelsContainer = styled.div`
   display: flex;
   align-items: center;
@@ -160,23 +57,12 @@ const LabelsContainer = styled.div`
   margin: ${spacing.small} 0;
 `;
 
-type VisualElementProps = {
-  type: 'video' | 'other';
-  element: ReactNode;
-  metaImage?: {
-    url: string;
-    alt: string;
-    crop?: ImageCrop;
-    focalPoint?: ImageFocalPoint;
-  };
-};
-
 export type NotionProps = {
   id: string | number;
   labels?: string[];
   text: ReactNode;
   title: string;
-  visualElement?: VisualElementProps;
+  visualElement: ReactNode;
   imageElement?: ReactNode;
   children?: ReactNode;
 };
@@ -186,34 +72,10 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
 
   return (
     <NotionContainer>
-      {visualElement && <MediaContainer id={`notion-media-${id}`}>{visualElement.element}</MediaContainer>}
       <ContentWrapper>
         {imageElement}
-        {visualElement && visualElement.metaImage && (
-          <ImageWrapper>
-            <ImageElement
-              src={`${visualElement.metaImage.url}?${makeSrcQueryString(
-                400,
-                visualElement.metaImage.crop,
-                visualElement.metaImage.focalPoint,
-              )}`}
-              alt={visualElement.metaImage.alt}
-            />
-            <ExpandVisualElementButton
-              stripped
-              data-notion-expand-media={true}
-              data-notion-media-id={`notion-media-${id}`}>
-              <ExpandIcon>
-                {visualElement.type === 'video' && <Play style={{ width: '24px', height: '24px' }} />}
-                {visualElement.type === 'other' && <CursorClick style={{ width: '24px', height: '24px' }} />}
-              </ExpandIcon>
-              <CollapseIcon>
-                <ArrowCollapse style={{ width: '24px', height: '24px' }} />
-              </CollapseIcon>
-            </ExpandVisualElementButton>
-          </ImageWrapper>
-        )}
-        <TextWrapper hasVisualElement={!!(imageElement || visualElement?.metaImage)}>
+        {visualElement}
+        <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
           {parseMarkdown(`**${title}** \u2013 ${text}`, 'body')}
           {!!labels.length && (
             <LabelsContainer>

package/src/Notion/NotionImage.tsx

@@ -6,17 +6,44 @@
  */
 
 import React from 'react';
+import styled from '@emotion/styled';
+import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { Image, FigureExpandButton } from '..';
+import { Image, FigureOpenDialogButton } from '..';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
+
+const StyledImageWrapper = styled.div`
+  overflow: hidden;
+  width: 260px;
+  padding-top: ${spacing.small};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin: 0 auto;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  object-fit: cover;
+  max-height: 162px;
+  transition: transform ${animations.durations.fast};
+  &:hover {
+    transform: scale(1.1);
+    opacity: 1.1;
+    transition-duration: 0.5s;
+  }
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    min-width: 260px;
+  }
+`;
+
 interface Props {
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
   id: string;
   src: string;
   alt: string;
   imageCopyright?: Partial<Copyright>;
 }
-export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
+export const NotionImage = ({ id, src, alt, imageCopyright, type }: Props) => {
   const { t } = useTranslation();
 
   const imageId = `image-${id}`;
@@ -32,19 +59,21 @@ export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
       licenseString={imageCopyright?.license?.license ?? ''}
       type={'image'}>
       {({ typeClass }) => (
-        <Image
-          alt={alt}
-          src={src}
-          expandButton={
-            <FigureExpandButton
-              typeClass={typeClass}
-              messages={{
-                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
-                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
-              }}
-            />
-          }
-        />
+        <StyledImageWrapper>
+          <StyledImage
+            alt={alt}
+            src={src}
+            expandButton={
+              <FigureOpenDialogButton
+                type={type}
+                messages={{
+                  zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+                  zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+                }}
+              />
+            }
+          />
+        </StyledImageWrapper>
       )}
     </FigureNotion>
   );

package/src/Notion/NotionVisualElement.tsx

@@ -4,12 +4,24 @@
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree. *
  */
-
-import React from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import React, { ReactNode } from 'react';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
 
+const StyledIframe = styled.iframe<{ type: string }>`
+  ${(props) =>
+    props.type === 'video'
+      ? css`
+          min-height: 400px;
+        `
+      : ''}
+`;
+
 export type NotionVisualElementType = {
+  element?: ReactNode;
+  type?: 'video' | 'image' | 'h5p';
   resource?: string;
   title?: string;
   url?: string;
@@ -22,17 +34,28 @@ export type NotionVisualElementType = {
 
 interface Props {
   visualElement: NotionVisualElementType;
+  id: string;
+  figureId: string;
 }
+const supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external', 'image'];
 
-const supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external'];
-const NotionVisualElement = ({ visualElement }: Props) => {
-  const id = '1';
-  const figureId = 'figure-1';
+const getType = (resource: string) => {
+  if (resource === 'brightcove') {
+    return 'video';
+  }
+  if (resource === 'image') {
+    return 'image';
+  }
+  return 'h5p';
+};
+
+const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
   if (!visualElement.resource || !supportedEmbedTypes.includes(visualElement.resource)) {
     return <p>Embed type is not supported!</p>;
   }
 
-  const type = visualElement.resource === 'brightcove' ? 'video' : 'h5p';
+  const type = getType(visualElement.resource);
+
   return (
     <FigureNotion
       resizeIframe
@@ -42,7 +65,11 @@ const NotionVisualElement = ({ visualElement }: Props) => {
       copyright={visualElement.copyright}
       licenseString={visualElement.copyright?.license?.license ?? ''}
       type={type}>
-      <iframe title={visualElement.title} src={visualElement.url} />
+      {visualElement.image?.src ? (
+        <img src={visualElement.image?.src} alt={visualElement.image.alt} />
+      ) : (
+        <StyledIframe type={type} src={visualElement.url} title={visualElement.title} />
+      )}
     </FigureNotion>
   );
 };

package/src/ResourceBox/ResourceBox.tsx

@@ -15,124 +15,75 @@ import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import Image from '../Image';
 
-const BoxWrapper = styled.div`
+const ResourceBoxContainer = styled.div`
   display: flex;
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding: 20px;
   border-radius: 5px;
   border: 1px solid ${colors.brand.light};
   position: relative;
-  left: -16.6666666667%;
-  width: 133.3333333333%;
-  align-items: stretch;
-  margin-bottom: 24px;
   font-family: ${fonts.sans};
   box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
   gap: 40px;
 
   ${mq.range({ until: breakpoints.desktop })} {
-    gap: 1px;
+    gap: 0;
     flex-direction: column;
-    margin: 0 auto;
-    width: 80%;
-    left: 0;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-bottom: 0;
-    margin-bottom: 24px;
-    height: auto;
+    padding-top: 30px;
     text-align: center;
   }
 `;
 
-const Boxtitle = styled.h3`
+const Title = styled.h3`
   font-weight: ${fonts.weight.bold};
   font-size: ${fonts.sizes(18)};
   margin-top: 0;
-  ${mq.range({ until: breakpoints.desktop })} {
-    text-align: center;
-    width: 100%;
-  }
 `;
 
-const Boxcaption = styled.p`
+const Caption = styled.p`
   font-size: ${fonts.sizes(14)};
+  max-width: 600px;
 
   ${mq.range({ until: breakpoints.desktop })} {
     line-height: 22px;
   }
 `;
 
-const StyledButtonDiv = styled.div`
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
   ${mq.range({ until: breakpoints.desktop })} {
-    padding-bottom: 10px;
-    margin: 0 auto;
+    align-items: center;
+    padding-top: 10px;
   }
 `;
-const ResourceBoxStyledButton = styled(SafeLinkButton)`
+
+const StyledButton = styled(SafeLinkButton)`
   border: 1px solid ${colors.brand.tertiary};
   :hover {
     background-color: ${colors.brand.primary};
+    border: 1px solid ${colors.brand.primary};
     color: white;
   }
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 210px;
-  }
 `;
-const ResourceBoxLaunchIcon = styled(Launch)`
+
+const StyledLaunchIcon = styled(Launch)`
   margin-left: 8px;
   height: 15px;
   width: 15px;
 `;
 
-const BoxImage = styled(Image)`
-  object-fit: cover;
-  width: 134px;
-  height: 134px;
-  border-radius: 5px;
-
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 200px;
-    height: 200px;
-  }
-`;
-const ImageSectionWrapper = styled.div`
-  align-items: flex-start;
-  display: flex;
-  justify-content: center;
-  margin-left: 20px;
-  ${mq.range({ until: breakpoints.desktop })} {
-    margin: 0 auto;
-    padding-top: 10px;
-  }
-`;
-
-const CaptionSectionWrapper = styled.div`
-  max-width: 600px;
-  ${mq.range({ until: breakpoints.desktop })} {
-    margin: 0 auto;
-  }
-`;
-
-const CenterItems = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-flow: column;
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 100%;
-  }
-`;
+const ImageWrapper = styled.div`
+  img {
+    object-fit: cover;
+    width: 134px;
+    height: 134px;
+    border-radius: 5px;
 
-const TitleAndLicence = styled.div`
-  display: flex;
-  justify-content: space-between;
-  ${mq.range({ until: breakpoints.desktop })} {
-    text-align: center;
-    padding-top: 10px;
-    max-width: 200px;
-    margin: 0 auto;
+    ${mq.range({ until: breakpoints.desktop })} {
+      width: 200px;
+      height: 200px;
+    }
   }
 `;
 
@@ -157,33 +108,27 @@ type Props = {
 export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
   const { t } = useTranslation();
   return (
-    <BoxWrapper>
-      <ImageSectionWrapper>
-        <BoxImage alt={title} src={image} sizes="25, 25" />
-      </ImageSectionWrapper>
-      <CenterItems>
-        <CaptionSectionWrapper>
-          <TitleAndLicence>
-            <Boxtitle>{title}</Boxtitle>
-            <LincenseWrapper>
-              <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-                <div className="c-figure__byline-author-buttons">
-                  <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
-                </div>
-              </LicenseByline>
-            </LincenseWrapper>
-          </TitleAndLicence>
-          <Boxcaption>{caption}</Boxcaption>
-        </CaptionSectionWrapper>
+    <ResourceBoxContainer>
+      <LincenseWrapper>
+        <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
+          <div className="c-figure__byline-author-buttons">
+            <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
+          </div>
+        </LicenseByline>
+      </LincenseWrapper>
+      <ImageWrapper>
+        <Image alt={title} src={image} />
+      </ImageWrapper>
+      <TextWrapper>
+        <Title>{title}</Title>
+        <Caption>{caption}</Caption>
 
-        <StyledButtonDiv>
-          <ResourceBoxStyledButton to={url} target="_blank" outline borderShape="rounded">
-            {t('license.other.itemImage.ariaLabel')}
-            <ResourceBoxLaunchIcon aria-hidden />
-          </ResourceBoxStyledButton>
-        </StyledButtonDiv>
-      </CenterItems>
-    </BoxWrapper>
+        <StyledButton to={url} target="_blank" outline borderShape="rounded">
+          {t('license.other.itemImage.ariaLabel')}
+          <StyledLaunchIcon aria-hidden />
+        </StyledButton>
+      </TextWrapper>
+    </ResourceBoxContainer>
   );
 };
 

package/src/Topic/Topic.tsx

@@ -277,7 +277,7 @@ const Topic = ({
                             <ShowVisualElementWrapper>
                               <TopicHeaderImage
                                 src={`${topic.image.url}?${makeSrcQueryString(
-                                  400,
+                                  800,
                                   topic.image.crop,
                                   topic.image.focalPoint,
                                 )}`}

package/src/index.ts

@@ -81,7 +81,7 @@ export {
 
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
 
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
 
 export { LanguageSelector } from './LanguageSelector';
 
@@ -119,7 +119,6 @@ export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
 export { ResourceBox } from './ResourceBox';
 
-export { default as CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
@@ -220,4 +219,5 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
+
 export { BannerCard } from './BannerCard';

package/src/locale/messages-en.ts

@@ -413,7 +413,7 @@ const messages = {
       images: 'Images',
       audio: 'Audio',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Files',
       embedlink: 'Embedded link',
       other: 'Other content',

package/src/locale/messages-nb.ts

@@ -426,7 +426,7 @@ const messages = {
       images: 'Bilder',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',

package/src/locale/messages-nn.ts

@@ -427,7 +427,7 @@ const messages = {
       images: 'Bilete',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       other: 'Anna innhald',

package/es/CloseButton/CloseButton.js

@@ -1,46 +0,0 @@
-import _styled from "@emotion/styled-base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import React from 'react';
-import { Cross } from '@ndla/icons/action';
-import { useTranslation } from 'react-i18next';
-import { colors } from '@ndla/core';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-
-var StyledButton = _styled("button", {
-  target: "e4bzt4x0",
-  label: "StyledButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1x6nvfn",
-  styles: "background-color:transparent;border:none;display:flex;cursor:pointer;"
-} : {
-  name: "1x6nvfn",
-  styles: "background-color:transparent;border:none;display:flex;cursor:pointer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNsb3NlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFha0MiLCJmaWxlIjoiQ2xvc2VCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuaW1wb3J0IFJlYWN0LCB7IEJ1dHRvbkhUTUxBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ3Jvc3MgfSBmcm9tICdAbmRsYS9pY29ucy9hY3Rpb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYm9yZGVyOiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZWRDcm9zcyA9IHN0eWxlZChDcm9zcylgXG4gIGhlaWdodDogMjRweDtcbiAgd2lkdGg6IDI0cHg7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENsb3NlQnV0dG9uID0gKHByb3BzOiBCdXR0b25IVE1MQXR0cmlidXRlczxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRCdXR0b24gYXJpYS1sYWJlbD17dCgnY2xvc2UnKX0gey4uLnByb3BzfT5cbiAgICAgIDxTdHlsZWRDcm9zcyAvPlxuICAgIDwvU3R5bGVkQnV0dG9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2xvc2VCdXR0b247XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-var StyledCross = /*#__PURE__*/_styled(Cross, {
-  target: "e4bzt4x1",
-  label: "StyledCross"
-})("height:24px;width:24px;color:", colors.text.primary, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNsb3NlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmlDIiwiZmlsZSI6IkNsb3NlQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cbmltcG9ydCBSZWFjdCwgeyBCdXR0b25IVE1MQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENyb3NzIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgU3R5bGVkQ3Jvc3MgPSBzdHlsZWQoQ3Jvc3MpYFxuICBoZWlnaHQ6IDI0cHg7XG4gIHdpZHRoOiAyNHB4O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDbG9zZUJ1dHRvbiA9IChwcm9wczogQnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQnV0dG9uIGFyaWEtbGFiZWw9e3QoJ2Nsb3NlJyl9IHsuLi5wcm9wc30+XG4gICAgICA8U3R5bGVkQ3Jvc3MgLz5cbiAgICA8L1N0eWxlZEJ1dHRvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENsb3NlQnV0dG9uO1xuIl19 */"));
-
-export var CloseButton = function CloseButton(props) {
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  return ___EmotionJSX(StyledButton, _extends({
-    "aria-label": t('close')
-  }, props), ___EmotionJSX(StyledCross, null));
-};
-export default CloseButton;