@ndla/primitives 0.0.2 → 0.0.3

package/lib/Badge.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Badge = 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.
  *
@@ -32,7 +32,7 @@ const badgeRecipe = (0, _css.cva)({
         borderColor: "surface.brand.1.strong"
       },
       brand2: {
-        backgroundColor: "surface.brand.2.subtle",
+        backgroundColor: "surface.brand.2.moderate",
         borderColor: "surface.brand.2.strong"
       },
       brand3: {
@@ -46,17 +46,4 @@ const badgeRecipe = (0, _css.cva)({
     }
   }
 });
-const Badge = _ref => {
-  let {
-    colorTheme,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
-    className: (0, _css.cx)(badgeRecipe({
-      colorTheme
-    }), className),
-    ...rest
-  });
-};
-exports.Badge = Badge;
+const Badge = exports.Badge = (0, _jsx.styled)(_react.ark.div, badgeRecipe);

package/lib/BlockQuote.d.ts

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef } from "react";
+import { HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 declare const blockQuoteRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         neutral: {
@@ -23,6 +24,10 @@ declare const blockQuoteRecipe: import("@ndla/styled-system/types").RecipeRuntim
     };
 }>;
 export type BlockQuoteVariantProps = RecipeVariantProps<typeof blockQuoteRecipe>;
-export type BlockQuoteProps = ComponentPropsWithoutRef<"blockquote"> & BlockQuoteVariantProps;
-export declare const BlockQuote: ({ className, variant, ...rest }: BlockQuoteProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type BlockQuoteProps = HTMLArkProps<"blockquote"> & JsxStyleProps & BlockQuoteVariantProps;
+export declare const BlockQuote: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & {
+    ref?: ((instance: HTMLQuoteElement | null) => void) | import("react").RefObject<HTMLQuoteElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {
+    variant?: "neutral" | "brand1" | "brand2" | undefined;
+}>;
 export {};

package/lib/BlockQuote.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlockQuote = 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.
  *
@@ -40,17 +40,4 @@ const blockQuoteRecipe = (0, _css.cva)({
     variant: "neutral"
   }
 });
-const BlockQuote = _ref => {
-  let {
-    className,
-    variant,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.blockquote, {
-    className: (0, _css.cx)(blockQuoteRecipe({
-      variant
-    }), className),
-    ...rest
-  });
-};
-exports.BlockQuote = BlockQuote;
+const BlockQuote = exports.BlockQuote = (0, _jsx.styled)(_react.ark.blockquote, blockQuoteRecipe);

package/lib/Button.d.ts

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithRef } from "react";
+import { HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps, RecipeVariant } from "@ndla/styled-system/types";
 export declare const buttonBaseRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         primary: {
@@ -118,14 +119,26 @@ export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRun
         };
     };
 }>;
-export type ButtonVariantProps = RecipeVariantProps<typeof buttonBaseRecipe> & RecipeVariantProps<typeof buttonRecipe>;
-export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariantProps & {
-    variant?: Exclude<NonNullable<ButtonVariantProps>["variant"], "clear" | "clearSubtle">;
-};
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type IconButtonVariantProps = RecipeVariantProps<typeof buttonBaseRecipe>;
-export type IconButtonProps = ComponentPropsWithRef<"button"> & IconButtonVariantProps & {
-    variant?: Exclude<NonNullable<IconButtonVariantProps>["variant"], "link">;
-};
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const iconButtonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<import("@ndla/styled-system/types").RecipeVariantRecord>;
+type Variant = RecipeVariant<typeof buttonBaseRecipe>["variant"];
+type ButtonVariant = Exclude<Variant, "clear" | "clearSubtle">;
+export type ButtonVariantProps = {
+    variant?: ButtonVariant;
+} & RecipeVariantProps<typeof buttonRecipe>;
+export type ButtonProps = HTMLArkProps<"button"> & JsxStyleProps & ButtonVariantProps;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
+    variant?: ButtonVariant | undefined;
+} & {
+    size?: "small" | "default" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+type IconButtonVariant = Exclude<Variant, "link">;
+export type IconButtonVariantProps = {
+    variant?: IconButtonVariant;
+};
+export type IconButtonProps = HTMLArkProps<"button"> & IconButtonVariantProps & JsxStyleProps;
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & IconButtonVariantProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Button.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.iconButtonRecipe = exports.buttonRecipe = exports.buttonBaseRecipe = exports.IconButton = exports.Button = 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 _jsxRuntime = require("react/jsx-runtime");
@@ -166,53 +167,59 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
     }
   }
 });
