@elliemae/ds-form-layout-blocks 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/form-layout-block-item/DSFormLayoutBlockItem.js

@@ -2,38 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactDesc = require('react-desc');
 var uid = require('uid');
-var formLayoutBlockItem_propTypes = require('./propTypes.js');
-var formLayoutBlockItem_styles = require('./styles.js');
-require('styled-components');
+var propTypes = require('./propTypes.js');
+var styles = require('./styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-/* eslint-disable complexity */
-
-var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
-  var label = props.label,
-      feedbackMessage = props.feedbackMessage,
-      validationMessage = props.validationMessage,
-      inputID = props.inputID,
-      children = props.children,
-      hasError = props.hasError,
-      leftLabel = props.leftLabel,
-      required = props.required,
-      optional = props.optional,
-      hideLabel = props.hideLabel,
-      fitContent = props.fitContent,
-      withHighlight = props.withHighlight,
-      _props$isGroup = props.isGroup,
-      isGroup = _props$isGroup === void 0 ? false : _props$isGroup;
-  var instanceUID = React.useMemo(function () {
-    return uid.uid(6);
-  }, []);
-  return /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledContainer, {
+const DSFormLayoutBlockItem = props => {
+  const {
+    label,
+    feedbackMessage,
+    validationMessage,
+    inputID,
+    children,
+    hasError,
+    leftLabel,
+    required,
+    optional,
+    hideLabel,
+    fitContent,
+    withHighlight,
+    isGroup = false
+  } = props;
+  const instanceUID = React.useMemo(() => uid.uid(6), []);
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     leftLabel: leftLabel,
     fitContent: fitContent,
     hideLabel: hideLabel,
@@ -41,32 +38,30 @@ var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
     as: isGroup ? 'fieldset' : 'div',
     isGroup: isGroup,
     "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
-  }, /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledLabel, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
     htmlFor: inputID,
     leftLabel: leftLabel,
     hideLabel: hideLabel,
     "aria-hidden": isGroup
-  }, label, (required || optional) && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledMark, {
+  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default["default"](styles.StyledMark, {
     required: required
-  })), isGroup && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.ScreenReaderOnly, {
+  })), isGroup && /*#__PURE__*/_jsx__default["default"](styles.ScreenReaderOnly, {
     as: "legend"
-  }, label), children, feedbackMessage && !hasError && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledMessage, {
+  }, void 0, label), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
     leftLabel: leftLabel,
     hideLabel: hideLabel,
     "aria-hidden": isGroup,
     id: "".concat(inputID || instanceUID, "_feedback_message")
-  }, feedbackMessage), validationMessage && hasError && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledMessage, {
+  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
     hasError: hasError,
     leftLabel: leftLabel,
     hideLabel: hideLabel,
     role: "alert"
-  }, validationMessage));
+  }, void 0, validationMessage));
 };
 
-DSFormLayoutBlockItem.propTypes = formLayoutBlockItem_propTypes.propTypes;
-var DSFormLayoutBlockItemWithSchema = reactDesc.describe(DSFormLayoutBlockItem);
-DSFormLayoutBlockItemWithSchema.propTypes = formLayoutBlockItem_propTypes.propTypes;
+const DSFormLayoutBlockItemWithSchema = reactDesc.describe(DSFormLayoutBlockItem);
+DSFormLayoutBlockItemWithSchema.propTypes = propTypes.propTypes;
 
 exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem;
 exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItemWithSchema;
-//# sourceMappingURL=DSFormLayoutBlockItem.js.map

package/cjs/form-layout-block-item/index.d.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.d.js.map

package/cjs/form-layout-block-item/index.js

@@ -2,16 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var formLayoutBlockItem_DSFormLayoutBlockItem = require('./DSFormLayoutBlockItem.js');
-require('react');
-require('react-desc');
-require('uid');
-require('./propTypes.js');
-require('./styles.js');
-require('styled-components');
+var DSFormLayoutBlockItem = require('./DSFormLayoutBlockItem.js');
 
 
 
-exports.DSFormLayoutBlockItem = formLayoutBlockItem_DSFormLayoutBlockItem.DSFormLayoutBlockItem;
-exports.DSFormLayoutBlockItemWithSchema = formLayoutBlockItem_DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;
-//# sourceMappingURL=index.js.map
+exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem.DSFormLayoutBlockItem;
+exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;

