@servicetitan/design-system 10.7.0 → 11.0.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 (178) hide show
  1. package/dist/components/Backdrop/Backdrop.css +2 -20
  2. package/dist/components/Backdrop/Backdrop.css.map +1 -1
  3. package/dist/components/Backdrop/Backdrop.d.ts +5 -7
  4. package/dist/components/Backdrop/Backdrop.js +23 -43
  5. package/dist/components/Backdrop/Backdrop.js.map +1 -1
  6. package/dist/components/Backdrop/index.css +2 -20
  7. package/dist/components/Backdrop/index.css.map +1 -1
  8. package/dist/components/Button/Button.d.ts +19 -19
  9. package/dist/components/DateRangePicker/DateRangePicker.css +0 -1
  10. package/dist/components/DateRangePicker/DateRangePicker.css.map +1 -1
  11. package/dist/components/DateRangePicker/DateRangePicker.d.ts +25 -1
  12. package/dist/components/DateRangePicker/DateRangePicker.js +47 -47
  13. package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
  14. package/dist/components/DateRangePicker/DateRangePicker.test.js +11 -11
  15. package/dist/components/DateRangePicker/DateRangePicker.test.js.map +1 -1
  16. package/dist/components/DateRangePicker/components/DateRangeInput.d.ts +6 -0
  17. package/dist/components/DateRangePicker/components/DateRangeInput.js +13 -8
  18. package/dist/components/DateRangePicker/components/DateRangeInput.js.map +1 -1
  19. package/dist/components/DateRangePicker/components/DateRangeOptionList.js +3 -2
  20. package/dist/components/DateRangePicker/components/DateRangeOptionList.js.map +1 -1
  21. package/dist/components/DateRangePicker/components/DateRangeTrigger.d.ts +6 -0
  22. package/dist/components/DateRangePicker/components/DateRangeTrigger.js +5 -6
  23. package/dist/components/DateRangePicker/components/DateRangeTrigger.js.map +1 -1
  24. package/dist/components/DateRangePicker/index.css +0 -1
  25. package/dist/components/DateRangePicker/index.css.map +1 -1
  26. package/dist/components/DateRangePicker/utils/checkScope.js +1 -1
  27. package/dist/components/DateRangePicker/utils/checkScope.js.map +1 -1
  28. package/dist/components/DateRangePicker/utils/index.d.ts +0 -1
  29. package/dist/components/DateRangePicker/utils/index.js +0 -1
  30. package/dist/components/DateRangePicker/utils/index.js.map +1 -1
  31. package/dist/components/Dialog/Dialog.d.ts +7 -5
  32. package/dist/components/Dialog/Dialog.js +4 -9
  33. package/dist/components/Dialog/Dialog.js.map +1 -1
  34. package/dist/components/Drawer/Drawer.css +6 -1
  35. package/dist/components/Drawer/Drawer.css.map +1 -1
  36. package/dist/components/Drawer/Drawer.d.ts +16 -25
  37. package/dist/components/Drawer/Drawer.js +34 -24
  38. package/dist/components/Drawer/Drawer.js.map +1 -1
  39. package/dist/components/Drawer/index.css +6 -1
  40. package/dist/components/Drawer/index.css.map +1 -1
  41. package/dist/components/FilePicker/FilePicker.css +1 -1
  42. package/dist/components/FilePicker/index.css +1 -1
  43. package/dist/components/FilterButton/FilterButton.css +46 -0
  44. package/dist/components/FilterButton/FilterButton.css.map +1 -0
  45. package/dist/components/FilterButton/FilterButton.d.ts +20 -0
  46. package/dist/components/FilterButton/FilterButton.js +62 -0
  47. package/dist/components/FilterButton/FilterButton.js.map +1 -0
  48. package/dist/components/FilterButton/index.css +46 -0
  49. package/dist/components/FilterButton/index.css.map +1 -0
  50. package/dist/components/FilterButton/index.d.ts +1 -0
  51. package/dist/components/FilterButton/index.js +14 -0
  52. package/dist/components/FilterButton/index.js.map +1 -0
  53. package/dist/components/Input/Input.css +135 -201
  54. package/dist/components/Input/Input.css.map +1 -1
  55. package/dist/components/Input/Input.js +36 -60
  56. package/dist/components/Input/Input.js.map +1 -1
  57. package/dist/components/Input/index.css +135 -201
  58. package/dist/components/Input/index.css.map +1 -1
  59. package/dist/components/Link/Link.css +10 -4
  60. package/dist/components/Link/Link.css.map +1 -1
  61. package/dist/components/Link/Link.d.ts +2 -0
  62. package/dist/components/Link/Link.js +7 -19
  63. package/dist/components/Link/Link.js.map +1 -1
  64. package/dist/components/Link/index.css +10 -4
  65. package/dist/components/Link/index.css.map +1 -1
  66. package/dist/components/Modal/Modal.css +5 -2
  67. package/dist/components/Modal/Modal.css.map +1 -1
  68. package/dist/components/Modal/Modal.d.ts +9 -7
  69. package/dist/components/Modal/Modal.js +3 -3
  70. package/dist/components/Modal/Modal.js.map +1 -1
  71. package/dist/components/Modal/components.d.ts +5 -6
  72. package/dist/components/Modal/components.js +34 -13
  73. package/dist/components/Modal/components.js.map +1 -1
  74. package/dist/components/Modal/index.css +5 -2
  75. package/dist/components/Modal/index.css.map +1 -1
  76. package/dist/components/Popover/Popover.d.ts +3 -3
  77. package/dist/components/Popover/Popover.js +3 -10
  78. package/dist/components/Popover/Popover.js.map +1 -1
  79. package/dist/components/ProgressTracker/ProgressTrackerStep.css +2 -2
  80. package/dist/components/ProgressTracker/index.css +2 -2
  81. package/dist/components/Select/Select.css +1 -1
  82. package/dist/components/Select/index.css +1 -1
  83. package/dist/components/Sidebar/Sidebar.js +5 -2
  84. package/dist/components/Sidebar/Sidebar.js.map +1 -1
  85. package/dist/components/Snackbar/Snackbar.css +1 -1
  86. package/dist/components/Snackbar/index.css +1 -1
  87. package/dist/components/Tab/Tab.css +1 -0
  88. package/dist/components/Tab/Tab.css.map +1 -1
  89. package/dist/components/Tab/Tab.js +1 -1
  90. package/dist/components/Tab/Tab.js.map +1 -1
  91. package/dist/components/Tab/index.css +1 -0
  92. package/dist/components/Tab/index.css.map +1 -1
  93. package/dist/components/Table/GridMod.d.ts +4 -0
  94. package/dist/components/Table/GridMod.js +93 -0
  95. package/dist/components/Table/GridMod.js.map +1 -0
  96. package/dist/components/Table/Table.css +3 -0
  97. package/dist/components/Table/Table.css.map +1 -1
  98. package/dist/components/Table/Table.js +2 -1
  99. package/dist/components/Table/Table.js.map +1 -1
  100. package/dist/components/Table/index.css +3 -0
  101. package/dist/components/Table/index.css.map +1 -1
  102. package/dist/components/Takeover/Takeover.css +10 -0
  103. package/dist/components/Takeover/Takeover.css.map +1 -1
  104. package/dist/components/Takeover/Takeover.d.ts +11 -4
  105. package/dist/components/Takeover/Takeover.js +33 -12
  106. package/dist/components/Takeover/Takeover.js.map +1 -1
  107. package/dist/components/Takeover/TakeoverFooter.css +10 -0
  108. package/dist/components/Takeover/TakeoverFooter.css.map +1 -1
  109. package/dist/components/Takeover/TakeoverSection.css +10 -0
  110. package/dist/components/Takeover/TakeoverSection.css.map +1 -1
  111. package/dist/components/Takeover/index.css +10 -0
  112. package/dist/components/Takeover/index.css.map +1 -1
  113. package/dist/components/Tooltip/Tooltip.js +1 -1
  114. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  115. package/dist/components/index.css +221 -234
  116. package/dist/components/index.css.map +1 -1
  117. package/dist/components/index.d.ts +1 -0
  118. package/dist/components/index.js +1 -0
  119. package/dist/components/index.js.map +1 -1
  120. package/dist/global/index.css +1 -1
  121. package/dist/global/version.css +1 -1
  122. package/dist/hooks/index.d.ts +0 -1
  123. package/dist/hooks/index.js +0 -1
  124. package/dist/hooks/index.js.map +1 -1
  125. package/dist/internal/Overlay/Overlay.css +18 -0
  126. package/dist/internal/Overlay/Overlay.css.map +1 -0
  127. package/dist/internal/Overlay/Overlay.d.ts +15 -0
  128. package/dist/internal/Overlay/Overlay.js +46 -0
  129. package/dist/internal/Overlay/Overlay.js.map +1 -0
  130. package/dist/internal/Overlay/index.css +18 -0
  131. package/dist/internal/Overlay/index.css.map +1 -0
  132. package/dist/internal/Overlay/index.d.ts +1 -0
  133. package/dist/internal/Overlay/index.js +14 -0
  134. package/dist/internal/Overlay/index.js.map +1 -0
  135. package/dist/internal/Popper/Popper.css +7 -0
  136. package/dist/internal/Popper/Popper.css.map +1 -1
  137. package/dist/internal/Popper/Popper.d.ts +3 -1
  138. package/dist/internal/Popper/Popper.js +20 -11
  139. package/dist/internal/Popper/Popper.js.map +1 -1
  140. package/dist/internal/Popper/index.css +7 -0
  141. package/dist/internal/Popper/index.css.map +1 -1
  142. package/dist/internal/index.css +24 -0
  143. package/dist/internal/index.css.map +1 -1
  144. package/dist/internal/index.d.ts +1 -0
  145. package/dist/internal/index.js +1 -0
  146. package/dist/internal/index.js.map +1 -1
  147. package/dist/system-light.css +141 -5
  148. package/dist/system-light.css.map +1 -1
  149. package/dist/system-light.min.css +1 -1
  150. package/dist/system.css +368 -251
  151. package/dist/system.css.map +1 -1
  152. package/dist/system.min.css +2 -2
  153. package/dist/themes/index.css +4 -4
  154. package/dist/themes/kendo/index.css +4 -4
  155. package/dist/utilities/FocusTrap/FocusTrap.d.ts +8 -0
  156. package/dist/utilities/FocusTrap/FocusTrap.js +73 -0
  157. package/dist/utilities/FocusTrap/FocusTrap.js.map +1 -0
  158. package/dist/utilities/FocusTrap/index.d.ts +1 -0
  159. package/dist/utilities/FocusTrap/index.js +14 -0
  160. package/dist/utilities/FocusTrap/index.js.map +1 -0
  161. package/dist/utilities/OverlayContext.js +2 -7
  162. package/dist/utilities/OverlayContext.js.map +1 -1
  163. package/dist/utilities/dateFormat.d.ts +16 -0
  164. package/dist/utilities/dateFormat.js +44 -0
  165. package/dist/utilities/dateFormat.js.map +1 -0
  166. package/dist/utilities/index.d.ts +2 -1
  167. package/dist/utilities/index.js +2 -1
  168. package/dist/utilities/index.js.map +1 -1
  169. package/package.json +9 -9
  170. package/dist/components/DateRangePicker/utils/dateFormat.d.ts +0 -8
  171. package/dist/components/DateRangePicker/utils/dateFormat.js +0 -42
  172. package/dist/components/DateRangePicker/utils/dateFormat.js.map +0 -1
  173. package/dist/hooks/useFocusScope.d.ts +0 -16
  174. package/dist/hooks/useFocusScope.js +0 -89
  175. package/dist/hooks/useFocusScope.js.map +0 -1
  176. package/dist/utilities/focus-utils.d.ts +0 -4
  177. package/dist/utilities/focus-utils.js +0 -49
  178. package/dist/utilities/focus-utils.js.map +0 -1
