@oslokommune/punkt-css 7.1.0 → 7.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [7.1.5](https://github.com/oslokommune/punkt/compare/7.1.4...7.1.5) (2023-09-12)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * Forenklet TextInput en god del, samt la til støtte for prefix, suffix og icon samtidig.
18
+
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
8
26
  ## [7.1.0](https://github.com/oslokommune/punkt/compare/7.0.0...7.1.0) (2023-09-08)
9
27
 
10
28
  ### ⚠ BREAKING CHANGES
@@ -100,21 +100,53 @@
100
100
  border-color: var(--color-red);
101
101
  }
102
102
  .pkt-inputwrapper--error .pkt-textinput__input:hover,
103
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
104
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
105
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
106
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
107
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
103
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input,
104
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-prefix,
105
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-suffix,
106
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-icon {
108
107
  border-color: var(--color-red);
109
108
  }
110
109
  .pkt-inputwrapper--error .pkt-textinput__input:focus-within,
111
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
112
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
113
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,
114
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
115
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,
116
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
117
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,
118
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
110
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input,
111
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
112
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
113
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
119
114
  border-color: var(--color-red);
115
+ }
116
+ .pkt-inputwrapper--disabled {
117
+ color: var(--color-disabled);
118
+ cursor: inherit;
119
+ }
120
+ .pkt-inputwrapper--disabled .pkt-textinput__input,
121
+ .pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
122
+ .pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
123
+ .pkt-inputwrapper--disabled .pkt-textinput__input-icon {
124
+ border-color: var(--color-disabled);
125
+ background-color: var(--color-disabled-light);
126
+ }
127
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input,
128
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-prefix,
129
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-suffix,
130
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-icon {
131
+ border-color: var(--color-disabled);
132
+ }
133
+ .pkt-inputwrapper--disabled .pkt-textinput__input:hover {
134
+ border-color: var(--color-disabled);
135
+ box-shadow: none;
136
+ }
137
+ .pkt-inputwrapper--disabled .pkt-textinput__input:focus {
138
+ border-color: var(--color-disabled);
139
+ box-shadow: none;
140
+ outline: none;
141
+ }
142
+ .pkt-inputwrapper--disabled .pkt-textinput__container:active .pkt-textinput__input {
143
+ border-right: none;
144
+ box-shadow: none;
145
+ outline: none;
146
+ }
147
+ [data-mode=dark] .pkt-textinput__input-prefix,
148
+ [data-mode=dark] .pkt-textinput__input-suffix,
149
+ [data-mode=dark] .pkt-textinput__input-icon {
150
+ background-color: var(--color-white);
151
+ color: var(--color-blue-dark);
120
152
  }
