@semcore/input 3.4.2 → 3.5.1

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 (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/lib/cjs/Input.js +17 -17
  3. package/lib/cjs/style/input.shadow.css +29 -30
  4. package/lib/es6/Input.js +17 -17
  5. package/lib/es6/style/input.shadow.css +29 -30
  6. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.5.1] - 2022-12-13
6
+
7
+ ### Changed
8
+
9
+ - Added `react-dom` to peer dependencies.
10
+
11
+ ## [3.5.0] - 2022-12-12
12
+
13
+ ### Added
14
+
15
+ - Design tokens based theming.
16
+
5
17
  ## [3.4.2] - 2022-12-06
6
18
 
7
19
  ### Added
package/lib/cjs/Input.js CHANGED
@@ -52,26 +52,26 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SInput_me7lq_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_me7lq_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_me7lq_gg_ input:-webkit-autofill~.___SOutline_me7lq_gg_{background-color:#faffbd}.___SValue_me7lq_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_me7lq_gg_:focus{outline:none}.___SValue_me7lq_gg_::-moz-placeholder{color:#a9abb6}.___SValue_me7lq_gg_::placeholder{color:#a9abb6}.___SValue_me7lq_gg_:not(:disabled):-moz-read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:not(:disabled):read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_me7lq_gg_:disabled~.___SOutline_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_me7lq_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_me7lq_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_{cursor:pointer}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_:hover{color:#8a8e9b}.___SAddon_me7lq_gg_.__disabled_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_me7lq_gg_._size_m_me7lq_gg_{font-size:14px;height:28px}.___SValue_me7lq_gg_._size_l_me7lq_gg_,.___SValue_me7lq_gg_._size_m_me7lq_gg_{padding:0 8px}.___SInput_me7lq_gg_._size_l_me7lq_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_me7lq_gg_.__focused_me7lq_gg_{z-index:1}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#c4c7cf}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#59ddaa}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#ffaeb5}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_me7lq_gg_._neighborLocation_right_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_me7lq_gg_._neighborLocation_both_me7lq_gg_ .___SOutline_me7lq_gg_{border-radius:0;border-left:none}.___SInput_me7lq_gg_._neighborLocation_left_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_me7lq_gg_._neighborLocation_right_me7lq_gg_{padding-right:0}.___SValue_me7lq_gg_._neighborLocation_both_me7lq_gg_{padding-left:0;padding-right:0}.___SValue_me7lq_gg_._neighborLocation_left_me7lq_gg_{padding-left:0}"
55
+ ".___SInput_18p40_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_18p40_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-rounded-medium,6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_18p40_gg_ input:-webkit-autofill~.___SOutline_18p40_gg_{background-color:#faffbd}.___SValue_18p40_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:var(--intergalactic-text-primary,#191b23);font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_18p40_gg_:focus{outline:none}.___SValue_18p40_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_18p40_gg_::placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_18p40_gg_:not(:disabled):-moz-read-only~.___SOutline_18p40_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_18p40_gg_:not(:disabled):read-only~.___SOutline_18p40_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_18p40_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity,.3)}.___SValue_18p40_gg_:disabled~.___SOutline_18p40_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SOutline_18p40_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-rounded-medium,6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral,#fff)}.___SAddon_18p40_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x,8px);height:100%;color:var(--intergalactic-icon-secondary-neutral,#a9abb6)}.___SAddon_18p40_gg_.__interactive_18p40_gg_{cursor:pointer}.___SAddon_18p40_gg_.__interactive_18p40_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SAddon_18p40_gg_.__disabled_18p40_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SInput_18p40_gg_._size_m_18p40_gg_{font-size:var(--intergalactic-fs-200,14px);height:var(--intergalactic-form-control-m,28px)}.___SValue_18p40_gg_._size_l_18p40_gg_,.___SValue_18p40_gg_._size_m_18p40_gg_{padding:0 var(--intergalactic-spacing-2x,8px)}.___SInput_18p40_gg_._size_l_18p40_gg_{font-size:var(--intergalactic-fs-300,16px);height:var(--intergalactic-form-control-l,40px);padding-left:var(--intergalactic-spacing-1x,4px);padding-right:var(--intergalactic-spacing-1x,4px)}.___SInput_18p40_gg_.__focused_18p40_gg_{z-index:1}.___SInput_18p40_gg_._state_normal_18p40_gg_ .___SOutline_18p40_gg_{border-color:var(--intergalactic-border-primary,#c4c7cf)}.___SInput_18p40_gg_._state_normal_18p40_gg_ .___SValue_18p40_gg_:focus~.___SOutline_18p40_gg_{border-color:var(--intergalactic-border-info-active,#006dca);box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SInput_18p40_gg_._state_valid_18p40_gg_ .___SOutline_18p40_gg_{border-color:var(--intergalactic-border-success,#59ddaa)}.___SInput_18p40_gg_._state_valid_18p40_gg_ .___SValue_18p40_gg_:focus~.___SOutline_18p40_gg_{border-color:var(--intergalactic-border-success-active,#007c65);box-shadow:var(--intergalactic-keyboard-focus-valid,0 0 0 3px rgba(0,159,129,.3))}.___SInput_18p40_gg_._state_invalid_18p40_gg_ .___SOutline_18p40_gg_{border-color:var(--intergalactic-border-danger,#ffaeb5)}.___SInput_18p40_gg_._state_invalid_18p40_gg_ .___SValue_18p40_gg_:focus~.___SOutline_18p40_gg_{border-color:var(--intergalactic-border-danger-active,#d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid,0 0 0 3px rgba(255,73,83,.3))}.___SInput_18p40_gg_._neighborLocation_right_18p40_gg_ .___SOutline_18p40_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_18p40_gg_._neighborLocation_both_18p40_gg_ .___SOutline_18p40_gg_{border-radius:0;border-left:none}.___SInput_18p40_gg_._neighborLocation_left_18p40_gg_ .___SOutline_18p40_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_18p40_gg_._neighborLocation_right_18p40_gg_{padding-right:0}.___SValue_18p40_gg_._neighborLocation_both_18p40_gg_{padding-left:0;padding-right:0}.___SValue_18p40_gg_._neighborLocation_left_18p40_gg_{padding-left:0}"
56
56
  /*__inner_css_end__*/
57
- , "me7lq_gg_")
57
+ , "18p40_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SInput": "___SInput_me7lq_gg_",
61
- "__SOutline": "___SOutline_me7lq_gg_",
62
- "__SValue": "___SValue_me7lq_gg_",
63
- "__SAddon": "___SAddon_me7lq_gg_",
64
- "_interactive": "__interactive_me7lq_gg_",
65
- "_disabled": "__disabled_me7lq_gg_",
66
- "_size_m": "_size_m_me7lq_gg_",
67
- "_size_l": "_size_l_me7lq_gg_",
68
- "_focused": "__focused_me7lq_gg_",
69
- "_state_normal": "_state_normal_me7lq_gg_",
70
- "_state_valid": "_state_valid_me7lq_gg_",
71
- "_state_invalid": "_state_invalid_me7lq_gg_",
72
- "_neighborLocation_right": "_neighborLocation_right_me7lq_gg_",
73
- "_neighborLocation_both": "_neighborLocation_both_me7lq_gg_",
74
- "_neighborLocation_left": "_neighborLocation_left_me7lq_gg_"
60
+ "__SInput": "___SInput_18p40_gg_",
61
+ "__SOutline": "___SOutline_18p40_gg_",
62
+ "__SValue": "___SValue_18p40_gg_",
63
+ "__SAddon": "___SAddon_18p40_gg_",
64
+ "_interactive": "__interactive_18p40_gg_",
65
+ "_disabled": "__disabled_18p40_gg_",
66
+ "_size_m": "_size_m_18p40_gg_",
67
+ "_size_l": "_size_l_18p40_gg_",
68
+ "_focused": "__focused_18p40_gg_",
69
+ "_state_normal": "_state_normal_18p40_gg_",
70
+ "_state_valid": "_state_valid_18p40_gg_",
71
+ "_state_invalid": "_state_invalid_18p40_gg_",
72
+ "_neighborLocation_right": "_neighborLocation_right_18p40_gg_",
73
+ "_neighborLocation_both": "_neighborLocation_both_18p40_gg_",
74
+ "_neighborLocation_left": "_neighborLocation_left_18p40_gg_"
75
75
  });
