@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

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 (241) hide show
  1. package/dist/esm/Breadcrumb/Breadcrumb.js +96 -49
  2. package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
  3. package/dist/esm/Button/DualFunctionButton.js +0 -3
  4. package/dist/esm/Button/DualFunctionButton.js.map +1 -1
  5. package/dist/esm/Button/Iconbutton.js +6 -2
  6. package/dist/esm/Button/Iconbutton.js.map +1 -1
  7. package/dist/esm/Button/index.js +0 -1
  8. package/dist/esm/Button/index.js.map +1 -1
  9. package/dist/esm/Chips/ChoiceChips.js +1 -2
  10. package/dist/esm/Chips/ChoiceChips.js.map +1 -1
  11. package/dist/esm/Dropdown/BasicDropdown.js +11 -3
  12. package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
  13. package/dist/esm/Dropdown/CommonStyling.js +15 -13
  14. package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
  15. package/dist/esm/Dropdown/DropdownButton.js +20 -8
  16. package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
  17. package/dist/esm/Dropdown/DropdownContent.js +117 -31
  18. package/dist/esm/Dropdown/DropdownContent.js.map +1 -1
  19. package/dist/esm/GlobalNavigationBar/RightSideNav.js +4 -0
  20. package/dist/esm/GlobalNavigationBar/RightSideNav.js.map +1 -1
  21. package/dist/esm/List/ListRow.js +204 -90
  22. package/dist/esm/List/ListRow.js.map +1 -1
  23. package/dist/esm/List/__tests__/ListRow.tests.js +7 -43
  24. package/dist/esm/List/__tests__/ListRow.tests.js.map +1 -1
  25. package/dist/esm/List/index.js +1 -2
  26. package/dist/esm/List/index.js.map +1 -1
  27. package/dist/esm/Modals/ModalContainer.js +1 -0
  28. package/dist/esm/Modals/ModalContainer.js.map +1 -1
  29. package/dist/esm/Modals/ModalDialog.js +12 -3
  30. package/dist/esm/Modals/ModalDialog.js.map +1 -1
  31. package/dist/esm/Modals/ModalNote.js +56 -0
  32. package/dist/esm/Modals/ModalNote.js.map +1 -0
  33. package/dist/esm/Modals/ModalStyles.js +48 -0
  34. package/dist/esm/Modals/ModalStyles.js.map +1 -1
  35. package/dist/esm/NotificationDot/NotificationDot.js +41 -0
  36. package/dist/esm/NotificationDot/NotificationDot.js.map +1 -0
  37. package/dist/esm/NotificationDot/index.js +2 -0
  38. package/dist/esm/NotificationDot/index.js.map +1 -0
  39. package/dist/esm/Tabs/TabLink.js +25 -20
  40. package/dist/esm/Tabs/TabLink.js.map +1 -1
  41. package/dist/esm/Tabs/VerticalTabs.js +4 -1
  42. package/dist/esm/Tabs/VerticalTabs.js.map +1 -1
  43. package/dist/esm/Toggles/ToggleSwitch.js +14 -9
  44. package/dist/esm/Toggles/ToggleSwitch.js.map +1 -1
  45. package/dist/esm/Toggles/TogglerStyles.js +101 -74
  46. package/dist/esm/Toggles/TogglerStyles.js.map +1 -1
  47. package/dist/esm/Toggles/TogglerTypes.js +0 -4
  48. package/dist/esm/Toggles/TogglerTypes.js.map +1 -1
  49. package/dist/esm/Tooltips/TooltipStyles.js +77 -0
  50. package/dist/esm/Tooltips/TooltipStyles.js.map +1 -0
  51. package/dist/esm/Tooltips/TooltipTypes.js +6 -0
  52. package/dist/esm/Tooltips/TooltipTypes.js.map +1 -0
  53. package/dist/esm/Tooltips/TooltipWrapper.js +24 -0
  54. package/dist/esm/Tooltips/TooltipWrapper.js.map +1 -0
  55. package/dist/esm/Tooltips/index.js +4 -0
  56. package/dist/esm/Tooltips/index.js.map +1 -0
  57. package/dist/esm/icons/contenticons/ContentIcons.js +454 -322
  58. package/dist/esm/icons/contenticons/ContentIcons.js.map +1 -1
  59. package/dist/esm/icons/index.js +55 -24
  60. package/dist/esm/icons/index.js.map +1 -1
  61. package/dist/esm/icons/systemicons/SystemIcons.js +652 -488
  62. package/dist/esm/icons/systemicons/SystemIcons.js.map +1 -1
  63. package/dist/esm/index.js +1 -0
  64. package/dist/esm/index.js.map +1 -1
  65. package/dist/esm/types.js +1 -0
  66. package/dist/esm/types.js.map +1 -1
  67. package/dist/js/Breadcrumb/Breadcrumb.d.ts +5 -2
  68. package/dist/js/Breadcrumb/Breadcrumb.js +94 -36
  69. package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
  70. package/dist/js/Button/DualFunctionButton.d.ts +0 -1
  71. package/dist/js/Button/DualFunctionButton.js +0 -3
  72. package/dist/js/Button/DualFunctionButton.js.map +1 -1
  73. package/dist/js/Button/Iconbutton.js +2 -2
  74. package/dist/js/Button/Iconbutton.js.map +1 -1
  75. package/dist/js/Button/index.d.ts +0 -1
  76. package/dist/js/Button/index.js +0 -8
  77. package/dist/js/Button/index.js.map +1 -1
  78. package/dist/js/Chips/ChipTypes.d.ts +1 -0
  79. package/dist/js/Chips/ChoiceChips.js +1 -2
  80. package/dist/js/Chips/ChoiceChips.js.map +1 -1
  81. package/dist/js/Dropdown/BasicDropdown.d.ts +3 -2
  82. package/dist/js/Dropdown/BasicDropdown.js +18 -3
  83. package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
  84. package/dist/js/Dropdown/CommonStyling.d.ts +1 -0
  85. package/dist/js/Dropdown/CommonStyling.js +12 -12
  86. package/dist/js/Dropdown/CommonStyling.js.map +1 -1
  87. package/dist/js/Dropdown/DropdownButton.d.ts +1 -1
  88. package/dist/js/Dropdown/DropdownButton.js +19 -9
  89. package/dist/js/Dropdown/DropdownButton.js.map +1 -1
  90. package/dist/js/Dropdown/DropdownButtonTypes.d.ts +1 -0
  91. package/dist/js/Dropdown/DropdownContent.d.ts +4 -1
  92. package/dist/js/Dropdown/DropdownContent.js +117 -38
  93. package/dist/js/Dropdown/DropdownContent.js.map +1 -1
  94. package/dist/js/GlobalNavigationBar/RightSideNav.js +1 -1
  95. package/dist/js/GlobalNavigationBar/RightSideNav.js.map +1 -1
  96. package/dist/js/List/ListRow.d.ts +12 -5
  97. package/dist/js/List/ListRow.js +77 -55
  98. package/dist/js/List/ListRow.js.map +1 -1
  99. package/dist/js/List/__tests__/ListRow.tests.js +8 -53
  100. package/dist/js/List/__tests__/ListRow.tests.js.map +1 -1
  101. package/dist/js/List/index.d.ts +1 -2
  102. package/dist/js/List/index.js +0 -8
  103. package/dist/js/List/index.js.map +1 -1
  104. package/dist/js/Modals/ModalContainer.js +1 -1
  105. package/dist/js/Modals/ModalContainer.js.map +1 -1
  106. package/dist/js/Modals/ModalDialog.d.ts +2 -0
  107. package/dist/js/Modals/ModalDialog.js +13 -3
  108. package/dist/js/Modals/ModalDialog.js.map +1 -1
  109. package/dist/js/Modals/ModalNote.d.ts +9 -0
  110. package/dist/js/Modals/ModalNote.js +79 -0
  111. package/dist/js/Modals/ModalNote.js.map +1 -0
  112. package/dist/js/Modals/ModalStyles.d.ts +6 -0
  113. package/dist/js/Modals/ModalStyles.js +58 -4
  114. package/dist/js/Modals/ModalStyles.js.map +1 -1
  115. package/dist/js/NotificationDot/NotificationDot.d.ts +8 -0
  116. package/dist/js/NotificationDot/NotificationDot.js +70 -0
  117. package/dist/js/NotificationDot/NotificationDot.js.map +1 -0
  118. package/dist/js/NotificationDot/index.d.ts +1 -0
  119. package/dist/js/NotificationDot/index.js +16 -0
  120. package/dist/js/NotificationDot/index.js.map +1 -0
  121. package/dist/js/Tabs/TabLink.d.ts +3 -1
  122. package/dist/js/Tabs/TabLink.js +26 -11
  123. package/dist/js/Tabs/TabLink.js.map +1 -1
  124. package/dist/js/Tabs/VerticalTabs.d.ts +1 -0
  125. package/dist/js/Tabs/VerticalTabs.js +4 -1
  126. package/dist/js/Tabs/VerticalTabs.js.map +1 -1
  127. package/dist/js/Toggles/ToggleSwitch.d.ts +1 -1
  128. package/dist/js/Toggles/ToggleSwitch.js +16 -8
  129. package/dist/js/Toggles/ToggleSwitch.js.map +1 -1
  130. package/dist/js/Toggles/TogglerStyles.d.ts +3 -0
  131. package/dist/js/Toggles/TogglerStyles.js +16 -6
  132. package/dist/js/Toggles/TogglerStyles.js.map +1 -1
  133. package/dist/js/Toggles/TogglerTypes.d.ts +2 -0
  134. package/dist/js/Toggles/TogglerTypes.js +0 -5
  135. package/dist/js/Toggles/TogglerTypes.js.map +1 -1
  136. package/dist/js/Tooltips/TooltipStyles.d.ts +10 -0
  137. package/dist/js/Tooltips/TooltipStyles.js +86 -0
  138. package/dist/js/Tooltips/TooltipStyles.js.map +1 -0
  139. package/dist/js/Tooltips/TooltipTypes.d.ts +14 -0
  140. package/dist/js/Tooltips/TooltipTypes.js +11 -0
  141. package/dist/js/Tooltips/TooltipTypes.js.map +1 -0
  142. package/dist/js/Tooltips/TooltipWrapper.d.ts +3 -0
  143. package/dist/js/Tooltips/TooltipWrapper.js +43 -0
  144. package/dist/js/Tooltips/TooltipWrapper.js.map +1 -0
  145. package/dist/js/Tooltips/index.d.ts +3 -0
  146. package/dist/js/Tooltips/index.js +30 -0
  147. package/dist/js/Tooltips/index.js.map +1 -0
  148. package/dist/js/icons/contenticons/ContentIcons.js +1513 -1381
  149. package/dist/js/icons/contenticons/ContentIcons.js.map +1 -1
  150. package/dist/js/icons/index.d.ts +2 -0
  151. package/dist/js/icons/index.js +68 -25
  152. package/dist/js/icons/index.js.map +1 -1
  153. package/dist/js/icons/systemicons/SystemIcons.js +652 -488
  154. package/dist/js/icons/systemicons/SystemIcons.js.map +1 -1
  155. package/dist/js/index.d.ts +1 -0
  156. package/dist/js/index.js +13 -0
  157. package/dist/js/index.js.map +1 -1
  158. package/dist/js/types.d.ts +1 -0
  159. package/dist/js/types.js +1 -0
  160. package/dist/js/types.js.map +1 -1
  161. package/dist/umd/Breadcrumb/Breadcrumb.js +97 -51
  162. package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
  163. package/dist/umd/Button/DualFunctionButton.js +10 -15
  164. package/dist/umd/Button/DualFunctionButton.js.map +1 -1
  165. package/dist/umd/Button/Iconbutton.js +6 -2
  166. package/dist/umd/Button/Iconbutton.js.map +1 -1
  167. package/dist/umd/Button/index.js +4 -10
  168. package/dist/umd/Button/index.js.map +1 -1
  169. package/dist/umd/Chips/ChoiceChips.js +1 -2
  170. package/dist/umd/Chips/ChoiceChips.js.map +1 -1
  171. package/dist/umd/Dropdown/BasicDropdown.js +11 -3
  172. package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
  173. package/dist/umd/Dropdown/CommonStyling.js +18 -14
  174. package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
  175. package/dist/umd/Dropdown/DropdownButton.js +20 -8
  176. package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
  177. package/dist/umd/Dropdown/DropdownContent.js +119 -34
  178. package/dist/umd/Dropdown/DropdownContent.js.map +1 -1
  179. package/dist/umd/GlobalNavigationBar/RightSideNav.js +4 -0
  180. package/dist/umd/GlobalNavigationBar/RightSideNav.js.map +1 -1
  181. package/dist/umd/List/ListRow.js +218 -92
  182. package/dist/umd/List/ListRow.js.map +1 -1
  183. package/dist/umd/List/__tests__/ListRow.tests.js +9 -46
  184. package/dist/umd/List/__tests__/ListRow.tests.js.map +1 -1
  185. package/dist/umd/List/index.js +5 -8
  186. package/dist/umd/List/index.js.map +1 -1
  187. package/dist/umd/Modals/ModalContainer.js +1 -0
  188. package/dist/umd/Modals/ModalContainer.js.map +1 -1
  189. package/dist/umd/Modals/ModalDialog.js +15 -7
  190. package/dist/umd/Modals/ModalDialog.js.map +1 -1
  191. package/dist/umd/Modals/ModalNote.js +133 -0
  192. package/dist/umd/Modals/ModalNote.js.map +1 -0
  193. package/dist/umd/Modals/ModalStyles.js +54 -5
  194. package/dist/umd/Modals/ModalStyles.js.map +1 -1
  195. package/dist/umd/NotificationDot/NotificationDot.js +119 -0
  196. package/dist/umd/NotificationDot/NotificationDot.js.map +1 -0
  197. package/dist/umd/NotificationDot/index.js +32 -0
  198. package/dist/umd/NotificationDot/index.js.map +1 -0
  199. package/dist/umd/Tabs/TabLink.js +28 -24
  200. package/dist/umd/Tabs/TabLink.js.map +1 -1
  201. package/dist/umd/Tabs/VerticalTabs.js +4 -1
  202. package/dist/umd/Tabs/VerticalTabs.js.map +1 -1
  203. package/dist/umd/Toggles/ToggleSwitch.js +16 -12
  204. package/dist/umd/Toggles/ToggleSwitch.js.map +1 -1
  205. package/dist/umd/Toggles/TogglerStyles.js +100 -73
  206. package/dist/umd/Toggles/TogglerStyles.js.map +1 -1
  207. package/dist/umd/Toggles/TogglerTypes.js +0 -5
  208. package/dist/umd/Toggles/TogglerTypes.js.map +1 -1
  209. package/dist/umd/Tooltips/TooltipStyles.js +101 -0
  210. package/dist/umd/Tooltips/TooltipStyles.js.map +1 -0
  211. package/dist/umd/Tooltips/TooltipTypes.js +25 -0
  212. package/dist/umd/Tooltips/TooltipTypes.js.map +1 -0
  213. package/dist/umd/Tooltips/TooltipWrapper.js +92 -0
  214. package/dist/umd/Tooltips/TooltipWrapper.js.map +1 -0
  215. package/dist/umd/Tooltips/index.js +33 -0
  216. package/dist/umd/Tooltips/index.js.map +1 -0
  217. package/dist/umd/icons/contenticons/ContentIcons.js +604 -471
  218. package/dist/umd/icons/contenticons/ContentIcons.js.map +1 -1
  219. package/dist/umd/icons/index.js +62 -29
  220. package/dist/umd/icons/index.js.map +1 -1
  221. package/dist/umd/icons/systemicons/SystemIcons.js +652 -488
  222. package/dist/umd/icons/systemicons/SystemIcons.js.map +1 -1
  223. package/dist/umd/index.js +13 -4
  224. package/dist/umd/index.js.map +1 -1
  225. package/dist/umd/types.js +1 -0
  226. package/dist/umd/types.js.map +1 -1
  227. package/package.json +1 -1
  228. package/dist/esm/Button/Anchor.js +0 -76
  229. package/dist/esm/Button/Anchor.js.map +0 -1
  230. package/dist/esm/List/ListRowDropdown.js +0 -105
  231. package/dist/esm/List/ListRowDropdown.js.map +0 -1
  232. package/dist/js/Button/Anchor.d.ts +0 -7
  233. package/dist/js/Button/Anchor.js +0 -66
  234. package/dist/js/Button/Anchor.js.map +0 -1
  235. package/dist/js/List/ListRowDropdown.d.ts +0 -8
  236. package/dist/js/List/ListRowDropdown.js +0 -110
  237. package/dist/js/List/ListRowDropdown.js.map +0 -1
  238. package/dist/umd/Button/Anchor.js +0 -201
  239. package/dist/umd/Button/Anchor.js.map +0 -1
  240. package/dist/umd/List/ListRowDropdown.js +0 -182
  241. package/dist/umd/List/ListRowDropdown.js.map +0 -1
