@ndla/primitives 1.0.129-alpha.0 → 1.0.132-alpha.0

package/lib/ErrorMessage/ErrorMessage.d.ts

@@ -5,12 +5,12 @@
  * 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 } from "@ndla/styled-system/types";
 import { type TextProps } from "../Text";
-export declare const ErrorMessageRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "description" | "actions", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "title" | "description" | "actions">>>;
-export declare const ErrorMessageContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
-export declare const ErrorMessageActions: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
+export declare const ErrorMessageRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react/factory").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "description" | "actions", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "title" | "description" | "actions">>>;
+export declare const ErrorMessageContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
+export declare const ErrorMessageActions: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
 interface ErrorMessageTitleProps extends Omit<HTMLArkProps<"h1">, "color">, StyledProps, TextProps {
 }
 export declare const ErrorMessageTitle: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<ErrorMessageTitleProps & import("react").RefAttributes<HTMLHeadingElement>>>;

package/lib/ErrorMessage/ErrorMessage.js

@@ -1,8 +1,8 @@
 const require_Text = require("../Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/ErrorMessage/ErrorMessage.tsx
 /**
@@ -43,9 +43,9 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		description: { textAlign: "center" }
 	}
 }));
-const ErrorMessageRoot = withProvider(_ark_ui_react.ark.article, "root", { baseComponent: true });
-const ErrorMessageContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
-const ErrorMessageActions = withContext(_ark_ui_react.ark.div, "actions", { baseComponent: true });
+const ErrorMessageRoot = withProvider(_ark_ui_react_factory.ark.article, "root", { baseComponent: true });
+const ErrorMessageContent = withContext(_ark_ui_react_factory.ark.div, "content", { baseComponent: true });
+const ErrorMessageActions = withContext(_ark_ui_react_factory.ark.div, "actions", { baseComponent: true });
 const ErrorMessageTitle = withContext((0, react.forwardRef)(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
 	textStyle,
 	...props,

package/lib/ErrorMessage/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","names":["ark","Heading","Text"],"sources":["../../src/ErrorMessage/ErrorMessage.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n  slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"center\",\n    },\n    actions: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      alignItems: \"center\",\n    },\n    title: {\n      textAlign: \"center\",\n    },\n    description: {\n      textAlign: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n  ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n  ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA9BS;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;EAAc;CAC7D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,OAAO,EACL,WAAW,UACZ;EACD,aAAa,EACX,WAAW,UACZ;EACF;CACF,CAE0E,CAAC;AAE5E,MAAa,mBAAmB,aAAaA,cAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAQ3F,MAAa,oBAAoB,aAJ3B,GAAA,MAAA,aACH,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAW,GAAI;CAAY;CAAO,CAAA,CAG/D,EAA2B,QAAQ;AAQhF,MAAa,0BAA0B,aAJjC,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;CAAiB;CAAW,GAAI;CAAY;CAAO,CAAA,CAGpD,EAAiC,cAAc"}
+{"version":3,"file":"ErrorMessage.js","names":["ark","Heading","Text"],"sources":["../../src/ErrorMessage/ErrorMessage.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 HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n  slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"center\",\n    },\n    actions: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      alignItems: \"center\",\n    },\n    title: {\n      textAlign: \"center\",\n    },\n    description: {\n      textAlign: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n  ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n  ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA9BS;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;CAAa;CAC5D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,OAAO,EACL,WAAW,SACb;EACA,aAAa,EACX,WAAW,SACb;CACF;AACF,CAE0E,CAAC;AAE3E,MAAa,mBAAmB,aAAaA,sBAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEzF,MAAa,sBAAsB,YAAYA,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,sBAAsB,YAAYA,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAQ1F,MAAa,oBAAoB,aAJ3B,GAAA,MAAA,aACH,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAW,GAAI;CAAY;AAAM,CAAA,CAG9D,GAA2B,OAAO;AAQ/E,MAAa,0BAA0B,aAJjC,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;CAAiB;CAAW,GAAI;CAAY;AAAM,CAAA,CAGnD,GAAiC,aAAa"}

package/lib/ExpandableBox.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 } from "@ndla/styled-system/types";
 export interface ExpandableBoxProps extends HTMLArkProps<"details">, StyledProps {
 }

package/lib/ExpandableBox.js

@@ -1,6 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/ExpandableBox.tsx
 /**
@@ -10,7 +10,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledExpandableBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.details, { base: {
+const StyledExpandableBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.details, { base: {
 	transitionDuration: "fast",
 	width: "100%",
 	position: "relative",
@@ -54,7 +54,7 @@ const ExpandableBox = (0, react.forwardRef)((props, ref) => {
 		ref
 	});
 });
-const StyledExpandableBoxSummary = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.summary, { base: {
+const StyledExpandableBoxSummary = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.summary, { base: {
 	cursor: "pointer",
 	margin: "-medium",
 	padding: "medium",

package/lib/ExpandableBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableBox.js","names":["ark"],"sources":["../src/ExpandableBox.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n  ark.details,\n  {\n    base: {\n      transitionDuration: \"fast\",\n      width: \"100%\",\n      position: \"relative\",\n      border: \"1px solid\",\n      borderRadius: \"xsmall\",\n      borderColor: \"stroke.subtle\",\n      padding: \"medium\",\n      clear: \"both\",\n      overflow: \"hidden\",\n      _open: {\n        padding: \"medium\",\n        \"& summary, [data-embed-type='expandable-box-summary']\": {\n          marginBlockEnd: \"-xxsmall\",\n        },\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details\");\n  detailsElements.forEach((details) => {\n    if (!details.hasAttribute(\"open\")) {\n      details.setAttribute(\"data-print-open\", \"true\");\n      details.setAttribute(\"open\", \"true\");\n    }\n  });\n};\n\nconst onAfterPrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n  detailsElements.forEach((details) => {\n    details.removeAttribute(\"data-print-open\");\n    details.removeAttribute(\"open\");\n  });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n  useEffect(() => {\n    window.addEventListener(\"beforeprint\", onBeforePrint);\n    window.addEventListener(\"afterprint\", onAfterPrint);\n    return () => {\n      window.removeEventListener(\"beforeprint\", onBeforePrint);\n      window.removeEventListener(\"afterprint\", onAfterPrint);\n    };\n  }, []);\n  return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n  ark.summary,\n  {\n    base: {\n      cursor: \"pointer\",\n      margin: \"-medium\",\n      padding: \"medium\",\n      textStyle: \"label.large!\",\n      _hover: {\n        color: \"text.action\",\n      },\n      \"& > *\": {\n        display: \"inline!\",\n        textStyle: \"label.large!\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n  <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uBAAA,GAAA,wBAAA,QACJA,cAAAA,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AACV,UAAS,iBAAiB,UACnC,CAAC,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AACT,UAAS,iBAAiB,2BACnC,CAAC,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,iBAAA,GAAA,MAAA,aAAoE,OAAO,QAAQ;AAC9F,EAAA,GAAA,MAAA,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;EAAO,CAAA;EACpF;AAIF,MAAM,8BAAA,GAAA,wBAAA,QACJA,cAAAA,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,wBAAA,GAAA,MAAA,aAA2E,OAAO,QAC7F,iBAAA,GAAA,kBAAA,KAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;CAAO,CAAA,CAC5F"}
+{"version":3,"file":"ExpandableBox.js","names":["ark"],"sources":["../src/ExpandableBox.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 HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n  ark.details,\n  {\n    base: {\n      transitionDuration: \"fast\",\n      width: \"100%\",\n      position: \"relative\",\n      border: \"1px solid\",\n      borderRadius: \"xsmall\",\n      borderColor: \"stroke.subtle\",\n      padding: \"medium\",\n      clear: \"both\",\n      overflow: \"hidden\",\n      _open: {\n        padding: \"medium\",\n        \"& summary, [data-embed-type='expandable-box-summary']\": {\n          marginBlockEnd: \"-xxsmall\",\n        },\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details\");\n  detailsElements.forEach((details) => {\n    if (!details.hasAttribute(\"open\")) {\n      details.setAttribute(\"data-print-open\", \"true\");\n      details.setAttribute(\"open\", \"true\");\n    }\n  });\n};\n\nconst onAfterPrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n  detailsElements.forEach((details) => {\n    details.removeAttribute(\"data-print-open\");\n    details.removeAttribute(\"open\");\n  });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n  useEffect(() => {\n    window.addEventListener(\"beforeprint\", onBeforePrint);\n    window.addEventListener(\"afterprint\", onAfterPrint);\n    return () => {\n      window.removeEventListener(\"beforeprint\", onBeforePrint);\n      window.removeEventListener(\"afterprint\", onAfterPrint);\n    };\n  }, []);\n  return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n  ark.summary,\n  {\n    base: {\n      cursor: \"pointer\",\n      margin: \"-medium\",\n      padding: \"medium\",\n      textStyle: \"label.large!\",\n      _hover: {\n        color: \"text.action\",\n      },\n      \"& > *\": {\n        display: \"inline!\",\n        textStyle: \"label.large!\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n  <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uBAAA,GAAA,wBAAA,QACJA,sBAAAA,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,WAClB;CACF;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAM,iBAAiB,MAAa;CAElC,SADiC,iBAAiB,SACpC,EAAE,SAAS,YAAY;EACnC,IAAI,CAAC,QAAQ,aAAa,MAAM,GAAG;GACjC,QAAQ,aAAa,mBAAmB,MAAM;GAC9C,QAAQ,aAAa,QAAQ,MAAM;EACrC;CACF,CAAC;AACH;AAEA,MAAM,gBAAgB,MAAa;CAEjC,SADiC,iBAAiB,0BACpC,EAAE,SAAS,YAAY;EACnC,QAAQ,gBAAgB,iBAAiB;EACzC,QAAQ,gBAAgB,MAAM;CAChC,CAAC;AACH;AAEA,MAAa,iBAAA,GAAA,MAAA,aAAoE,OAAO,QAAQ;CAC9F,CAAA,GAAA,MAAA,iBAAgB;EACd,OAAO,iBAAiB,eAAe,aAAa;EACpD,OAAO,iBAAiB,cAAc,YAAY;EAClD,aAAa;GACX,OAAO,oBAAoB,eAAe,aAAa;GACvD,OAAO,oBAAoB,cAAc,YAAY;EACvD;CACF,GAAG,CAAC,CAAC;CACL,OAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;CAAM,CAAA;AACrF,CAAC;AAID,MAAM,8BAAA,GAAA,wBAAA,QACJA,sBAAAA,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,cACT;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,wBAAA,GAAA,MAAA,aAA2E,OAAO,QAC7F,iBAAA,GAAA,kBAAA,KAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;AAAM,CAAA,CAC5F"}

package/lib/Field.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field, Fieldset } from "@ark-ui/react";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
 export declare const FieldRoot: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Field.RootProps & import("react").RefAttributes<HTMLDivElement>>, {}>;
 export declare const FieldsetRoot: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Fieldset.RootProps & import("react").RefAttributes<HTMLFieldSetElement>>, {}>;

package/lib/Field.js

@@ -1,5 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/Field.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,8 +14,8 @@ const rootStyle = {
 	flexDirection: "column",
 	gap: "3xsmall"
 };
-const FieldRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.Root, { base: rootStyle }, { baseComponent: true });
-const FieldsetRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.Root, { base: rootStyle }, { baseComponent: true });
+const FieldRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_field.Field.Root, { base: rootStyle }, { baseComponent: true });
+const FieldsetRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_fieldset.Fieldset.Root, { base: rootStyle }, { baseComponent: true });
 //#endregion
 exports.FieldRoot = FieldRoot;
 exports.FieldsetRoot = FieldsetRoot;

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["Field","Fieldset"],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,aAAA,GAAA,wBAAA,QAAmBA,cAAAA,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,gBAAA,GAAA,wBAAA,QAAsBC,cAAAA,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Field.js","names":["Field","Fieldset"],"sources":["../src/Field.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 { Field } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;AACP;AAEA,MAAa,aAAA,GAAA,wBAAA,QAAmBA,oBAAAA,MAAM,MAAM,EAAE,MAAM,UAAU,GAAG,EAAE,eAAe,KAAK,CAAC;AAExF,MAAa,gBAAA,GAAA,wBAAA,QAAsBC,uBAAAA,SAAS,MAAM,EAAE,MAAM,UAAU,GAAG,EAAE,eAAe,KAAK,CAAC"}

package/lib/FieldErrorMessage.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field, Fieldset } from "@ark-ui/react";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { TextProps } from "./Text";
 export interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, "color">, TextProps, StyledProps {

package/lib/FieldErrorMessage.js

@@ -1,8 +1,9 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/FieldErrorMessage.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -16,7 +17,7 @@ const errorTextStyling = {
 	whiteSpace: "pre-line",
 	justifyContent: "center"
 };
-const StyledFieldErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.ErrorText, { base: errorTextStyling }, { baseComponent: true });
+const StyledFieldErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_field.Field.ErrorText, { base: errorTextStyling }, { baseComponent: true });
 const FieldErrorMessage = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldErrorText, {
 	css: _ndla_styled_system_css.css.raw({
 		textStyle,
@@ -27,7 +28,7 @@ const FieldErrorMessage = (0, react.forwardRef)(({ textStyle = "label.small", fo
 	...props,
 	ref
 }));
-const StyledFieldsetErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.ErrorText, { base: errorTextStyling }, { baseComponent: true });
+const StyledFieldsetErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_fieldset.Fieldset.ErrorText, { base: errorTextStyling }, { baseComponent: true });
 const FieldsetErrorText = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldsetErrorText, {
 	css: _ndla_styled_system_css.css.raw({
 		textStyle,

package/lib/FieldErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n  color: \"text.error\",\n  whiteSpace: \"pre-line\",\n  justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n  Field.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledFieldsetErrorText = styled(\n  Fieldset.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,wBAAA,GAAA,wBAAA,QACJA,cAAAA,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,sBAAD;CAAsB,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEjH;AAED,MAAM,2BAAA,GAAA,wBAAA,QACJC,cAAAA,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAAyB,KAAKD,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEpH"}
+{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"sources":["../src/FieldErrorMessage.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 { Field } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n  color: \"text.error\",\n  whiteSpace: \"pre-line\",\n  justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n  Field.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledFieldsetErrorText = styled(\n  Fieldset.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;AAClB;AAEA,MAAM,wBAAA,GAAA,wBAAA,QACJA,oBAAAA,MAAM,WACN,EACE,MAAM,iBACR,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,sBAAD;CAAsB,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEjH;AAEA,MAAM,2BAAA,GAAA,wBAAA,QACJC,uBAAAA,SAAS,WACT,EACE,MAAM,iBACR,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAAyB,KAAKD,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpH"}

package/lib/FieldHelper.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field, Fieldset } from "@ark-ui/react";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { TextProps } from "./Text";
 export interface FieldHelperProps extends Omit<Field.HelperTextProps, "color">, TextProps, StyledProps {

package/lib/FieldHelper.js

@@ -1,8 +1,9 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/FieldHelper.tsx
 /**
 * Copyright (c) 2025-present, NDLA.
@@ -11,7 +12,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledFieldHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.HelperText, {}, { baseComponent: true });
+const StyledFieldHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_field.Field.HelperText, {}, { baseComponent: true });
 const FieldHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldHelper, {
 		css: _ndla_styled_system_css.css.raw({
@@ -24,7 +25,7 @@ const FieldHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeig
 		ref
 	});
 });
-const StyledFieldsetHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.HelperText, {}, { baseComponent: true });
+const StyledFieldsetHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_fieldset.Fieldset.HelperText, {}, { baseComponent: true });
 const FieldsetHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldsetHelper, {
 		css: _ndla_styled_system_css.css.raw({

package/lib/FieldHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n  },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return (\n      <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,KAAKC,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAErH;AAED,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,cAAAA,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,kBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,KAAKD,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAGnH"}
+{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n  },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return (\n      <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,oBAAAA,MAAM,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI9E,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,KAAKC,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;EAAO,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AACnH,CACF;AAEA,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,uBAAAA,SAAS,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIpF,MAAa,kBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;CACzF,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,KAAKD,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;EAAO,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AAEjH,CACF"}

package/lib/Figure.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 RecipeVariantProps } from "@ndla/styled-system/css";
 import type { RecipeVariant, StyledProps } from "@ndla/styled-system/types";
 declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{

package/lib/Figure.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Figure.tsx
 /**
@@ -111,7 +111,7 @@ const figureRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	]
 });
-const StyledFigure = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.figure, {}, { baseComponent: true });
+const StyledFigure = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.figure, {}, { baseComponent: true });
 const Figure = (0, react.forwardRef)(({ size, float, css: cssProp, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
 		css: _ndla_styled_system_css.css.raw(figureRecipe.raw({

package/lib/Figure.js.map

@@ -1 +1 @@
-{"version":3,"file":"Figure.js","names":["ark","css"],"sources":["../src/Figure.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n  base: {\n    position: \"relative\",\n    transitionDuration: \"normal\",\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: \"default\",\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  variants: {\n    size: {\n      full: {\n        width: \"100%\",\n        _print: {\n          width: \"60%\",\n        },\n      },\n      medium: {\n        tablet: {\n          width: \"50%\",\n        },\n        desktop: {\n          width: \"65%\",\n        },\n        _print: {\n          width: \"65%\",\n        },\n      },\n      small: {\n        tablet: {\n          width: \"35%\",\n        },\n        desktop: {\n          width: \"50%\",\n        },\n        _print: {\n          width: \"50%\",\n        },\n      },\n      xsmall: {\n        tablet: {\n          width: \"25%\",\n        },\n        desktop: {\n          width: \"35%\",\n        },\n        _print: {\n          width: \"35%\",\n        },\n      },\n    },\n    float: {\n      left: {\n        tablet: {\n          float: \"left\",\n          clear: \"left\",\n        },\n        _print: {\n          float: \"left\",\n          clear: \"left\",\n        },\n      },\n      right: {\n        tablet: {\n          float: \"right\",\n          clear: \"right\",\n        },\n        _print: {\n          float: \"right\",\n          clear: \"right\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"full\",\n  },\n  compoundVariants: [\n    {\n      float: [\"left\", \"right\"],\n      css: {\n        zIndex: \"base\",\n        left: \"auto\",\n        marginBlock: \"xsmall\",\n      },\n    },\n    {\n      float: \"left\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineEnd: \"medium\",\n        tabletDown: { marginInlineEnd: \"0\" },\n      },\n    },\n    {\n      float: \"right\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineStart: \"medium\",\n        tabletDown: { marginInlineStart: \"0\" },\n      },\n    },\n    {\n      float: [\"left\", \"right\"],\n      size: [\"full\"],\n      css: {\n        marginInlineStart: \"0\",\n        marginInlineEnd: \"0\",\n      },\n    },\n  ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n  return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,gBAAA,GAAA,wBAAA,KAAmB;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACD,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,cAAAA,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,UAAA,GAAA,MAAA,aAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,KAAKC,wBAAAA,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}
+{"version":3,"file":"Figure.js","names":["ark","css"],"sources":["../src/Figure.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 HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n  base: {\n    position: \"relative\",\n    transitionDuration: \"normal\",\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: \"default\",\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  variants: {\n    size: {\n      full: {\n        width: \"100%\",\n        _print: {\n          width: \"60%\",\n        },\n      },\n      medium: {\n        tablet: {\n          width: \"50%\",\n        },\n        desktop: {\n          width: \"65%\",\n        },\n        _print: {\n          width: \"65%\",\n        },\n      },\n      small: {\n        tablet: {\n          width: \"35%\",\n        },\n        desktop: {\n          width: \"50%\",\n        },\n        _print: {\n          width: \"50%\",\n        },\n      },\n      xsmall: {\n        tablet: {\n          width: \"25%\",\n        },\n        desktop: {\n          width: \"35%\",\n        },\n        _print: {\n          width: \"35%\",\n        },\n      },\n    },\n    float: {\n      left: {\n        tablet: {\n          float: \"left\",\n          clear: \"left\",\n        },\n        _print: {\n          float: \"left\",\n          clear: \"left\",\n        },\n      },\n      right: {\n        tablet: {\n          float: \"right\",\n          clear: \"right\",\n        },\n        _print: {\n          float: \"right\",\n          clear: \"right\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"full\",\n  },\n  compoundVariants: [\n    {\n      float: [\"left\", \"right\"],\n      css: {\n        zIndex: \"base\",\n        left: \"auto\",\n        marginBlock: \"xsmall\",\n      },\n    },\n    {\n      float: \"left\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineEnd: \"medium\",\n        tabletDown: { marginInlineEnd: \"0\" },\n      },\n    },\n    {\n      float: \"right\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineStart: \"medium\",\n        tabletDown: { marginInlineStart: \"0\" },\n      },\n    },\n    {\n      float: [\"left\", \"right\"],\n      size: [\"full\"],\n      css: {\n        marginInlineStart: \"0\",\n        marginInlineEnd: \"0\",\n      },\n    },\n  ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n  return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,gBAAA,GAAA,wBAAA,KAAmB;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;EACtB;CACF;CACA,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,MACT;GACF;GACA,QAAQ;IACN,QAAQ,EACN,OAAO,MACT;IACA,SAAS,EACP,OAAO,MACT;IACA,QAAQ,EACN,OAAO,MACT;GACF;GACA,OAAO;IACL,QAAQ,EACN,OAAO,MACT;IACA,SAAS,EACP,OAAO,MACT;IACA,QAAQ,EACN,OAAO,MACT;GACF;GACA,QAAQ;IACN,QAAQ,EACN,OAAO,MACT;IACA,SAAS,EACP,OAAO,MACT;IACA,QAAQ,EACN,OAAO,MACT;GACF;EACF;EACA,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;IACT;IACA,QAAQ;KACN,OAAO;KACP,OAAO;IACT;GACF;GACA,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;IACT;IACA,QAAQ;KACN,OAAO;KACP,OAAO;IACT;GACF;EACF;CACF;CACA,iBAAiB,EACf,MAAM,OACR;CACA,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,OAAO;GACvB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;GACf;EACF;EACA;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;GAAQ;GAClC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,IAAI;GACrC;EACF;EACA;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;GAAQ;GAClC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,IAAI;GACvC;EACF;EACA;GACE,OAAO,CAAC,QAAQ,OAAO;GACvB,MAAM,CAAC,MAAM;GACb,KAAK;IACH,mBAAmB;IACnB,iBAAiB;GACnB;EACF;CACF;AACF,CAAC;AAUD,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,sBAAAA,IAAI,QAAQ,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEnE,MAAa,UAAA,GAAA,MAAA,aAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;CAC3G,OAAO,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,KAAKC,wBAAAA,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;EAAM,CAAC,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AACvG,CAAC"}

package/lib/FileUpload.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { FileUpload } from "@ark-ui/react";
+import { FileUpload } from "@ark-ui/react/file-upload";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";

package/lib/FileUpload.js

@@ -1,10 +1,10 @@
 const require_Text = require("./Text.js");
 const require_Label = require("./Label.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_file_upload = require("@ark-ui/react/file-upload");
 //#region src/FileUpload.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -14,7 +14,7 @@ let react = require("react");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.fileUploadAnatomy.keys(),
+	slots: _ark_ui_react_file_upload.fileUploadAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -89,17 +89,17 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const FileUploadHiddenInput = _ark_ui_react.FileUpload.HiddenInput;
-const FileUploadContext = _ark_ui_react.FileUpload.Context;
-const FileUploadRoot = withProvider(_ark_ui_react.FileUpload.Root, "root", { baseComponent: true });
-const FileUploadDropzone = withContext(_ark_ui_react.FileUpload.Dropzone, "dropzone", { baseComponent: true });
-const FileUploadTrigger = withContext(_ark_ui_react.FileUpload.Trigger, "trigger", { baseComponent: true });
-const FileUploadItemGroup = withContext(_ark_ui_react.FileUpload.ItemGroup, "itemGroup", { baseComponent: true });
-const FileUploadItemPreview = withContext(_ark_ui_react.FileUpload.ItemPreview, "itemPreview", { baseComponent: true });
-const FileUploadItem = withContext(_ark_ui_react.FileUpload.Item, "item", { baseComponent: true });
-const FileUploadItemDeleteTrigger = withContext(_ark_ui_react.FileUpload.ItemDeleteTrigger, "itemDeleteTrigger", { baseComponent: true });
-const FileUploadItemPreviewImage = withContext(_ark_ui_react.FileUpload.ItemPreviewImage, "itemPreviewImage", { baseComponent: true });
-const InternalFileUploadItemName = withContext(_ark_ui_react.FileUpload.ItemName, "itemName", { baseComponent: true });
+const FileUploadHiddenInput = _ark_ui_react_file_upload.FileUpload.HiddenInput;
+const FileUploadContext = _ark_ui_react_file_upload.FileUpload.Context;
+const FileUploadRoot = withProvider(_ark_ui_react_file_upload.FileUpload.Root, "root", { baseComponent: true });
+const FileUploadDropzone = withContext(_ark_ui_react_file_upload.FileUpload.Dropzone, "dropzone", { baseComponent: true });
+const FileUploadTrigger = withContext(_ark_ui_react_file_upload.FileUpload.Trigger, "trigger", { baseComponent: true });
+const FileUploadItemGroup = withContext(_ark_ui_react_file_upload.FileUpload.ItemGroup, "itemGroup", { baseComponent: true });
+const FileUploadItemPreview = withContext(_ark_ui_react_file_upload.FileUpload.ItemPreview, "itemPreview", { baseComponent: true });
+const FileUploadItem = withContext(_ark_ui_react_file_upload.FileUpload.Item, "item", { baseComponent: true });
+const FileUploadItemDeleteTrigger = withContext(_ark_ui_react_file_upload.FileUpload.ItemDeleteTrigger, "itemDeleteTrigger", { baseComponent: true });
+const FileUploadItemPreviewImage = withContext(_ark_ui_react_file_upload.FileUpload.ItemPreviewImage, "itemPreviewImage", { baseComponent: true });
+const InternalFileUploadItemName = withContext(_ark_ui_react_file_upload.FileUpload.ItemName, "itemName", { baseComponent: true });
 const FileUploadItemName = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 	textStyle,
 	fontWeight,
@@ -108,7 +108,7 @@ const FileUploadItemName = (0, react.forwardRef)(({ textStyle = "label.medium",
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFileUploadItemName, {})
 }));
-const InternalFileUploadItemSizeText = withContext(_ark_ui_react.FileUpload.ItemSizeText, "itemSizeText", { baseComponent: true });
+const InternalFileUploadItemSizeText = withContext(_ark_ui_react_file_upload.FileUpload.ItemSizeText, "itemSizeText", { baseComponent: true });
 const FileUploadItemSizeText = (0, react.forwardRef)(({ textStyle = "label.small", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 	textStyle,
 	ref,
@@ -116,7 +116,7 @@ const FileUploadItemSizeText = (0, react.forwardRef)(({ textStyle = "label.small
 	...props,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFileUploadItemSizeText, {})
 }));
-const InternalFileUploadLabel = withContext(_ark_ui_react.FileUpload.Label, "label");
+const InternalFileUploadLabel = withContext(_ark_ui_react_file_upload.FileUpload.Label, "label");
 const FileUploadLabel = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight = "light", children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFileUploadLabel, {
 	ref,
 	asChild: true,

package/lib/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","names":["fileUploadAnatomy","FileUpload","Text","Label"],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA/EO;CAC3B,OAAOA,cAAAA,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAEwE,CAAC;AAM1E,MAAa,wBAAwBC,cAAAA,WAAW;AAChD,MAAa,oBAAoBA,cAAAA,WAAW;AAE5C,MAAa,iBAAiB,aAAaA,cAAAA,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,cAAAA,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAYA,cAAAA,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAYA,cAAAA,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAYA,cAAAA,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAYA,cAAAA,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAYA,cAAAA,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAYA,cAAAA,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAYA,cAAAA,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,sBAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;CAAiB;CAAuB;CAAY,SAAA;CAAQ,GAAI;CAAY;WAE1E,iBAAA,GAAA,kBAAA,KAAC,4BAAD,EAA8B,CAAA;CACzB,CAAA,CAEV;AAED,MAAM,iCAAiC,YAAYD,cAAAA,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,0BAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;CAAiB;CAAgB;CAAK,SAAA;CAAQ,GAAI;WAChD,iBAAA,GAAA,kBAAA,KAAC,gCAAD,EAAkC,CAAA;CAC7B,CAAA,CAEV;AAED,MAAM,0BAA0B,YAAYD,cAAAA,WAAW,OAAO,QAAQ;AAKtE,MAAa,mBAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,SAAA;WACjC,iBAAA,GAAA,kBAAA,KAACE,cAAAA,OAAD;EAAkB;EAAuB;EAAY,GAAI;EACtD;EACK,CAAA;CACgB,CAAA,CAE7B"}
+{"version":3,"file":"FileUpload.js","names":["fileUploadAnatomy","FileUpload","Text","Label"],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } from \"@ark-ui/react/file-upload\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":"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"}

package/lib/FramedContent.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 framedContentRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     colorTheme: {

package/lib/FramedContent.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/FramedContent.tsx
 /**
@@ -35,7 +35,7 @@ const framedContentRecipe = (0, _ndla_styled_system_css.cva)({
 	} },
 	defaultVariants: { colorTheme: "neutral" }
 });
-const StyledFramedContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledFramedContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const FramedContent = (0, react.forwardRef)(({ colorTheme, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFramedContent, {
 	"data-embed-type": "framed-content",
 	css: _ndla_styled_system_css.css.raw(framedContentRecipe.raw({ colorTheme }), cssProp),

package/lib/FramedContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FramedContent.js","names":["ark","css"],"sources":["../src/FramedContent.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 HTMLArkProps, ark } 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 framedContentRecipe = cva({\n  base: {\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"small\",\n    clear: \"both\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    colorTheme: {\n      neutral: {\n        backgroundColor: \"surface.default\",\n        borderColor: \"stroke.subtle\",\n      },\n      brand1: {\n        backgroundColor: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n  },\n});\n\nexport type FramedContentVariantProps = NonNullable<RecipeVariantProps<typeof framedContentRecipe>>;\n\nexport interface FramedContentProps extends HTMLArkProps<\"div\">, StyledProps, FramedContentVariantProps {}\n\nconst StyledFramedContent = styled(ark.div, {}, { baseComponent: true });\n\nexport const FramedContent = forwardRef<HTMLDivElement, FramedContentProps>(\n  ({ colorTheme, css: cssProp, ...props }, ref) => (\n    <StyledFramedContent\n      data-embed-type=\"framed-content\"\n      css={css.raw(framedContentRecipe.raw({ colorTheme }), cssProp)}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAA,GAAA,wBAAA,KAA0B;CAC9B,MAAM;EACJ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;EACX;CACD,UAAU,EACR,YAAY;EACV,SAAS;GACP,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,YAAY,WACb;CACF,CAAC;AAMF,MAAM,uBAAA,GAAA,wBAAA,QAA6BA,cAAAA,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CACE,mBAAgB;CAChB,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;CACL,CAAA,CAEL"}
+{"version":3,"file":"FramedContent.js","names":["ark","css"],"sources":["../src/FramedContent.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 HTMLArkProps, ark } 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 framedContentRecipe = cva({\n  base: {\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"small\",\n    clear: \"both\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    colorTheme: {\n      neutral: {\n        backgroundColor: \"surface.default\",\n        borderColor: \"stroke.subtle\",\n      },\n      brand1: {\n        backgroundColor: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n  },\n});\n\nexport type FramedContentVariantProps = NonNullable<RecipeVariantProps<typeof framedContentRecipe>>;\n\nexport interface FramedContentProps extends HTMLArkProps<\"div\">, StyledProps, FramedContentVariantProps {}\n\nconst StyledFramedContent = styled(ark.div, {}, { baseComponent: true });\n\nexport const FramedContent = forwardRef<HTMLDivElement, FramedContentProps>(\n  ({ colorTheme, css: cssProp, ...props }, ref) => (\n    <StyledFramedContent\n      data-embed-type=\"framed-content\"\n      css={css.raw(framedContentRecipe.raw({ colorTheme }), cssProp)}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAA,GAAA,wBAAA,KAA0B;CAC9B,MAAM;EACJ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;CACZ;CACA,UAAU,EACR,YAAY;EACV,SAAS;GACP,iBAAiB;GACjB,aAAa;EACf;EACA,QAAQ;GACN,iBAAiB;GACjB,aAAa;EACf;EACA,QAAQ;GACN,iBAAiB;GACjB,aAAa;EACf;CACF,EACF;CACA,iBAAiB,EACf,YAAY,UACd;AACF,CAAC;AAMD,MAAM,uBAAA,GAAA,wBAAA,QAA6BA,sBAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEvE,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CACE,mBAAgB;CAChB,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,WAAW,CAAC,GAAG,OAAO;CAC7D,GAAI;CACC;AACN,CAAA,CAEL"}

package/lib/Hero.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 RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "background" | "content", {
@@ -88,7 +88,7 @@ export type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>
 export type HeroVariant = NonNullable<HeroVariantProps>["variant"];
 export interface HeroProps extends HTMLArkProps<"div">, StyledProps, HeroVariantProps {
 }
-export declare const Hero: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "background" | "content", {
+export declare const Hero: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "background" | "content", {
     absolute: {
         true: {
             background: {
@@ -166,8 +166,8 @@ export declare const Hero: import("@ndla/styled-system/jsx").StyleContextProvide
 }>>;
 export interface HeroBackgroundProps extends HTMLArkProps<"div">, StyledProps {
 }
-export declare const HeroBackground: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
+export declare const HeroBackground: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
 export interface HeroContentProps extends HTMLArkProps<"div">, StyledProps {
 }
-export declare const HeroContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
+export declare const HeroContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
 export {};

package/lib/Hero.js

@@ -1,5 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 //#region src/Hero.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -8,7 +9,7 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const { withProvider, withContext } = (0, require("@ndla/styled-system/jsx").createStyleContext)((0, _ndla_styled_system_css.sva)({
+const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
 	slots: [
 		"root",
 		"background",
@@ -62,9 +63,9 @@ const { withProvider, withContext } = (0, require("@ndla/styled-system/jsx").cre
 		}
 	}
 }));
-const Hero = withProvider(_ark_ui_react.ark.div, "root", { baseComponent: true });
-const HeroBackground = withContext(_ark_ui_react.ark.div, "background", { baseComponent: true });
-const HeroContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
+const Hero = withProvider(_ark_ui_react_factory.ark.div, "root", { baseComponent: true });
+const HeroBackground = withContext(_ark_ui_react_factory.ark.div, "background", { baseComponent: true });
+const HeroContent = withContext(_ark_ui_react_factory.ark.div, "content", { baseComponent: true });
 //#endregion
 exports.Hero = Hero;
 exports.HeroBackground = HeroBackground;