@servesall/atoms 1.1.23 → 1.1.25

package/dist/bundle.web.esm/src/Layout/Layout.style.js

@@ -0,0 +1,176 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import styled from 'styled-components/native';
+import { Platform } from 'react-native-web';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var DEFAULT_FLEX_DIRECTION = Platform.OS === "web" ? "column" : "column";
+var CenterElement = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  flexdirection: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var CenterLeftElement = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-start";
+}, function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-start" : "center";
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var CenterRightElement = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-end";
+}, function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-end" : "center";
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginElement = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginHorizontalElement = styled.View(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginVerticalElement = styled.View(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginBottomElement = styled.View(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginTopElement = styled.View(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginRightElement = styled.View(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginLeftElement = styled.View(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingElement = styled.View(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingHorizontalElement = styled.View(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingVerticalElement = styled.View(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: ", " 0;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingTopElement = styled.View(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingBottomElement = styled.View(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding-bottom: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingLeftElement = styled.View(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingRightElement = styled.View(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var RowElement = styled.View(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  ", ";\n"])), function (props) {
+  return props.style;
+});
+var StretchElement = styled.View(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  align-items: stretch;\n  align-self: stretch;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var BoxElement = styled.View(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var BorderBottomElement = styled.View(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-bottom-width: 2px;\n  border-color: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.color7;
+}, function (props) {
+  return props.style;
+});
+var BorderTopElement = styled.View(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  border-top-width: 2px;\n  border-color: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.color7;
+}, function (props) {
+  return props.style;
+});
+var BorderBoxElement = styled.View(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.color7;
+}, function (props) {
+  return props.theme.borderRadiusSmall;
+}, function (props) {
+  return props.style;
+});
+var FullScreenElement = styled.View(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 11;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var WebSmallWrapperElement = styled.View(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n  width: 500px;\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var ImageWrapperElement = styled.View(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  ", ";\n"])), function (props) {
+  return props.theme.borderRadiusSmall;
+}, function (props) {
+  return props.theme.color7;
+}, function (props) {
+  return props.styles;
+});
+
+export { BorderBottomElement, BorderBoxElement, BorderTopElement, BoxElement, CenterElement, CenterLeftElement, CenterRightElement, FullScreenElement, ImageWrapperElement, MarginBottomElement, MarginElement, MarginHorizontalElement, MarginLeftElement, MarginRightElement, MarginTopElement, MarginVerticalElement, PaddingBottomElement, PaddingElement, PaddingHorizontalElement, PaddingLeftElement, PaddingRightElement, PaddingTopElement, PaddingVerticalElement, RowElement, StretchElement, WebSmallWrapperElement };

package/dist/bundle.web.esm/src/Layout/Layout.style.web.js

@@ -0,0 +1,181 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import styled from 'styled-components';
+import { Platform } from 'react-native-web';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
+var DEFAULT_FLEX_DIRECTION = Platform.OS === "web" ? "column" : "column";
+var CenterElement = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  flex-direction: ", ";\n  display: flex;\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var CenterLeftElement = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-start";
+}, function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-start" : "center";
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var CenterRightElement = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-end";
+}, function (props) {
+  return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-end" : "center";
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginElement = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginHorizontalElement = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginVerticalElement = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginBottomElement = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginTopElement = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginRightElement = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var MarginLeftElement = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.margin;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingElement = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingHorizontalElement = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingVerticalElement = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: ", " 0;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingTopElement = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingBottomElement = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding-bottom: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingLeftElement = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingRightElement = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var RowElement = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  display: flex;\n  ", ";\n"])), function (props) {
+  return props.style;
+});
+var StretchElement = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  align-items: stretch;\n  align-self: stretch;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var BoxElement = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var BorderBottomElement = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-bottom-width: 2px;\n  border-color: ", ";\n  border-style: solid;\n  ", ";\n"])), function (props) {
+  return props.theme.border;
+}, function (props) {
+  return props.style;
+});
+var BorderTopElement = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  border-top-width: 2px;\n  border-color: ", ";\n  border-style: solid;\n  ", ";\n"])), function (props) {
+  return props.theme.border;
+}, function (props) {
+  return props.style;
+});
+var BorderBoxElement = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n  border-style: solid;\n  ", ";\n"])), function (props) {
+  return props.theme.border;
+}, function (props) {
+  return props.theme.borderRadiusSmall;
+}, function (props) {
+  return props.style;
+});
+var FullScreenElement = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 11;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var WebSmallWrapperElement = styled.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n  width: 500px;\n  ", ";\n"])), function (props) {
+  return props.direction || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var ImageWrapperElement = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  ", ";\n"])), function (props) {
+  return props.theme.borderRadiusSmall;
+}, function (props) {
+  return props.theme.color7;
+}, function (props) {
+  return props.styles;
+});
+var RoundedBoxElement = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  overflow: hidden;\n  ", ";\n"])), function (props) {
+  return props.theme.borderRadiusSmall;
+}, function (props) {
+  return props.styles;
+});
+
+export { BorderBottomElement, BorderBoxElement, BorderTopElement, BoxElement, CenterElement, CenterLeftElement, CenterRightElement, FullScreenElement, ImageWrapperElement, MarginBottomElement, MarginElement, MarginHorizontalElement, MarginLeftElement, MarginRightElement, MarginTopElement, MarginVerticalElement, PaddingBottomElement, PaddingElement, PaddingHorizontalElement, PaddingLeftElement, PaddingRightElement, PaddingTopElement, PaddingVerticalElement, RoundedBoxElement, RowElement, StretchElement, WebSmallWrapperElement };

