@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/umd/Accordion/ContentAccordion.js

@@ -0,0 +1,266 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../types", "../icons", "../styles/typography", "../styles", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require("../icons"), require("../styles/typography"), require("../styles"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global.icons, global.typography, global.styles, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _types, _icons, _typography, _styles, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ContentAccordion = undefined;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const ContentAccordionWrapper = _styledComponents2.default.div`
+  width: 100%;
+  position: relative;
+
+
+  .content-accordion-item {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid ${_styles.COLORS.neutral_100};
+
+    .item-header {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-height: 48px;
+      color: ${_styles.COLORS.neutral_600};
+      cursor: pointer;
+
+      &:hover {
+        color: ${_styles.COLORS.primary_700};
+        background-color: ${_styles.COLORS.primary_20};
+        z-index: ${_zIndexes.Z_INDEXES.hover};
+      }
+
+      &:focus {
+        box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+        background-color: ${_styles.COLORS.white};
+        z-index: ${_zIndexes.Z_INDEXES.focus};
+        outline: none;
+      }
+
+      &:active {
+        color: ${_styles.COLORS.primary_800};
+        background-color: ${_styles.COLORS.primary_100};
+        box-shadow: none;
+        z-index: ${_zIndexes.Z_INDEXES.active};
+      }
+
+      .item-header-icon,
+      .item-header-icon svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .item-header-text {
+      }
+    }
+
+    .item-content {
+      display: none;
+      flex-direction: column;
+
+      .item-content-header {
+
+      }
+
+      .item-content-body {
+
+      }
+
+      .item-content-footer {
+      }
+    }
+
+    &.active {
+      .item-content {
+        display: flex;
+      }
+    }
+
+    &.disabled {
+      .item-header {
+        color: ${_styles.COLORS.neutral_300};
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .content-accordion-item:last-child {
+    border-bottom: 1px solid ${_styles.COLORS.neutral_100};
+  }
+
+  &.small {
+    min-width: 320px;
+    max-width: 528px;
+
+    .item-header {
+      gap: 8px;
+      padding: 0 8px;
+      ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null)}
+    }
+
+    .item-content {
+      padding: 0 8px 16px 40px;
+      gap: 8px;
+
+      .item-content-header {
+        ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null)}
+      }
+
+      .item-content-body {
+        ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null)}
+      }
+    }
+  }
+
+
+  &.medium {
+    min-width: 344px;
+    max-width: 584px;
+
+    .item-header {
+      gap: 12px;
+      padding: 0 12px;
+      ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
+    }
+
+    .item-content {
+      padding: 8px 12px 24px 48px;
+      gap: 12px;
+
+      .item-content-header {
+        ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null)}
+      }
+
+      .item-content-body {
+        ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
+      }
+
+    }
+  }
+
+  &.large {
+    min-width: 384px;
+    max-width: 656px;
+
+    .item-header {
+      gap: 16px;
+      padding: 0 16px;
+      ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null)}
+    }
+
+    .item-content {
+      padding: 16px 16px 32px 56px;
+      gap: 16px;
+
+      .item-content-header {
+        ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null)}
+      }
+
+      .item-content-body {
+        ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null)}
+      }
+    }
+  }
+`;
+
+  const ContentAccordion = exports.ContentAccordion = props => {
+    const [opened, setOpened] = _react2.default.useState([]);
+
+    _react2.default.useEffect(() => {
+      if (props.multi) {
+        setOpened(props.items.filter(item => item.active).map(item => item.key));
+      } else {
+        let active = props.items.find(item => !!item.active)?.key;
+
+        if (active) {
+          setOpened([active]);
+        }
+      }
+    }, [props.items, props.multi]);
+
+    const onItemClick = item => {
+      if (item.disabled) return;
+
+      if (opened.includes(item.key)) {
+        setOpened(opened.filter(key => key !== item.key));
+      } else {
+        if (props.multi) {
+          setOpened([...opened, item.key]);
+        } else {
+          setOpened([item.key]);
+        }
+      }
+    };
+
+    const renderItem = item => {
+      const isActive = opened.includes(item.key);
+      return /*#__PURE__*/_react2.default.createElement("div", {
+        key: item.key,
+        id: `item_${item.key}`,
+        className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
+      }, /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-header',
+        tabIndex: !item.disabled ? 0 : undefined,
+        onMouseDown: e => e.preventDefault(),
+        onClick: () => !item.disabled && onItemClick(item),
+        onKeyPress: event => event.key === 'Enter' && onItemClick(item)
+      }, /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-header-icon'
+      }, props.multi ? isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-header-text'
+      }, item.title)), /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content'
+      }, item.header && /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content-header'
+      }, item.header), /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content-body'
+      }, item.body), item.footer && /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content-footer'
+      }, item.footer)));
+    };
+
+    return /*#__PURE__*/_react2.default.createElement(ContentAccordionWrapper, {
+      className: 'content-accordion'.concat(` ${props.size ?? _types.Size.Medium}`)
+    }, props.items.map(item => renderItem(item)));
+  };
+
+  ContentAccordion.propTypes = {
+    items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+      key: _propTypes2.default.string.isRequired,
+      title: _propTypes2.default.string.isRequired,
+      header: _propTypes2.default.string,
+      body: _propTypes2.default.any.isRequired,
+      footer: _propTypes2.default.any,
+      disabled: _propTypes2.default.bool,
+      active: _propTypes2.default.bool
+    })).isRequired,
+    multi: _propTypes2.default.bool
+  };
+  exports.default = ContentAccordion;
+});
+//# sourceMappingURL=ContentAccordion.js.map

package/dist/umd/Accordion/ContentAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionWrapper","styled","div","COLORS","neutral_100","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","key","title","header","body","footer","disabled","items","multi","ContentAccordion","props","React","setOpened","item","onItemClick","opened","renderItem","isActive","e","event","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,uBAAuB,GAAGC,2BAAOC,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BC,eAAOC,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,eAAeD,eAAOE,WAAY;AAClC;AACA;AACA;AACA,iBAAiBF,eAAOG,WAAY;AACpC,4BAA4BH,eAAOI,UAAW;AAC9C,mBAAmBC,oBAAUC,KAAM;AACnC;AACA;AACA;AACA;AACA,4BAA4BN,eAAOO,KAAM;AACzC,mBAAmBF,oBAAUG,KAAM;AACnC;AACA;AACA;AACA;AACA,iBAAiBR,eAAOS,WAAY;AACpC,4BAA4BT,eAAOU,WAAY;AAC/C;AACA,mBAAmBL,oBAAUM,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBX,eAAOY,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+BZ,eAAOC,WAAY;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQY,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBC,+BAAD,IAAjBD,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,+BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBD,+BAAD,IAAjBC,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBD,+BAAD,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","sourcesContent":["import React from 'react'\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\n\r\nconst ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n\r\n  .content-accordion-item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-top: 1px solid ${COLORS.neutral_100};\r\n\r\n    .item-header {\r\n      display: flex;\r\n      align-items: center;\r\n      box-sizing: border-box;\r\n      min-height: 48px;\r\n      color: ${COLORS.neutral_600};\r\n      cursor: pointer;\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background-color: ${COLORS.primary_20};\r\n        z-index: ${Z_INDEXES.hover};\r\n      }\r\n\r\n      &:focus {\r\n        box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\r\n        background-color: ${COLORS.white};\r\n        z-index: ${Z_INDEXES.focus};\r\n        outline: none;\r\n      }\r\n\r\n      &:active {\r\n        color: ${COLORS.primary_800};\r\n        background-color: ${COLORS.primary_100};\r\n        box-shadow: none;\r\n        z-index: ${Z_INDEXES.active};\r\n      }\r\n\r\n      .item-header-icon,\r\n      .item-header-icon svg {\r\n        width: 24px;\r\n        height: 24px;\r\n      }\r\n\r\n      .item-header-text {\r\n      }\r\n    }\r\n\r\n    .item-content {\r\n      display: none;\r\n      flex-direction: column;\r\n\r\n      .item-content-header {\r\n\r\n      }\r\n\r\n      .item-content-body {\r\n\r\n      }\r\n\r\n      .item-content-footer {\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      .item-content {\r\n        display: flex;\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      .item-header {\r\n        color: ${COLORS.neutral_300};\r\n        cursor: not-allowed;\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  .content-accordion-item:last-child {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    .item-header {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .item-content {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      .item-content-header {\r\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      .item-content-body {\r\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &.medium {\r\n    min-width: 344px;\r\n    max-width: 584px;\r\n\r\n    .item-header {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .item-content {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      .item-content-header {\r\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      .item-content-body {\r\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n      }\r\n\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-width: 384px;\r\n    max-width: 656px;\r\n\r\n    .item-header {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .item-content {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      .item-content-header {\r\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      .item-content-body {\r\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem {\r\n  key: string;\r\n  title: string;\r\n  header?: string;\r\n  body: any;\r\n  footer?: any;\r\n  disabled?: boolean;\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps {\r\n  items: ContentAccordionItem[];\r\n  multi?: boolean;\r\n  size?: Size;\r\n}\r\n\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\r\n\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (props.multi) {\r\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\r\n    } else {\r\n      let active = props.items.find(item => !!item.active)?.key;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [props.items, props.multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.key)) {\r\n      setOpened(opened.filter(key => key !== item.key));\r\n    } else {\r\n      if (props.multi) {\r\n        setOpened([...opened, item.key]);\r\n      } else {\r\n        setOpened([item.key]);\r\n      }\r\n    }\r\n  }\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const isActive = opened.includes(item.key);\r\n\r\n    return (\r\n      <div key={item.key}\r\n           id={`item_${item.key}`}\r\n           className={'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <div className={'item-header'}\r\n             tabIndex={!item.disabled ? 0 : undefined}\r\n             onMouseDown={e => e.preventDefault()}\r\n             onClick={() => !item.disabled && onItemClick(item)}\r\n             onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\r\n          <div className={'item-header-icon'}>\r\n            {\r\n              props.multi\r\n                ? isActive\r\n                  ? <SystemIcons.Minus/>\r\n                  : <SystemIcons.Plus/>\r\n                : isActive\r\n                  ? <SystemIcons.ChevronDown/>\r\n                  : <SystemIcons.ChevronRight/>\r\n            }\r\n          </div>\r\n          <div className={'item-header-text'}>\r\n            {item.title}\r\n          </div>\r\n        </div>\r\n        <div className={'item-content'}>\r\n          {\r\n            item.header &&\r\n            <div className={'item-content-header'}>\r\n              {item.header}\r\n            </div>\r\n          }\r\n          <div className={'item-content-body'}>\r\n            {item.body}\r\n          </div>\r\n          {\r\n            item.footer &&\r\n            <div className={'item-content-footer'}>\r\n              {item.footer}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <ContentAccordionWrapper className={'content-accordion'.concat(` ${props.size ?? Size.Medium}`)}>\r\n      {props.items.map(item => renderItem(item))}\r\n    </ContentAccordionWrapper>\r\n  );\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"file":"ContentAccordion.js"}

package/dist/umd/Accordion/ContentAccordionItem.js

@@ -0,0 +1,16 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define([], factory);
+  } else if (typeof exports !== "undefined") {
+    factory();
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory();
+    global.undefined = mod.exports;
+  }
+})(this, function () {
+  "use strict";
+});
+//# sourceMappingURL=ContentAccordionItem.js.map

package/dist/umd/Accordion/ContentAccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ContentAccordionItem.js"}

package/dist/umd/Accordion/__tests__/AccordionMenu.test.js

@@ -0,0 +1,74 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../../styles", "../AccordionMenu", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../../styles"), require("../AccordionMenu"), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.styles, global.AccordionMenu, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _styles, _AccordionMenu) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _AccordionMenu2 = _interopRequireDefault(_AccordionMenu);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const accordionItems = [{
+    id: 'test1_id',
+    title: 'Item label with text 1',
+    children: /*#__PURE__*/_react2.default.createElement("div", null, "content test1")
+  }, {
+    id: 'test2_id',
+    title: 'Item label with text 2',
+    children: /*#__PURE__*/_react2.default.createElement("div", null, "content test2")
+  }];
+  describe('<AccordionMenu />', () => {
+    it('Check correct text placed on labels', async () => {
+      const {
+        queryByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
+        items: accordionItems,
+        onSelect: () => {}
+      }));
+      expect(queryByText('Item label with text 1')).toBeDefined();
+      expect(queryByText('Item label with text 2')).toBeDefined();
+      expect(queryByText('content test1')).toBeNull();
+    });
+    it('Check item label element color and label', async () => {
+      const {
+        container
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
+        items: accordionItems,
+        onSelect: () => {}
+      }));
+      const headerItem = container.querySelector('#test2_id');
+      expect(headerItem).toBeDefined();
+      expect(headerItem?.children[0]).toHaveStyleRule('background', _styles.COLORS.neutral_20);
+      expect(headerItem?.textContent).toContain('Item label with text 2');
+    });
+    it('Check expanded item text', async () => {
+      const {
+        container
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
+        items: accordionItems,
+        onSelect: () => {},
+        selectedItems: ['test1_id']
+      }));
+      const headerItem = container.querySelector('#test1_id'); //check item expanded
+
+      expect(headerItem?.children[1]).toBeDefined();
+      expect(headerItem?.children[1]?.textContent).toContain('content test1');
+    });
+  });
+});
+//# sourceMappingURL=AccordionMenu.test.js.map

package/dist/umd/Accordion/__tests__/AccordionMenu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","render","expect","container","headerItem","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAG,CACrB;AACEC,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GADqB,EAMrB;AACEF,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GANqB,CAAvB;AAaAC,EAAAA,QAAQ,CAAA,mBAAA,EAAsB,MAAM;AAClCC,IAAAA,EAAE,CAAA,qCAAA,EAAwC,YAAY;AACpD,YAAM;AAAEC,QAAAA;AAAF,UAAkBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAxB;AACAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,eAAkB,CAAZ,CAANA,CAAAA,QAAAA;AAJFH,KAAE,CAAFA;AAOAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACzD,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAAnB,WAAmBA,CAAnB;AACAD,MAAAA,MAAM,CAANA,UAAM,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,eAAAA,CAAAA,YAAAA,EAA8DG,eAA9DH,UAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAjBF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,wBAAAA;AALFH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0BAAA,EAA6B,YAAY;AACzC,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAtD,CAAA;AAA0D,QAAA,aAAa,EAAE,CAAA,UAAA;AAAzE,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAFsB,WAEtBA,CAAnB,CAFyC,CAGzC;;AACAD,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAAA,CAAAA,GAAPF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,eAAAA;AALFH,KAAE,CAAFA;AAhBFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport 'jest-styled-components';\r\nimport { COLORS } from '../../styles';\r\nimport AccordionMenu from '../AccordionMenu';\r\n\r\nconst accordionItems = [\r\n  {\r\n    id: 'test1_id',\r\n    title: 'Item label with text 1',\r\n    children: <div>content test1</div>,\r\n  },\r\n  {\r\n    id: 'test2_id',\r\n    title: 'Item label with text 2',\r\n    children: <div>content test2</div>,\r\n  },\r\n];\r\n\r\ndescribe('<AccordionMenu />', () => {\r\n  it('Check correct text placed on labels', async () => {\r\n    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\r\n    expect(queryByText('Item label with text 1')).toBeDefined();\r\n    expect(queryByText('Item label with text 2')).toBeDefined();\r\n    expect(queryByText('content test1')).toBeNull();\r\n  });\r\n\r\n  it('Check item label element color and label', async () => {\r\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\r\n    const headerItem = container.querySelector('#test2_id');\r\n    expect(headerItem).toBeDefined();\r\n    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\r\n    expect(headerItem?.textContent).toContain('Item label with text 2');\r\n  });\r\n\r\n  it('Check expanded item text', async () => {\r\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItems={['test1_id']}></AccordionMenu>);\r\n    const headerItem = container.querySelector('#test1_id');\r\n    //check item expanded\r\n    expect(headerItem?.children[1]).toBeDefined();\r\n    expect(headerItem?.children[1]?.textContent).toContain('content test1');\r\n  });\r\n});\r\n"],"file":"AccordionMenu.test.js"}

package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js

@@ -0,0 +1,165 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "../ContentAccordion", "@testing-library/react", "../../types"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("../ContentAccordion"), require("@testing-library/react"), require("../../types"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.ContentAccordion, global.react, global.types);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _ContentAccordion, _react3, _types) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _ContentAccordion2 = _interopRequireDefault(_ContentAccordion);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('ContentAccordion', () => {
+    const contentAccordionItemsWithBody = [{
+      key: '1',
+      title: 'Item 1',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }, {
+      key: '2',
+      title: 'Item 2',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      active: true
+    }, {
+      key: '3',
+      title: 'Item 3',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      disabled: true
+    }, {
+      key: '4',
+      title: 'Item 4',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }];
+    const contentAccordionItemsWithBodyAndHeaderAndFooter = [{
+      key: '1',
+      title: 'Item 1',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 1',
+      footer: /*#__PURE__*/_react2.default.createElement("span", null)
+    }, {
+      key: '2',
+      title: 'Item 2',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 2',
+      footer: /*#__PURE__*/_react2.default.createElement("span", null)
+    }, {
+      key: '3',
+      title: 'Item 3',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 3',
+      footer: /*#__PURE__*/_react2.default.createElement("span", null),
+      disabled: true
+    }, {
+      key: '4',
+      title: 'Item 4',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      header: 'Header 4',
+      footer: /*#__PURE__*/_react2.default.createElement("span", null)
+    }];
+    it('should render items in correct state', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBody
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+    });
+    it('should not render header if not provided', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBody
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+      expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
+    });
+    it('should not render footer if not provided', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBody
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+      expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
+    });
+    it('should render body, header, and footer if all are provided', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBodyAndHeaderAndFooter
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
+      expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+      expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
+      expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
+    });
+    it('should set correct size class name for small accordion', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBodyAndHeaderAndFooter,
+        size: _types.Size.Small
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
+    });
+    it('should set correct size class name for medium accordion', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBodyAndHeaderAndFooter,
+        size: _types.Size.Medium
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
+    });
+    it('should set correct size class name for large accordion', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBodyAndHeaderAndFooter,
+        size: _types.Size.Large
+      }));
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
+    });
+    it('should change active state when item header is clicked', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBody,
+        multi: false
+      }));
+      const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
+
+      _react3.fireEvent.click(itemHeader);
+
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
+    });
+    it('should not change active state when disabled item header is clicked', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBody,
+        multi: false
+      }));
+      const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
+
+      _react3.fireEvent.click(itemHeader);
+
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+    });
+    it('should append active items if multi property is true', () => {
+      const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
+        items: contentAccordionItemsWithBody,
+        multi: true
+      }));
+      const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
+
+      _react3.fireEvent.click(itemHeader);
+
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+      expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
+    });
+  });
+});
+//# sourceMappingURL=ContetnAccordion.test.js.map

package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/ContetnAccordion.test.tsx"],"names":["describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","render","expect","Size","Small","Medium","Large","itemHeader","fireEvent"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport ContentAccordion from '../ContentAccordion';\r\nimport {fireEvent, render} from '@testing-library/react';\r\nimport {Size} from '../../types';\r\n\r\ndescribe('ContentAccordion', () => {\r\n  const contentAccordionItemsWithBody = [\r\n    {\r\n      key: '1',\r\n      title: 'Item 1',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\r\n    },\r\n    {\r\n      key: '2',\r\n      title: 'Item 2',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\r\n      active: true\r\n    },\r\n    {\r\n      key: '3',\r\n      title: 'Item 3',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\r\n      disabled: true\r\n    },\r\n    {\r\n      key: '4',\r\n      title: 'Item 4',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\r\n    }\r\n  ];\r\n\r\n  const contentAccordionItemsWithBodyAndHeaderAndFooter = [\r\n    {\r\n      key: '1',\r\n      title: 'Item 1',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\r\n      header: 'Header 1',\r\n      footer: <span/>,\r\n    },\r\n    {\r\n      key: '2',\r\n      title: 'Item 2',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\r\n      header: 'Header 2',\r\n      footer: <span/>,\r\n    },\r\n    {\r\n      key: '3',\r\n      title: 'Item 3',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\r\n      header: 'Header 3',\r\n      footer: <span/>,\r\n      disabled: true\r\n    },\r\n    {\r\n      key: '4',\r\n      title: 'Item 4',\r\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\r\n      header: 'Header 4',\r\n      footer: <span/>,\r\n    }\r\n  ];\r\n\r\n  it('should render items in correct state', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\r\n  });\r\n\r\n  it('should not render header if not provided', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);\r\n  });\r\n\r\n  it('should not render footer if not provided', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);\r\n  });\r\n\r\n  it('should render body, header, and footer if all are provided', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}/>);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);\r\n    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);\r\n  });\r\n\r\n  it('should set correct size class name for small accordion', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\r\n                                             size={Size.Small}/>);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);\r\n  });\r\n\r\n  it('should set correct size class name for medium accordion', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\r\n                                             size={Size.Medium}/>);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);\r\n  });\r\n\r\n  it('should set correct size class name for large accordion', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\r\n                                             size={Size.Large}/>);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);\r\n  });\r\n\r\n  it('should change active state when item header is clicked', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\r\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];\r\n\r\n    fireEvent.click(itemHeader);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');\r\n  });\r\n\r\n  it('should not change active state when disabled item header is clicked', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\r\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];\r\n\r\n    fireEvent.click(itemHeader);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\r\n  });\r\n\r\n  it('should append active items if multi property is true', () => {\r\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={true}/>);\r\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];\r\n\r\n    fireEvent.click(itemHeader);\r\n\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\r\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');\r\n  });\r\n\r\n});\r\n"],"file":"ContetnAccordion.test.js"}

package/dist/umd/Accordion/index.js

@@ -0,0 +1,44 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./AccordionMenu", "./styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./AccordionMenu"), require("./styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.AccordionMenu, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _AccordionMenu, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "AccordionMenu", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_AccordionMenu).default;
+    }
+  });
+  Object.defineProperty(exports, "AccordionMenuItem", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_AccordionMenu).default;
+    }
+  });
+  Object.defineProperty(exports, "AccordionMenuWrapper", {
+    enumerable: true,
+    get: function () {
+      return _styles.AccordionMenuWrapper;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

package/dist/umd/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;oDAAA,O;;;;;;oDACA,O;;;;;;qBACA,oB","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\r\nexport { default as AccordionMenuItem } from './AccordionMenu';\r\nexport { AccordionMenuWrapper } from './styles';\r\n"],"file":"index.js"}