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

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;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,cAAAA,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"}
+{"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":"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"}
+{"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;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,cAAAA,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"}
+{"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;

package/lib/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.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, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n  slots: [\"root\", \"background\", \"content\"],\n  base: {\n    root: {\n      width: \"100%\",\n      position: \"relative\",\n    },\n    background: {\n      height: \"350px\",\n      width: \"100%\",\n      zIndex: \"hide\",\n      overflow: \"hidden\",\n      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n      _print: {\n        background: \"none\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"flex-end\",\n      paddingBlock: \"xsmall\",\n      tablet: {\n        paddingBlockStart: \"xxlarge\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    absolute: true,\n  },\n  variants: {\n    absolute: {\n      true: {\n        background: {\n          position: \"absolute\",\n        },\n      },\n    },\n    variant: {\n      primary: {\n        background: {\n          background: \"primary\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2Bold: {\n        background: {\n          background: \"surface.brand.2.bold\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2: {\n        background: {\n          background: \"surface.brand.2\",\n        },\n      },\n      brand2Moderate: {\n        background: {\n          background: \"surface.brand.2.moderate\",\n        },\n      },\n      brand1: {\n        background: {\n          background: \"surface.brand.1\",\n        },\n      },\n      brand1Subtle: {\n        background: {\n          background: \"surface.brand.1.subtle\",\n        },\n      },\n      brand1Moderate: {\n        background: {\n          background: \"surface.brand.1.moderate\",\n        },\n      },\n      brand3Moderate: {\n        background: {\n          background: \"surface.brand.3.moderate\",\n        },\n      },\n      brand4Moderate: {\n        background: {\n          background: \"surface.brand.4.moderate\",\n        },\n      },\n      brand5Moderate: {\n        background: {\n          background: \"surface.brand.5.moderate\",\n        },\n      },\n      neutral: {\n        background: {\n          background: \"surface.infoSubtle\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;AA0HA,MAAM,EAAE,cAAc,iBAAA,oCAAA,EAAA,qBAAA,GAAA,wBAAA,KA7GC;CACrB,OAAO;EAAC;EAAQ;EAAc;CAAS;CACvC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;EACZ;EACA,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,OACd;EACF;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,UACrB;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;CACZ;CACA,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,WACZ,EACF,EACF;EACA,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,UACd;IACA,SAAS,EACP,oBAAoB,EAClB,OAAO,gBACT,EACF;GACF;GACA,YAAY;IACV,YAAY,EACV,YAAY,uBACd;IACA,SAAS,EACP,oBAAoB,EAClB,OAAO,gBACT,EACF;GACF;GACA,QAAQ,EACN,YAAY,EACV,YAAY,kBACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,QAAQ,EACN,YAAY,EACV,YAAY,kBACd,EACF;GACA,cAAc,EACZ,YAAY,EACV,YAAY,yBACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,SAAS,EACP,YAAY,EACV,YAAY,qBACd,EACF;EACF;CACF;AACF,CAEkE,CAAC;AAQnE,MAAa,OAAO,aAAaA,cAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIzE,MAAa,iBAAiB,YAAYA,cAAAA,IAAI,KAAK,cAAc,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,cAAc,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.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, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n  slots: [\"root\", \"background\", \"content\"],\n  base: {\n    root: {\n      width: \"100%\",\n      position: \"relative\",\n    },\n    background: {\n      height: \"350px\",\n      width: \"100%\",\n      zIndex: \"hide\",\n      overflow: \"hidden\",\n      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n      _print: {\n        background: \"none\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"flex-end\",\n      paddingBlock: \"xsmall\",\n      tablet: {\n        paddingBlockStart: \"xxlarge\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    absolute: true,\n  },\n  variants: {\n    absolute: {\n      true: {\n        background: {\n          position: \"absolute\",\n        },\n      },\n    },\n    variant: {\n      primary: {\n        background: {\n          background: \"primary\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2Bold: {\n        background: {\n          background: \"surface.brand.2.bold\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2: {\n        background: {\n          background: \"surface.brand.2\",\n        },\n      },\n      brand2Moderate: {\n        background: {\n          background: \"surface.brand.2.moderate\",\n        },\n      },\n      brand1: {\n        background: {\n          background: \"surface.brand.1\",\n        },\n      },\n      brand1Subtle: {\n        background: {\n          background: \"surface.brand.1.subtle\",\n        },\n      },\n      brand1Moderate: {\n        background: {\n          background: \"surface.brand.1.moderate\",\n        },\n      },\n      brand3Moderate: {\n        background: {\n          background: \"surface.brand.3.moderate\",\n        },\n      },\n      brand4Moderate: {\n        background: {\n          background: \"surface.brand.4.moderate\",\n        },\n      },\n      brand5Moderate: {\n        background: {\n          background: \"surface.brand.5.moderate\",\n        },\n      },\n      neutral: {\n        background: {\n          background: \"surface.infoSubtle\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AA0HA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA7GC;CACrB,OAAO;EAAC;EAAQ;EAAc;CAAS;CACvC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;EACZ;EACA,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,OACd;EACF;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,UACrB;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;CACZ;CACA,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,WACZ,EACF,EACF;EACA,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,UACd;IACA,SAAS,EACP,oBAAoB,EAClB,OAAO,gBACT,EACF;GACF;GACA,YAAY;IACV,YAAY,EACV,YAAY,uBACd;IACA,SAAS,EACP,oBAAoB,EAClB,OAAO,gBACT,EACF;GACF;GACA,QAAQ,EACN,YAAY,EACV,YAAY,kBACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,QAAQ,EACN,YAAY,EACV,YAAY,kBACd,EACF;GACA,cAAc,EACZ,YAAY,EACV,YAAY,yBACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,SAAS,EACP,YAAY,EACV,YAAY,qBACd,EACF;EACF;CACF;AACF,CAEkE,CAAC;AAQnE,MAAa,OAAO,aAAaA,sBAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIzE,MAAa,iBAAiB,YAAYA,sBAAAA,IAAI,KAAK,cAAc,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,cAAc,YAAYA,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC"}

package/lib/Image.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/Image.tsx
 /**
@@ -91,7 +91,7 @@ const StyledImage = (0, _ndla_styled_system_jsx.styled)("img", {
 		rounded: { borderRadius: "xsmall" }
 	} }
 });
-const StyledFallbackElement = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, { base: {
+const StyledFallbackElement = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: {
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center"

package/lib/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.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 } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\n\nexport interface ImageCrop {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}\n\nexport interface ImageFocalPoint {\n  x: number;\n  y: number;\n}\n\ninterface SrcQueryStringOptions {\n  width?: number;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n  const params = [];\n  if (width) {\n    params.push(`width=${width}`);\n  }\n  if (crop) {\n    params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n  }\n  if (focalPoint) {\n    params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n  }\n  if (imageLanguage) {\n    params.push(`language=${imageLanguage}`);\n  }\n  return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n  src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n  icon: 240,\n  xsmall: 480,\n  small: 800,\n  medium: 1080,\n  large: 1440,\n  xlarge: 1920,\n  xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant) => {\n      return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n    })\n    .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant, i) => {\n      if (i === variants.length - 1) {\n        return `${VAR_WIDTHS[variant.size]}px`;\n      }\n      return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n    })\n    .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n  if (!src) return undefined;\n  return IMAGE_WIDTHS.map((width) => {\n    const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n    const query = queryString.length ? `?${queryString}` : \"\";\n    return `${src}${query} ${width}w`;\n  }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n  src: string;\n  sizes?: string;\n  contentType?: string;\n  srcSet?: string;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      children,\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      imageLanguage,\n      contentType,\n      sizes = FALLBACK_SIZES,\n      ...props\n    },\n    ref,\n  ) => {\n    const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n    return (\n      <styled.picture {...props} ref={ref}>\n        {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n        {children}\n      </styled.picture>\n    );\n  },\n);\n\nconst StyledImage = styled(\"img\", {\n  defaultVariants: { variant: \"regular\" },\n  variants: {\n    variant: {\n      regular: {},\n      rounded: {\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledFallbackElement = styled(\n  ark.div,\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  },\n  { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  crop?: ImageCrop;\n  imageLanguage?: string;\n  focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n  ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const srcWithParms = queryString ? `${src}?${queryString}` : src;\n    return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n  },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src?: string;\n  sizes?: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  imageLanguage?: string;\n  crop?: ImageCrop;\n  fallbackElement?: ReactNode;\n  focalPoint?: ImageFocalPoint;\n  variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      contentType,\n      imageLanguage,\n      fallbackWidth = FALLBACK_WIDTH,\n      sizes: sizesProp,\n      alt,\n      fallbackElement,\n      variants,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasError, setHasError] = useState(false);\n\n    useEffect(() => {\n      setHasError(false);\n    }, [src, srcSetProp, sizesProp, variants]);\n\n    if (!src?.length && !variants?.length && fallbackElement) {\n      return (\n        <StyledFallbackElement {...props} ref={ref}>\n          {fallbackElement}\n        </StyledFallbackElement>\n      );\n    }\n\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n    return (\n      <picture>\n        {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n          <source\n            type={\"image/webp\"}\n            srcSet={getVariantSrcSet(variants)}\n            sizes={sizesProp ?? getVariantSizes(variants)}\n          />\n        )}\n        {contentType !== \"image/gif\" && (\n          <source\n            type={contentType}\n            srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n            sizes={sizesProp ?? FALLBACK_SIZES}\n          />\n        )}\n        <StyledImage\n          alt={alt}\n          src={contentType === \"image/gif\" ? src : fallbackSrc}\n          {...props}\n          ref={ref}\n          data-error={hasError ? \"\" : undefined}\n          onError={(e) => {\n            setHasError(true);\n            props.onError?.(e);\n          }}\n          onLoad={(e) => {\n            setHasError(false);\n            props.onLoad?.(e);\n          }}\n        />\n      </picture>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.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 } from \"@ark-ui/react/factory\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\n\nexport interface ImageCrop {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}\n\nexport interface ImageFocalPoint {\n  x: number;\n  y: number;\n}\n\ninterface SrcQueryStringOptions {\n  width?: number;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n  const params = [];\n  if (width) {\n    params.push(`width=${width}`);\n  }\n  if (crop) {\n    params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n  }\n  if (focalPoint) {\n    params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n  }\n  if (imageLanguage) {\n    params.push(`language=${imageLanguage}`);\n  }\n  return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n  src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n  icon: 240,\n  xsmall: 480,\n  small: 800,\n  medium: 1080,\n  large: 1440,\n  xlarge: 1920,\n  xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant) => {\n      return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n    })\n    .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant, i) => {\n      if (i === variants.length - 1) {\n        return `${VAR_WIDTHS[variant.size]}px`;\n      }\n      return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n    })\n    .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n  if (!src) return undefined;\n  return IMAGE_WIDTHS.map((width) => {\n    const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n    const query = queryString.length ? `?${queryString}` : \"\";\n    return `${src}${query} ${width}w`;\n  }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n  src: string;\n  sizes?: string;\n  contentType?: string;\n  srcSet?: string;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      children,\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      imageLanguage,\n      contentType,\n      sizes = FALLBACK_SIZES,\n      ...props\n    },\n    ref,\n  ) => {\n    const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n    return (\n      <styled.picture {...props} ref={ref}>\n        {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n        {children}\n      </styled.picture>\n    );\n  },\n);\n\nconst StyledImage = styled(\"img\", {\n  defaultVariants: { variant: \"regular\" },\n  variants: {\n    variant: {\n      regular: {},\n      rounded: {\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledFallbackElement = styled(\n  ark.div,\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  },\n  { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  crop?: ImageCrop;\n  imageLanguage?: string;\n  focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n  ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const srcWithParms = queryString ? `${src}?${queryString}` : src;\n    return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n  },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src?: string;\n  sizes?: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  imageLanguage?: string;\n  crop?: ImageCrop;\n  fallbackElement?: ReactNode;\n  focalPoint?: ImageFocalPoint;\n  variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      contentType,\n      imageLanguage,\n      fallbackWidth = FALLBACK_WIDTH,\n      sizes: sizesProp,\n      alt,\n      fallbackElement,\n      variants,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasError, setHasError] = useState(false);\n\n    useEffect(() => {\n      setHasError(false);\n    }, [src, srcSetProp, sizesProp, variants]);\n\n    if (!src?.length && !variants?.length && fallbackElement) {\n      return (\n        <StyledFallbackElement {...props} ref={ref}>\n          {fallbackElement}\n        </StyledFallbackElement>\n      );\n    }\n\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n    return (\n      <picture>\n        {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n          <source\n            type={\"image/webp\"}\n            srcSet={getVariantSrcSet(variants)}\n            sizes={sizesProp ?? getVariantSizes(variants)}\n          />\n        )}\n        {contentType !== \"image/gif\" && (\n          <source\n            type={contentType}\n            srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n            sizes={sizesProp ?? FALLBACK_SIZES}\n          />\n        )}\n        <StyledImage\n          alt={alt}\n          src={contentType === \"image/gif\" ? src : fallbackSrc}\n          {...props}\n          ref={ref}\n          data-error={hasError ? \"\" : undefined}\n          onError={(e) => {\n            setHasError(true);\n            props.onError?.(e);\n          }}\n          onLoad={(e) => {\n            setHasError(false);\n            props.onLoad?.(e);\n          }}\n        />\n      </picture>\n    );\n  },\n);\n"],"mappings":"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"}

package/lib/Input.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, StyledProps } from "@ndla/styled-system/types";
 interface InputContainerProps extends HTMLArkProps<"div">, StyledProps {
 }

package/lib/Input.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 _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
 let _ndla_util = require("@ndla/util");
 //#region src/Input.tsx
 /**
@@ -37,7 +38,7 @@ const inputCss = _ndla_styled_system_css.css.raw({
 		_hover: { boxShadowColor: "stroke.subtle" }
 	}
 });
-const StyledInputContainer = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, { base: {
+const StyledInputContainer = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: {
 	width: "100%",
 	display: "flex",
 	alignItems: "center",
@@ -75,7 +76,7 @@ const baseTextAreaCss = _ndla_styled_system_css.css.raw({
 	resize: "none",
 	overflowY: "hidden"
 });
-const StyledInput = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.input, {}, { baseComponent: true });
+const StyledInput = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.input, {}, { baseComponent: true });
 const inputRecipe = (0, _ndla_styled_system_css.cva)({
 	defaultVariants: { componentSize: "medium" },
 	variants: { componentSize: {
@@ -97,13 +98,13 @@ const Input = (0, react.forwardRef)(({ css: cssProp, componentSize, ...props },
 		...props
 	});
 });
-const FieldInput = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Field.Input, {
+const FieldInput = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.Input, {
 	asChild: true,
 	...props,
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {})
 }));
-const StyledTextArea = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.textarea, {}, { baseComponent: true });
+const StyledTextArea = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.textarea, {}, { baseComponent: true });
 const TextArea = (0, react.forwardRef)(({ css: cssProp, autoResize = true, ...props }, ref) => {
 	const context = (0, react.useContext)(InputContext);
 	const localRef = (0, react.useRef)(null);
@@ -128,7 +129,7 @@ const TextArea = (0, react.forwardRef)(({ css: cssProp, autoResize = true, ...pr
 		...props
 	});
 });
-const FieldTextArea = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Field.Textarea, {
+const FieldTextArea = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.Textarea, {
 	asChild: true,
 	...props,
 	ref,

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["css","ark","Field"],"sources":["../src/Input.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, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { composeRefs } from \"@ndla/util\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from \"react\";\n\ninterface InputContextType {}\n\nconst InputContext = createContext<InputContextType | undefined>(undefined);\n\nconst inputCss = css.raw({\n  boxShadowColor: \"stroke.subtle\",\n  boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n  background: \"background.default\",\n  borderRadius: \"xsmall\",\n  _ariaInvalid: {\n    boxShadowColor: \"stroke.error\",\n    _hover: {\n      boxShadowColor: \"stroke.error\",\n    },\n    _focusWithin: {\n      boxShadowColor: \"stroke.error\",\n      _hover: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n  },\n  _hover: {\n    boxShadowColor: \"stroke.hover\",\n  },\n  _focusWithin: {\n    boxShadow: \"inset 0 0 0 2px var(--shadow-color)\",\n    boxShadowColor: \"stroke.default\",\n    _hover: {\n      boxShadowColor: \"stroke.default\",\n    },\n  },\n  \"&:disabled, &:has(:disabled)\": {\n    boxShadowColor: \"stroke.subtle\",\n    _hover: {\n      boxShadowColor: \"stroke.subtle\",\n    },\n  },\n});\n\nconst StyledInputContainer = styled(\n  ark.div,\n  {\n    base: {\n      width: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      \"& svg\": {\n        width: \"medium\",\n        height: \"medium\",\n      },\n      \"&:not(:has(input:first-child,textarea:first-child))\": {\n        paddingInlineStart: \"xsmall\",\n      },\n      \"&:not(:has(input:last-child,textarea:last-child))\": {\n        paddingInlineEnd: \"xsmall\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\ninterface InputContainerProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(\n  ({ children, css: cssProp, ...rest }, ref) => (\n    <InputContext.Provider value={{}}>\n      <StyledInputContainer css={css.raw(inputCss, cssProp)} {...rest} ref={ref}>\n        {children}\n      </StyledInputContainer>\n    </InputContext.Provider>\n  ),\n);\n\nconst baseInputCss = css.raw({\n  width: \"100%\",\n  color: \"text.default\",\n  outline: \"none\",\n  background: \"none\",\n  border: \"0\",\n  _disabled: {\n    cursor: \"not-allowed\",\n  },\n  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.\n  _autofill: {\n    transition: \"background-color 600000s 0s, color 600000s 0s\",\n  },\n  _focus: {\n    appearance: \"none\",\n  },\n  _placeholder: {\n    color: \"text.subtle\",\n  },\n});\n\nconst baseTextAreaCss = css.raw({\n  padding: \"xsmall\",\n  minHeight: \"xxlarge\",\n  height: \"xxlarge\",\n  resize: \"none\",\n  overflowY: \"hidden\",\n});\n\nconst StyledInput = styled(ark.input, {}, { baseComponent: true });\n\nconst inputRecipe = cva({\n  defaultVariants: {\n    componentSize: \"medium\",\n  },\n  variants: {\n    componentSize: {\n      small: {\n        paddingBlock: \"4xsmall\",\n        paddingInline: \"xsmall\",\n      },\n      medium: {\n        minHeight: \"xxlarge\",\n        padding: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype InputVariantProps = NonNullable<RecipeVariantProps<typeof inputRecipe>>;\n\nexport interface InputProps extends HTMLArkProps<\"input\">, StyledProps, InputVariantProps {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({ css: cssProp, componentSize, ...props }, ref) => {\n  const context = useContext(InputContext);\n  return (\n    <StyledInput\n      css={css.raw(inputRecipe.raw({ componentSize }), baseInputCss, context ? undefined : inputCss, cssProp)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nexport const FieldInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Field.Input asChild {...props} ref={ref}>\n    <Input />\n  </Field.Input>\n));\n\ninterface TextAreaProps extends HTMLArkProps<\"textarea\">, StyledProps {\n  autoResize?: boolean;\n}\n\nconst StyledTextArea = styled(ark.textarea, {}, { baseComponent: true });\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ css: cssProp, autoResize = true, ...props }, ref) => {\n    const context = useContext(InputContext);\n    const localRef = useRef<HTMLTextAreaElement>(null);\n\n    // Automatically resize a textarea based on its content\n    const resize = useCallback(() => {\n      if (!localRef.current) return;\n      localRef.current.style.height = \"0\";\n      // TODO: Figure out if we need to add the 3 extra pixels, maybe related to scroll?\n      localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;\n    }, []);\n\n    useEffect(() => {\n      if (!autoResize) return;\n      window.addEventListener(\"input\", resize);\n      window.addEventListener(\"resize\", resize);\n      resize();\n      return () => {\n        window.removeEventListener(\"input\", resize);\n        window.removeEventListener(\"resize\", resize);\n      };\n    }, [resize, autoResize]);\n\n    return (\n      <StyledTextArea\n        css={css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp)}\n        ref={composeRefs(ref, localRef)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const FieldTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Field.Textarea asChild {...props} ref={ref}>\n    <TextArea />\n  </Field.Textarea>\n));\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["css","ark","Field"],"sources":["../src/Input.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 { Field } from \"@ark-ui/react/field\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { composeRefs } from \"@ndla/util\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from \"react\";\n\ninterface InputContextType {}\n\nconst InputContext = createContext<InputContextType | undefined>(undefined);\n\nconst inputCss = css.raw({\n  boxShadowColor: \"stroke.subtle\",\n  boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n  background: \"background.default\",\n  borderRadius: \"xsmall\",\n  _ariaInvalid: {\n    boxShadowColor: \"stroke.error\",\n    _hover: {\n      boxShadowColor: \"stroke.error\",\n    },\n    _focusWithin: {\n      boxShadowColor: \"stroke.error\",\n      _hover: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n  },\n  _hover: {\n    boxShadowColor: \"stroke.hover\",\n  },\n  _focusWithin: {\n    boxShadow: \"inset 0 0 0 2px var(--shadow-color)\",\n    boxShadowColor: \"stroke.default\",\n    _hover: {\n      boxShadowColor: \"stroke.default\",\n    },\n  },\n  \"&:disabled, &:has(:disabled)\": {\n    boxShadowColor: \"stroke.subtle\",\n    _hover: {\n      boxShadowColor: \"stroke.subtle\",\n    },\n  },\n});\n\nconst StyledInputContainer = styled(\n  ark.div,\n  {\n    base: {\n      width: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      \"& svg\": {\n        width: \"medium\",\n        height: \"medium\",\n      },\n      \"&:not(:has(input:first-child,textarea:first-child))\": {\n        paddingInlineStart: \"xsmall\",\n      },\n      \"&:not(:has(input:last-child,textarea:last-child))\": {\n        paddingInlineEnd: \"xsmall\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\ninterface InputContainerProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(\n  ({ children, css: cssProp, ...rest }, ref) => (\n    <InputContext.Provider value={{}}>\n      <StyledInputContainer css={css.raw(inputCss, cssProp)} {...rest} ref={ref}>\n        {children}\n      </StyledInputContainer>\n    </InputContext.Provider>\n  ),\n);\n\nconst baseInputCss = css.raw({\n  width: \"100%\",\n  color: \"text.default\",\n  outline: \"none\",\n  background: \"none\",\n  border: \"0\",\n  _disabled: {\n    cursor: \"not-allowed\",\n  },\n  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.\n  _autofill: {\n    transition: \"background-color 600000s 0s, color 600000s 0s\",\n  },\n  _focus: {\n    appearance: \"none\",\n  },\n  _placeholder: {\n    color: \"text.subtle\",\n  },\n});\n\nconst baseTextAreaCss = css.raw({\n  padding: \"xsmall\",\n  minHeight: \"xxlarge\",\n  height: \"xxlarge\",\n  resize: \"none\",\n  overflowY: \"hidden\",\n});\n\nconst StyledInput = styled(ark.input, {}, { baseComponent: true });\n\nconst inputRecipe = cva({\n  defaultVariants: {\n    componentSize: \"medium\",\n  },\n  variants: {\n    componentSize: {\n      small: {\n        paddingBlock: \"4xsmall\",\n        paddingInline: \"xsmall\",\n      },\n      medium: {\n        minHeight: \"xxlarge\",\n        padding: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype InputVariantProps = NonNullable<RecipeVariantProps<typeof inputRecipe>>;\n\nexport interface InputProps extends HTMLArkProps<\"input\">, StyledProps, InputVariantProps {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({ css: cssProp, componentSize, ...props }, ref) => {\n  const context = useContext(InputContext);\n  return (\n    <StyledInput\n      css={css.raw(inputRecipe.raw({ componentSize }), baseInputCss, context ? undefined : inputCss, cssProp)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nexport const FieldInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Field.Input asChild {...props} ref={ref}>\n    <Input />\n  </Field.Input>\n));\n\ninterface TextAreaProps extends HTMLArkProps<\"textarea\">, StyledProps {\n  autoResize?: boolean;\n}\n\nconst StyledTextArea = styled(ark.textarea, {}, { baseComponent: true });\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ css: cssProp, autoResize = true, ...props }, ref) => {\n    const context = useContext(InputContext);\n    const localRef = useRef<HTMLTextAreaElement>(null);\n\n    // Automatically resize a textarea based on its content\n    const resize = useCallback(() => {\n      if (!localRef.current) return;\n      localRef.current.style.height = \"0\";\n      // TODO: Figure out if we need to add the 3 extra pixels, maybe related to scroll?\n      localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;\n    }, []);\n\n    useEffect(() => {\n      if (!autoResize) return;\n      window.addEventListener(\"input\", resize);\n      window.addEventListener(\"resize\", resize);\n      resize();\n      return () => {\n        window.removeEventListener(\"input\", resize);\n        window.removeEventListener(\"resize\", resize);\n      };\n    }, [resize, autoResize]);\n\n    return (\n      <StyledTextArea\n        css={css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp)}\n        ref={composeRefs(ref, localRef)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const FieldTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Field.Textarea asChild {...props} ref={ref}>\n    <TextArea />\n  </Field.Textarea>\n));\n"],"mappings":"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"}

package/lib/Label.d.ts

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

package/lib/Label.js

@@ -1,8 +1,10 @@
-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");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/Label.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -11,7 +13,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledLegend = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.legend, { base: {
+const StyledLegend = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.legend, { base: {
 	float: "left",
 	width: "inherit",
 	_disabled: { color: "text.subtle" }
@@ -26,13 +28,13 @@ const Legend = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight =
 	...rest,
 	ref
 }));
-const FieldsetLegend = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Fieldset.Legend, {
+const FieldsetLegend = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_fieldset.Fieldset.Legend, {
 	asChild: true,
 	...props,
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, { children })
 }));
-const StyledLabel = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.label, { base: {
+const StyledLabel = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.label, { base: {
 	display: "inline-block",
 	_disabled: { color: "text.subtle" }
 } }, { baseComponent: true });
@@ -46,7 +48,7 @@ const Label = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight =
 	...rest,
 	ref
 }));
-const FieldLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Field.Label, {
+const FieldLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.Label, {
 	asChild: true,
 	...props,
 	ref,

package/lib/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["ark","css","Fieldset","Field"],"sources":["../src/Label.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, type HTMLArkProps, ark } 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 StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,gBAAA,GAAA,wBAAA,QACJA,cAAAA,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,cAAD;CAAc,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAExG;AAIA,MAAa,kBAAA,GAAA,MAAA,aAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAS,SAAiB,CAAA;AACX,CAAA,CAClB;AAED,MAAM,eAAA,GAAA,wBAAA,QACJF,cAAAA,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAEvG;AAEA,MAAa,cAAA,GAAA,MAAA,aAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,iBAAA,GAAA,kBAAA,KAACE,cAAAA,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAQ,SAAgB,CAAA;AACb,CAAA,CACd"}
+{"version":3,"file":"Label.js","names":["ark","css","Fieldset","Field"],"sources":["../src/Label.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 { 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 StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,gBAAA,GAAA,wBAAA,QACJA,sBAAAA,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,cAAD;CAAc,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAExG;AAIA,MAAa,kBAAA,GAAA,MAAA,aAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAS,SAAiB,CAAA;AACX,CAAA,CAClB;AAED,MAAM,eAAA,GAAA,wBAAA,QACJF,sBAAAA,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAEvG;AAEA,MAAa,cAAA,GAAA,MAAA,aAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAQ,SAAgB,CAAA;AACb,CAAA,CACd"}

package/lib/Layout/PageContainer.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";
 import { type PageContentVariantProps } from "./PageContent";
 declare const pageContainerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{

package/lib/Layout/PageContainer.js

@@ -1,7 +1,7 @@
 const require_PageContent = require("./PageContent.js");
-require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let react_jsx_runtime = require("react/jsx-runtime");
+require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Layout/PageContainer.tsx
 /**