@ndla/ui 56.0.122-alpha.0 → 56.0.124-alpha.0

package/lib/ContentTypeBadge/ContentTypeBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeBadge.js","names":["contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant>","Badge"],"sources":["../../src/ContentTypeBadge/ContentTypeBadge.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 } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Badge, type BadgeProps, type BadgeVariant } from \"@ndla/primitives\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport interface ContentTypeBadgeProps extends Omit<BadgeProps, \"colorTheme\"> {\n  contentType: ContentType | undefined;\n}\n\nexport type StrictContentType =\n  | typeof contentTypes.SUBJECT_MATERIAL\n  | typeof contentTypes.TASKS_AND_ACTIVITIES\n  | typeof contentTypes.ASSESSMENT_RESOURCES\n  | typeof contentTypes.SUBJECT\n  | typeof contentTypes.SOURCE_MATERIAL\n  | typeof contentTypes.LEARNING_PATH\n  | typeof contentTypes.TOPIC\n  | typeof contentTypes.MULTIDISCIPLINARY\n  | typeof contentTypes.CONCEPT\n  | typeof contentTypes.EXTERNAL\n  | typeof contentTypes.IMAGE\n  | typeof contentTypes.AUDIO\n  | typeof contentTypes.VIDEO\n  | typeof contentTypes.MISSING\n  | typeof contentTypes.PODCAST\n  | typeof contentTypes.GLOSS\n  | typeof contentTypes.PROGRAMME\n  | typeof contentTypes.PODCAST_SERIES\n  | typeof contentTypes.FRONTPAGE_ARTICLE;\n\nexport type ContentType =\n  | StrictContentType\n  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense\n  | (string & {});\n\nexport const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {\n  [contentTypes.SUBJECT_MATERIAL]: \"brand1\",\n  [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2\",\n  [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n  [contentTypes.SUBJECT]: \"neutral\",\n  [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n  [contentTypes.LEARNING_PATH]: \"brand3\",\n  [contentTypes.TOPIC]: \"neutral\",\n  [contentTypes.MULTIDISCIPLINARY]: \"neutral\",\n  [contentTypes.CONCEPT]: \"brand1\",\n  [contentTypes.EXTERNAL]: \"brand2\",\n  [contentTypes.IMAGE]: \"brand1\",\n  [contentTypes.AUDIO]: \"brand1\",\n  [contentTypes.PODCAST]: \"brand1\",\n  [contentTypes.VIDEO]: \"brand1\",\n  [contentTypes.MISSING]: \"neutral\",\n  [contentTypes.PODCAST_SERIES]: \"brand1\",\n  [contentTypes.GLOSS]: \"brand1\",\n  [contentTypes.PROGRAMME]: \"neutral\",\n  [contentTypes.FRONTPAGE_ARTICLE]: \"brand2\",\n};\n\nexport const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(\n  ({ contentType, children, ...props }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <Badge\n        colorTheme={contentTypeToBadgeVariantMap[contentType ?? \"missing\"] ?? contentTypeToBadgeVariantMap[\"missing\"]}\n        {...props}\n        ref={ref}\n      >\n        {children ?? t(`contentTypes.${contentType}`)}\n      </Badge>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA2CA,MAAaA,+BAAkE;yCAC5C;6CACI;6CACA;gCACb;wCACQ;sCACF;8BACR;0CACY;gCACV;iCACC;8BACH;8BACA;gCACE;8BACF;gCACE;uCACO;8BACT;kCACI;0CACQ;AACnC;AAED,MAAa,mBAAmB,sBAC9B,CAAC,EAAE,aAAa,SAAU,GAAG,OAAO,EAAE,QAAQ;CAC5C,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,wBACE,2BAACC;EACC,YAAY,6BAA6B,eAAe,cAAc,6BAA6B;EACnG,GAAI;EACC;YAEJ,YAAY,GAAG,eAAe,YAAY,EAAE;GACvC;AAEX,EACF"}

package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -0,0 +1,26 @@
+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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx
+const contentTypeToVariantMapping = {
+	"subject-material": "brand1",
+	"source-material": "brand1",
+	concept: "brand1",
+	"tasks-and-activities": "brand2",
+	"assessment-resources": "brand2"
+};
+const ContentTypeBlockQuote = (0, react.forwardRef)(({ variant, contentType,...props }, ref) => {
+	const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+	const variantColor = variant === "colored" ? color : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.BlockQuote, {
+		...props,
+		variant: variantColor,
+		ref
+	});
+});
+
+//#endregion
+exports.ContentTypeBlockQuote = ContentTypeBlockQuote;
+//# sourceMappingURL=ContentTypeBlockQuote.js.map

