@vygruppen/spor-react 12.20.2 → 12.21.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.20.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.21.1 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           337.20 KB
-CJS dist/icons/index.cjs     381.00 B
-CJS dist/icons/index.cjs.map 157.00 B
-CJS dist/index.cjs.map       668.38 KB
-CJS ⚡️ Build success in 2728ms
-ESM dist/index.mjs           313.92 KB
+ESM dist/index.mjs           316.18 KB
 ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       672.11 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       668.38 KB
-ESM ⚡️ Build success in 2730ms
-DTS ⚡️ Build success in 19350ms
+ESM ⚡️ Build success in 2690ms
+CJS dist/index.cjs           339.46 KB
+CJS dist/icons/index.cjs     381.00 B
+CJS dist/icons/index.cjs.map 157.00 B
+CJS dist/index.cjs.map       672.11 KB
+CJS ⚡️ Build success in 2691ms
+DTS ⚡️ Build success in 19346ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        158.95 KB
+DTS dist/index.d.ts        158.97 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       158.95 KB
+DTS dist/index.d.cts       158.97 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.20.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.21.1 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }
+[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  load multiple .env files with { path: ['.env.local', '.env'] }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @vygruppen/spor-react
 
+## 12.21.1
+
+### Patch Changes
+
+- 7b2b1a4: New icon for usb-charging on board
+- Updated dependencies [7b2b1a4]
+  - @vygruppen/spor-icon-react@4.5.1
+
+## 12.21.0
+
+### Minor Changes
+
+- 680088f: Restore correct fill color for feedback icons to improve appearance in dark mode.
+
+### Patch Changes
+
+- 71ff08b: Fix console warnings caused by forwardRef usage
+- ef1c670: Add inverted colors for badge component
+- 4cef922: Possibility to change fontsize in input and search input field
+- dc87d26: Revert non-working portalled logic for SelectContent
+- Updated dependencies [ef1c670]
+- Updated dependencies [680088f]
+  - @vygruppen/spor-design-tokens@4.3.1
+  - @vygruppen/spor-icon-react@4.5.0
+
 ## 12.20.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -634,59 +634,59 @@ var badgeRecipie = react.defineRecipe({
   variants: {
     colorPalette: {
       neutral: {
-        backgroundColor: "surface.color.neutral",
-        color: "alert.neutral.text",
+        backgroundColor: "badge.surface",
+        color: "badge.text",
         "& svg": {
-          color: "alert.neutral.icon"
+          color: "badge.icon"
         }
       },
       grey: {
-        backgroundColor: "surface.color.grey",
-        color: "alert.neutral.text",
+        backgroundColor: "badge.grey.surface",
+        color: "badge.grey.text",
         "& svg": {
-          color: "alert.neutral.icon"
+          color: "badge.grey.icon"
         }
       },
       green: {
-        backgroundColor: "surface.color.green",
-        color: "alert.success.text",
+        backgroundColor: "badge.green.surface",
+        color: "badge.green.text",
         "& svg": {
-          color: "alert.success.icon"
+          color: "badge.green.icon"
         }
       },
       blue: {
-        backgroundColor: "surface.color.blue",
-        color: "alert.info.text",
+        backgroundColor: "badge.blue.surface",
+        color: "badge.blue.text",
         "& svg": {
-          color: "alert.info.icon"
+          color: "badge.blue.icon"
         }
       },
       cream: {
-        backgroundColor: "surface.color.cream",
-        color: "alert.important.text",
+        backgroundColor: "badge.cream.surface",
+        color: "badge.cream.text",
         "& svg": {
-          color: "alert.important.icon"
+          color: "badge.cream.icon"
         }
       },
       yellow: {
-        backgroundColor: "surface.color.yellow",
-        color: "alert.alt.text",
+        backgroundColor: "badge.yellow.surface",
+        color: "badge.yellow.text",
         "& svg": {
-          color: "alert.alt.icon"
+          color: "badge.yellow.icon"
         }
       },
       orange: {
-        backgroundColor: "surface.color.orange",
-        color: "alert.error.text.secondary",
+        backgroundColor: "badge.orange.surface",
+        color: "badge.orange.text",
         "& svg": {
-          color: "alert.error-secondary.icon"
+          color: "badge.orange.icon"
         }
       },
       red: {
-        backgroundColor: "surface.color.red",
-        color: "alert.error.text",
+        backgroundColor: "badge.red.surface",
+        color: "badge.red.text",
         "& svg": {
-          color: "alert.error.icon"
+          color: "badge.red.icon"
         }
       }
     },
@@ -717,13 +717,107 @@ var badgeRecipie = react.defineRecipe({
       true: {
         borderBottomRadius: "none"
       }
-    }
+    },
+    inverted: { true: {} }
   },
   defaultVariants: {
     colorPalette: "grey",
     size: "md",
-    attached: false
-  }
+    attached: false,
+    inverted: false
+  },
+  compoundVariants: [
+    {
+      colorPalette: "blue",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.blue.surface.inverted",
+        color: "badge.blue.text.inverted",
+        "& svg": {
+          color: "badge.blue.icon.inverted"
+        }
+      }
+    },
+    {
+      colorPalette: "green",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.green.surface.inverted",
+        color: "badge.green.text.inverted",
+        "& svg": {
+          color: "badge.green.icon.inverted"
+        }
+      }
+    },
+    {
+      colorPalette: "grey",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.grey.surface.inverted",
+        color: "badge.grey.text.inverted",
+        "& svg": {
+          color: "badge.grey.icon.inverted"
+        }
+      }
+    },
+    {
+      // @ts-expect-error Chakra gir feilmelding fordi "cream" ikke eksisterer i built-in ColorPalette-typen
+      colorPalette: "cream",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.cream.surface.inverted",
+        color: "badge.cream.text.inverted",
+        "& svg": {
+          color: "badge.cream.icon.inverted"
+        }
+      }
+    },
+    {
+      colorPalette: "yellow",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.yellow.surface.inverted",
+        color: "badge.yellow.text.inverted",
+        "& svg": {
+          color: "badge.yellow.icon.inverted"
+        }
+      }
+    },
+    {
+      colorPalette: "orange",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.orange.surface.inverted",
+        color: "badge.orange.text.inverted",
+        "& svg": {
+          color: "badge.orange.icon.inverted"
+        }
+      }
+    },
+    {
+      colorPalette: "red",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.red.surface.inverted",
+        color: "badge.red.text.inverted",
+        "& svg": {
+          color: "badge.red.icon.inverted"
+        }
+      }
+    },
+    {
+      // @ts-expect-error Chakra gir feilmelding fordi "neutral" ikke eksisterer i built-in typen
+      colorPalette: "neutral",
+      inverted: true,
+      css: {
+        backgroundColor: "badge.surface.inverted",
+        color: "badge.text.inverted",
+        "& svg": {
+          color: "badge.icon.inverted"
+        }
+      }
+    }
+  ]
 });
 
 // src/theme/recipes/code.ts
