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

package/lib/Layout/PageContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.js","names":["PageContent","css"],"sources":["../../src/Layout/PageContainer.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 } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { PageContent, type PageContentVariantProps } from \"./PageContent\";\n\nconst pageContainerRecipe = cva({\n  defaultVariants: {\n    padding: \"medium\",\n  },\n  variants: {\n    padding: {\n      none: {},\n      small: {\n        paddingBlockStart: \"medium\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      medium: {\n        paddingBlockStart: \"xxlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      large: {\n        paddingBlockStart: \"4xlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n});\n\nexport type PageContainerVariantProps = NonNullable<RecipeVariantProps<typeof pageContainerRecipe>>;\n\nexport interface PageContainerProps\n  extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps, PageContainerVariantProps {}\n\nexport const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ padding, css: cssProp, ...props }, ref) => (\n    <PageContent css={css.raw(pageContainerRecipe.raw({ padding }), cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAA,GAAA,wBAAA,KAA0B;CAC9B,iBAAiB,EACf,SAAS,SACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;EACA,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;EACnB;EACA,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;CACF,EACF;AACF,CAAC;AAOD,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpG"}
+{"version":3,"file":"PageContainer.js","names":["PageContent","css"],"sources":["../../src/Layout/PageContainer.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 } from \"@ark-ui/react/factory\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { PageContent, type PageContentVariantProps } from \"./PageContent\";\n\nconst pageContainerRecipe = cva({\n  defaultVariants: {\n    padding: \"medium\",\n  },\n  variants: {\n    padding: {\n      none: {},\n      small: {\n        paddingBlockStart: \"medium\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      medium: {\n        paddingBlockStart: \"xxlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      large: {\n        paddingBlockStart: \"4xlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n});\n\nexport type PageContainerVariantProps = NonNullable<RecipeVariantProps<typeof pageContainerRecipe>>;\n\nexport interface PageContainerProps\n  extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps, PageContainerVariantProps {}\n\nexport const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ padding, css: cssProp, ...props }, ref) => (\n    <PageContent css={css.raw(pageContainerRecipe.raw({ padding }), cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAA,GAAA,wBAAA,KAA0B;CAC9B,iBAAiB,EACf,SAAS,SACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;EACA,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;EACnB;EACA,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;CACF,EACF;AACF,CAAC;AAOD,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpG"}

package/lib/Layout/PageContent.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 pageRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
@@ -50,5 +50,5 @@ export type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof page
 export interface PageContentProps extends HTMLArkProps<"div">, StyledProps, PageContentVariantProps {
 }
 export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
 export {};

package/lib/Layout/PageContent.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/Layout/PageContent.tsx
 /**
@@ -58,7 +58,7 @@ const pageRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	}
 });
-const StyledPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const PageContent = (0, react.forwardRef)(({ variant, gutters, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPageContent, {
 	css: _ndla_styled_system_css.css.raw(pageRecipe.raw({
 		variant,
@@ -67,7 +67,7 @@ const PageContent = (0, react.forwardRef)(({ variant, gutters, css: cssProp, ...
 	ref,
 	...props
 }));
-const BleedPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, { base: { "& ": {
+const BleedPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: { "& ": {
 	width: "100%",
 	gridColumnStart: "1",
 	gridColumnEnd: "-1"

package/lib/Layout/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","names":["ark","css"],"sources":["../../src/Layout/PageContent.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 pageRecipe = cva({\n  base: {\n    display: \"grid\",\n    transitionProperty: \"all\",\n    transitionDuration: \"default\",\n    transitionTimingFunction: \"default\",\n    alignContent: \"start\",\n    /**\n     * var(--size) is the max width of the content\n     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).\n     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.\n     */\n    gridColumnGap: \"var(--gutter, 0)\",\n    gridTemplateColumns: \"1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr\",\n    \"& > *\": {\n      gridColumnStart: \"2\",\n      gridColumnEnd: \"2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"page\",\n    gutters: \"always\",\n  },\n  variants: {\n    variant: {\n      content: {\n        \"--size\": \"sizes.surface.contentMax\",\n      },\n      article: {\n        \"--size\": \"sizes.surface.articleMax\",\n      },\n      page: {\n        \"--size\": \"sizes.surface.pageMax\",\n      },\n      wide: {\n        \"--size\": \"sizes.surface.wideMax\",\n      },\n    },\n    gutters: {\n      never: {\n        \"--gutter\": \"0px\",\n      },\n      mobileUp: {\n        \"--gutter\": \"0px\",\n        mobileWide: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      tabletUp: {\n        \"--gutter\": \"0px\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      always: {\n        \"--gutter\": \"spacing.small\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledPageContent = styled(ark.div, {}, { baseComponent: true });\n\nexport type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof pageRecipe>>;\n\nexport interface PageContentProps extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps {}\n\nexport const PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ variant, gutters, css: cssProp, ...props }, ref) => (\n    <StyledPageContent css={css.raw(pageRecipe.raw({ variant, gutters }), cssProp)} ref={ref} {...props} />\n  ),\n);\n\nexport const BleedPageContent = styled(\n  ark.div,\n  {\n    base: {\n      \"& \": {\n        width: \"100%\",\n        gridColumnStart: \"1\",\n        gridColumnEnd: \"-1\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,cAAA,GAAA,wBAAA,KAAiB;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;;;;;;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;EACjB;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,2BACZ;GACA,SAAS,EACP,UAAU,2BACZ;GACA,MAAM,EACJ,UAAU,wBACZ;GACA,MAAM,EACJ,UAAU,wBACZ;EACF;EACA,SAAS;GACP,OAAO,EACL,YAAY,MACd;GACA,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,iBACd;GACF;GACA,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;GACA,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;EACF;CACF;AACF,CAAC;AAED,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAMrE,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,iBAAA,GAAA,kBAAA,KAAC,mBAAD;CAAmB,KAAKC,wBAAAA,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;CAAQ,CAAC,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAE1G;AAEA,MAAa,oBAAA,GAAA,wBAAA,QACXD,cAAAA,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;AACjB,EACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}
+{"version":3,"file":"PageContent.js","names":["ark","css"],"sources":["../../src/Layout/PageContent.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 pageRecipe = cva({\n  base: {\n    display: \"grid\",\n    transitionProperty: \"all\",\n    transitionDuration: \"default\",\n    transitionTimingFunction: \"default\",\n    alignContent: \"start\",\n    /**\n     * var(--size) is the max width of the content\n     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).\n     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.\n     */\n    gridColumnGap: \"var(--gutter, 0)\",\n    gridTemplateColumns: \"1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr\",\n    \"& > *\": {\n      gridColumnStart: \"2\",\n      gridColumnEnd: \"2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"page\",\n    gutters: \"always\",\n  },\n  variants: {\n    variant: {\n      content: {\n        \"--size\": \"sizes.surface.contentMax\",\n      },\n      article: {\n        \"--size\": \"sizes.surface.articleMax\",\n      },\n      page: {\n        \"--size\": \"sizes.surface.pageMax\",\n      },\n      wide: {\n        \"--size\": \"sizes.surface.wideMax\",\n      },\n    },\n    gutters: {\n      never: {\n        \"--gutter\": \"0px\",\n      },\n      mobileUp: {\n        \"--gutter\": \"0px\",\n        mobileWide: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      tabletUp: {\n        \"--gutter\": \"0px\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      always: {\n        \"--gutter\": \"spacing.small\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledPageContent = styled(ark.div, {}, { baseComponent: true });\n\nexport type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof pageRecipe>>;\n\nexport interface PageContentProps extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps {}\n\nexport const PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ variant, gutters, css: cssProp, ...props }, ref) => (\n    <StyledPageContent css={css.raw(pageRecipe.raw({ variant, gutters }), cssProp)} ref={ref} {...props} />\n  ),\n);\n\nexport const BleedPageContent = styled(\n  ark.div,\n  {\n    base: {\n      \"& \": {\n        width: \"100%\",\n        gridColumnStart: \"1\",\n        gridColumnEnd: \"-1\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,cAAA,GAAA,wBAAA,KAAiB;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;;;;;;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;EACjB;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,2BACZ;GACA,SAAS,EACP,UAAU,2BACZ;GACA,MAAM,EACJ,UAAU,wBACZ;GACA,MAAM,EACJ,UAAU,wBACZ;EACF;EACA,SAAS;GACP,OAAO,EACL,YAAY,MACd;GACA,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,iBACd;GACF;GACA,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;GACA,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;EACF;CACF;AACF,CAAC;AAED,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,sBAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAMrE,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,iBAAA,GAAA,kBAAA,KAAC,mBAAD;CAAmB,KAAKC,wBAAAA,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;CAAQ,CAAC,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAE1G;AAEA,MAAa,oBAAA,GAAA,wBAAA,QACXD,sBAAAA,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;AACjB,EACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}

package/lib/ListItem/ListItem.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 ImageProps } from "../Image";
 import { type TextProps } from "../Text";
@@ -38,7 +38,7 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
 export type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;
 export interface ListItemProps extends HTMLArkProps<"div">, StyledProps, ListItemVariantProps {
 }
-export declare const ListItemRoot: 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" | "content" | "title" | "image", {
+export declare const ListItemRoot: 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" | "content" | "title" | "image", {
     nonInteractive: {
         false: {
             root: {
@@ -67,6 +67,6 @@ export declare const ListItemRoot: import("@ndla/styled-system/jsx").StyleContex
 interface ListItemHeadingProps extends Omit<HTMLArkProps<"p">, "color">, TextProps {
 }
 export declare const ListItemHeading: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<ListItemHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>>;
-export declare const ListItemContent: 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 ListItemContent: 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 ListItemImage: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 export {};

package/lib/ListItem/ListItem.js

@@ -1,9 +1,9 @@
 const require_Image = require("../Image.js");
 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/ListItem/ListItem.tsx
 /**
@@ -77,14 +77,14 @@ const listItemRecipe = (0, _ndla_styled_system_css.sva)({
 	} } }
 });
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)(listItemRecipe);
-const ListItemRoot = withProvider(_ark_ui_react.ark.div, "root", { baseComponent: true });
+const ListItemRoot = withProvider(_ark_ui_react_factory.ark.div, "root", { baseComponent: true });
 const ListItemHeading = withContext((0, react.forwardRef)(({ textStyle = "label.medium", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
 	textStyle,
 	fontWeight,
 	...props,
 	ref
 })), "title");
-const ListItemContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
+const ListItemContent = withContext(_ark_ui_react_factory.ark.div, "content", { baseComponent: true });
 const InternalListItemImage = withContext(require_Image.Image, "image");
 const ListItemImage = (0, react.forwardRef)(({ variant = "rounded", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalListItemImage, {
 	variant,

package/lib/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["ark","Heading","Image"],"sources":["../../src/ListItem/ListItem.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, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image, type ImageProps } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nexport const listItemRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      minHeight: \"3xlarge\",\n      borderStyle: \"solid\",\n      borderWidth: \"1px\",\n      borderColor: \"stroke.subtle\",\n      backgroundColor: \"background.default\",\n      color: \"text.default\",\n      position: \"relative\",\n      display: \"flex\",\n      gap: \"small\",\n      alignItems: \"center\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xxsmall\",\n      transitionProperty: \"background-color, border-color, color\",\n      transitionDuration: \"superFast\",\n      transitionTimingFunction: \"ease-in-out\",\n      boxShadow: \"xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: \"xsmall\",\n      width: \"100%\",\n    },\n    image: {\n      minHeight: \"50px\",\n      maxHeight: \"50px\",\n      minWidth: \"70px\",\n      maxWidth: \"70px\",\n      objectFit: \"cover\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      false: {\n        root: {\n          _highlighted: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _hover: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _active: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.active\",\n          },\n        },\n        title: {\n          textDecoration: \"underline\",\n          _hover: {\n            textDecoration: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(listItemRecipe);\n\nexport type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;\n\nexport interface ListItemProps extends HTMLArkProps<\"div\">, StyledProps, ListItemVariantProps {}\n\nexport const ListItemRoot = withProvider(ark.div, \"root\", { baseComponent: true });\n\ninterface ListItemHeadingProps extends Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalListItemHeading = forwardRef<HTMLHeadingElement, ListItemHeadingProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const ListItemHeading = withContext(InternalListItemHeading, \"title\");\n\nexport const ListItemContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nconst InternalListItemImage = withContext(Image, \"image\");\n\nexport const ListItemImage = forwardRef<HTMLImageElement, ImageProps>(({ variant = \"rounded\", ...props }, ref) => (\n  <InternalListItemImage variant={variant} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,kBAAA,GAAA,wBAAA,KAAqB;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;EACT;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;EACb;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;GACnB;GACA,QAAQ;IACN,aAAa;IACb,iBAAiB;GACnB;GACA,SAAS;IACP,aAAa;IACb,iBAAiB;GACnB;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;CACF,EACF,EACF;AACF,CAAC;AAED,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,oBAAmC,cAAc;AAMvE,MAAa,eAAe,aAAaA,cAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,kBAAkB,aANzB,GAAA,MAAA,aACH,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAItC,GAAyB,OAAO;AAE3E,MAAa,kBAAkB,YAAYD,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAEtF,MAAM,wBAAwB,YAAYE,cAAAA,OAAO,OAAO;AAExD,MAAa,iBAAA,GAAA,MAAA,aAA0D,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;AAAM,CAAA,CAChE"}
+{"version":3,"file":"ListItem.js","names":["ark","Heading","Image"],"sources":["../../src/ListItem/ListItem.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, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image, type ImageProps } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nexport const listItemRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      minHeight: \"3xlarge\",\n      borderStyle: \"solid\",\n      borderWidth: \"1px\",\n      borderColor: \"stroke.subtle\",\n      backgroundColor: \"background.default\",\n      color: \"text.default\",\n      position: \"relative\",\n      display: \"flex\",\n      gap: \"small\",\n      alignItems: \"center\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xxsmall\",\n      transitionProperty: \"background-color, border-color, color\",\n      transitionDuration: \"superFast\",\n      transitionTimingFunction: \"ease-in-out\",\n      boxShadow: \"xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: \"xsmall\",\n      width: \"100%\",\n    },\n    image: {\n      minHeight: \"50px\",\n      maxHeight: \"50px\",\n      minWidth: \"70px\",\n      maxWidth: \"70px\",\n      objectFit: \"cover\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      false: {\n        root: {\n          _highlighted: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _hover: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _active: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.active\",\n          },\n        },\n        title: {\n          textDecoration: \"underline\",\n          _hover: {\n            textDecoration: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(listItemRecipe);\n\nexport type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;\n\nexport interface ListItemProps extends HTMLArkProps<\"div\">, StyledProps, ListItemVariantProps {}\n\nexport const ListItemRoot = withProvider(ark.div, \"root\", { baseComponent: true });\n\ninterface ListItemHeadingProps extends Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalListItemHeading = forwardRef<HTMLHeadingElement, ListItemHeadingProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const ListItemHeading = withContext(InternalListItemHeading, \"title\");\n\nexport const ListItemContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nconst InternalListItemImage = withContext(Image, \"image\");\n\nexport const ListItemImage = forwardRef<HTMLImageElement, ImageProps>(({ variant = \"rounded\", ...props }, ref) => (\n  <InternalListItemImage variant={variant} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,kBAAA,GAAA,wBAAA,KAAqB;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;EACT;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;EACb;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;GACnB;GACA,QAAQ;IACN,aAAa;IACb,iBAAiB;GACnB;GACA,SAAS;IACP,aAAa;IACb,iBAAiB;GACnB;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;CACF,EACF,EACF;AACF,CAAC;AAED,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,oBAAmC,cAAc;AAMvE,MAAa,eAAe,aAAaA,sBAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,kBAAkB,aANzB,GAAA,MAAA,aACH,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAItC,GAAyB,OAAO;AAE3E,MAAa,kBAAkB,YAAYD,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAEtF,MAAM,wBAAwB,YAAYE,cAAAA,OAAO,OAAO;AAExD,MAAa,iBAAA,GAAA,MAAA,aAA0D,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;AAAM,CAAA,CAChE"}

package/lib/Menu.d.ts

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

package/lib/Menu.js

@@ -1,9 +1,9 @@
 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 react = require("react");
+let _ark_ui_react_menu = require("@ark-ui/react/menu");
 //#region src/Menu.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -65,7 +65,7 @@ const itemCva = (0, _ndla_styled_system_css.cva)({
 	} }
 });
 const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.menuAnatomy.keys(),
+	slots: _ark_ui_react_menu.menuAnatomy.keys(),
 	base: {
 		item: itemStyle,
 		triggerItem: itemStyle,
@@ -99,18 +99,18 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
 		positioner: { zIndex: "dropdown" }
 	}
 }));
-const InternalMenuRoot = withRootProvider(_ark_ui_react.Menu.Root);
+const InternalMenuRoot = withRootProvider(_ark_ui_react_menu.Menu.Root);
 const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const MenuContentStandalone = withContext(_ark_ui_react.Menu.Content, "content", { baseComponent: true });
+const MenuContentStandalone = withContext(_ark_ui_react_menu.Menu.Content, "content", { baseComponent: true });
 const MenuContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuContentStandalone, {
 	ref,
 	...props
 }) }));
-const InternalMenuItemGroupLabel = withContext(_ark_ui_react.Menu.ItemGroupLabel, "itemGroupLabel");
+const InternalMenuItemGroupLabel = withContext(_ark_ui_react_menu.Menu.ItemGroupLabel, "itemGroupLabel");
 const MenuItemGroupLabel = ({ textStyle = "label.medium", fontWeight = "bold", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuItemGroupLabel, {
 	...props,
 	asChild: true,
@@ -120,23 +120,23 @@ const MenuItemGroupLabel = ({ textStyle = "label.medium", fontWeight = "bold", c
 		children
 	})
 });
-const MenuItemGroup = withContext(_ark_ui_react.Menu.ItemGroup, "itemGroup", { baseComponent: true });
-const InternalMenuItem = withContext(_ark_ui_react.Menu.Item, "item", { baseComponent: true });
+const MenuItemGroup = withContext(_ark_ui_react_menu.Menu.ItemGroup, "itemGroup", { baseComponent: true });
+const InternalMenuItem = withContext(_ark_ui_react_menu.Menu.Item, "item", { baseComponent: true });
 const MenuItem = (0, react.forwardRef)(({ css: cssProp = {}, variant, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuItem, {
 	css: [itemCva.raw({ variant }), ...Array.isArray(cssProp) ? cssProp : [cssProp]],
 	...props,
 	ref
 }));
-const MenuPositioner = withContext(_ark_ui_react.Menu.Positioner, "positioner", { baseComponent: true });
-const InternalMenuTriggerItem = withContext(_ark_ui_react.Menu.TriggerItem, "triggerItem", { baseComponent: true });
+const MenuPositioner = withContext(_ark_ui_react_menu.Menu.Positioner, "positioner", { baseComponent: true });
+const InternalMenuTriggerItem = withContext(_ark_ui_react_menu.Menu.TriggerItem, "triggerItem", { baseComponent: true });
 const MenuTriggerItem = (0, react.forwardRef)(({ css: cssProp = {}, variant, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuTriggerItem, {
 	css: [itemCva.raw({ variant }), ...Array.isArray(cssProp) ? cssProp : [cssProp]],
 	...props,
 	ref
 }));
-const MenuTrigger = withContext(_ark_ui_react.Menu.Trigger, "trigger", { baseComponent: true });
-const MenuSeparator = withContext(_ark_ui_react.Menu.Separator, "separator", { baseComponent: true });
-const MenuItemText = withContext(_ark_ui_react.Menu.ItemText, "itemText", { baseComponent: true });
+const MenuTrigger = withContext(_ark_ui_react_menu.Menu.Trigger, "trigger", { baseComponent: true });
+const MenuSeparator = withContext(_ark_ui_react_menu.Menu.Separator, "separator", { baseComponent: true });
+const MenuItemText = withContext(_ark_ui_react_menu.Menu.ItemText, "itemText", { baseComponent: true });
 //#endregion
 exports.MenuContent = MenuContent;
 exports.MenuContentStandalone = MenuContentStandalone;

package/lib/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["css","menuAnatomy","Menu","Text"],"sources":["../src/Menu.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 { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderRadius: \"xsmall\",\n  cursor: \"pointer\",\n  textStyle: \"label.medium\",\n  paddingBlock: \"4xsmall\",\n  paddingInline: \"xsmall\",\n  gap: \"xsmall\",\n  transitionDuration: \"fast\",\n  transitionProperty: \"background, color\",\n  transitionTimingFunction: \"default\",\n  outline: \"none\",\n  _hover: {\n    textDecoration: \"underline\",\n  },\n  _highlighted: {\n    textDecoration: \"underline\",\n  },\n  _disabled: {\n    color: \"text.disabled\",\n    cursor: \"not-allowed\",\n    \"& svg\": {\n      color: \"stroke.disabled\",\n    },\n    _hover: {\n      color: \"text.disabled\",\n      textDecoration: \"none\",\n      background: \"surface.default\",\n      \"& svg\": {\n        color: \"stroke.disabled\",\n      },\n    },\n  },\n});\n\nconst itemCva = cva({\n  defaultVariants: {\n    variant: \"action\",\n  },\n  variants: {\n    variant: {\n      action: {\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n        _active: {\n          background: \"surface.active\",\n        },\n      },\n      destructive: {\n        color: \"text.error\",\n        \"& svg\": {\n          color: \"icon.error\",\n        },\n        _hover: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.dangerSubtle.active\",\n        },\n      },\n    },\n  },\n});\n\nconst menuRecipe = sva({\n  slots: menuAnatomy.keys(),\n  base: {\n    item: itemStyle,\n    triggerItem: itemStyle,\n    content: {\n      color: \"text.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      width: \"fit-content\",\n      minWidth: \"surface.xxsmall\",\n      padding: \"3xsmall\",\n      gap: \"3xsmall\",\n      background: \"surface.default\",\n      boxShadow: \"small\",\n      borderRadius: \"xsmall\",\n      outline: \"none\",\n      zIndex: \"dropdown\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    positioner: {\n      zIndex: \"dropdown\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n  <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n  <MenuPositioner>\n    <MenuContentStandalone ref={ref} {...props} />\n  </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n  extends Omit<Menu.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: MenuItemGroupLabelProps) => (\n  <InternalMenuItemGroupLabel {...props} asChild>\n    <Text textStyle={textStyle} fontWeight={fontWeight}>\n      {children}\n    </Text>\n  </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n  extends Menu.ItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n  <InternalMenuItem\n    css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n    {...props}\n    ref={ref}\n  />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n  extends Menu.TriggerItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n  ({ css: cssProp = {}, variant, ...props }, ref) => (\n    <InternalMenuTriggerItem\n      css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":"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"}
+{"version":3,"file":"Menu.js","names":["css","menuAnatomy","Menu","Text"],"sources":["../src/Menu.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 { Menu, menuAnatomy } from \"@ark-ui/react/menu\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderRadius: \"xsmall\",\n  cursor: \"pointer\",\n  textStyle: \"label.medium\",\n  paddingBlock: \"4xsmall\",\n  paddingInline: \"xsmall\",\n  gap: \"xsmall\",\n  transitionDuration: \"fast\",\n  transitionProperty: \"background, color\",\n  transitionTimingFunction: \"default\",\n  outline: \"none\",\n  _hover: {\n    textDecoration: \"underline\",\n  },\n  _highlighted: {\n    textDecoration: \"underline\",\n  },\n  _disabled: {\n    color: \"text.disabled\",\n    cursor: \"not-allowed\",\n    \"& svg\": {\n      color: \"stroke.disabled\",\n    },\n    _hover: {\n      color: \"text.disabled\",\n      textDecoration: \"none\",\n      background: \"surface.default\",\n      \"& svg\": {\n        color: \"stroke.disabled\",\n      },\n    },\n  },\n});\n\nconst itemCva = cva({\n  defaultVariants: {\n    variant: \"action\",\n  },\n  variants: {\n    variant: {\n      action: {\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n        _active: {\n          background: \"surface.active\",\n        },\n      },\n      destructive: {\n        color: \"text.error\",\n        \"& svg\": {\n          color: \"icon.error\",\n        },\n        _hover: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.dangerSubtle.active\",\n        },\n      },\n    },\n  },\n});\n\nconst menuRecipe = sva({\n  slots: menuAnatomy.keys(),\n  base: {\n    item: itemStyle,\n    triggerItem: itemStyle,\n    content: {\n      color: \"text.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      width: \"fit-content\",\n      minWidth: \"surface.xxsmall\",\n      padding: \"3xsmall\",\n      gap: \"3xsmall\",\n      background: \"surface.default\",\n      boxShadow: \"small\",\n      borderRadius: \"xsmall\",\n      outline: \"none\",\n      zIndex: \"dropdown\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    positioner: {\n      zIndex: \"dropdown\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n  <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n  <MenuPositioner>\n    <MenuContentStandalone ref={ref} {...props} />\n  </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n  extends Omit<Menu.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: MenuItemGroupLabelProps) => (\n  <InternalMenuItemGroupLabel {...props} asChild>\n    <Text textStyle={textStyle} fontWeight={fontWeight}>\n      {children}\n    </Text>\n  </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n  extends Menu.ItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n  <InternalMenuItem\n    css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n    {...props}\n    ref={ref}\n  />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n  extends Menu.TriggerItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n  ({ css: cssProp = {}, variant, ...props }, ref) => (\n    <InternalMenuTriggerItem\n      css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":"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"}

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

package/lib/MessageBox.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/MessageBox.tsx
 /**
@@ -40,7 +40,7 @@ const messageBoxRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	} }
 });
-const StyledMessageBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledMessageBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const MessageBox = (0, react.forwardRef)(({ variant, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMessageBox, {
 	css: _ndla_styled_system_css.css.raw(messageBoxRecipe.raw({ variant }), cssProp),
 	...props,

package/lib/MessageBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.js","names":["ark","css"],"sources":["../src/MessageBox.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 messageBoxRecipe = cva({\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    gap: \"small\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n  variants: {\n    variant: {\n      info: {\n        background: \"surface.infoSubtle\",\n        borderColor: \"stroke.subtle\",\n      },\n      warning: {\n        background: \"surface.warningSubtle\",\n        borderColor: \"stroke.warning\",\n      },\n      success: {\n        background: \"surface.successSubtle\",\n        borderColor: \"stroke.success\",\n      },\n      error: {\n        background: \"surface.errorSubtle\",\n        borderColor: \"stroke.error\",\n      },\n    },\n  },\n});\n\nexport type MessageBoxVariantProps = NonNullable<RecipeVariantProps<typeof messageBoxRecipe>>;\n\nexport interface MessageBoxProps extends HTMLArkProps<\"div\">, StyledProps, MessageBoxVariantProps {}\n\nconst StyledMessageBox = styled(ark.div, {}, { baseComponent: true });\n\nexport const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledMessageBox css={css.raw(messageBoxRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,oBAAA,GAAA,wBAAA,KAAuB;CAC3B,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,QAAQ;EACR,cAAc;CAChB;CACA,iBAAiB,EACf,SAAS,OACX;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,OAAO;GACL,YAAY;GACZ,aAAa;EACf;CACF,EACF;AACF,CAAC;AAMD,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,cAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAa,cAAA,GAAA,MAAA,aAA0D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,iBAAA,GAAA,kBAAA,KAAC,kBAAD;CAAkB,KAAKC,wBAAAA,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}
+{"version":3,"file":"MessageBox.js","names":["ark","css"],"sources":["../src/MessageBox.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 messageBoxRecipe = cva({\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    gap: \"small\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n  variants: {\n    variant: {\n      info: {\n        background: \"surface.infoSubtle\",\n        borderColor: \"stroke.subtle\",\n      },\n      warning: {\n        background: \"surface.warningSubtle\",\n        borderColor: \"stroke.warning\",\n      },\n      success: {\n        background: \"surface.successSubtle\",\n        borderColor: \"stroke.success\",\n      },\n      error: {\n        background: \"surface.errorSubtle\",\n        borderColor: \"stroke.error\",\n      },\n    },\n  },\n});\n\nexport type MessageBoxVariantProps = NonNullable<RecipeVariantProps<typeof messageBoxRecipe>>;\n\nexport interface MessageBoxProps extends HTMLArkProps<\"div\">, StyledProps, MessageBoxVariantProps {}\n\nconst StyledMessageBox = styled(ark.div, {}, { baseComponent: true });\n\nexport const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledMessageBox css={css.raw(messageBoxRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,oBAAA,GAAA,wBAAA,KAAuB;CAC3B,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,QAAQ;EACR,cAAc;CAChB;CACA,iBAAiB,EACf,SAAS,OACX;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,OAAO;GACL,YAAY;GACZ,aAAa;EACf;CACF,EACF;AACF,CAAC;AAMD,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,sBAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAa,cAAA,GAAA,MAAA,aAA0D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,iBAAA,GAAA,kBAAA,KAAC,kBAAD;CAAkB,KAAKC,wBAAAA,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}

package/lib/Pagination.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Pagination } from "@ark-ui/react";
+import { Pagination } from "@ark-ui/react/pagination";
 import type { StyledProps } from "@ndla/styled-system/types";
 export interface PaginationRootProps extends Pagination.RootProps, StyledProps {
     translations: Pagination.RootProps["translations"];

package/lib/Pagination.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_pagination = require("@ark-ui/react/pagination");
 //#region src/Pagination.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -8,8 +9,8 @@ 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)({
-	slots: _ark_ui_react.paginationAnatomy.keys(),
+const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
+	slots: _ark_ui_react_pagination.paginationAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -23,12 +24,12 @@ const { withProvider, withContext } = (0, require("@ndla/styled-system/jsx").cre
 		}
 	}
 }));
-const PaginationRoot = withProvider(_ark_ui_react.Pagination.Root, "root", { baseComponent: true });
-const PaginationItem = withContext(_ark_ui_react.Pagination.Item, "item", { baseComponent: true });
-const PaginationEllipsis = withContext(_ark_ui_react.Pagination.Ellipsis, "ellipsis", { baseComponent: true });
-const PaginationContext = _ark_ui_react.Pagination.Context;
-const PaginationPrevTrigger = withContext(_ark_ui_react.Pagination.PrevTrigger, "prevTrigger", { baseComponent: true });
-const PaginationNextTrigger = withContext(_ark_ui_react.Pagination.NextTrigger, "nextTrigger", { baseComponent: true });
+const PaginationRoot = withProvider(_ark_ui_react_pagination.Pagination.Root, "root", { baseComponent: true });
+const PaginationItem = withContext(_ark_ui_react_pagination.Pagination.Item, "item", { baseComponent: true });
+const PaginationEllipsis = withContext(_ark_ui_react_pagination.Pagination.Ellipsis, "ellipsis", { baseComponent: true });
+const PaginationContext = _ark_ui_react_pagination.Pagination.Context;
+const PaginationPrevTrigger = withContext(_ark_ui_react_pagination.Pagination.PrevTrigger, "prevTrigger", { baseComponent: true });
+const PaginationNextTrigger = withContext(_ark_ui_react_pagination.Pagination.NextTrigger, "nextTrigger", { baseComponent: true });
 //#endregion
 exports.PaginationContext = PaginationContext;
 exports.PaginationEllipsis = PaginationEllipsis;

package/lib/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["paginationAnatomy","Pagination"],"sources":["../src/Pagination.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 { Pagination, paginationAnatomy } 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\";\n\nconst paginationRecipe = sva({\n  slots: paginationAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      gap: \"xxsmall\",\n      justifyContent: \"center\",\n    },\n    item: {\n      fontVariantNumeric: \"tabular-nums\",\n    },\n    ellipsis: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(paginationRecipe);\n\nexport interface PaginationRootProps extends Pagination.RootProps, StyledProps {\n  translations: Pagination.RootProps[\"translations\"];\n}\n\nexport const PaginationRoot = withProvider(Pagination.Root, \"root\", { baseComponent: true });\n\nexport const PaginationItem = withContext(Pagination.Item, \"item\", { baseComponent: true });\n\nexport const PaginationEllipsis = withContext(Pagination.Ellipsis, \"ellipsis\", { baseComponent: true });\n\nexport const PaginationContext = Pagination.Context;\n\nexport const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const PaginationNextTrigger = withContext(Pagination.NextTrigger, \"nextTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;AA+BA,MAAM,EAAE,cAAc,iBAAA,oCAAA,EAAA,qBAAA,GAAA,wBAAA,KAlBO;CAC3B,OAAOA,cAAAA,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,MAAM,EACJ,oBAAoB,eACtB;EACA,UAAU;GACR,SAAS;GACT,YAAY;EACd;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,iBAAiB,aAAaC,cAAAA,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,iBAAiB,YAAYA,cAAAA,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,qBAAqB,YAAYA,cAAAA,WAAW,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,oBAAoBA,cAAAA,WAAW;AAE5C,MAAa,wBAAwB,YAAYA,cAAAA,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE/G,MAAa,wBAAwB,YAAYA,cAAAA,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Pagination.js","names":["paginationAnatomy","Pagination"],"sources":["../src/Pagination.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 { Pagination, paginationAnatomy } from \"@ark-ui/react/pagination\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst paginationRecipe = sva({\n  slots: paginationAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      gap: \"xxsmall\",\n      justifyContent: \"center\",\n    },\n    item: {\n      fontVariantNumeric: \"tabular-nums\",\n    },\n    ellipsis: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(paginationRecipe);\n\nexport interface PaginationRootProps extends Pagination.RootProps, StyledProps {\n  translations: Pagination.RootProps[\"translations\"];\n}\n\nexport const PaginationRoot = withProvider(Pagination.Root, \"root\", { baseComponent: true });\n\nexport const PaginationItem = withContext(Pagination.Item, \"item\", { baseComponent: true });\n\nexport const PaginationEllipsis = withContext(Pagination.Ellipsis, \"ellipsis\", { baseComponent: true });\n\nexport const PaginationContext = Pagination.Context;\n\nexport const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const PaginationNextTrigger = withContext(Pagination.NextTrigger, \"nextTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAlBO;CAC3B,OAAOA,yBAAAA,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,MAAM,EACJ,oBAAoB,eACtB;EACA,UAAU;GACR,SAAS;GACT,YAAY;EACd;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,iBAAiB,aAAaC,yBAAAA,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,iBAAiB,YAAYA,yBAAAA,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,qBAAqB,YAAYA,yBAAAA,WAAW,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,oBAAoBA,yBAAAA,WAAW;AAE5C,MAAa,wBAAwB,YAAYA,yBAAAA,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE/G,MAAa,wBAAwB,YAAYA,yBAAAA,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}

package/lib/Popover.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Popover } from "@ark-ui/react";
+import { Popover } from "@ark-ui/react/popover";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";
@@ -30,5 +30,5 @@ interface PopoverTitleProps extends Omit<Popover.TitleProps, "color">, TextProps
 export declare const PopoverTitle: ({ textStyle, children, ...rest }: PopoverTitleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PopoverTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<Popover.TriggerProps & RefAttributes<HTMLButtonElement>>>;
 export declare const PopoverRootProvider: import("@ndla/styled-system/jsx").StyleContextRootProvider<(props: Popover.RootProviderProps) => import("react/jsx-runtime").JSX.Element, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "title" | "anchor" | "indicator" | "trigger" | "positioner" | "description" | "closeTrigger" | "arrow" | "arrowTip", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"content" | "title" | "anchor" | "indicator" | "trigger" | "positioner" | "description" | "closeTrigger" | "arrow" | "arrowTip">>>;
-export declare const usePopover: (props?: import("@ark-ui/react").UsePopoverProps) => import("@ark-ui/react").UsePopoverReturn;
+export declare const usePopover: (props?: import("@ark-ui/react/popover").UsePopoverProps) => import("@ark-ui/react/popover").UsePopoverReturn;
 export {};

package/lib/Popover.js

@@ -1,9 +1,9 @@
 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 react = require("react");
+let _ark_ui_react_popover = require("@ark-ui/react/popover");
 //#region src/Popover.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
 *
 */
 const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.popoverAnatomy.keys(),
+	slots: _ark_ui_react_popover.popoverAnatomy.keys(),
 	base: {
 		positioner: {
 			maxHeight: "inherit",
@@ -43,26 +43,26 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
 		}
 	}
 }));
-const InternalPopoverRoot = withRootProvider(_ark_ui_react.Popover.Root);
+const InternalPopoverRoot = withRootProvider(_ark_ui_react_popover.Popover.Root);
 const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalPopoverRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const PopoverAnchor = withContext(_ark_ui_react.Popover.Anchor, "anchor", { baseComponent: true });
-const PopoverArrowStandalone = withContext(_ark_ui_react.Popover.Arrow, "arrow", { baseComponent: true });
+const PopoverAnchor = withContext(_ark_ui_react_popover.Popover.Anchor, "anchor", { baseComponent: true });
+const PopoverArrowStandalone = withContext(_ark_ui_react_popover.Popover.Arrow, "arrow", { baseComponent: true });
 const PopoverArrow = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverArrowStandalone, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverArrowTip, { ...props }) });