package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeBlockQuote.js","names":["BlockQuote"],"sources":["../../src/ContentTypeBlockQuote/ContentTypeBlockQuote.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 } from \"react\";\nimport { BlockQuote, type BlockQuoteProps, type BlockQuoteVariantProps } from \"@ndla/primitives\";\nimport type { ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\n\nexport type ContentTypeBlockQuoteVariant = \"colored\" | \"neutral\";\n\nconst contentTypeToVariantMapping = {\n  \"subject-material\": \"brand1\",\n  \"source-material\": \"brand1\",\n  concept: \"brand1\",\n  \"tasks-and-activities\": \"brand2\",\n  \"assessment-resources\": \"brand2\",\n} as Record<ContentType, NonNullable<BlockQuoteVariantProps>[\"variant\"]>;\n\ninterface Props extends Omit<BlockQuoteProps, \"variant\"> {\n  variant?: ContentTypeBlockQuoteVariant;\n  contentType?: ContentType;\n}\n\nexport const ContentTypeBlockQuote = forwardRef<HTMLQuoteElement, Props>(({ variant, contentType, ...props }, ref) => {\n  const color = contentType ? (contentTypeToVariantMapping[contentType] ?? \"brand1\") : \"brand1\";\n  const variantColor = variant === \"colored\" ? color : undefined;\n  return <BlockQuote {...props} variant={variantColor} ref={ref} />;\n});\n"],"mappings":";;;;;;AAcA,MAAM,8BAA8B;CAClC,oBAAoB;CACpB,mBAAmB;CACnB,SAAS;CACT,wBAAwB;CACxB,wBAAwB;AACzB;AAOD,MAAa,wBAAwB,sBAAoC,CAAC,EAAE,SAAS,YAAa,GAAG,OAAO,EAAE,QAAQ;CACpH,MAAM,QAAQ,cAAe,4BAA4B,gBAAgB,WAAY;CACrF,MAAM,eAAe,YAAY,YAAY;AAC7C,wBAAO,2BAACA;EAAW,GAAI;EAAO,SAAS;EAAmB;GAAO;AAClE,EAAC"}

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -0,0 +1,26 @@
+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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/ContentTypeFramedContent/ContentTypeFramedContent.tsx
+const contentTypeToVariantMapping = {
+	"subject-material": "brand1",
+	"source-material": "brand1",
+	concept: "brand1",
+	"tasks-and-activities": "brand2",
+	"assessment-resources": "brand2"
+};
+const ContentTypeFramedContent = (0, react.forwardRef)(({ variant = "neutral", contentType,...props }, ref) => {
+	const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+	const variantColor = variant === "colored" ? color : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.FramedContent, {
+		...props,
+		colorTheme: variantColor,
+		ref
+	});
+});
+
+//#endregion
+exports.ContentTypeFramedContent = ContentTypeFramedContent;
+//# sourceMappingURL=ContentTypeFramedContent.js.map

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeFramedContent.js","names":["FramedContent"],"sources":["../../src/ContentTypeFramedContent/ContentTypeFramedContent.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 } from \"react\";\nimport { FramedContent, type FramedContentProps, type FramedContentVariantProps } from \"@ndla/primitives\";\nimport type { ContentType } from \"..\";\n\nconst contentTypeToVariantMapping = {\n  \"subject-material\": \"brand1\",\n  \"source-material\": \"brand1\",\n  concept: \"brand1\",\n  \"tasks-and-activities\": \"brand2\",\n  \"assessment-resources\": \"brand2\",\n} as Record<ContentType, NonNullable<FramedContentVariantProps>[\"colorTheme\"]>;\n\nexport type ContentTypeFramedContentVariant = \"colored\" | \"neutral\";\n\ninterface Props extends FramedContentProps {\n  variant?: ContentTypeFramedContentVariant;\n  contentType?: ContentType;\n}\n\nexport const ContentTypeFramedContent = forwardRef<HTMLDivElement, Props>(\n  ({ variant = \"neutral\", contentType, ...props }, ref) => {\n    const color = contentType ? (contentTypeToVariantMapping[contentType] ?? \"brand1\") : \"brand1\";\n    const variantColor = variant === \"colored\" ? color : undefined;\n    return <FramedContent {...props} colorTheme={variantColor} ref={ref} />;\n  },\n);\n"],"mappings":";;;;;;AAYA,MAAM,8BAA8B;CAClC,oBAAoB;CACpB,mBAAmB;CACnB,SAAS;CACT,wBAAwB;CACxB,wBAAwB;AACzB;AASD,MAAa,2BAA2B,sBACtC,CAAC,EAAE,UAAU,WAAW,YAAa,GAAG,OAAO,EAAE,QAAQ;CACvD,MAAM,QAAQ,cAAe,4BAA4B,gBAAgB,WAAY;CACrF,MAAM,eAAe,YAAY,YAAY;AAC7C,wBAAO,2BAACA;EAAc,GAAI;EAAO,YAAY;EAAmB;GAAO;AACxE,EACF"}

package/lib/ContentTypeHero/ContentTypeHero.js

