@elliemae/ds-form-layout-blocks 3.21.2 → 3.22.0-next.1

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

@@ -39,8 +39,7 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_DSFormLayoutBlockItemDataTestId = require("../exported-related/DSFormLayoutBlockItemDataTestId.js");
-var import_propTypes = require("./propTypes.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styles = require("./styles.js");
 var import_useFormLayoutBlockItem = require("./config/useFormLayoutBlockItem.js");
 const DSFormLayoutBlockItem = (props) => {
@@ -65,10 +64,11 @@ const DSFormLayoutBlockItem = (props) => {
   const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;
   const instanceUID = (0, import_react.useMemo)(() => inputID ?? `form_layout_block_item_${(0, import_uid.uid)(6)}`, [inputID]);
   const cols = (0, import_react.useMemo)(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
+  const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.StyledContainer,
     {
-      "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.CONTAINER,
       leftLabel,
       fitContent,
       hideLabel,
@@ -78,29 +78,33 @@ const DSFormLayoutBlockItem = (props) => {
       "aria-describedby": !isGroup ? `${instanceUID}_feedback_message` : void 0,
       className,
       ...xstyledProps,
+      ...othersGlobalAttributes,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, gutter: "xxs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          label ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             import_styles.StyledLabel,
             {
               id: `${instanceUID}_block_label`,
-              "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.LABEL,
               htmlFor: instanceUID,
               leftLabel,
               hideLabel,
               "aria-hidden": isGroup,
-              ...othersGlobalAttributes,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: [
                 label,
                 (required || optional) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMark, { required })
               ]
             }
-          ),
+          ) : null,
           maxCharCounter !== void 0 && currentChar !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_styles.StyledCharCount,
             {
-              "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.COUNTER,
               hasError: currentChar > maxCharCounter,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: `${currentChar}/${maxCharCounter}`
             }
           ) : null
@@ -110,24 +114,26 @@ const DSFormLayoutBlockItem = (props) => {
         feedbackMessage && !hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styles.StyledMessage,
           {
-            "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.MESSAGE,
             leftLabel,
             hideLabel,
             "aria-hidden": isGroup,
             id: `${instanceUID}_feedback_message`,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: feedbackMessage
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ScreenReaderOnly, { id: `${instanceUID}_feedback_message`, children: feedbackMessage }),
         validationMessage && hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_styles.StyledMessage,
+          import_styles.StyledErrorMessage,
           {
-            "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE,
             hasError,
             leftLabel,
             "aria-label": `${label}`,
             hideLabel,
             role: "alert",
             id: `${instanceUID}_error_message`,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, { width: 8, height: 8, color: ["danger", "900"], style: { marginBottom: "2px" } }),
               "\xA0",
@@ -139,8 +145,8 @@ const DSFormLayoutBlockItem = (props) => {
     }
   );
 };
-DSFormLayoutBlockItem.propTypes = import_propTypes.propTypes;
+DSFormLayoutBlockItem.propTypes = import_react_desc_prop_types.propTypes;
 DSFormLayoutBlockItem.displayName = "DSFormLayoutBlockItem";
 const DSFormLayoutBlockItemWithSchema = (0, import_ds_props_helpers.describe)(DSFormLayoutBlockItem);
-DSFormLayoutBlockItemWithSchema.propTypes = import_propTypes.propTypes;
+DSFormLayoutBlockItemWithSchema.propTypes = import_react_desc_prop_types.propTypes;
 //# sourceMappingURL=DSFormLayoutBlockItem.js.map

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-props-helpers';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { DSFormLayoutBlockItemDataTestId } from '../exported-related/DSFormLayoutBlockItemDataTestId.js';\nimport type { DSFormLayoutBlockItemT } from './propTypes.js';\nimport { propTypes } from './propTypes.js';\nimport {\n  StyledMessage,\n  StyledLabel,\n  StyledContainer,\n  StyledMark,\n  ScreenReaderOnly,\n  StyledCharCount,\n} from './styles.js';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem.js';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n  const { globalAttributes, xstyledProps, propsWithDefault } = 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  // eslint-disable-next-line no-unused-vars\n  const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;\n  const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);\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 ? `${instanceUID}_feedback_message` : undefined}\n      className={className}\n      {...xstyledProps}\n    >\n      <Grid cols={cols} gutter=\"xxs\">\n        <StyledLabel\n          id={`${instanceUID}_block_label`}\n          data-testid={DSFormLayoutBlockItemDataTestId.LABEL}\n          htmlFor={instanceUID}\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={`${instanceUID}_feedback_message`}\n        >\n          {feedbackMessage}\n        </StyledMessage>\n      ) : (\n        <ScreenReaderOnly id={`${instanceUID}_feedback_message`}>{feedbackMessage}</ScreenReaderOnly>\n      )}\n      {validationMessage && hasError ? (\n        <StyledMessage\n          data-testid={DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE}\n          hasError={hasError}\n          leftLabel={leftLabel}\n          aria-label={`${label}`}\n          hideLabel={hideLabel}\n          role=\"alert\"\n          id={`${instanceUID}_error_message`}\n        >\n          <AlertsSmallFill width={8} height={8} color={['danger', '900']} style={{ marginBottom: '2px' }} />\n          &nbsp;\n          {`${validationMessage}`}\n        </StyledMessage>\n      ) : (\n        <ScreenReaderOnly id={`${instanceUID}_error_message`}>{validationMessage}</ScreenReaderOnly>\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;AD2Df;AA1DR,mBAA+B;AAC/B,qBAAqB;AACrB,8BAAyB;AACzB,iBAAoB;AACpB,sBAAgC;AAChC,6CAAgD;AAEhD,uBAA0B;AAC1B,oBAOO;AACP,oCAAuC;AAEvC,MAAM,wBAAwB,CAAC,UAAwC;AACrE,QAAM,EAAE,kBAAkB,cAAc,iBAAiB,QAAI,sDAAuB,KAAK;AACzF,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;AAGJ,QAAM,EAAE,WAAW,OAAO,aAAa,GAAG,uBAAuB,IAAI;AACrE,QAAM,kBAAc,sBAAQ,MAAM,WAAW,8BAA0B,gBAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAE1F,QAAM,WAAO,sBAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uEAAgC;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,UAAU,aAAa;AAAA,MAC3B;AAAA,MACA,oBAAkB,CAAC,UAAU,GAAG,iCAAiC;AAAA,MACjE;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,qDAAC,uBAAK,MAAY,QAAO,OACvB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,GAAG;AAAA,cACP,eAAa,uEAAgC;AAAA,cAC7C,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACZ,GAAG;AAAA,cAEH;AAAA;AAAA,iBACC,YAAY,aAAa,4CAAC,4BAAW,UAAoB;AAAA;AAAA;AAAA,UAC7D;AAAA,UACC,mBAAmB,UAAa,gBAAgB,SAC/C;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,uEAAgC;AAAA,cAC7C,UAAU,cAAc;AAAA,cACxB,aAAG,eAAe;AAAA;AAAA,UAAiB,IACnC;AAAA,WACN;AAAA,QACC,WAAW,4CAAC,kCAAiB,IAAG,UAAU,aAAG,UAAU,mBAAmB,MAAK;AAAA,QAC/E;AAAA,QACA,mBAAmB,CAAC,WACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,IAAI,GAAG;AAAA,YAEN;AAAA;AAAA,QACH,IAEA,4CAAC,kCAAiB,IAAI,GAAG,gCAAiC,2BAAgB;AAAA,QAE3E,qBAAqB,WACpB;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uEAAgC;AAAA,YAC7C;AAAA,YACA;AAAA,YACA,cAAY,GAAG;AAAA,YACf;AAAA,YACA,MAAK;AAAA,YACL,IAAI,GAAG;AAAA,YAEP;AAAA,0DAAC,mCAAgB,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,UAAU,KAAK,GAAG,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,cAAE;AAAA,cAEjG,GAAG;AAAA;AAAA;AAAA,QACN,IAEA,4CAAC,kCAAiB,IAAI,GAAG,6BAA8B,6BAAkB;AAAA;AAAA;AAAA,EAE7E;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,sCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport type { DSFormLayoutBlockItemT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport {\n  StyledMessage,\n  StyledLabel,\n  StyledContainer,\n  StyledMark,\n  ScreenReaderOnly,\n  StyledCharCount,\n  StyledErrorMessage,\n} from './styles.js';\nimport { useFormLayoutBlockItem } from './config/useFormLayoutBlockItem.js';\n\nconst DSFormLayoutBlockItem = (props: DSFormLayoutBlockItemT.Props) => {\n  const { globalAttributes, xstyledProps, propsWithDefault } = 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  // eslint-disable-next-line no-unused-vars\n  const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;\n  const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);\n\n  const cols = useMemo(() => (maxCharCounter !== undefined ? ['1fr', 'auto'] : ['1fr']), [maxCharCounter]);\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n  return (\n    <StyledContainer\n      leftLabel={leftLabel}\n      fitContent={fitContent}\n      hideLabel={hideLabel}\n      withHighlight={withHighlight}\n      as={isGroup ? 'fieldset' : 'div'}\n      isGroup={isGroup}\n      aria-describedby={!isGroup ? `${instanceUID}_feedback_message` : undefined}\n      className={className}\n      {...xstyledProps}\n      {...othersGlobalAttributes}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Grid cols={cols} gutter=\"xxs\">\n        {label ? (\n          <StyledLabel\n            id={`${instanceUID}_block_label`}\n            htmlFor={instanceUID}\n            leftLabel={leftLabel}\n            hideLabel={hideLabel}\n            aria-hidden={isGroup}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {label}\n            {(required || optional) && <StyledMark required={required} />}\n          </StyledLabel>\n        ) : null}\n\n        {maxCharCounter !== undefined && currentChar !== undefined ? (\n          <StyledCharCount\n            hasError={currentChar > maxCharCounter}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >{`${currentChar}/${maxCharCounter}`}</StyledCharCount>\n        ) : null}\n      </Grid>\n      {isGroup && <ScreenReaderOnly as=\"legend\">{`${label}. ${feedbackMessage || ''}`}</ScreenReaderOnly>}\n      {children}\n      {feedbackMessage && !hasError ? (\n        <StyledMessage\n          leftLabel={leftLabel}\n          hideLabel={hideLabel}\n          aria-hidden={isGroup}\n          id={`${instanceUID}_feedback_message`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {feedbackMessage}\n        </StyledMessage>\n      ) : (\n        <ScreenReaderOnly id={`${instanceUID}_feedback_message`}>{feedbackMessage}</ScreenReaderOnly>\n      )}\n      {validationMessage && hasError ? (\n        <StyledErrorMessage\n          hasError={hasError}\n          leftLabel={leftLabel}\n          aria-label={`${label}`}\n          hideLabel={hideLabel}\n          role=\"alert\"\n          id={`${instanceUID}_error_message`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <AlertsSmallFill width={8} height={8} color={['danger', '900']} style={{ marginBottom: '2px' }} />\n          &nbsp;\n          {`${validationMessage}`}\n        </StyledErrorMessage>\n      ) : (\n        <ScreenReaderOnly id={`${instanceUID}_error_message`}>{validationMessage}</ScreenReaderOnly>\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;ADgEb;AA/DV,mBAA4C;AAC5C,qBAAqB;AACrB,8BAAyB;AACzB,iBAAoB;AACpB,sBAAgC;AAEhC,mCAA0B;AAC1B,oBAQO;AACP,oCAAuC;AAEvC,MAAM,wBAAwB,CAAC,UAAwC;AACrE,QAAM,EAAE,kBAAkB,cAAc,iBAAiB,QAAI,sDAAuB,KAAK;AACzF,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;AAGJ,QAAM,EAAE,WAAW,OAAO,aAAa,GAAG,uBAAuB,IAAI;AACrE,QAAM,kBAAc,sBAAQ,MAAM,WAAW,8BAA0B,gBAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAE1F,QAAM,WAAO,sBAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,UAAU,aAAa;AAAA,MAC3B;AAAA,MACA,oBAAkB,CAAC,UAAU,GAAG,iCAAiC;AAAA,MACjE;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,qDAAC,uBAAK,MAAY,QAAO,OACtB;AAAA,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,GAAG;AAAA,cACP,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,iBACC,YAAY,aAAa,4CAAC,4BAAW,UAAoB;AAAA;AAAA;AAAA,UAC7D,IACE;AAAA,UAEH,mBAAmB,UAAa,gBAAgB,SAC/C;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,cAAc;AAAA,cACxB;AAAA,cACA;AAAA,cACA,aAAG,eAAe;AAAA;AAAA,UAAiB,IACnC;AAAA,WACN;AAAA,QACC,WAAW,4CAAC,kCAAiB,IAAG,UAAU,aAAG,UAAU,mBAAmB,MAAK;AAAA,QAC/E;AAAA,QACA,mBAAmB,CAAC,WACnB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,IAAI,GAAG;AAAA,YACP;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH,IAEA,4CAAC,kCAAiB,IAAI,GAAG,gCAAiC,2BAAgB;AAAA,QAE3E,qBAAqB,WACpB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAY,GAAG;AAAA,YACf;AAAA,YACA,MAAK;AAAA,YACL,IAAI,GAAG;AAAA,YACP;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,mCAAgB,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,UAAU,KAAK,GAAG,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,cAAE;AAAA,cAEjG,GAAG;AAAA;AAAA;AAAA,QACN,IAEA,4CAAC,kCAAiB,IAAI,GAAG,6BAA8B,6BAAkB;AAAA;AAAA;AAAA,EAE7E;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,sCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
   "names": []
 }

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

