pixel-react 1.9.8 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/Accordion/types.d.ts +10 -2
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AppHeader/types.d.ts +1 -1
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/IconRadialChart/types.d.ts +4 -3
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -2
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +14 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.d.ts +1 -1
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/StatusCard/types.d.ts +1 -1
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/TableTree/types.d.ts +2 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +23 -10
- package/lib/index.esm.js +1287 -1064
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1287 -1064
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +32 -11
- package/src/assets/Themes/BlueTheme.scss +3 -0
- package/src/assets/Themes/DarkTheme.scss +32 -13
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/close_defects_icon.svg +12 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defect_density_icon.svg +12 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/open_defects_icon.svg +12 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/quality_score_icon.svg +12 -0
- package/src/assets/icons/sause_lab_icon.svg +3 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/total_defects_status_icon.svg +13 -0
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Accordion/Accordion.stories.tsx +14 -4
- package/src/components/Accordion/Accordion.tsx +22 -11
- package/src/components/Accordion/types.ts +14 -6
- package/src/components/AppHeader/AppHeader.tsx +1 -1
- package/src/components/AppHeader/types.ts +1 -1
- package/src/components/Charts/BarChart/BarChart.scss +1 -0
- package/src/components/Charts/BarChart/BarChart.stories.tsx +91 -1
- package/src/components/Charts/BarChart/BarChart.tsx +91 -86
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +1 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +2 -1
- package/src/components/Charts/IconRadialChart/types.ts +4 -3
- package/src/components/Charts/LineChart/LineChart.stories.tsx +3 -2
- package/src/components/Charts/LineChart/LineChart.tsx +7 -3
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +53 -6
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +74 -34
- package/src/components/Charts/MultiRadialChart/types.ts +5 -4
- package/src/components/Checkbox/Checkbox.scss +4 -5
- package/src/components/Checkbox/Checkbox.stories.tsx +40 -10
- package/src/components/Icon/iconList.ts +14 -0
- package/src/components/StatusCard/StatusCard.scss +56 -93
- package/src/components/StatusCard/StatusCard.stories.tsx +77 -4
- package/src/components/StatusCard/StatusCard.tsx +89 -35
- package/src/components/StatusCard/types.ts +1 -1
- package/src/components/Table/Table.tsx +2 -2
- package/src/components/TableTree/Components/TableBody.tsx +2 -1
- package/src/components/TableTree/Components/TableCell.tsx +29 -18
- package/src/components/TableTree/Components/TableRow.tsx +2 -0
- package/src/components/TableTree/types.ts +2 -0
- package/src/components/TextArea/Textarea.scss +6 -7
- package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +0 -3
package/lib/index.js
CHANGED
|
@@ -711,6 +711,18 @@ const SvgDeleteFilled = (props) => /* @__PURE__ */ React__namespace.createElemen
|
|
|
711
711
|
|
|
712
712
|
const SvgPrimaryCalendarIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M9.33333 12H8C7.26467 12 6.66667 12.598 6.66667 13.3333V14.6667C6.66667 15.402 7.26467 16 8 16H9.33333C10.0687 16 10.6667 15.402 10.6667 14.6667V13.3333C10.6667 12.598 10.0687 12 9.33333 12ZM8 14.6667V13.3333H9.33333V14.6667H8ZM16.6667 5.33333H16V4.66667C16 4.29867 15.702 4 15.3333 4C14.9647 4 14.6667 4.29867 14.6667 4.66667V5.33333H9.33333V4.66667C9.33333 4.29867 9.03533 4 8.66667 4C8.298 4 8 4.29867 8 4.66667V5.33333H7.33333C5.49533 5.33333 4 6.82867 4 8.66667V16.6667C4 18.5047 5.49533 20 7.33333 20H16.6667C18.5047 20 20 18.5047 20 16.6667V8.66667C20 6.82867 18.5047 5.33333 16.6667 5.33333ZM7.33333 6.66667H16.6667C17.7693 6.66667 18.6667 7.564 18.6667 8.66667V9.33333H5.33333V8.66667C5.33333 7.564 6.23067 6.66667 7.33333 6.66667ZM16.6667 18.6667H7.33333C6.23067 18.6667 5.33333 17.7693 5.33333 16.6667V10.6667H18.6667V16.6667C18.6667 17.7693 17.7693 18.6667 16.6667 18.6667Z", fill: "currentColor" }));
|
|
713
713
|
|
|
714
|
+
const SvgSauseLabIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.95052 10.3182C1.66316 9.57636 1.51722 8.78726 1.52023 7.9917C1.52436 7.13661 1.69693 6.29071 2.02808 5.50233C2.35922 4.71395 2.84245 3.99854 3.45016 3.39697C4.05787 2.7954 4.77816 2.31945 5.56986 1.99633C6.36156 1.67321 7.20917 1.50924 8.06426 1.51379C8.37072 1.51497 8.67678 1.5363 8.98044 1.57766L8.24709 2.31927H8.04798C6.26244 2.31827 4.58035 3.15531 3.50337 4.57993C2.4264 6.00455 2.07976 7.85144 2.56665 9.5691H7.55457L5.43517 13.4653L10.4549 8.38192H3.60231L11.3227 0.717079C10.2852 0.242691 9.15731 -0.001912 8.01642 1.1254e-05C6.26845 0.00182586 4.56887 0.574325 3.17606 1.63048C1.78324 2.68663 0.773361 4.16868 0.299937 5.85131C-0.173487 7.53395 -0.0845626 9.32515 0.553193 10.9526C1.19095 12.5801 2.34265 13.9548 3.83323 14.8678L6.22362 10.35L1.95052 10.3182ZM12.1994 1.14712L9.80921 5.66542H14.0878C14.4651 6.64903 14.5975 7.70966 14.4735 8.75583C14.3495 9.802 13.9729 10.8023 13.3761 11.6705C12.7793 12.5386 11.9803 13.2485 11.0479 13.739C10.1156 14.2295 9.07793 14.4858 8.02443 14.4859C7.70732 14.4847 7.3906 14.4634 7.07619 14.422L7.80127 13.6889H8.02669C9.53771 13.6889 10.9866 13.0888 12.0551 12.0204C13.1236 10.9519 13.7237 9.50323 13.7237 7.99195C13.7169 7.46969 13.6446 6.95035 13.5085 6.44611H8.51834L10.5979 2.51789L5.48276 7.60899H12.3511L4.71811 15.3056C6.57721 16.1338 8.68151 16.2246 10.605 15.5597C12.5286 14.8948 14.1276 13.5239 15.0785 11.7244C16.0293 9.925 16.2609 7.83151 15.7264 5.86775C15.1919 3.90399 13.9313 2.21667 12.1996 1.14737L12.1994 1.14712Z", fill: "#E1251B" }));
|
|
715
|
+
|
|
716
|
+
const SvgTotalDefectsStatusIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_1919_99688)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.6256 16.6281C20.2862 12.9675 20.2862 7.03249 16.6256 3.37187C12.965 -0.288739 7.02995 -0.288739 3.36934 3.37187C-0.291277 7.03249 -0.291277 12.9675 3.36934 16.6281C7.02995 20.2887 12.965 20.2887 16.6256 16.6281Z", fill: "#C459D5" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.2394 11.5903C18.5723 15.4934 15.4928 18.5728 11.5898 19.2399L6.54285 14.193C5.33516 13.1963 4.56543 11.688 4.56543 9.99986C4.56543 6.99873 6.99824 4.56592 9.99938 4.56592C11.6875 4.56592 13.1958 5.33568 14.1925 6.54334L19.2394 11.5903Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.0004 4.56592C6.99876 4.56592 4.56543 6.99925 4.56543 10.0009C4.56543 13.0026 6.99876 15.4359 10.0004 15.4359C13.0021 15.4359 15.4354 13.0026 15.4354 10.0009C15.4354 6.99925 13.0021 4.56592 10.0004 4.56592ZM7.11706 12.0256L8.26556 10.8774C8.35265 10.7904 8.43875 10.723 8.54478 10.659L8.97598 10.3992C8.74138 10.0444 8.61535 9.62877 8.61535 9.19368C8.61535 8.60807 8.84346 8.05746 9.25763 7.64329C9.67165 7.22909 10.2222 7.00098 10.8079 7.00098C11.3936 7.00098 11.9442 7.22909 12.3582 7.64329C12.7724 8.05746 13.0005 8.60811 13.0005 9.19368C13.0005 9.77925 12.7724 10.3298 12.3582 10.7438C11.9442 11.158 11.3936 11.3861 10.8079 11.3861C10.3728 11.3861 9.95706 11.2601 9.6023 11.0255L9.34247 11.457C9.2788 11.5627 9.21144 11.6489 9.12403 11.7363L7.97587 12.8844C7.90068 12.9596 7.80045 13.001 7.69362 13.001C7.58679 13.001 7.48656 12.9596 7.41136 12.8844L7.11707 12.5901C6.96165 12.4347 6.9616 12.1815 7.11707 12.0256L7.11706 12.0256ZM12.2185 10.6041C12.5954 10.2274 12.803 9.72651 12.803 9.19367C12.803 8.66083 12.5954 8.15981 12.2185 7.78293C11.8418 7.40605 11.3409 7.1985 10.8079 7.1985C10.275 7.1985 9.77406 7.40605 9.39734 7.78293C9.02047 8.15981 8.8129 8.66081 8.8129 9.19367C8.8129 9.72652 9.02045 10.2274 9.39736 10.6041C9.77406 10.981 10.275 11.1886 10.8079 11.1886C11.3409 11.1886 11.8418 10.981 12.2185 10.6041ZM9.44204 10.9087C9.37805 10.8575 9.31644 10.8026 9.25766 10.7438C9.19886 10.685 9.14395 10.6234 9.09277 10.5594L8.6577 10.8216L8.65772 10.8216L9.09262 10.5596C9.14381 10.6236 9.19872 10.6852 9.25751 10.744H9.25752C9.31629 10.8027 9.37791 10.8577 9.44189 10.9088L9.17995 11.3438L9.18 11.3439L9.44205 10.9087H9.44204ZM7.25673 12.4504L7.55101 12.7447C7.58889 12.7826 7.63953 12.8035 7.69361 12.8035C7.74768 12.8035 7.7983 12.7826 7.83617 12.7448L8.98434 11.5966C9.01391 11.567 9.04044 11.5381 9.06513 11.5084L8.49325 10.9365C8.46357 10.9612 8.43468 10.9877 8.40523 11.0171L7.25683 12.1652C7.17827 12.244 7.17822 12.3719 7.25673 12.4504ZM9.56602 9.22099C9.5817 9.16874 9.63672 9.13909 9.689 9.15474L9.81521 9.19258L9.99721 9.05622C10.0143 9.04342 10.0351 9.03649 10.0564 9.03649H10.2016V8.98067H10.1464C10.0918 8.98067 10.0476 8.93644 10.0476 8.8819V8.65395L9.93062 8.56773C9.88671 8.53536 9.87736 8.47353 9.90973 8.42961C9.94209 8.38571 10.0039 8.37635 10.0478 8.40873L10.205 8.52455C10.2302 8.54317 10.2451 8.57268 10.2451 8.60405V8.78313H10.4238C10.4204 8.76244 10.4185 8.74144 10.4185 8.72023C10.4185 8.60785 10.4664 8.5065 10.5428 8.43533C10.4464 8.29297 10.329 8.18129 10.1857 8.09569C10.1388 8.06772 10.1235 8.00708 10.1515 7.96025C10.1795 7.91343 10.2401 7.89814 10.2869 7.92609C10.4588 8.02876 10.6034 8.16827 10.7175 8.3414C10.7466 8.33445 10.7769 8.33066 10.8081 8.33066C10.8393 8.33066 10.8694 8.33443 10.8984 8.34135C11.0126 8.16825 11.1571 8.02876 11.3289 7.92611C11.3758 7.89815 11.4364 7.91344 11.4644 7.96027C11.4923 8.00709 11.477 8.06774 11.4302 8.0957C11.2869 8.18129 11.1695 8.29296 11.0731 8.43528C11.1495 8.50645 11.1973 8.60784 11.1973 8.72025C11.1973 8.7415 11.1955 8.76251 11.1922 8.78315H11.3708V8.60406C11.3708 8.57269 11.3857 8.54318 11.4109 8.52457L11.568 8.40874C11.6119 8.37637 11.6738 8.38573 11.7061 8.42963C11.7385 8.47353 11.7292 8.53536 11.6853 8.56774L11.5683 8.65396V8.88193C11.5683 8.93647 11.5241 8.98069 11.4695 8.98069H11.4143V9.03652H11.5595C11.5808 9.03652 11.6016 9.04344 11.6187 9.05625L11.8007 9.19261L11.9269 9.15477C11.9791 9.13911 12.0342 9.16877 12.0499 9.22101C12.0655 9.27326 12.0359 9.32831 11.9836 9.34398L11.8097 9.39613C11.8004 9.39892 11.7908 9.40029 11.7813 9.40029C11.7602 9.40029 11.7394 9.39352 11.7221 9.38056L11.5266 9.23405H11.4143V9.31108L11.6142 9.41725C11.6464 9.43439 11.6666 9.46793 11.6666 9.50447V9.84172L11.8246 9.98807C11.8647 10.0251 11.8671 10.0876 11.83 10.1276C11.8105 10.1486 11.784 10.1593 11.7575 10.1593C11.7335 10.1593 11.7094 10.1506 11.6904 10.133L11.5008 9.95731C11.4806 9.93862 11.4691 9.91236 11.4691 9.88486V9.56384L11.4143 9.53474V9.6343C11.4143 9.96875 11.1424 10.2408 10.8081 10.2408C10.4739 10.2408 10.2016 9.96875 10.2016 9.6343V9.53474L10.1468 9.56384V9.88486C10.1468 9.91236 10.1353 9.93862 10.1152 9.95731L9.9255 10.133C9.90648 10.1506 9.88242 10.1593 9.8584 10.1593C9.83185 10.1593 9.80537 10.1486 9.78591 10.1276C9.74884 10.0876 9.75124 10.0251 9.79127 9.98807L9.94929 9.84172V9.50447C9.94929 9.46794 9.96946 9.43439 10.0017 9.41725L10.2016 9.31108V9.23404H10.0893L9.89379 9.38055C9.8765 9.39351 9.85567 9.40027 9.83456 9.40027C9.82506 9.40027 9.81552 9.3989 9.8062 9.39611L9.63227 9.34397C9.58004 9.3283 9.55037 9.27324 9.56604 9.221L9.56602 9.22099ZM10.9998 8.72023C10.9998 8.61434 10.9138 8.52819 10.8081 8.52819C10.7024 8.52819 10.6161 8.61434 10.6161 8.72023C10.6161 8.74184 10.6198 8.76301 10.6268 8.78313H10.9892C10.9961 8.76316 10.9998 8.74199 10.9998 8.72023ZM10.7093 10.0312V9.36098C10.7093 9.30643 10.7536 9.26221 10.8081 9.26221C10.8626 9.26221 10.9069 9.30643 10.9069 9.36098V10.0311C11.0846 9.98681 11.2168 9.82573 11.2168 9.63429V8.98068H10.3991V9.63429C10.3991 9.82576 10.5314 9.98686 10.7093 10.0312ZM9.5376 7.92323C9.87682 7.58383 10.328 7.39693 10.808 7.39693C11.288 7.39693 11.7392 7.58383 12.0786 7.92322C12.7788 8.62378 12.7788 9.76363 12.0786 10.4642C11.7392 10.8036 11.288 10.9905 10.808 10.9905C10.328 10.9905 9.8768 10.8036 9.53762 10.4642C9.19824 10.1248 9.01133 9.67361 9.01133 9.19371C9.01133 8.7138 9.19824 8.26259 9.5376 7.92323ZM9.67731 10.3245C9.97921 10.6266 10.3808 10.7929 10.808 10.7929C11.2352 10.7929 11.6369 10.6266 11.9389 10.3245C12.5621 9.70099 12.5621 8.68641 11.9389 8.06287C11.6368 7.76085 11.2352 7.59446 10.808 7.59446C10.3808 7.59446 9.97921 7.76081 9.6773 8.06288C9.37521 8.36496 9.20886 8.76655 9.20886 9.19371C9.20886 9.62086 9.37522 10.0225 9.67731 10.3245Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_1919_99688" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 20, height: 20, fill: "white", transform: "translate(-0.000488281)" }))));
|
|
717
|
+
|
|
718
|
+
const SvgOpenDefectsIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12939)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.8937 16.6281C20.4813 12.9675 20.4813 7.03249 16.8937 3.37187C13.3062 -0.28874 7.48963 -0.28874 3.90208 3.37187C0.314532 7.03249 0.314532 12.9675 3.90208 16.6281C7.48963 20.2887 13.3062 20.2887 16.8937 16.6281Z", fill: "#F64C6E" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.4558 11.5903C18.802 15.4934 15.7839 18.5728 11.9588 19.2399L7.01266 14.193C5.82907 13.1963 5.07471 11.688 5.07471 9.99986C5.07471 6.99873 7.45896 4.56592 10.4002 4.56592C12.0546 4.56592 13.5328 5.33568 14.5096 6.54334L19.4558 11.5903Z", fill: "#9C1732" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.7257 9.99986C15.7257 6.99873 13.3414 4.56592 10.4002 4.56592C7.45896 4.56592 5.07471 6.99873 5.07471 9.99986C5.07471 13.001 7.45896 15.4338 10.4002 15.4338C13.3414 15.4338 15.7257 13.001 15.7257 9.99986ZM12.9249 9.64978C12.9249 9.55787 12.9648 9.46879 13.0318 9.41147L13.4001 9.09613L13.3734 8.9905C13.3412 8.86285 13.2994 8.73668 13.2493 8.61531C13.199 8.49419 13.1393 8.37544 13.0718 8.26239L13.016 8.16883L12.534 8.20618C12.446 8.21298 12.3546 8.17811 12.2893 8.11256C12.2243 8.04761 12.1896 7.95637 12.1964 7.8685L12.2338 7.38509L12.1403 7.32926C12.0272 7.2618 11.9085 7.20211 11.7872 7.15177C11.666 7.10163 11.5398 7.05987 11.4121 7.02765L11.3065 7.00098L10.9921 7.36816C10.9348 7.4351 10.8452 7.47502 10.7524 7.47502L10.5758 7.47471V9.23258H10.7515C10.9808 9.23258 11.1674 9.41912 11.1674 9.64842C11.1674 9.87772 10.9808 10.0643 10.7515 10.0643H10.576L10.5742 11.8219L10.7502 11.8218C10.8422 11.8218 10.9312 11.8618 10.9885 11.9287L11.3038 12.297L11.4095 12.2703C11.5371 12.2381 11.6632 12.1963 11.7846 12.1461C11.9058 12.0959 12.0245 12.0362 12.1376 11.9687L12.2311 11.9129L12.1938 11.4309C12.187 11.3429 12.2219 11.2515 12.2874 11.1862C12.3524 11.1212 12.4435 11.0864 12.5315 11.0932L13.0149 11.1307L13.0707 11.0371C13.1382 10.9241 13.1979 10.8054 13.2482 10.684C13.2983 10.5628 13.3401 10.4367 13.3723 10.309L13.399 10.2034L13.0318 9.889C12.9647 9.83159 12.9248 9.74231 12.9249 9.64978ZM11.5188 9.64842C11.5188 9.28581 11.2659 8.98113 10.9272 8.90146V8.54357C11.4609 8.62813 11.8702 9.09135 11.8702 9.64842C11.8702 10.2057 11.4606 10.669 10.9267 10.7534L10.9271 10.3954C11.2658 10.3158 11.5188 10.0111 11.5188 9.64842ZM12.9235 10.5496C12.8934 10.6221 12.8594 10.6937 12.822 10.7633L12.5586 10.7429C12.3668 10.728 12.1774 10.7991 12.0391 10.9376C11.8998 11.0763 11.8285 11.266 11.8434 11.4581L11.8637 11.7201C11.7941 11.7575 11.7225 11.7914 11.6501 11.8215C11.5776 11.8515 11.5029 11.8781 11.4273 11.9008L11.2554 11.7001C11.1687 11.5989 11.0537 11.5276 10.9259 11.4934L10.9263 11.1081C11.6548 11.0214 12.2216 10.3999 12.2216 9.64842C12.2216 8.89727 11.6553 8.27598 10.9272 8.18886V7.80386C11.0561 7.76983 11.172 7.69838 11.2591 7.59671L11.4299 7.39711C11.5056 7.4199 11.5802 7.44645 11.6527 7.47641C11.7252 7.5065 11.7967 7.54049 11.8664 7.57789L11.846 7.84134C11.8311 8.03306 11.9022 8.22252 12.0406 8.36087C12.1794 8.50012 12.3691 8.57147 12.5612 8.55654L12.8232 8.53624C12.8606 8.60589 12.8945 8.67741 12.9246 8.7498C12.9546 8.82235 12.9811 8.89698 13.0039 8.97269L12.8032 9.14454C12.6571 9.26959 12.5734 9.45381 12.5735 9.64955C12.5731 9.8461 12.6569 10.0307 12.8032 10.156L13.0028 10.3269C12.98 10.4025 12.9535 10.4771 12.9235 10.5496ZM9.63312 10.351C9.63312 10.1217 9.81966 9.93512 10.049 9.93512H10.2247V8.1775L10.0489 8.17756C9.95646 8.17756 9.87016 8.13861 9.81201 8.0707L9.49667 7.70239L9.39104 7.72907C9.26342 7.76128 9.13725 7.80304 9.01585 7.85324C8.8947 7.90351 8.77596 7.9632 8.66292 8.03066L8.56936 8.0865L8.6067 8.56846C8.61352 8.65649 8.57864 8.74787 8.51309 8.81318C8.44813 8.87819 8.35696 8.91292 8.26901 8.90614L7.7856 8.86868L7.72976 8.96224C7.6623 9.07528 7.60262 9.19402 7.55229 9.31536C7.50216 9.43655 7.46041 9.56272 7.42818 9.69035L7.4015 9.79599L7.76871 10.1104C7.83577 10.1678 7.87572 10.2571 7.87556 10.3496C7.87559 10.4415 7.83565 10.5306 7.7687 10.5879L7.40039 10.9033L7.42706 11.0089C7.4593 11.1365 7.50106 11.2627 7.55125 11.3841C7.60151 11.5052 7.66119 11.6239 7.72866 11.737L7.78449 11.8306L8.26646 11.7932C8.35447 11.7864 8.44587 11.8213 8.51118 11.8868C8.57619 11.9518 8.61094 12.043 8.60413 12.1309L8.56667 12.6143L8.66023 12.6701C8.77326 12.7376 8.89201 12.7973 9.01334 12.8476C9.13455 12.8977 9.26072 12.9395 9.38835 12.9717L9.49399 12.9984L9.80837 12.6312C9.86568 12.5643 9.95473 12.5244 10.0467 12.5244L10.2231 12.5247L10.2249 10.7668H10.049C9.81967 10.7668 9.63312 10.5803 9.63312 10.351ZM9.2817 10.351C9.2817 10.7135 9.53451 11.0182 9.87309 11.0979L9.87272 11.4557C9.33932 11.3709 8.93028 10.9078 8.93028 10.351C8.93028 9.79389 9.33959 9.33068 9.87325 9.24611V9.604C9.5346 9.68365 9.2817 9.98833 9.2817 10.351ZM9.54142 12.4027L9.37052 12.6023C9.29484 12.5795 9.22026 12.5529 9.14782 12.523C9.07529 12.4929 9.00373 12.4589 8.93407 12.4215L8.95449 12.158C8.96936 11.9663 8.89831 11.7769 8.75984 11.6385C8.62111 11.4993 8.43138 11.428 8.23931 11.4428L7.97731 11.4631C7.93991 11.3935 7.90595 11.322 7.87592 11.2496C7.84591 11.177 7.81934 11.1024 7.79653 11.0267L7.99725 10.8548C8.14332 10.7298 8.22706 10.5456 8.22697 10.3498C8.22732 10.1533 8.14359 9.9687 7.99726 9.84342L7.79766 9.67251C7.82045 9.59684 7.84701 9.52225 7.87697 9.44981C7.90707 9.37728 7.94105 9.30572 7.97845 9.23606L8.2419 9.25648C8.43362 9.27135 8.62308 9.20028 8.76143 9.06182C8.90067 8.92309 8.97198 8.73336 8.9571 8.54129L8.9368 8.27929C9.00643 8.2419 9.07796 8.20793 9.15035 8.1779C9.22293 8.14789 9.29756 8.12132 9.37324 8.09852L9.5451 8.29924C9.63163 8.40031 9.7462 8.47153 9.87327 8.50579V8.89138C9.14519 8.9785 8.57888 9.59978 8.57888 10.3509C8.57888 11.1018 9.14474 11.7229 9.87238 11.8104L9.872 12.1957C9.7438 12.2298 9.62835 12.3011 9.54142 12.4027ZM10.225 7.29932H9.87354V7.65073H10.225V7.29932ZM9.17041 7.00098H9.52183V7.3524H9.17041V7.00098ZM10.9276 12.3489H10.5762V12.7003H10.9276V12.3489ZM11.2788 12.647H11.6302V12.9984H11.2788V12.647Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12939" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.599609)" }))));
|
|
719
|
+
|
|
720
|
+
const SvgCloseDefectsIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12924)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.4538 16.6281C20.0413 12.9675 20.0413 7.03249 16.4538 3.37187C12.8662 -0.28874 7.04968 -0.28874 3.46214 3.37187C-0.12541 7.03249 -0.12541 12.9675 3.46214 16.6281C7.04968 20.2887 12.8662 20.2887 16.4538 16.6281Z", fill: "#46CC6B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.0159 11.5903C18.3621 15.4934 15.344 18.5728 11.5189 19.2399L6.57272 14.193C5.38913 13.1963 4.63477 11.688 4.63477 9.99986C4.63477 6.99873 7.01902 4.56592 9.96025 4.56592C11.6147 4.56592 13.0929 5.33568 14.0697 6.54334L19.0159 11.5903Z", fill: "#179C5F" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.2857 9.99986C15.2857 6.99873 12.9015 4.56592 9.96025 4.56592C7.01902 4.56592 4.63477 6.99873 4.63477 9.99986C4.63477 13.001 7.01902 15.4338 9.96025 15.4338C12.9015 15.4338 15.2857 13.001 15.2857 9.99986ZM9.07719 6.65167H9.42861V7.00309H9.07719V6.65167ZM10.1317 6.95001H9.78032V7.30143H10.1317V6.95001ZM12.1381 9.99945C12.1381 9.90754 12.1781 9.81846 12.245 9.76114L12.6133 9.4458L12.5867 9.34016C12.5544 9.21252 12.5127 9.08635 12.4625 8.96498C12.4122 8.84386 12.3525 8.72511 12.2851 8.61206L12.2292 8.5185L11.7473 8.55584C11.6592 8.56265 11.5678 8.52778 11.5025 8.46223C11.4375 8.39727 11.4028 8.30603 11.4096 8.21817L11.447 7.73476L11.3535 7.67893C11.2405 7.61147 11.1217 7.55177 11.0004 7.50144C10.8792 7.4513 10.753 7.40954 10.6254 7.37732L10.5197 7.35064L10.2053 7.71783C10.148 7.78476 10.0584 7.82468 9.96562 7.82468L9.90689 7.82458C9.83332 7.81342 9.76656 7.77718 9.71879 7.7214L9.40345 7.35309L9.29782 7.37976C9.17021 7.41197 9.04404 7.45373 8.92263 7.50394C8.80149 7.5542 8.68274 7.6139 8.5697 7.68136L8.47614 7.7372L8.51349 8.21916C8.52031 8.30719 8.48542 8.39857 8.41987 8.46387C8.35492 8.52888 8.26375 8.56362 8.1758 8.55683L7.69239 8.51937L7.63655 8.61293C7.56909 8.72597 7.5094 8.84472 7.45907 8.96605C7.40894 9.08724 7.3672 9.21341 7.33496 9.34105L7.30829 9.44668L7.6755 9.76107C7.74256 9.8185 7.7825 9.90778 7.78234 10.0003C7.78237 10.0922 7.74243 10.1813 7.67548 10.2386L7.30717 10.5539L7.33385 10.6596C7.36608 10.7872 7.40784 10.9134 7.45804 11.0348C7.50829 11.1559 7.56797 11.2746 7.63545 11.3877L7.69127 11.4812L8.17324 11.4439C8.26125 11.4371 8.35265 11.472 8.41796 11.5375C8.48297 11.6025 8.51773 11.6937 8.51091 11.7816L8.47345 12.265L8.56701 12.3208C8.68005 12.3883 8.79879 12.448 8.92013 12.4983C9.04133 12.5484 9.1675 12.5902 9.29514 12.6224L9.40077 12.6491L9.71515 12.2819C9.77247 12.215 9.86152 12.175 9.95345 12.175L10.0116 12.1751C10.0858 12.1864 10.1545 12.2232 10.2017 12.2783L10.517 12.6467L10.6227 12.62C10.7503 12.5878 10.8765 12.546 10.9979 12.4958C11.119 12.4455 11.2377 12.3858 11.3508 12.3184L11.4443 12.2625L11.407 11.7806C11.4002 11.6926 11.4351 11.6012 11.5006 11.5359C11.5656 11.4709 11.6567 11.4361 11.7447 11.4429L12.2281 11.4804L12.2839 11.3868C12.3514 11.2738 12.4111 11.155 12.4614 11.0337C12.5115 10.9125 12.5533 10.7863 12.5855 10.6587L12.6122 10.5531L12.245 10.2387C12.1779 10.1813 12.138 10.092 12.1381 9.99945ZM10.3806 9.99809C10.3806 9.78728 10.2229 9.61262 10.0193 9.58581H9.95574C9.72644 9.58581 9.5399 9.77235 9.5399 10.0017C9.5399 10.2125 9.69761 10.3872 9.90125 10.4139H9.96473C10.194 10.4139 10.3806 10.2274 10.3806 9.99809ZM10.732 9.99809C10.732 9.63547 10.4791 9.33079 10.1404 9.25113V8.89324C10.6741 8.97779 11.0834 9.44102 11.0834 9.99809C11.0834 10.5553 10.6738 11.0187 10.1399 11.103L10.1403 10.7451C10.4791 10.6655 10.732 10.3608 10.732 9.99809ZM12.1367 10.8992C12.1066 10.9718 12.0727 11.0433 12.0353 11.113L11.7718 11.0926C11.58 11.0777 11.3906 11.1487 11.2523 11.2872C11.113 11.4259 11.0417 11.6157 11.0566 11.8078L11.0769 12.0697C11.0073 12.1071 10.9357 12.1411 10.8634 12.1711C10.7908 12.2012 10.7161 12.2277 10.6405 12.2505L10.4686 12.0498C10.3819 11.9486 10.2669 11.8773 10.1392 11.8431L10.1395 11.4578C10.868 11.371 11.4348 10.7496 11.4348 9.99809C11.4348 9.24693 10.8685 8.62565 10.1404 8.53853V8.15353C10.2693 8.1195 10.3852 8.04805 10.4723 7.94638L10.6432 7.74677C10.7188 7.76957 10.7934 7.79611 10.8659 7.82608C10.9384 7.85617 11.01 7.89015 11.0796 7.92756L11.0592 8.191C11.0443 8.38272 11.1154 8.57219 11.2538 8.71054C11.3926 8.84978 11.5823 8.92113 11.7744 8.90621L12.0364 8.88591C12.0738 8.95556 12.1077 9.02707 12.1378 9.09947C12.1678 9.17202 12.1943 9.24665 12.2171 9.32236L12.0164 9.4942C11.8704 9.61926 11.7866 9.80347 11.7867 9.99921C11.7864 10.1958 11.8701 10.3804 12.0164 10.5056L12.216 10.6765C12.1933 10.7522 12.1667 10.8268 12.1367 10.8992ZM9.18848 10.0017C9.18848 10.3642 9.44129 10.6689 9.77987 10.7486L9.77951 11.1064C9.2461 11.0216 8.83706 10.5585 8.83706 10.0017C8.83706 9.44459 9.24637 8.98137 9.78003 8.89681V9.25469C9.44138 9.33435 9.18848 9.63903 9.18848 10.0017ZM9.4482 12.0534L9.27731 12.253C9.20162 12.2302 9.12704 12.2036 9.0546 12.1737C8.98207 12.1436 8.91051 12.1096 8.84086 12.0722L8.86127 11.8087C8.87614 11.617 8.80509 11.4276 8.66662 11.2892C8.5279 11.15 8.33816 11.0787 8.14609 11.0935L7.8841 11.1138C7.84669 11.0442 7.81274 10.9727 7.7827 10.9003C7.75269 10.8277 7.72612 10.7531 7.70332 10.6774L7.90403 10.5055C8.05011 10.3805 8.13384 10.1963 8.13376 10.0005C8.13411 9.80398 8.05038 9.61939 7.90405 9.49411L7.70444 9.32321C7.72724 9.24753 7.75379 9.17294 7.78376 9.1005C7.81385 9.02797 7.84783 8.95641 7.88523 8.88676L8.14868 8.90717C8.3404 8.92204 8.52986 8.85097 8.66822 8.71251C8.80745 8.57378 8.87876 8.38405 8.86389 8.19198L8.84359 7.92999C8.91321 7.89259 8.98474 7.85862 9.05713 7.82859C9.12971 7.79858 9.20434 7.77201 9.28002 7.74922L9.45188 7.94993C9.53841 8.051 9.65298 8.12222 9.78006 8.15649V8.54207C9.05198 8.62919 8.48567 9.25047 8.48567 10.0016C8.48567 10.7525 9.05152 11.3736 9.77917 11.4611L9.77878 11.8463C9.65058 11.8805 9.53513 11.9518 9.4482 12.0534ZM10.1408 12.6985H9.78938V13.05H10.1408V12.6985ZM10.492 12.9966H10.8434V13.3481H10.492V12.9966Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12924" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.159668)" }))));
|
|
721
|
+
|
|
722
|
+
const SvgQualityScoreIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12934)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.8537 16.6281C20.4412 12.9675 20.4412 7.03249 16.8537 3.37187C13.2661 -0.28874 7.44959 -0.28874 3.86204 3.37187C0.274492 7.03249 0.274492 12.9675 3.86204 16.6281C7.44959 20.2887 13.2661 20.2887 16.8537 16.6281Z", fill: "#FFC38B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.4158 11.4833C18.762 15.3864 15.7439 18.4659 11.9188 19.133L6.97262 14.0861C5.78903 13.0894 5.03467 11.5811 5.03467 9.89293C5.03467 6.8918 7.41892 4.45898 10.3602 4.45898C12.0146 4.45898 13.4928 5.22875 14.4696 6.43641L19.4158 11.4833Z", fill: "#E2750F" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.3602 4.45898C13.3014 4.45898 15.6856 6.8918 15.6856 9.89293C15.6856 12.8941 13.3014 15.3269 10.3602 15.3269C7.41892 15.3269 5.03467 12.8941 5.03467 9.89293C5.03467 6.8918 7.41892 4.45898 10.3602 4.45898ZM8.49928 7.73264H8.96833L9.05285 7.48502H8.36952L7.45166 8.8243H7.75166L8.49928 7.73264ZM9.72904 12.3981L7.45166 9.07192H8.5969L9.72904 12.3981ZM11.8624 8.8243L11.4064 7.48502H9.31357L8.85761 8.8243H11.8624ZM10.36 13.485L8.85761 9.07192H11.8624L10.36 13.485ZM12.2207 7.73264L12.9683 8.8243H13.2683L12.3505 7.48502H11.6671L11.7517 7.73264H12.2207ZM10.9909 12.3981L12.1231 9.07192H13.2683L10.9909 12.3981Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12934" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.55957)" }))));
|
|
723
|
+
|
|
724
|
+
const SvgDefectDensityIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12904)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.6535 16.6281C20.241 12.9675 20.241 7.03249 16.6535 3.37187C13.066 -0.28874 7.24939 -0.28874 3.66184 3.37187C0.0742969 7.03249 0.0742969 12.9675 3.66184 16.6281C7.24939 20.2887 13.066 20.2887 16.6535 16.6281Z", fill: "#ADE780" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.2156 11.5903C18.5618 15.4934 15.5437 18.5728 11.7186 19.2399L6.77243 14.193C5.58884 13.1963 4.83447 11.688 4.83447 9.99986C4.83447 6.99873 7.21873 4.56592 10.16 4.56592C11.8144 4.56592 13.2926 5.33568 14.2694 6.54334L19.2156 11.5903Z", fill: "#5DC70C" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.4854 9.99986C15.4854 6.99873 13.1012 4.56592 10.16 4.56592C7.21873 4.56592 4.83447 6.99873 4.83447 9.99986C4.83447 13.001 7.21873 15.4338 10.16 15.4338C13.1012 15.4338 15.4854 13.001 15.4854 9.99986ZM12.7113 11.158L13.5239 11.6271C13.6545 11.7025 13.6992 11.8694 13.6238 12C13.5733 12.0876 13.4815 12.1365 13.3872 12.1365C13.3409 12.1365 13.2939 12.1248 13.2509 12.0999L12.4382 11.6307L12.4307 12.4485C12.4293 12.5984 12.3073 12.7189 12.1577 12.7189L12.1552 12.7189C12.0044 12.7175 11.8833 12.5942 11.8847 12.4434L11.8951 11.3171L10.4327 10.4728V12.1614L11.4132 12.7156C11.5444 12.7897 11.5907 12.9563 11.5165 13.0876C11.4663 13.1764 11.3738 13.2263 11.2786 13.2263C11.2331 13.2263 11.187 13.2149 11.1445 13.1909L10.4327 12.7886V13.727C10.4327 13.8778 10.3105 14 10.1597 14C10.0089 14 9.88669 13.8778 9.88669 13.727V12.7886L9.17485 13.1909C9.13241 13.2149 9.08625 13.2263 9.04075 13.2263C8.94553 13.2263 8.85304 13.1764 8.80284 13.0876C8.72866 12.9563 8.77493 12.7897 8.90618 12.7156L9.88665 12.1614V10.4728L8.42418 11.3171L8.43433 12.4434C8.43572 12.5942 8.31458 12.7175 8.16381 12.7189L8.1613 12.7189C8.01169 12.7189 7.88972 12.5983 7.88837 12.4483L7.88098 11.6307L7.06843 12.0999C7.02544 12.1247 6.97848 12.1365 6.93218 12.1365C6.83783 12.1365 6.74607 12.0876 6.69551 12C6.62013 11.8694 6.66486 11.7024 6.79543 11.6271L7.60798 11.1579L6.90372 10.7427C6.77384 10.6661 6.73064 10.4988 6.80722 10.3689C6.88381 10.239 7.05125 10.1958 7.18105 10.2724L8.15118 10.8445L9.61372 10.0001L8.15143 9.1558L7.18105 9.72767C7.13751 9.7533 7.08979 9.76549 7.04269 9.76549C6.94918 9.76549 6.85815 9.71745 6.80722 9.63107C6.73067 9.50116 6.77392 9.33379 6.90379 9.25724L7.60816 8.8421L6.79546 8.37287C6.6649 8.29749 6.62016 8.13052 6.69555 7.99995C6.77093 7.86939 6.9379 7.82462 7.06846 7.90004L7.88102 8.36919L7.88841 7.55165C7.88975 7.40169 8.01173 7.28109 8.16133 7.28109H8.16384C8.31461 7.28244 8.43575 7.40576 8.43437 7.55653L8.42421 8.68278L9.88665 9.52715V7.83859L8.90618 7.28444C8.77493 7.21026 8.72866 7.04369 8.80284 6.91244C8.87706 6.78114 9.04352 6.73488 9.17485 6.8091L9.88669 7.21139V6.273C9.88669 6.12223 10.0089 6 10.1597 6C10.3105 6 10.4327 6.12223 10.4327 6.273V7.21139L11.1445 6.80906C11.2758 6.73484 11.4423 6.78114 11.5165 6.9124C11.5907 7.04369 11.5444 7.21022 11.4132 7.28441L10.4327 7.83856V9.52715L11.8951 8.68278L11.885 7.55653C11.8836 7.40576 12.0047 7.28244 12.1555 7.28109C12.3059 7.27902 12.4296 7.40085 12.4309 7.55162L12.4383 8.36919L13.2509 7.90004C13.3814 7.82462 13.5484 7.86935 13.6238 7.99995C13.6992 8.13052 13.6544 8.29749 13.5239 8.37287L12.7111 8.8421L13.4154 9.25717C13.5453 9.33376 13.5885 9.50112 13.512 9.631C13.461 9.71737 13.37 9.76542 13.2765 9.76542C13.2294 9.76542 13.1817 9.75326 13.1382 9.7276L12.1679 9.15572L10.7056 9.99998L12.1682 10.8444L13.1381 10.2724C13.2681 10.1959 13.4354 10.2391 13.512 10.3689C13.5886 10.4988 13.5453 10.6662 13.4155 10.7428L12.7113 11.158Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12904" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.359375)" }))));
|
|
725
|
+
|
|
714
726
|
let Components = {};
|
|
715
727
|
Components['success'] = SvgSuccess;
|
|
716
728
|
Components['alert'] = SvgAlert;
|
|
@@ -992,6 +1004,12 @@ Components['jira_colored'] = SvgJiraColored;
|
|
|
992
1004
|
Components['screenshot'] = SvgScreenshot;
|
|
993
1005
|
Components['delete_filled'] = SvgDeleteFilled;
|
|
994
1006
|
Components['primary_calendar_icon'] = SvgPrimaryCalendarIcon;
|
|
1007
|
+
Components['sause_lab_icon'] = SvgSauseLabIcon;
|
|
1008
|
+
Components['total_defects_status_icon'] = SvgTotalDefectsStatusIcon;
|
|
1009
|
+
Components['open_defects_status_icon'] = SvgOpenDefectsIcon;
|
|
1010
|
+
Components['closed_defects_status_icon'] = SvgCloseDefectsIcon;
|
|
1011
|
+
Components['quality_score_status_icon'] = SvgQualityScoreIcon;
|
|
1012
|
+
Components['defect_density_status_icon'] = SvgDefectDensityIcon;
|
|
995
1013
|
|
|
996
1014
|
var css_248z$1i = ".ff-icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n background-color: var(--brand-color);\n border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n\n.ff-icon-click {\n cursor: pointer;\n box-sizing: content-box;\n}\n.ff-icon-click:hover {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n color: var(--toggle-strip-color);\n}";
|
|
997
1015
|
styleInject(css_248z$1i);
|
|
@@ -1188,7 +1206,7 @@ function useEscapeKey(key) {
|
|
|
1188
1206
|
};
|
|
1189
1207
|
}
|
|
1190
1208
|
|
|
1191
|
-
var css_248z$1f = ":root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --ff-progress-bar-bg-color: #f0f0f0;\n --ff-machine-partial-public-status-color: #ea850e;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n}\n\n:root {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --ff-progress-bar-bg-color: #f0f0f0;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n}\n\n:root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #434db8;\n --text-color: #3c3838;\n --description-text: #7a7a7a;\n --click-able-text-color: #434db8;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #434db8;\n --border-color: #c2d2fb;\n --disable-color: rgba(67, 77, 184, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: #e9ebfb;\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #434db8;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #434db8;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #434db8;\n --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n --secondary-button-color-text: #6f7070;\n --secondary-button-border: #6f7070;\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #1e161f;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #434db8;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #434db8;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #ffffff;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #434db8;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #434db8;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #434db8;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #fcce46;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #808080;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #434db8;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #434db8;\n --ff-search-field-hover-color: #edecf8;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #434db8;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #434db8;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #1e161f;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #434db8;\n --ff-connecting-branch-modal-header: #434db8;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #434db8;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #edecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #434db8;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n}\n\n.ff-light-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --ff-progress-bar-bg-color: #f0f0f0;\n --ff-machine-partial-public-status-color: #ea850e;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n}\n\n.ff-dark-theme {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --ff-progress-bar-bg-color: #f0f0f0;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n}\n\n.ff-blue-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #434db8;\n --text-color: #3c3838;\n --description-text: #7a7a7a;\n --click-able-text-color: #434db8;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #434db8;\n --border-color: #c2d2fb;\n --disable-color: rgba(67, 77, 184, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: #e9ebfb;\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #434db8;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #434db8;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #434db8;\n --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n --secondary-button-color-text: #6f7070;\n --secondary-button-border: #6f7070;\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #1e161f;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #434db8;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #434db8;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #ffffff;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #434db8;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #434db8;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #434db8;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #fcce46;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #808080;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #434db8;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #434db8;\n --ff-search-field-hover-color: #edecf8;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #434db8;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #434db8;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #1e161f;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #434db8;\n --ff-connecting-branch-modal-header: #434db8;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #434db8;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #edecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #434db8;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n}";
|
|
1209
|
+
var css_248z$1f = ":root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --available-memory-bg: #9f2ea1;\n --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --ff-progress-bar-bg-color: #f0f0f0;\n --ff-machine-partial-public-status-color: #ea850e;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --card-total-defect-color: #71347b;\n --card-defect-density: #5dc70c;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922b3e;\n --follow-user-icon-orange: #ed760e;\n --follow-user-icon-black: #0a0a0a;\n --follow-user-icon-pink: #e63244;\n --follow-user-icon-blue: #3b83bd;\n --follow-user-icon-navy: #20214f;\n --follow-user-icon-lightGreen: #bdecb6;\n --follow-user-icon-gray: #d9d9d9;\n --follow-user-icon-yellow: #cda434;\n --follow-user-icon-salmon: #d36e70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n --defect-trivial: #8bc34a;\n --defect-text: #9e9e9e;\n --defect-tweak: #ffc107;\n --defect-minor: #ffeb3b;\n --defect-majour: #ff9800;\n --defect-crash: #f44336;\n --defect-block: #d32f2f;\n --defect-blocker: #b71c1c;\n --defect-critical: #c2185b;\n --defect-catastrophic: #6a1b9a;\n --defect-serious: #7b1fa2;\n --defect-normal: #03a9f4;\n --defect-small-or-trivial: #4dd0e1;\n}\n\n:root {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --available-memory-bg: #9f2ea1;\n --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --ff-progress-bar-bg-color: #f0f0f0;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --card-total-defect-color: #71347b;\n --card-defect-density: #5dc70c;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922b3e;\n --follow-user-icon-orange: #ed760e;\n --follow-user-icon-black: #0a0a0a;\n --follow-user-icon-pink: #e63244;\n --follow-user-icon-blue: #3b83bd;\n --follow-user-icon-navy: #20214f;\n --follow-user-icon-lightGreen: #bdecb6;\n --follow-user-icon-gray: #d9d9d9;\n --follow-user-icon-yellow: #cda434;\n --follow-user-icon-salmon: #d36e70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n --defect-trivial: #8bc34a;\n --defect-text: #9e9e9e;\n --defect-tweak: #ffc107;\n --defect-minor: #ffeb3b;\n --defect-majour: #ff9800;\n --defect-crash: #f44336;\n --defect-block: #d32f2f;\n --defect-blocker: #b71c1c;\n --defect-critical: #c2185b;\n --defect-catastrophic: #6a1b9a;\n --defect-serious: #7b1fa2;\n --defect-normal: #03a9f4;\n --defect-small-or-trivial: #4dd0e1;\n}\n\n:root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #434db8;\n --text-color: #3c3838;\n --description-text: #7a7a7a;\n --click-able-text-color: #434db8;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #434db8;\n --border-color: #c2d2fb;\n --disable-color: rgba(67, 77, 184, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: #e9ebfb;\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #434db8;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #434db8;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #434db8;\n --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n --secondary-button-color-text: #6f7070;\n --secondary-button-border: #6f7070;\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #1e161f;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #434db8;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #434db8;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #ffffff;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #434db8;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #434db8;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #434db8;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #fcce46;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #808080;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #434db8;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #434db8;\n --ff-search-field-hover-color: #edecf8;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #434db8;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #434db8;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #1e161f;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #434db8;\n --ff-connecting-branch-modal-header: #434db8;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #434db8;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #edecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #434db8;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --card-total-defect-color: #71347b;\n --card-defect-density: #5dc70c;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n}\n\n.ff-light-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --available-memory-bg: #9f2ea1;\n --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --ff-progress-bar-bg-color: #f0f0f0;\n --ff-machine-partial-public-status-color: #ea850e;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --card-total-defect-color: #71347b;\n --card-defect-density: #5dc70c;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922b3e;\n --follow-user-icon-orange: #ed760e;\n --follow-user-icon-black: #0a0a0a;\n --follow-user-icon-pink: #e63244;\n --follow-user-icon-blue: #3b83bd;\n --follow-user-icon-navy: #20214f;\n --follow-user-icon-lightGreen: #bdecb6;\n --follow-user-icon-gray: #d9d9d9;\n --follow-user-icon-yellow: #cda434;\n --follow-user-icon-salmon: #d36e70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n --defect-trivial: #8bc34a;\n --defect-text: #9e9e9e;\n --defect-tweak: #ffc107;\n --defect-minor: #ffeb3b;\n --defect-majour: #ff9800;\n --defect-crash: #f44336;\n --defect-block: #d32f2f;\n --defect-blocker: #b71c1c;\n --defect-critical: #c2185b;\n --defect-catastrophic: #6a1b9a;\n --defect-serious: #7b1fa2;\n --defect-normal: #03a9f4;\n --defect-small-or-trivial: #4dd0e1;\n}\n\n.ff-dark-theme {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --available-memory-bg: #9f2ea1;\n --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --ff-progress-bar-bg-color: #f0f0f0;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3c3838;\n --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n --excel-header-bg: #f4ecf8;\n --excel-header-border: #d8d4da;\n --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n --excel-sheet-header-background-color: #f3f0f5;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --ff-machine-input-field-border-color: #a3a3a3;\n --ff-machine-input-field-label-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --card-total-defect-color: #71347b;\n --card-defect-density: #5dc70c;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922b3e;\n --follow-user-icon-orange: #ed760e;\n --follow-user-icon-black: #0a0a0a;\n --follow-user-icon-pink: #e63244;\n --follow-user-icon-blue: #3b83bd;\n --follow-user-icon-navy: #20214f;\n --follow-user-icon-lightGreen: #bdecb6;\n --follow-user-icon-gray: #d9d9d9;\n --follow-user-icon-yellow: #cda434;\n --follow-user-icon-salmon: #d36e70;\n --dataset-tooltip-title: #808080;\n --dataset-tooltip-value: #ffffff;\n --defect-trivial: #8bc34a;\n --defect-text: #9e9e9e;\n --defect-tweak: #ffc107;\n --defect-minor: #ffeb3b;\n --defect-majour: #ff9800;\n --defect-crash: #f44336;\n --defect-block: #d32f2f;\n --defect-blocker: #b71c1c;\n --defect-critical: #c2185b;\n --defect-catastrophic: #6a1b9a;\n --defect-serious: #7b1fa2;\n --defect-normal: #03a9f4;\n --defect-small-or-trivial: #4dd0e1;\n}\n\n.ff-blue-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #434db8;\n --text-color: #3c3838;\n --description-text: #7a7a7a;\n --click-able-text-color: #434db8;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #434db8;\n --border-color: #c2d2fb;\n --disable-color: rgba(67, 77, 184, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: #e9ebfb;\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #434db8;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #434db8;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #434db8;\n --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n --secondary-button-color-text: #6f7070;\n --secondary-button-border: #6f7070;\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #1e161f;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #434db8;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #434db8;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #ffffff;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #434db8;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #434db8;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #434db8;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #fcce46;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #808080;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #434db8;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #434db8;\n --ff-search-field-hover-color: #edecf8;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #434db8;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expires_soon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #434db8;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #1e161f;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #434db8;\n --ff-connecting-branch-modal-header: #434db8;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #434db8;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #edecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #434db8;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --card-total-defect-color: #71347b;\n --card-defect-density: #5dc70c;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n --follow-user-icon-red: #922B3E;\n --follow-user-icon-orange: #ED760E;\n --follow-user-icon-black: #0A0A0A;\n --follow-user-icon-pink: #E63244;\n --follow-user-icon-blue: #3B83BD;\n --follow-user-icon-navy: #20214F;\n --follow-user-icon-lightGreen: #BDECB6;\n --follow-user-icon-gray: #D9D9D9;\n --follow-user-icon-yellow: #CDA434;\n --follow-user-icon-salmon: #D36E70;\n}";
|
|
1192
1210
|
styleInject(css_248z$1f);
|
|
1193
1211
|
|
|
1194
1212
|
const ThemeContext = /*#__PURE__*/React.createContext(undefined);
|
|
@@ -1589,22 +1607,27 @@ const Accordion = ({
|
|
|
1589
1607
|
accordionStateIconName = 'arrow_down',
|
|
1590
1608
|
AccordionStateIconWidth = 12,
|
|
1591
1609
|
AccordionStateIconHeight = 8,
|
|
1592
|
-
isExpand
|
|
1610
|
+
isExpand,
|
|
1611
|
+
onClick,
|
|
1612
|
+
className = ''
|
|
1593
1613
|
}) => {
|
|
1594
1614
|
const [isAccordionExpanded, setIsAccordionExpanded] = React.useState(isExpand ?? true);
|
|
1595
1615
|
const onAccordionClick = () => {
|
|
1596
|
-
|
|
1616
|
+
if (onClick) {
|
|
1617
|
+
onClick();
|
|
1618
|
+
}
|
|
1619
|
+
if (!disable) {
|
|
1620
|
+
setIsAccordionExpanded(!isAccordionExpanded);
|
|
1621
|
+
}
|
|
1597
1622
|
};
|
|
1598
1623
|
return jsxRuntime.jsxs("div", {
|
|
1599
|
-
className:
|
|
1624
|
+
className: `ff-accordion ${className}`,
|
|
1600
1625
|
children: [jsxRuntime.jsxs("div", {
|
|
1601
|
-
className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'}`,
|
|
1626
|
+
className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'} `,
|
|
1602
1627
|
style: {
|
|
1603
1628
|
color: color || '--tooltip-bg-color'
|
|
1604
1629
|
},
|
|
1605
|
-
onClick:
|
|
1606
|
-
!disable && onAccordionClick();
|
|
1607
|
-
},
|
|
1630
|
+
onClick: onAccordionClick,
|
|
1608
1631
|
children: [jsxRuntime.jsx(Tooltip, {
|
|
1609
1632
|
title: disableInfoMessage,
|
|
1610
1633
|
children: jsxRuntime.jsx(Typography, {
|
|
@@ -1617,10 +1640,12 @@ const Accordion = ({
|
|
|
1617
1640
|
}), jsxRuntime.jsx(Icon, {
|
|
1618
1641
|
name: accordionStateIconName,
|
|
1619
1642
|
hoverEffect: false,
|
|
1620
|
-
className:
|
|
1643
|
+
className: classNames('accordion-arrow', {
|
|
1644
|
+
expanded: isAccordionExpanded
|
|
1645
|
+
}),
|
|
1621
1646
|
width: AccordionStateIconWidth,
|
|
1622
1647
|
height: AccordionStateIconHeight,
|
|
1623
|
-
color:
|
|
1648
|
+
color: "var(--table-with-accordion-icon-color)"
|
|
1624
1649
|
})]
|
|
1625
1650
|
}), !disable && isAccordionExpanded && jsxRuntime.jsx("div", {
|
|
1626
1651
|
style: {
|
|
@@ -1644,7 +1669,7 @@ const dropdownDefaultCSSData$1 = {
|
|
|
1644
1669
|
var css_248z$1a = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n position: absolute;\n background: var(--drawer-footer-bg);\n z-index: 1000;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n border: 0.5px solid var(--ff-select-option-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n margin-block: 4px;\n max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n max-height: 128px;\n overflow-y: auto;\n border-radius: 2px;\n overflow-x: hidden;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n color: var(--ff-select-text-color);\n text-align: center;\n margin: 0;\n padding: 7px;\n line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n height: 32px;\n padding: 4px 8px;\n gap: 4px;\n border-radius: 4px 0px 0px 0px;\n background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n box-sizing: border-box;\n width: 100%;\n border-top: 1px solid var(--slider-table-color);\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
1645
1670
|
styleInject(css_248z$1a);
|
|
1646
1671
|
|
|
1647
|
-
var css_248z$19 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 4px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom .ff-tick-icon {\n padding: 2px !important;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover
|
|
1672
|
+
var css_248z$19 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 4px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom .ff-tick-icon {\n padding: 2px !important;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background-color: var(--ff-card-passed-status-bg-color);\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background-color: var(--ff-card-failed-status-bg-color);\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background-color: var(--ff-card-warning-status-bg-color);\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background-color: var(--ff-card-skipped-status-bg-color);\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background-color: var(--ff-card-flaky-status-bg-color);\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background: var(--ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}";
|
|
1648
1673
|
styleInject(css_248z$19);
|
|
1649
1674
|
|
|
1650
1675
|
const Checkbox = ({
|
|
@@ -3208,7 +3233,7 @@ const Select$1 = ({
|
|
|
3208
3233
|
});
|
|
3209
3234
|
};
|
|
3210
3235
|
|
|
3211
|
-
var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.ff-textarea-container .ff-textarea
|
|
3236
|
+
var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.ff-textarea-container .ff-textarea ::-webkit-scrollbar, .ff-textarea-container .ff-textarea-label-container ::-webkit-scrollbar {\n display: none;\n}\n.ff-textarea-container .ff-textarea--resize {\n resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n border-color: var(--default-icon-color);\n color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n border-color: var(--ff-error-light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n padding: 1px;\n height: 10px;\n width: auto;\n background-color: var(--drawer-footer-bg);\n color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n color: var(--ff-error-light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n color: var(--ff-error-light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.5px;\n text-align: left;\n top: -6px;\n background-color: transparent;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n color: var(--ff-error-light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n letter-spacing: 0.5px;\n top: -6px;\n background-color: transparent;\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n cursor: not-allowed;\n}";
|
|
3212
3237
|
styleInject(css_248z$$);
|
|
3213
3238
|
|
|
3214
3239
|
const Textarea = ({
|
|
@@ -3925,8 +3950,6 @@ function LiveRegion(_ref) {
|
|
|
3925
3950
|
// Hide element visually but keep it readable by screen readers
|
|
3926
3951
|
const visuallyHidden = {
|
|
3927
3952
|
position: 'fixed',
|
|
3928
|
-
top: 0,
|
|
3929
|
-
left: 0,
|
|
3930
3953
|
width: 1,
|
|
3931
3954
|
height: 1,
|
|
3932
3955
|
margin: -1,
|
|
@@ -4916,12 +4939,11 @@ var KeyboardCode;
|
|
|
4916
4939
|
KeyboardCode["Up"] = "ArrowUp";
|
|
4917
4940
|
KeyboardCode["Esc"] = "Escape";
|
|
4918
4941
|
KeyboardCode["Enter"] = "Enter";
|
|
4919
|
-
KeyboardCode["Tab"] = "Tab";
|
|
4920
4942
|
})(KeyboardCode || (KeyboardCode = {}));
|
|
4921
4943
|
const defaultKeyboardCodes = {
|
|
4922
4944
|
start: [KeyboardCode.Space, KeyboardCode.Enter],
|
|
4923
4945
|
cancel: [KeyboardCode.Esc],
|
|
4924
|
-
end: [KeyboardCode.Space, KeyboardCode.Enter
|
|
4946
|
+
end: [KeyboardCode.Space, KeyboardCode.Enter]
|
|
4925
4947
|
};
|
|
4926
4948
|
const defaultKeyboardCoordinateGetter = (event, _ref) => {
|
|
4927
4949
|
let {
|
|
@@ -5220,9 +5242,6 @@ class AbstractPointerSensor {
|
|
|
5220
5242
|
passive: false
|
|
5221
5243
|
});
|
|
5222
5244
|
this.listeners.add(events.end.name, this.handleEnd);
|
|
5223
|
-
if (events.cancel) {
|
|
5224
|
-
this.listeners.add(events.cancel.name, this.handleCancel);
|
|
5225
|
-
}
|
|
5226
5245
|
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
|
5227
5246
|
this.windowListeners.add(EventName.DragStart, preventDefault);
|
|
5228
5247
|
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
|
@@ -5238,11 +5257,9 @@ class AbstractPointerSensor {
|
|
|
5238
5257
|
}
|
|
5239
5258
|
if (isDelayConstraint(activationConstraint)) {
|
|
5240
5259
|
this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
|
|
5241
|
-
this.handlePending(activationConstraint);
|
|
5242
5260
|
return;
|
|
5243
5261
|
}
|
|
5244
5262
|
if (isDistanceConstraint(activationConstraint)) {
|
|
5245
|
-
this.handlePending(activationConstraint);
|
|
5246
5263
|
return;
|
|
5247
5264
|
}
|
|
5248
5265
|
}
|
|
@@ -5259,13 +5276,6 @@ class AbstractPointerSensor {
|
|
|
5259
5276
|
this.timeoutId = null;
|
|
5260
5277
|
}
|
|
5261
5278
|
}
|
|
5262
|
-
handlePending(constraint, offset) {
|
|
5263
|
-
const {
|
|
5264
|
-
active,
|
|
5265
|
-
onPending
|
|
5266
|
-
} = this.props;
|
|
5267
|
-
onPending(active, constraint, this.initialCoordinates, offset);
|
|
5268
|
-
}
|
|
5269
5279
|
handleStart() {
|
|
5270
5280
|
const {
|
|
5271
5281
|
initialCoordinates
|
|
@@ -5319,7 +5329,6 @@ class AbstractPointerSensor {
|
|
|
5319
5329
|
return this.handleCancel();
|
|
5320
5330
|
}
|
|
5321
5331
|
}
|
|
5322
|
-
this.handlePending(activationConstraint, delta);
|
|
5323
5332
|
return;
|
|
5324
5333
|
}
|
|
5325
5334
|
if (event.cancelable) {
|
|
@@ -5329,24 +5338,16 @@ class AbstractPointerSensor {
|
|
|
5329
5338
|
}
|
|
5330
5339
|
handleEnd() {
|
|
5331
5340
|
const {
|
|
5332
|
-
onAbort,
|
|
5333
5341
|
onEnd
|
|
5334
5342
|
} = this.props;
|
|
5335
5343
|
this.detach();
|
|
5336
|
-
if (!this.activated) {
|
|
5337
|
-
onAbort(this.props.active);
|
|
5338
|
-
}
|
|
5339
5344
|
onEnd();
|
|
5340
5345
|
}
|
|
5341
5346
|
handleCancel() {
|
|
5342
5347
|
const {
|
|
5343
|
-
onAbort,
|
|
5344
5348
|
onCancel
|
|
5345
5349
|
} = this.props;
|
|
5346
5350
|
this.detach();
|
|
5347
|
-
if (!this.activated) {
|
|
5348
|
-
onAbort(this.props.active);
|
|
5349
|
-
}
|
|
5350
5351
|
onCancel();
|
|
5351
5352
|
}
|
|
5352
5353
|
handleKeydown(event) {
|
|
@@ -5360,9 +5361,6 @@ class AbstractPointerSensor {
|
|
|
5360
5361
|
}
|
|
5361
5362
|
}
|
|
5362
5363
|
const events = {
|
|
5363
|
-
cancel: {
|
|
5364
|
-
name: 'pointercancel'
|
|
5365
|
-
},
|
|
5366
5364
|
move: {
|
|
5367
5365
|
name: 'pointermove'
|
|
5368
5366
|
},
|
|
@@ -5435,9 +5433,6 @@ MouseSensor.activators = [{
|
|
|
5435
5433
|
}
|
|
5436
5434
|
}];
|
|
5437
5435
|
const events$2 = {
|
|
5438
|
-
cancel: {
|
|
5439
|
-
name: 'touchcancel'
|
|
5440
|
-
},
|
|
5441
5436
|
move: {
|
|
5442
5437
|
name: 'touchmove'
|
|
5443
5438
|
},
|
|
@@ -5639,11 +5634,11 @@ function useScrollIntent(_ref2) {
|
|
|
5639
5634
|
}, [disabled, delta, previousDelta]);
|
|
5640
5635
|
}
|
|
5641
5636
|
function useCachedNode(draggableNodes, id) {
|
|
5642
|
-
const draggableNode = id
|
|
5637
|
+
const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
|
|
5643
5638
|
const node = draggableNode ? draggableNode.node.current : null;
|
|
5644
5639
|
return useLazyMemo(cachedNode => {
|
|
5645
5640
|
var _ref;
|
|
5646
|
-
if (id
|
|
5641
|
+
if (id === null) {
|
|
5647
5642
|
return null;
|
|
5648
5643
|
} // In some cases, the draggable node can unmount while dragging
|
|
5649
5644
|
// This is the case for virtualized lists. In those situations,
|
|
@@ -5851,26 +5846,7 @@ function useRect(element, measure, fallbackRect) {
|
|
|
5851
5846
|
if (measure === void 0) {
|
|
5852
5847
|
measure = defaultMeasure;
|
|
5853
5848
|
}
|
|
5854
|
-
const [rect,
|
|
5855
|
-
function measureRect() {
|
|
5856
|
-
setRect(currentRect => {
|
|
5857
|
-
if (!element) {
|
|
5858
|
-
return null;
|
|
5859
|
-
}
|
|
5860
|
-
if (element.isConnected === false) {
|
|
5861
|
-
var _ref;
|
|
5862
|
-
|
|
5863
|
-
// Fall back to last rect we measured if the element is
|
|
5864
|
-
// no longer connected to the DOM.
|
|
5865
|
-
return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
|
|
5866
|
-
}
|
|
5867
|
-
const newRect = measure(element);
|
|
5868
|
-
if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
|
|
5869
|
-
return currentRect;
|
|
5870
|
-
}
|
|
5871
|
-
return newRect;
|
|
5872
|
-
});
|
|
5873
|
-
}
|
|
5849
|
+
const [rect, measureRect] = React.useReducer(reducer, null);
|
|
5874
5850
|
const mutationObserver = useMutationObserver({
|
|
5875
5851
|
callback(records) {
|
|
5876
5852
|
if (!element) {
|
|
@@ -5905,6 +5881,23 @@ function useRect(element, measure, fallbackRect) {
|
|
|
5905
5881
|
}
|
|
5906
5882
|
}, [element]);
|
|
5907
5883
|
return rect;
|
|
5884
|
+
function reducer(currentRect) {
|
|
5885
|
+
if (!element) {
|
|
5886
|
+
return null;
|
|
5887
|
+
}
|
|
5888
|
+
if (element.isConnected === false) {
|
|
5889
|
+
var _ref;
|
|
5890
|
+
|
|
5891
|
+
// Fall back to last rect we measured if the element is
|
|
5892
|
+
// no longer connected to the DOM.
|
|
5893
|
+
return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
|
|
5894
|
+
}
|
|
5895
|
+
const newRect = measure(element);
|
|
5896
|
+
if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
|
|
5897
|
+
return currentRect;
|
|
5898
|
+
}
|
|
5899
|
+
return newRect;
|
|
5900
|
+
}
|
|
5908
5901
|
}
|
|
5909
5902
|
function useRectDelta(rect) {
|
|
5910
5903
|
const initialRect = useInitialValue(rect);
|
|
@@ -6050,24 +6043,28 @@ function useRects(elements, measure) {
|
|
|
6050
6043
|
}
|
|
6051
6044
|
const [firstElement] = elements;
|
|
6052
6045
|
const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
|
|
6053
|
-
const [rects,
|
|
6054
|
-
function measureRects() {
|
|
6055
|
-
setRects(() => {
|
|
6056
|
-
if (!elements.length) {
|
|
6057
|
-
return defaultValue$2;
|
|
6058
|
-
}
|
|
6059
|
-
return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
|
|
6060
|
-
});
|
|
6061
|
-
}
|
|
6046
|
+
const [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
|
|
6062
6047
|
const resizeObserver = useResizeObserver({
|
|
6063
6048
|
callback: measureRects
|
|
6064
6049
|
});
|
|
6065
|
-
|
|
6066
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
6050
|
+
if (elements.length > 0 && rects === defaultValue$2) {
|
|
6067
6051
|
measureRects();
|
|
6068
|
-
|
|
6052
|
+
}
|
|
6053
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
6054
|
+
if (elements.length) {
|
|
6055
|
+
elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
|
|
6056
|
+
} else {
|
|
6057
|
+
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
6058
|
+
measureRects();
|
|
6059
|
+
}
|
|
6069
6060
|
}, [elements]);
|
|
6070
6061
|
return rects;
|
|
6062
|
+
function reducer() {
|
|
6063
|
+
if (!elements.length) {
|
|
6064
|
+
return defaultValue$2;
|
|
6065
|
+
}
|
|
6066
|
+
return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
|
|
6067
|
+
}
|
|
6071
6068
|
}
|
|
6072
6069
|
function getMeasurableNode(node) {
|
|
6073
6070
|
if (!node) {
|
|
@@ -6234,7 +6231,7 @@ function reducer$1(state, action) {
|
|
|
6234
6231
|
}
|
|
6235
6232
|
};
|
|
6236
6233
|
case Action.DragMove:
|
|
6237
|
-
if (state.draggable.active
|
|
6234
|
+
if (!state.draggable.active) {
|
|
6238
6235
|
return state;
|
|
6239
6236
|
}
|
|
6240
6237
|
return {
|
|
@@ -6506,7 +6503,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6506
6503
|
containers: droppableContainers
|
|
6507
6504
|
}
|
|
6508
6505
|
} = state;
|
|
6509
|
-
const node = activeId
|
|
6506
|
+
const node = activeId ? draggableNodes.get(activeId) : null;
|
|
6510
6507
|
const activeRects = React.useRef({
|
|
6511
6508
|
initial: null,
|
|
6512
6509
|
translated: null
|
|
@@ -6541,7 +6538,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6541
6538
|
const autoScrollOptions = getAutoScrollerOptions();
|
|
6542
6539
|
const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
|
|
6543
6540
|
useLayoutShiftScrollCompensation({
|
|
6544
|
-
activeNode: activeId
|
|
6541
|
+
activeNode: activeId ? draggableNodes.get(activeId) : null,
|
|
6545
6542
|
config: autoScrollOptions.layoutShiftCompensation,
|
|
6546
6543
|
initialRect: initialActiveNodeRect,
|
|
6547
6544
|
measure: measuringConfiguration.draggable.measure
|
|
@@ -6619,7 +6616,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6619
6616
|
|
|
6620
6617
|
const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
|
|
6621
6618
|
const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
|
|
6622
|
-
const activeSensorRef = React.useRef(null);
|
|
6623
6619
|
const instantiateSensor = React.useCallback((event, _ref2) => {
|
|
6624
6620
|
let {
|
|
6625
6621
|
sensor: Sensor,
|
|
@@ -6641,43 +6637,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6641
6637
|
// Sensors need to be instantiated with refs for arguments that change over time
|
|
6642
6638
|
// otherwise they are frozen in time with the stale arguments
|
|
6643
6639
|
context: sensorContext,
|
|
6644
|
-
onAbort(id) {
|
|
6645
|
-
const draggableNode = draggableNodes.get(id);
|
|
6646
|
-
if (!draggableNode) {
|
|
6647
|
-
return;
|
|
6648
|
-
}
|
|
6649
|
-
const {
|
|
6650
|
-
onDragAbort
|
|
6651
|
-
} = latestProps.current;
|
|
6652
|
-
const event = {
|
|
6653
|
-
id
|
|
6654
|
-
};
|
|
6655
|
-
onDragAbort == null ? void 0 : onDragAbort(event);
|
|
6656
|
-
dispatchMonitorEvent({
|
|
6657
|
-
type: 'onDragAbort',
|
|
6658
|
-
event
|
|
6659
|
-
});
|
|
6660
|
-
},
|
|
6661
|
-
onPending(id, constraint, initialCoordinates, offset) {
|
|
6662
|
-
const draggableNode = draggableNodes.get(id);
|
|
6663
|
-
if (!draggableNode) {
|
|
6664
|
-
return;
|
|
6665
|
-
}
|
|
6666
|
-
const {
|
|
6667
|
-
onDragPending
|
|
6668
|
-
} = latestProps.current;
|
|
6669
|
-
const event = {
|
|
6670
|
-
id,
|
|
6671
|
-
constraint,
|
|
6672
|
-
initialCoordinates,
|
|
6673
|
-
offset
|
|
6674
|
-
};
|
|
6675
|
-
onDragPending == null ? void 0 : onDragPending(event);
|
|
6676
|
-
dispatchMonitorEvent({
|
|
6677
|
-
type: 'onDragPending',
|
|
6678
|
-
event
|
|
6679
|
-
});
|
|
6680
|
-
},
|
|
6681
6640
|
onStart(initialCoordinates) {
|
|
6682
6641
|
const id = activeRef.current;
|
|
6683
6642
|
if (id == null) {
|
|
@@ -6691,7 +6650,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6691
6650
|
onDragStart
|
|
6692
6651
|
} = latestProps.current;
|
|
6693
6652
|
const event = {
|
|
6694
|
-
activatorEvent,
|
|
6695
6653
|
active: {
|
|
6696
6654
|
id,
|
|
6697
6655
|
data: draggableNode.data,
|
|
@@ -6710,8 +6668,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6710
6668
|
type: 'onDragStart',
|
|
6711
6669
|
event
|
|
6712
6670
|
});
|
|
6713
|
-
setActiveSensor(activeSensorRef.current);
|
|
6714
|
-
setActivatorEvent(activatorEvent);
|
|
6715
6671
|
});
|
|
6716
6672
|
},
|
|
6717
6673
|
onMove(coordinates) {
|
|
@@ -6723,7 +6679,10 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6723
6679
|
onEnd: createHandler(Action.DragEnd),
|
|
6724
6680
|
onCancel: createHandler(Action.DragCancel)
|
|
6725
6681
|
});
|
|
6726
|
-
|
|
6682
|
+
ReactDOM.unstable_batchedUpdates(() => {
|
|
6683
|
+
setActiveSensor(sensorInstance);
|
|
6684
|
+
setActivatorEvent(event.nativeEvent);
|
|
6685
|
+
});
|
|
6727
6686
|
function createHandler(type) {
|
|
6728
6687
|
return async function handler() {
|
|
6729
6688
|
const {
|
|
@@ -6760,7 +6719,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6760
6719
|
setOver(null);
|
|
6761
6720
|
setActiveSensor(null);
|
|
6762
6721
|
setActivatorEvent(null);
|
|
6763
|
-
activeSensorRef.current = null;
|
|
6764
6722
|
const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
|
|
6765
6723
|
if (event) {
|
|
6766
6724
|
const handler = latestProps.current[eventName];
|
|
@@ -6982,7 +6940,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
|
|
|
6982
6940
|
});
|
|
6983
6941
|
const NullContext = /*#__PURE__*/React.createContext(null);
|
|
6984
6942
|
const defaultRole = 'button';
|
|
6985
|
-
const ID_PREFIX$1 = '
|
|
6943
|
+
const ID_PREFIX$1 = 'Droppable';
|
|
6986
6944
|
function useDraggable(_ref) {
|
|
6987
6945
|
let {
|
|
6988
6946
|
id,
|
|
@@ -7129,7 +7087,7 @@ function useDroppable(_ref) {
|
|
|
7129
7087
|
resizeObserverConnected.current = false;
|
|
7130
7088
|
resizeObserver.observe(nodeRef.current);
|
|
7131
7089
|
}, [nodeRef, resizeObserver]);
|
|
7132
|
-
|
|
7090
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
7133
7091
|
dispatch({
|
|
7134
7092
|
type: Action.RegisterDroppable,
|
|
7135
7093
|
element: {
|
|
@@ -7544,7 +7502,6 @@ var DNDCore = /*#__PURE__*/Object.freeze({
|
|
|
7544
7502
|
defaultCoordinates: defaultCoordinates,
|
|
7545
7503
|
defaultDropAnimation: defaultDropAnimationConfiguration,
|
|
7546
7504
|
defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
|
|
7547
|
-
defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
|
|
7548
7505
|
defaultScreenReaderInstructions: defaultScreenReaderInstructions,
|
|
7549
7506
|
getClientRect: getClientRect,
|
|
7550
7507
|
getFirstCollision: getFirstCollision,
|
|
@@ -8282,7 +8239,7 @@ const SortableRow = ({
|
|
|
8282
8239
|
transform,
|
|
8283
8240
|
transition
|
|
8284
8241
|
} = useSortable({
|
|
8285
|
-
id: row
|
|
8242
|
+
id: row?._id || row?.id,
|
|
8286
8243
|
disabled: row.disabled
|
|
8287
8244
|
});
|
|
8288
8245
|
const style = {
|
|
@@ -11325,14 +11282,13 @@ var isWeb = typeof window !== 'undefined' &&
|
|
|
11325
11282
|
function cloneObject(data) {
|
|
11326
11283
|
let copy;
|
|
11327
11284
|
const isArray = Array.isArray(data);
|
|
11328
|
-
const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
|
|
11329
11285
|
if (data instanceof Date) {
|
|
11330
11286
|
copy = new Date(data);
|
|
11331
11287
|
}
|
|
11332
11288
|
else if (data instanceof Set) {
|
|
11333
11289
|
copy = new Set(data);
|
|
11334
11290
|
}
|
|
11335
|
-
else if (!(isWeb && (data instanceof Blob ||
|
|
11291
|
+
else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
|
|
11336
11292
|
(isArray || isObject$2(data))) {
|
|
11337
11293
|
copy = isArray ? [] : {};
|
|
11338
11294
|
if (!isArray && !isPlainObject(data)) {
|
|
@@ -11391,7 +11347,7 @@ var set$1 = (object, path, value) => {
|
|
|
11391
11347
|
? []
|
|
11392
11348
|
: {};
|
|
11393
11349
|
}
|
|
11394
|
-
if (key === '__proto__'
|
|
11350
|
+
if (key === '__proto__') {
|
|
11395
11351
|
return;
|
|
11396
11352
|
}
|
|
11397
11353
|
object[key] = newValue;
|
|
@@ -11610,7 +11566,7 @@ function useFormState(props) {
|
|
|
11610
11566
|
_mounted.current = false;
|
|
11611
11567
|
};
|
|
11612
11568
|
}, [control]);
|
|
11613
|
-
return
|
|
11569
|
+
return getProxyFormState(formState, control, _localProxyFormState.current, false);
|
|
11614
11570
|
}
|
|
11615
11571
|
|
|
11616
11572
|
var isString = (value) => typeof value === 'string';
|
|
@@ -11706,67 +11662,6 @@ function useController(props) {
|
|
|
11706
11662
|
value,
|
|
11707
11663
|
...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
|
|
11708
11664
|
}));
|
|
11709
|
-
const fieldState = React.useMemo(() => Object.defineProperties({}, {
|
|
11710
|
-
invalid: {
|
|
11711
|
-
enumerable: true,
|
|
11712
|
-
get: () => !!get$1(formState.errors, name),
|
|
11713
|
-
},
|
|
11714
|
-
isDirty: {
|
|
11715
|
-
enumerable: true,
|
|
11716
|
-
get: () => !!get$1(formState.dirtyFields, name),
|
|
11717
|
-
},
|
|
11718
|
-
isTouched: {
|
|
11719
|
-
enumerable: true,
|
|
11720
|
-
get: () => !!get$1(formState.touchedFields, name),
|
|
11721
|
-
},
|
|
11722
|
-
isValidating: {
|
|
11723
|
-
enumerable: true,
|
|
11724
|
-
get: () => !!get$1(formState.validatingFields, name),
|
|
11725
|
-
},
|
|
11726
|
-
error: {
|
|
11727
|
-
enumerable: true,
|
|
11728
|
-
get: () => get$1(formState.errors, name),
|
|
11729
|
-
},
|
|
11730
|
-
}), [formState, name]);
|
|
11731
|
-
const field = React.useMemo(() => ({
|
|
11732
|
-
name,
|
|
11733
|
-
value,
|
|
11734
|
-
...(isBoolean(disabled) || formState.disabled
|
|
11735
|
-
? { disabled: formState.disabled || disabled }
|
|
11736
|
-
: {}),
|
|
11737
|
-
onChange: (event) => _registerProps.current.onChange({
|
|
11738
|
-
target: {
|
|
11739
|
-
value: getEventValue(event),
|
|
11740
|
-
name: name,
|
|
11741
|
-
},
|
|
11742
|
-
type: EVENTS.CHANGE,
|
|
11743
|
-
}),
|
|
11744
|
-
onBlur: () => _registerProps.current.onBlur({
|
|
11745
|
-
target: {
|
|
11746
|
-
value: get$1(control._formValues, name),
|
|
11747
|
-
name: name,
|
|
11748
|
-
},
|
|
11749
|
-
type: EVENTS.BLUR,
|
|
11750
|
-
}),
|
|
11751
|
-
ref: (elm) => {
|
|
11752
|
-
const field = get$1(control._fields, name);
|
|
11753
|
-
if (field && elm) {
|
|
11754
|
-
field._f.ref = {
|
|
11755
|
-
focus: () => elm.focus(),
|
|
11756
|
-
select: () => elm.select(),
|
|
11757
|
-
setCustomValidity: (message) => elm.setCustomValidity(message),
|
|
11758
|
-
reportValidity: () => elm.reportValidity(),
|
|
11759
|
-
};
|
|
11760
|
-
}
|
|
11761
|
-
},
|
|
11762
|
-
}), [
|
|
11763
|
-
name,
|
|
11764
|
-
control._formValues,
|
|
11765
|
-
disabled,
|
|
11766
|
-
formState.disabled,
|
|
11767
|
-
value,
|
|
11768
|
-
control._fields,
|
|
11769
|
-
]);
|
|
11770
11665
|
React.useEffect(() => {
|
|
11771
11666
|
const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
|
|
11772
11667
|
const updateMounted = (name, value) => {
|
|
@@ -11792,7 +11687,7 @@ function useController(props) {
|
|
|
11792
11687
|
};
|
|
11793
11688
|
}, [name, control, isArrayField, shouldUnregister]);
|
|
11794
11689
|
React.useEffect(() => {
|
|
11795
|
-
if (
|
|
11690
|
+
if (get$1(control._fields, name)) {
|
|
11796
11691
|
control._updateDisabledField({
|
|
11797
11692
|
disabled,
|
|
11798
11693
|
fields: control._fields,
|
|
@@ -11801,11 +11696,63 @@ function useController(props) {
|
|
|
11801
11696
|
});
|
|
11802
11697
|
}
|
|
11803
11698
|
}, [disabled, name, control]);
|
|
11804
|
-
return
|
|
11805
|
-
field
|
|
11699
|
+
return {
|
|
11700
|
+
field: {
|
|
11701
|
+
name,
|
|
11702
|
+
value,
|
|
11703
|
+
...(isBoolean(disabled) || formState.disabled
|
|
11704
|
+
? { disabled: formState.disabled || disabled }
|
|
11705
|
+
: {}),
|
|
11706
|
+
onChange: React.useCallback((event) => _registerProps.current.onChange({
|
|
11707
|
+
target: {
|
|
11708
|
+
value: getEventValue(event),
|
|
11709
|
+
name: name,
|
|
11710
|
+
},
|
|
11711
|
+
type: EVENTS.CHANGE,
|
|
11712
|
+
}), [name]),
|
|
11713
|
+
onBlur: React.useCallback(() => _registerProps.current.onBlur({
|
|
11714
|
+
target: {
|
|
11715
|
+
value: get$1(control._formValues, name),
|
|
11716
|
+
name: name,
|
|
11717
|
+
},
|
|
11718
|
+
type: EVENTS.BLUR,
|
|
11719
|
+
}), [name, control]),
|
|
11720
|
+
ref: React.useCallback((elm) => {
|
|
11721
|
+
const field = get$1(control._fields, name);
|
|
11722
|
+
if (field && elm) {
|
|
11723
|
+
field._f.ref = {
|
|
11724
|
+
focus: () => elm.focus(),
|
|
11725
|
+
select: () => elm.select(),
|
|
11726
|
+
setCustomValidity: (message) => elm.setCustomValidity(message),
|
|
11727
|
+
reportValidity: () => elm.reportValidity(),
|
|
11728
|
+
};
|
|
11729
|
+
}
|
|
11730
|
+
}, [control._fields, name]),
|
|
11731
|
+
},
|
|
11806
11732
|
formState,
|
|
11807
|
-
fieldState,
|
|
11808
|
-
|
|
11733
|
+
fieldState: Object.defineProperties({}, {
|
|
11734
|
+
invalid: {
|
|
11735
|
+
enumerable: true,
|
|
11736
|
+
get: () => !!get$1(formState.errors, name),
|
|
11737
|
+
},
|
|
11738
|
+
isDirty: {
|
|
11739
|
+
enumerable: true,
|
|
11740
|
+
get: () => !!get$1(formState.dirtyFields, name),
|
|
11741
|
+
},
|
|
11742
|
+
isTouched: {
|
|
11743
|
+
enumerable: true,
|
|
11744
|
+
get: () => !!get$1(formState.touchedFields, name),
|
|
11745
|
+
},
|
|
11746
|
+
isValidating: {
|
|
11747
|
+
enumerable: true,
|
|
11748
|
+
get: () => !!get$1(formState.validatingFields, name),
|
|
11749
|
+
},
|
|
11750
|
+
error: {
|
|
11751
|
+
enumerable: true,
|
|
11752
|
+
get: () => get$1(formState.errors, name),
|
|
11753
|
+
},
|
|
11754
|
+
}),
|
|
11755
|
+
};
|
|
11809
11756
|
}
|
|
11810
11757
|
|
|
11811
11758
|
/**
|
|
@@ -11855,7 +11802,7 @@ const Controller = (props) => props.render(useController(props));
|
|
|
11855
11802
|
const flatten = (obj) => {
|
|
11856
11803
|
const output = {};
|
|
11857
11804
|
for (const key of Object.keys(obj)) {
|
|
11858
|
-
if (isObjectType(obj[key])
|
|
11805
|
+
if (isObjectType(obj[key])) {
|
|
11859
11806
|
const nested = flatten(obj[key]);
|
|
11860
11807
|
for (const nestedKey of Object.keys(nested)) {
|
|
11861
11808
|
output[`${key}.${nestedKey}`] = nested[nestedKey];
|
|
@@ -11924,7 +11871,7 @@ function Form(props) {
|
|
|
11924
11871
|
headers && headers['Content-Type'],
|
|
11925
11872
|
encType,
|
|
11926
11873
|
].some((value) => value && value.includes('json'));
|
|
11927
|
-
const response = await fetch(
|
|
11874
|
+
const response = await fetch(action, {
|
|
11928
11875
|
method,
|
|
11929
11876
|
headers: {
|
|
11930
11877
|
...headers,
|
|
@@ -12422,7 +12369,7 @@ var updateAt = (fieldValues, index, value) => {
|
|
|
12422
12369
|
*/
|
|
12423
12370
|
function useFieldArray(props) {
|
|
12424
12371
|
const methods = useFormContext();
|
|
12425
|
-
const { control = methods.control, name, keyName = 'id', shouldUnregister,
|
|
12372
|
+
const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
|
|
12426
12373
|
const [fields, setFields] = React.useState(control._getFieldArray(name));
|
|
12427
12374
|
const ids = React.useRef(control._getFieldArray(name).map(generateId));
|
|
12428
12375
|
const _fieldIds = React.useRef(fields);
|
|
@@ -12431,8 +12378,8 @@ function useFieldArray(props) {
|
|
|
12431
12378
|
_name.current = name;
|
|
12432
12379
|
_fieldIds.current = fields;
|
|
12433
12380
|
control._names.array.add(name);
|
|
12434
|
-
rules &&
|
|
12435
|
-
control.register(name, rules);
|
|
12381
|
+
props.rules &&
|
|
12382
|
+
control.register(name, props.rules);
|
|
12436
12383
|
useSubscribe({
|
|
12437
12384
|
next: ({ values, name: fieldArrayName, }) => {
|
|
12438
12385
|
if (fieldArrayName === _name.current || !fieldArrayName) {
|
|
@@ -12476,8 +12423,6 @@ function useFieldArray(props) {
|
|
|
12476
12423
|
ids.current = removeArrayAt(ids.current, index);
|
|
12477
12424
|
updateValues(updatedFieldArrayValues);
|
|
12478
12425
|
setFields(updatedFieldArrayValues);
|
|
12479
|
-
!Array.isArray(get$1(control._fields, name)) &&
|
|
12480
|
-
set$1(control._fields, name, undefined);
|
|
12481
12426
|
control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
|
|
12482
12427
|
argA: index,
|
|
12483
12428
|
});
|
|
@@ -12792,8 +12737,7 @@ var getRuleValue = (rule) => isUndefined(rule)
|
|
|
12792
12737
|
: rule;
|
|
12793
12738
|
|
|
12794
12739
|
const ASYNC_FUNCTION = 'AsyncFunction';
|
|
12795
|
-
var hasPromiseValidation = (fieldReference) =>
|
|
12796
|
-
!!fieldReference.validate &&
|
|
12740
|
+
var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
|
|
12797
12741
|
!!((isFunction$1(fieldReference.validate) &&
|
|
12798
12742
|
fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
|
|
12799
12743
|
(isObject$2(fieldReference.validate) &&
|
|
@@ -12922,7 +12866,7 @@ function createFormControl(props = {}) {
|
|
|
12922
12866
|
timer = setTimeout(callback, wait);
|
|
12923
12867
|
};
|
|
12924
12868
|
const _updateValid = async (shouldUpdateValid) => {
|
|
12925
|
-
if (!
|
|
12869
|
+
if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
|
12926
12870
|
const isValid = _options.resolver
|
|
12927
12871
|
? isEmptyObject((await _executeSchema()).errors)
|
|
12928
12872
|
: await executeBuiltInValidation(_fields, true);
|
|
@@ -12934,7 +12878,7 @@ function createFormControl(props = {}) {
|
|
|
12934
12878
|
}
|
|
12935
12879
|
};
|
|
12936
12880
|
const _updateIsValidating = (names, isValidating) => {
|
|
12937
|
-
if (!
|
|
12881
|
+
if (!props.disabled &&
|
|
12938
12882
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
|
12939
12883
|
(names || Array.from(_names.mount)).forEach((name) => {
|
|
12940
12884
|
if (name) {
|
|
@@ -12950,7 +12894,7 @@ function createFormControl(props = {}) {
|
|
|
12950
12894
|
}
|
|
12951
12895
|
};
|
|
12952
12896
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
|
12953
|
-
if (args && method && !
|
|
12897
|
+
if (args && method && !props.disabled) {
|
|
12954
12898
|
_state.action = true;
|
|
12955
12899
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
|
12956
12900
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
|
@@ -13014,7 +12958,7 @@ function createFormControl(props = {}) {
|
|
|
13014
12958
|
const output = {
|
|
13015
12959
|
name,
|
|
13016
12960
|
};
|
|
13017
|
-
if (!
|
|
12961
|
+
if (!props.disabled) {
|
|
13018
12962
|
const disabledField = !!(get$1(_fields, name) &&
|
|
13019
12963
|
get$1(_fields, name)._f &&
|
|
13020
12964
|
get$1(_fields, name)._f.disabled);
|
|
@@ -13055,9 +12999,9 @@ function createFormControl(props = {}) {
|
|
|
13055
12999
|
const shouldUpdateValid = _proxyFormState.isValid &&
|
|
13056
13000
|
isBoolean(isValid) &&
|
|
13057
13001
|
_formState.isValid !== isValid;
|
|
13058
|
-
if (
|
|
13002
|
+
if (props.delayError && error) {
|
|
13059
13003
|
delayErrorCallback = debounce(() => updateErrors(name, error));
|
|
13060
|
-
delayErrorCallback(
|
|
13004
|
+
delayErrorCallback(props.delayError);
|
|
13061
13005
|
}
|
|
13062
13006
|
else {
|
|
13063
13007
|
clearTimeout(timer);
|
|
@@ -13150,7 +13094,7 @@ function createFormControl(props = {}) {
|
|
|
13150
13094
|
}
|
|
13151
13095
|
_names.unMount = new Set();
|
|
13152
13096
|
};
|
|
13153
|
-
const _getDirty = (name, data) => !
|
|
13097
|
+
const _getDirty = (name, data) => !props.disabled &&
|
|
13154
13098
|
(name && data && set$1(_formValues, name, data),
|
|
13155
13099
|
!deepEqual(getValues(), _defaultValues));
|
|
13156
13100
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
|
@@ -13162,7 +13106,7 @@ function createFormControl(props = {}) {
|
|
|
13162
13106
|
? { [names]: defaultValue }
|
|
13163
13107
|
: defaultValue),
|
|
13164
13108
|
}, isGlobal, defaultValue);
|
|
13165
|
-
const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name,
|
|
13109
|
+
const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get$1(_defaultValues, name, []) : []));
|
|
13166
13110
|
const setFieldValue = (name, value, options = {}) => {
|
|
13167
13111
|
const field = get$1(_fields, name);
|
|
13168
13112
|
let fieldValue = value;
|
|
@@ -13295,7 +13239,7 @@ function createFormControl(props = {}) {
|
|
|
13295
13239
|
});
|
|
13296
13240
|
if (shouldSkipValidation) {
|
|
13297
13241
|
if (_proxyFormState.isValid) {
|
|
13298
|
-
if (
|
|
13242
|
+
if (props.mode === 'onBlur') {
|
|
13299
13243
|
if (isBlurEvent) {
|
|
13300
13244
|
_updateValid();
|
|
13301
13245
|
}
|
|
@@ -13460,15 +13404,13 @@ function createFormControl(props = {}) {
|
|
|
13460
13404
|
: isUndefined(value)
|
|
13461
13405
|
? getFieldValue(field ? field._f : get$1(fields, name)._f)
|
|
13462
13406
|
: value;
|
|
13463
|
-
|
|
13464
|
-
set$1(_formValues, name, inputValue);
|
|
13465
|
-
}
|
|
13407
|
+
set$1(_formValues, name, inputValue);
|
|
13466
13408
|
updateTouchAndDirty(name, inputValue, false, false, true);
|
|
13467
13409
|
}
|
|
13468
13410
|
};
|
|
13469
13411
|
const register = (name, options = {}) => {
|
|
13470
13412
|
let field = get$1(_fields, name);
|
|
13471
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
|
13413
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
|
|
13472
13414
|
set$1(_fields, name, {
|
|
13473
13415
|
...(field || {}),
|
|
13474
13416
|
_f: {
|
|
@@ -13484,7 +13426,7 @@ function createFormControl(props = {}) {
|
|
|
13484
13426
|
field,
|
|
13485
13427
|
disabled: isBoolean(options.disabled)
|
|
13486
13428
|
? options.disabled
|
|
13487
|
-
:
|
|
13429
|
+
: props.disabled,
|
|
13488
13430
|
name,
|
|
13489
13431
|
value: options.value,
|
|
13490
13432
|
});
|
|
@@ -13494,7 +13436,7 @@ function createFormControl(props = {}) {
|
|
|
13494
13436
|
}
|
|
13495
13437
|
return {
|
|
13496
13438
|
...(disabledIsDefined
|
|
13497
|
-
? { disabled: options.disabled ||
|
|
13439
|
+
? { disabled: options.disabled || props.disabled }
|
|
13498
13440
|
: {}),
|
|
13499
13441
|
...(_options.progressive
|
|
13500
13442
|
? {
|
|
@@ -13578,12 +13520,6 @@ function createFormControl(props = {}) {
|
|
|
13578
13520
|
e.preventDefault && e.preventDefault();
|
|
13579
13521
|
e.persist && e.persist();
|
|
13580
13522
|
}
|
|
13581
|
-
if (_options.disabled) {
|
|
13582
|
-
if (onInvalid) {
|
|
13583
|
-
await onInvalid({ ..._formState.errors }, e);
|
|
13584
|
-
}
|
|
13585
|
-
return;
|
|
13586
|
-
}
|
|
13587
13523
|
let fieldValues = cloneObject(_formValues);
|
|
13588
13524
|
_subjects.state.next({
|
|
13589
13525
|
isSubmitting: true,
|
|
@@ -13691,7 +13627,7 @@ function createFormControl(props = {}) {
|
|
|
13691
13627
|
}
|
|
13692
13628
|
_fields = {};
|
|
13693
13629
|
}
|
|
13694
|
-
_formValues =
|
|
13630
|
+
_formValues = props.shouldUnregister
|
|
13695
13631
|
? keepStateOptions.keepDefaultValues
|
|
13696
13632
|
? cloneObject(_defaultValues)
|
|
13697
13633
|
: {}
|
|
@@ -13715,7 +13651,7 @@ function createFormControl(props = {}) {
|
|
|
13715
13651
|
!_proxyFormState.isValid ||
|
|
13716
13652
|
!!keepStateOptions.keepIsValid ||
|
|
13717
13653
|
!!keepStateOptions.keepDirtyValues;
|
|
13718
|
-
_state.watch = !!
|
|
13654
|
+
_state.watch = !!props.shouldUnregister;
|
|
13719
13655
|
_subjects.state.next({
|
|
13720
13656
|
submitCount: keepStateOptions.keepSubmitCount
|
|
13721
13657
|
? _formState.submitCount
|
|
@@ -13762,9 +13698,7 @@ function createFormControl(props = {}) {
|
|
|
13762
13698
|
: fieldReference.ref;
|
|
13763
13699
|
if (fieldRef.focus) {
|
|
13764
13700
|
fieldRef.focus();
|
|
13765
|
-
options.shouldSelect &&
|
|
13766
|
-
isFunction$1(fieldRef.select) &&
|
|
13767
|
-
fieldRef.select();
|
|
13701
|
+
options.shouldSelect && fieldRef.select();
|
|
13768
13702
|
}
|
|
13769
13703
|
}
|
|
13770
13704
|
};
|
|
@@ -13886,8 +13820,8 @@ function createFormControl(props = {}) {
|
|
|
13886
13820
|
* ```
|
|
13887
13821
|
*/
|
|
13888
13822
|
function useForm(props = {}) {
|
|
13889
|
-
const _formControl = React.useRef(
|
|
13890
|
-
const _values = React.useRef(
|
|
13823
|
+
const _formControl = React.useRef();
|
|
13824
|
+
const _values = React.useRef();
|
|
13891
13825
|
const [formState, updateFormState] = React.useState({
|
|
13892
13826
|
isDirty: false,
|
|
13893
13827
|
isValidating: false,
|
|
@@ -13965,6 +13899,11 @@ function useForm(props = {}) {
|
|
|
13965
13899
|
values: control._getWatch(),
|
|
13966
13900
|
});
|
|
13967
13901
|
}, [props.shouldUnregister, control]);
|
|
13902
|
+
React.useEffect(() => {
|
|
13903
|
+
if (_formControl.current) {
|
|
13904
|
+
_formControl.current.watch = _formControl.current.watch.bind({});
|
|
13905
|
+
}
|
|
13906
|
+
}, [formState]);
|
|
13968
13907
|
_formControl.current.formState = getProxyFormState(formState, control);
|
|
13969
13908
|
return _formControl.current;
|
|
13970
13909
|
}
|
|
@@ -14434,230 +14373,9 @@ const TableHead = /*#__PURE__*/React.memo(({
|
|
|
14434
14373
|
});
|
|
14435
14374
|
});
|
|
14436
14375
|
|
|
14437
|
-
|
|
14438
|
-
let siblingsArray = parentSiblings;
|
|
14439
|
-
let isLastNode = isLast;
|
|
14440
|
-
if (checkEmpty(parentSiblings)) {
|
|
14441
|
-
isLastNode = false;
|
|
14442
|
-
if (!isNaN(level)) {
|
|
14443
|
-
siblingsArray = Array(level).fill(true);
|
|
14444
|
-
}
|
|
14445
|
-
}
|
|
14446
|
-
return jsxRuntime.jsx("div", {
|
|
14447
|
-
className: "tree-table-space-container",
|
|
14448
|
-
children: siblingsArray?.reverse()?.map((line, i) => jsxRuntime.jsx("span", {
|
|
14449
|
-
className: `tree-table-space-block ${!line ? 'no-lines' : ''} ${isLastNode && i === level - 1 ? 'last-node' : ''}`
|
|
14450
|
-
}, i))
|
|
14451
|
-
});
|
|
14452
|
-
};
|
|
14453
|
-
const TableCell = /*#__PURE__*/React.memo(({
|
|
14454
|
-
col,
|
|
14455
|
-
node,
|
|
14456
|
-
selected,
|
|
14457
|
-
select,
|
|
14458
|
-
onCheckBoxChange,
|
|
14459
|
-
onToggleExpand
|
|
14460
|
-
}) => jsxRuntime.jsxs("td", {
|
|
14461
|
-
className: `${col.isTree && node.folder ? 'folder' : ''}`,
|
|
14462
|
-
children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last), jsxRuntime.jsxs("div", {
|
|
14463
|
-
className: "tree-title-container",
|
|
14464
|
-
children: [col.isTree && jsxRuntime.jsx("span", {
|
|
14465
|
-
className: `tree-table-space-block last-block ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
|
|
14466
|
-
onClick: () => onToggleExpand(node),
|
|
14467
|
-
children: node.container && node?.resourceCount + node?.subContainerCount > 0 && jsxRuntime.jsxs("span", {
|
|
14468
|
-
onClick: () => onToggleExpand(node),
|
|
14469
|
-
children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
|
|
14470
|
-
})
|
|
14471
|
-
}), jsxRuntime.jsxs("span", {
|
|
14472
|
-
className: `tree-table-td-content ${col.isTree && node.folder ? 'folder' : ''}`,
|
|
14473
|
-
children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
|
|
14474
|
-
checked: node?.checked || false,
|
|
14475
|
-
partial: node?.checked === 'partial',
|
|
14476
|
-
onChange: e => onCheckBoxChange(e, node)
|
|
14477
|
-
}), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
|
|
14478
|
-
name: node.title,
|
|
14479
|
-
checked: selected.includes(node.id),
|
|
14480
|
-
value: node.id,
|
|
14481
|
-
onChange: e => onCheckBoxChange(e, node)
|
|
14482
|
-
}), jsxRuntime.jsx("span", {
|
|
14483
|
-
className: "tree-table-td-content-text",
|
|
14484
|
-
children: prepareData(node, col)
|
|
14485
|
-
})]
|
|
14486
|
-
})]
|
|
14487
|
-
}), col.actions && jsxRuntime.jsx("div", {
|
|
14488
|
-
className: "table-tree-row-action",
|
|
14489
|
-
children: col.actions(node)
|
|
14490
|
-
})]
|
|
14491
|
-
}));
|
|
14492
|
-
|
|
14493
|
-
const TableRow = /*#__PURE__*/React.memo(({
|
|
14494
|
-
node,
|
|
14495
|
-
columnsData,
|
|
14496
|
-
selected,
|
|
14497
|
-
select,
|
|
14498
|
-
onRowClick,
|
|
14499
|
-
onToggleExpand,
|
|
14500
|
-
onCheckBoxChange
|
|
14501
|
-
}) => jsxRuntime.jsx("tr", {
|
|
14502
|
-
"data-level": node.hierarchy,
|
|
14503
|
-
className: "show",
|
|
14504
|
-
onClick: e => onRowClick(e, node),
|
|
14505
|
-
children: columnsData.map(col => jsxRuntime.jsx(TableCell, {
|
|
14506
|
-
col: col,
|
|
14507
|
-
node: node,
|
|
14508
|
-
selected: selected,
|
|
14509
|
-
select: select,
|
|
14510
|
-
onCheckBoxChange: onCheckBoxChange,
|
|
14511
|
-
onToggleExpand: onToggleExpand
|
|
14512
|
-
}, col.name))
|
|
14513
|
-
}));
|
|
14514
|
-
|
|
14515
|
-
const TableBody = /*#__PURE__*/React.memo(({
|
|
14516
|
-
flattenedTreeData,
|
|
14517
|
-
columnsData,
|
|
14518
|
-
selected,
|
|
14519
|
-
select,
|
|
14520
|
-
onRowClick,
|
|
14521
|
-
onToggleExpand,
|
|
14522
|
-
onCheckBoxChange
|
|
14523
|
-
}) => checkEmpty(flattenedTreeData) ? null : jsxRuntime.jsxs("tbody", {
|
|
14524
|
-
className: "ff-table-tree-body",
|
|
14525
|
-
children: [jsxRuntime.jsx("tr", {
|
|
14526
|
-
id: "ff-table-tree-first-node"
|
|
14527
|
-
}), flattenedTreeData?.map((node, index) => {
|
|
14528
|
-
return jsxRuntime.jsx(TableRow, {
|
|
14529
|
-
node: node,
|
|
14530
|
-
columnsData: columnsData,
|
|
14531
|
-
selected: selected,
|
|
14532
|
-
select: select,
|
|
14533
|
-
onRowClick: onRowClick,
|
|
14534
|
-
onToggleExpand: node => onToggleExpand(node, index),
|
|
14535
|
-
onCheckBoxChange: onCheckBoxChange
|
|
14536
|
-
}, node.searchKey);
|
|
14537
|
-
}), jsxRuntime.jsx("tr", {
|
|
14538
|
-
id: "ff-table-tree-last-node"
|
|
14539
|
-
})]
|
|
14540
|
-
}));
|
|
14541
|
-
|
|
14542
|
-
const TreeTable = ({
|
|
14543
|
-
treeData,
|
|
14544
|
-
columnsData,
|
|
14545
|
-
selected = [],
|
|
14546
|
-
select = null,
|
|
14547
|
-
onChange,
|
|
14548
|
-
onClick,
|
|
14549
|
-
onExpand,
|
|
14550
|
-
loadMore = () => {},
|
|
14551
|
-
tableBorder,
|
|
14552
|
-
height = 'auto'
|
|
14553
|
-
}) => {
|
|
14554
|
-
// const treeRef = useRef(null);
|
|
14555
|
-
useIntersectionObserver(['ff-table-tree-last-node', 'ff-table-tree-first-node'], {
|
|
14556
|
-
root: document.getElementById('ff-table-tree-scroll-container'),
|
|
14557
|
-
rootMargin: '8px',
|
|
14558
|
-
threshold: 0.1,
|
|
14559
|
-
onIntersect: entry => {
|
|
14560
|
-
if (entry.isIntersecting) {
|
|
14561
|
-
if (loadMore) {
|
|
14562
|
-
let direction = 'above';
|
|
14563
|
-
if (entry.target.id === 'ff-table-tree-last-node') {
|
|
14564
|
-
direction = 'below';
|
|
14565
|
-
}
|
|
14566
|
-
loadMore(direction);
|
|
14567
|
-
}
|
|
14568
|
-
}
|
|
14569
|
-
}
|
|
14570
|
-
});
|
|
14571
|
-
const handleToggleExpand = React.useCallback((node, index) => onExpand?.(node, index), [onExpand]);
|
|
14572
|
-
const handleCheckBoxChange = React.useCallback((e, node) => {
|
|
14573
|
-
onChange?.(e, node);
|
|
14574
|
-
}, [onChange]);
|
|
14575
|
-
const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
|
|
14576
|
-
return jsxRuntime.jsx("div", {
|
|
14577
|
-
className: "tree-table-wrap",
|
|
14578
|
-
children: jsxRuntime.jsx("div", {
|
|
14579
|
-
className: "table-scrollable",
|
|
14580
|
-
id: "ff-table-tree-scroll-container",
|
|
14581
|
-
// ref={treeRef}
|
|
14582
|
-
style: {
|
|
14583
|
-
'--table-height': `${height !== 'auto' ? height + 'px' : height}`,
|
|
14584
|
-
border: tableBorder
|
|
14585
|
-
},
|
|
14586
|
-
children: jsxRuntime.jsxs("table", {
|
|
14587
|
-
className: "tree-table",
|
|
14588
|
-
children: [jsxRuntime.jsx(TableHead, {
|
|
14589
|
-
columnsData: columnsData
|
|
14590
|
-
}), jsxRuntime.jsx(TableBody, {
|
|
14591
|
-
flattenedTreeData: treeData,
|
|
14592
|
-
columnsData: columnsData,
|
|
14593
|
-
selected: selected,
|
|
14594
|
-
select: select,
|
|
14595
|
-
onRowClick: handleRowClick,
|
|
14596
|
-
onToggleExpand: handleToggleExpand,
|
|
14597
|
-
onCheckBoxChange: handleCheckBoxChange
|
|
14598
|
-
})]
|
|
14599
|
-
})
|
|
14600
|
-
})
|
|
14601
|
-
});
|
|
14602
|
-
};
|
|
14603
|
-
var TableTree = /*#__PURE__*/React.memo(TreeTable);
|
|
14604
|
-
|
|
14605
|
-
var css_248z$O = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n --dataset-tooltip-title: #($dataset-tooltip-title),\n --dataset-tooltip-value: #($dataset-tooltip-value), ;\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n position: relative;\n border: none;\n background: none;\n padding: 0 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-row--no-padding {\n border-radius: 8px;\n background: white;\n padding: 0px;\n justify-content: flex-start;\n margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 7px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n position: absolute;\n top: 2px;\n right: 0px;\n width: 6px;\n height: 6px;\n background-color: transparent;\n border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n background-color: var(--confirm-tick-icon-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n background-color: var(--delete-text-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
|
|
14376
|
+
var css_248z$O = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 5px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n position: relative;\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .ff-icon-container .disabled-confirm-icon {\n cursor: default;\n opacity: 0.5;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}\n\n.custom-edit-text-field {\n height: 10px;\n width: 100px;\n}";
|
|
14606
14377
|
styleInject(css_248z$O);
|
|
14607
14378
|
|
|
14608
|
-
const Tabs = ({
|
|
14609
|
-
variant = 'default',
|
|
14610
|
-
tabsData,
|
|
14611
|
-
activeTabId,
|
|
14612
|
-
onTabClick,
|
|
14613
|
-
noBorder = false,
|
|
14614
|
-
noPadding = false
|
|
14615
|
-
}) => {
|
|
14616
|
-
return jsxRuntime.jsxs("div", {
|
|
14617
|
-
className: `ff-tabs-container`,
|
|
14618
|
-
children: [jsxRuntime.jsx("div", {
|
|
14619
|
-
className: classNames(`ff-tab-row--${variant}`, {
|
|
14620
|
-
'ff-tab-row--no-border': noBorder,
|
|
14621
|
-
'ff-tab-row--no-padding': noPadding
|
|
14622
|
-
}),
|
|
14623
|
-
children: tabsData.map(tab => jsxRuntime.jsxs("button", {
|
|
14624
|
-
onClick: () => !tab.disabled && onTabClick(tab.id),
|
|
14625
|
-
disabled: tab.disabled,
|
|
14626
|
-
className: classNames(`ff-tab-button--${variant}`, {
|
|
14627
|
-
disabled: tab.disabled,
|
|
14628
|
-
active: activeTabId === tab.id
|
|
14629
|
-
}),
|
|
14630
|
-
children: [jsxRuntime.jsxs("div", {
|
|
14631
|
-
className: "label-count-section",
|
|
14632
|
-
children: [jsxRuntime.jsx(Typography, {
|
|
14633
|
-
children: tab.label,
|
|
14634
|
-
lineHeight: "18px",
|
|
14635
|
-
fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
|
|
14636
|
-
color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
|
|
14637
|
-
className: classNames('ff-tab-label', {
|
|
14638
|
-
'ff-tab-label--active': activeTabId === tab.id
|
|
14639
|
-
})
|
|
14640
|
-
}), variant === 'default' && tab.count && jsxRuntime.jsx("span", {
|
|
14641
|
-
className: classNames('tab-count', {
|
|
14642
|
-
'tab-count--active': activeTabId === tab.id
|
|
14643
|
-
}),
|
|
14644
|
-
children: tab.count
|
|
14645
|
-
})]
|
|
14646
|
-
}), jsxRuntime.jsx("div", {
|
|
14647
|
-
className: classNames('ff-tab-bar', {
|
|
14648
|
-
'ff-tab-bar--active': activeTabId === tab.id
|
|
14649
|
-
})
|
|
14650
|
-
}), jsxRuntime.jsx("span", {
|
|
14651
|
-
className: `ff-defaultStatus ${tab.status === 'success' ? 'ff-successStatus' : tab.status === 'error' ? 'ff-dangerStatus' : ''}`
|
|
14652
|
-
})]
|
|
14653
|
-
}, tab.id))
|
|
14654
|
-
}), jsxRuntime.jsx("div", {
|
|
14655
|
-
className: `ff-tab-content`,
|
|
14656
|
-
children: tabsData.find(tab => tab.id === activeTabId)?.component
|
|
14657
|
-
})]
|
|
14658
|
-
});
|
|
14659
|
-
};
|
|
14660
|
-
|
|
14661
14379
|
var css_248z$N = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
|
|
14662
14380
|
styleInject(css_248z$N);
|
|
14663
14381
|
|
|
@@ -14682,9 +14400,459 @@ const HighlightText = ({
|
|
|
14682
14400
|
});
|
|
14683
14401
|
};
|
|
14684
14402
|
|
|
14685
|
-
|
|
14403
|
+
const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
|
|
14404
|
+
if (inputValue === text) {
|
|
14405
|
+
return 'No changes were made.';
|
|
14406
|
+
} else if (!inputValue) {
|
|
14407
|
+
return 'Text is required';
|
|
14408
|
+
} else if (inputValue.length < 3) {
|
|
14409
|
+
return 'Please enter at least 3 characters.';
|
|
14410
|
+
} else ;
|
|
14411
|
+
return '';
|
|
14412
|
+
};
|
|
14413
|
+
const LabelEditTextField = ({
|
|
14414
|
+
label,
|
|
14415
|
+
placeholder,
|
|
14416
|
+
text,
|
|
14417
|
+
showText = true,
|
|
14418
|
+
highlightText,
|
|
14419
|
+
customError,
|
|
14420
|
+
confirmIcon,
|
|
14421
|
+
customErrorCondition,
|
|
14422
|
+
cancelIcon,
|
|
14423
|
+
variant = 'textField',
|
|
14424
|
+
onInputChange,
|
|
14425
|
+
dropdownData = [],
|
|
14426
|
+
// width,
|
|
14427
|
+
className,
|
|
14428
|
+
height,
|
|
14429
|
+
isOpen = false,
|
|
14430
|
+
confirmAction,
|
|
14431
|
+
onClick,
|
|
14432
|
+
tooltip
|
|
14433
|
+
}) => {
|
|
14434
|
+
const [isEditing, setIsEditing] = React.useState(isOpen ?? false);
|
|
14435
|
+
const [inputValue, setInputValue] = React.useState(text ?? '');
|
|
14436
|
+
const [dropdownValue, setDropdownValue] = React.useState(dropdownData[0]?.value ?? '');
|
|
14437
|
+
const [showError, setShowError] = React.useState('');
|
|
14438
|
+
const [disabled, isDisabled] = React.useState(true);
|
|
14439
|
+
const [isTextFieldModified, setIsTextFieldModified] = React.useState(false);
|
|
14440
|
+
const isThrowingError = showError && isEditing ? true : false;
|
|
14441
|
+
const containerRef = React.useRef(null);
|
|
14442
|
+
const cancelRef = React.useRef(null);
|
|
14443
|
+
const [clickTimeout, setClickTimeout] = React.useState(null);
|
|
14444
|
+
const handleEsc = useEscapeKey('Escape');
|
|
14445
|
+
React.useEffect(() => {
|
|
14446
|
+
return () => {
|
|
14447
|
+
if (clickTimeout) {
|
|
14448
|
+
clearTimeout(clickTimeout);
|
|
14449
|
+
}
|
|
14450
|
+
};
|
|
14451
|
+
}, [clickTimeout]);
|
|
14452
|
+
const handleDoubleClick = () => {
|
|
14453
|
+
if (clickTimeout) {
|
|
14454
|
+
clearTimeout(clickTimeout);
|
|
14455
|
+
setClickTimeout(null);
|
|
14456
|
+
}
|
|
14457
|
+
setIsEditing(true);
|
|
14458
|
+
setShowError('');
|
|
14459
|
+
};
|
|
14460
|
+
const handleSingleClick = () => {
|
|
14461
|
+
if (onClick) onClick();
|
|
14462
|
+
};
|
|
14463
|
+
const handleClick = () => {
|
|
14464
|
+
if (clickTimeout) {
|
|
14465
|
+
clearTimeout(clickTimeout);
|
|
14466
|
+
setClickTimeout(null);
|
|
14467
|
+
}
|
|
14468
|
+
const timeout = window.setTimeout(() => {
|
|
14469
|
+
handleSingleClick();
|
|
14470
|
+
setClickTimeout(null);
|
|
14471
|
+
}, 1000);
|
|
14472
|
+
setClickTimeout(timeout);
|
|
14473
|
+
};
|
|
14474
|
+
const handleConfirm = () => {
|
|
14475
|
+
let errorMessage = '';
|
|
14476
|
+
if (inputValue.length === 0 || inputValue.trim().length === 0) {
|
|
14477
|
+
errorMessage = 'Please type any text.';
|
|
14478
|
+
} else if (inputValue.length < 3) {
|
|
14479
|
+
errorMessage = 'Please enter at least 3 characters.';
|
|
14480
|
+
} else if (customErrorCondition) {
|
|
14481
|
+
errorMessage = customError ?? 'Invalid input.';
|
|
14482
|
+
}
|
|
14483
|
+
if (errorMessage) {
|
|
14484
|
+
setShowError(errorMessage);
|
|
14485
|
+
} else {
|
|
14486
|
+
setIsEditing(false);
|
|
14487
|
+
setShowError('');
|
|
14488
|
+
if (confirmAction) confirmAction(inputValue, dropdownValue);
|
|
14489
|
+
}
|
|
14490
|
+
};
|
|
14491
|
+
const handleCancel = () => {
|
|
14492
|
+
setInputValue(text ?? '');
|
|
14493
|
+
setDropdownValue(dropdownData[0]?.value ?? '');
|
|
14494
|
+
setIsEditing(false);
|
|
14495
|
+
setShowError('');
|
|
14496
|
+
setIsTextFieldModified(false);
|
|
14497
|
+
};
|
|
14498
|
+
const handleTextFieldChange = e => {
|
|
14499
|
+
const newValue = e.target.value;
|
|
14500
|
+
setInputValue(newValue);
|
|
14501
|
+
isDisabled(false);
|
|
14502
|
+
if (newValue.length === 0 || newValue.trim().length === 0) {
|
|
14503
|
+
setShowError('Please type any text.');
|
|
14504
|
+
} else if (newValue.length < 3) {
|
|
14505
|
+
setShowError('Please enter at least 3 characters.');
|
|
14506
|
+
} else if (customErrorCondition) {
|
|
14507
|
+
setShowError(customError ?? 'Invalid input.');
|
|
14508
|
+
} else {
|
|
14509
|
+
setShowError('');
|
|
14510
|
+
}
|
|
14511
|
+
setIsTextFieldModified(newValue !== text);
|
|
14512
|
+
if (onInputChange) {
|
|
14513
|
+
onInputChange(newValue);
|
|
14514
|
+
}
|
|
14515
|
+
};
|
|
14516
|
+
const handleBlur = e => {
|
|
14517
|
+
if (containerRef.current && !containerRef.current.contains(e.target) && cancelRef.current !== e.target) {
|
|
14518
|
+
const errorMessage = getErrorMessage$1(inputValue, text ?? '');
|
|
14519
|
+
if (errorMessage && isEditing) {
|
|
14520
|
+
setShowError(errorMessage);
|
|
14521
|
+
} else {
|
|
14522
|
+
setIsEditing(false);
|
|
14523
|
+
setShowError('');
|
|
14524
|
+
}
|
|
14525
|
+
}
|
|
14526
|
+
};
|
|
14527
|
+
React.useEffect(() => {
|
|
14528
|
+
document.addEventListener('click', handleBlur);
|
|
14529
|
+
return () => {
|
|
14530
|
+
document.removeEventListener('click', handleBlur);
|
|
14531
|
+
};
|
|
14532
|
+
}, [inputValue]);
|
|
14533
|
+
handleEsc(handleCancel);
|
|
14534
|
+
return jsxRuntime.jsxs("div", {
|
|
14535
|
+
className: "ff-label-edit-text-field",
|
|
14536
|
+
ref: containerRef,
|
|
14537
|
+
children: [isEditing ? jsxRuntime.jsxs("div", {
|
|
14538
|
+
className: "ff-label-text-field",
|
|
14539
|
+
children: [variant === 'textFieldWithDropdown' ? jsxRuntime.jsxs("div", {
|
|
14540
|
+
className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`,
|
|
14541
|
+
style: {
|
|
14542
|
+
height
|
|
14543
|
+
},
|
|
14544
|
+
children: [jsxRuntime.jsx(Input, {
|
|
14545
|
+
name: "input",
|
|
14546
|
+
type: "text",
|
|
14547
|
+
label: label ? label : '',
|
|
14548
|
+
disabled: false,
|
|
14549
|
+
error: isThrowingError,
|
|
14550
|
+
placeholder: placeholder ? placeholder : '',
|
|
14551
|
+
value: inputValue,
|
|
14552
|
+
onChange: handleTextFieldChange,
|
|
14553
|
+
className: `${className}
|
|
14554
|
+
|
|
14555
|
+
${isTextFieldModified ? 'modified' : ''}`
|
|
14556
|
+
}), jsxRuntime.jsx(Select$1, {
|
|
14557
|
+
label: '',
|
|
14558
|
+
optionsList: dropdownData,
|
|
14559
|
+
selectedOption: {
|
|
14560
|
+
value: dropdownValue,
|
|
14561
|
+
label: dropdownValue
|
|
14562
|
+
},
|
|
14563
|
+
onChange: option => setDropdownValue(option.value)
|
|
14564
|
+
})]
|
|
14565
|
+
}) : jsxRuntime.jsx("div", {
|
|
14566
|
+
className: "ff-label-text-field-without-dropdown",
|
|
14567
|
+
children: jsxRuntime.jsx(Input, {
|
|
14568
|
+
name: "input",
|
|
14569
|
+
type: "text",
|
|
14570
|
+
label: label ? label : '',
|
|
14571
|
+
disabled: false,
|
|
14572
|
+
placeholder: placeholder ? placeholder : '',
|
|
14573
|
+
value: inputValue,
|
|
14574
|
+
onChange: handleTextFieldChange,
|
|
14575
|
+
className: `${className}
|
|
14576
|
+
|
|
14577
|
+
${isTextFieldModified ? 'modified' : ''}`
|
|
14578
|
+
})
|
|
14579
|
+
}), jsxRuntime.jsxs("div", {
|
|
14580
|
+
className: "ff-icon-container",
|
|
14581
|
+
children: [confirmIcon && jsxRuntime.jsx(Icon, {
|
|
14582
|
+
color: "var(--label-edit-confirm-icon)",
|
|
14583
|
+
height: 20,
|
|
14584
|
+
width: 20,
|
|
14585
|
+
name: confirmIcon.name,
|
|
14586
|
+
disabled: disabled,
|
|
14587
|
+
className: `${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`,
|
|
14588
|
+
onClick: handleConfirm
|
|
14589
|
+
}), cancelIcon && jsxRuntime.jsx(Icon, {
|
|
14590
|
+
color: "var(--label-edit-cancel-icon)",
|
|
14591
|
+
height: 12,
|
|
14592
|
+
width: 20,
|
|
14593
|
+
name: cancelIcon.name,
|
|
14594
|
+
className: "cancel-icon",
|
|
14595
|
+
onClick: handleCancel,
|
|
14596
|
+
ref: cancelRef
|
|
14597
|
+
})]
|
|
14598
|
+
})]
|
|
14599
|
+
}) : jsxRuntime.jsx(Tooltip, {
|
|
14600
|
+
title: tooltip?.tooltipTitle ? tooltip?.tooltipTitle : '',
|
|
14601
|
+
placement: 'bottom',
|
|
14602
|
+
children: showText && jsxRuntime.jsx("span", {
|
|
14603
|
+
className: "display-text",
|
|
14604
|
+
onDoubleClick: handleDoubleClick,
|
|
14605
|
+
role: "button",
|
|
14606
|
+
onClick: handleClick,
|
|
14607
|
+
children: jsxRuntime.jsx(HighlightText, {
|
|
14608
|
+
text: inputValue,
|
|
14609
|
+
highlight: highlightText
|
|
14610
|
+
})
|
|
14611
|
+
})
|
|
14612
|
+
}), showError && isEditing && jsxRuntime.jsx(Typography, {
|
|
14613
|
+
as: "p",
|
|
14614
|
+
fontSize: 8,
|
|
14615
|
+
className: "error-text",
|
|
14616
|
+
children: showError
|
|
14617
|
+
})]
|
|
14618
|
+
});
|
|
14619
|
+
};
|
|
14620
|
+
|
|
14621
|
+
const renderSpaces = (level, parentSiblings = [], isLast) => {
|
|
14622
|
+
let siblingsArray = parentSiblings;
|
|
14623
|
+
let isLastNode = isLast;
|
|
14624
|
+
if (checkEmpty(parentSiblings)) {
|
|
14625
|
+
isLastNode = false;
|
|
14626
|
+
if (!isNaN(level)) {
|
|
14627
|
+
siblingsArray = Array(level).fill(true);
|
|
14628
|
+
}
|
|
14629
|
+
}
|
|
14630
|
+
return jsxRuntime.jsx("div", {
|
|
14631
|
+
className: "tree-table-space-container",
|
|
14632
|
+
children: siblingsArray?.reverse()?.map((line, i) => jsxRuntime.jsx("span", {
|
|
14633
|
+
className: `tree-table-space-block ${!line ? 'no-lines' : ''} ${isLastNode && i === level - 1 ? 'last-node' : ''}`
|
|
14634
|
+
}, i))
|
|
14635
|
+
});
|
|
14636
|
+
};
|
|
14637
|
+
const TableCell = /*#__PURE__*/React.memo(({
|
|
14638
|
+
col,
|
|
14639
|
+
node,
|
|
14640
|
+
selected,
|
|
14641
|
+
select,
|
|
14642
|
+
onCheckBoxChange,
|
|
14643
|
+
onToggleExpand,
|
|
14644
|
+
index
|
|
14645
|
+
}) => jsxRuntime.jsxs("td", {
|
|
14646
|
+
className: `${col.isTree && node.folder ? 'folder' : ''}`,
|
|
14647
|
+
children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last), jsxRuntime.jsxs("div", {
|
|
14648
|
+
className: "tree-title-container",
|
|
14649
|
+
children: [col.isTree && jsxRuntime.jsx("span", {
|
|
14650
|
+
className: `tree-table-space-block last-block ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
|
|
14651
|
+
onClick: () => onToggleExpand(node),
|
|
14652
|
+
children: node.container && node?.resourceCount + node?.subContainerCount > 0 && jsxRuntime.jsxs("span", {
|
|
14653
|
+
onClick: () => onToggleExpand(node),
|
|
14654
|
+
children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
|
|
14655
|
+
})
|
|
14656
|
+
}), jsxRuntime.jsxs("span", {
|
|
14657
|
+
className: `tree-table-td-content ${col.isTree && node.folder ? 'folder' : ''}`,
|
|
14658
|
+
children: [!node?.showInput && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
14659
|
+
children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
|
|
14660
|
+
checked: node?.checked || false,
|
|
14661
|
+
partial: node?.checked === 'partial',
|
|
14662
|
+
onChange: e => onCheckBoxChange(e, node)
|
|
14663
|
+
}), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
|
|
14664
|
+
name: node.title,
|
|
14665
|
+
checked: selected.includes(node.id),
|
|
14666
|
+
value: node.id,
|
|
14667
|
+
onChange: e => onCheckBoxChange(e, node)
|
|
14668
|
+
})]
|
|
14669
|
+
}), node.showInput && col.isTree ? jsxRuntime.jsx(LabelEditTextField, {
|
|
14670
|
+
isOpen: true
|
|
14671
|
+
}) : jsxRuntime.jsx("span", {
|
|
14672
|
+
className: "tree-table-td-content-text",
|
|
14673
|
+
children: prepareData(node, col)
|
|
14674
|
+
})]
|
|
14675
|
+
})]
|
|
14676
|
+
}), col.actions && !node?.showInput && jsxRuntime.jsx("div", {
|
|
14677
|
+
className: "table-tree-row-action",
|
|
14678
|
+
children: col.actions(node, index)
|
|
14679
|
+
})]
|
|
14680
|
+
}));
|
|
14681
|
+
|
|
14682
|
+
const TableRow = /*#__PURE__*/React.memo(({
|
|
14683
|
+
node,
|
|
14684
|
+
columnsData,
|
|
14685
|
+
selected,
|
|
14686
|
+
select,
|
|
14687
|
+
onRowClick,
|
|
14688
|
+
onToggleExpand,
|
|
14689
|
+
onCheckBoxChange,
|
|
14690
|
+
index
|
|
14691
|
+
}) => jsxRuntime.jsx("tr", {
|
|
14692
|
+
"data-level": node.hierarchy,
|
|
14693
|
+
className: "show",
|
|
14694
|
+
onClick: e => onRowClick(e, node),
|
|
14695
|
+
children: columnsData.map(col => jsxRuntime.jsx(TableCell, {
|
|
14696
|
+
col: col,
|
|
14697
|
+
node: node,
|
|
14698
|
+
selected: selected,
|
|
14699
|
+
select: select,
|
|
14700
|
+
onCheckBoxChange: onCheckBoxChange,
|
|
14701
|
+
onToggleExpand: onToggleExpand,
|
|
14702
|
+
index: index
|
|
14703
|
+
}, col.name))
|
|
14704
|
+
}));
|
|
14705
|
+
|
|
14706
|
+
const TableBody = /*#__PURE__*/React.memo(({
|
|
14707
|
+
flattenedTreeData,
|
|
14708
|
+
columnsData,
|
|
14709
|
+
selected,
|
|
14710
|
+
select,
|
|
14711
|
+
onRowClick,
|
|
14712
|
+
onToggleExpand,
|
|
14713
|
+
onCheckBoxChange
|
|
14714
|
+
}) => checkEmpty(flattenedTreeData) ? null : jsxRuntime.jsxs("tbody", {
|
|
14715
|
+
className: "ff-table-tree-body",
|
|
14716
|
+
children: [jsxRuntime.jsx("tr", {
|
|
14717
|
+
id: "ff-table-tree-first-node"
|
|
14718
|
+
}), flattenedTreeData?.map((node, index) => {
|
|
14719
|
+
return jsxRuntime.jsx(TableRow, {
|
|
14720
|
+
node: node,
|
|
14721
|
+
columnsData: columnsData,
|
|
14722
|
+
selected: selected,
|
|
14723
|
+
select: select,
|
|
14724
|
+
onRowClick: onRowClick,
|
|
14725
|
+
onToggleExpand: node => onToggleExpand(node, index),
|
|
14726
|
+
onCheckBoxChange: onCheckBoxChange,
|
|
14727
|
+
index: index
|
|
14728
|
+
}, node.key);
|
|
14729
|
+
}), jsxRuntime.jsx("tr", {
|
|
14730
|
+
id: "ff-table-tree-last-node"
|
|
14731
|
+
})]
|
|
14732
|
+
}));
|
|
14733
|
+
|
|
14734
|
+
const TreeTable = ({
|
|
14735
|
+
treeData,
|
|
14736
|
+
columnsData,
|
|
14737
|
+
selected = [],
|
|
14738
|
+
select = null,
|
|
14739
|
+
onChange,
|
|
14740
|
+
onClick,
|
|
14741
|
+
onExpand,
|
|
14742
|
+
loadMore = () => {},
|
|
14743
|
+
tableBorder,
|
|
14744
|
+
height = 'auto'
|
|
14745
|
+
}) => {
|
|
14746
|
+
// const treeRef = useRef(null);
|
|
14747
|
+
useIntersectionObserver(['ff-table-tree-last-node', 'ff-table-tree-first-node'], {
|
|
14748
|
+
root: document.getElementById('ff-table-tree-scroll-container'),
|
|
14749
|
+
rootMargin: '8px',
|
|
14750
|
+
threshold: 0.1,
|
|
14751
|
+
onIntersect: entry => {
|
|
14752
|
+
if (entry.isIntersecting) {
|
|
14753
|
+
if (loadMore) {
|
|
14754
|
+
let direction = 'above';
|
|
14755
|
+
if (entry.target.id === 'ff-table-tree-last-node') {
|
|
14756
|
+
direction = 'below';
|
|
14757
|
+
}
|
|
14758
|
+
loadMore(direction);
|
|
14759
|
+
}
|
|
14760
|
+
}
|
|
14761
|
+
}
|
|
14762
|
+
});
|
|
14763
|
+
const handleToggleExpand = React.useCallback((node, index) => onExpand?.(node, index), [onExpand]);
|
|
14764
|
+
const handleCheckBoxChange = React.useCallback((e, node) => {
|
|
14765
|
+
onChange?.(e, node);
|
|
14766
|
+
}, [onChange]);
|
|
14767
|
+
const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
|
|
14768
|
+
return jsxRuntime.jsx("div", {
|
|
14769
|
+
className: "tree-table-wrap",
|
|
14770
|
+
children: jsxRuntime.jsx("div", {
|
|
14771
|
+
className: "table-scrollable",
|
|
14772
|
+
id: "ff-table-tree-scroll-container",
|
|
14773
|
+
// ref={treeRef}
|
|
14774
|
+
style: {
|
|
14775
|
+
'--table-height': `${height !== 'auto' ? height + 'px' : height}`,
|
|
14776
|
+
border: tableBorder
|
|
14777
|
+
},
|
|
14778
|
+
children: jsxRuntime.jsxs("table", {
|
|
14779
|
+
className: "tree-table",
|
|
14780
|
+
children: [jsxRuntime.jsx(TableHead, {
|
|
14781
|
+
columnsData: columnsData
|
|
14782
|
+
}), jsxRuntime.jsx(TableBody, {
|
|
14783
|
+
flattenedTreeData: treeData,
|
|
14784
|
+
columnsData: columnsData,
|
|
14785
|
+
selected: selected,
|
|
14786
|
+
select: select,
|
|
14787
|
+
onRowClick: handleRowClick,
|
|
14788
|
+
onToggleExpand: handleToggleExpand,
|
|
14789
|
+
onCheckBoxChange: handleCheckBoxChange
|
|
14790
|
+
})]
|
|
14791
|
+
})
|
|
14792
|
+
})
|
|
14793
|
+
});
|
|
14794
|
+
};
|
|
14795
|
+
var TableTree = /*#__PURE__*/React.memo(TreeTable);
|
|
14796
|
+
|
|
14797
|
+
var css_248z$M = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n --dataset-tooltip-title: #($dataset-tooltip-title),\n --dataset-tooltip-value: #($dataset-tooltip-value), ;\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n position: relative;\n border: none;\n background: none;\n padding: 0 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-row--no-padding {\n border-radius: 8px;\n background: white;\n padding: 0px;\n justify-content: flex-start;\n margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 7px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n position: absolute;\n top: 2px;\n right: 0px;\n width: 6px;\n height: 6px;\n background-color: transparent;\n border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n background-color: var(--confirm-tick-icon-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n background-color: var(--delete-text-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
|
|
14686
14798
|
styleInject(css_248z$M);
|
|
14687
14799
|
|
|
14800
|
+
const Tabs = ({
|
|
14801
|
+
variant = 'default',
|
|
14802
|
+
tabsData,
|
|
14803
|
+
activeTabId,
|
|
14804
|
+
onTabClick,
|
|
14805
|
+
noBorder = false,
|
|
14806
|
+
noPadding = false
|
|
14807
|
+
}) => {
|
|
14808
|
+
return jsxRuntime.jsxs("div", {
|
|
14809
|
+
className: `ff-tabs-container`,
|
|
14810
|
+
children: [jsxRuntime.jsx("div", {
|
|
14811
|
+
className: classNames(`ff-tab-row--${variant}`, {
|
|
14812
|
+
'ff-tab-row--no-border': noBorder,
|
|
14813
|
+
'ff-tab-row--no-padding': noPadding
|
|
14814
|
+
}),
|
|
14815
|
+
children: tabsData.map(tab => jsxRuntime.jsxs("button", {
|
|
14816
|
+
onClick: () => !tab.disabled && onTabClick(tab.id),
|
|
14817
|
+
disabled: tab.disabled,
|
|
14818
|
+
className: classNames(`ff-tab-button--${variant}`, {
|
|
14819
|
+
disabled: tab.disabled,
|
|
14820
|
+
active: activeTabId === tab.id
|
|
14821
|
+
}),
|
|
14822
|
+
children: [jsxRuntime.jsxs("div", {
|
|
14823
|
+
className: "label-count-section",
|
|
14824
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
14825
|
+
children: tab.label,
|
|
14826
|
+
lineHeight: "18px",
|
|
14827
|
+
fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
|
|
14828
|
+
color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
|
|
14829
|
+
className: classNames('ff-tab-label', {
|
|
14830
|
+
'ff-tab-label--active': activeTabId === tab.id
|
|
14831
|
+
})
|
|
14832
|
+
}), variant === 'default' && tab.count && jsxRuntime.jsx("span", {
|
|
14833
|
+
className: classNames('tab-count', {
|
|
14834
|
+
'tab-count--active': activeTabId === tab.id
|
|
14835
|
+
}),
|
|
14836
|
+
children: tab.count
|
|
14837
|
+
})]
|
|
14838
|
+
}), jsxRuntime.jsx("div", {
|
|
14839
|
+
className: classNames('ff-tab-bar', {
|
|
14840
|
+
'ff-tab-bar--active': activeTabId === tab.id
|
|
14841
|
+
})
|
|
14842
|
+
}), jsxRuntime.jsx("span", {
|
|
14843
|
+
className: `ff-defaultStatus ${tab.status === 'success' ? 'ff-successStatus' : tab.status === 'error' ? 'ff-dangerStatus' : ''}`
|
|
14844
|
+
})]
|
|
14845
|
+
}, tab.id))
|
|
14846
|
+
}), jsxRuntime.jsx("div", {
|
|
14847
|
+
className: `ff-tab-content`,
|
|
14848
|
+
children: tabsData.find(tab => tab.id === activeTabId)?.component
|
|
14849
|
+
})]
|
|
14850
|
+
});
|
|
14851
|
+
};
|
|
14852
|
+
|
|
14853
|
+
var css_248z$L = ".fontXs, .ff-search-container .ff-search-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-search-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n border: none;\n color: var(--tooltip-bg-color);\n line-height: 12px;\n visibility: hidden;\n transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n outline: none;\n border: none;\n}\n.ff-search-container .ff-search-input:hover {\n border: none;\n}\n.ff-search-container.disabled {\n opacity: 0.5;\n}\n.ff-search-container.expanded {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n border-radius: 1px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\n margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n border: none;\n cursor: default;\n margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\n padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-clear-button.showClose {\n display: none;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n margin: 4px;\n cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon.showClose {\n display: none;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n fill: var(--ff-search-filed-close-Icon);\n}";
|
|
14854
|
+
styleInject(css_248z$L);
|
|
14855
|
+
|
|
14688
14856
|
const Search = ({
|
|
14689
14857
|
placeholder = 'Search',
|
|
14690
14858
|
onSearch,
|
|
@@ -18169,53 +18337,6 @@ function setYear(date, year, options) {
|
|
|
18169
18337
|
return date_;
|
|
18170
18338
|
}
|
|
18171
18339
|
|
|
18172
|
-
const FIVE_WEEKS = 5;
|
|
18173
|
-
const FOUR_WEEKS = 4;
|
|
18174
|
-
/**
|
|
18175
|
-
* Return the number of weeks to display in the broadcast calendar.
|
|
18176
|
-
*
|
|
18177
|
-
* @since 9.4.0
|
|
18178
|
-
*/
|
|
18179
|
-
function getBroadcastWeeksInMonth(month, dateLib) {
|
|
18180
|
-
// Get the first day of the month
|
|
18181
|
-
const firstDayOfMonth = dateLib.startOfMonth(month);
|
|
18182
|
-
// Get the day of the week for the first day of the month (1-7, where 1 is Monday)
|
|
18183
|
-
const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
|
|
18184
|
-
const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
|
|
18185
|
-
const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
|
|
18186
|
-
const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
|
|
18187
|
-
return numberOfWeeks;
|
|
18188
|
-
}
|
|
18189
|
-
|
|
18190
|
-
/**
|
|
18191
|
-
* Return the start date of the week in the broadcast calendar.
|
|
18192
|
-
*
|
|
18193
|
-
* @since 9.4.0
|
|
18194
|
-
*/
|
|
18195
|
-
function startOfBroadcastWeek(date, dateLib) {
|
|
18196
|
-
const firstOfMonth = dateLib.startOfMonth(date);
|
|
18197
|
-
const dayOfWeek = firstOfMonth.getDay();
|
|
18198
|
-
if (dayOfWeek === 1) {
|
|
18199
|
-
return firstOfMonth;
|
|
18200
|
-
} else if (dayOfWeek === 0) {
|
|
18201
|
-
return dateLib.addDays(firstOfMonth, -1 * 6);
|
|
18202
|
-
} else {
|
|
18203
|
-
return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
|
|
18204
|
-
}
|
|
18205
|
-
}
|
|
18206
|
-
|
|
18207
|
-
/**
|
|
18208
|
-
* Return the end date of the week in the broadcast calendar.
|
|
18209
|
-
*
|
|
18210
|
-
* @since 9.4.0
|
|
18211
|
-
*/
|
|
18212
|
-
function endOfBroadcastWeek(date, dateLib) {
|
|
18213
|
-
const startDate = startOfBroadcastWeek(date, dateLib);
|
|
18214
|
-
const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
|
|
18215
|
-
const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
|
|
18216
|
-
return endDate;
|
|
18217
|
-
}
|
|
18218
|
-
|
|
18219
18340
|
/**
|
|
18220
18341
|
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
|
|
18221
18342
|
* options. Methods of this class can be overridden using the
|
|
@@ -18296,15 +18417,6 @@ class DateLib {
|
|
|
18296
18417
|
this.differenceInCalendarMonths = (dateLeft, dateRight) => {
|
|
18297
18418
|
return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
|
|
18298
18419
|
};
|
|
18299
|
-
/**
|
|
18300
|
-
* Returns the end of the broadcast week for the given date.
|
|
18301
|
-
*
|
|
18302
|
-
* @param date The original date.
|
|
18303
|
-
* @returns The end of the broadcast week.
|
|
18304
|
-
*/
|
|
18305
|
-
this.endOfBroadcastWeek = date => {
|
|
18306
|
-
return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
|
|
18307
|
-
};
|
|
18308
18420
|
/**
|
|
18309
18421
|
* Returns the end of the ISO week for the given date.
|
|
18310
18422
|
*
|
|
@@ -18466,15 +18578,6 @@ class DateLib {
|
|
|
18466
18578
|
this.setYear = (date, year) => {
|
|
18467
18579
|
return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
|
|
18468
18580
|
};
|
|
18469
|
-
/**
|
|
18470
|
-
* Returns the start of the broadcast week for the given date.
|
|
18471
|
-
*
|
|
18472
|
-
* @param date The original date.
|
|
18473
|
-
* @returns The start of the broadcast week.
|
|
18474
|
-
*/
|
|
18475
|
-
this.startOfBroadcastWeek = date => {
|
|
18476
|
-
return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
|
|
18477
|
-
};
|
|
18478
18581
|
/**
|
|
18479
18582
|
* Returns the start of the day for the given date.
|
|
18480
18583
|
*
|
|
@@ -18957,9 +19060,7 @@ function Weekday(props) {
|
|
|
18957
19060
|
* @see https://daypicker.dev/guides/custom-components
|
|
18958
19061
|
*/
|
|
18959
19062
|
function Weekdays(props) {
|
|
18960
|
-
return /*#__PURE__*/React.createElement("thead", {
|
|
18961
|
-
"aria-hidden": true
|
|
18962
|
-
}, /*#__PURE__*/React.createElement("tr", {
|
|
19063
|
+
return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
|
|
18963
19064
|
...props
|
|
18964
19065
|
}));
|
|
18965
19066
|
}
|
|
@@ -19062,8 +19163,7 @@ function getDataAttributes(props) {
|
|
|
19062
19163
|
"data-mode": props.mode ?? undefined,
|
|
19063
19164
|
"data-required": "required" in props ? props.required : undefined,
|
|
19064
19165
|
"data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
|
|
19065
|
-
"data-week-numbers": props.showWeekNumber || undefined
|
|
19066
|
-
"data-broadcast-calendar": props.broadcastCalendar || undefined
|
|
19166
|
+
"data-week-numbers": props.showWeekNumber || undefined
|
|
19067
19167
|
};
|
|
19068
19168
|
Object.entries(props).forEach(([key, val]) => {
|
|
19069
19169
|
if (key.startsWith("data-")) {
|
|
@@ -19129,7 +19229,7 @@ function formatDay(date, options, dateLib) {
|
|
|
19129
19229
|
*/
|
|
19130
19230
|
function formatMonthDropdown(/** The month number to format. */
|
|
19131
19231
|
monthNumber, /** The locale to use for formatting. */
|
|
19132
|
-
locale) {
|
|
19232
|
+
locale = enUS$1) {
|
|
19133
19233
|
return locale.localize?.month(monthNumber);
|
|
19134
19234
|
}
|
|
19135
19235
|
|
|
@@ -19219,12 +19319,13 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
|
|
|
19219
19319
|
if (!navEnd) return undefined;
|
|
19220
19320
|
const {
|
|
19221
19321
|
addMonths,
|
|
19222
|
-
startOfMonth
|
|
19322
|
+
startOfMonth,
|
|
19323
|
+
isBefore
|
|
19223
19324
|
} = dateLib;
|
|
19224
19325
|
const year = displayMonth.getFullYear();
|
|
19225
19326
|
const months = [];
|
|
19226
19327
|
let month = navStart;
|
|
19227
|
-
while (months.length < 12) {
|
|
19328
|
+
while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) {
|
|
19228
19329
|
months.push(month.getMonth());
|
|
19229
19330
|
month = addMonths(month, 1);
|
|
19230
19331
|
}
|
|
@@ -19232,7 +19333,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
|
|
|
19232
19333
|
return a - b;
|
|
19233
19334
|
});
|
|
19234
19335
|
const options = sortedMonths.map(value => {
|
|
19235
|
-
const label = formatters.formatMonthDropdown(value, dateLib.options.locale
|
|
19336
|
+
const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
|
|
19236
19337
|
const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
|
|
19237
19338
|
const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
|
|
19238
19339
|
return {
|
|
@@ -19607,8 +19708,7 @@ function tzName(tz, date) {
|
|
|
19607
19708
|
*/
|
|
19608
19709
|
function getWeekdays(/** The date library. */
|
|
19609
19710
|
dateLib, /** Use ISOWeek instead of locale/ */
|
|
19610
|
-
ISOWeek, timeZone
|
|
19611
|
-
broadcastCalendar) {
|
|
19711
|
+
ISOWeek, timeZone) {
|
|
19612
19712
|
const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
|
|
19613
19713
|
const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
|
|
19614
19714
|
const days = [];
|
|
@@ -19620,18 +19720,20 @@ broadcastCalendar) {
|
|
|
19620
19720
|
}
|
|
19621
19721
|
|
|
19622
19722
|
/** Return the years to show in the dropdown. */
|
|
19623
|
-
function getYearOptions(
|
|
19624
|
-
if (!
|
|
19625
|
-
if (!
|
|
19723
|
+
function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
|
|
19724
|
+
if (!calendarStart) return undefined;
|
|
19725
|
+
if (!calendarEnd) return undefined;
|
|
19626
19726
|
const {
|
|
19727
|
+
startOfMonth,
|
|
19627
19728
|
startOfYear,
|
|
19628
19729
|
endOfYear,
|
|
19629
19730
|
addYears,
|
|
19630
19731
|
isBefore,
|
|
19631
19732
|
isSameYear
|
|
19632
19733
|
} = dateLib;
|
|
19633
|
-
const
|
|
19634
|
-
const
|
|
19734
|
+
const month = displayMonth.getMonth();
|
|
19735
|
+
const firstNavYear = startOfYear(calendarStart);
|
|
19736
|
+
const lastNavYear = endOfYear(calendarEnd);
|
|
19635
19737
|
const years = [];
|
|
19636
19738
|
let year = firstNavYear;
|
|
19637
19739
|
while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
|
|
@@ -19639,11 +19741,13 @@ function getYearOptions(navStart, navEnd, formatters, dateLib) {
|
|
|
19639
19741
|
year = addYears(year, 1);
|
|
19640
19742
|
}
|
|
19641
19743
|
return years.map(value => {
|
|
19744
|
+
const year = dateLib.Date ? new dateLib.Date(value, month) : new Date(value, month);
|
|
19745
|
+
const disabled = calendarStart && year < startOfMonth(calendarStart) || month && calendarEnd && year > startOfMonth(calendarEnd) || false;
|
|
19642
19746
|
const label = formatters.formatYearDropdown(value);
|
|
19643
19747
|
return {
|
|
19644
19748
|
value,
|
|
19645
19749
|
label,
|
|
19646
|
-
disabled
|
|
19750
|
+
disabled
|
|
19647
19751
|
};
|
|
19648
19752
|
});
|
|
19649
19753
|
}
|
|
@@ -19807,30 +19911,29 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
|
|
|
19807
19911
|
labelYearDropdown: labelYearDropdown
|
|
19808
19912
|
});
|
|
19809
19913
|
|
|
19914
|
+
/** The number of days in a month when having 6 weeks. */
|
|
19915
|
+
const NrOfDaysWithFixedWeeks = 42;
|
|
19810
19916
|
/** Return all the dates to display in the calendar. */
|
|
19811
19917
|
function getDates(displayMonths, maxDate, props, dateLib) {
|
|
19812
19918
|
const firstMonth = displayMonths[0];
|
|
19813
19919
|
const lastMonth = displayMonths[displayMonths.length - 1];
|
|
19814
19920
|
const {
|
|
19815
19921
|
ISOWeek,
|
|
19816
|
-
fixedWeeks
|
|
19817
|
-
broadcastCalendar
|
|
19922
|
+
fixedWeeks
|
|
19818
19923
|
} = props ?? {};
|
|
19819
19924
|
const {
|
|
19925
|
+
startOfWeek,
|
|
19926
|
+
endOfWeek,
|
|
19927
|
+
startOfISOWeek,
|
|
19928
|
+
endOfISOWeek,
|
|
19820
19929
|
addDays,
|
|
19821
19930
|
differenceInCalendarDays,
|
|
19822
19931
|
differenceInCalendarMonths,
|
|
19823
|
-
endOfBroadcastWeek,
|
|
19824
|
-
endOfISOWeek,
|
|
19825
|
-
endOfMonth,
|
|
19826
|
-
endOfWeek,
|
|
19827
19932
|
isAfter,
|
|
19828
|
-
|
|
19829
|
-
startOfISOWeek,
|
|
19830
|
-
startOfWeek
|
|
19933
|
+
endOfMonth
|
|
19831
19934
|
} = dateLib;
|
|
19832
|
-
const startWeekFirstDate =
|
|
19833
|
-
const endWeekLastDate =
|
|
19935
|
+
const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
|
|
19936
|
+
const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
|
|
19834
19937
|
const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
|
|
19835
19938
|
const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
|
|
19836
19939
|
const dates = [];
|
|
@@ -19842,11 +19945,9 @@ function getDates(displayMonths, maxDate, props, dateLib) {
|
|
|
19842
19945
|
dates.push(date);
|
|
19843
19946
|
}
|
|
19844
19947
|
// If fixed weeks is enabled, add the extra dates to the array
|
|
19845
|
-
const
|
|
19846
|
-
const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
|
|
19948
|
+
const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
|
|
19847
19949
|
if (fixedWeeks && dates.length < extraDates) {
|
|
19848
|
-
|
|
19849
|
-
for (let i = 0; i < daysToAdd; i++) {
|
|
19950
|
+
for (let i = 0; i < 7; i++) {
|
|
19850
19951
|
const date = addDays(dates[dates.length - 1], 1);
|
|
19851
19952
|
dates.push(date);
|
|
19852
19953
|
}
|
|
@@ -19957,29 +20058,25 @@ displayMonths, /** The dates to display in the calendar. */
|
|
|
19957
20058
|
dates, /** Options from the props context. */
|
|
19958
20059
|
props, dateLib) {
|
|
19959
20060
|
const {
|
|
19960
|
-
|
|
19961
|
-
|
|
20061
|
+
startOfWeek,
|
|
20062
|
+
endOfWeek,
|
|
20063
|
+
startOfISOWeek,
|
|
19962
20064
|
endOfISOWeek,
|
|
19963
20065
|
endOfMonth,
|
|
19964
|
-
|
|
19965
|
-
getISOWeek,
|
|
20066
|
+
addDays,
|
|
19966
20067
|
getWeek,
|
|
19967
|
-
|
|
19968
|
-
startOfISOWeek,
|
|
19969
|
-
startOfWeek
|
|
20068
|
+
getISOWeek
|
|
19970
20069
|
} = dateLib;
|
|
19971
20070
|
const dayPickerMonths = displayMonths.reduce((months, month) => {
|
|
19972
|
-
const firstDateOfFirstWeek = props.
|
|
19973
|
-
const lastDateOfLastWeek = props.
|
|
20071
|
+
const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
|
|
20072
|
+
const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
|
|
19974
20073
|
/** The dates to display in the month. */
|
|
19975
20074
|
const monthDates = dates.filter(date => {
|
|
19976
20075
|
return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
|
|
19977
20076
|
});
|
|
19978
|
-
|
|
19979
|
-
if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
|
|
20077
|
+
if (props.fixedWeeks && monthDates.length < 42) {
|
|
19980
20078
|
const extraDates = dates.filter(date => {
|
|
19981
|
-
|
|
19982
|
-
return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
|
|
20079
|
+
return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
|
|
19983
20080
|
});
|
|
19984
20081
|
monthDates.push(...extraDates);
|
|
19985
20082
|
}
|
|
@@ -20417,30 +20514,27 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
|
|
|
20417
20514
|
/** Return the next date that should be focused. */
|
|
20418
20515
|
function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
|
|
20419
20516
|
const {
|
|
20420
|
-
ISOWeek
|
|
20421
|
-
broadcastCalendar
|
|
20517
|
+
ISOWeek
|
|
20422
20518
|
} = props;
|
|
20423
20519
|
const {
|
|
20424
20520
|
addDays,
|
|
20425
20521
|
addMonths,
|
|
20426
|
-
addWeeks,
|
|
20427
20522
|
addYears,
|
|
20428
|
-
|
|
20523
|
+
addWeeks,
|
|
20524
|
+
startOfISOWeek,
|
|
20429
20525
|
endOfISOWeek,
|
|
20526
|
+
startOfWeek,
|
|
20430
20527
|
endOfWeek,
|
|
20431
20528
|
max,
|
|
20432
|
-
min
|
|
20433
|
-
startOfBroadcastWeek,
|
|
20434
|
-
startOfISOWeek,
|
|
20435
|
-
startOfWeek
|
|
20529
|
+
min
|
|
20436
20530
|
} = dateLib;
|
|
20437
20531
|
const moveFns = {
|
|
20438
20532
|
day: addDays,
|
|
20439
20533
|
week: addWeeks,
|
|
20440
20534
|
month: addMonths,
|
|
20441
20535
|
year: addYears,
|
|
20442
|
-
startOfWeek: date =>
|
|
20443
|
-
endOfWeek: date =>
|
|
20536
|
+
startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
|
|
20537
|
+
endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
|
|
20444
20538
|
};
|
|
20445
20539
|
let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
|
|
20446
20540
|
if (moveDir === "before" && navStart) {
|
|
@@ -20506,8 +20600,6 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
|
|
|
20506
20600
|
/**
|
|
20507
20601
|
* Return a function to get the modifiers for a given day.
|
|
20508
20602
|
*
|
|
20509
|
-
* NOTE: this is not an hook, but a factory for `getModifiers`.
|
|
20510
|
-
*
|
|
20511
20603
|
* @private
|
|
20512
20604
|
*/
|
|
20513
20605
|
function useGetModifiers(days, props, dateLib) {
|
|
@@ -20516,19 +20608,12 @@ function useGetModifiers(days, props, dateLib) {
|
|
|
20516
20608
|
hidden,
|
|
20517
20609
|
modifiers,
|
|
20518
20610
|
showOutsideDays,
|
|
20519
|
-
broadcastCalendar,
|
|
20520
20611
|
today
|
|
20521
20612
|
} = props;
|
|
20522
20613
|
const {
|
|
20523
20614
|
isSameDay,
|
|
20524
|
-
isSameMonth
|
|
20525
|
-
startOfMonth,
|
|
20526
|
-
isBefore,
|
|
20527
|
-
endOfMonth,
|
|
20528
|
-
isAfter
|
|
20615
|
+
isSameMonth
|
|
20529
20616
|
} = dateLib;
|
|
20530
|
-
const startMonth = props.startMonth && startOfMonth(props.startMonth);
|
|
20531
|
-
const endMonth = props.endMonth && endOfMonth(props.endMonth);
|
|
20532
20617
|
const internalModifiersMap = {
|
|
20533
20618
|
[DayFlag.focused]: [],
|
|
20534
20619
|
[DayFlag.outside]: [],
|
|
@@ -20537,18 +20622,20 @@ function useGetModifiers(days, props, dateLib) {
|
|
|
20537
20622
|
[DayFlag.today]: []
|
|
20538
20623
|
};
|
|
20539
20624
|
const customModifiersMap = {};
|
|
20625
|
+
const selectionModifiersMap = {
|
|
20626
|
+
[SelectionState.range_end]: [],
|
|
20627
|
+
[SelectionState.range_middle]: [],
|
|
20628
|
+
[SelectionState.range_start]: [],
|
|
20629
|
+
[SelectionState.selected]: []
|
|
20630
|
+
};
|
|
20540
20631
|
for (const day of days) {
|
|
20541
20632
|
const {
|
|
20542
20633
|
date,
|
|
20543
20634
|
displayMonth
|
|
20544
20635
|
} = day;
|
|
20545
20636
|
const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
|
|
20546
|
-
const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
|
|
20547
|
-
const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
|
|
20548
20637
|
const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
|
|
20549
|
-
const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
|
|
20550
|
-
// Broadcast calendar will show outside days as default
|
|
20551
|
-
!broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
|
|
20638
|
+
const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
|
|
20552
20639
|
const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
|
|
20553
20640
|
if (isOutside) internalModifiersMap.outside.push(day);
|
|
20554
20641
|
if (isDisabled) internalModifiersMap.disabled.push(day);
|
|
@@ -20577,16 +20664,27 @@ function useGetModifiers(days, props, dateLib) {
|
|
|
20577
20664
|
[DayFlag.outside]: false,
|
|
20578
20665
|
[DayFlag.today]: false
|
|
20579
20666
|
};
|
|
20667
|
+
const selectionStates = {
|
|
20668
|
+
[SelectionState.range_end]: false,
|
|
20669
|
+
[SelectionState.range_middle]: false,
|
|
20670
|
+
[SelectionState.range_start]: false,
|
|
20671
|
+
[SelectionState.selected]: false
|
|
20672
|
+
};
|
|
20580
20673
|
const customModifiers = {};
|
|
20581
20674
|
// Find the modifiers for the given day
|
|
20582
20675
|
for (const name in internalModifiersMap) {
|
|
20583
20676
|
const days = internalModifiersMap[name];
|
|
20584
20677
|
dayFlags[name] = days.some(d => d === day);
|
|
20585
20678
|
}
|
|
20679
|
+
for (const name in selectionModifiersMap) {
|
|
20680
|
+
const days = selectionModifiersMap[name];
|
|
20681
|
+
selectionStates[name] = days.some(d => d === day);
|
|
20682
|
+
}
|
|
20586
20683
|
for (const name in customModifiersMap) {
|
|
20587
20684
|
customModifiers[name] = customModifiersMap[name].some(d => d === day);
|
|
20588
20685
|
}
|
|
20589
20686
|
return {
|
|
20687
|
+
...selectionStates,
|
|
20590
20688
|
...dayFlags,
|
|
20591
20689
|
// custom modifiers should override all the previous ones
|
|
20592
20690
|
...customModifiers
|
|
@@ -20991,7 +21089,7 @@ function DayPicker(props) {
|
|
|
20991
21089
|
};
|
|
20992
21090
|
const dateLib = new DateLib({
|
|
20993
21091
|
locale,
|
|
20994
|
-
weekStartsOn: props.
|
|
21092
|
+
weekStartsOn: props.weekStartsOn,
|
|
20995
21093
|
firstWeekContainsDate: props.firstWeekContainsDate,
|
|
20996
21094
|
useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
|
|
20997
21095
|
useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
|
|
@@ -21010,7 +21108,7 @@ function DayPicker(props) {
|
|
|
21010
21108
|
...props.classNames
|
|
21011
21109
|
}
|
|
21012
21110
|
};
|
|
21013
|
-
}, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn
|
|
21111
|
+
}, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
|
|
21014
21112
|
const {
|
|
21015
21113
|
captionLayout,
|
|
21016
21114
|
mode,
|
|
@@ -21120,16 +21218,6 @@ function DayPicker(props) {
|
|
|
21120
21218
|
const handleDayMouseLeave = React.useCallback((day, modifiers) => e => {
|
|
21121
21219
|
onDayMouseLeave?.(day.date, modifiers, e);
|
|
21122
21220
|
}, [onDayMouseLeave]);
|
|
21123
|
-
const handleMonthChange = React.useCallback(date => e => {
|
|
21124
|
-
const selectedMonth = Number(e.target.value);
|
|
21125
|
-
const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
|
|
21126
|
-
goToMonth(month);
|
|
21127
|
-
}, [dateLib, goToMonth]);
|
|
21128
|
-
const handleYearChange = React.useCallback(date => e => {
|
|
21129
|
-
const selectedYear = Number(e.target.value);
|
|
21130
|
-
const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
|
|
21131
|
-
goToMonth(month);
|
|
21132
|
-
}, [dateLib, goToMonth]);
|
|
21133
21221
|
const {
|
|
21134
21222
|
className,
|
|
21135
21223
|
style
|
|
@@ -21167,8 +21255,6 @@ function DayPicker(props) {
|
|
|
21167
21255
|
lang: props.lang,
|
|
21168
21256
|
nonce: props.nonce,
|
|
21169
21257
|
title: props.title,
|
|
21170
|
-
role: props.role,
|
|
21171
|
-
"aria-label": props["aria-label"],
|
|
21172
21258
|
...dataAttributes
|
|
21173
21259
|
}, /*#__PURE__*/React.createElement(components.Months, {
|
|
21174
21260
|
className: classNames[UI.Months],
|
|
@@ -21182,8 +21268,17 @@ function DayPicker(props) {
|
|
|
21182
21268
|
previousMonth: previousMonth,
|
|
21183
21269
|
nextMonth: nextMonth
|
|
21184
21270
|
})), months.map((calendarMonth, displayIndex) => {
|
|
21271
|
+
const handleMonthChange = e => {
|
|
21272
|
+
const selectedMonth = Number(e.target.value);
|
|
21273
|
+
const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
|
|
21274
|
+
goToMonth(month);
|
|
21275
|
+
};
|
|
21276
|
+
const handleYearChange = e => {
|
|
21277
|
+
const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
|
|
21278
|
+
goToMonth(month);
|
|
21279
|
+
};
|
|
21185
21280
|
const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);
|
|
21186
|
-
const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
|
|
21281
|
+
const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib);
|
|
21187
21282
|
return /*#__PURE__*/React.createElement(components.Month, {
|
|
21188
21283
|
className: classNames[UI.Month],
|
|
21189
21284
|
style: styles?.[UI.Month],
|
|
@@ -21204,7 +21299,7 @@ function DayPicker(props) {
|
|
|
21204
21299
|
classNames: classNames,
|
|
21205
21300
|
components: components,
|
|
21206
21301
|
disabled: Boolean(props.disableNavigation),
|
|
21207
|
-
onChange: handleMonthChange
|
|
21302
|
+
onChange: handleMonthChange,
|
|
21208
21303
|
options: dropdownMonths,
|
|
21209
21304
|
style: styles?.[UI.Dropdown],
|
|
21210
21305
|
value: calendarMonth.date.getMonth()
|
|
@@ -21217,7 +21312,7 @@ function DayPicker(props) {
|
|
|
21217
21312
|
classNames: classNames,
|
|
21218
21313
|
components: components,
|
|
21219
21314
|
disabled: Boolean(props.disableNavigation),
|
|
21220
|
-
onChange: handleYearChange
|
|
21315
|
+
onChange: handleYearChange,
|
|
21221
21316
|
options: dropdownYears,
|
|
21222
21317
|
style: styles?.[UI.Dropdown],
|
|
21223
21318
|
value: calendarMonth.date.getFullYear()
|
|
@@ -21264,8 +21359,7 @@ function DayPicker(props) {
|
|
|
21264
21359
|
locale
|
|
21265
21360
|
}),
|
|
21266
21361
|
className: classNames[UI.WeekNumber],
|
|
21267
|
-
scope: "row"
|
|
21268
|
-
role: "rowheader"
|
|
21362
|
+
scope: "row"
|
|
21269
21363
|
}, formatWeekNumber(week.weekNumber))), week.days.map(day => {
|
|
21270
21364
|
const {
|
|
21271
21365
|
date
|
|
@@ -21285,14 +21379,14 @@ function DayPicker(props) {
|
|
|
21285
21379
|
}
|
|
21286
21380
|
const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
|
|
21287
21381
|
const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
|
|
21288
|
-
const ariaLabel = !isInteractive
|
|
21382
|
+
const ariaLabel = !isInteractive ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
|
|
21289
21383
|
return /*#__PURE__*/React.createElement(components.Day, {
|
|
21290
21384
|
key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`,
|
|
21291
21385
|
day: day,
|
|
21292
21386
|
modifiers: modifiers,
|
|
21293
21387
|
className: className.join(" "),
|
|
21294
21388
|
style: style,
|
|
21295
|
-
|
|
21389
|
+
"aria-hidden": modifiers.hidden || undefined,
|
|
21296
21390
|
"aria-selected": modifiers.selected || undefined,
|
|
21297
21391
|
"aria-label": ariaLabel,
|
|
21298
21392
|
"data-day": dateLib.format(date, "yyyy-MM-dd"),
|
|
@@ -21303,7 +21397,7 @@ function DayPicker(props) {
|
|
|
21303
21397
|
"data-outside": day.outside || undefined,
|
|
21304
21398
|
"data-focused": modifiers.focused || undefined,
|
|
21305
21399
|
"data-today": modifiers.today || undefined
|
|
21306
|
-
},
|
|
21400
|
+
}, isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
|
|
21307
21401
|
className: classNames[UI.DayButton],
|
|
21308
21402
|
style: styles?.[UI.DayButton],
|
|
21309
21403
|
type: "button",
|
|
@@ -21318,7 +21412,7 @@ function DayPicker(props) {
|
|
|
21318
21412
|
onKeyDown: handleDayKeyDown(day, modifiers),
|
|
21319
21413
|
onMouseEnter: handleDayMouseEnter(day, modifiers),
|
|
21320
21414
|
onMouseLeave: handleDayMouseLeave(day, modifiers)
|
|
21321
|
-
}, formatDay(date, dateLib.options, dateLib))) :
|
|
21415
|
+
}, formatDay(date, dateLib.options, dateLib))) : formatDay(day.date, dateLib.options, dateLib));
|
|
21322
21416
|
}));
|
|
21323
21417
|
}))));
|
|
21324
21418
|
})), props.footer && (/*#__PURE__*/React.createElement(components.Footer, {
|
|
@@ -25517,8 +25611,8 @@ const TimePicker = ({
|
|
|
25517
25611
|
});
|
|
25518
25612
|
};
|
|
25519
25613
|
|
|
25520
|
-
var css_248z$L = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n top: 50%;\n transform: translate(25%, -50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n\n.ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: fixed;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n}\n.ff-date-picker-container .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n --rdp-day_button-height: 24px;\n --rdp-day_button-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n\n.ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 0px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-calendar .ff-custom-year_grid,\n.ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day_button-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: var(--disabled-primary-color);\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n color: var(--text-color-light);\n cursor: default;\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n background-color: var(--disable-color);\n}\n.ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n\n.ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n font-weight: 400;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n fill: var(--default-icon-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n fill: var(--brand-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n --rdp-accent-color: blue;\n /* The accent color used for selected days and UI elements. */\n --rdp-accent-background-color: #f0f0ff;\n /* The accent background color used for selected days and UI elements. */\n --rdp-font-family: system-ui;\n /* The font family used by the calendar. Note that `inherit`does not work here. */\n --rdp-day-font: inherit;\n /* The font used for the day cells. */\n --rdp-day-height: 2.75rem;\n /* The height of the day cells. */\n --rdp-day-width: 2.75rem;\n /* The width of the day cells. */\n --rdp-day_button-border-radius: 100%;\n /* The border radius of the day cells. */\n --rdp-day_button-border: 2px solid transparent;\n /* The border of the day cells. */\n --rdp-day_button-height: var(--rdp-day-height);\n /* The height of the day cells. */\n --rdp-day_button-width: var(--rdp-day-width);\n /* The width of the day cells. */\n --rdp-selected-border: 2px solid var(--rdp-accent-color);\n /* The border of the selected days. */\n --rdp-selected-font: bold large var(--rdp-font-family);\n /* The font of the selected days. */\n --rdp-disabled-opacity: 0.5;\n /* The opacity of the disabled days. */\n --rdp-outside-opacity: 0.75;\n /* The opacity of the days outside the current month. */\n --rdp-today-color: var(--rdp-accent-color);\n /* The color of the today's date. */\n --rdp-dropdown-gap: 0.5rem;\n /* The gap between the dropdowns used in the month captons. */\n --rdp-month_caption-font: bold larger var(--rdp-font-family);\n /* The font of the month caption. */\n --rdp-months-gap: 2rem;\n /* The gap between the months in the multi-month view. */\n --rdp-nav_button-disabled-opacity: 0.5;\n /* The opacity of the disabled navigation buttons. */\n --rdp-nav_button-height: 2.25rem;\n /* The height of the navigation buttons. */\n --rdp-nav_button-width: 2.25rem;\n /* The width of the navigation buttons. */\n --rdp-nav-height: 2.75rem;\n /* The height of the navigation bar. */\n --rdp-range_middle-background-color: var(--rdp-accent-background-color);\n /* The color of the background for days in the middle of a range. */\n --rdp-range_middle-font: normal medium var(--rdp-font-family);\n /* The font for days in the middle of a range. */\n --rdp-range_middle-foreground-color: white;\n /* The font for days in the middle of a range. */\n --rdp-range_middle-color: inherit;\n /* The color of the range text. */\n --rdp-range_start-color: white;\n /* The color of the range text. */\n --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);\n /* Used for the background of the start of the selected range. */\n --rdp-range_start-date-background-color: var(--rdp-accent-color);\n /* The background color of the date when at the start of the selected range. */\n --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);\n /* Used for the background of the end of the selected range. */\n --rdp-range_end-color: white;\n /* The color of the range text. */\n --rdp-range_end-date-background-color: var(--rdp-accent-color);\n /* The background color of the date when at the end of the selected range. */\n --rdp-week_number-border-radius: 100%;\n /* The border radius of the week number. */\n --rdp-week_number-border: 2px solid transparent;\n /* The border of the week number. */\n --rdp-week_number-font: 400 small var(--rdp-font-family);\n /* The font of the week number cells. */\n --rdp-week_number-height: var(--rdp-day-height);\n /* The height of the week number cells. */\n --rdp-week_number-opacity: 0.75;\n /* The opacity of the week number. */\n --rdp-week_number-width: var(--rdp-day-width);\n /* The width of the week number cells. */\n --rdp-weeknumber-text-align: center;\n /* The text alignment of the weekday cells. */\n --rdp-weekday-font: 500 smaller var(--rdp-font-family);\n /* The font of the weekday. */\n --rdp-weekday-opacity: 0.75;\n /* The opacity of the weekday. */\n --rdp-weekday-padding: 0.5rem 0rem;\n /* The padding of the weekday. */\n --rdp-weekday-text-align: center;\n /* The text alignment of the weekday cells. */\n --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n position: relative;\n /* Required to position the navigation toolbar. */\n box-sizing: border-box;\n}\n\n.rdp-root * {\n box-sizing: border-box;\n}\n\n.rdp-day {\n width: var(--rdp-day-width);\n height: var(--rdp-day-height);\n font: var(--rdp-day-font);\n text-align: center;\n}\n\n.rdp-day_button {\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font: inherit;\n color: inherit;\n justify-content: center;\n align-items: center;\n display: flex;\n width: var(--rdp-day_button-width);\n height: var(--rdp-day_button-height);\n border: var(--rdp-day_button-border);\n border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n cursor: revert;\n}\n\n.rdp-caption_label {\n z-index: 1;\n position: relative;\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font: inherit;\n color: inherit;\n -moz-appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n appearance: none;\n width: var(--rdp-nav_button-width);\n height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n cursor: revert;\n opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n display: inline-block;\n fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n transform: rotate(180deg);\n transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n z-index: 2;\n /* Reset */\n opacity: 0;\n appearance: none;\n position: absolute;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n border: none;\n line-height: inherit;\n}\n\n.rdp-dropdown_root {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n display: flex;\n align-content: center;\n height: var(--rdp-nav-height);\n font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n gap: var(--rdp-months-gap);\n max-width: fit-content;\n}\n\n.rdp-month_grid {\n border-collapse: collapse;\n}\n\n.rdp-nav {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n display: flex;\n align-items: center;\n height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n opacity: var(--rdp-weekday-opacity);\n padding: var(--rdp-weekday-padding);\n font: var(--rdp-weekday-font);\n text-align: var(--rdp-weekday-text-align);\n text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n opacity: var(--rdp-week_number-opacity);\n font: var(--rdp-week_number-font);\n height: var(--rdp-week_number-height);\n width: var(--rdp-week_number-width);\n border: var(--rdp-week_number-border);\n border-radius: var(--rdp-week_number-border-radius);\n text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n visibility: hidden;\n color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n background-color: var(--rdp-range_start-date-background-color);\n color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n background-color: var(--rdp-range_middle-background-color);\n font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n border-color: transparent;\n border: unset;\n border-radius: unset;\n color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n background: var(--rdp-range_end-background);\n color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n color: var(--rdp-range_start-color);\n background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n background: revert;\n}\n\n.rdp-focusable {\n cursor: pointer;\n}";
|
|
25521
|
-
styleInject(css_248z$
|
|
25614
|
+
var css_248z$K = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n top: 50%;\n transform: translate(25%, -50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n\n.ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: fixed;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n}\n.ff-date-picker-container .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n --rdp-day_button-height: 24px;\n --rdp-day_button-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n\n.ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 0px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-calendar .ff-custom-year_grid,\n.ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day_button-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: var(--disabled-primary-color);\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n color: var(--text-color-light);\n cursor: default;\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n background-color: var(--disable-color);\n}\n.ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n\n.ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n font-weight: 400;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n fill: var(--default-icon-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n fill: var(--brand-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n --rdp-accent-color: blue;\n /* The accent color used for selected days and UI elements. */\n --rdp-accent-background-color: #f0f0ff;\n /* The accent background color used for selected days and UI elements. */\n --rdp-font-family: system-ui;\n /* The font family used by the calendar. Note that `inherit`does not work here. */\n --rdp-day-font: inherit;\n /* The font used for the day cells. */\n --rdp-day-height: 2.75rem;\n /* The height of the day cells. */\n --rdp-day-width: 2.75rem;\n /* The width of the day cells. */\n --rdp-day_button-border-radius: 100%;\n /* The border radius of the day cells. */\n --rdp-day_button-border: 2px solid transparent;\n /* The border of the day cells. */\n --rdp-day_button-height: var(--rdp-day-height);\n /* The height of the day cells. */\n --rdp-day_button-width: var(--rdp-day-width);\n /* The width of the day cells. */\n --rdp-selected-border: 2px solid var(--rdp-accent-color);\n /* The border of the selected days. */\n --rdp-selected-font: bold large var(--rdp-font-family);\n /* The font of the selected days. */\n --rdp-disabled-opacity: 0.5;\n /* The opacity of the disabled days. */\n --rdp-outside-opacity: 0.75;\n /* The opacity of the days outside the current month. */\n --rdp-today-color: var(--rdp-accent-color);\n /* The color of the today's date. */\n --rdp-dropdown-gap: 0.5rem;\n /* The gap between the dropdowns used in the month captons. */\n --rdp-month_caption-font: bold larger var(--rdp-font-family);\n /* The font of the month caption. */\n --rdp-months-gap: 2rem;\n /* The gap between the months in the multi-month view. */\n --rdp-nav_button-disabled-opacity: 0.5;\n /* The opacity of the disabled navigation buttons. */\n --rdp-nav_button-height: 2.25rem;\n /* The height of the navigation buttons. */\n --rdp-nav_button-width: 2.25rem;\n /* The width of the navigation buttons. */\n --rdp-nav-height: 2.75rem;\n /* The height of the navigation bar. */\n --rdp-range_middle-background-color: var(--rdp-accent-background-color);\n /* The color of the background for days in the middle of a range. */\n --rdp-range_middle-font: normal medium var(--rdp-font-family);\n /* The font for days in the middle of a range. */\n --rdp-range_middle-foreground-color: white;\n /* The font for days in the middle of a range. */\n --rdp-range_middle-color: inherit;\n /* The color of the range text. */\n --rdp-range_start-color: white;\n /* The color of the range text. */\n --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);\n /* Used for the background of the start of the selected range. */\n --rdp-range_start-date-background-color: var(--rdp-accent-color);\n /* The background color of the date when at the start of the selected range. */\n --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);\n /* Used for the background of the end of the selected range. */\n --rdp-range_end-color: white;\n /* The color of the range text. */\n --rdp-range_end-date-background-color: var(--rdp-accent-color);\n /* The background color of the date when at the end of the selected range. */\n --rdp-week_number-border-radius: 100%;\n /* The border radius of the week number. */\n --rdp-week_number-border: 2px solid transparent;\n /* The border of the week number. */\n --rdp-week_number-font: 400 small var(--rdp-font-family);\n /* The font of the week number cells. */\n --rdp-week_number-height: var(--rdp-day-height);\n /* The height of the week number cells. */\n --rdp-week_number-opacity: 0.75;\n /* The opacity of the week number. */\n --rdp-week_number-width: var(--rdp-day-width);\n /* The width of the week number cells. */\n --rdp-weeknumber-text-align: center;\n /* The text alignment of the weekday cells. */\n --rdp-weekday-font: 500 smaller var(--rdp-font-family);\n /* The font of the weekday. */\n --rdp-weekday-opacity: 0.75;\n /* The opacity of the weekday. */\n --rdp-weekday-padding: 0.5rem 0rem;\n /* The padding of the weekday. */\n --rdp-weekday-text-align: center;\n /* The text alignment of the weekday cells. */\n --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n position: relative;\n /* Required to position the navigation toolbar. */\n box-sizing: border-box;\n}\n\n.rdp-root * {\n box-sizing: border-box;\n}\n\n.rdp-day {\n width: var(--rdp-day-width);\n height: var(--rdp-day-height);\n font: var(--rdp-day-font);\n text-align: center;\n}\n\n.rdp-day_button {\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font: inherit;\n color: inherit;\n justify-content: center;\n align-items: center;\n display: flex;\n width: var(--rdp-day_button-width);\n height: var(--rdp-day_button-height);\n border: var(--rdp-day_button-border);\n border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n cursor: revert;\n}\n\n.rdp-caption_label {\n z-index: 1;\n position: relative;\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n border: none;\n background: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font: inherit;\n color: inherit;\n -moz-appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n appearance: none;\n width: var(--rdp-nav_button-width);\n height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n cursor: revert;\n opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n display: inline-block;\n fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n transform: rotate(180deg);\n transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n z-index: 2;\n /* Reset */\n opacity: 0;\n appearance: none;\n position: absolute;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n border: none;\n line-height: inherit;\n}\n\n.rdp-dropdown_root {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n display: flex;\n align-content: center;\n height: var(--rdp-nav-height);\n font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n gap: var(--rdp-months-gap);\n max-width: fit-content;\n}\n\n.rdp-month_grid {\n border-collapse: collapse;\n}\n\n.rdp-nav {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n display: flex;\n align-items: center;\n height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n opacity: var(--rdp-weekday-opacity);\n padding: var(--rdp-weekday-padding);\n font: var(--rdp-weekday-font);\n text-align: var(--rdp-weekday-text-align);\n text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n opacity: var(--rdp-week_number-opacity);\n font: var(--rdp-week_number-font);\n height: var(--rdp-week_number-height);\n width: var(--rdp-week_number-width);\n border: var(--rdp-week_number-border);\n border-radius: var(--rdp-week_number-border-radius);\n text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n visibility: hidden;\n color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n background-color: var(--rdp-range_start-date-background-color);\n color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n background-color: var(--rdp-range_middle-background-color);\n font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n border-color: transparent;\n border: unset;\n border-radius: unset;\n color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n background: var(--rdp-range_end-background);\n color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n color: var(--rdp-range_start-color);\n background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n background: revert;\n}\n\n.rdp-focusable {\n cursor: pointer;\n}";
|
|
25615
|
+
styleInject(css_248z$K);
|
|
25522
25616
|
|
|
25523
25617
|
const CustomDatePicker = ({
|
|
25524
25618
|
minDate,
|
|
@@ -26116,8 +26210,8 @@ const StateDropdown = ({
|
|
|
26116
26210
|
});
|
|
26117
26211
|
};
|
|
26118
26212
|
|
|
26119
|
-
var css_248z$
|
|
26120
|
-
styleInject(css_248z$
|
|
26213
|
+
var css_248z$J = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-plus-icon {\n border-radius: 16px;\n border-style: none;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 8px;\n background-color: var(--hover-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid var(--primary-icon-color);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n color: var(--secondary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover {\n border: 1px solid transparent;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\n color: var(--primary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}";
|
|
26214
|
+
styleInject(css_248z$J);
|
|
26121
26215
|
|
|
26122
26216
|
const IconButton = /*#__PURE__*/React.forwardRef(({
|
|
26123
26217
|
label,
|
|
@@ -26146,8 +26240,8 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
|
|
|
26146
26240
|
});
|
|
26147
26241
|
});
|
|
26148
26242
|
|
|
26149
|
-
var css_248z$
|
|
26150
|
-
styleInject(css_248z$
|
|
26243
|
+
var css_248z$I = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--modal-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n}\n\n.ff-modal-container {\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ff-modal-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\n}\n\n.modal-bottom-border {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n background-color: var(--expandable-menu-option-bg);\n max-width: 100%;\n width: 100%;\n height: 32px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 16px;\n}";
|
|
26244
|
+
styleInject(css_248z$I);
|
|
26151
26245
|
|
|
26152
26246
|
const useKeyboardActions = actions => {
|
|
26153
26247
|
React.useEffect(() => {
|
|
@@ -26246,8 +26340,8 @@ const DragAndDrop = {
|
|
|
26246
26340
|
DNDUtilities
|
|
26247
26341
|
};
|
|
26248
26342
|
|
|
26249
|
-
var css_248z$
|
|
26250
|
-
styleInject(css_248z$
|
|
26343
|
+
var css_248z$H = ".ff_variable_input_container .ff_label_container {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n color: var(--input-error-text-color);\n font-size: 1.1em;\n margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n color: var(--toggle-disable-icon-color);\n cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n min-width: 8rem;\n border: 1px solid var(--input-default-border-color);\n padding: 8px;\n min-height: 30px;\n border-radius: 4px;\n font-size: 14px;\n line-height: 20px;\n transition: border-color 0.2s ease;\n position: relative;\n text-align: left;\n display: flex;\n align-items: center;\n overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n content: \"*\";\n color: var(--input-error-text-color);\n font-size: 1.2em;\n position: absolute;\n top: 2px;\n right: 2px;\n display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n content: attr(data-placeholder);\n color: var(--ff-search-filed-placeholder-text);\n position: absolute;\n user-select: none;\n pointer-events: none;\n font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n pointer-events: none;\n opacity: 0.5;\n background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n border: 1px solid var(--input-default-border-color);\n margin-top: 4px;\n padding: 4px;\n border-radius: 4px;\n list-style-type: none;\n background-color: var(--ff-select-background-color);\n max-height: 150px;\n overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n padding: 4px;\n cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n background-color: var(--ff-select-background-color);\n}";
|
|
26344
|
+
styleInject(css_248z$H);
|
|
26251
26345
|
|
|
26252
26346
|
const VariableInput = ({
|
|
26253
26347
|
type = 'url',
|
|
@@ -26525,8 +26619,8 @@ const VariableInput = ({
|
|
|
26525
26619
|
});
|
|
26526
26620
|
};
|
|
26527
26621
|
|
|
26528
|
-
var css_248z$
|
|
26529
|
-
styleInject(css_248z$
|
|
26622
|
+
var css_248z$G = ".ff-all-project {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n width: fit-content;\n border-radius: 16px;\n color: var(--expandable-menu-default-bg);\n line-height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n padding: 3px;\n cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n border-radius: 20px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n position: relative;\n white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n content: \"\";\n position: absolute;\n top: 20px;\n left: 0%;\n width: 0%;\n height: 2px;\n background-color: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n display: flex;\n padding: 4px;\n gap: 4px;\n justify-content: center;\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n height: 16px;\n width: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n width: 202px;\n position: absolute;\n top: 50px;\n padding: 1px;\n border: 0.5px solid var(--expandable-menu-default-bg);\n border-radius: 4px;\n background-color: var(--secondary-icon-color);\n color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n max-height: 150px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n margin: 1px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-option {\n margin-top: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-option,\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-option .ff-projects-icons svg path,\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}";
|
|
26623
|
+
styleInject(css_248z$G);
|
|
26530
26624
|
|
|
26531
26625
|
const AllProjectsDropdown = ({
|
|
26532
26626
|
onClick = () => {},
|
|
@@ -26662,8 +26756,8 @@ const AllProjectsDropdown = ({
|
|
|
26662
26756
|
});
|
|
26663
26757
|
};
|
|
26664
26758
|
|
|
26665
|
-
var css_248z$
|
|
26666
|
-
styleInject(css_248z$
|
|
26759
|
+
var css_248z$F = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-pie-chart-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n display: inline-block;\n border: 2px solid var(--pie-chart-border-color);\n border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -100%);\n padding: 8px;\n border-radius: 4px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n font-weight: 400;\n pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n color: var(--drawer-title-color);\n}";
|
|
26760
|
+
styleInject(css_248z$F);
|
|
26667
26761
|
|
|
26668
26762
|
const calculateArc$3 = ({
|
|
26669
26763
|
x,
|
|
@@ -26817,8 +26911,8 @@ const PieChart = ({
|
|
|
26817
26911
|
});
|
|
26818
26912
|
};
|
|
26819
26913
|
|
|
26820
|
-
var css_248z$
|
|
26821
|
-
styleInject(css_248z$
|
|
26914
|
+
var css_248z$E = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 4px;\n padding-bottom: 16px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
|
|
26915
|
+
styleInject(css_248z$E);
|
|
26822
26916
|
|
|
26823
26917
|
const AppHeader = ({
|
|
26824
26918
|
logoIconName = 'fireflink_icon',
|
|
@@ -26922,7 +27016,7 @@ const AppHeader = ({
|
|
|
26922
27016
|
children: jsxRuntime.jsx(Tooltip, {
|
|
26923
27017
|
title: quickMenuItem?.label,
|
|
26924
27018
|
children: jsxRuntime.jsx(Icon, {
|
|
26925
|
-
name: quickMenuItem.
|
|
27019
|
+
name: quickMenuItem.path,
|
|
26926
27020
|
height: 16,
|
|
26927
27021
|
width: 16,
|
|
26928
27022
|
hoverEffect: true
|
|
@@ -26960,8 +27054,8 @@ const AppHeader = ({
|
|
|
26960
27054
|
});
|
|
26961
27055
|
};
|
|
26962
27056
|
|
|
26963
|
-
var css_248z$
|
|
26964
|
-
styleInject(css_248z$
|
|
27057
|
+
var css_248z$D = ".ff_rounded_lg {\n border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n padding: 20px;\n background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n padding: 20px;\n background-color: var(--ff-paper-background-color);\n}";
|
|
27058
|
+
styleInject(css_248z$D);
|
|
26965
27059
|
|
|
26966
27060
|
const Paper = ({
|
|
26967
27061
|
children,
|
|
@@ -26977,8 +27071,8 @@ const Paper = ({
|
|
|
26977
27071
|
});
|
|
26978
27072
|
};
|
|
26979
27073
|
|
|
26980
|
-
var css_248z$
|
|
26981
|
-
styleInject(css_248z$
|
|
27074
|
+
var css_248z$C = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n position: absolute;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item .ff-legend-value {\n white-space: nowrap;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-4 .ff-legend-item {\n flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(-n+3) {\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(n+4) {\n flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-more .ff-legend-item {\n flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend {\n flex-direction: column;\n flex-wrap: wrap;\n height: 200px;\n width: auto;\n justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend .ff-legend-item {\n flex: 0 0 auto !important;\n width: 100%;\n justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-4 .ff-legend-item {\n height: calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-5 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-more .ff-legend-item {\n height: calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 15px;\n min-width: 25px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n overflow-y: auto;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n width: 100%;\n min-width: 300px;\n border-collapse: collapse;\n text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-table-thead {\n position: static;\n top: auto;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n font-weight: bold;\n background-color: var(--tabs-bg-color);\n color: var(--input-hover-border-color);\n padding: 7px 5px 9px 20px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 1rem;\n min-width: 22px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n margin-left: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n padding: 4px 8px 4px 8px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n display: flex;\n align-items: baseline;\n gap: 5px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n text-align: right;\n}";
|
|
27075
|
+
styleInject(css_248z$C);
|
|
26982
27076
|
|
|
26983
27077
|
const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
|
|
26984
27078
|
const startX = x + radius * Math.cos(startAngle);
|
|
@@ -27277,7 +27371,7 @@ const DashboardDonutChart = ({
|
|
|
27277
27371
|
className: "ff-legend-percentage",
|
|
27278
27372
|
children: jsxRuntime.jsx("td", {
|
|
27279
27373
|
className: "ff-legend-percentage",
|
|
27280
|
-
children: item.percentage ? item.percentage : typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : (item.value / total * 100).toFixed(1)
|
|
27374
|
+
children: item.percentage ? item.percentage : typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : total === 0 ? 0 : (item.value / total * 100).toFixed(1)
|
|
27281
27375
|
})
|
|
27282
27376
|
}), jsxRuntime.jsx("td", {
|
|
27283
27377
|
className: "ff-legend-count",
|
|
@@ -27394,9 +27488,9 @@ const DashboardDonutChart = ({
|
|
|
27394
27488
|
|
|
27395
27489
|
var propTypes = {exports: {}};
|
|
27396
27490
|
|
|
27397
|
-
var reactIs = {exports: {}};
|
|
27491
|
+
var reactIs$1 = {exports: {}};
|
|
27398
27492
|
|
|
27399
|
-
var reactIs_production_min = {};
|
|
27493
|
+
var reactIs_production_min$1 = {};
|
|
27400
27494
|
|
|
27401
27495
|
/** @license React v16.13.1
|
|
27402
27496
|
* react-is.production.min.js
|
|
@@ -27406,10 +27500,10 @@ var reactIs_production_min = {};
|
|
|
27406
27500
|
* This source code is licensed under the MIT license found in the
|
|
27407
27501
|
* LICENSE file in the root directory of this source tree.
|
|
27408
27502
|
*/
|
|
27409
|
-
var hasRequiredReactIs_production_min;
|
|
27410
|
-
function requireReactIs_production_min() {
|
|
27411
|
-
if (hasRequiredReactIs_production_min) return reactIs_production_min;
|
|
27412
|
-
hasRequiredReactIs_production_min = 1;
|
|
27503
|
+
var hasRequiredReactIs_production_min$1;
|
|
27504
|
+
function requireReactIs_production_min$1() {
|
|
27505
|
+
if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
|
|
27506
|
+
hasRequiredReactIs_production_min$1 = 1;
|
|
27413
27507
|
var b = "function" === typeof Symbol && Symbol.for,
|
|
27414
27508
|
c = b ? Symbol.for("react.element") : 60103,
|
|
27415
27509
|
d = b ? Symbol.for("react.portal") : 60106,
|
|
@@ -27462,64 +27556,64 @@ function requireReactIs_production_min() {
|
|
|
27462
27556
|
function A(a) {
|
|
27463
27557
|
return z(a) === m;
|
|
27464
27558
|
}
|
|
27465
|
-
reactIs_production_min.AsyncMode = l;
|
|
27466
|
-
reactIs_production_min.ConcurrentMode = m;
|
|
27467
|
-
reactIs_production_min.ContextConsumer = k;
|
|
27468
|
-
reactIs_production_min.ContextProvider = h;
|
|
27469
|
-
reactIs_production_min.Element = c;
|
|
27470
|
-
reactIs_production_min.ForwardRef = n;
|
|
27471
|
-
reactIs_production_min.Fragment = e;
|
|
27472
|
-
reactIs_production_min.Lazy = t;
|
|
27473
|
-
reactIs_production_min.Memo = r;
|
|
27474
|
-
reactIs_production_min.Portal = d;
|
|
27475
|
-
reactIs_production_min.Profiler = g;
|
|
27476
|
-
reactIs_production_min.StrictMode = f;
|
|
27477
|
-
reactIs_production_min.Suspense = p;
|
|
27478
|
-
reactIs_production_min.isAsyncMode = function (a) {
|
|
27559
|
+
reactIs_production_min$1.AsyncMode = l;
|
|
27560
|
+
reactIs_production_min$1.ConcurrentMode = m;
|
|
27561
|
+
reactIs_production_min$1.ContextConsumer = k;
|
|
27562
|
+
reactIs_production_min$1.ContextProvider = h;
|
|
27563
|
+
reactIs_production_min$1.Element = c;
|
|
27564
|
+
reactIs_production_min$1.ForwardRef = n;
|
|
27565
|
+
reactIs_production_min$1.Fragment = e;
|
|
27566
|
+
reactIs_production_min$1.Lazy = t;
|
|
27567
|
+
reactIs_production_min$1.Memo = r;
|
|
27568
|
+
reactIs_production_min$1.Portal = d;
|
|
27569
|
+
reactIs_production_min$1.Profiler = g;
|
|
27570
|
+
reactIs_production_min$1.StrictMode = f;
|
|
27571
|
+
reactIs_production_min$1.Suspense = p;
|
|
27572
|
+
reactIs_production_min$1.isAsyncMode = function (a) {
|
|
27479
27573
|
return A(a) || z(a) === l;
|
|
27480
27574
|
};
|
|
27481
|
-
reactIs_production_min.isConcurrentMode = A;
|
|
27482
|
-
reactIs_production_min.isContextConsumer = function (a) {
|
|
27575
|
+
reactIs_production_min$1.isConcurrentMode = A;
|
|
27576
|
+
reactIs_production_min$1.isContextConsumer = function (a) {
|
|
27483
27577
|
return z(a) === k;
|
|
27484
27578
|
};
|
|
27485
|
-
reactIs_production_min.isContextProvider = function (a) {
|
|
27579
|
+
reactIs_production_min$1.isContextProvider = function (a) {
|
|
27486
27580
|
return z(a) === h;
|
|
27487
27581
|
};
|
|
27488
|
-
reactIs_production_min.isElement = function (a) {
|
|
27582
|
+
reactIs_production_min$1.isElement = function (a) {
|
|
27489
27583
|
return "object" === typeof a && null !== a && a.$$typeof === c;
|
|
27490
27584
|
};
|
|
27491
|
-
reactIs_production_min.isForwardRef = function (a) {
|
|
27585
|
+
reactIs_production_min$1.isForwardRef = function (a) {
|
|
27492
27586
|
return z(a) === n;
|
|
27493
27587
|
};
|
|
27494
|
-
reactIs_production_min.isFragment = function (a) {
|
|
27588
|
+
reactIs_production_min$1.isFragment = function (a) {
|
|
27495
27589
|
return z(a) === e;
|
|
27496
27590
|
};
|
|
27497
|
-
reactIs_production_min.isLazy = function (a) {
|
|
27591
|
+
reactIs_production_min$1.isLazy = function (a) {
|
|
27498
27592
|
return z(a) === t;
|
|
27499
27593
|
};
|
|
27500
|
-
reactIs_production_min.isMemo = function (a) {
|
|
27594
|
+
reactIs_production_min$1.isMemo = function (a) {
|
|
27501
27595
|
return z(a) === r;
|
|
27502
27596
|
};
|
|
27503
|
-
reactIs_production_min.isPortal = function (a) {
|
|
27597
|
+
reactIs_production_min$1.isPortal = function (a) {
|
|
27504
27598
|
return z(a) === d;
|
|
27505
27599
|
};
|
|
27506
|
-
reactIs_production_min.isProfiler = function (a) {
|
|
27600
|
+
reactIs_production_min$1.isProfiler = function (a) {
|
|
27507
27601
|
return z(a) === g;
|
|
27508
27602
|
};
|
|
27509
|
-
reactIs_production_min.isStrictMode = function (a) {
|
|
27603
|
+
reactIs_production_min$1.isStrictMode = function (a) {
|
|
27510
27604
|
return z(a) === f;
|
|
27511
27605
|
};
|
|
27512
|
-
reactIs_production_min.isSuspense = function (a) {
|
|
27606
|
+
reactIs_production_min$1.isSuspense = function (a) {
|
|
27513
27607
|
return z(a) === p;
|
|
27514
27608
|
};
|
|
27515
|
-
reactIs_production_min.isValidElementType = function (a) {
|
|
27609
|
+
reactIs_production_min$1.isValidElementType = function (a) {
|
|
27516
27610
|
return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
|
|
27517
27611
|
};
|
|
27518
|
-
reactIs_production_min.typeOf = z;
|
|
27519
|
-
return reactIs_production_min;
|
|
27612
|
+
reactIs_production_min$1.typeOf = z;
|
|
27613
|
+
return reactIs_production_min$1;
|
|
27520
27614
|
}
|
|
27521
27615
|
|
|
27522
|
-
var reactIs_development = {};
|
|
27616
|
+
var reactIs_development$1 = {};
|
|
27523
27617
|
|
|
27524
27618
|
/** @license React v16.13.1
|
|
27525
27619
|
* react-is.development.js
|
|
@@ -27529,10 +27623,10 @@ var reactIs_development = {};
|
|
|
27529
27623
|
* This source code is licensed under the MIT license found in the
|
|
27530
27624
|
* LICENSE file in the root directory of this source tree.
|
|
27531
27625
|
*/
|
|
27532
|
-
var hasRequiredReactIs_development;
|
|
27533
|
-
function requireReactIs_development() {
|
|
27534
|
-
if (hasRequiredReactIs_development) return reactIs_development;
|
|
27535
|
-
hasRequiredReactIs_development = 1;
|
|
27626
|
+
var hasRequiredReactIs_development$1;
|
|
27627
|
+
function requireReactIs_development$1() {
|
|
27628
|
+
if (hasRequiredReactIs_development$1) return reactIs_development$1;
|
|
27629
|
+
hasRequiredReactIs_development$1 = 1;
|
|
27536
27630
|
if (process.env.NODE_ENV !== "production") {
|
|
27537
27631
|
(function () {
|
|
27538
27632
|
|
|
@@ -27659,49 +27753,49 @@ function requireReactIs_development() {
|
|
|
27659
27753
|
function isSuspense(object) {
|
|
27660
27754
|
return typeOf(object) === REACT_SUSPENSE_TYPE;
|
|
27661
27755
|
}
|
|
27662
|
-
reactIs_development.AsyncMode = AsyncMode;
|
|
27663
|
-
reactIs_development.ConcurrentMode = ConcurrentMode;
|
|
27664
|
-
reactIs_development.ContextConsumer = ContextConsumer;
|
|
27665
|
-
reactIs_development.ContextProvider = ContextProvider;
|
|
27666
|
-
reactIs_development.Element = Element;
|
|
27667
|
-
reactIs_development.ForwardRef = ForwardRef;
|
|
27668
|
-
reactIs_development.Fragment = Fragment;
|
|
27669
|
-
reactIs_development.Lazy = Lazy;
|
|
27670
|
-
reactIs_development.Memo = Memo;
|
|
27671
|
-
reactIs_development.Portal = Portal;
|
|
27672
|
-
reactIs_development.Profiler = Profiler;
|
|
27673
|
-
reactIs_development.StrictMode = StrictMode;
|
|
27674
|
-
reactIs_development.Suspense = Suspense;
|
|
27675
|
-
reactIs_development.isAsyncMode = isAsyncMode;
|
|
27676
|
-
reactIs_development.isConcurrentMode = isConcurrentMode;
|
|
27677
|
-
reactIs_development.isContextConsumer = isContextConsumer;
|
|
27678
|
-
reactIs_development.isContextProvider = isContextProvider;
|
|
27679
|
-
reactIs_development.isElement = isElement;
|
|
27680
|
-
reactIs_development.isForwardRef = isForwardRef;
|
|
27681
|
-
reactIs_development.isFragment = isFragment;
|
|
27682
|
-
reactIs_development.isLazy = isLazy;
|
|
27683
|
-
reactIs_development.isMemo = isMemo;
|
|
27684
|
-
reactIs_development.isPortal = isPortal;
|
|
27685
|
-
reactIs_development.isProfiler = isProfiler;
|
|
27686
|
-
reactIs_development.isStrictMode = isStrictMode;
|
|
27687
|
-
reactIs_development.isSuspense = isSuspense;
|
|
27688
|
-
reactIs_development.isValidElementType = isValidElementType;
|
|
27689
|
-
reactIs_development.typeOf = typeOf;
|
|
27756
|
+
reactIs_development$1.AsyncMode = AsyncMode;
|
|
27757
|
+
reactIs_development$1.ConcurrentMode = ConcurrentMode;
|
|
27758
|
+
reactIs_development$1.ContextConsumer = ContextConsumer;
|
|
27759
|
+
reactIs_development$1.ContextProvider = ContextProvider;
|
|
27760
|
+
reactIs_development$1.Element = Element;
|
|
27761
|
+
reactIs_development$1.ForwardRef = ForwardRef;
|
|
27762
|
+
reactIs_development$1.Fragment = Fragment;
|
|
27763
|
+
reactIs_development$1.Lazy = Lazy;
|
|
27764
|
+
reactIs_development$1.Memo = Memo;
|
|
27765
|
+
reactIs_development$1.Portal = Portal;
|
|
27766
|
+
reactIs_development$1.Profiler = Profiler;
|
|
27767
|
+
reactIs_development$1.StrictMode = StrictMode;
|
|
27768
|
+
reactIs_development$1.Suspense = Suspense;
|
|
27769
|
+
reactIs_development$1.isAsyncMode = isAsyncMode;
|
|
27770
|
+
reactIs_development$1.isConcurrentMode = isConcurrentMode;
|
|
27771
|
+
reactIs_development$1.isContextConsumer = isContextConsumer;
|
|
27772
|
+
reactIs_development$1.isContextProvider = isContextProvider;
|
|
27773
|
+
reactIs_development$1.isElement = isElement;
|
|
27774
|
+
reactIs_development$1.isForwardRef = isForwardRef;
|
|
27775
|
+
reactIs_development$1.isFragment = isFragment;
|
|
27776
|
+
reactIs_development$1.isLazy = isLazy;
|
|
27777
|
+
reactIs_development$1.isMemo = isMemo;
|
|
27778
|
+
reactIs_development$1.isPortal = isPortal;
|
|
27779
|
+
reactIs_development$1.isProfiler = isProfiler;
|
|
27780
|
+
reactIs_development$1.isStrictMode = isStrictMode;
|
|
27781
|
+
reactIs_development$1.isSuspense = isSuspense;
|
|
27782
|
+
reactIs_development$1.isValidElementType = isValidElementType;
|
|
27783
|
+
reactIs_development$1.typeOf = typeOf;
|
|
27690
27784
|
})();
|
|
27691
27785
|
}
|
|
27692
|
-
return reactIs_development;
|
|
27786
|
+
return reactIs_development$1;
|
|
27693
27787
|
}
|
|
27694
27788
|
|
|
27695
|
-
var hasRequiredReactIs;
|
|
27696
|
-
function requireReactIs() {
|
|
27697
|
-
if (hasRequiredReactIs) return reactIs.exports;
|
|
27698
|
-
hasRequiredReactIs = 1;
|
|
27789
|
+
var hasRequiredReactIs$1;
|
|
27790
|
+
function requireReactIs$1() {
|
|
27791
|
+
if (hasRequiredReactIs$1) return reactIs$1.exports;
|
|
27792
|
+
hasRequiredReactIs$1 = 1;
|
|
27699
27793
|
if (process.env.NODE_ENV === 'production') {
|
|
27700
|
-
reactIs.exports = requireReactIs_production_min();
|
|
27794
|
+
reactIs$1.exports = requireReactIs_production_min$1();
|
|
27701
27795
|
} else {
|
|
27702
|
-
reactIs.exports = requireReactIs_development();
|
|
27796
|
+
reactIs$1.exports = requireReactIs_development$1();
|
|
27703
27797
|
}
|
|
27704
|
-
return reactIs.exports;
|
|
27798
|
+
return reactIs$1.exports;
|
|
27705
27799
|
}
|
|
27706
27800
|
|
|
27707
27801
|
/*
|
|
@@ -27916,7 +28010,7 @@ var hasRequiredFactoryWithTypeCheckers;
|
|
|
27916
28010
|
function requireFactoryWithTypeCheckers() {
|
|
27917
28011
|
if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
|
|
27918
28012
|
hasRequiredFactoryWithTypeCheckers = 1;
|
|
27919
|
-
var ReactIs = requireReactIs();
|
|
28013
|
+
var ReactIs = requireReactIs$1();
|
|
27920
28014
|
var assign = requireObjectAssign();
|
|
27921
28015
|
var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
|
|
27922
28016
|
var has = /*@__PURE__*/requireHas();
|
|
@@ -28529,7 +28623,7 @@ function requirePropTypes() {
|
|
|
28529
28623
|
if (hasRequiredPropTypes) return propTypes.exports;
|
|
28530
28624
|
hasRequiredPropTypes = 1;
|
|
28531
28625
|
if (process.env.NODE_ENV !== 'production') {
|
|
28532
|
-
var ReactIs = requireReactIs();
|
|
28626
|
+
var ReactIs = requireReactIs$1();
|
|
28533
28627
|
|
|
28534
28628
|
// By explicitly using `prop-types` you are opting into new development behavior.
|
|
28535
28629
|
// http://fb.me/prop-types-in-prod
|
|
@@ -28764,6 +28858,316 @@ ReCAPTCHA.defaultProps = {
|
|
|
28764
28858
|
badge: "bottomright"
|
|
28765
28859
|
};
|
|
28766
28860
|
|
|
28861
|
+
var reactIs = {exports: {}};
|
|
28862
|
+
|
|
28863
|
+
var reactIs_production_min = {};
|
|
28864
|
+
|
|
28865
|
+
/** @license React v16.13.1
|
|
28866
|
+
* react-is.production.min.js
|
|
28867
|
+
*
|
|
28868
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
28869
|
+
*
|
|
28870
|
+
* This source code is licensed under the MIT license found in the
|
|
28871
|
+
* LICENSE file in the root directory of this source tree.
|
|
28872
|
+
*/
|
|
28873
|
+
var hasRequiredReactIs_production_min;
|
|
28874
|
+
function requireReactIs_production_min() {
|
|
28875
|
+
if (hasRequiredReactIs_production_min) return reactIs_production_min;
|
|
28876
|
+
hasRequiredReactIs_production_min = 1;
|
|
28877
|
+
var b = "function" === typeof Symbol && Symbol.for,
|
|
28878
|
+
c = b ? Symbol.for("react.element") : 60103,
|
|
28879
|
+
d = b ? Symbol.for("react.portal") : 60106,
|
|
28880
|
+
e = b ? Symbol.for("react.fragment") : 60107,
|
|
28881
|
+
f = b ? Symbol.for("react.strict_mode") : 60108,
|
|
28882
|
+
g = b ? Symbol.for("react.profiler") : 60114,
|
|
28883
|
+
h = b ? Symbol.for("react.provider") : 60109,
|
|
28884
|
+
k = b ? Symbol.for("react.context") : 60110,
|
|
28885
|
+
l = b ? Symbol.for("react.async_mode") : 60111,
|
|
28886
|
+
m = b ? Symbol.for("react.concurrent_mode") : 60111,
|
|
28887
|
+
n = b ? Symbol.for("react.forward_ref") : 60112,
|
|
28888
|
+
p = b ? Symbol.for("react.suspense") : 60113,
|
|
28889
|
+
q = b ? Symbol.for("react.suspense_list") : 60120,
|
|
28890
|
+
r = b ? Symbol.for("react.memo") : 60115,
|
|
28891
|
+
t = b ? Symbol.for("react.lazy") : 60116,
|
|
28892
|
+
v = b ? Symbol.for("react.block") : 60121,
|
|
28893
|
+
w = b ? Symbol.for("react.fundamental") : 60117,
|
|
28894
|
+
x = b ? Symbol.for("react.responder") : 60118,
|
|
28895
|
+
y = b ? Symbol.for("react.scope") : 60119;
|
|
28896
|
+
function z(a) {
|
|
28897
|
+
if ("object" === typeof a && null !== a) {
|
|
28898
|
+
var u = a.$$typeof;
|
|
28899
|
+
switch (u) {
|
|
28900
|
+
case c:
|
|
28901
|
+
switch (a = a.type, a) {
|
|
28902
|
+
case l:
|
|
28903
|
+
case m:
|
|
28904
|
+
case e:
|
|
28905
|
+
case g:
|
|
28906
|
+
case f:
|
|
28907
|
+
case p:
|
|
28908
|
+
return a;
|
|
28909
|
+
default:
|
|
28910
|
+
switch (a = a && a.$$typeof, a) {
|
|
28911
|
+
case k:
|
|
28912
|
+
case n:
|
|
28913
|
+
case t:
|
|
28914
|
+
case r:
|
|
28915
|
+
case h:
|
|
28916
|
+
return a;
|
|
28917
|
+
default:
|
|
28918
|
+
return u;
|
|
28919
|
+
}
|
|
28920
|
+
}
|
|
28921
|
+
case d:
|
|
28922
|
+
return u;
|
|
28923
|
+
}
|
|
28924
|
+
}
|
|
28925
|
+
}
|
|
28926
|
+
function A(a) {
|
|
28927
|
+
return z(a) === m;
|
|
28928
|
+
}
|
|
28929
|
+
reactIs_production_min.AsyncMode = l;
|
|
28930
|
+
reactIs_production_min.ConcurrentMode = m;
|
|
28931
|
+
reactIs_production_min.ContextConsumer = k;
|
|
28932
|
+
reactIs_production_min.ContextProvider = h;
|
|
28933
|
+
reactIs_production_min.Element = c;
|
|
28934
|
+
reactIs_production_min.ForwardRef = n;
|
|
28935
|
+
reactIs_production_min.Fragment = e;
|
|
28936
|
+
reactIs_production_min.Lazy = t;
|
|
28937
|
+
reactIs_production_min.Memo = r;
|
|
28938
|
+
reactIs_production_min.Portal = d;
|
|
28939
|
+
reactIs_production_min.Profiler = g;
|
|
28940
|
+
reactIs_production_min.StrictMode = f;
|
|
28941
|
+
reactIs_production_min.Suspense = p;
|
|
28942
|
+
reactIs_production_min.isAsyncMode = function (a) {
|
|
28943
|
+
return A(a) || z(a) === l;
|
|
28944
|
+
};
|
|
28945
|
+
reactIs_production_min.isConcurrentMode = A;
|
|
28946
|
+
reactIs_production_min.isContextConsumer = function (a) {
|
|
28947
|
+
return z(a) === k;
|
|
28948
|
+
};
|
|
28949
|
+
reactIs_production_min.isContextProvider = function (a) {
|
|
28950
|
+
return z(a) === h;
|
|
28951
|
+
};
|
|
28952
|
+
reactIs_production_min.isElement = function (a) {
|
|
28953
|
+
return "object" === typeof a && null !== a && a.$$typeof === c;
|
|
28954
|
+
};
|
|
28955
|
+
reactIs_production_min.isForwardRef = function (a) {
|
|
28956
|
+
return z(a) === n;
|
|
28957
|
+
};
|
|
28958
|
+
reactIs_production_min.isFragment = function (a) {
|
|
28959
|
+
return z(a) === e;
|
|
28960
|
+
};
|
|
28961
|
+
reactIs_production_min.isLazy = function (a) {
|
|
28962
|
+
return z(a) === t;
|
|
28963
|
+
};
|
|
28964
|
+
reactIs_production_min.isMemo = function (a) {
|
|
28965
|
+
return z(a) === r;
|
|
28966
|
+
};
|
|
28967
|
+
reactIs_production_min.isPortal = function (a) {
|
|
28968
|
+
return z(a) === d;
|
|
28969
|
+
};
|
|
28970
|
+
reactIs_production_min.isProfiler = function (a) {
|
|
28971
|
+
return z(a) === g;
|
|
28972
|
+
};
|
|
28973
|
+
reactIs_production_min.isStrictMode = function (a) {
|
|
28974
|
+
return z(a) === f;
|
|
28975
|
+
};
|
|
28976
|
+
reactIs_production_min.isSuspense = function (a) {
|
|
28977
|
+
return z(a) === p;
|
|
28978
|
+
};
|
|
28979
|
+
reactIs_production_min.isValidElementType = function (a) {
|
|
28980
|
+
return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
|
|
28981
|
+
};
|
|
28982
|
+
reactIs_production_min.typeOf = z;
|
|
28983
|
+
return reactIs_production_min;
|
|
28984
|
+
}
|
|
28985
|
+
|
|
28986
|
+
var reactIs_development = {};
|
|
28987
|
+
|
|
28988
|
+
/** @license React v16.13.1
|
|
28989
|
+
* react-is.development.js
|
|
28990
|
+
*
|
|
28991
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
28992
|
+
*
|
|
28993
|
+
* This source code is licensed under the MIT license found in the
|
|
28994
|
+
* LICENSE file in the root directory of this source tree.
|
|
28995
|
+
*/
|
|
28996
|
+
var hasRequiredReactIs_development;
|
|
28997
|
+
function requireReactIs_development() {
|
|
28998
|
+
if (hasRequiredReactIs_development) return reactIs_development;
|
|
28999
|
+
hasRequiredReactIs_development = 1;
|
|
29000
|
+
if (process.env.NODE_ENV !== "production") {
|
|
29001
|
+
(function () {
|
|
29002
|
+
|
|
29003
|
+
// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
|
|
29004
|
+
// nor polyfill, then a plain number is used for performance.
|
|
29005
|
+
var hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
|
29006
|
+
var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
|
|
29007
|
+
var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
|
|
29008
|
+
var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
|
|
29009
|
+
var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
|
|
29010
|
+
var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
|
|
29011
|
+
var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
|
|
29012
|
+
var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
|
|
29013
|
+
// (unstable) APIs that have been removed. Can we remove the symbols?
|
|
29014
|
+
|
|
29015
|
+
var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
|
|
29016
|
+
var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
|
|
29017
|
+
var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
|
|
29018
|
+
var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
|
|
29019
|
+
var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
|
|
29020
|
+
var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
|
|
29021
|
+
var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
|
|
29022
|
+
var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
|
|
29023
|
+
var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
|
|
29024
|
+
var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
|
|
29025
|
+
var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
|
|
29026
|
+
function isValidElementType(type) {
|
|
29027
|
+
return typeof type === 'string' || typeof type === 'function' ||
|
|
29028
|
+
// Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
|
|
29029
|
+
type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
|
|
29030
|
+
}
|
|
29031
|
+
function typeOf(object) {
|
|
29032
|
+
if (typeof object === 'object' && object !== null) {
|
|
29033
|
+
var $$typeof = object.$$typeof;
|
|
29034
|
+
switch ($$typeof) {
|
|
29035
|
+
case REACT_ELEMENT_TYPE:
|
|
29036
|
+
var type = object.type;
|
|
29037
|
+
switch (type) {
|
|
29038
|
+
case REACT_ASYNC_MODE_TYPE:
|
|
29039
|
+
case REACT_CONCURRENT_MODE_TYPE:
|
|
29040
|
+
case REACT_FRAGMENT_TYPE:
|
|
29041
|
+
case REACT_PROFILER_TYPE:
|
|
29042
|
+
case REACT_STRICT_MODE_TYPE:
|
|
29043
|
+
case REACT_SUSPENSE_TYPE:
|
|
29044
|
+
return type;
|
|
29045
|
+
default:
|
|
29046
|
+
var $$typeofType = type && type.$$typeof;
|
|
29047
|
+
switch ($$typeofType) {
|
|
29048
|
+
case REACT_CONTEXT_TYPE:
|
|
29049
|
+
case REACT_FORWARD_REF_TYPE:
|
|
29050
|
+
case REACT_LAZY_TYPE:
|
|
29051
|
+
case REACT_MEMO_TYPE:
|
|
29052
|
+
case REACT_PROVIDER_TYPE:
|
|
29053
|
+
return $$typeofType;
|
|
29054
|
+
default:
|
|
29055
|
+
return $$typeof;
|
|
29056
|
+
}
|
|
29057
|
+
}
|
|
29058
|
+
case REACT_PORTAL_TYPE:
|
|
29059
|
+
return $$typeof;
|
|
29060
|
+
}
|
|
29061
|
+
}
|
|
29062
|
+
return undefined;
|
|
29063
|
+
} // AsyncMode is deprecated along with isAsyncMode
|
|
29064
|
+
|
|
29065
|
+
var AsyncMode = REACT_ASYNC_MODE_TYPE;
|
|
29066
|
+
var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
|
|
29067
|
+
var ContextConsumer = REACT_CONTEXT_TYPE;
|
|
29068
|
+
var ContextProvider = REACT_PROVIDER_TYPE;
|
|
29069
|
+
var Element = REACT_ELEMENT_TYPE;
|
|
29070
|
+
var ForwardRef = REACT_FORWARD_REF_TYPE;
|
|
29071
|
+
var Fragment = REACT_FRAGMENT_TYPE;
|
|
29072
|
+
var Lazy = REACT_LAZY_TYPE;
|
|
29073
|
+
var Memo = REACT_MEMO_TYPE;
|
|
29074
|
+
var Portal = REACT_PORTAL_TYPE;
|
|
29075
|
+
var Profiler = REACT_PROFILER_TYPE;
|
|
29076
|
+
var StrictMode = REACT_STRICT_MODE_TYPE;
|
|
29077
|
+
var Suspense = REACT_SUSPENSE_TYPE;
|
|
29078
|
+
var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
|
|
29079
|
+
|
|
29080
|
+
function isAsyncMode(object) {
|
|
29081
|
+
{
|
|
29082
|
+
if (!hasWarnedAboutDeprecatedIsAsyncMode) {
|
|
29083
|
+
hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
|
|
29084
|
+
|
|
29085
|
+
console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
|
|
29086
|
+
}
|
|
29087
|
+
}
|
|
29088
|
+
return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
|
|
29089
|
+
}
|
|
29090
|
+
function isConcurrentMode(object) {
|
|
29091
|
+
return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
|
|
29092
|
+
}
|
|
29093
|
+
function isContextConsumer(object) {
|
|
29094
|
+
return typeOf(object) === REACT_CONTEXT_TYPE;
|
|
29095
|
+
}
|
|
29096
|
+
function isContextProvider(object) {
|
|
29097
|
+
return typeOf(object) === REACT_PROVIDER_TYPE;
|
|
29098
|
+
}
|
|
29099
|
+
function isElement(object) {
|
|
29100
|
+
return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
|
|
29101
|
+
}
|
|
29102
|
+
function isForwardRef(object) {
|
|
29103
|
+
return typeOf(object) === REACT_FORWARD_REF_TYPE;
|
|
29104
|
+
}
|
|
29105
|
+
function isFragment(object) {
|
|
29106
|
+
return typeOf(object) === REACT_FRAGMENT_TYPE;
|
|
29107
|
+
}
|
|
29108
|
+
function isLazy(object) {
|
|
29109
|
+
return typeOf(object) === REACT_LAZY_TYPE;
|
|
29110
|
+
}
|
|
29111
|
+
function isMemo(object) {
|
|
29112
|
+
return typeOf(object) === REACT_MEMO_TYPE;
|
|
29113
|
+
}
|
|
29114
|
+
function isPortal(object) {
|
|
29115
|
+
return typeOf(object) === REACT_PORTAL_TYPE;
|
|
29116
|
+
}
|
|
29117
|
+
function isProfiler(object) {
|
|
29118
|
+
return typeOf(object) === REACT_PROFILER_TYPE;
|
|
29119
|
+
}
|
|
29120
|
+
function isStrictMode(object) {
|
|
29121
|
+
return typeOf(object) === REACT_STRICT_MODE_TYPE;
|
|
29122
|
+
}
|
|
29123
|
+
function isSuspense(object) {
|
|
29124
|
+
return typeOf(object) === REACT_SUSPENSE_TYPE;
|
|
29125
|
+
}
|
|
29126
|
+
reactIs_development.AsyncMode = AsyncMode;
|
|
29127
|
+
reactIs_development.ConcurrentMode = ConcurrentMode;
|
|
29128
|
+
reactIs_development.ContextConsumer = ContextConsumer;
|
|
29129
|
+
reactIs_development.ContextProvider = ContextProvider;
|
|
29130
|
+
reactIs_development.Element = Element;
|
|
29131
|
+
reactIs_development.ForwardRef = ForwardRef;
|
|
29132
|
+
reactIs_development.Fragment = Fragment;
|
|
29133
|
+
reactIs_development.Lazy = Lazy;
|
|
29134
|
+
reactIs_development.Memo = Memo;
|
|
29135
|
+
reactIs_development.Portal = Portal;
|
|
29136
|
+
reactIs_development.Profiler = Profiler;
|
|
29137
|
+
reactIs_development.StrictMode = StrictMode;
|
|
29138
|
+
reactIs_development.Suspense = Suspense;
|
|
29139
|
+
reactIs_development.isAsyncMode = isAsyncMode;
|
|
29140
|
+
reactIs_development.isConcurrentMode = isConcurrentMode;
|
|
29141
|
+
reactIs_development.isContextConsumer = isContextConsumer;
|
|
29142
|
+
reactIs_development.isContextProvider = isContextProvider;
|
|
29143
|
+
reactIs_development.isElement = isElement;
|
|
29144
|
+
reactIs_development.isForwardRef = isForwardRef;
|
|
29145
|
+
reactIs_development.isFragment = isFragment;
|
|
29146
|
+
reactIs_development.isLazy = isLazy;
|
|
29147
|
+
reactIs_development.isMemo = isMemo;
|
|
29148
|
+
reactIs_development.isPortal = isPortal;
|
|
29149
|
+
reactIs_development.isProfiler = isProfiler;
|
|
29150
|
+
reactIs_development.isStrictMode = isStrictMode;
|
|
29151
|
+
reactIs_development.isSuspense = isSuspense;
|
|
29152
|
+
reactIs_development.isValidElementType = isValidElementType;
|
|
29153
|
+
reactIs_development.typeOf = typeOf;
|
|
29154
|
+
})();
|
|
29155
|
+
}
|
|
29156
|
+
return reactIs_development;
|
|
29157
|
+
}
|
|
29158
|
+
|
|
29159
|
+
var hasRequiredReactIs;
|
|
29160
|
+
function requireReactIs() {
|
|
29161
|
+
if (hasRequiredReactIs) return reactIs.exports;
|
|
29162
|
+
hasRequiredReactIs = 1;
|
|
29163
|
+
if (process.env.NODE_ENV === 'production') {
|
|
29164
|
+
reactIs.exports = requireReactIs_production_min();
|
|
29165
|
+
} else {
|
|
29166
|
+
reactIs.exports = requireReactIs_development();
|
|
29167
|
+
}
|
|
29168
|
+
return reactIs.exports;
|
|
29169
|
+
}
|
|
29170
|
+
|
|
28767
29171
|
var hoistNonReactStatics_cjs;
|
|
28768
29172
|
var hasRequiredHoistNonReactStatics_cjs;
|
|
28769
29173
|
function requireHoistNonReactStatics_cjs() {
|
|
@@ -29109,8 +29513,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
|
|
|
29109
29513
|
} : {}
|
|
29110
29514
|
})(ReCAPTCHA);
|
|
29111
29515
|
|
|
29112
|
-
var css_248z$
|
|
29113
|
-
styleInject(css_248z$
|
|
29516
|
+
var css_248z$B = ".ff-recaptcha-wrapper {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n color: var(--input-error-text-color);\n font-size: 12px;\n margin-top: 4px;\n}";
|
|
29517
|
+
styleInject(css_248z$B);
|
|
29114
29518
|
|
|
29115
29519
|
// Extend the props to include React.RefAttributes
|
|
29116
29520
|
const FixedReCAPTCHA = RecaptchaWrapper;
|
|
@@ -29155,8 +29559,8 @@ const nlpDropdownDefaultCSSData = {
|
|
|
29155
29559
|
dropDownWrapperPadding: 0
|
|
29156
29560
|
};
|
|
29157
29561
|
|
|
29158
|
-
var css_248z$
|
|
29159
|
-
styleInject(css_248z$
|
|
29562
|
+
var css_248z$A = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-option {\n color: var(--nlp-option-color);\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n max-height: 256px;\n z-index: 999;\n position: absolute;\n border: 1px solid var(--nlp-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--primary-icon-color);\n overflow: hidden auto;\n display: flex;\n justify-content: space-between;\n overflow: hidden;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper {\n max-height: 240px;\n z-index: 100;\n min-width: 290px;\n box-sizing: border-box;\n overflow: scroll;\n scrollbar-width: none;\n flex-grow: 1;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper::-webkit-scrollbar {\n display: none;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n width: calc(100% - 10px);\n border: 1px solid transparent;\n padding: 0 4px;\n overflow: hidden;\n white-space: nowrap;\n height: 32px;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n background-color: var(--nlp-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n width: calc(100% - 16px);\n margin: 0;\n overflow: hidden;\n padding: 0 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show {\n width: 380px;\n height: 235px;\n border: 1px solid transparent;\n overflow: scroll;\n scrollbar-width: none;\n padding: 8px;\n border: 1px solid var(--nlp-border-color);\n position: relative;\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-hide {\n display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-categories {\n padding: 0px 2px;\n gap: 10px;\n border-radius: 2px;\n background: var(--nlp-background-color);\n color: var(--nlp-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-side-menu {\n display: flex;\n flex-direction: column;\n row-gap: 8px;\n color: var(--nlp-option-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show::-webkit-scrollbar {\n display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-details-header {\n color: var(--status-skipped-text-color);\n display: flex;\n flex-direction: column;\n}\n.ff-nlp-dropdown-wrapper .nlp-details {\n color: var(--status-skipped-text-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper-main {\n display: flex;\n flex-direction: column;\n width: 302px;\n justify-content: space-between;\n flex-grow: 1;\n}\n\n.ff-nlp {\n color: var(--nlp-color);\n}\n\n.ff-sg {\n color: var(--nlp-step-group-color);\n background-color: var(--nlp-step-group-background);\n}\n\n.ff-pe {\n color: var(--nlp-pe-color);\n background-color: var(--nlp-pe-background);\n}\n\n.ff-nlp-web-service-div {\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
29563
|
+
styleInject(css_248z$A);
|
|
29160
29564
|
|
|
29161
29565
|
const NlpDropdown = ({
|
|
29162
29566
|
onSelectBlur,
|
|
@@ -29409,8 +29813,8 @@ const NlpDropdown = ({
|
|
|
29409
29813
|
});
|
|
29410
29814
|
};
|
|
29411
29815
|
|
|
29412
|
-
var css_248z$
|
|
29413
|
-
styleInject(css_248z$
|
|
29816
|
+
var css_248z$z = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 482px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n margin: 0;\n padding: 25px 0px 0px 8px;\n border: 1px solid transparent;\n box-sizing: border-box;\n height: 32px;\n width: 100%;\n border-radius: 4px;\n display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n opacity: 0;\n border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n opacity: 1;\n border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n opacity: 1;\n color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n opacity: 1;\n color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: calc(100% - 38px);\n height: 32px;\n padding: 0 28px 0 8px;\n border-radius: 4px;\n border: 1px solid transparent;\n z-index: 100;\n background: transparent;\n outline: none;\n color: var(--ff-nlp-input-text-color);\n text-indent: 22px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container:hover ~ .ff-nlp-input-label {\n color: var(--nlp-input-placeholder-color);\n padding-left: 26px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default {\n opacity: 1;\n border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover {\n border-color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover ~ .ff-nlp-input-fieldset--option {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover ~ .ff-nlp-input-label--default {\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error:hover {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n position: absolute;\n top: 13px;\n right: auto;\n bottom: auto;\n left: 8px;\n z-index: 1;\n font-size: 12px;\n top: 60%;\n padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 1;\n color: var(--nlp-input-placeholder-color);\n transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n transform: translateY(-150%);\n padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n position: absolute;\n top: 60%;\n height: 100%;\n right: 10px;\n transform: rotateX(0deg) translateY(-50%);\n cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n top: 50%;\n}\n.ff-nlp-input-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n display: flex;\n align-items: center;\n padding-left: 26px;\n gap: 4px;\n}\n.ff-nlp-input-wrapper .ff-nlp-help_icon {\n position: absolute;\n bottom: 2px;\n left: 8px;\n width: 30px;\n height: 30px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-nlp-input-arrow {\n z-index: 111;\n}\n\n.icon-container {\n position: relative;\n display: inline-block;\n}\n\n.icon-label {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-55%);\n transform: translateY(-145%);\n margin-bottom: 5px;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n padding: 2px 5px;\n border-radius: 3px;\n white-space: nowrap;\n}\n\n.icon-container:hover .icon-label {\n visibility: visible;\n opacity: 1;\n transition-delay: 0s;\n}\n\n.help-icon-label {\n position: absolute;\n bottom: 80%;\n left: 96%;\n transform: translateX(-50%);\n margin-bottom: 5px;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n padding: 2px 5px;\n border-radius: 3px;\n white-space: nowrap;\n}\n\n.help-icon-container:hover .help-icon-label {\n visibility: visible;\n opacity: 1;\n transition-delay: 0s;\n}";
|
|
29817
|
+
styleInject(css_248z$z);
|
|
29414
29818
|
|
|
29415
29819
|
const nlpInputReducer = (state, action) => {
|
|
29416
29820
|
switch (action.type) {
|
|
@@ -29749,8 +30153,8 @@ const NlpInput = ({
|
|
|
29749
30153
|
});
|
|
29750
30154
|
};
|
|
29751
30155
|
|
|
29752
|
-
var css_248z$
|
|
29753
|
-
styleInject(css_248z$
|
|
30156
|
+
var css_248z$y = ".ff-icon-radio-group {\n width: 237px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 47px;\n position: relative;\n}\n\n.ff-icon-radio-button {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n position: relative;\n z-index: 5;\n}\n.ff-icon-radio-button.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n opacity: 50%;\n cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--border-color);\n background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n width: 14px;\n height: 14px;\n}\n\n.line-connector {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background-color: var(--border-color);\n z-index: 3;\n border-radius: 2px 0px 0px 0px;\n opacity: 0px;\n}";
|
|
30157
|
+
styleInject(css_248z$y);
|
|
29754
30158
|
|
|
29755
30159
|
const IconRadioGroup = ({
|
|
29756
30160
|
items,
|
|
@@ -29801,8 +30205,8 @@ const IconRadioGroup = ({
|
|
|
29801
30205
|
});
|
|
29802
30206
|
};
|
|
29803
30207
|
|
|
29804
|
-
var css_248z$
|
|
29805
|
-
styleInject(css_248z$
|
|
30208
|
+
var css_248z$x = ".ff-machine-input-field-wrapper {\n min-width: 100px;\n height: 32px;\n position: relative;\n cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n height: 100%;\n width: 100%;\n border: 1px solid var(--ff-machine-input-field-border-color);\n padding: 0 8px 0 0;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field:hover,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse:hover {\n border-color: var(--ff-connecting-branch-color);\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n display: flex;\n align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n max-width: fit-content;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n position: absolute;\n top: -6px;\n left: 8px;\n background-color: var(--ff-machine-input-field-label-color);\n border-radius: 4px;\n padding: 1px 2px;\n height: 12px;\n}";
|
|
30209
|
+
styleInject(css_248z$x);
|
|
29806
30210
|
|
|
29807
30211
|
const MachineInputField = ({
|
|
29808
30212
|
width = '',
|
|
@@ -29871,12 +30275,12 @@ const MachineInputField = ({
|
|
|
29871
30275
|
};
|
|
29872
30276
|
MachineInputField.displayName = 'MachineInputField';
|
|
29873
30277
|
|
|
29874
|
-
var css_248z$
|
|
29875
|
-
styleInject(css_248z$x);
|
|
29876
|
-
|
|
29877
|
-
var css_248z$w = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 3px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0 0 16px 0;\n}";
|
|
30278
|
+
var css_248z$w = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n height: 66px;\n box-sizing: border-box;\n width: fit-content;\n margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n display: flex;\n align-items: center;\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n margin: 0;\n width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n width: 6px;\n height: 6px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(100% 50%, 0 100%, 0 0);\n position: absolute;\n right: -1px;\n top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -3px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n position: absolute;\n height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -2px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n width: 0;\n height: 62px;\n top: calc(50% + 1px);\n border-left: 1px solid var(--ff-connecting-branch-color);\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n box-sizing: border-box;\n width: 240px;\n display: flex;\n justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n display: flex;\n align-items: center;\n margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n text-transform: capitalize;\n margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n box-sizing: border-box;\n width: fit-content;\n height: fit-content;\n}";
|
|
29878
30279
|
styleInject(css_248z$w);
|
|
29879
30280
|
|
|
30281
|
+
var css_248z$v = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 3px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0 0 16px 0;\n}";
|
|
30282
|
+
styleInject(css_248z$v);
|
|
30283
|
+
|
|
29880
30284
|
const DataSetTooltip = ({
|
|
29881
30285
|
datSetToolTip: {
|
|
29882
30286
|
globalVariableSetName = '',
|
|
@@ -30138,8 +30542,8 @@ const Branches = ({
|
|
|
30138
30542
|
});
|
|
30139
30543
|
};
|
|
30140
30544
|
|
|
30141
|
-
var css_248z$
|
|
30142
|
-
styleInject(css_248z$
|
|
30545
|
+
var css_248z$u = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
|
|
30546
|
+
styleInject(css_248z$u);
|
|
30143
30547
|
|
|
30144
30548
|
const ConnectingBranches = ({
|
|
30145
30549
|
machineBranchInstances,
|
|
@@ -30353,8 +30757,8 @@ const SequentialConnectingBranch = ({
|
|
|
30353
30757
|
});
|
|
30354
30758
|
};
|
|
30355
30759
|
|
|
30356
|
-
var css_248z$
|
|
30357
|
-
styleInject(css_248z$
|
|
30760
|
+
var css_248z$t = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n display: flex;\n align-items: center;\n gap: 4px;\n line-height: 15px;\n}";
|
|
30761
|
+
styleInject(css_248z$t);
|
|
30358
30762
|
|
|
30359
30763
|
const AttachmentButton = ({
|
|
30360
30764
|
label,
|
|
@@ -30531,8 +30935,8 @@ const toast = {
|
|
|
30531
30935
|
alert: (arg1, arg2) => openToast('alert', arg1, arg2)
|
|
30532
30936
|
};
|
|
30533
30937
|
|
|
30534
|
-
var css_248z$
|
|
30535
|
-
styleInject(css_248z$
|
|
30938
|
+
var css_248z$s = "/* Container Styling */\n.toggle-container {\n display: flex;\n background-color: var(--base-bg-color);\n height: 24px;\n border-radius: 6px;\n padding: 4px 2px;\n overflow: hidden;\n width: fit-content;\n box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n align-items: center;\n justify-content: center;\n gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n padding: 4px 2px;\n font-size: 10px;\n font-weight: 500;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n background-color: var(--base-bg-color);\n color: var(--ff-toggle-switch-off-color);\n outline: none;\n transition: all 0.3s ease;\n min-width: 24px;\n height: 20px;\n text-align: center;\n box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n background-color: var(--ff-line-number-bg);\n color: var(--base-bg-color);\n box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n background-color: var(--hover-color);\n color: var(--brand-color);\n}";
|
|
30939
|
+
styleInject(css_248z$s);
|
|
30536
30940
|
|
|
30537
30941
|
const ToggleSwitch = ({
|
|
30538
30942
|
selected = "text",
|
|
@@ -30554,8 +30958,8 @@ const ToggleSwitch = ({
|
|
|
30554
30958
|
});
|
|
30555
30959
|
};
|
|
30556
30960
|
|
|
30557
|
-
var css_248z$
|
|
30558
|
-
styleInject(css_248z$
|
|
30961
|
+
var css_248z$r = ".ff-avatar {\n border-radius: 50%;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n width: 32px;\n height: 32px;\n}\n.ff-avatar--medium {\n width: 48px;\n height: 48px;\n}\n.ff-avatar--large {\n width: 64px;\n height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n font-weight: bold;\n text-align: center;\n}";
|
|
30962
|
+
styleInject(css_248z$r);
|
|
30559
30963
|
|
|
30560
30964
|
const Avatar = ({
|
|
30561
30965
|
variant = "small",
|
|
@@ -30591,227 +30995,6 @@ const Avatar = ({
|
|
|
30591
30995
|
});
|
|
30592
30996
|
};
|
|
30593
30997
|
|
|
30594
|
-
var css_248z$r = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 5px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n position: relative;\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .ff-icon-container .disabled-confirm-icon {\n cursor: default;\n opacity: 0.5;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}\n\n.custom-edit-text-field {\n height: 10px;\n width: 100px;\n}";
|
|
30595
|
-
styleInject(css_248z$r);
|
|
30596
|
-
|
|
30597
|
-
const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
|
|
30598
|
-
if (inputValue === text) {
|
|
30599
|
-
return 'No changes were made.';
|
|
30600
|
-
} else if (!inputValue) {
|
|
30601
|
-
return 'Text is required';
|
|
30602
|
-
} else if (inputValue.length < 3) {
|
|
30603
|
-
return 'Please enter at least 3 characters.';
|
|
30604
|
-
} else ;
|
|
30605
|
-
return '';
|
|
30606
|
-
};
|
|
30607
|
-
const LabelEditTextField = ({
|
|
30608
|
-
label,
|
|
30609
|
-
placeholder,
|
|
30610
|
-
text,
|
|
30611
|
-
showText = true,
|
|
30612
|
-
highlightText,
|
|
30613
|
-
customError,
|
|
30614
|
-
confirmIcon,
|
|
30615
|
-
customErrorCondition,
|
|
30616
|
-
cancelIcon,
|
|
30617
|
-
variant = 'textField',
|
|
30618
|
-
onInputChange,
|
|
30619
|
-
dropdownData = [],
|
|
30620
|
-
// width,
|
|
30621
|
-
className,
|
|
30622
|
-
height,
|
|
30623
|
-
isOpen = false,
|
|
30624
|
-
confirmAction,
|
|
30625
|
-
onClick,
|
|
30626
|
-
tooltip
|
|
30627
|
-
}) => {
|
|
30628
|
-
const [isEditing, setIsEditing] = React.useState(isOpen ?? false);
|
|
30629
|
-
const [inputValue, setInputValue] = React.useState(text ?? '');
|
|
30630
|
-
const [dropdownValue, setDropdownValue] = React.useState(dropdownData[0]?.value ?? '');
|
|
30631
|
-
const [showError, setShowError] = React.useState('');
|
|
30632
|
-
const [disabled, isDisabled] = React.useState(true);
|
|
30633
|
-
const [isTextFieldModified, setIsTextFieldModified] = React.useState(false);
|
|
30634
|
-
const isThrowingError = showError && isEditing ? true : false;
|
|
30635
|
-
const containerRef = React.useRef(null);
|
|
30636
|
-
const cancelRef = React.useRef(null);
|
|
30637
|
-
const [clickTimeout, setClickTimeout] = React.useState(null);
|
|
30638
|
-
const handleEsc = useEscapeKey('Escape');
|
|
30639
|
-
React.useEffect(() => {
|
|
30640
|
-
return () => {
|
|
30641
|
-
if (clickTimeout) {
|
|
30642
|
-
clearTimeout(clickTimeout);
|
|
30643
|
-
}
|
|
30644
|
-
};
|
|
30645
|
-
}, [clickTimeout]);
|
|
30646
|
-
const handleDoubleClick = () => {
|
|
30647
|
-
if (clickTimeout) {
|
|
30648
|
-
clearTimeout(clickTimeout);
|
|
30649
|
-
setClickTimeout(null);
|
|
30650
|
-
}
|
|
30651
|
-
setIsEditing(true);
|
|
30652
|
-
setShowError('');
|
|
30653
|
-
};
|
|
30654
|
-
const handleSingleClick = () => {
|
|
30655
|
-
if (onClick) onClick();
|
|
30656
|
-
};
|
|
30657
|
-
const handleClick = () => {
|
|
30658
|
-
if (clickTimeout) {
|
|
30659
|
-
clearTimeout(clickTimeout);
|
|
30660
|
-
setClickTimeout(null);
|
|
30661
|
-
}
|
|
30662
|
-
const timeout = window.setTimeout(() => {
|
|
30663
|
-
handleSingleClick();
|
|
30664
|
-
setClickTimeout(null);
|
|
30665
|
-
}, 1000);
|
|
30666
|
-
setClickTimeout(timeout);
|
|
30667
|
-
};
|
|
30668
|
-
const handleConfirm = () => {
|
|
30669
|
-
let errorMessage = '';
|
|
30670
|
-
if (inputValue.length === 0 || inputValue.trim().length === 0) {
|
|
30671
|
-
errorMessage = 'Please type any text.';
|
|
30672
|
-
} else if (inputValue.length < 3) {
|
|
30673
|
-
errorMessage = 'Please enter at least 3 characters.';
|
|
30674
|
-
} else if (customErrorCondition) {
|
|
30675
|
-
errorMessage = customError ?? 'Invalid input.';
|
|
30676
|
-
}
|
|
30677
|
-
if (errorMessage) {
|
|
30678
|
-
setShowError(errorMessage);
|
|
30679
|
-
} else {
|
|
30680
|
-
setIsEditing(false);
|
|
30681
|
-
setShowError('');
|
|
30682
|
-
if (confirmAction) confirmAction(inputValue, dropdownValue);
|
|
30683
|
-
}
|
|
30684
|
-
};
|
|
30685
|
-
const handleCancel = () => {
|
|
30686
|
-
setInputValue(text ?? '');
|
|
30687
|
-
setDropdownValue(dropdownData[0]?.value ?? '');
|
|
30688
|
-
setIsEditing(false);
|
|
30689
|
-
setShowError('');
|
|
30690
|
-
setIsTextFieldModified(false);
|
|
30691
|
-
};
|
|
30692
|
-
const handleTextFieldChange = e => {
|
|
30693
|
-
const newValue = e.target.value;
|
|
30694
|
-
setInputValue(newValue);
|
|
30695
|
-
isDisabled(false);
|
|
30696
|
-
if (newValue.length === 0 || newValue.trim().length === 0) {
|
|
30697
|
-
setShowError('Please type any text.');
|
|
30698
|
-
} else if (newValue.length < 3) {
|
|
30699
|
-
setShowError('Please enter at least 3 characters.');
|
|
30700
|
-
} else if (customErrorCondition) {
|
|
30701
|
-
setShowError(customError ?? 'Invalid input.');
|
|
30702
|
-
} else {
|
|
30703
|
-
setShowError('');
|
|
30704
|
-
}
|
|
30705
|
-
setIsTextFieldModified(newValue !== text);
|
|
30706
|
-
if (onInputChange) {
|
|
30707
|
-
onInputChange(newValue);
|
|
30708
|
-
}
|
|
30709
|
-
};
|
|
30710
|
-
const handleBlur = e => {
|
|
30711
|
-
if (containerRef.current && !containerRef.current.contains(e.target) && cancelRef.current !== e.target) {
|
|
30712
|
-
const errorMessage = getErrorMessage$1(inputValue, text ?? '');
|
|
30713
|
-
if (errorMessage && isEditing) {
|
|
30714
|
-
setShowError(errorMessage);
|
|
30715
|
-
} else {
|
|
30716
|
-
setIsEditing(false);
|
|
30717
|
-
setShowError('');
|
|
30718
|
-
}
|
|
30719
|
-
}
|
|
30720
|
-
};
|
|
30721
|
-
React.useEffect(() => {
|
|
30722
|
-
document.addEventListener('click', handleBlur);
|
|
30723
|
-
return () => {
|
|
30724
|
-
document.removeEventListener('click', handleBlur);
|
|
30725
|
-
};
|
|
30726
|
-
}, [inputValue]);
|
|
30727
|
-
handleEsc(handleCancel);
|
|
30728
|
-
return jsxRuntime.jsxs("div", {
|
|
30729
|
-
className: "ff-label-edit-text-field",
|
|
30730
|
-
ref: containerRef,
|
|
30731
|
-
children: [isEditing ? jsxRuntime.jsxs("div", {
|
|
30732
|
-
className: "ff-label-text-field",
|
|
30733
|
-
children: [variant === 'textFieldWithDropdown' ? jsxRuntime.jsxs("div", {
|
|
30734
|
-
className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`,
|
|
30735
|
-
style: {
|
|
30736
|
-
height
|
|
30737
|
-
},
|
|
30738
|
-
children: [jsxRuntime.jsx(Input, {
|
|
30739
|
-
name: "input",
|
|
30740
|
-
type: "text",
|
|
30741
|
-
label: label ? label : '',
|
|
30742
|
-
disabled: false,
|
|
30743
|
-
error: isThrowingError,
|
|
30744
|
-
placeholder: placeholder ? placeholder : '',
|
|
30745
|
-
value: inputValue,
|
|
30746
|
-
onChange: handleTextFieldChange,
|
|
30747
|
-
className: `${className}
|
|
30748
|
-
|
|
30749
|
-
${isTextFieldModified ? 'modified' : ''}`
|
|
30750
|
-
}), jsxRuntime.jsx(Select$1, {
|
|
30751
|
-
label: '',
|
|
30752
|
-
optionsList: dropdownData,
|
|
30753
|
-
selectedOption: {
|
|
30754
|
-
value: dropdownValue,
|
|
30755
|
-
label: dropdownValue
|
|
30756
|
-
},
|
|
30757
|
-
onChange: option => setDropdownValue(option.value)
|
|
30758
|
-
})]
|
|
30759
|
-
}) : jsxRuntime.jsx("div", {
|
|
30760
|
-
className: "ff-label-text-field-without-dropdown",
|
|
30761
|
-
children: jsxRuntime.jsx(Input, {
|
|
30762
|
-
name: "input",
|
|
30763
|
-
type: "text",
|
|
30764
|
-
label: label ? label : '',
|
|
30765
|
-
disabled: false,
|
|
30766
|
-
placeholder: placeholder ? placeholder : '',
|
|
30767
|
-
value: inputValue,
|
|
30768
|
-
onChange: handleTextFieldChange,
|
|
30769
|
-
className: `${className}
|
|
30770
|
-
|
|
30771
|
-
${isTextFieldModified ? 'modified' : ''}`
|
|
30772
|
-
})
|
|
30773
|
-
}), jsxRuntime.jsxs("div", {
|
|
30774
|
-
className: "ff-icon-container",
|
|
30775
|
-
children: [confirmIcon && jsxRuntime.jsx(Icon, {
|
|
30776
|
-
color: "var(--label-edit-confirm-icon)",
|
|
30777
|
-
height: 20,
|
|
30778
|
-
width: 20,
|
|
30779
|
-
name: confirmIcon.name,
|
|
30780
|
-
disabled: disabled,
|
|
30781
|
-
className: `${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`,
|
|
30782
|
-
onClick: handleConfirm
|
|
30783
|
-
}), cancelIcon && jsxRuntime.jsx(Icon, {
|
|
30784
|
-
color: "var(--label-edit-cancel-icon)",
|
|
30785
|
-
height: 12,
|
|
30786
|
-
width: 20,
|
|
30787
|
-
name: cancelIcon.name,
|
|
30788
|
-
className: "cancel-icon",
|
|
30789
|
-
onClick: handleCancel,
|
|
30790
|
-
ref: cancelRef
|
|
30791
|
-
})]
|
|
30792
|
-
})]
|
|
30793
|
-
}) : jsxRuntime.jsx(Tooltip, {
|
|
30794
|
-
title: tooltip?.tooltipTitle ? tooltip?.tooltipTitle : '',
|
|
30795
|
-
placement: 'bottom',
|
|
30796
|
-
children: showText && jsxRuntime.jsx("span", {
|
|
30797
|
-
className: "display-text",
|
|
30798
|
-
onDoubleClick: handleDoubleClick,
|
|
30799
|
-
role: "button",
|
|
30800
|
-
onClick: handleClick,
|
|
30801
|
-
children: jsxRuntime.jsx(HighlightText, {
|
|
30802
|
-
text: inputValue,
|
|
30803
|
-
highlight: highlightText
|
|
30804
|
-
})
|
|
30805
|
-
})
|
|
30806
|
-
}), showError && isEditing && jsxRuntime.jsx(Typography, {
|
|
30807
|
-
as: "p",
|
|
30808
|
-
fontSize: 8,
|
|
30809
|
-
className: "error-text",
|
|
30810
|
-
children: showError
|
|
30811
|
-
})]
|
|
30812
|
-
});
|
|
30813
|
-
};
|
|
30814
|
-
|
|
30815
30998
|
var css_248z$q = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n padding: 4px 8px;\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n border: 1px solid var(--button-border-color);\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n color: var(--label-edit-error-text);\n margin: 0;\n}";
|
|
30816
30999
|
styleInject(css_248z$q);
|
|
30817
31000
|
|
|
@@ -37009,6 +37192,7 @@ const IconRadialChart = ({
|
|
|
37009
37192
|
percentageValue,
|
|
37010
37193
|
icon,
|
|
37011
37194
|
fontSize = 10,
|
|
37195
|
+
labelColor = '',
|
|
37012
37196
|
arcColor = 'var(--brand-color)',
|
|
37013
37197
|
backgroundArcColor = 'var(--ff-select-scroll-thumb-color)'
|
|
37014
37198
|
}) => {
|
|
@@ -37095,7 +37279,7 @@ const IconRadialChart = ({
|
|
|
37095
37279
|
}) : jsxRuntime.jsx("text", {
|
|
37096
37280
|
x: "0",
|
|
37097
37281
|
y: "0",
|
|
37098
|
-
fill: arcColor,
|
|
37282
|
+
fill: labelColor || arcColor,
|
|
37099
37283
|
textAnchor: "middle",
|
|
37100
37284
|
dominantBaseline: "central",
|
|
37101
37285
|
children: `${Math.round(percentageValue)}%`
|
|
@@ -37180,7 +37364,7 @@ const AttachImage = ({
|
|
|
37180
37364
|
});
|
|
37181
37365
|
};
|
|
37182
37366
|
|
|
37183
|
-
var css_248z$h = ".ff-card-container {\n height: 78px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 12%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 17px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container .ff-content {\n height: 100%;\n flex: 1;\n padding: 0px 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-content {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-content {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-content {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-content {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-content {\n background-color: var(--ff-card-flaky-status-bg-color);\n}";
|
|
37367
|
+
var css_248z$h = ".ff-card-container {\n height: 78px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.passed .ff-status-bar {\n border-right: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.failed .ff-status-bar {\n border-right: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.warning .ff-status-bar {\n border-right: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.skipped .ff-status-bar {\n border-right: 1px solid var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container:hover.flaky .ff-status-bar {\n border-right: 1px solid var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container:hover.total {\n border-color: var(--card-total-defect-color);\n}\n.ff-card-container:hover.total .ff-status-bar {\n border-right: 1px solid var(--card-total-defect-color);\n}\n.ff-card-container:hover.defect {\n border-color: var(--card-defect-density);\n}\n.ff-card-container:hover.defect .ff-status-bar {\n border-right: 1px solid var(--card-defect-density);\n}\n.ff-card-container:hover.open {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.open .ff-status-bar {\n border-right: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.closed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.closed .ff-status-bar {\n border-right: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.quality {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.quality .ff-status-bar {\n border-right: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 12%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n border-right: 1px solid var(--border-color);\n border-radius: 3px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: flex;\n align-items: start;\n height: 16px;\n width: 6px;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.passed .ff-content .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.passed.toggled {\n background-color: var(--ff-card-passed-status-bg-color);\n border: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.passed.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-passed-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.passed.toggled .ff-content {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-content .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.failed.toggled {\n background-color: var(--ff-card-failed-status-bg-color);\n border: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.failed.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-failed-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.failed.toggled .ff-content {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-content .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.warning.toggled {\n background-color: var(--ff-card-warning-status-bg-color);\n border: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.warning.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-warning-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.warning.toggled .ff-content {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-content .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.skipped.toggled {\n background-color: var(--ff-card-skipped-status-bg-color);\n border: 1px solid var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.skipped.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-skipped-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.skipped.toggled .ff-content {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-content .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.flaky.toggled {\n background-color: var(--ff-card-flaky-status-bg-color);\n border: 1px solid var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.flaky.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-flaky-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.flaky.toggled .ff-content {\n background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.total .ff-status-bar {\n background-color: var(--card-total-defect-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.total .ff-content .ff-number {\n color: var(--card-total-defect-color);\n}\n.ff-card-container.total.toggled {\n background-color: var(--card-total-defect-color);\n border: 1px solid var(--card-total-defect-color);\n}\n.ff-card-container.total.toggled .ff-status-bar {\n border-right: 1px solid var(--card-total-defect-color);\n background-color: var(--base-bg-color);\n color: var(--card-total-defect-color);\n}\n.ff-card-container.total.toggled .ff-content {\n background-color: var(--card-total-defect-color);\n}\n.ff-card-container.defect .ff-status-bar {\n background-color: var(--card-defect-density);\n color: var(--base-bg-color);\n}\n.ff-card-container.defect .ff-content .ff-number {\n color: var(--card-defect-density);\n}\n.ff-card-container.defect.toggled {\n background-color: var(--card-defect-density);\n border: 1px solid var(--card-defect-density);\n}\n.ff-card-container.defect.toggled .ff-status-bar {\n border-right: 1px solid var(--card-defect-density);\n background-color: var(--base-bg-color);\n color: var(--card-defect-density);\n}\n.ff-card-container.defect.toggled .ff-content {\n background-color: var(--card-defect-density);\n}\n.ff-card-container.open .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.open .ff-content .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.open.toggled {\n background-color: var(--ff-card-failed-status-bg-color);\n border: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.open.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-failed-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.open.toggled .ff-content {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.closed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.closed .ff-content .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.closed.toggled {\n background-color: var(--ff-card-passed-status-bg-color);\n border: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.closed.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-passed-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.closed.toggled .ff-content {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.quality .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.quality .ff-content .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.quality.toggled {\n background-color: var(--ff-card-warning-status-bg-color);\n border: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.quality.toggled .ff-status-bar {\n border-right: 1px solid var(--ff-card-warning-status-bg-color);\n background-color: var(--base-bg-color);\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.quality.toggled .ff-content {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container .ff-content {\n height: 100%;\n flex: 1;\n padding: 0px 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container .ff-content.red-background {\n gap: 8px;\n}";
|
|
37184
37368
|
styleInject(css_248z$h);
|
|
37185
37369
|
|
|
37186
37370
|
const StatusCard = ({
|
|
@@ -37195,7 +37379,13 @@ const StatusCard = ({
|
|
|
37195
37379
|
onSelectedStatus = _status => {}
|
|
37196
37380
|
}) => {
|
|
37197
37381
|
const [isToggled, setIsToggled] = React.useState(false);
|
|
37382
|
+
const hideStatusText = ['total defects', 'defect density', 'open defects', 'closed defects', 'quality score'];
|
|
37383
|
+
const swapCountAndText = hideStatusText.includes(status.toLowerCase());
|
|
37384
|
+
const redBackground = hideStatusText.includes(status.toLowerCase());
|
|
37198
37385
|
const handleSelectStatus = status => {
|
|
37386
|
+
if (hideStatusText.includes(status.toLowerCase())) {
|
|
37387
|
+
return;
|
|
37388
|
+
}
|
|
37199
37389
|
setIsToggled(true);
|
|
37200
37390
|
onSelectedStatus(status);
|
|
37201
37391
|
};
|
|
@@ -37204,8 +37394,23 @@ const StatusCard = ({
|
|
|
37204
37394
|
setIsToggled(false);
|
|
37205
37395
|
}
|
|
37206
37396
|
}, [resetToggle]);
|
|
37397
|
+
const handleStaticCard = () => {
|
|
37398
|
+
if (status.toLowerCase() === 'defect density') {
|
|
37399
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
37400
|
+
children: [count.toString().padStart(2, '0'), jsxRuntime.jsx(Typography, {
|
|
37401
|
+
fontSize: "15px",
|
|
37402
|
+
fontWeight: "semi-bold",
|
|
37403
|
+
children: "/ Modules"
|
|
37404
|
+
})]
|
|
37405
|
+
});
|
|
37406
|
+
} else if (status.toLowerCase() === 'quality score') {
|
|
37407
|
+
return `${parseFloat(count.toString()).toFixed(2)}%`;
|
|
37408
|
+
} else {
|
|
37409
|
+
return count.toString().padStart(2, '0');
|
|
37410
|
+
}
|
|
37411
|
+
};
|
|
37207
37412
|
return jsxRuntime.jsxs("div", {
|
|
37208
|
-
className: `ff-card-container ${status.toLowerCase()} ${isToggled ?
|
|
37413
|
+
className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
|
|
37209
37414
|
style: style,
|
|
37210
37415
|
onClick: () => handleSelectStatus(status),
|
|
37211
37416
|
children: [jsxRuntime.jsxs("div", {
|
|
@@ -37217,32 +37422,47 @@ const StatusCard = ({
|
|
|
37217
37422
|
width: 20,
|
|
37218
37423
|
hoverEffect: false
|
|
37219
37424
|
})
|
|
37220
|
-
}), jsxRuntime.jsx(Typography, {
|
|
37425
|
+
}), !hideStatusText.includes(status.toLowerCase()) && jsxRuntime.jsx(Typography, {
|
|
37221
37426
|
fontWeight: "semi-bold",
|
|
37222
37427
|
fontSize: "10px",
|
|
37223
37428
|
textAlign: "center",
|
|
37224
37429
|
lineHeight: "15px",
|
|
37225
37430
|
className: "ff-status-text",
|
|
37226
37431
|
as: "div",
|
|
37227
|
-
children: status
|
|
37228
|
-
})]
|
|
37229
|
-
}), jsxRuntime.jsxs("div", {
|
|
37230
|
-
className: "ff-content",
|
|
37231
|
-
children: [jsxRuntime.jsx(Typography, {
|
|
37232
|
-
fontWeight: "semi-bold",
|
|
37233
|
-
fontSize: "24px",
|
|
37234
|
-
className: "ff-number",
|
|
37235
|
-
lineHeight: "36px",
|
|
37236
|
-
color: isToggled ? 'var(--base-bg-color)' : '',
|
|
37237
|
-
children: count
|
|
37238
|
-
}), jsxRuntime.jsx(Typography, {
|
|
37239
|
-
fontWeight: "regular",
|
|
37240
|
-
fontSize: "10px",
|
|
37241
|
-
className: "ff-text",
|
|
37242
|
-
lineHeight: "15px",
|
|
37243
|
-
color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
|
|
37244
|
-
children: text
|
|
37432
|
+
children: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()
|
|
37245
37433
|
})]
|
|
37434
|
+
}), jsxRuntime.jsx("div", {
|
|
37435
|
+
className: `ff-content ${redBackground ? 'red-background' : ''}`,
|
|
37436
|
+
children: swapCountAndText ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
37437
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
37438
|
+
fontWeight: "semi-bold",
|
|
37439
|
+
fontSize: "10px",
|
|
37440
|
+
className: "ff-text",
|
|
37441
|
+
lineHeight: "15px",
|
|
37442
|
+
color: 'var(--ff-chip-text-color)',
|
|
37443
|
+
children: text
|
|
37444
|
+
}), jsxRuntime.jsx(Typography, {
|
|
37445
|
+
fontWeight: "semi-bold",
|
|
37446
|
+
fontSize: "24px",
|
|
37447
|
+
className: "ff-number",
|
|
37448
|
+
lineHeight: "36px",
|
|
37449
|
+
children: handleStaticCard()
|
|
37450
|
+
})]
|
|
37451
|
+
}) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
37452
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
37453
|
+
fontWeight: "semi-bold",
|
|
37454
|
+
fontSize: "24px",
|
|
37455
|
+
className: "ff-number",
|
|
37456
|
+
lineHeight: "24px",
|
|
37457
|
+
color: isToggled ? 'var(--base-bg-color)' : '',
|
|
37458
|
+
children: count.toString().padStart(2, '0')
|
|
37459
|
+
}), jsxRuntime.jsx(Typography, {
|
|
37460
|
+
className: "ff-text",
|
|
37461
|
+
lineHeight: "18px",
|
|
37462
|
+
color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-chip-text-color)',
|
|
37463
|
+
children: text
|
|
37464
|
+
})]
|
|
37465
|
+
})
|
|
37246
37466
|
})]
|
|
37247
37467
|
});
|
|
37248
37468
|
};
|
|
@@ -37411,7 +37631,8 @@ const LineChart = ({
|
|
|
37411
37631
|
fontWeight,
|
|
37412
37632
|
numberSize,
|
|
37413
37633
|
proportionalSpacing,
|
|
37414
|
-
chartName
|
|
37634
|
+
chartName,
|
|
37635
|
+
xAxisLabelGap = 16
|
|
37415
37636
|
}) => {
|
|
37416
37637
|
const margin = 40;
|
|
37417
37638
|
const xMax = width - margin * 2;
|
|
@@ -37562,7 +37783,8 @@ const LineChart = ({
|
|
|
37562
37783
|
return jsxRuntime.jsxs("div", {
|
|
37563
37784
|
className: "ff-line-chart-text",
|
|
37564
37785
|
style: {
|
|
37565
|
-
width: width + 20
|
|
37786
|
+
width: width + 20 + xAxisLabelGap,
|
|
37787
|
+
gap: xAxisLabelGap
|
|
37566
37788
|
},
|
|
37567
37789
|
children: [jsxRuntime.jsxs("div", {
|
|
37568
37790
|
className: "ff-line-chart-yAxisLabel-warpper",
|
|
@@ -37644,10 +37866,10 @@ const LineChart = ({
|
|
|
37644
37866
|
strokeDasharray: "4"
|
|
37645
37867
|
})]
|
|
37646
37868
|
})]
|
|
37647
|
-
}, index) : null), data[0].data.filter((_, index) => index % xTickInterval === 0).map(point => jsxRuntime.jsx("text", {
|
|
37869
|
+
}, index) : null), data[0].data.filter((_, index) => index % xTickInterval === 0).map((point, index) => jsxRuntime.jsx("text", {
|
|
37648
37870
|
x: xScale(point[xKey]),
|
|
37649
37871
|
y: yMax + 15,
|
|
37650
|
-
textAnchor:
|
|
37872
|
+
textAnchor: index === 0 ? 'start' : 'middle',
|
|
37651
37873
|
fill: yAxisColor,
|
|
37652
37874
|
className: "ff--line-chart-x-line-data",
|
|
37653
37875
|
style: {
|
|
@@ -43585,7 +43807,7 @@ const throttle = (func, limit) => {
|
|
|
43585
43807
|
return throttled;
|
|
43586
43808
|
};
|
|
43587
43809
|
|
|
43588
|
-
var css_248z$7 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-bar-chart-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-bar-chart-container svg {\n display: block;\n}\n.ff-bar-chart-container .ff-legend-container {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n width: 290px;\n margin-top: 10px;\n display: flex;\n justify-content: flex-end;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n display: inline-block;\n width: 12px;\n height: 12px;\n margin-right: 5px;\n border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n position: absolute;\n pointer-events: none;\n width: 24px;\n height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n font-weight: 400;\n color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n position: absolute;\n padding: 5px 10px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n border-radius: 4px;\n pointer-events: none;\n font-weight: 600;\n}";
|
|
43810
|
+
var css_248z$7 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-bar-chart-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-bar-chart-container svg {\n display: block;\n}\n.ff-bar-chart-container .ff-legend-container {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n width: 290px;\n margin-top: 10px;\n display: flex;\n justify-content: flex-end;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n display: inline-block;\n width: 12px;\n height: 12px;\n margin-right: 5px;\n border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n position: absolute;\n pointer-events: none;\n width: 24px;\n height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n font-weight: 400;\n color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n display: none;\n position: absolute;\n padding: 5px 10px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n border-radius: 4px;\n pointer-events: none;\n font-weight: 600;\n}";
|
|
43589
43811
|
styleInject(css_248z$7);
|
|
43590
43812
|
|
|
43591
43813
|
const BarChart = ({
|
|
@@ -43606,65 +43828,65 @@ const BarChart = ({
|
|
|
43606
43828
|
iconSize,
|
|
43607
43829
|
legendPosition = 'bottom',
|
|
43608
43830
|
legendGap = 5,
|
|
43831
|
+
extendBarChartRightWidth = 0,
|
|
43832
|
+
isYAxisValuePercentage = false,
|
|
43609
43833
|
onSelectedBar = _label => {}
|
|
43610
43834
|
}) => {
|
|
43611
|
-
const
|
|
43612
|
-
|
|
43613
|
-
content: '',
|
|
43614
|
-
x: 0,
|
|
43615
|
-
y: 0,
|
|
43616
|
-
borderColor: 'transparent'
|
|
43617
|
-
});
|
|
43835
|
+
const tooltipRef = React.useRef(null);
|
|
43836
|
+
const [selectedBar, setSelectedBar] = React.useState(null);
|
|
43618
43837
|
const maxValue = Math.max(...data.map(item => item.value));
|
|
43619
43838
|
const topPadding = 40;
|
|
43620
43839
|
const leftPadding = 40;
|
|
43621
43840
|
const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
|
|
43622
|
-
const chartWidth = totalBarWidth + leftPadding * 2 + 10;
|
|
43841
|
+
const chartWidth = totalBarWidth + leftPadding * 2 + 10 + extendBarChartRightWidth;
|
|
43623
43842
|
const renderGradients = gradients => {
|
|
43624
|
-
|
|
43625
|
-
|
|
43626
|
-
|
|
43627
|
-
|
|
43628
|
-
|
|
43629
|
-
|
|
43630
|
-
|
|
43631
|
-
|
|
43632
|
-
|
|
43633
|
-
|
|
43634
|
-
|
|
43635
|
-
|
|
43636
|
-
|
|
43843
|
+
const generateKey = Date.now();
|
|
43844
|
+
return gradients.map((gradient, index) => {
|
|
43845
|
+
return jsxRuntime.jsx("defs", {
|
|
43846
|
+
children: jsxRuntime.jsx("linearGradient", {
|
|
43847
|
+
id: `gradient-${index}`,
|
|
43848
|
+
x1: "0%",
|
|
43849
|
+
y1: "0%",
|
|
43850
|
+
x2: "0%",
|
|
43851
|
+
y2: "100%",
|
|
43852
|
+
children: gradient.map((color, i) => {
|
|
43853
|
+
return jsxRuntime.jsx("stop", {
|
|
43854
|
+
offset: `${i / (gradient.length - 1) * 100}%`,
|
|
43855
|
+
stopColor: color
|
|
43856
|
+
}, `${generateKey}-${index}-${i}`);
|
|
43857
|
+
})
|
|
43858
|
+
})
|
|
43859
|
+
}, `${generateKey}-${index}`);
|
|
43860
|
+
});
|
|
43637
43861
|
};
|
|
43638
43862
|
const getFillColor = index => colors?.[index % colors.length]?.[0] ? `url(#gradient-${index % colors.length})` : 'grey';
|
|
43639
|
-
const
|
|
43640
|
-
|
|
43641
|
-
|
|
43642
|
-
|
|
43643
|
-
|
|
43644
|
-
|
|
43645
|
-
content: `${label}: ${value}`,
|
|
43646
|
-
x: e.clientX,
|
|
43647
|
-
y: e.clientY,
|
|
43648
|
-
borderColor: color
|
|
43649
|
-
});
|
|
43863
|
+
const handleMouseEnter = (label, value) => {
|
|
43864
|
+
const tooltip = tooltipRef.current;
|
|
43865
|
+
if (tooltip) {
|
|
43866
|
+
tooltip.style.display = 'block';
|
|
43867
|
+
tooltip.innerHTML = `<strong>${label}</strong>: ${value} ${isYAxisValuePercentage ? '%' : ''}`;
|
|
43868
|
+
}
|
|
43650
43869
|
};
|
|
43651
43870
|
const handleMouseMove = e => {
|
|
43652
|
-
|
|
43653
|
-
|
|
43654
|
-
|
|
43655
|
-
|
|
43656
|
-
|
|
43871
|
+
const tooltip = tooltipRef.current;
|
|
43872
|
+
if (tooltip) {
|
|
43873
|
+
const rect = tooltip.parentElement?.getBoundingClientRect();
|
|
43874
|
+
const xOffset = window.scrollX;
|
|
43875
|
+
const yOffset = window.scrollY;
|
|
43876
|
+
const tooltipX = e.clientX - (rect?.left || 0) + xOffset + 10;
|
|
43877
|
+
const tooltipY = e.clientY - (rect?.top || 0) + yOffset + 10;
|
|
43878
|
+
tooltip.style.left = `${tooltipX}px`;
|
|
43879
|
+
tooltip.style.top = `${tooltipY}px`;
|
|
43880
|
+
}
|
|
43657
43881
|
};
|
|
43658
43882
|
const handleMouseLeave = () => {
|
|
43659
|
-
|
|
43660
|
-
|
|
43661
|
-
|
|
43662
|
-
|
|
43663
|
-
y: 0,
|
|
43664
|
-
borderColor: 'transparent'
|
|
43665
|
-
});
|
|
43883
|
+
const tooltip = tooltipRef.current;
|
|
43884
|
+
if (tooltip) {
|
|
43885
|
+
tooltip.style.display = 'none';
|
|
43886
|
+
}
|
|
43666
43887
|
};
|
|
43667
43888
|
const handleSelectLabel = label => {
|
|
43889
|
+
setSelectedBar(label);
|
|
43668
43890
|
onSelectedBar(label);
|
|
43669
43891
|
};
|
|
43670
43892
|
return jsxRuntime.jsxs("div", {
|
|
@@ -43672,7 +43894,10 @@ const BarChart = ({
|
|
|
43672
43894
|
style: {
|
|
43673
43895
|
width: chartWidth
|
|
43674
43896
|
},
|
|
43675
|
-
children: [
|
|
43897
|
+
children: [jsxRuntime.jsx("div", {
|
|
43898
|
+
ref: tooltipRef,
|
|
43899
|
+
className: "ff-bar-chart-tooltip"
|
|
43900
|
+
}), legend && legendPosition === 'top' && jsxRuntime.jsx("div", {
|
|
43676
43901
|
className: "ff-legend-container",
|
|
43677
43902
|
children: jsxRuntime.jsx("div", {
|
|
43678
43903
|
className: "ff-bar-chart-legend",
|
|
@@ -43713,7 +43938,7 @@ const BarChart = ({
|
|
|
43713
43938
|
fill: "black",
|
|
43714
43939
|
textAnchor: "middle",
|
|
43715
43940
|
className: "ff-bar-chart-labels",
|
|
43716
|
-
children: (i * maxValue / yAxisDivisions).toFixed(
|
|
43941
|
+
children: `${isYAxisValuePercentage ? `${(i * maxValue / yAxisDivisions).toFixed(0).toString().padStart(2, '0')}%` : (i * maxValue / yAxisDivisions).toFixed(0).toString().padStart(2, '0')}`
|
|
43717
43942
|
}, i);
|
|
43718
43943
|
}), data.map((item, index) => {
|
|
43719
43944
|
const barHeight = item.value / maxValue * height;
|
|
@@ -43723,6 +43948,7 @@ const BarChart = ({
|
|
|
43723
43948
|
const iconWidth = iconSize || 20;
|
|
43724
43949
|
const iconX = barX + barWidth / 2 - iconWidth / 2;
|
|
43725
43950
|
const iconY = barY - iconWidth;
|
|
43951
|
+
const isSelected = selectedBar === item.label;
|
|
43726
43952
|
return jsxRuntime.jsxs("g", {
|
|
43727
43953
|
children: [icons[index] && typeof icons[index] === 'string' && jsxRuntime.jsx(Icon, {
|
|
43728
43954
|
name: String(icons[index]),
|
|
@@ -43739,15 +43965,20 @@ const BarChart = ({
|
|
|
43739
43965
|
fill: getFillColor(index),
|
|
43740
43966
|
rx: barBorderRadius,
|
|
43741
43967
|
ry: barBorderRadius,
|
|
43742
|
-
|
|
43968
|
+
style: {
|
|
43969
|
+
fill: isSelected ? 'blue' : getFillColor(index),
|
|
43970
|
+
strokeWidth: isSelected ? 3 : 0,
|
|
43971
|
+
opacity: isSelected ? 0.9 : 1
|
|
43972
|
+
},
|
|
43973
|
+
onMouseEnter: () => handleMouseEnter(item.label, item.value),
|
|
43743
43974
|
onMouseMove: handleMouseMove,
|
|
43744
43975
|
onMouseLeave: handleMouseLeave,
|
|
43745
43976
|
onClick: () => handleSelectLabel(item.label)
|
|
43746
43977
|
}), showXAxisLabels && jsxRuntime.jsx("text", {
|
|
43747
|
-
x: barX + barWidth / 2,
|
|
43978
|
+
x: index == 0 ? barX : index === data.length - 1 ? barX + barWidth : barX + barWidth / 2,
|
|
43748
43979
|
y: height + topPadding + 15,
|
|
43749
43980
|
fill: "black",
|
|
43750
|
-
textAnchor:
|
|
43981
|
+
textAnchor: index == 0 ? 'start' : 'middle',
|
|
43751
43982
|
className: "ff-bar-chart-labels",
|
|
43752
43983
|
children: isTruncateText ? truncateText(item.label, 10) : item.label
|
|
43753
43984
|
})]
|
|
@@ -43805,18 +44036,11 @@ const BarChart = ({
|
|
|
43805
44036
|
})]
|
|
43806
44037
|
}, item.label))
|
|
43807
44038
|
})
|
|
43808
|
-
}), tooltip.visible && jsxRuntime.jsx("div", {
|
|
43809
|
-
className: "ff-bar-chart-tooltip",
|
|
43810
|
-
style: {
|
|
43811
|
-
top: tooltip.y - 20,
|
|
43812
|
-
left: tooltip.x + 10
|
|
43813
|
-
},
|
|
43814
|
-
children: tooltip.content
|
|
43815
44039
|
})]
|
|
43816
44040
|
});
|
|
43817
44041
|
};
|
|
43818
44042
|
|
|
43819
|
-
var css_248z$6 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20, .ff-multi-radial-chart-container .ff-center-first-text {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multi-radial-chart-container {\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n color: var(--text-color);\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n color: var(--text-color);\n font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n position: absolute;\n font-weight: 400;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n padding: 5px 10px;\n border-radius: 4px;\n pointer-events: none;\n z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 1fr);\n margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n grid-template-columns: auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--text-color);\n border-radius: 15px;\n min-width: 21px;\n height: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n color: var(--text-color);\n}";
|
|
44043
|
+
var css_248z$6 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20, .ff-multi-radial-chart-container .ff-center-first-text {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multi-radial-chart-container {\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n color: var(--text-color);\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n color: var(--text-color);\n font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n position: absolute;\n font-weight: 400;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n padding: 5px 10px;\n border-radius: 4px;\n pointer-events: none;\n z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 1fr);\n margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n grid-template-columns: auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--text-color);\n border-radius: 15px;\n min-width: 21px;\n height: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n color: var(--text-color);\n}";
|
|
43820
44044
|
styleInject(css_248z$6);
|
|
43821
44045
|
|
|
43822
44046
|
const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
|
|
@@ -43835,10 +44059,11 @@ const MultiRadialChart = ({
|
|
|
43835
44059
|
labelHeading,
|
|
43836
44060
|
legendType = 'numberLegend',
|
|
43837
44061
|
isLegendDetails = true,
|
|
43838
|
-
|
|
43839
|
-
|
|
44062
|
+
chartToLegendGap = '16px',
|
|
44063
|
+
legendGap = '8px',
|
|
43840
44064
|
labelFontSize = 12,
|
|
43841
|
-
subLabelFontSize = 8
|
|
44065
|
+
subLabelFontSize = 8,
|
|
44066
|
+
gapBetweenArch = 10
|
|
43842
44067
|
}) => {
|
|
43843
44068
|
const [tooltip, setTooltip] = React.useState({
|
|
43844
44069
|
visible: false,
|
|
@@ -43848,7 +44073,7 @@ const MultiRadialChart = ({
|
|
|
43848
44073
|
});
|
|
43849
44074
|
const totalBarValue = barValues.reduce((acc, status) => acc + status.value, 0);
|
|
43850
44075
|
const baseRadius = radius;
|
|
43851
|
-
const radiusIncrement = lineWidth +
|
|
44076
|
+
const radiusIncrement = lineWidth + gapBetweenArch;
|
|
43852
44077
|
const maxRadius = baseRadius + radiusIncrement * (barValues.length - 1);
|
|
43853
44078
|
const svgSize = 2 * (maxRadius + lineWidth);
|
|
43854
44079
|
const reversedBarValues = [...barValues].reverse();
|
|
@@ -43859,7 +44084,7 @@ const MultiRadialChart = ({
|
|
|
43859
44084
|
return jsxRuntime.jsx("div", {
|
|
43860
44085
|
className: "ff-legend-container ff-number-legend",
|
|
43861
44086
|
style: {
|
|
43862
|
-
gap:
|
|
44087
|
+
gap: legendGap
|
|
43863
44088
|
},
|
|
43864
44089
|
children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
|
|
43865
44090
|
className: "ff-legend-item",
|
|
@@ -43881,7 +44106,7 @@ const MultiRadialChart = ({
|
|
|
43881
44106
|
return jsxRuntime.jsx("div", {
|
|
43882
44107
|
className: "ff-legend-container ff-pill-legend",
|
|
43883
44108
|
style: {
|
|
43884
|
-
gap:
|
|
44109
|
+
gap: legendGap
|
|
43885
44110
|
},
|
|
43886
44111
|
children: legendData.reverse().map((item, index) => jsxRuntime.jsxs("div", {
|
|
43887
44112
|
className: "ff-legend-item",
|
|
@@ -43910,10 +44135,11 @@ const MultiRadialChart = ({
|
|
|
43910
44135
|
clientX,
|
|
43911
44136
|
clientY
|
|
43912
44137
|
} = e;
|
|
44138
|
+
const container = e.currentTarget.getBoundingClientRect();
|
|
43913
44139
|
setTooltip({
|
|
43914
44140
|
visible: true,
|
|
43915
|
-
x: clientX,
|
|
43916
|
-
y: clientY,
|
|
44141
|
+
x: clientX - container.left,
|
|
44142
|
+
y: clientY - container.top,
|
|
43917
44143
|
content: content
|
|
43918
44144
|
});
|
|
43919
44145
|
};
|
|
@@ -43922,10 +44148,11 @@ const MultiRadialChart = ({
|
|
|
43922
44148
|
clientX,
|
|
43923
44149
|
clientY
|
|
43924
44150
|
} = e;
|
|
44151
|
+
const container = e.currentTarget.getBoundingClientRect();
|
|
43925
44152
|
setTooltip(prev => ({
|
|
43926
44153
|
...prev,
|
|
43927
|
-
x: clientX,
|
|
43928
|
-
y: clientY
|
|
44154
|
+
x: clientX - container.left,
|
|
44155
|
+
y: clientY - container.top
|
|
43929
44156
|
}));
|
|
43930
44157
|
};
|
|
43931
44158
|
const handleMouseLeave = () => {
|
|
@@ -43941,16 +44168,15 @@ const MultiRadialChart = ({
|
|
|
43941
44168
|
};
|
|
43942
44169
|
const getArcColorFromTooltip = () => {
|
|
43943
44170
|
if (!tooltip.visible) return '';
|
|
43944
|
-
const valueString = tooltip.content.split(':')[
|
|
43945
|
-
|
|
43946
|
-
|
|
43947
|
-
const matchingBar = barValues.find(val => val.value === value);
|
|
44171
|
+
const valueString = tooltip.content.split(':')[0]?.trim();
|
|
44172
|
+
if (valueString === undefined) return '';
|
|
44173
|
+
const matchingBar = barValues.find(val => val.barLabel === valueString);
|
|
43948
44174
|
return matchingBar?.arcColor || '';
|
|
43949
44175
|
};
|
|
43950
44176
|
return jsxRuntime.jsxs("div", {
|
|
43951
44177
|
className: `ff-multi-radial-chart-container ${legendType === 'numberLegend' ? 'ff-multi-radial-chart-number' : 'ff-multi-radial-chart-pill'}`,
|
|
43952
44178
|
style: {
|
|
43953
|
-
gap:
|
|
44179
|
+
gap: chartToLegendGap
|
|
43954
44180
|
},
|
|
43955
44181
|
children: [jsxRuntime.jsxs("div", {
|
|
43956
44182
|
className: "relative",
|
|
@@ -43964,7 +44190,7 @@ const MultiRadialChart = ({
|
|
|
43964
44190
|
viewBox: `0 0 ${svgSize} ${svgSize}`,
|
|
43965
44191
|
className: "absolute top-0 left-0",
|
|
43966
44192
|
children: jsxRuntime.jsxs("g", {
|
|
43967
|
-
transform: `translate(${svgSize / 2}, ${svgSize / 2})`,
|
|
44193
|
+
transform: `translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`,
|
|
43968
44194
|
children: [reversedBarValues.map((values, i) => {
|
|
43969
44195
|
const originalIndex = barValues.length - 1 - i;
|
|
43970
44196
|
const percentage = values.value / totalBarValue;
|
|
@@ -43991,7 +44217,7 @@ const MultiRadialChart = ({
|
|
|
43991
44217
|
}), jsxRuntime.jsx("circle", {
|
|
43992
44218
|
cx: dotX,
|
|
43993
44219
|
cy: dotY,
|
|
43994
|
-
r:
|
|
44220
|
+
r: lineWidth + 1,
|
|
43995
44221
|
fill: values.arcColor,
|
|
43996
44222
|
onMouseEnter: e => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`),
|
|
43997
44223
|
onMouseMove: handleMouseMove,
|
|
@@ -44023,19 +44249,19 @@ const MultiRadialChart = ({
|
|
|
44023
44249
|
}, originalIndex);
|
|
44024
44250
|
}), jsxRuntime.jsx("text", {
|
|
44025
44251
|
x: "0",
|
|
44026
|
-
y:
|
|
44252
|
+
y: `-${lineWidth + gapBetweenArch + 2}`,
|
|
44027
44253
|
fill: getArcColorFromTooltip(),
|
|
44028
44254
|
textAnchor: "middle",
|
|
44029
44255
|
dominantBaseline: "central",
|
|
44030
44256
|
children: tooltip.visible ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
44031
44257
|
children: [jsxRuntime.jsx("tspan", {
|
|
44032
44258
|
x: "0",
|
|
44033
|
-
dy:
|
|
44259
|
+
dy: `${lineWidth + gapBetweenArch - 5}`,
|
|
44034
44260
|
className: "ff-center-text-tooltip",
|
|
44035
44261
|
children: textData(tooltip.content.split(':')[1]?.trim() || '', 5)
|
|
44036
44262
|
}), jsxRuntime.jsx("tspan", {
|
|
44037
44263
|
x: "0",
|
|
44038
|
-
dy:
|
|
44264
|
+
dy: `${lineWidth + gapBetweenArch + 5}`,
|
|
44039
44265
|
className: "ff-center-text-tooltip",
|
|
44040
44266
|
children: textData(tooltip.content.split(':')[0] ?? '', 8)
|
|
44041
44267
|
})]
|
|
@@ -44080,7 +44306,7 @@ const MultiRadialChart = ({
|
|
|
44080
44306
|
className: "ff-multi-radial-tooltip",
|
|
44081
44307
|
style: {
|
|
44082
44308
|
top: tooltip.y + 10,
|
|
44083
|
-
left: tooltip.x +
|
|
44309
|
+
left: tooltip.x + 100,
|
|
44084
44310
|
zIndex: 1000
|
|
44085
44311
|
},
|
|
44086
44312
|
children: tooltip.content
|
|
@@ -53942,13 +54168,10 @@ const handleTreeNodeSect = (data, key, isChecked) => {
|
|
|
53942
54168
|
}
|
|
53943
54169
|
}
|
|
53944
54170
|
}
|
|
53945
|
-
// Find the target node and update its state
|
|
53946
54171
|
const targetNode = nodesMap.get(key);
|
|
53947
54172
|
if (targetNode) {
|
|
53948
54173
|
targetNode.checked = isChecked;
|
|
53949
|
-
// Update children recursively
|
|
53950
54174
|
updateChildren(key, isChecked);
|
|
53951
|
-
// Update parents recursively
|
|
53952
54175
|
updateParents(key);
|
|
53953
54176
|
}
|
|
53954
54177
|
return data;
|