sakana-element 2.4.2 → 2.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 (138) hide show
  1. package/README.md +26 -2
  2. package/dist/es/Alert-Cq5F0XNt.js +57 -0
  3. package/dist/es/Avatar-CbgoH75Q.js +5 -0
  4. package/dist/es/Badge-BVu3hO8V.js +7 -0
  5. package/dist/es/Breadcrumb-Bh5y4LbC.js +6 -0
  6. package/dist/es/Button-B1wRI6I7.js +28 -0
  7. package/dist/es/Card-VMxMFix8.js +8 -0
  8. package/dist/es/Carousel-QnDHp3Ka.js +11 -0
  9. package/dist/es/ChatBubble-DYao4l85.js +5 -0
  10. package/dist/es/Checkbox-BbLzAqK2.js +228 -0
  11. package/dist/es/Collapse-BkKmhGQf.js +11 -0
  12. package/dist/es/Collapsible-B56M9eUW.js +12 -0
  13. package/dist/es/Command-CORaZKsJ.js +45 -0
  14. package/dist/es/ConfigProvider-CGLQ9b8M.js +35 -0
  15. package/dist/es/Diff-gDYKT1cl.js +17 -0
  16. package/dist/es/Divider-bI4lEaol.js +5 -0
  17. package/dist/es/Drawer-AnXxT-V6.js +6 -0
  18. package/dist/es/Dropdown-80RoE7gX.js +115 -0
  19. package/dist/es/FileInput-B6CyElTd.js +113 -0
  20. package/dist/es/Filter-CtIs_iO4.js +13 -0
  21. package/dist/es/Icon-hbRhI1iH.js +3 -0
  22. package/dist/es/Indicator-Bs6f41iJ.js +5 -0
  23. package/dist/es/Input-DJsDXAG1.js +8 -0
  24. package/dist/es/Kbd-DZf70Cdz.js +5 -0
  25. package/dist/es/Link-CLXoAvDl.js +5 -0
  26. package/dist/es/Loading-BHzOi8J-.js +27 -0
  27. package/dist/es/Message-DOxtRo8V.js +51 -0
  28. package/dist/es/Notification-F5UfnGWs.js +22 -0
  29. package/dist/es/Pixelate-DFpR42b2.js +12 -0
  30. package/dist/es/Popconfirm-C1LNG9db.js +8 -0
  31. package/dist/es/Progress-CDHJJUVL.js +6 -0
  32. package/dist/es/Radio-HMaWtyx9.js +11 -0
  33. package/dist/es/Resizable-DSYUZwLE.js +59 -0
  34. package/dist/es/Select-DaBVMoMB.js +31 -0
  35. package/dist/es/Skeleton-4hCbgDOF.js +7 -0
  36. package/dist/es/Switch-BCTrn4hn.js +11 -0
  37. package/dist/es/Table-B5twhEZC.js +5 -0
  38. package/dist/es/Tooltip-CDjXpGHn.js +4 -0
  39. package/dist/es/Validator-DoWa9KfA.js +16 -0
  40. package/dist/es/index.js +41 -140
  41. package/dist/index.css +2 -1
  42. package/dist/theme/Alert.css +1 -295
  43. package/dist/theme/Avatar.css +1 -86
  44. package/dist/theme/Badge.css +1 -214
  45. package/dist/theme/Breadcrumb.css +1 -192
  46. package/dist/theme/Button.css +1 -1570
  47. package/dist/theme/Card.css +1 -347
  48. package/dist/theme/Carousel.css +1 -0
  49. package/dist/theme/ChatBubble.css +1 -218
  50. package/dist/theme/Checkbox.css +1 -604
  51. package/dist/theme/Collapse.css +1 -764
  52. package/dist/theme/Collapsible.css +1 -0
  53. package/dist/theme/Command.css +1 -0
  54. package/dist/theme/Diff.css +1 -110
  55. package/dist/theme/Divider.css +1 -150
  56. package/dist/theme/Drawer.css +1 -206
  57. package/dist/theme/Dropdown.css +1 -471
  58. package/dist/theme/FileInput.css +1 -397
  59. package/dist/theme/Filter.css +1 -598
  60. package/dist/theme/Indicator.css +1 -159
  61. package/dist/theme/Input.css +1 -647
  62. package/dist/theme/Kbd.css +1 -104
  63. package/dist/theme/Link.css +1 -69
  64. package/dist/theme/Loading.css +1 -266
  65. package/dist/theme/Message.css +1 -565
  66. package/dist/theme/Notification.css +1 -316
  67. package/dist/theme/Popconfirm.css +1 -46
  68. package/dist/theme/Progress.css +1 -278
  69. package/dist/theme/Radio.css +1 -492
  70. package/dist/theme/Resizable.css +1 -95
  71. package/dist/theme/Select.css +1 -584
  72. package/dist/theme/Skeleton.css +1 -192
  73. package/dist/theme/Switch.css +1 -323
  74. package/dist/theme/Table.css +1 -680
  75. package/dist/theme/Validator.css +1 -25
  76. package/dist/theme/index.css +1 -341
  77. package/dist/types/components/Badge/types.d.ts +2 -0
  78. package/dist/types/components/Carousel/constants.d.ts +6 -0
  79. package/dist/types/components/Carousel/index.d.ts +77 -0
  80. package/dist/types/components/Carousel/types.d.ts +27 -0
  81. package/dist/types/components/Collapsible/constants.d.ts +6 -0
  82. package/dist/types/components/Collapsible/index.d.ts +85 -0
  83. package/dist/types/components/Collapsible/types.d.ts +22 -0
  84. package/dist/types/components/Command/constants.d.ts +4 -0
  85. package/dist/types/components/Command/index.d.ts +216 -0
  86. package/dist/types/components/Command/types.d.ts +59 -0
  87. package/dist/types/components/Validator/index.d.ts +1 -0
  88. package/dist/types/components/index.d.ts +3 -0
  89. package/dist/types/hooks/index.d.ts +1 -1
  90. package/dist/umd/index.css +2 -1
  91. package/dist/umd/index.css.gz +0 -0
  92. package/dist/umd/index.umd.cjs +1255 -5
  93. package/dist/umd/index.umd.cjs.gz +0 -0
  94. package/package.json +15 -3
  95. package/dist/es/Alert-DdAShH-x.js +0 -19
  96. package/dist/es/Avatar-BGTH7x40.js +0 -9
  97. package/dist/es/Badge-CYZ55qNe.js +0 -14
  98. package/dist/es/Breadcrumb-BTWTtzrN.js +0 -15
  99. package/dist/es/Button-GsSCWg5x.js +0 -24
  100. package/dist/es/Card-BhgzwQqo.js +0 -16
  101. package/dist/es/ChatBubble-4F481Agj.js +0 -9
  102. package/dist/es/Checkbox-C7vZGSTh.js +0 -51
  103. package/dist/es/Collapse-CbcSQig5.js +0 -53
  104. package/dist/es/ConfigProvider-K1UzjlRm.js +0 -45
  105. package/dist/es/Diff-B747pgwb.js +0 -64
  106. package/dist/es/Divider-BSu_1-AU.js +0 -9
  107. package/dist/es/Drawer-I2lCgyba.js +0 -40
  108. package/dist/es/Dropdown-B0J_c8Wv.js +0 -104
  109. package/dist/es/FileInput-CFg1wpsH.js +0 -33
  110. package/dist/es/Filter-nA8j-62U.js +0 -40
  111. package/dist/es/Form-C1b8Igns.js +0 -123
  112. package/dist/es/Icon-BulvH9Wm.js +0 -27
  113. package/dist/es/Indicator-BbW4iUkh.js +0 -9
  114. package/dist/es/Input-BUHFulIW.js +0 -42
  115. package/dist/es/Kbd-CeP2wkdE.js +0 -13
  116. package/dist/es/Link-Dks2bXo8.js +0 -11
  117. package/dist/es/Loading-DoBtVGWo.js +0 -92
  118. package/dist/es/Message-Ba_P4Wvy.js +0 -152
  119. package/dist/es/Notification-DzG8dLuk.js +0 -69
  120. package/dist/es/Overlay-DeyTycv0.js +0 -12
  121. package/dist/es/Pixelate-B21HKbSE.js +0 -39
  122. package/dist/es/Popconfirm-BqN3JxJ_.js +0 -23
  123. package/dist/es/Progress--6EJjbbM.js +0 -12
  124. package/dist/es/Radio-CrdrvrFH.js +0 -33
  125. package/dist/es/Resizable-By3ijQf0.js +0 -151
  126. package/dist/es/Select-Cq1Ucs_U.js +0 -133
  127. package/dist/es/Skeleton-ChCVgMSk.js +0 -15
  128. package/dist/es/Switch-DURmSH-T.js +0 -34
  129. package/dist/es/Table-BE2f9u65.js +0 -10
  130. package/dist/es/Tooltip-DR4Mc5Fh.js +0 -74
  131. package/dist/es/Validator-BYn72MYn.js +0 -40
  132. package/dist/es/hooks-dJGu-5DG.js +0 -170
  133. package/dist/es/utils-CnCdZsHG.js +0 -155
  134. package/dist/es/vendor-eombfMkP.js +0 -1351
  135. package/dist/theme/Form.css +0 -83
  136. package/dist/theme/Icon.css +0 -168
  137. package/dist/theme/Overlay.css +0 -12
  138. package/dist/theme/Tooltip.css +0 -235
