@vygruppen/spor-react 10.8.0 → 10.8.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.8.0 build
+> @vygruppen/spor-react@10.8.2 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 539.38 KB
-CJS ⚡️ Build success in 2212ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-NZI7KBTH.mjs 1.22 KB
-ESM dist/chunk-Q3JX25BX.mjs             425.89 KB
-ESM ⚡️ Build success in 2213ms
-DTS ⚡️ Build success in 15590ms
-DTS dist/index.d.ts  340.59 KB
-DTS dist/index.d.mts 340.59 KB
+ESM dist/CountryCodeSelect-AKXDN47A.mjs 1.22 KB
+ESM dist/chunk-LA5DSNRV.mjs             425.97 KB
+ESM ⚡️ Build success in 2247ms
+CJS dist/index.js 539.47 KB
+CJS ⚡️ Build success in 2248ms
+DTS ⚡️ Build success in 15253ms
+DTS dist/index.d.ts  340.79 KB
+DTS dist/index.d.mts 340.79 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 10.8.2
+
+### Patch Changes
+
+- 96f0dca: Fixed buggy label logic for PhoneNumberInput
+
+## 10.8.1
+
+### Patch Changes
+
+- 9031c6e: Fix input label style bug caused by LastPass extension
+
 ## 10.8.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-NZI7KBTH.mjs → CountryCodeSelect-AKXDN47A.mjs}

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

package/dist/{chunk-Q3JX25BX.mjs → chunk-LA5DSNRV.mjs}

