@elliemae/ds-form-layout-blocks 2.0.0-alpha.1 → 2.0.0-alpha.13

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
+var React = require('react');
 var reactDesc = require('react-desc');
+var uid = require('uid');
 var propTypes = require('./propTypes.js');
 var styles = require('./styles.js');
 
@@ -17,7 +18,7 @@ const DSFormLayoutBlockItem = props => {
     label,
     feedbackMessage,
     validationMessage,
-    labelFor,
+    inputID,
     children,
     hasError,
     leftLabel,
@@ -25,24 +26,38 @@ const DSFormLayoutBlockItem = props => {
     optional,
     hideLabel,
     fitContent,
-    withHighlight
+    withHighlight,
+    isGroup = false
   } = props;
-  return /*#__PURE__*/_jsx__default['default'](styles.StyledContainer, {
+  const instanceUID = React.useMemo(() => uid.uid(6), []);
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     leftLabel: leftLabel,
     fitContent: fitContent,
     hideLabel: hideLabel,
-    withHighlight: withHighlight
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styles.StyledLabel, {
-    htmlFor: labelFor,
+    withHighlight: withHighlight,
+    as: isGroup ? 'fieldset' : 'div',
+    isGroup: isGroup,
+    "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
+    htmlFor: inputID,
     leftLabel: leftLabel,
-    hideLabel: hideLabel
-  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default['default'](styles.StyledMark, {
+    hideLabel: hideLabel,
+    "aria-hidden": isGroup
+  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default["default"](styles.StyledMark, {
     required: required
-  })), children, (validationMessage || feedbackMessage) && /*#__PURE__*/_jsx__default['default'](styles.StyledMessage, {
+  })), isGroup && /*#__PURE__*/_jsx__default["default"](styles.ScreenReaderOnly, {
+    as: "legend"
+  }, 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")
+  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
     hasError: hasError,
     leftLabel: leftLabel,
-    hideLabel: hideLabel
-  }, void 0, hasError ? validationMessage : feedbackMessage));
+    hideLabel: hideLabel,
+    role: "alert"
+  }, void 0, validationMessage));
 };
 
 const DSFormLayoutBlockItemWithSchema = reactDesc.describe(DSFormLayoutBlockItem);

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

@@ -7,7 +7,7 @@ var reactDesc = require('react-desc');
 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.'),
-  labelFor: reactDesc.PropTypes.string.isRequired.description("String that matches the input component's id. 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."),
   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.'),
@@ -16,7 +16,8 @@ const propTypes = {
   fitContent: reactDesc.PropTypes.bool.description('Set the width of the layout to the input component.'),
   leftLabel: reactDesc.PropTypes.bool.description('Adds the label at the left of the input component.'),
   hideLabel: reactDesc.PropTypes.bool.description('Hides the input label. It still requires label and labelFor property for accesibility purposes'),
-  withHighlight: reactDesc.PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.')
+  withHighlight: reactDesc.PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.'),
+  isGroup: reactDesc.PropTypes.bool.description('Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.')
 };
 
 exports.propTypes = propTypes;

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

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

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

@@ -18,7 +18,7 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 const DSFormLayoutCheckboxGroup = props => {
   useValidateProps.useValidateProps(props);
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
-  return /*#__PURE__*/_jsx__default['default'](styles.StyledContainer, {
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     direction: propsWithDefault.direction
   }, void 0, propsWithDefault.children);
 };

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

@@ -16,19 +16,11 @@ const getVariableType = arg => {
 };
 
 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.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: "horizontal" or "vertical" (string)
-  `);
+  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  "));
 };
 
 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.
-    
-  Received: (null)
-  Expected: React children
-  `);
+  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  ");
 };
 
 const useValidateProps = props => {
@@ -36,7 +28,7 @@ const useValidateProps = props => {
     throwCheckboxGroupDirectionError(props.direction);
   }
 
-  if (!React__default['default'].Children.count(props.children)) {
+  if (!React__default["default"].Children.count(props.children)) {
     throwCheckboxGroupChildrenError();
   }
 };

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

@@ -8,21 +8,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const 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:", ";}"], ({
-  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');
+})(["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:", ";}"], _ref => {
+  let {
+    direction
+  } = _ref;
+  return direction === 'horizontal' ? 'row' : 'column';
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space.xs;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space.xxs;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space.xxs;
+}, _ref6 => {
+  let {
+    theme,
+    direction
+  } = _ref6;
+  return direction === 'horizontal' ? theme.space.s : '0';
+});
 
 exports.StyledContainer = StyledContainer;

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

