@spothero/ui 25.11.0 → 25.12.0

package/dist/components/Modal/styles/footer.d.ts

@@ -2,5 +2,11 @@ declare namespace _default {
     let borderTop: string;
     let borderColor: string;
     let padding: number;
+    let gap: number;
+    let justifyContent: string;
+    namespace flexDirection {
+        let base: string;
+        let desktop: string;
+    }
 }
 export default _default;

package/dist/components/Modal/styles/index.d.ts

@@ -198,6 +198,12 @@ declare const _default: {
             borderTop: string;
             borderColor: string;
             padding: number;
+            gap: number;
+            justifyContent: string;
+            flexDirection: {
+                base: string;
+                desktop: string;
+            };
         };
     };
     sizes: {
@@ -208,6 +214,13 @@ declare const _default: {
                 minHeight: string[];
             };
         };
+        'sm-md': {
+            dialog: {
+                maxHeight: string[];
+                minWidth: (string | number)[];
+                maxWidth: string[];
+            };
+        };
         md: {
             dialog: {
                 maxWidth: string[];

package/dist/index.cjs.js

@@ -141,7 +141,7 @@ var header$1 = _ref => {
  * @param {boolean} isOpen - Whether or not the Modal is open
  * @param {React.ReactNode} children - The header text of the modal
  * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
+ * @param {('sm'|'sm-md'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
  * @param {object} [contentStyling] - Style props to be passed into the modal content
  * @param {object} [overlayProps] - Props to be passed into the ModalOverlay component. See: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-overlay.tsx
  * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
@@ -182,7 +182,7 @@ Modal.propTypes = {
   /** Callback invoked to close the Modal. Not required, but strongly suggested. */
   onClose: PropTypes__default.default.func,
   /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes__default.default.oneOf(['sm', 'sm-md', 'md', 'lg']),
   /** Whether or not to show the close button (optional) */
   hideCloseButton: PropTypes__default.default.bool,
   /** Objects containing css-in-js styling*/
@@ -206,7 +206,7 @@ const fadeOutAndSlideDown = react.keyframes(_templateObject6 || (_templateObject
  * @param {boolean} isOpen - Whether or not the Modal is open
  * @param {React.ReactNode} children - The header text of the modal
  * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
+ * @param {('sm'|'sm-md'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
  * @param {object} [contentStyling] - Style props to be passed into the modal content
  * @param {object} [overlayProps] - Props to be passed into the ModalOverlay component. See: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-overlay.tsx
  * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
@@ -275,7 +275,7 @@ AlwaysMountedModal.propTypes = {
   /** Callback invoked to close the Modal. Not required, but strongly suggested. */
   onClose: PropTypes__default.default.func,
   /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes__default.default.oneOf(['sm', 'sm-md', 'md', 'lg']),
   /** Whether or not to show the close button (optional) */
   hideCloseButton: PropTypes__default.default.bool,
   /** Objects containing css-in-js styling*/
@@ -3734,7 +3734,13 @@ var body$1 = _ref => {
 var footer$1 = {
   borderTop: '1px',
   borderColor: 'gray.100',
-  padding: 4
+  padding: 4,
+  gap: 4,
+  justifyContent: 'flex-start',
+  flexDirection: {
+    base: 'column',
+    desktop: 'row-reverse'
+  }
 };
 
 const baseStyle$4 = props => ({
@@ -3755,6 +3761,13 @@ const sizes$3 = {
       minHeight: ['auto', 'auto', '32%', '32%', '24%']
     }
   },
+  'sm-md': {
+    dialog: {
+      maxHeight: ['100%', '100%', '65%', '65%', '65%'],
+      minWidth: ['100%', '100%', 96, 96, 96],
+      maxWidth: ['100%', '100%', '55%', '42%', '30%']
+    }
+  },
   md: {
     dialog: {
       maxWidth: ['100%', '100%', '84%', '60%', '48%'],