-const PopoverArrowTip = withContext(_ark_ui_react.Popover.ArrowTip, "arrowTip", { baseComponent: true });
-const PopoverCloseTrigger = withContext(_ark_ui_react.Popover.CloseTrigger, "closeTrigger", { baseComponent: true });
-const PopoverContentStandalone = withContext(_ark_ui_react.Popover.Content, "content", { baseComponent: true });
+const PopoverArrowTip = withContext(_ark_ui_react_popover.Popover.ArrowTip, "arrowTip", { baseComponent: true });
+const PopoverCloseTrigger = withContext(_ark_ui_react_popover.Popover.CloseTrigger, "closeTrigger", { baseComponent: true });
+const PopoverContentStandalone = withContext(_ark_ui_react_popover.Popover.Content, "content", { baseComponent: true });
 const PopoverContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContentStandalone, {
 	...props,
 	ref
 }) }));
-const PopoverDescription = withContext(_ark_ui_react.Popover.Description, "description", { baseComponent: true });
-const PopoverIndicator = withContext(_ark_ui_react.Popover.Indicator, "indicator", { baseComponent: true });
-const PopoverPositioner = withContext(_ark_ui_react.Popover.Positioner, "positioner", { baseComponent: true });
-const InternalPopoverTitle = withContext(_ark_ui_react.Popover.Title, "title", { baseComponent: true });
+const PopoverDescription = withContext(_ark_ui_react_popover.Popover.Description, "description", { baseComponent: true });
+const PopoverIndicator = withContext(_ark_ui_react_popover.Popover.Indicator, "indicator", { baseComponent: true });
+const PopoverPositioner = withContext(_ark_ui_react_popover.Popover.Positioner, "positioner", { baseComponent: true });
+const InternalPopoverTitle = withContext(_ark_ui_react_popover.Popover.Title, "title", { baseComponent: true });
 const PopoverTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
 	textStyle,
 	...rest,
