@solostylist/ui-kit 1.0.36 → 1.0.38

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.
@@ -1,8 +1,8 @@
1
1
  import { j as a } from "../../jsx-runtime-C5mzlN2N.js";
2
2
  import { c as l } from "../../createSvgIcon-FIMSBrG5.js";
3
- import { brand as e, gray as o } from "../theme-primitives.js";
4
- import { o as n } from "../../outlinedInputClasses-Y-zQ9ZHZ.js";
5
- import { g as i } from "../../generateUtilityClasses-CvAVhM6T.js";
3
+ import { brand as e, gray as r } from "../theme-primitives.js";
4
+ import { o as i } from "../../outlinedInputClasses-Y-zQ9ZHZ.js";
5
+ import { g as d } from "../../generateUtilityClasses-CvAVhM6T.js";
6
6
  import { s } from "../../svgIconClasses-SRBiyaM8.js";
7
7
  import { a as t } from "../../createTheme-CyFSna1a.js";
8
8
  const c = l(/* @__PURE__ */ a.jsx("path", {
@@ -11,18 +11,18 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
11
11
  d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
12
12
  }), "CheckRounded"), u = l(/* @__PURE__ */ a.jsx("path", {
13
13
  d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
14
- }), "RemoveRounded"), b = i("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), d = i("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), m = {
14
+ }), "RemoveRounded"), b = d("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), n = d("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), m = {
15
15
  MuiButtonBase: {
16
16
  defaultProps: {
17
17
  disableTouchRipple: !0,
18
18
  disableRipple: !0
19
19
  },
20
20
  styleOverrides: {
21
- root: ({ theme: r }) => ({
21
+ root: ({ theme: o }) => ({
22
22
  boxSizing: "border-box",
23
23
  transition: "all 100ms ease-in",
24
24
  "&:focus-visible": {
25
- outline: `3px solid ${t(r.palette.primary.main, 0.5)}`,
25
+ outline: `3px solid ${t(o.palette.primary.main, 0.5)}`,
26
26
  outlineOffset: "2px"
27
27
  }
28
28
  })
@@ -30,9 +30,9 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
30
30
  },
31
31
  MuiButton: {
32
32
  styleOverrides: {
33
- root: ({ theme: r }) => ({
33
+ root: ({ theme: o }) => ({
34
34
  boxShadow: "none",
35
- borderRadius: (r.vars || r).shape.borderRadius,
35
+ borderRadius: (o.vars || o).shape.borderRadius,
36
36
  textTransform: "none",
37
37
  variants: [
38
38
  {
@@ -60,36 +60,36 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
60
60
  },
61
61
  style: {
62
62
  color: "white",
63
- backgroundColor: o[900],
64
- backgroundImage: `linear-gradient(to bottom, ${o[700]}, ${o[800]})`,
65
- boxShadow: `inset 0 1px 0 ${o[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
66
- border: `1px solid ${o[700]}`,
63
+ backgroundColor: r[900],
64
+ backgroundImage: `linear-gradient(to bottom, ${r[700]}, ${r[800]})`,
65
+ boxShadow: `inset 0 1px 0 ${r[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
66
+ border: `1px solid ${r[700]}`,
67
67
  "&:hover": {
68
68
  backgroundImage: "none",
69
- backgroundColor: o[700],
69
+ backgroundColor: r[700],
70
70
  boxShadow: "none"
71
71
  },
72
72
  "&:active": {
73
- backgroundColor: o[800]
73
+ backgroundColor: r[800]
74
74
  },
75
75
  "&.MuiButton-loading": {
76
76
  "& .MuiButton-loadingIndicator": {
77
77
  color: "white"
78
78
  }
79
79
  },
80
- ...r.applyStyles("dark", {
80
+ ...o.applyStyles("dark", {
81
81
  color: "black",
82
- backgroundColor: o[50],
83
- backgroundImage: `linear-gradient(to bottom, ${o[100]}, ${o[50]})`,
82
+ backgroundColor: r[50],
83
+ backgroundImage: `linear-gradient(to bottom, ${r[100]}, ${r[50]})`,
84
84
  boxShadow: "inset 0 -1px 0 hsl(220, 30%, 80%)",
85
- border: `1px solid ${o[50]}`,
85
+ border: `1px solid ${r[50]}`,
86
86
  "&:hover": {
87
87
  backgroundImage: "none",
88
- backgroundColor: o[300],
88
+ backgroundColor: r[300],
89
89
  boxShadow: "none"
90
90
  },
91
91
  "&:active": {
92
- backgroundColor: o[400]
92
+ backgroundColor: r[400]
93
93
  },
94
94
  "&.MuiButton-loading": {
95
95
  "& .MuiButton-loadingIndicator": {
@@ -130,31 +130,31 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
130
130
  variant: "outlined"
131
131
  },
132
132
  style: {
133
- color: (r.vars || r).palette.text.primary,
133
+ color: (o.vars || o).palette.text.primary,
134
134
  border: "1px solid",
135
- borderColor: o[200],
136
- backgroundColor: t(o[50], 0.3),
135
+ borderColor: r[200],
136
+ backgroundColor: t(r[50], 0.3),
137
137
  "&:hover": {
138
- backgroundColor: o[100],
139
- borderColor: o[300]
138
+ backgroundColor: r[100],
139
+ borderColor: r[300]
140
140
  },
141
141
  "&:active": {
142
- backgroundColor: o[200]
142
+ backgroundColor: r[200]
143
143
  },
144
144
  "&.MuiButton-loading": {
145
145
  "& .MuiButton-loadingIndicator": {
146
- color: (r.vars || r).palette.text.primary
146
+ color: (o.vars || o).palette.text.primary
147
147
  }
148
148
  },
149
- ...r.applyStyles("dark", {
150
- backgroundColor: o[800],
151
- borderColor: o[700],
149
+ ...o.applyStyles("dark", {
150
+ backgroundColor: r[800],
151
+ borderColor: r[700],
152
152
  "&:hover": {
153
- backgroundColor: o[900],
154
- borderColor: o[600]
153
+ backgroundColor: r[900],
154
+ borderColor: r[600]
155
155
  },
156
156
  "&:active": {
157
- backgroundColor: o[900]
157
+ backgroundColor: r[900]
158
158
  }
159
159
  })
160
160
  }
@@ -176,7 +176,7 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
176
176
  "&:active": {
177
177
  backgroundColor: t(e[200], 0.7)
178
178
  },
179
- ...r.applyStyles("dark", {
179
+ ...o.applyStyles("dark", {
180
180
  color: e[50],
181
181
  border: "1px solid",
182
182
  borderColor: e[900],
@@ -196,20 +196,20 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
196
196
  variant: "text"
197
197
  },
198
198
  style: {
199
- color: o[600],
199
+ color: r[600],
200
200
  "&:hover": {
201
- backgroundColor: o[100]
201
+ backgroundColor: r[100]
202
202
  },
203
203
  "&:active": {
204
- backgroundColor: o[200]
204
+ backgroundColor: r[200]
205
205
  },
206
- ...r.applyStyles("dark", {
207
- color: o[50],
206
+ ...o.applyStyles("dark", {
207
+ color: r[50],
208
208
  "&:hover": {
209
- backgroundColor: o[700]
209
+ backgroundColor: r[700]
210
210
  },
211
211
  "&:active": {
212
- backgroundColor: t(o[700], 0.7)
212
+ backgroundColor: t(r[700], 0.7)
213
213
  }
214
214
  })
215
215
  }
@@ -227,7 +227,7 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
227
227
  "&:active": {
228
228
  backgroundColor: t(e[200], 0.7)
229
229
  },
230
- ...r.applyStyles("dark", {
230
+ ...o.applyStyles("dark", {
231
231
  color: e[100],
232
232
  "&:hover": {
233
233
  backgroundColor: t(e[900], 0.5)
@@ -244,32 +244,32 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
244
244
  },
245
245
  MuiIconButton: {
246
246
  styleOverrides: {
247
- root: ({ theme: r }) => ({
247
+ root: ({ theme: o }) => ({
248
248
  boxShadow: "none",
249
249
  // borderRadius: (theme.vars || theme).shape.borderRadius,
250
250
  textTransform: "none",
251
- fontWeight: r.typography.fontWeightMedium,
251
+ fontWeight: o.typography.fontWeightMedium,
252
252
  letterSpacing: 0,
253
- color: (r.vars || r).palette.text.primary,
253
+ color: (o.vars || o).palette.text.primary,
254
254
  // border: '1px solid ',
255
- borderColor: o[200],
255
+ borderColor: r[200],
256
256
  // backgroundColor: alpha(gray[50], 0.3),
257
257
  "&:hover": {
258
- backgroundColor: o[100],
259
- borderColor: o[300]
258
+ backgroundColor: (o.vars || o).palette.action.hover,
259
+ borderColor: r[300]
260
260
  },
261
261
  "&:active": {
262
- backgroundColor: o[200]
262
+ backgroundColor: r[200]
263
263
  },
264
- ...r.applyStyles("dark", {
264
+ ...o.applyStyles("dark", {
265
265
  // backgroundColor: gray[800],
266
- borderColor: o[700],
266
+ borderColor: r[700],
267
267
  "&:hover": {
268
- backgroundColor: o[900],
269
- borderColor: o[600]
268
+ backgroundColor: (o.vars || o).palette.action.hover,
269
+ borderColor: r[600]
270
270
  },
271
271
  "&:active": {
272
- backgroundColor: o[900]
272
+ backgroundColor: r[900]
273
273
  }
274
274
  }),
275
275
  variants: [
@@ -299,14 +299,14 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
299
299
  },
300
300
  MuiToggleButtonGroup: {
301
301
  styleOverrides: {
302
- root: ({ theme: r }) => ({
302
+ root: ({ theme: o }) => ({
303
303
  borderRadius: "10px",
304
- boxShadow: `0 4px 16px ${t(o[400], 0.2)}`,
305
- [`& .${d.selected}`]: {
304
+ boxShadow: `0 4px 16px ${t(r[400], 0.2)}`,
305
+ [`& .${n.selected}`]: {
306
306
  color: e[500]
307
307
  },
308
- ...r.applyStyles("dark", {
309
- [`& .${d.selected}`]: {
308
+ ...o.applyStyles("dark", {
309
+ [`& .${n.selected}`]: {
310
310
  color: "#fff"
311
311
  },
312
312
  boxShadow: `0 4px 16px ${t(e[700], 0.5)}`
@@ -316,13 +316,13 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
316
316
  },
317
317
  MuiToggleButton: {
318
318
  styleOverrides: {
319
- root: ({ theme: r }) => ({
319
+ root: ({ theme: o }) => ({
320
320
  padding: "12px 16px",
321
321
  textTransform: "none",
322
322
  borderRadius: "10px",
323
323
  fontWeight: 500,
324
- ...r.applyStyles("dark", {
325
- color: o[400],
324
+ ...o.applyStyles("dark", {
325
+ color: r[400],
326
326
  boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
327
327
  [`&.${b.selected}`]: {
328
328
  color: e[300]
@@ -339,15 +339,15 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
339
339
  indeterminateIcon: /* @__PURE__ */ a.jsx(u, { sx: { height: 14, width: 14 } })
340
340
  },
341
341
  styleOverrides: {
342
- root: ({ theme: r }) => ({
342
+ root: ({ theme: o }) => ({
343
343
  margin: 10,
344
344
  height: 16,
345
345
  width: 16,
346
346
  borderRadius: 5,
347
347
  border: "1px solid ",
348
- borderColor: t(o[300], 0.8),
348
+ borderColor: t(r[300], 0.8),
349
349
  boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
350
- backgroundColor: t(o[100], 0.4),
350
+ backgroundColor: t(r[100], 0.4),
351
351
  transition: "border-color, background-color, 120ms ease-in",
352
352
  "&:hover": {
353
353
  borderColor: e[300]
@@ -366,10 +366,10 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
366
366
  backgroundColor: e[600]
367
367
  }
368
368
  },
369
- ...r.applyStyles("dark", {
370
- borderColor: t(o[700], 0.8),
369
+ ...o.applyStyles("dark", {
370
+ borderColor: t(r[700], 0.8),
371
371
  boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
372
- backgroundColor: t(o[900], 0.8),
372
+ backgroundColor: t(r[900], 0.8),
373
373
  "&:hover": {
374
374
  borderColor: e[300]
375
375
  },
@@ -390,16 +390,41 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
390
390
  input: {
391
391
  "&::placeholder": {
392
392
  opacity: 0.7,
393
- color: o[500]
393
+ color: r[500]
394
+ }
395
+ }
396
+ }
397
+ },
398
+ MuiAutocomplete: {
399
+ styleOverrides: {
400
+ paper: {
401
+ marginTop: 2
402
+ },
403
+ popupIndicator: {
404
+ background: "none",
405
+ "&:hover": {
406
+ background: "none"
407
+ }
408
+ },
409
+ clearIndicator: {
410
+ background: "none",
411
+ "&:hover": {
412
+ background: "none"
413
+ }
414
+ },
415
+ inputRoot: {
416
+ "& .MuiAutocomplete-input": {
417
+ padding: 0
418
+ // <-- your desired padding
394
419
  }
395
420
  }
396
421
  }
397
422
  },
398
423
  MuiOutlinedInput: {
399
424
  styleOverrides: {
400
- input: ({ ownerState: r }) => ({
425
+ input: ({ ownerState: o }) => ({
401
426
  padding: 0,
402
- ...r.type === "number" && {
427
+ ...o.type === "number" && {
403
428
  // Remove spinner buttons (cross-browser)
404
429
  "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
405
430
  WebkitAppearance: "none",
@@ -409,23 +434,23 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
409
434
  // Firefox
410
435
  }
411
436
  }),
412
- root: ({ theme: r }) => ({
437
+ root: ({ theme: o }) => ({
413
438
  padding: "8px 12px",
414
- color: (r.vars || r).palette.text.primary,
415
- borderRadius: (r.vars || r).shape.borderRadius,
416
- border: `1px solid ${(r.vars || r).palette.divider}`,
417
- backgroundColor: (r.vars || r).palette.background.default,
439
+ color: (o.vars || o).palette.text.primary,
440
+ borderRadius: (o.vars || o).shape.borderRadius,
441
+ border: `1px solid ${(o.vars || o).palette.divider}`,
442
+ backgroundColor: (o.vars || o).palette.background.default,
418
443
  transition: "border 120ms ease-in",
419
444
  "&:hover": {
420
- borderColor: o[400]
445
+ borderColor: r[400]
421
446
  },
422
- [`&.${n.focused}`]: {
447
+ [`&.${i.focused}`]: {
423
448
  outline: `3px solid ${t(e[500], 0.5)}`,
424
449
  borderColor: e[400]
425
450
  },
426
- ...r.applyStyles("dark", {
451
+ ...o.applyStyles("dark", {
427
452
  "&:hover": {
428
- borderColor: o[500]
453
+ borderColor: r[500]
429
454
  }
430
455
  }),
431
456
  variants: [
@@ -454,18 +479,18 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
454
479
  },
455
480
  MuiInputAdornment: {
456
481
  styleOverrides: {
457
- root: ({ theme: r }) => ({
458
- color: (r.vars || r).palette.grey[500],
459
- ...r.applyStyles("dark", {
460
- color: (r.vars || r).palette.grey[400]
482
+ root: ({ theme: o }) => ({
483
+ color: (o.vars || o).palette.grey[500],
484
+ ...o.applyStyles("dark", {
485
+ color: (o.vars || o).palette.grey[400]
461
486
  })
462
487
  })
463
488
  }
464
489
  },
465
490
  MuiFormLabel: {
466
491
  styleOverrides: {
467
- root: ({ theme: r }) => ({
468
- typography: r.typography.caption,
492
+ root: ({ theme: o }) => ({
493
+ typography: o.typography.caption,
469
494
  marginBottom: 8
470
495
  })
471
496
  }
@@ -1,14 +1,14 @@
1
1
  import { j as s } from "../../jsx-runtime-C5mzlN2N.js";
2
- import * as d from "react";
3
- import { c as i } from "../../createSvgIcon-FIMSBrG5.js";
4
- import { gray as r, brand as p } from "../theme-primitives.js";
5
- import { g as n } from "../../generateUtilityClasses-CvAVhM6T.js";
2
+ import * as i from "react";
3
+ import { c as d } from "../../createSvgIcon-FIMSBrG5.js";
4
+ import { gray as r, brand as n } from "../theme-primitives.js";
5
+ import { g as p } from "../../generateUtilityClasses-CvAVhM6T.js";
6
6
  import { s as e } from "../../selectClasses-DWL9Cxkn.js";
7
7
  import { b as c } from "../../buttonBaseClasses-CTVeu_V8.js";
8
8
  import { a } from "../../createTheme-CyFSna1a.js";
9
- const b = i(/* @__PURE__ */ s.jsx("path", {
9
+ const b = d(/* @__PURE__ */ s.jsx("path", {
10
10
  d: "m12 5.83 2.46 2.46c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L12.7 3.7a.996.996 0 0 0-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0zm0 12.34-2.46-2.46a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
11
- }), "UnfoldMoreRounded"), t = n("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), k = {
11
+ }), "UnfoldMoreRounded"), t = p("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper", "icon"]), k = {
12
12
  MuiMenu: {
13
13
  styleOverrides: {
14
14
  paper: ({ theme: o }) => ({
@@ -37,7 +37,18 @@ const b = i(/* @__PURE__ */ s.jsx("path", {
37
37
  },
38
38
  MuiSelect: {
39
39
  defaultProps: {
40
- IconComponent: d.forwardRef((o, l) => /* @__PURE__ */ s.jsx(b, { fontSize: "small", ...o, ref: l }))
40
+ IconComponent: i.forwardRef((o, l) => /* @__PURE__ */ s.jsx(b, { fontSize: "small", ...o, ref: l })),
41
+ MenuProps: {
42
+ anchorOrigin: {
43
+ vertical: "bottom",
44
+ horizontal: "center"
45
+ },
46
+ transformOrigin: {
47
+ vertical: "top",
48
+ horizontal: "center"
49
+ },
50
+ marginThreshold: 0
51
+ }
41
52
  },
42
53
  styleOverrides: {
43
54
  root: ({ theme: o }) => ({
@@ -112,7 +123,7 @@ const b = i(/* @__PURE__ */ s.jsx("path", {
112
123
  width: 0
113
124
  },
114
125
  "&:focus-visible": {
115
- outline: `3px solid ${a(p[500], 0.5)}`,
126
+ outline: `3px solid ${a(n[500], 0.5)}`,
116
127
  outlineOffset: "4px",
117
128
  borderRadius: "2px"
118
129
  }
@@ -51,6 +51,15 @@ const i = {
51
51
  MuiPaper: {
52
52
  defaultProps: {
53
53
  elevation: 0
54
+ },
55
+ styleOverrides: {
56
+ root: ({ theme: r }) => ({
57
+ backgroundColor: (r.vars || r).palette.background.paper,
58
+ boxShadow: (r.vars || r).shadows[8],
59
+ backgroundImage: (r.vars || r).overlays[8],
60
+ borderRadius: (r.vars || r).shape.borderRadius,
61
+ border: `1px solid ${(r.vars || r).palette.divider}`
62
+ })
54
63
  }
55
64
  },
56
65
  MuiCard: {
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org"
5
5
  },
6
- "version": "1.0.36",
6
+ "version": "1.0.38",
7
7
  "description": "advanced ui kit for solostylist",
8
8
  "private": false,
9
9
  "type": "module",