@vygruppen/spor-react 9.8.3 → 9.10.0

package/dist/{chunk-ZDOSE4VD.mjs → chunk-WZYWSOJB.mjs}

@@ -1,7 +1,7 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Card, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, useMultiStyleConfig, Box, chakra, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React73 from 'react';
 import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -778,39 +778,34 @@ var Stack = forwardRef(
     return /* @__PURE__ */ React73__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
   }
 );
-
-// ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
-var dataAttr = (condition) => condition ? "" : void 0;
 var RadioCard = forwardRef(
-  ({ children, variant = "base", ...props }, ref) => {
-    const { getInputProps, getRadioProps, getRootProps, state: state2 } = useRadio(props);
-    const styles3 = useStyleConfig("RadioCard", { variant });
-    const input = getInputProps({}, ref);
-    const radio = getRadioProps();
+  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
+    const styles3 = useMultiStyleConfig("RadioCard", { variant });
     const id = `radio-card-${useId()}`;
-    return /* @__PURE__ */ React73__default.createElement(
-      chakra.label,
+    const handleChange = (event) => {
+      onChange && onChange(event);
+    };
+    return /* @__PURE__ */ React73__default.createElement(Box, { as: "label", htmlFor: id, "aria-label": String(children), ref }, /* @__PURE__ */ React73__default.createElement(
+      chakra.input,
       {
-        htmlFor: id,
-        ...getRootProps(),
-        "aria-label": String(children)
+        type: "radio",
+        id,
+        checked: isChecked,
+        onChange: handleChange,
+        ...props,
+        sx: styles3.radioInput
+      }
+    ), /* @__PURE__ */ React73__default.createElement(
+      Box,
+      {
+        ...props,
+        __css: {
+          ...styles3.container,
+          ...isChecked && styles3.checked
+        }
       },
-      /* @__PURE__ */ React73__default.createElement(chakra.input, { ...input, id, disabled: state2.isDisabled }),
-      /* @__PURE__ */ React73__default.createElement(
-        chakra.div,
-        {
-          __css: styles3,
-          ...radio,
-          "data-checked": dataAttr(state2.isChecked),
-          "data-hover": dataAttr(state2.isHovered),
-          "data-focus": dataAttr(state2.isFocused),
-          "data-active": dataAttr(state2.isActive),
-          "data-disabled": dataAttr(state2.isDisabled),
-          ...props
-        },
-        children
-      )
-    );
+      children
+    ));
   }
 );
 var RadioCardGroup = ({
@@ -828,14 +823,18 @@ var RadioCardGroup = ({
     onChange,
     ...props
   });
-  const group = getRootProps();
-  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...group }, recursiveMap(children, (child) => {
+  const rootProps = getRootProps();
+  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...rootProps }, recursiveMap(children, (child) => {
     if (child.type === RadioCard) {
-      const radio = getRadioProps({ value: child.props.value });
+      const radioProps = getRadioProps({ value: child.props.value });
       const variantValue = variant;
       return React73__default.cloneElement(
         child,
-        { ...radio, variant: variantValue, ...props }
+        {
+          ...radioProps,
+          variant: variantValue,
+          ...props
+        }
       );
     }
     return child;
@@ -859,11 +858,11 @@ var StaticCard = forwardRef(
     const styles3 = useStyleConfig("StaticCard", {
       colorScheme
     });
-    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__default.createElement(Card, null));
+    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
 var PressableCard = forwardRef(
-  ({ children, variant = "base", ...props }, ref) => {
+  ({ children, variant = "floating", ...props }, ref) => {
     const styles3 = useStyleConfig("PressableCard", {
       variant
     });
@@ -1546,6 +1545,7 @@ var BaseAlert = ({
 // src/alert/ClosableAlert.tsx
 var ClosableAlert = ({
   variant,
+  title,
   children,
   onClose: externalOnClose = () => {
   }
@@ -1570,7 +1570,7 @@ var ClosableAlert = ({
       "aria-label": t2(texts6.close),
       sx: styles3.closeButton
     }
-  ), /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant }), children);
+  ), /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React73__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__default.createElement(Box, { marginRight: 1 }, children)));
 };
 var texts6 = createTexts({
   close: {
@@ -1616,16 +1616,21 @@ var ExpandableAlert = ({
             overflow: "hidden",
             "-webkit-line-clamp": "1",
             "-webkit-box-orient": "vertical"
-          }
+          },
+          color: "darkGrey"
         },
         title
       )),
-      /* @__PURE__ */ React73__default.createElement(AccordionIcon, null)
+      /* @__PURE__ */ React73__default.createElement(AccordionIcon, { color: "darkGrey" })
     )), /* @__PURE__ */ React73__default.createElement(AccordionPanel, null, children))
   ));
 };
