@elliemae/ds-form-layout-blocks 2.0.0-alpha.10 → 2.0.0-alpha.14

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 (17) hide show
  1. package/cjs/form-layout-block-item/DSFormLayoutBlockItem.js +2 -2
  2. package/cjs/form-layout-block-item/styles.js +65 -75
  3. package/cjs/form-layout-checkbox-group/config/useValidateProps.js +2 -10
  4. package/cjs/form-layout-checkbox-group/styles.js +32 -14
  5. package/esm/form-layout-block-item/DSFormLayoutBlockItem.js +2 -2
  6. package/esm/form-layout-block-item/styles.js +65 -75
  7. package/esm/form-layout-checkbox-group/config/useValidateProps.js +2 -10
  8. package/esm/form-layout-checkbox-group/styles.js +32 -14
  9. package/package.json +6 -5
  10. package/types/form-layout-block-item/DSFormLayoutBlockItem.d.ts +66 -11
  11. package/types/form-layout-block-item/propTypes.d.ts +61 -10
  12. package/types/form-layout-block-item/styles.d.ts +5 -5
  13. package/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.d.ts +12 -2
  14. package/types/form-layout-checkbox-group/propTypes.d.ts +7 -1
  15. package/types/form-layout-checkbox-group/styles.d.ts +1 -1
  16. package/cjs/package.json +0 -7
  17. package/esm/package.json +0 -7
package/cjs/form-layout-block-item/DSFormLayoutBlockItem.js CHANGED
@@ -37,7 +37,7 @@ const DSFormLayoutBlockItem = props => {
37
37
  withHighlight: withHighlight,
38
38
  as: isGroup ? 'fieldset' : 'div',
39
39
  isGroup: isGroup,
40
- "aria-describedby": `${inputID || instanceUID}_feedback_message`
40
+ "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
41
41
  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
42
42
  htmlFor: inputID,
43
43
  leftLabel: leftLabel,
@@ -51,7 +51,7 @@ const DSFormLayoutBlockItem = props => {
51
51
  leftLabel: leftLabel,
52
52
  hideLabel: hideLabel,
53
53
  "aria-hidden": isGroup,
54
- id: `${inputID || instanceUID}_feedback_message`
54
+ id: "".concat(inputID || instanceUID, "_feedback_message")
55
55
  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
56
56
  hasError: hasError,
57
57
  leftLabel: leftLabel,
package/cjs/form-layout-block-item/styles.js CHANGED
@@ -10,87 +10,77 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
10
 
11
11
  const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
12
12
  componentId: "sc-196zgtg-0"
13
- })(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], ({
14
- fitContent
15
- }) => fitContent ? 'width: fit-content;' : undefined, ({
16
- isGroup
17
- }) => isGroup ? 'border: none' : '', ({
18
- leftLabel,
19
- hideLabel
20
- }) => leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined, ({
21
- theme,
22
- withHighlight
23
- }) => withHighlight ? `
24
- &::after {
25
- position: absolute;
26
- content: '';
27
- left: -${theme.space.xxs};
28
- top: -${theme.space.xxxs};
29
- z-index: -1;
30
- width: calc(100% + ${theme.space.xs});
31
- height: calc(100% + ${theme.space.xxs});
32
- background-color: #FEFBEE;
33
- border : 1px solid #8F6326;
34
- border-radius : 4px;
35
- box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);
36
- }
37
- &:hover,
38
- &:focus-within {
39
- &::after {
40
- position: absolute;
41
- content: '';
42
- left: -${theme.space.xxs};
43
- top: -${theme.space.xxxs};
44
- z-index: -1;
45
- width: calc(100% + ${theme.space.xs});
46
- height: calc(100% + ${theme.space.xxs});
47
- background-color: #FFF9D3;
48
- border : 1px solid #8F6326;
49
- border-radius : 4px;
50
- box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);
51
- }
52
- }
53
- ` : undefined);
13
+ })(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], _ref => {
14
+ let {
15
+ fitContent
16
+ } = _ref;
17
+ return fitContent ? 'width: fit-content;' : undefined;
18
+ }, _ref2 => {
19
+ let {
20
+ isGroup
21
+ } = _ref2;
22
+ return isGroup ? 'border: none' : '';
23
+ }, _ref3 => {
24
+ let {
25
+ leftLabel,
26
+ hideLabel
27
+ } = _ref3;
28
+ return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
29
+ }, _ref4 => {
30
+ let {
31
+ theme,
32
+ withHighlight
33
+ } = _ref4;
34
+ return withHighlight ? "\n &::after {\n position: absolute;\n content: '';\n left: -".concat(theme.space.xxs, ";\n top: -").concat(theme.space.xxxs, ";\n z-index: -1;\n width: calc(100% + ").concat(theme.space.xs, ");\n height: calc(100% + ").concat(theme.space.xxs, ");\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -").concat(theme.space.xxs, ";\n top: -").concat(theme.space.xxxs, ";\n z-index: -1;\n width: calc(100% + ").concat(theme.space.xs, ");\n height: calc(100% + ").concat(theme.space.xxs, ");\n background-color: #FFF9D3;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n ") : undefined;
35
+ });
54
36
  const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
