glints-aries 4.0.193 → 4.0.194

package/es/@next/CurrencyInput/CurrencyInput.d.ts

@@ -4,9 +4,13 @@ export declare type CurrencyInputProps = Omit<InputProps, 'type' | 'prefix' | 'o
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
+    currencyCode: string;
+    currencySymbol?: string;
 };
 export declare const CurrencyInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "prefix" | "onChange"> & {
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
+    currencyCode: string;
+    currencySymbol?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/es/@next/CurrencyInput/CurrencyInput.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["locale", "value", "onChange"];
+var _excluded = ["locale", "value", "onChange", "currencyCode", "currencySymbol"];
 import React, { useState } from 'react';
-import { StyledCurrency } from './CurrencyStyles';
+import { Input } from '../Input/Input';
 export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(_ref, ref) {
   var _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     onChange = _ref.onChange,
+    currencyCode = _ref.currencyCode,
+    currencySymbol = _ref.currencySymbol,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -28,6 +30,26 @@ export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(
     var cleanedValue = parseFloat(value.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
     return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
   };
+  var getCurrencySymbol = function getCurrencySymbol(locale, currencyCode, currencySymbol) {
+    if (currencySymbol) {
+      return currencySymbol;
+    }
+    try {
+      var _parts$find;
+      var _formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      });
+      var parts = _formatter.formatToParts(0);
+      var returnedCurrencySymbol = (_parts$find = parts.find(function (part) {
+        return part.type === 'currency';
+      })) == null ? void 0 : _parts$find.value;
+      return returnedCurrencySymbol;
+    } catch (e) {
+      console.warn("Currency code of " + currencyCode + " is unsupported, \"$\" will be used");
+    }
+    return '$';
+  };
   var _useState = useState(formatter.format(getRawNumber(value.toString()))),
     formattedValue = _useState[0],
     setFormattedValue = _useState[1];
@@ -36,10 +58,10 @@ export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(
     onChange(rawValue);
     setFormattedValue(formatter.format(rawValue));
   };
-  return /*#__PURE__*/React.createElement(StyledCurrency, _extends({
+  return /*#__PURE__*/React.createElement(Input, _extends({
     ref: ref,
     type: "text",
-    prefix: /*#__PURE__*/React.createElement("div", null, "$")
+    prefix: /*#__PURE__*/React.createElement("div", null, getCurrencySymbol(localeValue, currencyCode, currencySymbol))
   }, props, {
     value: formattedValue === '0' ? '' : formattedValue,
     onChange: handleChange

package/es/@next/Input/Input.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["error", "disabled", "prefix", "suffix"];
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
 export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
   var error = _ref.error,
@@ -11,17 +11,44 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
+  var prefixRef = useRef(null);
+  var suffixRef = useRef(null);
   var Prefix = function Prefix() {
-    return hasPrefix ? /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix) : null;
+    return hasPrefix ? /*#__PURE__*/React.createElement(StyledPrefixContainer, {
+      ref: prefixRef
+    }, prefix) : null;
   };
   var Suffix = function Suffix() {
-    return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, null, suffix) : null;
+    return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, {
+      ref: suffixRef
+    }, suffix) : null;
   };
+  var _React$useState = React.useState(0),
+    prefixWidth = _React$useState[0],
+    setPrefixWidth = _React$useState[1];
+  var _React$useState2 = React.useState(0),
+    suffixWidth = _React$useState2[0],
+    setSuffixWidth = _React$useState2[1];
+  useEffect(function () {
+    if (hasPrefix) {
+      var _prefixWidth = prefixRef.current.getBoundingClientRect().width;
+      setPrefixWidth(_prefixWidth);
+    }
+  }, [hasPrefix, prefix]);
+  useEffect(function () {
+    if (hasSuffix) {
+      var _suffixWidth = suffixRef.current.getBoundingClientRect().width;
+      setSuffixWidth(_suffixWidth);
+    }
+  }, [hasSuffix, suffix]);
   return /*#__PURE__*/React.createElement(StyledContainer, {
     ref: ref,
     "data-prefix": hasPrefix,
+    "data-suffix": hasSuffix,
     "data-error": error,
-    "data-disabled": disabled
+    "data-disabled": disabled,
+    prefixWidth: prefixWidth,
+    suffixWidth: suffixWidth
   }, /*#__PURE__*/React.createElement(Prefix, null), /*#__PURE__*/React.createElement(StyledInput, _extends({
     disabled: disabled
   }, props)), /*#__PURE__*/React.createElement(Suffix, null));

package/es/@next/Input/InputStyle.d.ts

@@ -1,5 +1,10 @@
 import { InputProps } from './Input';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps, never>;
+interface PreffixSuffixWidthProps {
+    prefixWidth: number;
+    suffixWidth: number;
+}
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps & PreffixSuffixWidthProps, never>;
 export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export {};

package/es/@next/Input/InputStyle.js

@@ -1,18 +1,23 @@
 import styled from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { Neutral, Red } from '../utilities/colors';
+import { space12, space4, space8 } from '../utilities/spacing';
 export var StyledContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
-})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:40px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], Red.B93, Neutral.B85, Neutral.B95, Neutral.B85, Neutral.B85, Neutral.B85, Neutral.B85);
+})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
+  return props.prefixWidth;
+}, function (props) {
+  return props.suffixWidth;
+}, Red.B93, Neutral.B85, Neutral.B95, Neutral.B85, Neutral.B85, Neutral.B85, Neutral.B85);
 export var StyledPrefixContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledPrefixContainer",
   componentId: "sc-15z2mnd-1"
