@elliemae/ds-form-layout-blocks 3.3.0-next.5 → 3.3.0-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/exported-related/DSFormLayoutBlockItemDataTestId.js +35 -0
  2. package/dist/cjs/exported-related/DSFormLayoutBlockItemDataTestId.js.map +7 -0
  3. package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js +16 -1
  4. package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js.map +2 -2
  5. package/dist/cjs/form-layout-block-item/index.d.js.map +1 -1
  6. package/dist/cjs/form-layout-block-item/propTypes.js +2 -0
  7. package/dist/cjs/form-layout-block-item/propTypes.js.map +2 -2
  8. package/dist/cjs/form-layout-block-item/styles.js +7 -1
  9. package/dist/cjs/form-layout-block-item/styles.js.map +2 -2
  10. package/dist/esm/exported-related/DSFormLayoutBlockItemDataTestId.js +13 -0
  11. package/dist/esm/exported-related/DSFormLayoutBlockItemDataTestId.js.map +7 -0
  12. package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js +17 -2
  13. package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js.map +2 -2
  14. package/dist/esm/form-layout-block-item/propTypes.js +2 -0
  15. package/dist/esm/form-layout-block-item/propTypes.js.map +2 -2
  16. package/dist/esm/form-layout-block-item/styles.js +7 -1
  17. package/dist/esm/form-layout-block-item/styles.js.map +2 -2
  18. package/package.json +3 -3
