@onereach/ui-components 5.0.0 → 5.0.1-beta.3125.0

package/dist/esm/v3/components/or-tag-input-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagInputV3 } from '../../OrTagInput-b5f6be7c.js';
+export { s as OrTagInputV3 } from '../../OrTagInput-c38af944.js';
 export { I as TagInputSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
@@ -10,22 +10,22 @@ import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrError-c01d0c29.js';
 import 'vue';
 import '../../OrHint-06ab89d7.js';
-import '../../OrIconButton-65b1a004.js';
+import '../../OrIconButton-8c8935bc.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-6802b717.js';
+import '../../OrTooltip-69fe2f44.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-466a8297.js';
+import '../../OrPopover-d9038ff5.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
-import '../../useResponsive-a02e95b7.js';
+import '../../useResponsive-bb091958.js';
 import '../../OrBottomSheet-98aec82b.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-e23d13c8.js';
 import '../../OrLabel-4da56db0.js';
-import '../../OrTags-5feb7c2d.js';
+import '../../OrTags-f89c52a7.js';
 import '../../useOverflow-c856b7b7.js';
 import '../../OrButton-4a3c3e7b.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrTag-8fede185.js';
+import '../../OrTag-86e414a4.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/components/or-tag-v3/index.js

@@ -1,17 +1,17 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-8fede185.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-86e414a4.js';
 import 'vue-demi';
-import '../../OrIconButton-65b1a004.js';
+import '../../OrIconButton-8c8935bc.js';
 import '../../OrIcon-62793572.js';
 import 'vue';
-import '../../OrTooltip-6802b717.js';
+import '../../OrTooltip-69fe2f44.js';
 import '@vueuse/core';
 import '../../usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import '../../OrPopover-466a8297.js';
+import '../../OrPopover-d9038ff5.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
-import '../../useResponsive-a02e95b7.js';
+import '../../useResponsive-bb091958.js';
 import '../../OrBottomSheet-98aec82b.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../OrTeleport.vue3-8099178c.js';

package/dist/esm/v3/components/or-tags-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagsV3 } from '../../OrTags-5feb7c2d.js';
+export { s as OrTagsV3 } from '../../OrTags-f89c52a7.js';
 import 'vue-demi';
 import '../../useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -7,16 +7,16 @@ import 'tailwindcss/resolveConfig';
 import '../../OrButton-4a3c3e7b.js';
 import '../../OrLoader-b79022da.js';
 import 'vue';
-import '../../OrPopover-466a8297.js';
+import '../../OrPopover-d9038ff5.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../useResponsive-a02e95b7.js';
+import '../../useResponsive-bb091958.js';
 import '../../OrBottomSheet-98aec82b.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-e23d13c8.js';
-import '../../OrTag-8fede185.js';
-import '../../OrIconButton-65b1a004.js';
+import '../../OrTag-86e414a4.js';
+import '../../OrIconButton-8c8935bc.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-6802b717.js';
+import '../../OrTooltip-69fe2f44.js';

