@livechat/design-system-react-components 1.0.0-alpha.0

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