@onereach/ui-components 5.0.1 → 5.0.2-beta.3143.0

package/dist/bundled/v3/components/OrTooltipV3/index.js

@@ -1,15 +1,15 @@
-export { s as OrTooltipV3 } from '../../OrTooltip.vue_vue_type_script_lang-215def44.js';
+export { s as OrTooltipV3 } from '../../OrTooltip.vue_vue_type_script_lang-b5f4ee27.js';
 export { PopoverPlacement as TooltipPlacement } from '../OrPopoverV3/props.js';
 import 'vue-demi';
 import './styles.js';
 import '../OrPopoverV3/OrPopover.js';
-import '../../OrPopover.vue_vue_type_script_lang-cc1ee134.js';
+import '../../OrPopover.vue_vue_type_script_lang-d93eccdc.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../../index-929e224a.js';
 import '../../index-f4d8e24c.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
-import '../../OrBottomSheet.vue_vue_type_script_lang-d6609a26.js';
+import '../../OrBottomSheet.vue_vue_type_script_lang-5b03a234.js';
 import '../OrBottomSheetV3/hooks/useBottomSheetSwipeState.js';
 import '../OrBottomSheetV3/props.js';
 import '../../hooks/useTheme.js';

package/dist/bundled/v3/components/index.js

@@ -2,7 +2,7 @@ export { s as OrAvatar } from '../OrAvatar.vue_vue_type_script_lang-b0f87dcb.js'
 export { OR_AVATAR_SIZE } from './OrAvatar/constants.js';
 export { s as OrAvatarV3 } from '../OrAvatar.vue_vue_type_script_lang-bf7bcbe2.js';
 export { AvatarColor, AvatarSize } from './OrAvatarV3/props.js';
-export { s as OrBottomSheetV3 } from '../OrBottomSheet.vue_vue_type_script_lang-d6609a26.js';
+export { s as OrBottomSheetV3 } from '../OrBottomSheet.vue_vue_type_script_lang-5b03a234.js';
 export { BottomSheetVariant } from './OrBottomSheetV3/props.js';
 export { s as OrButton } from '../OrButton.vue_vue_type_script_lang-e9677805.js';
 export { OrButtonColors, OrButtonSizes, OrButtonViews } from './OrButton/constants.js';
@@ -14,7 +14,7 @@ export { ButtonColor, ButtonType, ButtonVariant } from './OrButtonV3/props.js';
 export { s as OrCard } from '../OrCard.vue_vue_type_script_lang-81561dd8.js';
 export { CARD_COLLECTION_LAYOUT } from './OrCardCollection/constants.js';
 export { s as OrCardCollection } from '../OrCardCollection.vue_vue_type_script_lang-8e3994b3.js';
-export { s as OrCardCollectionV3 } from '../OrCardCollection.vue_vue_type_script_lang-40124ef0.js';
+export { s as OrCardCollectionV3 } from '../OrCardCollection.vue_vue_type_script_lang-29cb3a36.js';
 export { CardCollectionView, defaultViewModes, gridView, listView } from './OrCardCollectionV3/props.js';
 export { s as OrCardV3 } from '../OrCard.vue_vue_type_script_lang-b204e541.js';
 export { s as OrCheckbox } from '../OrCheckbox.vue_vue_type_script_lang-4ace6532.js';
@@ -25,7 +25,7 @@ export { s as OrChip } from '../OrChip.vue_vue_type_script_lang-dff95c69.js';
 export { s as OrChips } from '../OrChips.vue_vue_type_script_lang-87ec7b86.js';
 export { s as OrCode } from '../OrCode.vue_vue_type_script_lang-65a51d44.js';
 export { OrCodeLanguages } from './OrCode/constants.js';
