@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Accordion/AccordionItem.js

@@ -1,47 +1,69 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { Size } from '..';
-import { SystemIcons } from '../icons';
-import { AccordionItemContainer, AccordionItemBodyContainer, AccordionItemHeaderContainer } from './styles';
-import { defaultOnMouseDownHandler } from '../common';
-var AccordionItem = function (props) {
-    var id = props.id, onSelect = props.onSelect, isActive = props.isActive, title = props.title, icon = props.icon, disabled = props.disabled, isLast = props.isLast, padding = props.padding, children = props.children, className = props.className, _a = props.size, size = _a === void 0 ? Size.Medium : _a, rest = __rest(props, ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"]);
-    var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
-    return (React.createElement(AccordionItemContainer, { id: id, className: size },
-        React.createElement(AccordionItemHeaderContainer, __assign({ role: "button", "aria-expanded": isActive, id: "itemHeaderFor_".concat(id), "aria-controls": "itemContentFor_".concat(id), tabIndex: !disabled ? 0 : undefined, onClick: function () {
-                if (!disabled) {
-                    onSelect(id);
-                }
-            }, onKeyDown: function (e) {
-                if (e.key === 'Enter')
-                    onSelect(id);
-            }, onMouseDown: defaultOnMouseDownHandler, className: cls }, rest),
-            icon,
-            React.createElement("span", null, title),
-            React.createElement("div", { "aria-hidden": "true" },
-                isActive && React.createElement(SystemIcons.ChevronUp, null),
-                !isActive && React.createElement(SystemIcons.ChevronDown, null))),
-        isActive && (React.createElement(AccordionItemBodyContainer, { id: "itemContentFor_".concat(id), padding: padding }, children))));
-};
-export default AccordionItem;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
+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) { _defineProperty(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; }
+import React from 'react';
+import { Size } from '..';
+import { SystemIcons } from '../icons';
+import { AccordionItemContainer, AccordionItemBodyContainer, AccordionItemHeaderContainer } from './styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var AccordionItem = function AccordionItem(props) {
+  var id = props.id,
+    onSelect = props.onSelect,
+    isActive = props.isActive,
+    title = props.title,
+    icon = props.icon,
+    disabled = props.disabled,
+    isLast = props.isLast,
+    padding = props.padding,
+    children = props.children,
+    className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? Size.Medium : _props$size,
+    rest = _objectWithoutProperties(props, _excluded);
+  var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
+  return /*#__PURE__*/_jsxs(AccordionItemContainer, {
+    id: id,
+    className: size,
+    children: [/*#__PURE__*/_jsxs(AccordionItemHeaderContainer, _objectSpread(_objectSpread({
+      role: "button",
+      "aria-expanded": isActive,
+      id: "itemHeaderFor_".concat(id),
+      "aria-controls": "itemContentFor_".concat(id),
+      tabIndex: !disabled ? 0 : undefined,
+      onClick: function onClick() {
+        if (!disabled) {
+          onSelect(id);
+        }
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter') onSelect(id);
+      },
+      onMouseDown: defaultOnMouseDownHandler,
+      className: cls
+    }, rest), {}, {
+      children: [icon, /*#__PURE__*/_jsx("span", {
+        children: title
+      }), /*#__PURE__*/_jsxs("div", {
+        "aria-hidden": "true",
+        children: [isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {})]
+      })]
+    })), isActive && /*#__PURE__*/_jsx(AccordionItemBodyContainer, {
+      id: "itemContentFor_".concat(id),
+      padding: padding,
+      children: children
+    })]
+  });
+};
+AccordionItem.propTypes = {
+  onSelect: _pt.func.isRequired,
+  isActive: _pt.bool.isRequired,
+  isLast: _pt.bool.isRequired,
+  padding: _pt.string
+};
+export default AccordionItem;
+//# sourceMappingURL=AccordionItem.js.map

package/dist/Accordion/AccordionMenu.js

