@instructure/ui-toggle-details 10.16.1-snapshot-0 → 10.16.1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details
 

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

@@ -23,13 +23,13 @@ var _ToggleDetails, _ToggleDetails2, _ToggleDetails3, _ToggleDetails4, _ToggleDe
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { ToggleDetails } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<ToggleDetails />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -43,41 +43,45 @@ describe('<ToggleDetails />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should hide its content', async () => {
-    render(_ToggleDetails || (_ToggleDetails = /*#__PURE__*/React.createElement(ToggleDetails, {
-      summary: "Click me"
-    }, "Content")));
+    render(_ToggleDetails || (_ToggleDetails = _jsx(ToggleDetails, {
+      summary: "Click me",
+      children: "Content"
+    })));
     const content = screen.queryByText('Content');
     expect(content).not.toBeInTheDocument();
   });
   it('should place the icon after the summary when prop is set', async () => {
-    const _render = render(_ToggleDetails2 || (_ToggleDetails2 = /*#__PURE__*/React.createElement(ToggleDetails, {
+    const _render = render(_ToggleDetails2 || (_ToggleDetails2 = _jsx(ToggleDetails, {
         iconPosition: "end",
-        summary: "Click me"
-      }, "Content"))),
+        summary: "Click me",
+        children: "Content"
+      }))),
       container = _render.container;
     const summary = container.querySelector('[class$="-toggleDetails__summaryText"]');
     const icon = container.querySelector('[class$="-toggleDetails__icon"]');
     expect(icon === null || icon === void 0 ? void 0 : icon.previousSibling).toBe(summary);
   });
   it('should have an aria-controls attribute', async () => {
-    const _render2 = render(_ToggleDetails3 || (_ToggleDetails3 = /*#__PURE__*/React.createElement(ToggleDetails, {
-        summary: "Click me"
-      }, "Details"))),
+    const _render2 = render(_ToggleDetails3 || (_ToggleDetails3 = _jsx(ToggleDetails, {
+        summary: "Click me",
+        children: "Details"
+      }))),
       container = _render2.container;
     const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
     const content = container.querySelector('[class$="-toggleDetails__details"]');
     expect(toggle).toHaveAttribute('aria-controls', content === null || content === void 0 ? void 0 : content.id);
   });
   it('should have an aria-expanded attribute', async () => {
-    const _render3 = render(_ToggleDetails4 || (_ToggleDetails4 = /*#__PURE__*/React.createElement(ToggleDetails, {
-        summary: "Click me"
-      }, "Details"))),
+    const _render3 = render(_ToggleDetails4 || (_ToggleDetails4 = _jsx(ToggleDetails, {
+        summary: "Click me",
+        children: "Details"
+      }))),
       container = _render3.container;
     const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
     expect(toggle).toHaveAttribute('aria-expanded', 'false');
   });
   it('should not have aria attributes when it has no children', async () => {
-    render(_ToggleDetails5 || (_ToggleDetails5 = /*#__PURE__*/React.createElement(ToggleDetails, {
+    render(_ToggleDetails5 || (_ToggleDetails5 = _jsx(ToggleDetails, {
       summary: "Click me",
       "data-testid": "td__0"
     })));
@@ -86,9 +90,10 @@ describe('<ToggleDetails />', () => {
     expect(toggle).not.toHaveAttribute('aria-expanded');
   });
   it('should toggle on click events', async () => {
-    const _render4 = render(_ToggleDetails6 || (_ToggleDetails6 = /*#__PURE__*/React.createElement(ToggleDetails, {
-        summary: "Click me"
-      }, "Details"))),
+    const _render4 = render(_ToggleDetails6 || (_ToggleDetails6 = _jsx(ToggleDetails, {
+        summary: "Click me",
+        children: "Details"
+      }))),
       container = _render4.container;
     const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
     expect(toggle).toHaveAttribute('aria-expanded', 'false');
@@ -99,11 +104,12 @@ describe('<ToggleDetails />', () => {
   });
   it('should call onToggle on click events', async () => {
     const onToggle = vi.fn();
-    render(/*#__PURE__*/React.createElement(ToggleDetails, {
+    render(_jsx(ToggleDetails, {
       summary: "Click me",
       expanded: false,
-      onToggle: onToggle
-    }, "Details"));
+      onToggle: onToggle,
+      children: "Details"
+    }));
     await userEvent.click(screen.getByText('Click me'));
     await waitFor(() => {
       const args = onToggle.mock.calls[0];
@@ -114,7 +120,7 @@ describe('<ToggleDetails />', () => {
   });
   it('should call onToggle on click events when it has no children', async () => {
     const onToggle = vi.fn();
-    render(/*#__PURE__*/React.createElement(ToggleDetails, {
+    render(_jsx(ToggleDetails, {
       summary: "Click me",
       expanded: false,
       onToggle: onToggle,
@@ -130,10 +136,11 @@ describe('<ToggleDetails />', () => {
     });
   });
   it('should be initialized by defaultExpanded prop', async () => {
-    const _render5 = render(_ToggleDetails7 || (_ToggleDetails7 = /*#__PURE__*/React.createElement(ToggleDetails, {
+    const _render5 = render(_ToggleDetails7 || (_ToggleDetails7 = _jsx(ToggleDetails, {
         summary: "Click me",
-        defaultExpanded: true
-      }, "Content"))),
+        defaultExpanded: true,
+        children: "Content"
+      }))),
       container = _render5.container;
     const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
     const content = container.querySelector('[class$="-toggleDetails__details"]');
@@ -141,9 +148,10 @@ describe('<ToggleDetails />', () => {
     expect(content).toHaveTextContent('Content');
   });
   it('should meet a11y standards', async () => {
-    const _render6 = render(_ToggleDetails8 || (_ToggleDetails8 = /*#__PURE__*/React.createElement(ToggleDetails, {
-        summary: "Click me"
-      }, "Content"))),
+    const _render6 = render(_ToggleDetails8 || (_ToggleDetails8 = _jsx(ToggleDetails, {
+        summary: "Click me",
+        children: "Content"
+      }))),
       container = _render6.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);
@@ -151,12 +159,13 @@ describe('<ToggleDetails />', () => {
   it('focuses with the focus helper', async () => {
     var _toggleRef;
     let toggleRef;
-    const _render7 = render(/*#__PURE__*/React.createElement(ToggleDetails, {
+    const _render7 = render(_jsx(ToggleDetails, {
         summary: "Click me",
         ref: el => {
           toggleRef = el;
-        }
-      }, "Content")),
+        },
+        children: "Content"
+      })),
       container = _render7.container;
     const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
     expect(document.activeElement).not.toBe(toggle);

package/es/ToggleDetails/index.js

@@ -22,18 +22,19 @@ var _dec, _dec2, _class, _ToggleDetails;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
-import React, { Component } from 'react';
+
+import { Component } from 'react';
 import { Button } from '@instructure/ui-buttons';
 import { IconArrowOpenEndSolid, IconArrowOpenDownSolid } from '@instructure/ui-icons';
 import { Expandable } from '@instructure/ui-expandable';
 import { omitProps, pickProps } from '@instructure/ui-react-utils';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -71,11 +72,13 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     const _this$props3 = this.props,
       summary = _this$props3.summary,
       iconPosition = _this$props3.iconPosition;
-    return jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.summary
-    }, iconPosition === 'start' && this.renderIcon(expanded), jsx("span", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.summaryText
-    }, summary), iconPosition === 'end' && this.renderIcon(expanded));
+    return _jsxs("span", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.summary,
+      children: [iconPosition === 'start' && this.renderIcon(expanded), _jsx("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.summaryText,
+        children: summary
+      }), iconPosition === 'end' && this.renderIcon(expanded)]
+    });
   }
   renderToggle(toggleProps, expanded) {
     const variant = this.props.variant;
@@ -91,32 +94,39 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     };
     const summary = this.renderSummary(expanded);
     if (variant === 'filled') {
-      return jsx(Button, Object.assign({}, props, {
+      return _jsx(Button, {
+        ...props,
         display: "block",
         textAlign: "start",
-        elementRef: this.getButtonRef
-      }), summary);
+        elementRef: this.getButtonRef,
+        children: summary
+      });
     } else if (props.href) {
       var _this$props$styles3;
-      return jsx("a", Object.assign({}, props, {
+      return _jsx("a", {
+        ...props,
         css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.toggle,
-        ref: this.getButtonRef
-      }), summary);
+        ref: this.getButtonRef,
+        children: summary
+      });
     } else {
       var _this$props$styles4;
-      return jsx("button", Object.assign({}, props, {
+      return _jsx("button", {
+        ...props,
         type: "button",
         css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle,
-        ref: this.getButtonRef
-      }), summary);
+        ref: this.getButtonRef,
+        children: summary
+      });
     }
   }
   renderIcon(expanded) {
     var _this$props$styles5;
     const Icon = expanded ? this.props.iconExpanded : this.props.icon;
-    return this.props.children && Icon ? jsx("span", {
-      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.icon
-    }, jsx(Icon, null)) : null;
+    return this.props.children && Icon ? _jsx("span", {
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.icon,
+      children: _jsx(Icon, {})
+    }) : null;
   }
   renderDetails(expanded, detailsProps) {
     var _this$props$styles6;
@@ -126,31 +136,37 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     } : {
       display: 'none'
     };
-    return jsx("div", Object.assign({}, detailsProps, {
-      css: [(_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.details, expandedStyles]
-    }), expanded && this.renderContent());
+    return _jsx("div", {
+      ...detailsProps,
+      css: [(_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.details, expandedStyles],
+      children: expanded && this.renderContent()
+    });
   }
   renderContent() {
     var _this$props$styles7;
-    return jsx("div", {
-      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.content
-    }, this.props.children);
+    return _jsx("div", {
+      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.content,
+      children: this.props.children
+    });
   }
   render() {
-    return jsx(Expandable, Object.assign({}, pickProps(this.props, Expandable.allowedProps), {
-      onToggle: this.handleToggle
-    }), ({
-      expanded,
-      getToggleProps,
-      getDetailsProps
-    }) => {
-      var _this$props$styles8;
-      return jsx("div", {
-        css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.toggleDetails,
-        ref: el => {
-          this.ref = el;
-        }
-      }, this.renderToggle(getToggleProps(), expanded), this.renderDetails(expanded, getDetailsProps()));
+    return _jsx(Expandable, {
+      ...pickProps(this.props, Expandable.allowedProps),
+      onToggle: this.handleToggle,
+      children: ({
+        expanded,
+        getToggleProps,
+        getDetailsProps
+      }) => {
+        var _this$props$styles8;
+        return _jsxs("div", {
+          css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.toggleDetails,
+          ref: el => {
+            this.ref = el;
+          },
+          children: [this.renderToggle(getToggleProps(), expanded), this.renderDetails(expanded, getDetailsProps())]
+        });
+      }
     });
   }
 }, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = allowedProps, _ToggleDetails.propTypes = propTypes, _ToggleDetails.defaultProps = {

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

@@ -23,13 +23,13 @@ var _ToggleGroup, _ToggleGroup2, _ToggleGroup3, _ToggleGroup4, _ToggleGroup5, _s
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { ToggleGroup } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<ToggleGroup />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -43,24 +43,26 @@ describe('<ToggleGroup />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should show its summary and hide its children by default', async () => {
-    render(_ToggleGroup || (_ToggleGroup = /*#__PURE__*/React.createElement(ToggleGroup, {
+    render(_ToggleGroup || (_ToggleGroup = _jsx(ToggleGroup, {
       "data-testId": "toggle-group",
       transition: false,
       summary: "This is the summary section",
-      toggleLabel: "This is the toggleLabel"
-    }, "This is the details section")));
+      toggleLabel: "This is the toggleLabel",
+      children: "This is the details section"
+    })));
     const toggleGroup = screen.getByTestId('toggle-group');
     expect(toggleGroup).toHaveTextContent('This is the summary section');
     expect(toggleGroup).not.toHaveTextContent('This is the details section');
   });
   it('should render with children showing with the defaultExpanded prop', async () => {
-    const _render = render(_ToggleGroup2 || (_ToggleGroup2 = /*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render = render(_ToggleGroup2 || (_ToggleGroup2 = _jsx(ToggleGroup, {
         "data-testId": "toggle-group",
         transition: false,
         summary: "This is the summary section",
         toggleLabel: "This is the toggleLabel",
-        defaultExpanded: true
-      }, "This is the details section"))),
+        defaultExpanded: true,
+        children: "This is the details section"
+      }))),
       container = _render.container;
     const toggleGroup = screen.getByTestId('toggle-group');
     const toggle = container.querySelector('button');
@@ -68,33 +70,36 @@ describe('<ToggleGroup />', () => {
     expect(toggleGroup).toHaveTextContent('This is the details section');
   });
   it('should have an aria-controls attribute', async () => {
-    const _render2 = render(_ToggleGroup3 || (_ToggleGroup3 = /*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render2 = render(_ToggleGroup3 || (_ToggleGroup3 = _jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
         toggleLabel: "This is the toggleLabel",
-        defaultExpanded: true
-      }, "This is the details section"))),
+        defaultExpanded: true,
+        children: "This is the details section"
+      }))),
       container = _render2.container;
     const content = screen.getByText('This is the details section');
     const toggle = container.querySelector('button');
     expect(toggle).toHaveAttribute('aria-controls', content.id);
   });
   it('should have an aria-expanded attribute', async () => {
-    const _render3 = render(_ToggleGroup4 || (_ToggleGroup4 = /*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render3 = render(_ToggleGroup4 || (_ToggleGroup4 = _jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
-        toggleLabel: "This is the toggleLabel"
-      }, "This is the details section"))),
+        toggleLabel: "This is the toggleLabel",
+        children: "This is the details section"
+      }))),
       container = _render3.container;
     const toggle = container.querySelector('button');
     expect(toggle).toHaveAttribute('aria-expanded', 'false');
   });
   it('should toggle on click events', async () => {
-    const _render4 = render(_ToggleGroup5 || (_ToggleGroup5 = /*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render4 = render(_ToggleGroup5 || (_ToggleGroup5 = _jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
-        toggleLabel: "This is the toggleLabel"
-      }, "This is the details section"))),
+        toggleLabel: "This is the toggleLabel",
+        children: "This is the details section"
+      }))),
       container = _render4.container;
     const toggle = container.querySelector('button');
     expect(toggle).toHaveAttribute('aria-expanded', 'false');
@@ -105,13 +110,14 @@ describe('<ToggleGroup />', () => {
   });
   it('should call onToggle on click events', async () => {
     const onToggle = vi.fn();
-    const _render5 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render5 = render(_jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
         toggleLabel: "This is the toggleLabel",
         expanded: false,
-        onToggle: onToggle
-      }, "This is the details section")),
+        onToggle: onToggle,
+        children: "This is the details section"
+      })),
       container = _render5.container;
     const toggle = container.querySelector('button');
     await userEvent.click(toggle);
@@ -123,11 +129,12 @@ describe('<ToggleGroup />', () => {
     });
   });
   it('should update the toggle screenreader label based on the expanded state', async () => {
-    const _render6 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render6 = render(_jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
-        toggleLabel: expanded => expanded ? 'Hide content' : 'Show content'
-      }, "This is the details section")),
+        toggleLabel: expanded => expanded ? 'Hide content' : 'Show content',
+        children: "This is the details section"
+      })),
       container = _render6.container;
     const toggle = container.querySelector('button');
     const scrContent = container.querySelector('[class$="-screenReaderContent"]');
@@ -138,29 +145,36 @@ describe('<ToggleGroup />', () => {
     });
   });
   it('should accept custom icons', async () => {
-    const Icon = _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
+    const Icon = _svg || (_svg = _jsxs("svg", {
       height: "50",
-      width: "50"
-    }, /*#__PURE__*/React.createElement("title", null, "Icon collapsed"), /*#__PURE__*/React.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "20"
-    })));
-    const IconExpanded = _svg2 || (_svg2 = /*#__PURE__*/React.createElement("svg", {
+      width: "50",
+      children: [_jsx("title", {
+        children: "Icon collapsed"
+      }), _jsx("circle", {
+        cx: "25",
+        cy: "25",
+        r: "20"
+      })]
+    }));
+    const IconExpanded = _svg2 || (_svg2 = _jsxs("svg", {
       height: "50",
-      width: "50"
-    }, /*#__PURE__*/React.createElement("title", null, "Icon expanded"), /*#__PURE__*/React.createElement("circle", {
-      cx: "25",
-      cy: "25",
-      r: "20"
-    })));
-    const _render7 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+      width: "50",
+      children: [_jsx("title", {
+        children: "Icon expanded"
+      }), _jsx("circle", {
+        cx: "25",
+        cy: "25",
+        r: "20"
+      })]
+    }));
+    const _render7 = render(_jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
         toggleLabel: "This is the toggleLabel",
         icon: () => Icon,
-        iconExpanded: () => IconExpanded
-      }, "This is the details section")),
+        iconExpanded: () => IconExpanded,
+        children: "This is the details section"
+      })),
       container = _render7.container;
     const toggle = container.querySelector('button');
     const svg = container.querySelector('svg');
@@ -171,11 +185,12 @@ describe('<ToggleGroup />', () => {
     });
   });
   it('should meet a11y standards', async () => {
-    const _render8 = render(_ToggleGroup6 || (_ToggleGroup6 = /*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render8 = render(_ToggleGroup6 || (_ToggleGroup6 = _jsx(ToggleGroup, {
         transition: false,
         summary: "This is the summary section",
-        toggleLabel: "This is the toggleLabel"
-      }, "This is the details section"))),
+        toggleLabel: "This is the toggleLabel",
+        children: "This is the details section"
+      }))),
       container = _render8.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);
@@ -183,15 +198,16 @@ describe('<ToggleGroup />', () => {
   it('focuses with the focus helper', async () => {
     var _toggleRef;
     let toggleRef;
-    const _render9 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+    const _render9 = render(_jsx(ToggleGroup, {
         "data-testId": "toggle-group",
         transition: false,
         summary: "This is the summary section",
         toggleLabel: "This is the toggleLabel",
         ref: el => {
           toggleRef = el;
-        }
-      }, "This is the details section")),
+        },
+        children: "This is the details section"
+      })),
       container = _render9.container;
     const toggle = container.querySelector('button');
     expect(document.activeElement).not.toBe(toggle);

package/es/ToggleGroup/index.js

@@ -23,7 +23,7 @@ var _dec, _dec2, _class, _ToggleGroup;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { omitProps, pickProps, getElementType, callRenderProp } from '@instructure/ui-react-utils';
 import { IconButton } from '@instructure/ui-buttons';
 import { Transition } from '@instructure/ui-motion';
@@ -43,6 +43,7 @@ import generateComponentTheme from './theme';
 category: components
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ToggleGroup = class ToggleGroup extends Component {
   constructor(...args) {
     super(...args);
@@ -91,49 +92,65 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     const props = {
       ...toggleProps
     };
-    return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, props, {
+    return _jsx(IconButton, {
+      ...props,
       withBackground: false,
       withBorder: false,
       size: size === 'large' ? 'medium' : 'small',
       elementRef: this.handleButtonRef,
-      screenReaderLabel: label
-    }), this.renderIcon(expanded));
+      screenReaderLabel: label,
+      children: this.renderIcon(expanded)
+    });
   }
   renderDetails(detailsProps) {
     const styles = this.props.styles;
-    return /*#__PURE__*/React.createElement(View, Object.assign({}, detailsProps, {
+    return _jsx(View, {
+      ...detailsProps,
       display: "block",
       borderWidth: "small none none none",
-      borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
-    }), this.props.transition && this._shouldTransition ? /*#__PURE__*/React.createElement(Transition, {
-      transitionOnMount: true,
-      in: true,
-      type: "fade"
-    }, this.props.children) : this.props.children);
+      borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+      children: this.props.transition && this._shouldTransition ? _jsx(Transition, {
+        transitionOnMount: true,
+        in: true,
+        type: "fade",
+        children: this.props.children
+      }) : this.props.children
+    });
   }
   render() {
     const Element = getElementType(ToggleGroup, this.props);
     const styles = this.props.styles;
-    return /*#__PURE__*/React.createElement(Expandable, pickProps(this.props, Expandable.allowedProps), ({
-      expanded,
-      getToggleProps,
-      getDetailsProps
-    }) => {
-      return /*#__PURE__*/React.createElement(View, Object.assign({}, omitProps(this.props, ToggleGroup.allowedProps), {
-        borderWidth: this.props.border ? 'small' : 'none',
-        as: Element,
-        elementRef: this.handleRef,
-        display: "block",
-        borderRadius: "medium",
-        background: "primary",
-        borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
-      }), /*#__PURE__*/React.createElement(Flex, {
-        padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small'
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderToggle(getToggleProps(), expanded)), /*#__PURE__*/React.createElement(Flex.Item, {
-        shouldGrow: true,
-        shouldShrink: true,
-        padding: "0 0 0 x-small"
-      }, this.props.summary)), expanded ? this.renderDetails(getDetailsProps()) : /*#__PURE__*/React.createElement("span", getDetailsProps()));
+    return _jsx(Expandable, {
+      ...pickProps(this.props, Expandable.allowedProps),
+      children: ({
+        expanded,
+        getToggleProps,
+        getDetailsProps
+      }) => {
+        return _jsxs(View, {
+          ...omitProps(this.props, ToggleGroup.allowedProps),
+          borderWidth: this.props.border ? 'small' : 'none',
+          as: Element,
+          elementRef: this.handleRef,
+          display: "block",
+          borderRadius: "medium",
+          background: "primary",
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          children: [_jsxs(Flex, {
+            padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small',
+            children: [_jsx(Flex.Item, {
+              children: this.renderToggle(getToggleProps(), expanded)
+            }), _jsx(Flex.Item, {
+              shouldGrow: true,
+              shouldShrink: true,
+              padding: "0 0 0 x-small",
+              children: this.props.summary
+            })]
+          }), expanded ? this.renderDetails(getDetailsProps()) : _jsx("span", {
+            ...getDetailsProps()
+          })]
+        });
+      }
     });
   }
 }, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = allowedProps, _ToggleGroup.propTypes = propTypes, _ToggleGroup.defaultProps = {