@@ -0,0 +1,40 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_ContentType = require('../model/ContentType.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/ContentTypeHero/ContentTypeHero.tsx
+const contentTypeToHeroMap = {
+	[require_ContentType.SUBJECT_MATERIAL]: "primary",
+	[require_ContentType.TASKS_AND_ACTIVITIES]: "brand2Bold",
+	[require_ContentType.ASSESSMENT_RESOURCES]: "brand2",
+	[require_ContentType.SUBJECT]: "primary",
+	[require_ContentType.SOURCE_MATERIAL]: "brand1",
+	[require_ContentType.LEARNING_PATH]: "primary",
+	[require_ContentType.TOPIC]: "neutral",
+	[require_ContentType.MULTIDISCIPLINARY]: "primary",
+	[require_ContentType.CONCEPT]: "brand1Moderate",
+	[require_ContentType.EXTERNAL]: "primary",
+	[require_ContentType.IMAGE]: "primary",
+	[require_ContentType.AUDIO]: "primary",
+	[require_ContentType.PODCAST]: "primary",
+	[require_ContentType.VIDEO]: "primary",
+	[require_ContentType.MISSING]: "neutral",
+	[require_ContentType.GLOSS]: "brand1Moderate",
+	[require_ContentType.PROGRAMME]: "primary",
+	[require_ContentType.PODCAST_SERIES]: "primary",
+	[require_ContentType.FRONTPAGE_ARTICLE]: "primary"
+};
+const ContentTypeHero = (0, react.forwardRef)(({ contentType, children,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Hero, {
+		variant: contentTypeToHeroMap[contentType ?? "missing"] ?? contentTypeToHeroMap["missing"],
+		...props,
+		ref,
+		children
+	});
+});
+
+//#endregion
+exports.ContentTypeHero = ContentTypeHero;
+//# sourceMappingURL=ContentTypeHero.js.map

package/lib/ContentTypeHero/ContentTypeHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeHero.js","names":["contentTypeToHeroMap: Record<ContentType, HeroVariant>","Hero"],"sources":["../../src/ContentTypeHero/ContentTypeHero.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 } from \"react\";\nimport { Hero, type HeroProps, type HeroVariant } from \"@ndla/primitives\";\nimport type { ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {\n  [contentTypes.SUBJECT_MATERIAL]: \"primary\",\n  [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2Bold\",\n  [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n  // This will never happen\n  [contentTypes.SUBJECT]: \"primary\",\n  [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n  // This will never happen\n  [contentTypes.LEARNING_PATH]: \"primary\",\n  [contentTypes.TOPIC]: \"neutral\",\n  [contentTypes.MULTIDISCIPLINARY]: \"primary\",\n  [contentTypes.CONCEPT]: \"brand1Moderate\",\n  [contentTypes.EXTERNAL]: \"primary\",\n  [contentTypes.IMAGE]: \"primary\",\n  [contentTypes.AUDIO]: \"primary\",\n  [contentTypes.PODCAST]: \"primary\",\n  [contentTypes.VIDEO]: \"primary\",\n  [contentTypes.MISSING]: \"neutral\",\n  [contentTypes.GLOSS]: \"brand1Moderate\",\n  // this will never happen\n  [contentTypes.PROGRAMME]: \"primary\",\n  // this will never happen\n  [contentTypes.PODCAST_SERIES]: \"primary\",\n  [contentTypes.FRONTPAGE_ARTICLE]: \"primary\",\n};\n\nexport interface ContentTypeHeroProps extends HeroProps {\n  contentType: ContentType | undefined;\n}\n\nexport const ContentTypeHero = forwardRef<HTMLDivElement, ContentTypeHeroProps>(\n  ({ contentType, children, ...props }, ref) => {\n    return (\n      <Hero\n        variant={contentTypeToHeroMap[contentType ?? \"missing\"] ?? contentTypeToHeroMap[\"missing\"]}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </Hero>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAaA,MAAaA,uBAAyD;yCACnC;6CACI;6CACA;gCAEb;wCACQ;sCAEF;8BACR;0CACY;gCACV;iCACC;8BACH;8BACA;gCACE;8BACF;gCACE;8BACF;kCAEI;uCAEK;0CACG;AACnC;AAMD,MAAa,kBAAkB,sBAC7B,CAAC,EAAE,aAAa,SAAU,GAAG,OAAO,EAAE,QAAQ;AAC5C,wBACE,2BAACC;EACC,SAAS,qBAAqB,eAAe,cAAc,qBAAqB;EAChF,GAAI;EACC;EAEJ;GACI;AAEV,EACF"}

package/lib/CopyParagraphButton/CopyParagraphButton.js

