How to use the grommet/utils.deepMerge function in grommet

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Gremlin } from "grommet-icons/es6/icons/Gremlin";
import { Grommet as GrommetIcon } from "grommet-icons/es6/icons/Grommet";
import { Grommet, Box, RangeSelector, Stack, Text } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';
var customEdge = deepMerge(grommet, {
  rangeSelector: {
    edge: {
      type: React.createElement(Gremlin, {
        size: "large",
        color: "neutral-2"
      }) // it is also possible to use an actual node
      // type:  <div style="{{">,

    }
  }
});

var CustomEdgeControl = function CustomEdgeControl(_ref) {
  var _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
      rest = _objectWithoutPropertiesLoose(_ref, ["direction"]);</div>

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useReducer, useEffect } from 'react';
import { storiesOf } from '@storybook/react';
import { Box, Diagram, Grommet, grommet, Stack, Text } from 'grommet';
import { Diamond } from "grommet-icons/es6/icons/Diamond";
import { deepMerge } from 'grommet/utils';
import { data } from './data';
var customTheme = deepMerge(grommet, {
  diagram: {
    extend: "@keyframes \n  example {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n  path {\n    stroke-dasharray: 500;\n    stroke-dashoffset: 500;\n    animation: example 3s linear forwards;\n  }"
  }
});

var connection = function connection(fromTarget, toTarget, _temp) {
  var _ref = _temp === void 0 ? {} : _temp,
      rest = _extends({}, _ref);

  return _extends({
    fromTarget: fromTarget,
    toTarget: toTarget,
    anchor: 'vertical',
    color: 'accent-4',
    thickness: 'xsmall',
    round: true,

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';

import { Grommet, Box, RangeSelector, Stack, Text } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';

const customThemeRangeSelector = deepMerge(grommet, {
  global: {
    borderSize: {
      small: '6px',
    },
    edgeSize: {
      small: '13px',
    },
    spacing: '10px',
    colors: {
      control: 'accent-2',
      border: 'brand',
    },
  },
  rangeSelector: {
    background: {
      invert: {

var ThemedToggle = function ThemedToggle(props) {
  var _useState = useState(false),
      checked = _useState[0],
      setChecked = _useState[1];

  return React.createElement(Grommet, {
    theme: deepMerge(grommet, customToggleTheme)
  }, React.createElement(Box, {
    align: "center",
    pad: "large"
  }, React.createElement(CheckBox, _extends({}, props, {
    label: "Choice",
    checked: checked,
    onChange: function onChange(event) {
      return setChecked(event.target.checked);
    },
    toggle: true
  }))));
};

{...rest}
        />
        
      
    
  );
};

const customTheme = deepMerge(grommet, {
  radioButton: {
    gap: 'xsmall',
    size: '18px',
    hover: {
      border: {
        color: 'dark-3',
      },
    },
    check: {
      color: {
        light: 'neutral-1',
      },
    },
    icon: {
      size: '10px',
    },

import React from 'react';
import { storiesOf } from '@storybook/react';

import { Box, Grommet, Main, Nav } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';

const customTheme = deepMerge(grommet, {
  anchor: {
    textDecoration: 'none',
    fontWeight: 500,
    color: {
      dark: 'white',
      light: 'neutral-2',
    },
    hover: {
      textDecoration: 'none',
      fontWeight: 700,
    },
  },
});

const CustomAnchor = () => (

import React, { createRef, Component, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { storiesOf } from '@storybook/react';

import { CaretDown, FormClose } from 'grommet-icons';

import { Box, Button, CheckBox, Grommet, Select, Text } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';

import { theme as customSearchTheme } from './theme';
import { SearchInputContext } from './components/SearchInputContext';

const customRoundedTheme = deepMerge(grommet, {
  global: {
    control: {
      border: {
        radius: '24px',
      },
    },
    input: {
      weight: 400,
    },
    font: {
      size: '12px',
    },
  },
  text: {
    medium: '13px',
  },

var theme = useMemo(function () {
    return deepMerge(generate(baseSize), themes[themeName]);
  }, [baseSize, themeName]);
  var themeCanMode = useMemo(function () {

render() {
    const {
      background,
      baseSize,
      checkBox,
      radioButton,
      rangeSelector,
      tabIndex,
      themeName,
    } = this.state;
    const theme = deepMerge(generate(baseSize), themes[themeName]);

    const content = [
      
        Heading
        Paragraph
        
        Anchor
        <menu label="Menu"> {} }, { label: 'Two' }]}
        /&gt;
        <button label="Button"> {}} /&gt;
      ,
      
        </button></menu>

import React, { useReducer, useEffect } from 'react';
import { storiesOf } from '@storybook/react';

import { Box, Diagram, Grommet, grommet, Stack, Text } from 'grommet';
import { Diamond } from 'grommet-icons';
import { deepMerge } from 'grommet/utils';

import { data } from './data';

const customTheme = deepMerge(grommet, {
  diagram: {
    extend: `@keyframes 
  example {
    to {
      stroke-dashoffset: 0;
    }
  }
  path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: example 3s linear forwards;
  }`,
  },
});

const connection = (fromTarget, toTarget, { color, ...rest } = {}) => ({