@onereach/ui-components 4.18.2-beta.3099.0 → 4.18.2-beta.3109.0

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ee0f6f7e.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-8792b53f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-03768809.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-ee0f6f7e.js';
+import '../../OrDateTimePickerMonthSelect-8792b53f.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ee0f6f7e.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-8792b53f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-03768809.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-4d42b488.js';
 import { DateTimePickerTimeFormat } from './props.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-ee0f6f7e.js';
+import '../../OrDateTimePickerMonthSelect-8792b53f.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -142,6 +142,9 @@ var script = defineComponent({
     });
     const maxLength = computed(() => controlAttributes.maxlength);
     const disclosed = ref(false);
+    const {
+      isMobile
+    } = useResponsive();
     // Methods
     function focus() {
       var _a;
@@ -151,10 +154,6 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
-    // Helpers
-    const {
-      isMobile
-    } = useResponsive(root);
     return {
       root,
       control,
@@ -165,14 +164,14 @@ var script = defineComponent({
       currentLength,
       maxLength,
       disclosed,
+      isMobile,
       focus,
-      blur,
-      isMobile
+      blur
     };
   }
 });
 
-var css_248z = "input[data-v-0c853770]{min-width:0;background:0 0;outline:0}input[type=number][data-v-0c853770]::-webkit-inner-spin-button{display:none}input[type=search][data-v-0c853770]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-76960543]{min-width:0;background:0 0;outline:0}input[type=number][data-v-76960543]::-webkit-inner-spin-button{display:none}input[type=search][data-v-76960543]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -432,7 +431,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-0c853770";
+const __vue_scope_id__ = "data-v-76960543";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrInputV3/OrInput.vue.d.ts

@@ -22,9 +22,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     disclosed: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     focus: () => void;
     blur: () => void;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -169,9 +169,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     disclosed: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     focus: () => void;
     blur: () => void;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number;
     type: "number" | "text" | "password" | "search";

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.js

@@ -4,8 +4,8 @@ import __vue_component__$1 from '../OrButtonV3/OrButton.js';
 import __vue_component__$2 from '../OrIconV3/OrIcon.js';
 import __vue_component__$3 from '../OrMenuV3/OrMenu.js';
 import __vue_component__$4 from '../OrMenuItemV3/OrMenuItem.js';
-import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -67,6 +67,10 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
     // Refs
     const root = ref();
     const limitButton = ref();