@@ -1760,7 +1760,7 @@ var PhoneNumberInput = forwardRef(
     ...boxProps
   }, ref) => {
     const { t: t2 } = useTranslation();
-    const label = externalLabel ?? isOptional ? t2(texts4.phoneNumberOptional) : t2(texts4.phoneNumber);
+    const label = externalLabel ?? (isOptional ? t2(texts4.phoneNumberOptional) : t2(texts4.phoneNumber));
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -1841,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-NZI7KBTH.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-AKXDN47A.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12783,7 +12783,7 @@ var inputBaseStyle = (props) => ({
         ...baseBorder("hover", props)
       }
     },
-    " + label": {
+    " + label, + div[data-lastpass-icon-root] + label": {
       fontSize: ["mobile.sm", "desktop.sm"],
       top: "2px",
       left: props.paddingLeft || props.pl || 3,
@@ -12796,7 +12796,7 @@ var inputBaseStyle = (props) => ({
     },
     "&:not(:placeholder-shown)": {
       paddingTop: "1rem",
-      "& + label": {
+      "& + label, & + div[data-lastpass-icon-root] + label": {
         transform: "scale(0.825) translateY(-10px)"
       }
     }

package/dist/index.d.mts

@@ -4535,7 +4535,7 @@ declare const theme: {
                         outline: string;
                         outlineColor: string;
                     };
-                    " + label": {
+                    " + label, + div[data-lastpass-icon-root] + label": {
                         fontSize: string[];
                         top: string;
                         left: any;
@@ -4548,7 +4548,7 @@ declare const theme: {
                     };
                     "&:not(:placeholder-shown)": {
                         paddingTop: string;
-                        "& + label": {
+                        "& + label, & + div[data-lastpass-icon-root] + label": {
                             transform: string;
                         };
                     };
@@ -5913,7 +5913,7 @@ declare const theme: {
                         outline: string;
                         outlineColor: string;
                     };
-                    " + label": {
+                    " + label, + div[data-lastpass-icon-root] + label": {
                         fontSize: string[];
                         top: string;
                         left: any;
@@ -5926,7 +5926,7 @@ declare const theme: {
                     };
                     "&:not(:placeholder-shown)": {
                         paddingTop: string;
-                        "& + label": {
+                        "& + label, & + div[data-lastpass-icon-root] + label": {
                             transform: string;
                         };
                     };
@@ -6818,7 +6818,7 @@ declare const theme: {
                     outline: string;
                     outlineColor: string;
                 };
-                " + label": {
+                " + label, + div[data-lastpass-icon-root] + label": {
                     fontSize: string[];
                     top: string;
                     left: any;

package/dist/index.d.ts

@@ -4535,7 +4535,7 @@ declare const theme: {
                         outline: string;
                         outlineColor: string;
                     };
-                    " + label": {
+                    " + label, + div[data-lastpass-icon-root] + label": {
                         fontSize: string[];
                         top: string;
                         left: any;
@@ -4548,7 +4548,7 @@ declare const theme: {
                     };
                     "&:not(:placeholder-shown)": {
                         paddingTop: string;
-                        "& + label": {
+                        "& + label, & + div[data-lastpass-icon-root] + label": {
                             transform: string;
                         };
                     };
@@ -5913,7 +5913,7 @@ declare const theme: {
                         outline: string;
                         outlineColor: string;
                     };
-                    " + label": {
+                    " + label, + div[data-lastpass-icon-root] + label": {
                         fontSize: string[];
                         top: string;
                         left: any;
@@ -5926,7 +5926,7 @@ declare const theme: {
                     };
                     "&:not(:placeholder-shown)": {
                         paddingTop: string;
-                        "& + label": {
+                        "& + label, & + div[data-lastpass-icon-root] + label": {
                             transform: string;
                         };
                     };
@@ -6818,7 +6818,7 @@ declare const theme: {
                     outline: string;
                     outlineColor: string;
                 };
-                " + label": {
+                " + label, + div[data-lastpass-icon-root] + label": {
                     fontSize: string[];
                     top: string;
                     left: any;

package/dist/index.js

@@ -1972,7 +1972,7 @@ var init_PhoneNumberInput = __esm({
         ...boxProps
       }, ref) => {
         const { t: t2 } = useTranslation();
-        const label = externalLabel ?? isOptional ? t2(texts5.phoneNumberOptional) : t2(texts5.phoneNumber);
+        const label = externalLabel ?? (isOptional ? t2(texts5.phoneNumberOptional) : t2(texts5.phoneNumber));
         const [value, onChange] = react.useControllableState({
           value: externalValue,
           onChange: externalOnChange,
@@ -14421,7 +14421,7 @@ var init_input_utils = __esm({
             ...baseBorder("hover", props)
           }
         },
-        " + label": {
+        " + label, + div[data-lastpass-icon-root] + label": {
           fontSize: ["mobile.sm", "desktop.sm"],
           top: "2px",
           left: props.paddingLeft || props.pl || 3,
@@ -14434,7 +14434,7 @@ var init_input_utils = __esm({
         },
         "&:not(:placeholder-shown)": {
           paddingTop: "1rem",
-          "& + label": {
+          "& + label, & + div[data-lastpass-icon-root] + label": {
             transform: "scale(0.825) translateY(-10px)"
           }
         }

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-Q3JX25BX.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-LA5DSNRV.mjs';

package/package.json

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

package/src/input/PhoneNumberInput.tsx

@@ -59,9 +59,8 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
   ) => {
     const { t } = useTranslation();
     const label =
-      externalLabel ?? isOptional
-        ? t(texts.phoneNumberOptional)
-        : t(texts.phoneNumber);
+      externalLabel ??
+      (isOptional ? t(texts.phoneNumberOptional) : t(texts.phoneNumber));
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,

package/src/theme/utils/input-utils.ts

@@ -90,7 +90,7 @@ export const inputBaseStyle = (props: StyleFunctionProps) => ({
         ...baseBorder("hover", props),
       },
     },
-    " + label": {
+    " + label, + div[data-lastpass-icon-root] + label": {
       fontSize: ["mobile.sm", "desktop.sm"],
       top: "2px",
       left: props.paddingLeft || props.pl || 3,
@@ -103,7 +103,7 @@ export const inputBaseStyle = (props: StyleFunctionProps) => ({
     },
     "&:not(:placeholder-shown)": {
       paddingTop: "1rem",
-      "& + label": {
+      "& + label, & + div[data-lastpass-icon-root] + label": {
         transform: "scale(0.825) translateY(-10px)",
       },
     },