@ndla/ui 22.1.0 → 23.0.0

package/lib/locale/messages-en.d.ts

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             logout: string;
             loginTerms: string;

package/lib/locale/messages-en.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detailed listview',
     shortView: 'Short view',
     myPage: {
+      confirmDeleteAccount: 'Are you sure you want to delete your account?',
+      confirmDeleteAccountButton: 'Delete account',
       myPage: 'My page',
       logout: 'Log out of My NDLA',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',

package/lib/locale/messages-nb.d.ts

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-nb.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/lib/locale/messages-nn.d.ts

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-nn.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/lib/locale/messages-se.d.ts

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-se.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/lib/locale/messages-sma.d.ts

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-sma.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.1.0",
+  "version": "23.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,21 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.2.1",
-    "@ndla/carousel": "^1.2.15",
-    "@ndla/core": "^2.3.3",
-    "@ndla/forms": "^3.1.3",
-    "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.11.3",
-    "@ndla/licenses": "^5.0.6",
-    "@ndla/modal": "^1.2.17",
-    "@ndla/notion": "^3.1.28",
-    "@ndla/safelink": "^2.2.5",
-    "@ndla/switch": "^0.1.10",
-    "@ndla/tabs": "^1.1.14",
-    "@ndla/tooltip": "^2.1.5",
+    "@ndla/article-scripts": "^3.0.1",
+    "@ndla/button": "^3.3.1",
+    "@ndla/carousel": "^1.2.16",
+    "@ndla/core": "^2.3.4",
+    "@ndla/forms": "^3.1.4",
+    "@ndla/hooks": "^1.1.5",
+    "@ndla/icons": "^1.11.4",
+    "@ndla/licenses": "^5.0.7",
+    "@ndla/modal": "^1.2.18",
+    "@ndla/notion": "^3.1.30",
+    "@ndla/safelink": "^2.2.7",
+    "@ndla/switch": "^0.1.11",
+    "@ndla/tabs": "^1.1.15",
+    "@ndla/tooltip": "^2.1.6",
     "@ndla/types-learningpath-api": "^0.0.12",
-    "@ndla/util": "^3.0.0",
+    "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -84,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f4d197d1841b544f533371350b6c23ebce94012f"
+  "gitHead": "2f0095b2f2c730ff16d8c71fa8e867db87607c66"
 }

