"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Xaxis = void 0;
const react_1 = __importDefault(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const pretty_number_1 = require("@based/pretty-number");
const Xaxis = ({ axisValues, spacing, valueFormat = 'number-short', }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            display: 'flex',
            position: 'relative',
            justifyContent: 'space-between',
            width: '100%',
            borderTop: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal')}`,
            marginTop: !spacing || spacing < 6 ? 12 : spacing,
        } }, axisValues.map((item, idx) => (react_1.default.createElement(Text_1.Text, { key: idx, size: 12, light: true, style: {
            transform: idx === 0 ? 'translateX(-50%)' : 'translateX(50%)',
        } }, (0, pretty_number_1.prettyNumber)(item, valueFormat))))));
};
exports.Xaxis = Xaxis;
//# sourceMappingURL=Xaxis.js.map