package/dist/cjs/exported-related/DSFormLayoutBlockItemDataTestId.js ADDED
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ 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));
21
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
+ var DSFormLayoutBlockItemDataTestId_exports = {};
23
+ __export(DSFormLayoutBlockItemDataTestId_exports, {
24
+ DSFormLayoutBlockItemDataTestId: () => DSFormLayoutBlockItemDataTestId
25
+ });
26
+ module.exports = __toCommonJS(DSFormLayoutBlockItemDataTestId_exports);
27
+ var React = __toESM(require("react"));
28
+ const DSFormLayoutBlockItemDataTestId = {
29
+ CONTAINER: "ds-form-layout-block-container",
30
+ LABEL: "ds-form-layout-block-label",
31
+ COUNTER: "ds-form-layout-block-counter",
32
+ MESSAGE: "ds-form-layout-block-message",
33
+ ERROR_MESSAGE: "ds-form-layout-block-error-message"
34
+ };
35
+ //# sourceMappingURL=DSFormLayoutBlockItemDataTestId.js.map
package/dist/cjs/exported-related/DSFormLayoutBlockItemDataTestId.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/exported-related/DSFormLayoutBlockItemDataTestId.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["export const DSFormLayoutBlockItemDataTestId = {\n CONTAINER: 'ds-form-layout-block-container',\n LABEL: 'ds-form-layout-block-label',\n COUNTER: 'ds-form-layout-block-counter',\n MESSAGE: 'ds-form-layout-block-message',\n ERROR_MESSAGE: 'ds-form-layout-block-error-message',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,eAAe;AACjB;",
6
+ "names": []
7
+ }
package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js CHANGED
@@ -27,14 +27,18 @@ __export(DSFormLayoutBlockItem_exports, {
27
27
  module.exports = __toCommonJS(DSFormLayoutBlockItem_exports);
28
28
  var React = __toESM(require("react"));
29
29
  var import_react = __toESM(require("react"));
30
+ var import_ds_grid = require("@elliemae/ds-grid");
30
31
  var import_ds_utilities = require("@elliemae/ds-utilities");
31
32
  var import_uid = require("uid");
33
+ var import_DSFormLayoutBlockItemDataTestId = require("../exported-related/DSFormLayoutBlockItemDataTestId");
32
34
  var import_propTypes = require("./propTypes");
33
35
  var import_styles = require("./styles");
34
36
  const DSFormLayoutBlockItem = (props) => {
35
37
  const {
36
38
  label,
37
39
  feedbackMessage,
40
+ maxCharCounter,
41
+ currentChar,
38
42
  validationMessage,
39
43
  inputID,
40
44
  children,
@@ -48,7 +52,9 @@ const DSFormLayoutBlockItem = (props) => {
48
52
  isGroup = false
49
53
  } = props;
50
54
  const instanceUID = (0, import_react.useMemo)(() => (0, import_uid.uid)(6), []);
55
+ const cols = (0, import_react.useMemo)(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
51
56
  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
57
+ "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.CONTAINER,
52
58
  leftLabel,
53
59
  fitContent,
54
60
  hideLabel,
@@ -56,21 +62,30 @@ const DSFormLayoutBlockItem = (props) => {
56
62
  as: isGroup ? "fieldset" : "div",
57
63
  isGroup,
58
64
  "aria-describedby": !isGroup ? `${inputID || instanceUID}_feedback_message` : void 0
65
+ }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
66
+ cols,
67
+ gutter: "xxs"
59
68
  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
69
+ "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.LABEL,
60
70
  htmlFor: inputID,
61
71
  leftLabel,
62
72
  hideLabel,
63
73
  "aria-hidden": isGroup
64
74
  }, label, (required || optional) && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledMark, {
65
75
  required
66
- })), isGroup && /* @__PURE__ */ import_react.default.createElement(import_styles.ScreenReaderOnly, {
76
+ })), maxCharCounter !== void 0 && currentChar !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCharCount, {
77
+ "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.COUNTER,
78
+ hasError: currentChar > maxCharCounter
79
+ }, `${currentChar}/${maxCharCounter}`) : null), isGroup && /* @__PURE__ */ import_react.default.createElement(import_styles.ScreenReaderOnly, {
67
80
  as: "legend"
68
81
  }, `${label}. ${feedbackMessage || ""}`), children, feedbackMessage && !hasError && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledMessage, {
82
+ "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.MESSAGE,
69
83
  leftLabel,
70
84
  hideLabel,
71
85
  "aria-hidden": isGroup,
72
86
  id: `${inputID || instanceUID}_feedback_message`
73
87
  }, feedbackMessage), validationMessage && hasError && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledMessage, {
88
+ "data-testid": import_DSFormLayoutBlockItemDataTestId.DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE,
74
89
  hasError,
75
90
  leftLabel,
76
91
  hideLabel,
package/dist/cjs/form-layout-block-item/DSFormLayoutBlockItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSFormLayoutBlockItemPropsT as Props } from './index.d';\nimport { propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly } from './styles';\n\nconst DSFormLayoutBlockItem = (props: Props): JSX.Element => {\n const {\n label,\n feedbackMessage,\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 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 ? `${inputID || instanceUID}_feedback_message` : undefined}\n >\n <StyledLabel htmlFor={inputID} leftLabel={leftLabel} hideLabel={hideLabel} aria-hidden={isGroup}>\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\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={`${inputID || instanceUID}_feedback_message`}\n >\n {feedbackMessage}\n </StyledMessage>\n )}\n {validationMessage && hasError && (\n <StyledMessage hasError={hasError} leftLabel={leftLabel} hideLabel={hideLabel} role=\"alert\">\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+B;AAC/B,0BAAyB;AACzB,iBAAoB;AAEpB,uBAA0B;AAC1B,oBAA0F;AAE1F,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,UAAU;AAAA,MACR;AAEJ,QAAM,cAAc,0BAAQ,MAAM,oBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,UAAU,aAAa;AAAA,IAC3B;AAAA,IACA,oBAAkB,CAAC,UAAU,GAAG,WAAW,iCAAiC;AAAA,KAE5E,mDAAC;AAAA,IAAY,SAAS;AAAA,IAAS;AAAA,IAAsB;AAAA,IAAsB,eAAa;AAAA,KACrF,OACC,aAAY,aAAa,mDAAC;AAAA,IAAW;AAAA,GAAoB,CAC7D,GACC,WAAW,mDAAC;AAAA,IAAiB,IAAG;AAAA,KAAU,GAAG,UAAU,mBAAmB,IAAK,GAC/E,UACA,mBAAmB,CAAC,YACnB,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa;AAAA,IACb,IAAI,GAAG,WAAW;AAAA,KAEjB,eACH,GAED,qBAAqB,YACpB,mDAAC;AAAA,IAAc;AAAA,IAAoB;AAAA,IAAsB;AAAA,IAAsB,MAAK;AAAA,KACjF,iBACH,CAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,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,MACR;AAEJ,QAAM,cAAc,0BAAQ,MAAM,oBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,OAAO,0BAAQ,MAAO,mBAAmB,SAAY,CAAC,OAAO,MAAM,IAAI,CAAC,KAAK,GAAI,CAAC,cAAc,CAAC;AAEvG,SACE,mDAAC;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,KAE5E,mDAAC;AAAA,IAAK;AAAA,IAAY,QAAO;AAAA,KACvB,mDAAC;AAAA,IACC,eAAa,uEAAgC;AAAA,IAC7C,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,eAAa;AAAA,KAEZ,OACC,aAAY,aAAa,mDAAC;AAAA,IAAW;AAAA,GAAoB,CAC7D,GACC,mBAAmB,UAAa,gBAAgB,SAC/C,mDAAC;AAAA,IACC,eAAa,uEAAgC;AAAA,IAC7C,UAAU,cAAc;AAAA,KACxB,GAAG,eAAe,gBAAiB,IACnC,IACN,GACC,WAAW,mDAAC;AAAA,IAAiB,IAAG;AAAA,KAAU,GAAG,UAAU,mBAAmB,IAAK,GAC/E,UACA,mBAAmB,CAAC,YACnB,mDAAC;AAAA,IACC,eAAa,uEAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,eAAa;AAAA,IACb,IAAI,GAAG,WAAW;AAAA,KAEjB,eACH,GAED,qBAAqB,YACpB,mDAAC;AAAA,IACC,eAAa,uEAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAK;AAAA,KAEJ,iBACH,CAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/form-layout-block-item/index.d.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/form-layout-block-item/index.d.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export interface DSFormLayoutBlockItemPropsT {\n children: JSX.Element;\n label: string;\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", "import * as React from 'react';\nexport { React };\n"],
4
+ "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"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
6
6
  "names": []
7
7
  }
