mirror of
https://github.com/swc-project/swc.git
synced 2024-12-24 06:05:02 +03:00
8395 lines
316 KiB
JavaScript
8395 lines
316 KiB
JavaScript
(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
|
|
[888],
|
|
{
|
|
/***/ 2260: /***/ function (
|
|
__unused_webpack_module,
|
|
__webpack_exports__,
|
|
__webpack_require__
|
|
) {
|
|
"use strict";
|
|
// ESM COMPAT FLAG
|
|
__webpack_require__.r(__webpack_exports__);
|
|
|
|
// EXPORTS
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
default: function () {
|
|
return /* binding */ _app;
|
|
},
|
|
}); // CONCATENATED MODULE: ./node_modules/@swc/helpers/src/_define_property.mjs
|
|
|
|
function _defineProperty(obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, {
|
|
value: value,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true,
|
|
});
|
|
} else {
|
|
obj[key] = value;
|
|
}
|
|
|
|
return obj;
|
|
} // CONCATENATED MODULE: ./node_modules/@swc/helpers/src/_object_spread.mjs
|
|
|
|
function _objectSpread(target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i] != null ? arguments[i] : {};
|
|
var ownKeys = Object.keys(source);
|
|
|
|
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
ownKeys = ownKeys.concat(
|
|
Object.getOwnPropertySymbols(source).filter(
|
|
function (sym) {
|
|
return Object.getOwnPropertyDescriptor(
|
|
source,
|
|
sym
|
|
).enumerable;
|
|
}
|
|
)
|
|
);
|
|
}
|
|
|
|
ownKeys.forEach(function (key) {
|
|
_defineProperty(target, key, source[key]);
|
|
});
|
|
}
|
|
|
|
return target;
|
|
}
|
|
// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
|
|
var jsx_runtime = __webpack_require__(5893);
|
|
// EXTERNAL MODULE: ./node_modules/react/index.js
|
|
var react = __webpack_require__(7294);
|
|
// EXTERNAL MODULE: ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js
|
|
var emotion_react_browser_esm = __webpack_require__(917); // CONCATENATED MODULE: ./node_modules/@chakra-ui/css-reset/dist/chakra-ui-css-reset.esm.js
|
|
var CSSReset = function CSSReset() {
|
|
return /*#__PURE__*/ react.createElement(
|
|
emotion_react_browser_esm /* Global */.xB,
|
|
{
|
|
styles: '\n html {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n font-family: system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -moz-osx-font-smoothing: grayscale;\n touch-action: manipulation;\n }\n\n body {\n position: relative;\n min-height: 100%;\n font-feature-settings: \'kern\';\n }\n\n *,\n *::before,\n *::after {\n border-width: 0;\n border-style: solid;\n box-sizing: border-box;\n }\n\n main {\n display: block;\n }\n\n hr {\n border-top-width: 1px;\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n\n pre,\n code,\n kbd,\n samp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 1em;\n }\n\n a {\n background-color: transparent;\n color: inherit;\n text-decoration: inherit;\n }\n\n abbr[title] {\n border-bottom: none;\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n b,\n strong {\n font-weight: bold;\n }\n\n small {\n font-size: 80%;\n }\n\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n img {\n border-style: none;\n }\n\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n }\n\n button,\n input {\n overflow: visible;\n }\n\n button,\n select {\n text-transform: none;\n }\n\n button::-moz-focus-inner,\n [type="button"]::-moz-focus-inner,\n [type="reset"]::-moz-focus-inner,\n [type="submit"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n fieldset {\n padding: 0.35em 0.75em 0.625em;\n }\n\n legend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n textarea {\n overflow: auto;\n }\n\n [type="checkbox"],\n [type="radio"] {\n box-sizing: border-box;\n padding: 0;\n }\n\n [type="number"]::-webkit-inner-spin-button,\n [type="number"]::-webkit-outer-spin-button {\n -webkit-appearance: none !important;\n }\n\n input[type="number"] {\n -moz-appearance: textfield;\n }\n\n [type="search"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n }\n\n [type="search"]::-webkit-search-decoration {\n -webkit-appearance: none !important;\n }\n\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n }\n\n details {\n display: block;\n }\n\n summary {\n display: list-item;\n }\n\n template {\n display: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n body,\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n button {\n background: transparent;\n padding: 0;\n }\n\n fieldset {\n margin: 0;\n padding: 0;\n }\n\n ol,\n ul {\n margin: 0;\n padding: 0;\n }\n\n textarea {\n resize: vertical;\n }\n\n button,\n [role="button"] {\n cursor: pointer;\n }\n\n button::-moz-focus-inner {\n border: 0 !important;\n }\n\n table {\n border-collapse: collapse;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n button,\n input,\n optgroup,\n select,\n textarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n }\n\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n }\n\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n\n [data-js-focus-visible] :focus:not([data-focus-visible-added]):not([data-focus-visible-disabled]) {\n outline: none;\n box-shadow: none;\n }\n\n select::-ms-expand {\n display: none;\n }\n ',
|
|
}
|
|
);
|
|
};
|
|
var CSSReset$1 = CSSReset;
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/utils/dist/chakra-ui-utils.esm.js + 3 modules
|
|
var chakra_ui_utils_esm = __webpack_require__(5031);
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/react-utils/dist/chakra-ui-react-utils.esm.js
|
|
var chakra_ui_react_utils_esm = __webpack_require__(6450);
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.esm.js
|
|
var chakra_ui_hooks_esm = __webpack_require__(7375);
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/hooks/dist/use-animation-state-5054a9f7.esm.js
|
|
var use_animation_state_5054a9f7_esm = __webpack_require__(4697);
|
|
// EXTERNAL MODULE: ./node_modules/react-dom/index.js
|
|
var react_dom = __webpack_require__(3935); // CONCATENATED MODULE: ./node_modules/@chakra-ui/portal/dist/chakra-ui-portal.esm.js
|
|
var _createContext$1 = (0,
|
|
chakra_ui_react_utils_esm /* createContext */.kr)({
|
|
strict: false,
|
|
name: "PortalManagerContext",
|
|
}),
|
|
PortalManagerContextProvider = _createContext$1[0],
|
|
usePortalManager = _createContext$1[1];
|
|
function PortalManager(props) {
|
|
var children = props.children,
|
|
zIndex = props.zIndex;
|
|
return /*#__PURE__*/ react.createElement(
|
|
PortalManagerContextProvider,
|
|
{
|
|
value: {
|
|
zIndex: zIndex,
|
|
},
|
|
},
|
|
children
|
|
);
|
|
}
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
PortalManager.displayName = "PortalManager";
|
|
}
|
|
|
|
function _extends() {
|
|
_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return _extends.apply(this, arguments);
|
|
}
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
var _excluded = ["containerRef"];
|
|
|
|
var _createContext = (0,
|
|
chakra_ui_react_utils_esm /* createContext */.kr)({
|
|
strict: false,
|
|
name: "PortalContext",
|
|
}),
|
|
PortalContextProvider = _createContext[0],
|
|
usePortalContext = _createContext[1];
|
|
|
|
var PORTAL_CLASSNAME = "chakra-portal";
|
|
var PORTAL_SELECTOR = ".chakra-portal";
|
|
|
|
var Container = function Container(props) {
|
|
return /*#__PURE__*/ react.createElement(
|
|
"div",
|
|
{
|
|
className: "chakra-portal-zIndex",
|
|
style: {
|
|
position: "absolute",
|
|
zIndex: props.zIndex,
|
|
top: 0,
|
|
left: 0,
|
|
right: 0, // NB: Don't add `bottom: 0`, it makes the entire app unusable
|
|
// @see https://github.com/chakra-ui/chakra-ui/issues/3201
|
|
},
|
|
},
|
|
props.children
|
|
);
|
|
};
|
|
/**
|
|
* Portal that uses `document.body` as container
|
|
*/
|
|
|
|
var DefaultPortal = function DefaultPortal(props) {
|
|
var appendToParentPortal = props.appendToParentPortal,
|
|
children = props.children;
|
|
var tempNode = react.useRef(null);
|
|
var portal = react.useRef(null);
|
|
var forceUpdate = (0,
|
|
chakra_ui_hooks_esm /* useForceUpdate */.NW)();
|
|
var parentPortal = usePortalContext();
|
|
var manager = usePortalManager();
|
|
(0, use_animation_state_5054a9f7_esm.a)(function () {
|
|
if (!tempNode.current) return;
|
|
var doc = tempNode.current.ownerDocument;
|
|
var host = appendToParentPortal
|
|
? parentPortal != null
|
|
? parentPortal
|
|
: doc.body
|
|
: doc.body;
|
|
if (!host) return;
|
|
portal.current = doc.createElement("div");
|
|
portal.current.className = PORTAL_CLASSNAME;
|
|
host.appendChild(portal.current);
|
|
forceUpdate();
|
|
var portalNode = portal.current;
|
|
return function () {
|
|
if (host.contains(portalNode)) {
|
|
host.removeChild(portalNode);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
var _children =
|
|
manager != null && manager.zIndex
|
|
? /*#__PURE__*/ react.createElement(
|
|
Container,
|
|
{
|
|
zIndex:
|
|
manager == null ? void 0 : manager.zIndex,
|
|
},
|
|
children
|
|
)
|
|
: children;
|
|
|
|
return portal.current
|
|
? /*#__PURE__*/ (0, react_dom.createPortal)(
|
|
/*#__PURE__*/ react.createElement(
|
|
PortalContextProvider,
|
|
{
|
|
value: portal.current,
|
|
},
|
|
_children
|
|
),
|
|
portal.current
|
|
)
|
|
: /*#__PURE__*/ react.createElement("span", {
|
|
ref: tempNode,
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Portal that uses a custom container
|
|
*/
|
|
var ContainerPortal = function ContainerPortal(props) {
|
|
var children = props.children,
|
|
containerRef = props.containerRef,
|
|
appendToParentPortal = props.appendToParentPortal;
|
|
var containerEl = containerRef.current;
|
|
var host =
|
|
containerEl != null
|
|
? containerEl
|
|
: chakra_ui_utils_esm /* isBrowser */.jU
|
|
? document.body
|
|
: undefined;
|
|
var portal = react.useMemo(
|
|
function () {
|
|
var node =
|
|
containerEl == null
|
|
? void 0
|
|
: containerEl.ownerDocument.createElement(
|
|
"div"
|
|
);
|
|
if (node) node.className = PORTAL_CLASSNAME;
|
|
return node;
|
|
},
|
|
[containerEl]
|
|
);
|
|
var forceUpdate = (0,
|
|
chakra_ui_hooks_esm /* useForceUpdate */.NW)();
|
|
(0, use_animation_state_5054a9f7_esm.a)(function () {
|
|
forceUpdate();
|
|
}, []);
|
|
(0, use_animation_state_5054a9f7_esm.a)(
|
|
function () {
|
|
if (!portal || !host) return;
|
|
host.appendChild(portal);
|
|
return function () {
|
|
host.removeChild(portal);
|
|
};
|
|
},
|
|
[portal, host]
|
|
);
|
|
|
|
if (host && portal) {
|
|
return /*#__PURE__*/ (0, react_dom.createPortal)(
|
|
/*#__PURE__*/ react.createElement(
|
|
PortalContextProvider,
|
|
{
|
|
value: appendToParentPortal ? portal : null,
|
|
},
|
|
children
|
|
),
|
|
portal
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Portal
|
|
*
|
|
* Declarative component used to render children into a DOM node
|
|
* that exists outside the DOM hierarchy of the parent component.
|
|
*
|
|
* @see Docs https://chakra-ui.com/portal
|
|
*/
|
|
function Portal(props) {
|
|
var containerRef = props.containerRef,
|
|
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
|
|
|
return containerRef
|
|
? /*#__PURE__*/ react.createElement(
|
|
ContainerPortal,
|
|
_extends(
|
|
{
|
|
containerRef: containerRef,
|
|
},
|
|
rest
|
|
)
|
|
)
|
|
: /*#__PURE__*/ react.createElement(DefaultPortal, rest);
|
|
}
|
|
Portal.defaultProps = {
|
|
appendToParentPortal: true,
|
|
};
|
|
Portal.className = PORTAL_CLASSNAME;
|
|
Portal.selector = PORTAL_SELECTOR;
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
Portal.displayName = "Portal";
|
|
}
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/system/dist/chakra-ui-system.esm.js + 3 modules
|
|
var chakra_ui_system_esm = __webpack_require__(2846);
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.esm.js
|
|
var chakra_ui_color_mode_esm = __webpack_require__(949); // CONCATENATED MODULE: ./node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.esm.js
|
|
var doc = {
|
|
body: {
|
|
classList: {
|
|
add: function add() { },
|
|
remove: function remove() { },
|
|
},
|
|
},
|
|
addEventListener: function addEventListener() { },
|
|
removeEventListener: function removeEventListener() { },
|
|
activeElement: {
|
|
blur: function blur() { },
|
|
nodeName: "",
|
|
},
|
|
querySelector: function querySelector() {
|
|
return null;
|
|
},
|
|
querySelectorAll: function querySelectorAll() {
|
|
return [];
|
|
},
|
|
getElementById: function getElementById() {
|
|
return null;
|
|
},
|
|
createEvent: function createEvent() {
|
|
return {
|
|
initEvent: function initEvent() { },
|
|
};
|
|
},
|
|
createElement: function createElement() {
|
|
return {
|
|
children: [],
|
|
childNodes: [],
|
|
style: {},
|
|
setAttribute: function setAttribute() { },
|
|
getElementsByTagName: function getElementsByTagName() {
|
|
return [];
|
|
},
|
|
};
|
|
},
|
|
};
|
|
var ssrDocument = doc;
|
|
|
|
var noop = function noop() { };
|
|
|
|
var win = {
|
|
document: ssrDocument,
|
|
navigator: {
|
|
userAgent: "",
|
|
},
|
|
CustomEvent: function CustomEvent() {
|
|
return this;
|
|
},
|
|
addEventListener: noop,
|
|
removeEventListener: noop,
|
|
getComputedStyle: function getComputedStyle() {
|
|
return {
|
|
getPropertyValue: function getPropertyValue() {
|
|
return "";
|
|
},
|
|
};
|
|
},
|
|
matchMedia: function matchMedia() {
|
|
return {
|
|
matches: false,
|
|
addListener: noop,
|
|
removeListener: noop,
|
|
};
|
|
},
|
|
requestAnimationFrame: function requestAnimationFrame(
|
|
callback
|
|
) {
|
|
if (typeof setTimeout === "undefined") {
|
|
callback();
|
|
return null;
|
|
}
|
|
|
|
return setTimeout(callback, 0);
|
|
},
|
|
cancelAnimationFrame: function cancelAnimationFrame(id) {
|
|
if (typeof setTimeout === "undefined") return;
|
|
clearTimeout(id);
|
|
},
|
|
setTimeout: function setTimeout() {
|
|
return 0;
|
|
},
|
|
clearTimeout: noop,
|
|
setInterval: function setInterval() {
|
|
return 0;
|
|
},
|
|
clearInterval: noop,
|
|
};
|
|
var ssrWindow = win;
|
|
|
|
var mockEnv = {
|
|
window: ssrWindow,
|
|
document: ssrDocument,
|
|
};
|
|
var defaultEnv = chakra_ui_utils_esm /* isBrowser */.jU
|
|
? {
|
|
window: window,
|
|
document: document,
|
|
}
|
|
: mockEnv;
|
|
var EnvironmentContext = /*#__PURE__*/ (0, react.createContext)(
|
|
defaultEnv
|
|
);
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
EnvironmentContext.displayName = "EnvironmentContext";
|
|
}
|
|
|
|
function useEnvironment() {
|
|
return useContext(EnvironmentContext);
|
|
}
|
|
function EnvironmentProvider(props) {
|
|
var children = props.children,
|
|
environmentProp = props.environment;
|
|
|
|
var _useState = (0, react.useState)(null),
|
|
node = _useState[0],
|
|
setNode = _useState[1];
|
|
|
|
var context = (0, react.useMemo)(
|
|
function () {
|
|
var _ref;
|
|
|
|
var doc = node == null ? void 0 : node.ownerDocument;
|
|
var win =
|
|
node == null
|
|
? void 0
|
|
: node.ownerDocument.defaultView;
|
|
var nodeEnv = doc
|
|
? {
|
|
document: doc,
|
|
window: win,
|
|
}
|
|
: undefined;
|
|
var env =
|
|
(_ref =
|
|
environmentProp != null
|
|
? environmentProp
|
|
: nodeEnv) != null
|
|
? _ref
|
|
: defaultEnv;
|
|
return env;
|
|
},
|
|
[node, environmentProp]
|
|
);
|
|
return /*#__PURE__*/ react.createElement(
|
|
EnvironmentContext.Provider,
|
|
{
|
|
value: context,
|
|
},
|
|
children,
|
|
/*#__PURE__*/ react.createElement("span", {
|
|
hidden: true,
|
|
className: "chakra-env",
|
|
ref: function ref(el) {
|
|
(0, react.startTransition)(function () {
|
|
if (el) setNode(el);
|
|
});
|
|
},
|
|
})
|
|
);
|
|
}
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
EnvironmentProvider.displayName = "EnvironmentProvider";
|
|
} // CONCATENATED MODULE: ./node_modules/@chakra-ui/provider/dist/chakra-ui-provider.esm.js
|
|
|
|
/**
|
|
* The global provider that must be added to make all Chakra components
|
|
* work correctly
|
|
*/
|
|
var chakra_ui_provider_esm_ChakraProvider = function ChakraProvider(
|
|
props
|
|
) {
|
|
var children = props.children,
|
|
colorModeManager = props.colorModeManager,
|
|
portalZIndex = props.portalZIndex,
|
|
_props$resetCSS = props.resetCSS,
|
|
resetCSS =
|
|
_props$resetCSS === void 0 ? true : _props$resetCSS,
|
|
_props$theme = props.theme,
|
|
theme = _props$theme === void 0 ? {} : _props$theme,
|
|
environment = props.environment,
|
|
cssVarsRoot = props.cssVarsRoot;
|
|
|
|
var _children = /*#__PURE__*/ react.createElement(
|
|
EnvironmentProvider,
|
|
{
|
|
environment: environment,
|
|
},
|
|
children
|
|
);
|
|
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* ThemeProvider */.f6,
|
|
{
|
|
theme: theme,
|
|
cssVarsRoot: cssVarsRoot,
|
|
},
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_color_mode_esm /* ColorModeProvider */.SG,
|
|
{
|
|
colorModeManager: colorModeManager,
|
|
options: theme.config,
|
|
},
|
|
resetCSS &&
|
|
/*#__PURE__*/ react.createElement(CSSReset$1, null),
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* GlobalStyle */.ZL,
|
|
null
|
|
),
|
|
portalZIndex
|
|
? /*#__PURE__*/ react.createElement(
|
|
PortalManager,
|
|
{
|
|
zIndex: portalZIndex,
|
|
},
|
|
_children
|
|
)
|
|
: _children
|
|
)
|
|
);
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/spacing/dist/chakra-ui-theme-foundations-spacing.esm.js
|
|
|
|
var spacing = {
|
|
px: "1px",
|
|
0.5: "0.125rem",
|
|
1: "0.25rem",
|
|
1.5: "0.375rem",
|
|
2: "0.5rem",
|
|
2.5: "0.625rem",
|
|
3: "0.75rem",
|
|
3.5: "0.875rem",
|
|
4: "1rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
8: "2rem",
|
|
9: "2.25rem",
|
|
10: "2.5rem",
|
|
12: "3rem",
|
|
14: "3.5rem",
|
|
16: "4rem",
|
|
20: "5rem",
|
|
24: "6rem",
|
|
28: "7rem",
|
|
32: "8rem",
|
|
36: "9rem",
|
|
40: "10rem",
|
|
44: "11rem",
|
|
48: "12rem",
|
|
52: "13rem",
|
|
56: "14rem",
|
|
60: "15rem",
|
|
64: "16rem",
|
|
72: "18rem",
|
|
80: "20rem",
|
|
96: "24rem",
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/dist/sizes-501602a9.esm.js
|
|
|
|
function sizes_501602a9_esm_extends() {
|
|
sizes_501602a9_esm_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return sizes_501602a9_esm_extends.apply(this, arguments);
|
|
}
|
|
|
|
var largeSizes = {
|
|
max: "max-content",
|
|
min: "min-content",
|
|
full: "100%",
|
|
"3xs": "14rem",
|
|
"2xs": "16rem",
|
|
xs: "20rem",
|
|
sm: "24rem",
|
|
md: "28rem",
|
|
lg: "32rem",
|
|
xl: "36rem",
|
|
"2xl": "42rem",
|
|
"3xl": "48rem",
|
|
"4xl": "56rem",
|
|
"5xl": "64rem",
|
|
"6xl": "72rem",
|
|
"7xl": "80rem",
|
|
"8xl": "90rem",
|
|
};
|
|
var container = {
|
|
sm: "640px",
|
|
md: "768px",
|
|
lg: "1024px",
|
|
xl: "1280px",
|
|
};
|
|
|
|
var sizes = sizes_501602a9_esm_extends({}, spacing, largeSizes, {
|
|
container: container,
|
|
}); // CONCATENATED MODULE: ./node_modules/@ctrl/tinycolor/dist/module/util.js
|
|
|
|
/**
|
|
* Take input from [0, n] and return it as [0, 1]
|
|
* @hidden
|
|
*/
|
|
function bound01(n, max) {
|
|
if (isOnePointZero(n)) {
|
|
n = "100%";
|
|
}
|
|
var isPercent = isPercentage(n);
|
|
n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
|
|
// Automatically convert percentage into number
|
|
if (isPercent) {
|
|
n = parseInt(String(n * max), 10) / 100;
|
|
}
|
|
// Handle floating point rounding errors
|
|
if (Math.abs(n - max) < 0.000001) {
|
|
return 1;
|
|
}
|
|
// Convert into [0, 1] range if it isn't already
|
|
if (max === 360) {
|
|
// If n is a hue given in degrees,
|
|
// wrap around out-of-range values into [0, 360] range
|
|
// then convert into [0, 1].
|
|
n =
|
|
(n < 0 ? (n % max) + max : n % max) /
|
|
parseFloat(String(max));
|
|
} else {
|
|
// If n not a hue given in degrees
|
|
// Convert into [0, 1] range if it isn't already.
|
|
n = (n % max) / parseFloat(String(max));
|
|
}
|
|
return n;
|
|
}
|
|
/**
|
|
* Force a number between 0 and 1
|
|
* @hidden
|
|
*/
|
|
function clamp01(val) {
|
|
return Math.min(1, Math.max(0, val));
|
|
}
|
|
/**
|
|
* Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
|
|
* <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
|
|
* @hidden
|
|
*/
|
|
function isOnePointZero(n) {
|
|
return (
|
|
typeof n === "string" &&
|
|
n.indexOf(".") !== -1 &&
|
|
parseFloat(n) === 1
|
|
);
|
|
}
|
|
/**
|
|
* Check to see if string passed in is a percentage
|
|
* @hidden
|
|
*/
|
|
function isPercentage(n) {
|
|
return typeof n === "string" && n.indexOf("%") !== -1;
|
|
}
|
|
/**
|
|
* Return a valid alpha value [0,1] with all invalid values being set to 1
|
|
* @hidden
|
|
*/
|
|
function boundAlpha(a) {
|
|
a = parseFloat(a);
|
|
if (isNaN(a) || a < 0 || a > 1) {
|
|
a = 1;
|
|
}
|
|
return a;
|
|
}
|
|
/**
|
|
* Replace a decimal with it's percentage value
|
|
* @hidden
|
|
*/
|
|
function convertToPercentage(n) {
|
|
if (n <= 1) {
|
|
return "".concat(Number(n) * 100, "%");
|
|
}
|
|
return n;
|
|
}
|
|
/**
|
|
* Force a hex value to have 2 characters
|
|
* @hidden
|
|
*/
|
|
function util_pad2(c) {
|
|
return c.length === 1 ? "0" + c : String(c);
|
|
} // CONCATENATED MODULE: ./node_modules/@ctrl/tinycolor/dist/module/conversion.js
|
|
|
|
// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
|
|
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
|
|
/**
|
|
* Handle bounds / percentage checking to conform to CSS color spec
|
|
* <http://www.w3.org/TR/css3-color/>
|
|
* *Assumes:* r, g, b in [0, 255] or [0, 1]
|
|
* *Returns:* { r, g, b } in [0, 255]
|
|
*/
|
|
function rgbToRgb(r, g, b) {
|
|
return {
|
|
r: bound01(r, 255) * 255,
|
|
g: bound01(g, 255) * 255,
|
|
b: bound01(b, 255) * 255,
|
|
};
|
|
}
|
|
/**
|
|
* Converts an RGB color value to HSL.
|
|
* *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
|
|
* *Returns:* { h, s, l } in [0,1]
|
|
*/
|
|
function rgbToHsl(r, g, b) {
|
|
r = bound01(r, 255);
|
|
g = bound01(g, 255);
|
|
b = bound01(b, 255);
|
|
var max = Math.max(r, g, b);
|
|
var min = Math.min(r, g, b);
|
|
var h = 0;
|
|
var s = 0;
|
|
var l = (max + min) / 2;
|
|
if (max === min) {
|
|
s = 0;
|
|
h = 0; // achromatic
|
|
} else {
|
|
var d = max - min;
|
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
switch (max) {
|
|
case r:
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
break;
|
|
case g:
|
|
h = (b - r) / d + 2;
|
|
break;
|
|
case b:
|
|
h = (r - g) / d + 4;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
h /= 6;
|
|
}
|
|
return { h: h, s: s, l: l };
|
|
}
|
|
function hue2rgb(p, q, t) {
|
|
if (t < 0) {
|
|
t += 1;
|
|
}
|
|
if (t > 1) {
|
|
t -= 1;
|
|
}
|
|
if (t < 1 / 6) {
|
|
return p + (q - p) * (6 * t);
|
|
}
|
|
if (t < 1 / 2) {
|
|
return q;
|
|
}
|
|
if (t < 2 / 3) {
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
|
}
|
|
return p;
|
|
}
|
|
/**
|
|
* Converts an HSL color value to RGB.
|
|
*
|
|
* *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
|
|
* *Returns:* { r, g, b } in the set [0, 255]
|
|
*/
|
|
function hslToRgb(h, s, l) {
|
|
var r;
|
|
var g;
|
|
var b;
|
|
h = bound01(h, 360);
|
|
s = bound01(s, 100);
|
|
l = bound01(l, 100);
|
|
if (s === 0) {
|
|
// achromatic
|
|
g = l;
|
|
b = l;
|
|
r = l;
|
|
} else {
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
var p = 2 * l - q;
|
|
r = hue2rgb(p, q, h + 1 / 3);
|
|
g = hue2rgb(p, q, h);
|
|
b = hue2rgb(p, q, h - 1 / 3);
|
|
}
|
|
return { r: r * 255, g: g * 255, b: b * 255 };
|
|
}
|
|
/**
|
|
* Converts an RGB color value to HSV
|
|
*
|
|
* *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
|
|
* *Returns:* { h, s, v } in [0,1]
|
|
*/
|
|
function rgbToHsv(r, g, b) {
|
|
r = bound01(r, 255);
|
|
g = bound01(g, 255);
|
|
b = bound01(b, 255);
|
|
var max = Math.max(r, g, b);
|
|
var min = Math.min(r, g, b);
|
|
var h = 0;
|
|
var v = max;
|
|
var d = max - min;
|
|
var s = max === 0 ? 0 : d / max;
|
|
if (max === min) {
|
|
h = 0; // achromatic
|
|
} else {
|
|
switch (max) {
|
|
case r:
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
break;
|
|
case g:
|
|
h = (b - r) / d + 2;
|
|
break;
|
|
case b:
|
|
h = (r - g) / d + 4;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
h /= 6;
|
|
}
|
|
return { h: h, s: s, v: v };
|
|
}
|
|
/**
|
|
* Converts an HSV color value to RGB.
|
|
*
|
|
* *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
|
|
* *Returns:* { r, g, b } in the set [0, 255]
|
|
*/
|
|
function hsvToRgb(h, s, v) {
|
|
h = bound01(h, 360) * 6;
|
|
s = bound01(s, 100);
|
|
v = bound01(v, 100);
|
|
var i = Math.floor(h);
|
|
var f = h - i;
|
|
var p = v * (1 - s);
|
|
var q = v * (1 - f * s);
|
|
var t = v * (1 - (1 - f) * s);
|
|
var mod = i % 6;
|
|
var r = [v, q, p, p, t, v][mod];
|
|
var g = [t, v, v, q, p, p][mod];
|
|
var b = [p, p, t, v, v, q][mod];
|
|
return { r: r * 255, g: g * 255, b: b * 255 };
|
|
}
|
|
/**
|
|
* Converts an RGB color to hex
|
|
*
|
|
* Assumes r, g, and b are contained in the set [0, 255]
|
|
* Returns a 3 or 6 character hex
|
|
*/
|
|
function rgbToHex(r, g, b, allow3Char) {
|
|
var hex = [
|
|
util_pad2(Math.round(r).toString(16)),
|
|
util_pad2(Math.round(g).toString(16)),
|
|
util_pad2(Math.round(b).toString(16)),
|
|
];
|
|
// Return a 3 character hex if possible
|
|
if (
|
|
allow3Char &&
|
|
hex[0].startsWith(hex[0].charAt(1)) &&
|
|
hex[1].startsWith(hex[1].charAt(1)) &&
|
|
hex[2].startsWith(hex[2].charAt(1))
|
|
) {
|
|
return (
|
|
hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0)
|
|
);
|
|
}
|
|
return hex.join("");
|
|
}
|
|
/**
|
|
* Converts an RGBA color plus alpha transparency to hex
|
|
*
|
|
* Assumes r, g, b are contained in the set [0, 255] and
|
|
* a in [0, 1]. Returns a 4 or 8 character rgba hex
|
|
*/
|
|
// eslint-disable-next-line max-params
|
|
function rgbaToHex(r, g, b, a, allow4Char) {
|
|
var hex = [
|
|
util_pad2(Math.round(r).toString(16)),
|
|
util_pad2(Math.round(g).toString(16)),
|
|
util_pad2(Math.round(b).toString(16)),
|
|
util_pad2(convertDecimalToHex(a)),
|
|
];
|
|
// Return a 4 character hex if possible
|
|
if (
|
|
allow4Char &&
|
|
hex[0].startsWith(hex[0].charAt(1)) &&
|
|
hex[1].startsWith(hex[1].charAt(1)) &&
|
|
hex[2].startsWith(hex[2].charAt(1)) &&
|
|
hex[3].startsWith(hex[3].charAt(1))
|
|
) {
|
|
return (
|
|
hex[0].charAt(0) +
|
|
hex[1].charAt(0) +
|
|
hex[2].charAt(0) +
|
|
hex[3].charAt(0)
|
|
);
|
|
}
|
|
return hex.join("");
|
|
}
|
|
/**
|
|
* Converts an RGBA color to an ARGB Hex8 string
|
|
* Rarely used, but required for "toFilter()"
|
|
*/
|
|
function rgbaToArgbHex(r, g, b, a) {
|
|
var hex = [
|
|
pad2(convertDecimalToHex(a)),
|
|
pad2(Math.round(r).toString(16)),
|
|
pad2(Math.round(g).toString(16)),
|
|
pad2(Math.round(b).toString(16)),
|
|
];
|
|
return hex.join("");
|
|
}
|
|
/** Converts a decimal to a hex value */
|
|
function convertDecimalToHex(d) {
|
|
return Math.round(parseFloat(d) * 255).toString(16);
|
|
}
|
|
/** Converts a hex value to a decimal */
|
|
function convertHexToDecimal(h) {
|
|
return parseIntFromHex(h) / 255;
|
|
}
|
|
/** Parse a base-16 hex value into a base-10 integer */
|
|
function parseIntFromHex(val) {
|
|
return parseInt(val, 16);
|
|
}
|
|
function numberInputToObject(color) {
|
|
return {
|
|
r: color >> 16,
|
|
g: (color & 0xff00) >> 8,
|
|
b: color & 0xff,
|
|
};
|
|
} // CONCATENATED MODULE: ./node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
|
|
|
|
// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
|
|
/**
|
|
* @hidden
|
|
*/
|
|
var names = {
|
|
aliceblue: "#f0f8ff",
|
|
antiquewhite: "#faebd7",
|
|
aqua: "#00ffff",
|
|
aquamarine: "#7fffd4",
|
|
azure: "#f0ffff",
|
|
beige: "#f5f5dc",
|
|
bisque: "#ffe4c4",
|
|
black: "#000000",
|
|
blanchedalmond: "#ffebcd",
|
|
blue: "#0000ff",
|
|
blueviolet: "#8a2be2",
|
|
brown: "#a52a2a",
|
|
burlywood: "#deb887",
|
|
cadetblue: "#5f9ea0",
|
|
chartreuse: "#7fff00",
|
|
chocolate: "#d2691e",
|
|
coral: "#ff7f50",
|
|
cornflowerblue: "#6495ed",
|
|
cornsilk: "#fff8dc",
|
|
crimson: "#dc143c",
|
|
cyan: "#00ffff",
|
|
darkblue: "#00008b",
|
|
darkcyan: "#008b8b",
|
|
darkgoldenrod: "#b8860b",
|
|
darkgray: "#a9a9a9",
|
|
darkgreen: "#006400",
|
|
darkgrey: "#a9a9a9",
|
|
darkkhaki: "#bdb76b",
|
|
darkmagenta: "#8b008b",
|
|
darkolivegreen: "#556b2f",
|
|
darkorange: "#ff8c00",
|
|
darkorchid: "#9932cc",
|
|
darkred: "#8b0000",
|
|
darksalmon: "#e9967a",
|
|
darkseagreen: "#8fbc8f",
|
|
darkslateblue: "#483d8b",
|
|
darkslategray: "#2f4f4f",
|
|
darkslategrey: "#2f4f4f",
|
|
darkturquoise: "#00ced1",
|
|
darkviolet: "#9400d3",
|
|
deeppink: "#ff1493",
|
|
deepskyblue: "#00bfff",
|
|
dimgray: "#696969",
|
|
dimgrey: "#696969",
|
|
dodgerblue: "#1e90ff",
|
|
firebrick: "#b22222",
|
|
floralwhite: "#fffaf0",
|
|
forestgreen: "#228b22",
|
|
fuchsia: "#ff00ff",
|
|
gainsboro: "#dcdcdc",
|
|
ghostwhite: "#f8f8ff",
|
|
goldenrod: "#daa520",
|
|
gold: "#ffd700",
|
|
gray: "#808080",
|
|
green: "#008000",
|
|
greenyellow: "#adff2f",
|
|
grey: "#808080",
|
|
honeydew: "#f0fff0",
|
|
hotpink: "#ff69b4",
|
|
indianred: "#cd5c5c",
|
|
indigo: "#4b0082",
|
|
ivory: "#fffff0",
|
|
khaki: "#f0e68c",
|
|
lavenderblush: "#fff0f5",
|
|
lavender: "#e6e6fa",
|
|
lawngreen: "#7cfc00",
|
|
lemonchiffon: "#fffacd",
|
|
lightblue: "#add8e6",
|
|
lightcoral: "#f08080",
|
|
lightcyan: "#e0ffff",
|
|
lightgoldenrodyellow: "#fafad2",
|
|
lightgray: "#d3d3d3",
|
|
lightgreen: "#90ee90",
|
|
lightgrey: "#d3d3d3",
|
|
lightpink: "#ffb6c1",
|
|
lightsalmon: "#ffa07a",
|
|
lightseagreen: "#20b2aa",
|
|
lightskyblue: "#87cefa",
|
|
lightslategray: "#778899",
|
|
lightslategrey: "#778899",
|
|
lightsteelblue: "#b0c4de",
|
|
lightyellow: "#ffffe0",
|
|
lime: "#00ff00",
|
|
limegreen: "#32cd32",
|
|
linen: "#faf0e6",
|
|
magenta: "#ff00ff",
|
|
maroon: "#800000",
|
|
mediumaquamarine: "#66cdaa",
|
|
mediumblue: "#0000cd",
|
|
mediumorchid: "#ba55d3",
|
|
mediumpurple: "#9370db",
|
|
mediumseagreen: "#3cb371",
|
|
mediumslateblue: "#7b68ee",
|
|
mediumspringgreen: "#00fa9a",
|
|
mediumturquoise: "#48d1cc",
|
|
mediumvioletred: "#c71585",
|
|
midnightblue: "#191970",
|
|
mintcream: "#f5fffa",
|
|
mistyrose: "#ffe4e1",
|
|
moccasin: "#ffe4b5",
|
|
navajowhite: "#ffdead",
|
|
navy: "#000080",
|
|
oldlace: "#fdf5e6",
|
|
olive: "#808000",
|
|
olivedrab: "#6b8e23",
|
|
orange: "#ffa500",
|
|
orangered: "#ff4500",
|
|
orchid: "#da70d6",
|
|
palegoldenrod: "#eee8aa",
|
|
palegreen: "#98fb98",
|
|
paleturquoise: "#afeeee",
|
|
palevioletred: "#db7093",
|
|
papayawhip: "#ffefd5",
|
|
peachpuff: "#ffdab9",
|
|
peru: "#cd853f",
|
|
pink: "#ffc0cb",
|
|
plum: "#dda0dd",
|
|
powderblue: "#b0e0e6",
|
|
purple: "#800080",
|
|
rebeccapurple: "#663399",
|
|
red: "#ff0000",
|
|
rosybrown: "#bc8f8f",
|
|
royalblue: "#4169e1",
|
|
saddlebrown: "#8b4513",
|
|
salmon: "#fa8072",
|
|
sandybrown: "#f4a460",
|
|
seagreen: "#2e8b57",
|
|
seashell: "#fff5ee",
|
|
sienna: "#a0522d",
|
|
silver: "#c0c0c0",
|
|
skyblue: "#87ceeb",
|
|
slateblue: "#6a5acd",
|
|
slategray: "#708090",
|
|
slategrey: "#708090",
|
|
snow: "#fffafa",
|
|
springgreen: "#00ff7f",
|
|
steelblue: "#4682b4",
|
|
tan: "#d2b48c",
|
|
teal: "#008080",
|
|
thistle: "#d8bfd8",
|
|
tomato: "#ff6347",
|
|
turquoise: "#40e0d0",
|
|
violet: "#ee82ee",
|
|
wheat: "#f5deb3",
|
|
white: "#ffffff",
|
|
whitesmoke: "#f5f5f5",
|
|
yellow: "#ffff00",
|
|
yellowgreen: "#9acd32",
|
|
}; // CONCATENATED MODULE: ./node_modules/@ctrl/tinycolor/dist/module/format-input.js
|
|
|
|
/**
|
|
* Given a string or object, convert that input to RGB
|
|
*
|
|
* Possible string inputs:
|
|
* ```
|
|
* "red"
|
|
* "#f00" or "f00"
|
|
* "#ff0000" or "ff0000"
|
|
* "#ff000000" or "ff000000"
|
|
* "rgb 255 0 0" or "rgb (255, 0, 0)"
|
|
* "rgb 1.0 0 0" or "rgb (1, 0, 0)"
|
|
* "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
|
|
* "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
|
|
* "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
|
|
* "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
|
|
* "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
|
|
* ```
|
|
*/
|
|
function inputToRGB(color) {
|
|
var rgb = { r: 0, g: 0, b: 0 };
|
|
var a = 1;
|
|
var s = null;
|
|
var v = null;
|
|
var l = null;
|
|
var ok = false;
|
|
var format = false;
|
|
if (typeof color === "string") {
|
|
color = stringInputToObject(color);
|
|
}
|
|
if (typeof color === "object") {
|
|
if (
|
|
isValidCSSUnit(color.r) &&
|
|
isValidCSSUnit(color.g) &&
|
|
isValidCSSUnit(color.b)
|
|
) {
|
|
rgb = rgbToRgb(color.r, color.g, color.b);
|
|
ok = true;
|
|
format =
|
|
String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
|
|
} else if (
|
|
isValidCSSUnit(color.h) &&
|
|
isValidCSSUnit(color.s) &&
|
|
isValidCSSUnit(color.v)
|
|
) {
|
|
s = convertToPercentage(color.s);
|
|
v = convertToPercentage(color.v);
|
|
rgb = hsvToRgb(color.h, s, v);
|
|
ok = true;
|
|
format = "hsv";
|
|
} else if (
|
|
isValidCSSUnit(color.h) &&
|
|
isValidCSSUnit(color.s) &&
|
|
isValidCSSUnit(color.l)
|
|
) {
|
|
s = convertToPercentage(color.s);
|
|
l = convertToPercentage(color.l);
|
|
rgb = hslToRgb(color.h, s, l);
|
|
ok = true;
|
|
format = "hsl";
|
|
}
|
|
if (Object.prototype.hasOwnProperty.call(color, "a")) {
|
|
a = color.a;
|
|
}
|
|
}
|
|
a = boundAlpha(a);
|
|
return {
|
|
ok: ok,
|
|
format: color.format || format,
|
|
r: Math.min(255, Math.max(rgb.r, 0)),
|
|
g: Math.min(255, Math.max(rgb.g, 0)),
|
|
b: Math.min(255, Math.max(rgb.b, 0)),
|
|
a: a,
|
|
};
|
|
}
|
|
// <http://www.w3.org/TR/css3-values/#integers>
|
|
var CSS_INTEGER = "[-\\+]?\\d+%?";
|
|
// <http://www.w3.org/TR/css3-values/#number-value>
|
|
var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
|
|
// Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
|
|
var CSS_UNIT = "(?:"
|
|
.concat(CSS_NUMBER, ")|(?:")
|
|
.concat(CSS_INTEGER, ")");
|
|
// Actual matching.
|
|
// Parentheses and commas are optional, but not required.
|
|
// Whitespace can take the place of commas or opening paren
|
|
var PERMISSIVE_MATCH3 = "[\\s|\\(]+("
|
|
.concat(CSS_UNIT, ")[,|\\s]+(")
|
|
.concat(CSS_UNIT, ")[,|\\s]+(")
|
|
.concat(CSS_UNIT, ")\\s*\\)?");
|
|
var PERMISSIVE_MATCH4 = "[\\s|\\(]+("
|
|
.concat(CSS_UNIT, ")[,|\\s]+(")
|
|
.concat(CSS_UNIT, ")[,|\\s]+(")
|
|
.concat(CSS_UNIT, ")[,|\\s]+(")
|
|
.concat(CSS_UNIT, ")\\s*\\)?");
|
|
var matchers = {
|
|
CSS_UNIT: new RegExp(CSS_UNIT),
|
|
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
|
|
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
|
|
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
|
|
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
|
|
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
|
|
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
|
|
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
|
|
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
|
|
};
|
|
/**
|
|
* Permissive string parsing. Take in a number of formats, and output an object
|
|
* based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
|
|
*/
|
|
function stringInputToObject(color) {
|
|
color = color.trim().toLowerCase();
|
|
if (color.length === 0) {
|
|
return false;
|
|
}
|
|
var named = false;
|
|
if (names[color]) {
|
|
color = names[color];
|
|
named = true;
|
|
} else if (color === "transparent") {
|
|
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
|
|
}
|
|
// Try to match string input using regular expressions.
|
|
// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
|
|
// Just return an object and let the conversion functions handle that.
|
|
// This way the result will be the same whether the tinycolor is initialized with string or object.
|
|
var match = matchers.rgb.exec(color);
|
|
if (match) {
|
|
return { r: match[1], g: match[2], b: match[3] };
|
|
}
|
|
match = matchers.rgba.exec(color);
|
|
if (match) {
|
|
return {
|
|
r: match[1],
|
|
g: match[2],
|
|
b: match[3],
|
|
a: match[4],
|
|
};
|
|
}
|
|
match = matchers.hsl.exec(color);
|
|
if (match) {
|
|
return { h: match[1], s: match[2], l: match[3] };
|
|
}
|
|
match = matchers.hsla.exec(color);
|
|
if (match) {
|
|
return {
|
|
h: match[1],
|
|
s: match[2],
|
|
l: match[3],
|
|
a: match[4],
|
|
};
|
|
}
|
|
match = matchers.hsv.exec(color);
|
|
if (match) {
|
|
return { h: match[1], s: match[2], v: match[3] };
|
|
}
|
|
match = matchers.hsva.exec(color);
|
|
if (match) {
|
|
return {
|
|
h: match[1],
|
|
s: match[2],
|
|
v: match[3],
|
|
a: match[4],
|
|
};
|
|
}
|
|
match = matchers.hex8.exec(color);
|
|
if (match) {
|
|
return {
|
|
r: parseIntFromHex(match[1]),
|
|
g: parseIntFromHex(match[2]),
|
|
b: parseIntFromHex(match[3]),
|
|
a: convertHexToDecimal(match[4]),
|
|
format: named ? "name" : "hex8",
|
|
};
|
|
}
|
|
match = matchers.hex6.exec(color);
|
|
if (match) {
|
|
return {
|
|
r: parseIntFromHex(match[1]),
|
|
g: parseIntFromHex(match[2]),
|
|
b: parseIntFromHex(match[3]),
|
|
format: named ? "name" : "hex",
|
|
};
|
|
}
|
|
match = matchers.hex4.exec(color);
|
|
if (match) {
|
|
return {
|
|
r: parseIntFromHex(match[1] + match[1]),
|
|
g: parseIntFromHex(match[2] + match[2]),
|
|
b: parseIntFromHex(match[3] + match[3]),
|
|
a: convertHexToDecimal(match[4] + match[4]),
|
|
format: named ? "name" : "hex8",
|
|
};
|
|
}
|
|
match = matchers.hex3.exec(color);
|
|
if (match) {
|
|
return {
|
|
r: parseIntFromHex(match[1] + match[1]),
|
|
g: parseIntFromHex(match[2] + match[2]),
|
|
b: parseIntFromHex(match[3] + match[3]),
|
|
format: named ? "name" : "hex",
|
|
};
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Check to see if it looks like a CSS unit
|
|
* (see `matchers` above for definition).
|
|
*/
|
|
function isValidCSSUnit(color) {
|
|
return Boolean(matchers.CSS_UNIT.exec(String(color)));
|
|
} // CONCATENATED MODULE: ./node_modules/@ctrl/tinycolor/dist/module/index.js
|
|
|
|
var module_TinyColor = /** @class */ (function () {
|
|
function TinyColor(color, opts) {
|
|
if (color === void 0) {
|
|
color = "";
|
|
}
|
|
if (opts === void 0) {
|
|
opts = {};
|
|
}
|
|
var _a;
|
|
// If input is already a tinycolor, return itself
|
|
if (color instanceof TinyColor) {
|
|
// eslint-disable-next-line no-constructor-return
|
|
return color;
|
|
}
|
|
if (typeof color === "number") {
|
|
color = numberInputToObject(color);
|
|
}
|
|
this.originalInput = color;
|
|
var rgb = inputToRGB(color);
|
|
this.originalInput = color;
|
|
this.r = rgb.r;
|
|
this.g = rgb.g;
|
|
this.b = rgb.b;
|
|
this.a = rgb.a;
|
|
this.roundA = Math.round(100 * this.a) / 100;
|
|
this.format =
|
|
(_a = opts.format) !== null && _a !== void 0
|
|
? _a
|
|
: rgb.format;
|
|
this.gradientType = opts.gradientType;
|
|
// Don't let the range of [0,255] come back in [0,1].
|
|
// Potentially lose a little bit of precision here, but will fix issues where
|
|
// .5 gets interpreted as half of the total, instead of half of 1
|
|
// If it was supposed to be 128, this was already taken care of by `inputToRgb`
|
|
if (this.r < 1) {
|
|
this.r = Math.round(this.r);
|
|
}
|
|
if (this.g < 1) {
|
|
this.g = Math.round(this.g);
|
|
}
|
|
if (this.b < 1) {
|
|
this.b = Math.round(this.b);
|
|
}
|
|
this.isValid = rgb.ok;
|
|
}
|
|
TinyColor.prototype.isDark = function () {
|
|
return this.getBrightness() < 128;
|
|
};
|
|
TinyColor.prototype.isLight = function () {
|
|
return !this.isDark();
|
|
};
|
|
/**
|
|
* Returns the perceived brightness of the color, from 0-255.
|
|
*/
|
|
TinyColor.prototype.getBrightness = function () {
|
|
// http://www.w3.org/TR/AERT#color-contrast
|
|
var rgb = this.toRgb();
|
|
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
|
|
};
|
|
/**
|
|
* Returns the perceived luminance of a color, from 0-1.
|
|
*/
|
|
TinyColor.prototype.getLuminance = function () {
|
|
// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
|
var rgb = this.toRgb();
|
|
var R;
|
|
var G;
|
|
var B;
|
|
var RsRGB = rgb.r / 255;
|
|
var GsRGB = rgb.g / 255;
|
|
var BsRGB = rgb.b / 255;
|
|
if (RsRGB <= 0.03928) {
|
|
R = RsRGB / 12.92;
|
|
} else {
|
|
// eslint-disable-next-line prefer-exponentiation-operator
|
|
R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
|
|
}
|
|
if (GsRGB <= 0.03928) {
|
|
G = GsRGB / 12.92;
|
|
} else {
|
|
// eslint-disable-next-line prefer-exponentiation-operator
|
|
G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
|
|
}
|
|
if (BsRGB <= 0.03928) {
|
|
B = BsRGB / 12.92;
|
|
} else {
|
|
// eslint-disable-next-line prefer-exponentiation-operator
|
|
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
|
}
|
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
};
|
|
/**
|
|
* Returns the alpha value of a color, from 0-1.
|
|
*/
|
|
TinyColor.prototype.getAlpha = function () {
|
|
return this.a;
|
|
};
|
|
/**
|
|
* Sets the alpha value on the current color.
|
|
*
|
|
* @param alpha - The new alpha value. The accepted range is 0-1.
|
|
*/
|
|
TinyColor.prototype.setAlpha = function (alpha) {
|
|
this.a = boundAlpha(alpha);
|
|
this.roundA = Math.round(100 * this.a) / 100;
|
|
return this;
|
|
};
|
|
/**
|
|
* Returns the object as a HSVA object.
|
|
*/
|
|
TinyColor.prototype.toHsv = function () {
|
|
var hsv = rgbToHsv(this.r, this.g, this.b);
|
|
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
|
|
};
|
|
/**
|
|
* Returns the hsva values interpolated into a string with the following format:
|
|
* "hsva(xxx, xxx, xxx, xx)".
|
|
*/
|
|
TinyColor.prototype.toHsvString = function () {
|
|
var hsv = rgbToHsv(this.r, this.g, this.b);
|
|
var h = Math.round(hsv.h * 360);
|
|
var s = Math.round(hsv.s * 100);
|
|
var v = Math.round(hsv.v * 100);
|
|
return this.a === 1
|
|
? "hsv("
|
|
.concat(h, ", ")
|
|
.concat(s, "%, ")
|
|
.concat(v, "%)")
|
|
: "hsva("
|
|
.concat(h, ", ")
|
|
.concat(s, "%, ")
|
|
.concat(v, "%, ")
|
|
.concat(this.roundA, ")");
|
|
};
|
|
/**
|
|
* Returns the object as a HSLA object.
|
|
*/
|
|
TinyColor.prototype.toHsl = function () {
|
|
var hsl = rgbToHsl(this.r, this.g, this.b);
|
|
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
|
|
};
|
|
/**
|
|
* Returns the hsla values interpolated into a string with the following format:
|
|
* "hsla(xxx, xxx, xxx, xx)".
|
|
*/
|
|
TinyColor.prototype.toHslString = function () {
|
|
var hsl = rgbToHsl(this.r, this.g, this.b);
|
|
var h = Math.round(hsl.h * 360);
|
|
var s = Math.round(hsl.s * 100);
|
|
var l = Math.round(hsl.l * 100);
|
|
return this.a === 1
|
|
? "hsl("
|
|
.concat(h, ", ")
|
|
.concat(s, "%, ")
|
|
.concat(l, "%)")
|
|
: "hsla("
|
|
.concat(h, ", ")
|
|
.concat(s, "%, ")
|
|
.concat(l, "%, ")
|
|
.concat(this.roundA, ")");
|
|
};
|
|
/**
|
|
* Returns the hex value of the color.
|
|
* @param allow3Char will shorten hex value to 3 char if possible
|
|
*/
|
|
TinyColor.prototype.toHex = function (allow3Char) {
|
|
if (allow3Char === void 0) {
|
|
allow3Char = false;
|
|
}
|
|
return rgbToHex(this.r, this.g, this.b, allow3Char);
|
|
};
|
|
/**
|
|
* Returns the hex value of the color -with a # appened.
|
|
* @param allow3Char will shorten hex value to 3 char if possible
|
|
*/
|
|
TinyColor.prototype.toHexString = function (allow3Char) {
|
|
if (allow3Char === void 0) {
|
|
allow3Char = false;
|
|
}
|
|
return "#" + this.toHex(allow3Char);
|
|
};
|
|
/**
|
|
* Returns the hex 8 value of the color.
|
|
* @param allow4Char will shorten hex value to 4 char if possible
|
|
*/
|
|
TinyColor.prototype.toHex8 = function (allow4Char) {
|
|
if (allow4Char === void 0) {
|
|
allow4Char = false;
|
|
}
|
|
return rgbaToHex(
|
|
this.r,
|
|
this.g,
|
|
this.b,
|
|
this.a,
|
|
allow4Char
|
|
);
|
|
};
|
|
/**
|
|
* Returns the hex 8 value of the color -with a # appened.
|
|
* @param allow4Char will shorten hex value to 4 char if possible
|
|
*/
|
|
TinyColor.prototype.toHex8String = function (allow4Char) {
|
|
if (allow4Char === void 0) {
|
|
allow4Char = false;
|
|
}
|
|
return "#" + this.toHex8(allow4Char);
|
|
};
|
|
/**
|
|
* Returns the object as a RGBA object.
|
|
*/
|
|
TinyColor.prototype.toRgb = function () {
|
|
return {
|
|
r: Math.round(this.r),
|
|
g: Math.round(this.g),
|
|
b: Math.round(this.b),
|
|
a: this.a,
|
|
};
|
|
};
|
|
/**
|
|
* Returns the RGBA values interpolated into a string with the following format:
|
|
* "RGBA(xxx, xxx, xxx, xx)".
|
|
*/
|
|
TinyColor.prototype.toRgbString = function () {
|
|
var r = Math.round(this.r);
|
|
var g = Math.round(this.g);
|
|
var b = Math.round(this.b);
|
|
return this.a === 1
|
|
? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")")
|
|
: "rgba("
|
|
.concat(r, ", ")
|
|
.concat(g, ", ")
|
|
.concat(b, ", ")
|
|
.concat(this.roundA, ")");
|
|
};
|
|
/**
|
|
* Returns the object as a RGBA object.
|
|
*/
|
|
TinyColor.prototype.toPercentageRgb = function () {
|
|
var fmt = function (x) {
|
|
return "".concat(
|
|
Math.round(bound01(x, 255) * 100),
|
|
"%"
|
|
);
|
|
};
|
|
return {
|
|
r: fmt(this.r),
|
|
g: fmt(this.g),
|
|
b: fmt(this.b),
|
|
a: this.a,
|
|
};
|
|
};
|
|
/**
|
|
* Returns the RGBA relative values interpolated into a string
|
|
*/
|
|
TinyColor.prototype.toPercentageRgbString = function () {
|
|
var rnd = function (x) {
|
|
return Math.round(bound01(x, 255) * 100);
|
|
};
|
|
return this.a === 1
|
|
? "rgb("
|
|
.concat(rnd(this.r), "%, ")
|
|
.concat(rnd(this.g), "%, ")
|
|
.concat(rnd(this.b), "%)")
|
|
: "rgba("
|
|
.concat(rnd(this.r), "%, ")
|
|
.concat(rnd(this.g), "%, ")
|
|
.concat(rnd(this.b), "%, ")
|
|
.concat(this.roundA, ")");
|
|
};
|
|
/**
|
|
* The 'real' name of the color -if there is one.
|
|
*/
|
|
TinyColor.prototype.toName = function () {
|
|
if (this.a === 0) {
|
|
return "transparent";
|
|
}
|
|
if (this.a < 1) {
|
|
return false;
|
|
}
|
|
var hex = "#" + rgbToHex(this.r, this.g, this.b, false);
|
|
for (
|
|
var _i = 0, _a = Object.entries(names);
|
|
_i < _a.length;
|
|
_i++
|
|
) {
|
|
var _b = _a[_i],
|
|
key = _b[0],
|
|
value = _b[1];
|
|
if (hex === value) {
|
|
return key;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
TinyColor.prototype.toString = function (format) {
|
|
var formatSet = Boolean(format);
|
|
format =
|
|
format !== null && format !== void 0
|
|
? format
|
|
: this.format;
|
|
var formattedString = false;
|
|
var hasAlpha = this.a < 1 && this.a >= 0;
|
|
var needsAlphaFormat =
|
|
!formatSet &&
|
|
hasAlpha &&
|
|
(format.startsWith("hex") || format === "name");
|
|
if (needsAlphaFormat) {
|
|
// Special case for "transparent", all other non-alpha formats
|
|
// will return rgba when there is transparency.
|
|
if (format === "name" && this.a === 0) {
|
|
return this.toName();
|
|
}
|
|
return this.toRgbString();
|
|
}
|
|
if (format === "rgb") {
|
|
formattedString = this.toRgbString();
|
|
}
|
|
if (format === "prgb") {
|
|
formattedString = this.toPercentageRgbString();
|
|
}
|
|
if (format === "hex" || format === "hex6") {
|
|
formattedString = this.toHexString();
|
|
}
|
|
if (format === "hex3") {
|
|
formattedString = this.toHexString(true);
|
|
}
|
|
if (format === "hex4") {
|
|
formattedString = this.toHex8String(true);
|
|
}
|
|
if (format === "hex8") {
|
|
formattedString = this.toHex8String();
|
|
}
|
|
if (format === "name") {
|
|
formattedString = this.toName();
|
|
}
|
|
if (format === "hsl") {
|
|
formattedString = this.toHslString();
|
|
}
|
|
if (format === "hsv") {
|
|
formattedString = this.toHsvString();
|
|
}
|
|
return formattedString || this.toHexString();
|
|
};
|
|
TinyColor.prototype.toNumber = function () {
|
|
return (
|
|
(Math.round(this.r) << 16) +
|
|
(Math.round(this.g) << 8) +
|
|
Math.round(this.b)
|
|
);
|
|
};
|
|
TinyColor.prototype.clone = function () {
|
|
return new TinyColor(this.toString());
|
|
};
|
|
/**
|
|
* Lighten the color a given amount. Providing 100 will always return white.
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.lighten = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
var hsl = this.toHsl();
|
|
hsl.l += amount / 100;
|
|
hsl.l = clamp01(hsl.l);
|
|
return new TinyColor(hsl);
|
|
};
|
|
/**
|
|
* Brighten the color a given amount, from 0 to 100.
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.brighten = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
var rgb = this.toRgb();
|
|
rgb.r = Math.max(
|
|
0,
|
|
Math.min(255, rgb.r - Math.round(255 * -(amount / 100)))
|
|
);
|
|
rgb.g = Math.max(
|
|
0,
|
|
Math.min(255, rgb.g - Math.round(255 * -(amount / 100)))
|
|
);
|
|
rgb.b = Math.max(
|
|
0,
|
|
Math.min(255, rgb.b - Math.round(255 * -(amount / 100)))
|
|
);
|
|
return new TinyColor(rgb);
|
|
};
|
|
/**
|
|
* Darken the color a given amount, from 0 to 100.
|
|
* Providing 100 will always return black.
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.darken = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
var hsl = this.toHsl();
|
|
hsl.l -= amount / 100;
|
|
hsl.l = clamp01(hsl.l);
|
|
return new TinyColor(hsl);
|
|
};
|
|
/**
|
|
* Mix the color with pure white, from 0 to 100.
|
|
* Providing 0 will do nothing, providing 100 will always return white.
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.tint = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
return this.mix("white", amount);
|
|
};
|
|
/**
|
|
* Mix the color with pure black, from 0 to 100.
|
|
* Providing 0 will do nothing, providing 100 will always return black.
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.shade = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
return this.mix("black", amount);
|
|
};
|
|
/**
|
|
* Desaturate the color a given amount, from 0 to 100.
|
|
* Providing 100 will is the same as calling greyscale
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.desaturate = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
var hsl = this.toHsl();
|
|
hsl.s -= amount / 100;
|
|
hsl.s = clamp01(hsl.s);
|
|
return new TinyColor(hsl);
|
|
};
|
|
/**
|
|
* Saturate the color a given amount, from 0 to 100.
|
|
* @param amount - valid between 1-100
|
|
*/
|
|
TinyColor.prototype.saturate = function (amount) {
|
|
if (amount === void 0) {
|
|
amount = 10;
|
|
}
|
|
var hsl = this.toHsl();
|
|
hsl.s += amount / 100;
|
|
hsl.s = clamp01(hsl.s);
|
|
return new TinyColor(hsl);
|
|
};
|
|
/**
|
|
* Completely desaturates a color into greyscale.
|
|
* Same as calling `desaturate(100)`
|
|
*/
|
|
TinyColor.prototype.greyscale = function () {
|
|
return this.desaturate(100);
|
|
};
|
|
/**
|
|
* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
|
|
* Values outside of this range will be wrapped into this range.
|
|
*/
|
|
TinyColor.prototype.spin = function (amount) {
|
|
var hsl = this.toHsl();
|
|
var hue = (hsl.h + amount) % 360;
|
|
hsl.h = hue < 0 ? 360 + hue : hue;
|
|
return new TinyColor(hsl);
|
|
};
|
|
/**
|
|
* Mix the current color a given amount with another color, from 0 to 100.
|
|
* 0 means no mixing (return current color).
|
|
*/
|
|
TinyColor.prototype.mix = function (color, amount) {
|
|
if (amount === void 0) {
|
|
amount = 50;
|
|
}
|
|
var rgb1 = this.toRgb();
|
|
var rgb2 = new TinyColor(color).toRgb();
|
|
var p = amount / 100;
|
|
var rgba = {
|
|
r: (rgb2.r - rgb1.r) * p + rgb1.r,
|
|
g: (rgb2.g - rgb1.g) * p + rgb1.g,
|
|
b: (rgb2.b - rgb1.b) * p + rgb1.b,
|
|
a: (rgb2.a - rgb1.a) * p + rgb1.a,
|
|
};
|
|
return new TinyColor(rgba);
|
|
};
|
|
TinyColor.prototype.analogous = function (results, slices) {
|
|
if (results === void 0) {
|
|
results = 6;
|
|
}
|
|
if (slices === void 0) {
|
|
slices = 30;
|
|
}
|
|
var hsl = this.toHsl();
|
|
var part = 360 / slices;
|
|
var ret = [this];
|
|
for (
|
|
hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360;
|
|
--results;
|
|
|
|
) {
|
|
hsl.h = (hsl.h + part) % 360;
|
|
ret.push(new TinyColor(hsl));
|
|
}
|
|
return ret;
|
|
};
|
|
/**
|
|
* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
|
|
*/
|
|
TinyColor.prototype.complement = function () {
|
|
var hsl = this.toHsl();
|
|
hsl.h = (hsl.h + 180) % 360;
|
|
return new TinyColor(hsl);
|
|
};
|
|
TinyColor.prototype.monochromatic = function (results) {
|
|
if (results === void 0) {
|
|
results = 6;
|
|
}
|
|
var hsv = this.toHsv();
|
|
var h = hsv.h;
|
|
var s = hsv.s;
|
|
var v = hsv.v;
|
|
var res = [];
|
|
var modification = 1 / results;
|
|
while (results--) {
|
|
res.push(new TinyColor({ h: h, s: s, v: v }));
|
|
v = (v + modification) % 1;
|
|
}
|
|
return res;
|
|
};
|
|
TinyColor.prototype.splitcomplement = function () {
|
|
var hsl = this.toHsl();
|
|
var h = hsl.h;
|
|
return [
|
|
this,
|
|
new TinyColor({
|
|
h: (h + 72) % 360,
|
|
s: hsl.s,
|
|
l: hsl.l,
|
|
}),
|
|
new TinyColor({
|
|
h: (h + 216) % 360,
|
|
s: hsl.s,
|
|
l: hsl.l,
|
|
}),
|
|
];
|
|
};
|
|
/**
|
|
* Compute how the color would appear on a background
|
|
*/
|
|
TinyColor.prototype.onBackground = function (background) {
|
|
var fg = this.toRgb();
|
|
var bg = new TinyColor(background).toRgb();
|
|
return new TinyColor({
|
|
r: bg.r + (fg.r - bg.r) * fg.a,
|
|
g: bg.g + (fg.g - bg.g) * fg.a,
|
|
b: bg.b + (fg.b - bg.b) * fg.a,
|
|
});
|
|
};
|
|
/**
|
|
* Alias for `polyad(3)`
|
|
*/
|
|
TinyColor.prototype.triad = function () {
|
|
return this.polyad(3);
|
|
};
|
|
/**
|
|
* Alias for `polyad(4)`
|
|
*/
|
|
TinyColor.prototype.tetrad = function () {
|
|
return this.polyad(4);
|
|
};
|
|
/**
|
|
* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
|
|
* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
|
|
*/
|
|
TinyColor.prototype.polyad = function (n) {
|
|
var hsl = this.toHsl();
|
|
var h = hsl.h;
|
|
var result = [this];
|
|
var increment = 360 / n;
|
|
for (var i = 1; i < n; i++) {
|
|
result.push(
|
|
new TinyColor({
|
|
h: (h + i * increment) % 360,
|
|
s: hsl.s,
|
|
l: hsl.l,
|
|
})
|
|
);
|
|
}
|
|
return result;
|
|
};
|
|
/**
|
|
* compare color vs current color
|
|
*/
|
|
TinyColor.prototype.equals = function (color) {
|
|
return (
|
|
this.toRgbString() ===
|
|
new TinyColor(color).toRgbString()
|
|
);
|
|
};
|
|
return TinyColor;
|
|
})();
|
|
|
|
// kept for backwards compatability with v1
|
|
function tinycolor(color, opts) {
|
|
if (color === void 0) {
|
|
color = "";
|
|
}
|
|
if (opts === void 0) {
|
|
opts = {};
|
|
}
|
|
return new module_TinyColor(color, opts);
|
|
} // CONCATENATED MODULE: ./node_modules/@ctrl/tinycolor/dist/module/random.js
|
|
|
|
// randomColor by David Merfield under the CC0 license
|
|
// https://github.com/davidmerfield/randomColor/
|
|
|
|
function random(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
// Check if we need to generate multiple colors
|
|
if (options.count !== undefined && options.count !== null) {
|
|
var totalColors = options.count;
|
|
var colors = [];
|
|
options.count = undefined;
|
|
while (totalColors > colors.length) {
|
|
// Since we're generating multiple colors,
|
|
// incremement the seed. Otherwise we'd just
|
|
// generate the same color each time...
|
|
options.count = null;
|
|
if (options.seed) {
|
|
options.seed += 1;
|
|
}
|
|
colors.push(random(options));
|
|
}
|
|
options.count = totalColors;
|
|
return colors;
|
|
}
|
|
// First we pick a hue (H)
|
|
var h = pickHue(options.hue, options.seed);
|
|
// Then use H to determine saturation (S)
|
|
var s = pickSaturation(h, options);
|
|
// Then use S and H to determine brightness (B).
|
|
var v = pickBrightness(h, s, options);
|
|
var res = { h: h, s: s, v: v };
|
|
if (options.alpha !== undefined) {
|
|
res.a = options.alpha;
|
|
}
|
|
// Then we return the HSB color in the desired format
|
|
return new module_TinyColor(res);
|
|
}
|
|
function pickHue(hue, seed) {
|
|
var hueRange = getHueRange(hue);
|
|
var res = randomWithin(hueRange, seed);
|
|
// Instead of storing red as two seperate ranges,
|
|
// we group them, using negative numbers
|
|
if (res < 0) {
|
|
res = 360 + res;
|
|
}
|
|
return res;
|
|
}
|
|
function pickSaturation(hue, options) {
|
|
if (options.hue === "monochrome") {
|
|
return 0;
|
|
}
|
|
if (options.luminosity === "random") {
|
|
return randomWithin([0, 100], options.seed);
|
|
}
|
|
var saturationRange = getColorInfo(hue).saturationRange;
|
|
var sMin = saturationRange[0];
|
|
var sMax = saturationRange[1];
|
|
switch (options.luminosity) {
|
|
case "bright":
|
|
sMin = 55;
|
|
break;
|
|
case "dark":
|
|
sMin = sMax - 10;
|
|
break;
|
|
case "light":
|
|
sMax = 55;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return randomWithin([sMin, sMax], options.seed);
|
|
}
|
|
function pickBrightness(H, S, options) {
|
|
var bMin = getMinimumBrightness(H, S);
|
|
var bMax = 100;
|
|
switch (options.luminosity) {
|
|
case "dark":
|
|
bMax = bMin + 20;
|
|
break;
|
|
case "light":
|
|
bMin = (bMax + bMin) / 2;
|
|
break;
|
|
case "random":
|
|
bMin = 0;
|
|
bMax = 100;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return randomWithin([bMin, bMax], options.seed);
|
|
}
|
|
function getMinimumBrightness(H, S) {
|
|
var lowerBounds = getColorInfo(H).lowerBounds;
|
|
for (var i = 0; i < lowerBounds.length - 1; i++) {
|
|
var s1 = lowerBounds[i][0];
|
|
var v1 = lowerBounds[i][1];
|
|
var s2 = lowerBounds[i + 1][0];
|
|
var v2 = lowerBounds[i + 1][1];
|
|
if (S >= s1 && S <= s2) {
|
|
var m = (v2 - v1) / (s2 - s1);
|
|
var b = v1 - m * s1;
|
|
return m * S + b;
|
|
}
|
|
}
|
|
return 0;
|
|
}
|
|
function getHueRange(colorInput) {
|
|
var num = parseInt(colorInput, 10);
|
|
if (!Number.isNaN(num) && num < 360 && num > 0) {
|
|
return [num, num];
|
|
}
|
|
if (typeof colorInput === "string") {
|
|
var namedColor = bounds.find(function (n) {
|
|
return n.name === colorInput;
|
|
});
|
|
if (namedColor) {
|
|
var color = defineColor(namedColor);
|
|
if (color.hueRange) {
|
|
return color.hueRange;
|
|
}
|
|
}
|
|
var parsed = new module_TinyColor(colorInput);
|
|
if (parsed.isValid) {
|
|
var hue = parsed.toHsv().h;
|
|
return [hue, hue];
|
|
}
|
|
}
|
|
return [0, 360];
|
|
}
|
|
function getColorInfo(hue) {
|
|
// Maps red colors to make picking hue easier
|
|
if (hue >= 334 && hue <= 360) {
|
|
hue -= 360;
|
|
}
|
|
for (
|
|
var _i = 0, bounds_1 = bounds;
|
|
_i < bounds_1.length;
|
|
_i++
|
|
) {
|
|
var bound = bounds_1[_i];
|
|
var color = defineColor(bound);
|
|
if (
|
|
color.hueRange &&
|
|
hue >= color.hueRange[0] &&
|
|
hue <= color.hueRange[1]
|
|
) {
|
|
return color;
|
|
}
|
|
}
|
|
throw Error("Color not found");
|
|
}
|
|
function randomWithin(range, seed) {
|
|
if (seed === undefined) {
|
|
return Math.floor(
|
|
range[0] + Math.random() * (range[1] + 1 - range[0])
|
|
);
|
|
}
|
|
// Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
|
|
var max = range[1] || 1;
|
|
var min = range[0] || 0;
|
|
seed = (seed * 9301 + 49297) % 233280;
|
|
var rnd = seed / 233280.0;
|
|
return Math.floor(min + rnd * (max - min));
|
|
}
|
|
function defineColor(bound) {
|
|
var sMin = bound.lowerBounds[0][0];
|
|
var sMax = bound.lowerBounds[bound.lowerBounds.length - 1][0];
|
|
var bMin = bound.lowerBounds[bound.lowerBounds.length - 1][1];
|
|
var bMax = bound.lowerBounds[0][1];
|
|
return {
|
|
name: bound.name,
|
|
hueRange: bound.hueRange,
|
|
lowerBounds: bound.lowerBounds,
|
|
saturationRange: [sMin, sMax],
|
|
brightnessRange: [bMin, bMax],
|
|
};
|
|
}
|
|
/**
|
|
* @hidden
|
|
*/
|
|
var bounds = [
|
|
{
|
|
name: "monochrome",
|
|
hueRange: null,
|
|
lowerBounds: [
|
|
[0, 0],
|
|
[100, 0],
|
|
],
|
|
},
|
|
{
|
|
name: "red",
|
|
hueRange: [-26, 18],
|
|
lowerBounds: [
|
|
[20, 100],
|
|
[30, 92],
|
|
[40, 89],
|
|
[50, 85],
|
|
[60, 78],
|
|
[70, 70],
|
|
[80, 60],
|
|
[90, 55],
|
|
[100, 50],
|
|
],
|
|
},
|
|
{
|
|
name: "orange",
|
|
hueRange: [19, 46],
|
|
lowerBounds: [
|
|
[20, 100],
|
|
[30, 93],
|
|
[40, 88],
|
|
[50, 86],
|
|
[60, 85],
|
|
[70, 70],
|
|
[100, 70],
|
|
],
|
|
},
|
|
{
|
|
name: "yellow",
|
|
hueRange: [47, 62],
|
|
lowerBounds: [
|
|
[25, 100],
|
|
[40, 94],
|
|
[50, 89],
|
|
[60, 86],
|
|
[70, 84],
|
|
[80, 82],
|
|
[90, 80],
|
|
[100, 75],
|
|
],
|
|
},
|
|
{
|
|
name: "green",
|
|
hueRange: [63, 178],
|
|
lowerBounds: [
|
|
[30, 100],
|
|
[40, 90],
|
|
[50, 85],
|
|
[60, 81],
|
|
[70, 74],
|
|
[80, 64],
|
|
[90, 50],
|
|
[100, 40],
|
|
],
|
|
},
|
|
{
|
|
name: "blue",
|
|
hueRange: [179, 257],
|
|
lowerBounds: [
|
|
[20, 100],
|
|
[30, 86],
|
|
[40, 80],
|
|
[50, 74],
|
|
[60, 60],
|
|
[70, 52],
|
|
[80, 44],
|
|
[90, 39],
|
|
[100, 35],
|
|
],
|
|
},
|
|
{
|
|
name: "purple",
|
|
hueRange: [258, 282],
|
|
lowerBounds: [
|
|
[20, 100],
|
|
[30, 87],
|
|
[40, 79],
|
|
[50, 70],
|
|
[60, 65],
|
|
[70, 59],
|
|
[80, 52],
|
|
[90, 45],
|
|
[100, 42],
|
|
],
|
|
},
|
|
{
|
|
name: "pink",
|
|
hueRange: [283, 334],
|
|
lowerBounds: [
|
|
[20, 100],
|
|
[30, 90],
|
|
[40, 86],
|
|
[60, 84],
|
|
[80, 80],
|
|
[90, 75],
|
|
[100, 73],
|
|
],
|
|
},
|
|
]; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme-tools/dist/chakra-ui-theme-tools.esm.js
|
|
|
|
/**
|
|
* Get the color raw value from theme
|
|
* @param theme - the theme object
|
|
* @param color - the color path ("green.200")
|
|
* @param fallback - the fallback color
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var getColor = function getColor(theme, color, fallback) {
|
|
var hex = (0, chakra_ui_utils_esm /* memoizedGet */.Wf)(
|
|
theme,
|
|
"colors." + color,
|
|
color
|
|
);
|
|
|
|
var _TinyColor = new module_TinyColor(hex),
|
|
isValid = _TinyColor.isValid;
|
|
|
|
return isValid ? hex : fallback;
|
|
};
|
|
/**
|
|
* Determines if the tone of given color is "light" or "dark"
|
|
* @param color - the color in hex, rgb, or hsl
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var tone = function tone(color) {
|
|
return function (theme) {
|
|
var hex = getColor(theme, color);
|
|
var isDark = new module_TinyColor(hex).isDark();
|
|
return isDark ? "dark" : "light";
|
|
};
|
|
};
|
|
/**
|
|
* Determines if a color tone is "dark"
|
|
* @param color - the color in hex, rgb, or hsl
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var isDark = function isDark(color) {
|
|
return function (theme) {
|
|
return tone(color)(theme) === "dark";
|
|
};
|
|
};
|
|
/**
|
|
* Determines if a color tone is "light"
|
|
* @param color - the color in hex, rgb, or hsl
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var isLight = function isLight(color) {
|
|
return function (theme) {
|
|
return tone(color)(theme) === "light";
|
|
};
|
|
};
|
|
/**
|
|
* Make a color transparent
|
|
* @param color - the color in hex, rgb, or hsl
|
|
* @param opacity - the amount of opacity the color should have (0-1)
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var transparentize = function transparentize(color, opacity) {
|
|
return function (theme) {
|
|
var raw = getColor(theme, color);
|
|
return new module_TinyColor(raw)
|
|
.setAlpha(opacity)
|
|
.toRgbString();
|
|
};
|
|
};
|
|
/**
|
|
* Add white to a color
|
|
* @param color - the color in hex, rgb, or hsl
|
|
* @param amount - the amount white to add (0-100)
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var whiten = function whiten(color, amount) {
|
|
return function (theme) {
|
|
var raw = getColor(theme, color);
|
|
return new TinyColor(raw).mix("#fff", amount).toHexString();
|
|
};
|
|
};
|
|
/**
|
|
* Add black to a color
|
|
* @param color - the color in hex, rgb, or hsl
|
|
* @param amount - the amount black to add (0-100)
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var blacken = function blacken(color, amount) {
|
|
return function (theme) {
|
|
var raw = getColor(theme, color);
|
|
return new TinyColor(raw).mix("#000", amount).toHexString();
|
|
};
|
|
};
|
|
/**
|
|
* Darken a specified color
|
|
* @param color - the color in hex, rgb, or hsl
|
|
* @param amount - the amount to darken (0-100)
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var darken = function darken(color, amount) {
|
|
return function (theme) {
|
|
var raw = getColor(theme, color);
|
|
return new TinyColor(raw).darken(amount).toHexString();
|
|
};
|
|
};
|
|
/**
|
|
* Lighten a specified color
|
|
* @param color - the color in hex, rgb, or hsl
|
|
* @param amount - the amount to lighten (0-100)
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var lighten = function lighten(color, amount) {
|
|
return function (theme) {
|
|
return new TinyColor(getColor(theme, color))
|
|
.lighten(amount)
|
|
.toHexString();
|
|
};
|
|
};
|
|
/**
|
|
* Checks the contract ratio of between 2 colors,
|
|
* based on the Web Content Accessibility Guidelines (Version 2.0).
|
|
*
|
|
* @param fg - the foreground or text color
|
|
* @param bg - the background color
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var contrast = function contrast(fg, bg) {
|
|
return function (theme) {
|
|
return readability(
|
|
getColor(theme, bg),
|
|
getColor(theme, fg)
|
|
);
|
|
};
|
|
};
|
|
/**
|
|
* Checks if a color meets the Web Content Accessibility
|
|
* Guidelines (Version 2.0) for contrast ratio.
|
|
*
|
|
* @param textColor - the foreground or text color
|
|
* @param bgColor - the background color
|
|
* @param options
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var isAccessible = function isAccessible(
|
|
textColor,
|
|
bgColor,
|
|
options
|
|
) {
|
|
return function (theme) {
|
|
return isReadable(
|
|
getColor(theme, bgColor),
|
|
getColor(theme, textColor),
|
|
options
|
|
);
|
|
};
|
|
};
|
|
/**
|
|
*
|
|
* @deprecated This will be removed in the next major release.
|
|
*/
|
|
|
|
var complementary = function complementary(color) {
|
|
return function (theme) {
|
|
return new TinyColor(getColor(theme, color))
|
|
.complement()
|
|
.toHexString();
|
|
};
|
|
};
|
|
function generateStripe(size, color) {
|
|
if (size === void 0) {
|
|
size = "1rem";
|
|
}
|
|
|
|
if (color === void 0) {
|
|
color = "rgba(255, 255, 255, 0.15)";
|
|
}
|
|
|
|
return {
|
|
backgroundImage:
|
|
"linear-gradient(\n 45deg,\n " +
|
|
color +
|
|
" 25%,\n transparent 25%,\n transparent 50%,\n " +
|
|
color +
|
|
" 50%,\n " +
|
|
color +
|
|
" 75%,\n transparent 75%,\n transparent\n )",
|
|
backgroundSize: size + " " + size,
|
|
};
|
|
}
|
|
function randomColor(opts) {
|
|
var fallback = random().toHexString();
|
|
|
|
if (
|
|
!opts ||
|
|
(0, chakra_ui_utils_esm /* isEmptyObject */.Qr)(opts)
|
|
) {
|
|
return fallback;
|
|
}
|
|
|
|
if (opts.string && opts.colors) {
|
|
return randomColorFromList(opts.string, opts.colors);
|
|
}
|
|
|
|
if (opts.string && !opts.colors) {
|
|
return randomColorFromString(opts.string);
|
|
}
|
|
|
|
if (opts.colors && !opts.string) {
|
|
return randomFromList(opts.colors);
|
|
}
|
|
|
|
return fallback;
|
|
}
|
|
|
|
function randomColorFromString(str) {
|
|
var hash = 0;
|
|
if (str.length === 0) return hash.toString();
|
|
|
|
for (var i = 0; i < str.length; i += 1) {
|
|
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
|
hash = hash & hash;
|
|
}
|
|
|
|
var color = "#";
|
|
|
|
for (var j = 0; j < 3; j += 1) {
|
|
var value = (hash >> (j * 8)) & 255;
|
|
color += ("00" + value.toString(16)).substr(-2);
|
|
}
|
|
|
|
return color;
|
|
}
|
|
|
|
function randomColorFromList(str, list) {
|
|
var index = 0;
|
|
if (str.length === 0) return list[0];
|
|
|
|
for (var i = 0; i < str.length; i += 1) {
|
|
index = str.charCodeAt(i) + ((index << 5) - index);
|
|
index = index & index;
|
|
}
|
|
|
|
index = ((index % list.length) + list.length) % list.length;
|
|
return list[index];
|
|
}
|
|
|
|
function randomFromList(list) {
|
|
return list[Math.floor(Math.random() * list.length)];
|
|
}
|
|
|
|
function mode(light, dark) {
|
|
return function (props) {
|
|
return props.colorMode === "dark" ? dark : light;
|
|
};
|
|
}
|
|
function orient(options) {
|
|
var orientation = options.orientation,
|
|
vertical = options.vertical,
|
|
horizontal = options.horizontal;
|
|
if (!orientation) return {};
|
|
return orientation === "vertical" ? vertical : horizontal;
|
|
}
|
|
|
|
function chakra_ui_theme_tools_esm_extends() {
|
|
chakra_ui_theme_tools_esm_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return chakra_ui_theme_tools_esm_extends.apply(this, arguments);
|
|
}
|
|
|
|
var createBreakpoints = function createBreakpoints(config) {
|
|
(0, chakra_ui_utils_esm /* warn */.ZK)({
|
|
condition: true,
|
|
message: [
|
|
"[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon",
|
|
"simply pass the breakpoints as an object. Remove the createBreakpoint(..) call",
|
|
].join(""),
|
|
});
|
|
return chakra_ui_theme_tools_esm_extends(
|
|
{
|
|
base: "0em",
|
|
},
|
|
config
|
|
);
|
|
};
|
|
|
|
function _defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) {
|
|
if (protoProps)
|
|
_defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
Object.defineProperty(Constructor, "prototype", {
|
|
writable: false,
|
|
});
|
|
return Constructor;
|
|
}
|
|
|
|
/**
|
|
* Used to define the anatomy/parts of a component in a way that provides
|
|
* a consistent API for `className`, css selector and `theming`.
|
|
*/
|
|
|
|
var Anatomy = /*#__PURE__*/ (function () {
|
|
function Anatomy(name) {
|
|
var _this = this;
|
|
|
|
this.map = {};
|
|
this.called = false;
|
|
|
|
this.assert = function () {
|
|
if (!_this.called) {
|
|
_this.called = true;
|
|
return;
|
|
}
|
|
|
|
throw new Error(
|
|
"[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
|
|
);
|
|
};
|
|
|
|
this.parts = function () {
|
|
_this.assert();
|
|
|
|
for (
|
|
var _len = arguments.length,
|
|
values = new Array(_len),
|
|
_key = 0;
|
|
_key < _len;
|
|
_key++
|
|
) {
|
|
values[_key] = arguments[_key];
|
|
}
|
|
|
|
for (
|
|
var _i = 0, _values = values;
|
|
_i < _values.length;
|
|
_i++
|
|
) {
|
|
var part = _values[_i];
|
|
_this.map[part] = _this.toPart(part);
|
|
}
|
|
|
|
return _this;
|
|
};
|
|
|
|
this.extend = function () {
|
|
for (
|
|
var _len2 = arguments.length,
|
|
parts = new Array(_len2),
|
|
_key2 = 0;
|
|
_key2 < _len2;
|
|
_key2++
|
|
) {
|
|
parts[_key2] = arguments[_key2];
|
|
}
|
|
|
|
for (
|
|
var _i2 = 0, _parts = parts;
|
|
_i2 < _parts.length;
|
|
_i2++
|
|
) {
|
|
var part = _parts[_i2];
|
|
if (part in _this.map) continue;
|
|
_this.map[part] = _this.toPart(part);
|
|
}
|
|
|
|
return _this;
|
|
};
|
|
|
|
this.toPart = function (part) {
|
|
var el = ["container", "root"].includes(
|
|
part != null ? part : ""
|
|
)
|
|
? [_this.name]
|
|
: [_this.name, part];
|
|
var attr = el.filter(Boolean).join("__");
|
|
var className = "chakra-" + attr;
|
|
var partObj = {
|
|
className: className,
|
|
selector: "." + className,
|
|
toString: function toString() {
|
|
return part;
|
|
},
|
|
};
|
|
return partObj;
|
|
};
|
|
|
|
this.__type = {};
|
|
}
|
|
/**
|
|
* Prevents user from calling `.parts` multiple times.
|
|
* It should only be called once.
|
|
*/
|
|
|
|
_createClass(Anatomy, [
|
|
{
|
|
key: "selectors",
|
|
get:
|
|
/**
|
|
* Get all selectors for the component anatomy
|
|
*/
|
|
function get() {
|
|
var value = (0,
|
|
chakra_ui_utils_esm /* fromEntries */.sq)(
|
|
Object.entries(this.map).map(function (
|
|
_ref
|
|
) {
|
|
var key = _ref[0],
|
|
part = _ref[1];
|
|
return [key, part.selector];
|
|
})
|
|
);
|
|
return value;
|
|
},
|
|
/**
|
|
* Get all classNames for the component anatomy
|
|
*/
|
|
},
|
|
{
|
|
key: "classNames",
|
|
get: function get() {
|
|
var value = (0,
|
|
chakra_ui_utils_esm /* fromEntries */.sq)(
|
|
Object.entries(this.map).map(function (_ref2) {
|
|
var key = _ref2[0],
|
|
part = _ref2[1];
|
|
return [key, part.className];
|
|
})
|
|
);
|
|
return value;
|
|
},
|
|
/**
|
|
* Get all parts as array of string
|
|
*/
|
|
},
|
|
{
|
|
key: "keys",
|
|
get: function get() {
|
|
return Object.keys(this.map);
|
|
},
|
|
/**
|
|
* Creates the part object for the given part
|
|
*/
|
|
},
|
|
]);
|
|
|
|
return Anatomy;
|
|
})();
|
|
function anatomy(name) {
|
|
return new Anatomy(name);
|
|
}
|
|
|
|
function toRef(operand) {
|
|
if (
|
|
(0, chakra_ui_utils_esm /* isObject */.Kn)(operand) &&
|
|
operand.reference
|
|
) {
|
|
return operand.reference;
|
|
}
|
|
|
|
return String(operand);
|
|
}
|
|
|
|
var toExpr = function toExpr(operator) {
|
|
for (
|
|
var _len = arguments.length,
|
|
operands = new Array(_len > 1 ? _len - 1 : 0),
|
|
_key = 1;
|
|
_key < _len;
|
|
_key++
|
|
) {
|
|
operands[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
return operands
|
|
.map(toRef)
|
|
.join(" " + operator + " ")
|
|
.replace(/calc/g, "");
|
|
};
|
|
|
|
var _add = function add() {
|
|
for (
|
|
var _len2 = arguments.length,
|
|
operands = new Array(_len2),
|
|
_key2 = 0;
|
|
_key2 < _len2;
|
|
_key2++
|
|
) {
|
|
operands[_key2] = arguments[_key2];
|
|
}
|
|
|
|
return (
|
|
"calc(" + toExpr.apply(void 0, ["+"].concat(operands)) + ")"
|
|
);
|
|
};
|
|
|
|
var _subtract = function subtract() {
|
|
for (
|
|
var _len3 = arguments.length,
|
|
operands = new Array(_len3),
|
|
_key3 = 0;
|
|
_key3 < _len3;
|
|
_key3++
|
|
) {
|
|
operands[_key3] = arguments[_key3];
|
|
}
|
|
|
|
return (
|
|
"calc(" + toExpr.apply(void 0, ["-"].concat(operands)) + ")"
|
|
);
|
|
};
|
|
|
|
var _multiply = function multiply() {
|
|
for (
|
|
var _len4 = arguments.length,
|
|
operands = new Array(_len4),
|
|
_key4 = 0;
|
|
_key4 < _len4;
|
|
_key4++
|
|
) {
|
|
operands[_key4] = arguments[_key4];
|
|
}
|
|
|
|
return (
|
|
"calc(" + toExpr.apply(void 0, ["*"].concat(operands)) + ")"
|
|
);
|
|
};
|
|
|
|
var _divide = function divide() {
|
|
for (
|
|
var _len5 = arguments.length,
|
|
operands = new Array(_len5),
|
|
_key5 = 0;
|
|
_key5 < _len5;
|
|
_key5++
|
|
) {
|
|
operands[_key5] = arguments[_key5];
|
|
}
|
|
|
|
return (
|
|
"calc(" + toExpr.apply(void 0, ["/"].concat(operands)) + ")"
|
|
);
|
|
};
|
|
|
|
var _negate = function negate(x) {
|
|
var value = toRef(x);
|
|
|
|
if (value != null && !Number.isNaN(parseFloat(value))) {
|
|
return String(value).startsWith("-")
|
|
? String(value).slice(1)
|
|
: "-" + value;
|
|
}
|
|
|
|
return _multiply(value, -1);
|
|
};
|
|
|
|
var calc = Object.assign(
|
|
function (x) {
|
|
return {
|
|
add: function add() {
|
|
for (
|
|
var _len6 = arguments.length,
|
|
operands = new Array(_len6),
|
|
_key6 = 0;
|
|
_key6 < _len6;
|
|
_key6++
|
|
) {
|
|
operands[_key6] = arguments[_key6];
|
|
}
|
|
|
|
return calc(
|
|
_add.apply(void 0, [x].concat(operands))
|
|
);
|
|
},
|
|
subtract: function subtract() {
|
|
for (
|
|
var _len7 = arguments.length,
|
|
operands = new Array(_len7),
|
|
_key7 = 0;
|
|
_key7 < _len7;
|
|
_key7++
|
|
) {
|
|
operands[_key7] = arguments[_key7];
|
|
}
|
|
|
|
return calc(
|
|
_subtract.apply(void 0, [x].concat(operands))
|
|
);
|
|
},
|
|
multiply: function multiply() {
|
|
for (
|
|
var _len8 = arguments.length,
|
|
operands = new Array(_len8),
|
|
_key8 = 0;
|
|
_key8 < _len8;
|
|
_key8++
|
|
) {
|
|
operands[_key8] = arguments[_key8];
|
|
}
|
|
|
|
return calc(
|
|
_multiply.apply(void 0, [x].concat(operands))
|
|
);
|
|
},
|
|
divide: function divide() {
|
|
for (
|
|
var _len9 = arguments.length,
|
|
operands = new Array(_len9),
|
|
_key9 = 0;
|
|
_key9 < _len9;
|
|
_key9++
|
|
) {
|
|
operands[_key9] = arguments[_key9];
|
|
}
|
|
|
|
return calc(
|
|
_divide.apply(void 0, [x].concat(operands))
|
|
);
|
|
},
|
|
negate: function negate() {
|
|
return calc(_negate(x));
|
|
},
|
|
toString: function toString() {
|
|
return x.toString();
|
|
},
|
|
};
|
|
},
|
|
{
|
|
add: _add,
|
|
subtract: _subtract,
|
|
multiply: _multiply,
|
|
divide: _divide,
|
|
negate: _negate,
|
|
}
|
|
);
|
|
|
|
function isDecimal(value) {
|
|
return !Number.isInteger(parseFloat(value.toString()));
|
|
}
|
|
|
|
function replaceWhiteSpace(value, replaceValue) {
|
|
if (replaceValue === void 0) {
|
|
replaceValue = "-";
|
|
}
|
|
|
|
return value.replace(/\s+/g, replaceValue);
|
|
}
|
|
|
|
function chakra_ui_theme_tools_esm_escape(value) {
|
|
var valueStr = replaceWhiteSpace(value.toString());
|
|
if (valueStr.includes("\\.")) return value;
|
|
return isDecimal(value) ? valueStr.replace(".", "\\.") : value;
|
|
}
|
|
|
|
function addPrefix(value, prefix) {
|
|
if (prefix === void 0) {
|
|
prefix = "";
|
|
}
|
|
|
|
return [prefix, chakra_ui_theme_tools_esm_escape(value)]
|
|
.filter(Boolean)
|
|
.join("-");
|
|
}
|
|
function toVarRef(name, fallback) {
|
|
return (
|
|
"var(" +
|
|
chakra_ui_theme_tools_esm_escape(name) +
|
|
(fallback ? ", " + fallback : "") +
|
|
")"
|
|
);
|
|
}
|
|
function toVar(value, prefix) {
|
|
if (prefix === void 0) {
|
|
prefix = "";
|
|
}
|
|
|
|
return "--" + addPrefix(value, prefix);
|
|
}
|
|
function cssVar(name, options) {
|
|
var cssVariable = toVar(
|
|
name,
|
|
options == null ? void 0 : options.prefix
|
|
);
|
|
return {
|
|
variable: cssVariable,
|
|
reference: toVarRef(
|
|
cssVariable,
|
|
getFallback(options == null ? void 0 : options.fallback)
|
|
),
|
|
};
|
|
}
|
|
|
|
function getFallback(fallback) {
|
|
if (typeof fallback === "string") return fallback;
|
|
return fallback == null ? void 0 : fallback.reference;
|
|
} // CONCATENATED MODULE: ./node_modules/@chakra-ui/anatomy/dist/chakra-ui-anatomy.esm.js
|
|
|
|
/**
|
|
* **Accordion anatomy**
|
|
* - Root: the root container of the accordion
|
|
* - Container: the accordion item contains the button and panel
|
|
* - Button: the button is the trigger for the panel
|
|
* - Panel: the panel is the content of the accordion item
|
|
* - Icon: the expanded/collapsed icon
|
|
*/
|
|
|
|
var accordionAnatomy = anatomy("accordion")
|
|
.parts("root", "container", "button", "panel")
|
|
.extend("icon");
|
|
/**
|
|
* **Alert anatomy**
|
|
* - Title: the alert's title
|
|
* - Description: the alert's description
|
|
* - Icon: the alert's icon
|
|
*/
|
|
|
|
var alertAnatomy = anatomy("alert")
|
|
.parts("title", "description", "container")
|
|
.extend("icon", "spinner");
|
|
/**
|
|
* **Avatar anatomy**
|
|
* - Container: the container for the avatar
|
|
* - Label: the avatar initials text
|
|
* - Excess Label: the label or text that represents excess avatar count.
|
|
* Typically used in avatar groups.
|
|
* - Group: the container for the avatar group
|
|
*/
|
|
|
|
var avatarAnatomy = anatomy("avatar")
|
|
.parts("label", "badge", "container")
|
|
.extend("excessLabel", "group");
|
|
/**
|
|
* **Breadcrumb anatomy**
|
|
* - Item: the container for a breadcrumb item
|
|
* - Link: the element that represents the breadcrumb link
|
|
* - Container: the container for the breadcrumb items
|
|
* - Separator: the separator between breadcrumb items
|
|
*/
|
|
|
|
var breadcrumbAnatomy = anatomy("breadcrumb")
|
|
.parts("link", "item", "container")
|
|
.extend("separator");
|
|
var buttonAnatomy = anatomy("button").parts();
|
|
var checkboxAnatomy = anatomy("checkbox")
|
|
.parts("control", "icon", "container")
|
|
.extend("label");
|
|
var circularProgressAnatomy = anatomy("progress")
|
|
.parts("track", "filledTrack")
|
|
.extend("label");
|
|
var drawerAnatomy = anatomy("drawer")
|
|
.parts("overlay", "dialogContainer", "dialog")
|
|
.extend("header", "closeButton", "body", "footer");
|
|
var editableAnatomy = anatomy("editable").parts(
|
|
"preview",
|
|
"input",
|
|
"textarea"
|
|
);
|
|
var formAnatomy = anatomy("form").parts(
|
|
"container",
|
|
"requiredIndicator",
|
|
"helperText"
|
|
);
|
|
var formErrorAnatomy = anatomy("formError").parts("text", "icon");
|
|
var inputAnatomy = anatomy("input").parts(
|
|
"addon",
|
|
"field",
|
|
"element"
|
|
);
|
|
var listAnatomy = anatomy("list").parts(
|
|
"container",
|
|
"item",
|
|
"icon"
|
|
);
|
|
var menuAnatomy = anatomy("menu")
|
|
.parts("button", "list", "item")
|
|
.extend("groupTitle", "command", "divider");
|
|
var modalAnatomy = anatomy("modal")
|
|
.parts("overlay", "dialogContainer", "dialog")
|
|
.extend("header", "closeButton", "body", "footer");
|
|
var numberInputAnatomy = anatomy("numberinput").parts(
|
|
"root",
|
|
"field",
|
|
"stepperGroup",
|
|
"stepper"
|
|
);
|
|
var pinInputAnatomy = anatomy("pininput").parts("field");
|
|
var popoverAnatomy = anatomy("popover")
|
|
.parts("content", "header", "body", "footer")
|
|
.extend("popper", "arrow", "closeButton");
|
|
var progressAnatomy = anatomy("progress").parts(
|
|
"label",
|
|
"filledTrack",
|
|
"track"
|
|
);
|
|
var radioAnatomy = anatomy("radio").parts(
|
|
"container",
|
|
"control",
|
|
"label"
|
|
);
|
|
var selectAnatomy = anatomy("select").parts("field", "icon");
|
|
var sliderAnatomy = anatomy("slider").parts(
|
|
"container",
|
|
"track",
|
|
"thumb",
|
|
"filledTrack"
|
|
);
|
|
var statAnatomy = anatomy("stat").parts(
|
|
"container",
|
|
"label",
|
|
"helpText",
|
|
"number",
|
|
"icon"
|
|
);
|
|
var switchAnatomy = anatomy("switch").parts(
|
|
"container",
|
|
"track",
|
|
"thumb"
|
|
);
|
|
var tableAnatomy = anatomy("table").parts(
|
|
"table",
|
|
"thead",
|
|
"tbody",
|
|
"tr",
|
|
"th",
|
|
"td",
|
|
"tfoot",
|
|
"caption"
|
|
);
|
|
var tabsAnatomy = anatomy("tabs").parts(
|
|
"root",
|
|
"tab",
|
|
"tablist",
|
|
"tabpanel",
|
|
"tabpanels",
|
|
"indicator"
|
|
);
|
|
/**
|
|
* **Tag anatomy**
|
|
* - Container: the container for the tag
|
|
* - Label: the text content of the tag
|
|
* - closeButton: the close button for the tag
|
|
*/
|
|
|
|
var tagAnatomy = anatomy("tag").parts(
|
|
"container",
|
|
"label",
|
|
"closeButton"
|
|
); // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/typography/dist/chakra-ui-theme-foundations-typography.esm.js
|
|
|
|
var typography = {
|
|
letterSpacings: {
|
|
tighter: "-0.05em",
|
|
tight: "-0.025em",
|
|
normal: "0",
|
|
wide: "0.025em",
|
|
wider: "0.05em",
|
|
widest: "0.1em",
|
|
},
|
|
lineHeights: {
|
|
normal: "normal",
|
|
none: 1,
|
|
shorter: 1.25,
|
|
short: 1.375,
|
|
base: 1.5,
|
|
tall: 1.625,
|
|
taller: "2",
|
|
3: ".75rem",
|
|
4: "1rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
8: "2rem",
|
|
9: "2.25rem",
|
|
10: "2.5rem",
|
|
},
|
|
fontWeights: {
|
|
hairline: 100,
|
|
thin: 200,
|
|
light: 300,
|
|
normal: 400,
|
|
medium: 500,
|
|
semibold: 600,
|
|
bold: 700,
|
|
extrabold: 800,
|
|
black: 900,
|
|
},
|
|
fonts: {
|
|
heading:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
|
|
},
|
|
fontSizes: {
|
|
xs: "0.75rem",
|
|
sm: "0.875rem",
|
|
md: "1rem",
|
|
lg: "1.125rem",
|
|
xl: "1.25rem",
|
|
"2xl": "1.5rem",
|
|
"3xl": "1.875rem",
|
|
"4xl": "2.25rem",
|
|
"5xl": "3rem",
|
|
"6xl": "3.75rem",
|
|
"7xl": "4.5rem",
|
|
"8xl": "6rem",
|
|
"9xl": "8rem",
|
|
},
|
|
};
|
|
|
|
// EXTERNAL MODULE: ./node_modules/lodash.mergewith/index.js
|
|
var lodash_mergewith = __webpack_require__(8554);
|
|
var lodash_mergewith_default =
|
|
/*#__PURE__*/ __webpack_require__.n(lodash_mergewith); // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/components/dist/chakra-ui-theme-components.esm.js
|
|
var baseStyleContainer$4 = {
|
|
borderTopWidth: "1px",
|
|
borderColor: "inherit",
|
|
_last: {
|
|
borderBottomWidth: "1px",
|
|
},
|
|
};
|
|
var baseStyleButton$1 = {
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
fontSize: "1rem",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_hover: {
|
|
bg: "blackAlpha.50",
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
},
|
|
px: 4,
|
|
py: 2,
|
|
};
|
|
var baseStylePanel = {
|
|
pt: 2,
|
|
px: 4,
|
|
pb: 5,
|
|
};
|
|
var baseStyleIcon$5 = {
|
|
fontSize: "1.25em",
|
|
};
|
|
var baseStyle$D = {
|
|
root: {},
|
|
container: baseStyleContainer$4,
|
|
button: baseStyleButton$1,
|
|
panel: baseStylePanel,
|
|
icon: baseStyleIcon$5,
|
|
};
|
|
var Accordion = {
|
|
parts: accordionAnatomy.keys,
|
|
baseStyle: baseStyle$D,
|
|
};
|
|
|
|
var baseStyle$C = {
|
|
container: {
|
|
px: 4,
|
|
py: 3,
|
|
},
|
|
title: {
|
|
fontWeight: "bold",
|
|
lineHeight: 6,
|
|
marginEnd: 2,
|
|
},
|
|
description: {
|
|
lineHeight: 6,
|
|
},
|
|
icon: {
|
|
flexShrink: 0,
|
|
marginEnd: 3,
|
|
w: 5,
|
|
h: 6,
|
|
},
|
|
spinner: {
|
|
flexShrink: 0,
|
|
marginEnd: 3,
|
|
w: 5,
|
|
h: 5,
|
|
},
|
|
};
|
|
|
|
function getBg(props) {
|
|
var theme = props.theme,
|
|
c = props.colorScheme;
|
|
var lightBg = getColor(theme, c + ".100", c);
|
|
var darkBg = transparentize(c + ".200", 0.16)(theme);
|
|
return mode(lightBg, darkBg)(props);
|
|
}
|
|
|
|
var variantSubtle$1 = function variantSubtle(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
container: {
|
|
bg: getBg(props),
|
|
},
|
|
icon: {
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
spinner: {
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantLeftAccent = function variantLeftAccent(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
container: {
|
|
paddingStart: 3,
|
|
borderStartWidth: "4px",
|
|
borderStartColor: mode(c + ".500", c + ".200")(props),
|
|
bg: getBg(props),
|
|
},
|
|
icon: {
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
spinner: {
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantTopAccent = function variantTopAccent(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
container: {
|
|
pt: 2,
|
|
borderTopWidth: "4px",
|
|
borderTopColor: mode(c + ".500", c + ".200")(props),
|
|
bg: getBg(props),
|
|
},
|
|
icon: {
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
spinner: {
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantSolid$3 = function variantSolid(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
container: {
|
|
bg: mode(c + ".500", c + ".200")(props),
|
|
color: mode("white", "gray.900")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variants$b = {
|
|
subtle: variantSubtle$1,
|
|
"left-accent": variantLeftAccent,
|
|
"top-accent": variantTopAccent,
|
|
solid: variantSolid$3,
|
|
};
|
|
var defaultProps$n = {
|
|
variant: "subtle",
|
|
colorScheme: "blue",
|
|
};
|
|
var Alert = {
|
|
parts: alertAnatomy.keys,
|
|
baseStyle: baseStyle$C,
|
|
variants: variants$b,
|
|
defaultProps: defaultProps$n,
|
|
};
|
|
|
|
var baseStyleBadge = function baseStyleBadge(props) {
|
|
return {
|
|
transform: "translate(25%, 25%)",
|
|
borderRadius: "full",
|
|
border: "0.2em solid",
|
|
borderColor: mode("white", "gray.800")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyleExcessLabel = function baseStyleExcessLabel(props) {
|
|
return {
|
|
bg: mode("gray.200", "whiteAlpha.400")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyleContainer$3 = function baseStyleContainer(props) {
|
|
var name = props.name,
|
|
theme = props.theme;
|
|
var bg = name
|
|
? randomColor({
|
|
string: name,
|
|
})
|
|
: "gray.400";
|
|
var isBgDark = isDark(bg)(theme);
|
|
var color = "white";
|
|
if (!isBgDark) color = "gray.800";
|
|
var borderColor = mode("white", "gray.800")(props);
|
|
return {
|
|
bg: bg,
|
|
color: color,
|
|
borderColor: borderColor,
|
|
verticalAlign: "top",
|
|
};
|
|
};
|
|
|
|
var baseStyle$B = function baseStyle(props) {
|
|
return {
|
|
badge: baseStyleBadge(props),
|
|
excessLabel: baseStyleExcessLabel(props),
|
|
container: baseStyleContainer$3(props),
|
|
};
|
|
};
|
|
|
|
function getSize$3(size) {
|
|
var themeSize = size !== "100%" ? sizes[size] : undefined;
|
|
return {
|
|
container: {
|
|
width: size,
|
|
height: size,
|
|
fontSize:
|
|
"calc(" +
|
|
(themeSize != null ? themeSize : size) +
|
|
" / 2.5)",
|
|
},
|
|
excessLabel: {
|
|
width: size,
|
|
height: size,
|
|
},
|
|
label: {
|
|
fontSize:
|
|
"calc(" +
|
|
(themeSize != null ? themeSize : size) +
|
|
" / 2.5)",
|
|
lineHeight:
|
|
size !== "100%"
|
|
? themeSize != null
|
|
? themeSize
|
|
: size
|
|
: undefined,
|
|
},
|
|
};
|
|
}
|
|
|
|
var sizes$k = {
|
|
"2xs": getSize$3(4),
|
|
xs: getSize$3(6),
|
|
sm: getSize$3(8),
|
|
md: getSize$3(12),
|
|
lg: getSize$3(16),
|
|
xl: getSize$3(24),
|
|
"2xl": getSize$3(32),
|
|
full: getSize$3("100%"),
|
|
};
|
|
var defaultProps$m = {
|
|
size: "md",
|
|
};
|
|
var Avatar = {
|
|
parts: avatarAnatomy.keys,
|
|
baseStyle: baseStyle$B,
|
|
sizes: sizes$k,
|
|
defaultProps: defaultProps$m,
|
|
};
|
|
|
|
var baseStyle$A = {
|
|
px: 1,
|
|
textTransform: "uppercase",
|
|
fontSize: "xs",
|
|
borderRadius: "sm",
|
|
fontWeight: "bold",
|
|
};
|
|
|
|
var variantSolid$2 = function variantSolid(props) {
|
|
var c = props.colorScheme,
|
|
theme = props.theme;
|
|
var dark = transparentize(c + ".500", 0.6)(theme);
|
|
return {
|
|
bg: mode(c + ".500", dark)(props),
|
|
color: mode("white", "whiteAlpha.800")(props),
|
|
};
|
|
};
|
|
|
|
var variantSubtle = function variantSubtle(props) {
|
|
var c = props.colorScheme,
|
|
theme = props.theme;
|
|
var darkBg = transparentize(c + ".200", 0.16)(theme);
|
|
return {
|
|
bg: mode(c + ".100", darkBg)(props),
|
|
color: mode(c + ".800", c + ".200")(props),
|
|
};
|
|
};
|
|
|
|
var variantOutline$2 = function variantOutline(props) {
|
|
var c = props.colorScheme,
|
|
theme = props.theme;
|
|
var darkColor = transparentize(c + ".200", 0.8)(theme);
|
|
var lightColor = getColor(theme, c + ".500");
|
|
var color = mode(lightColor, darkColor)(props);
|
|
return {
|
|
color: color,
|
|
boxShadow: "inset 0 0 0px 1px " + color,
|
|
};
|
|
};
|
|
|
|
var variants$a = {
|
|
solid: variantSolid$2,
|
|
subtle: variantSubtle,
|
|
outline: variantOutline$2,
|
|
};
|
|
var defaultProps$l = {
|
|
variant: "subtle",
|
|
colorScheme: "gray",
|
|
};
|
|
var Badge = {
|
|
baseStyle: baseStyle$A,
|
|
variants: variants$a,
|
|
defaultProps: defaultProps$l,
|
|
};
|
|
|
|
var baseStyleLink = {
|
|
transitionProperty: "common",
|
|
transitionDuration: "fast",
|
|
transitionTimingFunction: "ease-out",
|
|
cursor: "pointer",
|
|
textDecoration: "none",
|
|
outline: "none",
|
|
color: "inherit",
|
|
_hover: {
|
|
textDecoration: "underline",
|
|
},
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
};
|
|
var baseStyle$z = {
|
|
link: baseStyleLink,
|
|
};
|
|
var Breadcrumb = {
|
|
parts: breadcrumbAnatomy.keys,
|
|
baseStyle: baseStyle$z,
|
|
};
|
|
|
|
var baseStyle$y = {
|
|
lineHeight: "1.2",
|
|
borderRadius: "md",
|
|
fontWeight: "semibold",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
boxShadow: "none",
|
|
},
|
|
_hover: {
|
|
_disabled: {
|
|
bg: "initial",
|
|
},
|
|
},
|
|
};
|
|
|
|
var variantGhost = function variantGhost(props) {
|
|
var c = props.colorScheme,
|
|
theme = props.theme;
|
|
|
|
if (c === "gray") {
|
|
return {
|
|
color: mode("inherit", "whiteAlpha.900")(props),
|
|
_hover: {
|
|
bg: mode("gray.100", "whiteAlpha.200")(props),
|
|
},
|
|
_active: {
|
|
bg: mode("gray.200", "whiteAlpha.300")(props),
|
|
},
|
|
};
|
|
}
|
|
|
|
var darkHoverBg = transparentize(c + ".200", 0.12)(theme);
|
|
var darkActiveBg = transparentize(c + ".200", 0.24)(theme);
|
|
return {
|
|
color: mode(c + ".600", c + ".200")(props),
|
|
bg: "transparent",
|
|
_hover: {
|
|
bg: mode(c + ".50", darkHoverBg)(props),
|
|
},
|
|
_active: {
|
|
bg: mode(c + ".100", darkActiveBg)(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantOutline$1 = function variantOutline(props) {
|
|
var c = props.colorScheme;
|
|
var borderColor = mode("gray.200", "whiteAlpha.300")(props);
|
|
return sizes_501602a9_esm_extends(
|
|
{
|
|
border: "1px solid",
|
|
borderColor:
|
|
c === "gray" ? borderColor : "currentColor",
|
|
".chakra-button__group[data-attached] > &:not(:last-of-type)":
|
|
{
|
|
marginEnd: "-1px",
|
|
},
|
|
},
|
|
variantGhost(props)
|
|
);
|
|
};
|
|
|
|
/** Accessible color overrides for less accessible colors. */
|
|
var accessibleColorMap = {
|
|
yellow: {
|
|
bg: "yellow.400",
|
|
color: "black",
|
|
hoverBg: "yellow.500",
|
|
activeBg: "yellow.600",
|
|
},
|
|
cyan: {
|
|
bg: "cyan.400",
|
|
color: "black",
|
|
hoverBg: "cyan.500",
|
|
activeBg: "cyan.600",
|
|
},
|
|
};
|
|
|
|
var variantSolid$1 = function variantSolid(props) {
|
|
var _accessibleColorMap$c;
|
|
|
|
var c = props.colorScheme;
|
|
|
|
if (c === "gray") {
|
|
var _bg = mode("gray.100", "whiteAlpha.200")(props);
|
|
|
|
return {
|
|
bg: _bg,
|
|
_hover: {
|
|
bg: mode("gray.200", "whiteAlpha.300")(props),
|
|
_disabled: {
|
|
bg: _bg,
|
|
},
|
|
},
|
|
_active: {
|
|
bg: mode("gray.300", "whiteAlpha.400")(props),
|
|
},
|
|
};
|
|
}
|
|
|
|
var _ref =
|
|
(_accessibleColorMap$c = accessibleColorMap[c]) != null
|
|
? _accessibleColorMap$c
|
|
: {},
|
|
_ref$bg = _ref.bg,
|
|
bg = _ref$bg === void 0 ? c + ".500" : _ref$bg,
|
|
_ref$color = _ref.color,
|
|
color = _ref$color === void 0 ? "white" : _ref$color,
|
|
_ref$hoverBg = _ref.hoverBg,
|
|
hoverBg =
|
|
_ref$hoverBg === void 0 ? c + ".600" : _ref$hoverBg,
|
|
_ref$activeBg = _ref.activeBg,
|
|
activeBg =
|
|
_ref$activeBg === void 0 ? c + ".700" : _ref$activeBg;
|
|
|
|
var background = mode(bg, c + ".200")(props);
|
|
return {
|
|
bg: background,
|
|
color: mode(color, "gray.800")(props),
|
|
_hover: {
|
|
bg: mode(hoverBg, c + ".300")(props),
|
|
_disabled: {
|
|
bg: background,
|
|
},
|
|
},
|
|
_active: {
|
|
bg: mode(activeBg, c + ".400")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantLink = function variantLink(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
padding: 0,
|
|
height: "auto",
|
|
lineHeight: "normal",
|
|
verticalAlign: "baseline",
|
|
color: mode(c + ".500", c + ".200")(props),
|
|
_hover: {
|
|
textDecoration: "underline",
|
|
_disabled: {
|
|
textDecoration: "none",
|
|
},
|
|
},
|
|
_active: {
|
|
color: mode(c + ".700", c + ".500")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantUnstyled$2 = {
|
|
bg: "none",
|
|
color: "inherit",
|
|
display: "inline",
|
|
lineHeight: "inherit",
|
|
m: 0,
|
|
p: 0,
|
|
};
|
|
var variants$9 = {
|
|
ghost: variantGhost,
|
|
outline: variantOutline$1,
|
|
solid: variantSolid$1,
|
|
link: variantLink,
|
|
unstyled: variantUnstyled$2,
|
|
};
|
|
var sizes$j = {
|
|
lg: {
|
|
h: 12,
|
|
minW: 12,
|
|
fontSize: "lg",
|
|
px: 6,
|
|
},
|
|
md: {
|
|
h: 10,
|
|
minW: 10,
|
|
fontSize: "md",
|
|
px: 4,
|
|
},
|
|
sm: {
|
|
h: 8,
|
|
minW: 8,
|
|
fontSize: "sm",
|
|
px: 3,
|
|
},
|
|
xs: {
|
|
h: 6,
|
|
minW: 6,
|
|
fontSize: "xs",
|
|
px: 2,
|
|
},
|
|
};
|
|
var defaultProps$k = {
|
|
variant: "solid",
|
|
size: "md",
|
|
colorScheme: "gray",
|
|
};
|
|
var Button = {
|
|
baseStyle: baseStyle$y,
|
|
variants: variants$9,
|
|
sizes: sizes$j,
|
|
defaultProps: defaultProps$k,
|
|
};
|
|
|
|
var baseStyleControl$1 = function baseStyleControl(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
w: "100%",
|
|
transitionProperty: "box-shadow",
|
|
transitionDuration: "normal",
|
|
border: "2px solid",
|
|
borderRadius: "sm",
|
|
borderColor: "inherit",
|
|
color: "white",
|
|
_checked: {
|
|
bg: mode(c + ".500", c + ".200")(props),
|
|
borderColor: mode(c + ".500", c + ".200")(props),
|
|
color: mode("white", "gray.900")(props),
|
|
_hover: {
|
|
bg: mode(c + ".600", c + ".300")(props),
|
|
borderColor: mode(c + ".600", c + ".300")(props),
|
|
},
|
|
_disabled: {
|
|
borderColor: mode("gray.200", "transparent")(props),
|
|
bg: mode("gray.200", "whiteAlpha.300")(props),
|
|
color: mode("gray.500", "whiteAlpha.500")(props),
|
|
},
|
|
},
|
|
_indeterminate: {
|
|
bg: mode(c + ".500", c + ".200")(props),
|
|
borderColor: mode(c + ".500", c + ".200")(props),
|
|
color: mode("white", "gray.900")(props),
|
|
},
|
|
_disabled: {
|
|
bg: mode("gray.100", "whiteAlpha.100")(props),
|
|
borderColor: mode("gray.100", "transparent")(props),
|
|
},
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_invalid: {
|
|
borderColor: mode("red.500", "red.300")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var baseStyleContainer$2 = {
|
|
_disabled: {
|
|
cursor: "not-allowed",
|
|
},
|
|
};
|
|
var baseStyleLabel$3 = {
|
|
userSelect: "none",
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
},
|
|
};
|
|
var baseStyleIcon$4 = {
|
|
transitionProperty: "transform",
|
|
transitionDuration: "normal",
|
|
};
|
|
|
|
var baseStyle$x = function baseStyle(props) {
|
|
return {
|
|
icon: baseStyleIcon$4,
|
|
container: baseStyleContainer$2,
|
|
control: baseStyleControl$1(props),
|
|
label: baseStyleLabel$3,
|
|
};
|
|
};
|
|
|
|
var sizes$i = {
|
|
sm: {
|
|
control: {
|
|
h: 3,
|
|
w: 3,
|
|
},
|
|
label: {
|
|
fontSize: "sm",
|
|
},
|
|
icon: {
|
|
fontSize: "0.45rem",
|
|
},
|
|
},
|
|
md: {
|
|
control: {
|
|
w: 4,
|
|
h: 4,
|
|
},
|
|
label: {
|
|
fontSize: "md",
|
|
},
|
|
icon: {
|
|
fontSize: "0.625rem",
|
|
},
|
|
},
|
|
lg: {
|
|
control: {
|
|
w: 5,
|
|
h: 5,
|
|
},
|
|
label: {
|
|
fontSize: "lg",
|
|
},
|
|
icon: {
|
|
fontSize: "0.625rem",
|
|
},
|
|
},
|
|
};
|
|
var defaultProps$j = {
|
|
size: "md",
|
|
colorScheme: "blue",
|
|
};
|
|
var Checkbox = {
|
|
parts: checkboxAnatomy.keys,
|
|
baseStyle: baseStyle$x,
|
|
sizes: sizes$i,
|
|
defaultProps: defaultProps$j,
|
|
};
|
|
|
|
var _lg$1, _md$1, _sm$1;
|
|
var $size$1 = cssVar("close-button-size");
|
|
|
|
var baseStyle$w = function baseStyle(props) {
|
|
var hoverBg = mode("blackAlpha.100", "whiteAlpha.100")(props);
|
|
var activeBg = mode("blackAlpha.200", "whiteAlpha.200")(props);
|
|
return {
|
|
w: [$size$1.reference],
|
|
h: [$size$1.reference],
|
|
borderRadius: "md",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
boxShadow: "none",
|
|
},
|
|
_hover: {
|
|
bg: hoverBg,
|
|
},
|
|
_active: {
|
|
bg: activeBg,
|
|
},
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
};
|
|
};
|
|
|
|
var sizes$h = {
|
|
lg:
|
|
((_lg$1 = {}),
|
|
(_lg$1[$size$1.variable] = "40px"),
|
|
(_lg$1.fontSize = "16px"),
|
|
_lg$1),
|
|
md:
|
|
((_md$1 = {}),
|
|
(_md$1[$size$1.variable] = "32px"),
|
|
(_md$1.fontSize = "12px"),
|
|
_md$1),
|
|
sm:
|
|
((_sm$1 = {}),
|
|
(_sm$1[$size$1.variable] = "24px"),
|
|
(_sm$1.fontSize = "10px"),
|
|
_sm$1),
|
|
};
|
|
var defaultProps$i = {
|
|
size: "md",
|
|
};
|
|
var CloseButton = {
|
|
baseStyle: baseStyle$w,
|
|
sizes: sizes$h,
|
|
defaultProps: defaultProps$i,
|
|
};
|
|
|
|
var variants$8 = Badge.variants,
|
|
defaultProps$h = Badge.defaultProps;
|
|
var baseStyle$v = {
|
|
fontFamily: "mono",
|
|
fontSize: "sm",
|
|
px: "0.2em",
|
|
borderRadius: "sm",
|
|
};
|
|
var Code = {
|
|
baseStyle: baseStyle$v,
|
|
variants: variants$8,
|
|
defaultProps: defaultProps$h,
|
|
};
|
|
|
|
var baseStyle$u = {
|
|
w: "100%",
|
|
mx: "auto",
|
|
maxW: "60ch",
|
|
px: "1rem",
|
|
};
|
|
var chakra_ui_theme_components_esm_Container = {
|
|
baseStyle: baseStyle$u,
|
|
};
|
|
|
|
var baseStyle$t = {
|
|
opacity: 0.6,
|
|
borderColor: "inherit",
|
|
};
|
|
var variantSolid = {
|
|
borderStyle: "solid",
|
|
};
|
|
var variantDashed = {
|
|
borderStyle: "dashed",
|
|
};
|
|
var variants$7 = {
|
|
solid: variantSolid,
|
|
dashed: variantDashed,
|
|
};
|
|
var defaultProps$g = {
|
|
variant: "solid",
|
|
};
|
|
var Divider = {
|
|
baseStyle: baseStyle$t,
|
|
variants: variants$7,
|
|
defaultProps: defaultProps$g,
|
|
};
|
|
|
|
/**
|
|
* Since the `maxWidth` prop references theme.sizes internally,
|
|
* we can leverage that to size our modals.
|
|
*/
|
|
|
|
function getSize$2(value) {
|
|
if (value === "full") {
|
|
return {
|
|
dialog: {
|
|
maxW: "100vw",
|
|
h: "100vh",
|
|
},
|
|
};
|
|
}
|
|
|
|
return {
|
|
dialog: {
|
|
maxW: value,
|
|
},
|
|
};
|
|
}
|
|
|
|
var baseStyleOverlay$1 = {
|
|
bg: "blackAlpha.600",
|
|
zIndex: "overlay",
|
|
};
|
|
var baseStyleDialogContainer$1 = {
|
|
display: "flex",
|
|
zIndex: "modal",
|
|
justifyContent: "center",
|
|
};
|
|
|
|
var baseStyleDialog$1 = function baseStyleDialog(props) {
|
|
var isFullHeight = props.isFullHeight;
|
|
return sizes_501602a9_esm_extends(
|
|
{},
|
|
isFullHeight && {
|
|
height: "100vh",
|
|
},
|
|
{
|
|
zIndex: "modal",
|
|
maxH: "100vh",
|
|
bg: mode("white", "gray.700")(props),
|
|
color: "inherit",
|
|
boxShadow: mode("lg", "dark-lg")(props),
|
|
}
|
|
);
|
|
};
|
|
|
|
var baseStyleHeader$2 = {
|
|
px: 6,
|
|
py: 4,
|
|
fontSize: "xl",
|
|
fontWeight: "semibold",
|
|
};
|
|
var baseStyleCloseButton$3 = {
|
|
position: "absolute",
|
|
top: 2,
|
|
insetEnd: 3,
|
|
};
|
|
var baseStyleBody$2 = {
|
|
px: 6,
|
|
py: 2,
|
|
flex: 1,
|
|
overflow: "auto",
|
|
};
|
|
var baseStyleFooter$2 = {
|
|
px: 6,
|
|
py: 4,
|
|
};
|
|
|
|
var baseStyle$s = function baseStyle(props) {
|
|
return {
|
|
overlay: baseStyleOverlay$1,
|
|
dialogContainer: baseStyleDialogContainer$1,
|
|
dialog: baseStyleDialog$1(props),
|
|
header: baseStyleHeader$2,
|
|
closeButton: baseStyleCloseButton$3,
|
|
body: baseStyleBody$2,
|
|
footer: baseStyleFooter$2,
|
|
};
|
|
};
|
|
|
|
var sizes$g = {
|
|
xs: getSize$2("xs"),
|
|
sm: getSize$2("md"),
|
|
md: getSize$2("lg"),
|
|
lg: getSize$2("2xl"),
|
|
xl: getSize$2("4xl"),
|
|
full: getSize$2("full"),
|
|
};
|
|
var defaultProps$f = {
|
|
size: "xs",
|
|
};
|
|
var Drawer = {
|
|
parts: drawerAnatomy.keys,
|
|
baseStyle: baseStyle$s,
|
|
sizes: sizes$g,
|
|
defaultProps: defaultProps$f,
|
|
};
|
|
|
|
var baseStylePreview = {
|
|
borderRadius: "md",
|
|
py: "3px",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
};
|
|
var baseStyleInput = {
|
|
borderRadius: "md",
|
|
py: "3px",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
width: "full",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_placeholder: {
|
|
opacity: 0.6,
|
|
},
|
|
};
|
|
var baseStyleTextarea = {
|
|
borderRadius: "md",
|
|
py: "3px",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
width: "full",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_placeholder: {
|
|
opacity: 0.6,
|
|
},
|
|
};
|
|
var baseStyle$r = {
|
|
preview: baseStylePreview,
|
|
input: baseStyleInput,
|
|
textarea: baseStyleTextarea,
|
|
};
|
|
var Editable = {
|
|
parts: editableAnatomy.keys,
|
|
baseStyle: baseStyle$r,
|
|
};
|
|
|
|
var baseStyleRequiredIndicator =
|
|
function baseStyleRequiredIndicator(props) {
|
|
return {
|
|
marginStart: 1,
|
|
color: mode("red.500", "red.300")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyleHelperText = function baseStyleHelperText(props) {
|
|
return {
|
|
mt: 2,
|
|
color: mode("gray.500", "whiteAlpha.600")(props),
|
|
lineHeight: "normal",
|
|
fontSize: "sm",
|
|
};
|
|
};
|
|
|
|
var baseStyle$q = function baseStyle(props) {
|
|
return {
|
|
container: {
|
|
width: "100%",
|
|
position: "relative",
|
|
},
|
|
requiredIndicator: baseStyleRequiredIndicator(props),
|
|
helperText: baseStyleHelperText(props),
|
|
};
|
|
};
|
|
|
|
var Form = {
|
|
parts: formAnatomy.keys,
|
|
baseStyle: baseStyle$q,
|
|
};
|
|
|
|
var baseStyleText = function baseStyleText(props) {
|
|
return {
|
|
color: mode("red.500", "red.300")(props),
|
|
mt: 2,
|
|
fontSize: "sm",
|
|
lineHeight: "normal",
|
|
};
|
|
};
|
|
|
|
var baseStyleIcon$3 = function baseStyleIcon(props) {
|
|
return {
|
|
marginEnd: "0.5em",
|
|
color: mode("red.500", "red.300")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyle$p = function baseStyle(props) {
|
|
return {
|
|
text: baseStyleText(props),
|
|
icon: baseStyleIcon$3(props),
|
|
};
|
|
};
|
|
|
|
var FormError = {
|
|
parts: formErrorAnatomy.keys,
|
|
baseStyle: baseStyle$p,
|
|
};
|
|
|
|
var baseStyle$o = {
|
|
fontSize: "md",
|
|
marginEnd: 3,
|
|
mb: 2,
|
|
fontWeight: "medium",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
opacity: 1,
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
},
|
|
};
|
|
var FormLabel = {
|
|
baseStyle: baseStyle$o,
|
|
};
|
|
|
|
var baseStyle$n = {
|
|
fontFamily: "heading",
|
|
fontWeight: "bold",
|
|
};
|
|
var sizes$f = {
|
|
"4xl": {
|
|
fontSize: ["6xl", null, "7xl"],
|
|
lineHeight: 1,
|
|
},
|
|
"3xl": {
|
|
fontSize: ["5xl", null, "6xl"],
|
|
lineHeight: 1,
|
|
},
|
|
"2xl": {
|
|
fontSize: ["4xl", null, "5xl"],
|
|
lineHeight: [1.2, null, 1],
|
|
},
|
|
xl: {
|
|
fontSize: ["3xl", null, "4xl"],
|
|
lineHeight: [1.33, null, 1.2],
|
|
},
|
|
lg: {
|
|
fontSize: ["2xl", null, "3xl"],
|
|
lineHeight: [1.33, null, 1.2],
|
|
},
|
|
md: {
|
|
fontSize: "xl",
|
|
lineHeight: 1.2,
|
|
},
|
|
sm: {
|
|
fontSize: "md",
|
|
lineHeight: 1.2,
|
|
},
|
|
xs: {
|
|
fontSize: "sm",
|
|
lineHeight: 1.2,
|
|
},
|
|
};
|
|
var defaultProps$e = {
|
|
size: "xl",
|
|
};
|
|
var Heading = {
|
|
baseStyle: baseStyle$n,
|
|
sizes: sizes$f,
|
|
defaultProps: defaultProps$e,
|
|
};
|
|
|
|
var baseStyle$m = {
|
|
field: {
|
|
width: "100%",
|
|
minWidth: 0,
|
|
outline: 0,
|
|
position: "relative",
|
|
appearance: "none",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
},
|
|
};
|
|
var size = {
|
|
lg: {
|
|
fontSize: "lg",
|
|
px: 4,
|
|
h: 12,
|
|
borderRadius: "md",
|
|
},
|
|
md: {
|
|
fontSize: "md",
|
|
px: 4,
|
|
h: 10,
|
|
borderRadius: "md",
|
|
},
|
|
sm: {
|
|
fontSize: "sm",
|
|
px: 3,
|
|
h: 8,
|
|
borderRadius: "sm",
|
|
},
|
|
xs: {
|
|
fontSize: "xs",
|
|
px: 2,
|
|
h: 6,
|
|
borderRadius: "sm",
|
|
},
|
|
};
|
|
var sizes$e = {
|
|
lg: {
|
|
field: size.lg,
|
|
addon: size.lg,
|
|
},
|
|
md: {
|
|
field: size.md,
|
|
addon: size.md,
|
|
},
|
|
sm: {
|
|
field: size.sm,
|
|
addon: size.sm,
|
|
},
|
|
xs: {
|
|
field: size.xs,
|
|
addon: size.xs,
|
|
},
|
|
};
|
|
|
|
function getDefaults(props) {
|
|
var fc = props.focusBorderColor,
|
|
ec = props.errorBorderColor;
|
|
return {
|
|
focusBorderColor: fc || mode("blue.500", "blue.300")(props),
|
|
errorBorderColor: ec || mode("red.500", "red.300")(props),
|
|
};
|
|
}
|
|
|
|
var variantOutline = function variantOutline(props) {
|
|
var theme = props.theme;
|
|
|
|
var _getDefaults = getDefaults(props),
|
|
fc = _getDefaults.focusBorderColor,
|
|
ec = _getDefaults.errorBorderColor;
|
|
|
|
return {
|
|
field: {
|
|
border: "1px solid",
|
|
borderColor: "inherit",
|
|
bg: "inherit",
|
|
_hover: {
|
|
borderColor: mode(
|
|
"gray.300",
|
|
"whiteAlpha.400"
|
|
)(props),
|
|
},
|
|
_readOnly: {
|
|
boxShadow: "none !important",
|
|
userSelect: "all",
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
},
|
|
_invalid: {
|
|
borderColor: getColor(theme, ec),
|
|
boxShadow: "0 0 0 1px " + getColor(theme, ec),
|
|
},
|
|
_focusVisible: {
|
|
zIndex: 1,
|
|
borderColor: getColor(theme, fc),
|
|
boxShadow: "0 0 0 1px " + getColor(theme, fc),
|
|
},
|
|
},
|
|
addon: {
|
|
border: "1px solid",
|
|
borderColor: mode("inherit", "whiteAlpha.50")(props),
|
|
bg: mode("gray.100", "whiteAlpha.300")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantFilled = function variantFilled(props) {
|
|
var theme = props.theme;
|
|
|
|
var _getDefaults2 = getDefaults(props),
|
|
fc = _getDefaults2.focusBorderColor,
|
|
ec = _getDefaults2.errorBorderColor;
|
|
|
|
return {
|
|
field: {
|
|
border: "2px solid",
|
|
borderColor: "transparent",
|
|
bg: mode("gray.100", "whiteAlpha.50")(props),
|
|
_hover: {
|
|
bg: mode("gray.200", "whiteAlpha.100")(props),
|
|
},
|
|
_readOnly: {
|
|
boxShadow: "none !important",
|
|
userSelect: "all",
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
},
|
|
_invalid: {
|
|
borderColor: getColor(theme, ec),
|
|
},
|
|
_focusVisible: {
|
|
bg: "transparent",
|
|
borderColor: getColor(theme, fc),
|
|
},
|
|
},
|
|
addon: {
|
|
border: "2px solid",
|
|
borderColor: "transparent",
|
|
bg: mode("gray.100", "whiteAlpha.50")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantFlushed = function variantFlushed(props) {
|
|
var theme = props.theme;
|
|
|
|
var _getDefaults3 = getDefaults(props),
|
|
fc = _getDefaults3.focusBorderColor,
|
|
ec = _getDefaults3.errorBorderColor;
|
|
|
|
return {
|
|
field: {
|
|
borderBottom: "1px solid",
|
|
borderColor: "inherit",
|
|
borderRadius: 0,
|
|
px: 0,
|
|
bg: "transparent",
|
|
_readOnly: {
|
|
boxShadow: "none !important",
|
|
userSelect: "all",
|
|
},
|
|
_invalid: {
|
|
borderColor: getColor(theme, ec),
|
|
boxShadow: "0px 1px 0px 0px " + getColor(theme, ec),
|
|
},
|
|
_focusVisible: {
|
|
borderColor: getColor(theme, fc),
|
|
boxShadow: "0px 1px 0px 0px " + getColor(theme, fc),
|
|
},
|
|
},
|
|
addon: {
|
|
borderBottom: "2px solid",
|
|
borderColor: "inherit",
|
|
borderRadius: 0,
|
|
px: 0,
|
|
bg: "transparent",
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantUnstyled$1 = {
|
|
field: {
|
|
bg: "transparent",
|
|
px: 0,
|
|
height: "auto",
|
|
},
|
|
addon: {
|
|
bg: "transparent",
|
|
px: 0,
|
|
height: "auto",
|
|
},
|
|
};
|
|
var variants$6 = {
|
|
outline: variantOutline,
|
|
filled: variantFilled,
|
|
flushed: variantFlushed,
|
|
unstyled: variantUnstyled$1,
|
|
};
|
|
var defaultProps$d = {
|
|
size: "md",
|
|
variant: "outline",
|
|
};
|
|
var Input = {
|
|
parts: inputAnatomy.keys,
|
|
baseStyle: baseStyle$m,
|
|
sizes: sizes$e,
|
|
variants: variants$6,
|
|
defaultProps: defaultProps$d,
|
|
};
|
|
|
|
var baseStyle$l = function baseStyle(props) {
|
|
return {
|
|
bg: mode("gray.100", "whiteAlpha")(props),
|
|
borderRadius: "md",
|
|
borderWidth: "1px",
|
|
borderBottomWidth: "3px",
|
|
fontSize: "0.8em",
|
|
fontWeight: "bold",
|
|
lineHeight: "normal",
|
|
px: "0.4em",
|
|
whiteSpace: "nowrap",
|
|
};
|
|
};
|
|
|
|
var Kbd = {
|
|
baseStyle: baseStyle$l,
|
|
};
|
|
|
|
var baseStyle$k = {
|
|
transitionProperty: "common",
|
|
transitionDuration: "fast",
|
|
transitionTimingFunction: "ease-out",
|
|
cursor: "pointer",
|
|
textDecoration: "none",
|
|
outline: "none",
|
|
color: "inherit",
|
|
_hover: {
|
|
textDecoration: "underline",
|
|
},
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
};
|
|
var Link = {
|
|
baseStyle: baseStyle$k,
|
|
};
|
|
|
|
var baseStyleIcon$2 = {
|
|
marginEnd: "0.5rem",
|
|
display: "inline",
|
|
verticalAlign: "text-bottom",
|
|
};
|
|
var baseStyle$j = {
|
|
container: {},
|
|
item: {},
|
|
icon: baseStyleIcon$2,
|
|
};
|
|
var List = {
|
|
parts: listAnatomy.keys,
|
|
baseStyle: baseStyle$j,
|
|
};
|
|
|
|
var baseStyleList = function baseStyleList(props) {
|
|
return {
|
|
bg: mode("#fff", "gray.700")(props),
|
|
boxShadow: mode("sm", "dark-lg")(props),
|
|
color: "inherit",
|
|
minW: "3xs",
|
|
py: "2",
|
|
zIndex: 1,
|
|
borderRadius: "md",
|
|
borderWidth: "1px",
|
|
};
|
|
};
|
|
|
|
var baseStyleItem = function baseStyleItem(props) {
|
|
return {
|
|
py: "0.4rem",
|
|
px: "0.8rem",
|
|
transitionProperty: "background",
|
|
transitionDuration: "ultra-fast",
|
|
transitionTimingFunction: "ease-in",
|
|
_focus: {
|
|
bg: mode("gray.100", "whiteAlpha.100")(props),
|
|
},
|
|
_active: {
|
|
bg: mode("gray.200", "whiteAlpha.200")(props),
|
|
},
|
|
_expanded: {
|
|
bg: mode("gray.100", "whiteAlpha.100")(props),
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
},
|
|
};
|
|
};
|
|
|
|
var baseStyleGroupTitle = {
|
|
mx: 4,
|
|
my: 2,
|
|
fontWeight: "semibold",
|
|
fontSize: "sm",
|
|
};
|
|
var baseStyleCommand = {
|
|
opacity: 0.6,
|
|
};
|
|
var baseStyleDivider = {
|
|
border: 0,
|
|
borderBottom: "1px solid",
|
|
borderColor: "inherit",
|
|
my: "0.5rem",
|
|
opacity: 0.6,
|
|
};
|
|
var baseStyleButton = {
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
};
|
|
|
|
var baseStyle$i = function baseStyle(props) {
|
|
return {
|
|
button: baseStyleButton,
|
|
list: baseStyleList(props),
|
|
item: baseStyleItem(props),
|
|
groupTitle: baseStyleGroupTitle,
|
|
command: baseStyleCommand,
|
|
divider: baseStyleDivider,
|
|
};
|
|
};
|
|
|
|
var Menu = {
|
|
parts: menuAnatomy.keys,
|
|
baseStyle: baseStyle$i,
|
|
};
|
|
|
|
var baseStyleOverlay = {
|
|
bg: "blackAlpha.600",
|
|
zIndex: "modal",
|
|
};
|
|
|
|
var baseStyleDialogContainer = function baseStyleDialogContainer(
|
|
props
|
|
) {
|
|
var isCentered = props.isCentered,
|
|
scrollBehavior = props.scrollBehavior;
|
|
return {
|
|
display: "flex",
|
|
zIndex: "modal",
|
|
justifyContent: "center",
|
|
alignItems: isCentered ? "center" : "flex-start",
|
|
overflow: scrollBehavior === "inside" ? "hidden" : "auto",
|
|
};
|
|
};
|
|
|
|
var baseStyleDialog = function baseStyleDialog(props) {
|
|
var scrollBehavior = props.scrollBehavior;
|
|
return {
|
|
borderRadius: "md",
|
|
bg: mode("white", "gray.700")(props),
|
|
color: "inherit",
|
|
my: "3.75rem",
|
|
zIndex: "modal",
|
|
maxH:
|
|
scrollBehavior === "inside"
|
|
? "calc(100% - 7.5rem)"
|
|
: undefined,
|
|
boxShadow: mode("lg", "dark-lg")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyleHeader$1 = {
|
|
px: 6,
|
|
py: 4,
|
|
fontSize: "xl",
|
|
fontWeight: "semibold",
|
|
};
|
|
var baseStyleCloseButton$2 = {
|
|
position: "absolute",
|
|
top: 2,
|
|
insetEnd: 3,
|
|
};
|
|
|
|
var baseStyleBody$1 = function baseStyleBody(props) {
|
|
var scrollBehavior = props.scrollBehavior;
|
|
return {
|
|
px: 6,
|
|
py: 2,
|
|
flex: 1,
|
|
overflow: scrollBehavior === "inside" ? "auto" : undefined,
|
|
};
|
|
};
|
|
|
|
var baseStyleFooter$1 = {
|
|
px: 6,
|
|
py: 4,
|
|
};
|
|
|
|
var baseStyle$h = function baseStyle(props) {
|
|
return {
|
|
overlay: baseStyleOverlay,
|
|
dialogContainer: baseStyleDialogContainer(props),
|
|
dialog: baseStyleDialog(props),
|
|
header: baseStyleHeader$1,
|
|
closeButton: baseStyleCloseButton$2,
|
|
body: baseStyleBody$1(props),
|
|
footer: baseStyleFooter$1,
|
|
};
|
|
};
|
|
/**
|
|
* Since the `maxWidth` prop references theme.sizes internally,
|
|
* we can leverage that to size our modals.
|
|
*/
|
|
|
|
function getSize$1(value) {
|
|
if (value === "full") {
|
|
return {
|
|
dialog: {
|
|
maxW: "100vw",
|
|
minH: "100vh",
|
|
"@supports(min-height: -webkit-fill-available)": {
|
|
minH: "-webkit-fill-available",
|
|
},
|
|
my: 0,
|
|
},
|
|
};
|
|
}
|
|
|
|
return {
|
|
dialog: {
|
|
maxW: value,
|
|
},
|
|
};
|
|
}
|
|
|
|
var sizes$d = {
|
|
xs: getSize$1("xs"),
|
|
sm: getSize$1("sm"),
|
|
md: getSize$1("md"),
|
|
lg: getSize$1("lg"),
|
|
xl: getSize$1("xl"),
|
|
"2xl": getSize$1("2xl"),
|
|
"3xl": getSize$1("3xl"),
|
|
"4xl": getSize$1("4xl"),
|
|
"5xl": getSize$1("5xl"),
|
|
"6xl": getSize$1("6xl"),
|
|
full: getSize$1("full"),
|
|
};
|
|
var defaultProps$c = {
|
|
size: "md",
|
|
};
|
|
var Modal = {
|
|
parts: modalAnatomy.keys,
|
|
baseStyle: baseStyle$h,
|
|
sizes: sizes$d,
|
|
defaultProps: defaultProps$c,
|
|
};
|
|
|
|
var _baseStyleRoot, _Input$baseStyle$fiel, _Input$baseStyle;
|
|
var variants$5 = Input.variants,
|
|
defaultProps$b = Input.defaultProps;
|
|
var $stepperWidth = cssVar("number-input-stepper-width");
|
|
var $inputPadding = cssVar("number-input-input-padding");
|
|
var inputPaddingValue = calc($stepperWidth)
|
|
.add("0.5rem")
|
|
.toString();
|
|
var baseStyleRoot$1 =
|
|
((_baseStyleRoot = {}),
|
|
(_baseStyleRoot[$stepperWidth.variable] = "24px"),
|
|
(_baseStyleRoot[$inputPadding.variable] = inputPaddingValue),
|
|
_baseStyleRoot);
|
|
var baseStyleField$1 =
|
|
(_Input$baseStyle$fiel =
|
|
(_Input$baseStyle = Input.baseStyle) == null
|
|
? void 0
|
|
: _Input$baseStyle.field) != null
|
|
? _Input$baseStyle$fiel
|
|
: {};
|
|
var baseStyleStepperGroup = {
|
|
width: [$stepperWidth.reference],
|
|
};
|
|
|
|
var baseStyleStepper = function baseStyleStepper(props) {
|
|
return {
|
|
borderStart: "1px solid",
|
|
borderStartColor: mode("inherit", "whiteAlpha.300")(props),
|
|
color: mode("inherit", "whiteAlpha.800")(props),
|
|
_active: {
|
|
bg: mode("gray.200", "whiteAlpha.300")(props),
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
},
|
|
};
|
|
};
|
|
|
|
var baseStyle$g = function baseStyle(props) {
|
|
return {
|
|
root: baseStyleRoot$1,
|
|
field: baseStyleField$1,
|
|
stepperGroup: baseStyleStepperGroup,
|
|
stepper: baseStyleStepper(props),
|
|
};
|
|
};
|
|
|
|
function getSize(size) {
|
|
var _sizeStyle$field$font, _sizeStyle$field;
|
|
|
|
var sizeStyle = Input.sizes[size];
|
|
var radius = {
|
|
lg: "md",
|
|
md: "md",
|
|
sm: "sm",
|
|
xs: "sm",
|
|
};
|
|
|
|
var _fontSize =
|
|
(_sizeStyle$field$font =
|
|
(_sizeStyle$field = sizeStyle.field) == null
|
|
? void 0
|
|
: _sizeStyle$field.fontSize) != null
|
|
? _sizeStyle$field$font
|
|
: "md";
|
|
|
|
var fontSize = typography.fontSizes[_fontSize];
|
|
return {
|
|
field: sizes_501602a9_esm_extends({}, sizeStyle.field, {
|
|
paddingInlineEnd: $inputPadding.reference,
|
|
verticalAlign: "top",
|
|
}),
|
|
stepper: {
|
|
fontSize: calc(fontSize).multiply(0.75).toString(),
|
|
_first: {
|
|
borderTopEndRadius: radius[size],
|
|
},
|
|
_last: {
|
|
borderBottomEndRadius: radius[size],
|
|
mt: "-1px",
|
|
borderTopWidth: 1,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
var sizes$c = {
|
|
xs: getSize("xs"),
|
|
sm: getSize("sm"),
|
|
md: getSize("md"),
|
|
lg: getSize("lg"),
|
|
};
|
|
var NumberInput = {
|
|
parts: numberInputAnatomy.keys,
|
|
baseStyle: baseStyle$g,
|
|
sizes: sizes$c,
|
|
variants: variants$5,
|
|
defaultProps: defaultProps$b,
|
|
};
|
|
|
|
var _Input$variants$unsty$1;
|
|
|
|
var baseStyle$f = sizes_501602a9_esm_extends(
|
|
{},
|
|
Input.baseStyle.field,
|
|
{
|
|
textAlign: "center",
|
|
}
|
|
);
|
|
|
|
var sizes$b = {
|
|
lg: {
|
|
fontSize: "lg",
|
|
w: 12,
|
|
h: 12,
|
|
borderRadius: "md",
|
|
},
|
|
md: {
|
|
fontSize: "md",
|
|
w: 10,
|
|
h: 10,
|
|
borderRadius: "md",
|
|
},
|
|
sm: {
|
|
fontSize: "sm",
|
|
w: 8,
|
|
h: 8,
|
|
borderRadius: "sm",
|
|
},
|
|
xs: {
|
|
fontSize: "xs",
|
|
w: 6,
|
|
h: 6,
|
|
borderRadius: "sm",
|
|
},
|
|
};
|
|
var variants$4 = {
|
|
outline: function outline(props) {
|
|
var _Input$variants$outli;
|
|
|
|
return (_Input$variants$outli =
|
|
Input.variants.outline(props).field) != null
|
|
? _Input$variants$outli
|
|
: {};
|
|
},
|
|
flushed: function flushed(props) {
|
|
var _Input$variants$flush;
|
|
|
|
return (_Input$variants$flush =
|
|
Input.variants.flushed(props).field) != null
|
|
? _Input$variants$flush
|
|
: {};
|
|
},
|
|
filled: function filled(props) {
|
|
var _Input$variants$fille;
|
|
|
|
return (_Input$variants$fille =
|
|
Input.variants.filled(props).field) != null
|
|
? _Input$variants$fille
|
|
: {};
|
|
},
|
|
unstyled:
|
|
(_Input$variants$unsty$1 = Input.variants.unstyled.field) !=
|
|
null
|
|
? _Input$variants$unsty$1
|
|
: {},
|
|
};
|
|
var defaultProps$a = Input.defaultProps;
|
|
var PinInput = {
|
|
baseStyle: baseStyle$f,
|
|
sizes: sizes$b,
|
|
variants: variants$4,
|
|
defaultProps: defaultProps$a,
|
|
};
|
|
|
|
var $popperBg = cssVar("popper-bg");
|
|
var $arrowBg$1 = cssVar("popper-arrow-bg");
|
|
var $arrowShadowColor = cssVar("popper-arrow-shadow-color");
|
|
var baseStylePopper = {
|
|
zIndex: 10,
|
|
};
|
|
|
|
var baseStyleContent = function baseStyleContent(props) {
|
|
var _ref;
|
|
|
|
var bg = mode("white", "gray.700")(props);
|
|
var shadowColor = mode("gray.200", "whiteAlpha.300")(props);
|
|
return (
|
|
(_ref = {}),
|
|
(_ref[$popperBg.variable] = "colors." + bg),
|
|
(_ref.bg = $popperBg.reference),
|
|
(_ref[$arrowBg$1.variable] = $popperBg.reference),
|
|
(_ref[$arrowShadowColor.variable] =
|
|
"colors." + shadowColor),
|
|
(_ref.width = "xs"),
|
|
(_ref.border = "1px solid"),
|
|
(_ref.borderColor = "inherit"),
|
|
(_ref.borderRadius = "md"),
|
|
(_ref.boxShadow = "sm"),
|
|
(_ref.zIndex = "inherit"),
|
|
(_ref._focusVisible = {
|
|
outline: 0,
|
|
boxShadow: "outline",
|
|
}),
|
|
_ref
|
|
);
|
|
};
|
|
|
|
var baseStyleHeader = {
|
|
px: 3,
|
|
py: 2,
|
|
borderBottomWidth: "1px",
|
|
};
|
|
var baseStyleBody = {
|
|
px: 3,
|
|
py: 2,
|
|
};
|
|
var baseStyleFooter = {
|
|
px: 3,
|
|
py: 2,
|
|
borderTopWidth: "1px",
|
|
};
|
|
var baseStyleCloseButton$1 = {
|
|
position: "absolute",
|
|
borderRadius: "md",
|
|
top: 1,
|
|
insetEnd: 2,
|
|
padding: 2,
|
|
};
|
|
|
|
var baseStyle$e = function baseStyle(props) {
|
|
return {
|
|
popper: baseStylePopper,
|
|
content: baseStyleContent(props),
|
|
header: baseStyleHeader,
|
|
body: baseStyleBody,
|
|
footer: baseStyleFooter,
|
|
arrow: {},
|
|
closeButton: baseStyleCloseButton$1,
|
|
};
|
|
};
|
|
|
|
var Popover = {
|
|
parts: popoverAnatomy.keys,
|
|
baseStyle: baseStyle$e,
|
|
};
|
|
|
|
function filledStyle(props) {
|
|
var c = props.colorScheme,
|
|
t = props.theme,
|
|
isIndeterminate = props.isIndeterminate,
|
|
hasStripe = props.hasStripe;
|
|
var stripeStyle = mode(
|
|
generateStripe(),
|
|
generateStripe("1rem", "rgba(0,0,0,0.1)")
|
|
)(props);
|
|
var bgColor = mode(c + ".500", c + ".200")(props);
|
|
var gradient =
|
|
"linear-gradient(\n to right,\n transparent 0%,\n " +
|
|
getColor(t, bgColor) +
|
|
" 50%,\n transparent 100%\n )";
|
|
var addStripe = !isIndeterminate && hasStripe;
|
|
return sizes_501602a9_esm_extends(
|
|
{},
|
|
addStripe && stripeStyle,
|
|
isIndeterminate
|
|
? {
|
|
bgImage: gradient,
|
|
}
|
|
: {
|
|
bgColor: bgColor,
|
|
}
|
|
);
|
|
}
|
|
|
|
var baseStyleLabel$2 = {
|
|
lineHeight: "1",
|
|
fontSize: "0.25em",
|
|
fontWeight: "bold",
|
|
color: "white",
|
|
};
|
|
|
|
var baseStyleTrack$2 = function baseStyleTrack(props) {
|
|
return {
|
|
bg: mode("gray.100", "whiteAlpha.300")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
|
|
return sizes_501602a9_esm_extends(
|
|
{
|
|
transitionProperty: "common",
|
|
transitionDuration: "slow",
|
|
},
|
|
filledStyle(props)
|
|
);
|
|
};
|
|
|
|
var baseStyle$d = function baseStyle(props) {
|
|
return {
|
|
label: baseStyleLabel$2,
|
|
filledTrack: baseStyleFilledTrack$1(props),
|
|
track: baseStyleTrack$2(props),
|
|
};
|
|
};
|
|
|
|
var sizes$a = {
|
|
xs: {
|
|
track: {
|
|
h: "0.25rem",
|
|
},
|
|
},
|
|
sm: {
|
|
track: {
|
|
h: "0.5rem",
|
|
},
|
|
},
|
|
md: {
|
|
track: {
|
|
h: "0.75rem",
|
|
},
|
|
},
|
|
lg: {
|
|
track: {
|
|
h: "1rem",
|
|
},
|
|
},
|
|
};
|
|
var defaultProps$9 = {
|
|
size: "md",
|
|
colorScheme: "blue",
|
|
};
|
|
var Progress = {
|
|
parts: progressAnatomy.keys,
|
|
sizes: sizes$a,
|
|
baseStyle: baseStyle$d,
|
|
defaultProps: defaultProps$9,
|
|
};
|
|
|
|
var baseStyleControl = function baseStyleControl(props) {
|
|
var _Checkbox$baseStyle = Checkbox.baseStyle(props),
|
|
_Checkbox$baseStyle$c = _Checkbox$baseStyle.control,
|
|
control =
|
|
_Checkbox$baseStyle$c === void 0
|
|
? {}
|
|
: _Checkbox$baseStyle$c;
|
|
|
|
return sizes_501602a9_esm_extends({}, control, {
|
|
borderRadius: "full",
|
|
_checked: sizes_501602a9_esm_extends(
|
|
{},
|
|
control["_checked"],
|
|
{
|
|
_before: {
|
|
content: '""',
|
|
display: "inline-block",
|
|
pos: "relative",
|
|
w: "50%",
|
|
h: "50%",
|
|
borderRadius: "50%",
|
|
bg: "currentColor",
|
|
},
|
|
}
|
|
),
|
|
});
|
|
};
|
|
|
|
var baseStyle$c = function baseStyle(props) {
|
|
return {
|
|
label: Checkbox.baseStyle(props).label,
|
|
container: Checkbox.baseStyle(props).container,
|
|
control: baseStyleControl(props),
|
|
};
|
|
};
|
|
|
|
var sizes$9 = {
|
|
md: {
|
|
control: {
|
|
w: 4,
|
|
h: 4,
|
|
},
|
|
label: {
|
|
fontSize: "md",
|
|
},
|
|
},
|
|
lg: {
|
|
control: {
|
|
w: 5,
|
|
h: 5,
|
|
},
|
|
label: {
|
|
fontSize: "lg",
|
|
},
|
|
},
|
|
sm: {
|
|
control: {
|
|
width: 3,
|
|
height: 3,
|
|
},
|
|
label: {
|
|
fontSize: "sm",
|
|
},
|
|
},
|
|
};
|
|
var defaultProps$8 = {
|
|
size: "md",
|
|
colorScheme: "blue",
|
|
};
|
|
var Radio = {
|
|
parts: radioAnatomy.keys,
|
|
baseStyle: baseStyle$c,
|
|
sizes: sizes$9,
|
|
defaultProps: defaultProps$8,
|
|
};
|
|
|
|
var baseStyleField = function baseStyleField(props) {
|
|
return sizes_501602a9_esm_extends({}, Input.baseStyle.field, {
|
|
bg: mode("white", "gray.700")(props),
|
|
appearance: "none",
|
|
paddingBottom: "1px",
|
|
lineHeight: "normal",
|
|
"> option, > optgroup": {
|
|
bg: mode("white", "gray.700")(props),
|
|
},
|
|
});
|
|
};
|
|
|
|
var baseStyleIcon$1 = {
|
|
width: "1.5rem",
|
|
height: "100%",
|
|
insetEnd: "0.5rem",
|
|
position: "relative",
|
|
color: "currentColor",
|
|
fontSize: "1.25rem",
|
|
_disabled: {
|
|
opacity: 0.5,
|
|
},
|
|
};
|
|
|
|
var baseStyle$b = function baseStyle(props) {
|
|
return {
|
|
field: baseStyleField(props),
|
|
icon: baseStyleIcon$1,
|
|
};
|
|
};
|
|
|
|
var iconSpacing = {
|
|
paddingInlineEnd: "2rem",
|
|
};
|
|
var sizes$8 = lodash_mergewith_default()({}, Input.sizes, {
|
|
lg: {
|
|
field: iconSpacing,
|
|
},
|
|
md: {
|
|
field: iconSpacing,
|
|
},
|
|
sm: {
|
|
field: iconSpacing,
|
|
},
|
|
xs: {
|
|
field: iconSpacing,
|
|
icon: {
|
|
insetEnd: "0.25rem",
|
|
},
|
|
},
|
|
});
|
|
var Select = {
|
|
parts: selectAnatomy.keys,
|
|
baseStyle: baseStyle$b,
|
|
sizes: sizes$8,
|
|
variants: Input.variants,
|
|
defaultProps: Input.defaultProps,
|
|
};
|
|
|
|
var fade = function fade(startColor, endColor) {
|
|
return (0, emotion_react_browser_esm /* keyframes */.F4)({
|
|
from: {
|
|
borderColor: startColor,
|
|
background: startColor,
|
|
},
|
|
to: {
|
|
borderColor: endColor,
|
|
background: endColor,
|
|
},
|
|
});
|
|
};
|
|
|
|
var baseStyle$a = function baseStyle(props) {
|
|
var defaultStartColor = mode("gray.100", "gray.800")(props);
|
|
var defaultEndColor = mode("gray.400", "gray.600")(props);
|
|
var _props$startColor = props.startColor,
|
|
startColor =
|
|
_props$startColor === void 0
|
|
? defaultStartColor
|
|
: _props$startColor,
|
|
_props$endColor = props.endColor,
|
|
endColor =
|
|
_props$endColor === void 0
|
|
? defaultEndColor
|
|
: _props$endColor,
|
|
speed = props.speed,
|
|
theme = props.theme;
|
|
var start = getColor(theme, startColor);
|
|
var end = getColor(theme, endColor);
|
|
return {
|
|
opacity: 0.7,
|
|
borderRadius: "2px",
|
|
borderColor: start,
|
|
background: end,
|
|
animation:
|
|
speed +
|
|
"s linear infinite alternate " +
|
|
fade(start, end),
|
|
};
|
|
};
|
|
|
|
var Skeleton = {
|
|
baseStyle: baseStyle$a,
|
|
};
|
|
|
|
var baseStyle$9 = function baseStyle(props) {
|
|
return {
|
|
borderRadius: "md",
|
|
fontWeight: "semibold",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
padding: "1rem",
|
|
position: "fixed",
|
|
top: "1.5rem",
|
|
insetStart: "1.5rem",
|
|
bg: mode("white", "gray.700")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var SkipLink = {
|
|
baseStyle: baseStyle$9,
|
|
};
|
|
|
|
function thumbOrientation(props) {
|
|
return orient({
|
|
orientation: props.orientation,
|
|
vertical: {
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
_active: {
|
|
transform: "translateX(-50%) scale(1.15)",
|
|
},
|
|
},
|
|
horizontal: {
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
_active: {
|
|
transform: "translateY(-50%) scale(1.15)",
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
var baseStyleContainer$1 = function baseStyleContainer(props) {
|
|
var orientation = props.orientation;
|
|
return sizes_501602a9_esm_extends(
|
|
{
|
|
display: "inline-block",
|
|
position: "relative",
|
|
cursor: "pointer",
|
|
_disabled: {
|
|
opacity: 0.6,
|
|
cursor: "default",
|
|
pointerEvents: "none",
|
|
},
|
|
},
|
|
orient({
|
|
orientation: orientation,
|
|
vertical: {
|
|
h: "100%",
|
|
},
|
|
horizontal: {
|
|
w: "100%",
|
|
},
|
|
})
|
|
);
|
|
};
|
|
|
|
var baseStyleTrack$1 = function baseStyleTrack(props) {
|
|
return {
|
|
overflow: "hidden",
|
|
borderRadius: "sm",
|
|
bg: mode("gray.200", "whiteAlpha.200")(props),
|
|
_disabled: {
|
|
bg: mode("gray.300", "whiteAlpha.300")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var baseStyleThumb$1 = function baseStyleThumb(props) {
|
|
return sizes_501602a9_esm_extends(
|
|
{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
position: "absolute",
|
|
outline: 0,
|
|
zIndex: 1,
|
|
borderRadius: "full",
|
|
bg: "white",
|
|
boxShadow: "base",
|
|
border: "1px solid",
|
|
borderColor: "transparent",
|
|
transitionProperty: "transform",
|
|
transitionDuration: "normal",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_disabled: {
|
|
bg: "gray.300",
|
|
},
|
|
},
|
|
thumbOrientation(props)
|
|
);
|
|
};
|
|
|
|
var baseStyleFilledTrack = function baseStyleFilledTrack(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
width: "inherit",
|
|
height: "inherit",
|
|
bg: mode(c + ".500", c + ".200")(props),
|
|
};
|
|
};
|
|
|
|
var baseStyle$8 = function baseStyle(props) {
|
|
return {
|
|
container: baseStyleContainer$1(props),
|
|
track: baseStyleTrack$1(props),
|
|
thumb: baseStyleThumb$1(props),
|
|
filledTrack: baseStyleFilledTrack(props),
|
|
};
|
|
};
|
|
|
|
var sizeLg = function sizeLg(props) {
|
|
return {
|
|
thumb: {
|
|
w: "16px",
|
|
h: "16px",
|
|
},
|
|
track: orient({
|
|
orientation: props.orientation,
|
|
horizontal: {
|
|
h: "4px",
|
|
},
|
|
vertical: {
|
|
w: "4px",
|
|
},
|
|
}),
|
|
};
|
|
};
|
|
|
|
var sizeMd = function sizeMd(props) {
|
|
return {
|
|
thumb: {
|
|
w: "14px",
|
|
h: "14px",
|
|
},
|
|
track: orient({
|
|
orientation: props.orientation,
|
|
horizontal: {
|
|
h: "4px",
|
|
},
|
|
vertical: {
|
|
w: "4px",
|
|
},
|
|
}),
|
|
};
|
|
};
|
|
|
|
var sizeSm = function sizeSm(props) {
|
|
return {
|
|
thumb: {
|
|
w: "10px",
|
|
h: "10px",
|
|
},
|
|
track: orient({
|
|
orientation: props.orientation,
|
|
horizontal: {
|
|
h: "2px",
|
|
},
|
|
vertical: {
|
|
w: "2px",
|
|
},
|
|
}),
|
|
};
|
|
};
|
|
|
|
var sizes$7 = {
|
|
lg: sizeLg,
|
|
md: sizeMd,
|
|
sm: sizeSm,
|
|
};
|
|
var defaultProps$7 = {
|
|
size: "md",
|
|
colorScheme: "blue",
|
|
};
|
|
var Slider = {
|
|
parts: sliderAnatomy.keys,
|
|
sizes: sizes$7,
|
|
baseStyle: baseStyle$8,
|
|
defaultProps: defaultProps$7,
|
|
};
|
|
|
|
var _xs, _sm, _md, _lg, _xl;
|
|
var $size = cssVar("spinner-size");
|
|
var baseStyle$7 = {
|
|
width: [$size.reference],
|
|
height: [$size.reference],
|
|
};
|
|
var sizes$6 = {
|
|
xs: ((_xs = {}), (_xs[$size.variable] = "0.75rem"), _xs),
|
|
sm: ((_sm = {}), (_sm[$size.variable] = "1rem"), _sm),
|
|
md: ((_md = {}), (_md[$size.variable] = "1.5rem"), _md),
|
|
lg: ((_lg = {}), (_lg[$size.variable] = "2rem"), _lg),
|
|
xl: ((_xl = {}), (_xl[$size.variable] = "3rem"), _xl),
|
|
};
|
|
var defaultProps$6 = {
|
|
size: "md",
|
|
};
|
|
var Spinner = {
|
|
baseStyle: baseStyle$7,
|
|
sizes: sizes$6,
|
|
defaultProps: defaultProps$6,
|
|
};
|
|
|
|
var baseStyleLabel$1 = {
|
|
fontWeight: "medium",
|
|
};
|
|
var baseStyleHelpText = {
|
|
opacity: 0.8,
|
|
marginBottom: 2,
|
|
};
|
|
var baseStyleNumber = {
|
|
verticalAlign: "baseline",
|
|
fontWeight: "semibold",
|
|
};
|
|
var baseStyleIcon = {
|
|
marginEnd: 1,
|
|
w: "14px",
|
|
h: "14px",
|
|
verticalAlign: "middle",
|
|
};
|
|
var baseStyle$6 = {
|
|
container: {},
|
|
label: baseStyleLabel$1,
|
|
helpText: baseStyleHelpText,
|
|
number: baseStyleNumber,
|
|
icon: baseStyleIcon,
|
|
};
|
|
var sizes$5 = {
|
|
md: {
|
|
label: {
|
|
fontSize: "sm",
|
|
},
|
|
helpText: {
|
|
fontSize: "sm",
|
|
},
|
|
number: {
|
|
fontSize: "2xl",
|
|
},
|
|
},
|
|
};
|
|
var defaultProps$5 = {
|
|
size: "md",
|
|
};
|
|
var Stat = {
|
|
parts: statAnatomy.keys,
|
|
baseStyle: baseStyle$6,
|
|
sizes: sizes$5,
|
|
defaultProps: defaultProps$5,
|
|
};
|
|
|
|
var _container2, _container3, _container4;
|
|
var $width = cssVar("switch-track-width");
|
|
var $height = cssVar("switch-track-height");
|
|
var $diff = cssVar("switch-track-diff");
|
|
var diffValue = calc.subtract($width, $height);
|
|
var $translateX = cssVar("switch-thumb-x");
|
|
|
|
var baseStyleTrack = function baseStyleTrack(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
borderRadius: "full",
|
|
p: "2px",
|
|
width: [$width.reference],
|
|
height: [$height.reference],
|
|
transitionProperty: "common",
|
|
transitionDuration: "fast",
|
|
bg: mode("gray.300", "whiteAlpha.400")(props),
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
cursor: "not-allowed",
|
|
},
|
|
_checked: {
|
|
bg: mode(c + ".500", c + ".200")(props),
|
|
},
|
|
};
|
|
};
|
|
|
|
var baseStyleThumb = {
|
|
bg: "white",
|
|
transitionProperty: "transform",
|
|
transitionDuration: "normal",
|
|
borderRadius: "inherit",
|
|
width: [$height.reference],
|
|
height: [$height.reference],
|
|
_checked: {
|
|
transform: "translateX(" + $translateX.reference + ")",
|
|
},
|
|
};
|
|
|
|
var baseStyle$5 = function baseStyle(props) {
|
|
var _rtl, _container;
|
|
|
|
return {
|
|
container:
|
|
((_container = {}),
|
|
(_container[$diff.variable] = diffValue),
|
|
(_container[$translateX.variable] = $diff.reference),
|
|
(_container._rtl =
|
|
((_rtl = {}),
|
|
(_rtl[$translateX.variable] = calc($diff)
|
|
.negate()
|
|
.toString()),
|
|
_rtl)),
|
|
_container),
|
|
track: baseStyleTrack(props),
|
|
thumb: baseStyleThumb,
|
|
};
|
|
};
|
|
|
|
var sizes$4 = {
|
|
sm: {
|
|
container:
|
|
((_container2 = {}),
|
|
(_container2[$width.variable] = "1.375rem"),
|
|
(_container2[$height.variable] = "0.75rem"),
|
|
_container2),
|
|
},
|
|
md: {
|
|
container:
|
|
((_container3 = {}),
|
|
(_container3[$width.variable] = "1.875rem"),
|
|
(_container3[$height.variable] = "1rem"),
|
|
_container3),
|
|
},
|
|
lg: {
|
|
container:
|
|
((_container4 = {}),
|
|
(_container4[$width.variable] = "2.875rem"),
|
|
(_container4[$height.variable] = "1.5rem"),
|
|
_container4),
|
|
},
|
|
};
|
|
var defaultProps$4 = {
|
|
size: "md",
|
|
colorScheme: "blue",
|
|
};
|
|
var Switch = {
|
|
parts: switchAnatomy.keys,
|
|
baseStyle: baseStyle$5,
|
|
sizes: sizes$4,
|
|
defaultProps: defaultProps$4,
|
|
};
|
|
|
|
var baseStyle$4 = {
|
|
table: {
|
|
fontVariantNumeric: "lining-nums tabular-nums",
|
|
borderCollapse: "collapse",
|
|
width: "full",
|
|
},
|
|
th: {
|
|
fontFamily: "heading",
|
|
fontWeight: "bold",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "wider",
|
|
textAlign: "start",
|
|
},
|
|
td: {
|
|
textAlign: "start",
|
|
},
|
|
caption: {
|
|
mt: 4,
|
|
fontFamily: "heading",
|
|
textAlign: "center",
|
|
fontWeight: "medium",
|
|
},
|
|
};
|
|
var numericStyles = {
|
|
"&[data-is-numeric=true]": {
|
|
textAlign: "end",
|
|
},
|
|
};
|
|
|
|
var variantSimple = function variantSimple(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
th: sizes_501602a9_esm_extends(
|
|
{
|
|
color: mode("gray.600", "gray.400")(props),
|
|
borderBottom: "1px",
|
|
borderColor: mode(c + ".100", c + ".700")(props),
|
|
},
|
|
numericStyles
|
|
),
|
|
td: sizes_501602a9_esm_extends(
|
|
{
|
|
borderBottom: "1px",
|
|
borderColor: mode(c + ".100", c + ".700")(props),
|
|
},
|
|
numericStyles
|
|
),
|
|
caption: {
|
|
color: mode("gray.600", "gray.100")(props),
|
|
},
|
|
tfoot: {
|
|
tr: {
|
|
"&:last-of-type": {
|
|
th: {
|
|
borderBottomWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantStripe = function variantStripe(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
th: sizes_501602a9_esm_extends(
|
|
{
|
|
color: mode("gray.600", "gray.400")(props),
|
|
borderBottom: "1px",
|
|
borderColor: mode(c + ".100", c + ".700")(props),
|
|
},
|
|
numericStyles
|
|
),
|
|
td: sizes_501602a9_esm_extends(
|
|
{
|
|
borderBottom: "1px",
|
|
borderColor: mode(c + ".100", c + ".700")(props),
|
|
},
|
|
numericStyles
|
|
),
|
|
caption: {
|
|
color: mode("gray.600", "gray.100")(props),
|
|
},
|
|
tbody: {
|
|
tr: {
|
|
"&:nth-of-type(odd)": {
|
|
"th, td": {
|
|
borderBottomWidth: "1px",
|
|
borderColor: mode(
|
|
c + ".100",
|
|
c + ".700"
|
|
)(props),
|
|
},
|
|
td: {
|
|
background: mode(
|
|
c + ".100",
|
|
c + ".700"
|
|
)(props),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
tfoot: {
|
|
tr: {
|
|
"&:last-of-type": {
|
|
th: {
|
|
borderBottomWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
var variants$3 = {
|
|
simple: variantSimple,
|
|
striped: variantStripe,
|
|
unstyled: {},
|
|
};
|
|
var sizes$3 = {
|
|
sm: {
|
|
th: {
|
|
px: "4",
|
|
py: "1",
|
|
lineHeight: "4",
|
|
fontSize: "xs",
|
|
},
|
|
td: {
|
|
px: "4",
|
|
py: "2",
|
|
fontSize: "sm",
|
|
lineHeight: "4",
|
|
},
|
|
caption: {
|
|
px: "4",
|
|
py: "2",
|
|
fontSize: "xs",
|
|
},
|
|
},
|
|
md: {
|
|
th: {
|
|
px: "6",
|
|
py: "3",
|
|
lineHeight: "4",
|
|
fontSize: "xs",
|
|
},
|
|
td: {
|
|
px: "6",
|
|
py: "4",
|
|
lineHeight: "5",
|
|
},
|
|
caption: {
|
|
px: "6",
|
|
py: "2",
|
|
fontSize: "sm",
|
|
},
|
|
},
|
|
lg: {
|
|
th: {
|
|
px: "8",
|
|
py: "4",
|
|
lineHeight: "5",
|
|
fontSize: "sm",
|
|
},
|
|
td: {
|
|
px: "8",
|
|
py: "5",
|
|
lineHeight: "6",
|
|
},
|
|
caption: {
|
|
px: "6",
|
|
py: "2",
|
|
fontSize: "md",
|
|
},
|
|
},
|
|
};
|
|
var defaultProps$3 = {
|
|
variant: "simple",
|
|
size: "md",
|
|
colorScheme: "gray",
|
|
};
|
|
var Table = {
|
|
parts: tableAnatomy.keys,
|
|
baseStyle: baseStyle$4,
|
|
variants: variants$3,
|
|
sizes: sizes$3,
|
|
defaultProps: defaultProps$3,
|
|
};
|
|
|
|
var baseStyleRoot = function baseStyleRoot(props) {
|
|
var orientation = props.orientation;
|
|
return {
|
|
display: orientation === "vertical" ? "flex" : "block",
|
|
};
|
|
};
|
|
|
|
var baseStyleTab = function baseStyleTab(props) {
|
|
var isFitted = props.isFitted;
|
|
return {
|
|
flex: isFitted ? 1 : undefined,
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
_focusVisible: {
|
|
zIndex: 1,
|
|
boxShadow: "outline",
|
|
},
|
|
_disabled: {
|
|
cursor: "not-allowed",
|
|
opacity: 0.4,
|
|
},
|
|
};
|
|
};
|
|
|
|
var baseStyleTablist = function baseStyleTablist(props) {
|
|
var _props$align = props.align,
|
|
align = _props$align === void 0 ? "start" : _props$align,
|
|
orientation = props.orientation;
|
|
var alignments = {
|
|
end: "flex-end",
|
|
center: "center",
|
|
start: "flex-start",
|
|
};
|
|
return {
|
|
justifyContent: alignments[align],
|
|
flexDirection:
|
|
orientation === "vertical" ? "column" : "row",
|
|
};
|
|
};
|
|
|
|
var baseStyleTabpanel = {
|
|
p: 4,
|
|
};
|
|
|
|
var baseStyle$3 = function baseStyle(props) {
|
|
return {
|
|
root: baseStyleRoot(props),
|
|
tab: baseStyleTab(props),
|
|
tablist: baseStyleTablist(props),
|
|
tabpanel: baseStyleTabpanel,
|
|
};
|
|
};
|
|
|
|
var sizes$2 = {
|
|
sm: {
|
|
tab: {
|
|
py: 1,
|
|
px: 4,
|
|
fontSize: "sm",
|
|
},
|
|
},
|
|
md: {
|
|
tab: {
|
|
fontSize: "md",
|
|
py: 2,
|
|
px: 4,
|
|
},
|
|
},
|
|
lg: {
|
|
tab: {
|
|
fontSize: "lg",
|
|
py: 3,
|
|
px: 4,
|
|
},
|
|
},
|
|
};
|
|
|
|
var variantLine = function variantLine(props) {
|
|
var _tablist, _tab;
|
|
|
|
var c = props.colorScheme,
|
|
orientation = props.orientation;
|
|
var isVertical = orientation === "vertical";
|
|
var borderProp =
|
|
orientation === "vertical" ? "borderStart" : "borderBottom";
|
|
var marginProp = isVertical ? "marginStart" : "marginBottom";
|
|
return {
|
|
tablist:
|
|
((_tablist = {}),
|
|
(_tablist[borderProp] = "2px solid"),
|
|
(_tablist.borderColor = "inherit"),
|
|
_tablist),
|
|
tab:
|
|
((_tab = {}),
|
|
(_tab[borderProp] = "2px solid"),
|
|
(_tab.borderColor = "transparent"),
|
|
(_tab[marginProp] = "-2px"),
|
|
(_tab._selected = {
|
|
color: mode(c + ".600", c + ".300")(props),
|
|
borderColor: "currentColor",
|
|
}),
|
|
(_tab._active = {
|
|
bg: mode("gray.200", "whiteAlpha.300")(props),
|
|
}),
|
|
(_tab._disabled = {
|
|
_active: {
|
|
bg: "none",
|
|
},
|
|
}),
|
|
_tab),
|
|
};
|
|
};
|
|
|
|
var variantEnclosed = function variantEnclosed(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
tab: {
|
|
borderTopRadius: "md",
|
|
border: "1px solid",
|
|
borderColor: "transparent",
|
|
mb: "-1px",
|
|
_selected: {
|
|
color: mode(c + ".600", c + ".300")(props),
|
|
borderColor: "inherit",
|
|
borderBottomColor: mode("white", "gray.800")(props),
|
|
},
|
|
},
|
|
tablist: {
|
|
mb: "-1px",
|
|
borderBottom: "1px solid",
|
|
borderColor: "inherit",
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantEnclosedColored = function variantEnclosedColored(
|
|
props
|
|
) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
tab: {
|
|
border: "1px solid",
|
|
borderColor: "inherit",
|
|
bg: mode("gray.50", "whiteAlpha.50")(props),
|
|
mb: "-1px",
|
|
_notLast: {
|
|
marginEnd: "-1px",
|
|
},
|
|
_selected: {
|
|
bg: mode("#fff", "gray.800")(props),
|
|
color: mode(c + ".600", c + ".300")(props),
|
|
borderColor: "inherit",
|
|
borderTopColor: "currentColor",
|
|
borderBottomColor: "transparent",
|
|
},
|
|
},
|
|
tablist: {
|
|
mb: "-1px",
|
|
borderBottom: "1px solid",
|
|
borderColor: "inherit",
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantSoftRounded = function variantSoftRounded(props) {
|
|
var c = props.colorScheme,
|
|
theme = props.theme;
|
|
return {
|
|
tab: {
|
|
borderRadius: "full",
|
|
fontWeight: "semibold",
|
|
color: "gray.600",
|
|
_selected: {
|
|
color: getColor(theme, c + ".700"),
|
|
bg: getColor(theme, c + ".100"),
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantSolidRounded = function variantSolidRounded(props) {
|
|
var c = props.colorScheme;
|
|
return {
|
|
tab: {
|
|
borderRadius: "full",
|
|
fontWeight: "semibold",
|
|
color: mode("gray.600", "inherit")(props),
|
|
_selected: {
|
|
color: mode("#fff", "gray.800")(props),
|
|
bg: mode(c + ".600", c + ".300")(props),
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
var variantUnstyled = {};
|
|
var variants$2 = {
|
|
line: variantLine,
|
|
enclosed: variantEnclosed,
|
|
"enclosed-colored": variantEnclosedColored,
|
|
"soft-rounded": variantSoftRounded,
|
|
"solid-rounded": variantSolidRounded,
|
|
unstyled: variantUnstyled,
|
|
};
|
|
var defaultProps$2 = {
|
|
size: "md",
|
|
variant: "line",
|
|
colorScheme: "blue",
|
|
};
|
|
var Tabs = {
|
|
parts: tabsAnatomy.keys,
|
|
baseStyle: baseStyle$3,
|
|
sizes: sizes$2,
|
|
variants: variants$2,
|
|
defaultProps: defaultProps$2,
|
|
};
|
|
|
|
var baseStyleContainer = {
|
|
fontWeight: "medium",
|
|
lineHeight: 1.2,
|
|
outline: 0,
|
|
borderRadius: "md",
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
},
|
|
};
|
|
var baseStyleLabel = {
|
|
lineHeight: 1.2,
|
|
overflow: "visible",
|
|
};
|
|
var baseStyleCloseButton = {
|
|
fontSize: "18px",
|
|
w: "1.25rem",
|
|
h: "1.25rem",
|
|
transitionProperty: "common",
|
|
transitionDuration: "normal",
|
|
borderRadius: "full",
|
|
marginStart: "0.375rem",
|
|
marginEnd: "-1",
|
|
opacity: 0.5,
|
|
_disabled: {
|
|
opacity: 0.4,
|
|
},
|
|
_focusVisible: {
|
|
boxShadow: "outline",
|
|
bg: "rgba(0, 0, 0, 0.14)",
|
|
},
|
|
_hover: {
|
|
opacity: 0.8,
|
|
},
|
|
_active: {
|
|
opacity: 1,
|
|
},
|
|
};
|
|
var baseStyle$2 = {
|
|
container: baseStyleContainer,
|
|
label: baseStyleLabel,
|
|
closeButton: baseStyleCloseButton,
|
|
};
|
|
var sizes$1 = {
|
|
sm: {
|
|
container: {
|
|
minH: "1.25rem",
|
|
minW: "1.25rem",
|
|
fontSize: "xs",
|
|
px: 2,
|
|
},
|
|
closeButton: {
|
|
marginEnd: "-2px",
|
|
marginStart: "0.35rem",
|
|
},
|
|
},
|
|
md: {
|
|
container: {
|
|
minH: "1.5rem",
|
|
minW: "1.5rem",
|
|
fontSize: "sm",
|
|
px: 2,
|
|
},
|
|
},
|
|
lg: {
|
|
container: {
|
|
minH: 8,
|
|
minW: 8,
|
|
fontSize: "md",
|
|
px: 3,
|
|
},
|
|
},
|
|
};
|
|
var variants$1 = {
|
|
subtle: function subtle(props) {
|
|
return {
|
|
container: Badge.variants.subtle(props),
|
|
};
|
|
},
|
|
solid: function solid(props) {
|
|
return {
|
|
container: Badge.variants.solid(props),
|
|
};
|
|
},
|
|
outline: function outline(props) {
|
|
return {
|
|
container: Badge.variants.outline(props),
|
|
};
|
|
},
|
|
};
|
|
var defaultProps$1 = {
|
|
size: "md",
|
|
variant: "subtle",
|
|
colorScheme: "gray",
|
|
};
|
|
var Tag = {
|
|
parts: tagAnatomy.keys,
|
|
variants: variants$1,
|
|
baseStyle: baseStyle$2,
|
|
sizes: sizes$1,
|
|
defaultProps: defaultProps$1,
|
|
};
|
|
|
|
var _Input$variants$unsty,
|
|
_Input$sizes$xs$field,
|
|
_Input$sizes$sm$field,
|
|
_Input$sizes$md$field,
|
|
_Input$sizes$lg$field;
|
|
|
|
var baseStyle$1 = sizes_501602a9_esm_extends(
|
|
{},
|
|
Input.baseStyle.field,
|
|
{
|
|
paddingY: "8px",
|
|
minHeight: "80px",
|
|
lineHeight: "short",
|
|
verticalAlign: "top",
|
|
}
|
|
);
|
|
|
|
var variants = {
|
|
outline: function outline(props) {
|
|
var _Input$variants$outli;
|
|
|
|
return (_Input$variants$outli =
|
|
Input.variants.outline(props).field) != null
|
|
? _Input$variants$outli
|
|
: {};
|
|
},
|
|
flushed: function flushed(props) {
|
|
var _Input$variants$flush;
|
|
|
|
return (_Input$variants$flush =
|
|
Input.variants.flushed(props).field) != null
|
|
? _Input$variants$flush
|
|
: {};
|
|
},
|
|
filled: function filled(props) {
|
|
var _Input$variants$fille;
|
|
|
|
return (_Input$variants$fille =
|
|
Input.variants.filled(props).field) != null
|
|
? _Input$variants$fille
|
|
: {};
|
|
},
|
|
unstyled:
|
|
(_Input$variants$unsty = Input.variants.unstyled.field) !=
|
|
null
|
|
? _Input$variants$unsty
|
|
: {},
|
|
};
|
|
var chakra_ui_theme_components_esm_sizes = {
|
|
xs:
|
|
(_Input$sizes$xs$field = Input.sizes.xs.field) != null
|
|
? _Input$sizes$xs$field
|
|
: {},
|
|
sm:
|
|
(_Input$sizes$sm$field = Input.sizes.sm.field) != null
|
|
? _Input$sizes$sm$field
|
|
: {},
|
|
md:
|
|
(_Input$sizes$md$field = Input.sizes.md.field) != null
|
|
? _Input$sizes$md$field
|
|
: {},
|
|
lg:
|
|
(_Input$sizes$lg$field = Input.sizes.lg.field) != null
|
|
? _Input$sizes$lg$field
|
|
: {},
|
|
};
|
|
var defaultProps = {
|
|
size: "md",
|
|
variant: "outline",
|
|
};
|
|
var Textarea = {
|
|
baseStyle: baseStyle$1,
|
|
sizes: chakra_ui_theme_components_esm_sizes,
|
|
variants: variants,
|
|
defaultProps: defaultProps,
|
|
};
|
|
|
|
var $bg = cssVar("tooltip-bg");
|
|
var $arrowBg = cssVar("popper-arrow-bg");
|
|
|
|
var baseStyle = function baseStyle(props) {
|
|
var _ref;
|
|
|
|
var bg = mode("gray.700", "gray.300")(props);
|
|
return (
|
|
(_ref = {}),
|
|
(_ref[$bg.variable] = "colors." + bg),
|
|
(_ref.px = "8px"),
|
|
(_ref.py = "2px"),
|
|
(_ref.bg = [$bg.reference]),
|
|
(_ref[$arrowBg.variable] = [$bg.reference]),
|
|
(_ref.color = mode("whiteAlpha.900", "gray.900")(props)),
|
|
(_ref.borderRadius = "sm"),
|
|
(_ref.fontWeight = "medium"),
|
|
(_ref.fontSize = "sm"),
|
|
(_ref.boxShadow = "md"),
|
|
(_ref.maxW = "320px"),
|
|
(_ref.zIndex = "tooltip"),
|
|
_ref
|
|
);
|
|
};
|
|
|
|
var Tooltip = {
|
|
baseStyle: baseStyle,
|
|
};
|
|
|
|
var components = {
|
|
Accordion: Accordion,
|
|
Alert: Alert,
|
|
Avatar: Avatar,
|
|
Badge: Badge,
|
|
Breadcrumb: Breadcrumb,
|
|
Button: Button,
|
|
Checkbox: Checkbox,
|
|
CloseButton: CloseButton,
|
|
Code: Code,
|
|
Container: chakra_ui_theme_components_esm_Container,
|
|
Divider: Divider,
|
|
Drawer: Drawer,
|
|
Editable: Editable,
|
|
Form: Form,
|
|
FormError: FormError,
|
|
FormLabel: FormLabel,
|
|
Heading: Heading,
|
|
Input: Input,
|
|
Kbd: Kbd,
|
|
Link: Link,
|
|
List: List,
|
|
Menu: Menu,
|
|
Modal: Modal,
|
|
NumberInput: NumberInput,
|
|
PinInput: PinInput,
|
|
Popover: Popover,
|
|
Progress: Progress,
|
|
Radio: Radio,
|
|
Select: Select,
|
|
Skeleton: Skeleton,
|
|
SkipLink: SkipLink,
|
|
Slider: Slider,
|
|
Spinner: Spinner,
|
|
Stat: Stat,
|
|
Switch: Switch,
|
|
Table: Table,
|
|
Tabs: Tabs,
|
|
Tag: Tag,
|
|
Textarea: Textarea,
|
|
Tooltip: Tooltip,
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/borders/dist/chakra-ui-theme-foundations-borders.esm.js
|
|
|
|
var borders = {
|
|
none: 0,
|
|
"1px": "1px solid",
|
|
"2px": "2px solid",
|
|
"4px": "4px solid",
|
|
"8px": "8px solid",
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/breakpoints/dist/chakra-ui-theme-foundations-breakpoints.esm.js
|
|
|
|
/**
|
|
* Breakpoints for responsive design
|
|
*/
|
|
|
|
var breakpoints = createBreakpoints({
|
|
sm: "30em",
|
|
md: "48em",
|
|
lg: "62em",
|
|
xl: "80em",
|
|
"2xl": "96em",
|
|
}); // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/colors/dist/chakra-ui-theme-foundations-colors.esm.js
|
|
|
|
var colors = {
|
|
transparent: "transparent",
|
|
current: "currentColor",
|
|
black: "#000000",
|
|
white: "#FFFFFF",
|
|
whiteAlpha: {
|
|
50: "rgba(255, 255, 255, 0.04)",
|
|
100: "rgba(255, 255, 255, 0.06)",
|
|
200: "rgba(255, 255, 255, 0.08)",
|
|
300: "rgba(255, 255, 255, 0.16)",
|
|
400: "rgba(255, 255, 255, 0.24)",
|
|
500: "rgba(255, 255, 255, 0.36)",
|
|
600: "rgba(255, 255, 255, 0.48)",
|
|
700: "rgba(255, 255, 255, 0.64)",
|
|
800: "rgba(255, 255, 255, 0.80)",
|
|
900: "rgba(255, 255, 255, 0.92)",
|
|
},
|
|
blackAlpha: {
|
|
50: "rgba(0, 0, 0, 0.04)",
|
|
100: "rgba(0, 0, 0, 0.06)",
|
|
200: "rgba(0, 0, 0, 0.08)",
|
|
300: "rgba(0, 0, 0, 0.16)",
|
|
400: "rgba(0, 0, 0, 0.24)",
|
|
500: "rgba(0, 0, 0, 0.36)",
|
|
600: "rgba(0, 0, 0, 0.48)",
|
|
700: "rgba(0, 0, 0, 0.64)",
|
|
800: "rgba(0, 0, 0, 0.80)",
|
|
900: "rgba(0, 0, 0, 0.92)",
|
|
},
|
|
gray: {
|
|
50: "#F7FAFC",
|
|
100: "#EDF2F7",
|
|
200: "#E2E8F0",
|
|
300: "#CBD5E0",
|
|
400: "#A0AEC0",
|
|
500: "#718096",
|
|
600: "#4A5568",
|
|
700: "#2D3748",
|
|
800: "#1A202C",
|
|
900: "#171923",
|
|
},
|
|
red: {
|
|
50: "#FFF5F5",
|
|
100: "#FED7D7",
|
|
200: "#FEB2B2",
|
|
300: "#FC8181",
|
|
400: "#F56565",
|
|
500: "#E53E3E",
|
|
600: "#C53030",
|
|
700: "#9B2C2C",
|
|
800: "#822727",
|
|
900: "#63171B",
|
|
},
|
|
orange: {
|
|
50: "#FFFAF0",
|
|
100: "#FEEBC8",
|
|
200: "#FBD38D",
|
|
300: "#F6AD55",
|
|
400: "#ED8936",
|
|
500: "#DD6B20",
|
|
600: "#C05621",
|
|
700: "#9C4221",
|
|
800: "#7B341E",
|
|
900: "#652B19",
|
|
},
|
|
yellow: {
|
|
50: "#FFFFF0",
|
|
100: "#FEFCBF",
|
|
200: "#FAF089",
|
|
300: "#F6E05E",
|
|
400: "#ECC94B",
|
|
500: "#D69E2E",
|
|
600: "#B7791F",
|
|
700: "#975A16",
|
|
800: "#744210",
|
|
900: "#5F370E",
|
|
},
|
|
green: {
|
|
50: "#F0FFF4",
|
|
100: "#C6F6D5",
|
|
200: "#9AE6B4",
|
|
300: "#68D391",
|
|
400: "#48BB78",
|
|
500: "#38A169",
|
|
600: "#2F855A",
|
|
700: "#276749",
|
|
800: "#22543D",
|
|
900: "#1C4532",
|
|
},
|
|
teal: {
|
|
50: "#E6FFFA",
|
|
100: "#B2F5EA",
|
|
200: "#81E6D9",
|
|
300: "#4FD1C5",
|
|
400: "#38B2AC",
|
|
500: "#319795",
|
|
600: "#2C7A7B",
|
|
700: "#285E61",
|
|
800: "#234E52",
|
|
900: "#1D4044",
|
|
},
|
|
blue: {
|
|
50: "#ebf8ff",
|
|
100: "#bee3f8",
|
|
200: "#90cdf4",
|
|
300: "#63b3ed",
|
|
400: "#4299e1",
|
|
500: "#3182ce",
|
|
600: "#2b6cb0",
|
|
700: "#2c5282",
|
|
800: "#2a4365",
|
|
900: "#1A365D",
|
|
},
|
|
cyan: {
|
|
50: "#EDFDFD",
|
|
100: "#C4F1F9",
|
|
200: "#9DECF9",
|
|
300: "#76E4F7",
|
|
400: "#0BC5EA",
|
|
500: "#00B5D8",
|
|
600: "#00A3C4",
|
|
700: "#0987A0",
|
|
800: "#086F83",
|
|
900: "#065666",
|
|
},
|
|
purple: {
|
|
50: "#FAF5FF",
|
|
100: "#E9D8FD",
|
|
200: "#D6BCFA",
|
|
300: "#B794F4",
|
|
400: "#9F7AEA",
|
|
500: "#805AD5",
|
|
600: "#6B46C1",
|
|
700: "#553C9A",
|
|
800: "#44337A",
|
|
900: "#322659",
|
|
},
|
|
pink: {
|
|
50: "#FFF5F7",
|
|
100: "#FED7E2",
|
|
200: "#FBB6CE",
|
|
300: "#F687B3",
|
|
400: "#ED64A6",
|
|
500: "#D53F8C",
|
|
600: "#B83280",
|
|
700: "#97266D",
|
|
800: "#702459",
|
|
900: "#521B41",
|
|
},
|
|
linkedin: {
|
|
50: "#E8F4F9",
|
|
100: "#CFEDFB",
|
|
200: "#9BDAF3",
|
|
300: "#68C7EC",
|
|
400: "#34B3E4",
|
|
500: "#00A0DC",
|
|
600: "#008CC9",
|
|
700: "#0077B5",
|
|
800: "#005E93",
|
|
900: "#004471",
|
|
},
|
|
facebook: {
|
|
50: "#E8F4F9",
|
|
100: "#D9DEE9",
|
|
200: "#B7C2DA",
|
|
300: "#6482C0",
|
|
400: "#4267B2",
|
|
500: "#385898",
|
|
600: "#314E89",
|
|
700: "#29487D",
|
|
800: "#223B67",
|
|
900: "#1E355B",
|
|
},
|
|
messenger: {
|
|
50: "#D0E6FF",
|
|
100: "#B9DAFF",
|
|
200: "#A2CDFF",
|
|
300: "#7AB8FF",
|
|
400: "#2E90FF",
|
|
500: "#0078FF",
|
|
600: "#0063D1",
|
|
700: "#0052AC",
|
|
800: "#003C7E",
|
|
900: "#002C5C",
|
|
},
|
|
whatsapp: {
|
|
50: "#dffeec",
|
|
100: "#b9f5d0",
|
|
200: "#90edb3",
|
|
300: "#65e495",
|
|
400: "#3cdd78",
|
|
500: "#22c35e",
|
|
600: "#179848",
|
|
700: "#0c6c33",
|
|
800: "#01421c",
|
|
900: "#001803",
|
|
},
|
|
twitter: {
|
|
50: "#E5F4FD",
|
|
100: "#C8E9FB",
|
|
200: "#A8DCFA",
|
|
300: "#83CDF7",
|
|
400: "#57BBF5",
|
|
500: "#1DA1F2",
|
|
600: "#1A94DA",
|
|
700: "#1681BF",
|
|
800: "#136B9E",
|
|
900: "#0D4D71",
|
|
},
|
|
telegram: {
|
|
50: "#E3F2F9",
|
|
100: "#C5E4F3",
|
|
200: "#A2D4EC",
|
|
300: "#7AC1E4",
|
|
400: "#47A9DA",
|
|
500: "#0088CC",
|
|
600: "#007AB8",
|
|
700: "#006BA1",
|
|
800: "#005885",
|
|
900: "#003F5E",
|
|
},
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/radius/dist/chakra-ui-theme-foundations-radius.esm.js
|
|
|
|
var radii = {
|
|
none: "0",
|
|
sm: "0.125rem",
|
|
base: "0.25rem",
|
|
md: "0.375rem",
|
|
lg: "0.5rem",
|
|
xl: "0.75rem",
|
|
"2xl": "1rem",
|
|
"3xl": "1.5rem",
|
|
full: "9999px",
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/shadows/dist/chakra-ui-theme-foundations-shadows.esm.js
|
|
|
|
var shadows = {
|
|
xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
|
|
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
|
|
inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
|
|
none: "none",
|
|
"dark-lg":
|
|
"rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px",
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/transition/dist/chakra-ui-theme-foundations-transition.esm.js
|
|
|
|
var transitionProperty = {
|
|
common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
|
|
colors: "background-color, border-color, color, fill, stroke",
|
|
dimensions: "width, height",
|
|
position: "left, right, top, bottom",
|
|
background:
|
|
"background-color, background-image, background-position",
|
|
};
|
|
var transitionTimingFunction = {
|
|
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
};
|
|
var transitionDuration = {
|
|
"ultra-fast": "50ms",
|
|
faster: "100ms",
|
|
fast: "150ms",
|
|
normal: "200ms",
|
|
slow: "300ms",
|
|
slower: "400ms",
|
|
"ultra-slow": "500ms",
|
|
};
|
|
var transition = {
|
|
property: transitionProperty,
|
|
easing: transitionTimingFunction,
|
|
duration: transitionDuration,
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/z-index/dist/chakra-ui-theme-foundations-z-index.esm.js
|
|
|
|
var zIndices = {
|
|
hide: -1,
|
|
auto: "auto",
|
|
base: 0,
|
|
docked: 10,
|
|
dropdown: 1000,
|
|
sticky: 1100,
|
|
banner: 1200,
|
|
overlay: 1300,
|
|
modal: 1400,
|
|
popover: 1500,
|
|
skipLink: 1600,
|
|
toast: 1700,
|
|
tooltip: 1800,
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/blur/dist/chakra-ui-theme-foundations-blur.esm.js
|
|
|
|
var chakra_ui_theme_foundations_blur_esm_blur = {
|
|
none: 0,
|
|
sm: "4px",
|
|
base: "8px",
|
|
md: "12px",
|
|
lg: "16px",
|
|
xl: "24px",
|
|
"2xl": "40px",
|
|
"3xl": "64px",
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/foundations/dist/chakra-ui-theme-foundations.esm.js
|
|
|
|
var foundations = sizes_501602a9_esm_extends(
|
|
{
|
|
breakpoints: breakpoints,
|
|
zIndices: zIndices,
|
|
radii: radii,
|
|
blur: chakra_ui_theme_foundations_blur_esm_blur,
|
|
colors: colors,
|
|
},
|
|
typography,
|
|
{
|
|
sizes: sizes,
|
|
shadows: shadows,
|
|
space: spacing,
|
|
borders: borders,
|
|
transition: transition,
|
|
}
|
|
); // CONCATENATED MODULE: ./node_modules/@chakra-ui/theme/dist/chakra-ui-theme.esm.js
|
|
|
|
var semanticTokens = {
|
|
colors: {
|
|
"chakra-body-text": {
|
|
_light: "gray.800",
|
|
_dark: "whiteAlpha.900",
|
|
},
|
|
"chakra-body-bg": {
|
|
_light: "white",
|
|
_dark: "gray.800",
|
|
},
|
|
"chakra-border-color": {
|
|
_light: "gray.200",
|
|
_dark: "whiteAlpha.300",
|
|
},
|
|
"chakra-placeholder-color": {
|
|
_light: "gray.500",
|
|
_dark: "whiteAlpha.400",
|
|
},
|
|
},
|
|
};
|
|
|
|
var styles = {
|
|
global: {
|
|
body: {
|
|
fontFamily: "body",
|
|
color: "chakra-body-text",
|
|
bg: "chakra-body-bg",
|
|
transitionProperty: "background-color",
|
|
transitionDuration: "normal",
|
|
lineHeight: "base",
|
|
},
|
|
"*::placeholder": {
|
|
color: "chakra-placeholder-color",
|
|
},
|
|
"*, *::before, &::after": {
|
|
borderColor: "chakra-border-color",
|
|
wordWrap: "break-word",
|
|
},
|
|
},
|
|
};
|
|
var styles$1 = styles;
|
|
|
|
var requiredChakraThemeKeys =
|
|
/* unused pure expression or super */ null && [
|
|
"borders",
|
|
"breakpoints",
|
|
"colors",
|
|
"components",
|
|
"config",
|
|
"direction",
|
|
"fonts",
|
|
"fontSizes",
|
|
"fontWeights",
|
|
"letterSpacings",
|
|
"lineHeights",
|
|
"radii",
|
|
"shadows",
|
|
"sizes",
|
|
"space",
|
|
"styles",
|
|
"transition",
|
|
"zIndices",
|
|
];
|
|
function chakra_ui_theme_esm_isChakraTheme(unit) {
|
|
if (!isObject(unit)) {
|
|
return false;
|
|
}
|
|
|
|
return requiredChakraThemeKeys.every(function (propertyName) {
|
|
return Object.prototype.hasOwnProperty.call(
|
|
unit,
|
|
propertyName
|
|
);
|
|
});
|
|
}
|
|
|
|
var direction = "ltr";
|
|
var config = {
|
|
useSystemColorMode: false,
|
|
initialColorMode: "light",
|
|
cssVarPrefix: "chakra",
|
|
};
|
|
var theme = sizes_501602a9_esm_extends(
|
|
{
|
|
semanticTokens: semanticTokens,
|
|
direction: direction,
|
|
},
|
|
foundations,
|
|
{
|
|
components: components,
|
|
styles: styles$1,
|
|
config: config,
|
|
}
|
|
);
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/visually-hidden/dist/chakra-ui-visually-hidden.esm.js
|
|
var chakra_ui_visually_hidden_esm = __webpack_require__(1358); // CONCATENATED MODULE: ./node_modules/@chakra-ui/spinner/dist/chakra-ui-spinner.esm.js
|
|
function chakra_ui_spinner_esm_extends() {
|
|
chakra_ui_spinner_esm_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return chakra_ui_spinner_esm_extends.apply(this, arguments);
|
|
}
|
|
|
|
function chakra_ui_spinner_esm_objectWithoutPropertiesLoose(
|
|
source,
|
|
excluded
|
|
) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
var chakra_ui_spinner_esm_excluded = [
|
|
"label",
|
|
"thickness",
|
|
"speed",
|
|
"emptyColor",
|
|
"className",
|
|
];
|
|
var spin = (0, emotion_react_browser_esm /* keyframes */.F4)({
|
|
"0%": {
|
|
transform: "rotate(0deg)",
|
|
},
|
|
"100%": {
|
|
transform: "rotate(360deg)",
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Spinner is used to indicate the loading state of a page or a component,
|
|
* It renders a `div` by default.
|
|
*
|
|
* @see Docs https://chakra-ui.com/spinner
|
|
*/
|
|
var chakra_ui_spinner_esm_Spinner = /*#__PURE__*/ (0,
|
|
chakra_ui_system_esm /* forwardRef */.Gp)(function (props, ref) {
|
|
var styles = (0, chakra_ui_system_esm /* useStyleConfig */.mq)(
|
|
"Spinner",
|
|
props
|
|
);
|
|
|
|
var _omitThemingProps = (0,
|
|
chakra_ui_system_esm /* omitThemingProps */.Lr)(props),
|
|
_omitThemingProps$lab = _omitThemingProps.label,
|
|
label =
|
|
_omitThemingProps$lab === void 0
|
|
? "Loading..."
|
|
: _omitThemingProps$lab,
|
|
_omitThemingProps$thi = _omitThemingProps.thickness,
|
|
thickness =
|
|
_omitThemingProps$thi === void 0
|
|
? "2px"
|
|
: _omitThemingProps$thi,
|
|
_omitThemingProps$spe = _omitThemingProps.speed,
|
|
speed =
|
|
_omitThemingProps$spe === void 0
|
|
? "0.45s"
|
|
: _omitThemingProps$spe,
|
|
_omitThemingProps$emp = _omitThemingProps.emptyColor,
|
|
emptyColor =
|
|
_omitThemingProps$emp === void 0
|
|
? "transparent"
|
|
: _omitThemingProps$emp,
|
|
className = _omitThemingProps.className,
|
|
rest = chakra_ui_spinner_esm_objectWithoutPropertiesLoose(
|
|
_omitThemingProps,
|
|
chakra_ui_spinner_esm_excluded
|
|
);
|
|
|
|
var _className = (0, chakra_ui_utils_esm.cx)(
|
|
"chakra-spinner",
|
|
className
|
|
);
|
|
|
|
var spinnerStyles = chakra_ui_spinner_esm_extends(
|
|
{
|
|
display: "inline-block",
|
|
borderColor: "currentColor",
|
|
borderStyle: "solid",
|
|
borderRadius: "99999px",
|
|
borderWidth: thickness,
|
|
borderBottomColor: emptyColor,
|
|
borderLeftColor: emptyColor,
|
|
animation: spin + " " + speed + " linear infinite",
|
|
},
|
|
styles
|
|
);
|
|
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.div */.m$.div,
|
|
chakra_ui_spinner_esm_extends(
|
|
{
|
|
ref: ref,
|
|
__css: spinnerStyles,
|
|
className: _className,
|
|
},
|
|
rest
|
|
),
|
|
label &&
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_visually_hidden_esm /* VisuallyHidden */.TX,
|
|
null,
|
|
label
|
|
)
|
|
);
|
|
});
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
chakra_ui_spinner_esm_Spinner.displayName = "Spinner";
|
|
}
|
|
|
|
// EXTERNAL MODULE: ./node_modules/@chakra-ui/icon/dist/chakra-ui-icon.esm.js
|
|
var chakra_ui_icon_esm = __webpack_require__(894); // CONCATENATED MODULE: ./node_modules/@chakra-ui/alert/dist/chakra-ui-alert.esm.js
|
|
function chakra_ui_alert_esm_extends() {
|
|
chakra_ui_alert_esm_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return chakra_ui_alert_esm_extends.apply(this, arguments);
|
|
}
|
|
|
|
function chakra_ui_alert_esm_objectWithoutPropertiesLoose(
|
|
source,
|
|
excluded
|
|
) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
var CheckIcon = function CheckIcon(props) {
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_icon_esm /* Icon */.JO,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
viewBox: "0 0 24 24",
|
|
},
|
|
props
|
|
),
|
|
/*#__PURE__*/ react.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z",
|
|
})
|
|
);
|
|
};
|
|
var InfoIcon = function InfoIcon(props) {
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_icon_esm /* Icon */.JO,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
viewBox: "0 0 24 24",
|
|
},
|
|
props
|
|
),
|
|
/*#__PURE__*/ react.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z",
|
|
})
|
|
);
|
|
};
|
|
var WarningIcon = function WarningIcon(props) {
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_icon_esm /* Icon */.JO,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
viewBox: "0 0 24 24",
|
|
},
|
|
props
|
|
),
|
|
/*#__PURE__*/ react.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z",
|
|
})
|
|
);
|
|
};
|
|
|
|
var chakra_ui_alert_esm_excluded = ["status"];
|
|
|
|
var _createStylesContext = (0,
|
|
chakra_ui_system_esm /* createStylesContext */.eC)("Alert"),
|
|
StylesProvider = _createStylesContext[0],
|
|
useStyles = _createStylesContext[1];
|
|
|
|
var STATUSES = {
|
|
info: {
|
|
icon: InfoIcon,
|
|
colorScheme: "blue",
|
|
},
|
|
warning: {
|
|
icon: WarningIcon,
|
|
colorScheme: "orange",
|
|
},
|
|
success: {
|
|
icon: CheckIcon,
|
|
colorScheme: "green",
|
|
},
|
|
error: {
|
|
icon: WarningIcon,
|
|
colorScheme: "red",
|
|
},
|
|
loading: {
|
|
icon: chakra_ui_spinner_esm_Spinner,
|
|
colorScheme: "blue",
|
|
},
|
|
};
|
|
|
|
var chakra_ui_alert_esm_createContext = (0,
|
|
chakra_ui_react_utils_esm /* createContext */.kr)({
|
|
name: "AlertContext",
|
|
errorMessage:
|
|
"useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<Alert />`",
|
|
}),
|
|
AlertProvider = chakra_ui_alert_esm_createContext[0],
|
|
useAlertContext = chakra_ui_alert_esm_createContext[1];
|
|
|
|
/**
|
|
* Alert is used to communicate the state or status of a
|
|
* page, feature or action
|
|
*/
|
|
var chakra_ui_alert_esm_Alert = /*#__PURE__*/ (0,
|
|
chakra_ui_system_esm /* forwardRef */.Gp)(function (props, ref) {
|
|
var _props$colorScheme;
|
|
|
|
var _omitThemingProps = (0,
|
|
chakra_ui_system_esm /* omitThemingProps */.Lr)(props),
|
|
_omitThemingProps$sta = _omitThemingProps.status,
|
|
status =
|
|
_omitThemingProps$sta === void 0
|
|
? "info"
|
|
: _omitThemingProps$sta,
|
|
rest = chakra_ui_alert_esm_objectWithoutPropertiesLoose(
|
|
_omitThemingProps,
|
|
chakra_ui_alert_esm_excluded
|
|
);
|
|
|
|
var colorScheme =
|
|
(_props$colorScheme = props.colorScheme) != null
|
|
? _props$colorScheme
|
|
: STATUSES[status].colorScheme;
|
|
var styles = (0,
|
|
chakra_ui_system_esm /* useMultiStyleConfig */.jC)(
|
|
"Alert",
|
|
chakra_ui_alert_esm_extends({}, props, {
|
|
colorScheme: colorScheme,
|
|
})
|
|
);
|
|
|
|
var alertStyles = chakra_ui_alert_esm_extends(
|
|
{
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
},
|
|
styles.container
|
|
);
|
|
|
|
return /*#__PURE__*/ react.createElement(
|
|
AlertProvider,
|
|
{
|
|
value: {
|
|
status: status,
|
|
},
|
|
},
|
|
/*#__PURE__*/ react.createElement(
|
|
StylesProvider,
|
|
{
|
|
value: styles,
|
|
},
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.div */.m$.div,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
role: "alert",
|
|
ref: ref,
|
|
},
|
|
rest,
|
|
{
|
|
className: (0, chakra_ui_utils_esm.cx)(
|
|
"chakra-alert",
|
|
props.className
|
|
),
|
|
__css: alertStyles,
|
|
}
|
|
)
|
|
)
|
|
)
|
|
);
|
|
});
|
|
var AlertTitle = /*#__PURE__*/ (0,
|
|
chakra_ui_system_esm /* forwardRef */.Gp)(function (props, ref) {
|
|
var styles = useStyles();
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.div */.m$.div,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
ref: ref,
|
|
},
|
|
props,
|
|
{
|
|
className: (0, chakra_ui_utils_esm.cx)(
|
|
"chakra-alert__title",
|
|
props.className
|
|
),
|
|
__css: styles.title,
|
|
}
|
|
)
|
|
);
|
|
});
|
|
var AlertDescription = /*#__PURE__*/ (0,
|
|
chakra_ui_system_esm /* forwardRef */.Gp)(function (props, ref) {
|
|
var styles = useStyles();
|
|
|
|
var descriptionStyles = chakra_ui_alert_esm_extends(
|
|
{
|
|
display: "inline",
|
|
},
|
|
styles.description
|
|
);
|
|
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.div */.m$.div,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
ref: ref,
|
|
},
|
|
props,
|
|
{
|
|
className: (0, chakra_ui_utils_esm.cx)(
|
|
"chakra-alert__desc",
|
|
props.className
|
|
),
|
|
__css: descriptionStyles,
|
|
}
|
|
)
|
|
);
|
|
});
|
|
var AlertIcon = function AlertIcon(props) {
|
|
var _useAlertContext = useAlertContext(),
|
|
status = _useAlertContext.status;
|
|
|
|
var BaseIcon = STATUSES[status].icon;
|
|
var styles = useStyles();
|
|
var css = status === "loading" ? styles.spinner : styles.icon;
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.span */.m$.span,
|
|
chakra_ui_alert_esm_extends(
|
|
{
|
|
display: "inherit",
|
|
},
|
|
props,
|
|
{
|
|
className: (0, chakra_ui_utils_esm.cx)(
|
|
"chakra-alert__icon",
|
|
props.className
|
|
),
|
|
__css: css,
|
|
}
|
|
),
|
|
props.children ||
|
|
/*#__PURE__*/ react.createElement(BaseIcon, {
|
|
h: "100%",
|
|
w: "100%",
|
|
})
|
|
);
|
|
}; // CONCATENATED MODULE: ./node_modules/@chakra-ui/close-button/dist/chakra-ui-close-button.esm.js
|
|
|
|
function chakra_ui_close_button_esm_objectWithoutPropertiesLoose(
|
|
source,
|
|
excluded
|
|
) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
function chakra_ui_close_button_esm_extends() {
|
|
chakra_ui_close_button_esm_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return chakra_ui_close_button_esm_extends.apply(
|
|
this,
|
|
arguments
|
|
);
|
|
}
|
|
|
|
var chakra_ui_close_button_esm_excluded = [
|
|
"children",
|
|
"isDisabled",
|
|
"__css",
|
|
];
|
|
|
|
var CloseIcon = function CloseIcon(props) {
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_icon_esm /* Icon */.JO,
|
|
chakra_ui_close_button_esm_extends(
|
|
{
|
|
focusable: "false",
|
|
"aria-hidden": true,
|
|
},
|
|
props
|
|
),
|
|
/*#__PURE__*/ react.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z",
|
|
})
|
|
);
|
|
};
|
|
|
|
/**
|
|
* A button with a close icon.
|
|
*
|
|
* It is used to handle the close functionality in feedback and overlay components
|
|
* like Alerts, Toasts, Drawers and Modals.
|
|
*/
|
|
var chakra_ui_close_button_esm_CloseButton = /*#__PURE__*/ (0,
|
|
chakra_ui_system_esm /* forwardRef */.Gp)(function (props, ref) {
|
|
var styles = (0, chakra_ui_system_esm /* useStyleConfig */.mq)(
|
|
"CloseButton",
|
|
props
|
|
);
|
|
|
|
var _omitThemingProps = (0,
|
|
chakra_ui_system_esm /* omitThemingProps */.Lr)(props),
|
|
children = _omitThemingProps.children,
|
|
isDisabled = _omitThemingProps.isDisabled,
|
|
__css = _omitThemingProps.__css,
|
|
rest =
|
|
chakra_ui_close_button_esm_objectWithoutPropertiesLoose(
|
|
_omitThemingProps,
|
|
chakra_ui_close_button_esm_excluded
|
|
);
|
|
|
|
var baseStyle = {
|
|
outline: 0,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexShrink: 0,
|
|
};
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.button */.m$.button,
|
|
chakra_ui_close_button_esm_extends(
|
|
{
|
|
type: "button",
|
|
"aria-label": "Close",
|
|
ref: ref,
|
|
disabled: isDisabled,
|
|
__css: chakra_ui_close_button_esm_extends(
|
|
{},
|
|
baseStyle,
|
|
styles,
|
|
__css
|
|
),
|
|
},
|
|
rest
|
|
),
|
|
children ||
|
|
/*#__PURE__*/ react.createElement(CloseIcon, {
|
|
width: "1em",
|
|
height: "1em",
|
|
})
|
|
);
|
|
});
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
chakra_ui_close_button_esm_CloseButton.displayName =
|
|
"CloseButton";
|
|
}
|
|
|
|
// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
|
|
var use_presence = __webpack_require__(5947);
|
|
// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion.mjs + 169 modules
|
|
var motion = __webpack_require__(8970);
|
|
// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs + 3 modules
|
|
var AnimatePresence = __webpack_require__(1190); // CONCATENATED MODULE: ./node_modules/@chakra-ui/toast/dist/chakra-ui-toast.esm.js
|
|
function chakra_ui_toast_esm_extends() {
|
|
chakra_ui_toast_esm_extends = Object.assign
|
|
? Object.assign.bind()
|
|
: function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(
|
|
source,
|
|
key
|
|
)
|
|
) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
return chakra_ui_toast_esm_extends.apply(this, arguments);
|
|
}
|
|
|
|
function getToastPlacement(position, dir) {
|
|
var _logical$dir;
|
|
|
|
var computedPosition = position != null ? position : "bottom";
|
|
var logicals = {
|
|
"top-start": {
|
|
ltr: "top-left",
|
|
rtl: "top-right",
|
|
},
|
|
"top-end": {
|
|
ltr: "top-right",
|
|
rtl: "top-left",
|
|
},
|
|
"bottom-start": {
|
|
ltr: "bottom-left",
|
|
rtl: "bottom-right",
|
|
},
|
|
"bottom-end": {
|
|
ltr: "bottom-right",
|
|
rtl: "bottom-left",
|
|
},
|
|
};
|
|
var logical = logicals[computedPosition];
|
|
return (_logical$dir =
|
|
logical == null ? void 0 : logical[dir]) != null
|
|
? _logical$dir
|
|
: computedPosition;
|
|
}
|
|
|
|
/**
|
|
* Given an array of toasts for a specific position.
|
|
* It returns the toast that matches the `id` passed
|
|
*/
|
|
/**
|
|
* Given the toast manager state, finds the toast that matches
|
|
* the id and return its position and index
|
|
*/
|
|
|
|
function findToast(toasts, id) {
|
|
var position = getToastPosition(toasts, id);
|
|
var index = position
|
|
? toasts[position].findIndex(function (toast) {
|
|
return toast.id === id;
|
|
})
|
|
: -1;
|
|
return {
|
|
position: position,
|
|
index: index,
|
|
};
|
|
}
|
|
/**
|
|
* Given the toast manager state, finds the position of the toast that
|
|
* matches the `id`
|
|
*/
|
|
|
|
var getToastPosition = function getToastPosition(toasts, id) {
|
|
var _Object$values$flat$f;
|
|
|
|
return (_Object$values$flat$f = Object.values(toasts)
|
|
.flat()
|
|
.find(function (toast) {
|
|
return toast.id === id;
|
|
})) == null
|
|
? void 0
|
|
: _Object$values$flat$f.position;
|
|
};
|
|
/**
|
|
* Gets the styles to be applied to a toast's container
|
|
* based on its position in the manager
|
|
*/
|
|
|
|
function getToastStyle(position) {
|
|
var isRighty = position.includes("right");
|
|
var isLefty = position.includes("left");
|
|
var alignItems = "center";
|
|
if (isRighty) alignItems = "flex-end";
|
|
if (isLefty) alignItems = "flex-start";
|
|
return {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: alignItems,
|
|
};
|
|
}
|
|
/**
|
|
* Compute the style of a toast based on its position
|
|
*/
|
|
|
|
function getToastListStyle(position) {
|
|
var isTopOrBottom = position === "top" || position === "bottom";
|
|
var margin = isTopOrBottom ? "0 auto" : undefined;
|
|
var top = position.includes("top")
|
|
? "env(safe-area-inset-top, 0px)"
|
|
: undefined;
|
|
var bottom = position.includes("bottom")
|
|
? "env(safe-area-inset-bottom, 0px)"
|
|
: undefined;
|
|
var right = !position.includes("left")
|
|
? "env(safe-area-inset-right, 0px)"
|
|
: undefined;
|
|
var left = !position.includes("right")
|
|
? "env(safe-area-inset-left, 0px)"
|
|
: undefined;
|
|
return {
|
|
position: "fixed",
|
|
zIndex: 5500,
|
|
pointerEvents: "none",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
margin: margin,
|
|
top: top,
|
|
bottom: bottom,
|
|
right: right,
|
|
left: left,
|
|
};
|
|
}
|
|
|
|
var initialState = {
|
|
top: [],
|
|
"top-left": [],
|
|
"top-right": [],
|
|
"bottom-left": [],
|
|
bottom: [],
|
|
"bottom-right": [],
|
|
};
|
|
/**
|
|
* Store to track all the toast across all positions
|
|
*/
|
|
|
|
var toastStore = createStore(initialState);
|
|
|
|
function createStore(initialState) {
|
|
var state = initialState;
|
|
var listeners = new Set();
|
|
|
|
var setState = function setState(setStateFn) {
|
|
state = setStateFn(state);
|
|
listeners.forEach(function (l) {
|
|
return l();
|
|
});
|
|
};
|
|
|
|
return {
|
|
getState: function getState() {
|
|
return state;
|
|
},
|
|
subscribe: function subscribe(listener) {
|
|
listeners.add(listener);
|
|
return function () {
|
|
// Delete all toasts on unmount
|
|
setState(function () {
|
|
return initialState;
|
|
});
|
|
listeners["delete"](listener);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Delete a toast record at its position
|
|
*/
|
|
removeToast: function removeToast(id, position) {
|
|
setState(function (prevState) {
|
|
var _extends2;
|
|
|
|
return chakra_ui_toast_esm_extends(
|
|
{},
|
|
prevState,
|
|
((_extends2 = {}),
|
|
(_extends2[position] = prevState[
|
|
position
|
|
].filter(function (toast) {
|
|
return toast.id != id;
|
|
})),
|
|
_extends2)
|
|
);
|
|
});
|
|
},
|
|
notify: function notify(message, options) {
|
|
var toast = createToast(message, options);
|
|
var position = toast.position,
|
|
id = toast.id;
|
|
setState(function (prevToasts) {
|
|
var _prevToasts$position,
|
|
_prevToasts$position2,
|
|
_extends3;
|
|
|
|
var isTop = position.includes("top");
|
|
/**
|
|
* - If the toast is positioned at the top edges, the
|
|
* recent toast stacks on top of the other toasts.
|
|
*
|
|
* - If the toast is positioned at the bottom edges, the recent
|
|
* toast stacks below the other toasts.
|
|
*/
|
|
|
|
var toasts = isTop
|
|
? [toast].concat(
|
|
(_prevToasts$position =
|
|
prevToasts[position]) != null
|
|
? _prevToasts$position
|
|
: []
|
|
)
|
|
: [].concat(
|
|
(_prevToasts$position2 =
|
|
prevToasts[position]) != null
|
|
? _prevToasts$position2
|
|
: [],
|
|
[toast]
|
|
);
|
|
return chakra_ui_toast_esm_extends(
|
|
{},
|
|
prevToasts,
|
|
((_extends3 = {}),
|
|
(_extends3[position] = toasts),
|
|
_extends3)
|
|
);
|
|
});
|
|
return id;
|
|
},
|
|
update: function update(id, options) {
|
|
if (!id) return;
|
|
setState(function (prevState) {
|
|
var nextState = chakra_ui_toast_esm_extends(
|
|
{},
|
|
prevState
|
|
);
|
|
|
|
var _findToast = findToast(nextState, id),
|
|
position = _findToast.position,
|
|
index = _findToast.index;
|
|
|
|
if (position && index !== -1) {
|
|
nextState[position][index] =
|
|
chakra_ui_toast_esm_extends(
|
|
{},
|
|
nextState[position][index],
|
|
options,
|
|
{
|
|
message: createRenderToast(options),
|
|
}
|
|
);
|
|
}
|
|
|
|
return nextState;
|
|
});
|
|
},
|
|
closeAll: function closeAll(_temp) {
|
|
var _ref = _temp === void 0 ? {} : _temp,
|
|
positions = _ref.positions;
|
|
|
|
// only one setState here for perf reasons
|
|
// instead of spamming this.closeToast
|
|
setState(function (prev) {
|
|
var allPositions = [
|
|
"bottom",
|
|
"bottom-right",
|
|
"bottom-left",
|
|
"top",
|
|
"top-left",
|
|
"top-right",
|
|
];
|
|
var positionsToClose =
|
|
positions != null ? positions : allPositions;
|
|
return positionsToClose.reduce(function (
|
|
acc,
|
|
position
|
|
) {
|
|
acc[position] = prev[position].map(function (
|
|
toast
|
|
) {
|
|
return chakra_ui_toast_esm_extends(
|
|
{},
|
|
toast,
|
|
{
|
|
requestClose: true,
|
|
}
|
|
);
|
|
});
|
|
return acc;
|
|
},
|
|
chakra_ui_toast_esm_extends({}, prev));
|
|
});
|
|
},
|
|
close: function close(id) {
|
|
setState(function (prevState) {
|
|
var _extends4;
|
|
|
|
var position = getToastPosition(prevState, id);
|
|
if (!position) return prevState;
|
|
return chakra_ui_toast_esm_extends(
|
|
{},
|
|
prevState,
|
|
((_extends4 = {}),
|
|
(_extends4[position] = prevState[position].map(
|
|
function (toast) {
|
|
// id may be string or number
|
|
// eslint-disable-next-line eqeqeq
|
|
if (toast.id == id) {
|
|
return chakra_ui_toast_esm_extends(
|
|
{},
|
|
toast,
|
|
{
|
|
requestClose: true,
|
|
}
|
|
);
|
|
}
|
|
|
|
return toast;
|
|
}
|
|
)),
|
|
_extends4)
|
|
);
|
|
});
|
|
},
|
|
isActive: function isActive(id) {
|
|
return Boolean(
|
|
findToast(toastStore.getState(), id).position
|
|
);
|
|
},
|
|
};
|
|
}
|
|
/**
|
|
* Static id counter to create unique ids
|
|
* for each toast
|
|
*/
|
|
|
|
var counter = 0;
|
|
/**
|
|
* Create properties for a new toast
|
|
*/
|
|
|
|
function createToast(message, options) {
|
|
var _options$id, _options$position;
|
|
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
counter += 1;
|
|
var id =
|
|
(_options$id = options.id) != null ? _options$id : counter;
|
|
var position =
|
|
(_options$position = options.position) != null
|
|
? _options$position
|
|
: "bottom";
|
|
return {
|
|
id: id,
|
|
message: message,
|
|
position: position,
|
|
duration: options.duration,
|
|
onCloseComplete: options.onCloseComplete,
|
|
onRequestRemove: function onRequestRemove() {
|
|
return toastStore.removeToast(String(id), position);
|
|
},
|
|
status: options.status,
|
|
requestClose: false,
|
|
containerStyle: options.containerStyle,
|
|
};
|
|
}
|
|
|
|
var Toast = function Toast(props) {
|
|
var status = props.status,
|
|
_props$variant = props.variant,
|
|
variant =
|
|
_props$variant === void 0 ? "solid" : _props$variant,
|
|
id = props.id,
|
|
title = props.title,
|
|
isClosable = props.isClosable,
|
|
onClose = props.onClose,
|
|
description = props.description,
|
|
icon = props.icon;
|
|
var alertTitleId =
|
|
typeof id !== "undefined"
|
|
? "toast-" + id + "-title"
|
|
: undefined;
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_alert_esm_Alert,
|
|
{
|
|
status: status,
|
|
variant: variant,
|
|
id: String(id),
|
|
alignItems: "start",
|
|
borderRadius: "md",
|
|
boxShadow: "lg",
|
|
paddingEnd: 8,
|
|
textAlign: "start",
|
|
width: "auto",
|
|
"aria-labelledby": alertTitleId,
|
|
},
|
|
/*#__PURE__*/ react.createElement(AlertIcon, null, icon),
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.div */.m$.div,
|
|
{
|
|
flex: "1",
|
|
maxWidth: "100%",
|
|
},
|
|
title &&
|
|
/*#__PURE__*/ react.createElement(
|
|
AlertTitle,
|
|
{
|
|
id: alertTitleId,
|
|
},
|
|
title
|
|
),
|
|
description &&
|
|
/*#__PURE__*/ react.createElement(
|
|
AlertDescription,
|
|
{
|
|
display: "block",
|
|
},
|
|
description
|
|
)
|
|
),
|
|
isClosable &&
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_close_button_esm_CloseButton,
|
|
{
|
|
size: "sm",
|
|
onClick: onClose,
|
|
position: "absolute",
|
|
insetEnd: 1,
|
|
top: 1,
|
|
}
|
|
)
|
|
);
|
|
};
|
|
function createRenderToast(options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
var _options = options,
|
|
render = _options.render,
|
|
_options$toastCompone = _options.toastComponent,
|
|
ToastComponent =
|
|
_options$toastCompone === void 0
|
|
? Toast
|
|
: _options$toastCompone;
|
|
|
|
var renderToast = function renderToast(props) {
|
|
if ((0, chakra_ui_utils_esm /* isFunction */.mf)(render)) {
|
|
return render(props);
|
|
}
|
|
|
|
return /*#__PURE__*/ react.createElement(
|
|
ToastComponent,
|
|
chakra_ui_toast_esm_extends({}, props, options)
|
|
);
|
|
};
|
|
|
|
return renderToast;
|
|
}
|
|
function createToastFn(dir, defaultOptions) {
|
|
var normalizeToastOptions = function normalizeToastOptions(
|
|
options
|
|
) {
|
|
var _options$position;
|
|
|
|
return chakra_ui_toast_esm_extends(
|
|
{},
|
|
defaultOptions,
|
|
options,
|
|
{
|
|
position: getToastPlacement(
|
|
(_options$position =
|
|
options == null
|
|
? void 0
|
|
: options.position) != null
|
|
? _options$position
|
|
: defaultOptions == null
|
|
? void 0
|
|
: defaultOptions.position,
|
|
dir
|
|
),
|
|
}
|
|
);
|
|
};
|
|
|
|
var toast = function toast(options) {
|
|
var normalizedToastOptions = normalizeToastOptions(options);
|
|
var Message = createRenderToast(normalizedToastOptions);
|
|
return toastStore.notify(Message, normalizedToastOptions);
|
|
};
|
|
|
|
toast.update = function (id, options) {
|
|
toastStore.update(id, normalizeToastOptions(options));
|
|
};
|
|
|
|
toast.promise = function (promise, options) {
|
|
var id = toast(
|
|
chakra_ui_toast_esm_extends({}, options.loading, {
|
|
status: "loading",
|
|
duration: null,
|
|
})
|
|
);
|
|
promise
|
|
.then(function (data) {
|
|
return toast.update(
|
|
id,
|
|
chakra_ui_toast_esm_extends(
|
|
{
|
|
status: "success",
|
|
duration: 5000,
|
|
},
|
|
runIfFn(options.success, data)
|
|
)
|
|
);
|
|
})
|
|
["catch"](function (error) {
|
|
return toast.update(
|
|
id,
|
|
chakra_ui_toast_esm_extends(
|
|
{
|
|
status: "error",
|
|
duration: 5000,
|
|
},
|
|
runIfFn(options.error, error)
|
|
)
|
|
);
|
|
});
|
|
};
|
|
|
|
toast.closeAll = toastStore.closeAll;
|
|
toast.close = toastStore.close;
|
|
toast.isActive = toastStore.isActive;
|
|
return toast;
|
|
}
|
|
|
|
/**
|
|
* React hook used to create a function that can be used
|
|
* to show toasts in an application.
|
|
*/
|
|
function useToast(defaultOptions) {
|
|
var _useChakra = useChakra(),
|
|
theme = _useChakra.theme;
|
|
|
|
return React.useMemo(
|
|
function () {
|
|
return createToastFn(theme.direction, defaultOptions);
|
|
},
|
|
[defaultOptions, theme.direction]
|
|
);
|
|
}
|
|
|
|
var toastMotionVariants = {
|
|
initial: function initial(props) {
|
|
var _ref;
|
|
|
|
var position = props.position;
|
|
var dir = ["top", "bottom"].includes(position) ? "y" : "x";
|
|
var factor = ["top-right", "bottom-right"].includes(
|
|
position
|
|
)
|
|
? 1
|
|
: -1;
|
|
if (position === "bottom") factor = 1;
|
|
return (
|
|
(_ref = {
|
|
opacity: 0,
|
|
}),
|
|
(_ref[dir] = factor * 24),
|
|
_ref
|
|
);
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
y: 0,
|
|
x: 0,
|
|
scale: 1,
|
|
transition: {
|
|
duration: 0.4,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
},
|
|
},
|
|
exit: {
|
|
opacity: 0,
|
|
scale: 0.85,
|
|
transition: {
|
|
duration: 0.2,
|
|
ease: [0.4, 0, 1, 1],
|
|
},
|
|
},
|
|
};
|
|
var ToastComponent = /*#__PURE__*/ react.memo(function (props) {
|
|
var id = props.id,
|
|
message = props.message,
|
|
onCloseComplete = props.onCloseComplete,
|
|
onRequestRemove = props.onRequestRemove,
|
|
_props$requestClose = props.requestClose,
|
|
requestClose =
|
|
_props$requestClose === void 0
|
|
? false
|
|
: _props$requestClose,
|
|
_props$position = props.position,
|
|
position =
|
|
_props$position === void 0 ? "bottom" : _props$position,
|
|
_props$duration = props.duration,
|
|
duration =
|
|
_props$duration === void 0 ? 5000 : _props$duration,
|
|
containerStyle = props.containerStyle,
|
|
_props$motionVariants = props.motionVariants,
|
|
motionVariants =
|
|
_props$motionVariants === void 0
|
|
? toastMotionVariants
|
|
: _props$motionVariants,
|
|
_props$toastSpacing = props.toastSpacing,
|
|
toastSpacing =
|
|
_props$toastSpacing === void 0
|
|
? "0.5rem"
|
|
: _props$toastSpacing;
|
|
|
|
var _React$useState = react.useState(duration),
|
|
delay = _React$useState[0],
|
|
setDelay = _React$useState[1];
|
|
|
|
var isPresent = (0, use_presence /* useIsPresent */.hO)();
|
|
(0, chakra_ui_hooks_esm /* useUpdateEffect */.rf)(
|
|
function () {
|
|
if (!isPresent) {
|
|
onCloseComplete == null
|
|
? void 0
|
|
: onCloseComplete();
|
|
}
|
|
},
|
|
[isPresent]
|
|
);
|
|
(0, chakra_ui_hooks_esm /* useUpdateEffect */.rf)(
|
|
function () {
|
|
setDelay(duration);
|
|
},
|
|
[duration]
|
|
);
|
|
|
|
var onMouseEnter = function onMouseEnter() {
|
|
return setDelay(null);
|
|
};
|
|
|
|
var onMouseLeave = function onMouseLeave() {
|
|
return setDelay(duration);
|
|
};
|
|
|
|
var close = function close() {
|
|
if (isPresent) onRequestRemove();
|
|
};
|
|
|
|
react.useEffect(
|
|
function () {
|
|
if (isPresent && requestClose) {
|
|
onRequestRemove();
|
|
}
|
|
},
|
|
[isPresent, requestClose, onRequestRemove]
|
|
);
|
|
(0, chakra_ui_hooks_esm /* useTimeout */.KS)(close, delay);
|
|
var containerStyles = react.useMemo(
|
|
function () {
|
|
return chakra_ui_toast_esm_extends(
|
|
{
|
|
pointerEvents: "auto",
|
|
maxWidth: 560,
|
|
minWidth: 300,
|
|
margin: toastSpacing,
|
|
},
|
|
containerStyle
|
|
);
|
|
},
|
|
[containerStyle, toastSpacing]
|
|
);
|
|
var toastStyle = react.useMemo(
|
|
function () {
|
|
return getToastStyle(position);
|
|
},
|
|
[position]
|
|
);
|
|
return /*#__PURE__*/ react.createElement(
|
|
motion /* motion.li */.E.li,
|
|
{
|
|
layout: true,
|
|
className: "chakra-toast",
|
|
variants: motionVariants,
|
|
initial: "initial",
|
|
animate: "animate",
|
|
exit: "exit",
|
|
onHoverStart: onMouseEnter,
|
|
onHoverEnd: onMouseLeave,
|
|
custom: {
|
|
position: position,
|
|
},
|
|
style: toastStyle,
|
|
},
|
|
/*#__PURE__*/ react.createElement(
|
|
chakra_ui_system_esm /* chakra.div */.m$.div,
|
|
{
|
|
role: "status",
|
|
"aria-atomic": "true",
|
|
className: "chakra-toast__inner",
|
|
__css: containerStyles,
|
|
},
|
|
(0, chakra_ui_utils_esm /* runIfFn */.Pu)(message, {
|
|
id: id,
|
|
onClose: close,
|
|
})
|
|
)
|
|
);
|
|
});
|
|
|
|
if (chakra_ui_utils_esm /* __DEV__ */.Ts) {
|
|
ToastComponent.displayName = "ToastComponent";
|
|
}
|
|
|
|
/**
|
|
* Manages the creation, and removal of toasts
|
|
* across all corners ("top", "bottom", etc.)
|
|
*/
|
|
var ToastProvider = function ToastProvider(props) {
|
|
var state = react.useSyncExternalStore(
|
|
toastStore.subscribe,
|
|
toastStore.getState,
|
|
toastStore.getState
|
|
);
|
|
var children = props.children,
|
|
motionVariants = props.motionVariants,
|
|
_props$component = props.component,
|
|
Component =
|
|
_props$component === void 0
|
|
? ToastComponent
|
|
: _props$component,
|
|
portalProps = props.portalProps;
|
|
var toastList = (0, chakra_ui_utils_esm /* objectKeys */.Yd)(
|
|
state
|
|
).map(function (position) {
|
|
var toasts = state[position];
|
|
return /*#__PURE__*/ react.createElement(
|
|
"ul",
|
|
{
|
|
role: "region",
|
|
"aria-live": "polite",
|
|
key: position,
|
|
id: "chakra-toast-manager-" + position,
|
|
style: getToastListStyle(position),
|
|
},
|
|
/*#__PURE__*/ react.createElement(
|
|
AnimatePresence /* AnimatePresence */.M,
|
|
{
|
|
initial: false,
|
|
},
|
|
toasts.map(function (toast) {
|
|
return /*#__PURE__*/ react.createElement(
|
|
Component,
|
|
chakra_ui_toast_esm_extends(
|
|
{
|
|
key: toast.id,
|
|
motionVariants: motionVariants,
|
|
},
|
|
toast
|
|
)
|
|
);
|
|
})
|
|
)
|
|
);
|
|
});
|
|
return /*#__PURE__*/ react.createElement(
|
|
react.Fragment,
|
|
null,
|
|
children,
|
|
/*#__PURE__*/ react.createElement(
|
|
Portal,
|
|
portalProps,
|
|
toastList
|
|
)
|
|
);
|
|
};
|
|
|
|
var defaults = {
|
|
duration: 5000,
|
|
variant: "solid",
|
|
};
|
|
var defaultStandaloneParam = {
|
|
theme: theme,
|
|
colorMode: "light",
|
|
toggleColorMode: chakra_ui_utils_esm /* noop */.ZT,
|
|
setColorMode: chakra_ui_utils_esm /* noop */.ZT,
|
|
defaultOptions: defaults,
|
|
};
|
|
/**
|
|
* Create a toast
|
|
*/
|
|
|
|
function createStandaloneToast(_temp) {
|
|
var _ref = _temp === void 0 ? defaultStandaloneParam : _temp,
|
|
_ref$theme = _ref.theme,
|
|
theme =
|
|
_ref$theme === void 0
|
|
? defaultStandaloneParam.theme
|
|
: _ref$theme,
|
|
_ref$colorMode = _ref.colorMode,
|
|
colorMode =
|
|
_ref$colorMode === void 0
|
|
? defaultStandaloneParam.colorMode
|
|
: _ref$colorMode,
|
|
_ref$toggleColorMode = _ref.toggleColorMode,
|
|
toggleColorMode =
|
|
_ref$toggleColorMode === void 0
|
|
? defaultStandaloneParam.toggleColorMode
|
|
: _ref$toggleColorMode,
|
|
_ref$setColorMode = _ref.setColorMode,
|
|
setColorMode =
|
|
_ref$setColorMode === void 0
|
|
? defaultStandaloneParam.setColorMode
|
|
: _ref$setColorMode,
|
|
_ref$defaultOptions = _ref.defaultOptions,
|
|
defaultOptions =
|
|
_ref$defaultOptions === void 0
|
|
? defaultStandaloneParam.defaultOptions
|
|
: _ref$defaultOptions,
|
|
motionVariants = _ref.motionVariants,
|
|
toastSpacing = _ref.toastSpacing,
|
|
component = _ref.component;
|
|
|
|
var colorModeContextValue = {
|
|
colorMode: colorMode,
|
|
setColorMode: setColorMode,
|
|
toggleColorMode: toggleColorMode,
|
|
};
|
|
|
|
var ToastContainer = function ToastContainer() {
|
|
return /*#__PURE__*/ React.createElement(
|
|
ThemeProvider,
|
|
{
|
|
theme: theme,
|
|
},
|
|
/*#__PURE__*/ React.createElement(
|
|
ColorModeContext.Provider,
|
|
{
|
|
value: colorModeContextValue,
|
|
},
|
|
/*#__PURE__*/ React.createElement(ToastProvider, {
|
|
defaultOptions: defaultOptions,
|
|
motionVariants: motionVariants,
|
|
toastSpacing: toastSpacing,
|
|
component: component,
|
|
})
|
|
)
|
|
);
|
|
};
|
|
|
|
return {
|
|
ToastContainer: ToastContainer,
|
|
toast: createToastFn(theme.direction, defaultOptions),
|
|
};
|
|
} // CONCATENATED MODULE: ./node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js
|
|
|
|
function chakra_ui_react_esm_objectWithoutPropertiesLoose(
|
|
source,
|
|
excluded
|
|
) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
var chakra_ui_react_esm_excluded = ["children", "toastOptions"];
|
|
var ChakraProvider = function ChakraProvider(_ref) {
|
|
var children = _ref.children,
|
|
toastOptions = _ref.toastOptions,
|
|
restProps =
|
|
chakra_ui_react_esm_objectWithoutPropertiesLoose(
|
|
_ref,
|
|
chakra_ui_react_esm_excluded
|
|
);
|
|
|
|
return /*#__PURE__*/ react.createElement(
|
|
chakra_ui_provider_esm_ChakraProvider,
|
|
restProps,
|
|
children,
|
|
/*#__PURE__*/ react.createElement(
|
|
ToastProvider,
|
|
toastOptions
|
|
)
|
|
);
|
|
};
|
|
ChakraProvider.defaultProps = {
|
|
theme: theme,
|
|
};
|
|
|
|
/**
|
|
* NOTE: This got too complex to manage, and it's not worth the extra complexity.
|
|
* We'll re-evaluate this API in the future releases.
|
|
*
|
|
* Function to override or customize the Chakra UI theme conveniently.
|
|
* First extension overrides the baseTheme and following extensions override the preceding extensions.
|
|
*
|
|
* @example:
|
|
* import { theme as baseTheme, extendTheme, withDefaultColorScheme } from '@chakra-ui/react'
|
|
*
|
|
* const customTheme = extendTheme(
|
|
* {
|
|
* colors: {
|
|
* brand: {
|
|
* 500: "#b4d455",
|
|
* },
|
|
* },
|
|
* },
|
|
* withDefaultColorScheme({ colorScheme: "red" }),
|
|
* baseTheme // optional
|
|
* )
|
|
*/
|
|
function extendTheme() {
|
|
for (
|
|
var _len = arguments.length,
|
|
extensions = new Array(_len),
|
|
_key = 0;
|
|
_key < _len;
|
|
_key++
|
|
) {
|
|
extensions[_key] = arguments[_key];
|
|
}
|
|
|
|
var overrides = [].concat(extensions);
|
|
var baseTheme = extensions[extensions.length - 1];
|
|
|
|
if (
|
|
isChakraTheme(baseTheme) && // this ensures backward compatibility
|
|
// previously only `extendTheme(override, baseTheme?)` was allowed
|
|
overrides.length > 1
|
|
) {
|
|
overrides = overrides.slice(0, overrides.length - 1);
|
|
} else {
|
|
baseTheme = theme$1;
|
|
}
|
|
|
|
return pipe.apply(
|
|
void 0,
|
|
overrides.map(function (extension) {
|
|
return function (prevTheme) {
|
|
return isFunction(extension)
|
|
? extension(prevTheme)
|
|
: mergeThemeOverride(prevTheme, extension);
|
|
};
|
|
})
|
|
)(baseTheme);
|
|
}
|
|
function mergeThemeOverride() {
|
|
for (
|
|
var _len2 = arguments.length,
|
|
overrides = new Array(_len2),
|
|
_key2 = 0;
|
|
_key2 < _len2;
|
|
_key2++
|
|
) {
|
|
overrides[_key2] = arguments[_key2];
|
|
}
|
|
|
|
return mergeWith.apply(
|
|
void 0,
|
|
[{}].concat(overrides, [mergeThemeCustomizer])
|
|
);
|
|
}
|
|
|
|
function mergeThemeCustomizer(source, override, key, object) {
|
|
if (
|
|
(isFunction(source) || isFunction(override)) &&
|
|
Object.prototype.hasOwnProperty.call(object, key)
|
|
) {
|
|
return function () {
|
|
var sourceValue = isFunction(source)
|
|
? source.apply(void 0, arguments)
|
|
: source;
|
|
var overrideValue = isFunction(override)
|
|
? override.apply(void 0, arguments)
|
|
: override;
|
|
return mergeWith(
|
|
{},
|
|
sourceValue,
|
|
overrideValue,
|
|
mergeThemeCustomizer
|
|
);
|
|
};
|
|
} // fallback to default behaviour
|
|
|
|
return undefined;
|
|
}
|
|
|
|
function withDefaultColorScheme(_ref) {
|
|
var colorScheme = _ref.colorScheme,
|
|
components = _ref.components;
|
|
return function (theme) {
|
|
var names = Object.keys(theme.components || {});
|
|
|
|
if (Array.isArray(components)) {
|
|
names = components;
|
|
} else if (isObject(components)) {
|
|
names = Object.keys(components);
|
|
}
|
|
|
|
return mergeThemeOverride(theme, {
|
|
components: fromEntries(
|
|
names.map(function (componentName) {
|
|
var withColorScheme = {
|
|
defaultProps: {
|
|
colorScheme: colorScheme,
|
|
},
|
|
};
|
|
return [componentName, withColorScheme];
|
|
})
|
|
),
|
|
});
|
|
};
|
|
}
|
|
|
|
function withDefaultSize(_ref) {
|
|
var size = _ref.size,
|
|
components = _ref.components;
|
|
return function (theme) {
|
|
var names = Object.keys(theme.components || {});
|
|
|
|
if (Array.isArray(components)) {
|
|
names = components;
|
|
} else if (isObject(components)) {
|
|
names = Object.keys(components);
|
|
}
|
|
|
|
return mergeThemeOverride(theme, {
|
|
components: fromEntries(
|
|
names.map(function (componentName) {
|
|
var withSize = {
|
|
defaultProps: {
|
|
size: size,
|
|
},
|
|
};
|
|
return [componentName, withSize];
|
|
})
|
|
),
|
|
});
|
|
};
|
|
}
|
|
|
|
function withDefaultVariant(_ref) {
|
|
var variant = _ref.variant,
|
|
components = _ref.components;
|
|
return function (theme) {
|
|
var names = Object.keys(theme.components || {});
|
|
|
|
if (Array.isArray(components)) {
|
|
names = components;
|
|
} else if (isObject(components)) {
|
|
names = Object.keys(components);
|
|
}
|
|
|
|
return mergeThemeOverride(theme, {
|
|
components: fromEntries(
|
|
names.map(function (componentName) {
|
|
var withVariant = {
|
|
defaultProps: {
|
|
variant: variant,
|
|
},
|
|
};
|
|
return [componentName, withVariant];
|
|
})
|
|
),
|
|
});
|
|
};
|
|
}
|
|
|
|
function withDefaultProps(_ref) {
|
|
var _ref$defaultProps = _ref.defaultProps,
|
|
colorScheme = _ref$defaultProps.colorScheme,
|
|
variant = _ref$defaultProps.variant,
|
|
size = _ref$defaultProps.size,
|
|
components = _ref.components;
|
|
|
|
var identity = function identity(t) {
|
|
return t;
|
|
};
|
|
|
|
var fns = [
|
|
colorScheme
|
|
? withDefaultColorScheme({
|
|
colorScheme: colorScheme,
|
|
components: components,
|
|
})
|
|
: identity,
|
|
size
|
|
? withDefaultSize({
|
|
size: size,
|
|
components: components,
|
|
})
|
|
: identity,
|
|
variant
|
|
? withDefaultVariant({
|
|
variant: variant,
|
|
components: components,
|
|
})
|
|
: identity,
|
|
];
|
|
return function (theme) {
|
|
return mergeThemeOverride(pipe.apply(void 0, fns)(theme));
|
|
};
|
|
} // CONCATENATED MODULE: ./pages/_app.jsx
|
|
|
|
function MyApp(param) {
|
|
var Component = param.Component,
|
|
pageProps = param.pageProps;
|
|
return /*#__PURE__*/ (0, jsx_runtime.jsx)(ChakraProvider, {
|
|
children: /*#__PURE__*/ (0, jsx_runtime.jsx)(
|
|
Component,
|
|
_objectSpread({}, pageProps)
|
|
),
|
|
});
|
|
}
|
|
/* harmony default export */ var _app = MyApp;
|
|
|
|
/***/
|
|
},
|
|
},
|
|
/******/ function (__webpack_require__) {
|
|
// webpackRuntimeModules
|
|
/******/ var __webpack_exec__ = function (moduleId) {
|
|
return __webpack_require__((__webpack_require__.s = moduleId));
|
|
};
|
|
/******/ __webpack_require__.O(0, [774, 179], function () {
|
|
return __webpack_exec__(3837), __webpack_exec__(387);
|
|
});
|
|
/******/ var __webpack_exports__ = __webpack_require__.O();
|
|
/******/ _N_E = __webpack_exports__;
|
|
/******/
|
|
},
|
|
]);
|