@xfers/design-system 4.5.0-dev.46c0ad3276 → 4.5.0-dev.9b4ee84bdd

package/dist/components/DatePicker/index.js

@@ -27,25 +27,25 @@ var react_1 = require("react");
 var emotion_1 = require("emotion");
 var date_picker_1 = require("antd/es/date-picker");
 require("antd/es/date-picker/style/css");
-var Typography_1 = require("src/components/Typography");
 var TypographyStyles_1 = require("src/shared/TypographyStyles");
-var ColorStyles_1 = require("src/shared/ColorStyles");
 var ThemeContext_1 = require("src/theme/ThemeContext");
-var theme_1 = require("src/theme/theme");
+var inputStyles_1 = require("../Input/inputStyles");
+var InputLabel_1 = require("../Input/InputLabel");
+var HelperText_1 = require("../Input/HelperText");
+var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
 function default_1(_a) {
-    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"]);
-    var _d = (0, ThemeContext_1.useTheme)(), error = _d.error, spacing = _d.spacing;
-    var style = "\n    -webkit-font-smoothing: antialiased;\n    height: 44px;\n    width: 100%;\n\n    ".concat(disabled
+    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"]);
+    var theme = (0, ThemeContext_1.useTheme)();
+    var _g = inputStyles_1.SIZE_CONFIG[size], height = _g.height, borderRadius = _g.borderRadius, padding = _g.padding;
+    var borderColor = error ? theme.color.status.critical : theme.color.base.line;
+    var style = "\n    -webkit-font-smoothing: antialiased;\n    height: ".concat(height, ";\n    width: 100%;\n\n    ").concat(disabled
         ? "\n      pointer-events: none;\n      "
-        : '', "\n\n    &.ant-picker {\n      border-radius: 5px;\n      border-color: #E8E8E8;\n      transition: 0.3s all ease;\n\n      &:hover {\n        border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, " !important;\n      }\n\n      &.ant-picker-focused {\n        border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, " !important;\n        box-shadow: 0 0 0 2px ").concat(theme_1.straitsXTheme.brand.primary.background, " !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: #121212;\n    }\n\n    & .ant-picker-input > input {\n      font-size: 14px;\n      color: #121212;\n    }\n\n    & .ant-picker-input > input::placeholder {\n      font-size: 14px;\n      color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G400, ";\n    }\n\n    &.ant-picker.ant-picker-disabled {\n      background: ").concat(ColorStyles_1.NEUTRAL_COLORS.G100, ";\n      border: 1px solid ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\n    }\n\n    & .ant-picker-input > input[disabled] {\n      color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, ";\n    }\n\n    & .ant-picker-cell-in-view{\n      &.ant-picker-cell-today .ant-picker-cell-inner{\n        &:before {\n          border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\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_1.straitsXTheme.brand.primary.background, ";\n      }\n    }\n  ");
-    var dropdownStyle = "\n    .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner{\n      background-color: ".concat(theme_1.straitsXTheme.brand.primary.default, ";\n    }\n  ");
-    var Asterisk = function () {
-        return react_1.default.createElement("span", { style: { color: error.text, marginLeft: 2 } }, "*");
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(Typography_1.P1Bold, { style: { display: 'flex', marginBottom: spacing.xs } },
-            label,
-            required && react_1.default.createElement(Asterisk, null))),
-        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))));
+        : '', "\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  ");
+    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  ");
+    var calendarIcon = (react_1.default.createElement(MaterialSymbols_1.default, { icon: "date_range", size: "m", color: theme.color.base.onNeutral }));
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, onInfoClick: onInfoClick }),
+        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 }, rest)),
+        react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
 }
 //# sourceMappingURL=index.js.map

