@gympass/yoga 7.87.0 → 7.88.0

package/esm/Accordion/web/Accordion.js

@@ -1,138 +1,278 @@
-var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+import { string, node, bool } from "prop-types";
+import { ChevronDown } from "@gympass/yoga-icons";
+import { Text, Divider } from "../..";
+import Content from "./Content";
+const AccordionWrapper = styled.div`
+  background-color: ${({ theme }) => theme.yoga.colors.white};
+  border: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  z-index: 1;
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      colors: { elements }
+    }
+  }
+}) => disabled && css`
+      background-color: ${elements.backgroundAndDisabled};
+    `}
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  hr {
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    position: absolute;
+    z-index: -1;
+  }
+`;
+const getVerticalPadding = (accordion, small) => {
+  if (small)
+    return accordion.padding.small;
+  return accordion.padding.large;
+};
+const getHorizontalPadding = (accordion, hasHorizontalPadding) => {
+  if (hasHorizontalPadding)
+    return accordion.padding.standard;
+  return accordion.padding.zero;
+};
+const Header = styled.button`
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+  ${({
+  theme: {
+    yoga: {
+      components: { accordion }
+    }
+  },
+  small,
+  hasHorizontalPadding
+}) => {
+  return `
+  padding:${getVerticalPadding(accordion, small)}px ${getHorizontalPadding(
+    accordion,
+    hasHorizontalPadding
+  )}px;
+`;
+}}
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  &:focus-visible {
+    ${({
+  theme: {
+    yoga: {
+      colors: { elements }
+    }
+  }
+}) => {
+  return `
+    background: ${elements.backgroundAndDisabled};
 
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-import { string, node, bool } from 'prop-types';
-import { ChevronDown } from '@gympass/yoga-icons';
-import { Text, Divider } from '@gympass/yoga';
-import Content from './Content';
-var AccordionWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border: none;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n\n  ", "\n\n  hr {\n    bottom: 0;\n    left: 0;\n    margin: 0;\n    position: absolute;\n    z-index: -1;\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.yoga.colors.white;
-}, function (_ref2) {
-  var disabled = _ref2.disabled,
-      elements = _ref2.theme.yoga.colors.elements;
-  return disabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), elements.backgroundAndDisabled);
-});
+  `;
+}}
+  }
 
-var getVerticalPadding = function getVerticalPadding(accordion, small) {
-  if (small) return accordion.padding.small;
-  return accordion.padding.large;
-};
+  ${({ disabled }) => disabled && css`
+      cursor: not-allowed;
+    `}
+`;
+const Title = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
 
-var getHorizontalPadding = function getHorizontalPadding(accordion, hasHorizontalPadding) {
-  if (hasHorizontalPadding) return accordion.padding.standard;
-  return accordion.padding.zero;
-};
+  ${({
+  theme: {
+    yoga: {
+      components: { accordion }
+    }
+  },
+  subtitle
+}) => {
+  return `
+  gap: ${subtitle ? accordion.gap.header : 0}px;
+  margin: ${subtitle ? 0 : `${accordion.paddingArrow.total}px 0`};
+`;
+}}
 