@@ -1,27 +1,37 @@
1
1
  "use strict";
2
2
 
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
- exports.ToggleSwitch = exports.ToggleSwitchContainer = void 0;
8
+ exports.ToggleSwitch = exports.ToggleSwitchContainer = exports.StyledSwitch = void 0;
7
9
 
8
10
  var _styles = require("../styles");
9
11
 
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
13
 
12
14
  var _typography = require("../styles/typography");
13
15
 
14
- var _templateObject, _templateObject2;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
+
18
+ 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); }
15
19
 
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
+ 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; }
17
21
 
18
22
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
19
23
 
20
- var ToggleSwitchContainer = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n height: 28px;\n width: auto;\n\n ", "\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n\n &:disabled + span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n\n &:checked {\n &:disabled + span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n\n &:hover + span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n\n & + span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n -webkit-transform: translateX(12px);\n -ms-transform: translateX(12px);\n transform: translateX(12px);\n }\n }\n }\n\n &:hover + span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n\n &:focus + span {\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n }\n }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.primary_700, _styles.COLORS.correct_500, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.correct_500, _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.primary_100, _styles.COLORS.focus_25, _styles.COLORS.focus);
24
+ var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ", "\n }\n\n &.medium {\n ", "\n }\n\n &.large {\n ", "\n }\n &.disabled {\n color: ", ";\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ", ";\n }\n }\n\n ", "\n &:not(.disabled):focus label:first-of-type span {\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
25
+ return props.selected ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n label:first-of-type span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20);
26
+ }, _styles.COLORS.focus_25, _styles.COLORS.focus);
27
+
28
+ exports.StyledSwitch = StyledSwitch;
29
+
30
+ var ToggleSwitchContainer = _styledComponents.default.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n"])));
21
31
 
