@gympass/yoga 7.87.0 → 7.88.0

package/cjs/Accordion/web/Accordion.js

@@ -1,174 +1,324 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _yogaIcons = require("@gympass/yoga-icons");
-
-var _yoga = require("@gympass/yoga");
-
-var _Content = _interopRequireDefault(require("./Content"));
-
-var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-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; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var AccordionWrapper = _styledComponents["default"].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 && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), elements.backgroundAndDisabled);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  default: () => Accordion_default
 });
+module.exports = __toCommonJS(Accordion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import__ = require("../..");
+var import_Content = __toESM(require("./Content"));
+const AccordionWrapper = import_styled_components.default.div`
+  background-color: ${({ theme }) => theme.yoga.colors.white};
+  border: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      colors: { elements }
+    }
+  }
+}) => disabled && import_styled_components.css`
+      background-color: ${elements.backgroundAndDisabled};
+    `}
 
-var getVerticalPadding = function getVerticalPadding(accordion, small) {
-  if (small) return accordion.padding.small;
+  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;
 };
-
-var getHorizontalPadding = function getHorizontalPadding(accordion, hasHorizontalPadding) {
-  if (hasHorizontalPadding) return accordion.padding.standard;
+const getHorizontalPadding = (accordion, hasHorizontalPadding) => {
+  if (hasHorizontalPadding)
+    return accordion.padding.standard;
   return accordion.padding.zero;
 };
+const Header = import_styled_components.default.button`
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 
-var Header = _styledComponents["default"].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 && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "])));
-});
+  ${({
+  theme: {
+    yoga: {
+      components: { accordion }
+    }
+  },
+  small,
+  hasHorizontalPadding
+}) => {
+  return `
+  padding:${getVerticalPadding(accordion, small)}px ${getHorizontalPadding(
+    accordion,
+    hasHorizontalPadding
+  )}px;
+`;
+}}
 
-var Title = _styledComponents["default"].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 && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref8) {
-    var text = _ref8.theme.yoga.colors.text;
-    return "\n      color: " + text.secundary + ";\n    ";
-  });
-});
+  &:focus-visible {
+    ${({
+  theme: {
+    yoga: {
+      colors: { elements }
+    }
+  }
+}) => {
+  return `
+    background: ${elements.backgroundAndDisabled};
 
-var AccordionContent = _styledComponents["default"].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 && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-bottom: ", "px;\n      }\n    "])), _Content["default"], accordion.padding.small);
-}, function (_ref11) {
-  var hasHorizontalPadding = _ref11.hasHorizontalPadding;
-  return !hasHorizontalPadding && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    "])), _Content["default"]);
-});
+  `;
+}}
+  }
 
