@ndla/ui 35.1.2 → 36.0.1

package/lib/RelatedArticleList/RelatedArticleV2.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
+import { HTMLProps, ReactNode } from 'react';
 import { HeadingLevel } from '../types';
 interface RelatedArticleProps {
     title: string;
@@ -16,10 +16,11 @@ interface RelatedArticleProps {
     type?: string;
 }
 export declare const RelatedArticleV2: ({ title, introduction, to, linkInfo, target, type, }: RelatedArticleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-interface Props {
+interface Props extends HTMLProps<HTMLElement> {
     children?: JSX.Element[];
     articleCount?: number;
     headingLevel?: HeadingLevel;
+    headingButtons?: ReactNode;
 }
-export declare const RelatedArticleListV2: ({ children, articleCount, headingLevel }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RelatedArticleListV2: ({ children, articleCount, headingLevel, headingButtons, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/lib/RelatedArticleList/RelatedArticleV2.js

@@ -1,9 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RelatedArticleV2 = exports.RelatedArticleListV2 = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("react");
 var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
 var _reactI18next = require("react-i18next");
@@ -13,25 +15,28 @@ var _SectionHeading = _interopRequireDefault(require("../SectionHeading"));
 var _ContentTypeBadge = _interopRequireDefault(require("../ContentTypeBadge"));
 var _ContentType = require("../model/ContentType");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["children", "articleCount", "headingLevel", "headingButtons"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
-                                                                                                                                                                                                                                                                                                                                                                                               * 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.
-                                                                                                                                                                                                                                                                                                                                                                                               *
-                                                                                                                                                                                                                                                                                                                                                                                               */
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 classes = new _reactBemHelper["default"]({
   name: 'related-articles',
   prefix: 'c-'
@@ -71,12 +76,26 @@ var RelatedArticleV2 = function RelatedArticleV2(_ref) {
   }));
 };
 exports.RelatedArticleV2 = RelatedArticleV2;
+var HeadingWrapper = /*#__PURE__*/(0, _base["default"])("div", {
+  target: "e1no7p040",
+  label: "HeadingWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1066lcq",
+  styles: "display:flex;justify-content:space-between;align-items:center"
+} : {
+  name: "1066lcq",
+  styles: "display:flex;justify-content:space-between;align-items:center",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlbGF0ZWRBcnRpY2xlVjIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlEaUMiLCJmaWxlIjoiUmVsYXRlZEFydGljbGVWMi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IENoaWxkcmVuLCBIVE1MUHJvcHMsIFJlYWN0Tm9kZSwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgQkVNSGVscGVyIGZyb20gJ3JlYWN0LWJlbS1oZWxwZXInO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEJ1dHRvblYyIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBTYWZlTGluayBmcm9tICdAbmRsYS9zYWZlbGluayc7XG5pbXBvcnQgU2VjdGlvbkhlYWRpbmcgZnJvbSAnLi4vU2VjdGlvbkhlYWRpbmcnO1xuaW1wb3J0IHsgSGVhZGluZ0xldmVsIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IENvbnRlbnRUeXBlQmFkZ2UgZnJvbSAnLi4vQ29udGVudFR5cGVCYWRnZSc7XG5pbXBvcnQgeyBjb250ZW50VHlwZXMgfSBmcm9tICcuLi9tb2RlbC9Db250ZW50VHlwZSc7XG5cbmNvbnN0IGNsYXNzZXMgPSBuZXcgQkVNSGVscGVyKHtcbiAgbmFtZTogJ3JlbGF0ZWQtYXJ0aWNsZXMnLFxuICBwcmVmaXg6ICdjLScsXG59KTtcblxuaW50ZXJmYWNlIFJlbGF0ZWRBcnRpY2xlUHJvcHMge1xuICB0aXRsZTogc3RyaW5nO1xuICBpbnRyb2R1Y3Rpb246IHN0cmluZztcbiAgdG86IHN0cmluZztcbiAgbGlua0luZm8/OiBzdHJpbmc7XG4gIHRhcmdldD86IHN0cmluZztcbiAgdHlwZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFJlbGF0ZWRBcnRpY2xlVjIgPSAoe1xuICB0aXRsZSxcbiAgaW50cm9kdWN0aW9uLFxuICB0byxcbiAgbGlua0luZm8gPSAnJyxcbiAgdGFyZ2V0ID0gJycsXG4gIHR5cGUgPSBjb250ZW50VHlwZXMuU1VCSkVDVF9NQVRFUklBTCxcbn06IFJlbGF0ZWRBcnRpY2xlUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8YXJ0aWNsZSB7Li4uY2xhc3NlcygnaXRlbScsIHR5cGUpfT5cbiAgICAgIDxoMyB7Li4uY2xhc3NlcygndGl0bGUnKX0+XG4gICAgICAgIDxDb250ZW50VHlwZUJhZGdlIHR5cGU9e3R5cGV9IGJhY2tncm91bmQgc2l6ZT1cInNtYWxsXCIgLz5cbiAgICAgICAgPHNwYW4gey4uLmNsYXNzZXMoJ2xpbmstd3JhcHBlcicpfT5cbiAgICAgICAgICA8U2FmZUxpbmsgdG89e3RvfSB7Li4uY2xhc3NlcygnbGluaycpfSB0YXJnZXQ9e3RhcmdldH0gcmVsPXtsaW5rSW5mbyA/ICdub29wZW5lciBub3JlZmVycmVyJyA6IHVuZGVmaW5lZH0+XG4gICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgPC9TYWZlTGluaz5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9oMz5cbiAgICAgIDxwIHsuLi5jbGFzc2VzKCdkZXNjcmlwdGlvbicpfSBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGludHJvZHVjdGlvbiB9fSAvPlxuICAgICAge2xpbmtJbmZvICYmIDxwIHsuLi5jbGFzc2VzKCdsaW5rLWluZm8nKX0+e2xpbmtJbmZvfTwvcD59XG4gICAgPC9hcnRpY2xlPlxuICApO1xufTtcblxuY29uc3QgSGVhZGluZ1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBIVE1MUHJvcHM8SFRNTEVsZW1lbnQ+IHtcbiAgY2hpbGRyZW4/OiBKU1guRWxlbWVudFtdO1xuICBhcnRpY2xlQ291bnQ/OiBudW1iZXI7XG4gIGhlYWRpbmdMZXZlbD86IEhlYWRpbmdMZXZlbDtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5leHBvcnQgY29uc3QgUmVsYXRlZEFydGljbGVMaXN0VjIgPSAoe1xuICBjaGlsZHJlbiA9IFtdLFxuICBhcnRpY2xlQ291bnQsXG4gIGhlYWRpbmdMZXZlbCA9ICdoMycsXG4gIGhlYWRpbmdCdXR0b25zLFxuICAuLi5yZXN0XG59OiBQcm9wcykgPT4ge1xuICBjb25zdCBbZXhwYW5kZWQsIHNldEV4cGFuZGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBjaGlsZENvdW50ID0gdXNlTWVtbygoKSA9PiBhcnRpY2xlQ291bnQgPz8gQ2hpbGRyZW4uY291bnQoY2hpbGRyZW4pLCBbY2hpbGRyZW4sIGFydGljbGVDb3VudF0pO1xuICBjb25zdCBjaGlsZHJlblRvU2hvdyA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKGNoaWxkQ291bnQgPiAyICYmICFleHBhbmRlZCA/IGNoaWxkcmVuPy5zbGljZSgwLCAyKSA6IGNoaWxkcmVuKSxcbiAgICBbY2hpbGRDb3VudCwgY2hpbGRyZW4sIGV4cGFuZGVkXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxzZWN0aW9uIHsuLi5jbGFzc2VzKCcnKX0gey4uLnJlc3R9PlxuICAgICAgPEhlYWRpbmdXcmFwcGVyPlxuICAgICAgICA8U2VjdGlvbkhlYWRpbmcgaGVhZGluZ0xldmVsPXtoZWFkaW5nTGV2ZWx9IGNsYXNzTmFtZT17Y2xhc3NlcygnY29tcG9uZW50LXRpdGxlJykuY2xhc3NOYW1lfT5cbiAgICAgICAgICB7dCgncmVsYXRlZC50aXRsZScpfVxuICAgICAgICA8L1NlY3Rpb25IZWFkaW5nPlxuICAgICAgICB7aGVhZGluZ0J1dHRvbnN9XG4gICAgICA8L0hlYWRpbmdXcmFwcGVyPlxuICAgICAgPGRpdiB7Li4uY2xhc3NlcygnYXJ0aWNsZXMnKX0+e2NoaWxkcmVuVG9TaG93fTwvZGl2PlxuICAgICAge2NoaWxkQ291bnQgPiAyID8gKFxuICAgICAgICA8QnV0dG9uVjIgb25DbGljaz17KCkgPT4gc2V0RXhwYW5kZWQoKHApID0+ICFwKX0gdmFyaWFudD1cIm91dGxpbmVcIj5cbiAgICAgICAgICB7dChgcmVsYXRlZC5zaG93JHtleHBhbmRlZCA/ICdMZXNzJyA6ICdNb3JlJ31gKX1cbiAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICkgOiBudWxsfVxuICAgIDwvc2VjdGlvbj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var RelatedArticleListV2 = function RelatedArticleListV2(_ref2) {
   var _ref2$children = _ref2.children,
     children = _ref2$children === void 0 ? [] : _ref2$children,
     articleCount = _ref2.articleCount,
     _ref2$headingLevel = _ref2.headingLevel,
-    headingLevel = _ref2$headingLevel === void 0 ? 'h3' : _ref2$headingLevel;
+    headingLevel = _ref2$headingLevel === void 0 ? 'h3' : _ref2$headingLevel,
+    headingButtons = _ref2.headingButtons,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     expanded = _useState2[0],
@@ -89,11 +108,13 @@ var RelatedArticleListV2 = function RelatedArticleListV2(_ref2) {
   var childrenToShow = (0, _react.useMemo)(function () {
     return childCount > 2 && !expanded ? children === null || children === void 0 ? void 0 : children.slice(0, 2) : children;
   }, [childCount, children, expanded]);
-  return (0, _jsxRuntime.jsxs)("section", _objectSpread(_objectSpread({}, classes('')), {}, {
-    children: [(0, _jsxRuntime.jsx)(_SectionHeading["default"], {
-      headingLevel: headingLevel,
-      className: classes('component-title').className,
-      children: t('related.title')
+  return (0, _jsxRuntime.jsxs)("section", _objectSpread(_objectSpread(_objectSpread({}, classes('')), rest), {}, {
+    children: [(0, _jsxRuntime.jsxs)(HeadingWrapper, {
+      children: [(0, _jsxRuntime.jsx)(_SectionHeading["default"], {
+        headingLevel: headingLevel,
+        className: classes('component-title').className,
+        children: t('related.title')
+      }), headingButtons]
     }), (0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, classes('articles')), {}, {
       children: childrenToShow
     })), childCount > 2 ? (0, _jsxRuntime.jsx)(_button.ButtonV2, {

package/lib/Search/ToggleSearchButton.js

@@ -27,7 +27,12 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var props = ['hideOnNarrowScreen', 'hideOnWideScreen', 'ndlaFilm'];
+var shouldForwardProp = function shouldForwardProp(p) {
+  return !props.includes(p);
+};
 var StyledButton = /*#__PURE__*/(0, _base["default"])(_button.ButtonV2, {
+  shouldForwardProp: shouldForwardProp,
   target: "e18v7i6v1",
   label: "StyledButton"
 })("background:", function (p) {
@@ -40,11 +45,11 @@ var StyledButton = /*#__PURE__*/(0, _base["default"])(_button.ButtonV2, {
   from: _core.breakpoints.desktop
 }), "{display:", function (p) {
   return p.hideOnWideScreen ? 'none' : 'flex';
-}, ";margin-right:", _core.spacing.nsmall, ";padding:", _core.spacing.small, " ", _core.spacing.normal, ";}&:hover,&:focus,&:active{border:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvZ2dsZVNlYXJjaEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJ3RCIsImZpbGUiOiJUb2dnbGVTZWFyY2hCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgc3BhY2luZywgc3BhY2luZ1VuaXQsIGJyZWFrcG9pbnRzLCBtcSwgbWlzYywgZm9udHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgU2VhcmNoIH0gZnJvbSAnQG5kbGEvaWNvbnMvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvblByb3BzLCBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblYyKTxTdHlsZWRCdXR0b25Qcm9wcz5gXG4gIGJhY2tncm91bmQ6ICR7KHApID0+IChwLm5kbGFGaWxtID8gY29sb3JzLm5kbGFGaWxtLmZpbG1Db2xvckJyaWdodCA6IGNvbG9ycy5icmFuZC5ncmV5TGlnaHRlcil9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiAkeyhwKSA9PiAocC5oaWRlT25OYXJyb3dTY3JlZW4gPyAnbm9uZScgOiAnZmxleCcpfTtcbiAgY29sb3I6ICR7KHApID0+IChwLm5kbGFGaWxtID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmdVbml0ICogMC43NX1weCAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLm1lZGl1bX07XG5cbiAgLmMtaWNvbiB7XG4gICAgaGVpZ2h0OiAyNHB4O1xuICAgIHdpZHRoOiAyNHB4O1xuICB9XG5cbiAgJHtmb250cy5zaXplcygnMTZweCcsICczMnB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgZGlzcGxheTogJHsocCkgPT4gKHAuaGlkZU9uV2lkZVNjcmVlbiA/ICdub25lJyA6ICdmbGV4Jyl9O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLm5zbWFsbH07XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICAmOmhvdmVyLFxuICAmOmZvY3VzLFxuICAmOmFjdGl2ZSB7XG4gICAgYm9yZGVyOiAwO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRTcGFuID0gc3R5bGVkLnNwYW5gXG4gIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLm5vcm1hbH07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuYDtcblxuY29uc3QgVG9nZ2xlU2VhcmNoQnV0dG9uID0gKHsgY2hpbGRyZW4sIG5kbGFGaWxtLCBoaWRlT25OYXJyb3dTY3JlZW4sIGhpZGVPbldpZGVTY3JlZW4sIC4uLnJlc3QgfTogUHJvcHMpID0+IChcbiAgPFN0eWxlZEJ1dHRvblxuICAgIG5kbGFGaWxtPXtuZGxhRmlsbX1cbiAgICBoaWRlT25OYXJyb3dTY3JlZW49e2hpZGVPbk5hcnJvd1NjcmVlbn1cbiAgICBoaWRlT25XaWRlU2NyZWVuPXtoaWRlT25XaWRlU2NyZWVufVxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIHsuLi5yZXN0fVxuICA+XG4gICAgPFN0eWxlZFNwYW4+e2NoaWxkcmVufTwvU3R5bGVkU3Bhbj5cbiAgICA8U2VhcmNoIC8+XG4gIDwvU3R5bGVkQnV0dG9uPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlU2VhcmNoQnV0dG9uO1xuIl19 */"));
+}, ";margin-right:", _core.spacing.nsmall, ";padding:", _core.spacing.small, " ", _core.spacing.normal, ";}&:hover,&:focus,&:active{border:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvZ2dsZVNlYXJjaEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIrRSIsImZpbGUiOiJUb2dnbGVTZWFyY2hCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgc3BhY2luZywgc3BhY2luZ1VuaXQsIGJyZWFrcG9pbnRzLCBtcSwgbWlzYywgZm9udHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgU2VhcmNoIH0gZnJvbSAnQG5kbGEvaWNvbnMvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvblByb3BzLCBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuY29uc3QgcHJvcHMgPSBbJ2hpZGVPbk5hcnJvd1NjcmVlbicsICdoaWRlT25XaWRlU2NyZWVuJywgJ25kbGFGaWxtJ107XG5cbmNvbnN0IHNob3VsZEZvcndhcmRQcm9wID0gKHA6IHN0cmluZykgPT4gIXByb3BzLmluY2x1ZGVzKHApO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uVjIsIHsgc2hvdWxkRm9yd2FyZFByb3AgfSk8U3R5bGVkQnV0dG9uUHJvcHM+YFxuICBiYWNrZ3JvdW5kOiAkeyhwKSA9PiAocC5uZGxhRmlsbSA/IGNvbG9ycy5uZGxhRmlsbS5maWxtQ29sb3JCcmlnaHQgOiBjb2xvcnMuYnJhbmQuZ3JleUxpZ2h0ZXIpfTtcbiAgYm9yZGVyLXJhZGl1czogJHttaXNjLmJvcmRlclJhZGl1c307XG4gIGJvcmRlcjogMDtcbiAgZGlzcGxheTogJHsocCkgPT4gKHAuaGlkZU9uTmFycm93U2NyZWVuID8gJ25vbmUnIDogJ2ZsZXgnKX07XG4gIGNvbG9yOiAkeyhwKSA9PiAocC5uZGxhRmlsbSA/ICcjZmZmJyA6IGNvbG9ycy5icmFuZC5wcmltYXJ5KX07XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nVW5pdCAqIDAuNzV9cHggJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5tZWRpdW19O1xuXG4gIC5jLWljb24ge1xuICAgIGhlaWdodDogMjRweDtcbiAgICB3aWR0aDogMjRweDtcbiAgfVxuXG4gICR7Zm9udHMuc2l6ZXMoJzE2cHgnLCAnMzJweCcpfTtcblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIGRpc3BsYXk6ICR7KHApID0+IChwLmhpZGVPbldpZGVTY3JlZW4gPyAnbm9uZScgOiAnZmxleCcpfTtcbiAgICBtYXJnaW4tcmlnaHQ6ICR7c3BhY2luZy5uc21hbGx9O1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIH1cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyxcbiAgJjphY3RpdmUge1xuICAgIGJvcmRlcjogMDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkU3BhbiA9IHN0eWxlZC5zcGFuYFxuICBtYXJnaW4tcmlnaHQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbmA7XG5cbmNvbnN0IFRvZ2dsZVNlYXJjaEJ1dHRvbiA9ICh7IGNoaWxkcmVuLCBuZGxhRmlsbSwgaGlkZU9uTmFycm93U2NyZWVuLCBoaWRlT25XaWRlU2NyZWVuLCAuLi5yZXN0IH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRCdXR0b25cbiAgICBuZGxhRmlsbT17bmRsYUZpbG19XG4gICAgaGlkZU9uTmFycm93U2NyZWVuPXtoaWRlT25OYXJyb3dTY3JlZW59XG4gICAgaGlkZU9uV2lkZVNjcmVlbj17aGlkZU9uV2lkZVNjcmVlbn1cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICB7Li4ucmVzdH1cbiAgPlxuICAgIDxTdHlsZWRTcGFuPntjaGlsZHJlbn08L1N0eWxlZFNwYW4+XG4gICAgPFNlYXJjaCAvPlxuICA8L1N0eWxlZEJ1dHRvbj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFRvZ2dsZVNlYXJjaEJ1dHRvbjtcbiJdfQ== */"));
 var StyledSpan = /*#__PURE__*/(0, _base["default"])("span", {
   target: "e18v7i6v0",
   label: "StyledSpan"
-})("margin-right:", _core.spacing.normal, ";font-weight:", _core.fonts.weight.normal, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvZ2dsZVNlYXJjaEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUQ4QiIsImZpbGUiOiJUb2dnbGVTZWFyY2hCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgc3BhY2luZywgc3BhY2luZ1VuaXQsIGJyZWFrcG9pbnRzLCBtcSwgbWlzYywgZm9udHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgU2VhcmNoIH0gZnJvbSAnQG5kbGEvaWNvbnMvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvblByb3BzLCBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblYyKTxTdHlsZWRCdXR0b25Qcm9wcz5gXG4gIGJhY2tncm91bmQ6ICR7KHApID0+IChwLm5kbGFGaWxtID8gY29sb3JzLm5kbGFGaWxtLmZpbG1Db2xvckJyaWdodCA6IGNvbG9ycy5icmFuZC5ncmV5TGlnaHRlcil9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiAkeyhwKSA9PiAocC5oaWRlT25OYXJyb3dTY3JlZW4gPyAnbm9uZScgOiAnZmxleCcpfTtcbiAgY29sb3I6ICR7KHApID0+IChwLm5kbGFGaWxtID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmdVbml0ICogMC43NX1weCAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLm1lZGl1bX07XG5cbiAgLmMtaWNvbiB7XG4gICAgaGVpZ2h0OiAyNHB4O1xuICAgIHdpZHRoOiAyNHB4O1xuICB9XG5cbiAgJHtmb250cy5zaXplcygnMTZweCcsICczMnB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgZGlzcGxheTogJHsocCkgPT4gKHAuaGlkZU9uV2lkZVNjcmVlbiA/ICdub25lJyA6ICdmbGV4Jyl9O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLm5zbWFsbH07XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICAmOmhvdmVyLFxuICAmOmZvY3VzLFxuICAmOmFjdGl2ZSB7XG4gICAgYm9yZGVyOiAwO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRTcGFuID0gc3R5bGVkLnNwYW5gXG4gIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLm5vcm1hbH07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuYDtcblxuY29uc3QgVG9nZ2xlU2VhcmNoQnV0dG9uID0gKHsgY2hpbGRyZW4sIG5kbGFGaWxtLCBoaWRlT25OYXJyb3dTY3JlZW4sIGhpZGVPbldpZGVTY3JlZW4sIC4uLnJlc3QgfTogUHJvcHMpID0+IChcbiAgPFN0eWxlZEJ1dHRvblxuICAgIG5kbGFGaWxtPXtuZGxhRmlsbX1cbiAgICBoaWRlT25OYXJyb3dTY3JlZW49e2hpZGVPbk5hcnJvd1NjcmVlbn1cbiAgICBoaWRlT25XaWRlU2NyZWVuPXtoaWRlT25XaWRlU2NyZWVufVxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIHsuLi5yZXN0fVxuICA+XG4gICAgPFN0eWxlZFNwYW4+e2NoaWxkcmVufTwvU3R5bGVkU3Bhbj5cbiAgICA8U2VhcmNoIC8+XG4gIDwvU3R5bGVkQnV0dG9uPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlU2VhcmNoQnV0dG9uO1xuIl19 */"));
+})("margin-right:", _core.spacing.normal, ";font-weight:", _core.fonts.weight.normal, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvZ2dsZVNlYXJjaEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkQ4QiIsImZpbGUiOiJUb2dnbGVTZWFyY2hCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgc3BhY2luZywgc3BhY2luZ1VuaXQsIGJyZWFrcG9pbnRzLCBtcSwgbWlzYywgZm9udHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgU2VhcmNoIH0gZnJvbSAnQG5kbGEvaWNvbnMvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvblByb3BzLCBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZEJ1dHRvblByb3BzIHtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgaGlkZU9uV2lkZVNjcmVlbj86IGJvb2xlYW47XG4gIG5kbGFGaWxtPzogYm9vbGVhbjtcbn1cblxuY29uc3QgcHJvcHMgPSBbJ2hpZGVPbk5hcnJvd1NjcmVlbicsICdoaWRlT25XaWRlU2NyZWVuJywgJ25kbGFGaWxtJ107XG5cbmNvbnN0IHNob3VsZEZvcndhcmRQcm9wID0gKHA6IHN0cmluZykgPT4gIXByb3BzLmluY2x1ZGVzKHApO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uVjIsIHsgc2hvdWxkRm9yd2FyZFByb3AgfSk8U3R5bGVkQnV0dG9uUHJvcHM+YFxuICBiYWNrZ3JvdW5kOiAkeyhwKSA9PiAocC5uZGxhRmlsbSA/IGNvbG9ycy5uZGxhRmlsbS5maWxtQ29sb3JCcmlnaHQgOiBjb2xvcnMuYnJhbmQuZ3JleUxpZ2h0ZXIpfTtcbiAgYm9yZGVyLXJhZGl1czogJHttaXNjLmJvcmRlclJhZGl1c307XG4gIGJvcmRlcjogMDtcbiAgZGlzcGxheTogJHsocCkgPT4gKHAuaGlkZU9uTmFycm93U2NyZWVuID8gJ25vbmUnIDogJ2ZsZXgnKX07XG4gIGNvbG9yOiAkeyhwKSA9PiAocC5uZGxhRmlsbSA/ICcjZmZmJyA6IGNvbG9ycy5icmFuZC5wcmltYXJ5KX07XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nVW5pdCAqIDAuNzV9cHggJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5tZWRpdW19O1xuXG4gIC5jLWljb24ge1xuICAgIGhlaWdodDogMjRweDtcbiAgICB3aWR0aDogMjRweDtcbiAgfVxuXG4gICR7Zm9udHMuc2l6ZXMoJzE2cHgnLCAnMzJweCcpfTtcblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIGRpc3BsYXk6ICR7KHApID0+IChwLmhpZGVPbldpZGVTY3JlZW4gPyAnbm9uZScgOiAnZmxleCcpfTtcbiAgICBtYXJnaW4tcmlnaHQ6ICR7c3BhY2luZy5uc21hbGx9O1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIH1cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyxcbiAgJjphY3RpdmUge1xuICAgIGJvcmRlcjogMDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkU3BhbiA9IHN0eWxlZC5zcGFuYFxuICBtYXJnaW4tcmlnaHQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbmA7XG5cbmNvbnN0IFRvZ2dsZVNlYXJjaEJ1dHRvbiA9ICh7IGNoaWxkcmVuLCBuZGxhRmlsbSwgaGlkZU9uTmFycm93U2NyZWVuLCBoaWRlT25XaWRlU2NyZWVuLCAuLi5yZXN0IH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRCdXR0b25cbiAgICBuZGxhRmlsbT17bmRsYUZpbG19XG4gICAgaGlkZU9uTmFycm93U2NyZWVuPXtoaWRlT25OYXJyb3dTY3JlZW59XG4gICAgaGlkZU9uV2lkZVNjcmVlbj17aGlkZU9uV2lkZVNjcmVlbn1cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICB7Li4ucmVzdH1cbiAgPlxuICAgIDxTdHlsZWRTcGFuPntjaGlsZHJlbn08L1N0eWxlZFNwYW4+XG4gICAgPFNlYXJjaCAvPlxuICA8L1N0eWxlZEJ1dHRvbj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFRvZ2dsZVNlYXJjaEJ1dHRvbjtcbiJdfQ== */"));
 var ToggleSearchButton = function ToggleSearchButton(_ref) {
   var children = _ref.children,
     ndlaFilm = _ref.ndlaFilm,

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

@@ -150,6 +150,7 @@ declare const messages: {
             drawerButton: string;
             drawerTitle: string;
             description: {
+                all: string;
                 info1: string;
                 info2: string;
                 info3: string;

package/lib/locale/messages-en.js

@@ -1138,6 +1138,7 @@ var messages = _objectSpread(_objectSpread({
       drawerButton: 'Show folders and resources',
       drawerTitle: 'Folders and resources',
       description: {
+        all: 'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.\n\nIf you want to come back to the folder later, you can use the link the teacher gave you, or you can bookmark the page.',
         info1: 'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.',
         info2: 'You can use the menu to navigate through the articles.',
         info3: 'If you want to come back to the folder later, you can use the link the teacher gave you, or you can bookmark the page.'

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

@@ -150,6 +150,7 @@ declare const messages: {
             drawerButton: string;
             drawerTitle: string;
             description: {
+                all: string;
                 info1: string;
                 info2: string;
                 info3: string;

package/lib/locale/messages-nb.js

@@ -1138,6 +1138,7 @@ var messages = _objectSpread(_objectSpread({
       drawerButton: 'Vis mapper og ressurser',
       drawerTitle: 'Mapper og ressurser',
       description: {
+        all: 'I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk av læreren din, eller du kan bokmerke sida.',
         info1: 'I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.',
         info2: 'Du kan bla i artiklene ved å bruke menyen.',
         info3: 'Hvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk av læreren din, eller du kan bokmerke sida.'

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

@@ -150,6 +150,7 @@ declare const messages: {
             drawerTitle: string;
             learningpathUnsupported: string;
             description: {
+                all: string;
                 info1: string;
                 info2: string;
                 info3: string;

package/lib/locale/messages-nn.js

@@ -1138,6 +1138,7 @@ var messages = _objectSpread(_objectSpread({
       drawerTitle: 'Mapper og ressursar',
       learningpathUnsupported: 'Læringsstiar kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
+        all: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk av læraren din, eller du kan bokmerke sida.',
         info1: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.',
         info2: 'Du kan bla i artiklane ved å bruke menyen.',
         info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk av læraren din, eller du kan bokmerke sida.'

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

@@ -150,6 +150,7 @@ declare const messages: {
             drawerTitle: string;
             learningpathUnsupported: string;
             description: {
+                all: string;
                 info1: string;
                 info2: string;
                 info3: string;

package/lib/locale/messages-se.js

@@ -1138,6 +1138,7 @@ var messages = _objectSpread(_objectSpread({
       drawerTitle: 'Máhpat ja resurssat',
       learningpathUnsupported: 'Oahppanbálgát eai sáhte njuolga čájehuvvot juogaduvvon máhpain. Jus deaddilat liŋkka navigerenfálus gurut bealde, rahpasa bálggis ođđa siiddus.',
       description: {
+        all: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.\n\nSáhtát bláđet artihkkaliid fálu vehkiin.\n\nJus háliidat gávdnat máhpa maŋŋel fas, sáhtát geavahit seamma liŋkka maid oahpaheaddjis leat ožžon, dahje sáhtát girjemearka bidjat siidui.',
         info1: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.',
         info2: 'Sáhtát bláđet artihkkaliid fálu vehkiin.',
         info3: 'Jus háliidat gávdnat máhpa maŋŋel fas, sáhtát geavahit seamma liŋkka maid oahpaheaddjis leat ožžon, dahje sáhtát girjemearka bidjat siidui.'

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

@@ -150,6 +150,7 @@ declare const messages: {
             drawerTitle: string;
             learningpathUnsupported: string;
             description: {
+                all: string;
                 info1: string;
                 info2: string;
                 info3: string;

package/lib/locale/messages-sma.js

@@ -1138,6 +1138,7 @@ var messages = _objectSpread(_objectSpread({
       drawerTitle: 'Mapper og ressursar',
       learningpathUnsupported: 'Læringsstiar kan ikke visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
+        all: 'I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk av læreren din, eller du kan bokmerke sida.',
         info1: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.',
         info2: 'Du kan bla i artiklane ved å bruke menyen.',
         info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk av læraren din, eller du kan bokmerke sida.'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "35.1.2",
+  "version": "36.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@ndla/article-scripts": "^3.0.17",
     "@ndla/button": "^10.0.13",
-    "@ndla/carousel": "^3.0.13",
+    "@ndla/carousel": "^3.0.14",
     "@ndla/core": "^3.1.3",
     "@ndla/forms": "^4.2.22",
     "@ndla/hooks": "^2.0.4",
@@ -74,8 +74,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@ndla/types-backend": "0.2.1",
-    "@ndla/types-embed": "^1.1.0",
+    "@ndla/types-backend": "^0.2.5",
+    "@ndla/types-embed": "^1.1.1",
     "@types/reach__dialog": "^0.1.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1b34afb861f3e434ab2abb4bedab2680c42fe725"
+  "gitHead": "e614b60f6395582cd70ba813ebbb874d0ee56343"
 }

package/src/Embed/AudioEmbed.stories.tsx

@@ -0,0 +1,226 @@
+/**
+ * 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, StoryObj } from '@storybook/react';
+import { AudioEmbedData, AudioMeta } from '@ndla/types-embed';
+import AudioEmbed from './AudioEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const embedData: AudioEmbedData = {
+  resource: 'audio',
+  resourceId: '3000',
+  type: 'standard',
+  url: 'https://api.test.ndla.no/audio-api/v1/audio/3000',
+};
+
+const successData: AudioMeta = {
+  id: 3000,
+  revision: 1,
+  title: { title: "\nAin't I a Woman? by Sojourner Truth ", language: 'nb' },
+  audioFile: {
+    url: 'https://api.test.ndla.no/audio/files/ZZ1gkRc7.mp3',
+    mimeType: 'audio/mpeg',
+    fileSize: 3025206,
+    language: 'nb',
+  },
+  copyright: {
+    license: {
+      license: 'CC-BY-SA-4.0',
+      description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+      url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+    },
+    origin: '',
+    creators: [{ type: 'originator', name: 'Radio Metro AS' }],
+    processors: [],
+    rightsholders: [],
+  },
+  tags: { tags: ["Ain't I a Woman?", 'Sojourner Truth', 'speech', 'abolitionist'], language: 'nb' },
+  supportedLanguages: ['nb'],
+  audioType: 'standard',
+  manuscript: { manuscript: '', language: 'nb' },
+  created: '2022-02-28T17:09:28Z',
+  updated: '2022-02-28T17:09:28Z',
+};
+
+const podcastEmbedData: AudioEmbedData = {
+  resource: 'audio',
+  resourceId: '2712',
+  type: 'podcast',
+  url: 'https://api.test.ndla.no/audio-api/v1/audio/2712',
+};
+
+const podcastSuccessData: AudioMeta = {
+  id: 2712,
+  revision: 24,
+  title: { title: '\nLyddesign i radioreklame', language: 'nb' },
+  audioFile: {
+    url: 'https://api.test.ndla.no/audio/files/dThw7S4V.mp3',
+    mimeType: 'audio/mpeg',
+    fileSize: 46598400,
+    language: 'nb',
+  },
+  copyright: {
+    license: {
+      license: 'CC-BY-SA-4.0',
+      description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+      url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+    },
+    origin: '',
+    creators: [],
+    processors: [
+      { type: 'editorial', name: 'Albertine Aaberge' },
+      { type: 'linguistic', name: 'Totaltekst' },
+      { type: 'editorial', name: 'Maren Aftret-Sandal' },
+    ],
+    rightsholders: [{ type: 'rightsholder', name: 'Både Og' }],
+  },
+  tags: { tags: ['reklame', 'radio', 'lyddesign'], language: 'nb' },
+  supportedLanguages: ['nb', 'nn'],
+  audioType: 'podcast',
+  podcastMeta: {
+    introduction:
+      '\nHvordan bruker en profesjonell lyddesigner virkemidler og fortellertekniske grep for å skape stemning, få oss til å lytte på reklamen og til å kjøpe produktet som blir presentert?\n\nVert i studio er Andreas Veie-Rosvoll med gjesten Joachim Sandvik. Han er lyddesigner i produksjonsselskapet Både Og, som har lagd over 10.000 radioreklamer.',
+    coverPhoto: {
+      id: '60913',
+      url: 'https://api.test.ndla.no/image-api/raw/id/60913',
+      altText: 'Foto av smilende jente som kikker oppover mot teksten "Lytt deg gjennom mediefaget". ',
+    },
+    language: 'nb',
+  },
+  series: {
+    id: 4,
+    revision: 9,
+    title: { title: 'Lytt deg gjennom mediefaget', language: 'nb' },
+    description: {
+      description:
+        'I denne serien kan du lytte til mediefaglige temaer. Podkastene passer godt til elever i videregående skole, men også for deg som ønsker å lære mer om mediefaglige spørsmål.\n\nProgramledere som Andreas Veie-Rosvoll, Sarah Natasha Melbye og Jonis Josef snakker med ulike fagpersoner. De tar for seg rasisme i norske medier, psykisk helse på internett, mediepolitikk, mediehverdagen i 2030, samer i dagens samfunn, fakta og fiksjon, lyddesign i radioreklame, medier og makt, bærekraft og medieproduksjon, samarbeid i kreative prosesser med mer. ',
+      language: 'nb',
+    },
+    coverPhoto: {
+      id: '60913',
+      url: 'https://api.test.ndla.no/image-api/raw/id/60913',
+      altText: 'Foto av smilende jente som kikker oppover mot teksten "Lytt deg gjennom mediefaget". ',
+    },
+    supportedLanguages: ['nb', 'nn'],
+    hasRSS: true,
+  },
+  manuscript: {
+    manuscript:
+      '\nDeltakere:\nAndreas Veie-Rosvoll \u2013 Programleder \nJoachim Sandvik \u2013 JS\n\nHva gjør en lyddesigner?\n\nProgramleder: Hei, jeg heter Andreas Veie-Rosvoll. Godt lyddesign, hva er egentlig det? Hvis du har hørt på radio, har du garantert hørt én eller hundre radioreklamer før. Det produseres ganske mange reklamer hvert år, og min gjest i dag er lyddesigner på ganske mange av dem. Joachim Sandvik er lyddesigner i Både Og og har produsert lyden på et tusentall slike reklamer, er det ikke?\n\nJS: Det er over 10 000 \u2026\n\nProgramleder: Og derfor er det godt å snakke med deg om nøkkelen til å skru sammen en god radioreklame. For eksempel: Hva må man tenke på? Hvordan holder man seg innenfor ganske trange tidsrammer? Hva slags effekter skal man bruke? \n\n(En radioreklame lagd av Både Og for AJ Produkter spilles av.)\n\nProgramleder: Der hørte vi et eksempel på en radioreklame som Både Og har produsert. Men hva er egentlig en radioreklame, Joachim?\n\nJS: En radioreklame er en metode for å si til mennesker som hører den, at du har et produkt eller en tjeneste, noe du vil selge eller informere om. Eller du kan ønske å gi bedriften eller organisasjonen din en profil.\n\nProgramleder: Så hvis jeg har salg på kontormøbler akkurat nå, og jeg vil at folk som hører på radio, skal høre det, så kan det hende at jeg går til Både Og og får noen til å lage en reklame for meg?\n\nJS: Det er riktig.\n\nProgramleder: La oss si at det kommer noen skuespillere i dag \u2013 det skal lages en radioreklame, og du skal være lyddesigner. Hvilket forarbeid gjør dere?\n\nJS: Forarbeidet er som regel at en manusforfatter eller en tekstforfatter, som her på huset er det samme som en regissør, kommer inn med et manus. Der er det skrevet noen ord som skuespillerne skal framføre. Av og til er det også lagt inn en forklaring på hvor vi er \u2013 er vi for eksempel på fjellet, på en restaurant eller ved kjøkkenbordet? Det legger noen føringer for hvordan vi kan lage et lyddesign i etterkant. Det sier også noe om måten skuespillerne skal lese manuset på. \n\nDet kan også være at et reklamebyrå har skrevet et manus. Da har de gjerne en tydelig tanke bak reklamen, som kanskje har tilknytning til et konsept som de skal ha på TV eller på reklameplakater og liknende. Når våre tekstforfattere og regissører skriver manus, står det gjerne «Mann» og «Dame», og det er skuespillerne. Da er det gjerne litt løs prat der to mennesker sitter et sted eller går en tur og prater sammen om et problem som den ene har. Så tipser gjerne den andre om løsningen på problemet.\n\nProgramleder: «Kjøp bla-bla, så \u2026»?\n\nJS: Ja, og så kutter man der og kommer til det som kalles for en voiceover, som er selve reklamebudskapet.\n\nProgramleder: Da kommer det en trygg og god stemme og litt musikk, kanskje?\n\nJS: Ja, gjerne det.\n\nProgramleder: Dette er kanskje hovedjobben din, men hva må du gjøre når skuespillerne kommer?\n\nJS: Først informerer jeg skuespillerne om hva de skal gjøre den dagen.\n\nProgramleder: Ja, for det vet de kanskje ikke?\n\nJS: Nei. De har fått beskjed om at de skal jobbe med for eksempel et sjokolademerke. Så leser jeg gjennom manus, og de kommer kanskje med innspill til hvordan teksten kan leses. Hvis skuespillerne har dialekt, spør de gjerne om manuset skal leses på dialekt eller østnorsk. Når vi har vært gjennom dette, plasserer vi skuespillerne bak mikrofonen. Regissøren, som gjerne sitter på min høyre side, sier noen velvalgte ord om hvordan han eller hun vil ha teksten levert. Så sier vi «vær så god!» og trykker på «REC».\n\nProgramleder: Og når opptaket er ferdig og alle går hjem, det er da din jobb virkelig begynner. Hva gjør du da?\n\nJS: Da sitter vi lyddesignere alene med vårt eget sinn. Allerede i opptakssituasjonen har vi begynt å skape et bilde i hodet av hvordan reklamen kan være: hvor situasjonen skal foregå, om det er skritt som kommer inn, og så videre. Da er det jobben vår å formidle det bildet vi har i hodet, via lyd til dem som lytter.\n\nProgramleder: Det er ikke en enkel oppgave?\n\nJS: Etter hvert som man jobber masse med dette, får man jo noen innarbeidede måter å jobbe på og noen klassiske «go to»-lyder som ikke er så veldig lett gjenkjennelige. Vi har en lyd som heter «Stille formiddag», og den høres nettopp ut som det, så den bruker vi mye for å skape et bilde av at skuespillerne er utendørs. Den gir et godt grunnlag.\n\nProgramleder: Har dere en såkalt lydbank hvor dere kan søke etter for eksempel «Stille formiddag»?\n\nJS: Ja, vi har et bibliotek som heter Soundly, og der henter vi alle lydene våre. Hvis de ikke finnes, må de lages, og det skjer ofte.\n\nProgramleder: La oss si at det ikke finnes en lyd av skrittene fra en som går med høye hæler, og så skal du skape det. Hva gjør du da?\n\nJS: Da må vi ut og finne høye hæler og ta opp lyden av skrittene med mikrofonen. Hvis vi gjør det i studioet, henter vi parkett eller liknende og tar på oss høye hæler, eller finner en som kan gå i dem. Vi lyddesignere har ofte en tanke om akkurat hvordan skrittene skal høres ut. Skrittene skal for eksempel gå til høyre, venstre eller stoppe lite grann, og kanskje det skal høres ut som om personen snur seg på hælen og drar foten. \n\nProgramleder: Det er sånt man kanskje ikke tenker på når man hører radioreklame \u2013 at noen har sittet og tenkt at nå må jeg lage en lyd av noen som snur litt på hælen, men det er en del av jobben din?\n\nJS: Ja. Vår jobb er egentlig å være mest mulig usynlig eller uhørlig, fordi det vi formidler, er en eller annen form for realitet \u2013 det skal i alle fall oppleves sånn. Hvis lytteren ikke opplever det som sant, for eksempel hvis man putter inn lyden av en dinosaur på et helt feil sted, vil det ødelegge illusjonen av bildet vi har prøvd å skape. Dette er den største og en av de morsomste utfordringene med lyddesign. Hvordan kan jeg på kortest mulig tid skape følelsen av å være for eksempel på fjellet, på en rockekonsert, ute på tur i skogen eller inne på fødestua? Og så må jeg klare å få fortalt alt som står i manuset, og i tillegg må jeg ha en voiceover og musikk.\n\nProgramleder: Hvor kreativ får du lov til å være i denne prosessen?\n\nJS: Jeg får være så kreativ som jeg vil. Regissøren eller tekstforfatteren som har skrevet manuset, får det som kalles for et tilbud. Rundt juletider får vi ofte forespørsler om romantiske scener hvor folk skal kose seg i jula: «Det sitter et par og skal kose seg foran peisen, og vi hører lyden av peis \u2013 og det er kjempekoselig.» For å få til lyden av to mennesker som koser seg foran peisen, kreves det flere lyder. Du må ha lyden av peis, den litt rumlende og mørke, deilige lyden. Men når man tar den lyden inn i radioverdenen og bildeverdenen, må man skru den så høyt opp for å få rumlelyden, og da høres det jo bare ut som et brennende inferno. Det er ikke spesielt hyggelig eller romantisk på hytta \u2026 Så lyden av peis må balanseres ut ved at vi putter på litt knitring av peis, litt rumling, litt romantisk musikk og to rødvinsglass som skåler.\n\nProgramleder: Og alt dette lager du selv?\n\nJS: Dette må jeg lage selv, og så må jeg balansere lydene og finne ut hva som er viktig i scenen. Man kan for eksempel starte i peisen og bevege seg litt ut, som om et kamera zoomer ut. Eller man kan starte ved høyttalerne og høre den romantiske musikken, før peisen kommer inn og alt ender i en liten rødvinsskål og kanskje litt humring fra skuespillerne.\n\nProgramleder: Sånn at man får et inntrykk av at noen sitter på et hyggelig sted og koser seg skikkelig!\n\nJS: Ja. Og man trenger ikke være musiker for å være lyddesigner.\n\nProgramleder: Hva mener du med det?\n\nJS: Jeg er ikke musiker, men jeg klarer å telle til fire; man trenger å ha en form for takt i kroppen slik at man kan si «1, 2, 3, her skal vi klippe». Men man trenger altså ikke å være musiker for å være lyddesigner, man trenger bare å ha en indre tanke om hvordan man skal visualisere ting, og den kommer etter hvert, med erfaring. Da blir det helt tydelig hva man trenger for å lage forskjellige scener. Mange tenker at man skal bruke musikk hele tida, fordi musikk er følelser, men musikken skal kun være der hvis det hever det emosjonelle i scenen din. Også i film må man være forsiktig med musikkbruken. Man må også være forsiktig fordi det er noen som eier musikken.\n\nProgramleder: Hvor finner dere musikk?\n\nJS: Vi har et arkiv som heter Upright, som vi bruker per dags dato. Der ligger det en del rettighetsfri musikk, som det heter. Vi har gjort en avtale med dem om bruk og innrapportering \u2013 for alt skal rapporteres inn. Alle som har lagd musikk som de har levert til den databasen, skal få pengene sine.\n\nProgramleder: Men når musikken ligger i databasen, da er det fritt å bruke den?\n\nJS: For oss er det fritt å bruke musikken til radio, TV og podkast.\n\nProgramleder: Så hvis man søker på «scary music» eller «happy, optimistic music», hva kan man få opp da?\n\nJS: Da kan man få opp noe sånt som dette.\n\n(En optimistisk melodi spilles av.)\n\nProgramleder: Det er fint.\n\nJS: Ja, og musikk kan brukes til mye rart. Men igjen: Hvis musikken ikke hever det emosjonelle nivået i scenen din, skal den ikke være der.\n\nProgramleder: Nå har vi skrudd sammen radioreklamen. Den er fin, innenfor tidsrammen, og alle er fornøyde. Hva gjør du nå, før du sender den inn til radiokanalene som skal ha den? Hva er det tekniske som må gjøres?\n\nJS: Først og fremst må man gjøre en miks, altså balansere ut lydene. Det er for eksempel veldig rart hvis noen sier «ha det» og begynner å gå, men så er det bare stemmen som blir lavere, ikke skrittene. Men noen bør ha reagert på det tidligere i produksjonen, så man kan ha rettet opp i det allerede. I miksen bruker vi det som heter kompressorer, og det de gjør, er å flate ut de høye lydene og strekke opp de lave lydene. Desto «hardere» man gjør det, desto flatere blir lydbildet. Da høres alt like høyt ut, og det er heller ikke bra, så balanse er viktig. \n\nProgramleder: La oss si at det går bra under opptaket, men du sitter igjen med 40 sekunder og skal ha dem ned til 25. Hvordan angriper du den problemstillingen?\n\nJS: Da må man gå til manuset. Så store mengder er det vanskelig å klippe ned, så man må finne ut hva som er viktigst å ha med.\n\nProgramleder: Så man må «trimme fettet litt»?\n\nJS: Ja.\n\nProgramleder: Når du går tilbake til manuset og spør om du kan kutte noe, da trenger du hjelp \u2013 det er jo en del av samarbeidet du har med for eksempel manus og regi. Er du kreativt involvert i manuset under idémyldringen også?\n\nJS: Det er veldig individuelt fra lyddesigner til lyddesigner. Måten jeg liker å jobbe på, er å bli like overrasket som skuespillerne når vi leser manuset, for da stiller vi på likt nivå \u2013 såframt det ikke ligger en føring i manuset på hvor situasjonen skal foregå. Og så må man stille inn radioreklamen til nivåene som radiostasjonene skal ha. Når man sender radioreklame, er det et krav at reklamen ikke skal være høyere enn programinnholdet.\n\nProgramleder: I volum?\n\nJoachim: Ja, i volum. Dette har vært et krav til TV-reklame en stund, etter at mange har klaget over at lyden på reklamen er høyere enn TV-programmet. Nå har det også kommet en standard for radioreklame. Vi skal ikke utdype så mye om den, men den heter R128, som er det vi leverer til for eksempel P4, mens Radio Norge skal ha noe som heter «\u20136 dBFS».\n\nProgramleder: Hvis kunden vil tilbake til tegnebrettet \u2013 altså at de vil starte på nytt fordi de er ikke fornøyde etter å ha fått det ferdige produktet \u2013 hva skjer da?\n\nJS: Da må man bare gjøre det på nytt. Vi skisserer ut en radiospot først, og så sier vi til kunden: «Dette er det vi har lagd, sånn kan det høres ut. Det er bare en skisse; du kan komme med innspill til teksten, og du kan gjøre hva du vil av endringer.» Når vi har gjort det et par ganger fram og tilbake, er kunden fornøyd. Da produserer vi ferdig radioreklamen basert på det kunden vil si, og det vi mener at kunden bør si. Men hvis det skjer endringer i etterkant, må man gå inn og redigere ut det som eventuelt er feil, eller endre det budskapet som skal endres. Og så gjør man rett og slett bare den operasjonen en gang til.\n\nProgramleder: Når du har lagd noe og føler at det begynner å bli ferdig \u2013 hva gjør du da, og hvordan kan du kvalitetssikre produktet? Hvem spør du om å høre på reklamen?\n\nJS: Da må jeg ta det via regissøren først. Regissøren godkjenner eller kommer med innspill, og så gjør vi eventuelle endringer.\n\nProgramleder: Hva slags innspill kan det være?\n\nJS: Det kan være at musikken er for høy, at det høres urealistisk ut, eller detaljer som at skritt må fjernes, at det er lyden av feil type dør, eller spørsmål om hva elefanten gjør der \u2026 Alt fra små til større ting. Når dette er i mål, sender regissøren reklamen videre til kunden, som hører på og kommer med sine tilbakemeldinger.\n\nProgramleder: Kunden tenker kanskje mye på målgruppa for reklamen. Hva kan de si om det?\n\nJS: Som regel går innspillene på det tekniske, for eksempel om lyden er litt høy eller lav, og om ordene kommer tydelig nok fram. Da må vi gå inn og se om det er noe med miksen, eller om skuespillernes diksjon rett og slett er for dårlig. \n\nProgramleder: Kundene har kanskje en idé om hvor lang eller kort en radioreklame skal være. De skal gjerne være litt korte \u2013 hvorfor det?\n\nJS: På radio kjøper man sendetid på lufta, og en lang radioreklame koster mer enn en kort en.\n\nProgramleder: Hva koster for eksempel 20 sekunder?\n\nJS: Det går i intervaller: 10, 15, 20 eller 25 sekunder. Hvis du har en radioreklame som er 23 sekunder lang, betaler du for 25 sekunder. Men hvis det er 23 sekunder som skal til for å gjøre reklamen god, så må man ikke bruke opp de siste to sekundene. Man lager den radioreklamen som gjør den jobben den skal. Det er litt vanskelig å forklare det for dem som styrer pengene. Man jobber jo ofte under begrensninger, som budsjett eller tid.\n\nProgramleder: Har du noen eksempler på skikkelig godt lyddesign? Da tenker jeg først og fremst på radioreklamer. Det kan godt være noe du har gjort selv, eller noe du har hørt.\n\nJS: Jeg har en personlig favoritt, som en kollega gjorde for Color Line Superspeed for mange år siden. Vi kan kanskje høre den?\n\n(Den nevnte radioreklamen spilles av.)\n\nJS: For det første forteller den en helt tydelig historie fra a til å \u2013 en historie om et sted som ikke finnes. Jeg må skape alle bildene i hodet basert på det jeg hører, men det blir så tydelig. Man står på en strand, man hører måker og forbinder det med sjø, og man hører hestene som løper. Og musikken hever det emosjonelle nivået og bidrar til at det er en stor scene vi er vitne til. Hestene kommer nærmere og nærmere, og så er det bare en mann. Dette skaper veldig gode bilder.\n\nProgramleder: Et rikt bilde?\n\nJS: Ja, rikt er et godt ord. Hestene begynner å løpe, og når de kommer seg under vann, skaper de en ny historie \u2013 det er altså en utvikling her. Alt dette skjer på omkring 35 sekunder. I radioreklame har man ganske dårlig tid på seg, men to sekunder kan samtidig fortelle veldig mye.\n\nProgramleder: Fantastisk. Har du noen gode tips til morgendagens lyddesignere?\n\nJS: Prøv! Det er mange som synes at lyd virker så vanskelig, man må liksom være musiker og spille et instrument for å holde på med lyd. Det er veldig mange eksperter der ute som mener masse om mikrofoner og forsterkere og gitarer og alt mulig, som man selv kanskje ikke skjønner noe av. Jeg kan heller ingenting om det. Jeg vet hva en gitar er, og om du spiller på den, kommer det gitarlyd ut. Er mikrofonen dyr, er den sikkert god. Er den veldig billig, er den kanskje litt dårlig. Men lyd er ikke farlig. Lyd er utrolig lett å holde på med fordi det er så tilgjengelig. Det ligger masse lyd på internett som er gratis. Man kan prøve seg ut og leke med det. Og nok en gang: Man trenger ikke å være musiker for å være lyddesigner!\n\nProgramleder: Jeg synes det er et fint sted å avslutte på. Joachim Sandvik, takk for at du kom i dag.\n\n\n\n',
+    language: 'nb',
+  },
+  created: '2021-06-25T08:55:31Z',
+  updated: '2022-03-26T07:49:09Z',
+  imageMeta: {
+    id: '60913',
+    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/60913',
+    title: { title: 'Podkastserie: Lytt deg gjennom mediefaget (samme på bm og nn)', language: 'nb' },
+    alttext: {
+      alttext: 'Foto av smilende jente som kikker oppover mot teksten "Lytt deg gjennom mediefaget". ',
+      language: 'nb',
+    },
+    imageUrl: 'https://api.test.ndla.no/image-api/raw/NkEZw98N.jpg',
+    size: 525903,
+    contentType: 'image/jpeg',
+    copyright: {
+      license: {
+        license: 'CC-BY-SA-4.0',
+        description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+        url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+      },
+      origin: '',
+      creators: [{ type: 'photographer', name: 'Tom Knudsen' }],
+      processors: [{ type: 'processor', name: 'Thomas Nupen' }],
+      rightsholders: [],
+    },
+    tags: {
+      tags: ['lytt gjennom mediefaget', 'podcastserie', 'podcast', 'mediefaget', 'medier', 'podkastserie', 'podkast'],
+      language: 'nb',
+    },
+    caption: { caption: ' ', language: 'nb' },
+    supportedLanguages: ['nb', 'nn'],
+    created: '2021-12-15T13:32:03Z',
+    createdBy: 'lwkLpeEV_VUmCkly1SJ3WTkg',
+    modelRelease: 'yes',
+    imageDimensions: { width: 1405, height: 1405 },
+  },
+};
+
+const meta: Meta<typeof AudioEmbed> = {
+  title: 'Enkle komponenter/Embeds/AudioEmbed',
+  component: AudioEmbed,
+  tags: ['autodocs'],
+  args: {
+    articlePath: undefined,
+  },
+  decorators: [
+    (Story) => (
+      <div className="o-wrapper">
+        <article className="c-article c-article--clean">
+          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+            <section>
+              <Story />
+            </section>
+          </section>
+        </article>
+      </div>
+    ),
+  ],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
+  args: {
+    embed: {
+      resource: 'audio',
+      status: 'success',
+      seq: 1,
+      embedData: embedData,
+      data: successData,
+    },
+  },
+};
+
+export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
+  args: {
+    embed: {
+      resource: 'audio',
+      status: 'error',
+      seq: 1,
+      embedData: embedData,
+    },
+  },
+};
+
+export const Podcast: StoryObj<typeof AudioEmbed> = {
+  args: {
+    embed: {
+      resource: 'audio',
+      status: 'success',
+      seq: 1,
+      embedData: podcastEmbedData,
+      data: podcastSuccessData,
+    },
+  },
+};
+
+export const PodcastFailed: StoryObj<typeof AudioEmbed> = {
+  args: {
+    embed: {
+      resource: 'audio',
+      status: 'error',
+      seq: 1,
+      embedData: podcastEmbedData,
+    },
+  },
+};
+
+AudioEmbedStory.storyName = 'AudioEmbed';