@@ -28,9 +28,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSFormLayoutBlockItemDefinitions_exports = {};
 __export(DSFormLayoutBlockItemDefinitions_exports, {
-  DSFormLayoutBlockItemName: () => DSFormLayoutBlockItemName
+  DSFormLayoutBlockItemDataTestId: () => DSFormLayoutBlockItemDataTestId,
+  DSFormLayoutBlockItemName: () => DSFormLayoutBlockItemName,
+  DSFormLayoutBlockItemSlots: () => DSFormLayoutBlockItemSlots
 });
 module.exports = __toCommonJS(DSFormLayoutBlockItemDefinitions_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
 const DSFormLayoutBlockItemName = "DSFormLayoutBlockItem";
+const DSFormLayoutBlockItemSlots = {
+  CONTAINER: "container",
+  LABEL: "label",
+  MESSAGE: "message",
+  ERROR_MESSAGE: "error-message",
+  COUNTER: "counter",
+  MARK: "mark"
+};
+const DSFormLayoutBlockItemDataTestId = (0, import_ds_system.slotObjectToDataTestIds)(
+  DSFormLayoutBlockItemName,
+  DSFormLayoutBlockItemSlots
+);
 //# sourceMappingURL=DSFormLayoutBlockItemDefinitions.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-block-item/DSFormLayoutBlockItemDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSFormLayoutBlockItemName = 'DSFormLayoutBlockItem';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,4BAA4B;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormLayoutBlockItemName = 'DSFormLayoutBlockItem';\n\nexport const DSFormLayoutBlockItemSlots = {\n  CONTAINER: 'container',\n  LABEL: 'label',\n  MESSAGE: 'message',\n  ERROR_MESSAGE: 'error-message',\n  COUNTER: 'counter',\n  MARK: 'mark',\n};\n\nexport const DSFormLayoutBlockItemDataTestId = slotObjectToDataTestIds(\n  DSFormLayoutBlockItemName,\n  DSFormLayoutBlockItemSlots,\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,4BAA4B;AAElC,MAAM,6BAA6B;AAAA,EACxC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAM,sCAAkC;AAAA,EAC7C;AAAA,EACA;AACF;",
   "names": []
 }

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