-var StaticAlert = ({ children, ...props }) => {
-  return /* @__PURE__ */ React73__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant: props.variant }), children);
+var StaticAlert = ({
+  children,
+  title,
+  ...props
+}) => {
+  return /* @__PURE__ */ React73__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React73__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__default.createElement(Box, null, children)));
 };
 var Breadcrumb = (props) => {
   const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
@@ -2685,6 +2690,9 @@ var CheckboxGroup = ({
 }) => {
   return /* @__PURE__ */ React73__default.createElement(CheckboxGroup$1, { ...props }, /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2 }, children));
 };
+
+// ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
+var dataAttr = (condition) => condition ? "" : void 0;
 var ChoiceChip = forwardRef((props, ref) => {
   const {
     children,
@@ -3046,13 +3054,11 @@ function ListBoxSection({ section, state: state2 }) {
 // src/input/InfoSelect.tsx
 function InfoSelect({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }) {
   const renamedProps = {
@@ -3079,7 +3085,8 @@ function InfoSelect({
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = useFormControlProps(props);
-  return /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React73__default.createElement(chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React73__default.createElement(
+  const hasChosenValue = state2.selectedItem !== null;
+  return /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React73__default.createElement(
     HiddenSelect,
     {
       state: state2,
@@ -3094,13 +3101,36 @@ function InfoSelect({
       ref: triggerRef,
       sx: styles3.button,
       ...buttonProps,
-      width,
-      height,
       "data-attachable": true,
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React73__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
+    /* @__PURE__ */ React73__default.createElement(chakra.div, { sx: styles3.innerButton }, /* @__PURE__ */ React73__default.createElement(
+      chakra.div,
+      {
+        ...labelProps,
+        sx: {
+          ...styles3.label,
+          ...hasChosenValue && {
+            transform: "scale(0.825) translateY(-10px) translateX(-10%)",
+            transitionProperty: "var(--spor-transition-property-common)",
+            transitionDuration: "var(--spor-transition-duration-normal)"
+          }
+        }
+      },
+      props.label
+    ), /* @__PURE__ */ React73__default.createElement(
+      Box,
+      {
+        ...valueProps,
+        h: !hasChosenValue ? "0px" : "18px",
+        hidden: !hasChosenValue,
+        transform: "scale(1) translateY(-10px)",
+        transitionProperty: "var(--spor-transition-property-common)",
+        transitionDuration: "var(--spor-transition-duration-normal)"
+      },
+      state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)
+    )),
     /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React73__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React73__default.createElement(DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React73__default.createElement(
     Popover3,
@@ -3445,7 +3475,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-C2XKHNTP.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-FVCL47RT.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -6486,13 +6516,13 @@ function defineStyle(styles3) {
 function defineStyleConfig(config45) {
   return config45;
 }
-function createMultiStyleConfigHelpers(parts19) {
+function createMultiStyleConfigHelpers(parts20) {
   return {
     definePartsStyle(config45) {
       return config45;
     },
     defineMultiStyleConfig(config45) {
-      return { parts: parts19, ...config45 };
+      return { parts: parts20, ...config45 };
     }
   };
 }
@@ -6655,7 +6685,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts19(...values) {
+  function parts20(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6695,7 +6725,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts19,
+    parts: parts20,
     toPart,
     extend,
     selectors,
@@ -9908,8 +9938,11 @@ function baseBorder(state2, props) {
     }
     case "active": {
       return {
-        outline: "2px solid",
-        outlineColor: mode("base.outline.light", "base.outline.dark")(props)
+        outline: "1px solid",
+        outlineColor: mode(
+          "base.outline.default.light",
+          "base.outline.default.dark"
+        )(props)
       };
     }
     case "invalid": {
@@ -9960,14 +9993,14 @@ function floatingBackground(state2, props) {
       return {
         backgroundColor: mode(
           "floating.surface.hover.light",
-          "floating.surface.hover.dark"
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
     case "default":
       return {
         backgroundColor: mode(
-          "floating.surface.default.light",
-          "floating.surface.default.dark"
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
   }
@@ -10024,7 +10057,10 @@ function ghostBackground(state2, props) {
       };
     case "selected": {
       return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        backgroundColor: mode(
+          "ghost.surface.selected.light",
+          "ghost.surface.selected.dark"
+        )(props)
       };
     }
     case "default":
@@ -10033,6 +10069,18 @@ function ghostBackground(state2, props) {
       };
   }
 }
+function ghostText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+    default:
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+  }
+}
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
@@ -10182,7 +10230,8 @@ var config3 = helpers2.defineMultiStyleConfig({
     closeButton: {
       position: "absolute",
       top: 1,
-      right: 1
+      right: 1,
+      color: "darkGrey"
     }
   },
   variants: {
@@ -11869,18 +11918,28 @@ var config19 = helpers11.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      fontSize: ["mobile.xs", "desktop.sm"],
       ...props.isLabelSrOnly ? srOnly2 : {}
     },
+    innerButton: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "start"
+    },
     button: {
+      display: "flex",
       appearance: "none",
+      width: "100%",
+      height: "54px",
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
       paddingX: 3,
-      display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
+      h: 8,
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
@@ -11898,6 +11957,7 @@ var config19 = helpers11.defineMultiStyleConfig({
         ...baseBorder("invalid", props)
       }
     },
+    placeholder: {},
     arrowIcon: {}
   }),
   variants: {
@@ -12527,7 +12587,7 @@ var config25 = helpers16.defineMultiStyleConfig({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: mode("darkGrey", "white")(props),
+      ...ghostText("default", props),
       cursor: "pointer",
       outline: "none",
       _active: {
@@ -12540,15 +12600,15 @@ var config25 = helpers16.defineMultiStyleConfig({
         ...ghostBackground("selected", props)
       },
       _selected: {
-        ...ghostBackground("selected", props)
+        ...ghostBackground("active", props)
       }
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: mode("dimGrey", "silver")(props),
+      ...ghostText("default", props),
       "[aria-selected='true'] &": {
-        color: mode("lightGrey", "platinum")(props)
+        ...ghostText("selected", props)
       }
     }
   })
@@ -12967,66 +13027,119 @@ var config32 = helpers23.defineMultiStyleConfig({
   }
 });
 var progress_indicator_default = config32;
-var config33 = defineStyleConfig$1({
+function outlineBorder(state2, props) {
+  switch (state2) {
+    case "error":
+      return {
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props)
+      };
+    case "focus":
+      return {
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props)
+      };
+    default:
+      return {
+        outlineColor: mode(
+          "outline.default.light",
+          "outline.default.dark"
+        )(props)
+      };
+  }
+}
+
+// src/theme/components/radio-card.ts
+var parts17 = anatomy$1("radio-card").parts("container", "checked", "radioInput");
+var helpers24 = createMultiStyleConfigHelpers$1(parts17.keys);
+var config33 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "sm",
-    ...focusVisibleStyles(props),
-    _checked: {
-      outline: "1px solid",
-      outlineColor: "greenHaze",
-      ...floatingBackground("active", props),
-      _hover: {
-        ...floatingBackground("active", props)
+    container: {
+      appearance: "none",
+      border: "none",
+      overflow: "hidden",
+      fontSize: "inherit",
+      display: "block",
+      cursor: "pointer",
+      borderRadius: "sm",
+      ...focusVisibleStyles(props),
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      _disabled: {
+        pointerEvents: "none",
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props)
       }
     },
-    _disabled: {
-      pointerEvents: "none",
-      ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
-      ...baseText("disabled", props)
+    checked: {
+      outline: "2px solid",
+      ...outlineBorder("focus", props),
+      ...floatingBackground("active", props)
+    },
+    radioInput: {
+      appearance: "none",
+      position: "absolute",
+      opacity: 0,
+      zIndex: -1
     }
   }),
   variants: {
     base: (props) => ({
-      ...baseBackground("default", props),
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBackground("hover", props),
-        ...baseBorder("hover", props)
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBackground("hover", props),
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props)
+        }
       },
-      _active: {
-        ...baseBackground("active", props)
+      checked: {
+        _hover: {
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props)
+        }
       }
     }),
     floating: (props) => ({
-      ...floatingBackground("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...floatingBackground("hover", props),
-        ...floatingBorder("hover", props),
-        boxShadow: "md"
-      },
-      _active: {
-        ...floatingBackground("active", props),
-        ...floatingBorder("active", props)
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        boxShadow: "sm",
+        _hover: {
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          boxShadow: "md"
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props)
+        }
       },
-      _checked: {
+      checked: {
+        cursor: "normal",
         _hover: {
-          outline: "1px solid",
-          outlineColor: "silver"
+          ...floatingBorder("hover", props)
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props)
         }
       }
     })
   }
 });
 var radio_card_default = config33;
-var helpers24 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-var config34 = helpers24.defineMultiStyleConfig({
+var helpers25 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+var config34 = helpers25.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
@@ -13080,9 +13193,9 @@ var config34 = helpers24.defineMultiStyleConfig({
   })
 });
 var radio_default = config34;
-var parts17 = selectAnatomy.extend("root");
-var helpers25 = createMultiStyleConfigHelpers$1(parts17.keys);
-var config35 = helpers25.defineMultiStyleConfig({
+var parts18 = selectAnatomy.extend("root");
+var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
+var config35 = helpers26.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%",
@@ -13153,7 +13266,7 @@ var config36 = defineStyleConfig$1({
   }
 });
 var skeleton_default = config36;
-var parts18 = anatomy$1("stepper").parts(
+var parts19 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
@@ -13165,8 +13278,8 @@ var parts18 = anatomy$1("stepper").parts(
   "stepTitle",
   "closeButton"
 );
-var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
-var config37 = helpers26.defineMultiStyleConfig({
+var helpers27 = createMultiStyleConfigHelpers$1(parts19.keys);
+var config37 = helpers27.defineMultiStyleConfig({
   baseStyle: {
     root: {
       display: "flex",
@@ -13241,8 +13354,8 @@ var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
 var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
-var helpers27 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-var config38 = helpers27.defineMultiStyleConfig({
+var helpers28 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
+var config38 = helpers28.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       [$diff2.variable]: diffValue2,
@@ -13336,13 +13449,13 @@ var config38 = helpers27.defineMultiStyleConfig({
   }
 });
 var switch_default = config38;
-var helpers28 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
+var helpers29 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
 var numericStyles2 = {
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 };
-var config39 = helpers28.defineMultiStyleConfig({
+var config39 = helpers29.defineMultiStyleConfig({
   baseStyle: (props) => ({
     table: {
       borderCollapse: "collapse",
@@ -13489,8 +13602,8 @@ var config39 = helpers28.defineMultiStyleConfig({
   }
 });
 var table_default = config39;
-var helpers29 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
-var config40 = helpers29.defineMultiStyleConfig({
+var helpers30 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
+var config40 = helpers30.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -13725,9 +13838,14 @@ var config44 = defineStyleConfig$1({
     display: "block",
     borderRadius: "md",
     cursor: "pointer",
-    ...focusVisibleStyles(props),
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    "button&, a&, label&, &.is-clickable": {
+      ...focusVisibleStyles(props)
+    },
     _disabled: {
       ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
       outline: "none",
       pointerEvents: "none"
@@ -13735,6 +13853,7 @@ var config44 = defineStyleConfig$1({
   }),
   variants: {
     base: (props) => ({
+      cursor: "pointer",
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
@@ -13749,7 +13868,7 @@ var config44 = defineStyleConfig$1({
       boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
-        boxShadow: "sm"
+        boxShadow: "md"
       },
       _active: {
         ...accentBackground("active", props),
@@ -13758,6 +13877,7 @@ var config44 = defineStyleConfig$1({
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
@@ -13765,6 +13885,7 @@ var config44 = defineStyleConfig$1({
         boxShadow: "md"
       },
       _active: {
+        ...floatingBorder("default", props),
         ...floatingBackground("active", props),
         boxShadow: "none"
       }