@@ -1 +1 @@
1
- .pkt-inputwrapper__label{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.pkt-inputwrapper__label>h2{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;display:inline;margin-bottom:0}.pkt-inputwrapper__helptext{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem}.pkt-inputwrapper__helptext-expandable{display:inline-flex;text-align:left;align-items:center}.pkt-inputwrapper__helptext-expandable-heading{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0}.pkt-inputwrapper__helptext-expandable-open{width:100%;display:block}.pkt-inputwrapper__helptext-expandable-closed{display:none}.pkt-inputwrapper--disabled{color:var(--color-disabled);cursor:inherit}.pkt-inputwrapper--disabled .pkt-tag{background-color:var(--color-disabled-light)}.pkt-inputwrapper--disabled .pkt-alert{background-color:var(--color-disabled-light);border-color:var(--color-disabled)}.pkt-inputwrapper--inline{display:inline-block;vertical-align:middle;margin-right:8px}.pkt-inputwrapper .pkt-alert{width:100%;padding:.75rem 1rem .75rem 4px;margin:0 0 .5rem 0}.pkt-inputwrapper .pkt-alert--error{margin:.5rem 0 .5rem 0}.pkt-inputwrapper .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-inputwrapper .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 0 0 2.875rem}.pkt-inputwrapper .pkt-tag{margin-left:8px}.pkt-inputwrapper .pkt-btn{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;padding:0}.pkt-inputwrapper--error .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__input-prefix,.pkt-inputwrapper--error .pkt-textinput__input-suffix,.pkt-inputwrapper--error .pkt-textinput__input-icon{border-color:var(--color-red)}.pkt-inputwrapper--error .pkt-textinput__input:hover,.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon{border-color:var(--color-red)}.pkt-inputwrapper--error .pkt-textinput__input:focus-within,.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon{border-color:var(--color-red)}
1
+ .pkt-inputwrapper__label{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.pkt-inputwrapper__label>h2{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;display:inline;margin-bottom:0}.pkt-inputwrapper__helptext{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem}.pkt-inputwrapper__helptext-expandable{display:inline-flex;text-align:left;align-items:center}.pkt-inputwrapper__helptext-expandable-heading{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0}.pkt-inputwrapper__helptext-expandable-open{width:100%;display:block}.pkt-inputwrapper__helptext-expandable-closed{display:none}.pkt-inputwrapper--disabled{color:var(--color-disabled);cursor:inherit}.pkt-inputwrapper--disabled .pkt-tag{background-color:var(--color-disabled-light)}.pkt-inputwrapper--disabled .pkt-alert{background-color:var(--color-disabled-light);border-color:var(--color-disabled)}.pkt-inputwrapper--inline{display:inline-block;vertical-align:middle;margin-right:8px}.pkt-inputwrapper .pkt-alert{width:100%;padding:.75rem 1rem .75rem 4px;margin:0 0 .5rem 0}.pkt-inputwrapper .pkt-alert--error{margin:.5rem 0 .5rem 0}.pkt-inputwrapper .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-inputwrapper .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 0 0 2.875rem}.pkt-inputwrapper .pkt-tag{margin-left:8px}.pkt-inputwrapper .pkt-btn{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;padding:0}.pkt-inputwrapper--error .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__input-prefix,.pkt-inputwrapper--error .pkt-textinput__input-suffix,.pkt-inputwrapper--error .pkt-textinput__input-icon{border-color:var(--color-red)}.pkt-inputwrapper--error .pkt-textinput__input:hover,.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-prefix,.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-suffix,.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-icon{border-color:var(--color-red)}.pkt-inputwrapper--error .pkt-textinput__input:focus-within,.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input,.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-icon{border-color:var(--color-red)}.pkt-inputwrapper--disabled{color:var(--color-disabled);cursor:inherit}.pkt-inputwrapper--disabled .pkt-textinput__input,.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,.pkt-inputwrapper--disabled .pkt-textinput__input-icon{border-color:var(--color-disabled);background-color:var(--color-disabled-light)}.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input,.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-prefix,.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-suffix,.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-icon{border-color:var(--color-disabled)}.pkt-inputwrapper--disabled .pkt-textinput__input:hover{border-color:var(--color-disabled);box-shadow:none}.pkt-inputwrapper--disabled .pkt-textinput__input:focus{border-color:var(--color-disabled);box-shadow:none;outline:none}.pkt-inputwrapper--disabled .pkt-textinput__container:active .pkt-textinput__input{border-right:none;box-shadow:none;outline:none}[data-mode=dark] .pkt-textinput__input-prefix,[data-mode=dark] .pkt-textinput__input-suffix,[data-mode=dark] .pkt-textinput__input-icon{background-color:var(--color-white);color:var(--color-blue-dark)}
@@ -35,6 +35,7 @@
35
35
  border-color: var(--color-active);
36
36
  }
