@ndla/primitives 0.0.16 → 0.0.18

package/lib/Checkbox.js

@@ -215,8 +215,12 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(checkboxRecipe);
-const CheckboxRoot = exports.CheckboxRoot = withProvider(_react.Checkbox.Root, "root");
-const CheckboxIndicator = exports.CheckboxIndicator = withContext(_react.Checkbox.Indicator, "indicator");
+const CheckboxRoot = exports.CheckboxRoot = withProvider(_react.Checkbox.Root, "root", {
+  baseComponent: true
+});
+const CheckboxIndicator = exports.CheckboxIndicator = withContext(_react.Checkbox.Indicator, "indicator", {
+  baseComponent: true
+});
 const InternalCheckboxLabel = withContext(_react.Checkbox.Label, "label");
 const CheckboxLabel = _ref => {
   let {
@@ -234,6 +238,10 @@ const CheckboxLabel = _ref => {
   });
 };
 exports.CheckboxLabel = CheckboxLabel;
-const CheckboxControl = exports.CheckboxControl = withContext(_react.Checkbox.Control, "control");
-const CheckboxGroup = exports.CheckboxGroup = withProvider(_react.Checkbox.Group, "group");
+const CheckboxControl = exports.CheckboxControl = withContext(_react.Checkbox.Control, "control", {
+  baseComponent: true
+});
+const CheckboxGroup = exports.CheckboxGroup = withProvider(_react.Checkbox.Group, "group", {
+  baseComponent: true
+});
 const CheckboxHiddenInput = exports.CheckboxHiddenInput = _react.Checkbox.HiddenInput;

package/lib/Combobox.d.ts

@@ -42,18 +42,50 @@ declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRunt
     };
 }>;
 export type ComboboxVariantProps = RecipeVariantProps<typeof comboboxRecipe>;
