@navinc/base-react-components/cjs/label-over-value.js

Nav's Pattern Library

"use strict";
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.LabelOverValueContainer = exports.LabelOverValue = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importStar(require("styled-components"));
const copy_js_1 = __importDefault(require("./copy.js"));
const header_js_1 = __importDefault(require("./header.js"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const Label = (0, styled_components_1.default)(copy_js_1.default).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-dng2io" }) ``;
const LabelAlignmentWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-LabelAlignmentWrapper", componentId: "brc-sc-1rsja8c" }) `
  display: flex;
  height: 30px;
  align-items: flex-end;
`;
const Value = (0, styled_components_1.default)(header_js_1.default).attrs(() => ({ size: 'md', as: copy_js_1.default })).withConfig({ displayName: "brc-sc-Value", componentId: "brc-sc-11hdth2" }) `
  min-height: 30px;
  word-break: break-word;
  ${({ theme }) => (0, is_rebrand_js_1.default)(theme) && 'font-weight: 800;'}
`;
const Wrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-myhckf" }) `
  width: 122px;
  max-width: 270px;
  display: flex;
  flex-flow: column nowrap;
  border-bottom: solid 1px ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? 'none' : theme.neutral300)};
  border-top: solid 1px ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? 'none' : theme.white)};
  padding-bottom: 16px;
  padding-top: 16px;
  flex-grow: 1;
`;
const Container = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Container", componentId: "brc-sc-ldg4r2" }) `
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  ${({ borderColor }) => (borderColor ? `border: 1px solid ${borderColor}` : '')};
  border-radius: 4px;
  padding: 16px;
  flex-grow: ${({ length = 1 }) => length};
  flex-shrink: ${({ length = 1 }) => length};
  margin-top: -16px; /* these margin-tops are to give space between rows when they wrap */
  margin-right: -16px;

  & > * {
    margin-right: 16px;
    margin-top: 16px;
  }

  & > & {
    margin-top: 16px;
    margin-right: 16px;

    & > ${Wrapper} {
      margin-top: 0;
      border: none;
      padding-bottom: 0;
      padding-top: 0;
    }
  }
`;
exports.LabelOverValue = (0, styled_components_1.withTheme)(({ value = '', label = '', theme }) => ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(LabelAlignmentWrapper, { children: (0, jsx_runtime_1.jsx)(Label, Object.assign({ size: (0, is_rebrand_js_1.default)(theme) ? 'md' : 'xs' }, { children: label })) }), (0, jsx_runtime_1.jsx)(Value, { children: value })] })));
const LabelOverValueContainer = ({ children = [], borderColor }) => ((0, jsx_runtime_1.jsx)(Container, Object.assign({ length: children.length, borderColor: borderColor }, { children: children })));
exports.LabelOverValueContainer = LabelOverValueContainer;
//# sourceMappingURL=label-over-value.js.map