'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useGDS } from "../hooks/index.js";
import { cn } from "../utils/index.js";
import { Field } from "./base/Field.js";
import { Button } from "./Button.js";
import { Input } from "./Input.js";
export function CurrencyInput({ currency = 'GRT', convertedAmount, convertedCurrency = 'USD', onMaxClicked, className, ...props }) {
    useGDS();
    return (_jsx(Input, { type: "number", unit: currency, action: onMaxClicked ? (_jsx(Button, { disabled: props.disabled || props.readOnly, onClick: onMaxClicked, children: "Max" })) : null, className: cn('gds-currency-input', className), ...props, renderInput: (renderProps, { decoratedInput }) => (_jsxs(Field.Box, { ...renderProps, children: [decoratedInput, convertedAmount ? (_jsxs("div", { className: `
                flex items-center pb-px text-caption transition
                @state-blank/field:@state-not-disabled/field:text-form-placeholder
                @prop-size-small/field:h-7
                @prop-size-small/field:px-2
                @prop-size-small/field:text-10
                @prop-size-medium/field:h-8
                @prop-size-medium/field:px-3
                @prop-size-medium/field:text-12
                @prop-size-large/field:h-8
                @prop-size-large/field:px-3
                @prop-size-large/field:text-12
              `, children: [_jsx("div", { className: `
                  absolute inset-x-px -top-px border-t border-form-idle transition
                  @state-not-enabled/field:border-form-disabled
                ` }), _jsx("div", { className: "w-0 flex-1 truncate", children: `= ${convertedAmount} ${convertedCurrency}` })] })) : null] })) }));
}
//# sourceMappingURL=CurrencyInput.js.map