@vygruppen/spor-react 6.2.3 → 7.0.1

package/dist/{chunk-YFZOYRGT.mjs → chunk-CSCLMQYA.mjs}

@@ -1210,19 +1210,19 @@ var Button = forwardRef((props, ref) => {
     /* @__PURE__ */ React69__default.createElement(
       Flex,
       {
-        justifyContent: "space-between",
+        gap: 1,
         flex: 1,
         alignItems: "center",
-        gap: 1,
+        justifyContent: rightIcon ? "space-between" : "center",
         visibility: isLoading ? "hidden" : "visible",
         "aria-hidden": isLoading
       },
-      /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", alignItems: "center", gap: 1 }, leftIcon, /* @__PURE__ */ React69__default.createElement(
+      /* @__PURE__ */ React69__default.createElement(Flex, { gap: 1 }, leftIcon, /* @__PURE__ */ React69__default.createElement(
         Box,
         {
           visibility: isLoading ? "hidden" : "visible",
           whiteSpace: "normal",
-          textAlign: "left"
+          textAlign: "center"
         },
         children
       )),
@@ -3218,9 +3218,6 @@ var VerySmallButton = (props) => {
       size: "xs",
       minWidth: "24px",
       minHeight: "24px",
-      _focusVisible: {
-        boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
-      },
       ...props
     }
   );
@@ -3420,7 +3417,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-QZYP3GSD.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-EKQUBVBJ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4313,7 +4310,7 @@ var Stepper = ({
         },
         step
       ))
-    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
+    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
   ));
 };
 var texts22 = createTexts({
@@ -9747,13 +9744,16 @@ var styles2 = {
     }
   })
 };
