@ndla/ui 51.0.0 → 52.0.0

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

@@ -928,6 +928,10 @@ declare const messages: {
                     private: string;
                     shared: string;
                 };
+                warning: {
+                    authenticated: string;
+                    unauthenticated: string;
+                };
                 button: {
                     share: string;
                     shareShort: string;
@@ -936,6 +940,12 @@ declare const messages: {
                     goTo: string;
                     unShare: string;
                     shareLink: string;
+                    saveLink: string;
+                };
+                save: {
+                    warning: string;
+                    header: string;
+                    save: string;
                 };
                 previewInformation: string;
             };

package/lib/locale/messages-se.js

@@ -945,6 +945,10 @@ const messages = {
           private: "Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ",
           shared: "Nå kan du dele denne lenka med elever eller andre lærere. Hvis du gjør endringer i mappa, blir de synlige for alle du har delt lenka med."
         },
+        warning: {
+          authenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder.",
+          unauthenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder. Logg inn på Min NDLA for å kopiere mappen eller lagre lenken."
+        },
         button: {
           share: "Del mappe",
           shareShort: "Del",
@@ -952,7 +956,13 @@ const messages = {
           previewShort: "Forhåndsvis",
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
-          shareLink: "Kopier lenke"
+          shareLink: "Kopier lenke",
+          saveLink: "Lagre lenken"
+        },
+        save: {
+          warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
+          header: "Lagre lenke til denne mappen",
+          save: "Lagre lenke til delt mappe"
         },
         previewInformation: "Forhåndsvisning av delt mappe. Mappa blir ikke tilgjengelig for andre før du setter den som delt."
       }

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

@@ -928,6 +928,10 @@ declare const messages: {
                     private: string;
                     shared: string;
                 };
+                warning: {
+                    authenticated: string;
+                    unauthenticated: string;
+                };
                 button: {
                     share: string;
                     shareShort: string;
@@ -936,6 +940,12 @@ declare const messages: {
                     goTo: string;
                     unShare: string;
                     shareLink: string;
+                    saveLink: string;
+                };
+                save: {
+                    warning: string;
+                    header: string;
+                    save: string;
                 };
                 previewInformation: string;
             };

package/lib/locale/messages-sma.js