-export type ComboboxRootProps<T extends Combobox.CollectionItem> = Combobox.RootProps<T> & ComboboxVariantProps;
+export type ComboboxRootProps<T extends Combobox.CollectionItem> = Combobox.RootProps<T> & ComboboxVariantProps & JsxStyleProps & {
+    translations: Combobox.RootProps<T>["translations"];
+};
 export declare const ComboboxRoot: <T extends Combobox.CollectionItem>({ ...props }: ComboboxRootProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxClearTrigger: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ClearTriggerProps> & Combobox.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const ComboboxContent: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ContentProps> & Combobox.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxControl: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ControlProps> & Combobox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxInput: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.InputProps> & Combobox.InputProps & import("react").RefAttributes<HTMLInputElement>>;
-export declare const ComboboxItemGroupLabel: ({ children, textStyle, fontWeight, ...props }: Combobox.ItemGroupLabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxItemGroup: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ItemGroupProps> & Combobox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxItemIndicator: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ItemIndicatorProps> & Combobox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxItem: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ItemProps> & Combobox.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxItemText: ({ textStyle, fontWeight, children, ...props }: Combobox.ItemTextProps & TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxLabel: ({ textStyle, fontWeight, ...props }: Combobox.LabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxPositioner: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.PositionerProps> & Combobox.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.TriggerProps> & Combobox.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type ComboboxClearTriggerProps = Combobox.ClearTriggerProps & JsxStyleProps;
+export declare const ComboboxClearTrigger: import("react").ForwardRefExoticComponent<Combobox.ClearTriggerProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type ComboboxContentProps = Combobox.ContentProps & JsxStyleProps;
+export declare const ComboboxContent: import("react").ForwardRefExoticComponent<Combobox.ContentProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type ComboboxControlProps = Combobox.ControlProps & JsxStyleProps;
+export declare const ComboboxControl: import("react").ForwardRefExoticComponent<Combobox.ControlProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type ComboboxInputProps = Combobox.InputProps & JsxStyleProps;
+export declare const ComboboxInput: import("react").ForwardRefExoticComponent<Combobox.InputProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
+export type ComboboxItemGroupLabelProps = Combobox.ItemGroupLabelProps & TextProps & JsxStyleProps;
+export declare const ComboboxItemGroupLabel: ({ children, textStyle, fontWeight, ...props }: ComboboxItemGroupLabelProps) => import("react/jsx-runtime").JSX.Element;
+export type ComboboxItemGroupProps = Combobox.ItemGroupProps & JsxStyleProps;
+export declare const ComboboxItemGroup: import("react").ForwardRefExoticComponent<Combobox.ItemGroupProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type ComboboxItemIndicatorProps = Combobox.ItemIndicatorProps & JsxStyleProps;
+export declare const ComboboxItemIndicator: import("react").ForwardRefExoticComponent<Combobox.ItemIndicatorProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type ComboboxItemProps = Combobox.ItemProps & JsxStyleProps;
+export declare const ComboboxItem: import("react").ForwardRefExoticComponent<Combobox.ItemProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type ComboboxItemTextProps = Combobox.ItemTextProps & TextProps & JsxStyleProps;
+export declare const ComboboxItemText: ({ textStyle, fontWeight, children, ...props }: ComboboxItemTextProps) => import("react/jsx-runtime").JSX.Element;
+export type ComboboxLabelProps = Combobox.LabelProps & TextProps & JsxStyleProps;
+export declare const ComboboxLabel: ({ textStyle, fontWeight, ...props }: ComboboxLabelProps) => import("react/jsx-runtime").JSX.Element;
+export type ComboboxPositionerProps = Combobox.PositionerProps & JsxStyleProps;
+export declare const ComboboxPositioner: import("react").ForwardRefExoticComponent<Combobox.PositionerProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type ComboboxTriggerProps = Combobox.TriggerProps & JsxStyleProps;
+export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<Combobox.TriggerProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/Combobox.js

@@ -153,7 +153,9 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(comboboxRecipe);
-const InternalComboboxRoot = withProvider(_react.Combobox.Root, "root");
+const InternalComboboxRoot = withProvider(_react.Combobox.Root, "root", {
+  baseComponent: true
+});
 const ComboboxRoot = _ref => {
   let {
     ...props
@@ -167,10 +169,18 @@ const ComboboxRoot = _ref => {
   );
 };
 exports.ComboboxRoot = ComboboxRoot;
-const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger");
-const ComboboxContent = exports.ComboboxContent = withContext(_react.Combobox.Content, "content");
-const ComboboxControl = exports.ComboboxControl = withContext(_react.Combobox.Control, "control");
-const ComboboxInput = exports.ComboboxInput = withContext(_react.Combobox.Input, "input");
+const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+const ComboboxContent = exports.ComboboxContent = withContext(_react.Combobox.Content, "content", {
+  baseComponent: true
+});
+const ComboboxControl = exports.ComboboxControl = withContext(_react.Combobox.Control, "control", {
+  baseComponent: true
+});
+const ComboboxInput = exports.ComboboxInput = withContext(_react.Combobox.Input, "input", {
+  baseComponent: true
+});
 const InternalComboboxItemGroupLabel = withContext(_react.Combobox.ItemGroupLabel, "itemGroupLabel");
 const ComboboxItemGroupLabel = _ref2 => {
   let {
@@ -194,9 +204,15 @@ const ComboboxItemGroupLabel = _ref2 => {
   });
 };
 exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;
-const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react.Combobox.ItemGroup, "itemGroup");
-const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react.Combobox.ItemIndicator, "itemIndicator");
-const ComboboxItem = exports.ComboboxItem = withContext(_react.Combobox.Item, "item");
+const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react.Combobox.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react.Combobox.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const ComboboxItem = exports.ComboboxItem = withContext(_react.Combobox.Item, "item", {
+  baseComponent: true
+});
 const InternalComboboxItemText = withContext(_react.Combobox.ItemText, "itemText");
 const ComboboxItemText = _ref3 => {
   let {
@@ -235,5 +251,9 @@ const ComboboxLabel = _ref4 => {
   });
 };
 exports.ComboboxLabel = ComboboxLabel;
-const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combobox.Positioner, "positioner");
-const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger");
+const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combobox.Positioner, "positioner", {
+  baseComponent: true
+});
+const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger", {
+  baseComponent: true
+});

package/lib/Dialog.js

@@ -272,9 +272,15 @@ const DialogRoot = _ref => {
   });
 };
 exports.DialogRoot = DialogRoot;
