design-system-govbr-rnp/dist/components/Tag/styles.js

## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Wrapper = exports.TagIcon = exports.Label = exports.Input = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var typeVariant = function typeVariant(type) {
  return {
    text: (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      border-radius: var(--spacing-scale-half);\n      font-size: var(--font-size-scale-up-01) span {\n        padding-bottom: var(--spacing-scale-half);\n      }\n    "]))),
    status: (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-radius: 100em;\n      background-color: var(--red-vivid-50);\n      box-shadow: 0 0 0 1px var(--pure-0);\n      display: flex;\n      justify-content: flex-start;\n      line-height: var(--font-line-height-low);\n      padding: var(--spacing-scale-half) var(--spacing-scale-base);\n      position: relative;\n      vertical-align: middle;\n      width: var(--spacing-scale-2x);\n      height: var(--spacing-scale-2x);\n      font-weight: var(--font-weight-regular);\n\n      label {\n        margin-left: 14px;\n      }\n    "]))),
    count: (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: 100em;\n      box-shadow: 0 0 0 1px var(--pure-0);\n      display: flex;\n      font-size: var(--font-size-scale-up-01);\n      line-height: 1;\n      min-height: var(--spacing-scale-3xh);\n      min-width: var(--spacing-scale-3xh);\n      height: var(--spacing-scale-3xh);\n      padding: 2px var(--spacing-scale-half);\n      position: relative;\n      text-align: center;\n    "]))),
    icon: (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      border-radius: 50%;\n      padding: 0;\n      text-align: center;\n      width: var(--spacing-scale-4x);\n      height: var(--spacing-scale-4x);\n    "])))
  }[type];
};
var colorVariant = function colorVariant(color) {
  return {
    success: (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-color: var(--green-cool-vivid-50);\n    "]))),
    danger: (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      background-color: var(--red-vivid-50);\n    "]))),
    warning: (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-color: var(--yellow-vivid-20);\n    "]))),
    info: (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      background-color: var(--blue-warm-vivid-60);\n    "])))
  }[color];
};
var textDensity = function textDensity(density) {
  return {
    small: (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-2xh);\n    "]))),
    medium: (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-3xh);\n    "]))),
    large: (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-4xh);\n    "])))
  }[density];
};
var countDensity = function countDensity(density) {
  return {
    small: (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      min-height: var(--spacing-scale-2xh);\n      min-width: var(--spacing-scale-2xh);\n      height: var(--spacing-scale-2xh);\n    "]))),
    medium: (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      min-height: var(--spacing-scale-3xh);\n      min-width: var(--spacing-scale-3xh);\n      height: var(--spacing-scale-3xh);\n    "]))),
    large: (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      min-height: var(--spacing-scale-4xh);\n      min-width: var(--spacing-scale-4xh);\n      height: var(--spacing-scale-4xh);\n    "])))
  }[density];
};
var statusDensity = function statusDensity(density) {
  return {
    small: (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-baseh);\n      width: var(--spacing-scale-baseh);\n\n      label {\n        margin-left: var(--spacing-scale-baseh);\n      }\n    "]))),
    medium: (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-2x);\n      width: var(--spacing-scale-2x);\n    "]))),
    large: (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-3xh);\n      width: var(--spacing-scale-3xh);\n\n      label {\n        margin-left: var(--spacing-scale-3x);\n      }\n    "])))
  }[density];
};
var iconDensity = function iconDensity(density) {
  return {
    small: (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-3xh);\n      width: var(--spacing-scale-3xh);\n    "]))),
    medium: (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-4xh);\n      width: var(--spacing-scale-4xh);\n    "]))),
    large: (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-5xh);\n      width: var(--spacing-scale-5xh);\n    "])))
  }[density];
};
var radioDensity = function radioDensity(density) {
  return {
    small: (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-4xh);\n    "]))),
    medium: (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-5x);\n    "]))),
    large: (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      height: var(--spacing-scale-5xh);\n    "])))
  }[density];
};
var labelDensity = function labelDensity(density) {
  return {
    small: (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      padding: var(--spacing-scale-base);\n    "]))),
    medium: (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      padding: var(--spacing-scale-baseh);\n    "]))),
    large: (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n      padding: var(--spacing-scale-baseh);\n    "])))
  }[density];
};
var switchDensity = function switchDensity(type, density) {
  switch (type) {
    case "text":
      return textDensity(density);
    case "status":
      return statusDensity(density);
    case "count":
      return countDensity(density);
    case "icon":
      return iconDensity(density);
    case "radio":
      return radioDensity(density);
    default:
      return textDensity(type);
  }
};
var Wrapper = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border-radius: var(--spacing-scale-half);\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: var(--font-weight-medium);\n  height: var(--spacing-scale-3xh);\n  justify-content: center;\n  padding: ", ";\n  vertical-align: top;\n\n  span {\n    margin: var(--spacing-scale-half);\n  }\n\n  &:hover {\n    background-image: ", ";\n  }\n\n  input:focus:checked + label,\n  input:focus + label {\n    outline: 0;\n  }\n\n  input {\n    opacity: 0;\n    width: 0;\n  }\n\n  input + label {\n    cursor: pointer;\n  }\n\n  input + label::after {\n    content: \"\";\n    display: none;\n    height: 20px;\n    left: 0;\n    width: 20px;\n  }\n\n  input:checked + label::after {\n    border: solid var(--color-secondary-01);\n    border-width: 0 3px 3px 0;\n    content: \"\";\n    display: inline-block;\n    height: var(--icon-size-sm);\n    margin: auto var(--spacing-scale-base);\n    transform: rotate(45deg);\n    width: 8px;\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (props) {
  return props !== null && props !== void 0 && props.bgColor ? props === null || props === void 0 ? void 0 : props.bgColor : "var(--blue-warm-vivid-70)";
}, function (props) {
  return props !== null && props !== void 0 && props.txtColor ? props === null || props === void 0 ? void 0 : props.txtColor : "var(--pure-0)";
}, function (props) {
  return (props === null || props === void 0 ? void 0 : props.type) === "radio" ? "var(--font-size-scale-up-01)" : "var(--font-size-scale-base)";
}, function (props) {
  return props.type === "radio" ? "0px" : "var(--spacing-scale-base)";
}, function (props) {
  return props.type === "radio" && "linear-gradient(rgba(var(--rgb-secondary-01), 0.3), rgba(var(--rgb-secondary-01), 0.3))";
}, function (_ref) {
  var color = _ref.color;
  return colorVariant(color);
}, function (_ref2) {
  var type = _ref2.type;
  return typeVariant(type);
}, function (_ref3) {
  var type = _ref3.type,
    density = _ref3.density;
  return switchDensity(type, density);
});
exports.Wrapper = Wrapper;
var TagIcon = (0, _styledComponents.default)(_reactFontawesome.FontAwesomeIcon)(function (props) {
  return {
    fontSize: "var(--icon-size-base)",
    fontWeight: "var(--font-weight-black)",
    height: "var(--icon-size-base)",
    textAlign: "center",
    padding: "0 var(--spacing-scale-half)"
  };
});
exports.TagIcon = TagIcon;
var Label = _styledComponents.default.label(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  color: var(--color-secondary-01);\n  font-size: var(--font-size-scale-base);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-medium);\n  border-radius: var(--spacing-scale-half);\n\n  ", "\n"])), function (_ref4) {
  var density = _ref4.density;
  return labelDensity(density);
});
exports.Label = Label;
var Input = _styledComponents.default.input(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  opacity: 0;\n  position: absolute;\n  width: 0;\n\n  &:focus:checked + label {\n    outline-color: var(--gold-vivid-40);\n    outline-offset: var(--spacing-scale-half);\n    outline-style: dashed;\n    outline-width: var(--surface-width-lg);\n  }\n\n  &:focus + label {\n    outline-color: var(--gold-vivid-40);\n    outline-offset: var(--spacing-scale-half);\n    outline-style: dashed;\n    outline-width: var(--surface-width-lg);\n  }\n\n  + label {\n    cursor: pointer;\n\n    &::after {\n      content: \"\";\n      display: none;\n      height: 20px;\n      left: 0;\n      width: 20px;\n    }\n  }\n\n  &:checked + label::after {\n    border: solid var(--color-secondary-01);\n    border-width: 0 3px 3px 0;\n    content: \"\";\n    display: inline-block;\n    height: var(--icon-size-sm);\n    margin: auto var(--spacing-scale-base);\n    transform: rotate(45deg);\n    width: 8px;\n  }\n"])));
exports.Input = Input;