37
37
  .pkt-textinput__input:disabled, .pkt-textinput__input:disabled::placeholder, .pkt-textinput__input[readonly] {
38
+ opacity: 1;
38
39
  background-color: var(--color-disabled-light);
39
40
  border-color: var(--color-disabled);
40
41
  cursor: inherit;
@@ -42,39 +43,19 @@
42
43
  .pkt-textinput__input:disabled:active {
43
44
  border: 2px solid var(--color-disabled);
44
45
  }
45
- .pkt-textinput__input-prefix-wrapper {
46
- display: flex;
47
- align-items: center;
48
- align-self: stretch;
49
- }
50
- .pkt-textinput__input-prefix-wrapper :not(:first-child) {
51
- border-left: none;
52
- }
53
- .pkt-textinput__input-prefix-wrapper :first-child {
54
- border-right: none;
55
- }
56
- .pkt-textinput__input-prefix-wrapper input:focus {
57
- box-shadow: none;
58
- }
59
- .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix {
60
- border-color: var(--color-hover);
61
- }
62
- .pkt-textinput__input-prefix-wrapper:focus-within {
63
- outline: 2px solid var(--color-active);
64
- }
65
- .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix {
66
- border-color: var(--color-active);
67
- }
68
- .pkt-textinput__input-prefix {
46
+ .pkt-textinput__input-prefix, .pkt-textinput__input-suffix, .pkt-textinput__input-icon {
69
47
  font-size: 1.125rem;
70
48
  font-weight: 300;
71
49
  letter-spacing: -0.2px;
72
50
  line-height: 1.75rem;
73
- align-items: center;
74
51
  display: flex;
52
+ align-items: center;
75
53
  width: auto;
76
54
  height: 3rem;
77
55
  border: 2px solid var(--color-blue-dark);
56
+ flex-shrink: 0;
57
+ }
58
+ .pkt-textinput__input-prefix {
78
59
  padding: 0.5rem 0rem 0.5rem 1rem;
79
60
  }
80
61
  .pkt-textinput__input-prefix::after {
@@ -84,43 +65,8 @@
84
65
  height: 100%;
85
66
  background-color: var(--color-blue-dark);
86
67
  }
87
- .pkt-textinput__input-suffix-wrapper {
88
- display: flex;
89
- align-items: center;
90
- align-self: stretch;
91
- }
92
- .pkt-textinput__input-suffix-wrapper :not(:first-child) {
93
- border-left: none;
94
- }
95
- .pkt-textinput__input-suffix-wrapper :first-child {
96
- border-right: none;
97
- }
98
- .pkt-textinput__input-suffix-wrapper p {
99
- margin: 0;
100
- }
101
- .pkt-textinput__input-suffix-wrapper input:focus {
102
- box-shadow: none;
103
- }
104
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
105
- border-color: var(--color-hover);
106
- }
107
- .pkt-textinput__input-suffix-wrapper:focus-within {
108
- outline: 2px solid var(--color-active);
109
- }
110
- .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
111
- border-color: var(--color-active);
112
- }
113
68
  .pkt-textinput__input-suffix {
114
- font-size: 1.125rem;
115
- font-weight: 300;
116
- letter-spacing: -0.2px;
117
- line-height: 1.75rem;
118
- display: flex;
119
- align-items: center;
120
- width: auto;
121
- border: 2px solid var(--color-blue-dark);
122
69
  padding: 0.5rem 1rem 0.5rem 0rem;
123
- flex-shrink: 0;
124
70
  }
125
71
  .pkt-textinput__input-suffix svg {
126
72
  width: 1.5rem;
@@ -135,16 +81,8 @@
135
81
  background-color: var(--color-blue-dark);
136
82
  }
137
83
  .pkt-textinput__input-icon {
138
- font-size: 1.125rem;
139
- font-weight: 300;
140
- letter-spacing: -0.2px;
141
- line-height: 1.75rem;
142
- display: flex;
143
- flex-shrink: 0;
144
84
  padding: 0.5rem 1rem;
145
- align-items: center;
146
85
  align-self: stretch;
147
- border: 2px solid var(--color-blue-dark);
148
86
  }
