@laerdal/life-react-components 2.2.1-dev.9 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/dist/Accordion/AccordionItem.cjs +17 -8
  2. package/dist/Accordion/AccordionItem.cjs.map +1 -1
  3. package/dist/Accordion/AccordionItem.d.ts +0 -2
  4. package/dist/Accordion/AccordionItem.js +18 -9
  5. package/dist/Accordion/AccordionItem.js.map +1 -1
  6. package/dist/Accordion/AccordionMenu.cjs +2 -6
  7. package/dist/Accordion/AccordionMenu.cjs.map +1 -1
  8. package/dist/Accordion/AccordionMenu.d.ts +0 -3
  9. package/dist/Accordion/AccordionMenu.js +2 -6
  10. package/dist/Accordion/AccordionMenu.js.map +1 -1
  11. package/dist/Accordion/styles.cjs +11 -7
  12. package/dist/Accordion/styles.cjs.map +1 -1
  13. package/dist/Accordion/styles.d.ts +4 -1
  14. package/dist/Accordion/styles.js +9 -6
  15. package/dist/Accordion/styles.js.map +1 -1
  16. package/dist/AuthPage/AuthPage.js +1 -1
  17. package/dist/Banners/Banner.cjs.map +1 -1
  18. package/dist/Banners/Banner.js.map +1 -1
  19. package/dist/Button/Button.cjs +1 -1
  20. package/dist/Button/Button.cjs.map +1 -1
  21. package/dist/Button/Button.js +2 -2
  22. package/dist/Button/Button.js.map +1 -1
  23. package/dist/Button/Iconbutton.cjs.map +1 -1
  24. package/dist/Button/Iconbutton.d.ts +1 -1
  25. package/dist/Button/Iconbutton.js.map +1 -1
  26. package/dist/Card/HorizontalCard/HorizontalCard.cjs +9 -12
  27. package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -1
  28. package/dist/Card/HorizontalCard/HorizontalCard.d.ts +0 -2
  29. package/dist/Card/HorizontalCard/HorizontalCard.js +8 -9
  30. package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -1
  31. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs +9 -13
  32. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +1 -1
  33. package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +0 -4
  34. package/dist/Card/HorizontalCard/HorizontalCardBody.js +8 -8
  35. package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +1 -1
  36. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +5 -7
  37. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
  38. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +0 -2
  39. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +5 -5
  40. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
  41. package/dist/Card/HorizontalCard/index.cjs +12 -33
  42. package/dist/Card/HorizontalCard/index.cjs.map +1 -1
  43. package/dist/Card/HorizontalCard/index.d.ts +1 -3
  44. package/dist/Card/HorizontalCard/index.js +1 -3
  45. package/dist/Card/HorizontalCard/index.js.map +1 -1
  46. package/dist/Card/HorizontalCard/types.cjs.map +1 -1
  47. package/dist/Card/HorizontalCard/types.d.ts +1 -1
  48. package/dist/Card/HorizontalCard/types.js.map +1 -1
  49. package/dist/ChipsInput/ChipInputField.cjs +1 -1
  50. package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
  51. package/dist/ChipsInput/ChipInputField.js +1 -1
  52. package/dist/ChipsInput/ChipInputField.js.map +1 -1
  53. package/dist/Dropdown/BasicDropdown.cjs +21 -6
  54. package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
  55. package/dist/Dropdown/BasicDropdown.d.ts +2 -0
  56. package/dist/Dropdown/BasicDropdown.js +22 -7
  57. package/dist/Dropdown/BasicDropdown.js.map +1 -1
  58. package/dist/Dropdown/CommonStyling.cjs +7 -4
  59. package/dist/Dropdown/CommonStyling.cjs.map +1 -1
  60. package/dist/Dropdown/CommonStyling.d.ts +3 -1
  61. package/dist/Dropdown/CommonStyling.js +7 -4
  62. package/dist/Dropdown/CommonStyling.js.map +1 -1
  63. package/dist/Dropdown/DropdownContent.cjs +1 -1
  64. package/dist/Dropdown/DropdownContent.js +1 -1
  65. package/dist/Dropdown/DropdownFilter.cjs +16 -3
  66. package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
  67. package/dist/Dropdown/DropdownFilter.d.ts +1 -0
  68. package/dist/Dropdown/DropdownFilter.js +16 -3
  69. package/dist/Dropdown/DropdownFilter.js.map +1 -1
  70. package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
  71. package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
  72. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +3 -1
  73. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
  74. package/dist/GlobalNavigationBar/GlobalNavigationBar.js +4 -2
  75. package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
  76. package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
  77. package/dist/GlobalNavigationBar/Logo.js.map +1 -1
  78. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs +7 -2
  79. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
  80. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts +4 -0
  81. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js +6 -5
  82. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
  83. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +178 -56
  84. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
  85. package/dist/GlobalNavigationBar/desktop/MainMenu.d.ts +2 -2
  86. package/dist/GlobalNavigationBar/desktop/MainMenu.js +178 -56
  87. package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
  88. package/dist/GlobalNavigationBar/desktop/SubMenu.cjs +243 -0
  89. package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -0
  90. package/dist/GlobalNavigationBar/desktop/SubMenu.d.ts +18 -0
  91. package/dist/GlobalNavigationBar/desktop/SubMenu.js +233 -0
  92. package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -0
  93. package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
  94. package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
  95. package/dist/GlobalNavigationBar/types.cjs.map +1 -1
  96. package/dist/GlobalNavigationBar/types.d.ts +12 -2
  97. package/dist/GlobalNavigationBar/types.js.map +1 -1
  98. package/dist/GlobalNavigationBar/utils.cjs +17 -0
  99. package/dist/GlobalNavigationBar/utils.cjs.map +1 -0
  100. package/dist/GlobalNavigationBar/utils.d.ts +2 -0
  101. package/dist/GlobalNavigationBar/utils.js +10 -0
  102. package/dist/GlobalNavigationBar/utils.js.map +1 -0
  103. package/dist/Image/ImageWithFallbacks.js +1 -1
  104. package/dist/InputFields/DatepickerField.cjs +54 -33
  105. package/dist/InputFields/DatepickerField.cjs.map +1 -1
  106. package/dist/InputFields/DatepickerField.d.ts +1 -0
  107. package/dist/InputFields/DatepickerField.js +55 -34
  108. package/dist/InputFields/DatepickerField.js.map +1 -1
  109. package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
  110. package/dist/InputFields/DatepickerFieldHeader.js +1 -1
  111. package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
  112. package/dist/InputFields/Label.cjs +12 -8
  113. package/dist/InputFields/Label.cjs.map +1 -1
  114. package/dist/InputFields/Label.js +12 -8
  115. package/dist/InputFields/Label.js.map +1 -1
  116. package/dist/InputFields/NumberField.cjs +33 -14
  117. package/dist/InputFields/NumberField.cjs.map +1 -1
  118. package/dist/InputFields/NumberField.d.ts +1 -0
  119. package/dist/InputFields/NumberField.js +36 -17
  120. package/dist/InputFields/NumberField.js.map +1 -1
  121. package/dist/InputFields/PasswordField.cjs +50 -44
  122. package/dist/InputFields/PasswordField.cjs.map +1 -1
  123. package/dist/InputFields/PasswordField.js +51 -45
  124. package/dist/InputFields/PasswordField.js.map +1 -1
  125. package/dist/InputFields/SearchBar.cjs +2 -1
  126. package/dist/InputFields/SearchBar.cjs.map +1 -1
  127. package/dist/InputFields/SearchBar.js +3 -2
  128. package/dist/InputFields/SearchBar.js.map +1 -1
  129. package/dist/InputFields/TextField.cjs +14 -2
  130. package/dist/InputFields/TextField.cjs.map +1 -1
  131. package/dist/InputFields/TextField.d.ts +1 -0
  132. package/dist/InputFields/TextField.js +15 -3
  133. package/dist/InputFields/TextField.js.map +1 -1
  134. package/dist/InputFields/Textarea.cjs +3 -8
  135. package/dist/InputFields/Textarea.cjs.map +1 -1
  136. package/dist/InputFields/Textarea.d.ts +7 -3
  137. package/dist/InputFields/Textarea.js +6 -12
  138. package/dist/InputFields/Textarea.js.map +1 -1
  139. package/dist/InputFields/components/SearchField.cjs +1 -1
  140. package/dist/InputFields/components/SearchField.cjs.map +1 -1
  141. package/dist/InputFields/components/SearchField.js +1 -1
  142. package/dist/InputFields/components/SearchField.js.map +1 -1
  143. package/dist/InputFields/styling.cjs +11 -11
  144. package/dist/InputFields/styling.cjs.map +1 -1
  145. package/dist/InputFields/styling.d.ts +2 -3
  146. package/dist/InputFields/styling.js +11 -10
  147. package/dist/InputFields/styling.js.map +1 -1
  148. package/dist/InputFields/types.cjs.map +1 -1
  149. package/dist/InputFields/types.d.ts +8 -4
  150. package/dist/InputFields/types.js.map +1 -1
  151. package/dist/LinearProgress/LinearProgress.js +1 -1
  152. package/dist/NavItem/NavItem.cjs +2 -1
  153. package/dist/NavItem/NavItem.cjs.map +1 -1
  154. package/dist/NavItem/NavItem.d.ts +1 -0
  155. package/dist/NavItem/NavItem.js +1 -1
  156. package/dist/NavItem/NavItem.js.map +1 -1
  157. package/dist/NavItem/NestedNavItem.cjs +38 -0
  158. package/dist/NavItem/NestedNavItem.cjs.map +1 -0
  159. package/dist/NavItem/NestedNavItem.d.ts +13 -0
  160. package/dist/NavItem/NestedNavItem.js +28 -0
  161. package/dist/NavItem/NestedNavItem.js.map +1 -0
  162. package/dist/Paginator/Paginator.cjs.map +1 -1
  163. package/dist/Paginator/Paginator.js.map +1 -1
  164. package/dist/Table/Table.cjs +1 -2
  165. package/dist/Table/Table.cjs.map +1 -1
  166. package/dist/Table/Table.js +1 -2
  167. package/dist/Table/Table.js.map +1 -1
  168. package/dist/Table/TableFooter.cjs.map +1 -1
  169. package/dist/Table/TableFooter.js +1 -1
  170. package/dist/Table/TableFooter.js.map +1 -1
  171. package/dist/Table/TableStyles.cjs +4 -4
  172. package/dist/Table/TableStyles.cjs.map +1 -1
  173. package/dist/Table/TableStyles.js +4 -4
  174. package/dist/Table/TableStyles.js.map +1 -1
  175. package/dist/Table/TableTypes.cjs.map +1 -1
  176. package/dist/Table/TableTypes.d.ts +0 -1
  177. package/dist/Table/TableTypes.js.map +1 -1
  178. package/dist/Tabs/HorizontalTabs.cjs +12 -10
  179. package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
  180. package/dist/Tabs/HorizontalTabs.d.ts +1 -2
  181. package/dist/Tabs/HorizontalTabs.js +14 -13
  182. package/dist/Tabs/HorizontalTabs.js.map +1 -1
  183. package/dist/Tabs/TabLink.cjs +41 -17
  184. package/dist/Tabs/TabLink.cjs.map +1 -1
  185. package/dist/Tabs/TabLink.d.ts +14 -10
  186. package/dist/Tabs/TabLink.js +41 -17
  187. package/dist/Tabs/TabLink.js.map +1 -1
  188. package/dist/Tabs/VerticalTabs.cjs +2 -0
  189. package/dist/Tabs/VerticalTabs.cjs.map +1 -1
  190. package/dist/Tabs/VerticalTabs.d.ts +1 -0
  191. package/dist/Tabs/VerticalTabs.js +2 -0
  192. package/dist/Tabs/VerticalTabs.js.map +1 -1
  193. package/dist/Toggles/ToggleSwitch.cjs +1 -11
  194. package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
  195. package/dist/Toggles/ToggleSwitch.js +2 -12
  196. package/dist/Toggles/ToggleSwitch.js.map +1 -1
  197. package/dist/Toggles/TogglerStyles.cjs +1 -1
  198. package/dist/Toggles/TogglerStyles.cjs.map +1 -1
  199. package/dist/Toggles/TogglerStyles.js +1 -1
  200. package/dist/Toggles/TogglerStyles.js.map +1 -1
  201. package/dist/Tooltips/TooltipOverflow.cjs +112 -0
  202. package/dist/Tooltips/TooltipOverflow.cjs.map +1 -0
  203. package/dist/Tooltips/TooltipOverflow.d.ts +10 -0
  204. package/dist/Tooltips/TooltipOverflow.js +102 -0
  205. package/dist/Tooltips/TooltipOverflow.js.map +1 -0
  206. package/dist/Tooltips/TooltipStyles.cjs +8 -5
  207. package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
  208. package/dist/Tooltips/TooltipStyles.d.ts +3 -1
  209. package/dist/Tooltips/TooltipStyles.js +8 -5
  210. package/dist/Tooltips/TooltipStyles.js.map +1 -1
  211. package/dist/Tooltips/TooltipWrapper.cjs +2 -1
  212. package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
  213. package/dist/Tooltips/TooltipWrapper.js +2 -1
  214. package/dist/Tooltips/TooltipWrapper.js.map +1 -1
  215. package/dist/assets/index.cjs.map +1 -1
  216. package/dist/assets/index.js.map +1 -1
  217. package/dist/common/ActionWithin.cjs +1 -1
  218. package/dist/common/ActionWithin.js +1 -1
  219. package/dist/common/FocusVisible.cjs +1 -1
  220. package/dist/common/FocusVisible.js +1 -1
  221. package/dist/icons/index.cjs +1 -1
  222. package/dist/icons/index.cjs.map +1 -1
  223. package/dist/icons/index.js +1 -1
  224. package/dist/icons/index.js.map +1 -1
  225. package/dist/icons/systemicons/SystemIcons.cjs.map +1 -1
  226. package/dist/icons/systemicons/SystemIcons.js.map +1 -1
  227. package/package.json +2 -1
