fannypack-v5/es/Switch/styles-56f84734.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, fontWeight } 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 { tint } 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 { getHiddenInputStyles } from '../utils/getHiddenInputStyles.js';

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\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    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      content: '';\n      border-radius: 100%;\n      border: 1px solid #bdbdbd;\n      height: 1em;\n      width: 1em;\n      top: 0.2em;\n      left: 0.2em;\n      transition: all ease 0.2s;\n      position: absolute;\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      left: 1.25em;\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border-color: ", ";\n    "]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      transition: all ease 0.2s;\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border: 1px solid #bdbdbd;\n  border-radius: 1em;\n  height: 1.5em;\n  position: relative;\n  width: 2.5em;\n  transition: box-shadow 0.1s ease-in-out 0s, border-color 0.1s, background-color 0.1s;\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  && {\n    display: flex;\n    align-items: center;\n  }\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}
var Switch = function Switch(styleProps) {
  return css(_templateObject(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SwitchIcon = function SwitchIcon(styleProps) {
  return css(_templateObject2(), palette('background')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SwitchLabel = function SwitchLabel(styleProps) {
  return css(_templateObject3(), fontWeight('normal')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var HiddenSwitch = function HiddenSwitch(styleProps) {
  return getHiddenInputStyles({
    iconClassName: 'fp-SwitchIcon',
    checkedCss: css$1(_templateObject4(), palette(styleProps.palette || 'primary')(styleProps)),
    disabledCheckedCss: css$1(_templateObject5(), tint(0.5, styleProps.palette || 'primary')(styleProps), tint(0.5, styleProps.palette || 'primary')(styleProps)),
    disabledUncheckedIconCss: css$1(_templateObject6(), palette('white700')(styleProps)),
    checkedIconCss: css$1(_templateObject7(), palette(styleProps.palette || 'primary')(styleProps)),
    disabledCheckedIconCss: css$1(_templateObject8(), tint(0.5, styleProps.palette || 'primary')(styleProps)),
    uncheckedIconCss: css$1(_templateObject9(), palette('background')(styleProps)),
    styleProps: styleProps,
    themeKey: 'Switch.Icon'
  });
};
var SwitchGroup = function SwitchGroup(styleProps) {
  return css(_templateObject10(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SwitchField = function SwitchField(styleProps) {
  return css(_templateObject11(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SwitchGroupField = function SwitchGroupField(styleProps) {
  return css(_templateObject12(), theme(styleProps.themeKey, "css.root")(styleProps));
};

var styles = /*#__PURE__*/Object.freeze({
  Switch: Switch,
  SwitchIcon: SwitchIcon,
  SwitchLabel: SwitchLabel,
  HiddenSwitch: HiddenSwitch,
  SwitchGroup: SwitchGroup,
  SwitchField: SwitchField,
  SwitchGroupField: SwitchGroupField
});

export { HiddenSwitch as H, Switch as S, SwitchIcon as a, SwitchLabel as b, SwitchGroup as c, SwitchField as d, SwitchGroupField as e, styles as s };