+const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
+  base: {
+    lineHeight: "1",
+    minHeight: "unset",
+    height: "fit-content",
+    "& svg": {
+      marginInline: "0",
+      marginBlock: "0",
+      width: "medium",
+      height: "medium"
+    },
+    paddingInline: "xsmall",
+    paddingBlock: "xsmall"
+  }
+});
+const StyledButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
+  defaultProps: {
+    type: "button"
+  }
+});
 const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    type,
-    size,
-    className,
     variant,
-    ...rest
+    size,
+    css: cssProp,
+    ...props
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.button, {
-    type: type !== null && type !== void 0 ? type : "button",
-    className: (0, _css.cx)((0, _css.css)(buttonBaseRecipe.raw({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    ...props,
+    css: _css.css.raw(buttonBaseRecipe.raw({
       variant
     }), buttonRecipe.raw({
       size
-    })), className),
-    ...rest,
+    }), cssProp),
     ref: ref
   });
 });
+const StyledIconButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
+  defaultProps: {
+    type: "button"
+  }
+});
 const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
-    type,
-    className,
     variant,
-    ...rest
+    css: cssProp,
+    ...props
   } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.button, {
-    type: type !== null && type !== void 0 ? type : "button",
-    className: (0, _css.cx)((0, _css.css)(buttonBaseRecipe.raw({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
+    ...props,
+    css: _css.css.raw(buttonBaseRecipe.raw({
       variant
-    }), iconButtonRecipe.raw()), className),
-    ...rest,
+    }), iconButtonRecipe.raw(), cssProp),
     ref: ref
   });
-});
-const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
-  base: {
-    lineHeight: "1",
-    minHeight: "unset",
-    height: "fit-content",
-    "& svg": {
-      marginInline: "0",
-      marginBlock: "0",
-      width: "medium",
-      height: "medium"
-    },
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall"
-  }
 });

package/lib/Checkbox.d.ts

@@ -6,10 +6,17 @@
  *
  */
 import { Checkbox } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export type CheckboxRootProps = Checkbox.RootProps;
