@mailstep/design-system 0.8.32 → 0.8.33-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +76 -76
  2. package/package.json +148 -148
  3. package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js +1 -1
  4. package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.js +1 -1
  5. package/ui/Blocks/Modal/styles.js +1 -1
  6. package/ui/Elements/Badge/Badge.js +1 -1
  7. package/ui/Elements/Button/styles.js +1 -1
  8. package/ui/Elements/ErrorMessage/ErrorMessage.js +2 -2
  9. package/ui/Elements/HighlightBox/HighlightBox.d.ts +1 -0
  10. package/ui/Elements/HighlightBox/HighlightBox.js +14 -12
  11. package/ui/Elements/Logo/assets/mailship/mailship-logo.svg +12 -12
  12. package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg +17 -17
  13. package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg +17 -17
  14. package/ui/Elements/Logo/assets/mailstock/mailstock.svg +12 -12
  15. package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg +46 -46
  16. package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg +19 -19
  17. package/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.svg +4 -4
  18. package/ui/Elements/Logo/assets/warehouse/manager.svg +5 -5
  19. package/ui/Elements/Logo/assets/warehouse/manager2.svg +5 -5
  20. package/ui/Elements/Logo/assets/warehouse/manager3.svg +4 -4
  21. package/ui/Elements/Select/themes/selectStyles.js +3 -2
  22. package/ui/Elements/Select/types.d.ts +1 -0
  23. package/ui/Elements/Toggle/Toggle.js +2 -2
  24. package/ui/Forms/Input/styles.js +4 -4
  25. package/ui/ThemeProvider/themes/dark.d.ts +13 -9
  26. package/ui/ThemeProvider/themes/dark.js +7 -12
  27. package/ui/ThemeProvider/themes/default.d.ts +4 -0
  28. package/ui/ThemeProvider/themes/default.js +5 -1
  29. package/ui/ThemeProvider/themes/index.d.ts +21 -9
  30. package/ui/ThemeProvider/themes/mailwise.d.ts +4 -0
