@laerdal/life-react-components 5.0.9 → 5.1.0

package/dist/Accordion/ContentAccordion.cjs

@@ -4,10 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ContentAccordionWrapper = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContent = exports.ContentAccordionItem = exports.ContentAccordion = void 0;
+exports.default = exports.ContentAccordionWrapper = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContent = exports.ContentAccordionItem = exports.ContentAccordion = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -18,114 +16,74 @@ var _icons = require("../icons");
 var _styles = require("../styles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
+const _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
   _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ContentAccordionItemHeader = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_20', props.theme);
-}, _styles.Z_INDEXES.hover, _styles.focusStyles, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_100', props.theme);
-}, _styles.Z_INDEXES.active);
-exports.ContentAccordionItemHeader = ContentAccordionItemHeader;
-var ContentAccordionItemHeaderIcon = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
-var ContentAccordionItemHeaderText = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
-exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
-var ContentAccordionItemContent = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n  flex-direction: column;\n"])));
-exports.ContentAccordionItemContent = ContentAccordionItemContent;
-var ContentAccordionItemContentHeader = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])([""])));
-exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
-var ContentAccordionItemContentBody = _styledComponents["default"].p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
-exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
-var ContentAccordionItemContentFooter = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])([""])));
-exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
-var ContentAccordionItem = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, ContentAccordionItemContent, ContentAccordionItemHeader, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-});
-exports.ContentAccordionItem = ContentAccordionItem;
-var ContentAccordionWrapper = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, ContentAccordionItemHeader, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
-}, ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
-}, ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
-  return (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
-}, ContentAccordionItemContentBody);
-exports.ContentAccordionWrapper = ContentAccordionWrapper;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const ContentAccordionItemHeader = exports.ContentAccordionItemHeader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), _styles.Z_INDEXES.hover, _styles.focusStyles, props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_100', props.theme), _styles.Z_INDEXES.active);
+const ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
+const ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
+const ContentAccordionItemContent = exports.ContentAccordionItemContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-direction: column;\n"])));
+const ContentAccordionItemContentHeader = exports.ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
+const ContentAccordionItemContentBody = exports.ContentAccordionItemContentBody = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([""])));
+const ContentAccordionItemContentFooter = exports.ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
+const ContentAccordionItem = exports.ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), props => _styles.COLORS.getColor('neutral_100', props.theme), ContentAccordionItemContent, ContentAccordionItemHeader, props => _styles.COLORS.getColor('neutral_300', props.theme));
+const ContentAccordionWrapper = exports.ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, props => _styles.COLORS.getColor('neutral_100', props.theme), ContentAccordionItemHeader, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme)), ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme)), ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme)), ContentAccordionItemContentBody);
 /**
  * ContentAccordion component that is capable of displaying multiple collapsable sections with content.
  */
