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

package/lib/ContactBlock/ContactBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactBlock.js","names":["BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject>","Text","LicenseContainerContent"],"sources":["../../src/ContactBlock/ContactBlock.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n  strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n  moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n  subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    minWidth: \"surface.xxsmall\",\n    padding: \"medium\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    gap: \"medium\",\n    position: \"relative\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    overflow: \"hidden\",\n    background: \"surface.default\",\n    flexDirection: \"column-reverse\",\n    tablet: {\n      alignItems: \"unset\",\n      flexDirection: \"row\",\n    },\n  },\n});\n\nconst EmailLink = styled(\"a\", {\n  base: {\n    color: \"text.default\",\n    textDecoration: \"underline\",\n    _hover: { textDecoration: \"none\" },\n    _focusVisible: { textDecoration: \"none\" },\n  },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    zIndex: \"base\",\n    _before: {\n      content: '\"\"',\n      position: \"absolute\",\n      top: \"-60px\",\n      left: \"-50px\",\n      right: \"0\",\n      bottom: \"0\",\n      height: \"calc(100% + 50px)\",\n      width: \"surface.3xlarge\",\n      transform: \"rotate(-4deg)\",\n      zIndex: \"hide\",\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n    imageExists: {\n      true: {\n        tabletDown: {\n          _before: {\n            display: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"flex-start\",\n    justifyContent: \"flex-start\",\n    flexDirection: \"column\",\n    zIndex: \"base\",\n    tabletDown: {\n      _before: {\n        content: '\"\"',\n        position: \"absolute\",\n        top: \"-50px\",\n        left: \"-50px\",\n        right: \"0\",\n        bottom: \"0\",\n        height: \"surface.xxsmall\",\n        width: \"surface.3xlarge\",\n        transform: \"rotate(-4deg)\",\n        zIndex: \"hide\",\n      },\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    borderRadius: \"xsmall\",\n    width: \"surface.xsmall\",\n    height: \"surface.xsmall\",\n    objectFit: \"cover\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"1\",\n    width: \"100%\",\n  },\n});\n\nconst StyledDescription = styled(Text, {\n  base: {\n    fontFamily: \"serif\",\n  },\n});\n\ninterface Props {\n  image?: ImageMetaInformationV3DTO;\n  jobTitle: string;\n  description: string;\n  backgroundColor?: ContactBlockBackground;\n  imageWidth?: number;\n  name: string;\n  email: string;\n  embedAlt?: string;\n  lang?: string;\n}\n\nexport const ContactBlock = ({\n  image,\n  jobTitle,\n  description,\n  name,\n  email,\n  embedAlt,\n  lang,\n  backgroundColor = \"strong\",\n}: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledWrapper data-embed-type=\"contact-block\">\n      <ContentWrapper>\n        <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n          <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n            {name}\n          </Text>\n          <Text lang={lang}>{jobTitle}</Text>\n          <Text>\n            {`${t(\"email\")}: `}\n            <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n          </Text>\n        </HeaderWrapper>\n        <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n      </ContentWrapper>\n      {!!image && (\n        <ImageWrapper variant={backgroundColor}>\n          <StyledImage\n            alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n            src={image.image.imageUrl}\n            width={300}\n            height={300}\n          />\n          <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n        </ImageWrapper>\n      )}\n    </StyledWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAMA,oBAAuE;CAC3E,QAAQ,EAAE,SAAS,EAAE,iBAAiB,mBAAmB,EAAE;CAC3D,UAAU,EAAE,SAAS,EAAE,iBAAiB,4BAA4B,EAAE;CACtE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,0BAA0B,EAAE;CACnE;AAED,MAAa,0BAA0B,OAAO,KAAK,kBAAkB;AAErE,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,WAAW;CACX,QAAQ;CACR,KAAK;CACL,UAAU;CACV,aAAa;CACb,cAAc;CACd,UAAU;CACV,YAAY;CACZ,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAM,iDAAmB,KAAK,EAC5B,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EAAE,gBAAgB,QAAQ;CAClC,eAAe,EAAE,gBAAgB,QAAQ;CAC1C,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT;EACF;CACD,UAAU;EACR,SAAS;EACT,aAAa,EACX,MAAM,EACJ,YAAY,EACV,SAAS,EACP,SAAS,QACV,EACF,EACF,EACF;EACF;CACF,CAAC;AAEF,MAAM,oDAAsB,OAAO;CACjC,MAAM;EACJ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,YAAY,EACV,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT,EACF;EACF;CACD,UAAU,EACR,SAAS,mBACV;CACF,CAAC;AAEF,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACN,OAAO;CACR,EACF,CAAC;AAEF,MAAM,yDAA2BC,wBAAM,EACrC,MAAM,EACJ,YAAY,SACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,OACA,UACA,aACA,MACA,OACA,UACA,MACA,kBAAkB,eACP;CACX,MAAM,EAAE,yCAAsB;AAC9B,QACE,4CAAC;EAAc,mBAAgB;aAC7B,4CAAC,6BACC,4CAAC;GAAc,SAAS;GAAiB,aAAa,CAAC,CAAC;;IACtD,2CAACA;KAAW;KAAM,YAAW;KAAO,WAAU;eAC3C;MACI;IACP,2CAACA;KAAW;eAAO;MAAgB;IACnC,4CAACA,qCACE,GAAG,EAAE,QAAQ,CAAC,KACf,2CAAC;KAAU,MAAM,UAAU;eAAU;MAAkB,IAClD;;IACO,EAChB,2CAAC;GAAkB,WAAU;aAAc;IAAgC,IAC5D,EAChB,CAAC,CAAC,SACD,4CAAC;GAAa,SAAS;cACrB,2CAAC;IACC,KAAK,aAAa,SAAY,WAAW,MAAM,QAAQ;IACvD,KAAK,MAAM,MAAM;IACjB,OAAO;IACP,QAAQ;KACR,EACF,2CAACC;IAAwB,MAAK;IAAQ,WAAW,MAAM;KAAa;IACvD;GAEH"}
+{"version":3,"file":"ContactBlock.js","names":["Text","LicenseContainerContent"],"sources":["../../src/ContactBlock/ContactBlock.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n  strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n  moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n  subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    minWidth: \"surface.xxsmall\",\n    padding: \"medium\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    gap: \"medium\",\n    position: \"relative\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    overflow: \"hidden\",\n    background: \"surface.default\",\n    flexDirection: \"column-reverse\",\n    tablet: {\n      alignItems: \"unset\",\n      flexDirection: \"row\",\n    },\n  },\n});\n\nconst EmailLink = styled(\"a\", {\n  base: {\n    color: \"text.default\",\n    textDecoration: \"underline\",\n    _hover: { textDecoration: \"none\" },\n    _focusVisible: { textDecoration: \"none\" },\n  },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    zIndex: \"base\",\n    _before: {\n      content: '\"\"',\n      position: \"absolute\",\n      top: \"-60px\",\n      left: \"-50px\",\n      right: \"0\",\n      bottom: \"0\",\n      height: \"calc(100% + 50px)\",\n      width: \"surface.3xlarge\",\n      transform: \"rotate(-4deg)\",\n      zIndex: \"hide\",\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n    imageExists: {\n      true: {\n        tabletDown: {\n          _before: {\n            display: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"flex-start\",\n    justifyContent: \"flex-start\",\n    flexDirection: \"column\",\n    zIndex: \"base\",\n    tabletDown: {\n      _before: {\n        content: '\"\"',\n        position: \"absolute\",\n        top: \"-50px\",\n        left: \"-50px\",\n        right: \"0\",\n        bottom: \"0\",\n        height: \"surface.xxsmall\",\n        width: \"surface.3xlarge\",\n        transform: \"rotate(-4deg)\",\n        zIndex: \"hide\",\n      },\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    borderRadius: \"xsmall\",\n    width: \"surface.xsmall\",\n    height: \"surface.xsmall\",\n    objectFit: \"cover\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"1\",\n    width: \"100%\",\n  },\n});\n\nconst StyledDescription = styled(Text, {\n  base: {\n    fontFamily: \"serif\",\n  },\n});\n\ninterface Props {\n  image?: ImageMetaInformationV3DTO;\n  jobTitle: string;\n  description: string;\n  backgroundColor?: ContactBlockBackground;\n  imageWidth?: number;\n  name: string;\n  email: string;\n  embedAlt?: string;\n  lang?: string;\n}\n\nexport const ContactBlock = ({\n  image,\n  jobTitle,\n  description,\n  name,\n  email,\n  embedAlt,\n  lang,\n  backgroundColor = \"strong\",\n}: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledWrapper data-embed-type=\"contact-block\">\n      <ContentWrapper>\n        <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n          <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n            {name}\n          </Text>\n          <Text lang={lang}>{jobTitle}</Text>\n          <Text>\n            {`${t(\"email\")}: `}\n            <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n          </Text>\n        </HeaderWrapper>\n        <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n      </ContentWrapper>\n      {!!image && (\n        <ImageWrapper variant={backgroundColor}>\n          <StyledImage\n            alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n            src={image.image.imageUrl}\n            width={300}\n            height={300}\n          />\n          <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n        </ImageWrapper>\n      )}\n    </StyledWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,oBAAuE;CAC3E,QAAQ,EAAE,SAAS,EAAE,iBAAiB,mBAAmB,EAAE;CAC3D,UAAU,EAAE,SAAS,EAAE,iBAAiB,4BAA4B,EAAE;CACtE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,0BAA0B,EAAE;CACnE;AAED,MAAa,0BAA0B,OAAO,KAAK,kBAAkB;AAErE,MAAM,oDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,WAAW;CACX,QAAQ;CACR,KAAK;CACL,UAAU;CACV,aAAa;CACb,cAAc;CACd,UAAU;CACV,YAAY;CACZ,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAM,gDAAmB,KAAK,EAC5B,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EAAE,gBAAgB,QAAQ;CAClC,eAAe,EAAE,gBAAgB,QAAQ;CAC1C,EACF,CAAC;AAEF,MAAM,oDAAuB,OAAO;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT;EACF;CACD,UAAU;EACR,SAAS;EACT,aAAa,EACX,MAAM,EACJ,YAAY,EACV,SAAS,EACP,SAAS,QACV,EACF,EACF,EACF;EACF;CACF,CAAC;AAEF,MAAM,mDAAsB,OAAO;CACjC,MAAM;EACJ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,YAAY,EACV,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT,EACF;EACF;CACD,UAAU,EACR,SAAS,mBACV;CACF,CAAC;AAEF,MAAM,kDAAqB,OAAO,EAChC,MAAM;CACJ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACN,OAAO;CACR,EACF,CAAC;AAEF,MAAM,wDAA2BA,uBAAM,EACrC,MAAM,EACJ,YAAY,SACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,OACA,UACA,aACA,MACA,OACA,UACA,MACA,kBAAkB,eACP;CACX,MAAM,EAAE,yCAAsB;AAC9B,QACE,4CAAC;EAAc,mBAAgB;aAC7B,4CAAC,6BACC,4CAAC;GAAc,SAAS;GAAiB,aAAa,CAAC,CAAC;;IACtD,2CAACA;KAAW;KAAM,YAAW;KAAO,WAAU;eAC3C;MACI;IACP,2CAACA;KAAW;eAAO;MAAgB;IACnC,4CAACA,oCACE,GAAG,EAAE,QAAQ,CAAC,KACf,2CAAC;KAAU,MAAM,UAAU;eAAU;MAAkB,IAClD;;IACO,EAChB,2CAAC;GAAkB,WAAU;aAAc;IAAgC,IAC5D,EAChB,CAAC,CAAC,SACD,4CAAC;GAAa,SAAS;cACrB,2CAAC;IACC,KAAK,aAAa,SAAY,WAAW,MAAM,QAAQ;IACvD,KAAK,MAAM,MAAM;IACjB,OAAO;IACP,QAAQ;KACR,EACF,2CAACC;IAAwB,MAAK;IAAQ,WAAW,MAAM;KAAa;IACvD;GAEH"}

package/lib/ContentTypeBadge/ContentTypeBadge.js

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_ContentType = require('../model/ContentType.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
+let _ndla_primitives = require("@ndla/primitives");
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -36,7 +36,7 @@ const contentTypeToBadgeVariantMap = {
 };
 const ContentTypeBadge = (0, react.forwardRef)(({ contentType, children, ...props }, ref) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Badge, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Badge, {
 		colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
 		...props,
 		ref,

package/lib/ContentTypeBadge/ContentTypeBadge.js.map

@@ -1 +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;CACnC;AAED,MAAa,0CACV,EAAE,aAAa,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACC;EACC,YAAY,6BAA6B,eAAe,cAAc,6BAA6B;EACnG,GAAI;EACC;YAEJ,YAAY,EAAE,gBAAgB,cAAc;GACvC;EAGb"}
+{"version":3,"file":"ContentTypeBadge.js","names":["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,MAAa,+BAAkE;yCAC5C;6CACI;6CACA;gCACb;wCACQ;sCACF;8BACR;0CACY;gCACV;iCACC;8BACH;8BACA;gCACE;8BACF;gCACE;uCACO;8BACT;kCACI;0CACQ;CACnC;AAED,MAAa,0CACV,EAAE,aAAa,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EACC,YAAY,6BAA6B,eAAe,cAAc,6BAA6B;EACnG,GAAI;EACC;YAEJ,YAAY,EAAE,gBAAgB,cAAc;GACvC;EAGb"}

package/lib/Embed/AudioEmbed.js

@@ -3,8 +3,8 @@ const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
 const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
 const require_licenseAttributes = require('../utils/licenseAttributes.js');
 const require_AudioPlayer = require('../AudioPlayer/AudioPlayer.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 react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Embed/AudioEmbed.tsx
@@ -15,7 +15,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { clear: "both" } });
+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, { type });

package/lib/Embed/AudioEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","licenseAttributes","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/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\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\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAA4B,OAAQ;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,2CAACC;EAAY;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;GAAS;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;CAE1E,MAAM,eAAeC,4CAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,QACE,4CAAC;EAAmB;EAAM,mBAAiB;EAAM,GAAI;aACnD,2CAACD;GACC,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,2CAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,GAAI,GACtE;GAEN,OAAO,KAAK,MAAM;GACR;IACV,EACF,2CAACE;GACC,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;IACtB;GACW"}
+{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","licenseAttributes","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/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\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\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAA4B,OAAQ;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,2CAACC;EAAY;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;GAAS;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;CAE1E,MAAM,eAAeC,4CAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,QACE,4CAAC;EAAmB;EAAM,mBAAiB;EAAM,GAAI;aACnD,2CAACD;GACC,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,2CAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,GAAI,GACtE;GAEN,OAAO,KAAK,MAAM;GACR;IACV,EACF,2CAACE;GACC,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;IACtB;GACW"}

package/lib/Embed/BrightcoveEmbed.js

@@ -3,8 +3,8 @@ const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
 const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
 const require_licenseAttributes = require('../utils/licenseAttributes.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 react_i18next = require("react-i18next");
@@ -18,8 +18,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const LinkedVideoButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginBlockStart: "3xsmall" } });
-const BrightcoveIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: {
+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%"
@@ -72,7 +72,7 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
 	}, 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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Figure, {
 		"data-embed-type": "brightcove",
 		...licenseProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/lib/Embed/BrightcoveEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrightcoveEmbed.js","names":["Button","EmbedErrorPlaceholder","licenseAttributes","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/EmbedByline\";\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\" style=\"border: none;\" 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};\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,yDAA2BA,0BAAQ,EACvC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,wDAA0B,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AASF,MAAa,aAAa,UAAe,CAAC,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,kBAAkB,MAA2B,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,cAAc;CAEjD,MAAM,SAAS,QAAQ,QAAQ,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,KAAK,kCAAkC,QAAQ,GAAG,OAAO,8BAA8B;EACvF,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;EACzB;;AAEH,MAAa,mBAAmB,EAAE,OAAO,gBAAgB,WAAW,WAAkB;CACpF,MAAM,CAAC,mBAAmB,4CAAiC,KAAK;CAChE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,8BAAsC,KAAK;CACjD,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,GAAG,EAAE,mBAAmB,CAAC,IAAI,UAAU;CAC7D,MAAM,6CAAkC;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,yCAAgB,MAAM,UAAU,QAAQ,GAAG;WACzD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,uCAAa,MAAM,KAAK,YAAY;IAErC,CAAC,OAAO,cAAc,CAAC;AAE1B,4BAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,CAAC;AACzE,UAAO,MAAM,cAAc,GAAG,MAAM,GAAG;AACvC,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AACN,KAAI,MAAM,WAAW,QACnB,QACE,2CAACC;EAAsB,MAAK;YAC1B,2CAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,EAAE,CAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM,OAAO;CAErE,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;EAAe,EAAE,KAAK,QAAQ,GACtE;CAEJ,MAAM,eAAeC,4CAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,GAAG,GAAG,EAAE,mBAAmB,CAAC,IAAI,KAAK,SAAS;AAE7E,QACE,4CAACC;EAAO,mBAAgB;EAAa,GAAI;aACvC,2CAAC;GAAI,WAAU;aACb,2CAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,yBAAyB,CAAC,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,EACN,2CAACC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;aACjE,2CAAC,mBACE,CAAC,CAAC,iBACD,2CAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,eAAe,sBAAsB,MAAM,CAAC,EAAE;cAC/F,EAAE,iBAAiB,CAAC,oBAAoB,aAAa,gBAAgB;KACpD,GAElB;IACM;GACP"}
+{"version":3,"file":"BrightcoveEmbed.js","names":["Button","EmbedErrorPlaceholder","licenseAttributes","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/EmbedByline\";\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\" style=\"border: none;\" 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};\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,wDAA2BA,yBAAQ,EACvC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,uDAA0B,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AASF,MAAa,aAAa,UAAe,CAAC,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,kBAAkB,MAA2B,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,cAAc;CAEjD,MAAM,SAAS,QAAQ,QAAQ,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,KAAK,kCAAkC,QAAQ,GAAG,OAAO,8BAA8B;EACvF,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;EACzB;;AAEH,MAAa,mBAAmB,EAAE,OAAO,gBAAgB,WAAW,WAAkB;CACpF,MAAM,CAAC,mBAAmB,4CAAiC,KAAK;CAChE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,8BAAsC,KAAK;CACjD,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,GAAG,EAAE,mBAAmB,CAAC,IAAI,UAAU;CAC7D,MAAM,6CAAkC;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,yCAAgB,MAAM,UAAU,QAAQ,GAAG;WACzD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,uCAAa,MAAM,KAAK,YAAY;IAErC,CAAC,OAAO,cAAc,CAAC;AAE1B,4BAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,CAAC;AACzE,UAAO,MAAM,cAAc,GAAG,MAAM,GAAG;AACvC,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AACN,KAAI,MAAM,WAAW,QACnB,QACE,2CAACC;EAAsB,MAAK;YAC1B,2CAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,EAAE,CAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM,OAAO;CAErE,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;EAAe,EAAE,KAAK,QAAQ,GACtE;CAEJ,MAAM,eAAeC,4CAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,GAAG,GAAG,EAAE,mBAAmB,CAAC,IAAI,KAAK,SAAS;AAE7E,QACE,4CAACC;EAAO,mBAAgB;EAAa,GAAI;aACvC,2CAAC;GAAI,WAAU;aACb,2CAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,yBAAyB,CAAC,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,EACN,2CAACC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;aACjE,2CAAC,mBACE,CAAC,CAAC,iBACD,2CAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,eAAe,sBAAsB,MAAM,CAAC,EAAE;cAC/F,EAAE,iBAAiB,CAAC,oBAAoB,aAAa,gBAAgB;KACpD,GAElB;IACM;GACP"}

package/lib/Embed/CodeEmbed.js

@@ -3,10 +3,10 @@ const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
 const require_CodeBlock = require('../CodeBlock/CodeBlock.js');
 const require_codeLanguageOptions = require('../CodeBlock/codeLanguageOptions.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_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Embed/CodeEmbed.tsx
@@ -17,11 +17,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledFigCaption = (0, __ndla_styled_system_jsx.styled)("figcaption", { base: {
+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: {
+const StyledFigure = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Figure, { base: {
 	clear: "both",
 	"& > *:not(:where(:first-child))": { marginBlockStart: "xsmall" }
 } });
@@ -49,7 +49,7 @@ const CodeEmbed = ({ embed }) => {
 				highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
 				format: embed.embedData.codeFormat
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Button, {
 				variant: "secondary",
 				onClick: async () => {
 					if (embed.status === "success") try {
@@ -57,7 +57,7 @@ const CodeEmbed = ({ embed }) => {
 						setIsCopied(true);
 					} catch {}
 				},
-				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")]
+				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")]
 			})
 		]
 	});

package/lib/Embed/CodeEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEmbed.js","names":["Figure","codeLanguageOptions","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 { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, 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\nexport const 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={async () => {\n          if (embed.status === \"success\") {\n            try {\n              await navigator.clipboard.writeText(embed.data.decodedContent);\n              setIsCopied(true);\n            } catch {\n              // do nothing\n            }\n          }\n        }}\n      >\n        {isCopied ? <CheckLine /> : <FileCopyLine />}\n        {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n      </Button>\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,wDAA0B,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmBC,gDAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,mCAAwB,MAAM;CAC/C,MAAM,EAAE,yCAAsB;AAE9B,4BAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,SAAS;AAG9C,QACE,4CAAC;EAAa,mBAAgB;;GAC5B,2CAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;GAC9G,2CAACC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;GACF,4CAACC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;eAMX,WAAW,2CAACC,2BAAY,GAAG,2CAACC,8BAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI"}
+{"version":3,"file":"CodeEmbed.js","names":["Figure","codeLanguageOptions","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 { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, 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\nexport const 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={async () => {\n          if (embed.status === \"success\") {\n            try {\n              await navigator.clipboard.writeText(embed.data.decodedContent);\n              setIsCopied(true);\n            } catch {\n              // do nothing\n            }\n          }\n        }}\n      >\n        {isCopied ? <CheckLine /> : <FileCopyLine />}\n        {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n      </Button>\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,uDAA0B,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmBC,gDAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,mCAAwB,MAAM;CAC/C,MAAM,EAAE,yCAAsB;AAE9B,4BAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,SAAS;AAG9C,QACE,4CAAC;EAAa,mBAAgB;;GAC5B,2CAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;GAC9G,2CAACC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;GACF,4CAACC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;eAMX,WAAW,2CAACC,0BAAY,GAAG,2CAACC,6BAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI"}

package/lib/Embed/ConceptEmbed.js

@@ -4,12 +4,12 @@ const require_Concept = require('../Concept/Concept.js');
 const require_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
 const require_GlossEmbed = require('./GlossEmbed.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 react_jsx_runtime = require("react/jsx-runtime");
-let __ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react = require("@ark-ui/react");
 
 //#region src/Embed/ConceptEmbed.tsx
 /**
@@ -19,7 +19,7 @@ let __ark_ui_react = require("@ark-ui/react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: {
+const StyledPopoverContent = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PopoverContent, { base: {
 	width: "surface.xlarge",
 	maxHeight: "50vh",
 	overflowY: "auto"
@@ -59,14 +59,14 @@ const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }) => {
 };
 const InlineConcept = (0, react.forwardRef)(({ linkContent, 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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.PopoverRoot, {
 		initialFocusEl: () => contentRef.current,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+		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: linkContent })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
+		}), /* @__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,

package/lib/Embed/ConceptEmbed.js.map

@@ -1 +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, type ReactNode } 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  children?: ReactNode;\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, children }: 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  const parsedTitle = useMemo(\n    () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n    [embed],\n  );\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</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}>{children}</GlossEmbed>;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkContent={children}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={parsedTitle}\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 : parsedTitle}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkContent?: ReactNode;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkContent, 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>{linkContent}</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":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,4DAA8BA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,yCAA8B;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,wCAAa,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,uCACG,MAAM,WAAW,2CAAkB,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,2CAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,2CAACC,uDAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,2CAACC;EAAkB;EAAQ;GAAsB;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,2CAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,2CAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,uCACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,+BAAoC,KAAK;AAC/C,QACE,4CAACC;EAAY,sBAAsB,WAAW;aAE5C,2CAACC;GAAe;GAAa;GAAK,GAAI;aACpC,2CAACC,2EAA4B,cAAyC;IACvD,EACjB,2CAACC,mCACC,2CAAC;GAAqB,KAAK;aACzB,2CAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,sCAA2D,OAAO,QAC7E,2CAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
+{"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, type ReactNode } 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  children?: ReactNode;\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, children }: 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  const parsedTitle = useMemo(\n    () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n    [embed],\n  );\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</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}>{children}</GlossEmbed>;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkContent={children}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={parsedTitle}\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 : parsedTitle}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkContent?: ReactNode;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkContent, 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>{linkContent}</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":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,2DAA8BA,iCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,yCAA8B;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,wCAAa,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,uCACG,MAAM,WAAW,2CAAkB,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,2CAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,2CAACC,uDAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,2CAACC;EAAkB;EAAQ;GAAsB;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,2CAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,2CAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,uCACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,+BAAoC,KAAK;AAC/C,QACE,4CAACC;EAAY,sBAAsB,WAAW;aAE5C,2CAACC;GAAe;GAAa;GAAK,GAAI;aACpC,2CAACC,2EAA4B,cAAyC;IACvD,EACjB,2CAACC,kCACC,2CAAC;GAAqB,KAAK;aACzB,2CAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,sCAA2D,OAAO,QAC7E,2CAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}

package/lib/Embed/ConceptInlineTriggerButton.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_InlineTriggerButton = require('./InlineTriggerButton.js');
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 
 //#region src/Embed/ConceptInlineTriggerButton.tsx
 /**
@@ -10,7 +10,7 @@ let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const ConceptInlineTriggerButton = (0, __ndla_styled_system_jsx.styled)(require_InlineTriggerButton.InlineTriggerButton, { base: {
+const ConceptInlineTriggerButton = (0, _ndla_styled_system_jsx.styled)(require_InlineTriggerButton.InlineTriggerButton, { base: {
 	position: "relative",
 	overflow: "visible",
 	borderBottom: "1px solid",

package/lib/Embed/ConceptInlineTriggerButton.js.map

@@ -1 +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,kEAAoCA,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;EACb;CACD,SAAS;EACP,aAAa;EACb,YAAY;EACb;CAED,eAAe;EACb,SAAS;EACT,cAAc;EACd,QAAQ;GACN,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,EACF,CAAC"}
+{"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,iEAAoCA,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;EACb;CACD,SAAS;EACP,aAAa;EACb,YAAY;EACb;CAED,eAAe;EACb,SAAS;EACT,cAAc;EACd,QAAQ;GACN,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,EACF,CAAC"}

package/lib/Embed/ContentLinkEmbed.js

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-let __ndla_primitives = require("@ndla/primitives");
+let _ndla_primitives = require("@ndla/primitives");
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Embed/ContentLinkEmbed.tsx
 const ContentLinkEmbed = ({ embed, isOembed, children }) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 		color: "text.error",
 		asChild: true,
 		consumeCss: true,

package/lib/Embed/CopyrightEmbed.js

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
-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/Embed/CopyrightEmbed.tsx
-const StyledCopyrightContent = (0, __ndla_styled_system_jsx.styled)("div", { base: { marginBlockEnd: "xsmall" } });
+const StyledCopyrightContent = (0, _ndla_styled_system_jsx.styled)("div", { base: { marginBlockEnd: "xsmall" } });
 const CopyrightEmbed = ({ embed, children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
 		"data-embed-type": "copyright",

package/lib/Embed/CopyrightEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyrightEmbed.js","names":["EmbedByline"],"sources":["../../src/Embed/CopyrightEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n  embed: CopyrightMetaData;\n  children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n  base: {\n    marginBlockEnd: \"xsmall\",\n  },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n  return (\n    <figure data-embed-type=\"copyright\">\n      <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n      <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n    </figure>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAM,8DAAgC,OAAO,EAC3C,MAAM,EACJ,gBAAgB,UACjB,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,eAAsB;AAC5D,QACE,4CAAC;EAAO,mBAAgB;aACtB,2CAAC;GAAuB,0BAAuB;GAAI;IAAkC,EACrF,2CAACA;GAAY,MAAK;GAAY,WAAW,MAAM,UAAU;IAAa;GAC/D"}
+{"version":3,"file":"CopyrightEmbed.js","names":["EmbedByline"],"sources":["../../src/Embed/CopyrightEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n  embed: CopyrightMetaData;\n  children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n  base: {\n    marginBlockEnd: \"xsmall\",\n  },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n  return (\n    <figure data-embed-type=\"copyright\">\n      <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n      <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n    </figure>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAM,6DAAgC,OAAO,EAC3C,MAAM,EACJ,gBAAgB,UACjB,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,eAAsB;AAC5D,QACE,4CAAC;EAAO,mBAAgB;aACtB,2CAAC;GAAuB,0BAAuB;GAAI;IAAkC,EACrF,2CAACA;GAAY,MAAK;GAAY,WAAW,MAAM,UAAU;IAAa;GAC/D"}

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let __ndla_icons = require("@ndla/icons");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Embed/EmbedErrorPlaceholder.tsx
@@ -14,7 +14,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const ErrorPlaceholder = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ErrorPlaceholder = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
@@ -29,7 +29,7 @@ const ErrorPlaceholder = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 		fill: "stroke.default"
 	}
 } });
-const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { "& > *:not(:first-child)": { marginBlockStart: "3xsmall" } } });
+const StyledFigure = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Figure, { base: { "& > *:not(:first-child)": { marginBlockStart: "3xsmall" } } });
 const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
 		size: figureType,
@@ -37,7 +37,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
 		"data-embed-type": type,
 		children: [children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorPlaceholder, {
 			"data-embed-type": type,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ErrorWarningLine, {})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ErrorWarningLine, {})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
 			error: true,
 			type

package/lib/Embed/EmbedErrorPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedErrorPlaceholder.js","names":["Figure","ErrorWarningLine","EmbedByline"],"sources":["../../src/Embed/EmbedErrorPlaceholder.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { EmbedByline, type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n  type: EmbedBylineErrorProps[\"type\"];\n  figureType?: FigureSize;\n  float?: FigureFloat;\n  children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.subtle\",\n    height: \"surface.xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    \"& svg\": {\n      height: \"5xlarge\",\n      width: \"5xlarge\",\n      fill: \"stroke.default\",\n    },\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& > *:not(:first-child)\": {\n      marginBlockStart: \"3xsmall\",\n    },\n  },\n});\n\nexport const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {\n  return (\n    <StyledFigure size={figureType} float={float} data-embed-type={type}>\n      {children ?? (\n        <ErrorPlaceholder data-embed-type={type}>\n          <ErrorWarningLine />\n        </ErrorPlaceholder>\n      )}\n      <EmbedByline error type={type} />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAM,wDAA0B,OAAO,EACrC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;EACP,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACF,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,2BAA2B,EACzB,kBAAkB,WACnB,EACF,EACF,CAAC;AAEF,MAAa,yBAAyB,EAAE,MAAM,UAAU,YAAY,YAAmB;AACrF,QACE,4CAAC;EAAa,MAAM;EAAmB;EAAO,mBAAiB;aAC5D,YACC,2CAAC;GAAiB,mBAAiB;aACjC,2CAACC,kCAAmB;IACH,EAErB,2CAACC;GAAY;GAAY;IAAQ;GACpB"}
+{"version":3,"file":"EmbedErrorPlaceholder.js","names":["Figure","ErrorWarningLine","EmbedByline"],"sources":["../../src/Embed/EmbedErrorPlaceholder.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { EmbedByline, type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n  type: EmbedBylineErrorProps[\"type\"];\n  figureType?: FigureSize;\n  float?: FigureFloat;\n  children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.subtle\",\n    height: \"surface.xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    \"& svg\": {\n      height: \"5xlarge\",\n      width: \"5xlarge\",\n      fill: \"stroke.default\",\n    },\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& > *:not(:first-child)\": {\n      marginBlockStart: \"3xsmall\",\n    },\n  },\n});\n\nexport const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {\n  return (\n    <StyledFigure size={figureType} float={float} data-embed-type={type}>\n      {children ?? (\n        <ErrorPlaceholder data-embed-type={type}>\n          <ErrorWarningLine />\n        </ErrorPlaceholder>\n      )}\n      <EmbedByline error type={type} />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAM,uDAA0B,OAAO,EACrC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;EACP,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACF,EACF,CAAC;AAEF,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM,EACJ,2BAA2B,EACzB,kBAAkB,WACnB,EACF,EACF,CAAC;AAEF,MAAa,yBAAyB,EAAE,MAAM,UAAU,YAAY,YAAmB;AACrF,QACE,4CAAC;EAAa,MAAM;EAAmB;EAAO,mBAAiB;aAC5D,YACC,2CAAC;GAAiB,mBAAiB;aACjC,2CAACC,iCAAmB;IACH,EAErB,2CAACC;GAAY;GAAY;IAAQ;GACpB"}

package/lib/Embed/EmbedWrapper.js

@@ -1,9 +1,9 @@
 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");
-let __ark_ui_react = require("@ark-ui/react");
-let __ndla_styled_system_css = require("@ndla/styled-system/css");
+let _ark_ui_react = require("@ark-ui/react");
+let _ndla_styled_system_css = require("@ndla/styled-system/css");
 
 //#region src/Embed/EmbedWrapper.tsx
 /**
@@ -13,7 +13,7 @@ let __ndla_styled_system_css = require("@ndla/styled-system/css");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const embedWrapperRecipe = (0, __ndla_styled_system_css.cva)({
+const embedWrapperRecipe = (0, _ndla_styled_system_css.cva)({
 	base: { position: "relative" },
 	defaultVariants: { noClear: false },
 	variants: { noClear: {
@@ -21,9 +21,9 @@ const embedWrapperRecipe = (0, __ndla_styled_system_css.cva)({
 		false: { clear: "both" }
 	} }
 });
-const StyledEmbedWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledEmbedWrapper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
 const EmbedWrapper = (0, react.forwardRef)(({ noClear, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmbedWrapper, {
-	css: __ndla_styled_system_css.css.raw(embedWrapperRecipe.raw({ noClear }), cssProp),
+	css: _ndla_styled_system_css.css.raw(embedWrapperRecipe.raw({ noClear }), cssProp),
 	"data-embed-wrapper": "",
 	...props,
 	ref

package/lib/Embed/EmbedWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedWrapper.js","names":["ark","css"],"sources":["../../src/Embed/EmbedWrapper.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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,uDAAyB;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,0DAA4BA,mBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,sCACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,2CAAC;CACC,KAAKC,6BAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}
+{"version":3,"file":"EmbedWrapper.js","names":["ark","css"],"sources":["../../src/Embed/EmbedWrapper.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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,sDAAyB;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,yDAA4BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,sCACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,2CAAC;CACC,KAAKC,4BAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}

package/lib/Embed/ExternalEmbed.js

@@ -2,8 +2,8 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
 const require_ResourceBox = require('../ResourceBox/ResourceBox.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 react_jsx_runtime = require("react/jsx-runtime");
 
@@ -15,7 +15,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { "& iframe": {
+const StyledFigure = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Figure, { base: { "& iframe": {
 	height: "auto",
 	width: "100%"
 } } });
@@ -38,7 +38,7 @@ const ExternalEmbed = ({ embed }) => {
 			src: data.iframeImage?.image.imageUrl,
 			alt: embedData.alt !== void 0 ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
 		};
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Figure, {
 			"data-embed-type": "external",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox, {
 				image,

package/lib/Embed/ExternalEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,yCAAsB;CAC9B,MAAM,2BAA6B,KAAK;AAExC,4BAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,2CAACD;GAAO,mBAAgB;aACtB,2CAACE;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,2CAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D"}
+{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,yCAAsB;CAC9B,MAAM,2BAA6B,KAAK;AAExC,4BAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,2CAACD;GAAO,mBAAgB;aACtB,2CAACE;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,2CAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D"}

package/lib/Embed/FootnoteEmbed.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -11,7 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledSup = (0, __ndla_styled_system_jsx.styled)("sup", { base: { "& a": {
+const StyledSup = (0, _ndla_styled_system_jsx.styled)("sup", { base: { "& a": {
 	textStyle: "label.xsmall",
 	marginInlineStart: "1"
 } } });

package/lib/Embed/FootnoteEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"FootnoteEmbed.js","names":[],"sources":["../../src/Embed/FootnoteEmbed.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 { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n  base: {\n    \"& a\": {\n      textStyle: \"label.xsmall\",\n      marginInlineStart: \"1\",\n    },\n  },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <div>{t(\"error\")}</div>;\n  }\n\n  return (\n    <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n      <StyledSup>\n        <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n      </StyledSup>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,iDAAmB,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,2CAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,2CAAC,uBACC,2CAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP"}
+{"version":3,"file":"FootnoteEmbed.js","names":[],"sources":["../../src/Embed/FootnoteEmbed.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 { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n  base: {\n    \"& a\": {\n      textStyle: \"label.xsmall\",\n      marginInlineStart: \"1\",\n    },\n  },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <div>{t(\"error\")}</div>;\n  }\n\n  return (\n    <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n      <StyledSup>\n        <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n      </StyledSup>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,gDAAmB,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,2CAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,2CAAC,uBACC,2CAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP"}