@ndla/ui 56.0.166-alpha.0 → 56.0.168-alpha.0

package/lib/LicenseByline/LicenseLink.js

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/LicenseByline/LicenseLink.tsx
@@ -12,7 +12,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+const StyledSafeLink = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLink, { base: {
 	color: "text.link",
 	textDecoration: "underline",
 	whiteSpace: "nowrap",

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,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,UAAU,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"}
+{"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,qDAAwBA,yBAAU,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,UAAU,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,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_relativeUrl = require('../utils/relativeUrl.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@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");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_icons = require("@ndla/icons");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/LinkBlock/LinkBlock.tsx
@@ -17,12 +17,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const InfoWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const InfoWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "xsmall"
 } });
-const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+const StyledSafeLink = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLink, { base: {
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "center",
@@ -45,12 +45,12 @@ const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.Safe
 		}
 	}
 } });
-const StyledDateContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const StyledDateContainer = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	alignItems: "center",
 	gap: "xxsmall"
 } });
-const StyledCalendarEd = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.CalendarLine, { base: { color: "icon.strong" } });
+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_relativeUrl.getPossiblyRelativeUrl(url, path);
 	const formattedDate = (0, react.useMemo)(() => {
@@ -65,7 +65,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSafeLink, {
 		to: href,
 		"data-embed-type": "link-block",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Heading, {
 			asChild: true,
 			consumeCss: true,
 			textStyle: "title.medium",
@@ -73,7 +73,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
 				"data-heading": true,
 				children: (0, html_react_parser.default)(title)
 			})
-		}), !!date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDateContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightLine, { "data-forward": true })]
+		}), !!date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDateContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowRightLine, { "data-forward": true })]
 	});
 };
 

package/lib/LinkBlock/LinkBlock.js.map

@@ -1 +1 @@
-{"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\nexport const 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"],"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,MAAa,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CAC/E,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"}
+{"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\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAM,kDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,qDAAwBA,yBAAU,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,0DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,uDAA0BC,0BAAc,EAC5C,MAAM,EACJ,OAAO,eACR,EACF,CAAC;AAOF,MAAa,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CAC/E,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,8BAAe,uBAAe;GAChB"}

