@vygruppen/spor-react 3.4.2 → 3.4.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.4.2 build
+> @vygruppen/spor-react@3.4.4 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-DOHLC4LS.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-QBIZVUPL.mjs".
+CJS dist/index.js 903.84 KB
+CJS ⚡️ Build success in 6056ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-FTCKNVSB.mjs 350.82 KB
-ESM dist/chunk-DOHLC4LS.mjs             420.85 KB
-ESM ⚡️ Build success in 5055ms
-CJS dist/index.js 903.69 KB
-CJS ⚡️ Build success in 5056ms
-DTS ⚡️ Build success in 18301ms
+ESM dist/CountryCodeSelect-7GGNROZW.mjs 350.82 KB
+ESM dist/chunk-QBIZVUPL.mjs             420.97 KB
+ESM ⚡️ Build success in 6061ms
+DTS ⚡️ Build success in 22140ms
 DTS dist/index.d.ts 252.53 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 3.4.4
+
+### Patch Changes
+
+- 548d9b9f: Input: Make hover-effect work as expected over icons
+
+## 3.4.3
+
+### Patch Changes
+
+- 6a74c8ab: Change when we use desktop font sizes
+
 ## 3.4.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-FTCKNVSB.mjs → CountryCodeSelect-7GGNROZW.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-DOHLC4LS.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QBIZVUPL.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-DOHLC4LS.mjs → chunk-QBIZVUPL.mjs}

@@ -4692,7 +4692,7 @@ var Input = forwardRef(
     const formControlProps = useFormControlContext();
     const fallbackId = `input-${useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-    return /* @__PURE__ */ React49__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__default.createElement(InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__default.createElement(
+    return /* @__PURE__ */ React49__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__default.createElement(InputLeftElement, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React49__default.createElement(
       Input$1,
       {
         "data-attachable": true,
@@ -4703,7 +4703,7 @@ var Input = forwardRef(
         ref,
         placeholder: " "
       }
-    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
+    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
   }
 );
 var InputLeftElement2 = forwardRef(
@@ -5084,7 +5084,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-FTCKNVSB.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-7GGNROZW.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10878,6 +10878,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style.xxl["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style.xxl["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.xxl["font-family"],
@@ -10887,6 +10888,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style["xl-display"]["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style["xl-display"]["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style["xl-display"]["font-family"],
@@ -10896,6 +10898,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style["xl-sans"]["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style["xl-sans"]["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style["xl-sans"]["font-family"],
@@ -10905,6 +10908,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style.lg["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style.lg["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.lg["font-family"],
@@ -10914,6 +10918,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style.md["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style.md["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.md["font-family"],
@@ -10923,6 +10928,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style.sm["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style.sm["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.sm["font-family"],
@@ -10932,6 +10938,7 @@ var textStyles = {
     fontSize: [
       tokens10__default.font.style.xs["font-size"].mobile,
       null,
+      null,
       tokens10__default.font.style.xs["font-size"].desktop
     ],
     fontFamily: tokens10__default.font.style.xs["font-family"],

package/dist/index.js

@@ -5243,7 +5243,7 @@ var init_Input = __esm({
         const formControlProps = react.useFormControlContext();
         const fallbackId = `input-${React49.useId()}`;
         const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React49__namespace.default.createElement(
           react.Input,
           {
             "data-attachable": true,
@@ -5254,7 +5254,7 @@ var init_Input = __esm({
             ref,
             placeholder: " "
           }
-        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
+        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
       }
     );
   }
@@ -18821,6 +18821,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style.xxl["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style.xxl["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.xxl["font-family"],
@@ -18830,6 +18831,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style["xl-display"]["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style["xl-display"]["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style["xl-display"]["font-family"],
@@ -18839,6 +18841,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style["xl-sans"]["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style["xl-sans"]["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style["xl-sans"]["font-family"],
@@ -18848,6 +18851,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style.lg["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style.lg["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.lg["font-family"],
@@ -18857,6 +18861,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style.md["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style.md["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.md["font-family"],
@@ -18866,6 +18871,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style.sm["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style.sm["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.sm["font-family"],
@@ -18875,6 +18881,7 @@ var init_textStyles = __esm({
         fontSize: [
           tokens10__namespace.default.font.style.xs["font-size"].mobile,
           null,
+          null,
           tokens10__namespace.default.font.style.xs["font-size"].desktop
         ],
         fontFamily: tokens10__namespace.default.font.style.xs["font-family"],

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-DOHLC4LS.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-QBIZVUPL.mjs';

package/package.json

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

package/src/input/Input.tsx

@@ -40,7 +40,9 @@ export const Input = forwardRef<InputProps, "input">(
     const inputId = id ?? formControlProps?.id ?? fallbackId;
     return (
       <InputGroup position="relative">
-        {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
+        {leftIcon && (
+          <InputLeftElement pointerEvents="none">{leftIcon}</InputLeftElement>
+        )}
         <ChakraInput
           data-attachable
           paddingLeft={leftIcon ? 7 : undefined}
@@ -51,7 +53,11 @@ export const Input = forwardRef<InputProps, "input">(
           placeholder=" " // This is needed to make the label work as expected
         />
         <FormLabel htmlFor={inputId}>{label}</FormLabel>
-        {rightIcon && <InputRightElement>{rightIcon}</InputRightElement>}
+        {rightIcon && (
+          <InputRightElement pointerEvents="none">
+            {rightIcon}
+          </InputRightElement>
+        )}
       </InputGroup>
     );
   }

package/src/theme/foundations/textStyles.ts

@@ -5,6 +5,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style.xxl["font-size"].mobile,
       null,
+      null,
       tokens.font.style.xxl["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.xxl["font-family"],
@@ -14,6 +15,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style["xl-display"]["font-size"].mobile,
       null,
+      null,
       tokens.font.style["xl-display"]["font-size"].desktop,
     ],
     fontFamily: tokens.font.style["xl-display"]["font-family"],
@@ -23,6 +25,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style["xl-sans"]["font-size"].mobile,
       null,
+      null,
       tokens.font.style["xl-sans"]["font-size"].desktop,
     ],
     fontFamily: tokens.font.style["xl-sans"]["font-family"],
@@ -32,6 +35,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style.lg["font-size"].mobile,
       null,
+      null,
       tokens.font.style.lg["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.lg["font-family"],
@@ -41,6 +45,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style.md["font-size"].mobile,
       null,
+      null,
       tokens.font.style.md["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.md["font-family"],
@@ -50,6 +55,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style.sm["font-size"].mobile,
       null,
+      null,
       tokens.font.style.sm["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.sm["font-family"],
@@ -59,6 +65,7 @@ export const textStyles = {
     fontSize: [
       tokens.font.style.xs["font-size"].mobile,
       null,
+      null,
       tokens.font.style.xs["font-size"].desktop,
     ],
     fontFamily: tokens.font.style.xs["font-family"],