How to use the styled-components.default function in styled-components

flex-grow: 0;
  flex-shrink: 0;
`;

function Documentation(props) {
  return React.createElement(StyledDocumentationTree, {
    active: props.active,
    className: 'docs-navigation',
    data: props.docs.children,
    onItemClick: props.onItemClick,
    onScrollRequest: props.onScrollRequest,
    prefix: '/doc'
  });
}

var StyledDocumentationTree = styled(NavigationTree)`
  margin-bottom: 5px;
  border-bottom: 1px solid ${function (props) {
  return props.theme.border;
}};
  padding-bottom: 5px;
`;
//# sourceMappingURL=index.js.map

{props.name}
          {props.meta &&
            {props.meta}
          }
        
        {
          props.active && props.children
        }
      
    );
  }
}

module.exports = NavigationItem;

const StyledIcon = styled(Icon)`
  flex: 0 0 auto;
  fill: ${props => props.theme.color};
  ${props => props.active && `fill: ${color(props.theme.active)}`};
  padding: 10px 0 10px 9px;
`;

const StyledName = styled.div`
  box-sizing: border-box;
  flex: 1 1 100%;
  padding: 10px;
`;

const StyledMeta = styled.div`
  flex: 1 0  auto;
  margin: 0 ${props => props.active ? 6 : 10}px 0 auto;
`;

font-size: ${props => props.variant === "big" ? 34 : 24}px;
  line-height: auto;
  padding: 0.6em;
  text-decoration: none;
  background: #100133;
  color: ${props => props.theme.colors.background};
  border-radius: 3px;
  margin-right: 20px;
  white-space: nowrap;
`;

const StageButtonText = styled(Components.Text)`
  color: ${props => props.theme.colors.background};
`;

const GithubButton = styled(Components.Link)`
  flex-shrink: 0;
  height: 40px;
  width: 40px;
  fill: color;
  color: #100133;
  svg {
    width: 100%;
    pointer-events: none;
  }
`;

const GitterButton = styled(Components.Link)`
  flex-shrink: 0;
  height: 40px;
  width: 40px;
  fill: color;

const StyledMainHeader = styled.div`
	width: 100%;
	height: auto;
  color: ${props => props.theme.color};
  background-color: ${props => props.theme.backgroundSecondary};
	${props => !props.image && `
		display: flex;
		padding: 10px 15px;
		color: ${props.theme.active};
		align-items: center;
		justify-content: center;
	`}
`;

const StyledHeaderLogo = styled(Icon)`
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
	${props => props.title && `
		margin-right: 5px;
	`}
`;

const StyledTitle = styled.span`
  font-family: ${FONTS.default};
`;

&:hover {
          background-color: ${colors.dark.disabled.background};
          color: ${colors.dark.disabled.foreground};
        }
      }
    `
  }
}

exports.ThemedProvider = (props) => (
  
  
)

const BaseButton = styled(Button) `
  height: 48px;
`

exports.BaseButton = BaseButton

exports.StepButton = (props) => (
  
  
)

exports.ChangeButton = styled(BaseButton) `
  color: ${colors.primary.background};
  padding: 0;
  width: 100%;
  height: auto;
  ${space}

const VERSION_COLOR = props => {
  const v = text(props.children);
  if (!semver.valid(v)) {
    return props.theme.colors.error;
  }
  if (semver.satisfies(v, "<=0.1")) {
    return props.theme.colors.error;
  }
  if (semver.satisfies(v, "> 0.1 < 1")) {
    return props.theme.colors.color;
  }
  return props.theme.colors.success;
};

const StyledVersion = styled(Version)`
  color: ${VERSION_COLOR};
  &:link,
  &:visited {
    text-decoration: none;
    color: ${VERSION_COLOR};
  }
`;

const StyledTag = styled(Tag)`
  display: inline-block;
  padding: 2px 4px;
  margin-top: 1.5px;
  margin-bottom: 1.5px;
  border: 1px solid ${props => props.theme.colors.color};
  border-radius: 3px;
  &:link,

onClick: this.handleClick,
          query: {
            'search-enabled': true,
            search: `${props.field}=${props.search}`
          },
          title: `Search other patterns with ${props.field} "${props.search}"`
        },
        props.children
      );
    }
  }]);

  return SearchTrigger;
}(React.Component);

var StyledVersion = styled(Version)`
  &:link,
  &:visited {
    text-decoration: none;
    color: ${function (props) {
  var v = text(props.children);
  if (!semver.valid(v)) {
    return props.theme.error;
  }
  if (semver.satisfies(v, '<=0.1')) {
    return props.theme.error;
  }
  if (semver.satisfies(v, '> 0.1 < 1')) {
    return props.theme.color;
  }
  return props.theme.success;
}};

)}
          {props.name}
          {props.meta && (
            {props.meta}
          )}
        
        {props.active && props.children}
      
    );
  }
}

module.exports = NavigationItem;

const StyledIcon = styled(Icon)`
  flex: 0 0 auto;
  fill: ${props => props.theme.color};
  ${props => props.active && `fill: ${color(props.theme.active)}`};
  padding: 10px 0 10px 9px;
`;

const StyledName = styled.div`
  box-sizing: border-box;
  flex: 1 1 100%;
  padding: 10px;
`;

const StyledMeta = styled.div`
  flex: 1 0 auto;
  margin: 0 ${props => (props.active ? 6 : 10)}px 0 auto;
`;

font-family: Muli;
  font-size: 14px;
  line-height: 1.29;
  text-align: right;
  color: #686978;
`;
exports.StyledRemove = styled_components_1.default.span `
  margin-left: 10px;
  padding-right: 10px;
`;
exports.StyledTHSite = styled_components_1.default.div `
`;
exports.StyledTHOther = styled_components_1.default.div `
  text-align: right;
`;
exports.StyledTHLast = styled_components_1.default(exports.StyledTHOther) `
  padding-right: 10px;
`;
exports.StyledToggle = styled_components_1.default.div `
  font-family: Poppins;
  font-size: 13px;
  color: #4c54d2;
  text-align: right;
  text-transform: capitalize;
`;
//# sourceMappingURL=style.js.map

display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: bold;
  color: ${colors.dark.foreground};

  &:hover, &:focus, &:active{
    color: ${colors.primary.foreground};
  }
`
exports.StepSelection = styled(Flex) `
  flex-wrap: wrap;
  justify-content: center;
`
exports.Footer = styled(Txt) `
  margin-top: 10px;
  color: ${colors.dark.disabled.foreground};
  font-size: 10px;
`
exports.Underline = styled(Txt.span) `
  border-bottom: 1px dotted;
  padding-bottom: 2px;
`
exports.DetailsText = styled(Txt.p) `
  color: ${colors.dark.disabled.foreground};
  margin-bottom: 0;
`