@laerdal/life-react-components 1.9.9-dev.7 → 1.10.1-dev.1

package/dist/Accordion/ContentAccordion.cjs

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
@@ -33,8 +37,15 @@ var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["items", "multi", "size", "className"],
+    _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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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;
@@ -67,12 +78,18 @@ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_t
 
 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.ParagraphSStyling)(_typography.ParagraphTextStyle.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.ParagraphMStyling)(_typography.ParagraphTextStyle.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.ParagraphLStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
+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(props) {
-  var _props$size;
+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);
 
   var _React$useState = _react.default.useState([]),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -80,75 +97,88 @@ var ContentAccordion = function ContentAccordion(props) {
       setOpened = _React$useState2[1];
 
   _react.default.useEffect(function () {
-    if (props.multi) {
-      setOpened(props.items.filter(function (item) {
+    if (multi) {
+      setOpened(items.filter(function (item) {
         return item.active;
       }).map(function (item) {
-        return item.key;
+        return item.id;
       }));
     } else {
-      var _props$items$find;
+      var _items$find;
 
-      var active = (_props$items$find = props.items.find(function (item) {
+      var active = (_items$find = items.find(function (item) {
         return !!item.active;
-      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
+      })) === null || _items$find === void 0 ? void 0 : _items$find.id;
 
       if (active) {
         setOpened([active]);
       }
     }
-  }, [props.items, props.multi]);
+  }, [items, multi]);
 
   var onItemClick = function onItemClick(item) {
     if (item.disabled) return;
 
-    if (opened.includes(item.key)) {
+    if (opened.includes(item.id)) {
       setOpened(opened.filter(function (key) {
-        return key !== item.key;
+        return key !== item.id;
       }));
     } else {
-      if (props.multi) {
-        setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.key]));
+      if (multi) {
+        setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.id]));
       } else {
-        setOpened([item.key]);
+        setOpened([item.id]);
       }
     }
   };
 
   var renderItem = function renderItem(item) {
-    var isActive = opened.includes(item.key);
+    var id = item.id,
+        title = item.title,
+        header = item.header,
+        body = item.body,
+        footer = item.footer,
+        disabled = item.disabled,
+        active = item.active,
+        rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+    var isActive = opened.includes(id);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItem, {
-      id: "item_".concat(item.key),
+      id: "item_".concat(id),
       className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, {
-        tabIndex: !item.disabled ? 0 : undefined,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, _objectSpread(_objectSpread({
+        role: "button",
+        id: "headerFor_".concat(id),
+        tabIndex: !disabled ? 0 : undefined,
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
-          return !item.disabled && onItemClick(item);
+          return !disabled && onItemClick(item);
         },
-        onKeyPress: function onKeyPress(event) {
+        onKeyDown: function onKeyDown(event) {
           return event.key === 'Enter' && onItemClick(item);
-        },
+        }
+      }, rest), {}, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderIcon, {
-          children: props.multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
+          children: multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderText, {
-          children: item.title
+          children: title
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
-        children: [item.header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
-          children: item.header
+      })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
+        "aria-describedby": "headerFor_".concat(id),
+        children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
+          children: header
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentBody, {
-          children: item.body
-        }), item.footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentFooter, {
-          children: item.footer
+          children: body
+        }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentFooter, {
+          children: footer
         })]
       })]
-    }, item.key);
+    }, id);
   };
 
+  var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionWrapper, {
-    className: ''.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium)),
-    children: props.items.map(function (item) {
+    className: cls,
+    children: items.map(function (item) {
       return renderItem(item);
     })
   });
@@ -157,7 +187,7 @@ var ContentAccordion = function ContentAccordion(props) {
 exports.ContentAccordion = ContentAccordion;
 ContentAccordion.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired,
     title: _propTypes.default.string.isRequired,
     header: _propTypes.default.string,
     body: _propTypes.default.any.isRequired,

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"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","ComponentTextStyle","Regular","ParagraphTextStyle","Bold","black","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","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        ${ParagraphSStyling(ParagraphTextStyle.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        ${ParagraphMStyling(ParagraphTextStyle.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        ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter((item) => item.active).map((item) => item.key));\n    } else {\n      let active = props.items.find((item) => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter((key) => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          tabIndex={!item.disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !item.disabled && onItemClick(item)}\n          onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent>\n          {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n          {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
+{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"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","ComponentTextStyle","Regular","Bold","black","ParagraphTextStyle","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"],"mappings":"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","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          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 aria-describedby={`headerFor_${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"],"file":"ContentAccordion.cjs"}

package/dist/Accordion/ContentAccordion.d.ts

