@ndla/ui 56.0.192-alpha.0 → 56.0.194-alpha.0

package/lib/Embed/EmbedWrapper.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const embedWrapperRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     noClear: {

package/lib/Embed/EmbedWrapper.js

@@ -2,8 +2,8 @@ require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 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_factory = require("@ark-ui/react/factory");
 //#region src/Embed/EmbedWrapper.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -20,7 +20,7 @@ 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_factory.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),
 	"data-embed-wrapper": "",

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 { 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\";\nimport { forwardRef } from \"react\";\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,sBAAA,GAAA,wBAAA,KAAyB;CAC7B,MAAM,EACJ,UAAU,WACZ;CACA,iBAAiB,EACf,SAAS,MACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,OACT,EACF;EACA,OAAO,EACL,OAAO,OACT;CACF,EACF;AACF,CAAC;AAMD,MAAM,sBAAA,GAAA,wBAAA,QAA4BA,cAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEtE,MAAa,gBAAA,GAAA,MAAA,aACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CACE,KAAKC,wBAAAA,IAAI,IAAI,mBAAmB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CACzD,sBAAmB;CACnB,GAAI;CACC;AACN,CAAA,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 { ark, type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\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,sBAAA,GAAA,wBAAA,KAAyB;CAC7B,MAAM,EACJ,UAAU,WACZ;CACA,iBAAiB,EACf,SAAS,MACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,OACT,EACF;EACA,OAAO,EACL,OAAO,OACT;CACF,EACF;AACF,CAAC;AAMD,MAAM,sBAAA,GAAA,wBAAA,QAA4BA,sBAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEtE,MAAa,gBAAA,GAAA,MAAA,aACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CACE,KAAKC,wBAAAA,IAAI,IAAI,mBAAmB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CACzD,sBAAmB;CACnB,GAAI;CACC;AACN,CAAA,CAEL"}

package/lib/Embed/GlossEmbed.js

@@ -6,7 +6,7 @@ let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_portal = require("@ark-ui/react/portal");
 //#region src/Embed/GlossEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -30,7 +30,7 @@ const GlossEmbed = ({ embed, children }) => {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children })
-		}), /* @__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.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
 			ref: contentRef,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.Gloss, {
 				glossData: concept.glossData,

package/lib/Embed/GlossEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","Gloss"],"sources":["../../src/Embed/GlossEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { Gloss } from \"../Gloss/Gloss\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM,EACJ,OAAO,iBACT,EACF,CAAC;AAED,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,cAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,WAClD,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;CAClC,IACA,KAAA;CAEN,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD,EAA6B,SAAqC,CAAA;EACpD,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAsB,KAAK;aACzB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;IACE,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;GAC/B,CAAA,EACK,CAAA;EACY,CAAA,EAChB,CAAA,CACG;;CAIjB,OACE,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,QAAD;EAAQ,mBAAgB;YACtB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GACE,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;EACT,CAAA;CACK,CAAA;AAEZ"}
+{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","Gloss"],"sources":["../../src/Embed/GlossEmbed.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 { Portal } from \"@ark-ui/react/portal\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { Gloss } from \"../Gloss/Gloss\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM,EACJ,OAAO,iBACT,EACF,CAAC;AAED,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,cAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,WAClD,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;CAClC,IACA,KAAA;CAEN,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD,EAA6B,SAAqC,CAAA;EACpD,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAsB,KAAK;aACzB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;IACE,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;GAC/B,CAAA,EACK,CAAA;EACY,CAAA,EAChB,CAAA,CACG;;CAIjB,OACE,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,QAAD;EAAQ,mBAAgB;YACtB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GACE,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;EACT,CAAA;CACK,CAAA;AAEZ"}

package/lib/Embed/UuDisclaimerEmbed.js

@@ -1,11 +1,12 @@
 require("../_virtual/_rolldown/runtime.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-require("react");
+let react = require("react");
 let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
+let _ark_ui_react_portal = require("@ark-ui/react/portal");
 //#region src/Embed/UuDisclaimerEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -26,12 +27,28 @@ const StyledErrorWarningFill = (0, _ndla_styled_system_jsx.styled)(_ndla_icons.E
 	fill: "icon.subtle"
 } });
 const StyledPopoverContent = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PopoverContent, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
 	width: "surface.xlarge",
 	maxHeight: "50vh",
 	overflowY: "auto"
 } });
+const HiddenButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { "&:not(:focus)": {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: "0",
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0,0,0,0)",
+	whiteSpace: "nowrap",
+	borderWidth: "0"
+} } });
 const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 	const { t } = (0, react_i18next.useTranslation)();
+	const skipRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
 	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DisclaimerWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledErrorWarningFill, {
 		"aria-label": t("embed.embedError", { type: t("embed.type.disclaimer") }),
 		title: t("embed.embedError", { type: t("embed.type.disclaimer") })
@@ -39,19 +56,37 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DisclaimerWrapper, {
 		role: "region",
 		"data-embed-type": "uu-disclaimer",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.PopoverRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
-				size: "small",
-				variant: "secondary",
-				"aria-label": t("uuDisclaimer.title"),
-				title: t("uuDisclaimer.title"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.AccessibilityFill, {})
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.PopoverRoot, {
+				initialFocusEl: () => contentRef.current,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
+						size: "small",
+						variant: "secondary",
+						"aria-label": t("uuDisclaimer.title"),
+						title: t("uuDisclaimer.title"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.AccessibilityFill, {})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledPopoverContent, {
+					ref: contentRef,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: transformedDisclaimer }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenButton, {
+						onClick: () => skipRef.current?.focus(),
+						children: t("uuDisclaimer.skipContent")
+					})]
+				}) })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-uu-content": "",
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _ndla_styled_system_patterns.visuallyHidden)(),
+				tabIndex: -1,
+				ref: skipRef,
+				children: t("uuDisclaimer.contentCompleted")
 			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: transformedDisclaimer }) }) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-uu-content": "",
-			children
-		})]
+		]
 	});
 };
 //#endregion

package/lib/Embed/UuDisclaimerEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"UuDisclaimerEmbed.js","names":["IconButton","ErrorWarningFill","PopoverContent","PopoverRoot","PopoverTrigger","AccessibilityFill","Portal"],"sources":["../../src/Embed/UuDisclaimerEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,iBAAAA,YAAY,EAC1C,MAAM,EACJ,WAAW,WACb,EACF,CAAC;AAED,MAAM,0BAAA,GAAA,wBAAA,QAAgCC,YAAAA,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACR,EACF,CAAC;AAED,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,IAAI,MAAM,WAAW,SACnB,OACE,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,wBAAD;EACE,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;EACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;CAClE,CAAA,GACA,QACgB,EAAA,CAAA;CAIvB,OAEE,iBAAA,GAAA,kBAAA,MAAC,mBAAD;EAAmB,MAAK;EAAS,mBAAgB;YAAjD,CACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;IACE,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,oBAAoB;IAClC,OAAO,EAAE,oBAAoB;cAE7B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,mBAAD,CAAoB,CAAA;GACJ,CAAA;EACJ,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,sBAA2B,CAAA,EACb,CAAA,EAChB,CAAA,CACG,EAAA,CAAA,GACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,mBAAgB;GAAI;EAAc,CAAA,CACtB;;AAEvB"}
+{"version":3,"file":"UuDisclaimerEmbed.js","names":["IconButton","ErrorWarningFill","PopoverContent","Button","PopoverRoot","PopoverTrigger","AccessibilityFill","Portal"],"sources":["../../src/Embed/UuDisclaimerEmbed.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 { Portal } from \"@ark-ui/react/portal\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { visuallyHidden } from \"@ndla/styled-system/patterns\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nconst HiddenButton = styled(Button, {\n  base: {\n    \"&:not(:focus)\": {\n      position: \"absolute\",\n      width: \"1px\",\n      height: \"1px\",\n      padding: \"0\",\n      margin: \"-1px\",\n      overflow: \"hidden\",\n      clip: \"rect(0,0,0,0)\",\n      whiteSpace: \"nowrap\",\n      borderWidth: \"0\",\n    },\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  const skipRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <div>{transformedDisclaimer}</div>\n            <HiddenButton onClick={() => skipRef.current?.focus()}>{t(\"uuDisclaimer.skipContent\")}</HiddenButton>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n      <div className={visuallyHidden()} tabIndex={-1} ref={skipRef}>\n        {t(\"uuDisclaimer.contentCompleted\")}\n      </div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,iBAAAA,YAAY,EAC1C,MAAM,EACJ,WAAW,WACb,EACF,CAAC;AAED,MAAM,0BAAA,GAAA,wBAAA,QAAgCC,YAAAA,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACR,EACF,CAAC;AAED,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBC,iBAAAA,QAAQ,EAClC,MAAM,EACJ,iBAAiB;CACf,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACN,YAAY;CACZ,aAAa;AACf,EACF,EACF,CAAC;AAED,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,MAAM,WAAA,GAAA,MAAA,QAAiC,IAAI;CAC3C,MAAM,cAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,IAAI,MAAM,WAAW,SACnB,OACE,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,wBAAD;EACE,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;EACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;CAClE,CAAA,GACA,QACgB,EAAA,CAAA;CAIvB,OAEE,iBAAA,GAAA,kBAAA,MAAC,mBAAD;EAAmB,MAAK;EAAS,mBAAgB;YAAjD;GACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;IAAa,sBAAsB,WAAW;cAA9C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;KAAgB,SAAA;eACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;MACE,MAAK;MACL,SAAQ;MACR,cAAY,EAAE,oBAAoB;MAClC,OAAO,EAAE,oBAAoB;gBAE7B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,mBAAD,CAAoB,CAAA;KACJ,CAAA;IACJ,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,sBAAD;KAAsB,KAAK;eAA3B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,sBAA2B,CAAA,GACjC,iBAAA,GAAA,kBAAA,KAAC,cAAD;MAAc,eAAe,QAAQ,SAAS,MAAM;gBAAI,EAAE,0BAA0B;KAAgB,CAAA,CAChF;OAChB,CAAA,CACG;;GACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,mBAAgB;IAAI;GAAc,CAAA;GACvC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,YAAA,GAAA,6BAAA,gBAA0B;IAAG,UAAU;IAAI,KAAK;cAClD,EAAE,+BAA+B;GAC/B,CAAA;EACY;;AAEvB"}

package/lib/FileList/FileList.d.ts

@@ -8,7 +8,7 @@
 import { type ComponentPropsWithoutRef } from "react";
 interface Props extends ComponentPropsWithoutRef<"ul"> {
 }
-export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
-export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
+export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
 export declare const FileListEmbed: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/FileList/FileList.js

@@ -2,7 +2,7 @@ require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 //#region src/FileList/FileList.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -11,13 +11,13 @@ let _ark_ui_react = require("@ark-ui/react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const FileListWrapper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.ul, { base: {
+const FileListWrapper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.ul, { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "xsmall",
 	clear: "both"
 } }, { baseComponent: true });
-const FileListItem = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.li, { base: {
+const FileListItem = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.li, { base: {
 	listStyle: "none",
 	background: "surface.infoSubtle",
 	borderBlockEnd: "1px solid",

package/lib/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","names":["ark"],"sources":["../../src/FileList/FileList.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 { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,mBAAA,GAAA,wBAAA,QACXA,cAAAA,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,gBAAA,GAAA,wBAAA,QACXA,cAAAA,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BACnB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD;EAAiB,GAAI;EAAM,mBAAgB;EACxC;CACc,CAAA;AAErB"}
+{"version":3,"file":"FileList.js","names":["ark"],"sources":["../../src/FileList/FileList.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 { ark } from \"@ark-ui/react/factory\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,mBAAA,GAAA,wBAAA,QACXA,sBAAAA,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,gBAAA,GAAA,wBAAA,QACXA,sBAAAA,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BACnB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD;EAAiB,GAAI;EAAM,mBAAgB;EACxC;CACc,CAAA;AAErB"}

package/lib/Gloss/Gloss.d.ts

@@ -7,9 +7,9 @@
  */
 import type { StyledVariantProps } from "@ndla/styled-system/types";
 import type { ConceptTitleDTO, GlossDataDTO } from "@ndla/types-backend/concept-api";
-declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
+declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react/accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
     variant?: "simple" | "bordered" | undefined;
-}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
+}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react/accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
     variant?: "simple" | "bordered" | undefined;
 }>;
 type GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;

package/lib/Gloss/Gloss.js

@@ -9,7 +9,7 @@ html_react_parser = require_runtime.__toESM(html_react_parser);
 let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_accordion = require("@ark-ui/react/accordion");
 //#region src/Gloss/Gloss.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -122,7 +122,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 						lang: title.language,
 						children: parsedTitle
 					})
-				}), !!filteredExamples.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.AccordionItemTrigger, {
+				}), !!filteredExamples.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_accordion.AccordionItemTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.IconButton, {
 						variant: "tertiary",

package/lib/Gloss/Gloss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.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 { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.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 { AccordionItemTrigger } from \"@ark-ui/react/accordion\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}

package/lib/TagSelector/TagSelector.d.ts

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type CollectionItem } from "@ark-ui/react";
+import { type CollectionItem } from "@ark-ui/react/collection";
 import { type ComboboxControlProps, type ComboboxInputProps, type ComboboxRootProps, type TagsInputControlProps, type TagsInputInputProps, type TagsInputRootProps } from "@ndla/primitives";
 export type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
 export declare const TagSelectorRoot: <T extends CollectionItem>({ allowCustomValue, multiple, selectionBehavior, editable, addOnPaste, onValueChange, children, value, translations, ...rest }: TagSelectorRootProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;
 export declare const TagSelectorLabel: ({ textStyle, fontWeight, ...props }: import("@ndla/primitives").ComboboxLabelProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TagSelectorItemInput: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("@ark-ui/react").TagsInputItemInputProps & import("react").RefAttributes<HTMLInputElement>>>;
-export declare const TagSelectorTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxTriggerProps & import("react").RefAttributes<HTMLButtonElement>>>;
+export declare const TagSelectorItemInput: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("@ark-ui/react/tags-input").TagsInputItemInputProps & import("react").RefAttributes<HTMLInputElement>>>;
+export declare const TagSelectorTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("@ark-ui/react/combobox").ComboboxTriggerProps & import("react").RefAttributes<HTMLButtonElement>>>;
 export declare const TagSelectorControl: import("react").ForwardRefExoticComponent<ComboboxControlProps & TagsInputControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TagSelectorClearTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("@ark-ui/react").ComboboxClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>>;
+export declare const TagSelectorClearTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("@ark-ui/react/combobox").ComboboxClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>>;
 export type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;
 export declare const TagSelectorInputBase: import("react").ForwardRefExoticComponent<ComboboxInputProps & TagsInputInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const TagSelectorInput: import("react").ForwardRefExoticComponent<ComboboxInputProps & TagsInputInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/TagSelector/TagSelector.js

@@ -4,7 +4,9 @@ let react = require("react");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ndla_util = require("@ndla/util");
-let _ark_ui_react = require("@ark-ui/react");
+require("@ark-ui/react/collection");
+let _ark_ui_react_combobox = require("@ark-ui/react/combobox");
+let _ark_ui_react_tags_input = require("@ark-ui/react/tags-input");
 //#region src/TagSelector/TagSelector.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -48,7 +50,7 @@ const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBe
 	});
 };
 const TagSelectorTagsInputRoot = (0, react.forwardRef)((props, ref) => {
-	const comboboxApi = (0, _ark_ui_react.useComboboxContext)();
+	const comboboxApi = (0, _ark_ui_react_combobox.useComboboxContext)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.TagsInputRoot, {
 		ref,
 		onInputValueChange: (details) => comboboxApi.setInputValue(details.inputValue),
@@ -70,7 +72,7 @@ const TagSelectorControl = (0, react.forwardRef)(({ children, ...props }, ref) =
 });
 const TagSelectorClearTrigger = _ndla_primitives.ComboboxClearTrigger;
 const TagSelectorInputBase = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	const tagsApi = (0, _ark_ui_react.useTagsInputContext)();
+	const tagsApi = (0, _ark_ui_react_tags_input.useTagsInputContext)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.ComboboxInput, {
 		ref,
 		asChild: true,
@@ -84,7 +86,7 @@ const TagSelectorInputBase = (0, react.forwardRef)(({ children, ...props }, ref)
 	});
 });
 const TagSelectorInput = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	const tagsApi = (0, _ark_ui_react.useTagsInputContext)();
