@vygruppen/spor-react 10.6.1 → 10.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.6.1 build
+> @vygruppen/spor-react@10.7.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
+CJS dist/index.js 539.38 KB
+CJS ⚡️ Build success in 2260ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-SIB4RO26.mjs 1.22 KB
-ESM dist/chunk-RQ4CWVFZ.mjs             425.08 KB
-ESM ⚡️ Build success in 2278ms
-CJS dist/index.js 538.54 KB
-CJS ⚡️ Build success in 2279ms
-DTS ⚡️ Build success in 15683ms
-DTS dist/index.d.ts  339.80 KB
-DTS dist/index.d.mts 339.80 KB
+ESM dist/CountryCodeSelect-NZI7KBTH.mjs 1.22 KB
+ESM dist/chunk-Q3JX25BX.mjs             425.89 KB
+ESM ⚡️ Build success in 2261ms
+DTS ⚡️ Build success in 15580ms
+DTS dist/index.d.ts  340.55 KB
+DTS dist/index.d.mts 340.55 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 10.7.0
+
+### Minor Changes
+
+- 13a1c22: ProgressBar: New isActive prop
+
+### Patch Changes
+
+- 4603ee1: Divider: Update styling for dashed variant
+
+## 10.6.2
+
+### Patch Changes
+
+- 297ab85: ServiceAlert: Fix bug with border
+
 ## 10.6.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-SIB4RO26.mjs → CountryCodeSelect-NZI7KBTH.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-RQ4CWVFZ.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-Q3JX25BX.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-RQ4CWVFZ.mjs → chunk-Q3JX25BX.mjs}

@@ -1841,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-SIB4RO26.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-NZI7KBTH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -2323,6 +2323,7 @@ var ProgressBar = ({
   height = "0.5rem",
   width = "100%",
   "aria-label": ariaLabel,
+  isActive = true,
   ...rest
 }) => {
   const { t: t2 } = useTranslation();
@@ -2335,7 +2336,7 @@ var ProgressBar = ({
     value,
     "aria-label": ariaLabel || t2(texts6.label(value))
   });
-  const styles3 = useMultiStyleConfig("ProgressBar", {});
+  const styles3 = useMultiStyleConfig("ProgressBar", { isActive });
   return /* @__PURE__ */ React85__default.createElement(React85__default.Fragment, null, /* @__PURE__ */ React85__default.createElement(
     Box,
     {
@@ -2344,7 +2345,14 @@ var ProgressBar = ({
       __css: styles3.container,
       ...rest
     },
-    /* @__PURE__ */ React85__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React85__default.createElement(Box, { __css: styles3.progress, height, width: `${value}%` })),
+    /* @__PURE__ */ React85__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React85__default.createElement(
+      Box,
+      {
+        __css: styles3.progress,
+        height,
+        width: isActive ? `${value}%` : "100%"
+      }
+    )),
     currentLoadingText && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
   ));
 };
