@equinor/eds-core-react 0.14.2 → 0.15.0-dev.20211118

package/dist/esm/components/Progress/Star/StarProgress.js

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import { token } from './StarProgress.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const indeterminate = keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
+const determinate = keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
+const Svg = styled.svg.withConfig({
+  displayName: "StarProgress__Svg",
+  componentId: "sc-c0byj9-0"
+})(["fill:", ";", ""], token.background, ({
+  variant,
+  progress
+}) => variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused'));
+const StarProgress = /*#__PURE__*/forwardRef(function StarProgress({
+  variant = 'indeterminate',
+  value = null,
+  size = 48,
+  ...rest
+}, ref) {
+  const progress = Math.round(value);
+  const height = size * 1.2;
+  const width = size;
+  const props = { ...rest,
+    ref,
+    variant,
+    progress
+  };
+
+  if (variant === 'determinate') {
+    if (value !== undefined) {
+      props['aria-valuenow'] = progress;
+      props['aria-valuemin'] = 0;
+      props['aria-valuemax'] = 100;
+    }
+  }
+
+  return /*#__PURE__*/jsxs(Svg, { ...props,
+    role: "progressbar",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M32.756 34.6798L29.482 36.5817C29.4139 36.6219 29.3295 36.6227 29.2606 36.5829L25.9476 34.7151C25.7975 34.6306 25.7967 34.4149 25.9456 34.3284L29.2397 32.4256C29.3077 32.3858 29.3914 32.3858 29.4603 32.4248L32.754 34.2931C32.9033 34.3784 32.9041 34.5929 32.756 34.6798Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M25.9596 45.4706L22.6655 43.5867C22.5966 43.5469 22.554 43.4744 22.554 43.396V41.4289V39.5922C22.5519 39.4204 22.7381 39.3109 22.8878 39.397L26.1819 41.2981C26.25 41.3379 26.2926 41.4104 26.2934 41.4896V43.4268V45.2762C26.2947 45.4472 26.1085 45.5559 25.9596 45.4706Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M12.3022 47.7037V44.9795V42.6544C12.3022 42.5495 12.3576 42.4515 12.4482 42.3986L14.1262 41.4062L16.8143 39.8188C17.0119 39.7019 17.2617 39.8442 17.2625 40.0739L17.2633 42.7627V45.1456C17.2633 45.251 17.2079 45.3486 17.1165 45.4015L12.7496 47.9587C12.552 48.0748 12.3031 47.9325 12.3022 47.7037Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M0.221343 34.2106L6.76939 30.4056C6.90636 30.326 7.07449 30.3256 7.21227 30.4023L13.8378 34.1401C14.138 34.3095 14.14 34.7413 13.8415 34.9131L7.25492 38.7182C7.11795 38.7977 6.94941 38.7985 6.81204 38.7206L0.225854 34.9836C-0.0734986 34.8139 -0.075549 34.3833 0.221343 34.2106Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M6.03876 9.125L16.9237 15.5151C17.1513 15.6484 17.2903 15.8912 17.2903 16.1549V28.8331C17.2903 29.4076 16.665 29.7647 16.1704 29.4728L5.28546 23.0264C5.05869 22.8919 4.92008 22.6479 4.9209 22.3855V9.76307C4.92254 9.1902 5.54503 8.83467 6.03876 9.125Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M39.6262 1.07261V11.7603V19.3368C39.627 19.7178 39.4265 20.0709 39.0988 20.2644L31.4145 24.8195L23.3545 29.5964C22.6385 30.0192 21.7339 29.5029 21.7339 28.6717V10.3259C21.7339 9.94495 21.9356 9.5927 22.2641 9.39955L38.008 0.149533C38.7232 -0.270381 39.6241 0.24385 39.6262 1.07261Z"
+    })]
+  });
+}); // StarProgress.displayName = 'eds-star-progress'
+
+export { StarProgress };

package/dist/esm/components/Progress/Star/StarProgress.tokens.js

@@ -0,0 +1,16 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    logo: {
+      fill_positive: {
+        rgba: logoFillPositive
+      }
+    }
+  }
+} = tokens;
+const token = {
+  background: logoFillPositive
+};
+
+export { token };

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

