dibk-design 0.4.44 → 0.4.47

package/dist/components/CheckBoxInput.md

@@ -1,58 +1,58 @@
-Checkbox input example:
-
-```js
-<div className="flex">
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
-  <span>Label for checked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
-  <span>Label for checked disabled checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
-  <span>Label for unchecked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
-  <span>Checked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
-  <span>Unchecked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
-  <span>Label for checked checkbox with custom checkmark</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-7" checked={true} checkmarkCharacter="✕" expandable={true}>
-  <span>Label for checkbox with aria-expanded true</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-8" checked={false} checkmarkCharacter="✕" expandable={true}>
-  <span>Label for checkbox with aria-expanded false</span>
-</CheckBoxInput>
-
-</div>
-```
-
-
-Themed Checkbox input example:
-
-```js
-import customTheme from 'data/customTheme';
-<div className="flex">
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
-  <span>Label for checked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
-  <span>Label for checked disabled checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
-  <span>Label for unchecked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
-  <span>Checked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
-  <span>Unchecked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
-  <span>Label for checked checkbox with custom checkmark</span>
-</CheckBoxInput>
-</div>
-```
+Checkbox input example:
+
+```js
+<div className="flex">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
+  <span>Label for checked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
+  <span>Label for unchecked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
+  <span>Checked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
+  <span>Unchecked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
+  <span>Label for checked checkbox with custom checkmark</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-7" checked={true} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded true</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-8" checked={false} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded false</span>
+</CheckBoxInput>
+
+</div>
+```
+
+
+Themed Checkbox input example:
+
+```js
+import customTheme from 'data/customTheme';
+<div className="flex">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
+  <span>Label for checked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
+  <span>Label for unchecked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
+  <span>Checked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
+  <span>Unchecked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
+  <span>Label for checked checkbox with custom checkmark</span>
+</CheckBoxInput>
+</div>
+```

package/dist/components/CheckBoxInput.module.scss