@@ -0,0 +1,63 @@
+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_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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
+
+//#region src/CopyParagraphButton/CopyParagraphButton.tsx
+const ContainerDiv = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	position: "relative",
+	_hover: { "& [data-copy-button]": {
+		opacity: "1",
+		cursor: "pointer"
+	} }
+} });
+const StyledIconButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: {
+	position: "absolute",
+	left: "-xxlarge",
+	top: "-4xsmall",
+	opacity: "0",
+	cursor: "pointer",
+	"&:focus, &:focus-visible, &:active": { opacity: "1" }
+} });
+const CopyParagraphButton = ({ children, copyText, lang }) => {
+	const [hasCopied, setHasCopied] = (0, react.useState)(false);
+	const { t } = (0, react_i18next.useTranslation)();
+	const sanitizedTitle = (0, react.useMemo)(() => encodeURIComponent(copyText.replace(/ /g, "-")), [copyText]);
+	(0, react.useEffect)(() => {
+		if (hasCopied) setTimeout(() => setHasCopied(false), 3e3);
+	}, [hasCopied]);
+	const onCopyClick = (0, react.useCallback)(() => {
+		setHasCopied(true);
+		const { location } = window;
+		const newHash = `#${sanitizedTitle}`;
+		const port = location.port ? `:${location.port}` : "";
+		const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
+		(0, __ndla_util.copyTextToClipboard)(urlToCopy);
+	}, [sanitizedTitle]);
+	const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContainerDiv, {
+		"data-embed-type": "copy-heading",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
+			variant: "clear",
+			"data-copy-button": "",
+			onClick: onCopyClick,
+			title: tooltip,
+			"aria-label": `${tooltip}: ${copyText}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.LinkMedium, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+			id: sanitizedTitle,
+			tabIndex: -1,
+			lang,
+			children
+		})]
+	});
+};
+var CopyParagraphButton_default = CopyParagraphButton;
+
+//#endregion
+exports.CopyParagraphButton_default = CopyParagraphButton_default;
+//# sourceMappingURL=CopyParagraphButton.js.map

package/lib/CopyParagraphButton/CopyParagraphButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyParagraphButton.js","names":["IconButton","LinkMedium"],"sources":["../../src/CopyParagraphButton/CopyParagraphButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 ReactNode, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LinkMedium } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { copyTextToClipboard } from \"@ndla/util\";\n\nconst ContainerDiv = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    _hover: {\n      \"& [data-copy-button]\": {\n        opacity: \"1\",\n        cursor: \"pointer\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    left: \"-xxlarge\",\n    top: \"-4xsmall\",\n    opacity: \"0\",\n    cursor: \"pointer\",\n    \"&:focus, &:focus-visible, &:active\": {\n      opacity: \"1\",\n    },\n  },\n});\n\ninterface Props {\n  // What to render within the h2\n  children: ReactNode;\n  copyText: string;\n  lang?: string;\n}\nconst CopyParagraphButton = ({ children, copyText, lang }: Props) => {\n  const [hasCopied, setHasCopied] = useState(false);\n  const { t } = useTranslation();\n  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, \"-\")), [copyText]);\n\n  useEffect(() => {\n    if (hasCopied) {\n      setTimeout(() => setHasCopied(false), 3000);\n    }\n  }, [hasCopied]);\n\n  const onCopyClick = useCallback(() => {\n    setHasCopied(true);\n    const { location } = window;\n    const newHash = `#${sanitizedTitle}`;\n    const port = location.port ? `:${location.port}` : \"\";\n    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;\n\n    copyTextToClipboard(urlToCopy);\n  }, [sanitizedTitle]);\n\n  const tooltip = hasCopied ? t(\"article.copyPageLinkCopied\") : t(\"article.copyHeaderLink\");\n  return (\n    <ContainerDiv data-embed-type=\"copy-heading\">\n      <StyledIconButton\n        variant=\"clear\"\n        data-copy-button=\"\"\n        onClick={onCopyClick}\n        title={tooltip}\n        aria-label={`${tooltip}: ${copyText}`}\n      >\n        <LinkMedium />\n      </StyledIconButton>\n      <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>\n        {children}\n      </h2>\n    </ContainerDiv>\n  );\n};\n\nexport default CopyParagraphButton;\n"],"mappings":";;;;;;;;;;AAeA,MAAM,eAAe,qCAAO,OAAO,EACjC,MAAM;CACJ,UAAU;CACV,QAAQ,EACN,wBAAwB;EACtB,SAAS;EACT,QAAQ;CACT,EACF;AACF,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOA,8BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,MAAM;CACN,KAAK;CACL,SAAS;CACT,QAAQ;CACR,sCAAsC,EACpC,SAAS,IACV;AACF,EACF,EAAC;AAQF,MAAM,sBAAsB,CAAC,EAAE,UAAU,UAAU,MAAa,KAAK;CACnE,MAAM,CAAC,WAAW,aAAa,GAAG,oBAAS,MAAM;CACjD,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,iBAAiB,mBAAQ,MAAM,mBAAmB,SAAS,QAAQ,MAAM,IAAI,CAAC,EAAE,CAAC,QAAS,EAAC;AAEjG,sBAAU,MAAM;AACd,MAAI,UACF,YAAW,MAAM,aAAa,MAAM,EAAE,IAAK;CAE9C,GAAE,CAAC,SAAU,EAAC;CAEf,MAAM,cAAc,uBAAY,MAAM;AACpC,eAAa,KAAK;EAClB,MAAM,EAAE,UAAU,GAAG;EACrB,MAAM,WAAW,GAAG,eAAe;EACnC,MAAM,OAAO,SAAS,QAAQ,GAAG,SAAS,KAAK,IAAI;EACnD,MAAM,aAAa,EAAE,SAAS,SAAS,IAAI,SAAS,SAAS,EAAE,KAAK,EAAE,SAAS,SAAS,EAAE,SAAS,OAAO,EAAE,QAAQ;AAEpH,uCAAoB,UAAU;CAC/B,GAAE,CAAC,cAAe,EAAC;CAEpB,MAAM,UAAU,YAAY,EAAE,6BAA6B,GAAG,EAAE,yBAAyB;AACzF,wBACE,4BAAC;EAAa,mBAAgB;6BAC5B,2BAAC;GACC,SAAQ;GACR,oBAAiB;GACjB,SAAS;GACT,OAAO;GACP,eAAa,EAAE,QAAQ,IAAI,SAAS;6BAEpC,2BAACC,4BAAa;IACG,kBACnB,2BAAC;GAAG,IAAI;GAAgB,UAAU;GAAU;GACzC;IACE;GACQ;AAElB;AAED,kCAAe"}

package/lib/CopyParagraphButton/index.js

@@ -0,0 +1,8 @@
+const require_CopyParagraphButton = require('./CopyParagraphButton.js');
+
+//#region src/CopyParagraphButton/index.tsx
+var CopyParagraphButton_default$1 = require_CopyParagraphButton.CopyParagraphButton_default;
+
+//#endregion
+exports.CopyParagraphButton_default = CopyParagraphButton_default$1;
+//# sourceMappingURL=index.js.map

package/lib/CopyParagraphButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CopyParagraphButton"],"sources":["../../src/CopyParagraphButton/index.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 CopyParagraphButton from \"./CopyParagraphButton\";\n\nexport { CopyParagraphButton };\nexport default CopyParagraphButton;\n"],"mappings":";;;AAWA,oCAAeA"}

package/lib/Embed/AudioEmbed.js

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_licenseAttributes = require('../utils/licenseAttributes.js');
+const require_index = require('../AudioPlayer/index.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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/AudioEmbed.tsx
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { clear: "both" } });
+const AudioEmbed = ({ embed, lang }) => {
+	const type = embed.embedData.type === "standard" ? "audio" : "podcast";
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type });
+	const { data, embedData } = embed;
+	if (embedData.type === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AudioPlayer_default, {
+		speech: true,
+		src: data.audioFile.url,
+		title: data.title.title
+	});
+	const subtitle = data.series ? {
+		title: data.series.title.title,
+		url: `/podkast/${data.series.id}`
+	} : void 0;
+	const coverPhoto = data.podcastMeta?.coverPhoto;
+	const img = coverPhoto && {
+		url: coverPhoto.url,
+		alt: coverPhoto.altText
+	};
+	const licenseProps = require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
+		lang,
+		"data-embed-type": type,
+		...licenseProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AudioPlayer_default, {
+			description: data.podcastMeta?.introduction ?? "",
+			img,
+			src: data.audioFile.url,
+			textVersion: data.manuscript?.manuscript.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: data.manuscript.manuscript } }) : void 0,
+			title: data.title.title,
+			subtitle
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+			error: false,
+			type: data.audioType === "standard" ? "audio" : "podcast",
+			copyright: embed.data.copyright
+		})]
+	});
+};
+var AudioEmbed_default = AudioEmbed;
+
+//#endregion
+exports.AudioEmbed_default = AudioEmbed_default;
+//# sourceMappingURL=AudioEmbed.js.map