package/dist/components/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,4BA2GC;AArID,+BAAyB;AACzB,mCAA6B;AAC7B,mDAA4C;AAC5C,yCAAsC;AACtC,wDAAkD;AAClD,gEAAuD;AACvD,sDAAuD;AACvD,uDAAiD;AACjD,yCAA+C;AAkB/C,mBAAwB,EAKhB;IAJN,IAAA,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EACb,IAAI,cAJe,iCAKvB,CADQ;IAED,IAAA,KAAqB,IAAA,uBAAQ,GAAE,EAA7B,KAAK,WAAA,EAAE,OAAO,aAAe,CAAA;IAErC,IAAM,KAAK,GAAG,iGAMV,QAAQ;QACN,CAAC,CAAC,uCAEH;QACC,CAAC,CAAC,EAAE,yKASY,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,0FAInC,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,yDAEjD,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,wGAM3B,4BAAS,yUAef,4BAAc,CAAC,IAAI,mFAId,4BAAc,CAAC,IAAI,wCACb,4BAAc,CAAC,IAAI,mFAI9B,4BAAc,CAAC,KAAK,6JAMT,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,2OAOvC,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,0BAGzD,CAAA;IAED,IAAM,aAAa,GAAG,mHAEE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,iBAE1D,CAAA;IAED,IAAM,QAAQ,GAAG;QACf,OAAO,wCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,QAAU,CAAA;IACpE,CAAC,CAAA;IAED,OAAO,CACL;QACG,KAAK,IAAI,CACR,8BAAC,mBAAM,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,EAAE;YACzD,KAAK;YACL,QAAQ,IAAI,8BAAC,QAAQ,OAAG,CAClB,CACV;QACD,8BAAC,qBAAU,aACT,SAAS,EAAE,UAAG,IAAA,aAAG,EAAC,KAAK,CAAC,CAAE,EAC1B,iBAAiB,EAAE,IAAA,aAAG,EAAC,aAAa,CAAC,EACrC,QAAQ,EAAE,QAAQ,IACd,IAAI,EACR,CACD,CACJ,CAAA;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,4BA0HC;AA3JD,+BAAyB;AACzB,mCAA6B;AAC7B,mDAA4C;AAC5C,yCAAsC;AACtC,gEAAuD;AACvD,uDAAiD;AACjD,oDAA6D;AAC7D,kDAAgD;AAChD,kDAAgD;AAChD,6EAAuE;AAwBvE,mBAAwB,EAWhB;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,cAVe,2GAWvB,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,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;IAE/E,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,2OAO7B,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"}

package/dist/components/DynamicSelect/DynamicSelect.js

@@ -61,13 +61,13 @@ menu, _a) {
                 iconSrc: iconSrc,
                 extraText: extraText,
                 extraAction: extraAction,
-                isAddItemBarVisible: isAddItemBarVisible
+                isAddItemBarVisible: isAddItemBarVisible,
             }),
         bottomContent));
 };
 var DynamicSelect = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.disabled, disabled = _c === void 0 ? false : _c, mode = _a.mode, label = _a.label, _d = _a.iconSrc, iconSrc = _d === void 0 ? '' : _d, _e = _a.extraText, extraText = _e === void 0 ? '' : _e, _f = _a.extraAction, extraAction = _f === void 0 ? function () { } : _f, _g = _a.isAddItemBarVisible, isAddItemBarVisible = _g === void 0 ? true : _g, _h = _a.topContent, topContent = _h === void 0 ? null : _h, _j = _a.bottomContent, bottomContent = _j === void 0 ? null : _j, _k = _a.actionContent, actionContent = _k === void 0 ? null : _k, rest = __rest(_a, ["className", "children", "disabled", "mode", "label", "iconSrc", "extraText", "extraAction", "isAddItemBarVisible", "topContent", "bottomContent", "actionContent"]);
