@xfers/design-system 4.5.0 → 4.6.0-dev.155be4f22f
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 +9 -9
- package/cjs/index.js.map +1 -1
- package/dist/components/DatePicker/index.js +18 -16
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/Input/HelperText.js +17 -0
- package/dist/components/Input/HelperText.js.map +1 -0
- package/dist/components/Input/InputLabel.js +43 -0
- package/dist/components/Input/InputLabel.js.map +1 -0
- package/dist/components/Input/index.js +39 -54
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Input/inputStyles.js +17 -0
- package/dist/components/Input/inputStyles.js.map +1 -0
- package/dist/components/InputWithButton/index.js +60 -0
- package/dist/components/InputWithButton/index.js.map +1 -0
- package/dist/components/RangePicker/index.js +7 -5
- package/dist/components/RangePicker/index.js.map +1 -1
- package/dist/components/Select/style.js +2 -2
- package/dist/components/Select/style.js.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/shared/TypographyStyles.js +13 -1
- package/dist/shared/TypographyStyles.js.map +1 -1
- package/dist/types/components/DatePicker/index.d.ts +8 -1
- package/dist/types/components/Input/HelperText.d.ts +7 -0
- package/dist/types/components/Input/InputLabel.d.ts +11 -0
- package/dist/types/components/Input/index.d.ts +29 -15
- package/dist/types/components/Input/inputStyles.d.ts +4 -0
- package/dist/types/components/InputWithButton/index.d.ts +18 -0
- package/dist/types/components/RangePicker/index.d.ts +3 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/shared/TypographyStyles.d.ts +13 -0
- package/es/{MintSetupWallet-d8dd9538.js → MintSetupWallet-16164339.js} +2 -2
- package/es/{MintSetupWallet-d8dd9538.js.map → MintSetupWallet-16164339.js.map} +1 -1
- package/es/icons.js +1 -1
- package/es/index.js +9 -9
- package/es/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -27,25 +27,27 @@ var react_1 = require("react");
|
|
|
27
27
|
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
|
-
var Typography_1 = require("src/components/Typography");
|
|
31
30
|
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
32
|
-
var
|
|
31
|
+
var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
|
|
33
32
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
34
|
-
var
|
|
33
|
+
var inputStyles_1 = require("../Input/inputStyles");
|
|
34
|
+
var InputLabel_1 = require("../Input/InputLabel");
|
|
35
|
+
var HelperText_1 = require("../Input/HelperText");
|
|
35
36
|
function default_1(_a) {
|
|
36
|
-
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, label = _a.label, _c = _a.required, required = _c === void 0 ? false : _c, rest = __rest(_a, ["disabled", "label", "required"]);
|
|
37
|
-
var
|
|
38
|
-
var
|
|
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
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
39
|
+
var _g = inputStyles_1.SIZE_CONFIG[size], height = _g.height, borderRadius = _g.borderRadius, padding = _g.padding;
|
|
40
|
+
var borderColor = error
|
|
41
|
+
? theme.color.status.critical
|
|
42
|
+
: theme.color.base.line;
|
|
43
|
+
var style = "\n -webkit-font-smoothing: antialiased;\n height: ".concat(height, ";\n width: 100%;\n\n ").concat(disabled
|
|
39
44
|
? "\n pointer-events: none;\n "
|
|
40
|
-
: '', "\n\n &.ant-picker {\n border-radius:
|
|
41
|
-
var dropdownStyle = "\n .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner{\n background-color: ".concat(
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
label,
|
|
48
|
-
required && react_1.default.createElement(Asterisk, null))),
|
|
49
|
-
react_1.default.createElement(date_picker_1.default, __assign({ className: "".concat((0, emotion_1.css)(style)), dropdownClassName: (0, emotion_1.css)(dropdownStyle), disabled: disabled }, rest))));
|
|
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.base.onNeutral, ";\n -webkit-text-fill-color: ").concat(theme.color.base.onNeutral, ";\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 ");
|
|
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 ");
|
|
47
|
+
var calendarIcon = (react_1.default.createElement(MaterialSymbols_1.default, { icon: "date_range", size: "m", color: theme.color.base.onNeutral }));
|
|
48
|
+
return (react_1.default.createElement("div", null,
|
|
49
|
+
react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, onInfoClick: onInfoClick }),
|
|
50
|
+
react_1.default.createElement(date_picker_1.default, __assign({ className: "".concat((0, emotion_1.css)(style)), dropdownClassName: (0, emotion_1.css)(dropdownStyle), disabled: disabled, suffixIcon: calendarIcon, format: "DD-MM-YYYY" }, rest)),
|
|
51
|
+
react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
|
|
50
52
|
}
|
|
51
53
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,4BA8HC;AA/JD,+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,IAAI,CAAC,SAAS,+CACR,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,6JAMjC,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,EACxB,MAAM,EAAC,YAAY,IACf,IAAI,EACR;QACF,8BAAC,uBAAU,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAC1C,CACP,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.HelperText = HelperText;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
6
|
+
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
7
|
+
function HelperText(_a) {
|
|
8
|
+
var text = _a.text, error = _a.error;
|
|
9
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
10
|
+
if (!text)
|
|
11
|
+
return null;
|
|
12
|
+
var color = error
|
|
13
|
+
? theme.color.status.critical
|
|
14
|
+
: theme.color.component.helperInput;
|
|
15
|
+
return (react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: color, marginTop: 4 } }, text));
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=HelperText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.InputLabel = InputLabel;
|
|
8
|
+
var react_1 = require("react");
|
|
9
|
+
var styled_1 = require("@emotion/styled");
|
|
10
|
+
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
11
|
+
var icons_1 = require("src/icons");
|
|
12
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
13
|
+
var Tooltip_1 = require("src/components/Tooltip");
|
|
14
|
+
function InputLabel(_a) {
|
|
15
|
+
var label = _a.label, required = _a.required, optional = _a.optional, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick;
|
|
16
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
17
|
+
if (!label)
|
|
18
|
+
return null;
|
|
19
|
+
return (react_1.default.createElement(LabelContainer, null,
|
|
20
|
+
react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: theme.color.base.onNeutral } },
|
|
21
|
+
label,
|
|
22
|
+
required && (react_1.default.createElement("span", { style: { color: theme.error.text, marginLeft: 2 } }, "*"))),
|
|
23
|
+
optional && (react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: theme.color.base.onNeutralSecondary } }, "Optional")),
|
|
24
|
+
showInfoIcon && infoText && (react_1.default.createElement(Tooltip_1.default, { content: infoText, placement: "top" },
|
|
25
|
+
react_1.default.createElement("span", { role: "button", tabIndex: 0, "aria-label": "More information", onClick: onInfoClick, onKeyDown: function (e) {
|
|
26
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
onInfoClick === null || onInfoClick === void 0 ? void 0 : onInfoClick();
|
|
29
|
+
}
|
|
30
|
+
}, style: { display: 'inline-flex', cursor: 'pointer' } },
|
|
31
|
+
react_1.default.createElement(icons_1.Info, { style: { width: 16, height: 16 } })))),
|
|
32
|
+
showInfoIcon && !infoText && (react_1.default.createElement("span", { role: "button", tabIndex: 0, "aria-label": "More information", onClick: onInfoClick, onKeyDown: function (e) {
|
|
33
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
34
|
+
e.preventDefault();
|
|
35
|
+
onInfoClick === null || onInfoClick === void 0 ? void 0 : onInfoClick();
|
|
36
|
+
}
|
|
37
|
+
}, style: { display: 'inline-flex', cursor: 'pointer' } },
|
|
38
|
+
react_1.default.createElement(icons_1.Info, { style: { width: 16, height: 16 } })))));
|
|
39
|
+
}
|
|
40
|
+
// ─── Styled Components ───
|
|
41
|
+
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"])));
|
|
42
|
+
var templateObject_1;
|
|
43
|
+
//# sourceMappingURL=InputLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../../src/components/Input/InputLabel.tsx"],"names":[],"mappings":";;;;;;AAgBA,gCAkEC;AAlFD,+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,wCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACA,kBAAkB,EAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAC,CAAC;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,WAAW,aAAX,WAAW,uBAAX,WAAW,EAAI,CAAA;oBACjB,CAAC;gBACH,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE;gBAEpD,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI,CACrC,CACC,CACX;QACA,YAAY,IAAI,CAAC,QAAQ,IAAI,CAC5B,wCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACA,kBAAkB,EAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAC,CAAC;gBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,WAAW,aAAX,WAAW,uBAAX,WAAW,EAAI,CAAA;gBACjB,CAAC;YACH,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE;YAEpD,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI,CACrC,CACR,CACc,CAClB,CAAA;AACH,CAAC;AAED,4BAA4B;AAE5B,IAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,qJAAA,kFAKhC,IAAA,CAAA"}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
2
|
var __assign = (this && this.__assign) || function () {
|
|
7
3
|
__assign = Object.assign || function(t) {
|
|
8
4
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -28,67 +24,56 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
28
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
25
|
var react_1 = require("react");
|
|
30
26
|
var emotion_1 = require("emotion");
|
|
31
|
-
var styled_1 = require("@emotion/styled");
|
|
32
27
|
var input_1 = require("antd/es/input");
|
|
33
|
-
var Typography_1 = require("src/components/Typography");
|
|
34
|
-
var Link_1 = require("src/components/Link");
|
|
35
28
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
36
|
-
var
|
|
29
|
+
var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
|
|
30
|
+
var inputStyles_1 = require("./inputStyles");
|
|
31
|
+
var HelperText_1 = require("./HelperText");
|
|
32
|
+
var InputLabel_1 = require("./InputLabel");
|
|
37
33
|
require("antd/es/input/style/css");
|
|
38
|
-
// deprecated constants
|
|
39
|
-
var ColorStyles_1 = require("src/shared/ColorStyles");
|
|
40
|
-
var theme_1 = require("src/theme/theme");
|
|
41
|
-
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
42
|
-
var style = "\n -webkit-font-smoothing: antialiased;\n\n & .ant-input, &.ant-input, &.ant-input-password {\n padding: 0;\n font-family: ".concat(TypographyStyles_1.MAIN_FONT, ";\n font-size: ").concat(TypographyStyles_1.FONT_SIZE.P1, ";\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, ";\n line-height: 17px;\n padding-left: 15px;\n padding-top: 12px;\n padding-bottom: 13px;\n\n &::placeholder {\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G400, ";\n font-weight: 400;\n }\n }\n\n &.ant-input, &.ant-input-password {\n border-radius: 5px;\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n\n &:hover {\n border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n }\n\n &:focus {\n border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n -webkit-box-shadow: 0 0 0 3px #F0FFF9;\n box-shadow: 0 0 0 3px #F0FFF9;\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, "\n }\n }\n\n & .ant-input, .ant-input-password {\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n\n &:hover {\n border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n }\n\n &:focus {\n border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n -webkit-box-shadow: 0 0 0 3px #F0FFF9;\n box-shadow: 0 0 0 3px #F0FFF9;\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, "\n }\n }\n\n &.ant-input-disabled {\n background-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G100, ";\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n\n &:hover {\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n }\n }\n\n & .ant-input-group-addon:not(:last-child) {\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, ";\n background-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G100, ";\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n border-right: 0;\n padding-left: 15px;\n padding-right: 15px;\n\n + .ant-input-disabled {\n background-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G100, ";\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G400, ";\n\n &:hover {\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n }\n }\n }\n\n & .ant-input-group-addon:last-child {\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n }\n\n &.ant-input-search {\n padding: 0;\n font-family: ").concat(TypographyStyles_1.MAIN_FONT, ";\n font-size: ").concat(TypographyStyles_1.FONT_SIZE.P1, ";\n line-height: 17px;\n padding-left: 15px;\n padding-top: 6px;\n padding-bottom: 6px;\n border-radius: 5px;\n border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n width: 132px;\n\n &::placeholder {\n color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G400, ";\n font-weight: 400;\n }\n\n &:hover {\n border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n }\n\n & > .ant-input-suffix {\n width: 18px;\n margin-right: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n &.ant-input-affix-wrapper-focused {\n border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n -webkit-box-shadow: 0 0 0 3px #F0FFF9;\n box-shadow: 0 0 0 3px #F0FFF9;\n }\n");
|
|
43
|
-
var Asterisk = function () {
|
|
44
|
-
var error = (0, ThemeContext_1.useTheme)().error;
|
|
45
|
-
return react_1.default.createElement("span", { style: { color: error.text, marginLeft: 2 } }, "*");
|
|
46
|
-
};
|
|
47
|
-
var OptionalText = function () {
|
|
48
|
-
return (react_1.default.createElement(Typography_1.SmallP, { style: { color: ColorStyles_1.NEUTRAL_COLORS.G500, marginLeft: 3 } }, "Optional"));
|
|
49
|
-
};
|
|
50
|
-
var Label = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 5px;\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 5px;\n"])));
|
|
51
34
|
var MainInput = function (_a) {
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
react_1.default.createElement(input_1.default, __assign({ className: "".concat((0, emotion_1.css)(style), " ").concat(className), addonBefore: addonBefore, placeholder: placeholder, disabled: disabled }, rest))));
|
|
35
|
+
var addonBefore = _a.addonBefore, addonAfter = _a.addonAfter, _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.disabledAddon, disabledAddon = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, label = _a.label, required = _a.required, _f = _a.optional, optional = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, helperText = _a.helperText, error = _a.error, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick, rest = __rest(_a, ["addonBefore", "addonAfter", "placeholder", "disabled", "disabledAddon", "className", "label", "required", "optional", "size", "helperText", "error", "showInfoIcon", "infoText", "onInfoClick"]);
|
|
36
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
37
|
+
var style = (0, inputStyles_1.getBaseInputStyle)(theme, size, error, disabledAddon);
|
|
38
|
+
return (react_1.default.createElement("div", null,
|
|
39
|
+
react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
|
|
40
|
+
react_1.default.createElement(input_1.default, __assign({ className: "".concat((0, emotion_1.css)(style), " ").concat(className), addonBefore: addonBefore, addonAfter: addonAfter, placeholder: placeholder, disabled: disabled }, rest)),
|
|
41
|
+
react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
|
|
60
42
|
};
|
|
61
43
|
MainInput.Password = function (_a) {
|
|
62
|
-
var _b = _a.addonBefore, addonBefore = _b === void 0 ? '' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, label = _a.label, required = _a.required, rest = __rest(_a, ["addonBefore", "placeholder", "disabled", "className", "label", "required"]);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
react_1.default.createElement(
|
|
44
|
+
var _b = _a.addonBefore, addonBefore = _b === void 0 ? '' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, label = _a.label, required = _a.required, _f = _a.optional, optional = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, helperText = _a.helperText, error = _a.error, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick, rest = __rest(_a, ["addonBefore", "placeholder", "disabled", "className", "label", "required", "optional", "size", "helperText", "error", "showInfoIcon", "infoText", "onInfoClick"]);
|
|
45
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
46
|
+
var style = (0, inputStyles_1.getBaseInputStyle)(theme, size, error);
|
|
47
|
+
return (react_1.default.createElement("div", null,
|
|
48
|
+
react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
|
|
49
|
+
react_1.default.createElement(input_1.default.Password, __assign({ className: "".concat((0, emotion_1.css)(style), " ").concat(className), addonBefore: addonBefore, placeholder: placeholder, disabled: disabled, visibilityToggle: true }, rest)),
|
|
50
|
+
react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
|
|
69
51
|
};
|
|
70
52
|
MainInput.Search = function (_a) {
|
|
71
|
-
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, rest = __rest(_a, ["addonBefore", "placeholder", "className", "onChange", "onSearch"]);
|
|
72
|
-
var
|
|
73
|
-
var searchStyle = "\n & .ant-input-group-addon:not(:last-child) {\n
|
|
74
|
-
return (react_1.default.createElement(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
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
|
+
return (react_1.default.createElement("div", 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: {
|
|
58
|
+
display: 'flex',
|
|
59
|
+
cursor: onSearch ? 'pointer' : 'default',
|
|
60
|
+
} },
|
|
61
|
+
react_1.default.createElement(MaterialSymbols_1.default, { icon: "search", size: size === 'small' ? 'xs' : 'm', color: theme.color.base.onNeutral })) }, rest)),
|
|
62
|
+
react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
|
|
79
63
|
};
|
|
80
64
|
MainInput.TextArea = function (_a) {
|
|
81
|
-
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, rest = __rest(_a, ["className", "label", "required", "optional"]);
|
|
82
|
-
var
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
react_1.default.createElement(
|
|
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"]);
|
|
66
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
67
|
+
var borderColor = error
|
|
68
|
+
? theme.color.status.critical
|
|
69
|
+
: theme.color.base.line;
|
|
70
|
+
var _f = inputStyles_1.SIZE_CONFIG[size], borderRadius = _f.borderRadius, padding = _f.padding;
|
|
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 ");
|
|
72
|
+
return (react_1.default.createElement("div", null,
|
|
73
|
+
react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
|
|
74
|
+
react_1.default.createElement(input_1.default.TextArea, __assign({ className: "".concat((0, emotion_1.css)(textAreaStyle), " ").concat(className) }, rest)),
|
|
75
|
+
react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
|
|
90
76
|
};
|
|
91
77
|
MainInput.Group = input_1.default.Group;
|
|
92
78
|
exports.default = MainInput;
|
|
93
|
-
var templateObject_1;
|
|
94
79
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SIZE_CONFIG = void 0;
|
|
4
|
+
exports.getBaseInputStyle = getBaseInputStyle;
|
|
5
|
+
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
6
|
+
Object.defineProperty(exports, "SIZE_CONFIG", { enumerable: true, get: function () { return TypographyStyles_1.SIZE_CONFIG; } });
|
|
7
|
+
function getBaseInputStyle(theme, size, error, disabledAddon) {
|
|
8
|
+
if (size === void 0) { size = 'large'; }
|
|
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.base.onNeutral, ";\n -webkit-text-fill-color: ").concat(theme.color.base.onNeutral, ";\n &::placeholder {\n color: ").concat(theme.color.component.placeholderInput, ";\n -webkit-text-fill-color: ").concat(theme.color.component.placeholderInput, ";\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.base.onNeutral, ";\n -webkit-text-fill-color: ").concat(theme.color.base.onNeutral, ";\n &::placeholder {\n color: ").concat(theme.color.component.placeholderInput, ";\n -webkit-text-fill-color: ").concat(theme.color.component.placeholderInput, ";\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: 4px;\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.base.onNeutral, ";\n -webkit-text-fill-color: ").concat(theme.color.base.onNeutral, ";\n &::placeholder {\n color: ").concat(theme.color.component.placeholderInput, ";\n -webkit-text-fill-color: ").concat(theme.color.component.placeholderInput, ";\n }\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: 4px;\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 &:hover {\n background-color: ").concat(theme.color.interactive.hoverSurface, ";\n border-color: ").concat(theme.color.base.line, ";\n border-left: 1px solid ").concat(theme.color.base.line, ";\n }\n &:focus-within {\n background-color: ").concat(theme.color.surface.neutral, ";\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):hover {\n background-color: ").concat(theme.color.interactive.hoverSurface, ";\n border-color: ").concat(theme.color.base.line, ";\n border-right: 1px solid ").concat(theme.color.base.line, ";\n }\n & .ant-input-group-addon:not(:last-child):focus-within {\n background-color: ").concat(theme.color.surface.neutral, ";\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:hover) > .ant-input:first-child,\n & .ant-input-group:has(.ant-input-group-addon:last-child:hover) > .ant-input-affix-wrapper:first-child {\n border-right: 0 !important;\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):hover) > .ant-input:last-child,\n & .ant-input-group:has(.ant-input-group-addon:not(:last-child):hover) > .ant-input-affix-wrapper:last-child {\n border-left: 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.base.onNeutral, ";\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.base.onNeutral, ";\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 ");
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=inputStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inputStyles.js","sourceRoot":"","sources":["../../../src/components/Input/inputStyles.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
var react_1 = require("react");
|
|
8
|
+
var styled_1 = require("@emotion/styled");
|
|
9
|
+
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
10
|
+
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
11
|
+
var InputWithButton = function (_a) {
|
|
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;
|
|
13
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
14
|
+
var inputDisabled = disabled || disabledInput;
|
|
15
|
+
var prefixDisabled = disabled || disabledPrefix;
|
|
16
|
+
var borderColor = error
|
|
17
|
+
? theme.color.status.critical
|
|
18
|
+
: theme.color.base.line;
|
|
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
|
+
};
|
|
27
|
+
return (react_1.default.createElement(Container, { className: className },
|
|
28
|
+
prefix && (react_1.default.createElement(PrefixContainer, { borderColor: prefixBorderColor, bgColor: getPrefixBgColor(), hoverBgColor: prefixDisabled
|
|
29
|
+
? theme.color.surface.disabledSurface
|
|
30
|
+
: theme.color.interactive.hoverSurface, textColor: prefixDisabled
|
|
31
|
+
? theme.color.surface.disabledOnSurface
|
|
32
|
+
: theme.color.base.onNeutral, isDisabled: prefixDisabled }, prefix)),
|
|
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 }),
|
|
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)));
|
|
35
|
+
};
|
|
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); });
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
60
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputWithButton/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,12 +28,14 @@ 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
|
|
32
|
-
var
|
|
31
|
+
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
32
|
+
var inputStyles_1 = require("../Input/inputStyles");
|
|
33
33
|
function default_1(_a) {
|
|
34
|
-
var _b = _a.format, format = _b === void 0 ? 'DD
|
|
35
|
-
var
|
|
36
|
-
var
|
|
34
|
+
var _b = _a.format, format = _b === void 0 ? 'DD-MM-YYYY' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["format", "size"]);
|
|
35
|
+
var theme = (0, ThemeContext_1.useTheme)();
|
|
36
|
+
var _d = inputStyles_1.SIZE_CONFIG[size], height = _d.height, borderRadius = _d.borderRadius, padding = _d.padding;
|
|
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 }\n ");
|
|
37
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)));
|
|
38
40
|
}
|
|
39
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RangePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;
|
|
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"}
|
|
@@ -32,12 +32,12 @@ var selectHoverFocusStyles = function (props) { return "\n &:hover .ant-select-
|
|
|
32
32
|
"\n box-shadow: 0 0 0 1px ".concat(theme_1.straitsXTheme.color.base.onNeutral, "20 !important;\n border: 1px solid ").concat(props.error
|
|
33
33
|
? theme_1.straitsXTheme.color.status.critical
|
|
34
34
|
: theme_1.straitsXTheme.color.base.primary2, " !important;\n "), "\n }\n"); };
|
|
35
|
-
var selectPlaceholderStyles = "\n .ant-select-selection-placeholder {\n
|
|
35
|
+
var selectPlaceholderStyles = "\n .ant-select-selection-placeholder {\n display: flex;\n align-items: center;\n \n span {\n color: ".concat(theme_1.straitsXTheme.color.component.placeholderInput, " !important;\n }\n }\n");
|
|
36
36
|
var selectOverflowStyles = function (props) { return "\n .ant-select-selection-overflow {\n gap: 8px;\n ".concat(props.$mode === 'multiple' ? 'flex-wrap: wrap !important;' : '', "\n ").concat(props.$mode === 'multiple' ? 'align-content: center !important;' : '', "\n }\n"); };
|
|
37
37
|
var selectSelectedItemStyles = "\n .ant-select-selection-item {\n display: flex !important;\n align-items: center !important;\n color: ".concat(theme_1.straitsXTheme.color.base.onNeutral, " !important;\n }\n");
|
|
38
38
|
var selectArrowStyles = "\n .ant-select-arrow {\n display: flex !important;\n align-items: center !important;\n gap: 8px !important;\n width: auto !important;\n align-self: center !important;\n \n span {\n color: ".concat(theme_1.straitsXTheme.color.base.onNeutral, " !important;\n }\n }\n");
|
|
39
39
|
exports.StyledAntSelect = (0, styled_1.default)(select_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n"])), function (props) { return selectSelectorStyles(props); }, function (props) { return selectHoverFocusStyles(props); }, selectPlaceholderStyles, function (props) { return selectOverflowStyles(props); }, selectSelectedItemStyles, selectArrowStyles);
|
|
40
|
-
var dropdownBaseItemStyles = "\n .ant-select-item {\n color: ".concat(theme_1.straitsXTheme.color.base.onNeutral, " !important;\n padding: 12px !important;\n }\n");
|
|
40
|
+
var dropdownBaseItemStyles = "\n .rc-virtual-list-holder-inner {\n gap: 4px;\n }\n .ant-select-item {\n color: ".concat(theme_1.straitsXTheme.color.base.onNeutral, " !important;\n padding: 12px !important;\n }\n");
|
|
41
41
|
var dropdownSelectedOptionStyles = "\n .ant-select-item-option-selected {\n background: #d7efe2 !important;\n position: relative !important;\n \n .anticon {\n display: none !important;\n }\n \n &::after {\n content: 'check' !important;\n font-family: 'Material Symbols Rounded' !important;\n color: ".concat(theme_1.straitsXTheme.color.status.positive, " !important;\n position: absolute !important;\n right: 12px !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n font-size: 16px !important;\n }\n }\n");
|
|
42
42
|
var dropdownInteractiveStyles = "\n .ant-select-item:hover {\n background: ".concat(theme_1.straitsXTheme.color.interactive.hoverSurface, " !important;\n }\n \n .ant-select-item:active {\n background: ").concat(theme_1.straitsXTheme.color.interactive.pressedSurface, " !important;\n }\n");
|
|
43
43
|
var dropdownDisabledOptionStyles = "\n .ant-select-item-option-disabled,\n .ant-select-item-option-disabled:hover {\n background: ".concat(theme_1.straitsXTheme.color.surface.disabledSurface, " !important;\n span { \n color: ").concat(theme_1.straitsXTheme.color.surface.disabledOnSurface, " !important;\n }\n }\n");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Select/style.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAAoC;AACpC,yCAAsC;AACtC,yCAA+C;AAElC,QAAA,cAAc,GAAG,gBAAM,CAAC,GAAG,8LAAA,2HAQvC,KAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,8HAAA,2DAIxC,KAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,sKAAA,mGAMxC,KAAA;AAED,IAAM,oBAAoB,GAAG,UAAC,KAK7B;IACC,uEAAuE;IACvE,gFAAgF;IAChF,gFAAgF;IAChF,IAAM,kBAAkB,GAAG;QACzB,IAAI,KAAK,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QAC7C,CAAC;QACD,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;IACD,IAAM,eAAe,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,0DAEa,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,qGAGxC,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,wCACxD,eAAe,kDAEZ,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,+BAClD,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAW,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,iBAAc,CAAC,CAAC,CAAC,0BAA0B,iCAGzH,KAAK,CAAC,QAAQ;QACZ,CAAC,CAAC,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;QAC7C,CAAC,CAAC,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,mDAIvC,KAAK,CAAC,KAAK;QACT,CAAC,CAAC,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,CAAC,CAAC,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,wBAGtC,CAAA;AACD,CAAC,CAAA;AAED,IAAM,sBAAsB,GAAG,UAAC,KAG/B,IAAK,OAAA,gGAIA,CAAC,KAAK,CAAC,QAAQ;IACf,wCACwB,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,qDAExD,KAAK,CAAC,KAAK;QACT,CAAC,CAAC,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,CAAC,CAAC,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,uBAExC,YAGJ,EAfK,CAeL,CAAA;AAED,IAAM,uBAAuB,GAAG,
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Select/style.ts"],"names":[],"mappings":"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"}
|