diff --git a/src/legacy/Lightbox/index.js b/src/legacy/Lightbox/index.js
index ed31e83695..0c2dda6622 100644
--- a/src/legacy/Lightbox/index.js
+++ b/src/legacy/Lightbox/index.js
@@ -33,7 +33,7 @@ class Lightbox extends React.Component {
     window.addEventListener('keydown', this.handleKeyDown, true);
     window.addEventListener('resize', this.handleResize, true);
     const { viewport } = this;
-    if (viewport) {
+    if (viewport && viewport.clientWidth && viewport.clientHeight) {
       // eslint-disable-next-line react/no-did-mount-set-state
       this.setState({
         viewportDimensions: {
@@ -126,7 +126,7 @@ class Lightbox extends React.Component {
       onChange && onChange(index);
     }
     e.stopPropagation();
-    target && target.scrollIntoViewIfNeeded();
+    target && target.scrollIntoViewIfNeeded && target.scrollIntoViewIfNeeded();
     target && needFocus && target.parentElement.focus();
   };
 
@@ -433,7 +433,7 @@ class Lightbox extends React.Component {
               placement="top"
               triggerComponent={
                 <ButtonSimple
-                  className="md-lightbox__control md-lightbox__control-download"
+                  className="md-lightbox__control md-lightbox__control-left"
                   onPress={(e) => this.triggerPageChange(index - 1, e)}
                 >
                   <IconNext
@@ -453,7 +453,7 @@ class Lightbox extends React.Component {
               placement="top"
               triggerComponent={
                 <ButtonSimple
-                  className="md-lightbox__control md-lightbox__control-download"
+                  className="md-lightbox__control md-lightbox__control-right"
                   onPress={(e) => this.triggerPageChange(index + 1, e)}
                 >
                   <IconNext
@@ -486,7 +486,11 @@ class Lightbox extends React.Component {
               type="label"
               placement="top"
               triggerComponent={
-                <ButtonSimple className="md-lightbox__control" onPress={() => this.setZoom(-0.25)}>
+                <ButtonSimple
+                  className="md-lightbox__control"
+                  data-test="zoom-out-button"
+                  onPress={() => this.setZoom(-0.25)}
+                >
                   <IconNext
                     name="zoom-out"
                     color="var(--mds-color-theme-common-text-white)"
@@ -498,14 +502,18 @@ class Lightbox extends React.Component {
             >
               {tooltips.zoomOut}
             </TooltipNext>
-            <span className="md-lightbox__control-value">
-              {Math.round(((newHeight * 1.0) / height) * 100)}%
+            <span className="md-lightbox__control-value md-lightbox__control-zoom-level">
+              {`${Math.round(((newHeight * 1.0) / height) * 100)}%`}
             </span>
             <TooltipNext
               type="label"
               placement="top"
               triggerComponent={
-                <ButtonSimple className="md-lightbox__control" onPress={() => this.setZoom(0.25)}>
+                <ButtonSimple
+                  className="md-lightbox__control"
+                  data-test="zoom-in-button"
+                  onPress={() => this.setZoom(0.25)}
+                >
                   <IconNext
                     name="zoom-in"
                     color="var(--mds-color-theme-common-text-white)"
@@ -554,7 +562,10 @@ class Lightbox extends React.Component {
                 type="label"
                 placement="bottom-start"
                 triggerComponent={
-                  <ButtonSimple className="md-lightbox__control" onPress={this.handleClose}>
+                  <ButtonSimple
+                    className="md-lightbox__control md-lightbox__control-close"
+                    onPress={this.handleClose}
+                  >
                     <IconNext
                       name="cancel"
                       color="var(--mds-color-theme-common-text-white)"
diff --git a/src/legacy/Lightbox/tests/index.spec.js b/src/legacy/Lightbox/tests/index.spec.js
index 17ca841137..c78ffcac94 100644
--- a/src/legacy/Lightbox/tests/index.spec.js
+++ b/src/legacy/Lightbox/tests/index.spec.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Lightbox } from '@momentum-ui/react-collaboration';
+import IconNext from '../../../components/Icon';
+import ButtonSimple from '../../../components/ButtonSimple';
 
 jest.mock('uuid', () => {
   return {
@@ -31,7 +33,7 @@ describe('tests for <Lightbox />', () => {
   });
 
   it('when downloading is true the download button should turn to spinner', () => {
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -48,14 +50,14 @@ describe('tests for <Lightbox />', () => {
         onDownload={jest.fn()}
       />
     );
-    const downloadButton = container.find('.md-lightbox__download-button .icon-download_16');
+    const downloadButton = container.find(IconNext).filter({ name: 'download' });
     expect(downloadButton.length).toEqual(0);
-    const spinner = container.find('Spinner');
+    const spinner = container.find('.md-loading-spinner-wrapper');
     expect(spinner.length).toEqual(1);
   });
 
   it('when downloading is false the download button should be visible', () => {
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -72,9 +74,9 @@ describe('tests for <Lightbox />', () => {
         onDownload={jest.fn()}
       />
     );
-    const downloadButton = container.find('.md-lightbox__control-download');
+    const downloadButton = container.find(IconNext).filter({ name: 'download' });
     expect(downloadButton.length).toEqual(1);
-    const spinner = container.find('.md-lightbox__control-spinner');
+    const spinner = container.find('.md-loading-spinner-wrapper');
     expect(spinner.length).toEqual(0);
   });
 
@@ -108,7 +110,7 @@ describe('tests for <Lightbox />', () => {
   });
 
   it('should display file meta data and name', () => {
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -132,7 +134,9 @@ describe('tests for <Lightbox />', () => {
     const sharedBy = container.find('.md-lightbox__header-sharer');
     const timestamp = container.find('.md-lightbox__header-timestamp');
     const name = container.find('.md-lightbox__header-name');
-    expect(container.props()['aria-labelledby']).toStrictEqual(name.props().id);
+    expect(
+      container.find('.md-lightbox__container').props().children[0].props['aria-labelledby']
+    ).toStrictEqual(name.props().id);
     expect(name.type()).toEqual('h2');
     expect(name.text()).toEqual('test');
     expect(timestamp.text()).toEqual('At 4/17/2018, 10:02 AM');
@@ -141,7 +145,7 @@ describe('tests for <Lightbox />', () => {
 
   it('should change pages on click of next and previous', () => {
     const onChangeFn = jest.fn();
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -174,69 +178,83 @@ describe('tests for <Lightbox />', () => {
         onDownload={jest.fn()}
       />
     );
-    const rightControl = container.find('.md-lightbox__page-controls--right');
-    const leftControl = container.find('.md-lightbox__page-controls--left');
-    rightControl.simulate('click', { stopPropagation: () => {} });
+    const rightControl = container.find(ButtonSimple).filter('.md-lightbox__page-controls--right');
+    const leftControl = container.find(ButtonSimple).filter('.md-lightbox__page-controls--left');
+    rightControl.props().onPress({ stopPropagation: () => {} });
     expect(onChangeFn).toHaveBeenCalledWith(2);
-    leftControl.simulate('click', { stopPropagation: () => {} });
+
+    leftControl.props().onPress({ stopPropagation: () => {} });
     expect(onChangeFn).toHaveBeenCalledWith(0);
   });
 
-  it.each([true, false])('check scrollIntoViewIfNeeded and focus trigger when needFocus is %s', (needFocus) => {
-    const onChangeFn = jest.fn();
-    const container = shallow(<Lightbox
-      applicationId="app"
-      name="test"
-      height={100}
-      width={100}
-      info={{
-        sharedBy: 'Shared by abcd',
-        sharedOn: 'At 4/17/2018, 10:02 AM',
-        size: '34.4 KB',
-      }}
-      pages={[
-        {
-          decrypting: true,
-          image: 'testImage',
-          thumb: 'testImage',
-        },
-        {
-          decrypting: true,
-          image: 'testImage',
-          thumb: 'testImage',
-        },
-      ]}
-      onChange={onChangeFn}
-      onDownload={jest.fn()}
-    />);
+  it.each([true, false])(
+    'check scrollIntoViewIfNeeded and focus trigger when needFocus is %s',
+    (needFocus) => {
+      const onChangeFn = jest.fn();
+      const container = shallow(
+        <Lightbox
+          applicationId="app"
+          name="test"
+          height={100}
+          width={100}
+          info={{
+            sharedBy: 'Shared by abcd',
+            sharedOn: 'At 4/17/2018, 10:02 AM',
+            size: '34.4 KB',
+          }}
+          pages={[
+            {
+              decrypting: true,
+              image: 'testImage',
+              thumb: 'testImage',
+            },
+            {
+              decrypting: true,
+              image: 'testImage',
+              thumb: 'testImage',
+            },
+          ]}
+          onChange={onChangeFn}
+          onDownload={jest.fn()}
+        />
+      );
 
-    container.instance().lightBox = {
-      querySelector: jest.fn().mockReturnValue({
-        scrollIntoViewIfNeeded: jest.fn(),
-        parentElement: {
-          focus: jest.fn(),
-        },
-      }),
-    };
+      container.instance().lightBox = {
+        querySelector: jest.fn().mockReturnValue({
+          scrollIntoViewIfNeeded: jest.fn(),
+          parentElement: {
+            focus: jest.fn(),
+          },
+        }),
+      };
 
-    const index = 1;
-    const mockEvent = { stopPropagation: jest.fn() };
+      const index = 1;
+      const mockEvent = { stopPropagation: jest.fn() };
 
-    container.instance().triggerPageChange(index, mockEvent, needFocus);
+      container.instance().triggerPageChange(index, mockEvent, needFocus);
 
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(container.instance().lightBox.querySelector).toHaveBeenCalledWith(`[data-index="${index}"]`);
-    expect(container.instance().lightBox.querySelector().scrollIntoViewIfNeeded).toHaveBeenCalled();
-    if(needFocus){
-      expect(container.instance().lightBox.querySelector().parentElement.focus).toHaveBeenCalled();
-    } else {
-      expect(container.instance().lightBox.querySelector().parentElement.focus).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).toHaveBeenCalled();
+      expect(container.instance().lightBox.querySelector).toHaveBeenCalledWith(
+        `[data-index="${index}"]`
+      );
+      expect(
+        container.instance().lightBox.querySelector().scrollIntoViewIfNeeded
+      ).toHaveBeenCalled();
+      if (needFocus) {
+        expect(
+          container.instance().lightBox.querySelector().parentElement.focus
+        ).toHaveBeenCalled();
+      } else {
+        expect(
+          container.instance().lightBox.querySelector().parentElement.focus
+        ).not.toHaveBeenCalled();
+      }
     }
-  });
+  );
 
   it('should close the lightbox onClose', () => {
     const onCloseFn = jest.fn();
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -258,13 +276,13 @@ describe('tests for <Lightbox />', () => {
         onDownload={jest.fn()}
       />
     );
-    const closeIcon = container.find('.md-lightbox__header-item--right .md-lightbox__control');
-    closeIcon.simulate('click');
+    const closeIcon = container.find(ButtonSimple).filter('.md-lightbox__control-close');
+    closeIcon.props().onPress();
     expect(onCloseFn).toHaveBeenCalled();
   });
 
   it('should zoom-in and zoom-out', () => {
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -285,15 +303,15 @@ describe('tests for <Lightbox />', () => {
         onDownload={jest.fn()}
       />
     );
-    const zoomIn = container.find('.md-lightbox__viewer-controls .md-lightbox__control').at(1);
-    const zoomOut = container.find('.md-lightbox__viewer-controls .md-lightbox__control').at(0);
-    let zoomValue = container.find('.md-lightbox__controls .md-lightbox__control-value').at(0);
+    const zoomIn = container.find(ButtonSimple).filter({ 'data-test': 'zoom-in-button' });
+    const zoomOut = container.find(ButtonSimple).filter({ 'data-test': 'zoom-out-button' });
+    let zoomValue = container.find('.md-lightbox__controls .md-lightbox__control-zoom-level');
     expect(zoomValue.text()).toEqual('100%');
-    zoomIn.simulate('click');
-    zoomValue = container.find('.md-lightbox__controls .md-lightbox__control-value').at(0);
+    zoomIn.props().onPress();
+    zoomValue = container.find('.md-lightbox__controls .md-lightbox__control-zoom-level');
     expect(zoomValue.text()).toEqual('125%');
-    zoomOut.simulate('click');
-    zoomValue = container.find('.md-lightbox__controls .md-lightbox__control-value').at(0);
+    zoomOut.props().onPress();
+    zoomValue = container.find('.md-lightbox__controls .md-lightbox__control-zoom-level');
     expect(zoomValue.text()).toEqual('100%');
   });
 
@@ -325,7 +343,7 @@ describe('tests for <Lightbox />', () => {
 
   it('onDownload should be called when downloading the file', () => {
     const onDownloadFn = jest.fn();
-    const container = shallow(
+    const container = mount(
       <Lightbox
         applicationId="app"
         name="test"
@@ -346,8 +364,8 @@ describe('tests for <Lightbox />', () => {
         onDownload={onDownloadFn}
       />
     );
-    const downloadIcon = container.find('.md-lightbox__control-download');
-    downloadIcon.simulate('click');
+    const downloadIcon = container.find(ButtonSimple).filter('.md-lightbox__control-download');
+    downloadIcon.props().onPress();
     expect(onDownloadFn).toHaveBeenCalled();
   });
 
@@ -368,9 +386,9 @@ describe('tests for <Lightbox />', () => {
         ]}
       />
     );
-    const downloadButton = container.find('.md-lightbox__download-button .icon-download_16');
+    const downloadButton = container.find(IconNext).filter({ name: 'download' });
     expect(downloadButton.length).toEqual(0);
-    const spinner = container.find('Spinner');
+    const spinner = container.find('.md-loading-spinner-wrapper');
     expect(spinner.length).toEqual(0);
   });
 
diff --git a/src/legacy/Lightbox/tests/index.spec.js.snap b/src/legacy/Lightbox/tests/index.spec.js.snap
index edbd9e7283..94d0b30e50 100644
--- a/src/legacy/Lightbox/tests/index.spec.js.snap
+++ b/src/legacy/Lightbox/tests/index.spec.js.snap
@@ -102,16 +102,16 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                     <div
                       class="md-lightbox__header-item--right"
                     >
+                      <button
+                        aria-labelledby="test-ID"
+                        class="md-lightbox__control md-lightbox__control-close md-button-simple-wrapper"
+                        type="button"
+                      />
                       <div
-                        aria-label="Exit"
-                        class="md-lightbox__control"
-                        role="button"
-                        tabindex="0"
+                        class="md-tooltip-label"
+                        id="test-ID"
                       >
-                        <i
-                          class="md-icon icon icon-cancel_16"
-                          style="font-size: 16px;"
-                        />
+                        Exit
                       </div>
                     </div>
                   </div>
@@ -132,7 +132,7 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                         />
                         <div
                           class="md-lightbox__viewport-wrapper"
-                          style="width: 0px; height: 0px;"
+                          style="width: 100px; height: 100px;"
                         >
                           <img
                             alt="test"
@@ -149,33 +149,34 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                         <div
                           class="md-lightbox__controls"
                         >
+                          <button
+                            aria-labelledby="test-ID"
+                            class="md-lightbox__control md-button-simple-wrapper"
+                            data-test="zoom-out-button"
+                            type="button"
+                          />
                           <div
-                            aria-label="Zoom out"
-                            class="md-lightbox__control"
-                            role="button"
-                            tabindex="0"
+                            class="md-tooltip-label"
+                            id="test-ID"
                           >
-                            <i
-                              class="md-icon icon icon-zoom-out_16"
-                              style="font-size: 16px;"
-                            />
+                            Zoom out
                           </div>
                           <span
-                            class="md-lightbox__control-value"
+                            class="md-lightbox__control-value md-lightbox__control-zoom-level"
                           >
-                            0
-                            %
+                            100%
                           </span>
+                          <button
+                            aria-labelledby="test-ID"
+                            class="md-lightbox__control md-button-simple-wrapper"
+                            data-test="zoom-in-button"
+                            type="button"
+                          />
                           <div
-                            aria-label="Zoom in"
-                            class="md-lightbox__control"
-                            role="button"
-                            tabindex="0"
+                            class="md-tooltip-label"
+                            id="test-ID"
                           >
-                            <i
-                              class="md-icon icon icon-zoom-in_16"
-                              style="font-size: 16px;"
-                            />
+                            Zoom in
                           </div>
                         </div>
                         <div
@@ -187,23 +188,16 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                             1
                           </span>
                         </div>
+                        <button
+                          aria-labelledby="test-ID"
+                          class="md-lightbox__control md-lightbox__control-download md-button-simple-wrapper"
+                          type="button"
+                        />
                         <div
-                          class="md-lightbox__controls"
+                          class="md-tooltip-label"
+                          id="test-ID"
                         >
-                          <span
-                            class="md-lightbox__control-value"
-                          />
-                          <div
-                            aria-label="Download"
-                            class="md-lightbox__control md-lightbox__control-download"
-                            role="button"
-                            tabindex="0"
-                          >
-                            <i
-                              class="md-icon icon icon-download_16"
-                              style="font-size: 16px;"
-                            />
-                          </div>
+                          Download
                         </div>
                       </div>
                     </div>
@@ -297,84 +291,275 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                         className="md-lightbox__header-item--right"
                       >
                         <Tooltip
-                          className=""
-                          popoverProps={
-                            Object {
-                              "direction": "bottom-right",
-                              "isContained": true,
-                            }
+                          placement="bottom-start"
+                          triggerComponent={
+                            <ButtonSimple
+                              className="md-lightbox__control md-lightbox__control-close"
+                              onPress={[Function]}
+                            >
+                              <Icon
+                                color="var(--mds-color-theme-common-text-white)"
+                                name="cancel"
+                                scale={20}
+                                weight="light"
+                              />
+                            </ButtonSimple>
                           }
-                          tooltip="Exit"
-                          tooltipTrigger="MouseEnter"
-                          width={null}
+                          type="label"
                         >
                           <Popover
-                            autoFocusOnFirstElt={false}
-                            className="md-tooltip"
-                            closeOnFocusLeavesContent={false}
-                            content={
-                              <span
-                                className="md-tooltip__text"
+                            addBackdrop={false}
+                            aria-hidden={false}
+                            boundary="scrollParent"
+                            color="primary"
+                            interactive={false}
+                            offsetDistance={5}
+                            offsetSkidding={0}
+                            placement="bottom-start"
+                            role="tooltip"
+                            setInstance={[Function]}
+                            showArrow={true}
+                            strategy="absolute"
+                            trigger="mouseenter focus"
+                            triggerComponent={
+                              <ButtonSimple
+                                aria-labelledby="test-ID"
+                                className="md-lightbox__control md-lightbox__control-close"
+                                onPress={[Function]}
                               >
-                                Exit
-                              </span>
+                                <Icon
+                                  color="var(--mds-color-theme-common-text-white)"
+                                  name="cancel"
+                                  scale={20}
+                                  weight="light"
+                                />
+                              </ButtonSimple>
                             }
-                            delay={0}
-                            direction="bottom-right"
-                            doesAnchorToggle={true}
-                            hideDelay={0}
-                            hoverDelay={500}
-                            includeFocusOnHover={true}
-                            isContained={true}
-                            onClose={null}
-                            overflowType="auto"
-                            popoverTrigger="MouseEnter"
-                            showArrow={true}
-                            showDelay={0}
-                            startOpen={false}
+                            variant="small"
                           >
-                            <div
-                              aria-label="Exit"
-                              className="md-lightbox__control"
-                              key="child-1"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onKeyPress={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              role="button"
-                              tabIndex="0"
+                            <LazyTippy
+                              animation={false}
+                              appendTo="parent"
+                              hideOnClick={true}
+                              interactive={false}
+                              offset={
+                                Array [
+                                  0,
+                                  17,
+                                ]
+                              }
+                              onHidden={[Function]}
+                              placement="bottom-start"
+                              plugins={
+                                Array [
+                                  Object {
+                                    "defaultValue": true,
+                                    "fn": [Function],
+                                    "name": "hideOnEsc",
+                                  },
+                                ]
+                              }
+                              popperOptions={
+                                Object {
+                                  "modifiers": Array [
+                                    Object {
+                                      "enabled": true,
+                                      "name": "arrow",
+                                      "options": Object {
+                                        "element": "#arrowtest-ID",
+                                        "padding": 5,
+                                      },
+                                    },
+                                    Object {
+                                      "name": "preventOverflow",
+                                      "options": Object {
+                                        "altAxis": true,
+                                        "boundariesElement": "scrollParent",
+                                        "padding": 8,
+                                      },
+                                    },
+                                  ],
+                                  "strategy": "absolute",
+                                }
+                              }
+                              render={[Function]}
+                              setInstance={[Function]}
+                              trigger="mouseenter focus"
                             >
-                              <Icon
-                                append={false}
-                                ariaLabel={null}
-                                buttonClassName=""
-                                buttonProps={null}
-                                className=""
-                                color=""
-                                description=""
-                                name="cancel_16"
-                                onClick={null}
-                                prepend={false}
-                                size={null}
-                                sizeOverride={false}
-                                style={null}
-                                title=""
-                                type=""
+                              <ForwardRef(TippyWrapper)
+                                animation={false}
+                                appendTo="parent"
+                                hideOnClick={true}
+                                interactive={false}
+                                offset={
+                                  Array [
+                                    0,
+                                    17,
+                                  ]
+                                }
+                                onHidden={[Function]}
+                                placement="bottom-start"
+                                plugins={
+                                  Array [
+                                    Object {
+                                      "fn": [Function],
+                                    },
+                                    Object {
+                                      "fn": [Function],
+                                    },
+                                    Object {
+                                      "fn": [Function],
+                                    },
+                                    Object {
+                                      "defaultValue": true,
+                                      "fn": [Function],
+                                      "name": "hideOnEsc",
+                                    },
+                                  ]
+                                }
+                                popperOptions={
+                                  Object {
+                                    "modifiers": Array [
+                                      Object {
+                                        "enabled": true,
+                                        "name": "arrow",
+                                        "options": Object {
+                                          "element": "#arrowtest-ID",
+                                          "padding": 5,
+                                        },
+                                      },
+                                      Object {
+                                        "name": "preventOverflow",
+                                        "options": Object {
+                                          "altAxis": true,
+                                          "boundariesElement": "scrollParent",
+                                          "padding": 8,
+                                        },
+                                      },
+                                    ],
+                                    "strategy": "absolute",
+                                  }
+                                }
+                                render={[Function]}
+                                trigger="mouseenter focus"
                               >
-                                <i
-                                  aria-label={null}
-                                  className="md-icon icon icon-cancel_16"
-                                  style={
+                                <Tippy
+                                  animation={false}
+                                  appendTo="parent"
+                                  hideOnClick={true}
+                                  interactive={false}
+                                  offset={
+                                    Array [
+                                      0,
+                                      17,
+                                    ]
+                                  }
+                                  onHidden={[Function]}
+                                  placement="bottom-start"
+                                  plugins={
+                                    Array [
+                                      Object {
+                                        "fn": [Function],
+                                      },
+                                      Object {
+                                        "fn": [Function],
+                                      },
+                                      Object {
+                                        "fn": [Function],
+                                      },
+                                      Object {
+                                        "defaultValue": true,
+                                        "fn": [Function],
+                                        "name": "hideOnEsc",
+                                      },
+                                    ]
+                                  }
+                                  popperOptions={
                                     Object {
-                                      "fontSize": 16,
+                                      "modifiers": Array [
+                                        Object {
+                                          "enabled": true,
+                                          "name": "arrow",
+                                          "options": Object {
+                                            "element": "#arrowtest-ID",
+                                            "padding": 5,
+                                          },
+                                        },
+                                        Object {
+                                          "name": "preventOverflow",
+                                          "options": Object {
+                                            "altAxis": true,
+                                            "boundariesElement": "scrollParent",
+                                            "padding": 8,
+                                          },
+                                        },
+                                      ],
+                                      "strategy": "absolute",
                                     }
                                   }
-                                />
-                              </Icon>
-                            </div>
+                                  render={[Function]}
+                                  trigger="mouseenter focus"
+                                >
+                                  <ButtonSimple
+                                    aria-labelledby="test-ID"
+                                    className="md-lightbox__control md-lightbox__control-close"
+                                    onPress={[Function]}
+                                    useNativeKeyDown={true}
+                                  >
+                                    <FocusRing>
+                                      <FocusRing
+                                        focusClass="md-focus-ring-wrapper children"
+                                        focusRingClass="md-focus-ring-wrapper children"
+                                      >
+                                        <button
+                                          aria-labelledby="test-ID"
+                                          className="md-lightbox__control md-lightbox__control-close md-button-simple-wrapper"
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onDragStart={[Function]}
+                                          onFocus={[Function]}
+                                          onKeyUp={[Function]}
+                                          onMouseDown={[Function]}
+                                          onMouseEnter={[Function]}
+                                          onMouseLeave={[Function]}
+                                          onMouseUp={[Function]}
+                                          onTouchCancel={[Function]}
+                                          onTouchEnd={[Function]}
+                                          onTouchMove={[Function]}
+                                          onTouchStart={[Function]}
+                                          type="button"
+                                        >
+                                          <Icon
+                                            color="var(--mds-color-theme-common-text-white)"
+                                            name="cancel"
+                                            scale={20}
+                                            weight="light"
+                                          />
+                                        </button>
+                                      </FocusRing>
+                                    </FocusRing>
+                                  </ButtonSimple>
+                                  <Portal
+                                    containerInfo={
+                                      <div
+                                        data-tippy-root=""
+                                        id="tippy-1"
+                                        style="pointer-events: none; z-index: 9999;"
+                                      >
+                                        
+                                      </div>
+                                    }
+                                  />
+                                </Tippy>
+                              </ForwardRef(TippyWrapper)>
+                            </LazyTippy>
                           </Popover>
+                          <div
+                            className="md-tooltip-label"
+                            id="test-ID"
+                          >
+                            Exit
+                          </div>
                         </Tooltip>
                       </div>
                     </div>
@@ -408,8 +593,8 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                             className="md-lightbox__viewport-wrapper"
                             style={
                               Object {
-                                "height": "0px",
-                                "width": "0px",
+                                "height": "100px",
+                                "width": "100px",
                               }
                             }
                           >
@@ -436,156 +621,559 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                             style={Object {}}
                           >
                             <Tooltip
-                              className=""
-                              popoverProps={Object {}}
-                              tooltip="Zoom out"
-                              tooltipTrigger="MouseEnter"
-                              width={null}
+                              placement="top"
+                              triggerComponent={
+                                <ButtonSimple
+                                  className="md-lightbox__control"
+                                  data-test="zoom-out-button"
+                                  onPress={[Function]}
+                                >
+                                  <Icon
+                                    color="var(--mds-color-theme-common-text-white)"
+                                    name="zoom-out"
+                                    scale={20}
+                                    weight="light"
+                                  />
+                                </ButtonSimple>
+                              }
+                              type="label"
                             >
                               <Popover
-                                autoFocusOnFirstElt={false}
-                                className="md-tooltip"
-                                closeOnFocusLeavesContent={false}
-                                content={
-                                  <span
-                                    className="md-tooltip__text"
+                                addBackdrop={false}
+                                aria-hidden={false}
+                                boundary="scrollParent"
+                                color="primary"
+                                interactive={false}
+                                offsetDistance={5}
+                                offsetSkidding={0}
+                                placement="top"
+                                role="tooltip"
+                                setInstance={[Function]}
+                                showArrow={true}
+                                strategy="absolute"
+                                trigger="mouseenter focus"
+                                triggerComponent={
+                                  <ButtonSimple
+                                    aria-labelledby="test-ID"
+                                    className="md-lightbox__control"
+                                    data-test="zoom-out-button"
+                                    onPress={[Function]}
                                   >
-                                    Zoom out
-                                  </span>
+                                    <Icon
+                                      color="var(--mds-color-theme-common-text-white)"
+                                      name="zoom-out"
+                                      scale={20}
+                                      weight="light"
+                                    />
+                                  </ButtonSimple>
                                 }
-                                delay={0}
-                                doesAnchorToggle={true}
-                                hideDelay={0}
-                                hoverDelay={500}
-                                includeFocusOnHover={true}
-                                onClose={null}
-                                overflowType="auto"
-                                popoverTrigger="MouseEnter"
-                                showArrow={true}
-                                showDelay={0}
-                                startOpen={false}
+                                variant="small"
                               >
-                                <div
-                                  aria-label="Zoom out"
-                                  className="md-lightbox__control"
-                                  key="child-1"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onKeyPress={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  role="button"
-                                  tabIndex="0"
+                                <LazyTippy
+                                  animation={false}
+                                  appendTo="parent"
+                                  hideOnClick={true}
+                                  interactive={false}
+                                  offset={
+                                    Array [
+                                      0,
+                                      17,
+                                    ]
+                                  }
+                                  onHidden={[Function]}
+                                  placement="top"
+                                  plugins={
+                                    Array [
+                                      Object {
+                                        "defaultValue": true,
+                                        "fn": [Function],
+                                        "name": "hideOnEsc",
+                                      },
+                                    ]
+                                  }
+                                  popperOptions={
+                                    Object {
+                                      "modifiers": Array [
+                                        Object {
+                                          "enabled": true,
+                                          "name": "arrow",
+                                          "options": Object {
+                                            "element": "#arrowtest-ID",
+                                            "padding": 5,
+                                          },
+                                        },
+                                        Object {
+                                          "name": "preventOverflow",
+                                          "options": Object {
+                                            "altAxis": true,
+                                            "boundariesElement": "scrollParent",
+                                            "padding": 8,
+                                          },
+                                        },
+                                      ],
+                                      "strategy": "absolute",
+                                    }
+                                  }
+                                  render={[Function]}
+                                  setInstance={[Function]}
+                                  trigger="mouseenter focus"
                                 >
-                                  <Icon
-                                    append={false}
-                                    ariaLabel={null}
-                                    buttonClassName=""
-                                    buttonProps={null}
-                                    className=""
-                                    color=""
-                                    description=""
-                                    name="zoom-out_16"
-                                    onClick={null}
-                                    prepend={false}
-                                    size={null}
-                                    sizeOverride={false}
-                                    style={null}
-                                    title=""
-                                    type=""
+                                  <ForwardRef(TippyWrapper)
+                                    animation={false}
+                                    appendTo="parent"
+                                    hideOnClick={true}
+                                    interactive={false}
+                                    offset={
+                                      Array [
+                                        0,
+                                        17,
+                                      ]
+                                    }
+                                    onHidden={[Function]}
+                                    placement="top"
+                                    plugins={
+                                      Array [
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "defaultValue": true,
+                                          "fn": [Function],
+                                          "name": "hideOnEsc",
+                                        },
+                                      ]
+                                    }
+                                    popperOptions={
+                                      Object {
+                                        "modifiers": Array [
+                                          Object {
+                                            "enabled": true,
+                                            "name": "arrow",
+                                            "options": Object {
+                                              "element": "#arrowtest-ID",
+                                              "padding": 5,
+                                            },
+                                          },
+                                          Object {
+                                            "name": "preventOverflow",
+                                            "options": Object {
+                                              "altAxis": true,
+                                              "boundariesElement": "scrollParent",
+                                              "padding": 8,
+                                            },
+                                          },
+                                        ],
+                                        "strategy": "absolute",
+                                      }
+                                    }
+                                    render={[Function]}
+                                    trigger="mouseenter focus"
                                   >
-                                    <i
-                                      aria-label={null}
-                                      className="md-icon icon icon-zoom-out_16"
-                                      style={
+                                    <Tippy
+                                      animation={false}
+                                      appendTo="parent"
+                                      hideOnClick={true}
+                                      interactive={false}
+                                      offset={
+                                        Array [
+                                          0,
+                                          17,
+                                        ]
+                                      }
+                                      onHidden={[Function]}
+                                      placement="top"
+                                      plugins={
+                                        Array [
+                                          Object {
+                                            "fn": [Function],
+                                          },
+                                          Object {
+                                            "fn": [Function],
+                                          },
+                                          Object {
+                                            "fn": [Function],
+                                          },
+                                          Object {
+                                            "defaultValue": true,
+                                            "fn": [Function],
+                                            "name": "hideOnEsc",
+                                          },
+                                        ]
+                                      }
+                                      popperOptions={
                                         Object {
-                                          "fontSize": 16,
+                                          "modifiers": Array [
+                                            Object {
+                                              "enabled": true,
+                                              "name": "arrow",
+                                              "options": Object {
+                                                "element": "#arrowtest-ID",
+                                                "padding": 5,
+                                              },
+                                            },
+                                            Object {
+                                              "name": "preventOverflow",
+                                              "options": Object {
+                                                "altAxis": true,
+                                                "boundariesElement": "scrollParent",
+                                                "padding": 8,
+                                              },
+                                            },
+                                          ],
+                                          "strategy": "absolute",
                                         }
                                       }
-                                    />
-                                  </Icon>
-                                </div>
+                                      render={[Function]}
+                                      trigger="mouseenter focus"
+                                    >
+                                      <ButtonSimple
+                                        aria-labelledby="test-ID"
+                                        className="md-lightbox__control"
+                                        data-test="zoom-out-button"
+                                        onPress={[Function]}
+                                        useNativeKeyDown={true}
+                                      >
+                                        <FocusRing>
+                                          <FocusRing
+                                            focusClass="md-focus-ring-wrapper children"
+                                            focusRingClass="md-focus-ring-wrapper children"
+                                          >
+                                            <button
+                                              aria-labelledby="test-ID"
+                                              className="md-lightbox__control md-button-simple-wrapper"
+                                              data-test="zoom-out-button"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onDragStart={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyUp={[Function]}
+                                              onMouseDown={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseUp={[Function]}
+                                              onTouchCancel={[Function]}
+                                              onTouchEnd={[Function]}
+                                              onTouchMove={[Function]}
+                                              onTouchStart={[Function]}
+                                              type="button"
+                                            >
+                                              <Icon
+                                                color="var(--mds-color-theme-common-text-white)"
+                                                name="zoom-out"
+                                                scale={20}
+                                                weight="light"
+                                              />
+                                            </button>
+                                          </FocusRing>
+                                        </FocusRing>
+                                      </ButtonSimple>
+                                      <Portal
+                                        containerInfo={
+                                          <div
+                                            data-tippy-root=""
+                                            id="tippy-2"
+                                            style="pointer-events: none; z-index: 9999;"
+                                          >
+                                            
+                                          </div>
+                                        }
+                                      />
+                                    </Tippy>
+                                  </ForwardRef(TippyWrapper)>
+                                </LazyTippy>
                               </Popover>
+                              <div
+                                className="md-tooltip-label"
+                                id="test-ID"
+                              >
+                                Zoom out
+                              </div>
                             </Tooltip>
                             <span
-                              className="md-lightbox__control-value"
+                              className="md-lightbox__control-value md-lightbox__control-zoom-level"
                             >
-                              0
-                              %
+                              100%
                             </span>
                             <Tooltip
-                              className=""
-                              popoverProps={Object {}}
-                              tooltip="Zoom in"
-                              tooltipTrigger="MouseEnter"
-                              width={null}
+                              placement="top"
+                              triggerComponent={
+                                <ButtonSimple
+                                  className="md-lightbox__control"
+                                  data-test="zoom-in-button"
+                                  onPress={[Function]}
+                                >
+                                  <Icon
+                                    color="var(--mds-color-theme-common-text-white)"
+                                    name="zoom-in"
+                                    scale={20}
+                                    weight="light"
+                                  />
+                                </ButtonSimple>
+                              }
+                              type="label"
                             >
                               <Popover
-                                autoFocusOnFirstElt={false}
-                                className="md-tooltip"
-                                closeOnFocusLeavesContent={false}
-                                content={
-                                  <span
-                                    className="md-tooltip__text"
+                                addBackdrop={false}
+                                aria-hidden={false}
+                                boundary="scrollParent"
+                                color="primary"
+                                interactive={false}
+                                offsetDistance={5}
+                                offsetSkidding={0}
+                                placement="top"
+                                role="tooltip"
+                                setInstance={[Function]}
+                                showArrow={true}
+                                strategy="absolute"
+                                trigger="mouseenter focus"
+                                triggerComponent={
+                                  <ButtonSimple
+                                    aria-labelledby="test-ID"
+                                    className="md-lightbox__control"
+                                    data-test="zoom-in-button"
+                                    onPress={[Function]}
                                   >
-                                    Zoom in
-                                  </span>
+                                    <Icon
+                                      color="var(--mds-color-theme-common-text-white)"
+                                      name="zoom-in"
+                                      scale={20}
+                                      weight="light"
+                                    />
+                                  </ButtonSimple>
                                 }
-                                delay={0}
-                                doesAnchorToggle={true}
-                                hideDelay={0}
-                                hoverDelay={500}
-                                includeFocusOnHover={true}
-                                onClose={null}
-                                overflowType="auto"
-                                popoverTrigger="MouseEnter"
-                                showArrow={true}
-                                showDelay={0}
-                                startOpen={false}
+                                variant="small"
                               >
-                                <div
-                                  aria-label="Zoom in"
-                                  className="md-lightbox__control"
-                                  key="child-1"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onKeyPress={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  role="button"
-                                  tabIndex="0"
+                                <LazyTippy
+                                  animation={false}
+                                  appendTo="parent"
+                                  hideOnClick={true}
+                                  interactive={false}
+                                  offset={
+                                    Array [
+                                      0,
+                                      17,
+                                    ]
+                                  }
+                                  onHidden={[Function]}
+                                  placement="top"
+                                  plugins={
+                                    Array [
+                                      Object {
+                                        "defaultValue": true,
+                                        "fn": [Function],
+                                        "name": "hideOnEsc",
+                                      },
+                                    ]
+                                  }
+                                  popperOptions={
+                                    Object {
+                                      "modifiers": Array [
+                                        Object {
+                                          "enabled": true,
+                                          "name": "arrow",
+                                          "options": Object {
+                                            "element": "#arrowtest-ID",
+                                            "padding": 5,
+                                          },
+                                        },
+                                        Object {
+                                          "name": "preventOverflow",
+                                          "options": Object {
+                                            "altAxis": true,
+                                            "boundariesElement": "scrollParent",
+                                            "padding": 8,
+                                          },
+                                        },
+                                      ],
+                                      "strategy": "absolute",
+                                    }
+                                  }
+                                  render={[Function]}
+                                  setInstance={[Function]}
+                                  trigger="mouseenter focus"
                                 >
-                                  <Icon
-                                    append={false}
-                                    ariaLabel={null}
-                                    buttonClassName=""
-                                    buttonProps={null}
-                                    className=""
-                                    color=""
-                                    description=""
-                                    name="zoom-in_16"
-                                    onClick={null}
-                                    prepend={false}
-                                    size={null}
-                                    sizeOverride={false}
-                                    style={null}
-                                    title=""
-                                    type=""
+                                  <ForwardRef(TippyWrapper)
+                                    animation={false}
+                                    appendTo="parent"
+                                    hideOnClick={true}
+                                    interactive={false}
+                                    offset={
+                                      Array [
+                                        0,
+                                        17,
+                                      ]
+                                    }
+                                    onHidden={[Function]}
+                                    placement="top"
+                                    plugins={
+                                      Array [
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "defaultValue": true,
+                                          "fn": [Function],
+                                          "name": "hideOnEsc",
+                                        },
+                                      ]
+                                    }
+                                    popperOptions={
+                                      Object {
+                                        "modifiers": Array [
+                                          Object {
+                                            "enabled": true,
+                                            "name": "arrow",
+                                            "options": Object {
+                                              "element": "#arrowtest-ID",
+                                              "padding": 5,
+                                            },
+                                          },
+                                          Object {
+                                            "name": "preventOverflow",
+                                            "options": Object {
+                                              "altAxis": true,
+                                              "boundariesElement": "scrollParent",
+                                              "padding": 8,
+                                            },
+                                          },
+                                        ],
+                                        "strategy": "absolute",
+                                      }
+                                    }
+                                    render={[Function]}
+                                    trigger="mouseenter focus"
                                   >
-                                    <i
-                                      aria-label={null}
-                                      className="md-icon icon icon-zoom-in_16"
-                                      style={
+                                    <Tippy
+                                      animation={false}
+                                      appendTo="parent"
+                                      hideOnClick={true}
+                                      interactive={false}
+                                      offset={
+                                        Array [
+                                          0,
+                                          17,
+                                        ]
+                                      }
+                                      onHidden={[Function]}
+                                      placement="top"
+                                      plugins={
+                                        Array [
+                                          Object {
+                                            "fn": [Function],
+                                          },
+                                          Object {
+                                            "fn": [Function],
+                                          },
+                                          Object {
+                                            "fn": [Function],
+                                          },
+                                          Object {
+                                            "defaultValue": true,
+                                            "fn": [Function],
+                                            "name": "hideOnEsc",
+                                          },
+                                        ]
+                                      }
+                                      popperOptions={
                                         Object {
-                                          "fontSize": 16,
+                                          "modifiers": Array [
+                                            Object {
+                                              "enabled": true,
+                                              "name": "arrow",
+                                              "options": Object {
+                                                "element": "#arrowtest-ID",
+                                                "padding": 5,
+                                              },
+                                            },
+                                            Object {
+                                              "name": "preventOverflow",
+                                              "options": Object {
+                                                "altAxis": true,
+                                                "boundariesElement": "scrollParent",
+                                                "padding": 8,
+                                              },
+                                            },
+                                          ],
+                                          "strategy": "absolute",
                                         }
                                       }
-                                    />
-                                  </Icon>
-                                </div>
+                                      render={[Function]}
+                                      trigger="mouseenter focus"
+                                    >
+                                      <ButtonSimple
+                                        aria-labelledby="test-ID"
+                                        className="md-lightbox__control"
+                                        data-test="zoom-in-button"
+                                        onPress={[Function]}
+                                        useNativeKeyDown={true}
+                                      >
+                                        <FocusRing>
+                                          <FocusRing
+                                            focusClass="md-focus-ring-wrapper children"
+                                            focusRingClass="md-focus-ring-wrapper children"
+                                          >
+                                            <button
+                                              aria-labelledby="test-ID"
+                                              className="md-lightbox__control md-button-simple-wrapper"
+                                              data-test="zoom-in-button"
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onDragStart={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyUp={[Function]}
+                                              onMouseDown={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              onMouseUp={[Function]}
+                                              onTouchCancel={[Function]}
+                                              onTouchEnd={[Function]}
+                                              onTouchMove={[Function]}
+                                              onTouchStart={[Function]}
+                                              type="button"
+                                            >
+                                              <Icon
+                                                color="var(--mds-color-theme-common-text-white)"
+                                                name="zoom-in"
+                                                scale={20}
+                                                weight="light"
+                                              />
+                                            </button>
+                                          </FocusRing>
+                                        </FocusRing>
+                                      </ButtonSimple>
+                                      <Portal
+                                        containerInfo={
+                                          <div
+                                            data-tippy-root=""
+                                            id="tippy-3"
+                                            style="pointer-events: none; z-index: 9999;"
+                                          >
+                                            
+                                          </div>
+                                        }
+                                      />
+                                    </Tippy>
+                                  </ForwardRef(TippyWrapper)>
+                                </LazyTippy>
                               </Popover>
+                              <div
+                                className="md-tooltip-label"
+                                id="test-ID"
+                              >
+                                Zoom in
+                              </div>
                             </Tooltip>
                           </div>
                           <div
@@ -597,87 +1185,277 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                               1
                             </span>
                           </div>
-                          <div
-                            className="md-lightbox__controls"
-                            style={Object {}}
+                          <Tooltip
+                            placement="top"
+                            triggerComponent={
+                              <ButtonSimple
+                                className="md-lightbox__control md-lightbox__control-download"
+                                onPress={[Function]}
+                              >
+                                <Icon
+                                  color="var(--mds-color-theme-common-text-white)"
+                                  name="download"
+                                  scale={20}
+                                  weight="light"
+                                />
+                              </ButtonSimple>
+                            }
+                            type="label"
                           >
-                            <span
-                              className="md-lightbox__control-value"
-                            />
-                            <Tooltip
-                              className=""
-                              popoverProps={Object {}}
-                              tooltip="Download"
-                              tooltipTrigger="MouseEnter"
-                              width={null}
+                            <Popover
+                              addBackdrop={false}
+                              aria-hidden={false}
+                              boundary="scrollParent"
+                              color="primary"
+                              interactive={false}
+                              offsetDistance={5}
+                              offsetSkidding={0}
+                              placement="top"
+                              role="tooltip"
+                              setInstance={[Function]}
+                              showArrow={true}
+                              strategy="absolute"
+                              trigger="mouseenter focus"
+                              triggerComponent={
+                                <ButtonSimple
+                                  aria-labelledby="test-ID"
+                                  className="md-lightbox__control md-lightbox__control-download"
+                                  onPress={[Function]}
+                                >
+                                  <Icon
+                                    color="var(--mds-color-theme-common-text-white)"
+                                    name="download"
+                                    scale={20}
+                                    weight="light"
+                                  />
+                                </ButtonSimple>
+                              }
+                              variant="small"
                             >
-                              <Popover
-                                autoFocusOnFirstElt={false}
-                                className="md-tooltip"
-                                closeOnFocusLeavesContent={false}
-                                content={
-                                  <span
-                                    className="md-tooltip__text"
-                                  >
-                                    Download
-                                  </span>
+                              <LazyTippy
+                                animation={false}
+                                appendTo="parent"
+                                hideOnClick={true}
+                                interactive={false}
+                                offset={
+                                  Array [
+                                    0,
+                                    17,
+                                  ]
                                 }
-                                delay={0}
-                                doesAnchorToggle={true}
-                                hideDelay={0}
-                                hoverDelay={500}
-                                includeFocusOnHover={true}
-                                onClose={null}
-                                overflowType="auto"
-                                popoverTrigger="MouseEnter"
-                                showArrow={true}
-                                showDelay={0}
-                                startOpen={false}
+                                onHidden={[Function]}
+                                placement="top"
+                                plugins={
+                                  Array [
+                                    Object {
+                                      "defaultValue": true,
+                                      "fn": [Function],
+                                      "name": "hideOnEsc",
+                                    },
+                                  ]
+                                }
+                                popperOptions={
+                                  Object {
+                                    "modifiers": Array [
+                                      Object {
+                                        "enabled": true,
+                                        "name": "arrow",
+                                        "options": Object {
+                                          "element": "#arrowtest-ID",
+                                          "padding": 5,
+                                        },
+                                      },
+                                      Object {
+                                        "name": "preventOverflow",
+                                        "options": Object {
+                                          "altAxis": true,
+                                          "boundariesElement": "scrollParent",
+                                          "padding": 8,
+                                        },
+                                      },
+                                    ],
+                                    "strategy": "absolute",
+                                  }
+                                }
+                                render={[Function]}
+                                setInstance={[Function]}
+                                trigger="mouseenter focus"
                               >
-                                <div
-                                  aria-label="Download"
-                                  className="md-lightbox__control md-lightbox__control-download"
-                                  key="child-1"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onKeyPress={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  role="button"
-                                  tabIndex="0"
+                                <ForwardRef(TippyWrapper)
+                                  animation={false}
+                                  appendTo="parent"
+                                  hideOnClick={true}
+                                  interactive={false}
+                                  offset={
+                                    Array [
+                                      0,
+                                      17,
+                                    ]
+                                  }
+                                  onHidden={[Function]}
+                                  placement="top"
+                                  plugins={
+                                    Array [
+                                      Object {
+                                        "fn": [Function],
+                                      },
+                                      Object {
+                                        "fn": [Function],
+                                      },
+                                      Object {
+                                        "fn": [Function],
+                                      },
+                                      Object {
+                                        "defaultValue": true,
+                                        "fn": [Function],
+                                        "name": "hideOnEsc",
+                                      },
+                                    ]
+                                  }
+                                  popperOptions={
+                                    Object {
+                                      "modifiers": Array [
+                                        Object {
+                                          "enabled": true,
+                                          "name": "arrow",
+                                          "options": Object {
+                                            "element": "#arrowtest-ID",
+                                            "padding": 5,
+                                          },
+                                        },
+                                        Object {
+                                          "name": "preventOverflow",
+                                          "options": Object {
+                                            "altAxis": true,
+                                            "boundariesElement": "scrollParent",
+                                            "padding": 8,
+                                          },
+                                        },
+                                      ],
+                                      "strategy": "absolute",
+                                    }
+                                  }
+                                  render={[Function]}
+                                  trigger="mouseenter focus"
                                 >
-                                  <Icon
-                                    append={false}
-                                    ariaLabel={null}
-                                    buttonClassName=""
-                                    buttonProps={null}
-                                    className=""
-                                    color=""
-                                    description=""
-                                    name="download_16"
-                                    onClick={null}
-                                    prepend={false}
-                                    size={null}
-                                    sizeOverride={false}
-                                    style={null}
-                                    title=""
-                                    type=""
-                                  >
-                                    <i
-                                      aria-label={null}
-                                      className="md-icon icon icon-download_16"
-                                      style={
+                                  <Tippy
+                                    animation={false}
+                                    appendTo="parent"
+                                    hideOnClick={true}
+                                    interactive={false}
+                                    offset={
+                                      Array [
+                                        0,
+                                        17,
+                                      ]
+                                    }
+                                    onHidden={[Function]}
+                                    placement="top"
+                                    plugins={
+                                      Array [
                                         Object {
-                                          "fontSize": 16,
-                                        }
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "fn": [Function],
+                                        },
+                                        Object {
+                                          "defaultValue": true,
+                                          "fn": [Function],
+                                          "name": "hideOnEsc",
+                                        },
+                                      ]
+                                    }
+                                    popperOptions={
+                                      Object {
+                                        "modifiers": Array [
+                                          Object {
+                                            "enabled": true,
+                                            "name": "arrow",
+                                            "options": Object {
+                                              "element": "#arrowtest-ID",
+                                              "padding": 5,
+                                            },
+                                          },
+                                          Object {
+                                            "name": "preventOverflow",
+                                            "options": Object {
+                                              "altAxis": true,
+                                              "boundariesElement": "scrollParent",
+                                              "padding": 8,
+                                            },
+                                          },
+                                        ],
+                                        "strategy": "absolute",
+                                      }
+                                    }
+                                    render={[Function]}
+                                    trigger="mouseenter focus"
+                                  >
+                                    <ButtonSimple
+                                      aria-labelledby="test-ID"
+                                      className="md-lightbox__control md-lightbox__control-download"
+                                      onPress={[Function]}
+                                      useNativeKeyDown={true}
+                                    >
+                                      <FocusRing>
+                                        <FocusRing
+                                          focusClass="md-focus-ring-wrapper children"
+                                          focusRingClass="md-focus-ring-wrapper children"
+                                        >
+                                          <button
+                                            aria-labelledby="test-ID"
+                                            className="md-lightbox__control md-lightbox__control-download md-button-simple-wrapper"
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onDragStart={[Function]}
+                                            onFocus={[Function]}
+                                            onKeyUp={[Function]}
+                                            onMouseDown={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            onMouseUp={[Function]}
+                                            onTouchCancel={[Function]}
+                                            onTouchEnd={[Function]}
+                                            onTouchMove={[Function]}
+                                            onTouchStart={[Function]}
+                                            type="button"
+                                          >
+                                            <Icon
+                                              color="var(--mds-color-theme-common-text-white)"
+                                              name="download"
+                                              scale={20}
+                                              weight="light"
+                                            />
+                                          </button>
+                                        </FocusRing>
+                                      </FocusRing>
+                                    </ButtonSimple>
+                                    <Portal
+                                      containerInfo={
+                                        <div
+                                          data-tippy-root=""
+                                          id="tippy-4"
+                                          style="pointer-events: none; z-index: 9999;"
+                                        >
+                                          
+                                        </div>
                                       }
                                     />
-                                  </Icon>
-                                </div>
-                              </Popover>
-                            </Tooltip>
-                          </div>
+                                  </Tippy>
+                                </ForwardRef(TippyWrapper)>
+                              </LazyTippy>
+                            </Popover>
+                            <div
+                              className="md-tooltip-label"
+                              id="test-ID"
+                            >
+                              Download
+                            </div>
+                          </Tooltip>
                         </div>
                       </div>
                     </div>