@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/Accordion/ContentAccordion.cjs

@@ -23,7 +23,17 @@ var _excluded = ["items", "multi", "size", "className", "onItemStateChanged"],
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ContentAccordionItemHeader = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _styles.Z_INDEXES.hover, _styles.focusStyles, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.Z_INDEXES.active);
+var ContentAccordionItemHeader = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, _styles.Z_INDEXES.hover, _styles.focusStyles, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, _styles.Z_INDEXES.active);
 exports.ContentAccordionItemHeader = ContentAccordionItemHeader;
 var ContentAccordionItemHeaderIcon = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
 exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
@@ -37,9 +47,21 @@ var ContentAccordionItemContentBody = _styledComponents["default"].p(_templateOb
 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);
+var ContentAccordionItem = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, ContentAccordionItemContent, ContentAccordionItemHeader, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+});
 exports.ContentAccordionItem = ContentAccordionItem;
-var ContentAccordionWrapper = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody);
+var ContentAccordionWrapper = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, ContentAccordionItemHeader, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
+}, ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
+}, ContentAccordionItemContentBody, ContentAccordionItemHeader, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
+  return (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
+}, ContentAccordionItemContentBody);
 exports.ContentAccordionWrapper = ContentAccordionWrapper;
 /**
  * ContentAccordion component that is capable of displaying multiple collapsable sections with content.

package/dist/Accordion/ContentAccordion.cjs.map

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

package/dist/Accordion/ContentAccordion.js

@@ -17,15 +17,37 @@ import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, Compon
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active);
+export var ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, Z_INDEXES.hover, focusStyles, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, Z_INDEXES.active);
 export var ContentAccordionItemHeaderIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
 export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 export var ContentAccordionItemContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n"])));
 export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
 export var ContentAccordionItemContentBody = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
 export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
-export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody);
+export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, ContentAccordionItemContent, ContentAccordionItemHeader, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
+export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        //TODO\n      }\n    }\n  }\n"])), ContentAccordionItem, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
+}, ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
+}, ContentAccordionItemContentBody, ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
+}, ContentAccordionItemContentBody);
 /**
  * ContentAccordion component that is capable of displaying multiple collapsable sections with content.
  */

package/dist/Accordion/ContentAccordion.js.map

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

package/dist/Accordion/styles.cjs

@@ -12,13 +12,39 @@ var _zIndexes = require("../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 AccordionItemHeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_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);
+var AccordionItemHeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+}, _styles.focusStyles, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, _zIndexes.Z_INDEXES.hover, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, _zIndexes.Z_INDEXES.active, function (props) {
+  return _styles.COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+});
 exports.AccordionItemHeaderContainer = AccordionItemHeaderContainer;