@@ -14,7 +14,7 @@ var _icons = require("../icons");
14
14
  var _styles = require("./styles");
15
15
  var _common = require("../common");
16
16
  var _jsxRuntime = require("react/jsx-runtime");
17
- var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
17
+ var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className"];
18
18
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
19
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20
20
  var AccordionItem = function AccordionItem(props) {
@@ -28,12 +28,11 @@ var AccordionItem = function AccordionItem(props) {
28
28
  padding = props.padding,
29
29
  children = props.children,
30
30
  className = props.className,
31
- _props$size = props.size,
32
- size = _props$size === void 0 ? _.Size.Medium : _props$size,
33
31
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
34
- var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '') + " ".concat(size);
32
+ var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
35
33
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AccordionItemContainer, {
36
34
  id: id,
35
+ displaySeparator: !isActive && !isLast,
37
36
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, _objectSpread(_objectSpread({
38
37
  role: "button",
39
38
  "aria-expanded": isActive,
@@ -51,16 +50,26 @@ var AccordionItem = function AccordionItem(props) {
51
50
  onMouseDown: _common.defaultOnMouseDownHandler,
52
51
  className: cls
53
52
  }, rest), {}, {
54
- children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
53
+ children: [icon && /*#__PURE__*/_react.default.cloneElement(icon, {
54
+ size: '24px'
55
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
55
56
  children: title
56
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
57
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
57
58
  "aria-hidden": "true",
58
- children: [isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {})]
59
+ children: isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {
60
+ color: _.COLORS.neutral_800,
61
+ size: "20px"
62
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
63
+ color: _.COLORS.neutral_600,
64
+ size: "20px"
65
+ })
59
66
  })]
60
67
  })), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