-var ContentAccordion = function ContentAccordion(_ref) {
-  var items = _ref.items,
-    _ref$multi = _ref.multi,
-    multi = _ref$multi === void 0 ? false : _ref$multi,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-    className = _ref.className,
-    onItemStateChanged = _ref.onItemStateChanged,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _React$useState = _react["default"].useState([]),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    opened = _React$useState2[0],
-    setOpened = _React$useState2[1];
-  _react["default"].useEffect(function () {
+const ContentAccordion = _ref => {
+  let {
+      items,
+      multi = false,
+      size = _types.Size.Medium,
+      className,
+      onItemStateChanged
+    } = _ref,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const [opened, setOpened] = _react.default.useState([]);
+  _react.default.useEffect(() => {
     if (multi) {
-      setOpened(items.filter(function (item) {
-        return item.active;
-      }).map(function (item) {
-        return item.id;
-      }));
+      setOpened(items.filter(item => item.active).map(item => item.id));
     } else {
       var _items$find;
-      var active = (_items$find = items.find(function (item) {
-        return !!item.active;
-      })) === null || _items$find === void 0 ? void 0 : _items$find.id;
+      let active = (_items$find = items.find(item => !!item.active)) === null || _items$find === void 0 ? void 0 : _items$find.id;
       if (active) {
         setOpened([active]);
       }
     }
   }, [items, multi]);
-  var onItemClick = function onItemClick(item) {
+  const onItemClick = item => {
     if (item.disabled) return;
     if (opened.includes(item.id)) {
-      var newOpened = opened.filter(function (key) {
-        return key !== item.id;
-      });
+      const newOpened = opened.filter(key => key !== item.id);
       setOpened(newOpened);
       onItemStateChanged && onItemStateChanged(newOpened);
     } else {
       if (multi) {
-        var _newOpened = [].concat((0, _toConsumableArray2["default"])(opened), [item.id]);
-        setOpened(_newOpened);
-        onItemStateChanged && onItemStateChanged(_newOpened);
+        const newOpened = [...opened, item.id];
+        setOpened(newOpened);
+        onItemStateChanged && onItemStateChanged(newOpened);
       } else {
-        var _newOpened2 = [item.id];
-        setOpened(_newOpened2);
-        onItemStateChanged && onItemStateChanged(_newOpened2);
+        const newOpened = [item.id];
+        setOpened(newOpened);
+        onItemStateChanged && onItemStateChanged(newOpened);
       }
     }
   };
-  var renderItem = function renderItem(item) {
-    var id = item.id,
-      title = item.title,
-      header = item.header,
-      body = item.body,
-      footer = item.footer,
-      disabled = item.disabled,
-      active = item.active,
-      rest = (0, _objectWithoutProperties2["default"])(item, _excluded2);
-    var isActive = opened.includes(id);
+  const renderItem = item => {
+    const {
+        id,
+        title,
+        header,
+        body,
+        footer,
+        disabled,
+        active
+      } = item,
+      rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+    const isActive = opened.includes(id);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItem, {
       id: "item_".concat(id),
       className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
@@ -136,12 +94,8 @@ var ContentAccordion = function ContentAccordion(_ref) {
         "aria-controls": "itemContentFor_".concat(id),
         tabIndex: !disabled ? 0 : undefined,
         onMouseDown: _common.defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return !disabled && onItemClick(item);
-        },
-        onKeyDown: function onKeyDown(event) {
-          return event.key === 'Enter' && onItemClick(item);
-        }
+        onClick: () => !disabled && onItemClick(item),
+        onKeyDown: event => event.key === 'Enter' && onItemClick(item)
       }, rest), {}, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderIcon, {
           children: multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {
@@ -168,28 +122,25 @@ var ContentAccordion = function ContentAccordion(_ref) {
       })]
     }, id);
   };
-  var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
+  const cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionWrapper, {
     className: cls,
-    children: items.map(function (item) {
-      return renderItem(item);
-    })
+    children: items.map(item => renderItem(item))
   });
 };
 exports.ContentAccordion = ContentAccordion;
 ContentAccordion.propTypes = {
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    id: _propTypes["default"].string.isRequired,
-    title: _propTypes["default"].string.isRequired,
-    header: _propTypes["default"].string,
-    body: _propTypes["default"].any.isRequired,
-    footer: _propTypes["default"].any,
-    disabled: _propTypes["default"].bool,
-    active: _propTypes["default"].bool
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    header: _propTypes.default.string,
+    body: _propTypes.default.any.isRequired,
+    footer: _propTypes.default.any,
+    disabled: _propTypes.default.bool,
+    active: _propTypes.default.bool
   })).isRequired,
-  multi: _propTypes["default"].bool,
-  onItemStateChanged: _propTypes["default"].func
+  multi: _propTypes.default.bool,
+  onItemStateChanged: _propTypes.default.func
 };