package/cjs/form-layout-block-item/propTypes.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 
-var propTypes = {
+const propTypes = {
   children: reactDesc.PropTypes.node.isRequired.description('Input component. '),
   label: reactDesc.PropTypes.string.isRequired.description('Label property for the input component. This property is required for accesibility purposes.'),
-  inputID: reactDesc.PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
+  inputID: reactDesc.PropTypes.string.description("String that matches the input component's id. If you are not using an isGroup property, you should provide an inputID for accesibility purposes. "),
   feedbackMessage: reactDesc.PropTypes.string.description('Feedback message to show below the input component.'),
   validationMessage: reactDesc.PropTypes.string.description('Validation message to show below the input component. It requires hasError property set to true to be visible.'),
   hasError: reactDesc.PropTypes.bool.description('Helper boolean property for the validation message.'),
@@ -21,4 +21,3 @@ var propTypes = {
 };
 
 exports.propTypes = propTypes;
-//# sourceMappingURL=propTypes.js.map

package/cjs/form-layout-block-item/styles.js

@@ -8,58 +8,47 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-196zgtg-0"
-})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], function (_ref) {
-  var fitContent = _ref.fitContent;
-  return fitContent ? 'width: fit-content;' : undefined;
-}, function (_ref2) {
-  var isGroup = _ref2.isGroup;
-  return isGroup ? 'border: none' : '';
-}, function (_ref3) {
-  var leftLabel = _ref3.leftLabel,
-      hideLabel = _ref3.hideLabel;
-  return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      withHighlight = _ref4.withHighlight;
-  return withHighlight ? "\n  &::after {\n        position: absolute;\n        content: '';\n        left: -".concat(theme.space.xxs, ";\n        top: -").concat(theme.space.xxxs, ";\n        z-index: -1;\n        width: calc(100% + ").concat(theme.space.xs, ");\n        height: calc(100%  + ").concat(theme.space.xxs, ");\n        background-color: #FEFBEE;\n        border : 1px solid #8F6326;\n        border-radius : 4px;\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n        }\n        &:hover, \n        &:focus-within {\n          &::after {\n            position: absolute;\n            content: '';\n            left: -").concat(theme.space.xxs, ";\n            top: -").concat(theme.space.xxxs, ";\n            z-index: -1;\n            width: calc(100% + ").concat(theme.space.xs, ");\n            height: calc(100%  + ").concat(theme.space.xxs, ");\n            background-color: #FFF9D3;\n            border : 1px solid #8F6326;\n            border-radius : 4px;\n            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n          }\n        }\n  ") : undefined;
-});
-var StyledLabel = /*#__PURE__*/styled__default['default'].label.withConfig({
+})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], ({
+  fitContent
+}) => fitContent ? 'width: fit-content;' : undefined, ({
+  isGroup
+}) => isGroup ? 'border: none' : '', ({
+  leftLabel,
+  hideLabel
+}) => leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined, ({
+  theme,
+  withHighlight
+}) => withHighlight ? "\n  &::after {\n        position: absolute;\n        content: '';\n        left: -".concat(theme.space.xxs, ";\n        top: -").concat(theme.space.xxxs, ";\n        z-index: -1;\n        width: calc(100% + ").concat(theme.space.xs, ");\n        height: calc(100%  + ").concat(theme.space.xxs, ");\n        background-color: #FEFBEE;\n        border : 1px solid #8F6326;\n        border-radius : 4px;\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n        }\n        &:hover, \n        &:focus-within {\n          &::after {\n            position: absolute;\n            content: '';\n            left: -").concat(theme.space.xxs, ";\n            top: -").concat(theme.space.xxxs, ";\n            z-index: -1;\n            width: calc(100% + ").concat(theme.space.xs, ");\n            height: calc(100%  + ").concat(theme.space.xxs, ");\n            background-color: #FFF9D3;\n            border : 1px solid #8F6326;\n            border-radius : 4px;\n            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n          }\n        }\n  ") : undefined);
+const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
   componentId: "sc-196zgtg-1"