package/README.md CHANGED
@@ -1,76 +1,76 @@
1
- # Mailstep Design-system
2
-
3
- Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook
4
-
5
- ## Peer dependencies
6
- - @xstyled/styled-components
7
- - styled-component
8
- - react-router
9
- - react-router-dom
10
-
11
- ### How to develoop
12
- ```
13
- yarn install
14
- yarn dev
15
- ```
16
-
17
- ### How to use
18
- ```
19
- yarn add @mailstep/design-system
20
- ```
21
- and add `import 'swiper/css'` somewhere to the root app.
22
-
23
-
24
- #### How to publish
25
- In root folder run
26
-
27
- ```
28
- npm run build
29
- npm run deploy
30
- ```
31
-
32
- ## Components
33
- There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
34
-
35
- ### Elements
36
- | Component | Description | Info |
37
- |----------|:-------------:|------:|
38
- | Alert | TBD | [More info](ui/Elements/Alert/README.md) |
39
- | Avatar | TBD | [More info](ui/Elements/Avatar/README.md) |
40
- | Badge | TBD | [More info](ui/Elements/Badge/README.md) |
41
- | BorderedBox | TBD | [More info](ui/Elements/BorderedBox/README.md) |
42
- | Button | TBD | [More info](ui/Elements/Button/README.md) |
43
- | Card | TBD | [More info](ui/Elements/Card/README.md) |
44
- | DialogOverlay | TBD | [More info](ui/Elements/DialogOverlay/README.md) |
45
- | Dropdown | TBD | [More info](ui/Elements/Dropdown/README.md) |
46
- | ErrorMessage | TBD | [More info](ui/Elements/ErrorMessage/README.md) |
47
- | Icon | TBD | [More info](ui/Elements/Icon/README.md) |
48
- | Image | TBD | [More info](ui/Elements/Image/README.md) |
49
- | Label | TBD | [More info](ui/Elements/Label/README.md) |
50
- | Link | TBD | [More info](ui/Elements/Link/README.md) |
51
- | Logo | TBD | [More info](ui/Elements/Logo/README.md) |
52
- | Overlay | TBD | [More info](ui/Elements/Overlay/README.md) |
53
- | Pagination | TBD | [More info](ui/Elements/Pagination/README.md) |
54
- | Paragraph | TBD | [More info](ui/Elements/Paragraph/README.md) |
55
- | Spinner | TBD | [More info](ui/Elements/Spinner/README.md) |
56
-
57
- ### Blocks
58
- | Component | Description | Info |
59
- |----------|:-------------:|------:|
60
- | TBD | TBD | TBD |
61
-
62
- ### Forms
63
- | Component | Description | Info |
64
- |----------|:-------------:|------:|
65
- | TBD | TBD | TBD |
66
-
67
- ### System
68
- | Component | Description | Info |
69
- |----------|:-------------:|------:|
70
- | Fonts | Import adjusted fonts of inter | TBD |
71
-
72
- ### Theme Provider
73
- | Component | Description | Info |
74
- |----------|:-------------:|------:|
75
- | Theme Provider | TBD | [More info](ui/ThemeProvider/README.md) |
76
-
1
+ # Mailstep Design-system
2
+
3
+ Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook
4
+
5
+ ## Peer dependencies
6
+ - @xstyled/styled-components
7
+ - styled-component
8
+ - react-router
9
+ - react-router-dom
10
+
11
+ ### How to develoop
12
+ ```
13
+ yarn install
14
+ yarn dev
15
+ ```
16
+
17
+ ### How to use
18
+ ```
19
+ yarn add @mailstep/design-system
20
+ ```
21
+ and add `import 'swiper/css'` somewhere to the root app.
22
+
23
+
24
+ #### How to publish
25
+ In root folder run
26
+
27
+ ```
28
+ npm run build
29
+ npm run deploy
30
+ ```
31
+
32
+ ## Components
33
+ There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
34
+
35
+ ### Elements
36
+ | Component | Description | Info |
37
+ |----------|:-------------:|------:|
38
+ | Alert | TBD | [More info](ui/Elements/Alert/README.md) |
39
+ | Avatar | TBD | [More info](ui/Elements/Avatar/README.md) |
40
+ | Badge | TBD | [More info](ui/Elements/Badge/README.md) |
41
+ | BorderedBox | TBD | [More info](ui/Elements/BorderedBox/README.md) |
42
+ | Button | TBD | [More info](ui/Elements/Button/README.md) |
43
+ | Card | TBD | [More info](ui/Elements/Card/README.md) |
44
+ | DialogOverlay | TBD | [More info](ui/Elements/DialogOverlay/README.md) |
45
+ | Dropdown | TBD | [More info](ui/Elements/Dropdown/README.md) |
46
+ | ErrorMessage | TBD | [More info](ui/Elements/ErrorMessage/README.md) |
47
+ | Icon | TBD | [More info](ui/Elements/Icon/README.md) |
48
+ | Image | TBD | [More info](ui/Elements/Image/README.md) |
49
+ | Label | TBD | [More info](ui/Elements/Label/README.md) |
50
+ | Link | TBD | [More info](ui/Elements/Link/README.md) |
51
+ | Logo | TBD | [More info](ui/Elements/Logo/README.md) |
52
+ | Overlay | TBD | [More info](ui/Elements/Overlay/README.md) |
53
+ | Pagination | TBD | [More info](ui/Elements/Pagination/README.md) |
54
+ | Paragraph | TBD | [More info](ui/Elements/Paragraph/README.md) |
55
+ | Spinner | TBD | [More info](ui/Elements/Spinner/README.md) |
56
+
57
+ ### Blocks
58
+ | Component | Description | Info |
59
+ |----------|:-------------:|------:|
60
+ | TBD | TBD | TBD |
61
+
62
+ ### Forms
63
+ | Component | Description | Info |
64
+ |----------|:-------------:|------:|
65
+ | TBD | TBD | TBD |
66
+
67
+ ### System
68
+ | Component | Description | Info |
69
+ |----------|:-------------:|------:|
70
+ | Fonts | Import adjusted fonts of inter | TBD |
71
+
72
+ ### Theme Provider
73
+ | Component | Description | Info |
74
+ |----------|:-------------:|------:|
75
+ | Theme Provider | TBD | [More info](ui/ThemeProvider/README.md) |
76
+
package/package.json CHANGED
@@ -1,148 +1,148 @@
1
- {
2
- "name": "@mailstep/design-system",
3
- "version": "0.8.32",
4
- "license": "ISC",
5
- "type": "module",
6
- "main": "./ui/index.js",
7
- "module": "./ui/index.js",
8
- "types": "./ui/index.d.ts",
9
- "files": [
10
- "ui",
11
- "assets"
12
- ],
13
- "scripts": {
14
- "storybook": "storybook dev -p 6006",
15
- "build": "rm -rf ./build && tsdown && tsc --emitDeclarationOnly && cp package.json build && cp README.md build",
16
- "build:win": "tsdown && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
17
- "build-storybook": "storybook build",
18
- "deploy": "npm run build && npm publish ./build",
19
- "deploy:win": "npm run build:win && npm publish ./build",
20
- "dev": "yarn storybook",
21
- "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
22
- "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
23
- "prepare": "husky install"
24
- },
25
- "lint-staged": {
26
- "*.{js,ts,tsx}": "yarn eslint --fix"
27
- },
28
- "devDependencies": {
29
- "@dnd-kit/core": "^6.3.1",
30
- "@dnd-kit/modifiers": "^9.0.0",
31
- "@dnd-kit/sortable": "^10.0.0",
32
- "@fortawesome/fontawesome-svg-core": "^6.3.0",
33
- "@fortawesome/free-brands-svg-icons": "^6.1.1",
34
- "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
35
- "@fortawesome/pro-light-svg-icons": "^6.0.0",
36
- "@fortawesome/pro-regular-svg-icons": "^6.0.0",
37
- "@fortawesome/pro-solid-svg-icons": "^6.3.0",
38
- "@fortawesome/react-fontawesome": "^0.2.0",
39
- "@lingui/core": "^5.0.0",
40
- "@lingui/react": "^5.0.0",
41
- "@popperjs/core": "^2.11.8",
42
- "@storybook/addon-designs": "^11.1.2",
43
- "@storybook/addon-docs": "10.2.8",
44
- "@storybook/addon-links": "10.2.8",
45
- "@storybook/react-webpack5": "10.2.8",
46
- "@svgr/rollup": "^8.0.1",
47
- "@swc/core": "^1.15.30",
48
- "@trivago/prettier-plugin-sort-imports": "^4.3.0",
49
- "@types/faker": "^4.1.11",
50
- "@types/lodash": "^4.17.13",
51
- "@types/luxon": "^3.4.2",
52
- "@types/node": "^20.1.7",
53
- "@types/react": "^19.2.2",
54
- "@types/react-beautiful-dnd": "^13.1.2",
55
- "@types/react-dom": "^19.2.2",
56
- "@types/react-helmet": "^6.1.11",
57
- "@types/react-router": "^5.1.20",
58
- "@types/react-router-dom": "^5.3.3",
59
- "@types/styled-components": "^5.1.26",
60
- "@typescript-eslint/eslint-plugin": "^5.59.6",
61
- "@typescript-eslint/parser": "^5.59.6",
62
- "@xstyled/styled-components": "^3.8.0",
63
- "@xstyled/system": "^3.8.0",
64
- "babel-loader": "^10.1.1",
65
- "eslint": "^8.41.0",
66
- "eslint-config-prettier": "^8.8.0",
67
- "eslint-config-standard-with-typescript": "^34.0.1",
68
- "eslint-plugin-import": "^2.29.1",
69
- "eslint-plugin-n": "^17.9.0",
70
- "eslint-plugin-prettier": "^4.2.1",
71
- "eslint-plugin-promise": "^6.6.0",
72
- "eslint-plugin-react": "^7.35.0",
73
- "eslint-plugin-react-hooks": "^4.6.2",
74
- "eslint-plugin-react-perf": "^3.3.2",
75
- "eslint-plugin-storybook": "10.2.8",
76
- "faker": "^5.1.0",
77
- "husky": "^9.1.7",
78
- "immer": "^9.0.19",
79
- "lint-staged": "^16.4.0",
80
- "lodash": "^4.18.0",
81
- "luxon": "^3.4.4",
82
- "moment": "^2.30.1",
83
- "prettier": "2.8.8",
84
- "react": "^19.2.0",
85
- "react-dom": "^19.2.0",
86
- "react-helmet": "^6.1.0",
87
- "react-image": "^4.1.0",
88
- "react-onclickoutside": "^6.13.0",
89
- "react-popper": "^2.3.0",
90
- "react-redux": "*",
91
- "react-router": "^5.1.2",
92
- "react-router-dom": "^5.1.2",
93
- "react-script": "^2.0.5",
94
- "react-select": "^5.10.0",
95
- "react-use-draggable-scroll": "^0.4.7",
96
- "redux": ">=4.0.5",
97
- "reselect": "5.0.0-alpha.2",
98
- "storybook": "10.2.8",
99
- "string-width": "6.1.0",
100
- "styled-components": "^5.3.10",
101
- "swiper": "^11.0.3",
102
- "tsdown": "^0.21.9",
103
- "tslib": "^2.6.2",
104
- "typescript": "^5.9.3",
105
- "webpack": "^5.82.1"
106
- },
107
- "peerDependencies": {
108
- "@dnd-kit/core": "^6.3.1",
109
- "@dnd-kit/modifiers": "^9.0.0",
110
- "@dnd-kit/sortable": "^10.0.0",
111
- "@fortawesome/fontawesome-svg-core": "^6.3.0",
112
- "@fortawesome/free-brands-svg-icons": "^6.1.1",
113
- "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
114
- "@fortawesome/pro-light-svg-icons": "^6.0.0",
115
- "@fortawesome/pro-regular-svg-icons": "^6.0.0",
116
- "@fortawesome/pro-solid-svg-icons": "^6.3.0",
117
- "@fortawesome/react-fontawesome": "^0.2.0",
118
- "@lingui/core": "^5.0.0",
119
- "@lingui/react": "^5.0.0",
120
- "@popperjs/core": "^2.11.8",
121
- "@xstyled/styled-components": "^3.8.0",
122
- "@xstyled/system": "^3.8.0",
123
- "immer": "^9.0.19",
124
- "lodash": "^4.17.21",
125
- "luxon": "^3.4.4",
126
- "moment": "^2.30.1",
127
- "react": "^19.2.0",
128
- "react-dom": "^19.2.0",
129
- "react-helmet": "^6.1.0",
130
- "react-image": "^4.1.0",
131
- "react-onclickoutside": "^6.13.0",
132
- "react-popper": "^2.3.0",
133
- "react-redux": ">=4.0.5",
134
- "react-router": "^5.1.2",
135
- "react-router-dom": "^5.1.2",
136
- "react-select": "^5.10.0",
137
- "react-use-draggable-scroll": "^0.4.7",
138
- "redux": ">=4.0.5",
139
- "reselect": "5.0.0-alpha.2",
140
- "styled-components": "^5.3.10",
141
- "swiper": "^11.0.3",
142
- "tslib": "^2.6.2",
143
- "typescript": "^5.9.3"
144
- },
145
- "resolutions": {
146
- "jackspeak": "2.1.1"
147
- }
148
- }
1
+ {
2
+ "name": "@mailstep/design-system",
3
+ "version": "0.8.33-beta.0",
4
+ "license": "ISC",
5
+ "type": "module",
6
+ "main": "./ui/index.js",
7
+ "module": "./ui/index.js",
8
+ "types": "./ui/index.d.ts",
9
+ "files": [
10
+ "ui",
11
+ "assets"
12
+ ],
13
+ "scripts": {
14
+ "storybook": "storybook dev -p 6006",
15
+ "build": "rm -rf ./build && tsdown && tsc --emitDeclarationOnly && cp package.json build && cp README.md build",
16
+ "build:win": "tsdown && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
17
+ "build-storybook": "storybook build",
18
+ "deploy": "npm run build && npm publish ./build",
19
+ "deploy:win": "npm run build:win && npm publish ./build",
20
+ "dev": "yarn storybook",
21
+ "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
22
+ "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
23
+ "prepare": "husky install"
24
+ },
25
+ "lint-staged": {
26
+ "*.{js,ts,tsx}": "yarn eslint --fix"
27
+ },
28
+ "devDependencies": {
29
+ "@dnd-kit/core": "^6.3.1",
30
+ "@dnd-kit/modifiers": "^9.0.0",
31
+ "@dnd-kit/sortable": "^10.0.0",
32
+ "@fortawesome/fontawesome-svg-core": "^6.3.0",
33
+ "@fortawesome/free-brands-svg-icons": "^6.1.1",
34
+ "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
35
+ "@fortawesome/pro-light-svg-icons": "^6.0.0",
36
+ "@fortawesome/pro-regular-svg-icons": "^6.0.0",
37
+ "@fortawesome/pro-solid-svg-icons": "^6.3.0",
38
+ "@fortawesome/react-fontawesome": "^0.2.0",
39
+ "@lingui/core": "^5.0.0",
40
+ "@lingui/react": "^5.0.0",
41
+ "@popperjs/core": "^2.11.8",
42
+ "@storybook/addon-designs": "^11.1.2",
43
+ "@storybook/addon-docs": "10.2.8",
44
+ "@storybook/addon-links": "10.2.8",
45
+ "@storybook/react-webpack5": "10.2.8",
46
+ "@svgr/rollup": "^8.0.1",
47
+ "@swc/core": "^1.15.30",
48
+ "@trivago/prettier-plugin-sort-imports": "^4.3.0",
49
+ "@types/faker": "^4.1.11",
50
+ "@types/lodash": "^4.17.13",
51
+ "@types/luxon": "^3.4.2",
52
+ "@types/node": "^20.1.7",
53
+ "@types/react": "^19.2.2",
54
+ "@types/react-beautiful-dnd": "^13.1.2",
55
+ "@types/react-dom": "^19.2.2",
56
+ "@types/react-helmet": "^6.1.11",
57
+ "@types/react-router": "^5.1.20",
58
+ "@types/react-router-dom": "^5.3.3",
59
+ "@types/styled-components": "^5.1.26",
60
+ "@typescript-eslint/eslint-plugin": "^5.59.6",
61
+ "@typescript-eslint/parser": "^5.59.6",
62
+ "@xstyled/styled-components": "^3.8.0",
63
+ "@xstyled/system": "^3.8.0",
64
+ "babel-loader": "^10.1.1",
65
+ "eslint": "^8.41.0",
66
+ "eslint-config-prettier": "^8.8.0",
67
+ "eslint-config-standard-with-typescript": "^34.0.1",
68
+ "eslint-plugin-import": "^2.29.1",
69
+ "eslint-plugin-n": "^17.9.0",
70
+ "eslint-plugin-prettier": "^4.2.1",
71
+ "eslint-plugin-promise": "^6.6.0",
72
+ "eslint-plugin-react": "^7.35.0",
73
+ "eslint-plugin-react-hooks": "^4.6.2",
74
+ "eslint-plugin-react-perf": "^3.3.2",
75
+ "eslint-plugin-storybook": "10.2.8",
76
+ "faker": "^5.1.0",
77
+ "husky": "^9.1.7",
78
+ "immer": "^9.0.19",
79
+ "lint-staged": "^16.4.0",
80
+ "lodash": "^4.18.0",
81
+ "luxon": "^3.4.4",
82
+ "moment": "^2.30.1",
83
+ "prettier": "2.8.8",
84
+ "react": "^19.2.0",
85
+ "react-dom": "^19.2.0",
86
+ "react-helmet": "^6.1.0",
87
+ "react-image": "^4.1.0",
88
+ "react-onclickoutside": "^6.13.0",
89
+ "react-popper": "^2.3.0",
90
+ "react-redux": "*",
91
+ "react-router": "^5.1.2",
92
+ "react-router-dom": "^5.1.2",
93
+ "react-script": "^2.0.5",
94
+ "react-select": "^5.10.0",
95
+ "react-use-draggable-scroll": "^0.4.7",
96
+ "redux": ">=4.0.5",
97
+ "reselect": "5.0.0-alpha.2",
98
+ "storybook": "10.2.8",
99
+ "string-width": "6.1.0",
100
+ "styled-components": "^5.3.10",
101
+ "swiper": "^11.0.3",
102
+ "tsdown": "^0.21.9",
103
+ "tslib": "^2.6.2",
104
+ "typescript": "^5.9.3",
105
+ "webpack": "^5.82.1"
106
+ },
107
+ "peerDependencies": {
108
+ "@dnd-kit/core": "^6.3.1",
109
+ "@dnd-kit/modifiers": "^9.0.0",
110
+ "@dnd-kit/sortable": "^10.0.0",
111
+ "@fortawesome/fontawesome-svg-core": "^6.3.0",
112
+ "@fortawesome/free-brands-svg-icons": "^6.1.1",
113
+ "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
114
+ "@fortawesome/pro-light-svg-icons": "^6.0.0",
115
+ "@fortawesome/pro-regular-svg-icons": "^6.0.0",
116
+ "@fortawesome/pro-solid-svg-icons": "^6.3.0",
117
+ "@fortawesome/react-fontawesome": "^0.2.0",
118
+ "@lingui/core": "^5.0.0",
119
+ "@lingui/react": "^5.0.0",
120
+ "@popperjs/core": "^2.11.8",
121
+ "@xstyled/styled-components": "^3.8.0",
122
+ "@xstyled/system": "^3.8.0",
123
+ "immer": "^9.0.19",
124
+ "lodash": "^4.17.21",
125
+ "luxon": "^3.4.4",
126
+ "moment": "^2.30.1",
127
+ "react": "^19.2.0",
128
+ "react-dom": "^19.2.0",
129
+ "react-helmet": "^6.1.0",
130
+ "react-image": "^4.1.0",
131
+ "react-onclickoutside": "^6.13.0",
132
+ "react-popper": "^2.3.0",
133
+ "react-redux": ">=4.0.5",
134
+ "react-router": "^5.1.2",
135
+ "react-router-dom": "^5.1.2",
136
+ "react-select": "^5.10.0",
137
+ "react-use-draggable-scroll": "^0.4.7",
138
+ "redux": ">=4.0.5",
139
+ "reselect": "5.0.0-alpha.2",
140
+ "styled-components": "^5.3.10",
141
+ "swiper": "^11.0.3",
142
+ "tslib": "^2.6.2",
143
+ "typescript": "^5.9.3"
144
+ },
145
+ "resolutions": {
146
+ "jackspeak": "2.1.1"
147
+ }
148
+ }
@@ -24,7 +24,7 @@ const StyledColumnButton = styled$1(Button)`
24
24
  margin-left: 8px;
25
25
 
26
26
  > span > svg {
27
- stroke: ${th$1("colors.blue2")};
27
+ stroke: ${th$1("colors.iconStroke")};
28
28
  width: 18px;
29
29
  height: 18px;
30
30
  }
@@ -29,7 +29,7 @@ const StyledIcon = styled$1.div`
29
29
  height: 20px;