@@ -34,11 +34,11 @@ module.exports = __toCommonJS(useFormLayoutBlockItem_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_propTypes = require("../propTypes.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_DSFormLayoutBlockItemDefinitions = require("../DSFormLayoutBlockItemDefinitions.js");
 const useFormLayoutBlockItem = (props) => {
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes, import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName);
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes, import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName);
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   return import_react.default.useMemo(

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

@@ -1,7 +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 type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps, type DSFormLayoutBlockItemT } from '../propTypes.js';\nimport { DSFormLayoutBlockItemName } from '../DSFormLayoutBlockItemDefinitions.js';\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, DSFormLayoutBlockItemName);\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;AAGlB,8BAKO;AACP,uBAAqE;AACrE,8CAA0C;AAQnC,MAAM,yBAAyB,CAAC,UAAiE;AACtG,8DAA+B,OAAO,4BAAW,iEAAyB;AAC1E,QAAM,uBAAmB,sDAAmE,OAAO,6BAAY;AAC/G,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,cAAc,iBAAiB;AAAA,IAC1D,CAAC,kBAAkB,cAAc,gBAAgB;AAAA,EACnD;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps, type DSFormLayoutBlockItemT } from '../react-desc-prop-types.js';\nimport { DSFormLayoutBlockItemName } from '../DSFormLayoutBlockItemDefinitions.js';\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, DSFormLayoutBlockItemName);\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;AAGlB,8BAKO;AACP,mCAAqE;AACrE,8CAA0C;AAQnC,MAAM,yBAAyB,CAAC,UAAiE;AACtG,8DAA+B,OAAO,wCAAW,iEAAyB;AAC1E,QAAM,uBAAmB,sDAAmE,OAAO,yCAAY;AAC/G,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,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/index.js

