dibk-design 1.1.9 → 2.0.0

package/dist/components/Button.module.scss

@@ -1,4 +1,5 @@
 @import "../style/global.scss";
+
 @include keyframes(pushnext) {
   0% {
     @include transform(rotate(45deg) translate3d(0, 0, 0));
@@ -26,7 +27,7 @@
   }
 }
 
-:local(.button) {
+.button {
   @include appearance(none);
   @include border-radius(0);
   @include transition(
@@ -53,7 +54,7 @@
     font-size: 20px;
   }
 
-  &:local(.hasTheme) {
+  &.hasTheme {
     &:hover,
     &:focus {
       filter: brightness(90%);
@@ -71,14 +72,14 @@
     outline-offset: 0px;
   }
 
-  &:local(.regular) {
+  &.regular {
     padding: 14px 24px;
     @media only screen and (min-width: $screen-sm) {
       padding: 17px 32px;
     }
   }
 
-  &:local(.small) {
+  &.small {
     padding: 6px 24px;
     min-width: 80px;
     line-height: 18px;
@@ -88,11 +89,11 @@
     }
   }
 
-  &:local(.default) {
+  &.default {
     background-color: #fff;
     color: $color-primary;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
+    &:not(.hasTheme) {
+      &:hover:not(.noHover),
       &:focus-visible,
       &:active {
         background-color: $color-primary;
@@ -105,11 +106,11 @@
     }
   }
 
-  &:local(.primary) {
+  &.primary {
     background-color: $color-primary;
     color: #fff;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
+    &:not(.hasTheme) {
+      &:hover:not(.noHover),
       &:focus-visible,
       &:active {
         background-color: #fff;
@@ -123,9 +124,9 @@
   }
 
   &:disabled {
-    &:local(.hasTheme),
-    &:not(:local(.hasTheme)) {
-      &:local(.default) {
+    &.hasTheme,
+    &:not(.hasTheme) {
+      &.default {
         background-color: #fff;
         cursor: default;
         opacity: 0.6;
@@ -149,7 +150,7 @@
           border-color: #afaba8;
         }
       }
-      &:local(.primary) {
+      &.primary {
         background-color: $color-primary;
         cursor: default;
         opacity: 0.6;
@@ -176,11 +177,11 @@
     }
   }
 
-  &:local(.rounded) {
+  &.rounded {
     border-radius: 20px;
   }
 
-  &:local(.hasArrowLeft) {
+  &.hasArrowLeft {
     &:before {
       @include transform(rotate(-135deg));
       @include calc("top", "50% - 0.4rem");
@@ -205,14 +206,14 @@
         @include animation(pushprev 0.8s linear infinite);
       }
     }
-    &:local(.default) {
+    &.default {
       &:before {
         border-color: $color-primary;
       }
     }
   }
 
-  &:local(.hasArrowRight) {
+  &.hasArrowRight {
     &:after {
       @include transform(rotate(45deg));
       @include calc("top", "50% - 0.4rem");
@@ -237,5 +238,10 @@
         @include animation(pushnext 0.8s linear infinite);
       }
     }
+    &.default {
+      &:after {
+        border-color: $color-primary;
+      }
+    }
   }
 }

package/dist/components/CheckBoxIcon.js

@@ -1,7 +1,5 @@
 "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
 });
@@ -23,67 +21,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 ? Object.setPrototypeOf.bind() : 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; } }
+var CheckBoxIcon = function CheckBoxIcon(props) {
+  var inlineStyle = {
+    height: props.size,
+    width: props.size,
+    fontSize: props.size
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  if (props.theme && props.checked) {
+    var _objectSpread2;
 
-var CheckBoxIcon = /*#__PURE__*/function (_React$Component) {
-  _inherits(CheckBoxIcon, _React$Component);
-
-  var _super = _createSuper(CheckBoxIcon);
-
-  function CheckBoxIcon() {
-    _classCallCheck(this, CheckBoxIcon);
-
-    return _super.apply(this, arguments);
+    inlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, !props.hasErrors && "color", (0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary")), _defineProperty(_objectSpread2, !props.hasErrors && props.showBox && "boxShadow", "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"))), _objectSpread2));
   }
 
-  _createClass(CheckBoxIcon, [{
-    key: "render",
-    value: function render() {
-      var inlineStyle = {
-        height: this.props.size,
-        width: this.props.size,
-        fontSize: this.props.size
-      };
-
-      if (this.props.theme && this.props.checked) {
-        inlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, {
-          color: (0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'),
-          boxShadow: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary')) // TODO: support theme error color
-
-        });
-      }
-
-      var props = {
-        className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.disabled ? _CheckBoxIconModule.default.disabled : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : '', " ").concat(this.props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ''),
-        style: inlineStyle
-      };
-      return /*#__PURE__*/_react.default.createElement("span", props, /*#__PURE__*/_react.default.createElement("span", {
-        "aria-hidden": true,
-        className: _CheckBoxIconModule.default.checkmark
-      }, this.props.checked ? this.props.checkmarkCharacter : ''));
-    }
-  }]);
-
-  return CheckBoxIcon;
-}(_react.default.Component);
+  var checkBoxIconProps = {
+    className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(props.checked ? _CheckBoxIconModule.default.checked : "", " ").concat(props.disabled ? _CheckBoxIconModule.default.disabled : "", " ").concat(props.showBox ? _CheckBoxIconModule.default.showBox : "", " ").concat(props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""),
+    style: inlineStyle
+  };
+  return _react.default.createElement("span", checkBoxIconProps, _react.default.createElement("span", {
+    "aria-hidden": true,
+    className: _CheckBoxIconModule.default.checkmark
+  }, props.checked ? props.checkmarkCharacter : ""));
+};
 
 CheckBoxIcon.propTypes = {
   size: _propTypes.default.string,
@@ -95,12 +54,12 @@ CheckBoxIcon.propTypes = {
   checkmarkCharacter: _propTypes.default.string
 };
 CheckBoxIcon.defaultProps = {
-  size: '20px',
+  size: "20px",
   checked: false,
   disabled: false,
   showBox: true,
   hasErrors: false,
-  checkmarkCharacter: '✔'
+  checkmarkCharacter: "✔"
 };
 var _default = CheckBoxIcon;
 exports.default = _default;

package/dist/components/CheckBoxIcon.module.scss

@@ -1,62 +1,62 @@
 @import "../style/global.scss";
 
-:local(.checkBoxIcon) {
-  @include border-radius(0);
-  @include transition(all 0.1s ease-in-out);
-  @include box-sizing(content-box);
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 10px;
-  width: 10px;
-  height: 10px;
-  min-width: 20px;
-  margin-right: 0.2em;
-  line-height: 1;
-  text-align: center;
-  cursor: pointer;
+.checkBoxIcon {
+    @include border-radius(0);
+    @include transition(all 0.1s ease-in-out);
+    @include box-sizing(content-box);
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 10px;
+    width: 10px;
+    height: 10px;
+    min-width: 20px;
+    margin-right: 0.2em;
+    line-height: 1;
+    text-align: center;
+    cursor: pointer;
 
-  &:local(.showBox) {
-    margin-right: 0.4em;
-    margin-top: 2px;
-    background: white;
-    &:not(:local(.hasErrors)) {
-      @include box-shadow(0 0 0 1px #6A6262);
+    &.showBox {
+        margin-right: 0.4em;
+        margin-top: 2px;
+        background: white;
+        &:not(.hasErrors) {
+            @include box-shadow(0 0 0 1px #6a6262);
+        }
+        &.hasErrors {
+            @include box-shadow(0 0 2px 1px $color-error);
+        }
     }
-    &:local(.hasErrors) {
-      @include box-shadow(0 0 2px 1px #9d2024);
-    }
-  }
 
-  &:local(.checked) {
-    color: $color-primary;
-    &:local(.hasErrors) {
-      span {
-        color: #9d2024;
-      }
-    }
-    &:local(.showBox) {
-      &:not(:local(.hasErrors)) {
-        @include box-shadow(0 0 0 1px #6A6262);
-      }
-      &:local(.hasErrors) {
-        @include box-shadow(0 0 2px 1px #9d2024);
-      }
+    &.checked {
+        color: $color-primary;
+        &.hasErrors {
+            span {
+                color: $color-error;
+            }
+        }
+        &.showBox {
+            &:not(.hasErrors) {
+                @include box-shadow(0 0 0 1px #6a6262);
+            }
+            &.hasErrors {
+                @include box-shadow(0 0 2px 1px $color-error);
+            }
+        }
     }
-  }
 
-  &:local(.disabled) {
-    opacity: 0.5;
-    background: rgba(0, 0, 0, 0.25);
-    cursor: default;
-  }
+    &.disabled {
+        opacity: 0.5;
+        background: rgba(0, 0, 0, 0.25);
+        cursor: default;
+    }
 
-  :local(.checkmark) {
-    font-size: 1em;
-    line-height: 0.75em;
-  }
-  :not(:local(.showBox)) {
-    &:local(.checkmark) {
-      line-height: 1.05em;
+    .checkmark {
+        font-size: 1em;
+        line-height: 0.75em;
+    }
+    :not(.showBox) {
+        &.checkmark {
+            line-height: 1.05em;
+        }
     }
-  }
 }

package/dist/components/CheckBoxInput.js

@@ -1,7 +1,5 @@
 "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
 });
@@ -17,68 +15,31 @@ var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.modul
 
 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 ? Object.setPrototypeOf.bind() : 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.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var CheckBoxInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(CheckBoxInput, _React$Component);
-
-  var _super = _createSuper(CheckBoxInput);
-
-  function CheckBoxInput() {
-    _classCallCheck(this, CheckBoxInput);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(CheckBoxInput, [{
-    key: "render",
-    value: function render() {
-      var labelProps = {
-        className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(this.props.contentOnly ? _CheckBoxInputModule.default.contentOnly : "", " ").concat(this.props.disabled ? _CheckBoxInputModule.default.disabled : "", " ").concat(this.props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ""),
-        htmlFor: this.props.id
-      };
-      var iconProps = {
-        checked: this.props.checked,
-        disabled: this.props.disabled,
-        theme: this.props.theme,
-        showBox: !this.props.contentOnly,
-        hasErrors: this.props.contentOnly && this.props.hasErrors,
-        checkmarkCharacter: this.props.checkmarkCharacter
-      };
-      var inputProps = {
-        id: this.props.id,
-        name: this.props.name || null,
-        type: "checkbox",
-        checked: this.props.checked,
-        disabled: this.props.disabled,
-        onChange: this.props.onChange,
-        tabIndex: this.props.tabIndex || null,
-        "aria-controls": this.props["aria-controls"]
-      };
-      return /*#__PURE__*/_react.default.createElement("label", labelProps, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, iconProps), /*#__PURE__*/_react.default.createElement("input", inputProps)) : /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, iconProps), /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
-    }
-  }]);
-
-  return CheckBoxInput;
-}(_react.default.Component);
+var CheckBoxInput = function CheckBoxInput(props) {
+  var labelProps = {
+    className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(props.contentOnly ? _CheckBoxInputModule.default.contentOnly : "", " ").concat(props.disabled ? _CheckBoxInputModule.default.disabled : "", " ").concat(props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ""),
+    htmlFor: props.id
+  };
+  var iconProps = {
+    checked: props.checked,
+    disabled: props.disabled,
+    theme: props.theme,
+    showBox: !props.contentOnly,
+    hasErrors: props.contentOnly && props.hasErrors,
+    checkmarkCharacter: props.checkmarkCharacter
+  };
+  var inputProps = {
+    id: props.id,
+    name: props.name || null,
+    type: "checkbox",
+    checked: props.checked,
+    disabled: props.disabled,
+    onChange: props.onChange,
+    tabIndex: props.tabIndex || null,
+    "aria-controls": props["aria-controls"]
+  };
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children));
+};
 
 CheckBoxInput.propTypes = {
   checked: _propTypes.default.bool,

package/dist/components/CheckBoxInput.module.scss

@@ -1,32 +1,32 @@
 @import "../style/global.scss";
 
-:local(.checkBoxInput) {
-  display: flex;
-  margin-right: 1em;
-  border: 1px solid transparent;
+.checkBoxInput {
+    display: flex;
+    margin-right: 1em;
+    border: 1px solid transparent;
 
-  &:not(:local(.contentOnly)):not(:local(.disabled)) {
-    cursor: pointer;
-    input {
-      cursor: pointer;
+    &:not(.contentOnly):not(.disabled) {
+        cursor: pointer;
+        input {
+            cursor: pointer;
+        }
     }
-  }
 
-  &:local(.hasErrors) {
-    span {
-      color: #9d2024;
+    &.hasErrors {
+        span {
+            color: $color-error;
+        }
     }
-  }
 
-  &:focus-within{    
-    outline-width: 2px;
-    outline-color: $color-focus-outline;
-    outline-style: auto;
-    outline-offset: 1px;
-  }
+    &:focus-within {
+        outline-width: 2px;
+        outline-color: $color-focus-outline;
+        outline-style: auto;
+        outline-offset: 1px;
+    }
 
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
+    input[type="checkbox"] {
+        opacity: 0;
+        position: absolute;
+    }
 }

package/dist/components/CheckBoxList.js

@@ -7,15 +7,22 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var CheckBoxList = function CheckBoxList(props) {
-  return /*#__PURE__*/_react.default.createElement("ul", {
+  var _props$legend;
+
+  return _react.default.createElement("fieldset", {
     className: _CheckBoxListModule.default.checkBoxList
-  }, props.children);
+  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend) : null, props.children);
 };
 
+CheckBoxList.propTypes = {
+  legend: _propTypes.default.string
+};
 var _default = CheckBoxList;
 exports.default = _default;

package/dist/components/CheckBoxList.module.scss

@@ -1,5 +1,17 @@
-:local(.checkBoxList) {
+@import "../style/global.scss";
+
+fieldset.checkBoxList {
     margin: 0;
     padding: 0;
-    list-style: none;
+    border: none;
+    legend {
+        color: #000;
+        display: block;
+        font-size: 1rem;
+        font-weight: bold;
+        line-height: 1.2;
+        margin-bottom: 2px;
+        font-family: $default-font;
+        overflow-wrap: break-word;
+    }
 }

package/dist/components/CheckBoxListItem.js

@@ -17,10 +17,6 @@ var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Dependencies
-// Components
-// Functions
-// Stylesheets
 var CheckBoxListItem = function CheckBoxListItem(props) {
   var listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null];
   var listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
@@ -34,9 +30,9 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
     theme: props.theme,
     checkmarkCharacter: props.checkmarkCharacter
   };
-  return /*#__PURE__*/_react.default.createElement("li", {
+  return _react.default.createElement("div", {
     className: listItemClassNameString
-  }, /*#__PURE__*/_react.default.createElement(_CheckBoxInput.default, inputProps, props.children));
+  }, _react.default.createElement(_CheckBoxInput.default, inputProps, props.children));
 };
 
 CheckBoxListItem.propTypes = {