@geneui/components/KeyValue/index.js

The Gene UI components library designed for BI tools

import { _ as __rest } from '../tslib.es6-f211516f.js';
import React__default from 'react';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import 'prop-types';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .geneKeyValue{align-items:flex-start;display:flex;flex-wrap:wrap;width:100%}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue--horizontal{align-items:center;flex-wrap:nowrap}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue__icon{padding:0 0 0 8px}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue__label{color:#3c4043b3;flex:1 1;font-size:12px;font-weight:600;line-height:24px;margin:0 0 1rem 1rem;max-width:100%;width:100%}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue__label--horizontal{flex:none;margin:0 0 0 1rem;max-width:50%;width:auto}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue__value{font-size:14px;font-weight:600;line-height:24px;margin:0 1rem;max-width:100%;width:100%}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue__value--horizontal{margin:0 1rem;max-width:50%}[data-gene-ui-version=\"2.16.5\"] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 4.2rem}[data-gene-ui-version=\"2.16.5\"] [dir=rtl] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 0}[data-gene-ui-version=\"2.16.5\"] [dir=rtl] .geneKeyValue__label{direction:ltr;margin:0 1rem 1rem 0}[data-gene-ui-version=\"2.16.5\"] [dir=rtl] .geneKeyValue__label--horizontal{margin:0 0 0 1rem}[data-gene-ui-version=\"2.16.5\"] [dir=rtl] .geneKeyValue__value{direction:ltr}[data-gene-ui-version=\"2.16.5\"] [dir=rtl] .geneKeyValue__iconWrapper+p:not(.geneKeyValue__label--horizontal){margin:0 0 1rem}";
styleInject(css_248z);

// TODO need to refine where is using restProps
const KeyValue = (_a) => {
    var { label, value, className, icon, appearance = 'horizontal' } = _a, restProps = __rest(_a, ["label", "value", "className", "icon", "appearance"]);
    return (React__default.createElement("div", Object.assign({}, restProps, { className: classnames(`geneKeyValue geneKeyValue--${appearance}`, className) }),
        icon && (React__default.createElement("div", { className: "geneKeyValue__iconWrapper" },
            React__default.createElement(Icon, { type: icon, className: 'geneKeyValue__icon' }))),
        React__default.createElement("p", { role: "heading", "aria-level": 1, className: `geneKeyValue__label geneKeyValue__label--${appearance} ellipsis-text` }, label),
        React__default.createElement("p", { className: `geneKeyValue__value geneKeyValue__value--${appearance} ellipsis-text` }, value)));
};

export { KeyValue as default };