package/lib/Embed/AudioEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","EmbedByline"],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\nimport AudioPlayer from \"../AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\ninterface Props {\n  embed: AudioMetaData;\n  lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n  creators: Author[];\n  rightsholders: Author[];\n  processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nconst AudioEmbed = ({ embed, lang }: Props) => {\n  const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={type} />;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.type === \"minimal\") {\n    return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n  }\n\n  const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n  const coverPhoto = data.podcastMeta?.coverPhoto;\n\n  const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  return (\n    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n      <AudioPlayer\n        description={data.podcastMeta?.introduction ?? \"\"}\n        img={img}\n        src={data.audioFile.url}\n        textVersion={\n          data.manuscript?.manuscript.length ? (\n            <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n          ) : undefined\n        }\n        title={data.title.title}\n        subtitle={subtitle}\n      />\n      <EmbedByline\n        error={false}\n        type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n        copyright={embed.data.copyright}\n      />\n    </StyledFigure>\n  );\n};\n\nexport default AudioEmbed;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAaF,MAAM,aAAa,CAAC,EAAE,OAAO,MAAa,KAAK;CAC7C,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,+DAA4B,OAAQ;CAG9C,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,SAAS,UACrB,wBAAO,2BAACC;EAAY;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;GAAS;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,MAAM,WAAW,KAAK,OAAO,GAAG;CAAG;CAEpG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;CAAS;CAE1E,MAAM,eAAe,4CAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,wBACE,4BAAC;EAAmB;EAAM,mBAAiB;EAAM,GAAI;6BACnD,2BAACA;GACC,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,yBAC1B,2BAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,WAAW,WAAY,IAAI;GAG5E,OAAO,KAAK,MAAM;GACR;IACV,kBACF,2BAACC;GACC,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;IACtB;GACW;AAElB;AAED,yBAAe"}

package/lib/Embed/BrightcoveEmbed.js

@@ -0,0 +1,97 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_licenseAttributes = require('../utils/licenseAttributes.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 react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/BrightcoveEmbed.tsx
+const LinkedVideoButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginBlockStart: "3xsmall" } });
+const BrightcoveIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: {
+	border: 0,
+	height: "auto",
+	width: "100%"
+} });
+const isNumeric = (value) => !Number.isNaN(value - Number.parseFloat(value));
+const getIframeProps = (data, sources) => {
+	const { account, videoid, player = "default" } = data;
+	const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a.height - b.height)[0];
+	return {
+		src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
+		height: source?.height ?? "480",
+		width: source?.width ?? "640"
+	};
+};
+const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
+	const [showOriginalVideo, setShowOriginalVideo] = (0, react.useState)(true);
+	const { t } = (0, react_i18next.useTranslation)();
+	const iframeRef = (0, react.useRef)(null);
+	const { embedData } = embed;
+	const fallbackTitle = `${t("embed.type.video")}: ${embedData.videoid}`;
+	const parsedDescription = (0, react.useMemo)(() => {
+		if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? (0, html_react_parser.default)(embed.embedData.caption) : void 0;
+		else if (embed.status === "success" && embed.data.description) return (0, html_react_parser.default)(embed.data.description);
+	}, [embed, renderContext]);
+	(0, react.useEffect)(() => {
+		const iframe = iframeRef.current;
+		if (iframe) {
+			const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+			iframe.style.aspectRatio = `${width}/${height}`;
+			iframe.width = "";
+			iframe.height = "";
+		}
+	}, []);
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, {
+		type: "video",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrightcoveIframe, {
+			ref: iframeRef,
+			title: embedData.alt || fallbackTitle,
+			"aria-label": embedData.alt || fallbackTitle,
+			...getIframeProps(embedData, []),
+			allow: "fullscreen; encrypted-media"
+		})
+	});
+	const { data } = embed;
+	const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : void 0;
+	const originalVideoProps = getIframeProps(embedData, data.sources);
+	const alternativeVideoProps = linkedVideoId ? getIframeProps({
+		...embedData,
+		videoid: linkedVideoId
+	}, data.sources) : void 0;
+	const licenseProps = require_licenseAttributes.licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
+	const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Figure, {
+		"data-embed-type": "brightcove",
+		...licenseProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "brightcove-video",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrightcoveIframe, {
+				ref: iframeRef,
+				className: "original",
+				title,
+				"aria-label": title,
+				...alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps,
+				allow: "fullscreen; encrypted-media"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+			type: "video",
+			copyright: data.copyright,
+			description: parsedDescription,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: !!linkedVideoId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkedVideoButton, {
+				size: "small",
+				variant: "secondary",
+				onClick: () => setShowOriginalVideo((p) => !p),
+				children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
+			}) })
+		})]
+	});
+};
+var BrightcoveEmbed_default = BrightcoveEmbed;
+
+//#endregion
+exports.BrightcoveEmbed_default = BrightcoveEmbed_default;
+//# sourceMappingURL=BrightcoveEmbed.js.map