@@ -27,4 +27,5 @@ var form_layout_block_item_exports = {};
 module.exports = __toCommonJS(form_layout_block_item_exports);
 var React = __toESM(require("react"));
 __reExport(form_layout_block_item_exports, require("./DSFormLayoutBlockItem.js"), module.exports);
+__reExport(form_layout_block_item_exports, require("./DSFormLayoutBlockItemDefinitions.js"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form-layout-block-item/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSFormLayoutBlockItem.js';\nexport type { DSFormLayoutBlockItemT } from './propTypes.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,2CAAc,uCAAd;",
+  "sourcesContent": ["export * from './DSFormLayoutBlockItem.js';\nexport * from './DSFormLayoutBlockItemDefinitions.js';\nexport type { DSFormLayoutBlockItemT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,2CAAc,uCAAd;AACA,2CAAc,kDADd;",
   "names": []
 }

package/dist/cjs/form-layout-block-item/{propTypes.js → react-desc-prop-types.js}

@@ -26,12 +26,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var propTypes_exports = {};
-__export(propTypes_exports, {
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
   defaultProps: () => defaultProps,
   propTypes: () => propTypes
 });
-module.exports = __toCommonJS(propTypes_exports);
+module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const defaultProps = {
@@ -69,4 +69,4 @@ const propTypes = {
   ),
   iconError: import_ds_props_helpers.PropTypes.bool.description("Adds icon error extra styling.")
 };
-//# sourceMappingURL=propTypes.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/form-layout-block-item/{propTypes.js.map → react-desc-prop-types.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/form-layout-block-item/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/form-layout-block-item/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\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, Partial<DefaultProps> {}\n  export interface InternalProps extends PropsOptional, PropsRequired, 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} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AAGhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AACX;AAgCO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,OAAO;AAAA,IACxB;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,OAAO,YAAY,4BAA4B;AAAA,EACzE,aAAa,kCAAU,OAAO,YAAY,oCAAoC;AAAA,EAC9E,iBAAiB,kCAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,kCAAU,OAAO;AAAA,IAClC;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC1F,UAAU,kCAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,8BAA8B;AAAA,EACnE,YAAY,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,WAAW,kCAAU,KAAK,YAAY,oDAAoD;AAAA,EAC1F,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,eAAe,kCAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EACA,WAAW,kCAAU,KAAK,YAAY,gCAAgC;AACxE;",
   "names": []

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

@@ -31,6 +31,7 @@ __export(styles_exports, {
   ScreenReaderOnly: () => ScreenReaderOnly,
   StyledCharCount: () => StyledCharCount,
   StyledContainer: () => StyledContainer,
+  StyledErrorMessage: () => StyledErrorMessage,
   StyledLabel: () => StyledLabel,
   StyledMark: () => StyledMark,
   StyledMessage: () => StyledMessage
@@ -38,7 +39,11 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-const StyledContainer = (0, import_ds_system.styled)("div")`
+var import_DSFormLayoutBlockItemDefinitions = require("./DSFormLayoutBlockItemDefinitions.js");
+const StyledContainer = (0, import_ds_system.styled)("div", {
+  name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
+  slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.CONTAINER
+})`
   position: relative;
   padding: 0;
   margin: 0;
@@ -80,7 +85,10 @@ const StyledContainer = (0, import_ds_system.styled)("div")`
         }
   ` : void 0}
 `;
-const StyledLabel = import_ds_system.styled.label`
+const StyledLabel = (0, import_ds_system.styled)("label", {
+  name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
+  slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.LABEL
+})`
   display: flex;
   ${({ theme, leftLabel }) => leftLabel ? `padding-right: ${theme.space.xxxs};` : void 0}
   ${({ hideLabel }) => hideLabel ? `position: absolute;
@@ -94,7 +102,7 @@ const StyledLabel = import_ds_system.styled.label`
       border: 0;
   ` : void 0}
 `;
-const StyledMessage = (0, import_ds_system.styled)("div")`
+const messageCss = import_ds_system.css`
   font-size: ${({ theme }) => theme.fontSizes.microText[200]};
   text-align: right;
   line-height: 15px;
@@ -105,7 +113,22 @@ const StyledMessage = (0, import_ds_system.styled)("div")`
   ${({ leftLabel, hideLabel }) => leftLabel && !hideLabel ? "grid-column: 1/3;" : void 0}
   font-style: normal;
 `;
-const StyledMark = import_ds_system.styled.span`
+const StyledMessage = (0, import_ds_system.styled)("div", {
+  name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
+  slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.MESSAGE
+})`
+  ${messageCss}
+`;
+const StyledErrorMessage = (0, import_ds_system.styled)("div", {
+  name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
+  slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.ERROR_MESSAGE
+})`
+  ${messageCss}
+`;
+const StyledMark = (0, import_ds_system.styled)("span", {
+  name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
+  slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.MARK
+})`
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -125,7 +148,10 @@ const ScreenReaderOnly = import_ds_system.styled.div`
   white-space: nowrap;
   width: 1px;
 `;
-const StyledCharCount = import_ds_system.styled.span`
+const StyledCharCount = (0, import_ds_system.styled)("span", {
+  name: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemName,
+  slot: import_DSFormLayoutBlockItemDefinitions.DSFormLayoutBlockItemSlots.COUNTER
+})`
   justify-self: flex-end;
   margin-left: 16px;
   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, xStyledCommonProps } 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\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n  hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n  position: relative;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  ${xStyledCommonProps}\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  min-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  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>`\n  justify-self: flex-end;\n  margin-left: 16px;\n  color: ${({ 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,uBAA2C;AA4BpC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;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,oBAAgB,yBAAO,KAAK;AAAA,eAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMhD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC/F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,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,GAAG;AAAA,MAErC;AAAA,sBACc,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGrC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,WAG3B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;",
+  "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSFormLayoutBlockItemSlots, DSFormLayoutBlockItemName } from './DSFormLayoutBlockItemDefinitions.js';\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\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n  hasError?: boolean;\n}\nexport const StyledContainer = styled('div', {\n  name: DSFormLayoutBlockItemName,\n  slot: DSFormLayoutBlockItemSlots.CONTAINER,\n})<DSFormLayoutBlockItemStyledContainerT>`\n  position: relative;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  ${xStyledCommonProps}\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', {\n  name: DSFormLayoutBlockItemName,\n  slot: DSFormLayoutBlockItemSlots.LABEL,\n})<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\nconst messageCss = css<DSFormLayoutBlockItemStyledMessageT>`\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  line-height: 15px;\n  min-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  font-style: normal;\n`;\nexport const StyledMessage = styled('div', {\n  name: DSFormLayoutBlockItemName,\n  slot: DSFormLayoutBlockItemSlots.MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n  ${messageCss}\n`;\n\nexport const StyledErrorMessage = styled('div', {\n  name: DSFormLayoutBlockItemName,\n  slot: DSFormLayoutBlockItemSlots.ERROR_MESSAGE,\n})<DSFormLayoutBlockItemStyledMessageT>`\n  ${messageCss}\n`;\n\nexport const StyledMark = styled('span', {\n  name: DSFormLayoutBlockItemName,\n  slot: DSFormLayoutBlockItemSlots.MARK,\n})<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', {\n  name: DSFormLayoutBlockItemName,\n  slot: DSFormLayoutBlockItemSlots.COUNTER,\n})<DSFormLayoutBlockItemStyledCharCounterT>`\n  justify-self: flex-end;\n  margin-left: 16px;\n  color: ${({ 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;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,8CAAsE;AA2B/D,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,mEAA2B;AACnC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG;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,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,mEAA2B;AACnC,CAAC;AAAA;AAAA,IAEG,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;AAGR,MAAM,aAAa;AAAA,eACJ,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMhD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC/F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,mEAA2B;AACnC,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,mEAA2B;AACnC,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,iBAAa,yBAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mEAA2B;AACnC,CAAC;AAAA;AAAA;AAAA;AAAA,iBAIgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO,GAAG;AAAA,MAErC;AAAA,sBACc,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGrC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,sBAAkB,yBAAO,QAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,mEAA2B;AACnC,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;",
   "names": []
 }

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

@@ -36,7 +36,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styles = require("./styles.js");
-var import_propTypes = require("./propTypes.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useFormLayoutCheckboxGroup = require("./config/useFormLayoutCheckboxGroup.js");
 const DSFormLayoutCheckboxGroup = (props) => {
   const {
@@ -46,8 +46,8 @@ const DSFormLayoutCheckboxGroup = (props) => {
   } = (0, import_useFormLayoutCheckboxGroup.useFormLayoutCheckboxGroup)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, { role: "group", direction: propsWithDefault.direction, ...othersGlobalAttributes, ...xstyledProps, children: propsWithDefault.children });
 };
-DSFormLayoutCheckboxGroup.propTypes = import_propTypes.propTypes;
+DSFormLayoutCheckboxGroup.propTypes = import_react_desc_prop_types.propTypes;
 DSFormLayoutCheckboxGroup.displayName = "DSFormLayoutCheckboxGroup";
 const DSFormLayoutCheckboxGroupWithSchema = (0, import_ds_props_helpers.describe)(DSFormLayoutCheckboxGroup);
-DSFormLayoutCheckboxGroupWithSchema.propTypes = import_propTypes.propTypes;
+DSFormLayoutCheckboxGroupWithSchema.propTypes = import_react_desc_prop_types.propTypes;
 //# sourceMappingURL=DSFormLayoutCheckboxGroup.js.map

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 } from '@elliemae/ds-props-helpers';\nimport { StyledContainer } from './styles.js';\nimport type { DSFormLayoutCheckboxGroupT } from './propTypes.js';\nimport { propTypes } from './propTypes.js';\nimport { useFormLayoutCheckboxGroup } from './config/useFormLayoutCheckboxGroup.js';\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;ADcnB;AAbJ,8BAAyB;AACzB,oBAAgC;AAEhC,uBAA0B;AAC1B,wCAA2C;AAE3C,MAAM,4BAA4B,CAAC,UAAyD;AAC1F,QAAM;AAAA,IACJ,kBAAkB,EAAE,GAAG,uBAAuB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,QAAI,8DAA2B,KAAK;AACpC,SACE,4CAAC,iCAAgB,MAAK,SAAQ,WAAW,iBAAiB,WAAY,GAAG,wBAAyB,GAAG,cAClG,2BAAiB,UACpB;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { StyledContainer } from './styles.js';\nimport type { DSFormLayoutCheckboxGroupT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { useFormLayoutCheckboxGroup } from './config/useFormLayoutCheckboxGroup.js';\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;ADcnB;AAbJ,8BAAyB;AACzB,oBAAgC;AAEhC,mCAA0B;AAC1B,wCAA2C;AAE3C,MAAM,4BAA4B,CAAC,UAAyD;AAC1F,QAAM;AAAA,IACJ,kBAAkB,EAAE,GAAG,uBAAuB;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,QAAI,8DAA2B,KAAK;AACpC,SACE,4CAAC,iCAAgB,MAAK,SAAQ,WAAW,iBAAiB,WAAY,GAAG,wBAAyB,GAAG,cAClG,2BAAiB,UACpB;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
   "names": []
 }

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

@@ -34,11 +34,11 @@ module.exports = __toCommonJS(useFormLayoutCheckboxGroup_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_propTypes = require("../propTypes.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_DSFormLayoutCheckboxGroupDefinitions = require("../DSFormLayoutCheckboxGroupDefinitions.js");
 const useFormLayoutCheckboxGroup = (props) => {
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes, import_DSFormLayoutCheckboxGroupDefinitions.DSFormLayoutCheckboxGroupName);
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes, import_DSFormLayoutCheckboxGroupDefinitions.DSFormLayoutCheckboxGroupName);
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   return import_react.default.useMemo(

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

@@ -1,7 +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 type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps, type DSFormLayoutCheckboxGroupT } from '../propTypes.js';\nimport { DSFormLayoutCheckboxGroupName } from '../DSFormLayoutCheckboxGroupDefinitions.js';\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, DSFormLayoutCheckboxGroupName);\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};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,8BAKO;AACP,uBAAyE;AACzE,kDAA8C;AAQvC,MAAM,6BAA6B,CAAC,UAAyE;AAClH,8DAA+B,OAAO,4BAAW,yEAA6B;AAC9E,QAAM,uBAAmB,sDAAuE,OAAO,6BAAY;AACnH,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,cAAc,iBAAiB;AAAA,IAC1D,CAAC,kBAAkB,cAAc,gBAAgB;AAAA,EACnD;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps, type DSFormLayoutCheckboxGroupT } from '../react-desc-prop-types.js';\nimport { DSFormLayoutCheckboxGroupName } from '../DSFormLayoutCheckboxGroupDefinitions.js';\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, DSFormLayoutCheckboxGroupName);\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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,8BAKO;AACP,mCAAyE;AACzE,kDAA8C;AAQvC,MAAM,6BAA6B,CAAC,UAAyE;AAClH,8DAA+B,OAAO,wCAAW,yEAA6B;AAC9E,QAAM,uBAAmB,sDAAuE,OAAO,yCAAY;AACnH,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,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 → react-desc-prop-types.js}

