@ndla/ui 36.0.2 → 37.0.1

package/src/Resource/resourceComponents.tsx

@@ -8,13 +8,15 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MenuButton } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import { useNavigate } from 'react-router-dom';
 import { HashTag } from '@ndla/icons/common';
 import resourceTypeColor from '../utils/resourceTypeColor';
+import { resourceTypeMapping } from '../model/ContentType';
+
 export interface ResourceImageProps {
   alt: string;
   src: string;
@@ -196,7 +198,7 @@ export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
     <StyledResourceTypeList aria-label={t('navigation.topics')}>
       {resourceTypes.map((resource, i) => (
         <StyledResourceListElement key={resource.id}>
-          {resource.name}
+          {resourceTypeMapping[resource.id] ? t(`embed.type.${resourceTypeMapping[resource.id]}`) : resource.name}
           {i !== resourceTypes.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
         </StyledResourceListElement>
       ))}

package/src/Table/component.tables.scss

@@ -83,31 +83,6 @@ article table {
 
   // scrolling shadows on left/right
 
-  @include chinese() {
-    th {
-      @include font-size(18px, 22px);
-
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
-
-    thead tr:nth-child(2) th {
-      @include font-size(16px, 18px);
-
-      @include mq(tablet) {
-        @include font-size(18px, 26px);
-      }
-    }
-
-    td {
-      @include font-size(16px, 22px);
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
-  }
-
   &:after,
   &:before {
     content: '';
@@ -144,13 +119,6 @@ article table {
     @include mq(tablet) {
       @include font-size(16px, 30px);
     }
-
-    @include chinese() {
-      @include font-size(18px, 22px);
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
   }
 
   tbody th {
@@ -174,13 +142,6 @@ article table {
     &:empty {
       background-color: transparent;
     }
-
-    @include chinese() {
-      @include font-size(16px, 18px);
-      @include mq(tablet) {
-        @include font-size(18px, 26px);
-      }
-    }
   }
 
   td {
@@ -193,13 +154,6 @@ article table {
       @include font-size(15px, 30px);
     }
 
-    @include chinese() {
-      @include font-size(16px, 22px);
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
-
     p {
       line-height: 1.6em;
     }

package/src/Translation/component.translation.scss

@@ -38,12 +38,10 @@
   margin-left: 0;
 }
 .c-translation__line-body {
-  @include chinese() {
-    @include font-size(18px, 28px);
+  @include font-size(16px, 26px);
 
-    @include mq(tablet) {
-      @include font-size(20px, 32px);
-    }
+  @include mq(tablet) {
+    @include font-size(18px, 30px);
   }
 }
 

package/src/Typography/Heading.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-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 { css } from '@emotion/react';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import { HTMLAttributes, ReactNode } from 'react';
+import { HeadingLevel } from '../types';
+
+const style = css`
+  font-weight: ${fonts.weight.bold};
+  font-family: ${fonts.sans};
+  ${fonts.sizes('22px', '30px')};
+  margin: ${spacing.normal} 0 ${spacing.normal} 0;
+
+  &[data-margin='none'] {
+    margin: 0px;
+  }
+  &[data-margin='xlarge'] {
+    margin: ${spacing.normal} 0 ${spacing.small} 0;
+    ${mq.range({ from: breakpoints.tablet })} {
+      margin-bottom: ${spacing.normal};
+    }
+  }
+  &[data-margin='large'] {
+    margin-top: ${spacing.large};
+    margin-bottom: ${spacing.small};
+  }
+  &[data-margin='small'] {
+    margin-top: ${spacing.normal};
+    margin-bottom: ${spacing.small};
+  }
+  &[data-style='h1'] {
+    ${fonts.sizes('30px', '36px')};
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('48px', '60px')};
+      margin-bottom: ${spacing.normal};
+    }
+  }
+
+  &[data-style='h2'] {
+    ${fonts.sizes('28px', '36px')};
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('30px', '38px')};
+    }
+  }
+
+  &[data-style='h3'] {
+    ${fonts.sizes('26px', '35px')};
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('26px', '36px')};
+    }
+  }
+  &[data-style='list-title'] {
+    ${fonts.sizes('18px', '24px')};
+    text-transform: uppercase;
+  }
+`;
+
+type AllowedElements = HeadingLevel | 'p' | 'span';
+
+interface Props<T extends AllowedElements> extends HTMLAttributes<T> {
+  element: HeadingLevel | 'p' | 'span';
+  headingStyle: 'h1' | 'h2' | 'h3' | 'list-title' | 'default';
+  serif?: boolean;
+  /**
+   * General usage
+   * xlarge -> h1
+   * large -> h2
+   * normal -> anything else
+   */
+  margin?: 'xlarge' | 'large' | 'normal' | 'small' | 'none';
+  children: ReactNode;
+  className?: string;
+}
+
+const Heading = <T extends AllowedElements>({
+  element: Element,
+  children,
+  headingStyle,
+  margin = 'normal',
+  serif,
+  className,
+}: Props<T>) => {
+  return (
+    <Element css={style} data-serif={serif} data-style={headingStyle} data-margin={margin} className={className}>
+      {children}
+    </Element>
+  );
+};
+
+export default Heading;

package/src/Typography/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { default as Heading } from './Heading';

package/src/index.ts

@@ -270,6 +270,10 @@ export type { TreeStructureProps } from './TreeStructure';
 
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as LetterFilter } from './LetterFilter';
+
+export { OrderedList, UnOrderedList } from './List';
 export { BlogPostV2 } from './BlogPost';
-export { KeyPerformanceIndicator } from './KeyPerformanceIndicator';
+export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
+export type { HeartButtonType } from './Embed';
+export { CampaignBlock } from './CampaignBlock';

package/src/locale/messages-en.ts

@@ -1007,6 +1007,7 @@ const messages = {
       close: 'Close text version',
     },
     readMoreDescriptionLabel: 'show more',
+    readLessDescriptionLabel: 'show less',
   },
   h5p: {
     reuse: 'Use H5P',
@@ -1305,12 +1306,15 @@ const messages = {
     conceptListError: 'Failed to show concept list',
     linkError: 'Failed to show link.',
     unsupported: `Embed {{type}} not supported.`,
+    embedError: `An error occurred while loading the {{type}}. Try reloading the page.`,
     type: {
       image: 'Image',
       video: 'Video',
       audio: 'Audio',
       podcast: 'Podcast',
       concept: 'Concept',
+      h5p: 'H5P',
+      external: 'External resource',
     },
   },
 };

package/src/locale/messages-nb.ts

@@ -1006,6 +1006,7 @@ const messages = {
       close: 'Lukk tekstversjon',
     },
     readMoreDescriptionLabel: 'vis mer',
+    readLessDescriptionLabel: 'vis mindre',
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1301,12 +1302,15 @@ const messages = {
     conceptListError: 'Klarte ikke å vise forklaringsliste',
     linkError: 'Klarte ikke å vise lenke.',
     unsupported: `Embed {{type}} er ikke støttet.`,
+    embedError: `Beklager, en feil oppstod ved lasting av {{type}}. Prøv å laste inn siden på nytt.`,
     type: {
       image: 'Bilde',
       video: 'Video',
       audio: 'Lyd',
       podcast: 'Podkast',
       concept: 'Forklaring',
+      h5p: 'H5P',
+      external: 'Ekstern ressurs',
     },
   },
 };

package/src/locale/messages-nn.ts

@@ -1006,6 +1006,7 @@ const messages = {
       close: 'Lukk tekstversjon',
     },
     readMoreDescriptionLabel: 'vis meir',
+    readLessDescriptionLabel: 'vis mindre',
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1301,12 +1302,15 @@ const messages = {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',
     linkError: 'Klarte ikkje å vise lenke.',
     unsupported: `Embed {{type}} er ikkje støtta.`,
+    embedError: `Orsak, ein feil oppstod ved lasting av {{type}}. Prøv å laste inn sida på nytt.`,
     type: {
       image: 'Bilde',
       video: 'Video',
       audio: 'Lyd',
       podcast: 'Podkast',
       concept: 'Forklaring',
+      h5p: 'H5P',
+      external: 'Ekstern ressurs',
     },
   },
 };

package/src/locale/messages-se.ts

@@ -1007,6 +1007,7 @@ const messages = {
       close: 'Govčča teakstavearšuvnna',
     },
     readMoreDescriptionLabel: 'Čájet eanet',
+    readLessDescriptionLabel: 'vis mindre',
   },
   h5p: {
     reuse: 'Geavat H5P',
@@ -1302,12 +1303,15 @@ const messages = {
     conceptListError: 'Ii sáhttán čájehit čilgehuslisttu',
     linkError: 'Ii sáhttán čájehit liŋkka.',
     unsupported: `Embed {{type}} ii dorjojuvvo.`,
+    embedError: `Orsak, ein feil oppstod ved lasting av {{type}}. Prøv å laste inn sida på nytt.`,
     type: {
       image: 'Bilde',
       video: 'Video',
       audio: 'Lyd',
       podcast: 'Podkast',
       concept: 'Forklaring',
+      h5p: 'H5P',
+      external: 'Ekstern ressurs',
     },
   },
 };

package/src/locale/messages-sma.ts

@@ -1010,6 +1010,7 @@ const messages = {
       close: 'Dahph teeksteversjovnem',
     },
     readMoreDescriptionLabel: 'vis mer',
+    readLessDescriptionLabel: 'vis mindre',
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1306,12 +1307,15 @@ const messages = {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',
     linkError: 'Klarte ikkje å vise lenke.',
     unsupported: `Embed {{type}} er ikkje støtta.`,
+    embedError: `Orsak, ein feil oppstod ved lasting av {{type}}. Prøv å laste inn sida på nytt.`,
     type: {
       image: 'Bilde',
       video: 'Video',
       audio: 'Lyd',
       podcast: 'Podkast',
       concept: 'Forklaring',
+      h5p: 'H5P',
+      external: 'Ekstern ressurs',
     },
   },
 };

package/src/model/ContentType.ts

@@ -56,3 +56,10 @@ export const contentTypeMapping: Record<string, string> = {
   [RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,
   default: SUBJECT_MATERIAL,
 };
+
+export const resourceTypeMapping: Record<string, string> = {
+  image: 'image',
+  video: 'video',
+  concept: 'concept',
+  audio: 'audio',
+};

package/es/KeyPerformanceIndicator/KeyPerformanceIndicator.js

@@ -1,57 +0,0 @@
-import _styled from "@emotion/styled/base";
-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) 2023-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 { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var ContentWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1wettez3",
-  label: "ContentWrapper"
-})("display:flex;flex-direction:column;justify-content:center;align-items:center;padding:", spacing.small, ";align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZaUMiLCJmaWxlIjoiS2V5UGVyZm9ybWFuY2VJbmRpY2F0b3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgSUltYWdlTWV0YUluZm9ybWF0aW9uVjMgfSBmcm9tICdAbmRsYS90eXBlcy1iYWNrZW5kL2J1aWxkL2ltYWdlLWFwaSc7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZWRJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIG1heC13aWR0aDogMTUwcHg7XG5gO1xuXG5jb25zdCBUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgb3ZlcmZsb3ctd3JhcDogYnJlYWstd29yZDtcbiAgJHtmb250cy5zaXplcygnMzhweCcsICc0OHB4Jyl9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAke2ZvbnRzLnNpemVzKCczMHB4JywgJzM2cHgnKX07XG4gIH1cbiAgbWF4LXdpZHRoOiAyNDBweDtcbmA7XG5cbmNvbnN0IFN1YlRpdGxlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIG92ZXJmbG93LXdyYXA6ICdicmVhay13b3JkJztcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgICAke2ZvbnRzLnNpemVzKCcxOHB4JywgJzI5cHgnKX07XG4gICAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gICAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gICAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIH1cbiAgbWF4LXdpZHRoOiAyNDBweDtcbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlPzogSUltYWdlTWV0YUluZm9ybWF0aW9uVjM7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YlRpdGxlOiBzdHJpbmc7XG59XG5cbmNvbnN0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yID0gKHsgaW1hZ2UsIHRpdGxlLCBzdWJUaXRsZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxDb250ZW50V3JhcHBlcj5cbiAgICAgIDxTdHlsZWRJbWFnZSBzcmM9e2ltYWdlPy5pbWFnZS5pbWFnZVVybH0gYWx0PXtpbWFnZT8uYWx0dGV4dC5hbHR0ZXh0fSAvPlxuICAgICAgPFRpdGxlV3JhcHBlcj57dGl0bGV9PC9UaXRsZVdyYXBwZXI+XG4gICAgICA8U3ViVGl0bGVXcmFwcGVyPntzdWJUaXRsZX08L1N1YlRpdGxlV3JhcHBlcj5cbiAgICA8L0NvbnRlbnRXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgS2V5UGVyZm9ybWFuY2VJbmRpY2F0b3I7XG4iXX0= */"));
-var StyledImage = /*#__PURE__*/_styled("img", {
-  target: "e1wettez2",
-  label: "StyledImage"
-})(process.env.NODE_ENV === "production" ? {
-  name: "92hyw0",
-  styles: "max-width:150px"
-} : {
-  name: "92hyw0",
-  styles: "max-width:150px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQjhCIiwiZmlsZSI6IktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBicmVha3BvaW50cywgY29sb3JzLCBmb250cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzIH0gZnJvbSAnQG5kbGEvdHlwZXMtYmFja2VuZC9idWlsZC9pbWFnZS1hcGknO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBtYXgtd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoJzM4cHgnLCAnNDhweCcpfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnMzBweCcsICczNnB4Jyl9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiAnYnJlYWstd29yZCc7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgJHtmb250cy5zaXplcygnMThweCcsICcyOXB4Jyl9O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICAgIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpbWFnZT86IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzO1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZTogc3RyaW5nO1xufVxuXG5jb25zdCBLZXlQZXJmb3JtYW5jZUluZGljYXRvciA9ICh7IGltYWdlLCB0aXRsZSwgc3ViVGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZT8uaW1hZ2UuaW1hZ2VVcmx9IGFsdD17aW1hZ2U/LmFsdHRleHQuYWx0dGV4dH0gLz5cbiAgICAgIDxUaXRsZVdyYXBwZXI+e3RpdGxlfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57c3ViVGl0bGV9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var TitleWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1wettez1",
-  label: "TitleWrapper"
-})("color:", colors.text.primary, ";font-family:", fonts.sans, ";font-weight:", fonts.weight.bold, ";overflow-wrap:break-word;", fonts.sizes('38px', '48px'), ";", mq.range({
-  until: breakpoints.tabletWide
-}), "{", fonts.sizes('30px', '36px'), ";}max-width:240px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QitCIiwiZmlsZSI6IktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBicmVha3BvaW50cywgY29sb3JzLCBmb250cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzIH0gZnJvbSAnQG5kbGEvdHlwZXMtYmFja2VuZC9idWlsZC9pbWFnZS1hcGknO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBtYXgtd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoJzM4cHgnLCAnNDhweCcpfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnMzBweCcsICczNnB4Jyl9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiAnYnJlYWstd29yZCc7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgJHtmb250cy5zaXplcygnMThweCcsICcyOXB4Jyl9O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICAgIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpbWFnZT86IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzO1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZTogc3RyaW5nO1xufVxuXG5jb25zdCBLZXlQZXJmb3JtYW5jZUluZGljYXRvciA9ICh7IGltYWdlLCB0aXRsZSwgc3ViVGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZT8uaW1hZ2UuaW1hZ2VVcmx9IGFsdD17aW1hZ2U/LmFsdHRleHQuYWx0dGV4dH0gLz5cbiAgICAgIDxUaXRsZVdyYXBwZXI+e3RpdGxlfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57c3ViVGl0bGV9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yO1xuIl19 */"));
-var SubTitleWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1wettez0",
-  label: "SubTitleWrapper"
-})("overflow-wrap:'break-word';", mq.range({
-  until: breakpoints.tabletWide
-}), "{padding-top:", spacing.xxsmall, ";", fonts.sizes('18px', '29px'), ";color:", colors.text.primary, ";font-weight:", fonts.weight.normal, ";font-family:", fonts.sans, ";}max-width:240px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ2tDIiwiZmlsZSI6IktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBicmVha3BvaW50cywgY29sb3JzLCBmb250cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzIH0gZnJvbSAnQG5kbGEvdHlwZXMtYmFja2VuZC9idWlsZC9pbWFnZS1hcGknO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBtYXgtd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoJzM4cHgnLCAnNDhweCcpfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnMzBweCcsICczNnB4Jyl9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiAnYnJlYWstd29yZCc7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgJHtmb250cy5zaXplcygnMThweCcsICcyOXB4Jyl9O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICAgIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpbWFnZT86IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzO1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZTogc3RyaW5nO1xufVxuXG5jb25zdCBLZXlQZXJmb3JtYW5jZUluZGljYXRvciA9ICh7IGltYWdlLCB0aXRsZSwgc3ViVGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZT8uaW1hZ2UuaW1hZ2VVcmx9IGFsdD17aW1hZ2U/LmFsdHRleHQuYWx0dGV4dH0gLz5cbiAgICAgIDxUaXRsZVdyYXBwZXI+e3RpdGxlfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57c3ViVGl0bGV9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yO1xuIl19 */"));
-var KeyPerformanceIndicator = function KeyPerformanceIndicator(_ref) {
-  var image = _ref.image,
-    title = _ref.title,
-    subTitle = _ref.subTitle;
-  return _jsxs(ContentWrapper, {
-    children: [_jsx(StyledImage, {
-      src: image === null || image === void 0 ? void 0 : image.image.imageUrl,
-      alt: image === null || image === void 0 ? void 0 : image.alttext.alttext
-    }), _jsx(TitleWrapper, {
-      children: title
-    }), _jsx(SubTitleWrapper, {
-      children: subTitle
-    })]
-  });
-};
-export default KeyPerformanceIndicator;