61
68
  id: "itemContentFor_".concat(id),
62
69
  padding: padding,
63
- children: children
70
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
71
+ children: children
72
+ })
64
73
  })]
65
74
  });
66
75
  };
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Size","Medium","rest","cls","undefined","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '') + ` ${size}`;\n\n return (\n <AccordionItemContainer id={id}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {\n isActive && <SystemIcons.ChevronUp/>\n }\n {\n !isActive && <SystemIcons.ChevronDown/>\n }\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n {children}\n </ItemBodyContainer>\n )\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAoD;AAAA;AAAA;AAAA;AAUpD,IAAMA,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGC,MAAI,CAACC,MAAM;IACfC,IAAI,0CACLd,KAAK;EAET,IAAMe,GAAG,GAAG,CAACZ,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC,cAAOC,IAAI,CAAE;EAExH,oBACE,sBAAC,8BAAsB;IAAC,EAAE,EAAEV,EAAG;IAAA,wBAC7B,sBAAC,2BAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeE,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGU,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACV,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACgB,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEhB,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEkB,iCAA0B;MACvC,SAAS,EAAEJ;IAAI,GACXD,IAAI;MAAA,WACPT,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,qBAAC,yBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AAAA,eA8DMT,aAAa;AAAA"}
1
+ {"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n <ComponentS>{children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAsD;AAAA;AAAA;AAAA;AAStD,IAAMA,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IAAQC,EAAE,GAA+FD,KAAK,CAAtGC,EAAE;IAAEC,QAAQ,GAAqFF,KAAK,CAAlGE,QAAQ;IAAEC,QAAQ,GAA2EH,KAAK,CAAxFG,QAAQ;IAAEC,KAAK,GAAoEJ,KAAK,CAA9EI,KAAK;IAAEC,IAAI,GAA8DL,KAAK,CAAvEK,IAAI;IAAEC,QAAQ,GAAoDN,KAAK,CAAjEM,QAAQ;IAAEC,MAAM,GAA4CP,KAAK,CAAvDO,MAAM;IAAEC,OAAO,GAAmCR,KAAK,CAA/CQ,OAAO;IAAEC,QAAQ,GAAyBT,KAAK,CAAtCS,QAAQ;IAAEC,SAAS,GAAcV,KAAK,CAA5BU,SAAS;IAAKC,IAAI,0CAAKX,KAAK;EAE9G,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3G,oBACE,sBAAC,8BAAsB;IAAC,EAAE,EAAET,EAAG;IAAC,gBAAgB,EAAE,CAACE,QAAQ,IAAI,CAACI,MAAO;IAAA,wBACrE,sBAAC,2BAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeJ,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGO,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACa,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEb,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEe,iCAA0B;MACvC,SAAS,EAAEJ;IAAI,GACXD,IAAI;MAAA,WACPN,IAAI,iBAAIY,cAAK,CAACC,YAAY,CAACb,IAAI,EAAwB;QAAEc,IAAI,EAAE;MAAO,CAAC,CAAC,eACzE;QAAA,UAAOf;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,UACpBD,QAAQ,gBAAG,qBAAC,kBAAW,CAAC,SAAS;UAAC,KAAK,EAAEiB,QAAM,CAACC,WAAY;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,qBAAC,kBAAW,CAAC,WAAW;UAAC,KAAK,EAAED,QAAM,CAACE,WAAY;UAAC,IAAI,EAAC;QAAM;MAAG,EAC7I;IAAA,GACc,EACrBnB,QAAQ,iBACP,qBAAC,yBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,uBAC9D,qBAAC,YAAU;QAAA,UAAEC;MAAQ;IAAc,EAEtC;EAAA,EACsB;AAE7B,CAAC;AAAC;EA3CAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AAAA,eA0CMT,aAAa;AAAA"}
@@ -1,12 +1,10 @@
1
1
  import React from 'react';
