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

const BigVideoButton = ({ icon, label, videoLength, ...rest }) => {
  const IconAdjust = styled.span({ paddingTop: 2 })

  const timestamp = getTimestamp(videoLength)

  // TODO: After Box moves to Styled Components, use one Box with the between prop for spacing
  return (
    
      
        {icon}

export var StyledModalHeaderTitle = styled.div(_templateObject6, function (_ref7) {
  var theme = _ref7.theme;
  return theme.text.primary;
});

// ================== Modal Content ==================
export var StyledModalContent = styled.div(_templateObject7, function (props) {
  return props.fullscreen ? null : "35rem";
}, function (props) {
  return props.scrollable && css(_templateObject8);
});

export var StyledAlert = styled.div(_templateObject9);

export var StyledAlertTitle = styled.span(_templateObject10, function (_ref8) {
  var theme = _ref8.theme;
  return theme.text.primary;
});

export var StyledAlertDescription = styled.div(_templateObject11, function (props) {
  return props.alert !== "none" ? props.theme[props.alert].main : null;
});
//============= Modal Footer ==============
export var StyledModalAction = styled.div(_templateObject12, function (_ref9) {
  var theme = _ref9.theme;
  return '.1rem solid ' + theme.border.primary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.background.default;
});
//=========== Helper Modal=================

justifyContent: 'space-between',
    alignItems: 'center',
    minHeight: 24,
    lineHeight: 1.6,
    marginY: 2,

    display: multiline ? 'block' : 'flex',
    input: {
      width: multiline ? '100%' : 48,
    },

    opacity: disabled ? 0.25 : 1,
  })
);

export const SwitchBase = styled.span(
  css({
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
    width: 28,
    height: 14,
    borderRadius: 'large',
    background: '#040404',
  })
);

export const SwitchToggle = styled.span(
  css(theme => ({
    background: 'white',
    width: 14,
    height: 14,

},
  [`${HiddenInput}:checked ~ & > div > ${FakeRadio}`]: {
    '& > span': {
      display: 'block',
    },
    borderColor: colorGreyShuttle,
  },
  [`${HiddenInput}:disabled ~ & > div > ${FakeRadio}`]: {
    borderColor: colorGreyGainsboro,
  },
  [`${HiddenInput}:disabled ~ & > div > div`]: {
    color: colorGreyGainsboro,
  },
}))

const InnerChecked = styled.span({
  width: '0.75rem',
  height: '0.75rem',
  borderRadius: '50%',
  backgroundColor: colorAccessibleGreen,
  display: 'none',
})

const StyledLabelAndDescriptionBox = styled(Box)({
  width: '100%',
})

const renderError = (error, errorId) => (
  
    {error || ''}
  
)

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Container = styled.span(props => {
  const defaults = {
    position: 'relative',
  };

  const style = { ...defaults, ...props.theme.marker };

  return style;
});

export default function Marker() {
  return ;
}

Marker.propTypes = {
  children: PropTypes.node,
};

function _templateObject$d() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: block;\n  height: 2px;\n"]);

  _templateObject$d = function _templateObject() {
    return data;
  };

  return data;
}
var Swatch$1 = styled.span(_templateObject$d(), function (_ref) {
  var swatchColor = _ref.swatchColor;
  return swatchColor || grey;
});
var Data$1 = styled.div(_templateObject2$2(), white);
var Divider$1 = styled.span(_templateObject3$1());

var TooltipItem = function TooltipItem(_ref2) {
  var color = _ref2.color,
      _ref2$dateFormat = _ref2.dateFormat,
      dateFormat = _ref2$dateFormat === void 0 ? TOOLTIP_DATE_FORMAT : _ref2$dateFormat,
      name = _ref2.name,
      value = _ref2.value;
  var timeFormat$1 = timeFormat(dateFormat);
  return React.createElement(React.Fragment, null, React.createElement(Data$1, null, value, " ", React.createElement(Divider$1, null, "on"), ' ', isValidDate(name) ? timeFormat$1(name) : name), React.createElement(Swatch$1, {
    swatchColor: color
  }));
};