@@ -0,0 +1,17 @@
+import { LinearProgress } from './Linear/LinearProgress.js';
+export { LinearProgress } from './Linear/LinearProgress.js';
+import { CircularProgress } from './Circular/CircularProgress.js';
+export { CircularProgress } from './Circular/CircularProgress.js';
+import { StarProgress } from './Star/StarProgress.js';
+export { StarProgress } from './Star/StarProgress.js';
+import { DotProgress } from './Dots/DotProgress.js';
+export { DotProgress } from './Dots/DotProgress.js';
+
+const Progress = {
+  Linear: LinearProgress,
+  Circular: CircularProgress,
+  Star: StarProgress,
+  Dots: DotProgress
+};
+
+export { Progress };

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,128 @@
+import { forwardRef, useMemo } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
+import { comfortable } from './Radio.tokens.js';
+import { jsxs, 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';
+
+/* eslint camelcase: "off" */
+const Input = styled.input.attrs(({
+  type = 'radio'
+}) => ({
+  type
+})).withConfig({
+  displayName: "Radio__Input",
+  componentId: "sc-we59oz-0"
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
+  theme,
+  iconSize
+}) => parseFloat(theme.clickbound.height) / iconSize, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  theme
+}) => outlineTemplate(theme.states.focus.outline));
+const StyledLabel = styled.label.withConfig({
+  displayName: "Radio__StyledLabel",
+  componentId: "sc-we59oz-1"
+})(["display:inline-flex;align-items:center;cursor:", ";"], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer');
+const StyledPath = styled.path.attrs(({
+  icon
+}) => ({
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: icon.svgPathData
+})).withConfig({
+  displayName: "Radio__StyledPath",
+  componentId: "sc-we59oz-2"
+})([""]);
+const Svg = styled.svg.attrs(({
+  height,
+  width,
+  fill
+}) => ({
+  name: null,
+  xmlns: 'http://www.w3.org/2000/svg',
+  height,
+  width,
+  fill
+})).withConfig({
+  displayName: "Radio__Svg",
+  componentId: "sc-we59oz-3"
+})(["grid-area:input;pointer-events:none;"]);
+const LabelText = styled.span.withConfig({
+  displayName: "Radio__LabelText",
+  componentId: "sc-we59oz-4"
+})(["", ""], typographyTemplate(comfortable.typography));
+const InputWrapper = styled.span.withConfig({
+  displayName: "Radio__InputWrapper",
+  componentId: "sc-we59oz-5"
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], ({
+  theme
+}) => spacingsTemplate(theme.spacings), ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  disabled
+}) => disabled ? 'transparent' : comfortable.states.hover.background);
+const Radio = /*#__PURE__*/forwardRef(function Radio({
+  label,
+  disabled = false,
+  className,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, comfortable);
+  const iconSize = 24;
+  const fill = disabled ? comfortable.states.disabled.background : comfortable.background;
+  const renderSVG = useMemo(() => {
+    return /*#__PURE__*/jsxs(Svg, {
+      width: iconSize,
+      height: iconSize,
+      viewBox: `0 0 ${iconSize} ${iconSize}`,
+      fill: fill,
+      "aria-hidden": true,
+      children: [/*#__PURE__*/jsx(StyledPath, {
+        icon: radio_button_selected,
+        name: "selected"
+      }), /*#__PURE__*/jsx(StyledPath, {
+        icon: radio_button_unselected,
+        name: "unselected"
+      })]
+    });
+  }, [fill]);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: label ? /*#__PURE__*/jsxs(StyledLabel, {
+      disabled: disabled,
+      className: className,
+      children: [/*#__PURE__*/jsxs(InputWrapper, {
+        disabled: disabled,
+        children: [/*#__PURE__*/jsx(Input, { ...rest,
+          ref: ref,
+          disabled: disabled,
+          iconSize: iconSize
+        }), renderSVG]
+      }), /*#__PURE__*/jsx(LabelText, {
+        children: label
+      })]
+    }) : /*#__PURE__*/jsxs(InputWrapper, {
+      disabled: disabled,
+      children: [/*#__PURE__*/jsx(Input, { ...rest,
+        ref: ref,
+        disabled: disabled,
+        iconSize: iconSize
+      }), renderSVG]
+    })
+  });
+});
+Radio.displayName = 'Radio';
+
+export { Radio };

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

