@vygruppen/spor-react 12.18.0 → 12.19.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.18.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.19.0 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
-ESM dist/index.mjs           299.65 KB
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       640.46 KB
-ESM ⚡️ Build success in 2295ms
-CJS dist/index.cjs           321.35 KB
+CJS dist/index.cjs           321.03 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       640.46 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2296ms
-DTS ⚡️ Build success in 19662ms
+CJS dist/index.cjs.map       638.43 KB
+CJS ⚡️ Build success in 2666ms
+ESM dist/index.mjs           299.20 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/icons/index.mjs.map 157.00 B
+ESM dist/index.mjs.map       638.43 KB
+ESM ⚡️ Build success in 2673ms
+DTS ⚡️ Build success in 20756ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        156.75 KB
+DTS dist/index.d.ts        155.63 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       156.75 KB
+DTS dist/index.d.cts       155.63 KB

package/.turbo/turbo-postinstall.log

@@ -1,11 +1,12 @@
 
-> @vygruppen/spor-react@12.18.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.19.0 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: ⚙️  write to custom object with { processEnv: myObject }
+[dotenv@17.2.2] injecting env (0) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommit
 ┌  Chakra CLI ⚡️
 [?25l│
-◇  ✅ Generated conditions typings
+◒  Generating conditions types...
+◇  ✅ Generated conditions typings
 [?25h[?25l│
 ◒  Generating recipe types...
 ◇  ✅ Generated recipe typings

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 12.19.0
+
+### Minor Changes
+
+- fbf18ea: Update all eslint config dependencies to their latest versions.
+  This may introduce breaking changes due to major version upgrades.
+
+### Patch Changes
+
+- @vygruppen/spor-design-tokens@4.2.0
+- @vygruppen/spor-icon-react@4.3.0
+
 ## 12.18.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -190,23 +190,6 @@ function useTranslation() {
 function createTexts(texts26) {
   return texts26;
 }
-var hydrating = true;
-function useHydrated() {
-  const [hydrated, setHydrated] = React28.useState(() => !hydrating);
-  React28.useEffect(function hydrate() {
-    hydrating = false;
-    setHydrated(true);
-  }, []);
-  return hydrated;
-}
-
-// src/loader/ClientOnly.tsx
-var ClientOnly = ({ children, fallback = null }) => {
-  const isHydrated = useHydrated();
-  if (!isHydrated)
-    return fallback;
-  return children;
-};
 function Lottie({ animationData }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ReactLottie__default.default, { animationData });
 }
@@ -216,7 +199,7 @@ var ColorInlineLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderColorData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderColorData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -227,14 +210,14 @@ var ColorSpinner = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerColorData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerColorData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
 var ContentLoader = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.contentLoaderData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.contentLoaderData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { textAlign: "center", fontWeight: "bold", children })
   ] });
@@ -254,7 +237,7 @@ var DarkFullScreenLoader = ({
       "aria-live": "polite",
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
       ]
     }
@@ -266,7 +249,7 @@ var DarkInlineLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderDarkData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderDarkData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -279,7 +262,7 @@ var DarkSpinner = ({
   const { colorMode } = useColorMode();
   const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: spinnerData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: spinnerData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
@@ -290,7 +273,7 @@ var LightFullScreenLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -300,7 +283,7 @@ var LightInlineLoader = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
   ] });
 };
@@ -311,7 +294,7 @@ var LightSpinner = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerLightData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.spinnerLightData }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." }),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
@@ -900,23 +883,8 @@ var FloatingActionButton = React28.forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React28__namespace.default.useState(
-      externalIsTextVisible === void 0 ? false : externalIsTextVisible
-    );
     const scrollDirection = useScrollDirection();