30
30
  margin: 9px;
31
31
  & > svg {
32
- stroke: ${({ appearance }) => appearance === "secondary" ? th$1.color("blue2") : appearance === "tertiary" ? th$1.color("red1") : th$1.color("white")};
32
+ stroke: ${({ appearance }) => appearance === "secondary" ? th$1.color("blue2") : appearance === "tertiary" ? th$1.color("red1") : "#ffffff"};
33
33
  }
34
34
  `;
35
35
  const Separator = styled$1.div`
@@ -58,7 +58,7 @@ const DialogOverlay = styled$1.div`
58
58
  width: 100%;
59
59
  height: 100%;
60
60
  overflow: auto;
61
- background-color: ${({ backgroundColor, theme }) => createRgba(backgroundColor || theme.colors.blue2, .6)};
61
+ background-color: ${({ backgroundColor, theme }) => createRgba(backgroundColor || theme.colors.modalBackground, .6)};
62
62
  text-align: center;
63
63
 
64
64
  @media print {
@@ -8,7 +8,7 @@ const Circle = styled$1.div`
8
8
  align-items: center;
9
9
  height: ${({ size }) => size === "small" ? "16px" : "24px"};
10
10
  padding: ${({ size }) => size === "small" ? "0 5px" : "3px 8px"};
