@flodesk/grain 11.46.0 → 11.47.0
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/es/components/autocomplete2.js +51 -33
- package/es/components/button.js +31 -13
- package/es/components/progress.js +5 -5
- package/es/components/select.js +48 -31
- package/es/components/text-input.js +27 -15
- package/es/foundational/field.js +30 -21
- package/es/styles/foundational.js +3 -3
- package/package.json +1 -1
package/es/foundational/field.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _styled from "@emotion/styled/base";
|
|
2
|
-
const _excluded = ["paddingLeft", "paddingRight", "hasError", "isReadOnly", "isDisabled", "backgroundColor"],
|
|
2
|
+
const _excluded = ["paddingLeft", "paddingRight", "hasError", "isReadOnly", "isDisabled", "backgroundColor", "size"],
|
|
3
3
|
_excluded2 = ["children"],
|
|
4
4
|
_excluded3 = ["children"],
|
|
5
5
|
_excluded4 = ["onClick", "tag"];
|
|
@@ -50,22 +50,30 @@ const InputFieldRoot = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "p
|
|
|
50
50
|
paddingRight
|
|
51
51
|
} = _ref3;
|
|
52
52
|
return "0 ".concat(getSpace(paddingRight), " 0 ").concat(getSpace(paddingLeft));
|
|
53
|
-
}, ";height:
|
|
53
|
+
}, ";height:", _ref4 => {
|
|
54
|
+
let {
|
|
55
|
+
size
|
|
56
|
+
} = _ref4;
|
|
57
|
+
return "var(--grn-textbox-height-".concat(size, ")");
|
|
58
|
+
}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvZmllbGQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlFbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9maWVsZC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGV4dCwgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNyb3NzIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbi8vIGZpeCBmb3Igc2FmYXJpIHYxNiwgaW5jb3JyZWN0IGNvbG9yIHdoZW4gZGlzYWJsZWRcbmNvbnN0IHNhZmFyaTE2Rml4ID0gYFxuICAmOm5vdCg6cGxhY2Vob2xkZXItc2hvd24pIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuICAmOnBsYWNlaG9sZGVyLXNob3duIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuICBvcGFjaXR5OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkRGlzYWJsZWRTdHlsZXMgPSBgXG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWdybi1maWVsZC1iYWNrZ3JvdW5kLWRpc2FibGVkKTtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWRpc2FibGVkKTtcbiAgJHtzYWZhcmkxNkZpeH07XG5gO1xuXG5leHBvcnQgY29uc3QgZmllbGRQbGFjZWhvbGRlclN0eWxlcyA9IGBcbiAgLyogdGhlc2Ugc2VsZWN0b3JzIGFyZSBuZWVkZWQgdG8gZm9yY2UgdGhlIGNvbG9yICovXG4gICY6bm90KDpkaXNhYmxlZCwgOnJlYWQtb25seSk6OnBsYWNlaG9sZGVyLFxuICAmOmRpc2FibGVkOjpwbGFjZWhvbGRlcixcbiAgJjpyZWFkLW9ubHk6OnBsYWNlaG9sZGVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZpZWxkU3R5bGVzID0gKHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KSA9PiBgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiBib3JkZXItY29sb3I7XG4gIHdpZHRoOiAxMDAlO1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcblxuICBvdXRsaW5lOiBub25lO1xuICBib3JkZXI6IHZhcigtLWdybi1ib3JkZXItc2l6ZSkgc29saWQ7XG4gIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcihoYXNFcnJvciA/ICdkYW5nZXInIDogJ3ZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3IpJyl9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvciA/IGJhY2tncm91bmRDb2xvciA6ICd0cmFuc3BhcmVudCcpfTtcbiAgJHtmaWVsZFBsYWNlaG9sZGVyU3R5bGVzfTtcblxuICAmOmRpc2FibGVkLFxuICAmOnJlYWQtb25seSB7XG4gICAgJHtmaWVsZERpc2FibGVkU3R5bGVzfVxuICB9XG5cbiAgJHtcbiAgICAhaGFzRXJyb3IgJiZcbiAgICBgXG4gICAgJjpub3QoOmRpc2FibGVkLCA6cmVhZC1vbmx5KSB7XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWhvdmVyKTtcbiAgICAgIH1cblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvci1mb2N1cyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gIH1cbmA7XG5cbmNvbnN0IElucHV0RmllbGRSb290ID0gc3R5bGVkLmlucHV0YFxuICAkeyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSkgPT4gZ2V0RmllbGRTdHlsZXMoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pfTtcbiAgcGFkZGluZzogJHsoeyBwYWRkaW5nTGVmdCwgcGFkZGluZ1JpZ2h0IH0pID0+XG4gICAgYDAgJHtnZXRTcGFjZShwYWRkaW5nUmlnaHQpfSAwICR7Z2V0U3BhY2UocGFkZGluZ0xlZnQpfWB9O1xuICBoZWlnaHQ6ICR7KHsgc2l6ZSB9KSA9PiBgdmFyKC0tZ3JuLXRleHRib3gtaGVpZ2h0LSR7c2l6ZX0pYH07XG5gO1xuXG5leHBvcnQgY29uc3QgSW5wdXRGaWVsZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBwYWRkaW5nTGVmdCxcbiAgICAgIHBhZGRpbmdSaWdodCxcbiAgICAgIGhhc0Vycm9yLFxuICAgICAgaXNSZWFkT25seSxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBzaXplID0gJ20nLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgcGFkZGluZ1ggPSBgdmFyKC0tZ3JuLWZpZWxkLXBhZGRpbmdYLSR7c2l6ZX0pYDtcbiAgICByZXR1cm4gKFxuICAgICAgPElucHV0RmllbGRSb290XG4gICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdCB8fCBwYWRkaW5nWH1cbiAgICAgICAgcGFkZGluZ1JpZ2h0PXtwYWRkaW5nUmlnaHQgfHwgcGFkZGluZ1h9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIHJlYWRPbmx5PXtpc1JlYWRPbmx5fVxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgYmFja2dyb3VuZENvbG9yPXtiYWNrZ3JvdW5kQ29sb3J9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgIC8+XG4gICAgKTtcbiAgfSxcbik7XG5cbklucHV0RmllbGQucHJvcFR5cGVzID0ge1xuICBwYWRkaW5nTGVmdDogdHlwZXMuc3BhY2UsXG4gIHBhZGRpbmdSaWdodDogdHlwZXMuc3BhY2UsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNSZWFkT25seTogUHJvcFR5cGVzLmJvb2wsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHR5cGVzLmNvbG9yLFxuICBzaXplOiBQcm9wVHlwZXMub25lT2YoWydtJywgJ2wnXSksXG59O1xuXG5jb25zdCBGaWVsZExhYmVsUm9vdCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG5cbiAgLyogVE9ETzogcmVtb3ZlIGFmdGVyIGRlbGV0aW5nIEJvb3RzdHJhcCAqL1xuICBtYXJnaW46IHVuc2V0O1xuYDtcblxuZXhwb3J0IGNvbnN0IEZpZWxkTGFiZWwgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPEZpZWxkTGFiZWxSb290IHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9GaWVsZExhYmVsUm9vdD5cbikpO1xuXG5GaWVsZExhYmVsLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkSGludCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8VGV4dCBjb2xvcj1cImNvbnRlbnQyXCIgcmVmPXtyZWZ9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1RleHQ+XG4pKTtcblxuRmllbGRIaW50LnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkQ2xlYXJCdXR0b24gPSAoeyBvbkNsaWNrLCB0YWcgPSAnYnV0dG9uJywgLi4ucHJvcHMgfSkgPT4gKFxuICA8SWNvbkJ1dHRvbiBpY29uPXs8SWNvbkNyb3NzIC8+fSBvbkNsaWNrPXtvbkNsaWNrfSB0YWc9e3RhZ30gey4uLnByb3BzfSAvPlxuKTtcblxuRmllbGRDbGVhckJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbn07XG4iXX0= */"));
|
|
54
59
|
|
|
55
|
-
export const InputField = /*#__PURE__*/forwardRef((
|
|
60
|
+
export const InputField = /*#__PURE__*/forwardRef((_ref5, ref) => {
|
|
56
61
|
let {
|
|
57
|
-
paddingLeft
|
|
58
|
-
paddingRight
|
|
62
|
+
paddingLeft,
|
|
63
|
+
paddingRight,
|
|
59
64
|
hasError,
|
|
60
65
|
isReadOnly,
|
|
61
66
|
isDisabled,
|
|
62
|
-
backgroundColor
|
|
63
|
-
|
|
64
|
-
|
|
67
|
+
backgroundColor,
|
|
68
|
+
size = 'm'
|
|
69
|
+
} = _ref5,
|
|
70
|
+
props = _objectWithoutProperties(_ref5, _excluded);
|
|
65
71
|
|
|
72
|
+
const paddingX = "var(--grn-field-paddingX-".concat(size, ")");
|
|
66
73
|
return ___EmotionJSX(InputFieldRoot, _extends({
|
|
67
|
-
paddingLeft: paddingLeft,
|
|
68
|
-
paddingRight: paddingRight,
|
|
74
|
+
paddingLeft: paddingLeft || paddingX,
|
|
75
|
+
paddingRight: paddingRight || paddingX,
|
|
76
|
+
size: size,
|
|
69
77
|
readOnly: isReadOnly,
|
|
70
78
|
disabled: isDisabled,
|
|
71
79
|
ref: ref,
|
|
@@ -79,7 +87,8 @@ InputField.propTypes = {
|
|
|
79
87
|
hasError: PropTypes.bool,
|
|
80
88
|
isReadOnly: PropTypes.bool,
|
|
81
89
|
isDisabled: PropTypes.bool,
|
|
82
|
-
backgroundColor: types.color
|
|
90
|
+
backgroundColor: types.color,
|
|
91
|
+
size: PropTypes.oneOf(['m', 'l'])
|
|
83
92
|
};
|
|
84
93
|
|
|
85
94
|
const FieldLabelRoot = /*#__PURE__*/_styled("label", process.env.NODE_ENV === "production" ? {
|
|
@@ -87,13 +96,13 @@ const FieldLabelRoot = /*#__PURE__*/_styled("label", process.env.NODE_ENV === "p
|
|
|
87
96
|
} : {
|
|
88
97
|
target: "e1swxi6p0",
|
|
89
98
|
label: "FieldLabelRoot"
|
|
90
|
-
})("display:block;font-weight:", getWeight('medium'), ";transition:", getTransition('fast'), ";margin:unset;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
99
|
+
})("display:block;font-weight:", getWeight('medium'), ";transition:", getTransition('fast'), ";margin:unset;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvZmllbGQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlIbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9maWVsZC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGV4dCwgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNyb3NzIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbi8vIGZpeCBmb3Igc2FmYXJpIHYxNiwgaW5jb3JyZWN0IGNvbG9yIHdoZW4gZGlzYWJsZWRcbmNvbnN0IHNhZmFyaTE2Rml4ID0gYFxuICAmOm5vdCg6cGxhY2Vob2xkZXItc2hvd24pIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuICAmOnBsYWNlaG9sZGVyLXNob3duIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuICBvcGFjaXR5OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkRGlzYWJsZWRTdHlsZXMgPSBgXG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWdybi1maWVsZC1iYWNrZ3JvdW5kLWRpc2FibGVkKTtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWRpc2FibGVkKTtcbiAgJHtzYWZhcmkxNkZpeH07XG5gO1xuXG5leHBvcnQgY29uc3QgZmllbGRQbGFjZWhvbGRlclN0eWxlcyA9IGBcbiAgLyogdGhlc2Ugc2VsZWN0b3JzIGFyZSBuZWVkZWQgdG8gZm9yY2UgdGhlIGNvbG9yICovXG4gICY6bm90KDpkaXNhYmxlZCwgOnJlYWQtb25seSk6OnBsYWNlaG9sZGVyLFxuICAmOmRpc2FibGVkOjpwbGFjZWhvbGRlcixcbiAgJjpyZWFkLW9ubHk6OnBsYWNlaG9sZGVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZpZWxkU3R5bGVzID0gKHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KSA9PiBgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiBib3JkZXItY29sb3I7XG4gIHdpZHRoOiAxMDAlO1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcblxuICBvdXRsaW5lOiBub25lO1xuICBib3JkZXI6IHZhcigtLWdybi1ib3JkZXItc2l6ZSkgc29saWQ7XG4gIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcihoYXNFcnJvciA/ICdkYW5nZXInIDogJ3ZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3IpJyl9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvciA/IGJhY2tncm91bmRDb2xvciA6ICd0cmFuc3BhcmVudCcpfTtcbiAgJHtmaWVsZFBsYWNlaG9sZGVyU3R5bGVzfTtcblxuICAmOmRpc2FibGVkLFxuICAmOnJlYWQtb25seSB7XG4gICAgJHtmaWVsZERpc2FibGVkU3R5bGVzfVxuICB9XG5cbiAgJHtcbiAgICAhaGFzRXJyb3IgJiZcbiAgICBgXG4gICAgJjpub3QoOmRpc2FibGVkLCA6cmVhZC1vbmx5KSB7XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWhvdmVyKTtcbiAgICAgIH1cblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvci1mb2N1cyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gIH1cbmA7XG5cbmNvbnN0IElucHV0RmllbGRSb290ID0gc3R5bGVkLmlucHV0YFxuICAkeyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSkgPT4gZ2V0RmllbGRTdHlsZXMoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pfTtcbiAgcGFkZGluZzogJHsoeyBwYWRkaW5nTGVmdCwgcGFkZGluZ1JpZ2h0IH0pID0+XG4gICAgYDAgJHtnZXRTcGFjZShwYWRkaW5nUmlnaHQpfSAwICR7Z2V0U3BhY2UocGFkZGluZ0xlZnQpfWB9O1xuICBoZWlnaHQ6ICR7KHsgc2l6ZSB9KSA9PiBgdmFyKC0tZ3JuLXRleHRib3gtaGVpZ2h0LSR7c2l6ZX0pYH07XG5gO1xuXG5leHBvcnQgY29uc3QgSW5wdXRGaWVsZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBwYWRkaW5nTGVmdCxcbiAgICAgIHBhZGRpbmdSaWdodCxcbiAgICAgIGhhc0Vycm9yLFxuICAgICAgaXNSZWFkT25seSxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBzaXplID0gJ20nLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgcGFkZGluZ1ggPSBgdmFyKC0tZ3JuLWZpZWxkLXBhZGRpbmdYLSR7c2l6ZX0pYDtcbiAgICByZXR1cm4gKFxuICAgICAgPElucHV0RmllbGRSb290XG4gICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdCB8fCBwYWRkaW5nWH1cbiAgICAgICAgcGFkZGluZ1JpZ2h0PXtwYWRkaW5nUmlnaHQgfHwgcGFkZGluZ1h9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIHJlYWRPbmx5PXtpc1JlYWRPbmx5fVxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgYmFja2dyb3VuZENvbG9yPXtiYWNrZ3JvdW5kQ29sb3J9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgIC8+XG4gICAgKTtcbiAgfSxcbik7XG5cbklucHV0RmllbGQucHJvcFR5cGVzID0ge1xuICBwYWRkaW5nTGVmdDogdHlwZXMuc3BhY2UsXG4gIHBhZGRpbmdSaWdodDogdHlwZXMuc3BhY2UsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNSZWFkT25seTogUHJvcFR5cGVzLmJvb2wsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHR5cGVzLmNvbG9yLFxuICBzaXplOiBQcm9wVHlwZXMub25lT2YoWydtJywgJ2wnXSksXG59O1xuXG5jb25zdCBGaWVsZExhYmVsUm9vdCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG5cbiAgLyogVE9ETzogcmVtb3ZlIGFmdGVyIGRlbGV0aW5nIEJvb3RzdHJhcCAqL1xuICBtYXJnaW46IHVuc2V0O1xuYDtcblxuZXhwb3J0IGNvbnN0IEZpZWxkTGFiZWwgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPEZpZWxkTGFiZWxSb290IHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9GaWVsZExhYmVsUm9vdD5cbikpO1xuXG5GaWVsZExhYmVsLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkSGludCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8VGV4dCBjb2xvcj1cImNvbnRlbnQyXCIgcmVmPXtyZWZ9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1RleHQ+XG4pKTtcblxuRmllbGRIaW50LnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkQ2xlYXJCdXR0b24gPSAoeyBvbkNsaWNrLCB0YWcgPSAnYnV0dG9uJywgLi4ucHJvcHMgfSkgPT4gKFxuICA8SWNvbkJ1dHRvbiBpY29uPXs8SWNvbkNyb3NzIC8+fSBvbkNsaWNrPXtvbkNsaWNrfSB0YWc9e3RhZ30gey4uLnByb3BzfSAvPlxuKTtcblxuRmllbGRDbGVhckJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbn07XG4iXX0= */"));
|
|
91
100
|
|
|
92
|
-
export const FieldLabel = /*#__PURE__*/forwardRef((
|
|
101
|
+
export const FieldLabel = /*#__PURE__*/forwardRef((_ref6, ref) => {
|
|
93
102
|
let {
|
|
94
103
|
children
|
|
95
|
-
} =
|
|
96
|
-
props = _objectWithoutProperties(
|
|
104
|
+
} = _ref6,
|
|
105
|
+
props = _objectWithoutProperties(_ref6, _excluded2);
|
|
97
106
|
|
|
98
107
|
return ___EmotionJSX(FieldLabelRoot, _extends({
|
|
99
108
|
ref: ref
|
|
@@ -102,11 +111,11 @@ export const FieldLabel = /*#__PURE__*/forwardRef((_ref5, ref) => {
|
|
|
102
111
|
FieldLabel.propTypes = {
|
|
103
112
|
children: PropTypes.node
|
|
104
113
|
};
|
|
105
|
-
export const FieldHint = /*#__PURE__*/forwardRef((
|
|
114
|
+
export const FieldHint = /*#__PURE__*/forwardRef((_ref7, ref) => {
|
|
106
115
|
let {
|
|
107
116
|
children
|
|
108
|
-
} =
|
|
109
|
-
props = _objectWithoutProperties(
|
|
117
|
+
} = _ref7,
|
|
118
|
+
props = _objectWithoutProperties(_ref7, _excluded3);
|
|
110
119
|
|
|
111
120
|
return ___EmotionJSX(Text, _extends({
|
|
112
121
|
color: "content2",
|
|
@@ -116,12 +125,12 @@ export const FieldHint = /*#__PURE__*/forwardRef((_ref6, ref) => {
|
|
|
116
125
|
FieldHint.propTypes = {
|
|
117
126
|
children: PropTypes.node
|
|
118
127
|
};
|
|
119
|
-
export const FieldClearButton =
|
|
128
|
+
export const FieldClearButton = _ref8 => {
|
|
120
129
|
let {
|
|
121
130
|
onClick,
|
|
122
131
|
tag = 'button'
|
|
123
|
-
} =
|
|
124
|
-
props = _objectWithoutProperties(
|
|
132
|
+
} = _ref8,
|
|
133
|
+
props = _objectWithoutProperties(_ref8, _excluded4);
|
|
125
134
|
|
|
126
135
|
return ___EmotionJSX(IconButton, _extends({
|
|
127
136
|
icon: ___EmotionJSX(IconCross, null),
|
|
@@ -2,10 +2,10 @@ const legacyVariables = "\n :root {\n --grn-textbox-textSize-s: var(--grn-te
|
|
|
2
2
|
export const borderVariables = "\n :root {\n --grn-border-size: 1px;\n }\n";
|
|
3
3
|
const capValue = "\n :root {\n @supports not (font-size: 1cap) { --grn-cap-value: 0.74em }\n @supports (font-size: 1cap) { --grn-cap-value: 1cap }\n }\n";
|
|
4
4
|
export const capVariables = "\n :root {\n --grn-cap: var(--grn-cap-value);\n }\n";
|
|
5
|
-
export const fieldVariables = "\n :root, [data-theme] {\n --grn-field-paddingX: var(--grn-space-s2);\n --grn-field-border-color: var(--grn-color-fade3);\n --grn-field-border-color-hover: var(--grn-color-fade6);\n --grn-field-border-color-focus: var(--grn-color-shade9);\n --grn-field-border-color-disabled: var(--grn-color-shade5);\n --grn-field-background-disabled: var(--grn-color-shade2);\n --grn-field-placeholder-color: var(--grn-color-shade7);\n }\n";
|
|
5
|
+
export const fieldVariables = "\n :root, [data-theme] {\n --grn-field-paddingX: var(--grn-space-s2);\n --grn-field-paddingX-m: var(--grn-space-s2);\n --grn-field-paddingX-l: var(--grn-textbox-paddingX-l);\n\n --grn-field-border-color: var(--grn-color-fade3);\n --grn-field-border-color-hover: var(--grn-color-fade6);\n --grn-field-border-color-focus: var(--grn-color-shade9);\n --grn-field-border-color-disabled: var(--grn-color-shade5);\n --grn-field-background-disabled: var(--grn-color-shade2);\n --grn-field-placeholder-color: var(--grn-color-shade7);\n }\n";
|
|
6
6
|
export const componentVariables = "\n :root, [data-theme] {\n --grn-clearbutton-danger-background-hover: hsl(var(--redHS) var(--redL) / 12%);\n --grn-clearbutton-danger-background-active: hsl(var(--redHS) var(--redL) / 19%);\n --grn-icon-danger-color: hsl(var(--redHS) var(--redL) / 70%);\n }\n";
|
|
7
|
-
const experiments = "\n [data-experiment-compact-textbox=\"true\"] {\n --grn-textBoxHeight: 36px;\n\n --grn-textbox-height-m: 36px;\n --grn-textbox-paddingX-m: var(--grn-space-s2);\n }\n :root [data-experiment-lighter-fields='true'],\n [data-theme][data-experiment-lighter-fields='true'] {\n --grn-field-border-color: var(--grn-color-fade2);\n }\n\n [data-experiment-match-button-and-field-padding=\"true\"] {\n --grn-field-paddingX: 14px;\n --grn-textbox-paddingX-m: 14px;\n }\n";
|
|
8
|
-
export const textboxVariables = "\n :root {\n --grn-textbox-height-s: 28px;\n --grn-textbox-paddingX-s: var(--grn-space-s);\n --grn-textbox-radius-s: var(--grn-radius-xs);\n --grn-textbox-text-s: var(--grn-text-s);\n\n --grn-textbox-height-m: 40px;\n --grn-textbox-paddingX-m: var(--grn-space-m);\n --grn-textbox-radius-m: var(--grn-radius-s);\n --grn-textbox-text-m: var(--grn-text-m);\n }\n";
|
|
7
|
+
const experiments = "\n [data-experiment-compact-textbox=\"true\"] {\n --grn-textBoxHeight: 36px;\n\n --grn-textbox-height-m: 36px;\n --grn-textbox-paddingX-m: var(--grn-space-s2);\n }\n :root [data-experiment-lighter-fields='true'],\n [data-theme][data-experiment-lighter-fields='true'] {\n --grn-field-border-color: var(--grn-color-fade2);\n }\n\n [data-experiment-match-button-and-field-padding=\"true\"] {\n --grn-field-paddingX: 14px;\n --grn-field-paddingX-m: 14px;\n --grn-textbox-paddingX-m: 14px;\n }\n";
|
|
8
|
+
export const textboxVariables = "\n :root {\n --grn-textbox-height-s: 28px;\n --grn-textbox-paddingX-s: var(--grn-space-s);\n --grn-textbox-radius-s: var(--grn-radius-xs);\n --grn-textbox-text-s: var(--grn-text-s);\n\n --grn-textbox-height-m: 40px;\n --grn-textbox-paddingX-m: var(--grn-space-m);\n --grn-textbox-radius-m: var(--grn-radius-s);\n --grn-textbox-text-m: var(--grn-text-m);\n\n --grn-textbox-height-l: 48px;\n --grn-textbox-paddingX-l: 18px;\n --grn-textbox-radius-l: var(--grn-radius-m);\n --grn-textbox-text-l: var(--grn-text-m);\n }\n";
|
|
9
9
|
export const clearbuttonVariables = "\n :root {\n --grn-clearbutton-height: 36px;\n }\n";
|
|
10
10
|
export const formVariables = "\n :root {\n --grn-form-title-content-gap: var(--grn-space-l);\n --grn-form-contents-gap: var(--grn-space-m);\n --grn-form-content-actions-gap: var(--grn-space-xl);\n --grn-form-control-label-gap: var(--grn-space-s);\n }\n";
|
|
11
11
|
export const transitionVariables = "\n :root {\n --grn-transition-leave: var(--grn-transition-slow);\n --grn-transition-hover: var(--grn-transition-fast);\n --grn-transition-active: var(--grn-transition-xxFast);\n }\n";
|