@ndla/primitives 0.0.21 → 0.0.23

package/dist/panda.buildinfo.json

@@ -327,7 +327,7 @@
       "backgroundColor]___[value:surface.brand.2.subtle",
       "height]___[value:350px",
       "zIndex]___[value:hide",
-      "clipPath]___[value:polygon(0 0, 100% 0, 100% 65%, 0 100%)",
+      "clipPath]___[value:polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)",
       "position]___[value:absolute",
       "background]___[value:primary",
       "background]___[value:blue.800",
@@ -359,13 +359,10 @@
       "appearance]___[value:none]___[cond:_focus",
       "resize]___[value:none",
       "overflowY]___[value:hidden",
-      "float]___[value:none",
+      "float]___[value:left",
       "width]___[value:inherit",
       "color]___[value:text.subtle]___[cond:_disabled",
       "display]___[value:inline-block",
-      "border]___[value:none",
-      "padding]___[value:0",
-      "margin]___[value:0",
       "transitionProperty]___[value:background, color",
       "textDecoration]___[value:underline]___[cond:_hover",
       "color]___[value:stroke.disabled]___[cond:_disabled<___>& svg",
@@ -449,8 +446,6 @@
       "borderBlockColor]___[value:background.subtle",
       "borderInlineStartColor]___[value:background.subtle",
       "borderInlineEndColor]___[value:stroke.default",
-      "marginBlock]___[value:medium",
-      "marginInline]___[value:auto",
       "borderWidth]___[value:4px",
       "height]___[value:large",
       "width]___[value:large",

package/dist/styles.css

@@ -552,9 +552,9 @@
     z-index: var(--z-index-hide);
 }
 
-  .cp-path_polygon\(0_0\,_100\%_0\,_100\%_65\%\,_0_100\%\) {
-    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
-    -webkit-clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
+  .cp-path_polygon\(0_0\,_100\%_0\,_100\%_calc\(100\%_-_5vw\)\,_0_100\%\) {
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
 }
 
   .pos_absolute {
@@ -617,8 +617,8 @@
     resize: none;
 }
 
-  .float_none {
-    float: none;
+  .float_left {
+    float: left;
 }
 
   .w_inherit {
@@ -629,18 +629,6 @@
     display: inline-block;
 }
 
-  .bd_none {
-    border: none;
-}
-
-  .p_0 {
-    padding: 0;
-}
-
-  .m_0 {
-    margin: 0;
-}
-
   .min-w_surface\.xxsmall {
     min-width: var(--sizes-surface-xxsmall);
 }
@@ -745,14 +733,6 @@
     border-block-color: var(--colors-background-subtle);
 }
 
-  .my_medium {
-    margin-block: var(--spacing-medium);
-}
-
-  .mx_auto {
-    margin-inline: auto;
-}
-
   .h_large {
     height: var(--sizes-large);
 }
@@ -1192,19 +1172,19 @@
     right: var(--spacing-xxsmall);
 }
 
-  .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     cursor: not-allowed;
 }
 
-  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     background: var(--colors-surface-disabled-subtle);
 }
 
-  .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     --shadow-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     color: var(--colors-text-disabled);
 }
 
@@ -1245,15 +1225,15 @@
     margin-inline-start: var(--spacing-medium);
 }
 
-  .disabled\:c_text\.onAction:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:bx-sh-c_surface\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bx-sh-c_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     --shadow-color: var(--colors-surface-disabled);
 }
 
@@ -1297,7 +1277,7 @@
     display: flex;
 }
 
-  .disabled\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     color: var(--colors-stroke-disabled);
 }
 
@@ -1393,7 +1373,7 @@
     transition: background-color 600000s 0s, color 600000s 0s;
 }
 
-  .disabled\:c_text\.subtle:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     color: var(--colors-text-subtle);
 }
 
@@ -1599,7 +1579,7 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .disabled\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     border-color: var(--colors-stroke-disabled);
 }
 
@@ -1698,7 +1678,7 @@
     flex-direction: row;
 }
 
-  .disabled\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     border-color: var(--colors-stroke-default);
 }
 
@@ -1996,15 +1976,15 @@
     border-color: var(--colors-stroke-default);
 }
 
-  .disabled\:hover\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     background: var(--colors-surface-disabled-subtle);
 }
 
-  .disabled\:hover\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     --shadow-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2020,23 +2000,23 @@
     color: var(--colors-icon-strong);
 }
 
-  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled]) svg {
+  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) svg {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:checked\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-text-disabled);
 }
 
-  .disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background: var(--colors-surface-disabled);
 }
 
@@ -2068,7 +2048,7 @@
     outline-offset: -2px;
 }
 
-  .disabled\:hover\:bx-sh_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bx-sh_none:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     box-shadow: none;
 }
 
