@mailstep/design-system 0.8.16-beta.1 → 0.8.16-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/package.json +12 -6
  2. package/ui/Blocks/CommonGrid/CommonGridContainer.js +3 -9
  3. package/ui/Blocks/CommonGrid/HoC/withReduxActions.js +0 -1
  4. package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts +0 -3
  5. package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js +8 -16
  6. package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts +0 -1
  7. package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js +10 -29
  8. package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts +0 -1
  9. package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js +5 -17
  10. package/ui/Blocks/CommonGrid/components/Filters/TextRange/TextRange.js +1 -1
  11. package/ui/Blocks/CommonGrid/components/GridInfo/index.js +1 -3
  12. package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.d.ts +1 -1
  13. package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js +2 -2
  14. package/ui/Blocks/CommonGrid/components/Table.js +1 -1
  15. package/ui/Blocks/CommonGrid/store/index.d.ts +6 -4
  16. package/ui/Blocks/CommonGrid/store/index.js +2 -9
  17. package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.d.ts +0 -30
  18. package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +9 -59
  19. package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts +0 -2
  20. package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +9 -19
  21. package/ui/Blocks/CommonGrid/styles.d.ts +0 -1
  22. package/ui/Blocks/CommonGrid/styles.js +3 -6
  23. package/ui/Blocks/CommonGrid/types.d.ts +0 -1
  24. package/ui/Blocks/CommonGrid/utils/index.d.ts +0 -2
  25. package/ui/Blocks/CommonGrid/utils/index.js +0 -10
  26. package/ui/Blocks/Modal/styles.js +6 -6
  27. package/ui/Elements/DropdownMenu/components/MenuItem.js +1 -1
  28. package/ui/Elements/Icon/icons/index.d.ts +0 -2
  29. package/ui/Elements/Icon/icons/index.js +0 -2
  30. package/ui/Elements/Select/components/CountMultiValue.js +2 -2
  31. package/ui/Elements/Select/themes/selectStyles.js +15 -15
  32. package/ui/Forms/Checkbox/styles.js +2 -2
  33. package/ui/Forms/Input/styles.js +2 -2
  34. package/ui/ThemeProvider/ThemeProvider.d.ts +2 -1
  35. package/ui/ThemeProvider/ThemeProvider.js +1 -1
  36. package/ui/ThemeProvider/themes/dark.d.ts +153 -0
  37. package/ui/ThemeProvider/themes/dark.js +14 -0
  38. package/ui/ThemeProvider/themes/default.d.ts +1 -0
  39. package/ui/ThemeProvider/themes/default.js +1 -0
  40. package/ui/ThemeProvider/themes/index.d.ts +153 -1
  41. package/ui/ThemeProvider/themes/index.js +3 -3
  42. package/ui/ThemeProvider/types.d.ts +13 -33
  43. package/ui/index.es.js +14128 -14297
  44. package/ui/index.umd.js +468 -505
  45. package/ui/utils/index.js +1 -1
  46. package/ui/utils/translations.d.ts +4 -1
  47. package/ui/utils/translations.js +2 -2
  48. package/ui/Blocks/CommonGrid/components/MobileFilterModal.d.ts +0 -20
  49. package/ui/Blocks/CommonGrid/components/MobileFilterModal.js +0 -69
  50. package/ui/Blocks/CommonGrid/components/MobileOverlayWrapper.d.ts +0 -1
  51. package/ui/Blocks/CommonGrid/components/MobileOverlayWrapper.js +0 -7
  52. package/ui/Blocks/CommonGrid/components/MobileSortModal.d.ts +0 -13
  53. package/ui/Blocks/CommonGrid/components/MobileSortModal.js +0 -34
  54. package/ui/Elements/Icon/icons/Filter.d.ts +0 -4
  55. package/ui/Elements/Icon/icons/Filter.js +0 -13
  56. package/ui/Elements/Icon/icons/Sort.d.ts +0 -4
  57. package/ui/Elements/Icon/icons/Sort.js +0 -13
  58. package/ui/ThemeProvider/themes/light.d.ts +0 -4
  59. package/ui/ThemeProvider/themes/light.js +0 -7