package/dist/esm/v3/components/or-time-picker-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-27be4172.js';
-export { D as TimePickerFormat } from '../../OrDateTimePicker-7b08665c.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-bb3b4031.js';
+export { D as TimePickerFormat } from '../../OrDateTimePicker-5e8d340a.js';
 export { I as TimePickerSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
@@ -7,24 +7,24 @@ import '@vueuse/core';
 import '../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import '../../OrDateTimePickerPopoverHeader-c3900e9a.js';
+import '../../OrDateTimePickerPopoverHeader-db012139.js';
 import 'vue';
 import '../../OrButton-4a3c3e7b.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrLabel-4da56db0.js';
-import '../../OrIconButton-65b1a004.js';
+import '../../OrIconButton-8c8935bc.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-6802b717.js';
+import '../../OrTooltip-69fe2f44.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-466a8297.js';
+import '../../OrPopover-d9038ff5.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
-import '../../useResponsive-a02e95b7.js';
+import '../../useResponsive-bb091958.js';
 import '../../OrBottomSheet-98aec82b.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-e23d13c8.js';
 import '../../OrMenuItem-54062d59.js';
-import '../../OrMenu-7943ee1f.js';
+import '../../OrMenu-7d29aef5.js';
 import '../../OrError-c01d0c29.js';
 import '../../OrHint-06ab89d7.js';

package/dist/esm/v3/components/or-toast-v3/index.js

@@ -1,4 +1,4 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-94be8310.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-74a33418.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-5aa9dc05.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -7,13 +7,13 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import '../../OrTeleport.vue3-8099178c.js';
 import 'vue';
-import '../../OrIconButton-65b1a004.js';
+import '../../OrIconButton-8c8935bc.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-6802b717.js';
+import '../../OrTooltip-69fe2f44.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-466a8297.js';
+import '../../OrPopover-d9038ff5.js';
 import '@floating-ui/dom';
-import '../../useResponsive-a02e95b7.js';
+import '../../useResponsive-bb091958.js';
 import '../../OrBottomSheet-98aec82b.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../useTheme-e23d13c8.js';

package/dist/esm/v3/components/or-toast-v3/or-toast-container-v3/index.js

@@ -1,4 +1,4 @@
-export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-94be8310.js';
+export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-74a33418.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../../useToast-5aa9dc05.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -7,13 +7,13 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import '../../../OrTeleport.vue3-8099178c.js';
 import 'vue';
-import '../../../OrIconButton-65b1a004.js';
+import '../../../OrIconButton-8c8935bc.js';
 import '../../../OrIcon-62793572.js';
-import '../../../OrTooltip-6802b717.js';
+import '../../../OrTooltip-69fe2f44.js';
 import '../../../usePopoverState-b92c698b.js';
-import '../../../OrPopover-466a8297.js';
+import '../../../OrPopover-d9038ff5.js';
 import '@floating-ui/dom';
-import '../../../useResponsive-a02e95b7.js';
+import '../../../useResponsive-bb091958.js';
 import '../../../OrBottomSheet-98aec82b.js';
 import '../../../OrOverlay-99e696e8.js';
 import '../../../useTheme-e23d13c8.js';

package/dist/esm/v3/components/or-tooltip-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrTooltipV3 } from '../../OrTooltip-6802b717.js';
-export { P as TooltipPlacement } from '../../OrPopover-466a8297.js';
+export { s as OrTooltipV3 } from '../../OrTooltip-69fe2f44.js';
+export { P as TooltipPlacement } from '../../OrPopover-d9038ff5.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../usePopoverState-b92c698b.js';
@@ -8,7 +8,7 @@ import 'tailwindcss/resolveConfig';
 import 'vue';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
-import '../../useResponsive-a02e95b7.js';
+import '../../useResponsive-bb091958.js';
 import '../../OrBottomSheet-98aec82b.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../OrTeleport.vue3-8099178c.js';

package/dist/esm/v3/hooks/index.js

@@ -3,7 +3,7 @@ export { u as useElevation } from '../useElevation-a50ec347.js';
 export { u as useOverflow } from '../useOverflow-c856b7b7.js';
 export { u as usePopoverState } from '../usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from '../useProxyModelValue-940010d2.js';
-export { u as useResponsive } from '../useResponsive-a02e95b7.js';
+export { u as useResponsive } from '../useResponsive-bb091958.js';
 export { u as useTheme } from '../useTheme-e23d13c8.js';
 export { u as useToggle } from '../useToggle-c04fc920.js';
 export { u as useValidationAttributes } from '../useValidationAttributes-d1abbe34.js';

package/dist/esm/v3/hooks/useResponsive/index.js

@@ -1,3 +1,3 @@
-export { u as useResponsive } from '../../useResponsive-a02e95b7.js';
+export { u as useResponsive } from '../../useResponsive-bb091958.js';
 import '@vueuse/core';
 import 'vue-demi';

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

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

package/dist/esm/v3/index.js

@@ -7,7 +7,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-4a3c3e7b.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-5a10ca80.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-0fa70f61.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-6c054793.js';
@@ -16,16 +16,16 @@ export { s as OrCheckboxV3 } from './OrCheckbox-09f62aab.js';
 export { s as OrChip } from './OrChip-74e27265.js';
 export { s as OrChips } from './OrChips-348b13e4.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-0aadc737.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-98aceeef.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-a2756848.js';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-252f482b.js';
 export { s as OrCombinedInputV3 } from './OrCombinedInput-2800ee8b.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-912a6254.js';
 export { s as OrConfirm } from './OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-8d0351b9.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-819007d7.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-8f46dfbf.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-dfb9c29e.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-7b08665c.js';
+export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-5e8d340a.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
@@ -37,14 +37,14 @@ export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-9f581
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-06ab89d7.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-f7130a5c.js';
-export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-65b1a004.js';
+export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-8c8935bc.js';
 export { I as IconButtonSize, I as IconSize, a as IconVariant, s as OrIconV3 } from './OrIcon-62793572.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3 } from './OrInlineInputBox-01fb2cb2.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-1d8b7ba7.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-d3d3c164.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a3c4c7dc.js';
