@onereach/ui-components 4.11.3-beta.2973.0 → 4.12.0

package/dist/bundled/v2/hooks/useTheme.js

@@ -2244,6 +2244,7 @@ var tailwind_config_preset = {
             fontSize: fontSizeMobile ?? fontSizeDesktop,
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
+            // Desktop
             [`@media (min-width: ${theme('screens.md')})`]: {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
@@ -2317,12 +2318,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  backgroundColor: theme(`backgroundColor.${token}` + suffix),
+                },
               },
             },
 
@@ -2348,12 +2360,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+                },
               },
             },
 
@@ -2379,12 +2402,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+                },
               },
             },
 
@@ -2410,12 +2444,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 color: theme(`textColor.${token}-hover` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                color: theme(`textColor.${token}` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  color: theme(`textColor.${token}-hover` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  color: theme(`textColor.${token}-hover` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  color: theme(`textColor.${token}` + suffix),
+                },
               },
             },