@@ -948,15 +1042,7 @@ var useScrollDirection = () => {
 var AlertIcon = React29.forwardRef(
   ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      react.Box,
-      {
-        asChild: true,
-        ref,
-        "aria-label": t(texts5[variant]),
-        children: CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ref, "aria-label": t(texts5[variant]), children: CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant }) });
   }
 );
 AlertIcon.displayName = "AlertIcon";
@@ -2295,20 +2381,11 @@ var DateField = React29.forwardRef(
       ref
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { minWidth: "6rem", width: "100%", children: [
-      props.label && /* @__PURE__ */ jsxRuntime.jsx(
-        react.Box,
-        {
-          asChild: true,
-          css: styles.inputLabel,
-          position: "absolute",
-          paddingTop: "2px",
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Label, { padding: "0", ...props.labelProps, children: [
-            props.label,
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
-          ] })
-        }
-      ),
+      props.label && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.inputLabel, position: "absolute", paddingTop: "2px", children: /* @__PURE__ */ jsxRuntime.jsxs(Label, { padding: "0", ...props.labelProps, children: [
+        props.label,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(
         DateTimeSegment,
         {
@@ -3406,6 +3483,7 @@ var Input = React29.forwardRef(
     errorText,
     required,
     hidden,
+    fontSize,
     ...props
   }, ref) => {
     const recipe = react.useRecipe({ key: "input" });
@@ -3430,14 +3508,22 @@ var Input = React29.forwardRef(
         hidden,
         errorText,
         id: props.id,
-        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { children: [
+        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { fontSize: fontSize ?? "mobile.md", children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
           label
         ] }),
         floatingLabel: true,
         shouldFloat,
         children: [
-          startElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
+          startElement && /* @__PURE__ */ jsxRuntime.jsx(
+            react.InputElement,
+            {
+              pointerEvents: "none",
+              paddingX: 2,
+              fontSize: fontSize ?? "mobile.md",
+              children: startElement
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             react.Input,
             {
@@ -3454,10 +3540,19 @@ var Input = React29.forwardRef(
               onBlur: handleBlur,
               onChange: handleChange,
               placeholder: "",
-              css: styles
+              css: styles,
+              fontSize: fontSize ?? "mobile.md"
             }
           ),
-          endElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { placement: "end", paddingX: 2, children: endElement })
+          endElement && /* @__PURE__ */ jsxRuntime.jsx(
+            react.InputElement,
+            {
+              placement: "end",
+              paddingX: 2,
+              fontSize: fontSize ?? "mobile.md",
+              children: endElement
+            }
+          )
         ]
       }
     );
@@ -4127,14 +4222,7 @@ var Select = React29__namespace.forwardRef(
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
               label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SelectContent,
-                {
-                  css: styles.selectContent,
-                  portalled: typeof document !== "undefined",
-                  children
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, children })
             ]
           }
         )