-var Header = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  ", "\n"])), function (_ref3) {
-  var accordion = _ref3.theme.yoga.components.accordion,
-      small = _ref3.small,
-      hasHorizontalPadding = _ref3.hasHorizontalPadding;
-  return "\n  padding:" + getVerticalPadding(accordion, small) + "px " + getHorizontalPadding(accordion, hasHorizontalPadding) + "px;\n";
-}, function (_ref4) {
-  var elements = _ref4.theme.yoga.colors.elements;
-  return "\n    background: " + elements.backgroundAndDisabled + ";\n\n  ";
-}, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "])));
-});
-var Title = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  text-align: start;\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
-  var accordion = _ref6.theme.yoga.components.accordion,
-      subtitle = _ref6.subtitle;
-  return "\n  gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n  margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n";
-}, function (_ref7) {
-  var disabled = _ref7.disabled;
-  return disabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref8) {
-    var text = _ref8.theme.yoga.colors.text;
-    return "\n      color: " + text.secundary + ";\n    ";
-  });
-});
-var AccordionContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: ", ";\n  overflow: hidden;\n  transition: max-height 200ms ease-in-out;\n\n  ", "\n\n  ", "\n"])), function (_ref9) {
-  var isOpen = _ref9.isOpen;
-  return isOpen ? '9999px' : '0';
-}, function (_ref10) {
-  var accordion = _ref10.theme.yoga.components.accordion,
-      small = _ref10.small;
-  return small && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-bottom: ", "px;\n      }\n    "])), Content, accordion.padding.small);
-}, function (_ref11) {
-  var hasHorizontalPadding = _ref11.hasHorizontalPadding;
-  return !hasHorizontalPadding && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    "])), Content);
-});
-var ArrowWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n\n  svg {\n    transform: ", ";\n    transition: all 200ms ease-out 0s;\n\n    ", "\n  }\n\n  ", "\n"])), function (_ref12) {
-  var isOpen = _ref12.isOpen;
-  return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
-}, function (_ref13) {
-  var _ref13$theme$yoga$col = _ref13.theme.yoga.colors,
-      primary = _ref13$theme$yoga$col.primary,
-      text = _ref13$theme$yoga$col.text,
-      disabled = _ref13.disabled;
-  return "\n      fill: " + (disabled ? text.secondary : primary) + ";\n    ";
-}, function (_ref14) {
-  var accordion = _ref14.theme.yoga.components.accordion;
-  return "\n  padding: " + accordion.paddingArrow.total + "px;\n";
-});
+  ${({ disabled }) => disabled && css`
+      ${({
+  theme: {
+    yoga: {
+      colors: { text }
+    }
+  }
+}) => {
+  return `
+      color: ${text.secundary};
+    `;
+}}
+    `}
+`;
+const AccordionContent = styled.div`
+  height: auto;
+  max-height: ${({ isOpen }) => isOpen ? "9999px" : "0"};
+  overflow: hidden;
+  transition: max-height 200ms ease-in-out;
 
