@instructure/ui-drilldown 10.16.1-snapshot-0 → 10.16.1

package/es/Drilldown/__new-tests__/Drilldown.test.js

@@ -23,7 +23,6 @@ var _Drilldown, _Drilldown2, _Drilldown3, _Drilldown4, _Drilldown5, _Drilldown6,
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
@@ -35,6 +34,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check';
 import { IconCheckSolid } from '@instructure/ui-icons';
 import { Drilldown } from '../index';
 import DrilldownExamples from '../__examples__/Drilldown.examples';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const data = Array(5).fill(0).map((_v, ind) => ({
   label: `option ${ind}`,
   id: `opt_${ind}`
@@ -53,17 +53,22 @@ describe('<Drilldown />', () => {
   });
   describe('rootPageId prop', () => {
     it('should set the initial page and render it', async () => {
-      render(_Drilldown || (_Drilldown = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page1"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option-01")), /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page1"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option11"
-      }, "Option-11")))));
+      render(_Drilldown || (_Drilldown = _jsxs(Drilldown, {
+        rootPageId: "page1",
+        children: [_jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option-01"
+          })
+        }), _jsx(Drilldown.Page, {
+          id: "page1",
+          children: _jsx(Drilldown.Option, {
+            id: "option11",
+            children: "Option-11"
+          })
+        })]
+      })));
       const drilldown = screen.getByRole('menu');
       const options = screen.getAllByRole('menuitem');
       const rootlessOption = screen.queryByText('Option-01');