package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js CHANGED
@@ -1,12 +1,3 @@
1
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
2
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
3
- if (ar || !(i in from)) {
4
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
5
- ar[i] = from[i];
6
- }
7
- }
8
- return to.concat(ar || Array.prototype.slice.call(from));
9
- };
10
1
  import { ComplexCell } from '../components/ComplexCell';
11
2
  import { EnumCellExample } from '../components/EnumCellExample';
12
3
  import { enumValues } from './utils';
@@ -110,19 +101,18 @@ export var columnDefinitions = [
110
101
  flexBasis: 350,
111
102
  cellComponent: ComplexCell
112
103
  },
104
+ {
105
+ name: 'stickyColumn',
106
+ title: 'Sticky Column',
107
+ flexBasis: 160,
108
+ alwaysOn: true,
109
+ sticky: true,
110
+ stickTo: 'right'
111
+ },
113
112
  {
114
113
  name: 'alwaysOffColumn',
115
114
  title: 'Always Off Column',
116
115
  flexBasis: 0,
117
- alwaysOff: true
116
+ alwaysOff: true,
118
117
  }
119
118
  ];
120
- export var stickyColumn = {
121
- name: 'stickyColumn',
122
- title: 'Sticky Column',
123
- flexBasis: 160,
124
- alwaysOn: true,
125
- sticky: true,
126
- stickTo: 'right'
127
- };
128
- export var columnDefinitionsWithSticky = __spreadArray(__spreadArray([], columnDefinitions, true), [stickyColumn], false);
package/ui/Blocks/CommonGrid/styles.d.ts CHANGED
@@ -16,5 +16,4 @@ export declare const CommonGridWithStyles: import('styled-components').StyledCom
16
16
  }>, import('@xstyled/system').Theme, {
17
17
  withButtonStrip: boolean;
18
18
  hasGroupsOrFilters: boolean;
19
- hasGroups: boolean;
20
19
  }, never>;
package/ui/Blocks/CommonGrid/styles.js CHANGED
@@ -21,17 +21,14 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
21
21
  var withPagination = _a.withPagination;
22
22
  return (withPagination ? gridFooterHeight : 0);
23
23
  });
