@elliemae/ds-form-layout-blocks 3.5.1-next.0 → 3.6.0-next.1

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

@@ -34,10 +34,17 @@ var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_uid = require("uid");
+var import_ds_icons = require("@elliemae/ds-icons");
 var import_DSFormLayoutBlockItemDataTestId = require("../exported-related/DSFormLayoutBlockItemDataTestId");
 var import_propTypes = require("./propTypes");
 var import_styles = require("./styles");
+var import_useFormLayoutBlockItem = require("./config/useFormLayoutBlockItem");
 const DSFormLayoutBlockItem = (props) => {
+  const {
+    globalAttributes: { ...othersGlobalAttributes },
+    xstyledProps,
+    propsWithDefault
+  } = (0, import_useFormLayoutBlockItem.useFormLayoutBlockItem)(props);
   const {
     label,
     feedbackMessage,
@@ -53,8 +60,8 @@ const DSFormLayoutBlockItem = (props) => {
     hideLabel,
     fitContent,
     withHighlight,
-    isGroup = false
-  } = props;
+    isGroup
+  } = propsWithDefault;
   const instanceUID = (0, import_react.useMemo)(() => (0, import_uid.uid)(6), []);
   const cols = (0, import_react.useMemo)(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledContainer, {
@@ -66,6 +73,8 @@ const DSFormLayoutBlockItem = (props) => {
     as: isGroup ? "fieldset" : "div",
     isGroup,
     "aria-describedby": !isGroup ? `${inputID || instanceUID}_feedback_message` : void 0,
+    ...othersGlobalAttributes,
+    ...xstyledProps,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
         cols,
@@ -77,6 +86,7 @@ const DSFormLayoutBlockItem = (props) => {
             leftLabel,
             hideLabel,
             "aria-hidden": isGroup,
+            ...othersGlobalAttributes,
             children: [
               label,
               (required || optional) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMark, {
@@ -104,13 +114,21 @@ const DSFormLayoutBlockItem = (props) => {
         id: `${inputID || instanceUID}_feedback_message`,
         children: feedbackMessage
       }),
-      validationMessage && hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMessage, {
+      validationMessage && hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledMessage, {
         "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE,
         hasError,
         leftLabel,
         hideLabel,
         role: "alert",
-        children: validationMessage
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, {
+            width: 8,
+            height: 8,
+            color: ["danger", 900]
+          }),
+          "\xA0",
+          validationMessage
+        ]
       })
     ]
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId';\nimport type { DSFormLayoutBlockItemPropsT as Props } from './index.d';\nimport { propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly, StyledCharCount } from './styles';\n\nconst DSFormLayoutBlockItem = (props: Props): JSX.Element => {\n  const {\n    label,\n    feedbackMessage,\n    maxCharCounter,\n    currentChar,\n    validationMessage,\n    inputID,\n    children,\n    hasError,\n    leftLabel,\n    required,\n    optional,\n    hideLabel,\n    fitContent,\n    withHighlight,\n    isGroup = false,\n  } = props;\n\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n  return (\n    <StyledContainer\n      data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n      leftLabel={leftLabel}\n      fitContent={fitContent}\n      hideLabel={hideLabel}\n      withHighlight={withHighlight}\n      as={isGroup ? 'fieldset' : 'div'}\n      isGroup={isGroup}\n      aria-describedby={!isGroup ? `${inputID || instanceUID}_feedback_message` : undefined}\n    >\n      <Grid cols={cols} gutter=\"xxs\">\n        <StyledLabel\n          data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n          htmlFor={inputID}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n        >\n          {label}\n          {(required || optional) && <StyledMark required={required} />}\n        </StyledLabel>\n        {maxCharCounter !== undefined && currentChar !== undefined ? (\n          <StyledCharCount\n            data-testid={DSFormLayoutBlockItemDataTestId.COUNTER}\n            hasError={currentChar > maxCharCounter}\n          >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n        ) : null}\n      </Grid>\n      {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n      {children}\n      {feedbackMessage && !hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.MESSAGE}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          id={`${inputID || instanceUID}_feedback_message`}\n        >\n          {feedbackMessage}\n        </StyledMessage>\n      )}\n      {validationMessage && hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n          hasError={hasError}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          role=\"alert\"\n        >\n          {validationMessage}\n        </StyledMessage>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA+B;AAC/B,qBAAqB;AACrB,0BAAyB;AACzB,iBAAoB;AACpB,6CAAgD;AAEhD,uBAA0B;AAC1B,oBAA2G;AAE3G,MAAM,wBAAwB,CAAC,UAA8B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI;AAEJ,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,WAAO,sBAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE,6CAAC;AAAA,IACC,eAAa,uEAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,UAAU,aAAa;AAAA,IAC3B;AAAA,IACA,oBAAkB,CAAC,UAAU,GAAG,WAAW,iCAAiC;AAAA,IAE5E;AAAA,mDAAC;AAAA,QAAK;AAAA,QAAY,QAAO;AAAA,QACvB;AAAA,uDAAC;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YAEZ;AAAA;AAAA,eACC,YAAY,aAAa,4CAAC;AAAA,gBAAW;AAAA,eAAoB;AAAA;AAAA,WAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C,4CAAC;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C,UAAU,cAAc;AAAA,YACxB,aAAG,eAAe;AAAA,WAAiB,IACnC;AAAA;AAAA,OACN;AAAA,MACC,WAAW,4CAAC;AAAA,QAAiB,IAAG;AAAA,QAAU,aAAG,UAAU,mBAAmB;AAAA,OAAK;AAAA,MAC/E;AAAA,MACA,mBAAmB,CAAC,YACnB,4CAAC;AAAA,QACC,eAAa,uEAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,IAAI,GAAG,WAAW;AAAA,QAEjB;AAAA,OACH;AAAA,MAED,qBAAqB,YACpB,4CAAC;AAAA,QACC,eAAa,uEAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEJ;AAAA,OACH;AAAA;AAAA,GAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,sCAAkC,8BAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId';\nimport { DSFormLayoutBlockItemT, propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly, StyledCharCount } from './styles';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n  const {\n    globalAttributes: { ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault,\n  } = useFormLayoutBlockItem(props);\n  const {\n    label,\n    feedbackMessage,\n    maxCharCounter,\n    currentChar,\n    validationMessage,\n    inputID,\n    children,\n    hasError,\n    leftLabel,\n    required,\n    optional,\n    hideLabel,\n    fitContent,\n    withHighlight,\n    isGroup,\n  } = propsWithDefault;\n\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n  return (\n    <StyledContainer\n      data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n      leftLabel={leftLabel}\n      fitContent={fitContent}\n      hideLabel={hideLabel}\n      withHighlight={withHighlight}\n      as={isGroup ? 'fieldset' : 'div'}\n      isGroup={isGroup}\n      aria-describedby={!isGroup ? `${inputID || instanceUID}_feedback_message` : undefined}\n      {...othersGlobalAttributes}\n      {...xstyledProps}\n    >\n      <Grid cols={cols} gutter=\"xxs\">\n        <StyledLabel\n          data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n          htmlFor={inputID}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          {...othersGlobalAttributes}\n        >\n          {label}\n          {(required || optional) && <StyledMark required={required} />}\n        </StyledLabel>\n        {maxCharCounter !== undefined && currentChar !== undefined ? (\n          <StyledCharCount\n            data-testid={DSFormLayoutBlockItemDataTestId.COUNTER}\n            hasError={currentChar > maxCharCounter}\n          >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n        ) : null}\n      </Grid>\n      {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n      {children}\n      {feedbackMessage && !hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.MESSAGE}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          id={`${inputID || instanceUID}_feedback_message`}\n        >\n          {feedbackMessage}\n        </StyledMessage>\n      )}\n      {validationMessage && hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n          hasError={hasError}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          role=\"alert\"\n        >\n          <AlertsSmallFill width={8} height={8} color={['danger', 900]} />\n          &nbsp;\n          {validationMessage}\n        </StyledMessage>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA+B;AAC/B,qBAAqB;AACrB,0BAAyB;AACzB,iBAAoB;AACpB,sBAAgC;AAChC,6CAAgD;AAChD,uBAAkD;AAClD,oBAA2G;AAC3G,oCAAuC;AAEvC,MAAM,wBAAwB,CAAC,UAAwC;AACrE,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,QAAI,sDAAuB,KAAK;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,WAAO,sBAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE,6CAAC;AAAA,IACC,eAAa,uEAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,UAAU,aAAa;AAAA,IAC3B;AAAA,IACA,oBAAkB,CAAC,UAAU,GAAG,WAAW,iCAAiC;AAAA,IAC3E,GAAG;AAAA,IACH,GAAG;AAAA,IAEJ;AAAA,mDAAC;AAAA,QAAK;AAAA,QAAY,QAAO;AAAA,QACvB;AAAA,uDAAC;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACZ,GAAG;AAAA,YAEH;AAAA;AAAA,eACC,YAAY,aAAa,4CAAC;AAAA,gBAAW;AAAA,eAAoB;AAAA;AAAA,WAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C,4CAAC;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C,UAAU,cAAc;AAAA,YACxB,aAAG,eAAe;AAAA,WAAiB,IACnC;AAAA;AAAA,OACN;AAAA,MACC,WAAW,4CAAC;AAAA,QAAiB,IAAG;AAAA,QAAU,aAAG,UAAU,mBAAmB;AAAA,OAAK;AAAA,MAC/E;AAAA,MACA,mBAAmB,CAAC,YACnB,4CAAC;AAAA,QACC,eAAa,uEAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,IAAI,GAAG,WAAW;AAAA,QAEjB;AAAA,OACH;AAAA,MAED,qBAAqB,YACpB,6CAAC;AAAA,QACC,eAAa,uEAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL;AAAA,sDAAC;AAAA,YAAgB,OAAO;AAAA,YAAG,QAAQ;AAAA,YAAG,OAAO,CAAC,UAAU,GAAG;AAAA,WAAG;AAAA,UAAE;AAAA,UAE/D;AAAA;AAAA,OACH;AAAA;AAAA,GAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,sCAAkC,8BAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
   "names": []
 }

package/dist/cjs/{form-layout-checkbox-group/defaultProps.js → form-layout-block-item/config/useFormLayoutBlockItem.js}

@@ -22,13 +22,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var defaultProps_exports = {};
-__export(defaultProps_exports, {
-  defaultProps: () => defaultProps
+var useFormLayoutBlockItem_exports = {};
+__export(useFormLayoutBlockItem_exports, {
+  useFormLayoutBlockItem: () => useFormLayoutBlockItem
 });
-module.exports = __toCommonJS(defaultProps_exports);
+module.exports = __toCommonJS(useFormLayoutBlockItem_exports);
 var React = __toESM(require("react"));
-const defaultProps = {
-  direction: "horizontal"
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_propTypes = require("../propTypes");
+const useFormLayoutBlockItem = (props) => {
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes);
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
+  const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
+  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
+  return import_react.default.useMemo(
+    () => ({ globalAttributes, xstyledProps, propsWithDefault }),
+    [globalAttributes, xstyledProps, propsWithDefault]
+  );
 };
-//# sourceMappingURL=defaultProps.js.map
+//# sourceMappingURL=useFormLayoutBlockItem.js.map

package/dist/cjs/form-layout-block-item/config/useFormLayoutBlockItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form-layout-block-item/config/useFormLayoutBlockItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  GlobalAttributesT,\n  XstyledProps,\n} from '@elliemae/ds-utilities';\n\nimport { propTypes, defaultProps, type DSFormLayoutBlockItemT } from '../propTypes';\n\ninterface UseFormLayoutBlockItemT {\n  propsWithDefault: DSFormLayoutBlockItemT.InternalProps;\n  globalAttributes: GlobalAttributesT;\n  xstyledProps: XstyledProps;\n}\n\nexport const useFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props): UseFormLayoutBlockItemT => {\n  useValidateTypescriptPropTypes(props, propTypes);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFormLayoutBlockItemT.InternalProps>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  return React.useMemo(\n    () => ({ globalAttributes, xstyledProps, propsWithDefault }),\n    [globalAttributes, xstyledProps, propsWithDefault],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAOO;AAEP,uBAAqE;AAQ9D,MAAM,yBAAyB,CAAC,UAAiE;AACtG,0DAA+B,OAAO,0BAAS;AAC/C,QAAM,uBAAmB,kDAAmE,OAAO,6BAAY;AAC/G,QAAM,uBAAmB,4CAAuB,gBAAgB;AAEhE,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,cAAc,iBAAiB;AAAA,IAC1D,CAAC,kBAAkB,cAAc,gBAAgB;AAAA,EACnD;AACF;",
+  "names": ["React"]
+}

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

@@ -24,17 +24,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var propTypes_exports = {};
 __export(propTypes_exports, {
+  defaultProps: () => defaultProps,
   propTypes: () => propTypes
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
+const defaultProps = {
+  isGroup: false
+};
 const propTypes = {
+  ...import_ds_utilities.globalAttributesPropTypes,
+  ...import_ds_utilities.xstyledPropTypes,
   children: import_ds_utilities.PropTypes.node.isRequired.description("Input component. "),
-  label: import_ds_utilities.PropTypes.string.isRequired.description(
+  label: import_ds_utilities.PropTypes.string.description(
     "Label property for the input component. This property is required for accesibility purposes."
   ),
-  inputID: import_ds_utilities.PropTypes.string.isRequired.description(
+  inputID: import_ds_utilities.PropTypes.string.description(
     "String that matches the input component's id. This property is required for accesibility purposes."
   ),
   maxCharCounter: import_ds_utilities.PropTypes.number.description("Max of characters allowed."),
@@ -56,6 +62,7 @@ const propTypes = {
   ),
   isGroup: import_ds_utilities.PropTypes.bool.description(
     "Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input."
-  )
+  ),
+  iconError: import_ds_utilities.PropTypes.bool.description("Adds icon error extra styling.")
 };
 //# sourceMappingURL=propTypes.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-block-item/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  children: PropTypes.node.isRequired.description('Input component. '),\n  label: PropTypes.string.isRequired.description(\n    'Label property for the input component. This property is required for accesibility purposes.',\n  ),\n  inputID: PropTypes.string.isRequired.description(\n    \"String that matches the input component's id. This property is required for accesibility purposes.\",\n  ),\n  maxCharCounter: PropTypes.number.description('Max of characters allowed.'),\n  currentChar: PropTypes.number.description('Current counter of input text area'),\n  feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n  validationMessage: PropTypes.string.description(\n    'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n  ),\n  hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n  required: PropTypes.bool.description('Adds required extra styling.'),\n  optional: PropTypes.bool.description('Adds optional extra styling.'),\n  fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n  leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n  hideLabel: PropTypes.bool.description(\n    'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n  ),\n  withHighlight: PropTypes.bool.description(\n    'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n  ),\n  isGroup: PropTypes.bool.description(\n    'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n  ),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,YAAY;AAAA,EACvB,UAAU,8BAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,8BAAU,OAAO,WAAW;AAAA,IACjC;AAAA,EACF;AAAA,EACA,SAAS,8BAAU,OAAO,WAAW;AAAA,IACnC;AAAA,EACF;AAAA,EACA,gBAAgB,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,8BAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,8BAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,8BAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,8BAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,8BAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,8BAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,8BAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,8BAAU,KAAK;AAAA,IACtB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps = {\n  isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n  export interface PropsOptional {\n    maxCharCounter?: number;\n    currentChar?: number;\n    inputID: string;\n    iconError: boolean;\n    validationMessage?: string;\n    feedbackMessage?: string;\n    hasError?: boolean;\n    leftLabel?: boolean;\n    required?: boolean;\n    fitContent?: boolean;\n    optional?: boolean;\n    hideLabel?: boolean;\n    withHighlight?: boolean;\n  }\n\n  export interface DefaultProps {\n    isGroup?: boolean;\n  }\n\n  export interface PropsRequired {\n    children: JSX.Element;\n    label: string;\n  }\n\n  export interface Props extends PropsOptional, PropsRequired, DefaultProps {}\n  export interface InternalProps extends PropsOptional, PropsRequired, Required<DefaultProps> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.isRequired.description('Input component. '),\n  label: PropTypes.string.description(\n    'Label property for the input component. This property is required for accesibility purposes.',\n  ),\n  inputID: PropTypes.string.description(\n    \"String that matches the input component's id. This property is required for accesibility purposes.\",\n  ),\n  maxCharCounter: PropTypes.number.description('Max of characters allowed.'),\n  currentChar: PropTypes.number.description('Current counter of input text area'),\n  feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n  validationMessage: PropTypes.string.description(\n    'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n  ),\n  hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n  required: PropTypes.bool.description('Adds required extra styling.'),\n  optional: PropTypes.bool.description('Adds optional extra styling.'),\n  fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n  leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n  hideLabel: PropTypes.bool.description(\n    'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n  ),\n  withHighlight: PropTypes.bool.description(\n    'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n  ),\n  isGroup: PropTypes.bool.description(\n    'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n  ),\n  iconError: PropTypes.bool.description('Adds icon error extra styling.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AAgCO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,8BAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,8BAAU,OAAO;AAAA,IACxB;AAAA,EACF;AAAA,EACA,gBAAgB,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,8BAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,8BAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,8BAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,8BAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,8BAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,8BAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,8BAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,8BAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,8BAAU,KAAK,YAAY,gCAAgC;AACxE;",
   "names": []
 }

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

@@ -38,7 +38,11 @@ const StyledContainer = import_ds_system.styled.div`
   position: relative;
   padding: 0;
   margin: 0;
+  padding-bottom: 4px;
   display: grid;
+  ${import_ds_system.layout}
+  ${import_ds_system.space}
+  ${import_ds_system.sizing}
   ${({ fitContent }) => fitContent ? "width: fit-content;" : void 0}
   ${({ isGroup }) => isGroup ? "border: none" : ""};
   ${({ leftLabel, hideLabel }) => leftLabel && !hideLabel ? "grid-template-columns: auto 1fr;" : void 0}
@@ -93,7 +97,7 @@ const StyledMessage = import_ds_system.styled.div`
   font-size: ${({ theme }) => theme.fontSizes.microText[200]};
   text-align: right;
   line-height: 15px;
-  height: 15px;
+  height: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
   color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-block-item/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type {\n  DSFormLayoutBlockItemStyledContainerT,\n  DSFormLayoutBlockItemStyledLabelT,\n  DSFormLayoutBlockItemStyledMessageT,\n  DSFormLayoutBlockItemStyledMarkT,\n} from './index.d';\n\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n  position: relative;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n  ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n  align-items: center;\n  ${({ theme, withHighlight }) =>\n    withHighlight\n      ? `\n  &::after {\n        position: absolute;\n        content: '';\n        left: -${theme.space.xxs};\n        top: -${theme.space.xxxs};\n        z-index: -1;\n        width: calc(100% + ${theme.space.xs});\n        height: calc(100%  + ${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: -${theme.space.xxs};\n            top: -${theme.space.xxxs};\n            z-index: -1;\n            width: calc(100% + ${theme.space.xs});\n            height: calc(100%  + ${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  `\n      : undefined}\n`;\n\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n  display: flex;\n  ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n  ${({ hideLabel }) =>\n    hideLabel\n      ? `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  `\n      : undefined}\n`;\n\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  line-height: 15px;\n  height: 15px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n  padding-right: 1px;\n  margin-right: -1px;\n  font-style: normal;\n`;\n\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  margin-left: ${({ theme }) => theme.space.xxxs};\n  ${({ theme, required }) =>\n    required\n      ? `\n  background-color: ${theme.colors.danger[900]};\n  `\n      : `\n  border: 1px solid ${theme.colors.brand[600]};\n  `}\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\njustify-self: flex-end;\nfont-size: ${({ theme }) => theme.fontSizes.microText[300]}\nmargin-left: 16px;\ncolor: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAQhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAGD,MAAM,cAAc,wBAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAGD,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAM5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO;AAAA,MAElC;AAAA,sBACc,MAAM,OAAO,MAAM;AAAA;AAAA;AAIlC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhC,MAAM,kBAAkB,wBAAO;AAAA;AAAA,aAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
+  "sourcesContent": ["import { styled, space, sizing, layout } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n  hasError?: boolean;\n  leftLabel?: boolean;\n  hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n  leftLabel?: boolean;\n  fitContent?: boolean;\n  hideLabel?: boolean;\n  withHighlight?: boolean;\n  isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n  leftLabel?: boolean;\n  hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n  required?: boolean;\n}\n\n// interface DSFormLayoutBlockItemStyledIconErrorT {\n//   iconError?: string;\n// }\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n  hasError?: boolean;\n}\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n  position: relative;\n  padding: 0;\n  margin: 0;\n  padding-bottom: 4px;\n  display: grid;\n  ${layout}\n  ${space}\n  ${sizing}\n  ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n  ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n  align-items: center;\n  ${({ theme, withHighlight }) =>\n    withHighlight\n      ? `\n  &::after {\n        position: absolute;\n        content: '';\n        left: -${theme.space.xxs};\n        top: -${theme.space.xxxs};\n        z-index: -1;\n        width: calc(100% + ${theme.space.xs});\n        height: calc(100%  + ${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: -${theme.space.xxs};\n            top: -${theme.space.xxxs};\n            z-index: -1;\n            width: calc(100% + ${theme.space.xs});\n            height: calc(100%  + ${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  `\n      : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n  display: flex;\n  ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n  ${({ hideLabel }) =>\n    hideLabel\n      ? `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  `\n      : undefined}\n`;\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  line-height: 15px;\n  height: 50px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n  padding-right: 1px;\n  margin-right: -1px;\n  font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  margin-left: ${({ theme }) => theme.space.xxxs};\n  ${({ theme, required }) =>\n    required\n      ? `\n  background-color: ${theme.colors.danger[900]};\n  `\n      : `\n  border: 1px solid ${theme.colors.brand[600]};\n  `}\n`;\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\njustify-self: flex-end;\nfont-size: ${({ theme }) => theme.fontSizes.microText[300]}\nmargin-left: 16px;\ncolor: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n// export const StyledErrorIcon = styled.span<DSFormLayoutBlockItemStyledIconErrorT>`\n// width: 8px;\n// height: 8px;\n// border-radius: 50%;\n// margin-right: ${({ theme }) => theme.space.xxxs};\n// color: ${({ theme }) => theme.colors.danger[900]};\n// `;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAgCvC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMlC;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,wBAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAK5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO;AAAA,MAElC;AAAA,sBACc,MAAM,OAAO,MAAM;AAAA;AAAA;AAGlC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA,aAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
   "names": []
 }

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

@@ -31,18 +31,20 @@ module.exports = __toCommonJS(DSFormLayoutCheckboxGroup_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_propTypes = require("./propTypes");
 var import_styles = require("./styles");
-var import_defaultProps = require("./defaultProps");
-var import_useValidateProps = require("./config/useValidateProps");
+var import_propTypes = require("./propTypes");
+var import_useFormLayoutCheckboxGroup = require("./config/useFormLayoutCheckboxGroup");
 const DSFormLayoutCheckboxGroup = (props) => {
-  (0, import_useValidateProps.useValidateProps)(props);
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
-  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
+  const {
+    globalAttributes: { ...othersGlobalAttributes },
+    xstyledProps,
+    propsWithDefault
+  } = (0, import_useFormLayoutCheckboxGroup.useFormLayoutCheckboxGroup)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, {
     role: "group",
     direction: propsWithDefault.direction,
-    ...globalAttrs,
+    ...othersGlobalAttributes,
+    ...xstyledProps,
     children: propsWithDefault.children
   });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport { StyledContainer } from './styles';\nimport { defaultProps } from './defaultProps';\nimport type { DSControlledCheckboxGroupT } from './index.d';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSFormLayoutCheckboxGroup = (props: DSControlledCheckboxGroupT): JSX.Element => {\n  useValidateProps(props);\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  return (\n    <StyledContainer role=\"group\" direction={propsWithDefault.direction} {...globalAttrs}>\n      {propsWithDefault.children}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutCheckboxGroup.propTypes = propTypes;\nDSFormLayoutCheckboxGroup.displayName = 'DSFormLayoutCheckboxGroup';\nconst DSFormLayoutCheckboxGroupWithSchema = describe(DSFormLayoutCheckboxGroup);\nDSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAA+E;AAC/E,uBAA0B;AAC1B,oBAAgC;AAChC,0BAA6B;AAE7B,8BAAiC;AAEjC,MAAM,4BAA4B,CAAC,UAAmD;AACpF,gDAAiB,KAAK;AACtB,QAAM,uBAAmB,kDAA6B,OAAO,gCAAY;AACzE,QAAM,kBAAc,4CAAuB,gBAAgB;AAC3D,SACE,4CAAC;AAAA,IAAgB,MAAK;AAAA,IAAQ,WAAW,iBAAiB;AAAA,IAAY,GAAG;AAAA,IACtE,2BAAiB;AAAA,GACpB;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,8BAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { DSFormLayoutCheckboxGroupT, propTypes } from './propTypes';\nimport { useFormLayoutCheckboxGroup } from './config/useFormLayoutCheckboxGroup';\n\nconst DSFormLayoutCheckboxGroup = (props: DSFormLayoutCheckboxGroupT.Props): JSX.Element => {\n  const {\n    globalAttributes: { ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault,\n  } = useFormLayoutCheckboxGroup(props);\n  return (\n    <StyledContainer role=\"group\" direction={propsWithDefault.direction} {...othersGlobalAttributes} {...xstyledProps}>\n      {propsWithDefault.children}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutCheckboxGroup.propTypes = propTypes;\nDSFormLayoutCheckboxGroup.displayName = 'DSFormLayoutCheckboxGroup';\nconst DSFormLayoutCheckboxGroupWithSchema = describe(DSFormLayoutCheckboxGroup);\nDSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAyB;AACzB,oBAAgC;AAChC,uBAAsD;AACtD,wCAA2C;AAE3C,MAAM,4BAA4B,CAAC,UAAyD;AAC1F,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,QAAI,8DAA2B,KAAK;AACpC,SACE,4CAAC;AAAA,IAAgB,MAAK;AAAA,IAAQ,WAAW,iBAAiB;AAAA,IAAY,GAAG;AAAA,IAAyB,GAAG;AAAA,IAClG,2BAAiB;AAAA,GACpB;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,8BAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
   "names": []
 }

package/dist/cjs/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.js

@@ -0,0 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFormLayoutCheckboxGroup_exports = {};
+__export(useFormLayoutCheckboxGroup_exports, {
+  useFormLayoutCheckboxGroup: () => useFormLayoutCheckboxGroup
+});
+module.exports = __toCommonJS(useFormLayoutCheckboxGroup_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_propTypes = require("../propTypes");
+const useFormLayoutCheckboxGroup = (props) => {
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes);
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
+  const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
+  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
+  return import_react.default.useMemo(
+    () => ({ globalAttributes, xstyledProps, propsWithDefault }),
+    [globalAttributes, xstyledProps, propsWithDefault]
+  );
+};
+//# sourceMappingURL=useFormLayoutCheckboxGroup.js.map

package/dist/cjs/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  GlobalAttributesT,\n  XstyledProps,\n} from '@elliemae/ds-utilities';\n\nimport { propTypes, defaultProps, type DSFormLayoutCheckboxGroupT } from '../propTypes';\n\ninterface UseFormLayoutCheckboxGroupT {\n  propsWithDefault: DSFormLayoutCheckboxGroupT.InternalProps;\n  globalAttributes: GlobalAttributesT;\n  xstyledProps: XstyledProps;\n}\n\nexport const useFormLayoutCheckboxGroup = (props: DSFormLayoutCheckboxGroupT.Props): UseFormLayoutCheckboxGroupT => {\n  useValidateTypescriptPropTypes(props, propTypes);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFormLayoutCheckboxGroupT.InternalProps>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  return React.useMemo(\n    () => ({ globalAttributes, xstyledProps, propsWithDefault }),\n    [globalAttributes, xstyledProps, propsWithDefault],\n  );\n};", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAOO;AAEP,uBAAyE;AAQlE,MAAM,6BAA6B,CAAC,UAAyE;AAClH,0DAA+B,OAAO,0BAAS;AAC/C,QAAM,uBAAmB,kDAAuE,OAAO,6BAAY;AACnH,QAAM,uBAAmB,4CAAuB,gBAAgB;AAEhE,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,cAAc,iBAAiB;AAAA,IAC1D,CAAC,kBAAkB,cAAc,gBAAgB;AAAA,EACnD;AACF;",
+  "names": ["React"]
+}

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

@@ -24,13 +24,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var propTypes_exports = {};
 __export(propTypes_exports, {
+  defaultProps: () => defaultProps,
   propTypes: () => propTypes
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
+const defaultProps = {
+  direction: "horizontal"
+};
 const propTypes = {
   ...import_ds_utilities.globalAttributesPropTypes,
+  ...import_ds_utilities.xstyledPropTypes,
   direction: import_ds_utilities.PropTypes.oneOf(["horizontal", "vertical"]).description("Set direction for the checkbox group.")
 };
 //# sourceMappingURL=propTypes.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-checkbox-group/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAE9C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,WAAW,8BAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAC5G;",
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps = {\n  direction: 'horizontal',\n};\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\nexport declare namespace DSFormLayoutCheckboxGroupT {\n  export interface PropsRequired {\n    direction: DirectionsT;\n    children: JSX.Element;\n  }\n\n  export interface DefaultProps {\n    direction?: string;\n  }\n\n  export interface Props extends PropsRequired, DefaultProps {}\n  export interface InternalProps extends PropsRequired, Required<DefaultProps> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAEhE,MAAM,eAAe;AAAA,EAC1B,WAAW;AACb;AAkBO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,8BAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAC5G;",
   "names": []
 }

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

@@ -30,6 +30,9 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const StyledContainer = import_ds_system.styled.div`
+  ${import_ds_system.layout}
+  ${import_ds_system.space}
+  ${import_ds_system.sizing}
   display: inline-flex;
   flex-wrap: wrap;
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-checkbox-group/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxGroupStyledContainerT } from './index.d';\n\nexport const StyledContainer = styled.div<DSControlledCheckboxGroupStyledContainerT>`\n  display: inline-flex;\n  flex-wrap: wrap;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  margin-left: ${({ theme }) => theme.space.xs};\n  margin-right: ${({ theme }) => theme.space.xs};\n  margin-top: ${({ theme }) => theme.space.xxs};\n  & div:not([role='checkbox']) {\n    padding: 0;\n    margin-bottom: ${({ theme }) => theme.space.xxs};\n  }\n  & div:not(:last-child) {\n    margin-right: ${({ theme, direction }) => (direction === 'horizontal' ? theme.space.s : '0')};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAGhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,oBAGlB,CAAC,EAAE,UAAU,MAAO,cAAc,eAAe,QAAQ;AAAA,iBAC5D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,qBAGtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAO,UAAU,MAAO,cAAc,eAAe,MAAM,MAAM,IAAI;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, layout, space, sizing } from '@elliemae/ds-system';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\ninterface DSControlledCheckboxGroupStyledContainerT {\n  direction: DirectionsT;\n}\n\nexport const StyledContainer = styled.div<DSControlledCheckboxGroupStyledContainerT>`\n  ${layout}\n  ${space}\n  ${sizing}\n  display: inline-flex;\n  flex-wrap: wrap;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  margin-left: ${({ theme }) => theme.space.xs};\n  margin-right: ${({ theme }) => theme.space.xs};\n  margin-top: ${({ theme }) => theme.space.xxs};\n  & div:not([role='checkbox']) {\n    padding: 0;\n    margin-bottom: ${({ theme }) => theme.space.xxs};\n  }\n  & div:not(:last-child) {\n    margin-right: ${({ theme, direction }) => (direction === 'horizontal' ? theme.space.s : '0')};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAQvC,MAAM,kBAAkB,wBAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,oBAGgB,CAAC,EAAE,UAAU,MAAO,cAAc,eAAe,QAAQ;AAAA,iBAC5D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,qBAGtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAO,UAAU,MAAO,cAAc,eAAe,MAAM,MAAM,IAAI;AAAA;AAAA;",
   "names": []
 }

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

@@ -4,10 +4,17 @@ import { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { describe } from "@elliemae/ds-utilities";
 import { uid } from "uid";
+import { AlertsSmallFill } from "@elliemae/ds-icons";
 import { DSFormLayoutBlockItemDataTestId } from "../exported-related/DSFormLayoutBlockItemDataTestId";
 import { propTypes } from "./propTypes";
 import { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly, StyledCharCount } from "./styles";
+import { useFormLayoutBlockItem } from "./config/useFormLayoutBlockItem";
 const DSFormLayoutBlockItem = (props) => {
+  const {
+    globalAttributes: { ...othersGlobalAttributes },
+    xstyledProps,
+    propsWithDefault
+  } = useFormLayoutBlockItem(props);
   const {
     label,
     feedbackMessage,
@@ -23,8 +30,8 @@ const DSFormLayoutBlockItem = (props) => {
     hideLabel,
     fitContent,
     withHighlight,
-    isGroup = false
-  } = props;
+    isGroup
+  } = propsWithDefault;
   const instanceUID = useMemo(() => uid(6), []);
   const cols = useMemo(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
   return /* @__PURE__ */ jsxs(StyledContainer, {
@@ -36,6 +43,8 @@ const DSFormLayoutBlockItem = (props) => {
     as: isGroup ? "fieldset" : "div",
     isGroup,
     "aria-describedby": !isGroup ? `${inputID || instanceUID}_feedback_message` : void 0,
+    ...othersGlobalAttributes,
+    ...xstyledProps,
     children: [
       /* @__PURE__ */ jsxs(Grid, {
         cols,
@@ -47,6 +56,7 @@ const DSFormLayoutBlockItem = (props) => {
             leftLabel,
             hideLabel,
             "aria-hidden": isGroup,
+            ...othersGlobalAttributes,
             children: [
               label,
               (required || optional) && /* @__PURE__ */ jsx(StyledMark, {
@@ -74,13 +84,21 @@ const DSFormLayoutBlockItem = (props) => {
         id: `${inputID || instanceUID}_feedback_message`,
         children: feedbackMessage
       }),
-      validationMessage && hasError && /* @__PURE__ */ jsx(StyledMessage, {
+      validationMessage && hasError && /* @__PURE__ */ jsxs(StyledMessage, {
         "data-testid": DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE,
         hasError,
         leftLabel,
         hideLabel,
         role: "alert",
-        children: validationMessage
+        children: [
+          /* @__PURE__ */ jsx(AlertsSmallFill, {
+            width: 8,
+            height: 8,
+            color: ["danger", 900]
+          }),
+          "\xA0",
+          validationMessage
+        ]
       })
     ]
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId';\nimport type { DSFormLayoutBlockItemPropsT as Props } from './index.d';\nimport { propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly, StyledCharCount } from './styles';\n\nconst DSFormLayoutBlockItem = (props: Props): JSX.Element => {\n  const {\n    label,\n    feedbackMessage,\n    maxCharCounter,\n    currentChar,\n    validationMessage,\n    inputID,\n    children,\n    hasError,\n    leftLabel,\n    required,\n    optional,\n    hideLabel,\n    fitContent,\n    withHighlight,\n    isGroup = false,\n  } = props;\n\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n  return (\n    <StyledContainer\n      data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n      leftLabel={leftLabel}\n      fitContent={fitContent}\n      hideLabel={hideLabel}\n      withHighlight={withHighlight}\n      as={isGroup ? 'fieldset' : 'div'}\n      isGroup={isGroup}\n      aria-describedby={!isGroup ? `${inputID || instanceUID}_feedback_message` : undefined}\n    >\n      <Grid cols={cols} gutter=\"xxs\">\n        <StyledLabel\n          data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n          htmlFor={inputID}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n        >\n          {label}\n          {(required || optional) && <StyledMark required={required} />}\n        </StyledLabel>\n        {maxCharCounter !== undefined && currentChar !== undefined ? (\n          <StyledCharCount\n            data-testid={DSFormLayoutBlockItemDataTestId.COUNTER}\n            hasError={currentChar > maxCharCounter}\n          >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n        ) : null}\n      </Grid>\n      {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n      {children}\n      {feedbackMessage && !hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.MESSAGE}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          id={`${inputID || instanceUID}_feedback_message`}\n        >\n          {feedbackMessage}\n        </StyledMessage>\n      )}\n      {validationMessage && hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n          hasError={hasError}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          role=\"alert\"\n        >\n          {validationMessage}\n        </StyledMessage>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,uCAAuC;AAEhD,SAAS,iBAAiB;AAC1B,SAAS,eAAe,aAAa,iBAAiB,YAAY,kBAAkB,uBAAuB;AAE3G,MAAM,wBAAwB,CAAC,UAA8B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI;AAEJ,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,OAAO,QAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE,qBAAC;AAAA,IACC,eAAa,gCAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,UAAU,aAAa;AAAA,IAC3B;AAAA,IACA,oBAAkB,CAAC,UAAU,GAAG,WAAW,iCAAiC;AAAA,IAE5E;AAAA,2BAAC;AAAA,QAAK;AAAA,QAAY,QAAO;AAAA,QACvB;AAAA,+BAAC;AAAA,YACC,eAAa,gCAAgC;AAAA,YAC7C,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YAEZ;AAAA;AAAA,eACC,YAAY,aAAa,oBAAC;AAAA,gBAAW;AAAA,eAAoB;AAAA;AAAA,WAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C,oBAAC;AAAA,YACC,eAAa,gCAAgC;AAAA,YAC7C,UAAU,cAAc;AAAA,YACxB,aAAG,eAAe;AAAA,WAAiB,IACnC;AAAA;AAAA,OACN;AAAA,MACC,WAAW,oBAAC;AAAA,QAAiB,IAAG;AAAA,QAAU,aAAG,UAAU,mBAAmB;AAAA,OAAK;AAAA,MAC/E;AAAA,MACA,mBAAmB,CAAC,YACnB,oBAAC;AAAA,QACC,eAAa,gCAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,IAAI,GAAG,WAAW;AAAA,QAEjB;AAAA,OACH;AAAA,MAED,qBAAqB,YACpB,oBAAC;AAAA,QACC,eAAa,gCAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEJ;AAAA,OACH;AAAA;AAAA,GAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId';\nimport { DSFormLayoutBlockItemT, propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly, StyledCharCount } from './styles';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n  const {\n    globalAttributes: { ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault,\n  } = useFormLayoutBlockItem(props);\n  const {\n    label,\n    feedbackMessage,\n    maxCharCounter,\n    currentChar,\n    validationMessage,\n    inputID,\n    children,\n    hasError,\n    leftLabel,\n    required,\n    optional,\n    hideLabel,\n    fitContent,\n    withHighlight,\n    isGroup,\n  } = propsWithDefault;\n\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n  return (\n    <StyledContainer\n      data-testid={DSFormLayoutBlockItemDataTestId.CONTAINER}\n      leftLabel={leftLabel}\n      fitContent={fitContent}\n      hideLabel={hideLabel}\n      withHighlight={withHighlight}\n      as={isGroup ? 'fieldset' : 'div'}\n      isGroup={isGroup}\n      aria-describedby={!isGroup ? `${inputID || instanceUID}_feedback_message` : undefined}\n      {...othersGlobalAttributes}\n      {...xstyledProps}\n    >\n      <Grid cols={cols} gutter=\"xxs\">\n        <StyledLabel\n          data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n          htmlFor={inputID}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          {...othersGlobalAttributes}\n        >\n          {label}\n          {(required || optional) && <StyledMark required={required} />}\n        </StyledLabel>\n        {maxCharCounter !== undefined && currentChar !== undefined ? (\n          <StyledCharCount\n            data-testid={DSFormLayoutBlockItemDataTestId.COUNTER}\n            hasError={currentChar > maxCharCounter}\n          >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n        ) : null}\n      </Grid>\n      {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n      {children}\n      {feedbackMessage && !hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.MESSAGE}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          id={`${inputID || instanceUID}_feedback_message`}\n        >\n          {feedbackMessage}\n        </StyledMessage>\n      )}\n      {validationMessage && hasError && (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n          hasError={hasError}\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          role=\"alert\"\n        >\n          <AlertsSmallFill width={8} height={8} color={['danger', 900]} />\n          &nbsp;\n          {validationMessage}\n        </StyledMessage>\n      )}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nDSFormLayoutBlockItem.displayName = 'DSFormLayoutBlockItem';\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,SAAS,uCAAuC;AAChD,SAAiC,iBAAiB;AAClD,SAAS,eAAe,aAAa,iBAAiB,YAAY,kBAAkB,uBAAuB;AAC3G,SAAS,8BAA8B;AAEvC,MAAM,wBAAwB,CAAC,UAAwC;AACrE,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,KAAK;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,OAAO,QAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE,qBAAC;AAAA,IACC,eAAa,gCAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,UAAU,aAAa;AAAA,IAC3B;AAAA,IACA,oBAAkB,CAAC,UAAU,GAAG,WAAW,iCAAiC;AAAA,IAC3E,GAAG;AAAA,IACH,GAAG;AAAA,IAEJ;AAAA,2BAAC;AAAA,QAAK;AAAA,QAAY,QAAO;AAAA,QACvB;AAAA,+BAAC;AAAA,YACC,eAAa,gCAAgC;AAAA,YAC7C,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACZ,GAAG;AAAA,YAEH;AAAA;AAAA,eACC,YAAY,aAAa,oBAAC;AAAA,gBAAW;AAAA,eAAoB;AAAA;AAAA,WAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C,oBAAC;AAAA,YACC,eAAa,gCAAgC;AAAA,YAC7C,UAAU,cAAc;AAAA,YACxB,aAAG,eAAe;AAAA,WAAiB,IACnC;AAAA;AAAA,OACN;AAAA,MACC,WAAW,oBAAC;AAAA,QAAiB,IAAG;AAAA,QAAU,aAAG,UAAU,mBAAmB;AAAA,OAAK;AAAA,MAC/E;AAAA,MACA,mBAAmB,CAAC,YACnB,oBAAC;AAAA,QACC,eAAa,gCAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,IAAI,GAAG,WAAW;AAAA,QAEjB;AAAA,OACH;AAAA,MAED,qBAAqB,YACpB,qBAAC;AAAA,QACC,eAAa,gCAAgC;AAAA,QAC7C;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL;AAAA,8BAAC;AAAA,YAAgB,OAAO;AAAA,YAAG,QAAQ;AAAA,YAAG,OAAO,CAAC,UAAU,GAAG;AAAA,WAAG;AAAA,UAAE;AAAA,UAE/D;AAAA;AAAA,OACH;AAAA;AAAA,GAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
   "names": []
 }

package/dist/esm/form-layout-block-item/config/useFormLayoutBlockItem.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes
+} from "@elliemae/ds-utilities";
+import { propTypes, defaultProps } from "../propTypes";
+const useFormLayoutBlockItem = (props) => {
+  useValidateTypescriptPropTypes(props, propTypes);
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  return React2.useMemo(
+    () => ({ globalAttributes, xstyledProps, propsWithDefault }),
+    [globalAttributes, xstyledProps, propsWithDefault]
+  );
+};
+export {
+  useFormLayoutBlockItem
+};
+//# sourceMappingURL=useFormLayoutBlockItem.js.map

package/dist/esm/form-layout-block-item/config/useFormLayoutBlockItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/form-layout-block-item/config/useFormLayoutBlockItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  GlobalAttributesT,\n  XstyledProps,\n} from '@elliemae/ds-utilities';\n\nimport { propTypes, defaultProps, type DSFormLayoutBlockItemT } from '../propTypes';\n\ninterface UseFormLayoutBlockItemT {\n  propsWithDefault: DSFormLayoutBlockItemT.InternalProps;\n  globalAttributes: GlobalAttributesT;\n  xstyledProps: XstyledProps;\n}\n\nexport const useFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props): UseFormLayoutBlockItemT => {\n  useValidateTypescriptPropTypes(props, propTypes);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFormLayoutBlockItemT.InternalProps>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  return React.useMemo(\n    () => ({ globalAttributes, xstyledProps, propsWithDefault }),\n    [globalAttributes, xstyledProps, propsWithDefault],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,WAAW,oBAAiD;AAQ9D,MAAM,yBAAyB,CAAC,UAAiE;AACtG,iCAA+B,OAAO,SAAS;AAC/C,QAAM,mBAAmB,6BAAmE,OAAO,YAAY;AAC/G,QAAM,mBAAmB,uBAAuB,gBAAgB;AAEhE,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,cAAc,iBAAiB;AAAA,IAC1D,CAAC,kBAAkB,cAAc,gBAAgB;AAAA,EACnD;AACF;",
+  "names": ["React"]
+}

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

@@ -1,11 +1,16 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+const defaultProps = {
+  isGroup: false
+};
 const propTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   children: PropTypes.node.isRequired.description("Input component. "),
-  label: PropTypes.string.isRequired.description(
+  label: PropTypes.string.description(
     "Label property for the input component. This property is required for accesibility purposes."
   ),
-  inputID: PropTypes.string.isRequired.description(
+  inputID: PropTypes.string.description(
     "String that matches the input component's id. This property is required for accesibility purposes."
   ),
   maxCharCounter: PropTypes.number.description("Max of characters allowed."),
@@ -27,9 +32,11 @@ const propTypes = {
   ),
   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."
-  )
+  ),
+  iconError: PropTypes.bool.description("Adds icon error extra styling.")
 };
 export {
+  defaultProps,
   propTypes
 };
 //# sourceMappingURL=propTypes.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  children: PropTypes.node.isRequired.description('Input component. '),\n  label: PropTypes.string.isRequired.description(\n    'Label property for the input component. This property is required for accesibility purposes.',\n  ),\n  inputID: PropTypes.string.isRequired.description(\n    \"String that matches the input component's id. This property is required for accesibility purposes.\",\n  ),\n  maxCharCounter: PropTypes.number.description('Max of characters allowed.'),\n  currentChar: PropTypes.number.description('Current counter of input text area'),\n  feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n  validationMessage: PropTypes.string.description(\n    'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n  ),\n  hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n  required: PropTypes.bool.description('Adds required extra styling.'),\n  optional: PropTypes.bool.description('Adds optional extra styling.'),\n  fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n  leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n  hideLabel: PropTypes.bool.description(\n    'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n  ),\n  withHighlight: PropTypes.bool.description(\n    'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n  ),\n  isGroup: PropTypes.bool.description(\n    'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n  ),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,YAAY;AAAA,EACvB,UAAU,UAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,UAAU,OAAO,WAAW;AAAA,IACjC;AAAA,EACF;AAAA,EACA,SAAS,UAAU,OAAO,WAAW;AAAA,IACnC;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,UAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,UAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,UAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,UAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps = {\n  isGroup: false,\n};\n\nexport declare namespace DSFormLayoutBlockItemT {\n  export interface PropsOptional {\n    maxCharCounter?: number;\n    currentChar?: number;\n    inputID: string;\n    iconError: boolean;\n    validationMessage?: string;\n    feedbackMessage?: string;\n    hasError?: boolean;\n    leftLabel?: boolean;\n    required?: boolean;\n    fitContent?: boolean;\n    optional?: boolean;\n    hideLabel?: boolean;\n    withHighlight?: boolean;\n  }\n\n  export interface DefaultProps {\n    isGroup?: boolean;\n  }\n\n  export interface PropsRequired {\n    children: JSX.Element;\n    label: string;\n  }\n\n  export interface Props extends PropsOptional, PropsRequired, DefaultProps {}\n  export interface InternalProps extends PropsOptional, PropsRequired, Required<DefaultProps> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.isRequired.description('Input component. '),\n  label: PropTypes.string.description(\n    'Label property for the input component. This property is required for accesibility purposes.',\n  ),\n  inputID: PropTypes.string.description(\n    \"String that matches the input component's id. This property is required for accesibility purposes.\",\n  ),\n  maxCharCounter: PropTypes.number.description('Max of characters allowed.'),\n  currentChar: PropTypes.number.description('Current counter of input text area'),\n  feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n  validationMessage: PropTypes.string.description(\n    'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n  ),\n  hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n  required: PropTypes.bool.description('Adds required extra styling.'),\n  optional: PropTypes.bool.description('Adds optional extra styling.'),\n  fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n  leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n  hideLabel: PropTypes.bool.description(\n    'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n  ),\n  withHighlight: PropTypes.bool.description(\n    'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n  ),\n  isGroup: PropTypes.bool.description(\n    'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n  ),\n  iconError: PropTypes.bool.description('Adds icon error extra styling.'),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B,wBAAwB;AAEhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AAgCO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,UAAU,OAAO;AAAA,IACxB;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,UAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,UAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,UAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,UAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,UAAU,KAAK,YAAY,gCAAgC;AACxE;",
   "names": []
 }

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

@@ -1,10 +1,14 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { styled, space, sizing, layout } from "@elliemae/ds-system";
 const StyledContainer = styled.div`
   position: relative;
   padding: 0;
   margin: 0;
+  padding-bottom: 4px;
   display: grid;
+  ${layout}
+  ${space}
+  ${sizing}
   ${({ fitContent }) => fitContent ? "width: fit-content;" : void 0}
   ${({ isGroup }) => isGroup ? "border: none" : ""};
   ${({ leftLabel, hideLabel }) => leftLabel && !hideLabel ? "grid-template-columns: auto 1fr;" : void 0}
@@ -59,7 +63,7 @@ const StyledMessage = styled.div`
   font-size: ${({ theme }) => theme.fontSizes.microText[200]};
   text-align: right;
   line-height: 15px;
-  height: 15px;
+  height: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
   color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type {\n  DSFormLayoutBlockItemStyledContainerT,\n  DSFormLayoutBlockItemStyledLabelT,\n  DSFormLayoutBlockItemStyledMessageT,\n  DSFormLayoutBlockItemStyledMarkT,\n} from './index.d';\n\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n  position: relative;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n  ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n  align-items: center;\n  ${({ theme, withHighlight }) =>\n    withHighlight\n      ? `\n  &::after {\n        position: absolute;\n        content: '';\n        left: -${theme.space.xxs};\n        top: -${theme.space.xxxs};\n        z-index: -1;\n        width: calc(100% + ${theme.space.xs});\n        height: calc(100%  + ${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: -${theme.space.xxs};\n            top: -${theme.space.xxxs};\n            z-index: -1;\n            width: calc(100% + ${theme.space.xs});\n            height: calc(100%  + ${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  `\n      : undefined}\n`;\n\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n  display: flex;\n  ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n  ${({ hideLabel }) =>\n    hideLabel\n      ? `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  `\n      : undefined}\n`;\n\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  line-height: 15px;\n  height: 15px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n  padding-right: 1px;\n  margin-right: -1px;\n  font-style: normal;\n`;\n\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  margin-left: ${({ theme }) => theme.space.xxxs};\n  ${({ theme, required }) =>\n    required\n      ? `\n  background-color: ${theme.colors.danger[900]};\n  `\n      : `\n  border: 1px solid ${theme.colors.brand[600]};\n  `}\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\njustify-self: flex-end;\nfont-size: ${({ theme }) => theme.fontSizes.microText[300]}\nmargin-left: 16px;\ncolor: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAQhB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAGD,MAAM,cAAc,OAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAGD,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAM5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO;AAAA,MAElC;AAAA,sBACc,MAAM,OAAO,MAAM;AAAA;AAAA;AAIlC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhC,MAAM,kBAAkB,OAAO;AAAA;AAAA,aAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, space, sizing, layout } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n  hasError?: boolean;\n  leftLabel?: boolean;\n  hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n  leftLabel?: boolean;\n  fitContent?: boolean;\n  hideLabel?: boolean;\n  withHighlight?: boolean;\n  isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n  leftLabel?: boolean;\n  hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n  required?: boolean;\n}\n\n// interface DSFormLayoutBlockItemStyledIconErrorT {\n//   iconError?: string;\n// }\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n  hasError?: boolean;\n}\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n  position: relative;\n  padding: 0;\n  margin: 0;\n  padding-bottom: 4px;\n  display: grid;\n  ${layout}\n  ${space}\n  ${sizing}\n  ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n  ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n  align-items: center;\n  ${({ theme, withHighlight }) =>\n    withHighlight\n      ? `\n  &::after {\n        position: absolute;\n        content: '';\n        left: -${theme.space.xxs};\n        top: -${theme.space.xxxs};\n        z-index: -1;\n        width: calc(100% + ${theme.space.xs});\n        height: calc(100%  + ${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: -${theme.space.xxs};\n            top: -${theme.space.xxxs};\n            z-index: -1;\n            width: calc(100% + ${theme.space.xs});\n            height: calc(100%  + ${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  `\n      : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n  display: flex;\n  ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n  ${({ hideLabel }) =>\n    hideLabel\n      ? `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  `\n      : undefined}\n`;\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  line-height: 15px;\n  height: 50px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n  ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n  padding-right: 1px;\n  margin-right: -1px;\n  font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  margin-left: ${({ theme }) => theme.space.xxxs};\n  ${({ theme, required }) =>\n    required\n      ? `\n  background-color: ${theme.colors.danger[900]};\n  `\n      : `\n  border: 1px solid ${theme.colors.brand[600]};\n  `}\n`;\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\njustify-self: flex-end;\nfont-size: ${({ theme }) => theme.fontSizes.microText[300]}\nmargin-left: 16px;\ncolor: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n// export const StyledErrorIcon = styled.span<DSFormLayoutBlockItemStyledIconErrorT>`\n// width: 8px;\n// height: 8px;\n// border-radius: 50%;\n// margin-right: ${({ theme }) => theme.space.xxxs};\n// color: ${({ theme }) => theme.colors.danger[900]};\n// `;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAgCvC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMlC;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,OAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAK5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO;AAAA,MAElC;AAAA,sBACc,MAAM,OAAO,MAAM;AAAA;AAAA;AAGlC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,OAAO;AAAA;AAAA,aAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
   "names": []
 }

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

@@ -1,18 +1,20 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from "@elliemae/ds-utilities";
-import { propTypes } from "./propTypes";
+import { describe } from "@elliemae/ds-utilities";
 import { StyledContainer } from "./styles";
-import { defaultProps } from "./defaultProps";
-import { useValidateProps } from "./config/useValidateProps";
+import { propTypes } from "./propTypes";
+import { useFormLayoutCheckboxGroup } from "./config/useFormLayoutCheckboxGroup";
 const DSFormLayoutCheckboxGroup = (props) => {
-  useValidateProps(props);
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  const globalAttrs = useGetGlobalAttributes(propsWithDefault);
+  const {
+    globalAttributes: { ...othersGlobalAttributes },
+    xstyledProps,
+    propsWithDefault
+  } = useFormLayoutCheckboxGroup(props);
   return /* @__PURE__ */ jsx(StyledContainer, {
     role: "group",
     direction: propsWithDefault.direction,
-    ...globalAttrs,
+    ...othersGlobalAttributes,
+    ...xstyledProps,
     children: propsWithDefault.children
   });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport { StyledContainer } from './styles';\nimport { defaultProps } from './defaultProps';\nimport type { DSControlledCheckboxGroupT } from './index.d';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSFormLayoutCheckboxGroup = (props: DSControlledCheckboxGroupT): JSX.Element => {\n  useValidateProps(props);\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  return (\n    <StyledContainer role=\"group\" direction={propsWithDefault.direction} {...globalAttrs}>\n      {propsWithDefault.children}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutCheckboxGroup.propTypes = propTypes;\nDSFormLayoutCheckboxGroup.displayName = 'DSFormLayoutCheckboxGroup';\nconst DSFormLayoutCheckboxGroupWithSchema = describe(DSFormLayoutCheckboxGroup);\nDSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,UAAU,8BAA8B,8BAA8B;AAC/E,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB;AAEjC,MAAM,4BAA4B,CAAC,UAAmD;AACpF,mBAAiB,KAAK;AACtB,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,QAAM,cAAc,uBAAuB,gBAAgB;AAC3D,SACE,oBAAC;AAAA,IAAgB,MAAK;AAAA,IAAQ,WAAW,iBAAiB;AAAA,IAAY,GAAG;AAAA,IACtE,2BAAiB;AAAA,GACpB;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { DSFormLayoutCheckboxGroupT, propTypes } from './propTypes';\nimport { useFormLayoutCheckboxGroup } from './config/useFormLayoutCheckboxGroup';\n\nconst DSFormLayoutCheckboxGroup = (props: DSFormLayoutCheckboxGroupT.Props): JSX.Element => {\n  const {\n    globalAttributes: { ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault,\n  } = useFormLayoutCheckboxGroup(props);\n  return (\n    <StyledContainer role=\"group\" direction={propsWithDefault.direction} {...othersGlobalAttributes} {...xstyledProps}>\n      {propsWithDefault.children}\n    </StyledContainer>\n  );\n};\n\nDSFormLayoutCheckboxGroup.propTypes = propTypes;\nDSFormLayoutCheckboxGroup.displayName = 'DSFormLayoutCheckboxGroup';\nconst DSFormLayoutCheckboxGroupWithSchema = describe(DSFormLayoutCheckboxGroup);\nDSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAqC,iBAAiB;AACtD,SAAS,kCAAkC;AAE3C,MAAM,4BAA4B,CAAC,UAAyD;AAC1F,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,IAAI,2BAA2B,KAAK;AACpC,SACE,oBAAC;AAAA,IAAgB,MAAK;AAAA,IAAQ,WAAW,iBAAiB;AAAA,IAAY,GAAG;AAAA,IAAyB,GAAG;AAAA,IAClG,2BAAiB;AAAA,GACpB;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
   "names": []
 }

package/dist/esm/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes
+} from "@elliemae/ds-utilities";
+import { propTypes, defaultProps } from "../propTypes";
+const useFormLayoutCheckboxGroup = (props) => {
+  useValidateTypescriptPropTypes(props, propTypes);
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  return React2.useMemo(
+    () => ({ globalAttributes, xstyledProps, propsWithDefault }),
+    [globalAttributes, xstyledProps, propsWithDefault]
+  );
+};
+export {
+  useFormLayoutCheckboxGroup
+};
+//# sourceMappingURL=useFormLayoutCheckboxGroup.js.map

package/dist/esm/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/form-layout-checkbox-group/config/useFormLayoutCheckboxGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  GlobalAttributesT,\n  XstyledProps,\n} from '@elliemae/ds-utilities';\n\nimport { propTypes, defaultProps, type DSFormLayoutCheckboxGroupT } from '../propTypes';\n\ninterface UseFormLayoutCheckboxGroupT {\n  propsWithDefault: DSFormLayoutCheckboxGroupT.InternalProps;\n  globalAttributes: GlobalAttributesT;\n  xstyledProps: XstyledProps;\n}\n\nexport const useFormLayoutCheckboxGroup = (props: DSFormLayoutCheckboxGroupT.Props): UseFormLayoutCheckboxGroupT => {\n  useValidateTypescriptPropTypes(props, propTypes);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFormLayoutCheckboxGroupT.InternalProps>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  return React.useMemo(\n    () => ({ globalAttributes, xstyledProps, propsWithDefault }),\n    [globalAttributes, xstyledProps, propsWithDefault],\n  );\n};"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,WAAW,oBAAqD;AAQlE,MAAM,6BAA6B,CAAC,UAAyE;AAClH,iCAA+B,OAAO,SAAS;AAC/C,QAAM,mBAAmB,6BAAuE,OAAO,YAAY;AACnH,QAAM,mBAAmB,uBAAuB,gBAAgB;AAEhE,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,cAAc,iBAAiB;AAAA,IAC1D,CAAC,kBAAkB,cAAc,gBAAgB;AAAA,EACnD;AACF;",
+  "names": ["React"]
+}

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

@@ -1,10 +1,15 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-utilities";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+const defaultProps = {
+  direction: "horizontal"
+};
 const propTypes = {
   ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   direction: PropTypes.oneOf(["horizontal", "vertical"]).description("Set direction for the checkbox group.")
 };
 export {
+  defaultProps,
   propTypes
 };
 //# sourceMappingURL=propTypes.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-checkbox-group/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iCAAiC;AAE9C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAC5G;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport const defaultProps = {\n  direction: 'horizontal',\n};\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\nexport declare namespace DSFormLayoutCheckboxGroupT {\n  export interface PropsRequired {\n    direction: DirectionsT;\n    children: JSX.Element;\n  }\n\n  export interface DefaultProps {\n    direction?: string;\n  }\n\n  export interface Props extends PropsRequired, DefaultProps {}\n  export interface InternalProps extends PropsRequired, Required<DefaultProps> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B,wBAAwB;AAEhE,MAAM,eAAe;AAAA,EAC1B,WAAW;AACb;AAkBO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAC5G;",
   "names": []
 }

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

@@ -1,6 +1,9 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { styled, layout, space, sizing } from "@elliemae/ds-system";
 const StyledContainer = styled.div`
+  ${layout}
+  ${space}
+  ${sizing}
   display: inline-flex;
   flex-wrap: wrap;
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-checkbox-group/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxGroupStyledContainerT } from './index.d';\n\nexport const StyledContainer = styled.div<DSControlledCheckboxGroupStyledContainerT>`\n  display: inline-flex;\n  flex-wrap: wrap;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  margin-left: ${({ theme }) => theme.space.xs};\n  margin-right: ${({ theme }) => theme.space.xs};\n  margin-top: ${({ theme }) => theme.space.xxs};\n  & div:not([role='checkbox']) {\n    padding: 0;\n    margin-bottom: ${({ theme }) => theme.space.xxs};\n  }\n  & div:not(:last-child) {\n    margin-right: ${({ theme, direction }) => (direction === 'horizontal' ? theme.space.s : '0')};\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAGhB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,oBAGlB,CAAC,EAAE,UAAU,MAAO,cAAc,eAAe,QAAQ;AAAA,iBAC5D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,qBAGtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAO,UAAU,MAAO,cAAc,eAAe,MAAM,MAAM,IAAI;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, layout, space, sizing } from '@elliemae/ds-system';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\ninterface DSControlledCheckboxGroupStyledContainerT {\n  direction: DirectionsT;\n}\n\nexport const StyledContainer = styled.div<DSControlledCheckboxGroupStyledContainerT>`\n  ${layout}\n  ${space}\n  ${sizing}\n  display: inline-flex;\n  flex-wrap: wrap;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  margin-left: ${({ theme }) => theme.space.xs};\n  margin-right: ${({ theme }) => theme.space.xs};\n  margin-top: ${({ theme }) => theme.space.xxs};\n  & div:not([role='checkbox']) {\n    padding: 0;\n    margin-bottom: ${({ theme }) => theme.space.xxs};\n  }\n  & div:not(:last-child) {\n    margin-right: ${({ theme, direction }) => (direction === 'horizontal' ? theme.space.s : '0')};\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,QAAQ,OAAO,cAAc;AAQvC,MAAM,kBAAkB,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,oBAGgB,CAAC,EAAE,UAAU,MAAO,cAAc,eAAe,QAAQ;AAAA,iBAC5D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,qBAGtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAO,UAAU,MAAO,cAAc,eAAe,MAAM,MAAM,IAAI;AAAA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-layout-blocks",
-  "version": "3.5.1-next.0",
+  "version": "3.6.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Layout",
   "files": [
@@ -75,8 +75,8 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.5.1-next.0",
-    "@elliemae/ds-utilities": "3.5.1-next.0",
+    "@elliemae/ds-system": "3.6.0-next.1",
+    "@elliemae/ds-utilities": "3.6.0-next.1",
     "uid": "~2.0.0"
   },
   "devDependencies": {

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

@@ -1,24 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_d_exports = {};
-module.exports = __toCommonJS(index_d_exports);
-var React = __toESM(require("react"));
-//# sourceMappingURL=index.d.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/form-layout-block-item/index.d.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export interface DSFormLayoutBlockItemPropsT {\n  children: JSX.Element;\n  label: string;\n  maxCharCounter?: number;\n  currentChar?: number;\n  inputID: string;\n  validationMessage?: string;\n  feedbackMessage?: string;\n  hasError?: boolean;\n  leftLabel?: boolean;\n  required?: boolean;\n  fitContent?: boolean;\n  optional?: boolean;\n  hideLabel?: boolean;\n  withHighlight?: boolean;\n  isGroup?: boolean;\n}\n\nexport interface DSFormLayoutBlockItemStyledMessageT {\n  hasError?: boolean;\n  leftLabel?: boolean;\n  hideLabel?: boolean;\n}\n\nexport interface DSFormLayoutBlockItemStyledContainerT {\n  leftLabel?: boolean;\n  fitContent?: boolean;\n  hideLabel?: boolean;\n  withHighlight?: boolean;\n  isGroup?: boolean;\n}\n\nexport interface DSFormLayoutBlockItemStyledLabelT {\n  leftLabel?: boolean;\n  hideLabel?: boolean;\n}\n\nexport interface DSFormLayoutBlockItemStyledMarkT {\n  required?: boolean;\n}\n\nexport interface DSFormLayoutBlockItemStyledCharCounterT {\n  hasError?: boolean;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
-  "names": []
-}

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

@@ -1,67 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useValidateProps_exports = {};
-__export(useValidateProps_exports, {
-  useValidateProps: () => useValidateProps
-});
-module.exports = __toCommonJS(useValidateProps_exports);
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-const getVariableType = (arg) => {
-  if (Array.isArray(arg))
-    return "array";
-  if (arg === null)
-    return "null";
-  if (arg === void 0)
-    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.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: "horizontal" or "vertical" (string)
-  `
-  );
-};
-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
-  `
-  );
-};
-const useValidateProps = (props) => {
-  if (props.direction !== void 0 && props.direction !== "vertical" && props.direction !== "horizontal") {
-    throwCheckboxGroupDirectionError(props.direction);
-  }
-  if (!import_react.default.Children.count(props.children)) {
-    throwCheckboxGroupChildrenError();
-  }
-};
-//# sourceMappingURL=useValidateProps.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/form-layout-checkbox-group/config/useValidateProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSControlledCheckboxGroupT } from '../index.d';\n\nconst getVariableType = (arg: unknown): string => {\n  if (Array.isArray(arg)) return 'array';\n  if (arg === null) return 'null';\n  if (arg === undefined) return 'undefined';\n  return typeof arg;\n};\n\nconst throwCheckboxGroupDirectionError = (invalidProp: unknown): void => {\n  throw new Error(\n    `You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n  Received: ${invalidProp} (${getVariableType(invalidProp)})\n  Expected: \"horizontal\" or \"vertical\" (string)\n  `,\n  );\n};\n\nconst throwCheckboxGroupChildrenError = (): void => {\n  throw new Error(\n    `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  `,\n  );\n};\n\nexport const useValidateProps = (props: DSControlledCheckboxGroupT): void => {\n  if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {\n    throwCheckboxGroupDirectionError(props.direction);\n  }\n  if (!React.Children.count(props.children)) {\n    throwCheckboxGroupChildrenError();\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,kBAAkB,CAAC,QAAyB;AAChD,MAAI,MAAM,QAAQ,GAAG;AAAG,WAAO;AAC/B,MAAI,QAAQ;AAAM,WAAO;AACzB,MAAI,QAAQ;AAAW,WAAO;AAC9B,SAAO,OAAO;AAChB;AAEA,MAAM,mCAAmC,CAAC,gBAA+B;AACvE,QAAM,IAAI;AAAA,IACR;AAAA;AAAA,cAEU,gBAAgB,gBAAgB,WAAW;AAAA;AAAA;AAAA,EAGvD;AACF;AAEA,MAAM,kCAAkC,MAAY;AAClD,QAAM,IAAI;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF;AACF;AAEO,MAAM,mBAAmB,CAAC,UAA4C;AAC3E,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,cAAc,MAAM,cAAc,cAAc;AACvG,qCAAiC,MAAM,SAAS;AAAA,EAClD;AACA,MAAI,CAAC,aAAAA,QAAM,SAAS,MAAM,MAAM,QAAQ,GAAG;AACzC,oCAAgC;AAAA,EAClC;AACF;",
-  "names": ["React"]
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/form-layout-checkbox-group/defaultProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const defaultProps = {\n  direction: 'horizontal',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,WAAW;AACb;",
-  "names": []
-}

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

@@ -1,24 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_d_exports = {};
-module.exports = __toCommonJS(index_d_exports);
-var React = __toESM(require("react"));
-//# sourceMappingURL=index.d.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/form-layout-checkbox-group/index.d.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["type DirectionsT = 'horizontal' | 'vertical';\n\nexport interface DSControlledCheckboxGroupT {\n  direction: DirectionsT;\n  children: React.ReactNode;\n}\n\nexport interface DSControlledCheckboxGroupStyledContainerT {\n  direction: DirectionsT;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
-  "names": []
-}

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

@@ -1,2 +0,0 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA,YAAY,WAAW;",
-  "names": []
-}

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

@@ -1,41 +0,0 @@
-import * as React from "react";
-import React2 from "react";
-const getVariableType = (arg) => {
-  if (Array.isArray(arg))
-    return "array";
-  if (arg === null)
-    return "null";
-  if (arg === void 0)
-    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.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: "horizontal" or "vertical" (string)
-  `
-  );
-};
-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
-  `
-  );
-};
-const useValidateProps = (props) => {
-  if (props.direction !== void 0 && props.direction !== "vertical" && props.direction !== "horizontal") {
-    throwCheckboxGroupDirectionError(props.direction);
-  }
-  if (!React2.Children.count(props.children)) {
-    throwCheckboxGroupChildrenError();
-  }
-};
-export {
-  useValidateProps
-};
-//# sourceMappingURL=useValidateProps.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/form-layout-checkbox-group/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSControlledCheckboxGroupT } from '../index.d';\n\nconst getVariableType = (arg: unknown): string => {\n  if (Array.isArray(arg)) return 'array';\n  if (arg === null) return 'null';\n  if (arg === undefined) return 'undefined';\n  return typeof arg;\n};\n\nconst throwCheckboxGroupDirectionError = (invalidProp: unknown): void => {\n  throw new Error(\n    `You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n  Received: ${invalidProp} (${getVariableType(invalidProp)})\n  Expected: \"horizontal\" or \"vertical\" (string)\n  `,\n  );\n};\n\nconst throwCheckboxGroupChildrenError = (): void => {\n  throw new Error(\n    `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  `,\n  );\n};\n\nexport const useValidateProps = (props: DSControlledCheckboxGroupT): void => {\n  if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {\n    throwCheckboxGroupDirectionError(props.direction);\n  }\n  if (!React.Children.count(props.children)) {\n    throwCheckboxGroupChildrenError();\n  }\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,kBAAkB,CAAC,QAAyB;AAChD,MAAI,MAAM,QAAQ,GAAG;AAAG,WAAO;AAC/B,MAAI,QAAQ;AAAM,WAAO;AACzB,MAAI,QAAQ;AAAW,WAAO;AAC9B,SAAO,OAAO;AAChB;AAEA,MAAM,mCAAmC,CAAC,gBAA+B;AACvE,QAAM,IAAI;AAAA,IACR;AAAA;AAAA,cAEU,gBAAgB,gBAAgB,WAAW;AAAA;AAAA;AAAA,EAGvD;AACF;AAEA,MAAM,kCAAkC,MAAY;AAClD,QAAM,IAAI;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF;AACF;AAEO,MAAM,mBAAmB,CAAC,UAA4C;AAC3E,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,cAAc,MAAM,cAAc,cAAc;AACvG,qCAAiC,MAAM,SAAS;AAAA,EAClD;AACA,MAAI,CAACA,OAAM,SAAS,MAAM,MAAM,QAAQ,GAAG;AACzC,oCAAgC;AAAA,EAClC;AACF;",
-  "names": ["React"]
-}

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

@@ -1,8 +0,0 @@
-import * as React from "react";
-const defaultProps = {
-  direction: "horizontal"
-};
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-checkbox-group/defaultProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = {\n  direction: 'horizontal',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,WAAW;AACb;",
-  "names": []
-}

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

@@ -1,2 +0,0 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA,YAAY,WAAW;",
-  "names": []
-}