2
- import { Size } from '..';
3
2
  import { AccordionItemProps } from './AccordionMenu';
4
3
  interface AccordionItemPropsInner extends AccordionItemProps {
5
4
  onSelect: (id: string) => void;
6
5
  isActive: boolean;
7
6
  isLast: boolean;
8
7
  padding?: string;
9
- size?: Size.Small | Size.Medium | Size.Large;
10
8
  }
11
9
  declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
12
10
  export default AccordionItem;
@@ -1,11 +1,11 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
3
  import _pt from "prop-types";
4
- var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
4
+ var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  import React from 'react';
8
- import { Size } from '..';
8
+ import { COLORS, ComponentS } from '..';
9
9
  import { SystemIcons } from '../icons';
10
10
  import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
11
11
  import { defaultOnMouseDownHandler } from '../common';
@@ -22,12 +22,11 @@ var AccordionItem = function AccordionItem(props) {
22
22
  padding = props.padding,
23
23
  children = props.children,
24
24
  className = props.className,
25
- _props$size = props.size,
26
- size = _props$size === void 0 ? Size.Medium : _props$size,
27
25
  rest = _objectWithoutProperties(props, _excluded);
28
- var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '') + " ".concat(size);
26
+ var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
29
27
  return /*#__PURE__*/_jsxs(AccordionItemContainer, {
30
28
  id: id,
29
+ displaySeparator: !isActive && !isLast,
31
30
  children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, _objectSpread(_objectSpread({
32
31
  role: "button",
33
32
  "aria-expanded": isActive,
@@ -45,16 +44,26 @@ var AccordionItem = function AccordionItem(props) {
45
44
  onMouseDown: defaultOnMouseDownHandler,
46
45
  className: cls
47
46
  }, rest), {}, {
48
- children: [icon, /*#__PURE__*/_jsx("span", {
47
+ children: [icon && /*#__PURE__*/React.cloneElement(icon, {
48
+ size: '24px'
49
+ }), /*#__PURE__*/_jsx("span", {
49
50
  children: title
50
- }), /*#__PURE__*/_jsxs("div", {
51
+ }), /*#__PURE__*/_jsx("div", {
51
52
  "aria-hidden": "true",
52
- children: [isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {})]
53
+ children: isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
54
+ color: COLORS.neutral_800,
55
+ size: "20px"
56
+ }) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
57
+ color: COLORS.neutral_600,
58
+ size: "20px"
59
+ })
53
60
  })]
54
61
  })), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
55
62
  id: "itemContentFor_".concat(id),
56
63
  padding: padding,
57
- children: children
64
+ children: /*#__PURE__*/_jsx(ComponentS, {
65
+ children: children
66
+ })
58
67
  })]
59
68
  });
60
69
  };
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.js","names":["React","Size","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Medium","rest","cls","undefined","e","key"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '') + ` ${size}`;\n\n return (\n <AccordionItemContainer id={id}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {\n isActive && <SystemIcons.ChevronUp/>\n }\n {\n !isActive && <SystemIcons.ChevronDown/>\n }\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n {children}\n </ItemBodyContainer>\n )\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,QAAO,IAAI;AAC3C,SAAQC,WAAW,QAAO,UAAU;AAEpC,SAAQC,sBAAsB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAO,UAAU;AACvF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAUpD,IAAMC,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGlB,IAAI,CAACmB,MAAM;IACfC,IAAI,4BACLb,KAAK;EAET,IAAMc,GAAG,GAAG,CAACX,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC,cAAOC,IAAI,CAAE;EAExH,oBACE,MAAC,sBAAsB;IAAC,EAAE,EAAEV,EAAG;IAAA,wBAC7B,MAAC,mBAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeE,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGS,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACT,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACe,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEf,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEH,yBAA0B;MACvC,SAAS,EAAEgB;IAAI,GACXD,IAAI;MAAA,WACPR,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,KAAC,WAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,KAAC,WAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,KAAC,iBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AA8DT,eAAeT,aAAa"}
1
+ {"version":3,"file":"AccordionItem.js","names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","cloneElement","size","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n <ComponentS>{children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,UAAU,QAAQ,IAAI;AACvC,SAASC,WAAW,QAAQ,UAAU;AAEtC,SAASC,sBAAsB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,UAAU;AACzF,SAASC,yBAAyB,QAAQ,WAAW;AAAC;AAAA;AAStD,IAAMC,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IAAQC,EAAE,GAA+FD,KAAK,CAAtGC,EAAE;IAAEC,QAAQ,GAAqFF,KAAK,CAAlGE,QAAQ;IAAEC,QAAQ,GAA2EH,KAAK,CAAxFG,QAAQ;IAAEC,KAAK,GAAoEJ,KAAK,CAA9EI,KAAK;IAAEC,IAAI,GAA8DL,KAAK,CAAvEK,IAAI;IAAEC,QAAQ,GAAoDN,KAAK,CAAjEM,QAAQ;IAAEC,MAAM,GAA4CP,KAAK,CAAvDO,MAAM;IAAEC,OAAO,GAAmCR,KAAK,CAA/CQ,OAAO;IAAEC,QAAQ,GAAyBT,KAAK,CAAtCS,QAAQ;IAAEC,SAAS,GAAcV,KAAK,CAA5BU,SAAS;IAAKC,IAAI,4BAAKX,KAAK;EAE9G,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3G,oBACE,MAAC,sBAAsB;IAAC,EAAE,EAAET,EAAG;IAAC,gBAAgB,EAAE,CAACE,QAAQ,IAAI,CAACI,MAAO;IAAA,wBACrE,MAAC,mBAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeJ,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGO,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACa,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEb,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEH,yBAA0B;MACvC,SAAS,EAAEc;IAAI,GACXD,IAAI;MAAA,WACPN,IAAI,iBAAId,KAAK,CAACyB,YAAY,CAACX,IAAI,EAAwB;QAAEY,IAAI,EAAE;MAAO,CAAC,CAAC,eACzE;QAAA,UAAOb;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,UACpBD,QAAQ,gBAAG,KAAC,WAAW,CAAC,SAAS;UAAC,KAAK,EAAEX,MAAM,CAAC0B,WAAY;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,KAAC,WAAW,CAAC,WAAW;UAAC,KAAK,EAAE1B,MAAM,CAAC2B,WAAY;UAAC,IAAI,EAAC;QAAM;MAAG,EAC7I;IAAA,GACc,EACrBhB,QAAQ,iBACP,KAAC,iBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,uBAC9D,KAAC,UAAU;QAAA,UAAEC;MAAQ;IAAc,EAEtC;EAAA,EACsB;AAE7B,CAAC;AAAC;EA3CAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AA0CT,eAAeT,aAAa"}
@@ -14,9 +14,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
14
14
  var React = _interopRequireWildcard(require("react"));
