@ndla/ui 56.0.142-alpha.0 → 56.0.143-alpha.0

package/lib/Grid/GridParallaxItem.js

@@ -1,7 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Grid/GridParallaxItem.tsx
 const StyledGridParallaxItem = (0, __ndla_styled_system_jsx.styled)("div", { base: {

package/lib/Grid/GridParallaxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridParallaxItem.js","names":[],"sources":["../../src/Grid/GridParallaxItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    \"& > div\": {\n      top: \"var(--masthead-height, 0px)\",\n      position: \"sticky\",\n    },\n  },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n  <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n    <div>{children}</div>\n  </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;;AAWA,MAAM,yBAAyB,qCAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;CACX;AACF,EACF,EAAC;AAEF,MAAa,mBAAmB,CAAC,EAAE,SAAU,GAAG,MAAsC,qBACpF,2BAAC;CAAuB,GAAI;CAAM,mBAAgB;2BAChD,2BAAC,SAAK,WAAe;EACE"}
+{"version":3,"file":"GridParallaxItem.js","names":[],"sources":["../../src/Grid/GridParallaxItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    \"& > div\": {\n      top: \"var(--masthead-height, 0px)\",\n      position: \"sticky\",\n    },\n  },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n  <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n    <div>{children}</div>\n  </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;;;;;AAWA,MAAM,8DAAgC,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,SAAU,GAAG,WAC9C,2CAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,2CAAC,SAAK,WAAe;EACE"}

package/lib/KeyFigure/KeyFigure.js

@@ -1,7 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let html_react_parser = require("html-react-parser");
+html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/KeyFigure/KeyFigure.tsx
 const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
@@ -43,5 +46,5 @@ const KeyFigure = ({ image, title, subtitle }) => {
 var KeyFigure_default = KeyFigure;
 
 //#endregion
-exports.KeyFigure_default = KeyFigure_default;
+exports.default = KeyFigure_default;
 //# sourceMappingURL=KeyFigure.js.map

package/lib/KeyFigure/KeyFigure.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nconst KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n\nexport default KeyFigure;\n"],"mappings":";;;;;;AAWA,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,UACf;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;AACf,EACF,EAAC;AAEF,MAAM,eAAe,qCAAO,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAWF,MAAM,YAAY,CAAC,EAAE,OAAO,OAAO,UAAiB,KAAK;AACvD,wBACE,4BAAC;EAAe,mBAAgB;;KAC3B,yBAAS,2BAAC;IAAY,MAAM,EAAE,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;mBACrG,2BAAC,0BAAc,+BAAM,MAAM,GAAgB;mBAC3C,2BAAC,6BAAiB,+BAAM,SAAS,GAAmB;;GACrC;AAEpB;AAED,wBAAe"}
+{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nconst KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n\nexport default KeyFigure;\n"],"mappings":";;;;;;;;;AAWA,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,WACf;CACF,EACF,CAAC;AAEF,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;CACf,EACF,CAAC;AAEF,MAAM,oDAAsB,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAWF,MAAM,aAAa,EAAE,OAAO,OAAO,eAAsB;AACvD,QACE,4CAAC;EAAe,mBAAgB;;GAC7B,CAAC,CAAC,SAAS,2CAAC;IAAY,KAAK,GAAG,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;GACrG,2CAAC,yDAAoB,MAAM,GAAgB;GAC3C,2CAAC,4DAAuB,SAAS,GAAmB;;GACrC;;AAIrB,wBAAe"}

package/lib/LicenseByline/EmbedByline.js

@@ -1,12 +1,19 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_LicenseLink = require('./LicenseLink.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const __ndla_licenses = require_rolldown_runtime.__toESM(require("@ndla/licenses"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const require_LicenseLink = require('./LicenseLink.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let __ndla_licenses = require("@ndla/licenses");
+__ndla_licenses = require_rolldown_runtime.__toESM(__ndla_licenses);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/LicenseByline/EmbedByline.tsx
 const BylineWrapper = (0, __ndla_styled_system_jsx.styled)("figcaption", { base: {
@@ -42,8 +49,7 @@ const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright,..
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBylineWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AlertLine, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseDescription, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("embed.embedError", { type: typeString }) }) })] }) });
 	}
 	const { copyright } = props;
-	const hideByline = hideCopyright && !description;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!hideByline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BylineWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!(hideCopyright && !description) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BylineWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 		!!hideCopyright && description,
 		!hideCopyright && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseContainerContent, {
 			type,
@@ -110,7 +116,7 @@ const LicenseContainerContent = ({ children, copyright, type }) => {
 		children,
 		` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`,
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: captionAuthors.map((author) => author.name).join(", ") }),
-		license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_LicenseLink.LicenseLink, {
+		license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LicenseLink.LicenseLink, {
 			license,
 			hideLink: !isOpen && !!children
 		})] }) : null