149
87
  .pkt-textinput__input-icon svg {
150
88
  width: 1.5rem;
@@ -158,6 +96,39 @@
158
96
  .pkt-textinput__input--counter-error:focus {
159
97
  box-shadow: 0 0 0 2px var(--color-red);
160
98
  }
99
+ .pkt-textinput__container {
100
+ display: flex;
101
+ align-items: center;
102
+ align-self: stretch;
103
+ }
104
+ .pkt-textinput__container :first-child:not(:only-child) {
105
+ border-right: none;
106
+ }
107
+ .pkt-textinput__container :last-child:not(:only-child) {
108
+ border-left: none;
109
+ }
110
+ .pkt-textinput__container :not(:first-child):not(:last-child) {
111
+ border-left: none;
112
+ border-right: none;
113
+ }
114
+ .pkt-textinput__container p {
115
+ margin: 0;
116
+ }
117
+ .pkt-textinput__container input:focus {
118
+ box-shadow: none;
119
+ }
120
+ .pkt-textinput__container:hover .pkt-textinput__input, .pkt-textinput__container:hover .pkt-textinput__input-prefix, .pkt-textinput__container:hover .pkt-textinput__input-suffix, .pkt-textinput__container:hover .pkt-textinput__input-icon {
121
+ border-color: var(--color-hover);
122
+ }
123
+ .pkt-textinput__container:focus-within {
124
+ outline: 2px solid var(--color-active);
125
+ }
126
+ .pkt-textinput__container:focus-within .pkt-textinput__input,
127
+ .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
128
+ .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
129
+ .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
130
+ border-color: var(--color-active);
131
+ }
161
132
  .pkt-textinput__counter {
162
133
  font-size: 0.875rem;
163
134
  font-weight: 300;
@@ -172,43 +143,4 @@
172
143
  letter-spacing: -0.2px;
173
144
  line-height: 1.375rem;
174
145
  color: var(--color-red);
175
- }
176
- .pkt-inputwrapper--disabled {
177
- color: var(--color-disabled);
178
- cursor: inherit;
179
- }
180
- .pkt-inputwrapper--disabled .pkt-textinput__input,
181
- .pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
182
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
183
- .pkt-inputwrapper--disabled .pkt-textinput__input-icon {
184
- border-color: var(--color-disabled);
185
- background-color: var(--color-disabled-light);
186
- }
187
- .pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
188
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
189
- .pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
190
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
191
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
192
- border-color: var(--color-disabled);
193
- }
194
- .pkt-inputwrapper--disabled .pkt-textinput__input:hover {
195
- border-color: var(--color-disabled);
196
- box-shadow: none;
197
- }
198
- .pkt-inputwrapper--disabled .pkt-textinput__input:focus {
199
- border-color: var(--color-disabled);
200
- box-shadow: none;
201
- outline: none;
202
- }
203
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
204
- border-right: none;
205
- box-shadow: none;
206
- outline: none;
207
- }
208
-
209
- [data-mode=dark] .pkt-textinput__input-prefix,
210
- [data-mode=dark] .pkt-textinput__input-suffix,
211
- [data-mode=dark] .pkt-textinput__input-icon {
212
- background-color: var(--color-white);
213
- color: var(--color-blue-dark);
214
146
  }