@@ -1,15 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
+import { useMemo } from 'react';
 import { describe } from 'react-desc';
+import { uid } from 'uid';
 import { propTypes } from './propTypes.js';
-import { StyledContainer, StyledLabel, StyledMark, StyledMessage } from './styles.js';
+import { StyledContainer, StyledLabel, StyledMark, ScreenReaderOnly, StyledMessage } from './styles.js';
 
 const DSFormLayoutBlockItem = props => {
   const {
     label,
     feedbackMessage,
     validationMessage,
-    labelFor,
+    inputID,
     children,
     hasError,
     leftLabel,
@@ -17,24 +18,38 @@ const DSFormLayoutBlockItem = props => {
     optional,
     hideLabel,
     fitContent,
-    withHighlight
+    withHighlight,
+    isGroup = false
   } = props;
+  const instanceUID = useMemo(() => uid(6), []);
   return /*#__PURE__*/_jsx(StyledContainer, {
     leftLabel: leftLabel,
     fitContent: fitContent,
     hideLabel: hideLabel,
-    withHighlight: withHighlight
+    withHighlight: withHighlight,
+    as: isGroup ? 'fieldset' : 'div',
+    isGroup: isGroup,
+    "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
   }, void 0, /*#__PURE__*/_jsx(StyledLabel, {
-    htmlFor: labelFor,
+    htmlFor: inputID,
     leftLabel: leftLabel,
-    hideLabel: hideLabel
+    hideLabel: hideLabel,
+    "aria-hidden": isGroup
   }, void 0, label, (required || optional) && /*#__PURE__*/_jsx(StyledMark, {
     required: required
-  })), children, (validationMessage || feedbackMessage) && /*#__PURE__*/_jsx(StyledMessage, {
+  })), isGroup && /*#__PURE__*/_jsx(ScreenReaderOnly, {
+    as: "legend"
+  }, void 0, label), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx(StyledMessage, {
+    leftLabel: leftLabel,
+    hideLabel: hideLabel,
+    "aria-hidden": isGroup,
+    id: "".concat(inputID || instanceUID, "_feedback_message")
+  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx(StyledMessage, {
     hasError: hasError,
     leftLabel: leftLabel,
-    hideLabel: hideLabel
-  }, void 0, hasError ? validationMessage : feedbackMessage));
+    hideLabel: hideLabel,
+    role: "alert"
+  }, void 0, validationMessage));
 };
 
 const DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);

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

@@ -3,7 +3,7 @@ import { PropTypes } from 'react-desc';
 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.'),
-  labelFor: PropTypes.string.isRequired.description("String that matches the input component's id. 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."),
   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.'),
@@ -12,7 +12,8 @@ const propTypes = {
   fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),
   leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),
   hideLabel: PropTypes.bool.description('Hides the input label. It still requires label and labelFor property for accesibility purposes'),
-  withHighlight: PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.')
+  withHighlight: PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.'),
+  isGroup: PropTypes.bool.description('Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.')
 };
 
 export { propTypes };

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

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

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

@@ -8,19 +8,11 @@ const getVariableType = arg => {
 };
 
 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.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: "horizontal" or "vertical" (string)
-  `);
+  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  "));
 };
 
 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.
-    
-  Received: (null)
-  Expected: React children
-  `);
+  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  ");
 };
 
 const useValidateProps = props => {

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

@@ -2,19 +2,37 @@ import styled from 'styled-components';
 
 const StyledContainer = /*#__PURE__*/styled.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:", ";}"], ({
