pds-dev-kit-web-test 2.2.99 → 2.2.244

package/dist/src/desktop/components/PriceTextField/PriceTextField.js

@@ -0,0 +1,587 @@
+"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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DECIMAL_PLACES = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/jsx-no-bind */
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var react_hook_form_1 = require("react-hook-form");
+var react_i18next_1 = require("react-i18next");
+var types_1 = require("../../../common/types");
+var clickTypeSystemUICssGenerator_1 = __importDefault(require("../../../common/utils/SystemUIPositionGenerator/clickTypeSystemUICssGenerator"));
+var pricing_1 = require("../../../core/pricing");
+var policy_1 = require("../../../core/pricing/policy");
+var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
+var hybrid_1 = require("../../../hybrid");
+var components_1 = require("../../common/components");
+var ContextMenu_1 = require("../ContextMenu");
+var ContextMenuItem_1 = require("../ContextMenuItem");
+var TextLabel_1 = require("../TextLabel");
+exports.DEFAULT_DECIMAL_PLACES = {
+    KRW: 0,
+    USD: 2
+};
+function PriceTextField(_a) {
+    var _b;
+    var _c;
+    var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onExChange = _a.onExChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
+    var _v = (0, react_1.useState)(baseCurrency), selectedCurrency = _v[0], setSelectedCurrency = _v[1];
+    var _w = (0, react_1.useState)(false), isDropdownFocused = _w[0], setIsDropdownFocused = _w[1];
+    var _x = (0, react_1.useState)(false), isInputFocused = _x[0], setIsInputFocused = _x[1];
+    var _y = (0, react_1.useState)(null), contextMenuSizeOffset = _y[0], setContextMenuSizeOffset = _y[1];
+    var _z = (0, react_1.useState)(null), dropdownPositionOffset = _z[0], setDropdownPositionOffset = _z[1];
+    /** 입력 시 천 단위 콤마 추가 함수 */
+    var addCommas = function (value) {
+        if (!value)
+            return '';
+        var parts = value.split('.');
+        var integerPart = parts[0];
+        var decimalPart = parts[1];
+        // 정수 부분에 콤마 추가
+        var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        // 소수점이 있으면 합치기
+        return decimalPart !== undefined ? "".concat(formattedInteger, ".").concat(decimalPart) : formattedInteger;
+    };
+    var displayValue = (0, react_1.useMemo)(function () {
+        if (!baseCurrencyValue || baseCurrencyValue === '') {
+            return '';
+        }
+        if (selectedCurrency === baseCurrency) {
+            return isInputFocused
+                ? addCommas(baseCurrencyValue)
+                : formatCurrency(Number(baseCurrencyValue), selectedCurrency, decimalPlaces);
+        }
+        var rate = exchangeRates[selectedCurrency] || 1;
+        var baseRate = exchangeRates[baseCurrency] || 1;
+        var convertedValue = (Number(baseCurrencyValue) / baseRate) * rate;
+        return formatCurrency(convertedValue, selectedCurrency, decimalPlaces);
+    }, [
+        baseCurrencyValue,
+        selectedCurrency,
+        baseCurrency,
+        exchangeRates,
+        decimalPlaces,
+        isInputFocused
+    ]);
+    var contextMenuRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var _0 = (0, react_hook_form_1.useFormContext)(), register = _0.register, trigger = _0.trigger, errors = _0.formState.errors, setValue = _0.setValue;
+    /** 기본 validation */
+    var defaultValidation = (0, react_1.useMemo)(function () {
+        var validationConfig = {};
+        // Required validation
+        if (useRequiredValidation === 'use') {
+            validationConfig.required = t('str_please_enter_price');
+        }
+        validationConfig.validate = {};
+        // Min validation (기본값: KRW 300, USD 5)
+        validationConfig.validate.min = function (value) {
+            var minAmount = Number(policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].minPayment.amount);
+            return pricing_1.PricingService.validate.min(value, {
+                minAmount: minAmount,
+                currency: baseCurrency
+            });
+        };
+        // Max validation (기본값: KRW 10,000,000, USD 10,000)
+        validationConfig.validate.max = function (value) {
+            var maxAmount = Number(policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].maxPayment.amount);
+            return pricing_1.PricingService.validate.max(value, {
+                maxAmount: maxAmount,
+                currency: baseCurrency
+            });
+        };
+        // Format validation (기본값: KRW 100, USD 1)
+        validationConfig.validate.format = function (value) {
+            return pricing_1.PricingService.validate.format(value, {
+                paymentUnit: policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].paymentUnit,
+                currency: baseCurrency
+            });
+        };
+        return validationConfig;
+    }, [useRequiredValidation, baseCurrency]);
+    /** 최종 validation */
+    var finalValidation = (0, react_1.useMemo)(function () {
+        if (!validation) {
+            return defaultValidation;
+        }
+        var merged = {
+            required: defaultValidation.required,
+            validate: __assign({}, defaultValidation.validate)
+        };
+        // required 오버라이드
+        if (validation.required !== undefined) {
+            merged.required = validation.required;
+        }
+        // validate 오버라이드
+        if (validation.validate) {
+            Object.keys(validation.validate).forEach(function (key) {
+                if (validation.validate[key]) {
+                    merged.validate[key] = validation.validate[key];
+                }
+            });
+        }
+        return merged;
+    }, [defaultValidation, validation]);
+    var validateOnChange = register(name, finalValidation).onChange;
+    var isError = (0, types_1.getErrorByName)(errors, name);
+    var deleteIconColor = 'ui_cpnt_button_icon_disabled';
+    switch (colorTheme) {
+        case 'dark': {
+            deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
+            break;
+        }
+        case 'transparent': {
+            deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
+            break;
+        }
+    }
+    // 입력 필드 읽기 전용 여부 (baseCurrency가 아닌 경우)
+    var isInputReadOnly = selectedCurrency !== baseCurrency;
+    var currencyOptions = (0, react_1.useMemo)(function () {
+        return currencies.map(function (currency) { return ({
+            value: currency,
+            text: currency,
+            currency: currency,
+            iconName: "ic_currency_".concat(currency.toLowerCase()),
+            state: 'normal'
+        }); });
+    }, [currencies]);
+    var contextMenuPositionCss = (0, clickTypeSystemUICssGenerator_1.default)({
+        sizeOffset: contextMenuSizeOffset,
+        positionOffset: dropdownPositionOffset
+    });
+    function formatCurrency(value, currency, decimalPlaces) {
+        if (currency === void 0) { currency = 'KRW'; }
+        var decimals;
+        if (decimalPlaces && decimalPlaces[currency] !== undefined) {
+            decimals = decimalPlaces[currency];
+        }
+        else {
+            switch (currency) {
+                case 'KRW':
+                    decimals = 0;
+                    break;
+                case 'USD':
+                    decimals = 2;
+                    break;
+                default:
+                    decimals = 0;
+                    break;
+            }
+        }
+        var str = Number(value).toFixed(decimals);
+        if (decimals) {
+            return str.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
+        }
+        return str.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+    }
+    var removeCommas = function (value) {
+        return value.replace(/,/g, '');
+    };
+    // 환율 계산된 값 계산 (항상 baseCurrency 기준으로)
+    var calculatedValue = (0, react_1.useMemo)(function () {
+        if (!baseCurrencyValue || selectedCurrency === baseCurrency) {
+            return Number(baseCurrencyValue);
+        }
+        var rate = exchangeRates[selectedCurrency] || 1;
+        var baseRate = exchangeRates[baseCurrency] || 1;
+        return (Number(baseCurrencyValue) / baseRate) * rate;
+    }, [baseCurrencyValue, selectedCurrency, baseCurrency, exchangeRates]);
+    /** 드롭다운 위치 업데이트 */
+    (0, react_1.useEffect)(function () {
+        if (!isDropdownFocused && contextMenuRef.current) {
+            setContextMenuSizeOffset(null);
+            return;
+        }
+        if (dropdownRef.current) {
+            var _a = dropdownRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+            setDropdownPositionOffset({
+                top: top_1 + window.scrollY,
+                right: right + window.scrollX,
+                bottom: bottom + window.scrollY,
+                left: left + window.scrollX
+            });
+        }
+        if (contextMenuRef.current) {
+            setContextMenuSizeOffset({
+                height: contextMenuRef.current.offsetHeight,
+                width: contextMenuRef.current.offsetWidth
+            });
+        }
+    }, [isDropdownFocused]);
+    /** 포맷팅 값 */
+    var formattedValue = (0, react_1.useMemo)(function () {
+        if (!baseCurrencyValue || baseCurrencyValue === '') {
+            return '';
+        }
+        return formatCurrency(calculatedValue || 0, selectedCurrency, decimalPlaces);
+    }, [baseCurrencyValue, calculatedValue, selectedCurrency, decimalPlaces]);
+    /** 폼 값 업데이트 */
+    (0, react_1.useEffect)(function () {
+        setValue(name, baseCurrencyValue);
+    }, [name, setValue, baseCurrencyValue]);
+    /** onChange 콜백 처리 */
+    (0, react_1.useEffect)(function () {
+        if (onChange && baseCurrencyValue) {
+            onChange(baseCurrencyValue);
+        }
+    }, [onChange, baseCurrencyValue]);
+    /** onValueChange 콜백 처리 */
+    (0, react_1.useEffect)(function () {
+        if (!onValueChange)
+            return;
+        if (!baseCurrencyValue || baseCurrencyValue === '') {
+            return;
+        }
+        onValueChange({
+            selectedCurrency: selectedCurrency,
+            baseCurrencyValue: Number(baseCurrencyValue),
+            calculatedValue: calculatedValue || 0,
+            displayValue: formattedValue
+        });
+    }, [baseCurrencyValue, selectedCurrency, calculatedValue, formattedValue]);
+    var handleChange = function (e) {
+        var _a = e.target, value = _a.value, selectionStart = _a.selectionStart;
+        var prevValue = displayValue;
+        if (selectedCurrency !== baseCurrency) {
+            return;
+        }
+        var cleanValue = removeCommas(value);
+        if (cleanValue === '' || /^\d*\.?\d*$/.test(cleanValue)) {
+            setBaseCurrencyValue(cleanValue);
+            validateOnChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: cleanValue }) }));
+            if (prevValue && prevValue !== '' && value !== cleanValue) {
+                setTimeout(function () {
+                    var input = e.target;
+                    if (input && selectionStart !== null) {
+                        var currentValue = input.value;
+                        var commaCount = (currentValue.match(/,/g) || []).length;
+                        var prevCommaCount = (prevValue.match(/,/g) || []).length;
+                        var newPosition = selectionStart + (commaCount - prevCommaCount);
+                        input.setSelectionRange(newPosition, newPosition);
+                    }
+                }, 0);
+            }
+        }
+        if (onExChange) {
+            onExChange(e);
+        }
+    };
+    var handleBlur = function (e) {
+        setIsInputFocused(false);
+        if (selectedCurrency === baseCurrency && baseCurrencyValue) {
+            var allowedDecimals = decimalPlaces[selectedCurrency];
+            var numericValue = Number(baseCurrencyValue);
+            if (isNaN(numericValue)) {
+                setBaseCurrencyValue('');
+                return;
+            }
+            var decimalCheckedValue = void 0;
+            if (allowedDecimals === 0) {
+                decimalCheckedValue = Math.round(Number(baseCurrencyValue)).toString();
+            }
+            else {
+                decimalCheckedValue = numericValue.toFixed(allowedDecimals);
+            }
+            setBaseCurrencyValue(decimalCheckedValue);
+            setValue(name, decimalCheckedValue, { shouldValidate: true });
+        }
+        if (onBlur) {
+            onBlur(e);
+        }
+        trigger(name);
+    };
+    var handleFocus = function (e) {
+        if (state !== 'read_only' && !isInputReadOnly) {
+            setIsInputFocused(true);
+        }
+        if (onFocus) {
+            onFocus(e);
+        }
+    };
+    function handleTarget() {
+        if (onTarget) {
+            onTarget();
+        }
+    }
+    var getArrowIconColorKey = function () {
+        if (colorTheme === 'dark') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_dropdown_text_darktheme_disabled';
+            }
+            return 'ui_cpnt_dropdown_icon_darktheme_default';
+        }
+        if (colorTheme === 'transparent') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_dropdown_icon_02';
+            }
+            return 'ui_cpnt_dropdown_icon_white_default';
+        }
+        if (dropdownState === 'read_only') {
+            return 'ui_cpnt_dropdown_icon_02';
+        }
+        return 'ui_cpnt_dropdown_icon_01';
+    };
+    var getDropdownTextColorKey = function () {
+        if (colorTheme === 'dark') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_button_text_darktheme_default';
+            }
+            return 'ui_cpnt_button_text_darktheme_enabled';
+        }
+        if (colorTheme === 'transparent') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_button_text_disabled';
+            }
+            return 'ui_cpnt_button_text_enabled';
+        }
+        if (dropdownState === 'read_only') {
+            return 'ui_cpnt_button_text_disabled';
+        }
+        return 'ui_cpnt_button_text_enabled';
+    };
+    var getDropdownContextMenuCustomWidth = function () {
+        var _a;
+        if (customWidth) {
+            return customWidth;
+        }
+        if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
+            return "".concat(dropdownRef.current.offsetWidth, "px");
+        }
+        return '';
+    };
+    var handleDropdownClick = function () {
+        if (dropdownState === 'read_only') {
+            return;
+        }
+        setIsDropdownFocused(!isDropdownFocused);
+    };
+    var handleDropdownBlur = function () {
+        if (isDropdownFocused) {
+            setIsDropdownFocused(false);
+        }
+        setIsInputFocused(false);
+    };
+    var handleCurrencySelect = function (option) {
+        setIsDropdownFocused(false);
+        var newCurrency = option.currency;
+        // 통화 변경 시에는 baseCurrencyValue는 그대로 유지하고 selectedCurrency만 변경
+        setSelectedCurrency(newCurrency);
+        if (onCurrencyChange) {
+            onCurrencyChange(newCurrency);
+        }
+    };
+    var handleDelete = (0, react_1.useCallback)(function () {
+        setBaseCurrencyValue('');
+        setValue(name, '');
+    }, [name, setValue]);
+    return ((0, jsx_runtime_1.jsxs)(S_PriceTextField, __assign({ "x-pds-name": "PriceTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", inputSize: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_ComponentBox, __assign({ inputSize: size, responsiveMode: responsiveMode, isFocused: isInputFocused, isError: Boolean(isError), state: state, customWidth: customWidth, isInputReadOnly: isInputReadOnly }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldBaseWrapper, __assign({ state: state, isError: Boolean(isError), isFocused: isInputFocused, inputSize: size, isInputReadOnly: isInputReadOnly }, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText ||
+                                t('str_channel_min_price', {
+                                    channelMinPrice: pricing_1.PricingService.format.price({
+                                        amount: minPriceAmount ||
+                                            policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].minPayment.amount,
+                                        currency: baseCurrency
+                                    })
+                                }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 12 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: "large", isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
+}
+var S_PriceTextField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+    var inputSize = _a.inputSize;
+    return inputSize &&
+        {
+            small: 'width: 188px;',
+            medium: 'width: 188px;',
+            large: 'width: 432px;',
+            rlarge: 'width: 100%'
+        }[inputSize];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: ".concat(customWidth, ";");
+});
+var small = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 188px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 188px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 188px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 188px;\n"])));
+var large = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var inputSize = _a.inputSize;
+    return (inputSize === 'rlarge' ? '100%' : '432px');
+});
+var normalActionColor = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_pressed;
+});
+var S_Select = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  ", ";\n"], ["\n  display: block;\n  position: absolute;\n  ", ";\n"])), function (_a) {
+    var contextMenuPositionCss = _a.contextMenuPositionCss;
+    return contextMenuPositionCss;
+});
+var S_Error = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_error;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_Badge = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 8px;\n  height: 6px;\n  left: 0;\n  width: 6px;\n"], ["\n  background-color: ", ";\n  border-radius: 8px;\n  height: 6px;\n  left: 0;\n  width: 6px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_69;
+});
+var S_ComponentBox = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  border: solid 2px\n    ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  ", ";\n\n  display: flex;\n\n  ", "\n\n  ", "\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border: solid 2px\n    ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  ", ";\n\n  display: flex;\n\n  ", "\n\n  ", "\n  ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused, state = _a.state;
+    if (state === 'disabled' || state === 'read_only') {
+        return theme.ui_cpnt_textfield_border_disabled;
+    }
+    if (isError) {
+        return theme.ui_cpnt_textfield_border_error;
+    }
+    if (isFocused) {
+        return theme.ui_cpnt_textfield_border_focus;
+    }
+    return theme.ui_cpnt_textfield_border_normal;
+}, function (_a) {
+    var state = _a.state, isInputReadOnly = _a.isInputReadOnly;
+    if (state === 'disabled')
+        return 'not-allowed';
+    if (isInputReadOnly)
+        return 'default';
+    return 'text';
+}, function (_a) {
+    var inputSize = _a.inputSize;
+    return inputSize &&
+        {
+            small: small,
+            medium: medium,
+            large: large,
+            rlarge: large
+        }[inputSize];
+}, transitionStyle_1.InputTransition, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && normalActionColor;
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: ".concat(customWidth, ";");
+});
+var S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  display: flex;\n  flex: 1;\n  height: 100%;\n\n  min-width: 0;\n\n  padding-left: ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  display: flex;\n  flex: 1;\n  height: 100%;\n\n  min-width: 0;\n\n  padding-left: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, state = _a.state, isInputReadOnly = _a.isInputReadOnly;
+    if (isInputReadOnly || state === 'disabled' || state === 'read_only') {
+        return theme.ui_cpnt_textfield_base_disabled;
+    }
+    return theme.ui_cpnt_textfield_base_normal;
+}, function (_a) {
+    var inputSize = _a.inputSize;
+    switch (inputSize) {
+        case 'small':
+            return '8px 0 0 8px';
+        case 'medium':
+            return '10px 0 0 10px';
+        case 'large':
+        case 'rlarge':
+            return '12px 0 0 12px';
+        default:
+            return '12px 0 0 12px';
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var state = _a.state, theme = _a.theme;
+    return state === 'normal' && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "], ["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
+});
+var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n\n  cursor: ", ";\n\n  display: flex;\n  height: 100%;\n  min-width: 50px;\n  outline: none;\n\n  padding: 0 ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n\n  cursor: ", ";\n\n  display: flex;\n  height: 100%;\n  min-width: 50px;\n  outline: none;\n\n  padding: 0 ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, state = _a.state;
+    if (state === 'disabled' || state === 'read_only') {
+        return theme.ui_cpnt_textfield_base_disabled;
+    }
+    return theme.ui_cpnt_textfield_base_normal;
+}, function (_a) {
+    var inputSize = _a.inputSize;
+    switch (inputSize) {
+        case 'small':
+            return '0 8px 8px 0';
+        case 'medium':
+            return '0 10px 10px 0';
+        case 'large':
+        case 'rlarge':
+            return '0 12px 12px 0';
+        default:
+            return '0 12px 12px 0';
+    }
+}, function (_a) {
+    var state = _a.state;
+    switch (state) {
+        case 'disabled':
+            return 'not-allowed';
+        case 'read_only':
+            return 'auto';
+        case 'normal':
+            return 'pointer';
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var state = _a.state, theme = _a.theme;
+    return state === 'normal' && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "], ["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
+});
+exports.default = PriceTextField;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/desktop/components/PriceTextField/index.d.ts