@@ -2868,14 +2876,14 @@ var ServiceAlert = ({
   variant = "service";
   const { t: t2 } = useTranslation();
   const styles3 = useMultiStyleConfig("AlertService");
-  return /* @__PURE__ */ React85__default.createElement(Box, { flexDirection: "column", sx: styles3.box }, /* @__PURE__ */ React85__default.createElement(
+  return /* @__PURE__ */ React85__default.createElement(
     BaseAlert,
     {
       variant,
       ...boxProps,
       paddingX: 0,
       paddingY: 0,
-      sx: styles3.box
+      sx: styles3.outerBox
     },
     /* @__PURE__ */ React85__default.createElement(
       Accordion$1,
@@ -2883,7 +2891,9 @@ var ServiceAlert = ({
         onChange: (expandedIndex) => onToggle(expandedIndex === 0),
         defaultIndex: defaultOpen ? 0 : -1,
         allowToggle: true,
-        flexGrow: "1"
+        flexGrow: 1,
+        sx: { outline: "none" },
+        variant
       },
       /* @__PURE__ */ React85__default.createElement(AccordionItem, null, /* @__PURE__ */ React85__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React85__default.createElement(
         Stack$1,
@@ -2891,14 +2901,14 @@ var ServiceAlert = ({
           flexDirection: "row",
           justifyContent: "center",
           width: "100%",
-          paddingX: "12px"
+          paddingX: 2
         },
         /* @__PURE__ */ React85__default.createElement(
           Flex,
           {
             justifyContent: "space-between",
             alignItems: "center",
-            flexGrow: "1",
+            flexGrow: 1,
             maxWidth: contentWidth
           },
           /* @__PURE__ */ React85__default.createElement(Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React85__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React85__default.createElement(
@@ -2919,11 +2929,11 @@ var ServiceAlert = ({
           /* @__PURE__ */ React85__default.createElement(Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.notificationText }, t2(texts12.notification(notification))), /* @__PURE__ */ React85__default.createElement(AccordionIcon, { color: "white" }))
         )
       )), /* @__PURE__ */ React85__default.createElement(AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React85__default.createElement(Stack$1, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React85__default.createElement(
-        Flex,
+        Stack$1,
         {
-          justifyContent: "space-between",
+          justifyContent: "center",
           alignItems: "center",
-          flexGrow: "1",
+          flexGrow: 1,
           maxWidth: contentWidth,
           flexFlow: "column",
           gap: 2,
@@ -2940,7 +2950,7 @@ var ServiceAlert = ({
         children
       ))))
     )
-  ));
+  );
 };
 var texts12 = createTexts({
   notification: (notification) => {
@@ -10869,7 +10879,7 @@ var alert_expandable_default = config4;
 // src/theme/components/alert-service.ts
 var parts3 = anatomy("alertService").parts(
   "container",
-  "box",
+  "outerBox",
   "notificationText",
   "serviceMessageContent"
 );
@@ -10883,7 +10893,7 @@ var config5 = helpers4.defineMultiStyleConfig({
       transitionProperty: "outline, border-radius",
       transitionDuration: "fast",
       borderTopRadius: "none",
-      borderBottomRadius: "18px",
+      borderBottomRadius: "md",
       _hover: {
         outline: "2px solid",
         outlineColor: "blueGreen"
@@ -10893,12 +10903,13 @@ var config5 = helpers4.defineMultiStyleConfig({
         outlineColor: "pine"
       }
     },
-    box: {
+    outerBox: {
       outline: "1px solid",
       outlineColor: "blueGreen",
       backgroundColor: "darkTeal",
-      borderBottomRadius: "1.125rem",
-      borderTopRadius: "none"
+      borderBottomRadius: "md",
+      borderTopRadius: "none",
+      width: "100%"
     },
     notificationText: {
       color: "white",
@@ -12022,37 +12033,41 @@ var config14 = helpers8.defineMultiStyleConfig({
   }
 });
 var datepicker_default = config14;
-var baseStyle43 = defineStyle((props) => ({
-  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
-}));
-var variantSolid5 = defineStyle({
-  borderStyle: "solid"
-});
-var variantDashed2 = defineStyle({
-  borderStyle: "dashed"
-});
-var variants14 = {
-  solid: variantSolid5,
-  dashed: variantDashed2
-};
-var sizes25 = {
-  sm: {
-    borderWidth: "1px",
-    borderRadius: "0.5px"
+var isSolid = (props) => props.variant === "solid";
+var isDashed = (props) => props.variant === "dashed";
+var divider_default = defineStyleConfig({
+  baseStyle: (props) => ({
+    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
+  }),
+  variants: {
+    solid: {
+      borderStyle: "solid"
+    },
+    dashed: (props) => ({
+      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+      backgroundPosition: "left bottom",
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "100% 3px",
+      borderRadius: props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px"
+    })
   },
-  md: {
-    borderWidth: "2px",
-    borderRadius: "1px"
+  sizes: {
+    sm: (props) => ({
+      borderWidth: isSolid(props) ? "1px" : void 0,
+      borderRadius: isSolid(props) ? "0.5px" : void 0,
+      height: isDashed(props) ? "1px" : void 0
+    }),
+    md: (props) => ({
+      borderWidth: isSolid(props) ? "2px" : void 0,
+      borderRadius: isSolid(props) ? "1px" : "10px",
+      height: isDashed(props) ? "2px" : void 0
+    }),
+    lg: (props) => ({
+      borderWidth: isSolid(props) ? "3px" : void 0,
+      borderRadius: isSolid(props) ? "1.5px" : void 0,
+      height: isDashed(props) ? "3px" : void 0
+    })
   },
-  lg: {
-    borderWidth: "3px",
-    borderRadius: "1.5px"
-  }
-};
-var divider_default = defineStyleConfig({
-  baseStyle: baseStyle43,
-  variants: variants14,
-  sizes: sizes25,
   defaultProps: {
     variant: "solid",
     size: "md"
@@ -13011,7 +13026,7 @@ var link_default = config24;
 
 // src/theme/components/list.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
-var baseStyle44 = definePartsStyle28({
+var baseStyle43 = definePartsStyle28({
   container: {
     fontSize: ["mobile.sm", "desktop.sm"]
   },
@@ -13025,7 +13040,7 @@ var baseStyle44 = definePartsStyle28({
   }
 });
 var list_default = defineMultiStyleConfig28({
-  baseStyle: baseStyle44
+  baseStyle: baseStyle43
 });
 function outlineBorder(state2, props) {
   switch (state2) {
@@ -13474,19 +13489,16 @@ var config31 = helpers23.defineMultiStyleConfig({
     },
     background: {
       display: "flex",
-      backgroundColor: mode(
+      backgroundColor: props.isActive ? mode(
         "brand.surface.default.dark",
         "brand.surface.default.light"
-      )(props),
+      )(props) : void 0,
       borderRadius: "sm",
       justifyContent: "flex-start",
       marginX: "auto"
     },
     progress: {
-      backgroundColor: mode(
-        "brand.surface.active.light",
-        "brand.surface.active.dark"
-      )(props),
+      backgroundColor: props.isActive ? mode("brand.surface.active.light", "brand.surface.active.dark")(props) : mode("icon.disabled.light", "icon.disabled.dark")(props),
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out"
@@ -14753,17 +14765,17 @@ function useSizes({
   getNodes,
   observeMutation = true
 }) {
-  const [sizes26, setSizes] = useState([]);
+  const [sizes25, setSizes] = useState([]);
   const [count, setCount] = useState(0);
   useSafeLayoutEffect(() => {
     const elements = getNodes();
     const cleanups = elements.map(
       (element, index) => trackElementSize(element, (size2) => {
-        setSizes((sizes27) => {
+        setSizes((sizes26) => {
           return [
-            ...sizes27.slice(0, index),
+            ...sizes26.slice(0, index),
             size2,
-            ...sizes27.slice(index + 1)
+            ...sizes26.slice(index + 1)
           ];
         });
       })
@@ -14782,7 +14794,7 @@ function useSizes({
       });
     };
   }, [count]);
-  return sizes26;
+  return sizes25;
 }
 function isRef(ref) {
   return typeof ref === "object" && ref !== null && "current" in ref;

package/dist/index.d.mts

@@ -1760,6 +1760,8 @@ type ProgressBarProps = BoxProps & {
      * Defaults to 5000 (5 seconds).
      */
     labelRotationDelay?: number;
+    /** Pass to disable the color of the component */
+    isActive?: boolean;
 };
 /**
  * Shows the progress of a loading process.
@@ -1788,7 +1790,7 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, isActive, ...rest }: ProgressBarProps) => React.JSX.Element;
 
 type ProgressLoaderProps = BoxProps & {
     /** The percentage of progress made.
@@ -2664,12 +2666,13 @@ declare const theme: {
                         outlineColor: string;
                     };
                 };
-                box: {
+                outerBox: {
                     outline: string;
                     outlineColor: string;
                     backgroundColor: string;
                     borderBottomRadius: string;
                     borderTopRadius: string;
+                    width: string;
                 };
                 notificationText: {
                     color: string;
@@ -2686,12 +2689,12 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -2699,7 +2702,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+            parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
         };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3758,25 +3761,32 @@ declare const theme: {
                 borderColor: string;
             }) | undefined;
             sizes?: {
-                sm: {
-                    borderWidth: string;
-                    borderRadius: string;
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
-                md: {
-                    borderWidth: string;
+                md: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
                     borderRadius: string;
+                    height: string | undefined;
                 };
-                lg: {
-                    borderWidth: string;
-                    borderRadius: string;
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
             } | undefined;
             variants?: {
                 solid: {
                     borderStyle: string;
                 };
-                dashed: {
-                    borderStyle: string;
+                dashed: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundImage: string;
+                    backgroundPosition: string;
+                    backgroundRepeat: string;
+                    backgroundSize: string;
+                    borderRadius: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -5452,7 +5462,7 @@ declare const theme: {
                 };
                 background: {
                     display: string;
-                    backgroundColor: string;
+                    backgroundColor: string | undefined;
                     borderRadius: string;
                     justifyContent: string;
                     marginX: string;

package/dist/index.d.ts

@@ -1760,6 +1760,8 @@ type ProgressBarProps = BoxProps & {
      * Defaults to 5000 (5 seconds).
      */
     labelRotationDelay?: number;
+    /** Pass to disable the color of the component */
+    isActive?: boolean;
 };
 /**
  * Shows the progress of a loading process.
@@ -1788,7 +1790,7 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, isActive, ...rest }: ProgressBarProps) => React.JSX.Element;
 
 type ProgressLoaderProps = BoxProps & {
     /** The percentage of progress made.
@@ -2664,12 +2666,13 @@ declare const theme: {
                         outlineColor: string;
                     };
                 };
-                box: {
+                outerBox: {
                     outline: string;
                     outlineColor: string;
                     backgroundColor: string;
                     borderBottomRadius: string;
                     borderTopRadius: string;
+                    width: string;
                 };
                 notificationText: {
                     color: string;
@@ -2686,12 +2689,12 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+                    keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -2699,7 +2702,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "box" | "serviceMessageContent" | "notificationText")[];
+            parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
         };
         Badge: {
             baseStyle?: (({ colorScheme }: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3758,25 +3761,32 @@ declare const theme: {
                 borderColor: string;
             }) | undefined;
             sizes?: {
-                sm: {
-                    borderWidth: string;
-                    borderRadius: string;
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
-                md: {
-                    borderWidth: string;
+                md: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
                     borderRadius: string;
+                    height: string | undefined;
                 };
-                lg: {
-                    borderWidth: string;
-                    borderRadius: string;
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
             } | undefined;
             variants?: {
                 solid: {
                     borderStyle: string;
                 };
-                dashed: {
-                    borderStyle: string;
+                dashed: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundImage: string;
+                    backgroundPosition: string;
+                    backgroundRepeat: string;
+                    backgroundSize: string;
+                    borderRadius: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -5452,7 +5462,7 @@ declare const theme: {
                 };
                 background: {
                     display: string;
-                    backgroundColor: string;
+                    backgroundColor: string | undefined;
                     borderRadius: string;
                     justifyContent: string;
                     marginX: string;

package/dist/index.js

@@ -2726,6 +2726,7 @@ var init_ProgressBar = __esm({
       height = "0.5rem",
       width = "100%",
       "aria-label": ariaLabel,
+      isActive = true,
       ...rest
     }) => {
       const { t: t2 } = useTranslation();
@@ -2738,7 +2739,7 @@ var init_ProgressBar = __esm({
         value,
         "aria-label": ariaLabel || t2(texts7.label(value))
       });
-      const styles3 = react.useMultiStyleConfig("ProgressBar", {});
+      const styles3 = react.useMultiStyleConfig("ProgressBar", { isActive });
       return /* @__PURE__ */ React86__namespace.default.createElement(React86__namespace.default.Fragment, null, /* @__PURE__ */ React86__namespace.default.createElement(
         react.Box,
         {
@@ -2747,7 +2748,14 @@ var init_ProgressBar = __esm({
           __css: styles3.container,
           ...rest
         },
-        /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { width, __css: styles3.background }, /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { __css: styles3.progress, height, width: `${value}%` })),
+        /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { width, __css: styles3.background }, /* @__PURE__ */ React86__namespace.default.createElement(
+          react.Box,
+          {
+            __css: styles3.progress,
+            height,
+            width: isActive ? `${value}%` : "100%"
+          }
+        )),
         currentLoadingText && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
       ));
     };
@@ -3390,14 +3398,14 @@ var init_ServiceAlert = __esm({
       variant = "service";
       const { t: t2 } = useTranslation();
       const styles3 = react.useMultiStyleConfig("AlertService");
-      return /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { flexDirection: "column", sx: styles3.box }, /* @__PURE__ */ React86__namespace.default.createElement(
+      return /* @__PURE__ */ React86__namespace.default.createElement(
         BaseAlert,
         {
           variant,
           ...boxProps,
           paddingX: 0,
           paddingY: 0,
-          sx: styles3.box
+          sx: styles3.outerBox
         },
         /* @__PURE__ */ React86__namespace.default.createElement(
           react.Accordion,
@@ -3405,7 +3413,9 @@ var init_ServiceAlert = __esm({
             onChange: (expandedIndex) => onToggle(expandedIndex === 0),
             defaultIndex: defaultOpen ? 0 : -1,
             allowToggle: true,
-            flexGrow: "1"
+            flexGrow: 1,
+            sx: { outline: "none" },
+            variant
           },
           /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React86__namespace.default.createElement(
             react.Stack,
@@ -3413,14 +3423,14 @@ var init_ServiceAlert = __esm({
               flexDirection: "row",
               justifyContent: "center",
               width: "100%",
-              paddingX: "12px"
+              paddingX: 2
             },
             /* @__PURE__ */ React86__namespace.default.createElement(
               react.Flex,
               {
                 justifyContent: "space-between",
                 alignItems: "center",
-                flexGrow: "1",
+                flexGrow: 1,
                 maxWidth: contentWidth
               },
               /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React86__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React86__namespace.default.createElement(
@@ -3441,11 +3451,11 @@ var init_ServiceAlert = __esm({
               /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.notificationText }, t2(texts13.notification(notification))), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionIcon, { color: "white" }))
             )
           )), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React86__namespace.default.createElement(react.Stack, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React86__namespace.default.createElement(
-            react.Flex,
+            react.Stack,
             {
-              justifyContent: "space-between",
+              justifyContent: "center",
               alignItems: "center",
-              flexGrow: "1",
+              flexGrow: 1,
               maxWidth: contentWidth,
               flexFlow: "column",
               gap: 2,
@@ -3462,7 +3472,7 @@ var init_ServiceAlert = __esm({
             children
           ))))
         )
-      ));
+      );
     };
     texts13 = createTexts({
       notification: (notification) => {
@@ -12258,7 +12268,7 @@ var init_alert_service = __esm({
     init_dist3();
     parts3 = anatomy("alertService").parts(
       "container",
-      "box",
+      "outerBox",
       "notificationText",
       "serviceMessageContent"
     );
@@ -12272,7 +12282,7 @@ var init_alert_service = __esm({
           transitionProperty: "outline, border-radius",
           transitionDuration: "fast",
           borderTopRadius: "none",
-          borderBottomRadius: "18px",
+          borderBottomRadius: "md",
           _hover: {
             outline: "2px solid",
             outlineColor: "blueGreen"
@@ -12282,12 +12292,13 @@ var init_alert_service = __esm({
             outlineColor: "pine"
           }
         },
-        box: {
+        outerBox: {
           outline: "1px solid",
           outlineColor: "blueGreen",
           backgroundColor: "darkTeal",
-          borderBottomRadius: "1.125rem",
-          borderTopRadius: "none"
+          borderBottomRadius: "md",
+          borderTopRadius: "none",
+          width: "100%"
         },
         notificationText: {
           color: "white",
@@ -13592,41 +13603,45 @@ var init_datepicker2 = __esm({
     datepicker_default = config14;
   }
 });
-var baseStyle43, variantSolid5, variantDashed2, variants14, sizes25, divider_default;
+var isSolid, isDashed, divider_default;
 var init_divider = __esm({
   "src/theme/components/divider.ts"() {
     init_dist3();
-    baseStyle43 = defineStyle((props) => ({
-      borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
-    }));
-    variantSolid5 = defineStyle({
-      borderStyle: "solid"
-    });
-    variantDashed2 = defineStyle({
-      borderStyle: "dashed"
-    });
-    variants14 = {
-      solid: variantSolid5,
-      dashed: variantDashed2
-    };
-    sizes25 = {
-      sm: {
-        borderWidth: "1px",
-        borderRadius: "0.5px"
+    isSolid = (props) => props.variant === "solid";
+    isDashed = (props) => props.variant === "dashed";
+    divider_default = defineStyleConfig({
+      baseStyle: (props) => ({
+        borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
+      }),
+      variants: {
+        solid: {
+          borderStyle: "solid"
+        },
+        dashed: (props) => ({
+          backgroundImage: `repeating-linear-gradient(90deg, ${themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+          backgroundPosition: "left bottom",
+          backgroundRepeat: "repeat-x",
+          backgroundSize: "100% 3px",
+          borderRadius: props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px"
+        })
       },
-      md: {
-        borderWidth: "2px",
-        borderRadius: "1px"
+      sizes: {
+        sm: (props) => ({
+          borderWidth: isSolid(props) ? "1px" : void 0,
+          borderRadius: isSolid(props) ? "0.5px" : void 0,
+          height: isDashed(props) ? "1px" : void 0
+        }),
+        md: (props) => ({
+          borderWidth: isSolid(props) ? "2px" : void 0,
+          borderRadius: isSolid(props) ? "1px" : "10px",
+          height: isDashed(props) ? "2px" : void 0
+        }),
+        lg: (props) => ({
+          borderWidth: isSolid(props) ? "3px" : void 0,
+          borderRadius: isSolid(props) ? "1.5px" : void 0,
+          height: isDashed(props) ? "3px" : void 0
+        })
       },
-      lg: {
-        borderWidth: "3px",
-        borderRadius: "1.5px"
-      }
-    };
-    divider_default = defineStyleConfig({
-      baseStyle: baseStyle43,
-      variants: variants14,
-      sizes: sizes25,
       defaultProps: {
         variant: "solid",
         size: "md"
@@ -14668,13 +14683,13 @@ var init_link2 = __esm({
 });
 
 // src/theme/components/list.ts
-var defineMultiStyleConfig28, definePartsStyle28, baseStyle44, list_default;
+var defineMultiStyleConfig28, definePartsStyle28, baseStyle43, list_default;
 var init_list2 = __esm({
   "src/theme/components/list.ts"() {
     init_dist4();
     init_dist3();
     ({ defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys));
-    baseStyle44 = definePartsStyle28({
+    baseStyle43 = definePartsStyle28({
       container: {
         fontSize: ["mobile.sm", "desktop.sm"]
       },
@@ -14688,7 +14703,7 @@ var init_list2 = __esm({
       }
     });
     list_default = defineMultiStyleConfig28({
-      baseStyle: baseStyle44
+      baseStyle: baseStyle43
     });
   }
 });
@@ -15197,19 +15212,16 @@ var init_progress_bar = __esm({
         },
         background: {
           display: "flex",
-          backgroundColor: themeTools.mode(
+          backgroundColor: props.isActive ? themeTools.mode(
             "brand.surface.default.dark",
             "brand.surface.default.light"
-          )(props),
+          )(props) : void 0,
           borderRadius: "sm",
           justifyContent: "flex-start",
           marginX: "auto"
         },
         progress: {
-          backgroundColor: themeTools.mode(
-            "brand.surface.active.light",
-            "brand.surface.active.dark"
-          )(props),
+          backgroundColor: props.isActive ? themeTools.mode("brand.surface.active.light", "brand.surface.active.dark")(props) : themeTools.mode("icon.disabled.light", "icon.disabled.dark")(props),
           borderRadius: "sm",
           maxWidth: "100%",
           transition: "width .2s ease-out"
@@ -16757,17 +16769,17 @@ function useSizes({
   getNodes,
   observeMutation = true
 }) {
-  const [sizes26, setSizes] = React86.useState([]);
+  const [sizes25, setSizes] = React86.useState([]);
   const [count, setCount] = React86.useState(0);
   useSafeLayoutEffect(() => {
     const elements = getNodes();
     const cleanups = elements.map(
       (element, index) => trackElementSize(element, (size2) => {
-        setSizes((sizes27) => {
+        setSizes((sizes26) => {
           return [
-            ...sizes27.slice(0, index),
+            ...sizes26.slice(0, index),
             size2,
-            ...sizes27.slice(index + 1)
+            ...sizes26.slice(index + 1)
           ];
         });
       })
@@ -16786,7 +16798,7 @@ function useSizes({
       });
     };
   }, [count]);
-  return sizes26;
+  return sizes25;
 }
 function isRef(ref) {
   return typeof ref === "object" && ref !== null && "current" in ref;

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-RQ4CWVFZ.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-Q3JX25BX.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "10.6.1",
+  "version": "10.7.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/alert/ServiceAlert.tsx

@@ -60,92 +60,92 @@ export const ServiceAlert = ({
   const { t } = useTranslation();
   const styles = useMultiStyleConfig("AlertService");
   return (
-    <Box flexDirection="column" sx={styles.box}>
-      <BaseAlert
+    <BaseAlert
+      variant={variant}
+      {...boxProps}
+      paddingX={0}
+      paddingY={0}
+      sx={styles.outerBox}
+    >
+      <Accordion
+        onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
+        defaultIndex={defaultOpen ? 0 : -1}
+        allowToggle
+        flexGrow={1}
+        sx={{ outline: "none" }}
         variant={variant}
-        {...boxProps}
-        paddingX={0}
-        paddingY={0}
-        sx={styles.box}
       >
-        <Accordion
-          onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
-          defaultIndex={defaultOpen ? 0 : -1}
-          allowToggle
-          flexGrow="1"
-        >
-          <AccordionItem>
-            <AccordionButton sx={styles.container}>
-              <Stack
-                flexDirection="row"
-                justifyContent="center"
-                width="100%"
-                paddingX="12px"
+        <AccordionItem>
+          <AccordionButton sx={styles.container}>
+            <Stack
+              flexDirection="row"
+              justifyContent="center"
+              width="100%"
+              paddingX={2}
+            >
+              <Flex
+                justifyContent="space-between"
+                alignItems="center"
+                flexGrow={1}
+                maxWidth={contentWidth}
               >
-                <Flex
-                  justifyContent="space-between"
-                  alignItems="center"
-                  flexGrow="1"
-                  maxWidth={contentWidth}
-                >
-                  <Flex as={headingLevel} alignItems="center">
-                    <AlertIcon variant={variant} />
+                <Flex as={headingLevel} alignItems="center">
+                  <AlertIcon variant={variant} />
 
-                    <Box
-                      as="span"
-                      sx={{
-                        // Truncate the title to one line
-                        display: "-webkit-box",
-                        overflow: "hidden",
-                        WebkitLineClamp: "1",
-                        WebkitBoxOrient: "vertical",
-                      }}
-                      color="white"
-                    >
-                      {title}
-                    </Box>
-                  </Flex>
+                  <Box
+                    as="span"
+                    sx={{
+                      // Truncate the title to one line
+                      display: "-webkit-box",
+                      overflow: "hidden",
+                      WebkitLineClamp: "1",
+                      WebkitBoxOrient: "vertical",
+                    }}
+                    color="white"
+                  >
+                    {title}
+                  </Box>
+                </Flex>
 
-                  <Flex alignItems="center">
-                    {notification && (
-                      <Text sx={styles.notificationText}>
-                        {t(texts.notification(notification))}
-                      </Text>
-                    )}
+                <Flex alignItems="center">
+                  {notification && (
+                    <Text sx={styles.notificationText}>
+                      {t(texts.notification(notification))}
+                    </Text>
+                  )}
 
-                    <AccordionIcon color="white" />
-                  </Flex>
+                  <AccordionIcon color="white" />
                 </Flex>
-              </Stack>
-            </AccordionButton>
+              </Flex>
+            </Stack>
+          </AccordionButton>
 
-            <AccordionPanel sx={styles.serviceMessageContent}>
-              <Stack flexDirection="row" justifyContent="center" width="100%">
-                <Flex
-                  justifyContent="space-between"
-                  alignItems="center"
-                  flexGrow="1"
-                  maxWidth={contentWidth}
-                  flexFlow="column"
-                  gap={2}
-                  sx={{
-                    p: {
-                      padding: "0.8rem 0",
-                      borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
-                    },
-                    "p:last-child": {
-                      borderBottom: "none",
-                    },
-                  }}
-                >
-                  {children}
-                </Flex>
+          <AccordionPanel sx={styles.serviceMessageContent}>
+            <Stack flexDirection="row" justifyContent="center" width="100%">
+              <Stack
+                justifyContent="center"
+                alignItems="center"
+                flexGrow={1}
+                maxWidth={contentWidth}
+                flexFlow="column"
+                gap={2}
+                sx={{
+                  p: {
+                    padding: "0.8rem 0",
+                    borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
+                  },
+                  "p:last-child": {
+                    borderBottom: "none",
+                  },
+                }}
+              >
+                {children}
               </Stack>
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
-      </BaseAlert>
-    </Box>
+            </Stack>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </BaseAlert>
   );
 };
 

package/src/loader/ProgressBar.tsx

@@ -31,6 +31,9 @@ type ProgressBarProps = BoxProps & {
    * Defaults to 5000 (5 seconds).
    */
   labelRotationDelay?: number;
+
+  /** Pass to disable the color of the component */
+  isActive?: boolean;
 };
 
 /**
@@ -67,6 +70,7 @@ export const ProgressBar = ({
   height = "0.5rem",
   width = "100%",
   "aria-label": ariaLabel,
+  isActive = true,
   ...rest
 }: ProgressBarProps) => {
   const { t } = useTranslation();
@@ -79,7 +83,7 @@ export const ProgressBar = ({
     value,
     "aria-label": ariaLabel || t(texts.label(value)),
   });
-  const styles = useMultiStyleConfig("ProgressBar", {});
+  const styles = useMultiStyleConfig("ProgressBar", { isActive });
   return (
     <>
       <Box
@@ -89,7 +93,11 @@ export const ProgressBar = ({
         {...rest}
       >
         <Box width={width} __css={styles.background}>
-          <Box __css={styles.progress} height={height} width={`${value}%`} />
+          <Box
+            __css={styles.progress}
+            height={height}
+            width={isActive ? `${value}%` : "100%"}
+          />
         </Box>
         {currentLoadingText && (
           <Text sx={styles.description} {...labelProps}>

package/src/theme/components/alert-service.ts

@@ -3,7 +3,7 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 
 const parts = anatomy("alertService").parts(
   "container",
-  "box",
+  "outerBox",
   "notificationText",
   "serviceMessageContent",
 );
@@ -18,7 +18,7 @@ const config = helpers.defineMultiStyleConfig({
       transitionProperty: "outline, border-radius",
       transitionDuration: "fast",
       borderTopRadius: "none",
-      borderBottomRadius: "18px",
+      borderBottomRadius: "md",
       _hover: {
         outline: "2px solid",
         outlineColor: "blueGreen",
@@ -28,12 +28,13 @@ const config = helpers.defineMultiStyleConfig({
         outlineColor: "pine",
       },
     },
-    box: {
+    outerBox: {
       outline: "1px solid",
       outlineColor: "blueGreen",
       backgroundColor: "darkTeal",
-      borderBottomRadius: "1.125rem",
+      borderBottomRadius: "md",
       borderTopRadius: "none",
+      width: "100%",
     },
     notificationText: {
       color: "white",

package/src/theme/components/divider.ts

@@ -1,42 +1,43 @@
-import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
+import { defineStyleConfig } from "@chakra-ui/styled-system";
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 
-const baseStyle = defineStyle((props) => ({
-  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
-}));
+const isSolid = (props: StyleFunctionProps) => props.variant === "solid";
+const isDashed = (props: StyleFunctionProps) => props.variant === "dashed";
 
-const variantSolid = defineStyle({
-  borderStyle: "solid",
-});
-
-const variantDashed = defineStyle({
-  borderStyle: "dashed",
-});
-
-const variants = {
-  solid: variantSolid,
-  dashed: variantDashed,
-};
-
-const sizes = {
-  sm: {
-    borderWidth: "1px",
-    borderRadius: "0.5px",
-  },
-  md: {
-    borderWidth: "2px",
-    borderRadius: "1px",
+export default defineStyleConfig({
+  baseStyle: (props) => ({
+    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
+  }),
+  variants: {
+    solid: {
+      borderStyle: "solid",
+    },
+    dashed: (props) => ({
+      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+      backgroundPosition: "left bottom",
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "100% 3px",
+      borderRadius:
+        props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px",
+    }),
   },
-  lg: {
-    borderWidth: "3px",
-    borderRadius: "1.5px",
+  sizes: {
+    sm: (props) => ({
+      borderWidth: isSolid(props) ? "1px" : undefined,
+      borderRadius: isSolid(props) ? "0.5px" : undefined,
+      height: isDashed(props) ? "1px" : undefined,
+    }),
+    md: (props) => ({
+      borderWidth: isSolid(props) ? "2px" : undefined,
+      borderRadius: isSolid(props) ? "1px" : "10px",
+      height: isDashed(props) ? "2px" : undefined,
+    }),
+    lg: (props) => ({
+      borderWidth: isSolid(props) ? "3px" : undefined,
+      borderRadius: isSolid(props) ? "1.5px" : undefined,
+      height: isDashed(props) ? "3px" : undefined,
+    }),
   },
-};
-
-export default defineStyleConfig({
-  baseStyle,
-  variants,
-  sizes,
   defaultProps: {
     variant: "solid",
     size: "md",

package/src/theme/components/progress-bar.ts

@@ -17,19 +17,20 @@ const config = helpers.defineMultiStyleConfig({
     },
     background: {
       display: "flex",
-      backgroundColor: mode(
-        "brand.surface.default.dark",
-        "brand.surface.default.light",
-      )(props),
+      backgroundColor: props.isActive
+        ? mode(
+            "brand.surface.default.dark",
+            "brand.surface.default.light",
+          )(props)
+        : undefined,
       borderRadius: "sm",
       justifyContent: "flex-start",
       marginX: "auto",
     },
     progress: {
-      backgroundColor: mode(
-        "brand.surface.active.light",
-        "brand.surface.active.dark",
-      )(props),
+      backgroundColor: props.isActive
+        ? mode("brand.surface.active.light", "brand.surface.active.dark")(props)
+        : mode("icon.disabled.light", "icon.disabled.dark")(props),
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out",