\n \n Full setup docs \n Network and storage requirements \n Data security
\n )\n}\n\nexport const OnPremSetupSidebar = ({ email }) => {\n return (\n 📙 Need help?
\n Deploying on complex infrastructure?
\n \n Book a call with a Retool engineer\n \n \n \n \n <img className=\"mr8 mb4\" src={ssopSidebarLogo} />\n Self-Hosted Portal\n \n \n \n How to install\n \n \n Plans and Billing\n \n\n
\n )\n}\n\nconst RetoolEmbeddedApp = () => {\n // App lives here: https://docsdemos.retool.com/apps/058ae38c-fe9e-11ed-8ff3-9ba00f079759/Deployment%20Docs/Deployment%20Methods%20Grid\n const publicAppLink =\n 'https://docsdemos.retool.com/embedded/public/d7ecb122-9de6-41d4-ae05-378ee240ccd2?_hideNav=true&embed=true'\n return (\n \n \n \n
\n \n \n Book a call \n
\n \n
\n \n
\n )\n}\n\nconst OnPremSetupContent = (props) => {\n return (\n \n
\n )\n}\n\nconst OnPremSetupPage = (props) => {\n return (\n \n \n Get started with Retool self-hosted for free \n \n \n \n Setup a trial of self-hosted Retool on a cloud service or locally to use Retool for free for 14 days. After\n your trial, you can choose to use our Free, Team, or Enterprise plans based on your team’s needs.\n \n \n
\n \n
\n )\n}\n\nexport default OnPremSetupPage\n","// Copied from design-system/Tooltip in retool_development\nimport React from 'react'\nimport classNames from 'classnames'\nimport { Tooltip as AntTooltip } from 'antd'\nimport 'antd/lib/tooltip/style/index'\nimport './Tooltip.scss'\n\nconst Tooltip = (props) => {\n return \n
\n */\n // element.offsetParent does the right thing in ie7 and below. Return parent with layout!\n // In other browsers it only includes elements with position absolute, relative or\n // fixed, not elements with overflow set to auto or scroll.\n // if (UA.ie && ieMode < 8) {\n // return element.offsetParent;\n // }\n // 统一的 offsetParent 方法\n\n\n var doc = utils.getDocument(element);\n var body = doc.body;\n var parent;\n var positionStyle = utils.css(element, 'position');\n var skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';\n\n if (!skipStatic) {\n return element.nodeName.toLowerCase() === 'html' ? null : getParent(element);\n }\n\n for (parent = getParent(element); parent && parent !== body && parent.nodeType !== 9; parent = getParent(parent)) {\n positionStyle = utils.css(parent, 'position');\n\n if (positionStyle !== 'static') {\n return parent;\n }\n }\n\n return null;\n}\n\nvar getParent$1 = utils.getParent;\n\nfunction isAncestorFixed(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return false;\n }\n\n var doc = utils.getDocument(element);\n var body = doc.body;\n var parent = null;\n\n for (parent = getParent$1(element); // 修复元素位于 document.documentElement 下导致崩溃问题\n parent && parent !== body && parent !== doc; parent = getParent$1(parent)) {\n var positionStyle = utils.css(parent, 'position');\n\n if (positionStyle === 'fixed') {\n return true;\n }\n }\n\n return false;\n}\n/**\n * 获得元素的显示部分的区域\n */\n\n\nfunction getVisibleRectForElement(element, alwaysByViewport) {\n var visibleRect = {\n left: 0,\n right: Infinity,\n top: 0,\n bottom: Infinity\n };\n var el = getOffsetParent(element);\n var doc = utils.getDocument(element);\n var win = doc.defaultView || doc.parentWindow;\n var body = doc.body;\n var documentElement = doc.documentElement; // Determine the size of the visible rect by climbing the dom accounting for\n // all scrollable containers.\n\n while (el) {\n // clientWidth is zero for inline block elements in ie.\n if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) && // body may have overflow set on it, yet we still get the entire\n // viewport. In some browsers, el.offsetParent may be\n // document.documentElement, so check for that too.\n el !== body && el !== documentElement && utils.css(el, 'overflow') !== 'visible') {\n var pos = utils.offset(el); // add border\n\n pos.left += el.clientLeft;\n pos.top += el.clientTop;\n visibleRect.top = Math.max(visibleRect.top, pos.top);\n visibleRect.right = Math.min(visibleRect.right, // consider area without scrollBar\n pos.left + el.clientWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, pos.top + el.clientHeight);\n visibleRect.left = Math.max(visibleRect.left, pos.left);\n } else if (el === body || el === documentElement) {\n break;\n }\n\n el = getOffsetParent(el);\n } // Set element position to fixed\n // make sure absolute element itself don't affect it's visible area\n // https://github.com/ant-design/ant-design/issues/7601\n\n\n var originalPosition = null;\n\n if (!utils.isWindow(element) && element.nodeType !== 9) {\n originalPosition = element.style.position;\n var position = utils.css(element, 'position');\n\n if (position === 'absolute') {\n element.style.position = 'fixed';\n }\n }\n\n var scrollX = utils.getWindowScrollLeft(win);\n var scrollY = utils.getWindowScrollTop(win);\n var viewportWidth = utils.viewportWidth(win);\n var viewportHeight = utils.viewportHeight(win);\n var documentWidth = documentElement.scrollWidth;\n var documentHeight = documentElement.scrollHeight; // scrollXXX on html is sync with body which means overflow: hidden on body gets wrong scrollXXX.\n // We should cut this ourself.\n\n var bodyStyle = window.getComputedStyle(body);\n\n if (bodyStyle.overflowX === 'hidden') {\n documentWidth = win.innerWidth;\n }\n\n if (bodyStyle.overflowY === 'hidden') {\n documentHeight = win.innerHeight;\n } // Reset element position after calculate the visible area\n\n\n if (element.style) {\n element.style.position = originalPosition;\n }\n\n if (alwaysByViewport || isAncestorFixed(element)) {\n // Clip by viewport's size.\n visibleRect.left = Math.max(visibleRect.left, scrollX);\n visibleRect.top = Math.max(visibleRect.top, scrollY);\n visibleRect.right = Math.min(visibleRect.right, scrollX + viewportWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + viewportHeight);\n } else {\n // Clip by document's size.\n var maxVisibleWidth = Math.max(documentWidth, scrollX + viewportWidth);\n visibleRect.right = Math.min(visibleRect.right, maxVisibleWidth);\n var maxVisibleHeight = Math.max(documentHeight, scrollY + viewportHeight);\n visibleRect.bottom = Math.min(visibleRect.bottom, maxVisibleHeight);\n }\n\n return visibleRect.top >= 0 && visibleRect.left >= 0 && visibleRect.bottom > visibleRect.top && visibleRect.right > visibleRect.left ? visibleRect : null;\n}\n\nfunction adjustForViewport(elFuturePos, elRegion, visibleRect, overflow) {\n var pos = utils.clone(elFuturePos);\n var size = {\n width: elRegion.width,\n height: elRegion.height\n };\n\n if (overflow.adjustX && pos.left < visibleRect.left) {\n pos.left = visibleRect.left;\n } // Left edge inside and right edge outside viewport, try to resize it.\n\n\n if (overflow.resizeWidth && pos.left >= visibleRect.left && pos.left + size.width > visibleRect.right) {\n size.width -= pos.left + size.width - visibleRect.right;\n } // Right edge outside viewport, try to move it.\n\n\n if (overflow.adjustX && pos.left + size.width > visibleRect.right) {\n // 保证左边界和可视区域左边界对齐\n pos.left = Math.max(visibleRect.right - size.width, visibleRect.left);\n } // Top edge outside viewport, try to move it.\n\n\n if (overflow.adjustY && pos.top < visibleRect.top) {\n pos.top = visibleRect.top;\n } // Top edge inside and bottom edge outside viewport, try to resize it.\n\n\n if (overflow.resizeHeight && pos.top >= visibleRect.top && pos.top + size.height > visibleRect.bottom) {\n size.height -= pos.top + size.height - visibleRect.bottom;\n } // Bottom edge outside viewport, try to move it.\n\n\n if (overflow.adjustY && pos.top + size.height > visibleRect.bottom) {\n // 保证上边界和可视区域上边界对齐\n pos.top = Math.max(visibleRect.bottom - size.height, visibleRect.top);\n }\n\n return utils.mix(pos, size);\n}\n\nfunction getRegion(node) {\n var offset;\n var w;\n var h;\n\n if (!utils.isWindow(node) && node.nodeType !== 9) {\n offset = utils.offset(node);\n w = utils.outerWidth(node);\n h = utils.outerHeight(node);\n } else {\n var win = utils.getWindow(node);\n offset = {\n left: utils.getWindowScrollLeft(win),\n top: utils.getWindowScrollTop(win)\n };\n w = utils.viewportWidth(win);\n h = utils.viewportHeight(win);\n }\n\n offset.width = w;\n offset.height = h;\n return offset;\n}\n/**\n * 获取 node 上的 align 对齐点 相对于页面的坐标\n */\n\n\nfunction getAlignOffset(region, align) {\n var V = align.charAt(0);\n var H = align.charAt(1);\n var w = region.width;\n var h = region.height;\n var x = region.left;\n var y = region.top;\n\n if (V === 'c') {\n y += h / 2;\n } else if (V === 'b') {\n y += h;\n }\n\n if (H === 'c') {\n x += w / 2;\n } else if (H === 'r') {\n x += w;\n }\n\n return {\n left: x,\n top: y\n };\n}\n\nfunction getElFuturePos(elRegion, refNodeRegion, points, offset, targetOffset) {\n var p1 = getAlignOffset(refNodeRegion, points[1]);\n var p2 = getAlignOffset(elRegion, points[0]);\n var diff = [p2.left - p1.left, p2.top - p1.top];\n return {\n left: Math.round(elRegion.left - diff[0] + offset[0] - targetOffset[0]),\n top: Math.round(elRegion.top - diff[1] + offset[1] - targetOffset[1])\n };\n}\n/**\n * align dom node flexibly\n * @author yiminghe@gmail.com\n */\n\n\nfunction isFailX(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.left < visibleRect.left || elFuturePos.left + elRegion.width > visibleRect.right;\n}\n\nfunction isFailY(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.top < visibleRect.top || elFuturePos.top + elRegion.height > visibleRect.bottom;\n}\n\nfunction isCompleteFailX(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.left > visibleRect.right || elFuturePos.left + elRegion.width < visibleRect.left;\n}\n\nfunction isCompleteFailY(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.top > visibleRect.bottom || elFuturePos.top + elRegion.height < visibleRect.top;\n}\n\nfunction flip(points, reg, map) {\n var ret = [];\n utils.each(points, function (p) {\n ret.push(p.replace(reg, function (m) {\n return map[m];\n }));\n });\n return ret;\n}\n\nfunction flipOffset(offset, index) {\n offset[index] = -offset[index];\n return offset;\n}\n\nfunction convertOffset(str, offsetLen) {\n var n;\n\n if (/%$/.test(str)) {\n n = parseInt(str.substring(0, str.length - 1), 10) / 100 * offsetLen;\n } else {\n n = parseInt(str, 10);\n }\n\n return n || 0;\n}\n\nfunction normalizeOffset(offset, el) {\n offset[0] = convertOffset(offset[0], el.width);\n offset[1] = convertOffset(offset[1], el.height);\n}\n/**\n * @param el\n * @param tgtRegion 参照节点所占的区域: { left, top, width, height }\n * @param align\n */\n\n\nfunction doAlign(el, tgtRegion, align, isTgtRegionVisible) {\n var points = align.points;\n var offset = align.offset || [0, 0];\n var targetOffset = align.targetOffset || [0, 0];\n var overflow = align.overflow;\n var source = align.source || el;\n offset = [].concat(offset);\n targetOffset = [].concat(targetOffset);\n overflow = overflow || {};\n var newOverflowCfg = {};\n var fail = 0;\n var alwaysByViewport = !!(overflow && overflow.alwaysByViewport); // 当前节点可以被放置的显示区域\n\n var visibleRect = getVisibleRectForElement(source, alwaysByViewport); // 当前节点所占的区域, left/top/width/height\n\n var elRegion = getRegion(source); // 将 offset 转换成数值，支持百分比\n\n normalizeOffset(offset, elRegion);\n normalizeOffset(targetOffset, tgtRegion); // 当前节点将要被放置的位置\n\n var elFuturePos = getElFuturePos(elRegion, tgtRegion, points, offset, targetOffset); // 当前节点将要所处的区域\n\n var newElRegion = utils.merge(elRegion, elFuturePos); // 如果可视区域不能完全放置当前节点时允许调整\n\n if (visibleRect && (overflow.adjustX || overflow.adjustY) && isTgtRegionVisible) {\n if (overflow.adjustX) {\n // 如果横向不能放下\n if (isFailX(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n var newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l'\n }); // 偏移量也反下\n\n var newOffset = flipOffset(offset, 0);\n var newTargetOffset = flipOffset(targetOffset, 0);\n var newElFuturePos = getElFuturePos(elRegion, tgtRegion, newPoints, newOffset, newTargetOffset);\n\n if (!isCompleteFailX(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n\n if (overflow.adjustY) {\n // 如果纵向不能放下\n if (isFailY(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n var _newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't'\n }); // 偏移量也反下\n\n\n var _newOffset = flipOffset(offset, 1);\n\n var _newTargetOffset = flipOffset(targetOffset, 1);\n\n var _newElFuturePos = getElFuturePos(elRegion, tgtRegion, _newPoints, _newOffset, _newTargetOffset);\n\n if (!isCompleteFailY(_newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = _newPoints;\n offset = _newOffset;\n targetOffset = _newTargetOffset;\n }\n }\n } // 如果失败，重新计算当前节点将要被放置的位置\n\n\n if (fail) {\n elFuturePos = getElFuturePos(elRegion, tgtRegion, points, offset, targetOffset);\n utils.mix(newElRegion, elFuturePos);\n }\n\n var isStillFailX = isFailX(elFuturePos, elRegion, visibleRect);\n var isStillFailY = isFailY(elFuturePos, elRegion, visibleRect); // 检查反下后的位置是否可以放下了，如果仍然放不下：\n // 1. 复原修改过的定位参数\n\n if (isStillFailX || isStillFailY) {\n var _newPoints2 = points; // 重置对应部分的翻转逻辑\n\n if (isStillFailX) {\n _newPoints2 = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l'\n });\n }\n\n if (isStillFailY) {\n _newPoints2 = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't'\n });\n }\n\n points = _newPoints2;\n offset = align.offset || [0, 0];\n targetOffset = align.targetOffset || [0, 0];\n } // 2. 只有指定了可以调整当前方向才调整\n\n\n newOverflowCfg.adjustX = overflow.adjustX && isStillFailX;\n newOverflowCfg.adjustY = overflow.adjustY && isStillFailY; // 确实要调整，甚至可能会调整高度宽度\n\n if (newOverflowCfg.adjustX || newOverflowCfg.adjustY) {\n newElRegion = adjustForViewport(elFuturePos, elRegion, visibleRect, newOverflowCfg);\n }\n } // need judge to in case set fixed with in css on height auto element\n\n\n if (newElRegion.width !== elRegion.width) {\n utils.css(source, 'width', utils.width(source) + newElRegion.width - elRegion.width);\n }\n\n if (newElRegion.height !== elRegion.height) {\n utils.css(source, 'height', utils.height(source) + newElRegion.height - elRegion.height);\n } // https://github.com/kissyteam/kissy/issues/190\n // 相对于屏幕位置没变，而 left/top 变了\n // 例如 \n 元素 6 高 100px 宽 50px
\n
\n \n
\n {profilePhoto}\n
\n )\n\n const menu = (\n \n )\n\n return (\n \n
\n \n {this.props.userName || this.props.userEmail}\n
\n Admin\n \n {\n window.location.href = '/'\n }}\n >\n \n
\n \n \n \n {profilePhoto}\n \n \n \n
\n \n )\n }\n}\n\nconst ProfilePhoto = (props) => {\n if (props.profilePhotoURL) {\n return \n
\n )\n}\n\nTopBar.propTypes = {\n userEmail: PropTypes.string,\n}\n\nexport default TopBar\n","import React, { useState } from \"react\"\nimport ls from 'local-storage'\nimport '../common.scss'\nimport './TrialBanner.scss'\nimport classnames from 'classnames'\nimport moment from \"moment\"\nimport { CloseOutlined } from '@ant-design/icons'\nimport { Button } from \"antd\"\n\nconst ONE_DAY = 1000 * 60 * 60 * 24\n\nconst TrialBanner = (props) => {\n let [lastDismissTime, setLastDismissTime] = useState(ls.get('trialBannerLastDismissTime'))\n\n const onDismiss = () => {\n const lastDismissTime = new Date().getTime()\n setLastDismissTime(lastDismissTime)\n ls.set('trialBannerLastDismissTime', lastDismissTime)\n }\n \n // if trialexpiring prop is not defined, it doesn't exist on DB which means this is not a trial user.\n let isDismissed = lastDismissTime && new Date().getTime() - parseInt(lastDismissTime, 10) < ONE_DAY\n let isTrialExpired = props.trialExpiring ? moment(props.trialExpiring) < moment() : false \n let isSubscriptionActive = props.subscriptionStatus === 'active'\n let isSubscriptionTrial = props.subscriptionStatus === 'trialing'\n let isSubscriptionCanceled = props.subscriptionStatus === 'canceled'\n let showTrialBanner = !isDismissed && !isSubscriptionActive && (isSubscriptionTrial || isTrialExpired || isSubscriptionCanceled)\n \n const upgradeCTAText = isTrialExpired || isSubscriptionTrial ?\n 'Choose a plan to continue' : 'Upgrade now'\n const bannerMessage = isTrialExpired ?\n 'Your trial has expired. Your plan has been automatically downgraded to free.' :\n isSubscriptionTrial ?\n `Your trial is ending ${moment(props.trialExpiring).fromNow()}` :\n 'Your plan has ended'\n\n return (\n showTrialBanner && \n {props.userEmail ? props.userEmail[0].toUpperCase() : ''}
\n \n {bannerMessage}\n \n
\n )\n}\n\nexport default TrialBanner","import React, { useState } from \"react\"\nimport '../common.scss'\nimport './HelpBubble.scss'\nimport './Dropdown.scss'\nimport { Dropdown, Menu } from \"antd\"\nimport { IconHelp } from \"./icons/iconHelp\"\nimport { IconHelpDocs } from \"./icons/IconHelpDocs\"\nimport { IconHelpCommunity } from \"./icons/IconHelpCommunity\"\n\nconst { Item } = Menu\n\nconst HelpBubble = (props) => {\n let [isMenuVisible, setIsMenuVisible] = useState(false)\n const handleVisibilityChange = (isVisible) => {\n setIsMenuVisible(isVisible)\n }\n\n const hideMenu = () => {\n setIsMenuVisible(false)\n }\n\n return (\n \n
\n \n )\n}\n\nconst HelpBubbleMenu = (props) => {\n return (\n \n )\n}\n\nexport default HelpBubble","import { inputToRGB, rgbToHex, rgbToHsv } from '@ctrl/tinycolor';\nvar hueStep = 2; // 色相阶梯\n\nvar saturationStep = 0.16; // 饱和度阶梯，浅色部分\n\nvar saturationStep2 = 0.05; // 饱和度阶梯，深色部分\n\nvar brightnessStep1 = 0.05; // 亮度阶梯，浅色部分\n\nvar brightnessStep2 = 0.15; // 亮度阶梯，深色部分\n\nvar lightColorCount = 5; // 浅色数量，主色上\n\nvar darkColorCount = 4; // 深色数量，主色下\n// 暗色主题颜色映射关系表\n\nvar darkColorMap = [{\n index: 7,\n opacity: 0.15\n}, {\n index: 6,\n opacity: 0.25\n}, {\n index: 5,\n opacity: 0.3\n}, {\n index: 5,\n opacity: 0.45\n}, {\n index: 5,\n opacity: 0.65\n}, {\n index: 5,\n opacity: 0.85\n}, {\n index: 4,\n opacity: 0.9\n}, {\n index: 3,\n opacity: 0.95\n}, {\n index: 2,\n opacity: 0.97\n}, {\n index: 1,\n opacity: 0.98\n}]; // Wrapper function ported from TinyColor.prototype.toHsv\n// Keep it here because of `hsv.h * 360`\n\nfunction toHsv(_ref) {\n var r = _ref.r,\n g = _ref.g,\n b = _ref.b;\n var hsv = rgbToHsv(r, g, b);\n return {\n h: hsv.h * 360,\n s: hsv.s,\n v: hsv.v\n };\n} // Wrapper function ported from TinyColor.prototype.toHexString\n// Keep it here because of the prefix `#`\n\n\nfunction toHex(_ref2) {\n var r = _ref2.r,\n g = _ref2.g,\n b = _ref2.b;\n return \"#\".concat(rgbToHex(r, g, b, false));\n} // Wrapper function ported from TinyColor.prototype.mix, not treeshakable.\n// Amount in range [0, 1]\n// Assume color1 & color2 has no alpha, since the following src code did so.\n\n\nfunction mix(rgb1, rgb2, amount) {\n var p = amount / 100;\n var rgb = {\n r: (rgb2.r - rgb1.r) * p + rgb1.r,\n g: (rgb2.g - rgb1.g) * p + rgb1.g,\n b: (rgb2.b - rgb1.b) * p + rgb1.b\n };\n return rgb;\n}\n\nfunction getHue(hsv, i, light) {\n var hue; // 根据色相不同，色相转向不同\n\n if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {\n hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;\n } else {\n hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;\n }\n\n if (hue < 0) {\n hue += 360;\n } else if (hue >= 360) {\n hue -= 360;\n }\n\n return hue;\n}\n\nfunction getSaturation(hsv, i, light) {\n // grey color don't change saturation\n if (hsv.h === 0 && hsv.s === 0) {\n return hsv.s;\n }\n\n var saturation;\n\n if (light) {\n saturation = hsv.s - saturationStep * i;\n } else if (i === darkColorCount) {\n saturation = hsv.s + saturationStep;\n } else {\n saturation = hsv.s + saturationStep2 * i;\n } // 边界值修正\n\n\n if (saturation > 1) {\n saturation = 1;\n } // 第一格的 s 限制在 0.06-0.1 之间\n\n\n if (light && i === lightColorCount && saturation > 0.1) {\n saturation = 0.1;\n }\n\n if (saturation < 0.06) {\n saturation = 0.06;\n }\n\n return Number(saturation.toFixed(2));\n}\n\nfunction getValue(hsv, i, light) {\n var value;\n\n if (light) {\n value = hsv.v + brightnessStep1 * i;\n } else {\n value = hsv.v - brightnessStep2 * i;\n }\n\n if (value > 1) {\n value = 1;\n }\n\n return Number(value.toFixed(2));\n}\n\nfunction generate(color) {\n var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var patterns = [];\n var pColor = inputToRGB(color);\n\n for (var i = lightColorCount; i > 0; i -= 1) {\n var hsv = toHsv(pColor);\n var colorString = toHex(inputToRGB({\n h: getHue(hsv, i, true),\n s: getSaturation(hsv, i, true),\n v: getValue(hsv, i, true)\n }));\n patterns.push(colorString);\n }\n\n patterns.push(toHex(pColor));\n\n for (var _i = 1; _i <= darkColorCount; _i += 1) {\n var _hsv = toHsv(pColor);\n\n var _colorString = toHex(inputToRGB({\n h: getHue(_hsv, _i),\n s: getSaturation(_hsv, _i),\n v: getValue(_hsv, _i)\n }));\n\n patterns.push(_colorString);\n } // dark theme patterns\n\n\n if (opts.theme === 'dark') {\n return darkColorMap.map(function (_ref3) {\n var index = _ref3.index,\n opacity = _ref3.opacity;\n var darkColorString = toHex(mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100));\n return darkColorString;\n });\n }\n\n return patterns;\n}\n\nvar presetPrimaryColors = {\n red: '#F5222D',\n volcano: '#FA541C',\n orange: '#FA8C16',\n gold: '#FAAD14',\n yellow: '#FADB14',\n lime: '#A0D911',\n green: '#52C41A',\n cyan: '#13C2C2',\n blue: '#1890FF',\n geekblue: '#2F54EB',\n purple: '#722ED1',\n magenta: '#EB2F96',\n grey: '#666666'\n};\nvar presetPalettes = {};\nvar presetDarkPalettes = {};\nObject.keys(presetPrimaryColors).forEach(function (key) {\n presetPalettes[key] = generate(presetPrimaryColors[key]);\n presetPalettes[key].primary = presetPalettes[key][5]; // dark presetPalettes\n\n presetDarkPalettes[key] = generate(presetPrimaryColors[key], {\n theme: 'dark',\n backgroundColor: '#141414'\n });\n presetDarkPalettes[key].primary = presetDarkPalettes[key][5];\n});\nvar red = presetPalettes.red;\nvar volcano = presetPalettes.volcano;\nvar gold = presetPalettes.gold;\nvar orange = presetPalettes.orange;\nvar yellow = presetPalettes.yellow;\nvar lime = presetPalettes.lime;\nvar green = presetPalettes.green;\nvar cyan = presetPalettes.cyan;\nvar blue = presetPalettes.blue;\nvar geekblue = presetPalettes.geekblue;\nvar purple = presetPalettes.purple;\nvar magenta = presetPalettes.magenta;\nvar grey = presetPalettes.grey;\nexport { blue, cyan, geekblue, generate, gold, green, grey, lime, magenta, orange, presetDarkPalettes, presetPalettes, presetPrimaryColors, purple, red, volcano, yellow };","// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json\n\n/**\n * @hidden\n */\nexport var names = {\n aliceblue: '#f0f8ff',\n antiquewhite: '#faebd7',\n aqua: '#00ffff',\n aquamarine: '#7fffd4',\n azure: '#f0ffff',\n beige: '#f5f5dc',\n bisque: '#ffe4c4',\n black: '#000000',\n blanchedalmond: '#ffebcd',\n blue: '#0000ff',\n blueviolet: '#8a2be2',\n brown: '#a52a2a',\n burlywood: '#deb887',\n cadetblue: '#5f9ea0',\n chartreuse: '#7fff00',\n chocolate: '#d2691e',\n coral: '#ff7f50',\n cornflowerblue: '#6495ed',\n cornsilk: '#fff8dc',\n crimson: '#dc143c',\n cyan: '#00ffff',\n darkblue: '#00008b',\n darkcyan: '#008b8b',\n darkgoldenrod: '#b8860b',\n darkgray: '#a9a9a9',\n darkgreen: '#006400',\n darkgrey: '#a9a9a9',\n darkkhaki: '#bdb76b',\n darkmagenta: '#8b008b',\n darkolivegreen: '#556b2f',\n darkorange: '#ff8c00',\n darkorchid: '#9932cc',\n darkred: '#8b0000',\n darksalmon: '#e9967a',\n darkseagreen: '#8fbc8f',\n darkslateblue: '#483d8b',\n darkslategray: '#2f4f4f',\n darkslategrey: '#2f4f4f',\n darkturquoise: '#00ced1',\n darkviolet: '#9400d3',\n deeppink: '#ff1493',\n deepskyblue: '#00bfff',\n dimgray: '#696969',\n dimgrey: '#696969',\n dodgerblue: '#1e90ff',\n firebrick: '#b22222',\n floralwhite: '#fffaf0',\n forestgreen: '#228b22',\n fuchsia: '#ff00ff',\n gainsboro: '#dcdcdc',\n ghostwhite: '#f8f8ff',\n goldenrod: '#daa520',\n gold: '#ffd700',\n gray: '#808080',\n green: '#008000',\n greenyellow: '#adff2f',\n grey: '#808080',\n honeydew: '#f0fff0',\n hotpink: '#ff69b4',\n indianred: '#cd5c5c',\n indigo: '#4b0082',\n ivory: '#fffff0',\n khaki: '#f0e68c',\n lavenderblush: '#fff0f5',\n lavender: '#e6e6fa',\n lawngreen: '#7cfc00',\n lemonchiffon: '#fffacd',\n lightblue: '#add8e6',\n lightcoral: '#f08080',\n lightcyan: '#e0ffff',\n lightgoldenrodyellow: '#fafad2',\n lightgray: '#d3d3d3',\n lightgreen: '#90ee90',\n lightgrey: '#d3d3d3',\n lightpink: '#ffb6c1',\n lightsalmon: '#ffa07a',\n lightseagreen: '#20b2aa',\n lightskyblue: '#87cefa',\n lightslategray: '#778899',\n lightslategrey: '#778899',\n lightsteelblue: '#b0c4de',\n lightyellow: '#ffffe0',\n lime: '#00ff00',\n limegreen: '#32cd32',\n linen: '#faf0e6',\n magenta: '#ff00ff',\n maroon: '#800000',\n mediumaquamarine: '#66cdaa',\n mediumblue: '#0000cd',\n mediumorchid: '#ba55d3',\n mediumpurple: '#9370db',\n mediumseagreen: '#3cb371',\n mediumslateblue: '#7b68ee',\n mediumspringgreen: '#00fa9a',\n mediumturquoise: '#48d1cc',\n mediumvioletred: '#c71585',\n midnightblue: '#191970',\n mintcream: '#f5fffa',\n mistyrose: '#ffe4e1',\n moccasin: '#ffe4b5',\n navajowhite: '#ffdead',\n navy: '#000080',\n oldlace: '#fdf5e6',\n olive: '#808000',\n olivedrab: '#6b8e23',\n orange: '#ffa500',\n orangered: '#ff4500',\n orchid: '#da70d6',\n palegoldenrod: '#eee8aa',\n palegreen: '#98fb98',\n paleturquoise: '#afeeee',\n palevioletred: '#db7093',\n papayawhip: '#ffefd5',\n peachpuff: '#ffdab9',\n peru: '#cd853f',\n pink: '#ffc0cb',\n plum: '#dda0dd',\n powderblue: '#b0e0e6',\n purple: '#800080',\n rebeccapurple: '#663399',\n red: '#ff0000',\n rosybrown: '#bc8f8f',\n royalblue: '#4169e1',\n saddlebrown: '#8b4513',\n salmon: '#fa8072',\n sandybrown: '#f4a460',\n seagreen: '#2e8b57',\n seashell: '#fff5ee',\n sienna: '#a0522d',\n silver: '#c0c0c0',\n skyblue: '#87ceeb',\n slateblue: '#6a5acd',\n slategray: '#708090',\n slategrey: '#708090',\n snow: '#fffafa',\n springgreen: '#00ff7f',\n steelblue: '#4682b4',\n tan: '#d2b48c',\n teal: '#008080',\n thistle: '#d8bfd8',\n tomato: '#ff6347',\n turquoise: '#40e0d0',\n violet: '#ee82ee',\n wheat: '#f5deb3',\n white: '#ffffff',\n whitesmoke: '#f5f5f5',\n yellow: '#ffff00',\n yellowgreen: '#9acd32'\n};","import * as React from 'react';\nexport default function useEvent(callback) {\n var fnRef = React.useRef();\n fnRef.current = callback;\n var memoFn = React.useCallback(function () {\n var _fnRef$current;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return (_fnRef$current = fnRef.current) === null || _fnRef$current === void 0 ? void 0 : _fnRef$current.call.apply(_fnRef$current, [fnRef].concat(args));\n }, []);\n return memoFn;\n}","// This icon file is generated automatically.\nvar ExclamationCircleOutlined = {\n \"icon\": {\n \"tag\": \"svg\",\n \"attrs\": {\n \"viewBox\": \"64 64 896 896\",\n \"focusable\": \"false\"\n },\n \"children\": [{\n \"tag\": \"path\",\n \"attrs\": {\n \"d\": \"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z\"\n }\n }, {\n \"tag\": \"path\",\n \"attrs\": {\n \"d\": \"M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z\"\n }\n }]\n },\n \"name\": \"exclamation-circle\",\n \"theme\": \"outlined\"\n};\nexport default ExclamationCircleOutlined;","import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\"; // GENERATE BY ./scripts/generate.ts\n// DON NOT EDIT IT MANUALLY\n\nimport * as React from 'react';\nimport ExclamationCircleOutlinedSvg from \"@ant-design/icons-svg/es/asn/ExclamationCircleOutlined\";\nimport AntdIcon from '../components/AntdIcon';\n\nvar ExclamationCircleOutlined = function ExclamationCircleOutlined(props, ref) {\n return /*#__PURE__*/React.createElement(AntdIcon, _objectSpread(_objectSpread({}, props), {}, {\n ref: ref,\n icon: ExclamationCircleOutlinedSvg\n }));\n};\n\nExclamationCircleOutlined.displayName = 'ExclamationCircleOutlined';\nexport default /*#__PURE__*/React.forwardRef(ExclamationCircleOutlined);","// This icon file is generated automatically.\nvar LoadingOutlined = {\n \"icon\": {\n \"tag\": \"svg\",\n \"attrs\": {\n \"viewBox\": \"0 0 1024 1024\",\n \"focusable\": \"false\"\n },\n \"children\": [{\n \"tag\": \"path\",\n \"attrs\": {\n \"d\": \"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\"\n }\n }]\n },\n \"name\": \"loading\",\n \"theme\": \"outlined\"\n};\nexport default LoadingOutlined;","import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\"; // GENERATE BY ./scripts/generate.ts\n// DON NOT EDIT IT MANUALLY\n\nimport * as React from 'react';\nimport LoadingOutlinedSvg from \"@ant-design/icons-svg/es/asn/LoadingOutlined\";\nimport AntdIcon from '../components/AntdIcon';\n\nvar LoadingOutlined = function LoadingOutlined(props, ref) {\n return /*#__PURE__*/React.createElement(AntdIcon, _objectSpread(_objectSpread({}, props), {}, {\n ref: ref,\n icon: LoadingOutlinedSvg\n }));\n};\n\nLoadingOutlined.displayName = 'LoadingOutlined';\nexport default /*#__PURE__*/React.forwardRef(LoadingOutlined);","var baseIsNative = require('./_baseIsNative'),\n getValue = require('./_getValue');\n/**\n * Gets the native function at `key` of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {string} key The key of the method to get.\n * @returns {*} Returns the function if it's native, else `undefined`.\n */\n\n\nfunction getNative(object, key) {\n var value = getValue(object, key);\n return baseIsNative(value) ? value : undefined;\n}\n\nmodule.exports = getNative;","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { IconCopy } from './icons'\nimport { Typography, Button } from 'antd'\nimport { copyValueToClipboard } from './utils/copyToClipboard'\nconst { Title } = Typography\n\nimport './utils/Button.scss'\nimport './billing/Billing.scss'\nimport './common.scss'\n\nclass LicenseKey extends React.Component {\n render() {\n return \n \n Your license key \n \n\n
\n )\n}\n\nLicenseKey.propTypes = {\n licenseKey: PropTypes.string,\n}\nexport default LicenseKey\n","import * as React from 'react';\nimport warning from \"rc-util/es/warning\";\nexport var HOOK_MARK = 'RC_FORM_INTERNAL_HOOKS'; // eslint-disable-next-line @typescript-eslint/no-explicit-any\n\nvar warningFunc = function warningFunc() {\n warning(false, 'Can not find FormContext. Please make sure you wrap Field under Form.');\n};\n\nvar Context = /*#__PURE__*/React.createContext({\n getFieldValue: warningFunc,\n getFieldsValue: warningFunc,\n getFieldError: warningFunc,\n getFieldWarning: warningFunc,\n getFieldsError: warningFunc,\n isFieldsTouched: warningFunc,\n isFieldTouched: warningFunc,\n isFieldValidating: warningFunc,\n isFieldsValidating: warningFunc,\n resetFields: warningFunc,\n setFields: warningFunc,\n setFieldsValue: warningFunc,\n validateFields: warningFunc,\n submit: warningFunc,\n getInternalHooks: function getInternalHooks() {\n warningFunc();\n return {\n dispatch: warningFunc,\n initEntityValue: warningFunc,\n registerField: warningFunc,\n useSubscribe: warningFunc,\n setInitialValues: warningFunc,\n destroyForm: warningFunc,\n setCallbacks: warningFunc,\n registerWatch: warningFunc,\n getFields: warningFunc,\n setValidateMessages: warningFunc,\n setPreserve: warningFunc,\n getInitialValue: warningFunc\n };\n }\n});\nexport default Context;","export function toArray(value) {\n if (value === undefined || value === null) {\n return [];\n }\n\n return Array.isArray(value) ? value : [value];\n}","var typeTemplate = \"'${name}' is not a valid ${type}\";\nexport var defaultValidateMessages = {\n default: \"Validation error on field '${name}'\",\n required: \"'${name}' is required\",\n enum: \"'${name}' must be one of [${enum}]\",\n whitespace: \"'${name}' cannot be empty\",\n date: {\n format: \"'${name}' is invalid for format date\",\n parse: \"'${name}' could not be parsed as date\",\n invalid: \"'${name}' is invalid date\"\n },\n types: {\n string: typeTemplate,\n method: typeTemplate,\n array: typeTemplate,\n object: typeTemplate,\n number: typeTemplate,\n date: typeTemplate,\n boolean: typeTemplate,\n integer: typeTemplate,\n float: typeTemplate,\n regexp: typeTemplate,\n email: typeTemplate,\n url: typeTemplate,\n hex: typeTemplate\n },\n string: {\n len: \"'${name}' must be exactly ${len} characters\",\n min: \"'${name}' must be at least ${min} characters\",\n max: \"'${name}' cannot be longer than ${max} characters\",\n range: \"'${name}' must be between ${min} and ${max} characters\"\n },\n number: {\n len: \"'${name}' must equal ${len}\",\n min: \"'${name}' cannot be less than ${min}\",\n max: \"'${name}' cannot be greater than ${max}\",\n range: \"'${name}' must be between ${min} and ${max}\"\n },\n array: {\n len: \"'${name}' must be exactly ${len} in length\",\n min: \"'${name}' cannot be less than ${min} in length\",\n max: \"'${name}' cannot be greater than ${max} in length\",\n range: \"'${name}' must be between ${min} and ${max} in length\"\n },\n pattern: {\n mismatch: \"'${name}' does not match pattern ${pattern}\"\n }\n};","export default function get(entity, path) {\n var current = entity;\n\n for (var i = 0; i < path.length; i += 1) {\n if (current === null || current === undefined) {\n return undefined;\n }\n\n current = current[path[i]];\n }\n\n return current;\n}","import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _toArray from \"@babel/runtime/helpers/esm/toArray\";\nimport get from './get';\n\nfunction internalSet(entity, paths, value, removeIfUndefined) {\n if (!paths.length) {\n return value;\n }\n\n var _paths = _toArray(paths),\n path = _paths[0],\n restPath = _paths.slice(1);\n\n var clone;\n\n if (!entity && typeof path === 'number') {\n clone = [];\n } else if (Array.isArray(entity)) {\n clone = _toConsumableArray(entity);\n } else {\n clone = _objectSpread({}, entity);\n } // Delete prop if `removeIfUndefined` and value is undefined\n\n\n if (removeIfUndefined && value === undefined && restPath.length === 1) {\n delete clone[path][restPath[0]];\n } else {\n clone[path] = internalSet(clone[path], restPath, value, removeIfUndefined);\n }\n\n return clone;\n}\n\nexport default function set(entity, paths, value) {\n var removeIfUndefined = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; // Do nothing if `removeIfUndefined` and parent object not exist\n\n if (paths.length && removeIfUndefined && value === undefined && !get(entity, paths.slice(0, -1))) {\n return entity;\n }\n\n return internalSet(entity, paths, value, removeIfUndefined);\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\n\nfunction cloneDeep(val) {\n if (Array.isArray(val)) {\n return cloneArrayDeep(val);\n } else if (_typeof(val) === 'object' && val !== null) {\n return cloneObjectDeep(val);\n }\n\n return val;\n}\n\nfunction cloneObjectDeep(val) {\n if (Object.getPrototypeOf(val) === Object.prototype) {\n var res = {};\n\n for (var key in val) {\n res[key] = cloneDeep(val[key]);\n }\n\n return res;\n }\n\n return val;\n}\n\nfunction cloneArrayDeep(val) {\n return val.map(function (item) {\n return cloneDeep(item);\n });\n}\n\nexport default cloneDeep;","import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport get from \"rc-util/es/utils/get\";\nimport set from \"rc-util/es/utils/set\";\nimport { toArray } from './typeUtil';\nimport cloneDeep from '../utils/cloneDeep';\n/**\n * Convert name to internal supported format.\n * This function should keep since we still thinking if need support like `a.b.c` format.\n * 'a' => ['a']\n * 123 => [123]\n * ['a', 123] => ['a', 123]\n */\n\nexport function getNamePath(path) {\n return toArray(path);\n}\nexport function getValue(store, namePath) {\n var value = get(store, namePath);\n return value;\n}\nexport function setValue(store, namePath, value) {\n var removeIfUndefined = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;\n var newStore = set(store, namePath, value, removeIfUndefined);\n return newStore;\n}\nexport function cloneByNamePathList(store, namePathList) {\n var newStore = {};\n namePathList.forEach(function (namePath) {\n var value = getValue(store, namePath);\n newStore = setValue(newStore, namePath, value);\n });\n return newStore;\n}\nexport function containsNamePath(namePathList, namePath) {\n return namePathList && namePathList.some(function (path) {\n return matchNamePath(path, namePath);\n });\n}\n\nfunction isObject(obj) {\n return _typeof(obj) === 'object' && obj !== null && Object.getPrototypeOf(obj) === Object.prototype;\n}\n/**\n * Copy values into store and return a new values object\n * ({ a: 1, b: { c: 2 } }, { a: 4, b: { d: 5 } }) => { a: 4, b: { c: 2, d: 5 } }\n */\n\n\nfunction internalSetValues(store, values) {\n var newStore = Array.isArray(store) ? _toConsumableArray(store) : _objectSpread({}, store);\n\n if (!values) {\n return newStore;\n }\n\n Object.keys(values).forEach(function (key) {\n var prevValue = newStore[key];\n var value = values[key]; // If both are object (but target is not array), we use recursion to set deep value\n\n var recursive = isObject(prevValue) && isObject(value);\n newStore[key] = recursive ? internalSetValues(prevValue, value || {}) : cloneDeep(value); // Clone deep for arrays\n });\n return newStore;\n}\n\nexport function setValues(store) {\n for (var _len = arguments.length, restValues = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n restValues[_key - 1] = arguments[_key];\n }\n\n return restValues.reduce(function (current, newStore) {\n return internalSetValues(current, newStore);\n }, store);\n}\nexport function matchNamePath(namePath, changedNamePath) {\n if (!namePath || !changedNamePath || namePath.length !== changedNamePath.length) {\n return false;\n }\n\n return namePath.every(function (nameUnit, i) {\n return changedNamePath[i] === nameUnit;\n });\n}\nexport function isSimilar(source, target) {\n if (source === target) {\n return true;\n }\n\n if (!source && target || source && !target) {\n return false;\n }\n\n if (!source || !target || _typeof(source) !== 'object' || _typeof(target) !== 'object') {\n return false;\n }\n\n var sourceKeys = Object.keys(source);\n var targetKeys = Object.keys(target);\n var keys = new Set([].concat(_toConsumableArray(sourceKeys), _toConsumableArray(targetKeys)));\n return _toConsumableArray(keys).every(function (key) {\n var sourceValue = source[key];\n var targetValue = target[key];\n\n if (typeof sourceValue === 'function' && typeof targetValue === 'function') {\n return true;\n }\n\n return sourceValue === targetValue;\n });\n}\nexport function defaultGetValueFromEvent(valuePropName) {\n var event = arguments.length <= 1 ? undefined : arguments[1];\n\n if (event && event.target && _typeof(event.target) === 'object' && valuePropName in event.target) {\n return event.target[valuePropName];\n }\n\n return event;\n}\n/**\n * Moves an array item from one position in an array to another.\n *\n * Note: This is a pure function so a new array will be returned, instead\n * of altering the array argument.\n *\n * @param array Array in which to move an item. (required)\n * @param moveIndex The index of the item to move. (required)\n * @param toIndex The index to move item at moveIndex to. (required)\n */\n\nexport function move(array, moveIndex, toIndex) {\n var length = array.length;\n\n if (moveIndex < 0 || moveIndex >= length || toIndex < 0 || toIndex >= length) {\n return array;\n }\n\n var item = array[moveIndex];\n var diff = moveIndex - toIndex;\n\n if (diff > 0) {\n // move left\n return [].concat(_toConsumableArray(array.slice(0, toIndex)), [item], _toConsumableArray(array.slice(toIndex, moveIndex)), _toConsumableArray(array.slice(moveIndex + 1, length)));\n }\n\n if (diff < 0) {\n // move right\n return [].concat(_toConsumableArray(array.slice(0, moveIndex)), _toConsumableArray(array.slice(moveIndex + 1, toIndex + 1)), [item], _toConsumableArray(array.slice(toIndex + 1, length)));\n }\n\n return array;\n}","import _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _regeneratorRuntime from \"@babel/runtime/helpers/esm/regeneratorRuntime\";\nimport _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _asyncToGenerator from \"@babel/runtime/helpers/esm/asyncToGenerator\";\nimport RawAsyncValidator from 'async-validator';\nimport * as React from 'react';\nimport warning from \"rc-util/es/warning\";\nimport { defaultValidateMessages } from './messages';\nimport { setValues } from './valueUtil'; // Remove incorrect original ts define\n\nvar AsyncValidator = RawAsyncValidator;\n/**\n * Replace with template.\n * `I'm ${name}` + { name: 'bamboo' } = I'm bamboo\n */\n\nfunction replaceMessage(template, kv) {\n return template.replace(/\\$\\{\\w+\\}/g, function (str) {\n var key = str.slice(2, -1);\n return kv[key];\n });\n}\n\nvar CODE_LOGIC_ERROR = 'CODE_LOGIC_ERROR';\n\nfunction validateRule(_x, _x2, _x3, _x4, _x5) {\n return _validateRule.apply(this, arguments);\n}\n/**\n * We use `async-validator` to validate the value.\n * But only check one value in a time to avoid namePath validate issue.\n */\n\n\nfunction _validateRule() {\n _validateRule = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(name, value, rule, options, messageVariables) {\n var cloneRule, originValidator, subRuleField, validator, messages, result, subResults, kv, fillVariableResult;\n return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n cloneRule = _objectSpread({}, rule); // Bug of `async-validator`\n // https://github.com/react-component/field-form/issues/316\n // https://github.com/react-component/field-form/issues/313\n\n delete cloneRule.ruleIndex;\n\n if (cloneRule.validator) {\n originValidator = cloneRule.validator;\n\n cloneRule.validator = function () {\n try {\n return originValidator.apply(void 0, arguments);\n } catch (error) {\n console.error(error);\n return Promise.reject(CODE_LOGIC_ERROR);\n }\n };\n } // We should special handle array validate\n\n\n subRuleField = null;\n\n if (cloneRule && cloneRule.type === 'array' && cloneRule.defaultField) {\n subRuleField = cloneRule.defaultField;\n delete cloneRule.defaultField;\n }\n\n validator = new AsyncValidator(_defineProperty({}, name, [cloneRule]));\n messages = setValues({}, defaultValidateMessages, options.validateMessages);\n validator.messages(messages);\n result = [];\n _context2.prev = 9;\n _context2.next = 12;\n return Promise.resolve(validator.validate(_defineProperty({}, name, value), _objectSpread({}, options)));\n\n case 12:\n _context2.next = 17;\n break;\n\n case 14:\n _context2.prev = 14;\n _context2.t0 = _context2[\"catch\"](9);\n\n if (_context2.t0.errors) {\n result = _context2.t0.errors.map(function (_ref4, index) {\n var message = _ref4.message;\n var mergedMessage = message === CODE_LOGIC_ERROR ? messages.default : message;\n return /*#__PURE__*/ /*#__PURE__*/React.isValidElement(mergedMessage) ?\n /*#__PURE__*/\n // Wrap ReactNode with `key`\n React.cloneElement(mergedMessage, {\n key: \"error_\".concat(index)\n }) : mergedMessage;\n });\n }\n\n case 17:\n if (!(!result.length && subRuleField)) {\n _context2.next = 22;\n break;\n }\n\n _context2.next = 20;\n return Promise.all(value.map(function (subValue, i) {\n return validateRule(\"\".concat(name, \".\").concat(i), subValue, subRuleField, options, messageVariables);\n }));\n\n case 20:\n subResults = _context2.sent;\n return _context2.abrupt(\"return\", subResults.reduce(function (prev, errors) {\n return [].concat(_toConsumableArray(prev), _toConsumableArray(errors));\n }, []));\n\n case 22:\n // Replace message with variables\n kv = _objectSpread(_objectSpread({}, rule), {}, {\n name: name,\n enum: (rule.enum || []).join(', ')\n }, messageVariables);\n fillVariableResult = result.map(function (error) {\n if (typeof error === 'string') {\n return replaceMessage(error, kv);\n }\n\n return error;\n });\n return _context2.abrupt(\"return\", fillVariableResult);\n\n case 25:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2, null, [[9, 14]]);\n }));\n return _validateRule.apply(this, arguments);\n}\n\nexport function validateRules(namePath, value, rules, options, validateFirst, messageVariables) {\n var name = namePath.join('.'); // Fill rule with context\n\n var filledRules = rules.map(function (currentRule, ruleIndex) {\n var originValidatorFunc = currentRule.validator;\n\n var cloneRule = _objectSpread(_objectSpread({}, currentRule), {}, {\n ruleIndex: ruleIndex\n }); // Replace validator if needed\n\n\n if (originValidatorFunc) {\n cloneRule.validator = function (rule, val, callback) {\n var hasPromise = false; // Wrap callback only accept when promise not provided\n\n var wrappedCallback = function wrappedCallback() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n } // Wait a tick to make sure return type is a promise\n\n\n Promise.resolve().then(function () {\n warning(!hasPromise, 'Your validator function has already return a promise. `callback` will be ignored.');\n\n if (!hasPromise) {\n callback.apply(void 0, args);\n }\n });\n }; // Get promise\n\n\n var promise = originValidatorFunc(rule, val, wrappedCallback);\n hasPromise = promise && typeof promise.then === 'function' && typeof promise.catch === 'function';\n /**\n * 1. Use promise as the first priority.\n * 2. If promise not exist, use callback with warning instead\n */\n\n warning(hasPromise, '`callback` is deprecated. Please return a promise instead.');\n\n if (hasPromise) {\n promise.then(function () {\n callback();\n }).catch(function (err) {\n callback(err || ' ');\n });\n }\n };\n }\n\n return cloneRule;\n }).sort(function (_ref, _ref2) {\n var w1 = _ref.warningOnly,\n i1 = _ref.ruleIndex;\n var w2 = _ref2.warningOnly,\n i2 = _ref2.ruleIndex;\n\n if (!!w1 === !!w2) {\n // Let keep origin order\n return i1 - i2;\n }\n\n if (w1) {\n return 1;\n }\n\n return -1;\n }); // Do validate rules\n\n var summaryPromise;\n\n if (validateFirst === true) {\n // >>>>> Validate by serialization\n summaryPromise = new Promise( /*#__PURE__*/function () {\n var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(resolve, reject) {\n var i, rule, errors;\n return _regeneratorRuntime().wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n i = 0;\n\n case 1:\n if (!(i < filledRules.length)) {\n _context.next = 12;\n break;\n }\n\n rule = filledRules[i];\n _context.next = 5;\n return validateRule(name, value, rule, options, messageVariables);\n\n case 5:\n errors = _context.sent;\n\n if (!errors.length) {\n _context.next = 9;\n break;\n }\n\n reject([{\n errors: errors,\n rule: rule\n }]);\n return _context.abrupt(\"return\");\n\n case 9:\n i += 1;\n _context.next = 1;\n break;\n\n case 12:\n /* eslint-enable */\n resolve([]);\n\n case 13:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n\n return function (_x6, _x7) {\n return _ref3.apply(this, arguments);\n };\n }());\n } else {\n // >>>>> Validate by parallel\n var rulePromises = filledRules.map(function (rule) {\n return validateRule(name, value, rule, options, messageVariables).then(function (errors) {\n return {\n errors: errors,\n rule: rule\n };\n });\n });\n summaryPromise = (validateFirst ? finishOnFirstFailed(rulePromises) : finishOnAllFailed(rulePromises)).then(function (errors) {\n // Always change to rejection for Field to catch\n return Promise.reject(errors);\n });\n } // Internal catch error to avoid console error log.\n\n\n summaryPromise.catch(function (e) {\n return e;\n });\n return summaryPromise;\n}\n\nfunction finishOnAllFailed(_x8) {\n return _finishOnAllFailed.apply(this, arguments);\n}\n\nfunction _finishOnAllFailed() {\n _finishOnAllFailed = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(rulePromises) {\n return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n return _context3.abrupt(\"return\", Promise.all(rulePromises).then(function (errorsList) {\n var _ref5;\n\n var errors = (_ref5 = []).concat.apply(_ref5, _toConsumableArray(errorsList));\n\n return errors;\n }));\n\n case 1:\n case \"end\":\n return _context3.stop();\n }\n }\n }, _callee3);\n }));\n return _finishOnAllFailed.apply(this, arguments);\n}\n\nfunction finishOnFirstFailed(_x9) {\n return _finishOnFirstFailed.apply(this, arguments);\n}\n\nfunction _finishOnFirstFailed() {\n _finishOnFirstFailed = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(rulePromises) {\n var count;\n return _regeneratorRuntime().wrap(function _callee4$(_context4) {\n while (1) {\n switch (_context4.prev = _context4.next) {\n case 0:\n count = 0;\n return _context4.abrupt(\"return\", new Promise(function (resolve) {\n rulePromises.forEach(function (promise) {\n promise.then(function (ruleError) {\n if (ruleError.errors.length) {\n resolve([ruleError]);\n }\n\n count += 1;\n\n if (count === rulePromises.length) {\n resolve([]);\n }\n });\n });\n }));\n\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }\n }, _callee4);\n }));\n return _finishOnFirstFailed.apply(this, arguments);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _classCallCheck from \"@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/esm/createClass\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inherits from \"@babel/runtime/helpers/esm/inherits\";\nimport _createSuper from \"@babel/runtime/helpers/esm/createSuper\";\nvar _excluded = [\"name\"];\nimport toChildrenArray from \"rc-util/es/Children/toArray\";\nimport warning from \"rc-util/es/warning\";\nimport * as React from 'react';\nimport FieldContext, { HOOK_MARK } from './FieldContext';\nimport { toArray } from './utils/typeUtil';\nimport { validateRules } from './utils/validateUtil';\nimport { containsNamePath, defaultGetValueFromEvent, getNamePath, getValue } from './utils/valueUtil';\nvar EMPTY_ERRORS = [];\n\nfunction requireUpdate(shouldUpdate, prev, next, prevValue, nextValue, info) {\n if (typeof shouldUpdate === 'function') {\n return shouldUpdate(prev, next, 'source' in info ? {\n source: info.source\n } : {});\n }\n\n return prevValue !== nextValue;\n} // We use Class instead of Hooks here since it will cost much code by using Hooks.\n\n\nvar Field = /*#__PURE__*/function (_React$Component) {\n _inherits(Field, _React$Component);\n\n var _super = _createSuper(Field);\n /**\n * Follow state should not management in State since it will async update by React.\n * This makes first render of form can not get correct state value.\n */\n\n /**\n * Mark when touched & validated. Currently only used for `dependencies`.\n * Note that we do not think field with `initialValue` is dirty\n * but this will be by `isFieldDirty` func.\n */\n // ============================== Subscriptions ==============================\n\n\n function Field(props) {\n var _this;\n\n _classCallCheck(this, Field);\n\n _this = _super.call(this, props); // Register on init\n\n _this.state = {\n resetCount: 0\n };\n _this.cancelRegisterFunc = null;\n _this.mounted = false;\n _this.touched = false;\n _this.dirty = false;\n _this.validatePromise = null;\n _this.prevValidating = void 0;\n _this.errors = EMPTY_ERRORS;\n _this.warnings = EMPTY_ERRORS;\n\n _this.cancelRegister = function () {\n var _this$props = _this.props,\n preserve = _this$props.preserve,\n isListField = _this$props.isListField,\n name = _this$props.name;\n\n if (_this.cancelRegisterFunc) {\n _this.cancelRegisterFunc(isListField, preserve, getNamePath(name));\n }\n\n _this.cancelRegisterFunc = null;\n };\n\n _this.getNamePath = function () {\n var _this$props2 = _this.props,\n name = _this$props2.name,\n fieldContext = _this$props2.fieldContext;\n var _fieldContext$prefixN = fieldContext.prefixName,\n prefixName = _fieldContext$prefixN === void 0 ? [] : _fieldContext$prefixN;\n return name !== undefined ? [].concat(_toConsumableArray(prefixName), _toConsumableArray(name)) : [];\n };\n\n _this.getRules = function () {\n var _this$props3 = _this.props,\n _this$props3$rules = _this$props3.rules,\n rules = _this$props3$rules === void 0 ? [] : _this$props3$rules,\n fieldContext = _this$props3.fieldContext;\n return rules.map(function (rule) {\n if (typeof rule === 'function') {\n return rule(fieldContext);\n }\n\n return rule;\n });\n };\n\n _this.refresh = function () {\n if (!_this.mounted) return;\n /**\n * Clean up current node.\n */\n\n _this.setState(function (_ref) {\n var resetCount = _ref.resetCount;\n return {\n resetCount: resetCount + 1\n };\n });\n };\n\n _this.triggerMetaEvent = function (destroy) {\n var onMetaChange = _this.props.onMetaChange;\n onMetaChange === null || onMetaChange === void 0 ? void 0 : onMetaChange(_objectSpread(_objectSpread({}, _this.getMeta()), {}, {\n destroy: destroy\n }));\n };\n\n _this.onStoreChange = function (prevStore, namePathList, info) {\n var _this$props4 = _this.props,\n shouldUpdate = _this$props4.shouldUpdate,\n _this$props4$dependen = _this$props4.dependencies,\n dependencies = _this$props4$dependen === void 0 ? [] : _this$props4$dependen,\n onReset = _this$props4.onReset;\n var store = info.store;\n\n var namePath = _this.getNamePath();\n\n var prevValue = _this.getValue(prevStore);\n\n var curValue = _this.getValue(store);\n\n var namePathMatch = namePathList && containsNamePath(namePathList, namePath); // `setFieldsValue` is a quick access to update related status\n\n if (info.type === 'valueUpdate' && info.source === 'external' && prevValue !== curValue) {\n _this.touched = true;\n _this.dirty = true;\n _this.validatePromise = null;\n _this.errors = EMPTY_ERRORS;\n _this.warnings = EMPTY_ERRORS;\n\n _this.triggerMetaEvent();\n }\n\n switch (info.type) {\n case 'reset':\n if (!namePathList || namePathMatch) {\n // Clean up state\n _this.touched = false;\n _this.dirty = false;\n _this.validatePromise = null;\n _this.errors = EMPTY_ERRORS;\n _this.warnings = EMPTY_ERRORS;\n\n _this.triggerMetaEvent();\n\n onReset === null || onReset === void 0 ? void 0 : onReset();\n\n _this.refresh();\n\n return;\n }\n\n break;\n\n /**\n * In case field with `preserve = false` nest deps like:\n * - A = 1 => show B\n * - B = 1 => show C\n * - Reset A, need clean B, C\n */\n\n case 'remove':\n {\n if (shouldUpdate) {\n _this.reRender();\n\n return;\n }\n\n break;\n }\n\n case 'setField':\n {\n if (namePathMatch) {\n var data = info.data;\n\n if ('touched' in data) {\n _this.touched = data.touched;\n }\n\n if ('validating' in data && !('originRCField' in data)) {\n _this.validatePromise = data.validating ? Promise.resolve([]) : null;\n }\n\n if ('errors' in data) {\n _this.errors = data.errors || EMPTY_ERRORS;\n }\n\n if ('warnings' in data) {\n _this.warnings = data.warnings || EMPTY_ERRORS;\n }\n\n _this.dirty = true;\n\n _this.triggerMetaEvent();\n\n _this.reRender();\n\n return;\n } // Handle update by `setField` with `shouldUpdate`\n\n\n if (shouldUpdate && !namePath.length && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {\n _this.reRender();\n\n return;\n }\n\n break;\n }\n\n case 'dependenciesUpdate':\n {\n /**\n * Trigger when marked `dependencies` updated. Related fields will all update\n */\n var dependencyList = dependencies.map(getNamePath); // No need for `namePathMath` check and `shouldUpdate` check, since `valueUpdate` will be\n // emitted earlier and they will work there\n // If set it may cause unnecessary twice rerendering\n\n if (dependencyList.some(function (dependency) {\n return containsNamePath(info.relatedFields, dependency);\n })) {\n _this.reRender();\n\n return;\n }\n\n break;\n }\n\n default:\n // 1. If `namePath` exists in `namePathList`, means it's related value and should update\n // For example \n
\n {props.licenseKey}
\n \n {props.planName === 'free'\n ? `At the end of your current subscription term on ${props.billingPeriodEndDate}, you will switch to the\n ${props.planName} plan.`\n : `At the end of your current subscription term on ${props.billingPeriodEndDate}, you will switch to the\n ${props.planName} plan at the monthly rate.`}\n
\n \n )\n}\n","import React from \"react\"\nimport { Button } from 'antd'\n\nimport { IconInfoCircle, IconBlueCheckCircleLight } from \"../icons\"\n\nconst BannerHeader = (props) => {\n if (props.upgradeRequired) {\n return (\nUpdate Retool to take advantage of new pricing
\n )\n }\n if (props.onFreePlan) {\n return (\n Retool pricing is based on user type
\n )\n }\n if (props.onDifferentiatedPricingPlan) {\n return (\n Pricing plan updated
\n )\n }\n return (\n Retool is introducing new pricing
\n )\n}\n\nconst PricingDescription = (props) => {\n const businessPlanUpsell = (\n We're also offering a new Business plan which enables added functionality for growing teams.\n Learn more\n )\n if (props.onFreePlan) {\n return (\n With Retool paid plans, you pay different rates for different user types: standard users{' '}\n who build and edit in Retool, and end users who only use apps. {businessPlanUpsell}\n
)\n }\n if (props.onDifferentiatedPricingPlan) {\n return (<>\n \n You’ve successfully subscribed to the Retool {props.planDisplayName} plan. Pricing will be based on the number\n of standard users and end users that are enabled on Retool each month.\n
\n \n Need help with new pricing? Contact support\n
\n )\n }\n return (\n \n With our new pricing plans, you pay different rates for different user types:{' '}\n standard users who build and edit in Retool, and end users who only use\n apps. {businessPlanUpsell}\n
\n )\n}\n\nconst CurrentPlanDescription = (props) => {\n return (\n <>\n \n Current plan: {props.planDisplayName} (${props.legacyUserCost} per user/month x {props.numUsers}{' '}\n users)\n
\n \n Your organization can remain on this legacy pricing plan until December 31, 2024 or you can select a new\n plan below\n
\n \n )\n}\n\nconst UpgradeCTA = (props) => {\n return (\n <>\n \n You're currently on Retool version {props.currentVersion}. Upgrade to 2.117 to enable new pricing on this\n page.\n
\n \n \n Learn how to update Retool\n \n
\n \n )\n}\n\nconst DifferentiatedPricingBanner = (props) => {\n const onFreePlan = props.stripePlanName === 'free' || props.stripePlanName === 'freetool'\n const onDifferentiatedPricingPlan = props.billingType === 'differentiated'\n let planDisplayName = 'Free'\n let legacyUserCost\n if (props.stripePlanName === 'team') {\n planDisplayName = 'Team'\n legacyUserCost = '10'\n } else if (props.stripePlanName === 'pro') {\n planDisplayName = 'Business'\n legacyUserCost = '50'\n }\n\n return (\n \n )}\n
\n \n )\n}\n\nexport default DifferentiatedPricingBanner\n","import React from 'react'\nimport { IconCheck } from '../../icons'\nimport { getPlanDetails } from '../../utils/constants'\nimport classNames from 'classnames'\n\nimport '../../common.scss'\nimport '../../OnPremSetup.scss'\nimport '../../Setup.scss'\nimport '../Billing.scss'\nimport '../../utils/Button.scss'\n\nconst className = 'billing__plans'\n\nexport const PlanDetails = (props) => {\n const { sectionTitle, currentPlanName, useLegacyFreePlan } = props\n\n return (\n <>\n {getPlanDetails(useLegacyFreePlan).map((pd, i) => (\n \n
\n \n )\n}\n","import React, { useState } from \"react\"\nimport { Button } from 'antd'\nimport { IconCheck, IconInfoCircle } from '../../icons'\nimport { getPlanDetails } from '../../utils/constants'\nimport classNames from 'classnames'\nimport moment from 'moment'\nimport { bookACallHref } from '../../OnPremSetup'\nimport Tooltip from '../../utils/Tooltip'\nimport { DifferentiatedPricingConfirmationModal } from '../DifferentiatedPricingConfirmationModal'\n\nimport '../../common.scss'\nimport '../../OnPremSetup.scss'\nimport '../../Setup.scss'\nimport '../Billing.scss'\nimport '../../utils/Button.scss'\nimport SupportAssistedPlanChangeModal from \"../SupportAssistedPlanChangeModal\";\nimport { AnnualToMonthlyChangeModal } from \"../AnnualToMonthlyChangeModal\";\n\nconst className = 'billing__plans'\nconst standardUserTooltip = 'Users that make edits to apps or workflows are billed as standard users'\nconst endUserTooltip = 'Enabled users that don’t make edits to apps or workflows are billed as end users'\n\nexport const PlanHeaders = (props) => {\n const {\n inBillingCompliance,\n currentPlanName,\n onCTAClick,\n trialExpiring,\n subscriptionStatus,\n ssopUserEmail,\n useLegacyFreePlan,\n numUsers,\n billingPeriod,\n upgradeRequired,\n subscribedBillingPeriod,\n billingType,\n billingStartedAt,\n } = props\n\n let isSubscriptionActive = ['active', 'unpaid', 'trialing', 'past_due'].includes(subscriptionStatus)\n const disableDowngrade = numUsers > 5 && !useLegacyFreePlan\n const isOnDifferentiated = billingType === 'differentiated'\n const annualBillingSelected = billingPeriod === 'annual'\n const isOnAnnual = subscribedBillingPeriod === 'annual'\n const annualSubscriptionEndDate = new Date(billingStartedAt * 1000)\n annualSubscriptionEndDate.setFullYear(annualSubscriptionEndDate.getFullYear() + 1);\n const annualChangeEligible = isOnAnnual && moment().diff(annualSubscriptionEndDate, 'days') >= -30\n\n const billingTypeMatch = (billingPeriod === 'monthly' && !isOnAnnual) || (billingPeriod === 'annual' && isOnAnnual)\n const getPricingCopy = (pd) => {\n if (pd.planName === 'Freetool') {\n return <>\n \n \n \n {p.label}\n \n
\n ))}\n \n {sectionTitle}\n
\n {getPlanFeatures()[sectionTitle].map((p, i) => (\n {`$${pd.price}`}
\n up to 5 users
\n \n } else if (pd.planName === 'Free') {\n return '$0/user/month'\n } else if (pd.planName === 'Enterprise') {\n return 'Custom pricing'\n } else {\n let standardUserPrice = pd.monthlyStandardUserPrice\n let endUserPrice = pd.monthlyEndUserPrice\n if (annualBillingSelected) {\n standardUserPrice = pd.annualStandardUserPrice\n endUserPrice = pd.annualEndUserPrice\n }\n return <>\n {`$${standardUserPrice}/mo`}
\n per standard user \n
\n {`$${endUserPrice}/mo`}
\n per end user
\n \n }\n }\n\n const getSubscribeButton = (planName, planDisplayName, setShowUserSelectionModal) => {\n if (planName === 'enterprise') {\n return (\n \n )\n }\n\n let [showSupportUpgradeModal, setShowSupportUpgradeModal] = useState(false)\n let [showAnnualChangeModal, setShowAnnualChangeModal] = useState(false)\n\n const disabledFreetool = disableDowngrade && planName === 'freetool'\n const disabledPaidPlan = upgradeRequired && planName !== 'freetool'\n const isDowngrade = (currentPlanName === 'pro' && planName === 'team') || planName === 'freetool'\n const disabledReupgrade = currentPlanName === 'freetool' && !inBillingCompliance\n\n const disabledOnAnnual = (isOnAnnual && (isDowngrade || billingPeriod === 'monthly')) && !annualChangeEligible\n const disableButton = disabledFreetool || disabledPaidPlan || disabledOnAnnual || disabledReupgrade\n\n const isSamePlanDifferentBillingPeriod =\n isOnDifferentiated && currentPlanName === planName && !billingTypeMatch\n let buttonText\n if (annualChangeEligible) {\n if (planName === 'freetool') {\n buttonText = 'Downgrade for next year'\n } else if (billingTypeMatch) {\n buttonText = 'Renew for next year'\n } else {\n buttonText = 'Subscribe for next year'\n }\n } else {\n buttonText = isSamePlanDifferentBillingPeriod ? 'Subscribe' : isDowngrade ? 'Downgrade' : 'Upgrade'\n }\n\n if (planName === currentPlanName && isSubscriptionActive &&\n ((billingTypeMatch && isOnDifferentiated) || planName === 'freetool' || planName === 'free') && !annualChangeEligible) {\n return (\n \n )\n }\n\n let tooltipTitle\n if (disabledPaidPlan) {\n tooltipTitle = 'Update Retool to take advantage of new pricing.'\n } else if (disabledFreetool) {\n tooltipTitle = 'To use Retool for free, select up to 5 users to enable on the Users page within your instance.'\n } else if (disabledOnAnnual) {\n tooltipTitle = `You’re currently on an annual plan that runs through ${moment(annualSubscriptionEndDate).format('MMM DD, YYYY')}. \n To switch to a different plan at the end of this billing cycle, email support@retool.com`\n } else if (disabledReupgrade) {\n tooltipTitle = 'You currently have outstanding invoices and so are unable to begin a new subscription. Please visit the Billing portal to view and fulfill your outstanding invoices'\n }\n return (\n <>\n {pd.displayName}
\n \n {getPricingCopy(pd)}\n
\n \n setShowUserSelectionModal(false)}\n renewal={annualChangeEligible}\n />\n {getSubscribeButton(pd.planName.toLowerCase(), pd.displayName, setShowUserSelectionModal)}\n {pd.planName.toLowerCase() === 'enterprise' && pd.planName.toLowerCase() === currentPlanName && trialExpiring && (\n
\n \n )\n })}\n \n )\n}\n","import React from \"react\"\nimport { Modal } from 'antd';\n\nconst SupportAssistedPlanChangeModal = (props) => {\n return (\n {`Trial ending ${moment(trialExpiring).fromNow()}`}
\n )}\n {(pd.planName.toLowerCase() === 'team' || pd.planName.toLowerCase() === 'pro') && (\n {annualBillingSelected ? 'billed annually' : 'billed monthly'}
\n )}\n \n A member of our customer support team can assist in updating your account. Send an email to{' '}\n support@retool.com and we'll get you set up on a new plan.\n
\n \n )\n}\n\nexport default SupportAssistedPlanChangeModal\n","// This icon file is generated automatically.\nvar UpOutlined = {\n \"icon\": {\n \"tag\": \"svg\",\n \"attrs\": {\n \"viewBox\": \"64 64 896 896\",\n \"focusable\": \"false\"\n },\n \"children\": [{\n \"tag\": \"path\",\n \"attrs\": {\n \"d\": \"M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z\"\n }\n }]\n },\n \"name\": \"up\",\n \"theme\": \"outlined\"\n};\nexport default UpOutlined;","import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\"; // GENERATE BY ./scripts/generate.ts\n// DON NOT EDIT IT MANUALLY\n\nimport * as React from 'react';\nimport UpOutlinedSvg from \"@ant-design/icons-svg/es/asn/UpOutlined\";\nimport AntdIcon from '../components/AntdIcon';\n\nvar UpOutlined = function UpOutlined(props, ref) {\n return /*#__PURE__*/React.createElement(AntdIcon, _objectSpread(_objectSpread({}, props), {}, {\n ref: ref,\n icon: UpOutlinedSvg\n }));\n};\n\nUpOutlined.displayName = 'UpOutlined';\nexport default /*#__PURE__*/React.forwardRef(UpOutlined);","export function supportBigInt() {\n return typeof BigInt === 'function';\n}","import { supportBigInt } from './supportUtil';\n/**\n * Format string number to readable number\n */\n\nexport function trimNumber(numStr) {\n var str = numStr.trim();\n var negative = str.startsWith('-');\n\n if (negative) {\n str = str.slice(1);\n }\n\n str = str // Remove decimal 0. `1.000` => `1.`, `1.100` => `1.1`\n .replace(/(\\.\\d*[^0])0*$/, '$1') // Remove useless decimal. `1.` => `1`\n .replace(/\\.0*$/, '') // Remove integer 0. `0001` => `1`, 000.1' => `.1`\n .replace(/^0+/, '');\n\n if (str.startsWith('.')) {\n str = \"0\".concat(str);\n }\n\n var trimStr = str || '0';\n var splitNumber = trimStr.split('.');\n var integerStr = splitNumber[0] || '0';\n var decimalStr = splitNumber[1] || '0';\n\n if (integerStr === '0' && decimalStr === '0') {\n negative = false;\n }\n\n var negativeStr = negative ? '-' : '';\n return {\n negative: negative,\n negativeStr: negativeStr,\n trimStr: trimStr,\n integerStr: integerStr,\n decimalStr: decimalStr,\n fullStr: \"\".concat(negativeStr).concat(trimStr)\n };\n}\nexport function isE(number) {\n var str = String(number);\n return !Number.isNaN(Number(str)) && str.includes('e');\n}\n/**\n * [Legacy] Convert 1e-9 to 0.000000001.\n * This may lose some precision if user really want 1e-9.\n */\n\nexport function getNumberPrecision(number) {\n var numStr = String(number);\n\n if (isE(number)) {\n var precision = Number(numStr.slice(numStr.indexOf('e-') + 2));\n var decimalMatch = numStr.match(/\\.(\\d+)/);\n\n if (decimalMatch === null || decimalMatch === void 0 ? void 0 : decimalMatch[1]) {\n precision += decimalMatch[1].length;\n }\n\n return precision;\n }\n\n return numStr.includes('.') && validateNumber(numStr) ? numStr.length - numStr.indexOf('.') - 1 : 0;\n}\n/**\n * Convert number (includes scientific notation) to -xxx.yyy format\n */\n\nexport function num2str(number) {\n var numStr = String(number);\n\n if (isE(number)) {\n if (number > Number.MAX_SAFE_INTEGER) {\n return String(supportBigInt() ? BigInt(number).toString() : Number.MAX_SAFE_INTEGER);\n }\n\n if (number < Number.MIN_SAFE_INTEGER) {\n return String(supportBigInt() ? BigInt(number).toString() : Number.MIN_SAFE_INTEGER);\n }\n\n numStr = number.toFixed(getNumberPrecision(numStr));\n }\n\n return trimNumber(numStr).fullStr;\n}\nexport function validateNumber(num) {\n if (typeof num === 'number') {\n return !Number.isNaN(num);\n } // Empty\n\n\n if (!num) {\n return false;\n }\n\n return (// Normal type: 11.28\n /^\\s*-?\\d+(\\.\\d+)?\\s*$/.test(num) || // Pre-number: 1.\n /^\\s*-?\\d+\\.\\s*$/.test(num) || // Post-number: .1\n /^\\s*-?\\.\\d+\\s*$/.test(num)\n );\n}","import _classCallCheck from \"@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/esm/createClass\";\n/* eslint-disable max-classes-per-file */\n\nimport { getNumberPrecision, isE, num2str, trimNumber, validateNumber } from './numberUtil';\nimport { supportBigInt } from './supportUtil';\n/**\n * We can remove this when IE not support anymore\n */\n\nexport var NumberDecimal = /*#__PURE__*/function () {\n function NumberDecimal(value) {\n _classCallCheck(this, NumberDecimal);\n\n this.origin = '';\n this.number = void 0;\n this.empty = void 0;\n\n if (!value && value !== 0 || !String(value).trim()) {\n this.empty = true;\n return;\n }\n\n this.origin = String(value);\n this.number = Number(value);\n }\n\n _createClass(NumberDecimal, [{\n key: \"negate\",\n value: function negate() {\n return new NumberDecimal(-this.toNumber());\n }\n }, {\n key: \"add\",\n value: function add(value) {\n if (this.isInvalidate()) {\n return new NumberDecimal(value);\n }\n\n var target = Number(value);\n\n if (Number.isNaN(target)) {\n return this;\n }\n\n var number = this.number + target; // [Legacy] Back to safe integer\n\n if (number > Number.MAX_SAFE_INTEGER) {\n return new NumberDecimal(Number.MAX_SAFE_INTEGER);\n }\n\n if (number < Number.MIN_SAFE_INTEGER) {\n return new NumberDecimal(Number.MIN_SAFE_INTEGER);\n }\n\n var maxPrecision = Math.max(getNumberPrecision(this.number), getNumberPrecision(target));\n return new NumberDecimal(number.toFixed(maxPrecision));\n }\n }, {\n key: \"isEmpty\",\n value: function isEmpty() {\n return this.empty;\n }\n }, {\n key: \"isNaN\",\n value: function isNaN() {\n return Number.isNaN(this.number);\n }\n }, {\n key: \"isInvalidate\",\n value: function isInvalidate() {\n return this.isEmpty() || this.isNaN();\n }\n }, {\n key: \"equals\",\n value: function equals(target) {\n return this.toNumber() === (target === null || target === void 0 ? void 0 : target.toNumber());\n }\n }, {\n key: \"lessEquals\",\n value: function lessEquals(target) {\n return this.add(target.negate().toString()).toNumber() <= 0;\n }\n }, {\n key: \"toNumber\",\n value: function toNumber() {\n return this.number;\n }\n }, {\n key: \"toString\",\n value: function toString() {\n var safe = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n\n if (!safe) {\n return this.origin;\n }\n\n if (this.isInvalidate()) {\n return '';\n }\n\n return num2str(this.number);\n }\n }]);\n\n return NumberDecimal;\n}();\nexport var BigIntDecimal = /*#__PURE__*/function () {\n /** BigInt will convert `0009` to `9`. We need record the len of decimal */\n function BigIntDecimal(value) {\n _classCallCheck(this, BigIntDecimal);\n\n this.origin = '';\n this.negative = void 0;\n this.integer = void 0;\n this.decimal = void 0;\n this.decimalLen = void 0;\n this.empty = void 0;\n this.nan = void 0;\n\n if (!value && value !== 0 || !String(value).trim()) {\n this.empty = true;\n return;\n }\n\n this.origin = String(value); // Act like Number convert\n\n if (value === '-') {\n this.nan = true;\n return;\n }\n\n var mergedValue = value; // We need convert back to Number since it require `toFixed` to handle this\n\n if (isE(mergedValue)) {\n mergedValue = Number(mergedValue);\n }\n\n mergedValue = typeof mergedValue === 'string' ? mergedValue : num2str(mergedValue);\n\n if (validateNumber(mergedValue)) {\n var trimRet = trimNumber(mergedValue);\n this.negative = trimRet.negative;\n var numbers = trimRet.trimStr.split('.');\n this.integer = BigInt(numbers[0]);\n var decimalStr = numbers[1] || '0';\n this.decimal = BigInt(decimalStr);\n this.decimalLen = decimalStr.length;\n } else {\n this.nan = true;\n }\n }\n\n _createClass(BigIntDecimal, [{\n key: \"getMark\",\n value: function getMark() {\n return this.negative ? '-' : '';\n }\n }, {\n key: \"getIntegerStr\",\n value: function getIntegerStr() {\n return this.integer.toString();\n }\n }, {\n key: \"getDecimalStr\",\n value: function getDecimalStr() {\n return this.decimal.toString().padStart(this.decimalLen, '0');\n }\n /**\n * Align BigIntDecimal with same decimal length. e.g. 12.3 + 5 = 1230000\n * This is used for add function only.\n */\n\n }, {\n key: \"alignDecimal\",\n value: function alignDecimal(decimalLength) {\n var str = \"\".concat(this.getMark()).concat(this.getIntegerStr()).concat(this.getDecimalStr().padEnd(decimalLength, '0'));\n return BigInt(str);\n }\n }, {\n key: \"negate\",\n value: function negate() {\n var clone = new BigIntDecimal(this.toString());\n clone.negative = !clone.negative;\n return clone;\n }\n }, {\n key: \"add\",\n value: function add(value) {\n if (this.isInvalidate()) {\n return new BigIntDecimal(value);\n }\n\n var offset = new BigIntDecimal(value);\n\n if (offset.isInvalidate()) {\n return this;\n }\n\n var maxDecimalLength = Math.max(this.getDecimalStr().length, offset.getDecimalStr().length);\n var myAlignedDecimal = this.alignDecimal(maxDecimalLength);\n var offsetAlignedDecimal = offset.alignDecimal(maxDecimalLength);\n var valueStr = (myAlignedDecimal + offsetAlignedDecimal).toString(); // We need fill string length back to `maxDecimalLength` to avoid parser failed\n\n var _trimNumber = trimNumber(valueStr),\n negativeStr = _trimNumber.negativeStr,\n trimStr = _trimNumber.trimStr;\n\n var hydrateValueStr = \"\".concat(negativeStr).concat(trimStr.padStart(maxDecimalLength + 1, '0'));\n return new BigIntDecimal(\"\".concat(hydrateValueStr.slice(0, -maxDecimalLength), \".\").concat(hydrateValueStr.slice(-maxDecimalLength)));\n }\n }, {\n key: \"isEmpty\",\n value: function isEmpty() {\n return this.empty;\n }\n }, {\n key: \"isNaN\",\n value: function isNaN() {\n return this.nan;\n }\n }, {\n key: \"isInvalidate\",\n value: function isInvalidate() {\n return this.isEmpty() || this.isNaN();\n }\n }, {\n key: \"equals\",\n value: function equals(target) {\n return this.toString() === (target === null || target === void 0 ? void 0 : target.toString());\n }\n }, {\n key: \"lessEquals\",\n value: function lessEquals(target) {\n return this.add(target.negate().toString()).toNumber() <= 0;\n }\n }, {\n key: \"toNumber\",\n value: function toNumber() {\n if (this.isNaN()) {\n return NaN;\n }\n\n return Number(this.toString());\n }\n }, {\n key: \"toString\",\n value: function toString() {\n var safe = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n\n if (!safe) {\n return this.origin;\n }\n\n if (this.isInvalidate()) {\n return '';\n }\n\n return trimNumber(\"\".concat(this.getMark()).concat(this.getIntegerStr(), \".\").concat(this.getDecimalStr())).fullStr;\n }\n }]);\n\n return BigIntDecimal;\n}();\nexport default function getMiniDecimal(value) {\n // We use BigInt here.\n // Will fallback to Number if not support.\n if (supportBigInt()) {\n return new BigIntDecimal(value);\n }\n\n return new NumberDecimal(value);\n}\n/**\n * Align the logic of toFixed to around like 1.5 => 2\n */\n\nexport function toFixed(numStr, separatorStr, precision) {\n if (numStr === '') {\n return '';\n }\n\n var _trimNumber2 = trimNumber(numStr),\n negativeStr = _trimNumber2.negativeStr,\n integerStr = _trimNumber2.integerStr,\n decimalStr = _trimNumber2.decimalStr;\n\n var precisionDecimalStr = \"\".concat(separatorStr).concat(decimalStr);\n var numberWithoutDecimal = \"\".concat(negativeStr).concat(integerStr);\n\n if (precision >= 0) {\n // We will get last + 1 number to check if need advanced number\n var advancedNum = Number(decimalStr[precision]);\n\n if (advancedNum >= 5) {\n var advancedDecimal = getMiniDecimal(numStr).add(\"\".concat(negativeStr, \"0.\").concat('0'.repeat(precision)).concat(10 - advancedNum));\n return toFixed(advancedDecimal.toString(), separatorStr, precision);\n }\n\n if (precision === 0) {\n return numberWithoutDecimal;\n }\n\n return \"\".concat(numberWithoutDecimal).concat(separatorStr).concat(decimalStr.padEnd(precision, '0').slice(0, precision));\n }\n\n if (precisionDecimalStr === '.0') {\n return numberWithoutDecimal;\n }\n\n return \"\".concat(numberWithoutDecimal).concat(precisionDecimalStr);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport isMobile from \"rc-util/es/isMobile\";\n/**\n * When click and hold on a button - the speed of auto changing the value.\n */\n\nvar STEP_INTERVAL = 200;\n/**\n * When click and hold on a button - the delay before auto changing the value.\n */\n\nvar STEP_DELAY = 600;\nexport default function StepHandler(_ref) {\n var prefixCls = _ref.prefixCls,\n upNode = _ref.upNode,\n downNode = _ref.downNode,\n upDisabled = _ref.upDisabled,\n downDisabled = _ref.downDisabled,\n onStep = _ref.onStep; // ======================== Step ========================\n\n var stepTimeoutRef = React.useRef();\n var onStepRef = React.useRef();\n onStepRef.current = onStep; // We will interval update step when hold mouse down\n\n var onStepMouseDown = function onStepMouseDown(e, up) {\n e.preventDefault();\n onStepRef.current(up); // Loop step for interval\n\n function loopStep() {\n onStepRef.current(up);\n stepTimeoutRef.current = setTimeout(loopStep, STEP_INTERVAL);\n } // First time press will wait some time to trigger loop step update\n\n\n stepTimeoutRef.current = setTimeout(loopStep, STEP_DELAY);\n };\n\n var onStopStep = function onStopStep() {\n clearTimeout(stepTimeoutRef.current);\n };\n\n React.useEffect(function () {\n return onStopStep;\n }, []); // ======================= Render =======================\n\n if (isMobile()) {\n return null;\n }\n\n var handlerClassName = \"\".concat(prefixCls, \"-handler\");\n var upClassName = classNames(handlerClassName, \"\".concat(handlerClassName, \"-up\"), _defineProperty({}, \"\".concat(handlerClassName, \"-up-disabled\"), upDisabled));\n var downClassName = classNames(handlerClassName, \"\".concat(handlerClassName, \"-down\"), _defineProperty({}, \"\".concat(handlerClassName, \"-down-disabled\"), downDisabled));\n var sharedHandlerProps = {\n unselectable: 'on',\n role: 'button',\n onMouseUp: onStopStep,\n onMouseLeave: onStopStep\n };\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(handlerClassName, \"-wrap\")\n }, /*#__PURE__*/React.createElement(\"span\", _extends({}, sharedHandlerProps, {\n onMouseDown: function onMouseDown(e) {\n onStepMouseDown(e, true);\n },\n \"aria-label\": \"Increase Value\",\n \"aria-disabled\": upDisabled,\n className: upClassName\n }), upNode || /*#__PURE__*/React.createElement(\"span\", {\n unselectable: \"on\",\n className: \"\".concat(prefixCls, \"-handler-up-inner\")\n })), /*#__PURE__*/React.createElement(\"span\", _extends({}, sharedHandlerProps, {\n onMouseDown: function onMouseDown(e) {\n onStepMouseDown(e, false);\n },\n \"aria-label\": \"Decrease Value\",\n \"aria-disabled\": downDisabled,\n className: downClassName\n }), downNode || /*#__PURE__*/React.createElement(\"span\", {\n unselectable: \"on\",\n className: \"\".concat(prefixCls, \"-handler-down-inner\")\n })));\n}","import * as React from 'react';\nimport canUseDom from \"rc-util/es/Dom/canUseDom\";\nexport var useLayoutEffect = canUseDom() ? React.useLayoutEffect : React.useEffect;","import * as React from 'react';\nimport { useLayoutEffect } from './useLayoutEffect';\n/**\n * Work as `componentDidUpdate`\n */\n\nexport default function useUpdateEffect(callback, condition) {\n var initRef = React.useRef(false);\n useLayoutEffect(function () {\n if (!initRef.current) {\n initRef.current = true;\n return undefined;\n }\n\n return callback();\n }, condition);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nvar _excluded = [\"prefixCls\", \"className\", \"style\", \"min\", \"max\", \"step\", \"defaultValue\", \"value\", \"disabled\", \"readOnly\", \"upHandler\", \"downHandler\", \"keyboard\", \"controls\", \"stringMode\", \"parser\", \"formatter\", \"precision\", \"decimalSeparator\", \"onChange\", \"onInput\", \"onPressEnter\", \"onStep\"];\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport KeyCode from \"rc-util/es/KeyCode\";\nimport { composeRef } from \"rc-util/es/ref\";\nimport getMiniDecimal, { toFixed } from './utils/MiniDecimal';\nimport StepHandler from './StepHandler';\nimport { getNumberPrecision, num2str, validateNumber } from './utils/numberUtil';\nimport useCursor from './hooks/useCursor';\nimport useUpdateEffect from './hooks/useUpdateEffect';\nimport useFrame from './hooks/useFrame';\n/**\n * We support `stringMode` which need handle correct type when user call in onChange\n */\n\nvar getDecimalValue = function getDecimalValue(stringMode, decimalValue) {\n if (stringMode || decimalValue.isEmpty()) {\n return decimalValue.toString();\n }\n\n return decimalValue.toNumber();\n};\n\nvar getDecimalIfValidate = function getDecimalIfValidate(value) {\n var decimal = getMiniDecimal(value);\n return decimal.isInvalidate() ? null : decimal;\n};\n\nvar InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var _classNames;\n\n var _props$prefixCls = props.prefixCls,\n prefixCls = _props$prefixCls === void 0 ? 'rc-input-number' : _props$prefixCls,\n className = props.className,\n style = props.style,\n min = props.min,\n max = props.max,\n _props$step = props.step,\n step = _props$step === void 0 ? 1 : _props$step,\n defaultValue = props.defaultValue,\n value = props.value,\n disabled = props.disabled,\n readOnly = props.readOnly,\n upHandler = props.upHandler,\n downHandler = props.downHandler,\n keyboard = props.keyboard,\n _props$controls = props.controls,\n controls = _props$controls === void 0 ? true : _props$controls,\n stringMode = props.stringMode,\n parser = props.parser,\n formatter = props.formatter,\n precision = props.precision,\n decimalSeparator = props.decimalSeparator,\n onChange = props.onChange,\n onInput = props.onInput,\n onPressEnter = props.onPressEnter,\n onStep = props.onStep,\n inputProps = _objectWithoutProperties(props, _excluded);\n\n var inputClassName = \"\".concat(prefixCls, \"-input\");\n var inputRef = React.useRef(null);\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n focus = _React$useState2[0],\n setFocus = _React$useState2[1];\n\n var userTypingRef = React.useRef(false);\n var compositionRef = React.useRef(false); // ============================ Value =============================\n // Real value control\n\n var _React$useState3 = React.useState(function () {\n return getMiniDecimal(value !== null && value !== void 0 ? value : defaultValue);\n }),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n decimalValue = _React$useState4[0],\n setDecimalValue = _React$useState4[1];\n\n function setUncontrolledDecimalValue(newDecimal) {\n if (value === undefined) {\n setDecimalValue(newDecimal);\n }\n } // ====================== Parser & Formatter ======================\n\n /**\n * `precision` is used for formatter & onChange.\n * It will auto generate by `value` & `step`.\n * But it will not block user typing.\n *\n * Note: Auto generate `precision` is used for legacy logic.\n * We should remove this since we already support high precision with BigInt.\n *\n * @param number Provide which number should calculate precision\n * @param userTyping Change by user typing\n */\n\n\n var getPrecision = React.useCallback(function (numStr, userTyping) {\n if (userTyping) {\n return undefined;\n }\n\n if (precision >= 0) {\n return precision;\n }\n\n return Math.max(getNumberPrecision(numStr), getNumberPrecision(step));\n }, [precision, step]); // >>> Parser\n\n var mergedParser = React.useCallback(function (num) {\n var numStr = String(num);\n\n if (parser) {\n return parser(numStr);\n }\n\n var parsedStr = numStr;\n\n if (decimalSeparator) {\n parsedStr = parsedStr.replace(decimalSeparator, '.');\n } // [Legacy] We still support auto convert `$ 123,456` to `123456`\n\n\n return parsedStr.replace(/[^\\w.-]+/g, '');\n }, [parser, decimalSeparator]); // >>> Formatter\n\n var inputValueRef = React.useRef('');\n var mergedFormatter = React.useCallback(function (number, userTyping) {\n if (formatter) {\n return formatter(number, {\n userTyping: userTyping,\n input: String(inputValueRef.current)\n });\n }\n\n var str = typeof number === 'number' ? num2str(number) : number; // User typing will not auto format with precision directly\n\n if (!userTyping) {\n var mergedPrecision = getPrecision(str, userTyping);\n\n if (validateNumber(str) && (decimalSeparator || mergedPrecision >= 0)) {\n // Separator\n var separatorStr = decimalSeparator || '.';\n str = toFixed(str, separatorStr, mergedPrecision);\n }\n }\n\n return str;\n }, [formatter, getPrecision, decimalSeparator]); // ========================== InputValue ==========================\n\n /**\n * Input text value control\n *\n * User can not update input content directly. It update with follow rules by priority:\n * 1. controlled `value` changed\n * * [SPECIAL] Typing like `1.` should not immediately convert to `1`\n * 2. User typing with format (not precision)\n * 3. Blur or Enter trigger revalidate\n */\n\n var _React$useState5 = React.useState(function () {\n var initValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;\n\n if (decimalValue.isInvalidate() && ['string', 'number'].includes(_typeof(initValue))) {\n return Number.isNaN(initValue) ? '' : initValue;\n }\n\n return mergedFormatter(decimalValue.toString(), false);\n }),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n inputValue = _React$useState6[0],\n setInternalInputValue = _React$useState6[1];\n\n inputValueRef.current = inputValue; // Should always be string\n\n function setInputValue(newValue, userTyping) {\n setInternalInputValue(mergedFormatter( // Invalidate number is sometime passed by external control, we should let it go\n // Otherwise is controlled by internal interactive logic which check by userTyping\n // You can ref 'show limited value when input is not focused' test for more info.\n newValue.isInvalidate() ? newValue.toString(false) : newValue.toString(!userTyping), userTyping));\n } // >>> Max & Min limit\n\n\n var maxDecimal = React.useMemo(function () {\n return getDecimalIfValidate(max);\n }, [max]);\n var minDecimal = React.useMemo(function () {\n return getDecimalIfValidate(min);\n }, [min]);\n var upDisabled = React.useMemo(function () {\n if (!maxDecimal || !decimalValue || decimalValue.isInvalidate()) {\n return false;\n }\n\n return maxDecimal.lessEquals(decimalValue);\n }, [maxDecimal, decimalValue]);\n var downDisabled = React.useMemo(function () {\n if (!minDecimal || !decimalValue || decimalValue.isInvalidate()) {\n return false;\n }\n\n return decimalValue.lessEquals(minDecimal);\n }, [minDecimal, decimalValue]); // Cursor controller\n\n var _useCursor = useCursor(inputRef.current, focus),\n _useCursor2 = _slicedToArray(_useCursor, 2),\n recordCursor = _useCursor2[0],\n restoreCursor = _useCursor2[1]; // ============================= Data =============================\n\n /**\n * Find target value closet within range.\n * e.g. [11, 28]:\n * 3 => 11\n * 23 => 23\n * 99 => 28\n */\n\n\n var getRangeValue = function getRangeValue(target) {\n // target > max\n if (maxDecimal && !target.lessEquals(maxDecimal)) {\n return maxDecimal;\n } // target < min\n\n\n if (minDecimal && !minDecimal.lessEquals(target)) {\n return minDecimal;\n }\n\n return null;\n };\n /**\n * Check value is in [min, max] range\n */\n\n\n var isInRange = function isInRange(target) {\n return !getRangeValue(target);\n };\n /**\n * Trigger `onChange` if value validated and not equals of origin.\n * Return the value that re-align in range.\n */\n\n\n var triggerValueUpdate = function triggerValueUpdate(newValue, userTyping) {\n var updateValue = newValue;\n var isRangeValidate = isInRange(updateValue) || updateValue.isEmpty(); // Skip align value when trigger value is empty.\n // We just trigger onChange(null)\n // This should not block user typing\n\n if (!updateValue.isEmpty() && !userTyping) {\n // Revert value in range if needed\n updateValue = getRangeValue(updateValue) || updateValue;\n isRangeValidate = true;\n }\n\n if (!readOnly && !disabled && isRangeValidate) {\n var numStr = updateValue.toString();\n var mergedPrecision = getPrecision(numStr, userTyping);\n\n if (mergedPrecision >= 0) {\n updateValue = getMiniDecimal(toFixed(numStr, '.', mergedPrecision));\n } // Trigger event\n\n\n if (!updateValue.equals(decimalValue)) {\n setUncontrolledDecimalValue(updateValue);\n onChange === null || onChange === void 0 ? void 0 : onChange(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue)); // Reformat input if value is not controlled\n\n if (value === undefined) {\n setInputValue(updateValue, userTyping);\n }\n }\n\n return updateValue;\n }\n\n return decimalValue;\n }; // ========================== User Input ==========================\n\n\n var onNextPromise = useFrame(); // >>> Collect input value\n\n var collectInputValue = function collectInputValue(inputStr) {\n recordCursor(); // Update inputValue incase input can not parse as number\n\n setInternalInputValue(inputStr); // Parse number\n\n if (!compositionRef.current) {\n var finalValue = mergedParser(inputStr);\n var finalDecimal = getMiniDecimal(finalValue);\n\n if (!finalDecimal.isNaN()) {\n triggerValueUpdate(finalDecimal, true);\n }\n } // Trigger onInput later to let user customize value if they want do handle something after onChange\n\n\n onInput === null || onInput === void 0 ? void 0 : onInput(inputStr); // optimize for chinese input experience\n // https://github.com/ant-design/ant-design/issues/8196\n\n onNextPromise(function () {\n var nextInputStr = inputStr;\n\n if (!parser) {\n nextInputStr = inputStr.replace(/。/g, '.');\n }\n\n if (nextInputStr !== inputStr) {\n collectInputValue(nextInputStr);\n }\n });\n }; // >>> Composition\n\n\n var onCompositionStart = function onCompositionStart() {\n compositionRef.current = true;\n };\n\n var onCompositionEnd = function onCompositionEnd() {\n compositionRef.current = false;\n collectInputValue(inputRef.current.value);\n }; // >>> Input\n\n\n var onInternalInput = function onInternalInput(e) {\n collectInputValue(e.target.value);\n }; // ============================= Step =============================\n\n\n var onInternalStep = function onInternalStep(up) {\n var _inputRef$current; // Ignore step since out of range\n\n\n if (up && upDisabled || !up && downDisabled) {\n return;\n } // Clear typing status since it may caused by up & down key.\n // We should sync with input value.\n\n\n userTypingRef.current = false;\n var stepDecimal = getMiniDecimal(step);\n\n if (!up) {\n stepDecimal = stepDecimal.negate();\n }\n\n var target = (decimalValue || getMiniDecimal(0)).add(stepDecimal.toString());\n var updatedValue = triggerValueUpdate(target, false);\n onStep === null || onStep === void 0 ? void 0 : onStep(getDecimalValue(stringMode, updatedValue), {\n offset: step,\n type: up ? 'up' : 'down'\n });\n (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();\n }; // ============================ Flush =============================\n\n /**\n * Flush current input content to trigger value change & re-formatter input if needed\n */\n\n\n var flushInputValue = function flushInputValue(userTyping) {\n var parsedValue = getMiniDecimal(mergedParser(inputValue));\n var formatValue = parsedValue;\n\n if (!parsedValue.isNaN()) {\n // Only validate value or empty value can be re-fill to inputValue\n // Reassign the formatValue within ranged of trigger control\n formatValue = triggerValueUpdate(parsedValue, userTyping);\n } else {\n formatValue = decimalValue;\n }\n\n if (value !== undefined) {\n // Reset back with controlled value first\n setInputValue(decimalValue, false);\n } else if (!formatValue.isNaN()) {\n // Reset input back since no validate value\n setInputValue(formatValue, false);\n }\n };\n\n var onKeyDown = function onKeyDown(event) {\n var which = event.which;\n userTypingRef.current = true;\n\n if (which === KeyCode.ENTER) {\n if (!compositionRef.current) {\n userTypingRef.current = false;\n }\n\n flushInputValue(false);\n onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);\n }\n\n if (keyboard === false) {\n return;\n } // Do step\n\n\n if (!compositionRef.current && [KeyCode.UP, KeyCode.DOWN].includes(which)) {\n onInternalStep(KeyCode.UP === which);\n event.preventDefault();\n }\n };\n\n var onKeyUp = function onKeyUp() {\n userTypingRef.current = false;\n }; // >>> Focus & Blur\n\n\n var onBlur = function onBlur() {\n flushInputValue(false);\n setFocus(false);\n userTypingRef.current = false;\n }; // ========================== Controlled ==========================\n // Input by precision\n\n\n useUpdateEffect(function () {\n if (!decimalValue.isInvalidate()) {\n setInputValue(decimalValue, false);\n }\n }, [precision]); // Input by value\n\n useUpdateEffect(function () {\n var newValue = getMiniDecimal(value);\n setDecimalValue(newValue);\n var currentParsedValue = getMiniDecimal(mergedParser(inputValue)); // When user typing from `1.2` to `1.`, we should not convert to `1` immediately.\n // But let it go if user set `formatter`\n\n if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) {\n // Update value as effect\n setInputValue(newValue, userTypingRef.current);\n }\n }, [value]); // ============================ Cursor ============================\n\n useUpdateEffect(function () {\n if (formatter) {\n restoreCursor();\n }\n }, [inputValue]); // ============================ Render ============================\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, \"\".concat(prefixCls, \"-focused\"), focus), _defineProperty(_classNames, \"\".concat(prefixCls, \"-disabled\"), disabled), _defineProperty(_classNames, \"\".concat(prefixCls, \"-readonly\"), readOnly), _defineProperty(_classNames, \"\".concat(prefixCls, \"-not-a-number\"), decimalValue.isNaN()), _defineProperty(_classNames, \"\".concat(prefixCls, \"-out-of-range\"), !decimalValue.isInvalidate() && !isInRange(decimalValue)), _classNames)),\n style: style,\n onFocus: function onFocus() {\n setFocus(true);\n },\n onBlur: onBlur,\n onKeyDown: onKeyDown,\n onKeyUp: onKeyUp,\n onCompositionStart: onCompositionStart,\n onCompositionEnd: onCompositionEnd\n }, controls && /*#__PURE__*/React.createElement(StepHandler, {\n prefixCls: prefixCls,\n upNode: upHandler,\n downNode: downHandler,\n upDisabled: upDisabled,\n downDisabled: downDisabled,\n onStep: onInternalStep\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(inputClassName, \"-wrap\")\n }, /*#__PURE__*/React.createElement(\"input\", _extends({\n autoComplete: \"off\",\n role: \"spinbutton\",\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": decimalValue.isInvalidate() ? null : decimalValue.toString(),\n step: step\n }, inputProps, {\n ref: composeRef(inputRef, ref),\n className: inputClassName,\n value: inputValue,\n onChange: onInternalInput,\n disabled: disabled,\n readOnly: readOnly\n }))));\n});\nInputNumber.displayName = 'InputNumber';\nexport default InputNumber;","import { useRef } from 'react';\nimport warning from \"rc-util/es/warning\";\n/**\n * Keep input cursor in the correct position if possible.\n * Is this necessary since we have `formatter` which may mass the content?\n */\n\nexport default function useCursor(input, focused) {\n var selectionRef = useRef(null);\n\n function recordCursor() {\n // Record position\n try {\n var start = input.selectionStart,\n end = input.selectionEnd,\n value = input.value;\n var beforeTxt = value.substring(0, start);\n var afterTxt = value.substring(end);\n selectionRef.current = {\n start: start,\n end: end,\n value: value,\n beforeTxt: beforeTxt,\n afterTxt: afterTxt\n };\n } catch (e) {// Fix error in Chrome:\n // Failed to read the 'selectionStart' property from 'HTMLInputElement'\n // http://stackoverflow.com/q/21177489/3040605\n }\n }\n /**\n * Restore logic:\n * 1. back string same\n * 2. start string same\n */\n\n\n function restoreCursor() {\n if (input && selectionRef.current && focused) {\n try {\n var value = input.value;\n var _selectionRef$current = selectionRef.current,\n beforeTxt = _selectionRef$current.beforeTxt,\n afterTxt = _selectionRef$current.afterTxt,\n start = _selectionRef$current.start;\n var startPos = value.length;\n\n if (value.endsWith(afterTxt)) {\n startPos = value.length - selectionRef.current.afterTxt.length;\n } else if (value.startsWith(beforeTxt)) {\n startPos = beforeTxt.length;\n } else {\n var beforeLastChar = beforeTxt[start - 1];\n var newIndex = value.indexOf(beforeLastChar, start - 1);\n\n if (newIndex !== -1) {\n startPos = newIndex + 1;\n }\n }\n\n input.setSelectionRange(startPos, startPos);\n } catch (e) {\n warning(false, \"Something warning of cursor restore. Please fire issue about this: \".concat(e.message));\n }\n }\n }\n\n return [recordCursor, restoreCursor];\n}","import { useRef, useEffect } from 'react';\nimport raf from \"rc-util/es/raf\";\n/**\n * Always trigger latest once when call multiple time\n */\n\nexport default (function () {\n var idRef = useRef(0);\n\n var cleanUp = function cleanUp() {\n raf.cancel(idRef.current);\n };\n\n useEffect(function () {\n return cleanUp;\n }, []);\n return function (callback) {\n cleanUp();\n idRef.current = raf(function () {\n callback();\n });\n };\n});","import InputNumber from './InputNumber';\nexport default InputNumber;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\n\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nimport DownOutlined from \"@ant-design/icons/es/icons/DownOutlined\";\nimport UpOutlined from \"@ant-design/icons/es/icons/UpOutlined\";\nimport classNames from 'classnames';\nimport RcInputNumber from 'rc-input-number';\nimport * as React from 'react';\nimport { useContext } from 'react';\nimport { ConfigContext } from '../config-provider';\nimport DisabledContext from '../config-provider/DisabledContext';\nimport SizeContext from '../config-provider/SizeContext';\nimport { FormItemInputContext, NoFormStyle } from '../form/context';\nimport { cloneElement } from '../_util/reactNode';\nimport { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';\nvar InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var _classNames;\n\n var _React$useContext = React.useContext(ConfigContext),\n getPrefixCls = _React$useContext.getPrefixCls,\n direction = _React$useContext.direction;\n\n var size = React.useContext(SizeContext);\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n focused = _React$useState2[0],\n setFocus = _React$useState2[1];\n\n var inputRef = React.useRef(null);\n React.useImperativeHandle(ref, function () {\n return inputRef.current;\n });\n\n var className = props.className,\n customizeSize = props.size,\n customDisabled = props.disabled,\n customizePrefixCls = props.prefixCls,\n addonBefore = props.addonBefore,\n addonAfter = props.addonAfter,\n prefix = props.prefix,\n _props$bordered = props.bordered,\n bordered = _props$bordered === void 0 ? true : _props$bordered,\n readOnly = props.readOnly,\n customStatus = props.status,\n controls = props.controls,\n others = __rest(props, [\"className\", \"size\", \"disabled\", \"prefixCls\", \"addonBefore\", \"addonAfter\", \"prefix\", \"bordered\", \"readOnly\", \"status\", \"controls\"]);\n\n var prefixCls = getPrefixCls('input-number', customizePrefixCls);\n var upIcon = /*#__PURE__*/React.createElement(UpOutlined, {\n className: \"\".concat(prefixCls, \"-handler-up-inner\")\n });\n var downIcon = /*#__PURE__*/React.createElement(DownOutlined, {\n className: \"\".concat(prefixCls, \"-handler-down-inner\")\n });\n var controlsTemp = typeof controls === 'boolean' ? controls : undefined;\n\n if (_typeof(controls) === 'object') {\n upIcon = typeof controls.upIcon === 'undefined' ? upIcon : /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-handler-up-inner\")\n }, controls.upIcon);\n downIcon = typeof controls.downIcon === 'undefined' ? downIcon : /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-handler-down-inner\")\n }, controls.downIcon);\n }\n\n var _useContext = useContext(FormItemInputContext),\n hasFeedback = _useContext.hasFeedback,\n contextStatus = _useContext.status,\n isFormItemInput = _useContext.isFormItemInput,\n feedbackIcon = _useContext.feedbackIcon;\n\n var mergedStatus = getMergedStatus(contextStatus, customStatus);\n var mergeSize = customizeSize || size; // ===================== Disabled =====================\n\n var disabled = React.useContext(DisabledContext);\n var mergedDisabled = customDisabled || disabled;\n var inputNumberClass = classNames((_classNames = {}, _defineProperty(_classNames, \"\".concat(prefixCls, \"-lg\"), mergeSize === 'large'), _defineProperty(_classNames, \"\".concat(prefixCls, \"-sm\"), mergeSize === 'small'), _defineProperty(_classNames, \"\".concat(prefixCls, \"-rtl\"), direction === 'rtl'), _defineProperty(_classNames, \"\".concat(prefixCls, \"-borderless\"), !bordered), _defineProperty(_classNames, \"\".concat(prefixCls, \"-in-form-item\"), isFormItemInput), _classNames), getStatusClassNames(prefixCls, mergedStatus), className);\n var element = /*#__PURE__*/React.createElement(RcInputNumber, _extends({\n ref: inputRef,\n disabled: mergedDisabled,\n className: inputNumberClass,\n upHandler: upIcon,\n downHandler: downIcon,\n prefixCls: prefixCls,\n readOnly: readOnly,\n controls: controlsTemp\n }, others));\n\n if (prefix != null || hasFeedback) {\n var _classNames2;\n\n var affixWrapperCls = classNames(\"\".concat(prefixCls, \"-affix-wrapper\"), getStatusClassNames(\"\".concat(prefixCls, \"-affix-wrapper\"), mergedStatus, hasFeedback), (_classNames2 = {}, _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-focused\"), focused), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-disabled\"), props.disabled), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-sm\"), size === 'small'), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-lg\"), size === 'large'), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-rtl\"), direction === 'rtl'), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-readonly\"), readOnly), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-affix-wrapper-borderless\"), !bordered), _defineProperty(_classNames2, \"\".concat(className), !(addonBefore || addonAfter) && className), _classNames2));\n element = /*#__PURE__*/React.createElement(\"div\", {\n className: affixWrapperCls,\n style: props.style,\n onMouseUp: function onMouseUp() {\n return inputRef.current.focus();\n }\n }, prefix && /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-prefix\")\n }, prefix), cloneElement(element, {\n style: null,\n value: props.value,\n onFocus: function onFocus(event) {\n var _a;\n\n setFocus(true);\n (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);\n },\n onBlur: function onBlur(event) {\n var _a;\n\n setFocus(false);\n (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);\n }\n }), hasFeedback && /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-suffix\")\n }, feedbackIcon));\n }\n\n if (addonBefore != null || addonAfter != null) {\n var _classNames4;\n\n var wrapperClassName = \"\".concat(prefixCls, \"-group\");\n var addonClassName = \"\".concat(wrapperClassName, \"-addon\");\n var addonBeforeNode = addonBefore ? /*#__PURE__*/React.createElement(\"div\", {\n className: addonClassName\n }, addonBefore) : null;\n var addonAfterNode = addonAfter ? /*#__PURE__*/React.createElement(\"div\", {\n className: addonClassName\n }, addonAfter) : null;\n var mergedWrapperClassName = classNames(\"\".concat(prefixCls, \"-wrapper\"), wrapperClassName, _defineProperty({}, \"\".concat(wrapperClassName, \"-rtl\"), direction === 'rtl'));\n var mergedGroupClassName = classNames(\"\".concat(prefixCls, \"-group-wrapper\"), (_classNames4 = {}, _defineProperty(_classNames4, \"\".concat(prefixCls, \"-group-wrapper-sm\"), size === 'small'), _defineProperty(_classNames4, \"\".concat(prefixCls, \"-group-wrapper-lg\"), size === 'large'), _defineProperty(_classNames4, \"\".concat(prefixCls, \"-group-wrapper-rtl\"), direction === 'rtl'), _classNames4), getStatusClassNames(\"\".concat(prefixCls, \"-group-wrapper\"), mergedStatus, hasFeedback), className);\n element = /*#__PURE__*/React.createElement(\"div\", {\n className: mergedGroupClassName,\n style: props.style\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: mergedWrapperClassName\n }, addonBeforeNode && /*#__PURE__*/React.createElement(NoFormStyle, {\n status: true,\n override: true\n }, addonBeforeNode), cloneElement(element, {\n style: null,\n disabled: mergedDisabled\n }), addonAfterNode && /*#__PURE__*/React.createElement(NoFormStyle, {\n status: true,\n override: true\n }, addonAfterNode)));\n }\n\n return element;\n});\nexport default InputNumber;","import React, { useState } from 'react'\n\nimport { Button, Modal, InputNumber, Tooltip, message } from 'antd'\nimport classNames from 'classnames'\n\nconst SSOP_MAX_USERS = 100\n\nexport const DifferentiatedPricingConfirmationModal = (props) => {\n const annualBillingPeriod = props.billingPeriod === 'annual'\n const minUsers = annualBillingPeriod ? 1 : 0\n const isRenewal = props.renewal\n\n const [standardUserCount, setStandardUserCount] = useState(Math.max(Math.round(props.numUsers / 3), minUsers))\n const [endUserCount, setEndUserCount] = useState(Math.max(Math.round((props.numUsers / 3) * 2), minUsers))\n const [loading, setLoading] = useState(false);\n\n const createDifferentiatedCheckoutSession = async () => {\n const REDIRECT_PATH = 'billing'\n let token = document.querySelector('meta[name=\"csrf-token\"]').content\n let url = annualBillingPeriod\n ? '/api/v1/create_annual_stripe_checkout_session'\n : '/api/v1/create_monthly_stripe_checkout_session'\n const resp = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': token,\n },\n body: JSON.stringify({\n plan_name: props.planName,\n redirect_url: `${window.location.origin}/${REDIRECT_PATH}`,\n billing_period: props.billingPeriod,\n is_differentiated: true,\n builder_count: standardUserCount,\n end_user_count: endUserCount,\n currency: 'USD',\n }),\n })\n\n if (resp.ok) {\n const respBody = await resp.json()\n window.location.href = respBody.session_url\n } else if (resp.status === 400) {\n const respBody = await resp.json()\n message.error(respBody.error.message)\n setLoading(false)\n } else {\n message.error('Unable to create checkout session. Please try again later.')\n setLoading(false)\n }\n }\n const updateSubscriptionSchedule = async () => {\n let token = document.querySelector('meta[name=\"csrf-token\"]').content;\n const resp = await fetch('/api/v1/update_subscription_schedule', {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n 'X-CSRF-Token': token\n },\n body: JSON.stringify({\n plan_name: props.planName,\n builder_count: standardUserCount,\n end_user_count: endUserCount,\n cancelled: false,\n })\n })\n if (resp.ok) {\n message.success('Subscription updated successfully')\n } else {\n message.error('Error scheduling subscription update, please try again later.')\n }\n setLoading(false)\n props.onCancel()\n }\n\n\n let headerText\n if (isRenewal) {\n headerText = `You can update your renewal until ${props.firstBillingDate}. If you don't update, we'll automatically subscribe you with the same plan and same number of seats for next year. `\n } else if (annualBillingPeriod) {\n headerText =\n 'Annual pricing offers a discounted rate for pre-paying seats for each user type. Any additional users will be billed on a monthly basis.'\n } else {\n headerText =\n 'Each month you’ll be charged for standard users and end users enabled on Retool. User type (and associated price) is determined automatically based on a user’s Retool activity during the previous month. '\n }\n\n const handleOk = () => {\n setLoading(true)\n return isRenewal ? updateSubscriptionSchedule() : createDifferentiatedCheckoutSession()\n }\n\n return (\n\n {headerText}\n
\n\n \n {annualBillingPeriod ? 'Select user types' : 'Price estimator (optional)'}\n
\n \n {annualBillingPeriod\n ? `Enter the number of seats you’d like to purchase for each user type. ${props.numUsers ? `Default estimates are based on the\n ${props.numUsers} users currently in your organization.` : ''}`\n : `Use this calculator to estimate your monthly payment. ${props.numUsers ? `Initial numbers have been approximated based on the ${props.numUsers} users currently enabled.` : ''}`}\n
\n \n
\n \n
\n \n {\n n = n ?? 0\n if (n >= minUsers && n + endUserCount <= SSOP_MAX_USERS) {\n setStandardUserCount(n)\n }\n }}\n aria-label=\"Standard user count\"\n />\n
\n \n \n \n Standard user\n
\n \n {`${props.currencySymbol + props.standardUserCost}/month, billed ${\n annualBillingPeriod ? 'annually' : 'monthly'\n }`}
\n {`${props.currencySymbol + standardUserCount * props.standardUserCost}`}
\n \n \n
\n \n
\n \n {\n n = n ?? 0\n if (n >= minUsers && n + standardUserCount <= SSOP_MAX_USERS) {\n setEndUserCount(n)\n }\n }}\n aria-label=\"End user count\"\n />\n
\n \n \n \n End user\n
\n \n {`${props.currencySymbol + props.endUserCost}/month, billed ${\n annualBillingPeriod ? 'annually' : 'monthly'\n }`}
\n {`${props.currencySymbol + endUserCount * props.endUserCost}`}
\n \n {!annualBillingPeriod && (\n Estimated Monthly Pricing
\n {`${\n props.currencySymbol + (standardUserCount * props.standardUserCost + endUserCount * props.endUserCost)\n }`}
\n \n )}\n \n Subtotal
\n {`${\n props.currencySymbol + (standardUserCount * props.standardUserCost + endUserCount * props.endUserCost)\n } (${\n props.currencySymbol +\n 12 * (standardUserCount * props.standardUserCost + endUserCount * props.endUserCost)\n }/year)`}
\n \n ) : (\n <>\n First bill will be on {props.firstBillingDate}
\n Due today: {props.currencySymbol}0
\n \n )}\n \n \n )\n}\n","import _classCallCheck from \"@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/esm/createClass\";\nimport _inherits from \"@babel/runtime/helpers/esm/inherits\";\nimport _createSuper from \"@babel/runtime/helpers/esm/createSuper\";\nimport * as React from 'react';\nimport Alert from '.';\n\nvar ErrorBoundary = /*#__PURE__*/function (_React$Component) {\n _inherits(ErrorBoundary, _React$Component);\n\n var _super = _createSuper(ErrorBoundary);\n\n function ErrorBoundary() {\n var _this;\n\n _classCallCheck(this, ErrorBoundary);\n\n _this = _super.apply(this, arguments);\n _this.state = {\n error: undefined,\n info: {\n componentStack: ''\n }\n };\n return _this;\n }\n\n _createClass(ErrorBoundary, [{\n key: \"componentDidCatch\",\n value: function componentDidCatch(error, info) {\n this.setState({\n error: error,\n info: info\n });\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n message = _this$props.message,\n description = _this$props.description,\n children = _this$props.children;\n var _this$state = this.state,\n error = _this$state.error,\n info = _this$state.info;\n var componentStack = info && info.componentStack ? info.componentStack : null;\n var errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;\n var errorDescription = typeof description === 'undefined' ? componentStack : description;\n\n if (error) {\n return /*#__PURE__*/React.createElement(Alert, {\n type: \"error\",\n message: errorMessage,\n description: /*#__PURE__*/React.createElement(\"pre\", null, errorDescription)\n });\n }\n\n return children;\n }\n }]);\n\n return ErrorBoundary;\n}(React.Component);\n\nexport { ErrorBoundary as default };","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\n\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nimport CheckCircleFilled from \"@ant-design/icons/es/icons/CheckCircleFilled\";\nimport CheckCircleOutlined from \"@ant-design/icons/es/icons/CheckCircleOutlined\";\nimport CloseCircleFilled from \"@ant-design/icons/es/icons/CloseCircleFilled\";\nimport CloseCircleOutlined from \"@ant-design/icons/es/icons/CloseCircleOutlined\";\nimport CloseOutlined from \"@ant-design/icons/es/icons/CloseOutlined\";\nimport ExclamationCircleFilled from \"@ant-design/icons/es/icons/ExclamationCircleFilled\";\nimport ExclamationCircleOutlined from \"@ant-design/icons/es/icons/ExclamationCircleOutlined\";\nimport InfoCircleFilled from \"@ant-design/icons/es/icons/InfoCircleFilled\";\nimport InfoCircleOutlined from \"@ant-design/icons/es/icons/InfoCircleOutlined\";\nimport classNames from 'classnames';\nimport CSSMotion from 'rc-motion';\nimport * as React from 'react';\nimport { ConfigContext } from '../config-provider';\nimport getDataOrAriaProps from '../_util/getDataOrAriaProps';\nimport { replaceElement } from '../_util/reactNode';\nimport ErrorBoundary from './ErrorBoundary';\nvar iconMapFilled = {\n success: CheckCircleFilled,\n info: InfoCircleFilled,\n error: CloseCircleFilled,\n warning: ExclamationCircleFilled\n};\nvar iconMapOutlined = {\n success: CheckCircleOutlined,\n info: InfoCircleOutlined,\n error: CloseCircleOutlined,\n warning: ExclamationCircleOutlined\n};\n\nvar IconNode = function IconNode(props) {\n var description = props.description,\n icon = props.icon,\n prefixCls = props.prefixCls,\n type = props.type;\n var iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;\n\n if (icon) {\n return replaceElement(icon, /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-icon\")\n }, icon), function () {\n return {\n className: classNames(\"\".concat(prefixCls, \"-icon\"), _defineProperty({}, icon.props.className, icon.props.className))\n };\n });\n }\n\n return /*#__PURE__*/React.createElement(iconType, {\n className: \"\".concat(prefixCls, \"-icon\")\n });\n};\n\nvar CloseIcon = function CloseIcon(props) {\n var isClosable = props.isClosable,\n closeText = props.closeText,\n prefixCls = props.prefixCls,\n closeIcon = props.closeIcon,\n handleClose = props.handleClose;\n return isClosable ? /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n onClick: handleClose,\n className: \"\".concat(prefixCls, \"-close-icon\"),\n tabIndex: 0\n }, closeText ? /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-close-text\")\n }, closeText) : closeIcon) : null;\n};\n\nvar Alert = function Alert(_a) {\n var _classNames2;\n\n var description = _a.description,\n customizePrefixCls = _a.prefixCls,\n message = _a.message,\n banner = _a.banner,\n _a$className = _a.className,\n className = _a$className === void 0 ? '' : _a$className,\n style = _a.style,\n onMouseEnter = _a.onMouseEnter,\n onMouseLeave = _a.onMouseLeave,\n onClick = _a.onClick,\n afterClose = _a.afterClose,\n showIcon = _a.showIcon,\n closable = _a.closable,\n closeText = _a.closeText,\n _a$closeIcon = _a.closeIcon,\n closeIcon = _a$closeIcon === void 0 ? /*#__PURE__*/React.createElement(CloseOutlined, null) : _a$closeIcon,\n action = _a.action,\n props = __rest(_a, [\"description\", \"prefixCls\", \"message\", \"banner\", \"className\", \"style\", \"onMouseEnter\", \"onMouseLeave\", \"onClick\", \"afterClose\", \"showIcon\", \"closable\", \"closeText\", \"closeIcon\", \"action\"]);\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n closed = _React$useState2[0],\n setClosed = _React$useState2[1];\n\n var ref = React.useRef();\n\n var _React$useContext = React.useContext(ConfigContext),\n getPrefixCls = _React$useContext.getPrefixCls,\n direction = _React$useContext.direction;\n\n var prefixCls = getPrefixCls('alert', customizePrefixCls);\n\n var handleClose = function handleClose(e) {\n var _a;\n\n setClosed(true);\n (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);\n };\n\n var getType = function getType() {\n var type = props.type;\n\n if (type !== undefined) {\n return type;\n } // banner 模式默认为警告\n\n\n return banner ? 'warning' : 'info';\n }; // closeable when closeText is assigned\n\n\n var isClosable = closeText ? true : closable;\n var type = getType(); // banner 模式默认有 Icon\n\n var isShowIcon = banner && showIcon === undefined ? true : showIcon;\n var alertCls = classNames(prefixCls, \"\".concat(prefixCls, \"-\").concat(type), (_classNames2 = {}, _defineProperty(_classNames2, \"\".concat(prefixCls, \"-with-description\"), !!description), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-no-icon\"), !isShowIcon), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-banner\"), !!banner), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-rtl\"), direction === 'rtl'), _classNames2), className);\n var dataOrAriaProps = getDataOrAriaProps(props);\n return /*#__PURE__*/React.createElement(CSSMotion, {\n visible: !closed,\n motionName: \"\".concat(prefixCls, \"-motion\"),\n motionAppear: false,\n motionEnter: false,\n onLeaveStart: function onLeaveStart(node) {\n return {\n maxHeight: node.offsetHeight\n };\n },\n onLeaveEnd: afterClose\n }, function (_ref) {\n var motionClassName = _ref.className,\n motionStyle = _ref.style;\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref,\n \"data-show\": !closed,\n className: classNames(alertCls, motionClassName),\n style: _extends(_extends({}, style), motionStyle),\n onMouseEnter: onMouseEnter,\n onMouseLeave: onMouseLeave,\n onClick: onClick,\n role: \"alert\"\n }, dataOrAriaProps), isShowIcon ? /*#__PURE__*/React.createElement(IconNode, {\n description: description,\n icon: props.icon,\n prefixCls: prefixCls,\n type: type\n }) : null, /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-content\")\n }, message ? /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-message\")\n }, message) : null, description ? /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-description\")\n }, description) : null), action ? /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-action\")\n }, action) : null, /*#__PURE__*/React.createElement(CloseIcon, {\n isClosable: !!isClosable,\n closeText: closeText,\n prefixCls: prefixCls,\n closeIcon: closeIcon,\n handleClose: handleClose\n }));\n });\n};\n\nAlert.ErrorBoundary = ErrorBoundary;\nexport default Alert;","import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport * as React from 'react';\nimport CSSMotion from 'rc-motion';\nimport classNames from 'classnames';\nimport useLayoutEffect from \"rc-util/es/hooks/useLayoutEffect\";\nimport { composeRef } from \"rc-util/es/ref\";\n\nvar calcThumbStyle = function calcThumbStyle(targetElement) {\n return targetElement ? {\n left: targetElement.offsetLeft,\n width: targetElement.clientWidth\n } : null;\n};\n\nvar toPX = function toPX(value) {\n return value !== undefined ? \"\".concat(value, \"px\") : undefined;\n};\n\nexport default function MotionThumb(props) {\n var prefixCls = props.prefixCls,\n containerRef = props.containerRef,\n value = props.value,\n getValueIndex = props.getValueIndex,\n motionName = props.motionName,\n onMotionStart = props.onMotionStart,\n onMotionEnd = props.onMotionEnd;\n var thumbRef = React.useRef(null);\n\n var _React$useState = React.useState(value),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n prevValue = _React$useState2[0],\n setPrevValue = _React$useState2[1]; // =========================== Effect ===========================\n\n\n var findValueElement = function findValueElement(val) {\n var _containerRef$current;\n\n var index = getValueIndex(val);\n var ele = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelectorAll(\".\".concat(prefixCls, \"-item\"))[index];\n return ele;\n };\n\n var _React$useState3 = React.useState(null),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n prevStyle = _React$useState4[0],\n setPrevStyle = _React$useState4[1];\n\n var _React$useState5 = React.useState(null),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n nextStyle = _React$useState6[0],\n setNextStyle = _React$useState6[1];\n\n useLayoutEffect(function () {\n if (prevValue !== value) {\n var prev = findValueElement(prevValue);\n var next = findValueElement(value);\n var calcPrevStyle = calcThumbStyle(prev);\n var calcNextStyle = calcThumbStyle(next);\n setPrevValue(value);\n setPrevStyle(calcPrevStyle);\n setNextStyle(calcNextStyle);\n\n if (prev && next) {\n onMotionStart();\n } else {\n onMotionEnd();\n }\n }\n }, [value]); // =========================== Motion ===========================\n\n var onAppearStart = function onAppearStart() {\n return {\n transform: \"translateX(var(--thumb-start-left))\",\n width: \"var(--thumb-start-width)\"\n };\n };\n\n var onAppearActive = function onAppearActive() {\n return {\n transform: \"translateX(var(--thumb-active-left))\",\n width: \"var(--thumb-active-width)\"\n };\n };\n\n var onAppearEnd = function onAppearEnd() {\n setPrevStyle(null);\n setNextStyle(null);\n onMotionEnd();\n }; // =========================== Render ===========================\n // No need motion when nothing exist in queue\n\n\n if (!prevStyle || !nextStyle) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(CSSMotion, {\n visible: true,\n motionName: motionName,\n motionAppear: true,\n onAppearStart: onAppearStart,\n onAppearActive: onAppearActive,\n onAppearEnd: onAppearEnd\n }, function (_ref, ref) {\n var motionClassName = _ref.className,\n motionStyle = _ref.style;\n\n var mergedStyle = _objectSpread(_objectSpread({}, motionStyle), {}, {\n '--thumb-start-left': toPX(prevStyle === null || prevStyle === void 0 ? void 0 : prevStyle.left),\n '--thumb-start-width': toPX(prevStyle === null || prevStyle === void 0 ? void 0 : prevStyle.width),\n '--thumb-active-left': toPX(nextStyle === null || nextStyle === void 0 ? void 0 : nextStyle.left),\n '--thumb-active-width': toPX(nextStyle === null || nextStyle === void 0 ? void 0 : nextStyle.width)\n }); // It's little ugly which should be refactor when @umi/test update to latest jsdom\n\n\n var motionProps = {\n ref: composeRef(thumbRef, ref),\n style: mergedStyle,\n className: classNames(\"\".concat(prefixCls, \"-thumb\"), motionClassName)\n };\n\n if (process.env.NODE_ENV === 'test') {\n motionProps['data-test-style'] = JSON.stringify(mergedStyle);\n }\n\n return /*#__PURE__*/React.createElement(\"div\", _objectSpread({}, motionProps));\n });\n}","import _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nvar _excluded = [\"prefixCls\", \"direction\", \"options\", \"disabled\", \"defaultValue\", \"value\", \"onChange\", \"className\", \"motionName\"];\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport useMergedState from \"rc-util/es/hooks/useMergedState\";\nimport { composeRef } from \"rc-util/es/ref\";\nimport omit from \"rc-util/es/omit\";\nimport MotionThumb from './MotionThumb';\n\nfunction getValidTitle(option) {\n if (typeof option.title !== 'undefined') {\n return option.title;\n } // read `label` when title is `undefined`\n\n\n if (_typeof(option.label) !== 'object') {\n var _option$label;\n\n return (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString();\n }\n}\n\nfunction normalizeOptions(options) {\n return options.map(function (option) {\n if (_typeof(option) === 'object' && option !== null) {\n var validTitle = getValidTitle(option);\n return _objectSpread(_objectSpread({}, option), {}, {\n title: validTitle\n });\n }\n\n return {\n label: option === null || option === void 0 ? void 0 : option.toString(),\n title: option === null || option === void 0 ? void 0 : option.toString(),\n value: option\n };\n });\n}\n\nvar InternalSegmentedOption = function InternalSegmentedOption(_ref) {\n var prefixCls = _ref.prefixCls,\n className = _ref.className,\n disabled = _ref.disabled,\n checked = _ref.checked,\n label = _ref.label,\n title = _ref.title,\n value = _ref.value,\n onChange = _ref.onChange;\n\n var handleChange = function handleChange(event) {\n if (disabled) {\n return;\n }\n\n onChange(event, value);\n };\n\n return /*#__PURE__*/React.createElement(\"label\", {\n className: classNames(className, _defineProperty({}, \"\".concat(prefixCls, \"-item-disabled\"), disabled))\n }, /*#__PURE__*/React.createElement(\"input\", {\n className: \"\".concat(prefixCls, \"-item-input\"),\n type: \"radio\",\n disabled: disabled,\n checked: checked,\n onChange: handleChange\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-item-label\"),\n title: title\n }, label));\n};\n\nvar Segmented = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var _segmentedOptions$, _classNames2;\n\n var _props$prefixCls = props.prefixCls,\n prefixCls = _props$prefixCls === void 0 ? 'rc-segmented' : _props$prefixCls,\n direction = props.direction,\n options = props.options,\n disabled = props.disabled,\n defaultValue = props.defaultValue,\n value = props.value,\n onChange = props.onChange,\n _props$className = props.className,\n className = _props$className === void 0 ? '' : _props$className,\n _props$motionName = props.motionName,\n motionName = _props$motionName === void 0 ? 'thumb-motion' : _props$motionName,\n restProps = _objectWithoutProperties(props, _excluded);\n\n var containerRef = React.useRef(null);\n var mergedRef = React.useMemo(function () {\n return composeRef(containerRef, ref);\n }, [containerRef, ref]);\n var segmentedOptions = React.useMemo(function () {\n return normalizeOptions(options);\n }, [options]); // Note: We should not auto switch value when value not exist in options\n // which may break single source of truth.\n\n var _useMergedState = useMergedState((_segmentedOptions$ = segmentedOptions[0]) === null || _segmentedOptions$ === void 0 ? void 0 : _segmentedOptions$.value, {\n value: value,\n defaultValue: defaultValue\n }),\n _useMergedState2 = _slicedToArray(_useMergedState, 2),\n rawValue = _useMergedState2[0],\n setRawValue = _useMergedState2[1]; // ======================= Change ========================\n\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n thumbShow = _React$useState2[0],\n setThumbShow = _React$useState2[1];\n\n var handleChange = function handleChange(event, val) {\n if (disabled) {\n return;\n }\n\n setRawValue(val);\n onChange === null || onChange === void 0 ? void 0 : onChange(val);\n };\n\n var divProps = omit(restProps, ['children']);\n return /*#__PURE__*/React.createElement(\"div\", _objectSpread(_objectSpread({}, divProps), {}, {\n className: classNames(prefixCls, (_classNames2 = {}, _defineProperty(_classNames2, \"\".concat(prefixCls, \"-rtl\"), direction === 'rtl'), _defineProperty(_classNames2, \"\".concat(prefixCls, \"-disabled\"), disabled), _classNames2), className),\n ref: mergedRef\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-group\")\n }, /*#__PURE__*/React.createElement(MotionThumb, {\n prefixCls: prefixCls,\n value: rawValue,\n containerRef: containerRef,\n motionName: \"\".concat(prefixCls, \"-\").concat(motionName),\n getValueIndex: function getValueIndex(val) {\n return segmentedOptions.findIndex(function (n) {\n return n.value === val;\n });\n },\n onMotionStart: function onMotionStart() {\n setThumbShow(true);\n },\n onMotionEnd: function onMotionEnd() {\n setThumbShow(false);\n }\n }), segmentedOptions.map(function (segmentedOption) {\n return /*#__PURE__*/React.createElement(InternalSegmentedOption, _objectSpread(_objectSpread({\n key: segmentedOption.value,\n prefixCls: prefixCls,\n className: classNames(segmentedOption.className, \"\".concat(prefixCls, \"-item\"), _defineProperty({}, \"\".concat(prefixCls, \"-item-selected\"), segmentedOption.value === rawValue && !thumbShow)),\n checked: segmentedOption.value === rawValue,\n onChange: handleChange\n }, segmentedOption), {}, {\n disabled: !!disabled || !!segmentedOption.disabled\n }));\n })));\n});\nSegmented.displayName = 'Segmented';\nSegmented.defaultProps = {\n options: []\n};\nexport default Segmented;","import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\n\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nimport classNames from 'classnames';\nimport RcSegmented from 'rc-segmented';\nimport * as React from 'react';\nimport { ConfigContext } from '../config-provider';\nimport SizeContext from '../config-provider/SizeContext';\n\nfunction isSegmentedLabeledOptionWithIcon(option) {\n return _typeof(option) === 'object' && !!(option === null || option === void 0 ? void 0 : option.icon);\n}\n\nvar Segmented = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var _classNames;\n\n var customizePrefixCls = props.prefixCls,\n className = props.className,\n block = props.block,\n options = props.options,\n _props$size = props.size,\n customSize = _props$size === void 0 ? 'middle' : _props$size,\n restProps = __rest(props, [\"prefixCls\", \"className\", \"block\", \"options\", \"size\"]);\n\n var _React$useContext = React.useContext(ConfigContext),\n getPrefixCls = _React$useContext.getPrefixCls,\n direction = _React$useContext.direction;\n\n var prefixCls = getPrefixCls('segmented', customizePrefixCls); // ===================== Size =====================\n\n var size = React.useContext(SizeContext);\n var mergedSize = customSize || size; // syntactic sugar to support `icon` for Segmented Item\n\n var extendedOptions = React.useMemo(function () {\n return options.map(function (option) {\n if (isSegmentedLabeledOptionWithIcon(option)) {\n var icon = option.icon,\n label = option.label,\n restOption = __rest(option, [\"icon\", \"label\"]);\n\n return _extends(_extends({}, restOption), {\n label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-item-icon\")\n }, icon), label && /*#__PURE__*/React.createElement(\"span\", null, label))\n });\n }\n\n return option;\n });\n }, [options, prefixCls]);\n return /*#__PURE__*/React.createElement(RcSegmented, _extends({}, restProps, {\n className: classNames(className, (_classNames = {}, _defineProperty(_classNames, \"\".concat(prefixCls, \"-block\"), block), _defineProperty(_classNames, \"\".concat(prefixCls, \"-sm\"), mergedSize === 'small'), _defineProperty(_classNames, \"\".concat(prefixCls, \"-lg\"), mergedSize === 'large'), _classNames)),\n options: extendedOptions,\n ref: ref,\n prefixCls: prefixCls,\n direction: direction\n }));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Segmented.displayName = 'Segmented';\n}\n\nSegmented.defaultProps = {\n options: []\n};\nexport default Segmented;","import React, { useState, useEffect } from \"react\"\nimport PropTypes from \"prop-types\"\nimport { Typography, Alert, Button } from 'antd';\nimport DifferentiatedPricingBanner from \"./DifferentiatedPricingBanner\";\nimport LicenseKey from '../LicenseKey'\nimport { PlanHeaders } from './PlanComponents/PlanHeaders'\nimport { PlanFeatureNames } from './PlanComponents/PlanFeatureNames'\nimport { PlanDetails } from './PlanComponents/PlanDetails'\n\nconst { Title } = Typography;\nimport classNames from 'classnames'\n\nimport { OnPremSetupSidebar } from '../OnPremSetup'\n\nimport '../common.scss'\nimport '../OnPremSetup.scss'\nimport '../Setup.scss'\nimport './Billing.scss'\nimport '../utils/Button.scss'\nimport '../utils/Modal.scss'\nimport { Segmented } from \"antd\";\nimport { getPlanFeaturesCategories } from \"../utils/constants\";\n\nconst SsopBilling = (props) => {\n let [stripePlanId, setStripePlanId] = useState(props.stripePlanId)\n let [stripePlanName, setStripePlanName] = useState(props.stripePlanName)\n let [subscriptionStatus, setSubscriptionStatus] = useState(props.subscriptionStatus)\n let [trialExpiring, setTrialExpiring] = useState(props.trialExpiring)\n const [inBillingCompliance, setIsInBillingCompliance] = useState(true)\n\n const didClickCTA = async (planName) => {\n updateStripeSubscription(planName)\n }\n\n const className = 'billing__plans'\n\n useEffect(() => {\n const token = document.querySelector('meta[name=\"csrf-token\"]').content\n const callAPI = async () => {\n const response = await fetch('/api/v1/check_billing_compliance', {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': token,\n },\n })\n\n setIsInBillingCompliance((await response.json()).isInBillingCompliance)\n }\n\n // We only need to check if an org is in compliance when they are downgraded to Freetool\n // and are attempting to subscribe to a new plan\n if (stripePlanName === 'freetool') {\n callAPI()\n }\n }, [stripePlanName])\n\n const updateStripeSubscription = async (planName) => {\n const REDIRECT_PATH = 'billing'\n let token = document.querySelector('meta[name=\"csrf-token\"]').content;\n return fetch('/api/v1/update_stripe_subscription', {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n 'X-CSRF-Token': token\n },\n body: JSON.stringify({\n plan_name: planName,\n redirect_url: `${window.location.origin}/${REDIRECT_PATH}`,\n })\n }).then(result => {\n return result.json()\n }).then(data => {\n if (data.checkout_required) {\n window.location.href = data.session_url\n } else {\n setStripePlanId(data?.price_id ?? stripePlanId)\n setStripePlanName(data?.plan_name ?? stripePlanName)\n setSubscriptionStatus(data?.subscription_status ?? subscriptionStatus)\n setTrialExpiring(data?.trial_expiring ?? trialExpiring)\n }\n })\n }\n\n const createStripeCustomerPortalSession = async () => {\n const REDIRECT_PATH = 'billing'\n let token = document.querySelector('meta[name=\"csrf-token\"]').content;\n return fetch('/api/v1/create_stripe_customer_portal', {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n 'X-CSRF-Token': token\n },\n body: JSON.stringify({\n redirect_url: `${window.location.origin}/${REDIRECT_PATH}`\n })\n }).then(result => {\n return result.json()\n }).then(data => {\n if (data.stripe_customer_portal_url) {\n window.location.href = data.stripe_customer_portal_url\n }\n })\n }\n const useLegacyFreePlan = stripePlanName === 'free'\n const [billingPeriod, setBillingPeriod] = useState('Annual')\n\n return (\n \n
\n \n )\n}\n\nSsopBilling.propTypes = {\n stripeSubscriptionId: PropTypes.string,\n stripePlanId: PropTypes.string,\n stripePlanName: PropTypes.string,\n stripeCustomerId: PropTypes.string,\n subscriptionStatus: PropTypes.string,\n trialExpiring: PropTypes.string,\n ssopUserEmail: PropTypes.string,\n licenseKey: PropTypes.string,\n numUsers: PropTypes.number,\n upgradeRequired: PropTypes.bool,\n currentVersionNumber: PropTypes.string,\n billingType: PropTypes.string,\n subscribedBillingPeriod: PropTypes.string,\n billingStartedAt: PropTypes.number,\n};\n\nexport default SsopBilling\n","export default function _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}","export default function _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-is.production.min.js');\n} else {\n module.exports = require('./cjs/react-is.development.js');\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _classCallCheck from \"@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/esm/createClass\";\nimport _inherits from \"@babel/runtime/helpers/esm/inherits\";\nimport _createSuper from \"@babel/runtime/helpers/esm/createSuper\";\nimport * as React from 'react';\nimport { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\n\nvar Notice = /*#__PURE__*/function (_Component) {\n _inherits(Notice, _Component);\n\n var _super = _createSuper(Notice);\n\n function Notice() {\n var _this;\n\n _classCallCheck(this, Notice);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n _this.closeTimer = null;\n\n _this.close = function (e) {\n if (e) {\n e.stopPropagation();\n }\n\n _this.clearCloseTimer();\n\n var _this$props = _this.props,\n onClose = _this$props.onClose,\n noticeKey = _this$props.noticeKey;\n\n if (onClose) {\n onClose(noticeKey);\n }\n };\n\n _this.startCloseTimer = function () {\n if (_this.props.duration) {\n _this.closeTimer = window.setTimeout(function () {\n _this.close();\n }, _this.props.duration * 1000);\n }\n };\n\n _this.clearCloseTimer = function () {\n if (_this.closeTimer) {\n clearTimeout(_this.closeTimer);\n _this.closeTimer = null;\n }\n };\n\n return _this;\n }\n\n _createClass(Notice, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.startCloseTimer();\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n if (this.props.duration !== prevProps.duration || this.props.updateMark !== prevProps.updateMark || // Visible again need reset timer\n this.props.visible !== prevProps.visible && this.props.visible) {\n this.restartCloseTimer();\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.clearCloseTimer();\n }\n }, {\n key: \"restartCloseTimer\",\n value: function restartCloseTimer() {\n this.clearCloseTimer();\n this.startCloseTimer();\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n var _this$props2 = this.props,\n prefixCls = _this$props2.prefixCls,\n className = _this$props2.className,\n closable = _this$props2.closable,\n closeIcon = _this$props2.closeIcon,\n style = _this$props2.style,\n onClick = _this$props2.onClick,\n children = _this$props2.children,\n holder = _this$props2.holder;\n var componentClass = \"\".concat(prefixCls, \"-notice\");\n var dataOrAriaAttributeProps = Object.keys(this.props).reduce(function (acc, key) {\n if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {\n acc[key] = _this2.props[key];\n }\n\n return acc;\n }, {});\n var node = /*#__PURE__*/React.createElement(\"div\", _extends({\n className: classNames(componentClass, className, _defineProperty({}, \"\".concat(componentClass, \"-closable\"), closable)),\n style: style,\n onMouseEnter: this.clearCloseTimer,\n onMouseLeave: this.startCloseTimer,\n onClick: onClick\n }, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(componentClass, \"-content\")\n }, children), closable ? /*#__PURE__*/React.createElement(\"a\", {\n tabIndex: 0,\n onClick: this.close,\n className: \"\".concat(componentClass, \"-close\")\n }, closeIcon || /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(componentClass, \"-close-x\")\n })) : null);\n\n if (holder) {\n return /*#__PURE__*/ReactDOM.createPortal(node, holder);\n }\n\n return node;\n }\n }]);\n\n return Notice;\n}(Component);\n\nNotice.defaultProps = {\n onClose: function onClose() {},\n duration: 1.5\n};\nexport { Notice as default };","export default function _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}","import arrayWithHoles from \"./arrayWithHoles.js\";\nimport iterableToArray from \"./iterableToArray.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableRest from \"./nonIterableRest.js\";\nexport default function _toArray(arr) {\n return arrayWithHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableRest();\n}","/**\r\n * A collection of shims that provide minimal functionality of the ES6 collections.\r\n *\r\n * These implementations are not meant to be used outside of the ResizeObserver\r\n * modules as they cover only a limited range of use cases.\r\n */\n\n/* eslint-disable require-jsdoc, valid-jsdoc */\nvar MapShim = function () {\n if (typeof Map !== 'undefined') {\n return Map;\n }\n /**\r\n * Returns index in provided array that matches the specified key.\r\n *\r\n * @param {Array\n
\n \n \n \n Billing Details \n \n\n
\n \n \n Billing and plans \n \n
\n\n \n \n
\n\n Billing
\n \n
\n\n \n
\n \n *additional runs are available at $75 per 5000 runs per month\n \n \n
\n \n \n
\n {getPlanFeaturesCategories().map((sectionTitle, i) => (\n \n \n
\n ))}\n \n \n
\n }\n />\n \n
\n \n Use our billing portal to manage your account.
\n View invoices, update payment methods and change your billing email.\n