55
37
  componentId: "sc-196zgtg-1"
56
- })(["display:flex;", " ", ""], ({
57
- theme,
58
- leftLabel
59
- }) => leftLabel ? `padding-right: ${theme.space.xxs};` : undefined, ({
60
- hideLabel
61
- }) => hideLabel ? `position: absolute;
62
- width: 1px;
63
- height: 1px;
64
- padding: 0;
65
- margin: -1px;
66
- overflow: hidden;
67
- clip: rect(0, 0, 0, 0);
68
- white-space: nowrap;
69
- border: 0;
70
- ` : undefined);
38
+ })(["display:flex;", " ", ""], _ref5 => {
39
+ let {
40
+ theme,
41
+ leftLabel
42
+ } = _ref5;
43
+ return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
44
+ }, _ref6 => {
45
+ let {
46
+ hideLabel
47
+ } = _ref6;
48
+ return hideLabel ? "position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n " : undefined;
49
+ });
71
50
  const StyledMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
72
51
  componentId: "sc-196zgtg-2"
73
- })(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
74
- theme
75
- }) => theme.fontSizes.microText[200], ({
76
- theme,
77
- hasError
78
- }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500], ({
79
- leftLabel,
80
- hideLabel
81
- }) => leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined);
52
+ })(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], _ref7 => {
53
+ let {
54
+ theme
55
+ } = _ref7;
56
+ return theme.fontSizes.microText[200];
57
+ }, _ref8 => {
58
+ let {
59
+ theme,
60
+ hasError
61
+ } = _ref8;
62
+ return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
63
+ }, _ref9 => {
64
+ let {
65
+ leftLabel,
66
+ hideLabel
67
+ } = _ref9;
68
+ return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
69
+ });
82
70
  const StyledMark = /*#__PURE__*/styled__default["default"].span.withConfig({
83
71
  componentId: "sc-196zgtg-3"
84
- })(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], ({
85
- theme
86
- }) => theme.space.xxxs, ({
87
- theme,
88
- required
89
- }) => required ? `
90
- background-color: ${theme.colors.danger[900]};
91
- ` : `
92
- border: 1px solid ${theme.colors.brand[600]};
93
- `);
72
+ })(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], _ref10 => {
73
+ let {
74
+ theme
75
+ } = _ref10;
76
+ return theme.space.xxxs;
77
+ }, _ref11 => {
78
+ let {
79
+ theme,
80
+ required
81
+ } = _ref11;
82
+ return required ? "\n background-color: ".concat(theme.colors.danger[900], ";\n ") : "\n border: 1px solid ".concat(theme.colors.brand[600], ";\n ");
83
+ });
94
84
  const ScreenReaderOnly = /*#__PURE__*/styled__default["default"].div.withConfig({
95
85
  componentId: "sc-196zgtg-4"
96
86
  })(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
package/cjs/form-layout-checkbox-group/config/useValidateProps.js CHANGED
@@ -16,19 +16,11 @@ const getVariableType = arg => {
16
16
  };
17
17
 
18
18
  const throwCheckboxGroupDirectionError = invalidProp => {
19
- throw new Error(`You are trying to pass a not valid "direction" property value for a checkbox group, please provide a valid type.
20
-
21
- Received: ${invalidProp} (${getVariableType(invalidProp)})
22
- Expected: "horizontal" or "vertical" (string)
23
- `);
19
+ throw new Error("You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n Received: ".concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n Expected: \"horizontal\" or \"vertical\" (string)\n "));
24
20
  };