var useDebounce = (function (callback, delay, deps) {
  var _useRef = useRef(null),
      current = _useRef.current;

theme: {
      components: { card },
    },
  }) => `
    margin: 0;
    font-size: ${card.plan.price.font.size}px;
    font-weight: ${card.plan.price.font.weight};
    color: ${
      selected
        ? `${card.plan.price.font.selected.color}`
        : `${card.plan.price.font.color}`
    };
`,
);

const Period = styled.span(
  ({
    selected,
    theme: {
      components: { card },
    },
  }) => `
    margin: 0;
    font-size: ${card.plan.period.font.size}px;
    padding-top: ${card.plan.period.font.padding.top}px;
    color: ${
      selected
        ? `${card.plan.period.font.selected.color}`
        : `${card.plan.period.font.color}`
    };
`,
);

boxShadow: shadows.primary,
  marginBottom: '1rem',
  padding: '2rem 1rem',
  flexDirection: 'column',
};
export const DetailsContent = styled.div(DetailsContentS);

export const DetailS = {
  fontSize: '1rem',
  marginBottom: '0rem',
  fontWeight: '300',
};
export const Detail = styled.h2(DetailS);

export const BoldSpanS = { fontWeight: '500' };
export const BoldSpan = styled.span(BoldSpanS);

export const RowS = {
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '1rem',
};
export const Row = styled.div(RowS);

export const DeteteAccountBtn = styled.div`
  margin: 0 auto;
  font-weight: 300;
  font-size: 14px;
  color: ${colors.profileFontColor};
  padding: 0.5rem 0;
  cursor: pointer;

}, {
  label: '25',
  value: 25
}, {
  label: '50',
  value: 50
}, {
  label: '75',
  value: 75
}, {
  label: '100',
  value: 100
}];
var Pagination = styled.div(_templateObject());
var RowsOnPage = styled.div(_templateObject2());
var RowsOnPageLabel = styled.span(_templateObject3());
var RowsOnPageSelect = styled(FloatingSelectPortal)(_templateObject4());

var paginationComponent = function paginationComponent(WrappedComponent) {
  var _dec, _class, _class2, _temp;

  var mapStateToProps = function mapStateToProps(state, ownProps) {
    var GRID = ownProps.grid;
    return {
      filterData: state.datagrid.getIn([GRID.id, 'config', 'filteringData', 'filterData'], Map()),
      isCreating: state.datagrid.getIn([GRID.id, 'session', 'isCreating'], false),
      isEditing: state.datagrid.getIn([GRID.id, 'session', 'isEditing'], false),
      page: state.datagrid.getIn([GRID.id, 'config', 'page']),
      rowsOnPage: state.datagrid.getIn([GRID.id, 'config', 'rowsOnPage']),
      sortColumn: state.datagrid.getIn([GRID.id, 'config', 'sortingData', 'sortColumn'], GRID.defaultSortColumn),
      sortOrder: state.datagrid.getIn([GRID.id, 'config', 'sortingData', 'sortOrder'], GRID.defaultSortOrder)
    };

const StyledPriceValue = styled.span(wordBreak, spacing.noSpacing, ({ size }) => {
  return {
    lineHeight: 1,
    ...priceValue[size],
  }
})

const StyledDollarSign = styled.span(({ size }) => {
  if (size === 'small') {
    return { medium, lineHeight: 1.5 }
  }
  return large
})

const StyledLargeDollarSign = styled.span({
  color: colorText,
  ...helveticaNeueLight45,
  fontSize: '1.75rem',
  lineHeight: '1.3',
  letterSpacing: '-1.6px',
  ...media.from('md').css({
    ...helveticaNeueThin35,
    fontSize: '2.75rem',
    letterSpacing: '0',
  }),
})

const StyledWrapperAlignment = styled(Box)({
  textAlign: 'left',
})