11
- color: white;
11
+ color: #fff;
12
12
  gap: 10px;
13
13
  background-color: ${({ color }) => color};
14
14
  border-radius: 29px;
@@ -44,7 +44,7 @@ const StyledButton = styled$1.button`
44
44
  &[data-variant='default'] {
45
45
  &[data-appearance='primary'] {
46
46
  background-color: red1;
47
- color: white;
47
+ color: #fff;
48
48
 
49
49
  :not(:disabled) {
50
50
  @media (hover: hover) {
@@ -26,7 +26,7 @@ const tooltip = css`
26
26
  top: 3px;
27
27
  right: 100%;
28
28
  border: mediumThick;
29
- border-color: transparent ${th.color("red1")} transparent transparent;
29
+ border-color: transparent ${th.color("inputErrorColor")} transparent transparent;
30
30
  }
31
31
  }
32
32
 
@@ -38,7 +38,7 @@ const tooltip = css`
38
38
  }
39
39
  `;
40
40
  const ErrorWrap = styled$1.div`
41
- color: red1;
41
+ color: inputErrorColor;
42
42
  font-size: 1;
43
43
  display: flex;
44
44
  align-items: flex-start;
@@ -45,6 +45,7 @@ type HighlightBoxType = {
45
45
  appearance: FlagAppearanceType;
46
46
  size?: 'default' | 'small' | 'wide' | 'fitContent';
47
47
  className?: string;
48
+ cursor?: string;
48
49
  prefix?: string;
49
50
  };
50
51
  declare const HighlightBox: React.FC<HighlightBoxType>;
@@ -25,7 +25,7 @@ const StyledHighlightBox = styled$1.div`
25
25
  height: 2.75em;