22
32
  exports.ToggleSwitchContainer = ToggleSwitchContainer;
23
33
 
24
- var ToggleSwitch = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n margin-right: 10px;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 28px;\n height: 16px;\n background-color: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: 50%;\n }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
34
+ var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ", ";\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
25
35
 
26
36
  exports.ToggleSwitch = ToggleSwitch;
27
37
  //# sourceMappingURL=TogglerStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["ToggleSwitchContainer","styled","label","ComponentTextStyle","Regular","COLORS","black","neutral_300","neutral_100","neutral_200","primary_700","correct_500","primary_100","primary_500","neutral_500","critical_500","focus_25","focus","ToggleSwitch","span","white"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,KAAV,s7CAM9B,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAN8B,EAcRD,eAAOE,WAdC,EAkBNF,eAAOG,WAlBD,EAyBNH,eAAOE,WAzBD,EA6BJF,eAAOI,WA7BH,EAmCNJ,eAAOK,WAnCD,EAsCJL,eAAOM,WAtCH,EA0CJN,eAAOO,WA1CH,EA+CNP,eAAOQ,WA/CD,EAkDJR,eAAOM,WAlDH,EA8DRN,eAAOS,WA9DC,EAiENT,eAAOU,YAjED,EAqENV,eAAOO,WArED,EA0EDP,eAAOW,QA1EN,EA0E+BX,eAAOY,KA1EtC,CAA3B;;;;AA+EA,IAAMC,YAAY,GAAGjB,0BAAOkB,IAAV,+mBAYHd,eAAOS,WAZJ,EAgBDT,eAAOU,YAhBN,EA0BDV,eAAOe,KA1BN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n display: inline-block;\n height: 28px;\n width: auto;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n\n &:disabled + span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n\n &:checked {\n &:disabled + span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n\n &:hover + span {\n background-color: ${COLORS.primary_700};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n & + span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(12px);\n -ms-transform: translateX(12px);\n transform: translateX(12px);\n }\n }\n }\n\n &:hover + span {\n background-color: ${COLORS.neutral_500};\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &:focus + span {\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n }\n }\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n margin-right: 10px;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 28px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n bottom: 2px;\n background-color: ${COLORS.white};\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: 50%;\n }\n`;\n"],"file":"TogglerStyles.js"}