@@ -1 +1 @@
1
- .pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--color-white);border:2px solid var(--color-blue-dark);border-radius:0;color:var(--color-blue-dark);margin:0;padding:.5rem 1rem;width:100%}.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-textinput__input::placeholder{color:var(--color-grayscale-50);opacity:1}.pkt-textinput__input:hover,.pkt-textinput__input.pkt-textinput__textinput--hover{border-color:var(--color-hover)}.pkt-textinput__input:focus-visible+.pkt-textinput-suffix,.pkt-textinput__input.pkt-textinput__textinput--focus{box-shadow:0 0 0 2px var(--color-active);border-color:var(--color-active)}.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--color-active);border-color:var(--color-active)}.pkt-textinput__input:disabled,.pkt-textinput__input:disabled::placeholder,.pkt-textinput__input[readonly]{background-color:var(--color-disabled-light);border-color:var(--color-disabled);cursor:inherit}.pkt-textinput__input:disabled:active{border:2px solid var(--color-disabled)}.pkt-textinput__input-prefix-wrapper{display:flex;align-items:center;align-self:stretch}.pkt-textinput__input-prefix-wrapper :not(:first-child){border-left:none}.pkt-textinput__input-prefix-wrapper :first-child{border-right:none}.pkt-textinput__input-prefix-wrapper input:focus{box-shadow:none}.pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,.pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix{border-color:var(--color-hover)}.pkt-textinput__input-prefix-wrapper:focus-within{outline:2px solid var(--color-active)}.pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,.pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix{border-color:var(--color-active)}.pkt-textinput__input-prefix{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;align-items:center;display:flex;width:auto;height:3rem;border:2px solid var(--color-blue-dark);padding:.5rem 0rem .5rem 1rem}.pkt-textinput__input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--color-blue-dark)}.pkt-textinput__input-suffix-wrapper{display:flex;align-items:center;align-self:stretch}.pkt-textinput__input-suffix-wrapper :not(:first-child){border-left:none}.pkt-textinput__input-suffix-wrapper :first-child{border-right:none}.pkt-textinput__input-suffix-wrapper p{margin:0}.pkt-textinput__input-suffix-wrapper input:focus{box-shadow:none}.pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,.pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,.pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon{border-color:var(--color-hover)}.pkt-textinput__input-suffix-wrapper:focus-within{outline:2px solid var(--color-active)}.pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,.pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,.pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,.pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon{border-color:var(--color-active)}.pkt-textinput__input-suffix{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;width:auto;border:2px solid var(--color-blue-dark);padding:.5rem 1rem .5rem 0rem;flex-shrink:0}.pkt-textinput__input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-textinput__input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--color-blue-dark)}.pkt-textinput__input-icon{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;flex-shrink:0;padding:.5rem 1rem;align-items:center;align-self:stretch;border:2px solid var(--color-blue-dark)}.pkt-textinput__input-icon svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-textinput__input--counter-error,.pkt-textinput__input--counter-error:focus{border-color:var(--color-red);background-color:var(--color-red-30)}.pkt-textinput__input--counter-error:focus{box-shadow:0 0 0 2px var(--color-red)}.pkt-textinput__counter{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:100%;text-align:right}.pkt-textinput__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--color-red)}.pkt-inputwrapper--disabled{color:var(--color-disabled);cursor:inherit}.pkt-inputwrapper--disabled .pkt-textinput__input,.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,.pkt-inputwrapper--disabled .pkt-textinput__input-icon{border-color:var(--color-disabled);background-color:var(--color-disabled-light)}.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon{border-color:var(--color-disabled)}.pkt-inputwrapper--disabled .pkt-textinput__input:hover{border-color:var(--color-disabled);box-shadow:none}.pkt-inputwrapper--disabled .pkt-textinput__input:focus{border-color:var(--color-disabled);box-shadow:none;outline:none}.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input{border-right:none;box-shadow:none;outline:none}[data-mode=dark] .pkt-textinput__input-prefix,[data-mode=dark] .pkt-textinput__input-suffix,[data-mode=dark] .pkt-textinput__input-icon{background-color:var(--color-white);color:var(--color-blue-dark)}
1
+ .pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--color-white);border:2px solid var(--color-blue-dark);border-radius:0;color:var(--color-blue-dark);margin:0;padding:.5rem 1rem;width:100%}.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-textinput__input::placeholder{color:var(--color-grayscale-50);opacity:1}.pkt-textinput__input:hover,.pkt-textinput__input.pkt-textinput__textinput--hover{border-color:var(--color-hover)}.pkt-textinput__input:focus-visible+.pkt-textinput-suffix,.pkt-textinput__input.pkt-textinput__textinput--focus{box-shadow:0 0 0 2px var(--color-active);border-color:var(--color-active)}.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--color-active);border-color:var(--color-active)}.pkt-textinput__input:disabled,.pkt-textinput__input:disabled::placeholder,.pkt-textinput__input[readonly]{opacity:1;background-color:var(--color-disabled-light);border-color:var(--color-disabled);cursor:inherit}.pkt-textinput__input:disabled:active{border:2px solid var(--color-disabled)}.pkt-textinput__input-prefix,.pkt-textinput__input-suffix,.pkt-textinput__input-icon{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--color-blue-dark);flex-shrink:0}.pkt-textinput__input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-textinput__input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--color-blue-dark)}.pkt-textinput__input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-textinput__input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-textinput__input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--color-blue-dark)}.pkt-textinput__input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-textinput__input-icon svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-textinput__input--counter-error,.pkt-textinput__input--counter-error:focus{border-color:var(--color-red);background-color:var(--color-red-30)}.pkt-textinput__input--counter-error:focus{box-shadow:0 0 0 2px var(--color-red)}.pkt-textinput__container{display:flex;align-items:center;align-self:stretch}.pkt-textinput__container :first-child:not(:only-child){border-right:none}.pkt-textinput__container :last-child:not(:only-child){border-left:none}.pkt-textinput__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.pkt-textinput__container p{margin:0}.pkt-textinput__container input:focus{box-shadow:none}.pkt-textinput__container:hover .pkt-textinput__input,.pkt-textinput__container:hover .pkt-textinput__input-prefix,.pkt-textinput__container:hover .pkt-textinput__input-suffix,.pkt-textinput__container:hover .pkt-textinput__input-icon{border-color:var(--color-hover)}.pkt-textinput__container:focus-within{outline:2px solid var(--color-active)}.pkt-textinput__container:focus-within .pkt-textinput__input,.pkt-textinput__container:focus-within .pkt-textinput__input-prefix,.pkt-textinput__container:focus-within .pkt-textinput__input-suffix,.pkt-textinput__container:focus-within .pkt-textinput__input-icon{border-color:var(--color-active)}.pkt-textinput__counter{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:100%;text-align:right}.pkt-textinput__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--color-red)}
@@ -977,24 +977,56 @@
977
977
  border-color: var(--color-red);
