fannypack-v5/es/Tag/styles-96e0a7ff.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import { css } from 'emotion';
import { css as css$1 } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { palette, borderRadius, fontSize, fontWeight, theme, space } from '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import { darken } from '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n    font-size: 1.25em;\n    height: 2.5rem;\n    & {\n      ", ";\n    }\n  "]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n    font-size: 1em;\n    height: 2rem;\n    & {\n      ", ";\n    }\n  "]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n    & {\n      ", ";\n    }\n  "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    background-color: unset;\n    border: 1px solid ", ";\n    color: ", ";\n    fill: ", ";\n  }\n  & {\n    ", ";\n  }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n        background-color: unset;\n        color: ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n  &&& {\n    background-color: ", ";\n    color: ", ";\n    fill: ", ";\n    height: 1.5em;\n    padding: 0 ", "em;\n    margin-right: ", "em;\n    margin-left: -", "em;\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:focus {\n      box-shadow: unset;\n    }\n\n    ", "\n\n    & {\n      ", ";\n    }\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  display: flex;\n  height: inherit;\n  padding: 0 ", "em;\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  color: ", ";\n  display: inline-flex;\n  fill: ", ";\n  font-size: ", "rem;\n  font-weight: ", ";\n  height: 1.5rem;\n  justify-content: center;\n\n  ", "\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var Tag = function Tag(styleProps) {
  return css(_templateObject(), palette(styleProps.palette)(styleProps), borderRadius('default')(styleProps), palette(styleProps.palette + "Inverted")(styleProps), palette(styleProps.palette + "Inverted")(styleProps), fontSize('100')(styleProps), fontWeight('semibold')(styleProps), styleProps.variant === 'outlined' && outlinedProperties(styleProps), styleProps.size && sizeProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TagContent = function TagContent(styleProps) {
  return css(_templateObject2(), space(3)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TagClose = function TagClose(styleProps) {
  return css(_templateObject3(), palette(styleProps.palette)(styleProps), palette(styleProps.palette + "Inverted")(styleProps), palette(styleProps.palette + "Inverted")(styleProps), space(1)(styleProps), space(1)(styleProps), space(1)(styleProps), darken(0.1, styleProps.palette)(styleProps), styleProps.variant === 'outlined' && css$1(_templateObject4(), palette(styleProps.palette)(styleProps), palette('white700')(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var outlinedProperties = function outlinedProperties(styleProps) {
  return css(_templateObject5(), palette(styleProps.palette)(styleProps), palette(styleProps.palette)(styleProps), palette(styleProps.palette)(styleProps), theme(styleProps.themeKey, "css.outlined")(styleProps));
};
var sizeProperties = function sizeProperties(styleProps) {
  var sizes = {
    default: css(_templateObject6(), theme(styleProps.themeKey, "css.sizes.default")(styleProps)),
    medium: css(_templateObject7(), theme(styleProps.themeKey, "css.sizes.medium")(styleProps)),
    large: css(_templateObject8(), theme(styleProps.themeKey, "css.sizes.large")(styleProps))
  };
  return sizes[styleProps.size];
};

var styles = /*#__PURE__*/Object.freeze({
  Tag: Tag,
  TagContent: TagContent,
  TagClose: TagClose,
  outlinedProperties: outlinedProperties,
  sizeProperties: sizeProperties
});

export { Tag as T, TagContent as a, TagClose as b, styles as c, outlinedProperties as o, sizeProperties as s };