-    return (react_1.default.createElement(Select_1.default, __assign({ className: className, type: "dropdown", disabled: disabled, mode: mode, label: label, dropdownRender: function (menu) {
+    return (react_1.default.createElement(Select_1.default, __assign({ className: className, disabled: disabled, mode: mode, label: label, dropdownRender: function (menu) {
             return ExtraElement(menu, {
                 iconSrc: iconSrc,
                 extraText: extraText,
@@ -75,7 +75,7 @@ var DynamicSelect = function (_a) {
                 isAddItemBarVisible: isAddItemBarVisible,
                 topContent: topContent,
                 bottomContent: bottomContent,
-                actionContent: actionContent
+                actionContent: actionContent,
             });
         } }, rest), children));
 };

package/dist/components/DynamicSelect/DynamicSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicSelect.js","sourceRoot":"","sources":["../../../src/components/DynamicSelect/DynamicSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DynamicSelect.js","sourceRoot":"","sources":["../../../src/components/DynamicSelect/DynamicSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/HelperText.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelperText = HelperText;
+var react_1 = require("react");
+var Typography_1 = require("src/components/Typography");
+var ThemeContext_1 = require("src/theme/ThemeContext");
+function HelperText(_a) {
+    var text = _a.text, error = _a.error;
+    var theme = (0, ThemeContext_1.useTheme)();
+    if (!text)
+        return null;
+    var color = error
+        ? theme.color.status.critical
+        : theme.color.component.helperInput;
+    return (react_1.default.createElement(Typography_1.SmallP, { style: { color: color, marginTop: 4 } }, text));
+}
+//# sourceMappingURL=HelperText.js.map

package/dist/components/Input/HelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../src/components/Input/HelperText.tsx"],"names":[],"mappings":";;AASA,gCAcC;AAvBD,+BAAyB;AACzB,wDAAkD;AAClD,uDAAiD;AAOjD,SAAgB,UAAU,CAAC,EAAgC;QAA9B,IAAI,UAAA,EAAE,KAAK,WAAA;IACtC,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,mBAAM,IAAC,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,SAAS,EAAE,CAAC,EAAE,IACnC,IAAI,CACE,CACV,CAAA;AACH,CAAC"}

package/dist/components/Input/InputLabel.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputLabel = InputLabel;
+var react_1 = require("react");
+var styled_1 = require("@emotion/styled");
+var ThemeContext_1 = require("src/theme/ThemeContext");
+var icons_1 = require("src/icons");
+var TypographyStyles_1 = require("src/shared/TypographyStyles");
+var Tooltip_1 = require("src/components/Tooltip");
+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"])));
+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);
+function InputLabel(_a) {
+    var label = _a.label, required = _a.required, optional = _a.optional, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick;
+    var theme = (0, ThemeContext_1.useTheme)();
+    if (!label)
+        return null;
+    return (react_1.default.createElement(LabelContainer, null,
+        react_1.default.createElement(LabelText, { style: { color: theme.color.base.onNeutral } },
+            label,
+            required && (react_1.default.createElement("span", { style: { color: theme.error.text, marginLeft: 2 } }, "*"))),
+        optional && (react_1.default.createElement(LabelText, { style: { color: theme.color.base.onNeutralSecondary } }, "Optional")),
+        showInfoIcon && infoText && (react_1.default.createElement(Tooltip_1.default, { content: infoText, placement: "top" },
+            react_1.default.createElement(icons_1.Info, { style: { cursor: 'pointer', width: 16, height: 16 }, onClick: onInfoClick }))),
+        showInfoIcon && !infoText && (react_1.default.createElement(icons_1.Info, { style: { cursor: 'pointer', width: 16, height: 16 }, onClick: onInfoClick }))));
+}
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=InputLabel.js.map

package/dist/components/Input/InputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../../src/components/Input/InputLabel.tsx"],"names":[],"mappings":";;;;;;AA8BA,gCAyCC;AAvED,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,mCAAgC;AAChC,gEAAuD;AACvD,kDAA4C;AAW5C,IAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,qJAAA,kFAKhC,IAAA,CAAA;AAED,IAAM,SAAS,GAAG,gBAAM,CAAC,IAAI,8JAAA,mBACZ,EAAS,sEAIzB,KAJgB,4BAAS,CAIzB,CAAA;AAED,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,SAAS,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YACpD,KAAK;YACL,QAAQ,IAAI,CACX,wCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,QAAU,CAClE,CACS;QACX,QAAQ,IAAI,CACX,8BAAC,SAAS,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAEpD,CACb;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"}

package/dist/components/Input/index.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -28,67 +24,51 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var emotion_1 = require("emotion");
-var styled_1 = require("@emotion/styled");
 var input_1 = require("antd/es/input");
-var Typography_1 = require("src/components/Typography");
-var Link_1 = require("src/components/Link");
 var ThemeContext_1 = require("src/theme/ThemeContext");
-var icons_1 = require("src/icons");
+var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
+var inputStyles_1 = require("./inputStyles");
+var HelperText_1 = require("./HelperText");
+var InputLabel_1 = require("./InputLabel");
 require("antd/es/input/style/css");
-// deprecated constants
-var ColorStyles_1 = require("src/shared/ColorStyles");
-var theme_1 = require("src/theme/theme");
-var TypographyStyles_1 = require("src/shared/TypographyStyles");
-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");
-var Asterisk = function () {
-    var error = (0, ThemeContext_1.useTheme)().error;
-    return react_1.default.createElement("span", { style: { color: error.text, marginLeft: 2 } }, "*");
-};
-var OptionalText = function () {
-    return (react_1.default.createElement(Typography_1.SmallP, { style: { color: ColorStyles_1.NEUTRAL_COLORS.G500, marginLeft: 3 } }, "Optional"));
-};
-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"])));
 var MainInput = function (_a) {
-    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, rest = __rest(_a, ["addonBefore", "placeholder", "disabled", "className", "label", "required", "optional"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(Label, null,
-            react_1.default.createElement(Typography_1.P1Bold, null,
-                label,
-                required && react_1.default.createElement(Asterisk, null)),
-            optional && react_1.default.createElement(OptionalText, null))),
-        react_1.default.createElement(input_1.default, __assign({ className: "".concat((0, emotion_1.css)(style), " ").concat(className), addonBefore: addonBefore, placeholder: placeholder, disabled: disabled }, rest))));
+    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"]);
+    var theme = (0, ThemeContext_1.useTheme)();
+    var style = (0, inputStyles_1.getBaseInputStyle)(theme, size, error, disabledAddon);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
+        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)),
+        react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
 };
 MainInput.Password = function (_a) {
-    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"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(Label, null,
-            react_1.default.createElement(Typography_1.P1Bold, null,
-                label,
-                required && react_1.default.createElement(Asterisk, null)))),
-        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: false }, rest))));
+    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"]);
+    var theme = (0, ThemeContext_1.useTheme)();
+    var style = (0, inputStyles_1.getBaseInputStyle)(theme, size, error);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
+        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)),
+        react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
 };
 MainInput.Search = function (_a) {
-    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"]);
-    var _e = (0, ThemeContext_1.useTheme)(), neutral = _e.neutral, text = _e.text, primary = _e.brand.primary;
-    var searchStyle = "\n    & .ant-input-group-addon:not(:last-child) {\n      font-family: ".concat(TypographyStyles_1.MAIN_FONT, ";\n      color: ").concat(text.default, ";\n      background-color: ").concat(neutral.white, ";\n      border-top-left-radius: 5px;\n      border-bottom-left-radius: 5px;\n      border: 1px solid ").concat(neutral.border, ";\n      border-right: 0;\n      padding: ").concat(typeof addonBefore === 'string' ? '0 15px' : '0', ";\n\n      & .ant-select {\n        margin: 0;\n        \n        \n        &.ant-select-single:not(.ant-select-customize-input) .ant-select-selector, &.ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector {\n          height: 38px;\n        }\n        \n        &.ant-select-single.ant-select-focused:not(.ant-select-customize-input) .ant-select-selector, &.ant-select-multiple.ant-select-focused:not(.ant-select-customize-input) .ant-select-selector {\n          border-color: ").concat(primary.default, ";\n          -webkit-box-shadow: 0 0 0 2px ").concat(primary.default, "33;\n          box-shadow: 0 0 0 2px ").concat(primary.default, "33;\n        }\n      } \n    }\n\n    & .ant-input-affix-wrapper, &.ant-input-affix-wrapper {\n      border-radius: 5px;\n      border: 1px solid ").concat(neutral.border, ";\n      padding: 8px 15px !important;\n\n      &:hover {\n        border-color: ").concat(primary.default, ";\n      }\n    }\n\n    & .ant-input-affix-wrapper-focused, .ant-input-affix-wrapper:focus {\n      border-color: ").concat(primary.default, ";\n      -webkit-box-shadow: 0 0 0 2px ").concat(primary.default, "33;\n      box-shadow: 0 0 0 2px ").concat(primary.default, "33;\n    }\n  ");
-    return (react_1.default.createElement(input_1.default, __assign({ placeholder: placeholder, addonBefore: addonBefore, onChange: onChange, onKeyDown: onSearch, className: "".concat((0, emotion_1.css)(searchStyle)), suffix: react_1.default.createElement(Link_1.default, { style: {
-                display: 'grid',
-                justifyContent: 'center'
-            }, onClick: onSearch },
-            react_1.default.createElement(icons_1.Search, { style: { color: neutral.emphasis } })) }, rest)));
+    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"]);
+    var theme = (0, ThemeContext_1.useTheme)();
+    var searchStyle = (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  ");
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        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: { display: 'flex', cursor: onSearch ? 'pointer' : 'default' } },
+                react_1.default.createElement(MaterialSymbols_1.default, { icon: "search", size: size === 'small' ? 'xs' : 'm', color: theme.color.base.onNeutral })) }, rest)),
+        react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
 };
 MainInput.TextArea = function (_a) {
-    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"]);
-    var textAreaStyle = "\t  \n  &.ant-input {\t \n    resize: none;\t\n    border-radius: 5px;\t  \n    font-family: ".concat(TypographyStyles_1.MAIN_FONT, ";\t  \n    font-size: ").concat(TypographyStyles_1.FONT_SIZE.P1, ";\t  \n    color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, ";\t \n    line-height: 17px;\t\n    padding-top: 12px;\t\n    padding-left: 15px;\t\n    padding-right: 15px;\t\n    padding-bottom: 12px;\t\n    border-color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G200, ";\t\n  }\t\n  &.ant-input::placeholder {\t\n    color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G400, ";\t\n    font-weight: 400;\t\n  }\t\n  &.ant-input:hover {\t\n    border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\t\n  }\t\n  &.ant-input:focus {\t\n    border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\t\n    -webkit-box-shadow: 0 0 0 3px #F0FFF9;\t\n    box-shadow: 0 0 0 3px #F0FFF9;\t\n    color: ").concat(ColorStyles_1.NEUTRAL_COLORS.BLACK, "\t\n  }\t\n");
+    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"]);
+    var theme = (0, ThemeContext_1.useTheme)();
+    var borderColor = error ? theme.color.status.critical : theme.color.base.line;
+    var _f = inputStyles_1.SIZE_CONFIG[size], borderRadius = _f.borderRadius, padding = _f.padding;
+    var textAreaStyle = (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 { border-color: ").concat(theme.color.base.primary2, "; }\n      &:focus {\n        border-color: ").concat(theme.color.base.primary2, ";\n        box-shadow: none;\n      }\n    }\n  ");
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(Label, null,
-            react_1.default.createElement(Typography_1.P1Bold, null,
-                label,
-                required && react_1.default.createElement(Asterisk, null)),
-            optional && react_1.default.createElement(OptionalText, null))),
-        react_1.default.createElement(input_1.default.TextArea, __assign({ className: "".concat((0, emotion_1.css)(textAreaStyle), " ").concat(className) }, rest))));
+        react_1.default.createElement(InputLabel_1.InputLabel, { label: label, required: required, optional: optional, showInfoIcon: showInfoIcon, infoText: infoText, onInfoClick: onInfoClick }),
+        react_1.default.createElement(input_1.default.TextArea, __assign({ className: "".concat((0, emotion_1.css)(textAreaStyle), " ").concat(className) }, rest)),
+        react_1.default.createElement(HelperText_1.HelperText, { text: helperText, error: error })));
 };
 MainInput.Group = input_1.default.Group;
 exports.default = MainInput;