@@ -2080,7 +2060,7 @@
     color: var(--colors-stroke-hover);
 }
 
-  .disabled\:hover\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     color: var(--colors-stroke-disabled);
 }
 
@@ -2096,15 +2076,15 @@
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
 
-  .disabled\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) svg {
+  .disabled\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) svg {
     color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:hover\:td_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:td_none:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     text-decoration: none;
 }
 
-  .disabled\:hover\:bg_surface\.default:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bg_surface\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     background: var(--colors-surface-default);
 }
 
@@ -2124,19 +2104,19 @@
     background: var(--colors-surface-hover);
 }
 
-  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled])[data-highlighted] {
+  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true'])[data-highlighted] {
     color: var(--colors-text-disabled);
 }
 
-  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled])[data-highlighted] {
+  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true'])[data-highlighted] {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is([aria-selected=true], [data-selected]) {
+  .disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-disabled);
 }
 
-  .disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is([aria-selected=true], [data-selected]) {
+  .disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is([aria-selected=true], [data-selected]) {
     background: var(--colors-surface-disabled);
 }
 
@@ -2156,7 +2136,7 @@
     text-align: right;
 }
 
-  .disabled\:hover\:c_text\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     color: var(--colors-text-subtle);
 }
 
@@ -2182,11 +2162,11 @@
     content: counter(level1, upper-alpha) '. ';
 }
 
-  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-disabled);
 }
 
@@ -2226,7 +2206,7 @@
     background-color: transparent;
 }
 
-  .disabled\:hover\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-default);
 }
 
@@ -2254,7 +2234,7 @@
     color: var(--colors-icon-default);
 }
 
-  .hover\:disabled\:trf_translateX\(0\):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+  .hover\:disabled\:trf_translateX\(0\):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     transform: translateX(0);
 }
 
@@ -2278,19 +2258,19 @@
     counter-increment: level2;
 }
 
-  .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
 
-  .disabled\:checked\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:hover\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) svg {
+  .disabled\:hover\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) svg {
     color: var(--colors-stroke-disabled);
 }
 
-  .checked\:hover\:disabled\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+  .checked\:hover\:disabled\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
     transform: translateX(120%);
 }
 
@@ -2298,7 +2278,7 @@
     content: counter(level1, lower-alpha) '. ';
 }
 
-  .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
 

package/es/Button.js

@@ -10,8 +10,10 @@ import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner } from "./Spinner";
+
 // TODO: Consider if any of the backgrounds should actually be transparent
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export const buttonBaseRecipe = cva({
   base: {
     display: "inline-flex",
@@ -188,15 +190,42 @@ const StyledButton = styled(ark.button, {}, {
     type: "button"
   }
 });
-export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const BaseButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    loading,
+    loadingContent: loadingContentProp,
+    replaceContent,
+    onClick,
+    children,
+    ...props
+  } = _ref;
+  const ariaDisabled = loading ? {
+    "aria-disabled": true
+  } : {};
+  const loadingContent = replaceContent ? loadingContentProp : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [loadingContentProp, children]
+  });
+  return /*#__PURE__*/_jsx(StyledButton, {
+    onClick: loading ? undefined : onClick,
+    ...ariaDisabled,
+    ...props,
+    ref: ref,
+    children: loading ? loadingContent : children
+  });
+});
+export const Button = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     variant,
+    loadingContent,
     size,
     css: cssProp,
     ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledButton, {
+  } = _ref2;
+  return /*#__PURE__*/_jsx(BaseButton, {
     ...props,
+    loadingContent: loadingContent ?? /*#__PURE__*/_jsx(Spinner, {
+      size: "small"
+    }),
     css: css.raw(buttonBaseRecipe.raw({
       variant
     }), buttonRecipe.raw({
@@ -205,23 +234,23 @@ export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref
   });
 });
-const StyledIconButton = styled(ark.button, {}, {
-  baseComponent: true,
-  defaultProps: {
-    type: "button"
-  }
-});
-export const IconButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     variant,
     css: cssProp,
+    loadingContent,
+    replaceContent = true,
     ...props
-  } = _ref2;
-  return /*#__PURE__*/_jsx(StyledIconButton, {
+  } = _ref3;
+  return /*#__PURE__*/_jsx(BaseButton, {
     ...props,
     css: css.raw(buttonBaseRecipe.raw({
       variant
     }), iconButtonRecipe.raw(), cssProp),
+    loadingContent: loadingContent ?? /*#__PURE__*/_jsx(Spinner, {
+      size: "small"
+    }),
+    replaceContent: replaceContent,
     ref: ref
   });
 });

package/es/Field.js

@@ -6,14 +6,20 @@
  *
  */
 
