@ndla/primitives 0.0.21 → 0.0.23

package/es/Spinner.js

@@ -19,15 +19,18 @@ export const spinnerRecipe = cva({
     borderStyle: "solid",
     borderBlockColor: "background.subtle",
     borderInlineStartColor: "background.subtle",
-    borderInlineEndColor: "stroke.default",
-    marginBlock: "medium",
-    marginInline: "auto"
+    borderInlineEndColor: "stroke.default"
   },
   defaultVariants: {
     size: "large"
   },
   variants: {
     size: {
+      small: {
+        borderWidth: "4px",
+        height: "medium",
+        width: "medium"
+      },
       medium: {
         borderWidth: "4px",
         height: "large",

package/es/index.js

@@ -16,15 +16,15 @@ export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, Checkb
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
-export { FieldRoot } from "./Field";
-export { FieldErrorMessage } from "./FieldErrorMessage";
-export { FieldHelper } from "./FieldHelper";
+export { FieldRoot, FieldsetRoot } from "./Field";
+export { FieldErrorMessage, FieldsetErrorText } from "./FieldErrorMessage";
+export { FieldHelper, FieldsetHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
 export { Hero, HeroBackground, HeroContent } from "./Hero";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
-export { Label, FieldLabel } from "./Label";
+export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator } from "./Menu";
 export { MessageBox } from "./MessageBox";
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";

package/lib/Button.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import { ReactNode } from "react";
 import { HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps, RecipeVariant } from "@ndla/styled-system/types";
@@ -125,10 +126,14 @@ 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 & {
-    consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & {
+interface BaseButtonProps extends HTMLArkProps<"button">, JsxStyleProps {
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    replaceContent?: boolean;
+}
+export type ButtonProps = BaseButtonProps & ButtonVariantProps;
+export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<BaseButtonProps & {
     variant?: ButtonVariant | undefined;
 } & {
     size?: "small" | "default" | undefined;
@@ -137,8 +142,6 @@ 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 & {
-    consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type IconButtonProps = BaseButtonProps & IconButtonVariantProps;
+export declare const IconButton: import("react").ForwardRefExoticComponent<BaseButtonProps & IconButtonVariantProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/Button.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconButtonRecipe = exports.buttonRecipe = exports.buttonBaseRecipe = exports.IconButton = exports.Button = void 0;
+exports.iconButtonRecipe = exports.buttonRecipe = exports.buttonBaseRecipe = exports.IconButton = exports.Button = exports.BaseButton = 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 _Spinner = require("./Spinner");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -194,15 +195,42 @@ const StyledButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
     type: "button"
   }
 });
-const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const BaseButton = exports.BaseButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    loading,
+    loadingContent: loadingContentProp,
+    replaceContent,
+    onClick,
+    children,
+    ...props
+  } = _ref;
+  const ariaDisabled = loading ? {
+    "aria-disabled": true
+  } : {};
+  const loadingContent = replaceContent ? loadingContentProp : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [loadingContentProp, children]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    onClick: loading ? undefined : onClick,
+    ...ariaDisabled,
+    ...props,
+    ref: ref,
+    children: loading ? loadingContent : children
+  });
+});
+const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     variant,
+    loadingContent,
     size,
     css: cssProp,
     ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseButton, {
     ...props,
+    loadingContent: loadingContent ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "small"
+    }),
     css: _css.css.raw(buttonBaseRecipe.raw({
       variant
     }), buttonRecipe.raw({
@@ -211,23 +239,23 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     ref: ref
   });
 });
-const StyledIconButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
-  baseComponent: true,
-  defaultProps: {
-    type: "button"
-  }
-});
-const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     variant,
     css: cssProp,
+    loadingContent,
+    replaceContent = true,
     ...props
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseButton, {
     ...props,
     css: _css.css.raw(buttonBaseRecipe.raw({
       variant
     }), iconButtonRecipe.raw(), cssProp),
+    loadingContent: loadingContent ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+      size: "small"
+    }),
+    replaceContent: replaceContent,
     ref: ref
   });
 });

