fannypack-v5
Version:
An accessible, composable, and friendly React UI Kit
181 lines (148 loc) • 7.13 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, 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 { 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';
function _templateObject10() {
var data = _taggedTemplateLiteralLoose(["\n font-size: ", "rem;\n\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 font-size: ", "rem;\n\n & {\n ", ";\n }\n "]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = _taggedTemplateLiteralLoose(["\n & {\n ", ";\n }\n"]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
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"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteralLoose(["\n && {\n position: absolute;\n width: 0.8em;\n height: 2.75em;\n right: 0.8em;\n z-index: 1;\n color: ", ";\n fill: ", ";\n pointer-events: none;\n }\n\n & {\n ", ";\n }\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteralLoose(["\n align-items: center;\n position: relative;\n width: fit-content;\n\n ", ";\n\n & {\n ", ";\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteralLoose(["\n & {\n border-color: ", ";\n box-shadow: ", " 0px 0px 0px 3px !important;\n }\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\n appearance: none;\n background: linear-gradient(rgb(255, 255, 255), rgb(249, 250, 251));\n border: 1px solid ", ";\n border-radius: ", ";\n color: ", ";\n height: 2.75em;\n padding: 0.4em 2em 0.4em 0.8em;\n line-height: 1.5;\n transition: box-shadow 0.1s ease-in-out 0s, border-color 0.1s, background-color 0.1s;\n\n &[disabled],\n &[aria-disabled=\"true\"] {\n background: ", ";\n box-shadow: unset;\n\n & {\n ", ";\n }\n }\n\n &[disabled] + .fp-Icon {\n color: ", ";\n fill: ", ";\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 }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var Select = function Select(styleProps) {
return css(_templateObject(), palette('white900')(styleProps), borderRadius('default')(styleProps), styleProps.isPlaceholderSelected ? tint(0.4, 'text')(styleProps) : palette('text')(styleProps), palette('white700')(styleProps), theme(styleProps.themeKey, "css.disabled")(styleProps), palette('gray400')(styleProps), palette('gray400')(styleProps), palette('primary')(styleProps), palette('primaryTint')(styleProps), styleProps.state && css$1(_templateObject2(), palette("" + styleProps.state)(styleProps), palette(styleProps.state + "Tint")(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SelectWrapper = function SelectWrapper(styleProps) {
return css(_templateObject3(), styleProps.size && wrapperSizeProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SelectIcon = function SelectIcon(styleProps) {
return css(_templateObject4(), palette('text')(styleProps), palette('text')(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SelectSpinner = function SelectSpinner(styleProps) {
return css(_templateObject5(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var SelectField = function SelectField(styleProps) {
return css(_templateObject6(), theme(styleProps.themeKey, "css.root")(styleProps));
};
function wrapperSizeProperties(styleProps) {
var properties = {
small: css$1(_templateObject7(), fontSize('150')(styleProps), theme(styleProps.themeKey, "css.sizes.small")(styleProps)),
default: css$1(_templateObject8(), theme(styleProps.themeKey, "css.sizes.default")(styleProps)),
medium: css$1(_templateObject9(), fontSize('300')(styleProps), theme(styleProps.themeKey, "css.sizes.medium")(styleProps)),
large: css$1(_templateObject10(), fontSize('400')(styleProps), theme(styleProps.themeKey, "css.sizes.large")(styleProps))
};
return properties[styleProps.size];
}
var styles = /*#__PURE__*/Object.freeze({
Select: Select,
SelectWrapper: SelectWrapper,
SelectIcon: SelectIcon,
SelectSpinner: SelectSpinner,
SelectField: SelectField,
wrapperSizeProperties: wrapperSizeProperties
});
export { Select as S, SelectWrapper as a, SelectIcon as b, SelectSpinner as c, SelectField as d, styles as s, wrapperSizeProperties as w };