carbon-react 153.0.0 → 153.0.2

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 (12) hide show
  1. package/README.md +1 -1
  2. package/esm/components/button-bar/button-bar.style.js +25 -53
  3. package/esm/components/dialog/dialog.component.js +6 -0
  4. package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts +3 -1
  5. package/esm/components/dialog-full-screen/dialog-full-screen.component.js +11 -0
  6. package/esm/components/modal/modal.component.d.ts +1 -1
  7. package/lib/components/button-bar/button-bar.style.js +25 -53
  8. package/lib/components/dialog/dialog.component.js +6 -0
  9. package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts +3 -1
  10. package/lib/components/dialog-full-screen/dialog-full-screen.component.js +11 -0
  11. package/lib/components/modal/modal.component.d.ts +1 -1
  12. package/package.json +2 -1
package/README.md CHANGED
@@ -51,4 +51,4 @@ Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testi
51
51
 
52
52
  Carbon is licensed under the [Apache-2.0 licence](LICENSE).
53
53
 
54
- Copyright (c) 2018-2024 Sage Group Plc. All rights reserved.
54
+ Copyright (c) 2018-2025 Sage Group Plc. All rights reserved.
package/esm/components/button-bar/button-bar.style.js CHANGED
@@ -1,13 +1,8 @@
1
1
  import styled, { css } from "styled-components";
2
2
  import { space } from "styled-system";
3
3
  import BaseTheme from "../../style/themes/base";
4
- import StyledButton from "../button/button.style";
5
4
  import StyledIcon from "../icon/icon.style";
6
5
  import StyledIconButton from "../icon-button/icon-button.style";
7
- const commonHoverStyles = `
8
- background-color: var(--colorsActionMajor600);
9
- border-color: var(--colorsActionMajor600);
10
- `;
11
6
  const StyledButtonBar = styled.div`
12
7
  ${space}
13
8
  ${({
@@ -29,84 +24,61 @@ const StyledButtonBar = styled.div`
29
24
 