@@ -70,9 +70,9 @@ const PopoverTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @
 	consumeCss: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalPopoverTitle, { children })
 });
-const PopoverTrigger = withContext(_ark_ui_react.Popover.Trigger, "trigger", { baseComponent: true });
-const PopoverRootProvider = withRootProvider(_ark_ui_react.Popover.RootProvider);
-const usePopover = _ark_ui_react.usePopover;
+const PopoverTrigger = withContext(_ark_ui_react_popover.Popover.Trigger, "trigger", { baseComponent: true });
+const PopoverRootProvider = withRootProvider(_ark_ui_react_popover.Popover.RootProvider);
+const usePopover = _ark_ui_react_popover.usePopover;
 //#endregion
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;

package/lib/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["popoverAnatomy","Popover","Heading","_usePopover"],"sources":["../src/Popover.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 { Popover, popoverAnatomy, usePopover as _usePopover } 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, type RefAttributes } from \"react\";\nimport { Heading, type TextProps } from \"./Text\";\n\nconst popoverRecipe = sva({\n  slots: popoverAnatomy.keys(),\n  base: {\n    positioner: {\n      maxHeight: \"inherit\",\n      position: \"relative\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      padding: \"medium\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"xlarge\",\n      zIndex: \"popover\",\n      maxWidth: \"var(--available-width)\",\n      _open: {\n        animation: \"fade-shift-in 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    arrow: {\n      \"--arrow-size\": \"sizes.xxsmall\",\n      \"--arrow-background\": \"colors.surface.default\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(popoverRecipe);\n\nexport type PopoverRootProps = Popover.RootProps;\nconst InternalPopoverRoot = withRootProvider(Popover.Root);\n\nexport const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: PopoverRootProps) => (\n  <InternalPopoverRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const PopoverAnchor = withContext(Popover.Anchor, \"anchor\", { baseComponent: true });\n\nexport const PopoverArrowStandalone = withContext(Popover.Arrow, \"arrow\", { baseComponent: true });\n\ninterface PopoverArrowProps extends Popover.ArrowTipProps, StyledProps {}\n\nexport const PopoverArrow = (props: PopoverArrowProps) => (\n  <PopoverArrowStandalone>\n    <PopoverArrowTip {...props} />\n  </PopoverArrowStandalone>\n);\n\nexport const PopoverArrowTip = withContext(Popover.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const PopoverCloseTrigger = withContext(Popover.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const PopoverContentStandalone = withContext(Popover.Content, \"content\", { baseComponent: true });\n\ninterface PopoverContentProps extends Popover.ContentProps, StyledProps {}\n\nexport const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => (\n  <PopoverPositioner>\n    <PopoverContentStandalone {...props} ref={ref} />\n  </PopoverPositioner>\n));\n\nexport const PopoverDescription = withContext(Popover.Description, \"description\", { baseComponent: true });\n\nexport const PopoverIndicator = withContext(Popover.Indicator, \"indicator\", { baseComponent: true });\n\nexport const PopoverPositioner = withContext(Popover.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalPopoverTitle = withContext(Popover.Title, \"title\", { baseComponent: true });\n\ninterface PopoverTitleProps\n  extends Omit<Popover.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const PopoverTitle = ({ textStyle = \"title.medium\", children, ...rest }: PopoverTitleProps) => (\n  <Heading textStyle={textStyle} {...rest} asChild consumeCss>\n    <InternalPopoverTitle>{children}</InternalPopoverTitle>\n  </Heading>\n);\n\nexport const PopoverTrigger = withContext(Popover.Trigger, \"trigger\", { baseComponent: true });\n\nexport const PopoverRootProvider = withRootProvider(Popover.RootProvider);\n\nexport const usePopover = _usePopover;\n"],"mappings":";;;;;;;;;;;;;;AAmDA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KApCA;CACxB,OAAOA,cAAAA,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,WAAW;GACX,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,SAAS;GACT,YAAY;GACZ,cAAc;GACd,WAAW;GACX,QAAQ;GACR,UAAU;GACV,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;CACF;AACF,CAEyE,CAAC;AAG1E,MAAM,sBAAsB,iBAAiBC,cAAAA,QAAQ,IAAI;AAEzD,MAAa,eAAe,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACvE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAgC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGvF,MAAa,gBAAgB,YAAYA,cAAAA,QAAQ,QAAQ,UAAU,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,yBAAyB,YAAYA,cAAAA,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,gBAAgB,UAC3B,iBAAA,GAAA,kBAAA,KAAC,wBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA,EACP,CAAA;AAG1B,MAAa,kBAAkB,YAAYA,cAAAA,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,sBAAsB,YAAYA,cAAAA,QAAQ,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE5G,MAAa,2BAA2B,YAAYA,cAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,kBAAA,GAAA,MAAA,aAAkE,OAAO,QACpF,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,0BAAD;CAA0B,GAAI;CAAY;AAAM,CAAA,EAC/B,CAAA,CACpB;AAED,MAAa,qBAAqB,YAAYA,cAAAA,QAAQ,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAEzG,MAAa,mBAAmB,YAAYA,cAAAA,QAAQ,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEnG,MAAa,oBAAoB,YAAYA,cAAAA,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAM,uBAAuB,YAAYA,cAAAA,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAKxF,MAAa,gBAAgB,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACtE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAW,GAAI;CAAM,SAAA;CAAQ,YAAA;WAC/C,iBAAA,GAAA,kBAAA,KAAC,sBAAD,EAAuB,SAA+B,CAAA;AAC/C,CAAA;AAGX,MAAa,iBAAiB,YAAYD,cAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE7F,MAAa,sBAAsB,iBAAiBA,cAAAA,QAAQ,YAAY;AAExE,MAAa,aAAaE,cAAAA"}
+{"version":3,"file":"Popover.js","names":["popoverAnatomy","Popover","Heading","_usePopover"],"sources":["../src/Popover.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 { Popover, popoverAnatomy, usePopover as _usePopover } from \"@ark-ui/react/popover\";\nimport { 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 { Heading, type TextProps } from \"./Text\";\n\nconst popoverRecipe = sva({\n  slots: popoverAnatomy.keys(),\n  base: {\n    positioner: {\n      maxHeight: \"inherit\",\n      position: \"relative\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      padding: \"medium\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"xlarge\",\n      zIndex: \"popover\",\n      maxWidth: \"var(--available-width)\",\n      _open: {\n        animation: \"fade-shift-in 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    arrow: {\n      \"--arrow-size\": \"sizes.xxsmall\",\n      \"--arrow-background\": \"colors.surface.default\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(popoverRecipe);\n\nexport type PopoverRootProps = Popover.RootProps;\nconst InternalPopoverRoot = withRootProvider(Popover.Root);\n\nexport const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: PopoverRootProps) => (\n  <InternalPopoverRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const PopoverAnchor = withContext(Popover.Anchor, \"anchor\", { baseComponent: true });\n\nexport const PopoverArrowStandalone = withContext(Popover.Arrow, \"arrow\", { baseComponent: true });\n\ninterface PopoverArrowProps extends Popover.ArrowTipProps, StyledProps {}\n\nexport const PopoverArrow = (props: PopoverArrowProps) => (\n  <PopoverArrowStandalone>\n    <PopoverArrowTip {...props} />\n  </PopoverArrowStandalone>\n);\n\nexport const PopoverArrowTip = withContext(Popover.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const PopoverCloseTrigger = withContext(Popover.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const PopoverContentStandalone = withContext(Popover.Content, \"content\", { baseComponent: true });\n\ninterface PopoverContentProps extends Popover.ContentProps, StyledProps {}\n\nexport const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => (\n  <PopoverPositioner>\n    <PopoverContentStandalone {...props} ref={ref} />\n  </PopoverPositioner>\n));\n\nexport const PopoverDescription = withContext(Popover.Description, \"description\", { baseComponent: true });\n\nexport const PopoverIndicator = withContext(Popover.Indicator, \"indicator\", { baseComponent: true });\n\nexport const PopoverPositioner = withContext(Popover.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalPopoverTitle = withContext(Popover.Title, \"title\", { baseComponent: true });\n\ninterface PopoverTitleProps\n  extends Omit<Popover.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const PopoverTitle = ({ textStyle = \"title.medium\", children, ...rest }: PopoverTitleProps) => (\n  <Heading textStyle={textStyle} {...rest} asChild consumeCss>\n    <InternalPopoverTitle>{children}</InternalPopoverTitle>\n  </Heading>\n);\n\nexport const PopoverTrigger = withContext(Popover.Trigger, \"trigger\", { baseComponent: true });\n\nexport const PopoverRootProvider = withRootProvider(Popover.RootProvider);\n\nexport const usePopover = _usePopover;\n"],"mappings":";;;;;;;;;;;;;;AAmDA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KApCA;CACxB,OAAOA,sBAAAA,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,WAAW;GACX,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,SAAS;GACT,YAAY;GACZ,cAAc;GACd,WAAW;GACX,QAAQ;GACR,UAAU;GACV,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;CACF;AACF,CAEyE,CAAC;AAG1E,MAAM,sBAAsB,iBAAiBC,sBAAAA,QAAQ,IAAI;AAEzD,MAAa,eAAe,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACvE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAgC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGvF,MAAa,gBAAgB,YAAYA,sBAAAA,QAAQ,QAAQ,UAAU,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,yBAAyB,YAAYA,sBAAAA,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,gBAAgB,UAC3B,iBAAA,GAAA,kBAAA,KAAC,wBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA,EACP,CAAA;AAG1B,MAAa,kBAAkB,YAAYA,sBAAAA,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,sBAAsB,YAAYA,sBAAAA,QAAQ,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE5G,MAAa,2BAA2B,YAAYA,sBAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,kBAAA,GAAA,MAAA,aAAkE,OAAO,QACpF,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,0BAAD;CAA0B,GAAI;CAAY;AAAM,CAAA,EAC/B,CAAA,CACpB;AAED,MAAa,qBAAqB,YAAYA,sBAAAA,QAAQ,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAEzG,MAAa,mBAAmB,YAAYA,sBAAAA,QAAQ,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEnG,MAAa,oBAAoB,YAAYA,sBAAAA,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAM,uBAAuB,YAAYA,sBAAAA,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAKxF,MAAa,gBAAgB,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACtE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAW,GAAI;CAAM,SAAA;CAAQ,YAAA;WAC/C,iBAAA,GAAA,kBAAA,KAAC,sBAAD,EAAuB,SAA+B,CAAA;AAC/C,CAAA;AAGX,MAAa,iBAAiB,YAAYD,sBAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE7F,MAAa,sBAAsB,iBAAiBA,sBAAAA,QAAQ,YAAY;AAExE,MAAa,aAAaE,sBAAAA"}