-})(["position:absolute;padding:0;left:0;line-height:0;color:", ";svg{height:17px;width:17px;margin:10px 14px;fill:", ";}div{color:", ";margin:18px 12px;}"], Neutral.B40, Neutral.B40, Neutral.B40);
+})(["position:absolute;left:0;color:", ";display:flex;align-items:center;height:36px;padding:0px ", " 0 ", ";svg{height:17px;width:17px;fill:", ";}"], Neutral.B40, space8, space12, Neutral.B40);
 export var StyledSuffixContainer = styled(StyledPrefixContainer).withConfig({
   displayName: "InputStyle__StyledSuffixContainer",
   componentId: "sc-15z2mnd-2"
-})(["left:auto;right:0;"]);
+})(["left:auto;right:0;padding:0px ", " 0 ", ";"], space12, space4);
 export var StyledInput = styled.input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-3"

package/es/@next/Popover/popoverStoryHelper/SalarySelector.js

@@ -15,8 +15,10 @@ export var SalarySelector = function SalarySelector(_ref) {
     as: "div",
     variant: "caption"
   }, "IDR"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    currencyCode: "USD",
     onChange: onFromChanged
   })), /*#__PURE__*/React.createElement("div", null, "-"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    currencyCode: "USD",
     onChange: onToChanged
   }))));
 };

package/lib/@next/CurrencyInput/CurrencyInput.d.ts

