@ndla/primitives 0.0.17 → 0.0.18

package/es/Slider.js

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

package/es/Switch.js

@@ -97,9 +97,15 @@ const {
   withProvider,
   withContext
 } = createStyleContext(switchRecipe);
-export const SwitchRoot = withProvider(Switch.Root, "root");
-export const SwitchControl = withContext(Switch.Control, "control");
-export const SwitchThumb = withContext(Switch.Thumb, "thumb");
+export const SwitchRoot = withProvider(Switch.Root, "root", {
+  baseComponent: true
+});
+export const SwitchControl = withContext(Switch.Control, "control", {
+  baseComponent: true
+});
+export const SwitchThumb = withContext(Switch.Thumb, "thumb", {
+  baseComponent: true
+});
 const InternalSwitchLabel = withContext(Switch.Label, "label");
 export const SwitchLabel = _ref => {
   let {

package/es/Tabs.js

@@ -201,7 +201,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(tabsRecipe);
-const InternalTabsRoot = withProvider(Tabs.Root, "root");
+const InternalTabsRoot = withProvider(Tabs.Root, "root", {
+  baseComponent: true
+});
 export const TabsRoot = _ref => {
   let {
     lazyMount = true,
@@ -214,10 +216,18 @@ export const TabsRoot = _ref => {
     ...props
   });
 };
-export const TabsContent = withContext(Tabs.Content, "content");
-export const TabsIndicator = withContext(Tabs.Indicator, "indicator");
-export const TabsList = withContext(Tabs.List, "list");
-const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger");
+export const TabsContent = withContext(Tabs.Content, "content", {
+  baseComponent: true
+});
+export const TabsIndicator = withContext(Tabs.Indicator, "indicator", {
+  baseComponent: true
+});
+export const TabsList = withContext(Tabs.List, "list", {
+  baseComponent: true
+});
+const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger", {
+  baseComponent: true
+});
 export const TabsTrigger = _ref2 => {
   let {
     className,

package/es/TagsInput.js

@@ -94,15 +94,33 @@ const {
   withProvider,
   withContext
 } = createStyleContext(tagsInputRecipe);
-export const TagsInputRoot = withProvider(TagsInput.Root, "root");
-export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger");
-export const TagsInputControl = withContext(TagsInput.Control, "control");
-export const TagsInputInput = withContext(TagsInput.Input, "input");
-export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger");
-export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput");
-export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview");
-export const TagsInputItem = withContext(TagsInput.Item, "item");
-export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText");
+export const TagsInputRoot = withProvider(TagsInput.Root, "root", {
+  baseComponent: true
+});
+export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const TagsInputControl = withContext(TagsInput.Control, "control", {
+  baseComponent: true
+});
+export const TagsInputInput = withContext(TagsInput.Input, "input", {
+  baseComponent: true
+});
+export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", {
+  baseComponent: true
+});
+export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput", {
+  baseComponent: true
+});
+export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview", {
+  baseComponent: true
+});
+export const TagsInputItem = withContext(TagsInput.Item, "item", {
+  baseComponent: true
+});
+export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalTagsInputLabel = withContext(TagsInput.Label, "label");
 export const TagsInputLabel = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/es/Toast.js

@@ -44,9 +44,15 @@ const {
   withProvider,
   withContext
 } = createStyleContext(toastRecipe);
-export const ToastRoot = withProvider(Toast.Root, "root");
-export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger");
-export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger");
+export const ToastRoot = withProvider(Toast.Root, "root", {
+  baseComponent: true
+});
+export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger", {
+  baseComponent: true
+});
+export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
 const InternalToastDescription = withContext(Toast.Description, "description");
 export const ToastDescription = _ref => {
   let {

package/es/Tooltip.js

@@ -36,9 +36,15 @@ const {
   withContext
 } = createStyleContext(tooltipRecipe);
 export const TooltipRoot = withRootProvider(Tooltip.Root);
-export const TooltipArrow = withContext(Tooltip.Arrow, "arrow");
-export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip");
-export const TooltipContentStandalone = withContext(Tooltip.Content, "content");
+export const TooltipArrow = withContext(Tooltip.Arrow, "arrow", {
+  baseComponent: true
+});
+export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip", {
+  baseComponent: true
+});
+export const TooltipContentStandalone = withContext(Tooltip.Content, "content", {
+  baseComponent: true
+});
 export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -54,5 +60,9 @@ export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     })
   });
 });
-export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner");
-export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger");
+export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner", {
+  baseComponent: true
+});
+export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger", {
+  baseComponent: true
+});

package/es/createStyleContext.js

@@ -29,11 +29,8 @@ export const createStyleContext = recipe => {
     };
     return StyledComponent;
   };
-  const withProvider = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = styled(Component, {}, opts);
+  const withProvider = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options);
     return /*#__PURE__*/forwardRef((_ref, ref) => {
       let {
         css: cssProp,
@@ -51,11 +48,8 @@ export const createStyleContext = recipe => {
       });
     });
   };