15
15
  var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
16
16
  var _styles = require("./styles");
17
- var _types = require("../types");
18
17
  var _jsxRuntime = require("react/jsx-runtime");
19
- var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
18
+ var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding"],
20
19
  _excluded2 = ["id", "disabled", "title", "icon", "children"];
21
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
22
21
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,8 +28,6 @@ var AccordionMenu = function AccordionMenu(props) {
29
28
  onSelect = props.onSelect,
30
29
  multipleActive = props.multipleActive,
31
30
  padding = props.padding,
32
- _props$size = props.size,
33
- size = _props$size === void 0 ? _types.Size.Medium : _props$size,
34
31
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
35
32
  var _React$useState = React.useState([]),
36
33
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -76,8 +73,7 @@ var AccordionMenu = function AccordionMenu(props) {
76
73
  }),
77
74
  isLast: index === items.length - 1,
78
75
  onSelect: onSelected,
79
- padding: padding,
80
- size: size
76
+ padding: padding
81
77
  }, rest), {}, {
82
78
  children: children
83
79
  }), id);
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionMenu.cjs","names":["AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","size","Size","Medium","rest","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\nimport {Size} from \"../types\";\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n\n size?: Size.Small | Size.Medium | Size.Large;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, size = Size.Medium, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n size={size}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}
1
+ {"version":3,"file":"AccordionMenu.cjs","names":["AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","rest","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAAgD;AAAA;EAAA;AAAA;AAAA;AAAA;AAAA;AAmBhD,IAAMA,aAAsD,GAAG,SAAzDA,aAAsD,CAAIC,KAAqB,EAAK;EACxF,IAAQC,KAAK,GAAkFD,KAAK,CAA5FC,KAAK;IAAEC,aAAa,GAAmEF,KAAK,CAArFE,aAAa;IAAEC,gBAAgB,GAAiDH,KAAK,CAAtEG,gBAAgB;IAAEC,QAAQ,GAAuCJ,KAAK,CAApDI,QAAQ;IAAEC,cAAc,GAAuBL,KAAK,CAA1CK,cAAc;IAAEC,OAAO,GAAcN,KAAK,CAA1BM,OAAO;IAAKC,IAAI,0CAAKP,KAAK;EACpG,sBAAwDQ,KAAK,CAACC,QAAQ,CAAW,EAAE,CAAC;IAAA;IAA7EC,oBAAoB;IAAEC,uBAAuB;EAEpD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,OAAOV,aAAa,GAAGA,aAAa,GAAGQ,oBAAoB;EAC7D,CAAC;EAED,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9B,OAAOV,gBAAgB,GAAGA,gBAAgB,GAAGQ,uBAAuB;EACtE,CAAC;EAED,IAAMG,UAAU,GAAG,SAAbA,UAAU,CAAIC,EAAU,EAAK;IACjC,IAAMC,UAAU,GAAGJ,aAAa,EAAE;IAClC,IAAMK,UAAU,GAAGJ,iBAAiB,EAAE;IAEtC,IAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAI,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,IAAIL,EAAE;IAAA,EAAC;IAClD,IAAIV,cAAc,EAAE;MAClB,IAAIa,QAAQ,EAAED,UAAU,CAACD,UAAU,CAACK,MAAM,CAAC,UAACD,CAAC;QAAA,OAAKA,CAAC,IAAIL,EAAE;MAAA,EAAC,CAAC,CAAC,KACvDE,UAAU,4CAAKD,UAAU,IAAED,EAAE,GAAE;IACtC,CAAC,MAAME,UAAU,CAACC,QAAQ,GAAG,EAAE,GAAG,CAACH,EAAE,CAAC,CAAC;IAEvCX,QAAQ,IAAIA,QAAQ,CAACW,EAAE,CAAC;EAC1B,CAAC;EAED,oBACE,qBAAC,4BAAoB,kCAAKR,IAAI;IAAA,UAC3BN,KAAK,CAACqB,GAAG,CAAC,gBAAiDC,KAAK;MAAA,IAApDR,EAAE,QAAFA,EAAE;QAAES,QAAQ,QAARA,QAAQ;QAAEC,KAAK,QAALA,KAAK;QAAEC,IAAI,QAAJA,IAAI;QAAEC,QAAQ,QAARA,QAAQ;QAAKpB,IAAI;MAAA,oBACvD,qBAAC,sBAAa;QAEZ,EAAE,EAAEQ,EAAG;QACP,QAAQ,EAAES,QAAS;QACnB,KAAK,EAAEC,KAAM;QACb,iBAAe,CAAC,CAACb,aAAa,EAAE,CAACO,IAAI,CAAC,UAACC,CAAC;UAAA,OAAKA,CAAC,IAAIL,EAAE;QAAA,EAAE;QACtD,IAAI,EAAEW,IAAK;QACX,QAAQ,EAAE,CAAC,CAACd,aAAa,EAAE,CAACO,IAAI,CAAC,UAACC,CAAC;UAAA,OAAKA,CAAC,IAAIL,EAAE;QAAA,EAAE;QACjD,MAAM,EAAEQ,KAAK,KAAKtB,KAAK,CAAC2B,MAAM,GAAG,CAAE;QACnC,QAAQ,EAAEd,UAAW;QACrB,OAAO,EAAER;MAAQ,GACbC,IAAI;QAAA,UACPoB;MAAQ,IAXJZ,EAAE,CAYO;IAAA,CACjB;EAAC,GACmB;AAE3B,CAAC;AAAC;EA7DAd,KAAK;IASLc,EAAE;IACFS,QAAQ;IACRC,KAAK;IACLC,IAAI;IACJC,QAAQ;EAAA;EAZRzB,aAAa;EACbC,gBAAgB;EAChBC,QAAQ;EACRC,cAAc;EACdC,OAAO;AAAA;AAAA,eA0DMP,aAAa;AAAA"}
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { Size } from "../types";
3
2
  export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
4
3
  items: AccordionItemProps[];
5
4
  selectedItems?: string[];
@@ -7,14 +6,12 @@ export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement
7
6
  onSelect?: (id: string) => void;
8
7
  multipleActive?: boolean;
9
8
  padding?: string;
10
- size?: Size.Small | Size.Medium | Size.Large;
11
9
  }
