@ndla/primitives 0.0.2 → 0.0.3

package/lib/Icon.d.ts

@@ -7,6 +7,7 @@
  */
 import { ComponentPropsWithRef } from "react";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 export declare const iconRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         xsmall: {
@@ -32,6 +33,6 @@ interface BaseIconProps extends ComponentPropsWithRef<"svg"> {
     title?: string;
     description?: string;
 }
-export type IconProps = BaseIconProps & IconVariantProps;
-export declare const Icon: ({ children, size, role, title, description, width, height, className, "aria-hidden": ariaHidden, ...props }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type IconProps = BaseIconProps & IconVariantProps & JsxStyleProps;
+export declare const Icon: ({ children, size, role, title, description, width, height, css: cssProp, "aria-hidden": ariaHidden, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Icon.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.iconRecipe = exports.Icon = 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.
@@ -46,6 +47,8 @@ const iconRecipe = exports.iconRecipe = (0, _css.cva)({
     }
   }
 });
+const StyledSvg = (0, _jsx2.styled)("svg");
+
 // TODO: Move this component over to ndla/icons
 const Icon = _ref => {
   let {
@@ -56,18 +59,18 @@ const Icon = _ref => {
     description,
     width,
     height,
-    className,
+    css: cssProp,
     "aria-hidden": ariaHidden = true,
     ...props
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSvg, {
     "data-icon": "",
     "aria-hidden": ariaHidden,
     preserveAspectRatio: "xMidYMid meet",
-    ...props,
-    className: (0, _css.cx)(iconRecipe({
+    css: _css.css.raw(iconRecipe.raw({
       size
-    }), className),
+    }), cssProp),
+    ...props,
     children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: title
     }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {

package/lib/Input.d.ts

@@ -5,16 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithRef, HTMLAttributes } from "react";
-export declare const InputContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const FormInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-interface TextAreaProps extends ComponentPropsWithRef<"textarea"> {
+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;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export interface InputProps extends HTMLArkProps<"input">, JsxStyleProps {
 }
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
-export declare const FormTextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const FormInput: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+interface TextAreaProps extends HTMLArkProps<"textarea">, JsxStyleProps {
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const FormTextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/lib/Input.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TextArea = exports.InputContainer = exports.Input = exports.FormTextArea = exports.FormInput = 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 _util = require("@ndla/util");
@@ -57,7 +58,7 @@ const inputCss = _css.css.raw({
     }
   }
 });
-const StyledInputContainer = (0, _jsx2.styled)("div", {
+const StyledInputContainer = (0, _jsx2.styled)(_react2.ark.div, {
   base: {
     width: "100%",
     display: "flex",
@@ -71,13 +72,13 @@ const StyledInputContainer = (0, _jsx2.styled)("div", {
 const InputContainer = exports.InputContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
-    className,
+    css: cssProp,
     ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputContext.Provider, {
     value: {},
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputContainer, {
-      className: (0, _css.cx)((0, _css.css)(inputCss), className),
+      css: _css.css.raw(inputCss, cssProp),
       ...rest,
       ref: ref,
       children: children
@@ -108,14 +109,15 @@ const baseTextAreaCss = _css.css.raw({
   resize: "none",
   overflowY: "hidden"
 });
+const StyledInput = (0, _jsx2.styled)(_react2.ark.input);
 const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
-    className,
+    css: cssProp,
     ...props
   } = _ref2;
   const context = (0, _react.useContext)(InputContext);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.input, {
-    className: (0, _css.cx)((0, _css.css)(baseInputCss, context ? undefined : inputCss), className),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInput, {
+    css: _css.css.raw(baseInputCss, context ? undefined : inputCss, cssProp),
     ref: ref,
     ...props
   });
@@ -127,9 +129,10 @@ const FormInput = exports.FormInput = /*#__PURE__*/(0, _react.forwardRef)((props
     ref: ref
   });
 });
+const StyledTextArea = (0, _jsx2.styled)(_react2.ark.textarea);
 const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
-    className,
+    css: cssProp,
     ...props
   } = _ref3;
   const context = (0, _react.useContext)(InputContext);
@@ -150,8 +153,8 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref3,
       window.removeEventListener("resize", resize);
     };
   }, [resize]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.textarea, {
-    className: (0, _css.cx)((0, _css.css)(baseInputCss, context ? undefined : inputCss, baseTextAreaCss), className),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTextArea, {
+    css: _css.css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp),
     ref: (0, _util.composeRefs)(ref, localRef),
     ...props
   });

package/lib/Label.d.ts

@@ -5,12 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithRef } from "react";
+import { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export type LegendProps = ComponentPropsWithRef<"legend"> & TextProps;
-export declare const Legend: import("react").ForwardRefExoticComponent<Omit<LegendProps, "ref"> & import("react").RefAttributes<HTMLLegendElement>>;
-export declare const FormLegend: import("react").ForwardRefExoticComponent<Omit<LegendProps, "ref"> & import("react").RefAttributes<HTMLLegendElement>>;
-export type LabelProps = ComponentPropsWithRef<"label"> & TextProps;
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const FormLabel: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+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;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLegendElement>>;
+export declare const FormLegend: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    forwardCssProp?: 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;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FormLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & TextProps & {
+    forwardCssProp?: 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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Legend = exports.Label = exports.FormLegend = exports.FormLabel = exports.Fieldset = 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");
@@ -17,7 +18,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,16 +31,16 @@ 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
   });
@@ -62,7 +63,7 @@ const FormLegend = exports.FormLegend = /*#__PURE__*/(0, _react.forwardRef)((pro
     ref: ref
   });
 });
-const StyledLabel = (0, _jsx2.styled)("label", {
+const StyledLabel = (0, _jsx2.styled)(_react2.ark.label, {
   base: {
     display: "inline-block",
     _disabled: {
@@ -74,16 +75,16 @@ 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
   });

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>>;