@elliemae/ds-form-layout-blocks 3.12.0-next.1 → 3.12.0-rc.1
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.
- package/dist/cjs/form-layout-block-item/styles.js +2 -4
- package/dist/cjs/form-layout-block-item/styles.js.map +2 -2
- package/dist/cjs/form-layout-checkbox-group/styles.js +2 -4
- package/dist/cjs/form-layout-checkbox-group/styles.js.map +2 -2
- package/dist/esm/form-layout-block-item/styles.js +3 -5
- package/dist/esm/form-layout-block-item/styles.js.map +2 -2
- package/dist/esm/form-layout-checkbox-group/styles.js +3 -5
- package/dist/esm/form-layout-checkbox-group/styles.js.map +2 -2
- package/package.json +7 -7
|
@@ -34,14 +34,12 @@ __export(styles_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(styles_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
-
const StyledContainer = import_ds_system.styled
|
|
37
|
+
const StyledContainer = (0, import_ds_system.styled)("div")`
|
|
38
38
|
position: relative;
|
|
39
39
|
padding: 0;
|
|
40
40
|
margin: 0;
|
|
41
41
|
display: grid;
|
|
42
|
-
${import_ds_system.
|
|
43
|
-
${import_ds_system.space}
|
|
44
|
-
${import_ds_system.sizing}
|
|
42
|
+
${import_ds_system.xStyledCommonProps}
|
|
45
43
|
${({ fitContent }) => fitContent ? "width: fit-content;" : void 0}
|
|
46
44
|
${({ isGroup }) => isGroup ? "border: none" : ""};
|
|
47
45
|
${({ leftLabel, hideLabel }) => leftLabel && !hideLabel ? "grid-template-columns: auto 1fr;" : void 0}
|
|
@@ -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,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n hasError?: boolean;\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n leftLabel?: boolean;\n fitContent?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n required?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${xStyledCommonProps}\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FFF9D3;\n border : 2px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n `\n : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `\n : undefined}\n`;\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 15px;\n min-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\njustify-self: flex-end;\nfont-size: ${({ theme }) => theme.fontSizes.microText[300]}\nmargin-left: 16px;\ncolor: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AA4BpC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,wBAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO;AAAA,MAElC;AAAA,sBACc,MAAM,OAAO,MAAM;AAAA;AAAA;AAGlC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA,aAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,10 +29,7 @@ __export(styles_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(styles_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_ds_system = require("@elliemae/ds-system");
|
|
32
|
-
const StyledContainer = import_ds_system.styled
|
|
33
|
-
${import_ds_system.layout}
|
|
34
|
-
${import_ds_system.space}
|
|
35
|
-
${import_ds_system.sizing}
|
|
32
|
+
const StyledContainer = (0, import_ds_system.styled)("div")`
|
|
36
33
|
display: inline-flex;
|
|
37
34
|
flex-wrap: wrap;
|
|
38
35
|
flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
|
|
@@ -46,5 +43,6 @@ const StyledContainer = import_ds_system.styled.div`
|
|
|
46
43
|
& div:not(:last-child) {
|
|
47
44
|
margin-right: ${({ theme, direction }) => direction === "horizontal" ? theme.space.s : "0"};
|
|
48
45
|
}
|
|
46
|
+
${import_ds_system.xStyledCommonProps}
|
|
49
47
|
`;
|
|
50
48
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/form-layout-checkbox-group/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\ninterface DSControlledCheckboxGroupStyledContainerT {\n direction: DirectionsT;\n}\n\nexport const StyledContainer = styled('div')<DSControlledCheckboxGroupStyledContainerT>`\n display: inline-flex;\n flex-wrap: wrap;\n flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n margin-left: ${({ theme }) => theme.space.xs};\n margin-right: ${({ theme }) => theme.space.xs};\n margin-top: ${({ theme }) => theme.space.xxs};\n & div:not([role='checkbox']) {\n padding: 0;\n margin-bottom: ${({ theme }) => theme.space.xxs};\n }\n & div:not(:last-child) {\n margin-right: ${({ theme, direction }) => (direction === 'horizontal' ? theme.space.s : '0')};\n }\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAQpC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;AAAA,oBAGvB,CAAC,EAAE,UAAU,MAAO,cAAc,eAAe,QAAQ;AAAA,iBAC5D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,qBAGtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAO,UAAU,MAAO,cAAc,eAAe,MAAM,MAAM,IAAI;AAAA;AAAA,IAExF;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled,
|
|
3
|
-
const StyledContainer = styled
|
|
2
|
+
import { styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
+
const StyledContainer = styled("div")`
|
|
4
4
|
position: relative;
|
|
5
5
|
padding: 0;
|
|
6
6
|
margin: 0;
|
|
7
7
|
display: grid;
|
|
8
|
-
${
|
|
9
|
-
${space}
|
|
10
|
-
${sizing}
|
|
8
|
+
${xStyledCommonProps}
|
|
11
9
|
${({ fitContent }) => fitContent ? "width: fit-content;" : void 0}
|
|
12
10
|
${({ isGroup }) => isGroup ? "border: none" : ""};
|
|
13
11
|
${({ leftLabel, hideLabel }) => leftLabel && !hideLabel ? "grid-template-columns: auto 1fr;" : void 0}
|
|
@@ -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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ninterface DSFormLayoutBlockItemStyledMessageT {\n hasError?: boolean;\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledContainerT {\n leftLabel?: boolean;\n fitContent?: boolean;\n hideLabel?: boolean;\n withHighlight?: boolean;\n isGroup?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledLabelT {\n leftLabel?: boolean;\n hideLabel?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledMarkT {\n required?: boolean;\n}\n\ninterface DSFormLayoutBlockItemStyledCharCounterT {\n hasError?: boolean;\n}\nexport const StyledContainer = styled('div')<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${xStyledCommonProps}\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: auto 1fr;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${theme.space.xxs});\n background-color: #FFF9D3;\n border : 2px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n `\n : undefined}\n`;\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `\n : undefined}\n`;\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n line-height: 15px;\n min-height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n font-style: normal;\n`;\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nexport const StyledCharCount = styled.span<DSFormLayoutBlockItemStyledCharCounterT>`\njustify-self: flex-end;\nfont-size: ${({ theme }) => theme.fontSizes.microText[300]}\nmargin-left: 16px;\ncolor: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AA4BpC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC;AAAA,IACA,CAAC,EAAE,WAAW,MAAO,aAAa,wBAAwB;AAAA,IAC1D,CAAC,EAAE,QAAQ,MAAO,UAAU,iBAAiB;AAAA,IAC7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,qCAAqC;AAAA;AAAA,IAE9F,CAAC,EAAE,OAAO,cAAc,MACxB,gBACI;AAAA;AAAA;AAAA;AAAA,iBAIS,MAAM,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA;AAAA,6BAEC,MAAM,MAAM;AAAA,+BACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtB,MAAM,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA;AAAA,iCAEC,MAAM,MAAM;AAAA,mCACV,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQvC;AAAA;AAED,MAAM,cAAc,OAAO;AAAA;AAAA,IAE9B,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,kBAAkB,MAAM,MAAM,UAAU;AAAA,IAC/E,CAAC,EAAE,UAAU,MACb,YACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA;AAAA;AAED,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA,IAC5F,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,CAAC,YAAY,sBAAsB;AAAA;AAAA;AAG5E,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIhB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACxC,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,sBACc,MAAM,OAAO,OAAO;AAAA,MAElC;AAAA,sBACc,MAAM,OAAO,MAAM;AAAA;AAAA;AAGlC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,OAAO;AAAA;AAAA,aAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA,SAE7C,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled,
|
|
3
|
-
const StyledContainer = styled
|
|
4
|
-
${layout}
|
|
5
|
-
${space}
|
|
6
|
-
${sizing}
|
|
2
|
+
import { styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
+
const StyledContainer = styled("div")`
|
|
7
4
|
display: inline-flex;
|
|
8
5
|
flex-wrap: wrap;
|
|
9
6
|
flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
|
|
@@ -17,6 +14,7 @@ const StyledContainer = styled.div`
|
|
|
17
14
|
& div:not(:last-child) {
|
|
18
15
|
margin-right: ${({ theme, direction }) => direction === "horizontal" ? theme.space.s : "0"};
|
|
19
16
|
}
|
|
17
|
+
${xStyledCommonProps}
|
|
20
18
|
`;
|
|
21
19
|
export {
|
|
22
20
|
StyledContainer
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/form-layout-checkbox-group/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\n\ntype DirectionsT = 'horizontal' | 'vertical';\n\ninterface DSControlledCheckboxGroupStyledContainerT {\n direction: DirectionsT;\n}\n\nexport const StyledContainer = styled('div')<DSControlledCheckboxGroupStyledContainerT>`\n display: inline-flex;\n flex-wrap: wrap;\n flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n margin-left: ${({ theme }) => theme.space.xs};\n margin-right: ${({ theme }) => theme.space.xs};\n margin-top: ${({ theme }) => theme.space.xxs};\n & div:not([role='checkbox']) {\n padding: 0;\n margin-bottom: ${({ theme }) => theme.space.xxs};\n }\n & div:not(:last-child) {\n margin-right: ${({ theme, direction }) => (direction === 'horizontal' ? theme.space.s : '0')};\n }\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAQpC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;AAAA,oBAGvB,CAAC,EAAE,UAAU,MAAO,cAAc,eAAe,QAAQ;AAAA,iBAC5D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,qBAGtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,oBAG5B,CAAC,EAAE,OAAO,UAAU,MAAO,cAAc,eAAe,MAAM,MAAM,IAAI;AAAA;AAAA,IAExF;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.12.0-
|
|
3
|
+
"version": "3.12.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout",
|
|
6
6
|
"files": [
|
|
@@ -75,21 +75,21 @@
|
|
|
75
75
|
"indent": 4
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@elliemae/ds-grid": "3.12.0-
|
|
79
|
-
"@elliemae/ds-icons": "3.12.0-
|
|
80
|
-
"@elliemae/ds-system": "3.12.0-
|
|
81
|
-
"@elliemae/ds-utilities": "3.12.0-
|
|
78
|
+
"@elliemae/ds-grid": "3.12.0-rc.1",
|
|
79
|
+
"@elliemae/ds-icons": "3.12.0-rc.1",
|
|
80
|
+
"@elliemae/ds-system": "3.12.0-rc.1",
|
|
81
|
+
"@elliemae/ds-utilities": "3.12.0-rc.1",
|
|
82
82
|
"uid": "~2.0.0"
|
|
83
83
|
},
|
|
84
84
|
"devDependencies": {
|
|
85
85
|
"@testing-library/jest-dom": "~5.16.4",
|
|
86
86
|
"@testing-library/react": "~12.1.3",
|
|
87
|
-
"styled-components": "~5.3.
|
|
87
|
+
"styled-components": "~5.3.6"
|
|
88
88
|
},
|
|
89
89
|
"peerDependencies": {
|
|
90
90
|
"react": "~17.0.2",
|
|
91
91
|
"react-dom": "^17.0.2",
|
|
92
|
-
"styled-components": "
|
|
92
|
+
"styled-components": "~5.3.6"
|
|
93
93
|
},
|
|
94
94
|
"publishConfig": {
|
|
95
95
|
"access": "public",
|