@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.5

package/src/Modal/{Portal.jsx → Portal.tsx}

@@ -1,9 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 
-class Portal extends React.Component {
-  constructor(props) {
+interface Props {
+  children: React.ReactNode;
+}
+
+class Portal extends React.Component<Props> {
+  private rootName: string;
+
+  private rootElement: HTMLElement | null;
+
+  constructor(props: Props) {
     super(props);
     this.rootName = 'paragon-portal-root';
     // istanbul ignore if
@@ -31,8 +38,4 @@ class Portal extends React.Component {
   }
 }
 
-Portal.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default Portal;

package/src/Modal/_ModalDialog.scss

@@ -1,3 +1,23 @@
+:root {
+  --pgn-elevation-modal-content-box-shadow-sm-up:
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+
+  --pgn-spacing-modal-footer-padding-base:
+    var(--pgn-spacing-modal-footer-padding-base-y)
+    var(--pgn-spacing-modal-footer-padding-base-x);
+
+  --pgn-spacing-modal-header-padding-base:
+    var(--pgn-spacing-modal-header-padding-base-y)
+    var(--pgn-spacing-modal-header-padding-base-x);
+}
+
 .pgn__modal {
   background: var(--pgn-color-modal-content-bg);
   border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width));
@@ -122,7 +142,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -310,7 +330,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: var(--pgn-typography-font-size-h4-base);
     display: flex;
     flex-grow: 1;
     align-items: center;

package/src/Modal/modal-dialog.mdx

@@ -31,10 +31,13 @@ label for the dialog element.
   const variants = ['default', 'warning', 'danger', 'success', 'dark'];
   const [modalSize, setModalSize] = useState('md');
   const [modalVariant, setModalVariant] = useState('default');
+
   return (
     <>
       <div className="d-flex">
-        <Button variant="outline-primary" onClick={open}>Open standard modal dialog</Button>
+        <Button variant="outline-primary" onClick={open}>
+          Open standard modal dialog
+        </Button>
       </div>
       <ModalDialog
         title="My dialog"
@@ -44,6 +47,7 @@ label for the dialog element.
         variant={modalVariant}
         hasCloseButton
         isFullscreenOnMobile
+        isOverflowVisible
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
@@ -73,7 +77,11 @@ label for the dialog element.
             </Form.RadioSet>
           </Form.Group>
           <p>
-            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
+            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
+            Beard man braid migas single-origin coffee forage ramps. Tumeric messenger
+            bag bicycle rights wayfarers, try-hard cronut blue bottle health goth.
+            Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa
+            semiotics woke next level organic roof party +1 try-hard.
           </p>
         </ModalDialog.Body>
 
@@ -82,7 +90,7 @@ label for the dialog element.
             <ModalDialog.CloseButton variant="tertiary">
               Cancel
             </ModalDialog.CloseButton>
-            <Button variant="primary">
+            <Button>
               A button
             </Button>
           </ActionRow>
@@ -102,10 +110,13 @@ label for the dialog element.
   const variants = ['default', 'warning', 'danger', 'success', 'dark'];
   const [modalSize, setModalSize] = useState('md');
   const [modalVariant, setModalVariant] = useState('dark');
+
   return (
     <>
       <div className="d-flex">
-        <Button variant="outline-primary" onClick={open}>Open marketing modal dialog</Button>
+        <Button variant="outline-primary" onClick={open}>
+          Open marketing modal dialog
+        </Button>
       </div>
       <ModalDialog
         title="My dialog"
@@ -114,6 +125,7 @@ label for the dialog element.
         size={modalSize}
         variant={modalVariant}
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background
@@ -144,7 +156,11 @@ label for the dialog element.
             </Form.RadioSet>
           </Form.Group>
           <p>
-            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
+            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
+            Beard man braid migas single-origin coffee forage ramps. Tumeric messenger
+            bag bicycle rights wayfarers, try-hard cronut blue bottle health goth.
+            Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa
+            semiotics woke next level organic roof party +1 try-hard.
           </p>
         </ModalDialog.Body>
 
@@ -153,7 +169,80 @@ label for the dialog element.
             <ModalDialog.CloseButton variant="tertiary">
               Cancel
             </ModalDialog.CloseButton>
-            <Button variant="primary">
+            <Button>
+              A button
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </>
+  )
+}
+```
+
+## Overflow visibility handling
+
+The `isOverflowVisible` toggle controls whether content that extends beyond the modal's viewport boundaries is visible.
+When enabled (`isOverflowVisible` is set to `true`), any overflow content, such as dropdowns or tooltips,
+will be displayed outside the modal's main area instead of being clipped.
+
+In this example, switching `isOverflowVisible` on and off affects the visibility of the dropdown options in
+the autosuggest field, showing how overflow handling impacts content display within a modal.
+
+```jsx live
+() => {
+  const [isOpen, open, close] = useToggle(false);
+  const [isOn, setOn, setOff, toggle] = useToggle(false);
+
+  return (
+    <>
+      <div className="d-flex">
+        <Button variant="outline-primary" onClick={open}>
+          Open standard modal dialog
+        </Button>
+      </div>
+      <ModalDialog
+        title="My dialog"
+        isOpen={isOpen}
+        onClose={close}
+        hasCloseButton
+        isFullscreenOnMobile
+        isOverflowVisible={isOn}
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            I'm a dialog box
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+
+        <ModalDialog.Body>
+          <Stack className="mb-3" direction="horizontal" gap={2}>
+            <Form.Switch checked={isOn} onChange={toggle}>
+              isOverflowVisible
+            </Form.Switch>
+            {isOn
+              ? <Badge variant="success">{JSON.stringify(isOn)}</Badge>
+              : <Badge variant="light">{JSON.stringify(isOn)}</Badge>
+            }
+          </Stack>
+          <Form.Autosuggest
+            aria-label="form autosuggest"
+            helpMessage="Select language"
+            placeholder="Open autosuggest dropdown"
+          >
+            <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
+          </Form.Autosuggest>
+        </ModalDialog.Body>
+
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              Cancel
+            </ModalDialog.CloseButton>
+            <Button>
               A button
             </Button>
           </ActionRow>

package/src/Modal/tests/{ModalDialog.test.jsx → ModalDialog.test.tsx}

@@ -3,16 +3,6 @@ import { render, screen } from '@testing-library/react';
 
 import ModalDialog from '../ModalDialog';
 
-jest.mock('../ModalLayer', () => function ModalLayerMock(props) {
-  // eslint-disable-next-line react/prop-types
-  const { children, ...otherProps } = props;
-  return (
-    <modal-layer {...otherProps}>
-      {children}
-    </modal-layer>
-  );
-});
-
 describe('ModalDialog', () => {
   it('renders a dialog with aria-label and content', () => {
     const onClose = jest.fn();
@@ -24,6 +14,7 @@ describe('ModalDialog', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Header>
           <ModalDialog.Title>The title</ModalDialog.Title>
@@ -45,6 +36,22 @@ describe('ModalDialog', () => {
     expect(dialogNode).toHaveAttribute('aria-label', 'My dialog');
     expect(screen.getByText('The content')).toBeInTheDocument();
   });
+
+  it('is hidden by default', () => {
+    const onClose = jest.fn();
+    render(
+      <ModalDialog
+        title="My dialog"
+        onClose={onClose}
+      >
+        <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
+        <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
+        <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
+      </ModalDialog>,
+    );
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
 });
 
 describe('ModalDialog with Hero', () => {
@@ -58,6 +65,7 @@ describe('ModalDialog with Hero', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background backgroundSrc="imageurl" />

package/src/Modal/tests/{ModalLayer.test.jsx → ModalLayer.test.tsx}

@@ -6,12 +6,11 @@ import userEvent from '@testing-library/user-event';
 import ModalLayer from '../ModalLayer';
 
 /* eslint-disable react/prop-types */
-jest.mock('../Portal', () => function PortalMock(props) {
+jest.mock('../Portal', () => function PortalMock(props: any) {
   const { children, ...otherProps } = props;
   return (
-    <paragon-portal {...otherProps}>
-      {children}
-    </paragon-portal>
+    // @ts-ignore this fake element. (Property 'paragon-portal' does not exist on type 'JSX.IntrinsicElements')
+    <paragon-portal {...otherProps}>{children}</paragon-portal>
   );
 });
 
@@ -19,6 +18,7 @@ jest.mock('react-focus-on', () => ({
   FocusOn: jest.fn().mockImplementation((props) => {
     const { children, ...otherProps } = props;
     return (
+      // @ts-ignore this fake element. (Property 'focus-on' does not exist on type 'JSX.IntrinsicElements')
       <focus-on data-testid="focus-on" {...otherProps}>{children}</focus-on>
     );
   }),
@@ -117,7 +117,7 @@ describe('<ModalLayer />', () => {
       );
       expect(FocusOn).toHaveBeenCalledWith(
         expect.objectContaining({
-          onEscapeKey: null,
+          onEscapeKey: undefined,
         }),
         // note: this 2nd function argument represents the
         // `refOrContext` (in this case, the context value

package/src/Modal/tests/{Portal.test.jsx → Portal.test.tsx}

@@ -21,7 +21,7 @@ describe('<Portal />', () => {
 
     const portalRoot = getPortalRoot();
     expect(portalRoot).not.toBeNull();
-    expect(portalRoot.children[0].id).toBe('portal-content-a');
+    expect(portalRoot!.children[0].id).toBe('portal-content-a');
   });
 
   it('renders both contents in a single #paragon-portal-root div', () => {
@@ -38,7 +38,7 @@ describe('<Portal />', () => {
 
     const portalRoot = getPortalRoot();
     expect(portalRoot).not.toBeNull();
-    expect(portalRoot.children[0].id).toBe('portal-content-a');
-    expect(portalRoot.children[1].id).toBe('portal-content-b');
+    expect(portalRoot!.children[0].id).toBe('portal-content-a');
+    expect(portalRoot!.children[1].id).toBe('portal-content-b');
   });
 });

package/src/Nav/index.scss

@@ -1,5 +1,13 @@
 @import "mixins";
 
+:root {
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+}
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with

package/src/PageBanner/index.scss

@@ -4,12 +4,12 @@
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 

package/src/Pagination/pagination-bootstrap.scss

@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-pagination-focus-box-shadow:
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
+    var(--pgn-elevation-pagination-focus-box-shadow-blur)
+    var(--pgn-elevation-pagination-focus-box-shadow-spread)
+    var(--pgn-elevation-pagination-focus-box-shadow-color);
+}
+
 .pagination {
   display: flex;
 

package/src/Popover/index.scss

@@ -7,7 +7,7 @@
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: var(--pgn-typography-font-size-h5-base);
   }
 
   .pgn__icon {

package/src/ProductTour/Checkpoint.scss

@@ -88,7 +88,7 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }

package/src/ProgressBar/bootstrap-progress.scss

@@ -1,3 +1,18 @@
+:root {
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+}
+
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
@@ -10,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
@@ -22,12 +37,12 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 
-  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+  @include transition(var(--pgn-transition-progress-bar-transition));
 }
 
 .progress-bar-striped {
@@ -38,7 +53,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+    animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {

package/src/ProgressBar/index.scss

@@ -6,7 +6,7 @@
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -22,7 +22,7 @@
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: var(--pgn-color-progress-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -87,6 +87,6 @@
   .pgn__progress-hint {
     box-sizing: border-box;
     padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }

package/src/Stepper/index.scss

@@ -56,7 +56,7 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: var(--pgn-typography-font-size-xs);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {

package/src/Sticky/index.scss

@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+}
+
 .pgn__sticky {
   display: flex;
   width: 100%;

package/src/Toast/index.scss

@@ -1,5 +1,17 @@
 @import "bootstrap-toast";
 
+:root {
+  --pgn-elevation-toast-box-shadow:
+    var(--pgn-elevation-toast-box-shadow-1-offset-x)
+    var(--pgn-elevation-toast-box-shadow-1-offset-y)
+    var(--pgn-elevation-toast-box-shadow-1-blur)
+    var(--pgn-elevation-toast-box-shadow-1-color),
+    var(--pgn-elevation-toast-box-shadow-2-offset-x)
+    var(--pgn-elevation-toast-box-shadow-2-offset-y)
+    var(--pgn-elevation-toast-box-shadow-2-blur)
+    var(--pgn-elevation-toast-box-shadow-2-color);
+}
+
 .toast {
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
@@ -31,7 +43,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: var(--pgn-typography-font-size-sm);
       margin: 0;
       padding-right: .75rem;
     }

package/src/Tooltip/index.scss

@@ -1,3 +1,19 @@
+:root {
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+}
+
 // Base class
 .tooltip {
   position: absolute;

package/src/hooks/useArrowKeyNavigation.jsx

@@ -32,8 +32,7 @@ function handleArrowKey({ event, currentIndex, availableElements }) {
     [nextElement] = availableElements;
   }
 
-  // eslint-disable-next-line no-unused-expressions
-  nextElement && nextElement.focus();
+  nextElement?.focus();
   event.preventDefault();
 }
 

package/src/index.d.ts

@@ -8,10 +8,15 @@ export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container, ContainerSize } from './Container';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as ModalContext } from './Modal/ModalContext';
+export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -38,10 +43,11 @@ export const
 export const
   Carousel: any, CarouselItem: any, CAROUSEL_NEXT_LABEL_TEXT: any, CAROUSEL_PREV_LABEL_TEXT: any;
 // from './Carousel';
+/** @deprecated Replaced by `Form.Checkbox`. */
 export const CheckBox: any; // from './CheckBox';
+/** @deprecated Replaced by `Form.Checkbox` and `Form.CheckboxSet`. */
 export const CheckBoxGroup: any; // from './CheckBoxGroup';
 export const CloseButton: any; // from './CloseButton';
-export const Container: any; // from './Container';
 export const Layout: any, Col: any, Row: any; // from './Layout';
 export const Collapse: any; // from './Collapse';
 export const Collapsible: any; // from './Collapsible';
@@ -53,6 +59,7 @@ export const
   SplitButton: any;
 // from './Dropdown';
 export const Fade: any; // from './Fade';
+/** @deprecated */
 export const Fieldset: any; // from './Fieldset';
 export const
   Form: any,
@@ -77,28 +84,30 @@ export const
   InputGroup: any;
 // from './Form';
 export const IconButtonToggle: any; // from './IconButtonToggle';
+/** @deprecated Replaced by `Form.Control`. */
 export const Input: any; // from './Input';
+/** @deprecated Replaced by `Form.Control`. */
 export const InputSelect: any; // from './InputSelect';
+/** @deprecated Replaced by `Form.Control`. */
 export const InputText: any; // from './InputText';
 export const Image: any, Figure; // from './Image';
+/** @deprecated */
 export const ListBox: any; // from './ListBox';
+/** @deprecated */
 export const ListBoxOption: any; // from './ListBoxOption';
 export const MailtoLink: any, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT: string, MAIL_TO_LINK_EXTERNAL_LINK_TITLE: string; // from './MailtoLink';
 export const Media: any; // from './Media';
 export const Menu: any; // from './Menu';
 export const MenuItem: any; // from './Menu/MenuItem';
 export const SelectMenu: any, SELECT_MENU_DEFAULT_MESSAGE: string; // from './Menu/SelectMenu';
+/** @deprecated Use `ModalDialog` instead. */
 export const Modal: any; // from './Modal';
 export const ModalCloseButton: any; // from './Modal/ModalCloseButton';
 export const FullscreenModal: any, FULLSCREEN_MODAL_CLOSE_LABEL: string; // from './Modal/FullscreenModal';
 export const MarketingModal: any; // from './Modal/MarketingModal';
 export const StandardModal: any, STANDARD_MODAL_CLOSE_LABEL: string; // from './Modal/StandardModal';
 export const AlertModal: any; // from './Modal/AlertModal';
-export const ModalLayer: any; // from './Modal/ModalLayer';
-export const ModalDialog: any, MODAL_DIALOG_CLOSE_LABEL: string; // from './Modal/ModalDialog';
 export const ModalPopup: any; // from './Modal/ModalPopup';
-export const ModalContext: any; // from './Modal/ModalContext';
-export const Portal: any; // from './Modal/Portal';
 export const PopperElement: any; // from './Modal/PopperElement';
 
 export const
@@ -122,6 +131,7 @@ export const
 export const Popover: any, PopoverTitle: any, PopoverContent: any; // from './Popover';
 export const ProgressBar: any; // from './ProgressBar';
 export const ProductTour: any; // from './ProductTour';
+/** @deprecated Replaced by `Form.Radio` and `Form.RadioSet`. */
 export const RadioButtonGroup: any, RadioButton: any; // from './RadioButtonGroup';
 export const ResponsiveEmbed: any; // from './ResponsiveEmbed';
 export const
@@ -135,7 +145,9 @@ export const Sheet: any; // from './Sheet';
 export const Spinner: any; // from './Spinner';
 export const Stepper: any; // from './Stepper';
 export const StatefulButton: any; // from './StatefulButton';
+/** @deprecated Replaced by `Alert`. */
 export const StatusAlert: any; // from './StatusAlert';
+/** @deprecated Replaced by `DataTable`. */
 export const Table: any; // from './Table';
 export const
   Tabs: any,
@@ -144,8 +156,10 @@ export const
   TabContent: any,
   TabPane: any;
 // from './Tabs';
+/** @deprecated Replaced by `Form.Control`. */
 export const TextArea: any; // from './TextArea';
 export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
+/** @deprecated Replaced by `Form.Group`. */
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';
 export const ValidationMessage: any; // from './ValidationMessage';