-var AccordionItemContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, _styles.COLORS.neutral_100);
+var AccordionItemContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+});
 exports.AccordionItemContainer = AccordionItemContainer;
 var AccordionItemBodyContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) {
   return props.padding || '8px 16px';
-}, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
   return props.padding || '12px 24px';
 }, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
   return props.padding || '14px 32px';

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_zIndexes","_templateObject","_templateObject2","_templateObject3","_templateObject4","AccordionMenuWrapper","styled","div","_taggedTemplateLiteral2","exports","AccordionItemHeaderContainer","ComponentSStyling","ComponentTextStyle","Regular","COLORS","neutral_600","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","AccordionItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${COLORS.primary_800};\r\n    background: ${COLORS.primary_100};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${COLORS.white}!important;\r\n    color: ${COLORS.neutral_300};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${COLORS.neutral_300}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${COLORS.white};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAQA,IAAAE,SAAA,GAAAF,OAAA;AAAgD,IAAAG,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAEzC,IAAMC,oBAAoB,GAAGC,4BAAM,CAACC,GAAG,CAAAN,eAAA,KAAAA,eAAA,OAAAO,uBAAA,mHAK7C;AAACC,OAAA,CAAAJ,oBAAA,GAAAA,oBAAA;AAIK,IAAMK,4BAA4B,GAAGJ,4BAAM,CAACC,GAAG,CAAAL,gBAAA,KAAAA,gBAAA,OAAAM,uBAAA,y/BASlD,IAAAG,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAe/D,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAWjE,IAAAE,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAUjEG,mBAAW,EAICJ,cAAM,CAACK,UAAU,EACtBL,cAAM,CAACM,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBR,cAAM,CAACS,WAAW,EACbT,cAAM,CAACU,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBX,cAAM,CAACY,WAAW,EAIbZ,cAAM,CAACa,KAAK,EACjBb,cAAM,CAACc,WAAW,EAIhBd,cAAM,CAACc,WAAW,CAGhC;AAACnB,OAAA,CAAAC,4BAAA,GAAAA,4BAAA;AAEK,IAAMmB,sBAAsB,GAAGvB,4BAAM,CAACC,GAAG,CAAAJ,gBAAA,KAAAA,gBAAA,OAAAK,uBAAA,sMAMzBE,4BAA4B,EACpBI,cAAM,CAACgB,WAAW,CAEhD;AAACrB,OAAA,CAAAoB,sBAAA,GAAAA,sBAAA;AAEK,IAAME,0BAA0B,GAAGzB,4BAAM,CAACC,GAAG,CAAAH,gBAAA,KAAAA,gBAAA,OAAAI,uBAAA,uLACvC,UAACwB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,UAAU;AAAA,GACnCnB,cAAM,CAACa,KAAK,EAExB,IAAAhB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD,IAAAjB,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD,IAAAhB,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAGxD;AAACJ,OAAA,CAAAsB,0BAAA,GAAAA,0BAAA","ignoreList":[]}
+{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_zIndexes","_templateObject","_templateObject2","_templateObject3","_templateObject4","AccordionMenuWrapper","styled","div","_taggedTemplateLiteral2","exports","AccordionItemHeaderContainer","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","Z_INDEXES","hover","active","AccordionItemContainer","AccordionItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.getColor('white', props.theme)}!important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Accordion/styles.js

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

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","_templateObject","_taggedTemplateLiteral","AccordionItemHeaderContainer","_templateObject2","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","_templateObject3","neutral_100","AccordionItemBodyContainer","_templateObject4","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${COLORS.primary_800};\r\n    background: ${COLORS.primary_100};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${COLORS.white}!important;\r\n    color: ${COLORS.neutral_300};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${COLORS.neutral_300}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${COLORS.white};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACN,WAAW;AAClB,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,uGAK7C;AAID,OAAO,IAAMC,4BAA4B,GAAGZ,MAAM,CAACS,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,6+BASlDP,iBAAiB,CAACC,kBAAkB,CAACS,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,EAe/DZ,iBAAiB,CAACE,kBAAkB,CAACS,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,EAWjEb,iBAAiB,CAACG,kBAAkB,CAACS,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,EAUjET,WAAW,EAICL,MAAM,CAACe,UAAU,EACtBf,MAAM,CAACgB,WAAW,EAChBV,SAAS,CAACW,KAAK,EAIjBjB,MAAM,CAACkB,WAAW,EACblB,MAAM,CAACmB,WAAW,EACrBb,SAAS,CAACc,MAAM,EAIlBpB,MAAM,CAACqB,WAAW,EAIbrB,MAAM,CAACsB,KAAK,EACjBtB,MAAM,CAACuB,WAAW,EAIhBvB,MAAM,CAACuB,WAAW,CAGhC;AAED,OAAO,IAAMC,sBAAsB,GAAGzB,MAAM,CAACS,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAf,sBAAA,0LAMzBC,4BAA4B,EACpBX,MAAM,CAAC0B,WAAW,CAEhD;AAED,OAAO,IAAMC,0BAA0B,GAAG5B,MAAM,CAACS,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,2KACvC,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,UAAU;AAAA,GACnC9B,MAAM,CAACsB,KAAK,EAExBnB,iBAAiB,CAACC,kBAAkB,CAACS,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD5B,iBAAiB,CAACE,kBAAkB,CAACS,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD7B,iBAAiB,CAACG,kBAAkB,CAACS,OAAO,EAAE,IAAI,CAAC,CAGxD","ignoreList":[]}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","_templateObject","_taggedTemplateLiteral","AccordionItemHeaderContainer","_templateObject2","props","Regular","getColor","theme","hover","active","AccordionItemContainer","_templateObject3","AccordionItemBodyContainer","_templateObject4","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.getColor('white', props.theme)}!important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACN,WAAW;AAClB,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,uGAK7C;AAID,OAAO,IAAMC,4BAA4B,GAAGZ,MAAM,CAACS,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,6+BASlD,UAAAG,KAAK;EAAA,OAAIV,iBAAiB,CAACC,kBAAkB,CAACU,OAAO,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,GAejG,UAAAH,KAAK;EAAA,OAAIX,iBAAiB,CAACE,kBAAkB,CAACU,OAAO,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,GAWnG,UAAAH,KAAK;EAAA,OAAIZ,iBAAiB,CAACG,kBAAkB,CAACU,OAAO,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,GAUnGX,WAAW,EAIC,UAAAQ,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACxD,UAAAH,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAClDV,SAAS,CAACW,KAAK,EAIjB,UAAAJ,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAC/C,UAAAH,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACvDV,SAAS,CAACY,MAAM,EAIlB,UAAAL,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAI/C,UAAAH,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACnD,UAAAH,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAIlD,UAAAH,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAGlE;AAED,OAAO,IAAMG,sBAAsB,GAAGpB,MAAM,CAACS,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA,0LAMzBC,4BAA4B,EACpB,UAAAE,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAElF;AAED,OAAO,IAAMK,0BAA0B,GAAGtB,MAAM,CAACS,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,2KACvC,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACU,OAAO,IAAI,UAAU;AAAA,GACnC,UAAAV,KAAK;EAAA,OAAIb,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAE1Db,iBAAiB,CAACC,kBAAkB,CAACU,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACU,OAAO,IAAI,WAAW;AAAA,GAChDrB,iBAAiB,CAACE,kBAAkB,CAACU,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACU,OAAO,IAAI,WAAW;AAAA,GAChDtB,iBAAiB,CAACG,kBAAkB,CAACU,OAAO,EAAE,IAAI,CAAC,CAGxD","ignoreList":[]}