-var templateObject_1;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/inputStyles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZE_CONFIG = void 0;
+exports.getBaseInputStyle = getBaseInputStyle;
+var TypographyStyles_1 = require("src/shared/TypographyStyles");
+exports.SIZE_CONFIG = {
+    large: {
+        height: '48px',
+        borderRadius: '12px',
+        padding: '12px 16px',
+    },
+    small: {
+        height: '36px',
+        borderRadius: '8px',
+        padding: '8px 12px',
+    },
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getBaseInputStyle(theme, size, error, disabledAddon) {
+    if (size === void 0) { size = 'large'; }
+    var _a = exports.SIZE_CONFIG[size], height = _a.height, borderRadius = _a.borderRadius, padding = _a.padding;
+    var borderColor = error ? theme.color.status.critical : theme.color.base.line;
+    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 { border-color: ").concat(theme.color.base.primary2, "; }\n      &:focus {\n        border-color: ").concat(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 { border-color: ").concat(theme.color.base.primary2, "; }\n      &:focus {\n        border-color: ").concat(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 { border-color: ").concat(theme.color.base.primary2, "; }\n      &:focus {\n        border-color: ").concat(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 { border-color: ").concat(theme.color.base.primary2, "; }\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(theme.color.base.primary2, ";\n      box-shadow: none;\n    }\n\n    /* Case 4: addon + prefix (Search with Select addon) \u2014 class on .ant-input-group-wrapper */\n    & .ant-input-group > .ant-input-affix-wrapper {\n      border-radius: 0 ").concat(borderRadius, " ").concat(borderRadius, " 0 !important;\n      border-color: ").concat(borderColor, ";\n      height: ").concat(height, ";\n      padding: ").concat(padding, ";\n      padding-left: 8px;\n      &:hover { border-color: ").concat(theme.color.base.primary2, "; }\n      &.ant-input-affix-wrapper-focused {\n        border-color: ").concat(theme.color.base.primary2, ";\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\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      &:hover { border-color: ").concat(theme.color.base.line, "; }\n    }\n    &.ant-input-affix-wrapper-disabled {\n      background-color: ").concat(theme.color.surface.disabledSurface, ";\n      border-color: ").concat(theme.color.base.line, ";\n      & .ant-input-disabled {\n        background-color: ").concat(theme.color.surface.disabledSurface, ";\n        color: ").concat(theme.color.surface.disabledOnSurface, ";\n      }\n      &:hover { border-color: ").concat(theme.color.base.line, "; }\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.secondaryNeutral, ";\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.secondaryNeutral, ";\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    }\n    ").concat(disabledAddon ? "\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      &:has([data-addon-custom]) {\n        background-color: ").concat(theme.color.surface.disabledSurface, ";\n      }\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      &:has([data-addon-custom]) {\n        background-color: ").concat(theme.color.surface.disabledSurface, ";\n      }\n    }\n    ") : '', "\n  ");
+}
+//# sourceMappingURL=inputStyles.js.map

package/dist/components/Input/inputStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputStyles.js","sourceRoot":"","sources":["../../../src/components/Input/inputStyles.ts"],"names":[],"mappings":"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"}

package/dist/components/InputWithButton/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var styled_1 = require("@emotion/styled");
+var ThemeContext_1 = require("src/theme/ThemeContext");
+var TypographyStyles_1 = require("src/shared/TypographyStyles");
+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"])));
+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); });
+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); });
+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); });
+var InputWithButton = function (_a) {
+    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;
+    var theme = (0, ThemeContext_1.useTheme)();
+    var inputDisabled = disabled || disabledInput;
+    var prefixDisabled = disabled || disabledPrefix;
+    var borderColor = error
+        ? theme.color.status.critical
+        : theme.color.base.line;
+    var prefixBorderColor = theme.color.base.line;
+    return (react_1.default.createElement(Container, { className: className },
+        prefix && (react_1.default.createElement(PrefixContainer, { borderColor: prefixBorderColor, bgColor: prefixDisabled
+                ? theme.color.surface.disabledSurface
+                : staticPrefix
+                    ? theme.color.surface.secondaryNeutral
+                    : theme.color.surface.neutral, hoverBgColor: prefixDisabled ? theme.color.surface.disabledSurface : theme.color.interactive.hoverSurface, textColor: prefixDisabled ? theme.color.surface.disabledOnSurface : theme.color.base.onNeutral, isDisabled: prefixDisabled }, prefix)),
+        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 }),
+        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)));
+};
+exports.default = InputWithButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=index.js.map

