@ndla/ui 55.0.15-alpha.0 → 55.0.17-alpha.0

package/es/AudioPlayer/Controls.js

@@ -14,7 +14,7 @@ import { Done } from "@ndla/icons/editor";
 import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { visuallyHidden } from "@ndla/styled-system/patterns";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ControlsWrapper = styled("div", {
   base: {
     borderBlockStart: "1px solid",
@@ -183,39 +183,39 @@ const Controls = _ref => {
       setVolumeValue(details.value[0]);
     }
   };
-  return _jsxs("div", {
-    children: [_jsx("audio", {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("audio", {
       ref: audioRef,
       src: src,
       title: title,
       preload: "metadata"
-    }), _jsxs(ControlsWrapper, {
-      children: [_jsx(Back15SecButton, {
+    }), /*#__PURE__*/_jsxs(ControlsWrapper, {
+      children: [/*#__PURE__*/_jsx(Back15SecButton, {
         variant: "tertiary",
         title: t("audio.controls.rewind15sec"),
         "aria-label": t("audio.controls.rewind15sec"),
         onClick: () => onSeekSeconds(-15),
-        children: _jsx(Back15, {})
-      }), _jsx(PlayButton, {
+        children: /*#__PURE__*/_jsx(Back15, {})
+      }), /*#__PURE__*/_jsx(PlayButton, {
         "aria-label": t(playing ? t("audio.pause") : t("audio.play")),
         variant: "primary",
         onClick: togglePlay,
-        children: playing ? _jsx(Pause, {}) : _jsx(Play, {})
-      }), _jsx(Forward15SecButton, {
+        children: playing ? /*#__PURE__*/_jsx(Pause, {}) : /*#__PURE__*/_jsx(Play, {})
+      }), /*#__PURE__*/_jsx(Forward15SecButton, {
         variant: "tertiary",
         title: t("audio.controls.forward15sec"),
         "aria-label": t("audio.controls.forward15sec"),
         onClick: () => onSeekSeconds(15),
-        children: _jsx(Forward15, {})
-      }), _jsxs(ProgressWrapper, {
-        children: [_jsx(Text, {
+        children: /*#__PURE__*/_jsx(Forward15, {})
+      }), /*#__PURE__*/_jsxs(ProgressWrapper, {
+        children: [/*#__PURE__*/_jsx(Text, {
           textStyle: "label.medium",
           asChild: true,
           consumeCss: true,
-          children: _jsx("div", {
+          children: /*#__PURE__*/_jsx("div", {
             children: formatTime(currentTime)
           })
-        }), _jsx(SliderRoot, {
+        }), /*#__PURE__*/_jsx(SliderRoot, {
           value: [audioRef.current?.currentTime ?? 0],
           defaultValue: [0],
           step: 1,
@@ -225,69 +225,69 @@ const Controls = _ref => {
             start: formatTime(Math.round(value.value)),
             end: formatTime(Math.round(audioRef.current?.duration ?? 0))
           }),
-          children: _jsxs(SliderControl, {
-            children: [_jsx(SliderTrack, {
-              children: _jsx(SliderRange, {})
-            }), _jsx(SliderThumb, {
+          children: /*#__PURE__*/_jsxs(SliderControl, {
+            children: [/*#__PURE__*/_jsx(SliderTrack, {
+              children: /*#__PURE__*/_jsx(SliderRange, {})
+            }), /*#__PURE__*/_jsx(SliderThumb, {
               index: 0,
-              children: _jsx(SliderHiddenInput, {})
+              children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
             })]
           })
-        }), _jsx(Text, {
+        }), /*#__PURE__*/_jsx(Text, {
           textStyle: "label.medium",
           asChild: true,
           consumeCss: true,
-          children: _jsxs("div", {
+          children: /*#__PURE__*/_jsxs("div", {
             children: ["-", formatTime(remainingTime)]
           })
         })]
-      }), _jsxs(StyledSelectRoot, {
+      }), /*#__PURE__*/_jsxs(StyledSelectRoot, {
         items: speedValues,
         value: [speedValue.toString()],
         onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
         positioning: {
           placement: "top"
         },
-        children: [_jsx(SelectLabel, {
+        children: [/*#__PURE__*/_jsx(SelectLabel, {
           css: visuallyHidden.raw(),
           children: t("audio.controls.selectSpeed")
-        }), _jsx(SelectControl, {
-          children: _jsx(SelectTrigger, {
+        }), /*#__PURE__*/_jsx(SelectControl, {
+          children: /*#__PURE__*/_jsx(SelectTrigger, {
             asChild: true,
-            children: _jsx(SpeedButton, {
+            children: /*#__PURE__*/_jsx(SpeedButton, {
               variant: "tertiary",
               title: t("audio.controls.selectSpeed"),
               "aria-label": t("audio.controls.selectSpeed"),
-              children: _jsx("span", {
+              children: /*#__PURE__*/_jsx("span", {
                 children: `${speedValue}x`
               })
             })
           })
-        }), _jsx(SelectPositioner, {
-          children: _jsx(SelectContent, {
-            children: speedValues.map(speed => _jsxs(SelectItem, {
+        }), /*#__PURE__*/_jsx(SelectPositioner, {
+          children: /*#__PURE__*/_jsx(SelectContent, {
+            children: speedValues.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
               item: speed,
-              children: [_jsxs(SelectItemText, {
+              children: [/*#__PURE__*/_jsxs(SelectItemText, {
                 children: [speed, "x"]
-              }), _jsx(SelectItemIndicator, {
-                children: _jsx(Done, {})
+              }), /*#__PURE__*/_jsx(SelectItemIndicator, {
+                children: /*#__PURE__*/_jsx(Done, {})
               })]
             }, speed))
           })
         })]
-      }), _jsxs(PopoverRoot, {
+      }), /*#__PURE__*/_jsxs(PopoverRoot, {
         positioning: {
           placement: "top"
         },
-        children: [_jsx(PopoverTrigger, {
+        children: [/*#__PURE__*/_jsx(PopoverTrigger, {
           asChild: true,
-          children: _jsx(VolumeButton, {
+          children: /*#__PURE__*/_jsx(VolumeButton, {
             variant: "tertiary",
             "aria-label": t("audio.controls.adjustVolume"),
-            children: _jsx(VolumeUp, {})
+            children: /*#__PURE__*/_jsx(VolumeUp, {})
           })
-        }), _jsx(PopoverContent, {
-          children: _jsxs(SliderRoot, {
+        }), /*#__PURE__*/_jsx(PopoverContent, {
+          children: /*#__PURE__*/_jsxs(SliderRoot, {
             orientation: "vertical",
             value: [volumeValue],
             min: 0,
@@ -295,15 +295,15 @@ const Controls = _ref => {
             defaultValue: [100],
             step: 1,
             onValueChange: handleVolumeSliderChange,
-            children: [_jsx(SliderLabel, {
+            children: [/*#__PURE__*/_jsx(SliderLabel, {
               css: visuallyHidden.raw(),
               children: t("audio.controls.adjustVolume")
-            }), _jsxs(StyledSliderControl, {
-              children: [_jsx(SliderTrack, {
-                children: _jsx(SliderRange, {})
-              }), _jsx(SliderThumb, {
+            }), /*#__PURE__*/_jsxs(StyledSliderControl, {
+              children: [/*#__PURE__*/_jsx(SliderTrack, {
+                children: /*#__PURE__*/_jsx(SliderRange, {})
+              }), /*#__PURE__*/_jsx(SliderThumb, {
                 index: 0,
-                children: _jsx(SliderHiddenInput, {})
+                children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
               })]
             })]
           })

package/es/AudioPlayer/SpeechControl.js

@@ -10,7 +10,7 @@ import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { VolumeUp } from "@ndla/icons/common";
 import { TooltipRoot, TooltipTrigger, TooltipContent, IconButton } from "@ndla/primitives";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SpeechControl = _ref => {
   let {
     src,
@@ -31,22 +31,22 @@ const SpeechControl = _ref => {
       }
     }
   };
-  return _jsxs("div", {
-    children: [_jsx("audio", {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("audio", {
       ref: audioRef,
       src: src,
       title: title,
       preload: "metadata"
-    }), _jsxs(TooltipRoot, {
-      children: [_jsx(TooltipTrigger, {
+    }), /*#__PURE__*/_jsxs(TooltipRoot, {
+      children: [/*#__PURE__*/_jsx(TooltipTrigger, {
         asChild: true,
-        children: _jsx(IconButton, {
+        children: /*#__PURE__*/_jsx(IconButton, {
           variant: "tertiary",
           "aria-label": t(`${type}.play`),
           onClick: togglePlay,
-          children: _jsx(VolumeUp, {})
+          children: /*#__PURE__*/_jsx(VolumeUp, {})
         })
-      }), _jsx(TooltipContent, {
+      }), /*#__PURE__*/_jsx(TooltipContent, {
         children: t(`${type}.play`)
       })]
     })]

package/es/BlogPost/BlogPost.js

@@ -12,7 +12,7 @@ import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Container = styled(SafeLink, {
   base: {
     display: "flex",
@@ -102,22 +102,22 @@ const BlogPost = _ref => {
   } = useTranslation();
   const href = getPossiblyRelativeUrl(url, path);
   const imageWidth = size === "large" ? 532 : 350;
-  return _jsxs(Container, {
+  return /*#__PURE__*/_jsxs(Container, {
     "data-size": size,
     to: href,
     size: size,
-    children: [_jsx(StyledHeading, {
+    children: [/*#__PURE__*/_jsx(StyledHeading, {
       className: "blog-title",
       asChild: true,
       consumeCss: true,
       textStyle: "title.large",
-      children: _jsx(Heading, {
+      children: /*#__PURE__*/_jsx(Heading, {
         children: parse(title)
       })
-    }), _jsx(StyledImg, {
+    }), /*#__PURE__*/_jsx(StyledImg, {
       src: `${metaImage.url}?width=${imageWidth}`,
       alt: metaImage.alt
-    }), !!author && _jsx(AuthorContainer, {
+    }), !!author && /*#__PURE__*/_jsx(AuthorContainer, {
       "aria-label": t("article.writtenBy", {
         authors: author
       }),

package/es/Breadcrumb/Breadcrumb.js

@@ -1,5 +1,3 @@
-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) 2016-present, NDLA.
  *
@@ -8,25 +6,24 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  *
  */
 
-import { useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { styled } from "@ndla/styled-system/jsx";
 import BreadcrumbItem from "./BreadcrumbItem";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const BreadcrumbNav = /*#__PURE__*/_styled("nav", {
-  target: "e1oxrjfx1",
-  label: "BreadcrumbNav"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCZ0MiLCJmaWxlIjoiQnJlYWRjcnVtYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBCcmVhZGNydW1iSXRlbSwgeyBJbmRleGVkQnJlYWRjcnVtYkl0ZW0sIFNpbXBsZUJyZWFkY3J1bWJJdGVtIH0gZnJvbSBcIi4vQnJlYWRjcnVtYkl0ZW1cIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbXM6IFNpbXBsZUJyZWFkY3J1bWJJdGVtW107XG4gIGNvbGxhcHNlRmlyc3Q/OiBib29sZWFuO1xuICBjb2xsYXBzZUxhc3Q/OiBib29sZWFuO1xuICByZW5kZXJJdGVtPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG4gIHJlbmRlclNlcGFyYXRvcj86IChpdGVtOiBJbmRleGVkQnJlYWRjcnVtYkl0ZW0sIHRvdGFsQ291bnQ6IG51bWJlcikgPT4gUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCcmVhZGNydW1iTmF2ID0gc3R5bGVkLm5hdmBgO1xuXG5jb25zdCBTdHlsZWRMaXN0ID0gc3R5bGVkLm9sYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBhZGRpbmctbGVmdDogMDtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbiAgbWFyZ2luLXRvcDogMDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbmA7XG5cbmNvbnN0IEJyZWFkY3J1bWIgPSAoeyBpdGVtcywgcmVuZGVySXRlbSwgcmVuZGVyU2VwYXJhdG9yLCBjb2xsYXBzZUZpcnN0LCBjb2xsYXBzZUxhc3QgPSB0cnVlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3Qgb2xSZWYgPSB1c2VSZWY8YW55PigpO1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICAvLyBObyBpZGlvbWF0aWMgd2F5IG9mIGRlYWxpbmcgd2l0aCBzZXRzIG9mIHJlZnMgeWV0XG4gIC8vIFNlZTogaHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3JlYWN0L2lzc3Vlcy8xNDA3MiNpc3N1ZWNvbW1lbnQtNDQ2Nzc3NDA2XG5cbiAgcmV0dXJuIChcbiAgICA8QnJlYWRjcnVtYk5hdiByZWY9e2NvbnRhaW5lclJlZn0gYXJpYS1sYWJlbD17dChcImJyZWFkY3J1bWIuYnJlYWRjcnVtYlwiKX0+XG4gICAgICA8U3R5bGVkTGlzdCByZWY9e29sUmVmfT5cbiAgICAgICAge2l0ZW1zLm1hcCgoaXRlbSwgaW5kZXgpID0+IChcbiAgICAgICAgICA8QnJlYWRjcnVtYkl0ZW1cbiAgICAgICAgICAgIHJlbmRlckl0ZW09e3JlbmRlckl0ZW19XG4gICAgICAgICAgICByZW5kZXJTZXBhcmF0b3I9e3JlbmRlclNlcGFyYXRvcn1cbiAgICAgICAgICAgIHJlZj17KGVsZW1lbnQpID0+IHtcbiAgICAgICAgICAgICAgaWYgKFxuICAgICAgICAgICAgICAgIGVsZW1lbnQgPT09IG51bGwgfHxcbiAgICAgICAgICAgICAgICAoIWNvbGxhcHNlRmlyc3QgJiYgaW5kZXggPT09IDApIHx8XG4gICAgICAgICAgICAgICAgKCFjb2xsYXBzZUxhc3QgJiYgaW5kZXggPT09IGl0ZW1zLmxlbmd0aCAtIDEpXG4gICAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgICBlbGVtZW50LnNldE1heFdpZHRoKFwibm9uZVwiKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICBrZXk9e3R5cGVvZiBpdGVtLnRvID09PSBcInN0cmluZ1wiID8gaXRlbS50byA6IGl0ZW0udG8ucGF0aG5hbWV9XG4gICAgICAgICAgICB0b3RhbENvdW50PXtpdGVtcy5sZW5ndGh9XG4gICAgICAgICAgICBpdGVtPXt7IC4uLml0ZW0sIGluZGV4IH19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICA8L1N0eWxlZExpc3Q+XG4gICAgPC9CcmVhZGNydW1iTmF2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQnJlYWRjcnVtYjtcbiJdfQ== */");
-const StyledList = /*#__PURE__*/_styled("ol", {
-  target: "e1oxrjfx0",
-  label: "StyledList"
-})(process.env.NODE_ENV === "production" ? {
-  name: "42by16",
-  styles: "display:inline-block;padding-left:0;margin-bottom:0;margin-top:0;list-style:none"
-} : {
-  name: "42by16",
-  styles: "display:inline-block;padding-left:0;margin-bottom:0;margin-top:0;list-style:none",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCNEIiLCJmaWxlIjoiQnJlYWRjcnVtYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBCcmVhZGNydW1iSXRlbSwgeyBJbmRleGVkQnJlYWRjcnVtYkl0ZW0sIFNpbXBsZUJyZWFkY3J1bWJJdGVtIH0gZnJvbSBcIi4vQnJlYWRjcnVtYkl0ZW1cIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbXM6IFNpbXBsZUJyZWFkY3J1bWJJdGVtW107XG4gIGNvbGxhcHNlRmlyc3Q/OiBib29sZWFuO1xuICBjb2xsYXBzZUxhc3Q/OiBib29sZWFuO1xuICByZW5kZXJJdGVtPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG4gIHJlbmRlclNlcGFyYXRvcj86IChpdGVtOiBJbmRleGVkQnJlYWRjcnVtYkl0ZW0sIHRvdGFsQ291bnQ6IG51bWJlcikgPT4gUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCcmVhZGNydW1iTmF2ID0gc3R5bGVkLm5hdmBgO1xuXG5jb25zdCBTdHlsZWRMaXN0ID0gc3R5bGVkLm9sYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBhZGRpbmctbGVmdDogMDtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbiAgbWFyZ2luLXRvcDogMDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbmA7XG5cbmNvbnN0IEJyZWFkY3J1bWIgPSAoeyBpdGVtcywgcmVuZGVySXRlbSwgcmVuZGVyU2VwYXJhdG9yLCBjb2xsYXBzZUZpcnN0LCBjb2xsYXBzZUxhc3QgPSB0cnVlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3Qgb2xSZWYgPSB1c2VSZWY8YW55PigpO1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICAvLyBObyBpZGlvbWF0aWMgd2F5IG9mIGRlYWxpbmcgd2l0aCBzZXRzIG9mIHJlZnMgeWV0XG4gIC8vIFNlZTogaHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3JlYWN0L2lzc3Vlcy8xNDA3MiNpc3N1ZWNvbW1lbnQtNDQ2Nzc3NDA2XG5cbiAgcmV0dXJuIChcbiAgICA8QnJlYWRjcnVtYk5hdiByZWY9e2NvbnRhaW5lclJlZn0gYXJpYS1sYWJlbD17dChcImJyZWFkY3J1bWIuYnJlYWRjcnVtYlwiKX0+XG4gICAgICA8U3R5bGVkTGlzdCByZWY9e29sUmVmfT5cbiAgICAgICAge2l0ZW1zLm1hcCgoaXRlbSwgaW5kZXgpID0+IChcbiAgICAgICAgICA8QnJlYWRjcnVtYkl0ZW1cbiAgICAgICAgICAgIHJlbmRlckl0ZW09e3JlbmRlckl0ZW19XG4gICAgICAgICAgICByZW5kZXJTZXBhcmF0b3I9e3JlbmRlclNlcGFyYXRvcn1cbiAgICAgICAgICAgIHJlZj17KGVsZW1lbnQpID0+IHtcbiAgICAgICAgICAgICAgaWYgKFxuICAgICAgICAgICAgICAgIGVsZW1lbnQgPT09IG51bGwgfHxcbiAgICAgICAgICAgICAgICAoIWNvbGxhcHNlRmlyc3QgJiYgaW5kZXggPT09IDApIHx8XG4gICAgICAgICAgICAgICAgKCFjb2xsYXBzZUxhc3QgJiYgaW5kZXggPT09IGl0ZW1zLmxlbmd0aCAtIDEpXG4gICAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgICBlbGVtZW50LnNldE1heFdpZHRoKFwibm9uZVwiKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICBrZXk9e3R5cGVvZiBpdGVtLnRvID09PSBcInN0cmluZ1wiID8gaXRlbS50byA6IGl0ZW0udG8ucGF0aG5hbWV9XG4gICAgICAgICAgICB0b3RhbENvdW50PXtpdGVtcy5sZW5ndGh9XG4gICAgICAgICAgICBpdGVtPXt7IC4uLml0ZW0sIGluZGV4IH19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICA8L1N0eWxlZExpc3Q+XG4gICAgPC9CcmVhZGNydW1iTmF2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQnJlYWRjcnVtYjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledList = styled("ol", {
+  base: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    listStyle: "none",
+    gap: "xsmall",
+    mobileDown: {
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "xxsmall"
+    }
+  }
 });
 const Breadcrumb = _ref => {
   let {
@@ -39,17 +36,10 @@ const Breadcrumb = _ref => {
   const {
     t
   } = useTranslation();
-  const olRef = useRef();
-  const containerRef = useRef(null);
-  // No idiomatic way of dealing with sets of refs yet
-  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-
-  return _jsx(BreadcrumbNav, {
-    ref: containerRef,
+  return /*#__PURE__*/_jsx("nav", {
     "aria-label": t("breadcrumb.breadcrumb"),
-    children: _jsx(StyledList, {
-      ref: olRef,
-      children: items.map((item, index) => _jsx(BreadcrumbItem, {
+    children: /*#__PURE__*/_jsx(StyledList, {
+      children: items.map((item, index) => /*#__PURE__*/_jsx(BreadcrumbItem, {
         renderItem: renderItem,
         renderSeparator: renderSeparator,
         ref: element => {

package/es/Breadcrumb/BreadcrumbItem.js

@@ -1,5 +1,3 @@
-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) 2016-present, NDLA.
  *
@@ -9,51 +7,27 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { useRef, useImperativeHandle, forwardRef } from "react";
-import { mq, spacing, breakpoints } from "@ndla/core";
 import { ChevronRight } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const StyledListItem = /*#__PURE__*/_styled("li", {
-  target: "ehxjdfm3",
-  label: "StyledListItem"
-})("padding:0;display:inline-flex;align-items:center;:before{display:none;}", mq.range({
-  until: breakpoints.tablet
-}), "{display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWJJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ21EIiwiZmlsZSI6IkJyZWFkY3J1bWJJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgdXNlUmVmLCB1c2VJbXBlcmF0aXZlSGFuZGxlLCBSZWFjdE5vZGUsIGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbXEsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENoZXZyb25SaWdodCB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2ltcGxlQnJlYWRjcnVtYkl0ZW0ge1xuICB0bzogc3RyaW5nIHwgUGFydGlhbDxMb2NhdGlvbj47XG4gIG5hbWU6IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbmRleGVkQnJlYWRjcnVtYkl0ZW0gZXh0ZW5kcyBTaW1wbGVCcmVhZGNydW1iSXRlbSB7XG4gIGluZGV4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQnJlYWRjcnVtYlJlbmRlclByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG59XG5cbmludGVyZmFjZSBBdXRvQ29sbGFwc2VQcm9wcyB7XG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpPEF1dG9Db2xsYXBzZVByb3BzPmBcbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIDpiZWZvcmUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuYDtcblxuY29uc3QgQ29sbGFwc2VDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuY29uc3QgU3R5bGVkQ2hldnJvbiA9IHN0eWxlZChDaGV2cm9uUmlnaHQpYFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgY29sb3I6IGluaGVyaXQ7XG5gO1xuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluaylgXG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICBhdXRvQ29sbGFwc2U/OiBib29sZWFuO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG4gIHJlbmRlckl0ZW0/OiAoaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtLCB0b3RhbENvdW50OiBudW1iZXIpID0+IFJlYWN0Tm9kZTtcbiAgcmVuZGVyU2VwYXJhdG9yPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEJyZWFkY3J1bWJJdGVtID0gZm9yd2FyZFJlZjxhbnksIFByb3BzPihcbiAgKHsgcmVuZGVySXRlbSwgcmVuZGVyU2VwYXJhdG9yLCBpdGVtLCB0b3RhbENvdW50LCBhdXRvQ29sbGFwc2UgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgbGlSZWYgPSB1c2VSZWY8YW55PigpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBzZXRNYXhXaWR0aDogKG1heFdpZHRoOiBudW1iZXIpID0+IHtcbiAgICAgICAgbGlSZWYuY3VycmVudC5jaGlsZHJlblswXS5zdHlsZS5tYXhXaWR0aCA9IG1heFdpZHRoO1xuICAgICAgfSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCB7IHRvLCBuYW1lLCBpbmRleCB9ID0gaXRlbTtcbiAgICBjb25zdCBpc0xhc3QgPSBpbmRleCA9PT0gdG90YWxDb3VudCAtIDE7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRMaXN0SXRlbSByZWY9e2xpUmVmfSBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX0gYXJpYS1jdXJyZW50PXtpc0xhc3QgPyBcInBhZ2VcIiA6IHVuZGVmaW5lZH0+XG4gICAgICAgIDxDb2xsYXBzZUNvbnRhaW5lcj5cbiAgICAgICAgICB7cmVuZGVySXRlbSA/IChcbiAgICAgICAgICAgIHJlbmRlckl0ZW0oaXRlbSwgdG90YWxDb3VudClcbiAgICAgICAgICApIDogaXNMYXN0ID8gKFxuICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8U3R5bGVkU2FmZUxpbmsgdG89e3RvfT5cbiAgICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9TdHlsZWRTYWZlTGluaz5cbiAgICAgICAgICApfVxuICAgICAgICA8L0NvbGxhcHNlQ29udGFpbmVyPlxuICAgICAgICB7cmVuZGVyU2VwYXJhdG9yID8gcmVuZGVyU2VwYXJhdG9yKGl0ZW0sIHRvdGFsQ291bnQpIDogIWlzTGFzdCAmJiA8U3R5bGVkQ2hldnJvbiAvPn1cbiAgICAgIDwvU3R5bGVkTGlzdEl0ZW0+XG4gICAgKTtcbiAgfSxcbik7XG5cbmV4cG9ydCBkZWZhdWx0IEJyZWFkY3J1bWJJdGVtO1xuIl19 */"));
-const CollapseContainer = /*#__PURE__*/_styled("div", {
-  target: "ehxjdfm2",
-  label: "CollapseContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1bbq5g9",
-  styles: "display:inline-block;color:inherit"
-} : {
-  name: "1bbq5g9",
-  styles: "display:inline-block;color:inherit",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWJJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q29DIiwiZmlsZSI6IkJyZWFkY3J1bWJJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgdXNlUmVmLCB1c2VJbXBlcmF0aXZlSGFuZGxlLCBSZWFjdE5vZGUsIGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbXEsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENoZXZyb25SaWdodCB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2ltcGxlQnJlYWRjcnVtYkl0ZW0ge1xuICB0bzogc3RyaW5nIHwgUGFydGlhbDxMb2NhdGlvbj47XG4gIG5hbWU6IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbmRleGVkQnJlYWRjcnVtYkl0ZW0gZXh0ZW5kcyBTaW1wbGVCcmVhZGNydW1iSXRlbSB7XG4gIGluZGV4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQnJlYWRjcnVtYlJlbmRlclByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG59XG5cbmludGVyZmFjZSBBdXRvQ29sbGFwc2VQcm9wcyB7XG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpPEF1dG9Db2xsYXBzZVByb3BzPmBcbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIDpiZWZvcmUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuYDtcblxuY29uc3QgQ29sbGFwc2VDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuY29uc3QgU3R5bGVkQ2hldnJvbiA9IHN0eWxlZChDaGV2cm9uUmlnaHQpYFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgY29sb3I6IGluaGVyaXQ7XG5gO1xuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluaylgXG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICBhdXRvQ29sbGFwc2U/OiBib29sZWFuO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG4gIHJlbmRlckl0ZW0/OiAoaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtLCB0b3RhbENvdW50OiBudW1iZXIpID0+IFJlYWN0Tm9kZTtcbiAgcmVuZGVyU2VwYXJhdG9yPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEJyZWFkY3J1bWJJdGVtID0gZm9yd2FyZFJlZjxhbnksIFByb3BzPihcbiAgKHsgcmVuZGVySXRlbSwgcmVuZGVyU2VwYXJhdG9yLCBpdGVtLCB0b3RhbENvdW50LCBhdXRvQ29sbGFwc2UgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgbGlSZWYgPSB1c2VSZWY8YW55PigpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBzZXRNYXhXaWR0aDogKG1heFdpZHRoOiBudW1iZXIpID0+IHtcbiAgICAgICAgbGlSZWYuY3VycmVudC5jaGlsZHJlblswXS5zdHlsZS5tYXhXaWR0aCA9IG1heFdpZHRoO1xuICAgICAgfSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCB7IHRvLCBuYW1lLCBpbmRleCB9ID0gaXRlbTtcbiAgICBjb25zdCBpc0xhc3QgPSBpbmRleCA9PT0gdG90YWxDb3VudCAtIDE7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRMaXN0SXRlbSByZWY9e2xpUmVmfSBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX0gYXJpYS1jdXJyZW50PXtpc0xhc3QgPyBcInBhZ2VcIiA6IHVuZGVmaW5lZH0+XG4gICAgICAgIDxDb2xsYXBzZUNvbnRhaW5lcj5cbiAgICAgICAgICB7cmVuZGVySXRlbSA/IChcbiAgICAgICAgICAgIHJlbmRlckl0ZW0oaXRlbSwgdG90YWxDb3VudClcbiAgICAgICAgICApIDogaXNMYXN0ID8gKFxuICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8U3R5bGVkU2FmZUxpbmsgdG89e3RvfT5cbiAgICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9TdHlsZWRTYWZlTGluaz5cbiAgICAgICAgICApfVxuICAgICAgICA8L0NvbGxhcHNlQ29udGFpbmVyPlxuICAgICAgICB7cmVuZGVyU2VwYXJhdG9yID8gcmVuZGVyU2VwYXJhdG9yKGl0ZW0sIHRvdGFsQ291bnQpIDogIWlzTGFzdCAmJiA8U3R5bGVkQ2hldnJvbiAvPn1cbiAgICAgIDwvU3R5bGVkTGlzdEl0ZW0+XG4gICAgKTtcbiAgfSxcbik7XG5cbmV4cG9ydCBkZWZhdWx0IEJyZWFkY3J1bWJJdGVtO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledChevron = /*#__PURE__*/_styled(ChevronRight, {
-  target: "ehxjdfm1",
-  label: "StyledChevron"
-})("margin:", spacing.xxsmall, ";color:inherit;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWJJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRDBDIiwiZmlsZSI6IkJyZWFkY3J1bWJJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgdXNlUmVmLCB1c2VJbXBlcmF0aXZlSGFuZGxlLCBSZWFjdE5vZGUsIGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbXEsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENoZXZyb25SaWdodCB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2ltcGxlQnJlYWRjcnVtYkl0ZW0ge1xuICB0bzogc3RyaW5nIHwgUGFydGlhbDxMb2NhdGlvbj47XG4gIG5hbWU6IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbmRleGVkQnJlYWRjcnVtYkl0ZW0gZXh0ZW5kcyBTaW1wbGVCcmVhZGNydW1iSXRlbSB7XG4gIGluZGV4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQnJlYWRjcnVtYlJlbmRlclByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG59XG5cbmludGVyZmFjZSBBdXRvQ29sbGFwc2VQcm9wcyB7XG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpPEF1dG9Db2xsYXBzZVByb3BzPmBcbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIDpiZWZvcmUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuYDtcblxuY29uc3QgQ29sbGFwc2VDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuY29uc3QgU3R5bGVkQ2hldnJvbiA9IHN0eWxlZChDaGV2cm9uUmlnaHQpYFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgY29sb3I6IGluaGVyaXQ7XG5gO1xuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluaylgXG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICBhdXRvQ29sbGFwc2U/OiBib29sZWFuO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG4gIHJlbmRlckl0ZW0/OiAoaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtLCB0b3RhbENvdW50OiBudW1iZXIpID0+IFJlYWN0Tm9kZTtcbiAgcmVuZGVyU2VwYXJhdG9yPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEJyZWFkY3J1bWJJdGVtID0gZm9yd2FyZFJlZjxhbnksIFByb3BzPihcbiAgKHsgcmVuZGVySXRlbSwgcmVuZGVyU2VwYXJhdG9yLCBpdGVtLCB0b3RhbENvdW50LCBhdXRvQ29sbGFwc2UgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgbGlSZWYgPSB1c2VSZWY8YW55PigpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBzZXRNYXhXaWR0aDogKG1heFdpZHRoOiBudW1iZXIpID0+IHtcbiAgICAgICAgbGlSZWYuY3VycmVudC5jaGlsZHJlblswXS5zdHlsZS5tYXhXaWR0aCA9IG1heFdpZHRoO1xuICAgICAgfSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCB7IHRvLCBuYW1lLCBpbmRleCB9ID0gaXRlbTtcbiAgICBjb25zdCBpc0xhc3QgPSBpbmRleCA9PT0gdG90YWxDb3VudCAtIDE7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRMaXN0SXRlbSByZWY9e2xpUmVmfSBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX0gYXJpYS1jdXJyZW50PXtpc0xhc3QgPyBcInBhZ2VcIiA6IHVuZGVmaW5lZH0+XG4gICAgICAgIDxDb2xsYXBzZUNvbnRhaW5lcj5cbiAgICAgICAgICB7cmVuZGVySXRlbSA/IChcbiAgICAgICAgICAgIHJlbmRlckl0ZW0oaXRlbSwgdG90YWxDb3VudClcbiAgICAgICAgICApIDogaXNMYXN0ID8gKFxuICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8U3R5bGVkU2FmZUxpbmsgdG89e3RvfT5cbiAgICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9TdHlsZWRTYWZlTGluaz5cbiAgICAgICAgICApfVxuICAgICAgICA8L0NvbGxhcHNlQ29udGFpbmVyPlxuICAgICAgICB7cmVuZGVyU2VwYXJhdG9yID8gcmVuZGVyU2VwYXJhdG9yKGl0ZW0sIHRvdGFsQ291bnQpIDogIWlzTGFzdCAmJiA8U3R5bGVkQ2hldnJvbiAvPn1cbiAgICAgIDwvU3R5bGVkTGlzdEl0ZW0+XG4gICAgKTtcbiAgfSxcbik7XG5cbmV4cG9ydCBkZWZhdWx0IEJyZWFkY3J1bWJJdGVtO1xuIl19 */"));
-const StyledSafeLink = /*#__PURE__*/_styled(SafeLink, {
-  target: "ehxjdfm0",
-  label: "StyledSafeLink"
-})(process.env.NODE_ENV === "production" ? {
-  name: "opde7s",
-  styles: "color:inherit"
-} : {
-  name: "opde7s",
-  styles: "color:inherit",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWJJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRHVDIiwiZmlsZSI6IkJyZWFkY3J1bWJJdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgdXNlUmVmLCB1c2VJbXBlcmF0aXZlSGFuZGxlLCBSZWFjdE5vZGUsIGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbXEsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENoZXZyb25SaWdodCB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2ltcGxlQnJlYWRjcnVtYkl0ZW0ge1xuICB0bzogc3RyaW5nIHwgUGFydGlhbDxMb2NhdGlvbj47XG4gIG5hbWU6IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbmRleGVkQnJlYWRjcnVtYkl0ZW0gZXh0ZW5kcyBTaW1wbGVCcmVhZGNydW1iSXRlbSB7XG4gIGluZGV4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQnJlYWRjcnVtYlJlbmRlclByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG59XG5cbmludGVyZmFjZSBBdXRvQ29sbGFwc2VQcm9wcyB7XG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpPEF1dG9Db2xsYXBzZVByb3BzPmBcbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIDpiZWZvcmUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuYDtcblxuY29uc3QgQ29sbGFwc2VDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuY29uc3QgU3R5bGVkQ2hldnJvbiA9IHN0eWxlZChDaGV2cm9uUmlnaHQpYFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgY29sb3I6IGluaGVyaXQ7XG5gO1xuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluaylgXG4gIGNvbG9yOiBpbmhlcml0O1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtO1xuICBhdXRvQ29sbGFwc2U/OiBib29sZWFuO1xuICB0b3RhbENvdW50OiBudW1iZXI7XG4gIHJlbmRlckl0ZW0/OiAoaXRlbTogSW5kZXhlZEJyZWFkY3J1bWJJdGVtLCB0b3RhbENvdW50OiBudW1iZXIpID0+IFJlYWN0Tm9kZTtcbiAgcmVuZGVyU2VwYXJhdG9yPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEJyZWFkY3J1bWJJdGVtID0gZm9yd2FyZFJlZjxhbnksIFByb3BzPihcbiAgKHsgcmVuZGVySXRlbSwgcmVuZGVyU2VwYXJhdG9yLCBpdGVtLCB0b3RhbENvdW50LCBhdXRvQ29sbGFwc2UgfSwgcmVmKSA9PiB7XG4gICAgY29uc3QgbGlSZWYgPSB1c2VSZWY8YW55PigpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBzZXRNYXhXaWR0aDogKG1heFdpZHRoOiBudW1iZXIpID0+IHtcbiAgICAgICAgbGlSZWYuY3VycmVudC5jaGlsZHJlblswXS5zdHlsZS5tYXhXaWR0aCA9IG1heFdpZHRoO1xuICAgICAgfSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCB7IHRvLCBuYW1lLCBpbmRleCB9ID0gaXRlbTtcbiAgICBjb25zdCBpc0xhc3QgPSBpbmRleCA9PT0gdG90YWxDb3VudCAtIDE7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRMaXN0SXRlbSByZWY9e2xpUmVmfSBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX0gYXJpYS1jdXJyZW50PXtpc0xhc3QgPyBcInBhZ2VcIiA6IHVuZGVmaW5lZH0+XG4gICAgICAgIDxDb2xsYXBzZUNvbnRhaW5lcj5cbiAgICAgICAgICB7cmVuZGVySXRlbSA/IChcbiAgICAgICAgICAgIHJlbmRlckl0ZW0oaXRlbSwgdG90YWxDb3VudClcbiAgICAgICAgICApIDogaXNMYXN0ID8gKFxuICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8U3R5bGVkU2FmZUxpbmsgdG89e3RvfT5cbiAgICAgICAgICAgICAgPHNwYW4+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9TdHlsZWRTYWZlTGluaz5cbiAgICAgICAgICApfVxuICAgICAgICA8L0NvbGxhcHNlQ29udGFpbmVyPlxuICAgICAgICB7cmVuZGVyU2VwYXJhdG9yID8gcmVuZGVyU2VwYXJhdG9yKGl0ZW0sIHRvdGFsQ291bnQpIDogIWlzTGFzdCAmJiA8U3R5bGVkQ2hldnJvbiAvPn1cbiAgICAgIDwvU3R5bGVkTGlzdEl0ZW0+XG4gICAgKTtcbiAgfSxcbik7XG5cbmV4cG9ydCBkZWZhdWx0IEJyZWFkY3J1bWJJdGVtO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledListItem = styled("li", {
+  base: {
+    display: "flex",
+    color: "inherit",
+    gap: "4xsmall",
+    alignItems: "flex-end",
+    tabletDown: {
+      display: "block"
+    }
+  }
 });
 const BreadcrumbItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     renderItem,
     renderSeparator,
     item,
-    totalCount,
-    autoCollapse
+    totalCount
   } = _ref;
   const liRef = useRef();
   useImperativeHandle(ref, () => ({
@@ -67,20 +41,17 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     index
   } = item;
   const isLast = index === totalCount - 1;
-  return _jsxs(StyledListItem, {
+  return /*#__PURE__*/_jsxs(StyledListItem, {
     ref: liRef,
-    autoCollapse: autoCollapse,
     "aria-current": isLast ? "page" : undefined,
-    children: [_jsx(CollapseContainer, {
-      children: renderItem ? renderItem(item, totalCount) : isLast ? _jsx("span", {
+    children: [renderItem ? renderItem(item, totalCount) : isLast ? /*#__PURE__*/_jsx("span", {
+      children: name
+    }) : /*#__PURE__*/_jsx(SafeLink, {
+      to: to,
+      children: /*#__PURE__*/_jsx("span", {
         children: name
-      }) : _jsx(StyledSafeLink, {
-        to: to,
-        children: _jsx("span", {
-          children: name
-        })
       })
-    }), renderSeparator ? renderSeparator(item, totalCount) : !isLast && _jsx(StyledChevron, {})]
+    }), renderSeparator ? renderSeparator(item, totalCount) : !isLast && /*#__PURE__*/_jsx(ChevronRight, {})]
   });
 });
 export default BreadcrumbItem;