@onereach/ui-components 2.74.8 → 2.74.9-beta.2343.0

package/dist/esm/v2/{OrModal-a938e31b.js → OrModal-f24fc082.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-1adef5df.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-b3746279.js';
 export { _ as OrModal, O as OrModalSizes } from '../OrModal-00808e43.js';
-export { M as ModalSize, _ as OrModalV3 } from '../OrModal-a938e31b.js';
+export { M as ModalSize, _ as OrModalV3 } from '../OrModal-f24fc082.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from '../OrNotification-453fff8c.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotification-e8c1df46.js';
 export { _ as OrNumberInput } from '../OrNumberInput-a864b102.js';

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

@@ -1,4 +1,4 @@
-export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-a938e31b.js';
+export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-f24fc082.js';
 import 'vue-demi';
 import '../../OrIconButton-140f940e.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-1adef5df.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-b3746279.js';
 export { _ as OrModal, O as OrModalSizes } from './OrModal-00808e43.js';
-export { M as ModalSize, _ as OrModalV3 } from './OrModal-a938e31b.js';
+export { M as ModalSize, _ as OrModalV3 } from './OrModal-f24fc082.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-453fff8c.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-e8c1df46.js';
 export { _ as OrNumberInput } from './OrNumberInput-a864b102.js';

package/dist/esm/v3/{OrModal-07c092ab.js → OrModal-3cb259b1.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-345930d5.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-464a5606.js';
 export { s as OrModal, O as OrModalSizes } from '../OrModal-efacdf3f.js';
-export { M as ModalSize, s as OrModalV3 } from '../OrModal-07c092ab.js';
+export { M as ModalSize, s as OrModalV3 } from '../OrModal-3cb259b1.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification-f7d413aa.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification-e600fd9a.js';
 export { s as OrNumberInput } from '../OrNumberInput-b32b5ce3.js';

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

@@ -1,4 +1,4 @@
-export { M as ModalSize, s as OrModalV3 } from '../../OrModal-07c092ab.js';
+export { M as ModalSize, s as OrModalV3 } from '../../OrModal-3cb259b1.js';
 import 'vue-demi';
 import '../../OrIconButton-2a9a6627.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-345930d5.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-464a5606.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-efacdf3f.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-07c092ab.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-3cb259b1.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-f7d413aa.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-e600fd9a.js';
 export { s as OrNumberInput } from './OrNumberInput-b32b5ce3.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.74.8",
+  "version": "2.74.9-beta.2343.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,6 +124,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "daf6e9f278b97d4e36889093f41f2c03aafb5404"
+  }
 }

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',
   ],
 };