package/lib/Embed/BrightcoveEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrightcoveEmbed.js","names":["Button","value: any","data: BrightcoveEmbedData","sources: BrightcoveVideoSource[]","EmbedErrorPlaceholder","Figure","EmbedByline"],"sources":["../../src/Embed/BrightcoveEmbed.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 { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n  embed: BrightcoveMetaData;\n  renderContext?: RenderContext;\n  lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n  base: {\n    border: 0,\n    height: \"auto\",\n    width: \"100%\",\n  },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n  const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n  const urlOrTitle = title || url;\n  return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" frameborder=\"0\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n  const { account, videoid, player = \"default\" } = data;\n\n  const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n  return {\n    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n    height: source?.height ?? \"480\",\n    width: source?.width ?? \"640\",\n  };\n};\nconst BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n  const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const { embedData } = embed;\n  const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    } else if (embed.status === \"success\" && embed.data.description) {\n      return parse(embed.data.description);\n    }\n  }, [embed, renderContext]);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width}/${height}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n  if (embed.status === \"error\") {\n    return (\n      <EmbedErrorPlaceholder type=\"video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          title={embedData.alt || fallbackTitle}\n          aria-label={embedData.alt || fallbackTitle}\n          {...getIframeProps(embedData, [])}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </EmbedErrorPlaceholder>\n    );\n  }\n  const { data } = embed;\n\n  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n  const originalVideoProps = getIframeProps(embedData, data.sources);\n  const alternativeVideoProps = linkedVideoId\n    ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n    : undefined;\n\n  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n  const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n  return (\n    <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n      <div className=\"brightcove-video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          className=\"original\"\n          title={title}\n          aria-label={title}\n          {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </div>\n      <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n        <div>\n          {!!linkedVideoId && (\n            <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n              {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n            </LinkedVideoButton>\n          )}\n        </div>\n      </EmbedByline>\n    </Figure>\n  );\n};\n\nexport default BrightcoveEmbed;\n"],"mappings":";;;;;;;;;;;;AAyBA,MAAM,oBAAoB,qCAAOA,0BAAQ,EACvC,MAAM,EACJ,kBAAkB,UACnB,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;AACR,EACF,EAAC;AASF,MAAa,YAAY,CAACC,WAAgB,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,iBAAiB,CAACC,MAA2BC,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,WAAW,GAAG;CAEjD,MAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,MAAM,iCAAiC,QAAQ,GAAG,OAAO,8BAA8B,QAAQ;EAC/F,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;CACzB;AACF;AACD,MAAM,kBAAkB,CAAC,EAAE,OAAO,gBAAgB,WAAW,MAAa,KAAK;CAC7E,MAAM,CAAC,mBAAmB,qBAAqB,GAAG,oBAAS,KAAK;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,kBAA0B,KAAK;CACjD,MAAM,EAAE,WAAW,GAAG;CACtB,MAAM,iBAAiB,EAAE,EAAE,mBAAmB,CAAC,IAAI,UAAU,QAAQ;CACrE,MAAM,oBAAoB,mBAAQ,MAAM;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,+BAAM,MAAM,UAAU,QAAQ;WACtD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,+BAAM,MAAM,KAAK,YAAY;CAEvC,GAAE,CAAC,OAAO,aAAc,EAAC;AAE1B,sBAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,OAAO,GAAG,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,AAAC;AACzE,UAAO,MAAM,eAAe,EAAE,MAAM,GAAG,OAAO;AAC9C,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AACN,KAAI,MAAM,WAAW,QACnB,wBACE,2BAACC;EAAsB,MAAK;4BAC1B,2BAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,CAAE,EAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,MAAM,GAAG;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM;CAE9D,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;CAAe,GAAE,KAAK,QAAQ;CAG1E,MAAM,eAAe,4CAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,IAAI,EAAE,EAAE,mBAAmB,CAAC,IAAI,KAAK,KAAK,IAAI;AAE7E,wBACE,4BAACC;EAAO,mBAAgB;EAAa,GAAI;6BACvC,2BAAC;GAAI,WAAU;6BACb,2BAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,0BAA0B,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,kBACN,2BAACC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;6BACjE,2BAAC,qBACI,iCACD,2BAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,SAAS,MAAM,qBAAqB,CAAC,OAAO,EAAE;cAC/F,GAAG,iBAAiB,oBAAoB,aAAa,cAAc,EAAE;KACpD,GAElB;IACM;GACP;AAEZ;AAED,8BAAe"}

package/lib/Embed/CodeEmbed.js

@@ -0,0 +1,62 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_CodeBlock = require('../CodeBlock/CodeBlock.js');
+const require_codeLanguageOptions = require('../CodeBlock/codeLanguageOptions.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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
+
+//#region src/Embed/CodeEmbed.tsx
+const StyledFigCaption = (0, __ndla_styled_system_jsx.styled)("figcaption", { base: {
+	textStyle: "label.large",
+	fontWeight: "bold"
+} });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+	clear: "both",
+	"& > *:not(:where(:first-child))": { marginBlockStart: "xsmall" }
+} });
+const getTitleFromFormat = (format) => {
+	const selectedLanguage = require_codeLanguageOptions.codeLanguageOptions.find((item) => item.format === format);
+	if (selectedLanguage) return selectedLanguage.title;
+	return;
+};
+const CodeEmbed = ({ embed }) => {
+	const [isCopied, setIsCopied] = (0, react.useState)(false);
+	const { t } = (0, react_i18next.useTranslation)();
+	(0, react.useEffect)(() => {
+		if (isCopied) {
+			const timer = setInterval(() => setIsCopied(false), 3e3);
+			return () => {
+				clearTimeout(timer);
+			};
+		}
+	}, [isCopied]);
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "code" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
+		"data-embed-type": "code-block",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigCaption, { children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock_default, {
+				highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
+				format: embed.embedData.codeFormat
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Button, {
+				variant: "secondary",
+				onClick: () => {
+					(0, __ndla_util.copyTextToClipboard)(embed.status === "success" ? embed.data.decodedContent : "");
+					setIsCopied(true);
+				},
+				children: [isCopied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CheckLine, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.FileCopyLine, {}), isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
+			})
+		]
+	});
+};
+var CodeEmbed_default = CodeEmbed;
+
+//#endregion
+exports.CodeEmbed_default = CodeEmbed_default;
+//# sourceMappingURL=CodeEmbed.js.map