package/lib/KeyPerformanceIndicator/KeyPerformanceIndicator.d.ts

@@ -1,8 +0,0 @@
-import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
-interface Props {
-    image?: IImageMetaInformationV3;
-    title: string;
-    subTitle: string;
-}
-declare const KeyPerformanceIndicator: ({ image, title, subTitle }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default KeyPerformanceIndicator;

package/lib/KeyPerformanceIndicator/KeyPerformanceIndicator.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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) 2023-present, NDLA.
-                                                                                                                                                                                                                                                                                           *
-                                                                                                                                                                                                                                                                                           * This source code is licensed under the GPLv3 license found in the
-                                                                                                                                                                                                                                                                                           * LICENSE file in the root directory of this source tree.
-                                                                                                                                                                                                                                                                                           *
-                                                                                                                                                                                                                                                                                           */
-var ContentWrapper = /*#__PURE__*/(0, _base["default"])("div", {
-  target: "e1wettez3",
-  label: "ContentWrapper"
-})("display:flex;flex-direction:column;justify-content:center;align-items:center;padding:", _core.spacing.small, ";align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZaUMiLCJmaWxlIjoiS2V5UGVyZm9ybWFuY2VJbmRpY2F0b3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgSUltYWdlTWV0YUluZm9ybWF0aW9uVjMgfSBmcm9tICdAbmRsYS90eXBlcy1iYWNrZW5kL2J1aWxkL2ltYWdlLWFwaSc7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZWRJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIG1heC13aWR0aDogMTUwcHg7XG5gO1xuXG5jb25zdCBUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgb3ZlcmZsb3ctd3JhcDogYnJlYWstd29yZDtcbiAgJHtmb250cy5zaXplcygnMzhweCcsICc0OHB4Jyl9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAke2ZvbnRzLnNpemVzKCczMHB4JywgJzM2cHgnKX07XG4gIH1cbiAgbWF4LXdpZHRoOiAyNDBweDtcbmA7XG5cbmNvbnN0IFN1YlRpdGxlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIG92ZXJmbG93LXdyYXA6ICdicmVhay13b3JkJztcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgICAke2ZvbnRzLnNpemVzKCcxOHB4JywgJzI5cHgnKX07XG4gICAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gICAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gICAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIH1cbiAgbWF4LXdpZHRoOiAyNDBweDtcbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlPzogSUltYWdlTWV0YUluZm9ybWF0aW9uVjM7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YlRpdGxlOiBzdHJpbmc7XG59XG5cbmNvbnN0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yID0gKHsgaW1hZ2UsIHRpdGxlLCBzdWJUaXRsZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxDb250ZW50V3JhcHBlcj5cbiAgICAgIDxTdHlsZWRJbWFnZSBzcmM9e2ltYWdlPy5pbWFnZS5pbWFnZVVybH0gYWx0PXtpbWFnZT8uYWx0dGV4dC5hbHR0ZXh0fSAvPlxuICAgICAgPFRpdGxlV3JhcHBlcj57dGl0bGV9PC9UaXRsZVdyYXBwZXI+XG4gICAgICA8U3ViVGl0bGVXcmFwcGVyPntzdWJUaXRsZX08L1N1YlRpdGxlV3JhcHBlcj5cbiAgICA8L0NvbnRlbnRXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgS2V5UGVyZm9ybWFuY2VJbmRpY2F0b3I7XG4iXX0= */"));
-var StyledImage = /*#__PURE__*/(0, _base["default"])("img", {
-  target: "e1wettez2",
-  label: "StyledImage"
-})(process.env.NODE_ENV === "production" ? {
-  name: "92hyw0",
-  styles: "max-width:150px"
-} : {
-  name: "92hyw0",
-  styles: "max-width:150px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQjhCIiwiZmlsZSI6IktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBicmVha3BvaW50cywgY29sb3JzLCBmb250cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzIH0gZnJvbSAnQG5kbGEvdHlwZXMtYmFja2VuZC9idWlsZC9pbWFnZS1hcGknO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBtYXgtd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoJzM4cHgnLCAnNDhweCcpfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnMzBweCcsICczNnB4Jyl9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiAnYnJlYWstd29yZCc7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgJHtmb250cy5zaXplcygnMThweCcsICcyOXB4Jyl9O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICAgIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpbWFnZT86IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzO1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZTogc3RyaW5nO1xufVxuXG5jb25zdCBLZXlQZXJmb3JtYW5jZUluZGljYXRvciA9ICh7IGltYWdlLCB0aXRsZSwgc3ViVGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZT8uaW1hZ2UuaW1hZ2VVcmx9IGFsdD17aW1hZ2U/LmFsdHRleHQuYWx0dGV4dH0gLz5cbiAgICAgIDxUaXRsZVdyYXBwZXI+e3RpdGxlfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57c3ViVGl0bGV9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var TitleWrapper = /*#__PURE__*/(0, _base["default"])("div", {
-  target: "e1wettez1",
-  label: "TitleWrapper"
-})("color:", _core.colors.text.primary, ";font-family:", _core.fonts.sans, ";font-weight:", _core.fonts.weight.bold, ";overflow-wrap:break-word;", _core.fonts.sizes('38px', '48px'), ";", _core.mq.range({
-  until: _core.breakpoints.tabletWide
-}), "{", _core.fonts.sizes('30px', '36px'), ";}max-width:240px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QitCIiwiZmlsZSI6IktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBicmVha3BvaW50cywgY29sb3JzLCBmb250cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzIH0gZnJvbSAnQG5kbGEvdHlwZXMtYmFja2VuZC9idWlsZC9pbWFnZS1hcGknO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBtYXgtd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoJzM4cHgnLCAnNDhweCcpfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnMzBweCcsICczNnB4Jyl9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiAnYnJlYWstd29yZCc7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgJHtmb250cy5zaXplcygnMThweCcsICcyOXB4Jyl9O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICAgIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpbWFnZT86IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzO1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZTogc3RyaW5nO1xufVxuXG5jb25zdCBLZXlQZXJmb3JtYW5jZUluZGljYXRvciA9ICh7IGltYWdlLCB0aXRsZSwgc3ViVGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZT8uaW1hZ2UuaW1hZ2VVcmx9IGFsdD17aW1hZ2U/LmFsdHRleHQuYWx0dGV4dH0gLz5cbiAgICAgIDxUaXRsZVdyYXBwZXI+e3RpdGxlfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57c3ViVGl0bGV9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yO1xuIl19 */"));
-var SubTitleWrapper = /*#__PURE__*/(0, _base["default"])("div", {
-  target: "e1wettez0",
-  label: "SubTitleWrapper"
-})("overflow-wrap:'break-word';", _core.mq.range({
-  until: _core.breakpoints.tabletWide
-}), "{padding-top:", _core.spacing.xxsmall, ";", _core.fonts.sizes('18px', '29px'), ";color:", _core.colors.text.primary, ";font-weight:", _core.fonts.weight.normal, ";font-family:", _core.fonts.sans, ";}max-width:240px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ2tDIiwiZmlsZSI6IktleVBlcmZvcm1hbmNlSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBicmVha3BvaW50cywgY29sb3JzLCBmb250cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzIH0gZnJvbSAnQG5kbGEvdHlwZXMtYmFja2VuZC9idWlsZC9pbWFnZS1hcGknO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBtYXgtd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoJzM4cHgnLCAnNDhweCcpfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnMzBweCcsICczNnB4Jyl9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiAnYnJlYWstd29yZCc7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgJHtmb250cy5zaXplcygnMThweCcsICcyOXB4Jyl9O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICAgIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICB9XG4gIG1heC13aWR0aDogMjQwcHg7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpbWFnZT86IElJbWFnZU1ldGFJbmZvcm1hdGlvblYzO1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZTogc3RyaW5nO1xufVxuXG5jb25zdCBLZXlQZXJmb3JtYW5jZUluZGljYXRvciA9ICh7IGltYWdlLCB0aXRsZSwgc3ViVGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZT8uaW1hZ2UuaW1hZ2VVcmx9IGFsdD17aW1hZ2U/LmFsdHRleHQuYWx0dGV4dH0gLz5cbiAgICAgIDxUaXRsZVdyYXBwZXI+e3RpdGxlfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57c3ViVGl0bGV9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleVBlcmZvcm1hbmNlSW5kaWNhdG9yO1xuIl19 */"));
-var KeyPerformanceIndicator = function KeyPerformanceIndicator(_ref) {
-  var image = _ref.image,
-    title = _ref.title,
-    subTitle = _ref.subTitle;
-  return (0, _jsxRuntime.jsxs)(ContentWrapper, {
-    children: [(0, _jsxRuntime.jsx)(StyledImage, {
-      src: image === null || image === void 0 ? void 0 : image.image.imageUrl,
-      alt: image === null || image === void 0 ? void 0 : image.alttext.alttext
-    }), (0, _jsxRuntime.jsx)(TitleWrapper, {
-      children: title
-    }), (0, _jsxRuntime.jsx)(SubTitleWrapper, {
-      children: subTitle
-    })]
-  });
-};
-var _default = KeyPerformanceIndicator;
-exports["default"] = _default;

