fannypack-v5/es/Button/styles-7847dc2c.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, fontWeight, space, theme, 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 { 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';
import getDefaultPalette from '../theme/palette.js';

function _templateObject23() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    background-color: unset;\n    border: unset;\n    color: ", ";\n    fill: ", ";\n    box-shadow: unset;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.05);\n    }\n    &:hover:active {\n      background-color: rgba(0, 0, 0, 0.1);\n    }\n  }\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject20() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    border: 0;\n    background: unset;\n    color: ", ";\n    fill: ", ";\n    text-decoration: underline;\n    box-shadow: unset;\n\n    &:hover {\n      color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject17() {
  var data = _taggedTemplateLiteralLoose(["\n      border-color: transparent;\n    "]);

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

  return data;
}

function _templateObject16() {
  var data = _taggedTemplateLiteralLoose(["\n  &:focus {\n    outline: unset;\n    z-index: 2;\n    box-shadow: ", " 0px 0px 0px\n        1px,\n      ", " 0px 0px 0px 3px;\n\n    ", ";\n\n    & {\n      ", ";\n    }\n  }\n\n  ", ";\n\n  ", ";\n"]);

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

  return data;
}

function _templateObject15() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    cursor: default;\n    outline: unset;\n\n    &:focus {\n      box-shadow: unset !important;\n      outline: unset !important;\n    }\n  }\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject14() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    cursor: not-allowed;\n    position: relative;\n\n    &:focus {\n      box-shadow: unset !important;\n      outline: unset !important;\n    }\n  }\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject13() {
  var data = _taggedTemplateLiteralLoose(["\n      & {\n        font-size: ", "em;\n        min-height: 3.25rem;\n        padding: 0 ", "rem;\n      }\n      & {\n        ", ";\n      }\n    "]);

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

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n      & {\n        min-height: 3rem;\n        padding: 0 ", "rem;\n      }\n      & {\n        ", ";\n      }\n    "]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    cursor: not-allowed;\n    opacity: 0.7;\n    outline: unset;\n    pointer-events: unset;\n  }\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n  && {\n    min-height: unset;\n    padding: ", "em;\n  }\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & + .fp-Text {\n    opacity: 0;\n  }\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-left: -", "em;\n      margin-right: ", "em;\n\n      & {\n        ", ";\n      }\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.05);\n  color: ", ";\n  fill: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  font-weight: ", ";\n  min-height: 2.75rem;\n  justify-content: center;\n  padding: 0 ", "rem;\n  text-decoration: none;\n  hyphens: auto;\n  transition: box-shadow 0.1s ease-in-out 0s, border 0.1s, background-color 0.1s;\n\n  ", "\n\n  & {\n    ", ";\n  }\n\n  &[disabled],\n  &[aria-disabled=\"true\"] {\n    ", ";\n  }\n\n  ", "\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"]);

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

  return data;
}
var defaultPalette = getDefaultPalette({});
var Button = function Button(styleProps) {
  return css(_templateObject(), palette(styleProps.palette)(styleProps), borderRadius('default')(styleProps), palette(styleProps.palette + "Inverted")(styleProps), palette(styleProps.palette + "Inverted")(styleProps), fontWeight('semibold')(styleProps), space(4)(styleProps), styleProps.palette === 'default' && css$1(_templateObject2(), palette('white900')(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps), getDisabledProperties(styleProps), styleProps.size && getSizeProperties(styleProps), styleProps.isLoading && getLoadingProperties(styleProps), styleProps.isStatic && getStaticProperties(styleProps), isInteractive(styleProps) && getInteractiveProperties(styleProps), styleProps.variant === 'outlined' && getOutlinedProperties(styleProps), styleProps.variant === 'link' && getLinkProperties(styleProps), styleProps.variant === 'ghost' && getGhostProperties(styleProps));
};
var ButtonIcon = function ButtonIcon(styleProps) {
  return css(_templateObject3(), styleProps.isBefore && css$1(_templateObject4(), space(1)(styleProps), space(2)(styleProps), theme(styleProps.themeKey, "css.before")(styleProps)), styleProps.isAfter && css$1(_templateObject5(), space(2)(styleProps), space(1)(styleProps), theme(styleProps.themeKey, "css.after")(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var ButtonSpinnerWrapper = function ButtonSpinnerWrapper(styleProps) {
  return css(_templateObject6(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var ButtonSpinner = function ButtonSpinner(styleProps) {
  return css(_templateObject7(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var ButtonClose = function ButtonClose(styleProps) {
  return css(_templateObject8(), space(2)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var isInteractive = function isInteractive(styleProps) {
  return !styleProps.isStatic && !styleProps.isLoading && !styleProps.disabled && styleProps.variant !== 'link';
};
var getDisabledProperties = function getDisabledProperties(styleProps) {
  return css$1(_templateObject9(), theme(styleProps.themeKey, "css.disabled")(styleProps));
};
var getSizeProperties = function getSizeProperties(styleProps) {
  var styles = {
    small: css$1(_templateObject10(), fontSize('100')(styleProps), space(3)(styleProps), theme(styleProps.themeKey, "css.sizes.small")(styleProps)),
    default: css$1(_templateObject11(), theme(styleProps.themeKey, "css.sizes.default")(styleProps)),
    medium: css$1(_templateObject12(), space(5)(styleProps), theme(styleProps.themeKey, "css.sizes.medium")(styleProps)),
    large: css$1(_templateObject13(), fontSize('300')(styleProps), space(6)(styleProps), theme(styleProps.themeKey, "css.sizes.large")(styleProps))
  };
  return styles[styleProps.size];
};
var getLoadingProperties = function getLoadingProperties(styleProps) {
  return css$1(_templateObject14(), theme(styleProps.themeKey, "css.loading")(styleProps));
};
var getStaticProperties = function getStaticProperties(styleProps) {
  return css$1(_templateObject15(), theme(styleProps.themeKey, "css.static")(styleProps));
};
var getInteractiveProperties = function getInteractiveProperties(styleProps) {
  return css$1(_templateObject16(), palette(styleProps.palette === 'default' ? 'gray200' : styleProps.palette)(styleProps), palette(styleProps.palette === 'default' ? 'gray100' : styleProps.palette + "200")(styleProps), styleProps.palette === 'default' && css$1(_templateObject17()), theme(styleProps.themeKey, "css.focus")(styleProps), styleProps.variant !== 'link' && css$1(_templateObject18(), palette((styleProps.palette === 'default' ? 'white' : styleProps.palette) + "600")(styleProps), theme(styleProps.themeKey, "css.hover")(styleProps)), styleProps.variant !== 'link' && css$1(_templateObject19(), palette(styleProps.palette === 'default' ? 'white800' : styleProps.palette + "700")(styleProps), theme(styleProps.themeKey, "css.hoveractive")(styleProps)));
};
var getLinkProperties = function getLinkProperties(styleProps) {
  return css$1(_templateObject20(), styleProps.palette === 'default' ? palette('text', defaultPalette.text)(styleProps) : palette(styleProps.palette)(styleProps), styleProps.palette === 'default' ? palette('text', defaultPalette.text)(styleProps) : palette(styleProps.palette)(styleProps), styleProps.palette === 'default' ? darken(0.4, 'text')(styleProps) : darken(0.4, styleProps.palette)(styleProps), styleProps.palette === 'default' ? darken(0.4, 'text')(styleProps) : darken(0.4, styleProps.palette)(styleProps), theme(styleProps.themeKey, "css.link")(styleProps));
};
var getOutlinedProperties = function getOutlinedProperties(styleProps) {
  return css$1(_templateObject21(), palette()(styleProps), palette()(styleProps), palette()(styleProps), isInteractive(styleProps) && css$1(_templateObject22(), palette()(styleProps), palette(styleProps.palette + "Inverted")(styleProps), palette(styleProps.palette + "Inverted")(styleProps)), theme(styleProps.themeKey, "css.outlined")(styleProps));
};
var getGhostProperties = function getGhostProperties(styleProps) {
  return css$1(_templateObject23(), styleProps.palette === 'default' ? palette('defaultInverted')(styleProps) : palette()(styleProps), styleProps.palette === 'default' ? palette('defaultInverted')(styleProps) : palette()(styleProps), theme(styleProps.themeKey, "css.ghost")(styleProps));
};

var styles = /*#__PURE__*/Object.freeze({
  Button: Button,
  ButtonIcon: ButtonIcon,
  ButtonSpinnerWrapper: ButtonSpinnerWrapper,
  ButtonSpinner: ButtonSpinner,
  ButtonClose: ButtonClose,
  isInteractive: isInteractive,
  getDisabledProperties: getDisabledProperties,
  getSizeProperties: getSizeProperties,
  getLoadingProperties: getLoadingProperties,
  getStaticProperties: getStaticProperties,
  getInteractiveProperties: getInteractiveProperties,
  getLinkProperties: getLinkProperties,
  getOutlinedProperties: getOutlinedProperties,
  getGhostProperties: getGhostProperties
});

export { Button as B, ButtonIcon as a, ButtonSpinnerWrapper as b, ButtonSpinner as c, ButtonClose as d, getSizeProperties as e, getLoadingProperties as f, getDisabledProperties as g, getStaticProperties as h, isInteractive as i, getInteractiveProperties as j, getLinkProperties as k, getOutlinedProperties as l, getGhostProperties as m, styles as s };