-const DialogBackdrop = exports.DialogBackdrop = withContext(_react2.Dialog.Backdrop, "backdrop");
-const DialogStandaloneContent = exports.DialogStandaloneContent = withContext(_react2.Dialog.Content, "content");
-const DialogPositioner = exports.DialogPositioner = withContext(_react2.Dialog.Positioner, "positioner");
+const DialogBackdrop = exports.DialogBackdrop = withContext(_react2.Dialog.Backdrop, "backdrop", {
+  baseComponent: true
+});
+const DialogStandaloneContent = exports.DialogStandaloneContent = withContext(_react2.Dialog.Content, "content", {
+  baseComponent: true
+});
+const DialogPositioner = exports.DialogPositioner = withContext(_react2.Dialog.Positioner, "positioner", {
+  baseComponent: true
+});
 const DialogContent = exports.DialogContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogBackdrop, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPositioner, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogStandaloneContent, {

package/lib/Figure.d.ts

@@ -7,7 +7,7 @@
  */
 import { HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
-import { JsxStyleProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, RecipeVariant } from "@ndla/styled-system/types";
 declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         full: {
@@ -43,19 +43,19 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
             tablet: {
                 float: "left";
                 clear: "left";
-                paddingInlineEnd: "medium";
             };
         };
         right: {
             tablet: {
                 float: "right";
                 clear: "right";
-                paddingInlineStart: "medium";
             };
         };
     };
 }>;
 export type FigureVariantProps = RecipeVariantProps<typeof figureRecipe>;
+export type FigureSize = RecipeVariant<typeof figureRecipe>["size"];
+export type FigureFloat = RecipeVariant<typeof figureRecipe>["float"];
 export type FigureProps = HTMLArkProps<"figure"> & JsxStyleProps & FigureVariantProps;
 export declare const Figure: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;

package/lib/Figure.js