package/dist/components/InputWithButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputWithButton/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/RangePicker/index.js

@@ -28,12 +28,14 @@ var emotion_1 = require("emotion");
 var date_picker_1 = require("antd/es/date-picker");
 require("antd/es/date-picker/style/css");
 var TypographyStyles_1 = require("src/shared/TypographyStyles");
-var ColorStyles_1 = require("src/shared/ColorStyles");
-var theme_1 = require("src/theme/theme");
+var ThemeContext_1 = require("src/theme/ThemeContext");
+var inputStyles_1 = require("../Input/inputStyles");
 function default_1(_a) {
-    var _b = _a.format, format = _b === void 0 ? 'DD/MM/YYYY' : _b, rest = __rest(_a, ["format"]);
-    var style = "\n    -webkit-font-smoothing: antialiased;\n    height: 36px;\n\n    &.ant-picker {\n      border-radius: 5px;\n      border-color: #E8E8E8;\n      transition: 0.3s all ease;\n\n      &:hover {\n        border-color: ".concat(theme_1.straitsXTheme.brand.primary.default, ";\n      }\n\n      &.ant-picker-focused {\n        border-color: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\n        box-shadow: 0 0 0 2px ").concat(theme_1.straitsXTheme.brand.primary.background, ";\n      }\n\n      .ant-picker-active-bar {\n        background: ").concat(theme_1.straitsXTheme.brand.primary.default, ";\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: #121212;\n    }\n\n    & .ant-picker-input > input {\n      color: #121212;\n    }\n\n    & .ant-picker-input > input::placeholder {\n      color: ").concat(ColorStyles_1.NEUTRAL_COLORS.G400, ";\n    }\n  ");
-    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_1.straitsXTheme.brand.primary.default, ";\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_1.straitsXTheme.brand.primary.default, ";\n    }\n\n    .ant-picker-cell.ant-picker-cell-in-view {\n      &.ant-picker-cell-in-range::before {\n        background-color: #F0FFF9;\n      }\n\n      &.ant-picker-cell-range-end::before {\n        background-color: #F0FFF9;\n      }\n\n      &.ant-picker-cell-range-start::before {\n        background-color: #F0FFF9;\n      }\n    } \n  ");
+    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"]);
+    var theme = (0, ThemeContext_1.useTheme)();
+    var _d = inputStyles_1.SIZE_CONFIG[size], height = _d.height, borderRadius = _d.borderRadius, padding = _d.padding;
+    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  ");
+    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  ");
     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)));
 }
 //# sourceMappingURL=index.js.map