@@ -283,7 +283,7 @@ const messages = {
     resources: "Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.",
     subjectOutdated: "Dette faget følger en utgått læreplan.",
     subjectFuture: "Dette faget følger en kommende læreplan.",
-    subjectBeta: "Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.",
+    subjectBeta: "Dette faget er under utvikling. Vi fyller på med ressurser fortløpende.",
     newVersion: "Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ",
     frontPageBeta: "Kommende fag er tilpassa ny læreplan som gjelder fra neste skoleår. Vi håper likevel at læringsressursene i kommende fag kan være nyttige allerede nå.",
     frontPageExpired: "Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist."
@@ -945,6 +945,10 @@ const messages = {
           private: "Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ",
           shared: "Nå kan du dele denne lenka med elever eller andre lærere. Hvis du gjør endringer i mappa, blir de synlige for alle du har delt lenka med."
         },
+        warning: {
+          authenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder.",
+          unauthenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder. Logg inn på Min NDLA for å kopiere mappen eller lagre lenken."
+        },
         button: {
           share: "Del mappe",
           shareShort: "Del",
@@ -952,7 +956,13 @@ const messages = {
           previewShort: "Forhåndsvis",
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
-          shareLink: "Kopier lenke"
+          shareLink: "Kopier lenke",
+          saveLink: "Lagre lenken"
+        },
+        save: {
+          warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
+          header: "Lagre lenke til denne mappen",
+          save: "Lagre lenke til delt mappe"
         },
         previewInformation: "Forhåndsvisning av delt mappe. Mappa blir ikke tilgjengelig for andre før du setter den som delt."
       }

package/lib/types.d.ts

@@ -6,15 +6,6 @@
  *
  */
 import { ReactNode } from "react";
-declare const locales: readonly ["nb", "nn", "en", "se", "sma"];
-export type Locale = (typeof locales)[number];
-export type Link = {
-    text: string;
-    to: string;
-};
-export type Messages = {
-    closeSearchLabel: string;
-};
 type ResourceTypes = {
     name: string;
 };
@@ -63,51 +54,9 @@ export interface Article {
     copyright?: Copyright;
     published: string;
 }
-export type SearchResult = {
-    title: string;
-    contentType: string;
-    resources: Array<Resource>;
-};
 export interface ContentTypeResultType {
     title?: string;
     contentType?: string;
     resources: Array<Resource>;
 }
-export type subjectProp = {
-    text: string;
-    url: string;
-    yearInfo?: string;
-    beta?: boolean;
-};
-export type category = {
-    name: string;
-    subjects: Array<subjectProp>;
-};
-export type elementRectType = {
-    fromX: number;
-    fromY: number;
-    fromScale: number;
-};
-interface GrepCode {
-    id: string;
-    title: string;
-}
-export interface CompetenceGoalsItemType extends GrepCode {
-    goals: {
-        id: string;
-        text: string;
-        url?: string;
-    }[];
-    selected?: boolean;
-    isOembed?: boolean;
-}
-export interface CoreElementsItemType extends GrepCode {
-    text?: string;
-    url?: string;
-    isOembed?: boolean;
-}
-export type NotionMedia = {
-    type: "video" | "other";
-    element: ReactNode;
-};
 export {};

package/lib/types.js

@@ -2,13 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const locales = ["nb", "nn", "en", "se", "sma"];
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "51.0.0",
+  "version": "52.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,24 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.42",
-    "@ndla/button": "^12.0.45",
-    "@ndla/carousel": "^4.0.43",
-    "@ndla/code": "^5.0.57",
-    "@ndla/core": "^4.5.5",
-    "@ndla/dropdown-menu": "^1.0.36",
-    "@ndla/forms": "^7.1.2",
-    "@ndla/hooks": "^2.1.6",
-    "@ndla/icons": "^6.1.3",
+    "@ndla/accordion": "^4.0.0",
+    "@ndla/button": "^13.0.0",
+    "@ndla/core": "^5.0.0",
+    "@ndla/dropdown-menu": "^1.0.37",
+    "@ndla/forms": "^8.0.0",
+    "@ndla/hooks": "^2.1.7",
+    "@ndla/icons": "^6.1.4",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^5.0.42",
-    "@ndla/notion": "^6.0.43",
-    "@ndla/safelink": "^5.1.2",
-    "@ndla/select": "^3.3.17",
-    "@ndla/switch": "^1.1.42",
-    "@ndla/tabs": "^4.0.5",
-    "@ndla/tooltip": "^7.0.5",
-    "@ndla/typography": "^0.4.19",
+    "@ndla/modal": "^6.0.0",
+    "@ndla/notion": "^7.0.0",
+    "@ndla/safelink": "^5.1.3",
+    "@ndla/tooltip": "^8.0.0",
+    "@ndla/typography": "^0.4.20",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -64,10 +59,10 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "i18next": "^23.5.1",
+    "i18next": "^23.11.5",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0",
-    "react-i18next": "^13.3.0",
+    "react-i18next": "^14.1.1",
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
@@ -82,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4c02a36e29e56aef17cf835b383799a1898b99e3"
+  "gitHead": "dab99b8c9bf77c2ee7690d348b2ae811af81bd3d"
 }

package/src/Article/Article.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode, useEffect, useRef, useState, forwardRef } from "react";
+import { ReactNode, useEffect, useRef, useState, forwardRef, ComponentPropsWithRef } from "react";
 import BEMHelper from "react-bem-helper";
 import styled from "@emotion/styled";
 
@@ -14,7 +14,6 @@ import { spacing, mq, breakpoints } from "@ndla/core";
 import { useIntersectionObserver } from "@ndla/hooks";
 import { Heading, Text } from "@ndla/typography";
 import { resizeObserver } from "@ndla/util";