25
21
 
26
22
  const throwCheckboxGroupChildrenError = () => {
27
- throw new Error(`You are trying to use a checkbox group without any React children, please provide at least one children to use.
28
-
29
- Received: (null)
30
- Expected: React children
31
- `);
23
+ throw new Error("You are trying to use a checkbox group without any React children, please provide at least one children to use.\n \n Received: (null)\n Expected: React children\n ");
32
24
  };
33
25
 
34
26
  const useValidateProps = props => {
package/cjs/form-layout-checkbox-group/styles.js CHANGED
@@ -10,19 +10,37 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
10
 
11
11
  const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
12
12
  componentId: "sc-1wopk9q-0"
13
- })(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], ({
14
- direction
15
- }) => direction === 'horizontal' ? 'row' : 'column', ({
16
- theme
17
- }) => theme.space.xs, ({
18
- theme
19
- }) => theme.space.xs, ({
20
- theme
21
- }) => theme.space.xxs, ({
22
- theme
23
- }) => theme.space.xxs, ({
24
- theme,
25
- direction
26
- }) => direction === 'horizontal' ? theme.space.s : '0');
13
+ })(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], _ref => {
14
+ let {
15
+ direction
16
+ } = _ref;
17
+ return direction === 'horizontal' ? 'row' : 'column';
18
+ }, _ref2 => {
19
+ let {
20
+ theme
21
+ } = _ref2;
22
+ return theme.space.xs;
23
+ }, _ref3 => {
24
+ let {
25
+ theme
26
+ } = _ref3;
27
+ return theme.space.xs;
28
+ }, _ref4 => {
29
+ let {
30
+ theme
31
+ } = _ref4;
32
+ return theme.space.xxs;
33
+ }, _ref5 => {
34
+ let {
35
+ theme
36
+ } = _ref5;
37
+ return theme.space.xxs;
38
+ }, _ref6 => {
39
+ let {
40
+ theme,
41
+ direction
42
+ } = _ref6;
43
+ return direction === 'horizontal' ? theme.space.s : '0';
44
+ });
27
45
 
28
46
  exports.StyledContainer = StyledContainer;