@@ -160,12 +164,9 @@ var script = defineComponent({
     function toPage(page) {
       currentPage.value = page;
     }
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive(root);
     return {
+      isDesktop,
+      isMobile,
       root,
       limitButton,
       limitButtonRoot,
@@ -184,9 +185,7 @@ var script = defineComponent({
       buttonGroup,
       toPreviousPage,
       toNextPage,
-      toPage,
-      isDesktop,
-      isMobile
+      toPage
     };
   }
 });

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.vue.d.ts

@@ -1,6 +1,8 @@
 import { PropType } from 'vue-demi';
 import { PaginationModel } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -28,8 +30,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toPreviousPage: () => void;
     toNextPage: () => void;
     toPage: (page: number) => void;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<PaginationModel>;
@@ -63,6 +63,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -90,8 +92,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toPreviousPage: () => void;
     toNextPage: () => void;
     toPage: (page: number) => void;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     length: number;
     modelValue: PaginationModel;

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -69,6 +69,10 @@ var script = defineComponent({
   emits: ['update:state', 'open', 'close'],
   expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle'],
   setup(props, context) {
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
     // Refs
     const root = ref();
     const bottomSheet = ref();
@@ -88,11 +92,6 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isFlipped = ref(false);
     const isHidden = ref(false);
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive(root);
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -144,6 +143,8 @@ var script = defineComponent({
     });
     // #endregion
     return {
+      isDesktop,
+      isMobile,
       root,
       bottomSheet,
       bottomSheetRoot,
@@ -152,8 +153,6 @@ var script = defineComponent({
       state,
       isFlipped,
       isHidden,
-      isDesktop,
-      isMobile,
       open,
       close,
       toggle

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.vue.d.ts

@@ -1,6 +1,8 @@
 import { PropType } from 'vue-demi';
 import { PopoverOffset, PopoverPlacement, PopoverVariant } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     bottomSheet: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -13,8 +15,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isFlipped: import("@vue/composition-api").Ref<boolean>;
     isHidden: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -117,6 +117,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     bottomSheet: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -129,8 +131,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isFlipped: import("@vue/composition-api").Ref<boolean>;
     isHidden: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;

package/dist/bundled/v2/components/OrProgressV3/OrProgress.js

@@ -53,6 +53,9 @@ var script = defineComponent({
   },
   expose: ['root'],
   setup(props) {
+    const {
+      isMobile
+    } = useResponsive();
     // Refs
     const root = ref();
     // Slots
@@ -111,10 +114,6 @@ var script = defineComponent({
       return width.value ? width.value - 2 : '100%';
     });
     const strokeDashoffset = computed(() => props.loading ? undefined : (1 - localProgress.value) * strokeDasharray.value);
-    // Helpers
-    const {
-      isMobile
-    } = useResponsive(root);
     return {
       root,
       rootStyles,

package/dist/bundled/v2/components/OrToast/composable/useToast.js

@@ -68,9 +68,9 @@ function useToast() {
   function loading(props) {
     let behaviour = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return notify({
+      dismissible: false,
       ...props,
-      toastType: ToastType.loading,
-      dismissible: false
+      toastType: ToastType.loading
     }, {
       ...behaviour,
       duration: 0 // <- toast with type "loading" will not cloe automatically

package/dist/bundled/v2/components/OrToastV3/composable/useToast.js

@@ -68,9 +68,9 @@ function useToast() {
   function loading(props) {
     let behaviour = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return notify({
+      dismissible: false,
       ...props,
-      toastType: ToastType.Loading,
-      dismissible: false
+      toastType: ToastType.Loading
     }, {
       ...behaviour,
       duration: 0 // <- toast with type "loading" will not cloe automatically

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

@@ -235,7 +235,7 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-ee0f6f7e.js';
+import '../OrDateTimePickerMonthSelect-8792b53f.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-03768809.js';
 import './OrDatePickerV3/styles.js';

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

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

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

@@ -1,32 +1,13 @@
 import { k as useMediaQuery } from '../../index-509d77a1.js';
-import { computed } from 'vue-demi';
+import { ref } from 'vue-demi';
 import '../../index-ec92055d.js';
 
-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
-  });
+function useResponsive() {
+  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
+  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
   return {
-    isDesktop,
-    isMobile
+    isMobile,
+    isDesktop
   };
 }
 

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

@@ -1950,19 +1950,17 @@ const {
   typeStyles: typographyTokens,
 } = require$$2;
 
-const screens = {
-  'sm': '640px',
-  'md': '768px',
-  'lg': '1024px',
-  'xl': '1280px',
-  '2xl': '1536px',
-};
-
 var tailwind_config_preset = {
   darkMode: ['class', '[data-theme="dark"]'],
 
   theme: {
-    screens: {},
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
 
     spacing: {
       ...parseSpacingTokens(spacingTokens),
@@ -2119,16 +2117,6 @@ 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]');
 
@@ -2257,21 +2245,7 @@ var tailwind_config_preset = {
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
             // Desktop
-            [`@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"]': {
+            [`@media (min-width: ${theme('screens.md')})`]: {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
               fontSize: fontSizeDesktop,
@@ -2349,7 +2323,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
                 },
@@ -2391,7 +2365,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
                 },
@@ -2433,7 +2407,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
                 },
@@ -2475,7 +2449,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   color: theme(`textColor.${token}-hover` + suffix),
                 },