package/dist/components/RangePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RangePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,4BA2EC;AAnGD,+BAAyB;AACzB,mCAA6B;AAC7B,mDAA4C;AAC5C,yCAAsC;AACtC,gEAAuD;AACvD,sDAAuD;AACvD,yCAA+C;AAkB/C,mBAAwB,EAAyC;IAAvC,IAAA,cAAqB,EAArB,MAAM,mBAAG,YAAY,KAAA,EAAK,IAAI,cAAhC,UAAkC,CAAF;IACtD,IAAM,KAAK,GAAG,mOAUQ,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,+EAInC,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,8CAC3B,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,+EAIhD,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,+FAMpC,4BAAS,yRAaf,4BAAc,CAAC,IAAI,iBAE/B,CAAA;IAED,IAAM,aAAa,GAAG,uIAEE,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,sJAInC,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,8VAgB1D,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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RangePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBA,4BAgFC;AAzGD,+BAAyB;AACzB,mCAA6B;AAC7B,mDAA4C;AAC5C,yCAAsC;AACtC,gEAAuD;AACvD,uDAAiD;AACjD,oDAA6D;AAmB7D,mBAAwB,EAAyD;IAAvD,IAAA,cAAqB,EAArB,MAAM,mBAAG,YAAY,KAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAK,IAAI,cAAhD,kBAAkD,CAAF;IACtE,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,2BAGzD,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"}

