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

package/dist/Accordion/ContentAccordion.js

@@ -1,156 +1,107 @@
-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);
+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);
 /**
  * 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,
-    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
+ */
+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;

package/dist/Accordion/index.js

@@ -1,8 +1,7 @@
-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
+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';

package/dist/Accordion/styles.js

@@ -1,16 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
-import { Z_INDEXES } from '../styles/z-indexes';
-export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-export var AccordionItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
-export var AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, COLORS.neutral_100);
-export var AccordionItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) {
-  return props.padding || '8px 16px';
-}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) {
-  return props.padding || '12px 24px';
-}, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) {
-  return props.padding || '14px 32px';
-}, ComponentLStyling(ComponentTextStyle.Regular, null));
-//# sourceMappingURL=styles.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+export var AccordionMenuWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"], ["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+export var AccordionItemHeaderContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
+export var AccordionItemContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, COLORS.neutral_100);
+export var AccordionItemBodyContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"], ["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) { return props.padding || '8px 16px'; }, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) { return props.padding || '12px 24px'; }, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) { return props.padding || '14px 32px'; }, ComponentLStyling(ComponentTextStyle.Regular, null));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/AuthPage/AuthPage.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { PanelProps } from "../Panel";
 export declare const AuthPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type AuthPageProps = {
+export declare type AuthPageProps = {
     panel?: PanelProps;
     order?: 'default' | 'reverse';
     screenSetsContainerId: string;
 };
-declare const AuthPage: ({ screenSetsContainerId, panel, order }: AuthPageProps) => JSX.Element;
+declare const AuthPage: ({ screenSetsContainerId, panel, order }: AuthPageProps) => React.JSX.Element;
 export default AuthPage;

package/dist/AuthPage/AuthPage.js

@@ -1,36 +1,29 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject;
-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 ScreenSetsContainer from './ScreenSetsContainer';
-import styled from "styled-components";
-import { Panel } from "../Panel";
-import { BREAKPOINTS } from "../styles";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var AuthPageWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var AuthPage = function AuthPage(_ref) {
-  var screenSetsContainerId = _ref.screenSetsContainerId,
-    panel = _ref.panel,
-    _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 'default' : _ref$order;
-  return /*#__PURE__*/_jsxs(AuthPageWrapper, {
-    className: order,
-    children: [panel && /*#__PURE__*/_jsx(Panel, _objectSpread(_objectSpread({}, panel), {}, {
-      order: order,
-      className: "panel ".concat(panel.className || '')
-    })), /*#__PURE__*/_jsx(ScreenSetsContainer, {
-      id: screenSetsContainerId,
-      centerContents: !panel
-    })]
-  });
-};
-AuthPage.propTypes = {
-  order: _pt.oneOf(['default', 'reverse']),
-  screenSetsContainerId: _pt.string.isRequired
-};
-export default AuthPage;
-//# sourceMappingURL=AuthPage.js.map
+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);
+};
+import * as React from 'react';
+import ScreenSetsContainer from './ScreenSetsContainer';
+import styled from "styled-components";
+import { Panel } from "../Panel";
+import { BREAKPOINTS } from "../styles";
+export var AuthPageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var AuthPage = function (_a) {
+    var screenSetsContainerId = _a.screenSetsContainerId, panel = _a.panel, _b = _a.order, order = _b === void 0 ? 'default' : _b;
+    return (React.createElement(AuthPageWrapper, { className: order },
+        panel && React.createElement(Panel, __assign({}, panel, { order: order, className: "panel ".concat(panel.className || '') })),
+        React.createElement(ScreenSetsContainer, { id: screenSetsContainerId, centerContents: !panel })));
+};
+export default AuthPage;
+var templateObject_1;

package/dist/AuthPage/ScreenSetsContainer.js

@@ -1,9 +1,9 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
-import styled from 'styled-components';
-import { BREAKPOINTS } from '../styles';
-var ScreenSetsContainer = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) {
-  return props.centerContents ? 'center' : 'unset';
-}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
-export default ScreenSetsContainer;
-//# sourceMappingURL=ScreenSetsContainer.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+var ScreenSetsContainer = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) { return (props.centerContents ? 'center' : 'unset'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+export default ScreenSetsContainer;
+var templateObject_1;

package/dist/AuthPage/index.js

@@ -1,5 +1,4 @@
-export * from './ScreenSetsContainer';
-export * from './AuthPage';
-export { default as ScreenSetsContainer } from './ScreenSetsContainer';
-export { default as AuthPage } from './AuthPage';
-//# sourceMappingURL=index.js.map
+export * from './ScreenSetsContainer';
+export * from './AuthPage';
+export { default as ScreenSetsContainer } from './ScreenSetsContainer';
+export { default as AuthPage } from './AuthPage';

package/dist/Banners/Banner.d.ts

@@ -3,23 +3,33 @@ import { Size } from '../types';
 /**
  * Styles for <Banner />
  */
-export type StyleBannerProps = BannerProps & {
+export declare type StyleBannerProps = BannerProps & {
     $type: string;
     linkVisited: string;
     linkFocused: string;
 };
 export declare const BannerContainerStyles: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & {
+    /** Size of the banner. */
     size?: Size.Small | Size.Medium | Size.Large | undefined;
-    type?: "positive" | "critical" | "warning" | "neutral" | undefined;
+    /** Type of the banner. Different types have different color schemes. */
+    type?: "warning" | "critical" | "positive" | "neutral" | undefined;
+    /** Link that will be shown after the children of the component. */
     link?: string | undefined;
+    /** Text of the link */
     linkText?: string | undefined;
+    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
     linkAction?: ((ev: React.MouseEvent) => void) | undefined;
-    hover?: string | undefined;
+    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
     bottom?: boolean | undefined;
+    /** For testing purposes. Will be set on top level container. */
     testId?: string | undefined;
+    /** Icon to be shown instead of default icon on the left side of the Banner. */
     icon?: React.ReactNode;
+    /** Callback event to be executed when user clicks on Close button. */
     onClose?: (() => void) | undefined;
+    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
     noIcon?: boolean | undefined;
+    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
     fullWidth?: boolean | undefined;
 } & {
     $type: string;
@@ -32,19 +42,30 @@ export declare const BannerCloseButtonContainerStyles: import("styled-components
     $type?: string | undefined;
 }, never>;
 export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+export declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Size of the banner. */
     size?: Size.Small | Size.Medium | Size.Large;
+    /** Type of the banner. Different types have different color schemes. */
     type?: 'warning' | 'critical' | 'positive' | 'neutral';
+    /** Link that will be shown after the children of the component. */
     link?: string;
+    /** Text of the link */
     linkText?: string;
+    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
     linkAction?: (ev: React.MouseEvent) => void;
-    hover?: string;
+    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
     bottom?: boolean;
+    /** For testing purposes. Will be set on top level container. */
     testId?: string;
+    /** Icon to be shown instead of default icon on the left side of the Banner. */
     icon?: React.ReactNode;
+    /** Callback event to be executed when user clicks on Close button. */
     onClose?: () => void;
+    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
     noIcon?: boolean;
+    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
     fullWidth?: boolean;
 };
+/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
 declare const Banner: React.FunctionComponent<BannerProps>;
 export default Banner;