kui-complex 0.0.149 → 0.0.151
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/index.d.ts +45 -1
- package/index.js +1 -1863
- package/package.json +10 -10
- package/AutocompleteOption/cjs/index.js +0 -50
- package/AutocompleteOption/cjs/index.js.map +0 -1
- package/AutocompleteOption/cjs/package.json +0 -9
- package/AutocompleteOption/index.d.ts +0 -7
- package/AutocompleteOption/index.js +0 -44
- package/AutocompleteOption/index.js.map +0 -1
- package/AutocompleteOption/package.json +0 -9
- package/Avatar/cjs/index.js +0 -94
- package/Avatar/cjs/index.js.map +0 -1
- package/Avatar/cjs/package.json +0 -9
- package/Avatar/index.d.ts +0 -12
- package/Avatar/index.js +0 -88
- package/Avatar/index.js.map +0 -1
- package/Avatar/package.json +0 -9
- package/ButtonSelect/cjs/index.js +0 -188
- package/ButtonSelect/cjs/index.js.map +0 -1
- package/ButtonSelect/cjs/package.json +0 -9
- package/ButtonSelect/index.d.ts +0 -31
- package/ButtonSelect/index.js +0 -182
- package/ButtonSelect/index.js.map +0 -1
- package/ButtonSelect/package.json +0 -9
- package/ButtonTab/cjs/index.js +0 -77
- package/ButtonTab/cjs/index.js.map +0 -1
- package/ButtonTab/cjs/package.json +0 -9
- package/ButtonTab/index.d.ts +0 -17
- package/ButtonTab/index.js +0 -70
- package/ButtonTab/index.js.map +0 -1
- package/ButtonTab/package.json +0 -9
- package/ButtonsPanel/cjs/index.js +0 -160
- package/ButtonsPanel/cjs/index.js.map +0 -1
- package/ButtonsPanel/cjs/package.json +0 -9
- package/ButtonsPanel/index.d.ts +0 -21
- package/ButtonsPanel/index.js +0 -134
- package/ButtonsPanel/index.js.map +0 -1
- package/ButtonsPanel/package.json +0 -9
- package/CalendarHeaderWithSelect/cjs/index.js +0 -221
- package/CalendarHeaderWithSelect/cjs/index.js.map +0 -1
- package/CalendarHeaderWithSelect/cjs/package.json +0 -9
- package/CalendarHeaderWithSelect/index.d.ts +0 -21
- package/CalendarHeaderWithSelect/index.js +0 -215
- package/CalendarHeaderWithSelect/index.js.map +0 -1
- package/CalendarHeaderWithSelect/package.json +0 -9
- package/CalendarStandardContainer/cjs/index.js +0 -63
- package/CalendarStandardContainer/cjs/index.js.map +0 -1
- package/CalendarStandardContainer/cjs/package.json +0 -9
- package/CalendarStandardContainer/index.d.ts +0 -13
- package/CalendarStandardContainer/index.js +0 -57
- package/CalendarStandardContainer/index.js.map +0 -1
- package/CalendarStandardContainer/package.json +0 -9
- package/CalendarStandardHeader/cjs/index.js +0 -57
- package/CalendarStandardHeader/cjs/index.js.map +0 -1
- package/CalendarStandardHeader/cjs/package.json +0 -10
- package/CalendarStandardHeader/index.d.ts +0 -13
- package/CalendarStandardHeader/index.js +0 -50
- package/CalendarStandardHeader/index.js.map +0 -1
- package/CalendarStandardHeader/package.json +0 -10
- package/CheckboxGroupWithTitle/cjs/index.js +0 -82
- package/CheckboxGroupWithTitle/cjs/index.js.map +0 -1
- package/CheckboxGroupWithTitle/cjs/package.json +0 -10
- package/CheckboxGroupWithTitle/index.d.ts +0 -15
- package/CheckboxGroupWithTitle/index.js +0 -76
- package/CheckboxGroupWithTitle/index.js.map +0 -1
- package/CheckboxGroupWithTitle/package.json +0 -10
- package/CheckboxWithController/cjs/index.js +0 -64
- package/CheckboxWithController/cjs/index.js.map +0 -1
- package/CheckboxWithController/cjs/package.json +0 -10
- package/CheckboxWithController/index.d.ts +0 -10
- package/CheckboxWithController/index.js +0 -62
- package/CheckboxWithController/index.js.map +0 -1
- package/CheckboxWithController/package.json +0 -10
- package/DependentInput/cjs/index.js +0 -81
- package/DependentInput/cjs/index.js.map +0 -1
- package/DependentInput/cjs/package.json +0 -10
- package/DependentInput/index.d.ts +0 -3
- package/DependentInput/index.js +0 -79
- package/DependentInput/index.js.map +0 -1
- package/DependentInput/package.json +0 -10
- package/DesktopInputWithMonthPicker/cjs/index.js +0 -117
- package/DesktopInputWithMonthPicker/cjs/index.js.map +0 -1
- package/DesktopInputWithMonthPicker/cjs/package.json +0 -11
- package/DesktopInputWithMonthPicker/index.d.ts +0 -5
- package/DesktopInputWithMonthPicker/index.js +0 -110
- package/DesktopInputWithMonthPicker/index.js.map +0 -1
- package/DesktopInputWithMonthPicker/package.json +0 -11
- package/DesktopMenuPanel/cjs/index.js +0 -102
- package/DesktopMenuPanel/cjs/index.js.map +0 -1
- package/DesktopMenuPanel/cjs/package.json +0 -10
- package/DesktopMenuPanel/index.d.ts +0 -18
- package/DesktopMenuPanel/index.js +0 -96
- package/DesktopMenuPanel/index.js.map +0 -1
- package/DesktopMenuPanel/package.json +0 -10
- package/FileItem/cjs/index.js +0 -144
- package/FileItem/cjs/index.js.map +0 -1
- package/FileItem/cjs/package.json +0 -9
- package/FileItem/index.d.ts +0 -46
- package/FileItem/index.js +0 -138
- package/FileItem/index.js.map +0 -1
- package/FileItem/package.json +0 -9
- package/InputDropdown/cjs/index.js +0 -96
- package/InputDropdown/cjs/index.js.map +0 -1
- package/InputDropdown/cjs/package.json +0 -9
- package/InputDropdown/index.d.ts +0 -16
- package/InputDropdown/index.js +0 -90
- package/InputDropdown/index.js.map +0 -1
- package/InputDropdown/package.json +0 -9
- package/InputFile/cjs/index.js +0 -276
- package/InputFile/cjs/index.js.map +0 -1
- package/InputFile/cjs/package.json +0 -10
- package/InputFile/index.d.ts +0 -25
- package/InputFile/index.js +0 -270
- package/InputFile/index.js.map +0 -1
- package/InputFile/package.json +0 -10
- package/InputForDatepicker/cjs/index.js +0 -78
- package/InputForDatepicker/cjs/index.js.map +0 -1
- package/InputForDatepicker/cjs/package.json +0 -9
- package/InputForDatepicker/index.d.ts +0 -5
- package/InputForDatepicker/index.js +0 -72
- package/InputForDatepicker/index.js.map +0 -1
- package/InputForDatepicker/package.json +0 -9
- package/InputMultiSelect/cjs/index.js +0 -221
- package/InputMultiSelect/cjs/index.js.map +0 -1
- package/InputMultiSelect/cjs/package.json +0 -10
- package/InputMultiSelect/index.d.ts +0 -24
- package/InputMultiSelect/index.js +0 -215
- package/InputMultiSelect/index.js.map +0 -1
- package/InputMultiSelect/package.json +0 -10
- package/InputMultiSelectOption/cjs/index.js +0 -63
- package/InputMultiSelectOption/cjs/index.js.map +0 -1
- package/InputMultiSelectOption/cjs/package.json +0 -9
- package/InputMultiSelectOption/index.d.ts +0 -14
- package/InputMultiSelectOption/index.js +0 -57
- package/InputMultiSelectOption/index.js.map +0 -1
- package/InputMultiSelectOption/package.json +0 -9
- package/InputPassword/cjs/index.js +0 -173
- package/InputPassword/cjs/index.js.map +0 -1
- package/InputPassword/cjs/package.json +0 -10
- package/InputPassword/index.d.ts +0 -13
- package/InputPassword/index.js +0 -167
- package/InputPassword/index.js.map +0 -1
- package/InputPassword/package.json +0 -10
- package/InputPhoneWithForm/cjs/index.js +0 -90
- package/InputPhoneWithForm/cjs/index.js.map +0 -1
- package/InputPhoneWithForm/cjs/package.json +0 -10
- package/InputPhoneWithForm/index.d.ts +0 -18
- package/InputPhoneWithForm/index.js +0 -88
- package/InputPhoneWithForm/index.js.map +0 -1
- package/InputPhoneWithForm/package.json +0 -10
- package/InputSelect/cjs/index.js +0 -180
- package/InputSelect/cjs/index.js.map +0 -1
- package/InputSelect/cjs/package.json +0 -9
- package/InputSelect/index.d.ts +0 -30
- package/InputSelect/index.js +0 -174
- package/InputSelect/index.js.map +0 -1
- package/InputSelect/package.json +0 -9
- package/InputSelectBase/cjs/index.js +0 -152
- package/InputSelectBase/cjs/index.js.map +0 -1
- package/InputSelectBase/cjs/package.json +0 -9
- package/InputSelectBase/index.d.ts +0 -25
- package/InputSelectBase/index.js +0 -146
- package/InputSelectBase/index.js.map +0 -1
- package/InputSelectBase/package.json +0 -9
- package/InputSelectDropdown/cjs/index.js +0 -115
- package/InputSelectDropdown/cjs/index.js.map +0 -1
- package/InputSelectDropdown/cjs/package.json +0 -9
- package/InputSelectDropdown/index.d.ts +0 -24
- package/InputSelectDropdown/index.js +0 -109
- package/InputSelectDropdown/index.js.map +0 -1
- package/InputSelectDropdown/package.json +0 -9
- package/InputSelectOption/cjs/index.js +0 -53
- package/InputSelectOption/cjs/index.js.map +0 -1
- package/InputSelectOption/cjs/package.json +0 -9
- package/InputSelectOption/index.d.ts +0 -14
- package/InputSelectOption/index.js +0 -47
- package/InputSelectOption/index.js.map +0 -1
- package/InputSelectOption/package.json +0 -9
- package/InputSelectWithController/cjs/index.js +0 -204
- package/InputSelectWithController/cjs/index.js.map +0 -1
- package/InputSelectWithController/cjs/package.json +0 -10
- package/InputSelectWithController/index.d.ts +0 -5
- package/InputSelectWithController/index.js +0 -198
- package/InputSelectWithController/index.js.map +0 -1
- package/InputSelectWithController/package.json +0 -10
- package/InputTextAreaMobile/cjs/index.js +0 -86
- package/InputTextAreaMobile/cjs/index.js.map +0 -1
- package/InputTextAreaMobile/cjs/package.json +0 -10
- package/InputTextAreaMobile/index.d.ts +0 -5
- package/InputTextAreaMobile/index.js +0 -80
- package/InputTextAreaMobile/index.js.map +0 -1
- package/InputTextAreaMobile/package.json +0 -10
- package/InputWithAddressAutocomplete/cjs/index.js +0 -284
- package/InputWithAddressAutocomplete/cjs/index.js.map +0 -1
- package/InputWithAddressAutocomplete/cjs/package.json +0 -11
- package/InputWithAddressAutocomplete/index.d.ts +0 -31
- package/InputWithAddressAutocomplete/index.js +0 -278
- package/InputWithAddressAutocomplete/index.js.map +0 -1
- package/InputWithAddressAutocomplete/package.json +0 -11
- package/InputWithAutocomplete/cjs/index.js +0 -245
- package/InputWithAutocomplete/cjs/index.js.map +0 -1
- package/InputWithAutocomplete/cjs/package.json +0 -10
- package/InputWithAutocomplete/index.d.ts +0 -28
- package/InputWithAutocomplete/index.js +0 -239
- package/InputWithAutocomplete/index.js.map +0 -1
- package/InputWithAutocomplete/package.json +0 -10
- package/InputWithController/cjs/index.js +0 -71
- package/InputWithController/cjs/index.js.map +0 -1
- package/InputWithController/cjs/package.json +0 -10
- package/InputWithController/index.d.ts +0 -13
- package/InputWithController/index.js +0 -69
- package/InputWithController/index.js.map +0 -1
- package/InputWithController/package.json +0 -10
- package/InputWithDatePicker/cjs/index.js +0 -344
- package/InputWithDatePicker/cjs/index.js.map +0 -1
- package/InputWithDatePicker/cjs/package.json +0 -13
- package/InputWithDatePicker/index.d.ts +0 -24
- package/InputWithDatePicker/index.js +0 -336
- package/InputWithDatePicker/index.js.map +0 -1
- package/InputWithDatePicker/package.json +0 -13
- package/InputWithMask/cjs/index.js +0 -69
- package/InputWithMask/cjs/index.js.map +0 -1
- package/InputWithMask/cjs/package.json +0 -10
- package/InputWithMask/index.d.ts +0 -13
- package/InputWithMask/index.js +0 -67
- package/InputWithMask/index.js.map +0 -1
- package/InputWithMask/package.json +0 -10
- package/InputWithMonthPicker/cjs/index.js +0 -197
- package/InputWithMonthPicker/cjs/index.js.map +0 -1
- package/InputWithMonthPicker/cjs/package.json +0 -12
- package/InputWithMonthPicker/index.d.ts +0 -5
- package/InputWithMonthPicker/index.js +0 -189
- package/InputWithMonthPicker/index.js.map +0 -1
- package/InputWithMonthPicker/package.json +0 -12
- package/Link/cjs/index.js +0 -77
- package/Link/cjs/index.js.map +0 -1
- package/Link/cjs/package.json +0 -9
- package/Link/index.d.ts +0 -13
- package/Link/index.js +0 -71
- package/Link/index.js.map +0 -1
- package/Link/package.json +0 -9
- package/Loading/cjs/index.js +0 -72
- package/Loading/cjs/index.js.map +0 -1
- package/Loading/cjs/package.json +0 -9
- package/Loading/index.d.ts +0 -7
- package/Loading/index.js +0 -66
- package/Loading/index.js.map +0 -1
- package/Loading/package.json +0 -9
- package/MapWrapper/cjs/index.js +0 -118
- package/MapWrapper/cjs/index.js.map +0 -1
- package/MapWrapper/cjs/package.json +0 -10
- package/MapWrapper/index.d.ts +0 -9
- package/MapWrapper/index.js +0 -112
- package/MapWrapper/index.js.map +0 -1
- package/MapWrapper/package.json +0 -10
- package/MenuItem/cjs/index.js +0 -83
- package/MenuItem/cjs/index.js.map +0 -1
- package/MenuItem/cjs/package.json +0 -10
- package/MenuItem/index.d.ts +0 -17
- package/MenuItem/index.js +0 -77
- package/MenuItem/index.js.map +0 -1
- package/MenuItem/package.json +0 -10
- package/MenuPanel/cjs/index.js +0 -178
- package/MenuPanel/cjs/index.js.map +0 -1
- package/MenuPanel/cjs/package.json +0 -10
- package/MenuPanel/index.d.ts +0 -18
- package/MenuPanel/index.js +0 -153
- package/MenuPanel/index.js.map +0 -1
- package/MenuPanel/package.json +0 -10
- package/MobileInputWithMonthPicker/cjs/index.js +0 -174
- package/MobileInputWithMonthPicker/cjs/index.js.map +0 -1
- package/MobileInputWithMonthPicker/cjs/package.json +0 -12
- package/MobileInputWithMonthPicker/index.d.ts +0 -5
- package/MobileInputWithMonthPicker/index.js +0 -166
- package/MobileInputWithMonthPicker/index.js.map +0 -1
- package/MobileInputWithMonthPicker/package.json +0 -12
- package/MobileMenuPanel/cjs/index.js +0 -112
- package/MobileMenuPanel/cjs/index.js.map +0 -1
- package/MobileMenuPanel/cjs/package.json +0 -10
- package/MobileMenuPanel/index.d.ts +0 -18
- package/MobileMenuPanel/index.js +0 -105
- package/MobileMenuPanel/index.js.map +0 -1
- package/MobileMenuPanel/package.json +0 -10
- package/ModalFooter/cjs/index.js +0 -66
- package/ModalFooter/cjs/index.js.map +0 -1
- package/ModalFooter/cjs/package.json +0 -9
- package/ModalFooter/index.d.ts +0 -9
- package/ModalFooter/index.js +0 -60
- package/ModalFooter/index.js.map +0 -1
- package/ModalFooter/package.json +0 -9
- package/MonthPickerContainer/cjs/index.js +0 -63
- package/MonthPickerContainer/cjs/index.js.map +0 -1
- package/MonthPickerContainer/cjs/package.json +0 -9
- package/MonthPickerContainer/index.d.ts +0 -12
- package/MonthPickerContainer/index.js +0 -57
- package/MonthPickerContainer/index.js.map +0 -1
- package/MonthPickerContainer/package.json +0 -9
- package/MonthPickerHeader/cjs/index.js +0 -53
- package/MonthPickerHeader/cjs/index.js.map +0 -1
- package/MonthPickerHeader/cjs/package.json +0 -9
- package/MonthPickerHeader/index.d.ts +0 -13
- package/MonthPickerHeader/index.js +0 -47
- package/MonthPickerHeader/index.js.map +0 -1
- package/MonthPickerHeader/package.json +0 -9
- package/PassportStrengthBar/cjs/index.js +0 -82
- package/PassportStrengthBar/cjs/index.js.map +0 -1
- package/PassportStrengthBar/cjs/package.json +0 -9
- package/PassportStrengthBar/index.d.ts +0 -13
- package/PassportStrengthBar/index.js +0 -76
- package/PassportStrengthBar/index.js.map +0 -1
- package/PassportStrengthBar/package.json +0 -9
- package/Popper/cjs/index.js +0 -230
- package/Popper/cjs/index.js.map +0 -1
- package/Popper/cjs/package.json +0 -10
- package/Popper/index.d.ts +0 -23
- package/Popper/index.js +0 -204
- package/Popper/index.js.map +0 -1
- package/Popper/package.json +0 -10
- package/PopperBase/cjs/index.js +0 -75
- package/PopperBase/cjs/index.js.map +0 -1
- package/PopperBase/cjs/package.json +0 -9
- package/PopperBase/index.d.ts +0 -21
- package/PopperBase/index.js +0 -68
- package/PopperBase/index.js.map +0 -1
- package/PopperBase/package.json +0 -9
- package/PopperWithPortal/cjs/index.js +0 -169
- package/PopperWithPortal/cjs/index.js.map +0 -1
- package/PopperWithPortal/cjs/package.json +0 -10
- package/PopperWithPortal/index.d.ts +0 -23
- package/PopperWithPortal/index.js +0 -143
- package/PopperWithPortal/index.js.map +0 -1
- package/PopperWithPortal/package.json +0 -10
- package/RadioButtons/cjs/index.js +0 -80
- package/RadioButtons/cjs/index.js.map +0 -1
- package/RadioButtons/cjs/package.json +0 -9
- package/RadioButtons/index.d.ts +0 -27
- package/RadioButtons/index.js +0 -78
- package/RadioButtons/index.js.map +0 -1
- package/RadioButtons/package.json +0 -9
- package/RadioButtonsWithController/cjs/index.js +0 -102
- package/RadioButtonsWithController/cjs/index.js.map +0 -1
- package/RadioButtonsWithController/cjs/package.json +0 -10
- package/RadioButtonsWithController/index.d.ts +0 -31
- package/RadioButtonsWithController/index.js +0 -100
- package/RadioButtonsWithController/index.js.map +0 -1
- package/RadioButtonsWithController/package.json +0 -10
- package/RadioGroupWithLabel/cjs/index.js +0 -149
- package/RadioGroupWithLabel/cjs/index.js.map +0 -1
- package/RadioGroupWithLabel/cjs/package.json +0 -10
- package/RadioGroupWithLabel/index.d.ts +0 -34
- package/RadioGroupWithLabel/index.js +0 -143
- package/RadioGroupWithLabel/index.js.map +0 -1
- package/RadioGroupWithLabel/package.json +0 -10
- package/SelectMonth/cjs/index.js +0 -201
- package/SelectMonth/cjs/index.js.map +0 -1
- package/SelectMonth/cjs/package.json +0 -9
- package/SelectMonth/index.d.ts +0 -33
- package/SelectMonth/index.js +0 -195
- package/SelectMonth/index.js.map +0 -1
- package/SelectMonth/package.json +0 -9
- package/SelectYear/cjs/index.js +0 -189
- package/SelectYear/cjs/index.js.map +0 -1
- package/SelectYear/cjs/package.json +0 -9
- package/SelectYear/index.d.ts +0 -40
- package/SelectYear/index.js +0 -183
- package/SelectYear/index.js.map +0 -1
- package/SelectYear/package.json +0 -9
- package/StaticPopper/cjs/index.js +0 -143
- package/StaticPopper/cjs/index.js.map +0 -1
- package/StaticPopper/cjs/package.json +0 -9
- package/StaticPopper/index.d.ts +0 -23
- package/StaticPopper/index.js +0 -136
- package/StaticPopper/index.js.map +0 -1
- package/StaticPopper/package.json +0 -9
- package/Switch/cjs/index.js +0 -55
- package/Switch/cjs/index.js.map +0 -1
- package/Switch/cjs/package.json +0 -10
- package/Switch/index.d.ts +0 -14
- package/Switch/index.js +0 -53
- package/Switch/index.js.map +0 -1
- package/Switch/package.json +0 -10
- package/Table/cjs/index.js +0 -47
- package/Table/cjs/index.js.map +0 -1
- package/Table/cjs/package.json +0 -9
- package/Table/index.d.ts +0 -5
- package/Table/index.js +0 -41
- package/Table/index.js.map +0 -1
- package/Table/package.json +0 -9
- package/TableCell/cjs/index.js +0 -33
- package/TableCell/cjs/index.js.map +0 -1
- package/TableCell/cjs/package.json +0 -6
- package/TableCell/index.d.ts +0 -10
- package/TableCell/index.js +0 -27
- package/TableCell/index.js.map +0 -1
- package/TableCell/package.json +0 -6
- package/TableHeadCell/cjs/index.js +0 -33
- package/TableHeadCell/cjs/index.js.map +0 -1
- package/TableHeadCell/cjs/package.json +0 -6
- package/TableHeadCell/index.d.ts +0 -10
- package/TableHeadCell/index.js +0 -27
- package/TableHeadCell/index.js.map +0 -1
- package/TableHeadCell/package.json +0 -6
- package/TableRow/cjs/index.js +0 -71
- package/TableRow/cjs/index.js.map +0 -1
- package/TableRow/cjs/package.json +0 -9
- package/TableRow/index.d.ts +0 -5
- package/TableRow/index.js +0 -50
- package/TableRow/index.js.map +0 -1
- package/TableRow/package.json +0 -9
- package/TestForm/cjs/index.js +0 -698
- package/TestForm/cjs/index.js.map +0 -1
- package/TestForm/cjs/package.json +0 -15
- package/TestForm/index.d.ts +0 -3
- package/TestForm/index.js +0 -670
- package/TestForm/index.js.map +0 -1
- package/TestForm/package.json +0 -15
- package/Tooltip/cjs/index.js +0 -260
- package/Tooltip/cjs/index.js.map +0 -1
- package/Tooltip/cjs/package.json +0 -10
- package/Tooltip/index.d.ts +0 -28
- package/Tooltip/index.js +0 -234
- package/Tooltip/index.js.map +0 -1
- package/Tooltip/package.json +0 -10
- package/UndefinedAvatar/cjs/index.js +0 -71
- package/UndefinedAvatar/cjs/index.js.map +0 -1
- package/UndefinedAvatar/cjs/package.json +0 -9
- package/UndefinedAvatar/index.d.ts +0 -8
- package/UndefinedAvatar/index.js +0 -65
- package/UndefinedAvatar/index.js.map +0 -1
- package/UndefinedAvatar/package.json +0 -9
- package/cjs/index.js +0 -1954
- package/cjs/index.js.map +0 -1
- package/index.js.map +0 -1
package/index.js
CHANGED
|
@@ -1,1863 +1 @@
|
|
|
1
|
-
import 'react-datepicker/dist/react-datepicker.css';
|
|
2
|
-
import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from '@emotion/react/jsx-runtime';
|
|
3
|
-
import styled from '@emotion/styled';
|
|
4
|
-
import { css, Global } from '@emotion/react';
|
|
5
|
-
import * as React from 'react';
|
|
6
|
-
import { forwardRef, useRef, useEffect, useState } from 'react';
|
|
7
|
-
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
8
|
-
import { Caption, theme, Button, Container, Tooltip as Tooltip$1, Grid, InputWithAdornments, Heading, InputWithMask as InputWithMask$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown, Checkbox, Radio, InputMessage, CircularProgress, Box } from 'kui-basic';
|
|
9
|
-
import { useWindowWidth, updateQueryParams, useForkRef, strongPasswordRegExp, mediumPasswordRegExp, simplePasswordRegExp, useToggle, isValidWithMaskExp } from 'kui-utils';
|
|
10
|
-
import Swiper from 'kui-swiper';
|
|
11
|
-
import classNames from 'classnames';
|
|
12
|
-
import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon, PlusIcon, FileIcon, EditIcon, TrashIcon } from 'kui-icon';
|
|
13
|
-
import _ from 'lodash';
|
|
14
|
-
import DatePicker from 'react-datepicker';
|
|
15
|
-
import { useController, Controller, useWatch } from 'react-hook-form';
|
|
16
|
-
import { scroller, Events, Link as Link$1, animateScroll, Element } from 'react-scroll';
|
|
17
|
-
import { DateTime } from 'luxon';
|
|
18
|
-
import ru from 'date-fns/locale/ru';
|
|
19
|
-
import { useNavigate, useLocation } from 'react-router-dom';
|
|
20
|
-
import * as ReactDOM from 'react-dom';
|
|
21
|
-
import { Loader } from '@googlemaps/js-api-loader';
|
|
22
|
-
|
|
23
|
-
/******************************************************************************
|
|
24
|
-
Copyright (c) Microsoft Corporation.
|
|
25
|
-
|
|
26
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
27
|
-
purpose with or without fee is hereby granted.
|
|
28
|
-
|
|
29
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
30
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
31
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
32
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
33
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
34
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
35
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
36
|
-
***************************************************************************** */
|
|
37
|
-
|
|
38
|
-
var __assign = function() {
|
|
39
|
-
__assign = Object.assign || function __assign(t) {
|
|
40
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
41
|
-
s = arguments[i];
|
|
42
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
43
|
-
}
|
|
44
|
-
return t;
|
|
45
|
-
};
|
|
46
|
-
return __assign.apply(this, arguments);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
function __rest(s, e) {
|
|
50
|
-
var t = {};
|
|
51
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
52
|
-
t[p] = s[p];
|
|
53
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
54
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
55
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
56
|
-
t[p[i]] = s[p[i]];
|
|
57
|
-
}
|
|
58
|
-
return t;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
62
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
63
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
64
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
65
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
66
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
67
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function __generator(thisArg, body) {
|
|
72
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
73
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
74
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
75
|
-
function step(op) {
|
|
76
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
77
|
-
while (_) try {
|
|
78
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
79
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
80
|
-
switch (op[0]) {
|
|
81
|
-
case 0: case 1: t = op; break;
|
|
82
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
83
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
84
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
85
|
-
default:
|
|
86
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
87
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
88
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
89
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
90
|
-
if (t[2]) _.ops.pop();
|
|
91
|
-
_.trys.pop(); continue;
|
|
92
|
-
}
|
|
93
|
-
op = body.call(thisArg, _);
|
|
94
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
95
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
function __spreadArray(to, from, pack) {
|
|
100
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
101
|
-
if (ar || !(i in from)) {
|
|
102
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
103
|
-
ar[i] = from[i];
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
function __makeTemplateObject(cooked, raw) {
|
|
110
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
111
|
-
return cooked;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
var UndefinedAvatar = forwardRef(function (_a, ref) {
|
|
115
|
-
var label = _a.label, otherProps = __rest(_a, ["label"]);
|
|
116
|
-
if (!label) {
|
|
117
|
-
return jsx("div", {});
|
|
118
|
-
}
|
|
119
|
-
var formattedLabel = label
|
|
120
|
-
.split(" ")
|
|
121
|
-
.map(function (el) { return el[0]; })
|
|
122
|
-
.slice(0, 3)
|
|
123
|
-
.join("");
|
|
124
|
-
return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
125
|
-
});
|
|
126
|
-
var Wrapper$8 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"])), theme.palette.brand.light, theme.palette.brand.main);
|
|
127
|
-
var templateObject_1$I;
|
|
128
|
-
|
|
129
|
-
var Avatar = forwardRef(function (props, ref) {
|
|
130
|
-
var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
|
|
131
|
-
return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
132
|
-
});
|
|
133
|
-
var Wrapper$7 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
134
|
-
var StyledImage = styled.img(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"])));
|
|
135
|
-
var largeAvatarCSS = function (_a) {
|
|
136
|
-
var avatarSize = _a.avatarSize;
|
|
137
|
-
return avatarSize === "lg" && css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
138
|
-
};
|
|
139
|
-
var StyledUndefinedAvatar = styled(UndefinedAvatar, {
|
|
140
|
-
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
141
|
-
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), largeAvatarCSS);
|
|
142
|
-
var sizeStyles = {
|
|
143
|
-
xs: css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n min-width: 24px;\n width: 24px;\n height: 24px;\n p {\n font-size: 10px;\n }\n "], ["\n min-width: 24px;\n width: 24px;\n height: 24px;\n p {\n font-size: 10px;\n }\n "]))),
|
|
144
|
-
s: css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n min-width: 32px;\n width: 32px;\n height: 32px;\n "], ["\n min-width: 32px;\n width: 32px;\n height: 32px;\n "]))),
|
|
145
|
-
md: css(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n min-width: 40px;\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n min-width: 32px;\n width: 32px;\n height: 32px;\n }\n "], ["\n min-width: 40px;\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n min-width: 32px;\n width: 32px;\n height: 32px;\n }\n "]))),
|
|
146
|
-
lg: css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n min-width: 80px;\n width: 80px;\n height: 80px;\n "], ["\n min-width: 80px;\n width: 80px;\n height: 80px;\n "]))),
|
|
147
|
-
};
|
|
148
|
-
var templateObject_1$H, templateObject_2$p, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
149
|
-
|
|
150
|
-
var ButtonTabElement = forwardRef(function (props, ref) {
|
|
151
|
-
var index = props.index, onClick = props.onClick, isActive = props.isActive, label = props.label, disabled = props.disabled;
|
|
152
|
-
var handleClick = function () {
|
|
153
|
-
onClick(index);
|
|
154
|
-
};
|
|
155
|
-
return (jsx$1(StyledButton$1, __assign({ disabled: disabled, variant: isActive ? "orange" : "white", captionWeight: 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref, className: classNames("KUI-ButtonTab", isActive && "KUI-ButtonTab_active") }, { children: label })));
|
|
156
|
-
});
|
|
157
|
-
var StyledButton$1 = styled(Button)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n margin-right: 24px;\n &.KUI-ButtonTab_active {\n p {\n text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;\n }\n }\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n margin-right: 24px;\n &.KUI-ButtonTab_active {\n p {\n text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;\n }\n }\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
158
|
-
var inactiveStyles = css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
|
|
159
|
-
var templateObject_1$G, templateObject_2$o;
|
|
160
|
-
|
|
161
|
-
var ButtonTab = forwardRef(function (props, ref) {
|
|
162
|
-
var renderTabWrapper = props.renderTabWrapper, label = props.label, other = __rest(props, ["renderTabWrapper", "label"]);
|
|
163
|
-
if (!renderTabWrapper)
|
|
164
|
-
return jsx$1(ButtonTabElement, __assign({ ref: ref, label: label }, other));
|
|
165
|
-
return renderTabWrapper(label, jsx$1(ButtonTabElement, __assign({ ref: ref, label: label }, other)));
|
|
166
|
-
});
|
|
167
|
-
|
|
168
|
-
var ButtonsTabs = function (props) {
|
|
169
|
-
var startComponent = props.startComponent, endComponent = props.endComponent, tabs = props.tabs, renderTabWrapper = props.renderTabWrapper;
|
|
170
|
-
var handleChange = props.handleChange, value = props.value;
|
|
171
|
-
var swiperRef = useRef(null);
|
|
172
|
-
var settings = {
|
|
173
|
-
spaceBetween: 8,
|
|
174
|
-
slidesPerView: "auto",
|
|
175
|
-
slideToClickedSlide: true,
|
|
176
|
-
injectStyles: [
|
|
177
|
-
"\n .swiper {\n padding: 8px 16px 24px 16px;\n margin: -8px -16px -24px -16px;\n }\n ",
|
|
178
|
-
],
|
|
179
|
-
breakpoints: {
|
|
180
|
-
600: {
|
|
181
|
-
spaceBetween: 16,
|
|
182
|
-
},
|
|
183
|
-
},
|
|
184
|
-
};
|
|
185
|
-
var slideTo = function (index) {
|
|
186
|
-
setTimeout(function () {
|
|
187
|
-
var _a, _b;
|
|
188
|
-
(_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(index);
|
|
189
|
-
}, 16);
|
|
190
|
-
handleChange(index);
|
|
191
|
-
};
|
|
192
|
-
return (jsxs(Container, __assign({ className: "KUI-ButtonTabs" }, { children: [startComponent, jsx(StyledSlider, __assign({}, settings, { ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx(ButtonTab, { index: index, onClick: slideTo, isActive: index === value, label: tab, renderTabWrapper: renderTabWrapper }, tab)); }) })), endComponent] })));
|
|
193
|
-
};
|
|
194
|
-
var StyledSlider = styled(Swiper)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n swiper-slide {\n width: fit-content;\n }\n"], ["\n swiper-slide {\n width: fit-content;\n }\n"])));
|
|
195
|
-
var templateObject_1$F;
|
|
196
|
-
|
|
197
|
-
var ButtonsPanel = forwardRef(function (_a, ref) {
|
|
198
|
-
var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, startComponent = _a.startComponent, endComponent = _a.endComponent, navigate = _a.navigate, renderTabWrapper = _a.renderTabWrapper, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange", "startComponent", "endComponent", "navigate", "renderTabWrapper"]);
|
|
199
|
-
var width = useWindowWidth();
|
|
200
|
-
var _b = React.useState(Number(activeTab)), value = _b[0], setValue = _b[1];
|
|
201
|
-
var handleChange = function (newValue) {
|
|
202
|
-
setValue(newValue);
|
|
203
|
-
if (paths === null || paths === void 0 ? void 0 : paths.length) {
|
|
204
|
-
var path = paths[newValue];
|
|
205
|
-
if (navigate)
|
|
206
|
-
navigate(path);
|
|
207
|
-
else
|
|
208
|
-
updateQueryParams(path);
|
|
209
|
-
}
|
|
210
|
-
if (onChange)
|
|
211
|
-
onChange(newValue);
|
|
212
|
-
};
|
|
213
|
-
useEffect(function () {
|
|
214
|
-
setValue(Number(activeTab));
|
|
215
|
-
}, [activeTab]);
|
|
216
|
-
if (width === 0) {
|
|
217
|
-
return null;
|
|
218
|
-
}
|
|
219
|
-
return (jsxs$1(Fragment, { children: [jsx$1(StyledContainer$2, __assign({ css: isSticky && { position: "sticky" }, ref: ref }, otherProps, { children: jsx$1(ButtonsTabs, { value: value, tabs: tabs, handleChange: handleChange, endComponent: endComponent, startComponent: startComponent, renderTabWrapper: renderTabWrapper }) })), jsx$1(Content, __assign({ role: "tabpanel" }, { children: tabPanels[value] }))] }));
|
|
220
|
-
});
|
|
221
|
-
ButtonsPanel.defaultProps = {
|
|
222
|
-
isSticky: false,
|
|
223
|
-
};
|
|
224
|
-
var Content = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
225
|
-
var StyledContainer$2 = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"], ["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"])), theme.palette.grey.zero);
|
|
226
|
-
var templateObject_1$E, templateObject_2$n;
|
|
227
|
-
|
|
228
|
-
var InputDropdown = forwardRef(function (props, ref) {
|
|
229
|
-
var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, input = props.input, className = props.className, strategy = props.strategy, onScroll = props.onScroll, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent", "input", "className", "strategy", "onScroll"]);
|
|
230
|
-
var _a = useState(false), isScrollable = _a[0], setIsScrollable = _a[1];
|
|
231
|
-
var dropdownRef = useRef(null);
|
|
232
|
-
var handleChange = function (open) {
|
|
233
|
-
if (!open) {
|
|
234
|
-
handleClose();
|
|
235
|
-
}
|
|
236
|
-
};
|
|
237
|
-
useEffect(function () {
|
|
238
|
-
var _a;
|
|
239
|
-
if ((buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) && isOpen) {
|
|
240
|
-
var scrollContainer = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0];
|
|
241
|
-
if (scrollContainer) {
|
|
242
|
-
var hasScroll = scrollContainer.scrollHeight > scrollContainer.clientHeight;
|
|
243
|
-
setIsScrollable(hasScroll);
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
}, [isOpen]);
|
|
247
|
-
var forwardedRef = function (elem) {
|
|
248
|
-
if (typeof ref === "function")
|
|
249
|
-
ref(elem);
|
|
250
|
-
else if (ref)
|
|
251
|
-
ref.current = elem;
|
|
252
|
-
dropdownRef.current = elem;
|
|
253
|
-
};
|
|
254
|
-
return (jsx(StyledTooltip, __assign({ fullWidth: true, withoutMobile: true, open: isOpen, onChange: handleChange, toggleMethod: "controlled", strategy: strategy || "fixed", placement: "bottom", className: className, content: jsxs(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef }, otherProps, { children: [jsx(StyledWrapper$8, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ onScroll: onScroll, isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })) }, { children: input })));
|
|
255
|
-
});
|
|
256
|
-
var StyledTooltip = styled(Tooltip$1)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n width: 100%;\n }\n }\n }\n .KUI-Popper {\n max-width: unset;\n > div {\n user-select: none;\n padding: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n }\n &.top > div {\n border-radius: 8px 8px 0 0;\n }\n }\n"], ["\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n width: 100%;\n }\n }\n }\n .KUI-Popper {\n max-width: unset;\n > div {\n user-select: none;\n padding: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n }\n &.top > div {\n border-radius: 8px 8px 0 0;\n }\n }\n"])));
|
|
257
|
-
var StyledDropdown$2 = styled(Grid)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 100%;\n user-select: none;\n"], ["\n width: 100%;\n user-select: none;\n"])));
|
|
258
|
-
var StyledWrapper$8 = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"])), function (_a) {
|
|
259
|
-
var isScrollable = _a.isScrollable;
|
|
260
|
-
return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
|
|
261
|
-
});
|
|
262
|
-
var ScrollingContainer = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"], ["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"])), function (_a) {
|
|
263
|
-
var isScrollable = _a.isScrollable;
|
|
264
|
-
return (isScrollable ? "4px" : "0px");
|
|
265
|
-
}, theme.palette.grey.fifteenB, theme.palette.grey.thirty);
|
|
266
|
-
var templateObject_1$D, templateObject_2$m, templateObject_3$b, templateObject_4$7;
|
|
267
|
-
|
|
268
|
-
var InputSelectDropdown = forwardRef(function (_a, ref) {
|
|
269
|
-
var input = _a.input, options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
|
|
270
|
-
var handleClick = function (option) {
|
|
271
|
-
if (!option.disabled) {
|
|
272
|
-
handleSelect(option);
|
|
273
|
-
}
|
|
274
|
-
};
|
|
275
|
-
return (jsx(StyledDropdown$1, __assign({ input: input, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
|
|
276
|
-
});
|
|
277
|
-
var OptionWrapper = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
278
|
-
var disabled = _a.disabled;
|
|
279
|
-
return (disabled ? "auto" : "pointer");
|
|
280
|
-
}, function (_a) {
|
|
281
|
-
var disabled = _a.disabled;
|
|
282
|
-
return disabled ? theme.palette.grey.fiftyP : theme.palette.grey.seventy;
|
|
283
|
-
});
|
|
284
|
-
var StyledDropdown$1 = styled(InputDropdown)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
285
|
-
var templateObject_1$C, templateObject_2$l;
|
|
286
|
-
|
|
287
|
-
var InputSelectBase = forwardRef(function (_a, ref) {
|
|
288
|
-
var _b;
|
|
289
|
-
var options = _a.options, name = _a.name, disabled = _a.disabled, handleChange = _a.handleChange, iconProps = _a.iconProps, renderOption = _a.renderOption, selectedLabel = _a.selectedLabel, selectedValue = _a.selectedValue, error = _a.error, inputProps = __rest(_a, ["options", "name", "disabled", "handleChange", "iconProps", "renderOption", "selectedLabel", "selectedValue", "error"]);
|
|
290
|
-
var _c = useState(false), isDropdownOpen = _c[0], setIsDropdownOpen = _c[1];
|
|
291
|
-
var inputRef = useRef(null);
|
|
292
|
-
var forwardedRef = useForkRef(inputRef, ref);
|
|
293
|
-
var handleOpenDropdown = function () {
|
|
294
|
-
var _a, _b, _c, _d;
|
|
295
|
-
if ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
|
|
296
|
-
(_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement.focus();
|
|
297
|
-
}
|
|
298
|
-
if (!disabled)
|
|
299
|
-
setIsDropdownOpen(function (prev) { return !prev; });
|
|
300
|
-
};
|
|
301
|
-
var handleCloseDropdown = function () {
|
|
302
|
-
setIsDropdownOpen(false);
|
|
303
|
-
};
|
|
304
|
-
var handleSelect = function (option) {
|
|
305
|
-
if (handleChange)
|
|
306
|
-
handleChange(option);
|
|
307
|
-
handleCloseDropdown();
|
|
308
|
-
};
|
|
309
|
-
return (jsxs$1(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(InputSelectDropdown, { options: options, inputRef: {
|
|
310
|
-
current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
311
|
-
}, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption, input: jsx$1(StyledInput$3, __assign({ onClick: handleOpenDropdown, ref: forwardedRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsx$1(StyledIcon$1, __assign({ width: 12, height: 13, css: [
|
|
312
|
-
{ transition: "all linear .2s" },
|
|
313
|
-
isDropdownOpen && { transform: "rotate(180deg)" },
|
|
314
|
-
] }, iconProps))) })) })] }));
|
|
315
|
-
});
|
|
316
|
-
var Wrapper$6 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
317
|
-
var StyledInput$3 = styled(InputWithAdornments)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputAdornment_end-icon {\n pointer-events: none;\n }\n"], ["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputAdornment_end-icon {\n pointer-events: none;\n }\n"])));
|
|
318
|
-
var StyledIcon$1 = styled(HalfArrowIcon)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n user-select: none;\n"], ["\n user-select: none;\n"])));
|
|
319
|
-
var templateObject_1$B, templateObject_2$k, templateObject_3$a;
|
|
320
|
-
|
|
321
|
-
function InputSelectOption(props) {
|
|
322
|
-
var option = props.option, selectedValue = props.selectedValue;
|
|
323
|
-
return (jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsx(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
|
|
324
|
-
}
|
|
325
|
-
var StyledOption$1 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
326
|
-
var selected = _a.selected;
|
|
327
|
-
return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
328
|
-
}, theme.palette.background.light1);
|
|
329
|
-
var templateObject_1$A;
|
|
330
|
-
|
|
331
|
-
var InputSelect = forwardRef(function (_a, ref) {
|
|
332
|
-
var _b;
|
|
333
|
-
var options = _a.options, name = _a.name, handleChange = _a.handleChange; _a.form; var valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
|
|
334
|
-
var _c = useState(valueProp), value = _c[0], setValue = _c[1];
|
|
335
|
-
var selectedLabel = ((_b = options.find(function (option) { return String(option.value) === String(value); })) === null || _b === void 0 ? void 0 : _b.label) || "";
|
|
336
|
-
var handleSelect = function (option) {
|
|
337
|
-
setValue(option.value);
|
|
338
|
-
if (handleChange) {
|
|
339
|
-
handleChange(option.value);
|
|
340
|
-
}
|
|
341
|
-
};
|
|
342
|
-
useEffect(function () {
|
|
343
|
-
if (typeof valueProp !== "undefined")
|
|
344
|
-
setValue(valueProp);
|
|
345
|
-
}, [valueProp]);
|
|
346
|
-
return (jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, selectedLabel: selectedLabel, selectedValue: value, name: name, renderOption: function (option, selectedValue) { return (jsx(InputSelectOption, { option: option, selectedValue: selectedValue })); }, ref: ref }, inputProps)));
|
|
347
|
-
});
|
|
348
|
-
|
|
349
|
-
var checkDisabled$1 = function (year, min, max) {
|
|
350
|
-
return (min && year < min) || (max && year > max);
|
|
351
|
-
};
|
|
352
|
-
var SelectYear = forwardRef(function (_a, ref) {
|
|
353
|
-
var yearOptions = _a.yearOptions; _a.options; var min = _a.min, max = _a.max, props = __rest(_a, ["yearOptions", "options", "min", "max"]);
|
|
354
|
-
var formattedYearOptions = yearOptions.map(function (year) { return (__assign(__assign({}, year), { disabled: checkDisabled$1(Number(year.value), min, max) })); });
|
|
355
|
-
return (jsx(InputSelect, __assign({ ref: ref, label: "Year", options: formattedYearOptions }, props)));
|
|
356
|
-
});
|
|
357
|
-
|
|
358
|
-
var checkDisabled = function (month, min, max) { return (min && month < min) || (max && month >= max); };
|
|
359
|
-
var monthValues = [
|
|
360
|
-
{ value: 0, label: "January" },
|
|
361
|
-
{ value: 1, label: "February" },
|
|
362
|
-
{ value: 2, label: "March" },
|
|
363
|
-
{ value: 3, label: "April" },
|
|
364
|
-
{ value: 4, label: "May" },
|
|
365
|
-
{ value: 5, label: "June" },
|
|
366
|
-
{ value: 6, label: "July" },
|
|
367
|
-
{ value: 7, label: "August" },
|
|
368
|
-
{ value: 8, label: "September" },
|
|
369
|
-
{ value: 9, label: "October" },
|
|
370
|
-
{ value: 10, label: "November" },
|
|
371
|
-
{ value: 11, label: "December" },
|
|
372
|
-
];
|
|
373
|
-
var SelectMonth = forwardRef(function (props, ref) {
|
|
374
|
-
var min = props.min, max = props.max; props.options; var other = __rest(props, ["min", "max", "options"]);
|
|
375
|
-
var formattedMonths = monthValues.map(function (month) { return (__assign(__assign({}, month), { disabled: checkDisabled(month.value, min, max) })); });
|
|
376
|
-
return (jsx(InputSelect, __assign({ ref: ref, label: "Month", options: formattedMonths }, other)));
|
|
377
|
-
});
|
|
378
|
-
|
|
379
|
-
var CalendarHeaderWithSelect = forwardRef(function (_a, ref) {
|
|
380
|
-
var changeMonth = _a.changeMonth, changeYear = _a.changeYear, date = _a.date, yearOptions = _a.yearOptions, max = _a.max, min = _a.min;
|
|
381
|
-
var year = date.getFullYear();
|
|
382
|
-
var month = date.getMonth();
|
|
383
|
-
var minMonth = (min === null || min === void 0 ? void 0 : min.year) === year && (min === null || min === void 0 ? void 0 : min.month) ? min.month - 1 : 0;
|
|
384
|
-
var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === year ? max === null || max === void 0 ? void 0 : max.month : 11;
|
|
385
|
-
return (jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxs(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= year && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= year && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
|
|
386
|
-
});
|
|
387
|
-
var Wrapper$5 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"], ["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"])));
|
|
388
|
-
var templateObject_1$z;
|
|
389
|
-
|
|
390
|
-
var CalendarStandardContainer = forwardRef(function (_a, ref) {
|
|
391
|
-
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
392
|
-
return jsx(DatePickerContainer, __assign({ ref: ref }, props));
|
|
393
|
-
});
|
|
394
|
-
var DatePickerContainer = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--today {\n color: ", ";\n background-color: ", ";\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"], ["\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--today {\n color: ", ";\n background-color: ", ";\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.light, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
|
|
395
|
-
var templateObject_1$y;
|
|
396
|
-
|
|
397
|
-
var CalendarStandardHeader = forwardRef(function (_a, ref) {
|
|
398
|
-
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
399
|
-
var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
400
|
-
return (jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
401
|
-
});
|
|
402
|
-
var HeaderWrapper = styled(Grid)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"], ["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"])));
|
|
403
|
-
var StyledHeading = styled(Heading)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
404
|
-
var CircleButtonStyled = styled(Button)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"], ["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"])));
|
|
405
|
-
var templateObject_1$x, templateObject_2$j, templateObject_3$9;
|
|
406
|
-
|
|
407
|
-
var InputForDatepicker = forwardRef(function (props, ref) {
|
|
408
|
-
var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
|
|
409
|
-
var handleIconClick = function () {
|
|
410
|
-
if (!disabled) {
|
|
411
|
-
if (handleClick) {
|
|
412
|
-
handleClick();
|
|
413
|
-
}
|
|
414
|
-
else {
|
|
415
|
-
onClick();
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
};
|
|
419
|
-
var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
|
|
420
|
-
return (jsx(InputWithMask$1, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
|
|
421
|
-
});
|
|
422
|
-
var IconWrapper = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: ", ";\n z-index: 1;\n"], ["\n display: flex;\n align-items: center;\n cursor: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
423
|
-
var disabled = _a.disabled;
|
|
424
|
-
return (disabled ? "auto" : "pointer");
|
|
425
|
-
});
|
|
426
|
-
var templateObject_1$w;
|
|
427
|
-
|
|
428
|
-
var MonthPickerContainer = forwardRef(function (_a, ref) {
|
|
429
|
-
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
430
|
-
return jsx(StyledContainer$1, __assign({ ref: ref }, props));
|
|
431
|
-
});
|
|
432
|
-
var StyledContainer$1 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"], ["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
|
|
433
|
-
var templateObject_1$v;
|
|
434
|
-
|
|
435
|
-
var MonthPickerHeader = forwardRef(function (_a, ref) {
|
|
436
|
-
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
437
|
-
return (jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear, type: "button" }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear, type: "button" }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
438
|
-
});
|
|
439
|
-
var StyledIconButton = styled(IconButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
440
|
-
var StyledHeader = styled(Grid)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"], ["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"])));
|
|
441
|
-
var templateObject_1$u, templateObject_2$i;
|
|
442
|
-
|
|
443
|
-
var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
444
|
-
var _b;
|
|
445
|
-
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, onChange = _a.onChange, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps", "onChange"]);
|
|
446
|
-
var _c = useState(), changedValue = _c[0], setChangedValue = _c[1];
|
|
447
|
-
var _d = useController({
|
|
448
|
-
name: name,
|
|
449
|
-
control: form.control,
|
|
450
|
-
}), field = _d.field, fieldState = _d.fieldState;
|
|
451
|
-
var handleChange = function (date) {
|
|
452
|
-
field.onChange(date);
|
|
453
|
-
if (onChange)
|
|
454
|
-
onChange(date);
|
|
455
|
-
};
|
|
456
|
-
useEffect(function () {
|
|
457
|
-
setChangedValue(field.value);
|
|
458
|
-
}, [field.value]);
|
|
459
|
-
return (jsx(Wrapper$4, __assign({ ref: ref }, { children: jsx(DatePicker, __assign({ selected: field.value, onChange: handleChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps), changedValue), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)) })));
|
|
460
|
-
});
|
|
461
|
-
var Wrapper$4 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
462
|
-
var templateObject_1$t;
|
|
463
|
-
|
|
464
|
-
var MenuItem = forwardRef(function (_a, ref) {
|
|
465
|
-
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
466
|
-
var startScrolling = function () {
|
|
467
|
-
setIsScrolling(true);
|
|
468
|
-
};
|
|
469
|
-
var endScrolling = function () {
|
|
470
|
-
setIsScrolling(false);
|
|
471
|
-
};
|
|
472
|
-
var handleSelect = function () {
|
|
473
|
-
if (!isScrolling) {
|
|
474
|
-
handleClick(index);
|
|
475
|
-
}
|
|
476
|
-
};
|
|
477
|
-
useEffect(function () {
|
|
478
|
-
if (active === index) {
|
|
479
|
-
scroller.scrollTo(tab, { offset: offset });
|
|
480
|
-
}
|
|
481
|
-
Events.scrollEvent.register("begin", function (to, element) {
|
|
482
|
-
startScrolling();
|
|
483
|
-
if (element) {
|
|
484
|
-
handleClick(Number(element.dataset.index));
|
|
485
|
-
}
|
|
486
|
-
});
|
|
487
|
-
Events.scrollEvent.register("end", function (to, element) {
|
|
488
|
-
setTimeout(endScrolling);
|
|
489
|
-
});
|
|
490
|
-
return function () {
|
|
491
|
-
Events.scrollEvent.remove("begin");
|
|
492
|
-
Events.scrollEvent.remove("end");
|
|
493
|
-
};
|
|
494
|
-
}, []);
|
|
495
|
-
return (jsx$1(Link$1, __assign({ to: tab, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$2, __assign({ ref: ref }, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab })) })) })));
|
|
496
|
-
});
|
|
497
|
-
var ButtonWrapper$2 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"], ["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"])));
|
|
498
|
-
var disabledStyles = css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), theme.palette.grey.seventy);
|
|
499
|
-
var templateObject_1$s, templateObject_2$h;
|
|
500
|
-
|
|
501
|
-
var DesktopMenuPanel = forwardRef(function (_a, ref) {
|
|
502
|
-
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
503
|
-
return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab) }), index)); }) })));
|
|
504
|
-
});
|
|
505
|
-
var Wrapper$3 = styled(Grid)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
506
|
-
var templateObject_1$r;
|
|
507
|
-
|
|
508
|
-
var InputWithMask = forwardRef(function (_a, ref) {
|
|
509
|
-
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
510
|
-
var handleChange = function (e, field) {
|
|
511
|
-
field.onChange(e);
|
|
512
|
-
if (inputProps.onChange) {
|
|
513
|
-
inputProps.onChange(e);
|
|
514
|
-
}
|
|
515
|
-
};
|
|
516
|
-
var getError = function (fieldState) {
|
|
517
|
-
var _a;
|
|
518
|
-
return typeof error !== "undefined" && String(error).length > 0
|
|
519
|
-
? error
|
|
520
|
-
: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
521
|
-
};
|
|
522
|
-
return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
|
|
523
|
-
var field = _a.field, fieldState = _a.fieldState;
|
|
524
|
-
return (jsx(InputWithMask$1, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
|
|
525
|
-
return handleChange(e, field);
|
|
526
|
-
}, inputRef: ref })));
|
|
527
|
-
} }));
|
|
528
|
-
});
|
|
529
|
-
|
|
530
|
-
var InputWithController = forwardRef(function (_a, ref) {
|
|
531
|
-
var form = _a.form, name = _a.name, error = _a.error, value = _a.value, type = _a.type, inputProps = __rest(_a, ["form", "name", "error", "value", "type"]);
|
|
532
|
-
var handleChange = function (e, field) {
|
|
533
|
-
var _a;
|
|
534
|
-
var newValue = type === "number" && !((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.length) ? null : e.target.value;
|
|
535
|
-
field.onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: newValue }) }));
|
|
536
|
-
if (inputProps.onChange) {
|
|
537
|
-
inputProps.onChange(e);
|
|
538
|
-
}
|
|
539
|
-
};
|
|
540
|
-
var getError = function (fieldState) {
|
|
541
|
-
var _a;
|
|
542
|
-
return typeof error !== "undefined" && String(error).length > 0
|
|
543
|
-
? error
|
|
544
|
-
: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
545
|
-
};
|
|
546
|
-
return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
|
|
547
|
-
var field = _a.field, fieldState = _a.fieldState;
|
|
548
|
-
return (jsx(InputWithAdornments, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
|
|
549
|
-
return handleChange(e, field);
|
|
550
|
-
}, type: type, value: value !== null && value !== void 0 ? value : field.value, inputRef: ref })));
|
|
551
|
-
} }));
|
|
552
|
-
});
|
|
553
|
-
|
|
554
|
-
var strengthCoefficients = {
|
|
555
|
-
weak: 0,
|
|
556
|
-
simple: 1,
|
|
557
|
-
medium: 2,
|
|
558
|
-
hard: 3,
|
|
559
|
-
};
|
|
560
|
-
var strengthColors = {
|
|
561
|
-
weak: theme.palette.red.fiftyP,
|
|
562
|
-
simple: theme.palette.brand.main,
|
|
563
|
-
medium: theme.palette.blue.fiftyP,
|
|
564
|
-
hard: theme.palette.green.fiftyP,
|
|
565
|
-
};
|
|
566
|
-
var strengthTexts = {
|
|
567
|
-
weak: "Очень простой",
|
|
568
|
-
simple: "Простой",
|
|
569
|
-
medium: "Средний",
|
|
570
|
-
hard: "Сложный",
|
|
571
|
-
};
|
|
572
|
-
var PassportStrengthBar = forwardRef(function (_a, ref) {
|
|
573
|
-
var strength = _a.strength;
|
|
574
|
-
var color = strength
|
|
575
|
-
? strengthColors[strength]
|
|
576
|
-
: "";
|
|
577
|
-
var strengthKey = strength
|
|
578
|
-
? strengthCoefficients[strength]
|
|
579
|
-
: -1;
|
|
580
|
-
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
|
|
581
|
-
});
|
|
582
|
-
var Wrapper$2 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"], ["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"])));
|
|
583
|
-
var ReliabilityLevelWrapper = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
584
|
-
var ReliabilityLevel = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n width: calc(100% / 4);\n margin-right: 16px;\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n width: calc(100% / 4);\n margin-right: 16px;\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
585
|
-
var StyledLinearProgress = styled(LinearProgress)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"], ["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"])), theme.palette.grey.fifteenB, function (_a) {
|
|
586
|
-
var color = _a.color;
|
|
587
|
-
return color;
|
|
588
|
-
});
|
|
589
|
-
var Description = styled(Caption)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"], ["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"])));
|
|
590
|
-
var templateObject_1$q, templateObject_2$g, templateObject_3$8, templateObject_4$6, templateObject_5$3;
|
|
591
|
-
|
|
592
|
-
var getFormValue = function (name, form) {
|
|
593
|
-
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
594
|
-
var fieldValue = form === null || form === void 0 ? void 0 : form.control._formValues;
|
|
595
|
-
names === null || names === void 0 ? void 0 : names.forEach(function (field) {
|
|
596
|
-
if (fieldValue) {
|
|
597
|
-
fieldValue = fieldValue[field];
|
|
598
|
-
}
|
|
599
|
-
});
|
|
600
|
-
return fieldValue;
|
|
601
|
-
};
|
|
602
|
-
var getFormError = function (name, form) {
|
|
603
|
-
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
604
|
-
var fieldError = form === null || form === void 0 ? void 0 : form.formState.errors;
|
|
605
|
-
names === null || names === void 0 ? void 0 : names.forEach(function (field) {
|
|
606
|
-
if (fieldError) {
|
|
607
|
-
// @ts-ignore
|
|
608
|
-
fieldError = fieldError[field];
|
|
609
|
-
}
|
|
610
|
-
});
|
|
611
|
-
return fieldError === null || fieldError === void 0 ? void 0 : fieldError.message;
|
|
612
|
-
};
|
|
613
|
-
|
|
614
|
-
var InputPassword = forwardRef(function (props, ref) {
|
|
615
|
-
var _a = useState(false), showPassword = _a[0], setShowPassword = _a[1];
|
|
616
|
-
var _b = useState(null), strength = _b[0], setStrength = _b[1];
|
|
617
|
-
var handleShowChange = function () {
|
|
618
|
-
setShowPassword(function (prev) { return !prev; });
|
|
619
|
-
};
|
|
620
|
-
var checkPasswordStrength = function (value) {
|
|
621
|
-
if (value.length === 0) {
|
|
622
|
-
setStrength(null);
|
|
623
|
-
return;
|
|
624
|
-
}
|
|
625
|
-
if (strongPasswordRegExp.test(value)) {
|
|
626
|
-
setStrength("hard");
|
|
627
|
-
}
|
|
628
|
-
else if (mediumPasswordRegExp.test(value)) {
|
|
629
|
-
setStrength("medium");
|
|
630
|
-
}
|
|
631
|
-
else if (simplePasswordRegExp.test(value)) {
|
|
632
|
-
setStrength("simple");
|
|
633
|
-
}
|
|
634
|
-
else {
|
|
635
|
-
setStrength("weak");
|
|
636
|
-
}
|
|
637
|
-
};
|
|
638
|
-
var handleChange = function (e) {
|
|
639
|
-
var targetValue = e.target.value;
|
|
640
|
-
checkPasswordStrength(targetValue);
|
|
641
|
-
};
|
|
642
|
-
useEffect(function () {
|
|
643
|
-
var form = props.form, name = props.name;
|
|
644
|
-
var fieldValue = getFormValue(name, form);
|
|
645
|
-
if (typeof fieldValue === "string") {
|
|
646
|
-
checkPasswordStrength(fieldValue);
|
|
647
|
-
}
|
|
648
|
-
}, []);
|
|
649
|
-
return (jsxs(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
|
|
650
|
-
});
|
|
651
|
-
var EyeIconWrapper = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
652
|
-
var templateObject_1$p;
|
|
653
|
-
|
|
654
|
-
var InputTextAreaMobile = forwardRef(function (props) { return (jsxs(Fragment$1, { children: [jsx(InputWrapper$1, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
|
|
655
|
-
var InputWrapper$1 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
656
|
-
var TextAreaWrapper = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
657
|
-
var templateObject_1$o, templateObject_2$f;
|
|
658
|
-
|
|
659
|
-
var ModalFooter = forwardRef(function (_a, ref) {
|
|
660
|
-
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
661
|
-
return (jsxs(StyledFooter, __assign({ ref: ref }, { children: [jsx(Divider, {}), jsx(ButtonWrapper$1, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] })));
|
|
662
|
-
});
|
|
663
|
-
var StyledFooter = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"], ["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])), theme.palette.grey.zero);
|
|
664
|
-
var ButtonWrapper$1 = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"])));
|
|
665
|
-
var ButtonStyled = styled(Button)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
666
|
-
var templateObject_1$n, templateObject_2$e, templateObject_3$7;
|
|
667
|
-
|
|
668
|
-
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
669
|
-
if (!offsetFromCurrent || !maxYearCount)
|
|
670
|
-
return [];
|
|
671
|
-
var endYear = DateTime.now().year - offsetFromCurrent;
|
|
672
|
-
return _.range(maxYearCount).map(function (elem) {
|
|
673
|
-
var fullYear = endYear - elem;
|
|
674
|
-
return {
|
|
675
|
-
value: fullYear,
|
|
676
|
-
label: fullYear,
|
|
677
|
-
};
|
|
678
|
-
});
|
|
679
|
-
};
|
|
680
|
-
var InputWithDatePicker = forwardRef(function (_a, ref) {
|
|
681
|
-
var _b;
|
|
682
|
-
var title = _a.title, description = _a.description, name = _a.name, form = _a.form, disabled = _a.disabled, yearParams = _a.yearParams, onChange = _a.onChange, max = _a.max, min = _a.min, footerLabel = _a.footerLabel, datePickerProps = _a.datePickerProps, alignTitle = _a.alignTitle, props = __rest(_a, ["title", "description", "name", "form", "disabled", "yearParams", "onChange", "max", "min", "footerLabel", "datePickerProps", "alignTitle"]);
|
|
683
|
-
var _c = useController({
|
|
684
|
-
name: name,
|
|
685
|
-
control: form.control,
|
|
686
|
-
}), field = _c.field, fieldState = _c.fieldState;
|
|
687
|
-
var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
688
|
-
var formValue = field.value;
|
|
689
|
-
var formattedValue = formValue ? formValue.toFormat("dd.MM.yyyy") : "";
|
|
690
|
-
var formattedDate = formValue ? formValue.toJSDate() : null;
|
|
691
|
-
var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
|
|
692
|
-
var _e = useState(formattedDate), calendarDate = _e[0], setCalendarDate = _e[1];
|
|
693
|
-
var _f = useState(formattedValue), inputValue = _f[0], setInputValue = _f[1];
|
|
694
|
-
var yearList = generateYearRange(yearParams === null || yearParams === void 0 ? void 0 : yearParams.min, yearParams === null || yearParams === void 0 ? void 0 : yearParams.max);
|
|
695
|
-
var forwardedRef = useForkRef(ref, field.ref);
|
|
696
|
-
useEffect(function () {
|
|
697
|
-
if (formattedValue) {
|
|
698
|
-
setInputValue(formattedValue);
|
|
699
|
-
}
|
|
700
|
-
}, [formattedValue]);
|
|
701
|
-
var handleChange = function (e) {
|
|
702
|
-
var targetValue = e.target.value;
|
|
703
|
-
setInputValue(targetValue);
|
|
704
|
-
if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
|
|
705
|
-
var targetDate = DateTime.fromFormat(targetValue, "dd.MM.yyyy");
|
|
706
|
-
setCalendarDate(targetDate.toJSDate());
|
|
707
|
-
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: targetDate, name: name }, type: "change" });
|
|
708
|
-
if (onChange) {
|
|
709
|
-
onChange(targetDate);
|
|
710
|
-
}
|
|
711
|
-
}
|
|
712
|
-
else {
|
|
713
|
-
setCalendarDate(null);
|
|
714
|
-
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
|
|
715
|
-
if (onChange) {
|
|
716
|
-
onChange(null);
|
|
717
|
-
}
|
|
718
|
-
}
|
|
719
|
-
};
|
|
720
|
-
var acceptWithDateSelected = function () {
|
|
721
|
-
if (calendarDate) {
|
|
722
|
-
var dateObj = DateTime.fromJSDate(calendarDate);
|
|
723
|
-
setInputValue(dateObj.toFormat("dd.MM.yyyy"));
|
|
724
|
-
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: dateObj, name: name }, type: "change" });
|
|
725
|
-
if (onChange) {
|
|
726
|
-
onChange(dateObj);
|
|
727
|
-
}
|
|
728
|
-
handleModalClose();
|
|
729
|
-
}
|
|
730
|
-
};
|
|
731
|
-
var handleDateChange = function (newDate) {
|
|
732
|
-
setCalendarDate(newDate);
|
|
733
|
-
};
|
|
734
|
-
return (jsxs$1(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: inputValue, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxs$1(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsx$1(ContentWrapper$2, { children: jsx$1(DatePicker, __assign({ inline: true, selected: calendarDate || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !formattedDate && !calendarDate, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
|
|
735
|
-
});
|
|
736
|
-
InputWithDatePicker.defaultProps = {
|
|
737
|
-
alignTitle: "center",
|
|
738
|
-
};
|
|
739
|
-
var ContentWrapper$2 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
|
|
740
|
-
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"], ["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"])), theme.palette.background.light1, theme.palette.background.light1);
|
|
741
|
-
var DayContent = styled.span(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
|
|
742
|
-
var StyledModal = styled(Modal)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ", ";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"], ["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ", ";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"])), function (_a) {
|
|
743
|
-
var alignTitle = _a.alignTitle;
|
|
744
|
-
return alignTitle || "center";
|
|
745
|
-
});
|
|
746
|
-
var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$5;
|
|
747
|
-
|
|
748
|
-
var shortMonths = [
|
|
749
|
-
"ЯНВ",
|
|
750
|
-
"ФЕВ",
|
|
751
|
-
"МАРТ",
|
|
752
|
-
"АПР",
|
|
753
|
-
"МАЙ",
|
|
754
|
-
"ИЮНЬ",
|
|
755
|
-
"ИЮЛЬ",
|
|
756
|
-
"АВГ",
|
|
757
|
-
"СЕНТ",
|
|
758
|
-
"ОКТ",
|
|
759
|
-
"НОЯБ",
|
|
760
|
-
"ДЕК",
|
|
761
|
-
];
|
|
762
|
-
|
|
763
|
-
var ruCustom = __assign(__assign({}, ru), { localize: {
|
|
764
|
-
month: function (n) { return shortMonths[n]; },
|
|
765
|
-
ordinalNumber: function () { return ""; },
|
|
766
|
-
era: function () { return ""; },
|
|
767
|
-
quarter: function () { return ""; },
|
|
768
|
-
dayPeriod: function () { return ""; },
|
|
769
|
-
day: function () { return ""; },
|
|
770
|
-
} });
|
|
771
|
-
var MobileInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
772
|
-
var _b;
|
|
773
|
-
var title = _a.title, name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, props = __rest(_a, ["title", "name", "form", "disabled", "datePickerProps"]);
|
|
774
|
-
var _c = useController({
|
|
775
|
-
name: name,
|
|
776
|
-
control: form.control,
|
|
777
|
-
}), field = _c.field, fieldState = _c.fieldState;
|
|
778
|
-
var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
779
|
-
var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
|
|
780
|
-
var _e = useState(field.value
|
|
781
|
-
? DateTime.fromJSDate(new Date(String(field.value))).toFormat("MM.yyyy")
|
|
782
|
-
: null), value = _e[0], setValue = _e[1];
|
|
783
|
-
var _f = useState(value ? DateTime.fromFormat(value, "MM.yyyy").toJSDate() : null), date = _f[0], setDate = _f[1];
|
|
784
|
-
var handleChange = function (e) {
|
|
785
|
-
var targetValue = e.target.value;
|
|
786
|
-
setValue(targetValue);
|
|
787
|
-
if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
|
|
788
|
-
var jsDate = DateTime.fromFormat(targetValue, "MM.yyyy").toJSDate();
|
|
789
|
-
setDate(jsDate);
|
|
790
|
-
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: jsDate, name: name }, type: "change" });
|
|
791
|
-
}
|
|
792
|
-
else {
|
|
793
|
-
setDate(null);
|
|
794
|
-
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
|
|
795
|
-
}
|
|
796
|
-
};
|
|
797
|
-
var acceptWithDateSelected = function () {
|
|
798
|
-
if (date) {
|
|
799
|
-
setValue(DateTime.fromJSDate(date).toFormat("MM.yyyy"));
|
|
800
|
-
}
|
|
801
|
-
else {
|
|
802
|
-
setValue("");
|
|
803
|
-
}
|
|
804
|
-
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
|
|
805
|
-
handleModalClose();
|
|
806
|
-
};
|
|
807
|
-
return (jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxs(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper$1, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] })));
|
|
808
|
-
});
|
|
809
|
-
var Wrapper$1 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
810
|
-
var ContentWrapper$1 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"], ["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"])));
|
|
811
|
-
var templateObject_1$l, templateObject_2$c;
|
|
812
|
-
|
|
813
|
-
var InputWithMonthPicker = function (props) { return (jsxs(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
814
|
-
|
|
815
|
-
var MobileMenuPanel = forwardRef(function (_a, ref) {
|
|
816
|
-
var tabs = _a.tabs, handleClick = _a.handleClick, variant = _a.variant, other = __rest(_a, ["tabs", "handleClick", "variant"]);
|
|
817
|
-
var swiperRef = useRef(null);
|
|
818
|
-
var slideTo = function (index) {
|
|
819
|
-
setTimeout(function () {
|
|
820
|
-
var _a, _b;
|
|
821
|
-
(_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(index);
|
|
822
|
-
}, 16);
|
|
823
|
-
handleClick(index);
|
|
824
|
-
};
|
|
825
|
-
return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab)); }) })) })));
|
|
826
|
-
});
|
|
827
|
-
var Wrapper = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n\n swiper-slide {\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n\n swiper-slide {\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n }\n"])), theme.palette.background.light1);
|
|
828
|
-
var templateObject_1$k;
|
|
829
|
-
|
|
830
|
-
var MenuPanel = forwardRef(function (_a, ref) {
|
|
831
|
-
var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, variant = _a.variant;
|
|
832
|
-
var width = useWindowWidth();
|
|
833
|
-
var _b = React.useState(activeTab), value = _b[0], setValue = _b[1];
|
|
834
|
-
var _c = React.useState(false), isScrolling = _c[0], setIsScrolling = _c[1];
|
|
835
|
-
var navigate = useNavigate();
|
|
836
|
-
var location = useLocation();
|
|
837
|
-
var handleClick = function (index) {
|
|
838
|
-
if (paths[index]) {
|
|
839
|
-
setValue(index);
|
|
840
|
-
var pathName = location.pathname;
|
|
841
|
-
var currentLocation = "".concat(pathName).concat(location.search);
|
|
842
|
-
var newLocation = "".concat(pathName).concat(paths[index]);
|
|
843
|
-
if (currentLocation !== newLocation) {
|
|
844
|
-
navigate(newLocation, { replace: true });
|
|
845
|
-
}
|
|
846
|
-
}
|
|
847
|
-
};
|
|
848
|
-
useEffect(function () {
|
|
849
|
-
setValue(activeTab);
|
|
850
|
-
}, [activeTab]);
|
|
851
|
-
useEffect(function () {
|
|
852
|
-
if (typeof activeTab !== "number" && width < 901) {
|
|
853
|
-
animateScroll.scrollToTop();
|
|
854
|
-
}
|
|
855
|
-
}, []);
|
|
856
|
-
if (width === 0) {
|
|
857
|
-
return null;
|
|
858
|
-
}
|
|
859
|
-
return (jsxs$1("div", __assign({ ref: ref }, { children: [width > 765 ? (jsx$1(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsx$1(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsx$1("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsx$1(StyledElement, __assign({ name: tabs[index], "data-index": index }, { children: item }), index) }), index)); })] })));
|
|
860
|
-
});
|
|
861
|
-
MenuPanel.defaultProps = {
|
|
862
|
-
variant: "grey",
|
|
863
|
-
};
|
|
864
|
-
var fullHeightStyles = css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n height: calc(100vh - 121px);\n display: flex;\n"], ["\n height: calc(100vh - 121px);\n display: flex;\n"])));
|
|
865
|
-
var StyledElement = styled(Element)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
|
|
866
|
-
var templateObject_1$j, templateObject_2$b;
|
|
867
|
-
|
|
868
|
-
var Switch = forwardRef(function (_a, ref) {
|
|
869
|
-
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
870
|
-
return (jsx$1(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
|
|
871
|
-
var field = _a.field;
|
|
872
|
-
return (jsx$1(Switch$1, __assign({ checked: Boolean(field.value), onChange: field.onChange, "data-testid": name, ref: ref, name: name }, props)));
|
|
873
|
-
} }));
|
|
874
|
-
});
|
|
875
|
-
|
|
876
|
-
var InputPhoneWithForm = forwardRef(function (props, ref) {
|
|
877
|
-
var _a;
|
|
878
|
-
var form = props.form, name = props.name, hiddenInputProps = props.hiddenInputProps, error = props.error, other = __rest(props, ["form", "name", "hiddenInputProps", "error"]);
|
|
879
|
-
var codeRegister = useController({
|
|
880
|
-
control: form.control,
|
|
881
|
-
name: "".concat(name, ".phoneCode"),
|
|
882
|
-
defaultValue: "7",
|
|
883
|
-
});
|
|
884
|
-
var phoneRegister = useController({
|
|
885
|
-
control: form.control,
|
|
886
|
-
name: "".concat(name, ".phoneNumber"),
|
|
887
|
-
});
|
|
888
|
-
var errorMessage = typeof error !== "undefined" && String(error).length > 0
|
|
889
|
-
? error
|
|
890
|
-
: (_a = phoneRegister.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
891
|
-
var handleCountryChange = function (country) {
|
|
892
|
-
codeRegister.field.onChange({
|
|
893
|
-
target: { value: country.phoneCode, name: "".concat(name, ".phoneCode") },
|
|
894
|
-
type: "change",
|
|
895
|
-
});
|
|
896
|
-
};
|
|
897
|
-
var handleChange = function (e) {
|
|
898
|
-
phoneRegister.field.onChange(e);
|
|
899
|
-
if (!codeRegister.field.value) {
|
|
900
|
-
codeRegister.field.onChange({
|
|
901
|
-
target: { value: "7", name: "".concat(name, ".phoneCode") },
|
|
902
|
-
type: "change",
|
|
903
|
-
});
|
|
904
|
-
}
|
|
905
|
-
if (other.onChange) {
|
|
906
|
-
other.onChange(e);
|
|
907
|
-
}
|
|
908
|
-
};
|
|
909
|
-
var forwardedRef = useForkRef(ref, phoneRegister.field.ref);
|
|
910
|
-
return (jsx(InputWithCountryDropdown, __assign({ message: errorMessage,
|
|
911
|
-
// @ts-ignore
|
|
912
|
-
hiddenInputProps: __assign(__assign({}, codeRegister.field), hiddenInputProps), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
|
|
913
|
-
});
|
|
914
|
-
InputPhoneWithForm.defaultProps = {
|
|
915
|
-
name: "phone",
|
|
916
|
-
};
|
|
917
|
-
|
|
918
|
-
var Table = forwardRef(function (props, ref) { return jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
|
|
919
|
-
var StyledTable = styled.table(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
920
|
-
var templateObject_1$i;
|
|
921
|
-
|
|
922
|
-
var TableHeadCell = styled.th(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
923
|
-
var templateObject_1$h;
|
|
924
|
-
|
|
925
|
-
var TableCell = styled.td(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
926
|
-
var templateObject_1$g;
|
|
927
|
-
|
|
928
|
-
var TableRow = forwardRef(function (_a, ref) {
|
|
929
|
-
var children = _a.children, other = __rest(_a, ["children"]);
|
|
930
|
-
var childrenArr = React.Children.toArray(children);
|
|
931
|
-
return (jsx("tr", __assign({ ref: ref }, { children: childrenArr.map(function (child) { return React.cloneElement(child, other); }) })));
|
|
932
|
-
});
|
|
933
|
-
|
|
934
|
-
var placementsPositions = {
|
|
935
|
-
bottomStart: {
|
|
936
|
-
bottom: 1,
|
|
937
|
-
offset: 0,
|
|
938
|
-
},
|
|
939
|
-
bottomMiddle: {
|
|
940
|
-
bottom: 1,
|
|
941
|
-
offset: 0.5,
|
|
942
|
-
},
|
|
943
|
-
bottomEnd: {
|
|
944
|
-
bottom: 1,
|
|
945
|
-
offset: 1,
|
|
946
|
-
},
|
|
947
|
-
topStart: {
|
|
948
|
-
top: 1,
|
|
949
|
-
offset: 0,
|
|
950
|
-
},
|
|
951
|
-
topMiddle: {
|
|
952
|
-
top: 1,
|
|
953
|
-
offset: 0.5,
|
|
954
|
-
},
|
|
955
|
-
topEnd: {
|
|
956
|
-
top: 1,
|
|
957
|
-
offset: 1,
|
|
958
|
-
},
|
|
959
|
-
};
|
|
960
|
-
|
|
961
|
-
var PopperBase = forwardRef(function (props, ref) {
|
|
962
|
-
props.placement; var open = props.open, children = props.children, spacing = props.spacing, className = props.className, style = props.style, other = __rest(props, ["placement", "open", "children", "spacing", "className", "style"]);
|
|
963
|
-
return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style, open: !!open }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
964
|
-
});
|
|
965
|
-
var StyledPopperWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n width: max-content;\n padding: ", ";\n z-index: ", ";\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"], ["\n position: absolute;\n max-width: 215px;\n width: max-content;\n padding: ", ";\n z-index: ", ";\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"])), function (_a) {
|
|
966
|
-
var spacing = _a.spacing;
|
|
967
|
-
return spacing || 0;
|
|
968
|
-
}, function (_a) {
|
|
969
|
-
var open = _a.open;
|
|
970
|
-
return (open ? 10 : -1);
|
|
971
|
-
}, theme.breakpoints.xxs);
|
|
972
|
-
var StyledPopper = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"], ["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"])), function (_a) {
|
|
973
|
-
var open = _a.open;
|
|
974
|
-
return (open ? 1 : 0);
|
|
975
|
-
});
|
|
976
|
-
var templateObject_1$f, templateObject_2$a;
|
|
977
|
-
|
|
978
|
-
var PopperWithPortal = forwardRef(function (props, ref) {
|
|
979
|
-
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
980
|
-
var popperRef = useRef(null);
|
|
981
|
-
var _a = useState(null), coords = _a[0], setCoords = _a[1];
|
|
982
|
-
var _b = useState(null), size = _b[0], setSize = _b[1];
|
|
983
|
-
useEffect(function () {
|
|
984
|
-
if (contentRef.current && popperRef.current) {
|
|
985
|
-
var popper = popperRef.current;
|
|
986
|
-
var elemCoords = contentRef.current.getBoundingClientRect();
|
|
987
|
-
var popperSize = {
|
|
988
|
-
width: popper.clientWidth,
|
|
989
|
-
height: popper.clientHeight,
|
|
990
|
-
};
|
|
991
|
-
setCoords(elemCoords);
|
|
992
|
-
setSize(popperSize);
|
|
993
|
-
}
|
|
994
|
-
}, []);
|
|
995
|
-
var position = {};
|
|
996
|
-
if (coords && size) {
|
|
997
|
-
var placementPositions =
|
|
998
|
-
// @ts-ignore
|
|
999
|
-
placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
|
|
1000
|
-
position = {
|
|
1001
|
-
top: Math.max(placementPositions.top
|
|
1002
|
-
? coords.top - size.height
|
|
1003
|
-
: coords.top + coords.height, 0),
|
|
1004
|
-
left: Math.max(coords.left +
|
|
1005
|
-
coords.width * placementPositions.offset -
|
|
1006
|
-
size.width * placementPositions.offset, 0),
|
|
1007
|
-
};
|
|
1008
|
-
}
|
|
1009
|
-
var forwardedRef = function (elem) {
|
|
1010
|
-
if (ref) {
|
|
1011
|
-
// @ts-ignore
|
|
1012
|
-
ref.current = elem;
|
|
1013
|
-
}
|
|
1014
|
-
// @ts-ignore
|
|
1015
|
-
popperRef.current = elem;
|
|
1016
|
-
};
|
|
1017
|
-
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
1018
|
-
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
1019
|
-
// Распожить стрелочку к контенту посередине контента
|
|
1020
|
-
return ReactDOM.createPortal(jsxs(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
1021
|
-
});
|
|
1022
|
-
var templateObject_1$e;
|
|
1023
|
-
|
|
1024
|
-
var StaticPopper = forwardRef(function (props, ref) {
|
|
1025
|
-
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
1026
|
-
var popperRef = useRef(null);
|
|
1027
|
-
var _a = useState(null), contentSize = _a[0], setContentSize = _a[1];
|
|
1028
|
-
var _b = useState(null), popperSize = _b[0], setPopperSize = _b[1];
|
|
1029
|
-
var position = {};
|
|
1030
|
-
useEffect(function () {
|
|
1031
|
-
if (contentRef.current && popperRef.current) {
|
|
1032
|
-
setContentSize({
|
|
1033
|
-
width: contentRef.current.clientWidth,
|
|
1034
|
-
height: contentRef.current.clientHeight,
|
|
1035
|
-
});
|
|
1036
|
-
setPopperSize({
|
|
1037
|
-
width: popperRef.current.clientWidth,
|
|
1038
|
-
height: popperRef.current.clientHeight,
|
|
1039
|
-
});
|
|
1040
|
-
}
|
|
1041
|
-
}, []);
|
|
1042
|
-
if (contentSize && popperSize) {
|
|
1043
|
-
var placementPositions =
|
|
1044
|
-
// @ts-ignore
|
|
1045
|
-
placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
|
|
1046
|
-
position = {
|
|
1047
|
-
top: placementPositions.top
|
|
1048
|
-
? 0 - popperSize.height
|
|
1049
|
-
: 0 + contentSize.height,
|
|
1050
|
-
left: Math.max(contentSize.width * placementPositions.offset -
|
|
1051
|
-
popperSize.width * placementPositions.offset, 0),
|
|
1052
|
-
};
|
|
1053
|
-
}
|
|
1054
|
-
var forwardedRef = function (elem) {
|
|
1055
|
-
if (ref) {
|
|
1056
|
-
// @ts-ignore
|
|
1057
|
-
ref.current = elem;
|
|
1058
|
-
}
|
|
1059
|
-
// @ts-ignore
|
|
1060
|
-
popperRef.current = elem;
|
|
1061
|
-
};
|
|
1062
|
-
return jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other));
|
|
1063
|
-
});
|
|
1064
|
-
|
|
1065
|
-
var Popper = forwardRef(function (props, ref) {
|
|
1066
|
-
var contentRef = props.contentRef, other = __rest(props, ["contentRef"]);
|
|
1067
|
-
var _a = useState(true), isParentSticky = _a[0], setIsParentSticky = _a[1];
|
|
1068
|
-
useEffect(function () {
|
|
1069
|
-
function checkParentIsSticky() {
|
|
1070
|
-
var el = contentRef.current;
|
|
1071
|
-
while (el) {
|
|
1072
|
-
var position = window.getComputedStyle(el).position;
|
|
1073
|
-
if (position === "sticky" || position === "fixed")
|
|
1074
|
-
return true;
|
|
1075
|
-
el = el.parentElement;
|
|
1076
|
-
}
|
|
1077
|
-
return false;
|
|
1078
|
-
}
|
|
1079
|
-
var isSticky = checkParentIsSticky();
|
|
1080
|
-
setIsParentSticky(!!isSticky);
|
|
1081
|
-
}, [contentRef]);
|
|
1082
|
-
return isParentSticky ? (jsx(StaticPopper, __assign({ ref: ref, contentRef: contentRef }, other))) : (jsx(PopperWithPortal, __assign({ ref: ref, contentRef: contentRef }, other)));
|
|
1083
|
-
});
|
|
1084
|
-
|
|
1085
|
-
var Tooltip = forwardRef(function (props, ref) {
|
|
1086
|
-
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, cursor = props.cursor, className = props.className, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children", "cursor", "className"]);
|
|
1087
|
-
var _a = useState(open), isOpen = _a[0], setOpen = _a[1];
|
|
1088
|
-
var elemRef = useRef(null);
|
|
1089
|
-
var handleOpen = function () {
|
|
1090
|
-
setOpen(true);
|
|
1091
|
-
if (onOpen) {
|
|
1092
|
-
onOpen();
|
|
1093
|
-
}
|
|
1094
|
-
};
|
|
1095
|
-
var handleClose = function () {
|
|
1096
|
-
setOpen(false);
|
|
1097
|
-
if (onClose) {
|
|
1098
|
-
onClose();
|
|
1099
|
-
}
|
|
1100
|
-
};
|
|
1101
|
-
useEffect(function () {
|
|
1102
|
-
setOpen(open);
|
|
1103
|
-
}, [open]);
|
|
1104
|
-
return (jsxs(StyledWrapper$7, __assign({ className: className, onMouseLeave: handleClose, ref: ref }, { children: [jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsx(StyledContent$1, __assign({ className: "Tooltip_content" }, { children: children })) })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
1105
|
-
});
|
|
1106
|
-
var containerCSS = css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"])));
|
|
1107
|
-
var StyledWrapper$7 = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1108
|
-
var StyledContentWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
1109
|
-
var cursor = _a.cursor;
|
|
1110
|
-
return cursor;
|
|
1111
|
-
});
|
|
1112
|
-
var StyledContent$1 = styled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1113
|
-
var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$4;
|
|
1114
|
-
|
|
1115
|
-
var ButtonSelect = forwardRef(function (props, ref) {
|
|
1116
|
-
var _a;
|
|
1117
|
-
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
1118
|
-
return (jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
|
|
1119
|
-
});
|
|
1120
|
-
var StyledInputSelect = styled(InputSelect)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"], ["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"])), theme.breakpoints.xs);
|
|
1121
|
-
var templateObject_1$c;
|
|
1122
|
-
|
|
1123
|
-
var InputSelectWithController = forwardRef(function (_a, ref) {
|
|
1124
|
-
var _b, _c;
|
|
1125
|
-
var options = _a.options, name = _a.name, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
|
|
1126
|
-
var control = useController({
|
|
1127
|
-
control: form.control,
|
|
1128
|
-
name: name,
|
|
1129
|
-
});
|
|
1130
|
-
var error = (_b = control.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
1131
|
-
var handleSelect = function (value) {
|
|
1132
|
-
var _a;
|
|
1133
|
-
if (handleChange) {
|
|
1134
|
-
handleChange(value);
|
|
1135
|
-
}
|
|
1136
|
-
if (form) {
|
|
1137
|
-
(_a = control.field) === null || _a === void 0 ? void 0 : _a.onChange({
|
|
1138
|
-
target: { value: value, name: name },
|
|
1139
|
-
type: "change",
|
|
1140
|
-
});
|
|
1141
|
-
}
|
|
1142
|
-
};
|
|
1143
|
-
return (jsx(InputSelect, __assign({ options: options, handleChange: handleSelect, error: error, name: name, value: valueProp || ((_c = control.field) === null || _c === void 0 ? void 0 : _c.value), ref: ref }, inputProps)));
|
|
1144
|
-
});
|
|
1145
|
-
|
|
1146
|
-
function InputMultiSelectOption(props) {
|
|
1147
|
-
var option = props.option, selectedValue = props.selectedValue;
|
|
1148
|
-
var selected = selectedValue.includes(option.value);
|
|
1149
|
-
var handleClick = function (e) {
|
|
1150
|
-
e.preventDefault();
|
|
1151
|
-
};
|
|
1152
|
-
return (jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsx(Checkbox, { checked: selected, label: jsx(StyledCaption, __assign({ onClick: handleClick, selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
|
|
1153
|
-
}
|
|
1154
|
-
var StyledOption = styled(Grid)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"])), function (_a) {
|
|
1155
|
-
var selected = _a.selected;
|
|
1156
|
-
return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
1157
|
-
}, theme.palette.background.light1, theme.palette.grey.seventy);
|
|
1158
|
-
var StyledCaption = styled(Caption)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n color: ", " !important;\n"], ["\n color: ", " !important;\n"])), function (_a) {
|
|
1159
|
-
var selected = _a.selected;
|
|
1160
|
-
return selected
|
|
1161
|
-
? theme.palette.grey.seventy
|
|
1162
|
-
: theme.palette.grey.fiftyP;
|
|
1163
|
-
});
|
|
1164
|
-
var templateObject_1$b, templateObject_2$8;
|
|
1165
|
-
|
|
1166
|
-
function InputMultiSelect(_a) {
|
|
1167
|
-
var _b, _c;
|
|
1168
|
-
var options = _a.options, name = _a.name, handleChange = _a.handleChange, form = _a.form, valueProp = _a.value, inputProps = __rest(_a, ["options", "name", "handleChange", "form", "value"]);
|
|
1169
|
-
var control = form
|
|
1170
|
-
? useController({
|
|
1171
|
-
control: form.control,
|
|
1172
|
-
name: name,
|
|
1173
|
-
})
|
|
1174
|
-
: null;
|
|
1175
|
-
var _d = useState(valueProp || ((_b = control === null || control === void 0 ? void 0 : control.field) === null || _b === void 0 ? void 0 : _b.value) || []), value = _d[0], setValue = _d[1];
|
|
1176
|
-
var selectedLabel = options
|
|
1177
|
-
.filter(function (option) { return value.includes(option.value); })
|
|
1178
|
-
.map(function (option) { return option.label; })
|
|
1179
|
-
.join(", ");
|
|
1180
|
-
var error = (_c = control === null || control === void 0 ? void 0 : control.fieldState.error) === null || _c === void 0 ? void 0 : _c.message;
|
|
1181
|
-
useEffect(function () {
|
|
1182
|
-
var _a;
|
|
1183
|
-
if (form) {
|
|
1184
|
-
(_a = control === null || control === void 0 ? void 0 : control.field) === null || _a === void 0 ? void 0 : _a.onChange({
|
|
1185
|
-
target: { value: value, name: name },
|
|
1186
|
-
type: "change",
|
|
1187
|
-
});
|
|
1188
|
-
}
|
|
1189
|
-
}, [value]);
|
|
1190
|
-
var handleSelect = function (option) {
|
|
1191
|
-
if (value.includes(option.value)) {
|
|
1192
|
-
setValue(function (prev) { return prev.filter(function (elem) { return elem !== option.value; }); });
|
|
1193
|
-
}
|
|
1194
|
-
else {
|
|
1195
|
-
setValue(function (prev) { return __spreadArray(__spreadArray([], prev, true), [option.value], false); });
|
|
1196
|
-
}
|
|
1197
|
-
if (handleChange) {
|
|
1198
|
-
handleChange(option.value);
|
|
1199
|
-
}
|
|
1200
|
-
};
|
|
1201
|
-
return (jsx(InputSelectBase, __assign({ options: options, handleChange: handleSelect, error: error, selectedLabel: selectedLabel, selectedValue: value, name: name, isLabelShrink: !!selectedLabel, renderOption: function (option, selectedValue) { return (jsx(InputMultiSelectOption, { option: option, selectedValue: selectedValue })); } }, inputProps)));
|
|
1202
|
-
}
|
|
1203
|
-
|
|
1204
|
-
var RadioButtons = forwardRef(function (_a, ref) {
|
|
1205
|
-
var options = _a.options, disabled = _a.disabled, direction = _a.direction, defaultValue = _a.defaultValue, valueOfProps = _a.value, onChange = _a.onChange, isSquare = _a.isSquare, otherProps = __rest(_a, ["options", "disabled", "direction", "defaultValue", "value", "onChange", "isSquare"]);
|
|
1206
|
-
var _b = useState(defaultValue || valueOfProps || options[0].value), value = _b[0], setValue = _b[1];
|
|
1207
|
-
var handleChange = function (e) {
|
|
1208
|
-
var radioValue = e.target.value;
|
|
1209
|
-
setValue(radioValue);
|
|
1210
|
-
if (onChange) {
|
|
1211
|
-
onChange(e, radioValue);
|
|
1212
|
-
}
|
|
1213
|
-
};
|
|
1214
|
-
var handleClick = function (e) {
|
|
1215
|
-
var radioValue = e.target.value;
|
|
1216
|
-
if (String(value) === String(radioValue)) {
|
|
1217
|
-
setValue(null);
|
|
1218
|
-
if (onChange) {
|
|
1219
|
-
onChange(e, null);
|
|
1220
|
-
}
|
|
1221
|
-
}
|
|
1222
|
-
};
|
|
1223
|
-
useEffect(function () {
|
|
1224
|
-
if (valueOfProps) {
|
|
1225
|
-
setValue(valueOfProps);
|
|
1226
|
-
}
|
|
1227
|
-
}, [valueOfProps]);
|
|
1228
|
-
return (jsx(Grid, __assign({ container: true, direction: direction, ref: ref }, { children: options.map(function (option) { return (jsx(Radio, __assign({ value: option.value, label: option.label, disabled: Boolean(disabled), checked: String(value) === String(option.value), isSquare: isSquare, onClick: handleClick, onChange: handleChange }, otherProps), option.value)); }) })));
|
|
1229
|
-
});
|
|
1230
|
-
RadioButtons.defaultProps = {
|
|
1231
|
-
disabled: false,
|
|
1232
|
-
direction: "row",
|
|
1233
|
-
fullWidth: false,
|
|
1234
|
-
defaultValue: undefined,
|
|
1235
|
-
};
|
|
1236
|
-
RadioButtons.displayName = "RadioButtons";
|
|
1237
|
-
|
|
1238
|
-
function RadioButtonsWithController(_a) {
|
|
1239
|
-
var form = _a.form, name = _a.name, defaultValue = _a.defaultValue, otherProps = __rest(_a, ["form", "name", "defaultValue"]);
|
|
1240
|
-
var handleChange = function (e, value, field) {
|
|
1241
|
-
field.onChange({ target: { value: value, name: name }, type: "change" });
|
|
1242
|
-
if (otherProps.onChange) {
|
|
1243
|
-
otherProps.onChange(e, value);
|
|
1244
|
-
}
|
|
1245
|
-
};
|
|
1246
|
-
useEffect(function () {
|
|
1247
|
-
if (!form.getValues(name) && !defaultValue) {
|
|
1248
|
-
form.setValue(name, otherProps.options[0].value);
|
|
1249
|
-
}
|
|
1250
|
-
}, []);
|
|
1251
|
-
return (jsx(Controller, { control: form.control, name: String(name), render: function (_a) {
|
|
1252
|
-
var field = _a.field;
|
|
1253
|
-
return (jsx(RadioButtons, __assign({}, otherProps, field, { defaultValue: defaultValue, onChange: function (e, value) {
|
|
1254
|
-
return handleChange(e, value, field);
|
|
1255
|
-
} })));
|
|
1256
|
-
} }));
|
|
1257
|
-
}
|
|
1258
|
-
|
|
1259
|
-
function RadioGroupWithLabel(props) {
|
|
1260
|
-
var _a;
|
|
1261
|
-
var title = props.title, className = props.className, direction = props.direction, form = props.form, name = props.name, otherProps = __rest(props, ["title", "className", "direction", "form", "name"]);
|
|
1262
|
-
var fieldState = useController({
|
|
1263
|
-
control: form.control,
|
|
1264
|
-
name: name,
|
|
1265
|
-
}).fieldState;
|
|
1266
|
-
var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1267
|
-
return (jsxs(StyledContainer, { children: [jsxs(StyledWrapper$6, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsx(Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsx(InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1268
|
-
}
|
|
1269
|
-
var StyledContainer = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1270
|
-
var columnDirectionCSS = function (_a) {
|
|
1271
|
-
var hasError = _a.hasError;
|
|
1272
|
-
return css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"], ["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
|
|
1273
|
-
};
|
|
1274
|
-
var rowDirectionCSS = function (_a) {
|
|
1275
|
-
var hasError = _a.hasError, withTitle = _a.withTitle;
|
|
1276
|
-
return css(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n"], ["\n padding: ", ";\n border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "8px 8px 0 0" : "66px");
|
|
1277
|
-
};
|
|
1278
|
-
var StyledWrapper$6 = styled(Grid, {
|
|
1279
|
-
shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
|
|
1280
|
-
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n ", ";\n @media (max-width: ", "px) {\n flex-direction: column;\n align-items: flex-start;\n border-radius: 8px;\n padding: 8px 15px;\n }\n"], ["\n border: 1px solid\n ", ";\n ", ";\n @media (max-width: ", "px) {\n flex-direction: column;\n align-items: flex-start;\n border-radius: 8px;\n padding: 8px 15px;\n }\n"])), function (_a) {
|
|
1281
|
-
var hasError = _a.hasError;
|
|
1282
|
-
return hasError ? theme.palette.red.fiftyP : theme.palette.grey.fifteenB;
|
|
1283
|
-
}, function (_a) {
|
|
1284
|
-
var direction = _a.direction, hasError = _a.hasError, withTitle = _a.withTitle;
|
|
1285
|
-
return direction === "column"
|
|
1286
|
-
? columnDirectionCSS({ hasError: hasError })
|
|
1287
|
-
: rowDirectionCSS({ hasError: hasError, withTitle: withTitle });
|
|
1288
|
-
}, theme.breakpoints.sm);
|
|
1289
|
-
var StyledTitle = styled(Caption)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n margin-bottom: ", "px;\n @media (max-width: ", "px) {\n margin-bottom: 8px;\n }\n"], ["\n margin-bottom: ", "px;\n @media (max-width: ", "px) {\n margin-bottom: 8px;\n }\n"])), function (_a) {
|
|
1290
|
-
var direction = _a.direction;
|
|
1291
|
-
return (direction === "vertical" ? 8 : 0);
|
|
1292
|
-
}, theme.breakpoints.sm);
|
|
1293
|
-
var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$3, templateObject_5$2;
|
|
1294
|
-
|
|
1295
|
-
var Loading = forwardRef(function (_a) {
|
|
1296
|
-
var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
|
|
1297
|
-
return (jsx(StyledWrapper$5, __assign({ container: true, alignItems: "center", justify: "center", className: className, height: height }, { children: jsx(StyledCircularProgress, __assign({}, otherProps)) })));
|
|
1298
|
-
});
|
|
1299
|
-
Loading.defaultProps = {
|
|
1300
|
-
height: "adaptive",
|
|
1301
|
-
};
|
|
1302
|
-
var StyledCircularProgress = styled(CircularProgress)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), theme.palette.brand.main);
|
|
1303
|
-
var StyledWrapper$5 = styled(Grid, {
|
|
1304
|
-
shouldForwardProp: function (prop) { return prop !== "height"; },
|
|
1305
|
-
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), function (_a) {
|
|
1306
|
-
var height = _a.height;
|
|
1307
|
-
return height;
|
|
1308
|
-
});
|
|
1309
|
-
var templateObject_1$9, templateObject_2$6;
|
|
1310
|
-
|
|
1311
|
-
function CreatingEntityFromDropdown(_a) {
|
|
1312
|
-
var creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal;
|
|
1313
|
-
var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
|
|
1314
|
-
if (!creatingLabel || !renderCreatingModal) {
|
|
1315
|
-
return null;
|
|
1316
|
-
}
|
|
1317
|
-
var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
|
|
1318
|
-
return (jsxs(Fragment$1, { children: [jsxs(StyledWrapper$4, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsx(StyledPlusIcon, { width: 12, height: 12 }), jsx(Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
|
|
1319
|
-
open: isModalOpen,
|
|
1320
|
-
handleClose: handleModalClose,
|
|
1321
|
-
}) }))] }));
|
|
1322
|
-
}
|
|
1323
|
-
var StyledWrapper$4 = styled(Grid)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"], ["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"])), theme.palette.grey.fifteenB);
|
|
1324
|
-
var StyledPlusIcon = styled(PlusIcon)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"], ["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"])), theme.palette.grey.fiftyP);
|
|
1325
|
-
var StyledModalWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject([""], [""])));
|
|
1326
|
-
var templateObject_1$8, templateObject_2$5, templateObject_3$3;
|
|
1327
|
-
|
|
1328
|
-
var AutocompleteOption$1 = function (props) {
|
|
1329
|
-
var option = props.option, renderOption = props.renderOption, handleSelect = props.handleSelect, index = props.index;
|
|
1330
|
-
var handleClick = function () {
|
|
1331
|
-
handleSelect(option);
|
|
1332
|
-
};
|
|
1333
|
-
return (jsx(StyledOptionWrapper, __assign({ item: true, xs: 12, onClick: handleClick, "data-testid": "autocomplete_option_".concat(index) }, { children: renderOption(option) })));
|
|
1334
|
-
};
|
|
1335
|
-
var StyledOptionWrapper = styled(Grid)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1336
|
-
var templateObject_1$7;
|
|
1337
|
-
|
|
1338
|
-
function AutocompleteDropdown(props) {
|
|
1339
|
-
var options = props.options, renderOption = props.renderOption, creatingLabel = props.creatingLabel, renderCreatingModal = props.renderCreatingModal;
|
|
1340
|
-
var inputRef = props.inputRef, isOpenDropdown = props.isOpenDropdown, isLoading = props.isLoading, input = props.input;
|
|
1341
|
-
var handleCloseDropdown = props.handleCloseDropdown, handleSelect = props.handleSelect, handleScrollEnd = props.handleScrollEnd;
|
|
1342
|
-
var handleScroll = function (e) {
|
|
1343
|
-
if (e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight) <
|
|
1344
|
-
100) {
|
|
1345
|
-
if (handleScrollEnd)
|
|
1346
|
-
handleScrollEnd();
|
|
1347
|
-
}
|
|
1348
|
-
};
|
|
1349
|
-
return (jsxs(StyledDropdown, __assign({ input: input, buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsx(AutocompleteOption$1, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsx(StyledLoading, { height: "auto" })] })));
|
|
1350
|
-
}
|
|
1351
|
-
var StyledDropdown = styled(InputDropdown)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
1352
|
-
var StyledLoading = styled(Loading)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n position: sticky;\n bottom: 30px;\n"], ["\n position: sticky;\n bottom: 30px;\n"])));
|
|
1353
|
-
var templateObject_1$6, templateObject_2$4;
|
|
1354
|
-
|
|
1355
|
-
function InputWithAutocomplete(_a) {
|
|
1356
|
-
var _b;
|
|
1357
|
-
var renderOption = _a.renderOption, options = _a.options, name = _a.name, hideName = _a.hideName, form = _a.form, isLoading = _a.isLoading, onSelectItem = _a.onSelectItem, handleScrollEnd = _a.handleScrollEnd, onSearchItem = _a.onSearchItem, isLabelLoading = _a.isLabelLoading, disabled = _a.disabled, creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal, endComponent = _a.endComponent, inputRefProps = _a.inputRef, onOpen = _a.onOpen, inputProps = __rest(_a, ["renderOption", "options", "name", "hideName", "form", "isLoading", "onSelectItem", "handleScrollEnd", "onSearchItem", "isLabelLoading", "disabled", "creatingLabel", "renderCreatingModal", "endComponent", "inputRef", "onOpen"]);
|
|
1358
|
-
var _c = useState(false), isOpenDropdown = _c[0], setIsOpenDropDown = _c[1];
|
|
1359
|
-
var inputRef = useRef(null);
|
|
1360
|
-
if (hideName)
|
|
1361
|
-
form.register(hideName);
|
|
1362
|
-
var handleOpenDropdown = function () {
|
|
1363
|
-
if (!disabled)
|
|
1364
|
-
setIsOpenDropDown(true);
|
|
1365
|
-
};
|
|
1366
|
-
var handleCloseDropdown = function () {
|
|
1367
|
-
setIsOpenDropDown(false);
|
|
1368
|
-
};
|
|
1369
|
-
var handleDropdownToggle = function () {
|
|
1370
|
-
setIsOpenDropDown(function (prev) { return !prev; });
|
|
1371
|
-
};
|
|
1372
|
-
var handleSelect = function (option) {
|
|
1373
|
-
var _a;
|
|
1374
|
-
onSelectItem(option);
|
|
1375
|
-
handleCloseDropdown();
|
|
1376
|
-
var error = (_a = form.getFieldState(name).error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1377
|
-
if (error) {
|
|
1378
|
-
form.clearErrors(name);
|
|
1379
|
-
}
|
|
1380
|
-
};
|
|
1381
|
-
var handleSearch = function (e) {
|
|
1382
|
-
if (onSearchItem) {
|
|
1383
|
-
onSearchItem(e.target.value);
|
|
1384
|
-
if (hideName)
|
|
1385
|
-
form.setValue(hideName, null);
|
|
1386
|
-
}
|
|
1387
|
-
if (!e.target.value && hideName) {
|
|
1388
|
-
if (hideName)
|
|
1389
|
-
form.setValue(hideName, null);
|
|
1390
|
-
form.setValue(name, null);
|
|
1391
|
-
onSelectItem(null);
|
|
1392
|
-
}
|
|
1393
|
-
handleOpenDropdown();
|
|
1394
|
-
};
|
|
1395
|
-
useEffect(function () {
|
|
1396
|
-
if (onOpen)
|
|
1397
|
-
onOpen(isOpenDropdown);
|
|
1398
|
-
}, [isOpenDropdown]);
|
|
1399
|
-
var forwardRef = useForkRef(inputRef, inputRefProps);
|
|
1400
|
-
return (jsxs$1(StyledWrapper$3, { children: [isLabelLoading && (jsx$1(StyledLoadingWrapper, { children: jsx$1(Loading, { height: "100%" }) })), jsx$1(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
|
|
1401
|
-
current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
1402
|
-
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal, input: jsx$1(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxs$1(Grid, __assign({ container: true, alignItems: "center", onClick: handleDropdownToggle }, { children: [jsx$1(Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
|
|
1403
|
-
(!disabled && (jsx$1(StyledIcon, { width: 12, height: 13, css: [
|
|
1404
|
-
isOpenDropdown && { transform: "rotate(180deg)" },
|
|
1405
|
-
] })))] }))) })) })] }));
|
|
1406
|
-
}
|
|
1407
|
-
var StyledLoadingWrapper = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"])));
|
|
1408
|
-
var StyledWrapper$3 = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1409
|
-
var StyledInput$2 = styled(InputWithController)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
1410
|
-
var isDropdownOpen = _a.isDropdownOpen;
|
|
1411
|
-
return (isDropdownOpen ? 0 : 1);
|
|
1412
|
-
});
|
|
1413
|
-
var StyledIcon = styled(HalfArrowIcon)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n transition: all ease-out 0.3s;\n cursor: pointer;\n"], ["\n transition: all ease-out 0.3s;\n cursor: pointer;\n"])));
|
|
1414
|
-
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
|
1415
|
-
|
|
1416
|
-
function AutocompleteOption(_a) {
|
|
1417
|
-
var label = _a.label;
|
|
1418
|
-
return (jsx(StyledWrapper$2, { children: jsx(Caption, __assign({ size: "s", weight: 500 }, { children: label })) }));
|
|
1419
|
-
}
|
|
1420
|
-
var StyledWrapper$2 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ", ";\n },\n"], ["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ", ";\n },\n"])), theme.palette.background.light2);
|
|
1421
|
-
var templateObject_1$4;
|
|
1422
|
-
|
|
1423
|
-
function Link(props) {
|
|
1424
|
-
var href = props.href, withoutRoute = props.withoutRoute, stopPropagation = props.stopPropagation, openInNewWindow = props.openInNewWindow, other = __rest(props, ["href", "withoutRoute", "stopPropagation", "openInNewWindow"]);
|
|
1425
|
-
var navigate = useNavigate();
|
|
1426
|
-
var handleClick = function (e) {
|
|
1427
|
-
if (stopPropagation)
|
|
1428
|
-
e.stopPropagation();
|
|
1429
|
-
e.preventDefault();
|
|
1430
|
-
if (href) {
|
|
1431
|
-
if (withoutRoute)
|
|
1432
|
-
updateQueryParams(href);
|
|
1433
|
-
else if (openInNewWindow)
|
|
1434
|
-
window.open(href, "_blank");
|
|
1435
|
-
else
|
|
1436
|
-
navigate(href);
|
|
1437
|
-
}
|
|
1438
|
-
};
|
|
1439
|
-
return (jsx(StyledLink, __assign({ href: href || undefined, onClick: handleClick }, other)));
|
|
1440
|
-
}
|
|
1441
|
-
var StyledLink = styled.a(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n text-decoration: none;\n color: inherit;\n max-width: 100%;\n width: 100%;\n"], ["\n text-decoration: none;\n color: inherit;\n max-width: 100%;\n width: 100%;\n"])));
|
|
1442
|
-
var templateObject_1$3;
|
|
1443
|
-
|
|
1444
|
-
function FileItem(_a) {
|
|
1445
|
-
var _b, _c;
|
|
1446
|
-
var file = _a.file, onDelete = _a.onDelete, onChange = _a.onChange, index = _a.index, selectedFile = _a.selectedFile, setSelectedFile = _a.setSelectedFile, limitTitle = _a.limitTitle, icon = _a.icon, subtitle = _a.subtitle, disabled = _a.disabled, error = _a.error, className = _a.className, otherProps = __rest(_a, ["file", "onDelete", "onChange", "index", "selectedFile", "setSelectedFile", "limitTitle", "icon", "subtitle", "disabled", "error", "className"]);
|
|
1447
|
-
var formattedFileName = String((_c = (file.title || file.name || ((_b = file.file) === null || _b === void 0 ? void 0 : _b.name))) === null || _c === void 0 ? void 0 : _c.replace(/\.[^/.]+$/, ""));
|
|
1448
|
-
var _d = useState(formattedFileName), title = _d[0], setTitle = _d[1];
|
|
1449
|
-
var _e = useState(false), isEditing = _e[0], setIsEditing = _e[1];
|
|
1450
|
-
var inputRef = useRef(null);
|
|
1451
|
-
useEffect(function () {
|
|
1452
|
-
var _a;
|
|
1453
|
-
if (isEditing) {
|
|
1454
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1455
|
-
}
|
|
1456
|
-
if (!isEditing && formattedFileName !== title && onChange) {
|
|
1457
|
-
onChange(title, index);
|
|
1458
|
-
}
|
|
1459
|
-
}, [isEditing]);
|
|
1460
|
-
var toggleEdit = function () {
|
|
1461
|
-
setIsEditing(function (prev) { return !prev; });
|
|
1462
|
-
};
|
|
1463
|
-
var handleBlur = function () {
|
|
1464
|
-
setIsEditing(false);
|
|
1465
|
-
};
|
|
1466
|
-
var handleChange = function (e) {
|
|
1467
|
-
setTitle(e.target.value);
|
|
1468
|
-
};
|
|
1469
|
-
var handleDelete = function () {
|
|
1470
|
-
var _a;
|
|
1471
|
-
if (onDelete) {
|
|
1472
|
-
onDelete((_a = file.index) !== null && _a !== void 0 ? _a : 1, Number(index));
|
|
1473
|
-
}
|
|
1474
|
-
};
|
|
1475
|
-
var handleClick = function () {
|
|
1476
|
-
if (setSelectedFile) {
|
|
1477
|
-
setSelectedFile(index !== null && index !== void 0 ? index : 1);
|
|
1478
|
-
}
|
|
1479
|
-
};
|
|
1480
|
-
return (jsxs(Fragment$1, { children: [jsxs(FileWrapper, __assign({ selected: (selectedFile !== null && selectedFile !== void 0 ? selectedFile : -1) === index, error: (limitTitle && title.length > limitTitle) || !!error, onClick: handleClick, disabled: !!disabled, className: "FileWrapper ".concat(className || "") }, otherProps, { children: [jsx(FileIconWrapper, __assign({ className: "FileIcon_wrapper" }, { children: icon || jsx(FileIcon, {}) })), jsxs(ContentWrapper, __assign({ className: "FileContent_wrapper" }, { children: [jsxs(InputWrapper, { children: [jsx(Link, __assign({ href: file.url, openInNewWindow: true }, { children: jsx(InputPlaceholder, { children: title }) })), jsx(StyledInput$1, { "data-testid": "file_name", ref: inputRef, disabled: !isEditing, value: title, onChange: handleChange, onBlur: handleBlur, maxLength: 100 })] }), subtitle ||
|
|
1481
|
-
(String(file.size) && (jsxs(Caption, __assign({ "data-testid": "file_size", size: "xs", color: "fiftyP" }, { children: [Number(file.size), " mb"] }))))] })), jsxs(ButtonWrapper, __assign({ className: "FileButtons_wrapper" }, { children: [!disabled && onChange && (jsx(Button, __assign({ isCircle: true, "data-testid": "edit_file_name_btn", size: "xs", variant: "transparentLight", onClick: toggleEdit }, { children: isEditing ? jsx(CheckIcon, {}) : jsx(EditIcon, { width: 18, height: 18 }) }))), onDelete && !disabled && (jsx(Button, __assign({ isCircle: true, "data-testid": "delete_file_btn", size: "xs", variant: "transparentLight", onClick: handleDelete }, { children: jsx(TrashIcon, { width: 18, height: 18 }) })))] }))] })), ((limitTitle && title.length > limitTitle) || error) && (jsx(Box, __assign({ mb: 1 }, { children: jsx(Caption, __assign({ size: "xs", colorGroup: "red", weight: 500 }, { children: error ||
|
|
1482
|
-
"File upload error. The number of characters in the file name should not exceed 100" })) })))] }));
|
|
1483
|
-
}
|
|
1484
|
-
FileItem.defaultProps = {
|
|
1485
|
-
limitTitle: 100,
|
|
1486
|
-
};
|
|
1487
|
-
var errorCSS = function (_a) {
|
|
1488
|
-
var error = _a.error;
|
|
1489
|
-
return error && css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), theme.palette.red.seventy);
|
|
1490
|
-
};
|
|
1491
|
-
var disabledCSS = function (_a) {
|
|
1492
|
-
var disabled = _a.disabled;
|
|
1493
|
-
return disabled && css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), theme.palette.background.light1);
|
|
1494
|
-
};
|
|
1495
|
-
var FileWrapper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n padding: 10px 12px;\n border: 1px solid\n ", ";\n display: flex;\n margin-bottom: 8px;\n cursor: pointer;\n background: white;\n ", ";\n ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n width: 100%;\n border-radius: 12px;\n padding: 10px 12px;\n border: 1px solid\n ", ";\n display: flex;\n margin-bottom: 8px;\n cursor: pointer;\n background: white;\n ", ";\n ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"])), function (_a) {
|
|
1496
|
-
var selected = _a.selected;
|
|
1497
|
-
return selected ? theme.palette.brand.main : theme.palette.grey.fifteenB;
|
|
1498
|
-
}, disabledCSS, errorCSS);
|
|
1499
|
-
var FileIconWrapper = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin-right: 16px;\n min-height: 32px;\n width: 32px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: flex-start;\n"], ["\n margin-right: 16px;\n min-height: 32px;\n width: 32px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: flex-start;\n"])), theme.palette.brand.light);
|
|
1500
|
-
var ButtonWrapper = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-left: auto;\n padding-left: 8px;\n display: flex;\n align-items: center;\n align-self: flex-start;\n svg {\n path {\n fill: ", ";\n }\n }\n"], ["\n margin-left: auto;\n padding-left: 8px;\n display: flex;\n align-items: center;\n align-self: flex-start;\n svg {\n path {\n fill: ", ";\n }\n }\n"])), theme.palette.grey.thirty);
|
|
1501
|
-
var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: calc(100% - 120px);\n min-height: 34px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n & > p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"], ["\n width: calc(100% - 120px);\n min-height: 34px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n & > p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])));
|
|
1502
|
-
var StyledInput$1 = styled.textarea(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: none;\n font-size: 14px;\n position: absolute;\n top: 0;\n left: 0;\n font-weight: 500;\n background: transparent;\n padding: 0;\n color: ", ";\n caret-color: ", ";\n height: -webkit-fill-available;\n overflow: hidden;\n resize: none;\n width: 100%;\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n pointer-events: none;\n }\n"], ["\n border: none;\n font-size: 14px;\n position: absolute;\n top: 0;\n left: 0;\n font-weight: 500;\n background: transparent;\n padding: 0;\n color: ", ";\n caret-color: ", ";\n height: -webkit-fill-available;\n overflow: hidden;\n resize: none;\n width: 100%;\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n pointer-events: none;\n }\n"])), theme.palette.grey.seventy, theme.palette.brand.main);
|
|
1503
|
-
var InputPlaceholder = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n word-break: break-word;\n max-width: 100%;\n color: transparent;\n min-height: 17px;\n display: inline-block;\n white-space: nowrap;\n"], ["\n font-size: 14px;\n font-weight: 500;\n word-break: break-word;\n max-width: 100%;\n color: transparent;\n min-height: 17px;\n display: inline-block;\n white-space: nowrap;\n"])));
|
|
1504
|
-
var InputWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n max-width: 100%;\n height: auto;\n"], ["\n position: relative;\n width: fit-content;\n max-width: 100%;\n height: auto;\n"])));
|
|
1505
|
-
var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
1506
|
-
|
|
1507
|
-
var limitTitle = 100;
|
|
1508
|
-
var InputFile = forwardRef(function (props, ref) {
|
|
1509
|
-
var _a;
|
|
1510
|
-
var form = props.form, name = props.name, parentName = props.parentName, label = props.label, disabled = props.disabled, withEdit = props.withEdit, fileName = props.fileName, onChange = props.onChange, isRequired = props.isRequired, uploadLabel = props.uploadLabel, toBigTitleMessage = props.toBigTitleMessage, otherProps = __rest(props, ["form", "name", "parentName", "label", "disabled", "withEdit", "fileName", "onChange", "isRequired", "uploadLabel", "toBigTitleMessage"]);
|
|
1511
|
-
var _b = useState(false), mounted = _b[0], setMounted = _b[1];
|
|
1512
|
-
var _c = useState(), file = _c[0], setFile = _c[1];
|
|
1513
|
-
var _d = useState(""), defaultFileURL = _d[0], setDefaultFileURL = _d[1];
|
|
1514
|
-
var inputRef = useRef(null);
|
|
1515
|
-
var _e = useController({
|
|
1516
|
-
control: form.control,
|
|
1517
|
-
name: name,
|
|
1518
|
-
}), field = _e.field, fieldState = _e.fieldState;
|
|
1519
|
-
var parentField = useController({
|
|
1520
|
-
control: form.control,
|
|
1521
|
-
name: parentName || name,
|
|
1522
|
-
}).field;
|
|
1523
|
-
var fileExtension = file === null || file === void 0 ? void 0 : file.name.split(".").pop();
|
|
1524
|
-
var formattedFile = file && "url" in file
|
|
1525
|
-
? file
|
|
1526
|
-
: {
|
|
1527
|
-
file: file,
|
|
1528
|
-
url: file ? URL.createObjectURL(file) : defaultFileURL,
|
|
1529
|
-
size: file
|
|
1530
|
-
? Math.round((file.size / (1024 * 1024)) * 100) / 100
|
|
1531
|
-
: null,
|
|
1532
|
-
name: fileName ? "".concat(fileName, ".").concat(fileExtension) : file === null || file === void 0 ? void 0 : file.name,
|
|
1533
|
-
};
|
|
1534
|
-
var error = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1535
|
-
useEffect(function () {
|
|
1536
|
-
if (typeof field.value === "string") {
|
|
1537
|
-
setDefaultFileURL(field.value);
|
|
1538
|
-
}
|
|
1539
|
-
if (typeof field.value === "object") {
|
|
1540
|
-
setFile(field.value);
|
|
1541
|
-
}
|
|
1542
|
-
setMounted(true);
|
|
1543
|
-
}, []);
|
|
1544
|
-
useEffect(function () {
|
|
1545
|
-
var _a;
|
|
1546
|
-
var toBigTitle = Number((fileName === null || fileName === void 0 ? void 0 : fileName.length) || ((_a = file === null || file === void 0 ? void 0 : file.name) === null || _a === void 0 ? void 0 : _a.length)) > limitTitle;
|
|
1547
|
-
if (mounted && !defaultFileURL) {
|
|
1548
|
-
field.onChange({ target: { value: file, name: name }, type: "change" });
|
|
1549
|
-
}
|
|
1550
|
-
if (toBigTitle) {
|
|
1551
|
-
form.setError(name, {
|
|
1552
|
-
type: "custom",
|
|
1553
|
-
message: toBigTitleMessage ||
|
|
1554
|
-
"The file name must be less than 100 characters",
|
|
1555
|
-
});
|
|
1556
|
-
}
|
|
1557
|
-
else {
|
|
1558
|
-
form.clearErrors(name);
|
|
1559
|
-
}
|
|
1560
|
-
}, [file]);
|
|
1561
|
-
var handleChange = function (e) {
|
|
1562
|
-
if (e.target.files && e.target.files[0]) {
|
|
1563
|
-
var newFile = e.target.files[0];
|
|
1564
|
-
setFile(newFile);
|
|
1565
|
-
if (onChange)
|
|
1566
|
-
onChange(newFile);
|
|
1567
|
-
}
|
|
1568
|
-
else {
|
|
1569
|
-
setFile(undefined);
|
|
1570
|
-
}
|
|
1571
|
-
};
|
|
1572
|
-
var handleClick = function () {
|
|
1573
|
-
if (inputRef.current) {
|
|
1574
|
-
inputRef.current.click();
|
|
1575
|
-
}
|
|
1576
|
-
};
|
|
1577
|
-
var handleDelete = function () {
|
|
1578
|
-
if (file && inputRef.current) {
|
|
1579
|
-
inputRef.current.value = "";
|
|
1580
|
-
}
|
|
1581
|
-
setFile(undefined);
|
|
1582
|
-
setDefaultFileURL("");
|
|
1583
|
-
if (parentName) {
|
|
1584
|
-
parentField.onChange({
|
|
1585
|
-
target: { value: null, name: parentName },
|
|
1586
|
-
type: "change",
|
|
1587
|
-
});
|
|
1588
|
-
}
|
|
1589
|
-
else
|
|
1590
|
-
field.onChange({ target: { value: null, name: name }, type: "change" });
|
|
1591
|
-
if (onChange)
|
|
1592
|
-
onChange(null);
|
|
1593
|
-
};
|
|
1594
|
-
var changeName = function (newName) {
|
|
1595
|
-
var currentFile = form.getValues(name);
|
|
1596
|
-
var newFileName = "".concat(newName, ".").concat(fileExtension);
|
|
1597
|
-
var newFile;
|
|
1598
|
-
if ("updateName" in currentFile) {
|
|
1599
|
-
currentFile.updateName(newName);
|
|
1600
|
-
newFile = currentFile;
|
|
1601
|
-
}
|
|
1602
|
-
else {
|
|
1603
|
-
newFile = new File([currentFile], newFileName, {
|
|
1604
|
-
type: currentFile.type,
|
|
1605
|
-
});
|
|
1606
|
-
}
|
|
1607
|
-
setFile(newFile);
|
|
1608
|
-
};
|
|
1609
|
-
var forwardedRef = function (elem) {
|
|
1610
|
-
if (ref) {
|
|
1611
|
-
// @ts-ignore
|
|
1612
|
-
// eslint-disable-next-line no-param-reassign
|
|
1613
|
-
ref.current = elem;
|
|
1614
|
-
}
|
|
1615
|
-
inputRef.current = elem;
|
|
1616
|
-
};
|
|
1617
|
-
return (jsxs(StyledWrapper$1, { children: [jsx(StyledInput, __assign({ type: "file", onInput: handleChange }, otherProps, { ref: forwardedRef })), file || defaultFileURL ? (jsx(FileItem, { file: formattedFile, onDelete: handleDelete, onChange: withEdit && changeName, error: error, disabled: disabled })) : (jsxs(Fragment$1, { children: [jsxs(StyledLabel, __assign({ error: !!error, disabled: disabled, container: true, justify: "space-between", alignItems: "center" }, { children: [jsx(StyledContent, __assign({ item: true }, { children: jsxs(Caption, __assign({ size: "s", color: "fiftyP" }, { children: [label, isRequired ? " *" : ""] })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledButton, __assign({ disabled: disabled, size: "s", onClick: handleClick }, { children: uploadLabel || "Upload" })) }))] })), error && jsx(InputMessage, { variant: "error", msg: error })] }))] }));
|
|
1618
|
-
});
|
|
1619
|
-
InputFile.defaultProps = {
|
|
1620
|
-
withEdit: true,
|
|
1621
|
-
};
|
|
1622
|
-
var StyledWrapper$1 = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1623
|
-
var StyledLabel = styled(Grid)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n border-radius: ", ";\n border: 1px solid\n ", ";\n background: ", ";\n height: 56px;\n padding: 0 8px 0 15px;\n"], ["\n border-radius: ", ";\n border: 1px solid\n ", ";\n background: ", ";\n height: 56px;\n padding: 0 8px 0 15px;\n"])), function (_a) {
|
|
1624
|
-
var error = _a.error;
|
|
1625
|
-
return (error ? "8px 8px 0 0" : "8px");
|
|
1626
|
-
}, function (_a) {
|
|
1627
|
-
var error = _a.error;
|
|
1628
|
-
return error ? theme.palette.red.fiftyP : theme.palette.grey.fifteenB;
|
|
1629
|
-
}, function (_a) {
|
|
1630
|
-
var disabled = _a.disabled;
|
|
1631
|
-
return disabled ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
1632
|
-
});
|
|
1633
|
-
var StyledInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1634
|
-
var StyledContent = styled(Grid)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n max-width: calc(100% - 32px);\n"], ["\n max-width: calc(100% - 32px);\n"])));
|
|
1635
|
-
var StyledButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 12px;\n"], ["\n border-radius: 12px;\n"])));
|
|
1636
|
-
var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
|
|
1637
|
-
|
|
1638
|
-
var CheckboxWithController = forwardRef(function (props, ref) {
|
|
1639
|
-
var form = props.form, name = props.name, label = props.label, labelProps = props.labelProps, inputProps = __rest(props, ["form", "name", "label", "labelProps"]);
|
|
1640
|
-
var handleChange = function (e, field) {
|
|
1641
|
-
field.onChange(e);
|
|
1642
|
-
if (inputProps.onChange) {
|
|
1643
|
-
inputProps.onChange(e);
|
|
1644
|
-
}
|
|
1645
|
-
};
|
|
1646
|
-
return (jsx(Controller, { control: form.control, name: String(name), render: function (_a) {
|
|
1647
|
-
var _b;
|
|
1648
|
-
var field = _a.field, fieldState = _a.fieldState;
|
|
1649
|
-
return (jsx(Checkbox, __assign({}, inputProps, field, { error: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, checked: field.value || "", onChange: function (e) {
|
|
1650
|
-
return handleChange(e, field);
|
|
1651
|
-
}, label: typeof label === "string" ? (jsx(Caption, __assign({}, labelProps, { children: label }))) : (label) })));
|
|
1652
|
-
} }));
|
|
1653
|
-
});
|
|
1654
|
-
|
|
1655
|
-
function CheckboxGroupWithTitle(_a) {
|
|
1656
|
-
var title = _a.title, options = _a.options, form = _a.form; _a.name; var otherProps = __rest(_a, ["title", "options", "form", "name"]);
|
|
1657
|
-
return (jsxs(StyledWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "s", weight: 500, color: "fiftyP" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Grid, __assign({ container: true }, { children: options.map(function (option) { return (jsx(StyledCheckbox, __assign({ name: option.name, label: jsx(Caption, __assign({ size: "s", color: "fiftyP", weight: 500 }, { children: option.label })), form: form, testId: option.name }, otherProps), option.name)); }) })) }))] })));
|
|
1658
|
-
}
|
|
1659
|
-
var StyledCheckbox = styled(CheckboxWithController)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:not(:last-child) {\n margin-right: 22px;\n }\n"], ["\n &:not(:last-child) {\n margin-right: 22px;\n }\n"])));
|
|
1660
|
-
var StyledWrapper = styled(Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 3px 16px;\n border: 1px solid ", ";\n border-radius: 66px;\n height: 40px;\n background: white;\n"], ["\n padding: 3px 16px;\n border: 1px solid ", ";\n border-radius: 66px;\n height: 40px;\n background: white;\n"])), theme.palette.grey.fifteenB);
|
|
1661
|
-
var templateObject_1, templateObject_2;
|
|
1662
|
-
|
|
1663
|
-
var settings = {
|
|
1664
|
-
mapKey: "",
|
|
1665
|
-
};
|
|
1666
|
-
var observers = [];
|
|
1667
|
-
var getSettings = function () { return (__assign({}, settings)); };
|
|
1668
|
-
var setSettings = function (newSettings) {
|
|
1669
|
-
settings = __assign(__assign({}, settings), newSettings);
|
|
1670
|
-
observers.forEach(function (observer) { return observer(settings); });
|
|
1671
|
-
};
|
|
1672
|
-
var subscribeToSettings = function (observer) {
|
|
1673
|
-
observers.push(observer);
|
|
1674
|
-
};
|
|
1675
|
-
var unsubscribeFromSettings = function (observer) {
|
|
1676
|
-
var index = observers.indexOf(observer);
|
|
1677
|
-
if (index !== -1)
|
|
1678
|
-
observers.splice(index, 1);
|
|
1679
|
-
};
|
|
1680
|
-
|
|
1681
|
-
var render = function (status) {
|
|
1682
|
-
if (status === "LOADING")
|
|
1683
|
-
return jsx(Loading, { height: "100%" });
|
|
1684
|
-
if (status === "FAILURE")
|
|
1685
|
-
return jsx("h3", { children: status });
|
|
1686
|
-
return jsx("div", {});
|
|
1687
|
-
};
|
|
1688
|
-
function MapWrapper(_a) {
|
|
1689
|
-
var children = _a.children;
|
|
1690
|
-
var _b = useState(false), isUnMounted = _b[0], setIsUnMounted = _b[1];
|
|
1691
|
-
var _c = useState("LOADING"), status = _c[0], setStatus = _c[1];
|
|
1692
|
-
var _d = useState(getSettings().mapKey), mapKey = _d[0], setMapKey = _d[1];
|
|
1693
|
-
useEffect(function () {
|
|
1694
|
-
var handleChange = function (settings) {
|
|
1695
|
-
return setMapKey(settings.mapKey);
|
|
1696
|
-
};
|
|
1697
|
-
subscribeToSettings(handleChange);
|
|
1698
|
-
return function () {
|
|
1699
|
-
unsubscribeFromSettings(handleChange);
|
|
1700
|
-
};
|
|
1701
|
-
}, []);
|
|
1702
|
-
useEffect(function () {
|
|
1703
|
-
if (!isUnMounted && mapKey) {
|
|
1704
|
-
var loader = new Loader({
|
|
1705
|
-
apiKey: mapKey,
|
|
1706
|
-
libraries: ["places"],
|
|
1707
|
-
language: "ru",
|
|
1708
|
-
});
|
|
1709
|
-
var setStatusAndExecuteCallback_1 = function (newStatus) {
|
|
1710
|
-
setStatus(newStatus);
|
|
1711
|
-
};
|
|
1712
|
-
setStatusAndExecuteCallback_1("LOADING");
|
|
1713
|
-
loader.load().then(function () { return setStatusAndExecuteCallback_1("SUCCESS"); }, function () { return setStatusAndExecuteCallback_1("FAILURE"); });
|
|
1714
|
-
}
|
|
1715
|
-
return function () { return setIsUnMounted(true); };
|
|
1716
|
-
}, [mapKey]);
|
|
1717
|
-
if (!mapKey) {
|
|
1718
|
-
return jsx("h2", { children: "Add google key" });
|
|
1719
|
-
}
|
|
1720
|
-
if (status === "SUCCESS" && children)
|
|
1721
|
-
return jsx(Fragment$1, { children: children });
|
|
1722
|
-
render(status);
|
|
1723
|
-
return jsx(Fragment$1, {});
|
|
1724
|
-
}
|
|
1725
|
-
|
|
1726
|
-
var useAddressAutocomplete = function (form, name, handlePlaceSelectProp) {
|
|
1727
|
-
var _a = useState(null), place = _a[0], setPlace = _a[1];
|
|
1728
|
-
var inputRef = useRef(null);
|
|
1729
|
-
function handlePlaceSelect(newPlace) {
|
|
1730
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
1731
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
1732
|
-
var toCoords, lat, lng, street, houseNumber, zipCode, formattedAddress;
|
|
1733
|
-
return __generator(this, function (_h) {
|
|
1734
|
-
toCoords = ((_a = newPlace.geometry) === null || _a === void 0 ? void 0 : _a.location)
|
|
1735
|
-
? {
|
|
1736
|
-
lat: newPlace.geometry.location.lat(),
|
|
1737
|
-
lng: newPlace.geometry.location.lng(),
|
|
1738
|
-
}
|
|
1739
|
-
: null;
|
|
1740
|
-
lat = toCoords === null || toCoords === void 0 ? void 0 : toCoords.lat;
|
|
1741
|
-
lng = toCoords === null || toCoords === void 0 ? void 0 : toCoords.lng;
|
|
1742
|
-
if (handlePlaceSelectProp) {
|
|
1743
|
-
handlePlaceSelectProp(lat && lng ? { lat: lat, lng: lng } : null, newPlace);
|
|
1744
|
-
}
|
|
1745
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lat"), lat, { shouldValidate: true });
|
|
1746
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lng"), lng, { shouldValidate: true });
|
|
1747
|
-
form.setValue("".concat(name, ".addressAutoComplete"), newPlace, {
|
|
1748
|
-
shouldValidate: true,
|
|
1749
|
-
});
|
|
1750
|
-
street = (_c = (_b = newPlace.address_components) === null || _b === void 0 ? void 0 : _b.find(function (elem) {
|
|
1751
|
-
return elem.types.includes("route");
|
|
1752
|
-
})) === null || _c === void 0 ? void 0 : _c.short_name;
|
|
1753
|
-
houseNumber = (_e = (_d = newPlace.address_components) === null || _d === void 0 ? void 0 : _d.find(function (elem) {
|
|
1754
|
-
return elem.types.includes("street_number");
|
|
1755
|
-
})) === null || _e === void 0 ? void 0 : _e.short_name;
|
|
1756
|
-
zipCode = (_g = (_f = newPlace.address_components) === null || _f === void 0 ? void 0 : _f.find(function (elem) {
|
|
1757
|
-
return elem.types.includes("postal_code");
|
|
1758
|
-
})) === null || _g === void 0 ? void 0 : _g.short_name;
|
|
1759
|
-
formattedAddress = newPlace.formatted_address;
|
|
1760
|
-
if (street && houseNumber) {
|
|
1761
|
-
formattedAddress = "".concat(street, ", ").concat(houseNumber);
|
|
1762
|
-
}
|
|
1763
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".address"), formattedAddress, {
|
|
1764
|
-
shouldValidate: true,
|
|
1765
|
-
});
|
|
1766
|
-
form.setValue("zipCode", zipCode);
|
|
1767
|
-
setPlace(newPlace);
|
|
1768
|
-
return [2 /*return*/];
|
|
1769
|
-
});
|
|
1770
|
-
});
|
|
1771
|
-
}
|
|
1772
|
-
var addAutocomplete = function () {
|
|
1773
|
-
if (inputRef.current) {
|
|
1774
|
-
var autoComplete_1 = new window.google.maps.places.Autocomplete(inputRef.current);
|
|
1775
|
-
autoComplete_1.addListener("place_changed", function () {
|
|
1776
|
-
var newPlace = autoComplete_1.getPlace();
|
|
1777
|
-
handlePlaceSelect(newPlace);
|
|
1778
|
-
});
|
|
1779
|
-
}
|
|
1780
|
-
};
|
|
1781
|
-
var cleanLocation = function () {
|
|
1782
|
-
setPlace(null);
|
|
1783
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lat"), null, { shouldValidate: true });
|
|
1784
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lng"), null, { shouldValidate: true });
|
|
1785
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".addressAutoComplete"), null, {
|
|
1786
|
-
shouldValidate: true,
|
|
1787
|
-
});
|
|
1788
|
-
form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".address"), "", { shouldValidate: true });
|
|
1789
|
-
};
|
|
1790
|
-
var checkMapLoaded = function () {
|
|
1791
|
-
if (!window.google || !inputRef.current) {
|
|
1792
|
-
setTimeout(checkMapLoaded, 1);
|
|
1793
|
-
}
|
|
1794
|
-
else
|
|
1795
|
-
addAutocomplete();
|
|
1796
|
-
};
|
|
1797
|
-
var setDefaultPlace = function () {
|
|
1798
|
-
var address = form.getValues("".concat(name, ".address"));
|
|
1799
|
-
var lat = form.getValues("".concat(name, ".location.lat"));
|
|
1800
|
-
var lng = form.getValues("".concat(name, ".location.lng"));
|
|
1801
|
-
var defaultPlace = {
|
|
1802
|
-
formatted_address: address,
|
|
1803
|
-
geometry: {
|
|
1804
|
-
location: { lat: lat, lng: lng },
|
|
1805
|
-
},
|
|
1806
|
-
};
|
|
1807
|
-
if (handlePlaceSelectProp) {
|
|
1808
|
-
handlePlaceSelectProp(lat && lng ? { lat: lat, lng: lng } : null, null);
|
|
1809
|
-
}
|
|
1810
|
-
if (address && lat && lng)
|
|
1811
|
-
setPlace(defaultPlace);
|
|
1812
|
-
};
|
|
1813
|
-
useEffect(function () {
|
|
1814
|
-
checkMapLoaded();
|
|
1815
|
-
setDefaultPlace();
|
|
1816
|
-
}, []);
|
|
1817
|
-
return { inputRef: inputRef, handlePlaceSelect: handlePlaceSelect, place: place, cleanLocation: cleanLocation };
|
|
1818
|
-
};
|
|
1819
|
-
|
|
1820
|
-
function InputWithAddressAutocomplete(_a) {
|
|
1821
|
-
var form = _a.form, name = _a.name, handlePlaceSelect = _a.handlePlaceSelect, inputProps = __rest(_a, ["form", "name", "handlePlaceSelect"]);
|
|
1822
|
-
var inputRef = useAddressAutocomplete(form, name, handlePlaceSelect).inputRef;
|
|
1823
|
-
return (jsx(MapWrapper, { children: jsx(InputWithController, __assign({ name: "".concat(name, ".address"), form: form, ref: inputRef, placeholder: "" }, inputProps)) }));
|
|
1824
|
-
}
|
|
1825
|
-
InputWithAddressAutocomplete.defaultProps = {
|
|
1826
|
-
label: "Address",
|
|
1827
|
-
};
|
|
1828
|
-
|
|
1829
|
-
var DependentInput = function (props) {
|
|
1830
|
-
var dependentInputName = props.dependentInputName, form = props.form, disabled = props.disabled, Input = props.Input, other = __rest(props, ["dependentInputName", "form", "disabled", "Input"]);
|
|
1831
|
-
var dependentInputValue = useWatch({
|
|
1832
|
-
control: form.control,
|
|
1833
|
-
name: dependentInputName,
|
|
1834
|
-
});
|
|
1835
|
-
var inputProps = __assign({ form: form, disabled: disabled || !dependentInputValue }, other);
|
|
1836
|
-
return Input ? (jsx(Input, __assign({}, inputProps))) : (jsx(InputWithController, __assign({}, inputProps)));
|
|
1837
|
-
};
|
|
1838
|
-
|
|
1839
|
-
var getVisibility = function (_a) {
|
|
1840
|
-
var landlord = _a.landlord, tenant = _a.tenant;
|
|
1841
|
-
if (landlord && tenant)
|
|
1842
|
-
return "everybody";
|
|
1843
|
-
if (landlord)
|
|
1844
|
-
return "landlord";
|
|
1845
|
-
if (tenant)
|
|
1846
|
-
return "tenant";
|
|
1847
|
-
return "nobody";
|
|
1848
|
-
};
|
|
1849
|
-
var getVisibilitySettings = function (visibility) {
|
|
1850
|
-
switch (visibility) {
|
|
1851
|
-
case "everybody":
|
|
1852
|
-
return { tenant: true, landlord: true };
|
|
1853
|
-
case "landlord":
|
|
1854
|
-
return { tenant: false, landlord: true };
|
|
1855
|
-
case "tenant":
|
|
1856
|
-
return { tenant: true, landlord: false };
|
|
1857
|
-
default:
|
|
1858
|
-
return { tenant: false, landlord: false };
|
|
1859
|
-
}
|
|
1860
|
-
};
|
|
1861
|
-
|
|
1862
|
-
export { AutocompleteOption, Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, CheckboxGroupWithTitle, CheckboxWithController, DependentInput, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputFile, InputForDatepicker, InputMultiSelect, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputSelectWithController, InputTextAreaMobile, InputWithAddressAutocomplete, InputWithAutocomplete, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, Loading, MapWrapper, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, RadioButtons, RadioButtonsWithController, RadioGroupWithLabel, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar, getFormError, getFormValue, getSettings, getVisibility, getVisibilitySettings, setSettings, shortMonths, subscribeToSettings, unsubscribeFromSettings, useAddressAutocomplete };
|
|
1863
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import"react-datepicker/dist/react-datepicker.css";import{jsx as n,jsxs as e,Fragment as t}from"@emotion/react/jsx-runtime";import r from"@emotion/styled";import{css as i,Global as a}from"@emotion/react";import*as o from"react";import{forwardRef as l,useRef as d,useEffect as c,useState as p}from"react";import{jsx as u,jsxs as s,Fragment as h}from"react/jsx-runtime";import{Caption as m,theme as f,Button as x,Container as g,Tooltip as b,Grid as v,InputWithAdornments as w,Heading as y,InputWithMask as k,IconButton as _,LinearProgress as C,Divider as S,Modal as z,Switch as P,InputWithCountryDropdown as I,Checkbox as N,Radio as M,InputMessage as O,CircularProgress as T,Box as j}from"kui-basic";import{useWindowWidth as V,updateQueryParams as E,useForkRef as L,strongPasswordRegExp as D,mediumPasswordRegExp as U,simplePasswordRegExp as B,useToggle as R,isValidWithMaskExp as F}from"kui-utils";import K from"kui-swiper";import A from"classnames";import{HalfArrowIcon as W,PrevArrowIcon as J,NextArrowIcon as H,CalendarIcon as Y,ArrowBackIcon as q,ArrowNextIcon as G,ClosedEyeIcon as $,OpenEyeIcon as Q,CheckIcon as X,PlusIcon as Z,FileIcon as nn,EditIcon as en,TrashIcon as tn}from"kui-icon";import rn from"lodash";import an from"react-datepicker";import{useController as on,Controller as ln,useWatch as dn}from"react-hook-form";import{scroller as cn,Events as pn,Link as un,animateScroll as sn,Element as hn}from"react-scroll";import{DateTime as mn}from"luxon";import fn from"date-fns/locale/ru";import{useNavigate as xn,useLocation as gn}from"react-router-dom";import*as bn from"react-dom";import{Loader as vn}from"@googlemaps/js-api-loader";var wn=function(){return wn=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},wn.apply(this,arguments)};function yn(n,e){var t={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(t[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(n);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(n,r[i])&&(t[r[i]]=n[r[i]])}return t}function kn(n,e,t,r){return new(t||(t=Promise))((function(i,a){function o(n){try{d(r.next(n))}catch(n){a(n)}}function l(n){try{d(r.throw(n))}catch(n){a(n)}}function d(n){var e;n.done?i(n.value):(e=n.value,e instanceof t?e:new t((function(n){n(e)}))).then(o,l)}d((r=r.apply(n,e||[])).next())}))}function _n(n,e){var t,r,i,a,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(t)throw new TypeError("Generator is already executing.");for(;o;)try{if(t=1,r&&(i=2&a[0]?r.return:a[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;switch(r=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,r=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!(i=o.trys,(i=i.length>0&&i[i.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){o.label=a[1];break}if(6===a[0]&&o.label<i[1]){o.label=i[1],i=a;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(a);break}i[2]&&o.ops.pop(),o.trys.pop();continue}a=e.call(n,o)}catch(n){a=[6,n],r=0}finally{t=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}function Cn(n,e,t){if(t||2===arguments.length)for(var r,i=0,a=e.length;i<a;i++)!r&&i in e||(r||(r=Array.prototype.slice.call(e,0,i)),r[i]=e[i]);return n.concat(r||Array.prototype.slice.call(e))}function Sn(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var zn,Pn,In,Nn,Mn,On,Tn,jn,Vn,En,Ln,Dn,Un=l((function(n,e){var t=n.label,r=yn(n,["label"]);if(!t)return u("div",{});var i=t.split(" ").map((function(n){return n[0]})).slice(0,3).join("");return u(Bn,wn({"data-testid":"undefined_avatar",ref:e},{children:u(m,wn({size:"xs",weight:600,colorGroup:"brand",color:"main"},r,{children:i}))}))})),Bn=r.div(zn||(zn=Sn(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ",";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ",";\n p {\n color: white;\n }\n }\n }\n"],["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ",";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ",";\n p {\n color: white;\n }\n }\n }\n"])),f.palette.brand.light,f.palette.brand.main),Rn=l((function(e,t){var r=e.size,i=e.fullName,a=e.imageUrl,o=yn(e,["size","fullName","imageUrl"]);return n(Fn,wn({css:Wn[r],ref:t},o,{children:a?n(Kn,{"data-testid":"avatar_image",src:a,alt:"avatar"}):n(An,{label:i,avatarSize:r})}))})),Fn=r.div(Pn||(Pn=Sn(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"],["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"]))),Kn=r.img(In||(In=Sn(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"],["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"]))),An=r(Un,{shouldForwardProp:function(n){return"size"!==n}})(Mn||(Mn=Sn(["\n ",";\n"],["\n ",";\n"])),(function(n){return"lg"===n.avatarSize&&i(Nn||(Nn=Sn(["\n font-size: 32px;\n "],["\n font-size: 32px;\n "])))})),Wn={xs:i(On||(On=Sn(["\n min-width: 24px;\n width: 24px;\n height: 24px;\n p {\n font-size: 10px;\n }\n "],["\n min-width: 24px;\n width: 24px;\n height: 24px;\n p {\n font-size: 10px;\n }\n "]))),s:i(Tn||(Tn=Sn(["\n min-width: 32px;\n width: 32px;\n height: 32px;\n "],["\n min-width: 32px;\n width: 32px;\n height: 32px;\n "]))),md:i(jn||(jn=Sn(["\n min-width: 40px;\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n min-width: 32px;\n width: 32px;\n height: 32px;\n }\n "],["\n min-width: 40px;\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n min-width: 32px;\n width: 32px;\n height: 32px;\n }\n "]))),lg:i(Vn||(Vn=Sn(["\n min-width: 80px;\n width: 80px;\n height: 80px;\n "],["\n min-width: 80px;\n width: 80px;\n height: 80px;\n "])))},Jn=l((function(e,t){var r=e.index,i=e.onClick,a=e.isActive,o=e.label,l=e.disabled;return n(Hn,wn({disabled:l,variant:a?"orange":"white",captionWeight:400,onClick:function(){i(r)},css:!a&&Yn,size:"s",ref:t,className:A("KUI-ButtonTab",a&&"KUI-ButtonTab_active")},{children:o}))})),Hn=r(x)(En||(En=Sn(["\n margin-right: 24px;\n &.KUI-ButtonTab_active {\n p {\n text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;\n }\n }\n &:last-of-type {\n margin-right: 0;\n }\n"],["\n margin-right: 24px;\n &.KUI-ButtonTab_active {\n p {\n text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;\n }\n }\n &:last-of-type {\n margin-right: 0;\n }\n"]))),Yn=i(Ln||(Ln=Sn(["\n p {\n color: ",";\n }\n"],["\n p {\n color: ",";\n }\n"])),f.palette.grey.seventy),qn=l((function(e,t){var r=e.renderTabWrapper,i=e.label,a=yn(e,["renderTabWrapper","label"]);return r?r(i,n(Jn,wn({ref:t,label:i},a))):n(Jn,wn({ref:t,label:i},a))})),Gn=function(n){var e=n.startComponent,t=n.endComponent,r=n.tabs,i=n.renderTabWrapper,a=n.handleChange,o=n.value,l=d(null),c=function(n){setTimeout((function(){var e,t;null===(t=null===(e=l.current)||void 0===e?void 0:e.swiper)||void 0===t||t.slideTo(n)}),16),a(n)};return s(g,wn({className:"KUI-ButtonTabs"},{children:[e,u($n,wn({},{spaceBetween:8,slidesPerView:"auto",slideToClickedSlide:!0,injectStyles:["\n .swiper {\n padding: 8px 16px 24px 16px;\n margin: -8px -16px -24px -16px;\n }\n "],breakpoints:{600:{spaceBetween:16}}},{ref:l},{children:r.map((function(n,e){return u(qn,{index:e,onClick:c,isActive:e===o,label:n,renderTabWrapper:i},n)}))})),t]}))},$n=r(K)(Dn||(Dn=Sn(["\n swiper-slide {\n width: fit-content;\n }\n"],["\n swiper-slide {\n width: fit-content;\n }\n"]))),Qn=l((function(r,i){var a=r.tabs,l=r.tabPanels,d=r.paths,p=r.activeTab,u=r.isSticky,s=r.onChange,h=r.startComponent,m=r.endComponent,f=r.navigate,x=r.renderTabWrapper,g=yn(r,["tabs","tabPanels","paths","activeTab","isSticky","onChange","startComponent","endComponent","navigate","renderTabWrapper"]),b=V(),v=o.useState(Number(p)),w=v[0],y=v[1];return c((function(){y(Number(p))}),[p]),0===b?null:e(t,{children:[n(pe,wn({css:u&&{position:"sticky"},ref:i},g,{children:n(Gn,{value:w,tabs:a,handleChange:function(n){if(y(n),null==d?void 0:d.length){var e=d[n];f?f(e):E(e)}s&&s(n)},endComponent:m,startComponent:h,renderTabWrapper:x})})),n(ce,wn({role:"tabpanel"},{children:l[w]}))]})}));Qn.defaultProps={isSticky:!1};var Xn,Zn,ne,ee,te,re,ie,ae,oe,le,de,ce=r.div(Xn||(Xn=Sn(["\n height: 100%;\n"],["\n height: 100%;\n"]))),pe=r.div(Zn||(Zn=Sn(["\n background: ",";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"],["\n background: ",";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"])),f.palette.grey.zero),ue=l((function(n,e){var t=n.isOpen,r=n.handleClose,i=n.buttonRef,a=n.children,o=n.endComponent,l=n.input,h=n.className,m=n.strategy,f=n.onScroll,x=yn(n,["isOpen","handleClose","buttonRef","children","endComponent","input","className","strategy","onScroll"]),g=p(!1),b=g[0],v=g[1],w=d(null);c((function(){var n;if((null==i?void 0:i.current)&&t){var e=null===(n=w.current)||void 0===n?void 0:n.children[0].children[0];if(e){var r=e.scrollHeight>e.clientHeight;v(r)}}}),[t]);return u(se,wn({fullWidth:!0,withoutMobile:!0,open:t,onChange:function(n){n||r()},toggleMethod:"controlled",strategy:m||"fixed",placement:"bottom",className:h,content:s(he,wn({"data-testid":"input_dropdown",container:!0,ref:function(n){"function"==typeof e?e(n):e&&(e.current=n),w.current=n}},x,{children:[u(me,wn({isScrollable:b},{children:u(fe,wn({onScroll:f,isScrollable:b,className:"KUI-InputDropdown_scroll"},{children:a}))})),o]}))},{children:l}))})),se=r(b)(ne||(ne=Sn(["\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n width: 100%;\n }\n }\n }\n .KUI-Popper {\n max-width: unset;\n > div {\n user-select: none;\n padding: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n }\n &.top > div {\n border-radius: 8px 8px 0 0;\n }\n }\n"],["\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n z-index: unset;\n width: 100%;\n > div {\n width: 100%;\n }\n }\n }\n .KUI-Popper {\n max-width: unset;\n > div {\n user-select: none;\n padding: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n }\n &.top > div {\n border-radius: 8px 8px 0 0;\n }\n }\n"]))),he=r(v)(ee||(ee=Sn(["\n width: 100%;\n user-select: none;\n"],["\n width: 100%;\n user-select: none;\n"]))),me=r.div(te||(te=Sn(["\n width: 100%;\n box-sizing: border-box;\n padding: ",";\n"],["\n width: 100%;\n box-sizing: border-box;\n padding: ",";\n"])),(function(n){return n.isScrollable?"14px 8px 8px 0":"14px 0px 8px 0"})),fe=r.div(re||(re=Sn(["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ",";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ",";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ",";\n }\n"],["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ",";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ",";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ",";\n }\n"])),(function(n){return n.isScrollable?"4px":"0px"}),f.palette.grey.fifteenB,f.palette.grey.thirty),xe=l((function(n,e){var t=n.input,r=n.options,i=n.inputRef,a=n.isOpenDropdown,o=n.handleCloseDropdown,l=n.handleSelect,d=n.selectedValue,c=n.renderOption;return u(be,wn({input:t,buttonRef:i,isOpen:a,handleClose:o,ref:e},{children:r.map((function(n,e){return u(ge,wn({disabled:n.disabled,onClick:function(){return function(n){n.disabled||l(n)}(n)},"data-value":"autocomplete_option_".concat(n.value),"data-testid":"autocomplete_option_".concat(e)},{children:c(n,d)}),n.label)}))}))})),ge=r.div(ie||(ie=Sn(["\n width: 100%;\n padding: 2px 0;\n cursor: ",";\n p {\n color: ",";\n }\n"],["\n width: 100%;\n padding: 2px 0;\n cursor: ",";\n p {\n color: ",";\n }\n"])),(function(n){return n.disabled?"auto":"pointer"}),(function(n){return n.disabled?f.palette.grey.fiftyP:f.palette.grey.seventy})),be=r(ue)(ae||(ae=Sn(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"],["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"]))),ve=l((function(t,r){var i,a=t.options,o=t.name,l=t.disabled,c=t.handleChange,u=t.iconProps,s=t.renderOption,h=t.selectedLabel,m=t.selectedValue,f=t.error,x=yn(t,["options","name","disabled","handleChange","iconProps","renderOption","selectedLabel","selectedValue","error"]),g=p(!1),b=g[0],v=g[1],w=d(null),y=L(w,r),k=function(){v(!1)};return e(we,{children:[n("input",{name:o,autoComplete:"off",hidden:!0}),n(xe,{options:a,inputRef:{current:null===(i=null==w?void 0:w.current)||void 0===i?void 0:i.parentElement},isOpenDropdown:b,handleCloseDropdown:k,handleSelect:function(n){c&&c(n),k()},selectedValue:m,renderOption:s,input:n(ye,wn({onClick:function(){var n,e,t,r;(null===(e=null===(n=null==w?void 0:w.current)||void 0===n?void 0:n.parentElement)||void 0===e?void 0:e.parentElement)&&(null===(r=null===(t=null==w?void 0:w.current)||void 0===t?void 0:t.parentElement)||void 0===r||r.parentElement.focus()),l||v((function(n){return!n}))},ref:y,disabled:l,readOnly:!0,value:h,message:f,isLabelShrink:Boolean(m)||0===m},x,{endIcon:!l&&n(ke,wn({width:12,height:13,css:[{transition:"all linear .2s"},b&&{transform:"rotate(180deg)"}]},u))}))})]})})),we=r.div(oe||(oe=Sn(["\n position: relative;\n text-align: left;\n"],["\n position: relative;\n text-align: left;\n"]))),ye=r(w)(le||(le=Sn(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputAdornment_end-icon {\n pointer-events: none;\n }\n"],["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputAdornment_end-icon {\n pointer-events: none;\n }\n"]))),ke=r(W)(de||(de=Sn(["\n user-select: none;\n"],["\n user-select: none;\n"])));function _e(n){var e=n.option,t=n.selectedValue;return u(Ge,wn({selected:t===e.value},{children:u(m,wn({size:"sm",weight:500},{children:e.label}))}))}var Ce,Se,ze,Pe,Ie,Ne,Me,Oe,Te,je,Ve,Ee,Le,De,Ue,Be,Re,Fe,Ke,Ae,We,Je,He,Ye,qe,Ge=r.div(Ce||(Ce=Sn(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ",";\n &:hover {\n background-color: ",";\n }\n"],["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ",";\n &:hover {\n background-color: ",";\n }\n"])),(function(n){return n.selected?f.palette.background.light1:f.palette.grey.zero}),f.palette.background.light1),$e=l((function(n,e){var t,r=n.options,i=n.name,a=n.handleChange;n.form;var o=n.value,l=yn(n,["options","name","handleChange","form","value"]),d=p(o),s=d[0],h=d[1],m=(null===(t=r.find((function(n){return String(n.value)===String(s)})))||void 0===t?void 0:t.label)||"";return c((function(){void 0!==o&&h(o)}),[o]),u(ve,wn({options:r,handleChange:function(n){h(n.value),a&&a(n.value)},selectedLabel:m,selectedValue:s,name:i,renderOption:function(n,e){return u(_e,{option:n,selectedValue:e})},ref:e},l))})),Qe=function(n,e,t){return e&&n<e||t&&n>t},Xe=l((function(n,e){var t=n.yearOptions;n.options;var r=n.min,i=n.max,a=yn(n,["yearOptions","options","min","max"]),o=t.map((function(n){return wn(wn({},n),{disabled:Qe(Number(n.value),r,i)})}));return u($e,wn({ref:e,label:"Year",options:o},a))})),Ze=function(n,e,t){return e&&n<e||t&&n>=t},nt=[{value:0,label:"January"},{value:1,label:"February"},{value:2,label:"March"},{value:3,label:"April"},{value:4,label:"May"},{value:5,label:"June"},{value:6,label:"July"},{value:7,label:"August"},{value:8,label:"September"},{value:9,label:"October"},{value:10,label:"November"},{value:11,label:"December"}],et=l((function(n,e){var t=n.min,r=n.max;n.options;var i=yn(n,["min","max","options"]),a=nt.map((function(n){return wn(wn({},n),{disabled:Ze(n.value,t,r)})}));return u($e,wn({ref:e,label:"Month",options:a},i))})),tt=l((function(n,e){var t=n.changeMonth,r=n.changeYear,i=n.date,a=n.yearOptions,o=n.max,l=n.min,d=i.getFullYear(),c=i.getMonth(),p=(null==l?void 0:l.year)===d&&(null==l?void 0:l.month)?l.month-1:0,h=(null==o?void 0:o.year)===d?null==o?void 0:o.month:11;return u(rt,wn({ref:e},{children:s(v,wn({container:!0,spacing:2},{children:[u(v,wn({item:!0,xs:6},{children:u(Xe,{min:null==l?void 0:l.year,max:null==o?void 0:o.year,yearOptions:a,value:d,handleChange:r})})),u(v,wn({item:!0,xs:6},{children:u(et,{min:Number(null==l?void 0:l.year)>=d&&p,max:Number(null==o?void 0:o.year)<=d&&h,value:c,handleChange:t})}))]}))}))})),rt=r.div(Se||(Se=Sn(["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"],["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"]))),it=l((function(n,e){n.arrowProps,n.showPopperArrow;var t=yn(n,["arrowProps","showPopperArrow"]);return u(at,wn({ref:e},t))})),at=r.div(ze||(ze=Sn(['\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: "Inter", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ',";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ",";\n }\n &:active {\n background: ",";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--today {\n color: ",";\n background-color: ",";\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ",";\n p {\n color: ",";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ",";\n background-color: ",";\n color: ",";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"],['\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: "Inter", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ',";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ",";\n }\n &:active {\n background: ",";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--today {\n color: ",";\n background-color: ",";\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ",";\n p {\n color: ",";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ",";\n background-color: ",";\n color: ",";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"])),f.palette.grey.fiftyP,f.palette.background.light3,f.palette.background.light3,f.palette.brand.main,f.palette.brand.light,f.palette.brand.main,f.palette.brand.main,f.palette.grey.fifteenB,f.palette.red.seventy,f.palette.grey.zero),ot=l((function(n,e){var t=n.decreaseMonth,r=n.increaseMonth,i=n.nextMonthButtonDisabled,a=n.prevMonthButtonDisabled,o=n.date,l=rn.capitalize(o.toLocaleString("ru",{month:"long",year:"numeric"})).slice(0,-3);return s(lt,wn({container:!0,alignItems:"center",justify:"space-between",ref:e},{children:[u(v,wn({item:!0},{children:u(dt,wn({size:"h4"},{children:l}))})),u(v,wn({item:!0},{children:s(v,wn({container:!0,spacing:2},{children:[u(v,wn({item:!0},{children:u(ct,wn({isCircle:!0,size:"xs","data-testid":"prev_month_button",variant:"white",disabled:a,onClick:t},{children:u(J,{width:10,height:10})}))})),u(v,wn({item:!0},{children:u(ct,wn({isCircle:!0,size:"xs",variant:"white",disabled:i,onClick:r},{children:u(H,{width:10,height:10})}))}))]}))}))]}))})),lt=r(v)(Pe||(Pe=Sn(["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"],["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"]))),dt=r(y)(Ie||(Ie=Sn(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"],["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"]))),ct=r(x)(Ne||(Ne=Sn(["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"],["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"]))),pt=l((function(n,e){var t=n.onClick,r=n.disabled,i=n.handleClick,a=n.startIcon,o=yn(n,["onClick","disabled","handleClick","startIcon"]),l=function(){r||(i?i():t())},d=function(){return u(ut,wn({disabled:r,onClick:l},{children:a||u(Y,{width:19,height:21})}))};return u(k,wn({disabled:r,endIcon:!a&&u(d,{}),startIcon:a&&u(d,{})},o,{ref:e}))})),ut=r.div(Me||(Me=Sn(["\n display: flex;\n align-items: center;\n cursor: ",";\n z-index: 1;\n"],["\n display: flex;\n align-items: center;\n cursor: ",";\n z-index: 1;\n"])),(function(n){return n.disabled?"auto":"pointer"})),st=l((function(n,e){n.arrowProps,n.showPopperArrow;var t=yn(n,["arrowProps","showPopperArrow"]);return u(ht,wn({ref:e},t))})),ht=r.div(Oe||(Oe=Sn(["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid "," !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ",';\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: "";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ',";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: "," !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ",";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"],["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid "," !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ",';\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: "";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ',";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: "," !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ",";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"])),f.palette.background.light1,f.palette.grey.fifteenB,f.palette.grey.fifteenB,f.palette.brand.main,f.palette.grey.fifteenB),mt=l((function(n,e){var t=n.decreaseYear,r=n.increaseYear,i=n.nextYearButtonDisabled,a=n.prevYearButtonDisabled,o=n.date;return s(xt,wn({container:!0,alignItems:"center",justify:"space-between",ref:e},{children:[u(v,wn({item:!0},{children:u(ft,wn({disabled:a,onClick:t,type:"button"},{children:u(q,{width:14,height:12})}))})),u(v,wn({item:!0},{children:u(m,wn({size:"sm",weight:600},{children:o.getFullYear()}))})),u(v,wn({item:!0},{children:u(ft,wn({disabled:i,onClick:r,type:"button"},{children:u(G,{width:14,height:12})}))}))]}))})),ft=r(_)(Te||(Te=Sn(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"],["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"]))),xt=r(v)(je||(je=Sn(["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"],["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"]))),gt=l((function(n,e){var t,r=n.name,i=n.form,a=n.disabled,o=n.datePickerProps,l=n.onChange,d=yn(n,["name","form","disabled","datePickerProps","onChange"]),s=p(),h=s[0],m=s[1],f=on({name:r,control:i.control}),x=f.field,g=f.fieldState;return c((function(){m(x.value)}),[x.value]),u(bt,wn({ref:e},{children:u(an,wn({selected:x.value,onChange:function(n){x.onChange(n),l&&l(n)},disabled:a,customInput:u(pt,wn({mask:"00.0000",name:r,disabled:a,message:null===(t=g.error)||void 0===t?void 0:t.message},d),h),showMonthYearPicker:!0,dateFormat:"MM.yyyy",popperPlacement:"bottom-end",calendarContainer:st,renderCustomHeader:function(n){return u(mt,wn({},n))}},o))}))})),bt=r.div(Ve||(Ve=Sn(["\n @media (max-width: 600px) {\n display: none;\n }\n"],["\n @media (max-width: 600px) {\n display: none;\n }\n"]))),vt=l((function(e,t){var r=e.tab,i=e.active,a=e.index,o=e.handleClick,l=e.offset,d=e.isScrolling,p=e.setIsScrolling,u=function(){p(!1)};return c((function(){return i===a&&cn.scrollTo(r,{offset:l}),pn.scrollEvent.register("begin",(function(n,e){p(!0),e&&o(Number(e.dataset.index))})),pn.scrollEvent.register("end",(function(n,e){setTimeout(u)})),function(){pn.scrollEvent.remove("begin"),pn.scrollEvent.remove("end")}}),[]),n(un,wn({to:r,spy:!0,smooth:!0,duration:500,offset:l,onSetActive:function(){d||o(a)}},{children:n(wt,wn({ref:t},{children:n(x,wn({variant:Number(i)===a?"orange":"transparentWithBorder",size:"xs",css:Number(i)!==a&&yt},{children:r}))}))}))})),wt=r.div(Ee||(Ee=Sn(["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"],["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"]))),yt=i(Le||(Le=Sn(["\n p {\n color: ",";\n font-weight: 400;\n },\n"],["\n p {\n color: ",";\n font-weight: 400;\n },\n"])),f.palette.grey.seventy),kt=l((function(e,t){var r=e.tabs,i=e.variant,a=yn(e,["tabs","variant"]);return n(_t,wn({container:!0,css:"white"===i&&{background:"white"},ref:t},{children:r.map((function(e,t){return n(v,wn({item:!0},{children:n(vt,wn({tab:e,index:t,offset:-121},a),e)}),t)}))}))})),_t=r(v)(De||(De=Sn(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ",";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"],["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ",";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])),f.palette.background.light1),Ct=l((function(n,e){var t=n.form,r=n.name,i=n.error,a=yn(n,["form","name","error"]),o=function(n){var e;return void 0!==i&&String(i).length>0?i:null===(e=n.error)||void 0===e?void 0:e.message};return u(ln,{control:null==t?void 0:t.control,name:r,render:function(n){var t=n.field,r=n.fieldState;return u(k,wn({message:o(r)},t,a,{onChange:function(n){return function(n,e){e.onChange(n),a.onChange&&a.onChange(n)}(n,t)},inputRef:e}))}})})),St=l((function(n,e){var t=n.form,r=n.name,i=n.error,a=n.value,o=n.type,l=yn(n,["form","name","error","value","type"]),d=function(n){var e;return void 0!==i&&String(i).length>0?i:null===(e=n.error)||void 0===e?void 0:e.message};return u(ln,{control:null==t?void 0:t.control,name:r,render:function(n){var t=n.field,r=n.fieldState;return u(w,wn({message:d(r)},t,l,{onChange:function(n){return function(n,e){var t,r="number"!==o||(null===(t=n.target.value)||void 0===t?void 0:t.length)?n.target.value:null;e.onChange(wn(wn({},n),{target:wn(wn({},n.target),{value:r})})),l.onChange&&l.onChange(n)}(n,t)},type:o,value:null!=a?a:t.value,inputRef:e}))}})})),zt={weak:0,simple:1,medium:2,hard:3},Pt={weak:f.palette.red.fiftyP,simple:f.palette.brand.main,medium:f.palette.blue.fiftyP,hard:f.palette.green.fiftyP},It={weak:"Очень простой",simple:"Простой",medium:"Средний",hard:"Сложный"},Nt=l((function(t,r){var i=t.strength,a=i?Pt[i]:"",o=i?zt[i]:-1;return e(Mt,wn({"data-testid":"strength_bar",className:String(!i&&"hidden"),ref:r},{children:[n(Ot,{children:Object.keys(zt).map((function(e,t){return n(Tt,{children:n(jt,{"data-testid":"progress_item_".concat(e),value:o>=t?100:0,color:a})},e)}))}),n(m,wn({"data-testid":"strength_bar_explanation",size:"s",css:{color:a}},{children:i&&It[i]})),n(Vt,wn({size:"s",color:"fiftyP"},{children:"Пароль должен состоять из 10 символов, содержать цифры, большие и строчные латинские бувы"}))]}))})),Mt=r.div(Ue||(Ue=Sn(["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"],["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"]))),Ot=r.div(Be||(Be=Sn(["\n display: flex;\n margin-bottom: 8px;\n"],["\n display: flex;\n margin-bottom: 8px;\n"]))),Tt=r.div(Re||(Re=Sn(["\n width: calc(100% / 4);\n margin-right: 16px;\n &:last-of-type {\n margin-right: 0;\n }\n"],["\n width: calc(100% / 4);\n margin-right: 16px;\n &:last-of-type {\n margin-right: 0;\n }\n"]))),jt=r(C)(Fe||(Fe=Sn(["\n height: 8px;\n border-radius: 8px;\n background-color: ",";\n & .KUI-LinearProgress_bar {\n background-color: ",";\n width: 102%;\n }\n"],["\n height: 8px;\n border-radius: 8px;\n background-color: ",";\n & .KUI-LinearProgress_bar {\n background-color: ",";\n width: 102%;\n }\n"])),f.palette.grey.fifteenB,(function(n){return n.color})),Vt=r(m)(Ke||(Ke=Sn(["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"],["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"]))),Et=function(n,e){var t=null==n?void 0:n.split("."),r=null==e?void 0:e.control._formValues;return null==t||t.forEach((function(n){r&&(r=r[n])})),r},Lt=function(n,e){var t=null==n?void 0:n.split("."),r=null==e?void 0:e.formState.errors;return null==t||t.forEach((function(n){r&&(r=r[n])})),null==r?void 0:r.message},Dt=l((function(n,e){var t=p(!1),r=t[0],i=t[1],a=p(null),o=a[0],l=a[1],d=function(n){0!==n.length?D.test(n)?l("hard"):U.test(n)?l("medium"):B.test(n)?l("simple"):l("weak"):l(null)};return c((function(){var e=n.form,t=n.name,r=Et(t,e);"string"==typeof r&&d(r)}),[]),s(h,{children:[u(St,wn({type:r?"text":"password",autoComplete:"new_password",onChange:function(n){var e=n.target.value;d(e)},"data-testid":"input_password",ref:e,endIcon:u(Ut,wn({"data-testid":"show_value_btn",onClick:function(){i((function(n){return!n}))}},{children:u(r?$:Q,{})}))},n)),u(Nt,{strength:o})]})})),Ut=r.div(Ae||(Ae=Sn(["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"],["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"]))),Bt=l((function(n){return s(h,{children:[u(Rt,{children:u(St,wn({},n))}),u(Ft,{children:u(St,wn({isTextArea:!0},n))})]})})),Rt=r.div(We||(We=Sn(["\n @media (max-width: 900px) {\n display: none;\n }\n"],["\n @media (max-width: 900px) {\n display: none;\n }\n"]))),Ft=r.div(Je||(Je=Sn(["\n @media (min-width: 901px) {\n display: none;\n }\n"],["\n @media (min-width: 901px) {\n display: none;\n }\n"]))),Kt=l((function(n,e){var t=n.label,r=n.button,i=yn(n,["label","button"]);return s(At,wn({ref:e},{children:[u(S,{}),u(Wt,{children:r||u(Jt,wn({fullWidth:!0,size:"s",endIcon:u(X,{})},i,{children:t}))})]}))})),At=r.div(He||(He=Sn(["\n background: ",";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"],["\n background: ",";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])),f.palette.grey.zero),Wt=r.div(Ye||(Ye=Sn(["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"],["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"]))),Jt=r(x)(qe||(qe=Sn(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"],["\n @media (max-width: 600px) {\n width: 100%;\n }\n"]))),Ht=l((function(r,i){var a,o=r.title,l=r.description,d=r.name,u=r.form,s=r.disabled,h=r.yearParams,m=r.onChange,f=r.max,x=r.min,g=r.footerLabel,b=r.datePickerProps,v=r.alignTitle,w=yn(r,["title","description","name","form","disabled","yearParams","onChange","max","min","footerLabel","datePickerProps","alignTitle"]),y=on({name:d,control:u.control}),k=y.field,_=null===(a=y.fieldState.error)||void 0===a?void 0:a.message,C=k.value,S=C?C.toFormat("dd.MM.yyyy"):"",z=C?C.toJSDate():null,P=R(),I=P[0],N=P[1],M=P[2],O=p(z),T=O[0],j=O[1],V=p(S),E=V[0],D=V[1],U=function(n,e){if(!n||!e)return[];var t=mn.now().year-n;return rn.range(e).map((function(n){var e=t-n;return{value:e,label:e}}))}(null==h?void 0:h.min,null==h?void 0:h.max),B=L(i,k.ref);c((function(){S&&D(S)}),[S]);return e(t,{children:[n(pt,wn({mask:"00.00.0000",name:d,handleClick:N,value:E,onChange:function(n){var e=n.target.value;if(D(e),0!==e.length&&F.test(e)){var t=mn.fromFormat(e,"dd.MM.yyyy");j(t.toJSDate()),null==k||k.onChange({target:{value:t,name:d},type:"change"}),m&&m(t)}else j(null),null==k||k.onChange({target:{value:null,name:d},type:"change"}),m&&m(null)},disabled:s,message:_,ref:B},w)),e(rr,wn({title:o,description:l,isOpen:I,handleClose:M,alignTitle:v},{children:[n(nr,{children:n(an,wn({inline:!0,selected:T||z,onChange:function(n){j(n)},calendarContainer:er,renderCustomHeader:function(e){return n(tt,wn({yearOptions:U,max:f,min:x},e))},renderDayContents:function(e){return n(tr,{children:e})},maxDate:null==f?void 0:f.toJSDate(),minDate:null==x?void 0:x.toJSDate()},b))}),n(Kt,{fullWidth:!0,disabled:!z&&!T,onClick:function(){if(T){var n=mn.fromJSDate(T);D(n.toFormat("dd.MM.yyyy")),null==k||k.onChange({target:{value:n,name:d},type:"change"}),m&&m(n),M()}},label:g})]}))]})}));Ht.defaultProps={alignTitle:"center"};var Yt,qt,Gt,$t,Qt,Xt,Zt,nr=r.div(Yt||(Yt=Sn(["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"],["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"]))),er=r(it)(qt||(qt=Sn(["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ",";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ",";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"],["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ",";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ",";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"])),f.palette.background.light1,f.palette.background.light1),tr=r.span(Gt||(Gt=Sn(["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"],["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"]))),rr=r(z)($t||($t=Sn(["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ",";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"],["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ",";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"])),(function(n){return n.alignTitle||"center"})),ir=["ЯНВ","ФЕВ","МАРТ","АПР","МАЙ","ИЮНЬ","ИЮЛЬ","АВГ","СЕНТ","ОКТ","НОЯБ","ДЕК"],ar=wn(wn({},fn),{localize:{month:function(n){return ir[n]},ordinalNumber:function(){return""},era:function(){return""},quarter:function(){return""},dayPeriod:function(){return""},day:function(){return""}}}),or=l((function(n,e){var t,r=n.title,i=n.name,a=n.form,o=n.disabled,l=n.datePickerProps,d=yn(n,["title","name","form","disabled","datePickerProps"]),c=on({name:i,control:a.control}),h=c.field,m=null===(t=c.fieldState.error)||void 0===t?void 0:t.message,f=R(),x=f[0],g=f[1],b=f[2],v=p(h.value?mn.fromJSDate(new Date(String(h.value))).toFormat("MM.yyyy"):null),w=v[0],y=v[1],k=p(w?mn.fromFormat(w,"MM.yyyy").toJSDate():null),_=k[0],C=k[1];return s(lr,wn({ref:e},{children:[u(pt,wn({mask:"00.0000",name:i,handleCLick:g,value:w,onChange:function(n){var e=n.target.value;if(y(e),0!==e.length&&F.test(e)){var t=mn.fromFormat(e,"MM.yyyy").toJSDate();C(t),null==h||h.onChange({target:{value:t,name:i},type:"change"})}else C(null),null==h||h.onChange({target:{value:null,name:i},type:"change"})},disabled:o,message:m,isLabelShrink:Boolean(h.value)},d)),s(z,wn({title:r,isOpen:x,handleClose:b},{children:[u(dr,{children:u(an,wn({inline:!0,showMonthYearPicker:!0,dateFormat:"MM.yyyy",selected:_,onChange:function(n){return C(n)},locale:ar,calendarContainer:st,renderCustomHeader:function(n){return u(mt,wn({},n))}},l))}),u(Kt,{fullWidth:!0,disabled:!_,onClick:function(){y(_?mn.fromJSDate(_).toFormat("MM.yyyy"):""),null==h||h.onChange({target:{value:_,name:i},type:"change"}),b()},label:"Подтвердить"})]}))]}))})),lr=r.div(Qt||(Qt=Sn(["\n @media (min-width: 601px) {\n display: none;\n }\n"],["\n @media (min-width: 601px) {\n display: none;\n }\n"]))),dr=r.div(Xt||(Xt=Sn(["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"],["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"]))),cr=function(n){return s(h,{children:[u(gt,wn({},n)),u(or,wn({},n))]})},pr=l((function(e,t){var r=e.tabs,i=e.handleClick,a=e.variant,o=yn(e,["tabs","handleClick","variant"]),l=d(null),c=function(n){setTimeout((function(){var e,t;null===(t=null===(e=l.current)||void 0===e?void 0:e.swiper)||void 0===t||t.slideTo(n)}),16),i(n)};return n(ur,wn({css:"white"===a&&{background:"white"},ref:t},{children:n(K,wn({spaceBetween:8,slidesPerView:"auto",slideToClickedSlide:!0,ref:l},{children:r.map((function(e,t){return n(vt,wn({tab:e,index:t,handleClick:c,offset:-121},o),e)}))}))}))})),ur=r.div(Zt||(Zt=Sn(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ",";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n\n swiper-slide {\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n }\n"],["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ",";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n\n swiper-slide {\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n }\n"])),f.palette.background.light1),sr=l((function(t,r){var i=t.tabs,a=t.tabPanels,l=t.paths,d=t.activeTab,p=t.variant,u=V(),s=o.useState(d),h=s[0],m=s[1],f=o.useState(!1),x=f[0],g=f[1],b=xn(),v=gn(),w=function(n){if(l[n]){m(n);var e=v.pathname,t="".concat(e).concat(v.search),r="".concat(e).concat(l[n]);t!==r&&b(r,{replace:!0})}};return c((function(){m(d)}),[d]),c((function(){"number"!=typeof d&&u<901&&sn.scrollToTop()}),[]),0===u?null:e("div",wn({ref:r},{children:[n(u>765?kt:pr,{tabs:i,active:h,handleClick:w,variant:p,isScrolling:x,setIsScrolling:g}),a.map((function(e,t){return n("div",wn({css:t===a.length-1&&fr},{children:n(xr,wn({name:i[t],"data-index":t},{children:e}),t)}),t)}))]}))}));sr.defaultProps={variant:"grey"};var hr,mr,fr=i(hr||(hr=Sn(["\n height: calc(100vh - 121px);\n display: flex;\n"],["\n height: calc(100vh - 121px);\n display: flex;\n"]))),xr=r(hn)(mr||(mr=Sn(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"],["\n display: flex;\n flex-direction: column;\n width: 100%;\n"]))),gr=l((function(e,t){var r=e.form,i=e.name,a=yn(e,["form","name"]);return n(ln,{control:null==r?void 0:r.control,name:i,render:function(e){var r=e.field;return n(P,wn({checked:Boolean(r.value),onChange:r.onChange,"data-testid":i,ref:t,name:i},a))}})})),br=l((function(n,e){var t,r=n.form,i=n.name,a=n.hiddenInputProps,o=n.error,l=yn(n,["form","name","hiddenInputProps","error"]),d=on({control:r.control,name:"".concat(i,".phoneCode"),defaultValue:"7"}),c=on({control:r.control,name:"".concat(i,".phoneNumber")}),p=void 0!==o&&String(o).length>0?o:null===(t=c.fieldState.error)||void 0===t?void 0:t.message,s=L(e,c.field.ref);return u(I,wn({message:p,hiddenInputProps:wn(wn({},d.field),a),onSelectCountry:function(n){d.field.onChange({target:{value:n.phoneCode,name:"".concat(i,".phoneCode")},type:"change"})}},c.field,l,{onChange:function(n){c.field.onChange(n),d.field.value||d.field.onChange({target:{value:"7",name:"".concat(i,".phoneCode")},type:"change"}),l.onChange&&l.onChange(n)},ref:s,autoComplete:"false"}))}));br.defaultProps={name:"phone"};var vr,wr,yr,kr,_r,Cr,Sr,zr,Pr,Ir,Nr,Mr=l((function(n,e){return u(Or,wn({cellSpacing:"0",ref:e},n))})),Or=r.table(vr||(vr=Sn(["\n width: 100%;\n border-spacing: 0;\n"],["\n width: 100%;\n border-spacing: 0;\n"]))),Tr=r.th(wr||(wr=Sn(["\n padding: 0;\n text-align: left;\n"],["\n padding: 0;\n text-align: left;\n"]))),jr=r.td(yr||(yr=Sn(["\n padding: 0;\n"],["\n padding: 0;\n"]))),Vr=l((function(n,e){var t=n.children,r=yn(n,["children"]),i=o.Children.toArray(t);return u("tr",wn({ref:e},{children:i.map((function(n){return o.cloneElement(n,r)}))}))})),Er={bottomStart:{bottom:1,offset:0},bottomMiddle:{bottom:1,offset:.5},bottomEnd:{bottom:1,offset:1},topStart:{top:1,offset:0},topMiddle:{top:1,offset:.5},topEnd:{top:1,offset:1}},Lr=l((function(n,e){n.placement;var t=n.open,r=n.children,i=n.spacing,a=n.className,o=n.style,l=yn(n,["placement","open","children","spacing","className","style"]);return u(Dr,wn({ref:e,className:A("KUI-Popper",a),spacing:i,style:o,open:!!t},{children:u(Ur,wn({open:!!t},l,{children:r}))}))})),Dr=r.div(kr||(kr=Sn(["\n position: absolute;\n max-width: 215px;\n width: max-content;\n padding: ",";\n z-index: ",";\n @media (max-width: ","px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"],["\n position: absolute;\n max-width: 215px;\n width: max-content;\n padding: ",";\n z-index: ",";\n @media (max-width: ","px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"])),(function(n){return n.spacing||0}),(function(n){return n.open?10:-1}),f.breakpoints.xxs),Ur=r.div(_r||(_r=Sn(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ",";\n"],["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ",";\n"])),(function(n){return n.open?1:0})),Br=l((function(n,e){var t=n.placement,r=n.contentRef,o=yn(n,["placement","contentRef"]),l=d(null),m=p(null),f=m[0],x=m[1],g=p(null),b=g[0],v=g[1];c((function(){if(r.current&&l.current){var n=l.current,e=r.current.getBoundingClientRect(),t={width:n.clientWidth,height:n.clientHeight};x(e),v(t)}}),[]);var w={};if(f&&b){var y=Er[null!=t?t:"bottomMiddle"];w={top:Math.max(y.top?f.top-b.height:f.top+f.height,0),left:Math.max(f.left+f.width*y.offset-b.width*y.offset,0)}}return bn.createPortal(s(h,{children:[u(a,{styles:i(Cr||(Cr=Sn(["\n body {\n position: relative;\n }\n "],["\n body {\n position: relative;\n }\n "])))}),u(Lr,wn({ref:function(n){e&&(e.current=n),l.current=n},style:w},o))]}),document.body)})),Rr=l((function(n,e){var t=n.placement,r=n.contentRef,i=yn(n,["placement","contentRef"]),a=d(null),o=p(null),l=o[0],s=o[1],h=p(null),m=h[0],f=h[1],x={};if(c((function(){r.current&&a.current&&(s({width:r.current.clientWidth,height:r.current.clientHeight}),f({width:a.current.clientWidth,height:a.current.clientHeight}))}),[]),l&&m){var g=Er[null!=t?t:"bottomMiddle"];x={top:g.top?0-m.height:0+l.height,left:Math.max(l.width*g.offset-m.width*g.offset,0)}}return u(Lr,wn({ref:function(n){e&&(e.current=n),a.current=n},style:x},i))})),Fr=l((function(n,e){var t=n.contentRef,r=yn(n,["contentRef"]),i=p(!0),a=i[0],o=i[1];return c((function(){var n=function(){for(var n=t.current;n;){var e=window.getComputedStyle(n).position;if("sticky"===e||"fixed"===e)return!0;n=n.parentElement}return!1}();o(!!n)}),[t]),u(a?Rr:Br,wn({ref:e,contentRef:t},r))})),Kr=l((function(n,e){var t=n.content,r=n.onOpen,i=n.onClose,a=n.open,o=n.children,l=n.cursor,h=n.className,m=yn(n,["content","onOpen","onClose","open","children","cursor","className"]),f=p(a),x=f[0],g=f[1],b=d(null),v=function(){g(!0),r&&r()};return c((function(){g(a)}),[a]),s(Wr,wn({className:h,onMouseLeave:function(){g(!1),i&&i()},ref:e},{children:[u(Jr,wn({onMouseEnter:v,onTouchEnd:v,ref:b,cursor:l},{children:u(Hr,wn({className:"Tooltip_content"},{children:o}))})),u(Fr,wn({open:x},m,{contentRef:b},{children:t}))]}))})),Ar=i(Sr||(Sr=Sn(["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"],["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"]))),Wr=r.div(zr||(zr=Sn(["\n ",";\n position: relative;\n"],["\n ",";\n position: relative;\n"])),Ar),Jr=r.div(Pr||(Pr=Sn(["\n ",";\n cursor: ",";\n"],["\n ",";\n cursor: ",";\n"])),Ar,(function(n){return n.cursor})),Hr=r.div(Ir||(Ir=Sn(["\n ",";\n z-index: -1;\n"],["\n ",";\n z-index: -1;\n"])),Ar),Yr=l((function(n,e){var t,r=n.options,i=yn(n,["options"]);return u(qr,wn({value:null===(t=null==r?void 0:r[0])||void 0===t?void 0:t.value,options:r,iconProps:{width:9,height:5}},i,{ref:e}))})),qr=r($e)(Nr||(Nr=Sn(["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ","px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"],["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ","px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"])),f.breakpoints.xs),Gr=l((function(n,e){var t,r,i=n.options,a=n.name,o=n.handleChange,l=n.form,d=n.value,c=yn(n,["options","name","handleChange","form","value"]),p=on({control:l.control,name:a}),s=null===(t=p.fieldState.error)||void 0===t?void 0:t.message;return u($e,wn({options:i,handleChange:function(n){var e;o&&o(n),l&&(null===(e=p.field)||void 0===e||e.onChange({target:{value:n,name:a},type:"change"}))},error:s,name:a,value:d||(null===(r=p.field)||void 0===r?void 0:r.value),ref:e},c))}));function $r(n){var e=n.option,t=n.selectedValue.includes(e.value);return u(Zr,wn({container:!0,selected:t},{children:u(N,{checked:t,label:u(ni,wn({onClick:function(n){n.preventDefault()},selected:t,size:"sm",weight:500},{children:e.label}))})}))}var Qr,Xr,Zr=r(v)(Qr||(Qr=Sn(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ",";\n &:hover {\n background-color: ",";\n p {\n color: "," !important;\n }\n }\n"],["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ",";\n &:hover {\n background-color: ",";\n p {\n color: "," !important;\n }\n }\n"])),(function(n){return n.selected?f.palette.background.light1:f.palette.grey.zero}),f.palette.background.light1,f.palette.grey.seventy),ni=r(m)(Xr||(Xr=Sn(["\n color: "," !important;\n"],["\n color: "," !important;\n"])),(function(n){return n.selected?f.palette.grey.seventy:f.palette.grey.fiftyP}));function ei(n){var e,t,r=n.options,i=n.name,a=n.handleChange,o=n.form,l=n.value,d=yn(n,["options","name","handleChange","form","value"]),s=o?on({control:o.control,name:i}):null,h=p(l||(null===(e=null==s?void 0:s.field)||void 0===e?void 0:e.value)||[]),m=h[0],f=h[1],x=r.filter((function(n){return m.includes(n.value)})).map((function(n){return n.label})).join(", "),g=null===(t=null==s?void 0:s.fieldState.error)||void 0===t?void 0:t.message;c((function(){var n;o&&(null===(n=null==s?void 0:s.field)||void 0===n||n.onChange({target:{value:m,name:i},type:"change"}))}),[m]);return u(ve,wn({options:r,handleChange:function(n){m.includes(n.value)?f((function(e){return e.filter((function(e){return e!==n.value}))})):f((function(e){return Cn(Cn([],e,!0),[n.value],!1)})),a&&a(n.value)},error:g,selectedLabel:x,selectedValue:m,name:i,isLabelShrink:!!x,renderOption:function(n,e){return u($r,{option:n,selectedValue:e})}},d))}var ti=l((function(n,e){var t=n.options,r=n.disabled,i=n.direction,a=n.defaultValue,o=n.value,l=n.onChange,d=n.isSquare,s=yn(n,["options","disabled","direction","defaultValue","value","onChange","isSquare"]),h=p(a||o||t[0].value),m=h[0],f=h[1],x=function(n){var e=n.target.value;f(e),l&&l(n,e)},g=function(n){var e=n.target.value;String(m)===String(e)&&(f(null),l&&l(n,null))};return c((function(){o&&f(o)}),[o]),u(v,wn({container:!0,direction:i,ref:e},{children:t.map((function(n){return u(M,wn({value:n.value,label:n.label,disabled:Boolean(r),checked:String(m)===String(n.value),isSquare:d,onClick:g,onChange:x},s),n.value)}))}))}));function ri(n){var e=n.form,t=n.name,r=n.defaultValue,i=yn(n,["form","name","defaultValue"]);return c((function(){e.getValues(t)||r||e.setValue(t,i.options[0].value)}),[]),u(ln,{control:e.control,name:String(t),render:function(n){var e=n.field;return u(ti,wn({},i,e,{defaultValue:r,onChange:function(n,r){return function(n,e,r){r.onChange({target:{value:e,name:t},type:"change"}),i.onChange&&i.onChange(n,e)}(n,r,e)}}))}})}function ii(n){var e,t=n.title,r=n.className,i=n.direction,a=n.form,o=n.name,l=yn(n,["title","className","direction","form","name"]),d=null===(e=on({control:a.control,name:o}).fieldState.error)||void 0===e?void 0:e.message;return s(pi,{children:[s(ui,wn({container:!0,alignItems:"vertical"===i?"flex-start":"center",justify:"space-between",direction:"vertical"===i?"column":"row",hasError:!!d,className:r,withTitle:!!t},{children:[t&&u(si,wn({direction:i,size:"xs",weight:600},{children:t.toUpperCase()})),u(v,wn({item:!0,xs:"vertical"===i?12:"auto"},{children:u(ri,wn({form:a,name:o},l))}))]})),d&&u(O,{variant:"error",msg:d})]})}ti.defaultProps={disabled:!1,direction:"row",fullWidth:!1,defaultValue:void 0},ti.displayName="RadioButtons";var ai,oi,li,di,ci,pi=r.div(ai||(ai=Sn(["\n position: relative;\n"],["\n position: relative;\n"]))),ui=r(v,{shouldForwardProp:function(n){return"hasError"!==n&&"withTitle"!==n}})(di||(di=Sn(["\n border: 1px solid\n ",";\n ",";\n @media (max-width: ","px) {\n flex-direction: column;\n align-items: flex-start;\n border-radius: 8px;\n padding: 8px 15px;\n }\n"],["\n border: 1px solid\n ",";\n ",";\n @media (max-width: ","px) {\n flex-direction: column;\n align-items: flex-start;\n border-radius: 8px;\n padding: 8px 15px;\n }\n"])),(function(n){return n.hasError?f.palette.red.fiftyP:f.palette.grey.fifteenB}),(function(n){var e=n.direction,t=n.hasError,r=n.withTitle;return"column"===e?function(n){var e=n.hasError;return i(oi||(oi=Sn(["\n padding: 12px 15px 15px;\n border-radius: ",";\n"],["\n padding: 12px 15px 15px;\n border-radius: ",";\n"])),e?"8px 8px 0 0":"8px")}({hasError:t}):function(n){var e=n.hasError,t=n.withTitle;return i(li||(li=Sn(["\n padding: ",";\n border-radius: ",";\n"],["\n padding: ",";\n border-radius: ",";\n"])),t?"3px 4px 3px 16px":"3px",e?"8px 8px 0 0":"66px")}({hasError:t,withTitle:r})}),f.breakpoints.sm),si=r(m)(ci||(ci=Sn(["\n margin-bottom: ","px;\n @media (max-width: ","px) {\n margin-bottom: 8px;\n }\n"],["\n margin-bottom: ","px;\n @media (max-width: ","px) {\n margin-bottom: 8px;\n }\n"])),(function(n){return"vertical"===n.direction?8:0}),f.breakpoints.sm),hi=l((function(n){var e=n.height,t=n.className,r=yn(n,["height","className"]);return u(gi,wn({container:!0,alignItems:"center",justify:"center",className:t,height:e},{children:u(xi,wn({},r))}))}));hi.defaultProps={height:"adaptive"};var mi,fi,xi=r(T)(mi||(mi=Sn(["\n color: ",";\n"],["\n color: ",";\n"])),f.palette.brand.main),gi=r(v,{shouldForwardProp:function(n){return"height"!==n}})(fi||(fi=Sn(["\n height: ",";\n"],["\n height: ",";\n"])),(function(n){return n.height}));function bi(n){var e=n.creatingLabel,t=n.renderCreatingModal,r=R(),i=r[0],a=r[1],o=r[2];if(!e||!t)return null;return s(h,{children:[s(_i,wn({container:!0,onClick:a,alignItems:"center"},{children:[u(Ci,{width:12,height:12}),u(m,wn({color:"fiftyP",size:"xs",weight:500},{children:e}))]})),u(Si,wn({onClick:function(n){return n.stopPropagation()}},{children:t({open:i,handleClose:o})}))]})}var vi,wi,yi,ki,_i=r(v)(vi||(vi=Sn(["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ",";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"],["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ",";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"])),f.palette.grey.fifteenB),Ci=r(Z)(wi||(wi=Sn(["\n margin-right: 14px;\n path {\n fill: ",";\n }\n"],["\n margin-right: 14px;\n path {\n fill: ",";\n }\n"])),f.palette.grey.fiftyP),Si=r.div(yi||(yi=Sn([""],[""]))),zi=function(n){var e=n.option,t=n.renderOption,r=n.handleSelect,i=n.index;return u(Pi,wn({item:!0,xs:12,onClick:function(){r(e)},"data-testid":"autocomplete_option_".concat(i)},{children:t(e)}))},Pi=r(v)(ki||(ki=Sn(["\n cursor: pointer;\n"],["\n cursor: pointer;\n"])));function Ii(n){var e=n.options,t=n.renderOption,r=n.creatingLabel,i=n.renderCreatingModal,a=n.inputRef,o=n.isOpenDropdown,l=n.isLoading,d=n.input,c=n.handleCloseDropdown,p=n.handleSelect,h=n.handleScrollEnd;return s(Oi,wn({input:d,buttonRef:a,isOpen:o,handleClose:c,onScroll:function(n){n.target.scrollHeight-(n.target.scrollTop+n.target.offsetHeight)<100&&h&&h()},endComponent:u(bi,{creatingLabel:r,renderCreatingModal:i})},{children:[e.map((function(n,e){return u(zi,{option:n,renderOption:t,handleSelect:p,index:e},e)})),l&&u(Ti,{height:"auto"})]}))}var Ni,Mi,Oi=r(ue)(Ni||(Ni=Sn(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"],["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"]))),Ti=r(hi)(Mi||(Mi=Sn(["\n position: sticky;\n bottom: 30px;\n"],["\n position: sticky;\n bottom: 30px;\n"])));function ji(t){var r,i=t.renderOption,a=t.options,o=t.name,l=t.hideName,u=t.form,s=t.isLoading,h=t.onSelectItem,m=t.handleScrollEnd,f=t.onSearchItem,x=t.isLabelLoading,g=t.disabled,b=t.creatingLabel,w=t.renderCreatingModal,y=t.endComponent,k=t.inputRef,_=t.onOpen,C=yn(t,["renderOption","options","name","hideName","form","isLoading","onSelectItem","handleScrollEnd","onSearchItem","isLabelLoading","disabled","creatingLabel","renderCreatingModal","endComponent","inputRef","onOpen"]),S=p(!1),z=S[0],P=S[1],I=d(null);l&&u.register(l);var N=function(){g||P(!0)},M=function(){P(!1)};c((function(){_&&_(z)}),[z]);var O=L(I,k);return e(Bi,{children:[x&&n(Ui,{children:n(hi,{height:"100%"})}),n(Ii,{renderOption:i,options:a,inputRef:{current:null===(r=I.current)||void 0===r?void 0:r.parentElement},isOpenDropdown:z,handleCloseDropdown:M,handleSelect:function(n){var e;h(n),M(),(null===(e=u.getFieldState(o).error)||void 0===e?void 0:e.message)&&u.clearErrors(o)},isLoading:s,handleScrollEnd:m,creatingLabel:b,renderCreatingModal:w,input:n(Ri,wn({form:u,onInput:function(n){f&&(f(n.target.value),l&&u.setValue(l,null)),!n.target.value&&l&&(l&&u.setValue(l,null),u.setValue(o,null),h(null)),N()},onFocus:N,name:o,disabled:g,ref:O,isDropdownOpen:z},C,{endIcon:!g&&e(v,wn({container:!0,alignItems:"center",onClick:function(){P((function(n){return!n}))}},{children:[n(j,wn({mr:2},{children:y})),C.endIcon||!g&&n(Fi,{width:12,height:13,css:[z&&{transform:"rotate(180deg)"}]})]}))}))})]})}var Vi,Ei,Li,Di,Ui=r.div(Vi||(Vi=Sn(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"],["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"]))),Bi=r.div(Ei||(Ei=Sn(["\n position: relative;\n"],["\n position: relative;\n"]))),Ri=r(St)(Li||(Li=Sn(["\n .KUI-InputMessage {\n opacity: ",";\n }\n"],["\n .KUI-InputMessage {\n opacity: ",";\n }\n"])),(function(n){return n.isDropdownOpen?0:1})),Fi=r(W)(Di||(Di=Sn(["\n transition: all ease-out 0.3s;\n cursor: pointer;\n"],["\n transition: all ease-out 0.3s;\n cursor: pointer;\n"])));function Ki(n){var e=n.label;return u(Wi,{children:u(m,wn({size:"s",weight:500},{children:e}))})}var Ai,Wi=r.div(Ai||(Ai=Sn(["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ",";\n },\n"],["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ",";\n },\n"])),f.palette.background.light2);function Ji(n){var e=n.href,t=n.withoutRoute,r=n.stopPropagation,i=n.openInNewWindow,a=yn(n,["href","withoutRoute","stopPropagation","openInNewWindow"]),o=xn();return u(Yi,wn({href:e||void 0,onClick:function(n){r&&n.stopPropagation(),n.preventDefault(),e&&(t?E(e):i?window.open(e,"_blank"):o(e))}},a))}var Hi,Yi=r.a(Hi||(Hi=Sn(["\n text-decoration: none;\n color: inherit;\n max-width: 100%;\n width: 100%;\n"],["\n text-decoration: none;\n color: inherit;\n max-width: 100%;\n width: 100%;\n"])));function qi(n){var e,t,r=n.file,i=n.onDelete,a=n.onChange,o=n.index,l=n.selectedFile,f=n.setSelectedFile,g=n.limitTitle,b=n.icon,v=n.subtitle,w=n.disabled,y=n.error,k=n.className,_=yn(n,["file","onDelete","onChange","index","selectedFile","setSelectedFile","limitTitle","icon","subtitle","disabled","error","className"]),C=String(null===(t=r.title||r.name||(null===(e=r.file)||void 0===e?void 0:e.name))||void 0===t?void 0:t.replace(/\.[^/.]+$/,"")),S=p(C),z=S[0],P=S[1],I=p(!1),N=I[0],M=I[1],O=d(null);c((function(){var n;N&&(null===(n=O.current)||void 0===n||n.focus()),!N&&C!==z&&a&&a(z,o)}),[N]);return s(h,{children:[s(ia,wn({selected:(null!=l?l:-1)===o,error:g&&z.length>g||!!y,onClick:function(){f&&f(null!=o?o:1)},disabled:!!w,className:"FileWrapper ".concat(k||"")},_,{children:[u(aa,wn({className:"FileIcon_wrapper"},{children:b||u(nn,{})})),s(la,wn({className:"FileContent_wrapper"},{children:[s(pa,{children:[u(Ji,wn({href:r.url,openInNewWindow:!0},{children:u(ca,{children:z})})),u(da,{"data-testid":"file_name",ref:O,disabled:!N,value:z,onChange:function(n){P(n.target.value)},onBlur:function(){M(!1)},maxLength:100})]}),v||String(r.size)&&s(m,wn({"data-testid":"file_size",size:"xs",color:"fiftyP"},{children:[Number(r.size)," mb"]}))]})),s(oa,wn({className:"FileButtons_wrapper"},{children:[!w&&a&&u(x,wn({isCircle:!0,"data-testid":"edit_file_name_btn",size:"xs",variant:"transparentLight",onClick:function(){M((function(n){return!n}))}},{children:N?u(X,{}):u(en,{width:18,height:18})})),i&&!w&&u(x,wn({isCircle:!0,"data-testid":"delete_file_btn",size:"xs",variant:"transparentLight",onClick:function(){var n;i&&i(null!==(n=r.index)&&void 0!==n?n:1,Number(o))}},{children:u(tn,{width:18,height:18})}))]}))]})),(g&&z.length>g||y)&&u(j,wn({mb:1},{children:u(m,wn({size:"xs",colorGroup:"red",weight:500},{children:y||"File upload error. The number of characters in the file name should not exceed 100"}))}))]})}qi.defaultProps={limitTitle:100};var Gi,$i,Qi,Xi,Zi,na,ea,ta,ra,ia=r.div(Qi||(Qi=Sn(["\n width: 100%;\n border-radius: 12px;\n padding: 10px 12px;\n border: 1px solid\n ",";\n display: flex;\n margin-bottom: 8px;\n cursor: pointer;\n background: white;\n ",";\n ",";\n &:last-child {\n margin-bottom: 0;\n }\n"],["\n width: 100%;\n border-radius: 12px;\n padding: 10px 12px;\n border: 1px solid\n ",";\n display: flex;\n margin-bottom: 8px;\n cursor: pointer;\n background: white;\n ",";\n ",";\n &:last-child {\n margin-bottom: 0;\n }\n"])),(function(n){return n.selected?f.palette.brand.main:f.palette.grey.fifteenB}),(function(n){return n.disabled&&i($i||($i=Sn(["\n background: ",";\n "],["\n background: ",";\n "])),f.palette.background.light1)}),(function(n){return n.error&&i(Gi||(Gi=Sn(["\n border-color: ",";\n "],["\n border-color: ",";\n "])),f.palette.red.seventy)})),aa=r.div(Xi||(Xi=Sn(["\n margin-right: 16px;\n min-height: 32px;\n width: 32px;\n border-radius: 12px;\n background: ",";\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: flex-start;\n"],["\n margin-right: 16px;\n min-height: 32px;\n width: 32px;\n border-radius: 12px;\n background: ",";\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: flex-start;\n"])),f.palette.brand.light),oa=r.div(Zi||(Zi=Sn(["\n margin-left: auto;\n padding-left: 8px;\n display: flex;\n align-items: center;\n align-self: flex-start;\n svg {\n path {\n fill: ",";\n }\n }\n"],["\n margin-left: auto;\n padding-left: 8px;\n display: flex;\n align-items: center;\n align-self: flex-start;\n svg {\n path {\n fill: ",";\n }\n }\n"])),f.palette.grey.thirty),la=r.div(na||(na=Sn(["\n width: calc(100% - 120px);\n min-height: 34px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n & > p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"],["\n width: calc(100% - 120px);\n min-height: 34px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n & > p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"]))),da=r.textarea(ea||(ea=Sn(["\n border: none;\n font-size: 14px;\n position: absolute;\n top: 0;\n left: 0;\n font-weight: 500;\n background: transparent;\n padding: 0;\n color: ",";\n caret-color: ",";\n height: -webkit-fill-available;\n overflow: hidden;\n resize: none;\n width: 100%;\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n pointer-events: none;\n }\n"],["\n border: none;\n font-size: 14px;\n position: absolute;\n top: 0;\n left: 0;\n font-weight: 500;\n background: transparent;\n padding: 0;\n color: ",";\n caret-color: ",";\n height: -webkit-fill-available;\n overflow: hidden;\n resize: none;\n width: 100%;\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n pointer-events: none;\n }\n"])),f.palette.grey.seventy,f.palette.brand.main),ca=r.span(ta||(ta=Sn(["\n font-size: 14px;\n font-weight: 500;\n word-break: break-word;\n max-width: 100%;\n color: transparent;\n min-height: 17px;\n display: inline-block;\n white-space: nowrap;\n"],["\n font-size: 14px;\n font-weight: 500;\n word-break: break-word;\n max-width: 100%;\n color: transparent;\n min-height: 17px;\n display: inline-block;\n white-space: nowrap;\n"]))),pa=r.div(ra||(ra=Sn(["\n position: relative;\n width: fit-content;\n max-width: 100%;\n height: auto;\n"],["\n position: relative;\n width: fit-content;\n max-width: 100%;\n height: auto;\n"]))),ua=l((function(n,e){var t,r=n.form,i=n.name,a=n.parentName,o=n.label,l=n.disabled,f=n.withEdit,x=n.fileName,g=n.onChange,b=n.isRequired,w=n.uploadLabel,y=n.toBigTitleMessage,k=yn(n,["form","name","parentName","label","disabled","withEdit","fileName","onChange","isRequired","uploadLabel","toBigTitleMessage"]),_=p(!1),C=_[0],S=_[1],z=p(),P=z[0],I=z[1],N=p(""),M=N[0],T=N[1],j=d(null),V=on({control:r.control,name:i}),E=V.field,L=V.fieldState,D=on({control:r.control,name:a||i}).field,U=null==P?void 0:P.name.split(".").pop(),B=P&&"url"in P?P:{file:P,url:P?URL.createObjectURL(P):M,size:P?Math.round(P.size/1048576*100)/100:null,name:x?"".concat(x,".").concat(U):null==P?void 0:P.name},R=null===(t=L.error)||void 0===t?void 0:t.message;c((function(){"string"==typeof E.value&&T(E.value),"object"==typeof E.value&&I(E.value),S(!0)}),[]),c((function(){var n,e=Number((null==x?void 0:x.length)||(null===(n=null==P?void 0:P.name)||void 0===n?void 0:n.length))>100;C&&!M&&E.onChange({target:{value:P,name:i},type:"change"}),e?r.setError(i,{type:"custom",message:y||"The file name must be less than 100 characters"}):r.clearErrors(i)}),[P]);return s(ga,{children:[u(va,wn({type:"file",onInput:function(n){if(n.target.files&&n.target.files[0]){var e=n.target.files[0];I(e),g&&g(e)}else I(void 0)}},k,{ref:function(n){e&&(e.current=n),j.current=n}})),P||M?u(qi,{file:B,onDelete:function(){P&&j.current&&(j.current.value=""),I(void 0),T(""),a?D.onChange({target:{value:null,name:a},type:"change"}):E.onChange({target:{value:null,name:i},type:"change"}),g&&g(null)},onChange:f&&function(n){var e,t=r.getValues(i),a="".concat(n,".").concat(U);"updateName"in t?(t.updateName(n),e=t):e=new File([t],a,{type:t.type}),I(e)},error:R,disabled:l}):s(h,{children:[s(ba,wn({error:!!R,disabled:l,container:!0,justify:"space-between",alignItems:"center"},{children:[u(wa,wn({item:!0},{children:s(m,wn({size:"s",color:"fiftyP"},{children:[o,b?" *":""]}))})),u(v,wn({item:!0},{children:u(ya,wn({disabled:l,size:"s",onClick:function(){j.current&&j.current.click()}},{children:w||"Upload"}))}))]})),R&&u(O,{variant:"error",msg:R})]})]})}));ua.defaultProps={withEdit:!0};var sa,ha,ma,fa,xa,ga=r.div(sa||(sa=Sn(["\n position: relative;\n"],["\n position: relative;\n"]))),ba=r(v)(ha||(ha=Sn(["\n border-radius: ",";\n border: 1px solid\n ",";\n background: ",";\n height: 56px;\n padding: 0 8px 0 15px;\n"],["\n border-radius: ",";\n border: 1px solid\n ",";\n background: ",";\n height: 56px;\n padding: 0 8px 0 15px;\n"])),(function(n){return n.error?"8px 8px 0 0":"8px"}),(function(n){return n.error?f.palette.red.fiftyP:f.palette.grey.fifteenB}),(function(n){return n.disabled?f.palette.background.light1:f.palette.grey.zero})),va=r.input(ma||(ma=Sn(["\n display: none;\n"],["\n display: none;\n"]))),wa=r(v)(fa||(fa=Sn(["\n max-width: calc(100% - 32px);\n"],["\n max-width: calc(100% - 32px);\n"]))),ya=r(x)(xa||(xa=Sn(["\n border-radius: 12px;\n"],["\n border-radius: 12px;\n"]))),ka=l((function(n,e){var t=n.form,r=n.name,i=n.label,a=n.labelProps,o=yn(n,["form","name","label","labelProps"]);return u(ln,{control:t.control,name:String(r),render:function(n){var e,t=n.field,r=n.fieldState;return u(N,wn({},o,t,{error:null===(e=r.error)||void 0===e?void 0:e.message,checked:t.value||"",onChange:function(n){return function(n,e){e.onChange(n),o.onChange&&o.onChange(n)}(n,t)},label:"string"==typeof i?u(m,wn({},a,{children:i})):i}))}})}));function _a(n){var e=n.title,t=n.options,r=n.form;n.name;var i=yn(n,["title","options","form","name"]);return s(Pa,wn({container:!0,alignItems:"center",justify:"space-between"},{children:[u(v,wn({item:!0},{children:u(m,wn({size:"s",weight:500,color:"fiftyP"},{children:e}))})),u(v,wn({item:!0},{children:u(v,wn({container:!0},{children:t.map((function(n){return u(za,wn({name:n.name,label:u(m,wn({size:"s",color:"fiftyP",weight:500},{children:n.label})),form:r,testId:n.name},i),n.name)}))}))}))]}))}var Ca,Sa,za=r(ka)(Ca||(Ca=Sn(["\n &:not(:last-child) {\n margin-right: 22px;\n }\n"],["\n &:not(:last-child) {\n margin-right: 22px;\n }\n"]))),Pa=r(v)(Sa||(Sa=Sn(["\n padding: 3px 16px;\n border: 1px solid ",";\n border-radius: 66px;\n height: 40px;\n background: white;\n"],["\n padding: 3px 16px;\n border: 1px solid ",";\n border-radius: 66px;\n height: 40px;\n background: white;\n"])),f.palette.grey.fifteenB),Ia={mapKey:""},Na=[],Ma=function(){return wn({},Ia)},Oa=function(n){Ia=wn(wn({},Ia),n),Na.forEach((function(n){return n(Ia)}))},Ta=function(n){Na.push(n)},ja=function(n){var e=Na.indexOf(n);-1!==e&&Na.splice(e,1)},Va=function(n){return"LOADING"===n?u(hi,{height:"100%"}):"FAILURE"===n?u("h3",{children:n}):u("div",{})};function Ea(n){var e=n.children,t=p(!1),r=t[0],i=t[1],a=p("LOADING"),o=a[0],l=a[1],d=p(Ma().mapKey),s=d[0],m=d[1];return c((function(){var n=function(n){return m(n.mapKey)};return Ta(n),function(){ja(n)}}),[]),c((function(){if(!r&&s){var n=new vn({apiKey:s,libraries:["places"],language:"ru"}),e=function(n){l(n)};e("LOADING"),n.load().then((function(){return e("SUCCESS")}),(function(){return e("FAILURE")}))}return function(){return i(!0)}}),[s]),s?"SUCCESS"===o&&e?u(h,{children:e}):(Va(o),u(h,{})):u("h2",{children:"Add google key"})}var La=function(n,e,t){var r=p(null),i=r[0],a=r[1],o=d(null);function l(r){var i,o,l,d,c,p,u;return kn(this,void 0,void 0,(function(){var s,h,m,f,x,g,b;return _n(this,(function(v){return s=(null===(i=r.geometry)||void 0===i?void 0:i.location)?{lat:r.geometry.location.lat(),lng:r.geometry.location.lng()}:null,h=null==s?void 0:s.lat,m=null==s?void 0:s.lng,t&&t(h&&m?{lat:h,lng:m}:null,r),null==n||n.setValue("".concat(e,".location.lat"),h,{shouldValidate:!0}),null==n||n.setValue("".concat(e,".location.lng"),m,{shouldValidate:!0}),n.setValue("".concat(e,".addressAutoComplete"),r,{shouldValidate:!0}),f=null===(l=null===(o=r.address_components)||void 0===o?void 0:o.find((function(n){return n.types.includes("route")})))||void 0===l?void 0:l.short_name,x=null===(c=null===(d=r.address_components)||void 0===d?void 0:d.find((function(n){return n.types.includes("street_number")})))||void 0===c?void 0:c.short_name,g=null===(u=null===(p=r.address_components)||void 0===p?void 0:p.find((function(n){return n.types.includes("postal_code")})))||void 0===u?void 0:u.short_name,b=r.formatted_address,f&&x&&(b="".concat(f,", ").concat(x)),null==n||n.setValue("".concat(e,".address"),b,{shouldValidate:!0}),n.setValue("zipCode",g),a(r),[2]}))}))}var u=function(){window.google&&o.current?function(){if(o.current){var n=new window.google.maps.places.Autocomplete(o.current);n.addListener("place_changed",(function(){l(n.getPlace())}))}}():setTimeout(u,1)};return c((function(){var r,i,o,l;u(),r=n.getValues("".concat(e,".address")),i=n.getValues("".concat(e,".location.lat")),o=n.getValues("".concat(e,".location.lng")),l={formatted_address:r,geometry:{location:{lat:i,lng:o}}},t&&t(i&&o?{lat:i,lng:o}:null,null),r&&i&&o&&a(l)}),[]),{inputRef:o,handlePlaceSelect:l,place:i,cleanLocation:function(){a(null),null==n||n.setValue("".concat(e,".location.lat"),null,{shouldValidate:!0}),null==n||n.setValue("".concat(e,".location.lng"),null,{shouldValidate:!0}),null==n||n.setValue("".concat(e,".addressAutoComplete"),null,{shouldValidate:!0}),null==n||n.setValue("".concat(e,".address"),"",{shouldValidate:!0})}}};function Da(n){var e=n.form,t=n.name,r=n.handlePlaceSelect,i=yn(n,["form","name","handlePlaceSelect"]),a=La(e,t,r).inputRef;return u(Ea,{children:u(St,wn({name:"".concat(t,".address"),form:e,ref:a,placeholder:""},i))})}Da.defaultProps={label:"Address"};var Ua=function(n){var e=n.dependentInputName,t=n.form,r=n.disabled,i=n.Input,a=yn(n,["dependentInputName","form","disabled","Input"]),o=dn({control:t.control,name:e}),l=wn({form:t,disabled:r||!o},a);return u(i||St,wn({},l))},Ba=function(n){var e=n.landlord,t=n.tenant;return e&&t?"everybody":e?"landlord":t?"tenant":"nobody"},Ra=function(n){switch(n){case"everybody":return{tenant:!0,landlord:!0};case"landlord":return{tenant:!1,landlord:!0};case"tenant":return{tenant:!0,landlord:!1};default:return{tenant:!1,landlord:!1}}};export{Ki as AutocompleteOption,Rn as Avatar,Yr as ButtonSelect,qn as ButtonTab,Qn as ButtonsPanel,tt as CalendarHeaderWithSelect,it as CalendarStandardContainer,ot as CalendarStandardHeader,_a as CheckboxGroupWithTitle,ka as CheckboxWithController,Ua as DependentInput,gt as DesktopInputWithMonthPicker,kt as DesktopMenuPanel,ue as InputDropdown,ua as InputFile,pt as InputForDatepicker,ei as InputMultiSelect,Dt as InputPassword,br as InputPhoneWithForm,$e as InputSelect,ve as InputSelectBase,xe as InputSelectDropdown,Gr as InputSelectWithController,Bt as InputTextAreaMobile,Da as InputWithAddressAutocomplete,ji as InputWithAutocomplete,St as InputWithController,Ht as InputWithDatePicker,Ct as InputWithMask,cr as InputWithMonthPicker,hi as Loading,Ea as MapWrapper,vt as MenuItem,sr as MenuPanel,or as MobileInputWithMonthPicker,pr as MobileMenuPanel,st as MonthPickerContainer,mt as MonthPickerHeader,Nt as PassportStrengthBar,ti as RadioButtons,ri as RadioButtonsWithController,ii as RadioGroupWithLabel,et as SelectMonth,Xe as SelectYear,gr as Switch,Mr as Table,jr as TableCell,Tr as TableHeadCell,Vr as TableRow,Kr as Tooltip,Un as UndefinedAvatar,Lt as getFormError,Et as getFormValue,Ma as getSettings,Ba as getVisibility,Ra as getVisibilitySettings,Oa as setSettings,ir as shortMonths,Ta as subscribeToSettings,ja as unsubscribeFromSettings,La as useAddressAutocomplete};
|