-})(["display:flex;", " ", ""], function (_ref5) {
-  var theme = _ref5.theme,
-      leftLabel = _ref5.leftLabel;
-  return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
-}, function (_ref6) {
-  var hideLabel = _ref6.hideLabel;
-  return hideLabel ? "position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n  " : undefined;
-});
-var StyledMessage = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["display:flex;", " ", ""], ({
+  theme,
+  leftLabel
+}) => leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined, ({
+  hideLabel
+}) => hideLabel ? "position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n  " : undefined);
+const StyledMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-196zgtg-2"
-})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.fontSizes.microText[200];
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      hasError = _ref8.hasError;
-  return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
-}, function (_ref9) {
-  var leftLabel = _ref9.leftLabel,
-      hideLabel = _ref9.hideLabel;
-  return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
-});
-var StyledMark = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
+  theme
+}) => theme.fontSizes.microText[200], ({
+  theme,
+  hasError
+}) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500], ({
+  leftLabel,
+  hideLabel
+}) => leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined);
+const StyledMark = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-196zgtg-3"
-})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.space.xxxs;
-}, function (_ref11) {
-  var theme = _ref11.theme,
-      required = _ref11.required;
-  return required ? "\n  background-color: ".concat(theme.colors.danger[900], ";\n  ") : "\n  border: 1px solid ".concat(theme.colors.brand[600], ";\n  ");
-});
-var ScreenReaderOnly = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], ({
+  theme
+}) => theme.space.xxxs, ({
+  theme,
+  required
+}) => required ? "\n  background-color: ".concat(theme.colors.danger[900], ";\n  ") : "\n  border: 1px solid ".concat(theme.colors.brand[600], ";\n  "));
+const ScreenReaderOnly = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-196zgtg-4"
 })(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
 
@@ -68,4 +57,3 @@ exports.StyledContainer = StyledContainer;
 exports.StyledLabel = StyledLabel;
 exports.StyledMark = StyledMark;
 exports.StyledMessage = StyledMessage;
-//# sourceMappingURL=styles.js.map

package/cjs/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js

@@ -2,32 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var reactDesc = require('react-desc');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
-var formLayoutCheckboxGroup_propTypes = require('./propTypes.js');
-var formLayoutCheckboxGroup_styles = require('./styles.js');
-var formLayoutCheckboxGroup_defaultProps = require('./defaultProps.js');
-var formLayoutCheckboxGroup_config_useValidateProps = require('./config/useValidateProps.js');
-require('styled-components');
-require('@babel/runtime/helpers/typeof');
+var propTypes = require('./propTypes.js');
+var styles = require('./styles.js');
+var defaultProps = require('./defaultProps.js');
+var useValidateProps = require('./config/useValidateProps.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var DSFormLayoutCheckboxGroup = function DSFormLayoutCheckboxGroup(props) {
-  formLayoutCheckboxGroup_config_useValidateProps.useValidateProps(props);
-  var propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, formLayoutCheckboxGroup_defaultProps.defaultProps);
-  return /*#__PURE__*/React__default['default'].createElement(formLayoutCheckboxGroup_styles.StyledContainer, {
+const DSFormLayoutCheckboxGroup = props => {
+  useValidateProps.useValidateProps(props);
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     direction: propsWithDefault.direction
-  }, propsWithDefault.children);
+  }, void 0, propsWithDefault.children);
 };
 
-DSFormLayoutCheckboxGroup.propTypes = formLayoutCheckboxGroup_propTypes.propTypes;
-var DSFormLayoutCheckboxGroupWithSchema = reactDesc.describe(DSFormLayoutCheckboxGroup);
-DSFormLayoutCheckboxGroupWithSchema.propTypes = formLayoutCheckboxGroup_propTypes.propTypes;
+const DSFormLayoutCheckboxGroupWithSchema = reactDesc.describe(DSFormLayoutCheckboxGroup);
+DSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes.propTypes;
 
 exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup;
 exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroupWithSchema;
-//# sourceMappingURL=DSFormLayoutCheckboxGroup.js.map

package/cjs/form-layout-checkbox-group/config/useValidateProps.js