@@ -58,15 +58,13 @@ const figureRecipe = (0, _css.cva)({
       left: {
         tablet: {
           float: "left",
-          clear: "left",
-          paddingInlineEnd: "medium"
+          clear: "left"
         }
       },
       right: {
         tablet: {
           float: "right",
-          clear: "right",
-          paddingInlineStart: "medium"
+          clear: "right"
         }
       }
     }
@@ -81,6 +79,25 @@ const figureRecipe = (0, _css.cva)({
       left: "auto",
       marginBlock: "xsmall"
     }
+  }, {
+    float: "left",
+    size: ["medium", "small", "xsmall"],
+    css: {
+      paddingInlineEnd: "medium"
+    }
+  }, {
+    float: "right",
+    size: ["medium", "small", "xsmall"],
+    css: {
+      paddingInlineStart: "medium"
+    }
+  }, {
+    float: ["left", "right"],
+    size: ["full"],
+    css: {
+      paddingInlineStart: "0",
+      paddingInlineEnd: "0"
+    }
   }]
 });
 const StyledFigure = (0, _jsx2.styled)(_react2.ark.figure, {}, {

package/lib/Image.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { ComponentPropsWithRef } from "react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+export interface ImageCrop {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+}
+export interface ImageFocalPoint {
+    x: number;
+    y: number;
+}
+export declare const makeSrcQueryString: (width: number | undefined, crop?: ImageCrop, focalPoint?: ImageFocalPoint) => string;
+export declare const getSrcSet: (src: string, crop: ImageCrop | undefined, focalPoint: ImageFocalPoint | undefined) => string;
+export interface PictureProps extends JsxStyleProps, ComponentPropsWithRef<"picture"> {
+    src: string;
+    sizes?: string;
+    contentType?: string;
+    srcSet?: string;
+    crop?: ImageCrop;
+    focalPoint?: ImageFocalPoint;
+}
+export declare const Picture: import("react").ForwardRefExoticComponent<Omit<PictureProps, "ref"> & import("react").RefAttributes<HTMLPictureElement>>;
+export interface ImgProps extends JsxStyleProps, ComponentPropsWithRef<"img"> {
+    alt: string;
+    src: string;
+    fallbackWidth?: number;
+    contentType?: string;
+    crop?: ImageCrop;
+    focalPoint?: ImageFocalPoint;
+}
+export declare const Img: import("react").ForwardRefExoticComponent<Omit<ImgProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+export interface ImageProps extends JsxStyleProps, ComponentPropsWithRef<"img"> {
+    alt: string;
+    src: string;
+    sizes?: string;
+    fallbackWidth?: number;
+    contentType?: string;
+    crop?: ImageCrop;
+    focalPoint?: ImageFocalPoint;
+}
+export declare const Image: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/Image.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeSrcQueryString = exports.getSrcSet = exports.Picture = exports.Img = exports.Image = void 0;
+var _react = require("react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const makeSrcQueryString = (width, crop, focalPoint) => {
+  const widthParams = width && `width=${width}`;
+  const cropParams = crop && `cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`;
+  const focalPointParams = focalPoint && `focalX=${focalPoint.x}&focalY=${focalPoint.y}`;
+  const params = [widthParams, cropParams, focalPointParams].filter(p => p).join("&");
+  return params;
+};
+exports.makeSrcQueryString = makeSrcQueryString;
+const getSrcSet = (src, crop, focalPoint) => {
+  const widths = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];
+  return widths.map(width => `${src}?${makeSrcQueryString(width, crop, focalPoint)} ${width}w`).join(", ");
+};
+exports.getSrcSet = getSrcSet;
+const FALLBACK_WIDTH = 1024;
+const FALLBACK_SIZES = "(min-width: 1024px) 1024px, 100vw";
+const Picture = exports.Picture = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    srcSet: srcSetProp,
+    crop,
+    focalPoint,
+    src,
+    contentType,
+    sizes = FALLBACK_SIZES,
+    ...props
+  } = _ref;
+  const srcSet = srcSetProp ?? getSrcSet(src, crop, focalPoint);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsx2.styled.picture, {
+    ...props,
+    ref: ref,
+    children: [contentType !== "image/gif" && /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      type: contentType,
+      srcSet: srcSet,
+      sizes: sizes
+    }), children]
+  });
+});
+const Img = exports.Img = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    fallbackWidth = FALLBACK_WIDTH,
+    crop,
+    focalPoint,
+    contentType,
+    src,
+    alt,
+    ...props
+  } = _ref2;
+  const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.img, {
+    alt: alt,
+    src: contentType === "image/gif" ? src : `${src}?${queryString}`,
+    ...props,
+    ref: ref
+  });
+});
+const Image = exports.Image = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    srcSet: srcSetProp,
+    crop,
+    focalPoint,
+    src,
+    contentType,
+    fallbackWidth = FALLBACK_WIDTH,
+    sizes = FALLBACK_SIZES,
+    alt,
+    ...props
+  } = _ref3;
+  const srcSet = srcSetProp ?? getSrcSet(src, crop, focalPoint);
+  const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", {
+    children: [contentType !== "image/gif" && /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      type: contentType,
+      srcSet: srcSet,
+      sizes: sizes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.img, {
+      alt: alt,
+      src: contentType === "image/gif" ? src : `${src}?${queryString}`,
+      ...props,
+      ref: ref
+    })]
+  });
+});

package/lib/Input.js

@@ -147,7 +147,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref3,
   const resize = (0, _react.useCallback)(() => {
     if (!localRef.current) return;
     localRef.current.style.height = "0";
-    localRef.current.style.height = "".concat(localRef.current.scrollHeight + 3, "px");
+    localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;
   }, []);
   (0, _react.useEffect)(() => {
     window.addEventListener("input", resize);

package/lib/Menu.js

@@ -148,7 +148,9 @@ const MenuRoot = _ref => {
   });
 };
 exports.MenuRoot = MenuRoot;
-const MenuContent = exports.MenuContent = withContext(_react2.Menu.Content, "content");
+const MenuContent = exports.MenuContent = withContext(_react2.Menu.Content, "content", {
+  baseComponent: true
+});
 const InternalMenuItemGroupLabel = withContext(_react2.Menu.ItemGroupLabel, "itemGroupLabel");
 const MenuItemGroupLabel = _ref2 => {
   let {
@@ -168,8 +170,12 @@ const MenuItemGroupLabel = _ref2 => {
   });
 };
 exports.MenuItemGroupLabel = MenuItemGroupLabel;
-const MenuItemGroup = exports.MenuItemGroup = withContext(_react2.Menu.ItemGroup, "itemGroup");
-const InternalMenuItem = withContext(_react2.Menu.Item, "item");
+const MenuItemGroup = exports.MenuItemGroup = withContext(_react2.Menu.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const InternalMenuItem = withContext(_react2.Menu.Item, "item", {
+  baseComponent: true
+});
 const MenuItem = exports.MenuItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     css: cssProp = {},
@@ -184,8 +190,12 @@ const MenuItem = exports.MenuItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3,
     ref: ref
   });
 });
-const MenuPositioner = exports.MenuPositioner = withContext(_react2.Menu.Positioner, "positioner");
-const InternalMenuTriggerItem = withContext(_react2.Menu.TriggerItem, "triggerItem");
+const MenuPositioner = exports.MenuPositioner = withContext(_react2.Menu.Positioner, "positioner", {
+  baseComponent: true
+});
+const InternalMenuTriggerItem = withContext(_react2.Menu.TriggerItem, "triggerItem", {
+  baseComponent: true
+});
 const MenuTriggerItem = exports.MenuTriggerItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     css: cssProp = {},
@@ -200,5 +210,9 @@ const MenuTriggerItem = exports.MenuTriggerItem = /*#__PURE__*/(0, _react.forwar
     ref: ref
   });
 });
-const MenuTrigger = exports.MenuTrigger = withContext(_react2.Menu.Trigger, "trigger");
-const MenuSeparator = exports.MenuSeparator = withContext(_react2.Menu.Separator, "separator");
+const MenuTrigger = exports.MenuTrigger = withContext(_react2.Menu.Trigger, "trigger", {
+  baseComponent: true
+});
+const MenuSeparator = exports.MenuSeparator = withContext(_react2.Menu.Separator, "separator", {
+  baseComponent: true
+});

package/lib/Pagination.d.ts

@@ -7,10 +7,13 @@
  */
 import { Pagination } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
-export type PaginationRootProps = JsxStyleProps & Pagination.RootProps;
+interface RootProps extends Pagination.RootProps {
+    translations: Pagination.RootProps["translations"];
+}
+export type PaginationRootProps = JsxStyleProps & RootProps;
 export declare const PaginationRoot: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & Pagination.RootProps & import("react").RefAttributes<HTMLElement>>;
+} & import("@ndla/styled-system/types").WithCss & RootProps & import("react").RefAttributes<HTMLElement>>;
 export declare const PaginationItem: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -23,3 +26,4 @@ export declare const PaginationPrevTrigger: import("react").ForwardRefExoticComp
 export declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Pagination.js

@@ -35,8 +35,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(paginationRecipe);
-const PaginationRoot = exports.PaginationRoot = withProvider(_react.Pagination.Root, "root");
-const PaginationItem = exports.PaginationItem = withContext(_react.Pagination.Item, "item");
-const PaginationEllipsis = exports.PaginationEllipsis = withContext(_react.Pagination.Ellipsis, "ellipsis");
-const PaginationPrevTrigger = exports.PaginationPrevTrigger = withContext(_react.Pagination.PrevTrigger, "prevTrigger");
-const PaginationNextTrigger = exports.PaginationNextTrigger = withContext(_react.Pagination.NextTrigger, "nextTrigger");
+const PaginationRoot = exports.PaginationRoot = withProvider(_react.Pagination.Root, "root", {
+  baseComponent: true
+});
+const PaginationItem = exports.PaginationItem = withContext(_react.Pagination.Item, "item", {
+  baseComponent: true
+});
+const PaginationEllipsis = exports.PaginationEllipsis = withContext(_react.Pagination.Ellipsis, "ellipsis", {
+  baseComponent: true
+});
+const PaginationPrevTrigger = exports.PaginationPrevTrigger = withContext(_react.Pagination.PrevTrigger, "prevTrigger", {
+  baseComponent: true
+});
+const PaginationNextTrigger = exports.PaginationNextTrigger = withContext(_react.Pagination.NextTrigger, "nextTrigger", {
+  baseComponent: true
+});

package/lib/Popover.js

@@ -62,25 +62,45 @@ const PopoverRoot = _ref => {
   });
 };
 exports.PopoverRoot = PopoverRoot;