24
- export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: auto;\n padding: 10px;\n flex-wrap: wrap;\n z-index: 3;\n\n @media (min-width: 768px) {\n min-height: ", "px;\n padding: 18px 20px;\n }\n"], ["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: auto;\n padding: 10px;\n flex-wrap: wrap;\n z-index: 3;\n\n @media (min-width: 768px) {\n min-height: ", "px;\n padding: 18px 20px;\n }\n"])), gridButtonStripHeight);
25
- export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n\n & .filterRow {\n display: none;\n }\n\n @media (min-width: 1023px) {\n & .gridHead {\n height: ", "px;\n }\n & .filterRow {\n display: flex;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n\n & .filterRow {\n display: none;\n }\n\n @media (min-width: 1023px) {\n & .gridHead {\n height: ", "px;\n }\n & .filterRow {\n display: flex;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), function (_a) {
24
+ export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"])), gridButtonStripHeight);
25
+ export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: neutral20;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: neutral20;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background-color: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: neutral20;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: neutral20;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background-color: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), function (_a) {
26
26
  var withButtonStrip = _a.withButtonStrip;
27
27
  return (withButtonStrip ? gridButtonStripHeight : 0);
28
28
  }, th('fonts.primary'), gridRowHeight, function (_a) {
29
- var hasGroups = _a.hasGroups;
30
- return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
31
- }, th('colors.lightGray6'), function (_a) {
32
29
  var hasGroupsOrFilters = _a.hasGroupsOrFilters;
33
30
  return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
34
- }, th('fonts.primary'), function (_a) {
31
+ }, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
35
32
  var theme = _a.theme;
36
33
  return theme.colors.white;
37
34
  });
package/ui/Blocks/CommonGrid/types.d.ts CHANGED
@@ -229,7 +229,6 @@ export type GridActionsType = {
229
229
  setFilters?: (filters: Filtering) => void;
230
230
  resetFilters?: () => void;
231
231
  addSorting?: (column: string, direction: SortingValueType) => void;
232
- resetSorting?: () => void;
233
232
  openConfigForm?: () => void;
234
233
  closeConfigForm?: () => void;
235
234
  clearSettings?: () => void;
package/ui/Blocks/CommonGrid/utils/index.d.ts CHANGED
@@ -19,7 +19,5 @@ export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
19
19
  export declare const getGroupClassNames: (group?: Group) => string;
20
20
  export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
21
21
  export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
22
- /** Returns true when a filter value should be counted / applied */
23
- export declare const isFilterActive: (value: any) => boolean;
24
22
  export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;
25
23
  export {};
package/ui/Blocks/CommonGrid/utils/index.js CHANGED
@@ -76,16 +76,6 @@ export var getFilters = function (optimizeFilters) {
76
76
  }
77
77
  return filters;
78
78
  };
79
- /** Returns true when a filter value should be counted / applied */
80
- export var isFilterActive = function (value) {
81
- if (value == null)
82
- return false;
83
- if (Array.isArray(value))
84
- return !!value.length;
85
- if (typeof value === 'object')
86
- return value.value != null && value.value !== '';
87
- return value !== '';
88
- };
89
79
  export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
90
80
  var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
91
81
  var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
package/ui/Blocks/Modal/styles.js CHANGED
@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
- import styled, { css, th } from '@xstyled/styled-components';
6
5
  import { createRgba } from '../../utils';
6
+ import styled, { css, th } from '@xstyled/styled-components';
7
7
  var Component;
8
8
  (function (Component) {
9
9
  Component["Header"] = "header";
@@ -17,19 +17,19 @@ var variantStyles = function (component, variant) {
17
17
  header: {
18
18
  default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 20px;\n border-bottom: 1px solid ", ";\n @media (min-width: 576px) {\n padding: 30px;\n border-bottom: 0;\n }\n "], ["\n padding: 20px;\n border-bottom: 1px solid ", ";\n @media (min-width: 576px) {\n padding: 30px;\n border-bottom: 0;\n }\n "])), th.color('lightGray6')),
19
19
  compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 20px 20px;\n border-bottom: 1px solid ", ";\n "], ["\n padding: 20px 20px;\n border-bottom: 1px solid ", ";\n "])), th.color('lightGray6')),
20
- mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 20px;\n "], ["\n padding: 20px;\n "]))),
20
+ mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 20px;\n "], ["\n padding: 20px;\n "])))
21
21
  },
22
22
  dialogWindow: {
23
23
  default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "], ["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "]))),
24
24
  compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "], ["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "]))),
25
- mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 0;\n max-width: 100% !important;\n "], ["\n border-radius: 0;\n max-width: 100% !important;\n "]))),
25
+ mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 0;\n max-width: 100% !important;\n "], ["\n border-radius: 0;\n max-width: 100% !important;\n "])))
26
26
  },
27
27
  contentContainer: {
28
28
  default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 20px 20px 15px;\n @media (min-width: 576px) {\n padding: 30px;\n }\n "], ["\n padding: 20px 20px 15px;\n @media (min-width: 576px) {\n padding: 30px;\n }\n "]))),
29
29
  compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 20px 20px 15px;\n "], ["\n padding: 20px 20px 15px;\n "]))),
30
- mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "]))),
30
+ mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
31
31
  },
32
- title: {},
32
+ title: {}
33
33
  }[component][variant]);
34
34
  };
35
35
  export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"], ["\n position: fixed;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"])), function (_a) {
@@ -38,7 +38,7 @@ export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 =
38
38
  });
39
39
  export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"], ["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"])), function (_a) {
40
40
  var $backgroundColor = _a.$backgroundColor;