package/lib/Field.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field } from "@ark-ui/react";
+import { Field, Fieldset } from "@ark-ui/react";
 export declare const FieldRoot: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Field.RootProps & import("react").RefAttributes<HTMLDivElement>>, {}>;
+export declare const FieldsetRoot: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Fieldset.RootProps & import("react").RefAttributes<HTMLFieldSetElement>>, {}>;

package/lib/Field.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldRoot = void 0;
+exports.FieldsetRoot = exports.FieldRoot = void 0;
 var _react = require("@ark-ui/react");
 var _jsx = require("@ndla/styled-system/jsx");
 /**
@@ -14,12 +14,18 @@ var _jsx = require("@ndla/styled-system/jsx");
  *
  */
 
+const rootStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "3xsmall"
+};
 const FieldRoot = exports.FieldRoot = (0, _jsx.styled)(_react.Field.Root, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall"
-  }
+  base: rootStyle
+}, {
+  baseComponent: true
+});
+const FieldsetRoot = exports.FieldsetRoot = (0, _jsx.styled)(_react.Fieldset.Root, {
+  base: rootStyle
 }, {
   baseComponent: true
 });

package/lib/FieldErrorMessage.d.ts

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TextProps } from "./Text";
-export declare const FieldErrorMessage: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+import { Field, Fieldset } from "@ark-ui/react";
+import type { TextProps } from "./Text";
+export declare const FieldErrorMessage: import("react").ForwardRefExoticComponent<Field.ErrorTextProps & TextProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const FieldsetErrorText: import("react").ForwardRefExoticComponent<Fieldset.ErrorTextProps & TextProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/FieldErrorMessage.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldErrorMessage = void 0;
+exports.FieldsetErrorText = exports.FieldErrorMessage = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -17,12 +17,13 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledErrorText = (0, _jsx2.styled)(_react2.Field.ErrorText, {
-  base: {
-    color: "text.error",
-    whiteSpace: "pre-line",
-    justifyContent: "center"
-  }
+const errorTextStyling = {
+  color: "text.error",
+  whiteSpace: "pre-line",
+  justifyContent: "center"
+};
+const StyledFieldErrorText = (0, _jsx2.styled)(_react2.Field.ErrorText, {
+  base: errorTextStyling
 }, {
   baseComponent: true
 });
@@ -35,7 +36,32 @@ const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.fo
     srOnly,
     ...props
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledErrorText, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFieldErrorText, {
+    css: _css.css.raw({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }, cssProp),
+    ...props,
+    ref: ref
+  });
+});
+const StyledFieldsetErrorText = (0, _jsx2.styled)(_react2.Fieldset.ErrorText, {
+  base: errorTextStyling
+}, {
+  baseComponent: true
+});
+const FieldsetErrorText = exports.FieldsetErrorText = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    css: cssProp,
+    color,
+    srOnly,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFieldsetErrorText, {
     css: _css.css.raw({
       textStyle,
       fontWeight,

package/lib/FieldHelper.d.ts

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TextProps } from "./Text";
-export declare const FieldHelper: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+import { Field, Fieldset } from "@ark-ui/react";
+import type { TextProps } from "./Text";
+export declare const FieldHelper: import("react").ForwardRefExoticComponent<Field.HelperTextProps & TextProps & {
     consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const FieldsetHelper: import("react").ForwardRefExoticComponent<Fieldset.HelperTextProps & TextProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/FieldHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldHelper = void 0;
+exports.FieldsetHelper = exports.FieldHelper = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -39,4 +39,27 @@ const FieldHelper = exports.FieldHelper = /*#__PURE__*/(0, _react.forwardRef)((_
     ...props,
     ref: ref
   });
+});
+const StyledFieldsetHelper = (0, _jsx2.styled)(_react2.Fieldset.HelperText, {}, {
+  baseComponent: true
+});
+const FieldsetHelper = exports.FieldsetHelper = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    color,
+    srOnly,
+    css: cssProp,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFieldsetHelper, {
+    css: _css.css.raw({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }, cssProp),
+    ...props,
+    ref: ref
+  });
 });