package/dist/cjs/form-layout-block-item/propTypes.js CHANGED
@@ -30,6 +30,8 @@ const propTypes = {
30
30
  children: import_ds_utilities.PropTypes.node.isRequired.description("Input component. "),
31
31
  label: import_ds_utilities.PropTypes.string.isRequired.description("Label property for the input component. This property is required for accesibility purposes."),
32
32
  inputID: import_ds_utilities.PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
33
+ maxCharCounter: import_ds_utilities.PropTypes.number.description("Max of characters allowed."),
34
+ currentChar: import_ds_utilities.PropTypes.number.description("Current counter of input text area"),
33
35
  feedbackMessage: import_ds_utilities.PropTypes.string.description("Feedback message to show below the input component."),
34
36
  validationMessage: import_ds_utilities.PropTypes.string.description("Validation message to show below the input component. It requires hasError property set to true to be visible."),
35
37
  hasError: import_ds_utilities.PropTypes.bool.description("Helper boolean property for the validation message."),
package/dist/cjs/form-layout-block-item/propTypes.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/form-layout-block-item/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 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"],
5
- "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,YACjC,8FACF;AAAA,EACA,SAAS,8BAAU,OAAO,WAAW,YACnC,oGACF;AAAA,EACA,iBAAiB,8BAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,8BAAU,OAAO,YAClC,gHACF;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,YACxB,gGACF;AAAA,EACA,eAAe,8BAAU,KAAK,YAC5B,sGACF;AAAA,EACA,SAAS,8BAAU,KAAK,YACtB,gHACF;AACF;",
4
+ "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"],
5
+ "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,YACjC,8FACF;AAAA,EACA,SAAS,8BAAU,OAAO,WAAW,YACnC,oGACF;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,YAClC,gHACF;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,YACxB,gGACF;AAAA,EACA,eAAe,8BAAU,KAAK,YAC5B,sGACF;AAAA,EACA,SAAS,8BAAU,KAAK,YACtB,gHACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/form-layout-block-item/styles.js CHANGED
@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
22
22
  var styles_exports = {};