@@ -26,12 +26,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var propTypes_exports = {};
-__export(propTypes_exports, {
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
   defaultProps: () => defaultProps,
   propTypes: () => propTypes
 });
-module.exports = __toCommonJS(propTypes_exports);
+module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const defaultProps = {
@@ -40,6 +40,7 @@ const defaultProps = {
 const propTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
-  direction: import_ds_props_helpers.PropTypes.oneOf(["horizontal", "vertical"]).description("Set direction for the checkbox group.")
+  direction: import_ds_props_helpers.PropTypes.oneOf(["horizontal", "vertical"]).description("Set direction for the checkbox group."),
+  children: import_ds_props_helpers.PropTypes.node.isRequired.description("The content of the component.")
 };
-//# sourceMappingURL=propTypes.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/form-layout-checkbox-group/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/form-layout-checkbox-group/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\nexport declare namespace DSFormLayoutCheckboxGroupT {\n  export interface PropsRequired {\n    children: JSX.Element;\n  }\n\n  export interface DefaultProps {\n    direction: DirectionsT;\n  }\n\n  export interface Props extends PropsRequired, DefaultProps {}\n  export interface InternalProps extends PropsRequired, Required<DefaultProps> {}\n}\n\nexport const defaultProps: DSFormLayoutCheckboxGroupT.DefaultProps = {\n  direction: 'horizontal',\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  direction: PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.'),\n  children: PropTypes.node.isRequired.description('The content of the component.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAiBhE,MAAM,eAAwD;AAAA,EACnE,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,MAAM,CAAC,cAAc,UAAU,CAAC,EAAE,YAAY,uCAAuC;AAAA,EAC1G,UAAU,kCAAU,KAAK,WAAW,YAAY,+BAA+B;AACjF;",
+  "names": []
+}

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