-  const withContext = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = styled(Component, {}, opts);
+  const withContext = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options);
     return /*#__PURE__*/forwardRef((_ref2, ref) => {
       let {
         css: cssProp,

package/es/index.js

@@ -11,6 +11,7 @@ export { OrderedList, UnOrderedList, DefinitionList } from "./ArticleLists";
 export { Badge } from "./Badge";
 export { BlockQuote } from "./BlockQuote";
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
+export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
@@ -20,7 +21,7 @@ export { FieldErrorMessage } from "./FieldErrorMessage";
 export { FieldHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
-export { Picture, Img, Image } from "./Image";
+export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel } from "./Label";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator } from "./Menu";

package/lib/Accordion.d.ts

@@ -6,10 +6,48 @@
  *
  */
 import { Accordion } from "@ark-ui/react";
-import { JsxStyleProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+declare const accordionRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator", {
+    variant: {
+        clean: {};
+        bordered: {
+            itemTrigger: {
+                paddingInline: "medium";
+                paddingBlock: "medium";
+                width: "100%";
+                borderRadius: "xsmall";
+                boxShadowColor: "stroke.subtle";
+                boxShadow: "inset 0 0 0 1px var(--shadow-color)";
+                _hover: {
+                    background: "surface.actionSubtle.hover";
+                    boxShadowColor: "stroke.hover";
+                };
+                _open: {
+                    backgroundColor: "surface.actionSubtle.active";
+                    boxShadowColor: "stroke.default";
+                    borderBottomRadius: "sharp";
+                };
+                _focusVisible: {
+                    outline: "none";
+                    boxShadowColor: "stroke.default";
+                    boxShadow: "inset 0 0 0 2px var(--shadow-color)";
+                };
+            };
+            itemContent: {
+                borderBottomRadius: "xsmall";
+                borderWidth: "0 1px 1px";
+                borderStyle: "solid";
+                borderColor: "stroke.default";
+            };
+        };
+    };
+}>;
+export type AccordionVariantProps = RecipeVariantProps<typeof accordionRecipe>;
 export interface AccordionRootProps extends JsxStyleProps, Accordion.RootProps {
 }
-export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & {
+    variant?: "bordered" | "clean" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemContent: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -22,3 +60,4 @@ export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
 export declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Accordion.js

@@ -29,21 +29,15 @@ const accordionRecipe = (0, _css.sva)({
       justifyContent: "space-between",
       background: "surface.default",
       cursor: "pointer",
-      paddingInline: "medium",
-      paddingBlock: "medium",
-      boxShadowColor: "stroke.subtle",
-      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-      borderRadius: "xsmall",
       transitionDuration: "fast",
       transitionTimingFunction: "default",
       transitionProperty: "background, border-color, border, border-radius",
-      width: "100%",
       _closed: {
         transitionProperty: "background, border-color, border, border-radius"
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "surface..disabled.subtle",
+        background: "surface.disabled.subtle",
         boxShadowColor: "stroke.disabled",
         color: "text.disabled",
         _hover: {
@@ -51,20 +45,6 @@ const accordionRecipe = (0, _css.sva)({
           boxShadowColor: "stroke.disabled",
           color: "text.disabled"
         }
-      },
-      _hover: {
-        background: "surface.actionSubtle.hover",
-        boxShadowColor: "stroke.hover"
-      },
-      _open: {
-        backgroundColor: "surface.actionSubtle.active",
-        boxShadowColor: "stroke.default",
-        borderBottomRadius: "sharp"
-      },
-      _focusVisible: {
-        outline: "none",
-        boxShadowColor: "stroke.default",
-        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
       }
     },
     itemIndicator: {
@@ -79,21 +59,59 @@ const accordionRecipe = (0, _css.sva)({
     },
     itemContent: {
       overflow: "hidden",
+      // TODO: Is this needed?
       transitionProperty: "padding-bottom",
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       paddingBlock: "xsmall",
       paddingInline: "small",
-      borderBottomRadius: "xsmall",
-      borderWidth: "0 1px 1px",
-      borderStyle: "solid",
-      borderColor: "stroke.default",
       _open: {
         animation: "collapse-in"
       },
       _closed: {
         animation: "collapse-out"
       }
+    },
+    item: {
+      width: "100%"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  },
+  variants: {
+    variant: {
+      clean: {},
+      bordered: {
+        itemTrigger: {
+          paddingInline: "medium",
+          paddingBlock: "medium",
+          width: "100%",
+          borderRadius: "xsmall",
+          boxShadowColor: "stroke.subtle",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            boxShadowColor: "stroke.hover"
+          },
+          _open: {
+            backgroundColor: "surface.actionSubtle.active",
+            boxShadowColor: "stroke.default",
+            borderBottomRadius: "sharp"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadowColor: "stroke.default",
+            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+          }
+        },
+        itemContent: {
+          borderBottomRadius: "xsmall",
+          borderWidth: "0 1px 1px",
+          borderStyle: "solid",
+          borderColor: "stroke.default"
+        }
+      }
     }
   }
 });
@@ -101,8 +119,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(accordionRecipe);
-const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root");
-const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent");
-const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator");
-const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item");
-const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger");
+const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root", {
+  baseComponent: true
+});
+const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent", {
+  baseComponent: true
+});
+const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item", {
+  baseComponent: true
+});
+const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger", {
+  baseComponent: true
+});

package/lib/Badge.d.ts

@@ -29,6 +29,7 @@ declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     };
 }>;
 export type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipe>;
+export type BadgeVariant = NonNullable<BadgeVariantProps>["colorTheme"];
 export type BadgeProps = HTMLArkProps<"div"> & JsxStyleProps & BadgeVariantProps;
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;

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,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 {};