@@ -0,0 +1 @@
+export { default as PriceTextField } from './PriceTextField';

package/dist/src/desktop/components/PriceTextField/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceTextField = void 0;
+var PriceTextField_1 = require("./PriceTextField");
+Object.defineProperty(exports, "PriceTextField", { enumerable: true, get: function () { return __importDefault(PriceTextField_1).default; } });

package/dist/src/desktop/components/PriceTextLabel/PriceTextLabel.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CurrencyCode, ExchangeRateMap, Price } from '../../../core/pricing';
+import type { TextLabelProps } from '../TextLabel/TextLabel';
+type PriceTextLabelProps = Omit<TextLabelProps, 'text' | 'ellipsisMode' | 'lineLimit' | 'userSelectMode' | 'requirementMode' | 'bulletPointMode' | 'wordBreak'> & {
+    price: Price;
+    useFriendlyName?: 'none' | 'use';
+    useMinus?: 'none' | 'use';
+};
+declare function PriceTextLabel({ price, useFriendlyName, useMinus, selectedCurrency, exchangeRates, userCountryCode, ...args }: PriceTextLabelProps & {
+    selectedCurrency?: CurrencyCode;
+    exchangeRates?: ExchangeRateMap;
+    userCountryCode?: string;
+}): JSX.Element;
+export default PriceTextLabel;