package/esm/form-layout-block-item/DSFormLayoutBlockItem.js CHANGED
@@ -29,7 +29,7 @@ const DSFormLayoutBlockItem = props => {
29
29
  withHighlight: withHighlight,
30
30
  as: isGroup ? 'fieldset' : 'div',
31
31
  isGroup: isGroup,
32
- "aria-describedby": `${inputID || instanceUID}_feedback_message`
32
+ "aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
33
33
  }, void 0, /*#__PURE__*/_jsx(StyledLabel, {
34
34
  htmlFor: inputID,
35
35
  leftLabel: leftLabel,
@@ -43,7 +43,7 @@ const DSFormLayoutBlockItem = props => {
43
43
  leftLabel: leftLabel,
44
44
  hideLabel: hideLabel,
45
45
  "aria-hidden": isGroup,
46
- id: `${inputID || instanceUID}_feedback_message`
46
+ id: "".concat(inputID || instanceUID, "_feedback_message")
47
47
  }, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx(StyledMessage, {
48
48
  hasError: hasError,
49
49
  leftLabel: leftLabel,
package/esm/form-layout-block-item/styles.js CHANGED
@@ -2,87 +2,77 @@ import styled from 'styled-components';
2
2
 
3
3
  const StyledContainer = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "sc-196zgtg-0"
5
- })(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], ({
6
- fitContent
7
- }) => fitContent ? 'width: fit-content;' : undefined, ({
8
- isGroup
9
- }) => isGroup ? 'border: none' : '', ({
10
- leftLabel,
11
- hideLabel
12
- }) => leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined, ({
13
- theme,
14
- withHighlight
15
- }) => withHighlight ? `
16
- &::after {
17
- position: absolute;
18
- content: '';
19
- left: -${theme.space.xxs};
20
- top: -${theme.space.xxxs};
21
- z-index: -1;
22
- width: calc(100% + ${theme.space.xs});
23
- height: calc(100% + ${theme.space.xxs});
24
- background-color: #FEFBEE;
25
- border : 1px solid #8F6326;
26
- border-radius : 4px;
27
- box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);
28
- }
29
- &:hover,
30
- &:focus-within {
31
- &::after {
32
- position: absolute;
33
- content: '';
34
- left: -${theme.space.xxs};
35
- top: -${theme.space.xxxs};
36
- z-index: -1;
37
- width: calc(100% + ${theme.space.xs});
38
- height: calc(100% + ${theme.space.xxs});
39
- background-color: #FFF9D3;
40
- border : 1px solid #8F6326;
41
- border-radius : 4px;
42
- box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);
43
- }
44
- }
45
- ` : undefined);
5
+ })(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], _ref => {
6
+ let {
7
+ fitContent
8
+ } = _ref;
9
+ return fitContent ? 'width: fit-content;' : undefined;
10
+ }, _ref2 => {
11
+ let {
12
+ isGroup
13
+ } = _ref2;
14
+ return isGroup ? 'border: none' : '';
15
+ }, _ref3 => {
16
+ let {
17
+ leftLabel,
18
+ hideLabel
19
+ } = _ref3;
20
+ return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
21
+ }, _ref4 => {
22
+ let {
23
+ theme,
24
+ withHighlight
25
+ } = _ref4;
26
+ return withHighlight ? "\n &::after {\n position: absolute;\n content: '';\n left: -".concat(theme.space.xxs, ";\n top: -").concat(theme.space.xxxs, ";\n z-index: -1;\n width: calc(100% + ").concat(theme.space.xs, ");\n height: calc(100% + ").concat(theme.space.xxs, ");\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -").concat(theme.space.xxs, ";\n top: -").concat(theme.space.xxxs, ";\n z-index: -1;\n width: calc(100% + ").concat(theme.space.xs, ");\n height: calc(100% + ").concat(theme.space.xxs, ");\n background-color: #FFF9D3;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n ") : undefined;
27
+ });
46
28
  const StyledLabel = /*#__PURE__*/styled.label.withConfig({
47
29
  componentId: "sc-196zgtg-1"
48
- })(["display:flex;", " ", ""], ({
49
- theme,
50
- leftLabel
51
- }) => leftLabel ? `padding-right: ${theme.space.xxs};` : undefined, ({
52
- hideLabel
53
- }) => hideLabel ? `position: absolute;
54
- width: 1px;
55
- height: 1px;
56
- padding: 0;
57
- margin: -1px;
58
- overflow: hidden;
59
- clip: rect(0, 0, 0, 0);
60
- white-space: nowrap;
61
- border: 0;
62
- ` : undefined);
30
+ })(["display:flex;", " ", ""], _ref5 => {
31
+ let {
32
+ theme,
33
+ leftLabel
34
+ } = _ref5;
35
+ return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
36
+ }, _ref6 => {
37
+ let {
38
+ hideLabel
39
+ } = _ref6;
40
+ return hideLabel ? "position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n " : undefined;
41
+ });
63
42
  const StyledMessage = /*#__PURE__*/styled.div.withConfig({
64
43
  componentId: "sc-196zgtg-2"
65
- })(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], ({
66
- theme
67
- }) => theme.fontSizes.microText[200], ({
68
- theme,
69
- hasError
70
- }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[500], ({
71
- leftLabel,
72
- hideLabel
73
- }) => leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined);
44
+ })(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], _ref7 => {
45
+ let {
46
+ theme
47
+ } = _ref7;
48
+ return theme.fontSizes.microText[200];
49
+ }, _ref8 => {
50
+ let {
51
+ theme,
52
+ hasError
53
+ } = _ref8;
54
+ return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
55
+ }, _ref9 => {
56
+ let {
57
+ leftLabel,
58
+ hideLabel
59
+ } = _ref9;
60
+ return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
61
+ });
74
62
  const StyledMark = /*#__PURE__*/styled.span.withConfig({
75
63
  componentId: "sc-196zgtg-3"
76
- })(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], ({
77
- theme
78
- }) => theme.space.xxxs, ({
79
- theme,
80
- required
81
- }) => required ? `
82
- background-color: ${theme.colors.danger[900]};
83
- ` : `
84
- border: 1px solid ${theme.colors.brand[600]};
85
- `);
64
+ })(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], _ref10 => {
65
+ let {
66
+ theme
67
+ } = _ref10;
68
+ return theme.space.xxxs;
69
+ }, _ref11 => {
70
+ let {
71
+ theme,
72
+ required
73
+ } = _ref11;
74
+ return required ? "\n background-color: ".concat(theme.colors.danger[900], ";\n ") : "\n border: 1px solid ".concat(theme.colors.brand[600], ";\n ");
75
+ });
86
76
  const ScreenReaderOnly = /*#__PURE__*/styled.div.withConfig({
87
77
  componentId: "sc-196zgtg-4"
88
78
  })(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
package/esm/form-layout-checkbox-group/config/useValidateProps.js CHANGED
@@ -8,19 +8,11 @@ const getVariableType = arg => {
8
8
  };
9
9
 
10
10
  const throwCheckboxGroupDirectionError = invalidProp => {
11
- throw new Error(`You are trying to pass a not valid "direction" property value for a checkbox group, please provide a valid type.
12
-
13
- Received: ${invalidProp} (${getVariableType(invalidProp)})
14
- Expected: "horizontal" or "vertical" (string)
15
- `);
11
+ throw new Error("You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n Received: ".concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n Expected: \"horizontal\" or \"vertical\" (string)\n "));
16
12
  };