76
76
 
77
77
  var Input = /*#__PURE__*/function (_Component) {
package/lib/cjs/style/input.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SInput {
4
2
  display: inline-flex;
5
3
  width: 100%;
@@ -7,11 +5,12 @@ SInput {
7
5
  position: relative;
8
6
  z-index: 0;
9
7
  vertical-align: middle;
8
+ /* disable-tokens-validator */
10
9
  padding: 1px;
11
10
  box-sizing: border-box;
12
11
 
13
12
  & input:-webkit-autofill {
14
- border-radius: var(--rounded-m);
13
+ border-radius: var(--intergalactic-rounded-medium, 6px);
15
14
  -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
16
15
 
17
16
  & ~ SOutline {
@@ -28,7 +27,7 @@ SValue {
28
27
  padding: 0;
29
28
  border: none;
30
29
  box-sizing: border-box;
31
- color: var(--gray-800);
30
+ color: var(--intergalactic-text-primary, #191b23);
32
31
  font-size: inherit;
33
32
  text-overflow: ellipsis;
34
33
  font-family: inherit;
@@ -39,19 +38,19 @@ SValue {
39
38
  }
40
39
 
41
40
  &::placeholder {
42
- color: var(--gray-300);
41
+ color: var(--intergalactic-text-placeholder, #a9abb6);
43
42
  }
44
43
 
45
44
  &:not(:disabled):read-only ~ SOutline {
46
- background: var(--gray-50);
45
+ background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
47
46
  }
48
47
 
49
48
  &:disabled {
50
49
  user-select: none;
51
- opacity: var(--disabled-opacity);
50
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
52
51
 
53
52
  & ~ SOutline {
54
- opacity: var(--disabled-opacity);
53
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
55
54
  cursor: default;
56
55
  pointer-events: none;
57
56
  }
@@ -65,9 +64,9 @@ SOutline {
65
64
  bottom: 0;
66
65
  left: 0;
67
66
  border: 1px solid;
68
- border-radius: var(--rounded-m);
67
+ border-radius: var(--intergalactic-rounded-medium, 6px);
69
68
  z-index: -1;
70
- background: #fff;
69
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
71
70
  }
72
71
 
73
72
  SAddon {
@@ -75,40 +74,40 @@ SAddon {
75
74
  justify-content: center;
76
75
  align-items: center;
77
76
  flex: 0 0 auto;
78
- padding: 0 8px;
77
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
79
78
  height: 100%;
80
- color: var(--gray-300);
79
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
81
80
  }
82
81
 
83
82
  SAddon[interactive] {
84
83
  cursor: pointer;
85
84
 
86
85
  &:hover {
87
- color: var(--gray-400);
86
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
88
87
  }
89
88
  }
90
89
 
91
90
  SAddon[disabled] {
92
- opacity: var(--disabled-opacity);
91
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
93
92
  cursor: default;
94
93
  pointer-events: none;
95
94
  }
96
95
 
97
96
  SInput[size='m'] {
98
- font-size: var(--fs-200);
99
- height: var(--form-control-m);
97
+ font-size: var(--intergalactic-fs-200, 14px);
98
+ height: var(--intergalactic-form-control-m, 28px);
100
99
  }
101
100
 
102
101
  SValue[size='m'],
103
102
  SValue[size='l'] {
104
- padding: 0 8px;
103
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
105
104
  }
106
105
 
107
106
  SInput[size='l'] {
108
- font-size: var(--fs-300);
109
- height: var(--form-control-l);
110
- padding-left: 4px;
111
- padding-right: 4px;
107
+ font-size: var(--intergalactic-fs-300, 16px);
108
+ height: var(--intergalactic-form-control-l, 40px);
109
+ padding-left: var(--intergalactic-spacing-1x, 4px);
110
+ padding-right: var(--intergalactic-spacing-1x, 4px);
112
111
  }
113
112
 
114
113
  SInput[focused] {
@@ -117,32 +116,32 @@ SInput[focused] {
117
116
 
118
117
  SInput[state='normal'] {
119
118
  & SOutline {
120
- border-color: var(--gray-200);
119
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
121
120
  }
122
121
 
123
122
  & SValue:focus ~ SOutline {
124
- border-color: var(--blue-500);
125
- box-shadow: var(--keyboard-focus);
123
+ border-color: var(--intergalactic-border-info-active, #006dca);
124
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
126
125
  }
127
126
  }
128
127
  SInput[state='valid'] {
129
128
  & SOutline {
130
- border-color: var(--green-200);
129
+ border-color: var(--intergalactic-border-success, #59ddaa);
131
130
  }
132
131
 
133
132
  & SValue:focus ~ SOutline {
134
- border-color: var(--green-500);
135
- box-shadow: var(--keyboard-focus-valid);
133
+ border-color: var(--intergalactic-border-success-active, #007c65);
134
+ box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.3));
136
135
  }
137
136
  }
138
137
  SInput[state='invalid'] {
139
138
  & SOutline {
140
- border-color: var(--red-200);
139
+ border-color: var(--intergalactic-border-danger, #ffaeb5);
141
140
  }
142
141
 
143
142
  & SValue:focus ~ SOutline {
144
- border-color: var(--red-500);
145
- box-shadow: var(--keyboard-focus-invalid);
143
+ border-color: var(--intergalactic-border-danger-active, #d1002f);
144
+ box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.3));
146
145
  }
147
146
  }
148
147
 
package/lib/es6/Input.js CHANGED
@@ -30,26 +30,26 @@ var style = (
30
30
  /*__reshadow_css_start__*/
31
31
  _sstyled.insert(
32
32
  /*__inner_css_start__*/
33
- ".___SInput_me7lq_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_me7lq_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_me7lq_gg_ input:-webkit-autofill~.___SOutline_me7lq_gg_{background-color:#faffbd}.___SValue_me7lq_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_me7lq_gg_:focus{outline:none}.___SValue_me7lq_gg_::-moz-placeholder{color:#a9abb6}.___SValue_me7lq_gg_::placeholder{color:#a9abb6}.___SValue_me7lq_gg_:not(:disabled):-moz-read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:not(:disabled):read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_me7lq_gg_:disabled~.___SOutline_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_me7lq_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_me7lq_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_{cursor:pointer}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_:hover{color:#8a8e9b}.___SAddon_me7lq_gg_.__disabled_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_me7lq_gg_._size_m_me7lq_gg_{font-size:14px;height:28px}.___SValue_me7lq_gg_._size_l_me7lq_gg_,.___SValue_me7lq_gg_._size_m_me7lq_gg_{padding:0 8px}.___SInput_me7lq_gg_._size_l_me7lq_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_me7lq_gg_.__focused_me7lq_gg_{z-index:1}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#c4c7cf}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#59ddaa}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#ffaeb5}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_me7lq_gg_._neighborLocation_right_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_me7lq_gg_._neighborLocation_both_me7lq_gg_ .___SOutline_me7lq_gg_{border-radius:0;border-left:none}.___SInput_me7lq_gg_._neighborLocation_left_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_me7lq_gg_._neighborLocation_right_me7lq_gg_{padding-right:0}.___SValue_me7lq_gg_._neighborLocation_both_me7lq_gg_{padding-left:0;padding-right:0}.___SValue_me7lq_gg_._neighborLocation_left_me7lq_gg_{padding-left:0}"
33
+ ".___SInput_18p40_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_18p40_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-rounded-medium,6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_18p40_gg_ input:-webkit-autofill~.___SOutline_18p40_gg_{background-color:#faffbd}.___SValue_18p40_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:var(--intergalactic-text-primary,#191b23);font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_18p40_gg_:focus{outline:none}.___SValue_18p40_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_18p40_gg_::placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_18p40_gg_:not(:disabled):-moz-read-only~.___SOutline_18p40_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_18p40_gg_:not(:disabled):read-only~.___SOutline_18p40_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_18p40_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity,.3)}.___SValue_18p40_gg_:disabled~.___SOutline_18p40_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SOutline_18p40_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-rounded-medium,6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral,#fff)}.___SAddon_18p40_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x,8px);height:100%;color:var(--intergalactic-icon-secondary-neutral,#a9abb6)}.___SAddon_18p40_gg_.__interactive_18p40_gg_{cursor:pointer}.___SAddon_18p40_gg_.__interactive_18p40_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SAddon_18p40_gg_.__disabled_18p40_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SInput_18p40_gg_._size_m_18p40_gg_{font-size:var(--intergalactic-fs-200,14px);height:var(--intergalactic-form-control-m,28px)}.___SValue_18p40_gg_._size_l_18p40_gg_,.___SValue_18p40_gg_._size_m_18p40_gg_{padding:0 var(--intergalactic-spacing-2x,8px)}.___SInput_18p40_gg_._size_l_18p40_gg_{font-size:var(--intergalactic-fs-300,16px);height:var(--intergalactic-form-control-l,40px);padding-left:var(--intergalactic-spacing-1x,4px);padding-right:var(--intergalactic-spacing-1x,4px)}.___SInput_18p40_gg_.__focused_18p40_gg_{z-index:1}.___SInput_18p40_gg_._state_normal_18p40_gg_ .___SOutline_18p40_gg_{border-color:var(--intergalactic-border-primary,#c4c7cf)}.___SInput_18p40_gg_._state_normal_18p40_gg_ .___SValue_18p40_gg_:focus~.___SOutline_18p40_gg_{border-color:var(--intergalactic-border-info-active,#006dca);box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SInput_18p40_gg_._state_valid_18p40_gg_ .___SOutline_18p40_gg_{border-color:var(--intergalactic-border-success,#59ddaa)}.___SInput_18p40_gg_._state_valid_18p40_gg_ .___SValue_18p40_gg_:focus~.___SOutline_18p40_gg_{border-color:var(--intergalactic-border-success-active,#007c65);box-shadow:var(--intergalactic-keyboard-focus-valid,0 0 0 3px rgba(0,159,129,.3))}.___SInput_18p40_gg_._state_invalid_18p40_gg_ .___SOutline_18p40_gg_{border-color:var(--intergalactic-border-danger,#ffaeb5)}.___SInput_18p40_gg_._state_invalid_18p40_gg_ .___SValue_18p40_gg_:focus~.___SOutline_18p40_gg_{border-color:var(--intergalactic-border-danger-active,#d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid,0 0 0 3px rgba(255,73,83,.3))}.___SInput_18p40_gg_._neighborLocation_right_18p40_gg_ .___SOutline_18p40_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_18p40_gg_._neighborLocation_both_18p40_gg_ .___SOutline_18p40_gg_{border-radius:0;border-left:none}.___SInput_18p40_gg_._neighborLocation_left_18p40_gg_ .___SOutline_18p40_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_18p40_gg_._neighborLocation_right_18p40_gg_{padding-right:0}.___SValue_18p40_gg_._neighborLocation_both_18p40_gg_{padding-left:0;padding-right:0}.___SValue_18p40_gg_._neighborLocation_left_18p40_gg_{padding-left:0}"
34
34
  /*__inner_css_end__*/
35
- , "me7lq_gg_")
35
+ , "18p40_gg_")
36
36
  /*__reshadow_css_end__*/
37
37
  , {
38
- "__SInput": "___SInput_me7lq_gg_",
39
- "__SOutline": "___SOutline_me7lq_gg_",
40
- "__SValue": "___SValue_me7lq_gg_",
41
- "__SAddon": "___SAddon_me7lq_gg_",
42
- "_interactive": "__interactive_me7lq_gg_",
43
- "_disabled": "__disabled_me7lq_gg_",
44
- "_size_m": "_size_m_me7lq_gg_",
45
- "_size_l": "_size_l_me7lq_gg_",
46
- "_focused": "__focused_me7lq_gg_",
47
- "_state_normal": "_state_normal_me7lq_gg_",
48
- "_state_valid": "_state_valid_me7lq_gg_",
49
- "_state_invalid": "_state_invalid_me7lq_gg_",
50
- "_neighborLocation_right": "_neighborLocation_right_me7lq_gg_",
51
- "_neighborLocation_both": "_neighborLocation_both_me7lq_gg_",
52
- "_neighborLocation_left": "_neighborLocation_left_me7lq_gg_"
38
+ "__SInput": "___SInput_18p40_gg_",
39
+ "__SOutline": "___SOutline_18p40_gg_",
40
+ "__SValue": "___SValue_18p40_gg_",
41
+ "__SAddon": "___SAddon_18p40_gg_",
42
+ "_interactive": "__interactive_18p40_gg_",
43
+ "_disabled": "__disabled_18p40_gg_",
44
+ "_size_m": "_size_m_18p40_gg_",
45
+ "_size_l": "_size_l_18p40_gg_",
46
+ "_focused": "__focused_18p40_gg_",
47
+ "_state_normal": "_state_normal_18p40_gg_",
48
+ "_state_valid": "_state_valid_18p40_gg_",
49
+ "_state_invalid": "_state_invalid_18p40_gg_",
50
+ "_neighborLocation_right": "_neighborLocation_right_18p40_gg_",
51
+ "_neighborLocation_both": "_neighborLocation_both_18p40_gg_",
52
+ "_neighborLocation_left": "_neighborLocation_left_18p40_gg_"
53
53
  });
54
54
 
55
55
  var Input = /*#__PURE__*/function (_Component) {
package/lib/es6/style/input.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SInput {
4
2
  display: inline-flex;
5
3
  width: 100%;
@@ -7,11 +5,12 @@ SInput {
7
5
  position: relative;
8
6
  z-index: 0;
9
7
  vertical-align: middle;
8
+ /* disable-tokens-validator */
10
9
  padding: 1px;
11
10
  box-sizing: border-box;
12
11
 
13
12
  & input:-webkit-autofill {
14
- border-radius: var(--rounded-m);
13
+ border-radius: var(--intergalactic-rounded-medium, 6px);
15
14
  -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
16
15
 
17
16
  & ~ SOutline {
@@ -28,7 +27,7 @@ SValue {
28
27
  padding: 0;
29
28
  border: none;
30
29
  box-sizing: border-box;
31
- color: var(--gray-800);
30
+ color: var(--intergalactic-text-primary, #191b23);
32
31
  font-size: inherit;
33
32
  text-overflow: ellipsis;
34
33
  font-family: inherit;
@@ -39,19 +38,19 @@ SValue {
39
38
  }
40
39
 
41
40
  &::placeholder {
42
- color: var(--gray-300);
41
+ color: var(--intergalactic-text-placeholder, #a9abb6);
43
42
  }
44
43
 
45
44
  &:not(:disabled):read-only ~ SOutline {
46
- background: var(--gray-50);
45
+ background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
47
46
  }
48
47
 
49
48
  &:disabled {
50
49
  user-select: none;
51
- opacity: var(--disabled-opacity);
50
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
52
51
 
53
52
  & ~ SOutline {
54
- opacity: var(--disabled-opacity);
53
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
55
54
  cursor: default;
56
55
  pointer-events: none;
57
56
  }
@@ -65,9 +64,9 @@ SOutline {
65
64
  bottom: 0;
66
65
  left: 0;
67
66
  border: 1px solid;
68
- border-radius: var(--rounded-m);
67
+ border-radius: var(--intergalactic-rounded-medium, 6px);
69
68
  z-index: -1;
70
- background: #fff;
69
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
71
70
  }
72
71
 
73
72
  SAddon {
@@ -75,40 +74,40 @@ SAddon {
75
74
  justify-content: center;
76
75
  align-items: center;
77
76
  flex: 0 0 auto;
78
- padding: 0 8px;
77
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
79
78
  height: 100%;
80
- color: var(--gray-300);
79
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
81
80
  }
82
81
 
83
82
  SAddon[interactive] {
84
83
  cursor: pointer;
85
84
 
86
85
  &:hover {
87
- color: var(--gray-400);
86
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
88
87
  }
89
88
  }
90
89
 
91
90
  SAddon[disabled] {
92
- opacity: var(--disabled-opacity);
91
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
93
92
  cursor: default;
94
93
  pointer-events: none;
95
94
  }
96
95
 
97
96
  SInput[size='m'] {
98
- font-size: var(--fs-200);
99
- height: var(--form-control-m);
97
+ font-size: var(--intergalactic-fs-200, 14px);
98
+ height: var(--intergalactic-form-control-m, 28px);
100
99
  }
101
100
 
102
101
  SValue[size='m'],
103
102
  SValue[size='l'] {
104
- padding: 0 8px;
103
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
105
104
  }
106
105
 
107
106
  SInput[size='l'] {
108
- font-size: var(--fs-300);
109
- height: var(--form-control-l);
110
- padding-left: 4px;
111
- padding-right: 4px;
107
+ font-size: var(--intergalactic-fs-300, 16px);
108
+ height: var(--intergalactic-form-control-l, 40px);
109
+ padding-left: var(--intergalactic-spacing-1x, 4px);
110
+ padding-right: var(--intergalactic-spacing-1x, 4px);
112
111
  }
113
112
 
114
113
  SInput[focused] {
@@ -117,32 +116,32 @@ SInput[focused] {
117
116
 
118
117
  SInput[state='normal'] {
119
118
  & SOutline {
120
- border-color: var(--gray-200);
119
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
121
120
  }
122
121
 
123
122
  & SValue:focus ~ SOutline {
124
- border-color: var(--blue-500);
125
- box-shadow: var(--keyboard-focus);
123
+ border-color: var(--intergalactic-border-info-active, #006dca);
124
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
126
125
  }
127
126
  }
128
127
  SInput[state='valid'] {
129
128
  & SOutline {
130
- border-color: var(--green-200);
129
+ border-color: var(--intergalactic-border-success, #59ddaa);
131
130
  }
132
131
 
133
132
  & SValue:focus ~ SOutline {
134
- border-color: var(--green-500);
135
- box-shadow: var(--keyboard-focus-valid);
133
+ border-color: var(--intergalactic-border-success-active, #007c65);
134
+ box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.3));
136
135
  }
137
136
  }
138
137
  SInput[state='invalid'] {
139
138
  & SOutline {
140
- border-color: var(--red-200);
139
+ border-color: var(--intergalactic-border-danger, #ffaeb5);
141
140
  }
142
141
 
143
142
  & SValue:focus ~ SOutline {
144
- border-color: var(--red-500);
145
- box-shadow: var(--keyboard-focus-invalid);
143
+ border-color: var(--intergalactic-border-danger-active, #d1002f);
144
+ box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.3));
146
145
  }
147
146
  }
148
147
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/input",
3
3
  "description": "Semrush Input Component",
4
- "version": "3.4.2",
4
+ "version": "3.5.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -15,7 +15,8 @@
15
15
  },
16
16
  "peerDependencies": {
17
17
  "@semcore/core": "^1.11",
18
- "react": "16.8 - 18"
18
+ "react": "16.8 - 18",
19
+ "react-dom": "16.8 - 18"
19
20
  },
20
21
  "jest": {
21
22
  "preset": "@semcore/jest-preset-ui"