-import ArticleAccessMessage from "./ArticleAccessMessage";
 import ArticleByline from "./ArticleByline";
 import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
 import ArticleNotions from "./ArticleNotions";
@@ -27,16 +26,17 @@ const classes = new BEMHelper({
   prefix: "c-",
 });
 
-type ArticleWrapperProps = {
+interface ArticleWrapperProps extends ComponentPropsWithRef<"article"> {
   modifier?: string;
-  children: ReactNode;
-};
+}
 
-export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier }, ref) => (
-  <article {...classes(undefined, modifier)} ref={ref}>
-    {children}
-  </article>
-));
+export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(
+  ({ children, modifier, className, ...rest }, ref) => (
+    <article {...rest} {...classes(undefined, modifier, className)} ref={ref}>
+      {children}
+    </article>
+  ),
+);
 
 type ArticleTitleProps = {
   icon?: ReactNode;
@@ -115,7 +115,6 @@ type Props = {
   competenceGoals?: ReactNode;
   id: string;
   notions?: ReactNode;
-  accessMessage?: string;
   lang?: string;
 };
 
@@ -142,7 +141,6 @@ export const Article = ({
   competenceGoals,
   id,
   notions,
-  accessMessage,
   heartButton,
   contentTransformed,
   lang,
@@ -156,12 +154,12 @@ export const Article = ({
   });
   const [articlePositionRight, setArticlePositionRight] = useState(0);
 
-  const showExplainNotions = entry && entry.isIntersecting;
+  const showExplainNotions = !!entry?.isIntersecting;
 
   useEffect(() => {
-    if (wrapperRef && wrapperRef.current) {
+    if (wrapperRef?.current) {
       const handler = () => {
-        if (wrapperRef && wrapperRef.current) {
+        if (wrapperRef?.current) {
           const offset =
             wrapperRef.current.getBoundingClientRect().left + wrapperRef.current.getBoundingClientRect().width;
           setArticlePositionRight(offset);
@@ -180,10 +178,8 @@ export const Article = ({
 
   return (
     <div ref={wrapperRef}>
-      <ArticleWrapper modifier={modifier} ref={articleRef}>
+      <ArticleWrapper modifier={modifier} ref={articleRef} data-ndla-article="">
         <LayoutItem layout="center">
-          {accessMessage && <ArticleAccessMessage message={accessMessage} />}
-
           {messages.messageBox && (
             <MSGboxWrapper>
               <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>

package/src/Article/ArticleHeaderWrapper.tsx

@@ -6,9 +6,8 @@
  *
  */
 
-import { ReactNode, useEffect } from "react";
+import { ReactNode } from "react";
 import BEMHelper from "react-bem-helper";
-import { isMobile } from "react-device-detect";
 
 const classes = new BEMHelper({
   name: "article",
@@ -21,16 +20,6 @@ type Props = {
 };
 
 const ArticleHeaderWrapper = ({ children, competenceGoals }: Props) => {
-  useEffect(() => {
-    if (isMobile) {
-      const heroContentList: NodeListOf<HTMLElement> = document.querySelectorAll(".c-article__header");
-      if (heroContentList.length === 1) {
-        heroContentList[0].scrollIntoView(true);
-        window.scrollBy(0, heroContentList[0].offsetTop - 120); // Adjust for header
-      }
-    }
-  }, []);
-
   return (
     <div {...classes("header")}>
       {children}

package/src/Article/ArticleNotions.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, stackOrder } from "@ndla/core";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 import { Explanation, NotionFlip } from "@ndla/icons/common";
 import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from "@ndla/modal";
 
@@ -22,11 +22,11 @@ const ArticleNotionsContainer = styled.div`
 `;
 
 const NotionsTrigger = styled.div`
-  padding: 0 16px;
+  padding: 0 ${spacing.nsmall};
   display: inline-flex;
   align-items: center;
   background-color: ${colors.brand.greyLighter};
-  border-radius: 4px;
+  border-radius: ${misc.borderRadius};
   cursor: pointer;
 
   ${mq.range({ from: breakpoints.tablet })} {

package/src/Article/ArticleParagraph.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024-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 { ComponentPropsWithoutRef, ReactNode } from "react";
+import styled from "@emotion/styled";
+
+interface Props extends ComponentPropsWithoutRef<"p"> {
+  children?: ReactNode;
+}
+
+const StyledParagraph = styled.p`
+  &[data-align="center"] {
+    text-align: center;
+  }
+`;
+
+export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;

package/src/Article/component.article.scss

@@ -91,13 +91,6 @@
   margin-top: 0;
   padding: 0;
   padding-left: $spacing--medium;
-  figure.c-figure.u-float-full {
-    left: 0 !important;
-    right: 0 !important;
-    padding-left: 0;
-    padding-right: 0;
-    max-width: 100%;
-  }
 }
 
 .c-article__header {

package/src/Article/index.ts

@@ -12,4 +12,6 @@ import ArticleFootNotes from "./ArticleFootNotes";
 import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
 
 export { ArticleByline, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
+export { ArticleParagraph } from "./ArticleParagraph";
+
 export default Article;

package/src/AudioPlayer/AudioPlayer.tsx

@@ -120,7 +120,7 @@ const TextVersionHeading = styled(Heading)`
 const LinkButton = styled(ButtonV2)`
   box-shadow: none;
   padding-left: 0;
-  padding-right: 4px;
+  padding-right: ${spacing.xxsmall};
   min-height: ${spacing.medium};
   flex: 0 0 auto;
   &:hover,
@@ -200,7 +200,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
         <TextWrapper data-has-image={!!img}>
           <TitleWrapper>
             <div>
-              {subtitle && subtitle.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
+              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
               <Title element="h3" headingStyle="h4" margin="none" data-has-desc={!!description}>
                 {title}
               </Title>

package/src/AudioPlayer/Controls.tsx

@@ -12,7 +12,7 @@ import styled from "@emotion/styled";
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from "@radix-ui/react-popover";
 import { Root as SliderRoot, Track, Range, SliderThumb } from "@radix-ui/react-slider";
 import { ButtonV2, IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from "@ndla/dropdown-menu";
 import { Back15, Forward15 } from "@ndla/icons/action";
 import { Play, Pause, VolumeUp } from "@ndla/icons/common";
@@ -82,11 +82,11 @@ const SpeedValueButton = styled(ButtonV2)`
 
 const SpeedSelectedMark = styled.span`
   align-self: flex-start;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   background: #d1372e;
   width: 6px;
   height: 6px;
-  margin: 6px 0 0 2px;
+  margin: ${spacing.xsmall} 0 0 2px;
 `;
 
 const Time = styled.div`
@@ -132,7 +132,7 @@ const StyledThumb = styled(SliderThumb)`
   width: 20px;
   height: 20px;
   background: #5cbc80;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   outline: none;
 `;
 
@@ -188,7 +188,7 @@ const VolumeSliderHandle = styled(SliderThumb)`
   width: 20px;
   height: 20px;
   background: ${colors.brand.primary};
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
 `;
 
 const formatTime = (seconds: number) => {

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -50,10 +50,6 @@ export const CollapseLast: StoryObj<typeof Breadcrumb> = {
   args: { collapseLast: true },
 };
 
-export const AutoCollapse: StoryObj<typeof Breadcrumb> = {
-  args: { autoCollapse: true },
-};
-
 export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
   args: {
     renderSeparator: (item, totalCount) => (

package/src/Breadcrumb/Breadcrumb.tsx

@@ -9,12 +9,10 @@
 import { ReactNode, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { useComponentSize, useIsomorphicLayoutEffect } from "@ndla/hooks";
 import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {
   items: SimpleBreadcrumbItem[];
-  autoCollapse?: boolean;
   collapseFirst?: boolean;
   collapseLast?: boolean;
   renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
@@ -31,50 +29,18 @@ const StyledList = styled.ol`
   list-style: none;
 `;
 
-const Breadcrumb = ({
-  items,
-  autoCollapse,
-  renderItem,
-  renderSeparator,
-  collapseFirst,
-  collapseLast = true,
-}: Props) => {
+const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }: Props) => {
   const { t } = useTranslation();
   const olRef = useRef<any>();
   const containerRef = useRef<HTMLDivElement>(null);
   // No idiomatic way of dealing with sets of refs yet
   // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-  const breadcrumbItemRefs = useRef(new Map()).current;
-  const size = useComponentSize(containerRef);
-
-  useIsomorphicLayoutEffect(() => {
-    if (!autoCollapse) {
-      return;
-    }
-    // Create an array of all breadcrumb item refs
-    const items = Array.from(breadcrumbItemRefs).map(([key, value]) => value);
-
-    // Clear max width on all items
-    items.forEach((el) => {
-      el.setMaxWidth("none");
-    });
-
-    // Set maxWidth on breadcrumb text items iteratively until
-    // the ordered list fits on a single line. It's on a single line
-    // if the height of the list is less then 70.
-    items.forEach((el) => {
-      if (olRef.current.offsetHeight > 60) {
-        el.setMaxWidth("40px");
-      }
-    });
-  }, [size, items]);
 
   return (
     <BreadcrumbNav ref={containerRef} aria-label={t("breadcrumb.breadcrumb")}>
       <StyledList ref={olRef}>
         {items.map((item, index) => (
           <BreadcrumbItem
-            autoCollapse={autoCollapse}
             renderItem={renderItem}
             renderSeparator={renderSeparator}
             ref={(element) => {
@@ -86,9 +52,6 @@ const Breadcrumb = ({
                 if (element) {
                   element.setMaxWidth("none");
                 }
-                breadcrumbItemRefs.delete(item.to);
-              } else {
-                breadcrumbItemRefs.set(item.to, element);
               }
             }}
             key={typeof item.to === "string" ? item.to : item.to.pathname}

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,6 @@
  */
 
 import { useRef, useImperativeHandle, ReactNode, forwardRef } from "react";
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { mq, spacing, breakpoints } from "@ndla/core";
 import { ChevronRight } from "@ndla/icons/common";
@@ -38,27 +37,14 @@ const StyledListItem = styled.li<AutoCollapseProps>`
   :before {
     display: none;
   }
-
-  ${({ autoCollapse }) =>
-    !autoCollapse &&
-    css`
-      ${mq.range({ until: breakpoints.tablet })} {
-        display: block;
-      }
-    `}
+  ${mq.range({ until: breakpoints.tablet })} {
+    display: block;
+  }
 `;
 
-const CollapseContainer = styled.div<AutoCollapseProps>`
+const CollapseContainer = styled.div`
   display: inline-block;
   color: inherit;
-  ${({ autoCollapse }) =>
-    autoCollapse &&
-    css`
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      display: inline-block;
-    `}
 `;
 
 const StyledChevron = styled(ChevronRight)`
@@ -92,7 +78,7 @@ const BreadcrumbItem = forwardRef<any, Props>(
     const isLast = index === totalCount - 1;
     return (
       <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? "page" : undefined}>
-        <CollapseContainer autoCollapse={autoCollapse}>
+        <CollapseContainer>
           {renderItem ? (
             renderItem(item, totalCount)
           ) : isLast ? (

package/src/Breadcrumb/index.ts

@@ -10,8 +10,6 @@ import Breadcrumb from "./Breadcrumb";
 
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./BreadcrumbItem";
 
-export { default as HeaderBreadcrumb } from "./HeaderBreadcrumb";
-
 export { default as HomeBreadcrumb } from "./HomeBreadcrumb";
 
 export default Breadcrumb;