26
26
  display: flex;
27
27
  flex-flow: row wrap;
28
- width: 11rem;
28
+ width: 12rem;
29
29
  align-content: center;
30
30
  line-height: 14px;
31
31
  padding: 0.5px 12px;
@@ -40,6 +40,7 @@ const StyledHighlightBox = styled$1.div`
40
40
  }
41
41
  background-color: ${({ $bgcolor }) => $bgcolor};
42
42
  color: ${({ $fontColor }) => $fontColor};
43
+ cursor: ${({ $cursor }) => $cursor || "auto"};
43
44
  `;
44
45
  const OverflowWrap = styled$1.span`
45
46
  text-overflow: ellipsis;
@@ -47,7 +48,7 @@ const OverflowWrap = styled$1.span`
47
48
  `;
48
49
  const flagAppearanceToColorMap = {
49
50
  neutralBold: "neutral300",
50
- neutralSubtle: "neutral20",
51
+ neutralSubtle: "bgLightGray2",
51
52
  blueBold: "blue70",
52
53
  blueSubtle: "blue20",
53
54
  tealBold: "teal60",
@@ -67,30 +68,31 @@ const flagAppearanceToColorMap = {
67
68
  };
68
69
  const flagAppearanceToFontColorMap = {
69
70
  neutralBold: "white",
70
- neutralSubtle: "typoPrimary",
71
- blueBold: "white",
71
+ neutralSubtle: "#22394E",
72
+ blueBold: "#ffffff",
72
73
  blueSubtle: "blue80",
73
- tealBold: "white",
74
+ tealBold: "#ffffff",
74
75
  tealSubtle: "teal90",
75
- greenBold: "white",
76
+ greenBold: "#ffffff",
76
77
  greenSubtle: "green80",
77
- orangeBold: "white",
78
+ orangeBold: "#ffffff",
78
79
  orangeSubtle: "orange80",
79
- yellowBold: "typoPrimary",
80
- yellowSubtle: "typoPrimary",
80
+ yellowBold: "#22394e",
81
+ yellowSubtle: "#22394e",
81
82
  pinkBold: "white",
82
83
  pinkSubtle: "magenta80",
83
- purpleBold: "white",
84
+ purpleBold: "#ffffff",
84
85
  purpleSubtle: "purple80",
85
- redBold: "white",
86
+ redBold: "#ffffff",
86
87
  redSubtle: "red80"
87
88
  };
88
- const HighlightBox = ({ children, appearance, size = "default", className, prefix }) => {
89
+ const HighlightBox = ({ children, appearance, size = "default", cursor, className, prefix }) => {
89
90
  const theme = useTheme();
90
91
  return /* @__PURE__ */ jsx(StyledHighlightBox, {
91
92
  $bgcolor: th$1.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({ theme }),
92
93
  $fontColor: th$1.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({ theme }),
93
94
  "data-cy": prefix ? `${prefix}Label` : "label",
95
+ $cursor: cursor,
94
96
  children: /* @__PURE__ */ jsx(OverflowWrap, {
95
97
  className: size + " " + (className || ""),
96
98
  children
@@ -1,12 +1,12 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="239.398" height="68.428" viewBox="0 0 239.398 68.428">
2
- <g id="Group_7689" data-name="Group 7689" transform="translate(-9808.002 19883.955)">
3
- <path id="Path_3997" data-name="Path 3997" d="M264.019,322.535V303.762c0-1.3-.145-3.624-1.957-3.624-2.611,0-2.9,3.407-2.9,5.293v17.1H246.62V303.907c0-1.522-.073-3.481-2.028-3.481-2.9,0-2.828,3.191-2.828,5.293v16.817h-12.54V288.683h12.54v1.741c0,1.3-.073,2.609-.145,3.914,1.957-3.7,4.133-6.38,8.625-6.38,4.787,0,7.251,2.973,8.989,7.032,1.45-4.131,3.7-7.032,8.409-7.032a8.921,8.921,0,0,1,5.945,2.247c2.682,2.466,2.972,5.728,2.972,9.134v23.2Z" transform="translate(9578.778 -20153.648)" fill="#e4001b"/>
4
- <path id="Path_3998" data-name="Path 3998" d="M279.461,322.535c.145-1.883.29-3.843.435-5.726-1.812,3.624-4.349,6.452-8.7,6.452-8.554,0-10.294-11.31-10.294-17.831,0-6.742,1.959-17.472,10.583-17.472,4.06,0,6.525,2.683,8.119,6.09-.145-1.812-.145-3.551-.362-5.365h12.83v33.852Zm-2.754-24.211c-3.262,0-3.191,6.235-3.191,8.48,0,1.886.145,6.091,2.827,6.091,3.336,0,2.973-6.525,2.973-8.773C279.316,302.312,279.243,298.324,276.707,298.324Z" transform="translate(9599.282 -20153.648)" fill="#121415"/>
5
- <path id="Path_3999" data-name="Path 3999" d="M290.049,292.215a7.409,7.409,0,0,1-7.322-7.393,7.322,7.322,0,1,1,7.322,7.393Zm-6.307,37.041V295.4h12.54v33.852Z" transform="translate(9613.406 -20160.371)" fill="#121415"/>
6
- <path id="Path_4000" data-name="Path 4000" d="M294.475,329.712V276.869h12.54v52.843Z" transform="translate(9621.012 -20160.824)" fill="#121415"/>
7
- <path id="Path_4001" data-name="Path 4001" d="M325.662,299.92c-1.3-1.3-3.187-2.973-5.146-2.973a1.748,1.748,0,0,0-1.957,1.6c0,4.059,11.961,2.609,11.961,12.83,0,7.683-6.523,11.888-13.628,11.888-4.711,0-7.974-1.377-12.033-3.553l4.566-9.351c1.522,1.595,3.988,3.552,6.307,3.552,1.087,0,2.464-.507,2.464-1.812,0-3.479-12.18-2.537-12.18-12.54,0-7.538,7.1-11.6,13.919-11.6a22.292,22.292,0,0,1,10.076,2.756Z" transform="translate(9627.732 -20153.648)" fill="#121415"/>
8
- <path id="Path_4002" data-name="Path 4002" d="M340.167,329.712v-17.9c0-1.45.073-4.133-1.958-4.133-2.464,0-2.68,3.191-2.68,5v17.034H322.986V276.869h12.542v18.92c0,2.174-.145,4.349-.29,6.523,1.665-3.914,4.349-7.177,8.915-7.177,6.525,0,8.625,5.945,8.625,11.526v23.051Z" transform="translate(9639.464 -20160.824)" fill="#121415"/>
9
- <path id="Path_4003" data-name="Path 4003" d="M351.3,292.215a7.409,7.409,0,0,1-7.32-7.393,7.321,7.321,0,1,1,7.32,7.393Zm-6.307,37.041V295.4h12.54v33.852Z" transform="translate(9653.049 -20160.371)" fill="#121415"/>
10
- <path id="Path_4004" data-name="Path 4004" d="M367.972,293.468c1.74-3.263,3.843-5.51,7.757-5.51,8.625,0,11.018,10.875,11.018,17.688,0,6.74-2.031,17.616-10.728,17.616-3.914,0-6.088-2.25-8.047-5.293.145,1.884.292,3.7.292,5.581v14.571H355.723V288.683h12.541Zm2.827,4.856c-2.682,0-2.9,5.22-2.9,7.106,0,1.81.218,7.246,2.828,7.246,2.827,0,3.044-5.582,3.044-7.538C373.772,303.254,373.482,298.324,370.8,298.324Z" transform="translate(9660.653 -20153.648)" fill="#121415"/>
11
- </g>
12
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="239.398" height="68.428" viewBox="0 0 239.398 68.428">
2
+ <g id="Group_7689" data-name="Group 7689" transform="translate(-9808.002 19883.955)">
3
+ <path id="Path_3997" data-name="Path 3997" d="M264.019,322.535V303.762c0-1.3-.145-3.624-1.957-3.624-2.611,0-2.9,3.407-2.9,5.293v17.1H246.62V303.907c0-1.522-.073-3.481-2.028-3.481-2.9,0-2.828,3.191-2.828,5.293v16.817h-12.54V288.683h12.54v1.741c0,1.3-.073,2.609-.145,3.914,1.957-3.7,4.133-6.38,8.625-6.38,4.787,0,7.251,2.973,8.989,7.032,1.45-4.131,3.7-7.032,8.409-7.032a8.921,8.921,0,0,1,5.945,2.247c2.682,2.466,2.972,5.728,2.972,9.134v23.2Z" transform="translate(9578.778 -20153.648)" fill="#e4001b"/>
4
+ <path id="Path_3998" data-name="Path 3998" d="M279.461,322.535c.145-1.883.29-3.843.435-5.726-1.812,3.624-4.349,6.452-8.7,6.452-8.554,0-10.294-11.31-10.294-17.831,0-6.742,1.959-17.472,10.583-17.472,4.06,0,6.525,2.683,8.119,6.09-.145-1.812-.145-3.551-.362-5.365h12.83v33.852Zm-2.754-24.211c-3.262,0-3.191,6.235-3.191,8.48,0,1.886.145,6.091,2.827,6.091,3.336,0,2.973-6.525,2.973-8.773C279.316,302.312,279.243,298.324,276.707,298.324Z" transform="translate(9599.282 -20153.648)" fill="#121415"/>
5
+ <path id="Path_3999" data-name="Path 3999" d="M290.049,292.215a7.409,7.409,0,0,1-7.322-7.393,7.322,7.322,0,1,1,7.322,7.393Zm-6.307,37.041V295.4h12.54v33.852Z" transform="translate(9613.406 -20160.371)" fill="#121415"/>
6
+ <path id="Path_4000" data-name="Path 4000" d="M294.475,329.712V276.869h12.54v52.843Z" transform="translate(9621.012 -20160.824)" fill="#121415"/>
7
+ <path id="Path_4001" data-name="Path 4001" d="M325.662,299.92c-1.3-1.3-3.187-2.973-5.146-2.973a1.748,1.748,0,0,0-1.957,1.6c0,4.059,11.961,2.609,11.961,12.83,0,7.683-6.523,11.888-13.628,11.888-4.711,0-7.974-1.377-12.033-3.553l4.566-9.351c1.522,1.595,3.988,3.552,6.307,3.552,1.087,0,2.464-.507,2.464-1.812,0-3.479-12.18-2.537-12.18-12.54,0-7.538,7.1-11.6,13.919-11.6a22.292,22.292,0,0,1,10.076,2.756Z" transform="translate(9627.732 -20153.648)" fill="#121415"/>
8
+ <path id="Path_4002" data-name="Path 4002" d="M340.167,329.712v-17.9c0-1.45.073-4.133-1.958-4.133-2.464,0-2.68,3.191-2.68,5v17.034H322.986V276.869h12.542v18.92c0,2.174-.145,4.349-.29,6.523,1.665-3.914,4.349-7.177,8.915-7.177,6.525,0,8.625,5.945,8.625,11.526v23.051Z" transform="translate(9639.464 -20160.824)" fill="#121415"/>
9
+ <path id="Path_4003" data-name="Path 4003" d="M351.3,292.215a7.409,7.409,0,0,1-7.32-7.393,7.321,7.321,0,1,1,7.32,7.393Zm-6.307,37.041V295.4h12.54v33.852Z" transform="translate(9653.049 -20160.371)" fill="#121415"/>
10
+ <path id="Path_4004" data-name="Path 4004" d="M367.972,293.468c1.74-3.263,3.843-5.51,7.757-5.51,8.625,0,11.018,10.875,11.018,17.688,0,6.74-2.031,17.616-10.728,17.616-3.914,0-6.088-2.25-8.047-5.293.145,1.884.292,3.7.292,5.581v14.571H355.723V288.683h12.541Zm2.827,4.856c-2.682,0-2.9,5.22-2.9,7.106,0,1.81.218,7.246,2.828,7.246,2.827,0,3.044-5.582,3.044-7.538C373.772,303.254,373.482,298.324,370.8,298.324Z" transform="translate(9660.653 -20153.648)" fill="#121415"/>
11
+ </g>
12
+ </svg>