-var _default = ContentAccordion;
-exports["default"] = _default;
+var _default = exports.default = ContentAccordion;
 //# sourceMappingURL=ContentAccordion.cjs.map

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_types","_icons","_styles","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ContentAccordionItemHeader","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","Z_INDEXES","hover","focusStyles","active","exports","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","ComponentMStyling","ComponentLStyling","ContentAccordion","_ref","items","_ref$multi","multi","_ref$size","size","Size","Medium","className","onItemStateChanged","rest","_objectWithoutProperties2","_React$useState","React","useState","_React$useState2","_slicedToArray2","opened","setOpened","useEffect","item","map","id","_items$find","find","onItemClick","disabled","includes","newOpened","key","concat","_toConsumableArray2","renderItem","title","header","body","footer","isActive","jsxs","children","role","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","onClick","onKeyDown","event","jsx","SystemIcons","Minus","Plus","ChevronDown","ChevronRight","cls","trim","propTypes","_propTypes","arrayOf","shape","string","isRequired","any","bool","func","_default"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  Z_INDEXES,\r\n} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n  display: none;\r\n  flex-direction: column;\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.p``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    ${ContentAccordionItemContent} {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    ${ContentAccordionItemHeader} {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  ${ContentAccordionItem}:last-child {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\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    ${ContentAccordionItemHeader} {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\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    ${ContentAccordionItemHeader} {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\r\n  /** Id of the section. Should be unique. */\r\n  id: string;\r\n  /** Title of the section. */\r\n  title: string;\r\n  /** Header that will be shown in the content area of the item.  */\r\n  header?: string;\r\n  /** Body that will be shown in the content area of the item */\r\n  body: any;\r\n  /** Footer that will be shown in the content area of the item */\r\n  footer?: any;\r\n  /** User can not expand the section if it is disabled */\r\n  disabled?: boolean;\r\n  /** Initial state of the item (expanded/collapsed) */\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** List of the content items */\r\n  items: ContentAccordionItem[];\r\n  /** Allow keeping multiple content sections open */\r\n  multi?: boolean;\r\n  /** Size of the whole component */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Callback that is called when section is collapsed/expanded. */\r\n  onItemStateChanged?: (opened: string[]) => void; \r\n}\r\n\r\n/**\r\n * ContentAccordion component that is capable of displaying multiple collapsable sections with content.\r\n */\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\r\n                                                                                   items,\r\n                                                                                   multi = false,\r\n                                                                                   size = Size.Medium,\r\n                                                                                   className,\r\n                                                                                   onItemStateChanged,\r\n                                                                                   ...rest\r\n                                                                                 }) => {\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (multi) {\r\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\r\n    } else {\r\n      let active = items.find((item) => !!item.active)?.id;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [items, multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.id)) {\r\n      const newOpened = opened.filter((key) => key !== item.id);\r\n      setOpened(newOpened);\r\n      onItemStateChanged && onItemStateChanged(newOpened);\r\n    } else {\r\n      if (multi) {\r\n        const newOpened = [...opened, item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      } else {\r\n        const newOpened = [item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\r\n    const isActive = opened.includes(id);\r\n\r\n    return (\r\n      <ContentAccordionItem key={id} id={`item_${id}`}\r\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <ContentAccordionItemHeader\r\n          role=\"button\"\r\n          id={`headerFor_${id}`}\r\n          aria-expanded={isActive}\r\n          aria-controls={`itemContentFor_${id}`}\r\n          tabIndex={!disabled ? 0 : undefined}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={() => !disabled && onItemClick(item)}\r\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\r\n          {...rest}>\r\n          <ContentAccordionItemHeaderIcon>\r\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\r\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\r\n          </ContentAccordionItemHeaderIcon>\r\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\r\n        </ContentAccordionItemHeader>\r\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\r\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\r\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\r\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\r\n        </ContentAccordionItemContent>\r\n      </ContentAccordionItem>\r\n    );\r\n  };\r\n\r\n  const cls = `${size} ${className ?? ''}`.trim();\r\n\r\n  return <ContentAccordionWrapper className={cls}>\r\n    {items.map((item) => renderItem(item))}\r\n  </ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContentAccordion.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_types","_icons","_styles","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","ContentAccordionItemHeader","exports","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","Z_INDEXES","hover","focusStyles","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","ComponentMStyling","ComponentLStyling","ContentAccordion","_ref","items","multi","size","Size","Medium","className","onItemStateChanged","rest","_objectWithoutProperties2","opened","setOpened","React","useState","useEffect","item","map","id","_items$find","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","isActive","jsxs","concat","children","role","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","onClick","onKeyDown","event","jsx","SystemIcons","Minus","Plus","ChevronDown","ChevronRight","cls","trim","propTypes","_propTypes","arrayOf","shape","string","isRequired","any","bool","func","_default"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  Z_INDEXES,\r\n} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n  display: none;\r\n  flex-direction: column;\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.p``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    ${ContentAccordionItemContent} {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    ${ContentAccordionItemHeader} {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  ${ContentAccordionItem}:last-child {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\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    ${ContentAccordionItemHeader} {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\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    ${ContentAccordionItemHeader} {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\r\n  /** Id of the section. Should be unique. */\r\n  id: string;\r\n  /** Title of the section. */\r\n  title: string;\r\n  /** Header that will be shown in the content area of the item.  */\r\n  header?: string;\r\n  /** Body that will be shown in the content area of the item */\r\n  body: any;\r\n  /** Footer that will be shown in the content area of the item */\r\n  footer?: any;\r\n  /** User can not expand the section if it is disabled */\r\n  disabled?: boolean;\r\n  /** Initial state of the item (expanded/collapsed) */\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** List of the content items */\r\n  items: ContentAccordionItem[];\r\n  /** Allow keeping multiple content sections open */\r\n  multi?: boolean;\r\n  /** Size of the whole component */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Callback that is called when section is collapsed/expanded. */\r\n  onItemStateChanged?: (opened: string[]) => void; \r\n}\r\n\r\n/**\r\n * ContentAccordion component that is capable of displaying multiple collapsable sections with content.\r\n */\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\r\n                                                                                   items,\r\n                                                                                   multi = false,\r\n                                                                                   size = Size.Medium,\r\n                                                                                   className,\r\n                                                                                   onItemStateChanged,\r\n                                                                                   ...rest\r\n                                                                                 }) => {\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (multi) {\r\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\r\n    } else {\r\n      let active = items.find((item) => !!item.active)?.id;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [items, multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.id)) {\r\n      const newOpened = opened.filter((key) => key !== item.id);\r\n      setOpened(newOpened);\r\n      onItemStateChanged && onItemStateChanged(newOpened);\r\n    } else {\r\n      if (multi) {\r\n        const newOpened = [...opened, item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      } else {\r\n        const newOpened = [item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\r\n    const isActive = opened.includes(id);\r\n\r\n    return (\r\n      <ContentAccordionItem key={id} id={`item_${id}`}\r\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <ContentAccordionItemHeader\r\n          role=\"button\"\r\n          id={`headerFor_${id}`}\r\n          aria-expanded={isActive}\r\n          aria-controls={`itemContentFor_${id}`}\r\n          tabIndex={!disabled ? 0 : undefined}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={() => !disabled && onItemClick(item)}\r\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\r\n          {...rest}>\r\n          <ContentAccordionItemHeaderIcon>\r\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\r\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\r\n          </ContentAccordionItemHeaderIcon>\r\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\r\n        </ContentAccordionItemHeader>\r\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\r\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\r\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\r\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\r\n        </ContentAccordionItemContent>\r\n      </ContentAccordionItem>\r\n    );\r\n  };\r\n\r\n  const cls = `${size} ${className ?? ''}`.trim();\r\n\r\n  return <ContentAccordionWrapper className={cls}>\r\n    {items.map((item) => renderItem(item))}\r\n  </ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Accordion/ContentAccordion.js

@@ -1,10 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
+const _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
   _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -15,102 +13,70 @@ import { Size } from '../types';
 import { SystemIcons } from '../icons';
 import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, Z_INDEXES.hover, focusStyles, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_100', props.theme);
-}, Z_INDEXES.active);
-export var ContentAccordionItemHeaderIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-export var ContentAccordionItemContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n"])));
-export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-export var ContentAccordionItemContentBody = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
-export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, ContentAccordionItemContent, ContentAccordionItemHeader, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
-}, ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
-  return ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
-}, ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
-  return ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
-}, ContentAccordionItemContentBody);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), props => COLORS.getColor('neutral_600', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_20', props.theme), Z_INDEXES.hover, focusStyles, props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('primary_100', props.theme), Z_INDEXES.active);
+export const ContentAccordionItemHeaderIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
+export const ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+export const ContentAccordionItemContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n"])));
+export const ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
+export const ContentAccordionItemContentBody = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
+export const ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+export const ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), props => COLORS.getColor('neutral_100', props.theme), ContentAccordionItemContent, ContentAccordionItemHeader, props => COLORS.getColor('neutral_300', props.theme));
+export const ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, props => COLORS.getColor('neutral_100', props.theme), ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme)), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme)), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme)), ContentAccordionItemContentBody);
 /**
  * ContentAccordion component that is capable of displaying multiple collapsable sections with content.
  */
