@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.3

package/dist/Accordion/ContentAccordion.cjs

@@ -1,101 +1,60 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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;
-
 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"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _types = require("../types");
-
 var _icons = require("../icons");
-
 var _typography = require("../styles/typography");
-
 var _styles = require("../styles");
-
 var _zIndexes = require("../styles/z-indexes");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["items", "multi", "size", "className"],
-    _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
-
+  _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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"])), _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.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.div(_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"])), _styles.COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, _styles.COLORS.neutral_300);
-
 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        ", "\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        ", "\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        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
-
 exports.ContentAccordionWrapper = ContentAccordionWrapper;
-
 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,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    _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,
+    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$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    opened = _React$useState2[0],
+    setOpened = _React$useState2[1];
   _react.default.useEffect(function () {
     if (multi) {
       setOpened(items.filter(function (item) {
@@ -105,20 +64,16 @@ var ContentAccordion = function ContentAccordion(_ref) {
       }));
     } 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)) {
       setOpened(opened.filter(function (key) {
         return key !== item.id;
@@ -131,16 +86,15 @@ var ContentAccordion = function ContentAccordion(_ref) {
       }
     }
   };
-
   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);
+      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);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItem, {
       id: "item_".concat(id),
@@ -176,7 +130,6 @@ var ContentAccordion = function ContentAccordion(_ref) {
       })]
     }, id);
   };
-
   var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionWrapper, {
     className: cls,
@@ -185,7 +138,6 @@ var ContentAccordion = function ContentAccordion(_ref) {
     })
   });
 };
-
 exports.ContentAccordion = ContentAccordion;
 ContentAccordion.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ParagraphSStyling","ParagraphTextStyle","ComponentMStyling","ParagraphMStyling","ComponentLStyling","ParagraphLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ParagraphSStyling","ParagraphTextStyle","ComponentMStyling","ParagraphMStyling","ComponentLStyling","ParagraphLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Accordion/ContentAccordion.js

@@ -5,14 +5,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["items", "multi", "size", "className"],
-    _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
-
+  _excluded2 = ["id", "title", "header", "body", "footer", "disabled", "active"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import styled from 'styled-components';
 import { Size } from '../types';
@@ -34,18 +30,16 @@ export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObjec
 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        ", "\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        ", "\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        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
 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,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _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,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      opened = _React$useState2[0],
-      setOpened = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    opened = _React$useState2[0],
+    setOpened = _React$useState2[1];
   React.useEffect(function () {
     if (multi) {
       setOpened(items.filter(function (item) {
@@ -55,20 +49,16 @@ export var ContentAccordion = function ContentAccordion(_ref) {
       }));
     } 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)) {
       setOpened(opened.filter(function (key) {
         return key !== item.id;
@@ -81,17 +71,15 @@ export var ContentAccordion = function ContentAccordion(_ref) {
       }
     }
   };
-
   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);
-
+      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),
@@ -127,7 +115,6 @@ export var ContentAccordion = function ContentAccordion(_ref) {
       })]
     }, id);
   };
-
   var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
   return /*#__PURE__*/_jsx(ContentAccordionWrapper, {
     className: cls,

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Accordion/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,10 +28,7 @@ Object.defineProperty(exports, "ContentAccordion", {
     return _ContentAccordion.ContentAccordion;
   }
 });
-
 var _AccordionMenu = _interopRequireDefault(require("./AccordionMenu"));
-
 var _ContentAccordion = require("./ContentAccordion");
-
 var _styles = require("./styles");
 //# sourceMappingURL=index.cjs.map

package/dist/Accordion/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA"}

package/dist/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","AccordionMenu","AccordionMenuItem","ContentAccordion","AccordionMenuWrapper"],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,aAAnB,QAAuC,iBAAvC;AACA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,iBAA3C;AACA,SAAQC,gBAAR,QAA+B,oBAA/B;AACA,SAAQC,oBAAR,QAAmC,UAAnC"}
+{"version":3,"file":"index.js","names":["default","AccordionMenu","AccordionMenuItem","ContentAccordion","AccordionMenuWrapper"],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,aAAa,QAAO,iBAAiB;AACxD,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,iBAAiB;AAC5D,SAAQC,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,oBAAoB,QAAO,UAAU"}

package/dist/Accordion/styles.cjs

@@ -1,43 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.HeaderIconContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _zIndexes = require("../styles/z-indexes");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-
 exports.AccordionMenuWrapper = AccordionMenuWrapper;
-
 var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
   return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
 });
-
 exports.AccordionItemContainer = AccordionItemContainer;
-
 var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\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"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-
 exports.ItemHeaderContainer = ItemHeaderContainer;
-
 var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
-
 exports.HeaderIconContainer = HeaderIconContainer;
-
 var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
   return props.padding || '12px 16px';
 }, _styles.COLORS.white);