package/lib/RadioGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { RadioGroup } from "@ark-ui/react";
+import { RadioGroup } from "@ark-ui/react/radio-group";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";

package/lib/RadioGroup.js

@@ -1,9 +1,10 @@
 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");
+let _ark_ui_react_radio_group = require("@ark-ui/react/radio-group");
 //#region src/RadioGroup.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,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.radioGroupAnatomy.keys(),
+	slots: _ark_ui_react_radio_group.radioGroupAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -80,12 +81,12 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const RadioGroupRoot = withProvider(_ark_ui_react.RadioGroup.Root, "root", { baseComponent: true });
-const RadioGroupIndicator = withContext(_ark_ui_react.RadioGroup.Indicator, "indicator", { baseComponent: true });
-const RadioGroupItemControl = withContext(_ark_ui_react.RadioGroup.ItemControl, "itemControl", { baseComponent: true });
-const RadioGroupItem = withContext(_ark_ui_react.RadioGroup.Item, "item", { baseComponent: true });
-const InternalRadioGroupItemText = withContext(_ark_ui_react.RadioGroup.ItemText, "itemText");
-const InnerRadioGroupItemText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.span, {}, { baseComponent: true });
+const RadioGroupRoot = withProvider(_ark_ui_react_radio_group.RadioGroup.Root, "root", { baseComponent: true });
+const RadioGroupIndicator = withContext(_ark_ui_react_radio_group.RadioGroup.Indicator, "indicator", { baseComponent: true });
+const RadioGroupItemControl = withContext(_ark_ui_react_radio_group.RadioGroup.ItemControl, "itemControl", { baseComponent: true });
+const RadioGroupItem = withContext(_ark_ui_react_radio_group.RadioGroup.Item, "item", { baseComponent: true });
+const InternalRadioGroupItemText = withContext(_ark_ui_react_radio_group.RadioGroup.ItemText, "itemText");
+const InnerRadioGroupItemText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.span, {}, { baseComponent: true });
 const RadioGroupItemText = ({ textStyle = "label.medium", children, asChild, consumeCss, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalRadioGroupItemText, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
@@ -100,8 +101,8 @@ const RadioGroupItemText = ({ textStyle = "label.medium", children, asChild, con
 		})
 	})
 });
-const InternalRadioGroupLabel = withContext(_ark_ui_react.RadioGroup.Label, "label");
-const InnerRadioGroupLabel = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const InternalRadioGroupLabel = withContext(_ark_ui_react_radio_group.RadioGroup.Label, "label");
+const InnerRadioGroupLabel = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const RadioGroupLabel = (0, react.forwardRef)(({ textStyle = "label.large", fontWeight = "bold", children, asChild, consumeCss, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalRadioGroupLabel, {
 	...props,
 	asChild: true,
@@ -117,7 +118,7 @@ const RadioGroupLabel = (0, react.forwardRef)(({ textStyle = "label.large", font
 		})
 	})
 }));
-const RadioGroupItemHiddenInput = _ark_ui_react.RadioGroup.ItemHiddenInput;
+const RadioGroupItemHiddenInput = _ark_ui_react_radio_group.RadioGroup.ItemHiddenInput;
 //#endregion
 exports.RadioGroupIndicator = RadioGroupIndicator;
 exports.RadioGroupItem = RadioGroupItem;