fannypack-v5/es/Menu/styles-2476c114.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 { space, theme, fontWeight, palette, fontSize } 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 '../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 _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", "rem;\n  font-weight: ", ";\n  letter-spacing: 1px;\n  padding: ", "rem ", "rem;\n  padding-top: ", "rem;\n  text-transform: uppercase;\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n  && {\n    margin: ", "rem 0;\n  }\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-left: ", "rem;\n    "]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-right: ", "rem;\n    "]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  background-color: unset;\n  cursor: pointer;\n  display: block;\n  font-weight: ", ";\n  padding: ", "rem ", "rem;\n  text-align: left;\n  width: 100%;\n  transition: background-color 0.1s;\n\n  a& {\n    color: unset;\n    fill: unset;\n    text-decoration: unset;\n\n    &:hover {\n      color: unset;\n      fill: unset;\n    }\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    & {\n      ", ";\n    }\n  }\n\n  &:not(:disabled):focus {\n    outline: unset;\n    background-color: ", ";\n\n    & {\n      ", ";\n    }\n  }\n  &:not(:disabled):hover {\n    background-color: ", ";\n\n    & {\n      ", ";\n    }\n  }\n  &:not(:disabled):focus:active,\n  &:not(:disabled):hover:active {\n    background-color: ", ";\n  }\n\n  ", "\n\n  & .fp-Icon {\n    vertical-align: -0.125em;\n  }\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  padding: ", "rem 0;\n  width: 100%;\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}
var Menu = function Menu(styleProps) {
  return css(_templateObject(), space(2)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var MenuItem = function MenuItem(styleProps) {
  return css(_templateObject2(), fontWeight('semibold')(styleProps), space(1.5)(styleProps), space(4)(styleProps), theme(styleProps.themeKey, "disabled")(styleProps), palette('white600')(styleProps), theme(styleProps.themeKey, "focus")(styleProps), palette('white600')(styleProps), theme(styleProps.themeKey, "hover")(styleProps), palette('white700')(styleProps), styleProps.isActive && css$1(_templateObject3(), palette('white700')(styleProps), palette('white800')(styleProps), theme(styleProps.themeKey, "active")(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var MenuItemIcon = function MenuItemIcon(styleProps) {
  return css(_templateObject4(), styleProps.isBefore && css$1(_templateObject5(), space(2)(styleProps)), styleProps.isAfter && css$1(_templateObject6(), space(2)(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var MenuDivider = function MenuDivider(styleProps) {
  return css(_templateObject7(), space(2)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var MenuGroup = function MenuGroup(styleProps) {
  return css(_templateObject8(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var MenuGroupTitle = function MenuGroupTitle(styleProps) {
  return css(_templateObject9(), palette('text200')(styleProps), fontSize('100')(styleProps), fontWeight('semibold')(styleProps), space(2)(styleProps), space(4)(styleProps), space(1)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};

var styles = /*#__PURE__*/Object.freeze({
  Menu: Menu,
  MenuItem: MenuItem,
  MenuItemIcon: MenuItemIcon,
  MenuDivider: MenuDivider,
  MenuGroup: MenuGroup,
  MenuGroupTitle: MenuGroupTitle
});

export { Menu as M, MenuItem as a, MenuItemIcon as b, MenuDivider as c, MenuGroup as d, MenuGroupTitle as e, styles as s };