package/src/Animation/DisplayOnPageYOffset.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 import Fade from './Fade';
 
 interface Props {

package/src/Article/Article.tsx

@@ -8,7 +8,7 @@
 
 import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
-import isString from 'lodash/isString';
+import { isString } from 'lodash';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 

package/src/Article/ArticleByline.tsx

@@ -13,8 +13,7 @@ import Button, { CopyButton } from '@ndla/button';
 import { colors, fonts, spacing } from '@ndla/core';
 import { copyTextToClipboard, printPage } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
-import { LicenseByline } from '@ndla/licenses';
-import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline, getLicenseByAbbreviation } from '@ndla/licenses';
 import { TFunction } from 'i18next';
 
 const Wrapper = styled.div`

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -11,8 +11,7 @@ import { colors, fonts, spacing } from '@ndla/core';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import React from 'react';
-import { MenuButton } from '@ndla/button';
-import { MenuItemProps } from '@ndla/button';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Breadcrumb from './Breadcrumb';
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 

package/src/Figure/FigureOpenDialogButton.tsx

@@ -8,8 +8,7 @@
 
 import React from 'react';
 import { Play } from '@ndla/icons/common';
-import { ExpandTwoArrows } from '@ndla/icons/action';
-import { CursorClick } from '@ndla/icons/action';
+import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
 
 interface Props {
   type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';

package/src/Filter/FilterListPhone.jsx

@@ -12,7 +12,7 @@ import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { classes } from './filterClasses';
 import ToggleItem from './ToggleItem';
 import ActiveFilters from '../Search/ActiveFilters';

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
-import { fonts } from '@ndla/core';
-import { breakpoints, mq } from '@ndla/core';
+import { fonts, breakpoints, mq } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import NavigationBox, { ItemProps } from '../Navigation/NavigationBox';
 import FrontpageAllSubjects, { subjectsProps } from './FrontpageAllSubjects';

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -10,7 +10,7 @@ import React, { Fragment, RefObject, useEffect, useRef, useState } from 'react';
 import { isIE, browserVersion } from 'react-device-detect';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { makeSrcQueryString } from '../Image';

package/src/ResourceBox/ResourceBox.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Launch } from '@ndla/icons/common';
-import { LicenseByline } from '@ndla/licenses';
 import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import Image from '../Image';
@@ -81,12 +80,6 @@ const StyledImage = styled(Image)`
   }
 `;
 
-const LincenseWrapper = styled.div`
-  position: absolute;
-  top: 9px;
-  right: 0;
-`;
-
 interface ImageMeta {
   src: string;
   alt: string;
@@ -96,25 +89,13 @@ interface Props {
   image: ImageMeta;
   title: string;
   caption: string;
-  licenseRights: string[];
-  authors?: string[];
-  locale?: string;
   url: string;
 }
 
-export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
+export const ResourceBox = ({ image, title, caption, url }: Props) => {
   const { t } = useTranslation();
   return (
     <ResourceBoxContainer>
-      <LincenseWrapper>
-        <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-          {authors && authors.length > 0 && (
-            <div className="c-figure__byline-author-buttons">
-              <span className="c-figure__byline-authors">{authors.join(' ')}</span>
-            </div>
-          )}
-        </LicenseByline>
-      </LincenseWrapper>
       <StyledImage src={image.src} alt={image.alt} />
       <ContentWrapper>
         <Title>{title}</Title>

package/src/ResourceGroup/ResourceItem.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { keyframes } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';

package/src/ResourceGroup/ResourceList.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { keyframes } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';

package/src/Search/ActiveFilters.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';

package/src/Search/SearchPage.jsx

@@ -2,7 +2,7 @@ import React, { Component, Fragment, createRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import PropTypes from 'prop-types';
 import { Back } from '@ndla/icons/common';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { getCurrentBreakpoint, breakpoints } from '@ndla/util';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -9,7 +9,7 @@
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import css from '@emotion/css';
+import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
 import Button from '@ndla/button';

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -7,9 +7,8 @@
  */
 import React, { FormEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
 import { Search as SearchIcon } from '@ndla/icons/common';
-import { spacing } from '@ndla/core';
+import { spacing, colors } from '@ndla/core';
 import { Cross as CrossIcon } from '@ndla/icons/action';
 
 import { useTranslation } from 'react-i18next';

package/src/TopicMenu/TopicMenu.jsx

@@ -12,7 +12,7 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 
 import { Home, Back, Additional, ChevronRight } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';

package/src/TreeStructure/FolderItem.tsx

@@ -49,19 +49,22 @@ const WrapperForFolderChild = styled.div`
   gap: ${spacing.xsmall};
 `;
 
-const shouldForwardProp = (name: string) => !['selected', 'noArrow'].includes(name);
+const shouldForwardProp = (name: string) => !['selected', 'noArrow', 'fullWidth'].includes(name);
 
 interface FolderNameProps {
   selected?: boolean;
   noArrow?: boolean;
+  fullWidth?: boolean;
 }
 
 const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
   cursor: pointer;
   padding: ${spacing.xsmall};
   margin: 0;
+  outline-offset: -2px;
+  outline-color: ${colors.brand.primary};
   margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
-  flex-grow: 1;
+  flex-grow: ${({ fullWidth }) => fullWidth && 1};
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -116,6 +119,7 @@ const FolderItem = ({
   setSelectedFolder,
   targetResource,
   visibleFolders,
+  framed,
 }: Props) => {
   const { t } = useTranslation();
   const { id, icon, name } = folder;
@@ -173,6 +177,7 @@ const FolderItem = ({
       {onSelectFolder ? (
         <>
           <FolderName
+            fullWidth={framed}
             ref={ref}
             onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}

package/src/TreeStructure/TreeStructure.tsx

@@ -34,7 +34,6 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
   folders: FolderType[];
   editable?: boolean;
-  framed?: boolean;
   label?: string;
   maximumLevelsOfFoldersAllowed?: number;
   onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
@@ -118,6 +117,7 @@ const TreeStructure = ({
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
         setSelectedFolder(newFolder);
+        onSelectFolder?.(newFolder.id);
         setFocusedId(newFolder.id);
         setOpenFolders(uniq(openFolders.concat(parentId)));
       }
@@ -156,6 +156,7 @@ const TreeStructure = ({
           setSelectedFolder={setSelectedFolder}
           targetResource={targetResource}
           visibleFolders={visibleFolderIds}
+          framed={framed}
         />
       </TreeStructureStyledWrapper>
       {editable && (

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -13,18 +13,15 @@ import { colors, misc, spacing } from '@ndla/core';
 const TreeStructureWrapper = styled.div<{ framed?: boolean }>`
   padding: ${spacing.xsmall};
   ${({ framed }) =>
-    framed
-      ? css`
-          border: 1px solid ${colors.brand.neutral7};
-          border-radius: ${misc.borderRadius};
-          max-height: 400px;
-          overflow-y: scroll;
-          scroll-behavior: smooth;
-          padding: ${spacing.small};
-        `
-      : css`
-          margin-left: -${spacing.medium};
-        `}
+    framed &&
+    css`
+      border: 1px solid ${colors.brand.neutral7};
+      border-radius: ${misc.borderRadius};
+      max-height: 400px;
+      overflow-y: scroll;
+      scroll-behavior: smooth;
+      padding: ${spacing.small};
+    `}
   transition: ${misc.transition.default};
   &:focus-within {
     border-color: ${colors.brand.primary};

package/src/TreeStructure/types.ts

@@ -24,6 +24,7 @@ export interface CommonTreeStructureProps {
   openOnFolderClick?: boolean;
   menuItems?: TreeStructureMenuProps[];
   targetResource?: IResource;
+  framed?: boolean;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {

package/src/locale/messages-en.ts

@@ -1025,6 +1025,8 @@ const messages = {
     detailView: 'Detailed listview',
     shortView: 'Short view',
     myPage: {
+      confirmDeleteAccount: 'Are you sure you want to delete your account?',
+      confirmDeleteAccountButton: 'Delete account',
       myPage: 'My page',
       logout: 'Log out of My NDLA',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',

package/src/locale/messages-nb.ts

@@ -1023,6 +1023,8 @@ const messages = {
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/src/locale/messages-nn.ts

@@ -1024,6 +1024,8 @@ const messages = {
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/src/locale/messages-se.ts

@@ -1023,6 +1023,8 @@ const messages = {
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/src/locale/messages-sma.ts

@@ -1023,6 +1023,8 @@ const messages = {
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     myPage: {
+      confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
+      confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',

package/src/main.scss

@@ -16,7 +16,6 @@
 @import 'Aside/component.aside';
 @import 'Article/component.footnotes';
 @import 'NoContentBox/component.no-content-box.scss';
-@import 'BackgroundImage/component.background-image';
 @import 'Portrait/component.portrait.scss';
 @import 'global/components/component.logo';
 @import 'MediaList/component.medialist';

package/es/BackgroundImage/BackgroundImage.js

@@ -1,27 +0,0 @@
-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); }
-
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = BEMHelper('c-background-image');
-
-var BackgroundImage = function BackgroundImage(_ref) {
-  var images = _ref.images,
-      _ref$showOverlay = _ref.showOverlay,
-      showOverlay = _ref$showOverlay === void 0 ? false : _ref$showOverlay;
-  return ___EmotionJSX("div", classes('', {
-    showOverlay: showOverlay
-  }), images && images.map(function (image) {
-    return image.types.map(function (type) {
-      return ___EmotionJSX("div", _extends({
-        key: "".concat(image.url).concat(type)
-      }, classes('background', type), {
-        style: {
-          backgroundImage: "url(".concat(image.url, ")")
-        }
-      }));
-    });
-  }));
-};
-
-export default BackgroundImage;

package/es/BackgroundImage/index.js

@@ -1,2 +0,0 @@
-import BackgroundImage from './BackgroundImage';
-export default BackgroundImage;

package/lib/BackgroundImage/BackgroundImage.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-declare type ImageType = 'mobile' | 'tablet' | 'desktop' | 'wide';
-interface Props {
-    showOverlay?: boolean;
-    className?: string;
-    images: {
-        url: string;
-        types: ImageType[];
-    }[];
-}
-declare const BackgroundImage: ({ images, showOverlay }: Props) => JSX.Element;
-export default BackgroundImage;

package/lib/BackgroundImage/BackgroundImage.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-
-var _core = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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); }
-
-var classes = (0, _reactBemHelper["default"])('c-background-image');
-
-var BackgroundImage = function BackgroundImage(_ref) {
-  var images = _ref.images,
-      _ref$showOverlay = _ref.showOverlay,
-      showOverlay = _ref$showOverlay === void 0 ? false : _ref$showOverlay;
-  return (0, _core.jsx)("div", classes('', {
-    showOverlay: showOverlay
-  }), images && images.map(function (image) {
-    return image.types.map(function (type) {
-      return (0, _core.jsx)("div", _extends({
-        key: "".concat(image.url).concat(type)
-      }, classes('background', type), {
-        style: {
-          backgroundImage: "url(".concat(image.url, ")")
-        }
-      }));
-    });
-  }));
-};
-
-var _default = BackgroundImage;
-exports["default"] = _default;

package/lib/BackgroundImage/index.d.ts

@@ -1,2 +0,0 @@
-import BackgroundImage from './BackgroundImage';
-export default BackgroundImage;

package/lib/BackgroundImage/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _BackgroundImage = _interopRequireDefault(require("./BackgroundImage"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = _BackgroundImage["default"];
-exports["default"] = _default;