@@ -76,11 +81,13 @@ describe('<Drilldown />', () => {
   });
   describe('children prop', () => {
     it('should not allow non-DrilldownPage children', async () => {
-      render(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/React.createElement(Drilldown, {
-        rootPageId: "page0"
-      }, /*#__PURE__*/React.createElement("div", {
-        id: "testDiv"
-      }, "DIV-child"))));
+      render(_Drilldown2 || (_Drilldown2 = _jsx(Drilldown, {
+        rootPageId: "page0",
+        children: _jsx("div", {
+          id: "testDiv",
+          children: "DIV-child"
+        })
+      })));
       const drilldown = screen.queryByRole('menu');
       const options = screen.queryAllByRole('menuitem');
       const notAllowedChild = screen.queryByText('DIV-child');
@@ -91,14 +98,17 @@ describe('<Drilldown />', () => {
   });
   describe('id prop', () => {
     it('should put id attr on the drilldown', async () => {
-      render(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown3 || (_Drilldown3 = _jsx(Drilldown, {
         rootPageId: "page0",
-        id: "testId"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        id: "testId",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        })
+      })));
       const drilldown = screen.getByRole('menu');
       expect(drilldown).toBeInTheDocument();
       expect(drilldown).toHaveAttribute('id', 'testId');
@@ -106,14 +116,17 @@ describe('<Drilldown />', () => {
   });
   describe('label prop', () => {
     it('should be added as aria-label', async () => {
-      render(_Drilldown4 || (_Drilldown4 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown4 || (_Drilldown4 = _jsx(Drilldown, {
         rootPageId: "page0",
-        label: "testLabel"
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        label: "testLabel",
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        })
+      })));
       const drilldown = screen.getByRole('menu');
       expect(drilldown).toBeInTheDocument();
       expect(drilldown).toHaveAttribute('aria-label', 'testLabel');
@@ -121,19 +134,24 @@ describe('<Drilldown />', () => {
   });
   describe('disabled prop', () => {
     it('should disable all options', async () => {
-      render(_Drilldown5 || (_Drilldown5 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown5 || (_Drilldown5 = _jsx(Drilldown, {
         rootPageId: "page0",
-        disabled: true
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0",
-        renderActionLabel: "Action"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option02"
-      }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option03"
-      }, "Option")))));
+        disabled: true,
+        children: _jsxs(Drilldown.Page, {
+          id: "page0",
+          renderActionLabel: "Action",
+          children: [_jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          }), _jsx(Drilldown.Option, {
+            id: "option02",
+            children: "Option"
+          }), _jsx(Drilldown.Option, {
+            id: "option03",
+            children: "Option"
+          })]
+        })
+      })));
       const options = screen.getAllByRole('menuitem');
       expect(options.length).toBe(4); // header action + 3 options
 
@@ -144,26 +162,32 @@ describe('<Drilldown />', () => {
   });
   describe('as prop', () => {
     it('should be "ul" by default', async () => {
-      const _render = render(_Drilldown6 || (_Drilldown6 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+      const _render = render(_Drilldown6 || (_Drilldown6 = _jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render.container;
       const drilldownList = container.querySelector('[class$="-options__list"]');
       expect(drilldownList === null || drilldownList === void 0 ? void 0 : drilldownList.tagName).toBe('UL');
     });
     it('should render as passed element', async () => {
-      const _render2 = render(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/React.createElement(Drilldown, {
+      const _render2 = render(_Drilldown7 || (_Drilldown7 = _jsx(Drilldown, {
           rootPageId: "page0",
-          as: "ol"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+          as: "ol",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render2.container;
       const drilldownList = container.querySelector('[class$="-options__list"]');
       expect(drilldownList === null || drilldownList === void 0 ? void 0 : drilldownList.tagName).toBe('OL');
@@ -171,26 +195,32 @@ describe('<Drilldown />', () => {
   });
   describe('role prop', () => {
     it('should be "menu" by default', async () => {
-      const _render3 = render(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+      const _render3 = render(_Drilldown8 || (_Drilldown8 = _jsx(Drilldown, {
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render3.container;
       const drilldown = container.querySelector('div[id^="Drilldown_"]');
       expect(drilldown).toHaveAttribute('role', 'menu');
     });
     it('should apply passed role', async () => {
-      const _render4 = render(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/React.createElement(Drilldown, {
+      const _render4 = render(_Drilldown9 || (_Drilldown9 = _jsx(Drilldown, {
           rootPageId: "page0",
-          role: "list"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+          role: "list",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          })
+        }))),
         container = _render4.container;
       const drilldown = container.querySelector('div[id^="Drilldown_"]');
       expect(drilldown).toHaveAttribute('role', 'list');
@@ -199,29 +229,37 @@ describe('<Drilldown />', () => {
   describe('elementRef prop (and ref static prop)', () => {
     it('should give back the drilldown element when there is no trigger', async () => {
       const elementRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        elementRef: elementRef
-      }, _Drilldown$Page || (_Drilldown$Page = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        elementRef: elementRef,
+        children: _Drilldown$Page || (_Drilldown$Page = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const drilldown = screen.getByRole('menu');
       expect(drilldown).toBeInTheDocument();
       expect(elementRef).toHaveBeenCalledWith(drilldown);
     });
     it('should give back the Popover root when drilldown has trigger and is closed', async () => {
       const elementRef = vi.fn();
-      const _render5 = render(/*#__PURE__*/React.createElement(Drilldown, {
+      const _render5 = render(_jsx(Drilldown, {
           rootPageId: "page0",
           elementRef: elementRef,
-          trigger: _button || (_button = /*#__PURE__*/React.createElement("button", null, "Toggle"))
-        }, _Drilldown$Page2 || (_Drilldown$Page2 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+          trigger: _button || (_button = _jsx("button", {
+            children: "Toggle"
+          })),
+          children: _Drilldown$Page2 || (_Drilldown$Page2 = _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          }))
+        })),
         container = _render5.container;
       const trigger = screen.getByText('Toggle');
       const positionId = trigger.getAttribute('data-position-target');
@@ -231,16 +269,21 @@ describe('<Drilldown />', () => {
     });
     it('should give back the the Popover root when drilldown has trigger and is open', async () => {
       const elementRef = vi.fn();
-      const _render6 = render(/*#__PURE__*/React.createElement(Drilldown, {
+      const _render6 = render(_jsx(Drilldown, {
           rootPageId: "page0",
           elementRef: elementRef,
-          trigger: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
-          defaultShow: true
-        }, _Drilldown$Page3 || (_Drilldown$Page3 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+          trigger: _button2 || (_button2 = _jsx("button", {
+            children: "Toggle"
+          })),
+          defaultShow: true,
+          children: _Drilldown$Page3 || (_Drilldown$Page3 = _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          }))
+        })),
         container = _render6.container;
       const trigger = screen.getByText('Toggle');
       const positionId = trigger.getAttribute('data-position-target');
@@ -252,42 +295,55 @@ describe('<Drilldown />', () => {
   describe('drilldownRef prop', () => {
     it('should give back the drilldown element when there is no trigger', async () => {
       const drilldownRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        drilldownRef: drilldownRef
-      }, _Drilldown$Page4 || (_Drilldown$Page4 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        drilldownRef: drilldownRef,
+        children: _Drilldown$Page4 || (_Drilldown$Page4 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const drilldown = screen.getByRole('menu');
       expect(drilldownRef).toHaveBeenCalledWith(drilldown);
     });
     it("shouldn't be called when drilldown has trigger and is closed", async () => {
       const drilldownRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
         drilldownRef: drilldownRef,
-        trigger: _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "Toggle"))
-      }, _Drilldown$Page5 || (_Drilldown$Page5 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        trigger: _button3 || (_button3 = _jsx("button", {
+          children: "Toggle"
+        })),
+        children: _Drilldown$Page5 || (_Drilldown$Page5 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       expect(drilldownRef).not.toHaveBeenCalled();
     });
     it('should give back the drilldown element when drilldown has trigger and is open', async () => {
       const drilldownRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
         drilldownRef: drilldownRef,
-        trigger: _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
-        defaultShow: true
-      }, _Drilldown$Page6 || (_Drilldown$Page6 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        trigger: _button4 || (_button4 = _jsx("button", {
+          children: "Toggle"
+        })),
+        defaultShow: true,
+        children: _Drilldown$Page6 || (_Drilldown$Page6 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const drilldown = screen.getByRole('menu');
       expect(drilldownRef).toHaveBeenCalledWith(drilldown);
     });
@@ -295,27 +351,35 @@ describe('<Drilldown />', () => {
   describe('popoverRef prop', () => {
     it('should not be called when there is no trigger', async () => {
       const popoverRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        popoverRef: popoverRef
-      }, _Drilldown$Page7 || (_Drilldown$Page7 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        popoverRef: popoverRef,
+        children: _Drilldown$Page7 || (_Drilldown$Page7 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       expect(popoverRef).not.toHaveBeenCalled();
     });
     it('should give back the Popover component when drilldown has trigger and is closed', async () => {
       const popoverRef = vi.fn();
-      const _render7 = render(/*#__PURE__*/React.createElement(Drilldown, {
+      const _render7 = render(_jsx(Drilldown, {
           rootPageId: "page0",
           popoverRef: popoverRef,
-          trigger: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "Toggle"))
-        }, _Drilldown$Page8 || (_Drilldown$Page8 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+          trigger: _button5 || (_button5 = _jsx("button", {
+            children: "Toggle"
+          })),
+          children: _Drilldown$Page8 || (_Drilldown$Page8 = _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          }))
+        })),
         container = _render7.container;
       const trigger = screen.getByText('Toggle');
       const positionId = trigger.getAttribute('data-position-target');
@@ -328,16 +392,21 @@ describe('<Drilldown />', () => {
     });
     it('should give back the Popover component when drilldown has trigger and is open', async () => {
       const popoverRef = vi.fn();
-      const _render8 = render(/*#__PURE__*/React.createElement(Drilldown, {
+      const _render8 = render(_jsx(Drilldown, {
           rootPageId: "page0",
           popoverRef: popoverRef,
-          trigger: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
-          defaultShow: true
-        }, _Drilldown$Page9 || (_Drilldown$Page9 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option01"
-        }, "Option"))))),
+          trigger: _button6 || (_button6 = _jsx("button", {
+            children: "Toggle"
+          })),
+          defaultShow: true,
+          children: _Drilldown$Page9 || (_Drilldown$Page9 = _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option01",
+              children: "Option"
+            })
+          }))
+        })),
         container = _render8.container;
       const trigger = screen.getByText('Toggle');
       const positionId = trigger.getAttribute('data-position-target');
@@ -352,17 +421,19 @@ describe('<Drilldown />', () => {
   describe('onSelect prop', () => {
     it('should fire when option is selected', async () => {
       const onSelect = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        onSelect: onSelect
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, data.map(option => /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: option.id,
-        value: option.id,
-        key: option.id,
-        "data-testid": option.id
-      }, option.label)))));
+        onSelect: onSelect,
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: data.map(option => _jsx(Drilldown.Option, {
+            id: option.id,
+            value: option.id,
+            "data-testid": option.id,
+            children: option.label
+          }, option.id))
+        })
+      }));
       const option_1 = screen.getByTestId('opt_1');
       await userEvent.click(option_1);
       await waitFor(() => {
@@ -381,17 +452,19 @@ describe('<Drilldown />', () => {
     });
     it('should not fire when drilldown is disabled', async () => {
       const onSelect = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
         onSelect: onSelect,
-        disabled: true
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, data.map(option => /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: option.id,
-        key: option.id,
-        "data-testid": option.id
-      }, option.label)))));
+        disabled: true,
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: data.map(option => _jsx(Drilldown.Option, {
+            id: option.id,
+            "data-testid": option.id,
+            children: option.label
+          }, option.id))
+        })
+      }));
       const option_1 = screen.getByTestId('opt_1');
       await userEvent.click(option_1);
       await waitFor(() => {
@@ -401,14 +474,19 @@ describe('<Drilldown />', () => {
   });
   describe('with a trigger', () => {
     it('should not show content by default', async () => {
-      render(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown10 || (_Drilldown10 = _jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: /*#__PURE__*/React.createElement("button", null, "click me")
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option0"
-      }, "Option 0")))));
+        trigger: _jsx("button", {
+          children: "click me"
+        }),
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option0",
+            children: "Option 0"
+          })
+        })
+      })));
       const option_0 = screen.queryByText('Option 0');
       expect(option_0).not.toBeInTheDocument();
     });
@@ -416,15 +494,20 @@ describe('<Drilldown />', () => {
       const container = document.createElement('div');
       container.setAttribute('data-testid', 'container');
       document.body.appendChild(container);
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
         mountNode: container,
-        trigger: _button7 || (_button7 = /*#__PURE__*/React.createElement("button", null, "Options"))
-      }, _Drilldown$Page10 || (_Drilldown$Page10 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option0"
-      }, "Option 0")))));
+        trigger: _button7 || (_button7 = _jsx("button", {
+          children: "Options"
+        })),
+        children: _Drilldown$Page10 || (_Drilldown$Page10 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option0",
+            children: "Option 0"
+          })
+        }))
+      }));
       const optionsContainer = screen.getByTestId('container');
       const trigger = screen.getByRole('button');
       expect(optionsContainer).not.toHaveTextContent('Option 0');
@@ -435,29 +518,39 @@ describe('<Drilldown />', () => {
       });
     });
     it('should have an aria-haspopup attribute', async () => {
-      render(_Drilldown11 || (_Drilldown11 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown11 || (_Drilldown11 = _jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: /*#__PURE__*/React.createElement("button", null, "Options")
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option0"
-      }, "Option 0")))));
+        trigger: _jsx("button", {
+          children: "Options"
+        }),
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option0",
+            children: "Option 0"
+          })
+        })
+      })));
       const trigger = screen.getByRole('button');
       expect(trigger).toHaveAttribute('aria-haspopup');
     });
     it('should call onToggle when Drilldown is opened', async () => {
       const onToggle = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button8 || (_button8 = /*#__PURE__*/React.createElement("button", null, "Options")),
+        trigger: _button8 || (_button8 = _jsx("button", {
+          children: "Options"
+        })),
         onToggle: onToggle,
-        "data-testid": "drilldown"
-      }, _Drilldown$Page11 || (_Drilldown$Page11 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option0"
-      }, "Option 0")))));
+        "data-testid": "drilldown",
+        children: _Drilldown$Page11 || (_Drilldown$Page11 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option0",
+            children: "Option 0"
+          })
+        }))
+      }));
       const trigger = screen.getByRole('button');
       await userEvent.click(trigger);
       await waitFor(() => {
@@ -473,16 +566,21 @@ describe('<Drilldown />', () => {
     });
     it('should call onToggle when Drilldown is closed', async () => {
       const onToggle = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button9 || (_button9 = /*#__PURE__*/React.createElement("button", null, "Options")),
+        trigger: _button9 || (_button9 = _jsx("button", {
+          children: "Options"
+        })),
         onToggle: onToggle,
-        defaultShow: true
-      }, _Drilldown$Page12 || (_Drilldown$Page12 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option0"
-      }, "Option 0")))));
+        defaultShow: true,
+        children: _Drilldown$Page12 || (_Drilldown$Page12 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option0",
+            children: "Option 0"
+          })
+        }))
+      }));
       const trigger = screen.getByRole('button');
       await userEvent.click(trigger);
       await waitFor(() => {
@@ -499,34 +597,44 @@ describe('<Drilldown />', () => {
   describe('placement prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button10 || (_button10 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button10 || (_button10 = _jsx("button", {
+          children: "Toggle"
+        })),
         defaultShow: true,
         popoverRef: e => {
           popoverRef = e;
         },
-        placement: 'top start'
-      }, _Drilldown$Page13 || (_Drilldown$Page13 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        placement: 'top start',
+        children: _Drilldown$Page13 || (_Drilldown$Page13 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.placement).toBe('top start');
     });
   });
   describe('defaultShow prop', () => {
     it('should display Popover on render', async () => {
-      render(_Drilldown12 || (_Drilldown12 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown12 || (_Drilldown12 = _jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: /*#__PURE__*/React.createElement("button", null, "Toggle"),
-        defaultShow: true
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        trigger: _jsx("button", {
+          children: "Toggle"
+        }),
+        defaultShow: true,
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        })
+      })));
       const popoverContent = screen.getByText('Option');
       expect(popoverContent).toBeVisible();
     });