package/dist/src/desktop/components/PriceTextLabel/PriceTextLabel.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var pricing_1 = require("../../../core/pricing");
+var TextLabel_1 = require("../TextLabel");
+function PriceTextLabel(_a) {
+    var price = _a.price, _b = _a.useFriendlyName, useFriendlyName = _b === void 0 ? 'none' : _b, _c = _a.useMinus, useMinus = _c === void 0 ? 'none' : _c, selectedCurrency = _a.selectedCurrency, exchangeRates = _a.exchangeRates, userCountryCode = _a.userCountryCode, args = __rest(_a, ["price", "useFriendlyName", "useMinus", "selectedCurrency", "exchangeRates", "userCountryCode"]);
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var targetPrice = price;
+    var formattedAmount = useMinus === 'use' ? "-".concat(targetPrice.amount) : targetPrice.amount;
+    var priceText = pricing_1.PricingService.translate.priceWithCurrency(exchangeRates && selectedCurrency
+        ? pricing_1.PricingService.convertToPreferredPrice({ amount: formattedAmount, currency: price.currency }, selectedCurrency, exchangeRates)
+        : {
+            amount: formattedAmount,
+            currency: userCountryCode
+                ? pricing_1.PricingService.getDefaultPreferredCurrency(userCountryCode.toLocaleLowerCase())
+                : price.currency
+        }, {
+        friendly: useFriendlyName === 'use' ? true : false,
+        translation: t
+    });
+    return (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({}, args, { text: priceText }));
+}
+exports.default = PriceTextLabel;