978
978
  }
979
979
  .pkt-inputwrapper--error .pkt-textinput__input:hover,
980
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
981
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
982
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
983
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
984
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
980
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input,
981
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-prefix,
982
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-suffix,
983
+ .pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-icon {
985
984
  border-color: var(--color-red);
986
985
  }
987
986
  .pkt-inputwrapper--error .pkt-textinput__input:focus-within,
988
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
989
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
990
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,
991
- .pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
992
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,
993
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
994
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,
995
- .pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
987
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input,
988
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
989
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
990
+ .pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
996
991
  border-color: var(--color-red);
997
992
  }
993
+ .pkt-inputwrapper--disabled {
994
+ color: var(--color-disabled);
995
+ cursor: inherit;
996
+ }
997
+ .pkt-inputwrapper--disabled .pkt-textinput__input,
998
+ .pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
999
+ .pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
1000
+ .pkt-inputwrapper--disabled .pkt-textinput__input-icon {
1001
+ border-color: var(--color-disabled);
1002
+ background-color: var(--color-disabled-light);
1003
+ }
1004
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input,
1005
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-prefix,
1006
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-suffix,
1007
+ .pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-icon {
1008
+ border-color: var(--color-disabled);
1009
+ }
1010
+ .pkt-inputwrapper--disabled .pkt-textinput__input:hover {
1011
+ border-color: var(--color-disabled);
1012
+ box-shadow: none;
1013
+ }
1014
+ .pkt-inputwrapper--disabled .pkt-textinput__input:focus {
1015
+ border-color: var(--color-disabled);
1016
+ box-shadow: none;
1017
+ outline: none;
1018
+ }
1019
+ .pkt-inputwrapper--disabled .pkt-textinput__container:active .pkt-textinput__input {
1020
+ border-right: none;
1021
+ box-shadow: none;
1022
+ outline: none;
1023
+ }
1024
+ [data-mode=dark] .pkt-textinput__input-prefix,
1025
+ [data-mode=dark] .pkt-textinput__input-suffix,
1026
+ [data-mode=dark] .pkt-textinput__input-icon {
1027
+ background-color: var(--color-white);
1028
+ color: var(--color-blue-dark);
1029
+ }
998
1030
 