package/lib/FramedContent.js

@@ -53,6 +53,7 @@ const FramedContent = exports.FramedContent = /*#__PURE__*/(0, _react.forwardRef
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFramedContent, {
+    "data-embed-type": "framed-content",
     css: _css.css.raw(framedContentRecipe.raw({
       colorTheme
     }), cssProp),

package/lib/Hero.js

@@ -28,7 +28,7 @@ const heroRecipe = (0, _css.sva)({
       width: "100%",
       zIndex: "hide",
       overflow: "hidden",
-      clipPath: "polygon(0 0, 100% 0, 100% 65%, 0 100%)"
+      clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)"
     },
     content: {
       display: "flex",

package/lib/Input.js

@@ -127,10 +127,9 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
 });
 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
-  })
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {})
 }));
 const StyledTextArea = (0, _jsx2.styled)(_react2.ark.textarea, {}, {
   baseComponent: true
@@ -166,8 +165,7 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref3,
 });
 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
-  })
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, {})
 }));

package/lib/Label.d.ts

@@ -5,13 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { HTMLArkProps } from "@ark-ui/react";
+import { Fieldset, HTMLArkProps } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
 export type LegendProps = HTMLArkProps<"legend"> & JsxStyleProps & TextProps;
 export declare const Legend: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLegendElement>>;
+export type FieldsetLegendProps = Fieldset.LegendProps & TextProps & JsxStyleProps;
+export declare const FieldsetLegend: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLegendElement>>;
 export type LabelProps = HTMLArkProps<"label"> & TextProps & JsxStyleProps;
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & TextProps & {
     consumeCss?: boolean | undefined;
@@ -19,4 +23,3 @@ export declare const Label: import("react").ForwardRefExoticComponent<Omit<impor
 export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & TextProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const Fieldset: import("@ndla/styled-system/types").StyledComponent<"fieldset", {}>;

package/lib/Label.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Legend = exports.Label = exports.Fieldset = exports.FieldLabel = void 0;
+exports.Legend = exports.Label = exports.FieldsetLegend = exports.FieldLabel = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const StyledLegend = (0, _jsx2.styled)(_react2.ark.legend, {
   base: {
-    float: "none",
+    float: "left",
     width: "inherit",
     _disabled: {
       color: "text.subtle"
@@ -28,7 +28,6 @@ const StyledLegend = (0, _jsx2.styled)(_react2.ark.legend, {
 }, {
   baseComponent: true
 });
-// TODO: This is not exported for now. Let's wait and see when ark decides to release their legend and fieldset.
 const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     textStyle = "label.medium",
@@ -49,6 +48,12 @@ const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     ref: ref
   });
 });
+const FieldsetLegend = exports.FieldsetLegend = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Fieldset.Legend, {
+  asChild: true,
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Legend, {})
+}));
 const StyledLabel = (0, _jsx2.styled)(_react2.ark.label, {
   base: {
     display: "inline-block",
@@ -81,15 +86,7 @@ const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
 });
 const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Label, {
   asChild: true,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
-    ...props,
-    ref: ref
-  })
-}));
-const Fieldset = exports.Fieldset = (0, _jsx2.styled)("fieldset", {
-  base: {
-    border: "none",
-    padding: "0",
-    margin: "0"
-  }
-});
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {})
+}));

package/lib/RadioGroup.js

@@ -137,10 +137,10 @@ const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwar
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
     ref: ref,
+    ...props,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
-      textStyle: textStyle,
-      ...props
+      textStyle: textStyle
     })
   });
 });

package/lib/Spinner.d.ts