@@ -4,9 +4,13 @@ export declare type CurrencyInputProps = Omit<InputProps, 'type' | 'prefix' | 'o
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
+    currencyCode: string;
+    currencySymbol?: string;
 };
 export declare const CurrencyInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "prefix" | "onChange"> & {
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
+    currencyCode: string;
+    currencySymbol?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/CurrencyInput/CurrencyInput.js

@@ -6,8 +6,8 @@ exports.CurrencyInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _CurrencyStyles = require("./CurrencyStyles");
-var _excluded = ["locale", "value", "onChange"];
+var _Input = require("../Input/Input");
+var _excluded = ["locale", "value", "onChange", "currencyCode", "currencySymbol"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CurrencyInput = /*#__PURE__*/_react["default"].forwardRef(function CurrencyInput(_ref, ref) {
@@ -16,6 +16,8 @@ var CurrencyInput = /*#__PURE__*/_react["default"].forwardRef(function CurrencyI
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     onChange = _ref.onChange,
+    currencyCode = _ref.currencyCode,
+    currencySymbol = _ref.currencySymbol,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -35,6 +37,26 @@ var CurrencyInput = /*#__PURE__*/_react["default"].forwardRef(function CurrencyI
     var cleanedValue = parseFloat(value.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
     return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
   };
+  var getCurrencySymbol = function getCurrencySymbol(locale, currencyCode, currencySymbol) {
+    if (currencySymbol) {
+      return currencySymbol;
+    }
+    try {
+      var _parts$find;
+      var _formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      });
+      var parts = _formatter.formatToParts(0);
+      var returnedCurrencySymbol = (_parts$find = parts.find(function (part) {
+        return part.type === 'currency';
+      })) == null ? void 0 : _parts$find.value;
+      return returnedCurrencySymbol;
+    } catch (e) {
+      console.warn("Currency code of " + currencyCode + " is unsupported, \"$\" will be used");
+    }
+    return '$';
+  };
   var _useState = (0, _react.useState)(formatter.format(getRawNumber(value.toString()))),
     formattedValue = _useState[0],
     setFormattedValue = _useState[1];
@@ -43,10 +65,10 @@ var CurrencyInput = /*#__PURE__*/_react["default"].forwardRef(function CurrencyI
     onChange(rawValue);
     setFormattedValue(formatter.format(rawValue));
   };
-  return /*#__PURE__*/_react["default"].createElement(_CurrencyStyles.StyledCurrency, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_Input.Input, (0, _extends2["default"])({
     ref: ref,
     type: "text",
-    prefix: /*#__PURE__*/_react["default"].createElement("div", null, "$")
+    prefix: /*#__PURE__*/_react["default"].createElement("div", null, getCurrencySymbol(localeValue, currencyCode, currencySymbol))
   }, props, {
     value: formattedValue === '0' ? '' : formattedValue,
     onChange: handleChange

package/lib/@next/Input/Input.js

@@ -5,9 +5,11 @@ exports.__esModule = true;
 exports.Input = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _InputStyle = require("./InputStyle");
 var _excluded = ["error", "disabled", "prefix", "suffix"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref) {
   var error = _ref.error,
     disabled = _ref.disabled,
@@ -16,17 +18,44 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
+  var prefixRef = (0, _react.useRef)(null);
+  var suffixRef = (0, _react.useRef)(null);
   var Prefix = function Prefix() {
-    return hasPrefix ? /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, null, prefix) : null;
+    return hasPrefix ? /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, {
+      ref: prefixRef
+    }, prefix) : null;
   };
   var Suffix = function Suffix() {
-    return hasSuffix ? /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledSuffixContainer, null, suffix) : null;
+    return hasSuffix ? /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledSuffixContainer, {
+      ref: suffixRef
+    }, suffix) : null;
   };
+  var _React$useState = _react["default"].useState(0),
+    prefixWidth = _React$useState[0],
+    setPrefixWidth = _React$useState[1];
+  var _React$useState2 = _react["default"].useState(0),
+    suffixWidth = _React$useState2[0],
+    setSuffixWidth = _React$useState2[1];
+  (0, _react.useEffect)(function () {
+    if (hasPrefix) {
+      var _prefixWidth = prefixRef.current.getBoundingClientRect().width;
+      setPrefixWidth(_prefixWidth);
+    }
+  }, [hasPrefix, prefix]);
+  (0, _react.useEffect)(function () {
+    if (hasSuffix) {
+      var _suffixWidth = suffixRef.current.getBoundingClientRect().width;
+      setSuffixWidth(_suffixWidth);
+    }
+  }, [hasSuffix, suffix]);
   return /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledContainer, {
     ref: ref,
     "data-prefix": hasPrefix,
+    "data-suffix": hasSuffix,
     "data-error": error,
-    "data-disabled": disabled
+    "data-disabled": disabled,
+    prefixWidth: prefixWidth,
+    suffixWidth: suffixWidth
   }, /*#__PURE__*/_react["default"].createElement(Prefix, null), /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({
     disabled: disabled
   }, props)), /*#__PURE__*/_react["default"].createElement(Suffix, null));

package/lib/@next/Input/InputStyle.d.ts

@@ -1,5 +1,10 @@
 import { InputProps } from './Input';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps, never>;
+interface PreffixSuffixWidthProps {
+    prefixWidth: number;
+    suffixWidth: number;
+}
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps & PreffixSuffixWidthProps, never>;
 export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export {};

package/lib/@next/Input/InputStyle.js

@@ -6,22 +6,27 @@ exports.StyledSuffixContainer = exports.StyledPrefixContainer = exports.StyledIn
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
 var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var StyledContainer = _styledComponents["default"].div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
-})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:40px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85, _colors.Neutral.B85, _colors.Neutral.B85, _colors.Neutral.B85);
+})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
+  return props.prefixWidth;
+}, function (props) {
+  return props.suffixWidth;
+}, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85, _colors.Neutral.B85, _colors.Neutral.B85, _colors.Neutral.B85);
 exports.StyledContainer = StyledContainer;
 var StyledPrefixContainer = _styledComponents["default"].div.withConfig({
   displayName: "InputStyle__StyledPrefixContainer",
   componentId: "sc-15z2mnd-1"
-})(["position:absolute;padding:0;left:0;line-height:0;color:", ";svg{height:17px;width:17px;margin:10px 14px;fill:", ";}div{color:", ";margin:18px 12px;}"], _colors.Neutral.B40, _colors.Neutral.B40, _colors.Neutral.B40);
+})(["position:absolute;left:0;color:", ";display:flex;align-items:center;height:36px;padding:0px ", " 0 ", ";svg{height:17px;width:17px;fill:", ";}"], _colors.Neutral.B40, _spacing.space8, _spacing.space12, _colors.Neutral.B40);
 exports.StyledPrefixContainer = StyledPrefixContainer;
 var StyledSuffixContainer = (0, _styledComponents["default"])(StyledPrefixContainer).withConfig({
   displayName: "InputStyle__StyledSuffixContainer",
   componentId: "sc-15z2mnd-2"
-})(["left:auto;right:0;"]);
+})(["left:auto;right:0;padding:0px ", " 0 ", ";"], _spacing.space12, _spacing.space4);
 exports.StyledSuffixContainer = StyledSuffixContainer;
 var StyledInput = _styledComponents["default"].input.withConfig({
   displayName: "InputStyle__StyledInput",

package/lib/@next/Popover/popoverStoryHelper/SalarySelector.js

@@ -20,8 +20,10 @@ var SalarySelector = function SalarySelector(_ref) {
     as: "div",
     variant: "caption"
   }, "IDR"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_CurrencyInput.CurrencyInput, {
+    currencyCode: "USD",
     onChange: onFromChanged
   })), /*#__PURE__*/_react["default"].createElement("div", null, "-"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_CurrencyInput.CurrencyInput, {
+    currencyCode: "USD",
     onChange: onToChanged
   }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.193",
+  "version": "4.0.194",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",

package/es/@next/CurrencyInput/CurrencyStyles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const StyledCurrency: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Input/Input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

package/es/@next/CurrencyInput/CurrencyStyles.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { Input } from '../Input/Input';
-import { space24 } from '../utilities/spacing';
-export var StyledCurrency = styled(Input).withConfig({
-  displayName: "CurrencyStyles__StyledCurrency",
-  componentId: "sc-lcby3l-0"
-})(["padding-left:", " !important;"], space24);

package/lib/@next/CurrencyInput/CurrencyStyles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const StyledCurrency: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Input/Input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

package/lib/@next/CurrencyInput/CurrencyStyles.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.StyledCurrency = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Input = require("../Input/Input");
-var _spacing = require("../utilities/spacing");
-var StyledCurrency = (0, _styledComponents["default"])(_Input.Input).withConfig({
-  displayName: "CurrencyStyles__StyledCurrency",
-  componentId: "sc-lcby3l-0"
-})(["padding-left:", " !important;"], _spacing.space24);
-exports.StyledCurrency = StyledCurrency;