Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import React from 'react';
import styled from 'styled-components'
import { space, width, fontSize, color } from 'styled-system';
// Add styled-system functions to your component
const Box = styled.div`
${space}
${width}
${fontSize}
${color}
`;
export const Root = styled.div([], {
width: '50vw',
height: '70vh',
});
const SpaceBetween = styled.div`
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
`;
const ThanksText = styled.span`
font-size: 50px;
color: #ffffff;
`;
top: '0px',
width: 'inherit',
clear: 'both',
}
const bottomPosition = {
position: 'absolute',
bottom: '0px',
}
const fixedOverflow = {
overflowY: 'auto',
bottom: '0px',
}
const NavContainer = styled.div(props => ({
...(props.variant === 'top' && topPosition),
...(props.variant === 'bottom' && bottomPosition),
...(props.variant === 'fixed' && fixedPosition),
...(props.variant === 'fixedOverflow' && {
...fixedPosition,
...fixedOverflow,
}),
}))
const StyledUl = styled.ul({
listStyle: 'none',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
margin: '0',
borderTop: `1px solid ${colorGainsboro}`,
return props.theme.colors.dark.base;
});
var ToolWrapper = styled.div(_templateObject2, function (props) {
return props.theme.colors.text.base;
}, function (props) {
return props.tt || 'capitalize';
}, function (props) {
return props.active ? props.theme.colors.primary.lighter : 'inherit';
}, function (props) {
return props.theme.colors.text.light;
}, function (props) {
return props.theme.colors.primary.lighter;
});
var ToolIcon = styled.div(_templateObject3, function (props) {
return getIconStyles(props);
}, function (props) {
return getIconByName(props.name);
});
var ToolLabel = styled.div(_templateObject4);
var EffectsWrapper = styled.div(_templateObject5);
var EffectWrapper = styled.div(_templateObject6, function (props) {
return props.theme.textColor;
}, function (props) {
return props.theme.colors.primary.lighter;
});
var EffectIcon = styled.div(_templateObject7, function (props) {
import styled from "styled-components";
const TalkListLayout = styled.div({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
".talk-list": {
flex: "0 1 100%"
},
aside: {
flex: "0 0 100%"
},
".join-community": {
display: "none"
},
"@media (min-width: 800px)": {
flexDirection: "row",
aside: {
marginRight: "4rem",
const HeaderSubtextContainer = styled.div({ lineHeight: '1px' })
const TertiaryTextAlignmentContainer = styled.div({
...media.until('md').css({
alignSelf: 'flex-end',
}),
})
const ShowFromMd = styled.div({
display: 'none',
...media.from('md').css({
display: 'inline-block',
}),
})
const ShowUntilMd = styled.div({
display: 'inline-block',
...media.from('md').css({
display: 'none',
}),
})
class PanelWrapper extends React.Component {
constructor(props) {
super(props)
this.contentWrapper = null
}
state = {
open: this.props.open,
hover: false,
height: '100%'
}
});
}));
};
function _templateObject$3() {
var data = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n width: 100%;\n pointer-events: none;\n"]);
_templateObject$3 = function _templateObject() {
return data;
};
return data;
}
var StyledRail = styled.div(_templateObject$3());
var SledProgressRail = function SledProgressRail(_ref) {
var style = _ref.style;
return React.createElement(StyledRail, {
className: "sled-progress-rail"
});
};
function getX(viewCount, currentIndex) {
var goPrevNext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
return 100 - 100 / viewCount * (currentIndex + goPrevNext);
}
var SledProgressTrack = function SledProgressTrack() {
var _useStateContext = useStateContext(),
_useStateContext2 = _slicedToArray(_useStateContext, 1),
)
const Backdrop = styled.div(
extend({
position: 'sticky',
top: 0,
left: 0,
width: '100%',
height: '100%',
bg: 'surface',
opacity: themeGet('opacities.disabled')
}),
sx
)
const ScrollView = styled.div(
extend({
pointerEvents: 'none',
position: 'absolute',
top: 0,
left: 0,
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%'
})
)
if (__DEV__) {
Dialog.displayName = 'Modal.Root'
Backdrop.displayName = 'Modal.Backdrop'
import React from 'react'
import PropTypes from 'prop-types'
import Box from '@tds/core-box'
import Paragraph from '@tds/core-paragraph'
import Heading from '@tds/core-heading'
import { safeRest } from '@tds/util-helpers'
import { componentWithName } from '@tds/util-prop-types'
import { media } from '@tds/core-responsive'
import styled from 'styled-components'
const StyledImageAndQuote = styled.div({
display: 'flex',
flexDirection: 'column',
...media.from('sm').css({
flexDirection: 'row',
alignItems: 'center',
}),
})
const StyledImage = styled.div({
fontSize: 0,
marginBottom: '1rem',
maxWidth: '60px',
maxHeight: '60px',
...media.from('sm').css({
import styled from 'styled-components'
import { extend, sx, SxProps } from './utils'
export interface BoxProps extends SxProps {}
export const Box = styled.div(extend({}), sx)
export const Flex = styled.div(extend({ display: 'flex' }), sx)
export const Grid = styled.div(extend({ display: 'grid' }), sx)
if (__DEV__) {
Box.displayName = 'Box'
Flex.displayName = 'Flex'
Grid.displayName = 'Grid'
}
return props.theme.colors.primary.light;
});
var PreviousBtn = styled.div(_templateObject2, function (props) {
return getIconStyles(props);
}, getIconByName('previous'), function (props) {
return getActionIconStyle(props);
});
var NextBtn = styled.div(_templateObject2, function (props) {
return getIconStyles(props);
}, getIconByName('next'), function (props) {
return getActionIconStyle(props);
});
var SwitcherWrapper = styled.div(_templateObject3);
var SwitcherInput = styled.input(_templateObject4);
var SwitcherLabel = styled.label(_templateObject5);
var SwitcherInner = styled.span(_templateObject6, function (props) {
return props.checked ? '0' : '-100%';
});
var SwitcherSwitch = styled.span(_templateObject7, function (props) {
return props.checked ? '#36464d' : '#36464d';
}, function (props) {
return props.checked ? '0' : '37px';
});
var SwitcherBlock = styled.div(_templateObject8);