fannypack-v5/es/Input/styles-2c64b479.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 { theme, palette, borderRadius, 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 _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n      font-size: ", "rem;\n\n      & {\n        ", ";\n      }\n    "]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n      font-size: ", "rem;\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    font-size: inherit;\n    align-items: center;\n    display: flex;\n    position: absolute;\n    height: 2.75em;\n    margin: 0 0.75em;\n    top: 0;\n    right: 0;\n    z-index: 2;\n\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n  && {\n    fill: ", ";\n    height: 2.75em;\n    margin: 0 0.75em;\n    top: 0;\n\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n      & {\n        border-color: ", ";\n        box-shadow: ", " 0px 0px 0px 3px !important;\n      }\n    "]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  height: 2.75em;\n  width: 100%;\n  padding: 0.4em 0.8em;\n  transition: box-shadow 0.1s ease-in-out 0s, border-color 0.1s, background-color 0.1s;\n\n  &[disabled] {\n    background-color: ", ";\n    box-shadow: unset;\n    cursor: not-allowed;\n\n    & {\n      ", ";\n    }\n  }\n\n  &:focus {\n    outline: unset;\n    z-index: 2;\n    border-color: ", ";\n    box-shadow: ", " 0px 0px 0px 3px !important;\n\n    & {\n      ", ";\n    }\n  }\n\n  &::placeholder {\n    opacity: 0.6;\n\n    & {\n      ", ";\n    }\n  }\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  position: relative;\n  width: 100%;\n\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}
var InputWrapper = function InputWrapper(styleProps) {
  return css(_templateObject(), styleProps.size && wrapperSizeProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var Input = function Input(styleProps) {
  return css(_templateObject2(), palette('white900')(styleProps), borderRadius('default')(styleProps), palette('white700')(styleProps), theme(styleProps.themeKey, "css.disabled")(styleProps), palette('primary')(styleProps), palette('primaryTint')(styleProps), theme(styleProps.themeKey, "css.focus")(styleProps), theme(styleProps.themeKey, "css.placeholder")(styleProps), styleProps.state && css$1(_templateObject3(), palette("" + styleProps.state)(styleProps), palette(styleProps.state + "Tint")(styleProps)), (styleProps.after || styleProps.isLoading) && css$1(_templateObject4()), styleProps.before && css$1(_templateObject5()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var InputIcon = function InputIcon(styleProps) {
  return css(_templateObject6(), palette('text100')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var InputSpinner = function InputSpinner(styleProps) {
  return css(_templateObject7(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var InputField = function InputField(styleProps) {
  return css(_templateObject8(), theme(styleProps.themeKey, "css.root")(styleProps));
};
function wrapperSizeProperties(styleProps) {
  var properties = {
    small: css$1(_templateObject9(), fontSize('150')(styleProps), theme(styleProps.themeKey, "css.sizes.small")(styleProps)),
    default: css$1(_templateObject10(), theme(styleProps.themeKey, "css.sizes.default")(styleProps)),
    medium: css$1(_templateObject11(), fontSize('300')(styleProps), theme(styleProps.themeKey, "css.sizes.medium")(styleProps)),
    large: css$1(_templateObject12(), fontSize('400')(styleProps), theme(styleProps.themeKey, "css.sizes.large")(styleProps))
  };
  return properties[styleProps.size];
}

var styles = /*#__PURE__*/Object.freeze({
  InputWrapper: InputWrapper,
  Input: Input,
  InputIcon: InputIcon,
  InputSpinner: InputSpinner,
  InputField: InputField,
  wrapperSizeProperties: wrapperSizeProperties
});

export { InputWrapper as I, Input as a, InputIcon as b, InputSpinner as c, InputField as d, styles as s, wrapperSizeProperties as w };