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

package/dist/esm/components/Tabs/Tabs.js

@@ -1,26 +1,36 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { TabsProvider } from './Tabs.context.js';
 import { token } from './Tabs.tokens.js';
+import { useId, useCombinedRefs, useToken } from '@equinor/eds-utils';
 import { ThemeProvider } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '../../hooks/useId.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
-const Tabs = /*#__PURE__*/forwardRef(function Tabs({
-  activeTab = 0,
-  onChange,
-  onBlur,
-  onFocus,
-  variant = 'minWidth',
-  id,
-  ...props
-}, ref) {
+const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
+  let {
+    activeTab = 0,
+    onChange,
+    onBlur,
+    onFocus,
+    variant = 'minWidth',
+    scrollable,
+    id,
+    ...props
+  } = _ref;
   const tabsId = useId(id, 'tabs');
+  const tabsRef = useRef(null);
+  const combinedTabsRef = useCombinedRefs(tabsRef, ref);
   const [tabsFocused, setTabsFocused] = useState(false);
+  const [listenerAttached, setListenerAttached] = useState(false);
   let blurTimer;
 
   const handleBlur = e => {
+    setListenerAttached(false);
+
+    if (tabsRef.current) {
+      tabsRef.current.removeEventListener('keyup', checkIfTabWasPressed);
+    }
+
     blurTimer = setTimeout(() => {
       if (tabsFocused) {
         setTabsFocused(false);
@@ -35,14 +45,33 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
     }
 
     clearTimeout(blurTimer);
+    if (tabsFocused) return;
 
-    if (!tabsFocused) {
-      setTabsFocused(true);
+    if (!listenerAttached) {
+      if (tabsRef.current) {
+        setListenerAttached(true);
+        tabsRef.current.addEventListener('keyup', checkIfTabWasPressed, {
+          once: true,
+          capture: true
+        });
+      }
     }
 
     onFocus && onFocus(e);
+  }; //Only force focus on active Tab if Tabs was navigated to with keyboard
+
+
+  const checkIfTabWasPressed = event => {
+    setListenerAttached(false);
+    if (event.key === 'Tab') setTabsFocused(true);
   };
 
+  useEffect(() => {
+    const tabs = tabsRef.current;
+    return () => {
+      if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const {
     density
   } = useEds();
@@ -57,10 +86,11 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
         handleChange: onChange,
         tabsId,
         variant,
+        scrollable,
         tabsFocused
       },
       children: /*#__PURE__*/jsx("div", {
-        ref: ref,
+        ref: combinedTabsRef,
         ...props,
         onBlur: handleBlur,
         onFocus: handleFocus

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

@@ -34,6 +34,11 @@ const {
     comfortable: {
       medium: spacingMedium
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const token = {
@@ -47,7 +52,7 @@ const token = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
+            width: focusOutlineWidth,
             style: 'dashed',
             color: focusOutlineColor
           }
@@ -94,7 +99,8 @@ const token = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
+            width: focusOutlineWidth,
+            offset: "-".concat(parseInt(focusOutlineWidth), "px"),
             style: 'dashed',
             color: focusOutlineColor
           }

package/dist/esm/components/TextField/Field.js

@@ -1,26 +1,27 @@
 import { forwardRef } from 'react';
 import { useTextField } from './TextField.context.js';
 import styled, { css } from 'styled-components';
+import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import * as TextField_tokens from './TextField.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Input } from '../Input/Input.js';
 import { Textarea } from '../Textarea/Textarea.js';
 import { Icon as InputIcon } from './Icon/Icon.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   textfield
 } = TextField_tokens;
 
-const Variation = ({
-  variant,
-  isFocused,
-  token
-}) => {
+const Variation = _ref => {
   var _token$border, _token$border2, _token$border3, _token$border4;
 
+  let {
+    variant,
+    isFocused,
+    token
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -39,45 +40,55 @@ const StrippedTextarea = styled(Textarea).withConfig({
 const InputWrapper = styled.div.withConfig({
   displayName: "Field__InputWrapper",
   componentId: "sc-455b88-2"
-})(({
-  inputIcon,
-  unit,
-  isDisabled,
-  isReadOnly,
-  multiline,
-  variant
-}) => css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"])));
+})(_ref2 => {
+  let {
+    inputIcon,
+    unit,
+    isDisabled,
+    isReadOnly,
+    multiline,
+    variant
+  } = _ref2;
+  return css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"]));
+});
 const Unit = styled.span.withConfig({
   displayName: "Field__Unit",
   componentId: "sc-455b88-3"
-})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), ({
-  isDisabled
-}) => isDisabled && {
-  color: textfield.entities.unit.states.disabled.typography.color
+})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), _ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled && {
+    color: textfield.entities.unit.states.disabled.typography.color
+  };
 });
 const Adornments = styled.div.withConfig({
   displayName: "Field__Adornments",
   componentId: "sc-455b88-4"
-})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, ({
-  multiline,
-  theme
-}) => multiline && {
-  marginTop: theme.spacings.top,
-  alignSelf: 'start'
+})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, _ref4 => {
+  let {
+    multiline,
+    theme
+  } = _ref4;
+  return multiline && {
+    marginTop: theme.spacings.top,
+    alignSelf: 'start'
+  };
 });
-const Field = /*#__PURE__*/forwardRef(function Field({
-  multiline,
-  variant,
-  disabled,
-  readOnly,
-  type,
-  unit,
-  inputIcon,
-  rowsMax,
-  onBlur,
-  onFocus,
-  ...other
-}, ref) {
+const Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
+  let {
+    multiline,
+    variant,
+    disabled,
+    readOnly,
+    type,
+    unit,
+    inputIcon,
+    rowsMax,
+    onBlur,
+    onFocus,
+    ...other
+  } = _ref5;
   const {
     handleFocus,
     handleBlur,

package/dist/esm/components/TextField/HelperText/HelperText.js

@@ -1,16 +1,18 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { helperText } from './HelperText.token.js';
 import { useTextField } from '../TextField.context.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Icon as InputIcon } from '../Icon/Icon.js';
-import { typographyTemplate } from '../../../utils/templates/index.js';
 
-const Variation = ({
-  variant,
-  isFocused,
-  isDisabled
-}) => {
+const Variation = _ref => {
+  let {
+    variant,
+    isFocused,
+    isDisabled
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -35,22 +37,29 @@ const Variation = ({
 const Container = styled.div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-1kfkyxg-0"
-})(["display:flex;align-items:flex-start;margin-top:", ";"], ({
-  spacings
-}) => spacings.top);
+})(["display:flex;align-items:flex-start;margin-top:", ";"], _ref2 => {
+  let {
+    spacings
+  } = _ref2;
+  return spacings.top;
+});
 const Text = styled.p.withConfig({
   displayName: "HelperText__Text",
   componentId: "sc-1kfkyxg-1"
-})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), ({
-  spacings
-}) => spacings.left, Variation);
-const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
-  helperText: helperText$1,
-  icon,
-  variant = 'default',
-  disabled: isDisabled,
-  ...rest
-}, ref) {
+})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), _ref3 => {
+  let {
+    spacings
+  } = _ref3;
+  return spacings.left;
+}, Variation);
+const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref4, ref) {
+  let {
+    helperText: helperText$1,
+    icon,
+    variant = 'default',
+    disabled: isDisabled,
+    ...rest
+  } = _ref4;
   const helperVariant = helperText[variant];
   const spacings = helperText.spacings.comfortable;
   const {

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

@@ -7,12 +7,13 @@ import { jsx } from 'react/jsx-runtime';
 const StyledIcon = styled.div.withConfig({
   displayName: "Icon__StyledIcon",
   componentId: "sc-jr0rqa-0"
-})(({
-  colors,
-  isDisabled,
-  isFocused,
-  size
-}) => {
+})(_ref => {
+  let {
+    colors,
+    isDisabled,
+    isFocused,
+    size
+  } = _ref;
   const {
     focusColor,
     color,
@@ -30,18 +31,19 @@ const StyledIcon = styled.div.withConfig({
 
   return css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
 });
-const InputIcon = /*#__PURE__*/forwardRef(function InputIcon({
-  size = 24,
-  variant = 'default',
-  isDisabled = false,
-  colors = {
-    color: input[variant].color,
-    disabledColor: input[variant].disabledColor,
-    focusColor: input[variant].focusColor
-  },
-  children,
-  ...other
-}, ref) {
+const InputIcon = /*#__PURE__*/forwardRef(function InputIcon(_ref2, ref) {
+  let {
+    size = 24,
+    variant = 'default',
+    isDisabled = false,
+    colors = {
+      color: input[variant].color,
+      disabledColor: input[variant].disabledColor,
+      focusColor: input[variant].focusColor
+    },
+    children,
+    ...other
+  } = _ref2;
   const {
     isFocused
   } = useTextField();

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

@@ -5,9 +5,10 @@ const initalState = {
   isFocused: false
 };
 const TextFieldContext = /*#__PURE__*/createContext(initalState);
-const TextFieldProvider = ({
-  children
-}) => {
+const TextFieldProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [state, setState] = useState(initalState);
 
   const handleFocus = () => {

package/dist/esm/components/TextField/TextField.js

@@ -3,34 +3,34 @@ import styled, { ThemeProvider } from 'styled-components';
 import { Field } from './Field.js';
 import { TextFieldProvider } from './TextField.context.js';
 import { textfield } from './TextField.tokens.js';
+import { useId, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId } from '../../hooks/useId.js';
 import { Label } from '../Label/Label.js';
 import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const Container = styled.div.withConfig({
   displayName: "TextField__Container",
   componentId: "sc-o1nc07-0"
 })(["min-width:100px;width:100%;"]);
-const TextField = /*#__PURE__*/forwardRef(function TextField({
-  id,
-  label,
-  meta,
-  unit,
-  helperText,
-  placeholder,
-  disabled,
-  multiline,
-  className,
-  variant = 'default',
-  inputRef,
-  inputIcon,
-  helperIcon,
-  rowsMax,
-  ...other
-}, ref) {
+const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
+  let {
+    id,
+    label,
+    meta,
+    unit,
+    helperText,
+    placeholder,
+    disabled,
+    multiline,
+    className,
+    variant = 'default',
+    inputRef,
+    inputIcon,
+    helperIcon,
+    rowsMax,
+    ...other
+  } = _ref;
   const helperTextId = useId(null, 'helpertext');
   const inputProps = {
     'aria-describedby': helperTextId,

package/dist/esm/components/Textarea/Textarea.js

@@ -2,22 +2,21 @@ import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import * as Input_tokens from '../Input/Input.tokens.js';
 import { input as input$1 } from '../Input/Input.tokens.js';
+import { typographyTemplate, useAutoResize, useCombinedRefs, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { useAutoResize } from '../../hooks/useAutoResize.js';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   input
 } = Input_tokens;
 
-const Variation = ({
-  variant,
-  token,
-  density
-}) => {
+const Variation = _ref => {
+  let {
+    variant,
+    token,
+    density
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -46,13 +45,14 @@ const StyledTextarea = styled.textarea.withConfig({
   displayName: "Textarea__StyledTextarea",
   componentId: "sc-2yjdcc-0"
 })(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
-const Textarea = /*#__PURE__*/forwardRef(function Textarea({
-  variant = 'default',
-  disabled = false,
-  type = 'text',
-  rowsMax,
-  ...other
-}, ref) {
+const Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
+  let {
+    variant = 'default',
+    disabled = false,
+    type = 'text',
+    rowsMax,
+    ...other
+  } = _ref2;
   const actualVariant = variant === 'default' ? 'input' : variant;
   const inputVariant = Input_tokens[actualVariant];
   const [textareaEl, setTextareaEl] = useState(null);

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,21 +1,14 @@
 import { forwardRef, useState, useRef, useEffect, cloneElement } from 'react';
 import * as ReactDom from 'react-dom';
 import styled from 'styled-components';
+import { typographyTemplate, spacingsTemplate, bordersTemplate, useIsMounted, useCombinedRefs, useId, useGlobalKeyPress, usePopper, joinHandlers } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useIsMounted } from '../../hooks/useMountedRef.js';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { useId } from '../../hooks/useId.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
-import { usePopper } from '../../hooks/usePopper.js';
-import { joinHandlers } from '../../utils/joinHandlers.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const StyledTooltip = styled.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
-})(["", " ", " ", " background:", ";z-index:350;white-space:nowrap;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background, tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.entities.arrow.spacings.bottom, tooltip.entities.arrow.spacings.top, tooltip.entities.arrow.spacings.right, tooltip.entities.arrow.spacings.left);
+})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background, tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.entities.arrow.spacings.bottom, tooltip.entities.arrow.spacings.top, tooltip.entities.arrow.spacings.right, tooltip.entities.arrow.spacings.left);
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
@@ -24,14 +17,16 @@ const TooltipArrow = styled.svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
-  title,
-  placement = 'bottom',
-  children,
-  enterDelay = 100,
-  id,
-  ...rest
-}, ref) {
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
+  let {
+    title,
+    placement = 'bottom',
+    children,
+    enterDelay = 100,
+    id,
+    style,
+    ...rest
+  } = _ref;
   const isMounted = useIsMounted();
   const [popperEl, setPopperEl] = useState(null);
   const [arrowRef, setArrowRef] = useState(null);
@@ -43,10 +38,6 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
   const tooltipId = useId(id, 'tooltip');
   const containerId = 'eds-tooltip-container';
   const shouldOpen = isMounted && title !== '';
-  const {
-    setTimeout,
-    clearTimeout
-  } = window;
   useEffect(() => {
     if (document.getElementById(containerId) === null) {
       const tooltipContainerElement = document.createElement('div');
@@ -57,7 +48,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     return () => {
       clearTimeout(openTimer.current);
     };
-  }, [clearTimeout]);
+  }, []);
 
   const openTooltip = () => {
     if (shouldOpen) {
@@ -77,9 +68,18 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
   const {
     styles,
     attributes
-  } = usePopper(anchorRef.current, popperEl, arrowRef, placement, 14);
+  } = usePopper({
+    anchorEl: anchorRef.current,
+    popperEl,
+    arrowRef,
+    placement,
+    offset: 14
+  });
   const props = {
     open,
+    style: { ...styles.popper,
+      ...style
+    },
     ...rest,
     ...attributes.popper
   };
@@ -99,7 +99,6 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
       id: tooltipId,
       role: "tooltip",
       ref: tooltipRef,
-      style: styles.popper,
       ...props,
       children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
         ref: setArrowRef,

package/dist/esm/components/TopBar/Actions.js

@@ -6,10 +6,11 @@ const StyledActions = styled.div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
-const Actions = /*#__PURE__*/forwardRef(function Actions({
-  children,
-  ...props
-}, ref) {
+const Actions = /*#__PURE__*/forwardRef(function Actions(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledActions, {
     ref: ref,
     ...props,

package/dist/esm/components/TopBar/CustomContent.js

@@ -6,10 +6,11 @@ const StyledCustomContent = styled.div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
-const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
-  children,
-  ...props
-}, ref) {
+const CustomContent = /*#__PURE__*/forwardRef(function CustomContent(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledCustomContent, {
     ref: ref,
     ...props,

package/dist/esm/components/TopBar/Header.js

@@ -6,10 +6,11 @@ const StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
-const Header = /*#__PURE__*/forwardRef(function Header({
-  children,
-  ...props
-}, ref) {
+const Header = /*#__PURE__*/forwardRef(function Header(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledHeader, {
     ref: ref,
     ...props,