package/lib/KeyPerformanceIndicator/index.d.ts

@@ -1 +0,0 @@
-export { default as KeyPerformanceIndicator } from './KeyPerformanceIndicator';

package/lib/KeyPerformanceIndicator/index.js

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

package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.stories.tsx

@@ -1,79 +0,0 @@
-/**
- * Copyright (c) 2023-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 { Meta, StoryFn } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
-import KeyPerformanceIndicator from './KeyPerformanceIndicator';
-
-export default {
-  title: 'Enkle komponenter/Nøkkeltall',
-  component: KeyPerformanceIndicator,
-  tags: ['autodocs'],
-  parameters: {
-    ...defaultParameters,
-    layout: 'centered',
-  },
-  args: {
-    title: '500',
-    subTitle: 'TVERRFAGLIGE RESSURSER',
-    image: {
-      id: '65797',
-      metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65797',
-      title: {
-        title: 'Nøkkeltall tverrfaglig',
-        language: 'nb',
-      },
-      alttext: {
-        alttext: 'Nøkkeltall tverrfaglig',
-        language: 'nb',
-      },
-      copyright: {
-        license: {
-          license: 'PD',
-          description: 'Public Domain Mark',
-          url: 'https://creativecommons.org/about/pdm',
-        },
-        origin: 'NDLA',
-        creators: [
-          {
-            type: 'artist',
-            name: 'Hedvig',
-          },
-        ],
-        processors: [],
-        rightsholders: [],
-      },
-      tags: {
-        tags: ['Nøkkeltall', 'Tverrfaglig', 'svg'],
-        language: 'nb',
-      },
-      caption: {
-        caption: '',
-        language: 'nb',
-      },
-      supportedLanguages: ['nb'],
-      created: '2023-04-18T11:20:34Z',
-      createdBy: 'f-jBTU8O8kYbUW20lMeIuTSv',
-      modelRelease: 'not-set',
-      image: {
-        fileName: 'wMowCjRg.svg',
-        size: 43278,
-        contentType: 'image/svg+xml',
-        imageUrl: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
-        language: 'nb',
-      },
-    },
-  },
-} as Meta<typeof KeyPerformanceIndicator>;
-
-export const KeyPerformanceIndicatorStory: StoryFn<typeof KeyPerformanceIndicator> = ({ ...args }) => {
-  return <KeyPerformanceIndicator {...args} />;
-};
-
-KeyPerformanceIndicatorStory.storyName = 'Nøkkeltall';