-
 exports.ItemBodyContainer = ItemBodyContainer;
 //# sourceMappingURL=styles.cjs.map

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentMStyling","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,yBAAA,CAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,yBAAA,CAAOC,GAAV,wMAKhB,UAACE,KAAD;EAAA,OAAYA,KAAK,CAACC,gBAAN,uBAAsCC,cAAA,CAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,yBAAA,CAAOC,GAAV,2sBAQ5B,IAAAO,yBAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CL,cAAA,CAAOM,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdP,cAAA,CAAOQ,UApBO,EAqBnBR,cAAA,CAAOS,WArBY,EAsBjBC,mBAAA,CAAUC,KAtBO,EA0BnBX,cAAA,CAAOY,WA1BY,EA2BdZ,cAAA,CAAOa,WA3BO,EA4BjBH,mBAAA,CAAUI,MA5BO,EAgCnBd,cAAA,CAAOe,WAhCY,EAoCdf,cAAA,CAAOgB,KApCO,EAqCnBhB,cAAA,CAAOiB,WArCY,EAyCjBjB,cAAA,CAAOiB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGvB,yBAAA,CAAOC,GAAV,6GAAzB;;;;AAIA,IAAMuB,iBAAiB,GAAGxB,yBAAA,CAAOC,GAAV,+HACjB,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACsB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdpB,cAAA,CAAOgB,KAFO,CAAvB"}
+{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentMStyling","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAEK,IAAMC,sBAAsB,GAAGF,yBAAM,CAACC,GAAG,wMAK7B,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,gBAAgB,uBAAgBC,cAAM,CAACC,WAAW,IAAK,EAAE;AAAA,CAAC,CAC9F;AAAC;AAEK,IAAMC,mBAAmB,GAAGP,yBAAM,CAACC,GAAG,2sBAQzC,IAAAO,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,EAQ/DC,mBAAW,EAICP,cAAM,CAACQ,UAAU,EACtBR,cAAM,CAACS,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBX,cAAM,CAACY,WAAW,EACbZ,cAAM,CAACa,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBd,cAAM,CAACe,WAAW,EAIbf,cAAM,CAACgB,KAAK,EACjBhB,cAAM,CAACiB,WAAW,EAIhBjB,cAAM,CAACiB,WAAW,CAGhC;AAAC;AAEK,IAAMC,mBAAmB,GAAGvB,yBAAM,CAACC,GAAG,6GAE5C;AAAC;AAEK,IAAMuB,iBAAiB,GAAGxB,yBAAM,CAACC,GAAG,+HAC9B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACsB,OAAO,IAAI,WAAW;AAAA,GACpCpB,cAAM,CAACgB,KAAK,CAC3B;AAAC"}

package/dist/Accordion/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import styled from 'styled-components';
 import { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';
 import { Z_INDEXES } from '../styles/z-indexes';

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA4B,mBAA5B;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,kBAApC,EAAwDC,WAAxD,QAA2E,WAA3E;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAV,0LAKhB,UAACE,KAAD;EAAA,OAAYA,KAAK,CAACC,gBAAN,uBAAsCT,MAAM,CAACU,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AAQP,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAV,6rBAQ5BL,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CARW,EAgB1BV,WAhB0B,EAoBdH,MAAM,CAACc,UApBO,EAqBnBd,MAAM,CAACe,WArBY,EAsBjBX,SAAS,CAACY,KAtBO,EA0BnBhB,MAAM,CAACiB,WA1BY,EA2BdjB,MAAM,CAACkB,WA3BO,EA4BjBd,SAAS,CAACe,MA5BO,EAgCnBnB,MAAM,CAACoB,WAhCY,EAoCdpB,MAAM,CAACqB,KApCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCjBtB,MAAM,CAACsB,WAzCU,CAAzB;AA8CP,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAV,+FAAzB;AAIP,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAV,iHACjB,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACiB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdzB,MAAM,CAACqB,KAFO,CAAvB"}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AACtF,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAG,oKAK7C;AAED,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAG,0LAK7B,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,gBAAgB,uBAAgBT,MAAM,CAACU,WAAW,IAAK,EAAE;AAAA,CAAC,CAC9F;AAED,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAG,6rBAQzCL,iBAAiB,CAACC,kBAAkB,CAACU,OAAO,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAQ/DV,WAAW,EAICH,MAAM,CAACc,UAAU,EACtBd,MAAM,CAACe,WAAW,EAChBX,SAAS,CAACY,KAAK,EAIjBhB,MAAM,CAACiB,WAAW,EACbjB,MAAM,CAACkB,WAAW,EACrBd,SAAS,CAACe,MAAM,EAIlBnB,MAAM,CAACoB,WAAW,EAIbpB,MAAM,CAACqB,KAAK,EACjBrB,MAAM,CAACsB,WAAW,EAIhBtB,MAAM,CAACsB,WAAW,CAGhC;AAED,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAG,+FAE5C;AAED,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAG,iHAC9B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACiB,OAAO,IAAI,WAAW;AAAA,GACpCzB,MAAM,CAACqB,KAAK,CAC3B"}

package/dist/AuthPage/AuthPage.cjs

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styles = require("../styles");
-
 var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
-
 var _Information = require("./Information");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
  * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
@@ -32,16 +21,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var AuthPage = function AuthPage(_ref) {
   var showInformationSection = _ref.showInformationSection,
-      signUp = _ref.signUp,
-      signUpPlaceholderImage = _ref.signUpPlaceholderImage,
-      signInPlaceholderImage = _ref.signInPlaceholderImage,
-      signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
-      signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
-      signUpInformationHeader = _ref.signUpInformationHeader,
-      signInInformationHeader = _ref.signInInformationHeader,
-      signUpInformationText = _ref.signUpInformationText,
-      signInInformationText = _ref.signInInformationText,
-      screenSetsContainerId = _ref.screenSetsContainerId;
+    signUp = _ref.signUp,
+    signUpPlaceholderImage = _ref.signUpPlaceholderImage,
+    signInPlaceholderImage = _ref.signInPlaceholderImage,
+    signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
+    signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
+    signUpInformationHeader = _ref.signUpInformationHeader,
+    signInInformationHeader = _ref.signInInformationHeader,
+    signUpInformationText = _ref.signUpInformationText,
+    signInInformationText = _ref.signInInformationText,
+    screenSetsContainerId = _ref.screenSetsContainerId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [showInformationSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationContainer, {
       $color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20,
@@ -61,7 +50,6 @@ var AuthPage = function AuthPage(_ref) {
     })]
   });
 };
-
 AuthPage.propTypes = {
   showInformationSection: _propTypes.default.bool.isRequired,
   signUp: _propTypes.default.bool.isRequired,