-export { s as OrInlineTextareaV3 } from './OrInlineTextarea-384e66cd.js';
+export { s as OrInlineTextareaV3 } from './OrInlineTextarea-a7784e3f.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-cfc9d445.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-ed408a17.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4da56db0.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-dcae31fb.js';
@@ -53,32 +53,32 @@ export { s as OrListOfInputs } from './OrListOfInputs-f8740785.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d28a8ebf.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b79022da.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-54062d59.js';
-export { s as OrMenuV3 } from './OrMenu-7943ee1f.js';
-export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-466a8297.js';
+export { s as OrMenuV3 } from './OrMenu-7d29aef5.js';
+export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-d9038ff5.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-b2060770.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-fb598e97.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-6168a725.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-1b28dd4a.js';
-export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-a1de8289.js';
+export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-cb035267.js';
 export { s as OrNumberInput } from './OrNumberInput-e9dcdcbd.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-440ddf3e.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-99e696e8.js';
-export { s as OrPaginationV3 } from './OrPagination-0dd5c8f0.js';
+export { s as OrPaginationV3 } from './OrPagination-c8cf6c42.js';
 export { s as OrPassword } from './OrPassword-311406fa.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-aa2ea84b.js';
-export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-a54a42c0.js';
+export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-c3c56efd.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-58c0214c.js';
 export { s as OrRadioV3 } from './OrRadio-7b722b16.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from './OrSearch-c823ee5e.js';
+export { s as OrSearchV3 } from './OrSearch-d5ae141b.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-d4bbddf1.js';
+export { s as OrSelectV3 } from './OrSelect-378b8a08.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
-export { s as OrSidebarV3 } from './OrSidebar-d8e70813.js';
-export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-7a9f76cf.js';
+export { s as OrSidebarV3 } from './OrSidebar-8c7f2a8c.js';
+export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-405f2219.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-c694574e.js';
 export { s as OrSkeletonText } from './OrSkeletonText-9a800de4.js';
@@ -87,7 +87,7 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-1eae069b.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-ba5df861.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-3c3207d0.js';
 export { s as OrSlider } from './OrSlider-b7bd588e.js';
-export { s as OrSortingV3 } from './OrSorting-d5f3e077.js';
+export { s as OrSortingV3 } from './OrSorting-4548f7f4.js';
 export { s as OrStepper } from './OrStepper-4943002c.js';
 export { s as OrSwitch } from './OrSwitch-fb864132.js';
 export { s as OrSwitchV3 } from './OrSwitch-a6efd081.js';
@@ -95,25 +95,25 @@ export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from './OrTab-2d567d8e.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-83e4477c.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-fb237e6a.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-b5f6be7c.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-8fede185.js';
-export { s as OrTagsV3 } from './OrTags-5feb7c2d.js';
+export { s as OrTagInputV3 } from './OrTagInput-c38af944.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-86e414a4.js';
+export { s as OrTagsV3 } from './OrTags-f89c52a7.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
 export { s as OrTextareaV3 } from './OrTextarea-6c471ccd.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-fe62c6c3.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-27be4172.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-bb3b4031.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-94be8310.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-74a33418.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9dc05.js';
 export { s as OrTooltip } from './OrTooltip-7ac03028.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
-export { s as OrTooltipV3 } from './OrTooltip-6802b717.js';
+export { s as OrTooltipV3 } from './OrTooltip-69fe2f44.js';
 export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-a0e57f4e.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
@@ -121,7 +121,7 @@ export { u as useElevation } from './useElevation-a50ec347.js';
 export { u as useOverflow } from './useOverflow-c856b7b7.js';
 export { u as usePopoverState } from './usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-export { u as useResponsive } from './useResponsive-a02e95b7.js';
+export { u as useResponsive } from './useResponsive-bb091958.js';
 export { u as useTheme } from './useTheme-e23d13c8.js';
 export { u as useToggle } from './useToggle-c04fc920.js';
 export { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
@@ -149,7 +149,7 @@ import '@codemirror/lang-markdown';
 import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
-import './OrDateTimePickerPopoverHeader-c3900e9a.js';
+import './OrDateTimePickerPopoverHeader-db012139.js';
 import 'lodash/padStart';
 import '@floating-ui/dom';
 import 'lodash/cloneDeep';

package/dist/esm/v3/{types-94be8310.js → types-74a33418.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-5aa9dc05.js';
-import { s as script$2 } from './OrIconButton-65b1a004.js';
+import { s as script$2 } from './OrIconButton-8c8935bc.js';
 import { s as script$3 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/useResponsive-bb091958.js

@@ -0,0 +1,32 @@
+import { useMediaQuery } from '@vueuse/core';
+import { computed } from 'vue-demi';
+
+function useResponsive(element) {
+  const isDesktop = computed(() => {
+    return isForcedDesktop(element.value) || useMediaQuery('(min-width: 768px)').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);
+  }
+  console.log({
+    isDesktop: isDesktop.value,
+    isMobile: isMobile.value
+  });
+  return {
+    isDesktop,
+    isMobile
+  };
+}
+
+export { useResponsive as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.0.0",
+  "version": "5.0.1-beta.3125.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^3.0.0",
+    "@onereach/styles": "^3.0.1-beta.3125.0",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -154,6 +154,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "f2027e20f479d18f825b0118d90b7a40e87b96fd"
+  }
 }

package/src/components/or-input-v3/OrInput.vue

@@ -262,8 +262,6 @@ export default defineComponent({
 
     const disclosed = ref(false);
 
-    const { isMobile } = useResponsive();
-
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -273,6 +271,9 @@ export default defineComponent({
       control.value?.blur();
     }
 
+    // Helpers
+    const { isMobile } = useResponsive(root);
+
     return {
       root,
       control,
@@ -283,9 +284,9 @@ export default defineComponent({
       currentLength,
       maxLength,
       disclosed,
-      isMobile,
       focus,
       blur,
+      isMobile,
     };
   },
 });

package/src/components/or-pagination-v3/OrPagination.vue

@@ -138,8 +138,6 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    const { isDesktop, isMobile } = useResponsive();
-
     // Refs
     const root = ref<HTMLElement>();
 
@@ -264,10 +262,10 @@ export default defineComponent({
       currentPage.value = page;
     }
 
-    return {
-      isDesktop,
-      isMobile,
+    // Helpers
+    const { isDesktop, isMobile } = useResponsive(root);
 
+    return {
       root,
       limitButton,
       limitButtonRoot,
@@ -287,6 +285,8 @@ export default defineComponent({
       toPreviousPage,
       toNextPage,
       toPage,
+      isDesktop,
+      isMobile,
     };
   },
 });

package/src/components/or-popover-v3/OrPopover.vue

@@ -122,8 +122,6 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    const { isDesktop, isMobile } = useResponsive();
-
     // Refs
     const root = ref<HTMLElement>();
 
@@ -148,6 +146,9 @@ export default defineComponent({
     const isFlipped = ref<boolean>(false);
     const isHidden = ref<boolean>(false);
 
+    // Helpers
+    const { isDesktop, isMobile } = useResponsive(root);
+
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -201,8 +202,6 @@ export default defineComponent({
     // #endregion
 
     return {
-      isDesktop,
-      isMobile,
       root,
       bottomSheet,
       bottomSheetRoot,
@@ -211,6 +210,8 @@ export default defineComponent({
       state,
       isFlipped,
       isHidden,
+      isDesktop,
+      isMobile,
       open,
       close,
       toggle,

package/src/components/or-progress-v3/OrProgress.vue

@@ -150,8 +150,6 @@ export default defineComponent({
   ],
 
   setup(props) {
-    const { isMobile } = useResponsive();
-
     // Refs
     const root = ref<HTMLElement>();
 
@@ -248,6 +246,9 @@ export default defineComponent({
       (1 - localProgress.value) * strokeDasharray.value,
     );
 
+    // Helpers
+    const { isMobile } = useResponsive(root);
+
     return {
       root,
       rootStyles,

package/src/hooks/useResponsive/useResponsive.stories.mdx

@@ -2,19 +2,28 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Docs/Responsive/Vue composable" />
 
+```ts
+import { useResponsive } from '@onereach/ui-components';
+```
 
 ## Available reactive breakpoints:
 ```vue
+<template>
+  <div ref="root"></div>
+</template>
+
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useResponsive } from '@onereach/ui-components';
 
 export default defineComponent({
   setup() {
+    const root = ref<HTMLElement>();
+
     const {
       isMobile,
       isDesktop,
-    } = useResponsive();
+    } = useResponsive(root);
 
     return {
       isMobile,

package/src/hooks/useResponsive/useResponsive.ts

@@ -1,13 +1,37 @@
 import { useMediaQuery } from '@vueuse/core';
-import { ref } from 'vue-demi';
+import { Ref, computed } from 'vue-demi';
 
-function useResponsive() {
-  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
-  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
+function useResponsive(element: Ref<HTMLElement | undefined>) {
+  const isDesktop = computed(() => {
+    return isForcedDesktop(element.value) || useMediaQuery('(min-width: 768px)').value;
+  });
+
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+
+  function isForcedDesktop(element?: HTMLElement): boolean {
+    if (!element) {
+      return false;
+    }
+
+    const forcedScreens = element.getAttribute('force-screen')?.split(/\s+/);
+
+    if (forcedScreens?.some((forcedScreen) => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
+      return true;
+    }
+
+    return isForcedDesktop(element.parentElement ?? undefined);
+  }
+
+  console.log({
+    isDesktop: isDesktop.value,
+    isMobile: isMobile.value,
+  });
 
   return {
-    isMobile,
     isDesktop,
+    isMobile,
   };
 }