fannypack-v5
Version:
An accessible, composable, and friendly React UI Kit
366 lines (303 loc) • 12.8 kB
JavaScript
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, altitude, theme, space, 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 '../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 { d as getAnimatedAttributes } from '../Modal/styles-70c71d7d.js';
function _templateObject20() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n "]);
_templateObject20 = function _templateObject20() {
return data;
};
return data;
}
function _templateObject19() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject19 = function _templateObject19() {
return data;
};
return data;
}
function _templateObject18() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject18 = function _templateObject18() {
return data;
};
return data;
}
function _templateObject17() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject17 = function _templateObject17() {
return data;
};
return data;
}
function _templateObject16() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject16 = function _templateObject16() {
return data;
};
return data;
}
function _templateObject15() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject15 = function _templateObject15() {
return data;
};
return data;
}
function _templateObject14() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject14 = function _templateObject14() {
return data;
};
return data;
}
function _templateObject13() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject13 = function _templateObject13() {
return data;
};
return data;
}
function _templateObject12() {
var data = _taggedTemplateLiteralLoose(["\n ", ";\n\n & {\n ", ";\n }\n "]);
_templateObject12 = function _templateObject12() {
return data;
};
return data;
}
function _templateObject11() {
var data = _taggedTemplateLiteralLoose(["\n display: grid;\n overflow: hidden;\n\n & > svg {\n background-color: transparent;\n\n & .stroke {\n fill: ", ";\n }\n & .fill {\n fill: ", ";\n }\n }\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 background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 19900409;\n\n\n ", ";\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 justify-content: flex-end;\n "]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = _taggedTemplateLiteralLoose(["\n justify-content: space-between;\n "]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = _taggedTemplateLiteralLoose(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid ", ";\n padding: ", "rem ", "rem;\n\n ", ";\n\n ", ";\n\n & {\n ", ";\n }\n"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteralLoose(["\n font-weight: ", ";\n\n & {\n ", ";\n }\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteralLoose(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding: ", "rem ", "rem;\n\n & {\n ", ";\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteralLoose(["\n padding: ", "rem ", "rem;\n\n & {\n ", ";\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n border-radius: ", ";\n max-width: 350px;\n z-index: 19900410;\n\n ", ";\n\n ", "\n\n &:focus {\n outline: none;\n box-shadow: ", " 0px 0px 0px 3px;\n }\n\n & {\n ", ";\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var Popover = function Popover(styleProps) {
return css(_templateObject(), palette('background')(styleProps), borderRadius('default')(styleProps), altitude('200')(styleProps), getPlacementAttributes(styleProps), palette('primary200')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverContent = function PopoverContent(styleProps) {
return css(_templateObject2(), space(2, 'minor')(styleProps), space(3, 'minor')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverHeader = function PopoverHeader(styleProps) {
return css(_templateObject3(), palette('white800')(styleProps), space(2, 'minor')(styleProps), space(3, 'minor')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverTitle = function PopoverTitle(styleProps) {
return css(_templateObject4(), fontWeight('semibold')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverFooter = function PopoverFooter(styleProps) {
return css(_templateObject5(), palette('white800')(styleProps), space(2, 'minor')(styleProps), space(3, 'minor')(styleProps), styleProps.showActionButtons && styleProps.footer && css$1(_templateObject6()), styleProps.showActionButtons && !styleProps.footer && css$1(_templateObject7()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverClose = function PopoverClose(styleProps) {
return css(_templateObject8(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverBackdrop = function PopoverBackdrop(styleProps) {
return css(_templateObject9(), getAnimatedAttributes({})(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverDisclosure = function PopoverDisclosure(styleProps) {
return css(_templateObject10(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PopoverArrow = function PopoverArrow(styleProps) {
return css(_templateObject11(), palette('white800')(styleProps), palette('white')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var getPlacementAttributes = function getPlacementAttributes(styleProps) {
var placementAttributes = {
// @ts-ignore
top: css$1(_templateObject12(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'bottom',
defaultExpand: 'bottom',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.top")(styleProps)),
// @ts-ignore
bottom: css$1(_templateObject13(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'top',
defaultExpand: 'top',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.bottom")(styleProps)),
// @ts-ignore
left: css$1(_templateObject14(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'right',
defaultExpand: 'right',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.left")(styleProps)),
// @ts-ignore
right: css$1(_templateObject15(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'left',
defaultExpand: 'left',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.right")(styleProps)),
// @ts-ignore
'top-start': css$1(_templateObject16(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'bottom',
defaultExpand: 'bottom',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.topStart")(styleProps)),
// @ts-ignore
'top-end': css$1(_templateObject17(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'bottom',
defaultExpand: 'bottom',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.topEnd")(styleProps)),
// @ts-ignore
'bottom-end': css$1(_templateObject18(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'top',
defaultExpand: 'top',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.bottomEnd")(styleProps)),
// @ts-ignore
'bottom-start': css$1(_templateObject19(), getAnimatedAttributes({
prevTransformValue: styleProps.unstable_popoverStyles.transform,
transformX: '0px',
transformY: '0px',
defaultSlide: 'top',
defaultExpand: 'top',
slideOffset: (styleProps.gutter || '10') + "px"
})(styleProps), theme(styleProps.themeKey, "css.placements.bottomStart")(styleProps))
};
return css$1(_templateObject20(), placementAttributes[styleProps.placement || 'center']);
};
var styles = /*#__PURE__*/Object.freeze({
Popover: Popover,
PopoverContent: PopoverContent,
PopoverHeader: PopoverHeader,
PopoverTitle: PopoverTitle,
PopoverFooter: PopoverFooter,
PopoverClose: PopoverClose,
PopoverBackdrop: PopoverBackdrop,
PopoverDisclosure: PopoverDisclosure,
PopoverArrow: PopoverArrow,
getPlacementAttributes: getPlacementAttributes
});
export { Popover as P, PopoverContent as a, PopoverHeader as b, PopoverTitle as c, PopoverFooter as d, PopoverClose as e, PopoverBackdrop as f, PopoverDisclosure as g, PopoverArrow as h, getPlacementAttributes as i, styles as s };