41
- return $backgroundColor || '#fefefe';
41
+ return $backgroundColor || th.color('white');
42
42
  }, function (_a) {
43
43
  var $minWidth = _a.$minWidth;
44
44
  return $minWidth || '10%';
package/ui/Elements/DropdownMenu/components/MenuItem.js CHANGED
@@ -18,7 +18,7 @@ import { useCallback } from 'react';
18
18
  import { useLocation } from 'react-router';
19
19
  import Link from '../../Link/Link';
20
20
  import styled, { css } from '@xstyled/styled-components';
21
- var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n text-decoration: none;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"], ["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n text-decoration: none;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"])), function (_a) {
21
+ var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"], ["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"])), function (_a) {
22
22
  var $hasSeparator = _a.$hasSeparator;
23
23
  return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
24
24
  }, function (_a) {
package/ui/Elements/Icon/icons/index.d.ts CHANGED
@@ -87,5 +87,3 @@ export { ArrowsLeftRight } from './ArrowsLeftRight';
87
87
  export { ArrowsUpDown } from './ArrowsUpDown';
88
88
  export { Weight } from './Weight';
89
89
  export { ArrowUpRightDownLeft } from './ArrowUpRightDownLeft';
90
- export { Filter } from './Filter';
91
- export { Sort } from './Sort';
package/ui/Elements/Icon/icons/index.js CHANGED
@@ -87,5 +87,3 @@ export { ArrowsLeftRight } from './ArrowsLeftRight';
87
87
  export { ArrowsUpDown } from './ArrowsUpDown';
88
88
  export { Weight } from './Weight';
89
89
  export { ArrowUpRightDownLeft } from './ArrowUpRightDownLeft';
90
- export { Filter } from './Filter';
91
- export { Sort } from './Sort';
package/ui/Elements/Select/components/CountMultiValue.js CHANGED
@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
17
17
  import { components as selectComponents } from 'react-select';
18
18
  import styled, { th } from '@xstyled/styled-components';
19
19
  // MultiValue container with count of selected options
20
- var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"], ["\n background: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"])), th.color('lightGray7'));
20
+ var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"], ["\n background-color: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"])), th.color('lightGray7'));
21
21
  var CountMultiValue = function (props) {
22
22
  var _a, _b;
23
23
  var shortValues = props.selectProps.shortValues;
@@ -26,7 +26,7 @@ var CountMultiValue = function (props) {
26
26
  if (!shortValues) {
27
27
  return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
28
28
  }
29
- if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
29
+ if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) === ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
30
30
  return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
31
31
  }
32
32
  else {
package/ui/Elements/Select/themes/selectStyles.js CHANGED
@@ -18,9 +18,9 @@ export var CustomStyles = {
18
18
  var colors = theme.colors;
19
19
  return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
20
20
  fontWeight: theme.textWeightNormal,
21
- fontFamily: theme.font,
21
+ fontFamily: theme.font
22
22
  }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
23
- color: isDisabled ? colors.defaultControlColor : !!selectProps.value ? colors.inputTextColor : colors.defaultControlColor,
23
+ color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
24
24
  } });
25
25
  },
26
26
  valueContainer: function (styles, _a) {
@@ -37,10 +37,10 @@ export var CustomStyles = {
37
37
  },
38
38
  multiValue: function (styles, state) {
39
39
  var theme = state.theme;
40
- return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
41
- color: theme.colors.inputTextColor,
40
+ return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.lightGray7, borderRadius: '4px', '& svg': {
41
+ color: theme.colors.inputTextColor
42
42
  }, ' > div': {
43
- fontSize: '12px',
43
+ fontSize: '12px'
44
44
  } });
45
45
  },
46
46
  multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
@@ -87,8 +87,8 @@ export var CustomStyles = {
87
87
  ? theme.colors.hoverToActiveOptionBackground
88
88
  : !isDisabled
89
89
  ? theme.colors.menuHoverBackgroundColor
90
- : undefined,
91
- },
90
+ : undefined
91
+ }
92
92
  };
93
93
  },
94
94
  menu: function (styles, state) {
@@ -103,21 +103,21 @@ export var CustomStyles = {
103
103
  height: '47px',
104
104
  backgroundColor: theme.colors.defaultControlColor,
105
105
  '&:hover': {
106
- backgroundColor: theme.colors.dropdownIndicatorColor,
107
- },
106
+ backgroundColor: theme.colors.dropdownIndicatorColor
107
+ }
108
108
  }, '::-webkit-scrollbar': {
109
- width: '10px',
109
+ width: '10px'
110
110
  }, '::-webkit-scrollbar-track': {
111
111
  backgroundColor: theme.colors.menuHoverBackgroundColor,
112
- borderRadius: '6px',
112
+ borderRadius: '6px'
113
113
  } });
114
114
  },
115
115
  dropdownIndicator: function (styles, state) {
116
116
  var theme = state.theme, isDisabled = state.isDisabled;
117
117
  return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', '& svg': {
118
- stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor,
118
+ stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor
119
119
  }, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