-    React28.useEffect(() => {
-      if (externalIsTextVisible !== void 0) {
-        return;
-      }
-      const id = globalThis.setTimeout(
-        () => setIsTextVisible(scrollDirection !== "down"),
-        1e3
-      );
-      return () => globalThis.clearTimeout(id);
-    }, [scrollDirection, externalIsTextVisible]);
-    React28.useEffect(() => {
-      setIsTextVisible(!!externalIsTextVisible);
-    }, [externalIsTextVisible]);
+    const isTextVisible = externalIsTextVisible === void 0 ? scrollDirection !== "down" : !!externalIsTextVisible;
     const recipe = react.useSlotRecipe({ key: "floatingActionButton" });
     const style = recipe({
       variant,
@@ -3452,36 +3420,39 @@ var prioritizedCountryCodes = [
   { label: "+46", value: "+46" },
   { label: "+45", value: "+45" }
 ];
-var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().toSorted((a, b) => Number(a) - Number(b)).map((code) => ({
   label: `+${code}`,
   value: `+${code}`
 })).filter(
   (code) => !prioritizedCountryCodes.some((pCode) => pCode.label === code.label)
 );
-var callingCodes = react.createListCollection({
+var allCallingCodes = react.createListCollection({
   items: [...prioritizedCountryCodes, ...sortedCallingCodes]
 });
 var CountryCodeSelect = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
-  if (props.allowedCountryCodes) {
-    callingCodes.items = callingCodes.items.filter(
+  const filteredCallingCodes = React28.useMemo(() => {
+    if (!props.allowedCountryCodes)
+      return allCallingCodes;
+    const filteredItems = allCallingCodes.items.filter(
       (callingCode) => {
         var _a5;
-        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.some((code) => code === callingCode.label);
+        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.includes(callingCode.label);
       }
     );
-  }
+    return react.createListCollection({ items: filteredItems });
+  }, [props.allowedCountryCodes]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Select,
     {
       ...props,
       ref,
       positioning: { placement: "bottom", flip: false },
-      collection: callingCodes,
+      collection: filteredCallingCodes,
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
       sideRadiusVariant: "rightSideSquare",
-      children: callingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
+      children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
   );
 });
@@ -4019,9 +3990,10 @@ var icons = {
   },
   walk: { sm: sporIconReact.WalkFill18Icon, md: sporIconReact.WalkFill24Icon, lg: sporIconReact.WalkFill30Icon }
 };
-var getCorrectIcon = ({ variant, size }) => {
+var LinjeTagIcon = ({ variant, size, css }) => {
   var _a5;
-  return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
+  const IconComponent2 = ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent2, {}) });
 };
 var LineIcon = React28.forwardRef(
   function LineIcon2({
@@ -4042,19 +4014,18 @@ var LineIcon = React28.forwardRef(
     const borderContainer = () => {
       return variant === "walk" && target === "travelTag" ? 0 : "1px";
     };
-    const Icon2 = getCorrectIcon({
-      variant: (
-        // eslint-disable-next-line no-nested-ternary
-        variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : variant === "custom" ? "local-train" : variant
-      ),
-      size
-    });
-    if (!Icon2) {
-      return null;
-    }
     if (foregroundColor) {
       styles.iconContainer.backgroundColor = disabled ? "surface.disabled" : foregroundColor;
     }
+    function getIconVariant() {
+      if (variant === "custom") {
+        if ("customIconVariant" in rest) {
+          return rest.customIconVariant;
+        }
+        return "local-train";
+      }
+      return variant;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Box,
       {
@@ -4065,7 +4036,14 @@ var LineIcon = React28.forwardRef(
         "aria-label": label,
         ref,
         className: clsx_default("light", rest.className),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { css: styles.icon })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LinjeTagIcon,
+          {
+            size,
+            css: styles.icon,
+            variant: getIconVariant()
+          }
+        )
       }
     );
   }
@@ -4099,6 +4077,23 @@ var InfoTag = ({
     ] })
   ] });
 };
+function renderDeviationLevelIcon(deviationLevel, size, css) {
+  switch (deviationLevel) {
+    case "critical": {
+      return size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorFill24Icon, { css }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorFill18Icon, { css });
+    }
+    case "major":
+    case "minor": {
+      return size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.WarningFill24Icon, { css }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.WarningFill18Icon, { css });
+    }
+    case "info": {
+      return size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill24Icon, { css }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill18Icon, { css });
+    }
+    default: {
+      return null;
+    }
+  }
+}
 var TravelTag = React28.forwardRef(
   function TravelTag2({
     variant,
@@ -4118,7 +4113,6 @@ var TravelTag = React28.forwardRef(
       size,
       deviationLevel
     });
-    const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       react.Box,
       {
@@ -4147,32 +4141,12 @@ var TravelTag = React28.forwardRef(
             title && description && " ",
             description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles.description, children: description })
           ] }),
-          DeviationLevelIcon && /* @__PURE__ */ jsxRuntime.jsx(DeviationLevelIcon, { css: styles.deviationIcon })
+          renderDeviationLevelIcon(deviationLevel, size, styles.deviationIcon)
         ]
       }
     );
   }
 );
-var getDeviationLevelIcon = ({
-  deviationLevel,
-  size
-}) => {
-  switch (deviationLevel) {
-    case "critical": {
-      return size === "lg" ? sporIconReact.ErrorFill24Icon : sporIconReact.ErrorFill18Icon;
-    }
-    case "major":
-    case "minor": {
-      return size === "lg" ? sporIconReact.WarningFill24Icon : sporIconReact.WarningFill18Icon;
-    }
-    case "info": {
-      return size === "lg" ? sporIconReact.InformationFill24Icon : sporIconReact.InformationFill18Icon;
-    }
-    default: {
-      return null;
-    }
-  }
-};
 var ExternalIcon = ({
   label,
   size