@@ -1,24 +1,24 @@
-@import "../style/global.scss";
-
-:local(.checkBoxInput) {
-  display: flex;
-  margin-right: 1em;
-
-  &:not(:local(.contentOnly)):not(:local(.disabled)) {
-    cursor: pointer;
-    input {
-      cursor: pointer;
-    }
-  }
-
-  &:local(.hasErrors) {
-    span {
-      color: #9d2024;
-    }
-  }
-
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxInput) {
+  display: flex;
+  margin-right: 1em;
+
+  &:not(:local(.contentOnly)):not(:local(.disabled)) {
+    cursor: pointer;
+    input {
+      cursor: pointer;
+    }
+  }
+
+  &:local(.hasErrors) {
+    span {
+      color: #9d2024;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/CheckBoxListItem.md

@@ -1,82 +1,82 @@
-Check box list item example:
-
-```js
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-1">
-  Label for checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-2">
-  Label for unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-3" contentOnly={true}>
-  Label for checked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-4" contentOnly={true}>
-  Label for unchecked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-5" checkmarkCharacter="✕">
-  Label for checked checkbox with custom checkmark
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-6" disabled={true}>
-  Label for disabled checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-7" disabled={true}>
-  Label for disabled unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-8" checkmarkCharacter="✕" disabled={true}>
-  Label for disabled checked checkbox with custom checkmark
-</CheckBoxListItem>
-```
-
-Compact check box list item example:
-
-```js
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
-  Label for checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
-  Label for unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
-  Label for checked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
-  Label for unchecked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-5" compact hasErrors>
-  Label for checked checkbox with error
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-6" compact hasErrors>
-  Label for unchecked checkbox with error
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-7" compact checkmarkCharacter="✕">
-  Label for checked checkbox with custom checkmark
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-8" compact disabled={true}>
-  Label for disabled checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-9" compact hasErrors disabled={true}>
-  Label for disabled checked checkbox with error
-</CheckBoxListItem>
-```
-
-Themed Check box list item example:
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-1" theme={customTheme}>
-    Label for checked checkbox
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-2" theme={customTheme}>
-    Label for unchecked checkbox
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-3" contentOnly={true} theme={customTheme}>
-    Label for checked checkbox with content only
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-4" contentOnly={true} theme={customTheme}>
-    Label for unchecked checkbox with content only
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-5" checkmarkCharacter="✕" theme={customTheme}>
-    Label for checked checkbox with custom checkmark
-  </CheckBoxListItem>
-</React.Fragment>
-```
+Check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-1">
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-2">
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-3" contentOnly={true}>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-4" contentOnly={true}>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-5" checkmarkCharacter="✕">
+  Label for checked checkbox with custom checkmark
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-6" disabled={true}>
+  Label for disabled checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-7" disabled={true}>
+  Label for disabled unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-8" checkmarkCharacter="✕" disabled={true}>
+  Label for disabled checked checkbox with custom checkmark
+</CheckBoxListItem>
+```
+
+Compact check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-5" compact hasErrors>
+  Label for checked checkbox with error
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-6" compact hasErrors>
+  Label for unchecked checkbox with error
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-7" compact checkmarkCharacter="✕">
+  Label for checked checkbox with custom checkmark
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-8" compact disabled={true}>
+  Label for disabled checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-9" compact hasErrors disabled={true}>
+  Label for disabled checked checkbox with error
+</CheckBoxListItem>
+```
+
+Themed Check box list item example:
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-1" theme={customTheme}>
+    Label for checked checkbox
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-2" theme={customTheme}>
+    Label for unchecked checkbox
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-3" contentOnly={true} theme={customTheme}>
+    Label for checked checkbox with content only
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-4" contentOnly={true} theme={customTheme}>
+    Label for unchecked checkbox with content only
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-5" checkmarkCharacter="✕" theme={customTheme}>
+    Label for checked checkbox with custom checkmark
+  </CheckBoxListItem>
+</React.Fragment>
+```

package/dist/components/CheckBoxListItem.module.scss

@@ -1,71 +1,71 @@
-@import "../style/global.scss";
-
-:local(.checkBoxListItem) {
-  @include box-sizing(content-box);
-  @include border-radius(5px);
-  @include transition(all 0.1s ease-in-out);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-  font-family: $default-font;
-  position: relative;
-  font-size: 17px;
-  color: #000;
-
-  &:not(:local(.contentOnly)):not(:local(.compact)) {
-    @include box-shadow(0 0 2px $color-dark-blue);
-    background: white;
-    margin-bottom: 10px;
-  }
-
-  &:local(.contentOnly) {
-    cursor: auto;
-    label {
-      cursor: auto;
-      padding: 5px 10px;
-    }
-  }
-
-  &:local(.disabled) {
-    label {
-      cursor: auto;
-    }
-  }
-
-  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
-    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
-  }
-
-  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
-    @include box-shadow(0 0 6px $color-dark-blue);
-  }
-
-  &:focus {
-    outline-color: #54acb8;
-  }
-
-  label {
-    width: 100%;
-    padding: 10px;
-    margin: 0;
-    cursor: pointer;
-  }
-
-  &:local(.compact) {
-    display: table;
-    label {
-      padding: 6px 4px;
-    }
-  }
-
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxListItem) {
+  @include box-sizing(content-box);
+  @include border-radius(5px);
+  @include transition(all 0.1s ease-in-out);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+  font-family: $default-font;
+  position: relative;
+  font-size: 17px;
+  color: #000;
+
+  &:not(:local(.contentOnly)):not(:local(.compact)) {
+    @include box-shadow(0 0 2px $color-dark-blue);
+    background: white;
+    margin-bottom: 10px;
+  }
+
+  &:local(.contentOnly) {
+    cursor: auto;
+    label {
+      cursor: auto;
+      padding: 5px 10px;
+    }
+  }
+
+  &:local(.disabled) {
+    label {
+      cursor: auto;
+    }
+  }
+
+  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
+    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+  }
+
+  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
+    @include box-shadow(0 0 6px $color-dark-blue);
+  }
+
+  &:focus {
+    outline-color: #54acb8;
+  }
+
+  label {
+    width: 100%;
+    padding: 10px;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &:local(.compact) {
+    display: table;
+    label {
+      padding: 6px 4px;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/Container.js

@@ -0,0 +1,60 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ContainerModule = _interopRequireDefault(require("./Container.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Container = /*#__PURE__*/function (_Component) {
+  _inherits(Container, _Component);
+
+  var _super = _createSuper(Container);
+
+  function Container() {
+    _classCallCheck(this, Container);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Container, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: _ContainerModule.default.container
+      }, this.props.children);
+    }
+  }]);
+
+  return Container;
+}(_react.Component);
+
+var _default = Container;
+exports.default = _default;

package/dist/components/Container.md

@@ -0,0 +1,7 @@
+Container example:
+
+```js
+<Container>
+  Container content here
+</Container>
+```

package/dist/components/Container.module.scss

@@ -0,0 +1,10 @@
+@import "../style/global.scss";
+
+:local(.container) {
+    margin: auto;
+    padding: 16px;
+    @media (min-width: $screen-sm) {
+        padding: 24px;
+        max-width: 980px;
+    }
+}