@@ -0,0 +1,91 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      disabled__text: {
+        rgba: disabledText
+      }
+    }
+  },
+  typography: {
+    navigation: {
+      menu_title: labelTypography
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium_small,
+      x_small
+    }
+  },
+  clickbounds: {
+    default__base: clicboundSize,
+    compact__standard: compactClickboundSize
+  }
+} = tokens;
+const comfortable = {
+  background: primaryColor,
+  typography: labelTypography,
+  spacings: {
+    bottom: medium_small,
+    top: medium_small,
+    left: medium_small,
+    right: medium_small
+  },
+  clickbound: {
+    height: clicboundSize
+  },
+  states: {
+    hover: {
+      background: primaryHoverAlt
+    },
+    disabled: {
+      background: disabledText
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        style: 'dashed',
+        width: '1px',
+        color: focusOutlineColor,
+        offset: '11px'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        bottom: x_small,
+        top: x_small,
+        left: x_small,
+        right: x_small
+      },
+      clickbound: {
+        height: compactClickboundSize
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            style: 'dashed',
+            width: '1px',
+            color: focusOutlineColor,
+            offset: '3px'
+          }
+        }
+      }
+    }
+  }
+};
+
+export { comfortable };

package/dist/esm/components/Scrim/Scrim.js

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { scrim } from './Scrim.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { useHideBodyScroll } from '../../hooks/useHideBodyScroll.js';
+import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+
+const {
+  height,
+  width,
+  background
+} = scrim;
+const StyledScrim = styled.div.withConfig({
+  displayName: "Scrim__StyledScrim",
+  componentId: "sc-1fr7uvy-0"
+})(["width:", ";height:", ";background:", ";position:fixed;z-index:500;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height, background);
+const ScrimContent = styled.div.withConfig({
+  displayName: "Scrim__ScrimContent",
+  componentId: "sc-1fr7uvy-1"
+})(["width:auto;height:auto;"]);
+const Scrim = /*#__PURE__*/forwardRef(function Scrim({
+  children,
+  onClose,
+  isDismissable = false,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    isDismissable,
+    ref
+  };
+  const overflowState = document.body.style.overflow;
+  useHideBodyScroll(overflowState);
+  useGlobalKeyPress('Escape', e => {
+    if (isDismissable && onClose) {
+      onClose(e, false);
+    }
+  });
+
+  const handleMouseClose = event => {
+    if (event) {
+      if (event.type === 'click' && isDismissable) {
+        onClose && onClose(event, false);
+      }
+    }
+  };
+
+  const handleContentClick = event => {
+    // Avoid event bubbling inside dialog/content inside scrim
+    event.stopPropagation();
+  };
+
+  return /*#__PURE__*/jsx(StyledScrim, {
+    onClick: handleMouseClose,
+    ...props,
+    children: /*#__PURE__*/jsx(ScrimContent, {
+      onClick: handleContentClick,
+      children: children
+    })
+  });
+});
+
+export { Scrim };

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

@@ -0,0 +1,18 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__scrim: {
+        rgba: background
+      }
+    }
+  }
+} = tokens;
+const scrim = {
+  width: '100%',
+  height: '100%',
+  background
+};
+
+export { scrim };

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,180 @@
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { search as search$1, close } from '@equinor/eds-icons';
+import { search } from './Search.tokens.js';
+import { Icon } from '../Icon/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { setReactInputValue } from '../../utils/setReactInputValue.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  height,
+  spacings,
+  background,
+  typography,
+  border,
+  clickbound,
+  entities: {
+    icon,
+    placeholder
+  },
+  states
+} = search;
+const Container = styled.span.withConfig({
+  displayName: "Search__Container",
+  componentId: "sc-v8l23u-0"
+})(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), ({
+  isFocused
+}) => isFocused && css(["", ""], bordersTemplate(states.focus.border)), placeholder.typography.color, ({
+  disabled
+}) => disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
+const Input = styled.input.withConfig({
+  displayName: "Search__Input",
+  componentId: "sc-v8l23u-1"
+})(["min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;border:none;appearance:none;box-sizing:border-box;background:transparent;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], typographyTemplate(typography), ({
+  disabled
+}) => disabled && css(["cursor:not-allowed;"]));
+const InsideButton = styled.div.withConfig({
+  displayName: "Search__InsideButton",
+  componentId: "sc-v8l23u-2"
+})(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon.border), icon.clickbound.offset.top, icon.clickbound.height, ({
+  isActive
+}) => isActive && css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon.states.hover.background));
+const Search = /*#__PURE__*/forwardRef(function Search({
+  onChange,
+  defaultValue = '',
+  value,
+  className = '',
+  disabled = false,
+  onBlur,
+  onFocus,
+  ...rest
+}, ref) {
+  const isControlled = typeof value !== 'undefined';
+  const isActive = isControlled && value !== '' || defaultValue !== '';
+  const inputRef = useRef(null);
+  const [state, setState] = useState({
+    isActive,
+    isFocused: false
+  });
+  useEffect(() => {
+    setState(prevState => ({ ...prevState,
+      isActive
+    }));
+  }, [value, defaultValue, isActive]);
+
+  const handleOnClick = () => {
+    const inputEl = inputRef.current;
+    inputEl.focus();
+  };
+
+  const handleFocus = () => setState(prevState => ({ ...prevState,
+    isFocused: true
+  }));
+
+  const handleBlur = () => setState(prevState => ({ ...prevState,
+    isFocused: false
+  }));
+
+  const handleOnChange = event => {
+    setIsActive(event.target.value);
+  };
+
+  const handleOnDelete = () => {
+    const input = inputRef.current;
+    const clearedValue = '';
+    setReactInputValue(input, clearedValue);
+    setState(prevState => ({ ...prevState,
+      isActive: false
+    }));
+  };
+
+  const setIsActive = newValue => setState(prevState => ({ ...prevState,
+    isActive: newValue !== ''
+  }));
+  /** Applying props for controlled vs. uncontrolled scnarios */
+
+
+  const applyControllingProps = (props, value, defaultValue) => {
+    if (isControlled) {
+      return { ...props,
+        value
+      };
+    }
+
+    return { ...props,
+      defaultValue
+    };
+  };
+
+  const {
+    isFocused
+  } = state;
+  const size = 24;
+  const containerProps = {
+    isFocused,
+    className,
+    disabled,
+    role: 'search',
+    'aria-label': rest['aria-label'],
+    onClick: handleOnClick
+  };
+  const inputProps = applyControllingProps({ ...rest,
+    disabled,
+    ref: useCombinedRefs(inputRef, ref),
+    type: 'search',
+    role: 'searchbox',
+    'aria-label': 'search input',
+    onBlur: e => {
+      handleBlur();
+
+      if (onBlur) {
+        onBlur(e);
+      }
+    },
+    onFocus: e => {
+      handleFocus();
+
+      if (onFocus) {
+        onFocus(e);
+      }
+    },
+    onChange: e => {
+      handleOnChange(e);
+
+      if (onChange) {
+        onChange(e);
+      }
+    }
+  }, value, defaultValue);
+  const clearButtonProps = {
+    isActive: state.isActive,
+    size,
+    role: 'button',
+    onClick: e => {
+      e.stopPropagation();
+
+      if (state.isActive) {
+        handleOnDelete();
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs(Container, { ...containerProps,
+    children: [/*#__PURE__*/jsx(Icon, {
+      data: search$1,
+      "aria-hidden": true,
+      size: size
+    }), /*#__PURE__*/jsx(Input, { ...inputProps
+    }), /*#__PURE__*/jsx(InsideButton, { ...clearButtonProps,
+      "aria-label": "Clear search",
+      children: /*#__PURE__*/jsx(Icon, {
+        data: close,
+        size: size
+      })
+    })]
+  });
+}); // Search.displayName = 'eds-search'
+
+export { Search };

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

@@ -0,0 +1,96 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: background
+      }
+    },
+    interactive: {
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__resting: {
+        rgba: primaryColor
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: placeholderColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      small
+    }
+  },
+  typography: {
+    input: {
+      text: typography
+    }
+  }
+} = tokens;
+const search = {
+  background,
+  typography,
+  height: '36px',
+  clickbound: {
+    offset: {
+      top: '6px'
+    },
+    height: '48px'
+  },
+  spacings: {
+    left: small,
+    right: small,
+    top: '6px',
+    bottom: '6px'
+  },
+  border: {
+    type: 'border',
+    width: '1px',
+    style: 'solid',
+    color: 'transparent'
+  },
+  states: {
+    focus: {
+      border: {
+        type: 'border',
+        width: '1px',
+        style: 'solid',
+        color: primaryColor
+      }
+    }
+  },
+  entities: {
+    placeholder: {
+      typography: {
+        color: placeholderColor
+      }
+    },
+    icon: {
+      typography: {
+        color: placeholderColor
+      },
+      border: {
+        type: 'border',
+        radius: '50%'
+      },
+      states: {
+        hover: {
+          background: primaryHoverAlt
+        }
+      },
+      clickbound: {
+        offset: {
+          top: '6px'
+        },
+        height: '36px'
+      }
+    }
+  }
+};
+
+export { search };