package/lib/Embed/CodeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEmbed.js","names":["Figure","format: string","item: ICodeLangugeOption","EmbedErrorPlaceholder","CodeBlock","Button","CheckLine","FileCopyLine"],"sources":["../../src/Embed/CodeEmbed.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 { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { copyTextToClipboard } from \"@ndla/util\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { CodeBlock, codeLanguageOptions } from \"../CodeBlock\";\nimport type { ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\n\ninterface Props {\n  embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n  base: {\n    textStyle: \"label.large\",\n    fontWeight: \"bold\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n    // We apply margin here to allow for the float and size props on figure to work as intended.\n    \"& > *:not(:where(:first-child))\": {\n      marginBlockStart: \"xsmall\",\n    },\n  },\n});\n\nconst getTitleFromFormat = (format: string) => {\n  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n  if (selectedLanguage) {\n    return selectedLanguage.title;\n  }\n  return;\n};\n\nconst CodeEmbed = ({ embed }: Props) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (isCopied) {\n      const timer = setInterval(() => setIsCopied(false), 3000);\n      // ensure interval is cleared - also if unmounted\n      return () => {\n        clearTimeout(timer);\n      };\n    }\n  }, [isCopied]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"code\" />;\n  }\n\n  return (\n    <StyledFigure data-embed-type=\"code-block\">\n      <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n      <CodeBlock\n        highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n        format={embed.embedData.codeFormat}\n      />\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          copyTextToClipboard(embed.status === \"success\" ? embed.data.decodedContent : \"\");\n          setIsCopied(true);\n        }}\n      >\n        {isCopied ? <CheckLine /> : <FileCopyLine />}\n        {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n      </Button>\n    </StyledFigure>\n  );\n};\n\nexport default CodeEmbed;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,mBAAmB,qCAAO,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;AACb,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,SACnB;AACF,EACF,EAAC;AAEF,MAAM,qBAAqB,CAACC,WAAmB;CAC7C,MAAM,mBAAmB,gDAAoB,KAAK,CAACC,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;AAE1B;AACD;AAED,MAAM,YAAY,CAAC,EAAE,OAAc,KAAK;CACtC,MAAM,CAAC,UAAU,YAAY,GAAG,oBAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAE9B,sBAAU,MAAM;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,YAAY,MAAM,YAAY,MAAM,EAAE,IAAK;AAEzD,UAAO,MAAM;AACX,iBAAa,MAAM;GACpB;EACF;CACF,GAAE,CAAC,QAAS,EAAC;AAEd,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,+DAAsB,MAAK,SAAS;AAG9C,wBACE,4BAAC;EAAa,mBAAgB;;mBAC5B,2BAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;mBAC9G,2BAACC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;mBACF,4BAACC;IACC,SAAQ;IACR,SAAS,MAAM;AACb,0CAAoB,MAAM,WAAW,YAAY,MAAM,KAAK,iBAAiB,GAAG;AAChF,iBAAY,KAAK;IAClB;eAEA,2BAAW,2BAACC,2BAAY,mBAAG,2BAACC,8BAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI;AAElB;AAED,wBAAe"}

package/lib/Embed/ConceptEmbed.js

@@ -0,0 +1,81 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
+const require_GlossEmbed = require('./GlossEmbed.js');
+const require_Concept = require('../Concept/Concept.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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/Embed/ConceptEmbed.tsx
+const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: {
+	width: "surface.xlarge",
+	maxHeight: "50vh",
+	overflowY: "auto"
+} });
+const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }) => {
+	const parsedContent = (0, react.useMemo)(() => {
+		if (embed.status === "error" || !embed.data.concept.content) return void 0;
+		return (0, html_react_parser.default)(embed.data.concept.content.htmlContent);
+	}, [embed]);
+	if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: embed.embedData.linkText });
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "gloss" });
+	const { concept, visualElement } = embed.data;
+	if (embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossEmbed.GlossEmbed, { embed });
+	if (embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineConcept, {
+		previewAlt,
+		linkText: embed.embedData.linkText,
+		copyright: concept.copyright,
+		visualElement,
+		lang,
+		title: concept.title.title,
+		source: concept.source,
+		children: parsedContent
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockConcept, {
+		previewAlt,
+		copyright: concept.copyright,
+		visualElement,
+		lang,
+		title: renderContext === "embed" ? void 0 : concept.title.title,
+		source: concept.source,
+		children: parsedContent
+	});
+};
+const InlineConcept = (0, react.forwardRef)(({ linkText, copyright, visualElement, previewAlt, lang, children, title, source,...rest }, ref) => {
+	const contentRef = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
+		initialFocusEl: () => contentRef.current,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+			asChild: true,
+			ref,
+			...rest,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: linkText })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
+			ref: contentRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Concept.Concept, {
+				copyright,
+				visualElement,
+				title,
+				lang,
+				source,
+				previewAlt,
+				children
+			})
+		}) })]
+	});
+});
+const BlockConcept = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Concept.Concept, {
+	...props,
+	"data-embed-type": "concept",
+	ref
+}));
+
+//#endregion
+exports.BlockConcept = BlockConcept;
+exports.ConceptEmbed = ConceptEmbed;
+exports.InlineConcept = InlineConcept;
+//# sourceMappingURL=ConceptEmbed.js.map