-var Accordion = function Accordion(_ref15) {
-  var title = _ref15.title,
-      subtitle = _ref15.subtitle,
-      children = _ref15.children,
-      disabled = _ref15.disabled,
-      expanded = _ref15.expanded,
-      small = _ref15.small,
-      hasHorizontalPadding = _ref15.hasHorizontalPadding,
-      props = _objectWithoutPropertiesLoose(_ref15, _excluded);
+  ${({
+  theme: {
+    yoga: {
+      components: { accordion }
+    }
+  },
+  small
+}) => small && css`
+      ${Content} {
+        padding-bottom: ${accordion.padding.small}px;
+      }
+    `}
 
-  var _useState = useState(expanded),
-      open = _useState[0],
-      setOpen = _useState[1];
+  ${({ hasHorizontalPadding }) => !hasHorizontalPadding && css`
+      ${Content} {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    `}
+`;
+const ArrowWrapper = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
 
-  var _React$Children$toArr = React.Children.toArray(children),
-      summary = _React$Children$toArr[0],
-      contentChildren = _React$Children$toArr.slice(1);
+  svg {
+    transform: ${({ isOpen }) => isOpen ? "rotate(180deg)" : "rotate(0deg)"};
+    transition: all 200ms ease-out 0s;
 
-  var hasSummary = summary.type.displayName === 'Accordion.Summary';
-  return /*#__PURE__*/React.createElement(AccordionWrapper, _extends({
-    disabled: disabled
-  }, props), /*#__PURE__*/React.createElement(Header, {
-    disabled: disabled,
-    onClick: function onClick() {
-      setOpen(function (o) {
-        return !o;
-      });
-    },
-    small: small,
-    hasHorizontalPadding: hasHorizontalPadding
-  }, hasSummary ? summary : /*#__PURE__*/React.createElement(Title, {
-    subtitle: subtitle
-  }, small ? /*#__PURE__*/React.createElement(Text.Small, {
-    color: disabled ? 'deep' : undefined
-  }, title) : /*#__PURE__*/React.createElement(Text.Medium, {
-    color: disabled ? 'deep' : undefined,
-    lineHeight: "medium"
-  }, title), /*#__PURE__*/React.createElement(Text.Small, {
-    color: "deep"
-  }, subtitle)), /*#__PURE__*/React.createElement(ArrowWrapper, {
-    isOpen: open,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(ChevronDown, {
-    width: 24,
-    height: 24
-  }))), /*#__PURE__*/React.createElement(AccordionContent, {
-    isOpen: open,
-    small: small,
-    hasHorizontalPadding: hasHorizontalPadding
-  }, hasSummary ? contentChildren : children), /*#__PURE__*/React.createElement(Divider, null));
-};
+    ${({
+  theme: {
+    yoga: {
+      colors: { primary, text }
+    }
+  },
+  disabled
+}) => {
+  return `
+      fill: ${disabled ? text.secondary : primary};
+    `;
+}}
+  }
 
+  ${({
+  theme: {
+    yoga: {
+      components: { accordion }
+    }
+  }
+}) => {
+  return `
+  padding: ${accordion.paddingArrow.total}px;
+`;
+}}
+`;
+const Accordion = (_a) => {
+  var _b = _a, {
+    title,
+    subtitle,
+    children,
+    disabled,
+    expanded,
+    small,
+    hasHorizontalPadding
+  } = _b, props = __objRest(_b, [
+    "title",
+    "subtitle",
+    "children",
+    "disabled",
+    "expanded",
+    "small",
+    "hasHorizontalPadding"
+  ]);
+  const [open, setOpen] = useState(expanded);
+  const [summary, ...contentChildren] = React.Children.toArray(children);
+  const hasSummary = summary.type.displayName === "Accordion.Summary";
+  return /* @__PURE__ */ jsxs(AccordionWrapper, __spreadProps(__spreadValues({ disabled }, props), { children: [
+    /* @__PURE__ */ jsxs(
+      Header,
+      {
+        disabled,
+        onClick: () => {
+          setOpen((o) => !o);
+        },
+        small,
+        hasHorizontalPadding,
+        children: [
+          hasSummary ? summary : /* @__PURE__ */ jsxs(Title, { subtitle, children: [
+            small ? /* @__PURE__ */ jsx(Text.Small, { color: disabled ? "deep" : void 0, children: title }) : /* @__PURE__ */ jsx(
+              Text.Medium,
+              {
+                color: disabled ? "deep" : void 0,
+                lineHeight: "medium",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx(Text.Small, { color: "deep", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(ArrowWrapper, { isOpen: open, disabled, children: /* @__PURE__ */ jsx(ChevronDown, { width: 24, height: 24 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AccordionContent,
+      {
+        isOpen: open,
+        small,
+        hasHorizontalPadding,
+        children: hasSummary ? contentChildren : children
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {})
+  ] }));
+};
 Accordion.propTypes = {
   title: string,
   subtitle: string,
@@ -143,11 +283,14 @@ Accordion.propTypes = {
   hasHorizontalPadding: bool
 };
 Accordion.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
+  title: void 0,
+  subtitle: void 0,
   disabled: false,
   expanded: false,
   small: false,
   hasHorizontalPadding: true
 };
-export default Accordion;
+var Accordion_default = Accordion;
+export {
+  Accordion_default as default
+};

package/esm/Accordion/web/Accordion.test.js

@@ -1,126 +1,120 @@
-import React from 'react';
-import { render, cleanup, screen } from '@testing-library/react';
-import { fontSizes, fontWeights, spacing } from '@gympass/yoga-tokens/src/global';
-import { Text, Button } from '@gympass/yoga';
-import { ThemeProvider } from '../..';
-import Accordion from '.';
-describe('<Accordion />', function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, cleanup, screen } from "@testing-library/react";
+import {
+  fontSizes,
+  fontWeights,
+  spacing
+} from "@gympass/yoga-tokens/src/global";
+import { Text, Button, ThemeProvider } from "../..";
+import Accordion from ".";
+describe("<Accordion />", () => {
   afterEach(cleanup);
-  describe('should correctly render', function () {
-    it('the default version', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
-        title: "Default",
-        expanded: true
-      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
-          container = _render.container;
-
-      expect(screen.getByText('Default')).toBeInTheDocument();
-      expect(screen.getByText('Default')).toHaveStyle({
-        fontSize: fontSizes.medium + "px",
+  describe("should correctly render", () => {
+    it("the default version", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Default", expanded: true, children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
+      );
+      expect(screen.getByText("Default")).toBeInTheDocument();
+      expect(screen.getByText("Default")).toHaveStyle({
+        fontSize: `${fontSizes.medium}px`,
         fontWeight: fontWeights.medium
       });
-      expect(screen.getByRole('button')).toHaveStyle({
-        padding: spacing.large + "px " + spacing.medium + "px"
+      expect(screen.getByRole("button")).toHaveStyle({
+        padding: `${spacing.large}px ${spacing.medium}px`
       });
       expect(container.firstChild).toMatchSnapshot();
     });
-    it('the small version', function () {
-      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion.Small, {
-        title: "Small"
-      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
-          container = _render2.container;
-
-      expect(screen.getByText('Small')).toBeInTheDocument();
-      expect(screen.getByText('Small')).toHaveStyle({
-        fontSize: fontSizes.small + "px",
+    it("the small version", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion.Small, { title: "Small", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
+      );
+      expect(screen.getByText("Small")).toBeInTheDocument();
+      expect(screen.getByText("Small")).toHaveStyle({
+        fontSize: `${fontSizes.small}px`,
         fontWeight: fontWeights.regular
       });
-      expect(screen.getByRole('button')).toHaveStyle({
-        padding: spacing.small + "px " + spacing.medium + "px"
+      expect(screen.getByRole("button")).toHaveStyle({
+        padding: `${spacing.small}px ${spacing.medium}px`
       });
       expect(container.firstChild).toMatchSnapshot();
     });
-    it('the default version with subtitle', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
-        title: "Default",
-        subtitle: "default with subtitle"
-      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
-          container = _render3.container;
-
-      expect(screen.getByText('Default')).toBeInTheDocument();
-      expect(screen.getByText('default with subtitle')).toBeInTheDocument();
-      expect(screen.getByText('Default')).toHaveStyle({
-        fontSize: fontSizes.medium + "px",
+    it("the default version with subtitle", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Default", subtitle: "default with subtitle", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
+      );
+      expect(screen.getByText("Default")).toBeInTheDocument();
+      expect(screen.getByText("default with subtitle")).toBeInTheDocument();
+      expect(screen.getByText("Default")).toHaveStyle({
+        fontSize: `${fontSizes.medium}px`,
         fontWeight: fontWeights.medium
       });
-      expect(screen.getByRole('button')).toHaveStyle({
-        padding: spacing.large + "px " + spacing.medium + "px"
+      expect(screen.getByRole("button")).toHaveStyle({
+        padding: `${spacing.large}px ${spacing.medium}px`
       });
       expect(container.firstChild).toMatchSnapshot();
     });
-    it('the small version with subtitle', function () {
-      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion.Small, {
-        title: "Small",
-        subtitle: "small with subtitle"
-      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
-          container = _render4.container;
-
-      expect(screen.getByText('Small')).toBeInTheDocument();
-      expect(screen.getByText('small with subtitle')).toBeInTheDocument();
-      expect(screen.getByText('Small')).toHaveStyle({
-        fontSize: fontSizes.small + "px",
+    it("the small version with subtitle", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion.Small, { title: "Small", subtitle: "small with subtitle", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
+      );
+      expect(screen.getByText("Small")).toBeInTheDocument();
+      expect(screen.getByText("small with subtitle")).toBeInTheDocument();
+      expect(screen.getByText("Small")).toHaveStyle({
+        fontSize: `${fontSizes.small}px`,
         fontWeight: fontWeights.regular
       });
-      expect(screen.getByRole('button')).toHaveStyle({
-        padding: spacing.small + "px " + spacing.medium + "px"
+      expect(screen.getByRole("button")).toHaveStyle({
+        padding: `${spacing.small}px ${spacing.medium}px`
       });
       expect(container.firstChild).toMatchSnapshot();
     });
-    it('the default version without side padding', function () {
-      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
-        title: "Default",
-        expanded: true,
-        hasHorizontalPadding: false
-      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
-          container = _render5.container;
-
-      expect(screen.getByRole('button')).toHaveStyle({
-        padding: spacing.large + "px " + spacing.zero + "px"
+    it("the default version without side padding", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Default", expanded: true, hasHorizontalPadding: false, children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
+      );
+      expect(screen.getByRole("button")).toHaveStyle({
+        padding: `${spacing.large}px ${spacing.zero}px`
       });
       expect(container.firstChild).toMatchSnapshot();
     });
-    it('the small version without side padding', function () {
-      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion.Small, {
-        title: "Small",
-        hasHorizontalPadding: false
-      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
-          container = _render6.container;
-
-      expect(screen.getByRole('button')).toHaveStyle({
-        padding: spacing.small + "px " + spacing.zero + "px"
+    it("the small version without side padding", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion.Small, { title: "Small", hasHorizontalPadding: false, children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
+      );
+      expect(screen.getByRole("button")).toHaveStyle({
+        padding: `${spacing.small}px ${spacing.zero}px`
       });
       expect(container.firstChild).toMatchSnapshot();
     });
   });
-  it('should render the accordion summary', function () {
-    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
-      title: "Title",
-      subtitle: "Subtitle"
-    }, /*#__PURE__*/React.createElement(Accordion.Summary, null, /*#__PURE__*/React.createElement(Text, null, "Summary")), /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content")))));
-    expect(screen.getByText('Summary')).toBeInTheDocument();
-    expect(screen.queryByText('Title')).not.toBeInTheDocument();
-    expect(screen.queryByText('Subtitle')).not.toBeInTheDocument();
+  it("should render the accordion summary", () => {
+    render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Accordion, { title: "Title", subtitle: "Subtitle", children: [
+        /* @__PURE__ */ jsx(Accordion.Summary, { children: /* @__PURE__ */ jsx(Text, { children: "Summary" }) }),
+        /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) })
+      ] }) })
+    );
+    expect(screen.getByText("Summary")).toBeInTheDocument();
+    expect(screen.queryByText("Title")).not.toBeInTheDocument();
+    expect(screen.queryByText("Subtitle")).not.toBeInTheDocument();
   });
-  it('should have className when passed as props', function () {
-    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
-      title: "Title"
-    }, /*#__PURE__*/React.createElement(Accordion.Content, {
-      className: "className-as-props",
-      "data-testid": "accordion-content"
-    }, /*#__PURE__*/React.createElement(Text, null, "Content"), /*#__PURE__*/React.createElement(Button, {
-      small: true,
-      inverted: true
-    }, "Small button")))));
-    expect(screen.getByTestId('accordion-content')).toHaveClass('className-as-props');
+  it("should have className when passed as props", () => {
+    render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Title", children: /* @__PURE__ */ jsxs(
+        Accordion.Content,
+        {
+          className: "className-as-props",
+          "data-testid": "accordion-content",
+          children: [
+            /* @__PURE__ */ jsx(Text, { children: "Content" }),
+            /* @__PURE__ */ jsx(Button, { small: true, inverted: true, children: "Small button" })
+          ]
+        }
+      ) }) })
+    );
+    expect(screen.getByTestId("accordion-content")).toHaveClass(
+      "className-as-props"
+    );
   });
-});
+});