12
10
  export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {
13
11
  id: string;
14
12
  disabled?: boolean;
15
13
  title: string;
16
14
  icon?: React.ReactNode;
17
- size?: Size.Small | Size.Medium | Size.Large;
18
15
  children: React.ReactNode;
19
16
  }
20
17
  declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
@@ -3,14 +3,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
3
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
5
  import _pt from "prop-types";
6
- var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
6
+ var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding"],
7
7
  _excluded2 = ["id", "disabled", "title", "icon", "children"];
8
8
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
9
9
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
10
10
  import * as React from 'react';
11
11
  import AccordionItem from './AccordionItem';
12
12
  import { AccordionMenuWrapper } from './styles';
13
- import { Size } from "../types";
14
13
  import { jsx as _jsx } from "react/jsx-runtime";
15
14
  var AccordionMenu = function AccordionMenu(props) {
16
15
  var items = props.items,
@@ -19,8 +18,6 @@ var AccordionMenu = function AccordionMenu(props) {
19
18
  onSelect = props.onSelect,
20
19
  multipleActive = props.multipleActive,
21
20
  padding = props.padding,
22
- _props$size = props.size,
23
- size = _props$size === void 0 ? Size.Medium : _props$size,
24
21
  rest = _objectWithoutProperties(props, _excluded);
25
22
  var _React$useState = React.useState([]),
26
23
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -66,8 +63,7 @@ var AccordionMenu = function AccordionMenu(props) {
66
63
  }),
67
64
  isLast: index === items.length - 1,
68
65
  onSelect: onSelected,
69
- padding: padding,
70
- size: size
66
+ padding: padding
71
67
  }, rest), {}, {
72
68
  children: children
73
69
  }), id);
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionMenu.js","names":["React","AccordionItem","AccordionMenuWrapper","Size","AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","size","Medium","rest","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\nimport {Size} from \"../types\";\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n\n size?: Size.Small | Size.Medium | Size.Large;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, size = Size.Medium, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n size={size}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}
1
+ {"version":3,"file":"AccordionMenu.js","names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","rest","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}
@@ -4,20 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
7
+ exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.HeaderIconContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _styles = require("../styles");
11
11
  var _zIndexes = require("../styles/z-indexes");
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
12
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
13
13
  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"])));
14
14
  exports.AccordionMenuWrapper = AccordionMenuWrapper;
15
- var ItemHeaderContainer = _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);
16
- exports.ItemHeaderContainer = ItemHeaderContainer;
17
- 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"])), ItemHeaderContainer, _styles.COLORS.neutral_100);
15
+ var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n"])), function (props) {
16
+ return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
17
+ });
18
18
  exports.AccordionItemContainer = AccordionItemContainer;
19
- var ItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n ", "\n }\n \n .large & {\n ", "\n }\n\n"])), function (props) {
19
+ var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
20
+ exports.ItemHeaderContainer = ItemHeaderContainer;
21
+ var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: auto;\n"])));
22
+ exports.HeaderIconContainer = HeaderIconContainer;
23
+ var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n background: ", ";\n"])), function (props) {
20
24
  return props.padding || '12px 16px';
21
- }, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
25
+ }, _styles.COLORS.white);
22
26
  exports.ItemBodyContainer = ItemBodyContainer;
23
27
  //# sourceMappingURL=styles.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","ItemHeaderContainer","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","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\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 ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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 ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const AccordionItemContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '12px 16px'};\n background: ${COLORS.white};\n \n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n \n .medium & {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n \n .large & {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AAQA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAIK,IAAMC,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,wjCASzC,IAAAE,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;AAAC;AAEK,IAAMC,sBAAsB,GAAGrB,yBAAM,CAACC,GAAG,uQAMzBC,mBAAmB,EACXI,cAAM,CAACgB,WAAW,CAEhD;AAAC;AAEK,IAAMC,iBAAiB,GAAGvB,yBAAM,CAACC,GAAG,gNAC9B,UAACuB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GACpCnB,cAAM,CAACa,KAAK,EAExB,IAAAhB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGjD,IAAAG,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAInD,IAAAI,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAGxD;AAAC"}
1
+ {"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentMStyling","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '12px 16px'};\n background: ${COLORS.white};\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAEK,IAAMC,sBAAsB,GAAGF,yBAAM,CAACC,GAAG,wMAK7B,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,gBAAgB,uBAAgBC,cAAM,CAACC,WAAW,IAAK,EAAE;AAAA,CAAC,CAC9F;AAAC;AAEK,IAAMC,mBAAmB,GAAGP,yBAAM,CAACC,GAAG,2sBAQzC,IAAAO,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,EAQ/DC,mBAAW,EAICP,cAAM,CAACQ,UAAU,EACtBR,cAAM,CAACS,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBX,cAAM,CAACY,WAAW,EACbZ,cAAM,CAACa,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBd,cAAM,CAACe,WAAW,EAIbf,cAAM,CAACgB,KAAK,EACjBhB,cAAM,CAACiB,WAAW,EAIhBjB,cAAM,CAACiB,WAAW,CAGhC;AAAC;AAEK,IAAMC,mBAAmB,GAAGvB,yBAAM,CAACC,GAAG,6GAE5C;AAAC;AAEK,IAAMuB,iBAAiB,GAAGxB,yBAAM,CAACC,GAAG,+HAC9B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACsB,OAAO,IAAI,WAAW;AAAA,GACpCpB,cAAM,CAACgB,KAAK,CAC3B;AAAC"}
@@ -1,6 +1,9 @@
1
1
  export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
3
+ displaySeparator: boolean;
4
+ }, never>;
2
5
  export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
7
  export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
5
8
  padding?: string | undefined;
6
9
  }, never>;
@@ -1,12 +1,15 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  import styled from 'styled-components';
4
- import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
4
+ import { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';
5
5
  import { Z_INDEXES } from '../styles/z-indexes';
6
6
  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"])));
7
- export var ItemHeaderContainer = 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);
8
- 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"])), ItemHeaderContainer, COLORS.neutral_100);
9
- export var ItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n ", "\n }\n \n .large & {\n ", "\n }\n\n"])), function (props) {
7
+ export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n"])), function (props) {
8
+ return props.displaySeparator ? "1px solid ".concat(COLORS.neutral_100) : '';
9
+ });
10
+ export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
11
+ export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: auto;\n"])));
12
+ export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", ";\n background: ", ";\n"])), function (props) {
10
13
  return props.padding || '12px 16px';
