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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { withTheme } from 'styled-components';
import Copy from './copy.js';
import Header from './header.js';
import isRebrand from './is-rebrand.js';
const Label = styled(Copy).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1wlhkim" }) ``;
const LabelAlignmentWrapper = styled.div.withConfig({ displayName: "brc-sc-LabelAlignmentWrapper", componentId: "brc-sc-8oap77" }) `
  display: flex;
  height: 30px;
  align-items: flex-end;
`;
const Value = styled(Header).attrs(() => ({ size: 'md', as: Copy })).withConfig({ displayName: "brc-sc-Value", componentId: "brc-sc-a2umut" }) `
  min-height: 30px;
  word-break: break-word;
  ${({ theme }) => isRebrand(theme) && 'font-weight: 800;'}
`;
const Wrapper = styled.div.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-19v3wgr" }) `
  width: 122px;
  max-width: 270px;
  display: flex;
  flex-flow: column nowrap;
  border-bottom: solid 1px ${({ theme }) => (isRebrand(theme) ? 'none' : theme.neutral300)};
  border-top: solid 1px ${({ theme }) => (isRebrand(theme) ? 'none' : theme.white)};
  padding-bottom: 16px;
  padding-top: 16px;
  flex-grow: 1;
`;
const Container = styled.div.withConfig({ displayName: "brc-sc-Container", componentId: "brc-sc-zkg2rl" }) `
  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;
    }
  }
`;
export const LabelOverValue = withTheme(({ value = '', label = '', theme }) => (_jsxs(Wrapper, { children: [_jsx(LabelAlignmentWrapper, { children: _jsx(Label, Object.assign({ size: isRebrand(theme) ? 'md' : 'xs' }, { children: label })) }), _jsx(Value, { children: value })] })));
export const LabelOverValueContainer = ({ children = [], borderColor }) => (_jsx(Container, Object.assign({ length: children.length, borderColor: borderColor }, { children: children })));
//# sourceMappingURL=label-over-value.js.map