package/dist/theme/FileInput.css CHANGED
@@ -1,397 +1 @@
1
- /* FileInput Variables */
2
- .px-file-input {
3
- --px-file-input-text-color: var(--px-text-color-primary);
4
- --px-file-input-border-color: var(--px-border-color);
5
- --px-file-input-hover-border-color: var(--px-hover-border-color);
6
- --px-file-input-bg-color: var(--px-fill-color-blank);
7
- --px-file-input-placeholder-color: var(--px-text-color-placeholder);
8
- --px-file-input-shadow-color: var(--px-shadow-color);
9
- --px-file-input-hover-shadow-color: var(--px-shadow-color);
10
- --px-file-input-trigger-bg-color: var(--px-fill-color-dark);
11
- --px-file-input-trigger-text-color: var(--px-text-color-primary);
12
- --px-file-input-trigger-hover-bg-color: var(--px-fill-color-darker);
13
- --px-file-input-icon-color: var(--px-text-color-secondary);
14
- --px-file-input-clear-hover-color: var(--px-text-color-primary);
15
-
16
- /* Raised bevel for trigger button (same as PxButton) */
17
- --px-file-input-trigger-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
18
- --px-file-input-trigger-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
19
-
20
- /* Sunken bevel for filename area (same as PxInput) */
21
- --px-file-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
22
- --px-file-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
23
-
24
- /* Hover-state bevel (slightly stronger) */
25
- --px-file-input-trigger-hover-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
26
- --px-file-input-trigger-hover-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
27
- }
28
- /* Base FileInput Styles */
29
- .px-file-input {
30
- --px-file-input-height: 36px;
31
- position: relative;
32
- font-size: var(--px-font-size-base);
33
- font-family: var(--px-font-family);
34
- display: inline-flex;
35
- width: 100%;
36
- line-height: var(--px-file-input-height);
37
- box-sizing: border-box;
38
- vertical-align: middle;
39
- }
40
- /* Disabled state */
41
- .px-file-input.is-disabled {
42
- cursor: not-allowed;
43
- }
44
- .px-file-input.is-disabled .px-file-input__wrapper {
45
- opacity: 0.6;
46
- cursor: not-allowed;
47
- }
48
- .px-file-input.is-disabled .px-file-input__wrapper::before {
49
- background: var(--px-disabled-border-color);
50
- }
51
- .px-file-input.is-disabled .px-file-input__wrapper::after {
52
- background: var(--px-disabled-bg-color);
53
- }
54
- .px-file-input.is-disabled .px-file-input__trigger {
55
- cursor: not-allowed;
56
- }
57
- .px-file-input.is-disabled .px-file-input__name {
58
- color: var(--px-disabled-text-color);
59
- cursor: not-allowed;
60
- }
61
- /* FileInput Wrapper - Main pixel-style container */
62
- .px-file-input__wrapper {
63
- display: inline-flex;
64
- flex-grow: 1;
65
- align-items: center;
66
- background: transparent;
67
- border: none;
68
- position: relative;
69
- transition: none;
70
- height: var(--px-file-input-height);
71
- padding: 2px;
72
- box-sizing: border-box;
73
-
74
- /* Pixel shadow via drop-shadow */
75
- filter: drop-shadow(
76
- var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-shadow-color)
77
- );
78
- }
79
- /* Border layer — filled with border color, clipped to pixel shape */
80
- .px-file-input__wrapper::before {
81
- content: "";
82
- position: absolute;
83
- inset: 0;
84
- background: var(--px-file-input-border-color);
85
- clip-path: polygon(
86
- 0 4px,
87
- 2px 4px,
88
- 2px 2px,
89
- 4px 2px,
90
- 4px 0,
91
- calc(100% - 4px) 0,
92
- calc(100% - 4px) 2px,
93
- calc(100% - 2px) 2px,
94
- calc(100% - 2px) 4px,
95
- 100% 4px,
96
- 100% calc(100% - 4px),
97
- calc(100% - 2px) calc(100% - 4px),
98
- calc(100% - 2px) calc(100% - 2px),
99
- calc(100% - 4px) calc(100% - 2px),
100
- calc(100% - 4px) 100%,
101
- 4px 100%,
102
- 4px calc(100% - 2px),
103
- 2px calc(100% - 2px),
104
- 2px calc(100% - 4px),
105
- 0 calc(100% - 4px)
106
- );
107
- z-index: -1;
108
- }
109
- /* Fill layer — inset by border width, filled with bg color */
110
- .px-file-input__wrapper::after {
111
- content: "";
112
- position: absolute;
113
- inset: 2px;
114
- background: var(--px-file-input-bg-color);
115
- clip-path: polygon(
116
- 0 4px,
117
- 2px 4px,
118
- 2px 2px,
119
- 4px 2px,
120
- 4px 0,
121
- calc(100% - 4px) 0,
122
- calc(100% - 4px) 2px,
123
- calc(100% - 2px) 2px,
124
- calc(100% - 2px) 4px,
125
- 100% 4px,
126
- 100% calc(100% - 4px),
127
- calc(100% - 2px) calc(100% - 4px),
128
- calc(100% - 2px) calc(100% - 2px),
129
- calc(100% - 4px) calc(100% - 2px),
130
- calc(100% - 4px) 100%,
131
- 4px 100%,
132
- 4px calc(100% - 2px),
133
- 2px calc(100% - 2px),
134
- 2px calc(100% - 4px),
135
- 0 calc(100% - 4px)
136
- );
137
- z-index: -1;
138
- /* Sunken bevel on the filename area */
139
- box-shadow: var(--px-file-input-inset-shadow), var(--px-file-input-inset-highlight);
140
- }
141
- .px-file-input__wrapper:hover {
142
- transform: translate(-1px, -1px);
143
- filter: drop-shadow(4px 4px 0px var(--px-file-input-shadow-color));
144
- }
145
- .px-file-input__wrapper:hover::before {
146
- background: var(--px-file-input-hover-border-color);
147
- }
148
- /* Hidden native file input */
149
- .px-file-input__native {
150
- position: absolute;
151
- width: 0;
152
- height: 0;
153
- overflow: hidden;
154
- opacity: 0;
155
- pointer-events: none;
156
- }
157
- /* Trigger button */
158
- .px-file-input__trigger {
159
- display: inline-flex;
160
- align-items: center;
161
- justify-content: center;
162
- align-self: stretch;
163
- padding: 0 12px;
164
- background: var(--px-file-input-trigger-bg-color);
165
- color: var(--px-file-input-trigger-text-color);
166
- font-family: var(--px-font-family);
167
- font-size: inherit;
168
- cursor: pointer;
169
- white-space: nowrap;
170
- position: relative;
171
- z-index: 1;
172
- border-right: 2px solid var(--px-file-input-border-color);
173
- user-select: none;
174
-
175
- /* Raised bevel at rest */
176
- box-shadow: var(--px-file-input-trigger-inset-highlight), var(--px-file-input-trigger-inset-shadow);
177
-
178
- /* Notch top-left and bottom-left corners to match the pixel staircase border */
179
- clip-path: polygon(
180
- 0 2px,
181
- 2px 2px,
182
- 2px 0,
183
- 100% 0,
184
- 100% 100%,
185
- 2px 100%,
186
- 2px calc(100% - 2px),
187
- 0 calc(100% - 2px)
188
- );
189
- }
190
- .px-file-input__trigger:hover {
191
- background: var(--px-file-input-trigger-hover-bg-color);
192
- box-shadow: var(--px-file-input-trigger-hover-highlight), var(--px-file-input-trigger-hover-shadow);
193
- }
194
- .px-file-input__trigger:active {
195
- box-shadow: var(--px-file-input-trigger-inset-shadow), var(--px-file-input-trigger-inset-highlight);
196
- }
197
- /* File name display */
198
- .px-file-input__name {
199
- flex: 1;
200
- align-self: stretch;
201
- display: flex;
202
- align-items: center;
203
- padding: 0 12px;
204
- color: var(--px-file-input-text-color);
205
- font-family: var(--px-font-family);
206
- font-size: inherit;
207
- overflow: hidden;
208
- text-overflow: ellipsis;
209
- white-space: nowrap;
210
- position: relative;
211
- z-index: 1;
212
- }
213
- .px-file-input__name:only-of-type {
214
- color: var(--px-file-input-placeholder-color);
215
- }
216
- /* Clear icon */
217
- .px-file-input__clear {
218
- display: flex;
219
- align-items: center;
220
- justify-content: center;
221
- align-self: stretch;
222
- padding-right: 8px;
223
- color: var(--px-file-input-icon-color);
224
- cursor: pointer;
225
- position: relative;
226
- z-index: 1;
227
- }
228
- .px-file-input__clear:hover {
229
- color: var(--px-file-input-clear-hover-color);
230
- }
231
- /* Size variants */
232
- .px-file-input--large {
233
- --px-file-input-height: 44px;
234
- font-size: var(--px-font-size-large);
235
- }
236
- .px-file-input--large .px-file-input__trigger {
237
- padding: 0 16px;
238
- }
239
- .px-file-input--small {
240
- --px-file-input-height: 28px;
241
- font-size: var(--px-font-size-small);
242
- }
243
- .px-file-input--small .px-file-input__wrapper {
244
- filter: drop-shadow(2px 2px 0px var(--px-file-input-shadow-color));
245
- }
246
- .px-file-input--small .px-file-input__trigger {
247
- padding: 0 8px;
248
- }
249
- .px-file-input--small .px-file-input__name {
250
- padding: 0 8px;
251
- }
252
- /* Color variants */
253
- .px-file-input--primary {
254
- --px-file-input-border-color: var(--px-color-primary);
255
- --px-file-input-hover-border-color: var(--px-color-primary-dark);
256
- --px-file-input-shadow-color: var(--px-color-primary-dark);
257
- }
258
- .px-file-input--primary .px-file-input__wrapper {
259
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
260
- }
261
- .px-file-input--primary .px-file-input__trigger {
262
- border-right-color: var(--px-color-primary);
263
- }
264
- .px-file-input--success {
265
- --px-file-input-border-color: var(--px-color-success);
266
- --px-file-input-hover-border-color: var(--px-color-success-dark);
267
- --px-file-input-shadow-color: var(--px-color-success-dark);
268
- }
269
- .px-file-input--success .px-file-input__wrapper {
270
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
271
- }
272
- .px-file-input--success .px-file-input__trigger {
273
- border-right-color: var(--px-color-success);
274
- }
275
- .px-file-input--warning {
276
- --px-file-input-border-color: var(--px-color-warning);
277
- --px-file-input-hover-border-color: var(--px-color-warning-dark);
278
- --px-file-input-shadow-color: var(--px-color-warning-dark);
279
- }
280
- .px-file-input--warning .px-file-input__wrapper {
281
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
282
- }
283
- .px-file-input--warning .px-file-input__trigger {
284
- border-right-color: var(--px-color-warning);
285
- }
286
- .px-file-input--info {
287
- --px-file-input-border-color: var(--px-color-info);
288
- --px-file-input-hover-border-color: var(--px-color-info-dark);
289
- --px-file-input-shadow-color: var(--px-color-info-dark);
290
- }
291
- .px-file-input--info .px-file-input__wrapper {
292
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
293
- }
294
- .px-file-input--info .px-file-input__trigger {
295
- border-right-color: var(--px-color-info);
296
- }
297
- .px-file-input--danger {
298
- --px-file-input-border-color: var(--px-color-danger);
299
- --px-file-input-hover-border-color: var(--px-color-danger-dark);
300
- --px-file-input-shadow-color: var(--px-color-danger-dark);
301
- }
302
- .px-file-input--danger .px-file-input__wrapper {
303
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
304
- }
305
- .px-file-input--danger .px-file-input__trigger {
306
- border-right-color: var(--px-color-danger);
307
- }
308
- /* Ghost variant — no border/shadow at rest */
309
- .px-file-input.is-ghost .px-file-input__wrapper {
310
- filter: none;
311
- }
312
- .px-file-input.is-ghost .px-file-input__wrapper::before { background: transparent;
313
- }
314
- .px-file-input.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-file-input-hover-border-color);
315
- }
316
- .px-file-input.is-ghost .px-file-input__wrapper:hover {
317
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
318
- }
319
- .px-file-input.is-ghost .px-file-input__trigger {
320
- border-right-color: transparent;
321
- }
322
- .px-file-input.is-ghost:hover .px-file-input__trigger {
323
- border-right-color: var(--px-file-input-hover-border-color);
324
- }
325
- /* Ghost + Color variants */
326
- .px-file-input--primary.is-ghost {
327
- --px-file-input-hover-shadow-color: var(--px-color-primary-dark);
328
- }
329
- .px-file-input--primary.is-ghost .px-file-input__wrapper {
330
- filter: none;
331
- }
332
- .px-file-input--primary.is-ghost .px-file-input__wrapper::before { background: transparent;
333
- }
334
- .px-file-input--primary.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-primary);
335
- }
336
- .px-file-input--primary.is-ghost .px-file-input__wrapper:hover {
337
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
338
- }
339
- .px-file-input--success.is-ghost {
340
- --px-file-input-hover-shadow-color: var(--px-color-success-dark);
341
- }
342
- .px-file-input--success.is-ghost .px-file-input__wrapper {
343
- filter: none;
344
- }
345
- .px-file-input--success.is-ghost .px-file-input__wrapper::before { background: transparent;
346
- }
347
- .px-file-input--success.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-success);
348
- }
349
- .px-file-input--success.is-ghost .px-file-input__wrapper:hover {
350
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
351
- }
352
- .px-file-input--warning.is-ghost {
353
- --px-file-input-hover-shadow-color: var(--px-color-warning-dark);
354
- }
355
- .px-file-input--warning.is-ghost .px-file-input__wrapper {
356
- filter: none;
357
- }
358
- .px-file-input--warning.is-ghost .px-file-input__wrapper::before { background: transparent;
359
- }
360
- .px-file-input--warning.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-warning);
361
- }
362
- .px-file-input--warning.is-ghost .px-file-input__wrapper:hover {
363
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
364
- }
365
- .px-file-input--info.is-ghost {
366
- --px-file-input-hover-shadow-color: var(--px-color-info-dark);
367
- }
368
- .px-file-input--info.is-ghost .px-file-input__wrapper {
369
- filter: none;
370
- }
371
- .px-file-input--info.is-ghost .px-file-input__wrapper::before { background: transparent;
372
- }
373
- .px-file-input--info.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-info);
374
- }
375
- .px-file-input--info.is-ghost .px-file-input__wrapper:hover {
376
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
377
- }
378
- .px-file-input--danger.is-ghost {
379
- --px-file-input-hover-shadow-color: var(--px-color-danger-dark);
380
- }
381
- .px-file-input--danger.is-ghost .px-file-input__wrapper {
382
- filter: none;
383
- }
384
- .px-file-input--danger.is-ghost .px-file-input__wrapper::before { background: transparent;
385
- }
386
- .px-file-input--danger.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-danger);
387
- }
388
- .px-file-input--danger.is-ghost .px-file-input__wrapper:hover {
389
- filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
390
- }
391
- /* Dark mode bevel adjustment */
392
- html.dark .px-file-input {
393
- --px-file-input-trigger-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
394
- --px-file-input-trigger-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.3);
395
- --px-file-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
396
- --px-file-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.05);
397
- }
1
+ .px-form.is-inline[data-v-0e2bbb22]{flex-wrap:wrap;gap:0 16px;display:flex}.px-form.is-inline .px-form-item[data-v-0e2bbb22]{margin-bottom:12px}.px-form-item[data-v-0e2bbb22]{--px-form-item-error-border:var(--px-color-danger);--px-form-item-success-border:var(--px-color-success);border-left:4px solid #0000;flex-wrap:wrap;align-items:flex-start;margin-bottom:18px;padding-left:8px;display:flex;position:relative}.px-form-item__label[data-v-0e2bbb22]{vertical-align:middle;font-size:var(--px-font-size-base);color:var(--px-text-color-regular);box-sizing:border-box;width:var(--px-form-label-width,150px);text-align:right;flex-shrink:0;padding:0 12px 0 0;line-height:32px;display:inline-block}.px-form-item__content[data-v-0e2bbb22]{line-height:32px;font-size:var(--px-font-size-base);flex:1;min-width:0;position:relative}.px-form-item__error-msg[data-v-0e2bbb22]{color:var(--px-color-danger);font-size:var(--px-font-size-small);background:var(--px-color-danger-light-9);clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));padding:4px 8px;line-height:1;position:absolute;top:100%;left:0}.px-form-item.is-error[data-v-0e2bbb22]{border-left-color:var(--px-form-item-error-border)}.px-form-item.is-error .px-form-item__content[data-v-0e2bbb22]{background:var(--px-color-danger-light-9)}.px-form-item.is-error .px-input__wrapper[data-v-0e2bbb22]{border-color:var(--px-color-danger);filter:drop-shadow(2px 2px 0px var(--px-color-danger-dark))}.px-form-item.is-success[data-v-0e2bbb22]{border-left-color:var(--px-form-item-success-border)}.px-form-item.is-success .px-form-item__content[data-v-0e2bbb22]{background:var(--px-color-success-light-9)}.px-form-item.is-success .px-input__wrapper[data-v-0e2bbb22]{border-color:var(--px-color-success);filter:drop-shadow(2px 2px 0px var(--px-color-success-dark))}.px-form-item.is-required .px-form-item__label[data-v-0e2bbb22]:before{content:"";vertical-align:middle;background:var(--px-color-danger);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:8px;height:8px;margin-right:4px;display:inline-block}.px-form-item__input-wrap[data-v-0e2bbb22]{align-items:center;width:100%;display:inline-flex;position:relative}.px-form-item__status-icon[data-v-0e2bbb22]{z-index:1;filter:drop-shadow(1px 1px);position:absolute;right:8px}.px-form-item__status-icon.is-success[data-v-0e2bbb22]{color:var(--px-color-success)}.px-form-item__status-icon.is-error[data-v-0e2bbb22]{color:var(--px-color-danger)}.px-form-item[data-v-0e2bbb22]{--px-form-label-width:var(--ac9c6e38)!important}.px-file-input{--px-file-input-text-color:var(--px-text-color-primary);--px-file-input-border-color:var(--px-border-color);--px-file-input-hover-border-color:var(--px-hover-border-color);--px-file-input-bg-color:var(--px-fill-color-blank);--px-file-input-placeholder-color:var(--px-text-color-placeholder);--px-file-input-shadow-color:var(--px-shadow-color);--px-file-input-hover-shadow-color:var(--px-shadow-color);--px-file-input-trigger-bg-color:var(--px-fill-color-dark);--px-file-input-trigger-text-color:var(--px-text-color-primary);--px-file-input-trigger-hover-bg-color:var(--px-fill-color-darker);--px-file-input-icon-color:var(--px-text-color-secondary);--px-file-input-clear-hover-color:var(--px-text-color-primary);--px-file-input-trigger-inset-highlight:inset 2px 2px 0 0 #fff3;--px-file-input-trigger-inset-shadow:inset -2px -2px 0 0 #0000001a;--px-file-input-inset-shadow:inset 2px 2px 0 0 #00000014;--px-file-input-inset-highlight:inset -2px -2px 0 0 #ffffff26;--px-file-input-trigger-hover-highlight:inset 2px 2px 0 0 #ffffff4d;--px-file-input-trigger-hover-shadow:inset -2px -2px 0 0 #0000001f;--px-file-input-height:36px;font-size:var(--px-font-size-base);font-family:var(--px-font-family);width:100%;line-height:var(--px-file-input-height);box-sizing:border-box;vertical-align:middle;display:inline-flex;position:relative}.px-file-input.is-disabled{cursor:not-allowed}.px-file-input.is-disabled .px-file-input__wrapper{opacity:.6;cursor:not-allowed}.px-file-input.is-disabled .px-file-input__wrapper:before{background:var(--px-disabled-border-color)}.px-file-input.is-disabled .px-file-input__wrapper:after{background:var(--px-disabled-bg-color)}.px-file-input.is-disabled .px-file-input__trigger{cursor:not-allowed}.px-file-input.is-disabled .px-file-input__name{color:var(--px-disabled-text-color);cursor:not-allowed}.px-file-input__wrapper{height:var(--px-file-input-height);box-sizing:border-box;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-shadow-color));background:0 0;border:none;flex-grow:1;align-items:center;padding:2px;transition:none;display:inline-flex;position:relative}.px-file-input__wrapper:before{content:"";background:var(--px-file-input-border-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:-1;position:absolute;inset:0}.px-file-input__wrapper:after{content:"";background:var(--px-file-input-bg-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:-1;box-shadow:var(--px-file-input-inset-shadow), var(--px-file-input-inset-highlight);position:absolute;inset:2px}.px-file-input__wrapper:hover{filter:drop-shadow(4px 4px 0px var(--px-file-input-shadow-color));transform:translate(-1px,-1px)}.px-file-input__wrapper:hover:before{background:var(--px-file-input-hover-border-color)}.px-file-input__native{opacity:0;pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.px-file-input__trigger{background:var(--px-file-input-trigger-bg-color);color:var(--px-file-input-trigger-text-color);font-family:var(--px-font-family);font-size:inherit;cursor:pointer;white-space:nowrap;z-index:1;border-right:2px solid var(--px-file-input-border-color);-webkit-user-select:none;user-select:none;box-shadow:var(--px-file-input-trigger-inset-highlight), var(--px-file-input-trigger-inset-shadow);clip-path:polygon(0 2px,2px 2px,2px 0,100% 0,100% 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));justify-content:center;align-self:stretch;align-items:center;padding:0 12px;display:inline-flex;position:relative}.px-file-input__trigger:hover{background:var(--px-file-input-trigger-hover-bg-color);box-shadow:var(--px-file-input-trigger-hover-highlight), var(--px-file-input-trigger-hover-shadow)}.px-file-input__trigger:active{box-shadow:var(--px-file-input-trigger-inset-shadow), var(--px-file-input-trigger-inset-highlight)}.px-file-input__name{color:var(--px-file-input-text-color);font-family:var(--px-font-family);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;z-index:1;flex:1;align-self:stretch;align-items:center;padding:0 12px;display:flex;position:relative;overflow:hidden}.px-file-input__name:only-of-type{color:var(--px-file-input-placeholder-color)}.px-file-input__clear{color:var(--px-file-input-icon-color);cursor:pointer;z-index:1;justify-content:center;align-self:stretch;align-items:center;padding-right:8px;display:flex;position:relative}.px-file-input__clear:hover{color:var(--px-file-input-clear-hover-color)}.px-file-input--large{--px-file-input-height:44px;font-size:var(--px-font-size-large)}.px-file-input--large .px-file-input__trigger{padding:0 16px}.px-file-input--small{--px-file-input-height:28px;font-size:var(--px-font-size-small)}.px-file-input--small .px-file-input__wrapper{filter:drop-shadow(2px 2px 0px var(--px-file-input-shadow-color))}.px-file-input--small .px-file-input__trigger,.px-file-input--small .px-file-input__name{padding:0 8px}.px-file-input--primary{--px-file-input-border-color:var(--px-color-primary);--px-file-input-hover-border-color:var(--px-color-primary-dark);--px-file-input-shadow-color:var(--px-color-primary-dark)}.px-file-input--primary .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-file-input--primary .px-file-input__trigger{border-right-color:var(--px-color-primary)}.px-file-input--success{--px-file-input-border-color:var(--px-color-success);--px-file-input-hover-border-color:var(--px-color-success-dark);--px-file-input-shadow-color:var(--px-color-success-dark)}.px-file-input--success .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-file-input--success .px-file-input__trigger{border-right-color:var(--px-color-success)}.px-file-input--warning{--px-file-input-border-color:var(--px-color-warning);--px-file-input-hover-border-color:var(--px-color-warning-dark);--px-file-input-shadow-color:var(--px-color-warning-dark)}.px-file-input--warning .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-file-input--warning .px-file-input__trigger{border-right-color:var(--px-color-warning)}.px-file-input--info{--px-file-input-border-color:var(--px-color-info);--px-file-input-hover-border-color:var(--px-color-info-dark);--px-file-input-shadow-color:var(--px-color-info-dark)}.px-file-input--info .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-file-input--info .px-file-input__trigger{border-right-color:var(--px-color-info)}.px-file-input--danger{--px-file-input-border-color:var(--px-color-danger);--px-file-input-hover-border-color:var(--px-color-danger-dark);--px-file-input-shadow-color:var(--px-color-danger-dark)}.px-file-input--danger .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}.px-file-input--danger .px-file-input__trigger{border-right-color:var(--px-color-danger)}.px-file-input.is-ghost .px-file-input__wrapper{filter:none}.px-file-input.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-file-input-hover-border-color)}.px-file-input.is-ghost .px-file-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color))}.px-file-input.is-ghost .px-file-input__trigger{border-right-color:#0000}.px-file-input.is-ghost:hover .px-file-input__trigger{border-right-color:var(--px-file-input-hover-border-color)}.px-file-input--primary.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-primary-dark)}.px-file-input--primary.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--primary.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--primary.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-primary)}.px-file-input--primary.is-ghost .px-file-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color))}.px-file-input--success.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-success-dark)}.px-file-input--success.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--success.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--success.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-success)}.px-file-input--success.is-ghost .px-file-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color))}.px-file-input--warning.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-warning-dark)}.px-file-input--warning.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--warning.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--warning.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-warning)}.px-file-input--warning.is-ghost .px-file-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color))}.px-file-input--info.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-info-dark)}.px-file-input--info.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--info.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--info.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-info)}.px-file-input--info.is-ghost .px-file-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color))}.px-file-input--danger.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-danger-dark)}.px-file-input--danger.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--danger.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--danger.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-danger)}.px-file-input--danger.is-ghost .px-file-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color))}html.dark .px-file-input{--px-file-input-trigger-inset-highlight:inset 2px 2px 0 0 #ffffff14;--px-file-input-trigger-inset-shadow:inset -2px -2px 0 0 #0000004d;--px-file-input-inset-shadow:inset 2px 2px 0 0 #0003;--px-file-input-inset-highlight:inset -2px -2px 0 0 #ffffff0d}