@vimeo/iris/StoryControlBar-b3d81e88.js

Vimeo Design System

'use strict';

var tslib_es6 = require('./tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var React = require('react');
var color_colors = require('./color/colors.js');
var typography_Header_Header = require('./typography/Header/Header.js');
var tokens_core = require('./tokens/core.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var FullBleed = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  position: relative;\n  margin: -1rem;\n  padding: 0;\n  height: 100vh;\n"], ["\n  display: flex;\n  position: relative;\n  margin: -1rem;\n  padding: 0;\n  height: 100vh;\n"])));
var StoryPadded = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = tslib_es6.__makeTemplateObject(["\n  margin: 0 2rem;\n  padding: 0.5rem 0;\n"], ["\n  margin: 0 2rem;\n  padding: 0.5rem 0;\n"])));
var StoryVertical = styled__default["default"].div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  ", ";\n\n  padding: 1rem 0.5rem;\n  padding: ", ";\n\n  > * {\n    margin: 0.5rem 1rem;\n    min-width: ", ";\n  }\n"], ["\n  ", ";\n\n  padding: 1rem 0.5rem;\n  padding: ", ";\n\n  > * {\n    margin: 0.5rem 1rem;\n    min-width: ", ";\n  }\n"])), flexVertical, function (p) { return (p.center ? '4rem' : '1rem 0.5rem'); }, function (p) { return (p.defaultWidth ? 'unset' : '20rem'); });
var Layout = {
    FullBleed: FullBleed,
    StoryPadded: StoryPadded,
    StoryVertical: StoryVertical,
};
function flexVertical(_a) {
    var _b = _a.center, center = _b === void 0 ? false : _b;
    return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: ", ";\n  "], ["\n    display: flex;\n    flex-direction: column;\n    align-items: ", ";\n  "])), center ? 'center' : 'flex-start');
}
var templateObject_1$3, templateObject_2$1, templateObject_3, templateObject_4;

// export const Story = withTheme(
function Story(_a) {
    var children = _a.children, title = _a.title, _b = _a.width, width = _b === void 0 ? '700px' : _b, _c = _a.flex, flex = _c === void 0 ? false : _c, props = tslib_es6.__rest(_a, ["children", "title", "width", "flex"]);
    var theme = React.useContext(styled.ThemeContext);
    if (!theme)
        console.error('No theme detected!');
    return (React__default["default"].createElement(Wrapper, tslib_es6.__assign({}, props),
        React__default["default"].createElement(typography_Header_Header.Header, { size: "plusUltra" }, title),
        React__default["default"].createElement(Source, { width: width, flex: flex }, children)));
}
// );
var Wrapper = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = tslib_es6.__makeTemplateObject(["\n  padding: 2rem;\n  /* min-height: 100vh; */\n  background: ", ";\n"], ["\n  padding: 2rem;\n  /* min-height: 100vh; */\n  background: ", ";\n"])), function (props) {
    return props.theme.name === 'light' ? color_colors.white : color_colors.grayscale(850);
});
var Source = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  padding: 2rem;\n  border: ", ";\n  border-radius: 0.25rem;\n  max-width: ", ";\n  margin: 3rem 0;\n  display: ", ";\n  flex-wrap: ", ";\n"], ["\n  padding: 2rem;\n  border: ", ";\n  border-radius: 0.25rem;\n  max-width: ", ";\n  margin: 3rem 0;\n  display: ", ";\n  flex-wrap: ", ";\n"])), function (props) {
    return props.theme.name === 'light'
        ? '1px solid rgba(0, 0, 0, 0.1)'
        : '1px solid rgba(255, 255, 255, 0.2)';
}, function (props) { return props.width; }, function (props) { return (props.flex ? 'flex' : 'block'); }, function (props) { return (props.flex ? 'wrap' : 'nowrap'); });
var templateObject_1$2, templateObject_2;

styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 2rem;\n  font-weight: 600;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 2rem;\n  font-weight: 600;\n"])));
var templateObject_1$1;

styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  padding: 0.75rem;\n  border-radius: 0.75rem;\n  border: 2px solid ", ";\n  display: flex;\n  gap: 0.75rem;\n"], ["\n  padding: 0.75rem;\n  border-radius: 0.75rem;\n  border: 2px solid ", ";\n  display: flex;\n  gap: 0.75rem;\n"])), tokens_core.core.color.surface(200));
var templateObject_1;

exports.Layout = Layout;
exports.Story = Story;