-
-// src/theme/utils/focus-utils.ts
-var focusVisible = ({ notFocus, focus }) => ({
-  _focus: focus,
-  _focusVisible: focus,
-  "&[data-focus]:not([data-focus-visible])": notFocus
+var focusVisibleStyles = (props) => ({
+  _focusVisible: {
+    outlineWidth: "2px",
+    outlineColor: mode("greenHaze", "azure")(props),
+    outlineStyle: "solid",
+    outlineOffset: "1px"
+  }
 });
+
+// src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
@@ -9766,25 +9766,14 @@ var config3 = helpers.defineMultiStyleConfig({
       transitionDuration: "normal",
       border: "none",
       borderRadius: "sm",
+      borderColor: "osloGrey",
       display: "flex",
       justifyContent: "space-between",
       color: mode("darkGrey", "white")(props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
-      ...focusVisible({
-        notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "osloGrey"
-          })
-        },
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          })
-        }
-      }),
+      ...focusVisibleStyles(props),
       _disabled: {
         opacity: 0.4,
         cursor: "not-allowed"
@@ -10060,7 +10049,6 @@ var baseStyleLink2 = defineStyle((props) => ({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
-  outline: "none",
   color: "inherit",
   textDecoration: "none",
   textStyle: "xs",
@@ -10071,17 +10059,7 @@ var baseStyleLink2 = defineStyle((props) => ({
     _hover: {
       backgroundColor: mode("seaMist", "pine")(props)
     },
-    ...focusVisible({
-      focus: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      },
-      notFocus: {
-        boxShadow: "none"
-      }
-    }),
+    ...focusVisibleStyles(props),
     _active: {
       backgroundColor: mode("mint", "whiteAlpha.200")(props)
     }
@@ -10098,11 +10076,12 @@ var breadcrumb_default = defineMultiStyleConfig27({
   baseStyle: baseStyle43
 });
 var config6 = defineStyleConfig$1({
-  baseStyle: {
+  baseStyle: (props) => ({
     border: 0,
     borderRadius: "xl",
     display: "flex",
     alignItems: "center",
+    justifyContent: "center",
     transitionProperty: "common",
     transitionDuration: "normal",
     textWrap: "wrap",
@@ -10112,33 +10091,25 @@ var config6 = defineStyleConfig$1({
       boxShadow: 0,
       outline: 0
     },
+    ...focusVisibleStyles(props),
     _disabled: {
       cursor: "not-allowed",
       boxShadow: "none",
-      backgroundColor: "silver",
-      color: "dimGrey"
+      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+      color: mode("blackAlpha.400", "whiteAlpha.400")(props)
     },
     _hover: {
       _disabled: {
-        background: "silver"
+        background: mode("blackAlpha.100", "whiteAlpha.100")(props)
       }
     }
-  },
+  }),
   variants: {
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
       backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
-      _focusVisible: {
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.azure
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.darkGrey
-        )(props)}`
-      },
       _hover: {
         backgroundColor: mode("darkTeal", "blueGreen")(props)
       },
@@ -10154,24 +10125,6 @@ var config6 = defineStyleConfig$1({
       _hover: {
         backgroundColor: mode("coralGreen", "greenHaze")(props)
       },
-      _focusVisible: {
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.primaryGreen
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.darkTeal
-        )(props)}`,
-        _hover: {
-          boxShadow: `inset 0 0 0 2px ${mode(
-            colors.greenHaze,
-            colors.azure
-          )(props)}, inset 0 0 0 4px ${mode(
-            colors.white,
-            colors.blackAlpha[500]
-          )(props)}`
-        }
-      },
       _active: {
         backgroundColor: mode("mint", "darkTeal")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
@@ -10199,12 +10152,6 @@ var config6 = defineStyleConfig$1({
         colors.blackAlpha[400],
         colors.whiteAlpha[400]
       )(props)}`,
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: "azure"
-        })
-      },
       _hover: {
         boxShadow: `inset 0 0 0 2px currentColor`
       },
@@ -10219,12 +10166,6 @@ var config6 = defineStyleConfig$1({
     ghost: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      },
       _hover: {
         backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
@@ -10251,20 +10192,6 @@ var config6 = defineStyleConfig$1({
           baseShadow: "md",
           borderWidth: 2
         })
-      },
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-          baseShadow: "sm"
-        }),
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-            baseShadow: "md"
-          })
-        }
       }
     })
   },
@@ -10315,16 +10242,8 @@ var config7 = defineStyleConfig$1({
     "button&, a&, label&, &.is-clickable": {
       ...getColorSchemeClickableProps(props),
       _hover: getColorSchemeHoverProps(props),
+      ...focusVisibleStyles(props),
       _active: getColorSchemeActiveProps(props),
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-          isInset: false
-        }),
-        outline: "none",
-        _active: getColorSchemeActiveProps(props)
-      },
       _disabled: {
         backgroundColor: "platinum",
         boxShadow: getBoxShadowString({
@@ -10380,16 +10299,14 @@ function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: "silver",
-          isInset: false
+          borderColor: "silver"
         })
       };
     case "grey":
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: "steel",
-          isInset: false
+          borderColor: "steel"
         })
       };
     default:
@@ -10397,8 +10314,7 @@ function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
         backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver",
-          isInset: false
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
         })
       };
   }
@@ -10413,16 +10329,14 @@ var getColorSchemeHoverProps = (props) => {
         backgroundColor: mode("white", "whiteAlpha.200")(props),
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors.steel,
-          isInset: false
+          borderColor: colors.steel
         })
       };
     case "grey":
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors.osloGrey,
-          isInset: false
+          borderColor: colors.osloGrey
         })
       };
     default:
@@ -10430,8 +10344,7 @@ var getColorSchemeHoverProps = (props) => {
         backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver,
-          isInset: false
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver
         })
       };
   }
@@ -10446,8 +10359,7 @@ var getColorSchemeActiveProps = (props) => {
         backgroundColor: mode("mint", "teal")(props),
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors.silver,
-          isInset: false
+          borderColor: colors.silver
         })
       };
     case "grey":
@@ -10455,8 +10367,7 @@ var getColorSchemeActiveProps = (props) => {
         backgroundColor: "white",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors.steel,
-          isInset: false
+          borderColor: colors.steel
         })
       };
     default:
@@ -10464,8 +10375,7 @@ var getColorSchemeActiveProps = (props) => {
         backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver,
-          isInset: false
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver
         })
       };
   }
@@ -10564,16 +10474,7 @@ var config8 = helpers3.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
-      ...focusVisible({
-        notFocus: {},
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 3
-          }),
-          outline: "none"
-        }
-      })
+      ...focusVisibleStyles(props)
     },
     card: {
       borderRadius: "sm",
@@ -10589,20 +10490,10 @@ var config8 = helpers3.defineMultiStyleConfig({
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
         }),
-        ...focusVisible({
-          notFocus: { boxShadow: "none" },
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 3
-            }),
-            outline: "none"
-          }
-        }),
         _hover: {
           boxShadow: getBoxShadowString({
             borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 3
+            borderWidth: 2
           })
         },
         _active: {
@@ -10644,13 +10535,17 @@ var config8 = helpers3.defineMultiStyleConfig({
     floating: (props) => ({
       trigger: {
         ...floatingBackground("default", props),
-        boxShadow: "sm",
+        boxShadow: getBoxShadowString({
+          borderColor: mode("silver", "whiteAlpha.400")(props),
+          borderWidth: 1,
+          baseShadow: "sm"
+        }),
         transition: "all .1s ease-out",
         _hover: {
           ...floatingBackground("hover", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
-            borderWidth: 1,
+            borderWidth: 2,
             baseShadow: "sm"
           })
         },
@@ -10711,7 +10606,7 @@ var config8 = helpers3.defineMultiStyleConfig({
 var card_select_default = config8;
 var helpers4 = createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
 var config9 = helpers4.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       _hover: {
         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
@@ -10753,10 +10648,7 @@ var config9 = helpers4.defineMultiStyleConfig({
         backgroundColor: "primaryGreen",
         borderColor: "primaryGreen",
         color: "white",
-        _focus: {
-          backgroundColor: "primaryGreen",
-          borderColor: "azure"
-        },
+        ...focusVisibleStyles(props),
         _disabled: {
           backgroundColor: "lightGrey",
           borderColor: "steel",
@@ -10771,10 +10663,6 @@ var config9 = helpers4.defineMultiStyleConfig({
         backgroundColor: "lightGrey",
         borderColor: "steel"
       },
-      _focus: {
-        backgroundColor: "white",
-        borderColor: "azure"
-      },
       _invalid: {
         backgroundColor: "white",
         borderColor: "brightRed"
@@ -10784,7 +10672,7 @@ var config9 = helpers4.defineMultiStyleConfig({
       userSelect: "none",
       _disabled: { opacity: 0.4 }
     }
-  }
+  })
 });
 var checkbox_default = config9;
 var parts3 = anatomy$1("choice-chip").parts("container", "icon", "label");
@@ -10804,15 +10692,7 @@ var config10 = helpers5.defineMultiStyleConfig({
         background: "pine",
         boxShadow: getBoxShadowString({ borderColor: "celadon" })
       },
-      "input:focus-visible + &": {
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.azure
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.darkGrey
-        )(props)}`
-      },
+      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
       "@media (hover:hover)": {
         _hover: {
           color: mode("darkTeal", "white")(props),
@@ -10881,18 +10761,7 @@ var config11 = defineStyleConfig$1({
     backgroundColor: "transparent",
     color: mode("darkGrey", "white")(props),
     fontWeight: "normal",
-    ...focusVisible({
-      focus: {
-        outline: "none",
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props)
-        }),
-        outlineOffset: "2px"
-      },
-      notFocus: {
-        boxShadow: "none"
-      }
-    }),
+    ...focusVisibleStyles(props),
     _hover: {
       backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
       _disabled: {
@@ -10928,7 +10797,7 @@ var config12 = defineStyleConfig$1({
     fontFamily: "monospace",
     fontSize: ["mobile.xs", "desktop.xs"],
     borderRadius: "xs",
-    px: 1
+    paddingX: 1
   },
   variants: variants13,
   defaultProps: defaultProps2
@@ -10967,6 +10836,9 @@ var config13 = helpers6.defineMultiStyleConfig({
       },
       _disabled: {
         pointerEvents: "none"
+      },
+      _focusWithin: {
+        ...focusVisibleStyles(props)._focusVisible
       }
     },
     inputLabel: {
@@ -10983,7 +10855,10 @@ var config13 = helpers6.defineMultiStyleConfig({
     },
     calendarTriggerButton: {
       backgroundColor: mode("white", "night")(props),
-      boxShadow: "none",
+      boxShadow: getBoxShadowString({
+        borderColor: mode("darkGrey", "white")(props),
+        borderWidth: 1
+      }),
       width: 8,
       display: "flex",
       alignItems: "center",
@@ -11003,21 +10878,7 @@ var config13 = helpers6.defineMultiStyleConfig({
       _active: {
         backgroundColor: mode("mint", "whiteAlpha.200")(props)
       },
-      ...focusVisible({
-        focus: {
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          })
-        },
-        notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 1
-          })
-        }
-      }),
+      ...focusVisibleStyles(props),
       _invalid: {
         boxShadow: getBoxShadowString({
           borderColor: "brightRed",
@@ -11057,27 +10918,11 @@ var config13 = helpers6.defineMultiStyleConfig({
       _hover: {
         backgroundColor: mode("seaMist", "pine")(props)
       },
-      ...focusVisible({
-        focus: {
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            borderColor: mode("greenHaze", "azure")(props)
-          })
-        },
-        notFocus: {
-          boxShadow: "none",
-          _hover: {
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: "osloGrey"
-            })
-          },
-          _active: {
-            color: mode("darkGrey", "white")(props)
-          }
-        }
-      }),
+      _focusVisible: {
+        outlineColor: "greenHaze",
+        outlineWidth: 2,
+        outlineStyle: "solid"
+      },
       _active: {
         backgroundColor: "seaMist",
         boxShadow: "none",
@@ -11101,14 +10946,7 @@ var config13 = helpers6.defineMultiStyleConfig({
         boxShadow: getBoxShadowString({
           borderWidth: 1,
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        }),
-        _focus: {
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            borderColor: mode("greenHaze", "azure")(props)
-          })
-        }
+        })
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
@@ -11128,12 +10966,6 @@ var config13 = helpers6.defineMultiStyleConfig({
             borderWidth: 2
           })
         },
-        _focusWithin: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          })
-        },
         _invalid: {
           boxShadow: getBoxShadowString({
             borderColor: "brightRed",
@@ -11187,13 +11019,6 @@ var config13 = helpers6.defineMultiStyleConfig({
             baseShadow: "sm"
           })
         },
-        _focusWithin: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-            baseShadow: "sm"
-          })
-        },
         _invalid: {
           boxShadow: getBoxShadowString({
             borderColor: "brightRed",
@@ -11240,12 +11065,6 @@ var config13 = helpers6.defineMultiStyleConfig({
             borderWidth: 2
           })
         },
-        _focusWithin: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          })
-        },
         _invalid: {
           boxShadow: getBoxShadowString({
             borderColor: "brightRed",
@@ -11343,9 +11162,9 @@ var config14 = helpers7.defineMultiStyleConfig({
       boxShadow: "md"
     },
     header: {
-      px: 3,
-      pt: 6,
-      pb: 2,
+      paddingX: 3,
+      paddingTop: 6,
+      paddingBottom: 2,
       fontWeight: "bold",
       fontFamily: "body"
     },
@@ -11356,14 +11175,14 @@ var config14 = helpers7.defineMultiStyleConfig({
       zIndex: "modal"
     },
     body: {
-      px: 3,
-      pb: 6,
+      paddingX: 3,
+      paddingBottom: 6,
       flex: 1,
       overflow: props.scrollBehavior === "inside" ? "auto" : void 0
     },
     footer: {
-      px: 3,
-      pb: 3
+      paddingX: 3,
+      paddingBottom: 3
     }
   }),
   sizes: {
@@ -11408,9 +11227,9 @@ var config15 = helpers8.defineMultiStyleConfig({
     container: {
       display: "flex",
       alignItems: "center",
-      py: 2,
-      pl: 2,
-      pr: props.isTextVisible ? 3 : 2,
+      paddingY: 2,
+      paddingLeft: 2,
+      paddingRight: props.isTextVisible ? 3 : 2,
       cursor: "pointer",
       overflowX: "hidden",
       whiteSpace: "nowrap",
@@ -11421,28 +11240,21 @@ var config15 = helpers8.defineMultiStyleConfig({
       position: "fixed",
       ...getPositionProps(props),
       _disabled: {
-        backgroundColor: "whiteAlpha.400",
-        color: "white"
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
       },
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2,
-            baseShadow: "md"
-          })
-        },
-        notFocus: {
-          boxShadow: "md"
-        }
-      }),
+      ...focusVisibleStyles(props),
       _hover: {
-        backgroundColor: "seaMist"
+        backgroundColor: "seaMist",
+        _disabled: {
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        }
       },
       zIndex: "sticky"
     },
     icon: {
-      mr: props.isTextVisible ? 1 : 0
+      marginRight: props.isTextVisible ? 1 : 0
     },
     text: {
       display: "flex",
@@ -11460,16 +11272,7 @@ var config15 = helpers8.defineMultiStyleConfig({
         _active: { backgroundColor: "pine" },
         _hover: {
           backgroundColor: "night"
-        },
-        ...focusVisible({
-          focus: {
-            boxShadow: `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`,
-            outline: "none"
-          },
-          notFocus: {
-            boxShadow: "md"
-          }
-        })
+        }
       }
     }),
     light: {
@@ -11493,19 +11296,7 @@ var config15 = helpers8.defineMultiStyleConfig({
         _active: { backgroundColor: mode("pine", "white")(props) },
         _hover: {
           backgroundColor: mode("night", "seaMist")(props)
-        },
-        ...focusVisible({
-          focus: {
-            boxShadow: mode(
-              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`,
-              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.darkTeal}`
-            )(props),
-            outline: "none"
-          },
-          notFocus: {
-            boxShadow: "md"
-          }
-        })
+        }
       }
     }),
     base: (props) => ({
@@ -11523,19 +11314,7 @@ var config15 = helpers8.defineMultiStyleConfig({
             `inset 0 0 0 2px ${props.theme.colors.white}`
           )(props),
           color: mode("darkGrey", "white")(props)
-        },
-        ...focusVisible({
-          focus: {
-            boxShadow: mode(
-              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.white}, inset 0 0 0 6px ${props.theme.colors.darkGrey}`,
-              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.brightRed}, inset 0 0 0 6px ${props.theme.colors.white}`
-            )(props),
-            outline: "none"
-          },
-          notFocus: {
-            boxShadow: "md"
-          }
-        })
+        }
       }
     }),
     accent: (props) => ({
@@ -11549,19 +11328,7 @@ var config15 = helpers8.defineMultiStyleConfig({
         _hover: {
           backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
           color: mode("darkTeal", "white")(props)
-        },
-        ...focusVisible({
-          focus: {
-            boxShadow: mode(
-              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.azure}`,
-              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.pine}, inset 0 0 0 6px ${props.theme.colors.azure}`
-            )(props),
-            outline: "none"
-          },
-          notFocus: {
-            boxShadow: "md"
-          }
-        })
+        }
       }
     })
   },
@@ -11596,7 +11363,7 @@ var config16 = helpers9.defineMultiStyleConfig({
       color: mode("brightRed", "lightRed")(props)
     },
     helperText: {
-      mt: 2,
+      marginTop: 2,
       color: mode("dimGrey", "whiteAlpha.600")(props),
       lineHeight: "normal",
       fontSize: "sm"
@@ -11608,7 +11375,7 @@ var config17 = defineStyleConfig$1({
   baseStyle: {
     fontSize: "mobile.sm",
     marginEnd: 3,
-    mb: 2,
+    marginBottom: 2,
     transitionProperty: "common",
     transitionDuration: "normal",
     opacity: 1,
@@ -11618,20 +11385,6 @@ var config17 = defineStyleConfig$1({
   }
 });
 var form_label_default = config17;
-
-// src/theme/utils/sr-utils.ts
-var srOnly2 = {
-  border: "0 !important",
-  clip: "rect(1px, 1px, 1px, 1px) !important",
-  clipPath: "inset(50%) !important",
-  height: "1px !important",
-  margin: "-1px !important",
-  overflow: "hidden !important",
-  padding: "0 !important",
-  position: "absolute !important",
-  width: "1px !important",
-  whiteSpace: "nowrap !important"
-};
 function baseBorder(state2, props) {
   switch (state2) {
     case "hover":
@@ -11706,6 +11459,20 @@ function floatingBorder(state2, props) {
   }
 }
 
+// src/theme/utils/sr-utils.ts
+var srOnly2 = {
+  border: "0 !important",
+  clip: "rect(1px, 1px, 1px, 1px) !important",
+  clipPath: "inset(50%) !important",
+  height: "1px !important",
+  margin: "-1px !important",
+  overflow: "hidden !important",
+  padding: "0 !important",
+  position: "absolute !important",
+  width: "1px !important",
+  whiteSpace: "nowrap !important"
+};
+
 // src/theme/components/info-select.ts
 var parts6 = anatomy("InfoSelect").parts(
   "container",
@@ -11735,15 +11502,7 @@ var config18 = helpers10.defineMultiStyleConfig({
       _hover: {
         ...baseBorder("hover", props)
       },
-      ...focusVisible({
-        focus: {
-          ...baseBorder("focus", props),
-          outline: "none"
-        },
-        notFocus: {
-          ...baseBorder("default", props)
-        }
-      }),
+      ...focusVisibleStyles(props),
       _disabled: {
         color: "whiteAlpha.400",
         ...baseBackground("disabled", props),
@@ -11751,31 +11510,19 @@ var config18 = helpers10.defineMultiStyleConfig({
         _focus: { ...baseBorder("disabled", props) }
       },
       _active: {
-        ...baseBackground("active", props),
-        ...baseBorder("focus", props)
-      },
-      _expanded: {
-        ...baseBorder("focus", props)
+        ...baseBackground("active", props)
       },
       _invalid: {
         ...baseBorder("invalid", props),
         _hover: {
           ...baseBorder("hover", props)
-        },
-        ...focusVisible({
-          focus: {
-            ...baseBorder("focus", props)
-          },
-          notFocus: {
-            ...baseBorder("invalid", props)
-          }
-        })
+        }
       }
     },
     arrowIcon: {}
   }),
   variants: {
-    base: (props) => ({}),
+    base: () => ({}),
     floating: (props) => ({
       button: {
         ...floatingBackground("default", props),
@@ -11784,15 +11531,6 @@ var config18 = helpers10.defineMultiStyleConfig({
           ...floatingBorder("hover", props),
           ...floatingBackground("hover", props)
         },
-        ...focusVisible({
-          focus: {
-            ...floatingBorder("focus", props),
-            outline: "none"
-          },
-          notFocus: {
-            ...floatingBorder("default", props)
-          }
-        }),
         _active: {
           ...floatingBorder("active", props),
           ...floatingBackground("active", props)
@@ -11836,20 +11574,7 @@ var config19 = helpers11.defineMultiStyleConfig({
             baseShadow: "sm"
           })
         },
-        ...focusVisible({
-          focus: {
-            outline: "none",
-            borderColor: "transparent",
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: "darkGrey"
-            })
-          },
-          notFocus: {
-            boxShadow: "none",
-            borderColor: getDeviationBorderColor(props)
-          }
-        }),
+        ...focusVisibleStyles(props),
         _active: {
           opacity: 0.5,
           boxShadow: "none"
@@ -12137,7 +11862,7 @@ var config21 = helpers13.defineMultiStyleConfig({
       transitionProperty: "common",
       transitionDuration: "fast",
       position: "relative",
-      px: 3,
+      paddingX: 3,
       height: "54px",
       fontSize: "mobile.md",
       boxShadow: getBoxShadowString({
@@ -12155,19 +11880,10 @@ var config21 = helpers13.defineMultiStyleConfig({
           borderWidth: 2
         })
       },
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          })
-        },
-        notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props)
-          })
-        }
-      }),
+      _focusVisible: {
+        ...focusVisibleStyles(props)._focusVisible,
+        outlineOffset: -2
+      },
       _disabled: {
         backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
@@ -12185,21 +11901,7 @@ var config21 = helpers13.defineMultiStyleConfig({
             borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2
           })
-        },
-        ...focusVisible({
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("greenHaze", "azure")(props),
-              borderWidth: 2
-            })
-          },
-          notFocus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2
-            })
-          }
-        })
+        }
       },
       " + label": {
         fontSize: ["mobile.sm", "desktop.sm"],
@@ -12207,13 +11909,13 @@ var config21 = helpers13.defineMultiStyleConfig({
         left: props.paddingLeft || props.pl || 3,
         zIndex: 2,
         position: "absolute",
-        my: 2,
+        marginY: 2,
         transition: ".1s ease-out",
         transformOrigin: "top left",
         cursor: "text"
       },
       "&:not(:placeholder-shown)": {
-        pt: "16px",
+        paddingTop: "16px",
         "& + label": {
           transform: "scale(0.825) translateY(-10px)"
         }
@@ -12351,7 +12053,7 @@ var config22 = helpers14.defineMultiStyleConfig({
 });
 var line_icon_default = config22;
 var config23 = defineStyleConfig$1({
-  baseStyle: {
+  baseStyle: (props) => ({
     transitionProperty: "common",
     transitionDuration: "fast",
     transitionTimingFunction: "ease-out",
@@ -12372,6 +12074,7 @@ var config23 = defineStyleConfig$1({
       outline: "none",
       borderRadius: "xs"
     },
+    ...focusVisibleStyles(props),
     svg: {
       display: "inline-block",
       width: "1.125em",
@@ -12379,25 +12082,10 @@ var config23 = defineStyleConfig$1({
       position: "relative",
       bottom: "-0.2em"
     }
-  },
+  }),
   variants: {
     primary: (props) => ({
       color: mode("pine", "coralGreen")(props),
-      ...focusVisible({
-        focus: {
-          backgroundColor: mode("pine", "white")(props),
-          color: mode("white", "pine")(props),
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            isInset: false
-          })
-        },
-        notFocus: {
-          color: "pine",
-          backgroundColor: "transparent",
-          boxShadow: "none"
-        }
-      }),
       _hover: {
         color: mode("darkTeal", "white")(props),
         backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
@@ -12409,16 +12097,6 @@ var config23 = defineStyleConfig$1({
     }),
     secondary: (props) => ({
       color: mode("darkGrey", "white")(props),
-      ...focusVisible({
-        focus: {
-          backgroundColor: mode("darkGrey", "white")(props),
-          color: mode("white", "darkTeal")(props)
-        },
-        notFocus: {
-          boxShadow: "none",
-          backgroundColor: "transparent"
-        }
-      }),
       _hover: {
         backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
         color: mode("darkGrey", "white")(props)
@@ -12487,12 +12165,10 @@ var config24 = helpers15.defineMultiStyleConfig({
       _active: {
         ...ghostBackground("active", props)
       },
-      _focus: {
-        ...ghostBackground("focus", props)
-      },
       _hover: {
         ...ghostBackground("hover", props)
       },
+      ...focusVisibleStyles(props),
       _selected: {
         ...ghostBackground("selected", props)
       }
@@ -12511,7 +12187,7 @@ var listbox_default = config24;
 var parts11 = anatomy$1("media-controller-button").parts("container", "icon");
 var helpers16 = createMultiStyleConfigHelpers$1(parts11.keys);
 var config25 = helpers16.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       fontSize: 30,
       transitionProperty: "common",
@@ -12524,7 +12200,8 @@ var config25 = helpers16.defineMultiStyleConfig({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "primaryGreen"
+      color: "primaryGreen",
+      ...focusVisibleStyles(props)
     },
     icon: {
       flex: "0 0 auto",
@@ -12532,7 +12209,7 @@ var config25 = helpers16.defineMultiStyleConfig({
       width: "1em",
       height: "1em"
     }
-  },
+  }),
   variants: {
     play: {
       container: {
@@ -12543,34 +12220,6 @@ var config25 = helpers16.defineMultiStyleConfig({
         _active: {
           color: "greenHaze"
         },
-        ...focusVisible({
-          focus: {
-            position: "relative",
-            outline: "none",
-            _after: {
-              content: '""',
-              display: "block",
-              zIndex: 2,
-              margin: 0.5,
-              borderRadius: "round",
-              borderWidth: 2,
-              borderColor: "white",
-              borderStyle: "solid",
-              pointerEvents: "none",
-              position: "absolute",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-              outline: "none"
-            }
-          },
-          notFocus: {
-            _after: {
-              display: "none"
-            }
-          }
-        }),
         _disabled: {
           color: "silver",
           _hover: {
@@ -12584,18 +12233,6 @@ var config25 = helpers16.defineMultiStyleConfig({
     },
     jumpSkip: {
       container: {
-        ...focusVisible({
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2
-            }),
-            outline: "none"
-          },
-          notFocus: {
-            boxShadow: "none"
-          }
-        }),
         _hover: {
           backgroundColor: "seaMist"
         },
@@ -12657,9 +12294,9 @@ var config26 = helpers17.defineMultiStyleConfig({
       boxShadow: "md"
     },
     header: {
-      px: 5,
-      pt: 6,
-      pb: 2,
+      paddingX: 5,
+      paddingTop: 6,
+      paddingBottom: 2,
       fontWeight: "bold",
       fontFamily: "body"
     },
@@ -12670,14 +12307,14 @@ var config26 = helpers17.defineMultiStyleConfig({
       insetEnd: 3
     },
     body: {
-      px: 5,
-      pb: 6,
+      paddingX: 5,
+      paddingBottom: 6,
       flex: 1,
       overflow: props.scrollBehavior === "inside" ? "auto" : void 0
     },
     footer: {
-      px: 3,
-      pb: 3
+      paddingX: 3,
+      paddingBottom: 3
     }
   }),
   sizes: {
@@ -12731,7 +12368,7 @@ var config27 = helpers18.defineMultiStyleConfig({
       [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
       color: "white",
       borderRadius: "sm",
-      p: 1.5,
+      padding: 1.5,
       zIndex: "inherit",
       maxWidth: "20em",
       _focus: {
@@ -12748,14 +12385,7 @@ var config27 = helpers18.defineMultiStyleConfig({
       position: "absolute",
       color: "white",
       hover: "whiteAlpha.100",
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({ borderColor: "azure" })
-        },
-        notFocus: {
-          boxShadow: "none"
-        }
-      }),
+      ...focusVisibleStyles(props),
       _active: {
         backgroundColor: "whiteAlpha.200"
       },
@@ -12770,14 +12400,14 @@ var config27 = helpers18.defineMultiStyleConfig({
   sizes: {
     sm: {
       content: {
-        px: 1.5,
-        py: 1
+        paddingX: 1.5,
+        paddingY: 1
       }
     },
     lg: {
       content: {
-        px: 3,
-        py: 2
+        paddingX: 3,
+        paddingY: 2
       }
     }
   }
@@ -12809,13 +12439,10 @@ var config28 = helpers19.defineMultiStyleConfig({
         }
       },
       circle: {
-        fill: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        fill: mode("blackAlpha.200", "whiteAlpha.200")(props)
       }
     }
   }),
-  variants: {
-    base: (props) => ({})
-  },
   defaultProps: {
     variant: "base"
   }
@@ -12823,7 +12450,7 @@ var config28 = helpers19.defineMultiStyleConfig({
 var progress_indicator_default = config28;
 var helpers20 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
 var config29 = helpers20.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       _hover: {
         "input:enabled + .chakra-radio__control": {
@@ -12846,10 +12473,7 @@ var config29 = helpers20.defineMultiStyleConfig({
       border: "2px solid",
       borderColor: "primaryGreen",
       borderRadius: "50%",
-      _focus: {
-        backgroundColor: "seaMist",
-        borderColor: "azure"
-      },
+      ...focusVisibleStyles(props),
       _disabled: {
         backgroundColor: "lightGrey",
         borderColor: "steel"
@@ -12866,17 +12490,13 @@ var config29 = helpers20.defineMultiStyleConfig({
           borderRadius: "50%",
           background: "currentColor"
         },
-        _focus: {
-          backgroundColor: "white",
-          color: "azure"
-        },
         _disabled: {
           backgroundColor: "lightGrey",
           borderColor: "steel"
         }
       }
     }
-  }
+  })
 });
 var radio_default = config29;
 var parts13 = selectAnatomy.extend("root");
@@ -12893,7 +12513,7 @@ var config30 = helpers21.defineMultiStyleConfig({
         left: 3,
         zIndex: 2,
         position: "absolute",
-        my: 2,
+        marginY: 2,
         transformOrigin: "top left",
         transform: [
           "scale(0.825) translateY(-12px)",
@@ -12969,30 +12589,30 @@ var parts14 = anatomy$1("stepper").parts(
 );
 var helpers22 = createMultiStyleConfigHelpers$1(parts14.keys);
 var config32 = helpers22.defineMultiStyleConfig({
-  baseStyle: (props) => ({
+  baseStyle: {
     root: {
       display: "flex",
       alignItems: "center",
-      justifyContent: ["space-between", "center"],
-      minHeight: ["48px", "60px"],
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["48px", null, "60px"],
       overflowX: "auto",
       width: "100%"
     },
     container: {
-      px: [2, 2, 0],
+      paddingX: [2, null, null, 0],
       maxWidth: "container.lg",
-      mx: "auto",
+      marginX: "auto",
       width: "100%"
     },
     innerContainer: {
       overflow: "hidden",
-      display: ["flex", "none"],
+      display: ["flex", null, "none"],
       alignItems: "center",
       justifyContent: "space-between"
     },
     backButton: {
       borderRadius: "xs",
-      px: 0,
+      paddingX: 0,
       width: "auto",
       minWidth: "auto"
     },
@@ -13002,7 +12622,7 @@ var config32 = helpers22.defineMultiStyleConfig({
       WebkitLineClamp: 2,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
-      ml: 2,
+      marginLeft: 2,
       textAlign: "right"
     },
     stepContainer: {
@@ -13013,9 +12633,9 @@ var config32 = helpers22.defineMultiStyleConfig({
       textStyle: "sm",
       whiteSpace: "nowrap"
     }
-  }),
+  },
   variants: {
-    base: (props) => ({
+    base: () => ({
       root: {
         backgroundColor: "transparent"
       }
@@ -13076,37 +12696,7 @@ var config33 = helpers23.defineMultiStyleConfig({
             borderColor: colors.whiteAlpha[400]
           })
         )({ colorMode }),
-        ...focusVisible({
-          focus: {
-            boxShadow: mode(
-              getBoxShadowString([
-                {
-                  borderColor: "white",
-                  borderWidth: 2,
-                  isInset: false
-                },
-                {
-                  borderColor: "primaryGreen",
-                  borderWidth: 4,
-                  isInset: false
-                }
-              ]),
-              getBoxShadowString({
-                borderColor: "coralGreen",
-                borderWidth: 2,
-                isInset: false
-              })
-            )({ colorMode })
-          },
-          notFocus: {
-            boxShadow: mode(
-              "none",
-              getBoxShadowString({
-                borderColor: colors.whiteAlpha[400]
-              })
-            )({ colorMode })
-          }
-        }),
+        ...focusVisibleStyles({ colorMode }),
         _hover: {
           backgroundColor: "steel",
           boxShadow: mode(
@@ -13116,35 +12706,6 @@ var config33 = helpers23.defineMultiStyleConfig({
         },
         _checked: {
           backgroundColor: mode("darkTeal", "celadon")({ colorMode }),
-          ...focusVisible({
-            focus: {
-              boxShadow: mode(
-                getBoxShadowString([
-                  {
-                    borderColor: "white",
-                    borderWidth: 2,
-                    isInset: false
-                  },
-                  {
-                    borderColor: "primaryGreen",
-                    borderWidth: 4,
-                    isInset: false
-                  }
-                ]),
-                getBoxShadowString({
-                  borderWidth: 2,
-                  borderColor: "coralGreen",
-                  isInset: false
-                })
-              )({ colorMode })
-            },
-            notFocus: {
-              boxShadow: mode(
-                "none",
-                getBoxShadowString({ borderColor: colors.white })
-              )({ colorMode })
-            }
-          }),
           _hover: {
             backgroundColor: mode("pine", "river")({ colorMode }),
             boxShadow: mode(
@@ -13181,10 +12742,6 @@ var config33 = helpers23.defineMultiStyleConfig({
         boxShadow: getBoxShadowString({
           borderColor: colors.blackAlpha["400"]
         }),
-        _focus: {
-          backgroundColor: "platinum",
-          boxShadow: `0 0 0 2px ${colors.greenHaze}`
-        },
         _hover: {
           backgroundColor: "white"
         },
@@ -13192,10 +12749,6 @@ var config33 = helpers23.defineMultiStyleConfig({
           backgroundColor: "white",
           _hover: {
             backgroundColor: "mint"
-          },
-          _focus: {
-            backgroundColor: "white",
-            boxShadow: `0 0 0 4px ${colors.greenHaze}, 0 0 0 2px ${colors.white}`
           }
         }
       },
@@ -13215,7 +12768,7 @@ var config33 = helpers23.defineMultiStyleConfig({
       },
       track: {
         borderRadius: "24px",
-        p: "2px"
+        padding: "2px"
       }
     },
     md: {
@@ -13225,7 +12778,7 @@ var config33 = helpers23.defineMultiStyleConfig({
       },
       track: {
         borderRadius: "30px",
-        p: "3px"
+        padding: "3px"
       }
     },
     lg: {
@@ -13235,7 +12788,7 @@ var config33 = helpers23.defineMultiStyleConfig({
       },
       track: {
         borderRadius: "36px",
-        p: "3px"
+        padding: "3px"
       }
     }
   },
@@ -13345,16 +12898,16 @@ var config34 = helpers24.defineMultiStyleConfig({
         fontSize: ["mobile.xs", "desktop.xs"]
       },
       th: {
-        px: 3,
-        py: 1.5
+        paddingX: 3,
+        paddingY: 1.5
       },
       td: {
-        px: 3,
-        py: 1.5
+        paddingX: 3,
+        paddingY: 1.5
       },
       caption: {
-        px: 3,
-        py: 1.5
+        paddingX: 3,
+        paddingY: 1.5
       }
     },
     md: {
@@ -13362,16 +12915,16 @@ var config34 = helpers24.defineMultiStyleConfig({
         fontSize: ["mobile.sm", "desktop.sm"]
       },
       th: {
-        px: 3,
-        py: 1.5
+        paddingX: 3,
+        paddingY: 1.5
       },
       td: {
-        px: 3,
-        py: 1.5
+        paddingX: 3,
+        paddingY: 1.5
       },
       caption: {
-        px: 3,
-        py: 1.5
+        paddingX: 3,
+        paddingY: 1.5
       }
     },
     lg: {
@@ -13379,16 +12932,16 @@ var config34 = helpers24.defineMultiStyleConfig({
         fontSize: ["mobile.sm", "desktop.sm"]
       },
       th: {
-        px: 3,
-        py: "15px"
+        paddingX: 3,
+        paddingY: "15px"
       },
       td: {
-        px: 3,
-        py: "15px"
+        paddingX: 3,
+        paddingY: "15px"
       },
       caption: {
-        px: 3,
-        py: "15px"
+        paddingX: 3,
+        paddingY: "15px"
       }
     }
   },
@@ -13428,11 +12981,7 @@ var config35 = helpers25.defineMultiStyleConfig({
         pointerEvents: "none",
         ...getTabColorSchemeSelectedProps(props)
       },
-      _focus: getTabColorSchemeFocusProps(props),
-      ":focus:not(:focus-visible)": {
-        boxShadow: "none"
-      },
-      _focusVisible: getTabColorSchemeFocusProps(props),
+      ...focusVisibleStyles(props),
       _hover: getTabColorSchemeHoverProps(props),
       _active: getTabColorSchemeActiveProps(props),
       _disabled: getTabColorSchemeDisabledProps(props)
@@ -13461,40 +13010,40 @@ var config35 = helpers25.defineMultiStyleConfig({
     sm: {
       tablist: {
         height: "30px",
-        p: "2px"
+        padding: "2px"
       },
       tab: {
-        px: 2,
-        py: 0
+        paddingX: 2,
+        paddingY: 0
       }
     },
     md: {
       tablist: {
         height: "36px",
-        p: 0.5
+        padding: 0.5
       },
       tab: {
-        px: 2
+        paddingX: 2
       }
     },
     lg: {
       tablist: {
         height: "42px",
-        p: 0.5
+        padding: 0.5
       },
       tab: {
         fontWeight: "bold",
-        px: 2
+        paddingX: 2
       }
     },
     xl: {
       tablist: {
         height: "54px",
-        p: "4px"
+        padding: "4px"
       },
       tab: {
         fontWeight: "bold",
-        px: 3
+        paddingX: 3
       }
     }
   },
@@ -13599,26 +13148,6 @@ var getTabColorSchemeSelectedProps = (props) => {
       };
   }
 };
-var getTabColorSchemeFocusProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`
-      };
-    case "base":
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`
-      };
-    case "accent":
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`
-      };
-    default:
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
-      };
-  }
-};
 var getTabColorSchemeHoverProps = (props) => {
   switch (props.colorScheme) {
     case "dark":