@@ -64,38 +64,28 @@
64
64
 
65
65
  /* Input variables are stored in Form.scss */
66
66
  /* Paddings are set in em's for internal parts of .Input */
67
- .Input.Input--has-addon > input:first-child,
68
- .Input.Input--has-addon > .InputAddon:first-child,
69
- .Input.Input--has-addon > .Dropdown:first-child,
70
- .Input.Input--has-addon > .Button:first-child,
71
- .Input.Input--has-addon > .ButtonGroup .Button:first-child, .Input.Input--has-action > input:first-child,
72
- .Input.Input--has-action > .InputAddon:first-child,
73
- .Input.Input--has-action > .Dropdown:first-child,
74
- .Input.Input--has-action > .Button:first-child,
75
- .Input.Input--has-action > .ButtonGroup .Button:first-child {
67
+ .Input.Input > .Input__InnerWrapper:first-child {
76
68
  border-top-left-radius: 3px;
77
69
  border-bottom-left-radius: 3px;
78
70
  }
79
71
 
80
- .Input.Input--has-addon.Input--has-icon-right:not(.Input--has-addon-right):not(.Input--has-action-right) > input, .Input.Input--has-action.Input--has-icon-right:not(.Input--has-addon-right):not(.Input--has-action-right) > input, .Input.Input--has-addon > input:last-child,
81
- .Input.Input--has-addon > .InputAddon:last-child,
82
- .Input.Input--has-addon > .Dropdown:last-child,
83
- .Input.Input--has-addon > .Button:last-child,
84
- .Input.Input--has-addon > .ButtonGroup .Button:last-child, .Input.Input--has-action > input:last-child,
85
- .Input.Input--has-action > .InputAddon:last-child,
86
- .Input.Input--has-action > .Dropdown:last-child,
87
- .Input.Input--has-action > .Button:last-child,
88
- .Input.Input--has-action > .ButtonGroup .Button:last-child {
72
+ .Input.Input > .Input__InnerWrapper:last-child {
89
73
  border-top-right-radius: 3px;
90
74
  border-bottom-right-radius: 3px;
91
75
  }
92
76
 
93
- .Input.Input--has-addon > input, .Input.Input--has-addon > input + input, .Input.Input--has-action > input, .Input.Input--has-action > input + input, .Input.Input--has-addon.Input--has-addon-right > .InputAddon {
94
- border-left-width: 0;
77
+ .Input.Input--with-children > .Input__InnerWrapper > .Dropdown:last-child,
78
+ .Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:last-child,
79
+ .Input.Input--with-children > .Input__InnerWrapper > .Button:last-child {
80
+ border-top-left-radius: 0;
81
+ border-bottom-left-radius: 0;
95
82
  }
96
83
 
97
- .Input.Input--has-addon > input, .Input.Input--has-action > input, .Input.Input--has-addon.Input--has-addon-left > .InputAddon {
98
- border-right-width: 0;
84
+ .Input.Input--with-children > .Input__InnerWrapper > .Dropdown:first-child,
85
+ .Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:first-child,
86
+ .Input.Input--with-children > .Input__InnerWrapper > .Button:first-child {
87
+ border-top-right-radius: 0;
88
+ border-bottom-right-radius: 0;
99
89
  }
100
90
 
101
91
  /*** Input styles ***/
@@ -112,18 +102,16 @@
112
102
  background-color: #ffffff;
113
103
  /* Sizes */
114
104
  /*** States ***/
105
+ /* Readonly */
115
106
  /* Disabled */
116
107
  /* Focus */
117
108
  /* Error */
118
109
  /* Loading */
119
110
  /*** Variations ***/
120
111
  /* Transparent */
121
- /* Transparent Icon */
122
112
  /* Icon */
123
- /* Left Icon */
124
- /*** Input with adjacent label ***/
125
- /* Input.Addon */
126
- /* Handling with duplicate borders */
113
+ /* Icon size in case it was not set explicitly */
114
+ /* Handling with rounded corners */
127
115
  /* Action */
128
116
  /* Fluid */
129
117
  }
@@ -136,20 +124,37 @@
136
124
  .Input, .Input.Input--small, .Input.Input--medium, .Input.Input--large {
137
125
  font-size: 16px;
138
126
  }
139
- .Input.Input--xsmall > input {
127
+ .Input input, .Input.Input--medium input {
128
+ padding: 0.4375em 0.6875em;
129
+ }
130
+ .Input.Input--xsmall input {
140
131
  padding: 0.185em 0.7857142857em;
141
132
  }
142
- .Input.Input--small > input {
133
+ .Input.Input--small input {
143
134
  padding: 0.185em 0.6875em;
144
135
  }
145
- .Input.Input--medium > input {
146
- padding: 0.4375em 0.6875em;
147
- }
148
- .Input.Input--large > input {
136
+ .Input.Input--large input {
149
137
  padding: 0.7em 0.6875em;
150
138
  }
151
- .Input > input {
152
- /* Disabling effects of bootstrap.css on .Input>input */
139
+ .Input > .Input__InnerWrapper {
140
+ display: inline-flex;
141
+ flex: 1 1 auto;
142
+ margin: 0;
143
+ padding: 0;
144
+ max-width: 100%;
145
+ /* ... */
146
+ background-color: #ffffff;
147
+ border: 1px solid #dfe0e1;
148
+ color: #141414;
149
+ border-radius: 3px;
150
+ transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
151
+ box-shadow: none;
152
+ }
153
+ .Input > .Input__InnerWrapper > * {
154
+ flex: 0 0 auto;
155
+ }
156
+ .Input > .Input__InnerWrapper > input {
157
+ /* Disabling effects of bootstrap.css on .Input > input */
153
158
  display: initial;
154
159
  height: initial;
155
160
  vertical-align: initial;
@@ -164,88 +169,85 @@
164
169
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
165
170
  text-align: left;
166
171
  line-height: 1.5;
167
- padding: 0.4375em 0.6875em;
168
172
  /* ... */
169
- background-color: #ffffff;
170
- border: 1px solid #dfe0e1;
173
+ background-color: transparent;
174
+ border: none;
171
175
  color: #141414;
172
- border-radius: 3px;
173
176
  transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
174
177
  box-shadow: none;
175
178
  /* Chrome autofill styling */
176
179
  }
177
- .Input > input[readonly] {
180
+ .Input > .Input__InnerWrapper > input[readonly] {
178
181
  background-color: #f7f7f7;
179
182
  }
180
- .Input > input[readonly]::placeholder {
181
- color: rgba(20, 20, 20, 0.4);
182
- }
183
- .Input > input::placeholder {
183
+ .Input > .Input__InnerWrapper > input::placeholder {
184
184
  color: rgba(20, 20, 20, 0.4);
185
185
  }
186
- .Input > input::-webkit-autofill {
186
+ .Input > .Input__InnerWrapper > input::-webkit-autofill {
187
187
  box-shadow: 0 0 0 100px #fffff0 inset !important;
188
188
  border-color: #e5dfa1 !important;
189
189
  }
190
+ .Input.Input--readonly > .Input__InnerWrapper {
191
+ background-color: #f7f7f7;
192
+ }
190
193
  .Input.Input--disabled, .Input:not(.Input--disabled) input[disabled] {
191
194
  opacity: 0.6;
192
195
  }
193
- .Input.Input--disabled > input, .Input:not(.Input--disabled) input[disabled], .Input.Input--disabled .InputAddon {
196
+ .Input.Input--disabled *, .Input:not(.Input--disabled) input[disabled] * {
197
+ pointer-events: none;
198
+ }
199
+ .Input.Input--disabled input, .Input:not(.Input--disabled) input[disabled], .Input.Input--disabled .InputAddon {
194
200
  background-color: #f7f7f7;
195
201
  pointer-events: none;
196
202
  }
197
- .Input.Input--disabled > input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
203
+ .Input.Input--disabled input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
198
204
  color: rgba(20, 20, 20, 0.4);
199
205
  }
200
206
  .Input:focus-within, .Input.Input--focus {
201
207
  box-shadow: 0 0 0 3px #a9d1ff;
202
208
  border-radius: 3px;
203
209
  }
204
- .Input:focus-within input, .Input.Input--focus input {
210
+ .Input:focus-within > .Input__InnerWrapper, .Input.Input--focus > .Input__InnerWrapper {
205
211
  background-color: #ffffff;
206
212
  border-color: #2270ee;
213
+ }
214
+ .Input:focus-within > .Input__InnerWrapper > input, .Input.Input--focus > .Input__InnerWrapper > input {
207
215
  color: #141414;
208
216
  }
209
- .Input:focus-within input::-webkit-autofill, .Input.Input--focus input::-webkit-autofill {
217
+ .Input:focus-within > .Input__InnerWrapper > input::-webkit-autofill, .Input.Input--focus > .Input__InnerWrapper > input::-webkit-autofill {
210
218
  box-shadow: 0 0 0 100px #fffff0 inset !important;
211
219
  border-color: #d5c315 !important;
212
220
  }
213
- .Input:focus-within.Input--has-addon .InputAddon, .Input.Input--focus.Input--has-addon .InputAddon {
214
- border-color: #2270ee;
215
- }
216
- .Input:focus-within.Input--has-addon-right input, .Input:focus-within.Input--has-action-right input, .Input.Input--focus.Input--has-addon-right input, .Input.Input--focus.Input--has-action-right input {
217
- border-right-color: transparent;
218
- }
219
- .Input:focus-within.Input--has-addon-left input, .Input:focus-within.Input--has-action-left input, .Input.Input--focus.Input--has-addon-left input, .Input.Input--focus.Input--has-action-left input {
220
- border-left-color: transparent;
221
+ .Input:focus-within > .Input__InnerWrapper > .InputAddon, .Input.Input--focus > .Input__InnerWrapper > .InputAddon {
222
+ border-color: transparent;
221
223
  }
222
224
  .Input.Input--error {
223
225
  /* Error Focus */
224
226
  }
225
- .Input.Input--error > input {
227
+ .Input.Input--error > .Input__InnerWrapper {
226
228
  background-color: #ffece9;
227
229
  border-color: #e63717;
230
+ }
231
+ .Input.Input--error > .Input__InnerWrapper > input {
228
232
  color: #e63717;
229
233
  box-shadow: none;
230
234
  /* Error Placeholder */
231
235
  /* Error */
232
236
  }
233
- .Input.Input--error > input::-webkit-input-placeholder {
237
+ .Input.Input--error > .Input__InnerWrapper > input::-webkit-input-placeholder {
234
238
  color: rgba(230, 55, 23, 0.6);
235
239
  }
236
- .Input.Input--error > input::-moz-placeholder {
240
+ .Input.Input--error > .Input__InnerWrapper > input::-moz-placeholder {
237
241
  color: rgba(230, 55, 23, 0.6);
238
242
  }
239
- .Input.Input--error > input:-ms-input-placeholder {
243
+ .Input.Input--error > .Input__InnerWrapper > input:-ms-input-placeholder {
240
244
  color: rgba(230, 55, 23, 0.6);
241
245
  }
242
- .Input.Input--error > input::-webkit-autofill {
246
+ .Input.Input--error > .Input__InnerWrapper > input::-webkit-autofill {
243
247
  box-shadow: 0 0 0 100px #ffece9 inset !important;
244
248
  border-color: #e63717 !important;
245
249
  }
246
- .Input.Input--error.Input--has-addon .InputAddon {
247
- background-color: #ffece9;
248
- border-color: #e63717;
250
+ .Input.Input--error > .Input__InnerWrapper > .InputAddon {
249
251
  color: #e63717;
250
252
  }
251
253
  .Input.Input--error:focus-within, .Input.Input--error.Input--focus {
@@ -254,207 +256,139 @@
254
256
  .Input.Input--error:focus-within input, .Input.Input--error.Input--focus input {
255
257
  border-color: #e63717;
256
258
  }
257
- .Input.Input--error:focus-within.Input--has-addon .InputAddon, .Input.Input--error.Input--focus.Input--has-addon .InputAddon {
259
+ .Input.Input--error:focus-within .InputAddon, .Input.Input--error.Input--focus .InputAddon {
258
260
  border-color: #e63717;
259
261
  }
260
- .Input.Input--error.Input--has-icon > i.a-Icon {
262
+ .Input.Input--error .InputAddon > i.a-Icon {
261
263
  color: #e63717;
262
264
  }
263
- .Input.Input--loading.Input--loading > input {
264
- padding-right: 2.475em !important;
265
- }
266
- .Input.Input--loading.Input--loading.Input--xsmall > input {
267
- padding-right: 2.3375em !important;
268
- }
269
265
  .Input.Input--loading.Input--loading .Spinner {
270
- position: absolute;
271
266
  line-height: 1;
272
267
  text-align: center;
273
- top: 0;
274
- right: 8px;
275
- margin: 0;
276
268
  height: 100%;
277
- /* ... */
278
269
  width: 1.1em;
279
270
  }
280
- .Input.Input--transparent > input {
271
+ .Input.Input--transparent input {
281
272
  border-color: transparent !important;
282
273
  background-color: transparent !important;
283
274
  padding: 0 !important;
284
275
  box-shadow: none !important;
285
276
  border-radius: 0 !important;
286
277
  }
287
- .Input.Input--transparent.Input--has-icon > i.a-Icon {
288
- width: 1.1em;
289
- }
290
- .Input.Input--transparent.Input--has-icon > input {
291
- padding-left: 0 !important;
292
- padding-right: 2em !important;
293
- }
294
- .Input.Input--transparent[class*="left icon"] > input {
295
- padding-left: 2em !important;
296
- padding-right: 0 !important;
297
- }
298
- .Input.Input > i.a-Icon {
299
- pointer-events: none;
300
- }
301
- .Input.Input--has-icon {
302
- /* Respecting large icon width */
303
- }
304
- .Input.Input--has-icon > i.a-Icon {
278
+ .Input > .Input__InnerWrapper i.a-Icon {
305
279
  cursor: default;
306
- position: absolute;
307
- line-height: 1;
308
- text-align: center;
309
- top: 0;
310
- right: 0;
311
- margin: 0;
312
- height: 100%;
313
280
  color: #737475;
314
- width: 2.475em;
315
- border-radius: 0 3px 3px 0;
281
+ pointer-events: none;
316
282
  transition: opacity 0.3s ease;
283
+ line-height: inherit;
317
284
  }
318
- .Input.Input--has-icon > input {
319
- padding-right: 2.475em;
320
- }
321
- .Input.Input--has-icon.Input--large > input {
322
- padding-right: 3.09375em;
323
- }
324
- .Input.Input--has-icon.Input--large > i.a-Icon {
325
- width: 3.09375em;
326
- }
327
- .Input.Input--has-icon.Input--large.Input--has-icon-left > input {
328
- padding-left: 3.09375em !important;
329
- padding-right: 0.6875em !important;
330
- }
331
- .Input.Input--has-icon > i.a-Icon svg {
285
+ .Input > .Input__InnerWrapper i.a-Icon svg {
332
286
  font-size: inherit;
333
- left: 0;
334
- position: absolute;
335
287
  text-align: center;
336
- top: 50%;
337
- transform: translateY(-50%);
338
- width: 100%;
339
- }
340
- .Input.Input--has-icon-left > i.a-Icon {
341
- right: auto;
342
- left: 1px;
343
- border-radius: 3px 0 0 3px;
344
- }
345
- .Input.Input--has-icon-left > input {
346
- padding-left: 2.475em !important;
347
- padding-right: 0.6875em !important;
348
- }
349
- .Input.Input--has-addon {
350
- /* ... */
351
- /* Proper Icon size in case it was not set explicitly */
288
+ vertical-align: middle;
352
289
  }
353
- .Input.Input--has-addon > .InputAddon {
290
+ .Input > .Input__InnerWrapper > .InputAddon {
354
291
  flex: 0 0 auto;
355
292
  margin: 0;
356
293
  font-size: 16px;
357
294
  z-index: 0;
358
295
  /* Differ from Semantic UI */
359
296
  color: #737475;
360
- border: 1px solid #dfe0e1;
361
- border-radius: 3px;
362
297
  height: auto;
363
298
  display: flex;
364
299
  align-items: center;
365
300
  transition: color 0.1s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
366
- padding: 0.4375em 0.6875em;
367
301
  }
368
- .Input.Input--has-addon.Input--xsmall > .InputAddon {
369
- padding: 0.185em 0.7857142857em;
370
- font-size: 14px;
371
- }
372
- .Input.Input--has-addon.Input--small > .InputAddon {
373
- padding: 0.185em 0.6875em;
374
- }
375
- .Input.Input--has-addon.Input--medium > .InputAddon {
376
- padding: 0.4375em 0.6875em;
377
- }
378
- .Input.Input--has-addon.Input--large > .InputAddon {
379
- padding: 0.7em 0.6875em;
380
- }
381
- .Input.Input--has-addon.Input--has-addon-left > .InputAddon {
382
- padding-right: 0;
383
- }
384
- .Input.Input--has-addon.Input--has-addon-right > .InputAddon {
385
- padding-left: 0;
302
+ .Input.Input--xsmall > .Input__InnerWrapper > .InputAddon .a-Icon {
303
+ font-size: 16px;
386
304
  }
387
- .Input.Input--has-addon > .InputAddon .a-Icon {
388
- line-height: inherit;
305
+ .Input.Input--small > .Input__InnerWrapper > .InputAddon .a-Icon {
306
+ font-size: 20px;
389
307
  }
390
- .Input.Input--has-addon > .InputAddon .a-Icon > svg {
391
- vertical-align: middle;
308
+ .Input.Input--medium > .Input__InnerWrapper > .InputAddon .a-Icon {
309
+ font-size: 20px;
392
310
  }
393
- .Input.Input--has-addon.Input--xsmall > .InputAddon .a-Icon {
394
- font-size: 16px;
311
+ .Input.Input--large > .Input__InnerWrapper > .InputAddon .a-Icon {
312
+ font-size: 24px;
395
313
  }
396
- .Input.Input--has-addon.Input--xsmall > .InputAddon .a-Icon > svg {
314
+ .Input.Input--xsmall > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
397
315
  margin: 0 -2px;
398
316
  }
399
- .Input.Input--has-addon.Input--small > .InputAddon .a-Icon, .Input.Input--has-addon.Input--medium > .InputAddon .a-Icon {
400
- font-size: 20px;
401
- }
402
- .Input.Input--has-addon.Input--small > .InputAddon .a-Icon > svg, .Input.Input--has-addon.Input--medium > .InputAddon .a-Icon > svg {
403
- margin: -2px 0;
317
+ .Input.Input--small > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
318
+ margin: 0;
404
319
  }
405
- .Input.Input--has-addon.Input--large > .InputAddon .a-Icon {
406
- font-size: 24px;
320
+ .Input.Input--medium > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
321
+ margin: 0;
407
322
  }
408
- .Input.Input--has-addon.Input--large > .InputAddon .a-Icon > svg {
323
+ .Input.Input--large > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
409
324
  margin: -6px 0;
410
325
  }
411
- .Input.Input--has-addon.Input--xsmall > .InputAddon * {
326
+ .Input.Input--xsmall > .Input__InnerWrapper > .InputAddon *:not(input) {
412
327
  line-height: 12px;
413
328
  }
414
- .Input.Input--has-addon.Input--small > .InputAddon * {
329
+ .Input.Input--small > .Input__InnerWrapper > .InputAddon *:not(input) {
415
330
  line-height: 16px;
416
331
  }
417
- .Input.Input--has-addon.Input--medium > .InputAddon * {
332
+ .Input.Input--medium > .Input__InnerWrapper > .InputAddon *:not(input) {
418
333
  line-height: 16px;
419
334
  }
420
- .Input.Input--has-addon.Input--large > .InputAddon * {
335
+ .Input.Input--large > .Input__InnerWrapper > .InputAddon *:not(input) {
421
336
  line-height: 20px;
422
337
  }
423
- .Input.Input--has-addon, .Input.Input--has-action {
424
- /* Handling with rounded corners */
338
+ .Input.Input--xsmall > .Input__InnerWrapper > .InputAddon {
339
+ padding: 0.185em 0.7857142857em;
340
+ font-size: 14px;
341
+ }
342
+ .Input.Input--small > .Input__InnerWrapper > .InputAddon {
343
+ padding: 0.185em 0.6875em;
344
+ }
345
+ .Input.Input--medium > .Input__InnerWrapper > .InputAddon {
346
+ padding: 0.4375em 0.6875em;
347
+ }
348
+ .Input.Input--large > .Input__InnerWrapper > .InputAddon {
349
+ padding: 0.7em 0.6875em;
350
+ }
351
+ .Input.Input > .Input__InnerWrapper > input + .InputAddon, .Input.Input > .Input__InnerWrapper > .InputAddon + input, .Input.Input > .Input__InnerWrapper > .InputAddon + .InputAddon {
352
+ padding-left: 0;
425
353
  }
426
- .Input.Input--has-addon:not(.Input--has-addon-left):not(.Input--has-action-left) > input, .Input.Input--has-action:not(.Input--has-addon-left):not(.Input--has-action-left) > input {
427
- border-left-width: 1px;
428
- }
429
- .Input.Input--has-addon:not(.Input--has-addon-right):not(.Input--has-action-right) > input, .Input.Input--has-action:not(.Input--has-addon-right):not(.Input--has-action-right) > input {
430
- border-right-width: 1px;
431
- }
432
- .Input.Input--has-addon > input,
433
- .Input.Input--has-addon > .InputAddon,
434
- .Input.Input--has-addon > .Dropdown,
435
- .Input.Input--has-addon > .Button,
436
- .Input.Input--has-addon > .ButtonGroup .Button, .Input.Input--has-action > input,
437
- .Input.Input--has-action > .InputAddon,
438
- .Input.Input--has-action > .Dropdown,
439
- .Input.Input--has-action > .Button,
440
- .Input.Input--has-action > .ButtonGroup .Button {
354
+ .Input.Input > .Input__InnerWrapper {
441
355
  border-radius: 0;
442
356
  }
443
- .Input.Input--has-action > .Button, .Input.Input--has-action > .ButtonGroup {
357
+ .Input.Input--with-children > .Input__InnerWrapper > .Dropdown,
358
+ .Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button,
359
+ .Input.Input--with-children > .Input__InnerWrapper > .Button {
360
+ margin-top: -1px;
361
+ margin-bottom: -1px;
362
+ }
363
+ .Input.Input--with-children > .Input__InnerWrapper > .Dropdown:first-child,
364
+ .Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:first-child,
365
+ .Input.Input--with-children > .Input__InnerWrapper > .Button:first-child {
366
+ margin-left: -1px;
367
+ }
368
+ .Input.Input--with-children > .Input__InnerWrapper > .Dropdown:last-child,
369
+ .Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:last-child,
370
+ .Input.Input--with-children > .Input__InnerWrapper > .Button:last-child {
371
+ margin-right: -1px;
372
+ }
373
+ .Input > .Button,
374
+ .Input > .ButtonGroup {
444
375
  display: flex;
445
376
  align-items: center;
446
377
  flex: 0 0 auto;
447
- }
448
- .Input.Input--has-action > .Button,
449
- .Input.Input--has-action > .ButtonGroup > .Button {
450
378
  margin: 0;
451
379
  }
452
380
  .Input.Input--fluid {
453
381
  display: flex;
454
382
  }
455
- .Input.Input--fluid > input {
383
+ .Input.Input--fluid input {
456
384
  width: 100%;
457
385
  }
386
+ .Input:not(.Input--with-children) > .Button.Button--outline:first-child {
387
+ margin-right: -1px;
388
+ }
389
+ .Input:not(.Input--with-children) > .Button.Button--outline:last-child {
390
+ margin-left: -1px;
391
+ }
458
392
 
459
393
  @keyframes button-spin {
460
394
  from {
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Input/Input.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"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","file":"Input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Input/Input.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"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","file":"Input.css"}