@livechat/design-system-react-components 1.0.0-alpha.4 → 1.0.0-alpha.40

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.
Files changed (288) hide show
  1. package/dist/dsrc.cjs.js +15 -0
  2. package/dist/dsrc.es.js +4418 -0
  3. package/dist/dsrc.umd.js +15 -0
  4. package/dist/shadow/shadow.css +27 -0
  5. package/dist/shadow/shadow.css.map +1 -0
  6. package/dist/shadow/spacing.css +18 -0
  7. package/dist/shadow/spacing.css.map +1 -0
  8. package/dist/spacing/shadow.css +27 -0
  9. package/dist/spacing/shadow.css.map +1 -0
  10. package/dist/spacing/spacing.css +18 -0
  11. package/dist/spacing/spacing.css.map +1 -0
  12. package/dist/src/components/Alert/Alert.d.ts +9 -0
  13. package/dist/src/components/Avatar/Avatar.d.ts +19 -0
  14. package/dist/src/components/Avatar/Avatar.helpers.d.ts +2 -0
  15. package/dist/src/components/Avatar/index.d.ts +1 -0
  16. package/dist/src/components/Badge/Badge.d.ts +9 -0
  17. package/dist/src/components/Badge/Badge.helpers.d.ts +1 -0
  18. package/dist/src/components/Button/Button.d.ts +13 -0
  19. package/dist/src/components/Button/index.d.ts +2 -0
  20. package/dist/src/components/Card/Card.d.ts +12 -0
  21. package/dist/src/components/Checkbox/Checkbox.d.ts +7 -0
  22. package/dist/src/components/Checkbox/index.d.ts +1 -0
  23. package/dist/src/components/DatePicker/DatePicker.d.ts +4 -0
  24. package/dist/src/components/DatePicker/DatePickerNavbar.d.ts +4 -0
  25. package/dist/src/components/DatePicker/RangeDatePicker.d.ts +16 -0
  26. package/dist/src/components/DatePicker/helpers.d.ts +39 -0
  27. package/dist/src/components/DatePicker/hooks.d.ts +6 -0
  28. package/dist/src/components/DatePicker/index.d.ts +2 -0
  29. package/dist/src/components/DatePicker/types.d.ts +100 -0
  30. package/dist/src/components/FieldDescription/FieldDescription.d.ts +3 -0
  31. package/dist/src/components/FieldError/FieldError.d.ts +3 -0
  32. package/dist/src/components/FieldGroup/FieldGroup.d.ts +8 -0
  33. package/dist/src/components/FileUploadProgress/FileUploadProgress.d.ts +15 -0
  34. package/dist/src/components/FileUploadProgress/FileUploadProgressActions.d.ts +9 -0
  35. package/dist/src/components/FileUploadProgress/index.d.ts +2 -0
  36. package/dist/src/components/Form/Form.d.ts +7 -0
  37. package/dist/src/components/FormField/FormField.d.ts +13 -0
  38. package/dist/src/components/FormField/index.d.ts +1 -0
  39. package/dist/src/components/FormGroup/FormGroup.d.ts +7 -0
  40. package/dist/src/components/Icon/Icon.d.ts +14 -0
  41. package/dist/src/components/Icon/index.d.ts +1 -0
  42. package/dist/src/components/Input/Input.d.ts +14 -0
  43. package/dist/src/components/Input/index.d.ts +1 -0
  44. package/{src/components/Link/Link.tsx → dist/src/components/Link/Link.d.ts} +3 -26
  45. package/dist/src/components/Loader/Loader.d.ts +10 -0
  46. package/dist/src/components/Modal/Modal.d.ts +9 -0
  47. package/dist/src/components/Modal/ModalBase.d.ts +7 -0
  48. package/dist/src/components/Modal/ModalCloseButton.d.ts +6 -0
  49. package/dist/src/components/Modal/ModalPortal.d.ts +7 -0
  50. package/{src/components/Modal/index.ts → dist/src/components/Modal/index.d.ts} +0 -3
  51. package/dist/src/components/NumericInput/NumericInput.d.ts +14 -0
  52. package/dist/src/components/NumericInput/index.d.ts +1 -0
  53. package/dist/src/components/Picker/Picker.d.ts +23 -0
  54. package/dist/src/components/Picker/PickerList.d.ts +23 -0
  55. package/dist/src/components/Picker/Trigger.d.ts +15 -0
  56. package/dist/src/components/Picker/TriggerBody.d.ts +16 -0
  57. package/dist/src/components/Picker/constants.d.ts +21 -0
  58. package/dist/src/components/Picker/index.d.ts +2 -0
  59. package/dist/src/components/Popover/Popover.d.ts +12 -0
  60. package/dist/src/components/Progress/ProgressBar.d.ts +9 -0
  61. package/dist/src/components/Progress/ProgressCircle.d.ts +9 -0
  62. package/dist/src/components/Progress/constants.d.ts +4 -0
  63. package/dist/src/components/Progress/helpers.d.ts +3 -0
  64. package/{src/components/Progress/index.ts → dist/src/components/Progress/index.d.ts} +1 -0
  65. package/dist/src/components/PromoBanner/PromoBanner.d.ts +13 -0
  66. package/dist/src/components/RadioButton/RadioButton.d.ts +7 -0
  67. package/dist/src/components/Search/Search.d.ts +12 -0
  68. package/dist/src/components/Search/index.d.ts +1 -0
  69. package/dist/src/components/SegmentedControl/SegmentedControl.d.ts +18 -0
  70. package/dist/src/components/SegmentedControl/index.d.ts +2 -0
  71. package/dist/src/components/Switch/Switch.d.ts +17 -0
  72. package/dist/src/components/Tab/Tab.d.ts +15 -0
  73. package/dist/src/components/Tab/TabsWrapper.d.ts +3 -0
  74. package/dist/src/components/Tag/Tag.d.ts +14 -0
  75. package/dist/src/components/TagInput/EditableTag.d.ts +11 -0
  76. package/dist/src/components/TagInput/EditableTagContent.d.ts +11 -0
  77. package/dist/src/components/TagInput/EmailTagInput.d.ts +5 -0
  78. package/dist/src/components/TagInput/TagInput.d.ts +13 -0
  79. package/dist/src/components/Textarea/Textarea.d.ts +6 -0
  80. package/dist/src/components/Textarea/index.d.ts +1 -0
  81. package/dist/src/components/Toast/Toast.d.ts +16 -0
  82. package/dist/src/components/Toast/ToastWrapper.d.ts +20 -0
  83. package/dist/src/components/Tooltip/Info.d.ts +8 -0
  84. package/dist/src/components/Tooltip/Interactive.d.ts +14 -0
  85. package/dist/src/components/Tooltip/Simple.d.ts +4 -0
  86. package/dist/src/components/Tooltip/SpotlightOverlay.d.ts +7 -0
  87. package/dist/src/components/Tooltip/Tooltip.d.ts +22 -0
  88. package/dist/src/components/Tooltip/UserGuide.d.ts +12 -0
  89. package/dist/src/components/Tooltip/helpers.d.ts +2 -0
  90. package/dist/src/components/Tooltip/index.d.ts +5 -0
  91. package/dist/src/components/Tooltip/virtualElementReference.d.ts +9 -0
  92. package/dist/src/components/Typography/Heading.d.ts +11 -0
  93. package/dist/src/components/Typography/Text.d.ts +15 -0
  94. package/dist/src/components/UploadBar/UploadBar.d.ts +16 -0
  95. package/dist/src/components/UploadBar/index.d.ts +1 -0
  96. package/dist/src/foundations/shadow-token.d.ts +5 -0
  97. package/dist/src/foundations/spacing-token.d.ts +16 -0
  98. package/{src/index.ts → dist/src/index.d.ts} +16 -7
  99. package/dist/src/themes/design-token.d.ts +226 -0
  100. package/dist/src/utils/constants.d.ts +1 -0
  101. package/dist/src/utils/index.d.ts +1 -0
  102. package/dist/src/utils/keyCodes.d.ts +12 -0
  103. package/dist/src/utils/noop.d.ts +1 -0
  104. package/dist/style.css +1 -0
  105. package/dist/themes/dark.css +253 -0
  106. package/dist/themes/dark.css.map +1 -0
  107. package/dist/themes/legacy.css +254 -0
  108. package/dist/themes/legacy.css.map +1 -0
  109. package/dist/themes/light.css +253 -0
  110. package/dist/themes/light.css.map +1 -0
  111. package/package.json +26 -13
  112. package/.eslintrc +0 -9
  113. package/.storybook/main.js +0 -20
  114. package/.storybook/preview-head.html +0 -31
  115. package/.storybook/preview.js +0 -21
  116. package/src/components/Alert/Alert.module.scss +0 -88
  117. package/src/components/Alert/Alert.spec.tsx +0 -78
  118. package/src/components/Alert/Alert.stories.tsx +0 -73
  119. package/src/components/Alert/Alert.tsx +0 -94
  120. package/src/components/Badge/Badge.module.scss +0 -23
  121. package/src/components/Badge/Badge.spec.tsx +0 -12
  122. package/src/components/Badge/Badge.stories.tsx +0 -24
  123. package/src/components/Badge/Badge.tsx +0 -24
  124. package/src/components/Button/Button.module.scss +0 -257
  125. package/src/components/Button/Button.spec.tsx +0 -110
  126. package/src/components/Button/Button.stories.tsx +0 -152
  127. package/src/components/Button/Button.tsx +0 -88
  128. package/src/components/Button/index.ts +0 -2
  129. package/src/components/ButtonGroup/ButtonGroup.module.scss +0 -31
  130. package/src/components/ButtonGroup/ButtonGroup.spec.tsx +0 -61
  131. package/src/components/ButtonGroup/ButtonGroup.stories.tsx +0 -53
  132. package/src/components/ButtonGroup/ButtonGroup.tsx +0 -75
  133. package/src/components/ButtonGroup/index.ts +0 -1
  134. package/src/components/Card/Card.module.scss +0 -31
  135. package/src/components/Card/Card.spec.tsx +0 -38
  136. package/src/components/Card/Card.stories.tsx +0 -30
  137. package/src/components/Card/Card.tsx +0 -34
  138. package/src/components/Checkbox/Checkbox.module.scss +0 -99
  139. package/src/components/Checkbox/Checkbox.tsx +0 -39
  140. package/src/components/Checkbox/CheckboxField.spec.tsx +0 -58
  141. package/src/components/Checkbox/CheckboxField.stories.tsx +0 -30
  142. package/src/components/Checkbox/CheckboxField.tsx +0 -46
  143. package/src/components/Checkbox/index.ts +0 -2
  144. package/src/components/FieldDescription/FieldDescription.module.scss +0 -5
  145. package/src/components/FieldDescription/FieldDescription.tsx +0 -23
  146. package/src/components/FieldError/FieldError.module.scss +0 -5
  147. package/src/components/FieldError/FieldError.tsx +0 -23
  148. package/src/components/FieldGroup/FieldGroup.module.scss +0 -25
  149. package/src/components/FieldGroup/FieldGroup.spec.tsx +0 -42
  150. package/src/components/FieldGroup/FieldGroup.stories.tsx +0 -34
  151. package/src/components/FieldGroup/FieldGroup.tsx +0 -38
  152. package/src/components/Form/Form.module.scss +0 -22
  153. package/src/components/Form/Form.spec.tsx +0 -38
  154. package/src/components/Form/Form.stories.tsx +0 -42
  155. package/src/components/Form/Form.tsx +0 -46
  156. package/src/components/FormGroup/FormGroup.module.scss +0 -20
  157. package/src/components/FormGroup/FormGroup.spec.tsx +0 -34
  158. package/src/components/FormGroup/FormGroup.stories.tsx +0 -30
  159. package/src/components/FormGroup/FormGroup.tsx +0 -44
  160. package/src/components/Icon/Icon.module.scss +0 -70
  161. package/src/components/Icon/Icon.stories.tsx +0 -53
  162. package/src/components/Icon/Icon.tsx +0 -118
  163. package/src/components/Icon/index.ts +0 -1
  164. package/src/components/InputField/InputField.module.scss +0 -37
  165. package/src/components/InputField/InputField.spec.tsx +0 -53
  166. package/src/components/InputField/InputField.stories.tsx +0 -73
  167. package/src/components/InputField/InputField.tsx +0 -72
  168. package/src/components/InputField/index.ts +0 -1
  169. package/src/components/Link/Link.module.scss +0 -18
  170. package/src/components/Link/Link.stories.tsx +0 -17
  171. package/src/components/Loader/Loader.module.scss +0 -66
  172. package/src/components/Loader/Loader.spec.tsx +0 -64
  173. package/src/components/Loader/Loader.stories.tsx +0 -25
  174. package/src/components/Loader/Loader.tsx +0 -48
  175. package/src/components/Modal/ActionModal.tsx +0 -37
  176. package/src/components/Modal/Modal.module.scss +0 -131
  177. package/src/components/Modal/Modal.stories.tsx +0 -85
  178. package/src/components/Modal/Modal.tsx +0 -41
  179. package/src/components/Modal/ModalBase.spec.tsx +0 -58
  180. package/src/components/Modal/ModalBase.tsx +0 -66
  181. package/src/components/Modal/ModalCloseButton.tsx +0 -20
  182. package/src/components/Modal/ModalPortal.tsx +0 -35
  183. package/src/components/NumericInput/NumericInput.module.scss +0 -110
  184. package/src/components/NumericInput/NumericInput.spec.tsx +0 -129
  185. package/src/components/NumericInput/NumericInput.stories.tsx +0 -56
  186. package/src/components/NumericInput/NumericInput.tsx +0 -161
  187. package/src/components/NumericInput/NumericInputField.stories.tsx +0 -58
  188. package/src/components/NumericInput/NumericInputField.tsx +0 -57
  189. package/src/components/NumericInput/index.ts +0 -2
  190. package/src/components/Popover/Popover.module.scss +0 -16
  191. package/src/components/Popover/Popover.spec.tsx +0 -39
  192. package/src/components/Popover/Popover.stories.css +0 -23
  193. package/src/components/Popover/Popover.stories.tsx +0 -164
  194. package/src/components/Popover/Popover.tsx +0 -124
  195. package/src/components/Progress/ProgressBar.module.scss +0 -48
  196. package/src/components/Progress/ProgressBar.spec.tsx +0 -33
  197. package/src/components/Progress/ProgressBar.stories.tsx +0 -23
  198. package/src/components/Progress/ProgressBar.tsx +0 -62
  199. package/src/components/Progress/ProgressCircle.module.scss +0 -64
  200. package/src/components/Progress/ProgressCircle.spec.tsx +0 -34
  201. package/src/components/Progress/ProgressCircle.stories.tsx +0 -28
  202. package/src/components/Progress/ProgressCircle.tsx +0 -104
  203. package/src/components/Progress/constants.ts +0 -23
  204. package/src/components/Progress/helpers.ts +0 -23
  205. package/src/components/PromoBanner/PromoBanner.module.scss +0 -121
  206. package/src/components/PromoBanner/PromoBanner.spec.tsx +0 -119
  207. package/src/components/PromoBanner/PromoBanner.stories.tsx +0 -125
  208. package/src/components/PromoBanner/PromoBanner.tsx +0 -99
  209. package/src/components/RadioButton/RadioButton.module.scss +0 -100
  210. package/src/components/RadioButton/RadioButton.spec.tsx +0 -70
  211. package/src/components/RadioButton/RadioButton.stories.tsx +0 -34
  212. package/src/components/RadioButton/RadioButton.tsx +0 -54
  213. package/src/components/Switch/Switch.module.scss +0 -126
  214. package/src/components/Switch/Switch.spec.tsx +0 -40
  215. package/src/components/Switch/Switch.stories.tsx +0 -23
  216. package/src/components/Switch/Switch.tsx +0 -100
  217. package/src/components/Tab/Tab.module.scss +0 -56
  218. package/src/components/Tab/Tab.spec.tsx +0 -34
  219. package/src/components/Tab/Tab.stories.tsx +0 -20
  220. package/src/components/Tab/Tab.tsx +0 -49
  221. package/src/components/Tab/TabsWrapper.module.scss +0 -11
  222. package/src/components/Tab/TabsWrapper.spec.tsx +0 -19
  223. package/src/components/Tab/TabsWrapper.stories.tsx +0 -46
  224. package/src/components/Tab/TabsWrapper.tsx +0 -24
  225. package/src/components/Tag/Tag.module.scss +0 -131
  226. package/src/components/Tag/Tag.spec.tsx +0 -93
  227. package/src/components/Tag/Tag.stories.tsx +0 -151
  228. package/src/components/Tag/Tag.tsx +0 -129
  229. package/src/components/TagInput/EditableTag.tsx +0 -54
  230. package/src/components/TagInput/EditableTagContent.tsx +0 -81
  231. package/src/components/TagInput/EmailTagInput.tsx +0 -31
  232. package/src/components/TagInput/TagInput.module.scss +0 -81
  233. package/src/components/TagInput/TagInput.spec.tsx +0 -58
  234. package/src/components/TagInput/TagInput.stories.tsx +0 -49
  235. package/src/components/TagInput/TagInput.tsx +0 -133
  236. package/src/components/TextField/TextField.module.scss +0 -90
  237. package/src/components/TextField/TextField.spec.tsx +0 -40
  238. package/src/components/TextField/TextField.stories.tsx +0 -60
  239. package/src/components/TextField/TextField.tsx +0 -100
  240. package/src/components/TextField/index.ts +0 -1
  241. package/src/components/Toast/Toast.module.scss +0 -218
  242. package/src/components/Toast/Toast.spec.tsx +0 -96
  243. package/src/components/Toast/Toast.stories.tsx +0 -64
  244. package/src/components/Toast/Toast.tsx +0 -121
  245. package/src/components/Toast/ToastWrapper.spec.tsx +0 -13
  246. package/src/components/Toast/ToastWrapper.stories.tsx +0 -55
  247. package/src/components/Toast/ToastWrapper.tsx +0 -87
  248. package/src/components/Typography/Heading.tsx +0 -36
  249. package/src/components/Typography/Text.tsx +0 -49
  250. package/src/components/Typography/Typography.module.scss +0 -132
  251. package/src/index.scss +0 -9
  252. package/src/stories/ColorTokens.stories.mdx +0 -10
  253. package/src/stories/Icons.stories.mdx +0 -12
  254. package/src/stories/Typography.stories.mdx +0 -65
  255. package/src/stories/components/ColorTokens.tsx +0 -99
  256. package/src/stories/components/IconsShowcase.tsx +0 -25
  257. package/src/stories/components/iconsShowcase.css +0 -13
  258. package/src/test/setup.ts +0 -1
  259. package/src/test/utils.ts +0 -3
  260. package/src/themes/dark.scss +0 -127
  261. package/src/themes/designTokens.ts +0 -126
  262. package/src/themes/legacy.scss +0 -128
  263. package/src/themes/light.scss +0 -127
  264. package/src/utils/keyCodes.ts +0 -12
  265. package/src/utils/noop.ts +0 -2
  266. package/tsconfig.json +0 -25
  267. package/tsconfig.node.json +0 -8
  268. package/vite.config.ts +0 -44
  269. /package/{src/components/Alert/index.ts → dist/src/components/Alert/index.d.ts} +0 -0
  270. /package/{src/components/Badge/index.ts → dist/src/components/Badge/index.d.ts} +0 -0
  271. /package/{src/components/Card/index.ts → dist/src/components/Card/index.d.ts} +0 -0
  272. /package/{src/components/FieldDescription/index.ts → dist/src/components/FieldDescription/index.d.ts} +0 -0
  273. /package/{src/components/FieldError/index.ts → dist/src/components/FieldError/index.d.ts} +0 -0
  274. /package/{src/components/FieldGroup/index.ts → dist/src/components/FieldGroup/index.d.ts} +0 -0
  275. /package/{src/components/Form/index.ts → dist/src/components/Form/index.d.ts} +0 -0
  276. /package/{src/components/FormGroup/index.ts → dist/src/components/FormGroup/index.d.ts} +0 -0
  277. /package/{src/components/Link/index.ts → dist/src/components/Link/index.d.ts} +0 -0
  278. /package/{src/components/Loader/index.ts → dist/src/components/Loader/index.d.ts} +0 -0
  279. /package/{src/components/Popover/index.ts → dist/src/components/Popover/index.d.ts} +0 -0
  280. /package/{src/components/PromoBanner/index.ts → dist/src/components/PromoBanner/index.d.ts} +0 -0
  281. /package/{src/components/RadioButton/index.ts → dist/src/components/RadioButton/index.d.ts} +0 -0
  282. /package/{src/components/Switch/index.ts → dist/src/components/Switch/index.d.ts} +0 -0
  283. /package/{src/components/Tab/index.ts → dist/src/components/Tab/index.d.ts} +0 -0
  284. /package/{src/components/Tag/index.ts → dist/src/components/Tag/index.d.ts} +0 -0
  285. /package/{src/components/TagInput/index.ts → dist/src/components/TagInput/index.d.ts} +0 -0
  286. /package/{src/components/Toast/index.ts → dist/src/components/Toast/index.d.ts} +0 -0
  287. /package/{src/components/Typography/index.ts → dist/src/components/Typography/index.d.ts} +0 -0
  288. /package/{src → dist/src}/vite-env.d.ts +0 -0