-export declare const CheckboxRoot: import("react").ForwardRefExoticComponent<Checkbox.RootProps & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<Checkbox.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CheckboxLabel: ({ textStyle, children, ...props }: Checkbox.LabelProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const CheckboxControl: import("react").ForwardRefExoticComponent<Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export type CheckboxRootProps = Checkbox.RootProps & JsxStyleProps;
+export declare const CheckboxRoot: import("react").ForwardRefExoticComponent<Checkbox.RootProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<Checkbox.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CheckboxLabel: ({ textStyle, children, ...props }: Checkbox.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxControl: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CheckboxHiddenInput: import("react").ForwardRefExoticComponent<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/Dialog.d.ts

@@ -7,9 +7,9 @@
  */
 import { Dialog } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
-import { SystemProperties } from "@ndla/styled-system/types";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "positioner" | "backdrop", {
+declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "content" | "trigger" | "backdrop" | "positioner" | "closeTrigger", {
     variant: {
         drawer: {
             content: {
@@ -92,14 +92,22 @@ export declare const InternalDialogRoot: (props: Dialog.RootProps & {
     variant?: "dialog" | "drawer" | undefined;
     position?: "center" | "bottom" | "left" | "right" | "top" | undefined;
     size?: "small" | "xsmall" | "medium" | "large" | "full" | undefined;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const DialogRoot: ({ lazyMount, unmountOnExit, ...props }: DialogRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Dialog.BackdropProps> & Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogStandaloneContent: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Dialog.ContentProps> & Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogPositioner: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Dialog.PositionerProps> & Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<Omit<SystemProperties, keyof Dialog.ContentProps> & Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogDescription: ({ textStyle, ...rest }: Dialog.DescriptionProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const DialogTitle: ({ textStyle, ...rest }: Dialog.TitleProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogRoot: ({ lazyMount, unmountOnExit, ...props }: DialogRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogStandaloneContent: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogPositioner: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<Dialog.ContentProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogDescription: ({ textStyle, ...rest }: Dialog.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: ({ textStyle, ...rest }: Dialog.TitleProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogCloseTrigger: import("react").ForwardRefExoticComponent<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogHeader: import("@ndla/styled-system/jsx").StyledComponent<"div", {}>;

package/lib/Dialog.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InternalDialogRoot = exports.DialogTrigger = exports.DialogTitle = exports.DialogStandaloneContent = exports.DialogRoot = exports.DialogPositioner = exports.DialogHeader = exports.DialogDescription = exports.DialogContent = exports.DialogCloseTrigger = exports.DialogBody = exports.DialogBackdrop = void 0;
 var _react = require("react");
+var _anatomy = require("@ark-ui/anatomy");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _jsx2 = require("@ndla/styled-system/jsx");
@@ -20,9 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const dialogRecipe = (0, _css.sva)({
-  // We only use a subset of the dialog components, so we roll our own slots instead of relying on @ark/anatomy.
-  slots: ["positioner", "backdrop", "content"],
-  className: "dialog",
+  slots: _anatomy.dialogAnatomy.keys(),
   base: {
     backdrop: {
       position: "fixed",
@@ -285,30 +284,30 @@ const DialogContent = exports.DialogContent = /*#__PURE__*/(0, _react.forwardRef
     })
   })]
 }));
+const InternalDialogDescription = withContext(_react2.Dialog.Description, "description");
 const DialogDescription = _ref2 => {
   let {
     textStyle = "body.large",
     ...rest
   } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Dialog.Description, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalDialogDescription, {
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
-      as: "p",
       textStyle: textStyle,
       ...rest
     })
   });
 };
 exports.DialogDescription = DialogDescription;
+const InternalDialogTitle = withContext(_react2.Dialog.Title, "title");
 const DialogTitle = _ref3 => {
   let {
     textStyle = "title.medium",
     ...rest
   } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Dialog.Title, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalDialogTitle, {
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
-      as: "h1",
       textStyle: textStyle,
       ...rest
     })

package/lib/ExpandableBox.d.ts

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef } from "react";
-export type ExpandableBoxProps = ComponentPropsWithoutRef<"details">;
-export declare const ExpandableBox: (props: ExpandableBoxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type ExpandableBoxSummaryProps = ComponentPropsWithoutRef<"summary">;
-export declare const ExpandableBoxSummary: ({ children, ...rest }: ExpandableBoxSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+export type ExpandableBoxProps = HTMLArkProps<"details"> & JsxStyleProps;
+export declare const ExpandableBox: import("@ndla/styled-system/jsx").StyledComponent<"details", {}>;
+export type ExpandableBoxSummaryProps = HTMLArkProps<"summary"> & JsxStyleProps;
+export declare const ExpandableBoxSummary: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;

package/lib/ExpandableBox.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandableBoxSummary = exports.ExpandableBox = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("@ark-ui/react");
+var _jsx = require("@ndla/styled-system/jsx");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -14,7 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledExpandableBox = (0, _jsx2.styled)("details", {
+const ExpandableBox = exports.ExpandableBox = (0, _jsx.styled)("details", {
   base: {
     transitionDuration: "fast",
     width: "100%",
@@ -31,11 +31,7 @@ const StyledExpandableBox = (0, _jsx2.styled)("details", {
     }
   }
 });
-const ExpandableBox = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandableBox, {
-  ...props
-});
-exports.ExpandableBox = ExpandableBox;
-const StyledExpandableBoxSummary = (0, _jsx2.styled)("summary", {
+const ExpandableBoxSummary = exports.ExpandableBoxSummary = (0, _jsx.styled)(_react.ark.summary, {
   base: {
     cursor: "pointer",
     margin: "-medium",
@@ -49,15 +45,4 @@ const StyledExpandableBoxSummary = (0, _jsx2.styled)("summary", {
       textStyle: "label.large!"
     }
   }
-});
-const ExpandableBoxSummary = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandableBoxSummary, {
-    ...rest,
-    children: children
-  });
-};
-exports.ExpandableBoxSummary = ExpandableBoxSummary;
+});

package/lib/FieldErrorMessage.d.ts

@@ -6,6 +6,6 @@
  *
  */
 import { TextProps } from "./Text";
-export declare const FieldErrorMessage: import("react").ForwardRefExoticComponent<Omit<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+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;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/FieldErrorMessage.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldErrorMessage = 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,10 +18,11 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledErrorMessage = (0, _jsx2.styled)("div", {
+const StyledErrorMessage = (0, _jsx2.styled)(_react2.ark.div, {
   base: {
     color: "text.error",
-    whiteSpace: "pre-line"
+    whiteSpace: "pre-line",
+    justifyContent: "center"
   }
 });
 const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -28,9 +30,9 @@ const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.fo
   let {
     textStyle = "label.small",
     fontWeight,
+    css: cssProp,
     color,
     srOnly,
-    className,
     ...props
   } = _ref;
   const field = (0, _FormControl.useFormControlContext)();
@@ -40,11 +42,11 @@ const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.fo
       ref,
       ...props
     }),
-    className: (0, _css.cx)((0, _css.css)({
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       color,
-      srOnly: srOnly
-    }), className)
+      srOnly
+    }, cssProp)
   });
 });

package/lib/FieldHelper.d.ts

@@ -6,6 +6,6 @@
  *
  */
 import { TextProps } from "./Text";
-export declare const FieldHelper: import("react").ForwardRefExoticComponent<Omit<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+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;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/FieldHelper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldHelper = 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,6 +18,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+const StyledDiv = (0, _jsx2.styled)(_react2.ark.div);
 const FieldHelper = exports.FieldHelper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   var _field$getHelpTextPro;
   let {
@@ -24,20 +26,20 @@ const FieldHelper = exports.FieldHelper = /*#__PURE__*/(0, _react.forwardRef)((_
     fontWeight,
     color,
     srOnly,
-    className,
+    css: cssProp,
     ...props
   } = _ref;
   const field = (0, _FormControl.useFormControlContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDiv, {
     ...((_field$getHelpTextPro = field === null || field === void 0 ? void 0 : field.getHelpTextProps(props, ref)) !== null && _field$getHelpTextPro !== void 0 ? _field$getHelpTextPro : {
       ref,
       ...props
     }),
-    className: (0, _css.cx)((0, _css.css)({
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       color,
       srOnly
-    }), className)
+    }, cssProp)
   });
 });

package/lib/FormControl.d.ts

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithRef, ElementType, HTMLAttributes, Ref, RefObject } from "react";
+import { ComponentPropsWithRef, ElementType, Ref, RefObject } from "react";
+import { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 type Merge<T, P> = P & Omit<T, keyof P>;
 type PropGetter<T extends ElementType = ElementType, P = {}> = (props?: Merge<ComponentPropsWithRef<T>, P>, ref?: Ref<any> | RefObject<any>) => Merge<ComponentPropsWithRef<T>, P>;
 export interface FormControlOptions {
@@ -19,7 +21,7 @@ export interface FormControlProps extends FormControlOptions {
 /**
  * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
  */
-export declare const FormControl: ({ children, id, isDisabled, isInvalid, isRequired, ...rest }: HTMLAttributes<HTMLDivElement> & FormControlProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FormControl: ({ children, id, isDisabled, isInvalid, isRequired, ...rest }: HTMLArkProps<"div"> & JsxStyleProps & FormControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useFormControlContext: () => {
     isRequired: boolean;
     isDisabled: boolean;

package/lib/FormControl.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFormControlProps = exports.useFormControlContext = exports.useFormControl = exports.FormControl = void 0;
 var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _util = require("@ndla/util");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledFormControl = (0, _jsx2.styled)("div", {
+const StyledFormControl = (0, _jsx2.styled)(_react2.ark.div, {
   base: {
     display: "flex",
     flexDirection: "column",

package/lib/FramedContent.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 framedContentRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     colorTheme: {
         neutral: {
@@ -27,6 +27,10 @@ declare const framedContentRecipe: import("@ndla/styled-system/types").RecipeRun
     };
 }>;
 export type FramedContentVariantProps = RecipeVariantProps<typeof framedContentRecipe>;
-export type FramedContentProps = ComponentPropsWithoutRef<"div"> & FramedContentVariantProps;
-export declare const FramedContent: ({ className, colorTheme, ...rest }: FramedContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+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>, {
+    colorTheme?: "neutral" | "brand1" | "brand2" | undefined;
+}>;
 export {};

package/lib/FramedContent.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FramedContent = 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.
  *
@@ -45,17 +45,4 @@ const framedContentRecipe = (0, _css.cva)({
     colorTheme: "neutral"
   }
 });
-const FramedContent = _ref => {
-  let {
-    className,
-    colorTheme,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
-    className: (0, _css.cx)(framedContentRecipe({
-      colorTheme
-    }), className),
-    ...rest
-  });
-};
-exports.FramedContent = FramedContent;
+const FramedContent = exports.FramedContent = (0, _jsx.styled)(_react.ark.div, framedContentRecipe);