@m4l/components 9.1.85 → 9.1.86

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 (5) hide show
  1. package/components/Chip/Chip.js +2 -10
  2. package/components/Chip/ChipStyles.js +37 -433
  3. package/components/Chip/types.d.ts +1 -2
  4. package/components/mui_extended/IconButton/IconButton.styles.js +2 -1
  5. package/package.json +1 -1
package/components/Chip/Chip.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
3
- import { useTheme } from "@mui/material";
2
+ import { useModuleSkeleton, useEnvironment } from "@m4l/core";
4
3
  import clsx from "clsx";
5
4
  import { forwardRef } from "react";
6
5
  import { C as CHIP_CLASSES } from "./constants.js";
@@ -24,18 +23,11 @@ const Chip = forwardRef((props, ref) => {
24
23
  } = props;
25
24
  const { currentSize } = useComponentSize(size);
26
25
  const isSkeleton = useModuleSkeleton();
27
- const theme = useTheme();
28
26
  const { host_static_assets, environment_assets } = useEnvironment();
29
27
  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
30
- const paletteColor = getPropertyByString(
31
- theme.vars.palette,
32
- color || "default",
33
- theme.vars.palette.default
34
- );
35
28
  const ownerState = {
36
29
  chipSize: adjustedSize,
37
30
  variant,
38
- paletteColor,
39
31
  color,
40
32
  opacity
41
33
  };
@@ -77,12 +69,12 @@ const Chip = forwardRef((props, ref) => {
77
69
  ChipRootStyled,
78
70
  {
79
71
  role: "button-chip",
80
- tabIndex: 0,
81
72
  size: adjustedSize,
82
73
  onClick,
83
74
  ownerState: { ...ownerState },
84
75
  className: clsx(className, CHIP_CLASSES.root),
85
76
  ref,
77
+ ...onClick ? { tabIndex: 0 } : {},
86
78
  ...others,
87
79
  children: [
88
80
  renderIcon(startIcon, "ChipStartIcon"),
package/components/Chip/ChipStyles.js CHANGED
@@ -6,444 +6,48 @@ const chipStyles = {
6
6
  * @updatedAt 2025-01-08 10:36:40 - automatic
7
7
  * @updatedUser Andrés Quintero - automatic
8
8
  */
9
- root: ({ theme, ownerState }) => ({
10
- display: "flex",
11
- alignItems: "center",
12
- padding: theme.vars.size.baseSpacings.sp1,
13
- borderRadius: theme.vars.size.borderRadius["r0-5"],
14
- width: "max-content",
15
- cursor: "pointer",
16
- ...ownerState.variant === "contained" && {
17
- ...ownerState.color === "default" && {
18
- color: theme.vars.palette.chips.default.contrastText,
19
- backgroundColor: theme.vars.palette.chips.default.backgroundColor,
20
- "& .M4LIconClass-root": {
21
- backgroundColor: theme.vars.palette.chips.default.contrastText
22
- },
23
- "&:hover": {
24
- backgroundColor: theme.vars.palette.chips.default.backgroundHover,
25
- "&:active": {
26
- backgroundColor: theme.vars.palette.chips.default.backgroundActive,
27
- "& .M4LIconClass-root": {
28
- backgroundColor: theme.vars.palette.chips.default.contrastText
29
- }
30
- }
31
- },
32
- ...ownerState.opacity === true && {
33
- color: theme.vars.palette.chips.default.semanticText,
34
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundColor,
35
- "& .M4LIconClass-root": {
36
- backgroundColor: theme.vars.palette.chips.default.semanticText
37
- },
38
- "&:hover": {
39
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
40
- "&:active": {
41
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
42
- "& .M4LIconClass-root": {
43
- backgroundColor: theme.vars.palette.chips.default.semanticText
44
- }
45
- }
46
- }
47
- },
48
- "&:focus-visible": {
49
- boxShadow: "none",
50
- outline: theme.vars.size.borderStroke.container,
51
- outlineColor: theme.vars.palette.border.main,
52
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
53
- backgroundColor: theme.vars.palette.chips.default.backgroundActive
54
- }
9
+ root: ({ theme, ownerState }) => {
10
+ const keyColor = ownerState.color || "defualt";
11
+ const keyColorOpacity = keyColor + "Opacity";
12
+ const keyColorConditionalOpacity = ownerState.opacity ? keyColorOpacity : keyColor;
13
+ const bgColor = ownerState.variant !== "outlined" ? theme.vars.palette.chips[keyColorConditionalOpacity].backgroundColor : "transparent";
14
+ const bgActive = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundActive;
15
+ const bgHover = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundHover;
16
+ const color = ownerState.variant === "contained" && !ownerState.opacity ? theme.vars.palette.chips[keyColorConditionalOpacity].contrastText : theme.vars.palette.chips[keyColorConditionalOpacity].semanticText;
17
+ return {
18
+ display: "flex",
19
+ alignItems: "center",
20
+ padding: theme.vars.size.baseSpacings.sp1,
21
+ borderRadius: theme.vars.size.borderRadius["r0-5"],
22
+ width: "max-content",
23
+ cursor: "pointer",
24
+ color,
25
+ backgroundColor: bgColor,
26
+ "& .M4LIcon-icon": {
27
+ backgroundColor: `${color} !important`
55
28
  },
56
- ...ownerState.color === "warning" && {
57
- color: theme.vars.palette.chips.warning.contrastText,
58
- backgroundColor: theme.vars.palette.chips.warning.backgroundColor,
59
- "& .M4LIconClass-root": {
60
- backgroundColor: theme.vars.palette.chips.warning.contrastText
61
- },
62
- "&:hover": {
63
- backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
64
- "&:active": {
65
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
66
- "& .M4LIconClass-root": {
67
- backgroundColor: theme.vars.palette.chips.warning.contrastText
68
- }
69
- }
70
- },
71
- ...ownerState.opacity === true && {
72
- color: theme.vars.palette.chips.warningOpacity.contrastText,
73
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundColor,
74
- "& .M4LIconClass-root": {
75
- backgroundColor: theme.vars.palette.text.primary
76
- },
77
- "&:hover": {
78
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
79
- "&:active": {
80
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
81
- "& .M4LIconClass-root": {
82
- backgroundColor: theme.vars.palette.text.primary
83
- }
84
- }
85
- }
86
- },
87
- "&:focus-visible": {
88
- boxShadow: "none",
89
- outline: theme.vars.size.borderStroke.container,
90
- outlineColor: theme.vars.palette.border.main,
91
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
92
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive
93
- }
29
+ "&:hover": {
30
+ backgroundColor: bgHover
94
31
  },
95
- ...ownerState.color === "success" && {
96
- color: theme.vars.palette.chips.success.contrastText,
97
- backgroundColor: theme.vars.palette.chips.success.backgroundColor,
98
- "& .M4LIconClass-root": {
99
- backgroundColor: theme.vars.palette.chips.info.contrastText
100
- },
101
- "&:hover": {
102
- backgroundColor: theme.vars.palette.chips.success.backgroundHover,
103
- "&:active": {
104
- backgroundColor: theme.vars.palette.chips.success.backgroundActive,
105
- "& .M4LIconClass-root": {
106
- backgroundColor: theme.vars.palette.chips.info.contrastText
107
- }
108
- }
109
- },
110
- ...ownerState.opacity === true && {
111
- color: theme.vars.palette.text.primary,
112
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundColor,
113
- "& .M4LIconClass-root": {
114
- backgroundColor: theme.vars.palette.text.primary
115
- },
116
- "&:hover": {
117
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
118
- "&:active": {
119
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
120
- "& .M4LIconClass-root": {
121
- backgroundColor: theme.vars.palette.text.primary
122
- }
123
- }
124
- }
125
- },
126
- "&:focus-visible": {
127
- boxShadow: "none",
128
- outline: theme.vars.size.borderStroke.container,
129
- outlineColor: theme.vars.palette.border.main,
130
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
131
- backgroundColor: theme.vars.palette.chips.success.backgroundActive
132
- }
32
+ "&:active": {
33
+ backgroundColor: bgActive
34
+ // '& .M4LIcon-icon': {
35
+ // backgroundColor: color,
36
+ // },
133
37
  },
134
- ...ownerState.color === "error" && {
135
- color: theme.vars.palette.chips.error.contrastText,
136
- backgroundColor: theme.vars.palette.chips.error.backgroundColor,
137
- "& .M4LIconClass-root": {
138
- backgroundColor: theme.vars.palette.chips.error.contrastText
139
- },
140
- "&:hover": {
141
- backgroundColor: theme.vars.palette.chips.error.backgroundHover,
142
- "&:active": {
143
- backgroundColor: theme.vars.palette.chips.error.backgroundActive,
144
- "& .M4LIconClass-root": {
145
- backgroundColor: theme.vars.palette.chips.error.contrastText
146
- }
147
- }
148
- },
149
- ...ownerState.opacity === true && {
150
- color: theme.vars.palette.chips.error.semanticText,
151
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
152
- "& .M4LIconClass-root": {
153
- backgroundColor: theme.vars.palette.chips.error.semanticText
154
- },
155
- "&:hover": {
156
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
157
- "&:active": {
158
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
159
- "& .M4LIconClass-root": {
160
- backgroundColor: theme.vars.palette.chips.error.semanticText
161
- }
162
- }
163
- }
164
- },
165
- "&:focus-visible": {
166
- boxShadow: "none",
167
- outline: theme.vars.size.borderStroke.container,
168
- outlineColor: theme.vars.palette.border.main,
169
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
170
- backgroundColor: theme.vars.palette.chips.error.backgroundActive
171
- }
38
+ ...ownerState.variant === "outlined" && {
39
+ border: `${theme.vars.size.borderStroke.container}`,
40
+ borderColor: color
172
41
  },
173
- ...ownerState.color === "info" && {
174
- color: theme.vars.palette.chips.info.contrastText,
175
- backgroundColor: theme.vars.palette.chips.info.backgroundColor,
176
- "& .M4LIconClass-root": {
177
- backgroundColor: theme.vars.palette.chips.info.contrastText
178
- },
179
- "&:hover": {
180
- backgroundColor: theme.vars.palette.chips.info.backgroundHover,
181
- "&:active": {
182
- backgroundColor: theme.vars.palette.chips.info.backgroundActive,
183
- "& .M4LIconClass-root": {
184
- backgroundColor: theme.vars.palette.chips.info.contrastText
185
- }
186
- }
187
- },
188
- ...ownerState.opacity === true && {
189
- color: theme.vars.palette.text.primary,
190
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
191
- "& .M4LIconClass-root": {
192
- backgroundColor: theme.vars.palette.text.primary
193
- },
194
- "&:hover": {
195
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
196
- "&:active": {
197
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive,
198
- "& .M4LIconClass-root": {
199
- backgroundColor: theme.vars.palette.text.primary
200
- }
201
- }
202
- }
203
- },
204
- "&:focus-visible": {
205
- boxShadow: "none",
206
- outline: theme.vars.size.borderStroke.container,
207
- outlineColor: theme.vars.palette.border.main,
208
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
209
- backgroundColor: theme.vars.palette.chips.info.backgroundActive
210
- }
42
+ "&:focus-visible": {
43
+ boxShadow: "none",
44
+ outline: theme.vars.size.borderStroke.container,
45
+ outlineColor: theme.vars.palette.border.main,
46
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
47
+ backgroundColor: bgActive
211
48
  }
212
- },
213
- ...ownerState.variant === "outlined" && {
214
- backgroundColor: "transparent",
215
- border: `${theme.vars.size.borderStroke.container}`,
216
- ...ownerState.color === "default" && {
217
- color: theme.vars.palette.chips.default.semanticText,
218
- borderColor: theme.vars.palette.chips.default.backgroundColor,
219
- "& .M4LIconClass-root": {
220
- backgroundColor: theme.vars.palette.chips.default.semanticText
221
- },
222
- "&:hover": {
223
- backgroundColor: theme.vars.palette.chips.default.backgroundHover,
224
- "&:active": {
225
- backgroundColor: theme.vars.palette.chips.default.backgroundActive,
226
- "& .M4LIconClass-root": {
227
- backgroundColor: theme.vars.palette.chips.default.semanticText
228
- }
229
- }
230
- },
231
- ...ownerState.opacity === true && {
232
- color: theme.vars.palette.chips.default.semanticText,
233
- borderColor: theme.vars.palette.chips.default.backgroundColor,
234
- "& .M4LIconClass-root": {
235
- backgroundColor: theme.vars.palette.chips.default.semanticText
236
- },
237
- "&:hover": {
238
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
239
- "&:active": {
240
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
241
- "& .M4LIconClass-root": {
242
- backgroundColor: theme.vars.palette.chips.default.semanticText
243
- }
244
- }
245
- }
246
- },
247
- "&:focus-visible": {
248
- boxShadow: "none",
249
- outline: theme.vars.size.borderStroke.container,
250
- outlineColor: theme.vars.palette.border.main,
251
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
252
- backgroundColor: theme.vars.palette.chips.default.backgroundActive
253
- }
254
- },
255
- ...ownerState.color === "warning" && {
256
- color: theme.vars.palette.chips.warning.semanticText,
257
- borderColor: theme.vars.palette.chips.warning.backgroundColor,
258
- "& .M4LIconClass-root": {
259
- backgroundColor: theme.vars.palette.chips.warning.semanticText
260
- },
261
- "&:hover": {
262
- backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
263
- "&:active": {
264
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
265
- "& .M4LIconClass-root": {
266
- backgroundColor: theme.vars.palette.chips.warning.semanticText
267
- }
268
- }
269
- },
270
- ...ownerState.opacity === true && {
271
- color: theme.vars.palette.chips.default.semanticText,
272
- borderColor: theme.vars.palette.chips.default.backgroundColor,
273
- "& .M4LIconClass-root": {
274
- backgroundColor: theme.vars.palette.chips.default.semanticText
275
- },
276
- "&:hover": {
277
- color: theme.vars.palette.chips.warning.semanticText,
278
- borderColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
279
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
280
- "& .M4LIconClass-root": {
281
- backgroundColor: theme.vars.palette.chips.warning.semanticText
282
- },
283
- "&:active": {
284
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
285
- "& .M4LIconClass-root": {
286
- backgroundColor: theme.vars.palette.chips.warning.semanticText
287
- }
288
- }
289
- }
290
- },
291
- "&:focus-visible": {
292
- boxShadow: "none",
293
- outline: theme.vars.size.borderStroke.container,
294
- outlineColor: theme.vars.palette.border.main,
295
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
296
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive
297
- }
298
- },
299
- ...ownerState.color === "success" && {
300
- color: theme.vars.palette.chips.success.semanticText,
301
- borderColor: theme.vars.palette.chips.success.backgroundColor,
302
- "& .M4LIconClass-root": {
303
- backgroundColor: theme.vars.palette.chips.success.semanticText
304
- },
305
- "&:hover": {
306
- color: theme.vars.palette.chips.success.contrastText,
307
- backgroundColor: theme.vars.palette.chips.success.backgroundHover,
308
- "& .M4LIconClass-root": {
309
- backgroundColor: theme.vars.palette.chips.success.contrastText
310
- },
311
- "&:active": {
312
- backgroundColor: theme.vars.palette.chips.success.backgroundActive,
313
- "& .M4LIconClass-root": {
314
- backgroundColor: theme.vars.palette.chips.success.contrastText
315
- }
316
- }
317
- },
318
- ...ownerState.opacity === true && {
319
- color: theme.vars.palette.chips.success.semanticText,
320
- borderColor: theme.vars.palette.chips.successOpacity.backgroundColor,
321
- "& .M4LIconClass-root": {
322
- backgroundColor: theme.vars.palette.chips.success.semanticText
323
- },
324
- "&:hover": {
325
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
326
- "&:active": {
327
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
328
- "& .M4LIconClass-root": {
329
- backgroundColor: theme.vars.palette.chips.success.semanticText
330
- }
331
- }
332
- }
333
- },
334
- "&:focus-visible": {
335
- boxShadow: "none",
336
- outline: theme.vars.size.borderStroke.container,
337
- outlineColor: theme.vars.palette.border.main,
338
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
339
- backgroundColor: theme.vars.palette.chips.success.backgroundActive
340
- }
341
- },
342
- ...ownerState.color === "error" && {
343
- color: theme.vars.palette.chips.error.semanticText,
344
- borderColor: theme.vars.palette.chips.error.backgroundColor,
345
- "& .M4LIconClass-root": {
346
- backgroundColor: theme.vars.palette.chips.error.semanticText
347
- },
348
- "&:hover": {
349
- color: theme.vars.palette.chips.error.contrastText,
350
- backgroundColor: theme.vars.palette.chips.error.backgroundHover,
351
- "& .M4LIconClass-root": {
352
- backgroundColor: theme.vars.palette.chips.error.contrastText
353
- },
354
- "&:active": {
355
- backgroundColor: theme.vars.palette.chips.error.backgroundActive,
356
- "& .M4LIconClass-root": {
357
- backgroundColor: theme.vars.palette.chips.error.contrastText
358
- }
359
- }
360
- },
361
- ...ownerState.opacity === true && {
362
- color: theme.vars.palette.chips.error.semanticText,
363
- borderColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
364
- "& .M4LIconClass-root": {
365
- backgroundColor: theme.vars.palette.chips.error.semanticText
366
- },
367
- "&:hover": {
368
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
369
- "&:active": {
370
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
371
- "& .M4LIconClass-root": {
372
- backgroundColor: theme.vars.palette.chips.error.semanticText
373
- }
374
- }
375
- }
376
- },
377
- "&:focus-visible": {
378
- boxShadow: "none",
379
- outline: theme.vars.size.borderStroke.container,
380
- outlineColor: theme.vars.palette.border.main,
381
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
382
- backgroundColor: theme.vars.palette.chips.error.backgroundActive
383
- }
384
- },
385
- ...ownerState.color === "info" && {
386
- color: theme.vars.palette.chips.info.semanticText,
387
- borderColor: theme.vars.palette.chips.info.backgroundColor,
388
- "& .M4LIconClass-root": {
389
- backgroundColor: theme.vars.palette.chips.info.semanticText
390
- },
391
- "&:hover": {
392
- color: theme.vars.palette.chips.info.contrastText,
393
- backgroundColor: theme.vars.palette.chips.info.backgroundHover,
394
- "& .M4LIconClass-root": {
395
- backgroundColor: theme.vars.palette.chips.info.contrastText
396
- },
397
- "&:active": {
398
- backgroundColor: theme.vars.palette.chips.info.backgroundActive,
399
- "& .M4LIconClass-root": {
400
- backgroundColor: theme.vars.palette.chips.info.contrastText
401
- }
402
- }
403
- },
404
- ...ownerState.opacity === true && {
405
- color: theme.vars.palette.chips.info.semanticText,
406
- borderColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
407
- "& .M4LIconClass-root": {
408
- backgroundColor: theme.vars.palette.chips.info.semanticText
409
- },
410
- "&:hover": {
411
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
412
- "&:active": {
413
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive
414
- }
415
- }
416
- },
417
- "&:focus-visible": {
418
- boxShadow: "none",
419
- outline: theme.vars.size.borderStroke.container,
420
- outlineColor: theme.vars.palette.border.main,
421
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
422
- backgroundColor: theme.vars.palette.chips.info.backgroundActive
423
- }
424
- }
425
- },
426
- // Estilos específicos para el tamaño small
427
- ...ownerState.chipSize === "small" && {
428
- ...theme.generalSettings.isMobile ? {
429
- height: theme.vars.size.mobile.small.base,
430
- minHeight: theme.vars.size.mobile.small.base
431
- } : {
432
- height: theme.vars.size.desktop.small.base,
433
- minHeight: theme.vars.size.desktop.small.base
434
- }
435
- },
436
- // Estilos específicos para el tamaño medium
437
- ...ownerState.chipSize === "medium" && {
438
- ...theme.generalSettings.isMobile ? {
439
- height: theme.vars.size.mobile.medium.base,
440
- minHeight: theme.vars.size.mobile.medium.base
441
- } : {
442
- height: theme.vars.size.desktop.medium.base,
443
- minHeight: theme.vars.size.desktop.medium.base
444
- }
445
- }
446
- }),
49
+ };
50
+ },
447
51
  /**
448
52
  * Styles for the text chip element.
449
53
  * @author SebastianM - automatic
package/components/Chip/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ComponentPalletColor, Sizes } from '@m4l/styles';
2
- import { PaletteColor, Theme } from '@mui/material';
2
+ import { Theme } from '@mui/material';
3
3
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
4
4
  import { EventHandler, ReactNode } from 'react';
5
5
  import { CHIP_KEY_COMPONENT } from './constants';
@@ -77,7 +77,6 @@ export interface ChipProps {
77
77
  */
78
78
  export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
79
79
  opacity?: boolean;
80
- paletteColor: PaletteColor;
81
80
  chipSize: ChipProps['size'];
82
81
  }
83
82
  /**
package/components/mui_extended/IconButton/IconButton.styles.js CHANGED
@@ -56,8 +56,9 @@ const iconButtonStyles = {
56
56
  }
57
57
  }
58
58
  },
59
- ":focus-visible": {
59
+ "&:focus-visible": {
60
60
  background: ownerState.paletteColor?.activeOpacity,
61
+ outline: `1px solid ${theme.vars.palette.border.main}`,
61
62
  '& [class*="M4LIcon-icon"]': {
62
63
  backgroundColor: ownerState.componentPaletteColor === "default" ? ownerState.paletteColor?.contrastText : ownerState.paletteColor?.active
63
64
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.85",
3
+ "version": "9.1.86",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"