@@ -10,6 +10,11 @@ import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
+        small: {
+            borderWidth: "4px";
+            height: "medium";
+            width: "medium";
+        };
         medium: {
             borderWidth: "4px";
             height: "large";
@@ -27,5 +32,5 @@ export type SpinnerProps = HTMLArkProps<"div"> & JsxStyleProps & SpinnerVariantP
 export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
-    size?: "medium" | "large" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Spinner.js

@@ -25,15 +25,18 @@ const spinnerRecipe = exports.spinnerRecipe = (0, _css.cva)({
     borderStyle: "solid",
     borderBlockColor: "background.subtle",
     borderInlineStartColor: "background.subtle",
-    borderInlineEndColor: "stroke.default",
-    marginBlock: "medium",
-    marginInline: "auto"
+    borderInlineEndColor: "stroke.default"
   },
   defaultVariants: {
     size: "large"
   },
   variants: {
     size: {
+      small: {
+        borderWidth: "4px",
+        height: "medium",
+        width: "medium"
+      },
       medium: {
         borderWidth: "4px",
         height: "large",

package/lib/index.d.ts

@@ -24,9 +24,9 @@ export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
-export { FieldRoot } from "./Field";
-export { FieldErrorMessage } from "./FieldErrorMessage";
-export { FieldHelper } from "./FieldHelper";
+export { FieldRoot, FieldsetRoot } from "./Field";
+export { FieldErrorMessage, FieldsetErrorText } from "./FieldErrorMessage";
+export { FieldHelper, FieldsetHelper } from "./FieldHelper";
 export type { FigureSize, FigureVariantProps, FigureProps, FigureFloat } from "./Figure";
 export { Figure } from "./Figure";
 export type { FramedContentVariantProps, FramedContentProps } from "./FramedContent";
@@ -36,8 +36,8 @@ export { Hero, HeroBackground, HeroContent } from "./Hero";
 export type { ImageCrop, ImageFocalPoint, PictureProps, ImgProps, ImageProps } from "./Image";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
-export type { LabelProps } from "./Label";
-export { Label, FieldLabel } from "./Label";
+export type { LabelProps, LegendProps, FieldsetLegendProps } from "./Label";
+export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export type { MenuRootProps, MenuItemVariantProps, MenuItemProps } from "./Menu";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, } from "./Menu";
 export type { MessageBoxVariantProps, MessageBoxProps } from "./MessageBox";

package/lib/index.js

@@ -315,6 +315,30 @@ Object.defineProperty(exports, "FieldTextArea", {
     return _Input.FieldTextArea;
   }
 });
+Object.defineProperty(exports, "FieldsetErrorText", {
+  enumerable: true,
+  get: function () {
+    return _FieldErrorMessage.FieldsetErrorText;
+  }
+});
+Object.defineProperty(exports, "FieldsetHelper", {
+  enumerable: true,
+  get: function () {
+    return _FieldHelper.FieldsetHelper;
+  }
+});
+Object.defineProperty(exports, "FieldsetLegend", {
+  enumerable: true,
+  get: function () {
+    return _Label.FieldsetLegend;
+  }
+});
+Object.defineProperty(exports, "FieldsetRoot", {
+  enumerable: true,
+  get: function () {
+    return _Field.FieldsetRoot;
+  }
+});
 Object.defineProperty(exports, "Figure", {
   enumerable: true,
   get: function () {
@@ -387,6 +411,12 @@ Object.defineProperty(exports, "Label", {
     return _Label.Label;
   }
 });
+Object.defineProperty(exports, "Legend", {
+  enumerable: true,
+  get: function () {
+    return _Label.Legend;
+  }
+});
 Object.defineProperty(exports, "MenuContent", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,12 +28,12 @@
     "lib"
   ],
   "dependencies": {
-    "@ark-ui/react": "^3.5.0",
-    "@ndla/styled-system": "^0.0.8",
+    "@ark-ui/react": "^3.6.2",
+    "@ndla/styled-system": "^0.0.9",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.12",
+    "@ndla/preset-panda": "^0.0.13",
     "@pandacss/dev": "^0.42.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a5f4f60d7a65d6f0aa91e357e080584cda8a70f3"
+  "gitHead": "35713120e2a004be81a62f17e29af74707b21dc4"
 }