@vimeo/iris/StoryControlBar-5144b19a.js

Vimeo Design System

import { a as __makeTemplateObject, b as __rest, c as __assign } from './tslib.es6-7f0e734f.js';
import styled, { css, ThemeContext } from 'styled-components';
import React__default, { useContext } from 'react';
import { white, grayscale } from './color/colors.esm.js';
import { Header } from './typography/Header/Header.esm.js';
import { core } from './tokens/core.esm.js';

var FullBleed = styled.div(templateObject_1$3 || (templateObject_1$3 = __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.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  margin: 0 2rem;\n  padding: 0.5rem 0;\n"], ["\n  margin: 0 2rem;\n  padding: 0.5rem 0;\n"])));
var StoryVertical = styled.div(templateObject_3 || (templateObject_3 = __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 css(templateObject_4 || (templateObject_4 = __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 = __rest(_a, ["children", "title", "width", "flex"]);
    var theme = useContext(ThemeContext);
    if (!theme)
        console.error('No theme detected!');
    return (React__default.createElement(Wrapper, __assign({}, props),
        React__default.createElement(Header, { size: "plusUltra" }, title),
        React__default.createElement(Source, { width: width, flex: flex }, children)));
}
// );
var Wrapper = styled.div(templateObject_1$2 || (templateObject_1$2 = __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' ? white : grayscale(850);
});
var Source = styled.div(templateObject_2 || (templateObject_2 = __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.div(templateObject_1$1 || (templateObject_1$1 = __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.div(templateObject_1 || (templateObject_1 = __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"])), core.color.surface(200));
var templateObject_1;

export { Layout as L, Story as S };