@xfers/design-system 4.5.0-dev.f5d95e3f41 → 4.5.0-dev.fe4b6315a4
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/cjs/index.js +6 -6
- package/cjs/index.js.map +1 -1
- package/dist/components/DatePicker/index.js +5 -3
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/Input/HelperText.js +2 -2
- package/dist/components/Input/HelperText.js.map +1 -1
- package/dist/components/Input/InputLabel.js +6 -6
- package/dist/components/Input/InputLabel.js.map +1 -1
- package/dist/components/Input/index.js +9 -4
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Input/inputStyles.js +8 -16
- package/dist/components/Input/inputStyles.js.map +1 -1
- package/dist/components/InputWithButton/index.js +33 -8
- package/dist/components/InputWithButton/index.js.map +1 -1
- package/dist/components/RangePicker/index.js +1 -1
- package/dist/components/RangePicker/index.js.map +1 -1
- package/dist/shared/TypographyStyles.js +13 -1
- package/dist/shared/TypographyStyles.js.map +1 -1
- package/dist/types/components/Input/HelperText.d.ts +2 -1
- package/dist/types/components/Input/InputLabel.d.ts +2 -1
- package/dist/types/components/Input/inputStyles.d.ts +4 -14
- package/dist/types/shared/TypographyStyles.d.ts +13 -0
- package/es/index.js +5 -5
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -28,19 +28,21 @@ var emotion_1 = require("emotion");
|
|
|
28
28
|
var date_picker_1 = require("antd/es/date-picker");
|
|
29
29
|
require("antd/es/date-picker/style/css");
|
|
30
30
|
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
31
|
+
var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
|
|
31
32
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
32
33
|
var inputStyles_1 = require("../Input/inputStyles");
|
|
33
34
|
var InputLabel_1 = require("../Input/InputLabel");
|
|
34
35
|
var HelperText_1 = require("../Input/HelperText");
|
|
35
|
-
var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
|
|
36
36
|
function default_1(_a) {
|
|
37
37
|
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, label = _a.label, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.optional, optional = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.error, error = _f === void 0 ? false : _f, helperText = _a.helperText, showInfoIcon = _a.showInfoIcon, onInfoClick = _a.onInfoClick, rest = __rest(_a, ["disabled", "label", "required", "optional", "size", "error", "helperText", "showInfoIcon", "onInfoClick"]);
|
|
38
38
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
39
39
|
var _g = inputStyles_1.SIZE_CONFIG[size], height = _g.height, borderRadius = _g.borderRadius, padding = _g.padding;
|
|
40
|
-
var borderColor = error
|
|
40
|
+
var borderColor = error
|
|
41
|
+
? theme.color.status.critical
|
|
42
|
+
: theme.color.base.line;
|
|
41
43
|
var style = "\n -webkit-font-smoothing: antialiased;\n height: ".concat(height, ";\n width: 100%;\n\n ").concat(disabled
|
|
42
44
|
? "\n pointer-events: none;\n "
|
|
43
|
-
: '', "\n\n &.ant-picker {\n border-radius: ").concat(borderRadius, ";\n border-color: ").concat(borderColor, ";\n padding: ").concat(padding, ";\n transition: 0.3s all ease;\n\n &:hover {\n border-color: ").concat(theme.color.base.primary2, " !important;\n }\n\n &.ant-picker-focused {\n border-color: ").concat(theme.color.base.primary2, " !important;\n box-shadow: none !important;\n -webkit-box-shadow: none !important;\n }\n }\n\n &.ant-picker > .ant-picker-input {\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n\n & .ant-picker-input > input {\n font-size: 14px;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n\n & .ant-picker-input > input::placeholder {\n font-size: 14px;\n color: ").concat(theme.color.component.placeholderInput, ";\n }\n\n &.ant-picker.ant-picker-disabled {\n background: ").concat(theme.color.surface.disabledSurface, ";\n border: 1px solid ").concat(theme.color.base.line, ";\n }\n\n & .ant-picker-input > input[disabled] {\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n }\n\n & .ant-picker-cell-in-view{\n &.ant-picker-cell-today .ant-picker-cell-inner{\n &:before {\n border-color: ").concat(theme.color.base.primary2, ";\n }
|
|
45
|
+
: '', "\n\n &.ant-picker {\n border-radius: ").concat(borderRadius, ";\n border-color: ").concat(borderColor, ";\n padding: ").concat(padding, ";\n transition: 0.3s all ease;\n\n &:hover {\n border-color: ").concat(theme.color.base.primary2, " !important;\n }\n\n &.ant-picker-focused {\n border-color: ").concat(theme.color.base.primary2, " !important;\n box-shadow: none !important;\n -webkit-box-shadow: none !important;\n }\n }\n\n &.ant-picker > .ant-picker-input {\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n\n & .ant-picker-input > input {\n font-size: 14px;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n\n & .ant-picker-input > input::placeholder {\n font-size: 14px;\n color: ").concat(theme.color.component.placeholderInput, ";\n }\n\n &.ant-picker.ant-picker-disabled {\n background: ").concat(theme.color.surface.disabledSurface, ";\n border: 1px solid ").concat(theme.color.base.line, ";\n }\n\n & .ant-picker-input > input[disabled] {\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n }\n\n & .ant-picker-cell-in-view{\n &.ant-picker-cell-today .ant-picker-cell-inner{\n &:before {\n border-color: ").concat(theme.color.base.primary2, ";\n }\n }\n\n &ant-picker-cell-range-end .ant-picker-cell-inner,\n &ant-picker-cell-range-start .ant-picker-cell-inner,\n &ant-picker-cell-selected .ant-picker-cell-inner {\n background: ").concat(theme.color.base.primary2, ";\n }\n }\n ");
|
|
44
46
|
var dropdownStyle = "\n .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner{\n background-color: ".concat(theme.color.base.primary2, ";\n }\n ");
|
|
45
47
|
var calendarIcon = (react_1.default.createElement(MaterialSymbols_1.default, { icon: "date_range", size: "m", color: theme.color.base.onNeutral }));
|
|
46
48
|
return (react_1.default.createElement("div", null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,4BA4HC;AA7JD,+BAAyB;AACzB,mCAA6B;AAC7B,mDAA4C;AAC5C,yCAAsC;AACtC,gEAAuD;AACvD,6EAAuE;AACvE,uDAAiD;AACjD,oDAA6D;AAC7D,kDAAgD;AAChD,kDAAgD;AAwBhD,mBAAyB,EAWjB;IAVN,IAAA,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACR,IAAI,cAVgB,2GAWxB,CADQ;IAEP,IAAM,KAAK,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAClB,IAAA,KAAoC,yBAAW,CAAC,IAAI,CAAC,EAAnD,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAsB,CAAA;IAC3D,IAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QAC7B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;IAEzB,IAAM,KAAK,GAAG,kEAEF,MAAM,wCAId,QAAQ;QACN,CAAC,CAAC,uCAEH;QACC,CAAC,CAAC,EAAE,0DAIW,YAAY,oCACb,WAAW,+BAChB,OAAO,2FAIA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,0FAIzB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,4LAO5B,4BAAS,sIAKf,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,iGAK1B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,8GAK1B,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,mFAIjC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,wCAC7B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,mFAIhC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,6JAM1B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,0OAO7B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,0BAG5C,CAAA;IAED,IAAM,aAAa,GAAG,mHAEE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,iBAEhD,CAAA;IAED,IAAM,YAAY,GAAG,CACnB,8BAAC,yBAAe,IACd,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,GACjC,CACH,CAAA;IAED,OAAO,CACL;QACE,8BAAC,uBAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,GACxB;QACF,8BAAC,qBAAU,aACT,SAAS,EAAE,UAAG,IAAA,aAAG,EAAC,KAAK,CAAC,CAAE,EAC1B,iBAAiB,EAAE,IAAA,aAAG,EAAC,aAAa,CAAC,EACrC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,YAAY,IACpB,IAAI,EACR;QACF,8BAAC,uBAAU,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAC1C,CACP,CAAA;AACH,CAAC"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.HelperText = HelperText;
|
|
4
4
|
var react_1 = require("react");
|
|
5
|
-
var Typography_1 = require("src/
|
|
5
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
6
6
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
7
7
|
function HelperText(_a) {
|
|
8
8
|
var text = _a.text, error = _a.error;
|
|
@@ -12,6 +12,6 @@ function HelperText(_a) {
|
|
|
12
12
|
var color = error
|
|
13
13
|
? theme.color.status.critical
|
|
14
14
|
: theme.color.component.helperInput;
|
|
15
|
-
return (react_1.default.createElement(Typography_1.
|
|
15
|
+
return (react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: color, marginTop: 4 } }, text));
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=HelperText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../src/components/Input/HelperText.tsx"],"names":[],"mappings":";;AASA,
|
|
1
|
+
{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../src/components/Input/HelperText.tsx"],"names":[],"mappings":";;AASA,gCAiBC;AA1BD,+BAAyB;AACzB,kEAAgE;AAChE,uDAAiD;AAOjD,SAAgB,UAAU,CAAC,EAGT;QAFhB,IAAI,UAAA,EACJ,KAAK,WAAA;IAEL,IAAM,KAAK,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAExB,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtB,IAAM,KAAK,GAAG,KAAK;QACjB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QAC7B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAA;IAErC,OAAO,CACL,8BAAC,uBAAU,CAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,SAAS,EAAE,CAAC,EAAE,IACtD,IAAI,CACW,CACnB,CAAA;AACH,CAAC"}
|
|
@@ -9,23 +9,23 @@ var react_1 = require("react");
|
|
|
9
9
|
var styled_1 = require("@emotion/styled");
|
|
10
10
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
11
11
|
var icons_1 = require("src/icons");
|
|
12
|
-
var
|
|
12
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
13
13
|
var Tooltip_1 = require("src/components/Tooltip");
|
|
14
|
-
var LabelContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"])));
|
|
15
|
-
var LabelText = styled_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n"], ["\n font-family: ", ";\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n"])), TypographyStyles_1.MAIN_FONT);
|
|
16
14
|
function InputLabel(_a) {
|
|
17
15
|
var label = _a.label, required = _a.required, optional = _a.optional, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick;
|
|
18
16
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
19
17
|
if (!label)
|
|
20
18
|
return null;
|
|
21
19
|
return (react_1.default.createElement(LabelContainer, null,
|
|
22
|
-
react_1.default.createElement(
|
|
20
|
+
react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: theme.color.base.onNeutral } },
|
|
23
21
|
label,
|
|
24
22
|
required && (react_1.default.createElement("span", { style: { color: theme.error.text, marginLeft: 2 } }, "*"))),
|
|
25
|
-
optional && (react_1.default.createElement(
|
|
23
|
+
optional && (react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: theme.color.base.onNeutralSecondary } }, "Optional")),
|
|
26
24
|
showInfoIcon && infoText && (react_1.default.createElement(Tooltip_1.default, { content: infoText, placement: "top" },
|
|
27
25
|
react_1.default.createElement(icons_1.Info, { style: { cursor: 'pointer', width: 16, height: 16 }, onClick: onInfoClick }))),
|
|
28
26
|
showInfoIcon && !infoText && (react_1.default.createElement(icons_1.Info, { style: { cursor: 'pointer', width: 16, height: 16 }, onClick: onInfoClick }))));
|
|
29
27
|
}
|
|
30
|
-
|
|
28
|
+
// ─── Styled Components ───
|
|
29
|
+
var LabelContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"])));
|
|
30
|
+
var templateObject_1;
|
|
31
31
|
//# sourceMappingURL=InputLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../../src/components/Input/InputLabel.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../../src/components/Input/InputLabel.tsx"],"names":[],"mappings":";;;;;;AAgBA,gCA4CC;AA5DD,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,mCAAgC;AAChC,kEAAgE;AAChE,kDAA4C;AAW5C,SAAgB,UAAU,CAAC,EAOT;QANhB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEX,IAAM,KAAK,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAExB,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,8BAAC,cAAc;QACb,8BAAC,uBAAU,CAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YACpE,KAAK;YACL,QAAQ,IAAI,CACX,wCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,QAAU,CAClE,CACe;QACjB,QAAQ,IAAI,CACX,8BAAC,uBAAU,CAAC,IAAI,IACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAGrC,CACnB;QACA,YAAY,IAAI,QAAQ,IAAI,CAC3B,8BAAC,iBAAO,IAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,KAAK;YACzC,8BAAC,YAAI,IACH,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EACnD,OAAO,EAAE,WAAW,GACpB,CACM,CACX;QACA,YAAY,IAAI,CAAC,QAAQ,IAAI,CAC5B,8BAAC,YAAI,IACH,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EACnD,OAAO,EAAE,WAAW,GACpB,CACH,CACc,CAClB,CAAA;AACH,CAAC;AAED,4BAA4B;AAE5B,IAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,qJAAA,kFAKhC,IAAA,CAAA"}
|
|
@@ -52,18 +52,23 @@ MainInput.Password = function (_a) {
|
|
|
52
52
|
MainInput.Search = function (_a) {
|
|
53
53
|
var _b = _a.addonBefore, addonBefore = _b === void 0 ? '' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, onChange = _a.onChange, onSearch = _a.onSearch, _e = _a.size, size = _e === void 0 ? 'large' : _e, helperText = _a.helperText, error = _a.error, rest = __rest(_a, ["addonBefore", "placeholder", "className", "onChange", "onSearch", "size", "helperText", "error"]);
|
|
54
54
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
55
|
-
var searchStyle = (0, inputStyles_1.getBaseInputStyle)(theme, size, error)
|
|
55
|
+
var searchStyle = "".concat((0, inputStyles_1.getBaseInputStyle)(theme, size, error), "\n & .ant-input-group-addon:not(:last-child) {\n background-color: ").concat(theme.color.surface.neutral, ";\n padding: ").concat(typeof addonBefore === 'string' ? '0 15px' : '0', ";\n }\n &.ant-input-affix-wrapper .ant-input-prefix {\n margin-right: 8px;\n display: flex;\n align-items: center;\n }\n ");
|
|
56
56
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
57
|
-
react_1.default.createElement(input_1.default, __assign({ placeholder: placeholder, addonBefore: addonBefore, onChange: onChange, onKeyDown: onSearch, className: "".concat((0, emotion_1.css)(searchStyle), " ").concat(className), prefix: react_1.default.createElement("span", { onClick: onSearch, style: {
|
|
57
|
+
react_1.default.createElement(input_1.default, __assign({ placeholder: placeholder, addonBefore: addonBefore, onChange: onChange, onKeyDown: onSearch, className: "".concat((0, emotion_1.css)(searchStyle), " ").concat(className), prefix: react_1.default.createElement("span", { onClick: onSearch, style: {
|
|
58
|
+
display: 'flex',
|
|
59
|
+
cursor: onSearch ? 'pointer' : 'default',
|
|
60
|
+
} },
|
|
58
61
|
react_1.default.createElement(MaterialSymbols_1.default, { icon: "search", size: size === 'small' ? 'xs' : 'm', color: theme.color.base.onNeutral })) }, rest)),
|
|
59
62
|
react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
|
|
60
63
|
};
|
|
61
64
|
MainInput.TextArea = function (_a) {
|
|
62
65
|
var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.optional, optional = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, helperText = _a.helperText, error = _a.error, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick, rest = __rest(_a, ["className", "label", "required", "optional", "size", "helperText", "error", "showInfoIcon", "infoText", "onInfoClick"]);
|
|
63
66
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
64
|
-
var borderColor = error
|
|
67
|
+
var borderColor = error
|
|
68
|
+
? theme.color.status.critical
|
|
69
|
+
: theme.color.base.line;
|
|
65
70
|
var _f = inputStyles_1.SIZE_CONFIG[size], borderRadius = _f.borderRadius, padding = _f.padding;
|
|
66
|
-
var textAreaStyle = (0, inputStyles_1.getBaseInputStyle)(theme, size, error)
|
|
71
|
+
var textAreaStyle = "".concat((0, inputStyles_1.getBaseInputStyle)(theme, size, error), "\n &.ant-input {\n min-height: 72px;\n height: auto;\n resize: none;\n border-radius: ").concat(borderRadius, " !important;\n border-color: ").concat(borderColor, ";\n padding: ").concat(padding, ";\n &:hover:not(:disabled):not(.ant-input-disabled) { border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important; }\n &:focus {\n border-color: ").concat(theme.color.base.primary2, ";\n box-shadow: none;\n }\n &:disabled {\n color: ").concat(theme.color.base.onNeutral, " !important;\n -webkit-text-fill-color: ").concat(theme.color.base.onNeutral, " !important;\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n border-color: ").concat(theme.color.base.line, ";\n &::placeholder {\n color: ").concat(theme.color.surface.disabledOnSurface, " !important;\n -webkit-text-fill-color: ").concat(theme.color.surface.disabledOnSurface, " !important;\n }\n &:hover { border-color: ").concat(theme.color.base.line, " !important; }\n }\n }\n ");
|
|
67
72
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
68
73
|
react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
|
|
69
74
|
react_1.default.createElement(input_1.default.TextArea, __assign({ className: "".concat((0, emotion_1.css)(textAreaStyle), " ").concat(className) }, rest)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,mCAA6B;AAC7B,uCAAiD;AACjD,uDAAiD;AACjD,6EAAuE;AACvE,6CAAyE;AACzE,2CAAyC;AACzC,2CAAyC;AACzC,mCAAgC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,23 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SIZE_CONFIG = void 0;
|
|
4
4
|
exports.getBaseInputStyle = getBaseInputStyle;
|
|
5
5
|
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
6
|
-
exports.SIZE_CONFIG
|
|
7
|
-
large: {
|
|
8
|
-
height: '48px',
|
|
9
|
-
borderRadius: '12px',
|
|
10
|
-
padding: '12px 16px',
|
|
11
|
-
},
|
|
12
|
-
small: {
|
|
13
|
-
height: '36px',
|
|
14
|
-
borderRadius: '8px',
|
|
15
|
-
padding: '8px 12px',
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6
|
+
Object.defineProperty(exports, "SIZE_CONFIG", { enumerable: true, get: function () { return TypographyStyles_1.SIZE_CONFIG; } });
|
|
19
7
|
function getBaseInputStyle(theme, size, error, disabledAddon) {
|
|
20
8
|
if (size === void 0) { size = 'large'; }
|
|
21
|
-
var _a =
|
|
22
|
-
var borderColor = error
|
|
23
|
-
|
|
9
|
+
var _a = TypographyStyles_1.SIZE_CONFIG[size], height = _a.height, borderRadius = _a.borderRadius, padding = _a.padding;
|
|
10
|
+
var borderColor = error
|
|
11
|
+
? theme.color.status.critical
|
|
12
|
+
: theme.color.base.line;
|
|
13
|
+
return "\n -webkit-font-smoothing: antialiased;\n\n /* Shared font/sizing for all .ant-input elements */\n & .ant-input, &.ant-input, &.ant-input-password {\n padding: ".concat(padding, ";\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n font-size: ").concat(TypographyStyles_1.FONT_SIZE.P1, ";\n color: ").concat(theme.color.base.onNeutral, ";\n line-height: 17px;\n height: ").concat(height, ";\n box-sizing: border-box;\n &::placeholder {\n color: ").concat(theme.color.component.placeholderInput, ";\n font-weight: 400;\n }\n }\n\n /* Case 1: Standalone input \u2014 class directly on .ant-input */\n &.ant-input, &.ant-input-password {\n border-radius: ").concat(borderRadius, " !important;\n border-color: ").concat(borderColor, ";\n height: ").concat(height, ";\n padding: ").concat(padding, ";\n &:hover:not(:disabled):not(.ant-input-affix-wrapper-disabled) { border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important; }\n &:focus {\n border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, ";\n box-shadow: none;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n }\n\n /* Case 2: Input with addon \u2014 class on .ant-input-group-wrapper */\n /* addonBefore: input is after addon \u2014 flat left, rounded right */\n & .ant-input-group > .ant-input:last-child {\n border-radius: 0 ").concat(borderRadius, " ").concat(borderRadius, " 0 !important;\n border-color: ").concat(borderColor, ";\n height: ").concat(height, ";\n &:hover:not(:disabled):not(.ant-input-affix-wrapper-disabled) { border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important; }\n &:focus {\n border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, ";\n box-shadow: none;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n }\n /* addonAfter: input is before addon \u2014 rounded left, flat right */\n & .ant-input-group > .ant-input:first-child {\n border-radius: ").concat(borderRadius, " 0 0 ").concat(borderRadius, " !important;\n border-color: ").concat(borderColor, ";\n height: ").concat(height, ";\n &:hover:not(:disabled):not(.ant-input-affix-wrapper-disabled) { border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important; }\n &:focus {\n border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, ";\n box-shadow: none;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n }\n\n /* Case 3: Input with prefix (e.g. Search without addon) \u2014 class on .ant-input-affix-wrapper */\n &.ant-input-affix-wrapper {\n border-radius: ").concat(borderRadius, " !important;\n border-color: ").concat(borderColor, ";\n height: ").concat(height, ";\n padding: ").concat(padding, ";\n &:hover:not(:disabled):not(.ant-input-affix-wrapper-disabled) { border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important; }\n & .ant-input {\n height: auto;\n padding: 0;\n border: none;\n border-radius: 0 !important;\n }\n }\n &.ant-input-affix-wrapper-focused {\n border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important;\n box-shadow: none;\n }\n\n /* Case 4: addon + prefix \u2014 class on .ant-input-group-wrapper */\n & .ant-input-group > .ant-input-affix-wrapper:last-child,\n & .ant-input-group > .ant-input-affix-wrapper:first-child {\n border-color: ").concat(borderColor, ";\n height: ").concat(height, ";\n padding: ").concat(padding, ";\n &:hover:not(:disabled):not(.ant-input-affix-wrapper-disabled) { border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important; }\n &.ant-input-affix-wrapper-focused {\n border-color: ").concat(error ? theme.color.status.critical : theme.color.base.primary2, " !important;\n box-shadow: none;\n }\n & .ant-input {\n height: auto;\n padding: 0;\n border: none;\n border-radius: 0 !important;\n box-shadow: none;\n &:hover, &:focus { border: none; box-shadow: none; }\n }\n }\n /* addonBefore + prefix \u2014 rounded right */\n & .ant-input-group > .ant-input-affix-wrapper:last-child {\n border-radius: 0 ").concat(borderRadius, " ").concat(borderRadius, " 0 !important;\n padding-left: 8px;\n }\n /* prefix + addonAfter \u2014 rounded left */\n & .ant-input-group > .ant-input-affix-wrapper:first-child {\n border-radius: ").concat(borderRadius, " 0 0 ").concat(borderRadius, " !important;\n }\n\n /* Disabled states */\n &.ant-input-disabled, & .ant-input-disabled {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n border-color: ").concat(theme.color.base.line, ";\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n -webkit-text-fill-color: ").concat(theme.color.surface.disabledOnSurface, ";\n &::placeholder {\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n -webkit-text-fill-color: ").concat(theme.color.surface.disabledOnSurface, ";\n }\n &:hover { border-color: ").concat(theme.color.base.line, " !important; }\n }\n &.ant-input-affix-wrapper-disabled {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n border-color: ").concat(theme.color.base.line, ";\n &:hover { border-color: ").concat(theme.color.base.line, " !important; }\n & .ant-input-disabled {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n -webkit-text-fill-color: ").concat(theme.color.surface.disabledOnSurface, ";\n &::placeholder {\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n -webkit-text-fill-color: ").concat(theme.color.surface.disabledOnSurface, ";\n }\n }\n }\n\n /* Addon containers */\n & .ant-input-group-addon:not(:last-child) {\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n color: ").concat(theme.color.base.onNeutral, ";\n background-color: ").concat(theme.color.surface.neutral, ";\n border-top-left-radius: ").concat(borderRadius, " !important;\n border-bottom-left-radius: ").concat(borderRadius, " !important;\n border-color: ").concat(borderColor, ";\n border-right: 0;\n padding-left: 12px;\n padding-right: 8px;\n &:has(.ant-select) {\n padding: 0;\n .ant-select-focused .ant-select-selector {\n border-color: transparent !important;\n box-shadow: none !important;\n }\n .ant-select-selector {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n height: 100%;\n }\n }\n &:has([data-addon-custom]) {\n background-color: ").concat(theme.color.surface.neutral, ";\n padding-left: 12px;\n padding-right: 8px;\n }\n + .ant-input-disabled {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n border-color: ").concat(theme.color.base.line, ";\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n &:hover { border-color: ").concat(theme.color.base.line, "; }\n }\n }\n & .ant-input-group-addon:last-child {\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n color: ").concat(theme.color.base.onNeutral, ";\n background-color: ").concat(theme.color.surface.neutral, ";\n border-top-right-radius: ").concat(borderRadius, " !important;\n border-bottom-right-radius: ").concat(borderRadius, " !important;\n border-color: ").concat(borderColor, ";\n border-left: 0;\n padding-left: 16px;\n padding-right: 16px;\n &:has(.ant-select) {\n padding: 0;\n .ant-select-focused .ant-select-selector {\n border-color: transparent !important;\n box-shadow: none !important;\n }\n .ant-select-selector {\n border: none !important;\n box-shadow: none !important;\n background: transparent !important;\n height: 100%;\n }\n }\n &:has([data-addon-custom]) {\n background-color: ").concat(theme.color.surface.neutral, ";\n padding-left: 8px;\n padding-right: 12px;\n }\n &:focus-within {\n border-color: ").concat(theme.color.base.primary2, " !important;\n border-left: 1px solid ").concat(theme.color.base.primary2, ";\n }\n }\n & .ant-input-group-addon:not(:last-child):focus-within {\n border-color: ").concat(theme.color.base.primary2, " !important;\n border-right: 1px solid ").concat(theme.color.base.primary2, ";\n }\n & .ant-input-group:has(.ant-input-group-addon:last-child:focus-within) > .ant-input:first-child,\n & .ant-input-group:has(.ant-input-group-addon:last-child:focus-within) > .ant-input-affix-wrapper:first-child {\n border-right: 0 !important;\n }\n & .ant-input-group:has(.ant-input-group-addon:not(:last-child):focus-within) > .ant-input:last-child,\n & .ant-input-group:has(.ant-input-group-addon:not(:last-child):focus-within) > .ant-input-affix-wrapper:last-child {\n border-left: 0 !important;\n }\n ").concat(disabledAddon
|
|
14
|
+
? "\n & .ant-input-group-addon:last-child {\n background-color: ".concat(theme.color.surface.disabledSurface, ";\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n pointer-events: none;\n cursor: not-allowed;\n border-color: ").concat(theme.color.base.line, ";\n border-left: 1px solid ").concat(theme.color.base.line, ";\n &:has([data-addon-custom]) {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n }\n }\n & .ant-input-group > .ant-input:first-child {\n border-right: 0;\n }\n & .ant-input-group > .ant-input-affix-wrapper:first-child {\n border-right: 0;\n }\n & .ant-input-group-addon:not(:last-child) {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n color: ").concat(theme.color.surface.disabledOnSurface, ";\n pointer-events: none;\n cursor: not-allowed;\n border-color: ").concat(theme.color.base.line, ";\n border-right: 1px solid ").concat(theme.color.base.line, ";\n &:has([data-addon-custom]) {\n background-color: ").concat(theme.color.surface.disabledSurface, ";\n }\n }\n & .ant-input-group > .ant-input:last-child {\n border-left: 0;\n }\n & .ant-input-group > .ant-input-affix-wrapper:last-child {\n border-left: 0;\n }\n ")
|
|
15
|
+
: '', "\n ");
|
|
24
16
|
}
|
|
25
17
|
//# sourceMappingURL=inputStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputStyles.js","sourceRoot":"","sources":["../../../src/components/Input/inputStyles.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"inputStyles.js","sourceRoot":"","sources":["../../../src/components/Input/inputStyles.ts"],"names":[],"mappings":"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"}
|
|
@@ -8,10 +8,6 @@ var react_1 = require("react");
|
|
|
8
8
|
var styled_1 = require("@emotion/styled");
|
|
9
9
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
10
10
|
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
11
|
-
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 48px;\n width: 100%;\n position: relative;\n"], ["\n display: flex;\n height: 48px;\n width: 100%;\n position: relative;\n"])));
|
|
12
|
-
var PrefixContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: 12px 0 0 12px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: 12px 0 0 12px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), function (p) { return p.borderColor; }, function (p) { return p.bgColor; }, function (p) { return p.textColor; }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (p) { return (p.isDisabled ? 'not-allowed' : 'default'); }, function (p) { return (p.isDisabled ? 'none' : 'auto'); }, function (p) { return (p.isDisabled ? p.bgColor : p.hoverBgColor); });
|
|
13
|
-
var StyledInput = styled_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: 12px 16px;\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: 12px 16px;\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"])), function (p) { return p.borderColor; }, function (p) { return (p.hasPrefix ? '0' : '12px 0 0 12px'); }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (p) { return (p.isDisabled ? p.disabledTextColor : p.textColor); }, function (p) { return (p.isDisabled ? p.disabledBgColor : 'transparent'); }, function (p) { return (p.isDisabled ? 'not-allowed' : 'text'); }, function (p) { return p.placeholderColor; }, function (p) { return (p.isDisabled ? p.borderColor : p.focusBorderColor); }, function (p) { return (p.isDisabled ? p.borderColor : p.focusBorderColor); });
|
|
14
|
-
var StyledButton = styled_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 12px 12px 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 12px 12px 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"])), function (p) { return (p.isDisabled ? p.disabledBgColor : p.bgColor); }, function (p) { return (p.isDisabled ? p.disabledTextColor : p.textColor); }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (p) { return (p.isDisabled ? 'not-allowed' : 'pointer'); }, function (p) { return (p.isDisabled ? 1 : 0.9); });
|
|
15
11
|
var InputWithButton = function (_a) {
|
|
16
12
|
var buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, prefix = _a.prefix, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.disabledInput, disabledInput = _c === void 0 ? false : _c, _d = _a.disabledPrefix, disabledPrefix = _d === void 0 ? false : _d, _e = _a.staticPrefix, staticPrefix = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, className = _a.className;
|
|
17
13
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
@@ -21,15 +17,44 @@ var InputWithButton = function (_a) {
|
|
|
21
17
|
? theme.color.status.critical
|
|
22
18
|
: theme.color.base.line;
|
|
23
19
|
var prefixBorderColor = theme.color.base.line;
|
|
20
|
+
var getPrefixBgColor = function () {
|
|
21
|
+
if (prefixDisabled)
|
|
22
|
+
return theme.color.surface.disabledSurface;
|
|
23
|
+
if (staticPrefix)
|
|
24
|
+
return theme.color.surface.secondaryNeutral;
|
|
25
|
+
return theme.color.surface.neutral;
|
|
26
|
+
};
|
|
24
27
|
return (react_1.default.createElement(Container, { className: className },
|
|
25
|
-
prefix && (react_1.default.createElement(PrefixContainer, { borderColor: prefixBorderColor, bgColor: prefixDisabled
|
|
28
|
+
prefix && (react_1.default.createElement(PrefixContainer, { borderColor: prefixBorderColor, bgColor: getPrefixBgColor(), hoverBgColor: prefixDisabled
|
|
26
29
|
? theme.color.surface.disabledSurface
|
|
27
|
-
:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
: theme.color.interactive.hoverSurface, textColor: prefixDisabled
|
|
31
|
+
? theme.color.surface.disabledOnSurface
|
|
32
|
+
: theme.color.base.onNeutral, isDisabled: prefixDisabled }, prefix)),
|
|
30
33
|
react_1.default.createElement(StyledInput, { type: "text", placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: onChange, disabled: inputDisabled, borderColor: borderColor, focusBorderColor: theme.color.base.primary2, textColor: theme.color.base.onNeutral, placeholderColor: theme.color.component.placeholderInput, disabledBgColor: theme.color.surface.disabledSurface, disabledTextColor: theme.color.surface.disabledOnSurface, hasPrefix: !!prefix, isDisabled: inputDisabled }),
|
|
31
34
|
react_1.default.createElement(StyledButton, { type: "button", onClick: onButtonClick, disabled: disabled || error, bgColor: theme.color.base.primary, disabledBgColor: theme.color.surface.disabledSurface, textColor: theme.color.base.onNeutral, disabledTextColor: theme.color.surface.disabledOnSurface, isDisabled: disabled || error }, buttonText)));
|
|
32
35
|
};
|
|
33
36
|
exports.default = InputWithButton;
|
|
37
|
+
// ─── Styled Components ───
|
|
38
|
+
var _a = TypographyStyles_1.SIZE_CONFIG.large, height = _a.height, borderRadius = _a.borderRadius, padding = _a.padding;
|
|
39
|
+
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: ", ";\n width: 100%;\n position: relative;\n"], ["\n display: flex;\n height: ", ";\n width: 100%;\n position: relative;\n"])), height);
|
|
40
|
+
var PrefixContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: ", " 0 0 ", ";\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: ", " 0 0 ", ";\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.borderColor; }, borderRadius, borderRadius, function (props) { return props.bgColor; }, function (props) { return props.textColor; }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? 'not-allowed' : 'default'); }, function (props) { return (props.isDisabled ? 'none' : 'auto'); }, function (props) {
|
|
41
|
+
return props.isDisabled ? props.bgColor : props.hoverBgColor;
|
|
42
|
+
});
|
|
43
|
+
var StyledInput = styled_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"])), padding, function (props) { return props.borderColor; }, function (props) {
|
|
44
|
+
return props.hasPrefix ? '0' : "".concat(borderRadius, " 0 0 ").concat(borderRadius);
|
|
45
|
+
}, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) {
|
|
46
|
+
return props.isDisabled ? props.disabledTextColor : props.textColor;
|
|
47
|
+
}, function (props) {
|
|
48
|
+
return props.isDisabled ? props.disabledBgColor : 'transparent';
|
|
49
|
+
}, function (props) { return (props.isDisabled ? 'not-allowed' : 'text'); }, function (props) { return props.placeholderColor; }, function (props) {
|
|
50
|
+
return props.isDisabled ? props.borderColor : props.focusBorderColor;
|
|
51
|
+
}, function (props) {
|
|
52
|
+
return props.isDisabled ? props.borderColor : props.focusBorderColor;
|
|
53
|
+
});
|
|
54
|
+
var StyledButton = styled_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 ", " ", " 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 ", " ", " 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"])), borderRadius, borderRadius, function (props) {
|
|
55
|
+
return props.isDisabled ? props.disabledBgColor : props.bgColor;
|
|
56
|
+
}, function (props) {
|
|
57
|
+
return props.isDisabled ? props.disabledTextColor : props.textColor;
|
|
58
|
+
}, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { return (props.isDisabled ? 1 : 0.9); });
|
|
34
59
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
35
60
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputWithButton/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputWithButton/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -35,7 +35,7 @@ function default_1(_a) {
|
|
|
35
35
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
36
36
|
var _d = inputStyles_1.SIZE_CONFIG[size], height = _d.height, borderRadius = _d.borderRadius, padding = _d.padding;
|
|
37
37
|
var style = "\n -webkit-font-smoothing: antialiased;\n height: ".concat(height, ";\n\n &.ant-picker {\n border-radius: ").concat(borderRadius, ";\n border-color: ").concat(theme.color.base.line, ";\n padding: ").concat(padding, ";\n transition: 0.3s all ease;\n\n &:hover {\n border-color: ").concat(theme.color.base.primary2, ";\n }\n\n &.ant-picker-focused {\n border-color: ").concat(theme.color.base.primary2, ";\n box-shadow: none;\n -webkit-box-shadow: none;\n }\n\n .ant-picker-active-bar {\n background: ").concat(theme.color.base.primary2, ";\n }\n }\n\n\n &.ant-picker > .ant-picker-input {\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n color: ").concat(theme.color.base.onNeutral, ";\n }\n\n & .ant-picker-input > input {\n color: ").concat(theme.color.base.onNeutral, ";\n }\n\n & .ant-picker-input > input::placeholder {\n color: ").concat(theme.color.component.placeholderInput, ";\n }\n ");
|
|
38
|
-
var dropdownStyle = "\n .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-end > .ant-picker-cell-inner {\n background-color: ".concat(theme.color.base.primary2, ";\n }\n\n .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-start > .ant-picker-cell-inner {\n background-color: ").concat(theme.color.base.primary2, ";\n }\n\n .ant-picker-cell.ant-picker-cell-in-view {\n &.ant-picker-cell-in-range::before {\n background-color: ").concat(theme.color.interactive.selected, ";\n }\n\n &.ant-picker-cell-range-end::before {\n background-color: ").concat(theme.color.interactive.selected, ";\n }\n\n &.ant-picker-cell-range-start::before {\n background-color: ").concat(theme.color.interactive.selected, ";\n }\n }
|
|
38
|
+
var dropdownStyle = "\n .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-end > .ant-picker-cell-inner {\n background-color: ".concat(theme.color.base.primary2, ";\n }\n\n .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-start > .ant-picker-cell-inner {\n background-color: ").concat(theme.color.base.primary2, ";\n }\n\n .ant-picker-cell.ant-picker-cell-in-view {\n &.ant-picker-cell-in-range::before {\n background-color: ").concat(theme.color.interactive.selected, ";\n }\n\n &.ant-picker-cell-range-end::before {\n background-color: ").concat(theme.color.interactive.selected, ";\n }\n\n &.ant-picker-cell-range-start::before {\n background-color: ").concat(theme.color.interactive.selected, ";\n }\n }\n ");
|
|
39
39
|
return (react_1.default.createElement(date_picker_1.default.RangePicker, __assign({ className: "".concat((0, emotion_1.css)(style)), format: format, dropdownClassName: (0, emotion_1.css)(dropdownStyle) }, rest)));
|
|
40
40
|
}
|
|
41
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RangePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RangePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBA,4BAoFC;AA7GD,+BAAyB;AACzB,mCAA6B;AAC7B,mDAA4C;AAC5C,yCAAsC;AACtC,gEAAuD;AACvD,uDAAiD;AACjD,oDAA6D;AAmB7D,mBAAyB,EAIjB;IAHN,IAAA,cAAqB,EAArB,MAAM,mBAAG,YAAY,KAAA,EACrB,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACX,IAAI,cAHgB,kBAIxB,CADQ;IAEP,IAAM,KAAK,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAClB,IAAA,KAAoC,yBAAW,CAAC,IAAI,CAAC,EAAnD,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAsB,CAAA;IAE3D,IAAM,KAAK,GAAG,kEAEF,MAAM,2DAGG,YAAY,oCACb,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,+BAC1B,OAAO,2FAIA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,+EAIzB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,6IAM3B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,+FAM1B,4BAAS,sIAKf,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,yEAI1B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,sFAI1B,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,iBAElD,CAAA;IAED,IAAM,aAAa,GAAG,uIAEE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,sJAIzB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,+IAKvB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,kGAIhC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,oGAIhC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,0BAGzD,CAAA;IAED,OAAO,CACL,8BAAC,qBAAU,CAAC,WAAW,aACrB,SAAS,EAAE,UAAG,IAAA,aAAG,EAAC,KAAK,CAAC,CAAE,EAC1B,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,IAAA,aAAG,EAAC,aAAa,CAAC,IACjC,IAAI,EACR,CACH,CAAA;AACH,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.SECONDARY_FONT = exports.MAIN_FONT = void 0;
|
|
3
|
+
exports.LINE_HEIGHT = exports.SIZE_CONFIG = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.SECONDARY_FONT = exports.MAIN_FONT = void 0;
|
|
4
4
|
exports.MAIN_FONT = 'Hanken Grotesk';
|
|
5
5
|
exports.SECONDARY_FONT = 'Red Hat Display';
|
|
6
6
|
exports.FALLBACK_FONT = 'Inter';
|
|
@@ -24,6 +24,18 @@ var FONT_SIZE;
|
|
|
24
24
|
FONT_SIZE["SMALL"] = "12px";
|
|
25
25
|
FONT_SIZE["SMALL_MOBILE"] = "14px";
|
|
26
26
|
})(FONT_SIZE || (exports.FONT_SIZE = FONT_SIZE = {}));
|
|
27
|
+
exports.SIZE_CONFIG = {
|
|
28
|
+
large: {
|
|
29
|
+
height: '48px',
|
|
30
|
+
borderRadius: '12px',
|
|
31
|
+
padding: '12px 16px',
|
|
32
|
+
},
|
|
33
|
+
small: {
|
|
34
|
+
height: '36px',
|
|
35
|
+
borderRadius: '8px',
|
|
36
|
+
padding: '8px 12px',
|
|
37
|
+
},
|
|
38
|
+
};
|
|
27
39
|
var LINE_HEIGHT;
|
|
28
40
|
(function (LINE_HEIGHT) {
|
|
29
41
|
LINE_HEIGHT["H1"] = "29px";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypographyStyles.js","sourceRoot":"","sources":["../../src/shared/TypographyStyles.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,gBAAgB,CAAA;AAC5B,QAAA,cAAc,GAAG,iBAAiB,CAAA;AAClC,QAAA,aAAa,GAAG,OAAO,CAAA;AAEpC,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAU,CAAA;IACV,mDAAY,CAAA;IACZ,qDAAa,CAAA;AACf,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB;AAED,IAAY,SAYX;AAZD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,2BAAc,CAAA;IACd,kCAAqB,CAAA;AACvB,CAAC,EAZW,SAAS,yBAAT,SAAS,QAYpB;AAED,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,6BAAc,CAAA;IACd,oCAAqB,CAAA;AACvB,CAAC,EAZW,WAAW,2BAAX,WAAW,QAYtB"}
|
|
1
|
+
{"version":3,"file":"TypographyStyles.js","sourceRoot":"","sources":["../../src/shared/TypographyStyles.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,gBAAgB,CAAA;AAC5B,QAAA,cAAc,GAAG,iBAAiB,CAAA;AAClC,QAAA,aAAa,GAAG,OAAO,CAAA;AAEpC,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAU,CAAA;IACV,mDAAY,CAAA;IACZ,qDAAa,CAAA;AACf,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB;AAED,IAAY,SAYX;AAZD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,2BAAc,CAAA;IACd,kCAAqB,CAAA;AACvB,CAAC,EAZW,SAAS,yBAAT,SAAS,QAYpB;AAIY,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,WAAW;KACrB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,UAAU;KACpB;CACF,CAAA;AAED,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,6BAAc,CAAA;IACd,oCAAqB,CAAA;AACvB,CAAC,EAZW,WAAW,2BAAX,WAAW,QAYtB"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
type HelperTextProps = {
|
|
2
3
|
text?: string;
|
|
3
4
|
error?: boolean;
|
|
4
5
|
};
|
|
5
|
-
export declare function HelperText({ text, error }: HelperTextProps):
|
|
6
|
+
export declare function HelperText({ text, error, }: HelperTextProps): React.ReactElement | null;
|
|
6
7
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
type InputLabelProps = {
|
|
2
3
|
label?: string;
|
|
3
4
|
required?: boolean;
|
|
@@ -6,5 +7,5 @@ type InputLabelProps = {
|
|
|
6
7
|
infoText?: string;
|
|
7
8
|
onInfoClick?: () => void;
|
|
8
9
|
};
|
|
9
|
-
export declare function InputLabel({ label, required, optional, showInfoIcon, infoText, onInfoClick, }: InputLabelProps):
|
|
10
|
+
export declare function InputLabel({ label, required, optional, showInfoIcon, infoText, onInfoClick, }: InputLabelProps): React.ReactElement | null;
|
|
10
11
|
export {};
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
borderRadius: string;
|
|
6
|
-
padding: string;
|
|
7
|
-
};
|
|
8
|
-
small: {
|
|
9
|
-
height: string;
|
|
10
|
-
borderRadius: string;
|
|
11
|
-
padding: string;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
export declare function getBaseInputStyle(theme: any, size?: InputSize, error?: boolean, disabledAddon?: boolean): string;
|
|
1
|
+
import { SIZE_CONFIG, InputSize } from 'src/shared/TypographyStyles';
|
|
2
|
+
import { straitsXTheme } from 'src/theme/theme';
|
|
3
|
+
export { SIZE_CONFIG, InputSize };
|
|
4
|
+
export declare function getBaseInputStyle(theme: typeof straitsXTheme, size?: InputSize, error?: boolean, disabledAddon?: boolean): string;
|
|
@@ -19,6 +19,19 @@ export declare enum FONT_SIZE {
|
|
|
19
19
|
SMALL = "12px",
|
|
20
20
|
SMALL_MOBILE = "14px"
|
|
21
21
|
}
|
|
22
|
+
export type InputSize = 'large' | 'small';
|
|
23
|
+
export declare const SIZE_CONFIG: {
|
|
24
|
+
large: {
|
|
25
|
+
height: string;
|
|
26
|
+
borderRadius: string;
|
|
27
|
+
padding: string;
|
|
28
|
+
};
|
|
29
|
+
small: {
|
|
30
|
+
height: string;
|
|
31
|
+
borderRadius: string;
|
|
32
|
+
padding: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
22
35
|
export declare enum LINE_HEIGHT {
|
|
23
36
|
H1 = "29px",
|
|
24
37
|
H1_MOBILE = "28px",
|