@onereach/ui-components 2.75.1-beta.2379.0 → 2.75.1-beta.2384.0

package/dist/esm/v2/{OrModal-370cfc3b.js → OrModal-407f3ac7.js}

@@ -14,7 +14,7 @@ const ModalRoot = [
 // Layout
 'layout-column',
 // Box
-'w-full', 'h-full',
+'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
 // Shape
 'md:rounded-md',
 // Spacing
@@ -28,13 +28,13 @@ const ModalRoot = [
 const ModalRootSizes = {
   'l': [
   // Box
-  'md:w-[1050px]', 'md:h-auto'],
+  'md:w-[1050px]'],
   'm': [
   // Box
-  'md:w-[700px]', 'md:h-auto'],
+  'md:w-[700px]'],
   's': [
   // Box
-  'md:w-[480px]', 'md:h-auto']
+  'md:w-[480px]']
 };
 const ModalHeader = [
 // Layouot

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

@@ -51,7 +51,7 @@ export { _ as OrMenuItemV3 } from '../OrMenuItem-4f810513.js';
 export { _ as OrMenuV3 } from '../OrMenu-bb6e93bc.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-a101a230.js';
 export { _ as OrModal, O as OrModalSizes } from '../OrModal-a02dcd2a.js';
-export { M as ModalSize, _ as OrModalV3 } from '../OrModal-370cfc3b.js';
+export { M as ModalSize, _ as OrModalV3 } from '../OrModal-407f3ac7.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from '../OrNotification-0b22c94c.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotification-76498693.js';
 export { _ as OrNumberInput } from '../OrNumberInput-eb0e7087.js';

package/dist/esm/v2/components/or-modal-v3/index.js

@@ -1,4 +1,4 @@
-export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-370cfc3b.js';
+export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-407f3ac7.js';
 import 'vue-demi';
 import '../../OrIconButton-fa9bff07.js';
 import '../../OrIcon-c434985a.js';

package/dist/esm/v2/index.js

@@ -51,7 +51,7 @@ export { _ as OrMenuItemV3 } from './OrMenuItem-4f810513.js';
 export { _ as OrMenuV3 } from './OrMenu-bb6e93bc.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-a101a230.js';
 export { _ as OrModal, O as OrModalSizes } from './OrModal-a02dcd2a.js';
-export { M as ModalSize, _ as OrModalV3 } from './OrModal-370cfc3b.js';
+export { M as ModalSize, _ as OrModalV3 } from './OrModal-407f3ac7.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-0b22c94c.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-76498693.js';
 export { _ as OrNumberInput } from './OrNumberInput-eb0e7087.js';

package/dist/esm/v3/{OrModal-f9f2279b.js → OrModal-17c3a1cb.js}

@@ -14,7 +14,7 @@ const ModalRoot = [
 // Layout
 'layout-column',
 // Box
-'w-full', 'h-full',
+'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
 // Shape
 'md:rounded-md',
 // Spacing
@@ -28,13 +28,13 @@ const ModalRoot = [
 const ModalRootSizes = {
   'l': [
   // Box
-  'md:w-[1050px]', 'md:h-auto'],
+  'md:w-[1050px]'],
   'm': [
   // Box
-  'md:w-[700px]', 'md:h-auto'],
+  'md:w-[700px]'],
   's': [
   // Box
-  'md:w-[480px]', 'md:h-auto']
+  'md:w-[480px]']
 };
 const ModalHeader = [
 // Layouot

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

@@ -48,7 +48,7 @@ export { s as OrMenuItemV3 } from '../OrMenuItem-de91aded.js';
 export { s as OrMenuV3 } from '../OrMenu-b4e8136c.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-35ee1b1e.js';
 export { s as OrModal, O as OrModalSizes } from '../OrModal-153310f7.js';
-export { M as ModalSize, s as OrModalV3 } from '../OrModal-f9f2279b.js';
+export { M as ModalSize, s as OrModalV3 } from '../OrModal-17c3a1cb.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification-2d77aae4.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification-aab2e22a.js';
 export { s as OrNumberInput } from '../OrNumberInput-dca5e850.js';

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

@@ -1,4 +1,4 @@
-export { M as ModalSize, s as OrModalV3 } from '../../OrModal-f9f2279b.js';
+export { M as ModalSize, s as OrModalV3 } from '../../OrModal-17c3a1cb.js';
 import 'vue-demi';
 import '../../OrIconButton-385e997c.js';
 import '../../OrIcon-ea40e58c.js';

package/dist/esm/v3/index.js

@@ -48,7 +48,7 @@ export { s as OrMenuItemV3 } from './OrMenuItem-de91aded.js';
 export { s as OrMenuV3 } from './OrMenu-b4e8136c.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-35ee1b1e.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-153310f7.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-f9f2279b.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-17c3a1cb.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-2d77aae4.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-aab2e22a.js';
 export { s as OrNumberInput } from './OrNumberInput-dca5e850.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.75.1-beta.2379.0",
+  "version": "2.75.1-beta.2384.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.36.1-beta.2379.0",
+    "@onereach/styles": "^2.36.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

package/src/components/or-modal-v3/OrModal.stories3.ts

@@ -1,6 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import { ref } from 'vue-demi';
+import Faker from 'faker';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import OrModalDocs from './OrModal.docs.mdx';
 import OrModal from './OrModal.vue';
@@ -257,3 +258,21 @@ zIndex.args = {
     </div>
   `,
 };
+
+export const WithVerticalScroll = Template.bind({});
+
+WithVerticalScroll.args = {
+  header: 'Upload Files',
+  default: `
+    <div class="flex items-center justify-center">
+      ${Faker.lorem.lines(50)}
+    </div>
+  `,
+
+  footer: `
+    <div class="flex items-center justify-end gap-[16px]">
+      <OrButton variant="outlined">Save</OrButton>
+      <OrButton>Upload</OrButton>
+    </div>
+  `,
+};

package/src/components/or-modal-v3/styles.ts

@@ -6,7 +6,7 @@ export const ModalRoot: string[] = [
 
   // Box
   'w-full',
-  'h-full',
+  'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
 
   // Shape
   'md:rounded-md',
@@ -36,19 +36,16 @@ export const ModalRootSizes: Record<ModalSize, string[]> = {
   'l': [
     // Box
     'md:w-[1050px]',
-    'md:h-auto',
   ],
 
   'm': [
     // Box
     'md:w-[700px]',
-    'md:h-auto',
   ],
 
   's': [
     // Box
     'md:w-[480px]',
-    'md:h-auto',
   ],
 };
 

package/src/components/or-sidebar-v3/OrSidebar.stories3.ts

@@ -104,7 +104,7 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
         class="theme-background-surface-1 dark:theme-background-surface-1-dark text-on-background dark:text-on-background-dark"
         style="flex-grow: 1; overflow: auto; padding: 16px"
       >
-        ${Faker.lorem.paragraphs(100)}
+        ${Faker.lorem.paragraphs(10)}
       </div>
       <OrSidebar
         v-bind="args"