package/dist/bundle.web.esm/src/Layout/Margin.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginElement } from './Layout.style.web.js';
+
+var Margin = function Margin(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { Margin as default };

package/dist/bundle.web.esm/src/Layout/MarginBottom.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginBottomElement } from './Layout.style.web.js';
+
+var MarginBottom = function MarginBottom(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginBottomElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { MarginBottom as default };

package/dist/bundle.web.esm/src/Layout/MarginHorizontal.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginHorizontalElement } from './Layout.style.web.js';
+
+var MarginHorizontal = function MarginHorizontal(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginHorizontalElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { MarginHorizontal as default };

package/dist/bundle.web.esm/src/Layout/MarginLeft.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginLeftElement } from './Layout.style.web.js';
+
+var MarginLeft = function MarginLeft(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginLeftElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { MarginLeft as default };

package/dist/bundle.web.esm/src/Layout/MarginRight.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginRightElement } from './Layout.style.web.js';
+
+var MarginRight = function MarginRight(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginRightElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { MarginRight as default };

package/dist/bundle.web.esm/src/Layout/MarginTop.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginTopElement } from './Layout.style.web.js';
+
+var MarginTop = function MarginTop(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginTopElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { MarginTop as default };

package/dist/bundle.web.esm/src/Layout/MarginVertical.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { MarginVerticalElement } from './Layout.style.web.js';
+
+var MarginVertical = function MarginVertical(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(MarginVerticalElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { MarginVertical as default };

package/dist/bundle.web.esm/src/Layout/Padding.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingElement } from './Layout.style.web.js';
+
+var Padding = function Padding(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { Padding as default };

package/dist/bundle.web.esm/src/Layout/PaddingBottom.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingBottomElement } from './Layout.style.web.js';
+
+var PaddingBottom = function PaddingBottom(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingBottomElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { PaddingBottom as default };

package/dist/bundle.web.esm/src/Layout/PaddingHorizontal.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingHorizontalElement } from './Layout.style.web.js';
+
+var PaddingHorizontal = function PaddingHorizontal(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingHorizontalElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { PaddingHorizontal as default };

package/dist/bundle.web.esm/src/Layout/PaddingLeft.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingLeftElement } from './Layout.style.web.js';
+
+var PaddingLeft = function PaddingLeft(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingLeftElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { PaddingLeft as default };

package/dist/bundle.web.esm/src/Layout/PaddingRight.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingRightElement } from './Layout.style.web.js';
+
+var PaddingRight = function PaddingRight(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingRightElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { PaddingRight as default };

package/dist/bundle.web.esm/src/Layout/PaddingTop.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingTopElement } from './Layout.style.web.js';
+
+var PaddingTop = function PaddingTop(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingTopElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { PaddingTop as default };

package/dist/bundle.web.esm/src/Layout/PaddingVertical.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { PaddingVerticalElement } from './Layout.style.web.js';
+
+var PaddingVertical = function PaddingVertical(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(PaddingVerticalElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { PaddingVertical as default };

package/dist/bundle.web.esm/src/Layout/RoundedBox.js

@@ -0,0 +1,13 @@
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { RoundedBoxElement } from './Layout.style.web.js';
+
+var RoundedBox = function RoundedBox(_ref) {
+  var children = _ref.children,
+      styles = _ref.styles;
+  return /*#__PURE__*/React__default.createElement(RoundedBoxElement, {
+    styles: _objectSpread2({}, styles)
+  }, children);
+};
+
+export { RoundedBox as default };

package/dist/bundle.web.esm/src/Layout/RoundedTopBox.js

@@ -0,0 +1,23 @@
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { BoxElement } from './Layout.style.web.js';
+
+var RoundedTopBox = function RoundedTopBox(_ref) {
+  var children = _ref.children,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "" : _ref$color,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(BoxElement, {
+    style: _objectSpread2({
+      backgroundColor: color,
+      borderTopLeftRadius: 30,
+      borderTopRightRadius: 30,
+      overflow: "hidden"
+    }, style),
+    direction: direction
+  }, children);
+};
+
+export { RoundedTopBox as default };

package/dist/bundle.web.esm/src/Layout/Row.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { RowElement } from './Layout.style.web.js';
+
+var Row = function Row(_ref) {
+  var children = _ref.children,
+      style = _ref.style;
+  return /*#__PURE__*/React__default.createElement(RowElement, {
+    style: style
+  }, children);
+};
+
+export { Row as default };

package/dist/bundle.web.esm/src/Layout/Stretch.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { StretchElement } from './Layout.style.web.js';
+
+var Stretch = function Stretch(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React__default.createElement(StretchElement, {
+    style: style,
+    direction: direction
+  }, children);
+};
+
+export { Stretch as default };