-export { s as OrCodeV3 } from '../OrCode.vue_vue_type_script_lang-a99a2768.js';
+export { s as OrCodeV3 } from '../OrCode.vue_vue_type_script_lang-a339ca23.js';
 export { CodeLanguage } from './OrCodeV3/props.js';
 export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-ff19651e.js';
 export { s as OrColorPicker } from '../OrColorPicker.vue_vue_type_script_lang-1a7b89dd.js';
@@ -33,12 +33,12 @@ export { amber, black, blue, blueGrey, brown, cyan, deepOrange, deepPurple, gree
 export { s as OrCombinedInputV3 } from '../OrCombinedInput.vue_vue_type_script_lang-cb7a88f3.js';
 export { InputBoxSize as CombinedInputSize, InputBoxSize as DatePickerSize, InputBoxSize as DateTimePickerSize, InputBoxSize, InputBoxVariant, InputBoxSize as InputSize, InputBoxSize as SearchSize, InputBoxSize as SelectSize, InputBoxSize as TagInputSize, InputBoxSize as TextareaSize, InputBoxSize as TimePickerSize } from './OrInputBoxV3/props.js';
 export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-44206a89.js';
-export { s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-3f6484d7.js';
+export { s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-5fd7ece5.js';
 export { ConfirmType } from './OrConfirmV3/props.js';
-export { s as OrDatePickerV3 } from '../OrDatePicker.vue_vue_type_script_lang-15cde361.js';
+export { s as OrDatePickerV3 } from '../OrDatePicker.vue_vue_type_script_lang-20e06c4b.js';
 export { s as OrDateTimePicker } from '../OrDateTimePicker.vue_vue_type_script_lang-522aa936.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
-export { s as OrDateTimePickerV3 } from '../OrDateTimePicker.vue_vue_type_script_lang-e3f9a844.js';
+export { s as OrDateTimePickerV3 } from '../OrDateTimePicker.vue_vue_type_script_lang-c6d3d49a.js';
 export { DateTimePickerTimeFormat, DateTimePickerTimeFormat as TimePickerFormat } from './OrDateTimePickerV3/props.js';
 export { s as OrEmptyStateV3 } from '../OrEmptyState.vue_vue_type_script_lang-2c1f09ef.js';
 export { EmptyStateSize } from './OrEmptyStateV3/props.js';
@@ -57,20 +57,20 @@ export { s as OrHint } from '../OrHint.vue_vue_type_script_lang-5eb3ee22.js';
 export { s as OrHintV3 } from '../OrHint.vue_vue_type_script_lang-0f5e8377.js';
 export { s as OrIcon } from '../OrIcon.vue_vue_type_script_lang-a705992d.js';
 export { OrIconColors, OrIconType } from './OrIcon/constants.js';
-export { s as OrIconButtonV3 } from '../OrIconButton.vue_vue_type_script_lang-da2a6044.js';
+export { s as OrIconButtonV3 } from '../OrIconButton.vue_vue_type_script_lang-c70a3751.js';
 export { IconSize as IconButtonSize, IconSize, IconVariant } from './OrIconV3/props.js';
 export { IconButtonColor } from './OrIconButtonV3/props.js';
 export { s as OrIconV3 } from '../OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 export { s as OrInlineInputBoxV3 } from '../OrInlineInputBox.vue_vue_type_script_lang-fe99c485.js';
 export { InlineInputBoxSize, InlineInputBoxSize as InlineInputSize } from './OrInlineInputBoxV3/props.js';
-export { s as OrInlineInputV3 } from '../OrInlineInput.vue_vue_type_script_lang-8400fa8c.js';
+export { s as OrInlineInputV3 } from '../OrInlineInput.vue_vue_type_script_lang-3f9a05d4.js';
 export { InlineInputType } from './OrInlineInputV3/props.js';
 export { s as OrInlineTextEdit } from '../OrInlineTextEdit.vue_vue_type_script_lang-34edf215.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes } from './OrInlineTextEdit/constants.js';
-export { s as OrInlineTextareaV3 } from '../OrInlineTextarea.vue_vue_type_script_lang-d6a348da.js';
+export { s as OrInlineTextareaV3 } from '../OrInlineTextarea.vue_vue_type_script_lang-1b2375c7.js';
 export { s as OrInput } from '../OrInput.vue_vue_type_script_lang-4f4792c2.js';
 export { s as OrInputBoxV3 } from '../OrInputBox.vue_vue_type_script_lang-137cb650.js';
-export { s as OrInputV3 } from '../OrInput.vue_vue_type_script_lang-0ddddd27.js';
+export { s as OrInputV3 } from '../OrInput.vue_vue_type_script_lang-4d2f41e5.js';
 export { InputType } from './OrInputV3/props.js';
 export { s as OrLabel } from '../OrLabel.vue_vue_type_script_lang-6243e348.js';
 export { s as OrLabelV3 } from '../OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
@@ -84,40 +84,40 @@ export { LoaderViews } from './OrLoader/constants.js';
 export { s as OrLoaderV3 } from '../OrLoader.vue_vue_type_script_lang-0395ad21.js';
 export { LoaderColor, LoaderSize, LoaderVariant } from './OrLoaderV3/props.js';
 export { s as OrMenuItemV3 } from '../OrMenuItem.vue_vue_type_script_lang-1785286a.js';
-export { s as OrMenuV3 } from '../OrMenu.vue_vue_type_script_lang-6d3459d2.js';
+export { s as OrMenuV3 } from '../OrMenu.vue_vue_type_script_lang-0d28fd5b.js';
 export { PopoverPlacement as MenuPlacement, PopoverPlacement, PopoverVariant, PopoverPlacement as TooltipPlacement } from './OrPopoverV3/props.js';
 export { s as OrModal } from '../OrModal.vue_vue_type_script_lang-00d3feb3.js';
 export { OrModalSizes } from './OrModal/constants.js';
-export { s as OrModalV3 } from '../OrModal.vue_vue_type_script_lang-9db0be3b.js';
+export { s as OrModalV3 } from '../OrModal.vue_vue_type_script_lang-f28c8a71.js';
 export { ModalSize } from './OrModalV3/props.js';
 export { s as OrNotification } from '../OrNotification.vue_vue_type_script_lang-95906f61.js';
 export { OR_NOTIFICATION_SIZE, OR_NOTIFICATION_TYPE } from './OrNotification/constants.js';
-export { s as OrNotificationV3 } from '../OrNotification.vue_vue_type_script_lang-01382876.js';
+export { s as OrNotificationV3 } from '../OrNotification.vue_vue_type_script_lang-c212a660.js';
 export { NotificationVariant } from './OrNotificationV3/props.js';
 export { s as OrNumberInput } from '../OrNumberInput.vue_vue_type_script_lang-a4a77c3d.js';
 export { s as OrOverflowMenu } from '../OrOverflowMenu.vue_vue_type_script_lang-29b25a03.js';
 export { s as OrOverlay } from '../OrOverlay.vue_vue_type_script_lang-2f5d626d.js';
 export { s as OrOverlayV3 } from '../OrOverlay.vue_vue_type_script_lang-2da128a3.js';
-export { s as OrPaginationV3 } from '../OrPagination.vue_vue_type_script_lang-4e054df4.js';
+export { s as OrPaginationV3 } from '../OrPagination.vue_vue_type_script_lang-73549562.js';
 export { s as OrPassword } from '../OrPassword.vue_vue_type_script_lang-aa4277de.js';
-export { s as OrPopoverV3 } from '../OrPopover.vue_vue_type_script_lang-cc1ee134.js';
+export { s as OrPopoverV3 } from '../OrPopover.vue_vue_type_script_lang-d93eccdc.js';
 export { s as OrProgress } from '../OrProgress.vue_vue_type_script_lang-89224310.js';
 export { OrProgressColors, OrProgressTypes } from './OrProgress/constants.js';
-export { s as OrProgressV3 } from '../OrProgress.vue_vue_type_script_lang-5573d34e.js';
+export { s as OrProgressV3 } from '../OrProgress.vue_vue_type_script_lang-e49704b0.js';
 export { ProgressColor, ProgressType } from './OrProgressV3/props.js';
 export { s as OrRadio } from '../OrRadio.vue_vue_type_script_lang-0c087270.js';
 export { s as OrRadioGroup } from '../OrRadioGroup.vue_vue_type_script_lang-75b6c81b.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup.vue_vue_type_script_lang-d7f6f8ca.js';
 export { s as OrRadioV3 } from '../OrRadio.vue_vue_type_script_lang-48c2bc6b.js';
 export { s as OrSearch } from '../OrSearch.vue_vue_type_script_lang-f7431083.js';
-export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-495149b0.js';
+export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-0e30c704.js';
 export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-3a7df112.js';
 export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-2516881b.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-cb556343.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-4ab41107.js';
 export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-81941fe6.js';
 export { OrSidebarSide } from './OrSidebar/constants.js';
-export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-a7103da5.js';
+export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-6eddb9d6.js';
 export { OrSidebarPlacement } from './OrSidebarV3/props.js';
 export { s as OrSkeletonCircle } from '../OrSkeletonCircle.vue_vue_type_script_lang-b768e00d.js';
 export { s as OrSkeletonRect } from '../OrSkeletonRect.vue_vue_type_script_lang-32f819ad.js';
@@ -127,7 +127,7 @@ export { s as OrSkeletonCircleV3 } from '../OrSkeletonCircle.vue_vue_type_script
 export { s as OrSkeletonRectV3 } from '../OrSkeletonRect.vue_vue_type_script_lang-3a1d6b32.js';
 export { s as OrSkeletonTextV3 } from '../OrSkeletonText.vue_vue_type_script_lang-6703fb3a.js';
 export { s as OrSlider } from '../OrSlider.vue_vue_type_script_lang-dae8cea8.js';
-export { s as OrSortingV3 } from '../OrSorting.vue_vue_type_script_lang-a43c7a38.js';
+export { s as OrSortingV3 } from '../OrSorting.vue_vue_type_script_lang-ed1409be.js';
 export { s as OrStepper } from '../OrStepper.vue_vue_type_script_lang-2c9156ce.js';
 export { s as OrSwitch } from '../OrSwitch.vue_vue_type_script_lang-3ef06bbd.js';
 export { s as OrSwitchV3 } from '../OrSwitch.vue_vue_type_script_lang-ee55263f.js';
@@ -135,13 +135,13 @@ export { s as OrTab } from '../OrTab.vue_vue_type_script_lang-d9ee65b6.js';
 export { s as OrTabHeaderItem } from '../OrTabHeaderItem.vue_vue_type_script_lang-e1a0b91f.js';
 export { s as OrTabV3 } from '../OrTab.vue_vue_type_script_lang-8af58197.js';
 export { s as OrTabs } from '../OrTabs.vue_vue_type_script_lang-9129d34b.js';
-export { s as OrTabsV3 } from '../OrTabs.vue_vue_type_script_lang-3831d139.js';
+export { s as OrTabsV3 } from '../OrTabs.vue_vue_type_script_lang-7a06bbed.js';
 export { TabsVariant } from './OrTabsV3/props.js';
 export { s as OrTag } from '../OrTag.vue_vue_type_script_lang-c0542bcb.js';
-export { s as OrTagInputV3 } from '../OrTagInput.vue_vue_type_script_lang-9f594179.js';
-export { s as OrTagV3 } from '../OrTag.vue_vue_type_script_lang-206b5c7c.js';
+export { s as OrTagInputV3 } from '../OrTagInput.vue_vue_type_script_lang-19985356.js';
+export { s as OrTagV3 } from '../OrTag.vue_vue_type_script_lang-c13be6d8.js';
 export { TagColor, TagVariant } from './OrTagV3/props.js';
-export { s as OrTagsV3 } from '../OrTags.vue_vue_type_script_lang-de78876f.js';
+export { s as OrTagsV3 } from '../OrTags.vue_vue_type_script_lang-9b317da0.js';
 export { default as OrTeleport } from './OrTeleport/OrTeleport.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 export { s as OrTextV3 } from '../OrText.vue_vue_type_script_lang-6ce019db.js';
@@ -149,21 +149,21 @@ export { s as OrTextarea } from '../OrTextarea.vue_vue_type_script_lang-a367f7df
 export { s as OrTextareaV3 } from '../OrTextarea.vue_vue_type_script_lang-7562cca1.js';
 export { s as OrTextbox } from '../OrTextbox.vue_vue_type_script_lang-b1385d8a.js';
 export { TextboxTypes } from './OrTextbox/constants.js';
-export { s as OrTimePickerV3 } from '../OrTimePicker.vue_vue_type_script_lang-7de3a004.js';
+export { s as OrTimePickerV3 } from '../OrTimePicker.vue_vue_type_script_lang-bf35d4fc.js';
 export { default as OrToast } from './OrToast/OrToast.js';
 export { s as OrToastContainer } from '../OrToastContainer.vue_vue_type_script_lang-312fedf8.js';
 export { default as useToast } from './OrToast/composable/useToast.js';
 export { default as useQueue } from './OrToast/composable/useQueue.js';
 export { PositionsX, PositionsY, ToastType, TransitionType } from './OrToast/constants.js';
 export { default as OrToastV3 } from './OrToastV3/OrToast.js';
-export { s as OrToastContainerV3 } from '../OrToastContainer.vue_vue_type_script_lang-64d27360.js';
+export { s as OrToastContainerV3 } from '../OrToastContainer.vue_vue_type_script_lang-d5986739.js';
 export { default as useToastV3 } from './OrToastV3/composable/useToast.js';
 export { default as useQueueV3 } from './OrToastV3/composable/useQueue.js';
 export { t as TypesV3 } from '../types-668300dd.js';
 export { p as PropsV3 } from '../props-7be029c7.js';
 export { s as OrTooltip } from '../OrTooltip.vue_vue_type_script_lang-e7452e43.js';
 export { s as OrTooltipContent } from '../OrTooltipContent.vue_vue_type_script_lang-4c1afacb.js';
-export { s as OrTooltipV3 } from '../OrTooltip.vue_vue_type_script_lang-215def44.js';
+export { s as OrTooltipV3 } from '../OrTooltip.vue_vue_type_script_lang-b5f4ee27.js';
 export { s as OrTreeV3 } from '../OrTree.vue_vue_type_script_lang-008ef9b1.js';
 export { TreeNodeDropPosition } from './OrTreeV3/types.js';
 import 'vue-demi';
@@ -273,7 +273,7 @@ import '../index-500b3ace.js';
 import './OrButtonV2/OrButton.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-47d89402.js';
+import '../OrDateTimePickerMonthSelect-37fef5d9.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-d9eef487.js';
 import './OrDatePickerV3/styles.js';

package/dist/bundled/v3/hooks/useResponsive/useResponsive.d.ts

@@ -1,5 +1,5 @@
 declare function useResponsive(): {
-    isMobile: import("vue-demi").Ref<boolean>;
-    isDesktop: import("vue-demi").Ref<boolean>;
+    isDesktop: import("vue-demi").ComputedRef<boolean>;
+    isMobile: import("vue-demi").ComputedRef<boolean>;
 };
 export default useResponsive;

package/dist/bundled/v3/hooks/useResponsive/useResponsive.js

@@ -1,13 +1,47 @@
 import { k as useMediaQuery } from '../../index-929e224a.js';
-import { ref } from 'vue-demi';
+import { getCurrentInstance, ref, onMounted, isVue3, computed } from 'vue-demi';
 import '../../index-f4d8e24c.js';
 
+var tailwindScreens = {
+  'sm': '640px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1280px',
+  '2xl': '1536px',
+};
+
 function useResponsive() {
-  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
-  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
+  const currentInstance = getCurrentInstance();
+  const currentRootElement = ref();
+  onMounted(() => {
+    if (currentInstance) {
+      const element = currentInstance.vnode[isVue3 ? 'el' : 'elm'];
+      if (element instanceof Element) {
+        currentRootElement.value = element;
+      }
+    }
+  });
+  const desktopQuery = useMediaQuery(`(min-width: ${tailwindScreens.md})`);
+  const isDesktop = computed(() => {
+    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
+  });
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+  function isForcedDesktop(element) {
+    var _a, _b;
+    if (!element) {
+      return false;
+    }
+    const forcedScreens = (_a = element.getAttribute('force-screen')) === null || _a === void 0 ? void 0 : _a.split(/\s+/);
+    if (forcedScreens === null || forcedScreens === void 0 ? void 0 : forcedScreens.some(forcedScreen => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
+      return true;
+    }
+    return isForcedDesktop((_b = element.parentElement) !== null && _b !== void 0 ? _b : undefined);
+  }
   return {
-    isMobile,
-    isDesktop
+    isDesktop,
+    isMobile
   };
 }
 

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

@@ -1927,6 +1927,20 @@ var require$$2 = {
 	SpacePatterns: SpacePatterns
 };
 
+module.exports = {
+  'sm': '640px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1280px',
+  '2xl': '1536px'
+};
+
+var tailwindScreens = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var require$$3 = /*@__PURE__*/getDefaultExportFromNamespaceIfNotNamed(tailwindScreens);
+
 const plugin = plugin$1;
 
 const {
@@ -1950,17 +1964,13 @@ const {
   typeStyles: typographyTokens,
 } = require$$2;
 
+const screens = require$$3;
+
 var tailwind_config_preset = {
   darkMode: ['class', '[data-theme="dark"]'],
 
   theme: {
-    screens: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
-    },
+    screens: {},
 
     spacing: {
       ...parseSpacingTokens(spacingTokens),
@@ -2117,6 +2127,16 @@ var tailwind_config_preset = {
   plugins: [
     // Core
     plugin(({ addVariant, addUtilities }) => {
+      const breakpoints = Object.keys(screens);
+
+      breakpoints.forEach((breakpoint) => {
+        addVariant(breakpoint, [
+          `@media (min-width: ${screens[breakpoint]})`,
+          `[force-screen~="${breakpoint}"] &`,
+          `&[force-screen~="${breakpoint}"]`,
+        ]);
+      });
+
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -2245,7 +2265,21 @@ var tailwind_config_preset = {
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
             // Desktop
-            [`@media (min-width: ${theme('screens.md')})`]: {
+            [`@media (min-width: ${screens.md})`]: {
+              fontFamily: theme(`fontFamily.${value}`),
+              fontWeight: theme(`fontWeight.${value}`),
+              fontSize: fontSizeDesktop,
+              lineHeight: optionsDesktop?.lineHeight,
+            },
+
+            '[force-screen~="md"] &': {
+              fontFamily: theme(`fontFamily.${value}`),
+              fontWeight: theme(`fontWeight.${value}`),
+              fontSize: fontSizeDesktop,
+              lineHeight: optionsDesktop?.lineHeight,
+            },
+
+            '&[force-screen~="md"]': {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
               fontSize: fontSizeDesktop,
@@ -2323,7 +2357,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
                 },
@@ -2365,7 +2399,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
                 },
@@ -2407,7 +2441,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
                 },
@@ -2449,7 +2483,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   color: theme(`textColor.${token}-hover` + suffix),
                 },