@vygruppen/spor-react 12.8.6 → 12.8.8

package/dist/index.mjs

@@ -753,8 +753,15 @@ var Heading = forwardRef(
       id: externalId,
       ...rest
     } = props;
-    const id = externalId ?? (autoId && typeof rest.children === "string") ? slugify(rest.children) : void 0;
-    return /* @__PURE__ */ jsx(Text, { as, textStyle: variant, id, ref, ...rest });
+    const reactId = useId();
+    function getId() {
+      if (externalId !== void 0)
+        return externalId;
+      if (!autoId)
+        return;
+      return typeof rest.children === "string" ? slugify(rest.children) : reactId;
+    }
+    return /* @__PURE__ */ jsx(Text, { as, textStyle: variant, id: getId(), ref, ...rest });
   }
 );
 function resolveTextProps({
@@ -1385,9 +1392,15 @@ var Field3 = React27.forwardRef(
           css: styles.root,
           direction,
           children: [
-            label && !floatingLabel && /* @__PURE__ */ jsx(Label, { children: label }),
+            label && !floatingLabel && /* @__PURE__ */ jsxs(Label, { children: [
+              label,
+              /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
+            ] }),
             children,
-            label && floatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { children: label }),
+            label && floatingLabel && /* @__PURE__ */ jsxs(FloatingLabel, { children: [
+              label,
+              /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
+            ] }),
             errorText && /* @__PURE__ */ jsx(Field.ErrorText, { children: errorText })
           ]
         }
@@ -1953,6 +1966,7 @@ var DatePicker = forwardRef(
               errorText,
               invalid,
               helperText,
+              required: props.required,
               children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
                 StyledField,
                 {
@@ -2076,6 +2090,7 @@ function DateRangePicker({
           errorText,
           helperText,
           invalid,
+          required: props.required,
           children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
             StyledField,
             {
@@ -2785,6 +2800,7 @@ var Input = forwardRef(
     invalid,
     helperText,
     errorText,
+    required,
     ...props
   }, ref) => {
     const recipe = useRecipe({ key: "input" });
@@ -2795,6 +2811,7 @@ var Input = forwardRef(
       {
         invalid,
         helperText,
+        required,
         errorText,
         label: (
           // Render startElement invisibly to align label text with input content when an icon is present
@@ -3467,22 +3484,31 @@ var Select = React27.forwardRef(
     } = props;
     const recipe = useSlotRecipe({ key: "select" });
     const styles = recipe({ variant });
-    return /* @__PURE__ */ jsx(Field3, { errorText, invalid, helperText, children: /* @__PURE__ */ jsxs(
-      Select$1.Root,
+    return /* @__PURE__ */ jsx(
+      Field3,
       {
-        ...rest,
-        ref,
-        positioning: { sameWidth: true, ...positioning },
-        variant,
-        css: styles.root,
-        position: "relative",
-        children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
-          label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
-          /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
-        ]
+        errorText,
+        invalid,
+        helperText,
+        required: props.required,
+        children: /* @__PURE__ */ jsxs(
+          Select$1.Root,
+          {
+            ...rest,
+            ref,
+            positioning: { sameWidth: true, ...positioning },
+            variant,
+            css: styles.root,
+            position: "relative",
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
+              label && /* @__PURE__ */ jsx(SelectLabel, { css: styles.label, children: label }),
+              /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
 );
 var SelectLabel = (props) => {
@@ -3589,6 +3615,7 @@ var Switch = forwardRef(
         invalid,
         errorText,
         helperText,
+        required: props.required,
         children: /* @__PURE__ */ jsxs(
           Switch$1.Root,
           {
@@ -3929,7 +3956,7 @@ var ExternalIcon = ({
   label,
   size
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true }),
+  size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" }),
   /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
 ] });
 var TextLink = forwardRef(
@@ -5594,32 +5621,22 @@ var inputRecipe = defineRecipe({
 });
 var linkRecipe = defineRecipe({
   base: {
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    transitionTimingFunction: "ease-out",
-    cursor: "pointer",
-    backgroundImage: "linear-gradient(currentColor, currentColor)",
-    backgroundSize: "100% 1px",
-    backgroundPosition: "0 100%",
-    backgroundRepeat: "no-repeat",
-    borderRadius: "none",
-    paddingX: "2px",
-    paddingY: "0",
+    display: "inline",
     color: "inherit",
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "0",
-    position: "relative",
-    boxDecorationBreak: "clone",
-    textUnderlineOffset: "0",
-    "&:focus, &:focus-visible, &:active, &:hover": {
-      backgroundImage: "none",
-      backgroundSize: "100%",
-      outline: "none",
-      borderRadius: "xs"
+    cursor: "pointer",
+    textDecorationLine: "underline",
+    textDecorationSkipInk: "none",
+    textUnderlineOffset: "auto",
+    textUnderlinePosition: "from-font",
+    gap: "0.5",
+    borderRadius: "xs",
+    paddingX: "0.5",
+    whiteSpace: "normal",
+    wordBreak: "break-word",
+    _hover: {
+      textDecoration: "none"
     },
     "& svg": {
-      display: "inline-block",
       width: "1.125em",
       height: "1.125em",
       position: "relative",
@@ -6728,6 +6745,8 @@ var checkboxSlotRecipe = defineSlotRecipe({
   slots: checkboxAnatomy.keys(),
   base: {
     root: {
+      whiteSpace: "normal",
+      wordBreak: "break-word",
       display: "flex",
       gap: 1.5,
       _hover: {
@@ -6754,6 +6773,7 @@ var checkboxSlotRecipe = defineSlotRecipe({
     control: {
       width: 4,
       height: 4,
+      flexShrink: 0,
       transitionProperty: "background, border-color",
       transitionDuration: "moderate",
       border: "2px solid",
@@ -6793,7 +6813,6 @@ var checkboxSlotRecipe = defineSlotRecipe({
       }
     },
     label: {
-      userSelect: "none",
       _disabled: { opacity: 0.4 }
     }
   }
@@ -7617,6 +7636,9 @@ var fieldSlotRecipe = defineSlotRecipe({
       marginStart: 1,
       color: "brightRed"
     },
+    label: {
+      display: "flex"
+    },
     helperText: {
       marginTop: 2,
       color: "text.tertiary",