Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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',
})