@ndla/primitives 0.0.12 → 0.0.13

package/es/Select.js

@@ -160,11 +160,11 @@ export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalSelectItemGroupLabel, {
     asChild: true,
-    forwardCssProp: true,
     ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx(Label, {
       asChild: true,
+      consumeCss: true,
       children: /*#__PURE__*/_jsx("div", {
         children: children
       })
@@ -184,7 +184,6 @@ export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   } = _ref3;
   return /*#__PURE__*/_jsx(InternalSelectLabel, {
     asChild: true,
-    forwardCssProp: true,
     ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx(Label, {

package/es/Skeleton.js

@@ -22,4 +22,6 @@ export const Skeleton = styled(ark.div, {
       visibility: "hidden"
     }
   }
+}, {
+  baseComponent: true
 });

package/es/Slider.js

@@ -92,7 +92,6 @@ export const SliderLabel = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(InternalSliderLabel, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Label, {
       textStyle: textStyle,
       ...props

package/es/Spinner.js

@@ -6,9 +6,11 @@
  *
  */
 
+import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
-import { cva } from "@ndla/styled-system/css";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const spinnerRecipe = cva({
   base: {
     borderRadius: "full",
@@ -39,4 +41,20 @@ export const spinnerRecipe = cva({
     }
   }
 });
-export const Spinner = styled(ark.div, spinnerRecipe);
+const StyledSpinner = styled(ark.div, {}, {
+  baseComponent: true
+});
+export const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledSpinner, {
+    css: css.raw(spinnerRecipe.raw({
+      size
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/es/Switch.js

@@ -52,7 +52,7 @@ const switchRecipe = sva({
       justifyContent: "center",
       background: "icon.onAction",
       borderRadius: "full",
-      boxShadow: "xsmall",
+      boxShadow: "small",
       transitionDuration: "fast",
       transitionProperty: "transform",
       transitionTimingFunction: "default",
@@ -109,9 +109,9 @@ export const SwitchLabel = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(InternalSwitchLabel, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       ...props,
       children: /*#__PURE__*/_jsx("span", {

package/es/Table.js

@@ -69,4 +69,6 @@ export const Table = styled(ark.table, {
       }
     }
   }
+}, {
+  baseComponent: true
 });

package/es/TagsInput.js

@@ -111,7 +111,6 @@ export const TagsInputLabel = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/_jsx(InternalTagsInputLabel, {
     asChild: true,
-    forwardCssProp: true,
     ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx(Label, {

package/es/Text.js

@@ -11,7 +11,9 @@ import { ark } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledP = styled(ark.p);
+const StyledP = styled(ark.p, {}, {
+  baseComponent: true
+});
 export const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     textStyle = "body.medium",
@@ -32,7 +34,9 @@ export const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   });
 });
-const StyledH1 = styled(ark.h1);
+const StyledH1 = styled(ark.h1, {}, {
+  baseComponent: true
+});
 export const Heading = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     textStyle = "heading.medium",

package/es/Toast.js

@@ -56,9 +56,9 @@ export const ToastDescription = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(InternalToastDescription, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       ...props,
       children: /*#__PURE__*/_jsx("div", {
@@ -77,9 +77,9 @@ export const ToastTitle = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalToastTitle, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       asChild: true,
+      consumeCss: true,
       fontWeight: fontWeight,
       textStyle: textStyle,
       ...props,

package/es/createStyleContext.js

@@ -9,10 +9,11 @@
 import { createContext, forwardRef, useContext } from "react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
+
 /**
  * A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const createStyleContext = recipe => {
   const StyleContext = /*#__PURE__*/createContext(null);
   const withRootProvider = Component => {
@@ -29,7 +30,10 @@ export const createStyleContext = recipe => {
     return StyledComponent;
   };
   const withProvider = (Component, slot) => {
-    const StyledComponent = styled(Component);
+    const opts = typeof Component === "string" ? undefined : {
+      baseComponent: true
+    };
+    const StyledComponent = styled(Component, {}, opts);
     return /*#__PURE__*/forwardRef((_ref, ref) => {
       let {
         css: cssProp,
@@ -48,7 +52,10 @@ export const createStyleContext = recipe => {
     });
   };
   const withContext = (Component, slot) => {
-    const StyledComponent = styled(Component);
+    const opts = typeof Component === "string" ? undefined : {
+      baseComponent: true
+    };
+    const StyledComponent = styled(Component, {}, opts);
     return /*#__PURE__*/forwardRef((_ref2, ref) => {
       let {
         css: cssProp,

package/lib/Accordion.d.ts

@@ -11,14 +11,14 @@ export interface AccordionRootProps extends JsxStyleProps, Accordion.RootProps {
 }
 export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemContent: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemIndicator: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/ArticleLists.d.ts

@@ -6,13 +6,49 @@
  *
  */
 import { HTMLArkProps } from "@ark-ui/react";
-import { JsxStyleProps, StyledVariantProps } from "@ndla/styled-system/types";
-export type OrderedListVariantProps = StyledVariantProps<typeof OrderedList>;
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        numbers: {
+            "& > li": {
+                _marker: {
+                    content: "counters(list-item, '.') '. '";
+                };
+            };
+        };
+        letters: {
+            "& ol[data-variant='numbers'] > li": {
+                _marker: {
+                    content: "counter(list-item, numeric) '. '";
+                };
+            };
+            "& li": {
+                _marker: {
+                    content: "counter(list-item, upper-alpha) '. '";
+                };
+                "& > ol > li": {
+                    _marker: {
+                        content: "counter(list-item, lower-alpha) '. '";
+                    };
+                    "& li": {
+                        _marker: {
+                            content: "counter(list-item, lower-roman) '. '";
+                        };
+                    };
+                };
+            };
+        };
+    };
+}>;
+export type OrderedListVariantProps = RecipeVariantProps<typeof orderedListRecipe>;
 export type OrderedListProps = HTMLArkProps<"ol"> & JsxStyleProps & OrderedListVariantProps;
-export declare const OrderedList: import("@ndla/styled-system/jsx").StyledComponent<"ol", {
+export declare const OrderedList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
     variant?: "numbers" | "letters" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLOListElement>>;
 export type UnOrderedListProps = HTMLArkProps<"ul"> & JsxStyleProps;
 export declare const UnOrderedList: import("@ndla/styled-system/jsx").StyledComponent<"ul", {}>;
 export declare const DefinitionList: import("@ndla/styled-system/jsx").StyledComponent<"dl", {}>;
 export type DefinitionListProps = HTMLArkProps<"dl"> & JsxStyleProps;
+export {};

package/lib/ArticleLists.js

@@ -4,7 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UnOrderedList = exports.OrderedList = exports.DefinitionList = void 0;
-var _jsx = require("@ndla/styled-system/jsx");
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -13,7 +17,7 @@ var _jsx = require("@ndla/styled-system/jsx");
  *
  */
 
-const OrderedList = exports.OrderedList = (0, _jsx.styled)("ol", {
+const orderedListRecipe = (0, _css.cva)({
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -59,7 +63,24 @@ const OrderedList = exports.OrderedList = (0, _jsx.styled)("ol", {
     }
   }
 });
-const UnOrderedList = exports.UnOrderedList = (0, _jsx.styled)("ul", {
+const StyledOrderedList = (0, _jsx2.styled)(_react2.ark.ol, {}, {
+  baseComponent: true
+});
+const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedList, {
+    css: _css.css.raw(orderedListRecipe.raw({
+      variant
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});
+const UnOrderedList = exports.UnOrderedList = (0, _jsx2.styled)("ul", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -72,7 +93,7 @@ const UnOrderedList = exports.UnOrderedList = (0, _jsx.styled)("ul", {
     }
   }
 });
-const DefinitionList = exports.DefinitionList = (0, _jsx.styled)("dl", {
+const DefinitionList = exports.DefinitionList = (0, _jsx2.styled)("dl", {
   base: {
     "& dt": {
       fontWeight: "bold"

package/lib/Badge.d.ts

@@ -30,9 +30,9 @@ declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
 }>;
 export type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipe>;
 export type BadgeProps = HTMLArkProps<"div"> & JsxStyleProps & BadgeVariantProps;
-export declare const Badge: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {
+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;
+} & import("@ndla/styled-system/types").WithCss & {
     colorTheme?: "neutral" | "brand1" | "brand2" | "brand3" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/Badge.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Badge = void 0;
-var _react = require("@ark-ui/react");
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _jsx = require("@ndla/styled-system/jsx");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -46,4 +48,20 @@ const badgeRecipe = (0, _css.cva)({
     }
   }
 });
-const Badge = exports.Badge = (0, _jsx.styled)(_react.ark.div, badgeRecipe);
+const StyledBadge = (0, _jsx2.styled)(_react2.ark.div, {}, {
+  baseComponent: true
+});
+const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    colorTheme,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
+    css: _css.css.raw(badgeRecipe.raw({
+      colorTheme
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/lib/BlockQuote.d.ts

@@ -26,9 +26,9 @@ declare const blockQuoteRecipe: import("@ndla/styled-system/types").RecipeRuntim
 }>;
 export type BlockQuoteVariantProps = RecipeVariantProps<typeof blockQuoteRecipe>;
 export type BlockQuoteProps = HTMLArkProps<"blockquote"> & JsxStyleProps & BlockQuoteVariantProps;
-export declare const BlockQuote: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & {
-    ref?: ((instance: HTMLQuoteElement | null) => void) | import("react").RefObject<HTMLQuoteElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {
+export declare const BlockQuote: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
     variant?: "neutral" | "brand1" | "brand2" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLQuoteElement>>;
 export {};

package/lib/BlockQuote.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlockQuote = void 0;
-var _react = require("@ark-ui/react");
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _jsx = require("@ndla/styled-system/jsx");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -40,4 +42,20 @@ const blockQuoteRecipe = (0, _css.cva)({
     variant: "neutral"
   }
 });
-const BlockQuote = exports.BlockQuote = (0, _jsx.styled)(_react.ark.blockquote, blockQuoteRecipe);
+const StyledBlockQuote = (0, _jsx2.styled)(_react2.ark.blockquote, {}, {
+  baseComponent: true
+});
+const BlockQuote = exports.BlockQuote = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBlockQuote, {
+    css: _css.css.raw(blockQuoteRecipe.raw({
+      variant
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/lib/Button.d.ts

@@ -127,7 +127,7 @@ export type ButtonVariantProps = {
 } & RecipeVariantProps<typeof buttonRecipe>;
 export type ButtonProps = HTMLArkProps<"button"> & JsxStyleProps & ButtonVariantProps;
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
     variant?: ButtonVariant | undefined;
 } & {
@@ -139,6 +139,6 @@ export type IconButtonVariantProps = {
 };
 export type IconButtonProps = HTMLArkProps<"button"> & IconButtonVariantProps & JsxStyleProps;
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & IconButtonVariantProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/Button.js

@@ -188,6 +188,7 @@ const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
   }
 });
 const StyledButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
+  baseComponent: true,
   defaultProps: {
     type: "button"
   }
@@ -210,6 +211,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
   });
 });
 const StyledIconButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
+  baseComponent: true,
   defaultProps: {
     type: "button"
   }

package/lib/Checkbox.d.ts

@@ -169,17 +169,17 @@ export type CheckboxRootProps = Checkbox.RootProps & CheckboxVariantProps & JsxS
 export declare const CheckboxRoot: import("react").ForwardRefExoticComponent<Checkbox.RootProps & {
     variant?: "checkbox" | "chip" | undefined;
 } & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<Checkbox.IndicatorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CheckboxLabel: ({ textStyle, children, ...props }: Checkbox.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CheckboxControl: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Checkbox.GroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CheckboxHiddenInput: import("react").ForwardRefExoticComponent<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/lib/Checkbox.js

@@ -227,7 +227,6 @@ const CheckboxLabel = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalCheckboxLabel, {
     ...props,
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       textStyle: textStyle,
       children: children

package/lib/Combobox.d.ts

@@ -8,7 +8,7 @@
 import { Combobox } from "@ark-ui/react";
 import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"input" | "label" | "content" | "list" | "root" | "item" | "itemIndicator" | "control" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "positioner" | "trigger", {
+declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"input" | "label" | "list" | "content" | "root" | "item" | "itemIndicator" | "control" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "positioner" | "trigger", {
     variant: {
         simple: {
             item: {
@@ -52,7 +52,7 @@ export declare const ComboboxItemGroupLabel: ({ children, textStyle, fontWeight,
 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, ...props }: Combobox.ItemTextProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+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>>;

package/lib/Combobox.js

@@ -180,10 +180,10 @@ const ComboboxItemGroupLabel = _ref2 => {
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxItemGroupLabel, {
-    forwardCssProp: true,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       fontWeight: fontWeight,
       ...props,
@@ -202,13 +202,18 @@ const ComboboxItemText = _ref3 => {
   let {
     textStyle = "label.medium",
     fontWeight = "bold",
+    children,
     ...props
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxItemText, {
-    forwardCssProp: true,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
-      ...props
+      ...props,
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })
     })
   });
 };
@@ -221,7 +226,6 @@ const ComboboxLabel = _ref4 => {
     ...props
   } = _ref4;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxLabel, {
-    forwardCssProp: true,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       textStyle: textStyle,

package/lib/Dialog.d.ts

@@ -90,24 +90,24 @@ export type DialogVariantProps = RecipeVariantProps<typeof dialogRecipe>;
 export type DialogRootProps = Dialog.RootProps & DialogVariantProps;
 export declare const InternalDialogRoot: (props: Dialog.RootProps & {
     variant?: "dialog" | "drawer" | undefined;
-    position?: "center" | "bottom" | "left" | "right" | "top" | undefined;
+    position?: "center" | "left" | "right" | "bottom" | "top" | undefined;
     size?: "small" | "xsmall" | "medium" | "large" | "full" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogRoot: ({ lazyMount, unmountOnExit, ...props }: DialogRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DialogStandaloneContent: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DialogPositioner: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DialogContent: import("react").ForwardRefExoticComponent<Dialog.ContentProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogDescription: ({ textStyle, ...rest }: Dialog.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DialogTitle: ({ textStyle, ...rest }: Dialog.TitleProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogDescription: ({ textStyle, children, ...rest }: Dialog.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: ({ textStyle, children, ...rest }: Dialog.TitleProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogCloseTrigger: import("react").ForwardRefExoticComponent<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogHeader: import("@ndla/styled-system/jsx").StyledComponent<"div", {}>;

package/lib/Dialog.js

@@ -287,14 +287,15 @@ const InternalDialogDescription = withContext(_react2.Dialog.Description, "descr
 const DialogDescription = _ref2 => {
   let {
     textStyle = "body.large",
+    children,
     ...rest
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalDialogDescription, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       textStyle: textStyle,
-      ...rest
+      ...rest,
+      children: children
     })
   });
 };
@@ -303,14 +304,15 @@ const InternalDialogTitle = withContext(_react2.Dialog.Title, "title");
 const DialogTitle = _ref3 => {
   let {
     textStyle = "title.medium",
+    children,
     ...rest
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalDialogTitle, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
       textStyle: textStyle,
-      ...rest
+      ...rest,
+      children: children
     })
   });
 };

package/lib/ExpandableBox.js

@@ -45,4 +45,6 @@ const ExpandableBoxSummary = exports.ExpandableBoxSummary = (0, _jsx.styled)(_re
       textStyle: "label.large!"
     }
   }
+}, {
+  baseComponent: true
 });

package/lib/Field.js

@@ -20,4 +20,6 @@ const FieldRoot = exports.FieldRoot = (0, _jsx.styled)(_react.Field.Root, {
     flexDirection: "column",
     gap: "3xsmall"
   }
+}, {
+  baseComponent: true
 });