@ndla/primitives 0.0.2 → 0.0.4

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/Field.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Field } from "@ark-ui/react";
+export declare const FieldRoot: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Field.RootProps & import("react").RefAttributes<HTMLDivElement>>, {}>;

package/lib/Field.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldRoot = void 0;
+var _react = require("@ark-ui/react");
+var _jsx = require("@ndla/styled-system/jsx");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const FieldRoot = exports.FieldRoot = (0, _jsx.styled)(_react.Field.Root, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3xsmall"
+  }
+});

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,9 +5,9 @@ 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");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -17,34 +17,30 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledErrorMessage = (0, _jsx2.styled)("div", {
+const StyledErrorText = (0, _jsx2.styled)(_react2.Field.ErrorText, {
   base: {
     color: "text.error",
-    whiteSpace: "pre-line"
+    whiteSpace: "pre-line",
+    justifyContent: "center"
   }
 });
 const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  var _field$getErrorMessag;
   let {
     textStyle = "label.small",
     fontWeight,
+    css: cssProp,
     color,
     srOnly,
-    className,
     ...props
   } = _ref;
-  const field = (0, _FormControl.useFormControlContext)();
-  if (field && !field.isInvalid) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledErrorMessage, {
-    ...((_field$getErrorMessag = field === null || field === void 0 ? void 0 : field.getErrorMessageProps(props, ref)) !== null && _field$getErrorMessag !== void 0 ? _field$getErrorMessag : {
-      ref,
-      ...props
-    }),
-    className: (0, _css.cx)((0, _css.css)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledErrorText, {
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       color,
-      srOnly: srOnly
-    }), className)
+      srOnly
+    }, cssProp),
+    ...props,
+    ref: ref
   });
 });

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,9 +5,9 @@ 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");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -17,27 +17,24 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+const StyledFieldHelper = (0, _jsx2.styled)(_react2.Field.HelperText);
 const FieldHelper = exports.FieldHelper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  var _field$getHelpTextPro;
   let {
     textStyle = "label.small",
     fontWeight,
     color,
     srOnly,
-    className,
+    css: cssProp,
     ...props
   } = _ref;
-  const field = (0, _FormControl.useFormControlContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
-    ...((_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)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFieldHelper, {
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       color,
       srOnly
-    }), className)
+    }, cssProp),
+    ...props,
+    ref: ref
   });
 });

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

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 FieldInput: 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 FieldTextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/lib/Input.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextArea = exports.InputContainer = exports.Input = exports.FormTextArea = exports.FormInput = void 0;
+exports.TextArea = exports.InputContainer = exports.Input = exports.FieldTextArea = exports.FieldInput = 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");
-var _FormControl = require("./FormControl");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -57,7 +57,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 +71,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,28 +108,30 @@ 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
   });
 });
-const FormInput = exports.FormInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const field = (0, _FormControl.useFormControl)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-    ...field,
+const FieldInput = exports.FieldInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Input, {
+  asChild: true,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+    ...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,16 +152,16 @@ 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
   });
 });
-const FormTextArea = exports.FormTextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const field = (0, _FormControl.useFormControl)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, {
-    ...field,
+const FieldTextArea = exports.FieldTextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Textarea, {
+  asChild: true,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, {
+    ...props,
     ref: ref
-  });
-});
+  })
+}));

package/lib/Label.d.ts

@@ -5,12 +5,18 @@
  * 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 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 FieldLabel: 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", {}>;