999
1031
  /*
1000
1032
  * Header element
@@ -1229,6 +1261,7 @@
1229
1261
  border-color: var(--color-active);
1230
1262
  }
1231
1263
  .pkt-textinput__input:disabled, .pkt-textinput__input:disabled::placeholder, .pkt-textinput__input[readonly] {
1264
+ opacity: 1;
1232
1265
  background-color: var(--color-disabled-light);
1233
1266
  border-color: var(--color-disabled);
1234
1267
  cursor: inherit;
@@ -1236,39 +1269,19 @@
1236
1269
  .pkt-textinput__input:disabled:active {
1237
1270
  border: 2px solid var(--color-disabled);
1238
1271
  }
1239
- .pkt-textinput__input-prefix-wrapper {
1240
- display: flex;
1241
- align-items: center;
1242
- align-self: stretch;
1243
- }
1244
- .pkt-textinput__input-prefix-wrapper :not(:first-child) {
1245
- border-left: none;
1246
- }
1247
- .pkt-textinput__input-prefix-wrapper :first-child {
1248
- border-right: none;
1249
- }
1250
- .pkt-textinput__input-prefix-wrapper input:focus {
1251
- box-shadow: none;
1252
- }
1253
- .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix {
1254
- border-color: var(--color-hover);
1255
- }
1256
- .pkt-textinput__input-prefix-wrapper:focus-within {
1257
- outline: 2px solid var(--color-active);
1258
- }
1259
- .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix {
1260
- border-color: var(--color-active);
1261
- }
1262
- .pkt-textinput__input-prefix {
1272
+ .pkt-textinput__input-prefix, .pkt-textinput__input-suffix, .pkt-textinput__input-icon {
1263
1273
  font-size: 1.125rem;
1264
1274
  font-weight: 300;
1265
1275
  letter-spacing: -0.2px;
1266
1276
  line-height: 1.75rem;
1267
- align-items: center;
1268
1277
  display: flex;
1278
+ align-items: center;
1269
1279
  width: auto;
1270
1280
  height: 3rem;
1271
1281
  border: 2px solid var(--color-blue-dark);
1282
+ flex-shrink: 0;
1283
+ }
1284
+ .pkt-textinput__input-prefix {
1272
1285
  padding: 0.5rem 0rem 0.5rem 1rem;
1273
1286
  }
1274
1287
  .pkt-textinput__input-prefix::after {
@@ -1278,43 +1291,8 @@
1278
1291
  height: 100%;
1279
1292
  background-color: var(--color-blue-dark);
1280
1293
  }
1281
- .pkt-textinput__input-suffix-wrapper {
1282
- display: flex;
1283
- align-items: center;
1284
- align-self: stretch;
1285
- }
1286
- .pkt-textinput__input-suffix-wrapper :not(:first-child) {
1287
- border-left: none;
1288
- }
1289
- .pkt-textinput__input-suffix-wrapper :first-child {
1290
- border-right: none;
1291
- }
1292
- .pkt-textinput__input-suffix-wrapper p {
1293
- margin: 0;
1294
- }
1295
- .pkt-textinput__input-suffix-wrapper input:focus {
1296
- box-shadow: none;
1297
- }
1298
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
1299
- border-color: var(--color-hover);
1300
- }
1301
- .pkt-textinput__input-suffix-wrapper:focus-within {
1302
- outline: 2px solid var(--color-active);
1303
- }
1304
- .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
1305
- border-color: var(--color-active);
1306
- }
1307
1294
  .pkt-textinput__input-suffix {
1308
- font-size: 1.125rem;
1309
- font-weight: 300;
1310
- letter-spacing: -0.2px;
1311
- line-height: 1.75rem;
1312
- display: flex;
1313
- align-items: center;
1314
- width: auto;
1315
- border: 2px solid var(--color-blue-dark);
1316
1295
  padding: 0.5rem 1rem 0.5rem 0rem;
1317
- flex-shrink: 0;
1318
1296
  }
1319
1297
  .pkt-textinput__input-suffix svg {
1320
1298
  width: 1.5rem;
@@ -1329,16 +1307,8 @@
1329
1307
  background-color: var(--color-blue-dark);
1330
1308
  }
1331
1309
  .pkt-textinput__input-icon {
1332
- font-size: 1.125rem;
1333
- font-weight: 300;
1334
- letter-spacing: -0.2px;
1335
- line-height: 1.75rem;
1336
- display: flex;
1337
- flex-shrink: 0;
1338
1310
  padding: 0.5rem 1rem;
1339
- align-items: center;
1340
1311
  align-self: stretch;
1341
- border: 2px solid var(--color-blue-dark);
1342
1312
  }
1343
1313
  .pkt-textinput__input-icon svg {
1344
1314
  width: 1.5rem;
@@ -1352,6 +1322,39 @@
1352
1322
  .pkt-textinput__input--counter-error:focus {
1353
1323
  box-shadow: 0 0 0 2px var(--color-red);
1354
1324
  }
1325
+ .pkt-textinput__container {
1326
+ display: flex;
1327
+ align-items: center;
1328
+ align-self: stretch;
1329
+ }
1330
+ .pkt-textinput__container :first-child:not(:only-child) {
1331
+ border-right: none;
1332
+ }
1333
+ .pkt-textinput__container :last-child:not(:only-child) {
1334
+ border-left: none;
1335
+ }
1336
+ .pkt-textinput__container :not(:first-child):not(:last-child) {
1337
+ border-left: none;
1338
+ border-right: none;
1339
+ }
1340
+ .pkt-textinput__container p {
1341
+ margin: 0;
1342
+ }
1343
+ .pkt-textinput__container input:focus {
1344
+ box-shadow: none;
1345
+ }
1346
+ .pkt-textinput__container:hover .pkt-textinput__input, .pkt-textinput__container:hover .pkt-textinput__input-prefix, .pkt-textinput__container:hover .pkt-textinput__input-suffix, .pkt-textinput__container:hover .pkt-textinput__input-icon {
1347
+ border-color: var(--color-hover);
1348
+ }
1349
+ .pkt-textinput__container:focus-within {
1350
+ outline: 2px solid var(--color-active);
1351
+ }
1352
+ .pkt-textinput__container:focus-within .pkt-textinput__input,
1353
+ .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
1354
+ .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
1355
+ .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
1356
+ border-color: var(--color-active);
1357
+ }
1355
1358
  .pkt-textinput__counter {
1356
1359
  font-size: 0.875rem;
1357
1360
  font-weight: 300;
@@ -1366,43 +1369,4 @@
1366
1369
  letter-spacing: -0.2px;
1367
1370
  line-height: 1.375rem;
1368
1371
  color: var(--color-red);
1369
- }
1370
- .pkt-inputwrapper--disabled {
1371
- color: var(--color-disabled);
1372
- cursor: inherit;
1373
- }
1374
- .pkt-inputwrapper--disabled .pkt-textinput__input,
1375
- .pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
1376
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
1377
- .pkt-inputwrapper--disabled .pkt-textinput__input-icon {
1378
- border-color: var(--color-disabled);
1379
- background-color: var(--color-disabled-light);
1380
- }
1381
- .pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
1382
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
1383
- .pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
1384
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
1385
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
1386
- border-color: var(--color-disabled);
1387
- }
1388
- .pkt-inputwrapper--disabled .pkt-textinput__input:hover {
1389
- border-color: var(--color-disabled);
1390
- box-shadow: none;
1391
- }
1392
- .pkt-inputwrapper--disabled .pkt-textinput__input:focus {
1393
- border-color: var(--color-disabled);
1394
- box-shadow: none;
1395
- outline: none;
1396
- }
1397
- .pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
1398
- border-right: none;
1399
- box-shadow: none;
1400
- outline: none;
1401
- }
1402
-
1403
- [data-mode=dark] .pkt-textinput__input-prefix,
1404
- [data-mode=dark] .pkt-textinput__input-suffix,
1405
- [data-mode=dark] .pkt-textinput__input-icon {
1406
- background-color: var(--color-white);
1407
- color: var(--color-blue-dark);
1408
1372
  }