baseui/form-control/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LabelEndEnhancer = exports.LabelContainer = exports.Label = exports.ControlContainer = exports.CaptionMessage = exports.CaptionIcon = exports.Caption = void 0;
var _styles = require("../styles");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const Label = exports.Label = (0, _styles.styled)('label', props => {
  const {
    $disabled,
    $theme: {
      colors,
      typography
    }
  } = props;
  return {
    ...typography.font250,
    width: '100%',
    color: $disabled ? colors.contentSecondary : colors.contentPrimary,
    display: 'block',
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0
  };
});
Label.displayName = "Label";
Label.displayName = 'Label';
const LabelContainer = exports.LabelContainer = (0, _styles.styled)('span', ({
  $theme: {
    sizing
  }
}) => ({
  display: 'flex',
  width: '100%',
  marginTop: sizing.scale300,
  marginRight: 0,
  marginBottom: sizing.scale300,
  marginLeft: 0
}));
LabelContainer.displayName = "LabelContainer";
LabelContainer.displayName = 'LabelContainer';
const LabelEndEnhancer = exports.LabelEndEnhancer = (0, _styles.styled)('span', ({
  $disabled,
  $counterError,
  $theme: {
    colors,
    typography
  }
}) => ({
  ...typography.font100,
  flex: 0,
  width: '100%',
  color: $counterError ? colors.contentNegative : $disabled ? colors.contentStateDisabled : colors.contentPrimary
}));
LabelEndEnhancer.displayName = "LabelEndEnhancer";
LabelEndEnhancer.displayName = 'LabelEndEnhancer';
const Caption = exports.Caption = (0, _styles.styled)('div', props => {
  const {
    $error,
    $positive,
    $theme: {
      colors,
      sizing,
      typography
    }
  } = props;
  let fontColor = colors.contentTertiary;
  if ($error) {
    fontColor = colors.contentNegative;
  } else if ($positive) {
    fontColor = colors.contentPositive;
  }
  return {
    ...typography.font100,
    color: fontColor,
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    marginTop: sizing.scale300,
    marginRight: 0,
    marginBottom: sizing.scale300,
    marginLeft: 0,
    display: 'flex'
  };
});
Caption.displayName = "Caption";
Caption.displayName = 'Caption';
const CaptionMessage = exports.CaptionMessage = (0, _styles.styled)('div', {
  fontFamily: 'inherit',
  fontSize: 'inherit',
  fontWeight: 'inherit',
  lineHeight: 'inherit',
  flexGrow: 1
});
CaptionMessage.displayName = "CaptionMessage";
CaptionMessage.displayName = 'CaptionMessage';
const CaptionIcon = exports.CaptionIcon = (0, _styles.styled)('div', ({
  $theme
}) => ({
  display: 'flex',
  paddingTop: $theme.sizing.scale100,
  paddingRight: $theme.sizing.scale100,
  flexShrink: 0
}));
CaptionIcon.displayName = "CaptionIcon";
CaptionIcon.displayName = 'CaptionIcon';
const ControlContainer = exports.ControlContainer = (0, _styles.styled)('div', props => {
  const {
    $theme: {
      sizing
    }
  } = props;
  return {
    width: '100%',
    marginBottom: sizing.scale600
  };
});
ControlContainer.displayName = "ControlContainer";
ControlContainer.displayName = 'ControlContainer';