@equinor/eds-core-react 0.18.0-envis.1 → 0.19.0-dev.20220404

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

@@ -3,15 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 
 const initalState = {
   focusedIndex: -1,
+  initialFocus: null,
   onClose: null
 };
 const MenuContext = /*#__PURE__*/createContext(initalState);
-const MenuProvider = ({
-  children
-}) => {
+const MenuProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [state, setState] = useState(initalState);
   const {
     focusedIndex,
+    initialFocus,
     onClose
   } = state;
 
@@ -21,10 +24,17 @@ const MenuProvider = ({
     }));
   };
 
+  const setInitialFocus = initialFocus => {
+    setState(prevState => ({ ...prevState,
+      initialFocus: initialFocus
+    }));
+  };
+
   const setOnClose = onClose => {
     const onCloseHelper = () => {
-      onClose();
       setFocusedIndex(-1);
+      setInitialFocus(null);
+      onClose();
     };
 
     setState(prevState => ({ ...prevState,
@@ -35,6 +45,8 @@ const MenuProvider = ({
   const value = {
     setFocusedIndex,
     focusedIndex,
+    setInitialFocus,
+    initialFocus,
     setOnClose,
     onClose
   };

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,28 +15,64 @@ 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:1400;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
+    onClose,
+    setInitialFocus
   } = useMenu();
   useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
   }, [onClose, onCloseCallback, setOnClose]);
+  useEffect(() => {
+    const openWithKey = e => {
+      const {
+        key
+      } = e; //activate menu with arrows according to wai-aria best practices
+
+      if (key === 'ArrowDown' || key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        anchorEl.dispatchEvent(new Event('click', {
+          bubbles: true
+        }));
+      }
+
+      switch (key) {
+        case 'Enter':
+        case 'ArrowDown':
+          setInitialFocus('first');
+          break;
+
+        case 'ArrowUp':
+          setInitialFocus('last');
+          break;
+      }
+    };
+
+    if (anchorEl) anchorEl.addEventListener('keydown', openWithKey);
+    return () => {
+      if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorEl]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -55,7 +86,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,14 +98,15 @@ 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();
@@ -87,7 +123,12 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   const {
     styles,
     attributes
-  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
+  } = usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl: containerEl,
+    placement,
+    offset: 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,19 +17,24 @@ 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,
+    ...rest
+  } = _ref;
   const {
     focusedIndex,
-    setFocusedIndex
+    setFocusedIndex,
+    initialFocus
   } = useMenu();
   let index = -1;
   const focusableIndexs = useMemo(() => [], []);
   const updatedChildren = useMemo(() => Children.map(children, child => {
+    if (!child) return child;
+
     if (child.type === MenuSection) {
+      index++;
+      const menuSectionIndex = index;
       const updatedGrandChildren = Children.map(child.props.children, grandChild => {
         index++;
         if (isIndexable(grandChild)) focusableIndexs.push(index);
@@ -37,7 +42,9 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList({
           index
         });
       });
-      return /*#__PURE__*/cloneElement(child, null, updatedGrandChildren);
+      return /*#__PURE__*/cloneElement(child, {
+        index: menuSectionIndex
+      }, updatedGrandChildren);
     } else {
       index++;
       if (isIndexable(child)) focusableIndexs.push(index);
@@ -49,15 +56,15 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList({
   const firstFocusIndex = focusableIndexs[0];
   const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   useEffect(() => {
-    if (focus === 'first') {
+    if (initialFocus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
 
-    if (focus === 'last') {
+    if (initialFocus === 'last') {
       setFocusedIndex(lastFocusIndex);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [focus, firstFocusIndex, lastFocusIndex]);
+  }, [initialFocus, firstFocusIndex, lastFocusIndex]);
 
   const handleMenuItemChange = (direction, fallbackIndex) => {
     const i = direction === 'down' ? 1 : -1;

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

@@ -1,8 +1,8 @@
 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';
 

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,

package/dist/esm/components/Paper/Paper.js

@@ -6,13 +6,17 @@ import { jsx } from 'react/jsx-runtime';
 const StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
-  elevation
-}) => elevation);
-const Paper = /*#__PURE__*/forwardRef(function Paper({
-  elevation: elevation$1,
-  ...rest
-}, ref) {
+})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     elevation: elevation[elevation$1] || 'none'
   };