@vygruppen/spor-react 11.0.5 → 11.1.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@11.0.5 build
+> @vygruppen/spor-react@11.1.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 542.28 KB
-CJS ⚡️ Build success in 2175ms
-ESM dist/CountryCodeSelect-YB3M3566.mjs 1.22 KB
 ESM dist/index.mjs                      2.16 KB
-ESM dist/chunk-FBD6IXFW.mjs             428.46 KB
-ESM ⚡️ Build success in 2175ms
-DTS ⚡️ Build success in 15733ms
-DTS dist/index.d.ts  343.36 KB
-DTS dist/index.d.mts 343.36 KB
+ESM dist/CountryCodeSelect-V422HKUV.mjs 1.22 KB
+ESM dist/chunk-QFSW3GTE.mjs             428.91 KB
+ESM ⚡️ Build success in 2226ms
+CJS dist/index.js 542.81 KB
+CJS ⚡️ Build success in 2227ms
+DTS ⚡️ Build success in 15804ms
+DTS dist/index.d.ts  343.31 KB
+DTS dist/index.d.mts 343.31 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 11.1.1
+
+### Patch Changes
+
+- c0e50b7: Fixed searchinput so it is more SSR friendly
+
+## 11.1.0
+
+### Minor Changes
+
+- c0a8332: Button: Update props to support margins
+
 ## 11.0.5
 
 ### Patch Changes

package/dist/{CountryCodeSelect-YB3M3566.mjs → CountryCodeSelect-V422HKUV.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-FBD6IXFW.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QFSW3GTE.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-FBD6IXFW.mjs → chunk-QFSW3GTE.mjs}

@@ -1844,7 +1844,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-YB3M3566.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-V422HKUV.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1869,16 +1869,37 @@ var SearchInput = forwardRef(
         ...innerProps,
         id: inputId,
         type: "search",
+        placeholder: " ",
         css: {
           "&::-webkit-search-cancel-button": {
             WebkitAppearance: "none"
           }
         },
         ref,
-        placeholder: " ",
         "data-attachable": true
       }
-    ), /* @__PURE__ */ React85__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts5.label)), showClearButton && /* @__PURE__ */ React85__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React85__default.createElement(
+    ), /* @__PURE__ */ React85__default.createElement(
+      FormLabel,
+      {
+        htmlFor: inputId,
+        sx: {
+          position: "absolute",
+          left: "2.6rem",
+          top: "26.9%",
+          fontSize: "1.13rem",
+          pointerEvents: "none",
+          margin: 0,
+          zIndex: 2,
+          "input:focus + &, input[data-has-value] + &": {
+            color: "var(--chakra-colors-gray-600)"
+          },
+          "input[data-has-value] + &": {
+            transform: "translateY(-40%) scale(0.9)"
+          }
+        }
+      },
+      label ?? t2(texts5.label)
+    ), showClearButton && /* @__PURE__ */ React85__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React85__default.createElement(
       IconButton$1,
       {
         variant: "ghost",

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, SpaceProps, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1, useMediaQuery as useMediaQuery$1 } from '@chakra-ui/react';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1, useMediaQuery as useMediaQuery$1 } from '@chakra-ui/react';
 export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import React, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
@@ -428,7 +428,7 @@ declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 declare const BreadcrumbItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"li", _chakra_ui_breadcrumb_dist_breadcrumb_item.BreadcrumbItemProps>;
 declare const BreadcrumbLink: _chakra_ui_system_dist_system_types.ComponentWithAs<"a", _chakra_ui_breadcrumb_dist_breadcrumb_link.BreadcrumbLinkProps>;
 
-type ButtonProps = Omit<Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size" | "variant">, keyof SpaceProps> & {
+type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "size" | "variant"> & {
     /**
      * The size of the button.
      *

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, SpaceProps, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1, useMediaQuery as useMediaQuery$1 } from '@chakra-ui/react';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1, useMediaQuery as useMediaQuery$1 } from '@chakra-ui/react';
 export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import React, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
@@ -428,7 +428,7 @@ declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 declare const BreadcrumbItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"li", _chakra_ui_breadcrumb_dist_breadcrumb_item.BreadcrumbItemProps>;
 declare const BreadcrumbLink: _chakra_ui_system_dist_system_types.ComponentWithAs<"a", _chakra_ui_breadcrumb_dist_breadcrumb_link.BreadcrumbLinkProps>;
 
-type ButtonProps = Omit<Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size" | "variant">, keyof SpaceProps> & {
+type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "size" | "variant"> & {
     /**
      * The size of the button.
      *

package/dist/index.js

@@ -2098,16 +2098,37 @@ var init_SearchInput = __esm({
             ...innerProps,
             id: inputId,
             type: "search",
+            placeholder: " ",
             css: {
               "&::-webkit-search-cancel-button": {
                 WebkitAppearance: "none"
               }
             },
             ref,
-            placeholder: " ",
             "data-attachable": true
           }
-        ), /* @__PURE__ */ React86__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts6.label)), showClearButton && /* @__PURE__ */ React86__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React86__namespace.default.createElement(
+        ), /* @__PURE__ */ React86__namespace.default.createElement(
+          exports.FormLabel,
+          {
+            htmlFor: inputId,
+            sx: {
+              position: "absolute",
+              left: "2.6rem",
+              top: "26.9%",
+              fontSize: "1.13rem",
+              pointerEvents: "none",
+              margin: 0,
+              zIndex: 2,
+              "input:focus + &, input[data-has-value] + &": {
+                color: "var(--chakra-colors-gray-600)"
+              },
+              "input[data-has-value] + &": {
+                transform: "translateY(-40%) scale(0.9)"
+              }
+            }
+          },
+          label ?? t2(texts6.label)
+        ), showClearButton && /* @__PURE__ */ React86__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React86__namespace.default.createElement(
           react.IconButton,
           {
             variant: "ghost",

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, ServiceAlert, 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-FBD6IXFW.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, ServiceAlert, 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-QFSW3GTE.mjs';

package/package.json

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

package/src/button/Button.tsx

@@ -12,12 +12,9 @@ import React from "react";
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
 
-export type ButtonProps = Omit<
-  Exclude<
-    ChakraButtonProps,
-    "colorScheme" | "loadingText" | "size" | "variant"
-  >,
-  keyof SpaceProps
+export type ButtonProps = Exclude<
+  ChakraButtonProps,
+  "colorScheme" | "size" | "variant"
 > & {
   /**
    * The size of the button.

package/src/input/SearchInput.tsx

@@ -48,16 +48,33 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
           {...innerProps}
           id={inputId}
           type="search"
+          placeholder=" "
           css={{
             "&::-webkit-search-cancel-button": {
               WebkitAppearance: "none",
             },
           }}
           ref={ref}
-          placeholder=" " // This is needed to make the label work as expected
           data-attachable
         />
-        <FormLabel htmlFor={inputId} pointerEvents="none">
+        <FormLabel
+          htmlFor={inputId}
+          sx={{
+            position: "absolute",
+            left: "2.6rem",
+            top: "26.9%",
+            fontSize: "1.13rem",
+            pointerEvents: "none",
+            margin: 0,
+            zIndex: 2,
+            "input:focus + &, input[data-has-value] + &": {
+              color: "var(--chakra-colors-gray-600)",
+            },
+            "input[data-has-value] + &": {
+              transform: "translateY(-40%) scale(0.9)",
+            },
+          }}
+        >
           {label ?? t(texts.label)}
         </FormLabel>
         {showClearButton && (