@@ -9,8 +9,8 @@ export declare const ContentAccordionItemContentBody: import("styled-components"
 export declare const ContentAccordionItemContentFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentAccordionItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentAccordionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface ContentAccordionItem {
-    key: string;
+export interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
+    id: string;
     title: string;
     header?: string;
     body: any;
@@ -18,7 +18,7 @@ export interface ContentAccordionItem {
     disabled?: boolean;
     active?: boolean;
 }
-export interface ContentAccordionProps {
+export interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     items: ContentAccordionItem[];
     multi?: boolean;
     size?: Size.Small | Size.Medium | Size.Large;

package/dist/Accordion/ContentAccordion.js

@@ -1,10 +1,18 @@
+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"],
+    _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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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';
@@ -23,9 +31,15 @@ export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_
 export var ContentAccordionItemContentBody = styled.div(_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        ", "\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, ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
-export var ContentAccordion = function ContentAccordion(props) {
-  var _props$size;
+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);
 
   var _React$useState = React.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -33,82 +47,96 @@ export var ContentAccordion = function ContentAccordion(props) {
       setOpened = _React$useState2[1];
 
   React.useEffect(function () {
-    if (props.multi) {
-      setOpened(props.items.filter(function (item) {
+    if (multi) {
+      setOpened(items.filter(function (item) {
         return item.active;
       }).map(function (item) {
-        return item.key;
+        return item.id;
       }));
     } else {
-      var _props$items$find;
+      var _items$find;
 
-      var active = (_props$items$find = props.items.find(function (item) {
+      var active = (_items$find = items.find(function (item) {
         return !!item.active;
-      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
+      })) === null || _items$find === void 0 ? void 0 : _items$find.id;
 
       if (active) {
         setOpened([active]);
       }
     }
-  }, [props.items, props.multi]);
+  }, [items, multi]);
 
   var onItemClick = function onItemClick(item) {
     if (item.disabled) return;
 
-    if (opened.includes(item.key)) {
+    if (opened.includes(item.id)) {
       setOpened(opened.filter(function (key) {
-        return key !== item.key;
+        return key !== item.id;
       }));
     } else {
-      if (props.multi) {
-        setOpened([].concat(_toConsumableArray(opened), [item.key]));
+      if (multi) {
+        setOpened([].concat(_toConsumableArray(opened), [item.id]));
       } else {
-        setOpened([item.key]);
+        setOpened([item.id]);
       }
     }
   };
 
   var renderItem = function renderItem(item) {
-    var isActive = opened.includes(item.key);
+    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(item.key),
+      id: "item_".concat(id),
       className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
-      children: [/*#__PURE__*/_jsxs(ContentAccordionItemHeader, {
-        tabIndex: !item.disabled ? 0 : undefined,
+      children: [/*#__PURE__*/_jsxs(ContentAccordionItemHeader, _objectSpread(_objectSpread({
+        role: "button",
+        id: "headerFor_".concat(id),
+        tabIndex: !disabled ? 0 : undefined,
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
-          return !item.disabled && onItemClick(item);
+          return !disabled && onItemClick(item);
         },
-        onKeyPress: function onKeyPress(event) {
+        onKeyDown: function onKeyDown(event) {
           return event.key === 'Enter' && onItemClick(item);
-        },
+        }
+      }, rest), {}, {
         children: [/*#__PURE__*/_jsx(ContentAccordionItemHeaderIcon, {
-          children: props.multi ? isActive ? /*#__PURE__*/_jsx(SystemIcons.Minus, {}) : /*#__PURE__*/_jsx(SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {}) : /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {})
+          children: multi ? isActive ? /*#__PURE__*/_jsx(SystemIcons.Minus, {}) : /*#__PURE__*/_jsx(SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {}) : /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {})
         }), /*#__PURE__*/_jsx(ContentAccordionItemHeaderText, {
-          children: item.title
+          children: title
         })]
-      }), /*#__PURE__*/_jsxs(ContentAccordionItemContent, {
-        children: [item.header && /*#__PURE__*/_jsx(ContentAccordionItemContentHeader, {
-          children: item.header
+      })), /*#__PURE__*/_jsxs(ContentAccordionItemContent, {
+        "aria-describedby": "headerFor_".concat(id),
+        children: [header && /*#__PURE__*/_jsx(ContentAccordionItemContentHeader, {
+          children: header
         }), /*#__PURE__*/_jsx(ContentAccordionItemContentBody, {
-          children: item.body
-        }), item.footer && /*#__PURE__*/_jsx(ContentAccordionItemContentFooter, {
-          children: item.footer
+          children: body
+        }), footer && /*#__PURE__*/_jsx(ContentAccordionItemContentFooter, {
+          children: footer
         })]
       })]
-    }, item.key);
+    }, id);
   };
 
+  var cls = "".concat(size, " ").concat(className !== null && className !== void 0 ? className : '').trim();
   return /*#__PURE__*/_jsx(ContentAccordionWrapper, {
-    className: ''.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : Size.Medium)),
-    children: props.items.map(function (item) {
+    className: cls,
+    children: items.map(function (item) {
       return renderItem(item);
     })
   });
 };
 ContentAccordion.propTypes = {
   items: _pt.arrayOf(_pt.shape({
-    key: _pt.string.isRequired,
+    id: _pt.string.isRequired,
     title: _pt.string.isRequired,
     header: _pt.string,
     body: _pt.any.isRequired,

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"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","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","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        ${ParagraphSStyling(ParagraphTextStyle.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        ${ParagraphMStyling(ParagraphTextStyle.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        ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter((item) => item.active).map((item) => item.key));\n    } else {\n      let active = props.items.find((item) => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter((key) => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          tabIndex={!item.disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !item.disabled && onItemClick(item)}\n          onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent>\n          {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n          {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
+{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"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"],"mappings":"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","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          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 aria-describedby={`headerFor_${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"],"file":"ContentAccordion.js"}

package/dist/Accordion/styles.cjs

@@ -35,10 +35,8 @@ var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_te
 
 exports.HeaderIconContainer = HeaderIconContainer;
 
-var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
-  return props.padding || '0px 16px';
-}, function (props) {
-  return props.margin || '12px 0';
+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;

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","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","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,2sBAQ5B,+BAAkBO,2BAAmBC,OAArC,EAA8CJ,eAAOK,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdN,eAAOO,UApBO,EAqBnBP,eAAOQ,WArBY,EAsBjBC,oBAAUC,KAtBO,EA0BnBV,eAAOW,WA1BY,EA2BdX,eAAOY,WA3BO,EA4BjBH,oBAAUI,MA5BO,EAgCnBb,eAAOc,WAhCY,EAoCdd,eAAOe,KApCO,EAqCnBf,eAAOgB,WArCY,EAyCjBhB,eAAOgB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,gJACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACqB,OAAN,IAAiB,UAA5B;AAAA,CADiB,EAElB,UAACrB,KAAD;AAAA,SAAWA,KAAK,CAACsB,MAAN,IAAgB,QAA3B;AAAA,CAFkB,EAGdpB,eAAOe,KAHO,CAAvB","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  svg: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; margin?: string }>`\n  padding: ${(props) => props.padding || '0px 16px'};\n  margin: ${(props) => props.margin || '12px 0'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}
+{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","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"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,2sBAQ5B,+BAAkBO,2BAAmBC,OAArC,EAA8CJ,eAAOK,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdN,eAAOO,UApBO,EAqBnBP,eAAOQ,WArBY,EAsBjBC,oBAAUC,KAtBO,EA0BnBV,eAAOW,WA1BY,EA2BdX,eAAOY,WA3BO,EA4BjBH,oBAAUI,MA5BO,EAgCnBb,eAAOc,WAhCY,EAoCdd,eAAOe,KApCO,EAqCnBf,eAAOgB,WArCY,EAyCjBhB,eAAOgB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,+HACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACqB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdnB,eAAOe,KAFO,CAAvB","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  svg: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"],"file":"styles.cjs"}

package/dist/Accordion/styles.d.ts

@@ -6,5 +6,4 @@ export declare const ItemHeaderContainer: import("styled-components").StyledComp
 export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
     padding?: string | undefined;
-    margin?: string | undefined;
 }, never>;

package/dist/Accordion/styles.js

@@ -11,9 +11,7 @@ export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObj
 });
 export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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  svg: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"])), ComponentMStyling(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 HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
-export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
-  return props.padding || '0px 16px';
-}, function (props) {
-  return props.margin || '12px 0';
+export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
+  return props.padding || '12px 16px';
 }, COLORS.white);
 //# sourceMappingURL=styles.js.map

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/styles.ts"],"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","margin"],"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;AAAA,SAAYA,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,kIACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACiB,OAAN,IAAiB,UAA5B;AAAA,CADiB,EAElB,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACkB,MAAN,IAAgB,QAA3B;AAAA,CAFkB,EAGd1B,MAAM,CAACqB,KAHO,CAAvB","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  svg: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; margin?: string }>`\n  padding: ${(props) => props.padding || '0px 16px'};\n  margin: ${(props) => props.margin || '12px 0'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
+{"version":3,"sources":["../../src/Accordion/styles.ts"],"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"],"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;AAAA,SAAYA,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;AAAA,SAAWA,KAAK,CAACiB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdzB,MAAM,CAACqB,KAFO,CAAvB","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  svg: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"],"file":"styles.js"}