30
25
  button {
31
26
  margin: 0;
27
+ position: relative;
32
28
 
33
- :not(:first-child):not(:last-child) {
29
+ &:not(:first-child):not(:last-child) {
34
30
  border-radius: var(--borderRadius000);
35
31
  }
36
- :first-child:not(:last-child) {
32
+ &:first-child:not(:last-child) {
37
33
  border-top-right-radius: var(--borderRadius000);
38
34
  border-bottom-right-radius: var(--borderRadius000);
39
35
  }
40
- :last-child:not(:first-child) {
36
+ &:last-child:not(:first-child) {
41
37
  border-top-left-radius: var(--borderRadius000);
42
38
  border-bottom-left-radius: var(--borderRadius000);
43
39
  }
44
40
 
45
- &:not(:last-of-type) {
46
- border-right-color: transparent;
47
- }
48
-
49
41
  &:not(:first-of-type) {
50
42
  margin-left: -2px;
51
43
  }
52
44
 
53
- &:focus {
54
- position: relative;
55
- z-index: 2;
45
+ &:not(:disabled) {
46
+ z-index: 1;
56
47
  }
57
48
 
58
- &:hover {
59
- background-color: var(--colorsActionMajor600);
60
- border-color: var(--colorsActionMajor600);
61
-
62
- & + button {
63
- border-left-color: var(--colorsActionMajor600);
64
- }
65
-
66
- & ${StyledIcon} {
67
- ${commonHoverStyles}
68
- color: white;
69
- }
49
+ &:hover:not(:disabled) {
50
+ z-index: 2;
70
51
  }
71
52
 
72
- & ${StyledIcon} {
73
- color: var(--colorsActionMajor500);
53
+ &:focus {
54
+ z-index: 3;
74
55
  }
75
56
  }
76
57
 
77
- [data-component="button"] {
78
- :hover {
79
- ${commonHoverStyles}
80
- & + ${StyledButton} {
81
- border-left-color: var(--colorsActionMajor600);
82
- }
58
+ ${StyledIconButton}:not(:disabled) {
59
+ border: 2px solid var(--colorsActionMajor500);
60
+
61
+ &:focus {
62
+ border-right-color: var(--colorsActionMajor500);
83
63
  }
84
- }
85
64
 
86
- [data-component="button-minor"] {
87
- & ${StyledIcon} {
88
- color: var(--colorsActionMinor500);
65
+ &:hover {
66
+ background-color: var(--colorsActionMajor600);
67
+ border-color: var(--colorsActionMajor600);
68
+ color: var(--colorsActionMajorYang100);
89
69
  }
90
- }
91
70
 
92
- [data-component="button-minor"] {
93
- :hover {
94
- color: var(--colorsActionMinorYang100);
95
- background-color: var(--colorsActionMinor500);
96
- border-color: var(--colorsActionMinor500);
71
+ ${StyledIcon} {
72
+ color: var(--colorsActionMajor500);
97
73
 
98
- & + ${StyledButton} {
99
- border-left-color: var(--colorsActionMinor500);
74
+ &:hover {
75
+ color: var(--colorsActionMajorYang100);
100
76
  }
101
77
  }
102
78
  }
103
79
 
104
- ${StyledIconButton} {
105
- border: 2px solid var(--colorsActionMajor500);
106
-
107
- :focus {
108
- border-right-color: var(--colorsActionMajor500);
109
- }
80
+ ${StyledIconButton}:disabled {
81
+ border: 2px solid var(--colorsActionDisabled500);
110
82
  }
111
83
  `}
112
84
  `;
package/esm/components/dialog/dialog.component.js CHANGED
@@ -10,7 +10,9 @@ import IconButton from "../icon-button";
10
10
  import Icon from "../icon";
11
11
  import useLocale from "../../hooks/__internal__/useLocale";
12
12
  import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
13
+ import Logger from "../../__internal__/utils/logger";
13
14
  const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
15
+ let deprecatedTimeoutTrigger = false;
14
16
  export const Dialog = /*#__PURE__*/forwardRef(({
15
17
  className,
16
18
  "data-component": dataComponent = "dialog",
@@ -54,6 +56,10 @@ export const Dialog = /*#__PURE__*/forwardRef(({
54
56
  current: subtitleId
55
57
  } = useRef(createGuid());
56
58
  const isTopModal = useModalAria(containerRef);
59
+ if (!deprecatedTimeoutTrigger && rest?.timeout) {
60
+ deprecatedTimeoutTrigger = true;
61
+ Logger.deprecate("The timeout prop in Dialog is deprecated and will soon be removed.");
62
+ }
57
63
  useImperativeHandle(ref, () => ({
58
64
  focus() {
59
65
  containerRef.current?.focus();
package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { ModalProps } from "../modal";
3
3
  import { CustomRefObject } from "../../__internal__/focus-trap";
4
4
  import { TagProps } from "../../__internal__/utils/helpers/tags";
5
- export interface DialogFullScreenProps extends ModalProps {
5
+ export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose"> {
6
6
  /** Prop to specify the aria-describedby property of the DialogFullscreen component */
7
7
  "aria-describedby"?: string;
8
8
  /**
@@ -54,6 +54,8 @@ export interface DialogFullScreenProps extends ModalProps {
54
54
  focusableSelectors?: string;
55
55
  /** A custom close event handler */
56
56
  onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
57
+ /** @deprecated Determines if the Dialog can be closed */
58
+ disableClose?: boolean;
57
59
  }
58
60
  export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
59
61
  export default DialogFullScreen;
package/esm/components/dialog-full-screen/dialog-full-screen.component.js CHANGED
@@ -12,6 +12,9 @@ import Icon from "../icon";
12
12
  import useLocale from "../../hooks/__internal__/useLocale";
13
13
  import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
14
14
  import tagComponent from "../../__internal__/utils/helpers/tags";
15
+ import Logger from "../../__internal__/utils/logger";
16
+ let deprecatedDisableCloseTrigger = false;
17
+ let deprecatedTimeoutTrigger = false;
15
18
  export const DialogFullScreen = ({
16
19
  "aria-describedby": ariaDescribedBy,
17
20
  "aria-label": ariaLabel,
@@ -49,6 +52,14 @@ export const DialogFullScreen = ({
49
52
  current: subtitleId
50
53
  } = useRef(createGuid());
51
54
  const isTopModal = useModalAria(dialogRef);
55
+ if (!deprecatedDisableCloseTrigger && rest?.disableClose) {
56
+ deprecatedDisableCloseTrigger = true;
57
+ Logger.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.");
58
+ }
59
+ if (!deprecatedTimeoutTrigger && rest?.timeout) {
60
+ deprecatedTimeoutTrigger = true;
61
+ Logger.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed.");
62
+ }
52
63
  const closeIcon = () => {
53
64
  if (!showCloseIcon || !onCancel) return null;
54
65
  return /*#__PURE__*/React.createElement(IconButton, _extends({
package/esm/components/modal/modal.component.d.ts CHANGED
@@ -21,7 +21,7 @@ export interface ModalProps extends TagProps {
21
21
  onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
22
22
  /** Sets the open state of the modal */
23
23
  open: boolean;
24
- /** Transition time */
24
+ /** @deprecated Transition time */
25
25
  timeout?: number;
26
26
  /** Manually override the internal modal stacking order to set this as top */
27
27
  topModalOverride?: boolean;
package/lib/components/button-bar/button-bar.style.js CHANGED
@@ -7,16 +7,11 @@ exports.default = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _styledSystem = require("styled-system");
9
9
  var _base = _interopRequireDefault(require("../../style/themes/base"));
10
- var _button = _interopRequireDefault(require("../button/button.style"));
11
10
  var _icon = _interopRequireDefault(require("../icon/icon.style"));
12
11
  var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
13
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
15
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
- const commonHoverStyles = `
17
- background-color: var(--colorsActionMajor600);
18
- border-color: var(--colorsActionMajor600);
19
- `;
20
15
  const StyledButtonBar = _styledComponents.default.div`
21
16
  ${_styledSystem.space}
22
17
  ${({
@@ -38,84 +33,61 @@ const StyledButtonBar = _styledComponents.default.div`
38
33
 
39
34
  button {
40
35
  margin: 0;
36
+ position: relative;
41
37
 
42
- :not(:first-child):not(:last-child) {
38
+ &:not(:first-child):not(:last-child) {
43
39
  border-radius: var(--borderRadius000);
44
40
  }
45
- :first-child:not(:last-child) {
41
+ &:first-child:not(:last-child) {
46
42
  border-top-right-radius: var(--borderRadius000);
47
43
  border-bottom-right-radius: var(--borderRadius000);
48
44
  }
49
- :last-child:not(:first-child) {
45
+ &:last-child:not(:first-child) {
50
46
  border-top-left-radius: var(--borderRadius000);
51
47
  border-bottom-left-radius: var(--borderRadius000);
52
48
  }
53
49
 
54
- &:not(:last-of-type) {
55
- border-right-color: transparent;
56
- }
57
-
58
50
  &:not(:first-of-type) {
59
51
  margin-left: -2px;
60
52
  }
61
53
 
62
- &:focus {
63
- position: relative;
64
- z-index: 2;
54
+ &:not(:disabled) {
55
+ z-index: 1;
65
56
  }
66
57
 
67
- &:hover {
68
- background-color: var(--colorsActionMajor600);
69
- border-color: var(--colorsActionMajor600);
70
-
71
- & + button {
72
- border-left-color: var(--colorsActionMajor600);
73
- }
74
-
75
- & ${_icon.default} {
76
- ${commonHoverStyles}
77
- color: white;
78
- }
58
+ &:hover:not(:disabled) {
59
+ z-index: 2;
79
60
  }
80
61
 
81
- & ${_icon.default} {
82
- color: var(--colorsActionMajor500);
62
+ &:focus {
63
+ z-index: 3;
83
64
  }
84
65
  }
85
66
 
86
- [data-component="button"] {
87
- :hover {
88
- ${commonHoverStyles}
89
- & + ${_button.default} {
90
- border-left-color: var(--colorsActionMajor600);
91
- }
67
+ ${_iconButton.default}:not(:disabled) {
68
+ border: 2px solid var(--colorsActionMajor500);
69
+
70
+ &:focus {
71
+ border-right-color: var(--colorsActionMajor500);
92
72
  }
93
- }
94
73
 
95
- [data-component="button-minor"] {
96
- & ${_icon.default} {
97
- color: var(--colorsActionMinor500);
74
+ &:hover {
75
+ background-color: var(--colorsActionMajor600);
76
+ border-color: var(--colorsActionMajor600);
77
+ color: var(--colorsActionMajorYang100);
98
78
  }
99
- }
100
79
 
101
- [data-component="button-minor"] {
102
- :hover {
103
- color: var(--colorsActionMinorYang100);
104
- background-color: var(--colorsActionMinor500);
105
- border-color: var(--colorsActionMinor500);
80
+ ${_icon.default} {
81
+ color: var(--colorsActionMajor500);
106
82
 
107
- & + ${_button.default} {
108
- border-left-color: var(--colorsActionMinor500);
83
+ &:hover {
84
+ color: var(--colorsActionMajorYang100);
109
85
  }
110
86
  }
111
87
  }
112
88
 
113
- ${_iconButton.default} {
114
- border: 2px solid var(--colorsActionMajor500);
115
-
116
- :focus {
117
- border-right-color: var(--colorsActionMajor500);
118
- }
89
+ ${_iconButton.default}:disabled {
90
+ border: 2px solid var(--colorsActionDisabled500);
119
91
  }
120
92
  `}
121
93
  `;
package/lib/components/dialog/dialog.component.js CHANGED
@@ -15,11 +15,13 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
15
15
  var _icon = _interopRequireDefault(require("../icon"));
16
16
  var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
17
17
  var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
18
+ var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
18
19
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
19
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
20
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
22
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
22
23
  const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
24
+ let deprecatedTimeoutTrigger = false;
23
25
  const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
24
26
  className,
25
27
  "data-component": dataComponent = "dialog",
@@ -63,6 +65,10 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
63
65
  current: subtitleId
64
66
  } = (0, _react.useRef)((0, _guid.default)());
65
67
  const isTopModal = (0, _useModalAria.default)(containerRef);
68
+ if (!deprecatedTimeoutTrigger && rest?.timeout) {
69
+ deprecatedTimeoutTrigger = true;
70
+ _logger.default.deprecate("The timeout prop in Dialog is deprecated and will soon be removed.");
71
+ }
66
72
  (0, _react.useImperativeHandle)(ref, () => ({
67
73
  focus() {
68
74
  containerRef.current?.focus();
package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { ModalProps } from "../modal";
3
3
  import { CustomRefObject } from "../../__internal__/focus-trap";
4
4
  import { TagProps } from "../../__internal__/utils/helpers/tags";
5
- export interface DialogFullScreenProps extends ModalProps {
5
+ export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose"> {
6
6
  /** Prop to specify the aria-describedby property of the DialogFullscreen component */
7
7
  "aria-describedby"?: string;
8
8
  /**
@@ -54,6 +54,8 @@ export interface DialogFullScreenProps extends ModalProps {
54
54
  focusableSelectors?: string;
55
55
  /** A custom close event handler */
56
56
  onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
57
+ /** @deprecated Determines if the Dialog can be closed */
58
+ disableClose?: boolean;
57
59
  }
58
60
  export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
59
61
  export default DialogFullScreen;
package/lib/components/dialog-full-screen/dialog-full-screen.component.js CHANGED
@@ -17,10 +17,13 @@ var _icon = _interopRequireDefault(require("../icon"));
17
17
  var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
18
18
  var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
19
19
  var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
20
+ var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
20
21
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
21
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
22
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
24
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
25
+ let deprecatedDisableCloseTrigger = false;
26
+ let deprecatedTimeoutTrigger = false;
24
27
  const DialogFullScreen = ({
25
28
  "aria-describedby": ariaDescribedBy,
26
29
  "aria-label": ariaLabel,
@@ -58,6 +61,14 @@ const DialogFullScreen = ({
58
61
  current: subtitleId
59
62
  } = (0, _react.useRef)((0, _guid.default)());
60
63
  const isTopModal = (0, _useModalAria.default)(dialogRef);
64
+ if (!deprecatedDisableCloseTrigger && rest?.disableClose) {
65
+ deprecatedDisableCloseTrigger = true;
66
+ _logger.default.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.");
67
+ }
68
+ if (!deprecatedTimeoutTrigger && rest?.timeout) {
69
+ deprecatedTimeoutTrigger = true;
70
+ _logger.default.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed.");
71
+ }
61
72
  const closeIcon = () => {
62
73
  if (!showCloseIcon || !onCancel) return null;
63
74
  return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
package/lib/components/modal/modal.component.d.ts CHANGED
@@ -21,7 +21,7 @@ export interface ModalProps extends TagProps {
21
21
  onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
22
22
  /** Sets the open state of the modal */
23
23
  open: boolean;
24
- /** Transition time */
24
+ /** @deprecated Transition time */
25
25
  timeout?: number;
26
26
  /** Manually override the internal modal stacking order to set this as top */
27
27
  topModalOverride?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "153.0.0",
3
+ "version": "153.0.2",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -8,6 +8,7 @@
8
8
  ],
9
9
  "scripts": {
10
10
  "start": "node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
11
+ "start:strict-mode": "node ./scripts/check_node_version.mjs && dotenvx run --env ENABLE_REACT_STRICT_MODE=true -- storybook dev -p 9001 -c .storybook",
11
12
  "test": "jest --config=./jest.config.ts",
12
13
  "test-update": "jest --config=./jest.config.ts --updateSnapshot",
13
14
  "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",