package/lib/LicenseByline/EmbedByline.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedByline.js","names":["Text","AlertLine","Button","LicenseLink"],"sources":["../../src/LicenseByline/EmbedByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation, getLicenseCredits } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ICopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { ICopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { IDraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ICopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const authors = getLicenseCredits(copyright);\n  const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"EmbedByline.js","names":["Text","AlertLine","Button","LicenseLink"],"sources":["../../src/LicenseByline/EmbedByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation, getLicenseCredits } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ICopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { ICopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { IDraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ICopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const authors = getLicenseCredits(copyright);\n  const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}

package/lib/LicenseByline/LicenseLink.js

@@ -1,8 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let __ndla_safelink = require("@ndla/safelink");
+__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/LicenseByline/LicenseLink.tsx
 const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {

package/lib/LicenseByline/LicenseLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;AAkBA,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,OACjB;CACD,cAAc,EACZ,gBAAgB,OACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,OACV,EACF;AACF,EACF,EAAC;AAEF,MAAa,cAAc,sBAAqC,CAAC,EAAE,SAAS,SAAU,GAAG,MAAM,EAAE,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,GAAI,IAAG,CAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,wBACE,2BAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,wBAAO,2BAAC,oBAAM,QAAQ,eAAoB;AAC3C,EAAC"}
+{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,qCAAoD,EAAE,SAAS,SAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,2CAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,QAAO,2CAAC,oBAAM,QAAQ,eAAoB;EAC1C"}

package/lib/LinkBlock/LinkBlock.js

@@ -1,12 +1,19 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const require_relativeUrl = require('../utils/relativeUrl.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let html_react_parser = require("html-react-parser");
+html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let __ndla_safelink = require("@ndla/safelink");
+__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/LinkBlock/LinkBlock.tsx
 const InfoWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
@@ -44,7 +51,7 @@ const StyledDateContainer = (0, __ndla_styled_system_jsx.styled)("div", { base:
 } });
 const StyledCalendarEd = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.CalendarLine, { base: { color: "icon.strong" } });
 const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
-	const href = require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path);
+	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
 	const formattedDate = (0, react.useMemo)(() => {
 		if (!date) return null;
 		return new Intl.DateTimeFormat(articleLanguage, {
@@ -71,5 +78,5 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
 var LinkBlock_default = LinkBlock;
 
 //#endregion
-exports.LinkBlock_default = LinkBlock_default;
+exports.default = LinkBlock_default;
 //# sourceMappingURL=LinkBlock.js.map

package/lib/LinkBlock/LinkBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,YACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,OACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;EACT;CACF;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,qCAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOC,2BAAc,EAC5C,MAAM,EACJ,OAAO,cACR,EACF,EAAC;AAOF,MAAM,YAAY,CAAC,EAAE,OAAO,iBAAiB,MAAM,KAAK,MAAa,KAAK;CACxE,MAAM,OAAO,6GAAuB,KAAK,KAAK;CAC9C,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,OAAK,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;EACP,GAAE,OAAO,IAAI,KAAK,MAAM;CAC1B,GAAE,CAAC,MAAM,eAAgB,EAAC;AAC3B,wBACE,4BAAC;EAAe,IAAI;EAAM,mBAAgB;6BACxC,4BAAC,0CACC,2BAACC;GAAQ;GAAQ;GAAW,WAAU;6BACpC,2BAAC;IAAG;cAAc,+BAAM,MAAM;KAAM;IAC5B,IACP,wBACD,4BAAC,kDACC,2BAAC,qBAAmB,EACnB,iBACmB,IAEZ,kBACd,2BAACC,+BAAe,uBAAe;GAChB;AAEpB;AAED,wBAAe"}
+{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","getPossiblyRelativeUrl","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,aACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,QACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF,CAAC;AAEF,MAAM,2DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wDAA0BC,2BAAc,EAC5C,MAAM,EACJ,OAAO,eACR,EACF,CAAC;AAOF,MAAM,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CACxE,MAAM,OAAOC,2CAAuB,KAAK,KAAK;CAC9C,MAAM,yCAA8B;AAClC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;GACP,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC;IACxB,CAAC,MAAM,gBAAgB,CAAC;AAC3B,QACE,4CAAC;EAAe,IAAI;EAAM,mBAAgB;aACxC,4CAAC,0BACC,2CAACC;GAAQ;GAAQ;GAAW,WAAU;aACpC,2CAAC;IAAG;6CAAoB,MAAM;KAAM;IAC5B,EACT,CAAC,CAAC,QACD,4CAAC,kCACC,2CAAC,qBAAmB,EACnB,iBACmB,IAEZ,EACd,2CAACC,+BAAe,uBAAe;GAChB;;AAIrB,wBAAe"}

package/lib/LinkBlock/LinkBlockSection.js

@@ -1,7 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/LinkBlock/LinkBlockSection.tsx
 const StyledList = (0, __ndla_styled_system_jsx.styled)("ul", { base: {
@@ -20,5 +23,5 @@ const LinkBlockSection = ({ children,...rest }) => {
 var LinkBlockSection_default = LinkBlockSection;
 
 //#endregion
-exports.LinkBlockSection_default = LinkBlockSection_default;
+exports.default = LinkBlockSection_default;
 //# sourceMappingURL=LinkBlockSection.js.map

package/lib/LinkBlock/LinkBlockSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlockSection.js","names":[],"sources":["../../src/LinkBlock/LinkBlockSection.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nconst LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n\nexport default LinkBlockSection;\n"],"mappings":";;;;;;AAeA,MAAM,aAAa,qCAAO,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,mBAAmB,CAAC,EAAE,SAAU,GAAG,MAAa,KAAK;AACzD,wBACE,2BAAC;EAAI,GAAI;EAAM,mBAAgB;4BAC7B,2BAAC,wBACE,eAAS,IAAI,UAAU,CAAC,0BACvB,2BAAC,kBAAI,QAAW,CAChB,GACS;GACT;AAET;AAED,+BAAe"}
+{"version":3,"file":"LinkBlockSection.js","names":["Children"],"sources":["../../src/LinkBlock/LinkBlockSection.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nconst LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n\nexport default LinkBlockSection;\n"],"mappings":";;;;;;;;;AAeA,MAAM,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,oBAAoB,EAAE,SAAU,GAAG,WAAkB;AACzD,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT;;AAIV,+BAAe"}

package/lib/Pitch/Pitch.js

@@ -1,11 +1,17 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
-const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ndla_styled_system_patterns = require_rolldown_runtime.__toESM(require("@ndla/styled-system/patterns"));
+const require_relativeUrl = require('../utils/relativeUrl.js');
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let html_react_parser = require("html-react-parser");
+html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
+let __ndla_safelink = require("@ndla/safelink");
+__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
+__ndla_styled_system_patterns = require_rolldown_runtime.__toESM(__ndla_styled_system_patterns);
 
 //#region src/Pitch/Pitch.tsx
 const StyledCardHeading = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardHeading, { base: { paddingBlockStart: "medium" } });
@@ -21,7 +27,7 @@ const StyledCardImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.C
 	height: "unset"
 } });
 const Pitch = ({ title, url, metaImage, path, description }) => {
-	const href = require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path);
+	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardRoot, {
 		variant: "subtle",
 		"data-embed-type": "pitch",

package/lib/Pitch/Pitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","SafeLink"],"sources":["../../src/Pitch/Pitch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n  title: string;\n  url: string;\n  description?: string;\n  metaImage: {\n    url: string;\n    alt: string;\n  };\n  path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n  base: {\n    paddingBlockStart: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n  base: {\n    border: \"0\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledCardImage = styled(CardImage, {\n  base: {\n    aspectRatio: \"16/9\",\n    height: \"unset\",\n  },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n\n  return (\n    <StyledCardRoot variant=\"subtle\" data-embed-type=\"pitch\" asChild consumeCss>\n      <div>\n        <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n          <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n            {parse(title)}\n          </SafeLink>\n        </StyledCardHeading>\n        {!!description && (\n          <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n            <div>{parse(description)}</div>\n          </StyledText>\n        )}\n        <StyledCardImage\n          variant=\"rounded\"\n          src={metaImage.url}\n          alt={metaImage.alt}\n          sizes=\"480px\"\n          fallbackWidth={300}\n          width={550}\n          height={310}\n        />\n      </div>\n    </StyledCardRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,oBAAoB,qCAAOA,+BAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOC,4BAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAOC,6BAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,6GAAuB,KAAK,KAAK;AAE9C,wBACE,2BAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;4BAC/D,4BAAC;mBACC,2BAAC;IAAkB,WAAU;IAAgB;IAAQ;8BACnD,2BAACC;KAAS,IAAI;KAAM;KAAS,KAAK,0CAAY,KAAK;eAChD,+BAAM,MAAM;MACJ;KACO;KACjB,+BACD,2BAAC;IAAW,WAAU;IAAc;IAAQ;8BAC1C,2BAAC,mBAAK,+BAAM,YAAY,GAAO;KACpB;mBAEf,2BAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS;AAEpB"}
+{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","getPossiblyRelativeUrl","SafeLink","linkOverlay"],"sources":["../../src/Pitch/Pitch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n  title: string;\n  url: string;\n  description?: string;\n  metaImage: {\n    url: string;\n    alt: string;\n  };\n  path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n  base: {\n    paddingBlockStart: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n  base: {\n    border: \"0\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledCardImage = styled(CardImage, {\n  base: {\n    aspectRatio: \"16/9\",\n    height: \"unset\",\n  },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n\n  return (\n    <StyledCardRoot variant=\"subtle\" data-embed-type=\"pitch\" asChild consumeCss>\n      <div>\n        <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n          <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n            {parse(title)}\n          </SafeLink>\n        </StyledCardHeading>\n        {!!description && (\n          <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n            <div>{parse(description)}</div>\n          </StyledText>\n        )}\n        <StyledCardImage\n          variant=\"rounded\"\n          src={metaImage.url}\n          alt={metaImage.alt}\n          sizes=\"480px\"\n          fallbackWidth={300}\n          width={550}\n          height={310}\n        />\n      </div>\n    </StyledCardRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,yDAA2BA,+BAAa,EAC5C,MAAM,EACJ,mBAAmB,UACpB,EACF,CAAC;AAEF,MAAM,kDAAoBC,wBAAM,EAC9B,MAAM,EACJ,iBAAiB,UAClB,EACF,CAAC;AAEF,MAAM,sDAAwBC,4BAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,uDAAyBC,6BAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;CACT,EACF,CAAC;AAEF,MAAa,SAAS,EAAE,OAAO,KAAK,WAAW,MAAM,kBAAyB;CAC5E,MAAM,OAAOC,2CAAuB,KAAK,KAAK;AAE9C,QACE,2CAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;YAC/D,4CAAC;GACC,2CAAC;IAAkB,WAAU;IAAgB;IAAQ;cACnD,2CAACC;KAAS,IAAI;KAAM;KAAS,KAAKC,0CAAY,KAAK;8CAC1C,MAAM;MACJ;KACO;GACnB,CAAC,CAAC,eACD,2CAAC;IAAW,WAAU;IAAc;IAAQ;cAC1C,2CAAC,kDAAW,YAAY,GAAO;KACpB;GAEf,2CAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS"}

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -1,25 +1,33 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType = require('../model/ContentType.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ndla_styled_system_patterns = require_rolldown_runtime.__toESM(require("@ndla/styled-system/patterns"));
+const require_ContentType = require('../model/ContentType.js');
+const require_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let __ndla_safelink = require("@ndla/safelink");
+__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
+__ndla_styled_system_patterns = require_rolldown_runtime.__toESM(__ndla_styled_system_patterns);
 
 //#region src/RelatedArticleList/RelatedArticleList.tsx
 const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {
 	display: "flex",
 	gap: "3xsmall"
 } });
-const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.contentTypes.SUBJECT_MATERIAL }) => {
+const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = require_ContentType.contentTypes.SUBJECT_MATERIAL }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardRoot, {
 		"data-embed-type": "related-article",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.CardContent, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge.ContentTypeBadge, { contentType: type }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentTypeBadge.ContentTypeBadge, { contentType: type }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardHeading, {
 				asChild: true,
 				consumeCss: true,

package/lib/RelatedArticleList/RelatedArticleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","ExternalLinkLine","Text","Button","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n  type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({\n  title,\n  introduction,\n  to,\n  linkInfo = \"\",\n  target = \"\",\n  type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <ContentTypeBadge contentType={type} />\n        <CardHeading asChild consumeCss>\n          <span>\n            <SafeLink\n              unstyled\n              to={to}\n              target={target}\n              rel={linkInfo ? \"noopener noreferrer\" : undefined}\n              css={linkOverlay.raw()}\n            >\n              <StyledSpan>\n                {title}\n                {target === \"_blank\" && <ExternalLinkLine />}\n              </StyledSpan>\n            </SafeLink>\n          </span>\n        </CardHeading>\n        <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n        <Text color=\"text.subtle\" textStyle=\"label.small\">\n          {linkInfo}\n        </Text>\n      </CardContent>\n    </CardRoot>\n  );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    width: \"100%\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"medium\",\n    tabletDown: {\n      gridTemplateColumns: \"1fr\",\n    },\n  },\n});\n\nconst StyledSection = styled(\"section\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"medium\",\n    clear: \"both\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    marginBlockStart: \"xsmall\",\n  },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n  children?: ReactElement[];\n  articleCount?: number;\n  headingLevel?: HeadingLevel;\n  headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n  children = [],\n  articleCount,\n  headingLevel: HeadingElement = \"h2\",\n  headingButtons,\n  ...rest\n}: Props) => {\n  const [expanded, setExpanded] = useState(false);\n  const { t } = useTranslation();\n  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n  const childrenToShow = useMemo(\n    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n    [childCount, children, expanded],\n  );\n\n  return (\n    <StyledSection {...rest} data-embed-type=\"related-content-list\">\n      <HeadingWrapper>\n        <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n          <HeadingElement>{t(\"related.title\")}</HeadingElement>\n        </Heading>\n        {headingButtons}\n      </HeadingWrapper>\n      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n      {childCount > 2 ? (\n        <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n          {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n        </StyledButton>\n      ) : null}\n    </StyledSection>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,qCAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAa,iBAAiB,CAAC,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,mGAAa,kBACA,KAAK;AACzB,wBACE,2BAACC;EAAS,mBAAgB;4BACxB,4BAACC;mBACC,2BAACC,0HAAiB,aAAa,OAAQ;mBACvC,2BAACC;IAAY;IAAQ;8BACnB,2BAAC,oCACC,2BAACC;KACC;KACI;KACI;KACR,KAAK,WAAW;KAChB,KAAK,0CAAY,KAAK;+BAEtB,4BAAC,yBACE,OACA,WAAW,4BAAY,2BAACC,kCAAmB,IACjC;MACJ,GACN;KACK;mBACd,2BAACC,0BAAK,yBAAyB,EAAE,QAAQ,aAAc,IAAI;mBAC3D,2BAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;AAEd;AAED,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,MACtB;AACF,EACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,0BAAQ,EAClC,MAAM,EACJ,kBAAkB,SACnB,EACF,EAAC;AASF,MAAa,qBAAqB,CAAC,EACjC,WAAW,CAAE,GACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,MACG,KAAK;CACX,MAAM,CAAC,UAAU,YAAY,GAAG,oBAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,aAAa,mBAAQ,MAAM,gBAAgB,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,YAAa,EAAC;CACpG,MAAM,iBAAiB,mBACrB,MAAO,aAAa,MAAM,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;CAAS,EACjC;AAED,wBACE,4BAAC;EAAc,GAAI;EAAM,mBAAgB;;mBACvC,4BAAC,6CACC,2BAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;8BAC7D,2BAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;mBACjB,2BAAC,6BAAiB,iBAAiC;GAClD,aAAa,oBACZ,2BAAC;IAAa,SAAQ;IAAY,SAAS,MAAM,YAAY,CAAC,OAAO,EAAE;cACpE,GAAG,cAAc,WAAW,SAAS,OAAO,EAAE;KAClC,GACb;;GACU;AAEnB"}
+{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","linkOverlay","ExternalLinkLine","Text","Button","Children","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n  type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({\n  title,\n  introduction,\n  to,\n  linkInfo = \"\",\n  target = \"\",\n  type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <ContentTypeBadge contentType={type} />\n        <CardHeading asChild consumeCss>\n          <span>\n            <SafeLink\n              unstyled\n              to={to}\n              target={target}\n              rel={linkInfo ? \"noopener noreferrer\" : undefined}\n              css={linkOverlay.raw()}\n            >\n              <StyledSpan>\n                {title}\n                {target === \"_blank\" && <ExternalLinkLine />}\n              </StyledSpan>\n            </SafeLink>\n          </span>\n        </CardHeading>\n        <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n        <Text color=\"text.subtle\" textStyle=\"label.small\">\n          {linkInfo}\n        </Text>\n      </CardContent>\n    </CardRoot>\n  );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    width: \"100%\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"medium\",\n    tabletDown: {\n      gridTemplateColumns: \"1fr\",\n    },\n  },\n});\n\nconst StyledSection = styled(\"section\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"medium\",\n    clear: \"both\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    marginBlockStart: \"xsmall\",\n  },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n  children?: ReactElement[];\n  articleCount?: number;\n  headingLevel?: HeadingLevel;\n  headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n  children = [],\n  articleCount,\n  headingLevel: HeadingElement = \"h2\",\n  headingButtons,\n  ...rest\n}: Props) => {\n  const [expanded, setExpanded] = useState(false);\n  const { t } = useTranslation();\n  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n  const childrenToShow = useMemo(\n    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n    [childCount, children, expanded],\n  );\n\n  return (\n    <StyledSection {...rest} data-embed-type=\"related-content-list\">\n      <HeadingWrapper>\n        <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n          <HeadingElement>{t(\"related.title\")}</HeadingElement>\n        </Heading>\n        {headingButtons}\n      </HeadingWrapper>\n      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n      {childCount > 2 ? (\n        <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n          {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n        </StyledButton>\n      ) : null}\n    </StyledSection>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,iCAAa,uBACK;AACzB,QACE,2CAACC;EAAS,mBAAgB;YACxB,4CAACC;GACC,2CAACC,6CAAiB,aAAa,OAAQ;GACvC,2CAACC;IAAY;IAAQ;cACnB,2CAAC,oBACC,2CAACC;KACC;KACI;KACI;KACR,KAAK,WAAW,wBAAwB;KACxC,KAAKC,0CAAY,KAAK;eAEtB,4CAAC,yBACE,OACA,WAAW,YAAY,2CAACC,kCAAmB,IACjC;MACJ,GACN;KACK;GACd,2CAACC,0BAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC3D,2CAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oDAAsBC,0BAAQ,EAClC,MAAM,EACJ,kBAAkB,UACnB,EACF,CAAC;AASF,MAAa,sBAAsB,EACjC,WAAW,EAAE,EACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,WACQ;CACX,MAAM,CAAC,UAAU,mCAAwB,MAAM;CAC/C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,sCAA2B,gBAAgBC,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,0CACG,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,4CAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,4CAAC,6BACC,2CAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,2CAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,2CAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,2CAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}

package/lib/ResourceBox/ResourceBox.js

@@ -1,10 +1,16 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ndla_core = require_rolldown_runtime.__toESM(require("@ndla/core"));
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let __ndla_safelink = require("@ndla/safelink");
+__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ndla_core = require("@ndla/core");
+__ndla_core = require_rolldown_runtime.__toESM(__ndla_core);
 
 //#region src/ResourceBox/ResourceBox.tsx
 const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
@@ -71,5 +77,6 @@ const ResourceBox = ({ image, title, caption, url, buttonText }) => {
 var ResourceBox_default = ResourceBox;
 
 //#endregion
-exports.ResourceBox_default = ResourceBox_default;
+exports.ResourceBox = ResourceBox;
+exports.default = ResourceBox_default;
 //# sourceMappingURL=ResourceBox.js.map

package/lib/ResourceBox/ResourceBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceBox.js","names":["Image","Text","breakpoints","Heading","SafeLinkButton","ShareBoxLine"],"sources":["../../src/ResourceBox/ResourceBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { breakpoints } from \"@ndla/core\";\nimport { ShareBoxLine } from \"@ndla/icons\";\nimport { Heading, Image, Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    padding: \"medium\",\n    borderRadius: \"xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"medium\",\n    gap: \"medium\",\n    tabletWideDown: {\n      padding: \"xsmall\",\n    },\n    tabletDown: {\n      flexDirection: \"column\",\n      gap: \"0\",\n      padding: \"0\",\n    },\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"xsmall\",\n    flex: \"1\",\n    tabletDown: {\n      padding: \"xsmall\",\n    },\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    objectFit: \"cover\",\n    borderRadius: \"xsmall\",\n    width: \"fit-content\",\n    aspectRatio: \"1/1\",\n    tabletDown: {\n      width: \"100%\",\n      borderRadius: \"0\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    flex: \"1\",\n  },\n});\n\ninterface ImageMeta {\n  src: string | undefined;\n  alt: string;\n}\n\ninterface Props {\n  image?: ImageMeta;\n  title: string;\n  caption: string;\n  url: string;\n  buttonText: string;\n}\n\nexport const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {\n  return (\n    <Container>\n      {image ? (\n        <StyledImage\n          src={image.src}\n          alt={image.alt}\n          sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}\n          variant=\"rounded\"\n        />\n      ) : null}\n      <ContentWrapper>\n        <Heading textStyle=\"label.large\" fontWeight=\"bold\" asChild consumeCss>\n          <h3>{title}</h3>\n        </Heading>\n        <StyledText textStyle=\"body.medium\">{caption}</StyledText>\n        <SafeLinkButton to={url} target=\"_blank\" variant=\"secondary\">\n          {buttonText}\n          <ShareBoxLine />\n        </SafeLinkButton>\n      </ContentWrapper>\n    </Container>\n  );\n};\n\nexport default ResourceBox;\n"],"mappings":";;;;;;;;;AAcA,MAAM,YAAY,qCAAO,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,SAAS;CACT,cAAc;CACd,QAAQ;CACR,aAAa;CACb,WAAW;CACX,gBAAgB;CAChB,KAAK;CACL,gBAAgB,EACd,SAAS,SACV;CACD,YAAY;EACV,eAAe;EACf,KAAK;EACL,SAAS;CACV;AACF,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,MAAM;CACN,YAAY,EACV,SAAS,SACV;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAOA,yBAAO,EAChC,MAAM;CACJ,WAAW;CACX,cAAc;CACd,OAAO;CACP,aAAa;CACb,YAAY;EACV,OAAO;EACP,cAAc;CACf;AACF,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,MAAM,IACP,EACF,EAAC;AAeF,MAAa,cAAc,CAAC,EAAE,OAAO,OAAO,SAAS,KAAK,YAAmB,KAAK;AAChF,wBACE,4BAAC,wBACE,wBACC,2BAAC;EACC,KAAK,MAAM;EACX,KAAK,MAAM;EACX,QAAQ,cAAcC,wBAAY,QAAQ,uBAAuBA,wBAAY,OAAO;EACpF,SAAQ;GACR,GACA,sBACJ,4BAAC;kBACC,2BAACC;GAAQ,WAAU;GAAc,YAAW;GAAO;GAAQ;6BACzD,2BAAC,kBAAI,QAAW;IACR;kBACV,2BAAC;GAAW,WAAU;aAAe;IAAqB;kBAC1D,4BAACC;GAAe,IAAI;GAAK,QAAO;GAAS,SAAQ;cAC9C,4BACD,2BAACC,8BAAe;IACD;KACF,IACP;AAEf;AAED,0BAAe"}
+{"version":3,"file":"ResourceBox.js","names":["Image","Text","breakpoints","Heading","SafeLinkButton","ShareBoxLine"],"sources":["../../src/ResourceBox/ResourceBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { breakpoints } from \"@ndla/core\";\nimport { ShareBoxLine } from \"@ndla/icons\";\nimport { Heading, Image, Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    padding: \"medium\",\n    borderRadius: \"xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"medium\",\n    gap: \"medium\",\n    tabletWideDown: {\n      padding: \"xsmall\",\n    },\n    tabletDown: {\n      flexDirection: \"column\",\n      gap: \"0\",\n      padding: \"0\",\n    },\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"xsmall\",\n    flex: \"1\",\n    tabletDown: {\n      padding: \"xsmall\",\n    },\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    objectFit: \"cover\",\n    borderRadius: \"xsmall\",\n    width: \"fit-content\",\n    aspectRatio: \"1/1\",\n    tabletDown: {\n      width: \"100%\",\n      borderRadius: \"0\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    flex: \"1\",\n  },\n});\n\ninterface ImageMeta {\n  src: string | undefined;\n  alt: string;\n}\n\ninterface Props {\n  image?: ImageMeta;\n  title: string;\n  caption: string;\n  url: string;\n  buttonText: string;\n}\n\nexport const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {\n  return (\n    <Container>\n      {image ? (\n        <StyledImage\n          src={image.src}\n          alt={image.alt}\n          sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}\n          variant=\"rounded\"\n        />\n      ) : null}\n      <ContentWrapper>\n        <Heading textStyle=\"label.large\" fontWeight=\"bold\" asChild consumeCss>\n          <h3>{title}</h3>\n        </Heading>\n        <StyledText textStyle=\"body.medium\">{caption}</StyledText>\n        <SafeLinkButton to={url} target=\"_blank\" variant=\"secondary\">\n          {buttonText}\n          <ShareBoxLine />\n        </SafeLinkButton>\n      </ContentWrapper>\n    </Container>\n  );\n};\n\nexport default ResourceBox;\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,iDAAmB,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,SAAS;CACT,cAAc;CACd,QAAQ;CACR,aAAa;CACb,WAAW;CACX,gBAAgB;CAChB,KAAK;CACL,gBAAgB,EACd,SAAS,UACV;CACD,YAAY;EACV,eAAe;EACf,KAAK;EACL,SAAS;EACV;CACF,EACF,CAAC;AAEF,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,MAAM;CACN,YAAY,EACV,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAM,mDAAqBA,yBAAO,EAChC,MAAM;CACJ,WAAW;CACX,cAAc;CACd,OAAO;CACP,aAAa;CACb,YAAY;EACV,OAAO;EACP,cAAc;EACf;CACF,EACF,CAAC;AAEF,MAAM,kDAAoBC,wBAAM,EAC9B,MAAM,EACJ,MAAM,KACP,EACF,CAAC;AAeF,MAAa,eAAe,EAAE,OAAO,OAAO,SAAS,KAAK,iBAAwB;AAChF,QACE,4CAAC,wBACE,QACC,2CAAC;EACC,KAAK,MAAM;EACX,KAAK,MAAM;EACX,OAAO,eAAeC,wBAAY,QAAQ,uBAAuBA,wBAAY,OAAO;EACpF,SAAQ;GACR,GACA,MACJ,4CAAC;EACC,2CAACC;GAAQ,WAAU;GAAc,YAAW;GAAO;GAAQ;aACzD,2CAAC,kBAAI,QAAW;IACR;EACV,2CAAC;GAAW,WAAU;aAAe;IAAqB;EAC1D,4CAACC;GAAe,IAAI;GAAK,QAAO;GAAS,SAAQ;cAC9C,YACD,2CAACC,8BAAe;IACD;KACF,IACP;;AAIhB,0BAAe"}

package/lib/TagSelector/TagSelector.js

@@ -1,10 +1,16 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
-const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ndla_util = require("@ndla/util");
+__ndla_util = require_rolldown_runtime.__toESM(__ndla_util);
+let __ark_ui_react = require("@ark-ui/react");
+__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
 
 //#region src/TagSelector/TagSelector.tsx
 const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBehavior = "clear", editable, addOnPaste = false, onValueChange, children, value, translations,...rest }) => {

package/lib/TagSelector/TagSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSelector.js","names":["ComboboxRoot","TagsInputRoot","ComboboxLabel","TagsInputItemInput","ComboboxTrigger","ComboboxControl","TagsInputControl","ComboboxClearTrigger","ComboboxInput","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","CloseLine"],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;AAqCA,MAAa,kBAAkB,CAA2B,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,aACA,GAAG,MACqB,KAAK;CAC7B,MAAM,MAAM;EACV,MAAM,kBAAO;EACb,OAAO,kBAAO;EACd,SAAS,kBAAO;CACjB;CAED,MAAM,aAAa,yBAA6C;AAEhE,sBAAU,MAAM;AACd,OAAK,WAAW,QACd,YAAW,UAAU,SAAS,eAAe,IAAI,QAAQ;CAE5D,GAAE,CAAC,IAAI,OAAQ,EAAC;AAEjB,wBACE,2BAACA;EACM;EACL;EACkB;EACR;EACS;EACJ;EACD;EACd,sBAAsB,CAAC,UAAU;AAC/B,OAAI,0BAAS,WAAW,SAAS,MAAM,OAAO,cAAc,OAAO,CACjE,OAAM,gBAAgB;EAEzB;EACM;EACP,GAAI;4BAEJ,2BAAC;GACM;GACE;GACG;GACK;GACH;GACE;GAEb;IACwB;GACd;AAElB;AAED,MAAM,2BAA2B,sBAA+C,CAAC,OAAO,QAAQ;CAC9F,MAAM,cAAc,wCAAoB;AACxC,wBACE,2BAACC;EACM;EACL,oBAAoB,CAAC,YAAY,YAAY,cAAc,QAAQ,WAAW;EAC9E,GAAI;GACJ;AAEL,EAAC;AAIF,MAAa,mBAAmBC;AAEhC,MAAa,uBAAuBC;AAEpC,MAAa,qBAAqBC;AAElC,MAAa,qBAAqB,sBAAoD,CAAC,EAAE,SAAU,GAAG,OAAO,EAAE,QAAQ;AACrH,wBACE,2BAACC;EAAqB;EAAK;4BACzB,2BAACC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;AAErB,EAAC;AAEF,MAAa,0BAA0BC;AAKvC,MAAa,uBAAuB,sBAClC,CAAC,EAAE,SAAU,GAAG,OAAO,EAAE,QAAQ;CAC/B,MAAM,UAAU,yCAAqB;AAErC,wBACE,2BAACC;EAAmB;EAAK;4BACvB,2BAACC;GACC,WAAW,CAAC,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;GAEvC;GACD,GAAI;GAEH;IACc;GACH;AAEnB,EACF;AAED,MAAa,mBAAmB,sBAAoD,CAAC,EAAE,SAAU,GAAG,OAAO,EAAE,QAAQ;CACnH,MAAM,UAAU,yCAAqB;AAErC,wBACE,qEACG,QAAQ,MAAM,IAAI,CAAC,OAAO,0BACzB,4BAACC;EAAqB;EAAc;6BAClC,4BAACC,qEACC,2BAACC,iDAAmB,QAA0B,kBAC9C,2BAACC,0EACC,2BAACC,2BAAY,GACc,IACR,kBACvB,2BAACX,yCAAqB;IAPwB,MAQhC,CAChB,kBACF,2BAACK;EAAmB;EAAK;4BACvB,2BAACC;GACC,WAAW,CAAC,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;GAEvC;GACD,GAAI;GAEH;IACc;GACH,IACf;AAEN,EAAC"}
+{"version":3,"file":"TagSelector.js","names":["ComboboxRoot","TagsInputRoot","ComboboxLabel","TagsInputItemInput","ComboboxTrigger","ComboboxControl","TagsInputControl","ComboboxClearTrigger","ComboboxInput","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","CloseLine"],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAa,mBAA6C,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,aACA,GAAG,WAC0B;CAC7B,MAAM,MAAM;EACV,wBAAa;EACb,yBAAc;EACd,2BAAgB;EACjB;CAED,MAAM,+BAAgD,OAAU;AAEhE,4BAAgB;AACd,MAAI,CAAC,WAAW,QACd,YAAW,UAAU,SAAS,eAAe,IAAI,QAAQ;IAE1D,CAAC,IAAI,QAAQ,CAAC;AAEjB,QACE,2CAACA;EACM;EACL;EACkB;EACR;EACS;EACJ;EACD;EACd,uBAAuB,UAAU;AAC/B,iCAAa,WAAW,SAAS,MAAM,OAAO,cAAc,OAAO,CACjE,OAAM,gBAAgB;;EAGnB;EACP,GAAI;YAEJ,2CAAC;GACM;GACE;GACG;GACK;GACH;GACE;GAEb;IACwB;GACd;;AAInB,MAAM,kDAA2E,OAAO,QAAQ;CAC9F,MAAM,sDAAkC;AACxC,QACE,2CAACC;EACM;EACL,qBAAqB,YAAY,YAAY,cAAc,QAAQ,WAAW;EAC9E,GAAI;GACJ;EAEJ;AAIF,MAAa,mBAAmBC;AAEhC,MAAa,uBAAuBC;AAEpC,MAAa,qBAAqBC;AAElC,MAAa,4CAA0E,EAAE,SAAU,GAAG,SAAS,QAAQ;AACrH,QACE,2CAACC;EAAqB;EAAK;YACzB,2CAACC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;EAEpB;AAEF,MAAa,0BAA0BC;AAKvC,MAAa,8CACV,EAAE,SAAU,GAAG,SAAS,QAAQ;CAC/B,MAAM,mDAA+B;AAErC,QACE,2CAACC;EAAmB;EAAK;YACvB,2CAACC;GACC,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;;GAGxC,GAAI;GAEH;IACc;GACH;EAGrB;AAED,MAAa,0CAAwE,EAAE,SAAU,GAAG,SAAS,QAAQ;CACnH,MAAM,mDAA+B;AAErC,QACE,qFACG,QAAQ,MAAM,KAAK,OAAO,UACzB,4CAACC;EAAqB;EAAc;aAClC,4CAACC,qDACC,2CAACC,iDAAmB,QAA0B,EAC9C,2CAACC,0DACC,2CAACC,2BAAY,GACc,IACR,EACvB,2CAACX,yCAAqB;IAPwB,MAQhC,CAChB,EACF,2CAACK;EAAmB;EAAK;YACvB,2CAACC;GACC,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;;GAGxC,GAAI;GAEH;IACc;GACH,IACf;EAEL"}