23
23
  __export(styles_exports, {
24
24
  ScreenReaderOnly: () => ScreenReaderOnly,
25
+ StyledCharCount: () => StyledCharCount,
25
26
  StyledContainer: () => StyledContainer,
26
27
  StyledLabel: () => StyledLabel,
27
28
  StyledMark: () => StyledMark,
@@ -87,7 +88,6 @@ const StyledLabel = import_ds_system.styled.label`
87
88
  `;
88
89
  const StyledMessage = import_ds_system.styled.div`
89
90
  font-size: ${({ theme }) => theme.fontSizes.microText[200]};
90
- font-style: italic;
91
91
  text-align: right;
92
92
  line-height: 15px;
93
93
  height: 15px;
@@ -116,4 +116,10 @@ const ScreenReaderOnly = import_ds_system.styled.div`
116
116
  white-space: nowrap;
117
117
  width: 1px;
118
118
  `;
119
+ const StyledCharCount = import_ds_system.styled.span`
120
+ justify-self: flex-end;
121
+ font-size: ${({ theme }) => theme.fontSizes.microText[300]}
122
+ margin-left: 16px;
123
+ color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};
124
+ `;
119
125
  //# sourceMappingURL=styles.js.map
package/dist/cjs/form-layout-block-item/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/form-layout-block-item/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 font-style: italic;\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`;\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;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,iBAAkB,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,cAAe,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,oBACV,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,gBAAiB,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,gBACH,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAGD,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAO7C,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAG5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,eACV,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;",
4
+ "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`;\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`;", "import * as React from 'react';\nexport { React };\n"],
5
+ "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,iBAAkB,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,cAAe,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,oBACV,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,gBAAiB,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,gBACH,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAGD,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAG5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,eACV,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,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAC,OAAO,eAAc,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/exported-related/DSFormLayoutBlockItemDataTestId.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ import * as React from "react";
3
+ const DSFormLayoutBlockItemDataTestId = {
4
+ CONTAINER: "ds-form-layout-block-container",
5
+ LABEL: "ds-form-layout-block-label",
6
+ COUNTER: "ds-form-layout-block-counter",
7
+ MESSAGE: "ds-form-layout-block-message",
8
+ ERROR_MESSAGE: "ds-form-layout-block-error-message"
9
+ };
10
+ export {
11
+ DSFormLayoutBlockItemDataTestId
12
+ };
13
+ //# sourceMappingURL=DSFormLayoutBlockItemDataTestId.js.map
package/dist/esm/exported-related/DSFormLayoutBlockItemDataTestId.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSFormLayoutBlockItemDataTestId.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSFormLayoutBlockItemDataTestId = {\n CONTAINER: 'ds-form-layout-block-container',\n LABEL: 'ds-form-layout-block-label',\n COUNTER: 'ds-form-layout-block-counter',\n MESSAGE: 'ds-form-layout-block-message',\n ERROR_MESSAGE: 'ds-form-layout-block-error-message',\n};\n"],
5
+ "mappings": ";AAAA;ACAO,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,eAAe;AACjB;",
6
+ "names": []
7
+ }
package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js CHANGED
@@ -1,14 +1,18 @@
1
1
  "use strict";
2
2
  import * as React from "react";
3
3
  import React2, { useMemo } from "react";
4
+ import { Grid } from "@elliemae/ds-grid";
4
5
  import { describe } from "@elliemae/ds-utilities";
5
6
  import { uid } from "uid";
7
+ import { DSFormLayoutBlockItemDataTestId } from "../exported-related/DSFormLayoutBlockItemDataTestId";
6
8
  import { propTypes } from "./propTypes";