@@ -1,66 +1,93 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import AccordionItem from './AccordionItem';
-import { AccordionMenuWrapper } from './styles';
+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 _pt from "prop-types";
+var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
+  _excluded2 = ["id", "disabled", "title", "icon", "children"];
+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) { _defineProperty(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; }
+import * as React from 'react';
+import AccordionItem from './AccordionItem';
+import { AccordionMenuWrapper } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * AccordionMenu component that is capable of displaying multiple collapsable sections.
- */
-var AccordionMenu = function (props) {
-    var items = props.items, selectedItems = props.selectedItems, setSelectedItems = props.setSelectedItems, onSelect = props.onSelect, multipleActive = props.multipleActive, padding = props.padding, size = props.size, rest = __rest(props, ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"]);
-    var _a = React.useState([]), builtinSelectedItems = _a[0], builtinSetSelectedItems = _a[1];
-    var getCollection = function () {
-        return selectedItems ? selectedItems : builtinSelectedItems;
-    };
-    var getUpdateFunction = function () {
-        return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
-    };
-    var onSelected = function (id) {
-        var collection = getCollection();
-        var updateFunc = getUpdateFunction();
-        var isActive = !!collection.find(function (x) { return x == id; });
-        if (multipleActive) {
-            if (isActive)
-                updateFunc(collection.filter(function (x) { return x != id; }));
-            else
-                updateFunc(__spreadArray(__spreadArray([], collection, true), [id], false));
-        }
-        else
-            updateFunc(isActive ? [] : [id]);
-        onSelect && onSelect(id);
-    };
-    return (React.createElement(AccordionMenuWrapper, __assign({}, rest), items.map(function (_a, index) {
-        var id = _a.id, disabled = _a.disabled, title = _a.title, icon = _a.icon, children = _a.children, rest = __rest(_a, ["id", "disabled", "title", "icon", "children"]);
-        return (React.createElement(AccordionItem, __assign({ key: id, id: id, disabled: disabled, title: title, "aria-expanded": !!getCollection().find(function (x) { return x == id; }), icon: icon, isActive: !!getCollection().find(function (x) { return x == id; }), isLast: index === items.length - 1, onSelect: onSelected, padding: padding, size: size }, rest), children));
-    })));
-};
-export default AccordionMenu;
+ */
+var AccordionMenu = function AccordionMenu(props) {
+  var items = props.items,
+    selectedItems = props.selectedItems,
+    setSelectedItems = props.setSelectedItems,
+    onSelect = props.onSelect,
+    multipleActive = props.multipleActive,
+    padding = props.padding,
+    size = props.size,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    builtinSelectedItems = _React$useState2[0],
+    builtinSetSelectedItems = _React$useState2[1];
+  var getCollection = function getCollection() {
+    return selectedItems ? selectedItems : builtinSelectedItems;
+  };
+  var getUpdateFunction = function getUpdateFunction() {
+    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
+  };
+  var onSelected = function onSelected(id) {
+    var collection = getCollection();
+    var updateFunc = getUpdateFunction();
+    var isActive = !!collection.find(function (x) {
+      return x == id;
+    });
+    if (multipleActive) {
+      if (isActive) updateFunc(collection.filter(function (x) {
+        return x != id;
+      }));else updateFunc([].concat(_toConsumableArray(collection), [id]));
+    } else updateFunc(isActive ? [] : [id]);
+    onSelect && onSelect(id);
+  };
+  return /*#__PURE__*/_jsx(AccordionMenuWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: items.map(function (_ref, index) {
+      var id = _ref.id,
+        disabled = _ref.disabled,
+        title = _ref.title,
+        icon = _ref.icon,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, _excluded2);
+      return /*#__PURE__*/_jsx(AccordionItem, _objectSpread(_objectSpread({
+        id: id,
+        disabled: disabled,
+        title: title,
+        "aria-expanded": !!getCollection().find(function (x) {
+          return x == id;
+        }),
+        icon: icon,
+        isActive: !!getCollection().find(function (x) {
+          return x == id;
+        }),
+        isLast: index === items.length - 1,
+        onSelect: onSelected,
+        padding: padding,
+        size: size
+      }, rest), {}, {
+        children: children
+      }), id);
+    })
+  }));
+};
+AccordionMenu.propTypes = {
+  items: _pt.arrayOf(_pt.shape({
+    id: _pt.string.isRequired,
+    disabled: _pt.bool,
+    title: _pt.string.isRequired,
+    icon: _pt.node,
+    children: _pt.node.isRequired
+  })).isRequired,
+  selectedItems: _pt.arrayOf(_pt.string),
+  setSelectedItems: _pt.func,
+  onSelect: _pt.func,
+  multipleActive: _pt.bool,
+  padding: _pt.string
+};
+export default AccordionMenu;
+//# sourceMappingURL=AccordionMenu.js.map