@@ -534,29 +642,39 @@ describe('<Drilldown />', () => {
   describe('show prop', () => {
     it('should display popover', async () => {
       const onToggle = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button11 || (_button11 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button11 || (_button11 = _jsx("button", {
+          children: "Toggle"
+        })),
         show: true,
-        onToggle: onToggle
-      }, _Drilldown$Page14 || (_Drilldown$Page14 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        onToggle: onToggle,
+        children: _Drilldown$Page14 || (_Drilldown$Page14 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverContent = screen.getByText('Option');
       expect(popoverContent).toBeVisible();
     });
     it('should give error if onToggle is not provided (controllable)', async () => {
-      render(_Drilldown13 || (_Drilldown13 = /*#__PURE__*/React.createElement(Drilldown, {
+      render(_Drilldown13 || (_Drilldown13 = _jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: /*#__PURE__*/React.createElement("button", null, "Toggle"),
-        show: true
-      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        trigger: _jsx("button", {
+          children: "Toggle"
+        }),
+        show: true,
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        })
+      })));
       const popoverContent = screen.getByText('Option');
       expect(popoverContent).toBeVisible();
       expect(popoverContent).toBeVisible();
@@ -567,18 +685,23 @@ describe('<Drilldown />', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
       const onFocus = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button12 || (_button12 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button12 || (_button12 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        onFocus: onFocus
-      }, _Drilldown$Page15 || (_Drilldown$Page15 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        onFocus: onFocus,
+        children: _Drilldown$Page15 || (_Drilldown$Page15 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.onFocus).toEqual(onFocus);
     });
@@ -587,18 +710,23 @@ describe('<Drilldown />', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
       const onMouseOver = vi.fn();
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button13 || (_button13 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button13 || (_button13 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        onMouseOver: onMouseOver
-      }, _Drilldown$Page16 || (_Drilldown$Page16 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        onMouseOver: onMouseOver,
+        children: _Drilldown$Page16 || (_Drilldown$Page16 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.onMouseOver).toEqual(onMouseOver);
     });
@@ -606,18 +734,23 @@ describe('<Drilldown />', () => {
   describe('shouldContainFocus prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button14 || (_button14 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button14 || (_button14 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        shouldContainFocus: true
-      }, _Drilldown$Page17 || (_Drilldown$Page17 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        shouldContainFocus: true,
+        children: _Drilldown$Page17 || (_Drilldown$Page17 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.shouldContainFocus).toEqual(true);
     });
@@ -625,18 +758,23 @@ describe('<Drilldown />', () => {
   describe('shouldReturnFocus prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button15 || (_button15 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button15 || (_button15 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        shouldReturnFocus: false
-      }, _Drilldown$Page18 || (_Drilldown$Page18 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        shouldReturnFocus: false,
+        children: _Drilldown$Page18 || (_Drilldown$Page18 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.shouldReturnFocus).toEqual(false);
     });
@@ -644,18 +782,23 @@ describe('<Drilldown />', () => {
   describe('withArrow prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button16 || (_button16 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button16 || (_button16 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        withArrow: false
-      }, _Drilldown$Page19 || (_Drilldown$Page19 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        withArrow: false,
+        children: _Drilldown$Page19 || (_Drilldown$Page19 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.withArrow).toEqual(false);
     });
@@ -663,18 +806,23 @@ describe('<Drilldown />', () => {
   describe('offsetX prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button17 || (_button17 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button17 || (_button17 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        offsetX: '2rem'
-      }, _Drilldown$Page20 || (_Drilldown$Page20 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        offsetX: '2rem',
+        children: _Drilldown$Page20 || (_Drilldown$Page20 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.offsetX).toEqual('2rem');
     });
@@ -682,18 +830,23 @@ describe('<Drilldown />', () => {
   describe('offsetY prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button18 || (_button18 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button18 || (_button18 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        offsetY: '2rem'
-      }, _Drilldown$Page21 || (_Drilldown$Page21 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        offsetY: '2rem',
+        children: _Drilldown$Page21 || (_Drilldown$Page21 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.offsetY).toEqual('2rem');
     });
@@ -701,80 +854,105 @@ describe('<Drilldown />', () => {
   describe('positionContainerDisplay prop', () => {
     it('should be passed to Popover', async () => {
       let popoverRef = null;
-      render(/*#__PURE__*/React.createElement(Drilldown, {
+      render(_jsx(Drilldown, {
         rootPageId: "page0",
-        trigger: _button19 || (_button19 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        trigger: _button19 || (_button19 = _jsx("button", {
+          children: "Toggle"
+        })),
         popoverRef: e => {
           popoverRef = e;
         },
-        positionContainerDisplay: "block"
-      }, _Drilldown$Page22 || (_Drilldown$Page22 = /*#__PURE__*/React.createElement(Drilldown.Page, {
-        id: "page0"
-      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-        id: "option01"
-      }, "Option")))));
+        positionContainerDisplay: "block",
+        children: _Drilldown$Page22 || (_Drilldown$Page22 = _jsx(Drilldown.Page, {
+          id: "page0",
+          children: _jsx(Drilldown.Option, {
+            id: "option01",
+            children: "Option"
+          })
+        }))
+      }));
       const popoverProps = popoverRef.props;
       expect(popoverProps.positionContainerDisplay).toEqual('block');
     });
   });
   describe('for a11y', () => {
     it('should be accessible', async () => {
-      const _render9 = render(_Drilldown14 || (_Drilldown14 = /*#__PURE__*/React.createElement(Drilldown, {
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0",
-          renderTitle: "Page Title",
-          renderActionLabel: "Action Label"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item01"
-        }, "Item1"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item02",
-          subPageId: "page1"
-        }, "Item2"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item03",
-          description: "This is a description"
-        }, "Item3"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item04",
-          renderLabelInfo: "After"
-        }, "Item4"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item05",
-          disabled: true
-        }, "Item5"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item06",
-          href: "/"
-        }, "Item6"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item07",
-          renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
-        }, "Item7"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item08",
-          renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
-        }, "Item8"), /*#__PURE__*/React.createElement(Drilldown.Separator, {
-          id: "sep1"
-        }), /*#__PURE__*/React.createElement(Drilldown.Group, {
-          id: "group1",
-          renderGroupTitle: "Multi-select group",
-          selectableType: "multiple"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "groupItem11"
-        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "groupItem12"
-        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "groupItem13"
-        }, "GroupItem")), /*#__PURE__*/React.createElement(Drilldown.Group, {
-          id: "group2",
-          renderGroupTitle: "Single-select group",
-          selectableType: "single"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "groupItem21"
-        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "groupItem22"
-        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "groupItem23"
-        }, "GroupItem"))), /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page1"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "item11"
-        }, "Item1"))))),
+      const _render9 = render(_Drilldown14 || (_Drilldown14 = _jsxs(Drilldown, {
+          rootPageId: "page0",
+          children: [_jsxs(Drilldown.Page, {
+            id: "page0",
+            renderTitle: "Page Title",
+            renderActionLabel: "Action Label",
+            children: [_jsx(Drilldown.Option, {
+              id: "item01",
+              children: "Item1"
+            }), _jsx(Drilldown.Option, {
+              id: "item02",
+              subPageId: "page1",
+              children: "Item2"
+            }), _jsx(Drilldown.Option, {
+              id: "item03",
+              description: "This is a description",
+              children: "Item3"
+            }), _jsx(Drilldown.Option, {
+              id: "item04",
+              renderLabelInfo: "After",
+              children: "Item4"
+            }), _jsx(Drilldown.Option, {
+              id: "item05",
+              disabled: true,
+              children: "Item5"
+            }), _jsx(Drilldown.Option, {
+              id: "item06",
+              href: "/",
+              children: "Item6"
+            }), _jsx(Drilldown.Option, {
+              id: "item07",
+              renderBeforeLabel: _jsx(IconCheckSolid, {}),
+              children: "Item7"
+            }), _jsx(Drilldown.Option, {
+              id: "item08",
+              renderAfterLabel: _jsx(IconCheckSolid, {}),
+              children: "Item8"
+            }), _jsx(Drilldown.Separator, {
+              id: "sep1"
+            }), _jsxs(Drilldown.Group, {
+              id: "group1",
+              renderGroupTitle: "Multi-select group",
+              selectableType: "multiple",
+              children: [_jsx(Drilldown.Option, {
+                id: "groupItem11",
+                children: "GroupItem"
+              }), _jsx(Drilldown.Option, {
+                id: "groupItem12",
+                children: "GroupItem"
+              }), _jsx(Drilldown.Option, {
+                id: "groupItem13",
+                children: "GroupItem"
+              })]
+            }), _jsxs(Drilldown.Group, {
+              id: "group2",
+              renderGroupTitle: "Single-select group",
+              selectableType: "single",
+              children: [_jsx(Drilldown.Option, {
+                id: "groupItem21",
+                children: "GroupItem"
+              }), _jsx(Drilldown.Option, {
+                id: "groupItem22",
+                children: "GroupItem"
+              }), _jsx(Drilldown.Option, {
+                id: "groupItem23",
+                children: "GroupItem"
+              })]
+            })]
+          }), _jsx(Drilldown.Page, {
+            id: "page1",
+            children: _jsx(Drilldown.Option, {
+              id: "item11",
+              children: "Item1"
+            })
+          })]
+        }))),
         container = _render9.container;
 
       // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
@@ -786,14 +964,17 @@ describe('<Drilldown />', () => {
       expect(axeCheck).toBe(true);
     });
     it('should meet a11y standarts when drilldown is open', async () => {
-      const _render10 = render(_Drilldown15 || (_Drilldown15 = /*#__PURE__*/React.createElement(Drilldown, {
+      const _render10 = render(_Drilldown15 || (_Drilldown15 = _jsx(Drilldown, {
           defaultShow: true,
-          rootPageId: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
-          id: "page0"
-        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
-          id: "option0"
-        }, "Option 0"))))),
+          rootPageId: "page0",
+          children: _jsx(Drilldown.Page, {
+            id: "page0",
+            children: _jsx(Drilldown.Option, {
+              id: "option0",
+              children: "Option 0"
+            })
+          })
+        }))),
         container = _render10.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);