120
- padding: '0px 10px 0px 1px',
120
+ padding: '0px 10px 0px 1px'
121
121
  } });
122
122
  },
123
123
  clearIndicator: function (styles, state) {
@@ -125,7 +125,7 @@ export var CustomStyles = {
125
125
  return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
126
126
  },
127
127
  indicatorSeparator: function () { return ({
128
- display: 'none',
128
+ display: 'none'
129
129
  }); }
130
130
  };
131
131
  export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
@@ -144,7 +144,7 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
144
144
  dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
145
145
  inputBorderHoverColor: th.color('gray5')({ theme: theme }),
146
146
  activeOptionBackground: th.color('red20')({ theme: theme }),
147
- hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
147
+ hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
148
148
  };
149
149
  return function (reactSelectTheme) {
150
150
  return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
package/ui/Forms/Checkbox/styles.js CHANGED
@@ -2,9 +2,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
- import styled, { th } from '@xstyled/styled-components';
6
5
  import { Icon } from '../../Elements/Icon';
7
- export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"])), function (_a) {
6
+ import styled, { th } from '@xstyled/styled-components';
7
+ export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: transparent;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: transparent;\n border-color: lightGray5;\n }\n"])), function (_a) {
8
8
  var size = _a.size;
9
9
  return size;
10
10
  }, function (_a) {
package/ui/Forms/Input/styles.js CHANGED
@@ -29,10 +29,10 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
29
29
  export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
30
30
  export var StyledInput = styled.input.attrs(function (props) { return ({
31
31
  as: props.$asTextArea ? 'textarea' : 'input'
32
- }); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
32
+ }); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: transparent;\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: transparent;\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
33
33
  var $isInvalid = _a.$isInvalid;
34
34
  return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
35
- }, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
35
+ }, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
36
36
  var big = _a.big;
37
37
  return big
38
38
  ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
package/ui/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import { FC } from 'react';
1
2
  import { Props } from './types';
2
3
 
3
4
  export declare const LanguageContext: import('react').Context<string>;
4
- declare const MailstepThemeProvider: ({ children, theme, preflight, language }: Props) => import("react/jsx-runtime").JSX.Element;
5
+ declare const MailstepThemeProvider: FC<Props>;
5
6
  export default MailstepThemeProvider;
package/ui/ThemeProvider/ThemeProvider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { createContext } from 'react';
2
3
  import { ThemeProvider, Preflight } from '@xstyled/styled-components';
3
4
  import themes from './themes';
4
- import { createContext } from 'react';
5
5
  export var LanguageContext = createContext('en');