17
13
 
18
14
  const throwCheckboxGroupChildrenError = () => {
19
- throw new Error(`You are trying to use a checkbox group without any React children, please provide at least one children to use.
20
-
21
- Received: (null)
22
- Expected: React children
23
- `);
15
+ throw new Error("You are trying to use a checkbox group without any React children, please provide at least one children to use.\n \n Received: (null)\n Expected: React children\n ");
24
16
  };
25
17
 
26
18
  const useValidateProps = props => {
package/esm/form-layout-checkbox-group/styles.js CHANGED
@@ -2,19 +2,37 @@ import styled from 'styled-components';
2
2
 
3
3
  const StyledContainer = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "sc-1wopk9q-0"
5
- })(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], ({
6
- direction
7
- }) => direction === 'horizontal' ? 'row' : 'column', ({
8
- theme
9
- }) => theme.space.xs, ({
10
- theme
11
- }) => theme.space.xs, ({
12
- theme
13
- }) => theme.space.xxs, ({
14
- theme
15
- }) => theme.space.xxs, ({
16
- theme,
17
- direction
18
- }) => direction === 'horizontal' ? theme.space.s : '0');
5
+ })(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], _ref => {
6
+ let {
7
+ direction
8
+ } = _ref;
9
+ return direction === 'horizontal' ? 'row' : 'column';
10
+ }, _ref2 => {
11
+ let {
12
+ theme
13
+ } = _ref2;
14
+ return theme.space.xs;
15
+ }, _ref3 => {
16
+ let {
17
+ theme
18
+ } = _ref3;
19
+ return theme.space.xs;
20
+ }, _ref4 => {
21
+ let {
22
+ theme
23
+ } = _ref4;
24
+ return theme.space.xxs;
25
+ }, _ref5 => {
26
+ let {
27
+ theme
28
+ } = _ref5;
29
+ return theme.space.xxs;
30
+ }, _ref6 => {
31
+ let {
32
+ theme,
33
+ direction
34
+ } = _ref6;
35
+ return direction === 'horizontal' ? theme.space.s : '0';
36
+ });
19
37
 