-import { Field } from "@ark-ui/react";
+import { Field, Fieldset } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
+const rootStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "3xsmall"
+};
 export const FieldRoot = styled(Field.Root, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall"
-  }
+  base: rootStyle
+}, {
+  baseComponent: true
+});
+export const FieldsetRoot = styled(Fieldset.Root, {
+  base: rootStyle
 }, {
   baseComponent: true
 });

package/es/FieldErrorMessage.js

@@ -7,16 +7,17 @@
  */
 
 import { forwardRef } from "react";
-import { Field } from "@ark-ui/react";
+import { Field, Fieldset } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledErrorText = styled(Field.ErrorText, {
-  base: {
-    color: "text.error",
-    whiteSpace: "pre-line",
-    justifyContent: "center"
-  }
+const errorTextStyling = {
+  color: "text.error",
+  whiteSpace: "pre-line",
+  justifyContent: "center"
+};
+const StyledFieldErrorText = styled(Field.ErrorText, {
+  base: errorTextStyling
 }, {
   baseComponent: true
 });
@@ -29,7 +30,32 @@ export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
     srOnly,
     ...props
   } = _ref;
-  return /*#__PURE__*/_jsx(StyledErrorText, {
+  return /*#__PURE__*/_jsx(StyledFieldErrorText, {
+    css: css.raw({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }, cssProp),
+    ...props,
+    ref: ref
+  });
+});
+const StyledFieldsetErrorText = styled(Fieldset.ErrorText, {
+  base: errorTextStyling
+}, {
+  baseComponent: true
+});
+export const FieldsetErrorText = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    css: cssProp,
+    color,
+    srOnly,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(StyledFieldsetErrorText, {
     css: css.raw({
       textStyle,
       fontWeight,

package/es/FieldHelper.js

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef } from "react";
-import { Field } from "@ark-ui/react";
+import { Field, Fieldset } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,4 +33,27 @@ export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...props,
     ref: ref
   });
+});
+const StyledFieldsetHelper = styled(Fieldset.HelperText, {}, {
+  baseComponent: true
+});
+export const FieldsetHelper = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    color,
+    srOnly,
+    css: cssProp,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(StyledFieldsetHelper, {
+    css: css.raw({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }, cssProp),
+    ...props,
+    ref: ref
+  });
 });

package/es/FramedContent.js

@@ -47,6 +47,7 @@ export const FramedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(StyledFramedContent, {
+    "data-embed-type": "framed-content",
     css: css.raw(framedContentRecipe.raw({
       colorTheme
     }), cssProp),

package/es/Hero.js

@@ -22,7 +22,7 @@ const heroRecipe = 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/es/Input.js

@@ -121,10 +121,9 @@ export const Input = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 export const FieldInput = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Input, {
   asChild: true,
-  children: /*#__PURE__*/_jsx(Input, {
-    ...props,
-    ref: ref
-  })
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/_jsx(Input, {})
 }));
 const StyledTextArea = styled(ark.textarea, {}, {
   baseComponent: true
@@ -160,8 +159,7 @@ export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
 });
 export const FieldTextArea = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Textarea, {
   asChild: true,
-  children: /*#__PURE__*/_jsx(TextArea, {
-    ...props,
-    ref: ref
-  })
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/_jsx(TextArea, {})
 }));

package/es/Label.js

@@ -7,13 +7,13 @@
  */
 
 import { forwardRef } from "react";
-import { Field, ark } from "@ark-ui/react";
+import { Field, Fieldset, ark } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledLegend = styled(ark.legend, {
   base: {
-    float: "none",
+    float: "left",
     width: "inherit",
     _disabled: {
       color: "text.subtle"
@@ -22,7 +22,6 @@ const StyledLegend = styled(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.
 export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     textStyle = "label.medium",
@@ -43,6 +42,12 @@ export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref
   });
 });
+export const FieldsetLegend = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Fieldset.Legend, {
+  asChild: true,
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/_jsx(Legend, {})
+}));
 const StyledLabel = styled(ark.label, {
   base: {
     display: "inline-block",
@@ -75,15 +80,7 @@ export const Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 export const FieldLabel = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Label, {
   asChild: true,
-  children: /*#__PURE__*/_jsx(Label, {
-    ...props,
-    ref: ref
-  })
-}));
-export const Fieldset = styled("fieldset", {
-  base: {
-    border: "none",
-    padding: "0",
-    margin: "0"
-  }
-});
+  ...props,
+  ref: ref,
+  children: /*#__PURE__*/_jsx(Label, {})
+}));

package/es/RadioGroup.js

@@ -130,10 +130,10 @@ export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalRadioGroupLabel, {
     ref: ref,
+    ...props,
     asChild: true,
     children: /*#__PURE__*/_jsx(Label, {
-      textStyle: textStyle,
-      ...props
+      textStyle: textStyle
     })
   });
 });