6
6
  var MailstepThemeProvider = function (_a) {
7
7
  var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;
package/ui/ThemeProvider/themes/dark.d.ts ADDED
@@ -0,0 +1,153 @@
1
+ declare const darkTheme: {
2
+ colors: {
3
+ bgLightGray: string;
4
+ bgLightGray1: string;
5
+ typoPrimary: string;
6
+ textPrimary: string;
7
+ white: string;
8
+ lightGray7: string;
9
+ neutral20: string;
10
+ red1: string;
11
+ red20: string;
12
+ red30: string;
13
+ blue2: string;
14
+ lightGray1: string;
15
+ blue3: string;
16
+ lightGray2: string;
17
+ lightGray3: string;
18
+ lightGray4: string;
19
+ lightGray5: string;
20
+ lightGray6: string;
21
+ neutral10: string;
22
+ neutral300: string;
23
+ neutral500: string;
24
+ gray: string;
25
+ gray1: string;
26
+ gray2: string;
27
+ gray3: string;
28
+ gray4: string;
29
+ gray5: string;
30
+ blue1: string;
31
+ blue4: string;
32
+ textTertiary: string;
33
+ blue10: string;
34
+ blue20: string;
35
+ blue30: string;
36
+ blue40: string;
37
+ blue50: string;
38
+ blue60: string;
39
+ blue70: string;
40
+ blue80: string;
41
+ blue90: string;
42
+ teal20: string;
43
+ teal40: string;
44
+ teal50: string;
45
+ teal60: string;
46
+ teal70: string;
47
+ teal80: string;
48
+ teal90: string;
49
+ green10: string;
50
+ green20: string;
51
+ green30: string;
52
+ green50: string;
53
+ green60: string;
54
+ green70: string;
55
+ green80: string;
56
+ green90: string;
57
+ green: string;
58
+ successColor: string;
59
+ darkGreen: string;
60
+ orange20: string;
61
+ orange30: string;
62
+ orange50: string;
63
+ orange60: string;
64
+ orange80: string;
65
+ yellow10: string;
66
+ yellow20: string;
67
+ yellow60: string;
68
+ yellow70: string;
69
+ yellow1: string;
70
+ yellow2: string;
71
+ red10: string;
72
+ red50: string;
73
+ red70: string;
74
+ red2: string;
75
+ red3: string;
76
+ red60: string;
77
+ red80: string;
78
+ dangerColor: string;
79
+ purple20: string;
80
+ purple40: string;
81
+ purple50: string;
82
+ purple60: string;
83
+ purple80: string;
84
+ purple90: string;
85
+ magenta10: string;
86
+ magenta20: string;
87
+ magenta30: string;
88
+ magenta40: string;
89
+ magenta50: string;
90
+ magenta60: string;
91
+ magenta70: string;
92
+ magenta80: string;
93
+ magenta90: string;
94
+ };
95
+ shadows: {
96
+ dialogShadow: string;
97
+ boxShadow: string;
98
+ dropShadow: string;
99
+ inputFocusBoxShadow: string;
100
+ dropdownMenuShadow: string;
101
+ tooltipBoxShadow: string;
102
+ cardShadow: string;
103
+ smooth: string;
104
+ headerShadow: string;
105
+ headerShadowB: string;
106
+ headerShadowNotifications: string;
107
+ cornerDialogShadow: string;
108
+ gridShadow: string;
109
+ tooltipShadow: string;
110
+ };
111
+ breakpoints: string[];
112
+ fonts: {
113
+ primary: string;
114
+ heading: string;
115
+ };
116
+ fontLinks: string[];
117
+ fontSizes: string[];
118
+ lineHeights: number[];
119
+ fontWeights: {
120
+ light: number;
121
+ normal: number;
122
+ medium: number;
123
+ semiBold: number;
124
+ bold: number;
125
+ };
126
+ letterSpacings: {
127
+ default: null;
128
+ sm: string;
129
+ md: string;
130
+ lg: string;
131
+ };
132
+ borders: {
133
+ slim: string;
134
+ mediumSlim: string;
135
+ medium: string;
136
+ mediumThick: string;
137
+ thick: string;
138
+ };
139
+ radii: {
140
+ sm: string;
141
+ md: string;
142
+ ml: string;
143
+ lg: string;
144
+ xl: string;
145
+ };
146
+ space: number[];
147
+ transitions: {
148
+ simpleLong: string;
149
+ inputTransition: string;
150
+ };
151
+ zIndices: number[];
152
+ };
153
+ export default darkTheme;
package/ui/ThemeProvider/themes/dark.js ADDED
@@ -0,0 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import defaultTheme from './default';
13
+ var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#131A27', bgLightGray1: '#2a4054', typoPrimary: '#ffffff', textPrimary: '#ffffff', white: '#2a4054', lightGray7: '#5f5f5f', neutral20: '#2a4054', red1: '#d0d0d0', red20: '#5f5f5f', red30: '#8594A5', blue2: '#ffffff', lightGray1: '#162C3F', blue3: '#2a4054' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
14
+ export default darkTheme;
package/ui/ThemeProvider/themes/default.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const defaultTheme: {
11
11
  lightGray5: string;
12
12
  lightGray6: string;
13
13
  lightGray7: string;
14
+ neutral10: string;
14
15
  neutral20: string;
15
16
  neutral300: string;
16
17
  neutral500: string;
package/ui/ThemeProvider/themes/default.js CHANGED
@@ -11,6 +11,7 @@ var defaultTheme = {
11
11
  lightGray5: '#A3B3C1',
12
12
  lightGray6: '#D2D8DF',
13
13
  lightGray7: '#E7EBEF',
14
+ neutral10: '#FAFBFC',
14
15
  neutral20: '#F1F5F9',
15
16
  neutral300: '#5E6C84',
16
17
  neutral500: '#42526E',