1
+ {"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,mwBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,44BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,6jBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FMT,eAAOa,QA7Fb,EA6FsCb,eAAOc,KA7F7C,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGnB,0BAAOoB,KAAV,wMAA3B;;;;AASA,IAAMC,YAAY,GAAGrB,0BAAOsB,IAAV,grBAWHlB,eAAOmB,WAXJ,EAeDnB,eAAOY,YAfN,EAyBDZ,eAAOoB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled):focus label:first-of-type span {\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ${COLORS.white};\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n`;\n"],"file":"TogglerStyles.js"}
@@ -1,3 +1,4 @@
1
+ import { Size } from '..';
1
2
  /**
2
3
  * Types for the table.
3
4
  */
@@ -7,5 +8,6 @@ export interface ToggleSwitchProps {
7
8
  disabled?: boolean;
8
9
  selected?: boolean;
9
10
  isSemantic?: boolean;
11
+ size?: Size;
10
12
  onToggle: (selected: boolean) => void;
11
13
  }
@@ -3,9 +3,4 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
- /**
8
- * Types for the table.
9
- */
10
- ;
11
6
  //# sourceMappingURL=TogglerTypes.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Toggles/TogglerTypes.ts"],"names":[],"mappings":";;;;;;AAAA;AACA;AACA;AAQC","sourcesContent":["/**\n * Types for the table.\n */\nexport interface ToggleSwitchProps {\n id: string;\n label?: string;\n disabled?: boolean;\n selected?: boolean;\n isSemantic?: boolean;\n onToggle: (selected: boolean) => void;\n};\n"],"file":"TogglerTypes.js"}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"TogglerTypes.js"}