@@ -2,38 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _typeof = require('@babel/runtime/helpers/typeof');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var getVariableType = function getVariableType(arg) {
+const getVariableType = arg => {
   if (Array.isArray(arg)) return 'array';
   if (arg === null) return 'null';
   if (arg === undefined) return 'undefined';
-  return _typeof__default['default'](arg);
+  return typeof arg;
 };
 
-var throwCheckboxGroupDirectionError = function throwCheckboxGroupDirectionError(invalidProp) {
+const throwCheckboxGroupDirectionError = invalidProp => {
   throw new Error("You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n  Received: ".concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: \"horizontal\" or \"vertical\" (string)\n  "));
 };
 
-var throwCheckboxGroupChildrenError = function throwCheckboxGroupChildrenError() {
+const throwCheckboxGroupChildrenError = () => {
   throw new Error("You are trying to use a checkbox group without any React children, please provide at least one children to use.\n    \n  Received: (null)\n  Expected: React children\n  ");
 };
 
-var useValidateProps = function useValidateProps(props) {
+const useValidateProps = props => {
   if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {
     throwCheckboxGroupDirectionError(props.direction);
   }
 
-  if (!React__default['default'].Children.count(props.children)) {
+  if (!React__default["default"].Children.count(props.children)) {
     throwCheckboxGroupChildrenError();
   }
 };
 
 exports.useValidateProps = useValidateProps;
-//# sourceMappingURL=useValidateProps.js.map

package/cjs/form-layout-checkbox-group/defaultProps.js

@@ -2,9 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var defaultProps = {
+const defaultProps = {
   direction: 'horizontal'
 };
 
 exports.defaultProps = defaultProps;
-//# sourceMappingURL=defaultProps.js.map

package/cjs/form-layout-checkbox-group/index.d.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.d.js.map

package/cjs/form-layout-checkbox-group/index.js

@@ -2,19 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup = require('./DSFormLayoutCheckboxGroup.js');
-require('react');
-require('react-desc');
-require('@elliemae/ds-props-helpers');
-require('./propTypes.js');
-require('./styles.js');
-require('styled-components');
-require('./defaultProps.js');
-require('./config/useValidateProps.js');
-require('@babel/runtime/helpers/typeof');
+var DSFormLayoutCheckboxGroup = require('./DSFormLayoutCheckboxGroup.js');
 
 
 
-exports.DSFormLayoutCheckboxGroup = formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
-exports.DSFormLayoutCheckboxGroupWithSchema = formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;
-//# sourceMappingURL=index.js.map
+exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
+exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;

package/cjs/form-layout-checkbox-group/propTypes.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 
-var propTypes = {
+const propTypes = {
   direction: reactDesc.PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.')
 };
 
 exports.propTypes = propTypes;
-//# sourceMappingURL=propTypes.js.map

package/cjs/form-layout-checkbox-group/styles.js

@@ -8,28 +8,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1wopk9q-0"
-})(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], function (_ref) {
-  var direction = _ref.direction;
-  return direction === 'horizontal' ? 'row' : 'column';
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.space.xs;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.space.xs;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.space.xxs;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.space.xxs;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      direction = _ref6.direction;
-  return direction === 'horizontal' ? theme.space.s : '0';
-});
+})(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], ({
+  direction
+}) => direction === 'horizontal' ? 'row' : 'column', ({
+  theme
+}) => theme.space.xs, ({
+  theme
+}) => theme.space.xs, ({
+  theme
+}) => theme.space.xxs, ({
+  theme
+}) => theme.space.xxs, ({
+  theme,
+  direction
+}) => direction === 'horizontal' ? theme.space.s : '0');
 
 exports.StyledContainer = StyledContainer;
-//# sourceMappingURL=styles.js.map

package/cjs/index.d.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.d.js.map

package/cjs/index.js

@@ -2,25 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var formLayoutBlockItem_DSFormLayoutBlockItem = require('./form-layout-block-item/DSFormLayoutBlockItem.js');
-var formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup = require('./form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js');
-require('react');
-require('react-desc');
-require('uid');
-require('./form-layout-block-item/propTypes.js');
-require('./form-layout-block-item/styles.js');
-require('styled-components');
-require('@elliemae/ds-props-helpers');
-require('./form-layout-checkbox-group/propTypes.js');
-require('./form-layout-checkbox-group/styles.js');
-require('./form-layout-checkbox-group/defaultProps.js');
-require('./form-layout-checkbox-group/config/useValidateProps.js');
-require('@babel/runtime/helpers/typeof');
+var DSFormLayoutBlockItem = require('./form-layout-block-item/DSFormLayoutBlockItem.js');
+var DSFormLayoutCheckboxGroup = require('./form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js');
 
 
 
-exports.DSFormLayoutBlockItem = formLayoutBlockItem_DSFormLayoutBlockItem.DSFormLayoutBlockItem;
-exports.DSFormLayoutBlockItemWithSchema = formLayoutBlockItem_DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;
-exports.DSFormLayoutCheckboxGroup = formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
-exports.DSFormLayoutCheckboxGroupWithSchema = formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;
-//# sourceMappingURL=index.js.map
+exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem.DSFormLayoutBlockItem;
+exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;
+exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
+exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;

package/esm/form-layout-block-item/DSFormLayoutBlockItem.js

