@vygruppen/spor-react 9.8.3 → 9.9.0

package/dist/index.d.ts

@@ -211,7 +211,7 @@ declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As
 
 type PressableCardProps = BoxProps & {
     /** Defaults to "base"  */
-    variant: "floating" | "accent" | "base";
+    variant?: "floating" | "accent" | "base";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -333,6 +333,8 @@ type BaseAlertProps = BoxProps & {
     variant: "info" | "success" | "warning" | "alt-transport" | "error";
     /** The body content of the alert */
     children: React.ReactNode;
+    /** The title of the alert */
+    title?: string;
 };
 
 type ClosableAlertProps = BaseAlertProps & {
@@ -361,7 +363,7 @@ type ClosableAlertProps = BaseAlertProps & {
  *   <Text>Some info here</Text>
  * </ClosableAlert>
  */
-declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
+declare const ClosableAlert: ({ variant, title, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
 
 type ExpandableAlertProps = BaseAlertProps & {
     /** The title string  */
@@ -401,7 +403,7 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React.JSX.Element;
+declare const StaticAlert: ({ children, title, ...props }: StaticAlertProps) => React.JSX.Element;
 
 type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
     variant?: "base" | "ghost";
@@ -1174,7 +1176,7 @@ type InfoSelectProps<T extends object> = {
  *
  * @see https://spor.vy.no/components/info-select
  */
-declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
 
 type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -2534,6 +2536,7 @@ declare const theme: {
                     position: string;
                     top: number;
                     right: number;
+                    color: string;
                 };
             } | undefined;
             sizes?: {
@@ -4619,6 +4622,13 @@ declare const theme: {
                     position: string;
                     width?: string | undefined;
                     whiteSpace?: string | undefined;
+                    fontSize: ("desktop.sm" | "mobile.xs")[];
+                };
+                innerButton: {
+                    display: string;
+                    flexDir: string;
+                    alignItems: string;
+                    justifyContent: string;
                 };
                 button: {
                     _disabled: {
@@ -4657,15 +4667,18 @@ declare const theme: {
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 } | {
                     _disabled: {
                         backgroundColor: string;
@@ -4701,16 +4714,20 @@ declare const theme: {
                     };
                     outline: string;
                     outlineColor: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 };
+                placeholder: {};
                 arrowIcon: {};
             }) | undefined;
             sizes?: {
@@ -5369,12 +5386,6 @@ declare const theme: {
                     backgroundColor: string;
                 };
                 item: {
-                    paddingX: number;
-                    paddingY: number;
-                    marginY: number;
-                    marginX: number;
-                    borderRadius: string;
-                    color: string;
                     cursor: string;
                     outline: string;
                     _active: {
@@ -5389,14 +5400,20 @@ declare const theme: {
                     _selected: {
                         backgroundColor: string;
                     };
+                    color: string;
+                    paddingX: number;
+                    paddingY: number;
+                    marginY: number;
+                    marginX: number;
+                    borderRadius: string;
                 };
                 label: {};
                 description: {
-                    fontSize: ("mobile.xs" | "desktop.xs")[];
-                    color: string;
                     "[aria-selected='true'] &": {
                         color: string;
                     };
+                    color: string;
+                    fontSize: ("mobile.xs" | "desktop.xs")[];
                 };
             }) | undefined;
             sizes?: {
@@ -7224,25 +7241,39 @@ declare const theme: {
         };
         PressableCard: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+                cursor: string;
+                transitionProperty: string;
+                transitionDuration: string;
+                "button&, a&, label&, &.is-clickable": {
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                };
                 _disabled: {
                     outline: string;
                     pointerEvents: string;
                     color: string;
-                    backgroundColor: string;
-                };
-                _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    outline: string;
+                    pointerEvents: string;
+                    color: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                 };
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                borderRadius: string;
-                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;

package/dist/index.js

@@ -933,7 +933,7 @@ var init_StaticCard = __esm({
         const styles3 = react.useStyleConfig("StaticCard", {
           colorScheme
         });
-        return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__namespace.default.createElement(react.Card, null));
+        return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
       }
     );
   }
@@ -942,7 +942,7 @@ exports.PressableCard = void 0;
 var init_PressableCard = __esm({
   "src/layout/PressableCard.tsx"() {
     exports.PressableCard = react.forwardRef(
-      ({ children, variant = "base", ...props }, ref) => {
+      ({ children, variant = "floating", ...props }, ref) => {
         const styles3 = react.useStyleConfig("PressableCard", {
           variant
         });
@@ -1849,6 +1849,7 @@ var init_ClosableAlert = __esm({
     init_BaseAlert();
     exports.ClosableAlert = ({
       variant,
+      title,
       children,
       onClose: externalOnClose = () => {
       }
@@ -1873,7 +1874,7 @@ var init_ClosableAlert = __esm({
           "aria-label": t2(texts6.close),
           sx: styles3.closeButton
         }
-      ), /* @__PURE__ */ React73__namespace.default.createElement(AlertIcon, { variant }), children);
+      ), /* @__PURE__ */ React73__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React73__namespace.default.createElement(react.Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { marginRight: 1 }, children)));
     };
     texts6 = createTexts({
       close: {
@@ -1926,11 +1927,12 @@ var init_ExpandableAlert = __esm({
                 overflow: "hidden",
                 "-webkit-line-clamp": "1",
                 "-webkit-box-orient": "vertical"
-              }
+              },
+              color: "darkGrey"
             },
             title
           )),
-          /* @__PURE__ */ React73__namespace.default.createElement(react.AccordionIcon, null)
+          /* @__PURE__ */ React73__namespace.default.createElement(react.AccordionIcon, { color: "darkGrey" })
         )), /* @__PURE__ */ React73__namespace.default.createElement(react.AccordionPanel, null, children))
       ));
     };
@@ -1941,8 +1943,12 @@ var init_StaticAlert = __esm({
   "src/alert/StaticAlert.tsx"() {
     init_AlertIcon();
     init_BaseAlert();
-    exports.StaticAlert = ({ children, ...props }) => {
-      return /* @__PURE__ */ React73__namespace.default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__namespace.default.createElement(AlertIcon, { variant: props.variant }), children);
+    exports.StaticAlert = ({
+      children,
+      title,
+      ...props
+    }) => {
+      return /* @__PURE__ */ React73__namespace.default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__namespace.default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React73__namespace.default.createElement(react.Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__namespace.default.createElement(react.Box, null, children)));
     };
   }
 });
@@ -3600,13 +3606,11 @@ var init_ListBox = __esm({
 });
 function InfoSelect({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }) {
   const renamedProps = {
@@ -3633,7 +3637,8 @@ function InfoSelect({
   const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = react.useFormControlProps(props);
-  return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React73__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React73__namespace.default.createElement(
+  const hasChosenValue = state2.selectedItem !== null;
+  return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React73__namespace.default.createElement(
     reactAria.HiddenSelect,
     {
       state: state2,
@@ -3648,13 +3653,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__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
+    /* @__PURE__ */ React73__namespace.default.createElement(react.chakra.div, { sx: styles3.innerButton }, /* @__PURE__ */ React73__namespace.default.createElement(
+      react.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__namespace.default.createElement(
+      react.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__namespace.default.createElement(react.Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React73__namespace.default.createElement(
     Popover3,
@@ -11317,14 +11345,14 @@ function floatingBackground(state2, props) {
       return {
         backgroundColor: themeTools.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: themeTools.mode(
-          "floating.surface.default.light",
-          "floating.surface.default.dark"
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
   }
@@ -11386,7 +11414,10 @@ function ghostBackground(state2, props) {
       };
     case "selected": {
       return {
-        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+        backgroundColor: themeTools.mode(
+          "ghost.surface.selected.light",
+          "ghost.surface.selected.dark"
+        )(props)
       };
     }
     case "default":
@@ -11395,6 +11426,18 @@ function ghostBackground(state2, props) {
       };
   }
 }
+function ghostText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: themeTools.mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+    default:
+      return {
+        color: themeTools.mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+  }
+}
 var init_ghost_utils = __esm({
   "src/theme/utils/ghost-utils.ts"() {
   }
@@ -11564,7 +11607,8 @@ var init_alert2 = __esm({
         closeButton: {
           position: "absolute",
           top: 1,
-          right: 1
+          right: 1,
+          color: "darkGrey"
         }
       },
       variants: {
@@ -13495,18 +13539,28 @@ var init_info_select = __esm({
         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)
@@ -13524,6 +13578,7 @@ var init_info_select = __esm({
             ...baseBorder("invalid", props)
           }
         },
+        placeholder: {},
         arrowIcon: {}
       }),
       variants: {
@@ -14201,7 +14256,7 @@ var init_listbox = __esm({
           marginY: 1,
           marginX: 1,
           borderRadius: "sm",
-          color: themeTools.mode("darkGrey", "white")(props),
+          ...ghostText("default", props),
           cursor: "pointer",
           outline: "none",
           _active: {
@@ -14214,15 +14269,15 @@ var init_listbox = __esm({
             ...ghostBackground("selected", props)
           },
           _selected: {
-            ...ghostBackground("selected", props)
+            ...ghostBackground("active", props)
           }
         },
         label: {},
         description: {
           fontSize: ["mobile.xs", "desktop.xs"],
-          color: themeTools.mode("dimGrey", "silver")(props),
+          ...ghostText("default", props),
           "[aria-selected='true'] &": {
-            color: themeTools.mode("lightGrey", "platinum")(props)
+            ...ghostText("selected", props)
           }
         }
       })
@@ -15557,9 +15612,14 @@ var init_pressable_card = __esm({
         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"

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, 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, 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-ZDOSE4VD.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, 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, 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-TEDOVPXZ.mjs';

package/package.json

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

package/src/alert/BaseAlert.tsx

@@ -6,6 +6,8 @@ export type BaseAlertProps = BoxProps & {
   variant: "info" | "success" | "warning" | "alt-transport" | "error";
   /** The body content of the alert */
   children: React.ReactNode;
+  /** The title of the alert */
+  title?: string;
 };
 
 /**

package/src/alert/ClosableAlert.tsx

@@ -1,4 +1,9 @@
-import { useDisclosure, useMultiStyleConfig } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  useDisclosure,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
 import { CloseFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { IconButton } from "../button";
@@ -34,6 +39,7 @@ type ClosableAlertProps = BaseAlertProps & {
  */
 export const ClosableAlert = ({
   variant,
+  title,
   children,
   onClose: externalOnClose = () => {},
 }: ClosableAlertProps) => {
@@ -60,7 +66,10 @@ export const ClosableAlert = ({
         sx={styles.closeButton}
       />
       <AlertIcon variant={variant} />
-      {children}
+      <Flex direction="column" gap={title ? 2 : undefined} textAlign="left">
+        {title && <Box fontWeight="bold">{title}</Box>}
+        <Box marginRight={1}>{children}</Box>
+      </Flex>
     </BaseAlert>
   );
 };

package/src/alert/ExpandableAlert.tsx

@@ -63,6 +63,7 @@ export const ExpandableAlert = ({
             >
               <Flex as={headingLevel} alignItems="center">
                 <AlertIcon variant={variant} />
+
                 <Box
                   as="span"
                   sx={{
@@ -72,11 +73,12 @@ export const ExpandableAlert = ({
                     "-webkit-line-clamp": "1",
                     "-webkit-box-orient": "vertical",
                   }}
+                  color="darkGrey"
                 >
                   {title}
                 </Box>
               </Flex>
-              <AccordionIcon />
+              <AccordionIcon color="darkGrey" />
             </Flex>
           </AccordionButton>
           <AccordionPanel>{children}</AccordionPanel>

package/src/alert/StaticAlert.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { AlertIcon } from "./AlertIcon";
 import { BaseAlert, BaseAlertProps } from "./BaseAlert";
+import { Box, Flex } from "@chakra-ui/react";
 
 type StaticAlertProps = BaseAlertProps;
 
@@ -15,11 +16,18 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-export const StaticAlert = ({ children, ...props }: StaticAlertProps) => {
+export const StaticAlert = ({
+  children,
+  title,
+  ...props
+}: StaticAlertProps) => {
   return (
     <BaseAlert {...props}>
       <AlertIcon variant={props.variant} />
-      {children}
+      <Flex direction="column" gap={title ? 2 : undefined} textAlign="left">
+        {title && <Box fontWeight="bold">{title}</Box>}
+        <Box>{children}</Box>
+      </Flex>
     </BaseAlert>
   );
 };

package/src/input/InfoSelect.tsx

@@ -1,6 +1,8 @@
 import {
   Box,
   chakra,
+  Flex,
+  FormLabel,
   ResponsiveValue,
   useFormControlProps,
   useMultiStyleConfig,
@@ -11,7 +13,7 @@ import {
 } from "@vygruppen/spor-icon-react";
 import React, { useRef } from "react";
 import { HiddenSelect, useButton, useSelect } from "react-aria";
-import { useSelectState } from "react-stately";
+import { Column, useSelectState } from "react-stately";
 import { createTexts, useTranslation } from "../";
 import { ListBox } from "./ListBox";
 import { Popover } from "./Popover";
@@ -152,13 +154,11 @@ type InfoSelectProps<T extends object> = {
  */
 export function InfoSelect<T extends object>({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }: InfoSelectProps<T>) {
   const renamedProps = {
@@ -188,11 +188,10 @@ export function InfoSelect<T extends object>({
   const { t } = useTranslation();
   const formControl = useFormControlProps(props);
 
+  const hasChosenValue = state.selectedItem !== null;
+
   return (
     <Box sx={styles.container}>
-      <chakra.div {...labelProps} sx={styles.label}>
-        {props.label}
-      </chakra.div>
       <HiddenSelect
         state={state}
         triggerRef={triggerRef}
@@ -205,17 +204,37 @@ export function InfoSelect<T extends object>({
         ref={triggerRef}
         sx={styles.button}
         {...buttonProps}
-        width={width}
-        height={height}
         data-attachable
         aria-invalid={formControl.isInvalid}
         aria-describedby={formControl["aria-describedby"]}
       >
-        <Box {...valueProps}>
-          {state.selectedItem
-            ? state.selectedItem.textValue ?? state.selectedItem.rendered
-            : placeholder ?? t(texts.selectAnOption)}
-        </Box>
+        <chakra.div sx={styles.innerButton}>
+          <chakra.div
+            {...labelProps}
+            sx={{
+              ...styles.label,
+              ...(hasChosenValue && {
+                transform: "scale(0.825) translateY(-10px) translateX(-10%)",
+                transitionProperty: "var(--spor-transition-property-common)",
+                transitionDuration: "var(--spor-transition-duration-normal)",
+              }),
+            }}
+          >
+            {props.label}
+          </chakra.div>
+          <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)"}
+          >
+            {state.selectedItem
+              ? state.selectedItem.textValue ?? state.selectedItem.rendered
+              : placeholder ?? t(texts.selectAnOption)}
+          </Box>
+        </chakra.div>
         <Box sx={styles.arrowIcon}>
           {state.isOpen ? <DropdownUpFill24Icon /> : <DropdownDownFill24Icon />}
         </Box>

package/src/input/ListBox.tsx

@@ -185,6 +185,7 @@ const OptionContext = React.createContext<OptionContextValue>({
   labelProps: {},
   descriptionProps: {},
 });
+
 const useOptionContext = () => {
   return useContext(OptionContext);
 };