fannypack-v5/es/Alert/styles-9352ddc3.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, keyframes } 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, altitude, 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 '../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 _templateObject29() {
  var data = _taggedTemplateLiteralLoose(["\n  from {\n    width: 100%;\n  }\n\n  to {\n    width: 0%;\n  }\n"]);

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

  return data;
}

function _templateObject28() {
  var data = _taggedTemplateLiteralLoose(["\n  from {\n    height: 100%;\n  }\n\n  to {\n    height: 0%;\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject26() {
  var data = _taggedTemplateLiteralLoose(["\n        animation: ", " ", "ms linear forwards;\n      "]);

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

  return data;
}

function _templateObject25() {
  var data = _taggedTemplateLiteralLoose(["\n        animation: ", " ", "ms linear forwards;\n      "]);

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

  return data;
}

function _templateObject24() {
  var data = _taggedTemplateLiteralLoose(["\n      ", " ", ";\n    "]);

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

  return data;
}

function _templateObject23() {
  var data = _taggedTemplateLiteralLoose(["\n      opacity: 0.3;\n      left: 0;\n    "]);

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

  return data;
}

function _templateObject22() {
  var data = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: ", ";\n    "]);

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

  return data;
}

function _templateObject21() {
  var data = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      width: ", ";\n    "]);

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

  return data;
}

function _templateObject20() {
  var data = _taggedTemplateLiteralLoose(["\n      top: 0;\n    "]);

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

  return data;
}

function _templateObject19() {
  var data = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject17() {
  var data = _taggedTemplateLiteralLoose(["\n        padding: 0;\n      "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject15() {
  var data = _taggedTemplateLiteralLoose(["\n  line-height: 0.9;\n  margin-right: ", "rem;\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-top: ", ";\n    "]);

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

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", ";\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n      display: flex;\n\n      & > *:first-child {\n        margin-right: ", "rem;\n      }\n    "]);

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

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  flex: 1;\n  padding: ", "rem ", "rem;\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n      display: flex;\n\n      & > *:first-child {\n        margin-right: ", "rem;\n      }\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n      display: block;\n    "]);

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

  return data;
}

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

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\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  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n  display: flex;\n  overflow: hidden;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}
var Alert = function Alert(styleProps) {
  return css(_templateObject(), palette('background')(styleProps), borderRadius('default')(styleProps), styleProps.variant === 'bordered' && css$1(_templateObject2(), palette('white800')(styleProps)), styleProps.variant === 'shadowed' && css$1(_templateObject3(), altitude('100')(styleProps)), styleProps.variant === 'tint' && css$1(_templateObject4(), palette(styleProps.type + "Tint")(styleProps)), styleProps.variant === 'fill' && getFillAttributes(styleProps), (styleProps.accent === 'top' || styleProps.accent === 'bottom') && css$1(_templateObject5()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertContent = function AlertContent(styleProps) {
  return css(_templateObject6(), styleProps.isInline && css$1(_templateObject7(), space(1)(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertWrapper = function AlertWrapper(styleProps) {
  return css(_templateObject8(), space(1, 'major')(styleProps), space(2, 'major')(styleProps), styleProps.isInline && css$1(_templateObject9(), space(1)(styleProps)), styleProps.accent === true && css$1(_templateObject10(), styleProps.accentSize), styleProps.accent === 'bottom' && css$1(_templateObject11(), styleProps.accentSize), styleProps.accent === 'top' && css$1(_templateObject12(), styleProps.accentSize), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertTitle = function AlertTitle(styleProps) {
  return css(_templateObject13(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertDescription = function AlertDescription(styleProps) {
  return css(_templateObject14(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertIconWrapper = function AlertIconWrapper(styleProps) {
  return css(_templateObject15(), space(4)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertCloseButton = function AlertCloseButton(styleProps) {
  return css(_templateObject16(), styleProps.isInline && css$1(_templateObject17()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var AlertAccent = function AlertAccent(styleProps) {
  return css(_templateObject18(), palette(styleProps.type)(styleProps), (styleProps.accent === true || styleProps.accent === 'bottom') && css$1(_templateObject19()), styleProps.accent === 'top' && css$1(_templateObject20()), (styleProps.accent === true || styleProps.accent === 'left') && css$1(_templateObject21(), styleProps.accentSize), (styleProps.accent === 'top' || styleProps.accent === 'bottom') && css$1(_templateObject22(), styleProps.accentSize), styleProps.isBackground && css$1(_templateObject23()), !styleProps.isBackground && styleProps.countdown && css$1(_templateObject24(), styleProps.accent === true && css$1(_templateObject25(), heightCountdown, styleProps.countdown), (styleProps.accent === 'top' || styleProps.accent === 'bottom') && css$1(_templateObject26(), widthCountdown, styleProps.countdown)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var getFillAttributes = function getFillAttributes(styleProps) {
  return css$1(_templateObject27(), palette(styleProps.type)(styleProps), palette(styleProps.type + "Inverted")(styleProps));
};
var heightCountdown = keyframes(_templateObject28());
var widthCountdown = keyframes(_templateObject29());

var styles = /*#__PURE__*/Object.freeze({
  Alert: Alert,
  AlertContent: AlertContent,
  AlertWrapper: AlertWrapper,
  AlertTitle: AlertTitle,
  AlertDescription: AlertDescription,
  AlertIconWrapper: AlertIconWrapper,
  AlertCloseButton: AlertCloseButton,
  AlertAccent: AlertAccent,
  getFillAttributes: getFillAttributes,
  heightCountdown: heightCountdown,
  widthCountdown: widthCountdown
});

export { Alert as A, AlertContent as a, AlertWrapper as b, AlertTitle as c, AlertDescription as d, AlertIconWrapper as e, AlertCloseButton as f, AlertAccent as g, getFillAttributes as h, heightCountdown as i, styles as s, widthCountdown as w };