@amboss/design-system 1.9.1 → 1.9.5

package/build/cjs/src/components/VirtualScrollList/VirtualScrollList.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var React = require('react');
+var VirtualScrollListReducer = require('./VirtualScrollListReducer.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StyledContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "ebr5g6s1"
+} : {
+  target: "ebr5g6s1",
+  label: "StyledContainer"
+})(_ref => {
+  let {
+    maxHeight
+  } = _ref;
+  return {
+    overflow: "auto",
+    width: "100%",
+    height: "100%",
+    maxHeight
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpcnR1YWxTY3JvbGxMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLd0IiLCJmaWxlIjoiVmlydHVhbFNjcm9sbExpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgUmVhY3QsIHsgdXNlUmVmLCB1c2VSZWR1Y2VyLCB1c2VMYXlvdXRFZmZlY3QsIHVzZUVmZmVjdCB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyBWaXJ0dWFsU2Nyb2xsUmVkdWNlciB9IGZyb20gXCIuL1ZpcnR1YWxTY3JvbGxMaXN0UmVkdWNlclwiO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8VmlydHVhbFNjcm9sbExpc3RQcm9wcz4+KFxuICAoeyBtYXhIZWlnaHQgfSkgPT4gKHtcbiAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgbWF4SGVpZ2h0LFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkU2Nyb2xsYWJsZUNvbnRlbnQgPSBzdHlsZWQuZGl2PHsgbWF4Q29udGVudEhlaWdodDogbnVtYmVyIH0+KFxuICAoeyBtYXhDb250ZW50SGVpZ2h0IH0pID0+ICh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBoZWlnaHQ6IG1heENvbnRlbnRIZWlnaHQsXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBWaXJ0dWFsU2Nyb2xsTGlzdFByb3BzID0ge1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbiAgbWF4SGVpZ2h0OiBudW1iZXI7XG4gIGl0ZW1IZWlnaHQ6IG51bWJlcjtcbiAgaXRlbUFtb3VudDogbnVtYmVyO1xuICBlbXB0eVN0YXRlOiAoKSA9PiBSZWFjdC5SZWFjdE5vZGU7XG4gIGl0ZW1JblZpZXc6IG51bWJlcjtcbiAgaXRlbVRlbXBsYXRlOiAoaW5kZXg6IG51bWJlcikgPT4gUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuY29uc3Qgb3ZlcnNjYW4gPSAxMDtcblxuZXhwb3J0IGZ1bmN0aW9uIFZpcnR1YWxTY3JvbGxMaXN0KHtcbiAgbWF4SGVpZ2h0LFxuICBpdGVtSGVpZ2h0LFxuICBpdGVtQW1vdW50LFxuICBlbXB0eVN0YXRlID0gKCkgPT4gbnVsbCxcbiAgaXRlbUluVmlldyxcbiAgaXRlbVRlbXBsYXRlLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFZpcnR1YWxTY3JvbGxMaXN0UHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBzY3JvbGxhYmxlQ29udGFpbmVyUmVmID0gdXNlUmVmKG51bGwpO1xuICBjb25zdCB2aWV3cG9ydFJlZiA9IHVzZVJlZihudWxsKTtcblxuICBjb25zdCBbXG4gICAge1xuICAgICAgc2Nyb2xsZWRJdGVtQ291bnQsXG4gICAgICBhbW91bnRPZkl0ZW1zSW5WaWV3LFxuICAgICAgc2Nyb2xsZWRJblB4LFxuICAgICAgbWF4Q29udGVudEhlaWdodCA9IG1heEhlaWdodCxcbiAgICAgIHJlY29tbWVuZGVkU2Nyb2xsUG9zaXRpb24sXG4gICAgfSxcbiAgICBkaXNwYXRjaCxcbiAgXSA9IHVzZVJlZHVjZXIoVmlydHVhbFNjcm9sbFJlZHVjZXIsIHt9KTtcblxuICB1c2VMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgIGRpc3BhdGNoKHsgdHlwZTogXCJyZXNldFwiLCBpdGVtSGVpZ2h0LCBtYXhIZWlnaHQsIG92ZXJzY2FuIH0pO1xuICAgIHNjcm9sbGFibGVDb250YWluZXJSZWYuY3VycmVudC5zY3JvbGxUb3AgPSAwO1xuICB9LCBbaXRlbUhlaWdodCwgaXRlbUFtb3VudCwgbWF4SGVpZ2h0XSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBkaXNwYXRjaCh7XG4gICAgICB0eXBlOiBcInJlY29tbWVuZFNjcm9sbFBvc2l0aW9uXCIsXG4gICAgICBzY3JvbGxUb3A6IHNjcm9sbGFibGVDb250YWluZXJSZWYuY3VycmVudC5zY3JvbGxUb3AsXG4gICAgICBpdGVtVG9CZUluVmlldzogaXRlbUluVmlldyxcbiAgICB9KTtcbiAgfSwgW2l0ZW1JblZpZXddKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChyZWNvbW1lbmRlZFNjcm9sbFBvc2l0aW9uID09PSBudWxsKSByZXR1cm47XG5cbiAgICBzY3JvbGxhYmxlQ29udGFpbmVyUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gcmVjb21tZW5kZWRTY3JvbGxQb3NpdGlvbjtcbiAgfSwgW3JlY29tbWVuZGVkU2Nyb2xsUG9zaXRpb25dKTtcbiAgdXNlTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXZpZXdwb3J0UmVmLmN1cnJlbnQpIHJldHVybjtcbiAgICBkaXNwYXRjaCh7XG4gICAgICB0eXBlOiBcInVwZGF0ZVZpZXdwb3J0XCIsXG4gICAgICB2aWV3cG9ydE5vZGU6IHZpZXdwb3J0UmVmLmN1cnJlbnQsXG4gICAgICBpdGVtQW1vdW50LFxuICAgIH0pO1xuICB9LCBbaXRlbUFtb3VudCwgc2Nyb2xsZWRJdGVtQ291bnRdKTtcblxuICBjb25zdCBpdGVtQ291bnRUb0JlUmVuZGVyZWQgPSBNYXRoLm1pbihcbiAgICBNYXRoLm1heCgwLCBpdGVtQW1vdW50IC0gc2Nyb2xsZWRJdGVtQ291bnQpLFxuICAgIGFtb3VudE9mSXRlbXNJblZpZXdcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIHJlZj17c2Nyb2xsYWJsZUNvbnRhaW5lclJlZn1cbiAgICAgIG1heEhlaWdodD17bWF4SGVpZ2h0fVxuICAgICAgc3R5bGU9e3sgbWF4SGVpZ2h0IH19XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgb25TY3JvbGw9eyhlOiBSZWFjdC5VSUV2ZW50PEhUTUxFbGVtZW50PikgPT4ge1xuICAgICAgICBkaXNwYXRjaCh7XG4gICAgICAgICAgdHlwZTogXCJzY3JvbGxcIixcbiAgICAgICAgICBzY3JvbGxUb3A6IGUuY3VycmVudFRhcmdldC5zY3JvbGxUb3AsXG4gICAgICAgIH0pO1xuICAgICAgfX1cbiAgICA+XG4gICAgICB7aXRlbUFtb3VudCA9PT0gMCA/IChcbiAgICAgICAgZW1wdHlTdGF0ZSgpXG4gICAgICApIDogKFxuICAgICAgICA8U3R5bGVkU2Nyb2xsYWJsZUNvbnRlbnQgbWF4Q29udGVudEhlaWdodD17bWF4Q29udGVudEhlaWdodH0+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgcmVmPXt2aWV3cG9ydFJlZn1cbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoJHtzY3JvbGxlZEluUHh9cHhgLFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7ISFpdGVtQ291bnRUb0JlUmVuZGVyZWQgJiZcbiAgICAgICAgICAgICAgbmV3IEFycmF5KGl0ZW1Db3VudFRvQmVSZW5kZXJlZClcbiAgICAgICAgICAgICAgICAuZmlsbCgwKVxuICAgICAgICAgICAgICAgIC5tYXAoKF8sIGluZGV4KSA9PiBpdGVtVGVtcGxhdGUoc2Nyb2xsZWRJdGVtQ291bnQgKyBpbmRleCkpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L1N0eWxlZFNjcm9sbGFibGVDb250ZW50PlxuICAgICAgKX1cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */");
+const StyledScrollableContent = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "ebr5g6s0"
+} : {
+  target: "ebr5g6s0",
+  label: "StyledScrollableContent"
+})(_ref2 => {
+  let {
+    maxContentHeight
+  } = _ref2;
+  return {
+    overflow: "hidden",
+    boxSizing: "border-box",
+    height: maxContentHeight
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpcnR1YWxTY3JvbGxMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjZ0MiLCJmaWxlIjoiVmlydHVhbFNjcm9sbExpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgUmVhY3QsIHsgdXNlUmVmLCB1c2VSZWR1Y2VyLCB1c2VMYXlvdXRFZmZlY3QsIHVzZUVmZmVjdCB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyBWaXJ0dWFsU2Nyb2xsUmVkdWNlciB9IGZyb20gXCIuL1ZpcnR1YWxTY3JvbGxMaXN0UmVkdWNlclwiO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8VmlydHVhbFNjcm9sbExpc3RQcm9wcz4+KFxuICAoeyBtYXhIZWlnaHQgfSkgPT4gKHtcbiAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgbWF4SGVpZ2h0LFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkU2Nyb2xsYWJsZUNvbnRlbnQgPSBzdHlsZWQuZGl2PHsgbWF4Q29udGVudEhlaWdodDogbnVtYmVyIH0+KFxuICAoeyBtYXhDb250ZW50SGVpZ2h0IH0pID0+ICh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBoZWlnaHQ6IG1heENvbnRlbnRIZWlnaHQsXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBWaXJ0dWFsU2Nyb2xsTGlzdFByb3BzID0ge1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbiAgbWF4SGVpZ2h0OiBudW1iZXI7XG4gIGl0ZW1IZWlnaHQ6IG51bWJlcjtcbiAgaXRlbUFtb3VudDogbnVtYmVyO1xuICBlbXB0eVN0YXRlOiAoKSA9PiBSZWFjdC5SZWFjdE5vZGU7XG4gIGl0ZW1JblZpZXc6IG51bWJlcjtcbiAgaXRlbVRlbXBsYXRlOiAoaW5kZXg6IG51bWJlcikgPT4gUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuY29uc3Qgb3ZlcnNjYW4gPSAxMDtcblxuZXhwb3J0IGZ1bmN0aW9uIFZpcnR1YWxTY3JvbGxMaXN0KHtcbiAgbWF4SGVpZ2h0LFxuICBpdGVtSGVpZ2h0LFxuICBpdGVtQW1vdW50LFxuICBlbXB0eVN0YXRlID0gKCkgPT4gbnVsbCxcbiAgaXRlbUluVmlldyxcbiAgaXRlbVRlbXBsYXRlLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFZpcnR1YWxTY3JvbGxMaXN0UHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBzY3JvbGxhYmxlQ29udGFpbmVyUmVmID0gdXNlUmVmKG51bGwpO1xuICBjb25zdCB2aWV3cG9ydFJlZiA9IHVzZVJlZihudWxsKTtcblxuICBjb25zdCBbXG4gICAge1xuICAgICAgc2Nyb2xsZWRJdGVtQ291bnQsXG4gICAgICBhbW91bnRPZkl0ZW1zSW5WaWV3LFxuICAgICAgc2Nyb2xsZWRJblB4LFxuICAgICAgbWF4Q29udGVudEhlaWdodCA9IG1heEhlaWdodCxcbiAgICAgIHJlY29tbWVuZGVkU2Nyb2xsUG9zaXRpb24sXG4gICAgfSxcbiAgICBkaXNwYXRjaCxcbiAgXSA9IHVzZVJlZHVjZXIoVmlydHVhbFNjcm9sbFJlZHVjZXIsIHt9KTtcblxuICB1c2VMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgIGRpc3BhdGNoKHsgdHlwZTogXCJyZXNldFwiLCBpdGVtSGVpZ2h0LCBtYXhIZWlnaHQsIG92ZXJzY2FuIH0pO1xuICAgIHNjcm9sbGFibGVDb250YWluZXJSZWYuY3VycmVudC5zY3JvbGxUb3AgPSAwO1xuICB9LCBbaXRlbUhlaWdodCwgaXRlbUFtb3VudCwgbWF4SGVpZ2h0XSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBkaXNwYXRjaCh7XG4gICAgICB0eXBlOiBcInJlY29tbWVuZFNjcm9sbFBvc2l0aW9uXCIsXG4gICAgICBzY3JvbGxUb3A6IHNjcm9sbGFibGVDb250YWluZXJSZWYuY3VycmVudC5zY3JvbGxUb3AsXG4gICAgICBpdGVtVG9CZUluVmlldzogaXRlbUluVmlldyxcbiAgICB9KTtcbiAgfSwgW2l0ZW1JblZpZXddKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChyZWNvbW1lbmRlZFNjcm9sbFBvc2l0aW9uID09PSBudWxsKSByZXR1cm47XG5cbiAgICBzY3JvbGxhYmxlQ29udGFpbmVyUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gcmVjb21tZW5kZWRTY3JvbGxQb3NpdGlvbjtcbiAgfSwgW3JlY29tbWVuZGVkU2Nyb2xsUG9zaXRpb25dKTtcbiAgdXNlTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXZpZXdwb3J0UmVmLmN1cnJlbnQpIHJldHVybjtcbiAgICBkaXNwYXRjaCh7XG4gICAgICB0eXBlOiBcInVwZGF0ZVZpZXdwb3J0XCIsXG4gICAgICB2aWV3cG9ydE5vZGU6IHZpZXdwb3J0UmVmLmN1cnJlbnQsXG4gICAgICBpdGVtQW1vdW50LFxuICAgIH0pO1xuICB9LCBbaXRlbUFtb3VudCwgc2Nyb2xsZWRJdGVtQ291bnRdKTtcblxuICBjb25zdCBpdGVtQ291bnRUb0JlUmVuZGVyZWQgPSBNYXRoLm1pbihcbiAgICBNYXRoLm1heCgwLCBpdGVtQW1vdW50IC0gc2Nyb2xsZWRJdGVtQ291bnQpLFxuICAgIGFtb3VudE9mSXRlbXNJblZpZXdcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIHJlZj17c2Nyb2xsYWJsZUNvbnRhaW5lclJlZn1cbiAgICAgIG1heEhlaWdodD17bWF4SGVpZ2h0fVxuICAgICAgc3R5bGU9e3sgbWF4SGVpZ2h0IH19XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgb25TY3JvbGw9eyhlOiBSZWFjdC5VSUV2ZW50PEhUTUxFbGVtZW50PikgPT4ge1xuICAgICAgICBkaXNwYXRjaCh7XG4gICAgICAgICAgdHlwZTogXCJzY3JvbGxcIixcbiAgICAgICAgICBzY3JvbGxUb3A6IGUuY3VycmVudFRhcmdldC5zY3JvbGxUb3AsXG4gICAgICAgIH0pO1xuICAgICAgfX1cbiAgICA+XG4gICAgICB7aXRlbUFtb3VudCA9PT0gMCA/IChcbiAgICAgICAgZW1wdHlTdGF0ZSgpXG4gICAgICApIDogKFxuICAgICAgICA8U3R5bGVkU2Nyb2xsYWJsZUNvbnRlbnQgbWF4Q29udGVudEhlaWdodD17bWF4Q29udGVudEhlaWdodH0+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgcmVmPXt2aWV3cG9ydFJlZn1cbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgIHRyYW5zZm9ybTogYHRyYW5zbGF0ZVkoJHtzY3JvbGxlZEluUHh9cHhgLFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7ISFpdGVtQ291bnRUb0JlUmVuZGVyZWQgJiZcbiAgICAgICAgICAgICAgbmV3IEFycmF5KGl0ZW1Db3VudFRvQmVSZW5kZXJlZClcbiAgICAgICAgICAgICAgICAuZmlsbCgwKVxuICAgICAgICAgICAgICAgIC5tYXAoKF8sIGluZGV4KSA9PiBpdGVtVGVtcGxhdGUoc2Nyb2xsZWRJdGVtQ291bnQgKyBpbmRleCkpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L1N0eWxlZFNjcm9sbGFibGVDb250ZW50PlxuICAgICAgKX1cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */");
+const overscan = 10;
+function VirtualScrollList(_ref3) {
+  let {
+    maxHeight,
+    itemHeight,
+    itemAmount,
+    emptyState = () => null,
+    itemInView,
+    itemTemplate,
+    "data-e2e-test-id": dataE2eTestId
+  } = _ref3;
+  const scrollableContainerRef = React.useRef(null);
+  const viewportRef = React.useRef(null);
+  const [{
+    scrolledItemCount,
+    amountOfItemsInView,
+    scrolledInPx,
+    maxContentHeight = maxHeight,
+    recommendedScrollPosition
+  }, dispatch] = React.useReducer(VirtualScrollListReducer.VirtualScrollReducer, {});
+  React.useLayoutEffect(() => {
+    dispatch({
+      type: "reset",
+      itemHeight,
+      maxHeight,
+      overscan
+    });
+    scrollableContainerRef.current.scrollTop = 0;
+  }, [itemHeight, itemAmount, maxHeight]);
+  React.useEffect(() => {
+    dispatch({
+      type: "recommendScrollPosition",
+      scrollTop: scrollableContainerRef.current.scrollTop,
+      itemToBeInView: itemInView
+    });
+  }, [itemInView]);
+  React.useEffect(() => {
+    if (recommendedScrollPosition === null) return;
+    scrollableContainerRef.current.scrollTop = recommendedScrollPosition;
+  }, [recommendedScrollPosition]);
+  React.useLayoutEffect(() => {
+    if (!viewportRef.current) return;
+    dispatch({
+      type: "updateViewport",
+      viewportNode: viewportRef.current,
+      itemAmount
+    });
+  }, [itemAmount, scrolledItemCount]);
+  const itemCountToBeRendered = Math.min(Math.max(0, itemAmount - scrolledItemCount), amountOfItemsInView);
+  return /*#__PURE__*/React__default.default.createElement(StyledContainer, {
+    ref: scrollableContainerRef,
+    maxHeight: maxHeight,
+    style: {
+      maxHeight
+    },
+    "data-e2e-test-id": dataE2eTestId,
+    onScroll: e => {
+      dispatch({
+        type: "scroll",
+        scrollTop: e.currentTarget.scrollTop
+      });
+    }
+  }, itemAmount === 0 ? emptyState() : /*#__PURE__*/React__default.default.createElement(StyledScrollableContent, {
+    maxContentHeight: maxContentHeight
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: viewportRef,
+    style: {
+      transform: `translateY(${scrolledInPx}px`
+    }
+  }, !!itemCountToBeRendered && new Array(itemCountToBeRendered).fill(0).map((_, index) => itemTemplate(scrolledItemCount + index)))));
+}
+
+exports.VirtualScrollList = VirtualScrollList;

package/build/cjs/src/components/VirtualScrollList/VirtualScrollListReducer.js

@@ -0,0 +1,131 @@
+'use strict';
+
+const findClosestOffsetIndex = (arr, val) => {
+  let start = 0;
+  let end = arr.length - 1;
+  let mid = Math.floor((start + end) / 2);
+  while (start <= end) {
+    mid = Math.floor((start + end) / 2);
+    if (arr[mid].amount === val) {
+      return mid;
+    }
+    if (val < arr[mid].amount) {
+      end = mid - 1;
+    } else {
+      start = mid + 1;
+    }
+  }
+  return mid;
+};
+const getMaxHeight = function (maxAmountOfItems, offsets) {
+  let lastItemHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const amountOfOffsets = Math.min(offsets.length, maxAmountOfItems);
+  const maxOffset = offsets[amountOfOffsets - 1]?.amount || 0;
+  const result = maxOffset + lastItemHeight;
+  return result;
+};
+const reduceScroll = (prevState, scrollTop) => {
+  const {
+    topOffsets,
+    overscan: tolerance
+  } = prevState;
+  const scrolledItemCount = Math.max(0, findClosestOffsetIndex(topOffsets, scrollTop) - tolerance / 2);
+  const scrolledInPx = topOffsets[scrolledItemCount]?.amount || 0;
+  return {
+    ...prevState,
+    scrolledItemCount,
+    scrolledInPx
+  };
+};
+const reduceUpdateViewport = (prevState, viewportNode, itemAmount) => {
+  const {
+    topOffsets = [],
+    scrolledInPx,
+    scrolledItemCount,
+    avgItemHeight,
+    lastItemHeight,
+    maxHeight,
+    overscan: tolerance
+  } = prevState;
+  const newTopOffsets = [...topOffsets];
+  let updatedLastItemHeight = lastItemHeight;
+  Array.from(viewportNode.children).forEach((child, i) => {
+    newTopOffsets[i + scrolledItemCount] = {
+      amount: scrolledInPx + child.offsetTop,
+      isInterpolated: false
+    };
+    if (i + scrolledItemCount === itemAmount - 1 && !lastItemHeight) {
+      updatedLastItemHeight = child.getBoundingClientRect().height;
+    }
+  });
+  for (let i = 0; i < itemAmount; i += 1) {
+    if (!newTopOffsets[i] || newTopOffsets[i].isInterpolated) {
+      newTopOffsets[i] = {
+        amount: newTopOffsets[i - 1].amount + avgItemHeight,
+        isInterpolated: true
+      };
+    }
+  }
+  const newAvgItemHeight = Math.max(avgItemHeight, viewportNode.getBoundingClientRect().height / (viewportNode.childElementCount || 1));
+  const maxContentHeight = getMaxHeight(itemAmount, newTopOffsets, updatedLastItemHeight);
+  return {
+    ...prevState,
+    lastItemHeight: updatedLastItemHeight,
+    avgItemHeight,
+    topOffsets: newTopOffsets,
+    amountOfItemsInView: Math.round(maxHeight / newAvgItemHeight) + tolerance,
+    maxContentHeight
+  };
+};
+const reduceReset = (prevState, itemHeight, maxHeight, overscan) => ({
+  ...prevState,
+  lastItemHeight: null,
+  topOffsets: [{
+    amount: 0,
+    isInterpolated: false
+  }],
+  scrolledInPx: 0,
+  scrolledItemCount: 0,
+  maxHeight,
+  avgItemHeight: itemHeight,
+  overscan
+});
+const reduceRecommendScrollPosition = (prevState, scrollTop, itemToBeInView) => {
+  const {
+    topOffsets,
+    maxHeight
+  } = prevState;
+  if (!topOffsets) return prevState;
+  const bottomOfTarget = topOffsets[itemToBeInView + 1]?.amount;
+  const topOfTarget = topOffsets[itemToBeInView]?.amount;
+  let recommendedScrollPosition = null;
+  if (topOfTarget < scrollTop) {
+    recommendedScrollPosition = topOfTarget;
+  }
+  if (bottomOfTarget >= scrollTop + maxHeight) {
+    recommendedScrollPosition = bottomOfTarget - maxHeight;
+  }
+  if (itemToBeInView === topOffsets.length - 1) {
+    recommendedScrollPosition = topOffsets[itemToBeInView].amount;
+  }
+  return {
+    ...prevState,
+    recommendedScrollPosition
+  };
+};
+const VirtualScrollReducer = (prevState, action) => {
+  switch (action.type) {
+    case "reset":
+      return reduceReset(prevState, action.itemHeight, action.maxHeight, action.overscan);
+    case "scroll":
+      return reduceScroll(prevState, action.scrollTop);
+    case "updateViewport":
+      return reduceUpdateViewport(prevState, action.viewportNode, action.itemAmount);
+    case "recommendScrollPosition":
+      return reduceRecommendScrollPosition(prevState, action.scrollTop, action.itemToBeInView);
+    default:
+      throw new Error();
+  }
+};
+
+exports.VirtualScrollReducer = VirtualScrollReducer;

package/build/cjs/src/index.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var visualConfig = require('../build-tokens/visualConfig.js');
+var react = require('@emotion/react');
+var cache = require('@emotion/cache');
+var Card = require('./components/Card/Card.js');
+var CardBox = require('./components/Card/CardBox.js');
+var Box = require('./components/Box/Box.js');
+var Inline = require('./components/Inline/Inline.js');
+var Stack = require('./components/Stack/Stack.js');
+var Header = require('./components/Typography/Header/Header.js');
+var Text = require('./components/Typography/Text/Text.js');
+var TextClamped = require('./components/Typography/TextClamped/TextClamped.js');
+var StyledText = require('./components/Typography/StyledText/StyledText.js');
+var Link = require('./components/Link/Link.js');
+var Icon = require('./components/Icon/Icon.js');
+var Button = require('./components/Button/Button.js');
+var Divider = require('./components/Divider/Divider.js');
+var Columns = require('./components/Column/Columns.js');
+var Tabs = require('./components/Tabs/Tabs.js');
+var Badge = require('./components/Badge/Badge.js');
+var SearchResult = require('./components/SearchResult/SearchResult.js');
+var ToggleButton = require('./components/Form/ToggleButton/ToggleButton.js');
+var DropdownMenu = require('./components/DropdownMenu/DropdownMenu.js');
+var FormFieldGroup = require('./components/Form/FormFieldGroup/FormFieldGroup.js');
+var Input = require('./components/Form/Input/Input.js');
+var Checkbox = require('./components/Form/Checkbox/Checkbox.js');
+var Toggle = require('./components/Form/Toggle/Toggle.js');
+var Radio = require('./components/Form/Radio/Radio.js');
+var RadioButton = require('./components/Form/RadioButton/RadioButton.js');
+var Textarea = require('./components/Form/Textarea/Textarea.js');
+var Select = require('./components/Form/Select/Select.js');
+var SubThemeProvider = require('./components/SubThemeProvider/SubThemeProvider.js');
+var PictogramButton = require('./components/PictogramButton/PictogramButton.js');
+var MediaViewerBar = require('./components/MediaViewerBar/MediaViewerBar.js');
+var SegmentedProgressBar = require('./components/SegmentedProgressBar/SegmentedProgressBar.js');
+var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
+var Container = require('./components/Container/Container.js');
+var PasswordInput = require('./components/Form/PasswordInput/PasswordInput.js');
+var RoundButton = require('./components/RoundButton/RoundButton.js');
+var Notification = require('./components/Notification/Notification.js');
+var Logo = require('./components/Logo/Logo.js');
+var MediaItem = require('./components/MediaItem/MediaItem.js');
+var Callout = require('./components/Callout/Callout.js');
+var Modal = require('./components/Patterns/Modal/Modal.js');
+var ButtonGroup = require('./components/Patterns/ButtonGroup/ButtonGroup.js');
+var Collapsible = require('./components/Collapsible/Collapsible.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cache__default = /*#__PURE__*/_interopDefault(cache);
+
+const {
+  dark,
+  light
+} = visualConfig.ambossVisualConfiguration;
+
+Object.defineProperty(exports, 'CacheProvider', {
+  enumerable: true,
+  get: function () { return react.CacheProvider; }
+});
+Object.defineProperty(exports, 'ThemeProvider', {
+  enumerable: true,
+  get: function () { return react.ThemeProvider; }
+});
+Object.defineProperty(exports, 'createCache', {
+  enumerable: true,
+  get: function () { return cache__default.default; }
+});
+exports.Card = Card.Card;
+exports.CardBox = CardBox.CardBox;
+exports.Box = Box.Box;
+exports.Inline = Inline.Inline;
+exports.Stack = Stack.Stack;
+exports.H1 = Header.H1;
+exports.H2 = Header.H2;
+exports.H3 = Header.H3;
+exports.H4 = Header.H4;
+exports.H5 = Header.H5;
+exports.H6 = Header.H6;
+exports.Text = Text.Text;
+exports.TextClamped = TextClamped.TextClamped;
+exports.StyledText = StyledText.StyledText;
+exports.Link = Link.Link;
+exports.Icon = Icon.Icon;
+exports.Button = Button.Button;
+exports.Divider = Divider.Divider;
+exports.Column = Columns.Column;
+exports.Columns = Columns.Columns;
+exports.Tabs = Tabs.Tabs;
+exports.Badge = Badge.Badge;
+exports.SearchResult = SearchResult.SearchResult;
+exports.ToggleButton = ToggleButton.ToggleButton;
+exports.DropdownMenu = DropdownMenu.DropdownMenu;
+exports.FormFieldGroup = FormFieldGroup.FormFieldGroup;
+exports.Input = Input.Input;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Toggle = Toggle.Toggle;
+exports.Radio = Radio.Radio;
+exports.RadioButton = RadioButton.RadioButton;
+exports.Textarea = Textarea.Textarea;
+exports.Select = Select.Select;
+exports.SubThemeProvider = SubThemeProvider.SubThemeProvider;
+exports.PictogramButton = PictogramButton.PictogramButton;
+exports.MediaViewerBar = MediaViewerBar.MediaViewerBar;
+exports.SegmentedProgressBar = SegmentedProgressBar.SegmentedProgressBar;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.Container = Container.Container;
+exports.PasswordInput = PasswordInput.PasswordInput;
+exports.RoundButton = RoundButton.RoundButton;
+exports.Notification = Notification.Notification;
+exports.Logo = Logo.Logo;
+exports.MediaItem = MediaItem.MediaItem;
+exports.Callout = Callout.Callout;
+exports.Modal = Modal.Modal;
+exports.ButtonGroup = ButtonGroup.ButtonGroup;
+exports.Collapsible = Collapsible.Collapsible;
+exports.CollapsibleHeader = Collapsible.CollapsibleHeader;
+exports.dark = dark;
+exports.light = light;

package/build/cjs/src/shared/flattenChildren.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var reactIs = require('react-is');
+
+/**
+ * Copied from https://github.com/grrowl/react-keyed-flatten-children (since ESM import doesn't work with the module)
+ *
+ * Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray),
+ * this utility takes children and returns them as an array for introspection or filtering.
+ *
+ * Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional
+ * array while ensuring element and fragment keys are preserved, unique, and stable between renders.
+ */
+
+const flattenChildren = function (children) {
+  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return React.Children.toArray(children).reduce((acc, node, nodeIndex) => {
+    if (reactIs.isFragment(node)) {
+      acc.push(...flattenChildren(node.props.children, depth + 1, keys.concat(String(node.key || nodeIndex))));
+    } else if ( /*#__PURE__*/React.isValidElement(node)) {
+      acc.push( /*#__PURE__*/React.cloneElement(node, {
+        key: keys.concat(String(node.key)).join(".")
+      }));
+    } else if (typeof node === "string" || typeof node === "number") {
+      acc.push(node);
+    }
+    return acc;
+  }, []);
+};
+
+exports.flattenChildren = flattenChildren;

package/build/cjs/src/shared/informDeprecation.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const informDeprecation = function (property, value, location) {
+  let details = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
+  if (property === undefined) return;
+  if (property === value) {
+    // eslint-disable-next-line no-console
+    console.error(`value ${JSON.stringify(value)} is depricated in ${location} \n ${details}`);
+  }
+};
+
+exports.informDeprecation = informDeprecation;

package/build/cjs/src/shared/mediaQueries.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var _breakpoints = require('../../build-tokens/_breakpoints.json.js');
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/*
+ Although, mq implementation supports any property type, the following types are specified to provide type safety. If you need support for a new type, add it here.
+*/
+
+// this thing probably deserves to be a separate library, like facepaint for emotion
+function getMq(breakpointRules) {
+  const keys = breakpointRules;
+  return rules => {
+    const res = {};
+    keys.forEach(key => {
+      res[key] = {};
+    });
+    res[`@media screen`] = {};
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Object.entries(rules).forEach(_ref => {
+      let [cssProperty, [prop, map]] = _ref;
+      if (Array.isArray(prop)) {
+        const sm = prop[0];
+        const md = prop[1] || prop[0];
+        const lg = prop[2] || prop[1] || prop[0];
+        const [s, m, l] = keys;
+        res[s][cssProperty] = map[sm];
+        res[m][cssProperty] = map[md];
+        res[l][cssProperty] = map[lg];
+      } else {
+        res[`@media screen`][cssProperty] = map[prop];
+      }
+    });
+    return res;
+  };
+}
+const mq = getMq([`@media (max-width: ${_breakpoints.default[1].value}px)`, `@media (min-width: ${_breakpoints.default[1].value}px) and (max-width: ${_breakpoints.default[2].value}px)`, `@media (min-width: ${_breakpoints.default[2].value}px)`]);
+function getMqValue(breakpointRules) {
+  const keys = breakpointRules;
+  return rules => {
+    const res = {};
+    keys.forEach(key => {
+      res[key] = {};
+    });
+    res[`@media screen`] = {};
+    Object.entries(rules).forEach(_ref2 => {
+      let [cssProperty, cssValues] = _ref2;
+      if (Array.isArray(cssValues)) {
+        breakpointRules.forEach((breakpoint, index) => {
+          let i = index;
+          while (!cssValues[i] && i !== 0) {
+            i -= 1;
+          }
+          res[breakpoint][cssProperty] = cssValues[i];
+        });
+      } else {
+        res[`@media screen`][cssProperty] = cssValues;
+      }
+    });
+    return res;
+  };
+}
+const mqValue = getMqValue([`@media (max-width: ${_breakpoints.default[1].value}px)`, `@media (min-width: ${_breakpoints.default[1].value}px) and (max-width: ${_breakpoints.default[2].value}px)`, `@media (min-width: ${_breakpoints.default[2].value}px)`]);
+
+exports.mq = mq;
+exports.mqValue = mqValue;

package/build/cjs/src/shared/useAutoPosition.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var useWindow = require('./useWindow.js');
+var useDocument = require('./useDocument.js');
+
+const useAutoPosition = (anchorRef, contentRef, isActive) => {
+  const [verticalPosition, setVerticalPosition] = React.useState("down");
+  const [horizontalPosition, setHorizontalPosition] = React.useState("left");
+  const document = useDocument.useDocument();
+  const window = useWindow.useWindow();
+  React.useLayoutEffect(() => {
+    if (!contentRef) return;
+    if (isActive) {
+      const maxHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+      const rect = contentRef.current.getBoundingClientRect();
+      const anchorHeight = anchorRef.current.getBoundingClientRect().height;
+      const anchorX = anchorRef.current.getBoundingClientRect().x;
+      const screenWidth = window.innerWidth;
+      const isUp = rect.top + rect.height > maxHeight;
+      const isDown = rect.top - anchorHeight < rect.height;
+      const isLeft = anchorX > screenWidth / 2;
+      const isRight = anchorX < screenWidth / 2;
+      if (isUp) {
+        setVerticalPosition("up");
+      } else if (isDown) {
+        setVerticalPosition("down");
+      }
+      if (isLeft) {
+        setHorizontalPosition("left");
+      } else if (isRight) {
+        setHorizontalPosition("right");
+      }
+    } else {
+      setVerticalPosition("down");
+      setHorizontalPosition("left");
+    }
+  }, [anchorRef, contentRef, document.documentElement.clientHeight, isActive, window.innerHeight, window.innerWidth]);
+  return [verticalPosition, horizontalPosition];
+};
+
+exports.useAutoPosition = useAutoPosition;

package/build/cjs/src/shared/useDocument.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function useDocument() {
+  return document;
+}
+
+exports.useDocument = useDocument;

package/build/cjs/src/shared/useHover.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+function useHover(ref) {
+  const [hovered, setHovered] = React.useState(false);
+  const handleMouseOver = () => setHovered(true);
+  const handleMouseOut = () => setHovered(false);
+  React.useEffect(() => {
+    if (!ref) return undefined;
+    const node = ref.current;
+    if (node) {
+      node.addEventListener("mouseover", handleMouseOver);
+      node.addEventListener("mouseout", handleMouseOut);
+      return () => {
+        node.removeEventListener("mouseover", handleMouseOver);
+        node.removeEventListener("mouseout", handleMouseOut);
+      };
+    }
+    return undefined;
+  }, [ref]);
+  if (!ref) return null;
+  return hovered;
+}
+
+exports.useHover = useHover;

package/build/cjs/src/shared/useKeyboard.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var useDocument = require('./useDocument.js');
+
+/**
+ * useKeyboard handles activation of keyboard hotkeys on a given element.
+ * @param {Record<string, (e: KeyboardEvent) => {}} config - A map of keyboardEvent code to function.
+ * @param {RefObject} ref - The element which the keyboard config has to apply on.
+ * @param {boolean} isActive - A flag to determine when the keyboard config has to be applied.
+ *
+ * Example:
+ * useKeyboard({
+ *  Escape: closeMenu,
+ *  ArrowUp: () => { doSomething() },
+ *  KeyB: () => { console.log("bagi") },
+ * }, menuRef, menuOpen)
+ *
+ * This mean that these keyboard shortcuts will be applied on menuRef when the menu is opened.
+ */
+
+function useKeyboard(config, ref, isActive) {
+  const document = useDocument.useDocument();
+  const handleKeyboard = event => {
+    if (!isActive) return;
+    if (document.activeElement !== ref.current && !ref.current.contains(document.activeElement)) return;
+    const targetConfigKey = Object.keys(config).find(targetKeys => targetKeys.split(" ").includes(event.code));
+    if (!targetConfigKey) return;
+    event.preventDefault();
+    const res = config[targetConfigKey](event);
+    if (res === false) {
+      event.stopPropagation();
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener("keydown", handleKeyboard);
+    return () => {
+      document.removeEventListener("keydown", handleKeyboard);
+    };
+  });
+}
+
+exports.useKeyboard = useKeyboard;

package/build/cjs/src/shared/useOnEscapePress.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+var useDocument = require('./useDocument.js');
+
+const registry = {};
+const handleEscape = event => {
+  if (!event.defaultPrevented) {
+    const handlers = Object.values(registry).reverse();
+    for (let i = 0; i < handlers.length; i += 1) {
+      const handler = handlers[i];
+      handler(event);
+      if (event.defaultPrevented) break;
+    }
+  }
+};
+const register = (id, handler) => {
+  registry[id] = handler;
+};
+const deregister = id => {
+  delete registry[id];
+};
+
+// For auto-incrementing unique identifiers for registered different handlers.
+let handlerId = 0;
+const useOnEscapePress = function (onEscape) {
+  let callbackDependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [onEscape];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const escapeCallback = React.useCallback(onEscape, callbackDependencies);
+  const document = useDocument.useDocument();
+  const handler = React.useCallback(event => {
+    if (event.key === "Escape") escapeCallback(event);
+  }, [escapeCallback]);
+  const id = React.useMemo(() => {
+    handlerId += 1;
+    return handlerId;
+  }, []);
+  React.useEffect(() => {
+    if (Object.keys(registry).length === 0) {
+      document.addEventListener("keydown", handleEscape);
+    }
+    register(id, handler);
+    return () => {
+      deregister(id);
+      if (Object.keys(registry).length === 0) {
+        document.removeEventListener("keydown", handleEscape);
+      }
+    };
+  }, [id, handler, document]);
+};
+
+exports.useOnEscapePress = useOnEscapePress;