package/dist/Banners/Banner.cjs

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _icons = require("../icons");
 var _Button = require("../Button");
@@ -30,8 +30,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BannerContainerStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
-  return props.$type ? props.$type : _styles.COLORS.correct_100;
-}, _styles.COLORS.black, function (props) {
+  return props.$type ? props.$type : _styles.COLORS.getColor('correct_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('black', props.theme);
+}, function (props) {
   return props.bottom ? 'auto' : '0';
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _HyperLink.StyledLink, function (props) {
   return props.link;
@@ -39,14 +41,16 @@ var BannerContainerStyles = _styledComponents["default"].div(_templateObject ||
   return props.linkVisited;
 }, function (props) {
   return props.linkFocused;
-}, _styles.COLORS.white);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.BannerContainerStyles = BannerContainerStyles;
 var BannerCenterStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 exports.BannerCenterStyles = BannerCenterStyles;
 var BannerCloseButtonWrapperStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0 0 0 auto;\n"])));
 exports.BannerCloseButtonWrapperStyles = BannerCloseButtonWrapperStyles;
 var BannerCloseButtonContainerStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: contents;\n  ", ";\n"])), function (props) {
-  return props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null;
+  return props.$type ? (0, _styles2.getButtonStyle)(props.$type, props.theme) : null;
 });
 exports.BannerCloseButtonContainerStyles = BannerCloseButtonContainerStyles;
 var BannerContentWrapperStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
