@popsure/dirty-swan 0.27.14 → 0.27.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +294 -227
- package/dist/index.js.map +1 -1
- package/dist/lib/components/button/index.d.ts +1 -1
- package/dist/lib/components/comparisonTable/components/AccordionItem/AccordionItem.d.ts +11 -0
- package/dist/lib/components/comparisonTable/components/AccordionItem/index.d.ts +1 -0
- package/dist/lib/components/comparisonTable/components/Row/index.d.ts +1 -1
- package/dist/lib/components/comparisonTable/components/TableArrows/index.d.ts +4 -2
- package/dist/lib/components/comparisonTable/hooks/useComparisonTable.d.ts +14 -0
- package/dist/lib/components/comparisonTable/index.d.ts +10 -4
- package/dist/lib/components/input/index.d.ts +1 -1
- package/package.json +2 -1
- package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss +44 -0
- package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx +73 -0
- package/src/lib/components/comparisonTable/components/AccordionItem/index.tsx +1 -0
- package/src/lib/components/comparisonTable/components/Row/index.tsx +1 -3
- package/src/lib/components/comparisonTable/components/Row/style.module.scss +11 -2
- package/src/lib/components/comparisonTable/components/TableArrows/index.tsx +1 -3
- package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss +1 -1
- package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts +124 -0
- package/src/lib/components/comparisonTable/index.stories.mdx +226 -8
- package/src/lib/components/comparisonTable/index.tsx +172 -123
- package/src/lib/components/comparisonTable/style.module.scss +16 -6
- package/src/lib/components/dateSelector/datepicker.scss +2 -8
- package/src/lib/components/dateSelector/index.tsx +2 -0
- package/dist/lib/components/comparisonTable/hooks/useActiveTableArrows.d.ts +0 -10
- package/src/lib/components/comparisonTable/hooks/useActiveTableArrows.ts +0 -63
package/dist/index.js
CHANGED
|
@@ -2173,12 +2173,12 @@ function styleInject(css, ref) {
|
|
|
2173
2173
|
}
|
|
2174
2174
|
}
|
|
2175
2175
|
|
|
2176
|
-
var css_248z$
|
|
2177
|
-
var styles$
|
|
2178
|
-
styleInject(css_248z$
|
|
2176
|
+
var css_248z$s = ".style-module_container__3bJf5 {\n display: flex;\n align-items: center;\n}\n\n.style-module_date-selector-container__165Ii {\n margin-left: -8px;\n display: flex;\n}\n.style-module_date-selector-container__165Ii > select {\n margin-left: 8px;\n}\n@media (max-width: 34rem) {\n .style-module_date-selector-container__165Ii > select {\n margin-left: 0;\n }\n}\n@media (max-width: 34rem) {\n .style-module_date-selector-container__165Ii {\n margin-left: 0;\n display: unset;\n }\n}\n\n.style-module_row-container__2J4YP > select {\n margin-left: 8px;\n}\n@media (max-width: 34rem) {\n .style-module_row-container__2J4YP > select {\n margin-left: 0;\n }\n}\n@media (max-width: 34rem) {\n .style-module_row-container__2J4YP {\n display: flex;\n justify-content: space-between;\n }\n}\n\n.style-module_day-select__pHm0x {\n width: 88px;\n}\n@media (max-width: 34rem) {\n .style-module_day-select__pHm0x {\n flex: 1;\n margin-right: 8px;\n }\n}\n\n.style-module_month-select__2RXk9 {\n width: 104px;\n}\n@media (max-width: 34rem) {\n .style-module_month-select__2RXk9 {\n flex: 1;\n }\n}\n\n.style-module_year-select__8HXni {\n width: 104px;\n}\n@media (max-width: 34rem) {\n .style-module_year-select__8HXni {\n display: block;\n margin-top: 8px;\n width: 100%;\n }\n}\n\n.style-module_date-calendar-container__2ERYZ {\n position: relative;\n margin-left: 24px;\n}\n@media (max-width: 34rem) {\n .style-module_date-calendar-container__2ERYZ {\n margin-left: 16px;\n }\n}";
|
|
2177
|
+
var styles$q = {"container":"style-module_container__3bJf5","date-selector-container":"style-module_date-selector-container__165Ii","row-container":"style-module_row-container__2J4YP","day-select":"style-module_day-select__pHm0x","month-select":"style-module_month-select__2RXk9","year-select":"style-module_year-select__8HXni","date-calendar-container":"style-module_date-calendar-container__2ERYZ"};
|
|
2178
|
+
styleInject(css_248z$s);
|
|
2179
2179
|
|
|
2180
|
-
var css_248z$
|
|
2181
|
-
styleInject(css_248z$
|
|
2180
|
+
var css_248z$r = ".datepicker_DayPickerInput__BIdi9 {\n cursor: pointer;\n position: relative;\n background-color: white;\n display: flex;\n align-items: center;\n height: 40px;\n min-width: 180px;\n padding-left: 8px;\n line-height: 40px;\n border-radius: 4px;\n text-align: left;\n border: 1px solid #91919c;\n}\n\n.datepicker_DayPickerInput__BIdi9 input {\n cursor: pointer;\n border: none;\n background-color: transparent;\n height: 100%;\n color: #4c4c53;\n font-size: 16px;\n}\n\n.datepicker_DayPickerInput__BIdi9::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n border-left: 9px solid transparent;\n border-right: 9px solid transparent;\n border-top: 12px solid #91919c;\n}\n\n.datepicker_DayPickerInput__BIdi9:hover::before {\n border-top: 12px solid #4c4c53;\n}\n\n.datepicker_DayPickerInput__BIdi9:hover {\n border-color: #4c4c53;\n}\n\n.datepicker_DayPicker__3gbq9 {\n position: absolute;\n left: -9px;\n top: 8px;\n z-index: 100;\n border-radius: 4px;\n box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n background-color: white;\n display: inline-block;\n font-size: 1rem;\n}\n\n.datepicker_DayPicker-wrapper__2YoUZ {\n position: relative;\n flex-direction: row;\n padding-bottom: 1em;\n user-select: none;\n}\n\n.datepicker_DayPicker-Months__1HWtD {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.datepicker_DayPicker-Month__2zQx4 {\n display: table;\n margin: 0 1em;\n margin-top: 1em;\n border-spacing: 0;\n border-collapse: collapse;\n user-select: none;\n font: 16px;\n}\n\n.datepicker_DayPicker-NavButton__gYhRh {\n position: absolute;\n top: 1em;\n right: 1.5em;\n left: auto;\n display: inline-block;\n margin-top: 2px;\n width: 1.25em;\n height: 1.25em;\n background-position: center;\n background-size: 50%;\n background-repeat: no-repeat;\n color: #8b9898;\n cursor: pointer;\n}\n\n.datepicker_DayPicker-NavButton__gYhRh:hover {\n opacity: 0.8;\n}\n\n.datepicker_DayPicker-NavButton--prev__YQNOk {\n margin-right: 1.5em;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC\");\n}\n\n.datepicker_DayPicker-NavButton--next__Zmber {\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==\");\n}\n\n.datepicker_DayPicker-NavButton--interactionDisabled__3I_W_ {\n visibility: hidden;\n}\n\n.datepicker_DayPicker-Caption__2fe7G {\n display: table-caption;\n margin-bottom: 0.5em;\n padding: 0 0.5em;\n text-align: left;\n}\n\n.datepicker_DayPicker-Caption__2fe7G > div {\n font-weight: 500;\n font-size: 1.15em;\n}\n\n.datepicker_DayPicker-Weekdays__3xfTx {\n display: table-header-group;\n margin-top: 1em;\n}\n\n.datepicker_DayPicker-WeekdaysRow__1Tq3c {\n display: table-row;\n}\n\n.datepicker_DayPicker-Weekday__2Mtjv {\n display: table-cell;\n padding: 0.5em;\n color: #8b9898;\n text-align: center;\n font-size: 0.875em;\n}\n\n.datepicker_DayPicker-Weekday__2Mtjv abbr[title] {\n border-bottom: none;\n text-decoration: none;\n}\n\n.datepicker_DayPicker-Body__1nLLj {\n display: table-row-group;\n}\n\n.datepicker_DayPicker-Week__3pr46 {\n display: table-row;\n}\n\n.datepicker_DayPicker-Day__3P_ZQ {\n min-width: 40px;\n height: 40px;\n}\n\n.datepicker_DayPicker-WeekNumber__uW3oy {\n display: table-cell;\n padding: 0.5em;\n min-width: 1em;\n border-right: 1px solid #eaecec;\n color: #8b9898;\n vertical-align: middle;\n text-align: right;\n font-size: 0.75em;\n cursor: pointer;\n}\n\n.datepicker_DayPicker--interactionDisabled__2DFt- .datepicker_DayPicker-Day__3P_ZQ {\n cursor: default;\n}\n\n.datepicker_DayPicker-Footer__2xtuF {\n padding-top: 0.5em;\n}\n\n.datepicker_DayPicker-TodayButton__wac7H {\n border: none;\n background-color: transparent;\n background-image: none;\n box-shadow: none;\n color: #4a90e2;\n font-size: 0.875em;\n cursor: pointer;\n}\n\n.datepicker_DayPicker-Day--sunday__2yj_w {\n background-color: #f7f8f8;\n}\n\n.datepicker_DayPicker-Day--sunday__2yj_w:not(.datepicker_DayPicker-Day--today__2ugfC) {\n color: #dce0e0;\n}\n\n.datepicker_DayPicker-Day--selected__nlbP_:not(.datepicker_DayPicker-Day--disabled__DzYSi):not(.datepicker_DayPicker-Day--outside__3jJk8) {\n position: relative;\n background-color: #8e8cee;\n color: #f0f8ff;\n}\n\n.datepicker_DayPicker-Day--selected__nlbP_:not(.datepicker_DayPicker-Day--disabled__DzYSi):not(.datepicker_DayPicker-Day--outside__3jJk8):hover {\n background-color: #6160a2;\n}\n\n.datepicker_DayPicker__3gbq9:not(.datepicker_DayPicker--interactionDisabled__2DFt-) .datepicker_DayPicker-Day__3P_ZQ:not(.datepicker_DayPicker-Day--disabled__DzYSi):not(.datepicker_DayPicker-Day--selected__nlbP_):not(.datepicker_DayPicker-Day--outside__3jJk8):hover {\n background-color: #e6e5ff;\n}\n\n.datepicker_DayPickerInput__BIdi9 {\n display: inline-block;\n}\n\n.datepicker_DayPickerInput-OverlayWrapper__2ygAS {\n position: relative;\n}\n\n.datepicker_DayPickerInput-Overlay__3NJ5W {\n position: absolute;\n left: 0;\n z-index: 1;\n background: white;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);\n}\n\n.datepicker_DayPicker__3gbq9 {\n position: absolute;\n left: 40px;\n top: -112px;\n z-index: 100;\n background-color: white;\n border: 1px solid #d2d2d8;\n box-shadow: 0px 0px 32px rgba(210, 210, 216, 0.25);\n border-radius: 16px;\n display: inline-block;\n color: #26262e;\n}\n@media (max-width: 34rem) {\n .datepicker_DayPicker__3gbq9 {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n}\n\n.datepicker_DayPicker-wrapper__2YoUZ {\n padding: 8px 24px 24px 24px;\n}\n\n.datepicker_DayPicker-NavBar__Z377- {\n display: flex;\n justify-content: space-between;\n width: 100%;\n position: absolute;\n left: 0;\n}\n\n.datepicker_DayPicker-NavButton__gYhRh {\n position: unset;\n margin-top: 0;\n width: 48px;\n height: 48px;\n}\n\n.datepicker_DayPicker-NavButton__gYhRh:hover {\n opacity: 1;\n border-radius: 50%;\n background-color: #e6e5ff;\n}\n\n.datepicker_DayPicker-NavButton--prev__YQNOk {\n background-image: url(\"./icons/chevron-left.svg\");\n margin-left: 16px;\n}\n\n.datepicker_DayPicker-NavButton--next__Zmber {\n background-image: url(\"./icons/chevron-right.svg\");\n margin-right: 16px;\n}\n\n.datepicker_DayPicker-Months__1HWtD {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin-top: 14px;\n}\n\n.datepicker_DayPicker-Month__2zQx4 {\n display: table;\n margin: 0;\n border-spacing: 0;\n border-collapse: collapse;\n user-select: none;\n font: 16px;\n}\n\n.datepicker_DayPicker-Caption__2fe7G {\n margin: 0 0 24px 0;\n padding: unset;\n text-align: center;\n}\n\n.datepicker_DayPicker-Weekdays__3xfTx {\n display: table-header-group;\n}\n\n.datepicker_DayPicker-WeekdaysRow__1Tq3c {\n display: table-row;\n}\n\n.datepicker_DayPicker-Weekday__2Mtjv {\n display: table-cell;\n padding: 0.5em;\n color: #8b9898;\n text-align: center;\n font-size: 0.875em;\n}\n\n.datepicker_DayPicker-Weekday__2Mtjv abbr[title] {\n border-bottom: none;\n text-decoration: none;\n}\n\n.datepicker_DayPicker-Body__1nLLj {\n display: table-row-group;\n}\n\n.datepicker_DayPicker-Week__3pr46 {\n display: table-row;\n}\n\n.datepicker_DayPicker-Day__3P_ZQ {\n display: table-cell;\n padding: 0.5em;\n border-radius: 50%;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n font: normal 16px Lato;\n}\n\n.datepicker_DayPicker-WeekNumber__uW3oy {\n display: table-cell;\n padding: 0.5em;\n min-width: 1em;\n border-right: 1px solid #eaecec;\n color: #8b9898;\n vertical-align: middle;\n text-align: right;\n font-size: 0.75em;\n cursor: pointer;\n}\n\n.datepicker_DayPicker--interactionDisabled__2DFt- .datepicker_DayPicker-Day__3P_ZQ {\n cursor: default;\n}\n\n.datepicker_DayPicker-Footer__2xtuF {\n padding-top: 0.5em;\n}\n\n.datepicker_DayPicker-TodayButton__wac7H {\n border: none;\n background-color: transparent;\n background-image: none;\n box-shadow: none;\n color: #4a90e2;\n font-size: 0.875em;\n cursor: pointer;\n}\n\n.datepicker_DayPicker-Day--outside__3jJk8 {\n color: #d2d2d8;\n cursor: pointer;\n}\n.datepicker_DayPicker-Day--outside__3jJk8:hover {\n background: #e6e5ff;\n}\n\n.datepicker_DayPicker-Day--disabled__DzYSi {\n color: #d2d2d8;\n background-color: transparent;\n pointer-events: none;\n}";
|
|
2181
|
+
styleInject(css_248z$r);
|
|
2182
2182
|
|
|
2183
2183
|
var calendarIcon = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%204.46118H5C3.89543%204.46118%203%205.35661%203%206.46118V20.4612C3%2021.5658%203.89543%2022.4612%205%2022.4612H19C20.1046%2022.4612%2021%2021.5658%2021%2020.4612V6.46118C21%205.35661%2020.1046%204.46118%2019%204.46118Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%202.46118V6.46118%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%202.46118V6.46118%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010.4612H21%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
2184
2184
|
|
|
@@ -2277,20 +2277,21 @@ var DateSelector = function (_a) {
|
|
|
2277
2277
|
else {
|
|
2278
2278
|
setDate(newValue);
|
|
2279
2279
|
}
|
|
2280
|
+
setOpenCalendar(false);
|
|
2280
2281
|
};
|
|
2281
|
-
return (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
2282
|
+
return (jsxRuntime.jsxs("div", __assign({ className: styles$q.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$q['date-selector-container'] }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$q['row-container'] }, { children: [jsxRuntime.jsxs("select", __assign({ "data-cy": "date-selector-day", className: "p-select " + styles$q['day-select'], id: "day", name: "day", required: true, value: (_b = date.day) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
|
2282
2283
|
handleOnChange('day', parseInt(e.target.value, 10));
|
|
2283
2284
|
} }, { children: [jsxRuntime.jsx("option", __assign({ value: "", disabled: true }, { children: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.day) || 'Day' }), void 0),
|
|
2284
2285
|
availableDays.map(function (day) { return (jsxRuntime.jsx("option", __assign({ value: day }, { children: day }), day)); })] }), void 0),
|
|
2285
|
-
jsxRuntime.jsxs("select", __assign({ "data-cy": "date-selector-month", className: "p-select " + styles$
|
|
2286
|
+
jsxRuntime.jsxs("select", __assign({ "data-cy": "date-selector-month", className: "p-select " + styles$q['month-select'], id: "month", name: "month", required: true, value: (_c = date.month) !== null && _c !== void 0 ? _c : '', onChange: function (e) {
|
|
2286
2287
|
handleOnChange('month', parseInt(e.target.value, 10));
|
|
2287
2288
|
} }, { children: [jsxRuntime.jsx("option", __assign({ value: "", disabled: true }, { children: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.month) || 'Month' }), void 0),
|
|
2288
2289
|
availableMonths.map(function (month, i) { return (jsxRuntime.jsx("option", __assign({ value: i + 1 }, { children: month }), month)); })] }), void 0)] }), void 0),
|
|
2289
|
-
jsxRuntime.jsxs("select", __assign({ "data-cy": "date-selector-year", className: "p-select " + styles$
|
|
2290
|
+
jsxRuntime.jsxs("select", __assign({ "data-cy": "date-selector-year", className: "p-select " + styles$q['year-select'], id: "year", name: "year", required: true, value: (_d = date.year) !== null && _d !== void 0 ? _d : '', onChange: function (e) {
|
|
2290
2291
|
handleOnChange('year', parseInt(e.target.value, 10));
|
|
2291
2292
|
} }, { children: [jsxRuntime.jsx("option", __assign({ value: "", disabled: true }, { children: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.year) || 'Year' }), void 0),
|
|
2292
2293
|
availableYears.map(function (year) { return (jsxRuntime.jsx("option", __assign({ value: year }, { children: year }), year)); })] }), void 0)] }), void 0),
|
|
2293
|
-
displayCalendar && (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
2294
|
+
displayCalendar && (jsxRuntime.jsxs("div", __assign({ className: styles$q['date-calendar-container'] }, { children: [jsxRuntime.jsx("img", { className: "c-pointer", src: calendarIcon, alt: "calendar", onClick: function () { return setOpenCalendar(!openCalendar); } }, void 0),
|
|
2294
2295
|
openCalendar && (jsxRuntime.jsx(DayPicker, { month: selectedDateInDateType, showOutsideDays: true, fromMonth: dateCalendarFromMonth, toMonth: dateCalendarToMonth, selectedDays: selectedDateInDateType, onDayClick: function (date) {
|
|
2295
2296
|
if (dayjs(date).isAfter(dateCalendarFromMonth) ||
|
|
2296
2297
|
dayjs(date).isBefore(dateCalendarToMonth)) {
|
|
@@ -2798,9 +2799,9 @@ class SignaturePad {
|
|
|
2798
2799
|
}
|
|
2799
2800
|
}
|
|
2800
2801
|
|
|
2801
|
-
var css_248z$
|
|
2802
|
-
var styles$
|
|
2803
|
-
styleInject(css_248z$
|
|
2802
|
+
var css_248z$q = ".style-module_container__1VolG {\n position: relative;\n background-color: var(--ds-grey-200);\n border-radius: 8px;\n height: 272px;\n}\n\n.style-module_canvas__1Q440 {\n width: 100%;\n height: 100%;\n}\n\n.style-module_separator__Fdmnn {\n position: absolute;\n height: 2px;\n right: 112px;\n left: 72px;\n bottom: 32px;\n background-color: var(--ds-grey-400);\n border-radius: 1px;\n}\n\n.style-module_reset__1ePiM {\n display: flex;\n position: absolute;\n right: 16px;\n bottom: 32px;\n color: var(--ds-primary-500);\n cursor: pointer;\n border: none;\n text-decoration: none;\n font-size: 16px;\n line-height: 24px;\n background-color: transparent;\n}\n.style-module_reset__1ePiM:hover {\n color: var(--ds-primary-700);\n}\n.style-module_reset__1ePiM:before {\n content: \"\";\n display: inline-block;\n height: 24px;\n width: 24px;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: currentColor;\n -webkit-mask-repeat: no-repeat;\n -webkit-mask-position: center;\n -webkit-background-color: currentColor;\n margin-right: 4px;\n}\n.style-module_reset__1ePiM[disabled] {\n color: var(--ds-grey-500);\n}\n\n.style-module_sign__35Gp2 {\n position: absolute;\n bottom: 32px;\n left: 16px;\n height: 24px;\n width: 24px;\n mask-size: 24px 24px;\n mask-repeat: no-repeat;\n mask-position: center;\n -webkit-mask-size: 24px 24px;\n -webkit-mask-repeat: no-repeat;\n -webkit-mask-position: center;\n background-color: var(--ds-grey-500);\n}";
|
|
2803
|
+
var styles$p = {"container":"style-module_container__1VolG","canvas":"style-module_canvas__1Q440","separator":"style-module_separator__Fdmnn","reset":"style-module_reset__1ePiM","sign":"style-module_sign__35Gp2"};
|
|
2804
|
+
styleInject(css_248z$q);
|
|
2804
2805
|
|
|
2805
2806
|
var sign = "data:image/svg+xml,%3Csvg%20width%3D%2280%22%20height%3D%2280%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.7%203.70001C13.3%204.00001%2013.5%205.10001%2014.1%206.20001C14.7%207.30001%2014.9%209.20001%2014.6%2010.5C14.1%2012.3%2015.3%2014.4%2019.3%2019.7C22.2%2023.4%2025.6%2028%2026.9%2029.8L29.2%2033L23%2039.7C19.7%2043.4%2017.1%2046.9%2017.4%2047.6C17.7%2048.3%2017.2%2049.4%2016.4%2050C14.8%2051.4%2014.5%2054%2016.1%2054C17.5%2054%2023.6%2049.5%2029%2044.4L33.5%2040.1L41%2051.3C49.2%2063.6%2053.7%2069%2055.8%2069C56.6%2069%2056.8%2068.5%2056.4%2067.7C56%2067.1%2057.8%2068.9%2060.5%2071.8C63.1%2074.7%2065.5%2076.9%2065.7%2076.6C65.9%2076.4%2065.2%2074.4%2064.1%2072.1C62.9%2069.9%2062%2067.2%2062%2066.2C62%2063.3%2054.5%2047.6%2048.9%2039C46.2%2034.8%2044%2031%2044%2030.6C44%2030.2%2046.2%2027.3%2048.9%2024.2C54.3%2017.9%2059%2011.2%2059%209.80001C59%209.30001%2057.7%209.10001%2056%209.50001C54.2%209.90001%2050.5%2012.7%2046.4%2017.1C42.7%2020.9%2039.4%2024%2039.1%2024C38.8%2024%2036.3%2020.7%2033.6%2016.8C30.9%2012.9%2027.9%209.50001%2027%209.30001C26%209.00001%2024.3%207.60001%2023.2%206.10001C21.7%204.10001%2020.3%203.30001%2017.7%203.20001C15.8%203.10001%2014%203.30001%2013.7%203.70001Z%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fsvg%3E";
|
|
2806
2807
|
|
|
@@ -2829,15 +2830,15 @@ var Signature = /** @class */ (function (_super) {
|
|
|
2829
2830
|
Signature.prototype.render = function () {
|
|
2830
2831
|
var hasContent = this.state.hasContent;
|
|
2831
2832
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: {
|
|
2832
|
-
__html: "." + styles$
|
|
2833
|
+
__html: "." + styles$p.reset + "::before { \n -webkit-mask-image: url(\"" + reset + "\");\n mask-image: url(\"" + reset + "\");\n }",
|
|
2833
2834
|
} }, void 0),
|
|
2834
|
-
jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
2835
|
-
jsxRuntime.jsx("div", { className: styles$
|
|
2836
|
-
jsxRuntime.jsx("div", { className: styles$
|
|
2835
|
+
jsxRuntime.jsxs("div", __assign({ className: styles$p.container }, { children: [jsxRuntime.jsx("canvas", { className: styles$p.canvas, ref: this.canvasRef }, void 0),
|
|
2836
|
+
jsxRuntime.jsx("div", { className: styles$p.separator }, void 0),
|
|
2837
|
+
jsxRuntime.jsx("div", { className: styles$p.sign, style: {
|
|
2837
2838
|
WebkitMaskImage: "url(\"" + sign + "\")",
|
|
2838
2839
|
maskImage: "url(\"" + sign + "\")",
|
|
2839
2840
|
} }, void 0),
|
|
2840
|
-
jsxRuntime.jsx("button", __assign({ className: styles$
|
|
2841
|
+
jsxRuntime.jsx("button", __assign({ className: styles$p.reset, onClick: this.clear, disabled: !hasContent }, { children: "Reset" }), void 0)] }), void 0)] }, void 0));
|
|
2841
2842
|
};
|
|
2842
2843
|
Signature.prototype.notifyOnChange = function () {
|
|
2843
2844
|
var onChange = this.props.onChange;
|
|
@@ -5150,19 +5151,19 @@ module.exports = isEqual;
|
|
|
5150
5151
|
|
|
5151
5152
|
var isEqual = lodash_isequal.exports;
|
|
5152
5153
|
|
|
5153
|
-
var css_248z$
|
|
5154
|
-
var styles$
|
|
5155
|
-
styleInject(css_248z$
|
|
5154
|
+
var css_248z$p = ".style-module_container__2L4SP {\n position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--ds-grey-500);\n transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n color: var(--ds-grey-600);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n top: 7px;\n left: 16px;\n transform: translateY(0);\n font-size: 10px;\n line-height: 12px;\n opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n top: 28px;\n}\n\n.style-module_input__1eJO5 {\n box-sizing: border-box;\n padding-top: 9px;\n font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n padding-left: 32px !important;\n}\n\n.style-module_placeholder__1U2z0 {\n position: absolute;\n pointer-events: none;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.3s ease all;\n color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n margin-top: 4px;\n}";
|
|
5155
|
+
var styles$o = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","error":"style-module_error__167Zc"};
|
|
5156
|
+
styleInject(css_248z$p);
|
|
5156
5157
|
|
|
5157
5158
|
var Input = require$$0__default['default'].forwardRef(function (_a, ref) {
|
|
5158
5159
|
var _b, _c, _d, _e, _f;
|
|
5159
5160
|
var className = _a.className, placeholder = _a.placeholder, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, props = __rest$1(_a, ["className", "placeholder", "prefix", "error", "disabled"]);
|
|
5160
|
-
return (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
5161
|
-
? styles$
|
|
5162
|
-
: styles$
|
|
5163
|
-
prefix && (jsxRuntime.jsx("span", __assign({ className: classNames(styles$
|
|
5164
|
-
jsxRuntime.jsx("span", __assign({ className: classNames(styles$
|
|
5165
|
-
error && (jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-red-500 w100 " + styles$
|
|
5161
|
+
return (jsxRuntime.jsxs("div", __assign({ className: styles$o.container + " " + (className !== null && className !== void 0 ? className : '') }, { children: [jsxRuntime.jsx("input", __assign({ "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', placeholder && placeholder.length > 0
|
|
5162
|
+
? styles$o.input
|
|
5163
|
+
: styles$o['input--no-placeholder'], (_b = {}, _b[styles$o['input--with-prefix']] = prefix, _b)), placeholder: " ", disabled: disabled }, props), void 0),
|
|
5164
|
+
prefix && (jsxRuntime.jsx("span", __assign({ className: classNames(styles$o.prefix, (_c = {}, _c[styles$o['prefix--with-error']] = error, _c), (_d = {}, _d[styles$o['prefix--disabled']] = disabled, _d)) }, { children: prefix }), void 0)),
|
|
5165
|
+
jsxRuntime.jsx("span", __assign({ className: classNames(styles$o.placeholder, (_e = {}, _e[styles$o['placeholder--with-prefix']] = prefix, _e), (_f = {}, _f[styles$o['placeholder--with-error']] = error, _f)) }, { children: placeholder }), void 0),
|
|
5166
|
+
error && (jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-red-500 w100 " + styles$o.error }, { children: error }), void 0))] }), void 0));
|
|
5166
5167
|
});
|
|
5167
5168
|
|
|
5168
5169
|
var z7=Object.defineProperty;var V=(t,a)=>{for(var z in a)z7(t,z,{get:a[z],enumerable:!0});};var s=["AF","AL","DZ","AD","AS","AO","AI","AQ","AG","AR","AM","AW","AU","AT","AZ","BS","BH","BD","BB","BY","BE","BZ","BJ","BM","BT","BO","BA","BW","BV","BR","IO","BN","BG","BF","BI","KH","CM","CA","CV","KY","CF","TD","CL","CN","CX","CC","CO","KM","CG","CD","CK","CR","CI","HR","CU","CY","CZ","DK","DJ","DM","DO","EC","EG","SV","GQ","ER","EE","ET","FK","FO","FJ","FI","FR","GF","PF","TF","GA","GM","GE","DE","GH","GI","GR","GL","GD","GP","GU","GT","GN","GW","GY","HT","HM","VA","HN","HK","HU","IS","IN","ID","IR","IQ","IE","IL","IT","JM","JP","JO","KZ","KE","KI","KP","KR","KW","KG","LA","LV","LB","LS","LR","LY","LI","LT","LU","MO","MK","MG","MW","MY","MV","ML","MT","MH","MQ","MR","MU","YT","MX","FM","MD","MC","MN","MS","ME","MA","MZ","MM","NA","NR","NP","NL","NC","NZ","NI","NE","NG","NU","NF","MP","NO","OM","PK","PW","PS","PA","PG","PY","PE","PH","PN","PL","PT","PR","QA","RE","RO","RU","RW","SH","KN","LC","PM","VC","WS","SM","ST","SA","SN","RS","SC","SL","SG","SK","SI","SB","SO","ZA","GS","ES","LK","SD","SR","SJ","SZ","SE","CH","SY","TW","TJ","TZ","TH","TL","TG","TK","TO","TT","TN","TR","TM","TC","TV","UG","UA","AE","GB","US","UM","UY","UZ","VU","VE","VN","VG","VI","WF","EH","YE","ZM","ZW","AX","BQ","CW","GG","IM","JE","BL","MF","SX","XK","SS"];var r$2={};V(r$2,{countries:()=>L,default:()=>p7,locale:()=>y$2});var y$2="en",L={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AQ:"Antarctica",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CX:"Christmas Island",CC:"Cocos (Keeling) Islands",CO:"Colombia",KM:"Comoros",CG:"Republic of the Congo",CD:"Democratic Republic of the Congo",CK:"Cook Islands",CR:"Costa Rica",CI:"Cote D'Ivoire",HR:"Croatia",CU:"Cuba",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran",IQ:"Iraq",IE:"Ireland",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"North Korea",KR:"South Korea",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MK:"North Macedonia",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestine",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"Reunion",RO:"Romania",RU:"Russia",RW:"Rwanda",SH:"Saint Helena",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SJ:"Svalbard and Jan Mayen",SZ:"Eswatini",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan",TJ:"Tajikistan",TZ:"Tanzania",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela",VN:"Vietnam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe",AX:"\xC5land Islands",BQ:"Bonaire, Sint Eustatius and Saba",CW:"Cura\xE7ao",GG:"Guernsey",IM:"Isle of Man",JE:"Jersey",ME:"Montenegro",BL:"Saint Barth\xE9lemy",MF:"Saint Martin (French part)",RS:"Serbia",SX:"Sint Maarten (Dutch part)",SS:"South Sudan",XK:"Kosovo"},p7={locale:y$2,countries:L};var m$3={};V(m$3,{countries:()=>S,default:()=>M7,locale:()=>B});var B="de",S={AF:"Afghanistan",EG:"\xC4gypten",AX:"\xC5land",AL:"Albanien",DZ:"Algerien",AS:"Amerikanisch-Samoa",VI:"Amerikanische Jungferninseln",AD:"Andorra",AO:"Angola",AI:"Anguilla",AQ:"Antarktis",AG:"Antigua und Barbuda",GQ:"\xC4quatorialguinea",AR:"Argentinien",AM:"Armenien",AW:"Aruba",AZ:"Aserbaidschan",ET:"\xC4thiopien",AU:"Australien",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesch",BB:"Barbados",BY:"Belarus",BE:"Belgien",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivien",BQ:"Bonaire",BA:"Bosnien und Herzegowina",BW:"Botswana",BV:"Bouvetinsel",BR:"Brasilien",VG:"Britische Jungferninseln",IO:"Britisches Territorium im Indischen Ozean",BN:"Brunei Darussalam",BG:"Bulgarien",BF:"Burkina Faso",BI:"Burundi",CL:"Chile",CN:"China",CK:"Cookinseln",CR:"Costa Rica",CI:"Elfenbeink\xFCste",CW:"Cura\xE7ao",DK:"D\xE4nemark",DE:"Deutschland",DM:"Dominica",DO:"Dominikanische Republik",DJ:"Dschibuti",EC:"Ecuador",SV:"El Salvador",ER:"Eritrea",EE:"Estland",FK:"Falklandinseln",FO:"F\xE4r\xF6er",FJ:"Fidschi",FI:"Finnland",FR:"Frankreich",GF:"Franz\xF6sisch-Guayana",PF:"Franz\xF6sisch-Polynesien",TF:"Franz\xF6sische S\xFCd- und Antarktisgebiete",GA:"Gabun",GM:"Gambia",GE:"Georgien",GH:"Ghana",GI:"Gibraltar",GD:"Grenada",GR:"Griechenland",GL:"Gr\xF6nland",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard und McDonaldinseln",HN:"Honduras",HK:"Hongkong",IN:"Indien",ID:"Indonesien",IM:"Insel Man",IQ:"Irak",IR:"Iran",IE:"Irland",IS:"Island",IL:"Israel",IT:"Italien",JM:"Jamaika",JP:"Japan",YE:"Jemen",JE:"Jersey",JO:"Jordanien",KY:"Kaimaninseln",KH:"Kambodscha",CM:"Kamerun",CA:"Kanada",CV:"Kap Verde",KZ:"Kasachstan",QA:"Katar",KE:"Kenia",KG:"Kirgisistan",KI:"Kiribati",CC:"Kokosinseln",CO:"Kolumbien",KM:"Komoren",CD:"Kongo",KP:"Nordkorea",KR:"S\xFCdkorea",HR:"Kroatien",CU:"Kuba",KW:"Kuwait",LA:"Laos",LS:"Lesotho",LV:"Lettland",LB:"Libanon",LR:"Liberia",LY:"Libyen",LI:"Liechtenstein",LT:"Litauen",LU:"Luxemburg",MO:"Macao",MG:"Madagaskar",MW:"Malawi",MY:"Malaysia",MV:"Malediven",ML:"Mali",MT:"Malta",MA:"Marokko",MH:"Marshallinseln",MQ:"Martinique",MR:"Mauretanien",MU:"Mauritius",YT:"Mayotte",MX:"Mexiko",FM:"Mikronesien",MD:"Moldawien",MC:"Monaco",MN:"Mongolei",ME:"Montenegro",MS:"Montserrat",MZ:"Mosambik",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NC:"Neukaledonien",NZ:"Neuseeland",NI:"Nicaragua",NL:"Niederlande",NE:"Niger",NG:"Nigeria",NU:"Niue",MK:"Nordmazedonien",MP:"N\xF6rdliche Marianen",NF:"Norfolkinsel",NO:"Norwegen",OM:"Oman",AT:"\xD6sterreich",TL:"Osttimor",PK:"Pakistan",PS:"Staat Pal\xE4stina",PW:"Palau",PA:"Panama",PG:"Papua-Neuguinea",PY:"Paraguay",PE:"Peru",PH:"Philippinen",PN:"Pitcairninseln",PL:"Polen",PT:"Portugal",PR:"Puerto Rico",TW:"Taiwan",CG:"Republik Kongo",RE:"R\xE9union",RW:"Ruanda",RO:"Rum\xE4nien",RU:"Russische F\xF6deration",BL:"Saint-Barth\xE9lemy",MF:"Saint-Martin",SB:"Salomonen",ZM:"Sambia",WS:"Samoa",SM:"San Marino",ST:"S\xE3o Tom\xE9 und Pr\xEDncipe",SA:"Saudi-Arabien",SE:"Schweden",CH:"Schweiz",SN:"Senegal",RS:"Serbien",SC:"Seychellen",SL:"Sierra Leone",ZW:"Simbabwe",SG:"Singapur",SX:"Sint Maarten",SK:"Slowakei",SI:"Slowenien",SO:"Somalia",ES:"Spanien",LK:"Sri Lanka",SH:"St. Helena",KN:"St. Kitts und Nevis",LC:"St. Lucia",PM:"Saint-Pierre und Miquelon",VC:"St. Vincent und die Grenadinen",ZA:"S\xFCdafrika",SD:"Sudan",GS:"S\xFCdgeorgien und die S\xFCdlichen Sandwichinseln",SS:"S\xFCdsudan",SR:"Suriname",SJ:"Svalbard und Jan Mayen",SZ:"Eswatini",SY:"Syrien, Arabische Republik",TJ:"Tadschikistan",TZ:"Tansania, Vereinigte Republik",TH:"Thailand",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad und Tobago",TD:"Tschad",CZ:"Tschechische Republik",TN:"Tunesien",TR:"T\xFCrkei",TM:"Turkmenistan",TC:"Turks- und Caicosinseln",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",HU:"Ungarn",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Usbekistan",VU:"Vanuatu",VA:"Vatikanstadt",VE:"Venezuela",AE:"Vereinigte Arabische Emirate",US:"Vereinigte Staaten",GB:"Vereinigtes K\xF6nigreich",VN:"Vietnam",WF:"Wallis und Futuna",CX:"Weihnachtsinsel",EH:"Westsahara",CF:"Zentralafrikanische Republik",CY:"Zypern",XK:"Kosovo"},M7={locale:B,countries:S};var c7={en:r$2,de:m$3};function $5(t,a="en"){return c7[a].countries[t]}var f7=(t="en")=>s.map(a=>({name:c7[t].countries[a],code:a}));f7();
|
|
@@ -5201,9 +5202,9 @@ var geocoderAddressComponentToPartialAddress = function (input) {
|
|
|
5201
5202
|
return toReturn;
|
|
5202
5203
|
};
|
|
5203
5204
|
|
|
5204
|
-
var css_248z$
|
|
5205
|
-
var styles$
|
|
5206
|
-
styleInject(css_248z$
|
|
5205
|
+
var css_248z$o = "@media (max-width: 34rem) {\n .style-module_input-line__34TKK {\n flex-direction: column;\n }\n .style-module_input-line__34TKK > *:not(:first-child) {\n margin-top: 16px;\n }\n}\n\n@media (max-width: 34rem) {\n .style-module_house-number-input__1sDS5 {\n max-width: none !important;\n }\n}\n\n.style-module_map-container__2rzjU {\n position: relative;\n height: 112px;\n margin-bottom: 16px;\n border-radius: 8px;\n transition: 0.3s height ease-in-out, 0.3s margin-top ease-in-out;\n overflow: hidden;\n}\n.style-module_map-container--hidden__2AnYR {\n height: 0;\n margin: 0;\n}\n\n@keyframes style-module_appear-in__3HZHT {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.style-module_appear-in-animate__1bJyO {\n animation-name: style-module_appear-in__3HZHT;\n animation-duration: 0.3s;\n animation-fill-mode: both;\n}\n\n.style-module_loading-spinner__3-nri {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute !important;\n background-color: rgba(142, 140, 238, 0.25);\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n z-index: 100;\n animation-name: style-module_appear-in__3HZHT;\n animation-duration: 0.3s;\n animation-fill-mode: both;\n}\n\n.style-module_map__1Vtps {\n width: 100%;\n height: 100%;\n}";
|
|
5206
|
+
var styles$n = {"input-line":"style-module_input-line__34TKK","house-number-input":"style-module_house-number-input__1sDS5","map-container":"style-module_map-container__2rzjU","map-container--hidden":"style-module_map-container--hidden__2AnYR","appear-in-animate":"style-module_appear-in-animate__1bJyO","appear-in":"style-module_appear-in__3HZHT","loading-spinner":"style-module_loading-spinner__3-nri","map":"style-module_map__1Vtps"};
|
|
5207
|
+
styleInject(css_248z$o);
|
|
5207
5208
|
|
|
5208
5209
|
var GERMANY_LAT_LNG = { lat: 51.54317, lng: 10.3181503 };
|
|
5209
5210
|
var GERMANY_ALPHA_CODE = 'DE';
|
|
@@ -5326,17 +5327,17 @@ var AutoCompleteAddress = function (_a) {
|
|
|
5326
5327
|
var handleEnterAddressManually = function () {
|
|
5327
5328
|
setManualAddressEntry(true);
|
|
5328
5329
|
};
|
|
5329
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: classNames("wmx8 bg-grey-500 " + styles$
|
|
5330
|
-
_b[styles$
|
|
5331
|
-
_b)) }, { children: [jsxRuntime.jsx("div", { className: styles$
|
|
5332
|
-
isLoading && (jsxRuntime.jsx("div", __assign({ className: styles$
|
|
5330
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: classNames("wmx8 bg-grey-500 " + styles$n['map-container'], (_b = {},
|
|
5331
|
+
_b[styles$n['map-container--hidden']] = place === null,
|
|
5332
|
+
_b)) }, { children: [jsxRuntime.jsx("div", { className: styles$n.map, id: "map" }, void 0),
|
|
5333
|
+
isLoading && (jsxRuntime.jsx("div", __assign({ className: styles$n['loading-spinner'] }, { children: jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m" }, void 0) }), void 0))] }), void 0),
|
|
5333
5334
|
jsxRuntime.jsx("div", __assign({ className: "wmx8" }, { children: manualAddressEntry === false ? (jsxRuntime.jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsxRuntime.jsx(Input, { className: "w100", id: "autocomplete", "data-cy": "autocomplete", type: "text", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.manualAddressEntry) || 'Search for address', ref: autocompleteElement }, void 0),
|
|
5334
|
-
hasLoadedGoogleAPI === false && (jsxRuntime.jsx("div", __assign({ className: styles$
|
|
5335
|
+
hasLoadedGoogleAPI === false && (jsxRuntime.jsx("div", __assign({ className: styles$n['loading-spinner'] }, { children: jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m" }, void 0) }), void 0))] }), void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$n['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.street) || 'Street', value: (address === null || address === void 0 ? void 0 : address.street) || '', onChange: function (e) {
|
|
5335
5336
|
var newAddress = __assign(__assign({}, address), { street: e.target.value, country: GERMANY_ALPHA_CODE });
|
|
5336
5337
|
setAddress(newAddress);
|
|
5337
5338
|
debouncedSetPlace(newAddress);
|
|
5338
5339
|
} }, void 0),
|
|
5339
|
-
jsxRuntime.jsx(Input, { className: "wmx2 " + styles$
|
|
5340
|
+
jsxRuntime.jsx(Input, { className: "wmx2 " + styles$n['house-number-input'], "data-cy": "autocomplete-house-number", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.houseNumber) || 'House Number', value: (address === null || address === void 0 ? void 0 : address.houseNumber) || '', onChange: function (e) {
|
|
5340
5341
|
var newAddress = __assign(__assign({}, address), { houseNumber: e.target.value, country: GERMANY_ALPHA_CODE });
|
|
5341
5342
|
setAddress(newAddress);
|
|
5342
5343
|
debouncedSetPlace(newAddress);
|
|
@@ -5346,7 +5347,7 @@ var AutoCompleteAddress = function (_a) {
|
|
|
5346
5347
|
var newAddress = __assign(__assign({}, address), { additionalInformation: e.target.value, country: GERMANY_ALPHA_CODE });
|
|
5347
5348
|
setAddress(newAddress);
|
|
5348
5349
|
} }, void 0),
|
|
5349
|
-
jsxRuntime.jsxs("div", __assign({ className: "d-flex mt16 c-gap16 " + styles$
|
|
5350
|
+
jsxRuntime.jsxs("div", __assign({ className: "d-flex mt16 c-gap16 " + styles$n['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-postcode", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.postcode) || 'Postcode', value: (address === null || address === void 0 ? void 0 : address.postcode) || '', onChange: function (e) {
|
|
5350
5351
|
var newAddress = __assign(__assign({}, address), { postcode: e.target.value, country: GERMANY_ALPHA_CODE });
|
|
5351
5352
|
setAddress(newAddress);
|
|
5352
5353
|
debouncedSetPlace(newAddress);
|
|
@@ -8393,9 +8394,9 @@ const AnimateHeight = (_a) => {
|
|
|
8393
8394
|
require$$0__default['default'].createElement("div", { className: contentClassName, style: contentStyle, ref: contentElement }, children)));
|
|
8394
8395
|
};
|
|
8395
8396
|
|
|
8396
|
-
var css_248z$
|
|
8397
|
-
var styles$
|
|
8398
|
-
styleInject(css_248z$
|
|
8397
|
+
var css_248z$n = ".style-module_container__Uyltc {\n background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n border: 1px dashed var(--ds-primary-500);\n padding: 32px 0;\n background-color: white;\n transition: all 0.6s ease-in-out;\n}\n\n.style-module_img__11JI8 {\n vertical-align: middle;\n margin-right: 8px;\n height: 18px;\n}\n\n.style-module_textInline__2F21z {\n display: inline-flex;\n}\n\n.style-module_dropzoneContainer__yZoGP:focus {\n outline: none;\n}\n\n.style-module_dropzoneContainer__yZoGP:hover {\n background-color: var(--ds-primary-100);\n transition: 0.5s ease;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n pointer-events: none;\n opacity: 0.4;\n}";
|
|
8398
|
+
var styles$m = {"container":"style-module_container__Uyltc","dropzoneContainer":"style-module_dropzoneContainer__yZoGP","img":"style-module_img__11JI8","textInline":"style-module_textInline__2F21z","dropzoneContainerDisabled":"style-module_dropzoneContainerDisabled__1X3gP"};
|
|
8399
|
+
styleInject(css_248z$n);
|
|
8399
8400
|
|
|
8400
8401
|
var uploadSvg = "data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20viewBox%3D%220%200%2070%2070%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M25.589%2052.324H16.6368C12.2734%2052.324%202.91699%2048.3383%202.91699%2038.0351C2.91699%2026.9493%2012.2734%2023.2325%2016.9623%2023.2325C17.6018%2017.8902%2021.1291%207.97805%2034.1238%207.29132C46.6242%207.29132%2052.2035%2018.5714%2051.2854%2026.9756C56.175%2026.6729%2067.0837%2028.8787%2067.0837%2039.8558C67.0837%2049.1926%2057.3044%2052.7417%2052.4147%2052.324H44.7121%22%20stroke%3D%22%238E8CEE%22%20stroke-width%3D%223.08333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M35%2063.2981V32.646%22%20stroke%3D%22%238E8CEE%22%20stroke-width%3D%223.08333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M27.3428%2040.3045L35.0013%2032.646L42.6599%2040.3045%22%20stroke%3D%22%238E8CEE%22%20stroke-width%3D%223.08333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
8401
8402
|
|
|
@@ -8466,9 +8467,9 @@ var icons = {
|
|
|
8466
8467
|
trashIcon: trashSvg,
|
|
8467
8468
|
};
|
|
8468
8469
|
|
|
8469
|
-
var css_248z$
|
|
8470
|
-
var styles$
|
|
8471
|
-
styleInject(css_248z$
|
|
8470
|
+
var css_248z$m = ".style-module_upload-file-cell__3nv5i {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n border: 1px solid #d2d2d8;\n border-radius: 8px;\n background-color: white;\n animation: style-module_appear-down__14rCV 0.6s;\n animation-fill-mode: both;\n animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n border-color: #e55454;\n background-color: rgba(229, 84, 84, 0.2);\n}\n\n.style-module_cell-left-section__3Iv8c {\n display: flex;\n align-items: center;\n}\n\n.style-module_main-icon__335_Y {\n width: 32px;\n height: 40px;\n margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n overflow-wrap: anywhere;\n}\n\n.style-module_progress-bar-container__2JCBO {\n position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n background-color: #f5f5fa;\n border-radius: 10px;\n height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n background-color: #8e8cee;\n border-radius: 10px;\n height: 4px;\n position: absolute;\n bottom: 0;\n transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n display: flex;\n justify-content: flex-end;\n min-width: 32px;\n margin-left: 16px;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n min-width: 64px;\n}\n\n.style-module_view-icon__3UenG,\n.style-module_remove-icon__2FWBQ {\n cursor: pointer;\n}\n\n.style-module_remove-icon__2FWBQ {\n margin-left: 16px;\n}\n\n.style-module_disabled__s-DR1 {\n pointer-events: none;\n cursor: default;\n}\n\n.style-module_spinner__28Vab {\n color: #8e8cee;\n animation: style-module_appear-down__14rCV 0.6s;\n animation-fill-mode: both;\n animation-delay: 0.6s;\n}\n\n@keyframes style-module_appear-down__14rCV {\n from {\n transform: translateY(-10px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}";
|
|
8471
|
+
var styles$l = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","appear-down":"style-module_appear-down__14rCV","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","view-icon":"style-module_view-icon__3UenG","remove-icon":"style-module_remove-icon__2FWBQ","disabled":"style-module_disabled__s-DR1","spinner":"style-module_spinner__28Vab"};
|
|
8472
|
+
styleInject(css_248z$m);
|
|
8472
8473
|
|
|
8473
8474
|
var getUploadingIcon = function (type) {
|
|
8474
8475
|
switch (type) {
|
|
@@ -8528,17 +8529,17 @@ var UploadFileCell = (function (_a) {
|
|
|
8528
8529
|
COMPLETE: name,
|
|
8529
8530
|
ERROR: error !== null && error !== void 0 ? error : 'Something went wrong. Try uploading again.',
|
|
8530
8531
|
};
|
|
8531
|
-
return (jsxRuntime.jsxs("div", __assign({ className: classNames("mt8 " + styles$
|
|
8532
|
-
_b[styles$
|
|
8533
|
-
_b)) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "w100 " + styles$
|
|
8534
|
-
jsxRuntime.jsxs("div", __assign({ className: "w100" }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-p wmx5 " + styles$
|
|
8535
|
-
uploadStatus === 'UPLOADING' && (jsxRuntime.jsxs("div", __assign({ className: "mt8 w100 " + styles$
|
|
8536
|
-
jsxRuntime.jsx("div", { className: "" + styles$
|
|
8537
|
-
jsxRuntime.jsx("div", __assign({ className: classNames(styles$
|
|
8538
|
-
_c[styles$
|
|
8539
|
-
_c)) }, { children: uploadStatus === 'UPLOADING' ? (jsxRuntime.jsx("div", { className: "p-spinner p-spinner__m " + styles$
|
|
8540
|
-
jsxRuntime.jsx("img", { className: classNames(styles$
|
|
8541
|
-
_d[styles$
|
|
8532
|
+
return (jsxRuntime.jsxs("div", __assign({ className: classNames("mt8 " + styles$l['upload-file-cell'], (_b = {},
|
|
8533
|
+
_b[styles$l['upload-file-cell-error']] = uploadStatus === 'ERROR',
|
|
8534
|
+
_b)) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "w100 " + styles$l['cell-left-section'] }, { children: [jsxRuntime.jsx("img", { className: styles$l['main-icon'], src: mapFileIcon[uploadStatus], alt: "" }, void 0),
|
|
8535
|
+
jsxRuntime.jsxs("div", __assign({ className: "w100" }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-p wmx5 " + styles$l['upload-display-text'] }, { children: mapDisplayText[uploadStatus] }), void 0),
|
|
8536
|
+
uploadStatus === 'UPLOADING' && (jsxRuntime.jsxs("div", __assign({ className: "mt8 w100 " + styles$l['progress-bar-container'] }, { children: [jsxRuntime.jsx("div", { className: "" + styles$l['progress-bar'] }, void 0),
|
|
8537
|
+
jsxRuntime.jsx("div", { className: "" + styles$l['progress-bar-filler'], style: { width: progress + "%" } }, void 0)] }), void 0))] }), void 0)] }), void 0),
|
|
8538
|
+
jsxRuntime.jsx("div", __assign({ className: classNames(styles$l['cell-right-section'], (_c = {},
|
|
8539
|
+
_c[styles$l['cell-right-section-complete']] = uploadStatus === 'COMPLETE',
|
|
8540
|
+
_c)) }, { children: uploadStatus === 'UPLOADING' ? (jsxRuntime.jsx("div", { className: "p-spinner p-spinner__m " + styles$l.spinner }, void 0)) : (jsxRuntime.jsxs("div", { children: [uploadStatus === 'COMPLETE' && (jsxRuntime.jsx("a", __assign({ className: styles$l['view-icon'], href: previewUrl, target: "_blank", rel: "noopener noreferrer" }, { children: jsxRuntime.jsx("img", { src: icons.eyeIcon, alt: "preview" }, void 0) }), void 0)),
|
|
8541
|
+
jsxRuntime.jsx("img", { className: classNames(styles$l['remove-icon'], (_d = {},
|
|
8542
|
+
_d[styles$l.disabled] = uploading,
|
|
8542
8543
|
_d)), src: icons.trashIcon, onClick: function () { return onRemoveFile(id); }, alt: "remove" }, void 0)] }, void 0)) }), void 0)] }), void 0));
|
|
8543
8544
|
});
|
|
8544
8545
|
|
|
@@ -8564,11 +8565,11 @@ var index$7 = (function (_a) {
|
|
|
8564
8565
|
onFileSelect(acceptedFiles);
|
|
8565
8566
|
}, [onFileSelect]);
|
|
8566
8567
|
var _f = useDropzone({ onDrop: onDrop, maxFiles: maxFiles }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
|
|
8567
|
-
return (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
8568
|
-
_b[styles$
|
|
8568
|
+
return (jsxRuntime.jsxs("div", __assign({ className: styles$m.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: classNames("w100 ta-center br8 c-pointer " + styles$m.dropzoneContainer, (_b = {},
|
|
8569
|
+
_b[styles$m['dropzoneContainerDisabled']] = uploading,
|
|
8569
8570
|
_b)) }, getRootProps(), { children: [jsxRuntime.jsx("input", __assign({}, getInputProps()), void 0),
|
|
8570
|
-
jsxRuntime.jsx("img", { className: isCondensed ? styles$
|
|
8571
|
-
jsxRuntime.jsx("div", __assign({ className: "p-h4 mt8 " + (isCondensed ? styles$
|
|
8571
|
+
jsxRuntime.jsx("img", { className: isCondensed ? styles$m.img : '', src: icons.uploadIcon, alt: "purple cloud with an arrow" }, void 0),
|
|
8572
|
+
jsxRuntime.jsx("div", __assign({ className: "p-h4 mt8 " + (isCondensed ? styles$m.textInline : '') }, { children: uploading
|
|
8572
8573
|
? 'Please wait while uploading file...'
|
|
8573
8574
|
: 'Choose file or drag & drop' }), void 0),
|
|
8574
8575
|
jsxRuntime.jsx("div", __assign({ className: "p-p--small tc-grey-500" }, { children: "Supports JPEG, PNG, PDF" }), void 0)] }), void 0),
|
|
@@ -8579,9 +8580,9 @@ var index$7 = (function (_a) {
|
|
|
8579
8580
|
}) }), void 0))] }), void 0));
|
|
8580
8581
|
});
|
|
8581
8582
|
|
|
8582
|
-
var css_248z$
|
|
8583
|
-
var styles$
|
|
8584
|
-
styleInject(css_248z$
|
|
8583
|
+
var css_248z$l = ".styles-module_content-container__4wuQ0 {\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
8584
|
+
var styles$k = {"content-container":"styles-module_content-container__4wuQ0"};
|
|
8585
|
+
styleInject(css_248z$l);
|
|
8585
8586
|
|
|
8586
8587
|
var buttonTypeClassNameMap = {
|
|
8587
8588
|
primary: 'p-btn--primary',
|
|
@@ -8593,7 +8594,7 @@ var Button = require$$0__default['default'].forwardRef(function (_a, ref) {
|
|
|
8593
8594
|
var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, buttonTitle = _a.buttonTitle, _c = _a.buttonType, buttonType = _c === void 0 ? 'primary' : _c, leftIcon = _a.leftIcon; _a.type; var props = __rest$1(_a, ["className", "loading", "buttonTitle", "buttonType", "leftIcon", "type"]);
|
|
8594
8595
|
var buttonClassName = buttonTypeClassNameMap[buttonType];
|
|
8595
8596
|
var loadingClassName = loading ? 'p-btn--loading' : '';
|
|
8596
|
-
return (jsxRuntime.jsx("button", __assign({ ref: ref, className: buttonClassName + " " + loadingClassName + " " + (className !== null && className !== void 0 ? className : '') }, props, { children: leftIcon ? (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
8597
|
+
return (jsxRuntime.jsx("button", __assign({ ref: ref, className: buttonClassName + " " + loadingClassName + " " + (className !== null && className !== void 0 ? className : '') }, props, { children: leftIcon ? (jsxRuntime.jsxs("div", __assign({ className: styles$k['content-container'] }, { children: [jsxRuntime.jsx("img", { width: "20px", height: "20px", className: "mr8", src: leftIcon.src, alt: leftIcon.alt }, void 0),
|
|
8597
8598
|
jsxRuntime.jsx("div", { children: buttonTitle }, void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: buttonTitle }, void 0)) }), void 0));
|
|
8598
8599
|
});
|
|
8599
8600
|
|
|
@@ -8601,17 +8602,17 @@ var checkIcon = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%2
|
|
|
8601
8602
|
|
|
8602
8603
|
var downloadIcon = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%2012.5V15.8333C18%2016.2754%2017.8244%2016.6993%2017.5118%2017.0118C17.1993%2017.3244%2016.7754%2017.5%2016.3333%2017.5H4.66667C4.22464%2017.5%203.80072%2017.3244%203.48816%2017.0118C3.17559%2016.6993%203%2016.2754%203%2015.8333V12.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.33325%208.33301L10.4999%2012.4997L14.6666%208.33301%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.5%2012.5V2.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
8603
8604
|
|
|
8604
|
-
var css_248z$
|
|
8605
|
-
var styles$
|
|
8606
|
-
styleInject(css_248z$
|
|
8605
|
+
var css_248z$k = ".style-module_button__mw9kQ {\n height: 48px;\n}\n\n.style-module_chip-complete__3YkB9 {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n border-radius: 8px;\n padding: 8px 16px;\n height: 48px;\n}";
|
|
8606
|
+
var styles$j = {"button":"style-module_button__mw9kQ","chip-complete":"style-module_chip-complete__3YkB9"};
|
|
8607
|
+
styleInject(css_248z$k);
|
|
8607
8608
|
|
|
8608
8609
|
var InitialButton = function (_a) {
|
|
8609
8610
|
var onDownload = _a.onDownload;
|
|
8610
|
-
return (jsxRuntime.jsx(Button, { className: "w100 " + styles$
|
|
8611
|
+
return (jsxRuntime.jsx(Button, { className: "w100 " + styles$j.button, buttonTitle: "Download", leftIcon: { src: downloadIcon, alt: 'download arrow icon' }, onClick: onDownload, "data-cy": "download-documents-button" }, void 0));
|
|
8611
8612
|
};
|
|
8612
8613
|
// TODO: Allow setting loading to true to display text
|
|
8613
|
-
var GeneratingButton = function () { return (jsxRuntime.jsx(Button, { className: "w100 " + styles$
|
|
8614
|
-
var CompletedChip = function () { return (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
8614
|
+
var GeneratingButton = function () { return (jsxRuntime.jsx(Button, { className: "w100 " + styles$j.button, buttonTitle: "Generating", loading: true }, void 0)); };
|
|
8615
|
+
var CompletedChip = function () { return (jsxRuntime.jsxs("div", __assign({ className: styles$j['chip-complete'] }, { children: [jsxRuntime.jsx("img", { src: checkIcon, alt: "grey check" }, void 0),
|
|
8615
8616
|
jsxRuntime.jsx("div", __assign({ className: "p-h4 tc-grey-500 ml8" }, { children: "Download complete" }), void 0)] }), void 0)); };
|
|
8616
8617
|
var DownloadButton = function (_a) {
|
|
8617
8618
|
var downloadStatus = _a.downloadStatus, onDownload = _a.onDownload, _b = _a.className, className = _b === void 0 ? '' : _b, customFail = _a.customFail;
|
|
@@ -8689,9 +8690,9 @@ var CurrencyInput = function (_a) {
|
|
|
8689
8690
|
} }, props), void 0));
|
|
8690
8691
|
};
|
|
8691
8692
|
|
|
8692
|
-
var css_248z$
|
|
8693
|
-
var styles$
|
|
8694
|
-
styleInject(css_248z$
|
|
8693
|
+
var css_248z$j = "@keyframes style-module_fade-in__1GZgs {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n }\n}\n@keyframes style-module_fade-out__30Bns {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n }\n}\n@keyframes style-module_appear-in__3U2lu {\n 0% {\n transform: translateY(100%);\n }\n 80% {\n transform: translateY(-2%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@keyframes style-module_disappear-out__6pOVr {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n.style-module_close__1GERU {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n animation-delay: 0.1s;\n animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n position: relative;\n background-color: white;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n width: 100%;\n animation-name: style-module_appear-in__3U2lu;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n top: 0;\n}\n.style-module_container--close__K506c {\n animation-name: style-module_disappear-out__6pOVr;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n height: 60px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 16px;\n}";
|
|
8694
|
+
var styles$i = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH"};
|
|
8695
|
+
styleInject(css_248z$j);
|
|
8695
8696
|
|
|
8696
8697
|
var imageClose$1 = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
8697
8698
|
|
|
@@ -8743,14 +8744,14 @@ var BottomModal = (function (_a) {
|
|
|
8743
8744
|
if (!isOpen) {
|
|
8744
8745
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
8745
8746
|
}
|
|
8746
|
-
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$
|
|
8747
|
-
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$
|
|
8748
|
-
jsxRuntime.jsx("div", __assign({ className: styles$
|
|
8747
|
+
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$i['overlay--close'] : styles$i.overlay, onClick: handleOnClose }, { children: jsxRuntime.jsxs("div", __assign({ className: (isClosing ? styles$i['container--close'] : styles$i.container) + " " + className, ref: containerRef, style: { top: containerXOffset + "px" }, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$i.header }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-h4 " + styles$i.title }, { children: title }), void 0),
|
|
8748
|
+
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$i.close, onClick: handleOnClose }, { children: jsxRuntime.jsx("img", { src: imageClose$1, alt: "Close" }, void 0) }), void 0))] }), void 0),
|
|
8749
|
+
jsxRuntime.jsx("div", __assign({ className: styles$i.content }, { children: children }), void 0)] }), void 0) }), void 0));
|
|
8749
8750
|
});
|
|
8750
8751
|
|
|
8751
|
-
var css_248z$
|
|
8752
|
-
var styles$
|
|
8753
|
-
styleInject(css_248z$
|
|
8752
|
+
var css_248z$i = "@keyframes style-module_fade-in__nLzzO {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n}\n@keyframes style-module_fade-out__IuSV7 {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n}\n@keyframes style-module_appear-in__2ZMqz {\n 0% {\n transform: translateY(24px) translateX(-50%);\n opacity: 0;\n visibility: hidden;\n }\n 100% {\n transform: translateY(0) translateX(-50%);\n opacity: 1;\n visibility: visible;\n }\n}\n@keyframes style-module_disappear-out__38TSV {\n 0% {\n transform: translateY(0) translateX(-50%);\n opacity: 1;\n visibility: visible;\n }\n 100% {\n transform: translateY(24px) translateX(-50%);\n opacity: 0;\n visibility: hidden;\n }\n}\n.style-module_overlay__1Zbce, .style-module_overlay--close__2dytn {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__nLzzO 0.3s both;\n}\n.style-module_overlay--close__2dytn {\n animation-delay: 0.1s;\n animation: style-module_fade-out__IuSV7 0.3s both;\n}\n\n.style-module_container__1XZj_, .style-module_container--close__3UYsJ {\n position: relative;\n background-color: white;\n border-radius: 8px;\n max-width: 592px;\n width: fit-content;\n width: -moz-fit-content;\n animation-name: style-module_appear-in__2ZMqz;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n top: calc(100vh / 2 - 50% / 2);\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 80px;\n}\n.style-module_container--close__3UYsJ {\n animation-name: style-module_disappear-out__38TSV;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_header__2oEKp {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 0 24px;\n}\n\n.style-module_close__p3Axi {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}";
|
|
8753
|
+
var styles$h = {"overlay":"style-module_overlay__1Zbce","overlay--close":"style-module_overlay--close__2dytn","fade-in":"style-module_fade-in__nLzzO","fade-out":"style-module_fade-out__IuSV7","container":"style-module_container__1XZj_","container--close":"style-module_container--close__3UYsJ","appear-in":"style-module_appear-in__2ZMqz","disappear-out":"style-module_disappear-out__38TSV","header":"style-module_header__2oEKp","close":"style-module_close__p3Axi"};
|
|
8754
|
+
styleInject(css_248z$i);
|
|
8754
8755
|
|
|
8755
8756
|
var imageClose = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
8756
8757
|
|
|
@@ -8760,13 +8761,13 @@ var RegularModal = (function (_a) {
|
|
|
8760
8761
|
if (!isOpen) {
|
|
8761
8762
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
8762
8763
|
}
|
|
8763
|
-
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$
|
|
8764
|
-
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$
|
|
8764
|
+
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$h['overlay--close'] : styles$h.overlay, onClick: handleOnClose }, { children: jsxRuntime.jsxs("div", __assign({ className: (isClosing ? styles$h['container--close'] : styles$h.container) + " " + className, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$h.header }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-h2 " + styles$h.title }, { children: title }), void 0),
|
|
8765
|
+
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$h.close, onClick: handleOnClose }, { children: jsxRuntime.jsx("img", { src: imageClose, alt: "Close" }, void 0) }), void 0))] }), void 0), children] }), void 0) }), void 0));
|
|
8765
8766
|
});
|
|
8766
8767
|
|
|
8767
|
-
var css_248z$
|
|
8768
|
-
var styles$
|
|
8769
|
-
styleInject(css_248z$
|
|
8768
|
+
var css_248z$h = "@media (min-width: 34rem) {\n .style-module_mobile__3k175 {\n display: none;\n }\n}\n@media (max-width: 34rem) {\n .style-module_mobile__3k175 {\n display: block !important;\n }\n}\n\n@media (max-width: 34rem) {\n .style-module_desktop__2lclr {\n display: none;\n }\n}";
|
|
8769
|
+
var styles$g = {"mobile":"style-module_mobile__3k175","desktop":"style-module_desktop__2lclr"};
|
|
8770
|
+
styleInject(css_248z$h);
|
|
8770
8771
|
|
|
8771
8772
|
var index$6 = (function (_a) {
|
|
8772
8773
|
var isOpen = _a.isOpen, props = __rest$1(_a, ["isOpen"]);
|
|
@@ -8785,8 +8786,8 @@ var index$6 = (function (_a) {
|
|
|
8785
8786
|
window.removeEventListener('resize', handleResize);
|
|
8786
8787
|
};
|
|
8787
8788
|
}, []);
|
|
8788
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: styles$
|
|
8789
|
-
visibleSize === 'desktop' && (jsxRuntime.jsx("div", __assign({ className: styles$
|
|
8789
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: styles$g.mobile, ref: mobileRef }, { children: visibleSize === 'mobile' && jsxRuntime.jsx(BottomModal, __assign({}, props, { isOpen: isOpen }), void 0) }), void 0),
|
|
8790
|
+
visibleSize === 'desktop' && (jsxRuntime.jsx("div", __assign({ className: styles$g.desktop }, { children: jsxRuntime.jsx(RegularModal, __assign({}, props, { isOpen: isOpen }), void 0) }), void 0))] }, void 0));
|
|
8790
8791
|
});
|
|
8791
8792
|
|
|
8792
8793
|
var arrowRightImage = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012H19%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%205L19%2012L12%2019%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
@@ -8814,9 +8815,9 @@ var chevronRight = {
|
|
|
8814
8815
|
alt: 'chevron facing right',
|
|
8815
8816
|
};
|
|
8816
8817
|
|
|
8817
|
-
var css_248z$
|
|
8818
|
-
var styles$
|
|
8819
|
-
styleInject(css_248z$
|
|
8818
|
+
var css_248z$g = ".style-module_container__3jKmy {\n padding: 24px;\n}\n.style-module_container--xsmall__1c9fn {\n padding: 16px 24px;\n}\n\n.style-module_title-container__yzUzm {\n display: flex;\n align-items: center;\n}\n\n.style-module_right-icon__1I62e {\n margin-left: auto;\n}\n\n.style-module_indent__2-oSJ {\n margin-left: 36px;\n}";
|
|
8819
|
+
var styles$f = {"container":"style-module_container__3jKmy","container--xsmall":"style-module_container--xsmall__1c9fn","title-container":"style-module_title-container__yzUzm","right-icon":"style-module_right-icon__1I62e","indent":"style-module_indent__2-oSJ"};
|
|
8820
|
+
styleInject(css_248z$g);
|
|
8820
8821
|
|
|
8821
8822
|
var containerStyleFromTitleSize = function (titleSize) {
|
|
8822
8823
|
switch (titleSize) {
|
|
@@ -8828,20 +8829,20 @@ var containerStyleFromTitleSize = function (titleSize) {
|
|
|
8828
8829
|
};
|
|
8829
8830
|
var index$5 = (function (_a) {
|
|
8830
8831
|
var className = _a.className, title = _a.title, _b = _a.cardSize, cardSize = _b === void 0 ? 'medium' : _b, children = _a.children, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _c = _a.state, state = _c === void 0 ? 'actionable' : _c, _d = _a.dropshadow, dropshadow = _d === void 0 ? true : _d, props = __rest$1(_a, ["className", "title", "cardSize", "children", "leftIcon", "rightIcon", "state", "dropshadow"]);
|
|
8831
|
-
var cardStyle = className + " " + associatedClassForCardState(state, dropshadow) + " " + styles$
|
|
8832
|
-
var titleContainerStyle = styles$
|
|
8832
|
+
var cardStyle = className + " " + associatedClassForCardState(state, dropshadow) + " " + styles$f[containerStyleFromTitleSize(cardSize)];
|
|
8833
|
+
var titleContainerStyle = styles$f['title-container'];
|
|
8833
8834
|
var headingStyle = headingForCardSize(cardSize);
|
|
8834
|
-
var iconStyle = styles$
|
|
8835
|
-
var cardTextStyle = "p-p tc-grey-600 " + (cardSize === 'xsmall' ? styles$
|
|
8835
|
+
var iconStyle = styles$f['right-icon'];
|
|
8836
|
+
var cardTextStyle = "p-p tc-grey-600 " + (cardSize === 'xsmall' ? styles$f.indent : 'mt16');
|
|
8836
8837
|
return (jsxRuntime.jsxs("div", __assign({ className: cardStyle }, props, { children: [jsxRuntime.jsxs("div", __assign({ className: titleContainerStyle }, { children: [leftIcon && (jsxRuntime.jsx("img", { className: "mr8", width: "28px", height: "28px", src: leftIcon === 'logo' ? featherLogo.src : leftIcon.src, alt: leftIcon === 'logo' ? featherLogo.alt : leftIcon.src }, void 0)),
|
|
8837
8838
|
jsxRuntime.jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
|
|
8838
8839
|
rightIcon && (jsxRuntime.jsx("img", { className: iconStyle, width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0),
|
|
8839
8840
|
jsxRuntime.jsx("p", __assign({ className: cardTextStyle }, { children: children }), void 0)] }), void 0));
|
|
8840
8841
|
});
|
|
8841
8842
|
|
|
8842
|
-
var css_248z$
|
|
8843
|
-
var styles$
|
|
8844
|
-
styleInject(css_248z$
|
|
8843
|
+
var css_248z$f = ".style-module_container__384bg {\n padding: 24px 24px 24px 32px;\n}\n.style-module_container--small__35EZ1 {\n padding: 16px 24px 16px 32px;\n}\n.style-module_container--xsmall__2DDsN {\n padding: 16px 16px 16px 24px;\n}\n\n.style-module_card-text--small__1L_Fe {\n margin-top: 2px;\n}\n\n.style-module_card-text--medium__qoKv2 {\n margin-top: 4px;\n}\n\n.style-module_card-text--big__mMB2v {\n margin-top: 6px;\n}";
|
|
8844
|
+
var styles$e = {"container":"style-module_container__384bg","container--small":"style-module_container--small__35EZ1","container--xsmall":"style-module_container--xsmall__2DDsN","card-text--small":"style-module_card-text--small__1L_Fe","card-text--medium":"style-module_card-text--medium__qoKv2","card-text--big":"style-module_card-text--big__mMB2v"};
|
|
8845
|
+
styleInject(css_248z$f);
|
|
8845
8846
|
|
|
8846
8847
|
var containerStyleFromCardSize = function (cardSize) {
|
|
8847
8848
|
switch (cardSize) {
|
|
@@ -8866,45 +8867,45 @@ var cardTextStyleFromCardSize = function (cardSize) {
|
|
|
8866
8867
|
};
|
|
8867
8868
|
var index$4 = (function (_a) {
|
|
8868
8869
|
var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, _c = _a.cardSize, cardSize = _c === void 0 ? 'medium' : _c, children = _a.children, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _d = _a.state, state = _d === void 0 ? 'actionable' : _d, _e = _a.dropshadow, dropshadow = _e === void 0 ? true : _e, props = __rest$1(_a, ["className", "title", "cardSize", "children", "leftIcon", "rightIcon", "state", "dropshadow"]);
|
|
8869
|
-
var cardStyle = "d-flex ai-center " + className + " " + associatedClassForCardState(state, dropshadow) + " " + styles$
|
|
8870
|
+
var cardStyle = "d-flex ai-center " + className + " " + associatedClassForCardState(state, dropshadow) + " " + styles$e[containerStyleFromCardSize(cardSize)];
|
|
8870
8871
|
var headingStyle = headingForCardSize(cardSize);
|
|
8871
8872
|
var iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';
|
|
8872
|
-
var cardTextStyle = "tc-grey-600 " + (cardSize === 'xsmall' ? 'p-p--small' : 'p-p ') + " " + styles$
|
|
8873
|
+
var cardTextStyle = "tc-grey-600 " + (cardSize === 'xsmall' ? 'p-p--small' : 'p-p ') + " " + styles$e[cardTextStyleFromCardSize(cardSize)];
|
|
8873
8874
|
return (jsxRuntime.jsxs("div", __assign({ className: cardStyle }, props, { children: [leftIcon && (jsxRuntime.jsx("img", { width: "48px", height: "48px", className: iconStyle, src: leftIcon.src, alt: leftIcon.alt }, void 0)),
|
|
8874
8875
|
jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex" }, { children: [jsxRuntime.jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
|
|
8875
8876
|
rightIcon && (jsxRuntime.jsx("img", { className: "ml-auto", width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0),
|
|
8876
8877
|
jsxRuntime.jsx("p", __assign({ className: cardTextStyle }, { children: children }), void 0)] }, void 0)] }), void 0));
|
|
8877
8878
|
});
|
|
8878
8879
|
|
|
8879
|
-
var css_248z$
|
|
8880
|
-
var styles$
|
|
8881
|
-
styleInject(css_248z$
|
|
8880
|
+
var css_248z$e = ".style-module_container__34kUF {\n padding: 32px 24px 24px 24px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.style-module_right-icon__3_kH9 {\n margin-left: 4px;\n}";
|
|
8881
|
+
var styles$d = {"container":"style-module_container__34kUF","right-icon":"style-module_right-icon__3_kH9"};
|
|
8882
|
+
styleInject(css_248z$e);
|
|
8882
8883
|
|
|
8883
8884
|
var index$3 = (function (_a) {
|
|
8884
8885
|
var className = _a.className, title = _a.title, _b = _a.cardSize, cardSize = _b === void 0 ? 'medium' : _b, children = _a.children, topIcon = _a.topIcon, _c = _a.topIconSize, topIconSize = _c === void 0 ? { width: 48, height: 48 } : _c, rightIcon = _a.rightIcon, _d = _a.state, state = _d === void 0 ? 'actionable' : _d, _e = _a.dropshadow, dropshadow = _e === void 0 ? true : _e, props = __rest$1(_a, ["className", "title", "cardSize", "children", "topIcon", "topIconSize", "rightIcon", "state", "dropshadow"]);
|
|
8885
|
-
var cardStyle = "d-flex fd-column ai-center " + className + " " + associatedClassForCardState(state, dropshadow) + " " + styles$
|
|
8886
|
+
var cardStyle = "d-flex fd-column ai-center " + className + " " + associatedClassForCardState(state, dropshadow) + " " + styles$d.container;
|
|
8886
8887
|
var headingStyle = headingForCardSize(cardSize);
|
|
8887
|
-
var iconStyle = styles$
|
|
8888
|
+
var iconStyle = styles$d['right-icon'];
|
|
8888
8889
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ className: cardStyle }, props, { children: [jsxRuntime.jsx("img", { width: topIconSize.width, height: topIconSize.height, alt: topIcon.alt, src: topIcon.src }, void 0),
|
|
8889
8890
|
jsxRuntime.jsxs("div", __assign({ className: "d-flex mt16" }, { children: [jsxRuntime.jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
|
|
8890
8891
|
rightIcon && (jsxRuntime.jsx("img", { className: iconStyle, width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0), children] }), void 0) }, void 0));
|
|
8891
8892
|
});
|
|
8892
8893
|
|
|
8893
|
-
var css_248z$
|
|
8894
|
-
var styles$
|
|
8895
|
-
styleInject(css_248z$
|
|
8894
|
+
var css_248z$d = "@keyframes style-module_appear-in__23V7k {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.style-module_root-container__3r_b9 {\n position: relative;\n padding-top: 40px;\n}\n.style-module_root-container__3r_b9:hover .style-module_right-icon__L6sf3 {\n visibility: visible;\n animation-name: style-module_appear-in__23V7k;\n animation-duration: 0.3s;\n animation-fill-mode: both;\n}\n\n.style-module_top-icon__10CJ3 {\n position: absolute;\n left: 50%;\n transform: translateX(-50%) translateY(-40px);\n}\n.style-module_top-icon--muted__3PZ1X {\n opacity: 0.25;\n}\n\n.style-module_right-icon__L6sf3 {\n visibility: hidden;\n position: absolute;\n top: 64px;\n right: 24px;\n}\n\n.style-module_container__19mu2 {\n padding: 0 24px 24px 24px;\n height: 100%;\n}\n@media (max-width: 34rem) {\n .style-module_container__19mu2 {\n height: fit-content;\n }\n}";
|
|
8895
|
+
var styles$c = {"root-container":"style-module_root-container__3r_b9","right-icon":"style-module_right-icon__L6sf3","appear-in":"style-module_appear-in__23V7k","top-icon":"style-module_top-icon__10CJ3","top-icon--muted":"style-module_top-icon--muted__3PZ1X","container":"style-module_container__19mu2"};
|
|
8896
|
+
styleInject(css_248z$d);
|
|
8896
8897
|
|
|
8897
8898
|
var index$2 = (function (_a) {
|
|
8898
8899
|
var className = _a.className, title = _a.title, children = _a.children, topIcon = _a.topIcon, rightIcon = _a.rightIcon, _b = _a.state, state = _b === void 0 ? 'actionable' : _b, _c = _a.dropshadow, dropshadow = _c === void 0 ? true : _c, props = __rest$1(_a, ["className", "title", "children", "topIcon", "rightIcon", "state", "dropshadow"]);
|
|
8899
|
-
return (jsxRuntime.jsxs("div", __assign({ className: styles$
|
|
8900
|
-
jsxRuntime.jsxs("div", __assign({ className: associatedClassForCardState(state, dropshadow) + " " + styles$
|
|
8900
|
+
return (jsxRuntime.jsxs("div", __assign({ className: styles$c['root-container'] + " " + (className !== null && className !== void 0 ? className : '') }, props, { children: [jsxRuntime.jsx("img", { src: topIcon.src, alt: topIcon.alt, className: styles$c['top-icon'] + " " + (state === 'muted' ? styles$c['top-icon--muted'] : '') + " ", width: "80px", height: "80px" }, void 0),
|
|
8901
|
+
jsxRuntime.jsxs("div", __assign({ className: associatedClassForCardState(state, dropshadow) + " " + styles$c.container }, { children: [rightIcon && (jsxRuntime.jsx("img", { width: "20px", height: "20px", className: styles$c['right-icon'], src: rightIcon === 'info' ? info.src : rightIcon.src, alt: rightIcon === 'info' ? info.alt : rightIcon.alt }, void 0)),
|
|
8901
8902
|
jsxRuntime.jsx("div", __assign({ className: "p-h4 ta-center mt64" }, { children: title }), void 0),
|
|
8902
8903
|
jsxRuntime.jsx("p", __assign({ className: "p-p mt16 tc-grey-600" }, { children: children }), void 0)] }), void 0)] }), void 0));
|
|
8903
8904
|
});
|
|
8904
8905
|
|
|
8905
|
-
var css_248z$
|
|
8906
|
-
var styles$
|
|
8907
|
-
styleInject(css_248z$
|
|
8906
|
+
var css_248z$c = ".style-module_container__2tJCE {\n background-color: white;\n padding: 8px 16px;\n box-shadow: 0px 2px 20px rgba(97, 96, 162, 0.07);\n border-radius: 8px;\n border: 2px solid white;\n transition: border 0.2s ease-in-out;\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-decoration: none;\n}\n.style-module_container__2tJCE:hover {\n border: 2px solid #b1b0f5;\n}\n.style-module_container__2tJCE[disabled] {\n pointer-events: none;\n opacity: 0.25;\n}\n.style-module_container__2tJCE:focus {\n border: 2px solid #8e8cee;\n}";
|
|
8907
|
+
var styles$b = {"container":"style-module_container__2tJCE"};
|
|
8908
|
+
styleInject(css_248z$c);
|
|
8908
8909
|
|
|
8909
8910
|
var CardContent = function (_a) {
|
|
8910
8911
|
var title = _a.title, description = _a.description;
|
|
@@ -8915,7 +8916,7 @@ var CardContent = function (_a) {
|
|
|
8915
8916
|
var CardButton = function (_a) {
|
|
8916
8917
|
var title = _a.title, description = _a.description, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, href = _a.href, className = _a.className;
|
|
8917
8918
|
var component = href ? 'a' : 'button';
|
|
8918
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: require$$0.createElement(component, __assign({ className: "c-pointer ta-left w100 " + styles$
|
|
8919
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: require$$0.createElement(component, __assign({ className: "c-pointer ta-left w100 " + styles$b.container + " " + (className !== null && className !== void 0 ? className : '') + "\n ", children: jsxRuntime.jsx(CardContent, { title: title, description: description }, void 0), disabled: disabled }, (component === 'a' ? { href: href } : { onClick: onClick }))) }, void 0));
|
|
8919
8920
|
};
|
|
8920
8921
|
|
|
8921
8922
|
var headingForCardSize = function (cardSize) {
|
|
@@ -8946,9 +8947,9 @@ var associatedClassForCardState = function (state, dropshadow) {
|
|
|
8946
8947
|
return baseClass;
|
|
8947
8948
|
};
|
|
8948
8949
|
|
|
8949
|
-
var css_248z$
|
|
8950
|
-
var styles$
|
|
8951
|
-
styleInject(css_248z$
|
|
8950
|
+
var css_248z$b = ".style-module_chip__3LMgV {\n background: var(--ds-primary-100);\n border: 2px solid var(--ds-primary-100);\n border-radius: 8px;\n padding: 4px 8px;\n width: fit-content;\n width: -moz-fit-content;\n display: flex;\n align-items: center;\n animation-name: style-module_appearInAnimation__33Ebn;\n animation-duration: 0.5s;\n animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n transition: 0.2s ease-in;\n border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n width: 24px;\n height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n width: 16px;\n height: 16px;\n position: relative;\n}\n\n.style-module_chip-remove-button__3LK7e,\n.style-module_chip-remove-button-highlighted__3DysJ {\n position: absolute;\n}\n\n.style-module_chip-remove-button__3LK7e:hover {\n opacity: 0;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n from {\n opacity: 0;\n transform: translateX(16px);\n }\n to {\n opacity: 1;\n }\n}";
|
|
8951
|
+
var styles$a = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e","chip-remove-button-highlighted":"style-module_chip-remove-button-highlighted__3DysJ"};
|
|
8952
|
+
styleInject(css_248z$b);
|
|
8952
8953
|
|
|
8953
8954
|
var removeButtonIcon = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.4167%204L4.41666%2012%22%20stroke%3D%22%23B1B0F5%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.41666%204L12.4167%2012%22%20stroke%3D%22%23B1B0F5%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
8954
8955
|
|
|
@@ -8956,10 +8957,10 @@ var removeButtonHighlightedIcon = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%
|
|
|
8956
8957
|
|
|
8957
8958
|
var Chip = (function (_a) {
|
|
8958
8959
|
var value = _a.value, onRemove = _a.onRemove;
|
|
8959
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "p-p mr8 mb8 d-flex " + styles$
|
|
8960
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "p-p mr8 mb8 d-flex " + styles$a['chip'] }, { children: [value.leftIcon && (jsxRuntime.jsx("img", { className: "mr8 " + styles$a['chip-image'], src: value.leftIcon, alt: value.value }, void 0)),
|
|
8960
8961
|
jsxRuntime.jsx("div", __assign({ className: "mr8" }, { children: value.value }), void 0),
|
|
8961
|
-
jsxRuntime.jsxs("div", __assign({ className: "c-pointer " + styles$
|
|
8962
|
-
jsxRuntime.jsx("img", { className: styles$
|
|
8962
|
+
jsxRuntime.jsxs("div", __assign({ className: "c-pointer " + styles$a['chip-button-container'], onClick: function () { return onRemove(value); } }, { children: [jsxRuntime.jsx("img", { className: styles$a['chip-remove-button-highlighted'], src: removeButtonHighlightedIcon, alt: "removal x button highlighted" }, void 0),
|
|
8963
|
+
jsxRuntime.jsx("img", { className: styles$a['chip-remove-button'], src: removeButtonIcon, alt: "removal x button" }, void 0)] }), void 0)] }), void 0));
|
|
8963
8964
|
});
|
|
8964
8965
|
|
|
8965
8966
|
var Autosuggest = {};
|
|
@@ -12076,22 +12077,22 @@ _defineProperty(Autosuggest, "defaultProps", {
|
|
|
12076
12077
|
|
|
12077
12078
|
var dist$1 = Autosuggest["default"];
|
|
12078
12079
|
|
|
12079
|
-
var css_248z$
|
|
12080
|
-
var styles$
|
|
12081
|
-
styleInject(css_248z$
|
|
12080
|
+
var css_248z$a = "@keyframes style-module_appearInAnimation__yvH4A {\n from {\n opacity: 0;\n transform: translateY(16px);\n }\n to {\n opacity: 1;\n }\n}\n.style-module_suggestionsList__11o48 {\n position: absolute;\n z-index: 100;\n overflow: hidden;\n border-radius: 8px;\n border: 1px solid var(--ds-primary-500);\n width: 100%;\n max-width: 364px;\n height: fit-content;\n max-height: 216px;\n overflow-y: scroll;\n background-color: white;\n animation-name: style-module_appearInAnimation__yvH4A;\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform: translateY(8px);\n}\n\n.style-module_suggestion-option__z7pqG {\n display: flex;\n align-items: center;\n cursor: pointer;\n position: relative;\n margin: 0;\n padding: 12px 16px;\n color: var(--ds-grey-900);\n min-height: 48px;\n line-height: 24px;\n}\n\n.style-module_suggestion-img__1TfiA {\n width: 32px;\n height: 24px;\n border-radius: 2px;\n}\n\n.style-module_suggestion-text__7wL31 {\n flex: 1;\n}\n\n.style-module_nowrap__uks9c {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.style-module_suggestionHighlighted__2zu5h {\n background-color: var(--ds-primary-100);\n}";
|
|
12081
|
+
var styles$9 = {"suggestionsList":"style-module_suggestionsList__11o48","appearInAnimation":"style-module_appearInAnimation__yvH4A","suggestion-option":"style-module_suggestion-option__z7pqG","suggestion-img":"style-module_suggestion-img__1TfiA","suggestion-text":"style-module_suggestion-text__7wL31","nowrap":"style-module_nowrap__uks9c","suggestionHighlighted":"style-module_suggestionHighlighted__2zu5h"};
|
|
12082
|
+
styleInject(css_248z$a);
|
|
12082
12083
|
|
|
12083
12084
|
var AutoSuggestInput = (function (_a) {
|
|
12084
12085
|
var currentOption = _a.currentOption, suggestions = _a.suggestions, handleSuggestionSelected = _a.handleSuggestionSelected, onChange = _a.onChange, handleSuggestionFetchRequest = _a.handleSuggestionFetchRequest, handleSuggestionClearRequest = _a.handleSuggestionClearRequest, placeholder = _a.placeholder, className = _a.className, wrapText = _a.wrapText;
|
|
12085
12086
|
var renderSuggestion = function (suggestion) {
|
|
12086
12087
|
var _a;
|
|
12087
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "" + styles$
|
|
12088
|
-
jsxRuntime.jsx("div", __assign({ className: classNames(styles$
|
|
12089
|
-
_a[styles$
|
|
12088
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "" + styles$9['suggestion-option'] }, { children: [suggestion.leftIcon && (jsxRuntime.jsx("img", { className: "mr16 " + styles$9['suggestion-img'], src: suggestion.leftIcon, alt: suggestion.value }, void 0)),
|
|
12089
|
+
jsxRuntime.jsx("div", __assign({ className: classNames(styles$9['suggestion-text'], (_a = {},
|
|
12090
|
+
_a[styles$9.nowrap] = !wrapText,
|
|
12090
12091
|
_a)) }, { children: suggestion.value }), void 0)] }), void 0));
|
|
12091
12092
|
};
|
|
12092
12093
|
var getSuggestionValue = function (suggestion) { return suggestion.value; };
|
|
12093
12094
|
var renderInputComponent = function (inputProps) { return (jsxRuntime.jsx(Input, __assign({}, inputProps, { placeholder: placeholder, "data-cy": "suggest-multi-select-input" }), void 0)); };
|
|
12094
|
-
return (jsxRuntime.jsx("div", __assign({ className: className }, { children: jsxRuntime.jsx(dist$1, { theme: styles$
|
|
12095
|
+
return (jsxRuntime.jsx("div", __assign({ className: className }, { children: jsxRuntime.jsx(dist$1, { theme: styles$9, suggestions: suggestions, onSuggestionsFetchRequested: handleSuggestionFetchRequest, onSuggestionsClearRequested: handleSuggestionClearRequest, getSuggestionValue: getSuggestionValue, renderSuggestion: renderSuggestion, highlightFirstSuggestion: true, inputProps: {
|
|
12095
12096
|
value: currentOption,
|
|
12096
12097
|
onChange: function (_, _a) {
|
|
12097
12098
|
var newValue = _a.newValue;
|
|
@@ -12103,15 +12104,15 @@ var AutoSuggestInput = (function (_a) {
|
|
|
12103
12104
|
}, renderInputComponent: renderInputComponent }, void 0) }), void 0));
|
|
12104
12105
|
});
|
|
12105
12106
|
|
|
12106
|
-
var css_248z$
|
|
12107
|
-
var styles$
|
|
12108
|
-
styleInject(css_248z$
|
|
12107
|
+
var css_248z$9 = ".style-module_chip-container__26s37 {\n display: flex;\n flex-wrap: wrap;\n}";
|
|
12108
|
+
var styles$8 = {"chip-container":"style-module_chip-container__26s37"};
|
|
12109
|
+
styleInject(css_248z$9);
|
|
12109
12110
|
|
|
12110
12111
|
var index$1 = (function (_a) {
|
|
12111
12112
|
var options = _a.options, selectedValues = _a.selectedValues, setValues = _a.setValues, placeholder = _a.placeholder, chipsListClassName = _a.chipsListClassName, multiSelectClassName = _a.multiSelectClassName, wrapText = _a.wrapText;
|
|
12112
12113
|
var _b = require$$0.useState([]), suggestions = _b[0], setSuggestions = _b[1];
|
|
12113
12114
|
var _c = require$$0.useState(''), currentOption = _c[0], setCurrentOption = _c[1];
|
|
12114
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedValues && selectedValues.length > 0 && (jsxRuntime.jsx("div", __assign({ className: "mb8 " + styles$
|
|
12115
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedValues && selectedValues.length > 0 && (jsxRuntime.jsx("div", __assign({ className: "mb8 " + styles$8['chip-container'] + " " + chipsListClassName }, { children: selectedValues.map(function (value, index) { return (jsxRuntime.jsx(Chip, { value: value, onRemove: function (value) {
|
|
12115
12116
|
var newValues = __spreadArray$1([], selectedValues).filter(function (selectedValue) { return selectedValue.value !== value.value; });
|
|
12116
12117
|
setValues(newValues);
|
|
12117
12118
|
} }, value.value + "-" + index)); }) }), void 0)),
|
|
@@ -13552,13 +13553,42 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
|
13552
13553
|
|
|
13553
13554
|
}(dist));
|
|
13554
13555
|
|
|
13555
|
-
var css_248z$
|
|
13556
|
+
var css_248z$8 = ".AccordionItem-module_container__29xle {\n width: min-content;\n width: var(--growContent, min-content);\n margin: 0 auto;\n}\n\n.AccordionItem-module_container__29xle + .AccordionItem-module_container__29xle {\n margin-top: 8px;\n}\n\n.AccordionItem-module_chevron__1Pdoe {\n transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.AccordionItem-module_chevronClosed__1Sq5g {\n transform: rotate(180deg);\n}\n\n.AccordionItem-module_iconAndTextContainer__1K9NF {\n column-gap: 12px;\n}\n\n.AccordionItem-module_headerButton__1C03u {\n border: none;\n background: #fafaff;\n column-gap: 16px;\n cursor: pointer;\n font-family: inherit;\n outline: none;\n position: relative;\n text-align: inherit;\n transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\n}\n.AccordionItem-module_headerButton__1C03u:hover {\n background: #e6e5ff;\n}\n\n.AccordionItem-module_headerButton__1C03u:hover .AccordionItem-module_chevron__1Pdoe {\n filter: brightness(0.425);\n}";
|
|
13557
|
+
var styles$7 = {"container":"AccordionItem-module_container__29xle","chevron":"AccordionItem-module_chevron__1Pdoe","chevronClosed":"AccordionItem-module_chevronClosed__1Sq5g","iconAndTextContainer":"AccordionItem-module_iconAndTextContainer__1K9NF","headerButton":"AccordionItem-module_headerButton__1C03u"};
|
|
13558
|
+
styleInject(css_248z$8);
|
|
13559
|
+
|
|
13560
|
+
var ChevronSVG = function (_a) {
|
|
13561
|
+
var className = _a.className;
|
|
13562
|
+
return (jsxRuntime.jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M18 15L12 9L6 15", stroke: "#b4b4ba", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
|
|
13563
|
+
};
|
|
13564
|
+
var AccordionItem = function (_a) {
|
|
13565
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c, _d = _a.iconSrc, iconSrc = _d === void 0 ? '' : _d, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, title = _a.title;
|
|
13566
|
+
var handleClick = function () {
|
|
13567
|
+
if (!isOpen) {
|
|
13568
|
+
onOpen();
|
|
13569
|
+
}
|
|
13570
|
+
else {
|
|
13571
|
+
onClose();
|
|
13572
|
+
}
|
|
13573
|
+
};
|
|
13574
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "d-flex fd-column " + className + " " + styles$7.container }, { children: [jsxRuntime.jsxs("button", __assign({ className: "d-flex ai-center jc-between " + styles$7.headerButton + " " + headerClassName, onClick: handleClick, type: "button" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex ai-center " + styles$7.iconAndTextContainer }, { children: [!!iconSrc && jsxRuntime.jsx("img", { src: iconSrc, alt: title + " icon" }, void 0),
|
|
13575
|
+
jsxRuntime.jsx("h4", __assign({ className: "p-h4" }, { children: title }), void 0)] }), void 0),
|
|
13576
|
+
jsxRuntime.jsx(ChevronSVG, { className: styles$7.chevron + " " + (!isOpen && styles$7.chevronClosed) }, void 0)] }), void 0),
|
|
13577
|
+
jsxRuntime.jsx(AnimateHeight, __assign({ duration: 300, height: isOpen ? 'auto' : 0.1 }, { children: children }), void 0)] }), void 0));
|
|
13578
|
+
};
|
|
13579
|
+
|
|
13580
|
+
var Chevron = function (_a) {
|
|
13581
|
+
var className = _a.className;
|
|
13582
|
+
return (jsxRuntime.jsx("svg", __assign({ width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M15 12.5l-5-5-5 5", stroke: "#8E8CEE", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
|
|
13583
|
+
};
|
|
13584
|
+
|
|
13585
|
+
var css_248z$7 = ".style-module_header__32rw- {\n position: relative;\n}\n.style-module_header__32rw- > div {\n width: var(--tableWidth);\n max-width: var(--tableWidth);\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n margin: 0;\n}\n@media (min-width: 34rem) {\n .style-module_header__32rw- > div {\n width: 256px;\n width: var(--cellWidth, 256px);\n scroll-snap-align: unset;\n }\n}\n\n.style-module_cell__1NoZ6 {\n display: flex;\n justify-content: center;\n align-items: center;\n scroll-snap-align: end;\n line-height: 24px;\n padding: 16px;\n color: #4c4c53;\n width: 50vw;\n max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n background-color: white;\n /** Add scroll snap to every column except the first one */\n scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n .style-module_cell__1NoZ6:nth-child(n+3) {\n margin-left: unset;\n }\n}\n@media (min-width: 34rem) {\n .style-module_cell__1NoZ6 {\n flex: 1 0 256px;\n flex: 1 0 var(--cellWidth, 256px);\n width: 256px;\n width: var(--cellWidth, 256px);\n padding: 24px;\n }\n .style-module_cell__1NoZ6:last-child {\n padding: 24px 8px 24px 24px;\n }\n}\n\nh4.style-module_cell__1NoZ6 {\n max-width: min(288px, calc(var(--tableWidth) / 2));\n max-width: min(var(--firstColumnWidth, 288px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n position: relative;\n color: #26262e;\n display: none;\n}\n.style-module_title__1xYvu:after {\n content: \"\";\n display: block;\n position: absolute;\n top: calc( 50% + 16px );\n height: 4px;\n width: 100%;\n max-width: 140px;\n background-color: #8e8cee;\n}\n@media (min-width: 34rem) {\n .style-module_title__1xYvu {\n display: flex;\n }\n}\n\n.style-module_sticky__2T5jm {\n position: sticky;\n justify-content: flex-start;\n z-index: 1;\n top: 0;\n left: 0;\n width: 50vw;\n}\n@media (min-width: 34rem) {\n .style-module_sticky__2T5jm {\n border-right: 1px solid #fafaff;\n flex: 1 0 288px;\n }\n}\n\n.style-module_addon__CPf60 {\n width: 100%;\n border-right: none;\n max-width: 100vw;\n}\n@media (min-width: 64rem) {\n .style-module_addon__CPf60 {\n max-width: 944px;\n }\n}";
|
|
13556
13586
|
var styles$6 = {"header":"style-module_header__32rw-","cell":"style-module_cell__1NoZ6","title":"style-module_title__1xYvu","sticky":"style-module_sticky__2T5jm","addon":"style-module_addon__CPf60"};
|
|
13557
13587
|
styleInject(css_248z$7);
|
|
13558
13588
|
|
|
13559
13589
|
var Row = function (props) {
|
|
13560
13590
|
var cell = props.cell, data = props.data, isRowHeader = props.isRowHeader, rowId = props.rowId;
|
|
13561
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "\n d-flex\n w-100\n " + (isRowHeader ? styles$6.header : '') + "\n " }, { children: [jsxRuntime.jsx("h4", __assign({ className: "\n
|
|
13591
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "\n d-flex\n w-100\n " + (isRowHeader ? styles$6.header : '') + "\n " }, { children: [jsxRuntime.jsx("h4", __assign({ className: "\n " + styles$6.cell + "\n " + styles$6.sticky + "\n " + (isRowHeader ? "p-h2 p--serif " + styles$6.title : '') + "\n " + (typeof cell.key === 'undefined' ? styles$6.addon : '') + "\n " }, { children: cell.label }), void 0),
|
|
13562
13592
|
Array.isArray(data) &&
|
|
13563
13593
|
data.map(function (item) {
|
|
13564
13594
|
/**
|
|
@@ -13586,7 +13616,7 @@ var ArrowIcon = function (_a) {
|
|
|
13586
13616
|
return (jsxRuntime.jsx("svg", __assign({ width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M1 1.00003L7 7.00003L13 1.00003", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
|
|
13587
13617
|
};
|
|
13588
13618
|
|
|
13589
|
-
var css_248z$6 = ".style-module_container__3BxOi {\n position: absolute;\n width:
|
|
13619
|
+
var css_248z$6 = ".style-module_container__3BxOi {\n position: absolute;\n width: 100%;\n padding: 0 16px;\n justify-content: space-between;\n z-index: 1;\n display: flex;\n}\n@media (min-width: 34rem) {\n .style-module_container__3BxOi {\n display: none;\n }\n}\n\n.style-module_next__3yJsi {\n transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n width: 32px;\n height: 32px;\n padding: 0;\n border-radius: 50%;\n background-color: #f5f5fa;\n justify-content: center;\n align-items: center;\n stroke: #e6e5ff;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n background-color: #f5f5fa;\n cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n stroke: #8e8cee;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n background-color: #f5f5fa;\n cursor: pointer;\n}";
|
|
13590
13620
|
var styles$5 = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB"};
|
|
13591
13621
|
styleInject(css_248z$6);
|
|
13592
13622
|
|
|
@@ -13602,6 +13632,17 @@ var TableArrows = function (props) {
|
|
|
13602
13632
|
_b)) }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0)] }), void 0));
|
|
13603
13633
|
};
|
|
13604
13634
|
|
|
13635
|
+
var css_248z$5 = ".style-module_button__3TkNT {\n padding: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: bottom;\n width: 24px;\n height: 24px;\n transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n background-color: #f7f7ff;\n}\n.style-module_button__3TkNT:hover svg, .style-module_button__3TkNT:focus svg {\n fill: #b1b0f5;\n}\n.style-module_button__3TkNT svg {\n fill: #e6e5ff;\n transition: all 0.3s ease;\n}";
|
|
13636
|
+
var styles$4 = {"button":"style-module_button__3TkNT"};
|
|
13637
|
+
styleInject(css_248z$5);
|
|
13638
|
+
|
|
13639
|
+
var TableInfoButton = function (_a) {
|
|
13640
|
+
var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
13641
|
+
return (jsxRuntime.jsx("span", __assign({ role: "button", className: "p-btn--secondary " + styles$4.button + " " + className, onClick: onClick }, { children: jsxRuntime.jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z" }, void 0),
|
|
13642
|
+
jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z" }, void 0),
|
|
13643
|
+
jsxRuntime.jsx("path", { d: "M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z" }, void 0)] }), void 0) }), void 0));
|
|
13644
|
+
};
|
|
13645
|
+
|
|
13605
13646
|
var StarIcon = function (_a) {
|
|
13606
13647
|
var className = _a.className;
|
|
13607
13648
|
return (jsxRuntime.jsx("svg", __assign({ width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M5.933.004a.73.73 0 01.756.468L7.891 3.67l3.407.16c.677.03.954.886.422 1.306l-2.66 2.145.899 3.296c.17.647-.545 1.166-1.105.8l-2.85-1.872-2.858 1.873c-.561.368-1.28-.152-1.107-.801l.9-3.296L.278 5.136C-.253 4.716.024 3.86.7 3.831l3.407-.161L5.322.472a.73.73 0 01.61-.468z" }, void 0) }), void 0));
|
|
@@ -13612,9 +13653,9 @@ var ZapIcon = function (_a) {
|
|
|
13612
13653
|
return (jsxRuntime.jsx("svg", __assign({ width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.492 1.124A1 1 0 005.732.36l-5 6A1 1 0 001.5 8h3.367l-.36 2.876a1 1 0 001.761.764l5-6A1 1 0 0010.5 4H7.133l.36-2.876z" }, void 0) }), void 0));
|
|
13613
13654
|
};
|
|
13614
13655
|
|
|
13615
|
-
var css_248z$
|
|
13616
|
-
var styles$
|
|
13617
|
-
styleInject(css_248z$
|
|
13656
|
+
var css_248z$4 = ".style-module_icon__1ep7- {\n margin-right: 4px;\n}\n\n.style-module_filled__3l-v0 {\n fill: #8e8cee;\n}\n\n.style-module_empty__Ikg_s {\n fill: #f5f5fa;\n}";
|
|
13657
|
+
var styles$3 = {"icon":"style-module_icon__1ep7-","filled":"style-module_filled__3l-v0","empty":"style-module_empty__Ikg_s"};
|
|
13658
|
+
styleInject(css_248z$4);
|
|
13618
13659
|
|
|
13619
13660
|
var getRatingIcon = function (type) {
|
|
13620
13661
|
var iconDictionary = {
|
|
@@ -13627,26 +13668,7 @@ var VALID_VALUES = [1, 2, 3];
|
|
|
13627
13668
|
var TableRating = function (props) {
|
|
13628
13669
|
var rating = props.rating, type = props.type;
|
|
13629
13670
|
var SelectedIcon = getRatingIcon(type);
|
|
13630
|
-
return (jsxRuntime.jsx("div", { children: VALID_VALUES.map(function (value) { return (jsxRuntime.jsx(SelectedIcon, { className: classNames(styles$
|
|
13631
|
-
};
|
|
13632
|
-
|
|
13633
|
-
var TableTrueFalse = function (_a) {
|
|
13634
|
-
var value = _a.value, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
13635
|
-
if (value) {
|
|
13636
|
-
return (jsxRuntime.jsx("svg", __assign({ width: "18", height: "13", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M15.667 1.833L6.5 11 2.333 6.833", stroke: "#8E8CEE", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
|
|
13637
|
-
}
|
|
13638
|
-
return (jsxRuntime.jsx("svg", __assign({ width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707 1.707A1 1 0 0010.293.293L6 4.586 1.707.293A1 1 0 00.293 1.707L4.586 6 .293 10.293a1 1 0 101.414 1.414L6 7.414l4.293 4.293a1 1 0 001.414-1.414L7.414 6l4.293-4.293z", fill: "#D2D2D8" }, void 0) }), void 0));
|
|
13639
|
-
};
|
|
13640
|
-
|
|
13641
|
-
var css_248z$4 = ".style-module_button__3TkNT {\n padding: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: bottom;\n width: 24px;\n height: 24px;\n transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n background-color: #f7f7ff;\n}\n.style-module_button__3TkNT:hover svg, .style-module_button__3TkNT:focus svg {\n fill: #b1b0f5;\n}\n.style-module_button__3TkNT svg {\n fill: #e6e5ff;\n transition: all 0.3s ease;\n}";
|
|
13642
|
-
var styles$3 = {"button":"style-module_button__3TkNT"};
|
|
13643
|
-
styleInject(css_248z$4);
|
|
13644
|
-
|
|
13645
|
-
var TableInfoButton = function (_a) {
|
|
13646
|
-
var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
13647
|
-
return (jsxRuntime.jsx("span", __assign({ role: "button", className: "p-btn--secondary " + styles$3.button + " " + className, onClick: onClick }, { children: jsxRuntime.jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z" }, void 0),
|
|
13648
|
-
jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z" }, void 0),
|
|
13649
|
-
jsxRuntime.jsx("path", { d: "M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z" }, void 0)] }), void 0) }), void 0));
|
|
13671
|
+
return (jsxRuntime.jsx("div", { children: VALID_VALUES.map(function (value) { return (jsxRuntime.jsx(SelectedIcon, { className: classNames(styles$3.icon, value <= rating ? styles$3.filled : styles$3.empty) }, value)); }) }, void 0));
|
|
13650
13672
|
};
|
|
13651
13673
|
|
|
13652
13674
|
var css_248z$3 = ".style-module_icon__30Nor {\n min-width: 20px;\n}";
|
|
@@ -13663,108 +13685,153 @@ var TableRowHeader = function (props) {
|
|
|
13663
13685
|
subtitle && jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-grey-500" }, { children: subtitle }), void 0)] }, void 0)] }), void 0));
|
|
13664
13686
|
};
|
|
13665
13687
|
|
|
13666
|
-
var
|
|
13667
|
-
var
|
|
13668
|
-
|
|
13688
|
+
var TableTrueFalse = function (_a) {
|
|
13689
|
+
var value = _a.value, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
13690
|
+
if (value) {
|
|
13691
|
+
return (jsxRuntime.jsx("svg", __assign({ width: "18", height: "13", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M15.667 1.833L6.5 11 2.333 6.833", stroke: "#8E8CEE", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
|
|
13692
|
+
}
|
|
13693
|
+
return (jsxRuntime.jsx("svg", __assign({ width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707 1.707A1 1 0 0010.293.293L6 4.586 1.707.293A1 1 0 00.293 1.707L4.586 6 .293 10.293a1 1 0 101.414 1.414L6 7.414l4.293 4.293a1 1 0 001.414-1.414L7.414 6l4.293-4.293z", fill: "#D2D2D8" }, void 0) }), void 0));
|
|
13669
13694
|
};
|
|
13670
13695
|
|
|
13671
|
-
var
|
|
13672
|
-
var _a = require$$0.useState(
|
|
13673
|
-
|
|
13674
|
-
|
|
13675
|
-
|
|
13696
|
+
var useComparisonTable = function () {
|
|
13697
|
+
var _a = require$$0.useState(false), showMore = _a[0], setShowMore = _a[1];
|
|
13698
|
+
var _b = require$$0.useState(0), headerWidth = _b[0], setHeaderWidth = _b[1];
|
|
13699
|
+
var _c = require$$0.useState(0), selectedTabIndex = _c[0], setSelectedTabIndex = _c[1];
|
|
13700
|
+
var _d = require$$0.useState(''), selectedSection = _d[0], setSelectedSection = _d[1];
|
|
13701
|
+
var headerRef = require$$0.useRef(null);
|
|
13676
13702
|
var contentContainerRef = require$$0.useRef(null);
|
|
13677
|
-
var
|
|
13678
|
-
var
|
|
13679
|
-
|
|
13680
|
-
|
|
13681
|
-
|
|
13682
|
-
|
|
13683
|
-
|
|
13684
|
-
|
|
13685
|
-
|
|
13686
|
-
|
|
13687
|
-
|
|
13703
|
+
var observerRef = require$$0.useRef(null);
|
|
13704
|
+
var scrollContainerCallbackRef = require$$0.useCallback(function (node) {
|
|
13705
|
+
if (node) {
|
|
13706
|
+
setHeaderWidth(node.clientWidth);
|
|
13707
|
+
}
|
|
13708
|
+
headerRef.current = node;
|
|
13709
|
+
}, []);
|
|
13710
|
+
require$$0.useEffect(function () {
|
|
13711
|
+
if (!observerRef.current) {
|
|
13712
|
+
observerRef.current = new ResizeObserver(function (entries) {
|
|
13713
|
+
entries.forEach(function (entry) {
|
|
13714
|
+
var currentTabIndex = Math.round(entry.target.scrollLeft / entry.contentRect.width);
|
|
13715
|
+
setHeaderWidth(entry.contentRect.width);
|
|
13716
|
+
// Update selectedTabIndex to match the calculated current tab index
|
|
13717
|
+
setSelectedTabIndex(currentTabIndex);
|
|
13718
|
+
});
|
|
13688
13719
|
});
|
|
13689
13720
|
}
|
|
13721
|
+
if (headerRef.current) {
|
|
13722
|
+
observerRef.current.observe(headerRef.current);
|
|
13723
|
+
}
|
|
13724
|
+
return function () {
|
|
13725
|
+
var _a, _b;
|
|
13726
|
+
if (headerRef.current) {
|
|
13727
|
+
(_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(headerRef.current);
|
|
13728
|
+
}
|
|
13729
|
+
(_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
13730
|
+
};
|
|
13731
|
+
}, []);
|
|
13732
|
+
var handleTableScroll = function () {
|
|
13733
|
+
if (!headerRef.current) {
|
|
13734
|
+
return;
|
|
13735
|
+
}
|
|
13736
|
+
var currentTabIndex = Math.round(headerRef.current.scrollLeft /
|
|
13737
|
+
headerRef.current.getBoundingClientRect().width);
|
|
13738
|
+
setSelectedTabIndex(currentTabIndex);
|
|
13690
13739
|
};
|
|
13691
13740
|
var debouncedTableScroll = lodash_debounce(handleTableScroll, 150);
|
|
13692
13741
|
require$$0.useEffect(function () {
|
|
13693
13742
|
var _a, _b;
|
|
13694
|
-
(_a =
|
|
13743
|
+
(_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', debouncedTableScroll, {
|
|
13695
13744
|
passive: true,
|
|
13696
13745
|
});
|
|
13697
|
-
return (_b =
|
|
13746
|
+
return (_b = headerRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', handleTableScroll);
|
|
13698
13747
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
13699
|
-
return {
|
|
13700
|
-
activeArrows: activeArrows,
|
|
13701
|
-
contentContainerRef: contentContainerRef,
|
|
13702
|
-
contentWrapperRef: contentWrapperRef,
|
|
13703
|
-
};
|
|
13704
|
-
};
|
|
13705
|
-
|
|
13706
|
-
var css_248z$2 = ".style-module_container__xHPlk {\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n .style-module_container__xHPlk {\n scroll-snap-type: unset;\n }\n}\n\n.style-module_overflow-container__oBPQw {\n width: max-content;\n min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n display: flex;\n flex-flow: column;\n width: max-content;\n margin: auto;\n min-width: calc(56rem + 48px);\n}\n\n.style-module_group-title__2vvRm {\n width: 100%;\n background-color: #fafaff;\n border-radius: 8px;\n margin-top: 48px;\n}\n.style-module_group-title__2vvRm > h4 {\n padding: 24px;\n display: inline-block;\n}\n@media (min-width: 34rem) {\n .style-module_group-title__2vvRm {\n margin-top: 72px;\n }\n}\n\n.style-module_sticky__2Xmbl {\n position: sticky;\n justify-content: flex-start;\n z-index: 1;\n top: 0;\n left: 0;\n}\n@media (min-width: 34rem) {\n .style-module_sticky__2Xmbl {\n border-right: 1px solid #fafaff;\n }\n}\n\n.style-module_header__23SZy {\n position: sticky;\n top: 0;\n z-index: 2;\n background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n width: 100%;\n max-width: calc(100vw - 24px);\n padding-left: 16px;\n border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n font-family: inherit;\n background-color: #fafaff;\n border: none;\n border-radius: 8px;\n height: 64px;\n justify-content: center;\n align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n transform: rotate(180deg);\n transition: all 0.25s ease;\n}";
|
|
13707
|
-
var baseStyles = {"container":"style-module_container__xHPlk","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
|
|
13708
|
-
styleInject(css_248z$2);
|
|
13709
|
-
|
|
13710
|
-
var ComparisonTable = function (props) {
|
|
13711
|
-
var headers = props.headers, data = props.data, hideDetails = props.hideDetails, styles = props.styles;
|
|
13712
|
-
var _a = require$$0.useState(false), showMore = _a[0], setShowMore = _a[1];
|
|
13713
|
-
var headerContainerRef = require$$0.useRef(null);
|
|
13714
|
-
var _b = useActiveTableArrows(), activeArrows = _b.activeArrows, contentContainerRef = _b.contentContainerRef, contentWrapperRef = _b.contentWrapperRef;
|
|
13715
|
-
/** narrow types */
|
|
13716
|
-
var headerContainer = headerContainerRef
|
|
13717
|
-
? headerContainerRef.current
|
|
13718
|
-
: null;
|
|
13719
|
-
var contentWrapper = typeof contentWrapperRef === 'object' && contentWrapperRef
|
|
13720
|
-
? contentWrapperRef.current
|
|
13721
|
-
: null;
|
|
13722
13748
|
var handleArrowsClick = function (value) {
|
|
13723
|
-
if (
|
|
13724
|
-
|
|
13749
|
+
if (headerRef.current) {
|
|
13750
|
+
var currentTabIndex = Math.round(headerRef.current.scrollLeft / headerRef.current.clientWidth);
|
|
13751
|
+
var direction = value === 'next' ? 1 : -1;
|
|
13752
|
+
var newTabIndex_1 = currentTabIndex + direction;
|
|
13753
|
+
headerRef.current.scroll({
|
|
13725
13754
|
top: 0,
|
|
13726
|
-
left:
|
|
13727
|
-
? headerContainerRef.current.scrollLeft + window.innerWidth
|
|
13728
|
-
: headerContainerRef.current.scrollLeft - window.innerWidth,
|
|
13755
|
+
left: headerWidth * newTabIndex_1,
|
|
13729
13756
|
behavior: 'smooth',
|
|
13730
13757
|
});
|
|
13758
|
+
setSelectedTabIndex(function () {
|
|
13759
|
+
return newTabIndex_1;
|
|
13760
|
+
});
|
|
13731
13761
|
}
|
|
13732
13762
|
};
|
|
13733
13763
|
var toggleMoreRows = function () { return __awaiter$1(void 0, void 0, void 0, function () {
|
|
13734
13764
|
return __generator$1(this, function (_a) {
|
|
13735
|
-
if (showMore &&
|
|
13765
|
+
if (showMore && headerRef.current && contentContainerRef.current) {
|
|
13736
13766
|
window.scroll(0, window.scrollY +
|
|
13737
|
-
(
|
|
13738
|
-
|
|
13767
|
+
(contentContainerRef.current.getBoundingClientRect().y -
|
|
13768
|
+
headerRef.current.getBoundingClientRect().bottom));
|
|
13739
13769
|
}
|
|
13740
13770
|
setShowMore(!showMore);
|
|
13741
13771
|
return [2 /*return*/];
|
|
13742
13772
|
});
|
|
13743
13773
|
}); };
|
|
13744
|
-
return
|
|
13774
|
+
return {
|
|
13775
|
+
headerWidth: headerWidth,
|
|
13776
|
+
contentContainerRef: contentContainerRef,
|
|
13777
|
+
selectedSection: selectedSection,
|
|
13778
|
+
setSelectedSection: setSelectedSection,
|
|
13779
|
+
selectedTabIndex: selectedTabIndex,
|
|
13780
|
+
setSelectedTabIndex: setSelectedTabIndex,
|
|
13781
|
+
scrollContainerCallbackRef: scrollContainerCallbackRef,
|
|
13782
|
+
handleArrowsClick: handleArrowsClick,
|
|
13783
|
+
toggleMoreRows: toggleMoreRows,
|
|
13784
|
+
showMore: showMore,
|
|
13785
|
+
};
|
|
13786
|
+
};
|
|
13787
|
+
|
|
13788
|
+
var css_248z$2 = ".style-module_container__xHPlk {\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n .style-module_container__xHPlk {\n scroll-snap-type: unset;\n }\n}\n\n.style-module_noScrollBars__1ri_E {\n scrollbar-width: none;\n /* Firefox */\n -ms-overflow-style: none;\n /* Internet Explorer 10+ */\n scroll-snap-type: unset;\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n /* WebKit */\n width: 0;\n height: 0;\n}\n\n.style-module_overflow-container__oBPQw {\n width: max-content;\n min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n display: flex;\n flex-flow: column;\n width: max-content;\n width: var(--growContent, max-content);\n margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n width: 100%;\n background-color: #fafaff;\n border-radius: 8px;\n margin-top: 48px;\n}\n.style-module_group-title__2vvRm > h4 {\n padding: 24px;\n display: inline-block;\n}\n@media (min-width: 34rem) {\n .style-module_group-title__2vvRm {\n margin-top: 72px;\n }\n}\n\n.style-module_sticky__2Xmbl {\n position: sticky;\n justify-content: flex-start;\n z-index: 1;\n top: 0;\n left: 0;\n}\n@media (min-width: 34rem) {\n .style-module_sticky__2Xmbl {\n border-right: 1px solid #fafaff;\n }\n}\n\n.style-module_header__23SZy {\n position: sticky;\n top: 0;\n top: var(--stickyHeaderTopOffset, 0);\n z-index: 2;\n background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n width: 100%;\n border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n font-family: inherit;\n background-color: #fafaff;\n border: none;\n border-radius: 8px;\n height: 64px;\n justify-content: center;\n align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n transform: rotate(180deg);\n transition: all 0.25s ease;\n}";
|
|
13789
|
+
var baseStyles = {"container":"style-module_container__xHPlk","noScrollBars":"style-module_noScrollBars__1ri_E","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
|
|
13790
|
+
styleInject(css_248z$2);
|
|
13791
|
+
|
|
13792
|
+
var ComparisonTable = function (props) {
|
|
13793
|
+
var _a;
|
|
13794
|
+
var headers = props.headers, data = props.data, hideDetails = props.hideDetails, styles = props.styles, hideScrollBars = props.hideScrollBars, collapsibleSections = props.collapsibleSections, cellWidth = props.cellWidth, firstColumnWidth = props.firstColumnWidth, stickyHeaderTopOffset = props.stickyHeaderTopOffset, growContent = props.growContent;
|
|
13795
|
+
var _b = useComparisonTable(), headerWidth = _b.headerWidth, contentContainerRef = _b.contentContainerRef, selectedSection = _b.selectedSection, setSelectedSection = _b.setSelectedSection, selectedTabIndex = _b.selectedTabIndex, scrollContainerCallbackRef = _b.scrollContainerCallbackRef, handleArrowsClick = _b.handleArrowsClick, toggleMoreRows = _b.toggleMoreRows, showMore = _b.showMore;
|
|
13796
|
+
var cssVariablesStyle = __assign(__assign(__assign(__assign({ '--tableWidth': headerWidth + "px" }, (cellWidth ? { '--cellWidth': cellWidth + "px" } : {})), (firstColumnWidth
|
|
13797
|
+
? { '--firstColumnWidth': firstColumnWidth + "px" }
|
|
13798
|
+
: {})), (stickyHeaderTopOffset
|
|
13799
|
+
? { '--stickyHeaderTopOffset': stickyHeaderTopOffset + "px" }
|
|
13800
|
+
: {})), (growContent ? { '--growContent': '100%' } : {}));
|
|
13801
|
+
return (jsxRuntime.jsx(dist.exports.ScrollSync, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.header, styles === null || styles === void 0 ? void 0 : styles.header) }, { children: jsxRuntime.jsx(dist.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.container, (_a = {},
|
|
13802
|
+
_a[baseStyles.noScrollBars] = hideScrollBars,
|
|
13803
|
+
_a)), ref: scrollContainerCallbackRef }, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsxRuntime.jsx(TableArrows, { onClick: handleArrowsClick, active: {
|
|
13804
|
+
left: selectedTabIndex > 0,
|
|
13805
|
+
right: selectedTabIndex < data.length - 1,
|
|
13806
|
+
} }, void 0),
|
|
13745
13807
|
jsxRuntime.jsx(Row$1, { rowId: "table-header-row", cell: headers[0].cells[0], data: data, isRowHeader: true }, "table-header-row")] }), void 0) }), void 0) }), void 0) }, void 0) }), void 0),
|
|
13746
|
-
jsxRuntime.
|
|
13747
|
-
|
|
13748
|
-
|
|
13749
|
-
|
|
13750
|
-
|
|
13751
|
-
|
|
13752
|
-
|
|
13753
|
-
|
|
13754
|
-
|
|
13755
|
-
|
|
13756
|
-
|
|
13757
|
-
|
|
13758
|
-
|
|
13759
|
-
|
|
13760
|
-
|
|
13761
|
-
|
|
13762
|
-
|
|
13763
|
-
|
|
13764
|
-
|
|
13765
|
-
|
|
13766
|
-
|
|
13767
|
-
|
|
13808
|
+
jsxRuntime.jsxs("div", __assign({ ref: contentContainerRef }, { children: [Array.isArray(headers) &&
|
|
13809
|
+
headers
|
|
13810
|
+
.filter(function (headerGroup) { return !hideDetails || showMore || headerGroup.default; })
|
|
13811
|
+
.map(function (headerGroup, headerGroupIndex) {
|
|
13812
|
+
var _a, _b;
|
|
13813
|
+
var _c;
|
|
13814
|
+
var content = (_c = headerGroup.cells) === null || _c === void 0 ? void 0 : _c.map(function (cell, index) {
|
|
13815
|
+
var _a;
|
|
13816
|
+
var rowId = headerGroup.id + "-" + ((_a = cell.key) !== null && _a !== void 0 ? _a : 'addon') + "-" + index;
|
|
13817
|
+
/** Do not render the first row */
|
|
13818
|
+
if (index === 0 && headerGroupIndex === 0)
|
|
13819
|
+
return null;
|
|
13820
|
+
return (jsxRuntime.jsx(Row$1, { rowId: rowId, cell: cell, data: data }, rowId));
|
|
13821
|
+
});
|
|
13822
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.label && collapsibleSections ? (jsxRuntime.jsx(AccordionItem, __assign({ className: "mt8", title: String(headerGroup.label), headerClassName: "p24 br8", isOpen: selectedSection === String(headerGroup.label), onOpen: function () {
|
|
13823
|
+
return setSelectedSection(String(headerGroup.label));
|
|
13824
|
+
}, onClose: function () { return setSelectedSection(''); } }, { children: jsxRuntime.jsx(dist.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.container, styles === null || styles === void 0 ? void 0 : styles.container, (_a = {},
|
|
13825
|
+
_a[baseStyles.noScrollBars] = hideScrollBars,
|
|
13826
|
+
_a)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxRuntime.jsx("div", __assign({ className: baseStyles['group-container'] }, { children: content }), void 0) }), void 0) }), void 0) }, void 0) }), String(headerGroup.label))) : (jsxRuntime.jsx(dist.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.container, styles === null || styles === void 0 ? void 0 : styles.container, (_b = {},
|
|
13827
|
+
_b[baseStyles.noScrollBars] = hideScrollBars,
|
|
13828
|
+
_b)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [
|
|
13829
|
+
/**
|
|
13830
|
+
* Print a table subheader if the `label` value is present
|
|
13831
|
+
*/
|
|
13832
|
+
headerGroup.label && !collapsibleSections && (jsxRuntime.jsx("div", __assign({ className: baseStyles['group-title'] }, { children: jsxRuntime.jsx("h4", __assign({ className: "p-h4 " + baseStyles.sticky }, { children: headerGroup.label }), void 0) }), void 0)), content] }), void 0) }), void 0) }), void 0) }, void 0)) }, void 0));
|
|
13833
|
+
}),
|
|
13834
|
+
hideDetails && (jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", __assign({ className: "w100 d-flex p-a p-h4 c-pointer " + baseStyles['show-details-button'], onClick: toggleMoreRows, type: "button" }, { children: [showMore ? 'Hide details' : 'Show details', jsxRuntime.jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }, void 0));
|
|
13768
13835
|
};
|
|
13769
13836
|
|
|
13770
13837
|
var css_248z$1 = ".style-module_background-container__2Gjka {\n position: relative;\n display: inline-block;\n background-color: var(--ds-primary-100);\n border-radius: 8px;\n padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n display: flex;\n align-items: center;\n}\n\n.style-module_chip__3rgLT {\n cursor: pointer;\n z-index: 2;\n padding-left: 16px;\n padding-right: 16px;\n}\n\n.style-module_select-chip-background__YCAyw {\n position: absolute;\n background-color: white;\n border-radius: 8px;\n top: 8px;\n z-index: 1;\n transition: width 0.3s, left 0.3s;\n}";
|