-export var ContentAccordion = function ContentAccordion(_ref) {
-  var items = _ref.items,
-    _ref$multi = _ref.multi,
-    multi = _ref$multi === void 0 ? false : _ref$multi,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    className = _ref.className,
-    onItemStateChanged = _ref.onItemStateChanged,
+export const ContentAccordion = _ref => {
+  let {
+      items,
+      multi = false,
+      size = Size.Medium,
+      className,
+      onItemStateChanged
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    opened = _React$useState2[0],
-    setOpened = _React$useState2[1];
-  React.useEffect(function () {
+  const [opened, setOpened] = React.useState([]);
+  React.useEffect(() => {
     if (multi) {
-      setOpened(items.filter(function (item) {
-        return item.active;
-      }).map(function (item) {
-        return item.id;
-      }));
+      setOpened(items.filter(item => item.active).map(item => item.id));
     } else {
       var _items$find;
-      var active = (_items$find = items.find(function (item) {
-        return !!item.active;
-      })) === null || _items$find === void 0 ? void 0 : _items$find.id;
+      let active = (_items$find = items.find(item => !!item.active)) === null || _items$find === void 0 ? void 0 : _items$find.id;
       if (active) {
         setOpened([active]);
       }
     }
   }, [items, multi]);
-  var onItemClick = function onItemClick(item) {
+  const onItemClick = item => {
     if (item.disabled) return;
     if (opened.includes(item.id)) {
-      var newOpened = opened.filter(function (key) {
-        return key !== item.id;
-      });
+      const newOpened = opened.filter(key => key !== item.id);
       setOpened(newOpened);
       onItemStateChanged && onItemStateChanged(newOpened);
     } else {
       if (multi) {
-        var _newOpened = [].concat(_toConsumableArray(opened), [item.id]);
-        setOpened(_newOpened);
-        onItemStateChanged && onItemStateChanged(_newOpened);
+        const newOpened = [...opened, item.id];
+        setOpened(newOpened);
+        onItemStateChanged && onItemStateChanged(newOpened);
       } else {
-        var _newOpened2 = [item.id];
-        setOpened(_newOpened2);
-        onItemStateChanged && onItemStateChanged(_newOpened2);
+        const newOpened = [item.id];
+        setOpened(newOpened);
+        onItemStateChanged && onItemStateChanged(newOpened);
       }
     }
   };
-  var renderItem = function renderItem(item) {
-    var id = item.id,
-      title = item.title,
-      header = item.header,
-      body = item.body,
-      footer = item.footer,
-      disabled = item.disabled,
-      active = item.active,
+  const renderItem = item => {
+    const {
+        id,
+        title,
+        header,
+        body,
+        footer,
+        disabled,
+        active
+      } = item,
       rest = _objectWithoutProperties(item, _excluded2);
-    var isActive = opened.includes(id);
+    const isActive = opened.includes(id);
     return /*#__PURE__*/_jsxs(ContentAccordionItem, {
       id: "item_".concat(id),
       className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
@@ -121,12 +87,8 @@ export var ContentAccordion = function ContentAccordion(_ref) {
         "aria-controls": "itemContentFor_".concat(id),
         tabIndex: !disabled ? 0 : undefined,
         onMouseDown: defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return !disabled && onItemClick(item);
-        },
-        onKeyDown: function onKeyDown(event) {
-          return event.key === 'Enter' && onItemClick(item);
-        }
+        onClick: () => !disabled && onItemClick(item),
+        onKeyDown: event => event.key === 'Enter' && onItemClick(item)
       }, rest), {}, {
         children: [/*#__PURE__*/_jsx(ContentAccordionItemHeaderIcon, {
           children: multi ? isActive ? /*#__PURE__*/_jsx(SystemIcons.Minus, {
@@ -153,12 +115,10 @@ export var ContentAccordion = function ContentAccordion(_ref) {
       })]
     }, id);
   };
-  var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
+  const cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
   return /*#__PURE__*/_jsx(ContentAccordionWrapper, {
     className: cls,
-    children: items.map(function (item) {
-      return renderItem(item);
-    })
+    children: items.map(item => renderItem(item))
   });
 };
 ContentAccordion.propTypes = {