{"version":3,"file":"static/js/index.cf29010f.js","sources":["webpack://@jotforminc/inbox/../../libs/decryption-worker/src/CorsWorker.js","webpack://@jotforminc/inbox/../../libs/apploaders/src/Circle/index.js","webpack://@jotforminc/inbox/../../libs/placeholder/src/WorkflowStatus.js","webpack://@jotforminc/inbox/../../libs/preview/src/hocs/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/ViewWithAlignment/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Label/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/LabelWithAlignment/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/AnswerWithAlignment/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Imageline/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Hypertext/index.js","webpack://@jotforminc/inbox/../../libs/fileuploadfield/src/components/FileUploadField/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Address/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/utils/styled.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Appointment/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/AssigneeLine/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/AssigneeList/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/ImageList/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/CommaList/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/OptionItem/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/OptionList/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Checkbox/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/CheckboxList/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Fileupload/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Line/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Emoji/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/components/Tableview/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Matrix/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Rating/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Sheetbox/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Textarea/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Payments/StyledComponents.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Submission/SubmittedVia/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/Submission/Thread/index.js","webpack://@jotforminc/inbox/../../libs/answer-fields/src/fields/UserInfo/index.js","webpack://@jotforminc/inbox/../../libs/signature/src/sc/scSignature.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/SubmissionThread/scModal.js","webpack://@jotforminc/inbox/../../libs/user-list/src/styles/index.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/components/IndependentReassign.js","webpack://@jotforminc/inbox/../../libs/enterprise-components/src/components/Cover/StyledElements.tsx","webpack://@jotforminc/inbox/../../libs/enterprise-components/src/components/Image/StyledElements.tsx","webpack://@jotforminc/inbox/../../libs/workflow-components/src/SubmissionThread/EntryTypes.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/components/WorkflowStatus.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/SubmissionThread/SubThreadToggle.js","webpack://@jotforminc/inbox/../../libs/search-filter/src/components/IconRenderer.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scIndex.js","webpack://@jotforminc/inbox/../../libs/date-picker/src/index.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/components/Dropdown.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scSettings.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scAssigneeList.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/components/ResourcePicker.js","webpack://@jotforminc/inbox/../../libs/email-input/src/styles/index.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/components/AvatarHolder.js","webpack://@jotforminc/inbox/../../libs/dropdown-with-extra-elements/src/components/OptionRenderer.js","webpack://@jotforminc/inbox/../../libs/dropdown-with-extra-elements/src/components/ContainerRenderer.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/components/DropdownWithDetails.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scRevokeAccess.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scUserList.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/containers/sections/InviteByAppPrefill.js","webpack://@jotforminc/inbox/../../libs/schedule-panel/src/components/Dropdown.js","webpack://@jotforminc/inbox/../../libs/schedule-panel/src/scIndex.js","webpack://@jotforminc/inbox/../../libs/schedule-panel/src/components/Toggle.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scScheduleReminder.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scSharedWithNoOne.js","webpack://@jotforminc/inbox/../../libs/enterprise-promotions-share-panel/src/components/CollaborationModal/CollaborationModal.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scGenerateNewLink.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/components/SettingsButton.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scAccessType.js","webpack://@jotforminc/inbox/../../libs/share-panel/src/sc/scInvitePredefinedUsersSection.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/SubmissionThread/ActionLayout.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/components/ErrorAction.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/components/MultipleApprovalTakeOver.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/containers/WorkflowActions.js","webpack://@jotforminc/inbox/../../libs/apploaders/src/Inbox/index.js","webpack://@jotforminc/inbox/../../libs/agent-components/src/components/History.js","webpack://@jotforminc/inbox/./src/components/Tags/index.js","webpack://@jotforminc/inbox/../../libs/workflow-components/src/components/WorkflowButton.js","webpack://@jotforminc/inbox/../../libs/message/src/components/index.js","webpack://@jotforminc/inbox/../../libs/loading/src/components/Spinner.js","webpack://@jotforminc/inbox/./src/contexts/TagSuggestions.js","webpack://@jotforminc/inbox/./src/components/SubmissionTags/index.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/FormPicker/FormItem/styled.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/scPortalOption.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/PortalOption.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/FormPicker/CheckBox.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/ResourcePicker/items/Sheet/index.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/ResourcePicker/items/Reports/index.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/ResourcePicker/items/Approval/index.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/ResourcePicker/items/Sign/styles.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/ResourcePicker/items/Sign/index.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/ResourcePicker/items/Board/index.js","webpack://@jotforminc/inbox/../../libs/smart-list/src/components/SmartList/ControlBar/scControlBar.js","webpack://@jotforminc/inbox/../../libs/smart-list/src/components/SmartList/ControlBar/CheckBox.js","webpack://@jotforminc/inbox/../../libs/smart-list/src/components/SmartList/ControlBar/Dropdown.js","webpack://@jotforminc/inbox/../../libs/smart-list/src/components/SmartList/index.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/FormPicker/FormList/index.js","webpack://@jotforminc/inbox/../../libs/picker-modal/src/styles/ScRB.js","webpack://@jotforminc/inbox/../../libs/header-components/src/components/Navigation/ScPickerModal.js","webpack://@jotforminc/inbox/../../libs/header-components/src/components/Navigation/ScButton.js","webpack://@jotforminc/inbox/../../libs/enterprise-components/src/components/CreateNewTeamModal/CreateTeamButton.tsx","webpack://@jotforminc/inbox/./src/contexts/Assistant/constants.js","webpack://@jotforminc/inbox/./src/contexts/Assistant/index.js","webpack://@jotforminc/inbox/../../libs/apploaders/src/Container/index.js","webpack://@jotforminc/inbox/../../libs/common-button/src/components/Button.js","webpack://@jotforminc/inbox/../../libs/form-common/src/appointment.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Range.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Rating.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Slider.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Spinner.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Textarea.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Textbox.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Widget.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/helpers/ProductContainer.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Autocomp.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Appointment.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Pagebreak.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/JotCaptcha.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/ReCaptcha.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/HCaptcha.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Checkbox.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Timev2.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Datetime.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Dropdown.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Email.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/FilepickerIO.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Fullname.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Head.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Hidden.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Inline.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Location.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Matrix.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/helpers/PaypalSPBButtons.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Radio.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Time.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/fields/Imagechoice.js","webpack://@jotforminc/inbox/../../libs/form-fields/src/helpers/PaypalCommercePlatform.js","webpack://@jotforminc/inbox/../../libs/loading/src/components/Loading.js","webpack://@jotforminc/inbox/../../libs/login-flow/src/components/Password/scPassword.js","webpack://@jotforminc/inbox/../../libs/pie-timer/src/sc/scPieTimer.js","webpack://@jotforminc/inbox/../../libs/two-factor-settings/src/components/styled.js","webpack://@jotforminc/inbox/../../libs/two-factor-settings/src/sc/scTwoFactorSettings.js","webpack://@jotforminc/inbox/../../libs/option-group/src/components/StyledComponents.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/scPortalItem.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/PortalItemDefaults/TitleRenderer.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/PortalItemDefaults/DescriptionRenderer.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/PortalItemDefaults/ItemContentRenderer.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/PortalItemDefaults/IconRenderer.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/PortalItemDefaults/commonCss.js","webpack://@jotforminc/inbox/../../libs/resource-picker/src/components/PortalPicker/defaults/SmallPortalItem.js","webpack://@jotforminc/inbox/../../libs/styled-modal/src/components/StyledModal/styled.js","webpack://@jotforminc/inbox/../../libs/toggle/src/index.js","webpack://@jotforminc/inbox/../../libs/tracking/src/utils/TrackingManager.ts"],"sourcesContent":["import { UnavailableClass } from './UnavailableClass';\nconst WorkerSafe = window.Worker || UnavailableClass;\n/**\n * A Worker that can be run on a different origin by respecting CORS\n * By default, a Worker constructor that uses an url as its parameters ignores CORS\n * and fails on a different origin.\n * This way we can run web worker on scripts served by a CDN\n *\n * @see https://github.com/webpack/webpack/discussions/14648#discussioncomment-7844340\n */ export class CorsWorker extends WorkerSafe {\n    constructor(url, options){\n        const absoluteUrl = new URL(url, window.location.href).toString();\n        const workerSource = `\\\n  const urlString = ${JSON.stringify(absoluteUrl)}\n  const originURL = new URL(urlString)\n  const isValidUrl = (urlString) => { \n    try { return Boolean(new URL(urlString, originURL)) } catch(e){ return false }  \n  }\n  const originalImportScripts = self.importScripts\n  self.importScripts = (url) => {\n    /** NOTE: 1 */\n    if (url.startsWith(\"blob:\") && isValidUrl(url.replace(\"blob:\", \"\"))){\n      const urlWithoutBlob = url.replace(\"blob:\", \"\")\n      const { pathname } = new URL(urlWithoutBlob, originURL)\n      url = pathname && pathname.substring(1) /** NOTE: 2 */\n    } else if (url.startsWith(\"/static/js/\") && originURL.pathname.startsWith(\"/\")) { /** NOTE: 3 */\n      url = originURL.pathname.split(\"/\").slice(0, -3).join(\"/\") + url;\n    }\n    originalImportScripts.call(self, new URL(url, originURL).toString())\n  }\n  importScripts(urlString);\n`;\n        const blob = new window.Blob([\n            workerSource\n        ], {\n            type: 'application/javascript'\n        });\n        const objectURL = URL.createObjectURL(blob);\n        super(objectURL, options);\n        URL.revokeObjectURL(objectURL);\n    }\n}\n","/* eslint-disable react/prop-types */ import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport Container from '../Container';\nexport const LoaderSvg = Styled.svg`\nwidth: 100%;\nheight: 100%;\n.circle {\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: 10px;\n  stroke-dasharray: 140px;\n  stroke-dashoffset: 139px;\n  transform: rotate(180deg);\n}\n.c1 {\n  animation-name: circleAnim1, color;\n  animation-fill-mode: backwards;\n  animation-duration: 1.5s, 6s;\n  transform-origin: center;\n  animation-direction: normal;\n  animation-iteration-count: infinite;\n  animation-timing-function: cubic-bezier(0.21, 0.09, 0.48, 0.65), ease-out;\n}\n\n@keyframes circleAnim1 {\n  0% { stroke-dashoffset: 139px; }\n  50% {\n    stroke-dashoffset: 30px;\n    transform: rotate(400deg);\n  }\n  100% {\n    stroke-dashoffset: 140px;\n    transform: rotate(900deg);\n  }\n}\n@keyframes color {\n  0% { stroke: #0099ff; }\n  24.9% { stroke: #0099ff; }\n  25% {\n    stroke: #ff6100;\n  }\n  49.9% {\n    stroke: #ff6100;\n  }\n  50% {\n    stroke: #ffb629;\n  }\n  74.9% {\n    stroke: #ffb629;\n  }\n  75% {\n    stroke: #e4ebfc;\n  }\n  100% { stroke: #e4ebfc; }\n}\n`;\nconst Loader = ({ size, className })=>{\n    return /*#__PURE__*/ _jsx(Container, {\n        size: size,\n        className: className,\n        children: /*#__PURE__*/ _jsx(LoaderSvg, {\n            style: {\n                overflow: 'visible'\n            },\n            width: \"60\",\n            height: \"60\",\n            viewBox: \"0 0 60 60\",\n            children: /*#__PURE__*/ _jsx(\"circle\", {\n                className: \"circle c1\",\n                cx: \"30\",\n                cy: \"30\",\n                r: \"20.87\",\n                stroke: \"#0099ff\"\n            })\n        })\n    });\n};\nexport default Loader;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport Placeholder from './PlaceHolder';\nconst StyledWorkflowStatus = styled.div`\n  .jfPlaceholder {\n    &-row {\n      height: 14px;\n\n      &.forShort {\n        width: 72.5%;\n      }\n\n      &.forLong {\n        margin-top: 10px;\n      }\n    }\n  }\n`;\nconst WorkflowStatus = (_param)=>{\n    var { className } = _param, props = _object_without_properties(_param, [\n        \"className\"\n    ]);\n    return /*#__PURE__*/ _jsxs(StyledWorkflowStatus, _object_spread_props(_object_spread({\n        className: classNames('jfPlaceholder-wrapper', className)\n    }, props), {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"jfPlaceholder-row forShort\",\n                children: /*#__PURE__*/ _jsx(Placeholder, {\n                    animated: true\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"jfPlaceholder-row forLong\",\n                children: /*#__PURE__*/ _jsx(Placeholder, {\n                    animated: true\n                })\n            })\n        ]\n    }));\n};\nWorkflowStatus.propTypes = {\n    className: PropTypes.string\n};\nWorkflowStatus.defaultProps = {\n    className: ''\n};\nexport default WorkflowStatus;\n","/* eslint-disable max-len */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport Preview from '../components/Preview';\nconst getDisplayName = (WrappedComponent)=>WrappedComponent.displayName || WrappedComponent.name || 'Component';\nconst StyledPreviewWrapper = Styled.div`\n  .clickableImageWrapper {\n    cursor: pointer;\n    border-radius: 4px;\n    border: 1px solid #D9DAE4;\n    overflow: hidden;\n    transition: .3s ease-in;\n    cursor: pointer;\n    position: relative;\n    height: 80px;\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: .2s ease-in;\n    }\n\n    &::before {\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: rgba(0, 0, 0, 0.4);\n      z-index: 2;\n    }\n\n    &::after {\n      content: \"\";\n      top: 50%;\n      left: 50%;\n      width: 29px;\n      height: 29px;\n      transform: translate(-50%, -50%);\n      background-image: url(\"data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14.75' cy='14.6748' r='14' fill='%23121C48' fill-opacity='0.64'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.99573 19.5229C8.99573 19.337 8.99579 19.2315 8.99573 19.126C8.99526 18.3094 9.00063 17.4927 8.99164 16.6762C8.98744 16.293 8.7308 16.0422 8.37583 16.0407C8.0166 16.0392 7.75558 16.2888 7.75418 16.6673C7.74875 18.1255 7.7484 19.5837 7.75435 21.042C7.75593 21.4273 7.99052 21.6677 8.37233 21.6695C9.83072 21.6766 11.2892 21.6762 12.7476 21.6704C13.1241 21.669 13.3852 21.4025 13.3847 21.0562C13.3841 20.6939 13.1216 20.4349 12.7264 20.4319C11.9001 20.4254 11.0736 20.4296 10.2471 20.4294C10.1548 20.4293 10.0624 20.4294 9.97001 20.4294C9.93856 20.3865 9.90705 20.3436 9.87554 20.3008C9.97059 20.2512 10.0849 20.2211 10.1577 20.1491C10.9664 19.3492 11.769 18.5431 12.5727 17.7382C12.9918 17.3186 13.418 16.9057 13.826 16.4756C14.1538 16.1299 14.0329 15.5936 13.6039 15.4486C13.3145 15.3509 13.0824 15.4548 12.8702 15.6681C11.6769 16.8672 10.4771 18.0597 9.27904 19.254C9.2051 19.3278 9.12761 19.398 8.99573 19.5229ZM20.3851 9.81163C20.4254 9.84449 20.4657 9.87742 20.506 9.91034C20.506 10.8245 20.5022 11.7387 20.5077 12.6529C20.5101 13.0551 20.7623 13.3137 21.1273 13.3124C21.4909 13.3112 21.7453 13.0502 21.7465 12.6499C21.7511 11.2198 21.7512 9.78968 21.7466 8.3596C21.7451 7.91082 21.5096 7.67901 21.0584 7.67772C19.6406 7.67381 18.2225 7.67381 16.8046 7.67784C16.3823 7.67901 16.1161 7.93177 16.1213 8.30362C16.1264 8.67874 16.3881 8.91761 16.8148 8.91989C17.6403 8.92427 18.4658 8.92088 19.2914 8.92205C19.3732 8.92217 19.455 8.93151 19.5368 8.93658L19.6122 9.03868C19.5204 9.09338 19.4125 9.13197 19.339 9.20523C18.1691 10.3721 17.0033 11.5433 15.8376 12.7145C15.7556 12.7969 15.6713 12.8801 15.6055 12.9751C15.369 13.3165 15.4985 13.7314 15.8827 13.8874C16.2035 14.0177 16.4402 13.88 16.6612 13.6583C17.8486 12.4675 19.04 11.2809 20.2256 10.0884C20.2982 10.0154 20.3329 9.90474 20.3851 9.81163Z' fill='white'/%3E%3C/svg%3E%0A\");\n      background-repeat: no-repeat;\n      background-position: center;\n      transition-delay: .1s;\n      z-index: 3;\n    }\n\n    &:hover {\n      border-color: #4277ff;\n\n      &::before,\n      &::after {\n        opacity: 1;\n        visibility: visible;\n      }\n    }\n  }\n`;\nconst withPreview = (WrappedComponent)=>{\n    const WithPreview = (props)=>{\n        const { clickableImageSelector } = props, otherProps = _object_without_properties(props, [\n            \"clickableImageSelector\"\n        ]);\n        const [activePreviewIndex, setActivePreviewIndex] = useState(false);\n        const [files, setFiles] = useState([]);\n        const prepareFile = (url = '')=>{\n            const fileName = url.split('/').pop().split('?')[0];\n            const fileUrl = url.replace('#', '%23');\n            return {\n                fileName,\n                fileUrl,\n                previewUrl: fileUrl\n            };\n        };\n        const prepareFiles = (allImages)=>{\n            const preparedFiles = allImages.map((image)=>prepareFile(image.src));\n            setFiles(preparedFiles);\n        };\n        const handleClick = (i)=>setActivePreviewIndex(i);\n        useEffect(()=>{\n            const previewContent = document.querySelector('#preview-content');\n            if (!previewContent) {\n                const newPreviewContentEl = document.createElement('div');\n                newPreviewContentEl.id = 'preview-content';\n                document.body.appendChild(newPreviewContentEl);\n            }\n            const allImages = clickableImageSelector ? Array.from(document.querySelectorAll(clickableImageSelector)) : [];\n            prepareFiles(allImages);\n            allImages.forEach((image, i)=>{\n                image.parentNode.classList.add('clickableImageWrapper');\n                image.addEventListener('click', ()=>handleClick(i));\n            });\n            return ()=>{\n                allImages.forEach((image, i)=>{\n                    image.removeEventListener('click', ()=>handleClick(i));\n                });\n            };\n        }, []);\n        return /*#__PURE__*/ _jsxs(StyledPreviewWrapper, {\n            children: [\n                /*#__PURE__*/ _jsx(WrappedComponent, _object_spread({}, otherProps)),\n                activePreviewIndex !== false && /*#__PURE__*/ _jsx(Preview, {\n                    files: files,\n                    initialFileIndex: activePreviewIndex,\n                    onClose: ()=>setActivePreviewIndex(false),\n                    isPreviewContextMenuOpened: false,\n                    togglePreviewContextMenu: (f)=>f\n                })\n            ]\n        });\n    };\n    WithPreview.propTypes = {\n        clickableImageSelector: PropTypes.string\n    };\n    WithPreview.defaultProps = {\n        clickableImageSelector: ''\n    };\n    WithPreview.displayName = `Preview(${getDisplayName(WrappedComponent)})`;\n    return WithPreview;\n};\nexport default withPreview;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport View from '../View';\nconst ViewWithAlignment = Styled((_param)=>{\n    var { direction } = _param, props = _object_without_properties(_param, [\n        \"direction\"\n    ]);\n    return /*#__PURE__*/ _jsx(View, _object_spread({}, props));\n})`\n  display: flex;\n  flex-direction: ${({ direction })=>direction};`;\nViewWithAlignment.propTypes = {\n    direction: PropTypes.string\n};\nViewWithAlignment.defaultProps = {\n    direction: 'column'\n};\nexport default ViewWithAlignment;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport isEqual from 'lodash/isEqual';\nimport View from '../View';\nimport Text from '../Text';\nimport { nl2br, stripHTML } from '../../utils';\nimport { isNative } from '../../utils/environment';\nconst LabelText = Styled(Text)`\n  font-size: 20px;\n  letter-spacing: .25px;\n  font-weight: 600;\n`;\nclass Label extends React.Component {\n    componentDidUpdate(prevProps) {\n        if (!isEqual(prevProps.textStyle, this.props.textStyle)) {\n            this.wrappedLabelText = Styled((props)=>/*#__PURE__*/ _jsx(LabelText, _object_spread({}, props)))`${this.props.textStyle}`;\n        }\n    }\n    render() {\n        const _this_props = this.props, { label, textProps, textStyle, allowHTML, childLabels } = _this_props, props = _object_without_properties(_this_props, [\n            \"label\",\n            \"textProps\",\n            \"textStyle\",\n            \"allowHTML\",\n            \"childLabels\"\n        ]);\n        const WrappedLabelText = this.wrappedLabelText;\n        const isValid = label !== '' && label.length > 0; // required for native\n        const prettyLabel = isNative() ? stripHTML(label) : nl2br(stripHTML(label));\n        return /*#__PURE__*/ _jsxs(View, _object_spread_props(_object_spread({}, props), {\n            children: [\n                isValid && label && /*#__PURE__*/ _jsx(WrappedLabelText, _object_spread_props(_object_spread({}, textProps), {\n                    children: allowHTML ? label : prettyLabel\n                })),\n                childLabels && childLabels\n            ]\n        }));\n    }\n    constructor(props){\n        super(props);\n        const { textStyle } = this.props;\n        // In order to prevent unnecessary re-renders caused by ref changes on WrappedLabelText caused by calling Styled(...) on each render.\n        this.wrappedLabelText = Styled((styledProps)=>/*#__PURE__*/ _jsx(LabelText, _object_spread({}, styledProps)))`${textStyle}`;\n    // If you are willing to change this logic, you may break inline-edit on PDF-Editor. Remember, everything is connected.\n    }\n}\nLabel.propTypes = {\n    label: PropTypes.string,\n    textProps: PropTypes.shape({}),\n    allowHTML: PropTypes.bool,\n    childLabels: PropTypes.arrayOf(PropTypes.shape({})),\n    textStyle: PropTypes.string\n};\nLabel.defaultProps = {\n    label: '',\n    textProps: {},\n    allowHTML: false,\n    childLabels: [],\n    textStyle: ''\n};\nexport default Label;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport Label from '../Label';\nconst LabelWithAlignment = Styled((_param)=>{\n    var { direction, flexBasis } = _param, props = _object_without_properties(_param, [\n        \"direction\",\n        \"flexBasis\"\n    ]);\n    return /*#__PURE__*/ _jsx(Label, _object_spread_props(_object_spread({}, props), {\n        textStyle: `word-break: ${direction !== 'column' ? 'break-all' : 'initial'}`\n    }));\n})`\n  flex: ${({ direction, flexBasis })=>{\n    return direction === 'column' ? 'auto' : `0 0 ${flexBasis}`;\n}};\n  margin: ${({ direction })=>{\n    return direction === 'column' ? '0 0 10px 0' : '0 10px 0 0';\n}};\n  `;\nLabelWithAlignment.propTypes = {\n    direction: PropTypes.string,\n    flexBasis: PropTypes.string\n};\nLabelWithAlignment.defaultProps = {\n    direction: 'column',\n    flexBasis: '40%'\n};\nexport default LabelWithAlignment;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport Answer from '../Answer';\nconst AnswerWithAlignment = Styled((_param)=>{\n    var { direction, flexBasis } = _param, props = _object_without_properties(_param, [\n        \"direction\",\n        \"flexBasis\"\n    ]);\n    return /*#__PURE__*/ _jsx(Answer, _object_spread({}, props));\n})`\n  flex: ${({ direction, flexBasis })=>{\n    return direction === 'column' ? 'auto' : `0 0 ${flexBasis}`;\n}};`;\nAnswerWithAlignment.propTypes = {\n    direction: PropTypes.string,\n    flexBasis: PropTypes.string\n};\nAnswerWithAlignment.defaultProps = {\n    direction: 'column',\n    flexBasis: '60%'\n};\nexport default AnswerWithAlignment;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport Text from '../Text';\nimport Image from '../Image';\n// import Baseline from '../Baseline';\nimport { isBrowser } from '../../utils/environment';\nconst StyledText = Styled(Text)`\n  text-align: center;\n`;\nconst StyledImageLine = Styled(View)`\n  background-color: ${({ backgroundColor })=>backgroundColor};\n`;\nconst StyledImage = Styled((props)=>/*#__PURE__*/ _jsx(Image, _object_spread({}, props)))`\n  max-width: 200px;\n`;\nclass ImageLine extends React.Component {\n    render() {\n        const _this_props = this.props, { label, value, imageLabel, valueContainerProps, imageContainerProps, backgroundColor, optimizeImage, noCache, noImgPlaceholder } = _this_props, props = _object_without_properties(_this_props, [\n            \"label\",\n            \"value\",\n            \"imageLabel\",\n            \"valueContainerProps\",\n            \"imageContainerProps\",\n            \"backgroundColor\",\n            \"optimizeImage\",\n            \"noCache\",\n            \"noImgPlaceholder\"\n        ]);\n        const imageUrl = ()=>{\n            const imageSource = noImgPlaceholder ? value : value || 'https://www.jotform.com/images/image_placeholder.png';\n            const baseUrl = isBrowser() ? window.location.origin : global.baseURL.baseURL;\n            if (noCache) {\n                const url = new URL(imageSource, baseUrl);\n                url.searchParams.set('nc', 1);\n                return url.toString();\n            }\n            return imageSource;\n        };\n        const _imgURL = imageUrl();\n        return /*#__PURE__*/ _jsxs(StyledImageLine, _object_spread_props(_object_spread({}, props), {\n            children: [\n                /*#__PURE__*/ _jsx(View, _object_spread_props(_object_spread({}, valueContainerProps), {\n                    children: _imgURL && /*#__PURE__*/ _jsx(StyledImage, _object_spread({\n                        alt: label,\n                        src: imageUrl()\n                    }, imageContainerProps))\n                })),\n                imageLabel && /*#__PURE__*/ _jsx(StyledText, {\n                    children: imageLabel\n                })\n            ]\n        }));\n    }\n}\nImageLine.propTypes = {\n    label: PropTypes.string,\n    value: PropTypes.string,\n    imageLabel: PropTypes.string,\n    backgroundColor: PropTypes.string,\n    valueContainerProps: PropTypes.shape({}),\n    imageContainerProps: PropTypes.shape({}),\n    optimizeImage: PropTypes.bool,\n    noCache: PropTypes.bool,\n    noImgPlaceholder: PropTypes.bool\n};\nImageLine.defaultProps = {\n    label: '',\n    value: '',\n    imageLabel: '',\n    backgroundColor: null,\n    valueContainerProps: {},\n    imageContainerProps: {},\n    optimizeImage: false,\n    noCache: false,\n    noImgPlaceholder: false\n};\nexport default ImageLine;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nconst StyledAnchor = Styled.a`\n  pointer-events: all;\n`;\nconst Hypertext = (props)=>{\n    const { children } = props, remainingProps = _object_without_properties(props, [\n        \"children\"\n    ]);\n    return /*#__PURE__*/ _jsx(StyledAnchor, _object_spread_props(_object_spread({}, remainingProps), {\n        children: children\n    }));\n};\nHypertext.propTypes = {\n    children: PropTypes.node\n};\nHypertext.defaultProps = {\n    children: {}\n};\nexport default Hypertext;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Styled from 'styled-components';\nimport { Preview, SVG } from '@jotforminc/preview';\nimport { FileUtils } from '@jotforminc/upload-fields';\nimport { View, Hypertext, Baseline, Imageline, Text as SimpleText } from '@jotforminc/answer-fields';\nimport '../../styles/index.scss';\nconst ViewWrap = Styled(View)`\n  display: flex;\n  flex-wrap: wrap;\n`;\nconst HalfView = Styled(View)`\n  width: 50%;\n`;\nconst FileUploadField = ({ text, answer, labelProps, answerProps, answerWrapperProps, baselineProps, showFileNameAsText, showImageHyperlink, imagePropsArray, filePropsArray, direction, containerProps, fileNameProps })=>{\n    const [activePreviewIndex, updateActivePreviewIndex] = useState(false);\n    const imgPropsArray = imagePropsArray || [];\n    const fileProps = filePropsArray || [];\n    const { className: classes } = baselineProps;\n    const files = FileUtils.prepareFiles(answer, true);\n    useEffect(()=>{\n        const previewContent = document.querySelector('#preview-content');\n        if (!previewContent) {\n            const newPreviewContentEl = document.createElement('div');\n            newPreviewContentEl.id = 'preview-content';\n            document.body.appendChild(newPreviewContentEl);\n        }\n    }, []);\n    return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n        label: text,\n        labelContainerProps: labelProps,\n        answerWrapperProps: answerWrapperProps,\n        direction: direction\n    }, baselineProps), {\n        className: classNames('jfFileUploadField', classes),\n        children: /*#__PURE__*/ _jsxs(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n            children: [\n                answer && answer.map((uploadedUrl, answerIndex)=>{\n                    const { fileUrl: encodedRequestUrl, fileName: filename, extension, iconType, isImageFile } = files[answerIndex];\n                    return(// eslint-disable-next-line react/no-array-index-key\n                    /*#__PURE__*/ _createElement(HalfView, _object_spread_props(_object_spread({}, answerProps, fileProps[answerIndex]), {\n                        key: answerIndex.toString(),\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfFileUploadField-image\",\n                                onClick: ()=>updateActivePreviewIndex(answerIndex),\n                                onKeyDown: null,\n                                children: isImageFile || uploadedUrl.match(/^blob:/) ? /*#__PURE__*/ _jsx(Imageline, _object_spread({\n                                    label: filename,\n                                    value: encodedRequestUrl\n                                }, imgPropsArray[answerIndex]), `${filename}`) : /*#__PURE__*/ _jsx(\"div\", {\n                                    className: \"noImage flex-center\",\n                                    children: /*#__PURE__*/ _jsxs(\"div\", {\n                                        className: \"fileHolder\",\n                                        children: [\n                                            /*#__PURE__*/ _jsx(SVG, {\n                                                name: iconType,\n                                                className: \"noImage-icon flex-center\"\n                                            }),\n                                            /*#__PURE__*/ _jsx(\"span\", {\n                                                className: \"fileType flex-center\",\n                                                children: extension\n                                            })\n                                        ]\n                                    })\n                                })\n                            }),\n                            showImageHyperlink && /*#__PURE__*/ _jsx(Hypertext, {\n                                href: FileUtils.getUploadUrl(encodedRequestUrl),\n                                children: filename\n                            }, `hypertext_${filename}`),\n                            showFileNameAsText && !showImageHyperlink && /*#__PURE__*/ _jsx(SimpleText, _object_spread_props(_object_spread({}, fileNameProps, fileProps[answerIndex]), {\n                                children: filename\n                            }), `simpletext_${filename}`)\n                        ]\n                    })));\n                }),\n                activePreviewIndex !== false && /*#__PURE__*/ _jsx(Preview, {\n                    files: files,\n                    initialFileIndex: activePreviewIndex,\n                    onClose: ()=>updateActivePreviewIndex(false),\n                    isPreviewContextMenuOpened: false,\n                    togglePreviewContextMenu: (f)=>f\n                })\n            ]\n        }))\n    }));\n};\nFileUploadField.propTypes = {\n    text: PropTypes.string,\n    answer: PropTypes.oneOfType([\n        PropTypes.arrayOf(PropTypes.string),\n        PropTypes.shape({})\n    ]),\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({\n        className: PropTypes.string\n    }),\n    containerProps: PropTypes.shape({}),\n    imagePropsArray: PropTypes.instanceOf(Array),\n    fileNameProps: PropTypes.oneOfType([\n        PropTypes.shape({}),\n        PropTypes.array\n    ]),\n    filePropsArray: PropTypes.instanceOf(Array),\n    showImageHyperlink: PropTypes.bool,\n    showFileNameAsText: PropTypes.bool,\n    direction: PropTypes.string\n};\nFileUploadField.defaultProps = {\n    text: '',\n    answer: [\n        ''\n    ],\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    containerProps: {},\n    imagePropsArray: [],\n    fileNameProps: [],\n    filePropsArray: [],\n    showImageHyperlink: true,\n    showFileNameAsText: false,\n    direction: 'column'\n};\nexport default FileUploadField;\n","import { _ as _define_property } from \"@swc/helpers/_/_define_property\";\nimport { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { Component } from 'react';\nimport Geocode from 'react-geocode';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport Text from '../../components/Text';\nimport Baseline from '../../components/Baseline';\nimport { stripHTML } from '../../utils';\nimport View from '../../components/View';\nimport Image from '../../components/Image';\nconst EmptyResult = Styled(View)`\n  display: flex;\n  background-color: #F3F3FE;\n  min-height: 74px;\n  padding: 16px;\n  border-radius: 4px;\n  margin-right: 82px;\n`;\nconst StyledText = Styled(Text)`\n  color: ${({ color })=>color};\n  font-weight: ${({ fontWeight })=>fontWeight};\n  font-size: 14px;\n  line-height: 20px;\n`;\nconst ImageView = Styled(View)`\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  justify-content: flex-start;\n  padding-right: 18px;\n  flex-shrink: 0;\n`;\nclass Address extends Component {\n    componentDidMount() {\n        const { showMap, answer } = this.props;\n        if (showMap && answer) {\n            this.handleMapLinks();\n        }\n    }\n    componentDidUpdate(prevProps) {\n        const { showMap, answer } = this.props;\n        if (showMap && answer && (prevProps.answer !== answer || prevProps.showMap !== showMap)) {\n            this.handleMapLinks();\n        }\n    }\n    render() {\n        const { text, answer: { addr_line1: AnswerLine1, addr_line2: AnswerLine2, city: AnswerCity, state: AnswerState, postal: AnswerPostal, country: AnswerCountry }, labelProps, answerProps, answerWrapperProps, baselineProps, direction, showMap } = this.props;\n        const { mapLink, largerMapLink, emptyResult } = this.state;\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            labelContainerProps: labelProps,\n            answerWrapperProps: answerWrapperProps,\n            direction: direction\n        }, baselineProps), {\n            children: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    this.streetLine(AnswerLine1, AnswerLine2, answerProps),\n                    this.cityLine(AnswerCity, AnswerState, AnswerPostal, answerProps),\n                    this.countryLine(AnswerCountry, answerProps),\n                    showMap && mapLink && largerMapLink && /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"jfAnswer-answer forMapContainer\",\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfAnswer-answer forMap\",\n                                children: /*#__PURE__*/ _jsx(\"iframe\", {\n                                    title: \"map\",\n                                    width: \"300\",\n                                    height: \"250\",\n                                    frameBorder: \"0\",\n                                    scrolling: \"no\",\n                                    marginHeight: \"0\",\n                                    marginWidth: \"0\",\n                                    src: mapLink,\n                                    style: {\n                                        border: '1px solid black'\n                                    }\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfAnswer-answer forLink\",\n                                children: /*#__PURE__*/ _jsx(\"a\", {\n                                    target: \"_blank\",\n                                    href: largerMapLink,\n                                    style: {\n                                        color: '#0000FF',\n                                        textAlign: 'left'\n                                    },\n                                    children: \"View Larger Map\"\n                                })\n                            })\n                        ]\n                    }),\n                    showMap && emptyResult && /*#__PURE__*/ _jsxs(EmptyResult, {\n                        children: [\n                            /*#__PURE__*/ _jsx(ImageView, {\n                                children: /*#__PURE__*/ _jsx(Image, {\n                                    src: \"https://cdn.jotfor.ms/assets/img/uncategorized/exclamation-triangle.svg\",\n                                    style: {\n                                        width: 24,\n                                        height: 24\n                                    }\n                                })\n                            }),\n                            /*#__PURE__*/ _jsxs(View, {\n                                children: [\n                                    /*#__PURE__*/ _jsx(StyledText, {\n                                        style: {\n                                            marginBottom: 4\n                                        },\n                                        color: \"#343C6A\",\n                                        fontWeight: \"700\",\n                                        children: t('Couldn\\'t find the address')\n                                    }),\n                                    /*#__PURE__*/ _jsx(StyledText, {\n                                        color: \"#6C73A8\",\n                                        fontWeight: \"400\",\n                                        children: t('It looks like the provided address is invalid.')\n                                    })\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            })\n        }));\n    }\n    constructor(props){\n        super(props), _define_property(this, \"handleMapLinks\", ()=>{\n            const address = Object.values(this.props.answer).reduce((prev, next)=>`${prev} ${next}`);\n            if (address.trim().length === 0) {\n                this.setState({\n                    emptyResult: false,\n                    mapLink: '',\n                    largerMapLink: ''\n                });\n                return;\n            }\n            Geocode.setApiKey('AIzaSyAO3hx_Mq0AGel9wULuOY5f35KRzFnklOM');\n            Geocode.fromAddress(address).then((response)=>{\n                const { lat: latitude, lng: longitude } = response.results[0].geometry.location;\n                // Calculate for zoom level\n                const north = latitude + 0.04;\n                const south = latitude - 0.04;\n                const west = longitude + 0.08;\n                const east = longitude - 0.08;\n                const link = `https://www.openstreetmap.org/export/embed.html?bbox=${east}%2C${south}%2C${west}%2C${north}&layer=transportmap&marker=${latitude}%2C${longitude}`;\n                const largerLink = `https://maps.google.com/maps?q=${latitude},+${longitude}`;\n                this.setState({\n                    mapLink: link,\n                    largerMapLink: largerLink,\n                    emptyResult: false\n                });\n            }, (error)=>{\n                if (error.message.indexOf('ZERO_RESULTS') === -1) {\n                    console.error(error);\n                } else {\n                    this.setState({\n                        emptyResult: true,\n                        mapLink: '',\n                        largerMapLink: ''\n                    });\n                }\n            });\n        }), _define_property(this, \"concatArgumentsWithComma\", (...args)=>{\n            return args.reduce((acc, arg)=>{\n                if (!arg) return acc;\n                if (!acc) return arg;\n                return `${acc}, ${arg}`;\n            }, '');\n        }), _define_property(this, \"streetLine\", (street1, street2, textProps)=>{\n            if (!street1 && !street2) return null;\n            const streetLine = this.concatArgumentsWithComma(street1, street2);\n            return streetLine ? /*#__PURE__*/ _jsx(Text, _object_spread_props(_object_spread({}, textProps), {\n                children: stripHTML(streetLine)\n            })) : null;\n        }), _define_property(this, \"cityLine\", (city, state, postalCode, textProps)=>{\n            if (!city && !state && !postalCode) return null;\n            const cityLine = this.concatArgumentsWithComma(city, state, postalCode);\n            return cityLine ? /*#__PURE__*/ _jsx(Text, _object_spread_props(_object_spread({}, textProps), {\n                children: stripHTML(cityLine)\n            })) : null;\n        }), _define_property(this, \"countryLine\", (country, textProps)=>{\n            return country ? /*#__PURE__*/ _jsx(Text, _object_spread_props(_object_spread({}, textProps), {\n                children: stripHTML(country)\n            })) : null;\n        });\n        this.state = {\n            mapLink: '',\n            largerMapLink: '',\n            emptyResult: false\n        };\n    }\n}\nAddress.propTypes = {\n    text: PropTypes.string,\n    answer: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.shape({\n            addr_line1: PropTypes.string,\n            addr_line2: PropTypes.string,\n            city: PropTypes.string,\n            state: PropTypes.string,\n            postal: PropTypes.string,\n            country: PropTypes.string\n        })\n    ]),\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    direction: PropTypes.string,\n    showMap: PropTypes.bool\n};\nAddress.defaultProps = {\n    text: '',\n    answer: {\n        addr_line1: '',\n        addr_line2: '',\n        city: '',\n        state: '',\n        postal: '',\n        country: ''\n    },\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    direction: 'column',\n    showMap: false\n};\nexport default Address;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nconst styled = (Component)=>{\n    return (tags, ...others)=>{\n        return Styled((props)=>/*#__PURE__*/ _jsx(Component, _object_spread({}, props)))`\n    ${tags}\n    ${others}\n    `;\n    };\n};\nexport default styled;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment-timezone';\nimport Text from '../../components/Text';\nimport Baseline from '../../components/Baseline';\nimport Styled from '../../utils/styled';\nconst TimezoneText = Styled(Text)`\n  font-size: 13px;\n  letter-spacing: 0.1px;\n  color: #8894ac;\n`;\nclass Appointment extends React.Component {\n    getAnswerDate() {\n        const { answer, timezone, showTimezone, timeFormat, submissionDate, isNewAppointment, locale } = this.props;\n        const { date: dateStr, duration } = answer;\n        if (locale) {\n            moment.locale(locale);\n        }\n        const serverTimeZone = 'America/New_York';\n        const newAppointment = true || window.location.href.includes('useAppointmentFix') || isNewAppointment;\n        if (!dateStr) {\n            return '';\n        }\n        let dateObject = newAppointment ? moment.tz(dateStr, serverTimeZone) : moment(dateStr);\n        if (!dateObject.isValid()) {\n            return '';\n        }\n        if (timezone) {\n            if (newAppointment) {\n                dateObject = dateObject.clone().tz(timezone);\n            } else {\n                const defaultOffset = submissionDate ? moment(submissionDate).tz(serverTimeZone).utcOffset() : moment.tz(serverTimeZone).utcOffset();\n                const timezoneOffset = submissionDate ? moment(submissionDate).tz(timezone).utcOffset() : moment.tz(timezone).utcOffset();\n                const changedOffset = timezoneOffset - defaultOffset;\n                dateObject = dateObject.clone().add(changedOffset, 'minutes');\n            }\n        }\n        const endDate = dateObject.clone().add(duration, 'minutes');\n        const answerTimeFormat = timeFormat === 'AM/PM' ? 'h:mm A' : 'HH:mm';\n        return /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                dateObject.clone().format(`dddd, MMM DD, Y ${answerTimeFormat}`),\n                ' - ',\n                endDate.format(answerTimeFormat),\n                ' ',\n                /*#__PURE__*/ _jsx(TimezoneText, {\n                    children: showTimezone && `- ${timezone} Time`\n                })\n            ]\n        });\n    }\n    render() {\n        const { text, labelProps, answerProps, answerWrapperProps, baselineProps, direction } = this.props;\n        const answer = this.getAnswerDate();\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            labelContainerProps: labelProps,\n            answerWrapperProps: answerWrapperProps,\n            direction: direction\n        }, baselineProps), {\n            children: answer ? /*#__PURE__*/ _jsx(Text, _object_spread_props(_object_spread({}, answerProps), {\n                children: answer\n            })) : null\n        }));\n    }\n}\nAppointment.propTypes = {\n    text: PropTypes.string,\n    answer: PropTypes.string,\n    timezone: PropTypes.string,\n    timeFormat: PropTypes.string,\n    submissionDate: PropTypes.string,\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    dateFormat: PropTypes.shape({}),\n    direction: PropTypes.string,\n    showTimezone: PropTypes.bool,\n    isNewAppointment: PropTypes.bool\n};\nAppointment.defaultProps = {\n    text: '',\n    answer: '',\n    timezone: '',\n    timeFormat: '24 Hour',\n    submissionDate: '',\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    dateFormat: 'mm-dd-yyyy',\n    direction: 'column',\n    showTimezone: false,\n    isNewAppointment: false\n};\nexport default Appointment;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport { EmojiRendererWithoutLazy } from '@jotforminc/icon-selector';\nimport View from '../View';\nimport Text from '../Text';\nimport Image from '../Image';\n// import Baseline from '../Baseline';\nconst StyledTextHolder = Styled(View)`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  text-align: left;\n  overflow: hidden;\n`;\nconst StyleSubText = Styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  opacity: .6;\n`;\nconst StyledText = Styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\nconst StyledImageLine = Styled(View)`\n  background-color: ${({ backgroundColor })=>backgroundColor};\n  display: inline-flex !important;\n  align-items: center;\n  padding: 10px;\n  border: 1px solid #C8CEED;\n  border-radius: 90px;\n`;\nconst StyledImage = Styled((props)=>/*#__PURE__*/ _jsx(Image, _object_spread({}, props)))`\n  display: block;\n  flex: 0;\n  max-width: 36px;\n  max-height: 36px;\n  margin-right: 8px;\n  border-radius: 50%;\n  object-fit: cover;\n  background-color: #b9bbd2;\n  flex-shrink: 1;\n`;\nclass AssigneeLine extends React.Component {\n    render() {\n        const _this_props = this.props, { label, subLabel, value, imageLabel, valueContainerProps, imageContainerProps, backgroundColor, optimizeImage, showSubLabel, teamAvatarID } = _this_props, props = _object_without_properties(_this_props, [\n            \"label\",\n            \"subLabel\",\n            \"value\",\n            \"imageLabel\",\n            \"valueContainerProps\",\n            \"imageContainerProps\",\n            \"backgroundColor\",\n            \"optimizeImage\",\n            \"showSubLabel\",\n            \"teamAvatarID\"\n        ]);\n        const imageSource = value || 'https://cdn.jotfor.ms/assets/img/v4/avatar/Podo-Guest.png';\n        return /*#__PURE__*/ _jsxs(StyledImageLine, _object_spread_props(_object_spread({}, props), {\n            children: [\n                /*#__PURE__*/ _jsx(View, _object_spread_props(_object_spread({}, valueContainerProps), {\n                    children: teamAvatarID ? /*#__PURE__*/ _jsx(EmojiRendererWithoutLazy, {\n                        id: teamAvatarID,\n                        size: 12\n                    }) : /*#__PURE__*/ _jsx(StyledImage, _object_spread({\n                        alt: label,\n                        src: imageSource\n                    }, imageContainerProps))\n                })),\n                /*#__PURE__*/ _jsxs(StyledTextHolder, {\n                    children: [\n                        imageLabel && /*#__PURE__*/ _jsx(StyledText, {\n                            children: imageLabel\n                        }),\n                        showSubLabel && subLabel && /*#__PURE__*/ _jsx(StyleSubText, {\n                            children: subLabel\n                        })\n                    ]\n                })\n            ]\n        }));\n    }\n}\nAssigneeLine.propTypes = {\n    label: PropTypes.string,\n    subLabel: PropTypes.string,\n    value: PropTypes.string,\n    imageLabel: PropTypes.string,\n    backgroundColor: PropTypes.string,\n    valueContainerProps: PropTypes.shape({}),\n    imageContainerProps: PropTypes.shape({}),\n    optimizeImage: PropTypes.bool,\n    showSubLabel: PropTypes.bool\n};\nAssigneeLine.defaultProps = {\n    label: '',\n    subLabel: '',\n    value: '',\n    imageLabel: '',\n    backgroundColor: null,\n    valueContainerProps: {},\n    imageContainerProps: {},\n    optimizeImage: false,\n    showSubLabel: true\n};\nexport default AssigneeLine;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport AssigneeItem from '../AssigneeItem';\nimport { mapAnswerItems, justifyContentPicker } from '../../utils';\nimport { ListPropTypes } from '../../constants/schemas';\nconst ViewWrap = Styled(View)`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: ${({ alignment })=>justifyContentPicker(alignment)};\n  gap: 12px;\n`;\nconst AssigneeList = ({ items, itemProps, containerProps })=>/*#__PURE__*/ _jsx(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n        children: mapAnswerItems(AssigneeItem, items, itemProps)\n    }));\nAssigneeList.propTypes = ListPropTypes.schema;\nAssigneeList.defaultProps = ListPropTypes.default;\nexport default AssigneeList;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport ImageItem from '../ImageItem';\nimport { mapAnswerItems, justifyContentPicker } from '../../utils';\nimport { ListPropTypes } from '../../constants/schemas';\nconst ViewWrap = Styled(View)`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: ${({ alignment })=>justifyContentPicker(alignment)};\n`;\nconst ImageList = ({ items, itemProps, containerProps })=>/*#__PURE__*/ _jsx(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n        children: mapAnswerItems(ImageItem, items, itemProps)\n    }));\nImageList.propTypes = ListPropTypes.schema;\nImageList.defaultProps = ListPropTypes.default;\nexport default ImageList;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport { mapAnswerItems, justifyContentPicker } from '../../utils';\nimport { ListPropTypes } from '../../constants/schemas';\nconst ViewWrap = Styled(View)`\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: ${({ alignment })=>justifyContentPicker(alignment)};\n`;\nconst ViewChild = Styled(View)`\n  text-decoration: ${({ checked })=>checked !== undefined && !checked ? 'line-through' : 'none'};\n  &:not(:last-of-type):after {\n    content: ', ';\n    white-space: pre;\n  }\n`;\nconst CommaList = ({ items, itemProps, containerProps })=>/*#__PURE__*/ _jsx(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n        children: mapAnswerItems(ViewChild, items, itemProps)\n    }));\nCommaList.propTypes = ListPropTypes.schema;\nCommaList.defaultProps = ListPropTypes.default;\nexport default CommaList;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport Text from '../Text';\nconst OptionItem = Styled((_param)=>{\n    var { backgroundColor, checked, color } = _param, remainingProps = _object_without_properties(_param, [\n        \"backgroundColor\",\n        \"checked\",\n        \"color\"\n    ]);\n    return /*#__PURE__*/ _jsx(Text, _object_spread({}, remainingProps));\n})`\n  background-color: ${({ backgroundColor })=>backgroundColor || '#E3E8F3'};\n  padding: 8px 24px;\n  font-size: 16px;\n  font-weight: 200;\n  margin-right: 12px;\n  margin-bottom: 12px;\n  border-radius: 3px;\n  opacity: ${({ checked })=>checked ? 1 : 0.5};\n`;\nOptionItem.propTypes = {\n    color: PropTypes.string,\n    checked: PropTypes.bool\n};\nOptionItem.defaultProps = {\n    color: '#E3E8F3',\n    checked: true\n};\nexport default OptionItem;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport OptionItem from '../OptionItem';\nimport { mapAnswerItems, justifyContentPicker } from '../../utils';\nimport { ListPropTypes } from '../../constants/schemas';\nconst ViewWrap = Styled(View)`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: ${({ alignment })=>justifyContentPicker(alignment)};\n`;\nconst OptionList = ({ items, itemProps, containerProps })=>/*#__PURE__*/ _jsx(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n        children: mapAnswerItems(OptionItem, items, itemProps)\n    }));\nOptionList.propTypes = ListPropTypes.schema;\nOptionList.defaultProps = ListPropTypes.default;\nexport default OptionList;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from '../../utils/styled';\nimport View from '../View';\nimport Image from '../Image';\nconst StyledImage = Styled((props)=>/*#__PURE__*/ _jsx(Image, _object_spread({}, props)))`\n  width: 12px;\n  height: 12px;\n  display: inline-block;\n  vertical-align: text-bottom;\n  outline: 1px solid #b8b8b8;\n  border-color: #b8b8b8;\n  border-width: 1;\n`;\nconst StyledView = Styled(View)`\n  width: 12px;\n  height: 12px;\n  min-width: 12px;\n  display: inline-block;\n  vertical-align: text-bottom;\n  box-shadow: 0 0 0 1px #b0b0b0;\n  border-color: #b0b0b0;\n  border-width: 1;\n`;\nclass Checkbox extends Component {\n    handleToggle() {\n        const { interactive } = this.props;\n        const { checked } = this.state;\n        if (!interactive) {\n            return false;\n        }\n        const { handleChange } = this.props;\n        this.setState({\n            checked: !checked\n        }, ()=>handleChange(!checked));\n    }\n    render() {\n        const { checked } = this.state;\n        return checked ? /*#__PURE__*/ _jsx(StyledImage, {\n            className: \"js-checked-option\",\n            onClick: this.handleToggle,\n            src: \"https://cdn.jotfor.ms/assets/img/submission/check_icon.png\"\n        }) : /*#__PURE__*/ _jsx(StyledView, {\n            onClick: this.handleToggle\n        });\n    }\n    constructor(props){\n        super(props);\n        this.state = {\n            checked: props.checked\n        };\n        this.handleToggle = this.handleToggle.bind(this);\n    }\n}\nCheckbox.propTypes = {\n    interactive: PropTypes.bool,\n    checked: PropTypes.bool,\n    handleChange: PropTypes.func\n};\nCheckbox.defaultProps = {\n    checked: false,\n    interactive: true,\n    handleChange: (f)=>f\n};\nexport default Checkbox;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport Text from '../Text';\nimport Checkbox from '../Checkbox';\nimport { ListPropTypes } from '../../constants/schemas';\nimport { mapAnswerItems } from '../../utils';\nconst ViewWrap = Styled(View)`\n  text-align: ${({ alignment })=>alignment};\n`;\nconst CheckbowWrapper = Styled(View)`\n  display: inline-block;\n`;\nconst CheckboxContainer = Styled(View)`\n  display: flex;\n  align-items: center;\n  flex-flow: row nowrap;\n  margin: 10px 15px 10px 0;\n`;\nconst CheckboxLabel = Styled(Text)`\n  margin-left: 10px;\n`;\nconst CheckboxView = (_param)=>{\n    var { checked } = _param, props = _object_without_properties(_param, [\n        \"checked\"\n    ]);\n    return /*#__PURE__*/ _jsx(CheckbowWrapper, {\n        children: /*#__PURE__*/ _jsxs(CheckboxContainer, {\n            children: [\n                /*#__PURE__*/ _jsx(Checkbox, {\n                    interactive: false,\n                    checked: checked !== undefined ? checked : true\n                }),\n                /*#__PURE__*/ _jsx(CheckboxLabel, _object_spread({}, props))\n            ]\n        })\n    });\n};\nconst CheckboxList = ({ items, itemProps, containerProps })=>/*#__PURE__*/ _jsx(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n        children: mapAnswerItems(CheckboxView, items, itemProps)\n    }));\nCheckboxList.propTypes = ListPropTypes.schema;\nCheckboxList.defaultProps = ListPropTypes.default;\nexport default CheckboxList;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport { FileUtils } from '@jotforminc/upload-fields';\nimport View from '../../components/View';\nimport Hypertext from '../../components/Hypertext';\nimport Baseline from '../../components/Baseline';\nimport Imageline from '../../components/Imageline';\nimport SimpleText from '../../components/Text';\nconst ViewWrap = Styled(View)`\n  display: flex;\n  flex-wrap: wrap;\n`;\nconst HalfView = Styled(View)`\n  width: 50%;\n`;\nclass Fileupload extends React.Component {\n    encodeRequestUrl(url) {\n        return url.replace('#', '%23');\n    }\n    render() {\n        const { text, answer, labelProps, answerProps, answerWrapperProps, baselineProps, showFileNameAsText, showImageHyperlink, imagePropsArray, filePropsArray, direction, containerProps, fileNameProps, hideImageLine, useEncodeURI } = this.props;\n        const imgPropsArray = imagePropsArray || [];\n        const fileProps = filePropsArray || [];\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            labelContainerProps: labelProps,\n            answerWrapperProps: answerWrapperProps,\n            direction: direction\n        }, baselineProps), {\n            children: /*#__PURE__*/ _jsx(ViewWrap, _object_spread_props(_object_spread({}, containerProps), {\n                children: answer ? answer.map((uploadedUrl, answerIndex)=>{\n                    const encodedRequestUrl = useEncodeURI ? encodeURI(uploadedUrl) : this.encodeRequestUrl(uploadedUrl);\n                    const filename = FileUtils.getFileName(uploadedUrl);\n                    if (FileUtils.isImageFile(filename) || uploadedUrl.match(/^blob:/)) {\n                        return(// eslint-disable-next-line react/no-array-index-key\n                        /*#__PURE__*/ _createElement(HalfView, _object_spread_props(_object_spread({}, answerProps, fileProps[answerIndex]), {\n                            key: answerIndex.toString(),\n                            children: [\n                                !hideImageLine && /*#__PURE__*/ _jsx(Imageline, _object_spread({\n                                    label: filename,\n                                    value: encodedRequestUrl\n                                }, imgPropsArray[answerIndex]), `${filename}`),\n                                showImageHyperlink ? /*#__PURE__*/ _jsx(Hypertext, {\n                                    href: FileUtils.getUploadUrl(encodedRequestUrl),\n                                    children: filename\n                                }, `hypertext_${filename}`) : null,\n                                showFileNameAsText && !showImageHyperlink ? /*#__PURE__*/ _jsx(SimpleText, _object_spread_props(_object_spread({}, fileNameProps, fileProps[answerIndex]), {\n                                    children: filename\n                                }), `simpletext_${filename}`) : null\n                            ]\n                        })));\n                    }\n                    return showFileNameAsText ? /*#__PURE__*/ _jsx(SimpleText, _object_spread_props(_object_spread({}, answerProps, fileProps[answerIndex]), {\n                        children: filename\n                    }), `simpletext_showastext_${filename}`) : /*#__PURE__*/ _jsx(Hypertext, _object_spread_props(_object_spread({\n                        href: encodedRequestUrl\n                    }, fileProps[answerIndex], answerProps), {\n                        children: filename\n                    }), `hypertext_showastext_${filename}`);\n                }) : null\n            }))\n        }));\n    }\n}\nFileupload.propTypes = {\n    text: PropTypes.string,\n    answer: PropTypes.oneOfType([\n        PropTypes.arrayOf(PropTypes.string),\n        PropTypes.shape({})\n    ]),\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    containerProps: PropTypes.shape({}),\n    imagePropsArray: PropTypes.instanceOf(Array),\n    fileNameProps: PropTypes.oneOfType([\n        PropTypes.shape({}),\n        PropTypes.array\n    ]),\n    filePropsArray: PropTypes.instanceOf(Array),\n    showImageHyperlink: PropTypes.bool,\n    showFileNameAsText: PropTypes.bool,\n    hideImageLine: PropTypes.bool,\n    direction: PropTypes.string,\n    useEncodeURI: PropTypes.bool\n};\nFileupload.defaultProps = {\n    text: '',\n    answer: [\n        ''\n    ],\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    containerProps: {},\n    imagePropsArray: [],\n    fileNameProps: [],\n    filePropsArray: [],\n    showImageHyperlink: true,\n    showFileNameAsText: false,\n    hideImageLine: false,\n    direction: 'column',\n    useEncodeURI: false\n};\nexport default Fileupload;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string, shape, oneOfType } from 'prop-types';\nimport Styled from 'styled-components';\nimport View from '../View';\nimport Text from '../Text';\nconst Sublabel = Styled(View)`\n  color: #C0C1C3;\n  font-size: 14px;\n  font-weight: 100;\n`;\nconst Subtext = Styled(View)`\n  font-size: 16px;\n  padding-top: 8px;\n  font-weight: 100;\n`;\nconst StyledView = Styled(View)`\n  padding-bottom: 15px;\n`;\nconst Line = (_param)=>{\n    var { label, value, labelContainerProps, valueContainerProps, labelProps } = _param, props = _object_without_properties(_param, [\n        \"label\",\n        \"value\",\n        \"labelContainerProps\",\n        \"valueContainerProps\",\n        \"labelProps\"\n    ]);\n    return /*#__PURE__*/ _jsxs(StyledView, _object_spread_props(_object_spread({\n        className: \"lineWrapper\"\n    }, props), {\n        children: [\n            !!label && /*#__PURE__*/ _jsx(Sublabel, _object_spread_props(_object_spread({\n                className: \"labelWrapper\"\n            }, labelContainerProps), {\n                children: /*#__PURE__*/ _jsx(Text, _object_spread_props(_object_spread({}, labelProps), {\n                    children: label\n                }))\n            })),\n            /*#__PURE__*/ _jsx(Subtext, _object_spread_props(_object_spread({\n                className: \"answerWrapper\"\n            }, valueContainerProps), {\n                children: typeof value === 'string' ? /*#__PURE__*/ _jsx(Text, _object_spread_props(_object_spread({}, labelProps), {\n                    children: value\n                })) : /*#__PURE__*/ _jsx(View, {\n                    children: value\n                })\n            }))\n        ]\n    }));\n};\nLine.propTypes = {\n    label: string,\n    value: oneOfType([\n        string,\n        shape({})\n    ]),\n    labelContainerProps: shape({}),\n    valueContainerProps: shape({})\n};\nLine.defaultProps = {\n    label: '',\n    value: '',\n    labelContainerProps: {},\n    valueContainerProps: {}\n};\nexport default Line;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport Image from '../Image';\nconst EmojiImage = Styled((props)=>/*#__PURE__*/ _jsx(Image, _object_spread({}, props)))`\n  width: 18px;\n  height: 18px;\n  display: inline-block;\n  vertical-align: text-bottom;\n`;\nconst Emoji = ({ score })=>/*#__PURE__*/ _jsx(EmojiImage, {\n        src: `https://cdn.jotfor.ms/assets/img/submission/emoji_${score || 1}.png`\n    });\nEmoji.propTypes = {\n    score: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number\n    ])\n};\nEmoji.defaultProps = {\n    score: 1\n};\nexport default Emoji;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport memoize from 'lodash/memoize';\nimport { transpose as transposeArray, fixTableHeader, sanitizeHTML } from '../../utils';\nimport View from '../View';\nimport Text from '../Text';\nconst themeDark = '#F2F3FE';\nconst themeLight = '#fff';\nconst themeBorder = '#E5E6EF';\nconst themeHeaderColor = '#2A2F54';\nconst memoizedTranspose = memoize(transposeArray);\nconst ColumnOrientedView = Styled((props)=>/*#__PURE__*/ _jsx(\"table\", _object_spread({\n        cellPadding: \"0\",\n        cellSpacing: \"0\"\n    }, props)))`\n  table-layout: fixed;\n  width: 100%;\n  text-align: center;\n  border-collapse: collapse;\n  border-radius: 6px;\n  overflow: hidden;\n  box-shadow: 0 0 0 1px ${themeBorder};\n  word-break: break-word;\n  hyphens: auto;\n`;\nconst RowOrientedView = Styled.div`\n  box-shadow: 0 0 0 1px ${themeBorder};\n  border-radius: 6px;\n`;\nconst Thead = Styled.thead`\n  th {\n    border-bottom: 1px solid ${themeBorder};\n  }\n`;\nconst Tbody = Styled.tbody`\n`;\nconst TableHeader = Styled.th`\n  font-size: 11px;\n  border: none;\n  font-weight: bold;\n  padding: 6px;\n  color: ${({ isDeleted })=>{\n    return isDeleted ? '#FFF' : themeHeaderColor;\n}};\n  background: ${({ isDeleted })=>{\n    return isDeleted ? '#FF3737' : themeDark;\n}};\n`;\nconst EmptyHeader = Styled((props)=>/*#__PURE__*/ _jsx(TableHeader, _object_spread({}, props)))``;\nconst TableData = Styled.td`\n  font-size: 11px;\n  border:none;\n  padding: 6px;\n  background: ${themeLight};\n  color: ${themeHeaderColor};\n`;\nconst RowHeader = Styled.th`\n  font-size: 11px;\n  border:none;\n  padding: 6px;\n  text-align: left;\n  font-weight: bold;\n  background: ${themeDark};\n  color: ${themeHeaderColor};\n`;\nconst Row = Styled.tr`\n  &:not(:first-of-type) {\n    td, th {\n      border-top: 1px solid ${themeBorder};\n    }\n  }\n`;\nconst StyledRow = Styled(View)`\n  display: flex;\n  flex-flow: row;\n\n  &:not(:first-of-type) {\n    td, th {\n      border-top: 1px solid ${themeBorder};\n    }\n  }\n`;\nconst StyledQuestion = Styled(Text)`\n  padding: 6px 8px;\n  font-size: 10pt;\n  width: 49.8%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  background-color: ${themeDark};\n  text-align: left;\n`;\nconst StyledAnswer = Styled(Text)`\n  padding: 6px;\n  font-size: 10pt;\n  width: 49.8%;\n  font-weight: 200;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background-color: ${themeLight};\n  text-align: left;\n`;\nclass Tableview extends Component {\n    get columns() {\n        const { rows, transpose, columns } = this.props;\n        return !transpose ? columns : rows;\n    }\n    get rows() {\n        const { rows, transpose, columns } = this.props;\n        return !transpose ? rows : columns;\n    }\n    get tableData() {\n        const { transpose, tableData } = this.props;\n        return !transpose ? tableData : memoizedTranspose(tableData);\n    }\n    get isRowsExist() {\n        const { transpose, orientation } = this.props;\n        return (orientation !== 'row' || !transpose) && this.rows.length !== 0;\n    }\n    renderCell({ key, data, props }) {\n        if (data && typeof data === 'string') {\n            return /*#__PURE__*/ _jsx(TableData, _object_spread_props(_object_spread({}, props), {\n                dangerouslySetInnerHTML: {\n                    __html: sanitizeHTML(data)\n                }\n            }), `cell_${key}`);\n        }\n        const emptyData = props.emptyCellStyle === 'line' ? '-' : '';\n        const cellData = data || emptyData;\n        return /*#__PURE__*/ _jsx(TableData, _object_spread_props(_object_spread({}, props), {\n            children: cellData\n        }), `cell_${key}`);\n    }\n    renderColumnHeaderCell({ key, data, props = {} }) {\n        const fixedHeader = fixTableHeader(data);\n        return typeof fixedHeader === 'string' ? /*#__PURE__*/ _jsx(TableHeader, _object_spread({\n            dangerouslySetInnerHTML: {\n                __html: sanitizeHTML(fixedHeader)\n            }\n        }, props), `columnHeaderCell_${key}`) : /*#__PURE__*/ _jsx(TableHeader, _object_spread_props(_object_spread({}, props), {\n            children: fixedHeader\n        }), `columnHeaderCell_${key}`);\n    }\n    renderColumnHeaders() {\n        const { name, headerProps, showRowHeader } = this.props;\n        let key = 0;\n        return this.columns.length !== 0 && /*#__PURE__*/ _jsx(Row, {\n            children: [\n                showRowHeader && this.isRowsExist ? /*#__PURE__*/ _jsx(EmptyHeader, _object_spread({}, headerProps), `emptyHeaderCell_${name}`) : null,\n                ...this.columns.map((data)=>this.renderColumnHeaderCell({\n                        key: `${name}_${key++}`,\n                        data,\n                        props: headerProps\n                    }))\n            ]\n        });\n    }\n    renderRowHeaderCell({ key, data, props }) {\n        return typeof data === 'string' ? /*#__PURE__*/ _jsx(RowHeader, _object_spread({\n            dangerouslySetInnerHTML: {\n                __html: sanitizeHTML(data)\n            }\n        }, props), `rowHeaderCell_${key}`) : /*#__PURE__*/ _jsx(RowHeader, _object_spread_props(_object_spread({}, props), {\n            children: data\n        }), `rowHeaderCell_${key}`);\n    }\n    renderRow({ key, rowData, header, containerStyle, headerProps, answerProps }) {\n        const { showAll, columns } = this.props;\n        if (answerProps.hideEmptyRow && (!rowData.length || rowData.filter((data)=>data).length < 1)) return;\n        const cells = rowData && Array.isArray(rowData) && rowData.reduce((acc, data, index)=>{\n            if (!showAll && !data) return acc;\n            const cellData = data && !showAll ? columns[index] : data;\n            return [\n                ...acc,\n                this.renderCell({\n                    key: `${key}_${index}`,\n                    data: cellData,\n                    props: answerProps\n                })\n            ];\n        }, []);\n        if (!showAll && !cells.length) {\n            cells.push(this.renderCell({\n                data: null,\n                props: answerProps\n            }));\n        }\n        return /*#__PURE__*/ _jsxs(Row, _object_spread_props(_object_spread({}, containerStyle), {\n            children: [\n                (typeof header === 'string' || header) && this.renderRowHeaderCell({\n                    key,\n                    data: header,\n                    props: headerProps\n                }),\n                cells\n            ]\n        }), `row_${key}`);\n    }\n    renderRows() {\n        const { name, containerStyle, headerProps, answerProps, showRowHeader } = this.props;\n        return this.tableData.map((rowData, index)=>this.renderRow({\n                key: `${name}_${index}`,\n                rowData,\n                containerStyle,\n                header: this.isRowsExist && showRowHeader && this.rows[index],\n                headerProps,\n                answerProps\n            }));\n    }\n    renderColumnOrientedView() {\n        const _this_props = this.props, { tableComponent: TableComponent, showColumnHeader, showAll, transpose, tableData, columns, rows, orientation, containerStyle, headerProps, answerProps } = _this_props, props // rest\n         = _object_without_properties(_this_props, [\n            \"tableComponent\",\n            \"showColumnHeader\",\n            \"showAll\",\n            \"transpose\",\n            \"tableData\",\n            \"columns\",\n            \"rows\",\n            \"orientation\",\n            \"containerStyle\",\n            \"headerProps\",\n            \"answerProps\"\n        ]);\n        return /*#__PURE__*/ _jsxs(TableComponent, _object_spread_props(_object_spread({}, props), {\n            children: [\n                showAll && showColumnHeader && /*#__PURE__*/ _jsx(Thead, {\n                    children: this.renderColumnHeaders()\n                }),\n                /*#__PURE__*/ _jsx(Tbody, {\n                    children: this.renderRows()\n                })\n            ]\n        }));\n    }\n    renderRowOrientedHeaderCell(data, _param) {\n        var { className: rowHeaderClassName } = _param, props = _object_without_properties(_param, [\n            \"className\"\n        ]);\n        const className = `rowOriented-row-header${rowHeaderClassName ? ` ${rowHeaderClassName}` : ''}`;\n        return typeof data === 'string' ? /*#__PURE__*/ _jsx(StyledQuestion, _object_spread_props(_object_spread({\n            className: className\n        }, props), {\n            dangerouslySetInnerHTML: {\n                __html: sanitizeHTML(data)\n            }\n        })) : /*#__PURE__*/ _jsx(StyledQuestion, _object_spread_props(_object_spread({\n            className: className\n        }, props), {\n            children: data\n        }));\n    }\n    renderRowOrientedAnswerCell(data, _param) {\n        var { className: answerClassName } = _param, props = _object_without_properties(_param, [\n            \"className\"\n        ]);\n        const className = `rowOriented-row-answer${answerClassName ? ` ${answerClassName}` : ''}`;\n        return typeof data === 'string' ? /*#__PURE__*/ _jsx(StyledAnswer, _object_spread({\n            className: className,\n            dangerouslySetInnerHTML: {\n                __html: sanitizeHTML(data)\n            }\n        }, props)) : /*#__PURE__*/ _jsx(StyledAnswer, _object_spread_props(_object_spread({\n            className: className\n        }, props), {\n            children: data\n        }));\n    }\n    renderRowOrientedView() {\n        const { name, rows, transpose, tableData, answerProps, containerStyle, headerProps } = this.props;\n        let key = 0;\n        return /*#__PURE__*/ _jsx(RowOrientedView, {\n            children: !transpose ? rows.map((row, index)=>/*#__PURE__*/ _jsxs(StyledRow, _object_spread_props(_object_spread({}, containerStyle), {\n                    children: [\n                        row && this.renderRowOrientedHeaderCell(row, headerProps),\n                        this.renderRowOrientedAnswerCell(tableData[index], answerProps)\n                    ]\n                }), `${name}_${row}_${key++}`)) : /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    this.renderColumnHeaders(),\n                    this.renderRow({\n                        key: `${name}_0`,\n                        rowData: tableData,\n                        answerProps\n                    })\n                ]\n            })\n        });\n    }\n    render() {\n        const { orientation, columns, tableComponent } = this.props;\n        if (tableComponent !== ColumnOrientedView) {\n            return this.renderColumnOrientedView();\n        }\n        switch(orientation){\n            case 'row':\n                return this.renderRowOrientedView();\n            case 'column':\n            default:\n                return columns.length === 0 ? this.renderRowOrientedView() : this.renderColumnOrientedView();\n        }\n    }\n    constructor(props){\n        super(props);\n        // Bindings\n        this.renderRows = this.renderRows.bind(this);\n        this.renderColumnHeaders = this.renderColumnHeaders.bind(this);\n        this.renderRowOrientedView = this.renderRowOrientedView.bind(this);\n        this.renderColumnOrientedView = this.renderColumnOrientedView.bind(this);\n    }\n}\nconst cellPropTypes = [\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.node\n];\nTableview.propTypes = {\n    name: PropTypes.string,\n    orientation: PropTypes.string,\n    rows: PropTypes.arrayOf(PropTypes.string),\n    columns: PropTypes.arrayOf(PropTypes.oneOfType(cellPropTypes)),\n    tableData: PropTypes.arrayOf(PropTypes.oneOfType(cellPropTypes)),\n    answerProps: PropTypes.shape(),\n    containerStyle: PropTypes.shape(),\n    headerProps: PropTypes.shape(),\n    transpose: PropTypes.bool,\n    rowProps: PropTypes.shape({}),\n    tableComponent: PropTypes.oneOfType([\n        PropTypes.element,\n        PropTypes.object\n    ]),\n    showAll: PropTypes.bool,\n    showRowHeader: PropTypes.bool,\n    showColumnHeader: PropTypes.bool\n};\nTableview.defaultProps = {\n    name: '',\n    rows: [],\n    columns: [],\n    tableData: [],\n    orientation: 'column',\n    answerProps: {},\n    containerStyle: {},\n    headerProps: {},\n    transpose: false,\n    rowProps: {},\n    tableComponent: ColumnOrientedView,\n    showAll: true,\n    showRowHeader: true,\n    showColumnHeader: true\n};\nexport default Tableview;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport Text from '../../components/Text';\nimport Styled from '../../utils/styled';\nimport Image from '../../components/Image';\nimport Emoji from '../../components/Emoji';\nimport Baseline from '../../components/Baseline';\nimport Tableview from '../../components/Tableview';\nimport withMatrixProps from '../../hocs/Matrix';\nimport { ROW_BASED_MATRIX_TYPES } from '../../constants';\nimport { stripHTML } from '../../utils';\nconst StyledImage = Styled((props)=>/*#__PURE__*/ _jsx(Image, _object_spread({}, props)))`\n  width: 12px;\n  height: 12px;\n  display: inline-block;\n  vertical-align: text-bottom;\n`;\nconst EmojiText = Styled(Text)`\n  display: inline-block;\n  text-indent: 5px;\n`;\nconst StyledCheckboxImage = /*#__PURE__*/ _jsx(StyledImage, {\n    src: \"//cdn.jotfor.ms/assets/img/submission/check_icon.png\"\n});\nconst StyledRadioActiveImage = /*#__PURE__*/ _jsx(StyledImage, {\n    src: \"//cdn.jotfor.ms/assets/img/submission/Radio_Active.svg\"\n});\nclass Matrix extends Component {\n    get orientation() {\n        const { orientation, showAll } = this.props;\n        return showAll ? 'column' : orientation;\n    }\n    get normalizedColumns() {\n        const { orientation, columns, normalizedAnswer, isDynamic } = this.props;\n        const sanitizedColumns = isDynamic ? columns.map((column)=>column.text) : columns.map((column)=>stripHTML(column));\n        // Row oriented matrixes do not need any normalization\n        if (orientation !== 'column') {\n            return sanitizedColumns;\n        }\n        // Trying to get maximum number of sanitizedColumns by parsing answer data in case any column removed\n        const maxAnswerLength = normalizedAnswer.reduce((prev, curr)=>Array.isArray(curr) ? Math.max(curr.length, prev) : prev, 1);\n        // This case indicates that really a column removed. Therefore we are appending 'delete column' dummy sanitizedColumns\n        if (sanitizedColumns.length < maxAnswerLength) {\n            const dummyDeletedColumns = [\n                ...Array(maxAnswerLength - sanitizedColumns.length)\n            ].map(()=>'Deleted Column');\n            return sanitizedColumns.concat(dummyDeletedColumns);\n        }\n        return sanitizedColumns;\n    }\n    get columns() {\n        const { showAll, toggleOptions, inputType, emojiArray, columns } = this.props;\n        if (inputType === 'Yes No') {\n            return toggleOptions;\n        }\n        if (inputType === 'Emoji Slider') {\n            return emojiArray.map((column)=>/*#__PURE__*/ _jsx(Emoji, {\n                    score: column\n                }));\n        }\n        if (showAll) {\n            switch(inputType){\n                case 'Yes No':\n                    return toggleOptions;\n                case 'Emoji Slider':\n                    return emojiArray.map((column)=>/*#__PURE__*/ _jsx(Emoji, {\n                            score: column\n                        }));\n                case 'Dynamic':\n                    return columns.map(({ text })=>text);\n                default:\n                    break;\n            }\n        }\n        return this.normalizedColumns;\n    }\n    get columnnHeaderProps() {\n        const { columnnHeaderProps, columns } = this.props;\n        // If deleted column does not exist\n        if (columns.length === this.columns.length) {\n            return columnnHeaderProps;\n        }\n        return this.columns.map((_, index)=>_object_spread({\n                isDeleted: index >= columns.length\n            }, columnnHeaderProps[index] || {}));\n    }\n    sanitizeAnswer(ans) {\n        return Array.isArray(ans) ? ans.map((answer)=>stripHTML(answer)) : stripHTML(ans);\n    }\n    get tableData() {\n        const { answer, inputType, rows, dcolumns, emojiArray, normalizedAnswer, toggleOptions: [yesOption, noOption] = [], useDcols } = this.props;\n        // Data of row based matrixes need to be converted into arrays if intended orientation is column\n        if (ROW_BASED_MATRIX_TYPES.indexOf(inputType) > -1 && this.orientation === 'column') {\n            if (inputType === 'Yes No') {\n                return rows.map((_, index)=>this.columns.map((column)=>column === yesOption && normalizedAnswer[index] || column === noOption && !normalizedAnswer[index] ? StyledCheckboxImage : null));\n            }\n            if (inputType === 'Emoji Slider') {\n                return rows.map((row)=>this.columns.map((_, index)=>answer[row] && parseInt(answer[row], 10) === emojiArray[index] ? StyledCheckboxImage : null));\n            }\n            if (!useDcols && (inputType === 'Slider' || inputType === 'Radio Button')) {\n                return rows.map((_, index)=>this.columns.map((column)=>{\n                        const strippedHtml = stripHTML(normalizedAnswer[index]);\n                        const normalized = strippedHtml || normalizedAnswer[index];\n                        const newNormalized = typeof normalized === 'string' ? normalized.replace(/\\\\/g, '') : normalized;\n                        const isSelected = (newNormalized || newNormalized === 0) && (this.checkHasOnlyEmptyColumn() ? newNormalized === 1 : newNormalized.toString().trim() === column.toString().trim());\n                        return isSelected ? StyledRadioActiveImage : null;\n                    }));\n            }\n        }\n        if (inputType === 'Emoji Slider') {\n            return normalizedAnswer.map((rowAnswer)=>/*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsx(Emoji, {\n                            score: rowAnswer\n                        }),\n                        /*#__PURE__*/ _jsx(EmojiText, {\n                            children: `(${emojiArray.indexOf(rowAnswer) + 1}/${emojiArray.length})`\n                        })\n                    ]\n                }));\n        }\n        if (inputType === 'Yes No') {\n            return normalizedAnswer.map((rowAnswer)=>rowAnswer ? yesOption : noOption);\n        }\n        if (useDcols || inputType === 'Dynamic') {\n            return rows.map((_, index)=>safeJSONParse(dcolumns, dcolumns, true).map((column, i)=>{\n                    const ans = Array.isArray(normalizedAnswer[index]) ? normalizedAnswer[index][i] : '';\n                    if (!ans) return ans;\n                    if (this.orientation === 'row') return ans;\n                    if (column.type === 'Radio Button') return StyledRadioActiveImage;\n                    if (column.type === 'Check Box') return StyledCheckboxImage;\n                    if (column.type === 'Slider') return StyledCheckboxImage;\n                    return ans;\n                }));\n        }\n        if (inputType === 'Check Box') {\n            return rows.map((_, index)=>this.columns.map((column)=>{\n                    const ans = normalizedAnswer[index] && !Array.isArray(normalizedAnswer[index]) ? normalizedAnswer[index].toString() : normalizedAnswer[index];\n                    const strippedAns = this.sanitizeAnswer(ans);\n                    const isSelected = strippedAns && (this.checkHasOnlyEmptyColumn() ? strippedAns.includes('1') : strippedAns.includes(column));\n                    return isSelected ? StyledCheckboxImage : null;\n                }));\n        }\n        return normalizedAnswer;\n    }\n    checkHasOnlyEmptyColumn() {\n        return this.columns.length === 1 && this.columns[0] === '';\n    }\n    render() {\n        const { text, rows, transpose, labelProps, answerProps, answerWrapperProps, baselineProps, sublabelProps, containerStyle, direction } = this.props;\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            labelContainerProps: labelProps,\n            answerWrapperProps: answerWrapperProps,\n            direction: direction\n        }, baselineProps), {\n            children: /*#__PURE__*/ _jsx(Tableview, {\n                name: text,\n                rows: rows,\n                transpose: transpose,\n                tableData: this.tableData,\n                columns: this.columns,\n                orientation: this.orientation,\n                containerStyle: containerStyle,\n                headerProps: sublabelProps,\n                answerProps: answerProps,\n                columnnHeaderProps: this.columnnHeaderProps\n            })\n        }));\n    }\n}\nconst cellDataPropTypes = [\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool\n];\nMatrix.propTypes = {\n    rows: PropTypes.arrayOf(PropTypes.string),\n    columns: PropTypes.arrayOf(PropTypes.string),\n    dcolumns: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.object\n    ]),\n    text: PropTypes.string,\n    normalizedAnswer: PropTypes.arrayOf(PropTypes.oneOfType([\n        ...cellDataPropTypes,\n        PropTypes.arrayOf(cellDataPropTypes)\n    ])),\n    emojiArray: PropTypes.arrayOf(PropTypes.number),\n    toggleOptions: PropTypes.arrayOf(PropTypes.string),\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    sublabelProps: PropTypes.shape({}),\n    containerStyle: PropTypes.shape({}),\n    columnnHeaderProps: PropTypes.arrayOf(PropTypes.shape({})),\n    transpose: PropTypes.bool,\n    orientation: PropTypes.oneOf([\n        'row',\n        'column'\n    ]),\n    answer: PropTypes.oneOfType([\n        PropTypes.bool,\n        PropTypes.shape({}),\n        PropTypes.arrayOf(PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ]))\n    ]),\n    inputType: PropTypes.string,\n    showAll: PropTypes.bool,\n    direction: PropTypes.string,\n    isDynamic: PropTypes.bool,\n    useDcols: PropTypes.bool\n};\nMatrix.defaultProps = {\n    rows: [],\n    text: '',\n    normalizedAnswer: [],\n    dcolumns: '',\n    emojiArray: [],\n    toggleOptions: [\n        'Yes',\n        'No'\n    ],\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    sublabelProps: {},\n    containerStyle: {},\n    columnnHeaderProps: [],\n    columns: [],\n    transpose: false,\n    orientation: 'column',\n    answer: {},\n    inputType: '',\n    showAll: false,\n    direction: 'column',\n    isDynamic: false,\n    useDcols: false\n};\nexport default withMatrixProps(Matrix);\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport Image from '../../components/Image';\nimport Baseline from '../../components/Baseline';\nimport { generateNumberArray } from '../../utils';\nconst StyledImage = Styled((props)=>/*#__PURE__*/ _jsx(Image, _object_spread({}, props)))`\n  width: 18px;\n  height: 18px;\n  margin-right: 5px;\n  display: inline-block;\n  vertical-align: text-bottom;\n`;\nclass Rating extends Component {\n    get iconSources() {\n        switch(this.props.starStyle){\n            case 'Stars':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/submission/rating_star_icon_rated.png',\n                    'https://cdn.jotfor.ms/assets/img/submission/rating_star_icon_not_rated.png'\n                ];\n            case 'Stars 2':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/star2_v2.png',\n                    'https://cdn.jotfor.ms/assets/img/submission/rating_star_icon_not_rated.png'\n                ];\n            case 'Hearts':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/submission/heart_active.svg',\n                    'https://cdn.jotfor.ms/assets/img/submission/heart_normal.svg'\n                ];\n            case 'Light Bulps':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/bulp_v2.png',\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/bulp_v2_not_rated.png'\n                ];\n            case 'Lightnings':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/lightning_v2.png',\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/lightning_v2_not_rated.png'\n                ];\n            case 'Flags':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/flag_v2.png',\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/flag_v2_not_rated.png'\n                ];\n            case 'Shields':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/shield_v2.png',\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/shield_v2_not_rated.png'\n                ];\n            case 'Pluses':\n                return [\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/plus_v2.png',\n                    'https://cdn.jotfor.ms/assets/img/default-theme/star-rating/plus_v2_not_rated.png'\n                ];\n            default:\n                return [\n                    'https://cdn.jotfor.ms/assets/img/submission/rating_star_icon_rated.png',\n                    'https://cdn.jotfor.ms/assets/img/submission/rating_star_icon_not_rated.png'\n                ];\n        }\n    }\n    getStarCounts() {\n        const { answer, stars } = this.props;\n        const filledStars = parseInt(answer, 10) ? parseInt(answer, 10) : 0;\n        const emptyStars = parseInt(stars - answer, 10) > -1 ? parseInt(stars - answer, 10) : 0;\n        return {\n            filledStars,\n            emptyStars\n        };\n    }\n    renderSingleIcon(star) {\n        const { name, answer, answerProps, scaleFrom = 1 } = this.props;\n        // Decide whether star is filled or not based on answer data\n        const isFilled = star + 1 <= answer - scaleFrom + 1;\n        // Prepare icon props\n        const key = `${name}_${isFilled ? 'filled' : 'empty'}_${star}`;\n        const src = isFilled ? this.iconSources[0] : this.iconSources[1];\n        const className = `${isFilled ? 'isFilled' : 'isEmpty'} ${answerProps.className || ''}`;\n        return /*#__PURE__*/ _jsx(StyledImage, _object_spread({\n            src: src,\n            className: className\n        }, answerProps), key);\n    }\n    renderRating() {\n        const { stars } = this.props;\n        const raitingArray = generateNumberArray(stars);\n        return raitingArray.map(this.renderSingleIcon);\n    }\n    render() {\n        const { text, labelProps, direction, answerWrapperProps, baselineProps } = this.props;\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            labelContainerProps: labelProps,\n            answerWrapperProps: answerWrapperProps,\n            direction: direction\n        }, baselineProps), {\n            children: this.renderRating()\n        }));\n    }\n    constructor(props){\n        super(props);\n        this.renderRating = this.renderRating.bind(this);\n        this.renderSingleIcon = this.renderSingleIcon.bind(this);\n    }\n}\nRating.propTypes = {\n    name: PropTypes.string,\n    text: PropTypes.string,\n    answer: PropTypes.string,\n    stars: PropTypes.string,\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    starStyle: PropTypes.oneOf([\n        'Stars',\n        'Stars 2',\n        'Hearts',\n        'Light Bulps',\n        'Lightnings',\n        'Flags',\n        'Shields',\n        'Pluses'\n    ]),\n    direction: PropTypes.string\n};\nRating.defaultProps = {\n    name: '',\n    text: '',\n    answer: '',\n    stars: '5',\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    starStyle: 'Stars',\n    direction: 'column'\n};\nexport default Rating;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { PureComponent } from 'react';\nimport Styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport Baseline from '../../components/Baseline';\nconst SheetboxCellContainer = Styled.div`\n  display: table-cell;\n  vertical-align: middle;\n  width: 100%;\n`;\nconst SheetboxWrapper = Styled.div`\n  text-align: center;\n  line-height: 1;\n  font-size: 16px;\n`;\nconst SheetboxInput = Styled.input`\n  display: none;\n\n  &:checked + label {\n    border-color: #54B45C;\n    background-color: #F0FFF1;\n    background-image: url(https://cdn.jotfor.ms/assets/img/submission/sheetbox_check_icon.png);\n  }\n`;\nconst SheetboxCustomInput = Styled.label`\n  display: inline-block;\n  width: 1.125em;\n  height: 1.125em;\n  border: 2px solid #D3D6EC;\n  background-position: center;\n  border-radius: 3px;\n  background-size: 0.625em;\n  background-repeat: no-repeat;\n  cursor: pointer;\n`;\nclass Sheetbox extends PureComponent {\n    render() {\n        const { answer, id, onChange, text, answerWrapperProps, labelProps, direction, baselineProps } = this.props;\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            answerWrapperProps: answerWrapperProps,\n            labelContainerProps: labelProps,\n            direction: direction\n        }, baselineProps), {\n            children: /*#__PURE__*/ _jsx(SheetboxCellContainer, {\n                children: /*#__PURE__*/ _jsxs(SheetboxWrapper, {\n                    children: [\n                        /*#__PURE__*/ _jsx(SheetboxInput, {\n                            id: id,\n                            type: \"checkbox\",\n                            checked: answer === '1',\n                            onChange: onChange\n                        }),\n                        /*#__PURE__*/ _jsx(SheetboxCustomInput, {\n                            htmlFor: id\n                        })\n                    ]\n                })\n            })\n        }));\n    }\n}\nSheetbox.propTypes = {\n    answer: PropTypes.string,\n    onChange: PropTypes.func,\n    id: PropTypes.string\n};\nSheetbox.defaultProps = {\n    answer: '0',\n    onChange: ()=>{},\n    id: ''\n};\nexport default Sheetbox;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport unescape from 'lodash/unescape';\n// Note: if u change unescape in here, please change also mobile side. (index.native.jsx)\nimport Text from '../../components/Text';\nimport Baseline from '../../components/Baseline';\nimport { sanitizeHTML, replaceUrlsWithAnchors } from '../../utils';\nconst StyledText = Styled(Text)`\n  white-space: pre-wrap;\n`;\nclass Textarea extends React.Component {\n    render() {\n        const { text, answer, labelProps, answerProps, answerWrapperProps, baselineProps, direction, wysiwyg, mde } = this.props;\n        const isHTMLAnswerAllowed = wysiwyg === 'Enable' || mde === 'Yes';\n        const sanitizedAnswer = isHTMLAnswerAllowed && sanitizeHTML(answer);\n        const replacedText = replaceUrlsWithAnchors(sanitizedAnswer);\n        const Child = isHTMLAnswerAllowed ? /*#__PURE__*/ _jsx(StyledText, _object_spread({\n            dangerouslySetInnerHTML: {\n                __html: replacedText || unescape(sanitizedAnswer)\n            },\n            noSanitize: replacedText\n        }, answerProps)) : /*#__PURE__*/ _jsx(StyledText, _object_spread_props(_object_spread({}, answerProps), {\n            children: answer\n        }));\n        return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n            label: text,\n            labelContainerProps: labelProps,\n            answerWrapperProps: answerWrapperProps,\n            direction: direction\n        }, baselineProps), {\n            children: Child\n        }));\n    }\n}\nTextarea.propTypes = {\n    answer: PropTypes.string,\n    labelProps: PropTypes.shape({}),\n    text: PropTypes.string,\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    direction: PropTypes.string,\n    wysiwyg: PropTypes.string,\n    mde: PropTypes.string\n};\nTextarea.defaultProps = {\n    answer: '',\n    labelProps: {},\n    text: '',\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    direction: 'column',\n    wysiwyg: 'Disable',\n    mde: 'No'\n};\nexport default Textarea;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Text from '../../components/Text';\nimport View from '../../components/View';\nimport Styled from '../../utils/styled';\nimport Imageline from '../../components/Imageline';\nconst StyledView = Styled(View)`\n  border-bottom: 1px solid #C2C3C4;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 12px;\n  margin-top: 12px;\n  page-break-inside: avoid;\n`;\nconst ProductView = Styled(View)`\n  padding: 15px 0;\n  border-bottom: 1px solid #C2C3C4;\n  display: flex;\n  page-break-inside: avoid;\n`;\nconst ProductName = Styled(Text)`\n  font-weight: bold;\n  color: #18152C;\n`;\nconst ProductPeriod = Styled(Text)`\n  font-weight: bold;\n  color: #18152C;\n`;\nconst ProductPrice = Styled(Text)`\n  flex-shrink: 1;\n  font-weight: bold;\n`;\nconst ProductImage = Styled(Text)`\n  flex-shrink: 1;\n  min-width: 100px;\n`;\nconst ProductOptions = Styled(View)`\n  flex-direction: column;\n`;\nconst ProductDetails = Styled(View)`\n  flex-grow: 1;\n  padding: 0 15px;\n  line-height: 1.5em;\n`;\nconst HeaderText = Styled(Text)`\n  font-weight: bold;\n`;\nconst PriceView = Styled(View)`\n  display: flex;\n  margin-bottom: 12px;\n`;\nconst PriceLabel = Styled(Text)`\n  flex-grow: 1;\n`;\nconst PriceText = Styled(Text)`\n  flex-shrink: 1;\n`;\nconst PriceDetailsView = Styled(View)`\n  margin: 12px 0;\n  font-weight: bold;\n  display: flex;\n  flex-direction: column;\n  border-bottom: 1px solid #C2C3C4;\n`;\nconst PaymentImageText = Styled(Text)`\n  padding: 41px 5px;\n  background-color: #CEF1FE;\n  width: 100%;\n  max-width: 100px;\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\nconst PayerView = Styled(View)`\n  border-bottom: 1px solid #C2C3C4;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 12px;\n  margin-top: 12px;\n  page-break-inside: avoid;\n`;\nconst PayerViewTitle = Styled(Text)`\n  font-weight: bold;\n`;\nconst ProductImageline = Styled((props)=>/*#__PURE__*/ _jsx(Imageline, _object_spread({}, props)))`\n  text-align: center;\n`;\n// Sheets\nconst SheetsProductView = Styled(View)`\n  ${({ isPreview })=>isPreview ? `display: table;\n    width: 100%;\n    & + & {\n      padding-top: 12px;\n      margin-top: 12px;\n      border-top: 1px solid rgba(209, 212, 228, 0.5);\n    }` : `display: inline-table;\n    height: 26px;\n    border-radius: 4px;\n    padding: 0 4px;\n    margin-right: 6px;`}\n`;\nconst SheetsProductName = Styled(Text)`\n  display: inline-table;\n  vertical-align: middle;\n  color: #18152C;\n  line-height: 26px;\n  ${({ isPreview })=>isPreview && 'font-family: \"Circular Std Medium\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;'}\n`;\nconst SheetsProductDetails = Styled(View)`\n  display: table-cell;\n  vertical-align: middle;\n  padding-right: 20px;\n  white-space: normal;\n`;\nconst SheetsPriceView = Styled(View)`\n  display: table;\n  width: 100%;\n  table-layout: fixed;\n`;\nconst SheetsPriceLabel = Styled(Text)`\n  display: table-cell;\n  vertical-align: middle;\n`;\nconst SheetsPriceText = Styled(Text)`\n  display: table-cell;\n  vertical-align: middle;\n  text-align: right;\n  font-size: 18px;\n  font-family: \"Circular Std Medium\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n`;\nconst SheetsPriceDetailsView = Styled(View)`\n  display: block;\n  text-decoration: none;\n  border-top: 1px solid rgba(209, 212, 228, 0.5);\n  text-transform: uppercase;\n  padding-top: 12px;\n  margin-top: 16px;\n`;\nconst SheetsPayerView = Styled(View)`\n  display: block;\n  padding-top: 16px;\n  position: relative;\n  margin-top: 12px;\n  border-top: 1px solid rgba(209, 212, 228, 0.5);\n`;\nconst SheetsPayerViewTitle = Styled(Text)`\n  font-family: \"Circular Std Medium\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n  font-size: 17px;\n  margin-bottom: 6px;\n\n  & ~ * {\n    color: #51585D;\n    font-size: 15px;\n  }\n`;\nconst SheetsProductOptions = Styled(Text)`\n  color: #51585D;\n  font-size: 14px;\n  & > div {\n    float: left;\n    width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n`;\nconst SheetsProductPrice = Styled(Text)`\n  display: table-cell;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-align: right;\n  width: 1px;\n`;\nconst SheetsProductImageline = Styled((props)=>/*#__PURE__*/ _jsx(Imageline, _object_spread({}, props)))`\n  display: table-cell;\n  vertical-align: middle;\n  font-size: 0;\n  ${({ isPreview })=>isPreview ? `height: 60px;\n    width: 60px;\n    border: 1px solid #D5D9EC;\n    border-radius: 4px;\n    overflow: hidden;\n    & + div {\n      padding-left: 14px;\n    }` : `width: 20px;\n    height: 20px;\n    & + div {\n      padding-left: 6px;\n    }\n    & > div {\n      display: inherit;\n      vertical-align: middle;\n      width: 20px;\n      height: 20px;\n      border-radius: 4px;\n      overflow: hidden;\n      background-color: #fff;\n    }`}\n`;\nconst SheetsPaymentImageText = Styled(Text)`\n  display: table-cell;\n  vertical-align: middle;\n  ${({ isPreview })=>isPreview ? `width: 1px;\n    white-space: nowrap;\n    padding: 30px 10px;\n    border-radius: 4px;\n    font-size: 18px;\n    font-family: \"Circular Std Medium\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n    & + div {\n      padding: 0 0 0 14px;\n      display: table-cell;\n    }` : `padding: 0 4px;\n    & + div {\n      padding: 0 4px;\n      display: none;\n    }\n    `}\n`;\nexport const defaultsMap = {\n    StyledView,\n    ProductView,\n    ProductName,\n    ProductPeriod,\n    ProductPrice,\n    ProductImage,\n    ProductOptions,\n    ProductDetails,\n    HeaderText,\n    PriceLabel,\n    PriceText,\n    PriceDetailsView,\n    PaymentImageText,\n    PriceView,\n    ProductImageline,\n    PayerView,\n    PayerViewTitle\n};\nexport const sheetsMap = _object_spread_props(_object_spread({}, defaultsMap), {\n    ProductView: SheetsProductView,\n    ProductImageline: SheetsProductImageline,\n    ProductName: SheetsProductName,\n    PriceView: SheetsPriceView,\n    PriceLabel: SheetsPriceLabel,\n    PriceText: SheetsPriceText,\n    ProductDetails: SheetsProductDetails,\n    PriceDetailsView: SheetsPriceDetailsView,\n    PayerView: SheetsPayerView,\n    PayerViewTitle: SheetsPayerViewTitle,\n    ProductOptions: SheetsProductOptions,\n    ProductPrice: SheetsProductPrice,\n    PaymentImageText: SheetsPaymentImageText\n});\nexport function getStyledComponent(appName) {\n    switch(appName){\n        case 'sheets':\n            return sheetsMap;\n        default:\n            return defaultsMap;\n    }\n}\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { isBrightColor } from '@jotforminc/utils';\nimport Styled from 'styled-components';\nimport List from '../../../components/List';\nimport Baseline from '../../../components/Baseline';\nconst getAnswer = (answer)=>{\n    const keys = [\n        'title'\n    ];\n    return keys.reduce((acc, curr)=>{\n        if (acc === '' && answer[curr]) {\n            // eslint-disable-next-line no-param-reassign\n            acc = answer[curr];\n        }\n        return acc;\n    }, '');\n};\nconst getIconProps = (props)=>{\n    const { appIconColor, appIconType, appIconURL, appIconBackground } = props;\n    return {\n        iconColor: appIconColor,\n        type: appIconType,\n        url: appIconURL,\n        backgroundColor: appIconBackground\n    };\n};\nconst SubmittedVia = ({ answer, labelProps, answerProps, answerWrapperProps, label, direction, baselineProps, containerProps })=>{\n    const { PortalItemRenderer = null } = answerProps;\n    const icon = getIconProps(answer);\n    const portalItemProps = _object_spread_props(_object_spread({}, answer), {\n        icon\n    });\n    const StyledPortalItemRenderer = Styled.div`\n    color: ${isBrightColor(answer.appIconBackground) ? '#2B3245' : '#FFF'};\n    background-color: ${answer.appIconBackground};\n    padding: 6px;\n    border: 1px solid #E3E5F5;\n    font-size: 14px;\n    font-weight: 500;\n    border-radius: 4px;\n    width: fit-content;\n    max-width: 400px;\n\n    * { font-size: 14px; }\n    & > div:only-child { padding-right: 4px; }\n    .jfIconSVG-wrapper svg { padding: 0; }\n  `;\n    const normalizedAnswer = getAnswer(answer);\n    const hasAnswer = (normalizedAnswer === null || normalizedAnswer === void 0 ? void 0 : normalizedAnswer.length) > 0;\n    return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n        label: label,\n        labelContainerProps: labelProps,\n        answerWrapperProps: answerWrapperProps,\n        direction: direction\n    }, baselineProps), {\n        children: hasAnswer && (PortalItemRenderer ? /*#__PURE__*/ _jsx(StyledPortalItemRenderer, {\n            children: /*#__PURE__*/ _jsx(PortalItemRenderer, _object_spread({}, portalItemProps))\n        }) : /*#__PURE__*/ _jsx(List, {\n            type: \"option\",\n            showAll: false,\n            allItems: [\n                normalizedAnswer\n            ],\n            items: [\n                normalizedAnswer\n            ],\n            itemProps: answerProps,\n            containerProps: containerProps\n        }))\n    }));\n};\nSubmittedVia.propTypes = {\n    answer: PropTypes.string,\n    label: PropTypes.string,\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    direction: PropTypes.string,\n    baselineProps: PropTypes.shape({}),\n    containerProps: PropTypes.shape({})\n};\nSubmittedVia.defaultProps = {\n    baselineProps: {},\n    answer: '',\n    label: 'Source App',\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    direction: 'column',\n    containerProps: {}\n};\nexport default SubmittedVia;\n","/* eslint-disable max-len */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport Baseline from '../../../components/Baseline';\nimport Tableview from '../../../components/Tableview';\nimport ThreadAction from './ThreadAction';\nimport ThreadActor from './ThreadActor';\nimport ThreadDate from './ThreadDate';\nimport { LocaleTypes } from '../../../constants/schemas';\nconst StyledTableview = Styled(Tableview)`\n  thead {\n    th {\n      text-align: left;\n      border-bottom: 1px solid #E5E6EF;\n      background-color: #EDEEF7;\n      padding: 12px;\n\n      &:not(:last-of-type) {\n        border-right: 1px solid #DFDEE7;\n      }\n    }\n  }\n\n  tbody {\n    td {\n      background-color: #FAFAFD;\n\n      &:not(:last-of-type).isAnswer {\n        border-right: 1px solid #E5E6EF;\n      }\n    }\n  }\n\n  .stAnswer {\n    &-team {\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n      line-height: 14px;\n      color: #0A1551;\n      margin-top: 6px;\n\n      &-name {\n        display: flex;\n        align-items: center;\n        font-size: 12px;\n        margin-top: 6px;\n        font-weight: 500;\n\n        svg {\n          width: 15px;\n          height: 15px;\n          margin-right: 4px;\n        }\n      }\n\n      .sb-customIcon {\n        width: 14px;\n        height: 14px;\n        margin-right: 4px;\n\n        > span > span {\n          font-size: 11px !important;\n          widh: 14px;\n          height: 14px;\n          display: inline-block;\n        }\n      }\n    }\n\n    &-action {\n      line-height: 1.5;\n      margin: 9px 6px;\n\n      &-text {\n        &.isComment {\n          width: 100%;\n        }\n\n        &.isOutcome {\n          display: inline-block;\n          padding: 6px 12px;\n          margin: 4px auto 4px 0;\n          border-radius: 4px;\n        }\n      }\n\n      &-image {\n        &.isSignature {\n          margin-top: 8px;\n          max-height: 42px;\n          display: block;\n        }\n      }\n\n      &-pill {\n        background-color: #F3F3FE;\n        color: #6C73A8;\n        border-radius: 10px;\n        display: inline-flex;\n        align-items: center;\n        font-size: 12px;\n        padding: 2px 6px 2px 4px;\n        gap: 4px;\n        margin-top: 6px;\n        margin-bottom: 6px;\n  \n        &:before {\n          content: \"\";\n          width: 16px;\n          height: 16px;\n          background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath fill='%236C73A8' fill-rule='evenodd' d='M12.06 4.027a2.476 2.476 0 0 1 0 3.502l-.888.889a.667.667 0 1 0 .942.942l.89-.888a3.81 3.81 0 0 0-5.388-5.388l-.889.89a.667.667 0 1 0 .943.942l.889-.889a2.476 2.476 0 0 1 3.502 0Zm-6.666 6.666a.667.667 0 0 1 0-.942L9.84 5.306a.667.667 0 0 1 .943.943l-4.445 4.444a.667.667 0 0 1-.943 0Zm-1.28-2.222a2.476 2.476 0 0 0 3.502 3.502l.89-.89a.667.667 0 1 1 .942.944l-.889.889a3.81 3.81 0 0 1-5.387-5.388l.889-.889a.667.667 0 0 1 .943.943l-.89.89Z' clip-rule='evenodd'/%3E%3C/svg%3E\");                background-repeat: no-repeat;\n          background-position: center;\n          background-size: 16px;\n        }\n      }\n    }\n\n    &-date {\n      padding: 0 6px;\n    }\n\n    &-actor {\n      display: flex;\n      margin: 9px 3px;\n      align-items: center;\n\n      .sb-customIcon {\n        > span > span {\n          font-size: 16px !important;\n        }\n      }\n\n      &-avatar {\n        min-width: 36px;\n        max-width: 36px;\n        min-height: 36px;\n        max-height: 36px;\n        flex-shrink: 1;\n        border-radius: 50%;\n        overflow: hidden;\n        background-color: #5E74E6;\n        box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dcdff0;\n        position: relative;\n\n        &-image {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-repeat: no-repeat;\n\n          &.isUser {\n            background-size: cover;\n          }\n\n          &.isSystem {\n            background-image: url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M5.906 3.633h8.182v3.636H5.906z'/%3E%3Cpath d='M3.18 13.635V9.09h13.636v4.545' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath stroke='%23fff' stroke-width='1.7' d='M9.83 13.637V9.09'/%3E%3Ccircle cx='3.17898' cy='14.0969' r='2.27273' fill='%23fff'/%3E%3Ccircle cx='16.8157' cy='14.0969' r='2.27273' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M7.723 11.824h4.545v4.546H7.723z'/%3E%3C/svg%3E\");\n            background-position: center;\n          }\n\n          &.isGroup {\n            background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.08.922a1.77 1.77 0 1 0 0 3.54 1.77 1.77 0 0 0 0-3.54ZM7 3.282a2.36 2.36 0 1 0 0 4.72 2.36 2.36 0 0 0 0-4.72Zm0 5.31c-2.176 0-4.13 1.49-4.13 3.541 0 .326.264.59.59.59h7.08a.59.59 0 0 0 .59-.59c0-2.051-1.954-3.54-4.13-3.54ZM10.75.923a1.77 1.77 0 1 0 0 3.54 1.77 1.77 0 0 0 0-3.54Zm-7.29 4.835a.59.59 0 0 0-.766-.544C1.462 5.6.51 6.672.51 8.003c0 .326.264.59.59.59h2.51a.59.59 0 0 0 .484-.928 3.52 3.52 0 0 1-.632-1.908Zm7.844-.544a.59.59 0 0 0-.767.544 3.52 3.52 0 0 1-.632 1.908.59.59 0 0 0 .484.928h2.51a.59.59 0 0 0 .59-.59c0-1.331-.952-2.403-2.185-2.79Z' clip-rule='evenodd'/%3E%3C/svg%3E\");\n            background-position: center;\n            background-size: 20px;\n            background-color: #6C73A8;\n          }\n          svg {\n              height: unset !important;\n              width: unset !important;\n              stroke: none !important;\n          }\n        }\n      }\n\n      &-info {\n        flex-grow: 1;\n        margin-left: 12px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        line-height: 1.5;\n      }\n    }\n  }\n`;\nconst SubmissionThread = ({ answer, text, labelProps, answerWrapperProps, direction, transpose, baselineProps, orientation, containerStyle, sublabelProps, answerProps, columnnHeaderProps, dateFormat, locale, amPmHour, showAvatars, showAssigneeEmail, showComments, showSignature, showIP, userTimeZone, customTableProps })=>{\n    const columns = [\n        t('Actor'),\n        t('Actions'),\n        t('Date')\n    ];\n    const tableData = React.useMemo(()=>answer.map((rowData)=>{\n            var _action_details;\n            const { action, actor, ip, date } = rowData;\n            if (action === null || action === void 0 ? void 0 : (_action_details = action.details) === null || _action_details === void 0 ? void 0 : _action_details.notRequired) {\n                return null;\n            }\n            return [\n                /*#__PURE__*/ _jsx(ThreadActor, _object_spread_props(_object_spread({}, actor), {\n                    showAvatars: showAvatars,\n                    showAssigneeEmail: showAssigneeEmail\n                })),\n                /*#__PURE__*/ _jsx(ThreadAction, _object_spread_props(_object_spread({}, action), {\n                    actor: actor,\n                    showComments: showComments,\n                    showSignature: showSignature\n                })),\n                /*#__PURE__*/ _jsx(ThreadDate, {\n                    date: date,\n                    ip: ip,\n                    dateFormat: dateFormat,\n                    locale: locale,\n                    amPmHour: amPmHour,\n                    showIP: showIP,\n                    userTimeZone: userTimeZone\n                })\n            ];\n        }), [\n        answer,\n        dateFormat,\n        locale,\n        amPmHour,\n        showAvatars,\n        showAssigneeEmail,\n        userTimeZone\n    ]);\n    return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n        label: text,\n        labelContainerProps: labelProps,\n        answerWrapperProps: answerWrapperProps,\n        direction: direction\n    }, baselineProps), {\n        children: /*#__PURE__*/ _jsx(StyledTableview, _object_spread({\n            name: text,\n            rows: [],\n            tableData: tableData,\n            columns: columns,\n            orientation: orientation,\n            containerStyle: containerStyle,\n            headerProps: sublabelProps,\n            answerProps: answerProps,\n            transpose: transpose,\n            columnnHeaderProps: columnnHeaderProps\n        }, customTableProps))\n    }));\n};\nSubmissionThread.propTypes = {\n    answer: PropTypes.arrayOf(PropTypes.shape({})),\n    text: PropTypes.string,\n    columns: PropTypes.arrayOf(PropTypes.string),\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.shape({}),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    sublabelProps: PropTypes.shape({}),\n    containerStyle: PropTypes.shape({}),\n    columnnHeaderProps: PropTypes.arrayOf(PropTypes.shape({})),\n    transpose: PropTypes.bool,\n    orientation: PropTypes.oneOf([\n        'row',\n        'column'\n    ]),\n    direction: PropTypes.string,\n    dateFormat: PropTypes.string,\n    userTimeZone: PropTypes.string,\n    locale: LocaleTypes.schema,\n    amPmHour: PropTypes.bool,\n    showAvatars: PropTypes.bool,\n    showAssigneeName: PropTypes.bool,\n    showAssigneeEmail: PropTypes.bool,\n    showComments: PropTypes.bool,\n    showSignature: PropTypes.bool,\n    showIP: PropTypes.bool,\n    showDate: PropTypes.bool,\n    customTableProps: PropTypes.object\n};\nSubmissionThread.defaultProps = {\n    text: '',\n    labelProps: {},\n    answerProps: {},\n    answerWrapperProps: {},\n    baselineProps: {},\n    sublabelProps: {},\n    containerStyle: {},\n    columnnHeaderProps: [],\n    columns: [],\n    transpose: false,\n    orientation: 'column',\n    answer: [],\n    userTimeZone: '',\n    direction: 'column',\n    dateFormat: 'MMM D, YYYY HH:mm',\n    locale: LocaleTypes.default,\n    amPmHour: false,\n    showAvatars: PropTypes.bool,\n    showAssigneeName: true,\n    showAssigneeEmail: true,\n    showComments: true,\n    showSignature: true,\n    showIP: true,\n    showDate: true,\n    customTableProps: {}\n};\nexport default SubmissionThread;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Baseline from '../../components/Baseline';\nimport AssigneeLine from '../../components/AssigneeLine';\nconst ScAssigneeLine = styled(AssigneeLine)`\n  border-radius: 14px !important;\n  padding: 5px 6px !important;\n  img {\n    width: 18px !important;\n    height: 18px !important;\n  }\n`;\nconst UserInfo = ({ text, answer, labelProps, answerProps, answerWrapperProps, containerProps, baselineProps, direction })=>{\n    const { name, avatarUrl, email } = answer;\n    return /*#__PURE__*/ _jsx(Baseline, _object_spread_props(_object_spread({\n        label: text,\n        labelContainerProps: labelProps,\n        answerWrapperProps: answerWrapperProps,\n        direction: direction\n    }, baselineProps), {\n        children: /*#__PURE__*/ _jsx(\"div\", _object_spread_props(_object_spread({}, containerProps), {\n            children: /*#__PURE__*/ _jsx(ScAssigneeLine, _object_spread({\n                label: name || email,\n                imageLabel: name || email,\n                value: avatarUrl\n            }, answerProps))\n        }))\n    }));\n};\nUserInfo.propTypes = {\n    text: PropTypes.string,\n    answer: PropTypes.shape({\n        name: PropTypes.string,\n        email: PropTypes.string,\n        avatarUrl: PropTypes.string\n    }),\n    labelProps: PropTypes.shape({}),\n    answerProps: PropTypes.oneOfType([\n        PropTypes.shape({}),\n        PropTypes.array\n    ]),\n    answerWrapperProps: PropTypes.shape({}),\n    baselineProps: PropTypes.shape({}),\n    containerProps: PropTypes.shape({}),\n    direction: PropTypes.string\n};\nUserInfo.defaultProps = {\n    text: '',\n    answer: {},\n    labelProps: {},\n    answerProps: [],\n    answerWrapperProps: {},\n    baselineProps: {},\n    containerProps: {},\n    direction: 'column'\n};\nexport default UserInfo;\n","import Styled from 'styled-components';\n// eslint-disable-next-line\nconst signHere = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMDAgNDMiPgogIDxwYXRoIHN0cm9rZT0iI0RGRTNFRCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEgMzguNjAyYzExLjI0NiAzLjE5NyAyMi4xODItLjk5IDMxLjUwOC03LjE3MiA0LjkzMi0zLjI3IDkuODI2LTcuMTgzIDEyLjgyNS0xMi4zNDEgMS4xOTUtMi4wNTcgMi42NTYtNS42MjYtMS4xMDYtNS42NTgtNC4wOTMtLjAzNC03LjE0IDMuNjYyLTguNjY4IDcuMDIyLTIuMTkgNC44MTktMi4yNjggMTAuNTI2LjQwNyAxNS4xNyAyLjUzMSA0LjM5NSA2Ljc3OCA2LjQ3NCAxMS44NDUgNS42MiA1LjI5My0uODkzIDkuOTItNC41MDggMTMuNzY1LTcuOTg2YTQwLjcxNCA0MC43MTQgMCAwIDAgMy45NjYtNC4wOTNjLjE0Mi0uMTcuNjQyLTEuMDA2Ljk2Ni0xLjA2NC4xMi0uMDIxLjI5OCAzLjY0My4zMyAzLjg0My4yODggMS43OSAxLjE5MSAzLjgwNiAzLjMwNSAzLjg2NyAyLjY5LjA3OCA0Ljk0LTIuMTcyIDYuNzUtMy44My42MS0uNTU5IDIuNTUtMy4yNDEgMy41ODMtMy4yNDEuNDI1IDAgMS4yNDkgMi4xNDMgMS40MzcgMi40MjggMi40ODQgMy43NjQgNi4xMzIgMi40MDEgOC45Ni0uMjM4LjUyLS40ODUgMy4zMDUtNC4zNjcgNC40MzYtMy42NjcuOTExLjU2MyAxLjMxMyAxLjg5MyAxLjc4IDIuNzc4Ljc2IDEuNDQxIDEuNzIyIDIuNDY4IDMuMzMgMy4wMDQgMy40OTMgMS4xNjYgNy4yNjEtMi4xMDIgMTAuODAzLTIuMTAyIDEuMDMzIDAgMS41NjEuNTY4IDIuMTEgMS4zNTEuNzQ5IDEuMDY4IDEuNTIxIDEuODEzIDIuODczIDIuMTAzIDQuMTg4Ljg5OCA3LjYxNy0zLjA3NyAxMS42NjctMi43MjggMS4xODEuMTAxIDIuMDYzIDEuMjkyIDIuOTQ5IDEuOTI3IDEuNzg4IDEuMjggMy45MzggMi4xNjcgNi4xMjcgMi40NzggMy41MDkuNDk5IDcuMDI3LS4xNjIgMTAuNDQ3LS45IDUuOTA1LTEuMjc3IDExLjc1Mi0yLjc5OSAxNy42NjctNC4wMzEiLz4KICA8ZyBmaWxsPSIjREZFM0VEIiBjbGlwLXBhdGg9InVybCgjYSkiPgogICAgPHBhdGggZD0iTTE5Ni41MTQgMTcuNjU3IDE4NC40OTEgMy4xM2EuNjY1LjY2NSAwIDAgMC0uOTM4LS4wODlsLTIuOTA1IDIuNDA1YS42NjYuNjY2IDAgMCAwLS4wODkuOTM4bDEyLjAyMyAxNC41MjZhLjY2NC42NjQgMCAwIDAgLjQ1MS4yMzkuNjY2LjY2NiAwIDAgMCAuNDg4LS4xNWwyLjkwNS0yLjQwNWEuNjY2LjY2NiAwIDAgMCAuMDg4LS45Mzh6bS0xNS4wNzctOC4xMjEtMTAuNTgyIDIuODY5YS42NjYuNjY2IDAgMCAwLS40NzIuNDhsLTQuMjI4IDE2Ljc5NSA3LjgyLTYuNDcyYTMuMzQgMy4zNCAwIDAgMSAuODE1LTQuMTM3IDMuMzM3IDMuMzM3IDAgMCAxIDQuNjkzLjQ0MiAzLjMzOCAzLjMzOCAwIDAgMS0uNDQyIDQuNjk0IDMuMzIyIDMuMzIyIDAgMCAxLTIuNDM4Ljc1IDMuMzM1IDMuMzM1IDAgMCAxLTEuNzc4LS43MjFsLTcuODIgNi40NzEgMTcuMjg5LTEuMDE0YS42NjguNjY4IDAgMCAwIC41NjEtLjM3NGw0Ljc5Ni05Ljg1OS04LjIxNC05LjkyNHoiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImEiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTY3LjU3MyAwaDMydjMyaC0zMnoiIHRyYW5zZm9ybT0icm90YXRlKDUuMzg2IDE2Ny41NzMgMCkiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgo8L3N2Zz4=';\nexport const ScMainContainer = Styled.div`\n  text-align: center;\n  [data-uikit-modal-container=\"true\"] & { padding: 12px 24px; }\n`;\nexport const ScFooter = Styled.div`\n  display: flex;\n  justify-content: space-between;\n`;\nexport const ScHeader = Styled.div`\n  color: #2c3345;\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  svg {\n    width: 18px; height: 16px;\n    flex: 0 0 18px;\n    margin-right: 8px;\n  }\n`;\nexport const ScTitle = Styled.div`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\nexport const ScTypingInput = Styled.input`\n  width: 100%;\n  border: none;\n  appearance: none;\n  font-size: 48px;\n  outline: none;\n  padding: 0;\n  text-align: center;\n  line-height: 152px;\n  border-bottom: 2px solid #979797;\n  &:invalid { background: url(${signHere}) no-repeat center/65%; }\n`;\nexport const ScCanvas = Styled.div`\n  ${({ mode })=>mode === 'type' && 'opacity: 0; position: absolute; left: -9999px; pointer-events: none;'}\n  text-align: right;\n  canvas {\n    display: inline-block;\n    ${({ emptyCanvas })=>emptyCanvas && `background: url(${signHere}) no-repeat center/65%;`}\n    border-bottom: 2px solid #979797;\n  }\n`;\nexport const ScTypeSwitcher = Styled.div`\n  button {\n    border: 1px solid #2e69ff;\n    padding: .3em 1em;\n    margin: 0;\n    transition: background-color .1s, color .1s;\n    &:first-child {\n      border-radius: 4px 0 0 4px;\n      border-width: 1px 0 1px 1px;\n    }\n    &:last-child {\n      border-radius: 0 4px 4px 0;\n      border-width: 1px 1px 1px 0;\n    }\n  }\n`;\nexport const ScColorSelection = Styled.div`\n  display: flex;\n  align-items: center;\n  ${({ mode })=>mode === 'draw' && 'padding-top: 12px;'}\n  span { color: #4a5265; }\n`;\nexport const ScModal = Styled.div`\n  background-color: #fefefe;\n  border-radius: 4px;\n  width: 100%;\n  .header-content {\n    width: 80%;\n    padding-left: 24px;\n  }\n  [data-sc=\"footer\"] { padding: 12px 24px; }\n`;\nexport const ScColorSelectionInput = Styled.input`\n  position: relative;\n  appearance: none;\n  margin: 0 0 0 16px;\n  background-color: ${({ value })=>value};\n  width: 14px; height: 14px;\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  &:before {\n    content: '';\n    position: absolute;\n    width: 100%; height: 100%;\n    top: 0; left: 0;\n    transform: scale(1.1);\n    border-radius: 50%;\n    box-shadow: none;\n    transition: box-shadow .2s;\n  }\n  &:checked:before {\n    box-shadow: 0 0 0 2px rgba(46, 105, 255, .8);\n  }\n`;\nexport const ScSettingsContainer = Styled.div`\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  ${({ mode })=>mode === 'type' && 'padding-top: 12px;'}\n  button:not(.clearButton) {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    img {\n      width: 10px; height: 6px;\n      margin-left: 12px;\n    }\n  }\n  button.clearButton {\n    background-color: transparent;\n    color: #8894ab;\n    padding: 0;\n  }\n  ul {\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 0 2px 9px 0 rgba(76, 72, 72, .3);\n    &, li {\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n    div {\n      background-color: #fff;\n      font-size: 24px;\n      cursor: pointer;\n      padding: 8px 12px;\n      white-space: nowrap;\n      transition: background-color .2s;\n      &:hover { background-color: #f5f5f5; }\n      &[data-selected=\"true\"] { background-color: #efeff0; }\n    }\n  }\n`;\nexport const ScButtonCont = Styled.div`\n  position: relative;\n`;\nexport const ScButton = Styled.button`\n  appearance: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 1em;\n  padding: 16px 32px;\n  background-color: #ececec;\n  color: #4c5467;\n  text-transform: capitalize;\n  &.dropdownButton {\n    padding: 12px 16px;\n    img {\n      transform: rotateX(${({ opened })=>opened ? '180deg' : '0'});\n      transition: transform .2s;\n    }\n  }\n  &.isGray { background-color: #fff; color: #2e69ff; }\n  &.isBlue { background-color: #2e69ff; color: #fff; }\n  &.isBlue:disabled { background-color: #2e69ff88; cursor: auto; }\n`;\n","/* eslint-disable max-len */ import styled, { css } from 'styled-components';\nconst commonStyles = css`\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size: 16px;\n`;\nexport const ScBox = styled.div`\n  box-sizing: border-box;\n  background-color: #ffffff;\n  border-radius: 4px;\n  margin: auto auto;\n  height: 100%;\n  width: 560px;\n  // box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.5);\n  border: 1px solid #D8DAE9;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  > div { flex: 1 1 auto; min-height: 0; }\n\n  @media screen and (max-width: 480px) {\n    border-radius: 0;\n  }\n`;\nexport const ScHeader = styled.div`\n  display: flex;\n  align-items: center;\n  height: 75px;\n  padding: 0 1.625rem;\n  border-bottom: 1px solid #EDEEF5;\n  \n  > svg {\n    margin-right: 14px;\n    height: 100%;\n    width: 100%;\n    max-width: 20px;\n    max-height: 20px;\n\n    [fill~=\"#fff\"] {\n      fill: #141E46;\n    }\n    \n    [stroke~=\"#fff\"] {\n      stroke: #141E46;\n    }\n  }\n  \n  > span {\n    font-family: 'Circular Std Medium', 'Circular Std Book', sans-serif;\n    font-weight: 500; \n    font-size: 20px;\n    line-height: 25px;\n    \n    color: #141E46;\n  }\n  \n  && { flex: 0 0 auto; }\n`;\nexport const ScBody = styled.div`\n  padding: 1.125rem 1.625rem;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  \n  > span {\n    font-size: 16px;\n    line-height: 25px;\n    color: #121C48;\n    margin-bottom: 16px;\n    display: inline-block;\n  }\n\n  .isErrored {\n    .wmApproval {\n      &-task {\n        &-outcome {\n          padding-bottom: 3em;\n          margin-bottom: -2.25em;\n        }\n      }\n\n      &-error {\n        margin-top: -0.75em !important;\n        text-align: right;\n        padding-top: .5em;\n      }\n    }\n  }\n  \n  .wmApproval{\n    &-task {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    \n      &-container {\n        flex: 1;\n      }\n    \n      &-comment {\n        flex: 1;\n\n        &-title {\n          display: none;\n        }\n        \n        &-textarea {\n          height: 20vh;\n          min-height: 120px;\n          max-height: 200px;\n\n          &-wrapper {\n            margin-bottom: 1.125rem;\n          }  \n        }\n      }\n     \n      &-outcome {\n        display: flex;\n        justify-content: flex-end;\n        flex-wrap: wrap; \n        \n        border-top: 1px solid #EDEEF5;\n        padding: 1rem 1.625rem;\n        background-color: #F8F8FB;\n        margin: -1rem -1.625rem;\n        margin-top: 0;\n        position: relative;\n        z-index: 1;\n        \n        @media screen and (max-width: 480px) {\n          flex-direction: column;\n          align-items: stretch;\n          margin-top: auto;\n        }\n        \n        &-button {\n          &,\n          &:last-of-type{\n            margin: 0.125rem\n          }\n          \n          @media screen and (max-width: 480px) {\n            margin: 0 0 12px;\n            \n            &:last-of-type {\n              margin: 0;\n            }\n          }\n        }\n      }\n    }\n  }\n`;\nexport const ScFooter = styled.div`\n  border-top: 1px solid #eaebf2;\n  min-height: 30px;\n  padding: 12px 27px 21px;\n\n  && { flex: 0 0 auto; }\n\n  @media screen and (max-width: 480px) {\n    padding: 9px 18px;\n  }\n`;\nexport const ScOverlay = styled.div`\n  * { box-sizing: border-box; }\n  ${commonStyles};\n  font-family: \"Circular Std Book\", Circular, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 7002; \n  background-color: rgba(39, 41, 55, 0.61);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  :not(:last-child) {\n    display: none;\n  }\n\n  & > div {\n    ${(p)=>p.isFullScreen ? css`\n      width: 100%;\n      height: 100%;\n    ` : css`\n      width: 96%;\n      max-width: 770px;\n      max-height: 80vh;\n      // min-height: 424px;\n    `};\n    display: flex;\n    overflow: visible;\n  }\n\n  ${(p)=>p.isFullScreen && css`\n    ${ScBox} { border-radius: 0; }\n  `};\n\n  @media screen and (max-width: 480px), (max-height: 480px) {\n    overflow: auto;\n    display: block;\n\n    & > div {\n      max-height: none;\n      height: 100%;\n      width: 100%;\n      margin: 0;\n      max-width: none;\n\n      > div > div:empty {\n        display: none;\n      }\n    }\n  }\n`;\n","import Styled from 'styled-components';\nexport const ScSuggestions = Styled.div`\n  font-size: 16px;\n  line-height: 1em;\n  border-radius: 4px;\n  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.5);\n  background-color: #fff;\n  width: clamp(320px, 100%, 640px);\n  padding: .375em 0;\n  height: 260px;\n  overflow-x: hidden;\n\n  .suggestion {\n    display: flex;\n    align-items: center;\n    padding: .75em 1.25em;\n    position: relative;\n    cursor: pointer;\n    transition: background-color .15s;\n\n    &-email-container {\n      display: flex;\n      justify-content: flex-start;\n      margin-right: 10px;\n    }\n\n    &-email {\n      text-overflow: ellipsis;\n      width: 16em;\n      overflow: hidden;\n      white-space: nowrap;\n    }\n\n    &-info {\n      font-size: .875em;\n      color: #2c3345;\n      color: #6a6e8f;\n      flex: 1 1 auto;\n      position: relative;\n    }\n\n    &-teamlist {\n      background-color: #2b3245;\n      border-radius: 0.25em;\n      z-index: 1;\n      width: auto;\n      position: absolute;\n      right: -10em;\n    }\n\n    &-teamitem {\n      background-color: #2b3245;\n      color: #abadb4;\n      padding: 0.5em 0.6875em;\n      text-align: left;\n      display: flex;\n      right: 0em;\n      width: 14.0625em;\n      z-index: 1;\n    }\n\n    &-avatar {\n      flex: 0 0 32px;\n      height: 32px;\n      border: 2px solid #fff;\n      border-radius: 50%;\n      overflow: hidden;\n      font-size: .75em;\n      margin-right: 1em;\n\n      div {\n        height: 100%;\n        line-height: 32px;\n        color: #fff;\n        text-align: center;\n        font-weight: 500;\n        background-color: #b9bbd2;\n        background-repeat: no-repeat;\n        background-size: cover;\n        text-transform: uppercase;\n      }\n    }\n    .expand-list {\n      background-color: #EBEDF3;\n      color: #2C3345;\n      border-radius: 1em;\n      text-align: center;\n      width: 5em;\n      height: 1.5em;\n      white-space: nowrap;\n      margin-left: 2em;\n\n      &:hover {\n        background-color: rgba(84, 180, 92, 0.1);\n      }\n    }\n\n    & + .suggestion:before {\n      content: \"\";\n      display: block;\n      height: 1px;\n      right: 1em;\n      left: 1em;\n      position: absolute;\n      top: 0;\n      background-color: #eaebf2;\n    }\n\n    &:hover {\n      background-color: rgba(84, 180, 92, 0.1);\n    }\n  }  \n`;\nexport const ScList = Styled.div`\n  .suggestion {\n    display: flex;\n    align-items: center;\n    position: relative;\n    cursor: default;\n\n    &-teamlist {\n      background-color: #2b3245;\n      border-radius: 0.25em;\n      z-index: 1;\n      width: auto;\n      position: absolute;\n      top: -1em;\n      right: -10em ;\n      max-height: 40em;\n      overflow-y: scroll;\n    }\n\n    &-info {\n      font-size: .875em;\n      color: white;\n      flex: 1 1 auto;\n      position: relative;\n      max-width: 13em;\n    }\n\n\n    &-email {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: #A9AACB;\n    }\n\n    &-teamitem {\n      background-color: #2b3245;\n      color: #abadb4;\n      padding: 0.5em 0.6875em;\n      text-align: left;\n      display: flex;\n      right: 0em;\n      width: 16em;\n      z-index: 1;\n      border-radius: 1em;\n    }\n\n    &-avatar {\n      flex: 0 0 32px;\n      height: 32px;\n      border: 2px solid #fff;\n      border-radius: 50%;\n      overflow: hidden;\n      font-size: .75em;\n      margin-right: 1em;\n\n      div {\n        height: 100%;\n        line-height: 32px;\n        color: #fff;\n        text-align: center;\n        font-weight: 500;\n        background-color: #b9bbd2;\n        background-repeat: no-repeat;\n        background-size: cover;\n        text-transform: uppercase;\n      }\n    }\n\n    &:after {\n    border: 0.3125em solid transparent;\n    border-bottom-color: #000;\n    bottom: 1em;\n    content: \" \";\n    left: -3em;\n    margin-left: -0.3125em;\n    position: absolute;\n  }\n`;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useState, useEffect } from 'react';\nimport styled from 'styled-components';\nimport { bool, func, number, shape, string } from 'prop-types';\nimport classNames from 'classnames';\nimport { EmailDropdown } from '@jotforminc/email-wizards';\nimport SingleEmailInput from '@jotforminc/single-email-input';\nimport { isEmail } from '@jotforminc/utils';\nimport { isEnterprise as isEnterpriseEnv } from '@jotforminc/enterprise-utils';\nimport { Button } from '@jotforminc/magnet';\nimport { t } from '@jotforminc/translation';\nimport { layer, reassignTask } from '../api';\nconst MAX_REASSIGN_LIMIT = 3;\nconst DropdownWrapper = styled.div`\n--wizard-body-padding: 0 42px;\n--wizard-label-color: #23283a;\n--wizard-item-margin: 21px 0 42px;\n--wizard-item-padding: 21px 0;\n\n--input-color: #23283a;\n--input-background-color: #fff;\n--input-option-background-color-hover: #f3f8fe;\n--input-option-background-color-selected: #e7f1ff;\n--input-option-background-color-bullet-hover: #cee2fd;\n--input-option-background-color-bullet-selected: #5e74e6;\n--input-border-color: #d8dae9;\n--input-border-hover-color: #b7bbd7;\n--input-border-focus-color: #5e74e6;\n--input-border-error-color: #fc8291;\n--input-placeholder-color: #8d8fa8;\n\ninput[type=\"search\"] {\n  margin: -1px 26px;\n  width: calc(100% - 52px);\n}\n\nul {\n  margin: 0 1.625rem;\n  max-height: 35vh;\n  overflow-y: auto;\n}\n`;\nconst WorkflowReassign = ({ taskID, onRenew, recordEvent, isHIPAA, fromError, isReassignDisabled, displayReassignCount, isReassignLimitReached, teamInfo })=>{\n    const [message, setMessage] = useState('');\n    const [assigneeEmail, setAssigneeEmail] = useState('');\n    const [error, setError] = useState(false);\n    const [isMessageVisible, setMessageVisibility] = useState(false);\n    const [loading, setLoading] = useState(false);\n    const [enterpriseUsers, setEnterpriseUsers] = useState([]);\n    const [enterpriseUserList, setEnterpriseUserList] = useState([]);\n    const isEnterprise = isEnterpriseEnv();\n    useEffect(()=>{\n        if (isEnterprise) {\n            layer.get('users?bypass=1').then((users)=>{\n                setEnterpriseUsers(users);\n                const userList = users.filter(({ email })=>email).map(({ email })=>({\n                        value: email,\n                        text: email\n                    }));\n                setEnterpriseUserList(userList);\n            });\n        }\n    }, []);\n    const handleEmailChange = ({ value = '' } = {})=>{\n        setAssigneeEmail(value.trim());\n    };\n    const handleEmailDropdownChange = ([{ value = '' } = {}])=>{\n        setAssigneeEmail(value.trim());\n    };\n    const handleMessageButtonClick = ()=>{\n        recordEvent('toggleReassignMessage', 'workflow');\n        setMessageVisibility(!isMessageVisible);\n        setMessage('');\n    };\n    const handleMessageChange = ({ target: { value } })=>{\n        setMessage(value);\n    };\n    const validateInput = ()=>{\n        if (assigneeEmail === '') {\n            setError('*Add an email address');\n            return false;\n        }\n        const isValidEmail = isEmail(assigneeEmail);\n        if (!isValidEmail) {\n            setError('*Invalid email address');\n            return false;\n        }\n        const regex = /\\+/;\n        if (regex.test(assigneeEmail)) {\n            setError(\"*You can't use + on emails\");\n            return false;\n        }\n        setError('');\n        return true;\n    };\n    const onReassignClick = async ()=>{\n        if (!validateInput()) return;\n        const action = fromError ? 'WF-Error-Reassigned' : 'WF-ParticipantReassigned';\n        recordEvent(action, 'workflow');\n        setLoading(true);\n        try {\n            const result = await reassignTask(taskID, teamInfo, {\n                message,\n                assigneeEmail\n            });\n            if (result) onRenew();\n            if (!result) setError('something went wrong');\n            setLoading(false);\n        } catch (e) {\n            setError('something went wrong');\n            setLoading(false);\n        }\n    };\n    const randomId = `assignee_${Math.random().toString(36).substring(2)}`;\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"span\", {\n                children: \"You can reassign this task to another approver by entering an email address below.\"\n            }),\n            /*#__PURE__*/ _jsxs(\"span\", {\n                children: [\n                    \"You can reassign the same task only three times.\",\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: classNames('wmApproval-reassign-count', {\n                            isReassignLimitReached\n                        }),\n                        children: ` Assigned ${displayReassignCount} of ${MAX_REASSIGN_LIMIT} times.`\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"wmApproval-task\",\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: classNames('wmApproval-task-comment-textarea-wrapper', {\n                            isReassignDisabled,\n                            hasError: error\n                        }),\n                        children: [\n                            isEnterprise && isHIPAA ? /*#__PURE__*/ _jsx(DropdownWrapper, {\n                                children: /*#__PURE__*/ _jsx(EmailDropdown, {\n                                    value: [\n                                        {\n                                            value: assigneeEmail\n                                        }\n                                    ],\n                                    options: enterpriseUserList,\n                                    onChange: handleEmailDropdownChange,\n                                    filterable: true,\n                                    textInputPlaceholder: \"Search...\"\n                                })\n                            }) : /*#__PURE__*/ _jsx(SingleEmailInput, {\n                                className: \"wmApproval-task-comment isSingleEmailInput\",\n                                style: {\n                                    background: '#FFFFFF',\n                                    border: '1px solid #D8DAE9',\n                                    borderRadius: 4,\n                                    padding: 10,\n                                    fontSize: 14,\n                                    lineHeight: '18px',\n                                    color: '#8D8FA8'\n                                },\n                                placeholder: \"example@example.com\",\n                                value: assigneeEmail,\n                                onChange: handleEmailChange,\n                                questions: [],\n                                userList: enterpriseUsers,\n                                inputProps: {\n                                    id: randomId,\n                                    className: 'section-ln-content-input',\n                                    placeholder: 'example@example.com'\n                                },\n                                suggestionProps: {\n                                    preventClickDefault: true\n                                },\n                                popoverProps: {\n                                    usePortal: false\n                                }\n                            }),\n                            error ? /*#__PURE__*/ _jsx(\"div\", {\n                                style: {\n                                    color: '#F43B57',\n                                    fontSize: '14px',\n                                    marginBottom: '4px',\n                                    marginTop: '6px'\n                                },\n                                children: error\n                            }) : null,\n                            isMessageVisible ? /*#__PURE__*/ _jsx(\"textarea\", {\n                                className: \"wmApproval-task-comment\",\n                                value: message,\n                                placeholder: \"Write your message here.\",\n                                onChange: handleMessageChange,\n                                style: {\n                                    background: '#FFFFFF',\n                                    border: '1px solid #D8DAE9',\n                                    borderRadius: 4,\n                                    padding: 10,\n                                    marginTop: 10,\n                                    fontSize: 14,\n                                    lineHeight: '18px',\n                                    minHeight: 100,\n                                    resize: 'vertical',\n                                    color: '#8D8FA8'\n                                }\n                            }) : null,\n                            /*#__PURE__*/ _jsx(\"button\", {\n                                className: \"addMessage\",\n                                type: \"button\",\n                                onClick: handleMessageButtonClick,\n                                style: {\n                                    color: '#5E74E6',\n                                    backgroundColor: 'transparent',\n                                    border: 'none',\n                                    marginTop: 4,\n                                    alignSelf: 'flex-start',\n                                    cursor: 'pointer',\n                                    padding: 0\n                                },\n                                children: `${!isMessageVisible ? 'Add' : 'Discard'} Message`\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"wmApproval-task-outcome\",\n                        children: /*#__PURE__*/ _jsx(Button, {\n                            colorStyle: \"forms\",\n                            loader: loading,\n                            disabled: isReassignDisabled,\n                            onClick: onReassignClick,\n                            children: t('Reassign')\n                        })\n                    })\n                ]\n            })\n        ]\n    });\n};\nWorkflowReassign.propTypes = {\n    onRenew: func.isRequired,\n    taskID: string.isRequired,\n    recordEvent: func,\n    isHIPAA: bool,\n    fromError: bool,\n    isReassignDisabled: bool,\n    displayReassignCount: number,\n    isReassignLimitReached: bool,\n    teamInfo: shape({\n        disableTeamPrefix: bool,\n        teamID: string\n    })\n};\nWorkflowReassign.defaultProps = {\n    recordEvent: (f)=>f,\n    isHIPAA: false,\n    fromError: false,\n    isReassignDisabled: false,\n    displayReassignCount: 0,\n    isReassignLimitReached: false,\n    teamInfo: {}\n};\nexport default WorkflowReassign;\n","/* eslint-disable max-len */ import styled from 'styled-components';\nexport const CustomizationWrapper = styled.div`\n  background: #FFFFFF;\n  max-width: 350px;\n  width: 100%;\n  border-radius: 4px;\n  background: #FFFFFF;\n  border: 1px solid #B2B4CC;\n  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\n\n  &.cover {\n    max-width: 485px;\n    width: 100%;\n\n    // FIXME: This is a hack to fix the width of the cover\n    .content-fileupload .imageUpload .tabContent .galleryWrapper > div .prevUploads-list .prevUploads-listItem {\n      width: 100%;\n      height: auto;\n      border-radius: 4px;\n      aspect-ratio: 16 / 9;\n\n      img {\n        height: 100% !important;\n      }\n    }\n  }\n\n  .heading {\n    height: 40px;\n    font-size: 14px;\n    line-height: 18px;\n    font-weight: 600;\n    color: #2E3345;\n    padding: 12px 16px;\n  }\n\n  .content-heading {\n    align-self: flex-start;\n    color: #141E46;\n    font-weight: 500;\n    margin-bottom: 8px;\n    position: relative;\n\n    &.centering {\n      align-self: center;\n      margin: 0;\n    }\n  }\n\n  .content-option-colorpicker {\n    position: relative;\n\n    input {\n      background: #FFFFFF;\n      border: 1px solid #B2B4CC;\n      border-radius: 4px;\n      color: #333A71;\n      font-size: 14px;\n      line-height: 18px;\n      padding: 8px 32px 8px 8px;\n\n      html[dir=\"rtl\"] & {\n        padding: 8px 43px 8px 8px;\n      }\n    }\n    .jfColors-picker {\n      position: absolute;\n      top: 6px;\n      right: 6px;\n      width: 24px;\n      height: 24px;\n      border-radius: 2px;\n\n      &:before {\n        content: '';\n        width: 1px;\n        height: 34px;\n        background-color: #B2B4CC;\n        display: block;\n        position: absolute;\n        right: 30px;\n        top: -5px;\n      }\n    }\n  }\n\n  .content {\n    .content-wrapper {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      width: 100%;\n\n      &.col {\n        flex-direction: column;\n\n        input {width: 100%}\n      }\n    }\n\n    .double-wrapper {\n      display: flex;\n      justify-content: space-between;\n      align-items: center; \n      flex: 1 0 auto;\n      flex-wrap: wrap;\n      z-index: 5;\n      position: relative;\n\n      &.midSize {\n        max-width: 70%;\n\n        @media (max-width: 768px) {\n          max-width: 100%;\n        }\n      }\n\n      .col {\n        width: 50%;\n      }\n    }\n\n    .forBody {\n      @media screen and (max-width: 600px) {\n        max-height: 35vh;\n      }\n\n      @media screen and (max-height: 568px) {\n        max-height: 20vh;\n      }\n    }\n  }\n\n  .content-fileupload {\n    width: 100%;\n    border: 1px solid #B2B4CC;\n    border-radius: 4px;\n\n    div[data-tabid=\"unsplash\"] {\n      .prevUploads-listItem {\n        height: auto;\n        cursor: pointer;\n\n        img {\n          width: 100%;\n          max-height: 100% !important;\n          aspect-ratio: 16 / 9;\n          object-fit: cover;\n        }\n\n        p {\n          margin: 0;\n          padding: 0;\n          width: 100%;\n          font-size: 10px;\n          color: #999;\n          overflow: hidden;\n          height: 12px;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          a {\n            color: inherit;\n            margin-left: 2px;\n          }\n        }\n      }\n    }\n\n    .imageUpload {\n      .tabMenu {\n        border-bottom: 1px solid #B2B4CC\n      }\n      \n      .tabMenu-inner-link {\n        padding: 6px 0;\n        font-size: 12px;\n        color: #333A71;\n        border-bottom-width: 2px;\n        border-right: 1px solid #B2B4CC;\n        display: grid;\n        place-items: center;\n        line-height: 1;\n\n        &:last-of-type {\n          border-right: none;\n        }\n\n        &.is-active {\n          border-bottom-color: #18235C;\n          border-bottom-width: 2px;\n        }\n      }\n\n      .tabUnsplash {\n        width: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        svg {\n          margin-right: 4px;\n        }\n      }\n\n      .tabContent {\n        padding: 12px 8px;\n        max-height: 300px;\n        overflow: auto;\n        min-width: 314px;\n\n        .galleryWrapper {\n          > div {\n            color: #9FA0B9;\n            font-size: 12px;\n            line-height: 16px;\n            font-weight: 600;\n            text-align: left;\n            margin-bottom: 16px;\n\n            .prevUploads-list {\n              border: none;\n              padding: 0;\n              margin: 6px auto 24px;\n              min-height: auto;\n              max-height: auto;\n              display: flex;\n              flex-wrap: wrap;\n              gap: 8px;\n              padding: 4px;\n\n              @media (max-width: 768px) {\n                gap: 1vw;\n              }\n\n              .prevUploads-listItem {\n                width: 48px;\n                height: 48px;\n                border-radius: 50%;\n                overflow: hidden;\n                display: flex;\n                margin: 5px;\n                cursor: pointer;\n                margin: 0;\n\n                img {\n                  width: 100%;\n                  height: 100% !important;\n                  object-fit: cover;\n                }\n              }\n            }\n          }\n        }\n\n        div[data-tabid=\"upload\"] {\n          label.fileUploadLabel {\n            background-color: #0099FF;\n          }\n          .fileUpload {\n            min-height: 135px;\n\n            &-verticalAlign-text {\n              color: #9FA0B9;\n              font-size: 12px;\n              line-height: 16px;\n              margin-top: 8px;\n            }\n          }\n        }\n\n        div[data-tabid=\"unsplash\"] {\n          .prevUploads-list {\n            border: none;\n            overflow: auto;\n            margin: 0;\n            padding: 0;\n\n            display: grid;\n            grid-gap: 8px;\n            grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));\n            margin-top: 12px;\n\n            .prevUploads-listItem {\n              width: 100%;\n              max-width: 100%;\n              float: initial;\n              overflow: initial;\n              margin: initial;\n            }\n          }\n\n          .searchBox {\n            background-color: #F5F6FE;\n            border: 1px solid #C8CEED;\n            border-radius: 4px;\n            font-size: 14px;\n            line-height: 18px;\n          }\n        }\n\n        div[data-tabid=\"link\"] {\n          label {\n            display: flex;\n\n            input {\n              background: #F5F6FE;\n              border: 1px solid #C8CEED;\n              border-radius: 4px;\n              color: #797EA8;\n            }\n          }\n\n          .line {\n            margin-top: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n\n            a.btn {\n              background-color: #0099FF;\n              border-radius: 4px;\n              line-height: 1.5;\n\n              display: flex;\n              align-items: center;\n              justify-content: center;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .withBorder {\n    border-bottom: 1px solid rgba(225, 226, 236, 0.7);\n  }\n\n  .jfTabs-body {\n    padding: 0;\n  }\n\n  .icon-selector-wizard {\n    padding: 0;\n\n    svg {\n      fill: #18235C;\n    }\n  }\n\n  .icon-tab-wrapper {\n    width: 100%;\n\n    .jfTabs {\n      border: 1px solid #B2B4CC;\n      border-radius: 4px;\n    }\n\n    .forTabs {      \n      z-index: 4;\n\n      .jfTabs-tabs {\n        min-height: 32px;\n        height: 32px;\n        border-bottom: 1px solid #B2B4CC;\n\n        &-button {\n          color: #333A71;\n          font-size: 12px;\n          line-height: 16px;\n          border-right: 1px solid #B2B4CC;\n\n          &:last-of-type {\n            border-right: none;\n          }\n        }\n      }\n    }\n\n    .forBody {\n      .iconSelectorPanel {\n        .tabMenu {\n          background-color: #F3F3FE;\n          display: flex;\n          justify-content: space-around;\n          align-items: center;\n          padding: 8px;\n\n          .tabMenu-link.is-active {\n            position: relative;\n\n            &:after {\n              content: \"\";\n              position: absolute;\n              width: 100%;\n              height: 2px;\n              background-color: #0061FF;\n              bottom: -7px;\n              left: 0;\n            }\n          }\n\n          input {\n            margin: 0;\n            background-color: #FFF !important;\n            color: #797EA8;\n            background-position: 5%;\n            padding: .625em .625em .625em 40px;\n          }\n\n          a {\n            cursor: pointer;\n\n            svg {\n              fill: #797EA8;\n            }\n          }\n        }\n\n        .tabContent {\n          .SeachIconWrapper {\n            input {\n              margin: 0;\n              padding: 8px 0 8px 36px;\n              background-color: transparent !important;\n              color: #797EA8;\n              background-position: 12px center;\n              border-bottom: 1px solid #E1E2EC;\n              border-radius: 0 !important;\n            }\n          }\n          .LogoIconsWrapper {\n            .content-item-wrapper {\n              border-radius: 50%;\n            }\n            .content-item-label {\n              border-radius: 50%;\n\n              &:hover {\n                background-color: #7698EF;\n\n                svg {\n                  fill: #B4C8FC;\n                }\n              }\n            }\n          }\n        }\n      }\n      .emoji-mart {\n        button:not(.emoji-mart-search-icon) {\n          border: none;\n          padding: 8px;\n        }\n\n        &-search-icon {\n          padding: 0 4px 0 0;\n          border: none;\n          min-height: auto;\n        }\n\n        &-category-label {\n          color: #9FA0B9;\n          font-size: 12px;\n          line-height: 16px;\n          font-weight: 600;\n          text-align: left;\n        }\n      }\n    }\n  }\n`;\nexport const CoverWrapper = styled.div`\n  display: flex;\n  height: 100%;\n  width: 100%;\n\n  .teamCardWrapper &:hover {\n    .teamcover .teamcover-container {\n      transform: translateY(-100px);\n    }\n\n    .teamcover-bg::before {\n      background: initial;\n    }\n\n    .teamcover-container {\n      bottom: 8px;\n    }\n    .teamName {\n      margin-top: 8px;\n    }\n    \n    .teamMembers-count-normal {\n      display: none\n    }\n    .teamMembers-count-hover {\n      display: block;\n    }\n  }\n\n  @media screen and (max-width: 768px) {\n    position: relative;\n    z-index: 0;\n\n    .isMyaccount & {\n      position: relative;\n      z-index: 20;\n    }\n  }\n\n  body.jfWizard--isVisible:not(.jfWizard--isModalView) & {\n    display: none;\n  }\n\n  .teamcover {\n    width: 100%;\n    min-height: 200px;\n    text-align: center;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    position: relative;\n    // overflow: hidden;\n    transition: all .2s;\n\n    &-container {\n      position: relative;\n      z-index: 10;\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    &-imageCropper {\n      position: relative;\n\n      .wrapper {\n        height: 200px;\n        position: relative;\n      }\n    \n      .wrapperButtons {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        height: 51px;\n\n        position: absolute;\n        right: 0;\n        bottom: 4px;\n        background: #FFFFFF61;\n        padding: 8px;\n        border-radius: 4px;\n    \n        button {\n          cursor: pointer;\n          transition: .2s all ease;\n          margin: 0;\n          padding: 0;\n          border: none;\n          outline: none;\n          font-family: inherit;\n          border-radius: 4px;\n          width: 72px;\n          height: 28px;\n          font-size: 12px;\n        }\n        .wrapperCancel {\n          background-color: #dddfe9;\n          color: #23283a;\n          margin-right: 12px;\n        }\n        .wrapperSave {\n          background-color: #4573e3;\n          color: #fff;\n          margin-right: 15px;\n        }\n      }\n\n      &-info {\n        position: absolute;\n        z-index: 10;\n        color: #141E46;\n        top: 50%;\n        background: rgba(255, 255, 255, 0.8);\n        padding: 8px;\n        border-radius: 4px;\n        left: 50%;\n        margin: -16px 0 0 -96px;\n        pointer-events: none;\n      }\n    }\n\n    &-avatar {\n      position: relative;\n      background-color: transparent;\n      border: none;\n      width: 64px;\n      margin: 0 auto;\n\n      &-wrapper {\n        width: 64px;\n        height: 64px;\n        border: 2px solid #fff;\n        border-radius: 50%;\n        overflow: hidden;\n        margin: 0 auto;\n        padding: 0;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    \n        img {\n          object-fit: cover;\n          height: 100%;\n          width: 100%;\n        }\n    \n        &.hasBgColor {\n          // padding: 12px;\n        }\n    \n        .jfIconSVG-wrapper {\n          width: 100%;\n          height: 100%;\n          padding: 12px;\n        }\n    \n        .emoji-mart-emoji {\n          // transform: scale(.7);\n          width: 100%;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          \n          span {\n            font-size: 40px;\n            align-self: center;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            //margin: 2px 0 0 0;\n          } \n    \n          .emoji-mart-search {\n            .emoji-mart-search-icon {\n              //padding: 0 4px 0 0 !important; // FIXME\n            }\n          }\n        }\n      } \n      \n      img {\n        width: 100%;\n        background-size: cover;\n        height: 100%;\n      }\n    \n      &-edit {\n        position: absolute;\n        width: 24px;\n        height: 24px;\n        background-color: #D3DCEF;\n        border-radius: 50%;\n        padding: 4px;\n        right: -2px;\n        bottom: -2px;\n        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));        \n      }\n    \n      .hoverSettingButton {\n        opacity: 1;\n        transition: all .1s ease;\n      }\n      \n      &:hover {\n        .hoverSettingButton {\n          opacity: 1;\n        }\n      }\n    }\n\n    &-name {\n      color: #fff;\n      font-weight: 600;\n      font-size: 24px;\n      line-height: 30px;\n      margin: 8px 0 0 0;\n      word-break: break-all;\n    }\n\n    &-members {\n      position: absolute;\n      top: 0;\n      right: 12px;\n      z-index: 15;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      html[dir=\"rtl\"] & {\n        right: initial;\n        left: 12px;\n      }\n    }\n\n    &-btnset {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end;\n      padding: 12px;\n\n      & > * {\n        margin-left: 4px;\n      }\n\n      .teamSettingsButton {\n        padding: 4px;\n        border-radius: 4px;\n        background: rgba(255, 255, 255, 0.8);\n        width: 24px;\n        height: 24px;\n        cursor: pointer;\n        transition: background .2s ease;\n        z-index: 2;\n        order: 2;\n      \n        &:hover + .teamcover-btnset-customization {\n          opacity: 1;\n          visibility: visible;\n          transform: translate(0, 0);\n        }\n      }\n\n      &-customization {\n        display: flex;\n        background-color: rgba(255, 255, 255, 0.8);\n        border-radius: 4px;\n        border: none;\n        transition: background-color .2s ease;\n\n        order: 1;\n\n        button {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n\n          border: none;\n          background-color: transparent;\n          padding: 4px 8px;\n          color: #141E46;\n          font-weight: 500;\n          font-size: 12px;\n          line-height: 16px;\n          border-right: 1px solid #141E46;\n\n          &:last-of-type {\n            border-right: none;\n          }\n\n          svg {\n            width: 12px;\n            margin-right: 4px;\n\n            html[dir=\"rtl\"] & {\n              margin-right: 0px;\n              margin-left: 4px;\n            }\n          }\n        }\n      }\n    }\n\n    &-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n      z-index: 0;\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: hidden;\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(180deg, rgba(159, 160, 185, 0.6) 0%, rgba(159, 160, 185, 0) 123.33%);\n        mix-blend-mode: multiply;\n      }\n\n      &-wrapper {\n        position: relative;\n        top: 0;\n        left: 0;\n        transition: background .3s ease;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        overflow: hidden;\n      }\n\n      &-img {\n        max-width: 100%;\n        max-height: 100%;\n        margin: auto;\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n        will-change: transform;    \n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    }\n\n    &-invite {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      margin: 12px 0 12px auto;\n\n      ul {\n        display: flex;\n\n        li {\n          position: relative;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          margin-left: -6px;\n          \n          img {\n            width: 100%;\n            object-fit: cover;\n            height: 100%;\n          }\n\n          button {\n            border: none;\n            width: 100%;\n            height: 100%;\n            color: #6F76A7;\n            background-color: #E2E6F9;\n            display: flex;\n            margin: 0;\n            padding: 0;\n            justify-content: center;\n            align-items: center;\n\n            width: 32px;\n            height: 32px;\n            overflow: hidden;\n            border-radius: 50%;\n            border: 1px solid rgb(200, 206, 237);\n          }\n\n          .jfTooltipNew-body {\n            span {\n              display: block;\n              margin-bottom: 8px;\n              text-align: left;\n\n              &:nth-child(1) {\n                color: #fff;\n                font-size: 15px;\n                font-weight: 500;\n              }\n              &:nth-child(2) {\n                color: #a9aacb;\n              }\n              &:nth-child(3) {\n                background-color: #404b6b;\n                border-radius: 30px;\n                color: #f3f7ff;\n                font-size: 12px;\n                padding: 8px 16px;\n                align-self: flex-start;\n                margin-bottom: 0;\n                white-space: nowrap;\n              }\n            }\n          }\n        }\n      }\n\n      > button {\n        background: rgba(255, 255, 255, 0.8);\n        padding: 4px 12px;\n        border-radius: 4px;\n        border: none;\n        color: #141E46;\n        font-weight: 500;\n        line-height: 24px;\n        font-size: 12px;\n        transition: background .2s ease;\n        margin-left: 8px;\n\n        html[dir=\"rtl\"] & {\n          margin-left: 0;\n          margin-right: 8px;\n        }\n\n        &:hover {\n          background: rgba(255, 255, 255, 1);\n        } \n      }\n    }\n\n    &-cta {\n      background: #0A1551;\n      border-radius: 4px;\n      border: none;\n      color: #FFF;\n      padding: 6px;\n      line-height: 22px;\n    }\n\n    &-select {\n      display: flex;\n      justify-content: center;\n      align-items: flex-start;\n\n      label {\n        color: #141E46;\n        font-size: 16px;\n        line-height: 21px;\n        margin-right: 12px;\n      }\n\n      select {\n        background: #E3E5F5;\n        border-radius: 4px;\n      }\n    }\n\n    &-wrapper {\n      z-index: 7;\n      width: 100%;\n\n      [data-popper-placement] {\n        z-index: 7;\n      }\n\n      &.isEditable {\n        z-index: 8;\n        .teamcover-bg {\n          border-top-left-radius: 8px;\n          border-top-right-radius: 8px;\n        }\n      }\n    }\n  }\n`;\n","/* eslint-disable max-len */ import styled from 'styled-components';\nexport const centerer = `\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\nexport const AvatarWrapper = styled.div`\n  .jfIconSVG-wrapper {\n    ${centerer}\n    padding: 8px;\n\n    > div {\n      ${centerer}\n    }\n  }\n`;\n","/* eslint-disable max-lines */ /* eslint-disable camelcase */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nvar _window;\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useState, useEffect, useRef } from 'react';\nimport { array, shape, string } from 'prop-types';\nimport DOMPurify from 'dompurify';\nimport { rgba } from 'polished';\nimport classNames from 'classnames';\nimport { Portal } from '@jotforminc/uikit';\nimport Tracking from '@jotforminc/tracking';\nimport { IconPencilToSquare, IconFormCheckFilled, IconEnvelopeClosedFilled } from '@jotforminc/svg-icons';\nimport { Unsupported, Preview } from '@jotforminc/preview';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { handleCustomNavigation, safeJSONParse, escapeHTML } from '@jotforminc/utils';\nimport { WorkflowStatus } from '@jotforminc/placeholder';\nimport { SingleSubmissionViewWithButton, fetchQuestions, fetchSubmission, SingleSubmissionButtonContext } from '@jotforminc/single-submission-buttons';\nimport { getAllIntegrationsDetails } from '@jotforminc/integration-constants';\nimport IconAssignFormWF from '../assets/iconAssignFormFlow.svg';\nimport { decodeHTML, stripHTML } from '../utils';\nimport ApprovalOptions from '../components/ApprovalOptions';\nimport AvatarGroupWithPanel from '../components/AvatarGroupWithPanel';\nimport { isTeamApproval } from '../utils/helper';\nexport const INTEGRATION_DETAILS = getAllIntegrationsDetails();\nconst isWorkflowReleased = (_window = window) === null || _window === void 0 ? void 0 : _window.isWorkflowReleased;\nconst getElementName = (type, subType)=>{\n    // eslint-disable-next-line default-case\n    switch(true){\n        case type === 'workflow_assign_form':\n            return 'Form';\n        case type === 'workflow_approval' && subType && subType === 'workflow_approval_with_sign':\n            return 'Approve & Sign';\n        case type === 'workflow_approval':\n            return 'Approval';\n    }\n};\nconst getUsers = (actionDetails)=>{\n    const { newAssigneeEmail, newAssigneeUser } = actionDetails;\n    const { previousAssigneeEmail, previousAssigneeUser } = actionDetails;\n    return {\n        next: _object_spread_props(_object_spread({}, newAssigneeUser), {\n            name: (newAssigneeUser === null || newAssigneeUser === void 0 ? void 0 : newAssigneeUser.name) || newAssigneeEmail\n        }),\n        prev: _object_spread_props(_object_spread({}, previousAssigneeUser), {\n            name: (previousAssigneeUser === null || previousAssigneeUser === void 0 ? void 0 : previousAssigneeUser.name) || previousAssigneeEmail\n        })\n    };\n};\nconst getAssignee = (actionDetails)=>{\n    const { assigneeUser } = actionDetails;\n    return assigneeUser;\n};\nconst getSystemUser = ()=>{\n    return {\n        name: 'Notification',\n        avatarUrl: \"data:image/svg+xml,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M15.5 13h9v4h-9z'/%3E%3Cpath d='M12.5 24v-5h15v5' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath stroke='%23fff' stroke-width='1.7' d='M19.9 24v-5'/%3E%3Ccircle cx='12.5' cy='24.5' r='2.5' fill='%23fff'/%3E%3Ccircle cx='27.5' cy='24.5' r='2.5' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M17.5 22h5v5h-5z'/%3E%3C/svg%3E\",\n        isSystem: true\n    };\n};\nconst getGroupApproverUser = ()=>{\n    return {\n        name: 'Group Approval',\n        avatarUrl: \"data:image/svg+xml,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M15.5 13h9v4h-9z'/%3E%3Cpath d='M12.5 24v-5h15v5' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath stroke='%23fff' stroke-width='1.7' d='M19.9 24v-5'/%3E%3Ccircle cx='12.5' cy='24.5' r='2.5' fill='%23fff'/%3E%3Ccircle cx='27.5' cy='24.5' r='2.5' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M17.5 22h5v5h-5z'/%3E%3C/svg%3E\",\n        isSystem: true\n    };\n};\nconst getTerminate = ()=>{\n    return {\n        name: 'Terminate',\n        avatarUrl: \"data:image/svg+xml,%3Csvg width='44' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='22' cy='22' r='22' fill='%23C90909'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 13.667A3.333 3.333 0 0 0 13.667 17v10A3.333 3.333 0 0 0 17 30.333h10A3.333 3.333 0 0 0 30.333 27V17A3.333 3.333 0 0 0 27 13.667H17Z' fill='%23fff'/%3E%3C/svg%3E\" // eslint-disable-line\n    };\n};\nconst getGroupTeamApproverUser = (team)=>{\n    return {\n        name: team === null || team === void 0 ? void 0 : team.teamName,\n        isSystem: true,\n        team\n    };\n};\nconst entryPropTypes = {\n    actionDetails: shape({}),\n    user: shape({})\n};\nexport const statusTexts = {\n    APPROVE: 'Approved',\n    DENY: 'Denied',\n    EXPIRE: 'Expired',\n    AUTO: 'Automatically Finished',\n    ESCALATE: 'Escalated',\n    REASSIGN: 'Reassigned',\n    CANCEL: 'Canceled',\n    CUSTOM_EMAIL: 'Email Sent',\n    REPLY: 'Replied',\n    RESTART: 'Restarted',\n    TASK: 'Waiting',\n    REQUEST_MORE_INFO: 'Requested more info',\n    EDIT_SUBMISSION: 'Edit submission',\n    ASSIGN_FORM_SUBMISSION: 'Form Submitted',\n    ASSIGN_FORM_NOTIFICATION_MAIL: 'Form Assigned',\n    MULTIPLE_APPROVAL_MAIL: 'Group Approval',\n    REMINDER: 'Reminder'\n};\nconst WFCategoryName = ({ actionDetails: { type } })=>/*#__PURE__*/ _jsxs(\"span\", {\n        className: classNames('category', 'workflow', type === null || type === void 0 ? void 0 : type.toLowerCase()),\n        children: [\n            /*#__PURE__*/ _jsx(IconFormCheckFilled, {\n                className: \"iconCategoryWF w-4 h-4\"\n            }),\n            isWorkflowReleased ? t('Workflow') : t('Approval Flow')\n        ]\n    });\nWFCategoryName.propTypes = {\n    actionDetails: shape({}).isRequired\n};\nconst WFNewSubmissionCategoryName = ({ actionDetails: { type } })=>/*#__PURE__*/ _jsxs(\"span\", {\n        className: classNames('category', 'workflow', type === null || type === void 0 ? void 0 : type.toLowerCase()),\n        children: [\n            /*#__PURE__*/ _jsx(IconAssignFormWF, {\n                width: \"15\",\n                height: \"20\",\n                className: \"iconCategoryWF\",\n                style: {\n                    marginTop: '-3px'\n                }\n            }),\n            t('New Submission')\n        ]\n    });\nWFNewSubmissionCategoryName.propTypes = {\n    actionDetails: shape({}).isRequired\n};\nconst WFCategoryLoadingName = ()=>/*#__PURE__*/ _jsx(\"span\", {\n        className: classNames('category', 'workflow', ''),\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            style: {\n                maxWidth: '275px'\n            },\n            children: /*#__PURE__*/ _jsx(WorkflowStatus, {})\n        })\n    });\nWFCategoryLoadingName.propTypes = {};\nconst EditSubmisisonCategoryName = ({ actionDetails: { type } })=>/*#__PURE__*/ _jsxs(\"span\", {\n        className: classNames('category', 'workflow', type === null || type === void 0 ? void 0 : type.toLowerCase()),\n        children: [\n            /*#__PURE__*/ _jsx(IconPencilToSquare, {\n                className: \"iconCategoryWF w-4 h-4\"\n            }),\n            t('Edit Submission')\n        ]\n    });\nEditSubmisisonCategoryName.propTypes = {\n    actionDetails: shape({}).isRequired\n};\nconst EmailCategoryName = ({ actionType, actionDetails: { type } })=>/*#__PURE__*/ _jsxs(\"span\", {\n        className: classNames('category', 'email', type === null || type === void 0 ? void 0 : type.toLowerCase()),\n        children: [\n            /*#__PURE__*/ _jsx(IconEnvelopeClosedFilled, {\n                className: \"iconCategoryEmail\"\n            }),\n            t(actionType.toLowerCase())\n        ]\n    });\nEmailCategoryName.propTypes = {\n    actionType: string.isRequired,\n    actionDetails: shape({}).isRequired\n};\nconst ReplyEntry = ({ actionDetails })=>{\n    var _ref_current;\n    const { body } = actionDetails;\n    const ref = useRef();\n    const sanitizedBody = DOMPurify.sanitize(body);\n    const [quotationCollapsed, setQuotationCollapsed] = useState(true);\n    const [showButton, setShowButton] = useState(ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.querySelector('.quotationWrapper'));\n    const handleExpand = ()=>setQuotationCollapsed(!quotationCollapsed);\n    useEffect(()=>{\n        var _ref_current;\n        setShowButton(ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.querySelector('.quotationWrapper'));\n    }, [\n        body\n    ]);\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                ref: ref,\n                className: classNames('mail-wrapper', {\n                    quotationCollapsed\n                }),\n                dangerouslySetInnerHTML: {\n                    __html: sanitizedBody\n                }\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: classNames('quotationButtons', 'noText'),\n                children: showButton ? /*#__PURE__*/ _jsx(\"button\", {\n                    className: \"showSubmission\",\n                    type: \"button\",\n                    onClick: handleExpand,\n                    children: `Show ${quotationCollapsed ? 'more' : 'less'} `\n                }) : null\n            })\n        ]\n    });\n};\nReplyEntry.Name = EmailCategoryName;\nReplyEntry.propTypes = _object_spread({}, entryPropTypes);\nReplyEntry.Status = ({ actionDetails: { subject, to } })=>{\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: classNames('description'),\n                dangerouslySetInnerHTML: {\n                    __html: t(`\n            <span class=\"text username\">{subject}</span>\n            `).replace(/{subject}/g, escapeHTML(subject))\n                }\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: classNames('extra'),\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    children: t('to: {to}').replace(/{to}/g, to)\n                })\n            })\n        ]\n    });\n};\nReplyEntry.Status.propTypes = {\n    actionDetails: shape({}).isRequired\n};\nReplyEntry.Attachment = ({ actionDetails: { attachments } })=>{\n    const [fileIndex, setFileIndex] = useState(0);\n    const [previewVisibility, setPreviewVisibility] = useState(false);\n    let uploadUrls = attachments && JSON.parse(attachments);\n    if (Array.isArray(uploadUrls)) {\n        uploadUrls = uploadUrls.map((uploadUrl)=>{\n            var _fullName_split_pop, _fullName_split;\n            const hiddenExtensions = [\n                'JPEG',\n                'PNG',\n                'GIF',\n                'JPG',\n                'DOCX'\n            ];\n            const fullName = /[^/]*$/.exec(uploadUrl)[0];\n            const extension = fullName === null || fullName === void 0 ? void 0 : (_fullName_split = fullName.split('.')) === null || _fullName_split === void 0 ? void 0 : (_fullName_split_pop = _fullName_split.pop()) === null || _fullName_split_pop === void 0 ? void 0 : _fullName_split_pop.toUpperCase();\n            return {\n                description: '',\n                fileName: fullName,\n                fileThumbnailUrl: uploadUrl,\n                fileUrl: uploadUrl,\n                previewUrl: uploadUrl,\n                size: '',\n                extension,\n                isHidden: hiddenExtensions.indexOf(extension) > -1\n            };\n        });\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"entry-attachment-container\",\n            children: [\n                uploadUrls.map(({ fileName, extension, isHidden }, i)=>{\n                    return /*#__PURE__*/ _jsxs(\"button\", {\n                        className: \"entry-attachment-item\",\n                        type: \"button\",\n                        onClick: ()=>{\n                            setFileIndex(i);\n                            setPreviewVisibility(true);\n                        },\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extension-icon\",\n                                children: /*#__PURE__*/ _jsx(Unsupported, {\n                                    isHidden: isHidden,\n                                    extension: extension\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"fileName\",\n                                children: fileName\n                            })\n                        ]\n                    });\n                }),\n                previewVisibility && /*#__PURE__*/ _jsx(Preview, {\n                    files: uploadUrls,\n                    fixDomainURL: false,\n                    initialFileIndex: fileIndex,\n                    onClose: ()=>setPreviewVisibility(false)\n                })\n            ]\n        });\n    }\n    return null;\n};\nReplyEntry.Attachment.propTypes = ReplyEntry.Status.propTypes;\nconst ForwardEntry = (props)=>/*#__PURE__*/ _jsx(ReplyEntry, _object_spread({}, props));\nForwardEntry.Name = EmailCategoryName;\nForwardEntry.Status = ReplyEntry.Status;\nForwardEntry.Attachment = ReplyEntry.Attachment;\nForwardEntry.propTypes = _object_spread({}, entryPropTypes);\nconst AssignEntry = ({ user, actionDetails })=>{\n    const { name, email } = user;\n    const assignerID = name || email;\n    const { assigneeName, assigneeEmail } = actionDetails;\n    const assigneeID = email === assigneeEmail ? assignerID : assigneeName || assigneeEmail;\n    return /*#__PURE__*/ _jsx(\"div\", {\n        children: translationRenderer('[1[{assignerID}]] [2[assigned]] this submission to [3[{assigneeID}]]')({\n            renderer1: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                    children: assignerID\n                }),\n            renderer2: (text)=>/*#__PURE__*/ _jsx(\"strong\", {\n                    children: text\n                }),\n            renderer3: ()=>/*#__PURE__*/ _jsx(\"strong\", {\n                    children: assigneeID\n                })\n        })\n    });\n};\nAssignEntry.propTypes = _object_spread({}, entryPropTypes);\nconst ReAssignEntry = ({ actionDetails })=>{\n    const { comment } = actionDetails;\n    return comment ? /*#__PURE__*/ _jsx(\"div\", {\n        className: \"comment\",\n        children: comment\n    }) : null;\n};\nReAssignEntry.propTypes = _object_spread({}, entryPropTypes);\nReAssignEntry.Name = WFCategoryName;\nReAssignEntry.Status = ({ actionDetails })=>{\n    // const { name, email } = user;\n    // const assignerID = name || email;\n    const { // newAssigneeName,\n    newAssigneeEmail, newAssigneeUser: { name: assigneeName } } = actionDetails;\n    // const assigneeID = email === newAssigneeEmail ? (\n    //   assignerID\n    // ) : (newAssigneeName || newAssigneeEmail);\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: classNames('description'),\n            children: translationRenderer('[1[Reassigned]] to [2[{user}]]')({\n                renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"badge reassign\",\n                        children: text\n                    }),\n                renderer2: ()=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"text username\",\n                        children: assigneeName || newAssigneeEmail\n                    })\n            })\n        })\n    });\n};\nReAssignEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nReAssignEntry.PopoverDescription = ({ actionDetails })=>{\n    const { newAssigneeEmail, newAssigneeUser: { name: assigneeName } } = actionDetails;\n    return t('to: {user}.').replace(/{user}/g, assigneeName || newAssigneeEmail);\n};\nReAssignEntry.PopoverDescription.propTypes = _object_spread({}, entryPropTypes);\nconst requestMoreInfoEntry = {};\nrequestMoreInfoEntry.propTypes = _object_spread({}, entryPropTypes);\nrequestMoreInfoEntry.Name = WFCategoryName;\nrequestMoreInfoEntry.Status = ({ actionDetails })=>{\n    const { assigneeUser = {}, assigneeEmail = '' } = actionDetails;\n    const { name, email } = assigneeUser;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: classNames('description'),\n            children: translationRenderer('[1[Requested more info]] from [2[{userDetails}]]')({\n                renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"badge requestMoreInfo\",\n                        children: text\n                    }),\n                renderer2: ()=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"text username\",\n                        children: name || email || assigneeEmail\n                    })\n            })\n        })\n    });\n};\nrequestMoreInfoEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nrequestMoreInfoEntry.Attachment = ({ actionDetails })=>{\n    const { attachments } = actionDetails;\n    const [fileIndex, setFileIndex] = useState(0);\n    const [previewVisibility, setPreviewVisibility] = useState(false);\n    let uploadUrls = attachments && JSON.parse(attachments);\n    if (!attachments || !uploadUrls || (uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.length) === 0) {\n        return null;\n    }\n    if (Array.isArray(uploadUrls)) {\n        uploadUrls = uploadUrls.map((uploadUrl)=>{\n            var _fullName_split_pop, _fullName_split;\n            const hiddenExtensions = [\n                'JPEG',\n                'PNG',\n                'GIF',\n                'JPG',\n                'DOCX'\n            ];\n            const fullName = /[^/]*$/.exec(uploadUrl)[0];\n            const extension = fullName === null || fullName === void 0 ? void 0 : (_fullName_split = fullName.split('.')) === null || _fullName_split === void 0 ? void 0 : (_fullName_split_pop = _fullName_split.pop()) === null || _fullName_split_pop === void 0 ? void 0 : _fullName_split_pop.toUpperCase();\n            return {\n                description: '',\n                fileName: fullName,\n                fileThumbnailUrl: uploadUrl,\n                fileUrl: uploadUrl,\n                previewUrl: uploadUrl,\n                size: '',\n                extension,\n                isHidden: hiddenExtensions.indexOf(extension) > -1\n            };\n        });\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"entry-attachment-container\",\n            children: [\n                uploadUrls.map(({ fileName, extension, isHidden }, i)=>{\n                    return /*#__PURE__*/ _jsxs(\"button\", {\n                        className: \"entry-attachment-item\",\n                        type: \"button\",\n                        onClick: ()=>{\n                            setFileIndex(i);\n                            setPreviewVisibility(true);\n                        },\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extension-icon\",\n                                children: /*#__PURE__*/ _jsx(Unsupported, {\n                                    isHidden: isHidden,\n                                    extension: extension,\n                                    isNew: true\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"fileName\",\n                                children: fileName\n                            })\n                        ]\n                    });\n                }),\n                previewVisibility && /*#__PURE__*/ _jsx(Preview, {\n                    files: uploadUrls,\n                    fixDomainURL: false,\n                    initialFileIndex: fileIndex,\n                    onClose: ()=>setPreviewVisibility(false)\n                })\n            ]\n        });\n    }\n    return null;\n};\nrequestMoreInfoEntry.Attachment.propTypes = _object_spread({}, entryPropTypes);\nconst undoLoadingEntry = {};\nundoLoadingEntry.propTypes = {};\nundoLoadingEntry.Name = WFCategoryName;\nundoLoadingEntry.Status = ()=>{\n    return /*#__PURE__*/ _jsx(\"div\", {\n        style: {\n            maxWidth: '275px',\n            marginLeft: '70px'\n        },\n        children: /*#__PURE__*/ _jsx(WorkflowStatus, {})\n    });\n};\nundoLoadingEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nconst mockApproveDenyEntry = ({ actionDetails, user })=>{\n    const { comment, signature } = actionDetails;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: (user === null || user === void 0 ? void 0 : user.username) === '!workflow_system' ? null // <CompleteEntry actionDetails={actionDetails} />\n         : /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                comment ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"comment\",\n                    children: comment\n                }) : null,\n                signature ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"signature\",\n                    children: /*#__PURE__*/ _jsx(\"img\", {\n                        alt: `${user.username}'s signature`,\n                        src: signature.value\n                    })\n                }) : null\n            ]\n        })\n    });\n};\nmockApproveDenyEntry.propTypes = {};\nmockApproveDenyEntry.Name = WFCategoryName;\nmockApproveDenyEntry.Status = ({ actionDetails: { text, buttonColor: color, type, assigneeEmail, assigneeUser: { name } = {} }, user: { username, email } })=>{\n    const isSystem = username === '!workflow_system';\n    const hideBehalf = isSystem || !name && !assigneeEmail || assigneeEmail === email;\n    const badgeText = statusTexts[text === null || text === void 0 ? void 0 : text.toUpperCase()] || text;\n    const badgeClass = type === null || type === void 0 ? void 0 : type.toLowerCase();\n    const displayName = name || assigneeEmail;\n    const contentText = `${isSystem ? \"[1[{user}'s]] task was automatically\" : ''} [2[{badgeText}]] ${hideBehalf ? '' : 'on behalf of [3[{user}]]'}`;\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: translationRenderer(contentText)({\n                    renderer1: (usernameText)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text hideOnMobile\",\n                            children: usernameText.replace('{user}', displayName)\n                        }),\n                    renderer2: ()=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: classNames('badge', badgeClass),\n                            style: {\n                                color,\n                                backgroundColor: rgba(color, 0.2)\n                            },\n                            children: t(badgeText)\n                        }),\n                    renderer3: (usernameText)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text username\",\n                            children: usernameText.replace('{user}', displayName)\n                        })\n                })\n            }),\n            isSystem ? /*#__PURE__*/ _jsx(\"div\", {\n                className: \"extra\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    children: '{user} didn\\'t take any action in the time allowed.'.replace(/{user}/, name || assigneeEmail)\n                })\n            }) : null\n        ]\n    });\n};\nmockApproveDenyEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nconst editSubmissionEntry = {};\neditSubmissionEntry.propTypes = _object_spread({}, entryPropTypes);\neditSubmissionEntry.Name = EditSubmisisonCategoryName;\neditSubmissionEntry.Status = ({ actionDetails })=>{\n    const { assigneeUser: { name, email } = {}, assigneeEmail } = actionDetails;\n    const actionOwner = name || email || assigneeEmail || 'Form User';\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: classNames('description'),\n            children: [\n                /*#__PURE__*/ _jsxs(\"span\", {\n                    className: \"text username\",\n                    children: [\n                        ' ',\n                        actionOwner\n                    ]\n                }),\n                ' ',\n                /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"text editSubmission\",\n                    children: \" edited the submission.\"\n                })\n            ]\n        })\n    });\n};\neditSubmissionEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nconst UserNoAction = ({ user })=>/*#__PURE__*/ _jsxs(\"div\", {\n        children: [\n            user.avatarUrl ? /*#__PURE__*/ _jsx(\"img\", {\n                width: 24,\n                height: 24,\n                alt: \"\",\n                src: user.avatarUrl\n            }) : null,\n            t('{user} did not complete this submission in the time allowed.').replace(/{user}/g, user.name)\n        ]\n    });\nUserNoAction.propTypes = {\n    user: shape({}).isRequired\n};\nconst EscalateEntry = {};\nEscalateEntry.propTypes = _object_spread({}, entryPropTypes);\nEscalateEntry.user = getSystemUser;\nEscalateEntry.Name = WFCategoryName;\n// Please dont use dangerouslySetInnerHTML for translations, its dangerous >_<\nEscalateEntry.Status = ({ actionDetails })=>{\n    const { prev, next } = getUsers(actionDetails);\n    const { fromMultipleApproval } = actionDetails;\n    const displayName = fromMultipleApproval ? 'Group Approval' : prev.name || prev.email;\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: classNames('description'),\n                children: translationRenderer(\"[1[{prevName}'s]] task has been [2[Escalated]] to [3[{nextName}]]\")({\n                    renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text hideOnMobile\",\n                            children: text.replace(/{prevName}/g, displayName)\n                        }),\n                    renderer2: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text escalate\",\n                            children: text\n                        }),\n                    renderer3: ()=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text username\",\n                            children: next.name || next.email\n                        })\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: classNames('extra'),\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    children: t('{prevName} didn\\'t take any action in the time allowed.').replace(/{prevName}/g, displayName)\n                })\n            })\n        ]\n    });\n};\nEscalateEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nEscalateEntry.PopoverDescription = ({ actionDetails })=>{\n    const { next } = getUsers(actionDetails);\n    return t('to: {nextName}').replace(/{nextName}/g, next.name || next.email);\n};\nEscalateEntry.PopoverDescription.propTypes = _object_spread({}, entryPropTypes);\nconst ExpiredEntry = {};\nExpiredEntry.propTypes = _object_spread({}, entryPropTypes);\nExpiredEntry.user = getSystemUser;\nExpiredEntry.Name = WFCategoryName;\nExpiredEntry.Status = ({ actionDetails })=>{\n    const user = getAssignee(actionDetails);\n    const { fromMultipleApproval } = actionDetails;\n    const displayName = fromMultipleApproval ? 'Group Approval' : (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.email);\n    return /*#__PURE__*/ _jsxs(\"div\", {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: translationRenderer('[1[{user}]] task was [2[Expired]]')({\n                    renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text hideOnMobile\",\n                            children: text.replace('{user}', displayName)\n                        }),\n                    renderer2: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text expire\",\n                            children: text\n                        })\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"extra\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    children: t(\"{user} didn't take any action in the time allowed.\").replace('{user}', displayName)\n                })\n            })\n        ]\n    });\n};\nExpiredEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nconst CompleteEntry = ({ actionDetails })=>{\n    const { type } = actionDetails;\n    const { prev } = getUsers(actionDetails);\n    const typeText = t(statusTexts[type]);\n    return /*#__PURE__*/ _jsxs(\"div\", {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                children: translationRenderer('This submission has [1[Automatically Finished]] as [2[{typeText}]]')({\n                    renderer1: (text)=>/*#__PURE__*/ _jsx(\"strong\", {\n                            children: text\n                        }),\n                    renderer2: ()=>/*#__PURE__*/ _jsx(\"strong\", {\n                            className: type,\n                            children: typeText\n                        })\n                })\n            }),\n            /*#__PURE__*/ _jsx(UserNoAction, {\n                user: prev\n            })\n        ]\n    });\n};\nCompleteEntry.propTypes = _object_spread({}, entryPropTypes);\nconst ApproveRejectEntry = ({ actionDetails, user })=>{\n    const { comment, signature } = actionDetails;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: (user === null || user === void 0 ? void 0 : user.username) === '!workflow_system' ? null // <CompleteEntry actionDetails={actionDetails} />\n         : /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                comment ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"comment\",\n                    children: comment\n                }) : null,\n                signature ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"signature\",\n                    children: /*#__PURE__*/ _jsx(\"img\", {\n                        alt: `${user.username}'s signature`,\n                        src: signature.value\n                    })\n                }) : null\n            ]\n        })\n    });\n};\nApproveRejectEntry.user = (actionDetails, user)=>(user === null || user === void 0 ? void 0 : user.username) === '!workflow_system' ? getSystemUser() : _object_spread_props(_object_spread({}, user), {\n        color: actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.buttonColor\n    });\nApproveRejectEntry.propTypes = _object_spread({}, entryPropTypes);\nApproveRejectEntry.Status = ({ actionDetails: { text, buttonColor: color, type, assigneeEmail, assigneeUser: { name } = {}, title, takenOver, fromMultipleApproval }, user: { username, email } })=>{\n    const isSystem = username === '!workflow_system';\n    const hideBehalfEmail = (assigneeEmail === null || assigneeEmail === void 0 ? void 0 : assigneeEmail.toLowerCase()) === (email === null || email === void 0 ? void 0 : email.toLowerCase());\n    const hideBehalf = (!takenOver || isSystem) && (isSystem || !name && !assigneeEmail || hideBehalfEmail || !username && !email && (name || assigneeEmail));\n    const badgeText = statusTexts[text === null || text === void 0 ? void 0 : text.toUpperCase()] || text;\n    const badgeClass = type === null || type === void 0 ? void 0 : type.toLowerCase();\n    const displayName = fromMultipleApproval ? 'Group Approval' : name || assigneeEmail;\n    const contentText = `${isSystem ? \"[1[{user}'s]] task was automatically\" : ''} [2[{badgeText}]] ${hideBehalf ? '' : ' on behalf of [3[{user}]]'}`;\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            title ? /*#__PURE__*/ _jsx(\"span\", {\n                className: \"jfThread-entry-header-status-content-title\",\n                children: translationRenderer('[1[{taskTitle}]] Step')({\n                    renderer1: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                            children: title\n                        })\n                })\n            }) : null,\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: translationRenderer(contentText)({\n                    renderer1: (usernameText)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text hideOnMobile\",\n                            children: usernameText.replace('{user}', displayName)\n                        }),\n                    renderer2: ()=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: classNames('badge', badgeClass),\n                            style: {\n                                color,\n                                backgroundColor: rgba(color, 0.2)\n                            },\n                            children: t(badgeText)\n                        }),\n                    renderer3: (usernameText)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text username\",\n                            children: usernameText.replace('{user}', displayName)\n                        })\n                })\n            }),\n            isSystem ? /*#__PURE__*/ _jsx(\"div\", {\n                className: \"extra\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"expired-task\",\n                    children: '{user} didn\\'t take any action in the time allowed.'.replace(/{user}/, displayName)\n                })\n            }) : null\n        ]\n    });\n};\nApproveRejectEntry.Attachment = ({ actionDetails: { attachment } })=>{\n    const [fileIndex, setFileIndex] = useState(0);\n    const [previewVisibility, setPreviewVisibility] = useState(false);\n    let uploadUrls = [];\n    if (attachment && (attachment === null || attachment === void 0 ? void 0 : attachment.url)) {\n        uploadUrls.push(attachment === null || attachment === void 0 ? void 0 : attachment.url);\n    }\n    if (uploadUrls && Array.isArray(uploadUrls) && (uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.length) > 0) {\n        uploadUrls = uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.map((uploadUrl)=>{\n            var _fullName_split_pop, _fullName_split;\n            const hiddenExtensions = [\n                'JPEG',\n                'PNG',\n                'GIF',\n                'JPG',\n                'DOCX'\n            ];\n            const fullName = /[^/]*$/.exec(uploadUrl)[0];\n            const extension = fullName === null || fullName === void 0 ? void 0 : (_fullName_split = fullName.split('.')) === null || _fullName_split === void 0 ? void 0 : (_fullName_split_pop = _fullName_split.pop()) === null || _fullName_split_pop === void 0 ? void 0 : _fullName_split_pop.toUpperCase();\n            return {\n                description: '',\n                fileName: fullName,\n                fileThumbnailUrl: uploadUrl,\n                fileUrl: uploadUrl,\n                previewUrl: uploadUrl,\n                size: '',\n                extension,\n                isHidden: (hiddenExtensions === null || hiddenExtensions === void 0 ? void 0 : hiddenExtensions.indexOf(extension)) > -1\n            };\n        });\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"entry-attachment-container\",\n            children: [\n                uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.map(({ fileName, extension, isHidden }, i)=>{\n                    return /*#__PURE__*/ _jsxs(\"button\", {\n                        className: \"entry-attachment-item\",\n                        type: \"button\",\n                        onClick: ()=>{\n                            setFileIndex(i);\n                            setPreviewVisibility(true);\n                        },\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extension-icon\",\n                                children: /*#__PURE__*/ _jsx(Unsupported, {\n                                    isHidden: isHidden,\n                                    extension: extension,\n                                    isNew: true\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"fileName\",\n                                children: fileName\n                            })\n                        ]\n                    });\n                }),\n                previewVisibility && /*#__PURE__*/ _jsx(Preview, {\n                    files: uploadUrls,\n                    fixDomainURL: false,\n                    initialFileIndex: fileIndex,\n                    onClose: ()=>setPreviewVisibility(false)\n                })\n            ]\n        });\n    }\n    return null;\n};\nApproveRejectEntry.Attachment.propTypes = _object_spread({}, entryPropTypes);\nApproveRejectEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nApproveRejectEntry.Name = WFCategoryName;\nconst MultipleApproveReject = ({ actionDetails, user })=>{\n    const { comment, signature } = actionDetails;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: (user === null || user === void 0 ? void 0 : user.username) === '!workflow_system' ? null // <CompleteEntry actionDetails={actionDetails} />\n         : /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                comment ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"comment\",\n                    children: comment\n                }) : null,\n                signature ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"signature\",\n                    children: /*#__PURE__*/ _jsx(\"img\", {\n                        alt: `${user.username}'s signature`,\n                        src: signature.value\n                    })\n                }) : null\n            ]\n        })\n    });\n};\nMultipleApproveReject.user = (actionDetails)=>isTeamApproval((actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.subType) || (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.type), actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.team) ? getGroupTeamApproverUser(actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.team) : getGroupApproverUser();\nMultipleApproveReject.propTypes = _object_spread({}, entryPropTypes);\nMultipleApproveReject.Status = ({ actionDetails: { text = '', buttonColor: color, type, subtaskHistory, title, approvalOptions, subType, sentDate, cancelReason, team = null } })=>{\n    const badgeText = statusTexts[text === null || text === void 0 ? void 0 : text.toUpperCase()] || text;\n    const badgeClass = type === null || type === void 0 ? void 0 : type.toLowerCase();\n    const filteredsubTaskHistory = subtaskHistory === null || subtaskHistory === void 0 ? void 0 : subtaskHistory.filter((history)=>{\n        var _history_actionDetails;\n        return history === null || history === void 0 ? void 0 : (_history_actionDetails = history.actionDetails) === null || _history_actionDetails === void 0 ? void 0 : _history_actionDetails.assigneeUser;\n    });\n    const subtaskActionDetails = filteredsubTaskHistory === null || filteredsubTaskHistory === void 0 ? void 0 : filteredsubTaskHistory.map((history)=>history === null || history === void 0 ? void 0 : history.actionDetails);\n    const parsedDataForWorkflow = filteredsubTaskHistory === null || filteredsubTaskHistory === void 0 ? void 0 : filteredsubTaskHistory.map(({ actionDetails, timestamp, user })=>{\n        const { buttonColor, assigneeUser, outcomeInfo, notRequired, notQualifiedReason = null, comment, takenOver: subtaskTakenOver, signature } = actionDetails;\n        const { name, status, email, avatarUrl } = assigneeUser || {};\n        const { username, email: userEmail, name: userName, avatarUrl: userAvatarUrl } = user;\n        const userValue = name || email;\n        const contentText = subtaskTakenOver ? `on behalf of ${userValue}` : '';\n        return {\n            name: !subtaskTakenOver || Array.isArray(user) ? name : userName || username,\n            email: !subtaskTakenOver || Array.isArray(user) ? email : userEmail,\n            avatarUrl: !subtaskTakenOver || Array.isArray(user) ? avatarUrl : userAvatarUrl,\n            status,\n            timestamp,\n            comment,\n            properties: {\n                outcomeInfo,\n                notRequired,\n                contentText,\n                notQualifiedReason\n            },\n            notRequired,\n            notQualifiedReason,\n            signature: signature === null || signature === void 0 ? void 0 : signature.value,\n            style: {\n                '--outcome-color': buttonColor\n            }\n        };\n    });\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            title ? /*#__PURE__*/ _jsx(\"span\", {\n                className: \"jfThread-entry-header-status-content-title\",\n                children: translationRenderer('[1[{taskTitle}]] Step')({\n                    renderer1: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                            children: title\n                        })\n                })\n            }) : null,\n            !cancelReason && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    className: classNames('badge', badgeClass),\n                    style: {\n                        color,\n                        backgroundColor: rgba(color, 0.2)\n                    },\n                    children: t(badgeText)\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"jfThread-action-content\",\n                children: /*#__PURE__*/ _jsx(AvatarGroupWithPanel, {\n                    cancelReason: cancelReason,\n                    items: parsedDataForWorkflow,\n                    elementType: \"workflow_approval\",\n                    subType: subType,\n                    teamProps: team,\n                    approvalOptions: approvalOptions,\n                    approverCount: subtaskActionDetails === null || subtaskActionDetails === void 0 ? void 0 : subtaskActionDetails.length,\n                    customOutcomeStatus: {\n                        type: type,\n                        text: text,\n                        color: color\n                    },\n                    sentDate: sentDate\n                })\n            })\n        ]\n    });\n};\nMultipleApproveReject.Attachment = ({ actionDetails: { attachment } })=>{\n    const [fileIndex, setFileIndex] = useState(0);\n    const [previewVisibility, setPreviewVisibility] = useState(false);\n    let uploadUrls = [];\n    if (attachment && (attachment === null || attachment === void 0 ? void 0 : attachment.url)) {\n        uploadUrls.push(attachment === null || attachment === void 0 ? void 0 : attachment.url);\n    }\n    if (uploadUrls && Array.isArray(uploadUrls) && (uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.length) > 0) {\n        uploadUrls = uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.map((uploadUrl)=>{\n            var _fullName_split_pop, _fullName_split;\n            const hiddenExtensions = [\n                'JPEG',\n                'PNG',\n                'GIF',\n                'JPG',\n                'DOCX'\n            ];\n            const fullName = /[^/]*$/.exec(uploadUrl)[0];\n            const extension = fullName === null || fullName === void 0 ? void 0 : (_fullName_split = fullName.split('.')) === null || _fullName_split === void 0 ? void 0 : (_fullName_split_pop = _fullName_split.pop()) === null || _fullName_split_pop === void 0 ? void 0 : _fullName_split_pop.toUpperCase();\n            return {\n                description: '',\n                fileName: fullName,\n                fileThumbnailUrl: uploadUrl,\n                fileUrl: uploadUrl,\n                previewUrl: uploadUrl,\n                size: '',\n                extension,\n                isHidden: (hiddenExtensions === null || hiddenExtensions === void 0 ? void 0 : hiddenExtensions.indexOf(extension)) > -1\n            };\n        });\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"entry-attachment-container\",\n            children: [\n                uploadUrls === null || uploadUrls === void 0 ? void 0 : uploadUrls.map(({ fileName, extension, isHidden }, i)=>{\n                    return /*#__PURE__*/ _jsxs(\"button\", {\n                        className: \"entry-attachment-item\",\n                        type: \"button\",\n                        onClick: ()=>{\n                            setFileIndex(i);\n                            setPreviewVisibility(true);\n                        },\n                        children: [\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extension-icon\",\n                                children: /*#__PURE__*/ _jsx(Unsupported, {\n                                    isHidden: isHidden,\n                                    extension: extension,\n                                    isNew: true\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"fileName\",\n                                children: fileName\n                            })\n                        ]\n                    });\n                }),\n                previewVisibility && /*#__PURE__*/ _jsx(Preview, {\n                    files: uploadUrls,\n                    fixDomainURL: false,\n                    initialFileIndex: fileIndex,\n                    onClose: ()=>setPreviewVisibility(false)\n                })\n            ]\n        });\n    }\n    return null;\n};\nMultipleApproveReject.Attachment.propTypes = _object_spread({}, entryPropTypes);\nMultipleApproveReject.Status.propTypes = _object_spread({}, entryPropTypes);\nMultipleApproveReject.Name = WFCategoryName;\nconst ErrorEntry = {};\nErrorEntry.Name = WFCategoryName;\nErrorEntry.Status = ()=>/*#__PURE__*/ _jsx(\"div\", {\n        className: \"description\",\n        children: translationRenderer(isWorkflowReleased ? '[1[Canceled]] flow.' : '[1[Canceled]] approval flow.')({\n            renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                    className: \"text deny\",\n                    children: text\n                })\n        })\n    });\nconst RestartEntry = {};\nRestartEntry.Name = WFCategoryName;\nRestartEntry.Status = ()=>{\n    return /*#__PURE__*/ _jsx(\"div\", {\n        className: \"description\",\n        children: translationRenderer(isWorkflowReleased ? '[1[Restarted]] flow.' : '[1[Restarted]] approval flow.')({\n            renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                    className: \"text approve\",\n                    children: text\n                })\n        })\n    });\n};\nconst AssignFormNotificationEntry = {};\nAssignFormNotificationEntry.user = getSystemUser;\nAssignFormNotificationEntry.Status = ({ actionDetails })=>{\n    const { to, subject, formTitle, assigneeUser } = actionDetails;\n    const userName = (assigneeUser === null || assigneeUser === void 0 ? void 0 : assigneeUser.name) || (assigneeUser === null || assigneeUser === void 0 ? void 0 : assigneeUser.username) || to;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: \"description\",\n            children: translationRenderer('[1[{form}]] [2[{sent}]] to [3[{to}]] [4[{subject}]]')({\n                renderer1: (formText)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"formname\",\n                        children: formText.replace('{form}', formTitle)\n                    }),\n                renderer2: (sentText)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"text\",\n                        children: sentText.replace('{sent}', ' sent')\n                    }),\n                renderer3: (toText)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"text\",\n                        style: {\n                            fontWeight: 'bold'\n                        },\n                        children: toText.replace('{to}', userName)\n                    }),\n                renderer4: (subjectText)=>/*#__PURE__*/ _jsx(\"div\", {\n                        className: \"extra\",\n                        children: /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"email\",\n                            children: stripHTML(decodeHTML(subjectText.replace('{subject}', subject)))\n                        })\n                    })\n            })\n        })\n    });\n};\nAssignFormNotificationEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nAssignFormNotificationEntry.Name = WFCategoryName;\nconst SignDocumentNotification = {};\nconst ViewSignInboxButton = ({ documentFormID, submissionID })=>{\n    const redirectToBuild = ()=>handleCustomNavigation(`/inbox/${documentFormID}/signAllDocuments/${submissionID}`);\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"button\", {\n            onClick: redirectToBuild,\n            className: \"jfButton jfButton-info showSubmission\",\n            type: \"button\",\n            style: {\n                display: 'flex',\n                alignItems: 'center'\n            },\n            children: \"View Sign Inbox\"\n        })\n    });\n};\nViewSignInboxButton.propTypes = {\n    submissionID: string,\n    documentFormID: string\n};\nViewSignInboxButton.defaultProps = {\n    submissionID: '',\n    documentFormID: ''\n};\nconst ReminderEntry = {};\nReminderEntry.user = getSystemUser;\nReminderEntry.Status = ({ actionDetails })=>{\n    const { to, subject, elementType, elementSubType } = actionDetails;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: \"description\",\n            children: translationRenderer('[1[{element}]] Step - Email sent to [2[{to}]] [3[{subject}]]')({\n                renderer1: (elementName)=>/*#__PURE__*/ _jsx(\"span\", {\n                        children: elementName.replace('{element}', getElementName(elementType, elementSubType))\n                    }),\n                renderer2: (toText)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"text emailaddress\",\n                        children: toText.replace('{to}', to)\n                    }),\n                renderer3: (subjectText)=>/*#__PURE__*/ _jsx(\"div\", {\n                        className: \"extra\",\n                        children: /*#__PURE__*/ _jsxs(\"span\", {\n                            className: \"reminder\",\n                            children: [\n                                ' ',\n                                subjectText.replace('{subject}', subject)\n                            ]\n                        })\n                    })\n            })\n        })\n    });\n};\nReminderEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nReminderEntry.Name = WFCategoryName;\nSignDocumentNotification.user = getSystemUser;\nSignDocumentNotification.Status = ({ actionDetails })=>{\n    const { documentTitle } = actionDetails;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(\"div\", {\n            className: \"description\",\n            children: translationRenderer('[1[{title}]] sent for signature. [2[{viewSignInbox}]]')({\n                renderer1: (subjectText)=>/*#__PURE__*/ _jsx(\"span\", {\n                        className: \"signname\",\n                        children: stripHTML(decodeHTML(subjectText.replace('{title}', documentTitle)))\n                    }),\n                renderer2: ()=>/*#__PURE__*/ _jsx(\"div\", {\n                        className: \"inboxbutton\",\n                        children: /*#__PURE__*/ _jsx(ViewSignInboxButton, _object_spread({}, actionDetails))\n                    })\n            })\n        })\n    });\n};\nSignDocumentNotification.Status.propTypes = _object_spread({}, entryPropTypes);\nSignDocumentNotification.Name = WFCategoryName;\nconst SignEntry = {};\nSignEntry.user = getSystemUser;\nSignEntry.Status = ({ actionDetails })=>{\n    const { text, buttonColor: color, type, documentTitle } = actionDetails;\n    const badgeText = statusTexts[text === null || text === void 0 ? void 0 : text.toUpperCase()] || text;\n    const badgeClass = type === null || type === void 0 ? void 0 : type.toLowerCase();\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"description\",\n            children: [\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"extra sign\",\n                    children: [\n                        translationRenderer('[1[{status}]]')({\n                            renderer1: (subjectText)=>/*#__PURE__*/ _jsxs(_Fragment, {\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"span\", {\n                                            className: classNames('badge', badgeClass, 'isSign'),\n                                            style: {\n                                                color,\n                                                backgroundColor: rgba(color, 0.2)\n                                            },\n                                            children: stripHTML(decodeHTML(subjectText.replace('{status}', badgeText)))\n                                        }),\n                                        ' '\n                                    ]\n                                })\n                        }),\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text signname isSign\",\n                            children: stripHTML(decodeHTML(documentTitle))\n                        })\n                    ]\n                }),\n                translationRenderer('[1[{viewSignInbox}]]')({\n                    renderer1: ()=>/*#__PURE__*/ _jsx(ViewSignInboxButton, _object_spread({}, actionDetails))\n                })\n            ]\n        })\n    });\n};\nSignEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nSignEntry.Name = WFCategoryName;\nconst MailEntry = {};\nMailEntry.user = getSystemUser;\nMailEntry.Status = ({ actionDetails })=>{\n    const { to, subject, subType, reason } = actionDetails;\n    switch(reason){\n        case 'ASSIGN_FORM_NOTIFICATION_MAIL':\n            return AssignFormNotificationEntry.Status({\n                actionDetails\n            });\n        case 'SEND_SIGN_NOTIFICATION':\n            return SignDocumentNotification.Status({\n                actionDetails\n            });\n        case 'SIGN_DOCUMENT':\n            return SignEntry.Status({\n                actionDetails\n            });\n        case 'SEND_REMINDER':\n            return ReminderEntry.Status({\n                actionDetails\n            });\n        default:\n            var _to_split_filter, _to_split;\n            const emailList = (to === null || to === void 0 ? void 0 : (_to_split = to.split(',')) === null || _to_split === void 0 ? void 0 : (_to_split_filter = _to_split.filter(Boolean)) === null || _to_split_filter === void 0 ? void 0 : _to_split_filter.join(',')) || '';\n            return /*#__PURE__*/ _jsx(_Fragment, {\n                children: /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"description\",\n                    children: translationRenderer([\n                        'workflow_send_approval_report',\n                        'workflow_send_default_report'\n                    ].includes(subType) ? 'Approval Report Email sent to [1[{to}]] [2[{subject}]]' : 'Email sent to [1[{to}]] [2[{subject}]]')({\n                        renderer1: (toText)=>/*#__PURE__*/ _jsx(\"span\", {\n                                className: \"text emailaddress\",\n                                children: toText.replace('{to}', emailList.replaceAll(',', ', '))\n                            }),\n                        renderer2: (subjectText)=>/*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extra\",\n                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                    className: \"email\",\n                                    children: stripHTML(decodeHTML(subjectText.replace('{subject}', subject)))\n                                })\n                            })\n                    })\n                })\n            });\n    }\n};\nMailEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nMailEntry.Name = WFCategoryName;\nconst MultipleApprovalMail = {};\nMultipleApprovalMail.user = getSystemUser;\nMultipleApprovalMail.Status = ({ actionDetails })=>{\n    const { title, reason, approvalOptions, subType, team = null } = actionDetails;\n    const { option, value = null } = approvalOptions && safeJSONParse(approvalOptions, approvalOptions) || {};\n    switch(reason){\n        case 'TEAM_START':\n            return /*#__PURE__*/ _jsx(_Fragment, {\n                children: /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"description\",\n                    children: translationRenderer('[1[{title}]] [2[{sent}]] to [3[group approval]] [4[{approverOptions}]]')({\n                        renderer1: (titleText)=>/*#__PURE__*/ _jsx(\"span\", {\n                                className: \"text\",\n                                children: titleText.replace('{title}', title)\n                            }),\n                        renderer2: (sentText)=>/*#__PURE__*/ _jsx(\"span\", {\n                                className: \"text sentText\",\n                                children: sentText.replace('{sent}', ' request sent')\n                            }),\n                        renderer3: ()=>/*#__PURE__*/ _jsx(\"b\", {\n                                children: team === null || team === void 0 ? void 0 : team.teamName\n                            }),\n                        renderer4: ()=>/*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extra\",\n                                children: /*#__PURE__*/ _jsx(ApprovalOptions, {\n                                    option: option,\n                                    value: value,\n                                    type: \"workflow_approval\",\n                                    subType: subType\n                                })\n                            })\n                    })\n                })\n            });\n        case 'SEND_REMINDER':\n            const overriddenActionDetails = _object_spread_props(_object_spread({}, actionDetails), {\n                to: (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.mergeTo) || (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.to)\n            });\n            return ReminderEntry.Status({\n                actionDetails: overriddenActionDetails\n            });\n        default:\n            return /*#__PURE__*/ _jsx(_Fragment, {\n                children: /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"description\",\n                    children: translationRenderer('[1[{title}]] [2[{sent}]] to [3[group approval]] [4[{approverOptions}]]')({\n                        renderer1: (titleText)=>/*#__PURE__*/ _jsx(\"span\", {\n                                className: \"text\",\n                                children: titleText.replace('{title}', title)\n                            }),\n                        renderer2: (sentText)=>/*#__PURE__*/ _jsx(\"span\", {\n                                className: \"text sentText\",\n                                children: sentText.replace('{sent}', ' sent')\n                            }),\n                        renderer3: (text)=>/*#__PURE__*/ _jsx(\"b\", {\n                                children: text\n                            }),\n                        renderer4: ()=>/*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extra\",\n                                children: /*#__PURE__*/ _jsx(ApprovalOptions, {\n                                    option: option,\n                                    value: value,\n                                    type: \"workflow_approval\",\n                                    subType: subType\n                                })\n                            })\n                    })\n                })\n            });\n    }\n};\nMultipleApprovalMail.Status.propTypes = _object_spread({}, entryPropTypes);\nMultipleApprovalMail.Name = WFCategoryName;\nconst AssignFormSubmissionEntry = {};\nAssignFormSubmissionEntry.user = getAssignee;\nAssignFormSubmissionEntry.Status = ({ actionDetails, timestamp, name })=>{\n    const formID = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.formID;\n    const submissionID = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.submissionID;\n    const { formTitle } = actionDetails;\n    const [question, setQuestion] = useState({});\n    const [submission, setSubmission] = useState({});\n    const [singleSubmission, setSingleSubmission] = useState(false);\n    const [isPanelOpen, setPanelOpen] = useState(false);\n    const containers = [\n        '.jSheetSingleSub',\n        '.jfInbox-submission-wrapper'\n    ];\n    let portalContainer = 'body';\n    let insideContainer = false;\n    containers.forEach((container)=>{\n        if (global.document.querySelector(container)) {\n            portalContainer = container;\n            insideContainer = true;\n        }\n    });\n    const getSubmissionInfo = async ()=>{\n        try {\n            if (Object.keys(question).length === 0 || Object.keys(submission).length === 0) {\n                const questionRes = await fetchQuestions(formID, 'inbox');\n                const submissionRes = await fetchSubmission(submissionID, 'inbox');\n                setQuestion(questionRes);\n                setSubmission(submissionRes);\n            }\n            setSingleSubmission(true);\n            // JS Callstack - animation needs\n            // This component/file needs to be refactored.\n            setTimeout(()=>{\n                document.body.classList.add('jfSingleSubmissionView-standalone-isVisible');\n            });\n        } catch (e) {\n            var _e_response;\n            Tracking.captureException(e);\n            setQuestion({});\n            setSubmission({});\n            setSingleSubmission(true);\n            if ((e === null || e === void 0 ? void 0 : (_e_response = e.response) === null || _e_response === void 0 ? void 0 : _e_response.status) === 401) {\n                handleCustomNavigation(`/inbox/${formID}/${submissionID}`, '_blank');\n                setPanelOpen(false);\n            }\n        }\n    };\n    useEffect(()=>{\n        return ()=>document.body.classList.remove('jfSingleSubmissionView-standalone-isVisible');\n    }, []);\n    useEffect(()=>{\n        if (isPanelOpen === submissionID) {\n            getSubmissionInfo();\n        } else {\n            document.body.classList.remove('jfSingleSubmissionView-standalone-isVisible');\n        }\n    }, [\n        isPanelOpen,\n        submissionID\n    ]);\n    return /*#__PURE__*/ _jsxs(SingleSubmissionButtonContext.Provider, {\n        value: {\n            isPanelOpen,\n            setPanelOpen\n        },\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: translationRenderer('[1[{newSubmission}]] [2[{formName}]] [3[{viewSubmission}]] ')({\n                    renderer1: (newSubmission)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text\",\n                            children: newSubmission.replace('{newSubmission}', 'New submission on ')\n                        }),\n                    renderer2: (formNameText)=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text\",\n                            style: {\n                                fontWeight: 'bold'\n                            },\n                            children: formNameText.replace('{formName}', formTitle)\n                        }),\n                    renderer3: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                            children: /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extra\",\n                                children: /*#__PURE__*/ _jsx(\"button\", {\n                                    className: \"jfButton jfButton-info showSubmission\",\n                                    type: \"button\",\n                                    onClick: ()=>setPanelOpen(submissionID),\n                                    style: {\n                                        display: 'flex',\n                                        alignItems: 'center'\n                                    },\n                                    children: \"View Submission\"\n                                })\n                            })\n                        })\n                })\n            }),\n            /*#__PURE__*/ _jsx(Portal, {\n                usePortal: true,\n                containerSelector: portalContainer,\n                children: isPanelOpen === submissionID ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"jfSingleSubmissionView-standalone inSameContainer\",\n                    children: /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"jfSubmissionView-content\",\n                        children: singleSubmission && /*#__PURE__*/ _jsx(SingleSubmissionViewWithButton, {\n                            headerText: name,\n                            subHeaderText: timestamp,\n                            showSubmissionWithHeader: {\n                                showFormName: true,\n                                showInboxNavigator: false,\n                                showDownloadButton: false,\n                                showPrintButton: false\n                            },\n                            formName: actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.formTitle,\n                            submissionID: submissionID,\n                            formID: formID,\n                            question: question,\n                            submission: submission,\n                            withBackButton: !!insideContainer\n                        })\n                    })\n                }) : null\n            })\n        ]\n    });\n};\nAssignFormSubmissionEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nAssignFormSubmissionEntry.Name = WFNewSubmissionCategoryName;\nconst AssignTaskCompleteEntry = {};\nAssignTaskCompleteEntry.user = getAssignee;\nAssignTaskCompleteEntry.Status = ({ actionDetails, timestamp, name, actionType })=>{\n    const formID = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.taskFormID;\n    const submissionID = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.submissionID;\n    const outcomeInfo = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.outcomeInfo;\n    const { text, type, buttonColor } = outcomeInfo;\n    const badgeText = statusTexts[text === null || text === void 0 ? void 0 : text.toUpperCase()] || text;\n    const badgeClass = type === null || type === void 0 ? void 0 : type.toLowerCase();\n    const { title } = actionDetails;\n    const [question, setQuestion] = useState({});\n    const [submission, setSubmission] = useState({});\n    const [singleSubmission, setSingleSubmission] = useState(false);\n    const [isPanelOpen, setPanelOpen] = useState(false);\n    const containers = [\n        '.jSheetSingleSub',\n        '.jfInbox-submission-wrapper'\n    ];\n    let portalContainer = 'body';\n    let insideContainer = false;\n    containers.forEach((container)=>{\n        if (global.document.querySelector(container)) {\n            portalContainer = container;\n            insideContainer = true;\n        }\n    });\n    const getSubmissionInfo = async ()=>{\n        try {\n            if (Object.keys(question).length === 0 || Object.keys(submission).length === 0) {\n                const questionRes = await fetchQuestions(formID, 'inbox');\n                const submissionRes = await fetchSubmission(submissionID, 'inbox');\n                setQuestion(questionRes);\n                setSubmission(submissionRes);\n            }\n            setSingleSubmission(true);\n            // JS Callstack - animation needs\n            // This component/file needs to be refactored.\n            setTimeout(()=>{\n                document.body.classList.add('jfSingleSubmissionView-standalone-isVisible');\n            });\n        } catch (e) {\n            var _e_response;\n            Tracking.captureException(e);\n            setQuestion({});\n            setSubmission({});\n            setSingleSubmission(true);\n            if ((e === null || e === void 0 ? void 0 : (_e_response = e.response) === null || _e_response === void 0 ? void 0 : _e_response.status) === 401) {\n                handleCustomNavigation(`/inbox/${submissionID}`, '_blank');\n                setPanelOpen(false);\n            }\n        }\n    };\n    useEffect(()=>{\n        return ()=>document.body.classList.remove('jfSingleSubmissionView-standalone-isVisible');\n    }, []);\n    useEffect(()=>{\n        if (isPanelOpen === submissionID) {\n            getSubmissionInfo();\n        } else {\n            document.body.classList.remove('jfSingleSubmissionView-standalone-isVisible');\n        }\n    }, [\n        isPanelOpen,\n        submissionID\n    ]);\n    return /*#__PURE__*/ _jsxs(SingleSubmissionButtonContext.Provider, {\n        value: {\n            isPanelOpen,\n            setPanelOpen\n        },\n        children: [\n            title ? /*#__PURE__*/ _jsx(\"span\", {\n                className: \"jfThread-entry-header-status-content-title\",\n                children: translationRenderer('[1[{taskTitle}]]')({\n                    renderer1: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                            children: title\n                        })\n                })\n            }) : null,\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: translationRenderer('[1[{formName}]] [2[{viewSubmission}]] ')({\n                    renderer1: ()=>/*#__PURE__*/ _jsx(\"span\", {\n                            className: classNames('badge', badgeClass),\n                            style: {\n                                color: buttonColor,\n                                backgroundColor: rgba(buttonColor, 0.2)\n                            },\n                            children: t(badgeText)\n                        }),\n                    renderer2: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                            children: /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"extra\",\n                                children: /*#__PURE__*/ _jsx(\"button\", {\n                                    className: \"jfButton jfButton-info showSubmission\",\n                                    type: \"button\",\n                                    onClick: ()=>setPanelOpen(submissionID),\n                                    style: {\n                                        display: 'flex',\n                                        alignItems: 'center'\n                                    },\n                                    children: \"View Task\"\n                                })\n                            })\n                        })\n                })\n            }),\n            /*#__PURE__*/ _jsx(Portal, {\n                usePortal: true,\n                containerSelector: portalContainer,\n                children: isPanelOpen === submissionID ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"jfSingleSubmissionView-standalone inSameContainer\",\n                    children: /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"jfSubmissionView-content\",\n                        children: singleSubmission && /*#__PURE__*/ _jsx(SingleSubmissionViewWithButton, {\n                            headerText: name,\n                            subHeaderText: timestamp,\n                            showSubmissionWithHeader: {\n                                showFormName: false,\n                                showInboxNavigator: false,\n                                showDownloadButton: false,\n                                showPrintButton: false,\n                                showCustomName: true\n                            },\n                            formName: actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.title,\n                            submissionID: submissionID,\n                            formID: formID,\n                            question: question,\n                            submission: submission,\n                            customIconValue: actionType,\n                            withBackButton: !!insideContainer\n                        })\n                    })\n                }) : null\n            })\n        ]\n    });\n};\nAssignTaskCompleteEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nAssignTaskCompleteEntry.Name = WFCategoryName;\nconst restartEditEntry = {};\nrestartEditEntry.user = getSystemUser;\nrestartEditEntry.Name = WFCategoryName;\nrestartEditEntry.Status = ()=>{\n    return /*#__PURE__*/ _jsx(\"div\", {\n        className: \"description\",\n        children: translationRenderer('Due to submission edit, the approval flow automatically [1[restarted]].')({\n            renderer1: (text)=>/*#__PURE__*/ _jsx(\"span\", {\n                    className: \"text approve\",\n                    children: text\n                })\n        })\n    });\n};\nconst ViewIntegrationDetails = ({ links })=>{\n    if (!Array.isArray(links)) {\n        return null;\n    }\n    return links.map((l)=>/*#__PURE__*/ _jsx(\"button\", {\n            onClick: ()=>handleCustomNavigation(`${l}`),\n            className: \"jfButton jfButton-info showSubmission\",\n            type: \"button\",\n            style: {\n                display: 'flex',\n                alignItems: 'center'\n            },\n            children: l\n        }));\n};\nViewIntegrationDetails.propTypes = {\n    links: array\n};\nViewIntegrationDetails.defaultProps = {\n    links: []\n};\nconst IntegrationTriggerEntry = {};\nIntegrationTriggerEntry.user = ({ partner })=>{\n    const details = INTEGRATION_DETAILS[partner];\n    return {\n        name: details === null || details === void 0 ? void 0 : details.text,\n        avatarUrl: details === null || details === void 0 ? void 0 : details.icon\n    };\n};\nIntegrationTriggerEntry.Name = WFCategoryName;\nIntegrationTriggerEntry.Status = ({ actionDetails })=>{\n    const { result, integrationAccountName, action, links, partner = '', errorDetails = '' } = actionDetails;\n    const details = INTEGRATION_DETAILS[partner];\n    if (result === 'ERRORED') {\n        return /*#__PURE__*/ _jsx(_Fragment, {\n            children: /*#__PURE__*/ _jsx(\"div\", {\n                className: \"jfThread-action-content\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"isError\",\n                    children: errorDetails\n                })\n            })\n        });\n    }\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: translationRenderer('[1[actionTypeName]]')({\n                    renderer1: ()=>{\n                        var _details_actions_find, _details_actions;\n                        return /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"text\",\n                            children: details === null || details === void 0 ? void 0 : (_details_actions = details.actions) === null || _details_actions === void 0 ? void 0 : (_details_actions_find = _details_actions.find((e)=>e.value === action)) === null || _details_actions_find === void 0 ? void 0 : _details_actions_find.text\n                        });\n                    }\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"jfThread-action-content\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"extra\",\n                        children: /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"field\",\n                            children: integrationAccountName\n                        })\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"inboxbutton\",\n                        children: /*#__PURE__*/ _jsx(ViewIntegrationDetails, {\n                            links: links\n                        })\n                    })\n                ]\n            })\n        ]\n    });\n};\nIntegrationTriggerEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nconst TerminatedEntry = {};\nTerminatedEntry.user = ()=>getTerminate();\nTerminatedEntry.Name = WFCategoryName;\nTerminatedEntry.Status = ({ actionDetails })=>{\n    const { reasonOfTerminate } = actionDetails;\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"description\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"text\",\n                    children: t('Flow Terminated.')\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"jfThread-action-content\",\n                children: /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"field\",\n                    children: reasonOfTerminate\n                })\n            })\n        ]\n    });\n};\nTerminatedEntry.Status.propTypes = _object_spread({}, entryPropTypes);\nconst TaskEntry = {};\nTaskEntry.propTypes = _object_spread({}, entryPropTypes);\nconst EmailEntryTypes = {\n    reply: ReplyEntry,\n    forward: ForwardEntry\n};\nconst WorkFlowEntryTypes = {\n    task: TaskEntry,\n    // assign: AssignEntry,\n    reassign: ReAssignEntry,\n    escalate: EscalateEntry,\n    approve_reject: ApproveRejectEntry,\n    sign_document: SignEntry,\n    expire: ExpiredEntry,\n    cancel: ErrorEntry,\n    restart: RestartEntry,\n    // complete: CompleteEntry\n    mail: MailEntry,\n    multiple_approval_mail: MultipleApprovalMail,\n    multiple_approve_reject: MultipleApproveReject,\n    request_more_info: requestMoreInfoEntry,\n    edit_submission: editSubmissionEntry,\n    undo_loading: undoLoadingEntry,\n    mock_approve_deny: mockApproveDenyEntry,\n    restart_edit: restartEditEntry,\n    assign_form_notification_mail: AssignFormNotificationEntry,\n    sign_document_notification: SignDocumentNotification,\n    assign_form_submission: AssignFormSubmissionEntry,\n    reminder: ReminderEntry,\n    integration_trigger: IntegrationTriggerEntry,\n    terminated: TerminatedEntry,\n    assign_task_complete: AssignTaskCompleteEntry\n};\nconst EntryTypes = _object_spread({}, WorkFlowEntryTypes, EmailEntryTypes);\nexport const EntryCategories = {\n    workflow: Object.keys(WorkFlowEntryTypes).map((e)=>e.toUpperCase()),\n    email: Object.keys(EmailEntryTypes).map((e)=>e.toUpperCase()),\n    all: Object.keys(EntryTypes).map((e)=>e.toUpperCase())\n};\n// eslint-disable-next-line max-len\nexport const entryFiltererGenerator = (category = 'all')=>({ actionType, actionDetails })=>{\n        if (!EntryCategories[category].includes(actionType) || !actionDetails) return false;\n        if (actionType === 'MAIL') {\n            if ((actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.reason) === 'ASSIGN_FORM_NOTIFICATION_MAIL') {\n                return true;\n            }\n            return (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.type) === 'custom_email' && (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.to) !== '';\n        }\n        if (actionType === 'MULTIPLE_APPROVE_REJECT' && ((actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.cancelReason) === 'TAKEN_OVER' || (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.cancelReason) === 'EXPIRED')) {\n            return false;\n        }\n        return true;\n    };\nexport const convertTasks = ({ properties: { assigneeEmail, assigneeUser: user }, status, id })=>{\n    const el = {\n        id,\n        status,\n        user,\n        actionType: 'TASK',\n        actionDetails: {}\n    };\n    el.user = el.user || {\n        email: assigneeEmail\n    };\n    return el;\n};\nexport default EntryTypes;\n","/* eslint-disable no-constant-condition */ /* eslint-disable complexity */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { rgba, lighten, readableColor, darken } from 'polished';\nimport { arrayOf, bool, func, shape } from 'prop-types';\nimport classnames from 'classnames';\nimport styled, { css } from 'styled-components';\nimport { Hooks } from '@jotforminc/uikit';\nimport Tethered from 'react-tether';\nimport { isTeamApproval } from '../utils/helper';\nimport EntryTypes, { entryFiltererGenerator, convertTasks, statusTexts } from '../SubmissionThread/EntryTypes';\nimport ThreadAvatar from './ThreadAvatar';\nimport '../styles/_jfWorkflowStatus.scss';\nimport '../styles/_jfMenu.scss';\nimport TeamImageWithWrapper from './TeamImageWithWrapper';\nexport const WORKFLOW_STATUS = {\n    ACTIVE: 'In Progress',\n    NOT_STARTED: 'Not Started',\n    APPROVE: 'Approved',\n    DENY: 'Denied',\n    CANCELED: 'Canceled',\n    COMPLETED: 'Completed',\n    ERRORED: 'Error'\n};\nconst TEAM_APPROVAL_STATUS_TEXT = {\n    APPROVE: 'Approved',\n    DENY: 'Denied',\n    EXPIRE: 'Expired',\n    AUTO: 'Automatically Finished',\n    ESCALATE: 'Escalated',\n    REASSIGN: 'Reassigned',\n    CANCEL: 'Canceled',\n    CUSTOM_EMAIL: 'Email Sent',\n    REPLY: 'Replied',\n    RESTART: 'Restarted',\n    TASK: 'Waiting',\n    REQUEST_MORE_INFO: 'Requested more info',\n    EDIT_SUBMISSION: 'Edit submission',\n    ASSIGN_FORM_SUBMISSION: 'Form Submitted',\n    ASSIGN_FORM_NOTIFICATION_MAIL: 'Form Assigned',\n    MULTIPLE_APPROVAL_MAIL: 'Team Approval'\n};\nconst { useClickOutsideState } = Hooks;\nconst entryFilterer = entryFiltererGenerator('workflow');\nconst StatusPill = styled.div`\n${({ color })=>{\n    if (!color) return null;\n    return css`\n      color: ${color};\n      background-color: ${rgba(color, 0.2)};\n\n      &:hover {\n        border: 1px solid ${color};\n        box-shadow: 0 0 0 1px ${rgba(color, 0.2)};\n      }\n  `;\n}}\n`;\nconst StatusText = styled.div`\n${({ color })=>{\n    const statusColor = color || '#5E74E6';\n    const backgroundColor = rgba(statusColor, 0.20);\n    const textColor = readableColor(backgroundColor, lighten(0.2, statusColor), statusColor, false);\n    const borderColor = readableColor(backgroundColor, color, darken(0.2, statusColor), false);\n    return css`\n      color: ${textColor};\n      border-color: ${borderColor};\n      background-color: ${backgroundColor};\n  `;\n}}\n`;\nconst WorkflowStatus = ({ isFormOwner, showTaskStatus, submission: { id: submissionID, tasks = null, workflowStatus, workflowStatusDetails: { showOutcome = false, buttonColor: color = '' } = {} }, onClick, showPopover, thread, setSubmission })=>{\n    const isCustomOutcome = showOutcome && !!color;\n    const renderPill = ()=>{\n        const list = useMemo(()=>{\n            var _tasks_filter;\n            const tasksConverted = tasks === null || tasks === void 0 ? void 0 : (_tasks_filter = tasks.filter((task)=>task.taskName !== 'Merge Point')) === null || _tasks_filter === void 0 ? void 0 : _tasks_filter.map(convertTasks);\n            const entriesFiltered = thread === null || thread === void 0 ? void 0 : thread.filter(entryFilterer);\n            return [].concat(tasksConverted, entriesFiltered).filter((e)=>!!e);\n        }, [\n            thread,\n            tasks\n        ]);\n        const status = WORKFLOW_STATUS[workflowStatus.toUpperCase()] || workflowStatus;\n        const className = workflowStatus === null || workflowStatus === void 0 ? void 0 : workflowStatus.toLowerCase();\n        const wrapperRef = useRef();\n        const popoverRef = useRef();\n        const [isPopoverVisible, setPopoverVisibility] = useClickOutsideState(false, [\n            wrapperRef,\n            popoverRef\n        ]);\n        const shouldListRender = showPopover && (list === null || list === void 0 ? void 0 : list.length);\n        const handleClick = useCallback(async (e)=>{\n            if (typeof setSubmission === 'function') await setSubmission(e);\n            if (typeof onClick === 'function') onClick(e);\n            if (shouldListRender) setPopoverVisibility(!isPopoverVisible);\n        }, [\n            onClick,\n            isPopoverVisible,\n            shouldListRender\n        ]);\n        return /*#__PURE__*/ _jsxs(Tethered, {\n            ref: popoverRef,\n            targetRef: wrapperRef,\n            style: {\n                zIndex: 200,\n                display: `${isPopoverVisible ? 'block' : 'none'}`,\n                pointerEvents: `${isPopoverVisible ? 'auto' : 'none'}`\n            },\n            attachment: \"top left\",\n            targetAttachment: \"bottom left\",\n            constraints: [\n                {\n                    to: 'window',\n                    attachment: 'together',\n                    pin: true\n                }\n            ],\n            children: [\n                /*#__PURE__*/ _jsx(StatusPill, {\n                    ref: wrapperRef,\n                    className: classnames('workflowStatus', className, {\n                        hasColor: isCustomOutcome\n                    }),\n                    onClick: (e)=>e.stopPropagation(),\n                    onMouseDown: handleClick,\n                    \"aria-hidden\": \"true\",\n                    color: isCustomOutcome ? color : null,\n                    children: /*#__PURE__*/ _jsx(\"span\", {\n                        children: isCustomOutcome ? status : t(status)\n                    })\n                }),\n                shouldListRender ? /*#__PURE__*/ _jsxs(\"div\", {\n                    ref: popoverRef,\n                    className: classnames('jfMenu', 'forWorkflowStatus', 'isDark', {\n                        isVisible: isPopoverVisible\n                    }),\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"header\",\n                            children: /*#__PURE__*/ _jsx(\"div\", {\n                                className: classnames('header-text', className),\n                                style: false && isCustomOutcome ? {\n                                    backgroundColor: color,\n                                    color: readableColor(color, '#000', '#fff', false)\n                                } : {},\n                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                    children: `Status: ${status}`\n                                })\n                            })\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"list\",\n                            children: list === null || list === void 0 ? void 0 : list.map(({ actionType, actionDetails, user: userRaw }, index)=>{\n                                var _actionDetails_type, _this, _this1;\n                                const entryType = actionType.toLowerCase();\n                                const EntryComp = EntryTypes[entryType];\n                                const assigneeUser = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.assigneeUser;\n                                const assigneeEmail = actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.assigneeEmail;\n                                if (!EntryComp) return null;\n                                const user = (EntryComp === null || EntryComp === void 0 ? void 0 : EntryComp.user) ? EntryComp.user(actionDetails, userRaw) : userRaw;\n                                const actionSubType = actionDetails === null || actionDetails === void 0 ? void 0 : (_actionDetails_type = actionDetails.type) === null || _actionDetails_type === void 0 ? void 0 : _actionDetails_type.toLowerCase();\n                                const isCustomAction = actionType === 'APPROVE_REJECT' && actionSubType === 'custom';\n                                const getAssignFormText = actionType === 'MAIL' && (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.reason) === 'ASSIGN_FORM_NOTIFICATION_MAIL' ? actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.reason : undefined;\n                                const userName = (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.email) || (assigneeUser === null || assigneeUser === void 0 ? void 0 : assigneeUser.name) || assigneeEmail;\n                                const statusText = (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.team) ? TEAM_APPROVAL_STATUS_TEXT[(_this = (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.text) || getAssignFormText || actionSubType || actionType) === null || _this === void 0 ? void 0 : _this.toUpperCase()] || (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.text) : statusTexts[(_this1 = (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.text) || getAssignFormText || actionSubType || actionType) === null || _this1 === void 0 ? void 0 : _this1.toUpperCase()] || (actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.text);\n                                const isTeamApprovalAction = isTeamApproval(actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.subType, actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.team) && (user === null || user === void 0 ? void 0 : user.team);\n                                // if (!user) return null;\n                                return /*#__PURE__*/ _jsxs(\"div\", {\n                                    // key={threadID}\n                                    className: \"list-item\",\n                                    children: [\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"list-item-no\",\n                                            children: [\n                                                index + 1,\n                                                \".\"\n                                            ]\n                                        }),\n                                        user && !isTeamApprovalAction ? /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"list-item-avatar\",\n                                            children: /*#__PURE__*/ _jsx(ThreadAvatar, {\n                                                user: user,\n                                                className: classnames(entryType, actionSubType, {\n                                                    isSystem: user === null || user === void 0 ? void 0 : user.isSystem\n                                                }),\n                                                assigneeEmail: assigneeEmail\n                                            })\n                                        }) : null,\n                                        isTeamApprovalAction && /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"list-item-avatar\",\n                                            children: /*#__PURE__*/ _jsx(TeamImageWithWrapper, {\n                                                customClass: \"jfAvatar multiple_approval_mail isSystem\",\n                                                team: actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.team\n                                            })\n                                        }),\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"list-item-user\",\n                                            children: [\n                                                userName ? /*#__PURE__*/ _jsx(\"div\", {\n                                                    className: \"list-item-user-name\",\n                                                    children: userName\n                                                }) : null,\n                                                /*#__PURE__*/ _jsx(\"div\", {\n                                                    className: \"list-item-user-email\",\n                                                    children: EntryComp.PopoverDescription ? /*#__PURE__*/ _jsx(EntryComp.PopoverDescription, {\n                                                        actionDetails: actionDetails\n                                                    }) : false && (user === null || user === void 0 ? void 0 : user.name) && (user === null || user === void 0 ? void 0 : user.email) ? user === null || user === void 0 ? void 0 : user.email : null\n                                                })\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"list-item-outcome\",\n                                            children: /*#__PURE__*/ _jsx(StatusText, {\n                                                // TODO: Make it Styled Component, and check readability then lighten or darken\n                                                className: classnames('list-item-outcome-badge', {\n                                                    [actionSubType || entryType]: !isCustomAction\n                                                } || {\n                                                    workflow: user === null || user === void 0 ? void 0 : user.isSystem\n                                                }),\n                                                color: isCustomAction ? actionDetails === null || actionDetails === void 0 ? void 0 : actionDetails.buttonColor : null,\n                                                title: statusText,\n                                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                                    children: statusText\n                                                })\n                                            })\n                                        })\n                                    ]\n                                });\n                            })\n                        })\n                    ]\n                }) : null\n            ]\n        }, submissionID);\n    };\n    return workflowStatus && WORKFLOW_STATUS[workflowStatus.toUpperCase()] !== WORKFLOW_STATUS.NOT_STARTED && (isFormOwner || showTaskStatus) ? renderPill() : null;\n};\nWorkflowStatus.defaultProps = {\n    showPopover: true,\n    onClick: (f)=>f,\n    setSubmission: (f)=>f,\n    thread: null\n};\nWorkflowStatus.propTypes = {\n    isFormOwner: bool.isRequired,\n    showTaskStatus: bool.isRequired,\n    submission: shape({}).isRequired,\n    thread: arrayOf(shape()),\n    showPopover: bool,\n    setSubmission: null,\n    onClick: func\n};\nexport default WorkflowStatus;\n","/* eslint-disable max-len */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport { rgba } from 'polished';\nimport { arrayOf, shape, string, func, bool } from 'prop-types';\nimport { useThread } from '../contexts';\nimport ThreadAvatar from '../components/ThreadAvatar';\nconst Avatar = styled.img`\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  position: relative;\n  z-index: 1;\n  transition: margin-left 300ms cubic-bezier(.79,0,.15,1);\n\n  &:hover {\n    z-index: 2;\n  }\n`;\nconst Text = styled.span``;\nconst Toggle = styled.div`\n  display: inline-flex;\n  align-items: center;\n  padding: 3px 6px;\n  margin: -3px -6px;\n  border-radius: 4px;\n  cursor: pointer;\n\n  ${Text} {\n    color: #6A6E8F;\n    font-size: 13px;\n    line-height: 20px;\n    margin-left: 6px;\n  }\n\n  ${({ expanded })=>expanded ? '&,' : ''}\n  &:hover {\n    background-color: ${rgba('#D5DAE8', 0.40)};\n\n    ${Text} {\n      color: #121C48;\n    }\n\n    &::after{\n      content:'';\n      background-image: url(\"data:image/svg+xml,%3Csvg width='8' height='5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.686 1.05L4 3.558 1.316 1.05a.188.188 0 00-.26.27L3.87 3.95a.189.189 0 00.256 0L6.94 1.324a.189.189 0 00.005-.27.187.187 0 00-.26-.003z' fill='%232B3245' stroke='%234573E3' stroke-width='1.5'/%3E%3C/svg%3E\");\n      font-family: 'Circular', sans-serif;\n      font-weight: 500;\n      width: 8px;\n      height: 5px;\n      margin-left: 12px;\n      transform: scaleY(${({ expanded })=>expanded ? -1 : 1});\n    }\n  }\n\n  ${Avatar} + ${Avatar} {\n    margin-left: -4px;\n  }\n`;\nconst SubThreadToggle = ({ entries, users, expanded, style, className, onClick })=>{\n    const { subThreads } = useThread();\n    if (!subThreads || !(entries === null || entries === void 0 ? void 0 : entries.length)) return null;\n    return /*#__PURE__*/ _jsxs(Toggle, {\n        onClick: onClick,\n        expanded: expanded,\n        className: classNames('subThreadToggle', className),\n        style: style,\n        role: \"button\",\n        children: [\n            users.map((user)=>/*#__PURE__*/ _jsx(ThreadAvatar, {\n                    user: user\n                })),\n            /*#__PURE__*/ _jsx(Text, {\n                children: `${entries.length} Repl${entries.length === 1 ? 'y' : 'ies'}`\n            })\n        ]\n    });\n};\nSubThreadToggle.propTypes = {\n    entries: arrayOf(shape({})).isRequired,\n    users: arrayOf(shape({\n        name: string,\n        username: string,\n        email: string,\n        avatarUrl: string\n    })).isRequired,\n    expanded: bool.isRequired,\n    style: shape({}),\n    className: string,\n    onClick: func.isRequired\n};\nSubThreadToggle.defaultProps = {\n    style: {},\n    className: ''\n};\nexport default SubThreadToggle;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string, object } from 'prop-types';\nimport Styled from 'styled-components';\nimport { SVGIcon } from '@jotforminc/icon-selector';\nimport { ICON_SIZES } from './constants';\nimport { getIconInformationForPortalItem } from '../utils';\nconst ScIconRenderer = Styled.div`\n  margin: 12px;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  min-height: 32px;\n  border-radius: 4px;\n\n  ${({ backgroundColor })=>backgroundColor ? `background-color: ${backgroundColor};` : ''}\n\n  & > img {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n  }\n\n  * > img {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px\n  }\n\n  * > svg.injected-svg {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    padding: 5px;\n  }\n\n  ${({ iconSize })=>iconSize === ICON_SIZES.SMALL ? `\n    margin: 0 8px 0 0;\n    width: 20px;\n    height: 20px;\n    min-width: 20px;\n    min-height: 20px;\n    border-radius: 4px;\n  ` : ''}\n\n`;\nconst IconRenderer = ({ titleForAlt = '', icon = {}, iconSize: initialIconSize = ICON_SIZES.MEDIUM })=>{\n    const { isSvgIcon, url, iconColor, finalUrl, alt, svgStyleProps, iconSize } = getIconInformationForPortalItem(titleForAlt, icon, initialIconSize);\n    return /*#__PURE__*/ _jsx(ScIconRenderer, _object_spread_props(_object_spread({}, svgStyleProps), {\n        iconSize: iconSize,\n        className: \"itemLogo\",\n        children: isSvgIcon ? /*#__PURE__*/ _jsx(SVGIcon, {\n            url: url,\n            iconColor: iconColor\n        }) : /*#__PURE__*/ _jsx(\"img\", {\n            src: finalUrl,\n            title: alt,\n            alt: alt\n        })\n    }));\n};\nIconRenderer.propTypes = {\n    titleForAlt: string,\n    icon: object,\n    iconSize: string\n};\nexport default IconRenderer;\n","/* eslint-disable max-len */ /* eslint-disable max-lines */ import styled from 'styled-components';\nexport const commonStyles = `\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size: 16px;\n`;\nconst colors = {\n    white: '#ffffff',\n    black: '#2C3345',\n    gray: '#EDEDF4',\n    darkGray: '#8583A9',\n    blue: '#4277FF',\n    green: '#01BD6F',\n    red: '#f90321'\n};\nconst onMobile = 'screen and (max-width: 480px)';\nconst onTablet = 'screen and (min-width: 480.01px) and (max-width: 722px)';\nconst wBoxPadding = 2;\nexport const ScWrapper = styled.div`\n  * { box-sizing: border-box; }\n  ${commonStyles}\n  color: #2c3345;\n\n  ${({ opensInModal })=>opensInModal ? `\n    padding: ${wBoxPadding}rem !important;\n\n    ${onMobile}{\n      padding: ${wBoxPadding * 0.5}rem !important;\n    }\n    ` : ''}\n\n  &,\n  .wBox {\n    position: relative;\n    // height: 100% ;\n    width: 100%;\n  }\n\n  .wBox-isError {\n    min-height: 390px;\n  }\n\n  .wBox-upper {\n    // padding: 0 .75em;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    align-content: flex-end;\n  }\n\n  .wBox-col-1 {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    padding: 0 .75rem;\n  }\n\n  .titleContainer {\n    margin: 0 .75rem 0 0;\n  }\n\n\n  .section {\n    position: relative;\n    padding-top: 0;\n    padding-bottom: 0;\n\n    &:first-of-type{\n      padding-top: 0;\n    }\n\n    &:last-of-type{\n      padding-bottom: 0;\n    }\n\n    .section-ln + .section-ln { margin-top: 10px; }\n\n  }\n\n  .wBox + .wBox {\n    padding-top: 1.25em;\n    margin-top: 1.25em;\n  }\n\n  .wBox ~ .wBox,\n  .section ~ .section { border-top: 1px solid #eaebf2; }\n\n  .invite-app-icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backgroud: #ffffff;\n    border: 1px solid #C8CEED;\n    border-radius: 4px;\n    width: 32px;\n    height: 32px;\n    &.forSalesforce {\n      border: none;\n      background-color: #00A1E0;\n      width: 24px;\n      height: 24px;\n      padding: 4.5px;\n    }\n  }\n\n  .pill-container-with-icon {\n    display: flex;\n    align-items: center;\n    margin-left: 2px;\n  }\n\n  .sectionTitle {\n    color: #0A1551;\n    flex: 0 0 auto;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 24px;\n    letter-spacing: 0.12px;\n    margin: 0;\n\n    &-head {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n    }\n    .b { color: #0A1551; font-weight: 500; text-transform: uppercase; margin: 0 11px 0 0; line-height: 24px;  html[dir=\"rtl\"] & { margin: 0 0 0 11px;}}\n    .sub { font-size: .875em; font-weight: 400; margin: .375em 0 0 0; }\n\n    .invite-by-app-wrapper {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n\n  .section-ln {\n    display: flex; justify-content: space-between;\n    > div:first-child {\n      flex: 1;\n    }\n  }\n\n  .jsLine {\n    margin-top: 26px;\n    height:37px;\n    border-top: 1px solid rgb(238, 238, 238);\n  }\n\n  .link-section{\n\n    .section-ln{\n\n      &.section-link{\n        align-items: flex-start;\n\n        > * {\n          margin-left: 0.375rem;\n          margin-bottom: 10px;\n          position: relative;\n          &:first-child{ margin-left: 0 }\n\n          html[dir=\"rtl\"] & {\n            margin-left: 0;\n            margin-right: 0.375rem;\n          }\n        }\n\n        @media ${onMobile}, ${onTablet}{\n            flex-direction: column;\n            align-items: stretch;\n\n            > * {\n              margin-left: 0;\n            }\n        }\n\n        &.hasNewTab,\n        &.isBuilderQRShare {\n          flex-wrap: wrap;\n          justify-content: flex-end;\n\n          .linkBox{\n            flex: 1 0 100%;\n          }\n        }\n\n        &.relative {\n          position: relative\n        }\n\n        > .enterpriseOptionBox {\n          display: none;\n          position: absolute;\n          top: 50px;\n          left: 0;\n          margin: 0;\n        }\n\n        /* Show enterprise option on editing mode */\n        .isEditing + .enterpriseOptionBox {\n          display: block;\n        }\n      }\n\n      &.section-action{\n        margin-top: 0 !important;\n      }\n\n      .enterpriseOptionBox{ flex: 1 }\n    }\n\n    .sectionAction {\n      align-self: center;\n      margin-left: auto;\n\n      html[dir=\"rtl\"] & {\n        margin-left: 0;\n        margin-right: auto;\n      }\n\n      .forSettings {\n        color: #0075E3;\n\n        svg {\n          fill: currentColor;\n        }\n        \n        > span {\n          font-size: 14px;\n          line-height: 16px;\n          margin: 0 10px 0 4px;\n        }\n      }\n    }\n  }\n  .invite-section{\n    display: flex;\n    flex-direction: column;\n    color: #0A1551;\n\n    .plbx-ln { flex: 1; }\n\n    .animationContainer {\n      overflow: hidden;\n      transition: all 0.25s ease-out;\n    }\n\n    .section-ln-dropdown,\n    .assigneeMsg,\n    .section-action { opacity: 0; pointer-events: none; }\n\n    .section-ln-dropdown { display: flex; }\n\n    &:not(.isExpanded) {\n      .assigneeMsg{ flex: 0; }\n      .section-ln-dropdown { display: none; }\n\n    }\n\n    .assigneeMsg{ flex: 1; }\n\n    .invite-pill-email-container {\n      max-height: 72px;\n      overflow-y: auto;\n      overflow-x: hidden;\n\n      .section-ln-content-input:placeholder-shown{\n        text-overflow: ellipsis;\n      }\n    }\n\n\n    &.isExpanded{\n      &.hasText{\n        overflow: unset;\n      }\n\n      .plbx-ln { margin-bottom: 10px; }\n\n      .section-ln-dropdown,\n      .assigneeMsg,\n      .section-action{ opacity: 1; pointer-events: all; }\n    }\n\n    &:last-child { padding-top: 0; }\n\n    .invite-by-app {\n      width: 24px;\n      height: 24px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-right: 12px;\n      border-radius: 20px;\n      &:hover {\n        z-index: 9;\n      }\n    }\n  }\n\n  .section-action {\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: center;\n    justify-content: space-between;\n    &.forResources {\n      margin-top: 10px;\n    }\n    &.forSend{\n      margin-top: 12px;\n      @media ${onMobile} {\n        flex-direction: column;\n      }\n\n      button{\n        margin-left: 8px;\n\n        @media ${onMobile} {\n          margin-left: 0;\n          margin-bottom: 8px;\n        }\n\n        &:last-child{\n          margin-left: 0;\n        }\n      }\n    }\n  }\n\n  .forSuccess {\n    color: #fff;\n    text-align: right;\n    margin-left: auto;\n    position: absolute;\n    white-space: nowrap;\n    width: auto;\n    top: 100%;\n    border-radius:4px;\n    right: 0;\n    padding: 7px;\n    font-size: 13px;\n    background: #1C2843;\n    margin-top: 5px;\n    order: 3;\n\n    &-wrapper {\n      width: 100%;\n      position: absolute !important;\n      bottom: 0;\n      right: 0;\n    }\n  }\n\n  .actionMessage {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    line-height: 1.25;\n    flex: 1;\n\n\n    &:empty { padding: 0; }\n\n    .forError {\n      color: ${colors.red};\n      text-align: right;\n    }\n    .forExpirationInfo,\n    .forExpired {\n      color: #8d8fa8;\n      font-size: .875rem;\n      // margin-top: -.5rem;\n      margin-bottom: 7px;\n      span { text-decoration: underline; cursor: pointer; }\n    }\n\n    .forExpired { color: #f90321; }\n\n    .forGenerate {\n      font-size: 0.875em;\n      padding: .40rem .375rem;\n      border-left: 1px solid rgba(129, 130, 158, 0.14);\n      white-space: nowrap;\n      flex: 0 0 auto;\n      border:  0px;\n      align-items: center;\n      background-color: #fff;\n\n      span {\n        color: #6A6B92;\n      }\n\n      svg {\n        width: 12px;\n        margin: 0px 9px -1px 0px;\n      }\n    }\n  }\n\n  @media screen and (max-width: 850px) {\n    .linkV4 & .linkBox + .section-action {\n      flex-direction: column;\n      align-items: stretch;\n\n      > div { margin-bottom: 6px; }\n    }\n  }\n\n  /* LinkBox & second section specific styles */\n  .linkBox {\n    border-radius: 4px;\n    background-color: #F3F3FE;\n    color: #6F76A7;\n    height: 2.5rem;\n\n    .forNewLink {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-left: 1px solid #C8CEED;\n      border-radius: 0;\n      cursor: pointer;\n      width: 44px;\n\n      html[dir=\"rtl\"] & {\n        border-left: none;\n        border-right: 1px solid #DADAE5;\n      }\n\n      svg {\n        width: 20px;\n        height: 20px;\n        display: block;\n        fill: currentColor;\n      }\n    }\n\n    .forCreate {\n      border-left: 1px solid #D8DAE9;\n      white-space: nowrap;\n      padding: 0.75rem;\n\n      html[dir=\"rtl\"] & {\n        border-left: none;\n        border-right: 1px solid #D8DAE9;\n      }\n    }\n\n    .forEdit {\n      padding: 0 10px;\n      height: 100%;\n      flex: 0 0 auto;\n\n      svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n        fill: #626777;\n      }\n    }\n\n    .forReset {\n      background-color: #dfdfe8;\n      height: 100%;\n      width: 3em;\n      border-radius: 4px;\n\n      svg { width: 20px; height: 20px; display: block; margin: 0 auto; }\n    }\n\n    & > svg {\n      align-self: center;\n      margin: 0 0 0 10px;\n      width: 20px;\n      height: 20px;\n      flex: 0 0 auto;\n\n      html[dir=\"rtl\"] & {\n        margin: 0 10px 0 0;\n      }\n    }\n  }\n\n  .linkItself {\n    padding: 12px;\n    font-size: 14px;\n    line-height: 16px;\n    border-radius: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 1rem;\n\n    html[dir=\"rtl\"] & {\n      text-align: right;\n    }\n  }\n\n  .customLink-wr { align-items: center; }\n  .customLink-pre { max-width: 350px; padding: .75rem 0 .75rem .5rem; line-height: 1.125rem; color: rgba(44, 51, 69, .7); overflow:hidden; text-overflow:ellipsis; }\n  .customLink-input input {\n    font-size: 1em;\n    width: 100%;\n    border: 0;\n    margin: 0;\n    display: block;\n    padding: 0;\n    background: transparent;\n    color: #2c3345;\n\n    &:focus { outline: 0; }\n  }\n\n  .sepButtonShell { background-color: #fff; padding-left: .75em; position: relative; }\n  .sepButtonShell:before { content: \"\"; display: block; position: absolute; height: 100%; left: 0; width: .25em; background-color: #dfdfe8; border-radius: 0 4px 4px 0; }\n  .sepButtonShell.fa { align-self: stretch; }\n\n  .customLink-wr .forApply { position: relative; height: 100%; }\n\n  /* Avatar list & first section specific styles */\n  .inviteTop { color: #2c3345; align-items: center; }\n  .avatarList { margin-left: auto; cursor: pointer; display: flex; align-items: center; }\n  .avatarText {\n    padding: .375em .75em; display: inline-block;\n    color: #6C73A8; font-size: .875em;\n  }\n  .avatarHolder {\n    display: inline-block;\n    vertical-align: top;\n    margin-left: -8px;\n    line-height: 28px;\n    font-size: .875em;\n    border: 2px solid #fff;\n    background-color: #e5e6e8;\n\n    &.forPlus {\n      width: 32px; height: 32px;\n      border-radius: 50%;\n      text-align: center;\n    }\n  }\n\n  .domainDd {\n    position: relative;\n    padding: .25rem 0;\n\n    label { padding: .375rem 0; font-size: .875em; display: block; }\n    button { width: 100%; text-align: left; }\n  }\n\n  /* Invite part & third section specific styles */\n  .csvPartToggler.bare {\n    width: 32px;\n    height: 32px;\n    background-color: #DADEF3;\n    border-color: #DADEF3;\n\n    svg {\n      color: #343C6A;\n      width: 16px;\n      height: 16px;\n    }\n\n    &:hover {\n      background-color: #C8CEED;\n      border-color: #C8CEED;\n    } \n  }\n\n  .uploadBox {\n    position: relative;\n    overflow: hidden;\n    width: 85%;\n    margin: -.625rem 0;\n    padding: .625rem 0;\n\n    input[type=file] {\n      position: absolute;\n        width: 100%; height: 100%;\n        top: 0; left: 0;\n        z-index: 2;\n      opacity: 0;\n      cursor: pointer;\n      padding-left: 100%;\n    }\n  }\n\n  .plbx-ln.plbx-ln {\n    margin-bottom: 4px;\n    flex-direction: column;\n    margin-top: 10px;\n  }\n  .plbx-wr {\n    cursor: text;\n\n    display: flex;\n    background-color: rgb(255, 255, 255);\n    border-radius: 4px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: rgb(216, 218, 233);\n    align-items: center;\n\n    position: relative;\n\n    > svg {\n      width: 20px;\n      margin: 11px;\n    }\n\n    > div {\n      flex: 1;\n      border: none;\n      border-radius: 0;\n      background: none;\n    }\n\n    .section-ln-dropdown {\n      padding: 0 8px;\n      border-radius: 0;\n\n      .dd-s {\n        svg path {\n          stroke: #2C3345;\n        }\n      }\n    }\n\n    input:not([type='checkbox']) {\n      display: inline-block;\n      font-size: 14px;\n      line-height: 20px;\n      padding: 8px;\n      width: 100%;\n      background: transparent;\n      border: 0;\n      text-overflow: ellipsis;\n    }\n    input:not([type='checkbox']):focus { outline: 0; }\n\n    .pill + input { max-width: 150px; }\n\n    .pill {\n      line-height: 1.15;\n      border-radius: 1rem;\n      display: inline-block;\n      margin: 2px 0 2px 6px;\n      display: inline-flex;\n      align-items: center;\n      padding: 5px 12px;\n      background-color: #F3F3FE;\n      cursor: default;\n\n      &[data-valid=false] { background-color: #fc8291; color: #fff; }\n      &[data-valid=false] svg { fill: #fff; }\n      &[data-valid=false] input { color: #fff; }\n\n      &[data-valid=false] .pill-icon {\n        svg {\n          path {\n            fill: #FA4259;\n          }\n        }\n      }\n\n      input {\n        padding: 0;\n      }\n\n      &-icon {\n        svg {\n          display: block;\n          width: .75rem;\n          height: .75rem;\n          margin: 2px 6px 0px -2px;\n\n          html[dir=\"rtl\"] & {\n            margin: 2px -2px 0px 6px;\n          }\n        }\n      }\n\n      &-remove {\n        width: 0;\n        opacity: 0;\n        margin-left: .75em;\n        margin-right: -.625em;\n        overflow: hidden;\n        cursor: pointer;\n        order: 9;\n\n        svg {\n          min-width: 12px;\n          display: block;\n          width: .75em;\n          height: .75em;\n          fill: #81829E;\n        }\n      }\n\n      &:hover {\n\n        .pill-text {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          position: relative;\n          display: inline-block;\n          width: calc(100% - (.75em + .75em));\n\n          html[dir=\"rtl\"] & {\n            margin-left: -.75em;\n          }\n        }\n\n        .pill-remove {\n          width: 12px;\n          opacity: .5;\n          margin-left: .75em;\n          margin-right: -.625em;\n          position: relative;\n\n          html[dir=\"rtl\"] & {\n            margin-right: 0.75em;\n            margin-left: -0.625em;\n          }\n\n          &:hover {\n            opacity: 1;\n          }\n        }\n\n      }\n\n      &:not([data-valid=false]){\n        input {\n          padding: 0;\n        }\n      }\n\n      &:not([data-valid=false]):hover {\n        background-color: #d5e5fa;\n        transition: .3s;\n      }\n    }\n  }\n\n  .invalidEmailMsg { font-size: .875em; color: #f90321; margin-top: .5em; font-weight: 500; }\n\n  .invite-prefill-btn {\n    margin-left: 10px;\n    border: none;\n    border-radius: 4px;\n    background-color: rgba(200, 206, 237, 0.56);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 10px;\n    font-size: 14px;\n    white-space: nowrap;\n    cursor: pointer;\n    svg {\n      height: 20px;\n    }\n\n    &.isEdit {\n      background-color: #0099FF;\n      color: #fff;\n    }\n  }\n\n  .section-prefill {\n    min-width: 0;\n    border-color: #C8CEED;\n\n    .pill {\n      max-width: 95%;\n      &-text {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      &:hover .pill-remove {\n        min-width: 12px;\n      }\n    }\n\n    span:not(.dd-t) {\n      font-size: 14px;\n      line-height: 16px;\n    }\n  }\n\n  .section-invite-by-app-container {\n    display flex;\n    align-items: center;\n    gap: 12px;\n    align-self: stretch;\n\n    .dropdownButtonContainer{\n      width: 8rem;\n      z-index: 1;\n\n      &-selected {\n        border-radius: 4px 4px 0 0;\n      }\n    }\n\n    li.i div[data-selected=true] {\n      background-color: #EDF8FF;\n    }\n\n    li.i:hover div {\n      background-color: #F3F3FE;\n    }\n\n    .popoverForSelectedApp{\n      z-index:2;\n      width: 8rem;\n      margin-top: -1px !important;\n\n      > ul {\n        border-color: #C8CEED;\n        box-shadow: none;\n        border-radius: 0 0 4px 4px;\n      }\n    }\n\n    .invite-by-app-input {\n      display: flex;\n      height: 40px;\n      padding: 4px 0 4px 10px;\n      align-items: center;\n      gap: 8px;\n      flex: 1 0 0;\n      border: 1px solid #C8CEED;\n      border-radius: 4px;\n\n      &-selected {\n        border-radius: 4px 4px 0 0;\n      }\n\n      &:not(.invite-by-app-input-selected){\n        .invite-pill-email-container {\n          overflow: hidden;\n  \n          .pill {\n            max-width: 151px;\n            .pill-remove {\n              display: none;\n            }\n\n            & + input {\n              max-width: 100px;\n            }\n            &:hover {\n              width: auto;\n              .pill-text {\n                width: auto;\n                margin-right: 0;\n              }\n              .pill-remove {\n                display: none;\n              }\n            } \n          }\n        }\n      }\n    }\n\n    .emailInput-wrapper {\n      height: 40px;\n      display: flex;\n      flex-direction: col;\n      align-items: center;\n      min-width: 0;\n    }\n\n    .emailInput-container {\n      padding: 0;\n      height: auto;\n    }\n\n    .invite-pill-email-container {\n      max-height: 32px;\n      width: 100%;\n\n      .pill {\n        animation-name: fade-in-top;\n        animation-duration: 500ms;\n        animation-fill-mode: forwards;\n      }\n    }\n\n    .emailInput-input {\n      max-height: 32px;\n    }\n\n    .custom-user-list-popover {\n      height: 266px;\n    }\n\n    .section-ln-dropdown {\n      display: flex;\n      height: 32px;\n      padding: 0 8px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 4px;\n    }\n  }\n\n  @media screen and (max-width: 650px) {\n    .section-prefill-container {\n      flex-direction: column;\n      color: #0A1551;\n    }\n    .section-prefill { width: 100%; }\n    .invite-prefill-btn {\n      width: 100%;\n      margin: 10px 0 0 0;\n      justify-content: center;\n    }\n    .section-invite-by-app-container {\n      position: relative;\n\n      .dropdownButtonContainer {\n        width: 100%;\n      }\n      .popoverForSelectedApp {\n        width: 100%;\n        left: 24px;\n        top: -104px;\n      }\n    }\n  }\n\n  .csvLimitError {\n    font-size: .875em;\n    color: #f90321;\n    line-height: 1.5rem;\n    border-radius: 2px;\n    border: 1px solid #f90321;\n    background-color: #fce5e7;\n    text-align: center;\n    padding: 7px 6% 9px;\n    margin-top: 1.5em;\n\n    a {\n      color: #f90321;\n    }\n  }\n\n  .assigneeMsg {\n    display: block;\n    padding: .625em .875em;\n    width: 100%;\n    font-size: 14px;\n    border-radius: 4px;\n    border: 1px solid #C8CEED;\n    height: 106px;\n    resize: none;\n    font-family:\"Circular\";\n    &:focus { outline: 0; border-color: #007aff; }\n  }\n\n  /* appWizards */\n  input, textarea { &::placeholder { color: #6C73A8 !important; font-weight: 400; } }\n  [data-popper-placement] .line { display: flex !important; }\n  [data-popper-placement] a.line { color: #2c3345 !important; }\n\n\n  .flxp { display: flex; }\n  .flw { flex: 1 1 auto; }\n  .fls { align-items: flex-start; }\n\n\n  .user-list-container {\n    height: 44px;\n    border: none;\n    padding-top: 4px;\n    padding-left: 0;\n    margin-bottom: 0;\n  }\n\n  .user-list-container-no-pill {\n    height: 44px;\n    border: none;\n    padding-top: 2px;\n    padding-left: 0px;\n  }\n\n  .user-list-popover {\n    width: inherit;\n    max-height: 600px;\n    overflow-y: scroll;\n    border-top: 3px solid;\n    border-color: #3F71F3;\n    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);\n    z-index: 9;\n\n    left: 0 !important;\n    right: 0 !important;\n    transform: none !important;\n    top: 100% !important;\n\n    .suggestion-list {\n      width: 100%;\n    }\n  }\n\n  .custom-user-list-popover {\n    width: calc(100% + 2px);\n    margin: 0 0 0 -1px !important;\n    height: 244px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    background: #ffffff;\n    border: 1px solid #C8CEED;\n    border-radius: 0px 0px 4px 4px;\n\n    left: 0 !important;\n    right: 0 !important;\n    transform: none !important;\n    top: 100% !important;\n\n    .suggestion-list {\n      width: 100%;\n    }\n\n    > div {\n      width: 100% !important;\n      height: auto !important;\n    }\n  }\n\n  .suggestion-email {\n    color: black;\n  }\n\n  .successCircle {\n  width: 18px; height: 18px; display: inline-block; vertical-align: top; margin: 3px 6px 0 -4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23FFF'/%3E%3Cpath stroke='%2301BD6F' stroke-linecap='round' stroke-width='2' d='M5 9.059l3.559 2.945L12.912 6'/%3E%3C/g%3E%3C/svg%3E%0A\") no-repeat top left;\n}\n\n@keyframes spin {\n  to {transform: rotate(360deg); }\n}\n\n.loadingCircle {\n  width: 20px; height: 20px; display: inline-block; vertical-align: top; margin: 2px 6px 0px -5px; animation: spin 1s infinite linear; position: relative;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cpath id='a' d='M8.571 8.571h11v11h-11z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Ccircle cx='9' cy='9' r='9' stroke='%23FFF' stroke-width='2' mask='url(%23b)'/%3E%3Ccircle cx='9' cy='9' r='9' stroke='%23FFF' stroke-width='2' opacity='.488'/%3E%3C/g%3E%3C/svg%3E%0A\") no-repeat top left;\n\n  &:before {\n    display: inline-block; content: \"\"; position: absolute; top: 0; left: 0; height: 100%; width: 100%; animation: spin .7s infinite ease-in-out reverse; opacity: .8;\n\n    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cpath id='a' d='M8.571 8.571h11v11h-11z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Ccircle cx='9' cy='9' r='9' stroke='%23FFF' stroke-width='2' mask='url(%23b)'/%3E%3Ccircle cx='9' cy='9' r='9' stroke='%23FFF' stroke-width='2' opacity='.488'/%3E%3C/g%3E%3C/svg%3E%0A\") no-repeat top left;\n  }\n}\n  @media screen and (max-width: 980px) {\n    .customLink-pre {\n      max-width: 240px;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      font-size: 14px;\n\n      input {\n        font-size: 14px;\n      }\n    }\n  }\n\n  @media screen and (max-width: 480px) {\n    .linkBox.isEditing { position: relative; margin-bottom: 3.5rem !important; }\n\n    // .section { padding: 1em .75em; }\n    .sectionTitle .dash { display: none; }\n    .sectionTitle .sub { margin-top: .25rem; display: block; }\n    .section-action { flex-direction: column-reverse; align-items: stretch; }\n    .section-action.forSend {\n      flex-direction: column;\n\n      .bare { align-self: flex-start; margin-bottom: 01em; padding: .5em 0; }\n    }\n    .actionMessage {\n      // padding: 1em 0 0;\n      flex-direction: column;\n\n      .forSuccess { text-align: left; margin-left: 0; margin-top: .5rem; }\n\n      .forGenerate [data-type=\"btn-label\"] { display: none; }\n      .forGenerate svg {\n        display: block;\n          height: 20px; width: 20px;\n          margin: 0 2px;\n      }\n\n    }\n    .inviteTop { flex-direction: column; align-items: flex-start; }\n    .inviteTop .sectionTitle { order: 2; margin: 1.5em 0 .5em; display: flex; align-items: center; }\n\n    .avatarList { order: 1; margin-left: 0; }\n    .avatarText { padding-left: 0; }\n\n    .wBox-upper { padding-right: 0; }\n\n    .wBox-isError {\n      min-height: 475px;\n    }\n\n    .plbx-wr {\n      & > div { max-height: max(36vh, 240px); overflow: auto; }\n      // input { padding-bottom: 36px; }\n      .pill + input { max-width: unset; }\n    }\n    input, textarea { &::placeholder { font-size: 12.5px; } }\n\n    .customLink-pre { max-width: 42vw; font-size: 12px; }\n\n    .sepButtonShell.fa { position: absolute; bottom: -3em; right: 0; }\n    .sepButtonShell.fa:before { display: none; }\n  }\n\n  .invite-section.forNewAssign {\n    .forSend {\n      margin-top: 32px;\n    }\n\n    &.isExpanded {\n      .border-t {\n        display: inline-block;\n        border-width: 0;\n        margin: 1rem 0;\n      }\n    }\n  }\n`;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React, { forwardRef, useMemo } from 'react';\nimport { bool, string } from 'prop-types';\nimport DatePicker from 'react-datepicker';\nimport Styled from 'styled-components';\nimport './styles/Datepicker.scss';\nconst StyledDiv = Styled.div`\n  * { box-sizing: border-box; }\n\n  &[data-errored=\"true\"] .react-datepicker-wrapper {\n    border: 1px solid #f90321;\n  }\n`;\nconst StyledDatePicker = /*#__PURE__*/ forwardRef((_param, ref)=>{\n    var { isErrored, ariaLabel } = _param, props = _object_without_properties(_param, [\n        \"isErrored\",\n        \"ariaLabel\"\n    ]);\n    const isBranding21 = true;\n    const customInput = useMemo(()=>ariaLabel !== '' ? /*#__PURE__*/ _jsx(\"input\", {\n            type: \"text\",\n            \"aria-label\": ariaLabel\n        }) : null, [\n        ariaLabel\n    ]);\n    return /*#__PURE__*/ _jsx(StyledDiv, {\n        className: `react-datepicker-styled${isBranding21 ? ' branding21' : ''}`,\n        \"data-errored\": isErrored,\n        children: /*#__PURE__*/ _jsx(DatePicker, _object_spread({\n            ref: ref,\n            showMonthDropdown: true,\n            showYearDropdown: true,\n            dropdownMode: \"select\"\n        }, customInput ? {\n            customInput\n        } : {}, props))\n    });\n});\nStyledDatePicker.propTypes = {\n    isErrored: bool,\n    ariaLabel: string\n};\nStyledDatePicker.defaultProps = {\n    isErrored: false,\n    ariaLabel: ''\n};\nexport default StyledDatePicker;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { forwardRef } from 'react';\nimport Styled from 'styled-components';\nimport { Dropdown as UIKitDropdown } from '@jotforminc/uikit';\nimport { shape, string, node } from 'prop-types';\nimport { IconChevronDown } from '@jotforminc/svg-icons';\n/* eslint-disable max-len */ const ScButton = Styled.button`\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: 2px;\n  border: 1px solid #d8dae9;\n  box-shadow: none;\n  font-size: 1em;\n  line-height: 1.25;\n  padding: 0;\n  cursor: pointer;\n\n  .dd-t { flex: 1 1 auto; padding: .5em .5em .5em .75em; color: #2c3345; }\n  .dd-s { padding: .4em; }\n  .dd-s svg {\n    display: block;\n    width: 14px;\n    height: 14px;\n    color: #81829e;\n    stroke: #81829e;\n  }\n\n  &:focus { outline: none; border-color: #bbb; }\n`;\nconst ScOptionList = Styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: .25em 0;\n  background-color: #fff;\n  border: 1px solid #d8dae9;\n  font-size: .875em;\n  border-radius: 0 0 2px 2px;\n  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.16);\n  max-height: 215px;\n  overflow-y: auto;\n\n  li.i div {\n    padding: .5rem .75rem;\n    user-select: none;\n    cursor: pointer;\n  }\n  li.i:hover div,\n  li.i.isHovering div {\n    background-color: rgba(0,0,0,.1);\n  }\n\n  li.i div[data-selected=true] { background-color: #e5e6e7; }\n\n  /* option group listing */\n  .og-l { list-style: none; padding: 0; margin: 0; text-indent: 1em; }\n  .og-t { font-weight: 700; padding: .5rem .75rem; }\n  .og + .og .og-t { padding: .75rem .75rem .5rem; border-top: 1px solid #d8dae9; margin-top: .5em; }\n`;\nconst DdButton = /*#__PURE__*/ forwardRef((_param, ref)=>{\n    var { option: { text, value } } = _param, props = _object_without_properties(_param, [\n        \"option\"\n    ]);\n    return /*#__PURE__*/ _jsxs(ScButton, _object_spread_props(_object_spread({\n        ref: ref,\n        \"data-value\": value,\n        type: \"button\"\n    }, props), {\n        children: [\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"dd-t\",\n                children: text\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"dd-s\",\n                children: /*#__PURE__*/ _jsx(IconChevronDown, {})\n            })\n        ]\n    }));\n});\nDdButton.propTypes = {\n    option: shape({\n        text: string,\n        value: string\n    }).isRequired\n};\nconst DdList = ({ children })=>/*#__PURE__*/ _jsx(ScOptionList, {\n        children: children\n    });\nDdList.propTypes = {\n    children: node.isRequired\n};\nconst Dropdown = (props)=>{\n    return /*#__PURE__*/ _jsx(UIKitDropdown, _object_spread({\n        ButtonRenderer: DdButton,\n        ContainerRenderer: DdList,\n        // OptionRenderer={({ option: { text, value }, isSelected }) => <div data-value={value} data-selected={isSelected}>{text}</div>}\n        OptionContainerRenderer: (pr)=>/*#__PURE__*/ _jsx(\"li\", _object_spread({\n                className: \"i\"\n            }, pr)),\n        GroupRenderer: (_param)=>{\n            var { text, children } = _param, p = _object_without_properties(_param, [\n                \"text\",\n                \"children\"\n            ]);\n            return /*#__PURE__*/ _jsxs(\"li\", _object_spread_props(_object_spread({\n                className: \"og\"\n            }, p), {\n                children: [\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"og-t\",\n                        children: text\n                    }),\n                    /*#__PURE__*/ _jsx(\"ul\", {\n                        className: \"og-l\",\n                        children: children\n                    })\n                ]\n            }));\n        }\n    }, props));\n};\nexport default Dropdown;\n","/* eslint-disable max-len */ import Styled from 'styled-components';\nexport const customFont = '-apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\n// '\"CircularStd\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\nexport const commonStyles = `\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-family: ${customFont};\n  font-size: 16px;\n`;\nexport const ScSettings = Styled.div`\n  ${commonStyles}\n  font-family:  \"Circular\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif;\n  color: #2c3345;\n  overflow-y: auto;\n\n  li { list-style: none; }\n\n  .content { \n    padding: 0 2.5em 1.5em; \n    max-height: 75vh;\n  }\n\n  .section { padding: 1.5em 0; }\n\n  .section + .section {\n    border-top: 1px solid #eaebf2;\n    .react-datepicker {\n      &__time-container {\n        & .react-datepicker__header {\n          display: none;\n        }\n     }\n      .react-datepicker {\n        &__time { \n          background: #ffffff;\n          & .react-datepicker__time-box {\n            width: 100%;\n          }\n          &-list {\n            height: calc(195px + (1.7rem / 2));\n            overflow-y: scroll;\n            &-item {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n              &:hover {\n              background: #eef3ff !important;\n              color: #2c3345;\n              }\n            }\n          }\n        }\n      } \n    }\n  }\n    \n  .section-title {\n    font-style: normal;\n    font-weight: bold;\n    font-size: 15px;\n    line-height: 19px;\n    display: flex;\n    align-items: center;\n    color: #141E46;\n    letter-spacing: 0.12px;\n    text-transform: uppercase;\n  }\n\n  .section-content {\n    padding: .75em 0 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .forExpDate > * { flex: 0 0 27% ; }\n  .forExpDate > button { flex: 1 1 auto; text-align: left; }\n  .forExpDate > div + div { margin: 0 .875em; }\n\n  .forExpDate {\n    input[type=text] {\n      height: 36px;\n      font-size: 14px;\n      border-radius: 2px;\n      border: solid 1px #d8dae9;\n      background-color: #ffffff;\n      font-family: ${customFont};\n      width: 100%;\n      padding: .5rem;\n      line-height: 1.125rem;\n      color: #2c3345;\n\n      &:focus { outline: 0; border-color: #007aff; }\n    }\n  }\n\n  .expiredMessage { color: #f90321; font-size: 14px; margin-top: 1em; }\n\n  @keyframes abartmadanbellietkendini {\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  .compDomain {\n    padding-top: .5em;\n    // animation: abartmadanbellietkendini .3s cubic-bezier(0.13, 0.89, 0.82, 1) .2s forwards;\n    // opacity: 0;\n    transform: scale(.95);\n    transform-origin: middle;\n\n    input {\n      font-size: .875em;\n      line-height: 1.125rem;\n      padding: .5rem;\n      border-radius: 2px;\n      border: 1px solid #d8dae9;\n      width: 100%;\n      max-width: 300px;\n    }\n\n    .compDomain-error { color: #f90321; font-size: 14px;}\n\n  }\n\n  li + li[aria-disabled=\"false\"] > div[data-value=\"ssoProtected\"] .o-label:after {\n    display: none;\n  }\n\n  [data-value=\"ssoProtected\"] .o-label:after {\n    content: \"\";\n    display: inline-block;\n    vertical-align: top;\n    width: 16px;\n    height: 24px;\n    margin-left: 4px;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%239699A2' d='M10.449 5.224h-.746V3.732C9.703 1.672 8.03 0 5.97 0 3.91 0 2.239 1.672 2.239 3.732v1.492h-.746C.672 5.224 0 5.896 0 6.717v7.464c0 .82.672 1.492 1.493 1.492h8.956c.821 0 1.493-.671 1.493-1.492V6.717c0-.82-.672-1.493-1.493-1.493zm-2.164 0H3.657V3.732c0-1.276 1.038-2.314 2.314-2.314s2.314 1.038 2.314 2.314v1.492z' opacity='.5'/%3E%3Cpath fill='%23FFF' d='M6.095 8.381c.842 0 1.524.682 1.524 1.524 0 .564-.306 1.056-.762 1.32v1.727H5.333v-1.728c-.455-.263-.762-.755-.762-1.32 0-.84.683-1.523 1.524-1.523z'/%3E%3C/g%3E%3C/svg%3E%0A\");\n    background-size: 12px 16px;\n    background-repeat: no-repeat;\n    background-position: right center;\n  }\n\n  @media screen and (max-width: 620px) {\n    .content { padding: 0 1.5rem 1.5rem; font-size: .875em; }\n    .forExpDate { flex-direction: column; }\n    .forExpDate > * { flex: 1 1 auto ; }\n    .forExpDate > div + div { margin: .875em 0; width: 100% }\n    .forExpDate {\n      > button, .react-datepicker-wrapper, .react-datepicker__input-container {\n        width: 200px;\n        max-width: 100%;\n      }\n    }\n  }\n`;\n","/* eslint-disable max-len */ import styled from 'styled-components';\nexport const ResourceButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #121C48;\n  font-size: 14px;\n  font-family: 'Circular', sans-serif;\n  font-weight: 500;\n  height: 28px;\n  padding: 0 10px;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n\n  background-color: transparent;\n  &:hover {\n    background-color: #F5F6F8;\n  }\n`;\nexport const ScAssignee = styled.div`\n  color: #2c3345;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: ${(p)=>p.hasSearch ? '0' : '0 0 1.5em'};\n\n  .ass-control {\n    width: 100%;\n    min-height: 56px;\n    position: relative;\n    top: 0; left: 0;\n    z-index: 1;\n    padding: 16px 32px;\n    align-items: center;\n    display: ${(p)=>p.hasSearch ? 'flex' : 'none'};\n  }\n\n  .ass-group {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .cb-search {\n    border: 1px solid #C8CEED;\n    border-radius: 4px;\n    padding: 7px 12px 7px 36px;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5071 11.4503C9.54213 12.212 8.32351 12.6666 6.9987 12.6666C3.86908 12.6666 1.33203 10.1296 1.33203 6.99998C1.33203 3.87037 3.86908 1.33331 6.9987 1.33331C10.1283 1.33331 12.6654 3.87037 12.6654 6.99998C12.6654 8.32479 12.2107 9.54341 11.449 10.5084C11.4561 10.5149 11.4632 10.5217 11.4701 10.5286L14.4701 13.5286C14.7305 13.7889 14.7305 14.211 14.4701 14.4714C14.2098 14.7317 13.7876 14.7317 13.5273 14.4714L10.5273 11.4714C10.5204 11.4645 10.5136 11.4574 10.5071 11.4503ZM11.332 6.99998C11.332 9.39321 9.39193 11.3333 6.9987 11.3333C4.60546 11.3333 2.66536 9.39321 2.66536 6.99998C2.66536 4.60675 4.60546 2.66665 6.9987 2.66665C9.39193 2.66665 11.332 4.60675 11.332 6.99998Z' fill='%236F76A7'/%3E%3C/svg%3E\");\n    background-size: 16px;\n    background-position: 8px center;\n    background-repeat: no-repeat;\n    font-size: .875em;\n    appearance: textfield;\n    height: 32px;\n    max-width: 232px;\n    width: 100%;\n    &::placeholder {\n      color: #979DC6;\n      font-weight: 400;\n    }\n  }\n\n  .acg-name { margin-right: .5em; font-weight: 400; line-height: 20px; color: #6F76A7; font-size: 14px; }\n  .acg-selLabel {\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 500;\n    padding: 7px 12px;\n    border-radius: 32px;\n    border: 1px solid #C8CEED;\n    color: #343C6A;\n    margin-right: 8px;\n    white-space: nowrap;\n\n    span { margin-right: 4px; }\n  }\n\n  .acg-unselect {\n    width: 14px;\n    height: 14px;\n    margin: -1px;\n    vertical-align: sub;\n    padding: 0;\n    border: 0;\n    outline: 0;\n\n    svg { \n      width: 14px;\n      height: 14px;\n      fill: currentColor;\n      color: #343C6A;\n    }\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  .ass-search {\n    border-radius: 2px;\n    border: 1px solid #E3E5F5;\n    font-size: .875em;\n    line-height: 1rem;\n    padding: .5em .75rem;\n    text-indent: 1.25em;\n    flex: 0 0 175px;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%238D8FA8' fill-rule='evenodd' stroke='%23D0D2E2' d='M1.975 7.5C1.975 4.467 4.38 2 7.338 2 10.293 2 12.7 4.467 12.7 7.5c0 3.032-2.406 5.5-5.362 5.5-2.958 0-5.363-2.468-5.363-5.5m14.482 8.646l-4.312-4.422c.95-1.138 1.53-2.612 1.53-4.224 0-3.584-2.843-6.5-6.338-6.5C3.844 1 1 3.916 1 7.5S3.843 14 7.338 14c1.571 0 3.008-.594 4.118-1.569l4.311 4.423c.09.09.211.146.346.146.269 0 .487-.224.487-.5 0-.138-.055-.263-.143-.354'/%3E%3C/svg%3E%0A\");\n    background-size: 18px;\n    background-repeat: no-repeat;\n    background-position: 8px center;\n    transition: background-color .15s ease;\n    -webkit-appearance: textfield;\n\n    &:focus {\n      outline: none;\n      border-color: #4573e3;\n      box-shadow: 0 0 0px 3px rgba(69, 114, 227, 0.25);\n    }\n  }\n\n  .asses { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 204px; padding-bottom: 16px; }\n\n  .ass-line {\n    display: flex;\n    align-items: center;\n    padding: 21px 32px;\n    position: relative;\n\n    &:before {\n      content: \"\";\n      display: inline-block;\n      position: absolute;\n      left: 1.5em;\n      right: 1.5em;\n      height: 1px;\n      top: 0;\n      background: #E3E5F5;\n    }\n  }\n\n  .ass-line:first-child:before {\n    display: ${(p)=>p.hasSearch ? 'inline-block' : 'none'};\n  }\n\n  .ass-line.isFresh:after {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: -150vw;\n    width: 150vw;\n    height: 100%;\n    z-index: 1;\n    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(24,50,26,0) 14%,rgba(84,180,92,0.65) 50%,rgba(24,50,26,0) 86%,rgba(0,0,0,0) 100%);\n    opacity: .3;\n    animation: restored 2 2s forwards cubic-bezier(.3,.71,.67,.58);\n    pointer-events: none;\n  }\n  .ass-line.isSelected .avatarHolder { box-shadow: 0 0 0 2px #fff; }\n\n  .ass-ch {\n    display: inline-flex;\n  }\n\n  @keyframes restored {\n    100% { left: 100vw; }\n  }\n\n  .ass-info {\n    font-size: .875em;\n    line-height: 1rem;\n    flex: 0 0 250px;\n    min-width: 0;\n    .ass-provider-logo {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      width: 18px;\n      height: 18px;\n      border-radius: 10px;\n    }\n  }\n  .ass-name {\n    display: flex;\n    gap: 4px;\n    color: #0A1551;\n    &-val {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n  .ass-email {\n    color: #6C73A8;\n    display: flex;\n    gap: 4px;\n    &-val {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .ass-body {\n    flex: 1 1 auto;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    padding: 0 .75em;\n  }\n\n  .ass-details {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .requestAccessInfo {\n    display: flex;\n    padding: 4px;\n    background: rgba(255, 182, 41, 0.1);\n    border-radius: 4px;\n    color: #F49200;\n    font-size: 12px;\n    cursor: default;\n  }\n\n  .requestAccessInfo svg {\n    width: 16px;\n    margin-right: 4px;\n    fill: #FFB629;\n  }\n\n  .requestAccessHover{\n    padding: 8px;\n    background: rgba(20, 30, 70, 0.9);\n    border-radius: 4px;\n    width: 210px;\n    color: white;\n    margin-top: 5px;\n    font-size: 12px;\n  }\n\n  .ass-activity {\n    color: #6C73A8;\n    font-size: .75em;\n    line-height: 1.5;\n    margin: 0 1em;\n    flex-basis: 120px;\n  }\n\n  .ass-allowed { font-size: .875em; }\n  \n  .submit-and-view-btn {font-size: 13px; min-width: 80px;white-space: nowrap; }\n\n  .forReminder { width: 23px; margin: 0 5px 0 auto; }\n  .forReminder svg { width: 23px; height: 20px; }\n  .forReminder:hover {\n    svg g > g, svg g > g + g circle { fill: #2c3345; }\n  }\n\n  .ass-actions { flex: 0 0 24px; height: 24px; }\n  .ass-actions div,\n  .ass-actions button {\n    width: 100%;\n    height: 100%;\n\n    svg { display: block; margin: 0 auto; width: 24px; fill: #6C73A8; }\n  }\n\n  .resendLink.bare { text-decoration: underline; font-size: 1em; color: #0075E3; }\n\n  @keyframes appearFromLeftToRight {\n    to { transform: translateX(0); opacity: 1; }\n  }\n  .emailSentStatus {\n    margin: -2px 0px;\n    font-size: .875em;\n    padding: 9px 0;\n    align-self: stretch;\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: center;\n    border-radius: 4px;\n    align-self: center;\n    color: #2c3345;\n\n    svg { margin: 0 4px; width: 33px; height: 22px; }\n    span, svg {\n      opacity: 0;\n      transform: translateX(-6px);\n      animation: appearFromLeftToRight .4s ease 1 .1s forwards;\n    }\n    span { animation-delay: .2s; }\n\n    &.isSuccess { background-color: #dff0e0; }\n    &.isError { color: #fff; background-color: #fc8291; }\n    &.isInfo { background-color: #ffedc8; }\n  }\n\n\n  .assList-wr .emptyList {\n    position: relative;\n    transform: none;\n    padding: 64px 0;\n  }\n\n  .emptyList {\n    padding: 0 1em;\n    color: #5c5b71;\n    text-align: center;\n    position: absolute;\n    width: 100%;\n    top: 40%;\n    transform: translateY(-40%);\n\n    p { margin: 0; }\n    svg { width: 120px; height: 120px; }\n  }\n  .emptyList-title {\n    font-weight: 700;\n    margin: 1.125em 0 .375em;\n    text-transform: uppercase;\n  }\n\n  @media screen and (max-width: 480px) {\n    padding: ${(p)=>p.hasSearch ? '0' : '0 0 1em'};\n    min-height: 0;\n\n    .ass-search { flex-basis: auto; order: -1; margin-bottom: .5em; }\n    .ass-control { position: relative; }\n    .ass-group { min-height: 2em; }\n    .ass-line { align-items: center; }\n    .ass-body { flex-direction: column; align-items: flex-start; padding-right: 1.5em; }\n    .ass-info { flex-basis: auto; margin-bottom: 0; width: 100%; }\n    .emailSentStatus { width: calc(100% + 40px); align-self: flex-start; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }\n    .acg-selLabel { white-space: wrap; }\n    .forReminder {\n      margin: 0;\n      position: absolute;\n      top: 1.25em;\n      right: 3.5em;\n    }\n  }\n\n  @media screen and (max-width: 650px) {\n    .ass-activity { display: none; }\n    .ass-details { justify-content: flex-end; }\n    .ass-info { flex-basis: auto; flex: 1 1 auto; margin-right: 12px; }\n    .ass-control { flex-direction: column; align-items: stretch; gap: 16px; }\n    .cb-search { max-width: none; }\n  }\n`;\nexport const ScPopoverMenu = styled.div`\n  border-radius: 4px;\n  border: 1px solid #C8CEED;\n  background-color: #fff;\n  font-size: .875em;\n  color: #0A1551;\n  padding: .25rem 0;\n  white-space: nowrap;\n\n  .line { padding: .5rem 1em; display: flex; align-items: center; cursor: pointer; margin: 0 !important; position: relative;}\n  .line:hover { background-color: #F3F3FE; }\n  a.line { color: #0A1551; text-decoration: none; }\n  .line-text { flex: 1 1 auto; }\n  .line-icon {\n    width: 20px;\n    height: 20px;\n    margin-right: .5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    html[dir=\"rtl\"] & {\n      margin-right: 0;\n      margin-left: .5rem;\n    }\n\n    svg { display: block; }\n\n    &.forViewSubm svg { width: 16px; height: 16px; }\n    &.forSendRemn svg { width: 16px; height: 16px; }\n    &.forSchRemn svg { width: 18px; height: 16px; margin-left: 1px; }\n    &.forRevoke svg { fill: #DC2626; width: 16px; height: 16px; }\n\n    &.forUpload svg { width: 16px; height: 16px; }\n    &.forDownload svg { width: 16px; height: 16px; margin: 0 auto; }\n  }\n\n  .line-icon.forDismiss {\n    width: 20px;\n    height: 20px;\n    fill: #252d5b;\n\n    svg { width: 20px; height: 20px; }\n  }\n\n  .line-icon.forRevoke ~ .line-text { color: #DC2626; }\n  .line-icon.forDismiss ~ .line-text { color: #252d5b; }\n`;\nexport const ScPopoverArrow = styled.div`\n  &, &:before, &:after {\n    width: 10px;\n    height: 10px;\n    position: absolute;\n  }\n\n  &:before {\n    content: \"\";\n    display: inline-block;\n    transform: rotate(45deg);\n    top: -5px; left: 0;\n    border-radius: 1px;\n    background: #C8CEED;\n    z-index: 1;\n  }\n  &:after {\n    content: \"\";\n    display: inline-block;\n    transform: rotate(45deg);\n    top: -3px; left: 0;\n    background: #fff;\n    z-index: 2;\n  }\n\n  [data-popper-placement=\"bottom-start\"] &:before,\n  [data-popper-placement=\"bottom-start\"] &:after { left: 3px; }\n\n  [data-popper-placement=\"top-start\"] & {\n    bottom: 4px;\n    &:before { top: -3px }\n    &:after { top: -5px }\n  }\n`;\n","/* eslint-disable max-len */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useMemo, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { arrayOf, func, shape, string, bool } from 'prop-types';\nimport { Hooks, Popover } from '@jotforminc/uikit';\nimport { useFuse } from '@jotforminc/hooks';\nimport { Option as OptionFC } from '@jotforminc/option-group';\nimport { t } from '@jotforminc/translation';\nimport { ScPopoverMenu, ScPopoverArrow } from '../sc/scAssigneeList';\n// import { useTranslatedTexts } from '../../helpers/hooks';\nconst padding = css`\n  padding: 16px 16px 16px 20px;\n`;\nconst Row = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: ${({ center })=>center ? 'center' : 'flex-start'};\n`;\nconst Option = styled(OptionFC)`\n  > div[class] {\n    margin-right: 20px;\n  }\n\n  > div:not([class]) {\n    flex: 1;\n\n    .o-label {\n      height: 32px;\n      padding: 7px 0;\n      border-radius: 4px;\n\n      display: flex;\n      align-items: center;\n\n      color: #141E46;\n    }\n  }\n`;\nconst OptionList = styled(Row)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  ${padding};\n\n  max-height: 180px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  ${Option} {\n    margin-bottom: 4px;\n    align-self: stretch;\n  }\n`;\nconst Header = styled(Row)`\n  justify-content: space-between;\n  border-bottom: 1px solid #E3E4EC;\n  ${padding};\n\n  align-items: center;\n`;\nconst Label = styled.div`\n  line-height: 18px;\n  color: #80829C;\n`;\nconst Search = styled.input.attrs(()=>({\n        placeholder: 'Search',\n        type: 'search',\n        autocomplete: 'off'\n    }))`\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n  border: 1px solid #C7C9DC;\n  border-radius: 4px;\n  padding-left: 32px;\n  padding-right: 16px;\n\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.683 15.171a.775.775 0 11-1.13 1.063l-2.262-2.404a.775.775 0 011.13-1.063l2.262 2.404zM6.588 14c3.639 0 6.589-3.134 6.589-7s-2.95-7-6.589-7C2.95 0 0 3.134 0 7s2.95 7 6.588 7zm0-2c2.6 0 4.706-2.239 4.706-5S9.187 2 6.588 2 1.882 4.239 1.882 7s2.107 5 4.706 5z' fill='${({ color })=>encodeURIComponent(color)}'/%3E%3C/svg%3E\");\n  background-position: 10px center;\n  background-repeat: no-repeat;\n\n  font-family: 'Circular', sans-serif;\n  font-weight: 500;\n\n  &,\n  &::placeholder {\n    color: ${({ color })=>encodeURIComponent(color)};\n  }\n`;\nSearch.defaultProps = {\n    color: '#141E46'\n};\nexport const Picker = styled.div`\n  display: flex;\n  align-items: center;\n  cursor: ${({ onClick })=>onClick ? 'pointer' : 'auto'};\n\n  &:before,\n  &:after {\n    content: '';\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n  }\n\n\n  ${({ onClick })=>onClick ? css`\n    &:after {\n      background-image: url(\"data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.418 4.63L5 1.547l3.58 3.086c.099.083.251.083.347-.006a.219.219 0 000-.326L5.17 1.062a.267.267 0 00-.34 0L1.078 4.295c-.104.096-.104.242-.007.332a.264.264 0 00.346.005z' fill='${({ color })=>encodeURIComponent(color)}' stroke='${({ color })=>encodeURIComponent(color)}' stroke-width='1.5'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 6px;\n      margin-left: 5px;\n      transform: scaleY(${({ expanded })=>expanded ? 1 : -1});\n      transition: transform 300ms cubic-bezier(.79,.14,.15,.86)\n    }\n  ` : ''}\n`;\nPicker.defaultProps = {\n    color: '#141E46'\n};\nconst Menu = styled(ScPopoverMenu)`\n  padding: 0;\n`;\nconst Container = styled.div`\n  position: relative;\n  font-size: ${({ size })=>size}px;\n\n  ${Picker} {\n    margin-left: 10px;\n  }\n`;\nContainer.defaultProps = {\n    size: 14\n};\nconst ResourcePicker = ({ // t,\nisMultiSelect, label, onChange, value, resources, style })=>{\n    const [search, setSearch] = useState('');\n    const menuRef = useRef();\n    const buttonRef = useRef();\n    // const translationFactory = useTranslatedTexts(t);\n    const [isExpanded, setIsExpanded] = Hooks.useClickOutsideState(false, [\n        buttonRef,\n        menuRef\n    ]);\n    const toggleExpansion = ()=>setIsExpanded(!isExpanded);\n    const options = useMemo(()=>resources.map((r)=>({\n                text: t(r.title),\n                value: r.id\n            })), [\n        resources\n    ]);\n    const filteredOptions = useFuse(options, search, [\n        'text'\n    ]);\n    const allValues = options.map((o)=>o.value);\n    const allSelected = value.length === 0 || value.length === allValues.length;\n    const handleSelectAll = ()=>{\n        if (allSelected) {\n            return onChange(allValues);\n        }\n        onChange([]);\n    };\n    const handleSelect = (id)=>()=>{\n            const values = allSelected ? allValues : value;\n            const selected = values.indexOf(id) > -1;\n            if (selected) {\n                return onChange(values.filter((v)=>v !== id));\n            }\n            return onChange([\n                ...values,\n                id\n            ]);\n        };\n    const text = useMemo(()=>{\n        var _options_find;\n        if (allSelected) return t('All Documents');\n        if (value.length === 1) return (_options_find = options.find((f)=>f.value === value[0])) === null || _options_find === void 0 ? void 0 : _options_find.text;\n        return `${value.length} Documents`;\n    }, [\n        allSelected,\n        value.length\n    ]);\n    const renderPickerContent = ()=>{\n        if (!isExpanded) return null;\n        return /*#__PURE__*/ _jsxs(Popover, {\n            ref: menuRef,\n            targetRef: buttonRef,\n            usePortal: true,\n            portalContainerSelector: '[data-sc=\"overlay\"]:last-child > div',\n            popoverOptions: {\n                placement: 'bottom-start'\n            },\n            style: {\n                width: 'auto',\n                maxWidth: 'calc(100% - 145px)',\n                minWidth: '250px',\n                marginTop: '5px'\n            },\n            children: [\n                /*#__PURE__*/ _jsx(ScPopoverArrow, {\n                    \"data-popper-arrow\": true\n                }),\n                /*#__PURE__*/ _jsxs(Menu, {\n                    children: [\n                        /*#__PURE__*/ _jsxs(Header, {\n                            children: [\n                                /*#__PURE__*/ _jsx(Option, {\n                                    isMultiSelect: isMultiSelect,\n                                    isSelected: allSelected,\n                                    option: {\n                                        text: t('Select All'),\n                                        value: 'all'\n                                    },\n                                    onClick: handleSelectAll\n                                }),\n                                options.length > 10 ? /*#__PURE__*/ _jsx(Search, {\n                                    onChange: (e)=>setSearch(e.target.value),\n                                    value: search\n                                }) : null\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsx(OptionList, {\n                            children: filteredOptions.map((opt)=>/*#__PURE__*/ _jsx(Option, {\n                                    option: _object_spread({}, opt),\n                                    isMultiSelect: isMultiSelect,\n                                    isSelected: allSelected || value.indexOf(opt.value) > -1,\n                                    onClick: handleSelect(opt.value)\n                                }, opt.value))\n                        })\n                    ]\n                })\n            ]\n        });\n    };\n    return /*#__PURE__*/ _jsx(Container, {\n        style: style,\n        children: /*#__PURE__*/ _jsxs(Row, {\n            center: true,\n            children: [\n                label ? /*#__PURE__*/ _jsx(Label, {\n                    children: label\n                }) : null,\n                /*#__PURE__*/ _jsx(Picker, {\n                    expanded: isExpanded,\n                    onClick: toggleExpansion,\n                    ref: buttonRef,\n                    icon: true,\n                    children: /*#__PURE__*/ _jsx(\"span\", {\n                        children: text\n                    })\n                }),\n                renderPickerContent()\n            ]\n        })\n    });\n};\nResourcePicker.propTypes = {\n    // t: func,\n    label: string,\n    onChange: func,\n    // recordEvent: func,\n    value: arrayOf(string),\n    style: shape({}),\n    resources: arrayOf(shape({})),\n    isMultiSelect: bool\n};\nResourcePicker.defaultProps = {\n    // t: text => text,\n    label: 'Sharing',\n    onChange: (f)=>f,\n    // recordEvent: f => f,\n    resources: [],\n    style: [],\n    value: [],\n    isMultiSelect: true\n};\nexport default ResourcePicker;\n","import Styled from 'styled-components';\nexport const ScEmailInput = Styled.label`\n  display: inline-block;\n  width: 100%;\n  font-size: 1em;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  padding: .5em;\n  cursor: text;\n\n  .pill {\n    color: #2c3345;\n    height: 28px;\n    border-radius: 15px;\n    background-color: #ebedf3;\n    display: inline-flex;\n    align-items: center;\n    padding: 0 .5em;\n    margin: 0 .375em .25em 0;\n    cursor: default;\n\n    &.hasBackgroundColor:not(.isBright) {\n      color: #fff;\n    }\n\n    &-remove {\n      width: 12px;\n      margin-left: .375em;\n      cursor: pointer;\n      order: 3;\n\n      svg {\n        display: block;\n        fill: currentColor;\n      }\n    }\n  }\n\n  .emailInput-input {\n    font-size: .875em;\n    padding: .5em;\n    border: 0;\n\n    &:focus { outline: 0; }\n  }\n`;\nexport const ScRemainingCount = Styled.div`\n  position: absolute;\n  bottom: 1.5px;\n  right: 1px;\n  color: #23283a;\n  background-color: #fff;\n  border-radius: 3px;\n  padding: 0 8px;\n`;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string } from 'prop-types';\nimport Styled, { css } from 'styled-components';\nconst ScAvatar = Styled.div`\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  ${(p)=>p.img === null ? css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    \n    text-transform: capitalize;\n    ` : css`\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: 50% 50%;\n    background-image: url(${p.img});\n\n    flex: 0 0 32px;\n    background-color: #b9bbd2;\n    font-size: 1em;\n    line-height: 32px;\n    color: #fff;\n  `}\n`;\nexport const AvatarHolder = ({ name, avatarUrl, email })=>{\n    return /*#__PURE__*/ _jsx(ScAvatar, {\n        className: \"avatarHolder\",\n        title: email,\n        img: avatarUrl && avatarUrl.replace('http://', 'https://') || null,\n        children: avatarUrl ? null : (name || email).slice(0, 1)\n    }, `avatarHolder_${email}`);\n};\nAvatarHolder.propTypes = {\n    name: string,\n    avatarUrl: string,\n    email: string\n};\nAvatarHolder.defaultProps = {\n    name: null,\n    email: '',\n    avatarUrl: ''\n};\n","/* eslint-disable max-len */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { bool, number, oneOfType, shape, string } from 'prop-types';\nimport React from 'react';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport { Tooltip } from '@jotforminc/tooltip';\nconst OptionWrapper = styled.div`\n  display: flex;\n  position: relative;\n\n  .dropdown-option-content {\n    display: flex;\n    padding: 16px;\n  }\n  \n  .radio {\n    position: absolute;\n    visibility: hidden;\n    opacity: 0;\n    width: 28px;\n    height: 28px;\n\n    &.isSelected + label {\n      &:before {\n        background-color: #4277FF;\n        background-image: url(\"data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M.9 4.44 4.73 8.9l7.64-7.64' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n        background-size: 12px 8px;\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n    }\n\n  }\n\n  label {\n    position: relative;\n    padding-left: 42px;\n    cursor: pointer;\n\n    &:before {\n      content: '';\n      border-radius: 100%;\n      width: 28px;\n      height: 28px;\n      background-color: #F2F3FB;\n      position: absolute;\n      left: 0;\n      top: 50%;\n      margin-top: -14px;\n    }\n\n    p {\n      margin: 0;\n      padding: 0;\n      color: #2D3344;\n      font-size: 15px;\n      font-weight: 700;\n      line-height: 20px;\n      margin-bottom: 4px;\n    }\n\n    span {\n      font-size: 15px;\n      line-height: 20px;\n      font-weight: 400;\n\n      span, b {\n        font-weight: 700;\n      }\n    }\n  }\n`;\nconst OptionRenderer = ({ option: { text, value, subText, disabled, tooltipMessage, isFirstOption }, isSelected })=>/*#__PURE__*/ _jsx(OptionWrapper, {\n        \"data-value\": value,\n        \"data-selected\": isSelected,\n        \"data-testid\": \"dropdown-option\",\n        className: \"jfTooltipNew-hoverTarget\",\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"dropdown-option-content\",\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"radio\",\n                    name: \"dropdown\",\n                    className: classNames('radio', {\n                        isSelected\n                    })\n                }),\n                /*#__PURE__*/ _jsxs(\"label\", {\n                    htmlFor: true,\n                    children: [\n                        /*#__PURE__*/ _jsx(\"p\", {\n                            className: \"label\",\n                            children: text\n                        }),\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"sublabel\",\n                            children: subText\n                        })\n                    ]\n                }),\n                disabled && tooltipMessage && /*#__PURE__*/ _jsx(Tooltip, {\n                    v2: true,\n                    align: \"Center\",\n                    attach: isFirstOption ? 'Bottom' : 'Top',\n                    style: {\n                        backgroundColor: '#141E46'\n                    },\n                    children: tooltipMessage\n                })\n            ]\n        })\n    });\nOptionRenderer.propTypes = {\n    option: shape({\n        text: string,\n        value: oneOfType([\n            string,\n            number\n        ]),\n        subText: string,\n        tooltipMessage: string,\n        isFirstOption: bool\n    }).isRequired,\n    isSelected: bool.isRequired\n};\nexport default OptionRenderer;\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { arrayOf, node } from 'prop-types';\nimport React, { forwardRef } from 'react';\nimport styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nconst Wrapper = styled.ul`\n  margin: 0;\n  padding: 0;\n  max-width: 460px;\n  width: 100%;\n  background-color: #FFF;\n  border-radius: 4px;\n  box-shadow: 0 1px 10px rgba(40, 51, 95, 0.3);\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n\n  @media screen and (max-height: 1000px) {\n    max-height: 30vh; \n  }\n\n  li {\n    width: 100%;\n    border-bottom: 1px solid #eaebf1;\n    display: flex;\n    flex-direction: column;\n\n    &[aria-disabled=\"true\"] .dropdown-option-content {\n      pointer-events: none;\n      label {\n        opacity: .25;\n      }\n    }\n  }\n`;\nconst ContainerRenderer = /*#__PURE__*/ forwardRef(({ children, extraElements }, ref)=>{\n    return /*#__PURE__*/ _jsxs(Wrapper, {\n        role: \"listbox\",\n        \"aria-label\": t('options'),\n        ref: ref,\n        children: [\n            children,\n            extraElements.map((element)=>/*#__PURE__*/ _jsx(\"li\", {\n                    role: \"option\",\n                    \"aria-selected\": \"false\",\n                    children: element\n                }, element === null || element === void 0 ? void 0 : element.outerHTML))\n        ]\n    });\n});\nContainerRenderer.propTypes = {\n    children: node.isRequired,\n    extraElements: arrayOf(node)\n};\nContainerRenderer.defaultProps = {\n    extraElements: []\n};\nexport default ContainerRenderer;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { forwardRef } from 'react';\nimport Styled from 'styled-components';\nimport { Dropdown as UIKitDropdown } from '@jotforminc/uikit';\nimport { IconChevronDown } from '@jotforminc/svg-icons';\nimport DropdownWithExtraElements from '@jotforminc/dropdown-with-extra-elements';\nimport { shape, string, node, bool, func, arrayOf, oneOfType } from 'prop-types';\nconst ScPopoverArrow = Styled.div`\n  &, &:before, &:after {\n    width: 10px;\n    height: 10px;\n    position: absolute;\n  }\n\n  [data-popper-placement=\"top-end\"] & {\n    bottom: -10px;\n\n    &:before { top: -4px; }\n    &:after { top: -6px; }\n  }\n\n  [data-popper-placement=\"bottom-end\"] & {\n    &:before { top: -6px; }\n    &:after { top: -4px; }\n  }\n\n  &:before, &:after {\n    content: \"\";\n    display: inline-block;\n    transform: rotate(45deg);\n    left: 0px;\n  }\n\n  &:before {\n    background: rgba(216, 218, 233, 0.5);\n    z-index: 1;\n    border-radius: 1px;\n  }\n\n  &:after {\n    background: #fff;\n    z-index: 2;\n  }\n`;\nconst ScButton = Styled.button`\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: 2px;\n  border: 0;\n  box-shadow: none;\n  font-size: 14px;\n  line-height: 1.25;\n  padding: 0;\n  cursor: pointer;\n\n  .dd-t { flex: 1 1 auto; padding: .5em 0; color: #0075E3; text-align: right; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }\n  .dd-s { padding: .4em; color: #0075E3; }\n  .dd-s svg { display: block; width: 12px; height: 12px; }\n  .dd-s svg path { stroke: #0075E3 !important}\n  .dd-i { display: block; color: #ff0000; font-size: .95em; }\n\n  &:focus { outline: none; border-color: #bbb; }\n`;\n/* eslint-disable max-len */ /* eslint-disable react/destructuring-assignment */ const ScOptionList = Styled.ul.attrs({\n    role: 'listbox'\n})`\n  list-style: none;\n  margin: 0;\n  padding: .25em 0;\n  background-color: #fff;\n  border: 1px solid #d8dae9;\n  font-size: .875em;\n  border-radius: 4px;\n  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.16);\n\n  .i {\n    padding: 1rem 1rem .875rem 1.5rem;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.25;\n  }\n  li {\n    display: flex;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n    &:before {\n      flex-shrink: 0;\n      content: \"\";\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: 16px;\n      position: relative;\n      display: inline-flex;\n      width: 24px;\n      height: 24px;\n      border-radius: 100%;\n      margin-left: 24px;\n      background-color: #E6E9EF;\n    }\n    &[aria-selected=true] {\n      &:before {\n        background-color: #0099FF;\n        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjcyOTUgNC4zNjM3TDUuMDg1OTUgOC44MTgyNUwxMi43Mjc1IDEuMTgxODgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);\n      }\n    }\n  }\n\n  li + li { border-top: 1px solid #eaebf2; }\n\n  li:hover,\n  li.isHovering { background-color: #F3F4F7; }\n\n  .il { font-size: 14px; color: #2c3345; font-weight: 700; }\n  .id { font-size: 13px; color: #8d8fa8; margin-top: 4px; }\n  .id span { color: #2c3345; font-weight: 500; }\n`;\nconst DdButton = /*#__PURE__*/ forwardRef((_param, ref)=>{\n    var { option: { text, showWhenSelected, value }, actionRequired, onActionRequiredClick, className } = _param, props = _object_without_properties(_param, [\n        \"option\",\n        \"actionRequired\",\n        \"onActionRequiredClick\",\n        \"className\"\n    ]);\n    return /*#__PURE__*/ _jsxs(ScButton, _object_spread_props(_object_spread({\n        ref: ref,\n        \"data-value\": value,\n        type: \"button\",\n        className: className\n    }, props), {\n        \"data-testid\": \"dd-Button\",\n        children: [\n            /*#__PURE__*/ _jsxs(\"span\", {\n                className: \"dd-t\",\n                children: [\n                    showWhenSelected || text,\n                    actionRequired && /*#__PURE__*/ _jsx(\"span\", {\n                        className: \"dd-i\",\n                        onKeyDown: (f)=>f,\n                        onClick: onActionRequiredClick,\n                        children: \"Action Required\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"dd-s\",\n                children: /*#__PURE__*/ _jsx(IconChevronDown, {})\n            })\n        ]\n    }));\n});\nDdButton.propTypes = {\n    option: shape({\n        showWhenSelected: string,\n        text: string,\n        value: string\n    }).isRequired,\n    actionRequired: bool.isRequired,\n    onActionRequiredClick: func,\n    className: string\n};\nDdButton.defaultProps = {\n    className: '',\n    onActionRequiredClick: (f)=>f\n};\nconst DdList = ({ children, noMarginTop })=>/*#__PURE__*/ _jsxs(\"div\", {\n        style: {\n            marginTop: noMarginTop ? '0' : '12px'\n        },\n        children: [\n            /*#__PURE__*/ _jsx(ScPopoverArrow, {\n                \"data-popper-arrow\": true\n            }),\n            /*#__PURE__*/ _jsx(ScOptionList, {\n                children: children\n            })\n        ]\n    });\nDdList.propTypes = {\n    children: node.isRequired,\n    noMarginTop: bool\n};\nDdList.defaultProps = {\n    noMarginTop: false\n};\nconst DropdownWithDetails = (props)=>{\n    return props.useNewStyledPermissionDropdown ? /*#__PURE__*/ _jsx(DropdownWithExtraElements, _object_spread_props(_object_spread({}, props), {\n        recordEvent: ()=>props.recordEvent('permissionChangeButtonClicked', ''),\n        ButtonRenderer: DdButton,\n        options: props.options.map((opt)=>_object_spread_props(_object_spread({}, opt), {\n                subText: opt.desc\n            })),\n        popoverProps: {\n            usePortal: true,\n            style: {\n                zIndex: 10005\n            },\n            popoverOptions: {\n                placement: 'bottom-end',\n                modifiers: [\n                    {\n                        name: 'offset',\n                        options: {\n                            offset: [\n                                0,\n                                10\n                            ]\n                        }\n                    }\n                ]\n            }\n        }\n    })) : /*#__PURE__*/ _jsx(UIKitDropdown, _object_spread({\n        ButtonRenderer: /*#__PURE__*/ forwardRef((btn, ref)=>/*#__PURE__*/ _jsx(DdButton, _object_spread_props(_object_spread({}, btn), {\n                onClick: (...args)=>{\n                    props.onClick(...args);\n                    return btn.onClick(...args);\n                },\n                actionRequired: props.actionRequired,\n                onActionRequiredClick: props.onActionRequiredClick,\n                ref: ref,\n                className: props.className\n            }))),\n        ContainerRenderer: /*#__PURE__*/ forwardRef((_list, ref)=>/*#__PURE__*/ _jsx(DdList, _object_spread_props(_object_spread({}, _list), {\n                ref: ref,\n                noMarginTop: props.noMarginTop\n            }))),\n        OptionRenderer: ({ option: { text, desc, value }, isSelected })=>/*#__PURE__*/ _jsxs(\"div\", {\n                \"data-value\": value,\n                \"data-selected\": isSelected,\n                className: \"i\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"il\",\n                        children: text\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"id\",\n                        children: desc\n                    })\n                ]\n            })\n    }, props));\n};\nDropdownWithDetails.propTypes = {\n    actionRequired: bool,\n    onClick: func,\n    className: string,\n    noMarginTop: bool,\n    onActionRequiredClick: func,\n    useNewStyledPermissionDropdown: bool,\n    options: arrayOf(shape({\n        showWhenSelected: string,\n        text: string,\n        desc: oneOfType([\n            string,\n            node\n        ]),\n        value: string\n    })),\n    recordEvent: func\n};\nDropdownWithDetails.defaultProps = {\n    actionRequired: false,\n    onClick: (f)=>f,\n    className: '',\n    noMarginTop: false,\n    onActionRequiredClick: (f)=>f,\n    useNewStyledPermissionDropdown: false,\n    options: [],\n    recordEvent: (f)=>f\n};\nexport default DropdownWithDetails;\n","import Styled from 'styled-components';\nexport const ScRF = Styled.div`\n  display: flex;\n  justify-content: space-between;\n`;\nexport const ScRB = Styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n\n  .content {\n    width: 90%;\n    max-width: 500px;\n    padding-bottom: 40px;\n    text-align: center;\n    font-size: 1em;\n    color: #0A1551;\n    font-weight: 700;\n    margin: auto;\n\n    &.isRedWarn {\n      svg {\n      fill: #FF4947;\n      width: 80px;\n      height: 80px;\n      }\n    }\n\n    > svg {\n      display: unset;\n      margin-bottom: 8px;\n    }\n  }\n\n  .content.wider { max-width: 540px; }\n\n  .assignToOrgSvg {\n    width: 54vw;\n    height: 36vh;\n    max-width: 192px;\n    max-height: 136px;\n  }\n\n  .title {\n    font-size: 18px;\n    line-height: 20px;\n    color: #141E46;\n    font-weight: 500;\n  }\n\n  .subtitle {\n    font-size: 15px;\n    line-height: 16px;\n    color: #252F58;\n    font-weight: 500;\n  }\n\n  p {\n    font-size: 14px;\n    line-height: 24px;\n    color: #60658C;\n  }\n\n  p, .custom-content { font-weight: 300; margin: 12px 0; }\n\n  .sec { color: #2c3345; margin: 1em 0 0; line-height: 1.5; }\n\n  [data-value=\"sendNotificationEmail\"] { display: inline-flex; }\n\n  .assigneeMsg {\n    max-width: 426px;\n    width: 100%;\n    display: block;\n    height: 90px;\n    border-radius: 4px;\n    border: solid 1px #d8dae9;\n    margin: 1em auto 0;\n    font-size: .875rem;\n    padding: .375rem .5rem;\n    transition: border-color .15s ease;\n\n    ::placeholder { color: #8d8fa8; }\n    :focus { outline: 0; border-color: #4c7af7; }\n  }\n\n  .dontshow {\n    display: inline-flex;\n    background-color: #ecf4ff;\n    align-items: center;\n    padding: 10px;\n    margin-top: 38px;\n    margin-bottom: 20px;\n    \n    &-input {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      \n      &:checked + .dontshow-checkbox:before {\n        background-color: #54b45c;\n        border-color: #54b45c;\n      }\n      \n      &:checked + .dontshow-checkbox:after {\n        opacity: 1;\n      }\n      \n      &:focus {\n        outline: 0;\n      }\n    }\n    \n    &-checkbox {\n      width: 14px;\n      height: 14px;\n      background-color: #fff;\n      border-radius: 2px;\n      position: relative;\n      \n      &:before {\n        content: \"\";\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border: 1px solid #CCD0DA;\n        background-color: #fff;\n        border-radius: 2px;\n        top: 0;\n        left: 0;\n        transition: .3s;\n        transform: translate(-1px, -1px);\n      }\n      \n      &:after {\n        content: \"\";\n        display: block;\n        width: 4px;\n        height: 8px;\n        border: solid #fff;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        position: absolute;\n        top: 1px;\n        left: 4px;\n        opacity: 1;\n        transition: .3s;\n        z-index: 2;\n      }\n    }\n    \n    &-text {\n      font-weight: 400;\n      font-size: 16px;\n      margin-left: 8px;\n      line-height: 1;\n      color: #52587e;\n    }\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 0.875em;\n\n    p { margin: 1em 0 .75em; }\n  }  \n`;\n","import Styled from 'styled-components';\nconst COLORS = [\n    {\n        backgroundColor: '#EDF8FF',\n        color: '#0066C3'\n    },\n    {\n        backgroundColor: '#EDFED1',\n        color: '#529300'\n    },\n    {\n        backgroundColor: '#FFF5D2',\n        color: '#F49200'\n    },\n    {\n        backgroundColor: '#FFE4CC',\n        color: '#E55300'\n    },\n    {\n        backgroundColor: '#F3E2FF',\n        color: '#6915A4'\n    },\n    {\n        backgroundColor: '#DADEF3',\n        color: '#343C6A'\n    }\n];\nexport const ScUserList = Styled.div`\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  padding: 8px 0;\n  flex-flow: row wrap;\n  width: 100%;\n\n  .ReactVirtualized__Grid {\n    overflow: hidden auto !important;\n  }\n\n  .user-wrapper {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    flex-grow: 1;\n    width: 100%;\n    padding: 10px 12px;\n    align-items: center;\n    height: 52px !important;\n\n    &:hover {\n      cursor: pointer;\n      background-color: #F3F3FE;\n    }\n\n    .user-information {\n      display: flex;\n      flex-direction: column;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 16px;\n\n      .user-name {\n        color: #0A1551;\n      }\n\n      .user-email {\n        color: #6C73A8;\n      }\n    }\n  } \n`;\nexport const ScAvatar = Styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  background: ${(props)=>COLORS[Number(props.index) % 6].backgroundColor};\n  color: ${(props)=>COLORS[Number(props.index) % 6].color};\n  border-radius: 16px;\n\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n`;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback } from 'react';\nimport styled from 'styled-components';\nimport { func, shape, bool, string } from 'prop-types';\nimport Toggle from '@jotforminc/toggle';\nconst ScContent = styled.div`\n  .line.sectionWithBorder {\n    margin-top: 0px !important;\n    padding-top: 0px !important;\n    border-top: 0px !important;\n  }\n\n  #prefills .mainCard.moreSpace > .line {\n    box-shadow: none !important;\n    margin: 0 !important;\n    padding: 20px 0 0 !important;\n  }\n\n  #prefills {\n    .card-title {\n      display: none;\n    }\n  }\n`;\nconst InviteByAppPrefillSection = ({ appName, prefillComponentProvider, isAppPrefillChecked, handleCheckboxClick, renderPrefillSection, selectedAppObject, onPrefillStateChange })=>{\n    const handleClick = ()=>{\n        handleCheckboxClick(!isAppPrefillChecked);\n    };\n    const PrefillSection = useCallback(()=>renderPrefillSection(prefillComponentProvider, {\n            object: selectedAppObject,\n            isNewMapperStyle: true,\n            removeFieldLogo: true,\n            onPrefillStateChange\n        }), [\n        selectedAppObject\n    ]);\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"my-8 border-t border-navy-50\"\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"share-panel-toggle-wrapper\",\n                children: /*#__PURE__*/ _jsx(Toggle, {\n                    text: \"Prefill form fields\",\n                    desc: `Use ${appName} data to pre-populate the fields of the assigned form`,\n                    isLoading: false,\n                    isMultiLine: true,\n                    isTitleUppercase: false,\n                    isSelected: isAppPrefillChecked,\n                    onClick: handleClick,\n                    squareMode: true,\n                    onText: \"ON\",\n                    offText: \"OFF\"\n                })\n            }),\n            isAppPrefillChecked ? /*#__PURE__*/ _jsx(ScContent, {\n                children: /*#__PURE__*/ _jsx(PrefillSection, {})\n            }) : null\n        ]\n    });\n};\nInviteByAppPrefillSection.defaultProps = {\n    onPrefillStateChange: ()=>{}\n};\nInviteByAppPrefillSection.propTypes = {\n    appName: string.isRequired,\n    prefillComponentProvider: string.isRequired,\n    selectedAppObject: shape({}).isRequired,\n    isAppPrefillChecked: bool.isRequired,\n    handleCheckboxClick: func.isRequired,\n    renderPrefillSection: func.isRequired,\n    onPrefillStateChange: func\n};\nexport default InviteByAppPrefillSection;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { forwardRef } from 'react';\nimport Styled from 'styled-components';\nimport { Dropdown as UIKitDropdown } from '@jotforminc/uikit';\nimport { IconAngleDown } from '@jotforminc/svg-icons';\nimport { node, shape, string } from 'prop-types';\nconst ScButton = Styled.button`\n  background: transparent;\n  display: flex;\n  align-items: center;\n  border-radius: 2px;\n  border: 1px solid #d8dae9;\n  box-shadow: none;\n  font-size: 16px;\n  line-height: 1.25;\n  padding: 0;\n  cursor: pointer;\n  width: 100%;\n\n  .dd-t { flex: 1 1 auto; padding: .5rem .5rem .5rem .75rem; color: #2c3345; font-size: .875em; line-height: 1.25rem;\n    text-align: left; }\n  .dd-s { padding: .5em; }\n  .dd-s svg { display: block; width: 24px; height: 24px; }\n\n  &:focus { outline: none; border-color: #bbb; }\n`;\nconst ScOptionList = Styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: .25em 0;\n  background-color: #fff;\n  border: 1px solid #d8dae9;\n  font-size: .875em;\n  border-radius: 0 0 2px 2px;\n  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.16);\n  max-height: 215px;\n  overflow-y: auto;\n\n  li.i div {\n    padding: .5rem .75rem;\n    user-select: none;\n    cursor: pointer;\n  }\n  li.i:hover div,\n  li.i.isHovering div {\n    background-color: rgba(0,0,0,.1);\n  }\n\n  li.i div[data-selected=true] { background-color: #e5e6e7; }\n\n  /* option group listing */\n  .og-l { list-style: none; padding: 0; margin: 0; text-indent: 1em; }\n  .og-t { font-weight: 700; padding: .5rem .75rem; }\n  .og + .og .og-t { padding: .75rem .75rem .5rem; border-top: 1px solid #d8dae9; margin-top: .5em; }\n`;\nconst DdButton = /*#__PURE__*/ forwardRef((_param, ref)=>{\n    var { option } = _param, props = _object_without_properties(_param, [\n        \"option\"\n    ]);\n    if (!option) {\n        return /*#__PURE__*/ _jsx(\"div\", {\n            className: \"dropdownOptionEmpty\"\n        });\n    }\n    const { text, value } = option;\n    return /*#__PURE__*/ _jsxs(ScButton, _object_spread_props(_object_spread({\n        ref: ref,\n        \"data-value\": value,\n        type: \"button\"\n    }, props), {\n        children: [\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"dd-t\",\n                children: text\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"dd-s\",\n                children: /*#__PURE__*/ _jsx(IconAngleDown, {})\n            })\n        ]\n    }));\n});\nDdButton.propTypes = {\n    option: shape().isRequired\n};\nconst DdList = ({ children, id })=>/*#__PURE__*/ _jsx(ScOptionList, {\n        id: `dropdown-options-${id}`,\n        children: children\n    });\nDdList.propTypes = {\n    children: node.isRequired,\n    id: string.isRequired\n};\nconst Dropdown = (props)=>{\n    return /*#__PURE__*/ _jsx(UIKitDropdown, _object_spread({\n        ButtonRenderer: DdButton,\n        ContainerRenderer: DdList,\n        // OptionRenderer={({ option: { text, value }, isSelected }) => <div data-value={value} data-selected={isSelected}>{text}</div>}\n        OptionContainerRenderer: (pr)=>/*#__PURE__*/ _jsx(\"li\", _object_spread({\n                className: \"i\"\n            }, pr)),\n        GroupRenderer: (_param)=>{\n            var { text, children } = _param, p = _object_without_properties(_param, [\n                \"text\",\n                \"children\"\n            ]);\n            return /*#__PURE__*/ _jsxs(\"li\", _object_spread_props(_object_spread({\n                className: \"og\"\n            }, p), {\n                children: [\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"og-t\",\n                        children: text\n                    }),\n                    /*#__PURE__*/ _jsx(\"ul\", {\n                        className: \"og-l\",\n                        children: children\n                    })\n                ]\n            }));\n        }\n    }, props));\n};\nexport default Dropdown;\n","import Styled from 'styled-components';\nconst customFont = '-apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\n// '\"CircularStd\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\nconst commonStyles = `\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-family: ${customFont};\n  font-size: 1em;\n`;\nexport const ScSchWrapper = Styled.div`\n  ${commonStyles}\n\n  &, * { box-sizing: border-box; }\n\n  .isub { padding: 1.5em 0; }\n  .isub:first-child { padding-top: 0; }\n  .isub:last-child { padding-bottom: 0; }\n  .isub + .isub { border-top: 1px solid #eaebf2; }\n\n  .iline { display: flex; justify-content: space-between; }\n  .iline + .iline { margin-top: 1.5em; }\n\n  .icell { flex: 0 0 calc(50% - .4375em); min-width: 0; }\n  .icell.isF { flex: 0 0 100%; }\n  .icell + .icell { margin: 0 0 0 .875em; }\n\n  .ilabel { display: block; color: #2c3345; font-weight: 700; margin: 0 0 .375em 0; }\n  .iddw { position: relative; }\n\n  .sei + & { margin-top: .75em; padding-top: 1.5em; border-top: 1px solid #eaebf2; }\n\n  @media screen and (max-width: 480px) {\n    .iline { flex-direction: column; }\n    .icell, .icell.isF { flex: 1 1 auto; }\n    .icell + .icell { margin: 1.5em 0 0; }\n  }\n`;\n","/* eslint-disable react/prop-types */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport { SelectionGroup as UIKitOptionGroup } from '@jotforminc/uikit';\nconst ScToggleItem = Styled.div`\n  font-size: 16px;\n  padding: 0.5em 0;\n  line-height: 1.25;\n  text-align: center;\n  color: #2c3345;\n  transition: all .15s ease;\n  letter-spacing: -.2px;\n  cursor: pointer;\n  border: 1px solid #d8dae9;\n\n  &[data-selected=true] {\n    background: #54b45c;\n    color: #fff;\n    font-weight: 700;\n    cursor: default;\n    border-color: #54b45c;\n  }\n\n  &:focus {\n    box-shadow: 0 0 0px 3px rgba(84, 180, 92, 0.3);\n    outline: 0;\n  }\n`;\nconst ScToggle = Styled.ul`\n  list-style: none;\n  display: flex;\n  margin: 0;\n  padding: 0;\n\n  li { flex: 1 1 auto; }\n  li + li { ${ScToggleItem} { border-left: 0; } }\n  li:first-child ${ScToggleItem} { border-radius: 2px 0 0 2px; }\n  li:last-child ${ScToggleItem} { border-radius: 0 2px 2px 0; }\n`;\nconst ToggleItem = ({ option: { text, value, key }, isSelected, disabled })=>/*#__PURE__*/ _jsx(ScToggleItem, {\n        \"data-value\": value,\n        \"data-selected\": isSelected,\n        \"data-disabled\": disabled,\n        tabIndex: disabled ? -1 : 0,\n        children: text\n    }, key);\nconst Toggle = (props)=>{\n    const { disabled, name } = props;\n    return /*#__PURE__*/ _jsx(UIKitOptionGroup, _object_spread({\n        ContainerRenderer: ({ children })=>/*#__PURE__*/ _jsx(ScToggle, {\n                \"aria-label\": name,\n                role: \"listbox\",\n                children: children\n            }),\n        OptionRenderer: (optionProps)=>/*#__PURE__*/ _jsx(ToggleItem, _object_spread_props(_object_spread({}, optionProps), {\n                disabled: optionProps.disabled === 'Yes' || disabled\n            }))\n    }, props));\n};\nexport default Toggle;\n","import Styled from 'styled-components';\nexport const ScWrapper = Styled.div`\n  padding: 1.5em 2.5em 2.5em;\n  color: #2c3345;\n  overflow: auto;\n\n  .sei {\n    font-size: 14px;\n    line-height: 1.4;\n    display: flex;\n    align-items: center;\n  }\n\n  .sei-info {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: 0 16px;\n  }\n\n  .sei-buttons {\n    display: inline-flex;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: .875em;\n    padding: 1rem 1.5rem 1.5rem;\n\n    .sei { align-items: flex-start; }\n    .sei-info { max-width: 90%; }\n  }\n`;\n","import Styled from 'styled-components';\nexport const ScSWNB = Styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n\n  .content {\n    width: 90%;\n    max-width: 500px;\n    padding-bottom: 40px;\n    text-align: center;\n    font-size: 1em;\n    color: #0A1551;\n    font-weight: 700;\n    margin: auto;\n  }\n\n  .content.wider { max-width: 540px; }\n\n  svg { margin-bottom: 30px; margin-top: 56px; }\n  .assignToOrgSvg {\n    width: 54vw;\n    height: 36vh;\n    max-width: 192px;\n    max-height: 136px;\n  }\n\n  .title {\n    font-size: 16px;\n    color: #0A1551;\n    font-family: \"Circular\",Work Sans Medium,-apple-system,Helvetica Neue,sans-serif;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  p {\n    margin-top: 9px;\n    font-size: 14px;\n    line-height: 24px;\n    font-weight: 400;\n    height: 18px;\n    color: #6F76A7;\n    font-family: \"Circular\",Work Sans Medium,-apple-system,Helvetica Neue,sans-serif;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 0.875em;\n\n    p { margin: 1em 0 .75em; }\n  }  \n`;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useRef } from 'react';\nimport { Modal } from '@jotforminc/uikit';\nimport { bool, func, object, string } from 'prop-types';\nimport cx from 'classnames';\nimport { IconTagPercentFilled } from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\n// TODO: need this?\n// import '@jotforminc/jotform.css';\nimport { PrefilledLeadFormAside, ALL_TEXTS, gaAttributesPropType, gaFormTrackingItemsPropType, userPropType, LEAD_FORM_MAP } from '@jotforminc/enterprise-promotions-utils';\nimport { ContentRenderer, DialogRenderer, HeaderRenderer } from './Renderers';\nimport EnterpriseIcon from '../../assets/icon.svg';\nconst CollaborationModal = ({ user, description, formID, devFormID, badgeText, preDescription, isNoLabelMode, formUiModifier, modalProps, gaAttributes, gaAttributesClose, textColorClass, descriptionClasses, preDescriptionClasses, preDescColorClass, descriptionWithoutStrong, backgroundColor, backgroundImageUrl, supTitleTextColor, supTitleBackground, gaFormTrackingItems, onCloseClick, onClose, onFormSubmit, hasEducationDiscountBadge, isAdForm })=>{\n    const uikitModalRef = useRef(null);\n    const handleCloseButton = ()=>{\n        var _uikitModalRef_current;\n        (_uikitModalRef_current = uikitModalRef.current) === null || _uikitModalRef_current === void 0 ? void 0 : _uikitModalRef_current.hide();\n        onCloseClick();\n    };\n    const iframeWrapperClassNames = cx('flex flex-1 iframe-wrapper relative bg-white', {\n        'short-form': isNoLabelMode\n    });\n    const imageClassNames = cx('w-full h-0 md:h-auto radius-bl-lg', {\n        'md:-mb-5 md:-mt-8': isNoLabelMode\n    });\n    return /*#__PURE__*/ _jsx(Modal, _object_spread_props(_object_spread({}, modalProps), {\n        ref: uikitModalRef,\n        defaultVisible: true,\n        closeOnEscPress: true,\n        closeOnOutsideClick: false,\n        DialogRenderer: DialogRenderer,\n        ContentRenderer: (props)=>/*#__PURE__*/ _jsx(ContentRenderer, _object_spread({}, gaAttributes, props)),\n        HeaderRenderer: ()=>/*#__PURE__*/ _jsx(HeaderRenderer, _object_spread_props(_object_spread({}, gaAttributesClose), {\n                onCloseClick: handleCloseButton\n            })),\n        onModalClose: onClose,\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"flex flex-col md:flex-row\",\n            children: [\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"flex flex-col items-start relative md:basis-92 radius-tl-lg radius-tr-lg md:radius-tr-none md:radius-bl-lg overflow-hidden\",\n                    style: {\n                        background: backgroundColor\n                    },\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"px-4 md:px-10 pt-4 md:pt-12\",\n                            children: [\n                                /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"inline-flex p-2 md:p-3 items-center justify-center radius text-sm md:text-md md:line-height-xl font-medium mb-3 md:mb-5 font-circular\",\n                                    style: {\n                                        color: supTitleTextColor,\n                                        background: supTitleBackground\n                                    },\n                                    children: [\n                                        /*#__PURE__*/ _jsx(EnterpriseIcon, {\n                                            className: \"w-5 h-5 inline-flex mr-2 enterprise-icon\"\n                                        }),\n                                        t(badgeText)\n                                    ]\n                                }),\n                                !!preDescription && /*#__PURE__*/ _jsx(\"h2\", {\n                                    className: `${preDescriptionClasses} ${preDescColorClass}`,\n                                    children: t(preDescription)\n                                }),\n                                /*#__PURE__*/ _jsx(\"h4\", {\n                                    className: `${descriptionClasses} ${textColorClass}`,\n                                    children: descriptionWithoutStrong ? t(description) : /*#__PURE__*/ _jsx(\"strong\", {\n                                        children: t(description)\n                                    }, \"text-1 font-bold\")\n                                })\n                            ]\n                        }),\n                        backgroundImageUrl && /*#__PURE__*/ _jsx(\"img\", {\n                            src: backgroundImageUrl,\n                            alt: ALL_TEXTS.COLLABORATOR_AVATARS,\n                            className: imageClassNames\n                        }),\n                        hasEducationDiscountBadge && /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"font-circular education-discount-line\",\n                            children: [\n                                /*#__PURE__*/ _jsx(IconTagPercentFilled, {}),\n                                t(ALL_TEXTS.EDUCATION_DISCOUNT_PERCENT)\n                            ]\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: iframeWrapperClassNames,\n                    children: /*#__PURE__*/ _jsx(PrefilledLeadFormAside, {\n                        user: user,\n                        formID: formID,\n                        devFormID: devFormID,\n                        gaAttributes: gaAttributes,\n                        formUiModifier: formUiModifier,\n                        gaFormTrackingItems: gaFormTrackingItems,\n                        title: t(ALL_TEXTS.JOTFORM_ENTERPRISE_TITLE),\n                        classNames: \"w-full border-0 radius-br-lg radius-bl-lg md:radius-bl-none md:radius-tr-lg md:min-h-120 md:px-5\",\n                        onFormSubmit: onFormSubmit,\n                        isAdForm: isAdForm\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"style\", {\n                    children: `\n          .enterprise-icon path {\n            fill: ${supTitleTextColor}\n          }\n\n          .jfBasicModal.teams-modal-wrapper>div[role=dialog] {\n            width: 100%;\n            max-width: 808px;\n            border-radius: 8px;\n            overflow: auto;\n          }\n\n          .iframe-wrapper {\n            min-height: 610px;\n          }\n\n          .short-form.iframe-wrapper {\n            min-height: 512px;\n          }\n\n          @media screen and (min-width:375px) {\n            .iframe-wrapper {\n              min-height: 540px;\n            }\n          }\n\n          .education-discount-line {\n            box-sizing: border-box;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0 1rem;\n            background: radial-gradient(836.45% 141.42% at 0% 0%, #A2DEFF 0%, #B3BFFF 100%);\n            box-shadow: 0 -2px 4px 0 rgba(10, 11, 13, 0.04), 0 -8px 16px 0 rgba(10, 11, 13, 0.32);\n            color: #0A1551;\n            font-size: 1rem;\n            font-style: normal;\n            font-weight: 500;\n            line-height: 2.25rem;\n            letter-spacing: -0.011rem;\n            width: 100%;\n          }\n\n          @media screen and (min-width:768px) {\n            .education-discount-line {\n              line-height: 2.75rem;\n              border-bottom-left-radius: .5rem;\n              position: absolute;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              width: 100%;\n            }\n          }\n\n          .education-discount-line > svg {\n            display: block;\n            width: 1.25rem;\n            height: 1.25rem;\n            margin-right: .5rem;\n          }\n\n          `\n                })\n            ]\n        })\n    }));\n};\nCollaborationModal.propTypes = {\n    user: userPropType.isRequired,\n    opener: string,\n    modalProps: object,\n    formID: string,\n    devFormID: string,\n    isNoLabelMode: bool,\n    formUiModifier: string,\n    description: string.isRequired,\n    badgeText: string,\n    preDescription: string,\n    gaAttributes: gaAttributesPropType.isRequired,\n    gaAttributesClose: gaAttributesPropType.isRequired,\n    gaFormTrackingItems: gaFormTrackingItemsPropType.isRequired,\n    textColorClass: string,\n    preDescColorClass: string,\n    backgroundColor: string,\n    backgroundImageUrl: string,\n    supTitleTextColor: string,\n    supTitleBackground: string,\n    onClose: func,\n    onCloseClick: func,\n    logAbTestAction: func,\n    onFormSubmit: func,\n    hasEducationDiscountBadge: bool,\n    descriptionClasses: string,\n    preDescriptionClasses: string,\n    descriptionWithoutStrong: bool,\n    isAdForm: bool\n};\nCollaborationModal.defaultProps = {\n    opener: '',\n    modalProps: {},\n    formID: LEAD_FORM_MAP.COMMON.LIVE,\n    devFormID: LEAD_FORM_MAP.COMMON.DEV,\n    isNoLabelMode: false,\n    formUiModifier: '',\n    textColorClass: 'color-white',\n    preDescColorClass: 'color-white',\n    backgroundColor: 'radial-gradient(150% 100% at 100% 100%, #273CA5 0%, #050C34 100%)',\n    backgroundImageUrl: '',\n    supTitleTextColor: '#A2ABF6',\n    supTitleBackground: 'rgba(61, 83, 194, 0.2)',\n    descriptionClasses: 'font-normal text-lg md:text-2xl line-height-xl md:line-height-3xl mt-0 mb-4 md:mb-12 font-circular md:min-h-24',\n    preDescriptionClasses: 'font-normal text-lg md:text-xl line-height-xl md:line-height-3xl mt-0 mb-4 md:mb-5 font-circular',\n    badgeText: ALL_TEXTS.JOTFORM_ENTERPRISE_TITLE,\n    preDescription: '',\n    onClose: (f)=>f,\n    onCloseClick: (f)=>f,\n    logAbTestAction: (f)=>f,\n    onFormSubmit: (f)=>f,\n    hasEducationDiscountBadge: false,\n    descriptionWithoutStrong: false,\n    isAdForm: false\n};\nexport default CollaborationModal;\n","import Styled from 'styled-components';\nexport const ScF = Styled.div`\n  display: flex;\n  justify-content: space-between;\n\n  @media screen and (max-width: 480px) {\n    font-size: 0.875em;\n    flex-direction: column-reverse;\n    padding: 2px 24px 0;\n\n    button + button { margin-bottom: .5em; }\n  }\n`;\nexport const ScB = Styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n\n  .content {\n    width: 70%;\n    max-width: 500px;\n    padding-bottom: 1em;\n    text-align: center;\n    font-size: 1em;\n    color: #2c3345;\n    font-weight: 700;\n    margin: auto;\n  }\n\n  .title { font-size: 1.375em; margin: 0; }\n  p {\n    color: #60658C;\n    font-weight: 400;\n    margin: 1.1875em 0 1.125em;\n    line-height: 26px;\n    display: inline-block;\n  }\n  .confirm-msg {\n    padding-left: .3em;\n    color: #2c3345;\n    font-weight: 700;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 0.875em;\n    p { margin: 1em 0 .75em; }\n    .content { width: 80%; }\n  }\n`;\nexport const ScIconWrapper = Styled.div`\n  width: 96px;\n  height: 96px;\n  background-color:rgba(255, 182, 41, 0.25);\n  color: #FFB629;\n  border-radius:100%;\n  padding: 1px 8px 15px;\n  margin: 0 auto 8px;\n`;\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { func } from 'prop-types';\nimport Styled from 'styled-components';\nimport { Button } from '@jotforminc/common-button';\nimport { IconGearFilled } from '@jotforminc/svg-icons';\nimport { useTranslatedTexts } from '../helpers/hooks';\nconst ButtonWrapper = Styled.div`\n  margin-right: 4px;\n  \n  @media screen and (max-width: 640px) {\n    button > span {display: none;}\n  }\n`;\nconst SettingsButton = ({ onSettingsClick, t })=>{\n    const { SETTINGS } = useTranslatedTexts(t);\n    return /*#__PURE__*/ _jsx(ButtonWrapper, {\n        children: /*#__PURE__*/ _jsxs(Button, {\n            \"aria-label\": SETTINGS,\n            className: \"bare forSettings\",\n            onClick: onSettingsClick,\n            \"data-testid\": \"settings-button\",\n            children: [\n                /*#__PURE__*/ _jsx(IconGearFilled, {\n                    fill: \"#4573E3\"\n                }),\n                /*#__PURE__*/ _jsx(\"span\", {\n                    children: SETTINGS\n                })\n            ]\n        })\n    });\n};\nSettingsButton.propTypes = {\n    onSettingsClick: func,\n    t: func\n};\nSettingsButton.defaultProps = {\n    onSettingsClick: ()=>{},\n    t: (text)=>text\n};\nexport default SettingsButton;\n","import Styled from 'styled-components';\nconst ScAccessType = Styled.div`\n    display: flex;\n    align-items: center;\n    flex: 0 0 auto;\n    height: 32px;\n    border: 1px solid rgba(69, 115, 227, 0.5);\n    background-color: #eaeffe;\n    color: #4573e3;\n    border-radius: 2.5rem;\n    padding: 0 12px;\n    cursor: pointer;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 16px;\n    margin-right: 0.625rem;\n    justify-content: center;\n    white-space: nowrap;\n\n    @media screen and (max-width: 480px) {\n      float: left;\n    }\n\n    svg {\n      height: 14px;\n      margin-right: 4px;\n\n      html[dir=\"rtl\"] & {\n        margin-right: 0;\n        margin-left: 0.25rem;\n      }\n    }\n    path { fill: #4573e3; }\n    path + path { fill: #eaeffe; }\n\n    ${(p)=>p.fillColor && `\n      border: 1px solid ${p.borderColor};\n      background-color: ${p.backgroundColor};\n      color: ${p.fillColor};\n      path { fill: ${p.fillColor}; }\n    `}\n`;\nexport default ScAccessType;\n","/* eslint-disable max-len */ import styled from 'styled-components';\n// TODO :: initial styles\nexport const ScPredefinedUsersSection = styled.div`\n  .searchAndInvite {\n    margin: -24px 0 18px 0;\n\n    &-title {\n      font-size: 15px;\n      line-height: 18px;\n      font-weight: 700;\n    }\n\n    &-subheader {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-top: 30px;\n\n      .jfCheckbox-item {\n        padding: 6px;\n      }\n    }\n\n    .searchInUsers {\n      position: relative;\n\n      &:before {\n        content: '';\n        background-image: url(\"data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m15.2 13.73-3.17-3.17a6.36 6.36 0 1 0-1.47 1.46l3.17 3.18a1.04 1.04 0 0 0 1.47-1.47ZM3.83 9.89a4.28 4.28 0 1 1 6.06-6.06 4.28 4.28 0 0 1-6.06 6.06Z' fill='%236F76A7'/%3E%3C/svg%3E\");\n        background-size: 15px;\n        background-position: center;\n        position: absolute;\n        display: inline-block;\n        width: 15px;\n        height: 15px;\n        margin: 15px 12px;\n      }\n      \n      input {\n        background: #FFFFFF;\n        border: 1px solid #D0D4EC;\n        border-radius: 4px;\n        padding: 12px 12px 12px 32px;\n\n        input {\n          border: none;\n        }\n      }\n    }\n\n    .inviteMultiple {\n      background: #78BB07;\n      border-radius: 4px;\n      color: #FFFFFF;\n      border: none;\n      cursor: pointer;\n      padding: 12px 40px;\n  \n      &:hover {\n        background: #4EB100;\n      }\n    }\n  }\n\n  .jfTable-wrapper {\n    height: 400px;\n    overflow: auto;\n  }\n\n  table {\n    border-collapse: collapse;\n    width: 100%;\n\n    tbody {\n      .jfTable-row {\n        border-top: 1px solid rgba(94,105,137,0.33);\n      }\n    }\n\n    .forCheckbox,\n    .forUser {\n      text-align: left;\n    }\n\n    .forStatus {\n      text-align: right;\n    }\n\n    .jfTable-row {\n      position: relative;\n\n      .jfCheckbox-wrapper.isChecked {\n        background: #0099FF;\n      }\n    }\n\n    .jfTable-column {\n      &.forCheckbox {\n        margin: 0;\n        padding: 0;\n        width: 24px;\n\n        .jfCheckbox-item {\n          padding: 0;\n          width: 22px;\n          height: 22px;\n\n          .jfCheckbox-wrapper {\n            left: 0;\n          }\n        }\n      }\n\n      &.forUser {\n        display: flex;\n\n        .user-avatar {\n          width: 30px;\n          height: 30px;\n          border-radius: 50%;\n          background-position: center;\n          background-repeat: no-repeat;\n          background-size: cover;\n        }\n\n        .user-content {\n          display: flex;\n          margin-left: 8px;\n          flex-direction: column;\n\n          .name {\n            font-weight: 600;\n            font-size: 14px;\n            line-height: 18px;\n          }\n\n          .email {\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 16px;\n          }\n        }\n      }\n    }\n\n    .inviteSingle {\n      background-color: #E3E5F5;\n      border-radius: 4px;\n      color: #545B88;\n      border: none;\n      cursor: pointer;\n      padding: 10px 24px;\n  \n      &:hover {\n        background: #bebfcf;\n      }\n\n      &.invited {\n        pointer-events: none;\n        background-color: transparent;\n      }\n    }\n  }\n`;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string, shape, arrayOf } from 'prop-types';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport { translationRenderer } from '@jotforminc/translation';\nimport MoreButton from '../components/MoreButton';\nimport ThreadAvatar from '../components/ThreadAvatar';\nimport IconCalendar from '../assets/iconCalendar.svg';\nimport ContactWithApproval from '../components/ContactWithApproval';\nconst IconDueDate = styled(IconCalendar)`\n  margin-right: 0.375rem;\n  width: 0.9375rem;\n  height: 0.875rem;\n`;\nconst ActionLayout = ({ title, className, approver, description, components, dueDate, id, formName, customMoreActionLayout, elementType })=>{\n    const contactWithApproval = (user)=>{\n        return /*#__PURE__*/ _jsx(ContactWithApproval, {\n            approver: user,\n            children: /*#__PURE__*/ _jsx(ThreadAvatar, {\n                user: user,\n                className: \"task\"\n            })\n        });\n    };\n    if (customMoreActionLayout && elementType) {\n        const currentLayout = customMoreActionLayout[elementType];\n        const { avatarValues: { useCustomAvatar = true, avatar, user = null }, middleHeaderTitle, headerText, showMoreButton = true, showOutcome = false, outcome } = currentLayout;\n        return /*#__PURE__*/ _jsx(\"div\", {\n            id: id,\n            className: classNames('jfThread-action', className),\n            children: /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"jfThread-action-header\",\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"jfThread-action-header-avatar\",\n                        children: [\n                            useCustomAvatar && /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfAvatar\",\n                                children: avatar\n                            }),\n                            !useCustomAvatar && user && /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfThread-action-header-avatar\",\n                                children: contactWithApproval(user)\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"jfThread-action-header-middle\",\n                        children: [\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"jfThread-action-header-middle-title\",\n                                children: middleHeaderTitle || ''\n                            }),\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfThread-action-header-text\",\n                                children: headerText || ''\n                            }),\n                            showOutcome && /*#__PURE__*/ _jsx(\"div\", {\n                                className: \"jfThread-action-header-outcome\",\n                                children: outcome()\n                            })\n                        ]\n                    }),\n                    showMoreButton && /*#__PURE__*/ _jsx(MoreButton, {\n                        components: components\n                    })\n                ]\n            })\n        });\n    }\n    return /*#__PURE__*/ _jsx(\"div\", {\n        id: id,\n        className: classNames('jfThread-action', className),\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"jfThread-action-header\",\n            children: [\n                approver ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"jfThread-action-header-avatar\",\n                    children: contactWithApproval(approver)\n                }) : null,\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfThread-action-header-middle\",\n                    children: [\n                        title && !formName ? /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"jfThread-action-header-middle-title\",\n                            children: translationRenderer('[1[{taskTitle}]] Step')({\n                                renderer1: ()=>/*#__PURE__*/ _jsx(_Fragment, {\n                                        children: title\n                                    })\n                            })\n                        }) : null,\n                        formName ? /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfThread-action-header-text\",\n                            children: description || `Waiting for ${(approver === null || approver === void 0 ? void 0 : approver.name) || (approver === null || approver === void 0 ? void 0 : approver.email)}'s submission for ${formName}.`\n                        }) : /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfThread-action-header-text\",\n                            children: description || `Waiting for ${(approver === null || approver === void 0 ? void 0 : approver.name) || (approver === null || approver === void 0 ? void 0 : approver.email)}'s approval.`\n                        }),\n                        dueDate ? /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jfThread-action-header-date\",\n                            children: [\n                                /*#__PURE__*/ _jsx(IconDueDate, {}),\n                                ` Due date: ${dueDate}`\n                            ]\n                        }) : null\n                    ]\n                }),\n                !formName && /*#__PURE__*/ _jsx(MoreButton, {\n                    components: components\n                })\n            ]\n        })\n    });\n};\nActionLayout.propTypes = {\n    title: string,\n    className: string,\n    description: string,\n    approver: shape({\n        avatarUrl: string,\n        name: string,\n        email: string\n    }),\n    components: arrayOf(shape({})).isRequired,\n    dueDate: string,\n    id: string.isRequired,\n    formName: string,\n    customMoreActionLayout: shape(shape({})),\n    elementType: string\n};\nActionLayout.defaultProps = {\n    title: '',\n    approver: null,\n    className: '',\n    description: '',\n    dueDate: '',\n    formName: null,\n    customMoreActionLayout: null,\n    elementType: null\n};\nexport default ActionLayout;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useMemo } from 'react';\nimport { string, arrayOf } from 'prop-types';\nimport styled from 'styled-components';\nimport ActionButton from './ActionButton';\nimport ActionLayout from '../SubmissionThread/ActionLayout';\nimport { useActionComponents } from '../hooks/useActionComponents';\nconst ErrorMessage = styled.div`\n  display: inline-flex;\n  align-items: center;\n`;\nconst ErrorIcon = styled.div`\n  &::before {\n    content: \"!\";\n    color: #ffffff;\n    background-color: #D53049;\n    border-radius: 9px;\n    height: 18px;\n    width: 18px;\n    line-height: 18px;\n    font-size: 14px;\n    font-weight: 700;\n    text-align: center;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin-right: 0.25rem;\n  }\n`;\nconst ErrorAction = (_param)=>{\n    var { errorMessage, errorActions } = _param, props = _object_without_properties(_param, [\n        \"errorMessage\",\n        \"errorActions\"\n    ]);\n    const { takeover, reassign, cancelFlow, startOver, openWorkflowBuilder } = useActionComponents(_object_spread_props(_object_spread({}, props), {\n        fromError: true,\n        ActionButton\n    }));\n    const errorActionsToComponents = useMemo(()=>({\n            takeOver: takeover,\n            reassign,\n            goToBuilder: openWorkflowBuilder,\n            restart: startOver,\n            cancel: cancelFlow\n        }), [\n        openWorkflowBuilder,\n        cancelFlow,\n        startOver,\n        takeover,\n        reassign\n    ]);\n    const componentsToRender = useMemo(()=>{\n        const components = errorActions.map((action)=>errorActionsToComponents[action]);\n        return components.map((fn)=>fn());\n    }, [\n        errorActions,\n        errorActionsToComponents\n    ]);\n    return /*#__PURE__*/ _jsx(ActionLayout, {\n        description: /*#__PURE__*/ _jsxs(ErrorMessage, {\n            children: [\n                /*#__PURE__*/ _jsx(ErrorIcon, {}),\n                errorMessage\n            ]\n        }),\n        components: componentsToRender\n    });\n};\nErrorAction.propTypes = {\n    errorActions: arrayOf(string).isRequired,\n    errorMessage: string.isRequired\n};\nexport default ErrorAction;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { t } from '@jotforminc/translation';\nimport { arrayOf, shape } from 'prop-types';\nimport React from 'react';\nimport { IconUsersMoreFilled } from '@jotforminc/svg-icons';\nimport styled from 'styled-components';\nimport MoreButton from './MoreButton';\nimport { useActionComponents } from '../hooks/useActionComponents';\nimport { useWorkflow } from '../contexts';\nimport AvatarGroupWithPanel from './AvatarGroupWithPanel';\nimport IconCalendar from '../assets/iconCalendar.svg';\nimport TeamImageWithWrapper from './TeamImageWithWrapper';\nimport { isTeamApproval } from '../utils/helper';\nconst IconDueDate = styled(IconCalendar)`\n  margin-right: 0.375rem;\n  width: 0.9375rem;\n  height: 0.875rem;\n`;\nconst MultipleApprovalTakeOver = (props)=>{\n    const { formatDate } = useWorkflow();\n    const { takeover, reassign } = useActionComponents(_object_spread_props(_object_spread({}, props), {\n        isGroupApproval: true\n    }));\n    const { task, subtasks } = props;\n    const { element: { type: elementType, subType = null, name }, dueDate = null, properties: { approvalOptions }, updated_at: updatedAt, status, team, isCompleteAllowed = false } = task;\n    const approverCount = Object.keys(subtasks).length;\n    const customMultipleAction = (type)=>{\n        if (type === 'workflow_approval') {\n            return {\n                avatar: /*#__PURE__*/ _jsx(IconUsersMoreFilled, {\n                    fill: \"#fff\",\n                    width: \"20\"\n                }),\n                middleHeaderTitle: name || t('Approval Step')\n            };\n        }\n        if (type === 'workflow_approval_with_sign') {\n            return {\n                avatar: /*#__PURE__*/ _jsx(IconUsersMoreFilled, {\n                    fill: \"#fff\",\n                    width: \"20\"\n                }),\n                middleHeaderTitle: name || t('Approve & Sign Step')\n            };\n        }\n        if (isTeamApproval(type, team)) {\n            return {\n                middleHeaderTitle: 'Team Approval Step'\n            };\n        }\n    };\n    const currentLayout = customMultipleAction(subType || elementType);\n    const getAvatarUrl = ()=>{\n        if (isTeamApproval(subType || elementType, team)) {\n            return /*#__PURE__*/ _jsx(TeamImageWithWrapper, {\n                team: team\n            });\n        }\n        return currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.avatar;\n    };\n    return /*#__PURE__*/ _jsx(\"div\", {\n        className: \"jfThread-action forMultipleApproval\",\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"jfThread-action-header\",\n            children: [\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfThread-entry-header-user\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfAvatar task\",\n                            children: getAvatarUrl()\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            children: [\n                                /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"jfThread-entry-header-user-info\",\n                                    children: [\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"jfThread-action-header-info\",\n                                            children: [\n                                                /*#__PURE__*/ _jsx(\"div\", {\n                                                    className: \"jfThread-action-header-text\",\n                                                    children: t((currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.headerText) || '')\n                                                }),\n                                                /*#__PURE__*/ _jsx(\"span\", {\n                                                    className: \"jfThread-action-header-middle-title\",\n                                                    children: t((currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.middleHeaderTitle) || '')\n                                                })\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"span\", {\n                                            style: {\n                                                fontSize: '13px'\n                                            },\n                                            children: t('Waiting')\n                                        })\n                                    ]\n                                }),\n                                dueDate ? /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"jfThread-action-header-date\",\n                                    style: {\n                                        display: 'block'\n                                    },\n                                    children: [\n                                        /*#__PURE__*/ _jsx(IconDueDate, {}),\n                                        `${t('Due date')}: ${dueDate ? formatDate(dueDate) : null}`\n                                    ]\n                                }) : null\n                            ]\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfThread-action-content-teams\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfThread-action-content forTeam\",\n                            children: isTeamApproval(currentLayout) && (team === null || team === void 0 ? void 0 : team.teamName)\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jfThread-action-content\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"div\", {\n                                    className: \"jfThread-action-title\",\n                                    children: team === null || team === void 0 ? void 0 : team.teamName\n                                }),\n                                /*#__PURE__*/ _jsx(AvatarGroupWithPanel, _object_spread({\n                                    items: Object.values(subtasks),\n                                    elementType: elementType,\n                                    subType: subType,\n                                    approvalOptions: approvalOptions,\n                                    approverCount: approverCount,\n                                    updated_at: updatedAt,\n                                    subtasks: Object.values(subtasks || {}),\n                                    forTask: true,\n                                    task: task,\n                                    status: status\n                                }, props))\n                            ]\n                        })\n                    ]\n                }),\n                isCompleteAllowed && /*#__PURE__*/ _jsx(MoreButton, {\n                    components: [\n                        takeover(),\n                        reassign()\n                    ]\n                })\n            ]\n        })\n    });\n};\nMultipleApprovalTakeOver.propTypes = {\n    task: arrayOf(shape),\n    subtasks: shape({})\n};\nMultipleApprovalTakeOver.defaultProps = {\n    task: [],\n    subtasks: {}\n};\nexport default MultipleApprovalTakeOver;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { func, bool } from 'prop-types';\nimport classNames from 'classnames';\nimport { Dialog } from '@jotforminc/dialog';\nimport { moment as Moment, handleCustomNavigation } from '@jotforminc/utils';\nimport { useThread, useWorkflow } from '../contexts';\nimport TaskSection from './TaskSection';\nimport ErrorAction from '../components/ErrorAction';\nimport StartFlowAction from '../components/StartFlowAction';\nimport EntryLayout from '../SubmissionThread/EntryLayout';\nimport TakeOver from '../components/TakeOver';\nimport TaskMoreButton from '../components/TaskMoreButton';\nimport EntryTypes from '../SubmissionThread/EntryTypes';\nimport Entry from '../SubmissionThread/Entry';\nimport '../styles/index.scss';\nimport CustomMoreActions from '../components/CustomMoreActions';\nimport MultipleApprovalTakeOver from '../components/MultipleApprovalTakeOver';\nconst dialogProps = {\n    type: 'warning',\n    title: 'Errors on the Approval Flow',\n    subTitles: [\n        '<br />',\n        `\n    There are still some errors on the approval flow of this submission. \n    <strong>You should fix these errors</strong>,\n    then start over the approval flow.\n    `\n    ],\n    submitButtonText: 'Open Approval Flow'\n};\nconst customMoreActions = [\n    'workflow_sign_document',\n    'workflow_assign_task'\n];\nconst entryRenderer = ({ task: { task, isCommentRequired, isCurrentUserApprover, name, avatarUrl, assigneeEmail: email, requestMore, subtasks }, recordEvent, requestMoreInfoClick, submissionID, onTaskRenew, user, teamInfo })=>{\n    var _task_element;\n    const type = task === null || task === void 0 ? void 0 : (_task_element = task.element) === null || _task_element === void 0 ? void 0 : _task_element.type;\n    const subtask = subtasks === null || subtasks === void 0 ? void 0 : subtasks[user.email];\n    if (isCurrentUserApprover && type !== 'workflow_assign_form' && type !== 'workflow_assign_task') {\n        var _task_element1;\n        const requestMoreVisible = requestMore === 'Yes';\n        return /*#__PURE__*/ _jsx(EntryLayout, {\n            className: \"task isNotCompleted\",\n            isExpanded: true,\n            noPreview: true,\n            headerProps: {\n                moreButton: requestMoreVisible && /*#__PURE__*/ _jsx(TaskMoreButton, {\n                    requestMoreInfo: ()=>{\n                        recordEvent('WF-RequestMoreInfo', 'workflow');\n                        return requestMoreInfoClick((subtask === null || subtask === void 0 ? void 0 : subtask.id) || task.id);\n                    },\n                    requestMoreVisible: requestMoreVisible\n                }),\n                title: task === null || task === void 0 ? void 0 : (_task_element1 = task.element) === null || _task_element1 === void 0 ? void 0 : _task_element1.name,\n                name: t('Please review this submission.')\n            },\n            isCurrentUserApprover: isCurrentUserApprover,\n            task: task,\n            children: /*#__PURE__*/ _jsx(TaskSection, {\n                submissionID: submissionID,\n                onRenew: onTaskRenew,\n                id: task.id,\n                task: subtask || task,\n                isCommentRequired: isCommentRequired,\n                recordEvent: recordEvent,\n                isHIPAA: user.isHIPAA === '1',\n                teamInfo: teamInfo\n            })\n        });\n    }\n    if (type && customMoreActions.includes(type)) {\n        return /*#__PURE__*/ _jsx(CustomMoreActions, {\n            approver: {\n                name,\n                avatarUrl,\n                email\n            },\n            name: name,\n            task: task,\n            isCommentRequired: isCommentRequired,\n            isCurrentUserApprover: isCurrentUserApprover,\n            onTaskListRenew: onTaskRenew,\n            submissionID: submissionID,\n            requestMore: requestMore,\n            recordEvent: recordEvent,\n            isHIPAA: user.isHIPAA === '1',\n            teamInfo: teamInfo\n        }, task.id);\n    }\n    if (Object.keys(subtasks).length) {\n        return /*#__PURE__*/ _jsx(MultipleApprovalTakeOver, {\n            task: task,\n            subtasks: Object.values(subtasks),\n            approver: {\n                name,\n                avatarUrl,\n                email\n            },\n            name: name,\n            isCommentRequired: isCommentRequired,\n            onTaskListRenew: onTaskRenew,\n            submissionID: submissionID,\n            requestMore: requestMore,\n            recordEvent: recordEvent,\n            isHIPAA: user.isHIPAA === '1',\n            teamInfo: teamInfo\n        }, task.id);\n    }\n    return /*#__PURE__*/ _jsx(TakeOver, {\n        approver: {\n            name,\n            avatarUrl,\n            email\n        },\n        name: name,\n        task: task,\n        isCommentRequired: isCommentRequired,\n        onTaskListRenew: onTaskRenew,\n        submissionID: submissionID,\n        requestMore: requestMore,\n        recordEvent: recordEvent,\n        isHIPAA: user.isHIPAA === '1',\n        teamInfo: teamInfo\n    }, task.id);\n};\nconst SubmissionWorkflowActions = ({ onCancelStartOverError, recordEvent, afterTaskAction, requestMoreInfoClick, isEncrypted })=>{\n    const { user, isFormOwner, instanceID, onTaskListRenew, submissionID, onStartOver, onCancelFlow, onStartFlow, workflowStatusDetails, workflowStatus, showFixErrorsInWorkflow, setShowFixErrorsInWorkflow, formID, activeTaskList, formatDate, undoFns, canUndo, fakeEntries, teamInfo, isWorkflowEnabled } = useWorkflow();\n    const { layout } = useThread();\n    const errorInWorkflow = workflowStatus === 'ERRORED';\n    const { errorReason = '' } = workflowStatusDetails || {};\n    const isApproverChanged = errorReason === 'APPROVER_DOES_NOT_MATCH';\n    const showTaskList = !errorInWorkflow || !isFormOwner && errorInWorkflow && isApproverChanged; // show only when approver changed for approvers\n    const erroredTaskList = isFormOwner && errorInWorkflow ? (activeTaskList || []).filter((task)=>task.errorObj) : [];\n    const workflowNotStarted = workflowStatus === 'NOT_STARTED' && (activeTaskList === null || activeTaskList === void 0 ? void 0 : activeTaskList.length) === 0;\n    const activeTaskIDs = useMemo(()=>activeTaskList ? activeTaskList.reduce((prev, { task, subtasks = {} })=>[\n                ...prev,\n                task.id,\n                ...Object.values(subtasks).map((s)=>s.id)\n            ], []) : [], [\n        activeTaskList\n    ]);\n    const didTaskExpire = undoFns && typeof undoFns === 'object' && undoFns !== null ? Object.keys(undoFns || {}).some((id)=>activeTaskIDs.includes(id)) : false;\n    const findDefinedFakeEntry = ()=>{\n        const activeTaskIDsLength = activeTaskIDs.length;\n        for(let i = 0; i < activeTaskIDsLength; i++){\n            if (fakeEntries[activeTaskIDs[i]]) {\n                return fakeEntries[activeTaskIDs[i]];\n            }\n        }\n    };\n    const unsetShowDialogState = useCallback(()=>setShowFixErrorsInWorkflow(false), []);\n    const openWorkflowBuilder = useCallback(()=>{\n        unsetShowDialogState();\n        handleCustomNavigation(`/workflow/withForm/${formID}`, '_blank');\n    }, [\n        formID\n    ]);\n    useEffect(()=>{\n        if (user && user.time_zone && !Moment.time_zone) {\n            Moment.setTimezone(user.time_zone);\n        }\n    }, []);\n    const onTaskRenew = ()=>{\n        afterTaskAction();\n        onTaskListRenew();\n    };\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: !didTaskExpire || !canUndo ? /*#__PURE__*/ _jsxs(\"div\", {\n            className: classNames('jfThread', 'forActions', {\n                [`layout--${layout}`]: layout !== 'normal'\n            }),\n            children: [\n                workflowNotStarted && isFormOwner && !isEncrypted && /*#__PURE__*/ _jsx(StartFlowAction, {\n                    user: user,\n                    onStartFlow: onStartFlow,\n                    onRenewFlow: onTaskRenew,\n                    recordEvent: recordEvent,\n                    isWorkflowEnabled: isWorkflowEnabled\n                }),\n                erroredTaskList.map(({ task, errorObj: { message, actions }, isCommentRequired, name, avatarUrl, assigneeEmail: email })=>/*#__PURE__*/ _jsx(ErrorAction, {\n                        onCancelClick: onCancelFlow,\n                        onStartOverClick: onStartOver,\n                        instanceID: instanceID,\n                        errorReason: message,\n                        onTaskListRenew: onTaskRenew,\n                        onError: onCancelStartOverError,\n                        errorMessage: message,\n                        errorActions: actions,\n                        formID: formID,\n                        submissionID: submissionID,\n                        task: task,\n                        isCommentRequired: isCommentRequired,\n                        approver: {\n                            name,\n                            avatarUrl,\n                            email\n                        },\n                        recordEvent: recordEvent,\n                        isHIPAA: user.isHIPAA === '1',\n                        teamInfo: teamInfo\n                    })),\n                /*#__PURE__*/ _jsx(Dialog, _object_spread_props(_object_spread({}, dialogProps), {\n                    onSubmit: openWorkflowBuilder,\n                    onClose: unsetShowDialogState,\n                    isOpen: showFixErrorsInWorkflow\n                })),\n                showTaskList && activeTaskList ? activeTaskList.map((props)=>entryRenderer({\n                        task: props,\n                        recordEvent,\n                        requestMoreInfoClick,\n                        formatDate,\n                        submissionID,\n                        onTaskRenew,\n                        user,\n                        teamInfo\n                    })) : null\n            ]\n        }) : /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                /*#__PURE__*/ _jsx(Entry, {\n                    entryType: \"mock_approve_deny\",\n                    user: user,\n                    userTimeZone: \"\",\n                    entryLayout: \"EntryLayout\",\n                    actionType: \"MOCK_APPROVE_DENY\",\n                    actionDetails: _object_spread({}, findDefinedFakeEntry()),\n                    EntryComp: EntryTypes.mock_approve_deny,\n                    LayoutComp: EntryLayout\n                }),\n                /*#__PURE__*/ _jsx(Entry, {\n                    entryType: \"undo_loading\",\n                    user: user,\n                    userTimeZone: \"\",\n                    entryLayout: \"EntryLayout\",\n                    actionType: \"UNDO_LOADING\",\n                    actionDetails: {\n                        buttonColor: '#fff',\n                        comment: '',\n                        type: '',\n                        text: ''\n                    },\n                    EntryComp: EntryTypes.undo_loading,\n                    LayoutComp: EntryLayout\n                })\n            ]\n        })\n    });\n};\nSubmissionWorkflowActions.propTypes = {\n    onCancelStartOverError: func,\n    recordEvent: func,\n    afterTaskAction: func,\n    requestMoreInfoClick: func,\n    isEncrypted: bool\n};\nSubmissionWorkflowActions.defaultProps = {\n    onCancelStartOverError: (f)=>f,\n    recordEvent: (f)=>f,\n    afterTaskAction: (f)=>f,\n    requestMoreInfoClick: (f)=>f,\n    isEncrypted: false\n};\nexport default SubmissionWorkflowActions;\n","/* eslint-disable react/prop-types */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport Container from '../Container';\nexport const LoaderSvg = Styled.svg`\n  .envelope {\n    transform-style: flat;\n    transform-origin: center;\n    animation-name: scale;\n    animation-duration: 1.7s;\n    animation-fill-mode: backwards;\n    animation-direction: normal;\n    animation-iteration-count: infinite;\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n  .animationGroup {\n    transform: translateY(20px);\n    animation-name: paperTransform;\n    animation-duration: 1.7s;\n    animation-iteration-count: infinite;\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n  .line {\n    animation-duration: 2s;\n    animation-iteration-count: infinite;\n    animation-fill-mode: backwards;\n    animation-timing-function: cubic-bezier(0.01, 0.63, 0.1, 0.99);\n    stroke-dasharray: 10px;\n    stroke-dashoffset: 10px;\n    stroke-width: 2px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n  .line1 {\n    animation-name: drawLine1;\n\n  }\n  .line2 {\n    animation-name: drawLine3;\n  }\n\n  @keyframes drawLine2 {\n  0% {\n  stroke-dashoffset: 10px;\n  }\n  15% {\n  stroke-dashoffset: 10px;\n  }\n  30% {\n  stroke-dashoffset: 0px;\n  }\n  100% {\n  stroke-dashoffset: 0px;\n  }\n  }\n  @keyframes drawLine1 {\n  0% {\n  stroke-dashoffset: 10px;\n  }\n  15% {\n  stroke-dashoffset: 0px;\n  }\n  100% {\n  stroke-dashoffset: 0px;\n  }\n  }\n  .line3 {\n  animation-name: drawLine2;\n\n  }\n  @keyframes drawLine3 {\n  0% {\n  stroke-dashoffset: 10px;\n  }\n  30% {\n  stroke-dashoffset: 10px;\n  }\n  45% {\n  stroke-dashoffset: 0px;\n  }\n  100% {\n  stroke-dashoffset: 0px;\n  }\n  }\n\n  @keyframes scale {\n    0% { transform: scale(0); }\n    60% { transform: scale(0); }\n    70% {\n    transform: scale(1);\n  }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes scale2 {\n    0% { transform: scale(1); }\n    10% { transform: scale(1.1); }\n    20% { transform: scale(1); }\n    100% {\n    transform: scale(1);\n    }\n  }\n`;\nconst Loader = ({ className })=>{\n    return /*#__PURE__*/ _jsx(Container, {\n        className: className,\n        children: /*#__PURE__*/ _jsxs(LoaderSvg, {\n            style: {\n                overflow: 'visible'\n            },\n            width: \"67\",\n            height: \"67\",\n            viewBox: \"0 0 26 26\",\n            children: [\n                /*#__PURE__*/ _jsx(\"defs\", {\n                    children: /*#__PURE__*/ _jsx(\"clipPath\", {\n                        id: \"clip-path\",\n                        children: /*#__PURE__*/ _jsx(\"polygon\", {\n                            className: \"cls-1\",\n                            points: \"1.97 -1.84 1.97 11.5 12 17.15 22.03 11.5 22.03 -1.84 1.97 -1.84\"\n                        })\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"g\", {\n                    className: \"envelope\",\n                    children: /*#__PURE__*/ _jsx(\"path\", {\n                        fill: \"#B1C2E4\",\n                        d: \"M10.06,5.36,2,11.5v9.62H21.91L22,11.5,13.86,5.35A3.15,3.15,0,0,0,10.06,5.36Z\"\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"g\", {\n                    clipPath: \"url(#clip-path)\",\n                    id: \"group\",\n                    children: /*#__PURE__*/ _jsxs(\"g\", {\n                        className: \"animationGroup\",\n                        children: [\n                            /*#__PURE__*/ _jsx(\"path\", {\n                                fill: \"#EDF2F9\",\n                                className: \"cls-8\",\n                                d: \"M4.06,2.48A2.42,2.42,0,0,1,6.41,0H17.59a2.42,2.42,0,0,1,2.35,2.48V17.37a2.42,2.42,0,0,1-2.35,2.49H6.41a2.42,2.42,0,0,1-2.35-2.49Z\"\n                            }),\n                            /*#__PURE__*/ _jsx(\"line\", {\n                                stroke: \"#FCB427\",\n                                className: \"line line2\",\n                                x1: \"8.12\",\n                                y1: \"11.78\",\n                                x2: \"15.89\",\n                                y2: \"11.78\"\n                            }),\n                            /*#__PURE__*/ _jsx(\"line\", {\n                                stroke: \"#F16222\",\n                                className: \"line line1\",\n                                x1: \"8.12\",\n                                y1: \"8.22\",\n                                x2: \"15.89\",\n                                y2: \"8.22\"\n                            }),\n                            /*#__PURE__*/ _jsx(\"line\", {\n                                stroke: \"#0099ff \",\n                                className: \"line line3\",\n                                x1: \"8.12\",\n                                y1: \"4.76\",\n                                x2: \"15.89\",\n                                y2: \"4.76\"\n                            })\n                        ]\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"g\", {\n                    className: \"envelope\",\n                    children: /*#__PURE__*/ _jsx(\"path\", {\n                        fill: \"#CFDBF0\",\n                        className: \"cls-6\",\n                        d: \"M5,24H19a3,3,0,0,0,3-3.12V11.5L12,17.15,2,11.5v9.38A3,3,0,0,0,5,24Z\"\n                    })\n                })\n            ]\n        })\n    });\n};\nexport default Loader;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useRef, useEffect } from 'react';\nimport { Flex } from '@jotforminc/magnet';\nimport { bool, number, oneOfType, shape, string } from 'prop-types';\nimport { VerticalScrollShadow } from '@jotforminc/agent-utils';\nimport MessageList from './MessageList';\nimport MessageView from './MessageView';\nimport FormHeader from './FormHeader';\nconst History = ({ messageList, formLogo, formTitle = 'Form', formID, disableVerticalScrollShadow = false, styles })=>{\n    const messageContainerRef = useRef();\n    if (!disableVerticalScrollShadow) {\n        useEffect(()=>{\n            const content = new VerticalScrollShadow({\n                target: '#chat-container',\n                shadowColor: 'rgba(0,0,0,.08)',\n                shadowHeight: 32\n            });\n            content.init();\n        }, []);\n    }\n    const { pageBackgroundStart = '#DADEF3', pageBackgroundEnd = '#DADEF3', chatBackground = '#ffffff', inputBackground = '#F3F3FE', inputTextColor = '#0a1551', sendButtonBackground = '#0a1551', sendButtonIconColor = '#ffffff', agentBackgroundStart = '#C8CEED', agentBackgroundEnd = '#C8CEED', fontFamily = 'inter, sans-serif' } = styles || {};\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"style\", {\n                children: `\n          :root {\n            --chatBg: ${chatBackground};\n            --pageBackgroundStart: ${pageBackgroundStart};\n            --pageBackgroundEnd: ${pageBackgroundEnd};\n            --inputBackground: ${inputBackground};\n            --inputTextColor: ${inputTextColor};\n            --sendButtonBackground: ${sendButtonBackground};\n            --sendButtonIconColor: ${sendButtonIconColor};\n            --agentBackgroundStart: ${agentBackgroundStart};\n            --agentBackgroundEnd: ${agentBackgroundEnd};\n            --fontFamily: ${fontFamily};\n          }\n      `\n            }),\n            /*#__PURE__*/ _jsx(Flex, {\n                grow: \"1\",\n                className: \"p-4 lg:pb-10 lg:pt-10 overflow-hidden relative newUI\",\n                \"data-preview-mode\": \"view\",\n                \"data-view-mode\": \"view\",\n                children: /*#__PURE__*/ _jsx(Flex, {\n                    direction: \"column\",\n                    className: \"gap-4 max-w-xl mx-auto w-full relative z-2\",\n                    children: /*#__PURE__*/ _jsx(Flex, {\n                        grow: \"1\",\n                        className: \"w-full chat-container\",\n                        children: /*#__PURE__*/ _jsxs(Flex, {\n                            grow: \"1\",\n                            direction: \"column\",\n                            className: \"chat relative px-2 lg:px-12 py-3 lg:pb-3 lg:pt-4\",\n                            children: [\n                                /*#__PURE__*/ _jsx(Flex, {\n                                    direction: \"column\",\n                                    alignItems: \"center\",\n                                    className: \"relative w-full my-2 lg:mb-4\",\n                                    children: /*#__PURE__*/ _jsx(FormHeader, {\n                                        logoClass: \"w-16 h-16 object-contain chat-logo lg:hiddenjf\",\n                                        formLogo: formLogo,\n                                        formTitle: formTitle\n                                    })\n                                }),\n                                /*#__PURE__*/ _jsx(Flex, {\n                                    grow: \"1\",\n                                    direction: \"column\",\n                                    className: \"gap-8 overflow-y-hidden\",\n                                    children: /*#__PURE__*/ _jsx(Flex, {\n                                        grow: \"1\",\n                                        direction: \"column\",\n                                        className: \"overflow-y-auto gap-8 js-loaded-ssr\",\n                                        ref: messageContainerRef,\n                                        id: \"chat-container\",\n                                        children: /*#__PURE__*/ _jsx(MessageList, {\n                                            messageList: messageList,\n                                            MessageComponent: MessageView,\n                                            viewMode: true,\n                                            formID: formID\n                                        })\n                                    })\n                                })\n                            ]\n                        })\n                    })\n                })\n            })\n        ]\n    });\n};\nHistory.propTypes = {\n    messageList: shape.isRequired,\n    formLogo: string.isRequired,\n    formTitle: string,\n    formID: oneOfType([\n        string,\n        number\n    ]).isRequired,\n    disableVerticalScrollShadow: bool,\n    styles: shape({})\n};\nexport default History;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useRef, useState, useEffect, forwardRef, useMemo } from 'react';\nimport { bool, string } from 'prop-types';\nimport { ButtonField as Button } from '@jotforminc/button-field';\nimport { TwoButtonPopup } from '@jotforminc/two-button-popup';\nimport { capitalizeFirstLetter } from '@jotforminc/utils';\nimport styled from 'styled-components';\nimport Fuse from 'fuse.js';\nimport { t } from '@jotforminc/translation';\nimport { IconTrashExclamationFilled } from '@jotforminc/svg-icons';\nimport { useRole } from '@jotforminc/permissions';\nimport TetheredMenu from '../TetheredMenu';\nimport colors from './colors';\nimport { classNames, getNextAvailableTagKey } from '../../utils';\nimport SVG from '../SVG';\nimport { withWatchMan } from '../../utils/WatchmanRecorder';\nconst Drop = styled.button`\n  background: ${({ fill })=>`${fill}`};\n  width: 20px;\n  height: 20px;\n  border-radius: 100%;\n  display: inline-grid;\n  border: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  svg {\n    width: 12px;\n    mix-blend-mode: multiply; \n    * {\n      fill: ${({ fill })=>`${fill}`};\n    }\n    .isTetherOpened & {\n      mix-blend-mode: normal;\n    * {\n      fill: #ffffff;\n    }\n    }\n  }\n`;\n/* eslint-disable react/prop-types */ const ColorPanel = ({ color, onSelectColor })=>{\n    return /*#__PURE__*/ _jsxs(\"div\", {\n        className: \"color-panel\",\n        children: [\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"color-panel-header\",\n                children: [\n                    /*#__PURE__*/ _jsx(SVG, {\n                        name: \"IconDropletFilled\"\n                    }),\n                    t('Select a color')\n                ]\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"color-panel-body\",\n                role: \"menu\",\n                children: colors.map(({ label, hex: background })=>/*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        onClick: ()=>onSelectColor(background),\n                        style: {\n                            background\n                        },\n                        \"aria-label\": t(label),\n                        role: \"menuitem\",\n                        children: color && color === background && /*#__PURE__*/ _jsx(SVG, {\n                            name: \"iconCheck\"\n                        })\n                    }, background))\n            })\n        ]\n    });\n};\nconst TagItem = ({ value, choosen, onClickTag, color, onSelectColor, onEdit, onDelete, active, error, containerRef, tabIndex, setError, id, setIsInnerMenuOpened, isCollaborator })=>{\n    const subMenuRef = useRef();\n    const colorMenuRef = useRef();\n    const tagButtonRef = useRef();\n    const colorButtonRef = useRef();\n    const textRef = useRef();\n    const [isEditing, setIsEditing] = useState(false);\n    const handleClickDelete = ()=>{\n        subMenuRef.current.hide();\n        onDelete();\n    };\n    const handleClickEdit = ()=>{\n        setIsEditing(true);\n        subMenuRef.current.hide();\n    };\n    const handleEdit = ()=>{\n        var _textRef_current, _textRef_current1;\n        if (!((_textRef_current = textRef.current) === null || _textRef_current === void 0 ? void 0 : _textRef_current.value) && setError) {\n            setError({\n                [id]: t('Please enter at least 1 letter')\n            });\n            return;\n        }\n        setIsEditing(false);\n        const newValue = (_textRef_current1 = textRef.current) === null || _textRef_current1 === void 0 ? void 0 : _textRef_current1.value.trim();\n        if (newValue !== value) {\n            onEdit(newValue);\n        }\n    };\n    const handleSelectColor = (newColor)=>{\n        if (newColor !== color) {\n            onSelectColor(newColor);\n        }\n    };\n    const handleClickTag = ()=>{\n        if (!isEditing) {\n            onClickTag();\n        }\n    };\n    const revertValue = ()=>{\n        textRef.current.value = value;\n        setIsEditing(false);\n    };\n    useEffect(()=>{\n        if (!textRef.current && !isEditing) return;\n        textRef.current.focus();\n        textRef.current.setSelectionRange(0, value.length);\n    }, [\n        isEditing\n    ]);\n    useEffect(()=>{\n        if (!textRef.current) return;\n        textRef.current.value = value;\n    }, [\n        value\n    ]);\n    useEffect(()=>{\n        if (!textRef.current) return;\n        if (error) {\n            textRef.current.value = value;\n            textRef.current.focus();\n            return;\n        }\n        if (!isEditing) setIsEditing(true);\n    }, [\n        error\n    ]);\n    const selectedColor = useMemo(()=>{\n        var _colors_find;\n        return ((_colors_find = colors.find((item)=>item.hex === color)) === null || _colors_find === void 0 ? void 0 : _colors_find.label) || '';\n    }, [\n        colors\n    ]);\n    return /*#__PURE__*/ _jsxs(\"li\", {\n        role: \"group\",\n        \"aria-label\": `${t('Tag Item')}: ${value}`,\n        className: classNames('jfTagMenu-body-tagsList', {\n            choosen\n        }),\n        children: [\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: classNames('jfTagMenu-body-tags-item', {\n                    active\n                }),\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        onClick: handleClickTag,\n                        style: {\n                            background: color\n                        },\n                        className: classNames('jfTagMenu-body-tags-itemContainer', 'shake', {\n                            error\n                        }),\n                        tabIndex: tabIndex,\n                        role: \"button\",\n                        children: [\n                            isEditing ? /*#__PURE__*/ _jsx(\"input\", {\n                                className: \"jfTagMenu-body-tags-text\",\n                                onBlur: revertValue,\n                                ref: textRef,\n                                onKeyUp: (e)=>{\n                                    if (e.key === 'Enter' && !value.length <= 0) {\n                                        handleEdit();\n                                    }\n                                },\n                                onChange: ()=>value.length > 0 && error && setError(null),\n                                defaultValue: value,\n                                \"aria-label\": error && error\n                            }) : /*#__PURE__*/ _jsx(_Fragment, {\n                                children: /*#__PURE__*/ _jsx(\"label\", {\n                                    \"aria-label\": `${value} ${t('Tag')}: ${choosen ? t('selected') : t('not selected')}`,\n                                    htmlFor: `${value}tagitem`,\n                                    children: value\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(SVG, {\n                                name: \"iconCheck\"\n                            })\n                        ]\n                    }),\n                    !isCollaborator && /*#__PURE__*/ _jsxs(_Fragment, {\n                        children: [\n                            /*#__PURE__*/ _jsx(TetheredMenu, {\n                                ref: colorMenuRef,\n                                renderElementToRef: containerRef.current,\n                                attachment: \"top right\",\n                                targetAttachment: \"bottom right\",\n                                onVisibilityChange: (isopened)=>setIsInnerMenuOpened(isopened),\n                                targetOffset: \"0 9px\",\n                                style: {\n                                    width: '168px',\n                                    marginTop: '5px',\n                                    zIndex: 50\n                                },\n                                containerProps: {\n                                    role: 'menu',\n                                    className: classNames('jfTagMenu dark jfMenu forColorMenu isVisible')\n                                },\n                                button: /*#__PURE__*/ _jsx(Drop, {\n                                    \"aria-label\": `${t('Change Color')}: ${selectedColor}`,\n                                    ref: colorButtonRef,\n                                    fill: color,\n                                    children: /*#__PURE__*/ _jsx(SVG, {\n                                        name: \"IconDropletFilled\"\n                                    })\n                                }),\n                                children: /*#__PURE__*/ _jsx(ColorPanel, {\n                                    color: color,\n                                    onSelectColor: handleSelectColor\n                                })\n                            }),\n                            /*#__PURE__*/ _jsx(TetheredMenu, {\n                                onVisibilityChange: (isopened)=>setIsInnerMenuOpened(isopened),\n                                ref: subMenuRef,\n                                attachment: \"top right\",\n                                targetAttachment: \"bottom right\",\n                                targetOffset: \"0 9px\",\n                                style: {\n                                    width: '210px',\n                                    marginTop: '5px',\n                                    marginLeft: '-5px',\n                                    zIndex: 50\n                                },\n                                button: /*#__PURE__*/ _jsx(Button, {\n                                    className: \"isMoreButton jfButton-padding-medium\",\n                                    icon: /*#__PURE__*/ _jsx(SVG, {\n                                        name: \"IconEllipsisVertical\"\n                                    }),\n                                    ref: tagButtonRef,\n                                    \"aria-label\": `${t('More button for')} ${value} tag`,\n                                    \"aria-haspopup\": \"true\"\n                                }),\n                                containerProps: {\n                                    role: 'menu',\n                                    className: classNames('jfTagMenu dark jfMenu forMoreMenu isVisible')\n                                },\n                                children: /*#__PURE__*/ _jsxs(_Fragment, {\n                                    children: [\n                                        /*#__PURE__*/ _jsx(Button, {\n                                            className: \"isToolbarButton jfButton-padding-large\",\n                                            icon: /*#__PURE__*/ _jsx(SVG, {\n                                                name: \"IconPencilToSquare\"\n                                            }),\n                                            tabIndex: 0,\n                                            onClick: handleClickEdit,\n                                            \"aria-label\": `${t('Edit')} ${value} tag`,\n                                            children: t('Edit')\n                                        }),\n                                        /*#__PURE__*/ _jsx(Button, {\n                                            className: \"isToolbarButton jfButton-padding-large\",\n                                            icon: /*#__PURE__*/ _jsx(SVG, {\n                                                name: \"IconTrashFilled\"\n                                            }),\n                                            onClick: handleClickDelete,\n                                            tabIndex: 0,\n                                            \"aria-label\": `${t('Delete')} ${value} tag`,\n                                            children: t('Delete')\n                                        })\n                                    ]\n                                })\n                            })\n                        ]\n                    })\n                ]\n            }),\n            isEditing && !error && /*#__PURE__*/ _jsx(\"span\", {\n                className: \"jfTagMenu-info\",\n                children: \"Press Enter to save\"\n            }),\n            error && /*#__PURE__*/ _jsx(\"span\", {\n                className: \"jfTagMenu-info error\",\n                children: error\n            })\n        ]\n    });\n};\n// eslint-disable-next-line complexity\nconst Tags = /*#__PURE__*/ forwardRef(({ isTagMenuVisible, tagQuestion, submission, onAssignTag, onUpdateTag, setVisibility, onSaveDummyQuestions, activeTab, tagsArray }, ref)=>{\n    const tagAnswer = useMemo(()=>{\n        var _submission_answers_tagQuestion_qid;\n        const rawAnswer = (submission === null || submission === void 0 ? void 0 : (_submission_answers_tagQuestion_qid = submission.answers[tagQuestion === null || tagQuestion === void 0 ? void 0 : tagQuestion.qid]) === null || _submission_answers_tagQuestion_qid === void 0 ? void 0 : _submission_answers_tagQuestion_qid.answer) || [];\n        return Array.isArray(rawAnswer) ? rawAnswer : Object.values(rawAnswer);\n    }, [\n        submission,\n        tagQuestion\n    ]);\n    const lastRef = useRef();\n    const [suggestIndex, setSuggestIndex] = useState(0);\n    const [selectionStyle, setSelectionStyle] = useState(false);\n    const [onBlured, setBlured] = useState(false);\n    const [error, setError] = useState(null);\n    const [suggestOpen, setSuggestOpen] = useState(true);\n    const [searchValue, setSearchValue] = useState('');\n    const [selectedColor, setSelectedColor] = useState();\n    const [lineError, setLineError] = useState(null);\n    const role = useRole();\n    const fuseStore = useMemo(()=>new Fuse(tagsArray, {\n            threshold: 0,\n            keys: [\n                'value'\n            ]\n        }), [\n        tagsArray\n    ]);\n    const isCollaborator = role === 'supporter';\n    const filterTags = useMemo(()=>searchValue ? fuseStore.search(searchValue).map(({ item })=>item) : tagsArray, [\n        searchValue,\n        fuseStore,\n        tagsArray\n    ]);\n    const nextAvailableColor = useMemo(()=>{\n        const availableColor = colors.find((c)=>{\n            return tagsArray.every((tag)=>{\n                return tag.color !== c.hex;\n            });\n        });\n        return (availableColor === null || availableColor === void 0 ? void 0 : availableColor.hex) || colors[Math.floor(Math.random() * (colors.length - 0 + 1))].hex;\n    }, [\n        colors,\n        tagsArray\n    ]);\n    useEffect(()=>{\n        setSelectedColor(null);\n    }, [\n        tagAnswer,\n        tagsArray\n    ]);\n    const lastValue = useMemo(()=>{\n        if (!filterTags[suggestIndex] || searchValue.length === 0 || !suggestOpen || onBlured) {\n            return '';\n        }\n        return filterTags[suggestIndex].value.toLowerCase().slice(searchValue.length);\n    }, [\n        filterTags,\n        suggestOpen,\n        onBlured,\n        suggestIndex\n    ]);\n    const finalValue = useMemo(()=>{\n        const final = searchValue ? searchValue.concat('', lastValue) : '';\n        if (final.length < 96) {\n            return final;\n        }\n        return final.substr(0, 96);\n    }, [\n        searchValue,\n        lastValue\n    ]);\n    useEffect(()=>{\n        var _filterTags__value;\n        setError(null);\n        if (!searchValue) {\n            setSuggestOpen(true);\n        }\n        if (filterTags.length > 0 && ((_filterTags__value = filterTags[0].value) === null || _filterTags__value === void 0 ? void 0 : _filterTags__value.toLowerCase()) === (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase())) setSuggestOpen(true);\n        if (filterTags.length === 0) setSuggestOpen(false);\n    }, [\n        searchValue,\n        filterTags\n    ]);\n    useEffect(()=>{\n        if (lastValue.length === 0) return;\n        lastRef.current.setSelectionRange(searchValue.length, searchValue.length + lastValue.length);\n        lastRef.current.autostyle = true;\n        setSelectionStyle(true);\n    }, [\n        lastValue\n    ]);\n    useEffect(()=>{\n        if (finalValue.length === 0) {\n            lastRef.current.focus();\n        }\n    }, [\n        finalValue\n    ]);\n    useEffect(()=>{\n        const handleEscape = (e)=>{\n            if (lastRef.current.isInnerMenuOpened) {\n                if (ref.current) ref.current.focus();\n                return;\n            }\n            if (e.key === 'Escape') {\n                ref.current.focus();\n                setVisibility(false);\n            }\n        };\n        if (isTagMenuVisible && lastRef.current) {\n            document.addEventListener('keyup', handleEscape);\n            setSearchValue('');\n            lastRef.current.focus();\n            if ((tagQuestion === null || tagQuestion === void 0 ? void 0 : tagQuestion.qid) === 'tags') {\n                onSaveDummyQuestions();\n            }\n            return;\n        }\n        document.removeEventListener('keyup', handleEscape);\n    }, [\n        isTagMenuVisible\n    ]);\n    const handleClickTag = (key)=>withWatchMan('Tag-added', capitalizeFirstLetter(activeTab), ()=>{\n            const tagKey = `{${key}}`;\n            const existingTag = tagAnswer.includes(tagKey);\n            onAssignTag(existingTag ? tagAnswer.filter((val)=>val !== tagKey) : [\n                tagKey,\n                ...tagAnswer\n            ]);\n        });\n    const inputCursorPosition = ()=>{\n        const start = lastRef.current.selectionStart;\n        const end = lastRef.current.selectionEnd;\n        const diff = end - start;\n        if (start >= 0 && start === end) {\n            lastRef.current.pos = start;\n            lastRef.current.selection = false;\n            setSuggestIndex(0);\n            setSearchValue(searchValue + lastValue);\n            return;\n        }\n        lastRef.current.selection = {\n            start: start,\n            end: end,\n            selected: diff\n        };\n    };\n    const handleSelectionStyle = ()=>{\n        if (lastRef.current.autostyle) {\n            lastRef.current.autostyle = false;\n            return;\n        }\n        setSelectionStyle(false);\n    };\n    const handleCreate = withWatchMan('Tag-NewCreated', capitalizeFirstLetter(activeTab), ()=>{\n        const tags = tagQuestion === null || tagQuestion === void 0 ? void 0 : tagQuestion.options_array;\n        if (searchValue.length === 0) {\n            lastRef.current.focus();\n            setError(t('Please enter at least 1 letter'));\n            return;\n        }\n        const tag = tagsArray.find((item)=>item.value === searchValue);\n        const tagKey = tag ? tag.key : getNextAvailableTagKey(tags);\n        const uniqKeyID = `{${tagKey}}`;\n        const existingTag = tagAnswer.includes(uniqKeyID);\n        if (existingTag) {\n            return;\n        }\n        setSuggestOpen(false);\n        const newTag = {\n            [tagKey]: {\n                key: tagKey,\n                value: searchValue,\n                isDeleted: false,\n                color: selectedColor || nextAvailableColor\n            }\n        };\n        const newTags = tag ? _object_spread_props(_object_spread({}, tags), {\n            [tag.key]: _object_spread_props(_object_spread({}, tag), {\n                isDeleted: false\n            })\n        }) : _object_spread({}, tags, newTag);\n        onUpdateTag({\n            options_array: newTags\n        });\n        onAssignTag([\n            ...tagAnswer,\n            uniqKeyID\n        ]);\n        setSearchValue('');\n    });\n    const handleTagFilterChange = (e)=>{\n        setSuggestIndex(0);\n        if (e.target.value.length > searchValue.length && filterTags.length > 0) setSuggestOpen(true);\n        setSearchValue(e.target.value);\n    };\n    const handleSelectColor = (tag)=>withWatchMan('Tag-SettingsColorChanged', capitalizeFirstLetter(activeTab), (color)=>{\n            const { options_array: optionsArray } = tagQuestion;\n            onUpdateTag({\n                options_array: _object_spread_props(_object_spread({}, optionsArray), {\n                    [tag.key]: _object_spread_props(_object_spread({}, tag), {\n                        color\n                    })\n                })\n            });\n        });\n    const handleEditValue = (tag)=>withWatchMan('Tag-SettingsTextUpdated', capitalizeFirstLetter(activeTab), (value)=>{\n            const optionExists = tagsArray.find((option)=>option.value === value);\n            if (optionExists) {\n                setTimeout(()=>setLineError(null), 2000);\n                return setLineError({\n                    [tag.key]: t('That tag is already exist. Try another.')\n                });\n            }\n            const { options_array: optionsArray } = tagQuestion;\n            onUpdateTag({\n                options_array: _object_spread_props(_object_spread({}, optionsArray), {\n                    [tag.key]: _object_spread_props(_object_spread({}, tag), {\n                        value\n                    })\n                })\n            });\n        });\n    const handleKeyDown = (e)=>{\n        var KeyID = e.keyCode;\n        switch(KeyID){\n            case 8:\n                if (lastRef.current.selection) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setSuggestOpen(false);\n                    setSearchValue(lastRef.current.value.substring(0, lastRef.current.selection.start) + lastRef.current.value.substring(lastRef.current.selection.end));\n                    lastRef.current.setSelectionRange(lastRef.current.selection.start, lastRef.current.selection.start);\n                }\n                return;\n            case 13:\n            case 10:\n                if (filterTags.length > 0 && suggestOpen && searchValue.length > 0) {\n                    handleClickTag(filterTags[suggestIndex].key)();\n                } else {\n                    if (isCollaborator) return;\n                    handleCreate();\n                }\n                return;\n            case 40:\n                e.preventDefault();\n                e.stopPropagation();\n                setSuggestIndex(suggestIndex >= filterTags.length - 1 ? 0 : suggestIndex + 1);\n                return false;\n            case 38:\n                e.preventDefault();\n                e.stopPropagation();\n                setSuggestIndex(suggestIndex <= 0 ? filterTags.length - 1 : suggestIndex - 1);\n                return false;\n            default:\n                break;\n        }\n    };\n    const [isWarningVisible, setWarningVisibility] = useState();\n    const onDeleteSubmit = withWatchMan('Tag-SettingsDeleted', capitalizeFirstLetter(activeTab), ()=>{\n        const { options_array: optionsArray } = tagQuestion;\n        const tagKey = isWarningVisible;\n        const tag = optionsArray[tagKey];\n        onUpdateTag({\n            options_array: _object_spread_props(_object_spread({}, optionsArray), {\n                [tagKey]: _object_spread_props(_object_spread({}, tag), {\n                    isDeleted: true\n                })\n            })\n        });\n        setWarningVisibility();\n    });\n    const containerDom = global.document.getElementById('modal-container');\n    const handleInnerMenuOpened = (isOpened)=>{\n        lastRef.current.isInnerMenuOpened = isOpened;\n    };\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(\"div\", {\n                ref: ref,\n                \"aria-hidden\": !isTagMenuVisible,\n                \"aria-label\": t('Tags'),\n                role: \"group\",\n                className: classNames('jfTagMenu forTags', isTagMenuVisible && 'isVisible'),\n                children: /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfTagMenu-container\",\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jfTagMenu-header\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"h4\", {\n                                    title: t('Tags'),\n                                    children: t('Tags')\n                                }),\n                                /*#__PURE__*/ _jsx(Button, {\n                                    role: \"button\",\n                                    \"aria-label\": t('Close Tags'),\n                                    onClick: ()=>setVisibility(false),\n                                    className: \"jfTagMenu-header-iconClose\",\n                                    children: /*#__PURE__*/ _jsx(SVG, {\n                                        name: \"IconXmark\"\n                                    })\n                                })\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jfTagMenu-body\",\n                            children: [\n                                /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"jfTagMenu-body-input\",\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"input\", {\n                                            \"aria-label\": \"Write a Tag name\",\n                                            onKeyDown: handleKeyDown,\n                                            onFocus: ()=>setBlured(false),\n                                            onBlur: ()=>setBlured(true),\n                                            onKeyUp: handleSelectionStyle,\n                                            onMouseUp: handleSelectionStyle,\n                                            onSelectCapture: inputCursorPosition,\n                                            className: `jfTagMenu-body-inputInput shake ${error ? 'error' : ''} ${selectionStyle ? 'auto-select' : ''}`,\n                                            ref: lastRef,\n                                            value: finalValue,\n                                            onChange: handleTagFilterChange,\n                                            placeholder: t(`${isCollaborator ? '' : 'Create or '}Search a Tag`),\n                                            tabIndex: isTagMenuVisible ? 0 : -1,\n                                            \"aria-hidden\": !isTagMenuVisible\n                                        }),\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"jfTagMenu-info\",\n                                            children: [\n                                                error && /*#__PURE__*/ _jsx(\"div\", {\n                                                    className: \"jfTagMenu-infoError error-input\",\n                                                    children: error\n                                                }),\n                                                searchValue.length > 0 && /*#__PURE__*/ _jsx(\"div\", {\n                                                    className: \"jfTagMenu-infoInfo\",\n                                                    children: t(suggestOpen || isCollaborator ? filterTags.length > 1 && 'Press \"Up\" or \"Down\" keys to switch' || 'Press \"Enter\" to select tag' : 'Press \"Enter\" to create new tag')\n                                                })\n                                            ]\n                                        })\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsx(\"div\", {\n                                    className: \"jfTagMenu-containerScroll\",\n                                    children: /*#__PURE__*/ _jsx(\"div\", {\n                                        role: \"group\",\n                                        \"aria-label\": t('Available Tags'),\n                                        className: \"jfTagMenu-body-tagsCover\",\n                                        children: suggestOpen || isCollaborator ? /*#__PURE__*/ _jsx(\"ul\", {\n                                            className: \"jfTagMenu-body-tags\",\n                                            children: filterTags.map((item, index)=>{\n                                                return /*#__PURE__*/ _jsx(TagItem, {\n                                                    setIsInnerMenuOpened: (isOpened)=>handleInnerMenuOpened(isOpened),\n                                                    ariaLabel: item.value,\n                                                    containerRef: ref,\n                                                    active: index === suggestIndex,\n                                                    onSelectColor: handleSelectColor(item),\n                                                    choosen: tagAnswer.includes(`{${item.key}}`),\n                                                    onClickTag: handleClickTag(item.key),\n                                                    onEdit: handleEditValue(item),\n                                                    value: item.value,\n                                                    error: lineError && lineError[item.key],\n                                                    setError: setLineError,\n                                                    color: item.color,\n                                                    id: item.key,\n                                                    tabIndex: isTagMenuVisible ? 0 : -1,\n                                                    onDelete: ()=>{\n                                                        setWarningVisibility(item.key);\n                                                    },\n                                                    isCollaborator: isCollaborator\n                                                }, item.key);\n                                            })\n                                        }) : /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"jfTagMenu-body-tags\",\n                                            children: /*#__PURE__*/ _jsx(ColorPanel, {\n                                                color: selectedColor || nextAvailableColor,\n                                                onSelectColor: setSelectedColor\n                                            })\n                                        })\n                                    })\n                                })\n                            ]\n                        }),\n                        !isCollaborator && (!suggestOpen || searchValue.length === 0) && /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfTagMenu-footer\",\n                            children: /*#__PURE__*/ _jsxs(Button, {\n                                onClick: handleCreate,\n                                disable: true,\n                                className: `createTag ${searchValue.length === 0 ? 'disable' : ''}`,\n                                tabIndex: isTagMenuVisible ? 0 : -1,\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"span\", {\n                                        children: t('Create a new tag')\n                                    }),\n                                    finalValue && /*#__PURE__*/ _jsx(\"span\", {\n                                        className: \"tagNameContainer\",\n                                        children: `${\"'\"}${finalValue}${\"'\"}`\n                                    })\n                                ]\n                            })\n                        })\n                    ]\n                })\n            }),\n            isWarningVisible && /*#__PURE__*/ _jsx(TwoButtonPopup, {\n                title: /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfModal-header-cover\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfModal-header-iconCover\",\n                            children: /*#__PURE__*/ _jsx(IconTrashExclamationFilled, {\n                                className: \"w-8 h-8 shrink-0 color-red-400\"\n                            })\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfModal-header-cover-title\",\n                            children: t('Delete Tag')\n                        }),\n                        /*#__PURE__*/ _jsx(\"p\", {\n                            className: \"jfModal-header-cover-highlight\",\n                            children: t('Are you sure you want to permanently delete the selected tag?')\n                        }),\n                        /*#__PURE__*/ _jsxs(\"p\", {\n                            className: \"jfModal-header-cover-small\",\n                            children: [\n                                t('Current tag will be deleted from the tag list but not from the assigned submissions.'),\n                                t('This action cannot be'),\n                                /*#__PURE__*/ _jsx(\"b\", {\n                                    children: t(' undone!')\n                                })\n                            ]\n                        })\n                    ]\n                }),\n                className: \"dialog warning forDelete withIcon\",\n                onClose: ()=>setWarningVisibility(false),\n                onSave: onDeleteSubmit,\n                modalContainer: containerDom,\n                saveText: t('DELETE'),\n                cancelText: t('CANCEL'),\n                showClose: true\n            })\n        ]\n    });\n});\nexport default Tags;\nTags.propTypes = {\n    isTagMenuVisible: bool,\n    activeTab: string\n};\nTags.defaultProps = {\n    isTagMenuVisible: false,\n    activeTab: 'inbox'\n};\n","/* eslint-disable no-nested-ternary */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { t } from '@jotforminc/translation';\nimport styled, { keyframes, css } from 'styled-components';\nimport { rgba } from 'polished';\nimport { shape, string, func } from 'prop-types';\nimport { IconBellDiagonalFilled } from '@jotforminc/svg-icons';\nimport ThreadAvatar from './ThreadAvatar';\nimport { useWorkflow } from '../contexts';\nimport ContactWithApproval from './ContactWithApproval';\n// eslint-disable-next-line max-len\nconst takeoverIcon = \"data:image/svg+xml,%3Csvg width='16' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0C.8955 0 0 .8945 0 2v10l.0117.2227.0313.1953C.2344 13.3242 1.038 14 2 14h7.2617l-1.8135-2.1289c-.2177-.2539-.3554-.5586-.415-.8711H2c-.5527 0-1-.4492-1-1V2a1 1 0 01.3389-.75 1.0113 1.0113 0 01.4795-.2344A.9252.9252 0 012 1h10c.1709 0 .332.043.4727.121.1552.0821.2851.2071.3779.3556A.9892.9892 0 0113 2v6.4766l.9443-.9493c.0186-.0195.0371-.039.0557-.0546V2c0-1.1055-.8955-2-2-2H2z' fill='%23fff'/%3E%3Cpath d='M2.6435 3.1484A.5075.5075 0 013 3h8c.2764 0 .5.2227.5.5a.499.499 0 01-.5.5H3a.499.499 0 01-.5-.5l.0127-.1133a.5213.5213 0 01.1308-.2383zM3 6a.499.499 0 00-.5.5c0 .2773.2236.5.5.5h6a.499.499 0 00.5-.5A.499.499 0 009 6H3zM14.653 8.2316c.3225-.3236.8287-.306 1.1308.0395.3021.3455.2856.888-.0368 1.2116l-4.2696 4.2857c-.3254.3266-.8371.3052-1.1377-.0476l-2.1305-2.5c-.2979-.3496-.2749-.8917.0514-1.2109.3263-.3192.8323-.2946 1.1302.055l1.584 1.8588 3.6782-3.692z' fill='%23fff'/%3E%3C/svg%3E\";\nconst ring = keyframes`\n  0% { transform: rotateZ(0); }\n  1% { transform: rotateZ(15deg); }\n  3% { transform: rotateZ(-14deg); }\n  5% { transform: rotateZ(17deg); }\n  7% { transform: rotateZ(-16deg); }\n  9% { transform: rotateZ(15deg); }\n  11% { transform: rotateZ(-14deg); }\n  13% { transform: rotateZ(13deg); }\n  15% { transform: rotateZ(-12deg); }\n  17% { transform: rotateZ(11deg); }\n  19% { transform: rotateZ(-10deg); }\n  21% { transform: rotateZ(9deg); }\n  23% { transform: rotateZ(-8deg); }\n  25% { transform: rotateZ(7deg); }\n  27% { transform: rotateZ(-6deg); }\n  29% { transform: rotateZ(5deg); }\n  31% { transform: rotateZ(-4deg); }\n  33% { transform: rotateZ(3deg); }\n  35% { transform: rotateZ(-2deg); }\n  37% { transform: rotateZ(1deg); }\n  39% { transform: rotateZ(-0.5deg); }\n  41% { transform: rotateZ(0.5deg); }\n\n  43% { transform: rotateZ(0); }\n  100% { transform: rotateZ(0); }\n`;\nconst textStyle = css`\nfont-size: 12px;\nfont-family: \"Circular\", sans-serif;\nfont-weight: 400;\n`;\nconst Text = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-flex;\n  align-items: center;\n\n  flex-shrink: ${({ shrink })=>`${+!!shrink}`};\n\n  ${textStyle}\n`;\n/* eslint-disable max-len */ /* eslint-enable max-len */ const Avatar = styled(ThreadAvatar)``;\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  cursor: pointer;\n  position: relative;\n\n  border-radius: 4px;\n  overflow: hidden;\n\n  padding: 4px 8px;\n  max-width: 360px;\n\n  * + ${Text} {\n    margin-left: 0.25rem;\n  }\n\n  ${Avatar} + ${Avatar} {\n    margin-left: -5px;\n  }\n`;\nconst WrapperApprover = styled(Wrapper)`\n  background-color: #4599FF;\n  border-color: #4599FF;\n  color: #ffffff;\n  flex-shrink: 0;\n  svg {\n    width: 18px;\n    height: 18px;\n    animation: ${ring} 4s 1s ease-in-out 2;\n    transform-origin: 7px 3px;\n  }\n\n  &:hover {\n    background-color: ${rgba('#4599FF', 0.80)}; /* stylelint-disable-line */\n  }\n`;\nconst WrapperError = styled(Wrapper)`\n  background-color: #D53049;\n  border-color: #D53049;\n\n  ${Text} {\n    color: #ffffff;\n\n    &::before {\n      content: \"!\";\n      background: #ffffff;\n      color: #D53049;\n      border-radius: 9px;\n      height: 18px;\n      width: 18px;\n      font-size: 14px;\n      font-weight: 700;\n      text-align: center;\n      display: flex;\n      align-content: center;\n      justify-content: center;\n      margin-right: 0.25rem;\n    }\n  }\n\n  &:hover {\n    background-color: ${rgba('#D53049', 0.80)}; /* stylelint-disable-line */\n  }\n`;\nconst WrapperOwner = styled(Wrapper)`\n  /*\n  &:hover {\n    background-color: ${rgba('#DBE0EF', 0.20)}; /!* stylelint-disable-line *!/\n\n    &:after {\n      position: absolute;\n      background-color: ${rgba('#01BD6F', 0.90)}; /!* stylelint-disable-line *!/\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      content: url(\"${takeoverIcon}\") \" ${({ textHover })=>textHover}\";\n      color: #ffffff;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      ${textStyle}\n    }\n  }\n  */\n\n  ${Text} {\n    color: #141E46;\n    font-size: 16px;\n  }\n`;\nconst WorkflowButton = ({ className, submission, onClick })=>{\n    var _window;\n    const { taskLists, activeTaskList, isFormOwner, isCollaborator } = useWorkflow();\n    const hasTask = !!(taskLists === null || taskLists === void 0 ? void 0 : taskLists.length);\n    const hasError = (submission === null || submission === void 0 ? void 0 : submission.workflowStatus) === 'ERRORED';\n    const isWorkflowReleased = (_window = window) === null || _window === void 0 ? void 0 : _window.isWorkflowReleased;\n    if (!hasTask && !hasError) return null;\n    const [lastActiveTask] = taskLists === null || taskLists === void 0 ? void 0 : taskLists.filter(({ isActive, isCurrentUserApprover })=>isActive && isCurrentUserApprover).slice(-1);\n    const isApprover = Boolean(lastActiveTask);\n    const renderError = ()=>/*#__PURE__*/ _jsx(WrapperError, {\n            className: className,\n            onClick: onClick,\n            children: /*#__PURE__*/ _jsx(Text, {\n                children: isWorkflowReleased ? 'Error in Workflow' : 'Error in Approval Flow'\n            })\n        });\n    const renderApprover = ()=>/*#__PURE__*/ _jsxs(WrapperApprover, {\n            className: className,\n            onClick: onClick,\n            children: [\n                /*#__PURE__*/ _jsx(IconBellDiagonalFilled, {}),\n                /*#__PURE__*/ _jsx(Text, {\n                    children: t('Action Required')\n                })\n            ]\n        });\n    const renderOwner = ()=>{\n        const approvers = activeTaskList === null || activeTaskList === void 0 ? void 0 : activeTaskList.reduce((res, curr)=>{\n            const { subtasks, taskName, task } = curr;\n            if (Object.keys(subtasks).length) {\n                return [\n                    ...res,\n                    ...Object.values(subtasks).map((subtask)=>_object_spread_props(_object_spread({}, subtask), {\n                            assigneeEmail: subtask.email,\n                            taskName,\n                            task: {\n                                element: task.element\n                            }\n                        }))\n                ];\n            }\n            res.push(curr);\n            return res;\n        }, []);\n        const maximumApproversShow = 4;\n        const otherApproversCount = (approvers === null || approvers === void 0 ? void 0 : approvers.length) - maximumApproversShow;\n        const approverList = approvers === null || approvers === void 0 ? void 0 : approvers.slice(0, maximumApproversShow);\n        const otherApproversCountText = `+${otherApproversCount}`;\n        const filterForAvatars = (approver)=>{\n            var _approver_task, _approver_task_element, _approver_task1;\n            if (approver && (approver === null || approver === void 0 ? void 0 : approver.task) && (approver === null || approver === void 0 ? void 0 : (_approver_task = approver.task) === null || _approver_task === void 0 ? void 0 : _approver_task.element) && (approver === null || approver === void 0 ? void 0 : (_approver_task1 = approver.task) === null || _approver_task1 === void 0 ? void 0 : (_approver_task_element = _approver_task1.element) === null || _approver_task_element === void 0 ? void 0 : _approver_task_element.type)) {\n                return approver.task.element.type !== 'workflow_sign_document';\n            }\n            return approver;\n        };\n        const approverListForAvatars = approverList === null || approverList === void 0 ? void 0 : approverList.filter((approver)=>filterForAvatars(approver));\n        const isAllTasksSignDocuments = approvers === null || approvers === void 0 ? void 0 : approvers.every((approver)=>(approver === null || approver === void 0 ? void 0 : approver.taskName) === 'Sign Document');\n        const isAllTasksForm = approvers === null || approvers === void 0 ? void 0 : approvers.every((approver)=>(approver === null || approver === void 0 ? void 0 : approver.taskName) === 'Form');\n        const isAllTasksApproval = approvers === null || approvers === void 0 ? void 0 : approvers.every((approver)=>(approver === null || approver === void 0 ? void 0 : approver.taskName) === 'Approval');\n        const notShowAvatar = isAllTasksSignDocuments;\n        const taskNameToTaskText = {\n            Approval: 'approval',\n            Form: 'submission',\n            Task: 'task',\n            'Sign Document': 'signature'\n        };\n        const renderApproversText = ()=>{\n            if (!approvers || approvers && (approvers === null || approvers === void 0 ? void 0 : approvers.length) <= 0) {\n                return;\n            }\n            const currentApprover = approvers === null || approvers === void 0 ? void 0 : approvers[0];\n            const { taskName: currentApproverTask } = currentApprover;\n            const currentApproverText = (taskNameToTaskText === null || taskNameToTaskText === void 0 ? void 0 : taskNameToTaskText[currentApproverTask]) || 'approval';\n            if ((approvers === null || approvers === void 0 ? void 0 : approvers.length) === 1) {\n                return /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        !isAllTasksSignDocuments && /*#__PURE__*/ _jsx(Text, {\n                            shrink: true,\n                            children: `${(currentApprover === null || currentApprover === void 0 ? void 0 : currentApprover.name) || (currentApprover === null || currentApprover === void 0 ? void 0 : currentApprover.assigneeEmail)}'s`\n                        }),\n                        /*#__PURE__*/ _jsx(Text, {\n                            children: `${currentApproverText}.`\n                        })\n                    ]\n                });\n            }\n            if ((approvers === null || approvers === void 0 ? void 0 : approvers.length) > 1) {\n                if (isAllTasksSignDocuments || isAllTasksForm || isAllTasksApproval) {\n                    return /*#__PURE__*/ _jsx(Text, {\n                        shrink: true,\n                        children: `${currentApproverText}s.`\n                    });\n                }\n                // extra check for unknown situations\n                return /*#__PURE__*/ _jsx(Text, {\n                    shrink: true,\n                    children: \"actors.\"\n                });\n            }\n        };\n        return /*#__PURE__*/ _jsxs(WrapperOwner, {\n            className: className,\n            onClick: onClick,\n            textHover: \"Take Over\",\n            children: [\n                !notShowAvatar && approverListForAvatars.map((approver)=>/*#__PURE__*/ _jsx(ContactWithApproval, {\n                        approver: approver,\n                        children: /*#__PURE__*/ _jsx(Avatar, {\n                            user: _object_spread_props(_object_spread({}, approver), {\n                                email: approver === null || approver === void 0 ? void 0 : approver.assigneeEmail\n                            }),\n                            className: \"isSmall task\"\n                        })\n                    })),\n                otherApproversCount > 0 && /*#__PURE__*/ _jsx(Avatar, {\n                    className: \"isSmall task forOthers\",\n                    user: {\n                        name: otherApproversCountText\n                    },\n                    maxCharShow: 4\n                }),\n                /*#__PURE__*/ _jsx(Text, {\n                    children: \"Waiting for\"\n                }),\n                renderApproversText()\n            ]\n        });\n    };\n    if (hasError && isFormOwner) return renderError();\n    if (isApprover) return renderApprover();\n    if (isFormOwner || isCollaborator) return renderOwner();\n    return null;\n// return (\n//   isApprover\n//     ? renderApprover()\n//     : isFormOwner\n//       ? hasError\n//         ? renderError()\n//         : renderOwner()\n//       : null\n//\n// );\n};\nWorkflowButton.propTypes = {\n    submission: shape({}).isRequired,\n    className: string,\n    onClick: func\n};\nWorkflowButton.defaultProps = {\n    className: '',\n    onClick: (f)=>f\n};\nexport default WorkflowButton;\n","/* eslint-disable complexity */ /* eslint-disable max-statements */ /* eslint-disable max-lines */ import { _ as _define_property } from \"@swc/helpers/_/_define_property\";\nimport { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { Component, createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\nimport axios from 'axios';\nimport { Resizable } from 're-resizable';\nimport Squire from 'squire-rte';\nimport { t } from '@jotforminc/translation';\nimport { Dialog } from '@jotforminc/dialog';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { formatBytes, validateEmail } from '@jotforminc/utils';\nimport { isEnterprise as isEnterpriseFunc, isNewSMTPFlow } from '@jotforminc/enterprise-utils';\nimport { IconEnvelopeClosedFilled, IconXmark, IconExclamationCircle, IconGearFilled, IconLineHorizontal, IconArrowsToCenter, IconArrowsFromCenter, IconInfo, IconRocketSquareBrokenFilled } from '@jotforminc/svg-icons';\nimport { getActiveApp, getFullPath } from '@jotforminc/router-bridge';\nimport BrandingTooltip from './BrandingTooltip';\nimport { arrangeCustomSender, arrangeCustomSenderNewSMTPFlow, editorInputHandler, extractResourceID, getSenderEmail, getSenderOptions, purifyContent } from '../utils';\nimport { sendEmailAPI } from '../utils/sendEmailAPI';\nimport NewSenderEmail from './NewSenderEmail';\nimport TagsInput from '../fields/TagsInput';\nimport MixedTagInput from '../fields/MixedTagInput';\nimport DelayedComponent from './DelayedComponent';\nimport '../styles/_jfNewMessage.scss';\nimport '../styles/_jfButton.scss';\nimport MessageFooter from './MessageFooter';\nimport { PAID_PLANS } from '../constants';\nimport { getSenderEmailList } from '../utils/addSMTPAccount';\n/**\n * A component to display an e-mail popover.\n * Requires a Popover container (JFComponents/Popover/container) up in the react tree.\n * You can place this near the root of your react application.\n */ export class Message extends Component {\n    static getDerivedStateFromProps(nextProps, prevState) {\n        const { title, messageTo, messageFrom, messageFromName, messageReplyTo, subject, isMessageOpen, messageViewMode, showMinimizeButton, showChangeMessageViewModeButton, contentStatus, user } = nextProps;\n        if (isMessageOpen !== prevState.isMessageOpen) {\n            // Just hiding message is enoughs\n            if (!isMessageOpen) return {\n                isMessageOpen\n            };\n            // Return to initial state to component\n            return {\n                title,\n                messageTo,\n                messageFrom,\n                messageFromName,\n                messageReplyTo,\n                disableSend: false,\n                subject,\n                isMessageMinimized: messageViewMode === 'minimized',\n                isMessageFullScreen: messageViewMode === 'fullscreen',\n                isMessageOpen,\n                showMinimizeButton,\n                showChangeMessageViewModeButton,\n                contentStatus,\n                isFreeUser: user.account_type.name === 'FREE'\n            };\n        }\n        if (nextProps.title !== prevState.title) {\n            return {\n                title: nextProps.title\n            };\n        }\n        if (contentStatus !== prevState.contentStatus) {\n            return {\n                contentStatus\n            };\n        }\n        return null;\n    }\n    fetchSenderEmails() {\n        const resourceID = extractResourceID(getFullPath());\n        const resourceType = this.getResourceType(getActiveApp());\n        const { user = {} } = this.props;\n        const { messageFrom = '' } = this.state;\n        getSenderEmailList(resourceID, resourceType).then((resp)=>{\n            const senderOptions = getSenderOptions(isNewSMTPFlow(user) ? arrangeCustomSenderNewSMTPFlow(resp) : arrangeCustomSender(resp));\n            this.setState({\n                customSenders: senderOptions\n            });\n            if (!senderOptions.find(({ value = '' })=>value === messageFrom)) {\n                var _senderOptions_;\n                this.setState({\n                    messageFrom: ((_senderOptions_ = senderOptions[0]) === null || _senderOptions_ === void 0 ? void 0 : _senderOptions_.value) || ''\n                });\n            }\n        }).catch(({ message = 'Something Went Wrong' })=>{\n            console.error(message);\n        });\n    }\n    componentDidMount() {\n        // TODO: check loaded\n        this.editor = new Squire(this.editorDiv, {\n            blockTag: 'DIV'\n        });\n        const { contentStatus, user: { senderEmails }, hasAttachment, withSubmissionTableProps } = this.props;\n        this.fetchSenderEmails();\n        if (contentStatus) {\n            // For to render `Preparing content...` placeholder\n            this.setEmailContents();\n        }\n        if (withSubmissionTableProps && this.transitionWrapper.current) {\n            var _this_transitionWrapper;\n            (_this_transitionWrapper = this.transitionWrapper) === null || _this_transitionWrapper === void 0 ? void 0 : _this_transitionWrapper.current.addEventListener('transitionend', (e)=>{\n                this.setInputCounts(e);\n            });\n        }\n        this.editor.addEventListener('willPaste', (e)=>{\n            e.preventDefault();\n            const div = document.createElement('div');\n            div.appendChild(e.fragment);\n            const text = div.innerHTML;\n            const defaultText = this.editor.getSelectedText();\n            const encodedText = purifyContent(`${defaultText}${text}`);\n            this.editor.insertHTML(encodedText);\n        });\n        this.editor.addEventListener('keydown', debounce(this.purifyInputContent, 300));\n        this.setState({\n            senderEmails\n        });\n        this.editor.addEventListener('pathChange', ({ path })=>this.setState({\n                path\n            }));\n        this.editor.addEventListener('focus', ()=>{\n            this.selection = this.editor.getSelection();\n            if (withSubmissionTableProps) {\n                this.setEnabled();\n            }\n        });\n        const { messageTo } = this.state;\n        const userType = this.userPlans;\n        const messageToCount = this.getEmailCount(messageTo);\n        // If the free user has multiple emails, set the first email as the messageTo.\n        if (withSubmissionTableProps && userType === 'FREE' && messageToCount > 0) {\n            this.setState({\n                messageTo: messageTo.split(',')[0]\n            });\n        }\n        // TODO WIP\n        // eslint-disable-next-line react/destructuring-assignment\n        if (hasAttachment) {\n            [\n                'dragenter',\n                'dragover',\n                'dragleave'\n            ].forEach((eventName)=>{\n                this.dropAreaRef.current.addEventListener(eventName, (e)=>{\n                    e.preventDefault();\n                    e.stopPropagation();\n                });\n            });\n        }\n    }\n    shouldComponentUpdate(nextProps, nextState) {\n        /*\n      Why?: To delete the bounce class\n      from the message container when completed\n      What is 350?: 350ms is animation duration value from CSS\n    */ if (nextState.hasErrorClass) {\n            setTimeout(()=>{\n                this.setState({\n                    hasErrorClass: false\n                });\n            }, 350);\n        }\n        const { toLeft, withSubmissionTableProps } = this.props;\n        return !isEqual(nextState, this.state) || !isEqual(nextProps.toLeft, toLeft) || !isEqual(nextProps.withSubmissionTableProps, withSubmissionTableProps);\n    }\n    componentDidUpdate(prevProps, prevState) {\n        const { isMessageOpen, messageMethod, withSubmissionTableProps } = this.props;\n        const { messageFrom, contentStatus, messageTo, attachments, isBlured, messageCc, messageBcc } = this.state;\n        if (isMessageOpen && isMessageOpen !== prevProps.isMessageOpen || prevProps.contentStatus === 'loading' && contentStatus === 'ready') {\n            this.setEmailContents();\n        }\n        if (messageFrom !== 'addNewAddress') this.lastMessageFrom = messageFrom;\n        if (withSubmissionTableProps && prevState.isBlured !== isBlured) {\n            if (isBlured !== 'messageCc' && messageCc.length <= 0) {\n                this.setMailCcVisibility('isMessageMailtoCCEnabled');\n            }\n            if (isBlured !== 'messageBcc' && messageBcc.length <= 0) {\n                this.setMailCcVisibility('isMessageMailtoBCCEnabled');\n            }\n        }\n        if (prevProps.messageMethod !== messageMethod) {\n            const messageToCheckFormat = messageTo === null || messageTo === void 0 ? void 0 : messageTo.split(',').map((x)=>({\n                    text: x\n                }));\n            if (messageToCheckFormat) {\n                this.checkTagsValue(messageToCheckFormat, 'messageTo');\n            }\n        }\n        if (withSubmissionTableProps && (messageTo.length >= 0 || messageCc.length >= 0 || messageBcc.length >= 0)) {\n            this.checkEmailRecipientLimits();\n        }\n        if (prevState.attachments.length !== attachments.length) {\n            this.validateUploadFiles();\n        }\n    }\n    handleTitleMinimize() {\n        const { isMessageMinimized } = this.state;\n        if (isMessageMinimized) {\n            this.actionHandler('click', '.jfMessage-header-action.forMinimize mode-open from-title');\n            this.setState({\n                isMessageMinimized: false\n            });\n        }\n    }\n    handleTagsChange(messageType) {\n        const { actionHandler } = this.props;\n        const { [messageType]: { state: { inputTags } } } = this.inputRefs;\n        const value = inputTags.map((tag)=>tag.text).join(',');\n        this.setState({\n            [messageType]: value\n        });\n        actionHandler('change', `${messageType} ${value}`);\n        this.checkTagsValue(inputTags, messageType);\n    }\n    handleMessageMinimize() {\n        var _this_footer_current;\n        const { isMessageMinimized } = this.state;\n        (_this_footer_current = this.footer.current) === null || _this_footer_current === void 0 ? void 0 : _this_footer_current.closeOpenedPopups();\n        const minimizeButtonMode = !isMessageMinimized ? 'mode-minimize' : 'mode-open';\n        this.actionHandler('click', `.jfMessage-header-action.forMinimize ${minimizeButtonMode}`);\n        this.setState({\n            isMessageMinimized: !isMessageMinimized\n        });\n    }\n    handleInsertSelection(start, end, HTMLElement) {\n        // eslint-disable-next-line no-undef\n        const range = new Range();\n        range.setStartBefore(start);\n        range.setEndAfter(end);\n        this.editor.setSelection(range);\n        this.editor.insertHTML(HTMLElement);\n    }\n    handleMessageViewMode() {\n        const { isMessageFullScreen } = this.state;\n        const maximizeButtonMode = !isMessageFullScreen ? 'mode-fullscreen' : 'mode-open';\n        this.actionHandler('click', `.jfMessage-header-action.forMaximize ${maximizeButtonMode}`);\n        this.setState({\n            isMessageFullScreen: !isMessageFullScreen,\n            isMessageMinimized: false\n        });\n    }\n    handleMessageMailtoCC() {\n        const { isMessageMailtoCCEnabled } = this.state;\n        if (!isMessageMailtoCCEnabled) {\n            this.actionHandler('click', '.jfMessage-mailto-link-cc');\n        }\n        this.setState({\n            isMessageMailtoCCEnabled: !isMessageMailtoCCEnabled\n        });\n    }\n    handleMessageMailtoBCC() {\n        const { isMessageMailtoBCCEnabled } = this.state;\n        if (!isMessageMailtoBCCEnabled) {\n            this.actionHandler('click', '.jfMessage-mailto-link-bcc');\n        }\n        this.setState({\n            isMessageMailtoBCCEnabled: !isMessageMailtoBCCEnabled\n        });\n    }\n    handleMessageSettings() {\n        // toggle show/hide <Dialog> component\n        this.setState((prevState)=>({\n                isSettingsOpen: !prevState.isSettingsOpen\n            }));\n    }\n    handleMessageAutoHideFields() {\n        const { messageCc: { inputValue: messageCc }, messageBcc: { inputValue: messageBcc } } = this.inputRefs;\n        this.setState({\n            isMessageMailtoCCEnabled: !!messageCc,\n            isMessageMailtoBCCEnabled: !!messageBcc\n        });\n    }\n    handleMessageEmptyFields(e) {\n        const { relatedTarget } = e;\n        if (relatedTarget && relatedTarget.dataset && !relatedTarget.dataset.origin) {\n            this.handleMessageAutoHideFields();\n        }\n    }\n    handleCloseClick() {\n        this.setState({\n            isMessageFullScreen: false,\n            isMessageMinimized: false\n        });\n        this.actionHandler('click', '.jfMessage-header-action.forClose');\n        this.handleMessageVisibility();\n    }\n    handleMessageVisibility() {\n        const { onMessageVisibilityChange } = this.props;\n        // remove Tooltip error message when Message component closed\n        this.removeTooltipErrorMessage();\n        this.handleMessageAutoHideFields();\n        onMessageVisibilityChange();\n    }\n    handleTooltipClick(e) {\n        e.stopPropagation();\n        this.removeTooltipErrorMessage();\n    }\n    handleMessageFromChange(messageFromName, messageFrom) {\n        this.setState({\n            messageFrom,\n            messageFromName,\n            showMessageFrom: true\n        });\n    }\n    handleRecaptchaChange(recapthcaResponse) {\n        const { attachments } = this.state;\n        this.setState({\n            recapthcaResponse\n        });\n        if (recapthcaResponse) {\n            this.footer.current.showCaptcha();\n            if (attachments.length > 0) {\n                this.prepareFiles();\n            } else {\n                this.handleSend();\n            }\n        }\n    }\n    handleRecaptchaRef(ref) {\n        this.ReCAPTCHA = ref;\n        this.setState({\n            isRecaptchaReady: true\n        });\n    }\n    handleCancelSenderEmail() {\n        this.setState({\n            messageFrom: this.lastMessageFrom\n        });\n    }\n    handleAddSenderEmail(newSenderEmail) {\n        const { senderEmails } = this.state;\n        this.setState({\n            messageFrom: newSenderEmail.data.emailAddress,\n            senderEmails: _object_spread_props(_object_spread({}, senderEmails), {\n                [`${newSenderEmail.protocol}:${newSenderEmail.data.emailAddress}`]: newSenderEmail.data\n            })\n        });\n        this.actionHandler('change', `addSenderEmail ${newSenderEmail}`);\n    }\n    handleSend() {\n        // Check messageTo/messageFrom field\n        const { showMessageFrom, messageFrom, messageFromName, recapthcaResponse, tagsValueObj, messageReplyTo, attachments } = this.state;\n        this.data = Object.keys(this.inputRefs).reduce((accum, key)=>{\n            const { inputValue } = this.inputRefs[key];\n            const inputTags = this.inputRefs[key].inputTags && this.inputRefs[key].inputTags.map((tag)=>{\n                return tag.text;\n            }).join(',');\n            const inputTagsValue = this.inputRefs[key].props && this.inputRefs[key].props.value;\n            return _object_spread_props(_object_spread({}, accum), {\n                [key]: inputValue || inputTags || inputTagsValue,\n                isValid: accum && (inputValue !== null || inputTags !== null)\n            });\n        }, {\n            isValid: true\n        });\n        // if subject is empty, use form title as default subject\n        if (this.data.subject === '') {\n            this.data.subject = this.initialSubject;\n        }\n        const { isValid, subject, messageTo, messageCc, messageBcc } = this.data;\n        const mailHeader = {\n            subject,\n            messageTo,\n            messageCc,\n            messageBcc,\n            messageFrom: this.getMessageFrom(),\n            messageReplyTo\n        };\n        // check email\n        if (!this.checkTagsValue()) {\n            const indexArr = [];\n            Object.keys(tagsValueObj).find((key, index)=>{\n                if (!tagsValueObj[key]) {\n                    indexArr.push(index);\n                }\n                return null;\n            });\n            // Error hierarchy between To, Cc and Bcc\n            return this.renderErrorMessage(`Please make sure \"${Object.keys(tagsValueObj)[Math.min(...indexArr)].split('message')[1]}\" adress is proper.`);\n        }\n        if (messageTo === '' || messageTo === null) {\n            return this.renderErrorMessage('Please specify at least one recipient.');\n        }\n        if (this.isCaptchaValidationRequired() && !recapthcaResponse) {\n            this.footer.current.showCaptcha();\n            return false;\n        }\n        if (showMessageFrom && (messageFrom === '' || messageFrom === null)) {\n            return this.renderErrorMessage('Please specify from field.');\n        }\n        if (messageFromName === '' || messageFromName === null) {\n            return this.renderErrorMessage('Please specify from name.');\n        }\n        // Check message content\n        const messageContent = this.editor.getHTML();\n        if (messageContent === '') {\n            return this.renderErrorMessage('Mail body should not be empty.');\n        }\n        // Clear warning message before sending and start sending process\n        this.setState({\n            warningText: '',\n            disableSend: false,\n            hasErrorClass: false\n        });\n        const uploadNames = attachments.map(({ raw })=>raw.name);\n        // Extract prop methods\n        const { formID, submissionID, messageMethod, onMessageSendError, onMessageSendSuccess, onMessageVisibilityChange, rmiMailCreate, newReplyForwardTemplate, project } = this.props;\n        const mail = {\n            mailHeader,\n            messageContent,\n            hasAttachment: (uploadNames === null || uploadNames === void 0 ? void 0 : uploadNames.length) !== 0,\n            uploadNames: JSON.stringify(uploadNames)\n        };\n        if (isValid) {\n            if (rmiMailCreate) {\n                rmiMailCreate(mail);\n                onMessageVisibilityChange();\n            } else {\n                const regexForFormFields = /([^{]+)|(\\{[^}]*\\})/g;\n                const fixedSubject = subject.match(regexForFormFields) !== null ? subject.match(regexForFormFields).join(' ') : subject;\n                const sendEmail = sendEmailAPI({\n                    formID,\n                    from: messageFrom,\n                    senderName: messageFromName,\n                    replyTo: messageReplyTo,\n                    to: messageTo,\n                    cc: messageCc,\n                    bcc: messageBcc,\n                    subject: fixedSubject,\n                    body: messageContent,\n                    type: messageMethod,\n                    submissionID,\n                    response: recapthcaResponse,\n                    rce: 1,\n                    hasAttachment: uploadNames.length !== 0,\n                    uploadNames: JSON.stringify(uploadNames),\n                    newReplyForwardTemplate: newReplyForwardTemplate,\n                    project,\n                    brandingDescription: this.brandingDescription\n                });\n                // Make the api call\n                sendEmail.then((resp)=>{\n                    // Reset ReCAPTCHA\n                    if (this.isCaptchaValidationRequired()) {\n                        this.ReCAPTCHA.reset();\n                    }\n                    // Clear button disable, and reset recaptcha related states\n                    this.setState({\n                        disableSend: false,\n                        recapthcaResponse: ''\n                    });\n                    this.footer.current.showCaptcha(false);\n                    if (resp) {\n                        // Call success callback\n                        onMessageSendSuccess(resp);\n                    }\n                    // Hide message container\n                    onMessageVisibilityChange();\n                }).catch((error)=>{\n                    const errorMessage = error.response && error.response.data ? error.response.data.error : '';\n                    // Clear button disable\n                    this.setState({\n                        warningText: errorMessage,\n                        disableSend: false\n                    });\n                    // Call error callback\n                    onMessageSendError(error);\n                });\n            }\n        }\n    }\n    handleDrop(e) {\n        const { hasAttachment } = this.props;\n        e.preventDefault();\n        e.stopPropagation();\n        if (hasAttachment) {\n            const files = e.target.files || e.dataTransfer.files;\n            const { editor, scrollContainer } = this;\n            this.handleFiles([\n                ...files\n            ]);\n            this.actionHandler('change', 'attachmentAdded');\n            setTimeout(()=>{\n                var _scrollContainer_current;\n                (_scrollContainer_current = scrollContainer.current) === null || _scrollContainer_current === void 0 ? void 0 : _scrollContainer_current.scrollTo(0, scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current.scrollHeight);\n                editor === null || editor === void 0 ? void 0 : editor.focus();\n            }, 200);\n        }\n    }\n    handleFiles(files) {\n        const { uploadRules } = this.props;\n        files.forEach((file, i)=>{\n            const reader = new global.FileReader();\n            reader.addEventListener('load', (result)=>{\n                const newFile = {\n                    key: `${file.name}-${i}`,\n                    src: result,\n                    size: formatBytes(file.size),\n                    name: file.name,\n                    raw: file,\n                    error: file.size > (uploadRules === null || uploadRules === void 0 ? void 0 : uploadRules.sizePerFile)\n                };\n                this.setState((prevState)=>({\n                        attachments: [\n                            ...prevState.attachments,\n                            newFile\n                        ]\n                    }));\n            });\n            reader.readAsDataURL(file);\n        });\n    }\n    setEnabled() {\n        const { isMessageMailtoBCCEnabled, messageBcc, isMessageMailtoCCEnabled, messageCc } = this.state;\n        const isBccEnabled = isMessageMailtoBCCEnabled && messageBcc.length <= 0;\n        const isCCEnabled = isMessageMailtoCCEnabled && messageCc.length <= 0;\n        this.setState({\n            isBlured: 'editor',\n            isMessageMailtoCCEnabled: isCCEnabled ? false : isMessageMailtoCCEnabled,\n            isMessageMailtoBCCEnabled: isBccEnabled ? false : isMessageMailtoBCCEnabled\n        });\n    }\n    setMailCcVisibility(key) {\n        this.setState({\n            [key]: false\n        });\n    }\n    getMessageFrom() {\n        // Fixes #4092673 let me know if something comes up please @gokay\n        const { user } = this.props;\n        // eslint-disable-next-line react/prop-types\n        const { senderEmails: senderEmailsObj = {} } = user || {};\n        const { messageFrom } = this.state;\n        const senderEmails = Object.keys(senderEmailsObj);\n        return senderEmails.some((x)=>x.includes(messageFrom)) ? `smtp:${messageFrom}` : messageFrom;\n    }\n    setEmailContents() {\n        const { requestEmailContents, answers, contentStatus, onLoaded } = this.props;\n        Promise.resolve(requestEmailContents(answers)).then((content)=>{\n            this.editor.setHTML(content);\n            if (contentStatus === 'ready') onLoaded();\n        });\n    }\n    setInputCounts(e) {\n        var _this_inputRefs_messageCc, _this_inputRefs_messageBcc;\n        const { isMessageMailtoCCEnabled, isMessageMailtoBCCEnabled } = this.state;\n        if (e.propertyName === 'transform') {\n            var _this_inputRefs_messageTo;\n            (_this_inputRefs_messageTo = this.inputRefs.messageTo) === null || _this_inputRefs_messageTo === void 0 ? void 0 : _this_inputRefs_messageTo.setHiddenCount();\n        }\n        if (isMessageMailtoCCEnabled) (_this_inputRefs_messageCc = this.inputRefs.messageCc) === null || _this_inputRefs_messageCc === void 0 ? void 0 : _this_inputRefs_messageCc.setHiddenCount();\n        if (isMessageMailtoBCCEnabled) (_this_inputRefs_messageBcc = this.inputRefs.messageBcc) === null || _this_inputRefs_messageBcc === void 0 ? void 0 : _this_inputRefs_messageBcc.setHiddenCount();\n    }\n    get messageClassNames() {\n        const { isMessageMinimized, isMessageFullScreen, isMessageOpen, isResizing, isResized } = this.state;\n        const { className } = this.props;\n        return [\n            'jfMessage',\n            isMessageOpen && 'isVisible',\n            isMessageMinimized && 'isMinimized',\n            isMessageFullScreen && 'isBig',\n            isResizing && 'isResizing',\n            isResized && 'isResized',\n            className && className\n        ].filter((a)=>a).join(' ');\n    }\n    get renderComponent() {\n        this.inputRefs = {};\n        const { actionHandler, titleIcon, requestMore, toLeft, hasAttachment, uploadRules: { numberPerUpload, formattedSizePerFile }, formArray, mailToPlaceholder, withSubmissionTableProps, showAddFields, contentStatus, user, recaptchaSite } = this.props;\n        const { title, subject, isMessageMinimized, isMessageFullScreen, isMessageMailtoCCEnabled, isMessageMailtoBCCEnabled, path, disableSend, warningText, showMinimizeButton, showChangeMessageViewModeButton, messageTo, messageCc, messageBcc, attachments, loading, isAttachmentError, isBlured, isFreeUser, isReachedLimitTO, isReachedLimitCC, isReachedLimitBCC, isReachedLimitBSG, inputLimitTO, inputLimitCC, inputLimitBCC, inputLimitBSG, messageFrom, customSenders } = this.state;\n        const isEnterprise = isEnterpriseFunc();\n        const defaultFrom = isEnterprise ? 'noreply@formresponse.com' : 'noreply@jotform.com';\n        const userType = this.userPlans;\n        const isUserBSG = PAID_PLANS.includes(userType);\n        const isVisibleInInbox = withSubmissionTableProps;\n        return /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfMessage-header\",\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jfMessage-header-title\",\n                            onClick: showMinimizeButton && this.handleMessageMinimize,\n                            onKeyUp: null,\n                            tabIndex: \"-1\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"span\", {\n                                    className: \"jfMessage-header-title__icon\",\n                                    children: titleIcon\n                                }),\n                                title\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jfMessage-header-actions\",\n                            children: [\n                                showMinimizeButton && /*#__PURE__*/ _jsx(\"div\", {\n                                    className: `jfMessage-header-action forMinimize ${isMessageMinimized ? 'isMinimized' : ''}`,\n                                    onClick: this.handleMessageMinimize,\n                                    onKeyUp: null,\n                                    tabIndex: \"-1\",\n                                    children: /*#__PURE__*/ _jsx(\"div\", {\n                                        className: \"forMinimizeContainer\",\n                                        children: /*#__PURE__*/ _jsx(IconLineHorizontal, {})\n                                    })\n                                }),\n                                showChangeMessageViewModeButton && /*#__PURE__*/ _jsx(\"div\", {\n                                    className: isMessageFullScreen ? 'jfMessage-header-action forNarrowdown' : 'jfMessage-header-action forMaximize',\n                                    onClick: this.handleMessageViewMode,\n                                    onKeyUp: null,\n                                    tabIndex: \"-1\",\n                                    children: isMessageFullScreen ? /*#__PURE__*/ _jsx(IconArrowsToCenter, {}) : /*#__PURE__*/ _jsx(IconArrowsFromCenter, {})\n                                }),\n                                /*#__PURE__*/ _jsx(\"div\", {\n                                    className: \"jfMessage-header-action forClose\",\n                                    onClick: this.handleCloseClick,\n                                    onKeyUp: null,\n                                    tabIndex: \"-1\",\n                                    role: \"button\",\n                                    \"aria-label\": t('Close editor'),\n                                    children: /*#__PURE__*/ _jsx(IconXmark, {})\n                                })\n                            ]\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"jfMessage-body\",\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: `jfMessage-body-content ${isMessageMailtoCCEnabled ? 'isCCEnabled' : ''} §${isMessageMailtoBCCEnabled ? 'isBCCEnabled' : ''}`,\n                            ref: this.dropAreaRef,\n                            onDrop: this.handleDrop,\n                            children: [\n                                /*#__PURE__*/ _jsxs(\"div\", {\n                                    className: \"jfMessage-mail\",\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"jfMessage-mailto\",\n                                            children: /*#__PURE__*/ _jsxs(\"div\", {\n                                                className: \"jfMessage-mailto-line forFrom\",\n                                                onClick: this.handleMessageSettings,\n                                                onKeyUp: this.handleMessageSettings,\n                                                role: \"button\",\n                                                \"aria-haspopup\": \"dialog\",\n                                                tabIndex: \"0\",\n                                                \"aria-label\": t(`E-Mail from ${messageFrom ? messageFrom : defaultFrom}`),\n                                                children: [\n                                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                                        className: \"jfMessage-mailto-line-wrapper withValidatedInput\",\n                                                        children: [\n                                                            /*#__PURE__*/ _jsx(\"div\", {\n                                                                className: \"jfInput-line-text\",\n                                                                children: t('From: ')\n                                                            }),\n                                                            messageFrom ? getSenderEmail(customSenders, messageFrom) || messageFrom : defaultFrom\n                                                        ]\n                                                    }),\n                                                    /*#__PURE__*/ _jsx(\"div\", {\n                                                        className: \"jfMessage-mailto-link-item jfMessage-mailto-link-settings\",\n                                                        onKeyUp: this.handleMessageSettings,\n                                                        tabIndex: \"0\",\n                                                        role: \"button\",\n                                                        \"aria-haspopup\": \"dialog\",\n                                                        \"aria-label\": t('E-Mail Settings'),\n                                                        children: /*#__PURE__*/ _jsx(IconGearFilled, {})\n                                                    })\n                                                ]\n                                            })\n                                        }),\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"jfMessage-mailto\",\n                                            children: [\n                                                /*#__PURE__*/ _jsxs(\"div\", {\n                                                    className: \"jfMessage-mailto-line forTo\",\n                                                    children: [\n                                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                                            className: \"jfMessage-mailto-link\",\n                                                            children: [\n                                                                /*#__PURE__*/ _jsx(\"div\", {\n                                                                    className: `jfMessage-mailto-link-item jfMessage-mailto-link-cc ${isMessageMailtoCCEnabled ? 'isHidden' : ''}`,\n                                                                    onClick: this.handleMessageMailtoCC,\n                                                                    onKeyUp: this.handleMessageMailtoCC,\n                                                                    tabIndex: \"-1\",\n                                                                    role: \"button\",\n                                                                    children: \"Cc\"\n                                                                }),\n                                                                /*#__PURE__*/ _jsx(\"div\", {\n                                                                    className: `jfMessage-mailto-link-item jfMessage-mailto-link-bcc ${isMessageMailtoBCCEnabled ? 'isHidden' : ''}`,\n                                                                    onClick: this.handleMessageMailtoBCC,\n                                                                    onKeyUp: this.handleMessageMailtoBCC,\n                                                                    tabIndex: \"-1\",\n                                                                    role: \"button\",\n                                                                    children: \"Bcc\"\n                                                                })\n                                                            ]\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(Tooltip, {\n                                                            icon: /*#__PURE__*/ _jsx(IconExclamationCircle, {}),\n                                                            text: \"\",\n                                                            align: \"Center\"\n                                                        }),\n                                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                                            onClick: ()=>{\n                                                                this.setState({\n                                                                    isBlured: 'messageTo'\n                                                                });\n                                                            },\n                                                            ref: this.mailToWrapper,\n                                                            className: `${isBlured !== 'messageTo' ? 'tagBlured' : ''} jfMessage-mailto-line-wrapper withValidatedInput`,\n                                                            children: [\n                                                                toLeft,\n                                                                /*#__PURE__*/ _jsx(TagsInput, {\n                                                                    t: t,\n                                                                    isBlured: withSubmissionTableProps ? isBlured !== 'messageTo' : false,\n                                                                    value: messageTo,\n                                                                    label: t('To:'),\n                                                                    className: `jfInput-line-tagged ${inputLimitBSG || inputLimitTO ? 'isReachedLimit' : ''}`,\n                                                                    validation: validateEmail && this.additionalCheckForEmail,\n                                                                    onSuccessValidation: this.removeTooltipErrorMessage,\n                                                                    onTagsChange: ()=>this.handleTagsChange('messageTo'),\n                                                                    isRequired: true,\n                                                                    shouldUnique: true,\n                                                                    ref: this.setInputRef('messageTo'),\n                                                                    requestMore: requestMore,\n                                                                    placeholder: mailToPlaceholder,\n                                                                    isMessageFullScreen: isMessageFullScreen\n                                                                })\n                                                            ]\n                                                        })\n                                                    ]\n                                                }),\n                                                /*#__PURE__*/ _jsxs(\"div\", {\n                                                    className: `jfMessage-mailto-line forCc ${!isMessageMailtoCCEnabled ? 'isHidden' : ''}`,\n                                                    children: [\n                                                        /*#__PURE__*/ _jsx(Tooltip, {\n                                                            icon: /*#__PURE__*/ _jsx(IconExclamationCircle, {}),\n                                                            text: \"\",\n                                                            align: \"Center\"\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(\"div\", {\n                                                            onClick: ()=>{\n                                                                this.setState({\n                                                                    isBlured: 'messageCc'\n                                                                });\n                                                            },\n                                                            className: `${isBlured !== 'messageCc' ? 'tagBlured' : ''} jfMessage-mailto-line-wrapper withValidatedInput`,\n                                                            children: /*#__PURE__*/ _jsx(TagsInput, {\n                                                                isBlured: withSubmissionTableProps ? isBlured !== 'messageCc' : false,\n                                                                value: messageCc,\n                                                                label: \"Cc:\",\n                                                                className: `jfInput-line-tagged ${inputLimitBSG || inputLimitCC ? 'isReachedLimit' : ''}`,\n                                                                validation: validateEmail && this.additionalCheckForEmail,\n                                                                onTagsChange: ()=>this.handleTagsChange('messageCc'),\n                                                                onSuccessValidation: this.removeTooltipErrorMessage,\n                                                                shouldUnique: true,\n                                                                ref: this.setInputRef('messageCc'),\n                                                                placeholder: mailToPlaceholder\n                                                            })\n                                                        })\n                                                    ]\n                                                }),\n                                                /*#__PURE__*/ _jsxs(\"div\", {\n                                                    className: `jfMessage-mailto-line forBcc ${!isMessageMailtoBCCEnabled ? 'isHidden' : ''}`,\n                                                    children: [\n                                                        /*#__PURE__*/ _jsx(Tooltip, {\n                                                            icon: /*#__PURE__*/ _jsx(IconExclamationCircle, {}),\n                                                            text: \"\",\n                                                            align: \"Center\"\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(\"div\", {\n                                                            onClick: ()=>{\n                                                                this.setState({\n                                                                    isBlured: 'messageBcc'\n                                                                });\n                                                            },\n                                                            className: `${isBlured !== 'messageBcc' ? 'tagBlured' : ''} jfMessage-mailto-line-wrapper withValidatedInput`,\n                                                            children: /*#__PURE__*/ _jsx(TagsInput, {\n                                                                isBlured: withSubmissionTableProps ? isBlured !== 'messageBcc' : false,\n                                                                value: messageBcc,\n                                                                label: \"Bcc:\",\n                                                                className: `jfInput-line-tagged ${inputLimitBSG || inputLimitBCC ? 'isReachedLimit' : ''}`,\n                                                                validation: validateEmail && this.additionalCheckForEmail,\n                                                                onTagsChange: ()=>this.handleTagsChange('messageBcc'),\n                                                                onSuccessValidation: this.removeTooltipErrorMessage,\n                                                                // onBlur={(e) => { this.handleMessageEmptyFields(e); }}\n                                                                shouldUnique: true,\n                                                                ref: this.setInputRef('messageBcc'),\n                                                                placeholder: mailToPlaceholder\n                                                            })\n                                                        })\n                                                    ]\n                                                })\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"jfMessage-subject\",\n                                            children: /*#__PURE__*/ _jsxs(\"div\", {\n                                                className: \"jfMessage-subject-line forSubject\",\n                                                children: [\n                                                    /*#__PURE__*/ _jsx(Tooltip, {\n                                                        icon: /*#__PURE__*/ _jsx(IconExclamationCircle, {}),\n                                                        text: \"\",\n                                                        align: \"Center\"\n                                                    }),\n                                                    /*#__PURE__*/ _jsx(\"div\", {\n                                                        className: \"jfMessage-subject-line-wrapper withValidatedInput\",\n                                                        children: /*#__PURE__*/ _jsx(MixedTagInput, {\n                                                            label: t('Subject:'),\n                                                            value: subject,\n                                                            formArray: formArray,\n                                                            onChange: (v)=>{\n                                                                this.setState({\n                                                                    subject: v\n                                                                });\n                                                            },\n                                                            ref: this.setInputRef('subject'),\n                                                            onAddTag: ()=>this.actionHandler('change', 'formFieldAddedOnSubject'),\n                                                            onRemove: ()=>this.actionHandler('change', 'formFieldRemovedOnSubject')\n                                                        })\n                                                    })\n                                                ]\n                                            })\n                                        })\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsxs(\"div\", {\n                                    ref: this.scrollContainer,\n                                    className: \"jfMessage-mail-content\",\n                                    children: [\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"jfMessage-mail-content-wrapper\",\n                                            children: [\n                                                /*#__PURE__*/ _jsx(\"div\", {\n                                                    ref: (editorDiv)=>{\n                                                        this.editorDiv = editorDiv;\n                                                    },\n                                                    style: {\n                                                        height: '100%',\n                                                        fontSize: '14px'\n                                                    }\n                                                }),\n                                                isFreeUser && /*#__PURE__*/ _jsx(BrandingTooltip, {\n                                                    brandingDescription: this.brandingDescription\n                                                }),\n                                                hasAttachment && attachments.length > 0 && /*#__PURE__*/ _jsxs(\"div\", {\n                                                    className: \"jfMessage-attachment-area\",\n                                                    children: [\n                                                        attachments.map(({ key, name, size, src, error }, i)=>/*#__PURE__*/ _jsxs(\"div\", {\n                                                                className: \"jfMessage-attachment-area-container\",\n                                                                children: [\n                                                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                                                        className: \"jfMessage-attachment-link\",\n                                                                        href: src,\n                                                                        target: \"_blank\",\n                                                                        children: [\n                                                                            /*#__PURE__*/ _jsx(\"div\", {\n                                                                                className: \"jfMessage-attachment-link-name\",\n                                                                                children: name\n                                                                            }),\n                                                                            /*#__PURE__*/ _jsxs(\"div\", {\n                                                                                className: \"jfMessage-attachment-link-size\",\n                                                                                children: [\n                                                                                    \"(\",\n                                                                                    size,\n                                                                                    \")\"\n                                                                                ]\n                                                                            })\n                                                                        ]\n                                                                    }),\n                                                                    error ? /*#__PURE__*/ _jsx(\"div\", {\n                                                                        style: {\n                                                                            color: '#D93434',\n                                                                            fontSize: '13px',\n                                                                            fontWeight: 400\n                                                                        },\n                                                                        children: `File size cannot be larger than ${formattedSizePerFile}.`\n                                                                    }) : /*#__PURE__*/ _jsx(\"div\", {\n                                                                        style: {\n                                                                            width: '100px',\n                                                                            backgroundColor: '#ddd',\n                                                                            display: 'none',\n                                                                            marginLeft: '5px',\n                                                                            borderRadius: '5px'\n                                                                        },\n                                                                        id: `progressBar-${i}`,\n                                                                        children: /*#__PURE__*/ _jsx(\"div\", {\n                                                                            style: {\n                                                                                width: '1%',\n                                                                                height: '18px',\n                                                                                backgroundColor: '#0099FF',\n                                                                                borderRadius: '5px'\n                                                                            },\n                                                                            className: \"bar\"\n                                                                        })\n                                                                    }),\n                                                                    /*#__PURE__*/ _jsx(\"div\", {\n                                                                        className: \"jfMessage-attachment-removeButton\",\n                                                                        onClick: ()=>{\n                                                                            if (!loading) {\n                                                                                this.setState({\n                                                                                    attachments: attachments.filter((file)=>file.key !== key)\n                                                                                });\n                                                                                this.actionHandler('change', 'attachmentRemoved');\n                                                                            }\n                                                                        },\n                                                                        role: \"button\",\n                                                                        \"aria-label\": t('Remove attachment'),\n                                                                        tabIndex: \"-1\",\n                                                                        children: /*#__PURE__*/ _jsx(IconXmark, {\n                                                                            fill: \"black\",\n                                                                            stroke: \"black\"\n                                                                        })\n                                                                    })\n                                                                ]\n                                                            }, key)),\n                                                        attachments.length > numberPerUpload && /*#__PURE__*/ _jsx(\"div\", {\n                                                            style: {\n                                                                width: '100%',\n                                                                color: '#D93434',\n                                                                fontSize: '13px',\n                                                                fontWeight: 400,\n                                                                marginTop: '3px'\n                                                            },\n                                                            children: `You can only upload ${numberPerUpload} files.`\n                                                        })\n                                                    ]\n                                                })\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsx(DelayedComponent, {\n                                            isVisible: isVisibleInInbox && (isReachedLimitTO || isReachedLimitCC || isReachedLimitBCC) && isFreeUser,\n                                            children: /*#__PURE__*/ _jsx(\"div\", {\n                                                className: `jfLimitWarning left-6/12 z-9 p-2 sm:gap-0 gap-3 bg-yellow-100 radius border border-yellow-500  ${isMessageMinimized ? 'hidden' : ''}`,\n                                                children: /*#__PURE__*/ _jsxs(\"div\", {\n                                                    className: \"w-full sm:w-auto flex flex-wrap items-center color-navy-500 text-sm font-medium\",\n                                                    children: [\n                                                        /*#__PURE__*/ _jsx(\"span\", {\n                                                            className: \"mr-2 flex items-center\",\n                                                            children: /*#__PURE__*/ _jsx(IconInfo, {\n                                                                className: \"bg-yellow-500 fill-white radius-full w-4 h-4\"\n                                                            })\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(\"span\", {\n                                                            children: t('To add more than one recipient, please ')\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(\"a\", {\n                                                            href: \"https://www.jotform.com/pricing/?utm_source=jotform&utm_campaign=inbox_reply_email_limit_notification\",\n                                                            target: \"_blank\",\n                                                            className: \"ml-1 underline color-blue-500\",\n                                                            children: t('upgrade your account.')\n                                                        })\n                                                    ]\n                                                })\n                                            })\n                                        }),\n                                        /*#__PURE__*/ _jsx(DelayedComponent, {\n                                            isVisible: isVisibleInInbox && isReachedLimitBSG && isUserBSG,\n                                            children: /*#__PURE__*/ _jsxs(\"div\", {\n                                                className: `jfLimitWarning forEnterPrise left-6/12 lg:gap-0 gap-3 radius z-9 flex justify-between items-center flex-wrap py-4 px-3\n                ${isMessageMinimized ? 'hidden' : ''}`,\n                                                children: [\n                                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                                        className: \"jfEnterpriseBanner-content flex-1 flex items-center text-sm color-navy-700 font-medium\",\n                                                        children: [\n                                                            /*#__PURE__*/ _jsx(\"span\", {\n                                                                className: \"jfEnterpriseBanner-icon mr-2 w-6 h-6 radius\",\n                                                                children: /*#__PURE__*/ _jsx(IconRocketSquareBrokenFilled, {})\n                                                            }),\n                                                            /*#__PURE__*/ _jsx(\"span\", {\n                                                                children: t('Upgrade to Jotform Enterprise to add more recipients.')\n                                                            })\n                                                        ]\n                                                    }),\n                                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                                        className: \"jfEnterpriseBanner-buttons flex-1 md:w-auto flex gap-2\",\n                                                        children: [\n                                                            /*#__PURE__*/ _jsx(\"a\", {\n                                                                href: \"https://www.jotform.com/enterprise/contact-sales/?utm_source=jotform&utm_campaign=inbox_reply_email_limit_notification\",\n                                                                target: \"_blank\",\n                                                                className: \"forContactSales font-medium text-xs radius flex items-center justify-center flex-1 min-w-24 py-2 px-3 color-white\",\n                                                                children: t('Contact Sales')\n                                                            }),\n                                                            /*#__PURE__*/ _jsx(\"a\", {\n                                                                href: \"https://www.jotform.com/teams/?utm_source=jotform&utm_campaign=inbox_reply_email_limit_notification\",\n                                                                target: \"_blank\",\n                                                                className: \"forLearnMore font-medium text-xs radius flex items-center justify-center flex-1 min-w-24 py-2 px-3 bg-navy-75 color-navy-500\",\n                                                                children: t('Learn More')\n                                                            })\n                                                        ]\n                                                    })\n                                                ]\n                                            })\n                                        })\n                                    ]\n                                })\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsx(MessageFooter, {\n                            hasAttachment,\n                            path,\n                            disableSend,\n                            warningText,\n                            isAttachmentError,\n                            loading,\n                            isCaptchaValidationRequired: this.isCaptchaValidationRequired(),\n                            handleRecaptchaChange: this.handleRecaptchaChange,\n                            handleTooltipClick: this.handleTooltipClick,\n                            onFileChange: this.handleDrop,\n                            handleSend: attachments.length > 0 && hasAttachment ? this.prepareFiles : this.handleSend,\n                            editor: this.editor,\n                            recaptchaRefSetter: this.handleRecaptchaRef,\n                            ref: this.footer,\n                            formArray: formArray,\n                            actionHandler,\n                            withSubmissionTableProps: withSubmissionTableProps,\n                            showAddFields,\n                            onFormFieldAdd: this.onFormFieldAdd,\n                            isLoaded: contentStatus === 'ready',\n                            user: user,\n                            recaptchaSite\n                        })\n                    ]\n                })\n            ]\n        });\n    }\n    get renderStatic() {\n        return /*#__PURE__*/ _jsx(\"div\", {\n            ref: this.transitionWrapper,\n            className: \"jfMessage-container isStatic\",\n            children: this.renderComponent\n        });\n    }\n    get renderResizable() {\n        const { isMessageFullScreen, hasErrorClass } = this.state;\n        return /*#__PURE__*/ _jsx(Resizable, {\n            defaultSize: {\n                width: 700,\n                height: 700\n            },\n            minWidth: 435,\n            minHeight: 480,\n            maxWidth: window.innerWidth - 100,\n            maxHeight: window.innerHeight - 100,\n            className: `jfMessage-container isResizable ${hasErrorClass ? 'has-error--bounce' : ''}`,\n            onResizeStop: ()=>{\n                this.setState({\n                    isResizing: false\n                });\n            },\n            onResizeStart: ()=>{\n                this.setState({\n                    isResizing: true\n                });\n                this.setState({\n                    isResized: true\n                });\n            },\n            enable: {\n                top: !isMessageFullScreen,\n                left: !isMessageFullScreen,\n                topLeft: !isMessageFullScreen\n            },\n            children: this.renderComponent\n        });\n    }\n    getEmailCount(emails) {\n        if (emails === '') {\n            return {\n                validEmailsCount: 0,\n                invalidEmailsCount: 0,\n                totalEmailsCount: 0\n            };\n        }\n        const preEmailArray = emails.split(',');\n        const { valid: validEmails, invalid: invalidEmails } = preEmailArray.reduce((emailArr, email)=>{\n            const validatedEmail = validateEmail(email === null || email === void 0 ? void 0 : email.trim());\n            if (validatedEmail) {\n                emailArr.valid.push(email === null || email === void 0 ? void 0 : email.trim());\n            } else {\n                emailArr.invalid.push(email === null || email === void 0 ? void 0 : email.trim());\n            }\n            return emailArr;\n        }, {\n            valid: [],\n            invalid: []\n        });\n        const totalEmailsCount = (validEmails === null || validEmails === void 0 ? void 0 : validEmails.length) + (invalidEmails === null || invalidEmails === void 0 ? void 0 : invalidEmails.length);\n        return {\n            validEmailsCount: validEmails === null || validEmails === void 0 ? void 0 : validEmails.length,\n            invalidEmailsCount: invalidEmails === null || invalidEmails === void 0 ? void 0 : invalidEmails.length,\n            totalEmailsCount\n        };\n    }\n    get userPlans() {\n        const { user } = this.props;\n        const { account_type: accountType } = user;\n        return accountType.name;\n    }\n    checkEmailRecipientLimits() {\n        const { messageTo, messageBcc, messageCc } = this.state;\n        const userType = this.userPlans;\n        const isUserBSG = PAID_PLANS.includes(userType);\n        const messageToCount = this.getEmailCount(messageTo);\n        const messageCcCount = this.getEmailCount(messageCc);\n        const messageBccCount = this.getEmailCount(messageBcc);\n        const BSGLimitCount = (messageToCount === null || messageToCount === void 0 ? void 0 : messageToCount.validEmailsCount) + (messageCcCount === null || messageCcCount === void 0 ? void 0 : messageCcCount.validEmailsCount) + (messageBccCount === null || messageBccCount === void 0 ? void 0 : messageBccCount.validEmailsCount);\n        // BSG Total limit count for input limitation\n        const BSGTotalLimitCount = (messageToCount === null || messageToCount === void 0 ? void 0 : messageToCount.totalEmailsCount) + (messageCcCount === null || messageCcCount === void 0 ? void 0 : messageCcCount.totalEmailsCount) + (messageBccCount === null || messageBccCount === void 0 ? void 0 : messageBccCount.totalEmailsCount);\n        if (userType === 'FREE') {\n            this.setState({\n                isReachedLimitTO: (messageToCount === null || messageToCount === void 0 ? void 0 : messageToCount.validEmailsCount) > 0,\n                isReachedLimitCC: (messageCcCount === null || messageCcCount === void 0 ? void 0 : messageCcCount.validEmailsCount) > 0,\n                isReachedLimitBCC: (messageBccCount === null || messageBccCount === void 0 ? void 0 : messageBccCount.validEmailsCount) > 0,\n                inputLimitTO: (messageToCount === null || messageToCount === void 0 ? void 0 : messageToCount.totalEmailsCount) > 0,\n                inputLimitCC: (messageCcCount === null || messageCcCount === void 0 ? void 0 : messageCcCount.totalEmailsCount) > 0,\n                inputLimitBCC: (messageBccCount === null || messageBccCount === void 0 ? void 0 : messageBccCount.totalEmailsCount) > 0\n            });\n            return;\n        }\n        if (isUserBSG) {\n            this.setState({\n                isReachedLimitBSG: BSGLimitCount >= 10,\n                inputLimitBSG: BSGTotalLimitCount >= 10\n            });\n            return null;\n        }\n    }\n    validateUploadFiles() {\n        const { uploadRules: { sizePerFile, formattedSizePerFile, numberPerUpload } } = this.props;\n        const { attachments } = this.state;\n        const isSizePerFileExceeded = attachments.some(({ raw })=>raw.size > sizePerFile);\n        const isNumberPerUploadExceeded = attachments.length > numberPerUpload;\n        if (isSizePerFileExceeded) {\n            this.renderErrorMessage(`File size cannot be larger than ${formattedSizePerFile}.`, true);\n        } else if (isNumberPerUploadExceeded) {\n            this.renderErrorMessage(`You can only upload ${numberPerUpload} files.`, true);\n        } else {\n            this.removeTooltipErrorMessage();\n        }\n    }\n    // TODO WILL BE RECONFIGURED\n    moveProgressBar(percent, index) {\n        var _elem_style;\n        const elem = document.querySelector(`#progressBar-${index}`);\n        if ((elem === null || elem === void 0 ? void 0 : (_elem_style = elem.style) === null || _elem_style === void 0 ? void 0 : _elem_style.display) === 'none') {\n            elem.style.display = 'block';\n        }\n        const bar = elem.querySelector('.bar');\n        const { width } = bar.style;\n        if (width !== '100%' && percent !== 100) {\n            bar.style.width = `${percent}%`;\n        } else {\n            elem.style.display = 'none';\n        }\n    }\n    async uploadFiles(raw, index) {\n        const { formID, project } = this.props;\n        const fd = new global.FormData();\n        fd.append('file[]', raw, raw.name);\n        try {\n            const { data: { message, success } } = await axios.post(`/API/${project}/form/${formID}/projectFiles`, fd, {\n                onUploadProgress: (progressEvent)=>{\n                    const percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);\n                    this.moveProgressBar(percentCompleted, index);\n                },\n                headers: {\n                    'Content-Type': 'multipart/form-data',\n                    'jf-team-id': window.teamID\n                },\n                withCredentials: true\n            });\n            if (success) {\n                return true;\n            }\n            this.renderErrorMessage(message);\n        } catch (err) {\n            this.renderErrorMessage(err);\n        }\n    }\n    prepareFiles() {\n        const { attachments, loading, recapthcaResponse, warningText } = this.state;\n        if (!loading && warningText === '') {\n            if (this.isCaptchaValidationRequired() && !recapthcaResponse) {\n                this.footer.current.showCaptcha();\n                return false;\n            }\n            if (recapthcaResponse) {\n                this.footer.current.showCaptcha(false);\n            }\n            this.setState({\n                loading: true\n            });\n            try {\n                let uploadCount = 0;\n                attachments.forEach(async ({ raw }, i)=>{\n                    const isUploaded = await this.uploadFiles(raw, i);\n                    if (isUploaded) {\n                        uploadCount++;\n                    }\n                    if (uploadCount === attachments.length) {\n                        this.handleSend();\n                    }\n                });\n            } catch (err) {\n                this.renderErrorMessage(err);\n            } finally{\n                this.setState({\n                    loading: false\n                });\n            }\n        }\n    }\n    additionalCheckForEmail(email) {\n        if (!document && !document.createElement) return true;\n        const input = document.createElement('input');\n        input.setAttribute('type', 'email');\n        input.setAttribute('id', email);\n        input.value = email;\n        return input && input.validity && input.validity.valid;\n    }\n    checkTagsValue(arr = [], type) {\n        const { tagsValueObj } = this.state;\n        if (type) {\n            let status = !arr || arr.length < 1;\n            for(let i = 0; i < arr.length; i++){\n                const email = arr[i].text;\n                if (!this.additionalCheckForEmail(email) || !validateEmail(email === null || email === void 0 ? void 0 : email.trim())) {\n                    status = false;\n                    this.setState({\n                        disableSend: true\n                    });\n                    break;\n                }\n                this.setState({\n                    disableSend: false\n                });\n                status = true;\n            }\n            this.setState((prevState)=>({\n                    tagsValueObj: _object_spread_props(_object_spread({}, prevState.tagsValueObj), {\n                        [type]: status\n                    })\n                }));\n        }\n        return Object.keys(tagsValueObj).every((key)=>tagsValueObj[key]);\n    }\n    purifyInputContent(e) {\n        if (e.key !== 'Enter' && e.key !== 'Backspace') {\n            editorInputHandler(this.editor);\n        }\n    }\n    removeTooltipErrorMessage() {\n        this.setState({\n            warningText: '',\n            hasErrorClass: false,\n            isAttachmentError: false\n        });\n    }\n    isCaptchaValidationRequired() {\n        const { user: { account_type: { name: accountType = null } = {}, isReviewed } } = this.props;\n        if (global.location.hostname === 'www.jotform.ooo') {\n            return false;\n        }\n        return !isReviewed || [\n            'GUEST',\n            'FREE'\n        ].indexOf(accountType) > -1;\n    }\n    renderErrorMessage(msg, isAttachmentError = false) {\n        return this.setState({\n            warningText: t(msg),\n            hasErrorClass: true,\n            isAttachmentError\n        });\n    }\n    renderMessageSettingsFormFields() {\n        const { modalContainer } = this.props;\n        const { messageFrom, messageFromName, messageReplyTo, senderEmails, customSenders } = this.state;\n        const renderReplyTo = ()=>/*#__PURE__*/ _jsx(\"input\", {\n                className: \"jfSelect-input\",\n                type: \"text\",\n                name: \"reply-to-email\",\n                id: \"reply-to-email\",\n                value: messageReplyTo,\n                onChange: ({ target: { value } })=>this.setState({\n                        messageReplyTo: value\n                    }),\n                onKeyDown: this.logReplyToEmailChange\n            });\n        const { user: userData } = this.props;\n        return [\n            // {\n            //   fieldTitle: t('Sender Name'),\n            //   element: <input className='jfSelect-input forSenderName' value={messageFromName} onChange={e => this.setState({ messageFromName: e.target.value })} />\n            // },\n            {\n                fieldTitle: t('Reply-to Email'),\n                element: renderReplyTo()\n            },\n            {\n                fieldTitle: t('Sender Email'),\n                fieldSubTitle: t(\"Users can receive emails using your own SMTP server instead of Jotform's servers.\"),\n                element: /*#__PURE__*/ _jsx(NewSenderEmail, {\n                    senderEmail: messageFrom,\n                    sender: messageFromName,\n                    addSenderEmail: this.handleAddSenderEmail,\n                    cancelSenderEmail: this.handleCancelSenderEmail,\n                    senderEmails: senderEmails,\n                    user: userData || null,\n                    customSenders: customSenders,\n                    onChange: ({ sender, senderEmail })=>{\n                        this.handleMessageFromChange(sender, senderEmail);\n                        if (senderEmail === 'noreply@formresponse.com') {\n                            this.actionHandler('change', 'FormresponseSelected');\n                        }\n                    },\n                    modalContainer: modalContainer\n                })\n            }\n        ];\n    }\n    render() {\n        const { renderStatic, renderResizable, props: { resizable }, state: { isSettingsOpen } } = this;\n        return /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                /*#__PURE__*/ _jsx(Dialog, {\n                    wrapperClassName: \"inMessageSettings\",\n                    dialogClass: \"forNewMessageSettings\",\n                    isOpen: isSettingsOpen,\n                    title: t('Email Settings'),\n                    subTitles: [\n                        t('Update your email choices')\n                    ],\n                    onClose: this.handleMessageSettings,\n                    onSubmit: this.handleMessageSettings,\n                    submitButtonText: t('DONE'),\n                    renderFields: this.renderMessageSettingsFormFields,\n                    headerImg: /*#__PURE__*/ _jsx(IconEnvelopeClosedFilled, {})\n                }),\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: this.messageClassNames,\n                    ref: this.animatedElement,\n                    children: resizable ? renderResizable : renderStatic\n                })\n            ]\n        });\n    }\n    constructor(props){\n        super(props), _define_property(this, \"getResourceType\", (type)=>{\n            switch(type){\n                case 'form-builder':\n                    return 'FORM';\n                case 'sheets':\n                    return 'SHEET';\n                case 'workflow':\n                    return 'WORKFLOW';\n                default:\n                    return 'FORM';\n            }\n        }), _define_property(this, \"onFormFieldAdd\", (addedField)=>{\n            const { actionHandler } = this.props;\n            const submissionTableContainer = this.editorDiv.querySelector('.submissonTable');\n            this.editor.setSelection(this.editor._lastSelection);\n            if (submissionTableContainer && submissionTableContainer.contains(this.editor._lastSelection.commonAncestorContainer)) {\n                // eslint-disable-next-line no-undef\n                const range = new Range();\n                range.setStart(submissionTableContainer === null || submissionTableContainer === void 0 ? void 0 : submissionTableContainer.nextSibling, 0);\n                range.setEnd(submissionTableContainer === null || submissionTableContainer === void 0 ? void 0 : submissionTableContainer.nextSibling, 0);\n                this.editor.setSelection(range);\n            }\n            this.editor.insertHTML(addedField[0]);\n            actionHandler('change', 'formFieldAddedOnMail');\n        }), _define_property(this, \"setInputRef\", (emailType)=>(r)=>{\n                this.inputRefs[emailType] = r;\n            }), // eslint-disable-next-line react/sort-comp\n        _define_property(this, \"logReplyToEmailChange\", debounce(()=>{\n            const { messageReplyTo: currReplyEmail } = this.props;\n            const { messageReplyTo: updatedReplyEmail } = this.state;\n            if (currReplyEmail !== updatedReplyEmail) {\n                this.actionHandler('change', 'NewReplytoEmailAdded');\n            }\n        }, 5000));\n        const { actionHandler, onLoaded, project } = this.props;\n        this.state = {\n            path: null,\n            subject: '',\n            messageFrom: 'noreply@jotform.com',\n            messageFromName: 'Jotform',\n            showMessageFrom: false,\n            messageTo: '',\n            messageCc: '',\n            messageBcc: '',\n            warningText: '',\n            disableSend: false,\n            recapthcaResponse: '',\n            isRecaptchaReady: false,\n            isMessageMinimized: false,\n            isMessageMailtoCCEnabled: false,\n            isMessageMailtoBCCEnabled: false,\n            isResizing: false,\n            isResized: false,\n            hasErrorClass: false,\n            tagsValueObj: {},\n            isSettingsOpen: false,\n            selectedSenderEmail: [],\n            attachments: [],\n            loading: false,\n            isAttachmentError: false,\n            isReachedLimitBSG: false,\n            isReachedLimitTO: false,\n            isReachedLimitCC: false,\n            isReachedLimitBCC: false,\n            inputLimitTO: false,\n            inputLimitCC: false,\n            inputLimitBCC: false,\n            inputLimitBSG: false,\n            customSenders: []\n        };\n        this.editor = null;\n        this.editorDiv = null;\n        this.initialSubject = props.subject;\n        var _project;\n        this.brandingDescription = (_project = ({\n            inbox: 'Use Jotform Inbox to manage submissions like a pro.',\n            sheets: 'Use Jotform Tables to manage your data in an all-in-one workspace.'\n        })[project]) !== null && _project !== void 0 ? _project : '';\n        // Bindings\n        this.handleSend = this.handleSend.bind(this);\n        this.handleAddSenderEmail = this.handleAddSenderEmail.bind(this);\n        this.handleCancelSenderEmail = this.handleCancelSenderEmail.bind(this);\n        this.handleMessageMinimize = this.handleMessageMinimize.bind(this);\n        this.handleTagsChange = this.handleTagsChange.bind(this);\n        this.handleMessageViewMode = this.handleMessageViewMode.bind(this);\n        this.handleMessageMailtoCC = this.handleMessageMailtoCC.bind(this);\n        this.handleMessageMailtoBCC = this.handleMessageMailtoBCC.bind(this);\n        this.handleMessageSettings = this.handleMessageSettings.bind(this);\n        this.renderMessageSettingsFormFields = this.renderMessageSettingsFormFields.bind(this);\n        this.handleMessageEmptyFields = this.handleMessageEmptyFields.bind(this);\n        this.handleMessageVisibility = this.handleMessageVisibility.bind(this);\n        this.purifyInputContent = this.purifyInputContent.bind(this);\n        this.removeTooltipErrorMessage = this.removeTooltipErrorMessage.bind(this);\n        this.renderErrorMessage = this.renderErrorMessage.bind(this);\n        this.handleMessageAutoHideFields = this.handleMessageAutoHideFields.bind(this);\n        this.handleTooltipClick = this.handleTooltipClick.bind(this);\n        this.handleRecaptchaChange = this.handleRecaptchaChange.bind(this);\n        this.isCaptchaValidationRequired = this.isCaptchaValidationRequired.bind(this);\n        this.handleRecaptchaRef = this.handleRecaptchaRef.bind(this);\n        this.handleCloseClick = this.handleCloseClick.bind(this);\n        this.additionalCheckForEmail = this.additionalCheckForEmail.bind(this);\n        this.logReplyToEmailChange = this.logReplyToEmailChange.bind(this);\n        this.handleDrop = this.handleDrop.bind(this);\n        this.handleFiles = this.handleFiles.bind(this);\n        this.prepareFiles = this.prepareFiles.bind(this);\n        this.uploadFiles = this.uploadFiles.bind(this);\n        this.validateUploadFiles = this.validateUploadFiles.bind(this);\n        this.moveProgressBar = this.moveProgressBar.bind(this);\n        this.getMessageFrom = this.getMessageFrom.bind(this);\n        this.mailToWrapper = /*#__PURE__*/ createRef();\n        this.transitionWrapper = /*#__PURE__*/ createRef();\n        this.footer = /*#__PURE__*/ createRef();\n        this.animatedElement = /*#__PURE__*/ createRef();\n        this.dropAreaRef = /*#__PURE__*/ createRef();\n        this.fileProgressBarRef = /*#__PURE__*/ createRef();\n        this.scrollContainer = /*#__PURE__*/ createRef();\n        this.actionHandler = actionHandler;\n        this.loaded = onLoaded;\n        this.selection = 0;\n    }\n}\n// eslnt does not play well with getDerivedStateFromProps. See https://github.com/yannickcr/eslint-plugin-react/issues/1759\nMessage.propTypes = {\n    /** User as received from JotForm API */ user: PropTypes.shape({\n        isReviewed: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.bool\n        ]),\n        account_type: PropTypes.oneOfType([\n            PropTypes.shape({\n                name: PropTypes.string\n            }),\n            PropTypes.string\n        ]),\n        senderEmails: PropTypes.shape({}),\n        username: PropTypes.string\n    }),\n    uploadRules: PropTypes.shape({\n        sizePerFile: PropTypes.number,\n        formattedSizePerFile: PropTypes.string,\n        numberPerUpload: PropTypes.number\n    }),\n    /** Title of the message popover */ title: PropTypes.string,\n    titleIcon: PropTypes.node,\n    /** JotForm form id */ formID: PropTypes.string,\n    /** Subject line for for email */ subject: PropTypes.string,\n    /** Default e-mail address to send e-mail to */ messageTo: PropTypes.string,\n    /** Default e-mail address to reply e-mail to */ messageReplyTo: PropTypes.string,\n    /** Default sender e-mail - will default to noreply if does not match an SMTP record on user's settings */ messageFrom: PropTypes.string,\n    /** Default sender name */ messageFromName: PropTypes.string,\n    /** Method accepted by JotForm e-mail API ('submissions-reply', 'submissions-forward') */ messageMethod: PropTypes.string,\n    /** An object/array to be passed to requestEmailContents */ answers: PropTypes.arrayOf(PropTypes.shape({})),\n    /** Whether to display the popover */ isMessageOpen: PropTypes.bool,\n    /**\n   * Whether to display Message in regular size or fullscreen ('regular'|'fullscreen')\n   */ messageViewMode: PropTypes.string,\n    /**\n   * Whether to display minimize action button\n   */ showMinimizeButton: PropTypes.bool,\n    /**\n   * Whether to display change message view mode action button\n   */ showChangeMessageViewModeButton: PropTypes.bool,\n    /** Callback to handle close action on the popover.\n   * You can set isMessageOpen to false.\n   */ onMessageVisibilityChange: PropTypes.func,\n    /** There was an error sending the message */ onMessageSendError: PropTypes.func,\n    /** Message is successfully sent */ onMessageSendSuccess: PropTypes.func,\n    /** A callback to generate the contents of the e-mail body.\n   * You can return the value as a string or a Promise resolving into a string.\n   */ requestEmailContents: PropTypes.func,\n    /** Handler to handle watchman events. Accepts an action and a target. */ actionHandler: PropTypes.func,\n    /** Defines whether the component is resizable or not */ resizable: PropTypes.bool,\n    mailToPlaceholder: PropTypes.string,\n    hasAttachment: PropTypes.bool,\n    project: PropTypes.string,\n    modalContainer: PropTypes.node,\n    submissionID: PropTypes.string,\n    contentStatus: PropTypes.oneOf([\n        'loading',\n        'ready',\n        false\n    ]),\n    toLeft: PropTypes.node,\n    rmiMailCreate: PropTypes.func,\n    requestMore: PropTypes.bool,\n    onLoaded: PropTypes.func,\n    /** Form fields for add to subject */ formArray: PropTypes.array,\n    withSubmissionTableProps: PropTypes.shape({\n        submissionTable: PropTypes.string\n    }),\n    showAddFields: PropTypes.bool,\n    newReplyForwardTemplate: PropTypes.bool,\n    className: PropTypes.string,\n    recaptchaSite: PropTypes.string\n};\nMessage.defaultProps = {\n    user: {\n        isReviewed: false,\n        account_type: {\n            name: ''\n        },\n        username: ''\n    },\n    onLoaded: (f)=>f,\n    uploadRules: {\n        sizePerFile: 5000000,\n        formattedSizePerFile: '5 MB',\n        numberPerUpload: 3\n    },\n    title: '',\n    titleIcon: null,\n    subject: '',\n    formID: '',\n    messageTo: '',\n    messageFrom: '',\n    messageFromName: 'Jotform',\n    messageReplyTo: '',\n    messageMethod: '',\n    mailToPlaceholder: '',\n    answers: [],\n    isMessageOpen: false,\n    messageViewMode: 'regular',\n    showMinimizeButton: true,\n    showChangeMessageViewModeButton: true,\n    hasAttachment: false,\n    project: '',\n    onMessageVisibilityChange: (f)=>f,\n    onMessageSendError: (f)=>f,\n    onMessageSendSuccess: (f)=>f,\n    requestEmailContents: (f)=>f,\n    actionHandler: (f)=>f,\n    resizable: false,\n    modalContainer: null,\n    submissionID: '',\n    contentStatus: false,\n    toLeft: null,\n    rmiMailCreate: null,\n    requestMore: false,\n    formArray: [],\n    withSubmissionTableProps: null,\n    showAddFields: false,\n    newReplyForwardTemplate: false,\n    className: '',\n    recaptchaSite: ''\n};\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport styled from 'styled-components';\nimport { string, number, shape } from 'prop-types';\nconst SpinnerBlade = styled.div`\n  @keyframes blinkAnim {\n    0% { opacity: 1 }\n    100% { opacity: 0 }\n  }\n\n  width: ${({ blade })=>blade.width}px; height: 100%;\n  position: absolute;\n  top: 50%; left: 50%;\n\n  &:before {\n    content: \"\";\n    top: 0; left: 0;\n    position: absolute;\n    width: 100%; height: ${({ blade })=>blade.height}px;\n    background-color: ${({ color })=>color};\n    border-radius: 4px;\n    animation: blinkAnim linear ${({ duration })=>duration}s infinite;\n  }\n\n  &:nth-child(${({ i })=>i + 1}) {\n    transform: translate(-50%, -50%) rotate(${({ blade, i })=>360 / blade.count * i}deg);\n    &:before { animation-delay: -${({ i, blade, duration })=>duration / blade.count * (blade.count - i)}s; }\n  }\n`;\nconst SpinnerContainer = styled.div`\n  width: ${({ size })=>size}px; height: ${({ size })=>size}px;\n  position: relative;\n`;\nexport const Spinner = ({ size, blade, duration, color })=>/*#__PURE__*/ _jsx(SpinnerContainer, {\n        className: \"spinnerContainer\",\n        size,\n        children: [\n            ...Array(blade.count)\n        ].map((_, i)=>/*#__PURE__*/ _jsx(SpinnerBlade, {\n                i,\n                blade,\n                size,\n                duration,\n                color,\n                key: i\n            }))\n    });\nSpinner.propTypes = {\n    size: number,\n    blade: shape({\n        count: number,\n        width: number,\n        height: number,\n        radius: number\n    }),\n    duration: number,\n    color: string\n};\nSpinner.defaultProps = {\n    size: 28,\n    blade: {\n        count: 14,\n        width: 3,\n        height: 6,\n        radius: 4\n    },\n    duration: 1,\n    color: '#31a44a'\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React, { createContext, useMemo, useContext } from 'react';\nimport useSwr from 'swr';\nimport { shape, node, arrayOf } from 'prop-types';\nimport { useFeatures } from '@paralleldrive/react-feature-toggles';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { gpt3Completion } from '../api';\nimport { answersPropType } from '../constants/proptypes';\nexport const TagSuggestionsContext = /*#__PURE__*/ createContext();\nconst shouldPrime = ({ type })=>type === 'control_textarea' || type === 'control_rating' || type === 'control_checkbox' || type === 'control_radio';\nconst getFormData = (subAnswers)=>Object.entries(Object.values(subAnswers).filter(shouldPrime).reduce((acc, answer)=>{\n        if (answer.name === 'tags') return acc;\n        const value = answer.prettyFormat || answer.answer;\n        if (!value) return acc;\n        return _object_spread_props(_object_spread({}, acc), {\n            [answer.name]: value\n        });\n    }, {})).map(([key, val])=>`${key.trim()}=${val.trim()}`).join(',');\nconst getTags = (subAnswers)=>{\n    var _tagField_answer;\n    const tagField = Object.values(subAnswers).find(({ name })=>name === 'tags') || false;\n    if (!tagField) return false;\n    if (!(tagField === null || tagField === void 0 ? void 0 : (_tagField_answer = tagField.answer) === null || _tagField_answer === void 0 ? void 0 : _tagField_answer.length)) return false;\n    const optionsArray = Object.values(safeJSONParse(tagField.options_array));\n    const tagAnswer = typeof tagField.answer === 'string' ? [\n        tagField.answer\n    ] : tagField.answer;\n    const selectedTags = tagAnswer.map((selectedTag)=>optionsArray.find(({ key })=>`{${key}}` === selectedTag)).map((opt)=>opt === null || opt === void 0 ? void 0 : opt.value).filter((l)=>!!l);\n    if (!(selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags.length)) return false;\n    return selectedTags;\n};\nconst generateTags = async ({ primes, answers: submissionAnwers, existingTags = '' })=>{\n    const newData = getFormData(submissionAnwers);\n    if (!newData) return false;\n    const primeData = Object.values(primes).slice(-20).join('\\n\\n');\n    const prompt = `${primeData}\\n\\nForm>${newData}\\nTags>${(existingTags === null || existingTags === void 0 ? void 0 : existingTags.length) > 0 ? existingTags : ''}`.trim();\n    return gpt3Completion({\n        prompt,\n        temprature: '0.21',\n        stop: '\\n\\n',\n        top_p: '0.42',\n        max_tokens: '40',\n        engine: 'davinci',\n        frequency_penalty: '1'\n    }).then((tags)=>tags.split(',').map((tag)=>tag.trim()).filter((t)=>t));\n};\nconst TagSuggestionsProvider = ({ submissions, children, answers })=>{\n    const features = useFeatures();\n    const shouldSuggestTags = features.includes('suggestTags');\n    const predefinedPrimes = useMemo(()=>{\n        if (!shouldSuggestTags) return false;\n        return submissions === null || submissions === void 0 ? void 0 : submissions.reduce((acc, sub)=>{\n            if (!sub) return acc;\n            const formStr = getFormData(sub.answers);\n            const tagStr = getTags(sub.answers);\n            if (!formStr || !tagStr) return acc;\n            const str = `Form>${formStr}\\nTags>${tagStr}`;\n            return _object_spread_props(_object_spread({}, acc), {\n                [sub.id]: str\n            });\n        }, {});\n    }, [\n        submissions\n    ]);\n    const tags = useMemo(()=>getTags(answers) || [], [\n        answers\n    ]);\n    const swrContext = useSwr([\n        predefinedPrimes,\n        answers\n    ], ()=>{\n        if (!shouldSuggestTags) return;\n        return generateTags({\n            primes: predefinedPrimes,\n            answers,\n            existingTags: tags\n        });\n    });\n    return /*#__PURE__*/ _jsx(TagSuggestionsContext.Provider, {\n        value: _object_spread({}, swrContext),\n        children: children ? children : null\n    });\n};\nTagSuggestionsProvider.propTypes = {\n    submissions: arrayOf(shape({})),\n    children: node,\n    answers: answersPropType\n};\nTagSuggestionsProvider.defaultProps = {\n    submissions: [],\n    children: undefined,\n    answers: {}\n};\nexport const useTagSuggestions = ()=>useContext(TagSuggestionsContext);\nexport default TagSuggestionsProvider;\n","import { _ as _define_property } from \"@swc/helpers/_/_define_property\";\nimport { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { func } from 'prop-types';\nimport memoize from 'lodash/memoize';\nimport React, { Component, useEffect, useState, createRef, useMemo } from 'react';\nimport { OptionItem } from '@jotforminc/answer-fields';\nimport { capitalizeFirstLetter } from '@jotforminc/utils';\nimport styled from 'styled-components';\nimport { darken } from 'polished';\nimport { withFeatures } from '@paralleldrive/react-feature-toggles';\nimport { withRouter } from 'react-router-dom';\nimport { t as translate } from '@jotforminc/translation';\nimport { useMeasure } from '../../hooks';\nimport Feature from '../Feature';\nimport SVG from '../SVG';\n// TODO: migrate to new translation structure\nimport { submissionWidgetPropType, submissionPropType, translatedProps } from '../../constants/proptypes';\nimport { classNames, isOptionsArrayContain, getNextAvailableTagKey, getNextAvailableTagColor, updateLocationParams } from '../../utils';\nimport { useTagSuggestions } from '../../contexts/TagSuggestions';\nimport { TAG_COLOR_LIST } from '../../constants';\nimport WatchmanRecorder from '../../utils/WatchmanRecorder';\nconst memoizedGetNextColor = memoize(getNextAvailableTagColor);\nconst memoizedOptionsArray = memoize((optionsArray)=>Object.values(optionsArray));\nconst memoizedTagAnswers = memoize(({ answers }, { qid })=>answers[qid] && answers[qid].answer || []);\n/* eslint-disable react/prop-types */ export const DotFlashing = styled.div`\n  position: relative;\n  width: ${(props)=>props.size}px;\n  height: ${(props)=>props.size}px;\n  margin-left: ${(props)=>props.size * 1.5}px;\n  border-radius: 50%;\n  background-color: ${(props)=>props.color};\n  color: ${(props)=>props.color};\n  animation: dotFlashing 1s infinite linear alternate;\n  animation-delay: .5s;\n\n  &:before, &:after {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    top: 0;\n  }\n\n  &:before {\n    left: -${(props)=>props.size * 1.5}px;\n    width: ${(props)=>props.size}px;\n    height: ${(props)=>props.size}px;\n    border-radius: 5px;\n    background-color: ${(props)=>props.color};\n    color: ${(props)=>props.color};\n    animation: dotFlashing 1s infinite alternate;\n    animation-delay: 0s;\n  }\n\n  &:after {\n    left: ${(props)=>props.size * 1.5}px;\n    width: ${(props)=>props.size}px;\n    height: ${(props)=>props.size}px;\n    border-radius: 5px;\n    background-color: ${(props)=>props.color};\n    color: ${(props)=>props.color};\n    animation: dotFlashing 1s infinite alternate;\n    animation-delay: 1s;\n  }\n\n  @keyframes dotFlashing {\n    0% {\n      background-color: ${(props)=>props.color};\n    }\n    50%,\n    100% {\n      background-color: #ebe6ff;\n    }\n  }\n`;\nDotFlashing.defaultProps = {\n    size: 6,\n    color: '#4573E3'\n};\nconst CustomTag = styled.div`\n  &,\n  &.jfTag-multiselect {\n    cursor: pointer;\n    border-width: 1px;\n    border-style: dashed;\n    border-radius: 4px;\n    margin-left: 0;\n    margin-right: 4px;\n    border-color: ${(props)=>props.color};\n    padding-right: 16px;\n  }\n\n  &:hover {\n    background-color: ${(props)=>props.color};\n  }\n\n  svg {\n    fill: ${(props)=>darken(0.2, props.color)};\n    height: 8px;\n    width: 8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 4px;\n    margin-left: 4px;\n  }\n`;\nconst Tags = ({ optionsArray, t, tagAnswers, renderInputComponent, assignNewTag })=>{\n    const { data: generatedTags, isValidating: waiting } = useTagSuggestions();\n    const [tagList, setTagList] = useState(generatedTags);\n    useEffect(()=>{\n        if (generatedTags) {\n            const filteredTags = generatedTags.filter((value)=>{\n                const existingTag = isOptionsArrayContain(optionsArray, value);\n                return existingTag ? tagAnswers.indexOf(`{${existingTag.key}}`) < 0 : true;\n            });\n            setTagList(filteredTags);\n        }\n    }, [\n        generatedTags,\n        optionsArray,\n        tagAnswers\n    ]);\n    const onTagSelected = (e, tag)=>{\n        assignNewTag(tag);\n    };\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"jfTag\",\n                children: [\n                    /*#__PURE__*/ _jsx(Feature, {\n                        name: \"isNewTags\",\n                        inactiveComponent: /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfTag-icon\",\n                            children: /*#__PURE__*/ _jsx(SVG, {\n                                name: \"IconTagsFilled\",\n                                className: \"jfTag-icon-svg\"\n                            })\n                        })\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"jfTag-tags isFullWidth\",\n                        \"aria-label\": t.ADD_A_TAG,\n                        children: /*#__PURE__*/ _jsx(Feature, {\n                            name: \"isNewTags\",\n                            activeComponent: renderInputComponent()\n                        })\n                    })\n                ]\n            }),\n            waiting ? /*#__PURE__*/ _jsx(DotFlashing, {}) : null,\n            !waiting && (tagList === null || tagList === void 0 ? void 0 : tagList.length) > 0 ? /*#__PURE__*/ _jsx(\"div\", {\n                className: classNames('jfTag', 'forSuggestions'),\n                role: \"grid\",\n                children: /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"jfTag-tags isFullWidth\",\n                    role: \"grid\",\n                    children: /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"jfAnswer isSubmissionTags\",\n                        children: /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"jfAnswer-answer-container\",\n                            children: tagList.map((tag)=>/*#__PURE__*/ _jsxs(CustomTag, {\n                                    onClick: (e)=>onTagSelected(e, tag),\n                                    onKeyDown: (e)=>e,\n                                    className: \"react-autosuggest__suggestion-item jfTag-multiselect isOption\",\n                                    color: TAG_COLOR_LIST[Math.floor(Math.random() * TAG_COLOR_LIST.length)].color,\n                                    children: [\n                                        tag,\n                                        /*#__PURE__*/ _jsx(SVG, {\n                                            name: \"iconPlusSm\"\n                                        })\n                                    ]\n                                }))\n                        })\n                    })\n                })\n            }) : null\n        ]\n    });\n};\n/* eslint-enable react/prop-types */ class SubmissionTags extends Component {\n    onTagDelete(tag) {\n        const { onUpdateTag, tagQuestion: { options_array: optionsArray }, activeTab } = this.props;\n        // Only added isDeleted property to the deleted tag.\n        onUpdateTag({\n            options_array: _object_spread_props(_object_spread({}, optionsArray), {\n                [tag.key]: _object_spread_props(_object_spread({}, tag), {\n                    isDeleted: true\n                })\n            })\n        });\n        this.setState({\n            optionsArray: _object_spread_props(_object_spread({}, optionsArray), {\n                [tag.key]: _object_spread_props(_object_spread({}, tag), {\n                    isDeleted: true\n                })\n            })\n        });\n        WatchmanRecorder.recordEvent('Tag-SettingsDeleted', capitalizeFirstLetter(activeTab));\n    }\n    onTagChange(tag) {\n        const { onUpdateTag, tagQuestion: { options_array: optionsArray }, activeTab } = this.props;\n        const oldTag = optionsArray[tag.key];\n        const isColorChanged = oldTag.color !== tag.color;\n        const action = isColorChanged ? 'Tag-SettingsColorChanged' : 'Tag-SettingsTextUpdated';\n        WatchmanRecorder.recordEvent(action, capitalizeFirstLetter(activeTab));\n        onUpdateTag({\n            options_array: _object_spread_props(_object_spread({}, optionsArray), {\n                [tag.key]: tag\n            })\n        });\n    }\n    get nextAvailableColor() {\n        const { tagQuestion } = this.props;\n        return memoizedGetNextColor(tagQuestion.options_array);\n    }\n    get tagAnswers() {\n        const { submission, tagQuestion } = this.props;\n        const tagAnswers = memoizedTagAnswers(submission, tagQuestion);\n        return Array.isArray(tagAnswers) ? tagAnswers : Object.values(tagAnswers);\n    }\n    get optionsArray() {\n        return memoizedOptionsArray(this.filterTagQuestion().options_array);\n    }\n    assignNewTag(value) {\n        const { tagQuestion: { options_array: tags } } = this.props;\n        if (value) {\n            // If tag exist we will toggle it; otherwise add as new one\n            const existingTag = isOptionsArrayContain(tags, value);\n            // Create tag if does not exist\n            if (!existingTag) {\n                return this.createNewTag(value);\n            }\n            // Toggle if exist\n            return this.toggleSubmissionTagOption(existingTag);\n        }\n    }\n    toggleSubmissionTagOption({ key }) {\n        const { onAssignTag } = this.props;\n        const tagKey = `{${key}}`;\n        const existingTag = this.tagAnswers.indexOf(tagKey) > -1;\n        const updatedTag = existingTag ? this.tagAnswers.filter((val)=>val !== tagKey) : this.tagAnswers.concat(tagKey);\n        onAssignTag(updatedTag.length === 0 ? [\n            ''\n        ] : updatedTag);\n    }\n    createNewTag(value) {\n        const { onUpdateTag, tagQuestion: { options_array: tags }, activeTab } = this.props;\n        const tag = Object.values(tags).find((item)=>item.value === value);\n        const newTag = {\n            [getNextAvailableTagKey(tags)]: {\n                key: getNextAvailableTagKey(tags),\n                color: this.nextAvailableColor,\n                value,\n                isDeleted: false\n            }\n        };\n        const newTags = tag ? _object_spread_props(_object_spread({}, tags), {\n            [tag.key]: _object_spread_props(_object_spread({}, tag), {\n                isDeleted: false\n            })\n        }) : _object_spread({}, tags, newTag);\n        WatchmanRecorder.recordEvent('Tag-NewCreated', capitalizeFirstLetter(activeTab));\n        onUpdateTag({\n            options_array: newTags\n        });\n        this.setState({\n            optionsArray: newTags\n        });\n    }\n    createTag({ value, color }) {\n        return /*#__PURE__*/ _jsx(OptionItem, {\n            className: \"react-autosuggest__suggestion-item jfTag-multiselect isOption\",\n            backgroundColor: color,\n            children: value\n        });\n    }\n    filterTagQuestion() {\n        const { tagQuestion, tagQuestion: { options_array: optionsArr } } = this.props;\n        const { optionsArray } = this.state;\n        const targetArr = optionsArray && Object.values(optionsArray).length > 0 ? Object.values(optionsArray) : Object.values(optionsArr || {});\n        const newObj = targetArr.filter((item)=>item && (item.isDeleted === 'false' || !item.isDeleted)).reduce((payload, item)=>{\n            const obj = payload;\n            obj[item.key] = item;\n            return obj;\n        }, {});\n        return _object_spread_props(_object_spread({}, tagQuestion), {\n            options_array: newObj\n        });\n    }\n    renderInputComponent(inputProps) {\n        const { submission, tagQuestion, activeTab, t, InnerButton } = this.props;\n        const tags = submission === null || submission === void 0 ? void 0 : submission.answers[tagQuestion === null || tagQuestion === void 0 ? void 0 : tagQuestion.qid];\n        const isDeleteTagAllowed = activeTab !== 'sentbox';\n        const [isMoreVisible, setMoreVisible] = useState(false);\n        const [isMoreTagsShown, setMoreTagsShown] = useState(false);\n        const options = Object.values((tagQuestion === null || tagQuestion === void 0 ? void 0 : tagQuestion.options_array) || {});\n        const tagAnswers = useMemo(()=>{\n            if (Array.isArray(tags === null || tags === void 0 ? void 0 : tags.answer)) return tags.answer;\n            return Object.values((tags === null || tags === void 0 ? void 0 : tags.answer) || {});\n        }, [\n            tags\n        ]);\n        const [tagWrapperRef, size] = useMeasure();\n        const tagsRef = useMemo(()=>{\n            if (!tagAnswers) return [];\n            return tagAnswers === null || tagAnswers === void 0 ? void 0 : tagAnswers.map(()=>/*#__PURE__*/ createRef());\n        }, [\n            tagAnswers\n        ]);\n        useEffect(()=>{\n            if (!size || tagsRef.length <= 0 || tagAnswers.length <= 0) {\n                setMoreVisible(false);\n                return;\n            }\n            const isMore = tagsRef.some((tag, index)=>{\n                if (!tag.current) return false;\n                if (tag.current.getBoundingClientRect().top > size.top + size.height) {\n                    setMoreVisible(tagsRef.length - index);\n                    return true;\n                }\n                return false;\n            });\n            if (!isMore) setMoreVisible(false);\n        }, [\n            tagsRef,\n            size\n        ]);\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"react-autosuggest__wrapper\",\n            children: [\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"jfAnswer isSubmissionTags isCheckbox\",\n                    children: /*#__PURE__*/ _jsxs(\"div\", {\n                        style: {\n                            height: `${isMoreTagsShown ? tagWrapperRef === null || tagWrapperRef === void 0 ? void 0 : tagWrapperRef.current.scrollHeight : 20}px`\n                        },\n                        ref: tagWrapperRef,\n                        className: `jfAnswer-answer-container ${isMoreVisible ? 'isShown' : ''}`,\n                        children: [\n                            InnerButton,\n                            tagAnswers && tagWrapperRef.current && tagAnswers.map((answer, index)=>{\n                                const answerKey = answer.replace(/{|}/mg, '');\n                                const opt = options.find((o)=>o.key === answerKey);\n                                if (!opt) return null;\n                                if (typeof opt.isDeleted === 'boolean' && opt.isDeleted) return null;\n                                if (opt.isDeleted === 'true') return null;\n                                return /*#__PURE__*/ _jsxs(\"div\", {\n                                    ref: tagsRef[index],\n                                    onKeyDown: true,\n                                    className: \"jfTag-multiselect isRemovable\",\n                                    style: {\n                                        backgroundColor: opt.color\n                                    },\n                                    onClick: this.onTagClick,\n                                    \"data-key\": opt.key,\n                                    children: [\n                                        opt.value,\n                                        isDeleteTagAllowed && /*#__PURE__*/ _jsx(\"button\", {\n                                            style: {\n                                                backgroundColor: opt.color\n                                            },\n                                            type: \"button\",\n                                            onClick: (e)=>this.onTagDeleteClick(e, opt.key),\n                                            \"data-key\": opt.key,\n                                            \"aria-label\": translate(`Remove ${opt.value}`),\n                                            children: /*#__PURE__*/ _jsx(SVG, {\n                                                name: \"IconXmark\"\n                                            })\n                                        })\n                                    ]\n                                });\n                            }),\n                            isMoreVisible && /*#__PURE__*/ _jsxs(\"div\", {\n                                onClick: ()=>setMoreTagsShown(!isMoreTagsShown),\n                                className: `tagsCount hideOnPrint ${isMoreTagsShown ? 'isMoreTagsShown' : ''}`,\n                                children: [\n                                    !isMoreTagsShown && isMoreVisible,\n                                    ' ',\n                                    isMoreTagsShown ? t.LESS : t.MORE,\n                                    /*#__PURE__*/ _jsx(SVG, {\n                                        className: \"tagsCountIcon\",\n                                        name: `${!isMoreTagsShown ? 'iconAngleDown' : 'iconAngleUp'}`\n                                    })\n                                ]\n                            })\n                        ]\n                    })\n                }),\n                /*#__PURE__*/ _jsx(Feature, {\n                    name: \"isNewTags\",\n                    inactiveComponent: /*#__PURE__*/ _jsx(\"input\", _object_spread({}, inputProps))\n                })\n            ]\n        });\n    }\n    render() {\n        const { t, onSaveDummyQuestions } = this.props;\n        return /*#__PURE__*/ _jsx(\"div\", {\n            className: classNames('jfInbox-submission-tags'),\n            children: /*#__PURE__*/ _jsx(Tags, {\n                tagAnswers: this.tagAnswers,\n                optionsArray: this.optionsArray,\n                t: t,\n                onTagDelete: this.onTagDelete,\n                toggleSubmissionTagOption: this.toggleSubmissionTagOption,\n                renderInputComponent: this.renderInputComponent,\n                onSaveDummyQuestions: onSaveDummyQuestions,\n                onTagChange: this.onTagChange,\n                assignNewTag: this.assignNewTag\n            })\n        });\n    }\n    constructor(props){\n        super(props), _define_property(this, \"onTagClick\", (e)=>{\n            const { key: clickedKey } = e.target.dataset;\n            const { tagQuestion: { options_array: optionsArray } } = this.props;\n            const clickedOption = Object.values(optionsArray).find(({ key })=>key === clickedKey);\n            this.filterByTag(clickedOption);\n        }), _define_property(this, \"onTagDeleteClick\", (e, tagValue)=>{\n            e.stopPropagation();\n            e.preventDefault();\n            const { tagQuestion: { options_array: optionsArray } } = this.props;\n            const clickedOption = Object.values(optionsArray).find(({ key })=>key === tagValue);\n            this.toggleSubmissionTagOption(clickedOption);\n        }), _define_property(this, \"filterByTag\", (tag)=>{\n            const { history, tagQuestion, filterObject: oldFilterObject, filterText, activeTab } = this.props;\n            const filterObject = _object_spread_props(_object_spread({}, oldFilterObject), {\n                [`q${tagQuestion.qid}:matches`]: tag.key\n            });\n            WatchmanRecorder.recordEvent('FilterbyTag', capitalizeFirstLetter(activeTab));\n            history.push(updateLocationParams({\n                filterObject,\n                filterText\n            }));\n        });\n        this.state = {\n            optionsArray: []\n        };\n        this.onTagClick = this.onTagClick.bind(this);\n        this.onTagDelete = this.onTagDelete.bind(this);\n        this.onTagChange = this.onTagChange.bind(this);\n        this.assignNewTag = this.assignNewTag.bind(this);\n        this.renderInputComponent = this.renderInputComponent.bind(this);\n        this.toggleSubmissionTagOption = this.toggleSubmissionTagOption.bind(this);\n        this.filterTagQuestion = this.filterTagQuestion.bind(this);\n    }\n}\nSubmissionTags.propTypes = _object_spread({\n    onUpdateTag: func.isRequired,\n    onAssignTag: func.isRequired,\n    tagQuestion: submissionWidgetPropType.isRequired,\n    submission: submissionPropType.isRequired\n}, translatedProps);\nexport default withFeatures(withRouter(SubmissionTags));\n","import Styled from 'styled-components';\n/* eslint max-len: \"off\" */ const FormItemWrapper = Styled.div`\ndisplay: flex;\nalign-items: center;\nposition: relative;\ncursor: pointer;\ntransition:\n  background-color 0.15s ease,\n  border 0.15s ease,\n  transform 10ms linear;\ntext-decoration: none;\nborder-radius: .25em;\nfont-family: \"Circular\", \"Circular Std\", \"Circular Std Bold\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\npadding: ${(p)=>p.theme.itemPadding};\nline-height: ${(p)=>p.theme.lineHeight};\nbackground: ${(p)=>p.theme.itemBg};\nborder: 1px solid ${(p)=>p.theme.itemBorder};\n\n&:hover:not(.isDisabled) {\n  background-color: ${(p)=>p.theme.itemBgFocus};\n\n  .itemActions {\n    display: block;\n  }\n}\n\n[aria-selected=\"true\"] & {\n  border-color: ${(p)=>p.theme.itemBorderSelected};\n  background-color: ${(p)=>p.theme.itemBgSelected};\n\n  &:hover:not(.isDisabled) {\n    background-color: ${(p)=>p.theme.itemBgSelectedHover};\n  }\n}\n\n&:focus {\n  outline: 0;\n}\n\n.itemContent {\n  text-align: left;\n  flex-grow: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.itemTitle {\n  margin: 0;\n  padding: 0;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: block;\n\n  font-weight: ${(p)=>p.theme.titleFontWeight};\n  font-size: ${(p)=>p.theme.titleFontSize};\n  color: ${(p)=>p.theme.titleColor};\n\n  @media screen and (max-width: 600px) {\n    white-space: normal;\n  }\n}\n\n.itemDesc {\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n\n  font-weight: ${(p)=>p.theme.detailsFontWeight};\n  font-size: ${(p)=>p.theme.detailsFontSize};\n  color: ${(p)=>p.theme.detailsColor};\n\n  span {\n    color: #D93434;\n    font-weight: 500;\n  }\n}\n\n&.isDisabled {\n  cursor: default;\n  background-color: #FAFAFB;\n  border-color: #EBECF3;\n\n  &:hover .itemDisabled {\n    opacity: 1;\n  }\n\n  .itemInfo, .itemContent {\n    opacity: .5;\n  }\n}\n\n.itemDisabled {\n  font-size: 13px;\n  padding: 11px;\n  color: #fff;\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  background-color: #23283A;\n  border-radius: 3px;\n  transform: translateY(-50%);\n  opacity: 0;\n  pointer-events: none;\n  transition: .3s;\n}\n\n.itemInfo {\n  &-formType {\n    width: 38px;\n    height: 32px;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-image: url(\"data:image/svg+xml,%3Csvg width='26' height='32' viewBox='0 0 26 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.533333' y='0.533333' width='24.9333' height='30.9333' rx='3.73333' fill='white' stroke='%23B1C3E9' stroke-width='1.06667'/%3E%3Cpath d='M5 10.6908C5 9.75699 5.78756 9 6.75906 9H19.6589C20.6304 9 21.4179 9.75699 21.4179 10.6908V10.6908C21.4179 11.6246 20.6304 12.3816 19.6589 12.3816H6.75906C5.78756 12.3816 5 11.6246 5 10.6908V10.6908Z' fill='%230099FF'/%3E%3Cpath d='M5 16.3265C5 15.3927 5.78756 14.6357 6.75906 14.6357H19.6589C20.6304 14.6357 21.4179 15.3927 21.4179 16.3265V16.3265C21.4179 17.2603 20.6304 18.0173 19.6589 18.0173H6.75906C5.78756 18.0173 5 17.2603 5 16.3265V16.3265Z' fill='%23FF6100'/%3E%3Cpath d='M5 21.9625C5 21.0287 5.78756 20.2717 6.75906 20.2717H19.6589C20.6304 20.2717 21.4179 21.0287 21.4179 21.9625V21.9625C21.4179 22.8963 20.6304 23.6532 19.6589 23.6532H6.75906C5.78756 23.6532 5 22.8963 5 21.9625V21.9625Z' fill='%23FFB629'/%3E%3C/svg%3E%0A\");\n\n    &.isCard {\n      background-image: url(\"data:image/svg+xml,%3Csvg width='38' height='22' viewBox='0 0 38 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='3.5' width='20' height='15' rx='3.5' fill='white' stroke='%23B1C3E9'/%3E%3Crect x='17.5' y='3.5' width='20' height='15' rx='3.5' fill='white' stroke='%23B1C3E9'/%3E%3Crect x='3' y='10' width='13' height='3' rx='1.5' fill='%230099FF'/%3E%3Crect x='22' y='10' width='13' height='3' rx='1.5' fill='%23FFB629'/%3E%3Crect x='7.5' y='0.5' width='23' height='21' rx='3.5' fill='white' stroke='%23B1C3E9'/%3E%3Cpath d='M11.364 8.32266C11.364 7.44722 12.0737 6.73754 12.9491 6.73754H24.5733C25.4487 6.73754 26.1584 7.44722 26.1584 8.32266V8.32266C26.1584 9.19809 25.4487 9.90777 24.5733 9.90777H12.9491C12.0737 9.90777 11.364 9.19809 11.364 8.32266V8.32266Z' fill='%23FF6100'/%3E%3Cpath d='M11.364 13.6063C11.364 12.7309 12.0737 12.0212 12.9491 12.0212H24.5733C25.4487 12.0212 26.1584 12.7309 26.1584 13.6063V13.6063C26.1584 14.4818 25.4487 15.1915 24.5733 15.1915H12.9491C12.0737 15.1915 11.364 14.4818 11.364 13.6063V13.6063Z' fill='%23FF6100'/%3E%3C/svg%3E%0A\");\n    }\n\n    &.isSheet {\n      background-image: url(\"data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='31' height='31' rx='2.5' fill='white' stroke='%23DADEF3'/%3E%3Crect x='3.5' y='5.5' width='7' height='5' rx='1' fill='%230099FF'/%3E%3Crect x='3.5' y='12.5' width='7' height='7' rx='1' fill='%230099FF'/%3E%3Crect x='3.5' y='21.5' width='7' height='7' rx='1' fill='%230099FF'/%3E%3Crect x='12.5' y='5.5' width='7' height='5' rx='1' fill='%23FF6100'/%3E%3Crect x='12.5' y='12.5' width='7' height='7' rx='1' fill='%23FF6100'/%3E%3Crect x='12.5' y='21.5' width='7' height='7' rx='1' fill='%23FF6100'/%3E%3Crect x='21.5' y='5.5' width='7' height='5' rx='1' fill='%23FFB629'/%3E%3Crect x='21.5' y='12.5' width='7' height='7' rx='1' fill='%23FFB629'/%3E%3Crect x='21.5' y='21.5' width='7' height='7' rx='1' fill='%23FFB629'/%3E%3C/svg%3E%0A\");\n    }\n\n    &.isPaymentForm {\n     background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230A1551' d='M20.487 17.1c-1.013-.382-1.356-.611-1.356-.916 0-.352.322-.547.907-.547.369 0 .712.05 1.051.157a.765.765 0 0 0 .97-.543l.014-.042a.817.817 0 0 0-.585-.997 4.919 4.919 0 0 0-.988-.152v-.352a.71.71 0 0 0-1.416 0v.45c-1.259.283-2.03 1.127-2.03 2.229 0 1.378 1.195 1.954 2.234 2.306.852.288 1.182.547 1.182.924 0 .386-.381.62-1.025.62-.433 0-.874-.081-1.315-.238a.746.746 0 0 0-.975.517l-.025.093a.837.837 0 0 0 .555 1.005c.407.131.87.216 1.319.246v.432a.71.71 0 0 0 1.415 0v-.53c1.298-.263 2.129-1.161 2.129-2.314.017-1.132-.607-1.836-2.06-2.349Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6 1h12a3 3 0 0 1 3 3v8.303a2.568 2.568 0 0 0-3.545 1.199c-1.074.64-1.855 1.739-1.855 3.208 0 .761.219 1.404.556 1.927-.187.258-.326.55-.408.863l-.02.075-.004.014a2.67 2.67 0 0 0 1.84 3.229c.041.062.084.123.13.182H6a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3Z' clip-rule='evenodd'/%3E%3Cpath fill='%23C8CEED' fill-rule='evenodd' d='M6 1a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h11.693a2.574 2.574 0 0 1-.128-.182A2.646 2.646 0 0 1 16.289 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8.008c.36.03.698.133 1 .295V4a3 3 0 0 0-3-3H6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23FFB629' fill-rule='evenodd' d='M16.171 14.72H7.64a1.14 1.14 0 0 0 0 2.28h7.97a3.879 3.879 0 0 1-.01-.29c0-.77.213-1.437.571-1.99Z' clip-rule='evenodd'/%3E%3Cpath fill='%2309F' d='M6.5 8.14C6.5 7.51 7.01 7 7.64 7h8.72a1.14 1.14 0 0 1 0 2.28H7.64c-.63 0-1.14-.51-1.14-1.14Z'/%3E%3Cpath fill='%23FF6100' d='M6.5 12c0-.63.51-1.14 1.14-1.14h8.72a1.14 1.14 0 0 1 0 2.28H7.64c-.63 0-1.14-.51-1.14-1.14Z'/%3E%3C/svg%3E\");\n    }\n\n    &.isCard.isPaymentForm {\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' class='w-32 h-32'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4 16h1.17A3.001 3.001 0 0 0 8 18h7.332A3.946 3.946 0 0 1 15 16.387c0-1.69.928-2.952 2.215-3.662A2.71 2.71 0 0 1 22 12.219V10a2 2 0 0 0-2-2h-1.17A3.001 3.001 0 0 0 16 6H8a3.001 3.001 0 0 0-2.83 2H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2Z' clip-rule='evenodd'/%3E%3Cpath fill='%2309F' d='M4 12a.9.9 0 0 1 .9-.9H5v1.8h-.1A.9.9 0 0 1 4 12Z'/%3E%3Cpath fill='%23C8CEED' fill-rule='evenodd' d='M8 7h8a2 2 0 0 1 2 2v2.632a2.702 2.702 0 0 1 1-.53V9h1a1 1 0 0 1 1 1v1.312c.405.213.749.527 1 .907V10a2 2 0 0 0-2-2h-1.17A3.001 3.001 0 0 0 16 6H8a3.001 3.001 0 0 0-2.83 2H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1.17A3.001 3.001 0 0 0 8 18h7.332a3.846 3.846 0 0 1-.288-1H8a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2ZM4 9h1v6H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1Z' clip-rule='evenodd'/%3E%3Cpath fill='%23FF6100' fill-rule='evenodd' d='M7.5 10a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h7c.322 0 .61.153.792.39A4.01 4.01 0 0 0 15.23 15H8.5a1 1 0 0 1-1-1Z' clip-rule='evenodd'/%3E%3Cpath fill='%230A1551' d='M20.487 17.1c-1.013-.382-1.356-.611-1.356-.916 0-.352.322-.547.907-.547.369 0 .712.05 1.051.157a.765.765 0 0 0 .97-.543l.014-.042a.817.817 0 0 0-.585-.997 4.919 4.919 0 0 0-.988-.152v-.352a.71.71 0 0 0-1.416 0v.45c-1.259.283-2.03 1.127-2.03 2.229 0 1.378 1.195 1.954 2.234 2.306.852.288 1.182.547 1.182.924 0 .386-.381.62-1.025.62-.433 0-.874-.081-1.315-.238a.746.746 0 0 0-.975.517l-.025.093a.837.837 0 0 0 .555 1.005c.407.131.87.216 1.319.246v.432a.71.71 0 0 0 1.415 0v-.53c1.298-.263 2.129-1.161 2.129-2.314.017-1.132-.607-1.836-2.06-2.349Z'/%3E%3C/svg%3E\");\n    }\n  }\n}\n`;\nexport default FormItemWrapper;\n","import Styled, { css } from 'styled-components';\nexport const ScPortalOption = Styled.div`\n  transition: border 0.15s ease, box-shadow 0.15s ease, transform 10ms linear;\n  text-decoration: none;\n  border-radius: .25em;\n  padding: 9px;\n  line-height: ${(p)=>p.theme.lineHeight};\n  background: ${(p)=>p.theme.itemBg};\n  border: 1px solid ${(p)=>p.theme.itemBorder};\n  width: 100%;\n\n\n  ${({ isBranding21 })=>isBranding21 ? css`\n    [aria-selected=\"true\"] &, [aria-selected=\"true\"] &:focus, [aria-selected=\"true\"] &:hover {\n      border-color: #0099FF;\n      background-color: #EDF8FF;\n    }\n  ` : css`\n    [aria-selected=\"true\"] &, [aria-selected=\"true\"] &:focus {\n      border-color: #4573E3;\n      background-color: #DBE4FA;\n      box-shadow: 0 0 0 1px #4573E3 inset;\n    }\n  `};\n\n  &:hover {\n    cursor: pointer;\n    border-color: ${({ isBranding21 })=>isBranding21 ? '#C8CEED' : '#4573E3'};\n    background-color: ${({ isBranding21 })=>isBranding21 ? '#F3F3FE' : '#DBE4FA'};\n    ${({ isBranding21 })=>isBranding21 ? '' : css`box-shadow: 0 0 0 1px #4573E3 inset;`};\n    .itemActions {\n      display: block;\n    }\n  }\n\n  &:focus {\n    outline: 0;\n    border-color: ${(p)=>p.theme.itemBorder};\n    background-color: ${(p)=>p.theme.itemBgFocus};\n    box-shadow: 0 0 0 1px ${(p)=>p.theme.itemBorder} inset;\n  }\n\n\n  ${(p)=>p.isDisabled ? `\n    background-color: #FAFAFB;\n    border-color: #EBECF3;\n    box-shadow: unset;\n    cursor: default;\n    ` : ''}\n\n`;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useCallback } from 'react';\nimport { IconCartShoppingFilled } from '@jotforminc/svg-icons';\nimport Styled from 'styled-components';\nimport { shape } from 'prop-types';\nimport PortalItem from './PortalItem';\nimport { ScPortalOption } from './scPortalOption';\nimport { theme as defaultPortalOptionTheme } from '../../FormPicker/helpers/defaultTheme';\nimport { portalDescriptionCommonStyle, portalTitleCommonStyle } from './PortalItemDefaults/commonCss';\nconst StyledTitleContainerRenderer = Styled.div`\n  && {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n`;\nconst StyledTitleRenderer = Styled.h2`\n  && {\n  ${portalTitleCommonStyle}\n  font-weight: ${(p)=>p.titleFontWeight};\n  color: ${(p)=>p.titleColor};\n  font-size: 16px;\n  line-height: 20px;\n  }\n`;\nconst StyledDescriptionRenderer = Styled.p`\n  && {\n    ${portalDescriptionCommonStyle}\n    color: ${(p)=>p.detailsColor};\n    font-size: 14px;\n    line-height: 18px;\n  }\n`;\nconst PortalOption = ({ option, theme })=>{\n    const isBranding21 = true;\n    const { isDisabled = false } = option;\n    const TitleRenderer = useCallback(({ title, isStoreApp })=>{\n        const { titleFontWeight, titleFontSize, titleColor } = theme;\n        return /*#__PURE__*/ _jsxs(StyledTitleContainerRenderer, {\n            children: [\n                /*#__PURE__*/ _jsx(StyledTitleRenderer, {\n                    titleFontWeight: titleFontWeight,\n                    titleFontSize: titleFontSize,\n                    titleColor: titleColor,\n                    children: title\n                }),\n                isStoreApp && /*#__PURE__*/ _jsx(IconCartShoppingFilled, {})\n            ]\n        });\n    }, [\n        theme\n    ]);\n    const DescriptionRenderer = useCallback(({ children })=>{\n        const { detailsColor, detailsFontSize } = theme;\n        return /*#__PURE__*/ _jsx(StyledDescriptionRenderer, {\n            detailsColor: detailsColor,\n            detailsFontSize: detailsFontSize,\n            children: children\n        });\n    }, [\n        theme\n    ]);\n    return /*#__PURE__*/ _jsx(ScPortalOption, {\n        isBranding21: isBranding21,\n        theme: theme,\n        isDisabled: isDisabled,\n        children: /*#__PURE__*/ _jsx(PortalItem, _object_spread_props(_object_spread({}, option), {\n            TitleRenderer: TitleRenderer,\n            DescriptionRenderer: DescriptionRenderer\n        }))\n    });\n};\nPortalOption.propTypes = {\n    option: shape({}),\n    theme: shape({})\n};\nPortalOption.defaultProps = {\n    option: {},\n    theme: defaultPortalOptionTheme\n};\nexport default PortalOption;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport { bool, func, number } from 'prop-types';\nconst ScCh = Styled.div`\n  position: relative;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin-right: 8px;\n  border-radius: 4px;\n  border: 1px solid ${(p)=>p.theme.chBorder};\n  background-color: #fff;\n\n  &:after {\n    content: \"\";\n    display: block;\n    background: url(\"${(p)=>p.theme.chIcon}\") no-repeat center;\n  }\n\n  input[type=checkbox], &:after {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0; left: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  input[type=checkbox] { opacity: 0; }\n\n  [aria-selected=\"true\"] & {\n    border: 0;\n    background-color: ${(p)=>p.theme.chSelected};\n\n    &:after { transform: scale(1) rotate(0); }\n  }\n\n  [aria-selected=\"partial\"] & {\n    border: 0;\n    background-color: ${(p)=>p.theme.chSelected};\n\n    &:after { background: url(\"${(p)=>p.theme.chPartialIcon}\") no-repeat center; transform: scale(1) rotate(0); }\n  }\n`;\nexport const CheckBox = ({ isSelected, onChange, id })=>/*#__PURE__*/ _jsx(ScCh, {\n        className: \"itemCheckbox\",\n        children: /*#__PURE__*/ _jsx(\"input\", {\n            type: \"checkbox\",\n            id: id,\n            checked: isSelected,\n            tabIndex: \"-1\",\n            onChange: onChange\n        })\n    });\nCheckBox.propTypes = {\n    isSelected: bool,\n    id: number,\n    onChange: func\n};\nCheckBox.defaultProps = {\n    isSelected: false,\n    id: 5,\n    onChange: (e)=>e.preventDefault()\n};\n","/* eslint-disable max-len */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { bool, string, shape, number } from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport { IconGridDotsVertical } from '@jotforminc/svg-icons';\nimport { getShortMonthName } from '../../../../utils/utils';\nimport FormItemWrapper from '../../../FormPicker/FormItem/styled';\nimport { CheckBox } from '../../../FormPicker/CheckBox';\nconst ScIconWrapper = Styled.div`\n  position: relative;\n  margin-right: 18px;\n  z-index: 1;\n\n  html[dir=\"rtl\"] & {\n    margin-right: 0;\n    margin-left: .4em;\n  }\n`;\nconst ScSheetIcon = Styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  position: relative;\n  width: 25px;\n  height: 25px;\n  ${(p)=>p.isApp ? `\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 27 27'%3E%3Cpath fill='%230D953B' fill-rule='evenodd' d='M.00132017 23.2035C.00147173 24.6197.386264 24.9996 1.79633 24.9996 5.95863 25.0001 6.51815 25 8.2127 25c.88263-.0001 2.0732-.0001 4.2412-.0001H13v-1.7856h-2.9351c-.24973 0-.45221-.2025-.45221-.4522v-4.8702c0-.2497.20248-.4522.45221-.4522H13v-2.0524h-2.9351c-.24973 0-.45221-.2025-.45221-.4522v-4.8702c0-.24972.20248-.45219.45221-.45219h4.8702c.2497 0 .4522.20247.4522.45219V13h2.0524v-2.9351c0-.24972.2025-.45219.4522-.45219h4.8702c.2497 0 .4522.20247.4522.45219V13H25v-.504c0-2.1838-.0006-4.36759-.0018-10.71799-.0003-1.345989-.424-1.77520719-1.7646-1.77551016C16.8781.00083328 14.6893 0 12.5004 0 10.3116 0 8.12278.00083328 1.76729.00249984.407617.00280281.00132711.41581.00117711 1.76755.00042008 8.11796.00000194 10.3017 1e-8 12.4855c-.00000194 2.1838.00041234 4.3676.00132016 10.718Zm7.10673983.0108H2.23793c-.24976 0-.45224-.2025-.45224-.4522v-4.8702c0-.2497.20248-.4522.45224-.4522h4.87013c.24976 0 .45223.2025.45223.4522v4.8702c0 .2497-.20247.4522-.45223.4522Zm0-7.827H2.23793c-.24976 0-.45224-.2025-.45224-.4522v-4.8702c0-.24972.20248-.45219.45224-.45219h4.87013c.24976 0 .45223.20247.45223.45219v4.8702c0 .2497-.20247.4522-.45223.4522Zm7.82704-7.827h-4.8702c-.24973 0-.45221-.12228-.45221-.27312V4.34587c0-.15084.20248-.27312.45221-.27312h4.8702c.2497 0 .4522.12228.4522.27312v2.94131c0 .15084-.2025.27312-.4522.27312Zm7.8125 0h-4.8702c-.2497 0-.4522-.12228-.4522-.27312V4.34587c0-.15084.2025-.27312.4522-.27312h4.8702c.2497 0 .4522.12228.4522.27312v2.94131c0 .15084-.2025.27312-.4522.27312Zm-15.63954 0H2.23793c-.24976 0-.45224-.12228-.45224-.27312V4.34587c0-.15084.20248-.27312.45224-.27312h4.87013c.24976 0 .45223.12228.45223.27312v2.94131c0 .15084-.20247.27312-.45223.27312Z' clip-rule='evenodd'/%3E%3Cpath fill='%238D4ECC' fill-rule='evenodd' d='M16.5 15c-.8284 0-1.5.6716-1.5 1.5v9c0 .8284.6716 1.5 1.5 1.5h9c.8284 0 1.5-.6716 1.5-1.5v-9c0-.8284-.6716-1.5-1.5-1.5h-9Zm.3278 1.5c-.1808 0-.3273.1466-.3273.3273v3.2735c0 .1808.1465.3273.3273.3273h3.2734c.1808 0 .3274-.1465.3274-.3273v-3.2735c0-.1807-.1466-.3273-.3274-.3273h-3.2734Zm4.727.3273c0-.1807.1466-.3273.3273-.3273h3.2735c.1808 0 .3273.1466.3273.3273v3.2735c0 .1808-.1465.3273-.3273.3273h-3.2735c-.1807 0-.3273-.1465-.3273-.3273v-3.2735Zm1.9445 4.857c-.1821 0-.3298.1477-.3298.3299v1.0418h-1.0419c-.1821 0-.3299.1478-.3299.3299 0 .1821.1478.3299.3299.3299h1.0419v1.0418c0 .1822.1477.3299.3298.3299.1822 0 .3299-.1477.3299-.3299v-1.0418h1.0418c.1822 0 .3299-.1478.3299-.3299 0-.1821-.1477-.3299-.3299-.3299h-1.0418v-1.0418c0-.1822-.1477-.3299-.3299-.3299Zm-6.9984.1959c0-.1808.1465-.3274.3273-.3274h3.2734c.1808 0 .3274.1466.3274.3274v3.2734c0 .1808-.1466.3273-.3274.3273h-3.2734c-.1808 0-.3273-.1465-.3273-.3273v-3.2734Z' clip-rule='evenodd'/%3E%3C/svg%3E\");\n      ` : `\n        background-image: url(\"data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.796 25c-1.41 0-1.795-.38-1.795-1.797V1.768C.001.416.408.003 1.767.002 14.478 0 10.523 0 23.234.002c1.34 0 1.764.43 1.764 1.776.003 12.7.002 8.735 0 21.436 0 1.4-.397 1.785-1.811 1.786H1.796Zm20.966-1.786c.25 0 .452-.202.452-.452v-4.87a.452.452 0 0 0-.452-.452h-4.87a.452.452 0 0 0-.452.452v4.87c0 .25.202.452.452.452h4.87Zm-12.697 0h4.87c.25 0 .452-.202.452-.452v-4.87a.452.452 0 0 0-.452-.452h-4.87a.452.452 0 0 0-.452.452v4.87c0 .25.202.452.452.452Zm-7.827 0h4.87c.25 0 .452-.202.452-.452v-4.87a.452.452 0 0 0-.452-.452h-4.87a.452.452 0 0 0-.452.452v4.87c0 .25.202.452.452.452Zm15.654-7.827h4.87c.25 0 .452-.202.452-.452v-4.87a.452.452 0 0 0-.452-.452h-4.87a.452.452 0 0 0-.452.452v4.87c0 .25.202.452.452.452Zm-7.827 0h4.87c.25 0 .452-.202.452-.452v-4.87a.452.452 0 0 0-.452-.452h-4.87a.452.452 0 0 0-.452.452v4.87c0 .25.202.452.452.452Zm-7.827 0h4.87c.25 0 .452-.202.452-.452v-4.87a.452.452 0 0 0-.452-.452h-4.87a.452.452 0 0 0-.452.452v4.87c0 .25.202.452.452.452Zm7.827-7.827h4.87c.25 0 .452-.122.452-.273V4.346c0-.151-.202-.273-.452-.273h-4.87c-.25 0-.452.122-.452.273v2.941c0 .151.202.273.452.273Zm7.812 0h4.87c.25 0 .453-.122.453-.273V4.346c0-.151-.203-.273-.452-.273h-4.87c-.25 0-.453.122-.453.273v2.941c0 .151.203.273.452.273Zm-15.64 0h4.871c.25 0 .452-.122.452-.273V4.346c0-.151-.202-.273-.452-.273h-4.87c-.25 0-.452.122-.452.273v2.941c0 .151.202.273.452.273Z' fill='%230D953B'/%3E%3C/svg%3E\");\n      `}\n\n  ${(p)=>p['data-count'] > 0 ? `&:before {\n          content: attr(data-count);\n          background: #D93434;\n          color: #fff;\n          border-radius: 16px;\n          position: absolute;\n          top: 0;\n          right: 0;\n          font-weight: 700;\n          transform: translate(50%, -50%);\n          font-size: 12px;\n          padding: 1.5px 3.675px;\n          line-height: 1;\n        }\n      ` : ''}\n`;\nconst SheetItem = ({ option: { count, form_id: formId, name, unread, status, created_at: createdAt, updated_at: updatedAt, resourceType }, isSelected, isMultiSelect, submissionsKeyword, showFormId, isDraggable })=>{\n    const lastEditDate = (updatedAt ? updatedAt.split(' ')[0] : createdAt.split(' ')[0]).split('-');\n    const updatedAtReadable = `${getShortMonthName(parseInt(lastEditDate[1], 10))} ${lastEditDate[2]}, ${lastEditDate[0]}`;\n    return /*#__PURE__*/ _jsxs(FormItemWrapper, {\n        tabIndex: \"0\",\n        children: [\n            isMultiSelect && /*#__PURE__*/ _jsx(CheckBox, {\n                isSelected: isSelected\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemInfo\",\n                children: /*#__PURE__*/ _jsx(ScIconWrapper, {\n                    className: \"lsApp-list-item-type\",\n                    \"data-sc\": \"formTypeIcon\",\n                    children: /*#__PURE__*/ _jsx(ScSheetIcon, {\n                        \"data-count\": unread,\n                        isApp: !!(resourceType === 'APP')\n                    })\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"itemContent\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"h2\", {\n                        className: \"itemTitle\",\n                        children: name\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"itemDesc\",\n                        children: `${showFormId ? `${formId}. ` : ''}${count} ${submissionsKeyword}. ${t('Modified on')} ${updatedAtReadable}.`\n                    })\n                ]\n            }),\n            isDraggable && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDragHandle\",\n                children: /*#__PURE__*/ _jsx(IconGridDotsVertical, {})\n            }),\n            status !== 'ENABLED' && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDisabled\",\n                \"aria-hidden\": true,\n                children: t('This table is disabled.')\n            })\n        ]\n    });\n};\nconst sheetItemProperties = shape({\n    count: number,\n    form_id: string,\n    name: string,\n    unread: number,\n    status: string,\n    created_at: string,\n    updated_at: string,\n    resourceType: string\n});\nSheetItem.propTypes = {\n    option: sheetItemProperties.isRequired,\n    isMultiSelect: bool,\n    isSelected: bool.isRequired,\n    submissionsKeyword: string,\n    showFormId: bool,\n    isDraggable: bool\n};\nSheetItem.defaultProps = {\n    isMultiSelect: true,\n    submissionsKeyword: 'Submissions',\n    showFormId: false,\n    isDraggable: false\n};\nexport default SheetItem;\n","/* eslint-disable max-len */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { bool, string, shape, number } from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport { IconGridDotsVertical } from '@jotforminc/svg-icons';\nimport { getShortMonthName } from '../../../../utils/utils';\nimport FormItemWrapper from '../../../FormPicker/FormItem/styled';\nimport { CheckBox } from '../../../FormPicker/CheckBox';\nconst ScIconWrapper = Styled.div`\n  position: relative;\n  margin-right: 18px;\n  z-index: 1;\n\n  html[dir=\"rtl\"] & {\n    margin-right: 0;\n    margin-left: .4em;\n  }\n`;\nconst ScReportIcon = Styled.div`\n  width: 26px;\n  height: 32px;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-image : url(\"data:image/svg+xml,${(p)=>{\n    switch(p.type){\n        case 'excel':\n            return \"%0A%3Csvg width='19px' height='18px' viewBox='0 0 19 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Different-Types-of-Reports-Copy-2' transform='translate(-366.000000, -291.000000)' fill-rule='nonzero'%3E%3Cg id='excel-copy' transform='translate(366.000000, 291.000000)'%3E%3Cpath d='M18.40625,15.4750176 L10.09375,15.4750176 C9.766,15.4750176 9.5,15.2090176 9.5,14.8812676 C9.5,14.5535176 9.5,3.33401758 9.5,3.00626758 C9.5,2.67851758 9.766,2.41251758 10.09375,2.41251758 L18.40625,2.41251758 C18.734,2.41251758 19,2.67851758 19,3.00626758 L19,14.8812676 C19,15.2090176 18.734,15.4750176 18.40625,15.4750176 Z' id='Path' fill='%23ECEFF1'%3E%3C/path%3E%3Cg id='Group' transform='translate(9.500000, 4.787109)' fill='%23159C66'%3E%3Cpath d='M2.96875,1.1879082 L0.59375,1.1879082 C0.266,1.1879082 0,0.921908203 0,0.594158203 C0,0.266408203 0.266,0.000408203125 0.59375,0.000408203125 L2.96875,0.000408203125 C3.2965,0.000408203125 3.5625,0.266408203 3.5625,0.594158203 C3.5625,0.921908203 3.2965,1.1879082 2.96875,1.1879082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M2.96875,3.5629082 L0.59375,3.5629082 C0.266,3.5629082 0,3.2969082 0,2.9691582 C0,2.6414082 0.266,2.3754082 0.59375,2.3754082 L2.96875,2.3754082 C3.2965,2.3754082 3.5625,2.6414082 3.5625,2.9691582 C3.5625,3.2969082 3.2965,3.5629082 2.96875,3.5629082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M2.96875,5.9379082 L0.59375,5.9379082 C0.266,5.9379082 0,5.6719082 0,5.3441582 C0,5.0164082 0.266,4.7504082 0.59375,4.7504082 L2.96875,4.7504082 C3.2965,4.7504082 3.5625,5.0164082 3.5625,5.3441582 C3.5625,5.6719082 3.2965,5.9379082 2.96875,5.9379082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M2.96875,8.3129082 L0.59375,8.3129082 C0.266,8.3129082 0,8.0469082 0,7.7191582 C0,7.3914082 0.266,7.1254082 0.59375,7.1254082 L2.96875,7.1254082 C3.2965,7.1254082 3.5625,7.3914082 3.5625,7.7191582 C3.5625,8.0469082 3.2965,8.3129082 2.96875,8.3129082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M6.53125,1.1879082 L5.34375,1.1879082 C5.016,1.1879082 4.75,0.921908203 4.75,0.594158203 C4.75,0.266408203 5.016,0.000408203125 5.34375,0.000408203125 L6.53125,0.000408203125 C6.859,0.000408203125 7.125,0.266408203 7.125,0.594158203 C7.125,0.921908203 6.859,1.1879082 6.53125,1.1879082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M6.53125,3.5629082 L5.34375,3.5629082 C5.016,3.5629082 4.75,3.2969082 4.75,2.9691582 C4.75,2.6414082 5.016,2.3754082 5.34375,2.3754082 L6.53125,2.3754082 C6.859,2.3754082 7.125,2.6414082 7.125,2.9691582 C7.125,3.2969082 6.859,3.5629082 6.53125,3.5629082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M6.53125,5.9379082 L5.34375,5.9379082 C5.016,5.9379082 4.75,5.6719082 4.75,5.3441582 C4.75,5.0164082 5.016,4.7504082 5.34375,4.7504082 L6.53125,4.7504082 C6.859,4.7504082 7.125,5.0164082 7.125,5.3441582 C7.125,5.6719082 6.859,5.9379082 6.53125,5.9379082 Z' id='Path'%3E%3C/path%3E%3Cpath d='M6.53125,8.3129082 L5.34375,8.3129082 C5.016,8.3129082 4.75,8.0469082 4.75,7.7191582 C4.75,7.3914082 5.016,7.1254082 5.34375,7.1254082 L6.53125,7.1254082 C6.859,7.1254082 7.125,7.3914082 7.125,7.7191582 C7.125,8.0469082 6.859,8.3129082 6.53125,8.3129082 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3Cpath d='M10.4725625,0.174080078 C10.3371875,0.0612675781 10.1555,0.0125800781 9.9845,0.0482050781 L0.4845,1.82945508 C0.2030625,1.88170508 0,2.12633008 0,2.41251758 L0,15.4750176 C0,15.7600176 0.2030625,16.0058301 0.4845,16.0580801 L9.9845,17.8393301 C10.020125,17.8464551 10.0569375,17.8500176 10.09375,17.8500176 C10.2315,17.8500176 10.3656875,17.8025176 10.4725625,17.7134551 C10.609125,17.6006426 10.6875,17.4320176 10.6875,17.2562676 L10.6875,0.631267578 C10.6875,0.454330078 10.609125,0.286892578 10.4725625,0.174080078 Z' id='Path' fill='%2321A872'%3E%3C/path%3E%3Cpath d='M8.16525,10.9280801 L6.2878125,8.78226758 L8.186625,6.34076758 C8.3885,6.08189258 8.341,5.70901758 8.0833125,5.50714258 C7.825625,5.30526758 7.45275,5.35276758 7.2496875,5.61045508 L5.491,7.87145508 L4.009,6.17808008 C3.7916875,5.92870508 3.4164375,5.90614258 3.1718125,6.12226758 C2.9248125,6.33839258 2.899875,6.71364258 3.116,6.95945508 L4.7488125,8.82620508 L3.0934375,10.9542051 C2.8915625,11.2130801 2.9390625,11.5859551 3.19675,11.7878301 C3.306,11.8721426 3.4354375,11.9125176 3.5625,11.9125176 C3.7394375,11.9125176 3.914,11.8341426 4.0315625,11.6833301 L5.545625,9.73583008 L7.27225,11.7082676 C7.3898125,11.8436426 7.5536875,11.9125176 7.71875,11.9125176 C7.8576875,11.9125176 7.996625,11.8638301 8.1094375,11.7652676 C8.3564375,11.5491426 8.381375,11.1738926 8.16525,10.9280801 Z' id='Path' fill='%23FAFAFA'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\";\n        case 'csv':\n            return \"%3Csvg width='19' height='16' viewBox='0 0 19 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23ECEFF1' width='19' height='16' rx='1'/%3E%3Cpath d='M18 0H1a1 1 0 00-1 1v7.55h19V1a1 1 0 00-1-1z' fill='%23159C66' fill-rule='nonzero'/%3E%3Cpath d='M5.523 6.75c1.324 0 2.002-.878 2.182-1.603l-.858-.26c-.127.44-.519.965-1.324.965-.758 0-1.463-.552-1.463-1.556 0-1.07.745-1.576 1.45-1.576.818 0 1.184.499 1.297.95l.864-.272c-.186-.765-.858-1.563-2.161-1.563-1.263 0-2.4.958-2.4 2.46C3.11 5.8 4.206 6.75 5.522 6.75zm4.482 0c1.098 0 1.703-.732 1.703-1.457 0-.665-.459-1.223-1.317-1.39l-.658-.126c-.346-.066-.512-.272-.512-.532 0-.312.292-.598.738-.598.598 0 .811.405.858.665l.824-.253c-.106-.532-.545-1.224-1.689-1.224-.89 0-1.642.639-1.642 1.477 0 .711.485 1.197 1.237 1.35l.658.133c.366.073.572.286.572.558 0 .333-.273.579-.765.579-.665 0-.99-.42-1.03-.885l-.852.226c.073.672.625 1.477 1.875 1.477zm4.695-.1l1.75-4.715h-.972l-1.23 3.505-1.23-3.505h-1.004l1.742 4.715h.944z' fill='%23FFF' fill-rule='nonzero'/%3E%3Crect fill='%23CCD0DA' x='6.65' y='11.4' width='5.7' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='6.65' y='9.5' width='5.7' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='6.65' y='13.3' width='5.7' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='.95' y='11.4' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='.95' y='9.5' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='.95' y='13.3' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='13.3' y='11.4' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='13.3' y='9.5' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='13.3' y='13.3' width='4.75' height='1' rx='.4'/%3E%3C/g%3E%3C/svg%3E\";\n        case 'rss':\n            return \"%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Different-Types-of-Reports-Copy-3' transform='translate(-367.000000, -379.000000)'%3E%3Cg id='Group-8' transform='translate(314.000000, 369.000000)'%3E%3Cg id='rss' transform='translate(53.000000, 10.000000)'%3E%3Crect id='Rectangle' fill='%23EC7838' x='0' y='0' width='17' height='17' rx='1.5'%3E%3C/rect%3E%3Cg id='Group' transform='translate(1.671875, 2.000000)' fill='%23E6EEFF' fill-rule='nonzero'%3E%3Cpath d='M3.72864636,11.1546699 C3.72864636,10.6405195 3.52123437,10.1760586 3.1852832,9.84007031 C2.84933203,9.50411914 2.38483398,9.29670715 1.87068359,9.29670715 C0.845277344,9.2937832 0.009796875,10.1293008 0.0127577377,11.1546328 C0.0127577377,11.6687832 0.220207031,12.133207 0.556158203,12.4691582 C0.892109375,12.8051094 1.35657031,13.012522 1.87068359,13.012522 C2.89605273,13.0155566 3.73157031,12.1800391 3.72864636,11.1546699 Z' id='Path'%3E%3C/path%3E%3Cpath d='M11.7855293,12.3933066 C11.1019375,12.3933066 10.5469297,11.8382617 10.5468926,11.1546699 C10.5498242,8.7621543 9.57414453,6.59455859 8.00245117,5.02290234 C6.43075781,3.45124609 4.26319922,2.4755293 1.87068359,2.47846094 C1.18712891,2.47846094 0.632046875,1.92341602 0.632046875,1.23982422 C0.632046875,0.556269531 1.1870918,0.00122460937 1.87064648,0.00122460937 C4.94679102,0.00415625 7.73659961,1.25151367 9.75516406,3.27011523 C11.7737285,5.2887168 13.021123,8.0785625 13.0240547,11.1546328 C13.0240547,11.8382617 12.4691211,12.3933066 11.7855293,12.3933066 Z' id='Path'%3E%3C/path%3E%3Cpath d='M6.828125,12.3962383 C6.14457031,12.3962383 5.58659375,11.8382988 5.58659375,11.154707 C5.58659375,10.1322324 5.17178516,9.20327344 4.49695117,8.52847656 C3.82508594,7.85661133 2.89608984,7.44176563 1.8707207,7.43883398 C1.18712891,7.43883398 0.629189453,6.88085742 0.629189453,6.19730273 C0.629189453,5.51374805 1.18712891,4.95577148 1.8707207,4.95577148 C3.57968164,4.95870313 5.12792188,5.65394727 6.24970117,6.77572656 C7.37148047,7.89750586 8.06672461,9.4457832 8.06965625,11.154707 C8.06965625,11.8382988 7.51167969,12.3962383 6.828125,12.3962383 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\";\n        case 'table':\n            return \"%3Csvg width='19' height='16' viewBox='0 0 19 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23ECEFF1' width='19' height='16' rx='1'/%3E%3Cpath d='M18 0H1a1 1 0 00-1 1v4h19V1a1 1 0 00-1-1z' fill='%23504B66' fill-rule='nonzero'/%3E%3Ccircle fill='%23F75B5B' fill-rule='nonzero' cx='2.5' cy='2.5' r='1.5'/%3E%3Ccircle fill='%23F2C273' fill-rule='nonzero' cx='6.5' cy='2.5' r='1.5'/%3E%3Ccircle fill='%2371D18F' fill-rule='nonzero' cx='10.5' cy='2.5' r='1.5'/%3E%3Crect fill='%23CCD0DA' x='6' y='7' width='12' height='2' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='6' y='10' width='12' height='2' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='6' y='13' width='12' height='2' rx='.4'/%3E%3Crect fill='%2397A0AF' x='1' y='7' width='5' height='2' rx='.4'/%3E%3Crect fill='%2397A0AF' x='1' y='10' width='5' height='2' rx='.4'/%3E%3Crect fill='%2397A0AF' x='1' y='13' width='5' height='2' rx='.4'/%3E%3C/g%3E%3C/svg%3E\";\n        case 'grid':\n            return \"%3Csvg width='19' height='16' viewBox='0 0 19 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23ECEFF1' width='19' height='16' rx='1'/%3E%3Cpath d='M18 0H1a1 1 0 00-1 1v7.55h19V1a1 1 0 00-1-1z' fill='%2334C7EC' fill-rule='nonzero'/%3E%3Cpath d='M3.538 7.3c.768 0 1.27-.345 1.5-.69l.064.582h.803V4.546H3.366v.86h1.607c-.058.359-.423.99-1.363.99-.853 0-1.606-.595-1.606-1.743 0-1.205.832-1.728 1.599-1.728.825 0 1.248.523 1.377.975l.946-.337C5.676 2.782 4.936 2 3.603 2 2.226 2 1 3.011 1 4.653 1 6.295 2.169 7.3 3.538 7.3zm4.36-.108V5.234h.517l.996 1.958h1.105l-1.09-2.08c.667-.193 1.082-.731 1.082-1.441 0-.882-.63-1.563-1.62-1.563H6.902v5.084h.996zm.803-2.811h-.803V2.968h.803c.502 0 .796.28.796.71 0 .416-.294.703-.796.703zm3.686 2.81V2.109h-1.004v5.084h1.004zm2.976 0c1.449 0 2.517-.932 2.517-2.538 0-1.606-1.061-2.545-2.51-2.545H13.55v5.084h1.814zm-.036-.917h-.789V3.025h.796c.832 0 1.52.524 1.52 1.628 0 1.104-.695 1.62-1.527 1.62z' fill='%23FFF' fill-rule='nonzero'/%3E%3Crect fill='%23CCD0DA' x='6.65' y='11.4' width='11.5' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='6.65' y='9.5' width='11.5' height='1' rx='.4'/%3E%3Crect fill='%23CCD0DA' x='6.65' y='13.3' width='11.5' height='1' rx='.4'/%3E%3Crect fill='%239ADDEE' x='.95' y='11.4' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%239ADDEE' x='.95' y='9.5' width='4.75' height='1' rx='.4'/%3E%3Crect fill='%239ADDEE' x='.95' y='13.3' width='4.75' height='1' rx='.4'/%3E%3C/g%3E%3C/svg%3E\";\n        case 'calendar':\n        case 'cal':\n            return \"%3Csvg width='19px' height='16px' viewBox='0 0 19 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23ECEFF1' width='19' height='16' rx='1'/%3E%3Crect fill='%239ADDEE' x='0.5' y='4.5' width='3' height='2' rx='0.4'/%3E%3Crect fill='%23A4D9A8' x='10.5' y='8.5' width='3' height='2' rx='0.4'/%3E%3Crect fill='%23FFEA9C' x='5.5' y='12.5' width='3' height='2' rx='0.4'/%3E%3Cpath stroke='%23CCD0DA' stroke-width='0.5' stroke-linecap='square' d='M4.5.5v15M9.5.5v15M14.5.5v15'/%3E%3Cpath d='M18 0H1a1 1 0 00-1 1v3h19V1a1 1 0 00-1-1z' fill='%23FBAB31' fill-rule='nonzero'/%3E%3Cpath stroke='%23CCD0DA' stroke-width='0.5' stroke-linecap='square' d='M.5 7.5h18M.5 11.5h18'/%3E%3C/g%3E%3C/svg%3E\";\n        case 'visual':\n        case 'reports':\n        default:\n            return \"%3Csvg width='26' height='32' viewBox='0 0 26 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 3.125C.5 1.685 1.695.5 3.192.5h19.616C24.305.5 25.5 1.685 25.5 3.125v25.75c0 1.44-1.195 2.625-2.692 2.625H3.192C1.695 31.5.5 30.315.5 28.875V3.125Z' fill='%23fff' stroke='%23B1C3E9'/%3E%3Cpath d='M5 8.125C5 7.504 5.448 7 6 7h2c.552 0 1 .504 1 1.125V25H5V8.125Z' fill='%2309F'/%3E%3Cpath d='M11 13.13c0-.624.448-1.13 1-1.13h2c.552 0 1 .506 1 1.13V25h-4V13.13Z' fill='%23FF6100'/%3E%3Cpath d='M17 9.097C17 8.49 17.448 8 18 8h2c.552 0 1 .491 1 1.097V25h-4V9.097Z' fill='%23FFB629'/%3E%3C/svg%3E\";\n    }\n}}\");`;\nconst ReportsItem = ({ option: { form_count: formCount, form_id: formId, title, status, created_at: createdAt, updated_at: updatedAt, list_type: listType }, isSelected, isMultiSelect, submissionsKeyword, showFormId, isDraggable })=>{\n    const lastEditDate = (updatedAt ? updatedAt.split(' ')[0] : createdAt.split(' ')[0]).split('-');\n    const updatedAtReadable = `${getShortMonthName(parseInt(lastEditDate[1], 10))} ${lastEditDate[2]}, ${lastEditDate[0]}`;\n    return /*#__PURE__*/ _jsxs(FormItemWrapper, {\n        tabIndex: \"0\",\n        children: [\n            isMultiSelect && /*#__PURE__*/ _jsx(CheckBox, {\n                isSelected: isSelected\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemInfo\",\n                children: /*#__PURE__*/ _jsx(ScIconWrapper, {\n                    className: \"lsApp-list-item-type\",\n                    children: /*#__PURE__*/ _jsx(ScReportIcon, {\n                        type: listType\n                    })\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"itemContent\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"h2\", {\n                        className: \"itemTitle\",\n                        children: title\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"itemDesc\",\n                        children: `${showFormId ? `${formId}. ` : ''}${formCount} ${submissionsKeyword}. ${t('Modified on')} ${updatedAtReadable}.`\n                    })\n                ]\n            }),\n            isDraggable && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDragHandle\",\n                children: /*#__PURE__*/ _jsx(IconGridDotsVertical, {})\n            }),\n            status !== 'ENABLED' && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDisabled\",\n                \"aria-hidden\": true,\n                children: t('This report is disabled.')\n            })\n        ]\n    });\n};\nconst reportsItemProperties = shape({\n    form_count: number,\n    form_id: string,\n    title: string,\n    status: string,\n    created_at: string,\n    updated_at: string,\n    list_type: string\n});\nReportsItem.propTypes = {\n    option: reportsItemProperties.isRequired,\n    isMultiSelect: bool,\n    isSelected: bool.isRequired,\n    submissionsKeyword: string,\n    showFormId: bool,\n    isDraggable: bool\n};\nReportsItem.defaultProps = {\n    isMultiSelect: true,\n    submissionsKeyword: 'Form',\n    showFormId: false,\n    isDraggable: false\n};\nexport default ReportsItem;\n","/* eslint-disable max-len */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { bool, string, shape } from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport { IconGridDotsVertical, IconProductApprovalsColor } from '@jotforminc/svg-icons';\nimport { getShortMonthName } from '../../../../utils/utils';\nimport FormItemWrapper from '../../../FormPicker/FormItem/styled';\nimport { CheckBox } from '../../../FormPicker/CheckBox';\nconst ScIconWrapper = Styled.div`\n  position: relative;\n  margin-right: 12px;\n  z-index: 1;\n\n  html[dir=\"rtl\"] & {\n    margin-right: 0;\n    margin-left: .2em;\n  }\n\n  svg {\n    width: 36px;\n    height: 36px;\n  }\n`;\nconst ApprovalItem = ({ option: { form_id: formId, title, status, last_activity: lastActivity, created_at: createdAt }, isSelected, isMultiSelect, showFormId, isDraggable })=>{\n    const lastActivityDate = (lastActivity ? lastActivity.split(' ')[0] : createdAt.split(' ')[0]).split('-');\n    const lastActivityReadable = `${getShortMonthName(parseInt(lastActivityDate[1], 10))} ${lastActivityDate[2]}, ${lastActivityDate[0]}`;\n    return /*#__PURE__*/ _jsxs(FormItemWrapper, {\n        tabIndex: \"0\",\n        children: [\n            isMultiSelect && /*#__PURE__*/ _jsx(CheckBox, {\n                isSelected: isSelected\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemInfo\",\n                children: /*#__PURE__*/ _jsx(ScIconWrapper, {\n                    className: \"lsApp-list-item-type\",\n                    children: /*#__PURE__*/ _jsx(IconProductApprovalsColor, {})\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"itemContent\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"h2\", {\n                        className: \"itemTitle\",\n                        children: title\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"itemDesc\",\n                        children: `${showFormId ? `${formId}. ` : ''} ${t('Last activity on')} ${lastActivityReadable}.`\n                    })\n                ]\n            }),\n            isDraggable && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDragHandle\",\n                children: /*#__PURE__*/ _jsx(IconGridDotsVertical, {})\n            }),\n            status !== 'ENABLED' && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDisabled\",\n                \"aria-hidden\": true,\n                children: t('This approval is disabled.')\n            })\n        ]\n    });\n};\nconst approvalItemProperties = shape({\n    form_id: string,\n    title: string,\n    status: string,\n    last_activity: string,\n    created_at: string\n});\nApprovalItem.propTypes = {\n    option: approvalItemProperties.isRequired,\n    isMultiSelect: bool,\n    isSelected: bool.isRequired,\n    showFormId: bool,\n    isDraggable: bool\n};\nApprovalItem.defaultProps = {\n    isMultiSelect: true,\n    showFormId: false,\n    isDraggable: false\n};\nexport default ApprovalItem;\n","import Styled from 'styled-components';\nexport const ScIconWrapper = Styled.div`\n  position: relative;\n  margin-left: 4px;\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n\n  html[dir=\"rtl\"] & {\n    margin-right: 0;\n    margin-left: .2em;\n  }\n\n  svg {\n    width: 36px;\n    height: 36px;\n  }\n`;\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { bool, string, shape, number } from 'prop-types';\nimport { translationRenderer } from '@jotforminc/translation';\nimport { IconProductSignColorBorder } from '@jotforminc/svg-icons';\nimport Styled from 'styled-components';\nimport { getShortMonthName } from '../../../../utils/utils';\nimport FormItemWrapper from '../../../FormPicker/FormItem/styled';\nimport { CheckBox } from '../../../FormPicker/CheckBox';\nimport { ScIconWrapper } from './styles';\nconst ScSignItemWrapper = Styled(FormItemWrapper)`\n  .itemDesc {\n    position: relative;\n  }\n\n  &.isDisabled {\n    &:hover {\n      .errorText {\n        display: block;\n      }\n    }\n  }\n\n  .errorText {\n    display: none;\n    position: absolute;\n    left: 93px;\n    bottom: 4px;\n    font-size: 13px;\n    line-height: normal;\n    padding: 8px;\n    text-transform: lowercase;\n    border-radius: 4px;\n    color: #fff;\n    font-weight: 400;\n    background-color: #0A1551;\n    font-family: \"Circular\";\n\n    &:first-letter { text-transform: uppercase; }\n\n    .link {\n      color: #0099FF;\n      cursor: pointer;\n    }\n  }\n`;\nconst DescriptionText = ({ totalCount, updatedAtReadable })=>{\n    // eslint-disable-next-line no-nested-ternary\n    const firstPart = totalCount > 0 ? totalCount > 1 ? translationRenderer('[1[{totalCount}]] Sign Documents')({\n        renderer1: ()=>totalCount\n    }) : translationRenderer('[1[{oneCount}]] Sign Document')({\n        renderer1: ()=>1\n    }) : '';\n    const secondPart = translationRenderer('Updated on [1[{updatedAtReadable}]]')({\n        renderer1: ()=>updatedAtReadable\n    });\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            firstPart,\n            totalCount > 0 ? '. ' : '',\n            secondPart\n        ]\n    });\n};\nDescriptionText.propTypes = {\n    totalCount: number.isRequired,\n    updatedAtReadable: string.isRequired\n};\nconst SignItem = ({ option, isSelected, isMultiSelect })=>{\n    const { totalCount, title, creationTime: createdAt, modificationTime: updatedAt, errorText, disabled } = option;\n    const lastEditDate = (updatedAt ? updatedAt.split(' ')[0] : createdAt.split(' ')[0]).split('-');\n    const updatedAtReadable = `${lastEditDate[2]} ${getShortMonthName(parseInt(lastEditDate[1], 10))} ${lastEditDate[0]}`;\n    const className = disabled ? 'isDisabled' : '';\n    return /*#__PURE__*/ _jsxs(ScSignItemWrapper, {\n        tabIndex: \"0\",\n        className: className,\n        children: [\n            isMultiSelect && /*#__PURE__*/ _jsx(CheckBox, {\n                isSelected: isSelected\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemInfo\",\n                children: /*#__PURE__*/ _jsx(ScIconWrapper, {\n                    className: \"lsApp-list-item-type\",\n                    children: /*#__PURE__*/ _jsx(IconProductSignColorBorder, {})\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"itemContent\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"h2\", {\n                        className: \"itemTitle\",\n                        children: title\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"itemDesc\",\n                        children: /*#__PURE__*/ _jsx(DescriptionText, {\n                            totalCount: totalCount - 1,\n                            updatedAtReadable: updatedAtReadable\n                        })\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"errorText\",\n                children: errorText\n            })\n        ]\n    });\n};\nconst reportsItemProperties = shape({\n    form_count: number,\n    form_id: string,\n    title: string,\n    status: string,\n    created_at: string,\n    updated_at: string,\n    list_type: string\n});\nSignItem.propTypes = {\n    option: reportsItemProperties.isRequired,\n    isMultiSelect: bool,\n    isSelected: bool.isRequired,\n    disabled: bool,\n    errorText: string\n};\nSignItem.defaultProps = {\n    isMultiSelect: true,\n    disabled: false,\n    errorText: ''\n};\nexport default SignItem;\n","/* eslint-disable max-len */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { bool, string, shape, number } from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport { IconGridDotsVertical } from '@jotforminc/svg-icons';\nimport { getShortMonthName } from '../../../../utils/utils';\nimport FormItemWrapper from '../../../FormPicker/FormItem/styled';\nimport { CheckBox } from '../../../FormPicker/CheckBox';\nconst ScIconWrapper = Styled.div`\n  position: relative;\n  margin-right: 18px;\n  z-index: 1;\n\n  html[dir=\"rtl\"] & {\n    margin-right: 0;\n    margin-left: .4em;\n  }\n`;\nconst ScBoardIcon = Styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  position: relative;\n  width: 32px;\n  height: 32px;\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32px' height='32px' viewBox='0 0 32 32' version='1.1'%3e%3cg id='surface1'%3e%3cpath style='fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(89.019608%25,89.803922%25,96.078431%25);stroke-opacity:1;stroke-miterlimit:4;' d='M 4.75 2.002075 L 27.25 2.002075 C 29.046875 2.002075 30.5 3.456298 30.5 5.2489 L 30.5 27.75109 C 30.5 29.543692 29.046875 30.997915 27.25 30.997915 L 4.75 30.997915 C 2.953125 30.997915 1.5 29.543692 1.5 27.75109 L 1.5 5.2489 C 1.5 3.456298 2.953125 2.002075 4.75 2.002075 Z M 4.75 2.002075 ' transform='matrix(1,0,0,0.969697,0,0)'/%3e%3cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,71.372549%25,16.078431%25);fill-opacity:1;' d='M 17.125 13.273438 C 17.125 12.96875 17.375 12.726562 17.691406 12.726562 L 24.441406 12.726562 C 24.75 12.726562 25 12.96875 25 13.273438 L 25 23.636719 C 25 24.238281 24.496094 24.726562 23.875 24.726562 L 18.25 24.726562 C 17.628906 24.726562 17.125 24.238281 17.125 23.636719 Z M 17.125 13.273438 '/%3e%3cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,71.372549%25,16.078431%25);fill-opacity:1;' d='M 7 13.273438 C 7 12.96875 7.25 12.726562 7.558594 12.726562 L 14.316406 12.726562 C 14.625 12.726562 14.875 12.96875 14.875 13.273438 L 14.875 19.273438 C 14.875 19.875 14.371094 20.363281 13.75 20.363281 L 8.125 20.363281 C 7.503906 20.363281 7 19.875 7 19.273438 Z M 7 13.273438 '/%3e%3cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,38.039216%25,0%25);fill-opacity:1;' d='M 7 8.363281 C 7 7.761719 7.503906 7.273438 8.125 7.273438 L 13.75 7.273438 C 14.371094 7.273438 14.875 7.761719 14.875 8.363281 L 14.875 10 C 14.875 10.300781 14.625 10.546875 14.316406 10.546875 L 7.558594 10.546875 C 7.25 10.546875 7 10.300781 7 10 Z M 7 8.363281 '/%3e%3cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,60%25,100%25);fill-opacity:1;' d='M 17.125 8.363281 C 17.125 7.761719 17.628906 7.273438 18.25 7.273438 L 23.875 7.273438 C 24.496094 7.273438 25 7.761719 25 8.363281 L 25 10 C 25 10.300781 24.75 10.546875 24.441406 10.546875 L 17.691406 10.546875 C 17.375 10.546875 17.125 10.300781 17.125 10 Z M 17.125 8.363281 '/%3e%3c/g%3e%3c/svg%3e\");\n  ${(p)=>p['data-count'] > 0 ? `&:before {\n          content: attr(data-count);\n          background: #D93434;\n          color: #fff;\n          border-radius: 16px;\n          position: absolute;\n          top: 0;\n          right: 0;\n          font-weight: 700;\n          transform: translate(50%, -50%);\n          font-size: 12px;\n          padding: 1.5px 3.675px;\n          line-height: 1;\n        }\n      ` : ''}\n`;\nconst BoardItem = ({ option: { count, form_id: formId, name, unread, status, created_at: createdAt, updated_at: updatedAt }, isSelected, isMultiSelect, submissionsKeyword, showFormId, isDraggable })=>{\n    const lastEditDate = (updatedAt ? updatedAt.split(' ')[0] : createdAt.split(' ')[0]).split('-');\n    const updatedAtReadable = `${getShortMonthName(parseInt(lastEditDate[1], 10))} ${lastEditDate[2]}, ${lastEditDate[0]}`;\n    return /*#__PURE__*/ _jsxs(FormItemWrapper, {\n        tabIndex: \"0\",\n        children: [\n            isMultiSelect && /*#__PURE__*/ _jsx(CheckBox, {\n                isSelected: isSelected\n            }),\n            /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemInfo\",\n                children: /*#__PURE__*/ _jsx(ScIconWrapper, {\n                    className: \"lsApp-list-item-type\",\n                    \"data-sc\": \"formTypeIcon\",\n                    children: /*#__PURE__*/ _jsx(ScBoardIcon, {\n                        \"data-count\": unread\n                    })\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"itemContent\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"h2\", {\n                        className: \"itemTitle\",\n                        children: name\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"itemDesc\",\n                        children: `${showFormId ? `${formId}. ` : ''}${count} ${submissionsKeyword}. ${t('Last updated on')} ${updatedAtReadable}.`\n                    })\n                ]\n            }),\n            isDraggable && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDragHandle\",\n                children: /*#__PURE__*/ _jsx(IconGridDotsVertical, {})\n            }),\n            status !== 'ENABLED' && /*#__PURE__*/ _jsx(\"div\", {\n                className: \"itemDisabled\",\n                \"aria-hidden\": true,\n                children: t('This board is disabled.')\n            })\n        ]\n    });\n};\nconst boardItemProperties = shape({\n    count: number,\n    form_id: string,\n    name: string,\n    unread: number,\n    status: string,\n    created_at: string,\n    updated_at: string\n});\nBoardItem.propTypes = {\n    option: boardItemProperties.isRequired,\n    isMultiSelect: bool,\n    isSelected: bool.isRequired,\n    submissionsKeyword: string,\n    showFormId: bool,\n    isDraggable: bool\n};\nBoardItem.defaultProps = {\n    isMultiSelect: true,\n    submissionsKeyword: 'submissions',\n    showFormId: false,\n    isDraggable: false\n};\nexport default BoardItem;\n","/* eslint-disable max-len */ import Styled from 'styled-components';\nexport const ScControlBar = Styled.div`\n  margin-bottom: 1em;\n  margin-top: 28px;\n\n  &, .cb-actions, .cb-body {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .cb-toggle {\n    padding: 0 .5em 0 .75em;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n  }\n  .cb-actions, .cb-body { flex: 1 1 auto; }\n  .cb-actions { padding-right: .5em; }\n  .cb-searchCont:only-child { flex: 0 0 100%; }\n  .cb-searchCont { flex: 0 0 44%; }\n  .cb-searchCont input[type=\"search\"] {\n    width: 100%;\n    display: block;\n    padding: .5em .75em .5em 1.75rem;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238D8EAA' fill-rule='evenodd' stroke='%238D8EAA' d='M1.875 6.688c0-2.654 2.159-4.813 4.813-4.813 2.652 0 4.812 2.159 4.812 4.813 0 2.652-2.16 4.812-4.813 4.812-2.653 0-4.812-2.16-4.812-4.813m12.996 7.566l-3.869-3.87c.853-.995 1.373-2.285 1.373-3.695C12.375 3.551 9.823 1 6.687 1 3.553 1 1 3.552 1 6.688c0 3.135 2.552 5.687 5.688 5.687 1.41 0 2.7-.52 3.696-1.373l3.869 3.87c.08.079.189.128.31.128.241 0 .437-.196.437-.438 0-.12-.049-.23-.129-.31'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-position: 0.5rem center;\n    font-size: 14px;\n    font-weight: 500;\n    border: 1px solid #bcbcc8;\n    border-radius: 3px;\n    height: 47.25px;\n  }\n\n  .cb-status {\n    display: flex;\n    align-items: center;\n    border: 1px solid #0078E8;\n    color: #0078E8;\n    border-radius: 15px;\n    user-select: none;\n\n    span { padding-left: .5em; font-size: .875em; }\n    button { background: transparent; border: 0; padding: 4px; box-shadow: none; cursor: pointer; color: #0078E8 }\n    svg { width: 20px; height: 20px; display: block; }\n  }\n\n  @media screen and (max-width: 768px) {\n    flex-wrap: wrap;\n\n    .cb-searchCont { flex: 0 0 100%; order: -1; margin-bottom: .75em; }\n    .cb-searchCont:only-child { margin-bottom: 0; }\n    .cb-actions { padding-right: 0; }\n  }\n`;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport { bool, func, number } from 'prop-types';\nconst ScCh = Styled.div`\n  position: relative;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin-right: 8px;\n  border-radius: 4px;\n  border: 1px solid ${(p)=>p.theme.chBorder};\n  background-color: #fff;\n\n  &:after {\n    content: \"\";\n    display: block;\n    background: url(\"${(p)=>p.theme.chIcon}\") no-repeat center;\n  }\n\n  input[type=checkbox], &:after {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0; left: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  input[type=checkbox] { opacity: 0; }\n\n  [aria-selected=\"true\"] & {\n    border: 0;\n    background-color: ${(p)=>p.theme.chSelected};\n\n    &:after { transform: scale(1) rotate(0); }\n  }\n\n  [aria-selected=\"partial\"] & {\n    border: 0;\n    background-color: ${(p)=>p.theme.chSelected};\n\n    &:after { background: url(\"${(p)=>p.theme.chPartialIcon}\") no-repeat center; transform: scale(1) rotate(0); }\n  }\n`;\nexport const CheckBox = ({ isSelected, onChange, id })=>/*#__PURE__*/ _jsx(ScCh, {\n        className: \"itemCheckbox\",\n        children: /*#__PURE__*/ _jsx(\"input\", {\n            type: \"checkbox\",\n            id: id,\n            checked: isSelected,\n            tabIndex: \"-1\",\n            onChange: onChange\n        })\n    });\nCheckBox.propTypes = {\n    isSelected: bool,\n    id: number,\n    onChange: func\n};\nCheckBox.defaultProps = {\n    isSelected: false,\n    id: 5,\n    onChange: (e)=>e.preventDefault()\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { Dropdown as UIKitDropdown } from '@jotforminc/uikit';\nimport Styled from 'styled-components';\nconst DropdownWr = Styled.div`\n  font-size: 1em;\n  color: #2c3345;\n  line-height: 1;\n  display: flex;\n\n  button {\n    font-family: ${(p)=>p.theme.fontFamily};\n    border: 1px solid #d8dae9;\n    border-radius: ${(p)=>p.theme.buttonRadius};\n    background: transparent;\n    padding: .75em 1em;\n    color: currentColor;\n    ${(p)=>p.theme.defaultTransition}\n\n    &:focus { border-color: #81829e; outline: 0; }\n  }\n\n  ul {\n    background: #fff;\n    border: 1px solid #d8dae9;\n    border-radius: ${(p)=>p.theme.buttonRadius};\n    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.16);\n    padding: .5em 0;\n  }\n\n  li { cursor: pointer; ${(p)=>p.theme.defaultTransition} }\n  li > * { padding: .5em 1em; }\n  li + li { border-top: 1px solid #eaebf2; }\n\n  li[data-selected=\"true\"],\n  li:hover { background-color: #f1f1f1; }\n`;\nexport const Dropdown = (props)=>{\n    return /*#__PURE__*/ _jsx(DropdownWr, {\n        children: /*#__PURE__*/ _jsx(UIKitDropdown, _object_spread({}, props))\n    });\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle, useCallback } from 'react';\nimport { arrayOf, bool, func, objectOf, oneOfType, shape, string } from 'prop-types';\nimport Styled, { ThemeProvider } from 'styled-components';\nimport { SortableContainer, SortableElement } from 'react-sortable-hoc';\nimport isEqual from 'lodash/isEqual';\nimport orderByFn from 'lodash/orderBy';\nimport { propTypes } from '@jotforminc/constants';\nimport { SelectionGroup as UIKitSelectionGroup, Hooks } from '@jotforminc/uikit';\nimport { EmptyList, NotFoundList } from '@jotforminc/empty-list';\nimport { Feature, FeatureToggles } from '@jotforminc/feature-toggle';\nimport { arrayMove } from '@jotforminc/utils';\nimport { theme as defaultTheme } from './helpers/defaultTheme';\nimport ControlBar from './ControlBar';\nimport { fuseSearch } from './utils'; // Don't import this from utils/data it increases dependency size\nimport { FormLoadingSkeleton } from './FormLoadingSkeleton';\nconst SelectionGroup = Styled(/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(UIKitSelectionGroup, _object_spread_props(_object_spread({}, props), {\n        ref: ref\n    }))))`\n  .itemCheckbox { display: ${(p)=>p.isMultiSelect ? 'block' : 'none'} }\n`;\nconst DefaultDataProvider = ({ allItems, searchKeys, fuseOptions })=>({\n        onSearch: async (searchTerm)=>fuseSearch(allItems, searchTerm, searchKeys, fuseOptions)\n    });\nconst INFINITE_LOADING_FETCH_LIMIT = 50;\nconst SmartList = /*#__PURE__*/ forwardRef(({ features, isMultiSelect, items: allItems, defaultValue, onSelectionChange, DataProvider, showEmptyListPlaceholder, emptyListPlaceholder: EmptyListPlaceholder, showNotFoundListPlaceholder, notFoundListPlaceholder: NotFoundListPlaceholder, ListWrapper, ItemComponent, ItemContainer, ContainerRenderer, searchKeys, searchPlaceholder, bulkActions, t, formID, theme, isSortable, SortableProps, isItemEditable, otherControlBarItems, listTitle, listDescription, showFavorite, showSelectAll, showSelectedItemCount, showFormId, isNewBranding, submissionsKeyword, fuseOptions, customItemsList, disabledHoverText, disableDefaultDocument, ControlBarRenderer, preservedItems, productType, showPreview, paginatedFetchFormsCallback }, ref)=>{\n    const isFormPickerInfiniteLoadingEnabled = window.location.search.includes('formPickerInfiniteLoadingEnabled');\n    const selectionGroupRef = useRef();\n    const [searchTerm, setSearchTerm] = useState('');\n    const [triggerFetch, setTriggerFetch] = useState(0);\n    const [offset, setOffset] = useState(-1);\n    const [hasMore, setHasMore] = useState(true);\n    const [loading, setLoading] = useState(isFormPickerInfiniteLoadingEnabled);\n    const [items, setItems] = useState(allItems);\n    const preparedDefultValue = Array.isArray(defaultValue) ? defaultValue : [\n        defaultValue\n    ];\n    const [selectedItems, setSelectedItems] = useState(preparedDefultValue);\n    const hasAnyItem = isFormPickerInfiniteLoadingEnabled ? items.length > 0 : allItems.length > 0;\n    const hasItemsToShow = items.length > 0;\n    const selectedItemCount = Array.isArray(selectedItems) ? selectedItems.filter(Boolean).length : 0;\n    const isAllSelected = hasAnyItem && selectedItemCount === allItems.length;\n    const [filterCriteria, setFilterCriteria] = useState(null);\n    const [filterItems, setFilterItem] = useState([]);\n    Hooks.useEffectIgnoreFirst(()=>{\n        if (!isFormPickerInfiniteLoadingEnabled) setItems(allItems);\n    }, [\n        allItems\n    ]);\n    const { onSearch } = DataProvider({\n        allItems,\n        searchKeys,\n        fuseOptions\n    });\n    const { onSearch: onSearchWithFilterCriteria } = DataProvider({\n        allItems: filterItems,\n        searchKeys,\n        fuseOptions\n    });\n    Hooks.useEffectIgnoreFirst(()=>{\n        if (filterCriteria) {\n            onSearchWithFilterCriteria(searchTerm).then(setItems);\n        } else {\n            onSearch(searchTerm).then(setItems);\n        }\n    }, [\n        searchTerm,\n        filterCriteria\n    ]);\n    const options = useMemo(()=>(items === null || items === void 0 ? void 0 : items.length) > 0 ? items.map((_param)=>{\n            var { id } = _param, props = _object_without_properties(_param, [\n                \"id\"\n            ]);\n            return _object_spread({\n                id,\n                value: id\n            }, props);\n        }) : [], [\n        items\n    ]);\n    const preservedItemOptions = useMemo(()=>{\n        var _options_map;\n        return (options === null || options === void 0 ? void 0 : (_options_map = options.map((opt)=>opt.value)) === null || _options_map === void 0 ? void 0 : _options_map.filter((id)=>preservedItems.includes(id))) || [];\n    }, [\n        options,\n        preservedItems\n    ]);\n    // useMemo(() => props => <ItemComponent {...props} isMultiSelect={isMultiSelect} />, [ItemComponent, isMultiSelect]);\n    const ItemComponentWrapped = useMemo(()=>(props)=>/*#__PURE__*/ _jsx(ItemComponent, _object_spread_props(_object_spread({}, props), {\n                formID: formID,\n                disabledHoverText: disabledHoverText,\n                isMultiSelect: isMultiSelect,\n                isDraggable: isSortable,\n                isEditable: isItemEditable,\n                showFavorite: showFavorite,\n                showFormId: showFormId,\n                submissionsKeyword: submissionsKeyword,\n                isNewBranding: isNewBranding,\n                disableDefaultDocument: disableDefaultDocument,\n                productType: productType,\n                showPreview: showPreview\n            })), [\n        ItemComponent,\n        isMultiSelect,\n        isItemEditable,\n        isSortable,\n        showFavorite,\n        showFormId,\n        submissionsKeyword,\n        isNewBranding,\n        productType\n    ]);\n    const clearSelection = ()=>{\n        setSelectedItems(preservedItems);\n        const { setSelectedOptionList } = selectionGroupRef.current || {};\n        // eslint-disable-next-line no-unused-expressions\n        setSelectedOptionList === null || setSelectedOptionList === void 0 ? void 0 : setSelectedOptionList(preservedItemOptions);\n    };\n    const handleAllSelectionChanged = ()=>{\n        if (!isAllSelected) {\n            var _selectionGroupRef_current_refs;\n            const optionValueList = options.map((opt)=>opt.value);\n            setSelectedItems(optionValueList);\n            // eslint-disable-next-line no-irregular-whitespace\n            const { setSelectedOptionList } = isSortable ? ((_selectionGroupRef_current_refs = selectionGroupRef.current.refs) === null || _selectionGroupRef_current_refs === void 0 ? void 0 : _selectionGroupRef_current_refs.wrappedInstance) || {} : selectionGroupRef.current;\n            // eslint-disable-next-line no-unused-expressions\n            setSelectedOptionList === null || setSelectedOptionList === void 0 ? void 0 : setSelectedOptionList(optionValueList);\n        } else {\n            clearSelection();\n        }\n    };\n    const onItemSelection = (itemList)=>{\n        setSelectedItems(itemList);\n    };\n    Hooks.useEffectIgnoreFirst(()=>{\n        if (!isEqual(selectedItems, preparedDefultValue) && selectedItems) {\n            onSelectionChange(selectedItems);\n        }\n    }, [\n        selectedItems\n    ]);\n    useEffect(()=>{\n        setSelectedItems(defaultValue);\n    }, [\n        defaultValue\n    ]);\n    useImperativeHandle(ref, ()=>({\n            selectedItems: selectedItems\n        }));\n    const handleInfiniteLoading = async ()=>{\n        if (!hasMore || !isFormPickerInfiniteLoadingEnabled) {\n            return;\n        }\n        setLoading(true);\n        const res = await paginatedFetchFormsCallback({\n            offset: offset < 0 ? 0 : offset * 50,\n            limit: INFINITE_LOADING_FETCH_LIMIT,\n            filter: {\n                fullText: searchTerm\n            }\n        });\n        setItems((prev)=>[\n                ...new Set([\n                    ...prev,\n                    ...res\n                ])\n            ]);\n        setLoading(false);\n        if ((res === null || res === void 0 ? void 0 : res.length) < INFINITE_LOADING_FETCH_LIMIT) {\n            setHasMore(false);\n        }\n    };\n    const onIntersection = useCallback(([{ isIntersecting }])=>{\n        if (isIntersecting && isFormPickerInfiniteLoadingEnabled) {\n            setOffset((prev)=>prev + 1);\n            setTriggerFetch((prev)=>prev + 1);\n        }\n    }, [\n        isFormPickerInfiniteLoadingEnabled,\n        setOffset,\n        setTriggerFetch\n    ]);\n    useEffect(()=>{\n        const onScrollToBottom = document.querySelector('.infinite-loading-intersection');\n        let observer;\n        if (global.IntersectionObserver) {\n            observer = new global.IntersectionObserver(onIntersection, {\n                threshold: 0.0\n            });\n            if (onScrollToBottom) observer.observe(onScrollToBottom);\n        }\n        return ()=>{\n            if (observer) {\n                observer.disconnect();\n            }\n        };\n    }, []);\n    Hooks.useEffectIgnoreFirst(()=>{\n        if (isFormPickerInfiniteLoadingEnabled) {\n            setItems([]);\n            setHasMore(true);\n            setOffset(-1);\n            setTriggerFetch((prev)=>prev + 1);\n        }\n    }, [\n        searchTerm\n    ]);\n    Hooks.useEffectIgnoreFirst(()=>{\n        if (isFormPickerInfiniteLoadingEnabled) {\n            handleInfiniteLoading();\n        }\n    }, [\n        offset,\n        triggerFetch\n    ]);\n    const WrappedSelectionGroup = isSortable ? SortableContainer(SelectionGroup, {\n        withRef: true\n    }) : SelectionGroup;\n    const getSortableOptions = ()=>{\n        if (!isSortable || !SortableProps) return {};\n        const DefaultSortableElement = SortableElement((props)=>/*#__PURE__*/ _jsx(\"li\", _object_spread({}, props)));\n        const { SortableElement: SortableElementAsProp = DefaultSortableElement, SortableElementProps = {}, onSortEnd: onSortEndCallback, lockAxis = 'y', transitionDuration = 150, pressDelay, distance, helperContainer = ()=>{\n            var _selectionGroupRef_current;\n            return (selectionGroupRef === null || selectionGroupRef === void 0 ? void 0 : (_selectionGroupRef_current = selectionGroupRef.current) === null || _selectionGroupRef_current === void 0 ? void 0 : _selectionGroupRef_current.container) || document.body;\n        } } = SortableProps;\n        return {\n            OptionContainerRenderer: SortableElementAsProp,\n            OptionContainerRendererProps: (option)=>{\n                const index = option.index ? option.index : options.findIndex((opt)=>opt.id === option.id);\n                return _object_spread({\n                    index\n                }, SortableElementProps);\n            },\n            onSortEnd: ({ oldIndex, newIndex })=>{\n                const orderedItems = arrayMove(items, oldIndex, newIndex).map((item, index)=>_object_spread_props(_object_spread({}, item), {\n                        index\n                    }));\n                if (onSortEndCallback) onSortEndCallback({\n                    oldIndex,\n                    newIndex\n                }, orderedItems);\n            },\n            lockAxis,\n            transitionDuration,\n            pressDelay,\n            distance,\n            helperContainer\n        };\n    };\n    const sortOnClient = (sortCriteria)=>{\n        switch(sortCriteria){\n            case 'title_az':\n                setItems(orderByFn(items, [\n                    'title'\n                ], 'asc'));\n                break;\n            case 'title_za':\n                setItems(orderByFn(items, [\n                    'title'\n                ], 'desc'));\n                break;\n            case 'last_submission':\n                setItems(orderByFn(items, [\n                    (i)=>new Date(i[sortCriteria])\n                ], 'desc'));\n                break;\n            case 'count':\n            case 'new':\n                setItems(orderByFn(items, (i)=>parseInt(i[sortCriteria], 10), 'desc'));\n                break;\n            default:\n                {\n                    setItems(orderByFn(items, [\n                        sortCriteria\n                    ], 'desc'));\n                    break;\n                }\n        }\n    };\n    const filterOnClient = (filterValue)=>{\n        switch(filterValue){\n            case 'payment':\n                const paymentItems = allItems.filter((item)=>item === null || item === void 0 ? void 0 : item.paymentProps);\n                setItems(paymentItems);\n                setFilterCriteria(filterValue);\n                setFilterItem(paymentItems);\n                break;\n            default:\n                setItems(allItems);\n                setFilterCriteria(null);\n                setFilterItem([]);\n                break;\n        }\n    };\n    const handleNotFound = ()=>{\n        if (!hasItemsToShow && showNotFoundListPlaceholder && searchTerm) {\n            if (typeof NotFoundListPlaceholder === 'function') {\n                return /*#__PURE__*/ _jsx(NotFoundListPlaceholder, {\n                    t: t\n                });\n            }\n            return NotFoundListPlaceholder;\n        }\n        if (!filterItems.length > 0 && !hasItemsToShow && showNotFoundListPlaceholder && hasAnyItem) {\n            if (typeof NotFoundListPlaceholder === 'function') {\n                return /*#__PURE__*/ _jsx(NotFoundListPlaceholder, {\n                    t: t\n                });\n            }\n            return NotFoundListPlaceholder;\n        }\n    };\n    return /*#__PURE__*/ _jsx(FeatureToggles, {\n        features: _object_spread({\n            multipleManage: true,\n            search: true\n        }, features),\n        children: /*#__PURE__*/ _jsxs(ThemeProvider, {\n            theme: theme,\n            children: [\n                /*#__PURE__*/ _jsx(Feature, {\n                    name: \"showHeader\",\n                    activeComponent: /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"jNewHeaderFormList-header\",\n                        children: /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"jNewHeaderFormList-container\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"h2\", {\n                                    className: \"jNewHeaderFormList-title\",\n                                    children: t(listTitle)\n                                }),\n                                /*#__PURE__*/ _jsx(\"p\", {\n                                    className: \"jNewHeaderFormList-desc\",\n                                    children: t(listDescription)\n                                })\n                            ]\n                        })\n                    })\n                }),\n                /*#__PURE__*/ _jsx(ControlBarRenderer, {\n                    isVisible: isFormPickerInfiniteLoadingEnabled ? true : hasAnyItem,\n                    isMultiSelect: isMultiSelect,\n                    isAllSelected: isAllSelected,\n                    selectedItemCount: selectedItemCount - preservedItems.length,\n                    onSelectAll: handleAllSelectionChanged,\n                    searchPlaceholder: searchPlaceholder,\n                    searchTerm: searchTerm,\n                    onSearchTermChange: setSearchTerm,\n                    clearSelection: clearSelection,\n                    bulkActions: bulkActions,\n                    otherItems: otherControlBarItems,\n                    showSelectAll: showSelectAll,\n                    showSelectedItemCount: showSelectedItemCount,\n                    isNewBranding: isNewBranding,\n                    sortOnClient: sortOnClient,\n                    filterOnClient: filterOnClient,\n                    autoFocus: true\n                }),\n                !hasAnyItem && !searchTerm && showEmptyListPlaceholder && !loading && (typeof EmptyListPlaceholder === 'function' ? /*#__PURE__*/ _jsx(EmptyListPlaceholder, {}) : EmptyListPlaceholder),\n                hasItemsToShow && /*#__PURE__*/ _jsxs(ListWrapper, {\n                    children: [\n                        customItemsList.map(({ CustomItemComponent, props })=>{\n                            return /*#__PURE__*/ _jsx(CustomItemComponent, _object_spread({}, props));\n                        }),\n                        /*#__PURE__*/ _jsx(WrappedSelectionGroup, _object_spread({\n                            ref: selectionGroupRef,\n                            options: options,\n                            isMultiSelect: isMultiSelect,\n                            defaultValue: selectedItems,\n                            onSelectionChange: onItemSelection,\n                            OptionRenderer: ItemComponentWrapped,\n                            OptionContainerRenderer: ItemContainer,\n                            ContainerRenderer: ContainerRenderer\n                        }, getSortableOptions()))\n                    ]\n                }),\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"infinite-loading-intersection\",\n                    children: isFormPickerInfiniteLoadingEnabled && hasMore ? /*#__PURE__*/ _jsx(_Fragment, {\n                        children: [\n                            ...Array(40)\n                        ].map(()=>/*#__PURE__*/ _jsx(FormLoadingSkeleton, {}))\n                    }) : null\n                }),\n                !loading && handleNotFound()\n            ]\n        })\n    });\n});\nconst itemType = shape({\n    id: string.isRequired\n});\nSmartList.propTypes = {\n    features: objectOf(bool),\n    isMultiSelect: bool,\n    items: arrayOf(itemType),\n    defaultValue: oneOfType([\n        arrayOf(string),\n        string\n    ]),\n    onSelectionChange: func,\n    DataProvider: func,\n    showEmptyListPlaceholder: bool,\n    emptyListPlaceholder: propTypes.renderable,\n    showNotFoundListPlaceholder: bool,\n    notFoundListPlaceholder: propTypes.renderable,\n    ListWrapper: propTypes.renderable,\n    ItemComponent: propTypes.renderable,\n    ItemContainer: propTypes.renderable,\n    ContainerRenderer: propTypes.renderable,\n    searchKeys: arrayOf(string),\n    searchPlaceholder: string,\n    bulkActions: propTypes.renderable,\n    t: func,\n    formID: string,\n    theme: shape({}),\n    isSortable: bool,\n    SortableProps: shape({}),\n    isItemEditable: bool,\n    otherControlBarItems: propTypes.renderable,\n    listTitle: string,\n    listDescription: string,\n    showFavorite: bool,\n    showSelectAll: bool,\n    showSelectedItemCount: bool,\n    showFormId: bool,\n    submissionsKeyword: string,\n    isNewBranding: bool,\n    fuseOptions: shape({}),\n    customItemsList: arrayOf(shape({\n        CustomItemComponent: propTypes.renderable,\n        props: shape({})\n    })),\n    ignoreDefaultValueCheck: bool,\n    disabledHoverText: string,\n    disableDefaultDocument: bool,\n    ControlBarRenderer: propTypes.renderable,\n    /** Retains these items on unselect all, and does not count towards option count. */ preservedItems: arrayOf(string),\n    productType: string,\n    showPreview: bool,\n    paginatedFetchFormsCallback: func\n};\nSmartList.defaultProps = {\n    features: {},\n    isMultiSelect: true,\n    items: [],\n    defaultValue: [],\n    onSelectionChange: (f)=>f,\n    DataProvider: DefaultDataProvider,\n    showEmptyListPlaceholder: true,\n    emptyListPlaceholder: ()=>/*#__PURE__*/ _jsx(EmptyList, {}),\n    showNotFoundListPlaceholder: true,\n    notFoundListPlaceholder: ()=>/*#__PURE__*/ _jsx(NotFoundList, {\n            resource: \"item\"\n        }),\n    ListWrapper: ({ children })=>/*#__PURE__*/ _jsx(\"ul\", {\n            role: \"listbox\",\n            \"aria-label\": \"list\",\n            children: children\n        }),\n    ItemComponent: null,\n    ItemContainer: (props)=>/*#__PURE__*/ _jsx(\"li\", _object_spread({}, props)),\n    ContainerRenderer: /*#__PURE__*/ forwardRef(({ children }, ref)=>/*#__PURE__*/ _jsx(\"ul\", {\n            \"data-testid\": \"optionList\",\n            role: \"listbox\",\n            \"aria-label\": \"list\",\n            ref: ref,\n            children: children\n        })),\n    searchKeys: [],\n    searchPlaceholder: '',\n    bulkActions: null,\n    t: (f)=>f,\n    formID: null,\n    theme: defaultTheme,\n    isSortable: false,\n    SortableProps: {},\n    isItemEditable: false,\n    otherControlBarItems: [],\n    listTitle: 'Go to another form',\n    listDescription: 'You\\'ve done great on this form. Time to focus on another one? Let\\'s go then!',\n    showFavorite: false,\n    showSelectAll: true,\n    showSelectedItemCount: true,\n    showFormId: false,\n    submissionsKeyword: 'Submissions',\n    isNewBranding: false,\n    fuseOptions: null,\n    customItemsList: [],\n    ignoreDefaultValueCheck: false,\n    disabledHoverText: null,\n    disableDefaultDocument: false,\n    ControlBarRenderer: ControlBar,\n    preservedItems: [],\n    productType: '',\n    showPreview: false,\n    paginatedFetchFormsCallback: (f)=>f\n};\nexport default SmartList;\n","import Styled from 'styled-components';\nconst FormListWrapper = Styled.div`\n  font-size: ${(p)=>p.theme.fontSize};\n  font-family: system-ui;\n  width: 100%;\n\n  * { box-sizing: border-box; }\n\n  ul { padding: 0; }\n  li { list-style: none; }\n  li + li { margin-top: 1em; }\n`;\nexport default FormListWrapper;\n","import Styled from 'styled-components';\nexport const ScRB = Styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n\n  .content {\n    width: 90%;\n    max-width: 500px;\n    padding-bottom: 40px;\n    text-align: center;\n    font-size: 1em;\n    color: #0A1551;\n    font-weight: 700;\n    margin: auto;\n\n    > svg {\n      display: unset;\n      margin-bottom: 8px;\n    }\n  }\n\n  .content.wider { max-width: 540px; }\n\n  .assignToOrgSvg {\n    width: 54vw;\n    height: 36vh;\n    max-width: 192px;\n    max-height: 136px;\n  }\n\n  .title {\n    font-size: 18px;\n    line-height: 20px;\n    color: #141E46;\n    font-weight: 500;\n  }\n\n  .subtitle {\n    font-size: 15px;\n    line-height: 16px;\n    color: #252F58;\n    font-weight: 500;\n  }\n\n  p {\n    font-size: 14px;\n    line-height: 24px;\n    color: #60658C;\n  }\n\n  p, .custom-content { font-weight: 300; margin: 12px 0; }\n\n  .sec { color: #2c3345; margin: 1em 0 0; line-height: 1.5; }\n\n  [data-value=\"sendNotificationEmail\"] { display: inline-flex; }\n\n  .assigneeMsg {\n    max-width: 426px;\n    width: 100%;\n    display: block;\n    height: 90px;\n    border-radius: 4px;\n    border: solid 1px #d8dae9;\n    margin: 1em auto 0;\n    font-size: .875rem;\n    padding: .375rem .5rem;\n    transition: border-color .15s ease;\n\n    ::placeholder { color: #8d8fa8; }\n    :focus { outline: 0; border-color: #4c7af7; }\n  }\n\n  .dontshow {\n    display: inline-flex;\n    background-color: #ecf4ff;\n    align-items: center;\n    padding: 10px;\n    margin-top: 38px;\n    margin-bottom: 20px;\n    \n    &-input {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      \n      &:checked + .dontshow-checkbox:before {\n        background-color: #54b45c;\n        border-color: #54b45c;\n      }\n      \n      &:checked + .dontshow-checkbox:after {\n        opacity: 1;\n      }\n      \n      &:focus {\n        outline: 0;\n      }\n    }\n    \n    &-checkbox {\n      width: 14px;\n      height: 14px;\n      background-color: #fff;\n      border-radius: 2px;\n      position: relative;\n      \n      &:before {\n        content: \"\";\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border: 1px solid #CCD0DA;\n        background-color: #fff;\n        border-radius: 2px;\n        top: 0;\n        left: 0;\n        transition: .3s;\n        transform: translate(-1px, -1px);\n      }\n      \n      &:after {\n        content: \"\";\n        display: block;\n        width: 4px;\n        height: 8px;\n        border: solid #fff;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        position: absolute;\n        top: 1px;\n        left: 4px;\n        opacity: 1;\n        transition: .3s;\n        z-index: 2;\n      }\n    }\n    \n    &-text {\n      font-weight: 400;\n      font-size: 16px;\n      margin-left: 8px;\n      line-height: 1;\n      color: #52587e;\n    }\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 0.875em;\n\n    p { margin: 1em 0 .75em; }\n  }  \n`;\n","import Styled from 'styled-components';\nimport { PickerModal } from '@jotforminc/picker-modal';\nexport const ScPickerModal = Styled(PickerModal)`\n  .header-content {\n    margin: 20px 0;\n    font-family: Circular,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n\n    .pm-t {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 500;\n      letter-spacing: 0.15px;\n      color: #141E46;\n    }\n\n    .pm-d {\n      margin: 0.25em 0 0;\n      font-size: 16px;\n      letter-spacing: 0.12px;\n      color: #60658C;\n    }\n  }\n\n  .close-modal {\n    margin-right: 24px;\n  }\n\n  .pm-b {\n    max-width: 600px;\n    width: 90%;\n    min-height: 570px;\n\n    [data-sc=\"smartList-controlBar\"] {\n      .cb-body {\n        display: none;\n      }\n      .cb-searchCont {\n        flex: 0 0 100%;\n      }\n    }\n\n    .emptyList {\n      text-align: center;\n      min-height: 60vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n\n\n  [data-sc='footer'] {\n    background-color: rgba(239,239,246,.45);\n  }\n\n  .pm-f {\n    display: flex;\n    justify-content: space-between;\n\n    button {\n      font-weight: 500;\n      font-family: Circular,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n    }\n\n    .taste.isGray {\n      padding: 8px 32px;\n    }\n\n    .taste.isGreen {\n      background-color: #01BD6F;\n      padding: 0px 32px;\n\n      &:hover {\n        background-color: #01d67e;\n      }\n      &[disabled] {\n        opacity: 1;\n        background-color: #78D6AF;\n      }\n    }\n  }\n\n  .js-ConfirmationModal {\n    font-family: inherit;\n  }\n\n  &.autoHeight {\n    .pm-b {\n      min-height: auto;\n\n      ul {\n        overflow-y: auto;\n\n        li:last-child {\n          margin-bottom: 28px;\n        }\n      }\n    }\n  }\n\n  @media screen and (min-width: 480px) {\n    [data-sc=\"picker-body\"] {\n      max-height: 60vh;\n    }\n  }\n`;\n","/* eslint-disable max-len */ import { Button } from '@jotforminc/uikit';\nimport styled from 'styled-components';\nexport const ScButton = styled(Button)`\n  &.bare {\n    font-size: .875em;\n    color: #4573e3;\n    text-decoration: none;\n    background: transparent;\n    cursor: pointer;\n    box-shadow: none;\n    padding: 0;\n    border: 0;\n  }\n\n  &.taste {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: .5em .75em;\n    border-radius: 4px;\n    cursor: pointer;\n    text-transform: uppercase;\n    border: 0;\n    font-size: 1em;\n    line-height: 1.5;\n    font-weight: 500;\n    font-family: inherit;\n  }\n\n  &.panel {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 2px;\n    cursor: pointer;\n    text-transform: capitalize;\n    border: 0;\n    padding: 6px;\n    margin: 0;\n    font-size: 15px;\n    font-family: Roboto,Circular,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n    transition: .3s background-color ease;\n  }\n\n  &.panel.isGreen {\n    background-color: #4BC073;\n    color: #fff;\n\n    &:hover {\n      background-color: #65DA8D;\n    }\n\n    &:active {\n      background-color: #32A75A;\n    }\n  }\n\n  &.taste.isGreen {\n    background-color: #54b45c;\n    color: #fff;\n  }\n\n\n  &.taste.isPurple {\n    background-color: #8563ce;\n    color: #fff;\n  }\n\n  &.taste.isRed {\n    background-color: #ff4947;\n    color: #fff;\n  }\n\n  &.taste.isGray {\n    background-color: #FAFAFC;\n    border: 1px solid #ADB4D2;\n    color: #A0A6C3;\n\n    &:hover {\n      background-color: #fff;\n      color: #9EA7CE;\n      border-color: #9EA7CE;\n    }\n\n    &[disabled] {\n      color: #A0A6C3;\n      border-color: #A0A6C3;\n      background-color: #FAFAFC;\n    }\n  }\n\n  &.taste.isBlue, &.panel.isBlue {\n    background-color: #0099FF;\n    color: #fff;\n    transition: .3s background-color ease;\n\n    &:hover {\n      background-color: #33adff;\n    }\n\n    &:active {\n      background-color: #007acc;\n    }\n  }\n\n  &.taste.isLightGreen {\n    background-color: #78BB07;\n    color: #fff;\n\n    &:hover {\n      background-color: #4EB100;\n    }\n\n    &:active {\n      background-color: #5FA200;\n    }\n  }\n\n  &.taste.isSubGray {\n    background-color: #e9e9f2;\n    color: #898ba9;\n\n    &:hover {\n      background-color: #F2F2FE;\n    }\n\n    &:active {\n      background-color: #DEDEEC;\n    }\n\n    &[disabled] {\n      &:hover,&:active {\n        background-color: #e9e9f2;\n      }\n    }\n  }\n\n  &.taste.isWhite {\n    background-color: #fff;\n    color: #8E4FCD;\n    transition: .3s background-color ease;\n    border: 1px solid #8E4FCD;\n\n    svg path {\n      fill: #8E4FCD;\n    }\n\n    &:hover {\n      background-color: #7735BA;\n      color: #fff;\n\n      svg path { fill: #fff; }\n    }\n\n    &:active {\n      background-color: #6722AC;\n      color: #fff;\n\n      svg path { fill: #fff; }\n    }\n  }\n\n\n  &.taste.quickQR {\n    border-radius: 4px;\n    & > svg {\n      & > path { fill: #fff }\n    }\n\n    @media screen and (max-width: 480px) {\n      border-radius: 29px;\n    }\n  }\n\n  &.taste.quickQR {\n    margin: 0 20px;\n    font-weight: 500;\n    font-size: 14px;\n    font-family: inherit;\n    transition: .3s background-color ease;\n    text-transform: none;\n\n    & > svg { margin-right: 7px;}\n\n    @media screen and (max-width: 480px) {\n      padding: 11px;\n      margin: 0;\n\n      & > span { display: none; }\n      & > svg {\n        margin-right: 0;\n        & > path { fill: #fff }\n      }\n    }\n  }\n\n  &.taste.quickQR {\n    background-color: #0a1551;\n\n    &:hover {\n      background-color: #252d5b;\n    }\n  }\n\n  &.taste.quickQR.isSelected {\n    background-color: #091141;\n  }\n\n  &.taste.undoRedo {\n    margin: 0 2px;\n    padding: 12px 17px;\n    font-size: 14px;\n    font-family: inherit;\n    transition: .3s background-color ease;\n    text-transform: none;\n    font-weight: 400;\n\n    & > svg { margin-right: 11px;}\n    & > span { color: #23283A; line-height: 16px; }\n\n    @media screen and (max-width: 768px) {\n      padding: 12px 10px;\n      & > span { display: none; }\n      & > svg { margin-right: 0; }\n    }\n\n    @media screen and (max-width: 480px) {\n      padding: 12px 10px;\n      & > span { display: none; }\n      & > svg { margin-right: 0; }\n    }\n\n    &[disabled] {\n      & > svg > path { fill: #979797;}\n      & > span { color: #898BA9; }\n    }\n  }\n\n  &[disabled] { opacity: .6; cursor: initial; }\n\n\n  &.outline {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: .5em 1em;\n    border-radius: 2px;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid currentColor;\n    font-size: .875em;\n    line-height: 1rem;\n    font-weight: 500;\n  }\n\n  &.outline.isRed {\n    color: #ff4947;\n  }\n\n  &.outline.removeForms { padding: .625em; }\n  &.outline.removeForms span { margin-left: .25rem; }\n\n  &.goBack {\n    font-size: .875em;\n    line-height: 1;\n    color: #90a4ae;\n    padding: 0 1em 1em 0;\n\n    & > * { vertical-align: middle; }\n    svg { width: 18px; margin-right: 5px; }\n  }\n\n  /*\n  &.forRevoke {\n    font-size: .875em;\n    color: #f9535c;\n    margin: 0 .5rem 0 auto;\n    padding: .5em 1em .5em 1.5rem;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F9535C'%3E%3Cpath d='M8.834 3.252v9.037c0 .834-.58 1.445-1.375 1.446-1.757.002-3.514.002-5.271 0-.795-.001-1.374-.612-1.374-1.447V3.252h8.02zM2.828 5.345v6.292h1.137c.166 0 .187 0 .19-.138V5.548c0-.037.01-.079-.003-.108-.018-.037-.056-.09-.085-.09-.41-.007-.82-.005-1.239-.005zm3.99 0H5.686c-.192 0-.193 0-.193.202v6.08H6.82V5.345zM0 2.414V.819h.184C.992.82 1.8.823 2.607.814c.08 0 .177-.05.238-.112.178-.187.339-.396.515-.585.05-.054.13-.097.198-.097.843-.007 1.687-.007 2.53 0 .067 0 .148.043.198.097.177.19.337.399.515.585.061.063.158.112.238.112.803.009 1.605.005 2.408.005h.195v1.595H0z' transform='translate(-3 -1) translate(3.542 1.417)'/%3E%3C/g%3E%3Cpath d='M0 0L17 0 17 17 0 17z' transform='translate(-3 -1)'/%3E%3C/g%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: 11px 15px;\n    background-position: 8px 7px;\n  }\n  */\n\n  @media screen and (max-width: 480px) {\n    &.outline.removeForms span { display: none; }\n    &.cb-addForm {\n      margin-left: 0.5em;\n      span { display: none; }\n      svg { margin-right: 0 !important; }\n    }\n  }\n`;\n","/* eslint-disable camelcase */ function _define_property(obj, key, value) {\n    if (key in obj) {\n        Object.defineProperty(obj, key, {\n            value: value,\n            enumerable: true,\n            configurable: true,\n            writable: true\n        });\n    } else {\n        obj[key] = value;\n    }\n    return obj;\n}\nfunction _object_spread(target) {\n    for(var i = 1; i < arguments.length; i++){\n        var source = arguments[i] != null ? arguments[i] : {};\n        var ownKeys = Object.keys(source);\n        if (typeof Object.getOwnPropertySymbols === \"function\") {\n            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {\n                return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n            }));\n        }\n        ownKeys.forEach(function(key) {\n            _define_property(target, key, source[key]);\n        });\n    }\n    return target;\n}\nfunction ownKeys(object, enumerableOnly) {\n    var keys = Object.keys(object);\n    if (Object.getOwnPropertySymbols) {\n        var symbols = Object.getOwnPropertySymbols(object);\n        if (enumerableOnly) {\n            symbols = symbols.filter(function(sym) {\n                return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n            });\n        }\n        keys.push.apply(keys, symbols);\n    }\n    return keys;\n}\nfunction _object_spread_props(target, source) {\n    source = source != null ? source : {};\n    if (Object.getOwnPropertyDescriptors) {\n        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));\n    } else {\n        ownKeys(Object(source)).forEach(function(key) {\n            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n        });\n    }\n    return target;\n}\nfunction _object_without_properties(source, excluded) {\n    if (source == null) return {};\n    var target = _object_without_properties_loose(source, excluded);\n    var key, i;\n    if (Object.getOwnPropertySymbols) {\n        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n        for(i = 0; i < sourceSymbolKeys.length; i++){\n            key = sourceSymbolKeys[i];\n            if (excluded.indexOf(key) >= 0) continue;\n            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n            target[key] = source[key];\n        }\n    }\n    return target;\n}\nfunction _object_without_properties_loose(source, excluded) {\n    if (source == null) return {};\n    var target = {};\n    var sourceKeys = Object.keys(source);\n    var key, i;\n    for(i = 0; i < sourceKeys.length; i++){\n        key = sourceKeys[i];\n        if (excluded.indexOf(key) >= 0) continue;\n        target[key] = source[key];\n    }\n    return target;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { t } from '@jotforminc/translation';\nimport { canCreateTeam } from '../../utils';\nconst TooltipContainer = styled.div`\n  .jfTooltipNew-hoverTarget {\n    position: relative;\n  }\n  .jfTooltipNew-body {\n    width: 200px\n  }\n  button {\n    opacity: .5;\n  }\n`;\nexport const CreateTeamButton = (_param)=>{\n    var { user, tooltipProps, isTeamCreationDisabled = false, children = 'Create Team' } = _param, buttonProps = _object_without_properties(_param, [\n        \"user\",\n        \"tooltipProps\",\n        \"isTeamCreationDisabled\",\n        \"children\"\n    ]);\n    const disableMessage = (user === null || user === void 0 ? void 0 : user.isDataOnlyUser) === '1' ? \"You don't have permission to create team\" : '';\n    if (!canCreateTeam(isTeamCreationDisabled, (user === null || user === void 0 ? void 0 : user.accountType) || (user === null || user === void 0 ? void 0 : user.account_type))) return null;\n    return !disableMessage ? /*#__PURE__*/ _jsx(\"button\", _object_spread_props(_object_spread({\n        type: \"button\"\n    }, buttonProps), {\n        children: children\n    })) : /*#__PURE__*/ _jsx(TooltipContainer, {\n        children: /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"jfTooltipNew-hoverTarget\",\n            children: [\n                /*#__PURE__*/ _jsx(\"button\", _object_spread_props(_object_spread({\n                    type: \"button\"\n                }, buttonProps), {\n                    disabled: true,\n                    children: children\n                })),\n                /*#__PURE__*/ _jsx(Tooltip, _object_spread_props(_object_spread({\n                    v2: true,\n                    wrapperClassName: \"tooltip\",\n                    align: \"Center\",\n                    attach: \"Bottom\",\n                    style: {\n                        backgroundColor: '#141E46'\n                    }\n                }, tooltipProps), {\n                    children: t(disableMessage)\n                }))\n            ]\n        })\n    });\n};\n","/* eslint-disable max-len */ export const samples = `t: hi\nr: {\"actions\":[{\"type\": \"greeting\", \"value\": \"Hello!\"}]}\n\nt: send email to Hatice, she has to pay additional 10 dollars\nr: {\"query\": {\"3\": \"Hatice\"}, \"actions\":[{\"type\": \"mail\", \"subject\": \"About your order today\", \"body\": \"Hi {customer name},####I have prepared your order, but you have to pay an additional $10.####All the best\"}]}\n\nt: how many orders tomorrow\nr: {\"query\": {\"6\": \"tomorrow\"}, \"actions\": [{\"type\": \"sum\"}]}\n\nt: how many cakes should I prepare today\nr: {\"query\": {\"6\": \"today\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\"}]}\n\nt: how many cakes ordered last week\nr: {\"query\": {\"6\": \"last week\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\"}]}\n\nt: how much did I earned today\nr: {\"query\": {\"created_at\": \"today\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"total\"}]}\n\nt: how many orders from John tomorrow\nr: {\"query\": {\"6\": \"tomorrow\", \"3\": \"John\"}, \"actions\": [{\"type\": \"sum\"}]}\n\nt: how many chocolate cakes I baked yesterday\nr: {\"query\": {\"6\": \"yesterday\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\", \"name\": \"Chocolate Cake\"}]}\n\nt: how much i earned from limon cake\nr: {\"query\": {\"created_at\": \"last month\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"amount\", \"name\": \"Limon Cake\"}]}\n\nt: how many strawberry cakes John Smith ordered\nr: {\"query\": {\"3\": \"John Smith\", \"7\": \"Strawberry Cake\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\"}]}\n\nt: find orders from John and forward them to jan@berka.com\nr: {\"query\": {\"3\": \"John\"}, \"actions\":[{\"type\": \"forward\", to: \"jan@berka.com\"}]}\n\nt: send email to the customers who ordered cakes for tomorrow, say that I have to cancel orders because I'm ill.\nr: {\"query\": {\"6\": \"tomorrow\"}, \"actions\":[{\"type\": \"mail\", \"subject\": \"Cancellation of Orders\", \"body\": \"Hi {customer name},####I'm ill today so I have to cancel your orders.####Sorry for the inconvenience.\"}]}\n\nt: send an email to the customer who ordered cakes for 2.00 pm, say that I'll be late for 15 min.\nr: {\"query\": {\"6\": \"2.00 pm\"}, \"actions\":[{\"type\": \"mail\", \"subject\": \"Cake Delivery\", \"body\": \"Hi {customer name},####I'll be late for 15 min.####Thanks for your understanding\"}]}\n\nt: send email to orders yesterday that we've prepared their cakes\nr: {\"query\": {\"6\": \"today\"}, \"actions\": [{\"type\": \"mail\", \"subject\": \"Cake Delivery\", \"body\": \"Hi {customer name},####We've prepared your order.####Regards\"}]}\n\nt: send email to orders today delivery\nr: {\"query\": {\"6\": \"today\"}, \"actions\": [{\"type\": \"mail\", \"subject\": \"Cake Delivery\", \"body\": \"Hi {customer name},####We're on our way to your address with your order.####See you soon\"}]}\n\nt: how much did I earned from janberka@gmail.com last week\nr: {\"query\": {\"created_at\": \"last week\", \"4\": \"janberka@gmail.com\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"total\"}]}\n\nt: how many orders did I get from John Smith last 3 month\nr: {\"query\": {\"created_at\": \"last 3 month\", \"3\": \"John Smith\"}, \"actions\": [{\"type\": \"sum\"]}\n\nt: which cakes did I prepare yesterday for John\nr: {\"query\": {\"6\": \"yesterday\", \"3\": \"John\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\"}]}\n\nt: how many strawberry cakes ordered\nr: {\"query\": {\"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\", \"name\": \"Strawberry Cake\"}]}\n\nt: how many chocolate cake ordered this week\nr: {\"query\": {\"created_at\": \"this week\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\", \"name\": \"Chocolate Cake\"}]}\n\nt: how many limon cake should i prepare tomorrow\nr: {\"query\": {\"6\": \"tomorrow\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\", \"name\": \"Limon Cake\"}]}\n\nt: What should I prepare today\nr: {\"query\": {\"6\": \"tomorrow\"}, \"actions\": [{\"type\": \"sum\", \"qid\": \"7\", \"key\": \"quantity\"}]}\n\nt: send mail to yesterday's customers, ask if they enjoy our cakes\nr: {\"query\" {\"6\": \"tomorrow\"}, \"actions\": [{\"type\": \"mail\", \"body\": \"Hi {customer name},####Hope you have enjoyed our cakes. your feedback is important for us, please let us know if you had any problems.####All the best\"}]}\n\nt: download Kaan's orders as CSV file\nr: {\"query: {\"3\": \"Kaan\"}, \"actions\": [{\"type\": \"download\", \"format\": \"csv\"}]}`;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React, { createContext, useState, useContext, useMemo } from 'react';\nimport useSwr from 'swr';\nimport { shape, node } from 'prop-types';\nimport { useFeatures } from '@paralleldrive/react-feature-toggles';\nimport { samples } from './constants';\nimport { gpt3Completion, getFilter } from '../../api';\nconst AssistantContext = /*#__PURE__*/ createContext();\nconst shouldPrompt = ({ type })=>type !== 'control_text' && type !== 'control_head';\nconst sumReducer = async (form, action, submissions)=>{\n    const { products } = form;\n    if (action.key === 'quantity' || action.key === 'amount') {\n        const foundProducts = Object.values(submissions.reduce((acc, submission)=>{\n            const { answer } = submission.answers[action.qid] || {};\n            const { paymentArray } = answer || {};\n            const { product } = paymentArray ? JSON.parse(paymentArray) : {};\n            if (!product) return acc;\n            product.forEach((p)=>{\n                var _p_split__trim, _p_split, _p_split_, _acc_productName;\n                const productName = p === null || p === void 0 ? void 0 : (_p_split = p.split('(')) === null || _p_split === void 0 ? void 0 : (_p_split__trim = (_p_split_ = _p_split[0]).trim) === null || _p_split__trim === void 0 ? void 0 : _p_split__trim.call(_p_split_);\n                const entry = products.find((e)=>e.name === productName);\n                const oldTotal = (acc === null || acc === void 0 ? void 0 : (_acc_productName = acc[productName]) === null || _acc_productName === void 0 ? void 0 : _acc_productName.total) || 0;\n                try {\n                    var _p_split__split, _p_split_1, _p_split1, _p_split__split1, _p_split_2, _p_split2, _entry_images;\n                    const count = parseFloat(action.key === 'quantity' ? p === null || p === void 0 ? void 0 : (_p_split1 = p.split('Quantity: ')) === null || _p_split1 === void 0 ? void 0 : (_p_split_1 = _p_split1[1]) === null || _p_split_1 === void 0 ? void 0 : (_p_split__split = _p_split_1.split(')')) === null || _p_split__split === void 0 ? void 0 : _p_split__split[0] : p === null || p === void 0 ? void 0 : (_p_split2 = p.split('Amount: ')) === null || _p_split2 === void 0 ? void 0 : (_p_split_2 = _p_split2[1]) === null || _p_split_2 === void 0 ? void 0 : (_p_split__split1 = _p_split_2.split(' ')) === null || _p_split__split1 === void 0 ? void 0 : _p_split__split1[0]) || 0;\n                    const total = oldTotal + count;\n                    const img = (entry === null || entry === void 0 ? void 0 : (_entry_images = entry.images) === null || _entry_images === void 0 ? void 0 : _entry_images[0]) || false;\n                    const foundProduct = {\n                        total,\n                        img,\n                        text: productName\n                    };\n                    if (action.name) {\n                        const isCurrent = action.name === productName;\n                        if (isCurrent) {\n                            acc[action.name] = foundProduct;\n                        }\n                        return;\n                    }\n                    acc[productName] = foundProduct;\n                } catch (e) {\n                    console.log({\n                        e\n                    });\n                }\n            });\n            return acc;\n        }, {}));\n        if (!(foundProducts === null || foundProducts === void 0 ? void 0 : foundProducts.length)) return 0;\n        if (foundProducts.length === 1) {\n            return foundProducts[0];\n        }\n        return foundProducts;\n    }\n    return submissions.reduce((sum, submission)=>{\n        if (!action.qid) return sum + 1;\n        const { answer } = submission.answers[action.qid] || {};\n        const { paymentArray } = answer || {};\n        const parsed = JSON.parse(paymentArray);\n        return sum + parseFloat(parsed[action.key] || 0, 10);\n    }, 0);\n};\nconst mailReducer = async (form, action, submissions)=>{\n    return Object.values(submissions.reduce((mails, s)=>{\n        var _answers_, _answers_1;\n        const { answers } = s;\n        const email = (_answers_ = answers[4]) === null || _answers_ === void 0 ? void 0 : _answers_.answer;\n        const name = (_answers_1 = answers[3]) === null || _answers_1 === void 0 ? void 0 : _answers_1.prettyFormat;\n        return _object_spread_props(_object_spread({}, mails), {\n            [email]: {\n                email,\n                name\n            }\n        });\n    }, {}));\n};\nconst downloadReducer = async (form, action, submissions)=>{\n    return submissions;\n};\nconst greetingReducer = async (form, action)=>{\n    return action.value || 'Hello';\n};\nconst reducers = {\n    sum: sumReducer,\n    mail: mailReducer,\n    greeting: greetingReducer,\n    download: downloadReducer\n};\nconst reducer = (form, actions, submissions)=>Promise.all(actions.map(async (action)=>{\n        var _reducers_action_type;\n        const value = await ((_reducers_action_type = reducers[action.type]) === null || _reducers_action_type === void 0 ? void 0 : _reducers_action_type.call(reducers, form, action, submissions));\n        const resp = _object_spread_props(_object_spread({}, action), {\n            value\n        });\n        return resp;\n    }));\nconst AssistantProvider = ({ form, children })=>{\n    const features = useFeatures();\n    if (!features.includes('assistant')) {\n        return /*#__PURE__*/ _jsx(AssistantContext.Provider, {\n            children: children\n        });\n    }\n    const { questions, products: formProducts } = form;\n    const products = useMemo(()=>{\n        var _formProducts_map;\n        return formProducts === null || formProducts === void 0 ? void 0 : (_formProducts_map = formProducts.map) === null || _formProducts_map === void 0 ? void 0 : _formProducts_map.call(formProducts, ({ name, price })=>({\n                name,\n                price\n            }));\n    }, [\n        formProducts\n    ]);\n    const abstract = useMemo(()=>{\n        return JSON.stringify(Object.values(questions).filter(shouldPrompt).map((q)=>_object_spread({\n                qid: q.qid,\n                name: q.name,\n                text: q.text,\n                type: q.type\n            }, q.type === 'control_payment' ? {\n                products\n            } : {})));\n    }, [\n        questions\n    ]);\n    const [question, setQuestion] = useState();\n    const fetcher = async (q)=>{\n        // if (!available) return;\n        if (!q) return;\n        const prompt = `${abstract}\\n\\n${samples}\\n\\nt: ${q}\\nr:`;\n        const gptResponse = await gpt3Completion({\n            prompt,\n            stop: '\\n\\n',\n            temprature: 0.9,\n            top_p: 0.2\n        }).then((resp)=>JSON.parse(resp.trim()));\n        if (!gptResponse) return;\n        const { query, actions } = gptResponse;\n        const response = query ? await getFilter(form.id, query) : false;\n        const { content: submissions = false, resultSet: { filter = false } = {} } = response || {};\n        try {\n            const result = await reducer(form, actions, submissions);\n            return {\n                query,\n                filter,\n                result,\n                actions\n            };\n        } catch (e) {\n            console.log(e);\n        }\n        return {\n            query,\n            filter,\n            actions,\n            result: null\n        };\n    };\n    const swrContext = useSwr(question, fetcher);\n    const value = _object_spread({\n        setQuestion\n    }, swrContext);\n    return /*#__PURE__*/ _jsx(AssistantContext.Provider, {\n        value: value,\n        children: children\n    });\n};\nexport const useAssistant = ()=>useContext(AssistantContext);\nAssistantProvider.propTypes = {\n    form: shape({}).isRequired,\n    children: node.isRequired\n};\nexport default AssistantProvider;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport PropTypes from 'prop-types';\nconst ContainerDiv = Styled.div`\n  position: relative;\n  z-index: 1;\n  width: ${(props)=>props.size};\n  height: ${(props)=>props.size};\n  max-width: 100px;\n  max-height: 180px;\n  display: flex;\n  justify-content: center;\n`;\nconst Container = ({ size = 'calc(10px + 5vw + 5vh)', children = null, className = '' })=>{\n    return /*#__PURE__*/ _jsx(ContainerDiv, {\n        className: className,\n        size: size,\n        children: children\n    });\n};\nexport default Container;\nContainer.propTypes = {\n    size: PropTypes.string,\n    children: PropTypes.node,\n    className: PropTypes.string\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useRef } from 'react';\nimport { string } from 'prop-types';\nimport Styled from 'styled-components';\nimport { Button as UIKitButton, Tooltip as UIKitTooltip, Hooks } from '@jotforminc/uikit';\n/* eslint-disable max-len */ const ScUIKitButton = Styled(UIKitButton)`\n  &.bare {\n    font-size: .875em;\n    color: #4170e2;\n    text-decoration: none;\n    background: transparent;\n    cursor: pointer;\n    box-shadow: none;\n    padding: 0;\n    border: 0;\n\n    &.forSettings {\n      svg {\n        vertical-align: text-bottom;\n        margin-right: 2px;\n        width: 18px;\n        height: 18px;\n\n        html[dir=\"rtl\"] & {\n          margin-right: 0;\n          margin-left: 2px;\n        }\n      }\n\n      span {\n        font-size: 16px;\n        margin-left: 4px;\n      }\n\n    }\n  }\n\n  &.taste {\n    display: inline-block;\n    padding: 12px 1em;\n    border-radius: 4px;\n    cursor: pointer;\n    text-transform: uppercase;\n    border: 0;\n    font-weight: 500;\n    font-size: 15px;\n    line-height: 14px;\n\n    &[disabled] { opacity: .6; cursor: initial; }\n  }\n\n  &.taste.isBold {\n    font-weight: bold;\n  }\n\n  &.taste.isGhost {\n    background-color: #FAFAFC;\n    border: 1px solid #ADB4D2;\n    color: #ADB4D2;\n    transition: all .3s;\n\n    &:hover {\n      color: #6F76A7;\n      border: 1px solid #ADB4D2;\n      background-color: #F3F3FE;\n    }\n  }\n\n  &.taste.isGreen {\n    background-color: #78BB07;\n    color: #fff;\n    transition: background-color .3s;\n\n    &:hover {\n      background-color: #4EB100;\n    }\n  }\n\n  &.taste.isRed {\n    background-color: #DC2626;\n    color: #fff;\n  }\n\n  &.taste.isGray {\n    background-color: #dddfe9;\n    color: #2c3345;\n  }\n\n  &.taste.isBlue {\n    background-color: #4170e2;\n    color: #fff;\n  }\n\n  &.taste.forCopy {\n    padding: 0;\n    white-space: nowrap;\n\n    svg {\n      margin-right: .5em;\n      vertical-align: -3px;\n      width: 17px;\n      height: 17px;\n    }\n    > div { padding: .5em 1em; }\n  }\n\n  &.outline {\n    display: inline-block;\n    padding: .5em 1em;\n    border-radius: 2px;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid currentColor;\n    font-size: .875em;\n    line-height: 1rem;\n    font-weight: 500;\n  }\n  &.forRevoke {\n    font-size: .875em;\n    color: #f9535c;\n    margin: 0 .5rem 0 auto;\n    padding: 0.5em 0.7em;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n\n    &:hover { background-color: #FEF2F2; }\n\n    svg {\n      width: 14px;\n      height: 14px;\n      margin-right: 4px;\n    }\n  }\n\n  @media screen and (max-width: 480px) {\n    .hom { display: none; }\n  }\n`;\n/* eslint-enable max-len */ export const ScUIKitTooltip = Styled((props)=>/*#__PURE__*/ _jsx(UIKitTooltip, _object_spread({}, props)))`\n  font-size: .75rem;\n  line-height: 1;\n  padding: .5rem .5rem;\n  text-transform: lowercase;\n  border-radius: 2px;\n  color: #fff;\n  font-weight: 400;\n  background-color: #2c3345;\n\n  &:first-letter { text-transform: uppercase; }\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 10px; height: 10px;\n    background-color: #2c3345;\n    border-radius: 1px;\n    transform: rotate(45deg);\n  }\n\n  @keyframes c { to { opacity: 1; margin-top: 2px; }}\n  @keyframes d { to { opacity: 1; margin-bottom: 2px; }}\n\n  &[data-popper-placement] {\n    z-index: 1;\n  }\n\n  &[data-popper-placement=\"bottom\"] {\n    opacity: 0; margin-top: 0px!important;\n\n    &:before { top: -4px; left: 50%; margin-left: -4px; margin-top: 6px; }\n\n    &, &:before { animation: c .1s cubic-bezier(.3,.71,.67,.58) 1 forwards; }\n  }\n\n  &[data-popper-placement=\"top\"] {\n    opacity: 0; margin-bottom: 0px!important;\n\n    &:before { bottom: -4px; left: 50%; margin-left: -4px; margin-bottom: 6px; }\n\n    &, &:before { animation: d .1s cubic-bezier(.3,.71,.67,.58) 1 forwards; }\n  }\n`;\nconst Button = /*#__PURE__*/ React.forwardRef((_param, ref)=>{\n    var { name } = _param, props = _object_without_properties(_param, [\n        \"name\"\n    ]);\n    const innerRef = useRef();\n    const combinedRef = Hooks.useCombinedRefs(innerRef, ref);\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(ScUIKitButton, _object_spread({\n                ref: combinedRef,\n                type: \"button\",\n                name: name\n            }, props)),\n            true && name && /*#__PURE__*/ _jsx(ScUIKitTooltip, {\n                targetRef: combinedRef,\n                children: name\n            })\n        ]\n    });\n});\nButton.propTypes = {\n    name: string\n};\nButton.defaultProps = {\n    name: ''\n};\nexport default Button;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { COUNTRIES, GENDERS, DAYS, MONTHS, FORM_TEXTS } from '@jotforminc/constants';\nimport { objectEntries } from '@jotforminc/utils';\nimport { fillArray, debounce, getJSON, assignObject, classNames } from './utils';\nlet lastHundredYears = [];\n(function() {\n    const date = new Date();\n    // get current year\n    const cyear = date.getYear() < 1000 ? date.getYear() + 1900 : date.getYear();\n    const years = [];\n    for(let year = cyear; year >= cyear - 100; year--){\n        years.push(`${year}`);\n    }\n    lastHundredYears = years;\n})();\nif (typeof String.prototype.locale === 'undefined') {\n    String.prototype.locale = function() {\n        return this.toString();\n    };\n}\nconst specialOptions = {\n    None: {\n        controls: 'dropdown,radio,checkbox,matrix'\n    },\n    'US States': {\n        controls: 'dropdown',\n        value: [\n            'Alabama',\n            'Alaska',\n            'Arizona',\n            'Arkansas',\n            'California',\n            'Colorado',\n            'Connecticut',\n            'Delaware',\n            'District of Columbia',\n            'Florida',\n            'Georgia',\n            'Hawaii',\n            'Idaho',\n            'Illinois',\n            'Indiana',\n            'Iowa',\n            'Kansas',\n            'Kentucky',\n            'Louisiana',\n            'Maine',\n            'Maryland',\n            'Massachusetts',\n            'Michigan',\n            'Minnesota',\n            'Mississippi',\n            'Missouri',\n            'Montana',\n            'Nebraska',\n            'Nevada',\n            'New Hampshire',\n            'New Jersey',\n            'New Mexico',\n            'New York',\n            'North Carolina',\n            'North Dakota',\n            'Ohio',\n            'Oklahoma',\n            'Oregon',\n            'Pennsylvania',\n            'Puerto Rico',\n            'Rhode Island',\n            'South Carolina',\n            'South Dakota',\n            'Tennessee',\n            'Texas',\n            'Utah',\n            'Vermont',\n            'Virgin Islands',\n            'Virginia',\n            'Washington',\n            'West Virginia',\n            'Wisconsin',\n            'Wyoming'\n        ]\n    },\n    'US States Abbr': {\n        controls: 'dropdown',\n        value: [\n            'AL',\n            'AK',\n            'AR',\n            'AZ',\n            'CA',\n            'CO',\n            'CT',\n            'DC',\n            'DE',\n            'FL',\n            'GA',\n            'HI',\n            'ID',\n            'IL',\n            'IN',\n            'IA',\n            'KS',\n            'KY',\n            'LA',\n            'ME',\n            'MD',\n            'MA',\n            'MI',\n            'MN',\n            'MS',\n            'MO',\n            'MT',\n            'NE',\n            'NV',\n            'NH',\n            'NJ',\n            'NM',\n            'NY',\n            'NC',\n            'ND',\n            'OH',\n            'OK',\n            'OR',\n            'PA',\n            'PR',\n            'RI',\n            'SC',\n            'SD',\n            'TN',\n            'TX',\n            'UT',\n            'VT',\n            'VI',\n            'VA',\n            'WA',\n            'WV',\n            'WI',\n            'WY'\n        ]\n    },\n    'Canadian Provinces': {\n        controls: 'dropdown',\n        value: [\n            'Alberta',\n            'British Columbia',\n            'Manitoba',\n            'New Brunswick',\n            'Newfoundland',\n            'Northwest Territories',\n            'Nova Scotia',\n            'Nunavut',\n            'Ontario',\n            'Prince Edward Island',\n            'Quebec',\n            'Saskatchewan',\n            'Yukon'\n        ]\n    },\n    Countries: {\n        controls: 'dropdown',\n        value: COUNTRIES.map((country)=>country.locale())\n    },\n    'Last 100 Years': {\n        controls: 'dropdown',\n        value: lastHundredYears\n    },\n    Gender: {\n        controls: 'dropdown,radio,checkbox',\n        value: GENDERS.map((gender)=>gender.locale())\n    },\n    Days: {\n        controls: 'dropdown,radio,checkbox',\n        value: DAYS.map((day)=>day.locale())\n    },\n    Months: {\n        controls: 'dropdown,radio,checkbox',\n        value: MONTHS.map((month)=>month.locale()),\n        nonLocale: MONTHS\n    },\n    'Time Zones': {\n        controls: 'dropdown',\n        value: [\n            '[[Africa]]',\n            'Abidjan (GMT)',\n            'Accra (GMT)',\n            'Addis Ababa (GMT+03:00)',\n            'Algiers (GMT+01:00)',\n            'Asmara (GMT+03:00)',\n            'Bamako (GMT)',\n            'Bangui (GMT+01:00)',\n            'Banjul (GMT)',\n            'Bissau (GMT)',\n            'Blantyre (GMT+02:00)',\n            'Brazzaville (GMT+01:00)',\n            'Bujumbura (GMT+02:00)',\n            'Cairo (GMT+03:00)',\n            'Casablanca (GMT)',\n            'Ceuta (GMT+02:00)',\n            'Conakry (GMT)',\n            'Dakar (GMT)',\n            'Dar es Salaam (GMT+03:00)',\n            'Djibouti (GMT+03:00)',\n            'Douala (GMT+01:00)',\n            'El Aaiun (GMT)',\n            'Freetown (GMT)',\n            'Gaborone (GMT+02:00)',\n            'Harare (GMT+02:00)',\n            'Johannesburg (GMT+02:00)',\n            'Kampala (GMT+03:00)',\n            'Khartoum (GMT+03:00)',\n            'Kigali (GMT+02:00)',\n            'Kinshasa (GMT+01:00)',\n            'Lagos (GMT+01:00)',\n            'Libreville (GMT+01:00)',\n            'Lome (GMT)',\n            'Luanda (GMT+01:00)',\n            'Lubumbashi (GMT+02:00)',\n            'Lusaka (GMT+02:00)',\n            'Malabo (GMT+01:00)',\n            'Maputo (GMT+02:00)',\n            'Maseru (GMT+02:00)',\n            'Mbabane (GMT+02:00)',\n            'Mogadishu (GMT+03:00)',\n            'Monrovia (GMT)',\n            'Nairobi (GMT+03:00)',\n            'Ndjamena (GMT+01:00)',\n            'Niamey (GMT+01:00)',\n            'Nouakchott (GMT)',\n            'Ouagadougou (GMT)',\n            'Porto-Novo (GMT+01:00)',\n            'Sao Tome (GMT)',\n            'Tripoli (GMT+02:00)',\n            'Tunis (GMT+02:00)',\n            'Windhoek (GMT+01:00)',\n            '[[America]]',\n            'Adak (GMT-09:00)',\n            'Anchorage (GMT-08:00)',\n            'Anguilla (GMT-04:00)',\n            'Antigua (GMT-04:00)',\n            'Araguaina (GMT-03:00)',\n            'Buenos Aires, Argentina (GMT-03:00)',\n            'Catamarca, Argentina (GMT-03:00)',\n            'Cordoba, Argentina (GMT-03:00)',\n            'Jujuy, Argentina (GMT-03:00)',\n            'La Rioja, Argentina (GMT-03:00)',\n            'Mendoza, Argentina (GMT-03:00)',\n            'Rio Gallegos, Argentina (GMT-03:00)',\n            'Salta, Argentina (GMT-03:00)',\n            'San Juan, Argentina (GMT-03:00)',\n            'San Luis, Argentina (GMT-04:00)',\n            'Tucuman, Argentina (GMT-03:00)',\n            'Ushuaia, Argentina (GMT-03:00)',\n            'Aruba (GMT-04:00)',\n            'Asuncion (GMT-04:00)',\n            'Atikokan (GMT-05:00)',\n            'Bahia (GMT-03:00)',\n            'Barbados (GMT-04:00)',\n            'Belem (GMT-03:00)',\n            'Belize (GMT-06:00)',\n            'Blanc-Sablon (GMT-04:00)',\n            'Boa Vista (GMT-04:00)',\n            'Bogota (GMT-05:00)',\n            'Boise (GMT-06:00)',\n            'Cambridge Bay (GMT-06:00)',\n            'Campo Grande (GMT-04:00)',\n            'Cancun (GMT-05:00)',\n            'Caracas (GMT-04:30)',\n            'Cayenne (GMT-03:00)',\n            'Cayman (GMT-05:00)',\n            'Chicago (GMT-05:00)',\n            'Chihuahua (GMT-06:00)',\n            'Costa Rica (GMT-06:00)',\n            'Cuiaba (GMT-04:00)',\n            'Curacao (GMT-04:00)',\n            'Danmarkshavn (GMT)',\n            'Dawson (GMT-07:00)',\n            'Dawson Creek (GMT-07:00)',\n            'Denver (GMT-06:00)',\n            'Detroit (GMT-04:00)',\n            'Dominica (GMT-04:00)',\n            'Edmonton (GMT-06:00)',\n            'Eirunepe (GMT-04:00)',\n            'El Salvador (GMT-06:00)',\n            'Fortaleza (GMT-03:00)',\n            'Glace Bay (GMT-03:00)',\n            'Godthab (GMT-02:00)',\n            'Goose Bay (GMT-03:00)',\n            'Grand Turk (GMT-04:00)',\n            'Grenada (GMT-04:00)',\n            'Guadeloupe (GMT-04:00)',\n            'Guatemala (GMT-06:00)',\n            'Guayaquil (GMT-05:00)',\n            'Guyana (GMT-04:00)',\n            'Halifax (GMT-03:00)',\n            'Havana (GMT-04:00)',\n            'Hermosillo (GMT-07:00)',\n            'Indianapolis, Indiana (GMT-04:00)',\n            'Knox, Indiana (GMT-05:00)',\n            'Marengo, Indiana (GMT-04:00)',\n            'Petersburg, Indiana (GMT-04:00)',\n            'Tell City, Indiana (GMT-05:00)',\n            'Vevay, Indiana (GMT-04:00)',\n            'Vincennes, Indiana (GMT-04:00)',\n            'Winamac, Indiana (GMT-04:00)',\n            'Inuvik (GMT-06:00)',\n            'Iqaluit (GMT-04:00)',\n            'Jamaica (GMT-05:00)',\n            'Juneau (GMT-08:00)',\n            'Louisville, Kentucky (GMT-04:00)',\n            'Monticello, Kentucky (GMT-04:00)',\n            'La Paz (GMT-04:00)',\n            'Lima (GMT-05:00)',\n            'Los Angeles (GMT-07:00)',\n            'Maceio (GMT-03:00)',\n            'Managua (GMT-06:00)',\n            'Manaus (GMT-04:00)',\n            'Marigot (GMT-04:00)',\n            'Martinique (GMT-04:00)',\n            'Mazatlan (GMT-06:00)',\n            'Menominee (GMT-05:00)',\n            'Merida (GMT-05:00)',\n            'Mexico City (GMT-05:00)',\n            'Miquelon (GMT-02:00)',\n            'Moncton (GMT-03:00)',\n            'Monterrey (GMT-05:00)',\n            'Montevideo (GMT-03:00)',\n            'Montreal (GMT-04:00)',\n            'Montserrat (GMT-04:00)',\n            'Nassau (GMT-04:00)',\n            'New York (GMT-04:00)',\n            'Nipigon (GMT-04:00)',\n            'Nome (GMT-08:00)',\n            'Noronha (GMT-02:00)',\n            'Center, North Dakota (GMT-05:00)',\n            'New Salem, North Dakota (GMT-05:00)',\n            'Panama (GMT-05:00)',\n            'Pangnirtung (GMT-04:00)',\n            'Paramaribo (GMT-03:00)',\n            'Phoenix (GMT-07:00)',\n            'Port-au-Prince (GMT-05:00)',\n            'Port of Spain (GMT-04:00)',\n            'Porto Velho (GMT-04:00)',\n            'Puerto Rico (GMT-04:00)',\n            'Rainy River (GMT-05:00)',\n            'Rankin Inlet (GMT-05:00)',\n            'Recife (GMT-03:00)',\n            'Regina (GMT-06:00)',\n            'Resolute (GMT-05:00)',\n            'Rio Branco (GMT-04:00)',\n            'Santarem (GMT-03:00)',\n            'Santiago (GMT-04:00)',\n            'Santo Domingo (GMT-04:00)',\n            'Sao Paulo (GMT-03:00)',\n            'Scoresbysund (GMT)',\n            'Shiprock (GMT-06:00)',\n            'St Barthelemy (GMT-04:00)',\n            'St Johns (GMT-02:30)',\n            'St Kitts (GMT-04:00)',\n            'St Lucia (GMT-04:00)',\n            'St Thomas (GMT-04:00)',\n            'St Vincent (GMT-04:00)',\n            'Swift Current (GMT-06:00)',\n            'Tegucigalpa (GMT-06:00)',\n            'Thule (GMT-03:00)',\n            'Thunder Bay (GMT-04:00)',\n            'Tijuana (GMT-07:00)',\n            'Toronto (GMT-04:00)',\n            'Tortola (GMT-04:00)',\n            'Vancouver (GMT-07:00)',\n            'Whitehorse (GMT-07:00)',\n            'Winnipeg (GMT-05:00)',\n            'Yakutat (GMT-08:00)',\n            'Yellowknife (GMT-06:00)',\n            '[[Antarctica]]',\n            'Casey (GMT+11:00)',\n            'Davis (GMT+05:00)',\n            'DumontDUrville (GMT+10:00)',\n            'Mawson (GMT+05:00)',\n            'McMurdo (GMT+12:00)',\n            'Palmer (GMT-04:00)',\n            'Rothera (GMT-03:00)',\n            'South Pole (GMT+12:00)',\n            'Syowa (GMT+03:00)',\n            'Vostok (GMT+06:00)',\n            '[[Arctic]]',\n            'Longyearbyen (GMT+02:00)',\n            '[[Asia]]',\n            'Aden (GMT+03:00)',\n            'Almaty (GMT+06:00)',\n            'Amman (GMT+03:00)',\n            'Anadyr (GMT+13:00)',\n            'Aqtau (GMT+05:00)',\n            'Aqtobe (GMT+05:00)',\n            'Ashgabat (GMT+05:00)',\n            'Baghdad (GMT+03:00)',\n            'Bahrain (GMT+03:00)',\n            'Baku (GMT+05:00)',\n            'Bangkok (GMT+07:00)',\n            'Beirut (GMT+03:00)',\n            'Bishkek (GMT+06:00)',\n            'Brunei (GMT+08:00)',\n            'Choibalsan (GMT+08:00)',\n            'Chongqing (GMT+08:00)',\n            'Colombo (GMT+05:30)',\n            'Damascus (GMT+03:00)',\n            'Dhaka (GMT+07:00)',\n            'Dili (GMT+09:00)',\n            'Dubai (GMT+04:00)',\n            'Dushanbe (GMT+05:00)',\n            'Gaza (GMT+03:00)',\n            'Harbin (GMT+08:00)',\n            'Ho Chi Minh (GMT+07:00)',\n            'Hong Kong (GMT+08:00)',\n            'Hovd (GMT+07:00)',\n            'Irkutsk (GMT+09:00)',\n            'Jakarta (GMT+07:00)',\n            'Jayapura (GMT+09:00)',\n            'Jerusalem (GMT+03:00)',\n            'Kabul (GMT+04:30)',\n            'Kamchatka (GMT+13:00)',\n            'Karachi (GMT+06:00)',\n            'Kashgar (GMT+08:00)',\n            'Kathmandu (GMT+05:45)',\n            'Kolkata (GMT+05:30)',\n            'Krasnoyarsk (GMT+08:00)',\n            'Kuala Lumpur (GMT+08:00)',\n            'Kuching (GMT+08:00)',\n            'Kuwait (GMT+03:00)',\n            'Macau (GMT+08:00)',\n            'Magadan (GMT+12:00)',\n            'Makassar (GMT+08:00)',\n            'Manila (GMT+08:00)',\n            'Muscat (GMT+04:00)',\n            'Nicosia (GMT+03:00)',\n            'Novokuznetsk (GMT+07:00)',\n            'Novosibirsk (GMT+07:00)',\n            'Omsk (GMT+07:00)',\n            'Oral (GMT+05:00)',\n            'Phnom Penh (GMT+07:00)',\n            'Pontianak (GMT+07:00)',\n            'Pyongyang (GMT+09:00)',\n            'Qatar (GMT+03:00)',\n            'Qyzylorda (GMT+06:00)',\n            'Rangoon (GMT+06:30)',\n            'Riyadh (GMT+03:00)',\n            'Sakhalin (GMT+11:00)',\n            'Samarkand (GMT+05:00)',\n            'Seoul (GMT+09:00)',\n            'Shanghai (GMT+08:00)',\n            'Singapore (GMT+08:00)',\n            'Taipei (GMT+08:00)',\n            'Tashkent (GMT+05:00)',\n            'Tbilisi (GMT+04:00)',\n            'Tehran (GMT+04:30)',\n            'Thimphu (GMT+06:00)',\n            'Tokyo (GMT+09:00)',\n            'Ulaanbaatar (GMT+08:00)',\n            'Urumqi (GMT+08:00)',\n            'Vientiane (GMT+07:00)',\n            'Vladivostok (GMT+11:00)',\n            'Yakutsk (GMT+10:00)',\n            'Yekaterinburg (GMT+06:00)',\n            'Yerevan (GMT+05:00)',\n            '[[Atlantic]]',\n            'Azores (GMT)',\n            'Bermuda (GMT-03:00)',\n            'Canary (GMT+01:00)',\n            'Cape Verde (GMT-01:00)',\n            'Faroe (GMT+01:00)',\n            'Madeira (GMT+01:00)',\n            'Reykjavik (GMT)',\n            'South Georgia (GMT-02:00)',\n            'St Helena (GMT)',\n            'Stanley (GMT-04:00)',\n            '[[Australia]]',\n            'Adelaide (GMT+09:30)',\n            'Brisbane (GMT+10:00)',\n            'Broken Hill (GMT+09:30)',\n            'Currie (GMT+10:00)',\n            'Darwin (GMT+09:30)',\n            'Eucla (GMT+08:45)',\n            'Hobart (GMT+10:00)',\n            'Lindeman (GMT+10:00)',\n            'Lord Howe (GMT+10:30)',\n            'Melbourne (GMT+10:00)',\n            'Perth (GMT+08:00)',\n            'Sydney (GMT+10:00)',\n            '[[Europe]]',\n            'Amsterdam (GMT+02:00)',\n            'Andorra (GMT+02:00)',\n            'Athens (GMT+03:00)',\n            'Belgrade (GMT+02:00)',\n            'Berlin (GMT+02:00)',\n            'Bratislava (GMT+02:00)',\n            'Brussels (GMT+02:00)',\n            'Bucharest (GMT+03:00)',\n            'Budapest (GMT+02:00)',\n            'Chisinau (GMT+03:00)',\n            'Copenhagen (GMT+02:00)',\n            'Dublin (GMT+01:00)',\n            'Gibraltar (GMT+02:00)',\n            'Guernsey (GMT+01:00)',\n            'Helsinki (GMT+03:00)',\n            'Isle of Man (GMT+01:00)',\n            'Istanbul (GMT+03:00)',\n            'Jersey (GMT+01:00)',\n            'Kaliningrad (GMT+03:00)',\n            'Kiev (GMT+03:00)',\n            'Lisbon (GMT+01:00)',\n            'Ljubljana (GMT+02:00)',\n            'London (GMT+01:00)',\n            'Luxembourg (GMT+02:00)',\n            'Madrid (GMT+02:00)',\n            'Malta (GMT+02:00)',\n            'Mariehamn (GMT+03:00)',\n            'Minsk (GMT+03:00)',\n            'Monaco (GMT+02:00)',\n            'Moscow (GMT+04:00)',\n            'Oslo (GMT+02:00)',\n            'Paris (GMT+02:00)',\n            'Podgorica (GMT+02:00)',\n            'Prague (GMT+02:00)',\n            'Riga (GMT+03:00)',\n            'Rome (GMT+02:00)',\n            'Samara (GMT+05:00)',\n            'San Marino (GMT+02:00)',\n            'Sarajevo (GMT+02:00)',\n            'Simferopol (GMT+03:00)',\n            'Skopje (GMT+02:00)',\n            'Sofia (GMT+03:00)',\n            'Stockholm (GMT+02:00)',\n            'Tallinn (GMT+03:00)',\n            'Tirane (GMT+02:00)',\n            'Uzhgorod (GMT+03:00)',\n            'Vaduz (GMT+02:00)',\n            'Vatican (GMT+02:00)',\n            'Vienna (GMT+02:00)',\n            'Vilnius (GMT+03:00)',\n            'Volgograd (GMT+04:00)',\n            'Warsaw (GMT+02:00)',\n            'Zagreb (GMT+02:00)',\n            'Zaporozhye (GMT+03:00)',\n            'Zurich (GMT+02:00)',\n            '[[Indian]]',\n            'Antananarivo (GMT+03:00)',\n            'Chagos (GMT+06:00)',\n            'Christmas (GMT+07:00)',\n            'Cocos (GMT+06:30)',\n            'Comoro (GMT+03:00)',\n            'Kerguelen (GMT+05:00)',\n            'Mahe (GMT+04:00)',\n            'Maldives (GMT+05:00)',\n            'Mauritius (GMT+04:00)',\n            'Mayotte (GMT+03:00)',\n            'Reunion (GMT+04:00)',\n            '[[Pacific]]',\n            'Apia (GMT-11:00)',\n            'Auckland (GMT+12:00)',\n            'Chatham (GMT+12:45)',\n            'Easter (GMT-06:00)',\n            'Efate (GMT+11:00)',\n            'Enderbury (GMT+13:00)',\n            'Fakaofo (GMT-10:00)',\n            'Fiji (GMT+12:00)',\n            'Funafuti (GMT+12:00)',\n            'Galapagos (GMT-06:00)',\n            'Gambier (GMT-09:00)',\n            'Guadalcanal (GMT+11:00)',\n            'Guam (GMT+10:00)',\n            'Honolulu (GMT-10:00)',\n            'Johnston (GMT-10:00)',\n            'Kiritimati (GMT+14:00)',\n            'Kosrae (GMT+11:00)',\n            'Kwajalein (GMT+12:00)',\n            'Majuro (GMT+12:00)',\n            'Marquesas (GMT-09:30)',\n            'Midway (GMT-11:00)',\n            'Nauru (GMT+12:00)',\n            'Niue (GMT-11:00)',\n            'Norfolk (GMT+11:30)',\n            'Noumea (GMT+11:00)',\n            'Pago Pago (GMT-11:00)',\n            'Palau (GMT+09:00)',\n            'Pitcairn (GMT-08:00)',\n            'Ponape (GMT+11:00)',\n            'Port Moresby (GMT+10:00)',\n            'Rarotonga (GMT-10:00)',\n            'Saipan (GMT+10:00)',\n            'Tahiti (GMT-10:00)',\n            'Tarawa (GMT+12:00)',\n            'Tongatapu (GMT+13:00)',\n            'Truk (GMT+10:00)',\n            'Wake (GMT+12:00)',\n            'Wallis (GMT+12:00)'\n        ]\n    },\n    LocationCountries: {\n        controls: 'location',\n        value: [\n            'Canada',\n            'United States',\n            'Afghanistan',\n            'Albania',\n            'Algeria',\n            'American Samoa',\n            'Andorra',\n            'Angola',\n            'Anguilla',\n            'Antarctica',\n            'Antigua and Barbuda',\n            'Argentina',\n            'Armenia',\n            'Aruba',\n            'Australia',\n            'Austria',\n            'Azerbaijan',\n            'Bahamas',\n            'Bahrain',\n            'Bangladesh',\n            'Barbados',\n            'Belarus',\n            'Belgium',\n            'Belize',\n            'Benin',\n            'Bermuda',\n            'Bhutan',\n            'Bolivia',\n            'Bosnia Herzegowina',\n            'Botswana',\n            'Bouvet Island',\n            'Brazil',\n            'British Ind. Ocean',\n            'Brunei Darussalam',\n            'Bulgaria',\n            'Burkina Faso',\n            'Burundi',\n            'Cambodia',\n            'Cameroon',\n            'Cape Verde',\n            'Cayman Islands',\n            'Central African Rep.',\n            'Chad',\n            'Chile',\n            'China',\n            'Christmas Island',\n            'Cocoa (Keeling) Is.',\n            'Colombia',\n            'Comoros',\n            'Congo',\n            'Cook Islands',\n            'Costa Rica',\n            'Cote Divoire',\n            'Croatia',\n            'Cuba',\n            'Curacao',\n            'Cyprus',\n            'Czech Republic',\n            'Denmark',\n            'Djibouti',\n            'Dominica',\n            'Dominican Republic',\n            'East Timor',\n            'Ecuador',\n            'Egypt',\n            'El Salvador',\n            'Equatorial Guinea',\n            'Eritrea',\n            'Estonia',\n            'Ethiopia',\n            'Falkland Islands',\n            'Faroe Islands',\n            'Fiji',\n            'Finland',\n            'France',\n            'Gabon',\n            'Gambia',\n            'Georgia',\n            'Germany',\n            'Ghana',\n            'Gibraltar',\n            'Greece',\n            'Greenland',\n            'Grenada',\n            'Guadeloupe',\n            'Guam',\n            'Guatemala',\n            'Guinea',\n            'Guinea-Bissau',\n            'Guyana',\n            'Haiti',\n            'Honduras',\n            'Hong Kong',\n            'Hungary',\n            'Iceland',\n            'India',\n            'Indonesia',\n            'Iran',\n            'Iraq',\n            'Ireland',\n            'Israel',\n            'Italy',\n            'Jamaica',\n            'Japan',\n            'Jordan',\n            'Kazakhstan',\n            'Kenya',\n            'Kiribati',\n            'Korea',\n            'Kuwait',\n            'Kyrgyzstan',\n            'Lao',\n            'Latvia',\n            'Lebanon',\n            'Lesotho',\n            'Liberia',\n            'Liechtenstein',\n            'Lithuania',\n            'Luxembourg',\n            'Macau',\n            'Macedonia',\n            'Madagascar',\n            'Malawi',\n            'Malaysia',\n            'Maldives',\n            'Mali',\n            'Malta',\n            'Marshall Islands',\n            'Martinique',\n            'Mauritania',\n            'Mauritius',\n            'Mayotte',\n            'Mexico',\n            'Micronesia',\n            'Moldova',\n            'Monaco',\n            'Mongolia',\n            'Montserrat',\n            'Morocco',\n            'Mozambique',\n            'Myanmar',\n            'Namibia',\n            'Nauru',\n            'Nepal',\n            'Netherlands',\n            'New Caledonia',\n            'New Zealand',\n            'Nicaragua',\n            'Niger',\n            'Nigeria',\n            'Niue',\n            'Norfolk Island',\n            'Norway',\n            'Oman',\n            'Pakistan',\n            'Palau',\n            'Panama',\n            'Papua New Guinea',\n            'Paraguay',\n            'Peru',\n            'Philippines',\n            'Pitcairn',\n            'Poland',\n            'Portugal',\n            'Puerto Rico',\n            'Qatar',\n            'Reunion',\n            'Romania',\n            'Russia',\n            'Rwanda',\n            'Saint Lucia',\n            'Samoa',\n            'San Marino',\n            'Saudi Arabia',\n            'Senegal',\n            'Seychelles',\n            'Sierra Leone',\n            'Singapore',\n            'Slovakia',\n            'Solomon Islands',\n            'Somalia',\n            'South Africa',\n            'South Sudan',\n            'Spain',\n            'Sri Lanka',\n            'St. Helena',\n            'Sudan',\n            'Suriname',\n            'eSwatini',\n            'Sweden',\n            'Switzerland',\n            'Syria',\n            'Taiwan',\n            'Tajikistan',\n            'Tanzania',\n            'Thailand',\n            'Togo',\n            'Tokelau',\n            'Tonga',\n            'Trinidad and Tobago',\n            'Tunisia',\n            'Turkey',\n            'Turkmenistan',\n            'Tuvalu',\n            'Uganda',\n            'Ukraine',\n            'United Arab Emirates',\n            'United Kingdom',\n            'Uruguay',\n            'Uzbekistan',\n            'Vanuatu',\n            'Vatican',\n            'Venezuela',\n            'Viet Nam',\n            'Virgin Islands',\n            'Western Sahara',\n            'Yeman',\n            'Yugoslavia',\n            'Zaire',\n            'Zambia'\n        ]\n    },\n    /* eslint max-len:1 */ /**\n   * Gets the special options for specific element\n   * @example special_options.getByType('dropdown') => ['Months', 'Days', 'US States' .... ]\n   * @param {Object} type\n   */ getByType (type) {\n        const options = [];\n        for(const key in specialOptions){\n            if (specialOptions[key].controls && specialOptions[key].controls.indexOf(type) >= 0) {\n                options.push(key);\n            }\n        }\n        return options;\n    }\n};\nexport const checkAppointmentAvailability = (day, slot, data)=>{\n    if (!(day && slot && data && data[day])) return false;\n    return data[day][slot];\n};\nexport const initializeAppointment = (props)=>{\n    const PREFIX = window.location.href.indexOf('jotform.pro') > -1 || window.location.pathname.indexOf('build') > -1 || window.location.pathname.indexOf('form-templates') > -1 || window.location.pathname.indexOf('pdf-templates') > -1 || window.location.pathname.indexOf('table-templates') > -1 || window.location.pathname.indexOf('approval-templates') > -1 || window.location.pathname.indexOf('themes') > -1 ? '/server.php' : JotForm.server;\n    // boilerplate\n    let effectsOut = null;\n    let changed = {};\n    let constructed = false;\n    const { document } = window;\n    const wrapper = document.querySelector(`#${props.qid.value}`);\n    const uniqueId = props.qid.value;\n    const element = wrapper.querySelector('.appointmentField');\n    const input = wrapper.querySelector(`#input_${props.id.value}_date`);\n    const tzInput = wrapper.querySelector(`#input_${props.id.value}_timezone`);\n    const currentYear = new Date().getFullYear();\n    let timezonePickerCommon;\n    let isTimezonePickerFromCommonLoaded = false;\n    const beforeRender = ()=>{\n        if (effectsOut) {\n            effectsOut();\n            effectsOut = null;\n        }\n    };\n    const afterRender = ()=>{\n        effectsOut = effects();\n    };\n    const setState = (newState)=>{\n        const changedKeys = Object.keys(newState).filter((key)=>state[key] !== newState[key]);\n        if (!changedKeys.length) {\n            return;\n        }\n        changed = changedKeys.reduce((acc, key)=>assignObject({}, acc, {\n                [key]: state[key]\n            }), changed);\n        state = assignObject({}, state, newState);\n        if (constructed) {\n            render();\n        }\n    };\n    const isStartWeekOnMonday = ()=>{\n        const { startWeekOn: { value: startDay } } = props;\n        return !startDay || startDay === 'Monday';\n    };\n    const monthNames = ()=>(JotForm.appointmentCalendarMonthsTranslated || JotForm.appointmentCalendarMonths || JotForm.calendarMonthsTranslated || JotForm.calendarMonths || specialOptions.Months.value).map((monthName)=>String.prototype.locale ? monthName.locale() : monthName);\n    const daysOfWeek = ()=>(JotForm.appointmentCalendarDaysTranslated || JotForm.appointmentCalendarDays || specialOptions.Days.value).map((dayName)=>String.prototype.locale ? dayName.locale() : dayName);\n    // we need remove unnecessary \"Sunday\", if there is time field on the form\n    const dayNames = ()=>{\n        const days = daysOfWeek().length === 8 ? daysOfWeek().slice(1) : daysOfWeek();\n        return isStartWeekOnMonday() ? days : [\n            days[days.length - 1]\n        ].concat(days.slice(0, 6));\n    };\n    const oneHour = 1000 * 60 * 60;\n    // const oneDay = oneHour * 24;\n    const intPrefix = (d)=>{\n        if (d < 10) {\n            return `0${d}`;\n        }\n        return `${d}`;\n    };\n    const toFormattedDateStr = (date)=>{\n        const { dateFormat: { value: format = 'yyyy-mm-dd' } } = props;\n        if (!date) return;\n        if (typeof date === 'string') {\n            const [year, month, day] = date.split('-');\n            return format.replace(/yyyy/, year).replace(/mm/, month).replace(/dd/, day);\n        }\n        const year = date.getFullYear();\n        const month = intPrefix(date.getMonth() + 1);\n        const day = intPrefix(date.getUTCDate());\n        return format.replace(/yyyy/, year).replace(/mm/, month).replace(/dd/, day);\n    };\n    const toDateStr = (date)=>{\n        if (!date) return;\n        const year = date.getFullYear();\n        const month = intPrefix(date.getMonth() + 1);\n        const day = intPrefix(date.getDate());\n        return `${year}-${month}-${day}`;\n    };\n    const toDateTimeStr = (date)=>{\n        if (!date) return;\n        const ymd = toDateStr(date);\n        const hour = intPrefix(date.getHours());\n        const minute = intPrefix(date.getMinutes());\n        return `${ymd} ${hour}:${minute}`;\n    };\n    const getTimezoneOffset = (timezone)=>{\n        if (!timezone) {\n            return 0;\n        }\n        const cityArgs = timezone.split(' ');\n        const splitted = cityArgs[cityArgs.length - 1].replace(/\\(GMT|\\)/g, '').split(':');\n        if (!splitted) {\n            return 0;\n        }\n        return parseInt(splitted[0] || 0, 10) + (parseInt(splitted[1] || 0, 10) / 60 || 0);\n    };\n    const getGMTSuffix = (offset)=>{\n        if (offset === 0) {\n            return '';\n        }\n        const offsetMinutes = Math.abs(offset) % 60;\n        const offsetHours = Math.abs(offset - offsetMinutes) / 60;\n        const str = `${intPrefix(offsetHours)}:${intPrefix(offsetMinutes)}`;\n        if (offset < 0) {\n            return `+${str}`;\n        }\n        return `-${str}`;\n    };\n    const getYearMonth = (date)=>{\n        if (!date) return;\n        const [y, m] = date.split('-');\n        return `${y}-${m}`;\n    };\n    const getMondayBasedDay = (date)=>{\n        const day = date.getUTCDay();\n        if (day === 0) {\n            return 6; // sunday index\n        }\n        return day - 1;\n    };\n    const getDay = (date)=>{\n        return isStartWeekOnMonday() ? getMondayBasedDay(date) : date.getUTCDay();\n    };\n    const getUserTimezone = ()=>{\n        const { autoDetectTimezone: { value: autoDetectValue } = {}, timezone: { value: timezoneAtProps } = {} } = props;\n        if (autoDetectValue === 'No') {\n            return timezoneAtProps;\n        }\n        try {\n            const tzStr = Intl.DateTimeFormat().resolvedOptions().timeZone;\n            if (tzStr) {\n                const tz = `${tzStr} (GMT${getGMTSuffix(new Date().getTimezoneOffset())})`;\n                return tz;\n            }\n        } catch (e) {\n            console.error(e.message);\n        }\n        return props.timezone.value;\n    };\n    const convertStrToTime = ({ dateStr = '', value = '' })=>{\n        const calculateVal = toFormattedDateStr(dateStr);\n        const { timeFormat: { value: timeFormat = '24 Hour' } = {} } = props;\n        const date = new Date(dateStr);\n        const time = new Date(value.replace(/-/g, '/')).toLocaleTimeString('en-US', {\n            hour: 'numeric',\n            minute: 'numeric',\n            hourCycle: timeFormat === 'AM/PM' ? 'h12' : 'h23'\n        });\n        const day = getDay(date);\n        const specialDays = specialOptions.Days.value;\n        const datetime = `${dayNames()[day]}, ${monthNames()[date.getUTCMonth()]} ${intPrefix(date.getUTCDate())}, ${date.getFullYear()}`;\n        const unTranslatedDatetime = `${isStartWeekOnMonday() ? specialDays[day] : [\n            specialDays[specialDays.length - 1]\n        ].concat(specialDays.slice(0, 6))[day]}, ${specialOptions.Months.value[date.getUTCMonth()]} ${intPrefix(date.getUTCDate())}, ${date.getFullYear()}`;\n        return {\n            calculateVal,\n            time,\n            datetime,\n            unTranslatedDatetime\n        };\n    };\n    const hasDatePassed = (givenDateString, comparedDateString = new Date())=>{\n        // Parse the given date string and create a date object\n        const givenDate = new Date(givenDateString);\n        const comparedDate = new Date(comparedDateString);\n        // Get today's date with time set to 00:00:00 for accurate comparison\n        comparedDate.setHours(0, 0, 0, 0);\n        return givenDate < comparedDate;\n    };\n    const passedProps = props;\n    let state = {};\n    const getStateFromProps = (newProps = {})=>{\n        const { timezone: { value: timezoneValue } } = newProps;\n        const startDate = new Date(newProps.startDate ? newProps.startDate.value : '');\n        const today = new Date();\n        const date = toDateStr(new Date(Math.max(startDate, today) || today));\n        return _object_spread({\n            date,\n            timezones: state ? state.timezones : {\n                loading: true\n            }\n        }, window.location.pathname.indexOf('build') > -1 ? {\n            timezone: timezoneValue,\n            defaultTimezone: timezoneValue\n        } : {});\n    };\n    state = getStateFromProps(props);\n    const loadTimezones = (cb)=>{\n        var _props_cdnconfig;\n        setState({\n            timezones: {\n                loading: true\n            }\n        });\n        const cdnUrl = ((_props_cdnconfig = props.cdnconfig) === null || _props_cdnconfig === void 0 ? void 0 : _props_cdnconfig.CDN.endsWith('/')) ? props.cdnconfig.CDN : `${props.cdnconfig.CDN}/`;\n        getJSON(`${cdnUrl}assets/form/timezones.json?ncTz=${new Date().getTime()}`).then((data)=>{\n            const timezones = objectEntries(data).reduce((acc, [group, cities])=>{\n                acc.push({\n                    group,\n                    cities\n                });\n                return acc;\n            }, []);\n            cb(timezones);\n        });\n    };\n    const loadMonthData = (startDate, endDate, cb)=>{\n        const { formID = typeof global === 'object' ? global.__formInfo.id : null, id: { value: id } } = props;\n        const { timezone } = state;\n        if (!formID || !timezone) return;\n        // eslint-disable-next-line max-len\n        const url = `${PREFIX}?action=getAppointments&formID=${formID}&qid=${id}&timezone=${encodeURIComponent(timezone)}&startDate=${toDateStr(startDate)}&endDate=${toDateStr(endDate)}&ncTz=${new Date().getTime()}`;\n        return getJSON(url).then(({ content: data })=>cb(data));\n    };\n    const getMonthData = (startDate, endDate)=>{\n        let returnData = null;\n        const res = loadMonthData(startDate, endDate, (data)=>{\n            returnData = data;\n        });\n        function _wait(resolve, reject) {\n            if (res._complete) {\n                resolve(returnData);\n            } else {\n                setTimeout(_wait.bind(this, resolve, reject), 100);\n            }\n        }\n        return new Promise(_wait);\n    };\n    const generateMonthData = (startDate, endDate, data)=>{\n        const d1 = startDate.getDate();\n        const d2 = endDate.getDate();\n        const dPrefix = `${startDate.getFullYear()}-${intPrefix(startDate.getMonth() + 1)}-`;\n        const daysLength = d2 - d1 + 1 || 0;\n        const days = fillArray(new Array(daysLength), '');\n        const slots = days.reduce((acc, x, day)=>{\n            const dayStr = `${dPrefix}${intPrefix(day + 1)}`;\n            return assignObject(acc, {\n                [dayStr]: data[dayStr] || false\n            });\n        }, {});\n        const availableDays = Object.keys(data).filter((d)=>!Array.isArray(slots[d]) && !!slots[d]);\n        return {\n            availableDays,\n            slots\n        };\n    };\n    let lastReq;\n    const updateMonthData = (startDate, endDate, data)=>{\n        const { availableDays, slots } = generateMonthData(startDate, endDate, data);\n        if (JSON.stringify(slots) === JSON.stringify(state.slots)) {\n            return;\n        }\n        setState({\n            availableDays,\n            slots\n        });\n    };\n    const getDateRange = (dateStr)=>{\n        const [y, m] = dateStr.split('-');\n        const startDate = new Date(y, m - 1, 1);\n        const endDate = new Date(y, m, 0);\n        return [\n            startDate,\n            endDate\n        ];\n    };\n    const load = ()=>{\n        const { date: dateStr } = state;\n        const [startDate, endDate] = getDateRange(dateStr);\n        setState(assignObject({\n            loading: true\n        }, generateMonthData(startDate, endDate, {})));\n        const req = loadMonthData(startDate, endDate, (data)=>{\n            if (lastReq !== req) {\n                return;\n            }\n            updateMonthData(startDate, endDate, data);\n            const { availableDays, forcedStartDate, forcedEndDate, slots } = state;\n            const firstAvailable = availableDays.find((d)=>{\n                const foundSlot = Object.keys(slots[d]).find((slot)=>{\n                    const slotDate = new Date(`${d} ${slot}`.replace(/-/g, '/'));\n                    if (forcedStartDate && slotDate > forcedStartDate) return false;\n                    if (forcedEndDate && slotDate < forcedEndDate) return false;\n                    return true;\n                });\n                return foundSlot;\n            });\n            const newDate = availableDays.indexOf(dateStr) === -1 && firstAvailable;\n            setState({\n                loading: false,\n                date: newDate || dateStr\n            });\n        });\n        lastReq = req;\n    };\n    const dz = (date, tz1, tz2)=>{\n        if (!date) return;\n        const diffTime = (tz1 - tz2) * oneHour;\n        return new Date(date.getTime() - diffTime);\n    };\n    const revertDate = (d, t1, t2)=>{\n        if (!d) return '';\n        const pDate = new Date(d.replace(/-/, '/'));\n        const utz = getTimezoneOffset(getUserTimezone());\n        const tz1 = getTimezoneOffset(t1) - utz;\n        const tz2 = getTimezoneOffset(t2) - utz;\n        const val = dz(pDate, tz1, tz2);\n        return toDateTimeStr(val);\n    };\n    const amPmConverter = (_time)=>{\n        const { timeFormat: { value: timeFormat = '24 Hour' } = {} } = props;\n        if (!_time || !(typeof _time === 'string') || _time.indexOf('M') > -1 || !timeFormat || timeFormat === '24 Hour') {\n            return _time;\n        }\n        const time = _time.substring(0, 2);\n        const hour = time % 12 || 12;\n        const ampm = time < 12 ? 'AM' : 'PM';\n        return `${hour}${_time.substring(2, 5)} ${ampm}`;\n    };\n    const validate = (dateStr, cb)=>{\n        const { defaultValue } = state;\n        if (JotForm.isEditMode() && defaultValue === dateStr) {\n            return cb(true);\n        }\n        const parts = dateStr.split(' ');\n        const slot = parts.slice(1).join(' ');\n        const [y, m, d] = parts[0].split('-');\n        const startDate = new Date(y, m - 1, 1);\n        const endDate = new Date(y, m, 0);\n        loadMonthData(startDate, endDate, (data)=>{\n            const day = `${y}-${m}-${d}`;\n            const isValid = checkAppointmentAvailability(day, amPmConverter(slot), data);\n            cb(isValid);\n            if (!isValid) {\n                // add unavailable slot if it is not in response for deselection\n                data[day] = assignObject({}, data[day], {\n                    [slot]: false\n                });\n            }\n            // still in same month\n            if (state.date.indexOf(`${y}-${m}`) === 0) {\n                updateMonthData(startDate, endDate, data);\n            }\n        });\n    };\n    // let validationInterval;\n    const validation = (_value)=>{\n        const shouldValidate = _value || input.classList.contains('validate');\n        if (!shouldValidate) {\n            input.classList.add('valid');\n            JotForm.corrected(input);\n            JotForm.runConditionForId(props.id.value);\n            return;\n        }\n        if (!_value) {\n            var _window_JotForm_texts;\n            input.classList.remove('valid');\n            JotForm.errored(input, ((_window_JotForm_texts = window.JotForm.texts) === null || _window_JotForm_texts === void 0 ? void 0 : _window_JotForm_texts.required) || FORM_TEXTS.required);\n            JotForm.runConditionForId(props.id.value);\n            return;\n        }\n        validate(_value, (isValid)=>{\n            var _window_JotForm_texts;\n            if (isValid) {\n                input.classList.add('valid');\n                JotForm.corrected(input);\n                JotForm.runConditionForId(props.id.value);\n                return;\n            }\n            const parts = _value.split(' ');\n            const dateStr = parts[0];\n            const date = new Date(dateStr);\n            const day = getDay(date);\n            const datetime = `${dayNames()[day]}, ${monthNames()[date.getMonth()]} ${intPrefix(date.getUTCDate())}, ${date.getFullYear()}`;\n            const time = parts.slice(1).join(' ');\n            const slotUnavailableText = ((_window_JotForm_texts = window.JotForm.texts) === null || _window_JotForm_texts === void 0 ? void 0 : _window_JotForm_texts.slotUnavailable) || FORM_TEXTS.slotUnavailable;\n            const errorText = slotUnavailableText.slotUnavailable.replace('{time}', time).replace('{date}', datetime);\n            input.classList.remove('valid');\n            JotForm.errored(input, errorText);\n            JotForm.runConditionForId(props.id.value);\n        });\n    };\n    const debouncedValidation = debounce(validation, 300);\n    const setValue = (value)=>{\n        input.value = value ? toDateTimeStr(new Date(value.replace(/-/g, '/'))) : '';\n        setState({\n            value\n        });\n        // trigger input event for supporting progress bar widget\n        input.triggerEvent('input');\n        debouncedValidation(value);\n    };\n    const handleClick = (e)=>{\n        const { target } = e;\n        if (!target || !target.classList) {\n            return;\n        }\n        if (target.classList.contains('disabled') && !target.classList.contains('active')) {\n            return;\n        }\n        e.preventDefault();\n        const { value } = target.dataset;\n        // formerValue can be undefined\n        setValue(target.classList.contains('active') ? state.formerValue : value);\n    };\n    const setTimezone = (timezone)=>{\n        tzInput.value = timezone;\n        let oldTimezone = state.timezone;\n        setState({\n            timezone\n        });\n        if (input.value) {\n            const date = oldTimezone ? toDateTimeStr(dz(new Date(input.value.replace(/-/g, '/')), getTimezoneOffset(oldTimezone), getTimezoneOffset(state.timezone))) : toDateTimeStr(new Date(input.value.replace(/-/g, '/')));\n            setDate(date.split(' ')[0]);\n            setState({\n                value: date\n            });\n            loadFormerValue(oldTimezone);\n            input.value = state.value;\n        }\n    };\n    const handleTimezoneChange = (e)=>{\n        const { target } = e;\n        const { value: timezone } = target;\n        setTimezone(timezone);\n    };\n    const setDate = (date)=>setState({\n            date\n        });\n    const handleDateChange = (e)=>{\n        const { target } = e;\n        const { value: date } = target.dataset;\n        if (!date) return;\n        setDate(date);\n    };\n    const handleMonthYearChange = (e)=>{\n        const { dataset, value: inputVal } = e.target;\n        const { name } = dataset;\n        if (!name) {\n            return;\n        }\n        const { date } = state;\n        const oldDate = new Date(date);\n        const oldMonth = oldDate.getMonth();\n        const oldYear = oldDate.getFullYear();\n        const oldDay = oldDate.getUTCDate();\n        const value = inputVal || e.target.getAttribute('value');\n        if (name === 'month') {\n            let newDate = new Date(oldYear, value, oldDay);\n            let i = 1;\n            while(`${newDate.getMonth()}` !== `${value}` && i < 10){\n                newDate = new Date(oldYear, value, oldDay - i);\n                i++;\n            }\n            return setDate(toDateStr(newDate));\n        }\n        return setDate(toDateStr(new Date(value, oldMonth, oldDay)));\n    };\n    const toggleMobileState = ()=>{\n        if (wrapper.classList.contains('isOpenMobile')) {\n            wrapper.classList.remove('isOpenMobile');\n        } else {\n            wrapper.classList.add('isOpenMobile');\n        }\n    };\n    const keepSlotsScrollPosition = ()=>{\n        const visibleSlot = element.querySelector('.appointmentSlots.slots .slot.active, .appointmentSlots.slots .slot:not(.disabled).active');\n        element.querySelector('.appointmentSlots.slots').scrollTop = visibleSlot ? visibleSlot.offsetTop : 0;\n    };\n    const setTimezonePickerState = ()=>{\n        const { timezone } = state;\n        const { autoDetectTimezone: { value: autoDetecTimezoneValue } = {} } = props;\n        timezonePickerCommon.setSelectedTimezone(timezone);\n        timezonePickerCommon.setIsAutoSelectTimezoneOpen(autoDetecTimezoneValue);\n    };\n    const loadFormerValue = (oldTimezone)=>{\n        const { formerValue = '' } = state;\n        const date = oldTimezone ? toDateTimeStr(dz(new Date(input.value.replace(/-/g, '/')), getTimezoneOffset(oldTimezone), getTimezoneOffset(state.timezone))) : toDateTimeStr(new Date(input.value.replace(/-/g, '/')));\n        const formerDate = formerValue ? oldTimezone ? toDateTimeStr(dz(new Date(formerValue.replace(/-/g, '/')), getTimezoneOffset(oldTimezone), getTimezoneOffset(state.timezone))) : toDateTimeStr(new Date(formerValue.replace(/-/g, '/'))) : undefined;\n        const formerDateTimezoned = oldTimezone ? formerDate : date;\n        if (JotForm.isEditMode() && date && date !== formerValue) {\n            setState({\n                formerValue: formerDateTimezoned\n            });\n        }\n    };\n    const handleUIUpdate = ()=>{\n        try {\n            const breakpoints = {\n                450: 'isLarge',\n                225: 'isNormal',\n                175: 'shouldBreakIntoNewLine'\n            };\n            const offsetWidth = (()=>{\n                try {\n                    const appointmentCalendarRow = element.querySelector('.appointmentFieldRow.forCalendar');\n                    const appointmendCalendar = element.querySelector('.appointmentCalendar');\n                    return appointmentCalendarRow.getBoundingClientRect().width - appointmendCalendar.getBoundingClientRect().width;\n                } catch (e) {\n                    return null;\n                }\n            })();\n            if (offsetWidth === null || parseInt(wrapper.getAttribute('data-breakpoint-offset'), 10) === offsetWidth) {\n                return;\n            }\n            const breakpoint = Object.keys(breakpoints).reduce((prev, curr)=>{\n                return Math.abs(curr - offsetWidth) < Math.abs(prev - offsetWidth) ? curr : prev;\n            });\n            const breakpointName = breakpoints[breakpoint];\n            wrapper.setAttribute('data-breakpoint', breakpointName);\n            wrapper.setAttribute('data-breakpoint-offset', offsetWidth);\n        } catch (e) {\n        // noop.\n        }\n    };\n    let uiUpdateInterval;\n    const effects = ()=>{\n        clearInterval(uiUpdateInterval);\n        const shouldLoad = changed.timezone && changed.timezone !== state.timezone // time zone changed\n         || changed.date && getYearMonth(changed.date) !== getYearMonth(state.date); // y-m changed\n        changed = {};\n        if (shouldLoad) {\n            load();\n        }\n        const cancelAppointmentBtn = element.querySelector('.cancelAppointmentBtn');\n        const cancelSelectionBtn = element.querySelector('.cancelSelectionBtn');\n        if (cancelAppointmentBtn) {\n            cancelAppointmentBtn.addEventListener('click', ()=>{\n                setValue(undefined);\n                setState({\n                    formerValue: undefined\n                });\n            });\n        }\n        if (cancelSelectionBtn) {\n            cancelSelectionBtn.addEventListener('click', ()=>{\n                const { date = '', initialStartDate = '', formerValue = '' } = state;\n                const isFormerDatePassed = hasDatePassed(formerValue, initialStartDate);\n                const currentOrFormerDate = formerValue ? state.formerValue.split(' ')[0] : date;\n                setDate(isFormerDatePassed ? initialStartDate : currentOrFormerDate);\n                setValue(state.formerValue);\n            });\n        }\n        const forSelectedDate = element.querySelector('.forSelectedDate span');\n        if (forSelectedDate) {\n            forSelectedDate.addEventListener('click', ()=>{\n                setDate(state.value.split(' ')[0]);\n            });\n        }\n        if (isTimezonePickerFromCommonLoaded) {\n            setTimezonePickerState();\n            const timezonePickerWrapper = element.querySelector('.forTimezonePicker');\n            timezonePickerCommon.init(timezonePickerWrapper);\n        } else {\n            const timezonepicker = element.querySelector('.timezonePicker');\n            if (timezonepicker) {\n                timezonepicker.addEventListener('change', handleTimezoneChange);\n            }\n        }\n        element.querySelector('.calendar .days').addEventListener('click', handleDateChange);\n        element.querySelector('.monthYearPicker').addEventListener('change', handleMonthYearChange);\n        element.querySelector('.dayPicker').addEventListener('click', handleDateChange);\n        element.querySelector('.selectedDate').addEventListener('click', toggleMobileState);\n        Array.prototype.slice.call(element.querySelectorAll('.monthYearPicker .pickerArrow')).forEach((el)=>el.addEventListener('click', handleMonthYearChange));\n        Array.prototype.slice.call(element.querySelectorAll('.slot')).forEach((el)=>el.addEventListener('click', handleClick));\n        keepSlotsScrollPosition();\n        uiUpdateInterval = setInterval(handleUIUpdate, 250);\n        JotForm.runAllCalculations();\n    };\n    const onTimezoneOptionClick = (timezoneValue)=>{\n        setTimezone(timezoneValue);\n    };\n    const renderMonthYearPicker = ()=>{\n        const { date } = state;\n        const [year, month] = (date || '-').split('-');\n        const yearOpts = fillArray(new Array(20), '').map((v, i)=>`${currentYear + i}`);\n        const prevMonthButtonText = props.prevMonthButtonText && props.prevMonthButtonText.text || 'Previous month';\n        const nextMonthButtonText = props.nextMonthButtonText && props.nextMonthButtonText.text || 'Next month';\n        const prevYearButtonText = props.prevYearButtonText && props.prevYearButtonText.text || 'Previous year';\n        const nextYearButtonText = props.nextYearButtonText && props.nextYearButtonText.text || 'Next year';\n        return `\n      <div class='monthYearPicker'>\n        <div class='pickerItem'>\n          <select class='pickerMonth' data-name='month' aria-label=\"Choose a month\">\n            ${monthNames().map((monthName, i)=>`<option ${parseInt(month, 10) === i + 1 ? 'selected' : ''} value='${i}'>${monthName}</option>`).join('')}\n          </select>\n          <button type='button' class='pickerArrow pickerMonthArrow prev'\n          ${Number(month) === 1 && Number(year) === currentYear && 'disabled'}\n          value='${parseInt(month, 10) - 2}'\n          data-name='month'\n          aria-label=\"${prevMonthButtonText}\"\n          >\n          </button>\n          <button\n          type='button'\n          class='pickerArrow pickerMonthArrow next'\n          ${Number(month) === 12 && Number(year) === currentYear + 19 ? 'disabled' : ''}\n          value='${parseInt(month, 10)}'\n          data-name='month'\n          aria-label=\"${nextMonthButtonText}\"\n          >\n          </button>\n        </div>\n        <div class='pickerItem'>\n          <select class='pickerYear' data-name='year' aria-label=\"Choose a year\">\n            ${yearOpts.map((yearName)=>`<option ${year === yearName ? 'selected' : ''}>${yearName}</option>`).join('')}\n          </select>\n          <button\n          type='button'\n          class='pickerArrow pickerYearArrow prev'\n          ${Number(year) === currentYear && 'disabled'}\n          value='${parseInt(year, 10) - 1}'\n          data-name='year'\n          aria-label=\"${prevYearButtonText}\"\n          />\n          <button\n          type='button'\n          class='pickerArrow pickerYearArrow next'\n          ${Number(year) === currentYear + 19 && 'disabled'}\n          value='${parseInt(year, 10) + 1}'\n          data-name='year'\n          aria-label=\"${nextYearButtonText}\"\n          />\n        </div>\n      </div>\n    `;\n    };\n    const getNav = ()=>{\n        const { availableDays, date: dateStr } = state;\n        let next;\n        let prev;\n        const [year, month] = dateStr.split('-');\n        if (availableDays) {\n            const dayIndex = availableDays.indexOf(dateStr);\n            if (dayIndex > 0) {\n                prev = availableDays[dayIndex - 1];\n            } else {\n                const prevDate = new Date(year, month - 1, 0);\n                if (prevDate.getFullYear() >= currentYear) {\n                    prev = toDateStr(prevDate);\n                }\n            }\n            if (dayIndex + 1 < availableDays.length) {\n                next = availableDays[dayIndex + 1];\n            } else {\n                const nextDate = new Date(year, month, 1);\n                if (nextDate.getFullYear() <= currentYear + 19) {\n                    next = toDateStr(nextDate);\n                }\n            }\n        }\n        return {\n            prev,\n            next\n        };\n    };\n    const renderDayPicker = ()=>{\n        const { loading } = state;\n        const { prev, next } = getNav();\n        const prevDayButtonText = props.prevDayButtonText && props.prevDayButtonText.text || 'Previous day';\n        const nextDayButtonText = props.nextDayButtonText && props.nextDayButtonText.text || 'Next day';\n        return `\n      <div class='appointmentDayPicker dayPicker'>\n        <button type='button' ${loading || !prev ? 'disabled' : ''} class=\"appointmentDayPickerButton prev\" ${prev && `data-value=\"${prev}\"`} aria-label=\"${prevDayButtonText}\">&lt;</button>\n        <button type='button' ${loading || !next ? 'disabled' : ''} class=\"appointmentDayPickerButton next\" ${next && `data-value=\"${next}\"`} aria-label=\"${nextDayButtonText}\">&gt;</button>\n      </div>\n    `;\n    };\n    const renderTimezonePicker = ()=>{\n        const { timezone, timezones } = state;\n        if (!timezones) return;\n        return `\n      <div class='timezonePickerWrapper'>\n        <select class='timezonePicker'>\n          ${!timezones.loading && timezones.map(({ group, cities })=>`\n                <optgroup label=\"${group}\">\n                  ${cities.map((val)=>`<option ${timezone.indexOf(`${group}/${val}`.split(' ')[0]) > -1 ? 'selected' : ''} value='${group}/${val}'>${val}</option>`).join('')}\n                </optgroup>\n              `).join('')}\n        </select>\n        <div class='timezonePickerName'>${timezone}</div>\n      </div>\n    `;\n    };\n    const renderCalendarDays = ()=>{\n        const { slots, date: dateStr, value, availableDays } = state;\n        const days = slots ? Object.keys(slots) : [];\n        const todayStr = toDateStr(new Date());\n        if (!days.length) {\n            return '';\n        }\n        const firstDay = getDay(new Date(days[0]));\n        days.unshift(...fillArray(new Array(firstDay), 'precedingDay'));\n        const trailingDays = Math.ceil(days.length / 7) * 7 - days.length;\n        days.push(...fillArray(new Array(trailingDays), 'trailingDay'));\n        const weeks = days.map((item, i)=>{\n            return i % 7 === 0 ? days.slice(i, i + 7) : null;\n        }).filter((a)=>a);\n        const dateValue = value && value.split(' ')[0];\n        return `\n      ${weeks.map((week)=>{\n            return `<div class='calendarWeek'>${week.map((day)=>{\n                const dayObj = new Date(day);\n                if (day === 'precedingDay' || day === 'trailingDay') {\n                    return `<div class=\"calendarDay ${day} empty\"></div>`;\n                }\n                const active = day === dateStr;\n                const isToday = todayStr === day;\n                const beforeStartDate = state.forcedStartDate ? state.forcedStartDate > dayObj : false;\n                const afterEndDate = state.forcedEndDate ? state.forcedEndDate < dayObj : false;\n                const isUnavailable = availableDays.indexOf(day) === -1 || beforeStartDate || afterEndDate;\n                const isPassed = hasDatePassed(day);\n                const isStartDayGreaterThanDay = hasDatePassed(day, state.initialStartDate);\n                const isSelected = !isPassed && !isStartDayGreaterThanDay && day === dateValue;\n                const isActive = !isPassed && !isStartDayGreaterThanDay && active;\n                const classes = `calendarDay ${classNames({\n                    isSelected,\n                    isToday,\n                    isUnavailable,\n                    isActive\n                })}`;\n                return `<div\n                      class='${classes}'\n                      data-value='${day}'\n                      role=\"button\"\n                      aria-disabled=\"${isUnavailable ? true : false}\"\n                    >\n                        <span class='calendarDayEach'>${day.split('-')[2].replace(/^0/, '')}</span>\n                    </div>`;\n            }).join('')}</div>`;\n        }).join('')}\n    `;\n    };\n    const renderEmptyState = ()=>{\n        var _window_JotForm_texts;\n        /* eslint-disable */ return `\n      <div class=\"appointmentSlots-empty\">\n        <div class=\"appointmentSlots-empty-container\">\n          <div class=\"appointmentSlots-empty-icon\">\n            <svg width=\"124\" height=\"124\" viewBox=\"0 0 124 124\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M46.5006 10.3333C46.5006 7.47986 44.1875 5.16666 41.334 5.16666C38.4805 5.16666 36.1673 7.47986 36.1673 10.3333V15.5H25.834C17.2736 15.5 10.334 22.4396 10.334 31V51.6667V103.333C10.334 111.894 17.2736 118.833 25.834 118.833H64.584C67.4375 118.833 69.7506 116.52 69.7506 113.667C69.7506 110.813 67.4375 108.5 64.584 108.5H25.834C22.9805 108.5 20.6673 106.187 20.6673 103.333V56.8333H103.334V64.5833C103.334 67.4368 105.647 69.75 108.501 69.75C111.354 69.75 113.667 67.4368 113.667 64.5833V51.6667V31C113.667 22.4396 106.728 15.5 98.1673 15.5H87.834V10.3333C87.834 7.47986 85.5208 5.16666 82.6673 5.16666C79.8138 5.16666 77.5006 7.47986 77.5006 10.3333V15.5H46.5006V10.3333ZM36.1673 25.8333V31C36.1673 33.8535 38.4805 36.1667 41.334 36.1667C44.1875 36.1667 46.5006 33.8535 46.5006 31V25.8333H77.5006V31C77.5006 33.8535 79.8138 36.1667 82.6673 36.1667C85.5208 36.1667 87.834 33.8535 87.834 31V25.8333H98.1673C101.021 25.8333 103.334 28.1465 103.334 31V46.5H20.6673V31C20.6673 28.1465 22.9805 25.8333 25.834 25.8333H36.1673ZM112.154 81.5966C114.172 83.6143 114.172 86.8857 112.154 88.9034L104.182 96.875L112.154 104.847C114.172 106.864 114.172 110.136 112.154 112.153C110.136 114.171 106.865 114.171 104.847 112.153L96.8756 104.182L88.904 112.153C86.8863 114.171 83.615 114.171 81.5973 112.153C79.5796 110.136 79.5796 106.864 81.5973 104.847L89.5689 96.875L81.5973 88.9034C79.5796 86.8857 79.5796 83.6143 81.5973 81.5966C83.615 79.5789 86.8863 79.5789 88.904 81.5966L96.8756 89.5682L104.847 81.5966C106.865 79.5789 110.136 79.5789 112.154 81.5966Z\"/>\n            </svg>\n          </div>\n          <div class=\"appointmentSlots-empty-text\">${((_window_JotForm_texts = window.JotForm.texts) === null || _window_JotForm_texts === void 0 ? void 0 : _window_JotForm_texts.noSlotsAvailable) || FORM_TEXTS.noSlotsAvailable}</div>\n        </div>\n      </div>\n    `;\n    /* eslint-enable */ };\n    const dateWithAMPM = (date = '')=>{\n        const { timeFormat: { value: timeFormat = '24 Hour' } = {} } = props;\n        const time = new Date(date.replace(/-/g, '/')).toLocaleTimeString('en-US', {\n            hour: 'numeric',\n            minute: 'numeric',\n            hourCycle: timeFormat === 'AM/PM' ? 'h12' : 'h23'\n        });\n        const day = date && date.split(' ')[0];\n        return `${day} ${time}`;\n    };\n    const renderSlots = ()=>{\n        const { date: dateStr, value: dateValue = '', defaultValue = '', timezone, forcedStartDate, forcedEndDate } = state;\n        const dateSlots = state.slots && state.slots[dateStr] || {};\n        const stateValue = dateWithAMPM(dateValue);\n        const stateDefaultValue = dateWithAMPM(defaultValue);\n        const defaultValueTZ = revertDate(defaultValue, ' ', timezone);\n        const parsedDefaultVal = dateWithAMPM(defaultValueTZ);\n        const entries = objectEntries(dateSlots);\n        if (!entries || !entries.length) {\n            return renderEmptyState();\n        }\n        return entries.map(([name, value])=>{\n            if (name.indexOf('M') > -1) {\n                name = name.split(' ');\n                name = `${name[0]} ${name[1].locale()}`;\n            }\n            const rn = amPmConverter(name);\n            const slotValue = `${dateStr} ${rn}`;\n            const realD = new Date(slotValue.replace(/-/g, '/'));\n            const active = stateValue.replace(/\\s/g, ' ') === slotValue.replace(/\\s/g, ' ');\n            const disabled = (forcedStartDate && forcedStartDate > realD || forcedEndDate && forcedEndDate < realD || !(value || parsedDefaultVal === slotValue)) && stateDefaultValue !== slotValue;\n            return `<div class=\"appointmentSlot slot ${classNames({\n                disabled,\n                active\n            })}\" data-value=\"${slotValue}\" role=\"button\">${name}</div>`;\n        }).join('');\n    };\n    const renderDay = ()=>{\n        const { date: dateStr } = state;\n        const date = new Date(dateStr);\n        const day = getDay(date);\n        return `\n      <div class='appointmentDate'>\n        ${dateStr && `${dayNames()[day]}, ${monthNames()[date.getUTCMonth()]} ${intPrefix(date.getUTCDate())}`}\n      </div>\n    `;\n    };\n    const renderCalendar = ()=>{\n        const { date: dateStr } = state;\n        return `\n      <div class='selectedDate'>\n        <input class='currentDate' type='text' value='${toFormattedDateStr(dateStr)}' style='pointer-events: none;' aria-label=\"Selected Date\" />\n      </div>\n      ${renderMonthYearPicker()}\n      <div class='appointmentCalendarDays days'>\n        <div class='daysOfWeek'>\n          ${dayNames().map((day)=>`<div class=\"dayOfWeek ${day.toLowerCase()}\">${day.toUpperCase().slice(0, 3)}</div>`).join('')}\n        </div>\n        ${renderCalendarDays()}\n      </div>\n    `;\n    };\n    const renderSelectedDate = ()=>{\n        var _window_JotForm_texts, _window_JotForm_texts1, _window_JotForm_texts2, _window_JotForm_texts3;\n        const { value = '', formerValue = '' } = state;\n        const dateStr = value && value.split(' ')[0];\n        const formerDateStr = formerValue && formerValue.split(' ')[0];\n        const { calculateVal, time, datetime, unTranslatedDatetime } = convertStrToTime({\n            dateStr,\n            value\n        });\n        const { time: formerTime, datetime: formerDateTime } = convertStrToTime({\n            dateStr: formerDateStr,\n            value: formerValue\n        });\n        const selectedTimeText = ((_window_JotForm_texts = window.JotForm.texts) === null || _window_JotForm_texts === void 0 ? void 0 : _window_JotForm_texts.selectedTime) || FORM_TEXTS.selectedTime;\n        const cancelSelectionText = ((_window_JotForm_texts1 = window.JotForm.texts) === null || _window_JotForm_texts1 === void 0 ? void 0 : _window_JotForm_texts1.cancelSelection) || FORM_TEXTS.cancelSelection;\n        const cancelAppointmentText = ((_window_JotForm_texts2 = window.JotForm.texts) === null || _window_JotForm_texts2 === void 0 ? void 0 : _window_JotForm_texts2.cancelAppointment) || FORM_TEXTS.cancelAppointment;\n        const formerSelectedText = ((_window_JotForm_texts3 = window.JotForm.texts) === null || _window_JotForm_texts3 === void 0 ? void 0 : _window_JotForm_texts3.formerSelectedTime) || FORM_TEXTS.formerSelectedTime;\n        const text = `${time} ${datetime}`;\n        const formerText = `${formerTime} ${formerDateTime}`;\n        const hasFormerly = value !== formerValue;\n        const appointmentDateTime = new Date(value.replace(/(\\.|-)/g, '/')).getTime();\n        const valEl = `<div style='display: none' class='jsAppointmentValue' data-untranslated='${unTranslatedDatetime} ${time}' data-calculate='${calculateVal} ${time}' data-date='${appointmentDateTime}'>${datetime} ${time}</div>`;\n        const cancelAppointmentButton = `<button type='button' class='cancel cancelAppointmentBtn'>${cancelAppointmentText}</button>`;\n        const cancelSelectionButton = `<button type='button' class='cancel cancelSelectionBtn'>${cancelSelectionText}</button>`;\n        const selectedField = `<div class=\"forSelectedDateItem\"><span class=\"forSelectedDateTitle\" aria-live=\"polite\">${selectedTimeText}</span><span aria-live=\"polite\">${text}</span></div>`;\n        const formerTimeField = `<div class=\"forSelectedDateItem forFormerly\"><span class=\"forSelectedDateTitle\" aria-live=\"polite\">${formerSelectedText}</span><span aria-live=\"polite\">${formerText}</span></div>`;\n        const selectedFieldContainer = `<div class='appointmentFieldRow forSelectedDate ${hasFormerly && 'hasFormerly'}'>\n    ${selectedField}\n    ${hasFormerly ? cancelSelectionButton : cancelAppointmentButton}\n    ${JotForm.isEditMode() && formerValue && hasFormerly ? formerTimeField : ''}\n    </div>`;\n        return value ? `${valEl}${selectedFieldContainer}` : ``;\n    };\n    const render = debounce(()=>{\n        const { loading } = state;\n        const { text } = props;\n        beforeRender();\n        element.innerHTML = `\n      <div class='appointmentFieldContainer' aria-label=\"${text.value}\" role=\"group\">\n        <div class='appointmentFieldRow forCalendar'>\n          <div class='calendar appointmentCalendar'>\n            <div class='appointmentCalendarContainer'>\n              ${renderCalendar()}\n            </div>\n          </div>\n          <div class='appointmentDates'>\n            <div class='appointmentDateSelect'>\n              ${renderDay()}\n              ${renderDayPicker()}\n            </div>\n            <div class='appointmentSlots slots ${classNames({\n            isLoading: loading\n        })}'>\n              <div class='appointmentSlotsContainer'>\n                ${renderSlots()}\n              </div>\n            </div>\n            <div class='appointmentCalendarTimezone forTimezonePicker'>\n              ${isTimezonePickerFromCommonLoaded ? '' : renderTimezonePicker()}\n            </div>\n          </div>\n        </div>\n        ${renderSelectedDate()}\n      </div>\n    `;\n        afterRender();\n        // Frame height needs to be recalculated and\n        // updated after any UI change on appointment\n        // field. We force it from here.\n        try {\n            global.JotForm.handleIFrameHeight();\n        } catch (e) {\n        // noop.\n        }\n    });\n    const update = (newProps)=>{\n        state = assignObject({}, state, getStateFromProps(newProps));\n        props = newProps;\n        constructTimezonePickerCommon(props);\n        load();\n    };\n    input.addEventListener('change', (e)=>{\n        const date = e.target.value ? toDateTimeStr(new Date(e.target.value.replace(/-/g, '/'))) : '';\n        const isAMPM = props.timeFormat === '24 hour';\n        if (date) {\n            setDate(date.split(' ')[0]);\n            setState({\n                value: date,\n                defaultValue: isAMPM ? date : dateWithAMPM(date)\n            });\n            validation(isAMPM ? date : dateWithAMPM(date));\n        }\n    });\n    tzInput.addEventListener('change', (e)=>{\n        const defaultTimezone = e.target.value;\n        setTimezone(defaultTimezone);\n        setState({\n            defaultTimezone\n        });\n    });\n    document.addEventListener('translationLoad', ()=>render());\n    const triggerConstruct = (timezones)=>{\n        JotForm.appointments.listeners.forEach((fn)=>fn({\n                timezones\n            }));\n    };\n    if (!JotForm.appointments) {\n        JotForm.appointments = {\n            listeners: []\n        };\n        loadTimezones((timezones)=>{\n            JotForm.timezones = timezones;\n            if (JotForm.isEditMode()) {\n                ensureEditResultSet(10000).then(()=>{\n                    triggerConstruct(timezones);\n                });\n            } else {\n                triggerConstruct(timezones);\n            }\n        });\n    }\n    // Appointment flickers if we don't wait for submission result on edit\n    function ensureEditResultSet(timeout) {\n        var dateStart = Date.now();\n        return new Promise(waitForEditResult);\n        function waitForEditResult(resolve, reject) {\n            if (JotForm.editValueSet) resolve();\n            else if (timeout && Date.now() - dateStart >= timeout) resolve();\n            else setTimeout(waitForEditResult.bind(this, resolve, reject), 30);\n        }\n    }\n    const requestTimeout = 1000;\n    const getFirstAvailableDates = async ({ formID, timezone, qid })=>{\n        const url = `${PREFIX}?action=getAppointments&formID=${formID}&timezone=${encodeURIComponent(timezone)}&ncTz=${new Date().getTime()}&firstAvailableDates&qid=${qid}`;\n        const { content } = await getJSON(url);\n        JotForm.appointments.initialData = _object_spread({}, JotForm.appointments.initialData, content);\n        return content[qid];\n    };\n    const constructTimezonePickerCommon = (props)=>{\n        var _props_timeFormat;\n        const isAm = (props === null || props === void 0 ? void 0 : (_props_timeFormat = props.timeFormat) === null || _props_timeFormat === void 0 ? void 0 : _props_timeFormat.value) === 'AM/PM';\n        const userTimezone = getUserTimezone();\n        const timezone = state.defaultTimezone || userTimezone;\n        if (window.timezonePickerCommon) {\n            isTimezonePickerFromCommonLoaded = true;\n            timezonePickerCommon = window.timezonePickerCommon({\n                id: uniqueId,\n                timezones: JotForm.timezones,\n                selectedTimezone: timezone,\n                onOptionClick: onTimezoneOptionClick,\n                usePortal: true,\n                isAm\n            });\n        }\n    };\n    const construct = async ({ timezones })=>{\n        const { formID = global.__formInfo.id, id: { value: qid }, autoDetectTimezone: { value: autoDetectValue } = {} } = props;\n        const userTimezone = getUserTimezone();\n        const timezone = state.defaultTimezone || userTimezone;\n        if (!formID || !timezone) return;\n        if (autoDetectValue === 'No') {\n            load();\n        }\n        const qdata = await getFirstAvailableDates({\n            formID,\n            timezone,\n            qid\n        });\n        if (!qdata || qdata.error) {\n            constructed = true;\n            return;\n        }\n        constructed = false;\n        constructTimezonePickerCommon(props);\n        setTimezone(timezone);\n        const dateStr = Object.keys(qdata)[0];\n        const [startDate, endDate] = getDateRange(dateStr);\n        updateMonthData(startDate, endDate, qdata);\n        const { availableDays } = state;\n        const newDate = availableDays.indexOf(dateStr) === -1 ? availableDays[0] : dateStr;\n        constructed = true;\n        setState({\n            timezones,\n            loading: false,\n            date: newDate || dateStr,\n            initialStartDate: dateStr\n        });\n        const isDatePassed = hasDatePassed(state.value);\n        const isForcedStartDay = hasDatePassed(state.value, dateStr);\n        // should wait for submission results for edit mode to correct input value for user timezone\n        if (JotForm.isEditMode()) {\n            ensureEditResultSet(10000).then(()=>{\n                // if appointment is passed, get first available day\n                if (!isDatePassed && !isForcedStartDay) {\n                    input.triggerEvent('change');\n                    input.value = state.value || '';\n                }\n            });\n        } else {\n            setTimeout(()=>{\n                if (input.value) {\n                    input.triggerEvent('change');\n                }\n            }, 100);\n        }\n    };\n    JotForm.appointments.listeners.push(construct);\n    if (JotForm.appointments.initialData) {\n        setTimeout(()=>{\n            construct({\n                timezones: JotForm.timezones\n            });\n        }, requestTimeout);\n    }\n    JotForm.appointments[props.id.value] = {\n        update: (newProps)=>update(assignObject(passedProps, newProps)),\n        forceStartDate: async (newDate, equation = '')=>{\n            if (!newDate) {\n                setState({\n                    forcedStartDate: undefined\n                });\n                return;\n            }\n            try {\n                const forcedStartDate = new Date(newDate);\n                if (`${forcedStartDate}` === `${state.forcedStartDate}`) return;\n                let date = new Date(state.availableDays.find((d)=>new Date(`${d} 23:59:59`) >= forcedStartDate));\n                if (!date.getTime()) {\n                    date = forcedStartDate;\n                }\n                date = toDateStr(date);\n                if (equation && !state.loading) {\n                    const realDate = new Date(forcedStartDate.getTime());\n                    if (`${state.forcedStartDate}` === `${realDate}`) return;\n                    const getFirstAvailableDay = (_availableDays)=>{\n                        return new Date(_availableDays.find((d)=>new Date(`${d} 23:59:59`) >= realDate));\n                    };\n                    let firstAvailableDay = getFirstAvailableDay(state.availableDays);\n                    if (firstAvailableDay.toString() === 'Invalid Date') {\n                        const [startDate, endDate] = getDateRange(toDateStr(realDate));\n                        const monthData = await getMonthData(startDate, endDate);\n                        const { availableDays } = generateMonthData(startDate, endDate, monthData);\n                        firstAvailableDay = getFirstAvailableDay(availableDays);\n                    }\n                    setValue('');\n                    setState({\n                        forcedStartDate,\n                        date: toDateStr(firstAvailableDay)\n                    });\n                    return;\n                }\n                setState({\n                    forcedStartDate,\n                    date\n                });\n            } catch (e) {\n                console.log(e);\n            }\n        },\n        forceEndDate: (newDate)=>{\n            if (!newDate) {\n                setState({\n                    forcedEndDate: undefined\n                });\n                return;\n            }\n            try {\n                const forcedEndDate = new Date(newDate);\n                if (`${forcedEndDate}` === `${state.forcedEndDate}`) return;\n                const availableDays = state.availableDays.filter((d)=>new Date(`${d} 00:00:00`) <= forcedEndDate);\n                let date = new Date(availableDays.indexOf(state.date) > -1 ? state.date : availableDays[availableDays.length - 1]);\n                if (!date.getTime()) {\n                    date = forcedEndDate;\n                }\n                date = toDateStr(date);\n                setState({\n                    forcedEndDate,\n                    date\n                });\n            } catch (e) {\n                console.log(e);\n            }\n        },\n        getComparableValue: ()=>input.value && toDateTimeStr(new Date(input.value.replace(/-/g, '/'))) || ''\n    };\n    return update;\n};\n","/* eslint no-eval:0 */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { fixNumbers, subLabel } from '@jotforminc/form-common';\nimport SubLabel from '../helpers/SubLabel';\nimport { classNames, addValidation } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nclass Range extends Component {\n    componentDidMount() {\n        eval(Range.getScript(this.props));\n    }\n    componentDidUpdate() {\n        eval(Range.getScript(this.props));\n    }\n    render() {\n        const qid = this.props.qid.value;\n        const qname = this.props.qname.value;\n        const markup = [];\n        markup.push(/*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: subLabel(this.props, 'from'),\n            propPath: \"sublabels.from\",\n            for: `${qid}_from`,\n            defaultValue: QuestionProps.control_range.sublabels.value.from,\n            children: /*#__PURE__*/ _jsx(\"input\", {\n                disabled: this.props.inlineEditClass,\n                \"data-component\": \"range\",\n                className: addValidation(classNames.textbox, this.props),\n                type: \"number\",\n                id: `${qid}_from`,\n                name: `${qname}[from]`\n            })\n        })));\n        markup.push(/*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: subLabel(this.props, 'to'),\n            propPath: \"sublabels.to\",\n            for: `${qid}_to`,\n            defaultValue: QuestionProps.control_range.sublabels.value.to,\n            children: /*#__PURE__*/ _jsx(\"input\", {\n                disabled: this.props.inlineEditClass,\n                \"data-component\": \"range\",\n                className: addValidation(classNames.textbox, this.props),\n                type: \"number\",\n                id: `${qid}_to`,\n                name: `${qname}[to]`\n            })\n        })));\n        return /*#__PURE__*/ _jsx(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            children: markup\n        });\n    }\n}\nexport { Range as default };\nRange.getState = (prop)=>{\n    return {\n        addAmount: prop.addAmount.value,\n        allowMinus: prop.allowMinus.value === 'Yes' ? 'true' : 'false',\n        defaultTo: prop.defaultTo.value,\n        defaultFrom: prop.defaultFrom.value\n    };\n};\nRange.getScript = (prop)=>{\n    const state = Range.getState(prop);\n    const qid = prop.qid.value;\n    /* eslint max-len:0 */ let script = `      $('${qid}_to').spinner({ imgPath:'${prop.cdnconfig.CDN}images/', width: '60', allowNegative: ${state.allowMinus}, addAmount: ${fixNumbers(state.addAmount)}, value:'${fixNumbers(state.defaultTo)}' });\\n`;\n    script += `      $('${qid}_from').spinner({ imgPath:'${prop.cdnconfig.CDN}images/', width: '60', allowNegative: ${state.allowMinus}, addAmount: ${fixNumbers(state.addAmount)}, value:'${fixNumbers(state.defaultFrom)}' });\\n`;\n    /* eslint max-len:1 */ return script;\n};\nRange.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType\n};\n","/* eslint no-eval:0 */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { addValidation, classNames } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport SubLabel from '../helpers/SubLabel';\nimport Ratingv2 from './Ratingv2';\nclass Rating extends Component {\n    componentDidMount() {\n        this.comp = eval(Rating.getScript(this.props));\n    }\n    componentDidUpdate() {\n        this.comp = eval(Rating.getScript(this.props));\n    }\n    render() {\n        if (this.props.themeVersion && this.props.themeVersion === 'v2') {\n            return /*#__PURE__*/ _jsx(Ratingv2, _object_spread({}, this.props));\n        }\n        const ratingOptions = [];\n        for(let i = 1; i <= this.props.stars.value; i++){\n            ratingOptions.push(/*#__PURE__*/ _jsx(\"option\", {\n                value: i,\n                children: i\n            }, i));\n        }\n        return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: this.props.subLabel && this.props.subLabel.value !== '' ? this.props.subLabel.value : null,\n            for: this.props.qid.value,\n            propPath: 'subLabel',\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: /*#__PURE__*/ _jsx(\"div\", {\n                ref: (ref)=>{\n                    this.comp = ref;\n                },\n                id: this.props.qid.value,\n                name: this.props.qname.value,\n                \"data-component\": \"rating\",\n                children: /*#__PURE__*/ _jsx(\"select\", {\n                    readOnly: this.props.inlineEditClass,\n                    name: this.props.qname.value,\n                    children: ratingOptions\n                })\n            }, this.props.passive ? `${Math.round(Math.random() * 100000)}` : null)\n        }));\n    }\n}\nexport { Rating as default };\nRating.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    stars: PropTypes.shape({\n        value: PropTypes.integer\n    }),\n    starStyle: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultValue: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape(),\n    passive: PropTypes.bool,\n    inlineEditClass: PropTypes.elementType,\n    themeVersion: PropTypes.string,\n    type: PropTypes.shape()\n};\nRating.getState = (prop)=>{\n    let stars = 'stars';\n    const typeMap = {\n        Hearts: 'hearts',\n        'Stars 2': 'stars2',\n        Lightnings: 'lightnings',\n        'Light Bulps': 'bulps',\n        Shields: 'shields',\n        Flags: 'flags',\n        Pluses: 'pluses'\n    };\n    let starsV2 = 'stars_v2';\n    const typeMapV2 = {\n        Hearts: 'hearts_v2',\n        'Stars 2': 'stars2_v2',\n        Lightnings: 'lightnings_v2',\n        'Light Bulps': 'bulps_v2',\n        Shields: 'shields_v2',\n        Flags: 'flags_v2',\n        Pluses: 'pluses_v2'\n    };\n    if (typeof typeMap[prop.starStyle.value] !== 'undefined') {\n        stars = typeMap[prop.starStyle.value];\n    }\n    if (typeof typeMap[prop.starStyle.value] !== 'undefined') {\n        starsV2 = typeMapV2[prop.starStyle.value];\n    }\n    return {\n        stars: prop.themeVersion === 'v2' ? starsV2 : stars\n    };\n};\nRating.getScript = (prop)=>{\n    const state = Rating.getState(prop);\n    let script = `\n    $('${prop.qid.value}').rating({stars:'${prop.stars.value}',\n    inputClassName:'${addValidation(classNames.textbox, prop)}',\n    imagePath: '${prop.cdnconfig.CDN}images/${state.stars}.png',\n    cleanFirst:true, value:'${prop.defaultValue.value}'});\\n`;\n    script += `$('${prop.qid.value}').setAttribute('role','radiogroup');\\n`;\n    if (prop.id && prop.id.value) {\n        script += `$('${prop.qid.value}').setAttribute('aria-labelledby','label_${prop.id.value}');\\n`;\n    }\n    script += `\n    Array.from($('${prop.qid.value}').children).map(function(e, i){e.setAttribute('tabindex',0);\n    if(i<${prop.stars.value || 0}) {e.setAttribute('aria-label',(i+1)+' out of ${prop.stars.value || 0}');}\n    e.setAttribute('role','radio');\n    e.setAttribute('aria-checked','false');\n    e.setAttribute('aria-describedby', 'label_${prop.id.value}');\n    e.classList.add('form-star-rating-star', '${prop.starStyle.value.replace(/\\s/g, '')}');\n    e.onkeypress = function(k){if(k.keyCode == 13 || k.keyCode == 32)e.click()}});\\n`;\n    return script;\n};\n","/* eslint no-eval:0 */ import { jsx as _jsx } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { addValidation, classNames } from '../helpers/Utils';\nclass Slider extends Component {\n    componentDidMount() {\n        eval(Slider.getScript(this.props));\n    }\n    componentDidUpdate() {\n    // disabled this for now\n    // this component is being rendered twice\n    // I guess its parent should use shouldComponentUpdate\n    // to handle rerenders\n    // when the scripts evaluated twice\n    // two sliders will be appened\n    // eval(Slider.getScript(this.props));\n    }\n    render() {\n        return /*#__PURE__*/ _jsx(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            children: /*#__PURE__*/ _jsx(\"input\", {\n                disabled: this.props.inlineEditClass,\n                \"data-component\": \"slider\",\n                type: \"range\",\n                className: addValidation(classNames.textbox, this.props),\n                id: this.props.qid.value,\n                name: this.props.qname.value\n            })\n        });\n    }\n}\nexport { Slider as default };\nSlider.getState = (prop)=>{\n    return {\n        qid: prop.qid.value,\n        width: prop.width.value,\n        maxValue: prop.maxValue.value,\n        defaultValue: prop.defaultValue.value\n    };\n};\nSlider.getScript = (prop)=>{\n    const state = Slider.getState(prop);\n    /* eslint max-len:0 */ return `    $('${state.qid}').slider({width:'${state.width}', maxValue: '${state.maxValue}', value: '${state.defaultValue.trim()}'});\\n`;\n/* eslint max-len:1 */ };\nSlider.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType\n};\n","/* eslint no-eval:0 */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy } from '@jotforminc/form-common';\nimport BaseInput from '../helpers/BaseInput';\nimport SubLabel from '../helpers/SubLabel';\nimport { addValidation, classNames, subLabelSingle } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nclass Spinner extends Component {\n    componentDidMount() {\n        eval(Spinner.getScript(this.props));\n    }\n    componentDidUpdate() {\n        eval(Spinner.getScript(this.props));\n    }\n    render() {\n        const additionalClass = addValidation(classNames.textbox, this.props);\n        const maxValue = this.props.maxValue && this.props.maxValue.value ? this.props.maxValue.value : null;\n        const minVal = this.props.minValue && this.props.minValue.value ? this.props.minValue.value : null;\n        const minValue = this.props.allowMinus.value === 'Yes' ? minVal : Math.max(minVal, 0);\n        const decimalClass = this.props.disallowDecimals && this.props.disallowDecimals.value && this.props.disallowDecimals.value === 'Yes' ? 'disallowDecimals' : '';\n        const { value: qidValue } = this.props.qid;\n        const subLabelObj = subLabelSingle(this.props, qidValue);\n        return /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            key: Math.random(),\n            labelValue: subLabelObj,\n            for: qidValue,\n            propPath: 'subLabel',\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value\n        }), /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n            qid: qidValue,\n            qname: this.props.qname.value,\n            type: \"number\",\n            componentDataType: \"input-spinner\",\n            minValue: minValue,\n            maxValue: maxValue,\n            additionalClass: `form-spinner-input ${decimalClass} ${additionalClass}`,\n            dataComponent: \"spinner\",\n            ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj)\n        })));\n    }\n}\nexport { Spinner as default };\nSpinner.getState = (prop)=>{\n    return {\n        imgPath: 'images/',\n        width: prop.width.value,\n        maxValue: prop.maxValue.value,\n        minValue: prop.minValue.value,\n        allowNegative: prop.allowMinus.value === 'Yes',\n        addAmount: prop.addAmount.value,\n        value: prop.defaultValue.value,\n        disallowDecimals: prop.disallowDecimals.value === 'Yes'\n    };\n};\nSpinner.getScript = (prop)=>{\n    const state = Spinner.getState(prop);\n    let script = `    if(typeof $('${prop.qid.value}').spinner !== 'undefined') {$('${prop.qid.value}').spinner({ imgPath:'${prop.cdnconfig.CDN}images/', width: '${state.width}', maxValue:'${state.maxValue}', minValue:'${state.minValue}', allowNegative: ${state.allowNegative ? 'true' : 'false'}, addAmount: ${parseFloat(state.addAmount) || 1}, value:'${state.value}' });}\\n`;\n    script += `    $('${prop.qid.value}').up(2).setAttribute('tabindex','');\\n`;\n    /* eslint max-len:0 */ return script;\n/* eslint max-len:1 */ };\nSpinner.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    minValue: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    maxValue: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    decimalClass: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    addAmount: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    disallowDecimals: PropTypes.shape(),\n    type: PropTypes.shape()\n};\n","/* eslint no-eval:0 */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy, htmlDecode } from '@jotforminc/form-common';\nimport SubLabel from '../helpers/SubLabel';\nimport { addValidation, subLabelSingle, sanitize, newlineToEntities } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nclass Textarea extends Component {\n    componentDidMount() {\n        eval(Textarea.getScript(this.props));\n    }\n    componentWillReceiveProps(nextProps) {\n        if (this.props.hint && this.props.hint.value) {\n            if (nextProps.hint.value !== this.props.hint.value) {\n                eval(Textarea.getScript(nextProps));\n            }\n        } else {\n            eval(Textarea.getScript(nextProps));\n        }\n    }\n    componentDidUpdate(prevProps) {\n        const { hint, wysiwyg } = this.props;\n        const isEditorModeChanged = prevProps.wysiwyg && wysiwyg && prevProps.wysiwyg.value !== wysiwyg.value;\n        if (hint && hint.value && isEditorModeChanged) {\n            eval(Textarea.getScript(this.props));\n        }\n    }\n    render() {\n        const wideArea = this.props.wysiwyg && this.props.wysiwyg.value === 'Widearea';\n        const richText = this.props.wysiwyg && this.props.wysiwyg.value === 'Enable';\n        const fullScreenIcon = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23434A60' viewBox='0 0 24 24' class='w-32 h-32'%3E%3Cpath fill-rule='evenodd' d='M7 2H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1.707.707L5 6.414l3.293 3.293a1 1 0 0 0 1.414-1.414L6.414 5l1.293-1.293A1 1 0 0 0 7 2Zm10 0a1 1 0 0 0-.707 1.707L17.586 5l-3.293 3.293a1 1 0 0 0 1.414 1.414L19 6.414l1.293 1.293A1 1 0 0 0 22 7V3a1 1 0 0 0-1-1h-4ZM9.707 15.707a1 1 0 0 0-1.414-1.414L5 17.586l-1.293-1.293A1 1 0 0 0 2 17v4a1 1 0 0 0 1 1h4a1 1 0 0 0 .707-1.707L6.414 19l3.293-3.293Zm4.586-1.414a1 1 0 0 1 1.414 0L19 17.586l1.293-1.293A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-.707-1.707L17.586 19l-3.293-3.293a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E\";\n        const { value: qidValue } = this.props.qid;\n        const subLabelObj = subLabelSingle(this.props, qidValue);\n        let extraStyle = {};\n        if (wideArea && !this.props.inlineEditClass) {\n            // add script\n            extraStyle = {\n                overflowY: 'hidden'\n            };\n        } else if (wideArea && this.props.inlineEditClass) {\n            extraStyle = {\n                overflow: 'auto',\n                backgroundImage: `url(\"${fullScreenIcon}\")`,\n                backgroundSize: '24px',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'right 4px top 4px'\n            };\n        } else if (richText && !this.props.inlineEditClass) {\n            extraStyle = {\n                minWidth: '353px',\n                minHeight: '150px',\n                backgroundColor: 'white'\n            };\n        }\n        if (this.props.themeVersion === 'v2' && this.props.cols && this.props.cols.value && this.props.rows && this.props.rows.value) {\n            extraStyle.width = `${this.props.cols.value}px`;\n            extraStyle.height = `${this.props.rows.value}px`;\n        }\n        let className = '';\n        const hasSubLabel = subLabelObj && subLabelObj.text;\n        // const maxLength = this.props.maxsize && this.props.maxsize.value && this.props.maxsize.value > 0;\n        const maxEntry = this.props.entryLimit.value.split('-');\n        const minEntry = this.props.entryLimitMin.value.split('-');\n        const addLimits = minEntry[1] > 1 && minEntry[0] !== 'None' || maxEntry[1] >= 1 && maxEntry[0] !== 'None';\n        const limit = maxEntry[1] && maxEntry[1] >= 1 ? maxEntry[1] : -1;\n        const minimum = minEntry[1] && minEntry[1] > 1 ? minEntry[1] : -1;\n        let readOnly = null;\n        let required = null;\n        let tabIndex = null;\n        if (this.props.readonly && this.props.readonly.value === 'Yes') {\n            readOnly = 'readOnly';\n            tabIndex = -1;\n            className += 'form-readonly ';\n        }\n        if (this.props.required && this.props.required.value === 'Yes') {\n            required = 'required';\n        }\n        className += addValidation('form-textarea', this.props);\n        let defaultValue = null;\n        if (this.props.defaultValue && this.props.defaultValue.value) {\n            defaultValue = this.props.passive === true ? this.props.defaultValue.value : htmlDecode(newlineToEntities(this.props.defaultValue.value));\n        } else if (this.props.passive) {\n            defaultValue = '';\n        }\n        if (addLimits) {\n            return /*#__PURE__*/ _jsx(\"div\", {\n                className: \"form-textarea-limit\",\n                children: /*#__PURE__*/ _jsxs(\"span\", {\n                    children: [\n                        richText && this.props.inlineEditClass ? /*#__PURE__*/ _jsxs(\"div\", {\n                            children: [\n                                /*#__PURE__*/ _jsx(\"img\", {\n                                    src: \"/images/wysiwygTextArea.png\",\n                                    alt: 'Rich text editor'.locale()\n                                }),\n                                /*#__PURE__*/ _jsx(\"textarea\", {\n                                    id: qidValue,\n                                    style: {\n                                        display: 'none'\n                                    }\n                                })\n                            ]\n                        }) : /*#__PURE__*/ _jsx(\"textarea\", {\n                            id: qidValue,\n                            className: className,\n                            name: this.props.qname.value,\n                            cols: this.props.themeVersion !== 'v2' ? this.props.cols.value : null,\n                            rows: this.props.themeVersion !== 'v2' ? this.props.rows.value : null,\n                            style: extraStyle,\n                            \"data-widearea\": wideArea && !this.props.inlineEditClass ? 'enable' : null,\n                            \"data-richtext\": richText && !this.props.inlineEditClass ? 'Yes' : null,\n                            \"data-component\": \"textarea\",\n                            // maxLength={maxLength ? this.props.maxsize.value : null}\n                            readOnly: readOnly,\n                            required: required,\n                            tabIndex: tabIndex,\n                            value: defaultValue,\n                            \"aria-labelledby\": ariaLabelledBy(this.props, subLabelObj)\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"form-textarea-limit-indicator\",\n                            children: [\n                                hasSubLabel ? /*#__PURE__*/ _jsx(\"label\", {\n                                    htmlFor: qidValue,\n                                    style: {\n                                        float: 'left'\n                                    },\n                                    id: `sublabel_${subLabelObj.id}`,\n                                    children: sanitize(htmlDecode(subLabelObj.text))\n                                }) : null,\n                                /*#__PURE__*/ _jsx(\"span\", {\n                                    \"data-limit\": limit,\n                                    type: maxEntry[0],\n                                    \"data-minimum\": minimum,\n                                    \"data-typeminimum\": minEntry[0],\n                                    id: `${qidValue}-limit`,\n                                    children: `0/${maxEntry[1]}`\n                                })\n                            ]\n                        })\n                    ]\n                })\n            });\n        }\n        return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: subLabelObj,\n            propPath: \"subLabel\",\n            for: qidValue,\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: richText && this.props.inlineEditClass ? /*#__PURE__*/ _jsxs(\"div\", {\n                children: [\n                    /*#__PURE__*/ _jsx(\"img\", {\n                        src: \"/images/wysiwygTextArea.png\",\n                        alt: 'Rich text editor'.locale()\n                    }),\n                    /*#__PURE__*/ _jsx(\"textarea\", {\n                        id: qidValue,\n                        style: {\n                            display: 'none'\n                        }\n                    })\n                ]\n            }) : /*#__PURE__*/ _jsx(\"textarea\", {\n                id: qidValue,\n                className: className,\n                name: this.props.qname.value,\n                cols: this.props.themeVersion !== 'v2' ? this.props.cols.value : null,\n                rows: this.props.themeVersion !== 'v2' ? this.props.rows.value : null,\n                style: extraStyle,\n                \"data-widearea\": wideArea && !this.props.inlineEditClass ? 'enable' : null,\n                \"data-richtext\": richText && !this.props.inlineEditClass ? 'Yes' : null,\n                tabIndex: tabIndex,\n                \"data-component\": \"textarea\",\n                readOnly: readOnly,\n                required: required,\n                value: defaultValue,\n                \"aria-labelledby\": ariaLabelledBy(this.props, subLabelObj)\n            })\n        }));\n    }\n}\nexport { Textarea as default };\nTextarea.getState = ()=>{\n    return {};\n};\nTextarea.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    text: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    labelAlign: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    required: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    cols: PropTypes.shape({\n        value: PropTypes.int\n    }),\n    rows: PropTypes.shape({\n        value: PropTypes.int\n    }),\n    validation: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    wysiwyg: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultValue: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    maxsize: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    entryLimit: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    entryLimitMin: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    readonly: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType,\n    hint: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    passive: PropTypes.bool,\n    themeVersion: PropTypes.string\n};\nTextarea.escapeUnicodeChars = (string)=>{\n    return string.replace(/[^\\0-~]/g, (ch)=>{\n        const escaped = `000${ch.charCodeAt().toString(16)}`;\n        return `\\\\u${escaped.slice(-4)}`;\n    });\n};\nTextarea.getScript = (prop)=>{\n    let script = '';\n    const richText = prop.wysiwyg && prop.wysiwyg.value === 'Enable';\n    if (prop.wysiwyg && prop.wysiwyg.value === 'Widearea' && !prop.inlineEditClass) {\n        script += ` if (typeof wideArea !== 'undefined') { wideArea('#id_${prop.qid.value.split('_')[1]}'); }\\n`;\n    }\n    if (prop.defaultValue && prop.defaultValue.value) {\n        script += `      $$(\"#${prop.qid.value}\")[0].setValue($$('#${prop.qid.value}')[0].value.replace(/&#13;&#10;/g, '\\\\n'));\\n`;\n    }\n    if (prop.passive && !richText) {\n        const hintVal = prop.hint.value.replace(/\\\\/gim, '\\\\\\\\').replace(/\\n\\r?/g, '\\\\n').replace(/'/gim, \"\\\\'\");\n        script += `if ($$(\"#${prop.qid.value}\")[0]) {  $$(\"#${prop.qid.value}\")[0].placeholder = '${Textarea.escapeUnicodeChars(hintVal)}'; }`;\n    }\n    script += `if (window.JotForm && JotForm.accessible) $('${prop.qid.value}').setAttribute('tabindex',0);\\n`;\n    return script;\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy } from '@jotforminc/form-common';\nimport { addValidation, subLabelSingle } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport BaseInput from '../helpers/BaseInput';\nimport SubLabel from '../helpers/SubLabel';\nclass Textbox extends Component {\n    componentDidMount() {\n        eval(Textbox.getScript(this.props)); // eslint-disable-line\n    }\n    renderInputMaskWarning() {\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"hidden-field-warning\",\n            \"aria-label\": 'Warning'.locale(),\n            children: [\n                /*#__PURE__*/ _jsx(\"img\", {\n                    src: \"images/information-middle.png\",\n                    align: \"top\",\n                    alt: \"\"\n                }),\n                \" This field contains Input Mask: \",\n                this.props.inputTextMask.value\n            ]\n        });\n    }\n    render() {\n        const className = addValidation('form-textbox', this.props);\n        const { value: qidValue } = this.props.qid;\n        const defaultValText = this.props.defaultValue.value.toString();\n        const subLabelObj = subLabelSingle(this.props, qidValue);\n        const inputTextMask = this.props.inputTextMask && this.props.inputTextMask.value.length > 0;\n        const hasInputMask = inputTextMask && this.props.inlineEditClass;\n        const maskVal = inputTextMask ? 'true' : null;\n        const hasDefaultValue = this.props.defaultValue && defaultValText.length > 0;\n        let textVal = hasInputMask ? this.props.inputTextMask.value : '';\n        textVal = hasDefaultValue ? defaultValText : textVal;\n        const tempDefaultValue = {};\n        if (textVal !== '') {\n            tempDefaultValue.value = textVal;\n        }\n        let style = {};\n        if (this.props.themeVersion && this.props.themeVersion === 'v2' && this.props.size && this.props.size.value) {\n            style = {\n                width: `${this.props.size.value}px`\n            };\n        }\n        return /*#__PURE__*/ _jsxs(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            propPath: \"subLabel\",\n            labelValue: subLabelObj,\n            for: qidValue,\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: [\n                /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                    qid: qidValue,\n                    qname: this.props.qname.value,\n                    componentDataType: \"input-textbox\",\n                    type: \"text\",\n                    masked: maskVal,\n                    defaultValue: tempDefaultValue,\n                    additionalClass: className,\n                    dataComponent: \"textbox\",\n                    ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                    style: style\n                })),\n                hasInputMask && hasDefaultValue && this.props.inlineEditClass ? /*#__PURE__*/ _jsx(\"br\", {}) : null,\n                hasInputMask && hasDefaultValue && this.props.inlineEditClass ? this.renderInputMaskWarning() : null\n            ]\n        }));\n    }\n}\nexport { Textbox as default };\nTextbox.getScript = (prop)=>{\n    let script = '';\n    script += `if (window.JotForm && JotForm.accessible) $('${prop.qid.value}').setAttribute('tabindex',0);\\n`;\n    return script;\n};\nTextbox.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    hasInputMask: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inputTextMask: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    confirmationHint: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultValue: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType,\n    type: PropTypes.shape(),\n    themeVersion: PropTypes.string,\n    size: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\n","/* eslint-disable react/no-invalid-html-attribute */ /* eslint-disable react/prop-types */ /* eslint-disable react/destructuring-assignment */ /* eslint-disable react/require-default-props */ /* eslint no-eval:0 */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component, Fragment } from 'react';\nimport { buildParams } from '@jotforminc/form-common';\nimport { WIDGET_NAMES } from '@jotforminc/constants';\nimport Separator from './Separator';\nclass Widget extends Component {\n    componentDidMount() {\n        eval(Widget.getScript(this.props));\n    }\n    shouldComponentUpdate(nextProps) {\n        let shouldUpdate = false;\n        const ignoredProps = [\n            'inlineEditFocusToElement',\n            'isTempQuestion',\n            'name',\n            'order'\n        ];\n        const props = Object.keys(this.props);\n        props.forEach((prop, i)=>{\n            const key = props[i];\n            if (JSON.stringify(this.props[key]) !== JSON.stringify(nextProps[key]) && ignoredProps.indexOf(key) < 0) {\n                shouldUpdate = true;\n            }\n        });\n        return shouldUpdate;\n    }\n    componentDidUpdate() {\n        eval(Widget.getScript(this.props));\n    }\n    getOembedSrcUrl() {\n        const slug = `${this.props.formID}/${this.props.id.value}`;\n        let baseUrl = `https://widgets-cache.jotform.io/${slug}`;\n        let query = `v=${new Date().getTime()}`;\n        if ([\n            'DEVELOPMENT',\n            'ENTERPRISE'\n        ].indexOf(this.props.environment) > -1) {\n            var _this_props_enterprise;\n            // eslint-disable-next-line eqeqeq\n            const hostname = ((_this_props_enterprise = this.props.enterprise) === null || _this_props_enterprise === void 0 ? void 0 : _this_props_enterprise.value) != '0' ? this.props.cdnconfig.CDN : '';\n            baseUrl = `${hostname === null || hostname === void 0 ? void 0 : hostname.replace(/\\/$/, '')}/opt/widget-cache.php`;\n            query += `&slug=${slug}`;\n        }\n        if (this.props.portalWidget) {\n            query += '&portalWidget=1';\n        }\n        return `${baseUrl}?${query}`;\n    }\n    renderWidget() {\n        var _this_props_URL, _this_props_qname;\n        const { themeVersion, extendsNewTheme } = this.props;\n        const isNewDefaultTheme = themeVersion && themeVersion === 'v2' || extendsNewTheme;\n        const frameWidth = this.props.frameWidth !== undefined && this.props.frameWidth.value !== undefined && this.props.frameWidth.value !== 0 ? `${parseInt(this.props.frameWidth.value, 10)}px` : '100%';\n        const frameHeight = this.props.frameHeight !== undefined && this.props.frameHeight.value !== undefined && this.props.frameHeight.value !== 0 ? `${parseInt(this.props.frameHeight.value, 10)}px` : '100%';\n        if (((_this_props_URL = this.props.URL) === null || _this_props_URL === void 0 ? void 0 : _this_props_URL.value) === undefined) {\n            return /*#__PURE__*/ _jsx(\"div\", {\n                children: \"Please run the wizard\"\n            });\n        }\n        const iframeStyle = {\n            width: '100%',\n            height: `${frameHeight}`,\n            border: 0,\n            maxWidth: `${this.props.frameWidth.value}px`\n        };\n        if (this.props.passive) {\n            let maxWidth;\n            if ([\n                'Left',\n                'Right',\n                'Auto'\n            ].indexOf(this.props.labelAlign.value) !== -1 && this.props.label.value === 'Yes' && !isNewDefaultTheme) {\n                maxWidth = this.props.formWidth - this.props.labelWidth - 100;\n            } else {\n                maxWidth = this.props.formWidth - 100;\n            }\n            this.props.maxWidth.value = maxWidth;\n            return /*#__PURE__*/ _jsx(\"div\", {\n                style: {\n                    maxWidth: `${this.props.frameWidth}px`,\n                    width: '100%',\n                    textAlign: `${this.props.boxAlign.value}`\n                },\n                \"data-component\": \"widget-widget\",\n                children: /*#__PURE__*/ _jsx(\"iframe\", {\n                    title: `${this.props.cfname.value}`,\n                    \"data-type\": \"oembed\",\n                    scrolling: \"no\",\n                    className: \"custom-field-frame widget-frame\",\n                    id: `customFieldFrame_${this.props.id.value}'`,\n                    src: `https://embed.jotform.io/render?refresh=1&url=${encodeURIComponent(this.props.URL.value)}&qid=${this.props.id.value}&formID=${this.props.formID}&maxWidth=${maxWidth}`,\n                    style: iframeStyle,\n                    allowFullScreen: \"true\"\n                })\n            });\n        }\n        if (this.props.maxWidth === undefined) {\n            this.prop.maxWidth = {\n                value: frameWidth\n            };\n        }\n        // checking video field for jotform apps\n        if (((_this_props_qname = this.props.qname) === null || _this_props_qname === void 0 ? void 0 : _this_props_qname.value) === '5273bb4faa80af0979000005') {\n            iframeStyle.height = 'auto';\n            iframeStyle.aspectRatio = '16 / 9';\n        }\n        return /*#__PURE__*/ _jsx(\"div\", {\n            style: {\n                width: '100%',\n                textAlign: `${this.props.boxAlign.value}`\n            },\n            \"data-component\": \"widget-widget\",\n            children: /*#__PURE__*/ _jsx(\"iframe\", {\n                title: `${this.props.cfname.value}`,\n                \"data-type\": \"oembed\",\n                scrolling: \"no\",\n                className: \"custom-field-frame widget-frame\",\n                id: `customFieldFrame_${this.props.id.value}`,\n                src: this.getOembedSrcUrl(),\n                style: iframeStyle,\n                allowFullScreen: \"true\",\n                allow: \"autoplay\"\n            })\n        });\n    }\n    renderEmbedWidget() {\n        let frameWidth;\n        if (this.props.frameWidth !== undefined && this.props.frameWidth.value !== undefined && this.props.frameWidth.value !== 0) {\n            frameWidth = parseInt(this.props.frameWidth.value, 10) + 10;\n        } else {\n            frameWidth = '100%';\n        }\n        let frameHeight;\n        if (this.props.frameHeight !== undefined && this.props.frameHeight.value !== undefined && this.props.frameHeight.value !== 0) {\n            frameHeight = parseInt(this.props.frameHeight.value, 10) + 10;\n        } else {\n            frameHeight = '100%';\n        }\n        return /*#__PURE__*/ _jsx(\"div\", {\n            style: {\n                width: '100%',\n                textAlign: `${this.props.boxAlign.value}`\n            },\n            children: /*#__PURE__*/ _jsx(\"iframe\", {\n                title: `${this.props.cfname.value}`,\n                className: \"embed-widget-frame\",\n                \"data-type\": \"embed\",\n                id: `widget-${this.props.id.value}`,\n                src: `/widget/${this.props.formID}/${this.props.id.value}?boxAlign=${this.props.boxAlign.value}&width=${frameWidth - 10}`,\n                style: {\n                    width: `${frameWidth}px`,\n                    height: `${frameHeight}px`,\n                    border: 0\n                }\n            })\n        });\n    }\n    renderFieldWidget() {\n        var _this_props_selectedField, _this_props_selectedField1;\n        let params = [];\n        // fixed single checkbox value\n        // \"true\" is now being converted as \"1\" because of the API usage\n        const { fieldParameters } = this.props;\n        if (fieldParameters && Array.isArray(fieldParameters.value)) {\n            fieldParameters.value.forEach((param)=>{\n                if (param.type === 'checkbox') {\n                    const { name } = param;\n                    /* eslint guard-for-in:0 */ if (name in this.props && this.props[name].value === '1') {\n                        this.props[name].value = 'true';\n                    }\n                /* eslint guard-for-in:1 */ }\n            });\n        }\n        // if tab exist get values from each tab\n        if ('widgetTabs' in this.props) {\n            const tabproplist = this.props.widgetTabs.value;\n            for(let x = 0; x < tabproplist.length; x++){\n                if (typeof tabproplist[x][1] !== 'undefined') {\n                    params = buildParams(params, this.props[tabproplist[x][1]].value.split(','), this.props);\n                }\n            }\n        } else if (this.props.settingNames.value !== '') {\n            params = buildParams(params, this.props.settingNames.value.split(','), this.props);\n        }\n        // get the data settings\n        const dataSettings = encodeURIComponent(JSON.stringify(params));\n        const widgetRequired = this.props.required.value === 'Yes' ? 'widget-required' : '';\n        const widgetStatic = 'static' in this.props && this.props.static.value === 'Yes' ? 'widget-static' : '';\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            \"data-widget-name\": this.props.cfname.value,\n            style: {\n                width: '100%',\n                textAlign: `${this.props.boxAlign.value}`,\n                overflowX: 'auto'\n            },\n            \"data-component\": \"widget-field\",\n            children: [\n                /*#__PURE__*/ _jsx(\"iframe\", {\n                    \"data-client-id\": ((_this_props_selectedField = this.props.selectedField) === null || _this_props_selectedField === void 0 ? void 0 : _this_props_selectedField.value) || '',\n                    title: `${this.props.cfname.value || WIDGET_NAMES[(_this_props_selectedField1 = this.props.selectedField) === null || _this_props_selectedField1 === void 0 ? void 0 : _this_props_selectedField1.value]}`,\n                    frameBorder: \"0\",\n                    scrolling: \"no\",\n                    allowtransparency: \"true\",\n                    allow: \"geolocation; microphone; camera; autoplay; encrypted-media; fullscreen\",\n                    \"data-type\": \"iframe\",\n                    className: \"custom-field-frame\",\n                    id: `customFieldFrame_${this.props.id.value}`,\n                    src: \"\",\n                    style: {\n                        maxWidth: `${this.props.frameWidth.value}px`,\n                        border: 'none',\n                        width: '100%',\n                        height: `${this.props.frameHeight.value}px`\n                    },\n                    \"data-width\": this.props.frameWidth.value,\n                    \"data-height\": this.props.frameHeight.value\n                }),\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"widget-inputs-wrapper\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            id: `input_${this.props.id.value}`,\n                            className: `form-hidden form-widget ${widgetRequired} ${widgetStatic}`,\n                            type: \"hidden\",\n                            name: this.props.qname.value,\n                            value: \"\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            id: `widget_settings_${this.props.id.value}`,\n                            className: \"form-hidden form-widget-settings\",\n                            type: \"hidden\",\n                            value: dataSettings,\n                            \"data-version\": \"2\"\n                        })\n                    ]\n                }),\n                !this.props.passive && /*#__PURE__*/ _jsx(\"script\", {\n                    type: \"text/javascript\",\n                    dangerouslySetInnerHTML: {\n                        __html: Widget.getEmbeddedScript(this.props)\n                    }\n                })\n            ]\n        });\n    }\n    get renderDirectEmbedWidgetCustomContent() {\n        const selectedField = 'selectedField' in this.props && this.props.selectedField.value ? this.props.selectedField.value : null;\n        const color = 'color' in this.props && this.props.color.value ? this.props.color.value : '#625df5';\n        const textColor = 'textColor' in this.props && this.props.textColor.value ? this.props.textColor.value : '#fff';\n        const buttonText = 'buttonText' in this.props && this.props.buttonText.value.trim().length > 0 ? this.props.buttonText.value : 'Record Video';\n        const customContentMap = {\n            // Adobe Sign, Echo Sign\n            '53bfd5c2ec70ec9f25000005': /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"widget-customContentPanel-wrapper\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"widget-customContentPanel\",\n                        children: /*#__PURE__*/ _jsx(\"input\", {\n                            className: \"echoSign-input widget-customContentPanel-input form-textbox email-input\",\n                            placeholder: \"myname@example.com\",\n                            size: \"30\",\n                            tabIndex: \"-1\"\n                        })\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"widget-customContentPanel\",\n                        children: /*#__PURE__*/ _jsx(\"button\", {\n                            className: \"echoSign-button widget-customContentPanel-input\",\n                            type: \"button\",\n                            id: \"signButton\",\n                            children: 'Sign with Adobe Sign'.locale()\n                        })\n                    })\n                ]\n            }),\n            // Accessibility Enhancer widget\n            '591bfab2b81b39d90500089b': /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    /*#__PURE__*/ _jsx(\"img\", {\n                        src: \"/assets/img/uncategorized/access-enhancer.svg\"\n                    }),\n                    /*#__PURE__*/ _jsxs(\"p\", {\n                        className: \"content\",\n                        children: [\n                            'This widget enhances the accessibility of your forms by modifying how error messages are displayed and adding ARIA (Accessible Rich Internet Applications Suite) attributes to your forms.'.locale(),\n                            /*#__PURE__*/ _jsx(\"br\", {}),\n                            /*#__PURE__*/ _jsx(\"b\", {\n                                children: 'Note: This widget will not be shown on your form.'.locale()\n                            })\n                        ]\n                    })\n                ]\n            }),\n            // Loom Video Recorder widget\n            '302518f9f4744e3ae379dd71': /*#__PURE__*/ _jsx(\"div\", {\n                className: \"widget-customContentPanel-wrapper\",\n                children: /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"widget-customContentPanel\",\n                    children: /*#__PURE__*/ _jsx(\"button\", {\n                        className: \"loom-video-recorder-button\",\n                        type: \"button\",\n                        style: {\n                            color: textColor,\n                            backgroundColor: color,\n                            borderColor: color\n                        },\n                        children: buttonText.locale()\n                    })\n                })\n            })\n        };\n        return customContentMap[selectedField];\n    }\n    renderDirectEmbedWidget() {\n        let content = null;\n        const widgetName = `${this.props.cfname.value} Widget`;\n        const widgetClassName = widgetName ? widgetName.replace(/\\s+/g, '-').toLowerCase() : '';\n        const defaultContent = typeof this.props.builderDescription !== 'undefined' && this.props.builderDescription.value && this.props.builderDescription.value.length > 0 && /*#__PURE__*/ _jsx(\"p\", {\n            children: this.props.builderDescription.value.trim().locale()\n        });\n        if (this.props.passive) {\n            content = /*#__PURE__*/ _jsxs(\"div\", {\n                className: widgetClassName,\n                style: {\n                    width: '100%',\n                    textAlign: `${this.props.boxAlign.value}`\n                },\n                \"data-component\": \"widget-directEmbed\",\n                children: [\n                    /*#__PURE__*/ _jsxs(\"p\", {\n                        children: [\n                            /*#__PURE__*/ _jsx(\"strong\", {\n                                style: {\n                                    marginBottom: '10px'\n                                },\n                                children: widgetName.locale()\n                            }),\n                            this.props.required.value === 'Yes' ? /*#__PURE__*/ _jsx(\"div\", {\n                                style: {\n                                    color: 'red',\n                                    display: 'inline-block',\n                                    textIndent: '9px',\n                                    fontWeight: 'bold'\n                                },\n                                children: \"*\"\n                            }) : ''\n                        ]\n                    }),\n                    this.renderDirectEmbedWidgetCustomContent || defaultContent,\n                    /*#__PURE__*/ _jsx(\"input\", {\n                        id: `input_${this.props.id.value}`,\n                        type: \"hidden\",\n                        className: \"form-widget\",\n                        value: \"\"\n                    })\n                ]\n            });\n        } else if (this.props.finalHTML && this.props.finalHTML.value !== '') {\n            // parse special embed parameters\n            // these parameters should be serve uniquely to avoid errors\n            // specially when widget duplication occurs\n            const specialParams = {\n                qname: this.props.qname.value,\n                qid: this.props.qid ? this.props.qid.value.split('input_')[1] : this.props.id.value\n            };\n            Object.keys(specialParams).forEach((skey)=>{\n                if (({}).hasOwnProperty.call(specialParams, skey)) {\n                    const specialParam = specialParams[skey];\n                    this.props.finalHTML.value = this.props.finalHTML.value.replace(new RegExp(`\\\\{${skey}\\\\}`, 'gim'), specialParam);\n                }\n            });\n            const widgetStatic = 'static' in this.props && this.props.static.value === 'Yes' ? 'widget-static' : '';\n            let directEmbedHTML = /*#__PURE__*/ _jsx(\"div\", {\n                className: `direct-embed-widgets ${widgetClassName} ${widgetStatic}`,\n                \"data-type\": \"direct-embed\",\n                style: {\n                    width: `${this.props.frameWidth.value}px`,\n                    minHeight: `${this.props.frameHeight.value}px`\n                },\n                dangerouslySetInnerHTML: {\n                    __html: this.props.finalHTML.value\n                }\n            });\n            // patch for specific widgets that already disabled\n            // and shouldnt appear on the form, use their client_id\n            const disabledWidgets = [\n                '52bd9113e8e18b8b76000070'\n            ];\n            if ('selectedField' in this.props && disabledWidgets.indexOf(this.props.selectedField.value) > -1) {\n                directEmbedHTML = '';\n            }\n            content = /*#__PURE__*/ _jsx(\"div\", {\n                style: {\n                    width: '100%',\n                    textAlign: `${this.props.boxAlign.value}`\n                },\n                \"data-component\": \"widget-directEmbed\",\n                children: directEmbedHTML\n            });\n        }\n        return content;\n    }\n    renderWebComponents() {\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            style: {\n                width: '100%',\n                textAlign: `${this.props.boxAlign.value}`\n            },\n            children: [\n                this.props.finalHTML && this.props.finalHTML.value !== '' && /*#__PURE__*/ _jsx(\"link\", {\n                    rel: \"import\",\n                    href: this.props.webComponentURL.value\n                }),\n                this.props.finalHTML && this.props.finalHTML.value !== '' && /*#__PURE__*/ _jsx(\"div\", {\n                    style: {\n                        width: `${this.props.frameWidth.value}px`,\n                        height: `${this.props.frameHeight.value}px`\n                    },\n                    children: this.props.finalHTML.value\n                })\n            ]\n        });\n    }\n    render() {\n        if (this.props.isOfflineModeEnabled) {\n            return /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"hidden-field-warning display-warning\",\n                \"aria-label\": 'Warning'.locale(),\n                children: [\n                    /*#__PURE__*/ _jsx(\"span\", {\n                        name: \"cw_moreinfo\",\n                        className: \"ji ji-cw_moreinfo\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"span\", {\n                        children: \"You can’t use widgets in offline mode.\"\n                    })\n                ]\n            });\n        }\n        let content = null;\n        switch(this.props.widgetType.value){\n            case 'widget':\n                content = this.renderWidget();\n                break;\n            case 'embed':\n                content = this.renderEmbedWidget();\n                break;\n            case 'field':\n                if (this.props.frameSrc.value !== '') {\n                    content = this.renderFieldWidget();\n                } else {\n                    content = null;\n                }\n                break;\n            case 'direct_embed':\n                content = this.renderDirectEmbedWidget();\n                break;\n            case 'webcomponents':\n                content = this.renderWebComponents();\n                break;\n            case 'native':\n                var _this_props_selectedField;\n                const selectedField = (_this_props_selectedField = this.props.selectedField) === null || _this_props_selectedField === void 0 ? void 0 : _this_props_selectedField.value;\n                switch(selectedField){\n                    case '54c10483b90217b7300000b7':\n                        content = /*#__PURE__*/ _jsx(Separator, _object_spread({}, this.props));\n                        break;\n                    case '528c8b8186659c5616000004':\n                        if (this.props.frameSrc.value !== '') {\n                            content = this.renderFieldWidget();\n                        } else {\n                            content = null;\n                        }\n                        break;\n                    default:\n                        content = null;\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n        return content;\n    }\n}\nexport { Widget as default };\nWidget.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    hasInputMask: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inputTextMask: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    confirmationHint: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultValue: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    formID: PropTypes.string,\n    frameSrc: PropTypes.shape(),\n    widgetType: PropTypes.shape(),\n    finalHTML: PropTypes.shape(),\n    frameWidth: PropTypes.shape(),\n    frameHeight: PropTypes.shape(),\n    webComponentURL: PropTypes.shape(),\n    boxAlign: PropTypes.shape(),\n    selectedField: PropTypes.shape(),\n    static: PropTypes.shape(),\n    builderDescription: PropTypes.shape(),\n    id: PropTypes.shape(),\n    passive: PropTypes.bool,\n    required: PropTypes.shape(),\n    cfname: PropTypes.shape(),\n    fieldParameters: PropTypes.shape(),\n    settingNames: PropTypes.shape(),\n    widgetTabs: PropTypes.shape(),\n    maxWidth: PropTypes.shape(),\n    finalSrc: PropTypes.shape(),\n    URL: PropTypes.shape(),\n    labelWidth: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number\n    ]),\n    formWidth: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.number\n    ]),\n    labelAlign: PropTypes.shape(),\n    label: PropTypes.shape(),\n    isOfflineModeEnabled: PropTypes.bool,\n    themeVersion: PropTypes.string,\n    cdnconfig: PropTypes.shape({\n        CDN: PropTypes.string\n    }),\n    enterprise: PropTypes.shape({\n        value: PropTypes.bool\n    }),\n    portalWidget: PropTypes.bool,\n    color: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    textColor: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    buttonText: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    environment: PropTypes.string\n};\nWidget.getEmbeddedScript = (props)=>{\n    const state = Widget.getState(props);\n    const widgetArray = [\n        '529467003477f3512000001f',\n        '52948fb29322cd302b00000c',\n        // '533946093c1ad0c45d000070', // 'Configurable List'\n        '528ee7cf8d5a5fc76a000004',\n        '12e02d58a07168bd32df509c',\n        '533a8c19a3f5fec35d00009a',\n        'b83739743814bf0ed1503bde' // Calendly\n    ];\n    if (props.widgetType.value === 'field') {\n        var _props_selectedField, _props_selectedField1;\n        const widgetParameter = props.themeVersion === 'v2' && widgetArray.indexOf((_props_selectedField = props.selectedField) === null || _props_selectedField === void 0 ? void 0 : _props_selectedField.value) > -1 ? '&ndt=1' : '';\n        const isBuilder = props.passive && props.themeVersion === 'v2' && widgetArray.indexOf((_props_selectedField1 = props.selectedField) === null || _props_selectedField1 === void 0 ? void 0 : _props_selectedField1.value) > -1 ? '&passive=1' : '';\n        const { SSL_URL = '', defaultValue = {} } = props;\n        let src = state.frameSrc; // replace domain for form-widgets\n        if (src.startsWith('/form-widgets') && SSL_URL) {\n            src = `${SSL_URL}${src.slice(1)}`;\n        }\n        // pass useJotformSign for smooth signature\n        const useJotformSignParameter = props.useJotformSign === 'Yes' && props.selectedField && (props.selectedField.value === '529467003477f3512000001f' || props.selectedField.value === '533a8c19a3f5fec35d00009a') ? `&useJotformSign=${props.useJotformSign}` : '';\n        return `setTimeout(function(){\n            var _cFieldFrame = document.getElementById(\"customFieldFrame_${props.id.value}\");\n            if (_cFieldFrame) {\n            _cFieldFrame.onload = function(){ \n              if (typeof widgetFrameLoaded !== 'undefined') { \n                widgetFrameLoaded(${props.id.value}, ${JSON.stringify(state.formProps)}, ${JSON.stringify(defaultValue.value)}) \n              } \n            };\n            _cFieldFrame.src = \"${encodeURI(src)}qid=${props.id.value}&isOpenedInPortal=${props.portalWidget}&isOpenedInAgent=${props.agentWidget}&align=${props === null || props === void 0 ? void 0 : props.boxAlign.value}&ref=\"\n            + encodeURIComponent(window.location.protocol + \"//\" + window.location.host) + '${widgetParameter}' + '${isBuilder}' + '${useJotformSignParameter}'\n            +'&injectCSS=' + encodeURIComponent(window.location.search.indexOf(\"ndt=1\") > -1);\n            _cFieldFrame.addClassName(\"custom-field-frame-rendered\");\n            }\n        }, 0);`;\n    }\n    return '';\n};\nWidget.getScript = (props)=>{\n    // only load script on builder and not on the live form\n    if (props.passive) {\n        return Widget.getEmbeddedScript(props);\n    }\n    return '';\n};\nWidget.getState = (props)=>{\n    const defaultState = {\n        formProps: {\n            formID: props.formID,\n            formBackground: props.formBackground !== '' ? props.formBackground : '#fff',\n            formFont: props.formFont\n        }\n    };\n    if (props.widgetType.value !== 'field') {\n        return defaultState;\n    }\n    let seperator = '?';\n    if (props.frameSrc.value.indexOf('?') > -1) {\n        seperator = '&';\n    }\n    // get frame src and normalize\n    let frameSrc = props.frameSrc.value + seperator;\n    frameSrc = frameSrc.trim().replace(/^(https?|ftp):/, '');\n    // fix htmlEscape bug, with single/multiple &amp; on a string\n    frameSrc = frameSrc.replace(/&(amp;)+/gi, '&');\n    // correct widget folder URLs w/o slash (prevent http redirect)\n    if (!frameSrc.match(/\\.(html|php)\\?/)) {\n        frameSrc = frameSrc.replace(/(\\w)\\?/, '$1/?');\n    }\n    return Object.assign(defaultState, {\n        frameSrc\n    });\n};\n","/* eslint-disable eqeqeq */ /* eslint-disable react/jsx-one-expression-per-line */ /* eslint-disable max-statements */ /* eslint-disable prefer-destructuring */ /* eslint-disable react/prop-types */ /* eslint-disable react/destructuring-assignment */ /* eslint-disable import/no-useless-path-segments */ /* eslint-disable max-lines */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport md5 from 'blueimp-md5';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { loadScript, parseJSON, paymentTypeWithTax, paymentTypeWithShipping } from '@jotforminc/form-common';\nimport { IconChevronDown } from '@jotforminc/svg-icons';\nimport FormatPrice from '../helpers/FormatPrice';\nimport MakeProductText from '../helpers/MakeProductText';\nimport SubLabel from '../helpers/SubLabel';\nimport { addValidation, classNames, getProductMinQuantity, JSONUnicodeEncode } from '../helpers/Utils';\nimport { getBiggestProductId, convertSubscriptionPeriod } from './PaymentUtils';\nimport ImageOverlay from './ImageOverlay';\nimport MultiSelectDropdown from './MultiSelectDropdown';\nimport PaymentDropdown from './PaymentDropdown';\nimport WarningMessage from './Payment/WarningMessage';\nclass ProductContainer extends Component {\n    // eslint-disable-next-line react/no-deprecated\n    componentWillReceiveProps(nextProps) {\n        // reset active product on field blur\n        if (!this.props.isSelectedQuestion && this.state.focusedProductId !== false) {\n            this.setFocusedProductId(false);\n        }\n        // set active product after adding new one\n        const oldProdArray = this.props.formProperties.products || [];\n        const newProdArray = nextProps.formProperties.products || [];\n        if (newProdArray && oldProdArray && newProdArray.length > 0 && newProdArray.length > oldProdArray.length) {\n            const lastProdId = newProdArray[newProdArray.length - 1].pid;\n            this.setFocusedProductId(lastProdId);\n        }\n    }\n    componentDidUpdate(prevProps) {\n        if (this.isGatewayOriginatedSubscription() && this.state.focusedProductId) {\n            this.setFocusedProductId(false);\n        }\n        // focus to active product name after adding product to DOM\n        const oldProdArray = prevProps.formProperties.products || [];\n        const newProdArray = this.props.formProperties.products || [];\n        if (newProdArray && oldProdArray && newProdArray.length > 0 && newProdArray.length > oldProdArray.length) {\n            const lastProdId = newProdArray[newProdArray.length - 1].pid;\n            const nameEl = document.querySelector(`#product-name-${this.props.qid.value}_${lastProdId} .inlineEditor`);\n            this.focusToText(nameEl);\n        }\n        const focusedProductEl = document.querySelector('.focusedProduct .form-product-item-detail');\n        if (focusedProductEl) {\n            const focusedBtnContainer = focusedProductEl.querySelector('.focus_action_button_container');\n            const { paymentListSettings } = this.props.formProperties;\n            if (paymentListSettings && paymentListSettings[0].productListLayout === 'HR' || !paymentListSettings) {\n                const btnContainerHeight = focusedProductEl.style.height || null;\n                focusedBtnContainer.style.height = `${btnContainerHeight}px`;\n            } else {\n                focusedBtnContainer.style.height = '';\n            }\n        }\n    }\n    // eslint-disable-next-line react/sort-comp\n    openToPaymentWizard(e) {\n        const { type, formProperties: { updateRightPanelMode, rightPanelToggle } } = this.props;\n        const prettifyGatewayName = type && type.value ? type.value.replace('control_', '') : '';\n        const isForceToGatewaySettings = e.target.getAttribute('isForce') === 'true';\n        const isAPM = this.props.nameAPM && this.props.nameAPM.value;\n        updateRightPanelMode('paymentsettings', true, e);\n        // eslint-disable-next-line no-undef\n        const rightPanelMode = JotForm.gatewayConfirmed !== true || isForceToGatewaySettings ? `gateway_${prettifyGatewayName}` : 'launcher';\n        setTimeout(()=>{\n            if (window.paymentStore) {\n                if (isAPM && type && type.value === 'control_payment') {\n                    window.paymentStore.changeMode('gatewayselectioneditor');\n                } else {\n                    window.paymentStore.changeMode(rightPanelMode);\n                }\n            }\n        }, 0);\n        rightPanelToggle(true);\n    }\n    openToProductEditor(pid, e) {\n        const { formProperties: { updateRightPanelMode, rightPanelToggle }, paymentType } = this.props;\n        updateRightPanelMode('paymentsettings', true, e);\n        setTimeout(()=>{\n            if (window.paymentStore && Array.isArray(window.paymentStore.products)) {\n                const activeProductIndex = window.paymentStore.products.findIndex((p)=>`${p.pid}` === `${pid}`);\n                if (activeProductIndex > -1 && window.paymentStore.mode !== 'gatewayselectioneditor') {\n                    // eslint-disable-next-line no-unused-expressions\n                    paymentType.value === 'subscription' ? window.paymentStore.setActiveSubscription(activeProductIndex) : window.paymentStore.setActiveProduct(activeProductIndex);\n                    window.paymentStore.changeMode(`${paymentType.value}editor`);\n                }\n            }\n        }, 0);\n        rightPanelToggle(true);\n    }\n    closeProductEditor() {\n        const { formProperties: { rightPanelToggle } } = this.props;\n        rightPanelToggle(false);\n    }\n    isGatewayOriginatedSubscription() {\n        const isSubscription = this.props.paymentType && this.props.paymentType.value === 'subscription';\n        const useStripeSubscriptions = this.props.useStripeSubscriptions && this.props.useStripeSubscriptions.value === '1';\n        const usePaypalSubscriptions = this.props.usePaypalSubscriptions && this.props.usePaypalSubscriptions.value === 'Yes';\n        return isSubscription && (useStripeSubscriptions || usePaypalSubscriptions);\n    }\n    setFocusedProductId(focusedProductId) {\n        if (this.isGatewayOriginatedSubscription()) {\n            this.setState({\n                focusedProductId: false\n            });\n        }\n        this.setState({\n            focusedProductId\n        });\n    }\n    handlePaymentSettingsText(text, forceToGatewaySettings = false) {\n        // Dear Developer: I need to add click event to a part of the text without breaking translation.\n        let dom = null;\n        const matches = text.split(/<a>(.*)<\\/a>/);\n        const aIndex = matches.findIndex((el)=>el === '');\n        const { formProperties: { id }, logJotFormEvents, accountType, username } = this.props;\n        const onTextClick = (e)=>{\n            this.openToPaymentWizard(e);\n            const logPaymentSettingsClick = matches && matches[1] === 'Payment Settings';\n            if (logPaymentSettingsClick) {\n                logJotFormEvents('productPanelEvents', {\n                    actor: username,\n                    action: 'click-paymentsettings-text',\n                    target: id\n                }, accountType);\n            }\n        };\n        switch(aIndex){\n            case 0:\n                dom = /*#__PURE__*/ _jsxs(\"span\", {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"a\", {\n                            isForce: forceToGatewaySettings.toString(),\n                            onClick: onTextClick,\n                            children: matches[1]\n                        }),\n                        matches[2]\n                    ]\n                });\n                break;\n            case -1:\n                dom = /*#__PURE__*/ _jsxs(\"span\", {\n                    children: [\n                        matches[0],\n                        /*#__PURE__*/ _jsx(\"a\", {\n                            isForce: forceToGatewaySettings.toString(),\n                            onClick: onTextClick,\n                            children: matches[1]\n                        }),\n                        matches[2]\n                    ]\n                });\n                break;\n            case 2:\n                dom = /*#__PURE__*/ _jsxs(\"span\", {\n                    children: [\n                        matches[0],\n                        /*#__PURE__*/ _jsx(\"a\", {\n                            isForce: forceToGatewaySettings.toString(),\n                            onClick: onTextClick,\n                            children: matches[1]\n                        })\n                    ]\n                });\n                break;\n            default:\n                dom = text;\n                break;\n        }\n        return dom;\n    }\n    getStocks() {\n        const { stocks } = this.props;\n        if (!Array.isArray(stocks) || Array.isArray(stocks) && stocks.length === 0) {\n            return {};\n        }\n        const groupedStocks = {};\n        stocks.forEach((s)=>{\n            if (groupedStocks[s.pid]) {\n                groupedStocks[s.pid].push({\n                    available_stock: parseInt(s.available_stock, 10),\n                    options: s.options\n                });\n            } else {\n                groupedStocks[s.pid] = [\n                    {\n                        available_stock: parseInt(s.available_stock, 10),\n                        options: s.options\n                    }\n                ];\n            }\n        });\n        return groupedStocks;\n    }\n    getActiveProductIndex(pid) {\n        return this.props.formProperties.products.findIndex((p)=>`${p.pid}` === `${pid}`);\n    }\n    // eslint-disable-next-line complexity\n    renderDonationPart() {\n        var _this_props_donationText, _this_props_suggestedDonation;\n        const additionalClass = addValidation(classNames.textbox, this.props, 'Numeric');\n        const donationAmountFilled = this.props.donationAmountField && this.props.donationAmountField.value > 0;\n        const minValueFilled = this.props.requireMinimum && this.props.requireMinimum.value === 'Yes' && this.props.suggestedDonation.value > 0;\n        return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            propPath: \"donationText\",\n            for: `${this.props.qid.value}_donation`,\n            labelValue: (_this_props_donationText = this.props.donationText) === null || _this_props_donationText === void 0 ? void 0 : _this_props_donationText.value,\n            link: this.props.currency.value,\n            wrapAlways: true,\n            testId: \"donationSubLabel\",\n            children: /*#__PURE__*/ _jsx(\"input\", {\n                type: \"text\",\n                className: additionalClass,\n                id: `${this.props.qid.value}_donation`,\n                name: `${this.props.qname.value}[price]`,\n                value: (_this_props_suggestedDonation = this.props.suggestedDonation) === null || _this_props_suggestedDonation === void 0 ? void 0 : _this_props_suggestedDonation.value,\n                readOnly: donationAmountFilled,\n                \"data-custom-amount-field\": donationAmountFilled ? this.props.donationAmountField.value : null,\n                \"data-min-amount\": minValueFilled ? this.props.suggestedDonation.value : null,\n                \"data-component\": \"paymentDonation\",\n                \"aria-labelledby\": `label_${this.props.id.value}`,\n                \"data-testid\": \"donationInput\"\n            })\n        }));\n    }\n    sortProductsByCategories() {\n        const { formProperties: { paymentListSettings, products } } = this.props;\n        const orderedProducts = [];\n        let productCategories = null;\n        if (!paymentListSettings || paymentListSettings[0] === undefined) {\n            return products;\n        }\n        productCategories = parseJSON(paymentListSettings[0].productCategories);\n        if (!productCategories || productCategories && productCategories.length === 0) {\n            return products;\n        }\n        const newProducts = {\n            jf_uncategorized: []\n        };\n        products.forEach((p, i)=>{\n            if (p.disabled === 'hide') return;\n            const product = JSON.parse(JSON.stringify(p));\n            product.item_id = i;\n            const categoryId = p.cid || 'jf_uncategorized';\n            if (!newProducts[categoryId]) {\n                newProducts[categoryId] = [];\n            }\n            newProducts[categoryId].push(product);\n        });\n        orderedProducts.push(...newProducts.jf_uncategorized);\n        productCategories.forEach((category)=>{\n            const categoryProducts = newProducts[category.id];\n            if (!categoryProducts || categoryProducts && categoryProducts.length === 0) {\n                return;\n            }\n            // Push category name\n            orderedProducts.push({\n                isCategory: true,\n                categoryName: category.name,\n                cid: category.id\n            });\n            // Push oredered category products\n            orderedProducts.push(...categoryProducts.sort((a, b)=>Number(a.corder) - Number(b.corder)));\n        });\n        this.reorderedProducts = orderedProducts;\n        if (!ProductContainer.staticVars.reorderedProducts) {\n            ProductContainer.staticVars.reorderedProducts = orderedProducts;\n        }\n        return orderedProducts;\n    }\n    getFilteredProducts(products, paymentListSettings) {\n        let filteredProducts = [];\n        if (paymentListSettings && paymentListSettings.showCategory === 'Yes' && paymentListSettings.showCategoryTitle === 'Yes') {\n            filteredProducts = this.sortProductsByCategories();\n        } else if (paymentListSettings && paymentListSettings.showCategory === 'Yes' && products && products.length > 0) {\n            const blockedProductsPid = [];\n            products.forEach((p)=>{\n                if (blockedProductsPid.includes(`${p.pid}`)) {\n                    return;\n                }\n                const connectedProducts = p.connectedProducts ? parseJSON(p.connectedProducts) : [];\n                if (connectedProducts && connectedProducts.length > 0) {\n                    filteredProducts.push(p); // Add current product\n                    blockedProductsPid.push(...connectedProducts);\n                } else {\n                    filteredProducts.push(p);\n                }\n            });\n        } else {\n            const blockedProductsPid = [];\n            if (products && products.length > 0) {\n                products.forEach((p)=>{\n                    if (blockedProductsPid.includes(`${p.pid}`)) {\n                        return;\n                    }\n                    const connectedProducts = p.connectedProducts ? parseJSON(p.connectedProducts) : [];\n                    if (connectedProducts && connectedProducts.length > 0) {\n                        blockedProductsPid.push(...connectedProducts);\n                    }\n                    filteredProducts.push(p);\n                });\n            }\n        }\n        return filteredProducts;\n    }\n    // eslint-disable-next-line complexity\n    renderProducts(isPaymentNewUi) {\n        const type = this.props.controlPaymentType;\n        let { paymentListSettings } = this.props.formProperties;\n        const stocks = typeof window !== 'undefined' ? this.getStocks() : null;\n        let hasShipping = false;\n        let activeProductCategory = null;\n        const brTag = /*#__PURE__*/ _jsx(\"br\", {});\n        let tempTaxSurcharge = '{}';\n        if (this.props.formProperties.taxes && this.props.formProperties.taxes[0] && this.props.formProperties.taxes[0].surcharge && typeof this.props.formProperties.taxes[0].surcharge !== 'string') {\n            tempTaxSurcharge = JSON.stringify(this.props.formProperties.taxes[0].surcharge);\n        } else if (this.props.formProperties.taxes && this.props.formProperties.taxes[0] && this.props.formProperties.taxes[0].surcharge) {\n            tempTaxSurcharge = this.props.formProperties.taxes[0].surcharge;\n        }\n        const hasTax = this.props.formProperties.taxes && this.props.formProperties.taxes[0] && (this.props.formProperties.taxes[0].rate > 0 || parseInt(safeJSONParse(tempTaxSurcharge).field, 10) > 0) && paymentTypeWithTax.indexOf(type) > -1 && (this.props.paymentType.value === 'product' || this.props.paymentType.value === 'subscription' && [\n            'control_square',\n            'control_payfast'\n        ].includes(this.props.type.value));\n        let tax = {};\n        if (hasTax) {\n            tax = this.props.formProperties.taxes && this.props.formProperties.taxes[0] ? this.props.formProperties.taxes[0] : {};\n        }\n        const taxExemptUnexist = tax.exemptions === null || typeof tax.exemptions === 'undefined';\n        if (paymentListSettings && paymentListSettings[0] !== undefined) {\n            // eslint-disable-next-line prefer-destructuring\n            paymentListSettings = paymentListSettings[0];\n        }\n        const opts = this.getFilteredProducts(this.props.formProperties.products, paymentListSettings);\n        const ptype = this.props.multiple.value === 'Yes' && this.props.paymentType.value !== 'subscription' ? 'checkbox' : 'radio';\n        const requiredProducts = opts.filter((item)=>item.required === '1' && item.disabled !== 'hide');\n        const allInputsDisabled = ptype === 'radio' && requiredProducts.length > 0;\n        const productsWithBr = [];\n        const lengthOfCategories = opts.reduce((acc, currentValue)=>currentValue.isCategory ? acc + 1 : acc, 0);\n        let lineCounter = 0;\n        let categoryIndex = 0;\n        let productCounter = 0;\n        try {\n            // eslint-disable-next-line complexity\n            const products = opts ? opts.map((p, pc)=>{\n                // skip disabled products\n                if (p.disabled && p.disabled === 'hide') {\n                    return null;\n                }\n                let hasSpecialPricing = false;\n                const highlight = this.props.formProperties.highlightLine !== 'Disabled' ? 'hover-product-item' : '';\n                let formProductImage = null;\n                let formProductImageUrl = null;\n                let imageClassName = '';\n                let isStockAvailable = false;\n                let sliderImage;\n                const categoryIds = [];\n                const isCategoriesLastProduct = typeof opts[pc].isCategory === 'undefined' && typeof opts[pc + 1] !== 'undefined' && typeof opts[pc + 1].isCategory !== 'undefined';\n                const isProductFocused = String(this.state.focusedProductId) === String(p.pid);\n                productCounter++;\n                if (p.isCategory) {\n                    productCounter = 0;\n                    lineCounter = 0;\n                    categoryIndex++;\n                    activeProductCategory = p.cid;\n                    if (paymentListSettings && paymentListSettings.showCategoryTitle === 'Yes') {\n                        const isLastCategory = categoryIndex === lengthOfCategories;\n                        return /*#__PURE__*/ _jsxs(\"span\", {\n                            className: `form-product-category-item ${this.isProductActive(activeProductCategory) ? '' : 'title_collapsed'} ${isLastCategory ? 'last_p_category' : ''}`,\n                            category: activeProductCategory,\n                            onClick: ()=>this.handleCollapsible(p),\n                            children: [\n                                /*#__PURE__*/ _jsx(\"b\", {\n                                    children: p.categoryName\n                                }),\n                                /*#__PURE__*/ _jsx(\"span\", {\n                                    className: \"selected-items-icon\"\n                                })\n                            ]\n                        });\n                    }\n                    return null;\n                }\n                if (p.cid) {\n                    categoryIds.push(p.cid);\n                    if (p.connectedProducts && parseJSON(p.connectedProducts).length > 0) {\n                        this.props.formProperties.products.forEach((product)=>{\n                            if (parseJSON(p.connectedProducts).includes(`${product.pid}`)) {\n                                categoryIds.push(product.cid);\n                            }\n                        });\n                    }\n                }\n                try {\n                    if (p.images && Array.isArray(p.images)) {\n                        sliderImage = p.images[0];\n                    } else if (p.images && typeof p.images === 'string' && JSON.parse(p.images)) {\n                        sliderImage = JSON.parse(p.images)[0];\n                    }\n                } catch (err) {\n                    console.log('Slider image parse error..');\n                }\n                if (stocks && stocks[p.pid]) {\n                    isStockAvailable = this.isStockAvailable(stocks[p.pid], p);\n                }\n                if (sliderImage || p.icon) {\n                    let productImage = sliderImage ? encodeURI(sliderImage) : p.icon.split('\"').join(\"'\");\n                    if (productImage && productImage.indexOf('?nc=1') > -1) {\n                        productImage = productImage.replace('?nc=1', '');\n                    }\n                    // TODO ADD ONCLICK EVENT\n                    // const imageClassName = hasOptions ? 'form-product-image-with-options' : 'form-product-image';\n                    imageClassName = 'form-product-image-with-options';\n                    formProductImage = /*#__PURE__*/ _jsx(\"img\", {\n                        loading: \"lazy\",\n                        src: productImage,\n                        alt: \"product\",\n                        className: imageClassName,\n                        width: \"50\",\n                        style: {\n                            height: 'auto',\n                            verticalAlign: 'middle'\n                        },\n                        onClick: ()=>this.openToProductEditor(p.pid)\n                    });\n                    formProductImageUrl = productImage;\n                }\n                let additionalClasses = '';\n                const inputName = `${this.props.qname.value}[][id]`;\n                let pid = p.pid;\n                if (p.hasExpandedOption === '1') {\n                    // add class for checkbox with subproducts\n                    additionalClasses = 'form-product-has-subproducts';\n                    // change pid for this product checkbox\n                    pid = `${p.pid}_expanded`;\n                }\n                ProductContainer.staticVars.productID[pc] = `${this.props.qid.value}_${p.pid}`;\n                // set calculation object if this product has no expanded option\n                if (!(p.hasExpandedOption === '1')) {\n                    // If subscription has setup fee, use it as the price when displaying total\n                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`] = {};\n                    if (p.setupfee && p.setupfee > 0 && this.props.paymentType.value === 'subscription') {\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].price = p.setupfee;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].recurring = p.price;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].firstPaymentVal = p.setupfee;\n                        if (p.customFirstPaymentPrice) {\n                            ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].customFirstPaymentPrice = p.customFirstPaymentPrice;\n                        }\n                    } else {\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].price = p.price;\n                    }\n                    // add braintree subscription add-on prices to calculation\n                    if (this.props.paymentType.value === 'subscription' && type === 'control_braintree') {\n                        if (typeof p.addOns === 'object' && p.addOns.length > 0 || typeof p.addOns === 'string' && p.addOns !== '[]') {\n                            const addOnsVal = typeof p.addOns === 'object' ? p.addOns : JSON.parse(p.addOns);\n                            ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].addons = 0;\n                            for(let i = 0; i < addOnsVal.length; i += 1){\n                                const addOn = addOnsVal[i]._attributes;\n                                if (addOn) {\n                                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].addons += parseFloat(addOn.amount, 10);\n                                }\n                            }\n                        }\n                    }\n                    // for subscriptions with custom price\n                    if (p.customPrice === '1' && this.props.paymentType.value === 'subscription') {\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`] = {\n                            price: 'custom'\n                        };\n                        if (p.setupfee && p.setupfee > 0) {\n                            ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].firstPaymentVal = p.setupfee;\n                        }\n                    }\n                    if (this.props.paymentType.value === 'subscription') {\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].recurrence_interval = convertSubscriptionPeriod(p.period).interval;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].recurrence_unit = convertSubscriptionPeriod(p.period).unit;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].first_interval = convertSubscriptionPeriod(p.setupfeePeriod).interval;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].first_unit = convertSubscriptionPeriod(p.setupfeePeriod).unit;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].trial_interval = convertSubscriptionPeriod(p.trial).interval;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].trial_unit = convertSubscriptionPeriod(p.trial).unit;\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].recurringtimes = p.recurringtimes;\n                    }\n                    // set shipping variables for totalcounter\n                    let pShipping = '';\n                    if (p.shipping) {\n                        if (typeof p.shipping !== 'string') {\n                            pShipping = JSON.stringify(p.shipping);\n                        } else {\n                            pShipping = p.shipping;\n                        }\n                    }\n                    if (pShipping.indexOf('{') !== -1 && paymentTypeWithShipping.indexOf(type) > -1 && (!this.props.digitalGoods || this.props.digitalGoods.value !== 'Yes')) {\n                        const ship = JSON.parse(pShipping);\n                        if (ship.firstItem || ship.flatRate) {\n                            hasShipping = true;\n                            ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].shipping = ship;\n                        }\n                    }\n                    // set tax variables\n                    const notExemptedProduct = tax.exemptions && tax.exemptions.indexOf(p.pid) === -1;\n                    if (hasTax && (taxExemptUnexist || notExemptedProduct)) {\n                        let taxSurcharge = '{}';\n                        if (tax.surcharge && typeof tax.surcharge !== 'string') {\n                            taxSurcharge = JSON.stringify(tax.surcharge);\n                        } else {\n                            taxSurcharge = tax.surcharge ? tax.surcharge : taxSurcharge;\n                        }\n                        ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].tax = {\n                            rate: tax.rate,\n                            surcharge: JSON.parse(taxSurcharge)\n                        };\n                    }\n                }\n                const noPrice = p.hasExpandedOption === '1' && p.hasSpecialPricing === '1';\n                const productStringsDefault = {\n                    productName: p.name,\n                    productDescription: p.description ? p.description.replace(/(\\r\\n|\\n|\\r)/gm, ' ').replace(/ +/g, ' ').trim() : ''\n                };\n                let productStrings = productStringsDefault;\n                if (this.props.passive) {\n                    productStrings = _object_spread({}, productStringsDefault, this.props.formProperties.products[pc]);\n                }\n                let inlineProductName;\n                let inlineDescription;\n                const productIndex = typeof p.item_id !== 'undefined' ? p.item_id.toString() : pc.toString();\n                if (this.props.inlineEditClass) {\n                    inlineProductName = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                        id: 'Form',\n                        pid: p.pid,\n                        propPath: `products[${productIndex}].name`,\n                        text: productStrings.productName || '',\n                        placeholder: 'Enter name',\n                        sanitizeText: true\n                    });\n                    inlineDescription = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                        id: 'Form',\n                        pid: p.pid,\n                        propPath: `products[${productIndex}].description`,\n                        text: productStrings.productDescription || '',\n                        placeholder: 'Enter description',\n                        sanitizeText: true\n                    });\n                }\n                let productNameHTML;\n                let productName = this.isGatewayOriginatedSubscription() ? productStrings.productName : inlineProductName || productStrings.productName;\n                if (isPaymentNewUi) {\n                    let productDesc = this.isGatewayOriginatedSubscription() ? productStrings.productDescription : inlineDescription || productStrings.productDescription;\n                    // do not show any placeholder if length === 0 and not focused product\n                    if (this.props.passive && !isProductFocused) {\n                        if (inlineProductName && inlineProductName.props.text.length === 0) productName = productStrings.productName;\n                        if (inlineDescription && inlineDescription.props.text.length === 0) productDesc = productStrings.productDescription;\n                    }\n                    productNameHTML = /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"title_description\",\n                        children: [\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"form-product-name\",\n                                id: `product-name-${this.props.qid.value}_${p.pid}`,\n                                children: productName\n                            }),\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"form-product-description\",\n                                id: `product-name-description-${this.props.qid.value}_${p.pid}`,\n                                children: productDesc\n                            })\n                        ]\n                    });\n                } else {\n                    productNameHTML = /*#__PURE__*/ _jsx(\"span\", {\n                        className: \"form-product-name\",\n                        id: `product-name-${this.props.qid.value}_${p.pid}`,\n                        children: productName\n                    });\n                }\n                let subscriptionText = null;\n                if (this.props.paymentType.value === 'product') {\n                    const useDecimal = !(this.props.useDecimal && this.props.useDecimal.value === 'No');\n                    let interval;\n                    if (type === 'control_authnet') {\n                        interval = p.period;\n                    } else {\n                        interval = p.trial;\n                    }\n                    subscriptionText = /*#__PURE__*/ _jsx(MakeProductText, {\n                        pid: p.pid,\n                        price: p.price,\n                        hasSpecialPricing: p.hasSpecialPricing,\n                        options: p.options,\n                        curr: this.props.currency.value,\n                        id: `${ProductContainer.staticVars.productID[pc]}_price`,\n                        noPrice: noPrice,\n                        passive: this.props.passive,\n                        useDecimal: useDecimal,\n                        interval: interval,\n                        gateway: this.props.type,\n                        isNewUi: isPaymentNewUi,\n                        isStockSoldOut: p.isStockControlEnabled === 'Yes' && isStockAvailable === false && typeof window !== 'undefined',\n                        inlineEditClass: this.props.inlineEditClass,\n                        itemId: productIndex,\n                        decimalMark: this.props.decimalMark,\n                        children: productNameHTML\n                    });\n                } else if (this.props.paymentType.value === 'subscription' && type === 'control_braintree') {\n                    let subsBrainTreeHasTrialPeriod = null;\n                    if (p.trialPeriod && p.trialPeriod !== '0') {\n                        subsBrainTreeHasTrialPeriod = /*#__PURE__*/ _jsxs(\"span\", {\n                            \"data-wrapper-react\": \"true\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"b\", {\n                                    children: \"Free\"\n                                }),\n                                \" for \",\n                                /*#__PURE__*/ _jsxs(\"u\", {\n                                    children: [\n                                        p.trialDuration,\n                                        \" \",\n                                        p.trialDurationUnit,\n                                        \"s\"\n                                    ]\n                                }),\n                                \", then\"\n                            ]\n                        });\n                    }\n                    let subsBrainTreeHasAddons = null;\n                    if (typeof p.addOns === 'object' && p.addOns.length > 0 || typeof p.addOns === 'string' && p.addOns !== '[]') {\n                        const subsBrainTreeaddOnsVal = typeof p.addOns === 'object' ? JSON.parse(JSON.stringify(p.addOns)) : JSON.parse(p.addOns);\n                        const subsBrainTreeaddOnsArray = [];\n                        for(let i = 0; i < subsBrainTreeaddOnsVal.length; i += 1){\n                            if (i > 0) {\n                                subsBrainTreeaddOnsArray.push(brTag);\n                            }\n                            const subsBrainTreeaddOn = subsBrainTreeaddOnsVal[i]._attributes;\n                            if (subsBrainTreeaddOn) {\n                                const subsBrainTreeaddOnElement = /*#__PURE__*/ _jsxs(\"span\", {\n                                    \"data-wrapper-react\": \"true\",\n                                    children: [\n                                        \"+ \",\n                                        subsBrainTreeaddOn.name,\n                                        \": \",\n                                        /*#__PURE__*/ _jsx(FormatPrice, {\n                                            priceAmount: subsBrainTreeaddOn.amount,\n                                            currency: p.currencyIsoCode\n                                        })\n                                    ]\n                                });\n                                subsBrainTreeaddOnsArray.push(subsBrainTreeaddOnElement);\n                            }\n                        }\n                        subsBrainTreeHasAddons = /*#__PURE__*/ _jsx(\"p\", {\n                            className: \"braintree-addons-box\",\n                            children: subsBrainTreeaddOnsArray\n                        });\n                    }\n                    subscriptionText = /*#__PURE__*/ _jsxs(\"span\", {\n                        \"data-wrapper-react\": \"true\",\n                        children: [\n                            productNameHTML,\n                            /*#__PURE__*/ _jsxs(\"span\", {\n                                className: \"form-product-details\",\n                                children: [\n                                    \"(\",\n                                    subsBrainTreeHasTrialPeriod,\n                                    /*#__PURE__*/ _jsx(\"b\", {\n                                        children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                            priceAmount: p.price,\n                                            currency: p.currencyIsoCode,\n                                            priceID: `${ProductContainer.staticVars.productID[pc]}_price`\n                                        })\n                                    }),\n                                    ' ',\n                                    \"for each \",\n                                    p.billingFrequency === '1' ? '' : p.billingFrequency,\n                                    /*#__PURE__*/ _jsx(\"u\", {\n                                        children: \"month\"\n                                    }),\n                                    \")\",\n                                    subsBrainTreeHasAddons\n                                ]\n                            })\n                        ]\n                    });\n                } else if (this.props.paymentType.value === 'subscription' && [\n                    'control_stripe',\n                    'control_paypalcomplete'\n                ].includes(type) && p.interval) {\n                    let subscriptionFirstSequence = null;\n                    if (p.trial_period_days) {\n                        subscriptionFirstSequence = /*#__PURE__*/ _jsxs(\"span\", {\n                            \"data-wrapper-react\": \"true\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"b\", {\n                                    children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                        priceAmount: p.setupfee,\n                                        currency: p.currency.toUpperCase()\n                                    })\n                                }),\n                                p.setupfee == '0' ? 'for '.locale() : ' for '.locale(),\n                                /*#__PURE__*/ _jsxs(\"u\", {\n                                    children: [\n                                        p.trial_period_days,\n                                        \" days\"\n                                    ]\n                                }),\n                                \", then \"\n                            ]\n                        });\n                    }\n                    let intervalCount = /*#__PURE__*/ _jsxs(\"u\", {\n                        children: [\n                            p.interval_count,\n                            \" \",\n                            p.interval,\n                            \"s\"\n                        ]\n                    });\n                    if (p.interval_count === 1) {\n                        intervalCount = /*#__PURE__*/ _jsxs(\"u\", {\n                            children: [\n                                \"$\",\n                                p.interval\n                            ]\n                        });\n                    }\n                    subscriptionText = /*#__PURE__*/ _jsxs(\"span\", {\n                        \"data-wrapper-react\": \"true\",\n                        children: [\n                            productNameHTML,\n                            /*#__PURE__*/ _jsxs(\"span\", {\n                                className: \"form-product-details\",\n                                children: [\n                                    \"(\",\n                                    subscriptionFirstSequence,\n                                    /*#__PURE__*/ _jsx(\"b\", {\n                                        children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                            priceAmount: p.price,\n                                            currency: p.currency.toUpperCase(),\n                                            priceID: `${ProductContainer.staticVars.productID[pc]}_price`\n                                        })\n                                    }),\n                                    p.price == '0' ? 'for '.locale() : ' for '.locale(),\n                                    intervalCount,\n                                    \")\"\n                                ]\n                            })\n                        ]\n                    });\n                } else {\n                    let interval;\n                    if (type === 'control_authnet') {\n                        switch(p.period){\n                            case 'Monthly':\n                                interval = 'month';\n                                break;\n                            case 'Daily':\n                                interval = 'day';\n                                break;\n                            case 'Bi-Weekly':\n                                interval = 'two weeks';\n                                break;\n                            case 'Bi-Monthly':\n                                interval = 'two months';\n                                break;\n                            case 'Quarterly':\n                                interval = '3 months';\n                                break;\n                            case 'Semi-Yearly':\n                                interval = 'six months';\n                                break;\n                            case 'Yearly':\n                                interval = 'year';\n                                break;\n                            case 'Bi-Yearly':\n                                interval = 'two years';\n                                break;\n                            default:\n                                interval = p.period;\n                        }\n                    } else {\n                        interval = p.trial;\n                    }\n                    subscriptionText = /*#__PURE__*/ _jsx(MakeProductText, {\n                        pid: p.pid,\n                        price: p.price,\n                        hasSpecialPricing: p.hasSpecialPricing,\n                        options: p.options,\n                        curr: this.props.currency.value,\n                        useDecimal: this.props.useDecimal.value === 'Yes',\n                        duration: p.period,\n                        setupfee: p.setupfee,\n                        setupfeePeriod: p.setupfeePeriod === '' ? 'None' : p.setupfeePeriod,\n                        productTrial: p.trial,\n                        id: `${ProductContainer.staticVars.productID[pc]}_price`,\n                        times: p.recurringtimes,\n                        noPrice: false,\n                        passive: this.props.passive,\n                        customPrice: p.customPrice,\n                        customPriceSource: p.customPriceSource,\n                        customPriceName: p.customPrice === '1' ? `${this.props.qname.value}[custom_price_${p.pid}]` : '',\n                        customFirstPaymentPrice: p.customFirstPaymentPrice === '1',\n                        customFirstPaymentPriceSource: p.customFirstPaymentPriceSource,\n                        customFirstPaymentName: p.customFirstPaymentPrice ? `${this.props.qname.value}[custom_first_payment_price_${p.pid}]` : '',\n                        interval: interval,\n                        gateway: this.props.type.value,\n                        themeVersion: this.props.themeVersion,\n                        isNewUi: isPaymentNewUi,\n                        children: productNameHTML\n                    });\n                }\n                const optionsArray = [];\n                let productOptionsArray = [];\n                if (p.options && typeof p.options === 'string') {\n                    try {\n                        productOptionsArray = JSON.parse(p.options);\n                    } catch (error) {\n                        console.log(error);\n                    }\n                } else if (p.options && Array.isArray(p.options)) {\n                    productOptionsArray = p.options;\n                }\n                if (productOptionsArray.length > 0) {\n                    /*\n           * For products with an option that is expanded and turned into subproducts\n           */ if (p.hasExpandedOption === '1') {\n                        const pOptions = typeof p.options === 'string' ? JSON.parse(p.options) : JSON.parse(JSON.stringify(p.options));\n                        let eopts = []; // expanded option's properties\n                        let expandedOption; // expanded option object\n                        let eoptsIndex; // the expanded option's order\n                        // find the option to expand\n                        const orderedSubproductOptionNames = [];\n                        for(let i = 0; i < pOptions.length; i += 1){\n                            if (pOptions[i].type === 'custom') {\n                                orderedSubproductOptionNames.push(pOptions[i].name);\n                            }\n                            if (pOptions[i].expanded) {\n                                // assign to var then delete from the options list\n                                eopts = pOptions[i].properties.split('\\n');\n                                expandedOption = pOptions[i];\n                                eoptsIndex = i;\n                                // remove it from the list of (cloned) product options\n                                delete pOptions[i];\n                            }\n                        }\n                        if (orderedSubproductOptionNames.length > 0) {\n                            ProductContainer.staticVars.orderedSubproductOptionNames[p.pid] = orderedSubproductOptionNames;\n                        }\n                        const rowhtml = []; // row html\n                        const headinghtml = [];\n                        let headingHtmlInitial = [];\n                        if (expandedOption) {\n                            // heading for the other options\n                            headingHtmlInitial = /*#__PURE__*/ _jsx(\"th\", {\n                                style: {\n                                    textAlign: 'left'\n                                },\n                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                    className: \"form-sub-label\",\n                                    children: expandedOption.name\n                                })\n                            });\n                        }\n                        // add price column if there are special prices for this product\n                        const headingHtmlSpecial = p.hasSpecialPricing === '1' ? /*#__PURE__*/ _jsx(\"th\", {\n                            style: {\n                                textAlign: 'right'\n                            },\n                            children: /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"form-sub-label\",\n                                children: 'Price'.locale()\n                            })\n                        }) : null;\n                        headinghtml.push(headingHtmlInitial);\n                        for(let poo = 0; poo < pOptions.length; poo += 1){\n                            let headingOption = null;\n                            if (pOptions[poo]) {\n                                headingOption = /*#__PURE__*/ _jsx(\"th\", {\n                                    style: {\n                                        textAlign: 'left'\n                                    },\n                                    children: /*#__PURE__*/ _jsx(\"span\", {\n                                        className: \"form-product-options-text form-sub-label\",\n                                        children: pOptions[poo].name\n                                    })\n                                });\n                            }\n                            headinghtml.push(headingOption);\n                        }\n                        headinghtml.push(headingHtmlSpecial);\n                        const returnHeadingValue = /*#__PURE__*/ _jsx(\"tr\", {\n                            children: headinghtml\n                        });\n                        rowhtml.push(returnHeadingValue);\n                        for(let i = 0; i < eopts.length; i += 1){\n                            const optshtml = [];\n                            ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`] = {};\n                            ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].price = p.price;\n                            // if this has special pricing, set the calculation object\n                            let specialPrice = null;\n                            if (expandedOption.specialPricing && expandedOption.specialPrices) {\n                                const eid = `${this.props.qid.value}_${p.pid}_${i}`;\n                                const splist = expandedOption.specialPrices.split(',');\n                                specialPrice = splist[i];\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].child = true;\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].specialPriceField = eid;\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].specialPriceList = splist;\n                            }\n                            const eoptprice = specialPrice || p.price;\n                            // heading for sub-products\n                            // set shipping variables for total counter\n                            // this is for sub products\n                            let pShipping = '';\n                            if (p.shipping) {\n                                if (typeof p.shipping !== 'string') {\n                                    pShipping = JSON.stringify(p.shipping);\n                                } else {\n                                    pShipping = p.shipping;\n                                }\n                            }\n                            if (pShipping.indexOf('{') !== -1 && paymentTypeWithShipping.indexOf(type) > -1 && (!this.props.digitalGoods || this.props.digitalGoods.value !== 'Yes')) {\n                                const ship = JSON.parse(pShipping);\n                                if (ship.firstItem || ship.flatRate) {\n                                    hasShipping = true;\n                                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].shipping = ship;\n                                }\n                            }\n                            // set tax for total counter\n                            // for sub products\n                            const notExemptedProduct = tax.exemptions && tax.exemptions.indexOf(p.pid) === -1;\n                            if (hasTax && (taxExemptUnexist || notExemptedProduct)) {\n                                let taxSurcharge = '{}';\n                                if (tax.surcharge && typeof tax.surcharge !== 'string') {\n                                    taxSurcharge = JSON.stringify(tax.surcharge);\n                                } else {\n                                    taxSurcharge = tax.surcharge ? tax.surcharge : taxSurcharge;\n                                }\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].tax = {\n                                    rate: tax.rate,\n                                    surcharge: JSON.parse(taxSurcharge)\n                                };\n                            }\n                            for(let po = 0; po < pOptions.length; po += 1){\n                                const opt = pOptions[po];\n                                if (!opt) {\n                                    continue;\n                                }\n                                const sid = `${this.props.qid.value}_${opt.type}_${p.pid}_${i}_${po}`;\n                                if (opt.type === 'quantity') {\n                                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].quantityField = sid;\n                                } else if (opt.type === 'custom') {\n                                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`][`customField_${po}`] = sid;\n                                }\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].expandedValue = eopts[i];\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].expandedValueIndex = eoptsIndex;\n                                const sopts = opt.properties.split('\\n');\n                                // if product has special pricing, collect special pricing arrays\n                                if (opt.specialPricing && opt.specialPrices) {\n                                    // eslint-disable-next-line max-lines\n                                    const splist = opt.specialPrices.split(',');\n                                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].specialPriceField = sid;\n                                    ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}_${i}`].specialPriceList = splist;\n                                }\n                                let opthtmlInput = null;\n                                if (opt.properties === 'Custom Quantity' && sopts.length === 1) {\n                                    // TODO ADD PASSIVE MODE\n                                    opthtmlInput = /*#__PURE__*/ _jsx(\"input\", {\n                                        type: \"text\",\n                                        size: \"3\",\n                                        value: \"0\",\n                                        className: `${addValidation(classNames.textbox, this.props)} form-subproduct-quantity form-subproduct-option form-product-custom_quantity`,\n                                        name: `${this.props.qname.value}[special_${p.pid}_${i}][item_${po}]`,\n                                        id: sid\n                                    });\n                                } else {\n                                    const className = opt.type === 'quantity' ? ' form-subproduct-quantity' : '';\n                                    const defaultOption = opt.type === 'quantity' ? /*#__PURE__*/ _jsx(\"option\", {\n                                        value: \"0\"\n                                    }) : null;\n                                    const selectOptions = [];\n                                    if (!this.props.passive) {\n                                        for(let vv = 0; vv < sopts.length; vv += 1){\n                                            const selectOption = /*#__PURE__*/ _jsx(\"option\", {\n                                                value: sopts[vv],\n                                                children: sopts[vv]\n                                            });\n                                            selectOptions.push(selectOption);\n                                        }\n                                    }\n                                    if (isPaymentNewUi) {\n                                        opthtmlInput = /*#__PURE__*/ _jsx(\"span\", {\n                                            className: \"select_cont\",\n                                            children: /*#__PURE__*/ _jsxs(\"select\", {\n                                                className: `${addValidation(classNames.dropdown, this.props)} ${className} form-subproduct-option`,\n                                                name: `${this.props.qname.value}[special_${p.pid}_${i}][item_${po}]`,\n                                                id: sid,\n                                                children: [\n                                                    defaultOption,\n                                                    selectOptions\n                                                ]\n                                            })\n                                        });\n                                    } else {\n                                        opthtmlInput = /*#__PURE__*/ _jsxs(\"select\", {\n                                            className: `${addValidation(classNames.dropdown, this.props)} ${className} form-subproduct-option`,\n                                            name: `${this.props.qname.value}[special_${p.pid}_${i}][item_${po}]`,\n                                            id: sid,\n                                            children: [\n                                                defaultOption,\n                                                selectOptions\n                                            ]\n                                        });\n                                    }\n                                }\n                                const opthtml = /*#__PURE__*/ _jsx(\"td\", {\n                                    style: {\n                                        textAlign: 'center'\n                                    },\n                                    \"data-title\": opt.name,\n                                    children: opthtmlInput\n                                });\n                                optshtml.push(opthtml);\n                            }\n                            const optshtmlHiddenColumn = /*#__PURE__*/ _jsxs(\"td\", {\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"input\", {\n                                        type: \"hidden\",\n                                        value: eopts[i].replace(/\"/g, '&quot;'),\n                                        name: `${this.props.qname.value}[special_${p.pid}_${i}][item_${eoptsIndex}]`\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"input\", {\n                                        type: \"checkbox\",\n                                        checked: \"checked\",\n                                        id: `${this.props.qid.value}_${p.pid}_${i}`,\n                                        style: {\n                                            display: 'none'\n                                        },\n                                        name: `${this.props.qname.value}[][id]`,\n                                        value: `${p.pid}_${i}`,\n                                        readOnly: true\n                                    })\n                                ]\n                            });\n                            const eopthtml = /*#__PURE__*/ _jsx(\"th\", {\n                                style: {\n                                    textAlign: 'left'\n                                },\n                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                    className: \"form-product-child-label\",\n                                    style: {\n                                        fontSize: '0.786em'\n                                    },\n                                    children: eopts[i]\n                                })\n                            });\n                            const eopthtmlSpecialPricing = p.hasSpecialPricing === '1' ? /*#__PURE__*/ _jsx(\"td\", {\n                                style: {\n                                    textAlign: 'left'\n                                },\n                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                    className: \"form-product-child-price form-product-child-label\",\n                                    children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                        priceAmount: eoptprice,\n                                        currency: this.props.currency.value,\n                                        priceID: `${this.props.qid.value}_${p.pid}_${i}_price`,\n                                        nofree: true\n                                    })\n                                })\n                            }) : null;\n                            const optshtmlRow = /*#__PURE__*/ _jsxs(\"tr\", {\n                                children: [\n                                    eopthtml,\n                                    optshtml,\n                                    eopthtmlSpecialPricing,\n                                    optshtmlHiddenColumn\n                                ]\n                            });\n                            rowhtml.push(optshtmlRow);\n                        }\n                        const tableHtml = /*#__PURE__*/ _jsx(\"table\", {\n                            id: `${this.props.qid.value}_${p.pid}_subproducts`,\n                            className: \"form-product-child-table\",\n                            children: /*#__PURE__*/ _jsx(\"tbody\", {\n                                children: rowhtml\n                            })\n                        });\n                        optionsArray.push(tableHtml);\n                    } else {\n                        if (!isPaymentNewUi) {\n                            optionsArray.push(brTag);\n                            optionsArray.push(brTag);\n                        }\n                        for(let po = 0; po < productOptionsArray.length; po += 1){\n                            const opt = productOptionsArray[po];\n                            const sid = `${this.props.qid.value}_${opt.type}_${p.pid}_${po}`;\n                            if (opt.type === 'quantity') {\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].quantityField = sid;\n                            } else if (opt.type === 'custom') {\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`][`custom_${po}`] = sid;\n                            }\n                            const sopts = opt.properties.split('\\n');\n                            // if product has special pricing, collect special pricing arrays\n                            if (opt.specialPricing && opt.specialPrices) {\n                                const splist = opt.specialPrices.split(',');\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].specialPriceField = sid;\n                                ProductContainer.staticVars.totalCounter[`${this.props.qid.value}_${p.pid}`].specialPriceList = splist;\n                                hasSpecialPricing = true;\n                            }\n                            let customQuantity = null;\n                            if (opt.properties === 'Custom Quantity' && sopts.length === 1) {\n                                // TODO: add PASSIVE mode LOGIC\n                                customQuantity = /*#__PURE__*/ _jsx(\"input\", {\n                                    type: \"text\",\n                                    size: \"3\",\n                                    defaultValue: opt.defaultQuantity || 0,\n                                    value: opt.defaultQuantity || 0,\n                                    className: `${addValidation(classNames.textbox, this.props)} form-product-custom_quantity`,\n                                    name: `${this.props.qname.value}[special_${p.pid}][item_${po}]`,\n                                    id: sid\n                                });\n                            } else {\n                                // TODO: add escapeValue function\n                                const soptsConditional = sopts.length > 0 && this.props.passive ? [\n                                    sopts[0]\n                                ] : sopts;\n                                const customQuantitySelectOptions = soptsConditional.map((sopt)=>{\n                                    return /*#__PURE__*/ _jsx(\"option\", {\n                                        value: sopt,\n                                        children: sopt\n                                    }, sopt);\n                                });\n                                if (isPaymentNewUi) {\n                                    customQuantity = /*#__PURE__*/ _jsx(\"span\", {\n                                        className: \"select_cont\",\n                                        children: /*#__PURE__*/ _jsx(\"select\", {\n                                            className: `${addValidation(classNames.dropdown, this.props)}`,\n                                            name: `${this.props.qname.value}[special_${p.pid}][item_${po}]`,\n                                            id: sid,\n                                            \"aria-label\": `Select ${opt.name}`,\n                                            children: customQuantitySelectOptions\n                                        })\n                                    });\n                                } else {\n                                    customQuantity = /*#__PURE__*/ _jsx(\"select\", {\n                                        className: `${addValidation(classNames.dropdown, this.props)}`,\n                                        name: `${this.props.qname.value}[special_${p.pid}][item_${po}]`,\n                                        id: sid,\n                                        children: customQuantitySelectOptions\n                                    });\n                                }\n                            }\n                            const subLabelCustomQuantity = /*#__PURE__*/ _jsx(SubLabel, {\n                                labelValue: opt.name,\n                                wrapAlways: true,\n                                for: sid,\n                                reverse: true,\n                                children: customQuantity\n                            }, sid);\n                            optionsArray.push(subLabelCustomQuantity);\n                        }\n                    }\n                }\n                // for customer-defined recurring times\n                if (p.recurringtimes && p.recurringtimes === 'customer-selected') {\n                    const recurringTimesOptions = [];\n                    for(let i = 0; i < 52; i += 1){\n                        const rtOption = /*#__PURE__*/ _jsx(\"option\", {\n                            value: i + 1,\n                            children: i + 1\n                        });\n                        recurringTimesOptions.push(rtOption);\n                    }\n                    const recurringTimes = /*#__PURE__*/ _jsx(_Fragment, {\n                        children: /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"custom-recurring-payments-wrapper\",\n                            children: [\n                                /*#__PURE__*/ _jsxs(\"select\", {\n                                    name: `custom_recurringtimes[${p.pid}]`,\n                                    className: `custom-recurring-payments test custom_recurringtimes[${p.pid}]`,\n                                    id: `recurring-times_${p.pid}`,\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"option\", {\n                                            value: \"unlimited\",\n                                            children: 'Unlimited'.locale()\n                                        }),\n                                        recurringTimesOptions\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsx(IconChevronDown, {\n                                    className: \"custom-recurring-payments-dropdown-icon\"\n                                })\n                            ]\n                        })\n                    });\n                    const recurringTimesSublabel = /*#__PURE__*/ _jsx(SubLabel, {\n                        labelValue: \"Recurring payments\",\n                        children: recurringTimes\n                    });\n                    optionsArray.push(brTag);\n                    optionsArray.push(brTag);\n                    optionsArray.push(recurringTimesSublabel);\n                }\n                if (p.showSubtotal && p.showSubtotal !== '0' && p.showSubtotal !== 'false' && (p.hasQuantity === '1' || hasSpecialPricing || p.hasExpandedOption === '1')) {\n                    const subTotal = /*#__PURE__*/ _jsxs(\"span\", {\n                        className: \"form-special-subtotal\",\n                        children: [\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"form-item-subtotal\",\n                                children: 'Item subtotal:'.locale()\n                            }),\n                            /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: `${ProductContainer.staticVars.productID[pc]}_item_subtotal`,\n                                nofree: true\n                            })\n                        ]\n                    });\n                    optionsArray.push(brTag);\n                    optionsArray.push(subTotal);\n                }\n                // TODO: add first input's onClick event\n                const disabledCheckbox = ptype === 'checkbox' && !!Number(p.required) ? true : null;\n                // TODO: Open payment wizard with the correct product.\n                const quantityOption = Array.isArray(p.options) ? p.options.find((option)=>option.type === 'quantity') : false;\n                const canCheck = !(p.hasQuantity === '1' && !(p.hasExpandedOption === '1') && quantityOption && quantityOption.properties === 'Custom Quantity' && quantityOption.defaultQuantity < 1);\n                const preventFocusClassList = [\n                    'inlineEditor',\n                    'btn-inline-product-settings',\n                    'image_area',\n                    'p_image',\n                    'input_pImage'\n                ];\n                // Grid Layout\n                let gridClass = '';\n                if (paymentListSettings && paymentListSettings.productListLayout) {\n                    switch(paymentListSettings.productListLayout){\n                        case 'V2C':\n                            gridClass = `on_col${(lineCounter % 2 + 1).toString()}`;\n                            lineCounter++;\n                            break;\n                        case 'V3C':\n                            gridClass = `on_col${(lineCounter % 3 + 1).toString()}`;\n                            lineCounter++;\n                            break;\n                        default:\n                            break;\n                    }\n                }\n                let productClassName = `form-product-item ${highlight} ${gridClass}`;\n                if (!this.isProductActive(activeProductCategory)) {\n                    productClassName += ' not-category-found';\n                }\n                // Add class only for builder.\n                if (p.isStockControlEnabled === 'Yes' && isStockAvailable === false && typeof window !== 'undefined') {\n                    productClassName += ' sold_out_product';\n                }\n                if (isPaymentNewUi) {\n                    const isImageExist = formProductImage !== null; // Is Image Exist\n                    const isQuantityOrOptionsExist = optionsArray.length !== 0; // Is Quantity or Option Exists\n                    const isSubtotalDisplayed = p.showSubtotal && p.showSubtotal !== '0' ? true : false; // Is total exist\n                    if (isImageExist) productClassName += ' show_image';\n                    if (this.props.isSelectedQuestion && this.props.isSelectedQuestion === true || p.description) productClassName += ' show_desc';\n                    if (isQuantityOrOptionsExist) productClassName += ' show_option';\n                    if (isSubtotalDisplayed && (p.hasQuantity === '1' || hasSpecialPricing)) productClassName += ' show_subtotal';\n                    if (p.hasExpandedOption === '1') {\n                        if (p.selected === '1') {\n                            productClassName += ' show_sub_product';\n                        } else {\n                            productClassName += ' sub_product';\n                        }\n                    }\n                    if (p.fitImageToCanvas === 'No') {\n                        productClassName += ' full_img';\n                    }\n                    if (this.state.focusedProductId && isProductFocused && this.props.isSelectedQuestion) productClassName += ' focusedProduct';\n                }\n                additionalClasses += ' form-product-input';\n                let renderProduct;\n                if (isPaymentNewUi) {\n                    renderProduct = /*#__PURE__*/ _jsxs(_Fragment, {\n                        children: [\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: `${productClassName} new_ui`,\n                                categories: categoryIds.length > 0 ? categoryIds.toString() : 'non-categorized',\n                                \"active-category\": p.cid || activeProductCategory,\n                                pid: p.pid,\n                                \"aria-labelledby\": `label_${this.props.id.value}`,\n                                onClick: (e)=>{\n                                    if (this.state.focusedProductId && isProductFocused) {\n                                        if (preventFocusClassList.some((cName)=>e.target.classList.contains(cName))) return;\n                                        this.setFocusedProductId(false);\n                                    } else if (!e.target.classList.contains('input_pImage')) {\n                                        this.setFocusedProductId(p.pid);\n                                        this.closeProductEditor();\n                                    }\n                                },\n                                children: /*#__PURE__*/ _jsxs(\"div\", {\n                                    \"data-wrapper-react\": \"true\",\n                                    className: \"form-product-item-detail new_ui\",\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"p_col\",\n                                            children: /*#__PURE__*/ _jsxs(\"div\", {\n                                                className: \"p_checkbox\",\n                                                children: [\n                                                    this.props.passive && isProductFocused && this.props.isSelectedQuestion && (!!Number(p.selected) && /*#__PURE__*/ _jsx(\"span\", {\n                                                        className: \"p-number selected-by-default\",\n                                                        children: productCounter\n                                                    }) || !Number(p.selected) && /*#__PURE__*/ _jsx(\"span\", {\n                                                        className: \"p-number\",\n                                                        children: productCounter\n                                                    })),\n                                                    /*#__PURE__*/ _jsx(\"input\", {\n                                                        className: `${addValidation(classNames[ptype], this.props)} ${additionalClasses}`,\n                                                        type: ptype,\n                                                        id: `${this.props.qid.value}_${p.pid}`,\n                                                        name: inputName,\n                                                        \"data-inputname\": inputName,\n                                                        value: pid,\n                                                        checked: !!Number(p.selected) && canCheck,\n                                                        readOnly: true,\n                                                        disabled: allInputsDisabled || disabledCheckbox && canCheck,\n                                                        required: allInputsDisabled || disabledCheckbox && canCheck,\n                                                        \"aria-label\": !!Number(p.selected) && canCheck ? `Selected Product: ${p.name}` : `Select Product: ${p.name}`,\n                                                        \"data-is-default-required\": !!Number(p.required) && !!Number(p.selected),\n                                                        \"data-is-default-selected\": !!Number(p.selected)\n                                                    }),\n                                                    /*#__PURE__*/ _jsx(\"div\", {\n                                                        className: \"checked\"\n                                                    }),\n                                                    /*#__PURE__*/ _jsx(\"div\", {\n                                                        className: \"select_border\"\n                                                    })\n                                                ]\n                                            })\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"div\", {\n                                            className: \"p_image\",\n                                            onClick: (e)=>{\n                                                const firstChildElement = e.currentTarget.children[0];\n                                                const isImageNull = firstChildElement.classList.contains('upload_image');\n                                                if (!isImageNull) this.openToProductEditor(p.pid, e);\n                                            },\n                                            children: /*#__PURE__*/ _jsxs(\"div\", {\n                                                className: `image_area ${this.props.passive && formProductImage === null ? 'upload_image' : imageClassName}`,\n                                                children: [\n                                                    formProductImageUrl && /*#__PURE__*/ _jsx(\"div\", {\n                                                        style: {\n                                                            position: 'absolute',\n                                                            width: '100%',\n                                                            height: '100%'\n                                                        },\n                                                        children: /*#__PURE__*/ _jsx(\"img\", {\n                                                            loading: \"lazy\",\n                                                            role: \"img\",\n                                                            \"aria-label\": p.name,\n                                                            alt: `${p.name} ${'Product Image'.locale()}`,\n                                                            style: {\n                                                                width: '100%',\n                                                                height: '100%',\n                                                                objectFit: productClassName.includes('full_img') ? 'contain' : 'cover'\n                                                            },\n                                                            src: formProductImageUrl\n                                                        })\n                                                    }),\n                                                    this.props.passive && formProductImage === null && /*#__PURE__*/ _jsx(\"input\", {\n                                                        role: \"button\",\n                                                        className: \"input_pImage\",\n                                                        style: {\n                                                            position: 'absolute',\n                                                            zIndex: '999',\n                                                            width: '100%',\n                                                            height: '100%',\n                                                            opacity: '0'\n                                                        },\n                                                        type: \"file\",\n                                                        id: `input_pImage_${p.pid}`,\n                                                        name: `input_pImage_${p.pid}`,\n                                                        accept: \"image/png, image/jpeg\",\n                                                        onChange: (e)=>{\n                                                            const { formProperties: { uploadProductImageInline } } = this.props;\n                                                            uploadProductImageInline(e.target.files[0], e.target.id.split('input_pImage_')[1]);\n                                                        },\n                                                        \"aria-label\": `Upload Image: ${p.name}`\n                                                    }),\n                                                    this.props.enableLightBox && this.props.enableLightBox.value === '1' && imageClassName ? /*#__PURE__*/ _jsx(\"div\", {\n                                                        className: \"image_zoom\"\n                                                    }) : null\n                                                ]\n                                            })\n                                        }),\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            htmlFor: `${this.props.qid.value}_${p.pid}`,\n                                            className: \"form-product-container\",\n                                            children: [\n                                                subscriptionText,\n                                                optionsArray\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            className: \"focus_action_button_container\",\n                                            children: [\n                                                this.renderDeleteButton(p.pid),\n                                                this.renderSettingsButton(p.pid)\n                                            ]\n                                        })\n                                    ]\n                                })\n                            }),\n                            pc !== opts.length - 1 && /*#__PURE__*/ _jsx(\"div\", {\n                                className: `p_item_separator ${isCategoriesLastProduct ? 'last_p_seperator' : ''}`\n                            })\n                        ]\n                    });\n                } else {\n                    let descriptionField;\n                    if (typeof p.description !== 'undefined') {\n                        descriptionField = /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"form-product-description\",\n                            id: `product-name-description-${this.props.qid.value}_${p.pid}`,\n                            children: inlineDescription || productStrings.productDescription\n                        });\n                    }\n                    renderProduct = /*#__PURE__*/ _jsxs(\"span\", {\n                        className: `${productClassName}`,\n                        categories: categoryIds.length > 0 ? categoryIds.toString() : 'non-categorized',\n                        \"active-category\": p.cid || activeProductCategory,\n                        pid: p.pid,\n                        children: [\n                            formProductImage,\n                            /*#__PURE__*/ _jsxs(\"div\", {\n                                \"data-wrapper-react\": \"true\",\n                                className: \"form-product-item-detail\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"input\", {\n                                        className: `${addValidation(classNames[ptype], this.props)} ${additionalClasses}`,\n                                        type: ptype,\n                                        id: `${this.props.qid.value}_${p.pid}`,\n                                        name: inputName,\n                                        value: pid,\n                                        checked: !!Number(p.selected) && canCheck,\n                                        disabled: disabledCheckbox && canCheck,\n                                        required: disabledCheckbox && canCheck,\n                                        \"data-is-default-required\": !!Number(p.required) && !!Number(p.selected),\n                                        \"data-is-default-selected\": !!Number(p.selected),\n                                        \"aria-label\": `${'Select Product:'.locale()} ${p.name}`\n                                    }),\n                                    /*#__PURE__*/ _jsxs(\"label\", {\n                                        htmlFor: `${this.props.qid.value}_${p.pid}`,\n                                        className: \"form-product-container\",\n                                        children: [\n                                            subscriptionText,\n                                            descriptionField\n                                        ]\n                                    }),\n                                    optionsArray\n                                ]\n                            })\n                        ]\n                    });\n                }\n                return renderProduct;\n            }) : null;\n            if (products) {\n                // eslint-disable-next-line no-restricted-syntax\n                for (const el of products){\n                    if (el) {\n                        productsWithBr.push(el);\n                        if (!isPaymentNewUi) {\n                            productsWithBr.push(brTag);\n                        }\n                    }\n                }\n            }\n        } catch (e) {\n            console.log(e);\n        }\n        return {\n            products: productsWithBr,\n            hasShipping\n        };\n    }\n    isStockAvailable(productStocks, p) {\n        if (!productStocks) {\n            return false;\n        }\n        let answer = false;\n        const productOptions = parseJSON(p.options);\n        let hasUnlimitedProduct = false;\n        if (Array.isArray(productOptions) && productOptions.length > 0) {\n            let optionCount = 1;\n            productOptions.forEach((po)=>{\n                if (po.type === 'custom') {\n                    optionCount *= parseInt(po.properties.split('\\n').length, 10);\n                }\n            });\n            hasUnlimitedProduct = optionCount !== productStocks.length;\n        }\n        const hasQuantityExist = p.hasQuantity === '1';\n        if (p.hasExpandedOption === '1') {\n            const minQuantity = hasQuantityExist ? getProductMinQuantity(productOptions) : 1;\n            answer = productStocks.findIndex((ps)=>ps.available_stock >= minQuantity) !== -1;\n        } else if (productOptions.length >= 2 || productOptions.length > 1 && !hasQuantityExist) {\n            const minQuantity = hasQuantityExist ? getProductMinQuantity(productOptions) : 1;\n            answer = productStocks.findIndex((ps)=>ps.available_stock >= minQuantity) !== -1;\n        } else if (hasQuantityExist && productOptions) {\n            const minQuantity = getProductMinQuantity(productOptions);\n            answer = productStocks[0].available_stock >= minQuantity && productStocks[0].available_stock !== 0;\n        } else {\n            answer = productStocks[0].available_stock > 0;\n        }\n        return hasUnlimitedProduct ? true : answer;\n    }\n    handleCollapsible(product) {\n        const { formProperties } = this.props;\n        formProperties.toggleCategoryWrapper(product.cid);\n    }\n    renderAddButton() {\n        if (this.isGatewayOriginatedSubscription()) {\n            return null;\n        }\n        const { formProperties: { products, addProduct }, paymentType } = this.props;\n        const addButtonText = paymentType.value === 'subscription' ? '+ Add Subscription' : '+ Add Product';\n        // eslint-disable-next-line max-len\n        const optionsDefaultVal = '[{\"type\":\"quantity\",\"properties\":\"1\\\\n2\\\\n3\\\\n4\\\\n5\\\\n6\\\\n7\\\\n8\\\\n9\\\\n10\",\"name\":\"Quantity\",\"defaultQuantity\":\"\",\"specialPricing\":false,\"specialPrices\":\"\",\"expanded\":false}]';\n        return this.props.passive && /*#__PURE__*/ _jsx(\"a\", {\n            className: \"btn-add-product\",\n            onClick: ()=>{\n                const biggestPid = getBiggestProductId(products);\n                addProduct(_object_spread_props(_object_spread({\n                    pid: biggestPid\n                }, paymentType.value === 'product' && {\n                    options: optionsDefaultVal\n                }), {\n                    isInlineChange: true\n                }));\n            },\n            \"data-testid\": `inlineAdd${paymentType.value === 'subscription' ? 'Subscription' : 'Product'}Button`,\n            children: addButtonText.locale()\n        });\n    }\n    getProductById(pid) {\n        const { formProperties: { products } } = this.props;\n        return products.find((p)=>`${p.pid}` === `${pid}`);\n    }\n    showCategoryModalOnDelete(product) {\n        const { formProperties: { confirm, deleteProductInlineTest, removeFromSingleCategory, paymentListSettings, removeNotification } } = this.props;\n        let connectedProducts = product.connectedProducts || [];\n        let connectedCategories = product.connectedCategories || [];\n        let categories = paymentListSettings[0].productCategories || [];\n        if (typeof connectedProducts === 'string') {\n            connectedProducts = safeJSONParse(product.connectedProducts);\n        }\n        if (typeof connectedCategories === 'string') {\n            connectedCategories = safeJSONParse(product.connectedCategories);\n        }\n        if (typeof categories === 'string') {\n            categories = safeJSONParse(categories);\n        }\n        const categoryNames = categories.reduce((prev, cur)=>connectedCategories.includes(`${cur.id}`) ? [\n                ...prev,\n                cur.name\n            ] : prev, []);\n        const activeCategoryName = categories.find((c)=>`${c.id}` === `${product.cid}`).name;\n        let categoryText = '';\n        categoryNames.forEach((cname, index)=>{\n            if (index !== categoryNames.length - 1) {\n                categoryText += `<strong>${cname}</strong>,`;\n            } else {\n                categoryText = `${categoryText.substring(0, categoryText.length - 1)} and <strong>${cname}</strong>.`;\n            }\n        });\n        // todo :: add translate to buttons below\n        confirm({\n            type: 'confirm',\n            message: `\n      <div class=\"remove-categorized-product-modal\">\n        <p><b>${product.name}</b> belongs to the categories ${categoryText}</p>\n        <p>Remove this product:</p>\n        <div class=\"options\">\n          <div class=\"option\">\n            <span class=\"radio-container\"><input type=\"radio\" id=\"category-option1\" name=\"remove-category-option\" checked /></span>\n            <label for=\"category-option1\">Only from <b>${activeCategoryName}</b></label>\n          </div>\n\n          <div class=\"option\">\n            <span class=\"radio-container\" id=\"remove-category-option\"><input type=\"radio\" id=\"category-option2\" name=\"remove-category-option\" /></span>\n            <label for=\"category-option2\">From product list</label>\n          </div>\n        </div>\n      </div>\n      `,\n            backdrop: true,\n            deleteButtonText: 'Confirm',\n            uid: 'multiple-category-remove-modal',\n            additionalClasses: 'payment-category-modal',\n            actions: [\n                /*#__PURE__*/ _jsx(\"button\", {\n                    type: \"button\",\n                    className: \"notification-neutral\",\n                    onClick: ()=>removeNotification('multiple-category-remove-modal'),\n                    children: \"Cancel\"\n                }),\n                /*#__PURE__*/ _jsx(\"button\", {\n                    type: \"button\",\n                    className: \"notification-error\",\n                    onClick: ()=>{\n                        const checkedItem = global.document.querySelector('.remove-categorized-product-modal input:checked');\n                        if (checkedItem.id === 'category-option1') {\n                            removeFromSingleCategory({\n                                pid: product.pid,\n                                isInlineChange: true\n                            });\n                        } else {\n                            // delete product and its connectedProducts\n                            deleteProductInlineTest({\n                                pid: product.pid,\n                                isInlineChange: true\n                            });\n                        }\n                        removeNotification('multiple-category-remove-modal');\n                    },\n                    children: \"Remove\"\n                })\n            ]\n        });\n        // eslint-disable-next-line no-useless-return\n        return;\n    }\n    renderDeleteButton(pid) {\n        return /*#__PURE__*/ _jsx(\"a\", {\n            className: \"btn-inline-product-delete\",\n            tabIndex: 0,\n            role: \"button\",\n            \"aria-label\": 'Delete Product'.locale(),\n            onClick: ()=>{\n                const { formProperties: { deleteProductInlineTest, paymentListSettings } } = this.props;\n                if (typeof window !== 'undefined') {\n                    const product = this.getProductById(pid);\n                    const connectedProducts = typeof product.connectedProducts === 'string' ? safeJSONParse(product.connectedProducts) : product.connectedProducts;\n                    const isShowCategoryTitleEnabled = paymentListSettings && paymentListSettings[0] && paymentListSettings[0].showCategoryTitle === 'Yes';\n                    // if product is assigned to more than one category (and titles are enabled), show category modal on delete\n                    if (Array.isArray(connectedProducts) && connectedProducts.length > 0 && isShowCategoryTitleEnabled) {\n                        this.showCategoryModalOnDelete(product);\n                    } else {\n                        deleteProductInlineTest({\n                            pid: pid,\n                            isInlineChange: true\n                        });\n                    }\n                }\n                /* eslint-disable no-undef */ if (window.paymentStore && window.paymentStore.mode !== 'gatewayselectioneditor') {\n                    window.paymentStore.changeMode('launcher');\n                }\n            /* eslint-enable no-undef */ },\n            children: \" \"\n        });\n    }\n    renderSettingsButton(pid) {\n        return /*#__PURE__*/ _jsx(\"a\", {\n            className: \"btn-inline-product-settings\",\n            tabIndex: 0,\n            role: \"button\",\n            \"aria-label\": 'Product Settings'.locale(),\n            onClick: (e)=>{\n                this.openToProductEditor(pid, e);\n            },\n            children: \" \"\n        });\n    }\n    focusToText(nameEl) {\n        try {\n            /* eslint-disable no-undef */ const selection = window.getSelection();\n            const range = document.createRange();\n            /* eslint-enable no-undef */ selection.removeAllRanges();\n            range.selectNodeContents(nameEl);\n            range.collapse(false);\n            selection.addRange(range);\n            nameEl.focus();\n        } catch (e) {\n            console.log(e);\n        }\n    }\n    // eslint-disable-next-line complexity\n    renderOtherParts(isPaymentNewUi) {\n        const type = this.props.controlPaymentType;\n        const opts = this.props.formProperties.products || false;\n        const isAPM = type === 'control_payment' && this.props.nameAPM && this.props.nameAPM.value;\n        let warningMessage = '';\n        /* eslint-disable */ if (opts === false || Object.prototype.toString.call(opts) === '[object Array]' && opts.length === 0) {\n            if (this.props.passive) {\n                if (isAPM) {\n                    warningMessage = /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"payment_alert low\",\n                        children: /*#__PURE__*/ _jsxs(\"div\", {\n                            children: [\n                                'You haven’t finished configuring this payment integration.'.locale() + ' ',\n                                this.handlePaymentSettingsText(\"Go to <a>Payment Settings</a> to configure your payment details.\".locale())\n                            ]\n                        })\n                    });\n                } else {\n                    warningMessage = /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"payment_alert wizard\",\n                        children: [\n                            /*#__PURE__*/ _jsxs(\"ul\", {\n                                children: [\n                                    type !== 'control_payment' && /*#__PURE__*/ _jsx(\"li\", {\n                                        children: 'You haven’t finished configuring this payment integration.'.locale()\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"li\", {\n                                        children: 'You haven\\'t added any products.'.locale()\n                                    })\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsx(\"div\", {\n                                children: this.handlePaymentSettingsText(\"Go to <a>Payment Settings</a> to configure your payment details and products.\".locale())\n                            })\n                        ]\n                    });\n                }\n                return [\n                    this.props.isReusableConnectionEnabled ? null : warningMessage,\n                    isPaymentNewUi && this.renderAddButton()\n                ];\n            }\n            if (!this.props.isPaymentForm) {\n                ProductContainer.staticVars.hidden = true;\n            }\n            return null;\n        }\n        const paymentListSettings = this.props.formProperties.paymentListSettings && typeof this.props.formProperties.paymentListSettings !== 'undefined' ? this.props.formProperties.paymentListSettings[0] : false;\n        const showMinTotalOrderAmount = paymentListSettings !== 'false' && paymentListSettings.minTotalOrderAmount > 0 && paymentListSettings.showMinTotalOrderAmount === 'Yes';\n        const minTotalOrderAmount = showMinTotalOrderAmount === true ? paymentListSettings.minTotalOrderAmount : 0;\n        let minTotalOrderAmountField;\n        if (minTotalOrderAmount) {\n            minTotalOrderAmountField = /*#__PURE__*/ _jsx(\"input\", {\n                type: \"hidden\",\n                name: \"minTotalOrderAmount\",\n                \"data-min-amount\": minTotalOrderAmount ? minTotalOrderAmount : '0',\n                value: minTotalOrderAmount ? minTotalOrderAmount : '0'\n            });\n        }\n        const subscriptionWithCoupons = [\n            'control_paypal',\n            'control_paypalpro',\n            'control_cybersource',\n            'control_stripe',\n            'control_square',\n            'control_stripeCheckout',\n            'control_payfast',\n            'control_sensepass',\n            'control_paypalcomplete'\n        ];\n        const hasCoupons = (this.props.paymentType.value === 'product' || this.props.paymentType.value === 'subscription' && subscriptionWithCoupons.indexOf(type) > -1) && (this.props.formProperties.coupons && this.props.formProperties.coupons.length > 0 || this.props.formProperties.useStripeCoupons === '1' && this.props.showStripeCoupons && (this.props.showStripeCoupons.value === '1' || this.props.showStripeCoupons.value === '' || this.props.showStripeCoupons.value === null));\n        let tempTaxSurcharge = '{}';\n        if (this.props.formProperties.taxes && this.props.formProperties.taxes[0] && this.props.formProperties.taxes[0].surcharge && typeof this.props.formProperties.taxes[0].surcharge !== 'string') {\n            tempTaxSurcharge = JSON.stringify(this.props.formProperties.taxes[0].surcharge);\n        } else if (this.props.formProperties.taxes && this.props.formProperties.taxes[0] && this.props.formProperties.taxes[0].surcharge) {\n            tempTaxSurcharge = this.props.formProperties.taxes[0].surcharge;\n        }\n        const hasTax = this.props.formProperties.taxes && this.props.formProperties.taxes[0] && (this.props.formProperties.taxes[0].rate > 0 || parseInt(safeJSONParse(tempTaxSurcharge).field, 10) > 0) && paymentTypeWithTax.indexOf(type) > -1 && (this.props.paymentType.value === 'product' || this.props.paymentType.value === 'subscription' && [\n            'control_square',\n            'control_payfast'\n        ].includes(this.props.type.value));\n        let passiveShowSingleInfo = null;\n        if (opts.length < 2 && !hasCoupons && !hasTax && type !== 'control_authnet' && type !== 'control_bluepay' && type !== 'control_bluesnap' && type !== 'control_braintree' && type !== 'control_chargify' && type !== 'control_cardconnect' && type !== 'control_cybersource' && type !== 'control_echeck' && type !== 'control_eway' && type !== 'control_firstdata' && type !== 'control_paypalInvoicing' && type !== 'control_paymentwall' && type !== 'control_payjunction' && type !== 'control_paymill' && type !== 'control_paypalexpress' && type !== 'control_paypalpro' && type !== 'control_paypalcomplete' && type !== 'control_square' && type !== 'control_stripe' && type !== 'control_stripeCheckout' && type !== 'control_stripeACH' && type !== 'control_stripeACHManual' && type !== 'control_wepay' && type !== 'control_worldpayus' && type !== 'control_payu' && type !== 'control_payuMoney' && type !== 'control_pagseguro' && type !== 'control_moneris' && type !== 'control_mollie' && type !== 'control_sofort' && type !== 'control_sensepass' && type !== 'control_paysafe' && type !== 'control_iyzico' && type !== 'control_skrill' && type !== 'control_gocardless' && type !== 'control_paypalSPB' && type !== 'control_cybersource' && type !== 'control_payfast' && (!opts[0].options || opts[0].options && (opts[0].options.length < 1 || typeof opts[0].options === 'string' && opts[0].options === '[]')) && (!opts[0].customPrice || opts[0].customPrice === '0')) {\n            if (this.props.passive) {\n                if (this.props.showSingle && (this.props.showSingle.value === true || this.props.showSingle.value === 'true' || this.props.showSingle.value === '1')) {\n                    passiveShowSingleInfo = /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"hidden-field-warning payment_alert low\",\n                        style: {\n                            marginBottom: '10px'\n                        },\n                        children: /*#__PURE__*/ _jsxs(\"p\", {\n                            style: {\n                                margin: '0',\n                                overflow: 'auto',\n                                display: 'block'\n                            },\n                            children: [\n                                'This payment field will be seen on the form. '.locale(),\n                                /*#__PURE__*/ _jsx(\"br\", {}),\n                                /*#__PURE__*/ _jsx(\"a\", {\n                                    onClick: this.props.formProperties.updateQuestionProperties ? ()=>this.props.formProperties.updateQuestionProperties(this.props.id.value, {\n                                            showSingle: false\n                                        }) : null,\n                                    style: {\n                                        textDecoration: 'underline',\n                                        cursor: 'pointer'\n                                    },\n                                    children: 'Click here to HIDE instead'.locale()\n                                })\n                            ]\n                        })\n                    });\n                } else {\n                    passiveShowSingleInfo = /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"hidden-field-warning payment_alert mid\",\n                        style: {\n                            marginBottom: '10px'\n                        },\n                        children: /*#__PURE__*/ _jsxs(\"p\", {\n                            style: {\n                                margin: '0',\n                                overflow: 'auto',\n                                display: 'block'\n                            },\n                            children: [\n                                'This payment field will NOT be seen on the form.'.locale(),\n                                /*#__PURE__*/ _jsx(\"br\", {}),\n                                /*#__PURE__*/ _jsx(\"a\", {\n                                    onClick: this.props.formProperties.updateQuestionProperties ? ()=>this.props.formProperties.updateQuestionProperties(this.props.id.value, {\n                                            showSingle: true\n                                        }) : null,\n                                    style: {\n                                        textDecoration: 'underline',\n                                        cursor: 'pointer'\n                                    },\n                                    \"data-testid\": \"showSingleButton\",\n                                    children: 'Click here to SHOW instead'.locale()\n                                })\n                            ]\n                        })\n                    });\n                }\n            } else if (!this.props.showSingle || !this.props.showSingle.value || this.props.showSingle.value === 'false') {\n                ProductContainer.staticVars.hidden = true;\n                return /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    name: `${this.props.qname.value}[][id]`,\n                    value: opts[0].pid\n                });\n            }\n        }\n        const products = this.renderProducts(isPaymentNewUi);\n        const hasShipping = products.hasShipping;\n        const paymentStringsDefault = {\n            couponApply: 'Apply'.locale(),\n            couponEnter: 'Enter coupon'.locale(),\n            totalSubtotal: 'Subtotal'.locale(),\n            taxTax: 'Tax'.locale(),\n            shippingShipping: 'Shipping'.locale(),\n            totalTotal: 'Total'.locale(),\n            recurringPayments: 'Total'.locale()\n        };\n        let paymentStrings = paymentStringsDefault;\n        if (this.props.passive) {\n            paymentStrings = this.props.formProperties.paymentStrings ? Object.assign({}, paymentStringsDefault, this.props.formProperties.paymentStrings[0]) : paymentStringsDefault;\n        }\n        let inlineCouponEnter;\n        let inlineCouponApply;\n        let inlineSubTotal;\n        let inlineTax;\n        let inlineShipping;\n        let inlineTotal;\n        if (this.props.inlineEditClass) {\n            inlineCouponApply = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: 'Form',\n                propPath: 'paymentStrings[0].couponApply',\n                text: paymentStrings.couponApply.locale() || ''\n            });\n            inlineCouponEnter = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: 'Form',\n                propPath: 'paymentStrings[0].couponEnter',\n                text: paymentStrings.couponEnter.locale() || ''\n            });\n            inlineSubTotal = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: 'Form',\n                propPath: 'paymentStrings[0].totalSubtotal',\n                text: paymentStrings.totalSubtotal.locale() || ''\n            });\n            inlineTax = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: 'Form',\n                propPath: 'paymentStrings[0].taxTax',\n                text: paymentStrings.taxTax.locale() || ''\n            });\n            inlineShipping = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: 'Form',\n                propPath: 'paymentStrings[0].shippingShipping',\n                text: paymentStrings.shippingShipping.locale() || ''\n            });\n            inlineTotal = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: 'Form',\n                propPath: 'paymentStrings[0].totalTotal',\n                text: paymentStrings.totalTotal.locale() || ''\n            });\n        }\n        const couponContainerArray = [];\n        if (hasCoupons) {\n            const useStripeCoupons = this.props.paymentType.value === 'subscription' && this.props.formProperties.useStripeCoupons === '1';\n            let couponStripeAttr = false;\n            if (this.props.controlPaymentType === 'control_stripe' && useStripeCoupons || this.props.controlPaymentType === 'control_stripeCheckout' && this.props.formProperties.useStripeCoupons === '1') {\n                couponStripeAttr = true;\n            }\n            let couponInput;\n            if (isPaymentNewUi) {\n                couponInput = /*#__PURE__*/ _jsx(\"input\", {\n                    name: \"coupon-input\",\n                    id: \"coupon-input\",\n                    \"data-stripe\": couponStripeAttr,\n                    type: \"text\",\n                    size: \"15\",\n                    placeholder: 'Enter Coupon Code'.locale(),\n                    autoComplete: \"off\",\n                    \"aria-labelledby\": \"coupon-header coupon-message\"\n                });\n            } else {\n                couponInput = /*#__PURE__*/ _jsx(\"input\", {\n                    name: \"coupon-input\",\n                    id: \"coupon-input\",\n                    \"data-stripe\": couponStripeAttr,\n                    type: \"text\",\n                    size: \"15\",\n                    autoComplete: \"off\",\n                    \"aria-labelledby\": \"coupon-header coupon-message\"\n                });\n            }\n            const couponContainer = /*#__PURE__*/ _jsx(\"div\", {\n                id: \"coupon-container\",\n                style: {\n                    border: '1px solid lightgray',\n                    padding: '5px',\n                    borderRadius: '6px',\n                    width: '200px',\n                    marginTop: '8px'\n                },\n                children: /*#__PURE__*/ _jsxs(\"table\", {\n                    id: \"coupon-table\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"tr\", {\n                            children: /*#__PURE__*/ _jsx(\"th\", {\n                                colSpan: \"2\",\n                                style: {\n                                    textAlign: 'left'\n                                },\n                                children: /*#__PURE__*/ _jsx(\"label\", {\n                                    id: \"coupon-header\",\n                                    htmlFor: \"coupon-input\",\n                                    children: inlineCouponEnter || paymentStrings.couponEnter.locale()\n                                })\n                            })\n                        }),\n                        /*#__PURE__*/ _jsxs(\"tr\", {\n                            children: [\n                                /*#__PURE__*/ _jsx(\"td\", {\n                                    children: couponInput\n                                }),\n                                /*#__PURE__*/ _jsxs(\"td\", {\n                                    width: \"40%\",\n                                    style: {\n                                        textAlign: 'center'\n                                    },\n                                    children: [\n                                        /*#__PURE__*/ _jsx(\"img\", {\n                                            loading: \"lazy\",\n                                            src: `${this.props.cdnconfig.CDN}/images/ajax-loader.gif`,\n                                            alt: \"coupon loading\",\n                                            id: \"coupon-loader\",\n                                            style: {\n                                                display: 'none',\n                                                verticalAlign: 'top'\n                                            }\n                                        }),\n                                        /*#__PURE__*/ _jsx(\"button\", {\n                                            type: \"button\",\n                                            id: \"coupon-button\",\n                                            \"data-qid\": this.props.qid.value,\n                                            value: \"\",\n                                            children: inlineCouponApply || paymentStrings.couponApply.locale()\n                                        })\n                                    ]\n                                })\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsx(\"tr\", {\n                            children: /*#__PURE__*/ _jsx(\"th\", {\n                                colSpan: \"2\",\n                                style: {\n                                    textAlign: 'left'\n                                },\n                                children: /*#__PURE__*/ _jsx(\"span\", {\n                                    id: \"coupon-message\",\n                                    role: \"alert\"\n                                })\n                            })\n                        })\n                    ]\n                })\n            });\n            const brTag = /*#__PURE__*/ _jsx(\"br\", {});\n            const couponContainerHiddenInput = /*#__PURE__*/ _jsx(\"input\", {\n                id: `${this.props.qid.value}_coupon`,\n                type: \"hidden\",\n                name: \"coupon\"\n            });\n            couponContainerArray.push(couponContainer);\n            if (!isPaymentNewUi) {\n                couponContainerArray.push(brTag);\n            }\n            couponContainerArray.push(couponContainerHiddenInput);\n        }\n        const currencyVal = this.props.currency && this.props.currency.value === 'EUR' ? 'comma' : 'point';\n        const decimalMark = this.props.decimalMark ? this.props.decimalMark.value : currencyVal;\n        const recurringPaymentsArray = [];\n        if (this.props.paymentType && this.props.paymentType.value === 'subscription') {\n            let recurringPayments;\n            if (isPaymentNewUi) {\n                recurringPayments = /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"form-payment-recurringpayments form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            id: \"recurringpayments-text\",\n                            children: paymentStrings.recurringPayments.locale()\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_recurringpayments\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            } else {\n                recurringPayments = /*#__PURE__*/ _jsxs(\"span\", {\n                    className: \"form-payment-recurringpayments form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            id: \"recurringpayments-text\",\n                            children: paymentStrings.recurringPayments.locale()\n                        }),\n                        \" \",\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_recurringpayments\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            }\n            recurringPaymentsArray.push(recurringPayments);\n        }\n        // let hasSubtotal = false;\n        const subTotalLabelArray = [];\n        // insert subtotal\n        if (hasShipping && paymentTypeWithShipping.indexOf(type) > -1 || hasTax) {\n            ProductContainer.staticVars.paymentLabels.push('totalSubtotal');\n            // hasSubtotal = true;\n            let subTotalLabel1;\n            if (isPaymentNewUi) {\n                subTotalLabel1 = /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-payment-divider\"\n                });\n            } else {\n                subTotalLabel1 = /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-payment-divider\",\n                    style: {\n                        margin: '0 0 8px'\n                    }\n                });\n            }\n            let subTotalLabel2;\n            if (isPaymentNewUi) {\n                subTotalLabel2 = /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"form-payment-subtotal form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            id: \"subtotal-text\",\n                            children: inlineSubTotal || paymentStrings.totalSubtotal.locale()\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_subtotal\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            } else {\n                subTotalLabel2 = /*#__PURE__*/ _jsxs(\"span\", {\n                    className: \"form-payment-subtotal form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            id: \"subtotal-text\",\n                            children: inlineSubTotal || paymentStrings.totalSubtotal.locale()\n                        }),\n                        \" \",\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_subtotal\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            }\n            subTotalLabelArray.push(subTotalLabel1);\n            subTotalLabelArray.push(subTotalLabel2);\n        }\n        const taxLabelArray = [];\n        if (hasTax) {\n            ProductContainer.staticVars.paymentLabels.push('taxTax');\n            let taxLabel1;\n            if (isPaymentNewUi) {\n                taxLabel1 = /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"form-payment-tax form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            id: \"tax-text\",\n                            children: inlineTax || paymentStrings.taxTax.locale()\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_tax\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            } else {\n                taxLabel1 = /*#__PURE__*/ _jsxs(\"span\", {\n                    className: \"form-payment-tax form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            id: \"tax-text\",\n                            children: inlineTax || paymentStrings.taxTax.locale()\n                        }),\n                        \" \",\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_tax\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            }\n            taxLabelArray.push(taxLabel1);\n        }\n        const shippingLabelArray = [];\n        // insert shipping\n        if (hasShipping && paymentTypeWithShipping.indexOf(type) > -1) {\n            ProductContainer.staticVars.paymentLabels.push('shippingShipping');\n            let shippingLabel1;\n            if (isPaymentNewUi) {\n                shippingLabel1 = /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"form-payment-shipping form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            id: \"shipping-text\",\n                            children: inlineShipping || paymentStrings.shippingShipping.locale()\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_shipping\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            } else {\n                shippingLabel1 = /*#__PURE__*/ _jsxs(\"span\", {\n                    className: \"form-payment-shipping form-payment-label\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            id: \"shipping-text\",\n                            children: inlineShipping || paymentStrings.shippingShipping.locale()\n                        }),\n                        \" \",\n                        /*#__PURE__*/ _jsx(\"span\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_shipping\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            }\n            const shippingLabel2 = /*#__PURE__*/ _jsx(\"span\", {\n                className: \"form-payment-divider\",\n                style: {\n                    margin: '8px 0'\n                }\n            });\n            shippingLabelArray.push(shippingLabel1);\n            shippingLabelArray.push(shippingLabel2);\n        }\n        // insert total\n        const totalLabelArray = [];\n        if (this.props.showTotal && this.props.showTotal.value && this.props.showTotal.value !== 'No' || hasShipping || hasTax) {\n            // const brTag = <br />;\n            ProductContainer.staticVars.paymentLabels.push('totalTotal');\n            let totalLabel;\n            if (isPaymentNewUi) {\n                totalLabel = /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"form-payment-total\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            id: \"total-text\",\n                            children: inlineTotal || paymentStrings.totalTotal.locale()\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"form-payment-price\",\n                            children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                priceAmount: 0,\n                                currency: this.props.currency.value,\n                                priceID: \"payment_total\",\n                                nofree: true,\n                                decimalMark: decimalMark\n                            })\n                        })\n                    ]\n                });\n            } else {\n                totalLabel = /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-payment-total\",\n                    children: /*#__PURE__*/ _jsxs(\"b\", {\n                        children: [\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                id: \"total-text\",\n                                children: inlineTotal || paymentStrings.totalTotal.locale()\n                            }),\n                            \" \",\n                            /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"form-payment-price\",\n                                children: /*#__PURE__*/ _jsx(FormatPrice, {\n                                    priceAmount: 0,\n                                    currency: this.props.currency.value,\n                                    priceID: \"payment_total\",\n                                    nofree: true,\n                                    decimalMark: decimalMark\n                                })\n                            })\n                        ]\n                    })\n                });\n            }\n            totalLabelArray.push(totalLabel);\n        }\n        // We should warn users when they clone a form containing PayPal products because even if the products are visible, the cloned forms are disconnected from PayPal.\n        let paypalWarningMessage = '';\n        if (type === 'control_paypalcomplete' && !(this.props.merchantId && this.props.merchantId.value) && this.props.passive) {\n            paypalWarningMessage = /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"payment_alert high paypalcomplete_connection_warning\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"ul\", {\n                        children: /*#__PURE__*/ _jsx(\"li\", {\n                            children: 'You haven’t finished configuring this payment integration.'.locale()\n                        })\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        children: this.handlePaymentSettingsText('Go to <a>Payment Settings</a> to configure your payment details and products.'.locale())\n                    })\n                ]\n            });\n        }\n        let returnFinalProductUI;\n        if (isPaymentNewUi) {\n            const renderFooter = ()=>{\n                if (this.useAppUI) return null;\n                return /*#__PURE__*/ _jsxs(\"div\", {\n                    className: `payment_footer new_ui ${hasCoupons ? 'show_coupon' : ''}`,\n                    children: [\n                        couponContainerArray,\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"total_area\",\n                            children: [\n                                recurringPaymentsArray,\n                                subTotalLabelArray,\n                                taxLabelArray,\n                                shippingLabelArray,\n                                totalLabelArray,\n                                minTotalOrderAmountField\n                            ]\n                        })\n                    ]\n                });\n            };\n            returnFinalProductUI = /*#__PURE__*/ _jsxs(\"div\", {\n                \"data-wrapper-react\": \"true\",\n                children: [\n                    passiveShowSingleInfo,\n                    !this.props.isReusableConnectionEnabled && paypalWarningMessage,\n                    products.products,\n                    this.renderAddButton(),\n                    renderFooter()\n                ]\n            });\n        } else {\n            returnFinalProductUI = /*#__PURE__*/ _jsxs(\"div\", {\n                \"data-wrapper-react\": \"true\",\n                children: [\n                    passiveShowSingleInfo,\n                    !this.props.isReusableConnectionEnabled && paypalWarningMessage,\n                    products.products,\n                    couponContainerArray,\n                    recurringPaymentsArray,\n                    subTotalLabelArray,\n                    taxLabelArray,\n                    shippingLabelArray,\n                    totalLabelArray,\n                    minTotalOrderAmountField\n                ]\n            });\n        }\n        // return [enableLightBox, products, couponContainerArray, subTotalLabelArray, shippingLabelArray, totalLabelArray];\n        return returnFinalProductUI;\n    }\n    render() {\n        var _this_props_paymentType, _this_props_paymentType1;\n        const { formProperties, paymentType } = this.props;\n        const isPaymentNewUi = this.isPaymentNewUi();\n        const donationPart = this.props.paymentType && this.props.paymentType.value === 'donation' ? this.renderDonationPart() : null;\n        const otherParts = donationPart === null ? this.renderOtherParts(isPaymentNewUi) : null;\n        let sandboxMsg = null;\n        const type = this.props.controlPaymentType;\n        const gateway = this.props.controlPaymentType.replace('control_', '');\n        let showProductSearch;\n        let showProductSorting;\n        let showCategory = null;\n        let showCategoryTitle = null;\n        let categories = null;\n        const productCategories = [];\n        // let showProductCatalog;\n        const paymentListSettings = this.props.formProperties.paymentListSettings && typeof this.props.formProperties.paymentListSettings !== 'undefined' ? this.props.formProperties.paymentListSettings[0] : false;\n        if (paymentListSettings) {\n            showProductSearch = paymentListSettings && paymentListSettings.showSearch ? paymentListSettings.showSearch : 'No';\n            showProductSorting = paymentListSettings && paymentListSettings.showSorting ? paymentListSettings.showSorting : 'No';\n            showCategory = paymentListSettings.showCategory;\n            showCategoryTitle = paymentListSettings.showCategoryTitle;\n            categories = parseJSON(paymentListSettings.productCategories);\n            // This code pieces will be refactored later.\n            if (this.reorderedProducts.length > 0) {\n                this.reorderedProducts.forEach((p)=>{\n                    if (p.categoryName) {\n                        productCategories.push({\n                            label: p.categoryName,\n                            value: p.cid\n                        });\n                    }\n                });\n            } else if (categories && categories.length > 0 && formProperties.products) {\n                const categoryIdsOfProducts = formProperties.products.map((p)=>{\n                    return p.cid ? `${p.cid}` : undefined;\n                });\n                categories.forEach((category)=>{\n                    if (category.id && categoryIdsOfProducts.includes(`${category.id}`)) {\n                        productCategories.push({\n                            label: category.name,\n                            value: category.id\n                        });\n                    }\n                });\n            }\n        }\n        let productSearchInput;\n        let productSortingDropdown;\n        let isCustomAmountType = false;\n        if (((_this_props_paymentType = this.props.paymentType) === null || _this_props_paymentType === void 0 ? void 0 : _this_props_paymentType.value) === 'donation' || ((_this_props_paymentType1 = this.props.paymentType) === null || _this_props_paymentType1 === void 0 ? void 0 : _this_props_paymentType1.value) === 'custom') {\n            isCustomAmountType = true;\n        }\n        if (showProductSearch === 'Yes' && isCustomAmountType === false) {\n            productSearchInput = /*#__PURE__*/ _jsx(\"input\", {\n                name: \"productSearch-input\",\n                className: \"form-textbox\",\n                id: \"productSearch-input\",\n                type: \"text\",\n                size: \"15\",\n                placeholder: `${'Search'.locale()}`,\n                autoComplete: \"off\"\n            });\n        }\n        if (showProductSorting === 'Yes' && isCustomAmountType === false) {\n            productSortingDropdown = /*#__PURE__*/ _jsx(PaymentDropdown, {\n                uid: \"payment-sorting-products-dropdown\",\n                hint: `${'Sort By'.locale()} `,\n                clearText: `${'Clear Sort'.locale()}`,\n                selectFirstOption: false,\n                options: [\n                    {\n                        label: 'Name: A to Z'.locale(),\n                        value: 'name_az'\n                    },\n                    {\n                        label: 'Name: Z to A'.locale(),\n                        value: 'name_za'\n                    },\n                    {\n                        label: 'Price: Low to High'.locale(),\n                        value: 'price_lowest'\n                    },\n                    {\n                        label: 'Price: High to Low'.locale(),\n                        value: 'price_highest'\n                    }\n                ]\n            });\n        }\n        if (this.props.passive && (this.props.sandbox && this.props.sandbox.value === 'enabled' || this.props.testmodeAuth && this.props.testmodeAuth.value === 'Yes' || this.props.allowTest && String(this.props.allowTest.value) === 'true')) {\n            sandboxMsg = /*#__PURE__*/ _jsx(\"div\", {\n                className: \"hidden-field-warning payment_alert mid\",\n                children: 'Sandbox mode is enabled for this payment. '.locale()\n            });\n        }\n        let billingMessage = null;\n        if (gateway === 'cybersource' && this.props.showBillingError) {\n            billingMessage = /*#__PURE__*/ _jsx(\"div\", {\n                id: \"billing-message\",\n                className: \"payment_alert high\",\n                children: this.handlePaymentSettingsText(`<a>Address and email fields</a> are required for CyberSource. Please make sure to map these fields from the Payment Settings menu. You can’t collect payments if you don’t include these fields.`.locale(), true)\n            });\n        }\n        let usePaypalButton = null;\n        if (this.props.paypalButton && this.props.paypalButton.value === 'Yes') {\n            usePaypalButton = /*#__PURE__*/ _jsx(\"input\", {\n                type: \"hidden\",\n                id: \"use_paypal_button\"\n            });\n        }\n        let paypalExpressHiddenInput = null;\n        if (type === 'control_paypalexpress') {\n            paypalExpressHiddenInput = /*#__PURE__*/ _jsx(\"input\", {\n                id: \"express_category\",\n                type: \"hidden\",\n                \"data-digital_goods\": this.props.digitalGoods.value\n            });\n        }\n        let hr = null;\n        if ([\n            'authnet',\n            'paypalpro',\n            'stripe',\n            'paymill',\n            'braintree',\n            'square',\n            'eway',\n            'bluepay',\n            'stripeACH',\n            'stripeACHManual',\n            'paysafe',\n            'iyzico'\n        ].indexOf(gateway) > -1) {\n            hr = /*#__PURE__*/ _jsx(\"hr\", {});\n            if (this.props.passive && typeof jotFormxds === 'undefined') {\n                loadScript('/js/libraries/xds-server/jotFormxds.js');\n                loadScript('/js/wizards/stripeWizard.js');\n            }\n        }\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            className: \"product-container-wrapper\",\n            children: [\n                ProductContainer.staticVars.hidden !== true && /*#__PURE__*/ _jsxs(\"div\", {\n                    className: \"filter-container\",\n                    children: [\n                        showCategory === 'Yes' && paymentType && paymentType.value === 'product' && /*#__PURE__*/ _jsx(MultiSelectDropdown, {\n                            additionalClass: showCategoryTitle === 'Yes' ? 'category-title-enabled' : '',\n                            uid: \"payment-category-dropdown\",\n                            hint: `${'Categories'.locale()}:`,\n                            showAllOption: true,\n                            addSelectAll: true,\n                            selectAllText: 'All'.locale(),\n                            selectFirstOption: true,\n                            options: productCategories\n                        }),\n                        productSearchInput,\n                        productSortingDropdown\n                    ]\n                }),\n                !this.props.isReusableConnectionEnabled && sandboxMsg,\n                billingMessage,\n                usePaypalButton,\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    name: \"simple_fpc\",\n                    \"data-payment_type\": gateway,\n                    defaultValue: this.props.id.value,\n                    \"data-component\": \"payment1\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    name: \"payment_transaction_uuid\",\n                    id: \"paymentTransactionId\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    name: \"payment_version\",\n                    id: \"payment_version\",\n                    value: \"4\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    name: \"payment_total_checksum\",\n                    id: \"payment_total_checksum\",\n                    \"data-component\": \"payment2\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    name: \"payment_discount_value\",\n                    id: \"payment_discount_value\",\n                    \"data-component\": \"payment3\"\n                }),\n                paymentType && paymentType.value === 'subscription' && /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"hidden\",\n                            name: \"first_payment_discount_value\",\n                            id: \"firstPaymentDiscount\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"hidden\",\n                            name: \"recur_payment_discount_value\",\n                            id: \"recurPaymentDiscount\"\n                        })\n                    ]\n                }),\n                /*#__PURE__*/ _jsx(ImageOverlay, {\n                    products: this.reorderedProducts.length > 0 ? this.reorderedProducts : this.props.formProperties.products\n                }),\n                this.props.isReusableConnectionEnabled && this.props.passive && /*#__PURE__*/ _jsx(WarningMessage, {\n                    hasProduct: this.props.formProperties.products && this.props.formProperties.products.length > 0,\n                    hasGateway: type !== 'control_payment',\n                    hasConnection: type !== 'control_payment' && this.props.paymentConnectionID && this.props.paymentConnectionID !== '0',\n                    openPaymentConnectionModal: async ()=>{\n                        const { openPaymentConnectionModal, formProperties: { updateRightPanelMode, rightPanelToggle } } = this.props;\n                        updateRightPanelMode('paymentproperties', true);\n                        rightPanelToggle(true);\n                        await openPaymentConnectionModal();\n                    },\n                    paymentType: paymentType.value\n                }),\n                donationPart,\n                otherParts,\n                paypalExpressHiddenInput,\n                hr\n            ]\n        });\n    }\n    isPaymentNewUi() {\n        const { formProperties, themeVersion } = this.props;\n        const isNewPaymentUi = formProperties && formProperties.newPaymentUIForNewCreatedForms === 'Yes';\n        const isComparePaymentForm = formProperties && formProperties.comparePaymentForm === 'v1';\n        const isUpcomingTheme = themeVersion === 'v2';\n        return isNewPaymentUi || isComparePaymentForm || isUpcomingTheme;\n    }\n    isProductActive(categoryID) {\n        const { formProperties } = this.props;\n        const { paymentListSettings } = formProperties;\n        if (paymentListSettings && paymentListSettings[0] && paymentListSettings[0].productCategories && paymentListSettings[0].productCategories.length > 0) {\n            let productCategories = paymentListSettings[0].productCategories;\n            if (typeof productCategories === 'string') productCategories = JSON.parse(productCategories);\n            const productCategory = productCategories.find((element)=>element.id === categoryID);\n            if (productCategory && productCategory.isWrapped === 'Yes') return false;\n        }\n        return true;\n    }\n    constructor(props){\n        super(props);\n        this.openToPaymentWizard = this.openToPaymentWizard.bind(this);\n        this.openToProductEditor = this.openToProductEditor.bind(this);\n        this.closeProductEditor = this.closeProductEditor.bind(this);\n        this.handlePaymentSettingsText = this.handlePaymentSettingsText.bind(this);\n        this.sortProductsByCategories = this.sortProductsByCategories.bind(this);\n        this.getFilteredProducts = this.getFilteredProducts.bind(this);\n        this.handleCollapsible = this.handleCollapsible.bind(this);\n        this.isPaymentNewUi = this.isPaymentNewUi.bind(this);\n        this.isProductActive = this.isProductActive.bind(this);\n        this.isStockAvailable = this.isStockAvailable.bind(this);\n        this.getStocks = this.getStocks.bind(this);\n        this.getActiveProductIndex = this.getActiveProductIndex.bind(this);\n        this.renderAddButton = this.renderAddButton.bind(this);\n        this.renderDeleteButton = this.renderDeleteButton.bind(this);\n        this.showCategoryModalOnDelete = this.showCategoryModalOnDelete.bind(this);\n        this.isGatewayOriginatedSubscription = this.isGatewayOriginatedSubscription.bind(this);\n        this.setFocusedProductId = this.setFocusedProductId.bind(this);\n        this.reorderedProducts = [];\n        this.state = {\n            focusedProductId: false\n        };\n        const { isOpenedInPortal, isPaymentForm, isPortalProductListElement } = props;\n        this.useAppUI = isOpenedInPortal && isPaymentForm || isPortalProductListElement;\n    }\n}\nexport { ProductContainer as default };\nProductContainer.getState = ()=>{\n    return ProductContainer.staticVars.paymentLabels;\n};\nProductContainer.getHidden = ()=>{\n    return ProductContainer.staticVars.hidden;\n};\nProductContainer.getScript = (prop)=>{\n    var _prop_paymentType;\n    const opts = prop.formProperties.products || [];\n    let script = '';\n    if (((_prop_paymentType = prop.paymentType) === null || _prop_paymentType === void 0 ? void 0 : _prop_paymentType.value) !== 'donation') {\n        var _prop_paymentType1;\n        const decimalMark = prop.decimalMark && prop.decimalMark.value === 'comma' ? 'comma' : 'point';\n        const paymentListSettings = prop.formProperties.paymentListSettings && prop.formProperties.paymentListSettings[0];\n        const showCategory = paymentListSettings ? paymentListSettings.showCategory === 'Yes' : false;\n        const showCategoryTitle = paymentListSettings ? paymentListSettings.showCategoryTitle === 'Yes' : false;\n        const connectedProducts = {};\n        const connectedProductsMultiple = {};\n        let productIDS = null;\n        if (showCategory) {\n            productIDS = {};\n            opts.forEach((p)=>{\n                if (!Object.values(ProductContainer.staticVars.productID).includes(`${prop.qid.value}_${p.pid}`)) {\n                    return false;\n                }\n                const productConnectedProducts = parseJSON(p.connectedProducts);\n                if (Array.isArray(productConnectedProducts) && productConnectedProducts.length > 0) {\n                    connectedProductsMultiple[p.pid] = productConnectedProducts;\n                    productConnectedProducts.forEach((c)=>{\n                        if (Object.values(connectedProducts).indexOf(c) === -1 && Object.keys(connectedProducts).indexOf(c) === -1 && Object.values(ProductContainer.staticVars.productID).includes(`${prop.qid.value}_${c}`)) {\n                            connectedProducts[c] = p.pid;\n                        }\n                    });\n                }\n            });\n            Object.values(ProductContainer.staticVars.productID).forEach((p, index)=>{\n                const regExp = new RegExp('input_[0-9]*_');\n                const pid = p.replace(regExp, '');\n                if (!Object.keys(connectedProducts).includes(pid)) {\n                    productIDS[index] = p;\n                }\n            });\n            Object.keys(ProductContainer.staticVars.totalCounter).forEach((t)=>{\n                const regExp = new RegExp('input_[0-9]*_');\n                const regExp2 = new RegExp('_.+');\n                const underscoreLength = t.split('_').length;\n                let pid = t.replace(regExp, '');\n                // If the product has subproducts.\n                if (underscoreLength > 2) {\n                    pid = pid.replace(regExp2, '');\n                }\n                if (Object.keys(connectedProducts).includes(pid)) {\n                    delete ProductContainer.staticVars.totalCounter[t];\n                }\n            });\n        }\n        script += `      productID = ${JSON.stringify(productIDS || ProductContainer.staticVars.productID)};\\n`; // see productID\n        script += `      paymentType = \"${(_prop_paymentType1 = prop.paymentType) === null || _prop_paymentType1 === void 0 ? void 0 : _prop_paymentType1.value}\";\\n`;\n        script += `      JotForm.setCurrencyFormat('${prop.currency.value}',${prop.useDecimal ? prop.useDecimal.value === 'Yes' : 'false'}, '${decimalMark}');\\n`;\n        script += `      JotForm.totalCounter(${JSON.stringify(ProductContainer.staticVars.totalCounter)});\\n`;\n        script += \"      $$('.form-product-custom_quantity').each(function(el, i){el.observe('blur', function(){isNaN(this.value) || this.value < 1 ? this.value = '0' : this.value = parseInt(this.value)})});\\n\"; // eslint-disable-line max-len\n        script += \"      $$('.form-product-custom_quantity').each(function(el, i){el.observe('focus', function(){this.value == 0 ? this.value = '' : this.value})});\\n\";\n        if (showCategory) {\n            script += `JotForm.paymentCategoryHandler(${showCategory}, ${showCategoryTitle}, ${JSON.stringify(connectedProducts)}, ${JSON.stringify(connectedProductsMultiple)});\\n`;\n        }\n        if (Object.keys(ProductContainer.staticVars.orderedSubproductOptionNames).length > 0) {\n            script += `if(typeof PaymentStock !== \"undefined\") { PaymentStock.orderedSubproductOptionNames = ${JSON.stringify(ProductContainer.staticVars.orderedSubproductOptionNames)} } \\n`;\n        }\n    }\n    if (prop.type.value === 'control_stripe') {\n        const publishableKey = prop.apiKey.value.length > 0 || !prop.connect.value.stripeConnectLoaded ? prop.publishableKey.value : prop.connect.value.publishableKey;\n        const cleanPublishableKey = publishableKey.replace(/\\s+/g, '');\n        const addressQid = typeof prop.billingAdd !== 'undefined' ? prop.billingAdd.value : 'none';\n        const shippingQid = typeof prop.shippingAdd !== 'undefined' ? prop.shippingAdd.value : 'none';\n        const emailQid = typeof prop.emailField !== 'undefined' ? prop.emailField.value : 'none';\n        const phoneQid = typeof prop.phoneField !== 'undefined' ? prop.phoneField.value : 'none';\n        const customFieldQid = typeof prop.customDataField !== 'undefined' ? prop.customDataField.value : 'none';\n        script += `      JotForm.setStripeSettings('${cleanPublishableKey}', '${addressQid}', '${shippingQid}', '${emailQid}', '${phoneQid}', '${customFieldQid}');\\n`;\n    }\n    if (prop.type.value === 'control_eway') {\n        script += `      JotForm.ewayEncryptKey = '${prop.encryptionKey.value}';\\n`;\n    }\n    if (prop.type.value === 'control_bluepay') {\n        script += `      JotForm.bluepayAccountId = '${prop.accountId.value}';\\n`;\n        script += `      JotForm.bluepayApiSecret = '${md5(prop.apiSecret.value + prop.accountId.value)}';\\n`;\n    }\n    const showSingle = prop.showSingle && (prop.showSingle.value === true || prop.showSingle.value === 'true' || prop.showSingle.value === '1');\n    if (opts && (opts.length > 0 || showSingle) && (prop.enableLightBox && prop.enableLightBox.value === '1' || !prop.enableLightBox)) {\n        script += `      JotForm.handleProductLightbox();\\n`;\n    }\n    // Set initial values\n    let initialProps = [];\n    const initialPropValues = {};\n    if (prop.type.value === 'control_bluesnap') {\n        initialProps = [\n            'sca',\n            'sandbox',\n            'currency',\n            'emailField',\n            'phoneField',\n            'billingAddress'\n        ];\n    } else if (prop.type.value === 'control_paypalcomplete') {\n        initialProps = [\n            'styleColor',\n            'styleShape',\n            'styleSize',\n            'styleLabel',\n            'styleLayout',\n            'payLaterEnabled'\n        ];\n    } else if (prop.type.value === 'control_paypalSPB') {\n        initialProps = [\n            'payLaterEnabled',\n            'payLaterLayout',\n            'payLaterTextColor',\n            'payLaterTextSize',\n            'payLaterLogoType',\n            'payLaterLogoPosition',\n            'payLaterRatio',\n            'payLaterBackgroundColor'\n        ];\n    } else if (prop.type.value === 'control_mollie') {\n        initialProps = [\n            'sandbox',\n            'currency'\n        ];\n    }\n    if (initialProps.length > 0) {\n        Object.keys(prop).forEach((propKey)=>{\n            if (initialProps.includes(propKey) && prop[propKey] && prop[propKey].value) {\n                initialPropValues[propKey] = prop[propKey].value;\n            }\n        });\n        // Note for Developers: If we need to add coupon in paymentFormProperties, please be careful. The json parse error occurred at jotForm.js\n        initialPropValues.paymentFormProperties = {\n            products: prop.formProperties.products\n        };\n    }\n    if (Object.keys(initialPropValues).length > 0) {\n        script += `      JotForm.paymentProperties = ${JSONUnicodeEncode(JSON.stringify(initialPropValues))}\\n`;\n    }\n    return script;\n};\nProductContainer.checkRenderStatus = (prop)=>{\n    const opts = prop.formProperties.products || false;\n    if (!prop.inlineEditClass && prop.paymentType.value !== 'donation' && (opts === false || opts.length === 0) && !prop.isPaymentForm) {\n        return false;\n    }\n    return true;\n};\nProductContainer.staticVars = {\n    totalCounter: {},\n    productID: {},\n    hidden: false,\n    paymentLabels: [],\n    orderedSubproductOptionNames: {}\n};\nProductContainer.propTypes = {\n    id: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    compoundHint: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    paymentType: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    donationAmountField: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    donationText: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    currency: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    useDecimal: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    suggestedDonation: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    requireMinimum: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    multiple: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    paypalButton: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    controlPaymentType: PropTypes.string,\n    passive: PropTypes.bool,\n    isSelectedQuestion: PropTypes.bool,\n    inlineEditClass: PropTypes.elementType,\n    digitalGoods: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    decimalMark: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    sandbox: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    testmodeAuth: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    allowTest: PropTypes.shape({\n        value: PropTypes.bool\n    }),\n    showSingle: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.bool\n        ])\n    }),\n    enableLightBox: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showTotal: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showStripeCoupons: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showBillingError: PropTypes.shape({\n        value: PropTypes.bool\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    themeVersion: PropTypes.string,\n    formProperties: PropTypes.shape({\n        useStripeCoupons: PropTypes.string,\n        showStripeCoupons: PropTypes.string,\n        updateQuestionProperties: PropTypes.func,\n        coupons: PropTypes.array,\n        paymentListSettings: PropTypes.string,\n        taxes: PropTypes.array,\n        products: PropTypes.array,\n        highlightLine: PropTypes.string,\n        paymentStrings: PropTypes.array\n    }),\n    cdnconfig: PropTypes.shape({\n        CDN: PropTypes.string\n    }),\n    merchantId: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    stocks: PropTypes.arrayOf(PropTypes.shape()),\n    accountType: PropTypes.string,\n    nameAPM: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    isOpenedInPortal: PropTypes.bool,\n    isPaymentForm: PropTypes.bool,\n    isPortalProductListElement: PropTypes.bool // Rendered as PL element in App Builder context\n};\nProductContainer.defaultProps = {\n    isOpenedInPortal: false,\n    isPaymentForm: false,\n    isPortalProductListElement: false\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport BaseInput from '../helpers/BaseInput';\nimport { addValidation, classNames, subLabelSingle } from '../helpers/Utils';\nimport SubLabel from '../helpers/SubLabel';\nimport QuestionProps from '../helpers/QuestionProps';\nclass Autocomp extends Component {\n    render() {\n        const className = `${addValidation(classNames.textbox, this.props)} form-autocomplete`;\n        const fuzzySearch = this.props.fuzzySearch && this.props.fuzzySearch.value ? this.props.fuzzySearch.value : null;\n        const maxMatches = this.props.maxMatches && this.props.maxMatches.value ? this.props.maxMatches.value : null;\n        // autocomplete not added -> off added by Base Input\n        const { value: qidValue } = this.props.qid;\n        const subLabelObj = subLabelSingle(this.props, qidValue);\n        return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            propPath: \"subLabel\",\n            labelValue: subLabelObj,\n            for: qidValue,\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                qid: qidValue,\n                qname: this.props.qname.value,\n                fuzzySearch: fuzzySearch,\n                maxMatches: maxMatches,\n                additionalClass: className,\n                autocomplete: {\n                    value: 'off'\n                },\n                type: \"text\",\n                dataComponent: \"autocomplete\",\n                readOnly: this.props.readonly,\n                size: this.props.size,\n                defaultValue: this.props.defaultValue,\n                maxsize: this.props.maxsize\n            }))\n        }));\n    }\n}\nexport { Autocomp as default };\nAutocomp.getScript = (props)=>{\n    let script = '';\n    if (props.items && props.items.value) {\n        const value = props.items.value.replace(/'/gim, \"\\\\'\").replace(/&amp;/gim, '&').replace(/(?:\\r\\n|\\r|\\n)/g, '\\\\n');\n        script += `      JotForm.autoCompletes['${props.qid.value}'] = '${value} ';\\n`;\n    }\n    return script;\n};\nAutocomp.getState = ()=>{\n    return {};\n};\nAutocomp.propTypes = {\n    size: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    items: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    maxsize: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultValue: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    fuzzySearch: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    readonly: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    maxMatches: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\n","/* global Intl, JotForm, window, $$, $, Ajax */ /* eslint-disable no-use-before-define, no-param-reassign, new-cap */ import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { shape, string, bool, oneOfType, number } from 'prop-types';\nimport React, { Component } from 'react';\nimport { initializeAppointment, generateChecker } from '@jotforminc/form-common';\nimport { specialOptions, JSONUnicodeEncode } from '../helpers/Utils';\nclass Appointment extends Component {\n    componentDidMount() {\n        this.updater = initializeAppointment(this.props);\n    }\n    componentWillReceiveProps(newProps) {\n        const isChanged = generateChecker(newProps, this.props);\n        this.shouldUpdate = this.shouldUpdate || isChanged('id') || isChanged('timezone') || isChanged('slotDuration') || isChanged('startDate') || isChanged('endDate') || isChanged('blockoutDates') || isChanged('intervals') || isChanged('useLunchBreak') || isChanged('lunchBreak') || isChanged('minScheduleNotice') || isChanged('maxEvents') || isChanged('appointmentType') || isChanged('dateFormat') || isChanged('timeFormat') || isChanged('startWeekOn') || isChanged('rollingDays') || isChanged('autoDetectTimezone') || isChanged('maxAttendee');\n    }\n    componentDidUpdate() {\n        if (!this.shouldUpdate) {\n            return false;\n        }\n        if (this.updateThrottle) {\n            clearTimeout(this.updateThrottle);\n        }\n        this.updateThrottle = setTimeout(()=>{\n            this.shouldUpdate = false;\n            this.updater(this.props);\n        }, 1000);\n    }\n    render() {\n        const { id: { value: id }, qid: { value: qid }, qname: { value: qname }, slotDuration: { value: slotDuration }, timezone: { value: timezone }, required: { value: required }, timeFormat: { value: timeFormat } } = this.props;\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            id: qid,\n            className: \"appointmentFieldWrapper jfQuestion-fields\",\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    className: \"appointmentFieldInput\",\n                    name: `${qname}[implementation]`,\n                    value: \"new\",\n                    id: `input_${id}implementation`,\n                    \"aria-hidden\": \"true\",\n                    type: \"hidden\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    className: `appointmentFieldInput ${required === 'Yes' ? 'validate' : ''}`,\n                    name: `${qname}[date]`,\n                    id: `input_${id}_date`,\n                    \"data-timeformat\": timeFormat,\n                    \"aria-hidden\": \"true\",\n                    type: \"hidden\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    className: \"appointmentFieldInput\",\n                    name: `${qname}[duration]`,\n                    value: slotDuration,\n                    id: `input_${id}_duration`,\n                    \"aria-hidden\": \"true\",\n                    type: \"hidden\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    className: \"appointmentFieldInput\",\n                    name: `${qname}[timezone]`,\n                    value: timezone,\n                    id: `input_${id}_timezone`,\n                    \"aria-hidden\": \"true\",\n                    type: \"hidden\"\n                }),\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"appointmentField\"\n                })\n            ]\n        });\n    }\n}\nexport default Appointment;\nAppointment.getState = ()=>{\n    return {};\n};\nAppointment.getScript = (props)=>{\n    return `\n    JotForm.calendarMonths = ${JSON.stringify(props.months.value)};\n    JotForm.appointmentCalendarMonths = ${JSON.stringify(props.months.value)};\n    JotForm.appointmentCalendarDays = ${JSON.stringify(props.days.value)};\n    JotForm.calendarOther = ${JSON.stringify('Today')};\n    window.initializeAppointment(${JSONUnicodeEncode(JSON.stringify(props))});\n  `;\n};\nconst ValueType = oneOfType([\n    bool,\n    string,\n    number\n]);\n/* eslint-disable react/no-unused-prop-types */ Appointment.propTypes = {\n    id: shape({\n        id: ValueType\n    }),\n    qid: shape({\n        qid: ValueType\n    }),\n    qname: shape({\n        qname: ValueType\n    }),\n    slotDuration: shape({\n        slotDuration: ValueType\n    }),\n    timezone: shape({\n        timezone: ValueType\n    }),\n    required: shape({\n        required: ValueType\n    }),\n    dateFormat: shape({\n        dateFormat: ValueType\n    }),\n    cdnconfig: shape({\n        CDN: string\n    })\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport BaseButton from '../helpers/BaseButton';\nimport QuestionProps from '../helpers/QuestionProps';\nexport function getPagebreakProps(props) {\n    const styleName = props.buttonStyle && props.buttonStyle.value ? props.buttonStyle.value.toLowerCase() : null;\n    const className = styleName !== 'none' ? ` form-submit-button-${styleName}` : '';\n    const hiddenBack = !props.inlineEditClass && props.backVisi && props.backVisi.value === 'Hidden' ? ' button-hidden' : '';\n    const hiddenNext = !props.inlineEditClass && props.nextVisi && props.nextVisi.value === 'Hidden' ? ' button-hidden' : '';\n    const backStyle = props.inlineEditClass && props.backVisi && props.backVisi.value === 'Hidden' ? {\n        opacity: '0.3'\n    } : null;\n    const nextStyle = props.inlineEditClass && props.nextVisi && props.nextVisi.value === 'Hidden' ? {\n        opacity: '0.3'\n    } : null;\n    const firstPage = props.inlineEditClass && props.isFirstPage;\n    const lastPage = props.inlineEditClass && props.isLastPage;\n    const useNewContinueLater = props.useNewContinueLater && props.useNewContinueLater.value === 'Yes';\n    const sclButtonDefaultValue = QuestionProps.form.continueLaterButtonText.value;\n    return {\n        className,\n        hiddenBack,\n        hiddenNext,\n        backStyle,\n        nextStyle,\n        firstPage,\n        lastPage,\n        useNewContinueLater,\n        sclButtonDefaultValue\n    };\n}\nclass Pagebreak extends Component {\n    render() {\n        const { className, hiddenBack, hiddenNext, backStyle, nextStyle, firstPage, lastPage, useNewContinueLater, sclButtonDefaultValue } = getPagebreakProps(this.props);\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"form-pagebreak\",\n            \"data-component\": \"pagebreak\",\n            children: [\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"form-pagebreak-back-container\",\n                    children: firstPage ? null : /*#__PURE__*/ _jsx(BaseButton, {\n                        additionalClass: `form-pagebreak-back ${className}${hiddenBack} jf-form-buttons`,\n                        id: `form-pagebreak-back_${this.props.id.value}`,\n                        qid: this.props.id.value,\n                        propPath: \"backText\",\n                        buttonText: this.props.backText.value || 'Back',\n                        type: \"button\",\n                        inlineEditClass: this.props.inlineEditClass,\n                        inlineEditDefaultValue: QuestionProps[this.props.type.value].backText.value,\n                        style: backStyle,\n                        dataComponent: \"pagebreak-back\"\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"form-pagebreak-next-container\",\n                    children: !lastPage ? /*#__PURE__*/ _jsx(BaseButton, {\n                        additionalClass: `form-pagebreak-next ${className}${hiddenNext} jf-form-buttons`,\n                        id: `form-pagebreak-next_${this.props.id.value}`,\n                        qid: this.props.id.value,\n                        propPath: \"nextText\",\n                        buttonText: this.props.nextText.value || 'Next',\n                        type: \"button\",\n                        inlineEditClass: this.props.inlineEditClass,\n                        inlineEditDefaultValue: QuestionProps[this.props.type.value].nextText.value,\n                        style: nextStyle,\n                        dataComponent: \"pagebreak-next\"\n                    }) : null\n                }),\n                !lastPage && useNewContinueLater ? /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"form-pagebreak-next-container form-pagebreak-save-container\",\n                    children: /*#__PURE__*/ _jsx(BaseButton, {\n                        additionalClass: `form-submit-button form-sacl-button js-new-sacl-button ${className} jf-form-buttons ${this.props.themeVersion === 'v1' ? 'sacl-button' : ''}`,\n                        id: `input_scl_${this.props.id.value}`,\n                        inlineEditorCustomID: \"Form\",\n                        qid: this.props.id.value,\n                        type: \"button\",\n                        buttonText: this.props.continueLaterButtonText && this.props.continueLaterButtonText.value ? this.props.continueLaterButtonText.value : sclButtonDefaultValue,\n                        inlineEditClass: this.props.inlineEditClass,\n                        propPath: \"continueLaterButtonText\",\n                        inlineEditDefaultValue: sclButtonDefaultValue\n                    })\n                }) : null,\n                /*#__PURE__*/ _jsx(\"div\", {\n                    style: {\n                        clear: 'both'\n                    },\n                    className: \"pageInfo form-sub-label\",\n                    id: `pageInfo_${this.props.id.value}`\n                })\n            ]\n        });\n    }\n}\nexport { Pagebreak as default };\nPagebreak.getState = (prop)=>{\n    return {\n        pageInfo: prop.pageInfo,\n        backVisi: prop.backVisi,\n        nextVisi: prop.nextVisi\n    };\n};\nPagebreak.getScript = (prop)=>{\n    // const state = Pagebreak.getState(prop);\n    let script = '';\n    if (!prop.inlineEditClass && prop.autoNext && prop.autoNext.value === 'Yes') {\n        script += `      JotForm.autoNext(${prop.id.value});\\n`;\n    }\n    return script;\n};\nPagebreak.propTypes = {\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    buttonStyle: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    pageInfo: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    backText: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    nextText: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    backVisi: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    nextVisi: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    autoNext: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType,\n    // Both props below are used, but...\n    // eslint-disable-next-line react/no-unused-prop-types\n    isFirstPage: PropTypes.bool,\n    // eslint-disable-next-line react/no-unused-prop-types\n    isLastPage: PropTypes.bool,\n    id: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    continueLaterButtonText: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    useNewContinueLater: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    themeVersion: PropTypes.string\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nclass JotCaptcha extends Component {\n    render() {\n        let captchaImage = /*#__PURE__*/ _jsx(\"img\", {\n            alt: \"Captcha - Reload if not displayed\",\n            id: `${this.props.qid.value}_captcha`,\n            className: \"form-captcha-image\",\n            style: {\n                background: `url(${this.props.cdnconfig.CDN}images/loader-big.gif) no-repeat center`\n            },\n            src: `${this.props.cdnconfig.CDN}images/blank.gif`,\n            width: 150,\n            height: 41\n        });\n        const reloadButton = /*#__PURE__*/ _jsx(\"img\", {\n            src: `${this.props.cdnconfig.CDN}images/reload.png`,\n            alt: \"Reload\",\n            style: {\n                cursor: 'pointer',\n                verticalAlign: 'middle'\n            },\n            id: `${this.props.qid.value}_reload`\n        });\n        if (this.props.passive) {\n            captchaImage = /*#__PURE__*/ _jsx(\"img\", {\n                alt: \"Captcha - Reload if not displayed\",\n                className: \"form-captcha-image\",\n                src: \"../cimg/38.png\",\n                width: 150\n            });\n        }\n        const required = this.props.required && this.props.required.value === 'Yes' ? true : null;\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            className: \"form-captcha\",\n            \"data-component\": \"captcha\",\n            children: [\n                /*#__PURE__*/ _jsx(\"label\", {\n                    htmlFor: this.props.qid.value,\n                    children: captchaImage\n                }),\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    style: {\n                        whiteSpace: 'nowrap'\n                    },\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"text\",\n                            id: this.props.qid.value,\n                            className: \"form-textbox validate[required]\",\n                            name: \"captcha\",\n                            style: {\n                                width: '130px'\n                            },\n                            required: required\n                        }),\n                        reloadButton,\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"hidden\",\n                            name: \"captcha_id\",\n                            id: `${this.props.qid.value}_captcha_id`,\n                            value: \"0\"\n                        })\n                    ]\n                })\n            ]\n        });\n    }\n}\nexport { JotCaptcha as default };\nJotCaptcha.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    cdnconfig: PropTypes.shape({\n        CDN: PropTypes.string\n    }),\n    passive: PropTypes.bool,\n    required: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\nJotCaptcha.getScript = (prop)=>{\n    let script = `JotForm.initCaptcha('${prop.qid.value}');\\n`;\n    script += `$('${prop.qid.value}_reload').observe('click',function(){ JotForm.reloadCaptcha('${prop.qid.value}') })\\n`;\n    return script;\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nclass ReCaptcha extends Component {\n    render() {\n        const isInvisibleReCaptcha = this.props.captchaType && this.props.captchaType.value === 'reCaptcha' && this.props.isInvisibleReCaptcha && this.props.isInvisibleReCaptcha.value === 'Yes' ? true : false;\n        if (this.props.passive) {\n            return /*#__PURE__*/ _jsx(\"img\", {\n                height: \"76\",\n                src: isInvisibleReCaptcha ? '/images/reCaptchaV2_static_invisible.png' : '/images/reCaptchaV2_static.png',\n                style: {\n                    maxWidth: '300px',\n                    width: '100%'\n                }\n            });\n        }\n        function createReCaptchaMarkup(props) {\n            const siteKey = isInvisibleReCaptcha ? '6LcG3CgUAAAAAGOEEqiYhmrAm6mt3BDRhTrxWCKb' : '6LdU3CgUAAAAAB0nnFM3M3T0sy707slYYU51RroJ';\n            const recaptchaCode = `\n        var recaptchaLoaded${props.qid.value} = function() {\n          window.grecaptcha.render($(\"recaptcha_${props.qid.value}\"), {\n            sitekey: '${siteKey}',\n          });\n          var grecaptchaBadge = document.querySelector('.grecaptcha-badge');\n          if (grecaptchaBadge) {\n            grecaptchaBadge.style.boxShadow = 'gray 0px 0px 2px';\n          }\n        };\n\n        /**\n         * Called when the reCaptcha verifies the user is human\n         * For invisible reCaptcha;\n         *   Submit event is stopped after validations and recaptcha is executed.\n         *   If a challenge is not displayed, this will be called right after grecaptcha.execute()\n         *   If a challenge is displayed, this will be called when the challenge is solved successfully\n         *   Submit is triggered to actually submit the form since it is stopped before.\n         */\n        var recaptchaCallback${props.qid.value} = function() {\n          var isInvisibleReCaptcha = ${isInvisibleReCaptcha};\n          var hiddenInput = $(\"${props.qid.value}\");\n          hiddenInput.setValue(1);\n          if (!isInvisibleReCaptcha) {\n            if (hiddenInput.validateInput) {\n              hiddenInput.validateInput();\n            }\n          } else {\n            triggerSubmit(hiddenInput.form)\n          }\n\n          function triggerSubmit(formElement) {\n            var button = formElement.ownerDocument.createElement('input');\n            button.style.display = 'none';\n            button.type = 'submit';\n            formElement.appendChild(button).click();\n            formElement.removeChild(button);\n          }\n        }\n\n        // not really required for invisible recaptcha\n        var recaptchaExpiredCallback${props.qid.value} = function() {\n          var hiddenInput = $(\"${props.qid.value}\");\n          hiddenInput.writeAttribute(\"value\", false);\n          if (hiddenInput.validateInput) {\n            hiddenInput.validateInput();\n          }\n        }\n      `;\n            return {\n                __html: recaptchaCode\n            };\n        }\n        return /*#__PURE__*/ _jsxs(\"section\", {\n            \"data-wrapper-react\": \"true\",\n            \"data-invisible-captcha\": isInvisibleReCaptcha ? 'true' : null,\n            children: [\n                /*#__PURE__*/ _jsx(\"div\", {\n                    id: `recaptcha_${this.props.qid.value}`,\n                    \"data-component\": \"recaptcha\",\n                    \"data-callback\": `recaptchaCallback${this.props.qid.value}`,\n                    \"data-size\": isInvisibleReCaptcha ? 'invisible' : null,\n                    \"data-badge\": isInvisibleReCaptcha ? 'inline' : null,\n                    \"data-expired-callback\": `recaptchaExpiredCallback${this.props.qid.value}`\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    id: this.props.qid.value,\n                    className: `hidden ${isInvisibleReCaptcha ? '' : 'validate[required]'}`,\n                    name: `${isInvisibleReCaptcha ? 'recaptcha_invisible' : 'recaptcha_visible'}`,\n                    required: \"true\"\n                }),\n                /*#__PURE__*/ _jsx(\"script\", {\n                    type: \"text/javascript\",\n                    src: `https://www.google.com/recaptcha/api.js?render=explicit&onload=recaptchaLoaded${this.props.qid.value}`\n                }),\n                /*#__PURE__*/ _jsx(\"script\", {\n                    type: \"text/javascript\",\n                    dangerouslySetInnerHTML: createReCaptchaMarkup(this.props)\n                })\n            ]\n        });\n    }\n}\nexport { ReCaptcha as default };\nReCaptcha.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    captchaType: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    isInvisibleReCaptcha: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    passive: PropTypes.bool\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nclass HCaptcha extends Component {\n    render() {\n        if (this.props.passive) {\n            return /*#__PURE__*/ _jsx(\"img\", {\n                height: \"76\",\n                src: \"/images/hCaptcha.png\",\n                alt: \"Captcha\",\n                style: {\n                    maxWidth: '300px',\n                    width: '100%'\n                }\n            });\n        }\n        function createHCaptchaMarkup(props) {\n            const hcaptchaCode = `\n\n        var hcaptchaCallback${props.qid.value} = function(token) {\n          var hiddenInput = $(\"${props.qid.value}\");\n          hiddenInput.setValue(1);\n          if (hiddenInput.validateInput) {\n            hiddenInput.validateInput();\n          }\n        }\n\n        var hcaptchaExpiredCallback${props.qid.value} = function() {\n          var hiddenInput = $(\"${props.qid.value}\");\n          hiddenInput.writeAttribute(\"value\", false);\n          if (hiddenInput.validateInput) {\n            hiddenInput.validateInput();\n          }\n        }\n      `;\n            return {\n                __html: hcaptchaCode\n            };\n        }\n        return /*#__PURE__*/ _jsxs(\"section\", {\n            \"data-wrapper-react\": \"true\",\n            children: [\n                /*#__PURE__*/ _jsx(\"div\", {\n                    id: `hcaptcha_${this.props.qid.value}`,\n                    className: \"h-captcha\",\n                    \"data-siteKey\": \"772f4a50-7161-425e-8cd5-4d7e361ab765\",\n                    \"data-callback\": `hcaptchaCallback${this.props.qid.value}`,\n                    \"data-expired-callback\": `hcaptchaExpiredCallback${this.props.qid.value}`\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    id: this.props.qid.value,\n                    className: \"hidden validate[required]\",\n                    name: \"hcaptcha_visible\",\n                    required: \"true\"\n                }),\n                /*#__PURE__*/ _jsx(\"script\", {\n                    type: \"text/javascript\",\n                    src: \"https://hcaptcha.com/1/api.js\"\n                }),\n                /*#__PURE__*/ _jsx(\"script\", {\n                    type: \"text/javascript\",\n                    dangerouslySetInnerHTML: createHCaptchaMarkup(this.props)\n                })\n            ]\n        });\n    }\n}\nexport { HCaptcha as default };\nHCaptcha.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    captchaType: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    passive: PropTypes.bool\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport OptionsBase from '../helpers/OptionsBase';\nconst Checkbox = (props)=>/*#__PURE__*/ _jsx(OptionsBase, _object_spread_props(_object_spread({}, props), {\n        type: \"control_checkbox\"\n    }));\nCheckbox.getScript = (prop)=>{\n    if (prop.shuffle && prop.shuffle.value === 'Yes') {\n        return `      JotForm.shuffleOptions(\"${prop.id.value}\");\\n`;\n    }\n    return '';\n};\nexport default Checkbox;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy, getCurrentTime, addZeros, subLabel } from '@jotforminc/form-common';\nimport { addValidation, classNames, subLabelSingle } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport SubLabel from '../helpers/SubLabel';\nclass Time extends Component {\n    get currentTime() {\n        if (this.props.defaultTime.value.indexOf('custom_') > -1) {\n            let toCustomHour = false;\n            let toCustomMinute = false;\n            let fromD = this.props.defaultTime.value.split('custom_')[1];\n            // time range\n            if (fromD.indexOf('-') > -1) {\n                const range = fromD.split('-');\n                const to = range[1];\n                fromD = range[0];\n                const toSplit = to.split(':');\n                toCustomHour = toSplit[0];\n                toCustomMinute = toSplit[1];\n            }\n            return getCurrentTime(this.props, fromD.split(':')[0], fromD.split(':')[1], toCustomHour, toCustomMinute);\n        }\n        return getCurrentTime(this.props);\n    }\n    isAMPM() {\n        return this.props.timeFormat && this.props.timeFormat.value !== '24 Hour';\n    }\n    renderTimebox(isRange = false) {\n        const hourSubLabel = subLabel(this.props, isRange ? 'hourRange' : 'hour', this.props.id.value);\n        const minSublabel = subLabel(this.props, 'minutes', this.props.id.value);\n        const hourSubLabelRange = subLabel(this.props, 'hourRange', this.props.id.value);\n        const minSublabelRange = subLabel(this.props, 'minutesRange', this.props.id.value);\n        const defaultClassName = this.props.defaultTime.value === 'current' ? 'currentTime ' : '';\n        const disabled = this.props.readonly && this.props.readonly.value === 'Yes' ? ' disabled' : '';\n        const mask = this.props.timeFormat && this.props.timeFormat.value === '24 Hour' ? 'HH:MM' : 'hh:MM';\n        const hasDefault = this.props.defaultTime && this.props.defaultTime.value !== 'none';\n        const hourInputName = this.props.isDatetime ? 'hour' : 'hourSelect';\n        const minInputName = this.props.isDatetime ? 'min' : 'minuteSelect';\n        const disallowPast = this.props.disallowPast;\n        const defaultLabel = {\n            text: `${hourSubLabel.text} ${minSublabel.text}`,\n            id: hourSubLabel.id\n        };\n        const rangeLabel = {\n            text: `${hourSubLabelRange.text} ${minSublabelRange.text}`,\n            id: hourSubLabelRange.id\n        };\n        return /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: isRange ? rangeLabel : defaultLabel,\n            seperateTranslate: true,\n            propPath: isRange ? 'sublabels.hourRange' : 'sublabels.hour',\n            defaultValue: QuestionProps[this.props.type.value].sublabels.value.hour,\n            for: `${this.props.qid.value}_${isRange ? 'timeInputRange' : 'timeInput'}`,\n            key: isRange ? 'hour_range' : 'hour',\n            containerClasses: this.isAMPM() ? 'hasAMPM' : '',\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    className: `${!isRange ? defaultClassName : ''}time-dropdown ${addValidation(classNames.textbox, this.props, [\n                        'time',\n                        disallowPast\n                    ])}`,\n                    id: `input_${this.props.id.value}_${isRange ? 'timeInputRange' : 'timeInput'}`,\n                    name: `${this.props.qname.value}${isRange ? '[timeInputRange]' : '[timeInput]'}`,\n                    type: \"text\",\n                    required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                    placeholder: \"HH : MM\",\n                    disabled: disabled,\n                    \"aria-labelledby\": ariaLabelledBy(this.props, isRange ? hourSubLabelRange : hourSubLabel),\n                    readOnly: isRange ? this.props.inlineEditClass : null,\n                    \"data-mask\": mask,\n                    value: hasDefault ? `${addZeros(this.currentTime.hour, 2)}:${addZeros(this.currentTime.min, 2)}` : '',\n                    autoComplete: \"off\",\n                    \"data-version\": \"v2\"\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    className: classNames.hiddenTime,\n                    id: `input_${this.props.id.value}_${isRange ? 'hourSelectRange' : 'hourSelect'}`,\n                    name: `${this.props.qname.value}[${isRange ? 'hourSelectRange' : hourInputName}]`,\n                    value: hasDefault ? addZeros(this.currentTime.hour, 2) : null\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    className: classNames.hiddenTime,\n                    id: `input_${this.props.id.value}_${isRange ? 'minuteSelectRange' : 'minuteSelect'}`,\n                    name: `${this.props.qname.value}[${isRange ? 'minuteSelectRange' : minInputName}]`,\n                    value: hasDefault ? addZeros(this.currentTime.min, 2) : null\n                })\n            ]\n        }));\n    }\n    renderAmPm(isRange = false) {\n        if (!this.isAMPM()) {\n            return null;\n        }\n        const ampmSubLabel = subLabelSingle({\n            subLabel: {\n                value: 'AM/PM Option'\n            }\n        }, 'ampm', this.props.id.value);\n        const ampmRangeSubLabel = subLabelSingle({\n            subLabel: {\n                value: 'AM/PM Option'\n            }\n        }, 'ampmRange', this.props.id.value);\n        const disabled = this.props.readonly && this.props.readonly.value === 'Yes' ? ' disabled' : '';\n        const currentAmPm = isRange ? this.currentTime.currentAmpmRange : this.currentTime.currentAmpm;\n        const disallowPast = this.props.disallowPast;\n        const ampm = [];\n        if (!this.props.showDayPeriods || this.props.showDayPeriods.value !== 'pmOnly') {\n            const selected = currentAmPm === 'AM' ? 'selected' : null;\n            ampm.push(/*#__PURE__*/ _jsx(\"option\", {\n                selected: selected,\n                value: \"AM\",\n                children: 'AM'.locale()\n            }, isRange ? 'range_am' : 'am'));\n        }\n        if (!this.props.showDayPeriods || this.props.showDayPeriods.value !== 'amOnly') {\n            const selected = currentAmPm === 'PM' ? 'selected' : null;\n            ampm.push(/*#__PURE__*/ _jsx(\"option\", {\n                selected: selected,\n                value: \"PM\",\n                children: 'PM'.locale()\n            }, isRange ? 'range_pm' : 'pm'));\n        }\n        return /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            wrapAlways: true,\n            editable: false,\n            for: `${this.props.qid.value}_${isRange ? 'ampmRange' : 'ampm'}`,\n            labelValue: isRange ? ampmRangeSubLabel : ampmSubLabel,\n            hidePartLabelA11Y: true,\n            key: isRange ? 'ampm_range' : 'ampm'\n        }), /*#__PURE__*/ _jsx(\"select\", {\n            disabled: disabled,\n            className: `time-dropdown ${addValidation(classNames.dropdown, this.props, disallowPast)}`,\n            id: `input_${this.props.id.value}_${isRange ? 'ampmRange' : 'ampm'}`,\n            name: `${this.props.qname.value}${isRange ? '[ampmRange]' : '[ampm]'}`,\n            \"data-component\": isRange ? 'time-ampm-range' : 'time-ampm',\n            required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n            \"aria-labelledby\": ariaLabelledBy(this.props, isRange ? ampmRangeSubLabel : ampmSubLabel),\n            autoComplete: \"off\",\n            children: ampm\n        }));\n    }\n    renderRangeSeparator() {\n        const untilSpan = this.props.inlineEditClass ? /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n            id: this.props.id.value,\n            propPath: 'until',\n            text: this.props.until ? this.props.until.value : 'until',\n            defaultValue: this.props.until ? this.props.until.value : 'until',\n            placeholder: 'Type a range indicator.'\n        }) : this.props.until && this.props.until.value || '';\n        return /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            propPath: 'sublabels.until',\n            wrapAlways: true,\n            editable: false,\n            for: `until_${this.props.id.value}`,\n            labelValue: \"until\",\n            containerClasses: \"until-wrapper\",\n            hidePartLabelA11Y: true,\n            key: \"until_range\"\n        }), /*#__PURE__*/ _jsx(\"div\", {\n            className: 'until-text',\n            tabIndex: \"0\",\n            id: `until_${this.props.id.value}`,\n            children: untilSpan\n        }));\n    }\n    renderDifference() {\n        return /*#__PURE__*/ _jsxs(SubLabel, {\n            labelValue: \"Total 0.0\",\n            wrapAlways: true,\n            editable: false,\n            for: `input_${this.props.id.value}_dummy`,\n            containerClasses: \"total-range-wrapper\",\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    id: `duration_${this.props.id.value}_ampmRange`,\n                    name: `${this.props.qname.value}[timeRangeDuration]`\n                }),\n                /*#__PURE__*/ _jsx(\"span\", {\n                    tabIndex: \"0\",\n                    id: `input_${this.props.id.value}_dummy`\n                })\n            ]\n        });\n    }\n    render() {\n        const isRange = this.props.range && this.props.range.value === 'Yes';\n        const showTimeDiff = this.props.timeDiff && this.props.timeDiff.value === 'Yes';\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            children: [\n                this.renderTimebox(),\n                this.renderAmPm(),\n                isRange && this.renderRangeSeparator(),\n                isRange && this.renderTimebox(isRange),\n                isRange && this.renderAmPm(isRange),\n                isRange && showTimeDiff && this.renderDifference()\n            ]\n        });\n    }\n}\nTime.getScript = (props)=>{\n    let script = '';\n    const id = props.id.value;\n    if (props.range && props.range.value === 'Yes' && props.timeDiff && props.timeDiff.value === 'Yes') {\n        script += `      JotForm.displayTimeRangeDuration(${id});\\n`;\n    }\n    const fixAmPm = props.timeFormat && props.timeFormat.value === 'AM/PM' && props.showDayPeriods && props.showDayPeriods.value === 'both' && props.defaultTime && props.defaultTime.value === 'none';\n    if (!props.inlineEditClass && props.defaultTime && (props.defaultTime.value === 'current' || fixAmPm)) {\n        script += `      JotForm.displayLocalTime(\"input_${id}_hourSelect\", \"input_${id}_minuteSelect\",\"input_${id}_ampm\", \"input_${id}_timeInput\", ${fixAmPm});\\n`;\n    }\n    return script;\n};\nTime.getState = ()=>{};\nTime.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    id: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    text: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    required: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    range: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    timeFormat: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showDayPeriods: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultTime: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    step: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    description: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    timeDiff: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    until: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabels: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    readonly: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    isDatetime: PropTypes.bool,\n    inlineEditClass: PropTypes.elementType\n};\nexport default Time;\n","/* eslint-disable */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport React from 'react';\nimport SubLabel from '../helpers/SubLabel';\nimport { ariaLabelledBy, getCurrentTime, addZeros, subLabel } from '@jotforminc/form-common';\nimport { addValidation, classNames, JSONUnicodeEncode, subLabelSingle } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport Time2 from './Timev2';\nconst Datetime = (props)=>{\n    var _prop_defaultTime_value;\n    const dateTimeDefaultSublabels = QuestionProps.control_datetime.sublabels.value;\n    const prop = props;\n    const qid = prop.qid.value;\n    const qname = prop.qname.value;\n    const id = prop.id.value;\n    const CDN = prop.cdnconfig.CDN;\n    const readonly = prop.readonly && prop.readonly.value === 'Yes' ? '1' : null;\n    const required = prop.required && prop.required.value === 'Yes' ? '1' : null;\n    const autoCalendarClass = prop.autoCalendar.value === 'Yes' ? 'showAutoCalendar' : null;\n    const ampmFormat = prop.timeFormat && prop.timeFormat.value === 'AM/PM';\n    const iconLiteClass = prop.liteMode.value === 'Yes' ? 'icon-liteMode' : 'icon-seperatedMode';\n    const isNewTheme = prop.themeVersion && prop.themeVersion === 'v2';\n    const isFillablePDF = prop.isFillablePDF;\n    const icon = !isFillablePDF ? /*#__PURE__*/ _jsx(\"img\", {\n        className: `${autoCalendarClass || ''} newDefaultTheme-dateIcon ${iconLiteClass}`,\n        alt: 'Pick a Date'.locale(),\n        id: `${qid}_pick`,\n        src: `${CDN || ''}images/calendar.png`,\n        \"data-component\": \"datetime\",\n        \"aria-hidden\": \"true\",\n        \"data-allow-time\": prop.allowTime.value,\n        \"data-version\": prop.themeVersion === 'v2' ? 'v2' : 'v1'\n    }) : null;\n    if (prop.defaultTime.value === 'Yes') {\n        prop.defaultTime.value = 'current';\n        prop.defaultDate.value = 'current';\n    } else if (prop.defaultTime.value === 'No') {\n        prop.defaultTime.value = 'none';\n        prop.defaultDate.value = 'none';\n    }\n    let year = '';\n    let month = '';\n    let day = '';\n    if (prop.defaultDate.value === 'current') {\n        const date = new Date();\n        month = addZeros(date.getMonth() + 1, 2);\n        day = addZeros(date.getDate(), 2);\n        year = date.getYear() < 1000 ? date.getYear() + 1900 : date.getYear();\n    } else if (typeof prop.defaultDate.value === 'string' && prop.defaultDate.value.indexOf('custom') > -1) {\n        const date = prop.defaultDate.value.split('_')[1];\n        if (date) {\n            const dateComponents = date.split('-');\n            if (dateComponents.length > 2) {\n                year = dateComponents[0] || '';\n                month = dateComponents[1] || '';\n                day = dateComponents[2] || '';\n            }\n        }\n    }\n    // Date Format\n    let dateSeparator = '/';\n    if (prop.dateSeparator.value) {\n        dateSeparator = prop.dateSeparator.value;\n    }\n    let liteModeInitialValue = '';\n    let liteModePlaceholder = '';\n    let validateString = '';\n    let liteModePlaceholderV2 = '';\n    let liteModePlaceholderWithoutTranslation = '';\n    const formats = {\n        'yyyymmdd': [\n            'yyyy',\n            'mm',\n            'dd'\n        ],\n        'mmddyyyy': [\n            'mm',\n            'dd',\n            'yyyy'\n        ],\n        'ddmmyyyy': [\n            'dd',\n            'mm',\n            'yyyy'\n        ]\n    };\n    if (prop.liteMode.value === 'Yes') {\n        var _prop_defaultDate_value;\n        validateString = 'validateLiteDate';\n        const selectedFormat = prop.format.value;\n        const formatParts = formats[selectedFormat];\n        if (formatParts) {\n            const translatedParts = formatParts.map((part)=>part.locale());\n            liteModePlaceholder = translatedParts.join(dateSeparator);\n            liteModePlaceholderWithoutTranslation = formatParts.join(dateSeparator).toUpperCase();\n            liteModePlaceholderV2 = liteModePlaceholder.toUpperCase();\n        }\n        if (prop.defaultDate.value === 'current' || ((_prop_defaultDate_value = prop.defaultDate.value) === null || _prop_defaultDate_value === void 0 ? void 0 : _prop_defaultDate_value.indexOf('custom')) > -1) {\n            liteModeInitialValue = month + dateSeparator + day + dateSeparator + year;\n            if (prop.format.value === 'ddmmyyyy') {\n                liteModeInitialValue = day + dateSeparator + month + dateSeparator + year;\n            } else if (prop.format.value === 'yyyymmdd') {\n                liteModeInitialValue = year + dateSeparator + month + dateSeparator + day;\n            }\n        }\n    }\n    let minAge = '';\n    if (prop.ageVerification && prop.ageVerification.value === 'Yes' && prop.minAge && prop.minAge.value) {\n        minAge = prop.minAge.value;\n    }\n    let limitDate = false;\n    if (prop.limitDate && prop.limitDate.value && prop.limitDate.value !== false) {\n        limitDate = JSON.stringify(prop.limitDate.value);\n    }\n    const limitDateText = limitDate ? 'limitDate' : '';\n    // Date\n    const disallowPast = prop.onlyFuture && prop.onlyFuture.value === 'Yes' ? 'disallowPast' : '';\n    let dd = /*#__PURE__*/ _jsx(\"input\", {\n        readOnly: prop.inlineEditClass || readonly,\n        className: (prop.defaultDate.value === 'current' ? 'currentDate ' : '') + addValidation(classNames.textbox, prop, disallowPast, limitDateText),\n        id: `day_${id}`,\n        name: `${qname}[day]`,\n        type: \"tel\",\n        size: \"2\",\n        \"data-maxlength\": \"2\",\n        \"data-age\": minAge,\n        maxLength: \"2\",\n        value: day,\n        required,\n        autoComplete: \"off\",\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabel(prop, 'day', id))\n    }, `day_${id}`);\n    let mm = /*#__PURE__*/ _jsx(\"input\", {\n        readOnly: prop.inlineEditClass || readonly,\n        className: addValidation(classNames.textbox, prop, disallowPast, limitDateText),\n        id: `month_${id}`,\n        name: `${qname}[month]`,\n        type: \"tel\",\n        size: \"2\",\n        \"data-maxlength\": \"2\",\n        \"data-age\": minAge,\n        maxLength: \"2\",\n        value: month,\n        required,\n        autoComplete: \"off\",\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabel(prop, 'month', id))\n    }, `month_${id}`);\n    let yy = /*#__PURE__*/ _jsx(\"input\", {\n        readOnly: prop.inlineEditClass || readonly,\n        className: addValidation(classNames.textbox, prop, disallowPast, limitDateText),\n        id: `year_${id}`,\n        name: `${qname}[year]`,\n        type: \"tel\",\n        size: \"4\",\n        \"data-maxlength\": \"4\",\n        \"data-age\": minAge,\n        maxLength: \"4\",\n        value: year,\n        required,\n        autoComplete: \"off\",\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabel(prop, 'year', id))\n    }, `year_${id}`);\n    const liteModePlaceHolderVal = isNewTheme ? liteModePlaceholderV2 : liteModePlaceholder;\n    const liteModeMarkup = /*#__PURE__*/ _jsx(\"input\", {\n        className: addValidation(classNames.textbox, prop, [\n            disallowPast,\n            limitDateText,\n            validateString\n        ]),\n        id: `lite_mode_${id}`,\n        type: \"text\",\n        size: \"12\",\n        \"data-maxlength\": \"12\",\n        maxLength: \"12\",\n        \"data-age\": minAge,\n        value: liteModeInitialValue,\n        readOnly: readonly,\n        required: required,\n        \"data-format\": prop.format.value,\n        \"data-seperator\": dateSeparator,\n        placeholder: liteModePlaceHolderVal,\n        \"data-placeholder\": liteModePlaceholderWithoutTranslation,\n        disabled: prop.inlineEditClass,\n        autoComplete: \"off\",\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabel(prop, 'litemode', id))\n    });\n    const disabled = prop.readonly && prop.readonly.value === 'Yes' ? '1' : null;\n    let cur;\n    if (((_prop_defaultTime_value = prop.defaultTime.value) === null || _prop_defaultTime_value === void 0 ? void 0 : _prop_defaultTime_value.indexOf('custom_')) > -1) {\n        const time = prop.defaultTime.value.split('custom_')[1];\n        cur = getCurrentTime(prop, time.split(':')[0], time.split(':')[1]);\n    } else {\n        cur = getCurrentTime(prop);\n    }\n    const displayTime = prop.defaultTime.value !== 'none';\n    let options = [];\n    for(let index = cur.start; index <= cur.limit; index += 1){\n        const selectedHour = ampmFormat ? index.toString() : addZeros(index, 2);\n        const hourVal = ampmFormat ? index : addZeros(index, 2);\n        const selected = displayTime && selectedHour === cur.hour ? 1 : null;\n        options.push(/*#__PURE__*/ _jsx(\"option\", {\n            selected: selected,\n            value: hourVal,\n            children: hourVal\n        }, hourVal));\n    }\n    let hh = /*#__PURE__*/ _jsxs(\"select\", {\n        className: `${prop.defaultTime.value === 'current' ? 'currentTime ' : ''}time-dropdown ${addValidation(classNames.dropdown, prop, disallowPast, limitDateText)}`,\n        id: `hour_${id}`,\n        name: `${qname}[hour]`,\n        disabled: prop.inlineEditClass || disabled,\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabel(prop, 'hour', id)),\n        children: [\n            /*#__PURE__*/ _jsx(\"option\", {}),\n            options\n        ]\n    }, \"hour\");\n    options = [];\n    for(let index = 0; index < 60; index += Number(cur.step)){\n        const selected = displayTime && index === parseInt(cur.min, 10) ? 'selected=\"1\"' : null;\n        options.push(/*#__PURE__*/ _jsx(\"option\", {\n            selected: selected,\n            value: addZeros(index, 2),\n            children: addZeros(index, 2)\n        }, index));\n    }\n    let ii = /*#__PURE__*/ _jsxs(\"select\", {\n        className: `time-dropdown ${addValidation(classNames.dropdown, prop, disallowPast, limitDateText)}`,\n        id: `min_${id}`,\n        name: `${qname}[min]`,\n        disabled: prop.inlineEditClass || disabled,\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabel(prop, 'minutes', id)),\n        children: [\n            /*#__PURE__*/ _jsx(\"option\", {}),\n            options\n        ]\n    }, \"minutes\");\n    const dayPeriodOptions = [\n        'am',\n        'pm'\n    ];\n    const filterDayPeriodOptions = (option)=>prop.showDayPeriods && (prop.showDayPeriods.value === 'both' || `${option}Only` === prop.showDayPeriods.value);\n    const ampmOptions = dayPeriodOptions.filter(filterDayPeriodOptions).map((option)=>{\n        const ucOption = option.toUpperCase();\n        return /*#__PURE__*/ _jsx(\"option\", {\n            selected: cur.currentAmpm === ucOption,\n            value: ucOption,\n            children: ucOption.locale()\n        }, ucOption);\n    });\n    let ampm = /*#__PURE__*/ _jsx(\"select\", {\n        disabled: disabled || prop.inlineEditClass,\n        className: `time-dropdown ${addValidation(classNames.dropdown, prop, disallowPast, limitDateText)}`,\n        id: `ampm_${id}`,\n        name: `${qname}[ampm]`,\n        \"aria-labelledby\": ariaLabelledBy(prop, subLabelSingle({\n            subLabel: {\n                value: 'AM/PM Option'\n            }\n        }, 'ampm', id)),\n        children: ampmOptions\n    }, \"ampm\");\n    mm = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n        labelValue: subLabel(prop, 'month', id),\n        propPath: \"sublabels.month\",\n        defaultValue: dateTimeDefaultSublabels.month,\n        for: `month_${id}`,\n        link: /*#__PURE__*/ _jsxs(\"span\", {\n            className: \"date-separate\",\n            \"aria-hidden\": \"true\",\n            children: [\n                \" \",\n                `${dateSeparator}`\n            ]\n        }),\n        key: `month_${id}`\n    }), mm);\n    const iconMarkup = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n        wrapAlways: true,\n        editable: false,\n        for: `${qid}_pick`,\n        key: `${qid}_readOnly`,\n        labelValue: \"Date Picker Icon\",\n        hidePartLabelA11Y: true,\n        ariaHidden: true\n    }), icon);\n    let markup = [];\n    if (prop.format.value === 'yyyymmdd') {\n        yy = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'year', id),\n            propPath: \"sublabels.year\",\n            defaultValue: dateTimeDefaultSublabels.year,\n            for: `year_${id}`,\n            link: /*#__PURE__*/ _jsxs(\"span\", {\n                className: \"date-separate\",\n                \"aria-hidden\": \"true\",\n                children: [\n                    \" \",\n                    `${dateSeparator}`\n                ]\n            }),\n            key: `year_${id}`\n        }), yy);\n        dd = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'day', id),\n            propPath: \"sublabels.day\",\n            for: `day_${id}`,\n            defaultValue: dateTimeDefaultSublabels.day,\n            key: `day_${id}`\n        }), dd);\n        markup = [\n            yy,\n            mm,\n            dd\n        ];\n    } else {\n        yy = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'year', id),\n            propPath: \"sublabels.year\",\n            for: `year_${id}`,\n            defaultValue: dateTimeDefaultSublabels.year,\n            key: `year_${id}`\n        }), yy);\n        dd = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'day', id),\n            propPath: \"sublabels.day\",\n            for: `day_${id}`,\n            link: /*#__PURE__*/ _jsxs(\"span\", {\n                className: \"date-separate\",\n                \"aria-hidden\": \"true\",\n                children: [\n                    \" \",\n                    `${dateSeparator}`\n                ]\n            }),\n            defaultValue: dateTimeDefaultSublabels.day,\n            key: `day_${id}`\n        }), dd);\n        if (prop.format.value === 'mmddyyyy') {\n            markup.push(mm);\n            markup.push(dd);\n        } else {\n            markup.push(dd);\n            markup.push(mm);\n        }\n        // Year\n        markup.push(yy);\n    }\n    if (prop.liteMode.value === 'Yes') {\n        const tmp = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'litemode', id),\n            propPath: \"sublabels.litemode\",\n            for: `lite_mode_${id}`,\n            defaultValue: dateTimeDefaultSublabels.litemode,\n            key: `liteMode_${id}`,\n            children: [\n                liteModeMarkup,\n                icon\n            ]\n        }));\n        markup = [\n            /*#__PURE__*/ _jsx(\"div\", {\n                style: {\n                    display: 'none'\n                },\n                children: markup\n            }, \"dateLiteMode\"),\n            tmp\n        ];\n    } else {\n        markup.push(iconMarkup);\n    }\n    if (prop.allowTime.value === 'Yes' && prop.themeVersion === 'v2') {\n        let classNameSpn = 'allowTime-container';\n        classNameSpn += ampmFormat ? ' timeAMPM' : '';\n        markup.push(/*#__PURE__*/ _jsx(\"span\", {\n            className: classNameSpn,\n            children: /*#__PURE__*/ _jsx(Time2, _object_spread_props(_object_spread({}, prop), {\n                isDatetime: true,\n                disallowPast: disallowPast\n            }))\n        }, \"time\"));\n    } else if (prop.allowTime.value === 'Yes') {\n        hh = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'hour', id),\n            propPath: \"sublabels.hour\",\n            defaultValue: dateTimeDefaultSublabels.hour,\n            for: `hour_${id}`,\n            link: /*#__PURE__*/ _jsx(\"span\", {\n                className: \"date-separate\",\n                \"aria-hidden\": \"true\",\n                children: \" :\"\n            }),\n            key: `hour_${id}`\n        }), hh);\n        ii = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            labelValue: subLabel(prop, 'minutes', id),\n            propPath: \"sublabels.minutes\",\n            defaultValue: dateTimeDefaultSublabels.minutes,\n            for: `min_${id}`,\n            key: `min_${id}`\n        }), ii);\n        ampm = /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, prop), {\n            wrapAlways: true,\n            editable: false,\n            for: `ampm_${id}`,\n            labelValue: subLabelSingle({\n                subLabel: {\n                    value: 'AM/PM Option'\n                }\n            }, 'ampm', id),\n            hidePartLabelA11Y: true,\n            key: `ampm_${id}`\n        }), ampm);\n        const spn = /*#__PURE__*/ _jsxs(\"span\", {\n            className: \"allowTime-container\",\n            children: [\n                hh,\n                ii,\n                prop.timeFormat.value === 'AM/PM' ? ampm : null\n            ]\n        }, \"time\");\n        markup.push(spn);\n    }\n    const isExtended = prop.allowTime && prop.allowTime.value && prop.allowTime.value === 'Yes' || prop.allowTime && prop.allowTime.value && prop.liteMode.value === 'No';\n    let classNameDateTime = null;\n    if (isExtended) {\n        classNameDateTime = 'extended';\n        if (prop.liteMode && prop.liteMode.value === 'No') {\n            classNameDateTime += ' notLiteMode';\n        }\n    }\n    return /*#__PURE__*/ _jsx(\"div\", {\n        \"data-wrapper-react\": \"true\",\n        className: classNameDateTime,\n        children: markup\n    });\n};\nDatetime.getScript = (prop)=>{\n    const id = prop.id.value;\n    let limitDate = false;\n    let result = '\\n';\n    if (prop.limitDate && prop.limitDate.value && prop.limitDate.value !== false) {\n        limitDate = JSON.stringify(prop.limitDate.value).split('\"true\"').join(true);\n        limitDate = limitDate.split('\"false\"').join(false);\n    }\n    if (!(prop.readonly && prop.readonly.value === 'Yes')) {\n        const startOnMonday = prop.startWeekOn && prop.startWeekOn.value === 'Monday';\n        if (prop.months && prop.months.value) {\n            const other = {\n                today: prop.today ? prop.today.value : 'Today'\n            };\n            result = `${result} JotForm.calendarMonths = ${JSON.stringify(prop.months.value)};\\n`;\n            result = `${result} if (!JotForm.calenderViewMonths) JotForm.calenderViewMonths = {};  JotForm.calenderViewMonths[${id}] = ${JSON.stringify(prop.months.value)};\\n`;\n            result = `${result} if (!JotForm.calenderViewDays) JotForm.calenderViewDays = {};  JotForm.calenderViewDays[${id}] = ${JSON.stringify(prop.days.value)};\\n`;\n            result = `${result} JotForm.calendarDays = ${JSON.stringify(prop.days.value)};\\n`;\n            result = `${result} JotForm.calendarOther = ${JSON.stringify(other)};\\n`;\n        }\n        result = `${result} var languageOptions = document.querySelectorAll('#langList li'); \\n`;\n        result = `${result} for(var langIndex = 0; langIndex < languageOptions.length; langIndex++) { \\n`;\n        result = `${result}   languageOptions[langIndex].on('click', function(e) { setTimeout(function(){ JotForm.setCalendar(\"${id}\", ${startOnMonday}, ${JSONUnicodeEncode(limitDate)}); }, 0); });\\n`;\n        result = `${result} } \\n`;\n        result = `${result} JotForm.onTranslationsFetch(function() { JotForm.setCalendar(\"${id}\", ${startOnMonday}, ${JSONUnicodeEncode(limitDate)}); });\\n`;\n    }\n    if (prop.defaultDate.value === 'current') {\n        result = `${result} JotForm.formatDate({date:(new Date()), dateField:$(\"id_\"+${id})});\\n`;\n    }\n    const fixAmPm = prop.allowTime && prop.allowTime.value === 'Yes' && prop.timeFormat && prop.timeFormat.value === 'AM/PM' && prop.defaultTime && prop.defaultTime.value === 'none';\n    if (prop.defaultTime.value === 'current' || fixAmPm) {\n        if (prop.themeVersion === 'v2') {\n            result = `${result} JotForm.displayLocalTime(\"input_${id}_hourSelect\", \"input_${id}_minuteSelect\",\"input_${id}_ampm\", \"input_${id}_timeInput\", ${fixAmPm});\\n`;\n        } else {\n            result = `${result} JotForm.displayLocalTime(\"hour_${id}\", \"min_${id}\", \"ampm_${id}\", null, ${fixAmPm});\\n`;\n        }\n    }\n    if (typeof prop.defaultDate.value === 'string' && prop.defaultDate.value.indexOf('custom') > -1 && prop.defaultDate.value.indexOf('today') > -1) {\n        const dynamicDate = prop.defaultDate.value.replace(/custom_/gi, '');\n        result = `${result}  JotForm.displayDynamicDate(${id},\"${dynamicDate}\");\\n`;\n    }\n    return result;\n};\nexport default Datetime;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { htmlDecode } from '@jotforminc/form-common';\nimport SubLabel from '../helpers/SubLabel';\nimport { addValidation, applyLocale, classNames, escapeValue, sanitize, specialOptions, strip, subLabelSingle, replaceSelectedValues } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nclass Dropdown extends Component {\n    shouldComponentUpdate(nextProps) {\n        const props = [\n            'visibleOptions',\n            'width',\n            'options',\n            'subLabel',\n            'special'\n        ];\n        for(let i = 0; i < props.length; i++){\n            const prop = props[i];\n            if (this.props[prop] && nextProps[prop] && JSON.stringify(this.props[prop].value) !== JSON.stringify(nextProps[prop].value)) {\n                return true;\n            }\n        }\n        if (nextProps.selected.value !== this.props.selected.value || nextProps.manageDropdownOptions !== this.props.manageDropdownOptions) {\n            return true;\n        }\n        return false;\n    }\n    render() {\n        const prop = this.props;\n        const qid = prop.qid.value;\n        const qname = prop.qname.value;\n        const subLabelObj = subLabelSingle(prop, qid);\n        const qText = prop.text && prop.text.value;\n        let emptyText = '';\n        let opts = [];\n        let cl = classNames.dropdown;\n        if (prop.size.value > 1) {\n            cl = classNames.list;\n        }\n        // configure select props //////////////////////////\n        const selectProps = {\n            className: addValidation(cl, prop),\n            id: qid,\n            name: qname\n        };\n        if (prop.width && (prop.width.value !== 'auto' || !prop.width.value)) {\n            selectProps.style = {\n                width: `${parseInt(prop.width.value, 10)}px`\n            };\n        }\n        if (prop.size.value > 1) {\n            selectProps.name = `${selectProps.name}[]`;\n            selectProps.size = prop.size.value;\n            selectProps.multiple = 'multiple';\n        } else {\n            // new height/multiple values\n            if (prop.multipleSelections.value === 'Yes') {\n                selectProps.name = `${selectProps.name}[]`;\n                selectProps.multiple = 'multiple';\n            }\n            if (prop.visibleOptions.value > 1) {\n                if (this.props.themeVersion === 'v2') {\n                    selectProps.size = (Number(prop.visibleOptions.value) + 1).toString();\n                } else {\n                    selectProps.size = prop.visibleOptions.value;\n                }\n            }\n        }\n        // //////////////////////////////////////////////////////\n        if (prop.options && ({}).hasOwnProperty.call(prop.options, 'value') && prop.options.value !== null && typeof prop.options.value === 'string') {\n            opts = prop.options.value.split('|');\n        } else {\n            opts = '';\n            prop.options.value = '';\n        }\n        // Allow \"empty option\" text, i.e., \"Please select\"\n        if (prop.emptyText) {\n            emptyText = htmlDecode(sanitize(prop.emptyText.value));\n        }\n        let calcValues = prop.calcValues && prop.calcValues.value && prop.calcValues.value.length > 0 && prop.calcValues.value !== 'Click to edit' ? prop.calcValues.value.split('|') : false;\n        if (prop.useCalculations && prop.useCalculations.value && prop.useCalculations.value === 'No') {\n            calcValues = false;\n        }\n        if (this.props.themeVersion === 'v2' && prop.emptyText.value === '' && prop.visibleOptions.value < 2) {\n            emptyText = 'Please Select'.locale();\n        }\n        let calcOptionProps = {};\n        let hasNonLocale = false;\n        if (typeof prop.special !== 'undefined' && prop.special.value !== 'None') {\n            var _specialOptions_prop_special_value, _specialOptions_prop_special_value1;\n            prop.options.disabled = true;\n            opts = safeJSONParse(JSON.stringify((_specialOptions_prop_special_value = specialOptions[prop.special.value]) === null || _specialOptions_prop_special_value === void 0 ? void 0 : _specialOptions_prop_special_value.value), []);\n            opts = opts.map(applyLocale);\n            hasNonLocale = !!((_specialOptions_prop_special_value1 = specialOptions[prop.special.value]) === null || _specialOptions_prop_special_value1 === void 0 ? void 0 : _specialOptions_prop_special_value1.nonLocale);\n        } else {\n            prop.options.disabled = false;\n            calcOptionProps = {\n                'data-calcvalue': calcValues && calcValues[0] ? calcValues[0] : null\n            };\n            if (calcValues && calcValues.length > 0) {\n                calcValues.splice(0, 1);\n            }\n        }\n        const calcOption = /*#__PURE__*/ _jsx(\"option\", _object_spread_props(_object_spread({}, calcOptionProps), {\n            value: \"\",\n            children: emptyText\n        }));\n        let strippedSelectedVal = strip(prop.selected.value);\n        strippedSelectedVal = typeof strippedSelectedVal === 'string' ? strippedSelectedVal : strippedSelectedVal.toString();\n        const strippedSelectedValue = strippedSelectedVal.replace(/&amp;/g, '&');\n        const options = [];\n        let currentGroup = null;\n        if (this.props.themeVersion === 'v2' || !this.props.passive) {\n            for(let i = 0; i < opts.length; i += 1){\n                const strippedOpt = replaceSelectedValues(strip(opts[i]));\n                const selectedOptions = replaceSelectedValues(strippedSelectedVal).split('|').filter((p)=>p);\n                let selected = selectedOptions.indexOf(strippedOpt) !== -1 ? 'selected' : null;\n                if (!selected && hasNonLocale) {\n                    const translatedSelectedOptions = selectedOptions.map((sOption)=>replaceSelectedValues(strip(sOption.locale())));\n                    selected = translatedSelectedOptions.indexOf(strippedOpt) !== -1 ? 'selected' : null;\n                }\n                const calcValue = calcValues && calcValues[i] ? calcValues[i] : null;\n                const optionValue = opts[i];\n                const optionGroup = optionValue.match(/^\\[\\[(.*?)]]$/);\n                if (optionGroup) {\n                    const groupOption = {\n                        type: 'group',\n                        groupProps: {\n                            label: escapeValue(optionGroup[1])\n                        },\n                        children: []\n                    };\n                    options.push(groupOption);\n                    currentGroup = groupOption;\n                } else {\n                    const optProps = {\n                        selected,\n                        'data-calcvalue': calcValue,\n                        value: htmlDecode(sanitize(optionValue)),\n                        key: i\n                    };\n                    const option = /*#__PURE__*/ _jsx(\"option\", _object_spread_props(_object_spread({}, optProps), {\n                        children: htmlDecode(sanitize(optionValue))\n                    }));\n                    if (currentGroup) {\n                        currentGroup.children.push(option);\n                    } else {\n                        options.push({\n                            type: 'option',\n                            option\n                        });\n                    }\n                }\n            }\n        } else if (this.props.passive && strippedSelectedValue && this.props.themeVersion !== 'v2') {\n            strippedSelectedValue.split('|').forEach((optionText)=>{\n                const option = /*#__PURE__*/ _jsx(\"option\", {\n                    selected: \"selected\",\n                    children: optionText\n                });\n                options.push({\n                    type: 'option',\n                    option\n                });\n            });\n        }\n        const optionElements = options.map((optionDef)=>{\n            if (optionDef.type === 'group') {\n                return /*#__PURE__*/ _jsx(\"optgroup\", _object_spread_props(_object_spread({}, optionDef.groupProps), {\n                    children: optionDef.children\n                }));\n            }\n            return optionDef.option;\n        });\n        let optionsButton = null;\n        if (this.props.manageDropdownOptions) {\n            optionsButton = /*#__PURE__*/ React.createElement(this.props.manageDropdownOptions, {\n                options: this.props.options.value,\n                qid: this.props.id.value,\n                update: this.props.updateMethod,\n                ref: (ref)=>{\n                    this.optionsEditComponent = ref;\n                }\n            });\n            optionsButton = /*#__PURE__*/ _jsx(\"div\", {\n                className: \"edit-options-wrapper\",\n                children: optionsButton\n            });\n        }\n        let select = /*#__PURE__*/ _jsxs(\"select\", _object_spread_props(_object_spread({\n            readOnly: prop.inlineEditClass\n        }, selectProps), {\n            \"data-component\": \"dropdown\",\n            required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n            \"aria-label\": qText,\n            children: [\n                prop.multipleSelections.value !== 'Yes' && calcOption,\n                optionElements\n            ]\n        }));\n        if (this.props.passive) {\n            select = /*#__PURE__*/ _jsx(\"div\", {\n                className: \"form-dropdown-wrapper\",\n                onMouseDown: (e)=>{\n                    e.preventDefault();\n                    if (this.optionsEditComponent) {\n                        this.optionsEditComponent.toggleEditableState();\n                    }\n                },\n                children: select\n            });\n        }\n        return /*#__PURE__*/ _jsxs(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            for: qid,\n            propPath: 'subLabel',\n            labelValue: subLabelObj,\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: [\n                select,\n                optionsButton\n            ]\n        }));\n    }\n}\nDropdown.getScript = (prop)=>{\n    if (prop.shuffle && prop.shuffle.value === 'Yes') {\n        return `      JotForm.shuffleOptions(\"${prop.id.value}\");\\n`;\n    }\n    return '';\n};\nexport default Dropdown;\nDropdown.propTypes = {\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    id: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    selected: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    options: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    manageDropdownOptions: PropTypes.func,\n    updateMethod: PropTypes.func,\n    passive: PropTypes.bool,\n    required: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    themeVersion: PropTypes.string\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy } from '@jotforminc/form-common';\nimport { addValidation, classNames, accessibleHiddenStyle, subLabelSingle } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport BaseInput from '../helpers/BaseInput';\nimport SubLabel from '../helpers/SubLabel';\nclass Email extends Component {\n    renderConfirmation() {\n        const additionalValidateClasses = this.props.disallowFree && this.props.disallowFree.value === 'Yes' ? 'Email_Confirm, disallowFree' : 'Email_Confirm';\n        const className = addValidation(classNames.textbox, this.props, additionalValidateClasses);\n        const placeholder = this.props.confirmationHint && this.props.confirmationHint.value ? this.props.confirmationHint.value.replace(/'/g, '') : null;\n        const size = this.props.size && this.props.size.value ? this.props.size : null;\n        const maxsize = this.props.maxsize && this.props.maxsize.value && this.props.maxsize.value > 0 ? this.props.maxsize : null;\n        const style = this.props.themeVersion === 'v2' ? {\n            width: `${this.props.size.value}px`\n        } : {};\n        return /*#__PURE__*/ _jsx(BaseInput, {\n            type: \"email\",\n            additionalClass: className,\n            qid: `${this.props.qid.value}_confirm`,\n            qname: this.props.qname.value,\n            style: Object.assign({\n                marginTop: '8px'\n            }, style),\n            size: size,\n            maxsize: maxsize,\n            hint: {\n                value: placeholder\n            },\n            dataComponent: \"emailConfirmation\",\n            autocomplete: {\n                value: 'off'\n            }\n        });\n    }\n    render() {\n        var _this_props_confirmation;\n        const { props } = this;\n        const additionalClass = this.props.disallowFree && this.props.disallowFree.value === 'Yes' ? 'disallowFree' : '';\n        const className = addValidation(classNames.textbox, this.props, additionalClass);\n        const { value: qidValue } = props.qid;\n        const subLabelObj = subLabelSingle(this.props, qidValue);\n        const style = this.props.themeVersion === 'v2' ? {\n            width: `${this.props.size.value}px`\n        } : {};\n        return /*#__PURE__*/ _jsxs(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: subLabelObj,\n            for: this.props.qid.value,\n            propPath: 'subLabel',\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: [\n                /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                    qid: this.props.qid.value,\n                    qname: this.props.qname.value,\n                    additionalClass: className,\n                    type: \"email\",\n                    style: style,\n                    dataComponent: \"email\",\n                    ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                    autocomplete: {\n                        value: `section-${this.props.qid.value} email`\n                    }\n                })),\n                ((_this_props_confirmation = this.props.confirmation) === null || _this_props_confirmation === void 0 ? void 0 : _this_props_confirmation.value) === 'Yes' ? /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"br\", {}),\n                        /*#__PURE__*/ _jsx(\"label\", {\n                            className: \"form-sub-label\",\n                            style: accessibleHiddenStyle(),\n                            htmlFor: `${this.props.qid.value}_confirm`,\n                            dangerouslySetInnerHTML: {\n                                __html: 'Confirmation Email'\n                            }\n                        }),\n                        this.renderConfirmation()\n                    ]\n                }) : null\n            ]\n        }));\n    }\n}\nexport { Email as default };\nEmail.getScript = (props)=>{\n    let script = '';\n    if (props.confirmation && props.confirmation.value === 'Yes' && props.confirmationHint && props.confirmationHint.value) {\n        script += `     $('${props.qid.value}_confirm').hint('${props.confirmationHint.value.replace(/&#039;/g, \"\\'\").replace(\"\\'\", \"\\\\'\")}');\\n`;\n        script += `     $$('#${props.qid.value}_confirm')[0].setAttribute('onPaste', 'return false;');\\n`;\n    }\n    return script;\n};\nEmail.getState = ()=>{\n    return {};\n};\nEmail.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    disallowFree: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    size: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    confirmation: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    maxsize: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    confirmationHint: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    themeVersion: PropTypes.string\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { addValidation } from '../helpers/Utils';\nimport SubLabel from '../helpers/SubLabel';\nimport QuestionProps from '../helpers/QuestionProps';\nclass FilepickerIO extends Component {\n    render() {\n        // const isMultiple = this.props.allowMultiple && this.props.allowMultiple.value === 'Yes';\n        const styleName = this.props.buttonStyle.value.toLowerCase();\n        const className = styleName !== 'none' ? `form-submit-button-${styleName}` : '';\n        // const hasSubLabel = this.props.subLabel && this.props.subLabel.value;\n        return /*#__PURE__*/ _jsxs(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: this.props.subLabel && this.props.subLabel.value !== '' ? this.props.subLabel.value : null,\n            for: this.props.qid.value,\n            propPath: 'subLabel',\n            defaultValue: QuestionProps[this.props.type.value].subLabel.value,\n            children: [\n                /*#__PURE__*/ _jsx(\"div\", {\n                    id: `button_container_${this.props.qid.value}`,\n                    children: /*#__PURE__*/ _jsx(\"button\", {\n                        id: `filePicker_${this.props.qid.value}`,\n                        type: \"button\",\n                        className: className,\n                        \"data-component\": \"filepickerIO\",\n                        children: this.props.buttonText.value\n                    })\n                }),\n                !this.props.inlineEditClass ? /*#__PURE__*/ _jsxs(\"div\", {\n                    \"data-react-wrapper\": \"true\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"ul\", {\n                            id: `filePickerList_${this.props.qid.value}`,\n                            className: \"qq-upload-list\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"hidden\",\n                            name: this.props.qname.value,\n                            id: this.props.qid.value,\n                            className: addValidation('form-hidden', this.props)\n                        })\n                    ]\n                }) : null\n            ]\n        }));\n    }\n}\nexport { FilepickerIO as default };\nFilepickerIO.getState = ()=>{\n    return this.props;\n};\nFilepickerIO.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType\n};\nFilepickerIO.getScript = (prop)=>{\n    // const state = FilepickerIO.getState(prop);\n    if (!prop.inlineEditClass) {\n        const filepickerIOOptions = {\n            // title: this.getProperty('title'),\n            qid: prop.qid.value,\n            apiKey: prop.apiKey.value,\n            multiple: prop.allowMultiple && prop.allowMultiple.value === 'Yes',\n            maxsize: Number(prop.maxFileSize.value) * 1024,\n            mimetypes: prop.mimetypes.value,\n            modal: prop.fpModal.value,\n            services: prop.services.value,\n            openTo: prop.openToService.value,\n            crop: 'cropImage' in prop && prop.cropImage.value === 'enabled' ? {\n                ratio: prop.cropImageRatio.value\n            } : false,\n            compress: 'compressImage' in prop && prop.compressImage.value === 'enabled' ? {\n                quality: prop.compressImageLvl.value\n            } : false,\n            resize: 'imageDim' in prop && 'imageMax' in prop && 'imageMin' in prop && (prop.imageDim.value || prop.imageMax.value || prop.imageMin.value) ? {\n                imageDim: prop.imageDim.value,\n                imageMax: prop.imageMax.value,\n                imageMin: prop.imageMin.value\n            } : false\n        };\n        if (prop.allowUploadToS3 && prop.allowUploadToS3.value === 'enabled') {\n            filepickerIOOptions.allowUploadToS3 = prop.allowUploadToS3.value;\n            filepickerIOOptions.s3UploadPath = prop.s3UploadingPath.value;\n            filepickerIOOptions.s3UploadAccess = prop.s3UploadAccess.value;\n        }\n        return `'      JotForm.setFilePickerIOUpload(' ${JSON.stringify(filepickerIOOptions)} ');\\n'`;\n    }\n};\nFilepickerIO.propTypes = {\n    allowMultiple: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    buttonStyle: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    buttonText: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy, subLabel } from '@jotforminc/form-common';\nimport { addValidation, classNames } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport BaseInput from '../helpers/BaseInput';\nimport SubLabel from '../helpers/SubLabel';\nclass Fullname extends Component {\n    renderPrefix(hint) {\n        const { props } = this;\n        if (this.props.prefix && this.props.prefix.value && this.props.prefix.value === 'Yes') {\n            const { value: idValue } = props.id;\n            const subLabelObj = subLabel(props, 'prefix', idValue);\n            if (this.props.prefixChoices && this.props.prefixChoices.value.replace(/[\\s|]/g, '').length > 0 && this.props.prefixChoices.value !== 'Click to edit') {\n                const prefixDropdown = this.props.prefixChoices.value.split('|');\n                const ctx = addValidation(classNames.dropdown, this.props);\n                const p = {\n                    disabled: this.props.readonly.value === 'Yes' ? 1 : 0\n                };\n                const { value: qnameValue } = props.qname;\n                return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    labelValue: subLabelObj,\n                    wrapAlways: true,\n                    hidePartLabel: subLabelObj.text === '',\n                    for: `prefix_${idValue}`,\n                    propPath: 'sublabels.prefix',\n                    defaultValue: QuestionProps[this.props.type.value].sublabels.value.prefix,\n                    dataComponent: \"prefix\",\n                    children: /*#__PURE__*/ _jsx(\"select\", _object_spread_props(_object_spread({}, p), {\n                        \"data-component\": \"prefix\",\n                        name: `${qnameValue}[prefix]`,\n                        id: `prefix_${idValue}`,\n                        className: `dropdown-match-height ${ctx}`,\n                        \"aria-labelledby\": ariaLabelledBy(this.props, subLabelObj),\n                        autoComplete: `section-${this.props.qid.value} honorific-prefix`,\n                        children: prefixDropdown.map((key, i)=>/*#__PURE__*/ _jsx(\"option\", {\n                                value: prefixDropdown[i].trim(),\n                                children: prefixDropdown[i]\n                            }, prefixDropdown[i]))\n                    }))\n                }));\n            }\n            return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                propPath: 'sublabels.prefix',\n                wrapAlways: true,\n                hidePartLabel: subLabelObj.text === '',\n                labelValue: subLabelObj,\n                for: `prefix_${idValue}`,\n                dataComponent: \"prefix\",\n                children: /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                    qid: `prefix_${idValue}`,\n                    type: \"text\",\n                    qname: `${this.props.qname.value}[prefix]`,\n                    size: {\n                        value: '4'\n                    },\n                    additionalClass: classNames.textbox,\n                    hint: {\n                        value: hint\n                    },\n                    dataComponent: \"prefix\",\n                    ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                    autocomplete: {\n                        value: `section-${this.props.qid.value} honorific-prefix`\n                    }\n                }))\n            }));\n        }\n        return null;\n    }\n    renderFirst(hint) {\n        const cx = addValidation(classNames.textbox, this.props);\n        const { value: idValue } = this.props.id;\n        const subLabelObj = subLabel(this.props, 'first', idValue);\n        return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: subLabelObj,\n            hidePartLabel: subLabelObj.text === '',\n            wrapAlways: true,\n            for: `first_${idValue}`,\n            propPath: 'sublabels.first',\n            defaultValue: QuestionProps[this.props.type.value].sublabels.value.first,\n            dataComponent: \"first\",\n            children: /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                additionalClass: cx,\n                type: \"text\",\n                qname: `${this.props.qname.value}[first]`,\n                qid: `first_${idValue}`,\n                size: {\n                    value: '10'\n                },\n                hint: {\n                    value: hint\n                },\n                dataComponent: \"first\",\n                ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                autocomplete: {\n                    value: `section-${this.props.qid.value} given-name`\n                }\n            }))\n        }));\n    }\n    renderMiddle(hint) {\n        if (this.props.middle.value === 'Yes') {\n            const { value: idValue } = this.props.id;\n            const subLabelObj = subLabel(this.props, 'middle', idValue);\n            return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                labelValue: subLabelObj,\n                hidePartLabel: subLabelObj.text === '',\n                wrapAlways: true,\n                for: `middle_${idValue}`,\n                propPath: 'sublabels.middle',\n                defaultValue: QuestionProps[this.props.type.value].sublabels.value.middle,\n                dataComponent: \"middle\",\n                children: /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                    additionalClass: classNames.textbox,\n                    type: \"text\",\n                    qname: `${this.props.qname.value}[middle]`,\n                    qid: `middle_${idValue}`,\n                    size: {\n                        value: '10'\n                    },\n                    hint: {\n                        value: hint\n                    },\n                    dataComponent: \"middle\",\n                    ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                    autocomplete: {\n                        value: `section-${this.props.qid.value} additional-name`\n                    }\n                }))\n            }));\n        }\n        return null;\n    }\n    renderLast(hint) {\n        const cx = addValidation(classNames.textbox, this.props);\n        const { value: idValue } = this.props.id;\n        const subLabelObj = subLabel(this.props, 'last', idValue);\n        return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n            labelValue: subLabelObj,\n            hidePartLabel: subLabelObj.text === '',\n            wrapAlways: true,\n            for: `last_${idValue}`,\n            propPath: 'sublabels.last',\n            defaultValue: QuestionProps[this.props.type.value].sublabels.value.last,\n            dataComponent: \"last\",\n            children: /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                additionalClass: cx,\n                type: \"text\",\n                qname: `${this.props.qname.value}[last]`,\n                qid: `last_${idValue}`,\n                size: {\n                    value: '15'\n                },\n                hint: {\n                    value: hint\n                },\n                dataComponent: \"last\",\n                ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                autocomplete: {\n                    value: `section-${this.props.qid.value} family-name`\n                }\n            }))\n        }));\n    }\n    renderSuffix(hint) {\n        if (this.props.suffix.value === 'Yes') {\n            const { value: idValue } = this.props.id;\n            const subLabelObj = subLabel(this.props, 'suffix', idValue);\n            return /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                labelValue: subLabelObj,\n                hidePartLabel: subLabelObj.text === '',\n                wrapAlways: true,\n                for: `suffix_${idValue}`,\n                propPath: 'sublabels.suffix',\n                defaultValue: QuestionProps[this.props.type.value].sublabels.value.suffix,\n                dataComponent: \"suffix\",\n                children: /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n                    additionalClass: classNames.textbox,\n                    type: \"text\",\n                    qname: `${this.props.qname.value}[suffix]`,\n                    qid: `suffix_${idValue}`,\n                    size: {\n                        value: '4'\n                    },\n                    hint: {\n                        value: hint\n                    },\n                    dataComponent: \"suffix\",\n                    ariaLabelledBy: ariaLabelledBy(this.props, subLabelObj),\n                    autocomplete: {\n                        value: `section-${this.props.qid.value} honorific-suffix`\n                    }\n                }))\n            }));\n        }\n        return null;\n    }\n    render() {\n        const hintList = this.props.compoundHint && this.props.compoundHint.value && this.props.compoundHint.value.length > 0 ? this.props.compoundHint.value.split(',') : [];\n        let hintIndex = 0;\n        const partPrefix = this.renderPrefix(hintIndex < hintList.length ? hintList[hintIndex] : null);\n        const isDropdown = this.props.prefixChoices && this.props.prefixChoices.value.replace(/[\\s|]/g, '').length > 0 && this.props.prefixChoices.value !== 'Click to edit';\n        if (partPrefix && !isDropdown) hintIndex += 1;\n        const partFirst = this.renderFirst(hintIndex < hintList.length ? hintList[hintIndex] : null);\n        if (partFirst) hintIndex += 1;\n        const partMiddle = this.renderMiddle(hintIndex < hintList.length ? hintList[hintIndex] : null);\n        if (partMiddle) hintIndex += 1;\n        const partLast = this.renderLast(hintIndex < hintList.length ? hintList[hintIndex] : null);\n        if (partLast) hintIndex += 1;\n        const partSuffix = this.renderSuffix(hintIndex < hintList.length ? hintList[hintIndex] : null);\n        const isExtended = [\n            'middle',\n            'suffix',\n            'prefix'\n        ].reduce((acc, curr)=>{\n            if (this.props[curr] && this.props[curr].value && this.props[curr].value === 'Yes') {\n                return true;\n            }\n            return acc;\n        }, false);\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            className: isExtended ? 'extended' : null,\n            children: [\n                partPrefix,\n                partFirst,\n                partMiddle,\n                partLast,\n                partSuffix\n            ]\n        });\n    }\n}\nFullname.propTypes = {\n    id: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    compoundHint: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    prefix: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    suffix: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    prefixChoices: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    name: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    middle: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\nFullname.getScript = (props)=>{\n    if (props.prefix.value === 'Yes' && props.prefixChoices.value.length > 0) {\n        return `JotForm.setFullNameAutoFocus(${props.id.value})\\n`;\n    }\n};\nexport default Fullname;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { htmlDecode } from '@jotforminc/form-common';\nimport QuestionProps from '../helpers/QuestionProps';\nimport { sanitize } from '../helpers/Utils';\nclass Head extends Component {\n    get headerSize() {\n        return this.props.headerType && this.props.headerType.value ? this.props.headerType.value : 'Default';\n    }\n    get htmlDecodedAndSanitizedText() {\n        return htmlDecode(sanitize(this.props.text.value)) || '';\n    }\n    get htmlDecodedAndSanitizedSubHeader() {\n        return htmlDecode(sanitize(this.props.subHeader.value)) || '';\n    }\n    createHeaderTag() {\n        const headerProps = {\n            id: `header_${this.props.id.value}`,\n            className: 'form-header',\n            'data-component': 'header',\n            'aria-hidden': !this.htmlDecodedAndSanitizedText ? 'true' : undefined\n        };\n        let inline;\n        if (this.props.inlineEditClass) {\n            inline = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: this.props.id.value,\n                propPath: 'text',\n                text: this.htmlDecodedAndSanitizedText,\n                defaultValue: QuestionProps[this.props.type.value].text.value,\n                placeholder: 'Type a header',\n                focusToElement: this.props.inlineEditFocusToElement ? this.props.inlineEditFocusToElement : null,\n                isFirstHeader: this.props.inlineEditIsFirstHeader || false,\n                pageTitle: this.props.inlineEditPageTitle || '',\n                isMobile: this.props.isMobile || false\n            });\n        }\n        if (this.headerSize === 'Large') {\n            return /*#__PURE__*/ _jsx(\"h1\", _object_spread_props(_object_spread({}, headerProps), {\n                children: inline || this.htmlDecodedAndSanitizedText\n            }));\n        } else if (this.headerSize === 'Small') {\n            return /*#__PURE__*/ _jsx(\"h3\", _object_spread_props(_object_spread({}, headerProps), {\n                children: inline || this.htmlDecodedAndSanitizedText\n            }));\n        }\n        return /*#__PURE__*/ _jsx(\"h2\", _object_spread_props(_object_spread({}, headerProps), {\n            children: inline || this.htmlDecodedAndSanitizedText\n        }));\n    }\n    createSubHeader() {\n        let inline;\n        if (this.props.inlineEditClass) {\n            inline = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                id: this.props.id.value,\n                propPath: 'subHeader',\n                text: this.htmlDecodedAndSanitizedSubHeader,\n                defaultValue: QuestionProps[this.props.type.value].subHeader.value,\n                placeholder: 'Type a subheader',\n                isMobile: this.props.isMobile || false\n            });\n        }\n        if (this.props.inlineEditClass || this.props.subHeader && this.props.subHeader.value && this.props.subHeader.value !== 'Click to edit sub heading...') {\n            return /*#__PURE__*/ _jsx(\"div\", {\n                id: `subHeader_${this.props.id.value}`,\n                className: \"form-subHeader\",\n                children: inline || this.htmlDecodedAndSanitizedSubHeader\n            });\n        }\n        return null;\n    }\n    createHeaderImage(headerImage, imgAlign) {\n        // TODO: fix it when isSecure prop is ready.\n        const isSecure = true;\n        const imgAlt = this.props.alt && this.props.alt.value || this.props.text && this.props.text.value;\n        const className = `header-logo-${imgAlign.toLowerCase()}`;\n        const headerLogoDisplay = isSecure ? 'table-cell' : 'none';\n        if (headerImage.value === 'images/security_certificate_seal_positivessl.gif' || headerImage.value === 'images/security_certificate_seal_globalsign.gif') {\n            return /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"header-logo\",\n                style: {\n                    display: headerLogoDisplay\n                },\n                children: [\n                    /*#__PURE__*/ _jsx(\"img\", {\n                        id: \"positivessl\",\n                        style: {\n                            display: 'none'\n                        },\n                        alt: imgAlt,\n                        className: `form-image ${className}`,\n                        border: \"0\",\n                        src: `https://www.jotform.com/${headerImage.value}`,\n                        height: this.props.height.value,\n                        width: this.props.width.value\n                    }),\n                    /*#__PURE__*/ _jsx(\"table\", {\n                        id: \"globalsign\",\n                        style: {\n                            display: 'none'\n                        },\n                        width: \"130\",\n                        border: \"0\",\n                        cellSpacing: \"0\",\n                        cellPadding: \"0\",\n                        title: \"CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information.\",\n                        children: /*#__PURE__*/ _jsx(\"tr\", {\n                            children: /*#__PURE__*/ _jsxs(\"td\", {\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"span\", {\n                                        id: \"ss_img_wrapper_100-50_image_en\",\n                                        children: /*#__PURE__*/ _jsx(\"a\", {\n                                            href: \"http://www.globalsign.com/\",\n                                            target: \"_blank\",\n                                            title: \"SSL\",\n                                            children: /*#__PURE__*/ _jsx(\"img\", {\n                                                alt: \"SSL\",\n                                                border: \"0\",\n                                                id: \"ss_img\",\n                                                src: \"//seal.globalsign.com/SiteSeal/images/gs_noscript_100-50_en.gif\"\n                                            })\n                                        })\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"script\", {\n                                        type: \"text/javascript\",\n                                        src: \"https://www.jotform.com/js/globalsign.js?v=1.0\"\n                                    }),\n                                    /*#__PURE__*/ _jsx(\"br\", {}),\n                                    /*#__PURE__*/ _jsx(\"a\", {\n                                        href: \"http://www.globalsign.com/\",\n                                        target: \"_blank\",\n                                        style: {\n                                            color: '#000000',\n                                            textDecoration: 'none',\n                                            font: 'bold 8px arial',\n                                            margin: '0px',\n                                            padding: '0px'\n                                        },\n                                        children: \"GlobalSign SSL Certificates\"\n                                    })\n                                ]\n                            })\n                        })\n                    })\n                ]\n            });\n        }\n        return /*#__PURE__*/ _jsx(\"div\", {\n            className: \"header-logo\",\n            children: headerImage.value !== 'Default' && /*#__PURE__*/ _jsx(\"img\", {\n                src: headerImage.value,\n                alt: imgAlt,\n                width: this.props.width.value,\n                className: className,\n                style: this.props.inlineEditClass ? {\n                    pointerEvents: 'none'\n                } : null\n            })\n        });\n    }\n    createBaseHeader(headerImage) {\n        const textAlignClasses = {\n            Left: 'httal',\n            Center: 'httac',\n            Right: 'httar',\n            Top: 'htvat',\n            Middle: 'htvam',\n            Bottom: 'htvab'\n        };\n        const textAlignVal = this.props.textAlign && this.props.textAlign.value && textAlignClasses[this.props.textAlign.value] !== undefined ? textAlignClasses[this.props.textAlign.value] : '';\n        const vta = this.props.verticalTextAlign;\n        const verticalTextAlignVal = vta && vta.value && textAlignClasses[vta.value] !== undefined ? textAlignClasses[vta.value] : '';\n        const hasImageClass = headerImage ? 'hasImage' : '';\n        const imgAlign = this.props.imageAlign ? this.props.imageAlign.value : 'Left';\n        return /*#__PURE__*/ _jsxs(\"div\", _object_spread_props(_object_spread({\n            className: `form-header-group ${hasImageClass} header-${this.headerSize.toLowerCase()}`\n        }, headerImage ? {\n            'data-imagealign': imgAlign\n        } : {}), {\n            children: [\n                headerImage && imgAlign !== 'Right' ? this.createHeaderImage(headerImage, imgAlign) : null,\n                /*#__PURE__*/ _jsxs(\"div\", {\n                    className: `header-text ${textAlignVal} ${verticalTextAlignVal}`,\n                    children: [\n                        this.createHeaderTag(),\n                        this.createSubHeader()\n                    ]\n                }),\n                headerImage && imgAlign === 'Right' ? this.createHeaderImage(headerImage, imgAlign) : null\n            ]\n        }));\n    }\n    render() {\n        let headerImage = false;\n        if (this.props.headerImage && this.props.headerImage.value) {\n            headerImage = this.props.headerImage;\n        } else if (this.props.src && this.props.src.value) {\n            headerImage = this.props.src;\n        }\n        if (headerImage) {\n            return /*#__PURE__*/ _jsx(\"div\", {\n                style: {\n                    display: 'table',\n                    width: '100%'\n                },\n                children: this.createBaseHeader(headerImage)\n            });\n        }\n        return this.createBaseHeader();\n    }\n}\nexport { Head as default };\nHead.getState = (props)=>{\n    let headerImage = false;\n    if (props.headerImage && props.headerImage.value) {\n        headerImage = props.headerImage;\n    } else if (props.src && props.src.value) {\n        headerImage = props.src;\n    }\n    return headerImage;\n};\nHead.getScript = (props)=>{\n    const headerImage = Head.getState(props);\n    if (headerImage && (headerImage.value === 'images/security_certificate_seal_positivessl.gif' || headerImage.value === 'images/security_certificate_seal_globalsign.gif')) {\n        return `if((window.location.href.indexOf(\"https://\") !== -1 ) || (window.location.href.indexOf(\"jotform\") === -1)) {\n        $(\"positivessl\").setStyle({\"display\":\"inline-block\"});\n      } else {\n        $(\"globalsign\").setStyle({\"display\":\"inline-block\"});\n      };`;\n    }\n    return '';\n};\nHead.propTypes = {\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    id: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    text: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    headerType: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    textAlign: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    verticalTextAlign: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subHeader: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    width: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    height: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    imageAlign: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    headerImage: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    src: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    alt: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType,\n    // inlineEditIsFirstQuestion: PropTypes.func,\n    inlineEditFocusToElement: PropTypes.bool,\n    inlineEditPageTitle: PropTypes.string,\n    inlineEditIsFirstHeader: PropTypes.bool,\n    isMobile: PropTypes.bool\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport BaseInput from '../helpers/BaseInput';\nclass Hidden extends Component {\n    render() {\n        const className = !this.props.inlineEditClass ? 'form-hidden' : null;\n        const inputStyle = this.props.inlineEditClass ? {\n            opacity: '0.8',\n            border: '1px dashed #ccc'\n        } : null;\n        const inputType = this.props.inlineEditClass ? 'text' : 'hidden';\n        const id = this.props.inlineEditClass ? `hidden_${this.props.id.value}` : this.props.qid.value;\n        const name = !this.props.inlineEditClass ? this.props.qname.value : null;\n        const readOnly = this.props.inlineEditClass ? 'readonly' : null;\n        return /*#__PURE__*/ _jsx(BaseInput, _object_spread_props(_object_spread({}, this.props), {\n            qid: id,\n            qname: name,\n            additionalClass: className,\n            type: inputType,\n            dataComponent: \"hidden\",\n            readOnly: readOnly,\n            defaultValue: this.props.defaultValue,\n            style: inputStyle\n        }));\n    }\n}\nexport { Hidden as default };\nHidden.propTypes = {\n    text: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    browserInfo: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultValue: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\nHidden.getState = ()=>{\n    return {};\n};\nHidden.getScript = (props)=>{\n    let script = '';\n    if (props.browserInfo && props.browserInfo.value === 'Yes') {\n        script += `      JotForm.populateBrowserInfo('${props.qid.value}');\\n`;\n    }\n    return script;\n};\nHidden.propTypes = {\n    inlineEditClass: PropTypes.elementType,\n    id: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useRef, useState, forwardRef, useEffect } from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport PropTypes from 'prop-types';\nimport { Dropdown } from '@jotforminc/uikit';\nimport { IconTextColor, IconPlusCircleFilled, IconCircleUserFilled, IconEnvelopeClosedFilled, IconCalendarFilled, IconLocationPinFilled, IconClockFilled, IconPhoneFilled, IconPenSignFilled, IconInputTextShort, IconDropdownFilled, IconSingleSelectionFilled, IconCheckSquareFilled, IconNumberSquareFilled } from '@jotforminc/svg-icons';\nimport { parseBlotId, getBlotOptions, BLOT_REGEX, getDefaultDate, getDefaultTime } from '@jotforminc/form-common';\nimport { addValidation, sanitizeFITB, specialOptions } from '../helpers/Utils';\nconst identity = (x)=>x;\nconst BLOT_COMPS = {\n    textbox: ({ questionId, questionName, required, field, blot })=>/*#__PURE__*/ _jsxs(\"span\", {\n            \"data-type\": blot.type,\n            \"data-grouptype\": blot.groupType,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blot.id,\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", _object_spread({\n                    className: addValidation(`form-textbox ${blot.inputType === 'number' ? 'form-number-input' : ''}`, {\n                        required: {\n                            value: required.value === 'Yes' ? field.required : null\n                        },\n                        validation: {\n                            value: field.validation\n                        },\n                        minsize: {\n                            value: field.minsize\n                        }\n                    }),\n                    name: `q${questionId}_${questionName}[${blot.id}]`,\n                    id: `${questionId}_${blot.id}`,\n                    type: blot.inputType || 'text',\n                    value: field.defaultValue,\n                    maxLength: field.maxsize || null,\n                    \"data-minlength\": field.minsize || null,\n                    required: required.value === 'Yes' || null\n                }, blot.inputType === 'number' && field.minValue && field.maxValue && {\n                    'data-numbermin': field.minValue,\n                    'data-numbermax': field.maxValue,\n                    'data-type': 'input-number'\n                })),\n                /*#__PURE__*/ _jsx(\"label\", {\n                    htmlFor: `${questionId}_${blot.id}`,\n                    children: blot.label\n                }),\n                required.value === 'Yes' && field.required === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                })\n            ]\n        }),\n    datebox: ({ questionId, questionName, required, field, blot, themeVersion })=>{\n        const { format = 'mmddyyyy', dateSeparator = '-', defaultDate, required: fieldRequired } = field;\n        const { id: blotId, type, label } = blot;\n        const defaultDateObj = getDefaultDate(defaultDate, format, dateSeparator);\n        return /*#__PURE__*/ _jsxs(\"span\", {\n            id: `id_${questionId}-${blotId}`,\n            \"data-type\": type,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blotId,\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    className: `${addValidation('form-textbox', {\n                        required: {\n                            value: required.value === 'Yes' ? fieldRequired : null\n                        }\n                    }, [\n                        'validateLiteDate'\n                    ])}`,\n                    id: `lite_mode_${questionId}-${blotId}`,\n                    type: \"text\",\n                    \"data-format\": format,\n                    size: \"12\",\n                    \"data-seperator\": dateSeparator,\n                    placeholder: format.match(/(.)\\1+/g).join(dateSeparator),\n                    value: defaultDateObj.litemode,\n                    required: required.value === 'Yes' || null\n                }),\n                /*#__PURE__*/ _jsx(\"img\", {\n                    className: \"newDefaultTheme-dateIcon icon-liteMode\",\n                    alt: \"Pick a Date\",\n                    \"data-qtype\": \"control_inline\",\n                    id: `input_${questionId}-${blotId}_pick`,\n                    src: \"https://cdn.jotfor.ms/images/calendar.png\",\n                    \"data-component\": \"datetime\",\n                    \"aria-hidden\": \"true\",\n                    \"data-allow-time\": \"No\",\n                    \"data-version\": themeVersion\n                }),\n                /*#__PURE__*/ _jsx(\"label\", {\n                    htmlFor: `lite_mode_${questionId}-${blotId}`,\n                    children: label\n                }),\n                required.value === 'Yes' && fieldRequired === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                }),\n                /*#__PURE__*/ _jsx(\"span\", {\n                    style: {\n                        display: 'none'\n                    },\n                    children: [\n                        'month',\n                        'day',\n                        'year'\n                    ].map((el)=>/*#__PURE__*/ _jsx(\"input\", {\n                            type: \"tel\",\n                            className: \"form-textbox\",\n                            id: `${el}_${questionId}-${blotId}`,\n                            name: `q${questionId}_${questionName}[${blotId}][${el}]`,\n                            size: el === 'year' ? '4' : '2',\n                            \"data-maxlength\": el === 'year' ? '4' : '2',\n                            maxLength: el === 'year' ? '4' : '2',\n                            value: defaultDateObj[el],\n                            autoComplete: \"off\"\n                        }))\n                })\n            ]\n        });\n    },\n    checkbox: ({ questionId, questionName, required, field, blot })=>/*#__PURE__*/ _jsxs(\"span\", {\n            id: `id_${questionId}_${blot.id}`,\n            \"data-type\": blot.type,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blot.id,\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    name: `q${questionId}_${questionName}[${blot.id}]`,\n                    id: `q${questionId}_${blot.id}`,\n                    type: blot.type,\n                    value: blot.label,\n                    className: addValidation('form-checkbox', {\n                        required: {\n                            value: required.value === 'Yes' ? field.required : null\n                        }\n                    }),\n                    \"aria-label\": blot.label\n                }),\n                /*#__PURE__*/ _jsx(\"label\", {\n                    htmlFor: `q${questionId}_${blot.id}`,\n                    children: blot.label\n                }),\n                required.value === 'Yes' && blot.last && field.required === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                })\n            ]\n        }),\n    radiobox: ({ questionId, questionName, required, field, blot })=>/*#__PURE__*/ _jsxs(\"span\", {\n            id: `id_${questionId}_${blot.id}`,\n            \"data-type\": blot.type,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blot.id,\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    name: `q${questionId}_${questionName}[${field.id}]`,\n                    id: `q${questionId}_${blot.id}`,\n                    type: \"radio\",\n                    value: blot.label,\n                    className: addValidation('form-radio', {\n                        required: {\n                            value: required.value === 'Yes' ? field.required : null\n                        }\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"label\", {\n                    htmlFor: `q${questionId}_${blot.id}`,\n                    children: blot.label\n                }),\n                required.value === 'Yes' && blot.last && field.required === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                })\n            ]\n        }),\n    signaturebox: ({ questionId, questionName, required, field: { required: fieldRequired }, blot, fieldTexts: { signatureFieldText } })=>/*#__PURE__*/ _jsxs(\"span\", {\n            id: `id_${questionId}_${blot.id}`,\n            \"data-type\": blot.type,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blot.id,\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    name: `q${questionId}_${questionName}[${blot.id}]`,\n                    id: `${questionId}_input_${blot.id}`,\n                    type: \"hidden\",\n                    className: addValidation('', {\n                        required: {\n                            value: (required === null || required === void 0 ? void 0 : required.value) === 'Yes' ? fieldRequired : null\n                        }\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"FITB-sign-button\",\n                    tabIndex: \"0\",\n                    role: \"button\",\n                    \"aria-label\": signatureFieldText,\n                    children: /*#__PURE__*/ _jsx(\"img\", {\n                        alt: \"\",\n                        className: \"FITB-sign-image\"\n                    })\n                }),\n                /*#__PURE__*/ _jsx(\"label\", {\n                    htmlFor: `${questionId}_input_${blot.id}`,\n                    children: blot.label\n                }),\n                (required === null || required === void 0 ? void 0 : required.value) === 'Yes' && fieldRequired === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                })\n            ]\n        }),\n    selectbox: ({ questionId, questionName, required, field, blot })=>{\n        const special = field.special || blot.special || 'None';\n        const options = specialOptions[special].value || blot.options;\n        return /*#__PURE__*/ _jsxs(\"span\", {\n            \"data-type\": blot.type,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blot.id,\n            children: [\n                /*#__PURE__*/ _jsxs(\"select\", {\n                    name: `q${questionId}_${questionName}[${blot.id}]`,\n                    id: `input_${questionId}_${blot.id}`,\n                    className: addValidation('form-dropdown', {\n                        required: {\n                            value: required.value === 'Yes' ? field.required : null\n                        }\n                    }),\n                    \"aria-label\": blot.default,\n                    required: required.value === 'Yes' || null,\n                    children: [\n                        /*#__PURE__*/ _jsx(\"option\", {\n                            selected: true,\n                            value: \"\",\n                            label: blot.default || blot.label,\n                            children: blot.default || blot.label\n                        }),\n                        options.map((opt)=>/*#__PURE__*/ _jsx(\"option\", {\n                                value: opt,\n                                label: opt,\n                                children: opt\n                            }))\n                    ]\n                }),\n                required.value === 'Yes' && field.required === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                })\n            ]\n        });\n    },\n    timebox: ({ questionId, questionName, required, field, blot })=>{\n        const { defaultTime, step, timeFormat } = field;\n        const defaultTimeObj = getDefaultTime({\n            defaultTime: {\n                value: defaultTime\n            },\n            step: {\n                value: step\n            },\n            timeFormat: {\n                value: timeFormat\n            }\n        });\n        return /*#__PURE__*/ _jsxs(\"span\", {\n            \"data-type\": blot.type,\n            className: \"FITB-inptCont\",\n            \"data-blot-id\": blot.id,\n            children: [\n                /*#__PURE__*/ _jsxs(\"span\", {\n                    className: \"FITB-inptCont-inner\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            className: addValidation('form-textbox', {\n                                required: {\n                                    value: required.value === 'Yes' ? field.required : null\n                                }\n                            }),\n                            name: `q${questionId}_${questionName}[${blot.id}][timeInput]`,\n                            id: `timeInput_${questionId}_${blot.id}`,\n                            type: blot.inputType || 'text',\n                            \"data-mask\": field.timeFormat === 'AM/PM' ? 'hh:MM' : 'HH:MM',\n                            placeholder: field.timeFormat === 'AM/PM' ? 'hh:MM' : 'HH:MM',\n                            value: defaultTimeObj.hour && defaultTimeObj.min ? `${defaultTimeObj.hour}:${defaultTimeObj.min}` : '',\n                            required: required.value === 'Yes' || null\n                        }),\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            className: addValidation('form-textbox', {\n                                required: {\n                                    value: required.value === 'Yes' ? field.required : null\n                                }\n                            }),\n                            name: `q${questionId}_${questionName}[${blot.id}][hourSelect]`,\n                            id: `hourSelect_${questionId}_${blot.id}`,\n                            value: defaultTimeObj.hour,\n                            type: \"hidden\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            className: addValidation('form-textbox', {\n                                required: {\n                                    value: required.value === 'Yes' ? field.required : null\n                                }\n                            }),\n                            name: `q${questionId}_${questionName}[${blot.id}][minuteSelect]`,\n                            id: `minuteSelect_${questionId}_${blot.id}`,\n                            value: defaultTimeObj.min,\n                            type: \"hidden\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"label\", {\n                            htmlFor: `timeInput_${questionId}_${blot.id}`,\n                            children: blot.label\n                        })\n                    ]\n                }),\n                field.timeFormat === 'AM/PM' && /*#__PURE__*/ _jsxs(\"select\", {\n                    className: addValidation('', {\n                        required: {\n                            value: required.value === 'Yes' ? field.required : null\n                        }\n                    }),\n                    name: `q${questionId}_${questionName}[${blot.id}][ampm]`,\n                    id: `ampm_${questionId}_${blot.id}`,\n                    \"aria-label\": \"Select Time\",\n                    children: [\n                        field.showDayPeriods !== 'pmOnly' && /*#__PURE__*/ _jsx(\"option\", {\n                            value: \"AM\",\n                            children: 'AM'.locale()\n                        }),\n                        field.showDayPeriods !== 'amOnly' && /*#__PURE__*/ _jsx(\"option\", {\n                            value: \"PM\",\n                            children: 'PM'.locale()\n                        })\n                    ]\n                }),\n                required.value === 'Yes' && field.required === 'Yes' && /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"form-required\",\n                    children: \"*\"\n                })\n            ]\n        });\n    }\n};\nconst DROPDOWN_LIST = [\n    {\n        text: 'Full Name',\n        type: 'control_fullname',\n        value: [\n            {\n                type: 'textbox',\n                label: 'First Name',\n                name: 'First Name'\n            },\n            {\n                type: 'textbox',\n                label: 'Last Name',\n                name: 'Last Name'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconCircleUserFilled, {})\n    },\n    {\n        text: 'Email',\n        type: 'control_email',\n        value: [\n            {\n                type: 'textbox',\n                label: 'Email',\n                name: 'Email',\n                inputType: 'email'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconEnvelopeClosedFilled, {}),\n        fieldProps: {\n            validation: 'Email'\n        }\n    },\n    {\n        text: 'Date',\n        type: 'control_datetime',\n        value: [\n            {\n                type: 'datebox',\n                label: 'Date',\n                name: 'Date'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconCalendarFilled, {}),\n        fieldProps: {\n            format: 'mmddyyyy',\n            dateSeparator: '-'\n        }\n    },\n    {\n        text: 'Address',\n        type: 'control_address',\n        value: [\n            {\n                type: 'textbox',\n                label: 'Street Address',\n                name: 'Street Address',\n                subfield: 'st1'\n            },\n            {\n                type: 'textbox',\n                label: 'Address Line 2',\n                name: 'Address Line 2',\n                subfield: 'st2'\n            },\n            {\n                type: 'textbox',\n                label: 'City',\n                name: 'City',\n                subfield: 'city'\n            },\n            {\n                type: 'textbox',\n                label: 'State',\n                name: 'State',\n                subfield: 'state'\n            },\n            {\n                type: 'textbox',\n                label: 'Zip',\n                name: 'Zip',\n                subfield: 'zip'\n            }\n        ],\n        fieldProps: {\n            subfields: 'st1|st2|city|state|zip'\n        },\n        svgIcon: /*#__PURE__*/ _jsx(IconLocationPinFilled, {})\n    },\n    {\n        text: 'Phone',\n        type: 'control_phone',\n        value: [\n            {\n                type: 'textbox',\n                label: 'Area Code',\n                name: 'Area Code',\n                inputType: 'tel'\n            },\n            {\n                type: 'textbox',\n                label: 'Phone Number',\n                name: 'Phone',\n                inputType: 'tel'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconPhoneFilled, {}),\n        fieldProps: {\n            validation: 'Numeric'\n        }\n    },\n    {\n        text: 'Signature',\n        type: 'control_signature',\n        value: [\n            {\n                type: 'signaturebox',\n                label: 'Signature',\n                name: 'Signature'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconPenSignFilled, {})\n    },\n    {\n        text: 'Short Text',\n        type: 'control_textbox',\n        value: [\n            {\n                type: 'textbox',\n                label: 'Type a label',\n                name: 'Short Text'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconInputTextShort, {})\n    },\n    {\n        text: 'Dropdown',\n        type: 'control_dropdown',\n        value: [\n            {\n                type: 'selectbox',\n                label: 'Please Select',\n                name: 'selectbox',\n                options: [\n                    {\n                        type: 'selectbox',\n                        label: 'Type Option 1',\n                        name: 'option1'\n                    },\n                    {\n                        type: 'selectbox',\n                        label: 'Type Option 2',\n                        name: 'option2'\n                    },\n                    {\n                        type: 'selectbox',\n                        label: 'Type Option 3',\n                        name: 'option3'\n                    }\n                ]\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconDropdownFilled, {})\n    },\n    {\n        text: 'Single Choice',\n        type: 'control_radio',\n        value: [\n            {\n                type: 'radiobox',\n                label: 'Type option 1',\n                name: 'option1'\n            },\n            {\n                type: 'radiobox',\n                label: 'Type option 2',\n                name: 'option2'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconSingleSelectionFilled, {})\n    },\n    {\n        text: 'Multiple Choice',\n        type: 'control_checkbox',\n        value: [\n            {\n                type: 'checkbox',\n                label: 'Type option 1',\n                name: 'option1'\n            },\n            {\n                type: 'checkbox',\n                label: 'Type option 2',\n                name: 'option2'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconCheckSquareFilled, {})\n    },\n    {\n        text: 'Number',\n        type: 'control_number',\n        value: [\n            {\n                type: 'textbox',\n                label: '',\n                name: 'Number',\n                inputType: 'number'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconNumberSquareFilled, {})\n    },\n    {\n        text: 'Time',\n        type: 'control_time',\n        value: [\n            {\n                type: 'timebox',\n                label: 'Time',\n                name: 'Time'\n            }\n        ],\n        svgIcon: /*#__PURE__*/ _jsx(IconClockFilled, {})\n    }\n];\nconst getSubFields = (isAdmin)=>DROPDOWN_LIST.filter((field)=>isAdmin || !field.__adminOnly);\nconst translateSubfieldText = (subFields)=>{\n    return subFields.map((subfield)=>{\n        return subfield.text ? Object.assign(subfield, {\n            text: subfield.text.locale()\n        }) : subfield;\n    });\n};\nconst FONTS = [\n    'Sans Serif',\n    'Abril Fatface',\n    'Arial',\n    'Arial Black',\n    'Bevan',\n    'Comic Sans MS',\n    'Courier New',\n    'Diplomata',\n    'Fredoka One',\n    'Galada',\n    'Helvetica',\n    'Impact',\n    'Lobster',\n    'Playball',\n    'Sail',\n    'Tahoma',\n    'Times New Roman',\n    'Trebuchet MS',\n    'Roboto',\n    'Verdana'\n];\nconst popoverProps = {\n    popoverOptions: {\n        placement: 'bottom-start',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [\n                        0,\n                        6\n                    ]\n                }\n            }\n        ]\n    }\n};\n// eslint-disable-next-line react/prop-types\nconst Img = ({ icon, alt })=>/*#__PURE__*/ _jsx(\"img\", {\n        className: icon,\n        alt: alt !== null && alt !== void 0 ? alt : '',\n        src: `//cdn.jotfor.ms/assets/img/v4/fields/control_inline/${icon}.svg`\n    });\nconst classNames = (list)=>list.filter((a)=>a).join(' ');\nconst dropdownButton = ({ text, classname = '', icon = '', notification })=>/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsxs(\"button\", _object_spread_props(_object_spread({\n            ref: ref,\n            // eslint-disable-next-line react/prop-types\n            \"data-value\": props.option ? props.option.value : '',\n            className: classNames([\n                'FITB-button',\n                'add-field-button',\n                classname\n            ]),\n            type: \"button\"\n        }, props), {\n            children: [\n                icon && /*#__PURE__*/ _jsx(IconPlusCircleFilled, {}),\n                /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"FITB-button-text\",\n                    children: text\n                }),\n                !!notification && /*#__PURE__*/ _jsx(\"span\", {\n                    style: {\n                        width: 18,\n                        height: 18,\n                        borderRadius: '100%',\n                        backgroundColor: '#DC2626',\n                        marginLeft: '4px',\n                        color: '#ffffff',\n                        display: 'inline-flex',\n                        justifyContent: 'center',\n                        alignItems: 'center'\n                    },\n                    children: notification\n                }),\n                /*#__PURE__*/ _jsx(\"svg\", {\n                    width: \"10\",\n                    height: \"6\",\n                    viewBox: \"0 0 10 6\",\n                    xmlns: \"http://www.w3.org/2000/svg\",\n                    children: /*#__PURE__*/ _jsx(\"path\", {\n                        fillRule: \"evenodd\",\n                        clipRule: \"evenodd\",\n                        // eslint-disable-next-line max-len\n                        d: \"M1.00003 0C0.595567 0 0.230931 0.243642 0.0761497 0.617317C-0.0786313 0.990991 0.00692442 1.42111 0.292922 1.70711L4.29292 5.70711C4.68345 6.09763 5.31661 6.09763 5.70714 5.70711L7.70714 3.70711L9.70714 1.70711C9.99313 1.42111 10.0787 0.990991 9.92391 0.617317C9.76913 0.243642 9.40449 0 9.00003 0H1.00003Z\"\n                    })\n                })\n            ]\n        })));\nconst listItem = ({ option: { text, name, value, icon, svgIcon } })=>/*#__PURE__*/ _jsxs(\"div\", {\n        \"data-value\": value || name,\n        className: classNames([\n            'FITB-dropdown-listItem',\n            icon && `ji-${icon}`\n        ]),\n        children: [\n            svgIcon && svgIcon,\n            text\n        ]\n    });\nconst isLast = (blots)=>(blot)=>{\n        const groupBlots = blots.filter((b)=>b.type === 'checkbox' || b.type === 'radiobox');\n        return groupBlots[groupBlots.length - 1] === blot;\n    };\nconst blotWithAdditionalProps = (props)=>(blot)=>_object_spread({}, blot, props);\nconst abs = (x)=>x < 0 ? x * -1 : x;\nconst getBlots = (fields)=>Array.isArray(fields) ? fields.reduce((acc, f)=>[\n            ...acc,\n            ...getBlotOptions(f).map((blot)=>blotWithAdditionalProps({\n                    required: f.required,\n                    groupType: f.type,\n                    last: isLast(f.options)(blot)\n                })(blot)) || []\n        ], []) : [];\nconst getFieldProps = (fields, blotId)=>Array.isArray(fields) ? fields.find(({ id })=>id === parseBlotId(blotId).id) : undefined;\nconst getBlotMarkup = (questionId, questionName, required, fields, themeVersion, fieldTexts)=>(blotId)=>{\n        const blot = getBlots(fields === null || fields === void 0 ? void 0 : fields.value).find(({ id })=>id === blotId);\n        const field = getFieldProps(fields === null || fields === void 0 ? void 0 : fields.value, blotId);\n        if (blot && field && BLOT_COMPS[blot.type]) {\n            return ReactDOMServer.renderToStaticMarkup(BLOT_COMPS[blot.type]({\n                questionId,\n                questionName,\n                required,\n                field,\n                blot,\n                themeVersion,\n                fieldTexts\n            }));\n        }\n        return '';\n    };\nconst Toolbar = ({ qid, formFields, onFormFieldSelect })=>/*#__PURE__*/ _jsxs(\"div\", {\n        id: `texteditor_toolbar_${qid}`,\n        className: \"FITB-quillTB disable-drag\",\n        children: [\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"ql-formats\",\n                children: /*#__PURE__*/ _jsx(\"select\", {\n                    className: \"ql-font\",\n                    defaultValue: \"sans-serif\",\n                    children: FONTS.map((f)=>/*#__PURE__*/ _jsx(\"option\", {\n                            value: f.toLowerCase().replace(/\\s/g, '-'),\n                            children: f\n                        }, f))\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"ql-formats\",\n                children: /*#__PURE__*/ _jsxs(\"select\", {\n                    className: \"ql-size\",\n                    defaultValue: \"12px\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"option\", {\n                            value: \"10px\",\n                            children: \"10px\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"option\", {\n                            value: \"12px\",\n                            children: \"12px\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"option\", {\n                            value: \"18px\",\n                            children: \"18px\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"option\", {\n                            value: \"32px\",\n                            children: \"32px\"\n                        })\n                    ]\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                role: \"menu\",\n                className: \"ql-formats\",\n                children: /*#__PURE__*/ _jsx(\"select\", {\n                    role: \"menuitem\",\n                    \"aria-label\": \"Font Type\",\n                    className: \"ql-header\"\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"span\", {\n                className: \"ql-formats\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"bold\",\n                        className: \"ql-bold\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"italic\",\n                        className: \"ql-italic\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"underline\",\n                        className: \"ql-underline\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                className: \"ql-formats\",\n                role: \"menu\",\n                children: /*#__PURE__*/ _jsx(\"select\", {\n                    \"aria-label\": \"color\",\n                    role: \"menuitem\",\n                    className: \"ql-color\"\n                })\n            }),\n            /*#__PURE__*/ _jsx(\"span\", {\n                role: \"menu\",\n                className: \"ql-formats\",\n                children: /*#__PURE__*/ _jsx(\"select\", {\n                    role: \"menuitem\",\n                    \"aria-label\": \"align\",\n                    className: \"ql-align\"\n                })\n            }),\n            /*#__PURE__*/ _jsxs(\"span\", {\n                className: \"ql-formats\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"Ordered List\",\n                        className: \"ql-list\",\n                        value: \"ordered\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"Bullet List\",\n                        className: \"ql-list\",\n                        value: \"bullet\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"Indent +1\",\n                        className: \"ql-indent\",\n                        value: \"+1\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"Indent -1\",\n                        className: \"ql-indent\",\n                        value: \"-1\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsxs(\"span\", {\n                className: \"ql-formats\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"Link\",\n                        className: \"ql-link\"\n                    }),\n                    /*#__PURE__*/ _jsx(\"button\", {\n                        type: \"button\",\n                        \"aria-label\": \"Image\",\n                        className: \"ql-image\"\n                    })\n                ]\n            }),\n            formFields && formFields.length > 0 && /*#__PURE__*/ _jsx(\"span\", {\n                className: \"ql-formats\",\n                children: /*#__PURE__*/ _jsx(Dropdown, {\n                    options: formFields,\n                    ButtonRenderer: dropdownButton({\n                        text: 'Form fields',\n                        classname: 'formFields'\n                    }),\n                    onOptionSelect: onFormFieldSelect,\n                    OptionRenderer: listItem,\n                    ContainerRenderer: ({ children })=>/*#__PURE__*/ _jsx(\"ul\", {\n                            className: \"FITB-dropdown\",\n                            children: children\n                        }),\n                    popoverProps: popoverProps\n                })\n            })\n        ]\n    });\nconst handleStickyTB = (el, stageScroller, currTop)=>{\n    const { top, height } = el.parentNode.getBoundingClientRect();\n    const { top: contTop } = stageScroller.getBoundingClientRect();\n    const topLimit = top - contTop;\n    if (abs(topLimit) === currTop) {\n        return currTop;\n    }\n    const { offsetHeight } = el;\n    return topLimit <= 0 && topLimit + (height - offsetHeight) >= 0 && abs(topLimit);\n};\nconst Inline = ({ TextEditor, ImageUpload, id: { value: questionId }, name: { value: questionName } = {\n    value: ''\n}, passive, template, onChangeText, onCreateBlots, onDeleteBlots, onClickBlot, fields, onBlotUpdate, updateBlotsIndex, isSelected, isRightPanelOpen, required, formFields, isAdmin, themeVersion, darkMode, actions, fieldTexts, isTranslationMode, customDropdownOptions, customBlots, handleBlotSelect, initialShowQuillTB, customQuillOptions, extraDropdownProps, onTextEditorFocus })=>{\n    if (TextEditor && passive) {\n        const editorRef = useRef();\n        const TBContRef = useRef();\n        const [showQuillTB, setShowQuillTB] = useState(initialShowQuillTB);\n        const [stickyTBtop, setStickyTBTop] = useState(false);\n        const onBlotSelect = ({ value, type, fieldProps = {} })=>{\n            if (value) {\n                editorRef.current.createBlots(value, {\n                    type,\n                    fieldProps\n                });\n                handleBlotSelect(editorRef.current.getTextContent());\n            }\n        };\n        const onFormFieldSelect = (q)=>{\n            editorRef.current.insertTextContent(`{${q.name}}`);\n        };\n        const handleSwitchClick = ()=>{\n            const { focus = identity } = editorRef.current;\n            focus(); // we loose the selection highlight so restore it again\n            setShowQuillTB(!showQuillTB);\n        };\n        useEffect(()=>{\n            if (isSelected) {\n                const stageScroller = global.document.querySelector('.stageScroller');\n                const scrollAction = ()=>setStickyTBTop(handleStickyTB(TBContRef.current, stageScroller, stickyTBtop));\n                scrollAction();\n                stageScroller.addEventListener('scroll', scrollAction);\n                return ()=>stageScroller.removeEventListener('scroll', scrollAction);\n            }\n        }, [\n            isSelected\n        ]);\n        return /*#__PURE__*/ _jsxs(\"div\", _object_spread_props(_object_spread({\n            className: classNames([\n                'FITB',\n                showQuillTB && isSelected && 'showQuillTB',\n                isSelected && 'selected',\n                isRightPanelOpen && isSelected && 'rightPanelOpen'\n            ])\n        }, darkMode ? {\n            'data-darkmode': true\n        } : {}), {\n            children: [\n                /*#__PURE__*/ _jsxs(\"div\", _object_spread_props(_object_spread({\n                    className: classNames([\n                        'FITB-TBCont',\n                        isSelected && stickyTBtop && 'stickyTB'\n                    ]),\n                    ref: TBContRef\n                }, isSelected && stickyTBtop ? {\n                    style: {\n                        transform: `translateY(${stickyTBtop}px)`\n                    }\n                } : {}), {\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"FITB-buttonCont\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"button\", {\n                                    className: \"FITB-button TBSwitch\",\n                                    type: \"button\",\n                                    onClick: handleSwitchClick,\n                                    children: /*#__PURE__*/ _jsx(IconTextColor, {})\n                                }),\n                                /*#__PURE__*/ _jsx(Dropdown, _object_spread({\n                                    onOptionSelect: onBlotSelect,\n                                    ButtonRenderer: dropdownButton({\n                                        text: 'Add field'.locale(),\n                                        icon: 'plus',\n                                        notification: isTranslationMode && customDropdownOptions ? customDropdownOptions.filter((opt)=>!opt.disabled).length : ''\n                                    }),\n                                    options: customDropdownOptions || translateSubfieldText(getSubFields(isAdmin)),\n                                    OptionRenderer: listItem,\n                                    OptionContainerRenderer: (props)=>/*#__PURE__*/ _jsx(\"li\", _object_spread_props(_object_spread({}, props), {\n                                            className: \"FITB-list-button\"\n                                        })),\n                                    // eslint-disable-next-line react/prop-types\n                                    ContainerRenderer: /*#__PURE__*/ forwardRef(({ children }, ref)=>/*#__PURE__*/ _jsx(\"ul\", {\n                                            className: \"FITB-dropdown\",\n                                            ref: ref,\n                                            children: children\n                                        })),\n                                    popoverProps: popoverProps\n                                }, extraDropdownProps || {}))\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsx(Toolbar, {\n                            qid: questionId,\n                            formFields: formFields,\n                            onFormFieldSelect: onFormFieldSelect\n                        })\n                    ]\n                })),\n                /*#__PURE__*/ _jsx(TextEditor, {\n                    className: \"disable-drag\",\n                    ref: editorRef,\n                    qid: questionId,\n                    toolbar: `#texteditor_toolbar_${questionId}`,\n                    placeholder: 'Type here...'.locale(),\n                    onChangeText: onChangeText,\n                    onCreateBlots: onCreateBlots,\n                    defaultContent: template,\n                    onDeleteBlots: onDeleteBlots,\n                    onBlotUpdate: onBlotUpdate,\n                    onTextEditorFocus: onTextEditorFocus,\n                    onBlotsIndexUpdate: updateBlotsIndex,\n                    onClickBlot: onClickBlot,\n                    blots: customBlots || getBlots(fields),\n                    scrollingContainer: \"#stage\",\n                    useImageUploader: true,\n                    ImageUploader: ImageUpload,\n                    actions: actions,\n                    withBlotIDs: isTranslationMode,\n                    withLessSpaces: isTranslationMode,\n                    customQuillOptions: customQuillOptions\n                })\n            ]\n        }));\n    }\n    const createMarkup = ()=>{\n        const withBlotMarkups = template === null || template === void 0 ? void 0 : template.value.replace(BLOT_REGEX, (str, id)=>getBlotMarkup(questionId, questionName, required, fields, themeVersion, fieldTexts)(id));\n        return {\n            __html: sanitizeFITB(withBlotMarkups).replace(/\\{.*?\\}/g, (str)=>`<span class=\"fitb-replace-tag\">${str}</span>`) // wrap formField with span tag\n        };\n    };\n    return /*#__PURE__*/ _jsx(\"div\", {\n        id: `FITB_${questionId}`,\n        className: \"FITB formRender\",\n        dangerouslySetInnerHTML: createMarkup()\n    });\n};\nInline.getScript = ({ fields, id })=>{\n    const dateFields = Array.isArray(fields === null || fields === void 0 ? void 0 : fields.value) ? fields.value.filter((field)=>field.type === 'control_datetime') : [];\n    const timeFields = Array.isArray(fields === null || fields === void 0 ? void 0 : fields.value) ? fields.value.filter((field)=>field.type === 'control_time') : [];\n    let script = '';\n    script = dateFields.reduce((acc, field)=>{\n        const blotId = Array.isArray(field.options) && field.options[0] ? field.options[0].id : '';\n        let result = acc;\n        result = `${result} JotForm.setCalendar(\"${id.value}-${blotId}\");\\n`;\n        if (field.defaultDate === 'current') {\n            result = `${result} if ($(\"id_${id.value}-${blotId}\")) JotForm.formatDate({date:(new Date()), dateField:$(\"id_${id.value}-${blotId}\")});\\n`;\n        }\n        if (field.defaultDate && field.defaultDate.indexOf('custom') > -1 && field.defaultDate.indexOf('today') > -1) {\n            const dynamicDate = field.defaultDate.replace(/custom_/gi, '');\n            result = `${result} JotForm.displayDynamicDate(${blotId},\"${dynamicDate}\");\\n`;\n        }\n        return result;\n    }, '\\n');\n    script += timeFields.reduce((acc, field)=>{\n        const blotId = Array.isArray(field.options) && field.options[0] ? field.options[0].id : '';\n        const qid = Array.isArray(field.options) && field.options[0] ? field.options[0].qid : '';\n        let result = acc;\n        const fixAmPm = field.timeFormat === 'AM/PM' && field.showDayPeriods && field.showDayPeriods === 'both' && field.defaultTime && field.defaultTime === 'none';\n        if (field.defaultTime && (field.defaultTime === 'current' || fixAmPm)) {\n            result += `JotForm.displayLocalTime(\"hourSelect_${qid}_${blotId}\", \"minuteSelect_${qid}_${blotId}\",\"ampm_${qid}_${blotId}\", \"timeInput_${qid}_${blotId}\", ${fixAmPm});`;\n        }\n        return result;\n    }, '\\n');\n    return script;\n};\nInline.propTypes = {\n    id: PropTypes.shape().isRequired,\n    name: PropTypes.shape().isRequired,\n    passive: PropTypes.bool.isRequired,\n    TextEditor: PropTypes.shape().isRequired,\n    ImageUpload: PropTypes.oneOfType([\n        PropTypes.shape(),\n        PropTypes.func\n    ]).isRequired,\n    template: PropTypes.string.isRequired,\n    onChangeText: PropTypes.func.isRequired,\n    onCreateBlots: PropTypes.func.isRequired,\n    onDeleteBlots: PropTypes.func.isRequired,\n    onBlotUpdate: PropTypes.func.isRequired,\n    updateBlotsIndex: PropTypes.func.isRequired,\n    onClickBlot: PropTypes.func.isRequired,\n    fields: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n    isSelected: PropTypes.bool.isRequired,\n    isRightPanelOpen: PropTypes.bool.isRequired,\n    required: PropTypes.shape().isRequired,\n    formFields: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n    isAdmin: PropTypes.bool,\n    themeVersion: PropTypes.string,\n    darkMode: PropTypes.bool.isRequired,\n    actions: PropTypes.shape().isRequired,\n    fieldTexts: PropTypes.shape({\n        signatureFieldText: PropTypes.string\n    }),\n    isTranslationMode: PropTypes.bool,\n    customDropdownOptions: PropTypes.arrayOf(PropTypes.shape({\n        text: PropTypes.string,\n        type: PropTypes.string,\n        value: PropTypes.arrayOf(PropTypes.shape({})),\n        icon: PropTypes.string,\n        fieldProps: PropTypes.shape({\n            validation: PropTypes.string\n        })\n    })).isRequired,\n    customBlots: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n    handleBlotSelect: PropTypes.func,\n    initialShowQuillTB: PropTypes.bool,\n    customQuillOptions: PropTypes.shape({}),\n    extraDropdownProps: PropTypes.shape({}),\n    onTextEditorFocus: PropTypes.func\n};\nToolbar.propTypes = {\n    qid: PropTypes.string.isRequired,\n    formFields: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n    onFormFieldSelect: PropTypes.func.isRequired\n};\nlistItem.propTypes = {\n    option: PropTypes.shape()\n};\nImg.propTypes = {\n    icon: PropTypes.string.isRequired\n};\nInline.defaultProps = {\n    isAdmin: false,\n    themeVersion: 'v1',\n    fieldTexts: {\n        signatureFieldText: 'E-Signature Field'\n    },\n    isTranslationMode: false,\n    handleBlotSelect: (f)=>f,\n    initialShowQuillTB: false,\n    customQuillOptions: {},\n    extraDropdownProps: {},\n    onTextEditorFocus: (f)=>f\n};\nexport default Inline;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport SubLabel from '../helpers/SubLabel';\nimport { addValidation, classNames, specialOptions } from '../helpers/Utils';\nclass Location extends Component {\n    render() {\n        const className = addValidation(classNames.dropdown, this.props);\n        const countryOptions = [];\n        for(let lci = 0; lci < specialOptions.LocationCountries.value.length; lci++){\n            countryOptions.push(/*#__PURE__*/ _jsx(\"option\", {\n                value: lci + 1,\n                children: specialOptions.LocationCountries.value[lci]\n            }, lci));\n        }\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            children: [\n                /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    labelValue: \"Country:\",\n                    defaultValue: \"Country:\",\n                    propPath: \"sublabels.country\",\n                    children: /*#__PURE__*/ _jsxs(\"select\", {\n                        className: className,\n                        disabled: this.props.inlineEditClass,\n                        id: `${this.props.qid.value}_country`,\n                        name: `${this.props.qname.value}[country]`,\n                        children: [\n                            /*#__PURE__*/ _jsx(\"option\", {\n                                selected: 1,\n                                children: \"Please Select\"\n                            }),\n                            countryOptions,\n                            /*#__PURE__*/ _jsx(\"option\", {\n                                value: \"other\",\n                                children: \"Other\"\n                            })\n                        ]\n                    })\n                })),\n                /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    labelValue: \"State:\",\n                    defaultValue: \"State:\",\n                    propPath: \"sublabels.state\",\n                    children: /*#__PURE__*/ _jsx(\"select\", {\n                        className: className,\n                        disabled: this.props.inlineEditClass,\n                        id: `${this.props.qid.value}_state`,\n                        name: `${this.props.qname.value}[state]`,\n                        children: /*#__PURE__*/ _jsx(\"option\", {\n                            children: \"Any\"\n                        })\n                    })\n                })),\n                /*#__PURE__*/ _jsx(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    labelValue: \"City / Province:\",\n                    defaultValue: \"City / Province:\",\n                    propPath: \"sublabels.city\",\n                    children: /*#__PURE__*/ _jsx(\"select\", {\n                        className: className,\n                        disabled: this.props.inlineEditClass,\n                        id: `${this.props.qid.value}_city`,\n                        name: `${this.props.qname.value}[city]`,\n                        children: /*#__PURE__*/ _jsx(\"option\", {\n                            children: \"Any\"\n                        })\n                    })\n                }))\n            ]\n        });\n    }\n}\nexport { Location as default };\nLocation.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    text: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    description: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType\n};\nLocation.getState = ()=>{\n    return {};\n};\nLocation.getScript = (prop)=>{\n    const script = `      setLocationEvents($('\"  ${prop.qid.value} \"_country'), $('\" ${prop.qid.value} \"_state'), $('\" ${prop.qid.value} \"_city'));\\n`;\n    return script;\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport sanitizeHtml from 'sanitize-html';\nimport { htmlDecode } from '@jotforminc/form-common';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { addValidation, classNames, sanitize } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nfunction sanitizeMatrix(str) {\n    return sanitizeHtml(str, {\n        allowedTags: [\n            'b',\n            'strong',\n            'i',\n            'em',\n            'small',\n            'mark',\n            'sup',\n            'sub',\n            'a',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'h5',\n            'h6',\n            'br'\n        ],\n        allowedAttributes: {\n            a: [\n                'href',\n                'target'\n            ]\n        },\n        parseStyleAttributes: false\n    });\n}\nclass Matrix extends Component {\n    /*\n    Returns columns as array\n    format: [\n      { text, type }\n    ]\n    uses dcolumns(js array) if inputType is Dynamic,\n    otherwise uses mcolumns(string separated by pipe (|))\n  */ get ColumnsArray() {\n        const inputType = this.props.inputType ? this.props.inputType.value : '';\n        if (inputType === 'Dynamic' || this.featureSet.includes('useDcols')) {\n            var _this_props_dcolumns;\n            let dcolumns = ((_this_props_dcolumns = this.props.dcolumns) === null || _this_props_dcolumns === void 0 ? void 0 : _this_props_dcolumns.value) || [];\n            if (typeof dcolumns === 'string') {\n                dcolumns = safeJSONParse(dcolumns, []);\n            }\n            return dcolumns;\n        }\n        const mcolsValue = this.props.mcolumns.value;\n        const mcols = mcolsValue && typeof mcolsValue === 'string' ? mcolsValue.split('|') : [\n            ''\n        ];\n        // Format like Dynamic\n        return mcols.map((text)=>({\n                text,\n                type: inputType\n            }));\n    }\n    get featureSet() {\n        var _this_props_featureSet;\n        return ((_this_props_featureSet = this.props.featureSet) === null || _this_props_featureSet === void 0 ? void 0 : _this_props_featureSet.value) || [];\n    }\n    get rows() {\n        if (this.featureSet.includes('useIds')) {\n            var _this_props_drows;\n            const dRows = ((_this_props_drows = this.props.drows) === null || _this_props_drows === void 0 ? void 0 : _this_props_drows.value) || [];\n            if (typeof dRows === 'string') {\n                return this.props.mrows.value ? this.props.mrows.value.split('|') : [\n                    ''\n                ];\n            }\n            return dRows.map((row)=>row.text);\n        }\n        const mRows = this.props.mrows.value ? this.props.mrows.value.split('|') : [\n            ''\n        ];\n        return mRows;\n    }\n    get rowIds() {\n        var _this_props_drows;\n        let dRows = ((_this_props_drows = this.props.drows) === null || _this_props_drows === void 0 ? void 0 : _this_props_drows.value) || [];\n        if (typeof dRows === 'string') {\n            dRows = this.props.mrows.value ? this.props.mrows.value.split('|') : [];\n            dRows = dRows.map((r, i)=>({\n                    id: i,\n                    text: r\n                }));\n        }\n        return dRows.map((c)=>c.id);\n    }\n    get colIds() {\n        var _this_props_dcolumns;\n        let dColumns = ((_this_props_dcolumns = this.props.dcolumns) === null || _this_props_dcolumns === void 0 ? void 0 : _this_props_dcolumns.value) || [];\n        if (typeof dColumns === 'string') {\n            dColumns = this.props.mcolumns.value ? this.props.mcolumns.value.split('|') : [];\n            dColumns = dColumns.map((r, i)=>({\n                    id: i,\n                    text: r\n                }));\n        }\n        return dColumns.map((c)=>c.id);\n    }\n    renderField(i, k, column, calcValue) {\n        const isDynamic = this.props.inputType.value === 'Dynamic' || this.featureSet.includes('useDcols');\n        let input;\n        const ID = `input_${this.props.id.value}_${i}_${k}`;\n        const nameSecCol = column.type === 'Radio Button' ? '' : '[]';\n        const name = isDynamic ? `${this.props.qname.value}[${i}][${k}]` : `${this.props.qname.value}[${i}]${nameSecCol}`;\n        const tabIndex = this.props.inlineEditClass || this.props.passive ? '-1' : null;\n        const sanitizedVal = column.text ? column.text.replace(/[\\\\\"']/g, '\\\\$&').replace(/\\u0000/g, '\\\\0') : '1';\n        const required = this.props.required && this.props.required.value === 'Yes' ? true : null;\n        const step = this.props.step ? this.props.step : 'any';\n        const labelIDs = `label_${this.props.id.value}_col_${k} label_${this.props.id.value}_row_${i}`;\n        switch(column.type){\n            case 'Radio Button':\n                // name +-> calcValue+' value -> mcol.sanitize()\n                input = /*#__PURE__*/ _jsxs(React.Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            readOnly: this.props.inlineEditClass || this.props.passive,\n                            disabled: this.props.passive,\n                            id: ID,\n                            className: addValidation(classNames.radio, this.props),\n                            type: \"radio\",\n                            name: name,\n                            \"data-calcvalue\": calcValue,\n                            defaultValue: sanitizedVal,\n                            tabIndex: tabIndex,\n                            required: required,\n                            \"aria-labelledby\": labelIDs,\n                            \"aria-label\": \"Cells Radio Button\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"label\", {\n                            htmlFor: ID,\n                            className: \"matrix-choice-label matrix-radio-label\",\n                            \"aria-hidden\": \"true\"\n                        })\n                    ]\n                });\n                break;\n            case 'Check Box':\n                input = /*#__PURE__*/ _jsxs(React.Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            readOnly: this.props.inlineEditClass || this.props.passive,\n                            disabled: this.props.passive,\n                            id: ID,\n                            className: addValidation(classNames.checkbox, this.props),\n                            type: \"checkbox\",\n                            name: name,\n                            \"data-calcvalue\": calcValue,\n                            defaultValue: sanitizedVal,\n                            tabIndex: tabIndex,\n                            required: required,\n                            \"aria-labelledby\": labelIDs,\n                            \"aria-label\": \"Cells Check Box\"\n                        }),\n                        /*#__PURE__*/ _jsx(\"label\", {\n                            htmlFor: ID,\n                            className: \"matrix-choice-label matrix-checkbox-label\"\n                        })\n                    ]\n                });\n                break;\n            case 'Text Box':\n                input = /*#__PURE__*/ _jsx(\"input\", {\n                    readOnly: this.props.inlineEditClass || this.props.passive,\n                    id: ID,\n                    className: addValidation(classNames.textbox, this.props),\n                    type: \"text\",\n                    size: \"5\",\n                    name: name,\n                    style: {\n                        width: '100%',\n                        boxSizing: 'border-box'\n                    },\n                    tabIndex: tabIndex,\n                    required: required,\n                    defaultValue: \"\",\n                    \"aria-labelledby\": labelIDs,\n                    \"aria-label\": \"Cells Text Box\"\n                });\n                break;\n            case 'Currency Box':\n                input = /*#__PURE__*/ _jsx(\"input\", {\n                    readOnly: this.props.inlineEditClass || this.props.passive,\n                    id: ID,\n                    className: addValidation(classNames.textbox, this.props, 'Currency'),\n                    type: \"text\",\n                    size: \"5\",\n                    name: name,\n                    style: {\n                        width: '100%',\n                        boxSizing: 'border-box'\n                    },\n                    tabIndex: tabIndex,\n                    required: required,\n                    defaultValue: \"\",\n                    \"aria-labelledby\": labelIDs,\n                    \"aria-label\": \"Cells Currency Box\"\n                });\n                break;\n            case 'Numeric Text Box':\n                input = /*#__PURE__*/ _jsx(\"input\", {\n                    disabled: this.props.inlineEditClass || this.props.passive,\n                    id: ID,\n                    type: \"number\",\n                    className: `form-number-input ${addValidation(classNames.textbox, this.props)}`,\n                    name: name,\n                    style: {\n                        width: '100%',\n                        boxSizing: 'border-box'\n                    },\n                    size: \"5\",\n                    tabIndex: tabIndex,\n                    required: required,\n                    defaultValue: \"\",\n                    \"aria-labelledby\": labelIDs,\n                    step: step,\n                    \"aria-label\": \"Cells Numeric Text Box\"\n                });\n                break;\n            case 'Drop Down':\n                const dropdownOptions = (isDynamic && column.options ? column.options : this.props.dropdown.value.replace(/&#0*39;/g, \"'\")).split('|');\n                const dropdownLabel = this.props.pleaseSelectDropdownText && this.props.pleaseSelectDropdownText.text || 'Please select';\n                const options = dropdownOptions.map((optionVal, oi)=>{\n                    return /*#__PURE__*/ _jsx(\"option\", {\n                        value: htmlDecode(sanitize(optionVal)),\n                        children: htmlDecode(sanitize(optionVal))\n                    }, oi);\n                });\n                input = /*#__PURE__*/ _jsxs(\"select\", {\n                    disabled: this.props.inlineEditClass || this.props.passive,\n                    id: ID,\n                    className: addValidation(classNames.dropdown, this.props),\n                    name: name,\n                    style: {\n                        width: '100%',\n                        boxSizing: 'border-box'\n                    },\n                    required: required,\n                    \"aria-labelledby\": labelIDs,\n                    \"aria-label\": \"Cells Select Box\",\n                    children: [\n                        /*#__PURE__*/ _jsx(\"option\", {\n                            \"aria-label\": dropdownLabel\n                        }),\n                        options\n                    ]\n                });\n                break;\n            default:\n                return null;\n        }\n        return input;\n    }\n    render() {\n        let calcValues = this.props.calcMatrixValues && this.props.calcMatrixValues.value && this.props.calcMatrixValues.value.length > 0 && this.props.calcMatrixValues.value !== 'Click to edit' ? this.props.calcMatrixValues.value : false;\n        if (calcValues) {\n            calcValues = calcValues.split('|').map((line)=>{\n                return line.split(',');\n            });\n        }\n        const inputType = this.props.inputType ? this.props.inputType.value : '';\n        const isDynamic = this.props.inputType.value === 'Dynamic';\n        const cols = this.ColumnsArray;\n        const focusedColumnIndex = this.props.focusedPosition ? this.props.focusedPosition.mcolumns : null;\n        const focusedRowIndex = this.props.focusedPosition ? this.props.focusedPosition.mrows : null;\n        const maxLength = 1000;\n        if ([\n            'Slider',\n            'Emoji Slider',\n            'Yes No'\n        ].indexOf(inputType) > -1) {\n            return /*#__PURE__*/ _jsx(\"div\", {\n                children: \"This matrix type is not available for legacy form layout.\"\n            });\n        }\n        const THs = [];\n        for(let coli = 0; coli < cols.length; coli++){\n            let col = null;\n            const colText = cols[coli] && cols[coli].text || '';\n            if (this.props.inlineEditClass) {\n                col = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                    id: this.props.id.value,\n                    propPath: `${isDynamic || this.featureSet.includes('useDcols') ? 'dcolumns' : 'mcolumns'}|${coli}`,\n                    propModifier: (prop)=>{\n                        var _this_props_dcolumns_value;\n                        const changes = _object_spread({}, prop);\n                        if (this.featureSet.includes('useDcols')) {\n                            changes[`mcolumns|${coli}`] = changes[`dcolumns|${coli}`];\n                        }\n                        changes.dcolumns = (_this_props_dcolumns_value = this.props.dcolumns.value) === null || _this_props_dcolumns_value === void 0 ? void 0 : _this_props_dcolumns_value.filter((dcol)=>dcol.text !== '');\n                        return changes;\n                    },\n                    text: sanitizeHtml(colText),\n                    defaultValue: QuestionProps[this.props.type.value].mcolumns.value.split('|')[coli] || 'Type Here',\n                    placeholder: 'Type Col Name',\n                    sanitizeText: true,\n                    sanitizeFunction: sanitizeMatrix,\n                    allowBreakSpaces: true,\n                    renderHtmlTags: true,\n                    focusToElement: focusedColumnIndex === coli,\n                    maxLength: maxLength\n                });\n                let colAction = null;\n                if (this.props.manageMatrixOptions) {\n                    if (this.props.inputType.value === 'Dynamic') {\n                        colAction = /*#__PURE__*/ React.createElement(this.props.manageMatrixOptions, {\n                            qid: this.props.id.value,\n                            label: '',\n                            type: 'column',\n                            operation: 'editContext',\n                            optionIndex: coli\n                        });\n                    } else {\n                        colAction = /*#__PURE__*/ React.createElement(this.props.manageMatrixOptions, {\n                            qid: this.props.id.value,\n                            label: '×',\n                            type: 'column',\n                            operation: 'remove',\n                            optionIndex: coli\n                        });\n                    }\n                }\n                const matrixCells = this.props.matrixcells.value ? `${this.props.matrixcells.value}px` : null;\n                THs.push(/*#__PURE__*/ _jsxs(\"th\", {\n                    scope: \"col\",\n                    className: `form-matrix-headers form-matrix-column-headers form-matrix-column_${coli}`,\n                    style: {\n                        width: matrixCells,\n                        position: 'relative'\n                    },\n                    children: [\n                        col,\n                        colAction\n                    ]\n                }, coli));\n            } else {\n                // col = cols[coli];\n                col = {\n                    __html: `<label id=\"label_${this.props.id.value}_col_${coli}\" >${sanitizeHtml(colText)}</label>`\n                };\n                const matrixCells = this.props.matrixcells.value ? `${this.props.matrixcells.value}px` : null;\n                THs.push(/*#__PURE__*/ _jsx(\"th\", {\n                    scope: \"col\",\n                    className: `form-matrix-headers form-matrix-column-headers form-matrix-column_${coli}`,\n                    style: {\n                        width: matrixCells\n                    },\n                    dangerouslySetInnerHTML: col\n                }, coli));\n            }\n        }\n        if (this.props.manageMatrixOptions) {\n            const operation = this.props.inputType && this.props.inputType.value === 'Dynamic' ? 'addContext' : 'add';\n            const addCol = /*#__PURE__*/ React.createElement(this.props.manageMatrixOptions, {\n                qid: this.props.id.value,\n                label: 'add column',\n                type: 'column',\n                operation,\n                optionIndex: cols.length - 1\n            });\n            THs.push(/*#__PURE__*/ _jsx(\"th\", {\n                style: {\n                    border: 'none'\n                },\n                children: addCol\n            }));\n        }\n        const TRs = this.rows.map((row, i)=>{\n            const columns = this.ColumnsArray.map((column, k)=>{\n                const calcValue = calcValues && calcValues[i] && calcValues[i][k] ? calcValues[i][k] : null;\n                return /*#__PURE__*/ _jsx(\"td\", {\n                    className: \"form-matrix-values\",\n                    children: this.renderField(i, k, column, calcValue)\n                }, k);\n            });\n            let rowRender;\n            if (this.props.inlineEditClass) {\n                rowRender = /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n                    id: this.props.id.value,\n                    propPath: this.featureSet.includes('useIds') ? `drows|${i}` : `mrows|${i}`,\n                    propModifier: (prop)=>{\n                        var _this_props_drows, _this_props_drows_value;\n                        if (!this.featureSet.includes('useIds')) {\n                            return prop;\n                        }\n                        ;\n                        const changes = _object_spread({}, prop);\n                        changes[`mrows|${i}`] = changes[`drows|${i}`];\n                        if (typeof ((_this_props_drows = this.props.drows) === null || _this_props_drows === void 0 ? void 0 : _this_props_drows.value) === 'string') {\n                            var _this_props_mrows_value;\n                            changes.drows = this.props.mrows ? (_this_props_mrows_value = this.props.mrows.value) === null || _this_props_mrows_value === void 0 ? void 0 : _this_props_mrows_value.split('|').map((item, i)=>({\n                                    id: i,\n                                    text: item\n                                })) : [\n                                ''\n                            ];\n                            return changes;\n                        }\n                        changes.drows = (_this_props_drows_value = this.props.drows.value) === null || _this_props_drows_value === void 0 ? void 0 : _this_props_drows_value.filter((drow)=>drow.text !== '');\n                        return changes;\n                    },\n                    text: sanitizeHtml(row) || '',\n                    defaultValue: QuestionProps[this.props.type.value].mrows.value.split('|')[i] || 'type here',\n                    placeholder: 'Type Row Name',\n                    focusToElement: focusedRowIndex === i,\n                    allowBreakSpaces: true,\n                    sanitizeText: true,\n                    sanitizeFunction: sanitizeMatrix,\n                    renderHtmlTags: true,\n                    isArrayModeEnabled: true,\n                    maxLength: maxLength\n                });\n                let rowRemove = null;\n                if (this.props.manageMatrixOptions) {\n                    rowRemove = /*#__PURE__*/ React.createElement(this.props.manageMatrixOptions, {\n                        qid: this.props.id.value,\n                        label: '×',\n                        type: 'row',\n                        operation: 'remove',\n                        optionIndex: i\n                    });\n                }\n                return /*#__PURE__*/ _jsxs(\"tr\", {\n                    className: \"form-matrix-tr form-matrix-value-tr\",\n                    \"aria-labelledby\": `label_${this.props.id.value} label_${this.props.id.value}_row_${i}`,\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"th\", {\n                            scope: \"row\",\n                            className: \"form-matrix-headers form-matrix-row-headers\",\n                            children: [\n                                rowRender,\n                                rowRemove\n                            ]\n                        }),\n                        columns\n                    ]\n                }, i);\n            }\n            rowRender = {\n                __html: `<label id=\"label_${this.props.id.value}_row_${i}\" >${sanitizeHtml(row)}</label>`\n            };\n            return /*#__PURE__*/ _jsxs(\"tr\", {\n                className: \"form-matrix-tr form-matrix-value-tr\",\n                \"aria-labelledby\": `label_${this.props.id.value} label_${this.props.id.value}_row_${i}`,\n                children: [\n                    /*#__PURE__*/ _jsx(\"th\", {\n                        scope: \"row\",\n                        className: \"form-matrix-headers form-matrix-row-headers\",\n                        dangerouslySetInnerHTML: rowRender\n                    }),\n                    columns\n                ]\n            }, i);\n        });\n        if (this.props.manageMatrixOptions) {\n            const addRow = /*#__PURE__*/ React.createElement(this.props.manageMatrixOptions, {\n                qid: this.props.id.value,\n                label: 'add row',\n                type: 'row',\n                operation: 'add',\n                optionIndex: this.rows.length - 1\n            });\n            TRs.push(/*#__PURE__*/ _jsx(\"tr\", {\n                style: {\n                    background: 'transparent'\n                },\n                children: /*#__PURE__*/ _jsx(\"th\", {\n                    style: {\n                        border: 'none'\n                    },\n                    children: addRow\n                })\n            }));\n        }\n        return /*#__PURE__*/ _jsxs(_Fragment, {\n            children: [\n                /*#__PURE__*/ _jsxs(\"table\", {\n                    summary: \"\",\n                    \"aria-labelledby\": `label_${this.props.id.value}`,\n                    cellPadding: \"4\",\n                    cellSpacing: \"0\",\n                    className: \"form-matrix-table\",\n                    style: {\n                        width: this.props.matrixwidth.value ? `${this.props.matrixwidth.value}px` : null\n                    },\n                    \"data-component\": \"matrix\",\n                    \"data-dynamic\": isDynamic || this.featureSet.includes('useDcols') ? true : null,\n                    children: [\n                        /*#__PURE__*/ _jsxs(\"tr\", {\n                            className: \"form-matrix-tr form-matrix-header-tr\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"th\", {\n                                    className: \"form-matrix-th\",\n                                    style: {\n                                        border: 'none'\n                                    },\n                                    children: \" \"\n                                }),\n                                THs\n                            ]\n                        }),\n                        TRs\n                    ]\n                }),\n                this.featureSet.includes('useIds') && /*#__PURE__*/ _jsxs(\"div\", {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"hidden\",\n                            name: `${this.props.qname.value}[colIds]`,\n                            value: JSON.stringify(this.colIds)\n                        }),\n                        /*#__PURE__*/ _jsx(\"input\", {\n                            type: \"hidden\",\n                            name: `${this.props.qname.value}[rowIds]`,\n                            value: JSON.stringify(this.rowIds)\n                        })\n                    ]\n                })\n            ]\n        });\n    }\n}\nexport { Matrix as default };\nMatrix.defaultProps = {\n    passive: false\n};\nMatrix.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType,\n    passive: PropTypes.bool,\n    id: PropTypes.shape(),\n    mcolumns: PropTypes.shape(),\n    dcolumns: PropTypes.shape(),\n    mrows: PropTypes.shape(),\n    calcMatrixValues: PropTypes.shape(),\n    matrixwidth: PropTypes.shape(),\n    matrixcells: PropTypes.shape(),\n    inputType: PropTypes.shape(),\n    dropdown: PropTypes.shape(),\n    featureSet: PropTypes.shape({\n        value: PropTypes.arrayOf(PropTypes.string)\n    }),\n    manageMatrixOptions: PropTypes.elementType,\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    focusedPosition: PropTypes.shape({\n        mcolumns: PropTypes.number,\n        mrows: PropTypes.number\n    }),\n    required: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    step: PropTypes.string,\n    pleaseSelectDropdownText: PropTypes.shape({\n        text: PropTypes.string,\n        value: PropTypes.string\n    })\n};\nMatrix.getScript = (props)=>{\n    var _props_inputType, _props_featureSet;\n    let _script = '';\n    if (props.shuffleMatrix && props.shuffleMatrix.value === 'Yes') {\n        _script += `JotForm.shuffleOptions(\"${props.id.value}\");\\n`;\n    }\n    if (((_props_inputType = props.inputType) === null || _props_inputType === void 0 ? void 0 : _props_inputType.value) === 'Dynamic' || (((_props_featureSet = props.featureSet) === null || _props_featureSet === void 0 ? void 0 : _props_featureSet.value) || []).includes('useDcols')) {\n        _script += `JotForm.handleSingleChoiceWithMultiTypeColumns();\\n`;\n    }\n    return _script;\n};\n","/* global document window */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport { addValidation, classNames } from './Utils';\nimport PaypalMessages from './PaypalMessages';\nconst styleSizes = {\n    small: 30,\n    medium: 48,\n    large: 55,\n    responsive: 48\n};\nclass PaypalSmartPaymentButtons extends Component {\n    componentDidMount() {\n        if (typeof window.paypalCheckoutSDK !== 'object') {\n            this.loadPaypalScript();\n        }\n    }\n    componentWillReceiveProps(nextProps) {\n        const checkArr = [\n            'merchantId',\n            'fundingCard',\n            'fundingCredit',\n            'currency',\n            'environment',\n            'payLaterEnabled'\n        ];\n        if (this.checkProps.call(this, checkArr, nextProps)) {\n            this.loadPaypalScript(nextProps);\n        }\n    }\n    shouldComponentUpdate(nextProps, nextState) {\n        const checkArr = [\n            'merchantId',\n            'fundingCard',\n            'fundingCredit',\n            'currency',\n            'environment',\n            'clientID',\n            'styleColor',\n            'styleShape',\n            'styleSize',\n            'styleLabel',\n            'styleLayout',\n            'paymentType',\n            'paypalButtonQid',\n            'payLaterEnabled',\n            'payLaterLayout',\n            'payLaterLogoType',\n            'payLaterLogoPosition',\n            'payLaterTextColor',\n            'payLaterTextSize',\n            'payLaterBackgroundColor',\n            'payLaterRatio',\n            'showMessage',\n            'paypalButton',\n            'order',\n            'submitButtonOrder'\n        ];\n        if (this.checkProps.call(this, checkArr, nextProps)) {\n            return true;\n        }\n        if (JSON.stringify(this.state) !== JSON.stringify(nextState)) {\n            return true;\n        }\n        return false;\n    }\n    checkProps(checkArr, nextProps) {\n        const isChanged = [];\n        checkArr.forEach((prop)=>{\n            if (!this.props[prop] && nextProps[prop] || this.props[prop] && nextProps[prop].value !== this.props[prop].value) {\n                isChanged.push(true);\n            } else {\n                isChanged.push(false);\n            }\n        });\n        return isChanged.find((p)=>p === true);\n    }\n    loadPaypalScript(nextProps = null) {\n        let { environment, currency, merchantId, fundingCard, fundingCredit, payLaterEnabled } = this.props;\n        if (global.paypalCheckoutSDK) {\n            global.paypalCheckoutSDK.__internal_destroy__();\n        }\n        if (nextProps) {\n            environment = nextProps.environment;\n            currency = nextProps.currency;\n            merchantId = nextProps.merchantId;\n            fundingCard = nextProps.fundingCard;\n            fundingCredit = nextProps.fundingCredit;\n            payLaterEnabled = nextProps.payLaterEnabled;\n        }\n        const clientId = environment.value === 'sandbox' ? 'AbO4nZJsmfTgf8GbpnV-AY4382evohAYeDcuwqoAvvrKDDN_qOYa3K5biPFub70U40iPcpl0wtwkkMp2' : 'Afo1LVZtoaCSq5HI_naZpUMjB2C0_OiB6nNHlGaNe7jwBTunPXnbodmCr4ZTtpL3WT-4RkNG6DQFvX03';\n        const disallowed = `\n      ${fundingCard.value === 'disabled' && fundingCredit.value === 'disabled' ? 'credit,card' : ''}\n      ${fundingCard.value === 'disabled' && fundingCredit.value !== 'disabled' ? 'card' : ''}\n      ${fundingCard.value !== 'disabled' && fundingCredit.value === 'disabled' ? 'credit' : ''}\n      ${fundingCard.value !== 'disabled' && fundingCredit.value !== 'disabled' ? '' : ''}\n    `;\n        let options = `\n      components=buttons,messages\n      &client-id=${clientId}\n      &commit=true\n      ${merchantId.value ? `&merchant-id=${merchantId.value}` : ''}\n      ${currency.value ? `&currency=${currency.value}` : ''}\n      ${disallowed.trim() ? `&disable-funding=${disallowed}` : ''}\n    `;\n        if (payLaterEnabled && payLaterEnabled.value === 'Yes' && disallowed.indexOf('credit') === -1 && disallowed.indexOf('card') === -1) {\n            options += '&disable-funding=card';\n        }\n        const script = document.createElement('script');\n        script.src = `https://www.paypal.com/sdk/js?${options.replace(/\\s/g, '')}`;\n        script.async = true;\n        script.setAttribute('data-namespace', 'paypalCheckoutSDK');\n        document.body.appendChild(script);\n        script.onload = ()=>{\n            this.setState({\n                scriptLoaded: true\n            }, ()=>{\n                this.setState({\n                    scriptLoaded: false\n                });\n                // Notice:: The dom does not exist in React Virtual DOM.\n                if (payLaterEnabled && payLaterEnabled.value === 'Yes' && typeof window !== 'undefined') {\n                    this.clearPaypalMessagesFromDOM();\n                    const iframe = global.document.querySelector('.paypal-paylater-messages iframe');\n                    if (!iframe) {\n                        return;\n                    }\n                    if (iframe.style.opacity === '0' || iframe.style.pointerEvents === 'none') {\n                        iframe.style.setProperty('opacity', '1', 'important');\n                        iframe.style.setProperty('pointer-events', 'unset', 'important');\n                    }\n                }\n            });\n        };\n    }\n    clearPaymentButtons() {\n        // Remove other buttons for preventing dublicate.\n        const paypalButtons = Array.from(document.querySelectorAll('.paypal-buttons.paypal-buttons-context-iframe'));\n        if (paypalButtons.length >= 1) {\n            paypalButtons.map((button)=>{\n                button.remove();\n                return '';\n            });\n        }\n    }\n    clearPaypalMessagesFromDOM() {\n        // Notice:: The dom does not exist in React Virtual DOM.\n        const messageAreas = document.querySelectorAll('.paypal-paylater-messages .message-area *');\n        if (messageAreas.length > 0) {\n            messageAreas.forEach((messageArea)=>{\n                messageArea.remove();\n            });\n        }\n    }\n    renderSmartButtons(place) {\n        if (place === 'builder' && typeof window.paypalCheckoutSDK === 'object') {\n            const { styleColor, styleShape, styleSize, styleLabel, styleLayout, paypalButton, paypalButtonQid } = this.props;\n            let returnButton = null;\n            const onAuthorize = ()=>{\n                window.alert('Smart payment buttons demo');\n                return;\n            };\n            const style = {\n                color: styleColor.value ? styleColor.value : 'gold',\n                shape: styleShape.value ? styleShape.value : 'rect',\n                height: styleSize && styleSize.value ? styleSizes[styleSize.value] : 48,\n                label: styleLabel.value ? styleLabel.value : 'checkout',\n                layout: styleLayout.value ? styleLayout.value : 'vertical'\n            };\n            if (paypalButton && paypalButton.value === 'Yes') {\n                setTimeout(()=>{\n                    if (paypalButtonQid && paypalButtonQid.value) {\n                        const selector = `.form-line#id_${paypalButtonQid.value} .paypal-submit-button-wrapper`;\n                        const submitButtonWrapper = document.querySelector(selector);\n                        if (submitButtonWrapper) {\n                            submitButtonWrapper.style.pointerEvents = 'none';\n                            try {\n                                this.clearPaymentButtons();\n                            } catch (err) {\n                                console.error(err);\n                            }\n                            /* eslint-disable */ window.paypalCheckoutSDK.Buttons({\n                                createOrder: onAuthorize,\n                                style\n                            }).render(selector);\n                            /* eslint-enable */ returnButton = /*#__PURE__*/ _jsx(\"div\", {});\n                        }\n                    } else {\n                        const key = String(Math.random());\n                        const PayPalButton = window.paypalCheckoutSDK.Buttons.driver('react', {\n                            React,\n                            ReactDOM\n                        });\n                        try {\n                            this.clearPaymentButtons();\n                        } catch (err) {\n                            console.error(err);\n                        }\n                        returnButton = /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"paypal-smart-payment-buttons-wrapper\",\n                            style: {\n                                pointerEvents: 'none'\n                            },\n                            children: /*#__PURE__*/ _jsx(PayPalButton, {\n                                createOrder: onAuthorize,\n                                style: style\n                            }, key)\n                        });\n                    }\n                }, 0);\n            } else {\n                const key = String(Math.random());\n                const PayPalButtonDOM = window.paypalCheckoutSDK.Buttons.driver('react', {\n                    React,\n                    ReactDOM\n                });\n                try {\n                    this.clearPaymentButtons();\n                } catch (err) {\n                    console.error(err);\n                }\n                returnButton = /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"paypal-smart-payment-buttons-wrapper\",\n                    style: {\n                        pointerEvents: 'none'\n                    },\n                    children: /*#__PURE__*/ _jsx(PayPalButtonDOM, {\n                        createOrder: onAuthorize,\n                        style: style\n                    }, key)\n                });\n            }\n            return returnButton;\n        }\n        if (this.props.clientID.value || this.props.merchantId.value) {\n            return /*#__PURE__*/ _jsx(\"div\", {\n                className: \"paypal-smart-payment-buttons-wrapper\",\n                \"data-merchantid\": this.props.merchantId && this.props.merchantId.value,\n                \"data-paypal-button\": this.props.paypalButton ? this.props.paypalButton.value : 'No',\n                \"data-paypal-button-qid\": this.props.paypalButtonQid ? this.props.paypalButtonQid.value : '',\n                \"data-clientid\": this.props.clientID ? this.props.clientID.value : '',\n                \"data-environment\": this.props.environment.value ? this.props.environment.value : 'production',\n                \"data-currency\": this.props.currency.value ? this.props.currency.value : 'USD',\n                \"data-style-color\": this.props.styleColor.value ? this.props.styleColor.value : 'gold',\n                \"data-style-shape\": this.props.styleShape.value ? this.props.styleShape.value : 'rect',\n                \"data-style-size\": this.props.styleSize.value ? this.props.styleSize.value : 'medium',\n                \"data-style-label\": this.props.styleLabel.value ? this.props.styleLabel.value : 'checkout',\n                \"data-style-layout\": this.props.styleLayout.value ? this.props.styleLayout.value : 'vertical',\n                \"data-funding-credit\": this.props.fundingCredit.value ? this.props.fundingCredit.value : 'default',\n                \"data-funding-card\": this.props.fundingCard.value ? this.props.fundingCard.value : 'default',\n                \"data-funding-elv\": this.props.fundingElv.value ? this.props.fundingElv.value : 'default',\n                children: \"loading smart payment buttons...\"\n            });\n        }\n    }\n    render() {\n        let isLoggedIn = false;\n        if (this.props.clientID.value || this.props.merchantId.value) {\n            isLoggedIn = true;\n        }\n        const className = addValidation(classNames.textbox, this.props);\n        let rndNumber = 0;\n        if (this.state.scriptLoaded) {\n            rndNumber = Math.random();\n        }\n        return /*#__PURE__*/ _jsxs(Fragment, {\n            children: [\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"text\",\n                    name: \"cc_paypalSPB_orderID\",\n                    id: \"cc_paypalSPB_orderID\",\n                    className: className,\n                    readOnly: true,\n                    \"aria-label\": \"PayPal Checkout Buttons\".locale(),\n                    tabIndex: \"-1\",\n                    style: {\n                        opacity: 0,\n                        zIndex: '-1',\n                        pointerEvents: 'none',\n                        position: 'absolute',\n                        width: 0,\n                        height: 0,\n                        left: '-400px',\n                        top: '-400px',\n                        padding: 0,\n                        border: 'none',\n                        margin: 0\n                    }\n                }),\n                /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"text\",\n                    name: \"cc_paypalSPB_payerID\",\n                    id: \"cc_paypalSPB_payerID\",\n                    className: className,\n                    readOnly: true,\n                    \"aria-label\": \"PayPal Checkout Buttons\".locale(),\n                    tabIndex: \"-1\",\n                    style: {\n                        opacity: 0,\n                        zIndex: '-1',\n                        pointerEvents: 'none',\n                        position: 'absolute',\n                        width: 0,\n                        height: 0,\n                        left: '-400px',\n                        top: '-400px',\n                        padding: 0,\n                        border: 'none',\n                        margin: 0\n                    }\n                }),\n                isLoggedIn && /*#__PURE__*/ _jsx(\"hr\", {}),\n                typeof window !== 'undefined' && this.renderSmartButtons.call(this, 'builder'),\n                typeof window === 'undefined' && this.renderSmartButtons.call(this, 'form'),\n                /*#__PURE__*/ _createElement(PaypalMessages, _object_spread_props(_object_spread({}, this.props), {\n                    key: rndNumber,\n                    loadPaypalSPBScript: this.loadPaypalScript,\n                    showMessage: {\n                        value: 'Yes'\n                    }\n                })),\n                /*#__PURE__*/ _jsx(\"div\", {\n                    className: \"complete-payment-prompt\",\n                    style: {\n                        display: 'none'\n                    },\n                    children: \"The payment is ready! It will be completed once you submit the form.\"\n                })\n            ]\n        });\n    }\n    constructor(props){\n        super(props);\n        this.state = {};\n        this.loadPaypalScript = this.loadPaypalScript.bind(this);\n    }\n}\nexport { PaypalSmartPaymentButtons as default };\nPaypalSmartPaymentButtons.propTypes = {\n    styleColor: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleLayout: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleShape: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleSize: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    currency: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    clientID: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    environment: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    fundingCard: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    fundingCredit: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    fundingElv: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    merchantId: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    paypalButton: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    paypalButtonQid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    payLaterEnabled: PropTypes.shape({\n        value: PropTypes.string\n    })\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport OptionsBase from '../helpers/OptionsBase';\nconst Radio = (props)=>/*#__PURE__*/ _jsx(OptionsBase, _object_spread_props(_object_spread({}, props), {\n        type: \"control_radio\"\n    }));\nRadio.getScript = (prop)=>{\n    if (prop.shuffle && prop.shuffle.value === 'Yes') {\n        return `      JotForm.shuffleOptions(\"${prop.id.value}\");\\n`;\n    }\n    return '';\n};\nexport default Radio;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { ariaLabelledBy, getCurrentTime, addZeros, subLabel } from '@jotforminc/form-common';\nimport { addValidation, classNames, subLabelSingle } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport SubLabel from '../helpers/SubLabel';\nimport Time2 from './Timev2';\nclass Time extends Component {\n    getTimeOptions(cur, defaultTime, range = false, ampmFormat) {\n        const displayTime = defaultTime !== 'none';\n        const hourOptions = [];\n        const hour = range ? cur.hourRange : cur.hour;\n        for(let i = cur.start; i <= cur.limit; i++){\n            const hourSelected = displayTime && i === parseInt(hour, 10) ? 'selected' : null;\n            hourOptions.push(/*#__PURE__*/ _jsx(\"option\", {\n                selected: hourSelected,\n                value: i,\n                children: ampmFormat ? i : addZeros(i, 2)\n            }, range ? `range_hour_${i}` : `hour_${i}`));\n        }\n        const minOptions = [];\n        // const min = range ? cur.minRange : cur.min;\n        for(let i = 0; i < 60; i += Number(cur.step)){\n            const selected = displayTime && i === parseInt(cur.min, 10) ? 'selected' : null;\n            minOptions.push(/*#__PURE__*/ _jsx(\"option\", {\n                selected: selected,\n                value: addZeros(i, 2),\n                children: addZeros(i, 2)\n            }, range ? `range_min_${i}` : `min_${i}`));\n        }\n        const amPm = [];\n        const currentAmPm = range ? cur.currentAmpmRange : cur.currentAmpm;\n        if (!this.props.showDayPeriods || this.props.showDayPeriods.value !== 'pmOnly') {\n            const selected = currentAmPm === 'AM' ? 'selected' : null;\n            amPm.push(/*#__PURE__*/ _jsx(\"option\", {\n                selected: selected,\n                value: \"AM\",\n                children: 'AM'.locale()\n            }, range ? 'range_am' : 'am'));\n        }\n        if (!this.props.showDayPeriods || this.props.showDayPeriods.value !== 'amOnly') {\n            const selected = currentAmPm === 'PM' ? 'selected' : null;\n            amPm.push(/*#__PURE__*/ _jsx(\"option\", {\n                selected: selected,\n                value: \"PM\",\n                children: 'PM'.locale()\n            }, range ? 'range_pm' : 'pm'));\n        }\n        return {\n            hourOptions: hourOptions,\n            minOptions: minOptions,\n            amPm: amPm\n        };\n    }\n    render() {\n        if (this.props.themeVersion && this.props.themeVersion === 'v2') {\n            return /*#__PURE__*/ _jsx(Time2, _object_spread({}, this.props));\n        }\n        // const date = new Date();\n        // const hour = date.getHours();\n        // const min = date.getMinutes();\n        // manipulate prop ?\n        const disabled = this.props.readonly && this.props.readonly.value === 'Yes' ? ' disabled' : '';\n        const showTimeDiff = this.props.timeDiff && this.props.timeDiff.value === 'Yes';\n        const rangeVal = this.props.range && this.props.range.value === 'Yes';\n        const hourSubLabel = subLabel(this.props, 'hour', this.props.id.value);\n        const minSubLabel = subLabel(this.props, 'minutes', this.props.id.value);\n        const ampmSubLabel = subLabelSingle({\n            subLabel: {\n                value: 'AM/PM Option'\n            }\n        }, 'ampm', this.props.id.value);\n        // const until = this.props.until;\n        const ampmFormat = this.props.timeFormat && this.props.timeFormat.value === 'AM/PM';\n        const defaultTime = this.props.defaultTime.value;\n        // if(defaultTime === 'Yes') { defaultTime = 'current'; }\n        // else if(defaultTime === 'No') { defaultTime = 'none'; }\n        const defaultClassName = defaultTime === 'current' ? 'currentTime ' : '';\n        let cur;\n        if (this.props.defaultTime.value.indexOf('custom_') > -1) {\n            let toCustomHour = false;\n            let toCustomMinute = false;\n            let fromD = this.props.defaultTime.value.split('custom_')[1];\n            if (fromD.indexOf('-') > -1) {\n                const range = fromD.split('-');\n                const to = range[1];\n                fromD = range[0];\n                const toSplit = to.split(':');\n                toCustomHour = toSplit[0];\n                toCustomMinute = toSplit[1];\n            }\n            cur = getCurrentTime(this.props, fromD.split(':')[0], fromD.split(':')[1], toCustomHour, toCustomMinute);\n        } else {\n            cur = getCurrentTime(this.props);\n        }\n        const rangeMarkup = [];\n        const untilSpan = this.props.inlineEditClass ? /*#__PURE__*/ React.createElement(this.props.inlineEditClass, {\n            id: this.props.id.value,\n            propPath: 'until',\n            text: this.props.until ? this.props.until.value : 'until',\n            defaultValue: this.props.until ? this.props.until.value : 'until',\n            placeholder: 'Type a range indicator.'\n        }) : this.props.until && this.props.until.value || 'until';\n        if (rangeVal) {\n            rangeMarkup.push(/*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                propPath: 'sublabels.until',\n                wrapAlways: true,\n                editable: false,\n                for: `until_${this.props.id.value}`,\n                labelValue: \"until\",\n                containerClasses: \"until-wrapper\",\n                hidePartLabelA11Y: true,\n                key: \"until_range\"\n            }), /*#__PURE__*/ _jsxs(\"div\", {\n                id: `until_${this.props.id.value}`,\n                className: 'until-text',\n                children: [\n                    \" \",\n                    untilSpan\n                ]\n            })));\n            const hrRangeSubLabel = subLabel(this.props, 'hourRange', this.props.id.value);\n            rangeMarkup.push(/*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                labelValue: hrRangeSubLabel,\n                propPath: 'sublabels.hourRange',\n                defaultValue: QuestionProps[this.props.type.value].sublabels.value.hourRange,\n                link: /*#__PURE__*/ _jsx(\"span\", {\n                    className: \"date-separate\",\n                    children: \" :\"\n                }),\n                for: `${this.props.qid.value}_hourSelectRange`,\n                key: \"hour_range\"\n            }), /*#__PURE__*/ _jsxs(\"select\", {\n                disabled: disabled,\n                readOnly: this.props.inlineEditClass,\n                className: `time-dropdown ${addValidation(classNames.dropdown, this.props)}`,\n                id: `input_${this.props.id.value}_hourSelectRange`,\n                name: `${this.props.qname.value}[hourSelectRange]`,\n                \"data-component\": \"time-hour-range\",\n                required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                \"aria-labelledby\": ariaLabelledBy(this.props, hrRangeSubLabel),\n                children: [\n                    /*#__PURE__*/ _jsx(\"option\", {}),\n                    this.getTimeOptions(cur, defaultTime, true, ampmFormat).hourOptions\n                ]\n            })));\n            const minRangeSubLabel = subLabel(this.props, 'minutesRange', this.props.id.value);\n            rangeMarkup.push(/*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                labelValue: minRangeSubLabel,\n                propPath: 'sublabels.minutesRange',\n                defaultValue: QuestionProps[this.props.type.value].sublabels.value.minutesRange,\n                for: `${this.props.qid.value}_minuteSelectRange`,\n                key: \"minute_range\"\n            }), /*#__PURE__*/ _jsxs(\"select\", {\n                disabled: disabled,\n                className: `time-dropdown ${addValidation(classNames.dropdown, this.props)}`,\n                id: `input_${this.props.id.value}_minuteSelectRange`,\n                name: `${this.props.qname.value}[minuteSelectRange]`,\n                \"data-component\": \"time-minute-range\",\n                required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                \"aria-labelledby\": ariaLabelledBy(this.props, minRangeSubLabel),\n                children: [\n                    /*#__PURE__*/ _jsx(\"option\", {}),\n                    this.getTimeOptions(cur, defaultTime, true).minOptions\n                ]\n            })));\n            const ampmRangeSubLabel = subLabelSingle({\n                subLabel: {\n                    value: 'AM/PM Option'\n                }\n            }, 'ampmRange', this.props.id.value);\n            if (ampmFormat) {\n                rangeMarkup.push(/*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    wrapAlways: true,\n                    editable: false,\n                    for: `${this.props.qid.value}_ampmRange`,\n                    labelValue: ampmRangeSubLabel,\n                    hidePartLabelA11Y: true,\n                    key: \"ampm_range\"\n                }), /*#__PURE__*/ _jsx(\"select\", {\n                    disabled: disabled,\n                    className: `time-dropdown ${addValidation(classNames.dropdown, this.props)}`,\n                    id: `input_${this.props.id.value}_ampmRange`,\n                    name: `${this.props.qname.value}[ampmRange]`,\n                    \"data-component\": \"time-ampm-range\",\n                    required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                    \"aria-labelledby\": ariaLabelledBy(this.props, ampmRangeSubLabel),\n                    children: this.getTimeOptions(cur, defaultTime, true).amPm\n                })));\n            }\n        }\n        return /*#__PURE__*/ _jsxs(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            children: [\n                /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    labelValue: hourSubLabel,\n                    propPath: 'sublabels.hour',\n                    defaultValue: QuestionProps[this.props.type.value].sublabels.value.hour,\n                    link: /*#__PURE__*/ _jsx(\"span\", {\n                        className: \"date-separate\",\n                        children: \" :\"\n                    }),\n                    for: `${this.props.qid.value}_hourSelect`,\n                    key: \"hour\"\n                }), /*#__PURE__*/ _jsxs(\"select\", {\n                    disabled: disabled,\n                    className: `${defaultClassName}time-dropdown ${addValidation(classNames.dropdown, this.props, 'time')}`,\n                    id: `input_${this.props.id.value}_hourSelect`,\n                    name: `${this.props.qname.value}[hourSelect]`,\n                    \"data-component\": \"time-hour\",\n                    required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                    \"aria-labelledby\": ariaLabelledBy(this.props, hourSubLabel),\n                    children: [\n                        /*#__PURE__*/ _jsx(\"option\", {}),\n                        this.getTimeOptions(cur, defaultTime, false, ampmFormat).hourOptions\n                    ]\n                })),\n                /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    labelValue: minSubLabel,\n                    propPath: 'sublabels.minutes',\n                    defaultValue: QuestionProps[this.props.type.value].sublabels.value.minutes,\n                    for: `${this.props.qid.value}_minuteSelect`,\n                    key: \"minute\"\n                }), /*#__PURE__*/ _jsxs(\"select\", {\n                    disabled: disabled,\n                    className: `time-dropdown ${addValidation(classNames.dropdown, this.props)}`,\n                    id: `input_${this.props.id.value}_minuteSelect`,\n                    name: `${this.props.qname.value}[minuteSelect]`,\n                    \"data-component\": \"time-minute\",\n                    required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                    \"aria-labelledby\": ariaLabelledBy(this.props, minSubLabel),\n                    children: [\n                        /*#__PURE__*/ _jsx(\"option\", {}),\n                        this.getTimeOptions(cur, defaultTime).minOptions\n                    ]\n                })),\n                ampmFormat ? /*#__PURE__*/ _createElement(SubLabel, _object_spread_props(_object_spread({}, this.props), {\n                    wrapAlways: true,\n                    editable: false,\n                    for: `${this.props.qid.value}_ampm`,\n                    labelValue: ampmSubLabel,\n                    hidePartLabelA11Y: true,\n                    key: \"ampm\"\n                }), /*#__PURE__*/ _jsx(\"select\", {\n                    disabled: disabled,\n                    className: `time-dropdown ${addValidation(classNames.dropdown, this.props)}`,\n                    id: `input_${this.props.id.value}_ampm`,\n                    name: `${this.props.qname.value}[ampm]`,\n                    \"data-component\": \"time-ampm\",\n                    required: this.props.required && this.props.required.value === 'Yes' ? true : null,\n                    \"aria-labelledby\": ariaLabelledBy(this.props, ampmSubLabel),\n                    children: this.getTimeOptions(cur, defaultTime).amPm\n                })) : null,\n                rangeMarkup,\n                showTimeDiff ? /*#__PURE__*/ _jsx(\"input\", {\n                    type: \"hidden\",\n                    id: `duration_${this.props.id.value}_ampmRange`,\n                    name: `${this.props.qname.value}[timeRangeDuration]`,\n                    value: \"\"\n                }) : null,\n                !ampmFormat && showTimeDiff ? /*#__PURE__*/ _jsx(SubLabel, {\n                    labelValue: subLabel(this.props, ''),\n                    wrapAlways: true,\n                    editable: false,\n                    for: `input_${this.props.id.value}_dummy`,\n                    children: /*#__PURE__*/ _jsx(\"span\", {\n                        id: `input_${this.props.id.value}_dummy`,\n                        children: \" \"\n                    })\n                }) : null\n            ]\n        });\n    }\n}\nexport { Time as default };\nTime.getScript = (props)=>{\n    let script = '';\n    const id = props.id.value;\n    if (props.range && props.range.value === 'Yes' && props.timeDiff && props.timeDiff.value === 'Yes') {\n        script += `      JotForm.displayTimeRangeDuration(${id});\\n`;\n    }\n    const fixAmPm = props.timeFormat && props.timeFormat.value === 'AM/PM' && props.showDayPeriods && props.showDayPeriods.value === 'both' && props.defaultTime && props.defaultTime.value === 'none';\n    if (!props.inlineEditClass && props.defaultTime && (props.defaultTime.value === 'current' || fixAmPm)) {\n        if (props.themeVersion && props.themeVersion === 'v2') {\n            script += `      JotForm.displayLocalTime(\"input_${id}_hourSelect\", \"input_${id}_minuteSelect\",\"input_${id}_ampm\", \"input_${id}_timeInput\", ${fixAmPm});\\n`;\n        } else {\n            script += `      JotForm.displayLocalTime(\"input_${id}_hourSelect\", \"input_${id}_minuteSelect\",\"input_${id}_ampm\", null, ${fixAmPm});\\n`;\n        }\n    }\n    return script;\n};\nTime.getState = ()=>{\n    return {};\n};\nTime.propTypes = {\n    qid: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    id: PropTypes.shape({\n        value: PropTypes.oneOfType([\n            PropTypes.string,\n            PropTypes.number\n        ])\n    }),\n    qname: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    text: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    type: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    required: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    range: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    timeFormat: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showDayPeriods: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    defaultTime: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    step: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    description: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    timeDiff: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    until: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    subLabels: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    readonly: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    inlineEditClass: PropTypes.elementType,\n    themeVersion: PropTypes.string\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React, { Component } from 'react';\nimport OptionsBase from '../helpers/OptionsBase';\nclass ImageChoice extends Component {\n    render() {\n        return /*#__PURE__*/ _jsx(OptionsBase, _object_spread_props(_object_spread({}, this.props), {\n            type: \"control_imagechoice\"\n        }));\n    }\n}\nImageChoice.getScript = (prop)=>{\n    if (prop.shuffle && prop.shuffle.value === 'Yes') {\n        return `      JotForm.shuffleOptions(\"${prop.id.value}\");\\n`;\n    }\n    return '';\n};\nexport default ImageChoice;\n","/* global document window */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport PaymentCreditCardAndAddress from './PaymentCreditCardAndAddress';\nimport PaypalMessages from './PaypalMessages';\nconst styleSizes = {\n    small: 25,\n    medium: 48,\n    large: 55\n};\nclass PaypalCommercePlatform extends Component {\n    componentDidMount() {\n        this.loadPaypalSPBScript(false);\n    }\n    componentWillReceiveProps(nextProps) {\n        const checkArr = [\n            'merchantId',\n            'sandbox',\n            'currency',\n            'authOnly',\n            'payLaterEnabled'\n        ];\n        if (this.checkProps.call(this, checkArr, nextProps)) {\n            this.loadPaypalSPBScript(nextProps);\n        }\n    }\n    shouldComponentUpdate(nextProps, nextState) {\n        const checkArr = [\n            'merchantId',\n            'sandbox',\n            'currency',\n            'showSPB',\n            'showCardFields',\n            'authOnly',\n            'paymentType',\n            'styleColor',\n            'styleLabel',\n            'styleLayout',\n            'styleShape',\n            'styleSize',\n            'payLaterEnabled',\n            'payLaterLayout',\n            'payLaterLogoType',\n            'payLaterLogoPosition',\n            'payLaterTextColor',\n            'payLaterTextSize',\n            'payLaterBackgroundColor',\n            'payLaterRatio',\n            'nameAPM'\n        ];\n        if (this.checkProps.call(this, checkArr, nextProps)) {\n            return true;\n        }\n        if (JSON.stringify(this.state) !== JSON.stringify(nextState)) {\n            return true;\n        }\n        return false;\n    }\n    componentWillUnmount() {\n        try {\n            if (global.paypalSDK) {\n                global.paypalSDK.__internal_destroy__();\n            }\n        } catch (error) {\n            global.console.error('Error occured on PayPal', error);\n        }\n    }\n    checkProps(checkArr, nextProps) {\n        const isChanged = [];\n        checkArr.forEach((prop)=>{\n            if (!this.props[prop] && nextProps[prop] || this.props[prop] && nextProps[prop].value !== this.props[prop].value) {\n                isChanged.push(true);\n            } else {\n                isChanged.push(false);\n            }\n        });\n        return isChanged.find((p)=>p === true);\n    }\n    paypalSwitchHandler(event) {\n        const pmType = event.target.getAttribute('data-id') ? event.target.getAttribute('data-id') : event.target.parentNode.getAttribute('data-id');\n        this.setState({\n            paymentMethodType: pmType\n        });\n    }\n    loadPaypalSPBScript(nextProps) {\n        let { sandbox, merchantId, currency, authOnly, payLaterEnabled } = this.props;\n        if (global.paypalSDK) {\n            global.paypalSDK.__internal_destroy__();\n        }\n        // Load the script again by next props.\n        if (nextProps) {\n            merchantId = nextProps.merchantId;\n            sandbox = nextProps.sandbox;\n            currency = nextProps.currency;\n            authOnly = nextProps.authOnly;\n            payLaterEnabled = nextProps.payLaterEnabled;\n        }\n        const clientId = sandbox && sandbox.value === 'enabled' ? 'AbO4nZJsmfTgf8GbpnV-AY4382evohAYeDcuwqoAvvrKDDN_qOYa3K5biPFub70U40iPcpl0wtwkkMp2' : 'Afo1LVZtoaCSq5HI_naZpUMjB2C0_OiB6nNHlGaNe7jwBTunPXnbodmCr4ZTtpL3WT-4RkNG6DQFvX03';\n        const isVenmo = this.props.nameAPM && this.props.nameAPM.value && this.props.nameAPM.value === 'Venmo';\n        // disable list for Venmo\n        const disabledAPMList = [\n            'sofort',\n            'sepa',\n            'p24',\n            'mybank',\n            'mercadopago',\n            'ideal',\n            'giropay',\n            'eps',\n            'blik',\n            'bancontact',\n            'credit'\n        ];\n        const disableParam = isVenmo ? `,${disabledAPMList.join(',')}` : '';\n        const options = `\n      components=${payLaterEnabled && payLaterEnabled.value === 'Yes' ? 'buttons,messages' : 'buttons'}\n      &client-id=${clientId}\n      &commit=true\n      &intent=${authOnly && authOnly.value === 'Yes' ? 'authorize' : 'capture'}\n      ${merchantId && merchantId.value ? `&merchant-id=${merchantId.value}` : ''}\n      ${currency && currency.value ? `&currency=${currency.value}` : ''}\n      &disable-funding=card${disableParam}\n      &enable-funding=venmo\n    `;\n        // Remove loaded scripts.\n        const addedPaypalScript = document.querySelector('.paypalScript');\n        if (addedPaypalScript) addedPaypalScript.remove();\n        const script = document.createElement('script');\n        script.src = `https://www.paypal.com/sdk/js?${options.replace(/\\s/g, '')}`;\n        script.async = true;\n        script.className = 'paypalScript';\n        script.setAttribute('data-namespace', 'paypalSDK');\n        document.body.appendChild(script);\n        script.onload = ()=>{\n            this.setState({\n                scriptLoaded: true\n            }, ()=>{\n                this.setState({\n                    scriptLoaded: false\n                });\n                // Notice:: The dom does not exist in React Virtual DOM.\n                if (payLaterEnabled && payLaterEnabled.value === 'Yes' && typeof window !== 'undefined') {\n                    const iframe = global.document.querySelector('.paypal-paylater-messages iframe');\n                    if (!iframe) {\n                        return;\n                    }\n                    if (iframe.style.opacity === '0' || iframe.style.pointerEvents === 'none') {\n                        iframe.style.setProperty('opacity', '1', 'important');\n                        iframe.style.setProperty('pointer-events', 'unset', 'important');\n                    }\n                }\n            });\n        };\n    }\n    renderPaypalSPB() {\n        try {\n            const { styleColor, styleLabel, styleLayout, styleShape, styleSize } = this.props;\n            if (global.paypalSDK && global.paypalSDK.Buttons) {\n                const onAuthorize = ()=>{\n                    global.alert('Smart payment buttons demo');\n                    return;\n                };\n                const onError = (err)=>{\n                    global.console.error('Error Occurred:', err);\n                    return;\n                };\n                const style = {\n                    color: styleColor && styleColor.value || 'gold',\n                    label: styleLabel && styleLabel.value || 'checkout',\n                    layout: styleLayout && styleLayout.value || 'vertical',\n                    shape: styleShape && styleShape.value || 'rect',\n                    height: styleSize && styleSize.value ? styleSizes[styleSize.value] : 48\n                };\n                const PayPalButton = global.paypalSDK.Buttons.driver('react', {\n                    React,\n                    ReactDOM\n                });\n                if (this.state.scriptLoaded) {\n                    return null;\n                }\n                return /*#__PURE__*/ _jsx(PayPalButton, {\n                    createOrder: onAuthorize,\n                    onError: onError,\n                    style: style\n                }, String(Math.random()));\n            }\n        } catch (err) {\n            console.err('Error Occurred', err);\n        }\n    }\n    render() {\n        let { paymentMethodType } = this.state;\n        const isVenmo = this.props.nameAPM && this.props.nameAPM.value === 'Venmo' ? true : false;\n        const showSPB = this.props.showSPB && this.props.showSPB.value !== 'No' || !this.props.showSPB || isVenmo;\n        const showCardFields = (this.props.showCardFields && this.props.showCardFields.value !== 'No' || !this.props.showCardFields) && !isVenmo;\n        const hideToggleArea = !(showSPB && showCardFields);\n        if (showSPB && !showCardFields) {\n            paymentMethodType = 'paypal-smart-buttons';\n        } else if (!showSPB && showCardFields) {\n            paymentMethodType = 'paypal-card-fields';\n        }\n        let rndNumber = 0;\n        if (this.state.scriptLoaded) {\n            rndNumber = Math.random();\n        }\n        return /*#__PURE__*/ _jsx(\"div\", {\n            \"data-wrapper-react\": \"true\",\n            className: \"paypalcomplete-payment-wrapper\",\n            \"data-sandbox\": this.props.sandbox && this.props.sandbox.value,\n            \"data-currency\": this.props.currency && this.props.currency.value,\n            \"data-merchantid\": this.props.merchantId && this.props.merchantId.value,\n            \"data-billing-address\": this.props.billToAddress && this.props.billToAddress.value,\n            \"data-auth-only\": this.props.authOnly && this.props.authOnly.value,\n            \"data-show-spb\": showSPB,\n            \"data-show-card-fields\": showCardFields,\n            \"data-apm\": this.props.nameAPM && this.props.nameAPM.value,\n            children: /*#__PURE__*/ _jsxs(\"div\", {\n                id: \"paypal-commerce-platform-container\",\n                children: [\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"paypal-toggle-buttons\",\n                        hidden: hideToggleArea,\n                        children: /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"paypal-toggle\",\n                            children: [\n                                /*#__PURE__*/ _jsx(\"div\", {\n                                    id: \"paypal-card-fields\",\n                                    children: /*#__PURE__*/ _jsxs(\"div\", {\n                                        className: \"payment-method-container\",\n                                        \"data-id\": \"paypal-card-fields\",\n                                        onClick: this.paypalSwitchHandler,\n                                        children: [\n                                            /*#__PURE__*/ _jsx(\"input\", {\n                                                className: \"form-radio\",\n                                                type: \"radio\",\n                                                name: \"paypal-payment-method\",\n                                                \"data-id\": \"paypal-card-fields\",\n                                                id: \"paypal-card-fields-input\",\n                                                checked: paymentMethodType === 'paypal-card-fields',\n                                                \"aria-describedby\": `label_${this.props.containerId}`\n                                            }),\n                                            /*#__PURE__*/ _jsxs(\"label\", {\n                                                htmlFor: \"paypal-card-fields-input\",\n                                                children: [\n                                                    /*#__PURE__*/ _jsx(\"span\", {\n                                                        className: \"CC_ico\"\n                                                    }),\n                                                    'Debit or Credit Card'.locale()\n                                                ]\n                                            })\n                                        ]\n                                    })\n                                }),\n                                /*#__PURE__*/ _jsx(\"div\", {\n                                    id: \"paypal-smart-buttons\",\n                                    children: /*#__PURE__*/ _jsxs(\"div\", {\n                                        className: \"payment-method-container\",\n                                        \"data-id\": \"paypal-smart-buttons\",\n                                        onClick: this.paypalSwitchHandler,\n                                        children: [\n                                            /*#__PURE__*/ _jsx(\"input\", {\n                                                className: \"form-radio\",\n                                                type: \"radio\",\n                                                name: \"paypal-payment-method\",\n                                                \"data-id\": \"paypal-smart-buttons\",\n                                                id: \"paypal-smart-buttons-input\",\n                                                checked: paymentMethodType === 'paypal-smart-buttons',\n                                                \"aria-label\": \"Paypal\",\n                                                \"aria-describedby\": `label_${this.props.containerId}`\n                                            }),\n                                            /*#__PURE__*/ _jsx(\"label\", {\n                                                htmlFor: \"paypal-smart-buttons-input\",\n                                                \"aria-hidden\": \"true\"\n                                            })\n                                        ]\n                                    })\n                                })\n                            ]\n                        })\n                    }),\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: `paypal-toggle-content ${hideToggleArea ? 'single-payment-method' : ''}`,\n                        \"render-paypal-type\": paymentMethodType,\n                        children: [\n                            /*#__PURE__*/ _jsxs(\"div\", {\n                                className: \"content-area\",\n                                children: [\n                                    /*#__PURE__*/ _jsx(\"div\", {\n                                        id: \"paypal-credit-card-fields\",\n                                        children: /*#__PURE__*/ _jsx(PaymentCreditCardAndAddress, _object_spread_props(_object_spread({}, this.props), {\n                                            controlPaymentType: \"control_paypalcomplete\"\n                                        }))\n                                    }),\n                                    /*#__PURE__*/ _jsxs(\"div\", {\n                                        id: \"paypal-spb-area\",\n                                        children: [\n                                            /*#__PURE__*/ _jsx(\"p\", {\n                                                dangerouslySetInnerHTML: {\n                                                    __html: 'Please click one of the PayPal options to complete payment and <b>submit</b> the form.'.locale()\n                                                }\n                                            }),\n                                            /*#__PURE__*/ _jsx(\"div\", {\n                                                id: \"paypal-button-container\",\n                                                style: {\n                                                    pointerEvents: typeof window !== 'undefined' ? 'none' : ''\n                                                },\n                                                children: global.paypalSDK && global.paypalSDK.Buttons && this.renderPaypalSPB()\n                                            })\n                                        ]\n                                    })\n                                ]\n                            }),\n                            /*#__PURE__*/ _createElement(PaypalMessages, _object_spread_props(_object_spread({}, this.props), {\n                                showMessage: {\n                                    value: paymentMethodType !== 'paypal-card-fields' ? 'Yes' : 'No'\n                                },\n                                key: rndNumber,\n                                loadPaypalSPBScript: this.loadPaypalSPBScript\n                            }))\n                        ]\n                    })\n                ]\n            })\n        });\n    }\n    constructor(props){\n        super(props);\n        this.loadPaypalSPBScript = this.loadPaypalSPBScript.bind(this);\n        this.renderPaypalSPB = this.renderPaypalSPB.bind(this);\n        this.paypalSwitchHandler = this.paypalSwitchHandler.bind(this);\n        this.state = {\n            paymentMethodType: '',\n            scriptLoaded: false\n        };\n    }\n}\nexport { PaypalCommercePlatform as default };\nPaypalCommercePlatform.propTypes = {\n    currency: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    paymentType: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    sandbox: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    merchantId: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    billToAddress: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    authOnly: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showSPB: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    showCardFields: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleColor: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleLabel: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleLayout: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleShape: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleHeight: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    styleSize: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    payLaterEnabled: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    nameAPM: PropTypes.shape({\n        value: PropTypes.string\n    }),\n    containerId: PropTypes.string\n};\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string } from 'prop-types';\nimport classNames from 'classnames';\nimport Styled from 'styled-components';\nconst StyledSVG = Styled.svg`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ${({ size = '70px' })=>size};\n  height: ${({ size = '70px' })=>size};\n  transform: translate(-50%, -50%);\n  animation: jfLoading-svgRotate 2s linear 0s infinite normal none running;\n  transform-origin: center center 0;\n\n  .jfLoading-svgPath {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    animation: jfLoading-svgPath 1.5s ease-in-out 0s infinite normal none running;\n    stroke-linecap: round;\n  }\n\n  @keyframes jfLoading-svgPath {\n    0% {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35px;\n    }\n    100% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -124px;\n    }\n  }\n\n  @keyframes jfLoading-svgRotate {\n    100% {\n      transform: rotate(360deg) translate(-50%, -50%);\n    }\n  }\n`;\nexport const Loading = (_param)=>{\n    var { className = null, strokeWidth = '2', strokeColor = 'rgba(0,0,0,0.5)' } = _param, props = _object_without_properties(_param, [\n        \"className\",\n        \"strokeWidth\",\n        \"strokeColor\"\n    ]);\n    return /*#__PURE__*/ _jsx(StyledSVG, _object_spread_props(_object_spread({\n        viewBox: \"25 25 50 50\",\n        className: classNames('jfLoading-loader', className)\n    }, props), {\n        children: /*#__PURE__*/ _jsx(\"circle\", {\n            className: \"jfLoading-svgPath\",\n            cx: \"50\",\n            cy: \"50\",\n            r: \"20\",\n            fill: \"none\",\n            strokeWidth: strokeWidth,\n            stroke: strokeColor\n        })\n    }));\n};\nLoading.propTypes = {\n    className: string,\n    strokeColor: string,\n    strokeWidth: string\n};\n","/* eslint-disable max-len */ import Styled from 'styled-components';\nconst onSmallMobile = 'screen and (max-height: 600px)';\nexport const ScPassword = Styled.div`\n  * { box-sizing: border-box; }\n\n  font-size: 16px;\n  max-width: 340px;\n\n  .xcl {\n    &-field-wr {\n      position: relative;\n\n      &.forPassword {\n        .xcl-lbl-err {\n          span { display: block; margin-bottom: 4px; }\n          span:before { display: inline-block; content: '-'; margin-right: 3px; }\n        }\n      }\n    }\n\n    &-togglePass-btn {\n      position: absolute;\n      top: 34px;\n      right: 7px;\n      background: none;\n      border: 0;\n      padding: 0;\n      z-index: 2;\n      border-radius: 0;\n      border: 0;\n      background-color: transparent;\n      color: inherit;\n      text-align: center;\n      height: 30px;\n      width: 32px;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid transparent;\n      transition: all .2s;\n\n      #signupPage & {\n        .tiny-mobile & {\n          top: 30px;\n          @media ${onSmallMobile}{\n            top: 25px;\n            right: 1px;\n          }\n        }\n      }\n\n      #myaccount & {\n        .tiny-mobile & {\n          top: 30px;\n          @media ${onSmallMobile}{\n            top: 25px;\n            right: 1px;\n          }\n        }\n      }\n\n      .primaryHeader & {\n        right: 5px;\n        width: 30px;\n        height: 26px;\n      }\n\n      &:focus-visible {\n        outline: none;\n        border-color: #799AF8;\n        box-shadow: 0 0 0 3px #d3ddfd;\n        background-color: #eaf0ff;\n        .xcl-togglePass-icon {\n          svg{\n            path{\n              fill: #2e69ff;\n            }\n          }\n        }\n      }\n\n      &:hover{\n        background-color: #eaf0ff;\n\n        .xcl-togglePass-icon {\n          svg{\n            path{\n              fill: #2e69ff;\n            }\n          }\n\n          .xcl-togglePass-tooltip {\n            opacity: 1;\n            margin-top: -24px;\n          }\n        }\n\n      }\n\n    }\n    &-togglePass-icon { display: block; color: rgb(136, 148, 171); }\n    &-togglePass-icon svg { width: 20px; height:20px; display: block!important; }\n    &-togglePass-tooltip {\n      background-color: #2b3245;\n      font-size: 12px;\n      font-weight: normal;\n      font-stretch: normal;\n      font-style: normal;\n      line-height: 1.33;\n      letter-spacing: normal;\n      text-align: right;\n      color: #c3cad8;\n      white-space: nowrap;\n      position: absolute;\n      right: 3px;\n      top: 0;\n      min-height: 24px;\n      border-radius: 2px;\n      padding: 4px;\n      opacity: 0;\n      pointer-events: none;\n      margin-top: -22px;\n      transition: all .2s;\n      &:after{\n        content: \"\";\n        display: block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        right: 6px;\n        bottom: -6px;\n        z-index: -1;\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='6.1px' viewBox='0 0 12 6.1' style='enable-background:new 0 0 12 6.1;' xml:space='preserve'%3E%3Cpath style='fill:%232B3245' d='M1.6,0.8l3.6,4.8c0.4,0.5,1.2,0.5,1.6,0l3.6-4.8C10.8,0.3,11.4,0,12,0H0C0.6,0,1.2,0.3,1.6,0.8z'/%3E%3C/svg%3E%0A\");\n        background-position: bottom center;\n        background-repeat: no-repeat;\n      }\n    }\n    &-inp {\n      font-size: 16px;\n      display: block;\n      width: 100%;\n      margin-top: 8px;\n      position: relative;\n      background-color: #fff;\n      z-index: 2;\n\n      &::-webkit-credentials-auto-fill-button,\n      &::-webkit-contacts-auto-fill-button {\n        background-color: #8894AB;\n      }\n\n      &.forPassword{\n        padding-right: 44px;\n\n        html[dir=\"rtl\"] & {\n          padding-left: 44px;\n          padding-right: 12px;\n        }\n      }\n\n      &:focus {\n        outline: none;\n        border-color: #799AF8;\n        box-shadow: 0 0 0 3px #d3ddfd;\n      }\n      &::placeholder { color: #b9c5cb; }\n      &.errored { border-color: #D4372C; box-shadow: 0px 0px 0px 3px #F6D7D5; }\n      &.successed { border-color: #4caf50; box-shadow: 0 0 0px 3px #c8e6c9; }\n    }\n\n    &-lbl-err {\n      background-color: #D4372C;\n      color: #fff;\n      display: inline-block;\n      margin-top: 0;\n      font-size: 12px;\n      text-align: left;\n      padding: 0 8px;\n      border-radius: 2px;\n      z-index: 1;\n      line-height: 0;\n      transition: all .2s;\n      overflow: hidden;\n\n      &.isVisible { \n        padding: 4px 8px;\n        margin-top: 8px;\n        line-height: 16px;\n      }\n      &.forTerms { bottom: 5px; border-radius: 0 4px 4px 4px; padding: 4px 8px; }\n    }\n  }\n\n  @keyframes fieldsSmoothEnter {\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .hPass-reqs {\n    color: #0A1551;\n    font-size: .875rem;\n    text-align: left;\n    line-height: 1.5em;\n    margin-bottom: 2em;\n    transition: max-height .3s ease-in-out;\n\n    p { \n      margin: 0.5em 0 1em;\n      color: #333;\n     }\n    ul {\n      margin: 0; padding: 0 0 0 1.25em; list-style-type: disc;\n\n      &.has-icon {\n        padding: 0;\n        list-style-type: none;\n      }\n    }\n    li {\n      opacity: 0;\n      animation: fieldsSmoothEnter .3s ease-in-out forwards;\n      display: flex;\n      align-items: center;\n    }\n    li + li { margin-top: .25em; }\n\n    .hPass-reqs-info-text {\n      display: flex;\n      align-items: center;\n      color: #6C73A8;\n      gap: 0.5rem;\n    }\n\n    .hPass-reqs-info-icon {\n      flex-shrink: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .hPass-req {\n    span {\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 8px;\n\n      html[dir=\"rtl\"] & {\n        margin-left: 8px;\n        margin-right: 0;\n      }\n    }\n\n    &.isGood, &.isBad {\n      svg {\n        fill: #fff;\n        width: 12px;\n        height: 12px;\n      }\n    }\n\n    &.isGood {\n      color: #2B3245;\n      span {\n        background-color: #54B45C;\n      }\n    }\n\n    &.isBad {\n      color: #2B3245;\n      span {\n        background-color: #FB4958;\n      }\n    }\n\n    &.isNeutral {\n      span {\n        background-color: #C8CEED;\n      }\n    }\n  }\n\n  .forgot-password-ui {\n    margin-left: auto;\n    display: block;\n    margin-top: 8px;\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    font-size: 14px;\n    color: #4277FF;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n`;\n","import Styled from 'styled-components';\nexport const ScPieTimerWrapper = Styled.div`\n  display: flex;\n  align-items: center;\n\n  div {\n    margin-right: 6px;\n    html[dir=\"rtl\"] & {\n      margin-right: 0;\n      margin-left: 6px;\n    }\n    #loader {\n      fill: #fff;\n    }\n\n    svg {\n      width: 20px;\n      display: block;\n      border-radius: 50%;\n      border: 2px solid #cfd8dc;\n    }\n  }\n`;\n","/* eslint-disable max-len */ // import React from 'react';\nimport { string, bool, number, oneOf } from 'prop-types';\nimport styled, { css, keyframes } from 'styled-components';\nimport { darken, lighten, rgba } from 'polished';\nimport { OptionGroup } from '@jotforminc/option-group';\nimport { colors } from '../helpers/constants';\nconst onMobile = '@media (max-width: 480px)';\nexport const ButtonUnstyled = styled.button` && {\n  border: none;\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n\n  &,\n  &:focus,\n  &:hover {\n    background-color: transparent;\n  }\n}`;\nexport const MethodList = styled(OptionGroup)`\n  padding: 0;\n  color: ${colors.navy};\n\n  li {\n    & + li {\n      margin: 0;\n    }\n\n    > div {\n      padding: 14px 12px;\n      // margin-left: -8px; // to align radio with text\n      border: 1px solid transparent;\n      font-size: 14px;\n\n      ${onMobile} {\n        padding: 14px 6px;\n      }\n\n      &[data-selected=true] {\n        border-color: #4573E3;\n        border-radius: 4px;\n        background-color: ${rgba('#E9EEFF', 0.4)};\n      }\n    }\n  }\n\n  .o-wrapper {\n    position: relative;\n    padding-left: 102px;\n    height: 50px;\n    margin-left: -6px;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n\n    ${onMobile} {\n      padding-left: 51px;\n    }\n\n    html[dir=\"rtl\"] & {\n      padding-left: 0;\n      padding-right: 102px;\n\n      ${onMobile} {\n        padding-right: 51px;\n      }\n    }\n\n    .o-label,\n    .o-desc {\n      line-height: 1.4;\n    }\n\n    .o-label {\n      font-size: 18px;\n      font-weight: 700;\n\n      ${onMobile} {\n        font-size: 15px;\n      }\n\n      svg {\n        position: absolute;\n        left: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n        max-height: 40px;\n        max-width: 50px;\n        width: 100%;\n        height: 100%;\n\n        ${onMobile} {\n          left: 6px;\n          max-height: 20px;\n          max-width: 20px;\n        }\n\n        html[dir=\"rtl\"] & {\n          left: unset;\n          right: 12px;\n\n          ${onMobile} {\n            right: 6px;\n          }\n        }\n      }\n    }\n\n    .o-desc {\n      font-size: 15px;\n      font-weight: 400;\n\n      ${onMobile} {\n        font-size: 13px;\n      }\n    }\n  }\n`;\nconst rotate = (initial)=>keyframes`\n  from {\n    transform: ${initial} rotate(0deg);\n  }\n\n  to {\n    transform: ${initial} rotate(360deg);\n  }\n`;\nexport const TextCode = styled.input`\n  height: 38px;\n  font-size: 15px;\n  text-align: center;\n  border: 1px solid #C9C8C9;\n  border-radius: 4px;\n  margin-top: 8px;\n\n  ${onMobile} {\n    font-size: 13px;\n  }\n`;\nexport const QRCodeWrapper = styled.div`\n  height: 124px;\n  width: 124px;\n  flex-shrink: 0;\n\n  svg {\n    display: block;\n    height: 100%;\n    width: 100%;\n    opacity: 1;\n    transition: opacity 333ms cubic-bezier(.55,.06,.68,.19);\n  }\n\n  ${({ color, loading })=>loading ? css`\n    position: relative;\n    cursor: wait;\n\n    svg {\n      opacity: 0;\n      pointer-events: none;\n\n      &,\n      &::before {\n        font-size: 0;\n        color: transparent;\n      }\n    }\n\n    &::after {\n      content: '' !important;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 16px;\n      height: 16px;\n      background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.25' stroke='${encodeURIComponent(color)}' stroke-opacity='.5' stroke-width='1.5'/%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath d='M8.27429 7.38462V0H0v16h16V8.53333h-2.6667L8.27429 7.38462z' fill='%23C4C4C4'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Ccircle cx='8' cy='8' r='7.25' stroke='${encodeURIComponent(color)}' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E\");\n      background-repeat: no-repeat;\n      background-position: center;\n      animation: ${rotate(css`translate(-50%,-50%)`)} 1.5s linear infinite;\n      pointer-events: none;\n      z-index: 1;\n    }\n  ` : null}\n`;\nQRCodeWrapper.propTypes = {\n    color: string,\n    loaded: bool\n};\nQRCodeWrapper.defaultProps = {\n    color: '#4277FF',\n    loaded: true\n};\nexport const Image = styled.div`\n  margin-top: 10px;\n  margin-bottom: 12px;\n`;\nexport const Text = styled.div`\n  text-align: ${({ align })=>align};\n\n  &:empty {\n    display: none;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  &,\n  d { color: ${colors.navy} };\n  a,\n  hl {\n    &:not([color]) { color: ${colors.blue}; }\n    &[color='green'] { color: ${colors.green}; }\n    &[color='red'] { color: ${colors.red}; }\n  }\n  b { font-weight: 500; }\n  b2 { font-weight: 700; }\n\n  section {\n    margin-top: 0;\n    margin-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n\n    html[dir=\"rtl\"] & {\n      text-align: right;\n    }\n\n  }\n\n  p {\n    display: inline-block;\n    margin-top: 0;\n    margin-bottom: 8px;\n  }\n\n`;\nText.defaultProps = {\n    align: 'left'\n};\nexport const Heading = styled(Text)`\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 25px;\n  color: ${colors.navy};\n  margin-bottom: 20px;\n`;\nexport const Description = styled(Text)`\n  color: #8D8FA8;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\nexport const Button = styled.button` && {\n  position: relative;\n  height: ${({ height })=>height}px;\n  padding: 0 ${({ type })=>[\n        'naked'\n    ].includes(type) ? 0 : 24}px;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  text-transform: ${({ letterCase })=>letterCase};\n  user-select: none;\n  transition-duration: 300ms;\n  transition-property: color, background-color, border-color;\n  transition-timing-function: ease-in-out;\n\n  border-width: 1px;\n  border-radius: 4px;\n  border-style: solid;\n\n  ${onMobile} {\n    padding: 0 12px;\n  }\n\n  &,\n  &:hover {\n    border-color: ${({ type, color })=>[\n        'naked'\n    ].includes(type) ? 'transparent' : color};\n    background-color: ${({ type, color })=>[\n        'stroke',\n        'naked'\n    ].includes(type) ? 'transparent' : color};\n    background-clip: padding-box;\n  }\n\n  color: ${({ type, color, foregroundColor })=>[\n        'stroke',\n        'naked'\n    ].includes(type) ? color : foregroundColor};\n\n  font-weight: 500;\n  font-size: ${({ fontSize })=>fontSize}px;\n\n  svg {\n    max-height: 20px;\n    width: 16px;\n    height: 16px;\n    margin-right: 8px;\n    margin-left: -${({ type })=>[\n        'naked'\n    ].includes(type) ? 0 : 12}px;\n\n    html[dir=\"rtl\"] & {\n      margin-right: -${({ type })=>[\n        'naked'\n    ].includes(type) ? 0 : 12}px;\n      margin-left: 10px;\n    }\n\n    ${onMobile} {\n      max-height: 16px;\n      width: 16px;\n      margin-left: -${({ type })=>[\n        'naked'\n    ].includes(type) ? 0 : 6}px;\n      margin-right: 5px;\n\n      html[dir=\"rtl\"] & {\n        margin-left: 5px;\n        margin-right: -${({ type })=>[\n        'naked'\n    ].includes(type) ? 0 : 6}px;\n      }\n    }\n  }\n\n  ${({ onClick })=>onClick ? css`\n    cursor: pointer;\n\n    &:hover {\n      color: ${({ type, color, foregroundColor })=>lighten(0.05, [\n            'stroke',\n            'naked'\n        ].includes(type) ? color : foregroundColor)};\n      border-color: ${({ type, color })=>[\n            'naked'\n        ].includes(type) ? 'transparent' : lighten(0.05, color)};\n      background-color: ${({ type, color })=>[\n            'stroke',\n            'naked'\n        ].includes(type) ? 'transparent' : lighten(0.05, color)};\n    }\n\n    &:focus {\n      color: ${({ type, color, foregroundColor })=>darken(0.05, [\n            'stroke',\n            'naked'\n        ].includes(type) ? color : foregroundColor)};\n      border-color: ${({ type, color })=>[\n            'naked'\n        ].includes(type) ? 'transparent' : darken(0.05, color)};\n      background-color: ${({ type, color })=>[\n            'stroke',\n            'naked'\n        ].includes(type) ? 'transparent' : darken(0.05, color)};\n    }\n  ` : null}\n\n  ${({ loading, type, color, foregroundColor })=>loading ? css`\n    color: transparent !important;\n    transition-duration: 0ms !important;\n    cursor: wait;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 16px;\n      height: 16px;\n      background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.25' stroke='${encodeURIComponent([\n        'stroke',\n        'naked'\n    ].includes(type) ? color : foregroundColor)}' stroke-opacity='.5' stroke-width='1.5'/%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath d='M8.27429 7.38462V0H0v16h16V8.53333h-2.6667L8.27429 7.38462z' fill='%23C4C4C4'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Ccircle cx='8' cy='8' r='7.25' stroke='${encodeURIComponent([\n        'stroke',\n        'naked'\n    ].includes(type) ? color : foregroundColor)}' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E\");\n      background-repeat: no-repeat;\n      background-position: center;\n      animation: ${rotate(css`translate(-50%,-50%)`)} 1.5s linear infinite;\n      pointer-events: none;\n      z-index: 1;\n    }\n  ` : null}\n}`;\nButton.propTypes = {\n    color: string,\n    foregroundColor: string,\n    height: number,\n    fontSize: number,\n    letterCase: oneOf([\n        'none',\n        'lowercase',\n        'uppercase',\n        'capitalize'\n    ]),\n    type: oneOf([\n        'stroke',\n        'naked'\n    ])\n};\nButton.defaultProps = {\n    color: '#0099FF',\n    foregroundColor: '#ffffff',\n    height: 36,\n    fontSize: 14,\n    letterCase: 'uppercase',\n    type: null\n};\nexport const Body = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: ${({ align })=>align};\n  justify-content: center;\n  padding: 16px ${({ wide })=>wide ? 64 : 32}px 26px;\n\n  ${onMobile} {\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n\n`;\nBody.defaultProps = {\n    align: 'stretch',\n    wide: null\n};\nexport const Footer = styled.div`\n  display: flex;\n  justify-content: ${({ align })=>align};\n  flex-direction: ${({ reverse })=>reverse ? 'row-reverse' : 'row'};\n  padding: 12px 32px;\n  border-top: 1px solid #EAEBF2;\n  align-self: stretch;\n\n  ${onMobile} {\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n`;\nFooter.propsTypes = {\n    align: string,\n    reverse: bool\n};\nFooter.defaultProps = {\n    align: 'space-between',\n    reverse: false\n};\nexport const Container = styled.div`\n  font-family: 'Circular', sans-serif;\n  font-size: 15px;\n  line-height: 24px;\n  display: flex;\n  flex-direction: column;\n\n  ${({ center })=>center ? css`\n    align-items: center;\n    justify-content: center;\n  ` : null}\n\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  // max-width: 510px;\n\n  ${Body} {\n    // margin: auto 0;\n  }\n\n  ${Footer} {\n    margin-top: auto;\n  }\n`;\nconst MessageContaiener = styled.div`\n  font-family: 'Circular', sans-serif;\n  font-size: 11px;\n  line-height: 1.28;\n  display: flex;\n  flex-direction: column;\n  background-color: ${colors.grey};\n  color: #fff;\n  border-radius: 4px;\n  background-size: 12px;\n  background-position: 6px;\n  text-align: left;\n  background-repeat: no-repeat;\n  padding: 5px 5px 5px 24px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1683 1.6843a6.0016 6.0016 0 011.8315 4.2636 6.0002 6.0002 0 01-8.368 5.565 6.0001 6.0001 0 116.5365-9.8286zm-3.642 3.642v-2.4h-1.2v3.6h1.2v-1.2zm0 3.6v-1.2h-1.2v1.2h1.2z' fill='%23fff'/%3E%3C/svg%3E\");\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  // max-width: 510px;\n`;\nexport const ErrorContainer = styled(MessageContaiener)`\n  background-color: ${colors.red};\n`;\nexport const InfoContainer = styled(MessageContaiener)`\n  background-color: ${colors.blue};\n`;\n","/* eslint-disable max-len */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { number } from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { Button } from '@jotforminc/common-button';\nimport { StyledModal as Modal } from '@jotforminc/styled-modal';\nimport Toggle from '@jotforminc/toggle';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { Button as ButtonSC } from '../components/styled';\nconst borderColor = '#E3E5F5';\nconst descColor = '#2C3345';\nconst primaryIndicatorColor = '#8A94A9';\nconst black = '#000';\nconst settingsBlue = '#0099FF';\nconst infoBlueTextBg = '#F4F7FF';\nconst infoBlueTextColor = '#001D68';\nconst infoOrange = '#F5A51C';\nconst infoOrangeTextBg = '#FFF5D2';\nconst infoOrangeTextColor = '#0A1551';\nexport const ScSettingsWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n\n  *, *::before, *::after {\n    font-family: 'Circular', sans-serif;\n    box-sizing: inherit;\n\n  }\n`;\nexport const ScTooltip = styled.div`\n  pointer-events: none;\n  opacity: 0;\n  max-width: 145px;\n  background-color: #444;\n  color: #fff;\n  font-size: 12px;\n  border-radius: 2px;\n  position: absolute;\n  padding: 6px 12px;\n  top: 25px;\n  left: -4px;\n  transform: translateY(5px);\n  transition: .4s;\n  transition-delay: 250ms;\n  z-index: 9;\n\n  html[dir=\"rtl\"] & {\n    left: unset;\n    right: -4px;\n  }\n\n  :after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 6px;\n    transform: translateY(-100%);\n    border-width: 8px;\n    border-style: solid;\n    border-color: transparent transparent #444 transparent;\n\n    html[dir=\"rtl\"] & {\n      left: unset;\n      right: 6px;\n    }\n  }\n`;\nexport const ScToggleWrapper = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  width: 100%;\n  align-items: center;\n  padding-bottom: 20px;\n  gap: 16px;\n\n\n  p {\n    flex-grow: 1;\n    flex-basis: 60%;\n    margin: 0 0 2px;\n    max-width: 460px;\n    color: ${descColor};\n    font-size: 14px;\n    text-align: left;\n\n    html[dir=\"rtl\"] & {\n      text-align: right;\n    }\n    a {\n      color: #0075E3;\n      text-decoration: underline;\n    }\n  }\n\n  div {\n    flex-shrink: 0;\n  }\n\n  span {\n    width: 100%;\n    font-size: 14px;\n  }\n`;\nexport const ScTooltipV2Wrapper = styled.div`\n  position: relative;\n`;\nexport const ScTooltipV2 = styled((props)=>/*#__PURE__*/ _jsx(Tooltip, _object_spread({}, props)))`\n  width: 190px;\n  text-align: center;\n  \n  &.jfTooltipNew {\n    &.tooltipAttachTop {\n      left: unset;\n    }\n  }\n  [dir='rtl'] & {\n    right: -210px;\n  }\n  @media screen and (max-width: 640px) {\n      right: -100px;\n  }\n`;\nexport const ScToggle = styled((props)=>/*#__PURE__*/ _jsx(Toggle, _object_spread({}, props)))`\n  &:hover {\n    opacity: 1;\n  }\n`;\nexport const ScMethodsWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  h4 {\n    color: ${black};\n    font-size: 14px;\n    margin: 12px 0 0 0;\n    font-weight: 500;\n    border-bottom: 1px solid ${borderColor};\n    padding: 0 0 7px 0;\n  }\n`;\nexport const ScMethodButton = styled(ButtonSC)` && {\n  &,\n  &:hover {\n    display: block;\n    padding: 0 8px;\n    min-width: 84px;\n    \n    ${({ isGenerateNewCodesButton })=>isGenerateNewCodesButton ? css`\n      @media screen and (max-width: 500px) { & {\n        width: 100%;\n      } }\n    ` : null}\n\n    ${({ isPrimary, loading })=>isPrimary && !loading ? css`\n      &,\n      &[disabled],\n      &:disabled {\n        cursor: default;\n    ` : null}\n  }\n}\n}`;\nScMethodButton.propTypes = ButtonSC.propTypes;\nScMethodButton.defaultProps = ButtonSC.defaultProps;\nexport const ScMethodItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-bottom: 1px solid ${borderColor};\n\n  div {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    margin: 8px 0px 8px 0px;\n    width: 100%;\n\n    label {\n      display: flex;\n      flex-direction: column;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      flex-grow: 1;\n      flex-basis: 50%;\n      position: relative;\n\n      input {\n        position: relative;\n        margin-left: 4px;\n        margin-right: 8px;\n        height: 16px;\n        width: 16px;\n\n        html[dir=\"rtl\"] & {\n          margin-right: 4px;\n          margin-left: 8px;\n        }\n\n        &:hover + ${ScTooltip} {\n          opacity: 100;\n        }\n      }\n\n      span {\n        font-size: 12px;\n        font-weight: 500;\n      }\n\n      & + p {\n        font-size: 11px;\n        margin: 0;\n        color: ${primaryIndicatorColor};\n      }\n    }\n  }\n`;\nexport const ScMethodTextWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  span {\n    font-family: 'Circular';\n    font-style: normal;\n    line-height: 24px;\n  }\n`;\nexport const ScMethodItemTitle = styled.span`\n  font-weight: 700 !important;\n  font-size: 16px !important;\n`;\nexport const ScMethodItemDesc = styled.span`\n  font-weight: 400 !important;\n  font-size: 14px !important;\n  color: #6C73A8;\n`;\nexport const ScRecoveryCodesWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  padding-top: 6px;\n  margin: 10px 0 0 0;\n\n  @media screen and (max-width: 500px) { & {\n    flex-direction: column;\n  } }\n\n  div {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 12px;\n    \n    @media screen and (max-width: 500px) { & {\n      margin-bottom: 8px;\n    } }\n  }\n\n  span {\n    border-width: 1px;\n  }\n\n  h4 {\n    color: ${black};\n    font-size: 14px;\n    margin: 0 12px 0 0;\n    font-weight: 500;\n  }\n`;\nexport const ScInfoBox = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  width: 100%;\n  border-radius: 4px;\n\n  &:not(:first-child) {\n    margin-top: 13px;\n  }\n\n  overflow: hidden;\n\n  > div {\n    position: relative;\n    background: ${(props)=>props.mode === 'warning' ? infoOrange : settingsBlue};\n    width: 49px;\n\n    svg {\n      fill: white;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 24px;\n      height: 24px;\n    }\n\n    & + div {\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      align-items: flex-start;\n      justify-content: center;\n      padding: 15px 12px;\n      font-size: ${({ fontSize })=>fontSize}px;\n      background: ${(props)=>props.mode === 'warning' ? infoOrangeTextBg : infoBlueTextBg};\n      color: ${(props)=>props.mode === 'warning' ? infoOrangeTextColor : infoBlueTextColor};\n\n      p {\n        margin: 0;\n        font-family: 'Circular';\n        font-style: normal;\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 24px;\n      }\n    }\n  }\n`;\nScInfoBox.defaultProps = {\n    fontSize: 12\n};\nScInfoBox.propTypes = {\n    fontSize: number\n};\nexport const ScModal = styled((props)=>/*#__PURE__*/ _jsx(Modal, _object_spread({}, props)))``;\nexport const ScButton = styled((props)=>/*#__PURE__*/ _jsx(Button, _object_spread({}, props)))``;\n","import styled, { css } from 'styled-components';\nconst commonForRadioAndCheck = css`\n  width: 16px;\n  height: 16px;\n  display: block;\n  border: 1px solid #a8aab5;\n  margin-right: 6px;\n  cursor: pointer;\n  html[dir=\"rtl\"] & {\n    margin-right: 0;\n    margin-left: 6px;\n  }\n`;\nexport const ScRadio = styled.div`\n  ${commonForRadioAndCheck}\n  border-radius: 50%;\n  transition: all .4s ease;\n`;\nexport const ScCheckbox = styled.div`\n  ${commonForRadioAndCheck}\n  position: relative;\n  border-radius: 2px;\n  transition: all .25s ease;\n\n  &:before, &:after {\n    display: inline-block;\n    content: \"\";\n    position: absolute;\n    border-radius: 2px;\n    background-color: #fff;\n    width: 2px;\n    opacity: 0;\n    transition: all .25s ease;\n  }\n\n  &:before {\n    top: 6px; left: 3px; height: 5px;\n    transform: rotate(-45deg);\n  }\n\n  &:after {\n    top: 2px; left: 7px; height: 10px;\n    transform: rotate(45deg);\n  }\n`;\nexport const ScOptionList = styled.ul`\n  padding: .75em 0 0;\n  margin: 0;\n  list-style: none;\n\n  li + li { margin-top: ${(p)=>{\n    if (p.narrowMargins === true) return '8px';\n    return p.multiline === true ? '1.5em' : '.75em';\n}}; }\n`;\nexport const ScOption = styled.div`\n  cursor: pointer;\n  display: flex;\n  font-size: 1em;\n  line-height: 1.5;\n  align-items: center;\n\n  .optionIcon {\n    color: transparent;\n    width: 28px;\n    height: 28px;\n    margin: 0 18px;\n    margin-left: auto;\n  }\n\n  ${(p)=>p.fillColor && `\n    background: #FFFFFF;\n    border: 1px solid #BCBDD2;\n    box-sizing: border-box;\n    border-radius: 4px;\n\n    .o-label {\n      margin-top: 11px;\n      font-size: 16px;\n    }\n    .o-desc {\n      margin-bottom: 14px;\n      font-size: 15px;\n    }\n\n\n    &[data-selected=true] {\n      .o-label {\n        color: ${p.fillColor};\n      }\n      background: ${p.backgroundColor};\n      border-color: ${p.borderColor};\n    }\n\n    &[data-selected=true] > svg {\n      fill: ${p.fillColor};\n    }\n\n    &[data-selected=true] > svg > circle {\n      fill: ${p.fillColor};\n    }\n  `}\n\n  .o-label { font-weight: ${(p)=>p.multiline === true ? '700' : '400'}; }\n  .o-desc span,\n  .o-label span { font-weight: 700; }\n\n  ${ScRadio}, ${ScCheckbox} { flex-shrink: 0; }\n\n  &[data-disabled=true] {\n    opacity: .5;\n\n    & > ${ScRadio}, ${ScCheckbox} { cursor: not-allowed; }\n  }\n\n  &[data-selected=true] > ${ScRadio} {\n    background-color: #4573e3;\n    border-color: #4573e3;\n    box-shadow: inset 0px 0 0px 3px #dfe8fa;\n  }\n  @media (hover: hover) {\n    &:not([data-selected=true]):not([data-disabled=true]):hover {\n      & > ${ScRadio} {\n        background-color: rgba(68, 115, 227, 0.3);\n        box-shadow: inset 0px 0 0px 3px #fff;\n      }\n\n      & > ${ScCheckbox} {\n        background-color: rgba(68,115,227,0.3);\n        border-color: rgba(68,115,227,0.3);\n        &:before, &:after { opacity: 1; }\n      }\n    }\n  }\n\n  &[data-selected=true] > ${ScCheckbox} {\n    background-color: #4573e3;\n    border-color: #4573e3;\n\n    &:before, &:after { opacity: 1; }\n  }\n\n  &:focus { outline: 0; }\n  &:focus > ${ScRadio} {\n    border-color: #4573e3;\n    box-shadow: 0px 0 0px 5px #dfe8fa;\n  }\n  &[data-selected=true]:focus > ${ScRadio} {\n    box-shadow: inset 0px 0 0px 3px #dfe8fa, 0px 0 0px 5px #dfe8fa;\n  }\n\n  &:focus > ${ScCheckbox} {\n    border-color: #4573e3;\n    box-shadow: 0px 0 0px 5px rgba(68,115,227,0.3);\n  }\n\n  /* With double line, we increase size for radio/text reatio */\n  ${ScRadio} {\n    ${(p)=>p.multiline && `\n      width: 18px;\n      height: 18px;\n      margin-inline-end: 12px;\n    `}\n  }\n`;\n","import Styled from 'styled-components';\nexport const ScPortalItem = Styled.div`\n  font-family: \"Circular\", \"Circular Std\", \"Circular Std Bold\", \"Circular Std Book\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial,\n  sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 9px 0 0;\n  max-width: 100%;\n`;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string } from 'prop-types';\nimport Styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\nimport { portalTitleCommonStyle } from './commonCss';\nconst ScTitleRenderer = Styled.h2`\n  ${portalTitleCommonStyle}\n`;\nconst TitleRenderer = ({ title })=>/*#__PURE__*/ _jsx(ScTitleRenderer, {\n        children: t(title)\n    });\nTitleRenderer.propTypes = {\n    title: string\n};\nTitleRenderer.defaultProps = {\n    title: ''\n};\nexport default TitleRenderer;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport { elementType } from 'prop-types';\nimport { portalDescriptionCommonStyle } from './commonCss';\nconst ScDescriptionRenderer = Styled.p`\n  ${portalDescriptionCommonStyle}\n`;\nconst DescriptionRenderer = ({ children })=>/*#__PURE__*/ _jsx(ScDescriptionRenderer, {\n        children: children\n    });\nDescriptionRenderer.propTypes = {\n    children: elementType.isRequired\n};\nexport default DescriptionRenderer;\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport { propTypes } from '@jotforminc/constants';\nconst ScItemContentRenderer = Styled.div`\n  text-align: left;\n  flex-grow: 1;\n  white-space: nowrap;\n  overflow: hidden;\n`;\nconst ItemContentRenderer = ({ children })=>/*#__PURE__*/ _jsx(ScItemContentRenderer, {\n        children: children\n    });\nItemContentRenderer.propTypes = {\n    children: propTypes.renderable.isRequired\n};\nexport default ItemContentRenderer;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport { string, object } from 'prop-types';\nimport Styled from 'styled-components';\nimport { getIconInformationForPortalItem } from '@jotforminc/search-filter';\nimport { SVGIcon } from '@jotforminc/icon-selector';\nimport { ICON_SIZES } from './constants';\nconst ScIconRenderer = Styled.div`\n  margin: 12px;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  min-height: 32px;\n  border-radius: 4px;\n\n  ${({ backgroundColor })=>backgroundColor ? `background-color: ${backgroundColor};` : ''}\n\n  & > img {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    object-fit: contain;\n  }\n\n  * > img {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px\n    object-fit: contain;\n  }\n\n  * > svg.injected-svg {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    padding: 5px;\n  }\n\n  ${({ iconSize })=>iconSize === ICON_SIZES.SMALL ? `\n    margin: 0 8px 0 0;\n    width: 20px;\n    height: 20px;\n    min-width: 20px;\n    min-height: 20px;\n    border-radius: 4px;\n  ` : ''}\n\n`;\nconst IconRenderer = ({ titleForAlt, icon, iconSize: initialIconSize })=>{\n    const { isSvgIcon, url, iconColor, finalUrl, alt, svgStyleProps, iconSize } = getIconInformationForPortalItem(titleForAlt, icon, initialIconSize);\n    return /*#__PURE__*/ _jsx(ScIconRenderer, _object_spread_props(_object_spread({}, svgStyleProps), {\n        iconSize: iconSize,\n        className: \"itemLogo\",\n        children: isSvgIcon ? /*#__PURE__*/ _jsx(SVGIcon, {\n            url: url,\n            iconColor: iconColor\n        }) : /*#__PURE__*/ _jsx(\"img\", {\n            src: finalUrl,\n            title: alt,\n            alt: alt,\n            onError: (e)=>{\n                e.target.onerror = null;\n                e.target.src = 'https://cdn.jotfor.ms/assets/img/portal/pickerItemFallbackImg.png';\n            }\n        })\n    }));\n};\nIconRenderer.propTypes = {\n    titleForAlt: string,\n    icon: object,\n    iconSize: string\n};\nIconRenderer.defaultProps = {\n    titleForAlt: '',\n    icon: {},\n    iconSize: ICON_SIZES.MEDIUM\n};\nexport default IconRenderer;\n","import { css } from 'styled-components';\nconst portalContentCommonStyle = css`\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\nexport const portalTitleCommonStyle = css`\n  ${portalContentCommonStyle}\n  display: block;\n  max-width: 100%;\n  padding: 0;\n  font-size: 16px;\n\n\n  @media screen and (max-width: 600px) {\n    white-space: normal;\n  }\n`;\nexport const portalDescriptionCommonStyle = css`\n  ${portalContentCommonStyle}\n  font-size: 14px;\n`;\n","import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from 'react';\nimport Styled from 'styled-components';\nimport PortalItem from './PortalItem';\nimport { portalTitleCommonStyle } from './PortalItemDefaults/commonCss';\nimport { ICON_SIZES } from './PortalItemDefaults/constants';\nconst SmallPortalItem = (portalProps)=>{\n    // eslint-disable-next-line react/prop-types\n    const TitleRenderer = ({ title })=>{\n        const ScSmallPortalItem = Styled.div`\n      ${portalTitleCommonStyle}\n      font-size: 15px;\n      font-family: \"Circular\", \"Circular Std Book\", \"Circular Std\", \"Circular Std Bold\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial,\n      sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n    `;\n        return /*#__PURE__*/ _jsx(ScSmallPortalItem, {\n            children: title\n        });\n    };\n    return /*#__PURE__*/ _jsx(PortalItem, _object_spread_props(_object_spread({}, portalProps), {\n        iconSize: ICON_SIZES.SMALL,\n        DescriptionRenderer: ()=>null,\n        TitleRenderer: TitleRenderer\n    }));\n};\nexport default SmallPortalItem;\n","/* eslint-disable max-len */ import Styled, { css } from 'styled-components';\nexport const customFont = '-apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\n// '\"CircularStd\", \"Work Sans SemiBold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\nexport const commonStyles = `\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-family: ${customFont};\n  font-size: 16px;\n`;\nexport const ScBox = Styled.div`\n  box-sizing: border-box;\n  background-color: #fff;\n  border-radius: 4px;\n  margin: auto auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  .wBox-upper {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 50px;\n    height: 79px;\n  }\n\n  > div { flex: 1 1 auto; min-height: 0; }\n\n  @media screen and (max-width: 480px) {\n    border-radius: 0;\n  }\n`;\nexport const ScHeader = Styled.div`\n  @font-face {\n    font-family:\"Circular\";\n    src: local(\"Circular Medium\"), local(\"Circular-Medium\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Medium.woff2\") format(\"woff2\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Medium.woff\") format(\"woff\");\n    font-display:swap;\n    font-style:normal;\n    font-weight: 500;\n  }\n\n  border-bottom: ${(p)=>p.withHeader === true ? '1px solid #eaebf2' : 0};\n  display: flex;\n  align-items: center;\n\n  .header-content {\n    flex: 1 1 auto;\n    padding-left: 20px;\n    .jShareModal-titleText {\n      font-size: 20px;\n      line-height: 24px;\n      font-weight: 500;\n    }\n\n    html[dir=\"rtl\"] & {\n      padding-left: 0;\n      padding-right: 20px;\n    }\n  }\n\n  .header-title {\n    display: flex;\n    align-items: center;\n    font-size: 18px;\n    font-weight: 500;\n    font-family: \"Circular\",Work Sans Medium,-apple-system,Helvetica Neue,sans-serif;\n    line-height: 20px;\n    color: #141E46;\n    height: 20px;\n    margin: 0;\n\n    .avatarHolder {\n      margin-right: 10px;\n      html[dir=\"rtl\"] & {\n        margin-right: 0;\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .close-modal {\n    margin: 18px;\n  }\n  && { flex: 0 0 auto; }\n\n  @media screen and (max-width: 480px) {\n    .header-content { padding-left: 1.5rem; }\n  }\n`;\nexport const ScFooter = Styled.div`\n  border-top: 1px solid #EDEEF5;\n  border-radius: 0 0 4px 4px;\n  background-color: #F8F8FA;\n  min-height: 30px;\n  padding: 12px 25px;\n\n  && { flex: 0 0 auto; }\n\n  @media screen and (max-width: 480px) {\n    padding: 9px 18px;\n  }\n`;\nexport const ScOverlay = Styled.div`\n  * { box-sizing: border-box; }\n  ${commonStyles};\n  font-family: \"Circular\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif;\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 7002;\n  background-color: rgba(37, 45, 91, 0.7);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  div[data-uikit-modal-container] {\n    max-width: ${(p)=>p.maxWidth ? p.maxWidth : 630}px;\n  }\n  &.templateModal {\n    div[data-uikit-modal-container] {\n      max-width: 1440px;\n      max-height: unset;\n      height: 96%;\n    }\n    [data-sc=\"picker-body\"] {\n      max-height: unset;\n    }\n    [data-sc=\"footer\"] {\n      display: none;\n    }\n  }\n\n  &.forWizard {\n    div[data-uikit-modal-container] {\n      max-width: 860px;\n      min-height: 0;\n    }\n    .header-content {\n      padding-left: 24px;\n    }\n    .jfTabs-tabs-button {\n      color: #8D8FA8;\n      border-bottom: 1px solid #EAEBF2;\n      &[data-isactive=true] {\n        color: #5e74e6;\n      }\n      &:after {\n        background-color: #5e74e6;\n      }\n    }\n  }\n\n  &.contactsDeleteModal {\n    .title {\n      margin: 24px 0 12px 0;\n    }\n    .content {\n      padding-bottom: 32px;\n      p {\n        max-width: 450px;\n        width: 100%;\n        background-color: #F3F3FE;\n        border-radius: 4px;\n        padding: 24px 32px;\n        color: #0A1551;\n        .contactNames {\n          font-weight: 500;\n        }\n      }\n      .subtitle {\n        color: #8D8FA8;\n        font-weight: 400;\n        .undone {\n          font-weight: 500;\n        }\n      }\n    }\n  }\n\n  :not(:last-child) {\n    display: none;\n  }\n\n  .forShareModal-assignee div[data-uikitgeneratedportalcontainer=true] {\n    position: absolute;\n\n    & > div {\n      position: relative !important;\n    }\n  }\n\n  & > div {\n    ${(p)=>p.isFullScreen ? css`\n      width: 100%;\n      height: 100%;\n    ` : css`\n      width: 96%;\n      max-width: 770px;\n      max-height: 80vh;\n      // min-height: 424px;\n    `};\n    display: flex;\n  }\n\n  ${(p)=>p.isFullScreen && css`\n    ${ScBox} { border-radius: 0; }\n  `};\n\n  @media screen and (max-width: 480px), (max-height: 480px) {\n    overflow: auto;\n    display: block;\n    &.is2FAModal {\n      display: flex;\n      height: auto !important; \n    }\n\n    & > div {\n      max-height: none;\n      height: 100svh;\n      width: 100%;\n      margin: 0;\n      max-width: none;\n    }\n  }\n\n  @media screen and (max-width: 480px) and (max-height: 380px) {\n    & > div {\n      height: calc(100vh + 88px);\n    }\n  }\n\n  @media screen and (max-height: 414px) and (orientation: landscape) {\n    & > div {\n      height: unset;\n    }\n  }\n`;\n","/* eslint-disable max-len */ import { _ as _object_spread } from \"@swc/helpers/_/_object_spread\";\nimport { _ as _object_spread_props } from \"@swc/helpers/_/_object_spread_props\";\nimport { _ as _object_without_properties } from \"@swc/helpers/_/_object_without_properties\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { forwardRef } from 'react';\nimport Styled from 'styled-components';\nimport { string, bool, func } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { IconLockFilled } from '@jotforminc/svg-icons';\nexport const ScToggle = Styled.div`\n  ${(props)=>props.squareMode ? `\n    padding: 0 8px;\n    border-radius: 4px;\n    height: 35px;\n    background-color: #56687B;\n    display: inline-flex;\n    align-items: center;` : `\n    width: 48px;\n    height: 24px;\n    border-radius: 12px;\n    background-color: #a0a1b2;`}\n  position: relative;\n  cursor: pointer;\n\n  &:after, &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    border-radius: ${(props)=>props.squareMode ? '4px' : '50%'};\n    box-sizing: border-box;\n  }\n\n  &:after {\n    ${(props)=>props.squareMode ? `\n      width: 22px;\n      height: 22px;\n      top: 6px;\n      left: 8px;\n      border: 1px solid #a3aebb;\n      background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.353 1.742v16.91M7 1.742v16.91m5.647-16.91v16.91' stroke='%23C4CED9' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='square'/%3E%3C/svg%3E\");\n      background-size: 10px;\n      background-repeat: no-repeat;\n      background-position: center;\n      html[dir=\"rtl\"] & {\n        left: 0;\n        right: 8px;\n      }\n      ` : `\n      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.11);\n      width: 28px;\n      height: 28px;\n      top: -2px;\n      left: -2px;\n      border: 1px solid #f4f4f6;\n      html[dir=\"rtl\"] & {\n        left: 0;\n        right: -2px;\n      }\n      `}\n    background-color: #fff;\n    z-index: 1;\n  }\n\n  /* for loading */\n\n  @keyframes spinz { to { transform: rotate(360deg); } }\n  @keyframes appearz { to { opacity: 1; } }\n\n  &.isLoading:before {\n    ${(props)=>props.squareMode ? `\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      background-color: rgba(255, 255, 255, .8);\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' display='block' preserveAspectRatio='xMidYMid' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%237b7f88' stroke-dasharray='164.93361431346415 56.97787143782138' stroke-width='10'%3E%3CanimateTransform attributeName='transform' dur='1s' keyTimes='0;1' repeatCount='indefinite' type='rotate' values='0 50 50;360 50 50'/%3E%3C/circle%3E%3C/svg%3E\");\n      background-size: 10px;\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: 20px;` : `\n      opacity: 0;\n      width: 26px;\n      height: 26px;\n      top: -1px;\n      left: -1px;\n      border-width: 3px;\n      border-style: solid;\n      border-color: #a0a1b2 #a0a1b2 #a0a1b2 transparent;\n      animation: spinz 1s cubic-bezier(0.49, 0.95, 0.46, 0.08) infinite forwards, appearz .15s 1 forwards .15s;`}\n    z-index: 2;\n  }\n\n  &, &:after, &:before { transition: all .25s ease; }\n`;\nconst ScToggleText = Styled.div`\n  font-size: 15px;\n  font-weight: 500;\n  color: #fff;\n  opacity: 0;\n  transition: opacity .25s ease;\n  user-select: none;\n  line-height: 1rem;\n\n  &:fist-child { opacity: 0; }\n  &:last-child { opacity: 1; }\n  & + & {\n    margin-left: 8px;\n    html[dir=\"rtl\"] & {\n      margin-left: 0;\n      margin-right: 8px;\n    }\n  }\n`;\nconst ScDefaultSizeText = Styled.span`\n    opacity: 0;\n    font-size: 15px;\n    font-weight: 500;\n    max-width: 27px;\n`;\nconst ScToggleIcon = Styled.div`\n  display: flex;\n  align-items: center;\n  position: relative;\n  user-select: none;\n\n  & + & {\n    margin-left: 8px;\n    html[dir=\"rtl\"] & {\n      margin-left: 0;\n      margin-right: 8px;\n    }\n  }\n\n  // somehow storybook requires svg with/height styling\n  & > svg {\n    opacity: .5;\n    color: #fff;\n    width: 18px;\n    height: 18px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  &:first-of-type > svg { left: 4px; }\n  &:last-of-type > svg { right: 4px; }\n\n  & > span {\n    opacity: 0;\n    font-size: 15px;\n    font-weight: 500;\n  }\n`;\nconst ScLine = Styled.button`\n  border-width: 0;\n  display: flex;\n  font-size: 1em;\n  line-height: 1.5;\n  background-color: transparent;\n  padding: 0;\n  margin: 0;\n\n  .t-content { flex: 1 1 0; }\n  .t-label { color: #0A1551; font-weight: ${(p)=>p.multiline === true ? '700' : '400'}; ${(p)=>p.isTitleUppercase === true ? 'text-transform: uppercase' : ''}; }\n  .t-desc { font-size: .875em; font-weight: 400; color: #6C73A8; }\n  .t-desc span,\n  .t-label span { font-weight: 700; }\n\n\n  &[data-disabled=true] {\n    opacity: .5;\n  }\n\n  /* selected */\n  &[data-selected=true] > ${ScToggle} {\n    background-color: ${({ branding21 })=>branding21 ? '#0099FF' : '#4277ff'};\n\n    ${ScToggleText}:first-child { opacity: 1; }\n    ${ScToggleText}:last-child { opacity: 0; }\n\n    &:after {\n      ${(props)=>props.squareMode ? `\n        left: calc(100% - 30px);` : `\n        transform: translateX(25px);`}\n      html[dir=\"rtl\"] & {\n        ${(props)=>props.squareMode ? `\n          left: 0;\n          right: calc(100% - 30px);` : `\n          transform: translateX(-25px);`}\n      }\n    }\n    ${(props)=>!props.squareMode && '&.isLoading:before { margin-left: 25px; }'}\n  }\n\n  /* mixed-value */\n  &[data-mixed=true] > ${ScToggle} {\n    background-color: #7b7f88;\n    ${ScToggleText}:first-child { opacity: 0;}\n    ${ScToggleText}:last-child { opacity: 0;}\n\n    &:after {\n      ${(props)=>props.squareMode ? `\n        left: 50%;\n        transform: translate(-50%);` : ''}\n    }\n  }\n\n  /* hover */\n  &:not([data-selected=true]):not([data-disabled=true]):hover > ${ScToggle} {\n  }\n\n  /* focus */\n  &:focus { outline: 0; }\n  &:focus > ${ScToggle} {\n  }\n`;\nconst Toggle = /*#__PURE__*/ forwardRef((_param, ref)=>{\n    var { text, value, desc, isSelected, onClick, isLoading, isMultiLine, isTitleUppercase, onFieldError, squareMode, onText, offText, isMixed, readOnly, ariaLabel, noTextMode } = _param, props = _object_without_properties(_param, [\n        \"text\",\n        \"value\",\n        \"desc\",\n        \"isSelected\",\n        \"onClick\",\n        \"isLoading\",\n        \"isMultiLine\",\n        \"isTitleUppercase\",\n        \"onFieldError\",\n        \"squareMode\",\n        \"onText\",\n        \"offText\",\n        \"isMixed\",\n        \"readOnly\",\n        \"ariaLabel\",\n        \"noTextMode\"\n    ]);\n    const handleOnClick = (e)=>{\n        if (readOnly) return;\n        onClick(e);\n    };\n    const branding21 = true;\n    return /*#__PURE__*/ _jsxs(ScLine, _object_spread_props(_object_spread({\n        type: \"button\",\n        onClick: handleOnClick,\n        \"data-value\": value,\n        \"data-selected\": isSelected,\n        multiline: isMultiLine,\n        isTitleUppercase: isTitleUppercase,\n        squareMode: squareMode,\n        tabIndex: 0,\n        \"data-mixed\": isMixed,\n        ref: ref,\n        branding21: branding21\n    }, props), {\n        ariaLabel: t(ariaLabel),\n        children: [\n            (text || desc) && /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"t-content\",\n                children: [\n                    text && /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"t-label\",\n                        children: text\n                    }),\n                    desc && /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"t-desc\",\n                        children: desc\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsxs(ScToggle, {\n                className: `toggle ${isLoading ? 'isLoading' : ''}`,\n                squareMode: squareMode,\n                children: [\n                    squareMode && !readOnly && /*#__PURE__*/ _jsxs(_Fragment, {\n                        children: [\n                            /*#__PURE__*/ _jsx(ScToggleText, {\n                                children: t(onText)\n                            }),\n                            /*#__PURE__*/ _jsx(ScToggleText, {\n                                children: t(offText)\n                            })\n                        ]\n                    }),\n                    squareMode && readOnly && /*#__PURE__*/ _jsxs(_Fragment, {\n                        children: [\n                            /*#__PURE__*/ _jsxs(ScToggleIcon, {\n                                children: [\n                                    noTextMode ? /*#__PURE__*/ _jsx(ScDefaultSizeText, {\n                                        children: t(onText)\n                                    }) : /*#__PURE__*/ _jsx(\"span\", {\n                                        children: t(onText)\n                                    }),\n                                    /*#__PURE__*/ _jsx(IconLockFilled, {})\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsxs(ScToggleIcon, {\n                                children: [\n                                    noTextMode ? /*#__PURE__*/ _jsx(ScDefaultSizeText, {\n                                        children: t(offText)\n                                    }) : /*#__PURE__*/ _jsx(\"span\", {\n                                        children: t(offText)\n                                    }),\n                                    /*#__PURE__*/ _jsx(IconLockFilled, {})\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            })\n        ]\n    }));\n});\nToggle.propTypes = {\n    text: string,\n    value: string,\n    desc: string,\n    isLoading: bool,\n    isSelected: bool,\n    isMultiLine: bool,\n    isTitleUppercase: bool,\n    onClick: func,\n    onFieldError: func,\n    squareMode: bool,\n    isMixed: bool,\n    readOnly: bool,\n    offText: string,\n    onText: string,\n    ariaLabel: string,\n    noTextMode: bool\n};\nToggle.defaultProps = {\n    text: '',\n    value: '',\n    desc: '',\n    isLoading: false,\n    isSelected: false,\n    isMultiLine: false,\n    isTitleUppercase: true,\n    onClick: (f)=>f,\n    onFieldError: (f)=>f,\n    squareMode: false,\n    offText: 'OFF',\n    onText: 'ON',\n    isMixed: false,\n    readOnly: false,\n    ariaLabel: 'toggle button',\n    noTextMode: false\n};\nexport default Toggle;\n","function _define_property(obj, key, value) {\n    if (key in obj) {\n        Object.defineProperty(obj, key, {\n            value: value,\n            enumerable: true,\n            configurable: true,\n            writable: true\n        });\n    } else {\n        obj[key] = value;\n    }\n    return obj;\n}\nfunction _object_spread(target) {\n    for(var i = 1; i < arguments.length; i++){\n        var source = arguments[i] != null ? arguments[i] : {};\n        var ownKeys = Object.keys(source);\n        if (typeof Object.getOwnPropertySymbols === \"function\") {\n            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {\n                return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n            }));\n        }\n        ownKeys.forEach(function(key) {\n            _define_property(target, key, source[key]);\n        });\n    }\n    return target;\n}\nfunction _object_without_properties(source, excluded) {\n    if (source == null) return {};\n    var target = _object_without_properties_loose(source, excluded);\n    var key, i;\n    if (Object.getOwnPropertySymbols) {\n        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n        for(i = 0; i < sourceSymbolKeys.length; i++){\n            key = sourceSymbolKeys[i];\n            if (excluded.indexOf(key) >= 0) continue;\n            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n            target[key] = source[key];\n        }\n    }\n    return target;\n}\nfunction _object_without_properties_loose(source, excluded) {\n    if (source == null) return {};\n    var target = {};\n    var sourceKeys = Object.keys(source);\n    var key, i;\n    for(i = 0; i < sourceKeys.length; i++){\n        key = sourceKeys[i];\n        if (excluded.indexOf(key) >= 0) continue;\n        target[key] = source[key];\n    }\n    return target;\n}\nimport { getEnv, isHIPAA, isEU, getActiveApp, getRevision } from '@jotforminc/router-bridge';\nimport trackingList from '@jotforminc/tracking-config';\nimport FullStoryManager from './FullStoryManager';\nimport SentryManager from './SentryManager';\nclass TrackingManager {\n    enableSentry(config, forceEnable = false) {\n        if (forceEnable || getEnv() === 'PRODUCTION' && !isHIPAA() && !isEU()) {\n            try {\n                var _trackingList_activeApp;\n                const activeApp = getActiveApp();\n                const doesSentryNameExist = (_trackingList_activeApp = trackingList[activeApp]) === null || _trackingList_activeApp === void 0 ? void 0 : _trackingList_activeApp.sentry.name;\n                this.sentry = new SentryManager(_object_spread({}, config, doesSentryNameExist && {\n                    release: `${getRevision()}`\n                }));\n                if (this.FS) {\n                    this.sentry.enableFSPlugin(this.FS);\n                }\n            } catch (error) {\n                console.log('Failed to initialize Sentry !');\n            }\n        }\n    }\n    enableFS(userVars = null) {\n        if (getEnv() === 'PRODUCTION' && !isHIPAA() && !isEU()) {\n            try {\n                if (!this.FSisInitialized()) {\n                    this.FS = new FullStoryManager({\n                        orgId: 'K1ZZ',\n                        debug: false\n                    });\n                }\n                if (userVars) {\n                    this.setUserVars(userVars);\n                }\n                if (this.sentry) {\n                    this.sentry.enableFSPlugin(this.FS);\n                }\n            } catch (error) {\n                console.log('Failed to initialize Fullstory !');\n            }\n        }\n    }\n    enableErrorTracking(appName, forceEnable = false, extraConfigs = {}) {\n        var _trackingList_appName, _trackingList_appName1;\n        const configs = {\n            sentry: _object_spread({}, trackingList === null || trackingList === void 0 ? void 0 : (_trackingList_appName = trackingList[appName]) === null || _trackingList_appName === void 0 ? void 0 : _trackingList_appName.sentry, extraConfigs === null || extraConfigs === void 0 ? void 0 : extraConfigs.sentry),\n            fullStory: _object_spread({}, trackingList === null || trackingList === void 0 ? void 0 : (_trackingList_appName1 = trackingList[appName]) === null || _trackingList_appName1 === void 0 ? void 0 : _trackingList_appName1.fullStory, extraConfigs === null || extraConfigs === void 0 ? void 0 : extraConfigs.fullStory)\n        };\n        if (!Object.keys(configs.sentry || {}).length && !Object.keys(configs.fullStory || {}).length) {\n            console.log(`Error tracking config couldn't found for ${appName}`);\n            return;\n        }\n        // eslint-disable-next-line no-restricted-syntax, guard-for-in\n        for(const _ref in configs){\n            let trackingType = _ref;\n            if (trackingType !== 'sentry' && trackingType !== 'fullStory') {\n                continue;\n            }\n            const config = configs[trackingType];\n            if (config === undefined) continue;\n            const { enable } = config, rest = _object_without_properties(config, [\n                \"enable\"\n            ]);\n            if (enable) {\n                if (!this.initTypes[trackingType]) {\n                    console.error(`Tracking type ${trackingType} couldn't found`);\n                    return;\n                }\n                this.initTypes[trackingType](_object_spread({}, rest), forceEnable);\n            }\n        }\n    }\n    captureException(error, extras) {\n        if (this.sentry) {\n            var _this_sentry;\n            (_this_sentry = this.sentry) === null || _this_sentry === void 0 ? void 0 : _this_sentry.captureException(error, extras);\n        } else if (error instanceof Error) {\n            console.log(`Sentry not initialized! \\nIf it's initialized, it would capture exception for ${error}\\nStack:${error.stack}`);\n        } else {\n            console.log(`Sentry not initialized! \\nIf it's initialized, it would capture exception for ${error}`);\n        }\n    }\n    captureMessage(message, extras) {\n        if (this.sentry) {\n            var _this_sentry;\n            (_this_sentry = this.sentry) === null || _this_sentry === void 0 ? void 0 : _this_sentry.captureMessage(message, extras);\n        } else {\n            console.log(`Sentry not initialized! \\nIf it's initialized, it would capture message for ${message}`);\n        }\n    }\n    configureScope(callback) {\n        var _this_sentry;\n        (_this_sentry = this.sentry) === null || _this_sentry === void 0 ? void 0 : _this_sentry.configureScope(callback);\n    }\n    captureEvent(event, hint) {\n        var _this_sentry;\n        (_this_sentry = this.sentry) === null || _this_sentry === void 0 ? void 0 : _this_sentry.captureEvent(event, hint);\n    }\n    createReduxEnhancer(enhanceOptions) {\n        var _this_sentry;\n        return (_this_sentry = this.sentry) === null || _this_sentry === void 0 ? void 0 : _this_sentry.createReduxEnhancer(enhanceOptions);\n    }\n    setUserVars(userVars) {\n        var _this_FS;\n        (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.setUserVars(userVars);\n    }\n    FSisInitialized() {\n        var _this_FS;\n        return (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.isInitialized();\n    }\n    event(eventName, eventProperties) {\n        var _this_FS;\n        (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.event(eventName, eventProperties);\n    }\n    getCurrentSessionURL() {\n        var _this_FS;\n        return (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.getCurrentSessionURL();\n    }\n    identify(uid, customVars) {\n        var _this_FS;\n        (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.identify(uid, customVars);\n    }\n    shutdown() {\n        var _this_FS;\n        (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.shutdown();\n    }\n    restart() {\n        var _this_FS;\n        (_this_FS = this.FS) === null || _this_FS === void 0 ? void 0 : _this_FS.restart();\n    }\n    constructor(){\n        _define_property(this, \"sentry\", void 0);\n        _define_property(this, \"sentryOptions\", void 0);\n        _define_property(this, \"FS\", void 0);\n        _define_property(this, \"fullstoryOptions\", void 0);\n        _define_property(this, \"initTypes\", {\n            sentry: (config, forceEnable)=>this.enableSentry(_object_spread({}, config), forceEnable),\n            fullStory: ()=>this.enableFS()\n        });\n    }\n}\nexport default TrackingManager;\n"],"names":[],"mappings":";AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC0BA;;;;;;;;;;;;;;AClCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACuCA;;AChDA;;;;ACEA;ACCA;AAGA;AAGA;ACTA;;ACAA;AAEA;AACA;;AAGA;;ACXA;;;ACMA;;AAGA;;;;;;;ACGA;AAEA;AACA;;;AAGA;;;;;;;AAQA;AC5BA;AACA;AACA;;;;ACIA;;;;;;ACKA;;;;;AAMA;;;;AAKA;AAEA;;;;;;AAMA;;;;;;;;;;AAWA;;;ACpCA;;AAEA;;;ACFA;AACA;;;ACFA;AACA;AAEA;;;;;AAKA;ACJA;;;;;;;AAOA;AACA;;;ACXA;AACA;;;;;;;;ACEA;;;;;;;;;AAUA;ACbA;AACA;;AAGA;;;;;AAMA;;AAGA;;;ACTA;;AAGA;;;;ACNA;;;;AAKA;;AAGA;;;;;ACVA;;;;;;;ACeA;;;AAGA;AAEA;;AAEA;;AAGA;;AAEA;AAEA;;;;;AAMA;AAGA;AAGA;;;;AAMA;AACA;AACA;;;;;;AAOA;AACA;AACA;;;AAIA;;;AAGA;;;;;;AAOA;;;AAGA;;;;;;;AAQA;;AAEA;;;;;;;AAQA;;AAEA;;;;;ACtFA;;;AAIA;;;;;;ACTA;;;;ACJA;;;;AAKA;;;;;;;;AASA;;;;;;;;;;AAWA;;ACvBA;;;;;;;ACEA;;;;;AAMA;;;AAIA;;;AAIA;;;AAIA;;;AAIA;;AAGA;;;;AAKA;;AAGA;;;AAIA;;AAGA;;AAGA;;;;;;AAOA;;;;;;;;AASA;;;;;;;AAQA;;AAGA;;AAGA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAMA;AACA;;;;;AAMA;;;;AAKA;;;AAIA;;;;;;AAOA;;;;;;;AAQA;;;;;;AAOA;;;;;;;;;AAUA;;;;;;;;;;AAWA;;;;;;AAOA;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACtLA;AACA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC4IA;;;;;;;AC/KA;;;ACTA;;;AAIA;;;;;;;;;;;AAYA;;;;AAKA;;;;;;;;;;AAWA;AACA;AAEA;;;;AAIA;;;AAGA;;;;;;;;;;;;;;;AAgBA;;;AAIA;;AAEA;;;;;;;;;AAUA;;;;AAKA;;;;;;;;;;;;;;;;;;AAkBA;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;AAGA;;;;;;;;;;;;;;AAeA;;;;;;;AAOA;;;;;AClKA;;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA;;;;;;;;;;AAWA;;AAGA;;;;;;;;;;;;;;;;;;;AAmBA;;;AAGA;;;;;AAKA;;;;;AAKA;AACA;AACA;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC9GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgbA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwfA;AC/8BA;AACA;AACA;AACA;;AAGA;;;;AAIA;;;AAGA;ACqMA;AACA;ACxKA;AAGA;AACA;;;AAGA;AACA;;AAEA;AAEA;AAEA;AAMA;AACA;AACA;AACA;AAEA;;;;;;;;;;;ACnDA;;;;;;;;AAUA;;;;;;;AAOA;;AAEA;;AAEA;;;;;;;;;;;;AAYA;;;;AAIA;;;AAGA;;;;;;;;AC1CA;;;;;;;;;;;;;;;;;;;;;AAqBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AC7CA;AACA;AACA;AACA;AACA;;AAeA;;;AAGA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4IA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IA;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwwBA;;;;;;ACzmCA;;;;;;;;;;;;;;;;;;;;;;;ACkBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;ACzDA;AACA;AACA;AACA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA;;;;;;;;;;;;;;;;;;ACrIA;;;;;;AAOA;;;;;;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;;AC1aA;;;;AAKA;AACA;;;;;;;;;;;;;;;;;;;AAoBA;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;AAIA;;;AAGA;;;AAIA;;;;;;;;;;AAeA;;;;;;;;;AASA;;AAEA;;;AAOA;;;;;;;;;;;AAWA;;AAEA;;;;AAIA;;;AAGA;AACA;;AAMA;;AAGA;;AAEA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzFA;;;;;;;;AASA;;;;AC9CA;;;;;;;AAOA;;;;AAIA;;;;;;;AAOA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC4CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYA;;;;;;;;;;;;;;;;;;;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA;;;ACpHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/FA;;;;;;;AAQA;AACA;;;;;;AAMA;;;;;;;;;;;;;;;;;;AC9DA;;;;;;;;;;;;;;;;;;;ACKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;ACrDA;AACA;AACA;AACA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;;;;;;;;ACRA;;;;;;;AAQA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC0BA;ACkDA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC3JA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA;;;;;;;;AASA;;;;;;AC7CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACuBA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACyHA;;;;ACrJA;;;ACDA;;;;;;;;;;;;;;;;;AAkBA;;;;ACZA;ACQA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgFA;ACrFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AClBA;;;;;;;;;;;;;AAaA;;;;;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;ACDA;;;;AAKA;;;;;;;AAQA;;AAEA;AACA;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;AAGA;;;;;;;;AASA;;;;;AAKA;;AAEA;;;;AAKA;;;;;;;;;;;;;;;;;;;;;AAqBA;;AAEA;;;AAIA;;;;AAIA;;;;;AAKA;;;;;;;AAOA;;;;;AAKA;;;;AAIA;AC6yBA;;;;;;AC37BA;;;;;;;;AAQA;AACA;;AAEA;;;AAGA;AACA;AACA;;AAEA;AAEA;;AAEA;ACKA;AAAA;AAAA;AAqBA;;AC9BA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;;AAEA;AACA;;;;;;AAMA;AACA;AACA;;AAEA;AACA;;;;;;;AAOA;;;;;;;AAOA;;;;;;;;;AAcA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;;;;;;;;;;AC7FA;AACA;AACA;AACA;;;AAGA;;;;;;;;AAQA;AACA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;AACA;AACA;;;;;;;;;;;;;AAaA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA;;;;;ACnIA;AACA;AACA;;;;AAIA;;;;;AAKA;;;;;;AAMA;;;;AAIA;AACA;AACA;;;;;;;;AAQA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC5BA;;AAGA;AACA;AACA;;;;AAIA;;AAGA;AACA;;;;AAIA;;;;;;;AC5BA;;;;;;AAMA;;;;;;;;;;;;;;;;AAgBA;;;;;;;AAOA;;AAEA;;AAEA;;;;;;;;;AC1BA;;;;;;AAOA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC5BA;;;;;AAMA;;;;;;;;;;;;;;ACDA;;;;;;;;;;;;;;;;ACNA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC4BA;;;;;;;;;AC3BA;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACeA;;;;;;;AC7CA;;;;;;AAMA;;;;;;;;;;;;;;;;AAgBA;;;;;;;AAOA;;AAEA;;AAEA;;;;;;;AChCA;;AAEA;;;;AAIA;;;;;;;;AAQA;;;;;AAKA;;;;;;AAMA;ACfA;AACA;ACrBA;;;;;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8IA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC4LA;;;;;;;;;;ACtMA;AC9FA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AC6DA;AAAA;AAAA;AAAA;AAAA;;;AC5HA;AACA;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC+HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA;ACktCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAqCA;AACA;AACA;AACA;AACA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAkBA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA4CA;AACA;AACA;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA6BA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AC9mDA;AACA;ACsCA;AACA;AACA;AACA;AAAA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AC9EA;ACkBA;AACA;ACgMA;AAGA;AAMA;ACzLA;AC2fA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACo9BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AA2jCA;AACA;AACA;AAAA;AACA;AACA;AAEA;AAGA;AAWA;AAGA;AAIA;AAAA;AAIA;AAoDA;ACvpFA;AC8BA;AACA;AACA;AACA;AACA;AACA;ACyBA;ACnBA;AACA;ACrEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC/CA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACxBA;AC2MA;AAIA;AC6OA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAGA;AAKA;AAEA;AAKA;AC1PA;AC3IA;AAAA;ACEA;ACsLA;AC/CA;AACA;AACA;AACA;ACvLA;ACk8BA;AAEA;AAIA;ACz5BA;ACweA;AAGA;ACzeA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AClGA;ACiRA;AAKA;AAEA;ACpRA;ACyGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;ACnHA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;;;;;;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqPA;;;;;;;;;;;;;;;;;;;;;ACtRA;;;;;;;;;;;ACJA;;AAGA;;;;;;;;;;;;;AAaA;;;;;;;AAOA;;;;;;;;;;;;;;AAcA;;;;;;;;AAQA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;;;AAcA;;;;;;;;;;AAUA;;;;;;;;;;;AAWA;;;;;AAKA;;AAGA;;;;AAIA;;AAEA;;;;;;;;AASA;;;AAGA;;;;;;;;;;;;;AAcA;;;;;;;;;;;;;;;;;;;;;;;AAuBA;;;AAGA;;;;AAIA;AACA;;;AAYA;AAEA;;;;;;;;;;;AAWA;;;AAGA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;AAuBA;;;;AAQA;;AAEA;;;;;;;;AASA;;AAGA;AACA;;;;AAMA;;;;;;;;;;AAUA;;;;;;AAMA;AAGA;;;;AAOA;;;AAMA;;;;;;;AAOA;;;AAKA;;;;AAMA;;;AAGA;;;;;AAOA;;;;;AAOA;;;;AAIA;AAIA;AAGA;;;;AAOA;AAIA;AAGA;;AAKA;;AAEA;;;;;;;;;;;;;AAaA;;;AASA;;;;AAIA;AACA;;;AA4BA;;AAEA;;AAEA;;;;;AAKA;;AAOA;AACA;;;;;AAKA;;;;AAIA;;;;;;;AAgBA;;;AAGA;;;;;;;AAOA;;;;AAIA;;;AAGA;;;;;;AAOA;;;;;;;;;;;;;AAaA;AAEA;AACA;AAEA;AACA;;;;;;;;;;;ACzdA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;;;AAqBA;;AAGA;;;;;;;;;;;;;;;AAgBA;;;;AAKA;;;;;AAMA;;;;AAIA;;;AAGA;;;;;;;AAQA;;;;AAIA;;AAEA;;;;;AAKA;;;AAGA;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;;;;;;;;;;;;;AAaA;;;;AAIA;;;;;;;;;AAUA;;;AAIA;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;;;;AAKA;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;;AAoBA;AACA;AACA;;;;;;;;;;;;AAYA;;;;;;;;;;;ACtTA;AAEA;;;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;AAMA;AAIA;;;;;;;;;;;;;;;AAgBA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;;;AAIA;;;;;AAKA;;;AAGA;;;;;;;AAOA;;;;;AAKA;;;;;;;;AAQA;;;;;;;;AAQA;;;;AAIA;;;;AAIA;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;AC3JA;ACFA;AACA;ACFA;AACA;;;;;ACEA;;;;;;;;ACQA;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;AC3CA;AAEA;;;;;;;;;;AAUA;AAEA;;AAEA;ACVA;;;;AAIA;ACZA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA;;;;;;;;;;;;AAaA;;AAGA;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA;;;AAGA;;;;;AAKA;;;;AAIA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;ACxOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AAQA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAKA;;;;;;;;;;;;;;;;;;AAmBA;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;;;;;;;;;;AAWA;;;;;;;;;;;AAWA;AACA;;AAEA;AACA;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;AAIA;;AAEA;AACA;;;AAGA;AACA;AACA;;;;;AAKA;;;;;AAKA;;AAEA;ACnFA;AAAA;AAEA;AAQA"}