+	const tagsApi = (0, _ark_ui_react_tags_input.useTagsInputContext)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [tagsApi.value.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.TagsInputItem, {
 		index,
 		value,

package/lib/TagSelector/TagSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSelector.js","names":["ComboboxRoot","TagsInputRoot","ComboboxLabel","TagsInputItemInput","ComboboxTrigger","ComboboxControl","TagsInputControl","ComboboxClearTrigger","ComboboxInput","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","CloseLine"],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"TagSelector.js","names":["ComboboxRoot","TagsInputRoot","ComboboxLabel","TagsInputItemInput","ComboboxTrigger","ComboboxControl","TagsInputControl","ComboboxClearTrigger","ComboboxInput","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","CloseLine"],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type CollectionItem } from \"@ark-ui/react/collection\";\nimport { useComboboxContext } from \"@ark-ui/react/combobox\";\nimport { useTagsInputContext } from \"@ark-ui/react/tags-input\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":"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"}

package/lib/i18n/useComponentTranslations.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { CollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react/collection";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
 import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 type DeepPartial<T> = {

package/lib/i18n/useComponentTranslations.js

@@ -120,9 +120,9 @@ const useDatePickerTranslations = (translations) => {
 	const { t } = (0, react_i18next.useTranslation)("translation", { keyPrefix: "component.datePicker" });
 	return (0, react.useMemo)(() => ({
 		dayCell: (state) => {
-			if (state.unavailable) return t("dayCell.unavailable", { date: state.formattedDate });
-			else if (state.selected) return t("dayCell.selected", { date: state.formattedDate });
-			else return t("dayCell.select", { date: state.formattedDate });
+			if (state.unavailable) return t("dayCell.unavailable", { date: state.valueText });
+			else if (state.selected) return t("dayCell.selected", { date: state.valueText });
+			else return t("dayCell.select", { date: state.valueText });
 		},
 		nextTrigger: (view) => t(`nextTrigger.${view}`),
 		prevTrigger: (view) => t(`prevTrigger.${view}`),

package/lib/i18n/useComponentTranslations.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentTranslations.js","names":[],"sources":["../../src/i18n/useComponentTranslations.ts"],"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 { CollectionItem } from \"@ark-ui/react\";\nimport type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from \"@ndla/primitives\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type TagSelectorRootProps } from \"../TagSelector/TagSelector\";\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport const useTagsInputTranslations = (\n  translations?: Partial<TagsInputRootProps[\"translations\"]>,\n): TagsInputRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.tagsInput\" });\n\n  return useMemo(\n    () => ({\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      deleteTagTriggerLabel: (tag) => t(\"deleteTagTriggerLabel\", { tag }),\n      tagAdded: (tag) => t(\"tagAdded\", { tag }),\n      tagsPasted: (tag) => t(\"tagsPasted\", { length: tag.length }),\n      tagEdited: (tag) => t(\"tagEdited\", { tag }),\n      tagUpdated: (tag) => t(\"tagUpdated\", { tag }),\n      tagDeleted: (tag) => t(\"tagDeleted\", { tag }),\n      tagSelected: (tag) => t(\"tagSelected\", { tag }),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useComboboxTranslations = <T extends CollectionItem>(\n  translations?: Partial<ComboboxRootProps<T>[\"translations\"]>,\n): ComboboxRootProps<T>[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.combobox\" });\n\n  return useMemo(\n    () => ({\n      triggerLabel: t(\"triggerLabel\"),\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useTagSelectorTranslations = <T extends CollectionItem>(\n  translations?: Partial<TagSelectorRootProps<T>[\"translations\"]>,\n): TagSelectorRootProps<T>[\"translations\"] => {\n  const tagsInputTranslations = useTagsInputTranslations();\n  const comboboxTranslations = useComboboxTranslations();\n\n  return useMemo(\n    () =>\n      ({\n        ...comboboxTranslations,\n        ...tagsInputTranslations,\n        ...translations,\n      }) as TagSelectorRootProps<T>[\"translations\"],\n    [comboboxTranslations, tagsInputTranslations, translations],\n  );\n};\n\nexport const usePaginationTranslations = (\n  translations?: Partial<PaginationRootProps[\"translations\"]>,\n): PaginationRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.pagination\" });\n\n  return useMemo(\n    () => ({\n      rootLabel: t(\"rootLabel\"),\n      prevTriggerLabel: t(\"prevTriggerLabel\"),\n      nextTriggerLabel: t(\"nextTriggerLabel\"),\n      itemLabel: (details) => {\n        const lastPage = details.totalPages > 1 && details.page === details.totalPages;\n        return lastPage ? t(\"lastPage\", { page: details.page }) : t(\"page\", { page: details.page });\n      },\n      ...translations,\n    }),\n    [translations, t],\n  );\n};\n\n// TODO: Deduplicate this and place it somewhere smart. Maybe core?\ninterface AudioSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  useAudio: string;\n  noResults: string;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\ninterface VideoTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  loadMoreVideos: string;\n  noResults: string;\n  is360Video: string;\n  previewVideo: string;\n  addVideo: string;\n  close: string;\n}\ninterface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\ninterface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport const useImageSearchTranslations = (\n  translations: DeepPartial<ImageSearchTranslations> = {},\n): ImageSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.imageSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      imagePreview: {\n        creatorsLabel: t(\"imagePreview.creatorsLabel\"),\n        license: t(\"imagePreview.license\"),\n        caption: t(\"imagePreview.caption\"),\n        altText: t(\"imagePreview.altText\"),\n        modelRelease: t(\"imagePreview.modelRelease\"),\n        tags: t(\"imagePreview.tags\"),\n        close: t(\"close\"),\n        checkboxLabel: t(\"imagePreview.checkboxLabel\"),\n        useImageTitle: t(\"imagePreview.useImageTitle\"),\n        ...imagePreview,\n      },\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useAudioSearchTranslations = (\n  translations: DeepPartial<AudioSearchTranslations> = {},\n): AudioSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.audioSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      useAudio: t(\"useAudio\"),\n      noResults: t(\"noResults\"),\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.videoSearch\" });\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      loadMoreVideos: t(\"loadMoreVideos\"),\n      noResults: t(\"noResults\"),\n      is360Video: t(\"is360Video\"),\n      previewVideo: t(\"previewVideo\"),\n      addVideo: t(\"addVideo\"),\n      close: t(\"close\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useDatePickerTranslations = (\n  translations?: Partial<DatePickerRootProps[\"translations\"]>,\n): NonNullable<DatePickerRootProps[\"translations\"]> => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.datePicker\" });\n\n  return useMemo(\n    () => ({\n      dayCell: (state) => {\n        if (state.unavailable) {\n          return t(\"dayCell.unavailable\", { date: state.formattedDate });\n        } else if (state.selected) {\n          return t(\"dayCell.selected\", { date: state.formattedDate });\n        } else return t(\"dayCell.select\", { date: state.formattedDate });\n      },\n      nextTrigger: (view) => t(`nextTrigger.${view}`),\n      prevTrigger: (view) => t(`prevTrigger.${view}`),\n      monthSelect: t(\"monthSelect\"),\n      yearSelect: t(\"yearSelect\"),\n      viewTrigger: (view) => t(`viewTrigger.${view}`),\n      presetTrigger: (value) => {\n        if (Array.isArray(value)) {\n          return t(\"presetTrigger.range\", { start: value[0], end: value[1] });\n        } else return t(\"presetTrigger.single\", { date: value });\n      },\n      clearTrigger: t(\"clearTrigger\"),\n      trigger: (open) => t(`trigger.${open ? \"close\" : \"open\"}`),\n      content: t(\"content\"),\n      placeholder: (_locale) => {\n        return { day: \"dd\", month: \"mm\", year: \"yyyy\" };\n      },\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"useComponentTranslations.js","names":[],"sources":["../../src/i18n/useComponentTranslations.ts"],"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 { CollectionItem } from \"@ark-ui/react/collection\";\nimport type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from \"@ndla/primitives\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type TagSelectorRootProps } from \"../TagSelector/TagSelector\";\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport const useTagsInputTranslations = (\n  translations?: Partial<TagsInputRootProps[\"translations\"]>,\n): TagsInputRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.tagsInput\" });\n\n  return useMemo(\n    () => ({\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      deleteTagTriggerLabel: (tag) => t(\"deleteTagTriggerLabel\", { tag }),\n      tagAdded: (tag) => t(\"tagAdded\", { tag }),\n      tagsPasted: (tag) => t(\"tagsPasted\", { length: tag.length }),\n      tagEdited: (tag) => t(\"tagEdited\", { tag }),\n      tagUpdated: (tag) => t(\"tagUpdated\", { tag }),\n      tagDeleted: (tag) => t(\"tagDeleted\", { tag }),\n      tagSelected: (tag) => t(\"tagSelected\", { tag }),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useComboboxTranslations = <T extends CollectionItem>(\n  translations?: Partial<ComboboxRootProps<T>[\"translations\"]>,\n): ComboboxRootProps<T>[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.combobox\" });\n\n  return useMemo(\n    () => ({\n      triggerLabel: t(\"triggerLabel\"),\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useTagSelectorTranslations = <T extends CollectionItem>(\n  translations?: Partial<TagSelectorRootProps<T>[\"translations\"]>,\n): TagSelectorRootProps<T>[\"translations\"] => {\n  const tagsInputTranslations = useTagsInputTranslations();\n  const comboboxTranslations = useComboboxTranslations();\n\n  return useMemo(\n    () =>\n      ({\n        ...comboboxTranslations,\n        ...tagsInputTranslations,\n        ...translations,\n      }) as TagSelectorRootProps<T>[\"translations\"],\n    [comboboxTranslations, tagsInputTranslations, translations],\n  );\n};\n\nexport const usePaginationTranslations = (\n  translations?: Partial<PaginationRootProps[\"translations\"]>,\n): PaginationRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.pagination\" });\n\n  return useMemo(\n    () => ({\n      rootLabel: t(\"rootLabel\"),\n      prevTriggerLabel: t(\"prevTriggerLabel\"),\n      nextTriggerLabel: t(\"nextTriggerLabel\"),\n      itemLabel: (details) => {\n        const lastPage = details.totalPages > 1 && details.page === details.totalPages;\n        return lastPage ? t(\"lastPage\", { page: details.page }) : t(\"page\", { page: details.page });\n      },\n      ...translations,\n    }),\n    [translations, t],\n  );\n};\n\n// TODO: Deduplicate this and place it somewhere smart. Maybe core?\ninterface AudioSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  useAudio: string;\n  noResults: string;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\ninterface VideoTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  loadMoreVideos: string;\n  noResults: string;\n  is360Video: string;\n  previewVideo: string;\n  addVideo: string;\n  close: string;\n}\ninterface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\ninterface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport const useImageSearchTranslations = (\n  translations: DeepPartial<ImageSearchTranslations> = {},\n): ImageSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.imageSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      imagePreview: {\n        creatorsLabel: t(\"imagePreview.creatorsLabel\"),\n        license: t(\"imagePreview.license\"),\n        caption: t(\"imagePreview.caption\"),\n        altText: t(\"imagePreview.altText\"),\n        modelRelease: t(\"imagePreview.modelRelease\"),\n        tags: t(\"imagePreview.tags\"),\n        close: t(\"close\"),\n        checkboxLabel: t(\"imagePreview.checkboxLabel\"),\n        useImageTitle: t(\"imagePreview.useImageTitle\"),\n        ...imagePreview,\n      },\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useAudioSearchTranslations = (\n  translations: DeepPartial<AudioSearchTranslations> = {},\n): AudioSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.audioSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      useAudio: t(\"useAudio\"),\n      noResults: t(\"noResults\"),\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.videoSearch\" });\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      loadMoreVideos: t(\"loadMoreVideos\"),\n      noResults: t(\"noResults\"),\n      is360Video: t(\"is360Video\"),\n      previewVideo: t(\"previewVideo\"),\n      addVideo: t(\"addVideo\"),\n      close: t(\"close\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useDatePickerTranslations = (\n  translations?: Partial<DatePickerRootProps[\"translations\"]>,\n): NonNullable<DatePickerRootProps[\"translations\"]> => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.datePicker\" });\n\n  return useMemo(\n    () => ({\n      dayCell: (state) => {\n        if (state.unavailable) {\n          return t(\"dayCell.unavailable\", { date: state.valueText });\n        } else if (state.selected) {\n          return t(\"dayCell.selected\", { date: state.valueText });\n        } else return t(\"dayCell.select\", { date: state.valueText });\n      },\n      nextTrigger: (view) => t(`nextTrigger.${view}`),\n      prevTrigger: (view) => t(`prevTrigger.${view}`),\n      monthSelect: t(\"monthSelect\"),\n      yearSelect: t(\"yearSelect\"),\n      viewTrigger: (view) => t(`viewTrigger.${view}`),\n      presetTrigger: (value) => {\n        if (Array.isArray(value)) {\n          return t(\"presetTrigger.range\", { start: value[0], end: value[1] });\n        } else return t(\"presetTrigger.single\", { date: value });\n      },\n      clearTrigger: t(\"clearTrigger\"),\n      trigger: (open) => t(`trigger.${open ? \"close\" : \"open\"}`),\n      content: t(\"content\"),\n      placeholder: (_locale) => {\n        return { day: \"dd\", month: \"mm\", year: \"yyyy\" };\n      },\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.192-alpha.0",
+  "version": "56.0.194-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -36,14 +36,14 @@
     "types"
   ],
   "dependencies": {
-    "@ark-ui/react": "^5.34.1",
+    "@ark-ui/react": "^5.36.2",
     "@ndla/core": "^6.0.7-alpha.0",
-    "@ndla/icons": "^8.0.89-alpha.0",
+    "@ndla/icons": "^8.0.91-alpha.0",
     "@ndla/licenses": "^10.0.12-alpha.0",
-    "@ndla/locales": "^0.0.3",
-    "@ndla/primitives": "^1.0.130-alpha.0",
-    "@ndla/safelink": "^7.0.133-alpha.0",
-    "@ndla/styled-system": "^0.0.49",
+    "@ndla/locales": "^0.0.5",
+    "@ndla/primitives": "^1.0.132-alpha.0",
+    "@ndla/safelink": "^7.0.135-alpha.0",
+    "@ndla/styled-system": "^0.0.51",
     "@ndla/util": "^5.0.21-alpha.0",
     "html-react-parser": "^6.0.0"
   },
@@ -55,7 +55,7 @@
     "react-router": ">= 7.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.76",
+    "@ndla/preset-panda": "^0.0.78",
     "@ndla/types-backend": "^1.0.125",
     "@ndla/types-embed": "^5.0.22-alpha.0",
     "@pandacss/dev": "^1.10.0"
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "609d5d044ece059de95a3142847ad9ab8737f468"
+  "gitHead": "759d1a57b0a7ad06e831472aae9f8fba287d552e"
 }

package/src/Article/Article.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ark, type HTMLArkProps } from "@ark-ui/react";
+import { ark, type HTMLArkProps } from "@ark-ui/react/factory";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";