package/lib/LinkBlock/LinkBlockSection.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/LinkBlock/LinkBlockSection.tsx
@@ -11,7 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledList = (0, __ndla_styled_system_jsx.styled)("ul", { base: {
+const StyledList = (0, _ndla_styled_system_jsx.styled)("ul", { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "xsmall",

package/lib/LinkBlock/LinkBlockSection.js.map

@@ -1 +1 @@
-{"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\nexport const 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"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAAkB;AAChE,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT"}
+{"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\nexport const 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"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,iDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAAkB;AAChE,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT"}

package/lib/Pitch/Pitch.js

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_relativeUrl = require('../utils/relativeUrl.js');
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@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");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
+let _ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
 
 //#region src/Pitch/Pitch.tsx
 /**
@@ -16,16 +16,16 @@ let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledCardHeading = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardHeading, { base: { paddingBlockStart: "medium" } });
-const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { paddingBlockEnd: "medium" } });
-const StyledCardRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardRoot, { base: {
+const StyledCardHeading = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.CardHeading, { base: { paddingBlockStart: "medium" } });
+const StyledText = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Text, { base: { paddingBlockEnd: "medium" } });
+const StyledCardRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.CardRoot, { base: {
 	outline: "0px",
 	boxShadow: "none",
 	display: "flex",
 	flexDirection: "column",
 	gap: "small"
 } });
-const StyledCardImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardImage, { base: {
+const StyledCardImage = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.CardImage, { base: {
 	aspectRatio: "16/9",
 	height: "unset"
 } });
@@ -41,10 +41,10 @@ const Pitch = ({ title, url, metaImage, path, description }) => {
 				textStyle: "heading.small",
 				asChild: true,
 				consumeCss: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_safelink.SafeLink, {
 					to: href,
 					unstyled: true,
-					css: __ndla_styled_system_patterns.linkOverlay.raw(),
+					css: _ndla_styled_system_patterns.linkOverlay.raw(),
 					children: (0, html_react_parser.default)(title)
 				})
 			}),

package/lib/Pitch/Pitch.js.map

@@ -1 +1 @@
-{"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    outline: \"0px\",\n    boxShadow: \"none\",\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 nonInteractive 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,SAAS;CACT,WAAW;CACX,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;EAAe,mBAAgB;EAAQ;EAAQ;YAC7D,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"}
+{"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    outline: \"0px\",\n    boxShadow: \"none\",\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 nonInteractive 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,wDAA2BA,8BAAa,EAC5C,MAAM,EACJ,mBAAmB,UACpB,EACF,CAAC;AAEF,MAAM,iDAAoBC,uBAAM,EAC9B,MAAM,EACJ,iBAAiB,UAClB,EACF,CAAC;AAEF,MAAM,qDAAwBC,2BAAU,EACtC,MAAM;CACJ,SAAS;CACT,WAAW;CACX,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sDAAyBC,4BAAW,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;EAAe,mBAAgB;EAAQ;EAAQ;YAC7D,4CAAC;GACC,2CAAC;IAAkB,WAAU;IAAgB;IAAQ;cACnD,2CAACC;KAAS,IAAI;KAAM;KAAS,KAAKC,yCAAY,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,12 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
-let __ndla_icons = require("@ndla/icons");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_icons = require("@ndla/icons");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
+let _ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
 
 //#region src/RelatedArticleList/RelatedArticleList.tsx
 /**
@@ -16,28 +16,28 @@ let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {
+const StyledSpan = (0, _ndla_styled_system_jsx.styled)("span", { base: {
 	display: "flex",
 	alignItems: "center",
 	gap: "3xsmall"
 } });
 const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardRoot, {
+	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)(__ndla_primitives.CardHeading, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.CardContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.CardHeading, {
 				asChild: true,
 				consumeCss: true,
-				css: __ndla_styled_system_patterns.linkOverlay.raw(),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+				css: _ndla_styled_system_patterns.linkOverlay.raw(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_safelink.SafeLink, {
 					to,
 					target,
 					rel: linkInfo ? "noopener noreferrer" : void 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSpan, { children: [title, target === "_blank" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ExternalLinkLine, {})] })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSpan, { children: [title, target === "_blank" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ExternalLinkLine, {})] })
 				})
 			}),
-			!!introduction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, { dangerouslySetInnerHTML: { __html: introduction } }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+			!!introduction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, { dangerouslySetInnerHTML: { __html: introduction } }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 				color: "text.subtle",
 				textStyle: "label.small",
 				children: linkInfo
@@ -45,28 +45,28 @@ const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "" })
 		] })
 	});
 };
-const HeadingWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const HeadingWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	width: "100%",
 	justifyContent: "space-between",
 	alignItems: "center",
 	alignSelf: "flex-start"
 } });
-const ArticlesWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ArticlesWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "grid",
 	width: "100%",
 	gridTemplateColumns: "repeat(2, 1fr)",
 	gap: "medium",
 	tabletDown: { gridTemplateColumns: "1fr" }
 } });
-const StyledSection = (0, __ndla_styled_system_jsx.styled)("section", { base: {
+const StyledSection = (0, _ndla_styled_system_jsx.styled)("section", { base: {
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center",
 	gap: "medium",
 	clear: "both"
 } });
-const StyledButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginBlockStart: "xsmall" } });
+const StyledButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { marginBlockStart: "xsmall" } });
 const RelatedArticleList = ({ children = [], articleCount, headingLevel: HeadingElement = "h2", headingButtons, ...rest }) => {
 	const [expanded, setExpanded] = (0, react.useState)(false);
 	const { t } = (0, react_i18next.useTranslation)();
@@ -80,7 +80,7 @@ const RelatedArticleList = ({ children = [], articleCount, headingLevel: Heading
 		...rest,
 		"data-embed-type": "related-content-list",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeadingWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeadingWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Heading, {
 				asChild: true,
 				consumeCss: true,
 				textStyle: "title.large",

package/lib/RelatedArticleList/RelatedArticleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedArticleList.js","names":["CardRoot","CardContent","CardHeading","linkOverlay","SafeLink","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 type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction?: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({ title, introduction, to, linkInfo = \"\", target = \"\" }: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <CardHeading asChild consumeCss css={linkOverlay.raw()}>\n          <SafeLink to={to} target={target} rel={linkInfo ? \"noopener noreferrer\" : undefined}>\n            <StyledSpan>\n              {title}\n              {target === \"_blank\" && <ExternalLinkLine />}\n            </StyledSpan>\n          </SafeLink>\n        </CardHeading>\n        {!!introduction && <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":";;;;;;;;;;;;;;;;;;AAyBA,MAAM,kDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,cAAc,IAAI,WAAW,IAAI,SAAS,SAA8B;AAC9G,QACE,2CAACA;EAAS,mBAAgB;YACxB,4CAACC;GACC,2CAACC;IAAY;IAAQ;IAAW,KAAKC,0CAAY,KAAK;cACpD,2CAACC;KAAa;KAAY;KAAQ,KAAK,WAAW,wBAAwB;eACxE,4CAAC,yBACE,OACA,WAAW,YAAY,2CAACC,kCAAmB,IACjC;MACJ;KACC;GACb,CAAC,CAAC,gBAAgB,2CAACC,0BAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC9E,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,gBACA,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"}
+{"version":3,"file":"RelatedArticleList.js","names":["CardRoot","CardContent","CardHeading","linkOverlay","SafeLink","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 type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction?: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({ title, introduction, to, linkInfo = \"\", target = \"\" }: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <CardHeading asChild consumeCss css={linkOverlay.raw()}>\n          <SafeLink to={to} target={target} rel={linkInfo ? \"noopener noreferrer\" : undefined}>\n            <StyledSpan>\n              {title}\n              {target === \"_blank\" && <ExternalLinkLine />}\n            </StyledSpan>\n          </SafeLink>\n        </CardHeading>\n        {!!introduction && <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":";;;;;;;;;;;;;;;;;;AAyBA,MAAM,iDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,cAAc,IAAI,WAAW,IAAI,SAAS,SAA8B;AAC9G,QACE,2CAACA;EAAS,mBAAgB;YACxB,4CAACC;GACC,2CAACC;IAAY;IAAQ;IAAW,KAAKC,yCAAY,KAAK;cACpD,2CAACC;KAAa;KAAY;KAAQ,KAAK,WAAW,wBAAwB;eACxE,4CAAC,yBACE,OACA,WAAW,YAAY,2CAACC,iCAAmB,IACjC;MACJ;KACC;GACb,CAAC,CAAC,gBAAgB,2CAACC,yBAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC9E,2CAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,sDAAyB,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,oDAAuB,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,mDAAsBC,yBAAQ,EAClC,MAAM,EACJ,kBAAkB,UACnB,EACF,CAAC;AASF,MAAa,sBAAsB,EACjC,WAAW,EAAE,EACb,cACA,cAAc,iBAAiB,MAC/B,gBACA,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,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let __ndla_icons = require("@ndla/icons");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_icons = require("@ndla/icons");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ndla_core = require("@ndla/core");
+let _ndla_core = require("@ndla/core");
 
 //#region src/ResourceBox/ResourceBox.tsx
 /**
@@ -14,7 +14,7 @@ let __ndla_core = require("@ndla/core");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const Container = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	padding: "medium",
 	borderRadius: "xsmall",
@@ -30,7 +30,7 @@ const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 		padding: "0"
 	}
 } });
-const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ContentWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "flex-start",
@@ -38,7 +38,7 @@ const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	flex: "1",
 	tabletDown: { padding: "xsmall" }
 } });
-const StyledImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Image, { base: {
+const StyledImage = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Image, { base: {
 	objectFit: "cover",
 	borderRadius: "xsmall",
 	width: "fit-content",
@@ -48,15 +48,15 @@ const StyledImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Image
 		borderRadius: "0"
 	}
 } });
-const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { flex: "1" } });
+const StyledText = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Text, { base: { flex: "1" } });
 const ResourceBox = ({ image, title, caption, url, buttonText }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, { children: [image ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
 		src: image.src,
 		alt: image.alt,
-		sizes: `(min-width: ${__ndla_core.breakpoints.desktop}) 150px, (max-width: ${__ndla_core.breakpoints.tablet} ) 400px, 200px`,
+		sizes: `(min-width: ${_ndla_core.breakpoints.desktop}) 150px, (max-width: ${_ndla_core.breakpoints.tablet} ) 400px, 200px`,
 		variant: "rounded"
 	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Heading, {
 			textStyle: "label.large",
 			fontWeight: "bold",
 			asChild: true,
@@ -67,11 +67,11 @@ const ResourceBox = ({ image, title, caption, url, buttonText }) => {
 			textStyle: "body.medium",
 			children: caption
 		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_safelink.SafeLinkButton, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_safelink.SafeLinkButton, {
 			to: url,
 			target: "_blank",
 			variant: "secondary",
-			children: [buttonText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ShareBoxLine, {})]
+			children: [buttonText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ShareBoxLine, {})]
 		})
 	] })] });
 };

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"],"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"}
+{"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"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,gDAAmB,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,qDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,MAAM;CACN,YAAY,EACV,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAM,kDAAqBA,wBAAO,EAChC,MAAM;CACJ,WAAW;CACX,cAAc;CACd,OAAO;CACP,aAAa;CACb,YAAY;EACV,OAAO;EACP,cAAc;EACf;CACF,EACF,CAAC;AAEF,MAAM,iDAAoBC,uBAAM,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,uBAAY,QAAQ,uBAAuBA,uBAAY,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,6BAAe;IACD;KACF,IACP"}

package/lib/TagSelector/TagSelector.js

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_icons = require("@ndla/icons");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ndla_util = require("@ndla/util");
-let __ark_ui_react = require("@ark-ui/react");
+let _ndla_util = require("@ndla/util");
+let _ark_ui_react = require("@ark-ui/react");
 
 //#region src/TagSelector/TagSelector.tsx
 /**
@@ -24,7 +24,7 @@ const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBe
 	(0, react.useEffect)(() => {
 		if (!controlRef.current) controlRef.current = document.getElementById(ids.control);
 	}, [ids.control]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.ComboboxRoot, {
 		ids,
 		asChild: true,
 		allowCustomValue,
@@ -33,7 +33,7 @@ const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBe
 		onValueChange,
 		translations,
 		onPointerDownOutside: (event) => {
-			if ((0, __ndla_util.contains)(controlRef.current, event.detail.originalEvent.target)) event.preventDefault();
+			if ((0, _ndla_util.contains)(controlRef.current, event.detail.originalEvent.target)) event.preventDefault();
 		},
 		value,
 		...rest,
@@ -49,33 +49,33 @@ const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBe
 	});
 };
 const TagSelectorTagsInputRoot = (0, react.forwardRef)((props, ref) => {
-	const comboboxApi = (0, __ark_ui_react.useComboboxContext)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputRoot, {
+	const comboboxApi = (0, _ark_ui_react.useComboboxContext)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputRoot, {
 		ref,
 		onInputValueChange: (details) => comboboxApi.setInputValue(details.inputValue),
 		...props
 	});
 });
-const TagSelectorLabel = __ndla_primitives.ComboboxLabel;
-const TagSelectorItemInput = __ndla_primitives.TagsInputItemInput;
-const TagSelectorTrigger = __ndla_primitives.ComboboxTrigger;
+const TagSelectorLabel = _ndla_primitives.ComboboxLabel;
+const TagSelectorItemInput = _ndla_primitives.TagsInputItemInput;
+const TagSelectorTrigger = _ndla_primitives.ComboboxTrigger;
 const TagSelectorControl = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxControl, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.ComboboxControl, {
 		ref,
 		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputControl, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputControl, {
 			...props,
 			children
 		})
 	});
 });
-const TagSelectorClearTrigger = __ndla_primitives.ComboboxClearTrigger;
+const TagSelectorClearTrigger = _ndla_primitives.ComboboxClearTrigger;
 const TagSelectorInputBase = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	const tagsApi = (0, __ark_ui_react.useTagsInputContext)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxInput, {
+	const tagsApi = (0, _ark_ui_react.useTagsInputContext)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.ComboboxInput, {
 		ref,
 		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputInput, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputInput, {
 			onKeyDown: (event) => {
 				if (event.key === "Enter") tagsApi.addValue(tagsApi.inputValue);
 			},
@@ -85,15 +85,15 @@ const TagSelectorInputBase = (0, react.forwardRef)(({ children, ...props }, ref)
 	});
 });
 const TagSelectorInput = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	const tagsApi = (0, __ark_ui_react.useTagsInputContext)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [tagsApi.value.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.TagsInputItem, {
+	const tagsApi = (0, _ark_ui_react.useTagsInputContext)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [tagsApi.value.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.TagsInputItem, {
 		index,
 		value,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.TagsInputItemPreview, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputItemText, { children: value }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputItemDeleteTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CloseLine, {}) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputItemInput, {})]
-	}, value)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxInput, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.TagsInputItemPreview, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputItemText, { children: value }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputItemDeleteTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.CloseLine, {}) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputItemInput, {})]
+	}, value)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.ComboboxInput, {
 		ref,
 		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputInput, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputInput, {
 			onKeyDown: (event) => {
 				if (event.key === "Enter") tagsApi.addValue(tagsApi.inputValue);
 			},

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,mBAA6C,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,cACA,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,UAAU,GAAG,SAAS,QAAQ;AACrH,QACE,2CAACC;EAAqB;EAAK;YACzB,2CAACC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;EAEpB;AAEF,MAAa,0BAA0BC;AAKvC,MAAa,8CACV,EAAE,UAAU,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,UAAU,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"}
+{"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,cACA,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,gCAAa,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,qDAAkC;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,UAAU,GAAG,SAAS,QAAQ;AACrH,QACE,2CAACC;EAAqB;EAAK;YACzB,2CAACC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;EAEpB;AAEF,MAAa,0BAA0BC;AAKvC,MAAa,8CACV,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/B,MAAM,kDAA+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,UAAU,GAAG,SAAS,QAAQ;CACnH,MAAM,kDAA+B;AAErC,QACE,qFACG,QAAQ,MAAM,KAAK,OAAO,UACzB,4CAACC;EAAqB;EAAc;aAClC,4CAACC,oDACC,2CAACC,gDAAmB,QAA0B,EAC9C,2CAACC,yDACC,2CAACC,0BAAY,GACc,IACR,EACvB,2CAACX,wCAAqB;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"}

package/lib/ZendeskButton/ZendeskButton.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
+let _ndla_primitives = require("@ndla/primitives");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/ZendeskButton/ZendeskButton.tsx
@@ -33,7 +33,7 @@ const ZendeskButton = (0, react.forwardRef)(({ locale, variant = "secondary", wi
 			document.body.appendChild(script);
 		} else if (window?.zE) window.zE("webWidget", "open");
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Button, {
 		onClick: handleClick,
 		variant,
 		id: "zendeskButton",