package/lib/Embed/ConceptEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.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 { forwardRef, useMemo, useRef } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n  renderContext?: RenderContext;\n  lang?: string;\n  previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n  embed: ConceptMetaData;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {\n  const parsedContent = useMemo(() => {\n    if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n    return parse(embed.data.concept.content.htmlContent);\n  }, [embed]);\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{embed.embedData.linkText}</span>;\n  }\n  if (embed.status === \"error\") {\n    // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  // TODO: Consider whether we should do this in article-converter instead.\n  if (embed.data.concept.glossData) {\n    return <GlossEmbed embed={embed} />;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkText={embed.embedData.linkText}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={concept.title.title}\n        source={concept.source}\n      >\n        {parsedContent}\n      </InlineConcept>\n    );\n  }\n\n  return (\n    <BlockConcept\n      previewAlt={previewAlt}\n      copyright={concept.copyright}\n      visualElement={visualElement}\n      lang={lang}\n      title={renderContext === \"embed\" ? undefined : concept.title.title}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkText?: string;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkText, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n        <PopoverTrigger asChild ref={ref} {...rest}>\n          <ConceptInlineTriggerButton>{linkText}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Concept\n              copyright={copyright}\n              visualElement={visualElement}\n              title={title}\n              lang={lang}\n              source={source}\n              previewAlt={previewAlt}\n            >\n              {children}\n            </Concept>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n  <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,uBAAuB,qCAAOA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAa,eAAe,CAAC,EAAE,OAAO,eAAe,MAAM,YAAmB,KAAK;CACjF,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,MAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,QAAS;AAC7D,SAAO,+BAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;CACrD,GAAE,CAAC,KAAM,EAAC;AAEX,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,2BAAC,oBAAM,MAAM,UAAU,WAAgB;AAEhD,KAAI,MAAM,WAAW,QAEnB,wBAAO,2BAACC,+DAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,eAAe,GAAG,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,wBAAO,2BAACC,iCAAkB,QAAS;AAGrC,KAAI,MAAM,UAAU,SAAS,SAC3B,wBACE,2BAAC;EACa;EACZ,UAAU,MAAM,UAAU;EAC1B,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,QAAQ,MAAM;EACrB,QAAQ,QAAQ;YAEf;GACa;AAIpB,wBACE,2BAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,mBAAsB,QAAQ,MAAM;EAC7D,QAAQ,QAAQ;YAEf;GACY;AAElB;AAOD,MAAa,gBAAgB,sBAC3B,CAAC,EAAE,UAAU,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,OAAQ,GAAG,MAAM,EAAE,QAAQ;CACnG,MAAM,aAAa,kBAAuB,KAAK;AAC/C,wBACE,4BAACC;EAAY,gBAAgB,MAAM,WAAW;6BAE5C,2BAACC;GAAe;GAAa;GAAK,GAAI;6BACpC,2BAACC,2EAA4B,WAAsC;IACpD,kBACjB,2BAACC,mDACC,2BAAC;GAAqB,KAAK;6BACzB,2BAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;AAEjB,EACF;AAID,MAAa,eAAe,sBAA2C,CAAC,OAAO,wBAC7E,2BAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}

package/lib/Embed/ConceptInlineTriggerButton.js

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_InlineTriggerButton = require('./InlineTriggerButton.js');
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+
+//#region src/Embed/ConceptInlineTriggerButton.tsx
+const ConceptInlineTriggerButton = (0, __ndla_styled_system_jsx.styled)(require_InlineTriggerButton.InlineTriggerButton, { base: {
+	position: "relative",
+	overflow: "visible",
+	borderBottom: "1px solid",
+	borderStyle: "dashed",
+	borderColor: "stroke.hover",
+	paddingBlockStart: "5xsmall",
+	width: "fit-content",
+	cursor: "pointer",
+	_hover: {
+		borderColor: "text.link",
+		background: "surface.actionSubtle.hover"
+	},
+	_active: {
+		borderColor: "text.link",
+		background: "surface.actionSubtle.active"
+	},
+	_focusVisible: {
+		outline: "none",
+		borderRadius: "0",
+		_after: {
+			content: "\"\"",
+			position: "absolute",
+			inset: "0",
+			outline: "3px",
+			borderRadius: "xsmall",
+			outlineColor: "stroke.default",
+			outlineOffset: "3px",
+			outlineStyle: "solid"
+		}
+	}
+} });
+
+//#endregion
+exports.ConceptInlineTriggerButton = ConceptInlineTriggerButton;
+//# sourceMappingURL=ConceptInlineTriggerButton.js.map

package/lib/Embed/ConceptInlineTriggerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConceptInlineTriggerButton.js","names":["InlineTriggerButton"],"sources":["../../src/Embed/ConceptInlineTriggerButton.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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n  base: {\n    position: \"relative\",\n    overflow: \"visible\",\n    borderBottom: \"1px solid\",\n    borderStyle: \"dashed\",\n    borderColor: \"stroke.hover\",\n    paddingBlockStart: \"5xsmall\",\n    width: \"fit-content\",\n    cursor: \"pointer\",\n    _hover: {\n      borderColor: \"text.link\",\n      background: \"surface.actionSubtle.hover\",\n    },\n    _active: {\n      borderColor: \"text.link\",\n      background: \"surface.actionSubtle.active\",\n    },\n    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n    _focusVisible: {\n      outline: \"none\",\n      borderRadius: \"0\",\n      _after: {\n        content: '\"\"',\n        position: \"absolute\",\n        inset: \"0\",\n        outline: \"3px\",\n        borderRadius: \"xsmall\",\n        outlineColor: \"stroke.default\",\n        outlineOffset: \"3px\",\n        outlineStyle: \"solid\",\n      },\n    },\n  },\n});\n"],"mappings":";;;;;AAWA,MAAa,6BAA6B,qCAAOA,iDAAqB,EACpE,MAAM;CACJ,UAAU;CACV,UAAU;CACV,cAAc;CACd,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,aAAa;EACb,YAAY;CACb;CACD,SAAS;EACP,aAAa;EACb,YAAY;CACb;CAED,eAAe;EACb,SAAS;EACT,cAAc;EACd,QAAQ;GACN,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;EACf;CACF;AACF,EACF,EAAC"}