@vygruppen/spor-react 6.2.3 → 7.0.1

package/dist/index.js

@@ -710,19 +710,19 @@ var init_Button = __esm({
         /* @__PURE__ */ React69__namespace.default.createElement(
           react.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__namespace.default.createElement(react.Flex, { justifyContent: "center", alignItems: "center", gap: 1 }, leftIcon, /* @__PURE__ */ React69__namespace.default.createElement(
+          /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1 }, leftIcon, /* @__PURE__ */ React69__namespace.default.createElement(
             react.Box,
             {
               visibility: isLoading ? "hidden" : "visible",
               whiteSpace: "normal",
-              textAlign: "left"
+              textAlign: "center"
             },
             children
           )),
@@ -3790,9 +3790,6 @@ var init_NumericStepper = __esm({
           size: "xs",
           minWidth: "24px",
           minHeight: "24px",
-          _focusVisible: {
-            boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
-          },
           ...props
         }
       );
@@ -5185,7 +5182,7 @@ var init_Stepper = __esm({
             },
             step
           ))
-        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
+        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
       ));
     };
     texts23 = createTexts({
@@ -11149,15 +11146,16 @@ var init_foundations = __esm({
     init_styles();
   }
 });
-
-// src/theme/utils/focus-utils.ts
-var focusVisible;
-var init_focus_utils = __esm({
-  "src/theme/utils/focus-utils.ts"() {
-    focusVisible = ({ notFocus, focus }) => ({
-      _focus: focus,
-      _focusVisible: focus,
-      "&[data-focus]:not([data-focus-visible])": notFocus
+var focusVisibleStyles;
+var init_focus_util = __esm({
+  "src/theme/utils/focus-util.ts"() {
+    focusVisibleStyles = (props) => ({
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: themeTools.mode("greenHaze", "azure")(props),
+        outlineStyle: "solid",
+        outlineOffset: "1px"
+      }
     });
   }
 });
@@ -11168,7 +11166,7 @@ var init_accordion2 = __esm({
     init_dist3();
     init_foundations();
     init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
     config3 = helpers.defineMultiStyleConfig({
       baseStyle: (props) => ({
@@ -11181,25 +11179,14 @@ var init_accordion2 = __esm({
           transitionDuration: "normal",
           border: "none",
           borderRadius: "sm",
+          borderColor: "osloGrey",
           display: "flex",
           justifyContent: "space-between",
           color: themeTools.mode("darkGrey", "white")(props),
           textAlign: "left",
           fontFamily: "body",
           fontWeight: "bold",
-          ...focusVisible({
-            notFocus: {
-              boxShadow: getBoxShadowString({
-                borderColor: "osloGrey"
-              })
-            },
-            focus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2
-              })
-            }
-          }),
+          ...focusVisibleStyles(props),
           _disabled: {
             opacity: 0.4,
             cursor: "not-allowed"
@@ -11489,14 +11476,12 @@ var init_breadcrumb2 = __esm({
   "src/theme/components/breadcrumb.ts"() {
     init_dist4();
     init_dist3();
-    init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     ({ defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys));
     baseStyleLink2 = defineStyle((props) => ({
       transitionProperty: "common",
       transitionDuration: "fast",
       transitionTimingFunction: "ease-out",
-      outline: "none",
       color: "inherit",
       textDecoration: "none",
       textStyle: "xs",
@@ -11507,17 +11492,7 @@ var init_breadcrumb2 = __esm({
         _hover: {
           backgroundColor: themeTools.mode("seaMist", "pine")(props)
         },
-        ...focusVisible({
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props),
-              borderWidth: 2
-            })
-          },
-          notFocus: {
-            boxShadow: "none"
-          }
-        }),
+        ...focusVisibleStyles(props),
         _active: {
           backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
         }
@@ -11540,12 +11515,14 @@ var init_button2 = __esm({
   "src/theme/components/button.ts"() {
     init_foundations();
     init_box_shadow_utils();
+    init_focus_util();
     config6 = react.defineStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         border: 0,
         borderRadius: "xl",
         display: "flex",
         alignItems: "center",
+        justifyContent: "center",
         transitionProperty: "common",
         transitionDuration: "normal",
         textWrap: "wrap",
@@ -11555,33 +11532,25 @@ var init_button2 = __esm({
           boxShadow: 0,
           outline: 0
         },
+        ...focusVisibleStyles(props),
         _disabled: {
           cursor: "not-allowed",
           boxShadow: "none",
-          backgroundColor: "silver",
-          color: "dimGrey"
+          backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
         },
         _hover: {
           _disabled: {
-            background: "silver"
+            background: themeTools.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: themeTools.mode("pine", "coralGreen")(props),
           color: themeTools.mode("white", "darkTeal")(props),
-          _focusVisible: {
-            boxShadow: `inset 0 0 0 2px ${themeTools.mode(
-              colors.greenHaze,
-              colors.azure
-            )(props)}, inset 0 0 0 4px ${themeTools.mode(
-              colors.white,
-              colors.darkGrey
-            )(props)}`
-          },
           _hover: {
             backgroundColor: themeTools.mode("darkTeal", "blueGreen")(props)
           },
@@ -11597,24 +11566,6 @@ var init_button2 = __esm({
           _hover: {
             backgroundColor: themeTools.mode("coralGreen", "greenHaze")(props)
           },
-          _focusVisible: {
-            boxShadow: `inset 0 0 0 2px ${themeTools.mode(
-              colors.greenHaze,
-              colors.primaryGreen
-            )(props)}, inset 0 0 0 4px ${themeTools.mode(
-              colors.white,
-              colors.darkTeal
-            )(props)}`,
-            _hover: {
-              boxShadow: `inset 0 0 0 2px ${themeTools.mode(
-                colors.greenHaze,
-                colors.azure
-              )(props)}, inset 0 0 0 4px ${themeTools.mode(
-                colors.white,
-                colors.blackAlpha[500]
-              )(props)}`
-            }
-          },
           _active: {
             backgroundColor: themeTools.mode("mint", "darkTeal")(props),
             boxShadow: `inset 0 0 0 2px ${themeTools.mode(
@@ -11642,12 +11593,6 @@ var init_button2 = __esm({
             colors.blackAlpha[400],
             colors.whiteAlpha[400]
           )(props)}`,
-          _focusVisible: {
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: "azure"
-            })
-          },
           _hover: {
             boxShadow: `inset 0 0 0 2px currentColor`
           },
@@ -11662,12 +11607,6 @@ var init_button2 = __esm({
         ghost: (props) => ({
           backgroundColor: "transparent",
           color: themeTools.mode("darkGrey", "white")(props),
-          _focusVisible: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props),
-              borderWidth: 2
-            })
-          },
           _hover: {
             backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props),
             _disabled: {
@@ -11694,20 +11633,6 @@ var init_button2 = __esm({
               baseShadow: "md",
               borderWidth: 2
             })
-          },
-          _focusVisible: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props),
-              borderWidth: 2,
-              baseShadow: "sm"
-            }),
-            _hover: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2,
-                baseShadow: "md"
-              })
-            }
           }
         })
       },
@@ -11754,16 +11679,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:
@@ -11771,8 +11694,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"
         })
       };
   }
@@ -11782,6 +11704,7 @@ var init_card2 = __esm({
   "src/theme/components/card.ts"() {
     init_foundations();
     init_box_shadow_utils();
+    init_focus_util();
     config7 = react.defineStyleConfig({
       baseStyle: (props) => ({
         appearance: "none",
@@ -11796,16 +11719,8 @@ var init_card2 = __esm({
         "button&, a&, label&, &.is-clickable": {
           ...getColorSchemeClickableProps(props),
           _hover: getColorSchemeHoverProps(props),
+          ...focusVisibleStyles(props),
           _active: getColorSchemeActiveProps(props),
-          _focusVisible: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props),
-              borderWidth: 2,
-              isInset: false
-            }),
-            outline: "none",
-            _active: getColorSchemeActiveProps(props)
-          },
           _disabled: {
             backgroundColor: "platinum",
             boxShadow: getBoxShadowString({
@@ -11863,16 +11778,14 @@ var init_card2 = __esm({
             backgroundColor: themeTools.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:
@@ -11880,8 +11793,7 @@ var init_card2 = __esm({
             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
             })
           };
       }
@@ -11896,8 +11808,7 @@ var init_card2 = __esm({
             backgroundColor: themeTools.mode("mint", "teal")(props),
             boxShadow: getBoxShadowString({
               baseShadow,
-              borderColor: colors.silver,
-              isInset: false
+              borderColor: colors.silver
             })
           };
         case "grey":
@@ -11905,8 +11816,7 @@ var init_card2 = __esm({
             backgroundColor: "white",
             boxShadow: getBoxShadowString({
               baseShadow,
-              borderColor: colors.steel,
-              isInset: false
+              borderColor: colors.steel
             })
           };
         default:
@@ -11914,8 +11824,7 @@ var init_card2 = __esm({
             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
             })
           };
       }
@@ -12016,9 +11925,9 @@ var init_card_select = __esm({
   "src/theme/components/card-select.ts"() {
     init_dist4();
     init_dist3();
-    init_box_shadow_utils();
-    init_focus_utils();
     init_background_utils();
+    init_box_shadow_utils();
+    init_focus_util();
     parts2 = anatomy("card-select").parts("trigger", "card");
     helpers3 = createMultiStyleConfigHelpers(parts2.keys);
     config8 = helpers3.defineMultiStyleConfig({
@@ -12027,16 +11936,7 @@ var init_card_select = __esm({
           appearance: "none",
           display: "flex",
           alignItems: "center",
-          ...focusVisible({
-            notFocus: {},
-            focus: {
-              boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
-                borderWidth: 3
-              }),
-              outline: "none"
-            }
-          })
+          ...focusVisibleStyles(props)
         },
         card: {
           borderRadius: "sm",
@@ -12052,20 +11952,10 @@ var init_card_select = __esm({
             boxShadow: getBoxShadowString({
               borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
             }),
-            ...focusVisible({
-              notFocus: { boxShadow: "none" },
-              focus: {
-                boxShadow: getBoxShadowString({
-                  borderColor: "greenHaze",
-                  borderWidth: 3
-                }),
-                outline: "none"
-              }
-            }),
             _hover: {
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("darkGrey", "white")(props),
-                borderWidth: 3
+                borderWidth: 2
               })
             },
             _active: {
@@ -12107,13 +11997,17 @@ var init_card_select = __esm({
         floating: (props) => ({
           trigger: {
             ...floatingBackground("default", props),
-            boxShadow: "sm",
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("silver", "whiteAlpha.400")(props),
+              borderWidth: 1,
+              baseShadow: "sm"
+            }),
             transition: "all .1s ease-out",
             _hover: {
               ...floatingBackground("hover", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("silver", "whiteAlpha.400")(props),
-                borderWidth: 1,
+                borderWidth: 2,
                 baseShadow: "sm"
               })
             },
@@ -12178,9 +12072,10 @@ var helpers4, config9, checkbox_default;
 var init_checkbox = __esm({
   "src/theme/components/checkbox.ts"() {
     init_dist4();
+    init_focus_util();
     helpers4 = react.createMultiStyleConfigHelpers(checkboxAnatomy.keys);
     config9 = helpers4.defineMultiStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         container: {
           _hover: {
             "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
@@ -12222,10 +12117,7 @@ var init_checkbox = __esm({
             backgroundColor: "primaryGreen",
             borderColor: "primaryGreen",
             color: "white",
-            _focus: {
-              backgroundColor: "primaryGreen",
-              borderColor: "azure"
-            },
+            ...focusVisibleStyles(props),
             _disabled: {
               backgroundColor: "lightGrey",
               borderColor: "steel",
@@ -12240,10 +12132,6 @@ var init_checkbox = __esm({
             backgroundColor: "lightGrey",
             borderColor: "steel"
           },
-          _focus: {
-            backgroundColor: "white",
-            borderColor: "azure"
-          },
           _invalid: {
             backgroundColor: "white",
             borderColor: "brightRed"
@@ -12253,7 +12141,7 @@ var init_checkbox = __esm({
           userSelect: "none",
           _disabled: { opacity: 0.4 }
         }
-      }
+      })
     });
     checkbox_default = config9;
   }
@@ -12262,7 +12150,7 @@ var parts3, helpers5, config10, choice_chip_default;
 var init_choice_chip = __esm({
   "src/theme/components/choice-chip.ts"() {
     init_box_shadow_utils();
-    init_foundations();
+    init_focus_util();
     parts3 = themeTools.anatomy("choice-chip").parts("container", "icon", "label");
     helpers5 = react.createMultiStyleConfigHelpers(parts3.keys);
     config10 = helpers5.defineMultiStyleConfig({
@@ -12280,15 +12168,7 @@ var init_choice_chip = __esm({
             background: "pine",
             boxShadow: getBoxShadowString({ borderColor: "celadon" })
           },
-          "input:focus-visible + &": {
-            boxShadow: `inset 0 0 0 2px ${themeTools.mode(
-              colors.greenHaze,
-              colors.azure
-            )(props)}, inset 0 0 0 4px ${themeTools.mode(
-              colors.white,
-              colors.darkGrey
-            )(props)}`
-          },
+          "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
           "@media (hover:hover)": {
             _hover: {
               color: themeTools.mode("darkTeal", "white")(props),
@@ -12351,8 +12231,7 @@ var init_choice_chip = __esm({
 var $size6, config11, close_button_default;
 var init_close_button = __esm({
   "src/theme/components/close-button.ts"() {
-    init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     $size6 = themeTools.cssVar("close-button-size");
     config11 = react.defineStyleConfig({
       baseStyle: (props) => ({
@@ -12364,18 +12243,7 @@ var init_close_button = __esm({
         backgroundColor: "transparent",
         color: themeTools.mode("darkGrey", "white")(props),
         fontWeight: "normal",
-        ...focusVisible({
-          focus: {
-            outline: "none",
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props)
-            }),
-            outlineOffset: "2px"
-          },
-          notFocus: {
-            boxShadow: "none"
-          }
-        }),
+        ...focusVisibleStyles(props),
         _hover: {
           backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
           _disabled: {
@@ -12417,7 +12285,7 @@ var init_code = __esm({
         fontFamily: "monospace",
         fontSize: ["mobile.xs", "desktop.xs"],
         borderRadius: "xs",
-        px: 1
+        paddingX: 1
       },
       variants: variants13,
       defaultProps: defaultProps2
@@ -12430,7 +12298,7 @@ var init_datepicker2 = __esm({
   "src/theme/components/datepicker.ts"() {
     init_foundations();
     init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     parts4 = themeTools.anatomy("datepicker").parts(
       "wrapper",
       "calendarTriggerButton",
@@ -12464,6 +12332,9 @@ var init_datepicker2 = __esm({
           },
           _disabled: {
             pointerEvents: "none"
+          },
+          _focusWithin: {
+            ...focusVisibleStyles(props)._focusVisible
           }
         },
         inputLabel: {
@@ -12480,7 +12351,10 @@ var init_datepicker2 = __esm({
         },
         calendarTriggerButton: {
           backgroundColor: themeTools.mode("white", "night")(props),
-          boxShadow: "none",
+          boxShadow: getBoxShadowString({
+            borderColor: themeTools.mode("darkGrey", "white")(props),
+            borderWidth: 1
+          }),
           width: 8,
           display: "flex",
           alignItems: "center",
@@ -12500,21 +12374,7 @@ var init_datepicker2 = __esm({
           _active: {
             backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
           },
-          ...focusVisible({
-            focus: {
-              outline: "none",
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2
-              })
-            },
-            notFocus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("darkGrey", "white")(props),
-                borderWidth: 1
-              })
-            }
-          }),
+          ...focusVisibleStyles(props),
           _invalid: {
             boxShadow: getBoxShadowString({
               borderColor: "brightRed",
@@ -12554,27 +12414,11 @@ var init_datepicker2 = __esm({
           _hover: {
             backgroundColor: themeTools.mode("seaMist", "pine")(props)
           },
-          ...focusVisible({
-            focus: {
-              outline: "none",
-              boxShadow: getBoxShadowString({
-                borderWidth: 2,
-                borderColor: themeTools.mode("greenHaze", "azure")(props)
-              })
-            },
-            notFocus: {
-              boxShadow: "none",
-              _hover: {
-                boxShadow: getBoxShadowString({
-                  borderWidth: 2,
-                  borderColor: "osloGrey"
-                })
-              },
-              _active: {
-                color: themeTools.mode("darkGrey", "white")(props)
-              }
-            }
-          }),
+          _focusVisible: {
+            outlineColor: "greenHaze",
+            outlineWidth: 2,
+            outlineStyle: "solid"
+          },
           _active: {
             backgroundColor: "seaMist",
             boxShadow: "none",
@@ -12598,14 +12442,7 @@ var init_datepicker2 = __esm({
             boxShadow: getBoxShadowString({
               borderWidth: 1,
               borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
-            }),
-            _focus: {
-              outline: "none",
-              boxShadow: getBoxShadowString({
-                borderWidth: 2,
-                borderColor: themeTools.mode("greenHaze", "azure")(props)
-              })
-            }
+            })
           },
           "&[data-unavailable]": {
             pointerEvents: "none",
@@ -12625,12 +12462,6 @@ var init_datepicker2 = __esm({
                 borderWidth: 2
               })
             },
-            _focusWithin: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2
-              })
-            },
             _invalid: {
               boxShadow: getBoxShadowString({
                 borderColor: "brightRed",
@@ -12684,13 +12515,6 @@ var init_datepicker2 = __esm({
                 baseShadow: "sm"
               })
             },
-            _focusWithin: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2,
-                baseShadow: "sm"
-              })
-            },
             _invalid: {
               boxShadow: getBoxShadowString({
                 borderColor: "brightRed",
@@ -12737,12 +12561,6 @@ var init_datepicker2 = __esm({
                 borderWidth: 2
               })
             },
-            _focusWithin: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2
-              })
-            },
             _invalid: {
               boxShadow: getBoxShadowString({
                 borderColor: "brightRed",
@@ -12869,9 +12687,9 @@ var init_drawer = __esm({
           boxShadow: "md"
         },
         header: {
-          px: 3,
-          pt: 6,
-          pb: 2,
+          paddingX: 3,
+          paddingTop: 6,
+          paddingBottom: 2,
           fontWeight: "bold",
           fontFamily: "body"
         },
@@ -12882,14 +12700,14 @@ var init_drawer = __esm({
           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: {
@@ -12915,8 +12733,7 @@ var init_drawer = __esm({
 var parts5, helpers8, config15, fab_default, getPositionProps;
 var init_fab = __esm({
   "src/theme/components/fab.ts"() {
-    init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     parts5 = themeTools.anatomy("fab").parts("container", "icon", "text");
     helpers8 = react.createMultiStyleConfigHelpers(parts5.keys);
     config15 = helpers8.defineMultiStyleConfig({
@@ -12924,9 +12741,9 @@ var init_fab = __esm({
         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",
@@ -12937,28 +12754,21 @@ var init_fab = __esm({
           position: "fixed",
           ...getPositionProps(props),
           _disabled: {
-            backgroundColor: "whiteAlpha.400",
-            color: "white"
+            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+            color: themeTools.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: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+              color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            }
           },
           zIndex: "sticky"
         },
         icon: {
-          mr: props.isTextVisible ? 1 : 0
+          marginRight: props.isTextVisible ? 1 : 0
         },
         text: {
           display: "flex",
@@ -12976,16 +12786,7 @@ var init_fab = __esm({
             _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: {
@@ -13009,19 +12810,7 @@ var init_fab = __esm({
             _active: { backgroundColor: themeTools.mode("pine", "white")(props) },
             _hover: {
               backgroundColor: themeTools.mode("night", "seaMist")(props)
-            },
-            ...focusVisible({
-              focus: {
-                boxShadow: themeTools.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) => ({
@@ -13039,19 +12828,7 @@ var init_fab = __esm({
                 `inset 0 0 0 2px ${props.theme.colors.white}`
               )(props),
               color: themeTools.mode("darkGrey", "white")(props)
-            },
-            ...focusVisible({
-              focus: {
-                boxShadow: themeTools.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) => ({
@@ -13065,19 +12842,7 @@ var init_fab = __esm({
             _hover: {
               backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props),
               color: themeTools.mode("darkTeal", "white")(props)
-            },
-            ...focusVisible({
-              focus: {
-                boxShadow: themeTools.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"
-              }
-            })
+            }
           }
         })
       },
@@ -13118,7 +12883,7 @@ var init_form = __esm({
           color: themeTools.mode("brightRed", "lightRed")(props)
         },
         helperText: {
-          mt: 2,
+          marginTop: 2,
           color: themeTools.mode("dimGrey", "whiteAlpha.600")(props),
           lineHeight: "normal",
           fontSize: "sm"
@@ -13135,7 +12900,7 @@ var init_form_label = __esm({
       baseStyle: {
         fontSize: "mobile.sm",
         marginEnd: 3,
-        mb: 2,
+        marginBottom: 2,
         transitionProperty: "common",
         transitionDuration: "normal",
         opacity: 1,
@@ -13147,25 +12912,6 @@ var init_form_label = __esm({
     form_label_default = config17;
   }
 });
-
-// src/theme/utils/sr-utils.ts
-var srOnly2;
-var init_sr_utils = __esm({
-  "src/theme/utils/sr-utils.ts"() {
-    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":
@@ -13244,14 +12990,33 @@ var init_border_utils = __esm({
     init_box_shadow_utils();
   }
 });
+
+// src/theme/utils/sr-utils.ts
+var srOnly2;
+var init_sr_utils = __esm({
+  "src/theme/utils/sr-utils.ts"() {
+    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"
+    };
+  }
+});
 var parts6, helpers10, config18, info_select_default;
 var init_info_select = __esm({
   "src/theme/components/info-select.ts"() {
     init_dist4();
-    init_focus_utils();
-    init_sr_utils();
-    init_border_utils();
     init_background_utils();
+    init_border_utils();
+    init_focus_util();
+    init_sr_utils();
     parts6 = anatomy("InfoSelect").parts(
       "container",
       "label",
@@ -13280,15 +13045,7 @@ var init_info_select = __esm({
           _hover: {
             ...baseBorder("hover", props)
           },
-          ...focusVisible({
-            focus: {
-              ...baseBorder("focus", props),
-              outline: "none"
-            },
-            notFocus: {
-              ...baseBorder("default", props)
-            }
-          }),
+          ...focusVisibleStyles(props),
           _disabled: {
             color: "whiteAlpha.400",
             ...baseBackground("disabled", props),
@@ -13296,31 +13053,19 @@ var init_info_select = __esm({
             _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),
@@ -13329,15 +13074,6 @@ var init_info_select = __esm({
               ...floatingBorder("hover", props),
               ...floatingBackground("hover", props)
             },
-            ...focusVisible({
-              focus: {
-                ...floatingBorder("focus", props),
-                outline: "none"
-              },
-              notFocus: {
-                ...floatingBorder("default", props)
-              }
-            }),
             _active: {
               ...floatingBorder("active", props),
               ...floatingBackground("active", props)
@@ -13356,7 +13092,7 @@ var parts7, helpers11, config19, travel_tag_default, getDeviationContainerStyle,
 var init_travel_tag = __esm({
   "src/theme/components/travel-tag.ts"() {
     init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     parts7 = themeTools.anatomy("travel-tag").parts(
       "container",
       "iconContainer",
@@ -13388,20 +13124,7 @@ var init_travel_tag = __esm({
                 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"
@@ -13687,7 +13410,7 @@ var init_input2 = __esm({
   "src/theme/components/input.ts"() {
     init_dist4();
     init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     helpers13 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
     config21 = helpers13.defineMultiStyleConfig({
       baseStyle: (props) => ({
@@ -13701,7 +13424,7 @@ var init_input2 = __esm({
           transitionProperty: "common",
           transitionDuration: "fast",
           position: "relative",
-          px: 3,
+          paddingX: 3,
           height: "54px",
           fontSize: "mobile.md",
           boxShadow: getBoxShadowString({
@@ -13719,19 +13442,10 @@ var init_input2 = __esm({
               borderWidth: 2
             })
           },
-          ...focusVisible({
-            focus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2
-              })
-            },
-            notFocus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("darkGrey", "white")(props)
-              })
-            }
-          }),
+          _focusVisible: {
+            ...focusVisibleStyles(props)._focusVisible,
+            outlineOffset: -2
+          },
           _disabled: {
             backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
             boxShadow: getBoxShadowString({
@@ -13749,21 +13463,7 @@ var init_input2 = __esm({
                 borderColor: themeTools.mode("darkGrey", "white")(props),
                 borderWidth: 2
               })
-            },
-            ...focusVisible({
-              focus: {
-                boxShadow: getBoxShadowString({
-                  borderColor: themeTools.mode("greenHaze", "azure")(props),
-                  borderWidth: 2
-                })
-              },
-              notFocus: {
-                boxShadow: getBoxShadowString({
-                  borderColor: "brightRed",
-                  borderWidth: 2
-                })
-              }
-            })
+            }
           },
           " + label": {
             fontSize: ["mobile.sm", "desktop.sm"],
@@ -13771,13 +13471,13 @@ var init_input2 = __esm({
             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)"
             }
@@ -13924,10 +13624,9 @@ var init_line_icon = __esm({
 var config23, link_default;
 var init_link2 = __esm({
   "src/theme/components/link.ts"() {
-    init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     config23 = react.defineStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         transitionProperty: "common",
         transitionDuration: "fast",
         transitionTimingFunction: "ease-out",
@@ -13948,6 +13647,7 @@ var init_link2 = __esm({
           outline: "none",
           borderRadius: "xs"
         },
+        ...focusVisibleStyles(props),
         svg: {
           display: "inline-block",
           width: "1.125em",
@@ -13955,25 +13655,10 @@ var init_link2 = __esm({
           position: "relative",
           bottom: "-0.2em"
         }
-      },
+      }),
       variants: {
         primary: (props) => ({
           color: themeTools.mode("pine", "coralGreen")(props),
-          ...focusVisible({
-            focus: {
-              backgroundColor: themeTools.mode("pine", "white")(props),
-              color: themeTools.mode("white", "pine")(props),
-              boxShadow: getBoxShadowString({
-                borderWidth: 2,
-                isInset: false
-              })
-            },
-            notFocus: {
-              color: "pine",
-              backgroundColor: "transparent",
-              boxShadow: "none"
-            }
-          }),
           _hover: {
             color: themeTools.mode("darkTeal", "white")(props),
             backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props)
@@ -13985,16 +13670,6 @@ var init_link2 = __esm({
         }),
         secondary: (props) => ({
           color: themeTools.mode("darkGrey", "white")(props),
-          ...focusVisible({
-            focus: {
-              backgroundColor: themeTools.mode("darkGrey", "white")(props),
-              color: themeTools.mode("white", "darkTeal")(props)
-            },
-            notFocus: {
-              boxShadow: "none",
-              backgroundColor: "transparent"
-            }
-          }),
           _hover: {
             backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.200")(props),
             color: themeTools.mode("darkGrey", "white")(props)
@@ -14044,6 +13719,7 @@ var init_listbox = __esm({
     init_dist4();
     init_foundations();
     init_background_utils();
+    init_focus_util();
     parts10 = anatomy("ListBox").parts(
       "container",
       "item",
@@ -14078,12 +13754,10 @@ var init_listbox = __esm({
           _active: {
             ...ghostBackground("active", props)
           },
-          _focus: {
-            ...ghostBackground("focus", props)
-          },
           _hover: {
             ...ghostBackground("hover", props)
           },
+          ...focusVisibleStyles(props),
           _selected: {
             ...ghostBackground("selected", props)
           }
@@ -14104,12 +13778,11 @@ var init_listbox = __esm({
 var parts11, helpers16, config25, media_controller_button_default;
 var init_media_controller_button = __esm({
   "src/theme/components/media-controller-button.ts"() {
-    init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     parts11 = themeTools.anatomy("media-controller-button").parts("container", "icon");
     helpers16 = react.createMultiStyleConfigHelpers(parts11.keys);
     config25 = helpers16.defineMultiStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         container: {
           fontSize: 30,
           transitionProperty: "common",
@@ -14122,7 +13795,8 @@ var init_media_controller_button = __esm({
           display: "flex",
           padding: 1,
           alignSelf: "center",
-          color: "primaryGreen"
+          color: "primaryGreen",
+          ...focusVisibleStyles(props)
         },
         icon: {
           flex: "0 0 auto",
@@ -14130,7 +13804,7 @@ var init_media_controller_button = __esm({
           width: "1em",
           height: "1em"
         }
-      },
+      }),
       variants: {
         play: {
           container: {
@@ -14141,34 +13815,6 @@ var init_media_controller_button = __esm({
             _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: {
@@ -14182,18 +13828,6 @@ var init_media_controller_button = __esm({
         },
         jumpSkip: {
           container: {
-            ...focusVisible({
-              focus: {
-                boxShadow: getBoxShadowString({
-                  borderColor: "greenHaze",
-                  borderWidth: 2
-                }),
-                outline: "none"
-              },
-              notFocus: {
-                boxShadow: "none"
-              }
-            }),
             _hover: {
               backgroundColor: "seaMist"
             },
@@ -14278,9 +13912,9 @@ var init_modal2 = __esm({
           boxShadow: "md"
         },
         header: {
-          px: 5,
-          pt: 6,
-          pb: 2,
+          paddingX: 5,
+          paddingTop: 6,
+          paddingBottom: 2,
           fontWeight: "bold",
           fontFamily: "body"
         },
@@ -14291,14 +13925,14 @@ var init_modal2 = __esm({
           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: {
@@ -14325,8 +13959,7 @@ var $popperBg2, $arrowBg3, $arrowShadowColor2, helpers18, config27, popover_defa
 var init_popover2 = __esm({
   "src/theme/components/popover.ts"() {
     init_dist4();
-    init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     $popperBg2 = themeTools.cssVar("popper-bg");
     $arrowBg3 = themeTools.cssVar("popper-arrow-bg");
     $arrowShadowColor2 = themeTools.cssVar("popper-arrow-shadow-color");
@@ -14343,7 +13976,7 @@ var init_popover2 = __esm({
           [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
           color: "white",
           borderRadius: "sm",
-          p: 1.5,
+          padding: 1.5,
           zIndex: "inherit",
           maxWidth: "20em",
           _focus: {
@@ -14360,14 +13993,7 @@ var init_popover2 = __esm({
           position: "absolute",
           color: "white",
           hover: "whiteAlpha.100",
-          ...focusVisible({
-            focus: {
-              boxShadow: getBoxShadowString({ borderColor: "azure" })
-            },
-            notFocus: {
-              boxShadow: "none"
-            }
-          }),
+          ...focusVisibleStyles(props),
           _active: {
             backgroundColor: "whiteAlpha.200"
           },
@@ -14382,14 +14008,14 @@ var init_popover2 = __esm({
       sizes: {
         sm: {
           content: {
-            px: 1.5,
-            py: 1
+            paddingX: 1.5,
+            paddingY: 1
           }
         },
         lg: {
           content: {
-            px: 3,
-            py: 2
+            paddingX: 3,
+            paddingY: 2
           }
         }
       }
@@ -14426,13 +14052,10 @@ var init_progress_indicator2 = __esm({
             }
           },
           circle: {
-            fill: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            fill: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
           }
         }
       }),
-      variants: {
-        base: (props) => ({})
-      },
       defaultProps: {
         variant: "base"
       }
@@ -14444,9 +14067,10 @@ var helpers20, config29, radio_default;
 var init_radio = __esm({
   "src/theme/components/radio.ts"() {
     init_dist4();
+    init_focus_util();
     helpers20 = react.createMultiStyleConfigHelpers(radioAnatomy.keys);
     config29 = helpers20.defineMultiStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         container: {
           _hover: {
             "input:enabled + .chakra-radio__control": {
@@ -14469,10 +14093,7 @@ var init_radio = __esm({
           border: "2px solid",
           borderColor: "primaryGreen",
           borderRadius: "50%",
-          _focus: {
-            backgroundColor: "seaMist",
-            borderColor: "azure"
-          },
+          ...focusVisibleStyles(props),
           _disabled: {
             backgroundColor: "lightGrey",
             borderColor: "steel"
@@ -14489,17 +14110,13 @@ var init_radio = __esm({
               borderRadius: "50%",
               background: "currentColor"
             },
-            _focus: {
-              backgroundColor: "white",
-              color: "azure"
-            },
             _disabled: {
               backgroundColor: "lightGrey",
               borderColor: "steel"
             }
           }
         }
-      }
+      })
     });
     radio_default = config29;
   }
@@ -14523,7 +14140,7 @@ var init_select = __esm({
             left: 3,
             zIndex: 2,
             position: "absolute",
-            my: 2,
+            marginY: 2,
             transformOrigin: "top left",
             transform: [
               "scale(0.825) translateY(-12px)",
@@ -14623,30 +14240,30 @@ var init_stepper2 = __esm({
     );
     helpers22 = react.createMultiStyleConfigHelpers(parts14.keys);
     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"
         },
@@ -14656,7 +14273,7 @@ var init_stepper2 = __esm({
           WebkitLineClamp: 2,
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
-          ml: 2,
+          marginLeft: 2,
           textAlign: "right"
         },
         stepContainer: {
@@ -14667,9 +14284,9 @@ var init_stepper2 = __esm({
           textStyle: "sm",
           whiteSpace: "nowrap"
         }
-      }),
+      },
       variants: {
-        base: (props) => ({
+        base: () => ({
           root: {
             backgroundColor: "transparent"
           }
@@ -14693,7 +14310,7 @@ var init_switch = __esm({
     init_dist4();
     init_foundations();
     init_box_shadow_utils();
-    init_focus_utils();
+    init_focus_util();
     $width2 = themeTools.cssVar("switch-track-width");
     $height3 = themeTools.cssVar("switch-track-height");
     $diff2 = themeTools.cssVar("switch-track-diff");
@@ -14739,37 +14356,7 @@ var init_switch = __esm({
                 borderColor: colors.whiteAlpha[400]
               })
             )({ colorMode }),
-            ...focusVisible({
-              focus: {
-                boxShadow: themeTools.mode(
-                  getBoxShadowString([
-                    {
-                      borderColor: "white",
-                      borderWidth: 2,
-                      isInset: false
-                    },
-                    {
-                      borderColor: "primaryGreen",
-                      borderWidth: 4,
-                      isInset: false
-                    }
-                  ]),
-                  getBoxShadowString({
-                    borderColor: "coralGreen",
-                    borderWidth: 2,
-                    isInset: false
-                  })
-                )({ colorMode })
-              },
-              notFocus: {
-                boxShadow: themeTools.mode(
-                  "none",
-                  getBoxShadowString({
-                    borderColor: colors.whiteAlpha[400]
-                  })
-                )({ colorMode })
-              }
-            }),
+            ...focusVisibleStyles({ colorMode }),
             _hover: {
               backgroundColor: "steel",
               boxShadow: themeTools.mode(
@@ -14779,35 +14366,6 @@ var init_switch = __esm({
             },
             _checked: {
               backgroundColor: themeTools.mode("darkTeal", "celadon")({ colorMode }),
-              ...focusVisible({
-                focus: {
-                  boxShadow: themeTools.mode(
-                    getBoxShadowString([
-                      {
-                        borderColor: "white",
-                        borderWidth: 2,
-                        isInset: false
-                      },
-                      {
-                        borderColor: "primaryGreen",
-                        borderWidth: 4,
-                        isInset: false
-                      }
-                    ]),
-                    getBoxShadowString({
-                      borderWidth: 2,
-                      borderColor: "coralGreen",
-                      isInset: false
-                    })
-                  )({ colorMode })
-                },
-                notFocus: {
-                  boxShadow: themeTools.mode(
-                    "none",
-                    getBoxShadowString({ borderColor: colors.white })
-                  )({ colorMode })
-                }
-              }),
               _hover: {
                 backgroundColor: themeTools.mode("pine", "river")({ colorMode }),
                 boxShadow: themeTools.mode(
@@ -14844,10 +14402,6 @@ var init_switch = __esm({
             boxShadow: getBoxShadowString({
               borderColor: colors.blackAlpha["400"]
             }),
-            _focus: {
-              backgroundColor: "platinum",
-              boxShadow: `0 0 0 2px ${colors.greenHaze}`
-            },
             _hover: {
               backgroundColor: "white"
             },
@@ -14855,10 +14409,6 @@ var init_switch = __esm({
               backgroundColor: "white",
               _hover: {
                 backgroundColor: "mint"
-              },
-              _focus: {
-                backgroundColor: "white",
-                boxShadow: `0 0 0 4px ${colors.greenHaze}, 0 0 0 2px ${colors.white}`
               }
             }
           },
@@ -14878,7 +14428,7 @@ var init_switch = __esm({
           },
           track: {
             borderRadius: "24px",
-            p: "2px"
+            padding: "2px"
           }
         },
         md: {
@@ -14888,7 +14438,7 @@ var init_switch = __esm({
           },
           track: {
             borderRadius: "30px",
-            p: "3px"
+            padding: "3px"
           }
         },
         lg: {
@@ -14898,7 +14448,7 @@ var init_switch = __esm({
           },
           track: {
             borderRadius: "36px",
-            p: "3px"
+            padding: "3px"
           }
         }
       },
@@ -15015,16 +14565,16 @@ var init_table2 = __esm({
             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: {
@@ -15032,16 +14582,16 @@ var init_table2 = __esm({
             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: {
@@ -15049,16 +14599,16 @@ var init_table2 = __esm({
             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"
           }
         }
       },
@@ -15071,10 +14621,11 @@ var init_table2 = __esm({
     table_default = config34;
   }
 });
-var helpers25, config35, tabs_default, getTabColorSchemeProps, getTabColorSchemeSelectedProps, getTabColorSchemeFocusProps, getTabColorSchemeHoverProps, getTabColorSchemeActiveProps, getTabColorSchemeDisabledProps, getTablistColorSchemeProps;
+var helpers25, config35, tabs_default, getTabColorSchemeProps, getTabColorSchemeSelectedProps, getTabColorSchemeHoverProps, getTabColorSchemeActiveProps, getTabColorSchemeDisabledProps, getTablistColorSchemeProps;
 var init_tabs = __esm({
   "src/theme/components/tabs.ts"() {
     init_dist4();
+    init_focus_util();
     helpers25 = react.createMultiStyleConfigHelpers(tabsAnatomy.keys);
     config35 = helpers25.defineMultiStyleConfig({
       baseStyle: (props) => ({
@@ -15104,11 +14655,7 @@ var init_tabs = __esm({
             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)
@@ -15137,40 +14684,40 @@ var init_tabs = __esm({
         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
           }
         }
       },
@@ -15275,26 +14822,6 @@ var init_tabs = __esm({
           };
       }
     };
-    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}`
-          };
-      }
-    };
     getTabColorSchemeHoverProps = (props) => {
       switch (props.colorScheme) {
         case "dark":