@equinor/eds-core-react 0.16.1 → 0.17.0-dev.20220209

package/dist/esm/components/Icon/Icon.js

@@ -3,75 +3,106 @@ import styled from 'styled-components';
 import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
+const transform = _ref => {
+  let {
+    rotation
+  } = _ref;
+  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+};
 
-const transform = ({
-  rotation
-}) => rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
-
-const StyledSvg = styled.svg.attrs(({
-  height,
-  width,
-  fill
-}) => ({
-  name: null,
-  xmlns: 'http://www.w3.org/2000/svg',
-  height: "".concat(height, "px"),
-  width: "".concat(width, "px"),
-  fill
-})).withConfig({
+const StyledSvg = styled.svg.attrs(_ref2 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref2;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height: "".concat(height, "px"),
+    width: "".concat(width, "px"),
+    fill
+  };
+}).withConfig({
   displayName: "Icon__StyledSvg",
   componentId: "sc-6evbi1-0"
 })(["", ""], transform);
-const StyledPath = styled.path.attrs(({
-  height,
-  size
-}) => ({
-  size: null,
-  fillRule: 'evenodd',
-  clipRule: 'evenodd',
-  transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
-})).withConfig({
+const StyledPath = styled.path.attrs(_ref3 => {
+  let {
+    height,
+    size
+  } = _ref3;
+  return {
+    size: null,
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+  };
+}).withConfig({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const Icon = /*#__PURE__*/forwardRef(function Icon({
-  size = 24,
-  color = 'currentColor',
-  name,
-  className,
-  rotation,
-  title,
-  data,
-  ...rest
-}, ref) {
-  const {
+
+const customIcon = icon => ({
+  icon,
+  count: Math.floor(Math.random() * 1000)
+});
+
+const findIcon = (name, data, size) => {
+  // eslint-disable-next-line prefer-const
+  let {
     icon,
     count
   } = data ? customIcon(data) : get(name);
 
+  if (size < 24) {
+    var _icon$sizes;
+
+    // fallback to normal icon if small is not made yet
+    icon = ((_icon$sizes = icon.sizes) === null || _icon$sizes === void 0 ? void 0 : _icon$sizes.small) || icon;
+  }
+
+  return {
+    icon,
+    count
+  };
+};
+
+const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
+  let {
+    size = 24,
+    color = 'currentColor',
+    name,
+    rotation,
+    title,
+    data,
+    ...rest
+  } = _ref4;
+  // eslint-disable-next-line prefer-const
+  const {
+    icon,
+    count
+  } = findIcon(name, data, size);
+
   if (typeof icon === 'undefined') {
     throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
 
+  const height = size ? size : parseInt(icon.width);
+  const width = size ? size : parseInt(icon.height);
   let svgProps = {
-    height: size,
-    width: size,
+    height,
+    width,
     fill: color,
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    className,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
     rotation,
     name,
-    'aria-hidden': true,
-    title: null
+    'aria-hidden': true
   };
   const pathProps = {
     d: icon.svgPathData,
     height: icon.height ? icon.height : size,
-    size
+    size: size || icon.height
   }; // Accessibility
 
   let titleId = '';

package/dist/esm/components/Input/Input.js

@@ -1,18 +1,17 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { inputToken } from './Input.tokens.js';
+import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   const {
     states: {
       focus: {
@@ -28,12 +27,13 @@ const StyledInput = styled.input.withConfig({
   } = theme;
   return css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
 });
-const Input = /*#__PURE__*/forwardRef(function Input({
-  variant = 'default',
-  disabled = false,
-  type = 'text',
-  ...other
-}, ref) {
+const Input = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+  let {
+    variant = 'default',
+    disabled = false,
+    type = 'text',
+    ...other
+  } = _ref2;
   const actualVariant = variant === 'default' ? 'input' : variant;
   const inputVariant = inputToken[actualVariant];
   const {

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

@@ -1,5 +1,5 @@
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   colors: {
@@ -93,7 +93,7 @@ const input = {
     }
   }
 };
-const error = mergeDeepRight_1(input, {
+const error = mergeDeepRight(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -116,7 +116,7 @@ const error = mergeDeepRight_1(input, {
     }
   }
 });
-const warning = mergeDeepRight_1(input, {
+const warning = mergeDeepRight(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -139,7 +139,7 @@ const warning = mergeDeepRight_1(input, {
     }
   }
 });
-const success = mergeDeepRight_1(input, {
+const success = mergeDeepRight(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {

package/dist/esm/components/Label/Label.js

@@ -1,15 +1,18 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { label } from './Label.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const LabelBase = styled.label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
-})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], typographyTemplate(label.typography), label.spacings.left, label.spacings.right, ({
-  disabledText
-}) => disabledText ? label.states.disabled.typography.color : label.typography.color);
+})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], typographyTemplate(label.typography), label.spacings.left, label.spacings.right, _ref => {
+  let {
+    disabledText
+  } = _ref;
+  return disabledText ? label.states.disabled.typography.color : label.typography.color;
+});
 const Text = styled.span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"

package/dist/esm/components/List/List.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { list } from './List.tokens.js';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   typography
@@ -10,14 +10,18 @@ const {
 const StyledList = styled.ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-v9d2hy-0"
-})(["", " ", ""], ({
-  as
-}) => as === 'ol' ? css(["& ol{list-style-type:lower-alpha;}"]) : '', typographyTemplate(typography));
-const List = /*#__PURE__*/forwardRef(function List({
-  children,
-  variant = 'bullet',
-  ...props
-}, ref) {
+})(["", " ", ""], _ref => {
+  let {
+    as
+  } = _ref;
+  return as === 'ol' ? css(["& ol{list-style-type:lower-alpha;}"]) : '';
+}, typographyTemplate(typography));
+const List = /*#__PURE__*/forwardRef(function List(_ref2, ref) {
+  let {
+    children,
+    variant = 'bullet',
+    ...props
+  } = _ref2;
   const as = variant === 'numbered' ? 'ol' : 'ul';
   return /*#__PURE__*/jsx(StyledList, {
     as: as,

package/dist/esm/components/List/ListItem.js

@@ -1,10 +1,11 @@
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const ListItem = /*#__PURE__*/forwardRef(function ListItem({
-  children,
-  ...props
-}, ref) {
+const ListItem = /*#__PURE__*/forwardRef(function ListItem(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx("li", { ...props,
     ref: ref,
     children: children

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

@@ -6,9 +6,10 @@ const initalState = {
   onClose: null
 };
 const MenuContext = /*#__PURE__*/createContext(initalState);
-const MenuProvider = ({
-  children
-}) => {
+const MenuProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [state, setState] = useState(initalState);
   const {
     focusedIndex,
@@ -23,8 +24,8 @@ const MenuProvider = ({
 
   const setOnClose = onClose => {
     const onCloseHelper = () => {
-      onClose();
       setFocusedIndex(-1);
+      onClose();
     };
 
     setState(prevState => ({ ...prevState,

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

@@ -3,16 +3,11 @@ import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
+import { bordersTemplate, useIsMounted, useToken, usePopper, useOutsideClick, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useIsMounted } from '../../hooks/useMountedRef.js';
-import { useOutsideClick } from '../../hooks/useOutsideClick.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
 import { Paper } from '../Paper/Paper.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
-import { usePopper } from '../../hooks/usePopper.js';
 
 const {
   border
@@ -20,19 +15,23 @@ const {
 const MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:300;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), ({
-  open
-}) => css({
-  visibility: open ? null : 'hidden'
-}));
-const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
-  children,
-  anchorEl,
-  onClose: onCloseCallback,
-  open,
-  containerEl,
-  ...rest
-}, ref) {
+})(["position:absolute;z-index:300;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), _ref => {
+  let {
+    open
+  } = _ref;
+  return css({
+    visibility: open ? null : 'hidden'
+  });
+});
+const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
+  let {
+    children,
+    anchorEl,
+    onClose: onCloseCallback,
+    open,
+    containerEl,
+    ...rest
+  } = _ref2;
   const {
     setOnClose,
     onClose
@@ -41,7 +40,7 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
-  });
+  }, [onClose, onCloseCallback, setOnClose]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -55,7 +54,11 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
   });
   useGlobalKeyPress('Enter', () => {
     if (open && onClose !== null) {
-      if (window.document.contains(anchorEl)) anchorEl.focus();
+      setTimeout(() => {
+        if (window.document.contains(anchorEl)) {
+          anchorEl.focus();
+        }
+      }, 0);
     }
   });
   return /*#__PURE__*/jsx(MenuList, { ...rest,
@@ -63,15 +66,17 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
     children: children
   });
 });
-const Menu = /*#__PURE__*/forwardRef(function Menu({
-  anchorEl,
-  open,
-  placement = 'auto',
-  style,
-  className,
-  ...rest
-}, ref) {
+const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
+  let {
+    anchorEl,
+    open,
+    placement = 'auto',
+    style,
+    className,
+    ...rest
+  } = _ref3;
   const [containerEl, setContainerEl] = useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const isMounted = useIsMounted();
   const {
     density
@@ -79,10 +84,14 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   const token = useToken({
     density
   }, menu);
+  useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, containerEl, null, placement, 4);
+  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
   const props = {
     open,
     style: { ...styles.popper,

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

@@ -1,11 +1,9 @@
 import { memo, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { menu } from './Menu.tokens.js';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, useCombinedRefs } from '@equinor/eds-utils';
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   typography,
@@ -21,32 +19,45 @@ const {
     icon
   }
 } = menu;
-const Item = styled.button.attrs(({
-  isFocused
-}) => ({
-  role: 'menuitem',
-  tabIndex: isFocused ? -1 : 0
-})).withConfig({
+const Item = styled.button.attrs(_ref => {
+  let {
+    isFocused
+  } = _ref;
+  return {
+    role: 'menuitem',
+    tabIndex: isFocused ? -1 : 0
+  };
+}).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), ({
-  theme
-}) => spacingsTemplate(theme.entities.item.spacings), ({
-  active
-}) => active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
-  disabled
-}) => 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)));
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return spacingsTemplate(theme.entities.item.spacings);
+}, _ref3 => {
+  let {
+    active
+  } = _ref3;
+  return active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  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({
   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__*/memo( /*#__PURE__*/forwardRef(function MenuItem({
-  children,
-  disabled,
-  index = 0,
-  onClick,
-  ...rest
-}, ref) {
+const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
+  let {
+    children,
+    disabled,
+    index = 0,
+    onClick,
+    ...rest
+  } = _ref5;
   const {
     focusedIndex,
     setFocusedIndex,
@@ -66,8 +77,10 @@ const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem({
   };
   return /*#__PURE__*/jsx(Item, { ...props,
     ref: useCombinedRefs(ref, el => {
-      if (el !== null && isFocused) {
-        el.focus();
+      if (isFocused) {
+        requestAnimationFrame(() => {
+          if (el !== null) el.focus();
+        });
       }
     }),
     onFocus: () => toggleFocus(index),

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

@@ -4,8 +4,8 @@ import { useMenu } from './Menu.context.js';
 import { MenuItem } from './MenuItem.js';
 import { MenuSection } from './MenuSection.js';
 import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 
 const List = styled.div.withConfig({
   displayName: "MenuList__List",
@@ -17,11 +17,12 @@ function isIndexable(item) {
   return false;
 }
 
-const MenuList = /*#__PURE__*/forwardRef(function MenuList({
-  children,
-  focus,
-  ...rest
-}, ref) {
+const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
+  let {
+    children,
+    focus,
+    ...rest
+  } = _ref;
   const {
     focusedIndex,
     setFocusedIndex

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { memo } from 'react';
 import styled from 'styled-components';
 import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Divider } from '../Divider/Divider.js';
 import { Typography } from '../Typography/Typography.js';
 
@@ -12,7 +12,7 @@ const Header = styled.div.attrs(() => ({
   displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
-const MenuSection = /*#__PURE__*/React.memo(function MenuSection(props) {
+const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
   const {
     children,
     title,

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

@@ -1,12 +1,12 @@
 import { forwardRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
+import { useIsMounted } from '@equinor/eds-utils';
 import { Icon } from '../Icon/index.js';
 import { PaginationItem } from './PaginationItem.js';
 import { pagination } from './Pagination.tokens.js';
 import { chevron_left, chevron_right, more_horizontal } from '@equinor/eds-icons';
 import { PaginationControl } from './paginationControl.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useIsMounted } from '../../hooks/useMountedRef.js';
 import { Typography } from '../Typography/Typography.js';
 import { Button } from '../Button/Button.js';
 
@@ -19,9 +19,12 @@ Icon.add(icons);
 const 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:", ";"], ({
-  withItemIndicator
-}) => withItemIndicator ? pagination.spacings.left : 0);
+})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], _ref => {
+  let {
+    withItemIndicator
+  } = _ref;
+  return withItemIndicator ? pagination.spacings.left : 0;
+});
 const OrderedList = styled.ol.withConfig({
   displayName: "Pagination__OrderedList",
   componentId: "sc-13cpp3o-1"
@@ -47,14 +50,15 @@ function getAriaLabel(page, selected) {
   return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
 }
 
-const Pagination = /*#__PURE__*/forwardRef(function Pagination({
-  totalItems,
-  defaultPage = 1,
-  withItemIndicator,
-  itemsPerPage = 10,
-  onChange,
-  ...rest
-}, ref) {
+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
 
   const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >

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

@@ -3,12 +3,13 @@ import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '../Button/Button.js';
 
-const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem({
-  page,
-  selected,
-  onClick,
-  ...rest
-}, ref) {
+const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref) {
+  let {
+    page,
+    selected,
+    onClick,
+    ...rest
+  } = _ref;
   const props = {
     ref,
     page,