@equinor/eds-core-react 0.23.0-dev.20221003 → 0.24.0-dev.20221006

package/dist/esm/components/Menu/Menu.tokens.js

@@ -1,53 +1,23 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background
-      }
-    },
-    interactive: {
-      primary__selected_highlight: {
-        rgba: activeBackground
-      },
-      primary__resting: {
-        rgba: activeTextColor
-      },
-      focus: {
-        rgba: focusColor
-      },
-      disabled__fill: {
-        rgba: disabledIconColor
-      },
-      disabled__text: {
-        rgba: disabledTextColor
-      },
-      table__header__fill_hover: {
-        rgba: hoverBackground
-      }
-    },
-    text: {
-      static_icons__default: {
-        rgba: textColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium,
-      large,
-      small
-    }
-  },
-  typography: {
-    navigation: {
-      menu_title: typography
-    }
-  }
-} = tokens;
-const menu = {
-  background,
+var _tokens$colors = tokens.colors,
+    background = _tokens$colors.ui.background__default.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    activeBackground = _tokens$colors$intera.primary__selected_highlight.rgba,
+    activeTextColor = _tokens$colors$intera.primary__resting.rgba,
+    focusColor = _tokens$colors$intera.focus.rgba,
+    disabledIconColor = _tokens$colors$intera.disabled__fill.rgba,
+    disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
+    hoverBackground = _tokens$colors$intera.table__header__fill_hover.rgba,
+    textColor = _tokens$colors.text.static_icons__default.rgba,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    medium = _tokens$spacings$comf.medium,
+    large = _tokens$spacings$comf.large,
+    small = _tokens$spacings$comf.small,
+    typography = tokens.typography.navigation.menu_title;
+var menu = {
+  background: background,
   spacings: {
     top: small,
     bottom: small,
@@ -58,9 +28,9 @@ const menu = {
     type: 'border',
     radius: '4px'
   },
-  typography: { ...typography,
+  typography: _objectSpread(_objectSpread({}, typography), {}, {
     color: textColor
-  },
+  }),
   entities: {
     icon: {
       states: {
@@ -80,9 +50,9 @@ const menu = {
       },
       states: {
         active: {
-          typography: { ...typography,
+          typography: _objectSpread(_objectSpread({}, typography), {}, {
             color: activeTextColor
-          },
+          }),
           background: activeBackground
         },
         focus: {
@@ -98,9 +68,9 @@ const menu = {
           background: hoverBackground
         },
         disabled: {
-          typography: { ...typography,
+          typography: _objectSpread(_objectSpread({}, typography), {}, {
             color: disabledTextColor
-          }
+          })
         }
       }
     },

package/dist/esm/components/Menu/MenuItem.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { menu } from './Menu.tokens.js';
@@ -5,24 +7,17 @@ import { typographyTemplate, spacingsTemplate, outlineTemplate, mergeRefs } from
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  typography,
-  entities: {
-    item: {
-      states: {
-        active: activeToken,
-        focus,
-        hover,
-        disabled: disabledToken
-      }
-    },
-    icon
-  }
-} = menu;
-const Item = styled.button.attrs(_ref => {
-  let {
-    isFocused
-  } = _ref;
+var _excluded = ["children", "disabled", "index", "onClick"];
+var typography = menu.typography,
+    _tokens$entities = menu.entities,
+    _tokens$entities$item = _tokens$entities.item.states,
+    activeToken = _tokens$entities$item.active,
+    focus = _tokens$entities$item.focus,
+    hover = _tokens$entities$item.hover,
+    disabledToken = _tokens$entities$item.disabled,
+    icon = _tokens$entities.icon;
+var Item = styled.button.attrs(function (_ref) {
+  var isFocused = _ref.isFocused;
   return {
     role: 'menuitem',
     tabIndex: isFocused ? -1 : 0
@@ -30,63 +25,60 @@ const Item = styled.button.attrs(_ref => {
 }).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), _ref2 => {
-  let {
-    theme
-  } = _ref2;
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), function (_ref2) {
+  var theme = _ref2.theme;
   return spacingsTemplate(theme.entities.item.spacings);
-}, _ref3 => {
-  let {
-    active
-  } = _ref3;
+}, function (_ref3) {
+  var active = _ref3.active;
   return active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
-}, _ref4 => {
-  let {
-    disabled
-  } = _ref4;
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
   return disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline));
 });
-const Content = styled.div.withConfig({
+var Content = styled.div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
-  let {
-    children,
-    disabled,
-    index = 0,
-    onClick,
-    ...rest
-  } = _ref5;
-  const {
-    focusedIndex,
-    setFocusedIndex,
-    onClose
-  } = useMenu();
+var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
+  var children = _ref5.children,
+      disabled = _ref5.disabled,
+      _ref5$index = _ref5.index,
+      index = _ref5$index === void 0 ? 0 : _ref5$index,
+      _onClick = _ref5.onClick,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+
+  var _useMenu = useMenu(),
+      focusedIndex = _useMenu.focusedIndex,
+      setFocusedIndex = _useMenu.setFocusedIndex,
+      onClose = _useMenu.onClose;
 
-  const toggleFocus = index_ => {
+  var toggleFocus = function toggleFocus(index_) {
     if (focusedIndex !== index_) {
       setFocusedIndex(index_);
     }
   };
 
-  const isFocused = index === focusedIndex;
-  const props = { ...rest,
-    disabled,
-    isFocused
-  };
-  return /*#__PURE__*/jsx(Item, { ...props,
-    ref: mergeRefs(ref, el => {
+  var isFocused = index === focusedIndex;
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    disabled: disabled,
+    isFocused: isFocused
+  });
+
+  return /*#__PURE__*/jsx(Item, _objectSpread(_objectSpread({}, props), {}, {
+    ref: mergeRefs(ref, function (el) {
       if (isFocused) {
-        requestAnimationFrame(() => {
+        requestAnimationFrame(function () {
           if (el !== null) el.focus();
         });
       }
     }),
-    onFocus: () => toggleFocus(index),
-    onClick: e => {
-      if (onClick) {
-        onClick(e);
+    onFocus: function onFocus() {
+      return toggleFocus(index);
+    },
+    onClick: function onClick(e) {
+      if (_onClick) {
+        _onClick(e);
 
         if (onClose !== null) {
           onClose(e);
@@ -96,7 +88,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     children: /*#__PURE__*/jsx(Content, {
       children: children
     })
-  });
+  }));
 });
 MenuItem.displayName = 'MenuItem';
 

package/dist/esm/components/Menu/MenuList.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo, Children, cloneElement, useEffect, isValidElement } from 'react';
 import styled from 'styled-components';
 import { useMenu } from './Menu.context.js';
@@ -7,7 +9,8 @@ import { menu } from './Menu.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-const List = styled.div.withConfig({
+var _excluded = ["children"];
+var List = styled.div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
 })(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
@@ -17,45 +20,48 @@ function isIndexable(item) {
   return false;
 }
 
-const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  const {
-    focusedIndex,
-    setFocusedIndex,
-    initialFocus
-  } = useMenu();
-  let index = -1;
-  const focusableIndexs = useMemo(() => [], []);
-  const updatedChildren = useMemo(() => Children.map(children, child => {
-    if (!child) return child;
+var MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-    if (child.type === MenuSection) {
-      index++;
-      const menuSectionIndex = index;
-      const updatedGrandChildren = Children.map(child.props.children, grandChild => {
+  var _useMenu = useMenu(),
+      focusedIndex = _useMenu.focusedIndex,
+      setFocusedIndex = _useMenu.setFocusedIndex,
+      initialFocus = _useMenu.initialFocus;
+
+  var index = -1;
+  var focusableIndexs = useMemo(function () {
+    return [];
+  }, []);
+  var updatedChildren = useMemo(function () {
+    return Children.map(children, function (child) {
+      if (!child) return child;
+
+      if (child.type === MenuSection) {
         index++;
-        if (isIndexable(grandChild)) focusableIndexs.push(index);
-        return /*#__PURE__*/cloneElement(grandChild, {
-          index
+        var menuSectionIndex = index;
+        var updatedGrandChildren = Children.map(child.props.children, function (grandChild) {
+          index++;
+          if (isIndexable(grandChild)) focusableIndexs.push(index);
+          return /*#__PURE__*/cloneElement(grandChild, {
+            index: index
+          });
         });
-      });
-      return /*#__PURE__*/cloneElement(child, {
-        index: menuSectionIndex
-      }, updatedGrandChildren);
-    } else {
-      index++;
-      if (isIndexable(child)) focusableIndexs.push(index);
-      return /*#__PURE__*/cloneElement(child, {
-        index
-      });
-    }
-  }), [children, focusableIndexs, index]);
-  const firstFocusIndex = focusableIndexs[0];
-  const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
-  useEffect(() => {
+        return /*#__PURE__*/cloneElement(child, {
+          index: menuSectionIndex
+        }, updatedGrandChildren);
+      } else {
+        index++;
+        if (isIndexable(child)) focusableIndexs.push(index);
+        return /*#__PURE__*/cloneElement(child, {
+          index: index
+        });
+      }
+    });
+  }, [children, focusableIndexs, index]);
+  var firstFocusIndex = focusableIndexs[0];
+  var lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
+  useEffect(function () {
     if (initialFocus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
@@ -66,18 +72,16 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
 
   }, [initialFocus, firstFocusIndex, lastFocusIndex]);
 
-  const handleMenuItemChange = (direction, fallbackIndex) => {
-    const i = direction === 'down' ? 1 : -1;
-    const currentFocus = focusableIndexs.indexOf(focusedIndex);
-    const nextMenuItem = focusableIndexs[currentFocus + i];
-    const nextFocusedIndex = typeof nextMenuItem === 'undefined' ? fallbackIndex : nextMenuItem;
+  var handleMenuItemChange = function handleMenuItemChange(direction, fallbackIndex) {
+    var i = direction === 'down' ? 1 : -1;
+    var currentFocus = focusableIndexs.indexOf(focusedIndex);
+    var nextMenuItem = focusableIndexs[currentFocus + i];
+    var nextFocusedIndex = typeof nextMenuItem === 'undefined' ? fallbackIndex : nextMenuItem;
     setFocusedIndex(nextFocusedIndex);
   };
 
-  const handleKeyPress = event => {
-    const {
-      key
-    } = event;
+  var handleKeyPress = function handleKeyPress(event) {
+    var key = event.key;
     event.stopPropagation();
 
     if (key === 'ArrowDown') {
@@ -91,13 +95,13 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
     }
   };
 
-  return /*#__PURE__*/jsx(List, {
+  return /*#__PURE__*/jsx(List, _objectSpread(_objectSpread({
     onKeyDown: handleKeyPress,
-    role: "menu",
-    ...rest,
+    role: "menu"
+  }, rest), {}, {
     ref: ref,
     children: updatedChildren
-  });
+  }));
 }); // MenuList.displayName = 'EdsMenuList'
 
 export { MenuList };

package/dist/esm/components/Menu/MenuSection.js

@@ -6,18 +6,18 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 import { Typography } from '../Typography/Typography.js';
 
-const Header = styled.div.attrs(() => ({
-  tabIndex: 0
-})).withConfig({
+var Header = styled.div.attrs(function () {
+  return {
+    tabIndex: 0
+  };
+}).withConfig({
   displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
-const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
-  const {
-    children,
-    title,
-    index
-  } = props;
+var MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
+  var children = props.children,
+      title = props.title,
+      index = props.index;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [index !== 0 && /*#__PURE__*/jsx("div", {
       children: /*#__PURE__*/jsx(Divider, {

package/dist/esm/components/Menu/index.js

@@ -2,7 +2,7 @@ import { Menu as Menu$1 } from './Menu.js';
 import { MenuItem } from './MenuItem.js';
 import { MenuSection } from './MenuSection.js';
 
-const Menu = Menu$1;
+var Menu = Menu$1;
 Menu.Item = MenuItem;
 Menu.Section = MenuSection;
 Menu.Item.displayName = 'Menu.Item';

package/dist/esm/components/Pagination/Pagination.js

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
 import { useIsMounted } from '@equinor/eds-utils';
@@ -10,65 +13,69 @@ import { PaginationControl } from './paginationControl.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-const icons = {
-  chevron_left,
-  chevron_right,
-  more_horizontal
+var _excluded = ["totalItems", "defaultPage", "withItemIndicator", "itemsPerPage", "onChange"];
+var icons = {
+  chevron_left: chevron_left,
+  chevron_right: chevron_right,
+  more_horizontal: more_horizontal
 };
 Icon.add(icons);
-const Navigation = styled.nav.withConfig({
+var Navigation = styled.nav.withConfig({
   displayName: "Pagination__Navigation",
   componentId: "sc-13cpp3o-0"
-})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], _ref => {
-  let {
-    withItemIndicator
-  } = _ref;
+})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], function (_ref) {
+  var withItemIndicator = _ref.withItemIndicator;
   return withItemIndicator ? pagination.spacings.left : 0;
 });
-const OrderedList = styled.ol.withConfig({
+var OrderedList = styled.ol.withConfig({
   displayName: "Pagination__OrderedList",
   componentId: "sc-13cpp3o-1"
 })(["list-style:none;margin:0;padding:0;display:grid;grid-gap:", ";grid-auto-flow:column;"], pagination.spacings.left);
-const ListItem = styled.li.withConfig({
+var ListItem = styled.li.withConfig({
   displayName: "Pagination__ListItem",
   componentId: "sc-13cpp3o-2"
 })(["display:inline-grid;"]);
-const StyledIcon = styled(Icon).withConfig({
+var StyledIcon = styled(Icon).withConfig({
   displayName: "Pagination__StyledIcon",
   componentId: "sc-13cpp3o-3"
 })(["align-self:center;justify-self:center;fill:", ";"], pagination.entities.icon.typography.color);
-const FlexContainer = styled.div.withConfig({
+var FlexContainer = styled.div.withConfig({
   displayName: "Pagination__FlexContainer",
   componentId: "sc-13cpp3o-4"
 })(["display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;"]);
-const Text = styled(Typography).withConfig({
+var Text = styled(Typography).withConfig({
   displayName: "Pagination__Text",
   componentId: "sc-13cpp3o-5"
 })(["white-space:nowrap;"]);
 
 function getAriaLabel(page, selected) {
-  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
+  return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
 }
 
-const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
-  let {
-    totalItems,
-    defaultPage = 1,
-    withItemIndicator,
-    itemsPerPage = 10,
-    onChange,
-    ...rest
-  } = _ref2;
-  const pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
+var Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
+  var totalItems = _ref2.totalItems,
+      _ref2$defaultPage = _ref2.defaultPage,
+      defaultPage = _ref2$defaultPage === void 0 ? 1 : _ref2$defaultPage,
+      withItemIndicator = _ref2.withItemIndicator,
+      _ref2$itemsPerPage = _ref2.itemsPerPage,
+      itemsPerPage = _ref2$itemsPerPage === void 0 ? 10 : _ref2$itemsPerPage,
+      onChange = _ref2.onChange,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
-  const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >
+  var pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
 
-  const [activePage, setActivePage] = useState(defaultPage);
-  const currentItemFirst = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1; // First number of range of items at current page
+  var columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >
 
-  const currentItemLast = activePage === pages ? totalItems : activePage * itemsPerPage; // Last number of range of items at current page
+  var _useState = useState(defaultPage),
+      _useState2 = _slicedToArray(_useState, 2),
+      activePage = _useState2[0],
+      setActivePage = _useState2[1];
 
-  const onPageChange = (event, page) => {
+  var currentItemFirst = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1; // First number of range of items at current page
+
+  var currentItemLast = activePage === pages ? totalItems : activePage * itemsPerPage; // Last number of range of items at current page
+
+  var onPageChange = function onPageChange(event, page) {
     page && setActivePage(page);
 
     if (event && onChange) {
@@ -79,32 +86,32 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
     }
   };
 
-  const isMounted = useIsMounted();
-  const items = PaginationControl(pages, activePage);
-  useLayoutEffect(() => {
+  var isMounted = useIsMounted();
+  var items = PaginationControl(pages, activePage);
+  useLayoutEffect(function () {
     if (isMounted) {
       setActivePage(1);
       onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [itemsPerPage]);
-  const props = {
-    ref,
-    withItemIndicator,
-    ...rest
-  };
 
-  const pagination = /*#__PURE__*/jsx(Navigation, {
-    "aria-label": "pagination",
-    ...props,
+  var props = _objectSpread({
+    ref: ref,
+    withItemIndicator: withItemIndicator
+  }, rest);
+
+  var pagination = /*#__PURE__*/jsx(Navigation, _objectSpread(_objectSpread({
+    "aria-label": "pagination"
+  }, props), {}, {
     children: /*#__PURE__*/jsxs(OrderedList, {
       style: {
-        gridTemplateColumns: `repeat(${columns}, 48px)`
+        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
       },
       children: [/*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Button, {
           variant: "ghost_icon",
-          onClick: activePage > 1 ? event => {
+          onClick: activePage > 1 ? function (event) {
             onPageChange(event, activePage - 1);
           } : undefined,
           disabled: activePage === 1,
@@ -113,29 +120,31 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
             name: "chevron_left"
           })
         })
-      }, "previous"), items.length > 0 ? items.map((page, index) => page !== 'ELLIPSIS' ?
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      jsx(ListItem, {
-        children: /*#__PURE__*/jsx(PaginationItem, {
-          "aria-label": getAriaLabel(page, activePage),
-          "aria-current": activePage,
-          page: page,
-          selected: page === activePage,
-          onClick: event => {
-            onPageChange(event, page);
-          }
-        })
-      }, `list-item ${index}`) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
-      , {
-        children: /*#__PURE__*/jsx(StyledIcon, {
-          name: "more_horizontal",
-          "aria-label": "Ellipsis of pages"
-        })
-      }, `ellipsis-${index}`)) : undefined, /*#__PURE__*/jsx(ListItem, {
+      }, "previous"), items.length > 0 ? items.map(function (page, index) {
+        return page !== 'ELLIPSIS' ?
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        jsx(ListItem, {
+          children: /*#__PURE__*/jsx(PaginationItem, {
+            "aria-label": getAriaLabel(page, activePage),
+            "aria-current": activePage,
+            page: page,
+            selected: page === activePage,
+            onClick: function onClick(event) {
+              onPageChange(event, page);
+            }
+          })
+        }, "list-item ".concat(index)) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+        , {
+          children: /*#__PURE__*/jsx(StyledIcon, {
+            name: "more_horizontal",
+            "aria-label": "Ellipsis of pages"
+          })
+        }, "ellipsis-".concat(index));
+      }) : undefined, /*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Button, {
           variant: "ghost_icon",
-          onClick: activePage < pages ? event => {
+          onClick: activePage < pages ? function (event) {
             onPageChange(event, activePage + 1);
           } : undefined,
           "aria-label": "Go to next page",
@@ -146,16 +155,11 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
         })
       }, "next")]
     })
-  });
+  }));
 
   return withItemIndicator ? /*#__PURE__*/jsxs(FlexContainer, {
     children: [/*#__PURE__*/jsx(Text, {
-      children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
-              ${' - '}
-              ${currentItemLast}
-              ${' of '}
-              ${totalItems}
-              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
+      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
     }), pagination]
   }) : pagination;
 });