11
- }, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null));
14
+ }, COLORS.white);
12
15
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\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 ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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 ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const AccordionItemContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '12px 16px'};\n background: ${COLORS.white};\n \n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n \n .medium & {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n \n .large & {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n`;\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,oKAK7C;AAID,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACS,GAAG,0iCASzCL,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAe/DT,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAWjEV,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAUjEN,WAAW,EAICL,MAAM,CAACY,UAAU,EACtBZ,MAAM,CAACa,WAAW,EAChBP,SAAS,CAACQ,KAAK,EAIjBd,MAAM,CAACe,WAAW,EACbf,MAAM,CAACgB,WAAW,EACrBV,SAAS,CAACW,MAAM,EAIlBjB,MAAM,CAACkB,WAAW,EAIblB,MAAM,CAACmB,KAAK,EACjBnB,MAAM,CAACoB,WAAW,EAIhBpB,MAAM,CAACoB,WAAW,CAGhC;AAED,OAAO,IAAMC,sBAAsB,GAAGtB,MAAM,CAACS,GAAG,yPAMzBC,mBAAmB,EACXT,MAAM,CAACsB,WAAW,CAEhD;AAED,OAAO,IAAMC,iBAAiB,GAAGxB,MAAM,CAACS,GAAG,kMAC9B,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GACpCzB,MAAM,CAACmB,KAAK,EAExBhB,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAGjDR,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAInDT,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,CAGxD"}
1
+ {"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '12px 16px'};\n background: ${COLORS.white};\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AACtF,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAG,oKAK7C;AAED,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAG,0LAK7B,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,gBAAgB,uBAAgBT,MAAM,CAACU,WAAW,IAAK,EAAE;AAAA,CAAC,CAC9F;AAED,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAG,6rBAQzCL,iBAAiB,CAACC,kBAAkB,CAACU,OAAO,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAQ/DV,WAAW,EAICH,MAAM,CAACc,UAAU,EACtBd,MAAM,CAACe,WAAW,EAChBX,SAAS,CAACY,KAAK,EAIjBhB,MAAM,CAACiB,WAAW,EACbjB,MAAM,CAACkB,WAAW,EACrBd,SAAS,CAACe,MAAM,EAIlBnB,MAAM,CAACoB,WAAW,EAIbpB,MAAM,CAACqB,KAAK,EACjBrB,MAAM,CAACsB,WAAW,EAIhBtB,MAAM,CAACsB,WAAW,CAGhC;AAED,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAG,+FAE5C;AAED,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAG,iHAC9B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACiB,OAAO,IAAI,WAAW;AAAA,GACpCzB,MAAM,CAACqB,KAAK,CAC3B"}
@@ -3,9 +3,9 @@ import * as React from 'react';
3
3
  import { COLORS } from '../styles';
4
4
  import ScreenSetsContainer from './ScreenSetsContainer';
5
5
  import { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';
6
- import { Fragment as _Fragment } from "react/jsx-runtime";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
8
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  /**
10
10
  * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
11
11
  * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\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 ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 24px;\n }\n\n &.large {\n margin: 0 48px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children}&nbsp;\n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAGA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,wvBAClB,UAACC,KAAuB;EAAA,OAAMA,KAAK,CAACC,KAAK,GAAGD,KAAK,CAACC,KAAK,GAAGC,cAAM,CAACC,WAAW;AAAA,CAAC,EAGlFD,cAAM,CAACE,KAAK,EACP,UAACJ,KAAuB;EAAA,OAAMA,KAAK,CAACK,MAAM,GAAG,MAAM,GAAG,GAAG;AAAA,CAAC,EAMpEC,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,EAcnBC,sBAAU,EAEC,UAACT,KAAK;EAAA,OAAKA,KAAK,CAACU,IAAI;AAAA,GAGrB,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACW,WAAW;AAAA,GAIjB,UAACX,KAAK;EAAA,OAAKA,KAAK,CAACY,WAAW;AAAA,GACvCV,cAAM,CAACW,KAAK,CAO1B;AAED,IAAMC,YAAY,GAAGhB,yBAAM,CAACC,GAAG,2qBAC3B,IAAAgB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAKnDX,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,EAqBfF,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,CAgBtB;AAED,IAAMU,aAAa,GAAGpB,yBAAM,CAACC,GAAG,8GAE/B;AAED,IAAMoB,eAAe,GAAGrB,yBAAM,CAACC,GAAG,uHAE9B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,KAAK,GAAG,IAAAmB,uBAAc,EAACpB,KAAK,CAACC,KAAK,CAAC,GAAG,IAAI;AAAA,CAAC,CAChE;AAED,IAAMoB,oBAAoB,GAAGvB,yBAAM,CAACC,GAAG,yMAOtC;AAiBD,IAAMuB,MAA4C,GAAG,SAA/CA,MAA4C,OAe5C;EAAA,IAdJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,QAAQ,QAARA,QAAQ;IACRpB,MAAM,QAANA,MAAM;IACNqB,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRjB,IAAI,QAAJA,IAAI;IACJkB,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,IAAI;EAEP,sBAA0BC,KAAK,CAACC,QAAQ,CAAS,IAAAC,gBAAS,GAAE,GAAGC,MAAM,CAACC,UAAU,GAAG,CAAC,CAAC,CAAC;IAAA;IAA/EC,KAAK;IAAEC,QAAQ;EACtBN,KAAK,CAACO,SAAS,CAAC,YAAM;IACpB,SAASC,YAAY,GAAG;MACtBF,QAAQ,CAACH,MAAM,CAACC,UAAU,CAAC;IAC7B;IACAD,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAML,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIG,YAAY,GAAG;IACjBC,SAAS,EAAE7C,cAAM,CAAC8C,WAAW;IAC7BC,WAAW,EAAE/C,cAAM,CAACgD,WAAW;IAC/BC,UAAU,EAAEjD,cAAM,CAACkD,UAAU;IAC7BC,cAAc,EAAEnD,cAAM,CAACoD,WAAW;IAClCzB,IAAI,EAAE0B,gBAAG;IACTC,aAAa,EAAEhC,IAAI;IACnBiC,YAAY,EAAEvD,cAAM,CAACwD,WAAW;IAChC/C,WAAW,EAAET,cAAM,CAACyD,WAAW;IAC/B/C,WAAW,EAAEV,cAAM,CAAC0D;EACtB,CAAC;EACD,QAAQpC,IAAI;IACV,KAAK,SAAS;MACZsB,YAAY,CAACC,SAAS,GAAG7C,cAAM,CAAC2D,WAAW;MAC3Cf,YAAY,CAACG,WAAW,GAAG/C,cAAM,CAAC4D,WAAW;MAC7ChB,YAAY,CAACW,YAAY,GAAGvD,cAAM,CAAC6D,WAAW;MAC9CjB,YAAY,CAACK,UAAU,GAAGjD,cAAM,CAAC8D,UAAU;MAC3ClB,YAAY,CAACjB,IAAI,GAAGoC,iBAAI;MACxBnB,YAAY,CAACO,cAAc,GAAGnD,cAAM,CAACgE,WAAW;MAChDpB,YAAY,CAACnC,WAAW,GAAGT,cAAM,CAACiE,WAAW;MAC7CrB,YAAY,CAAClC,WAAW,GAAGV,cAAM,CAACiE,WAAW;MAC7C;IACF,KAAK,UAAU;MACbrB,YAAY,CAACC,SAAS,GAAG7C,cAAM,CAACkE,YAAY;MAC5CtB,YAAY,CAACG,WAAW,GAAG/C,cAAM,CAACmE,YAAY;MAC9CvB,YAAY,CAACW,YAAY,GAAGvD,cAAM,CAACoE,YAAY;MAC/CxB,YAAY,CAACK,UAAU,GAAGjD,cAAM,CAACqE,WAAW;MAC5CzB,YAAY,CAACjB,IAAI,GAAG2C,6BAAgB;MACpC1B,YAAY,CAACO,cAAc,GAAGnD,cAAM,CAACuE,YAAY;MACjD3B,YAAY,CAACnC,WAAW,GAAGT,cAAM,CAACwE,YAAY;MAC9C5B,YAAY,CAAClC,WAAW,GAAGV,cAAM,CAACwE,YAAY;MAC9C;IACF,KAAK,UAAU;MACb5B,YAAY,CAACC,SAAS,GAAG7C,cAAM,CAACC,WAAW;MAC3C2C,YAAY,CAACG,WAAW,GAAG/C,cAAM,CAACyE,WAAW;MAC7C7B,YAAY,CAACW,YAAY,GAAGvD,cAAM,CAAC0E,WAAW;MAC9C9B,YAAY,CAACK,UAAU,GAAGjD,cAAM,CAAC2E,UAAU;MAC3C/B,YAAY,CAACjB,IAAI,GAAGiD,qBAAQ;MAC5BhC,YAAY,CAACO,cAAc,GAAGnD,cAAM,CAAC6E,WAAW;MAChDjC,YAAY,CAACnC,WAAW,GAAGT,cAAM,CAAC8E,WAAW;MAC7ClC,YAAY,CAAClC,WAAW,GAAGV,cAAM,CAAC8E,WAAW;MAC7C;EAAM;EAGV,IAAMC,GAAG,aAAMhD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,SAAS,GAAG,mBAAmB,GAAG,EAAE,CAAE;EAExE,oBACE,qBAAC,eAAe;IACd,eAAaN,MAAO;IACpB,KAAK,EAAEoB,YAAY,CAACC,SAAU;IAC9B,WAAW,EAAED,YAAY,CAAClC,WAAY;IACtC,WAAW,EAAEkC,YAAY,CAACnC,WAAY;IACtC,IAAI,EAAEmC,YAAY,CAACG,WAAY;IAC/B,KAAK,EAAEH,YAAY,CAACK,UAAW;IAC/B,MAAM,EAAE9C,MAAO;IACf,SAAS,EAAE4E,GAAI;IACf,IAAI,EAAC;EAAM,GACP/C,IAAI;IAAA,uBACR,sBAAC,YAAY;MAAC,KAAK,EAAE;QAAEgD,KAAK,EAAEpC,YAAY,CAACG;MAAY,CAAE;MAAC,SAAS,EAAE1B,IAAK;MAAA,WACvEM,IAAI,GAAGA,IAAI,GAAGC,MAAM,GAAG,IAAI,gBAAG,qBAAC,YAAY,CAAC,IAAI;QAAC,KAAK,EAAEgB,YAAY,CAACG,WAAY;QAAC,IAAI,EAAC;MAAM,EAAG,eACjG,qBAAC,oBAAoB;QAAA,uBACnB,sBAAC,2BAAmB;UAAC,IAAI,EAAE1B,IAAK;UAAC,KAAK,EAAEiB,KAAM;UAAC,KAAK,EAAEM,YAAY,CAACG,WAAY;UAAA,WAC5ExB,QAAQ,EAAC,MACV,EAACf,IAAI,IAAIiB,QAAQ,iBACf,qBAAC,oBAAS;YACR,EAAE,YAAKwD,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,YAAY,CAAC,gBAAc;YAC7D,OAAO,EAAE,iBAACC,CAAC,EAAK;cACd,IAAIvD,UAAU,EAAE;gBACduD,CAAC,CAACC,cAAc,EAAE;gBAClBxD,UAAU,CAACuD,CAAC,CAAC;cACf;YACF,CAAE;YACF,IAAI,EAAE5E,IAAK;YACX,OAAO,EAAC,SAAS;YAAA,UAChBiB;UAAQ,EAEZ;QAAA;MACmB,EACD,EACtBC,OAAO,iBACN,qBAAC,aAAa;QAAA,uBACZ,qBAAC,eAAe;UAAC,KAAK,EAAEkB,YAAY,CAACU,aAAc;UAAA,uBACjD,qBAAC,kBAAU;YAAC,OAAO,EAAC,WAAW;YAAC,KAAK,EAAC,UAAU;YAAC,wBAAwB;YAAC,oBAAoB,EAAEV,YAAY,CAACW,YAAa;YAAC,MAAM,EAAE;cAAA,OAAM7B,OAAO,EAAE;YAAA,CAAC;YAAA,uBACjJ,qBAAC,kBAAK;cAAC,KAAK,EAAEkB,YAAY,CAACO,cAAe;cAAC,IAAI,EAAC;YAAM;UAAG;QAC9C;MACG,EAErB;IAAA;EACY,GACC;AAEtB,CAAC;AAAC;EAjIA7B,IAAI,4BAAG,SAAS,EAAG,UAAU,EAAG,UAAU,EAAG,SAAS;EACtDd,IAAI;EACJiB,QAAQ;EACRI,UAAU;EACVyD,KAAK;EACLnF,MAAM;EACNqB,MAAM;EACNG,IAAI;EACJD,OAAO;EACPE,MAAM;EACNE,SAAS;AAAA;AAAA,eAyHIV,MAAM;AAAA"}
1
+ {"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\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 ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 24px;\n }\n\n &.large {\n margin: 0 48px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children}&nbsp;\n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}