UNPKG

@cfxjs/react-ui

Version:

Modern and minimalist React UI library.

1,364 lines (1,241 loc) 69.7 kB
(function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 66); /******/ }) /************************************************************************/ /******/ ([ /* 0 */, /* 1 */, /* 2 */ /***/ (function(module, exports) { module.exports = require("styled-jsx/style"); /***/ }), /* 3 */ /***/ (function(module, exports) { module.exports = require("react"); /***/ }), /* 4 */, /* 5 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _use_theme__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6); /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _use_theme__WEBPACK_IMPORTED_MODULE_0__["default"]; }); /***/ }), /* 6 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _theme_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7); var useTheme = function useTheme() { return react__WEBPACK_IMPORTED_MODULE_0___default.a.useContext(_theme_context__WEBPACK_IMPORTED_MODULE_1__["default"]); }; /* harmony default export */ __webpack_exports__["default"] = (useTheme); /***/ }), /* 7 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _themes_default__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8); var ThemeContext = react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext(_themes_default__WEBPACK_IMPORTED_MODULE_1__["default"]); /* harmony default export */ __webpack_exports__["default"] = (ThemeContext); /***/ }), /* 8 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "palette", function() { return palette; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "expressiveness", function() { return expressiveness; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "font", function() { return font; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "breakpoints", function() { return breakpoints; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "layout", function() { return layout; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "themes", function() { return themes; }); /* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9); var palette = { /* eslint-disable @typescript-eslint/camelcase */ accents_1: '#fafafa', accents_2: '#eaeaea', accents_3: '#999', accents_4: '#888', accents_5: '#666', accents_6: '#444', accents_7: '#333', accents_8: '#111', /* eslint-enable camelcase */ background: '#fff', foreground: '#000', selection: '#79ffe1', cyan: '#50e3c2', cyanLighter: '#aaffec', cyanLight: '#79ffe1', cyanDark: '#29bc9b', violet: '#7928ca', violetLighter: '#e3d7fc', violetLight: '#8a63d2', violetDark: '#4c2889', purple: '#f81ce5', alert: '#ff0080', magenta: '#eb367f', link: '#0070f3', // conflux ui secondary: '#666', error: '#e15c56', errorLight: '#fbebeb', errorDark: '#b34a50', success: '#7cd77b', successLight: '#effaef', successDark: '#61be75', warning: '#ffc438', warningLight: '#fef1ea', warningDark: '#fb7a03', code: '#f81ce5', border: '#eaeaea', cTheme0: '#f0f5ff', cTheme1: '#dfe8ff', cTheme2: '#9cb4ff', cTheme3: '#788bef', cTheme4: '#4b64e9', cTheme5: '#1e3de4', cTheme6: '#0f23bd', cTheme7: '#030f8e', cNeutral0: '#f9fafb', cNeutral1: '#f1f3f6', cNeutral2: '#ebeced', cNeutral3: '#ccc', cNeutral4: '#999', cNeutral5: '#666', cNeutral6: '#444', cNeutral7: '#333', cNeutral8: '#fff' }; var expressiveness = { linkStyle: 'none', linkHoverStyle: 'none', dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)', scrollerStart: 'rgba(255, 255, 255, 1)', scrollerEnd: 'rgba(255, 255, 255, 0)', shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)', shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)', shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)', portalOpacity: 0.25, // radius R0: '0', R1: '2px', R2: '4px', R3: '8px', R4: '12px', R5: '50%', // border-width L1: '1px', L2: '2px', L4: '4px', // border-style cLineStyle1: 'solid', cLineStyle2: 'dashed', cLineStyle3: 'dotted', // drop shadows D0: 'none', D1: '0px 4px 6px -4px rgba(0, 0, 0, 0.12)', D2: '0px 6px 16px rgba(0, 0, 0, 0.08)', D3: '0px 8px 24px 8px rgba(0, 0, 0, 0.06)', D4: '8px 12px 16px rgba(0, 0, 0, 0.08)', D5: '12px 12px 24px rgba(0, 0, 0, 0.12)' }; var font = _shared__WEBPACK_IMPORTED_MODULE_0__["defaultFont"]; var breakpoints = _shared__WEBPACK_IMPORTED_MODULE_0__["defaultBreakpoints"]; var layout = _shared__WEBPACK_IMPORTED_MODULE_0__["defaultLayout"]; var themes = { type: 'light', font: font, layout: layout, palette: palette, breakpoints: breakpoints, expressiveness: expressiveness }; /* harmony default export */ __webpack_exports__["default"] = (themes); /***/ }), /* 9 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultFont", function() { return defaultFont; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultBreakpoints", function() { return defaultBreakpoints; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultLayout", function() { return defaultLayout; }); var defaultFont = { sans: '"Circular Std", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif', mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace' }; var defaultBreakpoints = { xs: { min: '0', max: '650px' }, sm: { min: '650px', max: '900px' }, md: { min: '900px', max: '1280px' }, lg: { min: '1280px', max: '1920px' }, xl: { min: '1920px', max: '10000px' } }; var defaultLayout = { gap: '1.1429rem', gapNegative: '-1.1429rem', gapHalf: '0.5714rem', gapHalfNegative: '-0.5714rem', gapQuarter: '0.2857rem', gapQuarterNegative: '-0.2857rem', pageMargin: '16px', pageWidth: '950px', pageWidthWithMargin: '982px', breakpointMobile: defaultBreakpoints.xs.max, breakpointTablet: defaultBreakpoints.sm.max // radius: '5px', }; /***/ }), /* 10 */, /* 11 */, /* 12 */, /* 13 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "colorToRgbValues", function() { return colorToRgbValues; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addColorAlpha", function() { return addColorAlpha; }); function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } var hexToRgb = function hexToRgb(color) { var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; var full = color.replace(fullReg, function (_, r, g, b) { return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b); }); var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full); if (!values) { throw new Error("CFX UI: Unsupported ".concat(color, " color.")); } return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)]; }; var colorToRgbValues = function colorToRgbValues(color) { if (color.charAt(0) === '#') return hexToRgb(color); var safeColor = color.replace(/ /g, ''); var colorType = color.substr(0, 4); var regArray = safeColor.match(/\((.+)\)/); if (!colorType.startsWith('rgb') || !regArray) { console.log(color); throw new Error("CFX UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color."); } return regArray[1].split(',').map(function (str) { return Number.parseFloat(str); }); }; var addColorAlpha = function addColorAlpha(color, alpha) { if (!/^#|rgb|RGB/.test(color)) return color; var _colorToRgbValues = colorToRgbValues(color), _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3), r = _colorToRgbValues2[0], g = _colorToRgbValues2[1], b = _colorToRgbValues2[2]; var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha; return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")"); }; /***/ }), /* 14 */, /* 15 */, /* 16 */, /* 17 */, /* 18 */, /* 19 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); var withDefaults = function withDefaults(component, defaultProps) { component.defaultProps = defaultProps; return component; }; /* harmony default export */ __webpack_exports__["default"] = (withDefaults); /***/ }), /* 20 */, /* 21 */, /* 22 */, /* 23 */, /* 24 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _loading__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(25); /* harmony default export */ __webpack_exports__["default"] = (_loading__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 25 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var styled_jsx_style__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2); /* harmony import */ var styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_jsx_style__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _styles_use_theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5); /* harmony import */ var _utils_with_defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19); var defaultProps = { size: 'medium', color: 'default' }; var getIconSize = function getIconSize(size) { var sizes = { mini: '10px', small: '15px', medium: '20px', large: '25px' }; return sizes[size] || size; }; var getIconStrokeColor = function getIconStrokeColor(palette, color) { var colors = { "default": palette.cNeutral3, primary: palette.cTheme5, secondary: palette.secondary, success: palette.success, warning: palette.warning, error: palette.error }; return colors[color] || color; }; var Loading = function Loading(_ref) { var children = _ref.children, size = _ref.size, color = _ref.color; var theme = Object(_styles_use_theme__WEBPACK_IMPORTED_MODULE_2__["default"])(); var width = Object(react__WEBPACK_IMPORTED_MODULE_1__["useMemo"])(function () { return getIconSize(size); }, [size]); var fill = Object(react__WEBPACK_IMPORTED_MODULE_1__["useMemo"])(function () { return getIconStrokeColor(theme.palette, color); }, [theme.palette, color]); return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) + " " + "loading-container" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { className: styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) + " " + "loading" }, children && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("label", { className: styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("svg", { width: width, height: width, viewBox: "0 0 16 16", fill: "none", className: styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) + " " + "svg" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14V16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8H14C14 4.68629 11.3137 2 8 2Z", fill: fill, className: styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("path", { d: "M15 12.5C15 13.3284 14.3284 14 13.5 14C12.6716 14 12 13.3284 12 12.5C12 11.6716 12.6716 11 13.5 11C14.3284 11 15 11.6716 15 12.5Z", fill: fill, className: styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default.a, { id: "3670930641", dynamic: [theme.layout.gapHalf, theme.palette.cNeutral3] }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;height:100%;}.loading.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}label.__jsx-style-dynamic-selector{margin-right:".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.cNeutral3, ";}label.__jsx-style-dynamic-selector *{margin:0;}.svg.__jsx-style-dynamic-selector{-webkit-animation:loading-rotate-__jsx-style-dynamic-selector 1.4s infinite;animation:loading-rotate-__jsx-style-dynamic-selector 1.4s infinite;}@-webkit-keyframes loading-rotate-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes loading-rotate-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"))); }; var MemoLoading = react__WEBPACK_IMPORTED_MODULE_1___default.a.memo(Loading); /* harmony default export */ __webpack_exports__["default"] = (Object(_utils_with_defaults__WEBPACK_IMPORTED_MODULE_3__["default"])(MemoLoading, defaultProps)); /***/ }), /* 26 */, /* 27 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getId", function() { return getId; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasChild", function() { return hasChild; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "pickChild", function() { return pickChild; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "pickChildByProps", function() { return pickChildByProps; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "pickChildrenFirst", function() { return pickChildrenFirst; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setChildrenProps", function() { return setChildrenProps; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setChildrenIndex", function() { return setChildrenIndex; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getReactNode", function() { return getReactNode; }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); var getId = function getId() { return Math.random().toString(32).slice(2, 10); }; var hasChild = function hasChild(children, child) { var types = react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.map(children, function (item) { if (!react__WEBPACK_IMPORTED_MODULE_0___default.a.isValidElement(item)) return null; return item.type; }); return (types || []).includes(child); }; var pickChild = function pickChild(children, targetChild) { var target = []; var withoutTargetChildren = react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.map(children, function (item) { if (!react__WEBPACK_IMPORTED_MODULE_0___default.a.isValidElement(item)) return item; if (item.type === targetChild) { target.push(item); return null; } return item; }); var targetChildren = target.length >= 0 ? target : undefined; return [withoutTargetChildren, targetChildren]; }; var pickChildByProps = function pickChildByProps(children, key, value) { var target = []; var isArray = Array.isArray(value); var withoutPropChildren = react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.map(children, function (item) { if (!react__WEBPACK_IMPORTED_MODULE_0___default.a.isValidElement(item)) return null; if (!item.props) return item; if (isArray) { if (value.includes(item.props[key])) { target.push(item); return null; } return item; } if (item.props[key] === value) { target.push(item); return null; } return item; }); var targetChildren = target.length >= 0 ? target : undefined; return [withoutPropChildren, targetChildren]; }; var pickChildrenFirst = function pickChildrenFirst(children) { return react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.toArray(children)[0]; }; var setChildrenProps = function setChildrenProps(children) { var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var targetComponents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : []; if (react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(children) === 0) return []; var allowAll = targetComponents.length === 0; var clone = function clone(child) { var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; return react__WEBPACK_IMPORTED_MODULE_0___default.a.cloneElement(child, props); }; return react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.map(children, function (item) { if (!react__WEBPACK_IMPORTED_MODULE_0___default.a.isValidElement(item)) return item; if (allowAll) return clone(item, props); var isAllowed = targetComponents.find(function (child) { return child === item.type; }); if (isAllowed) return clone(item, props); return item; }); }; var setChildrenIndex = function setChildrenIndex(children) { var targetComponents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; if (react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(children) === 0) return []; var allowAll = targetComponents.length === 0; var clone = function clone(child) { var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; return react__WEBPACK_IMPORTED_MODULE_0___default.a.cloneElement(child, props); }; var index = 0; return react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.map(children, function (item) { if (!react__WEBPACK_IMPORTED_MODULE_0___default.a.isValidElement(item)) return item; index = index + 1; if (allowAll) return clone(item, { index: index }); var isAllowed = targetComponents.find(function (child) { return child === item.type; }); if (isAllowed) return clone(item, { index: index }); index = index - 1; return item; }); }; var getReactNode = function getReactNode(node) { if (!node) return null; if (typeof node !== 'function') return node; return node(); }; /***/ }), /* 28 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _use_click_away__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(29); /* harmony default export */ __webpack_exports__["default"] = (_use_click_away__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 29 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _use_click_away__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(30); /* harmony default export */ __webpack_exports__["default"] = (_use_click_away__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 30 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); var useClickAway = function useClickAway(refs, handler) { Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () { var callback = function callback(event) { var refsArray = Array.isArray(refs) ? refs : [refs]; var isAway = true; while (refsArray.length) { var el = refsArray[0].current; if (!event || !el || el.contains(event.target)) { isAway = false; refsArray = []; } refsArray.shift(); } if (isAway) { handler(event); } }; document.addEventListener('click', callback); return function () { return document.removeEventListener('click', callback); }; }, [refs, handler]); }; /* harmony default export */ __webpack_exports__["default"] = (useClickAway); /***/ }), /* 31 */, /* 32 */, /* 33 */, /* 34 */, /* 35 */, /* 36 */, /* 37 */, /* 38 */, /* 39 */, /* 40 */, /* 41 */, /* 42 */, /* 43 */, /* 44 */, /* 45 */, /* 46 */, /* 47 */, /* 48 */, /* 49 */, /* 50 */, /* 51 */, /* 52 */, /* 53 */, /* 54 */, /* 55 */, /* 56 */, /* 57 */, /* 58 */, /* 59 */, /* 60 */, /* 61 */, /* 62 */, /* 63 */, /* 64 */, /* 65 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getButtonColors", function() { return getButtonColors; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getButtonGhostColors", function() { return getButtonGhostColors; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getButtonGhostHoverColors", function() { return getButtonGhostHoverColors; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getButtonCursor", function() { return getButtonCursor; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getButtonSize", function() { return getButtonSize; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTagSize", function() { return getTagSize; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getButtonDripColor", function() { return getButtonDripColor; }); /* harmony import */ var _utils_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13); function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } 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; } var getButtonColors = function getButtonColors(palette, props, isTag) { var variant = props.variant, color = props.color, disabled = props.disabled; var disabledCategory = { solid: { bg: palette.cNeutral2, border: palette.cNeutral2, color: palette.cNeutral4 }, line: { bg: palette.cNeutral2, border: palette.cNeutral3, color: palette.cNeutral4 }, text: { bg: 'transparent', border: 'transparent', color: palette.cNeutral4 } }; var category = { solid: { "default": { "default": { bg: palette.cNeutral0, border: palette.cNeutral0, color: palette.cNeutral7 }, hover: { bg: palette.cNeutral2, border: palette.cNeutral2, color: palette.cNeutral7 }, active: { bg: palette.cNeutral5, border: palette.cNeutral5, color: palette.cNeutral7 } }, primary: { "default": { bg: palette.cTheme5, border: palette.cTheme5, color: palette.cNeutral8 }, hover: { bg: palette.cTheme6, border: palette.cTheme6, color: palette.cNeutral8 }, active: { bg: palette.cTheme7, border: palette.cTheme7, color: palette.cNeutral8 } }, secondary: { "default": { bg: palette.cNeutral7, border: palette.cNeutral7, color: palette.cNeutral8 }, hover: { bg: palette.cNeutral7, border: palette.cNeutral7, color: palette.cNeutral8 }, active: { bg: palette.cNeutral7, border: palette.cNeutral7, color: palette.cNeutral8 } }, success: { "default": { bg: palette.success, border: palette.success, color: palette.cNeutral8 }, hover: { bg: palette.successDark, border: palette.successDark, color: palette.cNeutral8 }, active: { bg: palette.successDark, border: palette.successDark, color: palette.cNeutral8 } }, warning: { "default": { bg: palette.warning, border: palette.warning, color: palette.cNeutral8 }, hover: { bg: palette.warningDark, border: palette.warningDark, color: palette.cNeutral8 }, active: { bg: palette.warningDark, border: palette.warningDark, color: palette.cNeutral8 } }, error: { "default": { bg: palette.error, border: palette.error, color: palette.cNeutral8 }, hover: { bg: palette.errorDark, border: palette.errorDark, color: palette.cNeutral8 }, active: { bg: palette.errorDark, border: palette.errorDark, color: palette.cNeutral8 } }, disabled: { "default": disabledCategory.solid, hover: disabledCategory.solid, active: disabledCategory.solid } }, line: { "default": { "default": { bg: palette.cNeutral8, border: palette.cNeutral2, color: palette.cNeutral6 }, hover: { bg: palette.cNeutral8, border: palette.cNeutral4, color: palette.cNeutral6 }, active: { bg: palette.cNeutral8, border: palette.cNeutral5, color: palette.cNeutral6 } }, primary: { "default": { bg: palette.cNeutral8, border: palette.cTheme5, color: palette.cTheme5 }, hover: { bg: palette.cNeutral8, border: palette.cTheme6, color: palette.cTheme6 }, active: { bg: palette.cNeutral8, border: palette.cTheme7, color: palette.cTheme7 } }, secondary: { "default": { bg: palette.cNeutral8, border: palette.cNeutral7, color: palette.cNeutral7 }, hover: { bg: palette.cNeutral8, border: palette.cNeutral7, color: palette.cNeutral7 }, active: { bg: palette.cNeutral8, border: palette.cNeutral7, color: palette.cNeutral7 } }, success: { "default": { bg: palette.cNeutral8, border: palette.success, color: palette.success }, hover: { bg: palette.cNeutral8, border: palette.successDark, color: palette.successDark }, active: { bg: palette.cNeutral8, border: palette.successDark, color: palette.successDark } }, warning: { "default": { bg: palette.cNeutral8, border: palette.warning, color: palette.warning }, hover: { bg: palette.cNeutral8, border: palette.warningDark, color: palette.warningDark }, active: { bg: palette.cNeutral8, border: palette.warningDark, color: palette.warningDark } }, error: { "default": { bg: palette.cNeutral8, border: palette.error, color: palette.error }, hover: { bg: palette.cNeutral8, border: palette.errorDark, color: palette.errorDark }, active: { bg: palette.cNeutral8, border: palette.errorDark, color: palette.errorDark } }, disabled: { "default": disabledCategory.line, hover: disabledCategory.line, active: disabledCategory.line } }, text: { "default": { "default": { bg: 'transparent', border: 'transparent', color: palette.cNeutral6 }, hover: { bg: palette.cNeutral0, border: 'transparent', color: palette.cNeutral6 }, active: { bg: palette.cNeutral2, border: 'transparent', color: palette.cNeutral6 } }, primary: { "default": { bg: 'transparent', border: 'transparent', color: palette.cTheme5 }, hover: { bg: palette.cTheme0, border: 'transparent', color: palette.cTheme6 }, active: { bg: palette.cTheme2, border: 'transparent', color: palette.cTheme7 } }, secondary: { "default": { bg: 'transparent', border: 'transparent', color: palette.cTheme4 }, hover: { bg: palette.cTheme0, border: 'transparent', color: palette.cTheme4 }, active: { bg: palette.cTheme1, border: 'transparent', color: palette.cTheme4 } }, success: { "default": { bg: 'transparent', border: 'transparent', color: palette.success }, hover: { bg: palette.successLight, border: 'transparent', color: palette.successDark }, active: { bg: palette.successLight, border: 'transparent', color: palette.successDark } }, warning: { "default": { bg: 'transparent', border: 'transparent', color: palette.warning }, hover: { bg: palette.warningLight, border: 'transparent', color: palette.warningDark }, active: { bg: palette.warningLight, border: 'transparent', color: palette.warningDark } }, error: { "default": { bg: 'transparent', border: 'transparent', color: palette.error }, hover: { bg: palette.errorLight, border: 'transparent', color: palette.errorDark }, active: { bg: palette.errorLight, border: 'transparent', color: palette.errorDark } }, disabled: { "default": disabledCategory.text, hover: disabledCategory.text, active: disabledCategory.text } } }; var tagCategory = { solid: _objectSpread({}, category.solid), line: _objectSpread(_objectSpread({}, category.line), {}, { "default": { "default": { bg: palette.cNeutral8, border: palette.cNeutral2, color: palette.cNeutral6 }, hover: { bg: palette.cNeutral8, border: palette.cTheme5, color: palette.cTheme5 }, active: { bg: palette.cNeutral8, border: palette.cTheme7, color: palette.cTheme7 } } }), text: _objectSpread({}, category.text) }; var result; try { if (isTag) result = tagCategory[variant][color];else result = category[variant][color]; if (disabled) { result = category[variant].disabled; } if (!result) { throw new Error('no match color'); } } catch (e) { // if no match variant or color, return default button style result = category.line["default"]; } return result; }; var getButtonGhostColors = function getButtonGhostColors(palette, color) { var colors = { secondary: { bg: palette.cNeutral8, border: palette.cNeutral7, color: palette.cNeutral7 }, success: { bg: palette.cNeutral8, border: palette.success, color: palette.success }, warning: { bg: palette.cNeutral8, border: palette.warning, color: palette.warning }, error: { bg: palette.cNeutral8, border: palette.error, color: palette.error } }; return colors[color] || null; }; var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, color) { var colors = { secondary: { bg: palette.cNeutral7, border: palette.cNeutral8, color: palette.cNeutral8 }, success: { bg: palette.success, border: palette.cNeutral8, color: palette.cNeutral8 }, warning: { bg: palette.warning, border: palette.cNeutral8, color: palette.cNeutral8 }, error: { bg: palette.error, border: palette.cNeutral8, color: palette.cNeutral8 } }; var withoutLightType = color.replace('-light', ''); return colors[withoutLightType] || null; }; var getButtonCursor = function getButtonCursor(disabled, loading) { if (disabled) return { cursor: 'not-allowed', events: 'auto' }; if (loading) return { cursor: 'default', events: 'none' }; return { cursor: 'pointer', events: 'auto' }; }; var getButtonSize = function getButtonSize() { var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'medium'; var auto = arguments.length > 1 ? arguments[1] : undefined; var defaultLayout = { height: '2.8571rem', width: 'auto', padding: '1.375rem', fontSize: '1rem', minWidth: '10rem' }; var autoPaddings = { medium: '1.25rem', mini: '0.625rem', small: '0.9375rem', large: '1.5625rem' }; var layouts = { mini: { height: '1.5rem', width: 'initial', padding: '1.375rem', fontSize: '.75rem', minWidth: '5.25rem' }, small: { height: '2.2857rem', width: 'initial', padding: '1.25rem', fontSize: '0.8571rem', minWidth: '7.7143rem' }, medium: defaultLayout, large: { height: '3.4286rem', width: 'initial', padding: '1.875rem', fontSize: '1.1429rem', minWidth: '11.1429rem' } }; if (auto) return _objectSpread(_objectSpread({}, layouts[size] || defaultLayout), {}, { padding: autoPaddings[size] || autoPaddings.medium, minWidth: 'min-content', width: 'auto' }); return layouts[size] || defaultLayout; }; var getTagSize = function getTagSize() { var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'medium'; var defaultLayout = { height: '2.2857rem', width: 'auto', padding: '1.7143rem', fontSize: '1rem', minWidth: '2.2857rem' }; var layouts = { small: { height: '2rem', width: 'initial', padding: '1.1429rem', fontSize: '0.8571rem', minWidth: '3.7143rem' }, medium: defaultLayout, large: { height: '2.8571rem', width: 'initial', padding: '1.7143rem', fontSize: '1rem', minWidth: '2.8571rem' } }; return layouts[size] || defaultLayout; }; var getButtonDripColor = function getButtonDripColor(palette, props) { var color = props.color; var isLightHover = color.endsWith('light'); var hoverColors = getButtonColors(palette, props, false).hover; return isLightHover ? Object(_utils_color__WEBPACK_IMPORTED_MODULE_0__["addColorAlpha"])(hoverColors.bg, 0.65) : Object(_utils_color__WEBPACK_IMPORTED_MODULE_0__["addColorAlpha"])(palette.accents_2, 0.65); }; /***/ }), /* 66 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _button_dropdown__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(67); /* harmony import */ var _button_dropdown_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(70); _button_dropdown__WEBPACK_IMPORTED_MODULE_0__["default"].Item = _button_dropdown_item__WEBPACK_IMPORTED_MODULE_1__["default"]; /* harmony default export */ __webpack_exports__["default"] = (_button_dropdown__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 67 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var styled_jsx_style__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2); /* harmony import */ var styled_jsx_style__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_jsx_style__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _styles_use_theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5); /* harmony import */ var _utils_use_click_away__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(28); /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(68); /* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(69); /* harmony import */ var _button_dropdown_item__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(70); /* harmony import */ var _button_dropdown_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(71); /* harmony import */ var _utils_collections__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(27); /* harmony import */ var _button_styles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(65); function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } 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 defaultProps = { type: 'default', size: 'medium', auto: false, loading: false, disabled: false, className: '' }; var stopPropagation = function stopPropagation(event) { event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); }; var ButtonDropdown = function ButtonDropdown(_ref) { var children = _ref.children, type = _ref.type, size = _ref.size, auto = _ref.auto, className = _ref.className, disabled = _ref.disabled, loading = _ref.loading, props = _objectWithoutProperties(_ref, ["children", "type", "size", "auto", "className", "disabled", "loading"]); var ref = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(null); var theme = Object(_styles_use_theme__WEBPACK_IMPORTED_MODULE_2__["default"])(); var colors = Object(_styles__WEBPACK_IMPORTED_MODULE_4__["getColor"])(theme.palette, type); var sizes = Object(_button_styles__WEBPACK_IMPORTED_MODULE_9__["getButtonSize"])(size, auto); var itemChildren = Object(_utils_collections__WEBPACK_IMPORTED_MO