20
38
  export { StyledContainer };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-layout-blocks",
3
- "version": "2.0.0-alpha.10",
3
+ "version": "2.0.0-alpha.14",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Form Layout",
6
6
  "module": "./esm/index.js",
@@ -72,16 +72,17 @@
72
72
  "build": "node ../../scripts/build/build.js"
73
73
  },
74
74
  "dependencies": {
75
- "@elliemae/ds-props-helpers": "2.0.0-alpha.10",
76
- "react-desc": "~4.1.3"
75
+ "@elliemae/ds-props-helpers": "2.0.0-alpha.14",
76
+ "react-desc": "~4.1.3",
77
+ "uid": "~2.0.0"
77
78
  },
78
79
  "devDependencies": {
79
- "styled-components": "~5.3.1"
80
+ "styled-components": "~5.3.3"
80
81
  },
81
82
  "peerDependencies": {
82
83
  "react": "~17.0.2",
83
84
  "react-dom": "^17.0.2",
84
- "styled-components": "^5.3.1"
85
+ "styled-components": "^5.3.3"
85
86
  },
86
87
  "publishConfig": {
87
88
  "access": "public",
package/types/form-layout-block-item/DSFormLayoutBlockItem.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  import type { DSFormLayoutBlockItemPropsT as Props } from './index.d';
3
4
  declare const DSFormLayoutBlockItem: {
@@ -6,17 +7,71 @@ declare const DSFormLayoutBlockItem: {
6
7
  children: any;
7
8
  label: any;
8
9
  inputID: any;
9
- feedbackMessage: any;
10
- validationMessage: any;
11
- hasError: any;
12
- required: any;
13
- optional: any;
14
- fitContent: any;
15
- leftLabel: any;
16
- hideLabel: any;
17
- withHighlight: any;
18
- isGroup: any;
10
+ feedbackMessage: {
11
+ defaultValue<T = unknown>(arg: T): {
12
+ deprecated: import("react-desc").PropTypesDescValidator;
13
+ };
14
+ isRequired: import("react-desc").PropTypesDescValidator;
15
+ };
16
+ validationMessage: {
17
+ defaultValue<T = unknown>(arg: T): {
18
+ deprecated: import("react-desc").PropTypesDescValidator;
19
+ };
20
+ isRequired: import("react-desc").PropTypesDescValidator;
21
+ };
22
+ hasError: {
23
+ defaultValue<T = unknown>(arg: T): {
24
+ deprecated: import("react-desc").PropTypesDescValidator;
25
+ };
26
+ isRequired: import("react-desc").PropTypesDescValidator;
27
+ };
28
+ required: {
29
+ defaultValue<T = unknown>(arg: T): {
30
+ deprecated: import("react-desc").PropTypesDescValidator;
31
+ };
32
+ isRequired: import("react-desc").PropTypesDescValidator;
33
+ };
34
+ optional: {
35
+ defaultValue<T = unknown>(arg: T): {
36
+ deprecated: import("react-desc").PropTypesDescValidator;
37
+ };
38
+ isRequired: import("react-desc").PropTypesDescValidator;
39
+ };
40
+ fitContent: {
41
+ defaultValue<T = unknown>(arg: T): {
42
+ deprecated: import("react-desc").PropTypesDescValidator;
43
+ };
44
+ isRequired: import("react-desc").PropTypesDescValidator;
45
+ };
46
+ leftLabel: {
47
+ defaultValue<T = unknown>(arg: T): {
48
+ deprecated: import("react-desc").PropTypesDescValidator;
49
+ };
50
+ isRequired: import("react-desc").PropTypesDescValidator;
51
+ };
52
+ hideLabel: {
53
+ defaultValue<T = unknown>(arg: T): {
54
+ deprecated: import("react-desc").PropTypesDescValidator;
55
+ };
56
+ isRequired: import("react-desc").PropTypesDescValidator;
57
+ };
58
+ withHighlight: {
59
+ defaultValue<T = unknown>(arg: T): {
60
+ deprecated: import("react-desc").PropTypesDescValidator;
61
+ };
62
+ isRequired: import("react-desc").PropTypesDescValidator;
63
+ };
64
+ isGroup: {
65
+ defaultValue<T = unknown>(arg: T): {
66
+ deprecated: import("react-desc").PropTypesDescValidator;
67
+ };
68
+ isRequired: import("react-desc").PropTypesDescValidator;
69
+ };
19
70
  };
20
71
  };
21
- declare const DSFormLayoutBlockItemWithSchema: any;
72
+ declare const DSFormLayoutBlockItemWithSchema: {
73
+ (props?: Props | undefined): JSX.Element;
74
+ propTypes: unknown;
75
+ toTypescript: () => import("react-desc").TypescriptSchema;
76
+ };
22
77
  export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };
package/types/form-layout-block-item/propTypes.d.ts CHANGED
@@ -1,15 +1,66 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const propTypes: {
2
3
  children: any;
3
4
  label: any;
4
5
  inputID: any;
5
- feedbackMessage: any;
6
- validationMessage: any;
7
- hasError: any;
8
- required: any;
9
- optional: any;
10
- fitContent: any;
11
- leftLabel: any;
12
- hideLabel: any;
13
- withHighlight: any;
14
- isGroup: any;
6
+ feedbackMessage: {
7
+ defaultValue<T = unknown>(arg: T): {
8
+ deprecated: import("react-desc").PropTypesDescValidator;
9
+ };
10
+ isRequired: import("react-desc").PropTypesDescValidator;
11
+ };
12
+ validationMessage: {
13
+ defaultValue<T = unknown>(arg: T): {
14
+ deprecated: import("react-desc").PropTypesDescValidator;
15
+ };
16
+ isRequired: import("react-desc").PropTypesDescValidator;
17
+ };
18
+ hasError: {
19
+ defaultValue<T = unknown>(arg: T): {
20
+ deprecated: import("react-desc").PropTypesDescValidator;
21
+ };
22
+ isRequired: import("react-desc").PropTypesDescValidator;
23
+ };
24
+ required: {
25
+ defaultValue<T = unknown>(arg: T): {
26
+ deprecated: import("react-desc").PropTypesDescValidator;
27
+ };
28
+ isRequired: import("react-desc").PropTypesDescValidator;
29
+ };
30
+ optional: {
31
+ defaultValue<T = unknown>(arg: T): {
32
+ deprecated: import("react-desc").PropTypesDescValidator;
33
+ };
34
+ isRequired: import("react-desc").PropTypesDescValidator;
35
+ };
36
+ fitContent: {
37
+ defaultValue<T = unknown>(arg: T): {
38
+ deprecated: import("react-desc").PropTypesDescValidator;
39
+ };
40
+ isRequired: import("react-desc").PropTypesDescValidator;
41
+ };
42
+ leftLabel: {
43
+ defaultValue<T = unknown>(arg: T): {
44
+ deprecated: import("react-desc").PropTypesDescValidator;
45
+ };
46
+ isRequired: import("react-desc").PropTypesDescValidator;
47
+ };
48
+ hideLabel: {
49
+ defaultValue<T = unknown>(arg: T): {
50
+ deprecated: import("react-desc").PropTypesDescValidator;
51
+ };
52
+ isRequired: import("react-desc").PropTypesDescValidator;
53
+ };
54
+ withHighlight: {
55
+ defaultValue<T = unknown>(arg: T): {
56
+ deprecated: import("react-desc").PropTypesDescValidator;
57
+ };
58
+ isRequired: import("react-desc").PropTypesDescValidator;
59
+ };
60
+ isGroup: {
61
+ defaultValue<T = unknown>(arg: T): {
62
+ deprecated: import("react-desc").PropTypesDescValidator;
63
+ };
64
+ isRequired: import("react-desc").PropTypesDescValidator;
65
+ };
15
66
  };