-const PopoverAnchor = exports.PopoverAnchor = withContext(_react.Popover.Anchor, "anchor");
-const PopoverArrowStandalone = exports.PopoverArrowStandalone = withContext(_react.Popover.Arrow, "arrow");
+const PopoverAnchor = exports.PopoverAnchor = withContext(_react.Popover.Anchor, "anchor", {
+  baseComponent: true
+});
+const PopoverArrowStandalone = exports.PopoverArrowStandalone = withContext(_react.Popover.Arrow, "arrow", {
+  baseComponent: true
+});
 const PopoverArrow = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverArrowStandalone, {
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverArrowTip, {
     ...props
   })
 });
 exports.PopoverArrow = PopoverArrow;
-const PopoverArrowTip = exports.PopoverArrowTip = withContext(_react.Popover.ArrowTip, "arrowTip");
-const PopoverCloseTrigger = exports.PopoverCloseTrigger = withContext(_react.Popover.CloseTrigger, "closeTrigger");
-const PopoverContentStandalone = exports.PopoverContentStandalone = withContext(_react.Popover.Content, "content");
+const PopoverArrowTip = exports.PopoverArrowTip = withContext(_react.Popover.ArrowTip, "arrowTip", {
+  baseComponent: true
+});
+const PopoverCloseTrigger = exports.PopoverCloseTrigger = withContext(_react.Popover.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
+const PopoverContentStandalone = exports.PopoverContentStandalone = withContext(_react.Popover.Content, "content", {
+  baseComponent: true
+});
 const PopoverContent = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverPositioner, {
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContentStandalone, {
     ...props
   })
 });
 exports.PopoverContent = PopoverContent;
-const PopoverDescription = exports.PopoverDescription = withContext(_react.Popover.Description, "description");
-const PopoverIndicator = exports.PopoverIndicator = withContext(_react.Popover.Indicator, "indicator");
-const PopoverPositioner = exports.PopoverPositioner = withContext(_react.Popover.Positioner, "positioner");
-const PopoverTitle = exports.PopoverTitle = withContext(_react.Popover.Title, "title");
-const PopoverTrigger = exports.PopoverTrigger = withContext(_react.Popover.Trigger, "trigger");
+const PopoverDescription = exports.PopoverDescription = withContext(_react.Popover.Description, "description", {
+  baseComponent: true
+});
+const PopoverIndicator = exports.PopoverIndicator = withContext(_react.Popover.Indicator, "indicator", {
+  baseComponent: true
+});
+const PopoverPositioner = exports.PopoverPositioner = withContext(_react.Popover.Positioner, "positioner", {
+  baseComponent: true
+});
+const PopoverTitle = exports.PopoverTitle = withContext(_react.Popover.Title, "title", {
+  baseComponent: true
+});
+const PopoverTrigger = exports.PopoverTrigger = withContext(_react.Popover.Trigger, "trigger", {
+  baseComponent: true
+});

package/lib/RadioGroup.js

@@ -96,10 +96,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(radioGroupRecipe);
-const RadioGroupRoot = exports.RadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root");
-const RadioGroupIndicator = exports.RadioGroupIndicator = withContext(_react2.RadioGroup.Indicator, "indicator");
-const RadioGroupItemControl = exports.RadioGroupItemControl = withContext(_react2.RadioGroup.ItemControl, "itemControl");
-const RadioGroupItem = exports.RadioGroupItem = withContext(_react2.RadioGroup.Item, "item");
+const RadioGroupRoot = exports.RadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root", {
+  baseComponent: true
+});
+const RadioGroupIndicator = exports.RadioGroupIndicator = withContext(_react2.RadioGroup.Indicator, "indicator", {
+  baseComponent: true
+});
+const RadioGroupItemControl = exports.RadioGroupItemControl = withContext(_react2.RadioGroup.ItemControl, "itemControl", {
+  baseComponent: true
+});
+const RadioGroupItem = exports.RadioGroupItem = withContext(_react2.RadioGroup.Item, "item", {
+  baseComponent: true
+});
 const InternalRadioGroupItemText = withContext(_react2.RadioGroup.ItemText, "itemText");
 const RadioGroupItemText = _ref => {
   let {