@@ -1,19 +1,19 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { describe } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
 import { AlertsSmallFill } from "@elliemae/ds-icons";
-import { DSFormLayoutBlockItemDataTestId } from "../exported-related/DSFormLayoutBlockItemDataTestId.js";
-import { propTypes } from "./propTypes.js";
+import { propTypes } from "./react-desc-prop-types.js";
 import {
   StyledMessage,
   StyledLabel,
   StyledContainer,
   StyledMark,
   ScreenReaderOnly,
-  StyledCharCount
+  StyledCharCount,
+  StyledErrorMessage
 } from "./styles.js";
 import { useFormLayoutBlockItem } from "./config/useFormLayoutBlockItem.js";
 const DSFormLayoutBlockItem = (props) => {
@@ -38,10 +38,11 @@ const DSFormLayoutBlockItem = (props) => {
   const { className, label: globalLabel, ...othersGlobalAttributes } = globalAttributes;
   const instanceUID = useMemo(() => inputID ?? `form_layout_block_item_${uid(6)}`, [inputID]);
   const cols = useMemo(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
+  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = useCallback(() => ({}), []);
   return /* @__PURE__ */ jsxs(
     StyledContainer,
     {
-      "data-testid": DSFormLayoutBlockItemDataTestId.CONTAINER,
       leftLabel,
       fitContent,
       hideLabel,
@@ -51,29 +52,33 @@ const DSFormLayoutBlockItem = (props) => {
       "aria-describedby": !isGroup ? `${instanceUID}_feedback_message` : void 0,
       className,
       ...xstyledProps,
+      ...othersGlobalAttributes,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsxs(Grid, { cols, gutter: "xxs", children: [
-          /* @__PURE__ */ jsxs(
+          label ? /* @__PURE__ */ jsxs(
             StyledLabel,
             {
               id: `${instanceUID}_block_label`,
-              "data-testid": DSFormLayoutBlockItemDataTestId.LABEL,
               htmlFor: instanceUID,
               leftLabel,
               hideLabel,
               "aria-hidden": isGroup,
-              ...othersGlobalAttributes,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: [
                 label,
                 (required || optional) && /* @__PURE__ */ jsx(StyledMark, { required })
               ]
             }
-          ),
+          ) : null,
           maxCharCounter !== void 0 && currentChar !== void 0 ? /* @__PURE__ */ jsx(
             StyledCharCount,
             {
-              "data-testid": DSFormLayoutBlockItemDataTestId.COUNTER,
               hasError: currentChar > maxCharCounter,
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: `${currentChar}/${maxCharCounter}`
             }
           ) : null
@@ -83,24 +88,26 @@ const DSFormLayoutBlockItem = (props) => {
         feedbackMessage && !hasError ? /* @__PURE__ */ jsx(
           StyledMessage,
           {
-            "data-testid": DSFormLayoutBlockItemDataTestId.MESSAGE,
             leftLabel,
             hideLabel,
             "aria-hidden": isGroup,
             id: `${instanceUID}_feedback_message`,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: feedbackMessage
           }
         ) : /* @__PURE__ */ jsx(ScreenReaderOnly, { id: `${instanceUID}_feedback_message`, children: feedbackMessage }),
         validationMessage && hasError ? /* @__PURE__ */ jsxs(
-          StyledMessage,
+          StyledErrorMessage,
           {
-            "data-testid": DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE,
             hasError,
             leftLabel,
             "aria-label": `${label}`,
             hideLabel,
             role: "alert",
             id: `${instanceUID}_error_message`,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsx(AlertsSmallFill, { width: 8, height: 8, color: ["danger", "900"], style: { marginBottom: "2px" } }),
               "\xA0",