@@ -1,31 +1,28 @@
-import React, { useMemo } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useMemo } from 'react';
 import { describe } from 'react-desc';
 import { uid } from 'uid';
 import { propTypes } from './propTypes.js';
 import { StyledContainer, StyledLabel, StyledMark, ScreenReaderOnly, StyledMessage } from './styles.js';
-import 'styled-components';
 
-/* eslint-disable complexity */
-
-var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
-  var label = props.label,
-      feedbackMessage = props.feedbackMessage,
-      validationMessage = props.validationMessage,
-      inputID = props.inputID,
-      children = props.children,
-      hasError = props.hasError,
-      leftLabel = props.leftLabel,
-      required = props.required,
-      optional = props.optional,
-      hideLabel = props.hideLabel,
-      fitContent = props.fitContent,
-      withHighlight = props.withHighlight,
-      _props$isGroup = props.isGroup,
-      isGroup = _props$isGroup === void 0 ? false : _props$isGroup;
-  var instanceUID = useMemo(function () {
-    return uid(6);
-  }, []);
-  return /*#__PURE__*/React.createElement(StyledContainer, {
+const DSFormLayoutBlockItem = props => {
+  const {
+    label,
+    feedbackMessage,
+    validationMessage,
+    inputID,
+    children,
+    hasError,
+    leftLabel,
+    required,
+    optional,
+    hideLabel,
+    fitContent,
+    withHighlight,
+    isGroup = false
+  } = props;
+  const instanceUID = useMemo(() => uid(6), []);
+  return /*#__PURE__*/_jsx(StyledContainer, {
     leftLabel: leftLabel,
     fitContent: fitContent,
     hideLabel: hideLabel,
@@ -33,31 +30,29 @@ var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
     as: isGroup ? 'fieldset' : 'div',
     isGroup: isGroup,
     "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
-  }, /*#__PURE__*/React.createElement(StyledLabel, {
+  }, void 0, /*#__PURE__*/_jsx(StyledLabel, {
     htmlFor: inputID,
     leftLabel: leftLabel,
     hideLabel: hideLabel,
     "aria-hidden": isGroup
-  }, label, (required || optional) && /*#__PURE__*/React.createElement(StyledMark, {
+  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx(StyledMark, {
     required: required
-  })), isGroup && /*#__PURE__*/React.createElement(ScreenReaderOnly, {
+  })), isGroup && /*#__PURE__*/_jsx(ScreenReaderOnly, {
     as: "legend"
-  }, label), children, feedbackMessage && !hasError && /*#__PURE__*/React.createElement(StyledMessage, {
+  }, void 0, label), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx(StyledMessage, {
     leftLabel: leftLabel,
     hideLabel: hideLabel,
     "aria-hidden": isGroup,
     id: "".concat(inputID || instanceUID, "_feedback_message")
-  }, feedbackMessage), validationMessage && hasError && /*#__PURE__*/React.createElement(StyledMessage, {
+  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx(StyledMessage, {
     hasError: hasError,
     leftLabel: leftLabel,
     hideLabel: hideLabel,
     role: "alert"
-  }, validationMessage));
+  }, void 0, validationMessage));
 };
 
-DSFormLayoutBlockItem.propTypes = propTypes;
-var DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);
+const DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);
 DSFormLayoutBlockItemWithSchema.propTypes = propTypes;
 
 export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };
-//# sourceMappingURL=DSFormLayoutBlockItem.js.map

package/esm/form-layout-block-item/index.d.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=index.d.js.map

package/esm/form-layout-block-item/index.js

@@ -1,8 +1 @@
 export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema } from './DSFormLayoutBlockItem.js';
-import 'react';
-import 'react-desc';
-import 'uid';
-import './propTypes.js';
-import './styles.js';
-import 'styled-components';
-//# sourceMappingURL=index.js.map

package/esm/form-layout-block-item/propTypes.js

@@ -1,9 +1,9 @@
 import { PropTypes } from 'react-desc';
 
-var propTypes = {
+const propTypes = {
   children: PropTypes.node.isRequired.description('Input component. '),
   label: PropTypes.string.isRequired.description('Label property for the input component. This property is required for accesibility purposes.'),
-  inputID: PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
+  inputID: PropTypes.string.description("String that matches the input component's id. If you are not using an isGroup property, you should provide an inputID for accesibility purposes. "),
   feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),
   validationMessage: PropTypes.string.description('Validation message to show below the input component. It requires hasError property set to true to be visible.'),
   hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),
@@ -17,4 +17,3 @@ var propTypes = {
 };
 
 export { propTypes };
-//# sourceMappingURL=propTypes.js.map