@ndla/primitives 0.0.17 → 0.0.19

package/lib/Button.d.ts

@@ -107,7 +107,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
 export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         default: {
-            paddingInline: "medium";
+            paddingInline: "xsmall";
             paddingBlock: "xxsmall";
             minHeight: "24";
         };

package/lib/Button.js

@@ -159,7 +159,7 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
   variants: {
     size: {
       default: {
-        paddingInline: "medium",
+        paddingInline: "xsmall",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },

package/lib/Card/Card.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 { type ImageProps } from "../Image";
+import { type TextProps } from "../Text";
+export declare const CardRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
+export declare const CardHeading: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardImage: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/Card/Card.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardRoot = exports.CardImage = exports.CardHeading = exports.CardContent = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("../createStyleContext");
+var _Image = require("../Image");
+var _Text = require("../Text");
+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 cardRecipe = (0, _css.sva)({
+  slots: ["root", "title", "content", "image"],
+  base: {
+    root: {
+      position: "relative",
+      border: "1px solid",
+      borderRadius: "xsmall",
+      borderColor: "stroke.subtle",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      background: "surface.default",
+      _hover: {
+        background: "surface.actionSubtle.hover",
+        borderColor: "stroke.hover"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      paddingBlock: "xsmall",
+      paddingInline: "medium"
+    },
+    title: {
+      textDecoration: "underline",
+      _hover: {
+        textDecoration: "none"
+      }
+    },
+    image: {
+      height: "200px",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(cardRecipe);
+const CardRoot = exports.CardRoot = withProvider(_react2.ark.article, "root", {
+  baseComponent: true
+});
+const InternalCardHeading = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    textStyle = "label.large",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
+    textStyle: textStyle,
+    fontWeight: fontWeight,
+    ...props,
+    ref: ref
+  });
+});
+const CardHeading = exports.CardHeading = withContext(InternalCardHeading, "title");
+const CardContent = exports.CardContent = withContext(_react2.ark.div, "content", {
+  baseComponent: true
+});
+const CardImage = exports.CardImage = withContext(_Image.Image, "image");

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,54 @@ 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 type ComboboxListProps = Combobox.ListProps & JsxStyleProps;
+export declare const ComboboxList: import("react").ForwardRefExoticComponent<Combobox.ListProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/Combobox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
+exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxList = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -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,12 @@ 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
+});
+const ComboboxList = exports.ComboboxList = withContext(_react.Combobox.List, "list", {
+  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/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 {

package/lib/Select.d.ts

@@ -49,3 +49,6 @@ export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Se
 export declare const SelectValueText: import("react").ForwardRefExoticComponent<Select.ValueTextProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectList: import("react").ForwardRefExoticComponent<Select.ListProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Select.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
+exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectList = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -138,7 +138,9 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(selectRecipe);
-const InternalSelectRoot = withProvider(_react2.Select.Root, "root");
+const InternalSelectRoot = withProvider(_react2.Select.Root, "root", {
+  baseComponent: true
+});
 const SelectRoot = _ref => {
   let {
     lazyMount = true,
@@ -156,10 +158,18 @@ const SelectRoot = _ref => {
   );
 };
 exports.SelectRoot = SelectRoot;
-const SelectClearTrigger = exports.SelectClearTrigger = withContext(_react2.Select.ClearTrigger, "clearTrigger");
-const SelectContent = exports.SelectContent = withContext(_react2.Select.Content, "content");
-const SelectControl = exports.SelectControl = withContext(_react2.Select.Control, "control");
-const SelectIndicator = exports.SelectIndicator = withContext(_react2.Select.Indicator, "indicator");
+const SelectClearTrigger = exports.SelectClearTrigger = withContext(_react2.Select.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+const SelectContent = exports.SelectContent = withContext(_react2.Select.Content, "content", {
+  baseComponent: true
+});
+const SelectControl = exports.SelectControl = withContext(_react2.Select.Control, "control", {
+  baseComponent: true
+});
+const SelectIndicator = exports.SelectIndicator = withContext(_react2.Select.Indicator, "indicator", {
+  baseComponent: true
+});
 const SelectItemGroupLabel = exports.SelectItemGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     children,
@@ -179,10 +189,18 @@ const SelectItemGroupLabel = exports.SelectItemGroupLabel = /*#__PURE__*/(0, _re
   });
 });
 const InternalSelectItemGroupLabel = withContext(_react2.Select.ItemGroupLabel, "itemGroupLabel");
-const SelectItemGroup = exports.SelectItemGroup = withContext(_react2.Select.ItemGroup, "itemGroup");
-const SelectItemIndicator = exports.SelectItemIndicator = withContext(_react2.Select.ItemIndicator, "itemIndicator");
-const SelectItem = exports.SelectItem = withContext(_react2.Select.Item, "item");
-const SelectItemText = exports.SelectItemText = withContext(_react2.Select.ItemText, "itemText");
+const SelectItemGroup = exports.SelectItemGroup = withContext(_react2.Select.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const SelectItemIndicator = exports.SelectItemIndicator = withContext(_react2.Select.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const SelectItem = exports.SelectItem = withContext(_react2.Select.Item, "item", {
+  baseComponent: true
+});
+const SelectItemText = exports.SelectItemText = withContext(_react2.Select.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalSelectLabel = withContext(_react2.Select.Label, "label");
 const SelectLabel = exports.SelectLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
@@ -198,6 +216,15 @@ const SelectLabel = exports.SelectLabel = /*#__PURE__*/(0, _react.forwardRef)((_
     })
   });
 });
-const SelectPositioner = exports.SelectPositioner = withContext(_react2.Select.Positioner, "positioner");
-const SelectTrigger = exports.SelectTrigger = withContext(_react2.Select.Trigger, "trigger");
-const SelectValueText = exports.SelectValueText = withContext(_react2.Select.ValueText, "valueText");
+const SelectPositioner = exports.SelectPositioner = withContext(_react2.Select.Positioner, "positioner", {
+  baseComponent: true
+});
+const SelectTrigger = exports.SelectTrigger = withContext(_react2.Select.Trigger, "trigger", {
+  baseComponent: true
+});
+const SelectValueText = exports.SelectValueText = withContext(_react2.Select.ValueText, "valueText", {
+  baseComponent: true
+});
+const SelectList = exports.SelectList = withContext(_react2.Select.List, "list", {
+  baseComponent: true
+});

package/lib/Slider.js

@@ -85,11 +85,21 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(sliderRecipe);
-const SliderRoot = exports.SliderRoot = withProvider(_react.Slider.Root, "root");
-const SliderControl = exports.SliderControl = withContext(_react.Slider.Control, "control");
-const SliderTrack = exports.SliderTrack = withContext(_react.Slider.Track, "track");
-const SliderRange = exports.SliderRange = withContext(_react.Slider.Range, "range");
-const SliderThumb = exports.SliderThumb = withContext(_react.Slider.Thumb, "thumb");
+const SliderRoot = exports.SliderRoot = withProvider(_react.Slider.Root, "root", {
+  baseComponent: true
+});
+const SliderControl = exports.SliderControl = withContext(_react.Slider.Control, "control", {
+  baseComponent: true
+});
+const SliderTrack = exports.SliderTrack = withContext(_react.Slider.Track, "track", {
+  baseComponent: true
+});
+const SliderRange = exports.SliderRange = withContext(_react.Slider.Range, "range", {
+  baseComponent: true
+});
+const SliderThumb = exports.SliderThumb = withContext(_react.Slider.Thumb, "thumb", {
+  baseComponent: true
+});
 const InternalSliderLabel = withContext(_react.Slider.Label, "label");
 const SliderLabel = _ref => {
   let {