@box/blueprint-web 16.20.7 → 17.0.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.
- package/dist/lib-esm/accordion/accordion.js +7 -18
- package/dist/lib-esm/avatar/avatar.js +1 -5
- package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.d.ts +20 -1
- package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.js +10 -2
- package/dist/lib-esm/blueprint-modernization-context/index.d.ts +4 -0
- package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.d.ts +4 -0
- package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.js +4 -0
- package/dist/lib-esm/card/card.js +1 -5
- package/dist/lib-esm/card-tooltip/card-tooltip.js +1 -5
- package/dist/lib-esm/checkbox/checkbox-item.js +1 -5
- package/dist/lib-esm/collapsible/collapsible-section.js +6 -9
- package/dist/lib-esm/combobox/combobox.js +8 -15
- package/dist/lib-esm/combobox-group/combobox-group.js +1 -5
- package/dist/lib-esm/components.css +16 -15
- package/dist/lib-esm/content-card/content-card-body.js +2 -6
- package/dist/lib-esm/content-card/content-card.js +2 -9
- package/dist/lib-esm/data-table/data-table.module.js +1 -1
- package/dist/lib-esm/date-picker/date-picker.js +1 -5
- package/dist/lib-esm/ghost/ghost.js +1 -4
- package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js +1 -5
- package/dist/lib-esm/icon-toggle-button/icon-toggle-button.js +5 -14
- package/dist/lib-esm/index.css +16 -15
- package/dist/lib-esm/inline-table/inline-table.js +1 -5
- package/dist/lib-esm/input-chip/input-chip.js +2 -5
- package/dist/lib-esm/list-item/table-column.js +6 -15
- package/dist/lib-esm/list-item/table-header-default.js +1 -5
- package/dist/lib-esm/list-item/table.js +1 -4
- package/dist/lib-esm/loading-indicator/loading-indicator.js +1 -6
- package/dist/lib-esm/modal/modal-close.js +2 -6
- package/dist/lib-esm/modal/modal-content.js +1 -5
- package/dist/lib-esm/navigation-menu/navigation-menu-content.js +1 -5
- package/dist/lib-esm/navigation-menu/navigation-menu-link.js +1 -5
- package/dist/lib-esm/page/page-root.js +1 -5
- package/dist/lib-esm/primitives/base-button/base-button-icon.js +1 -4
- package/dist/lib-esm/primitives/base-button/base-button.js +1 -5
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js +4 -12
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.js +1 -5
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +4 -10
- package/dist/lib-esm/primitives/calendar/calendar.js +5 -8
- package/dist/lib-esm/primitives/chips/chip.js +1 -5
- package/dist/lib-esm/primitives/chips/chips-group.js +1 -5
- package/dist/lib-esm/primitives/context-menu/context-menu-item.js +2 -6
- package/dist/lib-esm/primitives/context-menu/context-menu-menu-content.js +2 -6
- package/dist/lib-esm/primitives/context-menu/context-menu-menu-header.js +1 -5
- package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js +2 -6
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js +6 -10
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-content.js +2 -6
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-header.js +4 -11
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js +3 -7
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js +6 -10
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-content.js +2 -6
- package/dist/lib-esm/primitives/icon-button/icon-button.js +1 -5
- package/dist/lib-esm/primitives/inline-error/inline-error.js +3 -6
- package/dist/lib-esm/primitives/link/link.js +1 -5
- package/dist/lib-esm/primitives/menu-combobox/menu-combobox-content.js +1 -5
- package/dist/lib-esm/primitives/menu-combobox/menu-combobox-empty.js +1 -5
- package/dist/lib-esm/primitives/menu-combobox/menu-combobox-header.js +2 -6
- package/dist/lib-esm/primitives/menu-combobox/menu-combobox-search.js +3 -7
- package/dist/lib-esm/primitives/notification/private-notification-element.js +8 -39
- package/dist/lib-esm/primitives/page-header/page-header.js +1 -4
- package/dist/lib-esm/primitives/popover/popover-content-container.js +1 -5
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js +6 -24
- package/dist/lib-esm/primitives/tabs/tab-list.js +2 -6
- package/dist/lib-esm/progress-bar/progress-bar.js +1 -5
- package/dist/lib-esm/radio-group/radio-group.js +1 -5
- package/dist/lib-esm/radio-tiles/radio-tiles-option.js +1 -5
- package/dist/lib-esm/radio-tiles/radio-tiles.js +1 -5
- package/dist/lib-esm/search-input/search-input-controlled/search-input-controlled.js +5 -8
- package/dist/lib-esm/search-input/search-input.js +5 -8
- package/dist/lib-esm/select/select.js +5 -15
- package/dist/lib-esm/side-panel/side-panel-close.js +3 -6
- package/dist/lib-esm/side-panel/side-panel-content.js +2 -9
- package/dist/lib-esm/side-panel/side-panel-overlay.js +1 -5
- package/dist/lib-esm/small-list-item/small-list.js +1 -5
- package/dist/lib-esm/split-button/split-button.js +2 -6
- package/dist/lib-esm/status/status.js +1 -5
- package/dist/lib-esm/switch/switch-item.js +1 -5
- package/dist/lib-esm/text/text.js +1 -5
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js +5 -19
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js +1 -1
- package/dist/lib-esm/text-area/text-area.js +1 -5
- package/dist/lib-esm/text-button/text-button.js +1 -5
- package/dist/lib-esm/text-input/text-input.js +3 -6
- package/dist/lib-esm/text-toggle-button/text-toggle-button.js +1 -5
- package/dist/lib-esm/time-picker/time-picker.js +6 -22
- package/dist/lib-esm/toolbar/toolbar-button.js +1 -5
- package/dist/lib-esm/toolbar/toolbar-dropdown-indicator.js +3 -6
- package/dist/lib-esm/toolbar/toolbar-input.js +1 -5
- package/dist/lib-esm/toolbar/toolbar-link.js +1 -5
- package/dist/lib-esm/toolbar/toolbar-root.js +3 -6
- package/dist/lib-esm/toolbar/toolbar-text-toggle-item.js +1 -5
- package/dist/lib-esm/toolbar/toolbar-toggle-group.js +1 -5
- package/dist/lib-esm/toolbar/toolbar-toggle-item.js +1 -5
- package/dist/lib-esm/tooltip/tooltip.js +2 -19
- package/dist/lib-esm/trigger-button/trigger-button.js +4 -11
- package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list.js +1 -5
- package/dist/lib-esm/util-components/base-grid-list-item/utils/rac-tooltip.js +3 -6
- package/dist/lib-esm/util-components/legend/legend.js +1 -6
- package/dist/lib-esm/util-components/list-checkbox/list-checkbox.js +1 -5
- package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.js +2 -9
- package/dist/lib-esm/util-components/text-with-info-badge/text-with-info-badge.js +1 -6
- package/dist/lib-esm/utils/TooltipWrapper.d.ts +1 -1
- package/package.json +3 -3
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
4
|
import * as RadixAccordion from '@radix-ui/react-accordion';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useRef } from 'react';
|
|
7
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
7
|
import { Ghost } from '../ghost/ghost.js';
|
|
9
8
|
import { InlineNotice } from '../inline-notice/inline-notice.js';
|
|
10
9
|
import { AccordionItemHeader, AccordionActionSlot } from './accordion-item-header.js';
|
|
@@ -21,12 +20,9 @@ import styles from './accordion.module.js';
|
|
|
21
20
|
* </Accordion>
|
|
22
21
|
*/
|
|
23
22
|
const Root = props => {
|
|
24
|
-
const {
|
|
25
|
-
enableModernizedComponents
|
|
26
|
-
} = useBlueprintModernization();
|
|
27
23
|
return jsx(RadixAccordion.Root, {
|
|
28
24
|
...props,
|
|
29
|
-
className:
|
|
25
|
+
className: styles.accordion
|
|
30
26
|
});
|
|
31
27
|
};
|
|
32
28
|
const Item = props => {
|
|
@@ -38,15 +34,12 @@ const Item = props => {
|
|
|
38
34
|
...rest
|
|
39
35
|
} = props;
|
|
40
36
|
const accordionItemClasses = clsx(styles.accordionItem, className);
|
|
41
|
-
const {
|
|
42
|
-
enableModernizedComponents
|
|
43
|
-
} = useBlueprintModernization();
|
|
44
37
|
const triggerRef = useRef(null);
|
|
45
38
|
if (loading) {
|
|
46
39
|
return jsx("div", {
|
|
47
40
|
...rest,
|
|
48
41
|
className: accordionItemClasses,
|
|
49
|
-
"data-modern":
|
|
42
|
+
"data-modern": 'true' ,
|
|
50
43
|
children: jsx("button", {
|
|
51
44
|
"aria-label": loadingAriaLabel,
|
|
52
45
|
className: styles.accordionTrigger,
|
|
@@ -62,7 +55,7 @@ const Item = props => {
|
|
|
62
55
|
return jsx("div", {
|
|
63
56
|
...rest,
|
|
64
57
|
className: accordionItemClasses,
|
|
65
|
-
"data-modern":
|
|
58
|
+
"data-modern": 'true' ,
|
|
66
59
|
children: jsx("div", {
|
|
67
60
|
className: clsx({
|
|
68
61
|
[styles.accordionFixedContent]: Boolean(children)
|
|
@@ -89,15 +82,11 @@ const Item = props => {
|
|
|
89
82
|
highlighted,
|
|
90
83
|
...itemRest
|
|
91
84
|
} = props;
|
|
92
|
-
const chevronIcon =
|
|
85
|
+
const chevronIcon = jsx(ChevronRight, {
|
|
93
86
|
"aria-hidden": "true",
|
|
94
87
|
className: styles.accordionTriggerIcon,
|
|
95
88
|
color: "var(--bp-icon-icon-on-light-secondary)"
|
|
96
|
-
})
|
|
97
|
-
"aria-hidden": "true",
|
|
98
|
-
className: styles.accordionTriggerIcon,
|
|
99
|
-
color: "var(--bp-gray-100)"
|
|
100
|
-
});
|
|
89
|
+
}) ;
|
|
101
90
|
const handleChevronClick = () => {
|
|
102
91
|
triggerRef.current?.click();
|
|
103
92
|
};
|
|
@@ -106,7 +95,7 @@ const Item = props => {
|
|
|
106
95
|
className: clsx(accordionItemClasses, {
|
|
107
96
|
[styles.highlighted]: highlighted
|
|
108
97
|
}),
|
|
109
|
-
"data-modern":
|
|
98
|
+
"data-modern": 'true' ,
|
|
110
99
|
children: [jsx(RadixAccordion.Header, {
|
|
111
100
|
asChild: true,
|
|
112
101
|
children: jsxs("div", {
|
|
@@ -3,7 +3,6 @@ import { Avatar as Avatar$1 } from '@box/blueprint-web-assets/icons/Line';
|
|
|
3
3
|
import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import React__default, { forwardRef, useState, useEffect } from 'react';
|
|
6
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
7
6
|
import { getContrastTextColor } from '../utils/getContrastTextColor.js';
|
|
8
7
|
import styles from './avatar.module.js';
|
|
9
8
|
import { colors, iconSizes } from './consts.js';
|
|
@@ -23,9 +22,6 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
23
22
|
text,
|
|
24
23
|
...rest
|
|
25
24
|
} = props;
|
|
26
|
-
const {
|
|
27
|
-
enableModernizedComponents
|
|
28
|
-
} = useBlueprintModernization();
|
|
29
25
|
const [imageIsLoaded, setImageIsLoaded] = useState(false);
|
|
30
26
|
const [imageHasError, setImageHasError] = useState(false);
|
|
31
27
|
useEffect(() => {
|
|
@@ -87,7 +83,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
87
83
|
});
|
|
88
84
|
return jsx("div", {
|
|
89
85
|
className: clsx(styles.avatar, styles[size], className),
|
|
90
|
-
"data-modern":
|
|
86
|
+
"data-modern": 'true' ,
|
|
91
87
|
children: avatarContents
|
|
92
88
|
});
|
|
93
89
|
});
|
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
|
|
4
|
+
* The API remains for consumer compatibility and will be removed in Q3FY27.
|
|
5
|
+
*/
|
|
2
6
|
export interface BlueprintModernizationContextValue {
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Ignored by Blueprint components — modern UI is always on. Will be removed in Q3FY27.
|
|
9
|
+
*/
|
|
3
10
|
enableModernizedComponents: boolean;
|
|
4
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
|
|
14
|
+
* The API remains for consumer compatibility and will be removed in Q3FY27.
|
|
15
|
+
*/
|
|
5
16
|
export declare const BlueprintModernizationContext: import("react").Context<BlueprintModernizationContextValue>;
|
|
17
|
+
/**
|
|
18
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
|
|
19
|
+
* Will be removed in Q3FY27.
|
|
20
|
+
*/
|
|
6
21
|
export declare const BlueprintModernizationProvider: ({ children, enableModernizedComponents, }: {
|
|
7
22
|
children: ReactNode;
|
|
8
|
-
|
|
23
|
+
/**
|
|
24
|
+
* @deprecated Ignored by Blueprint components — modern UI is always on. Optional for TypeScript
|
|
25
|
+
* compatibility; will be removed in Q3FY27.
|
|
26
|
+
*/
|
|
27
|
+
enableModernizedComponents?: boolean;
|
|
9
28
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useMemo } from 'react';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
|
|
6
|
+
* The API remains for consumer compatibility and will be removed in Q3FY27.
|
|
7
|
+
*/
|
|
4
8
|
const BlueprintModernizationContext = /*#__PURE__*/createContext({
|
|
5
|
-
enableModernizedComponents:
|
|
9
|
+
enableModernizedComponents: true
|
|
6
10
|
});
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
|
|
13
|
+
* Will be removed in Q3FY27.
|
|
14
|
+
*/
|
|
7
15
|
const BlueprintModernizationProvider = ({
|
|
8
16
|
children,
|
|
9
|
-
enableModernizedComponents
|
|
17
|
+
enableModernizedComponents = true
|
|
10
18
|
}) => {
|
|
11
19
|
const value = useMemo(() => ({
|
|
12
20
|
enableModernizedComponents
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated Modernized Blueprint UI is always on. This module remains for consumer compatibility
|
|
3
|
+
* and will be removed in Q3FY27. See LEGACY_REMOVAL_PLAN.md.
|
|
4
|
+
*/
|
|
1
5
|
export { BlueprintModernizationContext, BlueprintModernizationProvider, type BlueprintModernizationContextValue, } from './blueprint-modernization-context';
|
|
2
6
|
export { BLUEPRINT_UPLIFT_FEATURE_FLAG } from './consts';
|
|
3
7
|
export { useBlueprintModernization } from './useBlueprintModernization';
|
|
@@ -1 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
|
|
3
|
+
* The API remains for consumer compatibility and will be removed in Q3FY27.
|
|
4
|
+
*/
|
|
1
5
|
export declare const useBlueprintModernization: () => import("./blueprint-modernization-context").BlueprintModernizationContextValue;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import { BlueprintModernizationContext } from './blueprint-modernization-context.js';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
|
|
6
|
+
* The API remains for consumer compatibility and will be removed in Q3FY27.
|
|
7
|
+
*/
|
|
4
8
|
const useBlueprintModernization = () => {
|
|
5
9
|
const context = useContext(BlueprintModernizationContext);
|
|
6
10
|
if (context === undefined) {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
4
|
import styles from './card.module.js';
|
|
6
5
|
|
|
7
6
|
/**
|
|
@@ -14,14 +13,11 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
14
13
|
elevation: elevationToken,
|
|
15
14
|
...rest
|
|
16
15
|
} = props;
|
|
17
|
-
const {
|
|
18
|
-
enableModernizedComponents
|
|
19
|
-
} = useBlueprintModernization();
|
|
20
16
|
return jsx("div", {
|
|
21
17
|
...rest,
|
|
22
18
|
ref: forwardedRef,
|
|
23
19
|
className: clsx(styles.card, elevationToken && styles[elevationToken], className),
|
|
24
|
-
"data-modern":
|
|
20
|
+
"data-modern": 'true' ,
|
|
25
21
|
children: children
|
|
26
22
|
});
|
|
27
23
|
});
|
|
@@ -5,7 +5,6 @@ import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
|
|
|
5
5
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
6
|
import '../blueprint-configuration-context/consts.js';
|
|
7
7
|
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
8
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
8
|
import { Card } from '../card/card.js';
|
|
10
9
|
import { composeEventHandlers } from '../utils/composeEventHandlers.js';
|
|
11
10
|
import styles from './card-tooltip.module.js';
|
|
@@ -50,9 +49,6 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
50
49
|
const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');
|
|
51
50
|
const isOpen = Ariakit.useStoreState(tooltipStore, 'open');
|
|
52
51
|
const focusTimeout = useRef(0);
|
|
53
|
-
const {
|
|
54
|
-
enableModernizedComponents
|
|
55
|
-
} = useBlueprintModernization();
|
|
56
52
|
const {
|
|
57
53
|
componentsWithAnimationEnabled
|
|
58
54
|
} = useBlueprintConfiguration();
|
|
@@ -118,7 +114,7 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
118
114
|
ref: ref,
|
|
119
115
|
className: clsx(styles.content, className),
|
|
120
116
|
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
121
|
-
"data-modern":
|
|
117
|
+
"data-modern": 'true' ,
|
|
122
118
|
"data-side": side,
|
|
123
119
|
fitViewport: true,
|
|
124
120
|
gutter: 4,
|
|
@@ -7,7 +7,6 @@ import { forwardRef } from 'react';
|
|
|
7
7
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
8
8
|
import '../blueprint-configuration-context/consts.js';
|
|
9
9
|
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
10
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
11
10
|
import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
|
|
12
11
|
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
13
12
|
import styles from './checkbox.module.js';
|
|
@@ -31,9 +30,6 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
31
30
|
...rest
|
|
32
31
|
} = props;
|
|
33
32
|
const descriptionId = useUniqueId('description-', !!description);
|
|
34
|
-
const {
|
|
35
|
-
enableModernizedComponents
|
|
36
|
-
} = useBlueprintModernization();
|
|
37
33
|
const {
|
|
38
34
|
componentsWithAnimationEnabled
|
|
39
35
|
} = useBlueprintConfiguration();
|
|
@@ -43,7 +39,7 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
43
39
|
[styles.disabled]: disabled
|
|
44
40
|
}, className),
|
|
45
41
|
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
46
|
-
"data-modern":
|
|
42
|
+
"data-modern": 'true' ,
|
|
47
43
|
children: [jsxs("label", {
|
|
48
44
|
className: styles.label,
|
|
49
45
|
"data-target-id": dataTargetId,
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import { ChevronDown, ChevronUp, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
4
|
import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
5
5
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
|
|
8
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
8
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
10
9
|
import { Slot } from '../primitives/slot.js';
|
|
11
10
|
import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
|
|
@@ -22,9 +21,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
22
21
|
variant = 'default',
|
|
23
22
|
...rest
|
|
24
23
|
} = props;
|
|
25
|
-
const
|
|
26
|
-
enableModernizedComponents
|
|
27
|
-
} = useBlueprintModernization();
|
|
24
|
+
const enableModernizedComponents = true;
|
|
28
25
|
const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
|
|
29
26
|
const [headerSlot, contentSlot, actionSlot] = useNamedSlots(children, ['header', 'content', 'action']);
|
|
30
27
|
useEffect(() => {
|
|
@@ -35,9 +32,9 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
35
32
|
onOpenChange?.(isOpen);
|
|
36
33
|
}, [onOpenChange]);
|
|
37
34
|
const icon = useMemo(() => ({
|
|
38
|
-
up:
|
|
39
|
-
down:
|
|
40
|
-
size:
|
|
35
|
+
up: ChevronUp ,
|
|
36
|
+
down: ChevronDown ,
|
|
37
|
+
size: 'large'
|
|
41
38
|
}), [enableModernizedComponents]);
|
|
42
39
|
const BorderlessIcon = useMemo(() => collapsibleSectionOpen ? ChevronDown : ChevronRight, [collapsibleSectionOpen]);
|
|
43
40
|
const iconAriaLabel = useMemo(() => collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel, [collapsibleSectionOpen, closeSectionButtonAriaLabel, openSectionButtonAriaLabel]);
|
|
@@ -52,7 +49,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
52
49
|
...rest,
|
|
53
50
|
ref: forwardedRef,
|
|
54
51
|
className: clsx(styles.collapsibleSection, className),
|
|
55
|
-
"data-modern":
|
|
52
|
+
"data-modern": 'true' ,
|
|
56
53
|
"data-variant": variant,
|
|
57
54
|
onOpenChange: onCollapsibleOpenChanged,
|
|
58
55
|
open: collapsibleSectionOpen,
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
|
|
3
3
|
import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
|
|
4
|
-
import { Checkmark
|
|
4
|
+
import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
|
|
5
5
|
import { AlertCircle, XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
6
|
-
import { bpIconIconOnLight,
|
|
6
|
+
import { bpIconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
|
|
9
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
10
9
|
import { Focusable } from '../focusable/focusable.js';
|
|
11
10
|
import { InputChip } from '../input-chip/input-chip.js';
|
|
12
11
|
import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
|
|
@@ -101,9 +100,6 @@ const RootInner = ({
|
|
|
101
100
|
getPopoverRef?.(node);
|
|
102
101
|
}, [getPopoverRef]);
|
|
103
102
|
const hasError = !!error && !disabled;
|
|
104
|
-
const {
|
|
105
|
-
enableModernizedComponents
|
|
106
|
-
} = useBlueprintModernization();
|
|
107
103
|
const comboboxStore = useComboboxStore({
|
|
108
104
|
// Input state
|
|
109
105
|
defaultValue: defaultInputValue,
|
|
@@ -340,7 +336,7 @@ const RootInner = ({
|
|
|
340
336
|
const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
|
|
341
337
|
const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
|
|
342
338
|
const showInlineError = errorVariant === 'inline' && hasError;
|
|
343
|
-
const InlineErrorIcon =
|
|
339
|
+
const InlineErrorIcon = AlertCircle ;
|
|
344
340
|
const Label = useLabelable(label, comboboxId, required);
|
|
345
341
|
const inlineErrorId = useUniqueId('inline-error-');
|
|
346
342
|
const ariaDescribedBy = clsx(rest['aria-describedby'], {
|
|
@@ -421,7 +417,7 @@ const RootInner = ({
|
|
|
421
417
|
children: jsx(InlineErrorIcon, {
|
|
422
418
|
className: styles.inlineErrorIcon,
|
|
423
419
|
color: IconIconErrorOnLight,
|
|
424
|
-
"data-testid":
|
|
420
|
+
"data-testid": 'combobox-inline-error-icon-modern'
|
|
425
421
|
})
|
|
426
422
|
})
|
|
427
423
|
}), jsx(VisuallyHidden, {
|
|
@@ -434,7 +430,7 @@ const RootInner = ({
|
|
|
434
430
|
render: cancelProps => jsx(IconButton, {
|
|
435
431
|
...cancelProps,
|
|
436
432
|
"aria-label": clearButtonAriaLabel,
|
|
437
|
-
icon:
|
|
433
|
+
icon: XMark ,
|
|
438
434
|
size: "x-small"
|
|
439
435
|
}),
|
|
440
436
|
store: comboboxStore
|
|
@@ -484,12 +480,12 @@ const RootInner = ({
|
|
|
484
480
|
className: clsx(styles.container, {
|
|
485
481
|
[styles.disabled]: disabled
|
|
486
482
|
}, className),
|
|
487
|
-
"data-modern":
|
|
483
|
+
"data-modern": 'true' ,
|
|
488
484
|
children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
|
|
489
485
|
ref: popoverRefCallback,
|
|
490
486
|
"aria-labelledby": comboboxId,
|
|
491
487
|
className: clsx(styles.popover, popoverClassName),
|
|
492
|
-
"data-modern":
|
|
488
|
+
"data-modern": 'true' ,
|
|
493
489
|
fitViewport: true,
|
|
494
490
|
gutter: 8,
|
|
495
491
|
hideOnEscape: hideOnEscape,
|
|
@@ -518,10 +514,7 @@ const RootInner = ({
|
|
|
518
514
|
};
|
|
519
515
|
const Root = /*#__PURE__*/forwardRef(RootInner);
|
|
520
516
|
const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
|
|
521
|
-
const
|
|
522
|
-
enableModernizedComponents
|
|
523
|
-
} = useBlueprintModernization();
|
|
524
|
-
const iconColor = enableModernizedComponents ? bpIconIconOnLight : IconIconOnLight;
|
|
517
|
+
const iconColor = bpIconIconOnLight ;
|
|
525
518
|
return jsx(SelectItemCheck, {
|
|
526
519
|
ref: ref,
|
|
527
520
|
className: styles.indicator,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
4
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
6
5
|
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
7
6
|
import { ComboboxGroupCombobox, ComboboxGroupComboboxSingleSelect } from './combobox-group-combobox.js';
|
|
@@ -22,9 +21,6 @@ const Root = /*#__PURE__*/forwardRef(({
|
|
|
22
21
|
isDisabled,
|
|
23
22
|
subcomponentId
|
|
24
23
|
} = useComboboxGroupContext();
|
|
25
|
-
const {
|
|
26
|
-
enableModernizedComponents
|
|
27
|
-
} = useBlueprintModernization();
|
|
28
24
|
const selectHasError = !!errors.select;
|
|
29
25
|
const comboboxHasError = !!errors.combobox;
|
|
30
26
|
const Label = useLabelable(label, subcomponentId);
|
|
@@ -34,7 +30,7 @@ const Root = /*#__PURE__*/forwardRef(({
|
|
|
34
30
|
className: clsx(styles.container, {
|
|
35
31
|
[styles.disabled]: isDisabled
|
|
36
32
|
}),
|
|
37
|
-
"data-modern":
|
|
33
|
+
"data-modern": 'true' ,
|
|
38
34
|
children: [jsx(Label, {
|
|
39
35
|
className: styles.label,
|
|
40
36
|
hideLabel: hideLabel
|
|
@@ -6950,55 +6950,56 @@
|
|
|
6950
6950
|
overflow:auto;
|
|
6951
6951
|
}
|
|
6952
6952
|
|
|
6953
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6953
|
+
.bp_data_table_module_dataTableWrapper--c7392{
|
|
6954
6954
|
--border-radius-datatable:0;
|
|
6955
6955
|
--outline-offset-focus-and-selected-row-datatable:-0.25rem;
|
|
6956
6956
|
--outline-select-color-datatable:#0000;
|
|
6957
6957
|
--sticky-element-z-index:2;
|
|
6958
6958
|
height:100%;
|
|
6959
6959
|
overflow:auto;
|
|
6960
|
+
padding-block-end:var(--bp-space-020, .5rem);
|
|
6960
6961
|
scroll-padding:60px 100px;
|
|
6961
6962
|
width:100%;
|
|
6962
6963
|
}
|
|
6963
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6964
|
+
.bp_data_table_module_dataTableWrapper--c7392 [data-modern=false]{
|
|
6964
6965
|
--border-radius-hover-datatable:var(--radius-4);
|
|
6965
6966
|
}
|
|
6966
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6967
|
+
.bp_data_table_module_dataTableWrapper--c7392 [data-modern=true]{
|
|
6967
6968
|
--border-radius-hover-datatable:var(--bp-radius-08, 1rem);
|
|
6968
6969
|
}
|
|
6969
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6970
|
+
.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-hovered]{
|
|
6970
6971
|
--list-item-border-radius:var(--border-radius-hover-datatable);
|
|
6971
6972
|
--list-item-row-border-radius:var(--list-item-border-radius);
|
|
6972
6973
|
--list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
|
|
6973
6974
|
--list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
|
|
6974
6975
|
}
|
|
6975
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6976
|
+
.bp_data_table_module_dataTableWrapper--c7392.bp_data_table_module_isScrolledX--c7392 table tbody > tr[data-hovered][data-focus-visible]{
|
|
6976
6977
|
--list-item-border-radius:0;
|
|
6977
6978
|
--list-item-row-border-radius:0;
|
|
6978
6979
|
--list-item-first-column-item-radius:0;
|
|
6979
6980
|
--list-item-last-column-item-radius:0;
|
|
6980
6981
|
}
|
|
6981
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6982
|
+
.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr{
|
|
6982
6983
|
background:var(--gray-white);
|
|
6983
6984
|
position:sticky;
|
|
6984
6985
|
top:0;
|
|
6985
6986
|
z-index:var(--sticky-element-z-index);
|
|
6986
6987
|
}
|
|
6987
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6988
|
+
.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child{
|
|
6988
6989
|
background:inherit;
|
|
6989
6990
|
height:100%;
|
|
6990
6991
|
left:0;
|
|
6991
6992
|
position:sticky;
|
|
6992
6993
|
z-index:var(--sticky-element-z-index);
|
|
6993
6994
|
}
|
|
6994
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6995
|
+
.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child[data-focus-visible]{
|
|
6995
6996
|
position:sticky;
|
|
6996
6997
|
z-index:var(--sticky-element-z-index);
|
|
6997
6998
|
}
|
|
6998
|
-
.bp_data_table_module_dataTableWrapper--
|
|
6999
|
+
.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr{
|
|
6999
7000
|
--is-row-focused:0;
|
|
7000
7001
|
}
|
|
7001
|
-
.bp_data_table_module_dataTableWrapper--
|
|
7002
|
+
.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr > td [data-actionswrapper]::after{
|
|
7002
7003
|
background:inherit;
|
|
7003
7004
|
content:"";
|
|
7004
7005
|
display:block;
|
|
@@ -7008,18 +7009,18 @@
|
|
|
7008
7009
|
width:100%;
|
|
7009
7010
|
z-index:-1;
|
|
7010
7011
|
}
|
|
7011
|
-
.bp_data_table_module_dataTableWrapper--
|
|
7012
|
+
.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible]{
|
|
7012
7013
|
--outline-offset-focus-cell:var(--outline-offset-focus-row);
|
|
7013
7014
|
--is-row-focused:1;
|
|
7014
7015
|
}
|
|
7015
|
-
.bp_data_table_module_dataTableWrapper--
|
|
7016
|
+
.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible][aria-selected=true]{
|
|
7016
7017
|
--outline-offset-focus-cell:var(--outline-offset-focus-and-selected-row);
|
|
7017
7018
|
}
|
|
7018
7019
|
|
|
7019
|
-
.bp_data_table_module_isScrolledX--
|
|
7020
|
+
.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child{
|
|
7020
7021
|
overflow:visible;
|
|
7021
7022
|
}
|
|
7022
|
-
.bp_data_table_module_isScrolledX--
|
|
7023
|
+
.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child::after{
|
|
7023
7024
|
background:inherit;
|
|
7024
7025
|
border-right:1px solid var(--border-divider-border);
|
|
7025
7026
|
box-shadow:10px 0 7px -4px var(--item-background);
|
|
@@ -7033,7 +7034,7 @@
|
|
|
7033
7034
|
z-index:-1;
|
|
7034
7035
|
}
|
|
7035
7036
|
|
|
7036
|
-
.bp_data_table_module_hideActionWrapperRight--
|
|
7037
|
+
.bp_data_table_module_hideActionWrapperRight--c7392 table tbody > tr > td [data-actionswrapper]::after{
|
|
7037
7038
|
display:none;
|
|
7038
7039
|
}
|
|
7039
7040
|
.bp_list_checkbox_module_selection--711bf[data-modern=false]{
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
4
|
import { Text } from '../text/text.js';
|
|
6
5
|
import styles from './content-card.module.js';
|
|
7
6
|
|
|
@@ -11,11 +10,8 @@ const ContentCardBody = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
11
10
|
children,
|
|
12
11
|
...rest
|
|
13
12
|
} = props;
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
} = useBlueprintModernization();
|
|
17
|
-
const variant = enableModernizedComponents ? 'bodySmall' : 'bodyDefault';
|
|
18
|
-
const color = enableModernizedComponents ? 'textOnLightSecondary' : 'textOnLightDefault';
|
|
13
|
+
const variant = 'bodySmall' ;
|
|
14
|
+
const color = 'textOnLightSecondary' ;
|
|
19
15
|
return jsx("div", {
|
|
20
16
|
className: clsx(styles.cardBody, className),
|
|
21
17
|
children: jsx(Text, {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Size14, Size1, Size6, Size4, Size18, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
4
|
import { Ghost } from '../ghost/ghost.js';
|
|
6
5
|
import { ContentCardBody } from './content-card-body.js';
|
|
7
6
|
import { ContentCardFooter } from './content-card-footer.js';
|
|
@@ -10,12 +9,9 @@ import { ContentCardTitle } from './content-card-title.js';
|
|
|
10
9
|
import styles from './content-card.module.js';
|
|
11
10
|
|
|
12
11
|
const GhostContentCard = () => {
|
|
13
|
-
const {
|
|
14
|
-
enableModernizedComponents
|
|
15
|
-
} = useBlueprintModernization();
|
|
16
12
|
return jsxs("div", {
|
|
17
13
|
className: styles.ghostCard,
|
|
18
|
-
"data-modern":
|
|
14
|
+
"data-modern": 'true' ,
|
|
19
15
|
"data-testid": "ghost-content-card",
|
|
20
16
|
children: [jsx(Ghost, {
|
|
21
17
|
borderRadius: Size1,
|
|
@@ -66,9 +62,6 @@ const ContentCardComponent = ({
|
|
|
66
62
|
onSelect,
|
|
67
63
|
...rest
|
|
68
64
|
}) => {
|
|
69
|
-
const {
|
|
70
|
-
enableModernizedComponents
|
|
71
|
-
} = useBlueprintModernization();
|
|
72
65
|
const handleKeyDown = event => {
|
|
73
66
|
if (event.key === 'Enter') {
|
|
74
67
|
onSelect(event);
|
|
@@ -80,7 +73,7 @@ const ContentCardComponent = ({
|
|
|
80
73
|
return jsx("div", {
|
|
81
74
|
...rest,
|
|
82
75
|
className: clsx(styles.card, className),
|
|
83
|
-
"data-modern":
|
|
76
|
+
"data-modern": 'true' ,
|
|
84
77
|
onClick: onSelect,
|
|
85
78
|
onKeyDown: handleKeyDown,
|
|
86
79
|
role: "link",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--
|
|
2
|
+
var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--c7392","isScrolledX":"bp_data_table_module_isScrolledX--c7392","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--c7392"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -5,7 +5,6 @@ import * as RadixPopover from '@radix-ui/react-popover';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
|
|
7
7
|
import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
|
|
8
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
8
|
import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
|
|
10
9
|
import '@internationalized/date';
|
|
11
10
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
@@ -49,9 +48,6 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
49
48
|
previousMonthAriaLabel,
|
|
50
49
|
...rest
|
|
51
50
|
} = props;
|
|
52
|
-
const {
|
|
53
|
-
enableModernizedComponents
|
|
54
|
-
} = useBlueprintModernization();
|
|
55
51
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
56
52
|
useEffect(() => {
|
|
57
53
|
if (value !== undefined) {
|
|
@@ -152,7 +148,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
152
148
|
className: clsx(styles.datePicker, {
|
|
153
149
|
[styles.disabled]: isDisabled
|
|
154
150
|
}, className),
|
|
155
|
-
"data-modern":
|
|
151
|
+
"data-modern": 'true' ,
|
|
156
152
|
isDisabled: isDisabled,
|
|
157
153
|
isInvalid: hasError,
|
|
158
154
|
onChange: onDatePickerValueChanged,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
3
|
import styles from './ghost.module.js';
|
|
5
4
|
|
|
6
5
|
/**
|
|
@@ -22,9 +21,7 @@ const Ghost = ({
|
|
|
22
21
|
style = {},
|
|
23
22
|
...rest
|
|
24
23
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
enableModernizedComponents
|
|
27
|
-
} = useBlueprintModernization();
|
|
24
|
+
const enableModernizedComponents = true;
|
|
28
25
|
return jsx("span", {
|
|
29
26
|
className: clsx(className, styles.ghost, {
|
|
30
27
|
[styles[variant]]: !!variant
|