@@ -0,0 +1,10 @@
1
+ import { Size } from '../types';
2
+ export declare const Tooltip: import("styled-components").StyledComponent<"div", any, {
3
+ withArrow?: boolean;
4
+ size?: Size;
5
+ height?: string;
6
+ align?: 'start' | 'end' | 'center' | undefined;
7
+ position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
8
+ }, never>;
9
+ export declare const TooltipTrigger: import("styled-components").FlattenSimpleInterpolation;
10
+ export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.TooltipContainer = exports.TooltipTrigger = exports.Tooltip = void 0;
9
+
10
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
+
12
+ var _types = require("../types");
13
+
14
+ var _styles = require("../styles");
15
+
16
+ var _typography = require("../styles/typography");
17
+
18
+ var _templateObject, _templateObject2, _templateObject3;
19
+
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); }
21
+
22
+ 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; }
23
+
24
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
25
+
26
+ var distanceToEdge = function distanceToEdge(size) {
27
+ return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
28
+ };
29
+
30
+ var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n pointer-events: none;\n ", "\n ", "\n ", "\n ", "\n box-shadow: ", ";\n \n padding: ", ";\n border-radius: 2px;\n width: max-content;\n height: ", ";\n max-width: 34ems;\n background: ", ";\n position: absolute; \n opacity: 0; \n z-index: 1;\n ", "\n\n ", "\n ", "\n \n ", "\n\n\n&::after {\n ", "\n content: \"\";\n position: absolute;\n ", "\n \n ", "\n ", "\n\n ", "\n\n ", "\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ", " \n ", " \n ", " \n ", ";\n }\n"])), function (props) {
31
+ return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
32
+ }, function (props) {
33
+ return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
34
+ }, function (props) {
35
+ return props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
36
+ }, function (props) {
37
+ return props.align == 'center' ? 'text-align: center;' : '';
38
+ }, _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
39
+ return props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px';
40
+ }, function (props) {
41
+ return props.height;
42
+ }, _styles.COLORS.primary_800, function (props) {
43
+ return props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '';
44
+ }, function (props) {
45
+ return props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '';
46
+ }, function (props) {
47
+ return props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '';
48
+ }, function (props) {
49
+ return props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? 'left: 0%;' : props.align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);';
50
+ }, function (props) {
51
+ return !props.withArrow ? 'display: none;' : '';
52
+ }, function (props) {
53
+ return props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '';
54
+ }, function (props) {
55
+ return props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '';
56
+ }, function (props) {
57
+ return props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '';
58
+ }, function (props) {
59
+ return props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? "left: ".concat(distanceToEdge(props.size), ";") : props.align == 'end' ? "right: ".concat(distanceToEdge(props.size), ";") : 'left: 50%;';
60
+ }, function (props) {
61
+ return props.position == 'left' ? '' : 'margin-left: -5px;';
62
+ }, function (props) {
63
+ return props.position == 'top' ? _styles.COLORS.primary_800 : 'transparent';
64
+ }, function (props) {
65
+ return props.position == 'right' ? _styles.COLORS.primary_800 : 'transparent';
66
+ }, function (props) {
67
+ return props.position == 'bottom' ? _styles.COLORS.primary_800 : 'transparent';
68
+ }, function (props) {
69
+ return props.position == 'left' ? _styles.COLORS.primary_800 : 'transparent';
70
+ });
71
+
72
+ exports.Tooltip = Tooltip;
73
+ Tooltip.defaultProps = {
74
+ withArrow: false,
75
+ size: _types.Size.Small,
76
+ height: 'auto',
77
+ align: 'center',
78
+ position: 'bottom'
79
+ };
80
+ var TooltipTrigger = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover ", ", &:focus-within ", ", &:focus ", " {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n"])), Tooltip, Tooltip, Tooltip);
81
+ exports.TooltipTrigger = TooltipTrigger;
82
+
83
+ var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n\n ", "\n"])), TooltipTrigger);
84
+
85
+ exports.TooltipContainer = TooltipContainer;
86
+ //# sourceMappingURL=TooltipStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","position","withArrow","defaultProps","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' | 'end' | 'center' | undefined;\n position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: 34ems;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: 1;\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' || props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n`;\n\nexport const TooltipContainer = styled.div`\n display: inline-block;\n position: relative;\n\n ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
@@ -0,0 +1,14 @@
1
+ import { Size } from "../types";
2
+ /**
3
+ * Types for the table.
4
+ */
5
+ export interface TooltipProps {
6
+ label?: string;
7
+ withArrow?: boolean;
8
+ width?: string;
9
+ size?: Size;
10
+ height?: string;
11
+ align?: 'start' | 'end' | 'center' | undefined;
12
+ position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
13
+ children?: React.ReactNode;
14
+ }
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ /**
8
+ * Types for the table.
9
+ */
10
+ ;
11
+ //# sourceMappingURL=TooltipTypes.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n label?: string;\n withArrow?: boolean;\n width?: string;\n size?: Size;\n height?: string;\n align? : 'start' | 'end' | 'center' | undefined;\n position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n children?: React.ReactNode;\n };\n "],"file":"TooltipTypes.js"}
@@ -0,0 +1,3 @@
1
+ import { TooltipProps } from './TooltipTypes';
2
+ declare const TooltipWrapper: ({ label, children, withArrow, size, height, align, position }: TooltipProps) => JSX.Element;
3
+ export default TooltipWrapper;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var React = _interopRequireWildcard(require("react"));
11
+
12
+ var _TooltipStyles = require("./TooltipStyles");
13
+
14
+ var _ = require("..");
15
+
16
+ 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); }
17
+
18
+ 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; }
19
+
20
+ var TooltipWrapper = function TooltipWrapper(_ref) {
21
+ var label = _ref.label,
22
+ children = _ref.children,
23
+ withArrow = _ref.withArrow,
24
+ _ref$size = _ref.size,
25
+ size = _ref$size === void 0 ? _.Size.Small : _ref$size,
26
+ _ref$height = _ref.height,
27
+ height = _ref$height === void 0 ? 'auto' : _ref$height,
28
+ _ref$align = _ref.align,
29
+ align = _ref$align === void 0 ? 'center' : _ref$align,
30
+ _ref$position = _ref.position,
31
+ position = _ref$position === void 0 ? 'bottom' : _ref$position;
32
+ return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, null, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
33
+ align: align,
34
+ height: height,
35
+ size: size,
36
+ withArrow: withArrow,
37
+ position: position
38
+ }, label), children);
39
+ };
40
+
41
+ var _default = TooltipWrapper;
42
+ exports.default = _default;
43
+ //# sourceMappingURL=TooltipWrapper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAMoB;AAAA,MALzCC,KAKyC,QALzCA,KAKyC;AAAA,MALlCC,QAKkC,QALlCA,QAKkC;AAAA,MAJzCC,SAIyC,QAJzCA,SAIyC;AAAA,uBAHzCC,IAGyC;AAAA,MAHzCA,IAGyC,0BAHlCC,OAAKC,KAG6B;AAAA,yBAFzCC,MAEyC;AAAA,MAFzCA,MAEyC,4BAFhC,MAEgC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,oBAAC,+BAAD,qBACC,oBAAC,sBAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACG,IAAA,MAAM,EAAED,MADX;AAEG,IAAA,IAAI,EAAEH,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEM;AAJb,KAKIR,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAlBD;;eAoBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n label, children,\n withArrow,\n size = Size.Small,\n height = 'auto',\n align = 'center', \n position = 'bottom' } : TooltipProps) => {\n \n return <TooltipContainer>\n <Tooltip align={align} \n height={height} \n size={size}\n withArrow={withArrow} \n position={position}>\n {label}\n </Tooltip>\n {children}\n </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
@@ -0,0 +1,3 @@
1
+ import TooltipWrapper from './TooltipWrapper';
2
+ import { TooltipTrigger, TooltipContainer } from './TooltipStyles';
3
+ export { TooltipWrapper, TooltipTrigger, TooltipContainer };
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "TooltipWrapper", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _TooltipWrapper.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "TooltipTrigger", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _TooltipStyles.TooltipTrigger;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "TooltipContainer", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _TooltipStyles.TooltipContainer;
22
+ }
23
+ });
24
+
25
+ var _TooltipWrapper = _interopRequireDefault(require("./TooltipWrapper"));
26
+
27
+ var _TooltipStyles = require("./TooltipStyles");
28
+
29
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Tooltips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import TooltipWrapper from './TooltipWrapper';\nimport {TooltipTrigger, TooltipContainer} from './TooltipStyles';\n\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer };\n"],"file":"index.js"}