-var ArrowWrapper = _styledComponents["default"].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 && import_styled_components.css`
+      cursor: not-allowed;
+    `}
+`;
+const Title = import_styled_components.default.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
 
-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 }
+    }
+  },
+  subtitle
+}) => {
+  return `
+  gap: ${subtitle ? accordion.gap.header : 0}px;
+  margin: ${subtitle ? 0 : `${accordion.paddingArrow.total}px 0`};
+`;
+}}
 
-  var _useState = (0, _react.useState)(expanded),
-      open = _useState[0],
-      setOpen = _useState[1];
+  ${({ disabled }) => disabled && import_styled_components.css`
+      ${({
+  theme: {
+    yoga: {
+      colors: { text }
+    }
+  }
+}) => {
+  return `
+      color: ${text.secundary};
+    `;
+}}
+    `}
+`;
+const AccordionContent = import_styled_components.default.div`
+  height: auto;
+  max-height: ${({ isOpen }) => isOpen ? "9999px" : "0"};
+  overflow: hidden;
+  transition: max-height 200ms ease-in-out;
 
-  var _React$Children$toArr = _react["default"].Children.toArray(children),
-      summary = _React$Children$toArr[0],
-      contentChildren = _React$Children$toArr.slice(1);
+  ${({
+  theme: {
+    yoga: {
+      components: { accordion }
+    }
+  },
+  small
+}) => small && import_styled_components.css`
+      ${import_Content.default} {
+        padding-bottom: ${accordion.padding.small}px;
+      }
+    `}
 
-  var hasSummary = summary.type.displayName === 'Accordion.Summary';
-  return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, _extends({
-    disabled: disabled
-  }, props), /*#__PURE__*/_react["default"].createElement(Header, {
-    disabled: disabled,
-    onClick: function onClick() {
-      setOpen(function (o) {
-        return !o;
-      });
-    },
-    small: small,
-    hasHorizontalPadding: hasHorizontalPadding
-  }, hasSummary ? summary : /*#__PURE__*/_react["default"].createElement(Title, {
-    subtitle: subtitle
-  }, small ? /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
-    color: disabled ? 'deep' : undefined
-  }, title) : /*#__PURE__*/_react["default"].createElement(_yoga.Text.Medium, {
-    color: disabled ? 'deep' : undefined,
-    lineHeight: "medium"
-  }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
-    color: "deep"
-  }, subtitle)), /*#__PURE__*/_react["default"].createElement(ArrowWrapper, {
-    isOpen: open,
-    disabled: disabled
-  }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.ChevronDown, {
-    width: 24,
-    height: 24
-  }))), /*#__PURE__*/_react["default"].createElement(AccordionContent, {
-    isOpen: open,
-    small: small,
-    hasHorizontalPadding: hasHorizontalPadding
-  }, hasSummary ? contentChildren : children), /*#__PURE__*/_react["default"].createElement(_yoga.Divider, null));
-};
+  ${({ hasHorizontalPadding }) => !hasHorizontalPadding && import_styled_components.css`
+      ${import_Content.default} {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    `}
+`;
+const ArrowWrapper = import_styled_components.default.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
 
+  svg {
+    transform: ${({ isOpen }) => isOpen ? "rotate(180deg)" : "rotate(0deg)"};
+    transition: all 200ms ease-out 0s;
+
+    ${({
+  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] = (0, import_react.useState)(expanded);
+  const [summary, ...contentChildren] = import_react.default.Children.toArray(children);
+  const hasSummary = summary.type.displayName === "Accordion.Summary";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AccordionWrapper, __spreadProps(__spreadValues({ disabled }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Header,
+      {
+        disabled,
+        onClick: () => {
+          setOpen((o) => !o);
+        },
+        small,
+        hasHorizontalPadding,
+        children: [
+          hasSummary ? summary : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Title, { subtitle, children: [
+            small ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Small, { color: disabled ? "deep" : void 0, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import__.Text.Medium,
+              {
+                color: disabled ? "deep" : void 0,
+                lineHeight: "medium",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Small, { color: "deep", children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowWrapper, { isOpen: open, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.ChevronDown, { width: 24, height: 24 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AccordionContent,
+      {
+        isOpen: open,
+        small,
+        hasHorizontalPadding,
+        children: hasSummary ? contentChildren : children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Divider, {})
+  ] }));
+};
 Accordion.propTypes = {
-  title: _propTypes.string,
-  subtitle: _propTypes.string,
-  children: _propTypes.node.isRequired,
-  disabled: _propTypes.bool,
-  expanded: _propTypes.bool,
-  small: _propTypes.bool,
-  hasHorizontalPadding: _propTypes.bool
+  title: import_prop_types.string,
+  subtitle: import_prop_types.string,
+  children: import_prop_types.node.isRequired,
+  disabled: import_prop_types.bool,
+  expanded: import_prop_types.bool,
+  small: import_prop_types.bool,
+  hasHorizontalPadding: import_prop_types.bool
 };
 Accordion.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
+  title: void 0,
+  subtitle: void 0,
   disabled: false,
   expanded: false,
   small: false,
   hasHorizontalPadding: true
 };
-var _default = Accordion;
-exports["default"] = _default;
+var Accordion_default = Accordion;

package/cjs/Accordion/web/Accordion.test.js

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react2 = require("@testing-library/react");
+var import_global = require("@gympass/yoga-tokens/src/global");
+var import__ = require("../..");
+var import__2 = __toESM(require("."));
+describe("<Accordion />", () => {
+  afterEach(import_react2.cleanup);
+  describe("should correctly render", () => {
+    it("the default version", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { title: "Default", expanded: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) }) }) })
+      );
+      expect(import_react2.screen.getByText("Default")).toBeInTheDocument();
+      expect(import_react2.screen.getByText("Default")).toHaveStyle({
+        fontSize: `${import_global.fontSizes.medium}px`,
+        fontWeight: import_global.fontWeights.medium
+      });
+      expect(import_react2.screen.getByRole("button")).toHaveStyle({
+        padding: `${import_global.spacing.large}px ${import_global.spacing.medium}px`
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it("the small version", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Small, { title: "Small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) }) }) })
+      );
+      expect(import_react2.screen.getByText("Small")).toBeInTheDocument();
+      expect(import_react2.screen.getByText("Small")).toHaveStyle({
+        fontSize: `${import_global.fontSizes.small}px`,
+        fontWeight: import_global.fontWeights.regular
+      });
+      expect(import_react2.screen.getByRole("button")).toHaveStyle({
+        padding: `${import_global.spacing.small}px ${import_global.spacing.medium}px`
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it("the default version with subtitle", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { title: "Default", subtitle: "default with subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) }) }) })
+      );
+      expect(import_react2.screen.getByText("Default")).toBeInTheDocument();
+      expect(import_react2.screen.getByText("default with subtitle")).toBeInTheDocument();
+      expect(import_react2.screen.getByText("Default")).toHaveStyle({
+        fontSize: `${import_global.fontSizes.medium}px`,
+        fontWeight: import_global.fontWeights.medium
+      });
+      expect(import_react2.screen.getByRole("button")).toHaveStyle({
+        padding: `${import_global.spacing.large}px ${import_global.spacing.medium}px`
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it("the small version with subtitle", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Small, { title: "Small", subtitle: "small with subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) }) }) })
+      );
+      expect(import_react2.screen.getByText("Small")).toBeInTheDocument();
+      expect(import_react2.screen.getByText("small with subtitle")).toBeInTheDocument();
+      expect(import_react2.screen.getByText("Small")).toHaveStyle({
+        fontSize: `${import_global.fontSizes.small}px`,
+        fontWeight: import_global.fontWeights.regular
+      });
+      expect(import_react2.screen.getByRole("button")).toHaveStyle({
+        padding: `${import_global.spacing.small}px ${import_global.spacing.medium}px`
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it("the default version without side padding", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { title: "Default", expanded: true, hasHorizontalPadding: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) }) }) })
+      );
+      expect(import_react2.screen.getByRole("button")).toHaveStyle({
+        padding: `${import_global.spacing.large}px ${import_global.spacing.zero}px`
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it("the small version without side padding", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Small, { title: "Small", hasHorizontalPadding: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) }) }) })
+      );
+      expect(import_react2.screen.getByRole("button")).toHaveStyle({
+        padding: `${import_global.spacing.small}px ${import_global.spacing.zero}px`
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+  it("should render the accordion summary", () => {
+    (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.default, { title: "Title", subtitle: "Subtitle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Summary, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Summary" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }) })
+      ] }) })
+    );
+    expect(import_react2.screen.getByText("Summary")).toBeInTheDocument();
+    expect(import_react2.screen.queryByText("Title")).not.toBeInTheDocument();
+    expect(import_react2.screen.queryByText("Subtitle")).not.toBeInTheDocument();
+  });
+  it("should have className when passed as props", () => {
+    (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { title: "Title", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import__2.default.Content,
+        {
+          className: "className-as-props",
+          "data-testid": "accordion-content",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: "Content" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { small: true, inverted: true, children: "Small button" })
+          ]
+        }
+      ) }) })
+    );
+    expect(import_react2.screen.getByTestId("accordion-content")).toHaveClass(
+      "className-as-props"
+    );
+  });
+});