-  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');
+})(["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:", ";}"], _ref => {
+  let {
+    direction
+  } = _ref;
+  return direction === 'horizontal' ? 'row' : 'column';
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space.xs;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space.xxs;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space.xxs;
+}, _ref6 => {
+  let {
+    theme,
+    direction
+  } = _ref6;
+  return direction === 'horizontal' ? theme.space.s : '0';
+});
 
 export { StyledContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-layout-blocks",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Layout",
   "module": "./esm/index.js",
@@ -72,16 +72,17 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.0.0-alpha.1",
-    "react-desc": "~4.1.3"
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.13",
+    "react-desc": "~4.1.3",
+    "uid": "~2.0.0"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/form-layout-block-item/DSFormLayoutBlockItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { DSFormLayoutBlockItemPropsT as Props } from './index.d';
 declare const DSFormLayoutBlockItem: {
@@ -5,17 +6,72 @@ declare const DSFormLayoutBlockItem: {
     propTypes: {
         children: any;
         label: any;
-        labelFor: any;
-        feedbackMessage: any;
-        validationMessage: any;
-        hasError: any;
-        required: any;
-        optional: any;
-        fitContent: any;
-        leftLabel: any;
-        hideLabel: any;
-        withHighlight: any;
+        inputID: any;
+        feedbackMessage: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        validationMessage: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        hasError: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        required: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        optional: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        fitContent: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        leftLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        hideLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        withHighlight: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        isGroup: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSFormLayoutBlockItemWithSchema: any;
+declare const DSFormLayoutBlockItemWithSchema: {
+    (props?: Props | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };

package/types/form-layout-block-item/index.d.d.ts

@@ -2,7 +2,7 @@
 export interface DSFormLayoutBlockItemPropsT {
     children: JSX.Element;
     label: string;
-    labelFor: string;
+    inputID: string;
     validationMessage?: string;
     feedbackMessage?: string;
     hasError?: boolean;
@@ -12,6 +12,7 @@ export interface DSFormLayoutBlockItemPropsT {
     optional?: boolean;
     hideLabel?: boolean;
     withHighlight?: boolean;
+    isGroup?: boolean;
 }
 export interface DSFormLayoutBlockItemStyledMessageT {
     hasError?: boolean;
@@ -23,6 +24,7 @@ export interface DSFormLayoutBlockItemStyledContainerT {
     fitContent?: boolean;
     hideLabel?: boolean;
     withHighlight?: boolean;
+    isGroup?: boolean;
 }
 export interface DSFormLayoutBlockItemStyledLabelT {
     leftLabel?: boolean;

package/types/form-layout-block-item/propTypes.d.ts

@@ -1,14 +1,66 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 export declare const propTypes: {
     children: any;
     label: any;
-    labelFor: any;
-    feedbackMessage: any;
-    validationMessage: any;
-    hasError: any;
-    required: any;
-    optional: any;
-    fitContent: any;
-    leftLabel: any;
-    hideLabel: any;
-    withHighlight: any;
+    inputID: any;
+    feedbackMessage: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    validationMessage: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    hasError: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    required: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    optional: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    fitContent: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    leftLabel: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    hideLabel: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    withHighlight: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    isGroup: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/form-layout-block-item/styles.d.ts

@@ -1,5 +1,6 @@
 import type { DSFormLayoutBlockItemStyledContainerT, DSFormLayoutBlockItemStyledLabelT, DSFormLayoutBlockItemStyledMessageT, DSFormLayoutBlockItemStyledMarkT } from './index.d';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, DSFormLayoutBlockItemStyledContainerT, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<"label", any, DSFormLayoutBlockItemStyledLabelT, never>;
-export declare const StyledMessage: import("styled-components").StyledComponent<"div", any, DSFormLayoutBlockItemStyledMessageT, never>;
-export declare const StyledMark: import("styled-components").StyledComponent<"span", any, DSFormLayoutBlockItemStyledMarkT, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledContainerT, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledLabelT, never>;
+export declare const StyledMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledMessageT, never>;
+export declare const StyledMark: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledMarkT, never>;
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.d.ts

@@ -1,10 +1,20 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { DSControlledCheckboxGroupT } from './index.d';
 declare const DSFormLayoutCheckboxGroup: {
     (props: DSControlledCheckboxGroupT): JSX.Element;
     propTypes: {
-        direction: any;
+        direction: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSFormLayoutCheckboxGroupWithSchema: any;
+declare const DSFormLayoutCheckboxGroupWithSchema: {
+    (props?: DSControlledCheckboxGroupT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };

package/types/form-layout-checkbox-group/propTypes.d.ts

@@ -1,3 +1,9 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 export declare const propTypes: {
-    direction: any;
+    direction: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/form-layout-checkbox-group/styles.d.ts

@@ -1,2 +1,2 @@
 import type { DSControlledCheckboxGroupStyledContainerT } from './index.d';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, DSControlledCheckboxGroupStyledContainerT, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSControlledCheckboxGroupStyledContainerT, never>;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}