@ndla/primitives 0.0.12 → 0.0.13

package/lib/FieldErrorMessage.d.ts

@@ -7,5 +7,5 @@
  */
 import { TextProps } from "./Text";
 export declare const FieldErrorMessage: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/FieldErrorMessage.js

@@ -23,6 +23,8 @@ const StyledErrorText = (0, _jsx2.styled)(_react2.Field.ErrorText, {
     whiteSpace: "pre-line",
     justifyContent: "center"
   }
+}, {
+  baseComponent: true
 });
 const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

package/lib/FieldHelper.d.ts

@@ -7,5 +7,5 @@
  */
 import { TextProps } from "./Text";
 export declare const FieldHelper: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/FieldHelper.js

@@ -17,7 +17,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledFieldHelper = (0, _jsx2.styled)(_react2.Field.HelperText);
+const StyledFieldHelper = (0, _jsx2.styled)(_react2.Field.HelperText, {}, {
+  baseComponent: true
+});
 const FieldHelper = exports.FieldHelper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     textStyle = "label.small",

package/lib/Figure.d.ts

@@ -5,7 +5,62 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export declare const Figure: import("@ndla/styled-system/jsx").StyledComponent<"figure", {
+import { HTMLArkProps } from "@ark-ui/react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    size: {
+        full: {
+            width: "100%";
+        };
+        medium: {
+            tablet: {
+                width: "50%";
+            };
+            desktop: {
+                width: "65%";
+            };
+        };
+        small: {
+            tablet: {
+                width: "35%";
+            };
+            desktop: {
+                width: "50%";
+            };
+        };
+        xsmall: {
+            tablet: {
+                width: "25%";
+            };
+            desktop: {
+                width: "35%";
+            };
+        };
+    };
+    float: {
+        left: {
+            tablet: {
+                float: "left";
+                clear: "left";
+                paddingInlineEnd: "medium";
+            };
+        };
+        right: {
+            tablet: {
+                float: "right";
+                clear: "right";
+                paddingInlineStart: "medium";
+            };
+        };
+    };
+}>;
+export type FigureVariantProps = RecipeVariantProps<typeof figureRecipe>;
+export type FigureProps = HTMLArkProps<"figure"> & JsxStyleProps & FigureVariantProps;
+export declare const Figure: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
     size?: "small" | "xsmall" | "medium" | "full" | undefined;
     float?: "left" | "right" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

package/lib/Figure.js

@@ -4,7 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Figure = 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 Figure = exports.Figure = (0, _jsx.styled)("figure", {
+const figureRecipe = (0, _css.cva)({
   base: {
     position: "relative",
     transitionDuration: "normal",
@@ -78,4 +82,23 @@ const Figure = exports.Figure = (0, _jsx.styled)("figure", {
       marginBlock: "xsmall"
     }
   }]
+});
+const StyledFigure = (0, _jsx2.styled)(_react2.ark.figure, {}, {
+  baseComponent: true
+});
+const Figure = exports.Figure = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    float,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
+    css: _css.css.raw(figureRecipe.raw({
+      size,
+      float
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
 });

package/lib/FramedContent.d.ts

@@ -12,25 +12,22 @@ declare const framedContentRecipe: import("@ndla/styled-system/types").RecipeRun
         neutral: {
             backgroundColor: "surface.default";
             borderColor: "stroke.subtle";
-            boxShadowColor: "stroke.subtle";
         };
         brand1: {
             backgroundColor: "surface.brand.1.subtle";
             borderColor: "surface.brand.1.strong";
-            boxShadowColor: "surface.brand.1.strong";
         };
         brand2: {
             backgroundColor: "surface.brand.2.subtle";
             borderColor: "surface.brand.2.strong";
-            boxShadowColor: "surface.brand.2.strong";
         };
     };
 }>;
 export type FramedContentVariantProps = RecipeVariantProps<typeof framedContentRecipe>;
 export type FramedContentProps = HTMLArkProps<"div"> & JsxStyleProps & FramedContentVariantProps;
-export declare const FramedContent: 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 FramedContent: 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" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/FramedContent.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FramedContent = 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.
  *
@@ -19,25 +21,21 @@ const framedContentRecipe = (0, _css.cva)({
   base: {
     padding: "medium",
     border: "1px solid",
-    borderRadius: "small",
-    boxShadow: "4px 4px 0px 0px var(--shadow-color)"
+    borderRadius: "small"
   },
   variants: {
     colorTheme: {
       neutral: {
         backgroundColor: "surface.default",
-        borderColor: "stroke.subtle",
-        boxShadowColor: "stroke.subtle"
+        borderColor: "stroke.subtle"
       },
       brand1: {
         backgroundColor: "surface.brand.1.subtle",
-        borderColor: "surface.brand.1.strong",
-        boxShadowColor: "surface.brand.1.strong"
+        borderColor: "surface.brand.1.strong"
       },
       brand2: {
         backgroundColor: "surface.brand.2.subtle",
-        borderColor: "surface.brand.2.strong",
-        boxShadowColor: "surface.brand.2.strong"
+        borderColor: "surface.brand.2.strong"
       }
     }
   },
@@ -45,4 +43,20 @@ const framedContentRecipe = (0, _css.cva)({
     colorTheme: "neutral"
   }
 });
-const FramedContent = exports.FramedContent = (0, _jsx.styled)(_react.ark.div, framedContentRecipe);
+const StyledFramedContent = (0, _jsx2.styled)(_react2.ark.div, {}, {
+  baseComponent: true
+});
+const FramedContent = exports.FramedContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    colorTheme,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFramedContent, {
+    css: _css.css.raw(framedContentRecipe.raw({
+      colorTheme
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/lib/Input.d.ts

@@ -8,7 +8,7 @@
 import { HTMLArkProps } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 export declare const InputContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export interface InputProps extends HTMLArkProps<"input">, JsxStyleProps {
 }

package/lib/Input.js

@@ -67,6 +67,8 @@ const StyledInputContainer = (0, _jsx2.styled)(_react2.ark.div, {
       height: "medium"
     }
   }
+}, {
+  baseComponent: true
 });
 const InputContainer = exports.InputContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
@@ -108,7 +110,9 @@ const baseTextAreaCss = _css.css.raw({
   resize: "none",
   overflowY: "hidden"
 });
-const StyledInput = (0, _jsx2.styled)(_react2.ark.input);
+const StyledInput = (0, _jsx2.styled)(_react2.ark.input, {}, {
+  baseComponent: true
+});
 const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     css: cssProp,
@@ -128,7 +132,9 @@ const FieldInput = exports.FieldInput = /*#__PURE__*/(0, _react.forwardRef)((pro
     ref: ref
   })
 }));
-const StyledTextArea = (0, _jsx2.styled)(_react2.ark.textarea);
+const StyledTextArea = (0, _jsx2.styled)(_react2.ark.textarea, {}, {
+  baseComponent: true
+});
 const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     css: cssProp,

package/lib/Label.d.ts

@@ -10,13 +10,13 @@ import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
 export type LegendProps = HTMLArkProps<"legend"> & JsxStyleProps & TextProps;
 export declare const Legend: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLegendElement>>;
 export type LabelProps = HTMLArkProps<"label"> & TextProps & JsxStyleProps;
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & TextProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & TextProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const Fieldset: import("@ndla/styled-system/jsx").StyledComponent<"fieldset", {}>;

package/lib/Label.js

@@ -25,6 +25,8 @@ const StyledLegend = (0, _jsx2.styled)(_react2.ark.legend, {
       color: "text.subtle"
     }
   }
+}, {
+  baseComponent: true
 });
 // TODO: This is not exported for now. Let's wait and see when ark decides to release their legend and fieldset.
 const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -33,13 +35,15 @@ const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     fontWeight = "bold",
     css: cssProp,
     srOnly,
+    color,
     ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLegend, {
     css: _css.css.raw({
       textStyle,
       fontWeight,
-      srOnly
+      srOnly,
+      color
     }, cssProp),
     ...rest,
     ref: ref
@@ -52,6 +56,8 @@ const StyledLabel = (0, _jsx2.styled)(_react2.ark.label, {
       color: "text.subtle"
     }
   }
+}, {
+  baseComponent: true
 });
 const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
@@ -59,13 +65,15 @@ const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
     fontWeight = "bold",
     css: cssProp,
     srOnly,
+    color,
     ...rest
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLabel, {
     css: _css.css.raw({
       textStyle,
       fontWeight,
-      srOnly
+      srOnly,
+      color
     }, cssProp),
     ...rest,
     ref: ref

package/lib/Menu.d.ts

@@ -49,31 +49,31 @@ declare const itemCva: import("@ndla/styled-system/types").RecipeRuntimeFn<{
 export type MenuRootProps = Menu.RootProps;
 export declare const MenuRoot: ({ lazyMount, unmountOnExit, ...props }: MenuRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MenuContent: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuItemGroupLabel: ({ textStyle, fontWeight, children, ...props }: Menu.ItemGroupLabelProps & JsxStyleProps & TextProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MenuItemGroup: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export type MenuItemVariantProps = RecipeVariantProps<typeof itemCva>;
 export type MenuItemProps = Menu.ItemProps & JsxStyleProps & MenuItemVariantProps;
 export declare const MenuItem: import("react").ForwardRefExoticComponent<Menu.ItemProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
     variant?: "action" | "destructive" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuPositioner: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuTriggerItem: import("react").ForwardRefExoticComponent<Menu.TriggerItemProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
     variant?: "action" | "destructive" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.TriggerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuSeparator: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;
 export {};

package/lib/Menu.js

@@ -109,7 +109,7 @@ const menuRecipe = (0, _css.sva)({
       padding: "3xsmall",
       gap: "3xsmall",
       background: "surface.default",
-      boxShadow: "xsmall",
+      boxShadow: "small",
       borderRadius: "xsmall",
       outline: "none",
       zIndex: "dropdown",
@@ -160,7 +160,6 @@ const MenuItemGroupLabel = _ref2 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalMenuItemGroupLabel, {
     ...props,
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       textStyle: textStyle,
       fontWeight: fontWeight,

package/lib/MessageBox.d.ts

@@ -29,9 +29,9 @@ declare const messageBoxRecipe: import("@ndla/styled-system/types").RecipeRuntim
 }>;
 export type MessageBoxVariantProps = RecipeVariantProps<typeof messageBoxRecipe>;
 export type MessageBoxProps = HTMLArkProps<"div"> & JsxStyleProps & MessageBoxVariantProps;
-export declare const MessageBox: 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 MessageBox: 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 & {
     variant?: "error" | "success" | "info" | "warning" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/MessageBox.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MessageBox = 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.
  *
@@ -48,4 +50,20 @@ const messageBoxRecipe = (0, _css.cva)({
     }
   }
 });
-const MessageBox = exports.MessageBox = (0, _jsx.styled)(_react.ark.div, messageBoxRecipe);
+const StyledMessageBox = (0, _jsx2.styled)(_react2.ark.div, {}, {
+  baseComponent: true
+});
+const MessageBox = exports.MessageBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMessageBox, {
+    css: _css.css.raw(messageBoxRecipe.raw({
+      variant
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/lib/Pagination.d.ts

@@ -9,17 +9,17 @@ import { Pagination } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 export type PaginationRootProps = JsxStyleProps & Pagination.RootProps;
 export declare const PaginationRoot: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.RootProps & import("react").RefAttributes<HTMLElement>>;
 export declare const PaginationItem: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PaginationPrevTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/Popover.d.ts

@@ -10,34 +10,34 @@ import { JsxStyleProps } from "@ndla/styled-system/types";
 export type PopoverRootProps = Popover.RootProps;
 export declare const PopoverRoot: ({ lazyMount, unmountOnExit, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<Popover.AnchorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverArrowStandalone: import("react").ForwardRefExoticComponent<Popover.ArrowProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverArrow: (props: Popover.ArrowTipProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PopoverArrowTip: import("react").ForwardRefExoticComponent<Popover.ArrowTipProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverCloseTrigger: import("react").ForwardRefExoticComponent<Popover.CloseTriggerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PopoverContentStandalone: import("react").ForwardRefExoticComponent<Popover.ContentProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverContent: (props: Popover.ContentProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PopoverDescription: import("react").ForwardRefExoticComponent<Popover.DescriptionProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const PopoverIndicator: import("react").ForwardRefExoticComponent<Popover.IndicatorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverPositioner: import("react").ForwardRefExoticComponent<Popover.PositionerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverTitle: import("react").ForwardRefExoticComponent<Popover.TitleProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Popover.TriggerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/RadioGroup.d.ts

@@ -12,19 +12,19 @@ export interface RadioGroupRootProps extends RadioGroup.RootProps, JsxStyleProps
 }
 export declare const RadioGroupRoot: import("react").ForwardRefExoticComponent<RadioGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const RadioGroupIndicator: import("react").ForwardRefExoticComponent<RadioGroup.IndicatorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const RadioGroupItemControl: import("react").ForwardRefExoticComponent<RadioGroup.ItemControlProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroup.ItemProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const RadioGroupItemText: ({ textStyle, children, ...props }: RadioGroup.ItemTextProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InternalRadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & TextProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const RadioGroupItemHiddenInput: import("react").ForwardRefExoticComponent<RadioGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/RadioGroup.js

@@ -109,9 +109,9 @@ const RadioGroupItemText = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupItemText, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -130,7 +130,6 @@ const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwar
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
     ref: ref,
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       textStyle: textStyle,
       ...props