@@ -0,0 +1,4418 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+ var __publicField = (obj, key, value) => {
33
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
34
+ return value;
35
+ };
36
+ import * as React from "react";
37
+ import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
38
+ import cx from "clsx";
39
+ import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Search, LockBlack, Refresh, Error as Error2 } from "@livechat/design-system-icons/react/material";
40
+ import debounce from "lodash.debounce";
41
+ import { getContrast } from "polished";
42
+ import ReactDayPicker from "react-day-picker";
43
+ import { subMonths, differenceInCalendarMonths, addMonths, isSameMonth, isSameDay, isAfter, differenceInCalendarDays } from "date-fns";
44
+ import * as ReactDOM from "react-dom";
45
+ import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
46
+ import escape from "lodash.escape";
47
+ import { TransitionGroup, CSSTransition } from "react-transition-group";
48
+ import { css } from "@emotion/css";
49
+ var index = "";
50
+ const DesignToken = {
51
+ Background: "--background",
52
+ Background01: "--background-01",
53
+ Background02: "--background-02",
54
+ Background03: "--background-03",
55
+ SurfaceBasicDefault: "--surface-basic-default",
56
+ SurfacePrimaryDefault: "--surface-primary-default",
57
+ SurfaceBasicSubtle: "--surface-basic-subtle",
58
+ SurfaceSecondaryDefault: "--surface-secondary-default",
59
+ SurfaceSecondaryHover: "--surface-secondary-hover",
60
+ SurfaceSecondaryActive: "--surface-secondary-active",
61
+ SurfaceSecondaryDisabled: "--surface-secondary-disabled",
62
+ SurfaceBasicHover: "--surface-basic-hover",
63
+ SurfacePrimaryHover: "--surface-primary-hover",
64
+ SurfaceBasicActive: "--surface-basic-active",
65
+ SurfacePrimaryActive: "--surface-primary-active",
66
+ SurfacePrimaryActiveColored: "--surface-primary-active-colored",
67
+ SurfaceBasicDisabled: "--surface-basic-disabled",
68
+ SurfacePrimaryDisabled: "--surface-primary-disabled",
69
+ SurfaceTertiaryDefault: "--surface-tertiary-default",
70
+ SurfaceSecondarySubtle: "--surface-secondary-subtle",
71
+ SurfaceModerateDefault: "--surface-moderate-default",
72
+ SurfaceModerateHover: "--surface-moderate-hover",
73
+ SurfaceModerateActive: "--surface-moderate-active",
74
+ SurfaceTertiaryHover: "--surface-tertiary-hover",
75
+ SurfaceTertiaryActive: "--surface-tertiary-active",
76
+ SurfaceTertiaryDisabled: "--surface-tertiary-disabled",
77
+ SurfaceFeedbackInfo: "--surface-feedback-info",
78
+ SurfaceAccentEmphasisLowInfo: "--surface-accent-emphasis-low-info",
79
+ SurfaceFeedbackNegative: "--surface-feedback-negative",
80
+ SurfaceAccentEmphasisLowNegative: "--surface-accent-emphasis-low-negative",
81
+ SurfaceFeedbackWarning: "--surface-feedback-warning",
82
+ SurfaceAccentEmphasisLowWarning: "--surface-accent-emphasis-low-warning",
83
+ SurfaceFeedbackPositive: "--surface-feedback-positive",
84
+ SurfaceAccentEmphasisLowPositive: "--surface-accent-emphasis-low-positive",
85
+ SurfaceAccentEmphasisLowPurple: "--surface-accent-emphasis-low-purple",
86
+ SurfaceAccentEmphasisMinInfo: "--surface-accent-emphasis-min-info",
87
+ SurfaceAccentEmphasisMinNegative: "--surface-accent-emphasis-min-negative",
88
+ SurfaceAccentEmphasisMinWarning: "--surface-accent-emphasis-min-warning",
89
+ SurfaceAccentEmphasisMinPositive: "--surface-accent-emphasis-min-positive",
90
+ SurfaceAccentEmphasisMinPurple: "--surface-accent-emphasis-min-purple",
91
+ SurfaceInvertDefault: "--surface-invert-default",
92
+ SurfaceInvertPrimary: "--surface-invert-primary",
93
+ SurfaceInvertSubtle: "--surface-invert-subtle",
94
+ SurfaceInvertSecondary: "--surface-invert-secondary",
95
+ SurfaceInvertDisabled: "--surface-invert-disabled",
96
+ SurfaceLockedDefault: "--surface-locked-default",
97
+ SurfaceLockedHover: "--surface-locked-hover",
98
+ SurfaceLockedActive: "--surface-locked-active",
99
+ SurfaceLockedDisabled: "--surface-locked-disabled",
100
+ SurfaceLockedWhite: "--surface-locked-white",
101
+ SurfaceLockedBlack: "--surface-locked-black",
102
+ SurfaceAccentEmphasisHighInfo: "--surface-accent-emphasis-high-info",
103
+ SurfaceAccentEmphasisHighNegative: "--surface-accent-emphasis-high-negative",
104
+ SurfaceAccentEmphasisHighWarning: "--surface-accent-emphasis-high-warning",
105
+ SurfaceAccentEmphasisHighPositive: "--surface-accent-emphasis-high-positive",
106
+ SurfaceAccentEmphasisHighPurple: "--surface-accent-emphasis-high-purple",
107
+ SurfaceOverlay: "--surface-overlay",
108
+ SurfaceOtherOverlay: "--surface-other-overlay",
109
+ SurfaceOtherAgent: "--surface-other-agent",
110
+ SurfaceOtherSkeleton: "--surface-other-skeleton",
111
+ ContentDefault: "--content-default",
112
+ ContentBasicPrimary: "--content-basic-primary",
113
+ ContentSubtle: "--content-subtle",
114
+ ContentBasicSecondary: "--content-basic-secondary",
115
+ ContentDisabled: "--content-disabled",
116
+ ContentBasicDisabled: "--content-basic-disabled",
117
+ ContentBasicNegative: "--content-basic-negative",
118
+ ContentBasicWarning: "--content-basic-warning",
119
+ ContentBasicPositive: "--content-basic-positive",
120
+ ContentBasicInfo: "--content-basic-info",
121
+ ContentBasicPurple: "--content-basic-purple",
122
+ ContentBasicGradient01: "--content-basic-gradient-01",
123
+ ContentWhiteLocked: "--content-white-locked",
124
+ ContentLockedWhite: "--content-locked-white",
125
+ ContentBlackLocked: "--content-black-locked",
126
+ ContentLockedBlack: "--content-locked-black",
127
+ ContentLockedDefault: "--content-locked-default",
128
+ ContentLockedHover: "--content-locked-hover",
129
+ ContentLockedActive: "--content-locked-active",
130
+ ContentLockedDisabled: "--content-locked-disabled",
131
+ ContentInvertDefault: "--content-invert-default",
132
+ ContentInvertPrimary: "--content-invert-primary",
133
+ ContentInvertSubtle: "--content-invert-subtle",
134
+ ContentInvertSecondary: "--content-invert-secondary",
135
+ ContentInvertDisabled: "--content-invert-disabled",
136
+ ContentInvertGradient01: "--content-invert-gradient-01",
137
+ BorderDefault: "--border-default",
138
+ BorderBasicPrimary: "--border-basic-primary",
139
+ BorderBasicSecondary: "--border-basic-secondary",
140
+ BorderSubtle: "--border-subtle",
141
+ BorderBasicTertiary: "--border-basic-tertiary",
142
+ BorderHover: "--border-hover",
143
+ BorderBasicHover: "--border-basic-hover",
144
+ BorderDisabled: "--border-disabled",
145
+ BorderBasicDisabled: "--border-basic-disabled",
146
+ BorderBasicNegative: "--border-basic-negative",
147
+ BorderBasicWarning: "--border-basic-warning",
148
+ BorderBasicPositive: "--border-basic-positive",
149
+ BorderBasicInfo: "--border-basic-info",
150
+ BorderBasicPurple: "--border-basic-purple",
151
+ BorderInvertDefault: "--border-invert-default",
152
+ BorderInvertPrimary: "--border-invert-primary",
153
+ BorderInvertSubtle: "--border-invert-subtle",
154
+ BorderInvertSecondary: "--border-invert-secondary",
155
+ BorderInvertHover: "--border-invert-hover",
156
+ BorderInvertDisabled: "--border-invert-disabled",
157
+ ColorActionActive: "--color-action-active",
158
+ ActionPrimaryActive: "--action-primary-active",
159
+ ColorActionHover: "--color-action-hover",
160
+ ActionPrimaryHover: "--action-primary-hover",
161
+ ColorActionDefault: "--color-action-default",
162
+ ActionPrimaryDefault: "--action-primary-default",
163
+ ColorActionDefaultRgb: "--color-action-default-rgb",
164
+ ColorActionDisabled: "--color-action-disabled",
165
+ ActionPrimaryDisabled: "--action-primary-disabled",
166
+ ColorNegativeActive: "--color-negative-active",
167
+ ActionNegativeActive: "--action-negative-active",
168
+ ColorNegativeHover: "--color-negative-hover",
169
+ ActionNegativeHover: "--action-negative-hover",
170
+ ColorNegativeDefault: "--color-negative-default",
171
+ ActionNegativeDefault: "--action-negative-default",
172
+ ColorNegativeDisabled: "--color-negative-disabled",
173
+ ActionNegativeDisabled: "--action-negative-disabled",
174
+ ColorWarningDefault: "--color-warning-default",
175
+ ActionWarningDefault: "--action-warning-default",
176
+ ColorWarningHover: "--color-warning-hover",
177
+ ActionWarningHover: "--action-warning-hover",
178
+ ColorPositiveDefault: "--color-positive-default",
179
+ ActionPositiveDefault: "--action-positive-default",
180
+ ColorPositiveHover: "--color-positive-hover",
181
+ ActionPositiveHover: "--action-positive-hover",
182
+ ColorPositiveDisabled: "--color-positive-disabled",
183
+ ActionPositiveDisabled: "--action-positive-disabled",
184
+ ActionNeutralDefault: "--action-neutral-default",
185
+ ActionNeutralHover: "--action-neutral-hover",
186
+ ActionNeutralDisabled: "--action-neutral-disabled",
187
+ ColorBot: "--color-bot",
188
+ SurfaceOtherBot: "--surface-other-bot",
189
+ ColorBlack: "--color-black",
190
+ ColorWhite: "--color-white",
191
+ DecorBlue900: "--decor-blue900",
192
+ DecorBlue800: "--decor-blue800",
193
+ DecorBlue700: "--decor-blue700",
194
+ DecorBlue600: "--decor-blue600",
195
+ DecorBlue500: "--decor-blue500",
196
+ DecorBlue400: "--decor-blue400",
197
+ DecorBlue300: "--decor-blue300",
198
+ DecorBlue200: "--decor-blue200",
199
+ DecorBlue100: "--decor-blue100",
200
+ DecorBlue50: "--decor-blue50",
201
+ DecorOrange900: "--decor-orange900",
202
+ DecorOrange800: "--decor-orange800",
203
+ DecorOrange700: "--decor-orange700",
204
+ DecorOrange600: "--decor-orange600",
205
+ DecorOrange500: "--decor-orange500",
206
+ DecorOrange400: "--decor-orange400",
207
+ DecorOrange300: "--decor-orange300",
208
+ DecorOrange200: "--decor-orange200",
209
+ DecorOrange100: "--decor-orange100",
210
+ DecorOrange50: "--decor-orange50",
211
+ DecorYellow900: "--decor-yellow900",
212
+ DecorYellow800: "--decor-yellow800",
213
+ DecorYellow700: "--decor-yellow700",
214
+ DecorYellow600: "--decor-yellow600",
215
+ DecorYellow500: "--decor-yellow500",
216
+ DecorYellow400: "--decor-yellow400",
217
+ DecorYellow300: "--decor-yellow300",
218
+ DecorYellow200: "--decor-yellow200",
219
+ DecorYellow100: "--decor-yellow100",
220
+ DecorYellow50: "--decor-yellow50",
221
+ DecorGray950: "--decor-gray950",
222
+ DecorGray900: "--decor-gray900",
223
+ DecorGray800: "--decor-gray800",
224
+ DecorGray700: "--decor-gray700",
225
+ DecorGray600: "--decor-gray600",
226
+ DecorGray500: "--decor-gray500",
227
+ DecorGray400: "--decor-gray400",
228
+ DecorGray300: "--decor-gray300",
229
+ DecorGray200: "--decor-gray200",
230
+ DecorGray150: "--decor-gray150",
231
+ DecorGray100: "--decor-gray100",
232
+ DecorGray75: "--decor-gray75",
233
+ DecorGray50: "--decor-gray50",
234
+ DecorGray40: "--decor-gray40",
235
+ DecorGray20: "--decor-gray20",
236
+ DecorGreen900: "--decor-green900",
237
+ DecorGreen800: "--decor-green800",
238
+ DecorGreen700: "--decor-green700",
239
+ DecorGreen600: "--decor-green600",
240
+ DecorGreen500: "--decor-green500",
241
+ DecorGreen400: "--decor-green400",
242
+ DecorGreen300: "--decor-green300",
243
+ DecorGreen200: "--decor-green200",
244
+ DecorGreen100: "--decor-green100",
245
+ DecorGreen50: "--decor-green50",
246
+ DecorRed900: "--decor-red900",
247
+ DecorRed800: "--decor-red800",
248
+ DecorRed700: "--decor-red700",
249
+ DecorRed600: "--decor-red600",
250
+ DecorRed500: "--decor-red500",
251
+ DecorRed400: "--decor-red400",
252
+ DecorRed300: "--decor-red300",
253
+ DecorRed200: "--decor-red200",
254
+ DecorRed100: "--decor-red100",
255
+ DecorRed50: "--decor-red50",
256
+ DecorPurple900: "--decor-purple900",
257
+ DecorPurple800: "--decor-purple800",
258
+ DecorPurple700: "--decor-purple700",
259
+ DecorPurple600: "--decor-purple600",
260
+ DecorPurple500: "--decor-purple500",
261
+ DecorPurple400: "--decor-purple400",
262
+ DecorPurple300: "--decor-purple300",
263
+ DecorPurple200: "--decor-purple200",
264
+ DecorPurple100: "--decor-purple100",
265
+ DecorPurple50: "--decor-purple50",
266
+ ProductsLivechat: "--products-livechat",
267
+ ProductsHelpdesk: "--products-helpdesk",
268
+ ProductsChatbot: "--products-chatbot",
269
+ ProductsKnowledgebase: "--products-knowledgebase",
270
+ IllustrationsPrimary: "--illustrations-primary",
271
+ IllustrationsSecondary: "--illustrations-secondary",
272
+ IllustrationsStroke: "--illustrations-stroke",
273
+ TagSurface01: "--tag-surface-01",
274
+ TagContent01: "--tag-content-01"
275
+ };
276
+ const SpacingToken = {
277
+ Spacing0: "--spacing-0",
278
+ Spacing05: "--spacing-05",
279
+ Spacing1: "--spacing-1",
280
+ Spacing2: "--spacing-2",
281
+ Spacing3: "--spacing-3",
282
+ Spacing4: "--spacing-4",
283
+ Spacing5: "--spacing-5",
284
+ Spacing6: "--spacing-6",
285
+ Spacing8: "--spacing-8",
286
+ Spacing12: "--spacing-12",
287
+ Spacing16: "--spacing-16",
288
+ Spacing18: "--spacing-18",
289
+ Spacing20: "--spacing-20",
290
+ Spacing24: "--spacing-24"
291
+ };
292
+ const ShadowToken = {
293
+ Float: "--shadow-float",
294
+ PopOver: "--shadow-pop-over",
295
+ Modal: "--shadow-modal"
296
+ };
297
+ const caps = "lc-Typography-module__caps___c3eNJ";
298
+ var styles$E = {
299
+ "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
300
+ "heading-lg": "lc-Typography-module__heading-lg___XYF7l",
301
+ "heading-md": "lc-Typography-module__heading-md___wHOIs",
302
+ "heading-sm": "lc-Typography-module__heading-sm___nBmTV",
303
+ "heading-xs": "lc-Typography-module__heading-xs___VcZBs",
304
+ caps,
305
+ "caps--bold": "lc-Typography-module__caps--bold___OZovw",
306
+ "paragraph-md": "lc-Typography-module__paragraph-md___UGoqq",
307
+ "paragraph-md--bold": "lc-Typography-module__paragraph-md--bold___mWcMG",
308
+ "paragraph-md--underline": "lc-Typography-module__paragraph-md--underline___Fv6zM",
309
+ "paragraph-md--strike": "lc-Typography-module__paragraph-md--strike___yLGHh",
310
+ "paragraph-sm": "lc-Typography-module__paragraph-sm___QIEFL",
311
+ "paragraph-sm--bold": "lc-Typography-module__paragraph-sm--bold___fAjI5",
312
+ "paragraph-xs": "lc-Typography-module__paragraph-xs___OUooD",
313
+ "paragraph-xs--bold": "lc-Typography-module__paragraph-xs--bold___z7om7"
314
+ };
315
+ const SIZE_TO_ELEMENT_MAP = {
316
+ xl: "h1",
317
+ lg: "h2",
318
+ md: "h3",
319
+ sm: "h4",
320
+ xs: "h5"
321
+ };
322
+ const Heading = (_a) => {
323
+ var _b = _a, {
324
+ as,
325
+ size = "md",
326
+ children,
327
+ className
328
+ } = _b, props = __objRest(_b, [
329
+ "as",
330
+ "size",
331
+ "children",
332
+ "className"
333
+ ]);
334
+ return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$E[`heading-${size}`], className) }, props), children);
335
+ };
336
+ const Text = (_c) => {
337
+ var _d = _c, {
338
+ as = "p",
339
+ size = "md",
340
+ caps: caps2 = false,
341
+ bold = false,
342
+ underline = false,
343
+ strike = false,
344
+ children,
345
+ className
346
+ } = _d, props = __objRest(_d, [
347
+ "as",
348
+ "size",
349
+ "caps",
350
+ "bold",
351
+ "underline",
352
+ "strike",
353
+ "children",
354
+ "className"
355
+ ]);
356
+ const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
357
+ return React.createElement(as, __spreadValues({
358
+ className: cx({
359
+ [styles$E[`${baseClassPrefix}`]]: true,
360
+ [styles$E[`${baseClassPrefix}--bold`]]: bold,
361
+ [styles$E[`${baseClassPrefix}--strike`]]: strike,
362
+ [styles$E[`${baseClassPrefix}--underline`]]: underline
363
+ }, className)
364
+ }, props), children);
365
+ };
366
+ const icon$1 = "lc-Icon-module__icon___tw31R";
367
+ var styles$D = {
368
+ icon: icon$1,
369
+ "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
370
+ "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
371
+ "icon--inverted": "lc-Icon-module__icon--inverted___zA9QC",
372
+ "icon--inverted-subtle": "lc-Icon-module__icon--inverted-subtle___6UwBT",
373
+ "icon--link": "lc-Icon-module__icon--link___Jwkw9",
374
+ "icon--success": "lc-Icon-module__icon--success___MKdz3",
375
+ "icon--warning": "lc-Icon-module__icon--warning___5YCSW",
376
+ "icon--error": "lc-Icon-module__icon--error___CiJCD",
377
+ "icon--disabled--primary": "lc-Icon-module__icon--disabled--primary___E0nee",
378
+ "icon--disabled--subtle": "lc-Icon-module__icon--disabled--subtle___l-hK4",
379
+ "icon--disabled--inverted": "lc-Icon-module__icon--disabled--inverted___5SBAf",
380
+ "icon--disabled--inverted-subtle": "lc-Icon-module__icon--disabled--inverted-subtle___w-NBk",
381
+ "icon--disabled--link": "lc-Icon-module__icon--disabled--link___sVJOa",
382
+ "icon--disabled--success": "lc-Icon-module__icon--disabled--success___sG-7d",
383
+ "icon--disabled--warning": "lc-Icon-module__icon--disabled--warning___8ko1e",
384
+ "icon--disabled--error": "lc-Icon-module__icon--disabled--error___9KbVo"
385
+ };
386
+ const IconSizeMap = {
387
+ xsmall: {
388
+ width: 12,
389
+ height: 12
390
+ },
391
+ small: {
392
+ width: 16,
393
+ height: 16
394
+ },
395
+ medium: {
396
+ width: 20,
397
+ height: 20
398
+ },
399
+ large: {
400
+ width: 24,
401
+ height: 24
402
+ },
403
+ xlarge: {
404
+ width: 32,
405
+ height: 32
406
+ }
407
+ };
408
+ const baseClass$M = "icon";
409
+ const Icon = (props) => {
410
+ const _a = props, {
411
+ source,
412
+ size = "medium",
413
+ kind,
414
+ disabled,
415
+ className,
416
+ customColor
417
+ } = _a, restProps = __objRest(_a, [
418
+ "source",
419
+ "size",
420
+ "kind",
421
+ "disabled",
422
+ "className",
423
+ "customColor"
424
+ ]);
425
+ const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
426
+ color: customColor
427
+ }));
428
+ const mergedClassNames = cx(className, styles$D[baseClass$M], kind && styles$D[`${baseClass$M}--${disabled ? "disabled--" : ""}${kind}`]);
429
+ return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
430
+ className: mergedClassNames
431
+ }), GeneratedIcon);
432
+ };
433
+ const alert = "lc-Alert-module__alert___HBTns";
434
+ const alert__content = "lc-Alert-module__alert__content___9nZdf";
435
+ const alert__icon = "lc-Alert-module__alert__icon___8TaAH";
436
+ var styles$C = {
437
+ alert,
438
+ alert__content,
439
+ "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
440
+ "alert__content-text--margin": "lc-Alert-module__alert__content-text--margin___whVzG",
441
+ "alert__content-icon": "lc-Alert-module__alert__content-icon___-EXJm",
442
+ "alert--small": "lc-Alert-module__alert--small___Fyk-v",
443
+ "alert__close-icon": "lc-Alert-module__alert__close-icon___rYxVy",
444
+ "alert--info": "lc-Alert-module__alert--info___GmIGN",
445
+ "alert--warning": "lc-Alert-module__alert--warning___MubhD",
446
+ "alert--success": "lc-Alert-module__alert--success___fPtlZ",
447
+ "alert--error": "lc-Alert-module__alert--error___DKPo0",
448
+ alert__icon
449
+ };
450
+ const IconConfig = {
451
+ info: {
452
+ source: Info$1,
453
+ kind: "link"
454
+ },
455
+ warning: {
456
+ source: Warning,
457
+ kind: "warning"
458
+ },
459
+ success: {
460
+ source: CheckCircleSolid,
461
+ kind: "success"
462
+ },
463
+ error: {
464
+ source: Block,
465
+ kind: "error"
466
+ }
467
+ };
468
+ const baseClass$L = "alert";
469
+ const Alert = (_e) => {
470
+ var _f = _e, {
471
+ children,
472
+ className,
473
+ kind = "info",
474
+ onClose
475
+ } = _f, props = __objRest(_f, [
476
+ "children",
477
+ "className",
478
+ "kind",
479
+ "onClose"
480
+ ]);
481
+ const containerRef = React.useRef(null);
482
+ const [isSmallContainer, setIsSmallContainer] = React.useState(false);
483
+ const mergedClassNames = cx(styles$C[baseClass$L], styles$C[`${baseClass$L}--${kind}`], isSmallContainer && styles$C[`${baseClass$L}--small`], className);
484
+ React.useEffect(() => {
485
+ const handleResize = debounce(() => {
486
+ if (containerRef.current && containerRef.current.offsetWidth <= 400) {
487
+ return setIsSmallContainer(true);
488
+ }
489
+ return setIsSmallContainer(false);
490
+ }, 500);
491
+ window.addEventListener("resize", handleResize);
492
+ return () => window.removeEventListener("resize", handleResize);
493
+ });
494
+ return /* @__PURE__ */ React.createElement("div", __spreadValues({
495
+ ref: containerRef,
496
+ className: mergedClassNames
497
+ }, props), /* @__PURE__ */ React.createElement("div", {
498
+ className: styles$C[`${baseClass$L}__content`]
499
+ }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
500
+ size: "large",
501
+ className: styles$C[`${baseClass$L}__content-icon`]
502
+ })), /* @__PURE__ */ React.createElement(Text, {
503
+ as: "div",
504
+ className: cx(styles$C[`${baseClass$L}__content-text`], onClose && styles$C[`${baseClass$L}__content-text--margin`])
505
+ }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
506
+ type: "button",
507
+ className: styles$C[`${baseClass$L}__close-icon`],
508
+ onClick: onClose
509
+ }, /* @__PURE__ */ React.createElement(Icon, {
510
+ source: Close,
511
+ size: "large",
512
+ kind: "primary"
513
+ })));
514
+ };
515
+ function getInitials(name = "", count = 2) {
516
+ return name.split(" ").map((el) => el.charAt(0)).join("").substring(0, count).toUpperCase();
517
+ }
518
+ function getFontColor(color) {
519
+ return getContrast(color, "#FFFFFF") > 4.5 ? "var(--color-white)" : "var(--color-black)";
520
+ }
521
+ const avatar = "lc-Avatar-module__avatar___1zTCE";
522
+ const avatar__status = "lc-Avatar-module__avatar__status___nX2Ls";
523
+ const avatar__rim = "lc-Avatar-module__avatar__rim___RCQ8Q";
524
+ const avatar__image = "lc-Avatar-module__avatar__image___YqfqE";
525
+ var styles$B = {
526
+ avatar,
527
+ avatar__status,
528
+ "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
529
+ "avatar__status--unavailable": "lc-Avatar-module__avatar__status--unavailable___ciauF",
530
+ "avatar__status--unknown": "lc-Avatar-module__avatar__status--unknown___MBaGB",
531
+ "avatar__status--xxxsmall": "lc-Avatar-module__avatar__status--xxxsmall___8pkEO",
532
+ "avatar__status--circle": "lc-Avatar-module__avatar__status--circle___doV5H",
533
+ "avatar__status--xxsmall": "lc-Avatar-module__avatar__status--xxsmall___M69lx",
534
+ "avatar__status--xsmall": "lc-Avatar-module__avatar__status--xsmall___RKQiI",
535
+ "avatar__status--small": "lc-Avatar-module__avatar__status--small___cVrA7",
536
+ "avatar__status--medium": "lc-Avatar-module__avatar__status--medium___n5z1H",
537
+ "avatar__status--large": "lc-Avatar-module__avatar__status--large___Lt-0p",
538
+ "avatar__status--xlarge": "lc-Avatar-module__avatar__status--xlarge___RWIcJ",
539
+ "avatar__status--xxlarge": "lc-Avatar-module__avatar__status--xxlarge___crG9D",
540
+ "avatar__status--rounded-square": "lc-Avatar-module__avatar__status--rounded-square___-My1P",
541
+ avatar__rim,
542
+ "avatar__rim--xxxsmall": "lc-Avatar-module__avatar__rim--xxxsmall___0CH9D",
543
+ "avatar__rim--xxsmall": "lc-Avatar-module__avatar__rim--xxsmall___Mde0K",
544
+ "avatar__rim--xsmall": "lc-Avatar-module__avatar__rim--xsmall___LAN-b",
545
+ "avatar__rim--small": "lc-Avatar-module__avatar__rim--small___FT8LX",
546
+ "avatar__rim--medium": "lc-Avatar-module__avatar__rim--medium___Dy0pr",
547
+ "avatar__rim--large": "lc-Avatar-module__avatar__rim--large___FPvGp",
548
+ "avatar__rim--xlarge": "lc-Avatar-module__avatar__rim--xlarge___CY0kN",
549
+ "avatar__rim--xxlarge": "lc-Avatar-module__avatar__rim--xxlarge___tE053",
550
+ avatar__image,
551
+ "avatar__icon--xxxsmall": "lc-Avatar-module__avatar__icon--xxxsmall___KaoMa",
552
+ "avatar__icon--xxsmall": "lc-Avatar-module__avatar__icon--xxsmall___NJJNV",
553
+ "avatar__icon--xsmall": "lc-Avatar-module__avatar__icon--xsmall___yHEZK",
554
+ "avatar__icon--small": "lc-Avatar-module__avatar__icon--small___l6lBu",
555
+ "avatar__icon--medium": "lc-Avatar-module__avatar__icon--medium___LF4w2",
556
+ "avatar__icon--large": "lc-Avatar-module__avatar__icon--large___QntBf",
557
+ "avatar__icon--xlarge": "lc-Avatar-module__avatar__icon--xlarge___bcHbI",
558
+ "avatar__icon--xxlarge": "lc-Avatar-module__avatar__icon--xxlarge___sx8Fq",
559
+ "avatar--circle": "lc-Avatar-module__avatar--circle___XwEz-",
560
+ "avatar--rounded-square": "lc-Avatar-module__avatar--rounded-square___m7-4I",
561
+ "avatar--with-rim": "lc-Avatar-module__avatar--with-rim___pvFZR",
562
+ "avatar--xxxsmall": "lc-Avatar-module__avatar--xxxsmall___EHzpP",
563
+ "avatar--xxsmall": "lc-Avatar-module__avatar--xxsmall___EDOVp",
564
+ "avatar--xsmall": "lc-Avatar-module__avatar--xsmall___nI348",
565
+ "avatar--small": "lc-Avatar-module__avatar--small___UuQen",
566
+ "avatar--medium": "lc-Avatar-module__avatar--medium___Bt9Eo",
567
+ "avatar--large": "lc-Avatar-module__avatar--large___OU-08",
568
+ "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
569
+ "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
570
+ };
571
+ const baseClass$K = "avatar";
572
+ const Avatar = ({
573
+ alt,
574
+ className,
575
+ color,
576
+ shape = "circle",
577
+ size = "medium",
578
+ src,
579
+ status,
580
+ text,
581
+ type,
582
+ withRim = false
583
+ }) => {
584
+ const isImproperImageSetup = type === "image" && !src;
585
+ const [shouldDisplayFallbackAvatar, setShouldDisplayFallbackAvatar] = React.useState(isImproperImageSetup);
586
+ const shouldDisplayImage = type === "image" && !!src && !shouldDisplayFallbackAvatar;
587
+ const shouldDisplayInitials = type === "text";
588
+ const letterCount = ["xxxsmall", "xxsmall", "xsmall"].includes(size) ? 1 : 2;
589
+ const initials = getInitials(text, letterCount);
590
+ const fontColor = color && getFontColor(color);
591
+ const mergedClassNames = cx({
592
+ [styles$B[baseClass$K]]: true,
593
+ [styles$B[`${baseClass$K}--${shape}`]]: true,
594
+ [styles$B[`${baseClass$K}--${size}`]]: true,
595
+ [styles$B[`${baseClass$K}--with-rim`]]: withRim,
596
+ [`${className}`]: className
597
+ });
598
+ const mergedStatusClassNames = cx(styles$B[`${baseClass$K}__status`], styles$B[`${baseClass$K}__status--${shape}`], styles$B[`${baseClass$K}__status--${size}`], styles$B[`${baseClass$K}__status--${status}`]);
599
+ const mergedIconClassNames = cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${size}`]);
600
+ const mergedRimClassNames = cx(styles$B[`${baseClass$K}__rim`], styles$B[`${baseClass$K}__rim--${size}`]);
601
+ const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
602
+ React.useEffect(() => {
603
+ setShouldDisplayFallbackAvatar(isImproperImageSetup);
604
+ }, [isImproperImageSetup]);
605
+ return /* @__PURE__ */ React.createElement("div", {
606
+ className: mergedClassNames,
607
+ style: { backgroundColor: color }
608
+ }, withRim && /* @__PURE__ */ React.createElement("div", {
609
+ "data-testid": `${baseClass$K}__rim`,
610
+ className: mergedRimClassNames
611
+ }), status && /* @__PURE__ */ React.createElement("div", {
612
+ "data-testid": `${baseClass$K}__status`,
613
+ className: mergedStatusClassNames
614
+ }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
615
+ className: styles$B[`${baseClass$K}__image`],
616
+ src,
617
+ alt,
618
+ onError: handleError
619
+ }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
620
+ style: { color: fontColor }
621
+ }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
622
+ "data-testid": `${baseClass$K}__icon`,
623
+ className: mergedIconClassNames,
624
+ source: Person
625
+ }));
626
+ };
627
+ const badge = "lc-Badge-module__badge___GhLnu";
628
+ const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
629
+ var styles$A = {
630
+ badge,
631
+ badge__dot,
632
+ "badge--large": "lc-Badge-module__badge--large___B131q",
633
+ "badge--medium": "lc-Badge-module__badge--medium___TDU8a",
634
+ "badge--compact": "lc-Badge-module__badge--compact___9xJ4y",
635
+ "badge--primary": "lc-Badge-module__badge--primary___8LRpp",
636
+ "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ",
637
+ "badge--tertiary": "lc-Badge-module__badge--tertiary___e83wV"
638
+ };
639
+ function formatCount(count, max) {
640
+ return count > max ? `${max}+` : `${count}`;
641
+ }
642
+ const baseClass$J = "badge";
643
+ const Badge = (_g) => {
644
+ var _h = _g, {
645
+ className,
646
+ count = 0,
647
+ max = 99,
648
+ kind = "primary",
649
+ size = "medium",
650
+ type = "counter"
651
+ } = _h, spanProps = __objRest(_h, [
652
+ "className",
653
+ "count",
654
+ "max",
655
+ "kind",
656
+ "size",
657
+ "type"
658
+ ]);
659
+ const mergedClassNames = cx(className, styles$A[baseClass$J], styles$A[`${baseClass$J}--${kind}`], styles$A[`${baseClass$J}--${size}`]);
660
+ const content = {
661
+ ["counter"]: formatCount(count, max),
662
+ ["alert"]: "!",
663
+ ["dot"]: /* @__PURE__ */ React.createElement("span", {
664
+ className: styles$A[`${baseClass$J}__dot`]
665
+ })
666
+ }[type];
667
+ return /* @__PURE__ */ React.createElement("span", __spreadValues({
668
+ className: mergedClassNames
669
+ }, spanProps), content);
670
+ };
671
+ const loader = "lc-Loader-module__loader___LRflD";
672
+ const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
673
+ const rotate = "lc-Loader-module__rotate___Tlni-";
674
+ const loader__label = "lc-Loader-module__loader__label___R74f6";
675
+ var styles$z = {
676
+ loader,
677
+ loader__spinner,
678
+ "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
679
+ "loader__spinner--medium": "lc-Loader-module__loader__spinner--medium___J-ki0",
680
+ "loader__spinner--large": "lc-Loader-module__loader__spinner--large___Poqq7",
681
+ "loader__spinner-circle": "lc-Loader-module__loader__spinner-circle___ApBUO",
682
+ rotate,
683
+ loader__label
684
+ };
685
+ const baseClass$I = "loader";
686
+ const spinnerClass = `${baseClass$I}__spinner`;
687
+ const Loader = ({
688
+ primaryColor,
689
+ secondaryColor,
690
+ label,
691
+ className,
692
+ size = "medium"
693
+ }) => {
694
+ return /* @__PURE__ */ React.createElement("div", {
695
+ className: cx(styles$z[baseClass$I], className)
696
+ }, /* @__PURE__ */ React.createElement("div", {
697
+ className: cx(styles$z[spinnerClass], styles$z[`${spinnerClass}--${size}`])
698
+ }, /* @__PURE__ */ React.createElement("div", {
699
+ className: styles$z["loader__spinner-circle"],
700
+ style: {
701
+ borderColor: secondaryColor,
702
+ borderTopColor: primaryColor
703
+ }
704
+ })), label && /* @__PURE__ */ React.createElement(Text, {
705
+ as: "div",
706
+ size: "md",
707
+ className: styles$z["loader__label"]
708
+ }, label));
709
+ };
710
+ const btn$1 = "lc-Button-module__btn___aijZJ";
711
+ const btn__loader = "lc-Button-module__btn__loader___c8zZz";
712
+ const btn__content = "lc-Button-module__btn__content___wefl2";
713
+ const btn__icon = "lc-Button-module__btn__icon___GVExB";
714
+ var styles$y = {
715
+ btn: btn$1,
716
+ "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
717
+ "btn--full-width": "lc-Button-module__btn--full-width___kdbAr",
718
+ "btn--basic": "lc-Button-module__btn--basic___Jc2gD",
719
+ "btn--primary": "lc-Button-module__btn--primary___ajbjQ",
720
+ "btn--secondary": "lc-Button-module__btn--secondary___iWzE0",
721
+ "btn--destructive": "lc-Button-module__btn--destructive___-kLCl",
722
+ "btn--compact": "lc-Button-module__btn--compact___4eptQ",
723
+ "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
724
+ "btn--large": "lc-Button-module__btn--large___lb-z6",
725
+ "btn--text": "lc-Button-module__btn--text___WA8OL",
726
+ "btn--plain": "lc-Button-module__btn--plain___eOPui",
727
+ "btn--plain-light": "lc-Button-module__btn--plain-light___eS9em",
728
+ "btn--loading": "lc-Button-module__btn--loading___ZAgjv",
729
+ btn__loader,
730
+ btn__content,
731
+ btn__icon,
732
+ "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
733
+ "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
734
+ "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
735
+ };
736
+ const baseClass$H = "btn";
737
+ const Button = (_i) => {
738
+ var _j = _i, {
739
+ loading = false,
740
+ disabled = false,
741
+ type = "button",
742
+ fullWidth = false,
743
+ kind = "basic",
744
+ size = "medium",
745
+ icon: icon2 = null,
746
+ iconPosition = "left",
747
+ loaderLabel,
748
+ className,
749
+ children,
750
+ href,
751
+ onClick
752
+ } = _j, props = __objRest(_j, [
753
+ "loading",
754
+ "disabled",
755
+ "type",
756
+ "fullWidth",
757
+ "kind",
758
+ "size",
759
+ "icon",
760
+ "iconPosition",
761
+ "loaderLabel",
762
+ "className",
763
+ "children",
764
+ "href",
765
+ "onClick"
766
+ ]);
767
+ const isDisabled = loading || disabled;
768
+ const isIconOnly = !children && icon2;
769
+ const isTextButton = ["text", "plain", "plain-light"].includes(kind);
770
+ const Component = href ? "a" : "button";
771
+ const getSpinnerColors = () => {
772
+ if (kind === "primary" || kind === "destructive") {
773
+ return {
774
+ primaryColor: "var(--action-primary-default)",
775
+ secondaryColor: "var(--border-invert-primary)"
776
+ };
777
+ }
778
+ };
779
+ const mergedClassNames = cx(className, styles$y[baseClass$H], styles$y[`${baseClass$H}--${kind}`], styles$y[`${baseClass$H}--${size}`], {
780
+ [styles$y[`${baseClass$H}--loading`]]: loading,
781
+ [styles$y[`${baseClass$H}--full-width`]]: fullWidth,
782
+ [styles$y[`${baseClass$H}--icon-only`]]: isIconOnly,
783
+ [styles$y[`${baseClass$H}--icon-only--bg`]]: isIconOnly && isTextButton,
784
+ [styles$y[`${baseClass$H}--disabled`]]: isDisabled
785
+ });
786
+ return /* @__PURE__ */ React.createElement(Component, __spreadValues({
787
+ className: mergedClassNames,
788
+ "aria-disabled": isDisabled,
789
+ type,
790
+ href: isDisabled ? void 0 : href,
791
+ onClick: isDisabled ? void 0 : onClick,
792
+ disabled: isDisabled
793
+ }, props), loading && /* @__PURE__ */ React.createElement(Loader, __spreadValues({
794
+ size: "small",
795
+ label: loaderLabel,
796
+ className: styles$y[`${baseClass$H}__loader`]
797
+ }, getSpinnerColors())), icon2 && React.cloneElement(icon2, {
798
+ className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
799
+ disabled
800
+ }), /* @__PURE__ */ React.createElement("div", {
801
+ className: styles$y[`${baseClass$H}__content`]
802
+ }, children));
803
+ };
804
+ const btn = "lc-SegmentedControl-module__btn___tfsvL";
805
+ var styles$x = {
806
+ "segmented-control": "lc-SegmentedControl-module__segmented-control___LHWSk",
807
+ btn,
808
+ "btn--active": "lc-SegmentedControl-module__btn--active___Za-th",
809
+ "btn--compact": "lc-SegmentedControl-module__btn--compact___gcSwq",
810
+ "btn--medium": "lc-SegmentedControl-module__btn--medium___w3UzC",
811
+ "btn--large": "lc-SegmentedControl-module__btn--large___yHPw4"
812
+ };
813
+ function noop() {
814
+ }
815
+ const baseClass$G = "segmented-control";
816
+ const SegmentedControl = ({
817
+ size = "medium",
818
+ buttons,
819
+ className,
820
+ initialId,
821
+ currentId,
822
+ fullWidth = false,
823
+ onButtonClick = noop
824
+ }) => {
825
+ const mergedClassName = cx(styles$x[baseClass$G], className);
826
+ const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
827
+ const isControlled = typeof currentId === "string";
828
+ React.useEffect(() => {
829
+ isControlled && setCurrentStateId(currentId);
830
+ }, [currentId]);
831
+ const handleClick = (id, event) => {
832
+ if (!isControlled) {
833
+ setCurrentStateId(id);
834
+ }
835
+ onButtonClick(id, event);
836
+ };
837
+ const buttonSet = buttons.map(({ id, label, loading, disabled, icon: icon2 }) => {
838
+ const isPressed = id === currentStateId;
839
+ const activityStyles = isPressed ? styles$x["btn--active"] : "";
840
+ const loadingStatus = isPressed ? false : loading;
841
+ return /* @__PURE__ */ React.createElement(Button, {
842
+ key: id,
843
+ fullWidth,
844
+ loading: loadingStatus,
845
+ disabled,
846
+ "aria-pressed": isPressed,
847
+ kind: "secondary",
848
+ icon: icon2,
849
+ className: cx(styles$x["btn"], styles$x[`btn--${size}`], activityStyles),
850
+ onClick: (event) => {
851
+ handleClick(id, event);
852
+ }
853
+ }, label);
854
+ });
855
+ return /* @__PURE__ */ React.createElement("div", {
856
+ role: "group",
857
+ className: mergedClassName
858
+ }, buttonSet);
859
+ };
860
+ const card = "lc-Card-module__card___GqMm2";
861
+ const card__header = "lc-Card-module__card__header___0ptfD";
862
+ const card__header__image = "lc-Card-module__card__header__image___QMwSu";
863
+ const card__header__heading = "lc-Card-module__card__header__heading___Wkikx";
864
+ const card__header__heading__title = "lc-Card-module__card__header__heading__title___Uxi8s";
865
+ const card__header__heading__description = "lc-Card-module__card__header__heading__description___6LnOK";
866
+ const card__content = "lc-Card-module__card__content___KuDcc";
867
+ const card__actions = "lc-Card-module__card__actions___q9sAo";
868
+ const card__actions__line = "lc-Card-module__card__actions__line___TF1bt";
869
+ const card__actions__buttons = "lc-Card-module__card__actions__buttons___PDMMR";
870
+ var styles$w = {
871
+ card,
872
+ card__header,
873
+ card__header__image,
874
+ card__header__heading,
875
+ card__header__heading__title,
876
+ card__header__heading__description,
877
+ "card__header__no-image": "lc-Card-module__card__header__no-image___UcnNY",
878
+ card__content,
879
+ "card__expanded-content": "lc-Card-module__card__expanded-content___yB-QL",
880
+ card__actions,
881
+ card__actions__line,
882
+ card__actions__buttons,
883
+ "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
884
+ };
885
+ const baseClass$F = "card";
886
+ const headerClass = `${baseClass$F}__header`;
887
+ const headingClass = `${headerClass}__heading`;
888
+ const actionsClass = `${baseClass$F}__actions`;
889
+ const noImageClass = `${headerClass}__no-image`;
890
+ const Card = (_k) => {
891
+ var _l = _k, {
892
+ alt,
893
+ buttonsOptions = [],
894
+ children,
895
+ className,
896
+ description,
897
+ expandableContent,
898
+ src,
899
+ title
900
+ } = _l, divProps = __objRest(_l, [
901
+ "alt",
902
+ "buttonsOptions",
903
+ "children",
904
+ "className",
905
+ "description",
906
+ "expandableContent",
907
+ "src",
908
+ "title"
909
+ ]);
910
+ const [isExpanded, setIsExpanded] = React.useState(false);
911
+ const expandIcon = isExpanded ? ChevronUp : ChevronDown;
912
+ const expandButtonText = isExpanded ? "Hide" : "Show more";
913
+ const shouldShowActionButtons = (buttonsOptions == null ? void 0 : buttonsOptions.length) > 0;
914
+ const shouldShowExpandAction = !!expandableContent;
915
+ const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
916
+ const isTitleAvailable = title;
917
+ const isImageAvailable = src;
918
+ const noImageAvailable = isImageAvailable ? "" : styles$w[noImageClass];
919
+ return /* @__PURE__ */ React.createElement("div", __spreadValues({
920
+ className: cx(styles$w[baseClass$F], className)
921
+ }, divProps), isTitleAvailable && /* @__PURE__ */ React.createElement("div", {
922
+ className: cx(styles$w[headerClass], noImageAvailable)
923
+ }, isImageAvailable && /* @__PURE__ */ React.createElement("img", {
924
+ alt,
925
+ className: styles$w[`${headerClass}__image`],
926
+ src
927
+ }), /* @__PURE__ */ React.createElement("div", {
928
+ className: styles$w[headingClass]
929
+ }, /* @__PURE__ */ React.createElement(Heading, {
930
+ size: "sm",
931
+ className: styles$w[`${headingClass}__title`]
932
+ }, title), /* @__PURE__ */ React.createElement(Text, {
933
+ size: "sm",
934
+ className: styles$w[`${headingClass}__description`]
935
+ }, description))), /* @__PURE__ */ React.createElement(Text, {
936
+ as: "div",
937
+ size: "md",
938
+ className: styles$w[`${baseClass$F}__content`]
939
+ }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
940
+ as: "div",
941
+ size: "md",
942
+ className: styles$w[`${baseClass$F}__expanded-content`]
943
+ }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
944
+ className: styles$w[actionsClass]
945
+ }, /* @__PURE__ */ React.createElement("div", {
946
+ className: styles$w[`${actionsClass}__line`]
947
+ }), /* @__PURE__ */ React.createElement("div", {
948
+ className: styles$w[`${actionsClass}__buttons`]
949
+ }, shouldShowActionButtons && buttonsOptions.map(({ kind, onClick, children: buttonChildren }) => /* @__PURE__ */ React.createElement(Button, {
950
+ size: "compact",
951
+ kind,
952
+ onClick
953
+ }, buttonChildren)), shouldShowExpandAction && /* @__PURE__ */ React.createElement(Button, {
954
+ className: styles$w[`${actionsClass}__buttons-expander`],
955
+ kind: "plain",
956
+ iconPosition: "right",
957
+ icon: /* @__PURE__ */ React.createElement(Icon, {
958
+ source: expandIcon
959
+ }),
960
+ onClick: () => setIsExpanded(!isExpanded)
961
+ }, expandButtonText))));
962
+ };
963
+ var styles$v = {
964
+ "field-description": "lc-FieldDescription-module__field-description___IcRDH"
965
+ };
966
+ const baseClass$E = "field-description";
967
+ const FieldDescription = (_m) => {
968
+ var _n = _m, {
969
+ children,
970
+ className = ""
971
+ } = _n, props = __objRest(_n, [
972
+ "children",
973
+ "className"
974
+ ]);
975
+ const mergedClassNames = cx(styles$v[baseClass$E], className);
976
+ return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
977
+ as: "span",
978
+ size: "sm"
979
+ }, props), {
980
+ className: mergedClassNames
981
+ }), children);
982
+ };
983
+ const checkbox = "lc-Checkbox-module__checkbox___G7nTf";
984
+ const checkbox__label = "lc-Checkbox-module__checkbox__label___-o01x";
985
+ const checkbox__square = "lc-Checkbox-module__checkbox__square___MHUyd";
986
+ const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
987
+ const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
988
+ const checkbox__text = "lc-Checkbox-module__checkbox__text___P2SIq";
989
+ const checkbox__helper = "lc-Checkbox-module__checkbox__helper___YSJ-n";
990
+ var styles$u = {
991
+ checkbox,
992
+ checkbox__label,
993
+ checkbox__square,
994
+ checkbox__checkmark,
995
+ "checkbox--selected": "lc-Checkbox-module__checkbox--selected___S2vqY",
996
+ checkbox__input,
997
+ checkbox__text,
998
+ "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
999
+ checkbox__helper
1000
+ };
1001
+ const baseClass$D = "checkbox";
1002
+ const Checkbox = React.forwardRef((_o, ref) => {
1003
+ var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
1004
+ return /* @__PURE__ */ React.createElement("div", {
1005
+ className: cx(styles$u[baseClass$D], className, {
1006
+ [styles$u[`${baseClass$D}--selected`]]: checked,
1007
+ [styles$u[`${baseClass$D}--disabled`]]: disabled
1008
+ })
1009
+ }, /* @__PURE__ */ React.createElement("label", {
1010
+ className: styles$u[`${baseClass$D}__label`]
1011
+ }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
1012
+ ref,
1013
+ checked,
1014
+ disabled,
1015
+ className: styles$u[`${baseClass$D}__input`],
1016
+ type: "checkbox"
1017
+ })), /* @__PURE__ */ React.createElement("div", {
1018
+ className: styles$u[`${baseClass$D}__square`]
1019
+ }, /* @__PURE__ */ React.createElement(Icon, {
1020
+ source: Check,
1021
+ kind: "inverted",
1022
+ size: "xsmall",
1023
+ className: styles$u[`${baseClass$D}__checkmark`]
1024
+ }))), children && /* @__PURE__ */ React.createElement(Text, {
1025
+ as: "div",
1026
+ size: "md",
1027
+ className: styles$u[`${baseClass$D}__text`]
1028
+ }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
1029
+ className: styles$u[`${baseClass$D}__helper`]
1030
+ }, description));
1031
+ });
1032
+ var styles$t = {
1033
+ "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
1034
+ "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
1035
+ "date-picker__day": "lc-DatePicker-module__date-picker__day___ZTSw9",
1036
+ "date-picker__day--disabled": "lc-DatePicker-module__date-picker__day--disabled___4O6yW",
1037
+ "date-picker__day--selected": "lc-DatePicker-module__date-picker__day--selected___1D1tC",
1038
+ "date-picker__day--outside": "lc-DatePicker-module__date-picker__day--outside___ptNdC",
1039
+ "date-picker__day-content": "lc-DatePicker-module__date-picker__day-content___rDIa0",
1040
+ "date-picker__wrapper": "lc-DatePicker-module__date-picker__wrapper___tNp4l",
1041
+ "date-picker__months": "lc-DatePicker-module__date-picker__months___QuPb0",
1042
+ "date-picker__month": "lc-DatePicker-module__date-picker__month___239nh",
1043
+ "date-picker__nav-bar": "lc-DatePicker-module__date-picker__nav-bar___u-l17",
1044
+ "date-picker__nav-button": "lc-DatePicker-module__date-picker__nav-button___1Ysdp",
1045
+ "date-picker__nav-button--interaction-disabled": "lc-DatePicker-module__date-picker__nav-button--interaction-disabled___Ivjrx",
1046
+ "date-picker__caption": "lc-DatePicker-module__date-picker__caption___XPgZJ",
1047
+ "date-picker__weekdays": "lc-DatePicker-module__date-picker__weekdays___kpTY9",
1048
+ "date-picker__weekdays-row": "lc-DatePicker-module__date-picker__weekdays-row___tGgay",
1049
+ "date-picker__weekday": "lc-DatePicker-module__date-picker__weekday___3FCx8",
1050
+ "date-picker__body": "lc-DatePicker-module__date-picker__body___toP1u",
1051
+ "date-picker__week": "lc-DatePicker-module__date-picker__week___nZI1x",
1052
+ "date-picker__day-wrapper": "lc-DatePicker-module__date-picker__day-wrapper___gGeeJ",
1053
+ "date-picker__day--today": "lc-DatePicker-module__date-picker__day--today___LL51c",
1054
+ "date-picker__footer": "lc-DatePicker-module__date-picker__footer___cXMQ5",
1055
+ "date-picker__input": "lc-DatePicker-module__date-picker__input___r6qih",
1056
+ "date-picker__input-overlay-wrapper": "lc-DatePicker-module__date-picker__input-overlay-wrapper___vmC0M",
1057
+ "date-picker__input-overlay": "lc-DatePicker-module__date-picker__input-overlay___eJ9D0",
1058
+ "date-picker--range": "lc-DatePicker-module__date-picker--range___ZU-7k",
1059
+ "date-picker__day--start": "lc-DatePicker-module__date-picker__day--start___-oB8U",
1060
+ "date-picker__day--end": "lc-DatePicker-module__date-picker__day--end___TtN5P",
1061
+ "date-picker__day--single": "lc-DatePicker-module__date-picker__day--single___biWcB",
1062
+ "date-picker__day--sunday": "lc-DatePicker-module__date-picker__day--sunday___JEnhV",
1063
+ "date-picker__day--monday": "lc-DatePicker-module__date-picker__day--monday___NXYIr",
1064
+ "date-picker--range__select-input": "lc-DatePicker-module__date-picker--range__select-input___6pyj3",
1065
+ "date-picker--range__calendars-wrapper": "lc-DatePicker-module__date-picker--range__calendars-wrapper___8nWaW",
1066
+ "date-picker__navbar-buttons-wrapper": "lc-DatePicker-module__date-picker__navbar-buttons-wrapper___Hnksb"
1067
+ };
1068
+ const baseClass$C = "date-picker";
1069
+ const DatePickerNavbar = (props) => {
1070
+ const {
1071
+ onPreviousClick,
1072
+ onMonthChange,
1073
+ onNextClick,
1074
+ showNextButton,
1075
+ showPreviousButton,
1076
+ className,
1077
+ classNames,
1078
+ numberOfMonths,
1079
+ month,
1080
+ fromMonth,
1081
+ toMonth
1082
+ } = props;
1083
+ const handlePrevClick = () => {
1084
+ if (typeof onPreviousClick === "function") {
1085
+ onPreviousClick();
1086
+ }
1087
+ };
1088
+ const handleNextClick = () => {
1089
+ if (typeof onNextClick === "function") {
1090
+ onNextClick();
1091
+ }
1092
+ };
1093
+ const handlePrevYearClick = () => {
1094
+ if (!fromMonth) {
1095
+ const newMonth2 = subMonths(month, 12);
1096
+ return onMonthChange(newMonth2);
1097
+ }
1098
+ const diff = Math.abs(differenceInCalendarMonths(month, fromMonth));
1099
+ const newMonth = subMonths(month, !Number.isNaN(diff) && diff > 12 ? 12 : diff);
1100
+ return onMonthChange(newMonth);
1101
+ };
1102
+ const handleNextYearClick = () => {
1103
+ if (!toMonth) {
1104
+ const newMonth2 = addMonths(month, 12);
1105
+ return onMonthChange(newMonth2);
1106
+ }
1107
+ const diff = Math.abs(differenceInCalendarMonths(toMonth, month));
1108
+ const newMonth = addMonths(month, !Number.isNaN(diff) && diff > 12 ? 12 : diff);
1109
+ if (numberOfMonths === 2 && isSameMonth(newMonth, toMonth)) {
1110
+ return onMonthChange(subMonths(newMonth, 1));
1111
+ }
1112
+ return onMonthChange(newMonth);
1113
+ };
1114
+ return /* @__PURE__ */ React.createElement("div", {
1115
+ className
1116
+ }, /* @__PURE__ */ React.createElement("div", {
1117
+ className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
1118
+ }, /* @__PURE__ */ React.createElement("button", {
1119
+ "data-testid": "date-picker-prev-year-button",
1120
+ className: cx({
1121
+ [classNames.navButtonPrev]: true,
1122
+ [classNames.navButtonInteractionDisabled]: !showPreviousButton
1123
+ }),
1124
+ onClick: handlePrevYearClick
1125
+ }, /* @__PURE__ */ React.createElement(Icon, {
1126
+ source: DoubleArrowLeft,
1127
+ kind: "subtle"
1128
+ })), /* @__PURE__ */ React.createElement("button", {
1129
+ "data-testid": "date-picker-prev-month-button",
1130
+ className: cx({
1131
+ [classNames.navButtonPrev]: true,
1132
+ [classNames.navButtonInteractionDisabled]: !showPreviousButton
1133
+ }),
1134
+ onClick: handlePrevClick
1135
+ }, /* @__PURE__ */ React.createElement(Icon, {
1136
+ source: ChevronLeft,
1137
+ kind: "subtle"
1138
+ }))), /* @__PURE__ */ React.createElement("div", {
1139
+ className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
1140
+ }, /* @__PURE__ */ React.createElement("button", {
1141
+ "data-testid": "date-picker-next-month-button",
1142
+ className: cx({
1143
+ [classNames.navButtonNext]: true,
1144
+ [classNames.navButtonInteractionDisabled]: !showNextButton
1145
+ }),
1146
+ onClick: handleNextClick
1147
+ }, /* @__PURE__ */ React.createElement(Icon, {
1148
+ source: ChevronRight,
1149
+ kind: "subtle"
1150
+ })), /* @__PURE__ */ React.createElement("button", {
1151
+ "data-testid": "date-picker-next-year-button",
1152
+ className: cx({
1153
+ [classNames.navButtonNext]: true,
1154
+ [classNames.navButtonInteractionDisabled]: !showNextButton
1155
+ }),
1156
+ onClick: handleNextYearClick
1157
+ }, /* @__PURE__ */ React.createElement(Icon, {
1158
+ source: DoubleArrowRight,
1159
+ kind: "subtle"
1160
+ }))));
1161
+ };
1162
+ const baseClass$B = "date-picker";
1163
+ const isDateWithinRange = (date, range) => {
1164
+ const { from, to } = range;
1165
+ if (to && !isSameDay(date, to) && isAfter(date, to)) {
1166
+ return false;
1167
+ }
1168
+ if (from && !isSameDay(date, from) && !isAfter(date, from)) {
1169
+ return false;
1170
+ }
1171
+ return true;
1172
+ };
1173
+ const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
1174
+ if (!initialToDate) {
1175
+ return subMonths(toMonth || new Date(), 1);
1176
+ }
1177
+ const forcePreviousMonth = initialFromDate && !isSameMonth(initialFromDate, initialToDate);
1178
+ if (forcePreviousMonth || toMonth && isSameMonth(initialToDate, toMonth)) {
1179
+ return subMonths(initialToDate, 1);
1180
+ }
1181
+ return initialToDate;
1182
+ };
1183
+ const getRangeDatePickerModifiers = (from, to) => {
1184
+ const base = {
1185
+ [styles$t[`${baseClass$B}__day--monday`]]: { daysOfWeek: [1] },
1186
+ [styles$t[`${baseClass$B}__day--sunday`]]: { daysOfWeek: [0] },
1187
+ [styles$t[`${baseClass$B}__day--start`]]: from,
1188
+ [styles$t[`${baseClass$B}__day--end`]]: from
1189
+ };
1190
+ if (!to || !from)
1191
+ return base;
1192
+ const diff = differenceInCalendarDays(to, from);
1193
+ if (diff > 0) {
1194
+ return __spreadProps(__spreadValues({}, base), {
1195
+ [styles$t[`${baseClass$B}__day--end`]]: to
1196
+ });
1197
+ }
1198
+ if (diff < 0) {
1199
+ return __spreadProps(__spreadValues({}, base), {
1200
+ [styles$t[`${baseClass$B}__day--start`]]: to
1201
+ });
1202
+ }
1203
+ return base;
1204
+ };
1205
+ const getSelectedOption = (itemId, options) => {
1206
+ const selectedOption = options.find((item) => {
1207
+ return item.id === itemId;
1208
+ });
1209
+ return selectedOption ? selectedOption : void 0;
1210
+ };
1211
+ const isSelectingFirstDay = (from, to) => {
1212
+ const isRangeSelected = from && to;
1213
+ return Boolean(!from || isRangeSelected);
1214
+ };
1215
+ const getInitialStateFromProps = (props) => {
1216
+ const state = {};
1217
+ if (!props.initialSelectedItemKey) {
1218
+ return state;
1219
+ }
1220
+ const selectedOption = getSelectedOption(props.initialSelectedItemKey, props.options);
1221
+ if (!selectedOption) {
1222
+ return {};
1223
+ }
1224
+ state.selectedItem = props.initialSelectedItemKey;
1225
+ if (!selectedOption.isManual) {
1226
+ return state;
1227
+ }
1228
+ if (props.initialFromDate) {
1229
+ state.from = props.initialFromDate;
1230
+ }
1231
+ if (props.initialToDate) {
1232
+ state.to = props.initialToDate;
1233
+ state.temporaryTo = props.initialToDate;
1234
+ }
1235
+ return state;
1236
+ };
1237
+ const getDatePickerClassNames = (range, classNames) => __spreadValues({
1238
+ container: cx({
1239
+ [styles$t[`${baseClass$B}`]]: true,
1240
+ [styles$t[`${baseClass$B}--range`]]: range
1241
+ }),
1242
+ wrapper: styles$t[`${baseClass$B}__wrapper`],
1243
+ interactionDisabled: styles$t[`${baseClass$B}--interaction-disabled`],
1244
+ months: styles$t[`${baseClass$B}__months`],
1245
+ month: styles$t[`${baseClass$B}__month`],
1246
+ navBar: styles$t[`${baseClass$B}__nav-bar`],
1247
+ navButtonPrev: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--prev`]),
1248
+ navButtonNext: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--next`]),
1249
+ navButtonInteractionDisabled: styles$t[`${baseClass$B}__nav-button--interaction-disabled`],
1250
+ caption: styles$t[`${baseClass$B}__caption`],
1251
+ weekdays: styles$t[`${baseClass$B}__weekdays`],
1252
+ weekdaysRow: styles$t[`${baseClass$B}__weekdays-row`],
1253
+ weekday: styles$t[`${baseClass$B}__weekday`],
1254
+ body: styles$t[`${baseClass$B}__body`],
1255
+ week: styles$t[`${baseClass$B}__week`],
1256
+ weekNumber: styles$t[`${baseClass$B}__week-number`],
1257
+ day: styles$t[`${baseClass$B}__day`],
1258
+ footer: styles$t[`${baseClass$B}__footer`],
1259
+ todayButton: styles$t[`${baseClass$B}__today-button`],
1260
+ today: styles$t[`${baseClass$B}__day--today`],
1261
+ selected: styles$t[`${baseClass$B}__day--selected`],
1262
+ disabled: styles$t[`${baseClass$B}__day--disabled`],
1263
+ outside: styles$t[`${baseClass$B}__day--outside`],
1264
+ start: styles$t[`${baseClass$B}__day--start`],
1265
+ end: styles$t[`${baseClass$B}__day--end`]
1266
+ }, classNames);
1267
+ const baseClass$A = "date-picker";
1268
+ const defaultDayRenderer = (day) => {
1269
+ const date = day.getDate();
1270
+ return /* @__PURE__ */ React.createElement("div", {
1271
+ className: styles$t[`${baseClass$A}__day-wrapper`]
1272
+ }, /* @__PURE__ */ React.createElement("div", {
1273
+ className: styles$t[`${baseClass$A}__day-content`]
1274
+ }, date));
1275
+ };
1276
+ const DatePickerComponent = (props) => {
1277
+ const _a = props, {
1278
+ classNames,
1279
+ range,
1280
+ toMonth,
1281
+ month,
1282
+ fromMonth,
1283
+ firstDayOfWeek: propsFirstDayOfWeek,
1284
+ numberOfMonths,
1285
+ navbarElement,
1286
+ renderDay,
1287
+ innerRef
1288
+ } = _a, restProps = __objRest(_a, [
1289
+ "classNames",
1290
+ "range",
1291
+ "toMonth",
1292
+ "month",
1293
+ "fromMonth",
1294
+ "firstDayOfWeek",
1295
+ "numberOfMonths",
1296
+ "navbarElement",
1297
+ "renderDay",
1298
+ "innerRef"
1299
+ ]);
1300
+ const [currentMonth, setCurrentMonth] = React.useState(month || new Date());
1301
+ React.useEffect(() => {
1302
+ if (month && month !== currentMonth) {
1303
+ setCurrentMonth(month);
1304
+ }
1305
+ }, [month, currentMonth]);
1306
+ React.useEffect(() => {
1307
+ if (toMonth) {
1308
+ if (!isDateWithinRange(currentMonth, { from: fromMonth, to: toMonth })) {
1309
+ setCurrentMonth(toMonth);
1310
+ }
1311
+ }
1312
+ }, [currentMonth, props.toMonth, props.fromMonth]);
1313
+ const handleMonthChange = React.useCallback((month2) => {
1314
+ if (props.onMonthChange && month2) {
1315
+ props.onMonthChange(month2);
1316
+ return;
1317
+ }
1318
+ setCurrentMonth(month2);
1319
+ }, [month, props.onMonthChange]);
1320
+ let firstDayOfWeek = 1;
1321
+ if (propsFirstDayOfWeek === 0 || propsFirstDayOfWeek && propsFirstDayOfWeek < 7) {
1322
+ firstDayOfWeek = propsFirstDayOfWeek;
1323
+ }
1324
+ const datePickerClassNames = React.useMemo(() => getDatePickerClassNames(range, classNames), [range, classNames]);
1325
+ return /* @__PURE__ */ React.createElement(ReactDayPicker, __spreadValues({
1326
+ navbarElement: navbarElement || /* @__PURE__ */ React.createElement(DatePickerNavbar, {
1327
+ month: currentMonth,
1328
+ classNames: datePickerClassNames,
1329
+ numberOfMonths,
1330
+ onMonthChange: handleMonthChange,
1331
+ toMonth,
1332
+ fromMonth
1333
+ }),
1334
+ ref: innerRef,
1335
+ classNames: datePickerClassNames,
1336
+ numberOfMonths,
1337
+ toMonth,
1338
+ fromMonth,
1339
+ firstDayOfWeek,
1340
+ month: currentMonth,
1341
+ renderDay: renderDay || defaultDayRenderer
1342
+ }, restProps));
1343
+ };
1344
+ const DatePicker = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(DatePickerComponent, __spreadValues({
1345
+ innerRef: ref
1346
+ }, props)));
1347
+ DatePicker.displayName = "DatePicker";
1348
+ var RangeDatePickerAction = /* @__PURE__ */ ((RangeDatePickerAction2) => {
1349
+ RangeDatePickerAction2["NEW_SELECTED_ITEM"] = "NEW_SELECTED_ITEM";
1350
+ RangeDatePickerAction2["NEW_TEMPORARY_TO_VALUE"] = "NEW_TEMPORARY_TO_VALUE";
1351
+ RangeDatePickerAction2["CLEAR"] = "CLEAR";
1352
+ RangeDatePickerAction2["SET_FROM"] = "SET_FROM";
1353
+ RangeDatePickerAction2["SET_TO"] = "SET_TO";
1354
+ RangeDatePickerAction2["SELECT_FIRST_DAY"] = "SELECT_FIRST_DAY";
1355
+ RangeDatePickerAction2["SELECT_SECOND_DAY_AS_FROM"] = "SELECT_SECOND_DAY_AS_FROM";
1356
+ RangeDatePickerAction2["SELECT_SECOND_DAY_AS_TO"] = "SELECT_SECOND_DAY_AS_TO";
1357
+ RangeDatePickerAction2["CURRENT_MONTH_CHANGE"] = "CURRENT_MONTH_CHANGE";
1358
+ return RangeDatePickerAction2;
1359
+ })(RangeDatePickerAction || {});
1360
+ const useRangeDatePickerState = (props) => {
1361
+ const initialCurrentMonth = calculateDatePickerMonth(props.initialFromDate, props.initialToDate, props.toMonth);
1362
+ const defaultInitialState = {
1363
+ selectedItem: null,
1364
+ from: void 0,
1365
+ to: void 0,
1366
+ temporaryTo: void 0,
1367
+ currentMonth: initialCurrentMonth
1368
+ };
1369
+ const initialState = __spreadValues(__spreadValues({}, defaultInitialState), getInitialStateFromProps(props));
1370
+ function reducer(state, action) {
1371
+ switch (action.type) {
1372
+ case RangeDatePickerAction.NEW_SELECTED_ITEM:
1373
+ return {
1374
+ selectedItem: action.payload.selectedItem,
1375
+ from: void 0,
1376
+ to: void 0,
1377
+ temporaryTo: void 0,
1378
+ currentMonth: initialCurrentMonth
1379
+ };
1380
+ case RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE:
1381
+ return __spreadProps(__spreadValues({}, state), {
1382
+ temporaryTo: action.payload.date
1383
+ });
1384
+ case RangeDatePickerAction.SELECT_FIRST_DAY:
1385
+ return __spreadProps(__spreadValues({}, state), {
1386
+ from: action.payload.date,
1387
+ to: void 0,
1388
+ temporaryTo: void 0
1389
+ });
1390
+ case RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM:
1391
+ return __spreadProps(__spreadValues({}, state), {
1392
+ from: action.payload.date,
1393
+ to: state.from,
1394
+ temporaryTo: state.from
1395
+ });
1396
+ case RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO:
1397
+ return __spreadProps(__spreadValues({}, state), {
1398
+ to: action.payload.date,
1399
+ temporaryTo: action.payload.date
1400
+ });
1401
+ case RangeDatePickerAction.CURRENT_MONTH_CHANGE:
1402
+ return __spreadProps(__spreadValues({}, state), {
1403
+ currentMonth: action.payload.date
1404
+ });
1405
+ case RangeDatePickerAction.SET_FROM:
1406
+ return __spreadProps(__spreadValues({}, state), {
1407
+ from: action.payload.date
1408
+ });
1409
+ case RangeDatePickerAction.SET_TO:
1410
+ return __spreadProps(__spreadValues({}, state), {
1411
+ to: action.payload.date
1412
+ });
1413
+ default:
1414
+ return state;
1415
+ }
1416
+ }
1417
+ return useReducer(reducer, initialState);
1418
+ };
1419
+ const RangeDatePicker = ({
1420
+ options,
1421
+ initialSelectedItemKey,
1422
+ initialFromDate,
1423
+ initialToDate,
1424
+ toMonth,
1425
+ onChange,
1426
+ children
1427
+ }) => {
1428
+ const prevSelectedItem = useRef(initialSelectedItemKey || null);
1429
+ const [state, dispatch] = useRangeDatePickerState({
1430
+ options,
1431
+ initialSelectedItemKey,
1432
+ initialFromDate,
1433
+ initialToDate,
1434
+ toMonth,
1435
+ onChange,
1436
+ children
1437
+ });
1438
+ useEffect(() => {
1439
+ dispatch({
1440
+ type: RangeDatePickerAction.SET_FROM,
1441
+ payload: { date: initialFromDate }
1442
+ });
1443
+ }, [initialFromDate]);
1444
+ useEffect(() => {
1445
+ dispatch({
1446
+ type: RangeDatePickerAction.SET_TO,
1447
+ payload: { date: initialToDate }
1448
+ });
1449
+ }, [initialToDate]);
1450
+ useEffect(() => {
1451
+ const currentMonth = calculateDatePickerMonth(initialFromDate, initialToDate, toMonth);
1452
+ dispatch({
1453
+ type: RangeDatePickerAction.CURRENT_MONTH_CHANGE,
1454
+ payload: { date: currentMonth }
1455
+ });
1456
+ }, [toMonth, initialFromDate, initialToDate]);
1457
+ useEffect(() => {
1458
+ const { from, selectedItem, to } = state;
1459
+ if (!(from && to)) {
1460
+ return;
1461
+ }
1462
+ const selectedOption = getSelectedOption(selectedItem, options);
1463
+ if (!selectedOption)
1464
+ return;
1465
+ onChange && onChange(__spreadProps(__spreadValues({}, selectedOption), {
1466
+ value: {
1467
+ from,
1468
+ to
1469
+ }
1470
+ }));
1471
+ }, [state.from, state.to, state.selectedItem, options, onChange]);
1472
+ useEffect(() => {
1473
+ const { selectedItem } = state;
1474
+ if (selectedItem === prevSelectedItem.current) {
1475
+ return;
1476
+ }
1477
+ if (!selectedItem) {
1478
+ onChange(null);
1479
+ return;
1480
+ }
1481
+ const selectedOption = getSelectedOption(selectedItem, options);
1482
+ if (!selectedOption) {
1483
+ return;
1484
+ }
1485
+ const optionsHash = options.reduce((acc, option) => __spreadProps(__spreadValues({}, acc), { [option.id]: option }), {});
1486
+ onChange(optionsHash[selectedItem]);
1487
+ }, [onChange, state.selectedItem, options]);
1488
+ const handleDayMouseEnter = useCallback((day) => {
1489
+ const isInRange = toMonth ? differenceInCalendarDays(toMonth, day) >= 0 : true;
1490
+ if (!isSelectingFirstDay(state.from, state.to) && isInRange) {
1491
+ dispatch({
1492
+ type: RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE,
1493
+ payload: { date: day }
1494
+ });
1495
+ }
1496
+ }, [toMonth, state.from, state.to]);
1497
+ const handleDayClick = useCallback((day) => {
1498
+ const { from, to } = state;
1499
+ if (!isDateWithinRange(day, { to: toMonth })) {
1500
+ return;
1501
+ }
1502
+ if (isSelectingFirstDay(from, to)) {
1503
+ dispatch({
1504
+ type: RangeDatePickerAction.SELECT_FIRST_DAY,
1505
+ payload: { date: day }
1506
+ });
1507
+ } else if (from && isSameDay(day, from) || from && isAfter(day, from)) {
1508
+ dispatch({
1509
+ type: RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO,
1510
+ payload: { date: day }
1511
+ });
1512
+ } else {
1513
+ dispatch({
1514
+ type: RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM,
1515
+ payload: { date: day }
1516
+ });
1517
+ }
1518
+ }, [toMonth, state.from, state.to]);
1519
+ const handleItemSelect = useCallback((itemKey) => {
1520
+ if (itemKey === null) {
1521
+ dispatch({
1522
+ type: RangeDatePickerAction.NEW_SELECTED_ITEM,
1523
+ payload: { selectedItem: null }
1524
+ });
1525
+ return;
1526
+ }
1527
+ const selectedOption = getSelectedOption(itemKey, options);
1528
+ if (!selectedOption) {
1529
+ return;
1530
+ }
1531
+ dispatch({
1532
+ type: RangeDatePickerAction.NEW_SELECTED_ITEM,
1533
+ payload: { selectedItem: itemKey }
1534
+ });
1535
+ }, [options]);
1536
+ const handleMonthChange = useCallback((date) => {
1537
+ dispatch({
1538
+ type: RangeDatePickerAction.CURRENT_MONTH_CHANGE,
1539
+ payload: { date }
1540
+ });
1541
+ }, []);
1542
+ const getRangeDatePickerApi = () => {
1543
+ const { currentMonth, from, selectedItem, temporaryTo, to } = state;
1544
+ const modifiers = useMemo(() => getRangeDatePickerModifiers(from, temporaryTo), [from, temporaryTo]);
1545
+ const selectedOption = useMemo(() => {
1546
+ return getSelectedOption(selectedItem, options);
1547
+ }, [options, selectedItem]);
1548
+ const selectedDays = useMemo(() => {
1549
+ return [from, { from, to: temporaryTo }];
1550
+ }, [from, temporaryTo]);
1551
+ const disabledDays = useMemo(() => {
1552
+ return toMonth ? { after: toMonth } : void 0;
1553
+ }, [toMonth]);
1554
+ return {
1555
+ select: {
1556
+ onItemSelect: handleItemSelect,
1557
+ selected: selectedItem || ""
1558
+ },
1559
+ inputs: {
1560
+ fromDate: from,
1561
+ toDate: to
1562
+ },
1563
+ datepicker: {
1564
+ range: true,
1565
+ month: currentMonth,
1566
+ numberOfMonths: 2,
1567
+ onDayClick: handleDayClick,
1568
+ selectedDays,
1569
+ modifiers,
1570
+ initialMonth: toMonth && subMonths(toMonth, 1),
1571
+ toMonth,
1572
+ disabledDays,
1573
+ onDayMouseEnter: handleDayMouseEnter,
1574
+ onMonthChange: handleMonthChange
1575
+ },
1576
+ selectedOption
1577
+ };
1578
+ };
1579
+ return children(getRangeDatePickerApi());
1580
+ };
1581
+ RangeDatePicker.defaultProps = {
1582
+ options: [
1583
+ {
1584
+ id: "default",
1585
+ label: "Default option",
1586
+ isManual: true,
1587
+ value: {
1588
+ from: void 0,
1589
+ to: void 0
1590
+ }
1591
+ }
1592
+ ]
1593
+ };
1594
+ var styles$s = {
1595
+ "field-error": "lc-FieldError-module__field-error___IDkPT"
1596
+ };
1597
+ const baseClass$z = "field-error";
1598
+ const FieldError = (_q) => {
1599
+ var _r = _q, {
1600
+ children,
1601
+ className = ""
1602
+ } = _r, props = __objRest(_r, [
1603
+ "children",
1604
+ "className"
1605
+ ]);
1606
+ const mergedClassNames = cx(styles$s[baseClass$z], className);
1607
+ return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
1608
+ as: "span",
1609
+ size: "sm"
1610
+ }, props), {
1611
+ className: mergedClassNames
1612
+ }), children);
1613
+ };
1614
+ var styles$r = {
1615
+ "field-group": "lc-FieldGroup-module__field-group___gy8lp",
1616
+ "field-group--inline": "lc-FieldGroup-module__field-group--inline___or4qf",
1617
+ "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
1618
+ };
1619
+ const baseClass$y = "field-group";
1620
+ const FieldGroup = (_s) => {
1621
+ var _t = _s, {
1622
+ className = "",
1623
+ children,
1624
+ description,
1625
+ error,
1626
+ inline,
1627
+ stretch
1628
+ } = _t, props = __objRest(_t, [
1629
+ "className",
1630
+ "children",
1631
+ "description",
1632
+ "error",
1633
+ "inline",
1634
+ "stretch"
1635
+ ]);
1636
+ const mergedClassNames = cx(styles$r[baseClass$y], className, {
1637
+ [styles$r[`${baseClass$y}--inline`]]: inline,
1638
+ [styles$r[`${baseClass$y}--stretched`]]: stretch
1639
+ });
1640
+ return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
1641
+ className: mergedClassNames
1642
+ }), children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description));
1643
+ };
1644
+ const form = "lc-Form-module__form___1nOYF";
1645
+ const form__header = "lc-Form-module__form__header___U4B7t";
1646
+ const form__footer = "lc-Form-module__form__footer___1-sUX";
1647
+ const form__label = "lc-Form-module__form__label___spg-J";
1648
+ const form__helper = "lc-Form-module__form__helper___bhfwS";
1649
+ var styles$q = {
1650
+ form,
1651
+ form__header,
1652
+ form__footer,
1653
+ form__label,
1654
+ form__helper
1655
+ };
1656
+ const baseClass$x = "form";
1657
+ const Form = (_u) => {
1658
+ var _v = _u, {
1659
+ className,
1660
+ children,
1661
+ labelText,
1662
+ helperText,
1663
+ formFooter
1664
+ } = _v, restProps = __objRest(_v, [
1665
+ "className",
1666
+ "children",
1667
+ "labelText",
1668
+ "helperText",
1669
+ "formFooter"
1670
+ ]);
1671
+ return /* @__PURE__ */ React.createElement("form", __spreadValues({
1672
+ className: cx(styles$q[baseClass$x], className)
1673
+ }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
1674
+ className: styles$q[`${baseClass$x}__header`]
1675
+ }, labelText && /* @__PURE__ */ React.createElement(Heading, {
1676
+ size: "sm",
1677
+ className: styles$q[`${baseClass$x}__label`]
1678
+ }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
1679
+ as: "p",
1680
+ size: "sm",
1681
+ className: styles$q[`${baseClass$x}__helper`]
1682
+ }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
1683
+ className: styles$q[`${baseClass$x}__footer`]
1684
+ }, formFooter));
1685
+ };
1686
+ var styles$p = {
1687
+ "form-field": "lc-FormField-module__form-field___JqnX6",
1688
+ "form-field--inline": "lc-FormField-module__form-field--inline___4DgIq",
1689
+ "form-field__wrapper--inline": "lc-FormField-module__form-field__wrapper--inline___Ubvrn",
1690
+ "form-field__label": "lc-FormField-module__form-field__label___hNCFS",
1691
+ "form-field__label--inline": "lc-FormField-module__form-field__label--inline___QxyM6",
1692
+ "form-field__label--no-text": "lc-FormField-module__form-field__label--no-text___Ohs-I",
1693
+ "form-field__label-wrapper": "lc-FormField-module__form-field__label-wrapper___61-NO",
1694
+ "form-field__label-adornment": "lc-FormField-module__form-field__label-adornment___HB0z7",
1695
+ "form-field__label-left-node": "lc-FormField-module__form-field__label-left-node___dvipB",
1696
+ "form-field__label-right-node": "lc-FormField-module__form-field__label-right-node___LR-03",
1697
+ "form-field__label-right-node--inline": "lc-FormField-module__form-field__label-right-node--inline___BkiPG",
1698
+ "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
1699
+ "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
1700
+ };
1701
+ const baseClass$w = "form-field";
1702
+ const FormField = ({
1703
+ inline,
1704
+ error,
1705
+ description,
1706
+ labelText,
1707
+ labelAdornment,
1708
+ className,
1709
+ labelFor,
1710
+ children,
1711
+ labelRightNode
1712
+ }) => {
1713
+ const mergedClassNames = cx(styles$p[baseClass$w], {
1714
+ [styles$p[`${baseClass$w}--inline`]]: inline
1715
+ }, className);
1716
+ return /* @__PURE__ */ React.createElement("div", {
1717
+ className: mergedClassNames
1718
+ }, labelRightNode && inline && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
1719
+ className: cx(styles$p[`${baseClass$w}__label-right-node`], styles$p[`${baseClass$w}__label-right-node--inline`])
1720
+ }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
1721
+ className: styles$p[`${baseClass$w}__row-break`]
1722
+ })), /* @__PURE__ */ React.createElement("div", {
1723
+ className: cx(styles$p[`${baseClass$w}__wrapper`], inline && styles$p[`${baseClass$w}__wrapper--inline`])
1724
+ }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
1725
+ className: cx(styles$p[`${baseClass$w}__label`], inline && styles$p[`${baseClass$w}__label--inline`], !labelText && styles$p[`${baseClass$w}__label--no-text`])
1726
+ }, labelText && /* @__PURE__ */ React.createElement("div", {
1727
+ className: cx(styles$p[`${baseClass$w}__label-wrapper`])
1728
+ }, /* @__PURE__ */ React.createElement("label", {
1729
+ className: styles$p[`${baseClass$w}__label-left-node`],
1730
+ htmlFor: labelFor
1731
+ }, /* @__PURE__ */ React.createElement(Text, {
1732
+ as: "span",
1733
+ size: "sm"
1734
+ }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
1735
+ className: cx(styles$p[`${baseClass$w}__label-adornment`])
1736
+ }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
1737
+ className: cx(styles$p[`${baseClass$w}__label-right-node`])
1738
+ }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
1739
+ className: cx(styles$p[`${baseClass$w}__content`])
1740
+ }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
1741
+ };
1742
+ var styles$o = {
1743
+ "form-group": "lc-FormGroup-module__form-group___e2JHa",
1744
+ "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
1745
+ "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
1746
+ "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
1747
+ };
1748
+ const baseClass$v = "form-group";
1749
+ const FormGroup = (_w) => {
1750
+ var _x = _w, {
1751
+ className = "",
1752
+ children,
1753
+ labelText,
1754
+ helperText
1755
+ } = _x, props = __objRest(_x, [
1756
+ "className",
1757
+ "children",
1758
+ "labelText",
1759
+ "helperText"
1760
+ ]);
1761
+ const mergedClassNames = cx(styles$o[baseClass$v], className);
1762
+ return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
1763
+ role: "group"
1764
+ }), labelText && { "aria-label": labelText }), {
1765
+ className: mergedClassNames
1766
+ }), /* @__PURE__ */ React.createElement("div", {
1767
+ className: styles$o[`${baseClass$v}__header`]
1768
+ }, /* @__PURE__ */ React.createElement(Heading, {
1769
+ as: "div",
1770
+ size: "sm",
1771
+ className: styles$o[`${baseClass$v}__label`]
1772
+ }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
1773
+ as: "div",
1774
+ size: "sm",
1775
+ className: styles$o[`${baseClass$v}__helper`]
1776
+ }, helperText)), children);
1777
+ };
1778
+ const input = "lc-Input-module__input___qeMAQ";
1779
+ var styles$n = {
1780
+ input,
1781
+ "input--focused": "lc-Input-module__input--focused___wQH5-",
1782
+ "input--disabled": "lc-Input-module__input--disabled___HidXX",
1783
+ "input--error": "lc-Input-module__input--error___DlDbC",
1784
+ "input--compact": "lc-Input-module__input--compact___iKSQZ",
1785
+ "input--medium": "lc-Input-module__input--medium___3BjqQ",
1786
+ "input--large": "lc-Input-module__input--large___jX5RW",
1787
+ "input__icon--disabled": "lc-Input-module__input__icon--disabled___XO3dc",
1788
+ "input__icon--left": "lc-Input-module__input__icon--left___BcySs",
1789
+ "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
1790
+ "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
1791
+ };
1792
+ const baseClass$u = "input";
1793
+ const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
1794
+ ["data-testid"]: `input-icon-${icon2.place}`,
1795
+ className: cx(styles$n[`${baseClass$u}__icon`], styles$n[`${baseClass$u}__icon--${icon2.place}`], {
1796
+ [styles$n[`${baseClass$u}__icon--disabled`]]: disabled
1797
+ })
1798
+ });
1799
+ const Input = React.forwardRef((_y, ref) => {
1800
+ var _z = _y, {
1801
+ inputSize = "medium",
1802
+ error = false,
1803
+ disabled,
1804
+ icon: icon2 = null,
1805
+ className
1806
+ } = _z, inputProps = __objRest(_z, [
1807
+ "inputSize",
1808
+ "error",
1809
+ "disabled",
1810
+ "icon",
1811
+ "className"
1812
+ ]);
1813
+ const [isFocused, setIsFocused] = React.useState(false);
1814
+ const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
1815
+ const { type, onFocus, onBlur } = inputProps;
1816
+ const mergedClassNames = cx(className, styles$n[baseClass$u], styles$n[`${baseClass$u}--${inputSize}`], {
1817
+ [styles$n[`${baseClass$u}--disabled`]]: disabled,
1818
+ [styles$n[`${baseClass$u}--focused`]]: isFocused,
1819
+ [styles$n[`${baseClass$u}--error`]]: error
1820
+ });
1821
+ const iconCustomColor = !disabled ? "var(--content-default)" : "var(--content-disabled)";
1822
+ const iconSource = isPasswordVisible ? VisibilityOn : VisibilityOff;
1823
+ const shouldRenderLeftIcon = icon2 && icon2.place === "left";
1824
+ const shouldRenderRightIcon = icon2 && type !== "password" && icon2.place === "right";
1825
+ return /* @__PURE__ */ React.createElement("div", {
1826
+ className: mergedClassNames,
1827
+ "aria-disabled": disabled,
1828
+ "tab-index": "0"
1829
+ }, shouldRenderLeftIcon && renderIcon(icon2, disabled), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
1830
+ "data-testid": "input"
1831
+ }, inputProps), {
1832
+ ref,
1833
+ onFocus: (e) => {
1834
+ setIsFocused(true);
1835
+ onFocus == null ? void 0 : onFocus(e);
1836
+ },
1837
+ onBlur: (e) => {
1838
+ setIsFocused(false);
1839
+ onBlur == null ? void 0 : onBlur(e);
1840
+ },
1841
+ disabled,
1842
+ type: type && !isPasswordVisible ? type : "text"
1843
+ })), shouldRenderRightIcon && renderIcon(icon2, disabled), type === "password" && /* @__PURE__ */ React.createElement(Button, {
1844
+ disabled,
1845
+ kind: "plain",
1846
+ icon: /* @__PURE__ */ React.createElement(Icon, {
1847
+ customColor: iconCustomColor,
1848
+ source: iconSource
1849
+ }),
1850
+ onClick: () => setIsPasswordVisible((v) => !v),
1851
+ className: styles$n[`${baseClass$u}__visibility-button`]
1852
+ }));
1853
+ });
1854
+ const link = "lc-Link-module__link___kqx52";
1855
+ var styles$m = {
1856
+ link,
1857
+ "link--bold": "lc-Link-module__link--bold___1rGdO"
1858
+ };
1859
+ const baseClass$t = "link";
1860
+ const Link = (_A) => {
1861
+ var _B = _A, {
1862
+ bold = false,
1863
+ className = ""
1864
+ } = _B, rest = __objRest(_B, [
1865
+ "bold",
1866
+ "className"
1867
+ ]);
1868
+ return /* @__PURE__ */ React.createElement("a", __spreadValues({
1869
+ className: cx(styles$m[baseClass$t], bold && styles$m[`${baseClass$t}--bold`], className)
1870
+ }, rest));
1871
+ };
1872
+ const KeyCodes = {
1873
+ esc: "Escape",
1874
+ enter: "Enter",
1875
+ backspace: "Backspace",
1876
+ delete: "Delete",
1877
+ spacebar: " ",
1878
+ tab: "Tab",
1879
+ semicolon: ";",
1880
+ comma: ",",
1881
+ arrowUp: "ArrowUp",
1882
+ arrowDown: "ArrowDown"
1883
+ };
1884
+ const modal__header = "lc-Modal-module__modal__header___Fp5VE";
1885
+ const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
1886
+ const modal__body = "lc-Modal-module__modal__body___M-jmN";
1887
+ const modal__footer = "lc-Modal-module__modal__footer___2LYdc";
1888
+ var styles$l = {
1889
+ "modal-base": "lc-Modal-module__modal-base___hbL1U",
1890
+ "modal-base__overlay": "lc-Modal-module__modal-base__overlay___kCQ8t",
1891
+ "modal-base__overlay--visible": "lc-Modal-module__modal-base__overlay--visible___zUNJL",
1892
+ "modal-base__close": "lc-Modal-module__modal-base__close___gJlgr",
1893
+ "modal-base__close--label-type": "lc-Modal-module__modal-base__close--label-type___Om0Vb",
1894
+ modal__header,
1895
+ "modal__label-header": "lc-Modal-module__modal__label-header___ZPtEy",
1896
+ modal__heading,
1897
+ "modal__label-heading": "lc-Modal-module__modal__label-heading___WnYcF",
1898
+ modal__body,
1899
+ "modal__body--full-space": "lc-Modal-module__modal__body--full-space___LsSNE",
1900
+ modal__footer
1901
+ };
1902
+ const baseClass$s = "modal-base";
1903
+ const ModalBase = (_C) => {
1904
+ var _D = _C, {
1905
+ children,
1906
+ className = "",
1907
+ onClose,
1908
+ closeOnEscPress = true,
1909
+ closeOnOverlayPress = true
1910
+ } = _D, props = __objRest(_D, [
1911
+ "children",
1912
+ "className",
1913
+ "onClose",
1914
+ "closeOnEscPress",
1915
+ "closeOnOverlayPress"
1916
+ ]);
1917
+ const mergedClassNames = cx(styles$l[baseClass$s], className);
1918
+ React.useEffect(() => {
1919
+ if (!closeOnEscPress) {
1920
+ return;
1921
+ }
1922
+ const onKeyUp = (event) => {
1923
+ if (event.key === KeyCodes.esc) {
1924
+ onClose();
1925
+ }
1926
+ };
1927
+ document.addEventListener("keyup", onKeyUp, true);
1928
+ return () => document.removeEventListener("keyup", onKeyUp, true);
1929
+ }, [closeOnEscPress]);
1930
+ const onOverlayClick = (event) => {
1931
+ if (closeOnOverlayPress && event.target === event.currentTarget) {
1932
+ onClose();
1933
+ }
1934
+ };
1935
+ return /* @__PURE__ */ React.createElement("div", {
1936
+ "data-testid": "lc-modal-overlay",
1937
+ onMouseDown: onOverlayClick,
1938
+ className: cx(styles$l[`${baseClass$s}__overlay`], styles$l[`${baseClass$s}__overlay--visible`])
1939
+ }, /* @__PURE__ */ React.createElement("div", __spreadValues({
1940
+ role: "dialog",
1941
+ "aria-modal": true,
1942
+ className: mergedClassNames
1943
+ }, props), children));
1944
+ };
1945
+ const ModalCloseButton = ({
1946
+ labelType,
1947
+ customColor,
1948
+ onClick
1949
+ }) => /* @__PURE__ */ React.createElement("button", {
1950
+ title: "Close modal",
1951
+ className: cx(styles$l["modal-base__close"], labelType && styles$l["modal-base__close--label-type"]),
1952
+ onClick,
1953
+ type: "button"
1954
+ }, /* @__PURE__ */ React.createElement(Icon, {
1955
+ source: Close,
1956
+ size: "large",
1957
+ customColor
1958
+ }));
1959
+ const baseClass$r = "modal";
1960
+ const Modal = (_E) => {
1961
+ var _F = _E, {
1962
+ children,
1963
+ className = "",
1964
+ heading,
1965
+ labelHeading,
1966
+ fullSpaceContent,
1967
+ footer,
1968
+ onClose
1969
+ } = _F, props = __objRest(_F, [
1970
+ "children",
1971
+ "className",
1972
+ "heading",
1973
+ "labelHeading",
1974
+ "fullSpaceContent",
1975
+ "footer",
1976
+ "onClose"
1977
+ ]);
1978
+ const mergedClassNames = cx(styles$l[baseClass$r], className);
1979
+ const onCloseButtonClick = (event) => {
1980
+ event.preventDefault();
1981
+ event.stopPropagation();
1982
+ onClose();
1983
+ };
1984
+ return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
1985
+ className: mergedClassNames,
1986
+ onClose
1987
+ }, props), labelHeading && /* @__PURE__ */ React.createElement("div", {
1988
+ className: styles$l[`${baseClass$r}__label-header`]
1989
+ }, /* @__PURE__ */ React.createElement(Heading, {
1990
+ size: "xs",
1991
+ as: "div",
1992
+ className: styles$l[`${baseClass$r}__label-heading`]
1993
+ }, labelHeading), /* @__PURE__ */ React.createElement(ModalCloseButton, {
1994
+ labelType: !!labelHeading,
1995
+ customColor: `var(--color-white)`,
1996
+ onClick: onCloseButtonClick
1997
+ })), !labelHeading && heading && /* @__PURE__ */ React.createElement("div", {
1998
+ className: styles$l[`${baseClass$r}__header`]
1999
+ }, /* @__PURE__ */ React.createElement(Heading, {
2000
+ size: "sm",
2001
+ as: "div",
2002
+ className: styles$l[`${baseClass$r}__heading`]
2003
+ }, heading)), !labelHeading && /* @__PURE__ */ React.createElement(ModalCloseButton, {
2004
+ onClick: onCloseButtonClick
2005
+ }), /* @__PURE__ */ React.createElement("div", {
2006
+ "data-testid": "modal-body",
2007
+ className: cx(styles$l[`${baseClass$r}__body`], fullSpaceContent && styles$l[`${baseClass$r}__body--full-space`])
2008
+ }, children), footer && /* @__PURE__ */ React.createElement("div", {
2009
+ className: styles$l[`${baseClass$r}__footer`]
2010
+ }, footer));
2011
+ };
2012
+ const ModalPortal = ({
2013
+ children,
2014
+ className = "",
2015
+ parentElementName = "body",
2016
+ zIndex
2017
+ }) => {
2018
+ const [container] = React.useState(() => document.createElement("div"));
2019
+ if (className) {
2020
+ container.classList.add(className);
2021
+ }
2022
+ if (zIndex) {
2023
+ container.style.zIndex = zIndex.toString();
2024
+ }
2025
+ React.useEffect(() => {
2026
+ var _a;
2027
+ (_a = document.querySelector(parentElementName)) == null ? void 0 : _a.appendChild(container);
2028
+ return () => {
2029
+ var _a2;
2030
+ (_a2 = document.querySelector(parentElementName)) == null ? void 0 : _a2.removeChild(container);
2031
+ };
2032
+ }, [parentElementName]);
2033
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
2034
+ };
2035
+ var styles$k = {
2036
+ "numeric-input": "lc-NumericInput-module__numeric-input___j1esc",
2037
+ "numeric-input__increment": "lc-NumericInput-module__numeric-input__increment___i3Tys",
2038
+ "numeric-input__decrement": "lc-NumericInput-module__numeric-input__decrement___3qgn0",
2039
+ "numeric-input--disabled": "lc-NumericInput-module__numeric-input--disabled___yaRvQ",
2040
+ "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
2041
+ "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
2042
+ };
2043
+ const baseClass$q = "numeric-input";
2044
+ const NumericInput = (_G) => {
2045
+ var _H = _G, {
2046
+ className,
2047
+ error,
2048
+ value,
2049
+ max,
2050
+ min,
2051
+ disabled,
2052
+ noControls,
2053
+ style,
2054
+ onChange
2055
+ } = _H, restProps = __objRest(_H, [
2056
+ "className",
2057
+ "error",
2058
+ "value",
2059
+ "max",
2060
+ "min",
2061
+ "disabled",
2062
+ "noControls",
2063
+ "style",
2064
+ "onChange"
2065
+ ]);
2066
+ const inputRef = React.useRef(null);
2067
+ const mergedClassNames = cx(styles$k[baseClass$q], {
2068
+ [styles$k[`${baseClass$q}--error`]]: error,
2069
+ [styles$k[`${baseClass$q}--no-controls`]]: noControls,
2070
+ [styles$k[`${baseClass$q}--disabled`]]: disabled
2071
+ }, className);
2072
+ const callOnChange = (val) => onChange(String(val));
2073
+ const calcValue = (val) => {
2074
+ if (max !== void 0 && val > max) {
2075
+ return max;
2076
+ }
2077
+ if (min !== void 0 && val < min) {
2078
+ return min;
2079
+ }
2080
+ return val;
2081
+ };
2082
+ const updateValue = (val) => {
2083
+ const newValue = parseInt(value, 10) + val;
2084
+ return callOnChange(calcValue(newValue));
2085
+ };
2086
+ const onKeyDown = (e) => {
2087
+ if (e.key === KeyCodes.arrowDown) {
2088
+ e.preventDefault();
2089
+ updateValue(-1);
2090
+ }
2091
+ if (e.key === KeyCodes.arrowUp) {
2092
+ e.preventDefault();
2093
+ updateValue(1);
2094
+ }
2095
+ };
2096
+ const hasReachedTheLimit = (value2, margin) => margin !== void 0 && parseInt(value2, 10) === margin;
2097
+ const handleOnChange = (e) => {
2098
+ e.preventDefault();
2099
+ e.stopPropagation();
2100
+ const inputVal = e.currentTarget.value.replace(/((?!([-]|([-]?\d+))).)/, "");
2101
+ if (inputVal === "" || inputVal === "-") {
2102
+ return callOnChange(inputVal);
2103
+ }
2104
+ const newValue = parseInt(inputVal, 10);
2105
+ return callOnChange(calcValue(newValue));
2106
+ };
2107
+ const handleIncrementClick = () => {
2108
+ var _a;
2109
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
2110
+ return updateValue(1);
2111
+ };
2112
+ const handleDecrementClick = () => {
2113
+ var _a;
2114
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
2115
+ return updateValue(-1);
2116
+ };
2117
+ return /* @__PURE__ */ React.createElement("div", {
2118
+ className: mergedClassNames,
2119
+ style
2120
+ }, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
2121
+ type: "text",
2122
+ ref: inputRef
2123
+ }, restProps), {
2124
+ value,
2125
+ disabled,
2126
+ onChange: handleOnChange,
2127
+ onKeyDown,
2128
+ min,
2129
+ max
2130
+ })), !noControls && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", {
2131
+ tabIndex: -1,
2132
+ disabled: disabled || hasReachedTheLimit(value, max),
2133
+ onClick: handleIncrementClick,
2134
+ "aria-label": "Increment value",
2135
+ className: styles$k[`${baseClass$q}__increment`],
2136
+ type: "button"
2137
+ }, /* @__PURE__ */ React.createElement(Icon, {
2138
+ source: ChevronUp,
2139
+ disabled: disabled || hasReachedTheLimit(value, max),
2140
+ kind: "primary"
2141
+ })), /* @__PURE__ */ React.createElement("button", {
2142
+ tabIndex: -1,
2143
+ disabled: disabled || hasReachedTheLimit(value, min),
2144
+ "aria-label": "Decrement value",
2145
+ className: styles$k[`${baseClass$q}__decrement`],
2146
+ onClick: handleDecrementClick,
2147
+ type: "button"
2148
+ }, /* @__PURE__ */ React.createElement(Icon, {
2149
+ source: ChevronDown,
2150
+ kind: "primary",
2151
+ disabled: disabled || hasReachedTheLimit(value, min)
2152
+ }))));
2153
+ };
2154
+ var styles$j = {
2155
+ "picker-trigger": "lc-Trigger-module__picker-trigger___BIvTx",
2156
+ "picker-trigger--compact": "lc-Trigger-module__picker-trigger--compact___3i1DL",
2157
+ "picker-trigger--medium": "lc-Trigger-module__picker-trigger--medium___-fbEx",
2158
+ "picker-trigger--large": "lc-Trigger-module__picker-trigger--large___C8qkZ",
2159
+ "picker-trigger--multi-select": "lc-Trigger-module__picker-trigger--multi-select___rLpTy",
2160
+ "picker-trigger--multi-select--with-items": "lc-Trigger-module__picker-trigger--multi-select--with-items___QFhY2",
2161
+ "picker-trigger__controls": "lc-Trigger-module__picker-trigger__controls___EsSeM",
2162
+ "picker-trigger__controls--compact": "lc-Trigger-module__picker-trigger__controls--compact___g3P6e",
2163
+ "picker-trigger__controls--medium": "lc-Trigger-module__picker-trigger__controls--medium___G4OYQ",
2164
+ "picker-trigger__controls--large": "lc-Trigger-module__picker-trigger__controls--large___h-egq",
2165
+ "picker-trigger__clear-icon": "lc-Trigger-module__picker-trigger__clear-icon___8H-4T",
2166
+ "picker-trigger__content": "lc-Trigger-module__picker-trigger__content___bYnCH",
2167
+ "picker-trigger--disabled": "lc-Trigger-module__picker-trigger--disabled___7H4tD",
2168
+ "picker-trigger--focused": "lc-Trigger-module__picker-trigger--focused___vTr39",
2169
+ "picker-trigger--error": "lc-Trigger-module__picker-trigger--error___Rh8Qd"
2170
+ };
2171
+ const baseClass$p = "picker-trigger";
2172
+ const Trigger = ({
2173
+ children,
2174
+ isSearchDisabled,
2175
+ isDisabled,
2176
+ isError,
2177
+ isItemSelected,
2178
+ isOpen,
2179
+ isRequired,
2180
+ isMultiSelect,
2181
+ size = "medium",
2182
+ onTrigger,
2183
+ onClear
2184
+ }) => {
2185
+ const triggerRef = React.useRef(null);
2186
+ const mergedClassNames = cx(styles$j[baseClass$p], styles$j[`${baseClass$p}--${size}`], isMultiSelect && styles$j[`${baseClass$p}--multi-select`], isMultiSelect && isItemSelected && styles$j[`${baseClass$p}--multi-select--with-items`], isDisabled && styles$j[`${baseClass$p}--disabled`], isOpen && styles$j[`${baseClass$p}--focused`], isError && styles$j[`${baseClass$p}--error`]);
2187
+ React.useEffect(() => {
2188
+ const onKeyDown = (e) => {
2189
+ const isFocused = document.activeElement === triggerRef.current;
2190
+ if (isFocused && e.key !== KeyCodes.tab) {
2191
+ onTrigger(e);
2192
+ }
2193
+ };
2194
+ if (!isSearchDisabled) {
2195
+ document.addEventListener("keydown", onKeyDown);
2196
+ }
2197
+ return () => {
2198
+ if (!isSearchDisabled) {
2199
+ document.removeEventListener("keydown", onKeyDown);
2200
+ }
2201
+ };
2202
+ }, [isSearchDisabled]);
2203
+ const handleTriggerClick = (e) => {
2204
+ onTrigger(e);
2205
+ };
2206
+ const handleOnClearClick = (e) => {
2207
+ e.stopPropagation();
2208
+ onClear();
2209
+ };
2210
+ return /* @__PURE__ */ React.createElement("div", {
2211
+ ref: triggerRef,
2212
+ className: mergedClassNames,
2213
+ onClick: handleTriggerClick,
2214
+ tabIndex: 0
2215
+ }, /* @__PURE__ */ React.createElement("div", {
2216
+ className: styles$j[`${baseClass$p}__content`]
2217
+ }, children), /* @__PURE__ */ React.createElement("div", {
2218
+ className: cx(styles$j[`${baseClass$p}__controls`], styles$j[`${baseClass$p}__controls--${size}`])
2219
+ }, isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
2220
+ "data-testid": `${baseClass$p}__clear-icon`,
2221
+ className: styles$j[`${baseClass$p}__clear-icon`],
2222
+ onClick: handleOnClearClick
2223
+ }, /* @__PURE__ */ React.createElement(Icon, {
2224
+ kind: "primary",
2225
+ size: "small",
2226
+ source: Close
2227
+ })), /* @__PURE__ */ React.createElement(Icon, {
2228
+ className: styles$j[`${baseClass$p}__chevron-icon`],
2229
+ source: !isOpen ? ChevronDown : ChevronUp,
2230
+ size: "large",
2231
+ disabled: isDisabled
2232
+ })));
2233
+ };
2234
+ var styles$i = {
2235
+ "picker-list": "lc-PickerList-module__picker-list___FqdgZ",
2236
+ "picker-list__no-results": "lc-PickerList-module__picker-list__no-results___tX172",
2237
+ "picker-list__item": "lc-PickerList-module__picker-list__item___8QNS0",
2238
+ "picker-list__item--select-all": "lc-PickerList-module__picker-list__item--select-all___PlTHV",
2239
+ "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0",
2240
+ "picker-list__item__content": "lc-PickerList-module__picker-list__item__content___D-tsE",
2241
+ "picker-list__item__custom": "lc-PickerList-module__picker-list__item__custom___kJEP6"
2242
+ };
2243
+ const SELECT_ALL_OPTION_KEY = "select-all";
2244
+ const baseClass$o = "picker-list";
2245
+ const itemClassName = `${baseClass$o}__item`;
2246
+ const PickerList = ({
2247
+ isOpen,
2248
+ items,
2249
+ selectedItemsKeys,
2250
+ emptyStateText = "No results found",
2251
+ selectAllOptionText,
2252
+ isMultiSelect,
2253
+ onClose,
2254
+ onSelect,
2255
+ onSelectAll
2256
+ }) => {
2257
+ const mergedClassNames = cx(styles$i[baseClass$o], {
2258
+ [styles$i[`${baseClass$o}__no-results`]]: items.length === 0
2259
+ });
2260
+ const [currentItemKey, setCurrentItemKey] = React.useState(null);
2261
+ const indexRef = React.useRef(-1);
2262
+ const lastIndexRef = React.useRef(0);
2263
+ const listRef = React.useRef(null);
2264
+ const onKeyDown = (e) => {
2265
+ if (e.key === KeyCodes.esc) {
2266
+ e.preventDefault();
2267
+ onClose();
2268
+ }
2269
+ if (e.key === KeyCodes.arrowUp && indexRef.current > 0) {
2270
+ e.preventDefault();
2271
+ indexRef.current = getPrevItemIndex();
2272
+ setCurrentItemKey(items[indexRef.current].key);
2273
+ }
2274
+ if (e.key === KeyCodes.arrowDown && indexRef.current + 1 < items.length) {
2275
+ e.preventDefault();
2276
+ indexRef.current = getNextItemIndex();
2277
+ setCurrentItemKey(items[indexRef.current].key);
2278
+ }
2279
+ if (e.key === KeyCodes.enter && !items[indexRef.current].disabled) {
2280
+ e.preventDefault();
2281
+ if (items[indexRef.current].key === SELECT_ALL_OPTION_KEY) {
2282
+ return onSelectAll();
2283
+ }
2284
+ onSelect(items[indexRef.current]);
2285
+ }
2286
+ };
2287
+ React.useEffect(() => {
2288
+ if (indexRef.current > -1 && items.length > 0) {
2289
+ setCurrentItemKey(items[indexRef.current].key);
2290
+ }
2291
+ if (isOpen) {
2292
+ document.addEventListener("keydown", onKeyDown);
2293
+ return () => document.removeEventListener("keydown", onKeyDown);
2294
+ } else {
2295
+ indexRef.current = -1;
2296
+ lastIndexRef.current = 0;
2297
+ setCurrentItemKey(null);
2298
+ }
2299
+ }, [items, isOpen, onKeyDown]);
2300
+ const isHeaderOrDisabled = (i) => !!items[i] && (items[i].disabled || items[i].groupHeader);
2301
+ const getPrevItemIndex = () => {
2302
+ indexRef.current = indexRef.current - 1;
2303
+ while (isHeaderOrDisabled(indexRef.current)) {
2304
+ indexRef.current = indexRef.current - 1;
2305
+ if (!isHeaderOrDisabled(indexRef.current)) {
2306
+ break;
2307
+ }
2308
+ }
2309
+ lastIndexRef.current = indexRef.current;
2310
+ return indexRef.current;
2311
+ };
2312
+ const getNextItemIndex = () => {
2313
+ indexRef.current = indexRef.current + 1;
2314
+ if (!isHeaderOrDisabled(indexRef.current)) {
2315
+ lastIndexRef.current = indexRef.current;
2316
+ return indexRef.current;
2317
+ }
2318
+ while (isHeaderOrDisabled(indexRef.current)) {
2319
+ indexRef.current = indexRef.current + 1;
2320
+ if (indexRef.current === items.length && !isHeaderOrDisabled(indexRef.current)) {
2321
+ return lastIndexRef.current;
2322
+ }
2323
+ if (!isHeaderOrDisabled(indexRef.current)) {
2324
+ break;
2325
+ }
2326
+ }
2327
+ lastIndexRef.current = indexRef.current;
2328
+ return indexRef.current;
2329
+ };
2330
+ const handleOnClick = (item) => onSelect(item);
2331
+ const handleOnSelectAllClick = () => onSelectAll();
2332
+ const isItemSelected = (key) => {
2333
+ if (!selectedItemsKeys) {
2334
+ return false;
2335
+ }
2336
+ return selectedItemsKeys.includes(key);
2337
+ };
2338
+ const getSelectAllOption = () => {
2339
+ if (!isMultiSelect || isMultiSelect && !selectAllOptionText) {
2340
+ return null;
2341
+ }
2342
+ return /* @__PURE__ */ React.createElement("li", {
2343
+ ref: (element) => {
2344
+ if (currentItemKey === SELECT_ALL_OPTION_KEY) {
2345
+ element == null ? void 0 : element.scrollIntoView({ block: "nearest" });
2346
+ }
2347
+ },
2348
+ role: "option",
2349
+ "aria-current": currentItemKey === SELECT_ALL_OPTION_KEY,
2350
+ id: SELECT_ALL_OPTION_KEY,
2351
+ key: SELECT_ALL_OPTION_KEY,
2352
+ className: cx(styles$i[itemClassName], styles$i[`${itemClassName}--select-all`]),
2353
+ onClick: handleOnSelectAllClick
2354
+ }, selectAllOptionText);
2355
+ };
2356
+ const getOptionContent = (item) => {
2357
+ if (item == null ? void 0 : item.customElement) {
2358
+ return /* @__PURE__ */ React.createElement("div", {
2359
+ className: styles$i[`${itemClassName}__custom`]
2360
+ }, item.customElement.listItemBody);
2361
+ }
2362
+ return item.name;
2363
+ };
2364
+ if (!isOpen) {
2365
+ return null;
2366
+ }
2367
+ if (items.length === 0) {
2368
+ return /* @__PURE__ */ React.createElement("div", {
2369
+ className: mergedClassNames
2370
+ }, emptyStateText);
2371
+ }
2372
+ return /* @__PURE__ */ React.createElement("ul", {
2373
+ ref: listRef,
2374
+ className: mergedClassNames,
2375
+ role: "listbox",
2376
+ tabIndex: -1
2377
+ }, getSelectAllOption(), items.map((item) => {
2378
+ if (item.groupHeader) {
2379
+ return /* @__PURE__ */ React.createElement("li", {
2380
+ role: "option",
2381
+ key: item.key,
2382
+ className: styles$i[`${itemClassName}__header`]
2383
+ }, item.name);
2384
+ }
2385
+ return /* @__PURE__ */ React.createElement("li", {
2386
+ "data-testid": item.key,
2387
+ ref: (element) => {
2388
+ if (currentItemKey === item.key) {
2389
+ element == null ? void 0 : element.scrollIntoView({ block: "nearest" });
2390
+ }
2391
+ },
2392
+ role: "option",
2393
+ "aria-current": currentItemKey === item.key,
2394
+ "aria-selected": isItemSelected(item.key),
2395
+ "aria-disabled": item.disabled,
2396
+ id: item.key,
2397
+ key: item.key,
2398
+ className: cx(styles$i[itemClassName], {
2399
+ [styles$i[`${itemClassName}__custom`]]: item == null ? void 0 : item.customElement
2400
+ }),
2401
+ onClick: () => !item.disabled && handleOnClick(item)
2402
+ }, /* @__PURE__ */ React.createElement("div", {
2403
+ className: styles$i[`${itemClassName}__content`]
2404
+ }, getOptionContent(item)), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
2405
+ kind: "link",
2406
+ source: Check
2407
+ }));
2408
+ }));
2409
+ };
2410
+ const picker = "lc-Picker-module__picker___GRj9W";
2411
+ const picker__container = "lc-Picker-module__picker__container___s0PUc";
2412
+ var styles$h = {
2413
+ picker,
2414
+ picker__container
2415
+ };
2416
+ const tag = "lc-Tag-module__tag___1QRVY";
2417
+ const tag__remove = "lc-Tag-module__tag__remove___UmtrW";
2418
+ const icon = "lc-Tag-module__icon___2Z-35";
2419
+ const tag__icon = "lc-Tag-module__tag__icon___tZoQ9";
2420
+ const tag__avatar = "lc-Tag-module__tag__avatar___U4c-P";
2421
+ var styles$g = {
2422
+ tag,
2423
+ "tag--success": "lc-Tag-module__tag--success___P2hXQ",
2424
+ tag__remove,
2425
+ "tag--error": "lc-Tag-module__tag--error___1cjsm",
2426
+ "tag--warning": "lc-Tag-module__tag--warning___PstMG",
2427
+ "tag--info": "lc-Tag-module__tag--info___RTH0C",
2428
+ "tag--purple": "lc-Tag-module__tag--purple___a0xaE",
2429
+ "tag--black": "lc-Tag-module__tag--black___qWjfD",
2430
+ "tag--outline": "lc-Tag-module__tag--outline___aZXtr",
2431
+ "tag--medium": "lc-Tag-module__tag--medium___l5-KI",
2432
+ "tag--large": "lc-Tag-module__tag--large___ytC6Y",
2433
+ icon,
2434
+ "tag--text-white": "lc-Tag-module__tag--text-white___x0fnD",
2435
+ "tag--text-black": "lc-Tag-module__tag--text-black___dUvmD",
2436
+ "tag--with-icon": "lc-Tag-module__tag--with-icon___ZlkvT",
2437
+ "tag--dismissible": "lc-Tag-module__tag--dismissible___Qobyr",
2438
+ tag__icon,
2439
+ tag__avatar
2440
+ };
2441
+ const baseClass$n = "tag";
2442
+ const getCustomTextClass = (customColor) => {
2443
+ if (!customColor) {
2444
+ return "";
2445
+ }
2446
+ return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
2447
+ };
2448
+ const Tag = (_I) => {
2449
+ var _J = _I, {
2450
+ className = "",
2451
+ children,
2452
+ dismissible = false,
2453
+ size = "medium",
2454
+ iconSize = "medium",
2455
+ kind = "default",
2456
+ onRemove,
2457
+ outline = false,
2458
+ icon: icon2,
2459
+ avatar: avatar2,
2460
+ customColor
2461
+ } = _J, restProps = __objRest(_J, [
2462
+ "className",
2463
+ "children",
2464
+ "dismissible",
2465
+ "size",
2466
+ "iconSize",
2467
+ "kind",
2468
+ "onRemove",
2469
+ "outline",
2470
+ "icon",
2471
+ "avatar",
2472
+ "customColor"
2473
+ ]);
2474
+ const mergedClassNames = cx(styles$g[baseClass$n], className, styles$g[`${baseClass$n}--${size}`], styles$g[`${baseClass$n}--${kind}`], {
2475
+ [styles$g[`${baseClass$n}--dismissible`]]: dismissible,
2476
+ [styles$g[`${baseClass$n}--outline`]]: outline,
2477
+ [styles$g[`${baseClass$n}--with-icon`]]: !!icon2 || !!avatar2,
2478
+ [styles$g[`${baseClass$n}--${getCustomTextClass(customColor)}`]]: !!customColor
2479
+ });
2480
+ const getCustomColorStyles = () => {
2481
+ if (!customColor) {
2482
+ return {};
2483
+ }
2484
+ if (outline) {
2485
+ return {
2486
+ style: {
2487
+ backgroundColor: "transparent",
2488
+ color: customColor,
2489
+ borderColor: customColor
2490
+ }
2491
+ };
2492
+ }
2493
+ return { style: { backgroundColor: customColor } };
2494
+ };
2495
+ const getIconCustomColor = () => {
2496
+ if (!customColor) {
2497
+ return void 0;
2498
+ }
2499
+ if (outline) {
2500
+ return customColor;
2501
+ }
2502
+ return getContrast(customColor, "#FFFFFF") > 4.5 ? "#FFFFFF" : "#000000";
2503
+ };
2504
+ return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues(__spreadValues({
2505
+ className: mergedClassNames
2506
+ }, restProps), getCustomColorStyles()), {
2507
+ as: "div",
2508
+ size: "md"
2509
+ }), avatar2 && /* @__PURE__ */ React.createElement("img", {
2510
+ className: styles$g[`${baseClass$n}__avatar`],
2511
+ src: avatar2,
2512
+ alt: "tag-avatar",
2513
+ "data-testid": "lc-tag-avatar"
2514
+ }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
2515
+ "data-testid": "lc-tag-icon",
2516
+ className: styles$g[`${baseClass$n}__icon`],
2517
+ source: icon2,
2518
+ size: "small",
2519
+ customColor: getIconCustomColor()
2520
+ }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
2521
+ title: "Remove",
2522
+ onClick: onRemove,
2523
+ type: "button",
2524
+ className: styles$g[`${baseClass$n}__remove`]
2525
+ }, /* @__PURE__ */ React.createElement(Icon, {
2526
+ "data-dismiss-icon": true,
2527
+ source: Close,
2528
+ size: iconSize,
2529
+ customColor: getIconCustomColor()
2530
+ })));
2531
+ };
2532
+ var styles$f = {
2533
+ "picker-trigger-body": "lc-TriggerBody-module__picker-trigger-body___ZWjX9",
2534
+ "picker-trigger-body__item": "lc-TriggerBody-module__picker-trigger-body__item___0DBg1",
2535
+ "picker-trigger-body__input": "lc-TriggerBody-module__picker-trigger-body__input___ezPyz"
2536
+ };
2537
+ const baseClass$m = "picker-trigger-body";
2538
+ const TriggerBody = ({
2539
+ isOpen,
2540
+ isSearchDisabled,
2541
+ isDisabled,
2542
+ placeholder,
2543
+ items,
2544
+ type,
2545
+ iconSize,
2546
+ onItemRemove,
2547
+ onFilter
2548
+ }) => {
2549
+ const shouldDisplaySearch = isOpen && !isSearchDisabled;
2550
+ const getSingleItem = (item) => {
2551
+ if (type === "single" && isOpen && !isSearchDisabled) {
2552
+ return null;
2553
+ }
2554
+ if (item == null ? void 0 : item.customElement) {
2555
+ return /* @__PURE__ */ React.createElement("div", {
2556
+ className: styles$f[`${baseClass$m}__custom`]
2557
+ }, item.customElement.selectedItemBody);
2558
+ }
2559
+ return /* @__PURE__ */ React.createElement("div", {
2560
+ className: styles$f[`${baseClass$m}__item`]
2561
+ }, item.name);
2562
+ };
2563
+ const handleOnChange = (e) => {
2564
+ onFilter(e.target.value);
2565
+ };
2566
+ const getSearch = () => /* @__PURE__ */ React.createElement("input", {
2567
+ className: styles$f[`${baseClass$m}__input`],
2568
+ placeholder: "Select option",
2569
+ onChange: handleOnChange,
2570
+ autoFocus: true
2571
+ });
2572
+ if (!items || items.length === 0) {
2573
+ return shouldDisplaySearch ? getSearch() : /* @__PURE__ */ React.createElement("div", null, placeholder);
2574
+ }
2575
+ return /* @__PURE__ */ React.createElement("div", {
2576
+ className: styles$f[baseClass$m]
2577
+ }, type === "single" ? getSingleItem(items[0]) : items.map((item) => {
2578
+ return /* @__PURE__ */ React.createElement(Tag, {
2579
+ key: item.name,
2580
+ className: styles$f[`${baseClass$m}__tag`],
2581
+ iconSize,
2582
+ dismissible: !isDisabled,
2583
+ onRemove: () => onItemRemove(item)
2584
+ }, getSingleItem(item));
2585
+ }), shouldDisplaySearch && getSearch());
2586
+ };
2587
+ const baseClass$l = "picker";
2588
+ const Picker = (_K) => {
2589
+ var _L = _K, {
2590
+ className,
2591
+ disabled,
2592
+ error,
2593
+ options,
2594
+ selected,
2595
+ size = "medium",
2596
+ tagIconSize = "medium",
2597
+ placeholder = "Select option",
2598
+ isRequired,
2599
+ noSearchResultText = "No results found",
2600
+ selectAllOptionText,
2601
+ type = "single",
2602
+ searchDisabled = false,
2603
+ onSelect
2604
+ } = _L, props = __objRest(_L, [
2605
+ "className",
2606
+ "disabled",
2607
+ "error",
2608
+ "options",
2609
+ "selected",
2610
+ "size",
2611
+ "tagIconSize",
2612
+ "placeholder",
2613
+ "isRequired",
2614
+ "noSearchResultText",
2615
+ "selectAllOptionText",
2616
+ "type",
2617
+ "searchDisabled",
2618
+ "onSelect"
2619
+ ]);
2620
+ const [isListOpen, setIsListOpen] = React.useState(false);
2621
+ const [searchPhrase, setSearchPhrase] = React.useState(null);
2622
+ const triggerRef = React.useRef(null);
2623
+ const mergedClassNames = cx(styles$h[baseClass$l], className);
2624
+ React.useEffect(() => {
2625
+ if (isListOpen) {
2626
+ const onDocumentClick = (e) => {
2627
+ var _a;
2628
+ if (!((_a = triggerRef.current) == null ? void 0 : _a.contains(e.target))) {
2629
+ setIsListOpen(false);
2630
+ }
2631
+ };
2632
+ const onKeyDown = (e) => {
2633
+ if (e.key === KeyCodes.tab) {
2634
+ setIsListOpen(false);
2635
+ }
2636
+ };
2637
+ document.addEventListener("mousedown", onDocumentClick);
2638
+ document.addEventListener("keydown", onKeyDown);
2639
+ return () => {
2640
+ document.removeEventListener("mousedown", onDocumentClick);
2641
+ document.addEventListener("keydown", onKeyDown);
2642
+ };
2643
+ } else {
2644
+ setSearchPhrase(null);
2645
+ }
2646
+ }, [isListOpen]);
2647
+ const handleTrigger = (e) => {
2648
+ const target = e.target;
2649
+ if (disabled || target.getAttribute("data-dismiss-icon")) {
2650
+ return;
2651
+ }
2652
+ setIsListOpen((prev) => !prev);
2653
+ };
2654
+ const handleOnClose = () => {
2655
+ setIsListOpen(false);
2656
+ };
2657
+ const handleSelect = (item) => {
2658
+ if (type === "single") {
2659
+ setIsListOpen(false);
2660
+ return onSelect([item]);
2661
+ }
2662
+ const selectedItemKey = item.key;
2663
+ const currentSelectedItemsKeys = selectedItemsKeys;
2664
+ if (!currentSelectedItemsKeys) {
2665
+ return onSelect([item]);
2666
+ }
2667
+ const newSelectedItemsKeys = currentSelectedItemsKeys.includes(selectedItemKey) ? currentSelectedItemsKeys.filter((key) => key !== selectedItemKey) : currentSelectedItemsKeys.concat(selectedItemKey);
2668
+ if ((newSelectedItemsKeys == null ? void 0 : newSelectedItemsKeys.length) === 0) {
2669
+ return onSelect(null);
2670
+ }
2671
+ const newSelectedItems = options.filter((item2) => newSelectedItemsKeys.includes(item2.key));
2672
+ onSelect(newSelectedItems);
2673
+ };
2674
+ const isItemSelectable = (item) => !item.disabled && !item.groupHeader && item.key !== SELECT_ALL_OPTION_KEY;
2675
+ const handleSelectAll = () => {
2676
+ setIsListOpen(false);
2677
+ const itemsToSelect = items.filter(isItemSelectable);
2678
+ onSelect(itemsToSelect);
2679
+ };
2680
+ const handleClear = () => {
2681
+ setIsListOpen(false);
2682
+ onSelect(null);
2683
+ };
2684
+ const handleOnFilter = (text) => setSearchPhrase(text);
2685
+ const handleItemRemove = (item) => {
2686
+ const newSelectedItems = selected ? selected.filter((selectedItem) => selectedItem !== item) : null;
2687
+ if ((newSelectedItems == null ? void 0 : newSelectedItems.length) === 0) {
2688
+ return onSelect(null);
2689
+ }
2690
+ onSelect(newSelectedItems);
2691
+ };
2692
+ const items = React.useMemo(() => {
2693
+ if (!searchPhrase) {
2694
+ return options;
2695
+ }
2696
+ return options.filter((item) => {
2697
+ if (item.groupHeader) {
2698
+ return false;
2699
+ }
2700
+ const search = searchPhrase.toLowerCase();
2701
+ const itemName = item.name.toLowerCase();
2702
+ return itemName.includes(search);
2703
+ });
2704
+ }, [searchPhrase]);
2705
+ const selectedItemsKeys = React.useMemo(() => {
2706
+ if (!selected) {
2707
+ return null;
2708
+ }
2709
+ return selected.map((item) => item.key);
2710
+ }, [selected]);
2711
+ return /* @__PURE__ */ React.createElement("div", __spreadValues({
2712
+ ref: triggerRef,
2713
+ className: mergedClassNames
2714
+ }, props), /* @__PURE__ */ React.createElement("div", {
2715
+ className: styles$h[`${baseClass$l}__container`]
2716
+ }, /* @__PURE__ */ React.createElement(Trigger, {
2717
+ isSearchDisabled: searchDisabled,
2718
+ isError: error,
2719
+ isOpen: isListOpen,
2720
+ isDisabled: disabled,
2721
+ isItemSelected: !!selected,
2722
+ isRequired,
2723
+ isMultiSelect: type === "multi",
2724
+ size,
2725
+ onTrigger: handleTrigger,
2726
+ onClear: handleClear
2727
+ }, /* @__PURE__ */ React.createElement(TriggerBody, {
2728
+ isOpen: isListOpen,
2729
+ isSearchDisabled: searchDisabled,
2730
+ isDisabled: disabled,
2731
+ placeholder,
2732
+ iconSize: tagIconSize,
2733
+ items: selected,
2734
+ type,
2735
+ onItemRemove: handleItemRemove,
2736
+ onFilter: handleOnFilter
2737
+ })), /* @__PURE__ */ React.createElement(PickerList, {
2738
+ selectedItemsKeys,
2739
+ items,
2740
+ isOpen: isListOpen,
2741
+ isMultiSelect: type === "multi",
2742
+ emptyStateText: noSearchResultText,
2743
+ selectAllOptionText,
2744
+ onClose: handleOnClose,
2745
+ onSelect: handleSelect,
2746
+ onSelectAll: handleSelectAll
2747
+ })));
2748
+ };
2749
+ const popover = "lc-Popover-module__popover___8X1b2";
2750
+ var cssStyles = {
2751
+ popover,
2752
+ "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
2753
+ };
2754
+ const Popover = (props) => {
2755
+ const {
2756
+ triggerRenderer,
2757
+ onClose,
2758
+ children,
2759
+ className,
2760
+ placement,
2761
+ flipOptions,
2762
+ isVisible = false
2763
+ } = props;
2764
+ const [visible, setVisibility] = React.useState(false);
2765
+ const prevVisibleState = React.useRef(false);
2766
+ const {
2767
+ x,
2768
+ y,
2769
+ reference,
2770
+ floating,
2771
+ strategy,
2772
+ refs,
2773
+ update,
2774
+ placement: updatedPlacement
2775
+ } = useFloating({
2776
+ middleware: [offset(4), flip(flipOptions)],
2777
+ placement
2778
+ });
2779
+ React.useEffect(() => {
2780
+ setVisibility(isVisible);
2781
+ }, [isVisible]);
2782
+ React.useEffect(() => {
2783
+ if (onClose && prevVisibleState.current !== visible && !visible) {
2784
+ onClose();
2785
+ }
2786
+ prevVisibleState.current = visible;
2787
+ }, [visible]);
2788
+ React.useEffect(() => {
2789
+ if (!refs.reference.current || !refs.floating.current) {
2790
+ return;
2791
+ }
2792
+ return autoUpdate(refs.reference.current, refs.floating.current, update);
2793
+ }, [refs.reference, refs.floating, update, updatedPlacement, visible]);
2794
+ function handleDocumentClick(event) {
2795
+ if (refs.floating.current && refs.floating.current.contains(event.target)) {
2796
+ return;
2797
+ } else if (refs.reference.current && refs.reference.current.contains(event.target)) {
2798
+ setVisibility((prevVisible) => !prevVisible);
2799
+ } else {
2800
+ setVisibility(false);
2801
+ }
2802
+ }
2803
+ const handleHideOnEscape = (event) => {
2804
+ if (event.key === "Escape") {
2805
+ setVisibility(false);
2806
+ }
2807
+ };
2808
+ React.useEffect(() => {
2809
+ document.addEventListener("keydown", handleHideOnEscape);
2810
+ document.addEventListener("mousedown", handleDocumentClick);
2811
+ return () => {
2812
+ document.removeEventListener("keydown", handleHideOnEscape);
2813
+ document.removeEventListener("mousedown", handleDocumentClick);
2814
+ };
2815
+ }, []);
2816
+ const mergedClassNames = cx(cssStyles["popover"], className, {
2817
+ [cssStyles["popover--visible"]]: visible
2818
+ });
2819
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
2820
+ style: { width: "fit-content" },
2821
+ ref: reference
2822
+ }, triggerRenderer()), /* @__PURE__ */ React.createElement("div", {
2823
+ ref: floating,
2824
+ className: mergedClassNames,
2825
+ style: {
2826
+ position: strategy,
2827
+ top: y != null ? y : "",
2828
+ left: x != null ? x : ""
2829
+ }
2830
+ }, children));
2831
+ };
2832
+ const PROGRESS_STATUSES = [
2833
+ "normal",
2834
+ "error",
2835
+ "success"
2836
+ ];
2837
+ const clampPercentage = (percent) => Math.min(Math.max(percent, 0), 100);
2838
+ function getPercentNumber(status, percent = 0) {
2839
+ if (status === "error") {
2840
+ return 0;
2841
+ }
2842
+ return clampPercentage(parseInt(percent.toString(), 10));
2843
+ }
2844
+ function getProgressStatus(status, percent) {
2845
+ if (!PROGRESS_STATUSES.includes(status) && percent >= 100) {
2846
+ return "normal";
2847
+ }
2848
+ return status || "normal";
2849
+ }
2850
+ var styles$e = {
2851
+ "progress-circle": "lc-ProgressCircle-module__progress-circle___NRHCi",
2852
+ "progress-circle--small": "lc-ProgressCircle-module__progress-circle--small___8FVwG",
2853
+ "progress-circle--medium": "lc-ProgressCircle-module__progress-circle--medium___XlzEX",
2854
+ "progress-circle--large": "lc-ProgressCircle-module__progress-circle--large___qxa2y",
2855
+ "progress-circle__bg-line--normal": "lc-ProgressCircle-module__progress-circle__bg-line--normal___nDNwj",
2856
+ "progress-circle__bg-line--success": "lc-ProgressCircle-module__progress-circle__bg-line--success___1aP-O",
2857
+ "progress-circle__bg-line--error": "lc-ProgressCircle-module__progress-circle__bg-line--error___oqMZL",
2858
+ "progress-circle__indicator--normal": "lc-ProgressCircle-module__progress-circle__indicator--normal___0SdkX",
2859
+ "progress-circle__indicator--success": "lc-ProgressCircle-module__progress-circle__indicator--success___fLwRR",
2860
+ "progress-circle__indicator--error": "lc-ProgressCircle-module__progress-circle__indicator--error___nwJS9",
2861
+ "progress-circle--error": "lc-ProgressCircle-module__progress-circle--error___2AA9K",
2862
+ "progress-circle__bg-line": "lc-ProgressCircle-module__progress-circle__bg-line___12YrE",
2863
+ "progress-circle--success": "lc-ProgressCircle-module__progress-circle--success___hH5jv",
2864
+ "progress-circle--normal": "lc-ProgressCircle-module__progress-circle--normal___dFneQ"
2865
+ };
2866
+ const THICKNESS_FROM_SIZE = {
2867
+ small: 2,
2868
+ medium: 3,
2869
+ large: 4
2870
+ };
2871
+ const SIZE_VALUE_FROM_SIZE = {
2872
+ small: 15,
2873
+ medium: 36,
2874
+ large: 56
2875
+ };
2876
+ const baseClass$k = "progress-circle";
2877
+ const ProgressCircle = React.forwardRef((_M, ref) => {
2878
+ var _N = _M, {
2879
+ status = "normal",
2880
+ progressValue,
2881
+ className,
2882
+ size = "medium"
2883
+ } = _N, restProps = __objRest(_N, [
2884
+ "status",
2885
+ "progressValue",
2886
+ "className",
2887
+ "size"
2888
+ ]);
2889
+ const progressStatus = getProgressStatus(status, progressValue);
2890
+ const percentNumber = getPercentNumber(progressStatus, progressValue);
2891
+ const thickness = THICKNESS_FROM_SIZE[size];
2892
+ const sizeValue = SIZE_VALUE_FROM_SIZE[size];
2893
+ const mergedClassNames = cx(styles$e[baseClass$k], {
2894
+ [styles$e[`${baseClass$k}--${size}`]]: size,
2895
+ [styles$e[`${baseClass$k}--${status}`]]: status
2896
+ }, className);
2897
+ const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
2898
+ const indicatorStyle = {
2899
+ strokeDasharray: circumference.toFixed(3),
2900
+ strokeDashoffset: `${((100 - percentNumber) / 100 * circumference).toFixed(3)}px`
2901
+ };
2902
+ const svgViewBox = `${sizeValue / 2} ${sizeValue / 2} ${sizeValue} ${sizeValue}`;
2903
+ return /* @__PURE__ */ React.createElement("div", __spreadValues({
2904
+ className: mergedClassNames,
2905
+ ref,
2906
+ role: "progressbar"
2907
+ }, restProps), /* @__PURE__ */ React.createElement("svg", {
2908
+ viewBox: svgViewBox
2909
+ }, /* @__PURE__ */ React.createElement("circle", {
2910
+ className: styles$e[`${baseClass$k}__bg-line--${status}`],
2911
+ cx: sizeValue,
2912
+ cy: sizeValue,
2913
+ r: (sizeValue - thickness) / 2,
2914
+ fill: "none",
2915
+ strokeWidth: thickness
2916
+ }), /* @__PURE__ */ React.createElement("circle", {
2917
+ className: styles$e[`${baseClass$k}__indicator--${status}`],
2918
+ style: indicatorStyle,
2919
+ cx: sizeValue,
2920
+ cy: sizeValue,
2921
+ r: (sizeValue - thickness) / 2,
2922
+ fill: "none",
2923
+ strokeWidth: thickness
2924
+ })));
2925
+ });
2926
+ var styles$d = {
2927
+ "progress-bar": "lc-ProgressBar-module__progress-bar___3pa3d",
2928
+ "progress-bar--small": "lc-ProgressBar-module__progress-bar--small___7nQKx",
2929
+ "progress-bar--medium": "lc-ProgressBar-module__progress-bar--medium___cM44p",
2930
+ "progress-bar--large": "lc-ProgressBar-module__progress-bar--large___UlzNR",
2931
+ "progress-bar--error": "lc-ProgressBar-module__progress-bar--error___MulqI",
2932
+ "progress-bar--success": "lc-ProgressBar-module__progress-bar--success___p7nB-",
2933
+ "progress-bar--normal": "lc-ProgressBar-module__progress-bar--normal___ZwCb-",
2934
+ "progress-bar__indicator--success": "lc-ProgressBar-module__progress-bar__indicator--success___wRjR3",
2935
+ "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
2936
+ };
2937
+ const baseClass$j = "progress-bar";
2938
+ const ProgressBar = React.forwardRef((_O, ref) => {
2939
+ var _P = _O, {
2940
+ status = "normal",
2941
+ percent,
2942
+ size = "medium",
2943
+ className = ""
2944
+ } = _P, restProps = __objRest(_P, [
2945
+ "status",
2946
+ "percent",
2947
+ "size",
2948
+ "className"
2949
+ ]);
2950
+ const progressStatus = getProgressStatus(status, percent);
2951
+ const percentNumber = getPercentNumber(progressStatus, percent);
2952
+ const mergedClassNames = cx(styles$d[baseClass$j], {
2953
+ [styles$d[`${baseClass$j}--${size}`]]: size,
2954
+ [styles$d[`${baseClass$j}--${status}`]]: status
2955
+ }, className);
2956
+ return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, restProps), {
2957
+ className: mergedClassNames,
2958
+ ref,
2959
+ role: "progressbar"
2960
+ }), /* @__PURE__ */ React.createElement("div", {
2961
+ className: styles$d[`${baseClass$j}__indicator--${status}`],
2962
+ style: { width: `${percentNumber}%` }
2963
+ }));
2964
+ });
2965
+ var styles$c = {
2966
+ "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
2967
+ "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
2968
+ "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
2969
+ "promo-banner__header": "lc-PromoBanner-module__promo-banner__header___ebYHW",
2970
+ "promo-banner__img": "lc-PromoBanner-module__promo-banner__img___eaShb",
2971
+ "promo-banner__button-text": "lc-PromoBanner-module__promo-banner__button-text___taYKa",
2972
+ "promo-banner--light": "lc-PromoBanner-module__promo-banner--light___eJxOR",
2973
+ "promo-banner__footer": "lc-PromoBanner-module__promo-banner__footer___8OjvH",
2974
+ "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
2975
+ "promo-banner--large": "lc-PromoBanner-module__promo-banner--large___pMiCU",
2976
+ "promo-banner__close-icon": "lc-PromoBanner-module__promo-banner__close-icon___GowBL"
2977
+ };
2978
+ const SMALL_CONTAINER_WIDTH_TRESHOLD = 400;
2979
+ const LARGE_CONTAINER_WIDTH_TRESHOLD = 800;
2980
+ const RESIZE_DEBOUNCE_TRESHOLD = 500;
2981
+ const baseClass$i = "promo-banner";
2982
+ const PromoBanner = ({
2983
+ className,
2984
+ buttonText,
2985
+ children,
2986
+ header,
2987
+ img,
2988
+ light = false,
2989
+ linkText,
2990
+ onButtonClick,
2991
+ onClose,
2992
+ onLinkClick
2993
+ }) => {
2994
+ const containerRef = React.useRef(null);
2995
+ const [containerSize, setContainerSize] = React.useState("medium");
2996
+ const mergedClassNames = cx(styles$c[baseClass$i], {
2997
+ [styles$c[`${baseClass$i}--light`]]: light,
2998
+ [styles$c[`${baseClass$i}--small`]]: containerSize === "small",
2999
+ [styles$c[`${baseClass$i}--large`]]: containerSize === "large"
3000
+ }, className);
3001
+ React.useEffect(() => {
3002
+ const handleResize = () => {
3003
+ if (containerRef.current && containerRef.current.offsetWidth <= SMALL_CONTAINER_WIDTH_TRESHOLD) {
3004
+ return setContainerSize("small");
3005
+ }
3006
+ if (containerRef.current && containerRef.current.offsetWidth >= LARGE_CONTAINER_WIDTH_TRESHOLD) {
3007
+ return setContainerSize("large");
3008
+ }
3009
+ return setContainerSize("medium");
3010
+ };
3011
+ const debouncedHandleResize = debounce(handleResize, RESIZE_DEBOUNCE_TRESHOLD);
3012
+ window.addEventListener("resize", debouncedHandleResize);
3013
+ handleResize();
3014
+ return () => {
3015
+ debouncedHandleResize.cancel();
3016
+ window.removeEventListener("resize", handleResize);
3017
+ };
3018
+ }, []);
3019
+ const footer = /* @__PURE__ */ React.createElement("div", {
3020
+ className: styles$c[`${baseClass$i}__footer`]
3021
+ }, buttonText && /* @__PURE__ */ React.createElement(Button, {
3022
+ kind: "primary",
3023
+ size: "compact",
3024
+ onClick: onButtonClick,
3025
+ className: styles$c[`${baseClass$i}__button-text`]
3026
+ }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
3027
+ size: "compact",
3028
+ kind: "text",
3029
+ onClick: onLinkClick
3030
+ }, linkText));
3031
+ return /* @__PURE__ */ React.createElement("div", {
3032
+ ref: containerRef,
3033
+ className: mergedClassNames
3034
+ }, /* @__PURE__ */ React.createElement("div", {
3035
+ className: styles$c[`${baseClass$i}__content`]
3036
+ }, img && /* @__PURE__ */ React.createElement("img", {
3037
+ src: img,
3038
+ className: styles$c[`${baseClass$i}__img`]
3039
+ }), /* @__PURE__ */ React.createElement("div", {
3040
+ className: styles$c[`${baseClass$i}__wrapper`]
3041
+ }, /* @__PURE__ */ React.createElement("div", {
3042
+ className: styles$c[`${baseClass$i}__header`]
3043
+ }, header), /* @__PURE__ */ React.createElement("div", null, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
3044
+ type: "button",
3045
+ className: styles$c[`${baseClass$i}__close-icon`],
3046
+ onClick: onClose
3047
+ }, /* @__PURE__ */ React.createElement(Icon, {
3048
+ source: Close,
3049
+ size: "large",
3050
+ kind: "primary"
3051
+ })));
3052
+ };
3053
+ var styles$b = {
3054
+ "radio-button": "lc-RadioButton-module__radio-button___WaToM",
3055
+ "radio-button__circle": "lc-RadioButton-module__radio-button__circle___wimWA",
3056
+ "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
3057
+ "radio-button__inner-circle": "lc-RadioButton-module__radio-button__inner-circle___qkRVf",
3058
+ "radio-button__text": "lc-RadioButton-module__radio-button__text___mT8c0",
3059
+ "radio-button__input": "lc-RadioButton-module__radio-button__input___7OTAK",
3060
+ "radio-button__helper": "lc-RadioButton-module__radio-button__helper___r8gJJ",
3061
+ "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
3062
+ "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
3063
+ };
3064
+ const baseClass$h = "radio-button";
3065
+ const RadioButton = React.forwardRef((_Q, ref) => {
3066
+ var _R = _Q, { children, className = "", description, checked, disabled } = _R, props = __objRest(_R, ["children", "className", "description", "checked", "disabled"]);
3067
+ const mergedClassNames = cx(styles$b[baseClass$h], className, {
3068
+ [styles$b[`${baseClass$h}--selected`]]: checked,
3069
+ [styles$b[`${baseClass$h}--disabled`]]: disabled
3070
+ });
3071
+ return /* @__PURE__ */ React.createElement("div", {
3072
+ className: mergedClassNames
3073
+ }, /* @__PURE__ */ React.createElement("label", {
3074
+ className: styles$b[`${baseClass$h}__label`]
3075
+ }, /* @__PURE__ */ React.createElement("div", {
3076
+ className: styles$b[`${baseClass$h}__circle`]
3077
+ }, /* @__PURE__ */ React.createElement("span", {
3078
+ className: styles$b[`${baseClass$h}__inner-circle`]
3079
+ }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
3080
+ className: styles$b[`${baseClass$h}__input`],
3081
+ ref,
3082
+ type: "radio",
3083
+ checked,
3084
+ disabled
3085
+ }))), children && /* @__PURE__ */ React.createElement(Text, {
3086
+ as: "div",
3087
+ size: "md",
3088
+ className: styles$b[`${baseClass$h}__text`]
3089
+ }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
3090
+ className: styles$b[`${baseClass$h}__helper`]
3091
+ }, description));
3092
+ });
3093
+ var styles$a = {
3094
+ "search-input": "lc-Search-module__search-input___FsbCk",
3095
+ "search-input--compact": "lc-Search-module__search-input--compact___498To",
3096
+ "search-input--medium": "lc-Search-module__search-input--medium___Hwteg",
3097
+ "search-input--large": "lc-Search-module__search-input--large___-IBuC",
3098
+ "search-input--focused": "lc-Search-module__search-input--focused___i2eul",
3099
+ "search-input--disabled": "lc-Search-module__search-input--disabled___LSJ2e",
3100
+ "search-input--collapsable": "lc-Search-module__search-input--collapsable___5GaIH",
3101
+ "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
3102
+ "search-input--collapsable--open": "lc-Search-module__search-input--collapsable--open___vqTpD",
3103
+ "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
3104
+ "search-input__loader": "lc-Search-module__search-input__loader___pkpIG",
3105
+ "search-input__input": "lc-Search-module__search-input__input___OhyTr"
3106
+ };
3107
+ const baseClass$g = "search-input";
3108
+ const inputBaseClass = `${baseClass$g}__input`;
3109
+ const SearchInput = ({
3110
+ isCollapsable,
3111
+ isDisabled,
3112
+ isLoading,
3113
+ placeholder = "Search ...",
3114
+ size = "medium",
3115
+ value,
3116
+ className,
3117
+ onChange
3118
+ }) => {
3119
+ const [isCollapsed, setIsCollapsed] = React.useState(true);
3120
+ const [isFocused, setIsFocused] = React.useState(false);
3121
+ const inputRef = React.useRef(null);
3122
+ const isCloseIconVisible = !!value && !isDisabled && !isLoading;
3123
+ const ariaExpandedValue = isCollapsable && !isCollapsed && "true";
3124
+ const mergedClassNames = cx(className, styles$a[baseClass$g], styles$a[`${baseClass$g}--${size}`], isFocused && styles$a[`${baseClass$g}--focused`], isDisabled && styles$a[`${baseClass$g}--disabled`], isCollapsable && styles$a[`${baseClass$g}--collapsable`], !isCollapsed && styles$a[`${baseClass$g}--collapsable--open`]);
3125
+ React.useEffect(() => {
3126
+ if (isCollapsable && !!value) {
3127
+ setIsCollapsed(false);
3128
+ }
3129
+ }, [isCollapsable]);
3130
+ const handleOnChange = (e) => {
3131
+ const value2 = e.currentTarget.value;
3132
+ onChange(value2);
3133
+ };
3134
+ const handleClear = () => {
3135
+ onChange("");
3136
+ };
3137
+ const handleClick = () => {
3138
+ var _a;
3139
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
3140
+ };
3141
+ const handleFocus = () => {
3142
+ if (isCollapsable) {
3143
+ setIsCollapsed(false);
3144
+ }
3145
+ setIsFocused(true);
3146
+ };
3147
+ const handleBlur = () => {
3148
+ if (isCollapsable && !value) {
3149
+ setIsCollapsed(true);
3150
+ }
3151
+ setIsFocused(false);
3152
+ };
3153
+ const handleKeyDown = (e) => {
3154
+ if (e.key === KeyCodes.enter) {
3155
+ e.preventDefault();
3156
+ onChange(value);
3157
+ }
3158
+ };
3159
+ return /* @__PURE__ */ React.createElement("div", {
3160
+ "aria-expanded": ariaExpandedValue,
3161
+ role: "search",
3162
+ className: mergedClassNames,
3163
+ onClick: handleClick
3164
+ }, /* @__PURE__ */ React.createElement(Icon, {
3165
+ className: styles$a[`${baseClass$g}__search-icon`],
3166
+ source: Search,
3167
+ disabled: isDisabled,
3168
+ kind: "primary"
3169
+ }), /* @__PURE__ */ React.createElement("input", {
3170
+ role: "searchbox",
3171
+ ref: inputRef,
3172
+ className: styles$a[inputBaseClass],
3173
+ type: "text",
3174
+ value,
3175
+ placeholder,
3176
+ onChange: handleOnChange,
3177
+ onBlur: handleBlur,
3178
+ onFocus: handleFocus,
3179
+ onKeyDown: handleKeyDown,
3180
+ disabled: isDisabled
3181
+ }), isCloseIconVisible && /* @__PURE__ */ React.createElement("button", {
3182
+ "aria-label": "Clear search",
3183
+ title: "Clear search",
3184
+ className: styles$a[`${baseClass$g}__clear-icon`],
3185
+ onClick: handleClear
3186
+ }, /* @__PURE__ */ React.createElement(Icon, {
3187
+ source: Close,
3188
+ kind: "primary"
3189
+ })), isLoading && /* @__PURE__ */ React.createElement("div", {
3190
+ "data-testid": `${baseClass$g}-loader`,
3191
+ className: styles$a[`${baseClass$g}__loader`]
3192
+ }, /* @__PURE__ */ React.createElement(Loader, {
3193
+ size: "small"
3194
+ })));
3195
+ };
3196
+ const switch__input = "lc-Switch-module__switch__input___NiiOR";
3197
+ const switch__container = "lc-Switch-module__switch__container___79F7W";
3198
+ const switch__track = "lc-Switch-module__switch__track___2wr2M";
3199
+ const switch__slider = "lc-Switch-module__switch__slider___WHd--";
3200
+ const switch__loader = "lc-Switch-module__switch__loader___FE-fA";
3201
+ const switch__icon = "lc-Switch-module__switch__icon___-O1qY";
3202
+ var styles$9 = {
3203
+ "switch": "lc-Switch-module__switch___AaA2k",
3204
+ "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
3205
+ "switch__track--on": "lc-Switch-module__switch__track--on___aOMWe",
3206
+ "switch__track--off": "lc-Switch-module__switch__track--off___NAisj",
3207
+ "switch--large": "lc-Switch-module__switch--large___pSoJ7",
3208
+ "switch--compact": "lc-Switch-module__switch--compact___OGFIX",
3209
+ "switch--medium": "lc-Switch-module__switch--medium___EcZwT",
3210
+ switch__input,
3211
+ "switch__input--disabled": "lc-Switch-module__switch__input--disabled___Po8gh",
3212
+ switch__container,
3213
+ switch__track,
3214
+ "switch__track--disabled": "lc-Switch-module__switch__track--disabled___HkDhl",
3215
+ switch__slider,
3216
+ "switch__slider--large": "lc-Switch-module__switch__slider--large___WoEgi",
3217
+ "switch__slider--large--on": "lc-Switch-module__switch__slider--large--on___7Qp3G",
3218
+ "switch__slider--large--off": "lc-Switch-module__switch__slider--large--off___iRMmD",
3219
+ "switch__slider--compact": "lc-Switch-module__switch__slider--compact___uZ-lS",
3220
+ "switch__slider--compact--on": "lc-Switch-module__switch__slider--compact--on___FykE3",
3221
+ "switch__slider--compact--off": "lc-Switch-module__switch__slider--compact--off___s5yR8",
3222
+ "switch__slider--medium": "lc-Switch-module__switch__slider--medium___uhptz",
3223
+ "switch__slider--medium--on": "lc-Switch-module__switch__slider--medium--on___SfeAV",
3224
+ "switch__slider--medium--off": "lc-Switch-module__switch__slider--medium--off___eXJJz",
3225
+ switch__loader,
3226
+ "switch__loader--compact": "lc-Switch-module__switch__loader--compact___3imUh",
3227
+ "switch__loader--medium": "lc-Switch-module__switch__loader--medium___2zi05",
3228
+ "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
3229
+ switch__icon
3230
+ };
3231
+ const baseClass$f = "switch";
3232
+ const Switch = (_S) => {
3233
+ var _T = _S, {
3234
+ className = "",
3235
+ defaultOn = false,
3236
+ disabled = false,
3237
+ name = baseClass$f,
3238
+ on,
3239
+ onChange = noop,
3240
+ size = "large",
3241
+ state = "regular",
3242
+ innerRef,
3243
+ ariaLabel
3244
+ } = _T, props = __objRest(_T, [
3245
+ "className",
3246
+ "defaultOn",
3247
+ "disabled",
3248
+ "name",
3249
+ "on",
3250
+ "onChange",
3251
+ "size",
3252
+ "state",
3253
+ "innerRef",
3254
+ "ariaLabel"
3255
+ ]);
3256
+ const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
3257
+ React.useEffect(() => {
3258
+ if (on !== void 0) {
3259
+ setChecked(on);
3260
+ }
3261
+ }, [on]);
3262
+ const isLoading = state === "loading";
3263
+ const isLocked = state === "locked";
3264
+ const iconSize = size === "large" ? "small" : "xsmall";
3265
+ const toggleStyles = checked ? "on" : "off";
3266
+ const shouldBehaveAsDisabled = disabled || isLoading || isLocked;
3267
+ const availabilityStyles = shouldBehaveAsDisabled ? "disabled" : "enabled";
3268
+ const mergedClassNames = cx(styles$9[baseClass$f], styles$9[`${baseClass$f}--${size}`], className);
3269
+ const handleChange = (e) => {
3270
+ const hasOnChangePassed = onChange !== noop;
3271
+ if (hasOnChangePassed) {
3272
+ onChange(e, checked);
3273
+ return;
3274
+ }
3275
+ e.stopPropagation();
3276
+ setChecked((prevEnabled) => !prevEnabled);
3277
+ };
3278
+ return /* @__PURE__ */ React.createElement("span", {
3279
+ className: mergedClassNames
3280
+ }, /* @__PURE__ */ React.createElement("input", __spreadValues({
3281
+ type: "checkbox",
3282
+ className: cx(styles$9[`${baseClass$f}__input`], styles$9[`${baseClass$f}__input--${availabilityStyles}`]),
3283
+ onChange: handleChange,
3284
+ checked,
3285
+ name,
3286
+ ref: innerRef,
3287
+ disabled: shouldBehaveAsDisabled,
3288
+ "aria-label": ariaLabel
3289
+ }, props)), /* @__PURE__ */ React.createElement("span", {
3290
+ className: styles$9[`${baseClass$f}__container`]
3291
+ }, /* @__PURE__ */ React.createElement("span", {
3292
+ className: cx(styles$9[`${baseClass$f}__track`], styles$9[`${baseClass$f}__track--${toggleStyles}`], styles$9[`${baseClass$f}__track--${availabilityStyles}`])
3293
+ }), /* @__PURE__ */ React.createElement("span", {
3294
+ className: cx(styles$9[`${baseClass$f}__slider`], styles$9[`${baseClass$f}__slider--${size}`], styles$9[`${baseClass$f}__slider--${size}--${toggleStyles}`])
3295
+ }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
3296
+ className: cx(styles$9[`${baseClass$f}__loader`], styles$9[`${baseClass$f}__loader--${size}`])
3297
+ }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
3298
+ className: styles$9[`${baseClass$f}__icon`],
3299
+ "data-testid": "lock-icon",
3300
+ size: iconSize,
3301
+ source: LockBlack,
3302
+ kind: "primary"
3303
+ }))));
3304
+ };
3305
+ const tab = "lc-Tab-module__tab___fME7u";
3306
+ const tab__count = "lc-Tab-module__tab__count___gc8tA";
3307
+ const tab__badge = "lc-Tab-module__tab__badge___W9c-T";
3308
+ var styles$8 = {
3309
+ tab,
3310
+ tab__count,
3311
+ "tab--compact": "lc-Tab-module__tab--compact___4qead",
3312
+ "tab--medium": "lc-Tab-module__tab--medium___bHnGV",
3313
+ "tab--large": "lc-Tab-module__tab--large___JL30g",
3314
+ tab__badge,
3315
+ "tab--selected": "lc-Tab-module__tab--selected___c0EkL",
3316
+ "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
3317
+ };
3318
+ const baseClass$e = "tab";
3319
+ const Tab = (_U) => {
3320
+ var _V = _U, {
3321
+ children,
3322
+ className,
3323
+ count,
3324
+ isSelected,
3325
+ asBadge,
3326
+ size = "medium"
3327
+ } = _V, restProps = __objRest(_V, [
3328
+ "children",
3329
+ "className",
3330
+ "count",
3331
+ "isSelected",
3332
+ "asBadge",
3333
+ "size"
3334
+ ]);
3335
+ const { disabled } = restProps;
3336
+ const shouldDisplayAsCounter = count !== void 0 && !asBadge;
3337
+ const shouldDisplayAsBadge = count !== void 0 && asBadge;
3338
+ return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, restProps), {
3339
+ as: restProps.href ? "a" : "button",
3340
+ size: "md",
3341
+ bold: isSelected,
3342
+ className: cx(className, styles$8[baseClass$e], styles$8[`${baseClass$e}--${size}`], isSelected && styles$8[`${baseClass$e}--selected`], disabled && styles$8[`${baseClass$e}--disabled`])
3343
+ }), children, shouldDisplayAsCounter && /* @__PURE__ */ React.createElement(Text, {
3344
+ as: "span",
3345
+ size: "md",
3346
+ className: styles$8[`${baseClass$e}__count`]
3347
+ }, "(", count, ")"), shouldDisplayAsBadge && /* @__PURE__ */ React.createElement(Badge, {
3348
+ "data-testid": "tab-badge",
3349
+ count,
3350
+ size: "compact",
3351
+ className: styles$8[`${baseClass$e}__badge`]
3352
+ }));
3353
+ };
3354
+ const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
3355
+ const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
3356
+ var styles$7 = {
3357
+ tabs,
3358
+ tabs__list
3359
+ };
3360
+ const baseClass$d = "tabs";
3361
+ const TabsWrapper = ({
3362
+ className,
3363
+ children
3364
+ }) => {
3365
+ return /* @__PURE__ */ React.createElement("div", {
3366
+ className: cx(styles$7[baseClass$d], className)
3367
+ }, children);
3368
+ };
3369
+ const TabsList = ({
3370
+ className,
3371
+ children
3372
+ }) => {
3373
+ return /* @__PURE__ */ React.createElement("div", {
3374
+ className: cx(styles$7[`${baseClass$d}__list`], className)
3375
+ }, children);
3376
+ };
3377
+ const EditableTagContent = ({
3378
+ className = "",
3379
+ innerEditableRef,
3380
+ inputRef,
3381
+ change,
3382
+ remove,
3383
+ value
3384
+ }) => {
3385
+ const [removed, setRemoved] = React.useState(false);
3386
+ const getRef = () => innerEditableRef.current;
3387
+ const getValue = () => {
3388
+ const ref = getRef();
3389
+ return ref ? ref.innerText : "";
3390
+ };
3391
+ const focusInputRef = () => {
3392
+ if (inputRef && inputRef.current) {
3393
+ inputRef.current.focus();
3394
+ }
3395
+ };
3396
+ const onKeyDown = (e) => {
3397
+ if (e.key === KeyCodes.enter) {
3398
+ e.preventDefault();
3399
+ focusInputRef();
3400
+ return;
3401
+ }
3402
+ if (e.key === KeyCodes.backspace && getValue() === "") {
3403
+ setRemoved(true);
3404
+ remove();
3405
+ focusInputRef();
3406
+ }
3407
+ };
3408
+ const onBlur = () => {
3409
+ const ref = getRef();
3410
+ if (removed || !ref) {
3411
+ return;
3412
+ }
3413
+ if (ref.innerText === "") {
3414
+ remove();
3415
+ return;
3416
+ }
3417
+ change(ref.innerText);
3418
+ };
3419
+ const onPaste = (e) => {
3420
+ e.preventDefault();
3421
+ const text = e.clipboardData.getData("text/plain");
3422
+ document.execCommand("insertHTML", false, escape(text));
3423
+ };
3424
+ return /* @__PURE__ */ React.createElement("div", {
3425
+ ref: innerEditableRef,
3426
+ className,
3427
+ contentEditable: true,
3428
+ onPaste,
3429
+ onBlur,
3430
+ onKeyDown,
3431
+ dangerouslySetInnerHTML: { __html: escape(value) }
3432
+ });
3433
+ };
3434
+ var styles$6 = {
3435
+ "tag-input": "lc-TagInput-module__tag-input___CLVY-",
3436
+ "tag-input--error": "lc-TagInput-module__tag-input--error___RP0SB",
3437
+ "tag-input__input": "lc-TagInput-module__tag-input__input___dgEYB",
3438
+ "tag-input__input--medium": "lc-TagInput-module__tag-input__input--medium___DYF7X",
3439
+ "tag-input__input--large": "lc-TagInput-module__tag-input__input--large___G6iEO",
3440
+ "tag-input__tag__content": "lc-TagInput-module__tag-input__tag__content___x95-M"
3441
+ };
3442
+ const baseClass$c = "tag-input__tag";
3443
+ const EditableTag = ({
3444
+ children,
3445
+ index: index2,
3446
+ remove,
3447
+ validator,
3448
+ inputRef,
3449
+ update,
3450
+ size
3451
+ }) => {
3452
+ const isValid = React.useMemo(() => {
3453
+ return validator !== void 0 ? validator(children) : true;
3454
+ }, [children, validator]);
3455
+ const innerEditableRef = React.useRef(null);
3456
+ const removeTag = () => remove(index2);
3457
+ return /* @__PURE__ */ React.createElement(Tag, {
3458
+ kind: isValid ? "default" : "error",
3459
+ dismissible: true,
3460
+ size,
3461
+ onRemove: removeTag
3462
+ }, /* @__PURE__ */ React.createElement(EditableTagContent, {
3463
+ value: children,
3464
+ inputRef,
3465
+ innerEditableRef,
3466
+ className: styles$6[`${baseClass$c}__content`],
3467
+ change: (newValue) => update(index2, newValue),
3468
+ remove: removeTag,
3469
+ validator
3470
+ }));
3471
+ };
3472
+ const baseClass$b = "tag-input";
3473
+ const tagSeparatorKeys = [
3474
+ KeyCodes.enter,
3475
+ KeyCodes.spacebar,
3476
+ KeyCodes.tab,
3477
+ KeyCodes.semicolon,
3478
+ KeyCodes.comma
3479
+ ];
3480
+ const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
3481
+ const TagInput = ({
3482
+ id,
3483
+ tags,
3484
+ onChange,
3485
+ validator,
3486
+ error,
3487
+ placeholder,
3488
+ size = "medium"
3489
+ }) => {
3490
+ const mergedClassNames = cx(styles$6[baseClass$b], {
3491
+ [styles$6[`${baseClass$b}--error`]]: error
3492
+ });
3493
+ const inputClassNames = cx(styles$6[`${baseClass$b}__input`], styles$6[`${baseClass$b}__input--${size}`]);
3494
+ const [inputValue, setInputValue] = React.useState("");
3495
+ const inputRef = React.useRef(null);
3496
+ const addTag = (value) => {
3497
+ onChange([...tags || [], value]);
3498
+ setInputValue("");
3499
+ };
3500
+ const removeTag = (idx) => {
3501
+ const newTags = [...tags || []];
3502
+ newTags.splice(idx, 1);
3503
+ onChange(newTags);
3504
+ };
3505
+ const onInputChange = (e) => setInputValue(e.target.value);
3506
+ const onInputKeyDown = (e) => {
3507
+ if (tagSeparatorKeys.includes(e.key)) {
3508
+ e.preventDefault();
3509
+ if (inputValue === "") {
3510
+ return;
3511
+ }
3512
+ addTag(inputValue);
3513
+ } else if (tagRemoveKeys.includes(e.key)) {
3514
+ if (inputValue !== "" || !(tags == null ? void 0 : tags.length)) {
3515
+ return;
3516
+ }
3517
+ removeTag(tags.length - 1);
3518
+ }
3519
+ };
3520
+ const updateTag = (i, value) => {
3521
+ const newTags = [...tags || []];
3522
+ const numOccurrencesOfValue = newTags.reduce((prev, currentValue, index2) => prev + (currentValue === value && index2 !== i ? 1 : 0), 0);
3523
+ if (numOccurrencesOfValue > 0) {
3524
+ newTags.splice(i, 1);
3525
+ } else {
3526
+ newTags[i] = value;
3527
+ }
3528
+ onChange(newTags);
3529
+ };
3530
+ const onPaste = (e) => {
3531
+ e.preventDefault();
3532
+ const text = e.clipboardData.getData("text/plain");
3533
+ const newTags = text.split(/[\s,;\n]+/);
3534
+ onChange([...tags || [], ...newTags]);
3535
+ };
3536
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
3537
+ className: mergedClassNames
3538
+ }, tags == null ? void 0 : tags.map((tag2, index2) => /* @__PURE__ */ React.createElement(EditableTag, {
3539
+ index: index2,
3540
+ key: `${index2}${tag2}`,
3541
+ update: updateTag,
3542
+ remove: removeTag,
3543
+ inputRef,
3544
+ validator,
3545
+ size
3546
+ }, tag2)), /* @__PURE__ */ React.createElement("input", {
3547
+ id,
3548
+ ref: inputRef,
3549
+ className: inputClassNames,
3550
+ placeholder,
3551
+ value: inputValue,
3552
+ onChange: onInputChange,
3553
+ onKeyDown: onInputKeyDown,
3554
+ onPaste
3555
+ })), error && /* @__PURE__ */ React.createElement(FieldError, null, error));
3556
+ };
3557
+ const emailRegex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/i;
3558
+ const defaultPlaceholder = "name@company.com";
3559
+ const emailValidator = (value) => {
3560
+ return emailRegex.test(value);
3561
+ };
3562
+ const EmailTagInput = ({
3563
+ id,
3564
+ tags,
3565
+ onChange,
3566
+ error,
3567
+ placeholder = defaultPlaceholder,
3568
+ size
3569
+ }) => {
3570
+ return /* @__PURE__ */ React.createElement(TagInput, {
3571
+ id,
3572
+ tags,
3573
+ error,
3574
+ onChange,
3575
+ placeholder,
3576
+ validator: emailValidator,
3577
+ size
3578
+ });
3579
+ };
3580
+ const toast = "lc-Toast-module__toast___j5Amn";
3581
+ const toast__content = "lc-Toast-module__toast__content___HjaNw";
3582
+ const toast__actions = "lc-Toast-module__toast__actions___JWu-1";
3583
+ const toast__actions__close = "lc-Toast-module__toast__actions__close___CRPrb";
3584
+ var styles$5 = {
3585
+ toast,
3586
+ toast__content,
3587
+ toast__actions,
3588
+ toast__actions__close,
3589
+ "toast__actions--custom": "lc-Toast-module__toast__actions--custom___lm-pM",
3590
+ "toast--success": "lc-Toast-module__toast--success___7UC6m",
3591
+ "toast--warning": "lc-Toast-module__toast--warning___pteb7",
3592
+ "toast--error": "lc-Toast-module__toast--error___trg--",
3593
+ "toast--info": "lc-Toast-module__toast--info___IOp44",
3594
+ "toast-wrapper": "lc-Toast-module__toast-wrapper___Oiwqp",
3595
+ "toast-wrapper--fixed": "lc-Toast-module__toast-wrapper--fixed___QYxRI",
3596
+ "toast-wrapper--block": "lc-Toast-module__toast-wrapper--block___j0kGt",
3597
+ "toast-wrapper--horizontal-center": "lc-Toast-module__toast-wrapper--horizontal-center___t9AFd",
3598
+ "toast-wrapper--horizontal-left": "lc-Toast-module__toast-wrapper--horizontal-left___-GY4I",
3599
+ "toast-wrapper--horizontal-right": "lc-Toast-module__toast-wrapper--horizontal-right___VVMgm",
3600
+ "toast-wrapper--vertical-top": "lc-Toast-module__toast-wrapper--vertical-top___uBfEG",
3601
+ "toast-appear--slide": "lc-Toast-module__toast-appear--slide___G7GAp",
3602
+ "toast-appear-active--slide": "lc-Toast-module__toast-appear-active--slide___brfgK",
3603
+ "toast-exit--slide": "lc-Toast-module__toast-exit--slide___aqiBq",
3604
+ "toast-exit-active--slide": "lc-Toast-module__toast-exit-active--slide___WryMi",
3605
+ "toast-wrapper--vertical-bottom": "lc-Toast-module__toast-wrapper--vertical-bottom___erPuH",
3606
+ "toast-appear--fade": "lc-Toast-module__toast-appear--fade___oUwHm",
3607
+ "toast-appear-active--fade": "lc-Toast-module__toast-appear-active--fade___D3--J",
3608
+ "toast-exit--fade": "lc-Toast-module__toast-exit--fade___iDA1p",
3609
+ "toast-exit-active--fade": "lc-Toast-module__toast-exit-active--fade___tL7sb"
3610
+ };
3611
+ const iconConfig = {
3612
+ success: {
3613
+ source: CheckCircleSolid
3614
+ },
3615
+ warning: {
3616
+ source: Warning
3617
+ },
3618
+ error: {
3619
+ source: Block
3620
+ },
3621
+ info: {
3622
+ source: Info$1
3623
+ }
3624
+ };
3625
+ const baseClass$a = "toast";
3626
+ const Toast = (_W) => {
3627
+ var _X = _W, {
3628
+ action,
3629
+ className,
3630
+ children,
3631
+ removable,
3632
+ kind = "info",
3633
+ onClose
3634
+ } = _X, divProps = __objRest(_X, [
3635
+ "action",
3636
+ "className",
3637
+ "children",
3638
+ "removable",
3639
+ "kind",
3640
+ "onClose"
3641
+ ]);
3642
+ const mergedClassNames = cx(styles$5[baseClass$a], styles$5[`${baseClass$a}--${kind}`], className);
3643
+ const onActionClick = (action2) => {
3644
+ if (action2 && action2.closesOnClick && onClose) {
3645
+ action2.onClick();
3646
+ return onClose();
3647
+ }
3648
+ return action2.onClick();
3649
+ };
3650
+ return /* @__PURE__ */ React.createElement("div", __spreadValues({
3651
+ className: mergedClassNames
3652
+ }, divProps), /* @__PURE__ */ React.createElement("div", {
3653
+ className: styles$5[`${baseClass$a}__icon`]
3654
+ }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, iconConfig[kind]), {
3655
+ size: "medium"
3656
+ }))), /* @__PURE__ */ React.createElement("div", {
3657
+ className: styles$5[`${baseClass$a}__content`]
3658
+ }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
3659
+ className: styles$5[`${baseClass$a}__actions`]
3660
+ }, action && /* @__PURE__ */ React.createElement(Button, {
3661
+ className: styles$5[`${baseClass$a}__actions--custom`],
3662
+ kind: "plain",
3663
+ onClick: () => onActionClick(action)
3664
+ }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
3665
+ className: styles$5[`${baseClass$a}__actions`],
3666
+ "aria-label": "Close toast",
3667
+ onClick: onClose
3668
+ }, /* @__PURE__ */ React.createElement(Icon, {
3669
+ className: styles$5[`${baseClass$a}__actions__close`],
3670
+ source: Close,
3671
+ size: "medium"
3672
+ }))));
3673
+ };
3674
+ const ANIMATION_TIME = 200;
3675
+ const baseClass$9 = "toast-wrapper";
3676
+ const ToastWrapper = ({
3677
+ className,
3678
+ toasts = [],
3679
+ fixed = true,
3680
+ block = false,
3681
+ animationType = "slide",
3682
+ verticalPosition = "top",
3683
+ horizontalPosition = "center"
3684
+ }) => {
3685
+ const mergedClassNames = cx(styles$5[baseClass$9], {
3686
+ [styles$5[`${baseClass$9}--fixed`]]: fixed,
3687
+ [styles$5[`${baseClass$9}--block`]]: !fixed && block,
3688
+ [styles$5[`${baseClass$9}--horizontal-${horizontalPosition}`]]: horizontalPosition,
3689
+ [styles$5[`${baseClass$9}--vertical-${verticalPosition}`]]: verticalPosition
3690
+ }, className);
3691
+ return /* @__PURE__ */ React.createElement("div", {
3692
+ className: mergedClassNames
3693
+ }, /* @__PURE__ */ React.createElement(TransitionGroup, {
3694
+ component: null
3695
+ }, toasts.map(({ id, kind, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
3696
+ key: id,
3697
+ classNames: {
3698
+ enter: styles$5[`toast-appear--${animationType}`],
3699
+ enterActive: styles$5[`toast-appear-active--${animationType}`],
3700
+ exit: styles$5[`toast-exit--${animationType}`],
3701
+ exitActive: styles$5[`toast-exit-active--${animationType}`]
3702
+ },
3703
+ timeout: ANIMATION_TIME
3704
+ }, /* @__PURE__ */ React.createElement(Toast, {
3705
+ kind,
3706
+ onClose,
3707
+ removable,
3708
+ action
3709
+ }, content)))));
3710
+ };
3711
+ const tooltip = "lc-Tooltip-module__tooltip___QOOAr";
3712
+ const tooltip__arrow = "lc-Tooltip-module__tooltip__arrow___Ov1YW";
3713
+ var styles$4 = {
3714
+ tooltip,
3715
+ "tooltip--invert": "lc-Tooltip-module__tooltip--invert___PVjhE",
3716
+ "tooltip--important": "lc-Tooltip-module__tooltip--important___X-IMK",
3717
+ tooltip__arrow,
3718
+ "tooltip-header": "lc-Tooltip-module__tooltip-header___QV0Vd",
3719
+ "tooltip-image": "lc-Tooltip-module__tooltip-image___Aorwg",
3720
+ "tooltip-text": "lc-Tooltip-module__tooltip-text___FB8OV",
3721
+ "tooltip-close": "lc-Tooltip-module__tooltip-close___3r3h9",
3722
+ "tooltip-step": "lc-Tooltip-module__tooltip-step___-j0n8",
3723
+ "guide-tooltip--slide": "lc-Tooltip-module__guide-tooltip--slide___Uawm2",
3724
+ "guide-tooltip__overlay": "lc-Tooltip-module__guide-tooltip__overlay___IyrKK",
3725
+ "guide-tooltip__overlay--slide": "lc-Tooltip-module__guide-tooltip__overlay--slide___VW8oq",
3726
+ "guide-tooltip__overlay--visible": "lc-Tooltip-module__guide-tooltip__overlay--visible___dbdsZ"
3727
+ };
3728
+ const sleep = (milliseconds) => {
3729
+ return new Promise((resolve) => setTimeout(resolve, milliseconds));
3730
+ };
3731
+ const baseClass$8 = "tooltip";
3732
+ const Tooltip = (props) => {
3733
+ const {
3734
+ triggerRenderer,
3735
+ referenceElement,
3736
+ children,
3737
+ className,
3738
+ theme,
3739
+ placement,
3740
+ isVisible,
3741
+ withFadeAnimation = true,
3742
+ transitionDuration = 200,
3743
+ transitionDelay = 0,
3744
+ hoverOutDelayTimeout = 100,
3745
+ offsetMainAxis = 8,
3746
+ triggerOnClick = false,
3747
+ arrowOffsetY,
3748
+ arrowOffsetX,
3749
+ onOpen,
3750
+ onClose
3751
+ } = props;
3752
+ const isManaged = isVisible !== void 0;
3753
+ const arrowRef = React.useRef(null);
3754
+ const [visible, setVisibility] = React.useState(isVisible);
3755
+ const isHovered = React.useRef(false);
3756
+ const {
3757
+ x,
3758
+ y,
3759
+ reference,
3760
+ floating,
3761
+ strategy,
3762
+ update,
3763
+ refs,
3764
+ placement: updatedPlacement,
3765
+ middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
3766
+ } = useFloating({
3767
+ middleware: [
3768
+ offset({ mainAxis: offsetMainAxis }),
3769
+ arrow({ element: arrowRef }),
3770
+ flip()
3771
+ ],
3772
+ placement
3773
+ });
3774
+ React.useEffect(() => {
3775
+ referenceElement && reference(referenceElement);
3776
+ }, [reference, referenceElement]);
3777
+ React.useEffect(() => {
3778
+ setVisibility(isVisible);
3779
+ }, [isVisible]);
3780
+ React.useEffect(() => {
3781
+ document.addEventListener("keydown", handleCloseAction);
3782
+ return () => {
3783
+ document.removeEventListener("keydown", handleCloseAction);
3784
+ };
3785
+ }, []);
3786
+ React.useEffect(() => {
3787
+ if (!refs.reference.current || !refs.floating.current) {
3788
+ return;
3789
+ }
3790
+ return autoUpdate(refs.reference.current, refs.floating.current, update);
3791
+ }, [refs.reference, refs.floating, update, updatedPlacement, visible]);
3792
+ const handleMouseLeave = () => {
3793
+ if (triggerOnClick || isManaged)
3794
+ return;
3795
+ isHovered.current = false;
3796
+ void sleep(hoverOutDelayTimeout).then(() => {
3797
+ if (!isHovered.current) {
3798
+ setVisibility(false);
3799
+ }
3800
+ });
3801
+ };
3802
+ const handleOpen = () => {
3803
+ if (onOpen)
3804
+ onOpen();
3805
+ if (!isManaged) {
3806
+ setVisibility(true);
3807
+ }
3808
+ };
3809
+ const handleClose = () => {
3810
+ if (onClose)
3811
+ onClose();
3812
+ if (!isManaged) {
3813
+ setVisibility(false);
3814
+ }
3815
+ };
3816
+ const handleMouseEnter = () => {
3817
+ if (triggerOnClick || isManaged)
3818
+ return;
3819
+ isHovered.current = true;
3820
+ setVisibility(true);
3821
+ };
3822
+ const handleCloseAction = (event) => {
3823
+ if (event instanceof KeyboardEvent && event.key === "Escape") {
3824
+ handleClose();
3825
+ }
3826
+ if (event.type === "click") {
3827
+ handleClose();
3828
+ }
3829
+ };
3830
+ const handleClick = () => {
3831
+ if (isManaged)
3832
+ return;
3833
+ if (visible) {
3834
+ handleClose();
3835
+ } else {
3836
+ handleOpen();
3837
+ }
3838
+ };
3839
+ const top = arrowOffsetY && arrowY ? arrowY + arrowOffsetY : arrowY;
3840
+ const left = arrowOffsetX && arrowX ? arrowX + arrowOffsetX : arrowX;
3841
+ const mergedClassNames = cx(styles$4[baseClass$8], className, {
3842
+ [styles$4[`${baseClass$8}--invert`]]: theme === "invert",
3843
+ [styles$4[`${baseClass$8}--important`]]: theme === "important"
3844
+ });
3845
+ const floatingComponent = /* @__PURE__ */ React.createElement("div", {
3846
+ ref: floating,
3847
+ style: {
3848
+ position: strategy,
3849
+ top: y != null ? y : "",
3850
+ left: x != null ? x : ""
3851
+ },
3852
+ className: mergedClassNames,
3853
+ onMouseEnter: handleMouseEnter,
3854
+ onMouseLeave: handleMouseLeave
3855
+ }, React.Children.map(children, (child) => {
3856
+ if (React.isValidElement(child)) {
3857
+ return React.cloneElement(child, __spreadValues({
3858
+ handleCloseAction,
3859
+ theme
3860
+ }, child.props));
3861
+ }
3862
+ return null;
3863
+ }), /* @__PURE__ */ React.createElement("div", {
3864
+ ref: arrowRef,
3865
+ className: cx([styles$4[`${baseClass$8}__arrow`]]),
3866
+ "data-arrow-placement": updatedPlacement,
3867
+ style: { top, left }
3868
+ }));
3869
+ function renderFloatingComponent() {
3870
+ if (withFadeAnimation) {
3871
+ const enter = css`
3872
+ opacity: 0;
3873
+ `;
3874
+ const enterActive = css`
3875
+ opacity: 1;
3876
+ transition-property: opacity;
3877
+ transition-duration: ${transitionDuration}ms;
3878
+ transition-delay: ${transitionDelay}ms;
3879
+ `;
3880
+ const exit = css`
3881
+ opacity: 1;
3882
+ `;
3883
+ const exitActive = css`
3884
+ opacity: 0;
3885
+ transition-property: opacity;
3886
+ transition-duration: ${transitionDuration}ms;
3887
+ transition-delay: ${transitionDelay}ms;
3888
+ `;
3889
+ const timeout = transitionDuration + transitionDelay;
3890
+ return /* @__PURE__ */ React.createElement(CSSTransition, {
3891
+ in: visible,
3892
+ mountOnEnter: true,
3893
+ unmountOnExit: true,
3894
+ timeout,
3895
+ classNames: {
3896
+ enter,
3897
+ enterActive,
3898
+ exit,
3899
+ exitActive
3900
+ }
3901
+ }, floatingComponent);
3902
+ } else {
3903
+ return visible && floatingComponent;
3904
+ }
3905
+ }
3906
+ if (referenceElement) {
3907
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, renderFloatingComponent());
3908
+ }
3909
+ const referenceOptions = () => {
3910
+ if (!isManaged) {
3911
+ if (triggerOnClick) {
3912
+ return {
3913
+ onClick: handleClick
3914
+ };
3915
+ } else {
3916
+ return {
3917
+ onMouseEnter: handleMouseEnter,
3918
+ onMouseLeave: handleMouseLeave
3919
+ };
3920
+ }
3921
+ }
3922
+ };
3923
+ const triggerElement = /* @__PURE__ */ React.createElement("div", __spreadValues({
3924
+ ref: reference
3925
+ }, referenceOptions()), triggerRenderer());
3926
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, triggerElement, renderFloatingComponent());
3927
+ };
3928
+ const Simple = ({ text }) => {
3929
+ return /* @__PURE__ */ React.createElement("div", null, text);
3930
+ };
3931
+ function getIconType(theme) {
3932
+ switch (theme) {
3933
+ case "invert":
3934
+ return "inverted";
3935
+ case "important":
3936
+ return "subtle";
3937
+ default:
3938
+ return "primary";
3939
+ }
3940
+ }
3941
+ const baseClass$7 = "tooltip";
3942
+ const Info = ({ header, text, closeWithX, theme, handleCloseAction }) => {
3943
+ return /* @__PURE__ */ React.createElement("div", {
3944
+ style: { position: "relative" }
3945
+ }, closeWithX && /* @__PURE__ */ React.createElement("div", {
3946
+ className: styles$4[`${baseClass$7}-close`],
3947
+ onClick: handleCloseAction
3948
+ }, /* @__PURE__ */ React.createElement(Icon, {
3949
+ source: Close,
3950
+ kind: theme ? getIconType(theme) : "primary"
3951
+ })), header && /* @__PURE__ */ React.createElement("div", {
3952
+ className: styles$4[`${baseClass$7}-header`]
3953
+ }, header), /* @__PURE__ */ React.createElement("div", {
3954
+ className: styles$4[`${baseClass$7}-text`]
3955
+ }, text));
3956
+ };
3957
+ const baseClass$6 = "tooltip";
3958
+ const Interactive = ({
3959
+ header,
3960
+ text,
3961
+ image,
3962
+ closeWithX,
3963
+ theme,
3964
+ handleCloseAction,
3965
+ handleClickPrimary,
3966
+ handleClickSecondary
3967
+ }) => {
3968
+ const decoration = theme === "invert" ? "underline" : "none";
3969
+ return /* @__PURE__ */ React.createElement("div", {
3970
+ style: { width: "270px" }
3971
+ }, /* @__PURE__ */ React.createElement("div", {
3972
+ style: { position: "relative", height: "25px", marginBottom: "10px" }
3973
+ }, closeWithX && /* @__PURE__ */ React.createElement("div", {
3974
+ className: styles$4[`${baseClass$6}-close`]
3975
+ }, /* @__PURE__ */ React.createElement("div", {
3976
+ onClick: handleCloseAction
3977
+ }, /* @__PURE__ */ React.createElement(Icon, {
3978
+ source: Close,
3979
+ kind: theme ? getIconType(theme) : "primary"
3980
+ })))), image && /* @__PURE__ */ React.createElement("div", {
3981
+ style: { margin: "0 4px" }
3982
+ }, /* @__PURE__ */ React.createElement("img", {
3983
+ className: styles$4[`${baseClass$6}-image`],
3984
+ src: image.src,
3985
+ alt: image.alt
3986
+ })), header && /* @__PURE__ */ React.createElement("div", {
3987
+ className: styles$4[`${baseClass$6}-header`]
3988
+ }, header), /* @__PURE__ */ React.createElement("div", {
3989
+ className: styles$4[`${baseClass$6}-text`]
3990
+ }, text), /* @__PURE__ */ React.createElement("div", {
3991
+ style: { margin: "4px" }
3992
+ }, /* @__PURE__ */ React.createElement(Button, {
3993
+ kind: "primary",
3994
+ onClick: handleClickPrimary
3995
+ }, "Primary button"), /* @__PURE__ */ React.createElement("div", {
3996
+ onClick: handleClickSecondary,
3997
+ style: {
3998
+ cursor: "pointer",
3999
+ display: "inline-block",
4000
+ marginLeft: "16px",
4001
+ textDecoration: decoration
4002
+ }
4003
+ }, "Link")));
4004
+ };
4005
+ const baseClass$5 = "guide-tooltip";
4006
+ const SpotlightOverlay = ({
4007
+ gap,
4008
+ isVisible,
4009
+ slide,
4010
+ disablePointerEvents
4011
+ }) => {
4012
+ if (!gap)
4013
+ return null;
4014
+ const overlayLeft = {
4015
+ top: `${gap.top}px`,
4016
+ left: "0",
4017
+ width: `${gap.left}px`,
4018
+ height: `${gap.height}px`
4019
+ };
4020
+ const overlayRight = {
4021
+ top: `${gap.top}px`,
4022
+ left: `${gap.right}px`,
4023
+ width: `calc(100% - ${gap.right}px)`,
4024
+ height: `${gap.height}px`
4025
+ };
4026
+ const overlayTop = {
4027
+ top: "0",
4028
+ left: "0",
4029
+ width: "100%",
4030
+ height: `${gap.top}px`
4031
+ };
4032
+ const overlayBottom = {
4033
+ top: `${gap.bottom}px`,
4034
+ left: "0",
4035
+ width: "100%",
4036
+ height: `calc(100% - ${gap.bottom}px)`
4037
+ };
4038
+ const spotlight = {
4039
+ top: `${gap.top}px`,
4040
+ left: `${gap.left}px`,
4041
+ width: `${gap.width}px`,
4042
+ height: `${gap.height}px`,
4043
+ backgroundColor: "transparent"
4044
+ };
4045
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
4046
+ className: cx({
4047
+ [styles$4[`${baseClass$5}__overlay`]]: true,
4048
+ [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
4049
+ [styles$4[`${baseClass$5}__overlay--slide`]]: slide
4050
+ }),
4051
+ style: overlayLeft
4052
+ }), /* @__PURE__ */ React.createElement("div", {
4053
+ className: cx({
4054
+ [styles$4[`${baseClass$5}__overlay`]]: true,
4055
+ [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
4056
+ [styles$4[`${baseClass$5}__overlay--slide`]]: slide
4057
+ }),
4058
+ style: overlayTop
4059
+ }), /* @__PURE__ */ React.createElement("div", {
4060
+ className: cx({
4061
+ [styles$4[`${baseClass$5}__overlay`]]: true,
4062
+ [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
4063
+ [styles$4[`${baseClass$5}__overlay--slide`]]: slide
4064
+ }),
4065
+ style: overlayRight
4066
+ }), /* @__PURE__ */ React.createElement("div", {
4067
+ className: cx({
4068
+ [styles$4[`${baseClass$5}__overlay`]]: true,
4069
+ [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
4070
+ [styles$4[`${baseClass$5}__overlay--slide`]]: slide
4071
+ }),
4072
+ style: overlayBottom
4073
+ }), disablePointerEvents && /* @__PURE__ */ React.createElement("div", {
4074
+ className: cx({
4075
+ [styles$4[`${baseClass$5}__overlay`]]: true,
4076
+ [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
4077
+ [styles$4[`${baseClass$5}__overlay--slide`]]: slide
4078
+ }),
4079
+ style: spotlight
4080
+ }));
4081
+ };
4082
+ class VirtualReference {
4083
+ constructor(element, padding) {
4084
+ __publicField(this, "element");
4085
+ __publicField(this, "padding");
4086
+ this.element = element;
4087
+ this.padding = padding;
4088
+ }
4089
+ addPadding(rect) {
4090
+ const x = Math.round(rect.left) - this.padding;
4091
+ const y = Math.round(rect.top) - this.padding;
4092
+ const width = Math.round(rect.width) + 2 * this.padding;
4093
+ const height = Math.round(rect.height) + 2 * this.padding;
4094
+ const top = y;
4095
+ const left = x;
4096
+ const bottom = top + height;
4097
+ const right = left + width;
4098
+ return {
4099
+ x,
4100
+ y,
4101
+ width,
4102
+ height,
4103
+ top,
4104
+ left,
4105
+ bottom,
4106
+ right
4107
+ };
4108
+ }
4109
+ getBoundingClientRect() {
4110
+ return this.addPadding(this.element.getBoundingClientRect());
4111
+ }
4112
+ get clientWidth() {
4113
+ return this.getBoundingClientRect().width;
4114
+ }
4115
+ get clientHeight() {
4116
+ return this.getBoundingClientRect().height;
4117
+ }
4118
+ }
4119
+ const spotlightPadding = 8;
4120
+ const baseClass$4 = "guide-tooltip";
4121
+ const virtualReference = (element, padding) => new VirtualReference(element, padding);
4122
+ const UserGuide = (props) => {
4123
+ const {
4124
+ className,
4125
+ parentElementName,
4126
+ isVisible = false,
4127
+ shouldSlide = true
4128
+ } = props;
4129
+ const [parentElement, setParentElement] = React.useState(null);
4130
+ const [rect, setRect] = React.useState(null);
4131
+ const [isSliding, setIsSliding] = React.useState(shouldSlide);
4132
+ const handleViewportChange = () => {
4133
+ if (parentElement) {
4134
+ setRect(virtualReference(parentElement, spotlightPadding).getBoundingClientRect());
4135
+ setIsSliding(false);
4136
+ }
4137
+ };
4138
+ React.useEffect(() => {
4139
+ if (parentElement !== null) {
4140
+ window.addEventListener("resize", handleViewportChange);
4141
+ window.addEventListener("scroll", handleViewportChange);
4142
+ return () => {
4143
+ window.addEventListener("resize", handleViewportChange);
4144
+ window.addEventListener("resize", handleViewportChange);
4145
+ };
4146
+ }
4147
+ }, [parentElement, parentElementName]);
4148
+ React.useEffect(() => {
4149
+ if (parentElementName) {
4150
+ const element = document.querySelector(parentElementName);
4151
+ setParentElement(element);
4152
+ }
4153
+ }, [parentElementName]);
4154
+ React.useEffect(() => {
4155
+ parentElement && setRect(virtualReference(parentElement, spotlightPadding).getBoundingClientRect());
4156
+ setIsSliding(true);
4157
+ }, [parentElement]);
4158
+ return parentElement && isVisible ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SpotlightOverlay, {
4159
+ gap: rect,
4160
+ isVisible,
4161
+ slide: isSliding,
4162
+ disablePointerEvents: true
4163
+ }), /* @__PURE__ */ React.createElement(Tooltip, __spreadProps(__spreadValues({}, props), {
4164
+ referenceElement: {
4165
+ getBoundingClientRect: () => {
4166
+ return rect;
4167
+ },
4168
+ contextElement: parentElement
4169
+ },
4170
+ arrowOffsetY: 25,
4171
+ className: cx({
4172
+ [styles$4[baseClass$4]]: true,
4173
+ [styles$4[`${baseClass$4}--slide`]]: isSliding,
4174
+ className
4175
+ })
4176
+ }), props.children)) : null;
4177
+ };
4178
+ const textarea = "lc-Textarea-module__textarea___g6U8F";
4179
+ var styles$3 = {
4180
+ textarea,
4181
+ "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
4182
+ "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
4183
+ "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
4184
+ };
4185
+ const baseClass$3 = "textarea";
4186
+ const Textarea = React.forwardRef((_Y, ref) => {
4187
+ var _Z = _Y, { className, error } = _Z, textareaProps = __objRest(_Z, ["className", "error"]);
4188
+ const { disabled } = textareaProps;
4189
+ const [isFocused, setIsFocused] = React.useState(false);
4190
+ const mergedClassNames = cx(className, styles$3[baseClass$3], {
4191
+ [styles$3[`${baseClass$3}--disabled`]]: disabled,
4192
+ [styles$3[`${baseClass$3}--focused`]]: isFocused,
4193
+ [styles$3[`${baseClass$3}--error`]]: error
4194
+ });
4195
+ return /* @__PURE__ */ React.createElement("div", {
4196
+ className: mergedClassNames
4197
+ }, /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, textareaProps), {
4198
+ ref,
4199
+ onFocus: () => setIsFocused(true),
4200
+ onBlur: () => setIsFocused(false)
4201
+ })));
4202
+ });
4203
+ var styles$2 = {
4204
+ "file-upload-progress": "lc-FileUploadProgress-module__file-upload-progress___xw8h8",
4205
+ "file-upload-progress__icon": "lc-FileUploadProgress-module__file-upload-progress__icon___p8Rfz",
4206
+ "file-upload-progress__icon--success": "lc-FileUploadProgress-module__file-upload-progress__icon--success___X40uH",
4207
+ "file-upload-progress__wrapper": "lc-FileUploadProgress-module__file-upload-progress__wrapper___01Nkq",
4208
+ "file-upload-progress__wrapper--with-icon": "lc-FileUploadProgress-module__file-upload-progress__wrapper--with-icon___GSXmA",
4209
+ "file-upload-progress__wrapper__header": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header___mYBGK",
4210
+ "file-upload-progress__wrapper__header__actions": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__actions___tvhB3",
4211
+ "file-upload-progress__wrapper__header__title": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title___2IVuv",
4212
+ "file-upload-progress__wrapper__header__title--success": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--success___E6DQl",
4213
+ "file-upload-progress__wrapper__header__title--error": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--error___5BPpI"
4214
+ };
4215
+ var styles$1 = {
4216
+ "file-upload-progress-actions": "lc-FileUploadProgressActions-module__file-upload-progress-actions___qOBr2",
4217
+ "file-upload-progress-actions__close-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__close-button___Eh4um",
4218
+ "file-upload-progress-actions__retry-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__retry-button___DqFEo"
4219
+ };
4220
+ const baseClass$2 = "file-upload-progress-actions";
4221
+ const FileUploadProgressActions = ({ status, onCloseButtonClick, onRetryButtonClick }) => {
4222
+ return /* @__PURE__ */ React.createElement("div", {
4223
+ className: styles$1[`${baseClass$2}`]
4224
+ }, onRetryButtonClick && status === "error" && /* @__PURE__ */ React.createElement("button", {
4225
+ type: "button",
4226
+ className: styles$1[`${baseClass$2}__retry-button`],
4227
+ "aria-label": "Retry",
4228
+ onClick: onRetryButtonClick
4229
+ }, /* @__PURE__ */ React.createElement(Icon, {
4230
+ source: Refresh
4231
+ })), onCloseButtonClick && status !== "success" && /* @__PURE__ */ React.createElement("button", {
4232
+ type: "button",
4233
+ className: styles$1[`${baseClass$2}__close-button`],
4234
+ "aria-label": "Close",
4235
+ onClick: onCloseButtonClick
4236
+ }, /* @__PURE__ */ React.createElement(Icon, {
4237
+ source: Close
4238
+ })));
4239
+ };
4240
+ const baseClass$1 = "file-upload-progress";
4241
+ const wrapperHeaderTitleClass = `${baseClass$1}__wrapper__header__title`;
4242
+ const FileUploadProgress = React.forwardRef(({
4243
+ actionsVisibility = "hidden",
4244
+ className,
4245
+ icon: icon2,
4246
+ title,
4247
+ progressValue: percent,
4248
+ size,
4249
+ status = "normal",
4250
+ onCloseButtonClick,
4251
+ onRetryButtonClick
4252
+ }, ref) => {
4253
+ return /* @__PURE__ */ React.createElement("div", {
4254
+ className: styles$2[baseClass$1],
4255
+ ref
4256
+ }, icon2 && status !== "success" && /* @__PURE__ */ React.createElement("div", {
4257
+ className: styles$2[`${baseClass$1}__icon`]
4258
+ }, icon2), status === "success" && /* @__PURE__ */ React.createElement("div", {
4259
+ className: cx(styles$2[`${baseClass$1}__icon`], styles$2[`${baseClass$1}__icon--success`])
4260
+ }, /* @__PURE__ */ React.createElement(Icon, {
4261
+ source: Check
4262
+ })), /* @__PURE__ */ React.createElement("div", {
4263
+ className: cx(styles$2[`${baseClass$1}__wrapper`], {
4264
+ [styles$2[`${baseClass$1}__wrapper--with-icon`]]: icon2
4265
+ })
4266
+ }, /* @__PURE__ */ React.createElement("div", {
4267
+ className: styles$2[`${baseClass$1}__wrapper__header`]
4268
+ }, title && /* @__PURE__ */ React.createElement("div", {
4269
+ className: cx(styles$2[wrapperHeaderTitleClass], {
4270
+ [styles$2[`${wrapperHeaderTitleClass}--success`]]: status === "success",
4271
+ [styles$2[`${wrapperHeaderTitleClass}--error`]]: status === "error"
4272
+ })
4273
+ }, title), actionsVisibility !== "hidden" && /* @__PURE__ */ React.createElement("div", {
4274
+ className: cx({
4275
+ [styles$2[`${baseClass$1}__wrapper__header__actions`]]: actionsVisibility === "hover"
4276
+ })
4277
+ }, /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
4278
+ status,
4279
+ onCloseButtonClick,
4280
+ onRetryButtonClick
4281
+ }))), status !== "success" && /* @__PURE__ */ React.createElement(ProgressBar, {
4282
+ className,
4283
+ percent,
4284
+ status,
4285
+ size
4286
+ })));
4287
+ });
4288
+ var styles = {
4289
+ "upload-bar": "lc-UploadBar-module__upload-bar___6Or8h",
4290
+ "upload-bar--error": "lc-UploadBar-module__upload-bar--error___MzvhT",
4291
+ "upload-bar__wrapper": "lc-UploadBar-module__upload-bar__wrapper___MAUeH",
4292
+ "upload-bar__wrapper__header": "lc-UploadBar-module__upload-bar__wrapper__header___x9fen",
4293
+ "upload-bar__wrapper__header__icon": "lc-UploadBar-module__upload-bar__wrapper__header__icon___Aetm5",
4294
+ "upload-bar__wrapper__header__title": "lc-UploadBar-module__upload-bar__wrapper__header__title___BNuDu",
4295
+ "upload-bar__wrapper__header__collapse-button": "lc-UploadBar-module__upload-bar__wrapper__header__collapse-button___3khMy",
4296
+ "upload-bar__wrapper__header__actions-container": "lc-UploadBar-module__upload-bar__wrapper__header__actions-container___5Pj4y",
4297
+ "upload-bar__wrapper__header__success-icon": "lc-UploadBar-module__upload-bar__wrapper__header__success-icon___ZLCdw",
4298
+ "upload-bar__wrapper__header__error-icon": "lc-UploadBar-module__upload-bar__wrapper__header__error-icon___q-sZo",
4299
+ "upload-bar__files": "lc-UploadBar-module__upload-bar__files___3W4nx",
4300
+ "upload-bar__files--enter": "lc-UploadBar-module__upload-bar__files--enter___zGq19",
4301
+ "upload-bar__files--enter-active": "lc-UploadBar-module__upload-bar__files--enter-active___-dMVb",
4302
+ "upload-bar__files--exit": "lc-UploadBar-module__upload-bar__files--exit___MXBRY",
4303
+ "upload-bar__files--exit-active": "lc-UploadBar-module__upload-bar__files--exit-active___krGW5",
4304
+ "upload-bar__files--exit-done": "lc-UploadBar-module__upload-bar__files--exit-done___2I72G",
4305
+ "upload-bar__files-wrapper": "lc-UploadBar-module__upload-bar__files-wrapper___93bs8",
4306
+ "upload-bar__files__list": "lc-UploadBar-module__upload-bar__files__list___QJFEq"
4307
+ };
4308
+ const baseClass = "upload-bar";
4309
+ const wrapperHeaderClass = `${baseClass}__wrapper__header`;
4310
+ const TRANSITION_TIMEOUT = 300;
4311
+ const getHeaderIcon = (status, progressValue) => {
4312
+ if (status === "success") {
4313
+ return /* @__PURE__ */ React.createElement("div", {
4314
+ className: styles[`${wrapperHeaderClass}__success-icon`]
4315
+ }, /* @__PURE__ */ React.createElement(Icon, {
4316
+ source: Check
4317
+ }));
4318
+ }
4319
+ if (status === "error") {
4320
+ return /* @__PURE__ */ React.createElement("div", {
4321
+ className: styles[`${wrapperHeaderClass}__error-icon`]
4322
+ }, /* @__PURE__ */ React.createElement(Icon, {
4323
+ source: Error2
4324
+ }));
4325
+ }
4326
+ return /* @__PURE__ */ React.createElement(ProgressCircle, {
4327
+ status,
4328
+ progressValue,
4329
+ size: "small"
4330
+ });
4331
+ };
4332
+ const UploadBar = ({
4333
+ children,
4334
+ className,
4335
+ progressValue,
4336
+ title,
4337
+ isExpanded,
4338
+ errorMessage,
4339
+ status = "normal",
4340
+ icon: icon2,
4341
+ size,
4342
+ mode = "multiple",
4343
+ onCloseButtonClick,
4344
+ onRetryButtonClick
4345
+ }) => {
4346
+ const [expanded, setExpanded] = React.useState(isExpanded || false);
4347
+ const withError = status === "error";
4348
+ const withSuccess = status === "success";
4349
+ const mergedClassNames = cx(styles[baseClass], className, {
4350
+ [styles[`${baseClass}--error`]]: withError,
4351
+ [styles[`${baseClass}--success`]]: withSuccess
4352
+ });
4353
+ const shouldShowCollapseButton = !(withError && (onRetryButtonClick || onCloseButtonClick));
4354
+ const handleOnWrapperClick = () => setExpanded(!expanded);
4355
+ if (mode === "single") {
4356
+ return /* @__PURE__ */ React.createElement("div", {
4357
+ className: mergedClassNames
4358
+ }, /* @__PURE__ */ React.createElement("div", {
4359
+ className: styles[`${baseClass}__wrapper`]
4360
+ }, /* @__PURE__ */ React.createElement("div", {
4361
+ className: styles[`${wrapperHeaderClass}`]
4362
+ }, /* @__PURE__ */ React.createElement(FileUploadProgress, {
4363
+ title: withError ? errorMessage || title : title,
4364
+ progressValue,
4365
+ status,
4366
+ icon: icon2,
4367
+ size
4368
+ })), status === "error" && /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
4369
+ status,
4370
+ onCloseButtonClick,
4371
+ onRetryButtonClick
4372
+ })));
4373
+ }
4374
+ return /* @__PURE__ */ React.createElement("div", {
4375
+ className: mergedClassNames
4376
+ }, /* @__PURE__ */ React.createElement("div", {
4377
+ className: styles[`${baseClass}__wrapper`],
4378
+ onClick: handleOnWrapperClick
4379
+ }, /* @__PURE__ */ React.createElement("div", {
4380
+ className: styles[`${wrapperHeaderClass}`]
4381
+ }, /* @__PURE__ */ React.createElement("div", {
4382
+ className: styles[`${wrapperHeaderClass}__icon`]
4383
+ }, getHeaderIcon(status, progressValue)), /* @__PURE__ */ React.createElement("div", {
4384
+ className: styles[`${wrapperHeaderClass}__title`]
4385
+ }, withError ? errorMessage || title : title), shouldShowCollapseButton && /* @__PURE__ */ React.createElement("button", {
4386
+ className: styles[`${wrapperHeaderClass}__collapse-button`],
4387
+ type: "button",
4388
+ onClick: handleOnWrapperClick
4389
+ }, expanded ? /* @__PURE__ */ React.createElement(Icon, {
4390
+ source: ChevronUp
4391
+ }) : /* @__PURE__ */ React.createElement(Icon, {
4392
+ source: ChevronDown
4393
+ })), status === "error" && /* @__PURE__ */ React.createElement("div", {
4394
+ className: styles[`${wrapperHeaderClass}__actions-container`]
4395
+ }, /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
4396
+ status,
4397
+ onCloseButtonClick,
4398
+ onRetryButtonClick
4399
+ })))), /* @__PURE__ */ React.createElement(TransitionGroup, {
4400
+ component: null
4401
+ }, expanded && /* @__PURE__ */ React.createElement(CSSTransition, {
4402
+ timeout: TRANSITION_TIMEOUT,
4403
+ classNames: {
4404
+ enter: styles[`${baseClass}__files--enter`],
4405
+ enterActive: styles[`${baseClass}__files--enter-active`],
4406
+ exit: styles[`${baseClass}__files--exit`],
4407
+ exitActive: styles[`${baseClass}__files--exit-active`],
4408
+ exitDone: styles[`${baseClass}__files--exit-done`]
4409
+ }
4410
+ }, /* @__PURE__ */ React.createElement("div", {
4411
+ className: styles[`${baseClass}__files`]
4412
+ }, /* @__PURE__ */ React.createElement("div", {
4413
+ className: styles[`${baseClass}__files-wrapper`]
4414
+ }, /* @__PURE__ */ React.createElement("div", {
4415
+ className: styles[`${baseClass}__files__list`]
4416
+ }, children))))));
4417
+ };
4418
+ export { ANIMATION_TIME, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };