@elliemae/ds-form-layout-blocks 2.3.0-alpha.8 → 2.3.0-next.2

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

@@ -0,0 +1,67 @@
+'use strict';
+
+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 propTypes = require('./propTypes.js');
+var styles = require('./styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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,
+    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,
+    "aria-hidden": isGroup
+  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default["default"](styles.StyledMark, {
+    required: required
+  })), isGroup && /*#__PURE__*/_jsx__default["default"](styles.ScreenReaderOnly, {
+    as: "legend"
+  }, void 0, "".concat(label, ". ").concat(feedbackMessage || '')), 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,
+    role: "alert"
+  }, void 0, validationMessage));
+};
+
+const DSFormLayoutBlockItemWithSchema = reactDesc.describe(DSFormLayoutBlockItem);
+DSFormLayoutBlockItemWithSchema.propTypes = propTypes.propTypes;
+
+exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem;
+exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItemWithSchema;

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

@@ -0,0 +1,2 @@
+'use strict';
+

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSFormLayoutBlockItem = require('./DSFormLayoutBlockItem.js');
+
+
+
+exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem.DSFormLayoutBlockItem;
+exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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.'),
+  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.'),
+  required: reactDesc.PropTypes.bool.description('Adds required extra styling.'),
+  optional: reactDesc.PropTypes.bool.description('Adds optional extra styling.'),
+  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.'),
+  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

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-196zgtg-0"
+})(["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 : 2px 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;", " ", ""], _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;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:", ";", ""], _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;
+exports.StyledMessage = StyledMessage;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+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 _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, {
+    direction: propsWithDefault.direction
+  }, void 0, propsWithDefault.children);
+};
+
+const DSFormLayoutCheckboxGroupWithSchema = reactDesc.describe(DSFormLayoutCheckboxGroup);
+DSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes.propTypes;
+
+exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup;
+exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroupWithSchema;

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const getVariableType = arg => {
+  if (Array.isArray(arg)) return 'array';
+  if (arg === null) return 'null';
+  if (arg === undefined) return 'undefined';
+  return typeof 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.\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.\n    \n  Received: (null)\n  Expected: React children\n  ");
+};
+
+const useValidateProps = props => {
+  if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {
+    throwCheckboxGroupDirectionError(props.direction);
+  }
+
+  if (!React__default["default"].Children.count(props.children)) {
+    throwCheckboxGroupChildrenError();
+  }
+};
+
+exports.useValidateProps = useValidateProps;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const defaultProps = {
+  direction: 'horizontal'
+};
+
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,2 @@
+'use strict';
+

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSFormLayoutCheckboxGroup = require('./DSFormLayoutCheckboxGroup.js');
+
+
+
+exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
+exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const propTypes = {
+  direction: reactDesc.PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.')
+};
+
+exports.propTypes = propTypes;

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

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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:", ";}"], _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/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSFormLayoutBlockItem = require('./form-layout-block-item/DSFormLayoutBlockItem.js');
+var DSFormLayoutCheckboxGroup = require('./form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js');
+
+
+
+exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem.DSFormLayoutBlockItem;
+exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;
+exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
+exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;

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

@@ -0,0 +1,58 @@
+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';
+
+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,
+    withHighlight: withHighlight,
+    as: isGroup ? 'fieldset' : 'div',
+    isGroup: isGroup,
+    "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
+  }, void 0, /*#__PURE__*/_jsx(StyledLabel, {
+    htmlFor: inputID,
+    leftLabel: leftLabel,
+    hideLabel: hideLabel,
+    "aria-hidden": isGroup
+  }, void 0, label, (required || optional) && /*#__PURE__*/_jsx(StyledMark, {
+    required: required
+  })), isGroup && /*#__PURE__*/_jsx(ScreenReaderOnly, {
+    as: "legend"
+  }, void 0, "".concat(label, ". ").concat(feedbackMessage || '')), 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,
+    role: "alert"
+  }, void 0, validationMessage));
+};
+
+const DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);
+DSFormLayoutBlockItemWithSchema.propTypes = propTypes;
+
+export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema } from './DSFormLayoutBlockItem.js';

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

@@ -0,0 +1,19 @@
+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.'),
+  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.'),
+  required: PropTypes.bool.description('Adds required extra styling.'),
+  optional: PropTypes.bool.description('Adds optional extra styling.'),
+  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.'),
+  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

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-196zgtg-0"
+})(["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 : 2px 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;", " ", ""], _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;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:", ";", ""], _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 { ScreenReaderOnly, StyledContainer, StyledLabel, StyledMark, StyledMessage };

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

@@ -0,0 +1,21 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import { propTypes } from './propTypes.js';
+import { StyledContainer } from './styles.js';
+import { defaultProps } from './defaultProps.js';
+import { useValidateProps } from './config/useValidateProps.js';
+
+const DSFormLayoutCheckboxGroup = props => {
+  useValidateProps(props);
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  return /*#__PURE__*/_jsx(StyledContainer, {
+    direction: propsWithDefault.direction
+  }, void 0, propsWithDefault.children);
+};
+
+const DSFormLayoutCheckboxGroupWithSchema = describe(DSFormLayoutCheckboxGroup);
+DSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes;
+
+export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const getVariableType = arg => {
+  if (Array.isArray(arg)) return 'array';
+  if (arg === null) return 'null';
+  if (arg === undefined) return 'undefined';
+  return typeof 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.\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.\n    \n  Received: (null)\n  Expected: React children\n  ");
+};
+
+const useValidateProps = props => {
+  if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {
+    throwCheckboxGroupDirectionError(props.direction);
+  }
+
+  if (!React.Children.count(props.children)) {
+    throwCheckboxGroupChildrenError();
+  }
+};
+
+export { useValidateProps };

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

@@ -0,0 +1,5 @@
+const defaultProps = {
+  direction: 'horizontal'
+};
+
+export { defaultProps };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema } from './DSFormLayoutCheckboxGroup.js';

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

@@ -0,0 +1,7 @@
+import { PropTypes } from 'react-desc';
+
+const propTypes = {
+  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.')
+};
+
+export { propTypes };

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

@@ -0,0 +1,38 @@
+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:", ";}"], _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/esm/index.d.js

@@ -0,0 +1 @@
+