@vygruppen/spor-react 10.3.0 → 10.4.0

package/dist/index.js

@@ -1149,6 +1149,7 @@ function Combobox({
   emptyContent,
   inputRef: externalInputRef,
   allowsEmptyCollection,
+  variant,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
@@ -1202,6 +1203,7 @@ function Combobox({
       ref: inputRef,
       role: "combobox",
       label,
+      variant,
       "aria-expanded": state2.isOpen,
       "aria-autocomplete": "list",
       "aria-controls": listboxId,
@@ -1243,7 +1245,8 @@ function Combobox({
         id: listboxId,
         listBoxRef,
         emptyContent,
-        maxWidth: inputWidth
+        maxWidth: inputWidth,
+        variant
       },
       rest.children
     )
@@ -1368,10 +1371,11 @@ function ListBox({
   listBoxRef,
   state: state2,
   maxWidth,
+  variant,
   ...props
 }) {
   const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
-  const styles3 = react.useMultiStyleConfig("ListBox", {});
+  const styles3 = react.useMultiStyleConfig("ListBox", { variant });
   return /* @__PURE__ */ React85__namespace.default.createElement(
     react.List,
     {
@@ -1379,7 +1383,8 @@ function ListBox({
       ref: listBoxRef,
       sx: styles3.container,
       "aria-busy": isLoading,
-      maxWidth
+      maxWidth,
+      variant
     },
     state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
@@ -1494,16 +1499,17 @@ function InfoSelect({
     triggerRef
   );
   const stateStyle = "completed";
+  const hasChosenValue = state2.selectedItem !== null;
   const styles3 = react.useMultiStyleConfig("InfoSelect", {
     isOpen: state2.isOpen,
     isLabelSrOnly,
     variant,
-    stateStyle
+    stateStyle,
+    hasChosenValue
   });
   const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = react.useFormControlProps(props);
-  const hasChosenValue = state2.selectedItem !== null;
   return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React85__namespace.default.createElement(
     reactAria.HiddenSelect,
     {
@@ -1543,7 +1549,7 @@ function InfoSelect({
         ...valueProps,
         h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
         hidden: !hasChosenValue,
-        transform: isLabelSrOnly ? "" : "scale(1) translateY(-10px)",
+        transform: isLabelSrOnly ? "" : "scale(1) translateY(-12px)",
         transitionProperty: "var(--spor-transition-property-common)",
         transitionDuration: "var(--spor-transition-duration-normal)"
       },
@@ -1563,7 +1569,8 @@ function InfoSelect({
         ...menuProps,
         state: state2,
         listBoxRef: listboxRef,
-        borderBottomRadius: "sm"
+        borderBottomRadius: "sm",
+        variant
       },
       props.children
     )
@@ -1931,6 +1938,7 @@ var init_CountryCodeSelect = __esm({
           label: t2(texts4.countryCode),
           isLabelSrOnly: true,
           items: callingCodes,
+          variant: props.variant,
           ...props
         },
         (item) => /* @__PURE__ */ React85__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
@@ -1958,6 +1966,7 @@ var init_PhoneNumberInput = __esm({
         name,
         value: externalValue,
         onChange: externalOnChange,
+        variant,
         ...boxProps
       }, ref) => {
         const { t: t2 } = useTranslation();
@@ -1980,7 +1989,8 @@ var init_PhoneNumberInput = __esm({
                 label: t2(texts5.countryCodeLabel),
                 width: "6.25rem",
                 height: "100%",
-                value: "+47"
+                value: "+47",
+                variant
               },
               /* @__PURE__ */ React85__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
             )
@@ -1995,7 +2005,8 @@ var init_PhoneNumberInput = __esm({
               }),
               name: name ? `${name}-country-code` : "country-code",
               height: "100%",
-              width: "6.25rem"
+              width: "6.25rem",
+              variant
             }
           )
         ), /* @__PURE__ */ React85__namespace.default.createElement(
@@ -2014,7 +2025,8 @@ var init_PhoneNumberInput = __esm({
               });
             },
             position: "relative",
-            left: "1px"
+            left: "1px",
+            variant
           }
         ));
       }
@@ -2117,8 +2129,8 @@ exports.Switch = void 0;
 var init_Switch = __esm({
   "src/input/Switch.tsx"() {
     exports.Switch = react.forwardRef(
-      ({ size: size2 = "md", ...props }, ref) => {
-        return /* @__PURE__ */ React85__namespace.default.createElement(react.Switch, { size: size2, ...props, ref });
+      ({ size: size2 = "md", as = "div", ...props }, ref) => {
+        return /* @__PURE__ */ React85__namespace.default.createElement(react.Switch, { as, size: size2, ...props, ref });
       }
     );
   }
@@ -13708,6 +13720,7 @@ var init_info_select = __esm({
         label: {
           position: "relative",
           fontSize: ["mobile.xs", "desktop.sm"],
+          marginTop: props.hasChosenValue ? 2 : 0,
           ...props.isLabelSrOnly ? srOnly2 : {}
         },
         innerButton: {
@@ -14086,102 +14099,146 @@ var init_info_tag = __esm({
     info_tag_default = config20;
   }
 });
-var helpers14, config21, input_default;
-var init_input2 = __esm({
-  "src/theme/components/input.ts"() {
-    init_dist4();
+
+// src/theme/utils/input-utils.ts
+function inputVariant(state2, props) {
+  switch (state2) {
+    case "base":
+      return {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props)
+        },
+        _selected: {
+          ...baseBackground("selected", props),
+          ...baseBorder("selected", props)
+        }
+      };
+    case "floating":
+      return {
+        boxShadow: "sm",
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBorder("hover", props),
+          ...floatingBackground("hover", props)
+        },
+        _active: {
+          ...floatingBorder("active", props),
+          ...floatingBackground("active", props)
+        },
+        _selected: {
+          ...floatingBorder("selected", props),
+          ...floatingBackground("selected", props)
+        }
+      };
+    case "default":
+    default:
+      return {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props)
+        },
+        _selected: {
+          ...baseBackground("selected", props),
+          ...baseBorder("selected", props)
+        }
+      };
+  }
+}
+var inputBaseStyle;
+var init_input_utils = __esm({
+  "src/theme/utils/input-utils.ts"() {
     init_base_utils();
+    init_floating_utils();
     init_focus_utils();
     init_surface_utils();
-    init_floating_utils();
-    helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
-    config21 = helpers14.defineMultiStyleConfig({
-      baseStyle: (props) => ({
-        field: {
-          appearance: "none",
-          width: "100%",
-          outline: "none",
-          border: 0,
-          borderRadius: "sm",
-          transitionProperty: "common",
-          transitionDuration: "fast",
-          position: "relative",
-          paddingX: 3,
-          height: 8,
-          fontSize: "mobile.md",
+    inputBaseStyle = (props) => ({
+      field: {
+        appearance: "none",
+        width: "100%",
+        outline: "none",
+        border: 0,
+        borderRadius: "sm",
+        transitionProperty: "common",
+        transitionDuration: "fast",
+        position: "relative",
+        paddingX: 3,
+        height: 8,
+        fontSize: "mobile.md",
+        _focusVisible: {
+          ...focusVisibleStyles(props)._focusVisible,
+          outlineOffset: 0
+        },
+        _disabled: {
+          ...surface("disabled", props),
+          ...baseBorder("disabled", props),
+          pointerEvents: "none"
+        },
+        _invalid: {
+          ...baseBorder("invalid", props),
           _hover: {
             ...baseBorder("hover", props)
-          },
-          _active: {
-            ...baseBackground("active", props),
-            ...baseBorder("default", props)
-          },
-          _focusVisible: {
-            ...focusVisibleStyles(props)._focusVisible,
-            outlineOffset: 0
-          },
-          _disabled: {
-            ...surface("disabled", props),
-            ...baseBorder("disabled", props),
-            pointerEvents: "none"
-          },
-          _invalid: {
-            ...baseBorder("invalid", props),
-            _hover: {
-              ...baseBorder("hover", props)
-            }
-          },
-          " + label": {
-            fontSize: ["mobile.sm", "desktop.sm"],
-            top: "2px",
-            left: props.paddingLeft || props.pl || 3,
-            zIndex: 2,
-            position: "absolute",
-            marginY: 2,
-            transition: ".1s ease-out",
-            transformOrigin: "top left",
-            cursor: "text"
-          },
-          "&:not(:placeholder-shown)": {
-            paddingTop: "1rem",
-            "& + label": {
-              transform: "scale(0.825) translateY(-10px)"
-            }
           }
         },
-        element: {
-          height: "100%"
+        " + label": {
+          fontSize: ["mobile.sm", "desktop.sm"],
+          top: "2px",
+          left: props.paddingLeft || props.pl || 3,
+          zIndex: 2,
+          position: "absolute",
+          marginY: 2,
+          transition: ".1s ease-out",
+          transformOrigin: "top left",
+          cursor: "text"
         },
-        group: {
-          ":has(:disabled)": {
-            ...baseText("disabled", props)
+        "&:not(:placeholder-shown)": {
+          paddingTop: "1rem",
+          "& + label": {
+            transform: "scale(0.825) translateY(-10px)"
           }
         }
+      },
+      element: {
+        height: "100%"
+      },
+      group: {
+        ":has(:disabled)": {
+          ...baseText("disabled", props)
+        }
+      }
+    });
+  }
+});
+var helpers14, config21, input_default;
+var init_input2 = __esm({
+  "src/theme/components/input.ts"() {
+    init_dist4();
+    init_input_utils();
+    helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
+    config21 = helpers14.defineMultiStyleConfig({
+      baseStyle: (props) => ({
+        ...inputBaseStyle(props)
       }),
       variants: {
         base: (props) => ({
           field: {
-            ...baseBackground("default", props),
-            ...baseBorder("default", props)
+            ...inputVariant("base", props)
           }
         }),
         floating: (props) => ({
           field: {
-            boxShadow: "sm",
-            ...floatingBackground("default", props),
-            ...floatingBorder("default", props),
-            _hover: {
-              ...floatingBorder("hover", props),
-              ...floatingBackground("hover", props)
-            },
-            _active: {
-              ...floatingBorder("active", props),
-              ...floatingBackground("active", props)
-            },
-            _selected: {
-              ...floatingBorder("selected", props),
-              ...floatingBackground("selected", props)
-            }
+            ...inputVariant("floating", props)
           }
         })
       },
@@ -14451,6 +14508,7 @@ var init_listbox = __esm({
     init_ghost_utils();
     init_surface_utils();
     init_outline_utils();
+    init_floating_utils();
     parts11 = anatomy("ListBox").parts(
       "container",
       "item",
@@ -14467,8 +14525,7 @@ var init_listbox = __esm({
           maxHeight: "50vh",
           width: "100%",
           listStyle: "none",
-          borderBottomRadius: "sm",
-          ...baseBorder("default", props)
+          borderBottomRadius: "sm"
         },
         item: {
           paddingX: 2,
@@ -14500,7 +14557,22 @@ var init_listbox = __esm({
             ...ghostText("selected", props)
           }
         }
-      })
+      }),
+      variants: {
+        base: (props) => ({
+          container: {
+            ...baseBorder("default", props)
+          }
+        }),
+        floating: (props) => ({
+          container: {
+            ...floatingBorder("default", props)
+          }
+        })
+      },
+      defaultProps: {
+        variant: "base"
+      }
     });
     listbox_default = config24;
   }
@@ -15186,7 +15258,7 @@ var init_select = __esm({
   "src/theme/components/select.ts"() {
     init_dist4();
     init_base_utils();
-    init_input2();
+    init_input_utils();
     parts18 = selectAnatomy.extend("root");
     helpers26 = react.createMultiStyleConfigHelpers(parts18.keys);
     config34 = helpers26.defineMultiStyleConfig({
@@ -15197,7 +15269,7 @@ var init_select = __esm({
           position: "relative",
           "& + label": {
             fontSize: ["mobile.sm", "desktop.sm"],
-            top: "2px",
+            top: "0.2rem",
             left: 3,
             zIndex: 2,
             position: "absolute",
@@ -15210,10 +15282,9 @@ var init_select = __esm({
           }
         },
         field: {
-          ...input_default.baseStyle(props).field,
+          ...inputBaseStyle(props).field,
           appearance: "none",
-          paddingTop: "1rem",
-          "option, optgroup": {}
+          paddingTop: "1rem"
         },
         icon: {
           width: 5,
@@ -15227,7 +15298,22 @@ var init_select = __esm({
             ...baseText("disabled", props)
           }
         }
-      })
+      }),
+      variants: {
+        base: (props) => ({
+          field: {
+            ...inputVariant("base", props)
+          }
+        }),
+        floating: (props) => ({
+          field: {
+            ...inputVariant("floating", props)
+          }
+        })
+      },
+      defaultProps: {
+        variant: "base"
+      }
     });
     select_default = config34;
   }
@@ -15779,10 +15865,10 @@ var init_tabs = __esm({
 var config40, textarea_default;
 var init_textarea = __esm({
   "src/theme/components/textarea.ts"() {
-    init_input2();
+    init_input_utils();
     config40 = react.defineStyleConfig({
       baseStyle: (props) => ({
-        ...input_default.baseStyle(props).field,
+        ...inputBaseStyle(props).field,
         minHeight: "5rem",
         verticalAlign: "top",
         appearance: "none",
@@ -15795,7 +15881,18 @@ var init_textarea = __esm({
             transform: "scale(0.825) translateY(-10px)"
           }
         }
-      })
+      }),
+      variants: {
+        base: (props) => ({
+          ...inputVariant("base", props)
+        }),
+        floating: (props) => ({
+          ...inputVariant("floating", props)
+        })
+      },
+      defaultProps: {
+        variant: "base"
+      }
     });
     textarea_default = config40;
   }

package/dist/index.mjs

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

package/package.json

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

package/src/input/Combobox.tsx

@@ -38,6 +38,7 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   inputRef?: React.RefObject<HTMLInputElement>;
   /** If you want to allow an empty collection */
   allowsEmptyCollection?: boolean;
+  variant?: "base" | "floating";
 } & OverridableInputProps;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -87,6 +88,7 @@ export function Combobox<T extends object>({
   emptyContent,
   inputRef: externalInputRef,
   allowsEmptyCollection,
+  variant,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -147,6 +149,7 @@ export function Combobox<T extends object>({
         ref={inputRef}
         role="combobox"
         label={label}
+        variant={variant}
         aria-expanded={state.isOpen}
         aria-autocomplete="list"
         aria-controls={listboxId}
@@ -196,6 +199,7 @@ export function Combobox<T extends object>({
             listBoxRef={listBoxRef}
             emptyContent={emptyContent}
             maxWidth={inputWidth}
+            variant={variant}
           >
             {rest.children}
           </ListBox>

package/src/input/CountryCodeSelect.tsx

@@ -26,6 +26,7 @@ type CountryCodeSelectProps = {
   name: string;
   width?: BoxProps["width"];
   height?: BoxProps["height"];
+  variant?: "base" | "floating";
 };
 export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
   const { t } = useTranslation();
@@ -35,6 +36,7 @@ export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
       label={t(texts.countryCode)}
       isLabelSrOnly={true}
       items={callingCodes as any}
+      variant={props.variant}
       {...props}
     >
       {(item) => <Item key={item.key}>{item.key}</Item>}

package/src/input/InfoSelect.tsx

@@ -178,18 +178,19 @@ export function InfoSelect<T extends object>({
 
   const stateStyle = "completed";
 
+  const hasChosenValue = state.selectedItem !== null;
+
   const styles = useMultiStyleConfig("InfoSelect", {
     isOpen: state.isOpen,
     isLabelSrOnly,
     variant,
     stateStyle,
+    hasChosenValue,
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t } = useTranslation();
   const formControl = useFormControlProps(props);
 
-  const hasChosenValue = state.selectedItem !== null;
-
   return (
     <Box sx={styles.container}>
       <HiddenSelect
@@ -226,7 +227,7 @@ export function InfoSelect<T extends object>({
             {...valueProps}
             h={isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px"}
             hidden={!hasChosenValue}
-            transform={isLabelSrOnly ? "" : "scale(1) translateY(-10px)"}
+            transform={isLabelSrOnly ? "" : "scale(1) translateY(-12px)"}
             transitionProperty={"var(--spor-transition-property-common)"}
             transitionDuration={"var(--spor-transition-duration-normal)"}
           >
@@ -253,6 +254,7 @@ export function InfoSelect<T extends object>({
             state={state}
             listBoxRef={listboxRef}
             borderBottomRadius="sm"
+            variant={variant}
           >
             {props.children}
           </ListBox>

package/src/input/ListBox.tsx

@@ -29,6 +29,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
     /** UI to render if the collection is empty */
     emptyContent?: React.ReactNode;
     maxWidth?: BoxProps["maxWidth"];
+    variant?: "base" | "floating";
   };
 
 /**
@@ -70,10 +71,11 @@ export function ListBox<T extends object>({
   listBoxRef,
   state,
   maxWidth,
+  variant,
   ...props
 }: ListBoxProps<T>) {
   const { listBoxProps } = useListBox(props, state, listBoxRef);
-  const styles = useMultiStyleConfig("ListBox", {});
+  const styles = useMultiStyleConfig("ListBox", { variant });
 
   return (
     <List
@@ -82,6 +84,7 @@ export function ListBox<T extends object>({
       sx={styles.container}
       aria-busy={isLoading}
       maxWidth={maxWidth}
+      variant={variant}
     >
       {state.collection.size === 0 && props.emptyContent}
       {Array.from(state.collection).map((item) =>

package/src/input/PhoneNumberInput.tsx

@@ -24,6 +24,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   onChange?: (change: CountryCodeAndPhoneNumber) => void;
   /** The optional value of the country code and phone number */
   value?: CountryCodeAndPhoneNumber;
+  variant?: "base" | "floating";
 };
 /**
  * A component for entering phone numbers.
@@ -49,6 +50,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       name,
       value: externalValue,
       onChange: externalOnChange,
+      variant,
       ...boxProps
     },
     ref,
@@ -73,6 +75,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
               width="6.25rem"
               height="100%"
               value="+47"
+              variant={variant}
             >
               <Item key="+47">+47</Item>
             </InfoSelect>
@@ -89,6 +92,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
             name={name ? `${name}-country-code` : "country-code"}
             height="100%"
             width="6.25rem"
+            variant={variant}
           />
         </Suspense>
         <Input
@@ -107,6 +111,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
           }}
           position="relative"
           left="1px" // Makes the borders overlap
+          variant={variant}
         />
       </AttachedInputs>
     );