@@ -68,6 +72,7 @@ var Banner = function Banner(_ref) {
     fullWidth = _ref.fullWidth,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var theme = (0, _styledComponents.useTheme)();
   var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     width = _React$useState2[0],
@@ -82,42 +87,42 @@ var Banner = function Banner(_ref) {
     };
   }, []);
   var bannerParams = {
-    typeColor: _styles.COLORS.primary_100,
-    accentColor: _styles.COLORS.primary_700,
-    closeIconColor: _styles.COLORS.primary_500,
+    typeColor: _styles.COLORS.getColor('primary_100', theme),
+    accentColor: _styles.COLORS.getColor('primary_700', theme),
+    closeIconColor: _styles.COLORS.getColor('primary_500', theme),
     icon: _icons.SystemIcons.Tip,
     containerType: type,
-    focusBgColor: _styles.COLORS.primary_200,
-    linkVisited: _styles.COLORS.primary_600,
-    linkFocused: _styles.COLORS.primary_800
+    focusBgColor: _styles.COLORS.getColor('primary_200', theme),
+    linkVisited: _styles.COLORS.getColor('primary_600', theme),
+    linkFocused: _styles.COLORS.getColor('primary_800', theme)
   };
   switch (type) {
     case 'warning':
-      bannerParams.typeColor = _styles.COLORS.warning_100;
-      bannerParams.accentColor = _styles.COLORS.warning_700;
-      bannerParams.focusBgColor = _styles.COLORS.warning_200;
+      bannerParams.typeColor = _styles.COLORS.getColor('warning_100', theme);
+      bannerParams.accentColor = _styles.COLORS.getColor('warning_700', theme);
+      bannerParams.focusBgColor = _styles.COLORS.getColor('warning_200', theme);
       bannerParams.icon = _icons.SystemIcons.Help;
-      bannerParams.closeIconColor = _styles.COLORS.warning_500;
-      bannerParams.linkVisited = _styles.COLORS.warning_800;
-      bannerParams.linkFocused = _styles.COLORS.warning_800;
+      bannerParams.closeIconColor = _styles.COLORS.getColor('warning_500', theme);
+      bannerParams.linkVisited = _styles.COLORS.getColor('warning_800', theme);
+      bannerParams.linkFocused = _styles.COLORS.getColor('warning_800', theme);
       break;
     case 'critical':
-      bannerParams.typeColor = _styles.COLORS.critical_100;
-      bannerParams.accentColor = _styles.COLORS.critical_700;
-      bannerParams.focusBgColor = _styles.COLORS.critical_200;
+      bannerParams.typeColor = _styles.COLORS.getColor('critical_100', theme);
+      bannerParams.accentColor = _styles.COLORS.getColor('critical_700', theme);
+      bannerParams.focusBgColor = _styles.COLORS.getColor('critical_200', theme);
       bannerParams.icon = _icons.SystemIcons.TechnicalWarning;
-      bannerParams.closeIconColor = _styles.COLORS.critical_500;
-      bannerParams.linkVisited = _styles.COLORS.critical_800;
-      bannerParams.linkFocused = _styles.COLORS.critical_800;
+      bannerParams.closeIconColor = _styles.COLORS.getColor('critical_500', theme);
+      bannerParams.linkVisited = _styles.COLORS.getColor('critical_800', theme);
+      bannerParams.linkFocused = _styles.COLORS.getColor('critical_800', theme);
       break;
     case 'positive':
-      bannerParams.typeColor = _styles.COLORS.correct_100;
-      bannerParams.accentColor = _styles.COLORS.correct_700;
-      bannerParams.focusBgColor = _styles.COLORS.correct_200;
+      bannerParams.typeColor = _styles.COLORS.getColor('correct_100', theme);
+      bannerParams.accentColor = _styles.COLORS.getColor('correct_700', theme);
+      bannerParams.focusBgColor = _styles.COLORS.getColor('correct_200', theme);
       bannerParams.icon = _icons.SystemIcons.ThumbsUp;
-      bannerParams.closeIconColor = _styles.COLORS.correct_500;
-      bannerParams.linkVisited = _styles.COLORS.correct_800;
-      bannerParams.linkFocused = _styles.COLORS.correct_800;
+      bannerParams.closeIconColor = _styles.COLORS.getColor('correct_500', theme);
+      bannerParams.linkVisited = _styles.COLORS.getColor('correct_800', theme);
+      bannerParams.linkFocused = _styles.COLORS.getColor('correct_800', theme);
       break;
   }
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');