package/dist/Accordion/ContentAccordion.js

@@ -1,107 +1,156 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React from 'react';
-import styled from 'styled-components';
-import { Size } from '../types';
-import { SystemIcons } from '../icons';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES, } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-export var ContentAccordionItemHeader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active);
-export var ContentAccordionItemHeaderIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"], ["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-export var ContentAccordionItemHeaderText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var ContentAccordionItemContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  flex-direction: column;\n"], ["\n  display: none;\n  flex-direction: column;\n"])));
-export var ContentAccordionItemContentHeader = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-export var ContentAccordionItemContentBody = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-export var ContentAccordionItemContentFooter = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
-export var ContentAccordionItem = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\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"], ["\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"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
-export var ContentAccordionWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody);
+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"],
+  _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) { _defineProperty(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; }
+import React from 'react';
+import styled from 'styled-components';
+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"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, 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"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
+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, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody);
 /**
  * ContentAccordion component that is capable of displaying multiple collapsable sections with content.
- */
-export var ContentAccordion = function (_a) {
-    var items = _a.items, _b = _a.multi, multi = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, className = _a.className, onItemStateChanged = _a.onItemStateChanged, rest = __rest(_a, ["items", "multi", "size", "className", "onItemStateChanged"]);
-    var _d = React.useState([]), opened = _d[0], setOpened = _d[1];
-    React.useEffect(function () {
-        var _a;
-        if (multi) {
-            setOpened(items.filter(function (item) { return item.active; }).map(function (item) { return item.id; }));
-        }
-        else {
-            var active = (_a = items.find(function (item) { return !!item.active; })) === null || _a === void 0 ? void 0 : _a.id;
-            if (active) {
-                setOpened([active]);
-            }
-        }
-    }, [items, multi]);
-    var onItemClick = function (item) {
-        if (item.disabled)
-            return;
-        if (opened.includes(item.id)) {
-            var newOpened = opened.filter(function (key) { return key !== item.id; });
-            setOpened(newOpened);
-            onItemStateChanged && onItemStateChanged(newOpened);
-        }
-        else {
-            if (multi) {
-                var newOpened = __spreadArray(__spreadArray([], opened, true), [item.id], false);
-                setOpened(newOpened);
-                onItemStateChanged && onItemStateChanged(newOpened);
-            }
-            else {
-                var newOpened = [item.id];
-                setOpened(newOpened);
-                onItemStateChanged && onItemStateChanged(newOpened);
-            }
-        }
-    };
-    var renderItem = function (item) {
-        var id = item.id, title = item.title, header = item.header, body = item.body, footer = item.footer, disabled = item.disabled, active = item.active, rest = __rest(item, ["id", "title", "header", "body", "footer", "disabled", "active"]);
-        var isActive = opened.includes(id);
-        return (React.createElement(ContentAccordionItem, { key: id, id: "item_".concat(id), className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '') },
-            React.createElement(ContentAccordionItemHeader, __assign({ role: "button", id: "headerFor_".concat(id), "aria-expanded": isActive, "aria-controls": "itemContentFor_".concat(id), tabIndex: !disabled ? 0 : undefined, onMouseDown: defaultOnMouseDownHandler, onClick: function () { return !disabled && onItemClick(item); }, onKeyDown: function (event) { return event.key === 'Enter' && onItemClick(item); } }, rest),
-                React.createElement(ContentAccordionItemHeaderIcon, null, multi ? isActive ? React.createElement(SystemIcons.Minus, { "aria-hidden": "true" }) : React.createElement(SystemIcons.Plus, { "aria-hidden": "true" }) : isActive ?
-                    React.createElement(SystemIcons.ChevronDown, { "aria-hidden": "true" }) : React.createElement(SystemIcons.ChevronRight, { "aria-hidden": "true" })),
-                React.createElement(ContentAccordionItemHeaderText, null, title)),
-            React.createElement(ContentAccordionItemContent, { id: "itemContentFor_".concat(id) },
-                header && React.createElement(ContentAccordionItemContentHeader, null, header),
-                React.createElement(ContentAccordionItemContentBody, null, body),
-                footer && React.createElement(ContentAccordionItemContentFooter, null, footer))));
-    };
-    var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
-    return React.createElement(ContentAccordionWrapper, { className: cls }, items.map(function (item) { return renderItem(item); }));
-};
-export default ContentAccordion;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+ */
+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,
+    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 () {
+    if (multi) {
+      setOpened(items.filter(function (item) {
+        return item.active;
+      }).map(function (item) {
+        return 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;
+      if (active) {
+        setOpened([active]);
+      }
+    }
+  }, [items, multi]);
+  var onItemClick = function onItemClick(item) {
+    if (item.disabled) return;
+    if (opened.includes(item.id)) {
+      var newOpened = opened.filter(function (key) {
+        return key !== item.id;
+      });
+      setOpened(newOpened);
+      onItemStateChanged && onItemStateChanged(newOpened);
+    } else {
+      if (multi) {
+        var _newOpened = [].concat(_toConsumableArray(opened), [item.id]);
+        setOpened(_newOpened);
+        onItemStateChanged && onItemStateChanged(_newOpened);
+      } else {
+        var _newOpened2 = [item.id];
+        setOpened(_newOpened2);
+        onItemStateChanged && onItemStateChanged(_newOpened2);
+      }
+    }
+  };
+  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 = _objectWithoutProperties(item, _excluded2);
+    var isActive = opened.includes(id);
+    return /*#__PURE__*/_jsxs(ContentAccordionItem, {
+      id: "item_".concat(id),
+      className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
+      children: [/*#__PURE__*/_jsxs(ContentAccordionItemHeader, _objectSpread(_objectSpread({
+        role: "button",
+        id: "headerFor_".concat(id),
+        "aria-expanded": isActive,
+        "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);
+        }
+      }, rest), {}, {
+        children: [/*#__PURE__*/_jsx(ContentAccordionItemHeaderIcon, {
+          children: multi ? isActive ? /*#__PURE__*/_jsx(SystemIcons.Minus, {
+            "aria-hidden": "true"
+          }) : /*#__PURE__*/_jsx(SystemIcons.Plus, {
+            "aria-hidden": "true"
+          }) : isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
+            "aria-hidden": "true"
+          }) : /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
+            "aria-hidden": "true"
+          })
+        }), /*#__PURE__*/_jsx(ContentAccordionItemHeaderText, {
+          children: title
+        })]
+      })), /*#__PURE__*/_jsxs(ContentAccordionItemContent, {
+        id: "itemContentFor_".concat(id),
+        children: [header && /*#__PURE__*/_jsx(ContentAccordionItemContentHeader, {
+          children: header
+        }), /*#__PURE__*/_jsx(ContentAccordionItemContentBody, {
+          children: body
+        }), footer && /*#__PURE__*/_jsx(ContentAccordionItemContentFooter, {
+          children: footer
+        })]
+      })]
+    }, id);
+  };
+  var 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);
+    })
+  });
+};
+ContentAccordion.propTypes = {
+  items: _pt.arrayOf(_pt.shape({
+    id: _pt.string.isRequired,
+    title: _pt.string.isRequired,
+    header: _pt.string,
+    body: _pt.any.isRequired,
+    footer: _pt.any,
+    disabled: _pt.bool,
+    active: _pt.bool
+  })).isRequired,
+  multi: _pt.bool,
+  onItemStateChanged: _pt.func
+};
+export default ContentAccordion;
+//# sourceMappingURL=ContentAccordion.js.map

package/dist/Accordion/index.js

@@ -1,7 +1,8 @@
-export * from './AccordionMenu';
-export * from './AccordionItem';
-export * from './ContentAccordion';
-export { default as AccordionMenu } from './AccordionMenu';
-export { default as AccordionMenuItem } from './AccordionMenu';
-export { default as ContentAccordion } from './ContentAccordion';
-export { AccordionMenuWrapper } from './styles';
+export * from './AccordionMenu';
+export * from './AccordionItem';
+export * from './ContentAccordion';
+export { default as AccordionMenu } from './AccordionMenu';
+export { default as AccordionMenuItem } from './AccordionMenu';
+export { default as ContentAccordion } from './ContentAccordion';
+export { AccordionMenuWrapper } from './styles';
+//# sourceMappingURL=index.js.map