7
- import { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly } from "./styles";
9
+ import { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly, StyledCharCount } from "./styles";
8
10
  const DSFormLayoutBlockItem = (props) => {
9
11
  const {
10
12
  label,
11
13
  feedbackMessage,
14
+ maxCharCounter,
15
+ currentChar,
12
16
  validationMessage,
13
17
  inputID,
14
18
  children,
@@ -22,7 +26,9 @@ const DSFormLayoutBlockItem = (props) => {
22
26
  isGroup = false
23
27
  } = props;
24
28
  const instanceUID = useMemo(() => uid(6), []);
29
+ const cols = useMemo(() => maxCharCounter !== void 0 ? ["1fr", "auto"] : ["1fr"], [maxCharCounter]);
25
30
  return /* @__PURE__ */ React2.createElement(StyledContainer, {
31
+ "data-testid": DSFormLayoutBlockItemDataTestId.CONTAINER,
26
32
  leftLabel,
27
33
  fitContent,
28
34
  hideLabel,
@@ -30,21 +36,30 @@ const DSFormLayoutBlockItem = (props) => {
30
36
  as: isGroup ? "fieldset" : "div",
31
37
  isGroup,
32
38
  "aria-describedby": !isGroup ? `${inputID || instanceUID}_feedback_message` : void 0
39
+ }, /* @__PURE__ */ React2.createElement(Grid, {
40
+ cols,
41
+ gutter: "xxs"
33
42
  }, /* @__PURE__ */ React2.createElement(StyledLabel, {
43
+ "data-testid": DSFormLayoutBlockItemDataTestId.LABEL,
34
44
  htmlFor: inputID,
35
45
  leftLabel,
36
46
  hideLabel,
37
47
  "aria-hidden": isGroup
38
48
  }, label, (required || optional) && /* @__PURE__ */ React2.createElement(StyledMark, {
39
49
  required
40
- })), isGroup && /* @__PURE__ */ React2.createElement(ScreenReaderOnly, {
50
+ })), maxCharCounter !== void 0 && currentChar !== void 0 ? /* @__PURE__ */ React2.createElement(StyledCharCount, {
51
+ "data-testid": DSFormLayoutBlockItemDataTestId.COUNTER,
52
+ hasError: currentChar > maxCharCounter
53
+ }, `${currentChar}/${maxCharCounter}`) : null), isGroup && /* @__PURE__ */ React2.createElement(ScreenReaderOnly, {
41
54
  as: "legend"
42
55
  }, `${label}. ${feedbackMessage || ""}`), children, feedbackMessage && !hasError && /* @__PURE__ */ React2.createElement(StyledMessage, {
56
+ "data-testid": DSFormLayoutBlockItemDataTestId.MESSAGE,
43
57
  leftLabel,
44
58
  hideLabel,
45
59
  "aria-hidden": isGroup,
46
60
  id: `${inputID || instanceUID}_feedback_message`
47
61
  }, feedbackMessage), validationMessage && hasError && /* @__PURE__ */ React2.createElement(StyledMessage, {
62
+ "data-testid": DSFormLayoutBlockItemDataTestId.ERROR_MESSAGE,
48
63
  hasError,
49
64
  leftLabel,
50
65
  hideLabel,
package/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSFormLayoutBlockItemPropsT as Props } from './index.d';\nimport { propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly } from './styles';\n\nconst DSFormLayoutBlockItem = (props: Props): JSX.Element => {\n const {\n label,\n feedbackMessage,\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 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 ? `${inputID || instanceUID}_feedback_message` : undefined}\n >\n <StyledLabel htmlFor={inputID} leftLabel={leftLabel} hideLabel={hideLabel} aria-hidden={isGroup}>\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\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={`${inputID || instanceUID}_feedback_message`}\n >\n {feedbackMessage}\n </StyledMessage>\n )}\n {validationMessage && hasError && (\n <StyledMessage hasError={hasError} leftLabel={leftLabel} hideLabel={hideLabel} role=\"alert\">\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"],
5
- "mappings": ";AAAA;ACCA;AACA;AACA;AAEA;AACA;AAEA,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,UAAU;AAAA,MACR;AAEJ,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,UAAU,aAAa;AAAA,IAC3B;AAAA,IACA,oBAAkB,CAAC,UAAU,GAAG,WAAW,iCAAiC;AAAA,KAE5E,qCAAC;AAAA,IAAY,SAAS;AAAA,IAAS;AAAA,IAAsB;AAAA,IAAsB,eAAa;AAAA,KACrF,OACC,aAAY,aAAa,qCAAC;AAAA,IAAW;AAAA,GAAoB,CAC7D,GACC,WAAW,qCAAC;AAAA,IAAiB,IAAG;AAAA,KAAU,GAAG,UAAU,mBAAmB,IAAK,GAC/E,UACA,mBAAmB,CAAC,YACnB,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa;AAAA,IACb,IAAI,GAAG,WAAW;AAAA,KAEjB,eACH,GAED,qBAAqB,YACpB,qCAAC;AAAA,IAAc;AAAA,IAAoB;AAAA,IAAsB;AAAA,IAAsB,MAAK;AAAA,KACjF,iBACH,CAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
4
+ "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"],
5
+ "mappings": ";AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,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,MACR;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,qCAAC;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,KAE5E,qCAAC;AAAA,IAAK;AAAA,IAAY,QAAO;AAAA,KACvB,qCAAC;AAAA,IACC,eAAa,gCAAgC;AAAA,IAC7C,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,eAAa;AAAA,KAEZ,OACC,aAAY,aAAa,qCAAC;AAAA,IAAW;AAAA,GAAoB,CAC7D,GACC,mBAAmB,UAAa,gBAAgB,SAC/C,qCAAC;AAAA,IACC,eAAa,gCAAgC;AAAA,IAC7C,UAAU,cAAc;AAAA,KACxB,GAAG,eAAe,gBAAiB,IACnC,IACN,GACC,WAAW,qCAAC;AAAA,IAAiB,IAAG;AAAA,KAAU,GAAG,UAAU,mBAAmB,IAAK,GAC/E,UACA,mBAAmB,CAAC,YACnB,qCAAC;AAAA,IACC,eAAa,gCAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,eAAa;AAAA,IACb,IAAI,GAAG,WAAW;AAAA,KAEjB,eACH,GAED,qBAAqB,YACpB,qCAAC;AAAA,IACC,eAAa,gCAAgC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAK;AAAA,KAEJ,iBACH,CAEJ;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/form-layout-block-item/propTypes.js CHANGED
@@ -5,6 +5,8 @@ const propTypes = {
5
5
  children: PropTypes.node.isRequired.description("Input component. "),
6
6
  label: PropTypes.string.isRequired.description("Label property for the input component. This property is required for accesibility purposes."),
7
7
  inputID: PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
8
+ maxCharCounter: PropTypes.number.description("Max of characters allowed."),
9
+ currentChar: PropTypes.number.description("Current counter of input text area"),
8
10
  feedbackMessage: PropTypes.string.description("Feedback message to show below the input component."),
9
11
  validationMessage: PropTypes.string.description("Validation message to show below the input component. It requires hasError property set to true to be visible."),
10
12
  hasError: PropTypes.bool.description("Helper boolean property for the validation message."),
package/dist/esm/form-layout-block-item/propTypes.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/propTypes.tsx"],
4
- "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 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"],
5
- "mappings": ";AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,UAAU,UAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,UAAU,OAAO,WAAW,YACjC,8FACF;AAAA,EACA,SAAS,UAAU,OAAO,WAAW,YACnC,oGACF;AAAA,EACA,iBAAiB,UAAU,OAAO,YAAY,qDAAqD;AAAA,EACnG,mBAAmB,UAAU,OAAO,YAClC,gHACF;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,YACxB,gGACF;AAAA,EACA,eAAe,UAAU,KAAK,YAC5B,sGACF;AAAA,EACA,SAAS,UAAU,KAAK,YACtB,gHACF;AACF;",
4
+ "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"],
5
+ "mappings": ";AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,UAAU,UAAU,KAAK,WAAW,YAAY,mBAAmB;AAAA,EACnE,OAAO,UAAU,OAAO,WAAW,YACjC,8FACF;AAAA,EACA,SAAS,UAAU,OAAO,WAAW,YACnC,oGACF;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,YAClC,gHACF;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,YACxB,gGACF;AAAA,EACA,eAAe,UAAU,KAAK,YAC5B,sGACF;AAAA,EACA,SAAS,UAAU,KAAK,YACtB,gHACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/form-layout-block-item/styles.js CHANGED
@@ -58,7 +58,6 @@ const StyledLabel = styled.label`
58
58
  `;
59
59
  const StyledMessage = styled.div`
60
60
  font-size: ${({ theme }) => theme.fontSizes.microText[200]};
61
- font-style: italic;
62
61
  text-align: right;
63
62
  line-height: 15px;
64
63
  height: 15px;
@@ -87,8 +86,15 @@ const ScreenReaderOnly = styled.div`
87
86
  white-space: nowrap;
88
87
  width: 1px;
89
88
  `;
89
+ const StyledCharCount = styled.span`
90
+ justify-self: flex-end;
91
+ font-size: ${({ theme }) => theme.fontSizes.microText[300]}
92
+ margin-left: 16px;
93
+ color: ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500]};
94
+ `;
90
95
  export {
91
96
  ScreenReaderOnly,
97
+ StyledCharCount,
92
98
  StyledContainer,
93
99
  StyledLabel,
94
100
  StyledMark,
package/dist/esm/form-layout-block-item/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-block-item/styles.tsx"],
4
- "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 font-style: italic;\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`;\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"],
5
- "mappings": ";AAAA;ACAA;AAQO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,cAAe,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,oBACV,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,gBAAiB,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,gBACH,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAGD,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAO7C,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAG5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,eACV,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;",
4
+ "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`;\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`;"],
5
+ "mappings": ";AAAA;ACAA;AAQO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,cAAe,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,oBACV,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,gBAAiB,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,gBACH,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAGD,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,gBAAiB,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAG5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,eACV,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,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAC,OAAO,eAAc,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-layout-blocks",
3
- "version": "3.3.0-next.5",
3
+ "version": "3.3.0-next.8",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Form Layout",
6
6
  "files": [
@@ -75,8 +75,8 @@
75
75
  "indent": 4
76
76
  },
77
77
  "dependencies": {
78
- "@elliemae/ds-system": "3.3.0-next.5",
79
- "@elliemae/ds-utilities": "3.3.0-next.5",
78
+ "@elliemae/ds-system": "3.3.0-next.8",
79
+ "@elliemae/ds-utilities": "3.3.0-next.8",
80
80
  "uid": "~2.0.0"
81
81
  },
82
82
  "devDependencies": {