package/types/form-layout-block-item/styles.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { DSFormLayoutBlockItemStyledContainerT, DSFormLayoutBlockItemStyledLabelT, DSFormLayoutBlockItemStyledMessageT, DSFormLayoutBlockItemStyledMarkT } from './index.d';
2
- export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, DSFormLayoutBlockItemStyledContainerT, never>;
3
- export declare const StyledLabel: import("styled-components").StyledComponent<"label", any, DSFormLayoutBlockItemStyledLabelT, never>;
4
- export declare const StyledMessage: import("styled-components").StyledComponent<"div", any, DSFormLayoutBlockItemStyledMessageT, never>;
5
- export declare const StyledMark: import("styled-components").StyledComponent<"span", any, DSFormLayoutBlockItemStyledMarkT, never>;
6
- export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledContainerT, never>;
3
+ export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledLabelT, never>;
4
+ export declare const StyledMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledMessageT, never>;
5
+ export declare const StyledMark: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, DSFormLayoutBlockItemStyledMarkT, never>;
6
+ export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.d.ts CHANGED
@@ -1,10 +1,20 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  import type { DSControlledCheckboxGroupT } from './index.d';
3
4
  declare const DSFormLayoutCheckboxGroup: {
4
5
  (props: DSControlledCheckboxGroupT): JSX.Element;
5
6
  propTypes: {
6
- direction: any;
7
+ direction: {
8
+ defaultValue<T = unknown>(arg: T): {
9
+ deprecated: import("react-desc").PropTypesDescValidator;
10
+ };
11
+ isRequired: import("react-desc").PropTypesDescValidator;
12
+ };
7
13
  };
8
14
  };
9
- declare const DSFormLayoutCheckboxGroupWithSchema: any;
15
+ declare const DSFormLayoutCheckboxGroupWithSchema: {
16
+ (props?: DSControlledCheckboxGroupT | undefined): JSX.Element;
17
+ propTypes: unknown;
18
+ toTypescript: () => import("react-desc").TypescriptSchema;
19
+ };
10
20
  export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema };
package/types/form-layout-checkbox-group/propTypes.d.ts CHANGED
@@ -1,3 +1,9 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const propTypes: {
2
- direction: any;
3
+ direction: {
4
+ defaultValue<T = unknown>(arg: T): {
5
+ deprecated: import("react-desc").PropTypesDescValidator;
6
+ };
7
+ isRequired: import("react-desc").PropTypesDescValidator;
8
+ };
3
9
  };
package/types/form-layout-checkbox-group/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import type { DSControlledCheckboxGroupStyledContainerT } from './index.d';
2
- export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, DSControlledCheckboxGroupStyledContainerT, never>;
2
+ export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSControlledCheckboxGroupStyledContainerT, never>;
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }