@ndla/primitives 0.0.2 → 0.0.4

package/lib/Label.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Legend = exports.Label = exports.FormLegend = exports.FormLabel = exports.Fieldset = void 0;
+exports.Legend = exports.Label = exports.Fieldset = exports.FieldLabel = void 0;
 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 _FormControl = require("./FormControl");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -17,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledLegend = (0, _jsx2.styled)("legend", {
+const StyledLegend = (0, _jsx2.styled)(_react2.ark.legend, {
   base: {
     float: "none",
     width: "inherit",
@@ -30,39 +30,21 @@ const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
   let {
     textStyle = "label.medium",
     fontWeight = "bold",
-    className,
+    css: cssProp,
     srOnly,
     ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLegend, {
-    className: (0, _css.cx)((0, _css.css)({
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       srOnly
-    }), className),
+    }, cssProp),
     ...rest,
     ref: ref
   });
 });
-const FormLegend = exports.FormLegend = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _control$getLabelProp;
-  const control = (0, _FormControl.useFormControlContext)();
-  // Legend does not use htmlFor (for), so we remove it.
-  const {
-    id: _,
-    htmlFor: __,
-    ...fieldProps
-  } = (_control$getLabelProp = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp !== void 0 ? _control$getLabelProp : {
-    ref,
-    ...props
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Legend, {
-    ...props,
-    ...fieldProps,
-    ref: ref
-  });
-});
-const StyledLabel = (0, _jsx2.styled)("label", {
+const StyledLabel = (0, _jsx2.styled)(_react2.ark.label, {
   base: {
     display: "inline-block",
     _disabled: {
@@ -74,33 +56,27 @@ const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
   let {
     textStyle = "label.medium",
     fontWeight = "bold",
-    className,
+    css: cssProp,
     srOnly,
     ...rest
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLabel, {
-    className: (0, _css.cx)((0, _css.css)({
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       srOnly
-    }), className),
+    }, cssProp),
     ...rest,
     ref: ref
   });
 });
-const FormLabel = exports.FormLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _control$getLabelProp2;
-  const control = (0, _FormControl.useFormControlContext)();
-  const fieldProps = (_control$getLabelProp2 = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp2 !== void 0 ? _control$getLabelProp2 : {
-    ref,
-    ...props
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Label, {
+  asChild: true,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
     ...props,
-    ...fieldProps,
     ref: ref
-  });
-});
+  })
+}));
 const Fieldset = exports.Fieldset = (0, _jsx2.styled)("fieldset", {
   base: {
     border: "none",

package/lib/Menu.d.ts

@@ -6,20 +6,73 @@
  *
  */
 import { Menu } from "@ark-ui/react";
-import { StyledVariantProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
+declare const itemCva: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        action: {
+            _hover: {
+                background: "surface.hover";
+            };
+            _highlighted: {
+                background: "surface.hover";
+            };
+            _active: {
+                background: "surface.active";
+            };
+        };
+        destructive: {
+            color: "text.error";
+            "& svg": {
+                color: "icon.error";
+            };
+            _hover: {
+                color: "text.default";
+                "& svg": {
+                    color: "icon.default";
+                };
+                background: "surface.errorSubtle.hover";
+            };
+            _highlighted: {
+                color: "text.default";
+                "& svg": {
+                    color: "icon.default";
+                };
+                background: "surface.errorSubtle.hover";
+            };
+            _active: {
+                background: "surface.errorSubtle.active";
+            };
+        };
+    };
+}>;
 export type MenuRootProps = Menu.RootProps;
-export declare const MenuRoot: ({ lazyMount, unmountOnExit, ...props }: MenuRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const MenuContent: import("react").ForwardRefExoticComponent<Menu.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuItemGroupLabel: ({ textStyle, fontWeight, children, ...props }: Menu.ItemGroupLabelProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const MenuItemGroup: import("react").ForwardRefExoticComponent<Menu.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export type MenuItemVariantProps = StyledVariantProps<typeof MenuItem>;
-export declare const MenuItem: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Menu.ItemProps & import("react").RefAttributes<HTMLDivElement>>, {
+export declare const MenuRoot: ({ lazyMount, unmountOnExit, ...props }: MenuRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuContent: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: 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;
+} & import("@ndla/styled-system/types").WithCss & Menu.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export type MenuItemVariantProps = RecipeVariantProps<typeof itemCva>;
+export declare const MenuItem: import("react").ForwardRefExoticComponent<Menu.ItemProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
     variant?: "action" | "destructive" | undefined;
-}>;
-export declare const MenuPositioner: import("react").ForwardRefExoticComponent<Menu.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuTriggerItem: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Menu.TriggerItemProps & import("react").RefAttributes<HTMLDivElement>>, {
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuPositioner: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: 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;
+} & import("@ndla/styled-system/types").WithCss & {
     variant?: "action" | "destructive" | undefined;
-}>;
-export declare const MenuTrigger: import("react").ForwardRefExoticComponent<Menu.TriggerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuSeparator: import("react").ForwardRefExoticComponent<Menu.SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuTrigger: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Menu.TriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuSeparator: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Menu.SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;
+export {};

package/lib/Menu.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuTriggerItem = exports.MenuTrigger = exports.MenuSeparator = exports.MenuRoot = exports.MenuPositioner = exports.MenuItemGroupLabel = exports.MenuItemGroup = exports.MenuItem = exports.MenuContent = void 0;
+var _react = require("react");
 var _anatomy = require("@ark-ui/anatomy");
-var _react = require("@ark-ui/react");
+var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _jsx2 = require("@ndla/styled-system/jsx");
 var _createStyleContext = require("./createStyleContext");
 var _Text = require("./Text");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const itemStyle = {
+const itemStyle = _css.css.raw({
   display: "flex",
   alignItems: "center",
   borderRadius: "xsmall",
@@ -53,7 +53,7 @@ const itemStyle = {
       }
     }
   }
-};
+});
 const itemCva = (0, _css.cva)({
   defaultVariants: {
     variant: "action"
@@ -135,7 +135,7 @@ const {
   withRootProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(menuRecipe);
-const InternalMenuRoot = withRootProvider(_react.Menu.Root);
+const InternalMenuRoot = withRootProvider(_react2.Menu.Root);
 const MenuRoot = _ref => {
   let {
     lazyMount = true,
@@ -149,8 +149,8 @@ const MenuRoot = _ref => {
   });
 };
 exports.MenuRoot = MenuRoot;
-const MenuContent = exports.MenuContent = withContext(_react.Menu.Content, "content");
-const InternalMenuItemGroupLabel = withContext(_react.Menu.ItemGroupLabel, "itemGroupLabel");
+const MenuContent = exports.MenuContent = withContext(_react2.Menu.Content, "content");
+const InternalMenuItemGroupLabel = withContext(_react2.Menu.ItemGroupLabel, "itemGroupLabel");
 const MenuItemGroupLabel = _ref2 => {
   let {
     textStyle = "label.medium",
@@ -169,11 +169,37 @@ const MenuItemGroupLabel = _ref2 => {
   });
 };
 exports.MenuItemGroupLabel = MenuItemGroupLabel;
-const MenuItemGroup = exports.MenuItemGroup = withContext(_react.Menu.ItemGroup, "itemGroup");
-const InternalMenuItem = withContext(_react.Menu.Item, "item");
-const MenuItem = exports.MenuItem = (0, _jsx2.styled)(InternalMenuItem, itemCva);
-const MenuPositioner = exports.MenuPositioner = withContext(_react.Menu.Positioner, "positioner");
-const InternalMenuTriggerItem = withContext(_react.Menu.TriggerItem, "triggerItem");
-const MenuTriggerItem = exports.MenuTriggerItem = (0, _jsx2.styled)(InternalMenuTriggerItem, itemCva);
-const MenuTrigger = exports.MenuTrigger = withContext(_react.Menu.Trigger, "trigger");
-const MenuSeparator = exports.MenuSeparator = withContext(_react.Menu.Separator, "separator");
+const MenuItemGroup = exports.MenuItemGroup = withContext(_react2.Menu.ItemGroup, "itemGroup");
+const InternalMenuItem = withContext(_react2.Menu.Item, "item");
+const MenuItem = exports.MenuItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    css: cssProp = {},
+    variant,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalMenuItem, {
+    css: [itemCva.raw({
+      variant
+    }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])],
+    ...props,
+    ref: ref
+  });
+});
+const MenuPositioner = exports.MenuPositioner = withContext(_react2.Menu.Positioner, "positioner");
+const InternalMenuTriggerItem = withContext(_react2.Menu.TriggerItem, "triggerItem");
+const MenuTriggerItem = exports.MenuTriggerItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    css: cssProp = {},
+    variant,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalMenuTriggerItem, {
+    css: [itemCva.raw({
+      variant
+    }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])],
+    ...props,
+    ref: ref
+  });
+});
+const MenuTrigger = exports.MenuTrigger = withContext(_react2.Menu.Trigger, "trigger");
+const MenuSeparator = exports.MenuSeparator = withContext(_react2.Menu.Separator, "separator");

package/lib/MessageBox.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef } from "react";
-import { RecipeVariantProps } from "@ndla/styled-system/types";
+import { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const messageBoxRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         info: {
@@ -28,6 +28,10 @@ declare const messageBoxRecipe: import("@ndla/styled-system/types").RecipeRuntim
     };
 }>;
 export type MessageBoxVariantProps = RecipeVariantProps<typeof messageBoxRecipe>;
-export type MessageBoxProps = ComponentPropsWithoutRef<"div"> & MessageBoxVariantProps;
-export declare const MessageBox: ({ className, variant, ...rest }: MessageBoxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+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>, {
+    variant?: "error" | "success" | "info" | "warning" | undefined;
+}>;
 export {};

package/lib/MessageBox.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MessageBox = void 0;
+var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
+var _jsx = require("@ndla/styled-system/jsx");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -48,17 +48,4 @@ const messageBoxRecipe = (0, _css.cva)({
     }
   }
 });
-const MessageBox = _ref => {
-  let {
-    className,
-    variant,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
-    className: (0, _css.cx)(messageBoxRecipe({
-      variant
-    }), className),
-    ...rest
-  });
-};
-exports.MessageBox = MessageBox;
+const MessageBox = exports.MessageBox = (0, _jsx.styled)(_react.ark.div, messageBoxRecipe);

package/lib/NdlaLogo.d.ts

@@ -7,9 +7,10 @@
  */
 import { ComponentPropsWithoutRef } from "react";
 import { ColorToken } from "@ndla/styled-system/tokens";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 export type LogoProps = ComponentPropsWithoutRef<"svg"> & {
     color?: ColorToken;
-};
-export declare const NdlaLogoEn: (props: LogoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const NdlaLogoNb: (props: LogoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const NdlaLogoText: (props: LogoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & JsxStyleProps;
+export declare const NdlaLogoEn: (props: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NdlaLogoNb: (props: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NdlaLogoText: (props: LogoProps) => import("react/jsx-runtime").JSX.Element;

package/lib/NdlaLogo.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NdlaLogoText = exports.NdlaLogoNb = exports.NdlaLogoEn = void 0;
 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.
@@ -17,14 +18,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 const BaseSvg = _ref => {
   let {
     color = "primary",
-    className,
+    css: cssProp,
     ...props
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.svg, {
     xmlns: "http://www.w3.org/2000/svg",
-    className: (0, _css.cx)((0, _css.css)({
+    css: _css.css.raw({
       color
-    }), className),
+    }, cssProp),
     ...props
   });
 };

package/lib/Pagination.d.ts

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

package/lib/Popover.d.ts

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

package/lib/RadioGroup.d.ts

@@ -6,14 +6,25 @@
  *
  */
 import { RadioGroup } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export interface RadioGroupRootProps extends RadioGroup.RootProps {
+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 & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioGroupItemControl: import("react").ForwardRefExoticComponent<RadioGroup.ItemControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const RadioGroupItemText: ({ textStyle, ...props }: RadioGroup.ItemTextProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const InternalRadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & TextProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupIndicator: import("react").ForwardRefExoticComponent<RadioGroup.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItemControl: import("react").ForwardRefExoticComponent<RadioGroup.ItemControlProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroup.ItemProps & {
+    forwardCssProp?: 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;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & TextProps & {
+    forwardCssProp?: 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

@@ -9,7 +9,6 @@ var _anatomy = require("@ark-ui/anatomy");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
-var _FormControl = require("./FormControl");
 var _Label = require("./Label");
 var _Text = require("./Text");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -98,14 +97,7 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(radioGroupRecipe);
-const InternalRadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root");
-const RadioGroupRoot = exports.RadioGroupRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const field = (0, _FormControl.useFormControl)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupRoot, {
-    ...field,
-    ref: ref
-  });
-});
+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");
@@ -113,14 +105,18 @@ const InternalRadioGroupItemText = withContext(_react2.RadioGroup.ItemText, "ite
 const RadioGroupItemText = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupItemText, {
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
-      as: "span",
+      asChild: true,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: children
+      })
     })
   });
 };

package/lib/Skeleton.d.ts

@@ -6,6 +6,9 @@
  *
  */
 import { HTMLArkProps } from "@ark-ui/react";
-export interface SkeletonProps extends HTMLArkProps<"div"> {
+import { JsxStyleProps } from "@ndla/styled-system/types";
+export declare const Skeleton: 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 interface SkeletonProps extends HTMLArkProps<"div">, JsxStyleProps {
 }
-export declare const Skeleton: (props: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/Skeleton.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Skeleton = void 0;
 var _react = require("@ark-ui/react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
+var _jsx = require("@ndla/styled-system/jsx");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -15,7 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledDiv = (0, _jsx2.styled)(_react.ark.div, {
+const Skeleton = exports.Skeleton = (0, _jsx.styled)(_react.ark.div, {
   base: {
     animation: "skeleton-pulse",
     backgroundColor: "surface.disabled",
@@ -29,10 +28,4 @@ const StyledDiv = (0, _jsx2.styled)(_react.ark.div, {
       visibility: "hidden"
     }
   }
-});
-const Skeleton = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDiv, {
-    ...props
-  });
-};
-exports.Skeleton = Skeleton;
+});

package/lib/Slider.d.ts

@@ -6,12 +6,23 @@
  *
  */
 import { Slider } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export type SliderRootProps = Slider.RootProps;
-export declare const SliderRoot: import("react").ForwardRefExoticComponent<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderControl: import("react").ForwardRefExoticComponent<Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderTrack: import("react").ForwardRefExoticComponent<Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderRange: import("react").ForwardRefExoticComponent<Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderThumb: import("react").ForwardRefExoticComponent<Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderLabel: ({ textStyle, ...props }: Slider.LabelProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type SliderRootProps = Slider.RootProps & JsxStyleProps;
+export declare const SliderRoot: import("react").ForwardRefExoticComponent<Slider.RootProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderControl: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderTrack: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderRange: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderLabel: ({ textStyle, ...props }: Slider.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SliderHiddenInput: import("react").ForwardRefExoticComponent<Slider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;