package/dist/components/Select/const.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OPTIONS_TEXT_SIZE = exports.PLACEHOLDER_TEXT_SIZE = void 0;
+exports.PLACEHOLDER_TEXT_SIZE = {
+    sm: 'md',
+    lg: 'lg',
+};
+exports.OPTIONS_TEXT_SIZE = {
+    sm: 'md',
+    lg: 'lg',
+};
+//# sourceMappingURL=const.js.map

package/dist/components/Select/const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../src/components/Select/const.ts"],"names":[],"mappings":";;;AAAa,QAAA,qBAAqB,GAAG;IACnC,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAA;AAEG,QAAA,iBAAiB,GAAG;IAC/B,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAA"}

package/dist/components/Select/helpers.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCustomSelectTag = exports.renderHelperText = exports.renderOptions = exports.getPlaceholder = exports.renderLabel = exports.getSuffixIcon = void 0;
+var react_1 = require("react");
+var theme_1 = require("src/theme/theme");
+var select_1 = require("antd/es/select");
+var index_1 = require("src/components/Tooltip/index");
+var Tag_1 = require("src/components/Tag");
+var Typography_1 = require("src/constants/Typography/Typography");
+var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
+var style_1 = require("./style");
+var const_1 = require("./const");
+var getSuffixIcon = function (secondaryText) { return (react_1.default.createElement(react_1.default.Fragment, null,
+    secondaryText && (react_1.default.createElement(Typography_1.Typography.Body, { color: theme_1.straitsXTheme.color.base.onNeutralSecondary, size: "sm" }, secondaryText)),
+    react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "keyboard_arrow_down" }))); };
+exports.getSuffixIcon = getSuffixIcon;
+var renderLabel = function (label, tooltip) {
+    return label ? (react_1.default.createElement(style_1.LabelContainer, null,
+        react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, label),
+        tooltip ? (react_1.default.createElement(index_1.default, { placement: "top", title: "I'm Tooltip Component", content: tooltip },
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "info", size: "xs" })))) : null)) : null;
+};
+exports.renderLabel = renderLabel;
+var getPlaceholder = function (size, placeholder) {
+    return placeholder ? (react_1.default.createElement(Typography_1.Typography.Body, { size: const_1.PLACEHOLDER_TEXT_SIZE[size] }, placeholder)) : null;
+};
+exports.getPlaceholder = getPlaceholder;
+var renderOptions = function (options, size) {
+    return options.map(function (_a) {
+        var value = _a.value, label = _a.label, Icon = _a.icon, disabled = _a.disabled;
+        return (react_1.default.createElement(select_1.default.Option, { key: value, value: value, disabled: disabled },
+            react_1.default.createElement(style_1.OptionContainer, null,
+                Icon && react_1.default.createElement(Icon, { style: { width: '16px', height: '16px' } }),
+                react_1.default.createElement(Typography_1.Typography.Body, { size: const_1.OPTIONS_TEXT_SIZE[size] }, label))));
+    });
+};
+exports.renderOptions = renderOptions;
+var renderHelperText = function (helperText) {
+    return helperText ? (react_1.default.createElement(Typography_1.Typography.Body, { color: theme_1.straitsXTheme.color.base.onNeutralSecondary, size: "sm" }, helperText)) : null;
+};
+exports.renderHelperText = renderHelperText;
+var getCustomSelectTag = function (mode, disabled, size) {
+    return mode === 'multiple'
+        ? function (_a) {
+            var label = _a.label, onClose = _a.onClose;
+            return (react_1.default.createElement(Tag_1.default, { type: disabled ? 'disabled' : 'positive', variant: "removable", size: size, onClick: disabled ? undefined : onClose }, label));
+        }
+        : undefined;
+};
+exports.getCustomSelectTag = getCustomSelectTag;
+//# sourceMappingURL=helpers.js.map