@abstraks-dev/ui-library 2.2.1 → 2.4.0

package/dist/__tests__/Prompt.test.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Prompt = require("../components/Prompt");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+describe('Prompt Component', () => {
+  const defaultProps = {
+    message: 'Are you sure you want to proceed?',
+    onConfirm: jest.fn(),
+    onCancel: jest.fn(),
+    open: true
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('Rendering', () => {
+    test('renders prompt when open is true', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Are you sure you want to proceed?')).toBeInTheDocument();
+    });
+    test('does not render when open is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    test('renders with default confirm button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByText('Yes')).toBeInTheDocument();
+    });
+    test('renders with custom confirm button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        confirmText: "Delete"
+      })));
+      expect(_react2.screen.getByText('Delete')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Yes')).not.toBeInTheDocument();
+    });
+    test('renders with default cancel button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+    });
+    test('renders with custom cancel button text', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        cancelText: "No"
+      })));
+      expect(_react2.screen.getByText('No')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Cancel')).not.toBeInTheDocument();
+    });
+    test('renders both confirm and cancel buttons by default', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(_react2.screen.getByText('Yes')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+    });
+    test('hides cancel button when showCancel is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        showCancel: false
+      })));
+      expect(_react2.screen.getByText('Yes')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Cancel')).not.toBeInTheDocument();
+    });
+    test('renders without confirm button if onConfirm is not provided', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Information message",
+        onCancel: defaultProps.onCancel,
+        open: true
+      }));
+      expect(_react2.screen.queryByText('Yes')).not.toBeInTheDocument();
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+    });
+    test('has correct ARIA attributes', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const dialog = _react2.screen.getByRole('dialog');
+      expect(dialog).toHaveAttribute('aria-modal', 'true');
+      expect(dialog).toHaveAttribute('aria-label', 'Are you sure you want to proceed?');
+    });
+    test('confirm button receives focus when rendered', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      expect(confirmButton).toHaveFocus();
+    });
+  });
+  describe('User Interactions', () => {
+    test('calls onConfirm when confirm button is clicked', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      _react2.fireEvent.click(confirmButton);
+      expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1);
+      expect(defaultProps.onCancel).not.toHaveBeenCalled();
+    });
+    test('calls onCancel when cancel button is clicked', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const cancelButton = _react2.screen.getByText('Cancel');
+      _react2.fireEvent.click(cancelButton);
+      expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
+      expect(defaultProps.onConfirm).not.toHaveBeenCalled();
+    });
+    test('does not call onConfirm if not provided', () => {
+      const mockOnCancel = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Test message",
+        onCancel: mockOnCancel,
+        open: true,
+        showCancel: true
+      }));
+
+      // Only cancel button should be present
+      expect(_react2.screen.queryByText('Yes')).not.toBeInTheDocument();
+    });
+    test('handles multiple clicks correctly', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      _react2.fireEvent.click(confirmButton);
+      _react2.fireEvent.click(confirmButton);
+      expect(defaultProps.onConfirm).toHaveBeenCalledTimes(2);
+    });
+  });
+  describe('PropTypes Validation', () => {
+    test('renders with required props only', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Required message",
+        open: true
+      }));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Required message')).toBeInTheDocument();
+    });
+    test('renders with all optional props', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "All props message",
+        onConfirm: jest.fn(),
+        onCancel: jest.fn(),
+        confirmText: "Confirm",
+        cancelText: "Dismiss",
+        showCancel: true,
+        open: true
+      }));
+      expect(_react2.screen.getByText('All props message')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Confirm')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Dismiss')).toBeInTheDocument();
+    });
+  });
+  describe('CSS Classes', () => {
+    test('applies correct CSS classes', () => {
+      const {
+        container
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      expect(container.querySelector('.prompt-overlay')).toBeInTheDocument();
+      expect(container.querySelector('.prompt-box')).toBeInTheDocument();
+      expect(container.querySelector('.prompt-actions')).toBeInTheDocument();
+    });
+    test('confirm button has correct class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const confirmButton = _react2.screen.getByText('Yes');
+      expect(confirmButton).toHaveClass('prompt-confirm');
+    });
+    test('cancel button has correct class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, defaultProps));
+      const cancelButton = _react2.screen.getByText('Cancel');
+      expect(cancelButton).toHaveClass('prompt-cancel');
+    });
+  });
+  describe('Edge Cases', () => {
+    test('renders with empty message string', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        message: ""
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    test('renders with very long message', () => {
+      const longMessage = 'This is a very long message that might wrap to multiple lines in the prompt dialog and should still render correctly without breaking the layout or causing any issues';
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        message: longMessage
+      })));
+      expect(_react2.screen.getByText(longMessage)).toBeInTheDocument();
+    });
+    test('renders when both onConfirm and onCancel are undefined', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, {
+        message: "Message",
+        open: true
+      }));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Message')).toBeInTheDocument();
+    });
+    test('transitions from closed to open', () => {
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+      rerender(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: true
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    test('transitions from open to closed', () => {
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: true
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      rerender(/*#__PURE__*/_react.default.createElement(_Prompt.Prompt, _extends({}, defaultProps, {
+        open: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});

package/dist/components/Modal.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Modal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _propTypes = require("prop-types");
+var _icons = require("../icons");
+var _ssrSafeId = require("../utils/ssrSafeId");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Modal - A stateless, accessible modal dialog component
+ *
+ * Features:
+ * - Portal rendering to document.body
+ * - Multiple sizes (sm, md, lg, xl, full)
+ * - Accessible with proper ARIA attributes and focus management
+ * - Keyboard support (Escape to close)
+ * - Backdrop click to close (optional)
+ * - Scroll lock on body
+ * - Header, body, and footer sections
+ * - Customizable close button
+ * - Animation support
+ *
+ * @component
+ * @example
+ * <Modal
+ *   isOpen={true}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ *   size="md"
+ * >
+ *   <p>Are you sure you want to continue?</p>
+ * </Modal>
+ */
+const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  title,
+  children,
+  footer,
+  headerContent,
+  // Behavior props
+  isOpen = false,
+  onClose,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  showCloseButton = true,
+  preventBodyScroll = true,
+  // Appearance props
+  size = 'md',
+  centered = true,
+  // Accessibility props
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'aria-labelledby': ariaLabelledBy,
+  role = 'dialog',
+  // Additional props
+  componentName = 'modal',
+  ...rest
+}, ref) => {
+  const generateId = (0, _ssrSafeId.useStableId)('modal');
+  const stableId = id || generateId();
+  const titleId = `${stableId}-title`;
+  const contentId = `${stableId}-content`;
+
+  // Handle Escape key press
+  const handleEscape = (0, _react.useCallback)(event => {
+    if (closeOnEscape && event.key === 'Escape' && isOpen) {
+      event.preventDefault();
+      onClose?.();
+    }
+  }, [closeOnEscape, isOpen, onClose]);
+
+  // Handle backdrop click
+  const handleBackdropClick = (0, _react.useCallback)(event => {
+    if (closeOnBackdropClick && event.target === event.currentTarget) {
+      onClose?.();
+    }
+  }, [closeOnBackdropClick, onClose]);
+
+  // Manage body scroll lock
+  (0, _react.useEffect)(() => {
+    if (isOpen && preventBodyScroll) {
+      const originalOverflow = document.body.style.overflow;
+      const originalPaddingRight = document.body.style.paddingRight;
+
+      // Get scrollbar width
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+      // Lock scroll
+      document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+      return () => {
+        document.body.style.overflow = originalOverflow;
+        document.body.style.paddingRight = originalPaddingRight;
+      };
+    }
+  }, [isOpen, preventBodyScroll]);
+
+  // Add/remove escape key listener
+  (0, _react.useEffect)(() => {
+    if (isOpen && closeOnEscape) {
+      document.addEventListener('keydown', handleEscape);
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  }, [isOpen, closeOnEscape, handleEscape]);
+
+  // Focus management
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      // Store the currently focused element
+      const previousActiveElement = document.activeElement;
+
+      // Return focus when modal closes
+      return () => {
+        if (previousActiveElement && previousActiveElement.focus) {
+          previousActiveElement.focus();
+        }
+      };
+    }
+  }, [isOpen]);
+  if (!isOpen) {
+    return null;
+  }
+  const modalClassName = [componentName, `${componentName}--${size}`, centered && `${componentName}--centered`, className].filter(Boolean).join(' ');
+  const modalContent = /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}-overlay`,
+    onClick: handleBackdropClick
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: stableId,
+    className: modalClassName,
+    role: role,
+    "aria-modal": "true",
+    "aria-label": ariaLabel || title,
+    "aria-labelledby": title ? titleId : ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy || contentId
+  }, rest), (title || headerContent || showCloseButton) && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__header`
+  }, headerContent || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement("h2", {
+    id: titleId,
+    className: `${componentName}__title`
+  }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("button", {
+    className: `${componentName}__close`,
+    onClick: onClose,
+    "aria-label": "Close modal",
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_icons.Close, {
+    dimensions: 24
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    id: contentId,
+    className: `${componentName}__body`
+  }, children), footer && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__footer`
+  }, footer)));
+
+  // Render modal in a portal
+  if (typeof window !== 'undefined') {
+    return /*#__PURE__*/(0, _reactDom.createPortal)(modalContent, document.body);
+  }
+  return null;
+});
+Modal.propTypes = {
+  id: _propTypes.string,
+  className: _propTypes.string,
+  title: _propTypes.string,
+  children: _propTypes.node,
+  footer: _propTypes.node,
+  headerContent: _propTypes.node,
+  isOpen: _propTypes.bool,
+  onClose: _propTypes.func,
+  closeOnBackdropClick: _propTypes.bool,
+  closeOnEscape: _propTypes.bool,
+  showCloseButton: _propTypes.bool,
+  preventBodyScroll: _propTypes.bool,
+  size: (0, _propTypes.oneOf)(['sm', 'md', 'lg', 'xl', 'full']),
+  centered: _propTypes.bool,
+  'aria-label': _propTypes.string,
+  'aria-describedby': _propTypes.string,
+  'aria-labelledby': _propTypes.string,
+  role: _propTypes.string,
+  componentName: _propTypes.string
+};
+Modal.displayName = 'Modal';
+var _default = exports.default = Modal;

package/dist/index.js

@@ -24,7 +24,9 @@ var _exportNames = {
   Hero: true,
   Label: true,
   Loader: true,
+  Modal: true,
   Paragraph: true,
+  Prompt: true,
   Radio: true,
   Search: true,
   Select: true,
@@ -355,6 +357,12 @@ Object.defineProperty(exports, "Magnify", {
     return _Magnify.Magnify;
   }
 });
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "News", {
   enumerable: true,
   get: function () {
@@ -373,6 +381,12 @@ Object.defineProperty(exports, "PlusCircle", {
     return _PlusCircle.PlusCircle;
   }
 });
+Object.defineProperty(exports, "Prompt", {
+  enumerable: true,
+  get: function () {
+    return _Prompt.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -483,7 +497,9 @@ var _Heading = _interopRequireDefault(require("./components/Heading"));
 var _Hero = _interopRequireDefault(require("./components/Hero"));
 var _Label = _interopRequireDefault(require("./components/Label"));
 var _Loader = _interopRequireDefault(require("./components/Loader"));
+var _Modal = _interopRequireDefault(require("./components/Modal"));
 var _Paragraph = _interopRequireDefault(require("./components/Paragraph"));
+var _Prompt = _interopRequireDefault(require("./components/Prompt"));
 var _Radio = require("./components/Radio");
 var _Search = require("./components/Search");
 var _Select = require("./components/Select");

package/dist/styles/main.css

@@ -7545,6 +7545,224 @@ body.scroll-locked {
   border: 0 !important;
 }
 
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  animation: fadeIn 0.2s ease-out;
+  overflow-y: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal-overlay {
+    animation: none;
+  }
+}
+
+.modal {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 2rem);
+  width: 100%;
+  animation: slideIn 0.3s ease-out;
+  position: relative;
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal {
+    animation: none;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .modal {
+    background: #1e1e1e;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  }
+}
+.modal--sm {
+  max-width: 400px;
+}
+.modal--md {
+  max-width: 600px;
+}
+.modal--lg {
+  max-width: 800px;
+}
+.modal--xl {
+  max-width: 1200px;
+}
+.modal--full {
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+}
+.modal--centered {
+  margin: auto;
+}
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__header {
+    border-bottom-color: #333;
+  }
+}
+.modal__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #212529;
+  flex: 1;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__title {
+    color: #fff;
+  }
+}
+.modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0.5rem;
+  margin: -0.5rem -0.5rem -0.5rem 1rem;
+  cursor: pointer;
+  color: #6c757d;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+.modal__close:hover {
+  background: #f8f9fa;
+  color: #212529;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__close:hover {
+    background: #333;
+    color: #fff;
+  }
+}
+.modal__close:focus-visible {
+  outline: 2px solid #009900;
+  outline-offset: 2px;
+}
+.modal__close svg {
+  display: block;
+}
+.modal__body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  color: #495057;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__body {
+    color: #dee2e6;
+  }
+}
+.modal__body::-webkit-scrollbar {
+  width: 8px;
+}
+.modal__body::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__body::-webkit-scrollbar-track {
+    background: #2a2a2a;
+  }
+}
+.modal__body::-webkit-scrollbar-thumb {
+  background: #ced4da;
+  border-radius: 4px;
+}
+.modal__body::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__body::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+  .modal__body::-webkit-scrollbar-thumb:hover {
+    background: #666;
+  }
+}
+.modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-top: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__footer {
+    border-top-color: #333;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@media (max-width: 640px) {
+  .modal-overlay {
+    padding: 0.5rem;
+  }
+  .modal {
+    max-height: calc(100vh - 1rem);
+  }
+  .modal--sm, .modal--md, .modal--lg, .modal--xl {
+    max-width: 100%;
+  }
+  .modal__header, .modal__body, .modal__footer {
+    padding: 1rem;
+  }
+  .modal__title {
+    font-size: 1.125rem;
+  }
+}
+@media (prefers-contrast: high) {
+  .modal {
+    border: 2px solid currentColor;
+  }
+  .modal__header, .modal__footer {
+    border-color: currentColor;
+  }
+  .modal__close:focus-visible {
+    outline-width: 3px;
+  }
+}
 .logo {
   width: 50%;
   display: inline-flex;