@box/blueprint-web 14.31.1 → 14.32.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.
- package/dist/lib-esm/accordion/accordion-item-header.d.ts +9 -1
- package/dist/lib-esm/accordion/accordion-item-header.js +82 -7
- package/dist/lib-esm/accordion/accordion.js +12 -2
- package/dist/lib-esm/accordion/accordion.module.js +1 -1
- package/dist/lib-esm/accordion/index.d.ts +1 -1
- package/dist/lib-esm/accordion/types.d.ts +68 -4
- package/dist/lib-esm/badge/badge.figma.d.ts +1 -0
- package/dist/lib-esm/index.css +372 -258
- package/dist/lib-esm/primitives/tabs/content-switcher.figma.d.ts +1 -0
- package/package.json +3 -3
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
import { type AccordionIconComponent, type StartElementBackgroundVariant } from './types';
|
|
3
|
+
export type { StartElementBackgroundVariant };
|
|
2
4
|
export interface AccordionItemHeaderProps {
|
|
3
5
|
title: string;
|
|
4
6
|
status?: number;
|
|
5
7
|
iconVariant?: 'alert-error' | 'status-pending' | 'status-modified';
|
|
6
8
|
iconAriaLabel?: string;
|
|
7
9
|
error?: string;
|
|
10
|
+
/** @deprecated Prefer `startIcon`. */
|
|
8
11
|
startElement?: ReactNode;
|
|
12
|
+
startIcon?: AccordionIconComponent;
|
|
13
|
+
startElementBackgroundColor?: StartElementBackgroundVariant;
|
|
14
|
+
subtitle?: string;
|
|
15
|
+
subtitleIcon?: ReactNode;
|
|
16
|
+
endText?: string;
|
|
9
17
|
}
|
|
10
|
-
export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error, startElement, }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error, startElement, startIcon, startElementBackgroundColor, subtitle, subtitleIcon, endText, }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
19
|
export interface AccordionActionSlotProps {
|
|
12
20
|
action?: ReactNode;
|
|
13
21
|
}
|
|
@@ -2,9 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { ClockBadge, Alert } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import { bpSurfaceBadgeSurfaceModified, Orange100, GrayWhite, SurfaceBadgeErrorSurface, SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
-
import { createElement } from 'react';
|
|
5
|
+
import { useRef, createElement } from 'react';
|
|
6
6
|
import { Status } from '../status/status.js';
|
|
7
7
|
import { isDefined } from '../utils/isDefined.js';
|
|
8
|
+
import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
|
|
8
9
|
import styles from './accordion.module.js';
|
|
9
10
|
|
|
10
11
|
const accordionIconVariantToIconProps = {
|
|
@@ -26,13 +27,34 @@ const statusColors = {
|
|
|
26
27
|
error: SurfaceStatusSurfaceRed,
|
|
27
28
|
default: SurfaceStatusSurfaceLightBlue
|
|
28
29
|
};
|
|
30
|
+
const startElementVariantClassNames = {
|
|
31
|
+
default: styles.accordionStartElementFramedDefault,
|
|
32
|
+
box: styles.accordionStartElementFramedBox,
|
|
33
|
+
forms: styles.accordionStartElementFramedForms,
|
|
34
|
+
docgen: styles.accordionStartElementFramedDocgen,
|
|
35
|
+
sign: styles.accordionStartElementFramedSign
|
|
36
|
+
};
|
|
37
|
+
const START_ICON_SIZE = '1.25rem';
|
|
38
|
+
const FRAMED_START_ICON_COLOR_MAP = {
|
|
39
|
+
default: 'var(--bp-gray-100)',
|
|
40
|
+
box: 'var(--bp-box-blue-100)',
|
|
41
|
+
forms: 'var(--bp-green-light-110)',
|
|
42
|
+
docgen: 'var(--bp-grimace-120)',
|
|
43
|
+
sign: 'var(--bp-dark-blue-100)'
|
|
44
|
+
};
|
|
45
|
+
const DEFAULT_START_ICON_COLOR = 'var(--bp-icon-icon-on-light-secondary)';
|
|
29
46
|
const AccordionItemHeader = ({
|
|
30
47
|
title,
|
|
31
48
|
status,
|
|
32
49
|
iconVariant,
|
|
33
50
|
iconAriaLabel,
|
|
34
51
|
error,
|
|
35
|
-
startElement
|
|
52
|
+
startElement,
|
|
53
|
+
startIcon,
|
|
54
|
+
startElementBackgroundColor,
|
|
55
|
+
subtitle,
|
|
56
|
+
subtitleIcon,
|
|
57
|
+
endText
|
|
36
58
|
}) => {
|
|
37
59
|
const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
|
|
38
60
|
const {
|
|
@@ -40,15 +62,62 @@ const AccordionItemHeader = ({
|
|
|
40
62
|
iconColor,
|
|
41
63
|
icon
|
|
42
64
|
} = iconProps ?? {};
|
|
65
|
+
const hasSubtitle = isDefined(subtitle) && subtitle !== '';
|
|
66
|
+
const framedStartElementClassName = startElementBackgroundColor ? startElementVariantClassNames[startElementBackgroundColor] : undefined;
|
|
67
|
+
const startIconColor = startElementBackgroundColor ? FRAMED_START_ICON_COLOR_MAP[startElementBackgroundColor] : DEFAULT_START_ICON_COLOR;
|
|
68
|
+
const renderedStartElement = startIcon ? /*#__PURE__*/createElement(startIcon, {
|
|
69
|
+
width: START_ICON_SIZE,
|
|
70
|
+
height: START_ICON_SIZE,
|
|
71
|
+
color: startIconColor,
|
|
72
|
+
'aria-hidden': true
|
|
73
|
+
}) : startElement;
|
|
74
|
+
// Single-line ellipsis with full-title tooltip on overflow. Tooltip-only
|
|
75
|
+
// (no nested `Focusable`) because the title sits inside the Radix
|
|
76
|
+
// Accordion `<button>` trigger — adding a tabbable wrapper here would
|
|
77
|
+
// create nested interactives. The trigger already owns hover/focus, so
|
|
78
|
+
// pointing/keyboarding the row surfaces the tooltip when the text is cut.
|
|
79
|
+
const titleRef = useRef(null);
|
|
80
|
+
const {
|
|
81
|
+
Wrapper: TitleTooltip,
|
|
82
|
+
wrapperProps: titleTooltipProps
|
|
83
|
+
} = useFullTextTooltip({
|
|
84
|
+
ref: titleRef,
|
|
85
|
+
textValue: title
|
|
86
|
+
});
|
|
43
87
|
return jsxs("h4", {
|
|
44
88
|
className: styles.accordionHeader,
|
|
45
89
|
children: [jsxs("span", {
|
|
46
90
|
className: styles.accordionTitleGroup,
|
|
47
|
-
children: [
|
|
48
|
-
className: styles.accordionStartElement,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
91
|
+
children: [renderedStartElement && jsx("span", {
|
|
92
|
+
className: clsx(styles.accordionStartElement, framedStartElementClassName, {
|
|
93
|
+
[styles.accordionStartElementFramed]: framedStartElementClassName
|
|
94
|
+
}),
|
|
95
|
+
style: framedStartElementClassName ? {
|
|
96
|
+
color: startIconColor
|
|
97
|
+
} : undefined,
|
|
98
|
+
children: renderedStartElement
|
|
99
|
+
}), jsxs("span", {
|
|
100
|
+
className: styles.accordionTitleContent,
|
|
101
|
+
children: [jsx(TitleTooltip, {
|
|
102
|
+
content: title,
|
|
103
|
+
...titleTooltipProps,
|
|
104
|
+
children: jsx("span", {
|
|
105
|
+
ref: titleRef,
|
|
106
|
+
className: styles.accordionTitleText,
|
|
107
|
+
"data-testid": "accordion-item-title",
|
|
108
|
+
children: title
|
|
109
|
+
})
|
|
110
|
+
}), hasSubtitle && jsxs("span", {
|
|
111
|
+
className: styles.accordionSubtitle,
|
|
112
|
+
children: [subtitleIcon && jsx("span", {
|
|
113
|
+
"aria-hidden": "true",
|
|
114
|
+
className: styles.accordionSubtitleIcon,
|
|
115
|
+
children: subtitleIcon
|
|
116
|
+
}), jsx("span", {
|
|
117
|
+
className: styles.accordionSubtitleText,
|
|
118
|
+
children: subtitle
|
|
119
|
+
})]
|
|
120
|
+
})]
|
|
52
121
|
})]
|
|
53
122
|
}), isDefined(status) && jsx("span", {
|
|
54
123
|
className: styles.accordionHeaderInfoSlot,
|
|
@@ -78,6 +147,12 @@ const AccordionItemHeader = ({
|
|
|
78
147
|
width: '0.75rem'
|
|
79
148
|
})
|
|
80
149
|
})
|
|
150
|
+
}), isDefined(endText) && endText !== '' && jsx("span", {
|
|
151
|
+
className: styles.accordionHeaderInfoSlot,
|
|
152
|
+
children: jsx("span", {
|
|
153
|
+
className: styles.accordionEndText,
|
|
154
|
+
children: endText
|
|
155
|
+
})
|
|
81
156
|
})]
|
|
82
157
|
});
|
|
83
158
|
};
|
|
@@ -77,6 +77,11 @@ const Item = props => {
|
|
|
77
77
|
iconAriaLabel,
|
|
78
78
|
title,
|
|
79
79
|
startElement,
|
|
80
|
+
startIcon,
|
|
81
|
+
startElementBackgroundColor,
|
|
82
|
+
subtitle,
|
|
83
|
+
subtitleIcon,
|
|
84
|
+
endText,
|
|
80
85
|
disabled,
|
|
81
86
|
error,
|
|
82
87
|
errorIconAriaLabel,
|
|
@@ -113,12 +118,17 @@ const Item = props => {
|
|
|
113
118
|
}),
|
|
114
119
|
disabled: disabled,
|
|
115
120
|
children: jsx(AccordionItemHeader, {
|
|
121
|
+
endText: endText,
|
|
116
122
|
error: error,
|
|
117
123
|
iconAriaLabel: iconAriaLabel,
|
|
118
124
|
iconVariant: iconVariant,
|
|
125
|
+
startElement: startElement,
|
|
126
|
+
startElementBackgroundColor: startElementBackgroundColor,
|
|
127
|
+
startIcon: startIcon,
|
|
119
128
|
status: status,
|
|
120
|
-
|
|
121
|
-
|
|
129
|
+
subtitle: subtitle,
|
|
130
|
+
subtitleIcon: subtitleIcon,
|
|
131
|
+
title: title
|
|
122
132
|
})
|
|
123
133
|
}), jsx(AccordionActionSlot, {
|
|
124
134
|
action: action
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"accordionItem":"bp_accordion_module_accordionItem--
|
|
2
|
+
var styles = {"accordionItem":"bp_accordion_module_accordionItem--c8f78","accordionContent":"bp_accordion_module_accordionContent--c8f78","accordionContentLayout":"bp_accordion_module_accordionContentLayout--c8f78","accordion":"bp_accordion_module_accordion--c8f78","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--c8f78","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--c8f78","highlighted":"bp_accordion_module_highlighted--c8f78","accordionFixedContent":"bp_accordion_module_accordionFixedContent--c8f78","accordionHeader":"bp_accordion_module_accordionHeader--c8f78","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--c8f78","accordionStartElement":"bp_accordion_module_accordionStartElement--c8f78","accordionStartElementFramed":"bp_accordion_module_accordionStartElementFramed--c8f78","accordionStartElementFramedDefault":"bp_accordion_module_accordionStartElementFramedDefault--c8f78","accordionStartElementFramedBox":"bp_accordion_module_accordionStartElementFramedBox--c8f78","accordionStartElementFramedForms":"bp_accordion_module_accordionStartElementFramedForms--c8f78","accordionStartElementFramedDocgen":"bp_accordion_module_accordionStartElementFramedDocgen--c8f78","accordionStartElementFramedSign":"bp_accordion_module_accordionStartElementFramedSign--c8f78","accordionTitleContent":"bp_accordion_module_accordionTitleContent--c8f78","accordionTitleText":"bp_accordion_module_accordionTitleText--c8f78","accordionSubtitle":"bp_accordion_module_accordionSubtitle--c8f78","accordionSubtitleIcon":"bp_accordion_module_accordionSubtitleIcon--c8f78","accordionSubtitleText":"bp_accordion_module_accordionSubtitleText--c8f78","accordionEndText":"bp_accordion_module_accordionEndText--c8f78","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--c8f78","accordionSlot":"bp_accordion_module_accordionSlot--c8f78","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--c8f78","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--c8f78","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--c8f78","bgOnly":"bp_accordion_module_bgOnly--c8f78","withIcon":"bp_accordion_module_withIcon--c8f78","accordionTrigger":"bp_accordion_module_accordionTrigger--c8f78","disabled":"bp_accordion_module_disabled--c8f78","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--c8f78"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Accordion } from './accordion';
|
|
2
|
-
export type { AccordionFixedItem, AccordionItem, AccordionProps, AccordionSectionItem } from './types';
|
|
2
|
+
export type { AccordionFixedItem, AccordionItem, AccordionProps, AccordionSectionItem, StartElementBackgroundVariant, } from './types';
|
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
import { type AccordionMultipleProps, type AccordionSingleProps, type AccordionItemProps as RadixAccordionItemProps } from '@radix-ui/react-accordion';
|
|
2
|
+
import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
|
|
2
3
|
import { type RequireAllOrNone } from 'type-fest';
|
|
4
|
+
export type AccordionIconComponent = FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
|
|
5
|
+
/** Tint for the optional framed start-of-row icon (modernized items only). */
|
|
6
|
+
export type StartElementBackgroundVariant = 'default' | 'box' | 'forms' | 'docgen' | 'sign';
|
|
7
|
+
/**
|
|
8
|
+
* Mutually-exclusive start-of-row slot. Use either `startIcon` (preferred,
|
|
9
|
+
* icon-component pattern) or `startElement` (legacy `ReactNode`).
|
|
10
|
+
*/
|
|
11
|
+
type StartSlotProps = {
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Prefer `startIcon`, which renders the icon with
|
|
14
|
+
* consistent size, color, and aria attributes. Still supported for
|
|
15
|
+
* backward compatibility — pass any `ReactNode` to render to the
|
|
16
|
+
* left of the title.
|
|
17
|
+
*/
|
|
18
|
+
startElement?: React.ReactNode;
|
|
19
|
+
startIcon?: never;
|
|
20
|
+
} | {
|
|
21
|
+
startElement?: never;
|
|
22
|
+
/**
|
|
23
|
+
* Icon **component** (e.g. `Search`, `Folder` from
|
|
24
|
+
* `@box/blueprint-web-assets/icons/Medium`) rendered to the left of
|
|
25
|
+
* the title. The Accordion handles sizing (20x20 per the Figma
|
|
26
|
+
* "L. Element=Icon" spec), `currentColor` inheritance, and
|
|
27
|
+
* `aria-hidden`, matching the icon-component pattern used by
|
|
28
|
+
* `BaseButton`, `IconButton`, and `BaseInlineNotice`.
|
|
29
|
+
*
|
|
30
|
+
* When combined with `startElementBackgroundColor`, the icon is
|
|
31
|
+
* placed inside the matching 32x32 framed container.
|
|
32
|
+
*/
|
|
33
|
+
startIcon?: AccordionIconComponent;
|
|
34
|
+
};
|
|
3
35
|
interface Loading {
|
|
4
36
|
/** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
|
|
5
37
|
loading: boolean;
|
|
@@ -27,21 +59,30 @@ interface IconProps {
|
|
|
27
59
|
iconAriaLabel: string;
|
|
28
60
|
}
|
|
29
61
|
/**
|
|
30
|
-
* Only one header slot is allowed at a time: `status`, `iconVariant`, or `
|
|
62
|
+
* Only one header slot is allowed at a time: `status`, `iconVariant`, `action`, or `endText`.
|
|
31
63
|
*/
|
|
32
64
|
type HeaderSlotProps = {
|
|
33
65
|
status?: number;
|
|
34
66
|
iconVariant?: never;
|
|
35
67
|
iconAriaLabel?: never;
|
|
36
68
|
action?: never;
|
|
69
|
+
endText?: never;
|
|
37
70
|
} | ({
|
|
38
71
|
status?: never;
|
|
39
72
|
action?: never;
|
|
73
|
+
endText?: never;
|
|
40
74
|
} & RequireAllOrNone<IconProps, keyof IconProps>) | {
|
|
41
75
|
status?: never;
|
|
42
76
|
iconVariant?: never;
|
|
43
77
|
iconAriaLabel?: never;
|
|
44
78
|
action?: React.ReactNode;
|
|
79
|
+
endText?: never;
|
|
80
|
+
} | {
|
|
81
|
+
status?: never;
|
|
82
|
+
iconVariant?: never;
|
|
83
|
+
iconAriaLabel?: never;
|
|
84
|
+
action?: never;
|
|
85
|
+
endText?: string;
|
|
45
86
|
};
|
|
46
87
|
export type AccordionBaseItem = {
|
|
47
88
|
/**
|
|
@@ -65,9 +106,32 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
|
|
|
65
106
|
*/
|
|
66
107
|
disabled?: boolean;
|
|
67
108
|
/**
|
|
68
|
-
*
|
|
109
|
+
* When provided, frames the start-of-row icon in a 32x32 container
|
|
110
|
+
* tinted with the matching Box brand surface color. Each variant
|
|
111
|
+
* pairs a "brand-{variant}-tertiary" tinted background with the
|
|
112
|
+
* corresponding brand foreground glyph:
|
|
113
|
+
*
|
|
114
|
+
* - `default` – `surface-surface-tertiary` (#F5F5F5) background, `gray-100` (#909090) icon
|
|
115
|
+
* - `box` – `brand-box-tertiary` (#E5EFFA) background, `box-blue-100` (#0061D5) icon
|
|
116
|
+
* - `forms` – `brand-forms-tertiary` (#E9F8F2) background, `green-light-110` (#22AF74) icon
|
|
117
|
+
* - `docgen` – `brand-docgen-tertiary` (#ECE9F8) background, `brand-docgen-primary` (purple) icon
|
|
118
|
+
* - `sign` – `brand-sign-tertiary` (#E5EBF2) background, `dark-blue-100` (#003C84) icon
|
|
119
|
+
*
|
|
120
|
+
* Has no effect unless `startIcon` (or the legacy `startElement`) is
|
|
121
|
+
* also provided. Only applies to modernized accordion items.
|
|
69
122
|
*/
|
|
70
|
-
|
|
123
|
+
startElementBackgroundColor?: StartElementBackgroundVariant;
|
|
124
|
+
/**
|
|
125
|
+
* Optional supplemental text displayed below the title in the header.
|
|
126
|
+
* Only applies to modernized accordion items.
|
|
127
|
+
*/
|
|
128
|
+
subtitle?: string;
|
|
129
|
+
/**
|
|
130
|
+
* Optional decorative icon displayed before the subtitle text.
|
|
131
|
+
* Has no effect unless `subtitle` is also provided.
|
|
132
|
+
* Only applies to modernized accordion items.
|
|
133
|
+
*/
|
|
134
|
+
subtitleIcon?: React.ReactNode;
|
|
71
135
|
/**
|
|
72
136
|
* When true, the item renders a colored border and tinted background when
|
|
73
137
|
* expanded to visually indicate it is the active/selected item. The border
|
|
@@ -76,7 +140,7 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
|
|
|
76
140
|
* Only applies to modernized accordion items.
|
|
77
141
|
*/
|
|
78
142
|
highlighted?: boolean;
|
|
79
|
-
} & HeaderSlotProps;
|
|
143
|
+
} & HeaderSlotProps & StartSlotProps;
|
|
80
144
|
export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
|
|
81
145
|
export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
|
|
82
146
|
export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1580,8 +1580,207 @@
|
|
|
1580
1580
|
.bp_status_module_colorSurfaceStatusSurfaceGreen--eddf1.bp_status_module_interactiveStatus--eddf1:focus-visible{
|
|
1581
1581
|
background-color:var(--status-interactive-background-green-focus);
|
|
1582
1582
|
}
|
|
1583
|
+
.bp_tooltip_module_content--b08a6[data-modern=false]{
|
|
1584
|
+
--tooltip-max-width:200px;
|
|
1585
|
+
--tooltip-padding:var(--space-2) var(--space-3);
|
|
1586
|
+
--tooltip-radius:var(--radius-1);
|
|
1587
|
+
--tooltip-background:var(--surface-tooltip-surface);
|
|
1588
|
+
--tooltip-background-error:var(--surface-tooltip-surface-error);
|
|
1589
|
+
--tooltip-border:var(--border-1) solid var(--surface-tooltip-surface);
|
|
1590
|
+
--tooltip-text-color:var(--text-text-on-dark);
|
|
1591
|
+
--tooltip-text-color-error:var(--text-text-on-light);
|
|
1592
|
+
--tooltip-border-error:var(--border-1) solid var(--border-tooltip-border-error);
|
|
1593
|
+
--tooltip-drop-shadow:none;
|
|
1594
|
+
--tooltip-backdrop-filter:none;
|
|
1595
|
+
font-family:var(--body-default-font-family);
|
|
1596
|
+
font-size:var(--body-default-font-size);
|
|
1597
|
+
font-weight:var(--body-default-font-weight);
|
|
1598
|
+
letter-spacing:var(--body-default-letter-spacing);
|
|
1599
|
+
line-height:var(--body-default-line-height);
|
|
1600
|
+
text-decoration:var(--body-default-text-decoration);
|
|
1601
|
+
text-transform:var(--body-default-text-case);
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
.bp_tooltip_module_content--b08a6[data-modern=true]{
|
|
1605
|
+
--tooltip-max-width:200px;
|
|
1606
|
+
--tooltip-padding:var(--bp-space-020) var(--bp-space-030);
|
|
1607
|
+
--tooltip-radius:var(--bp-radius-04);
|
|
1608
|
+
--tooltip-background:var(--bp-surface-tooltip-surface);
|
|
1609
|
+
--tooltip-background-error:var(--bp-surface-tooltip-surface-error);
|
|
1610
|
+
--tooltip-border:var(--bp-border-01) solid var(--bp-border-tooltip-border);
|
|
1611
|
+
--tooltip-text-color:var(--bp-text-text-on-dark);
|
|
1612
|
+
--tooltip-text-color-error:var(--bp-text-text-on-light);
|
|
1613
|
+
--tooltip-border-error:var(--bp-border-01) solid var(--bp-border-tooltip-border-error);
|
|
1614
|
+
--tooltip-drop-shadow:var(--dropshadow-3);
|
|
1615
|
+
--tooltip-backdrop-filter:blur(16px);
|
|
1616
|
+
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1617
|
+
font-size:var(--bp-font-size-05);
|
|
1618
|
+
font-style:normal;
|
|
1619
|
+
font-weight:var(--bp-font-weight-regular);
|
|
1620
|
+
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
1621
|
+
line-height:var(--bp-font-line-height-04);
|
|
1622
|
+
}
|
|
1583
1623
|
|
|
1584
|
-
.
|
|
1624
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open]{
|
|
1625
|
+
animation-duration:var(--bp-duration-short);
|
|
1626
|
+
animation-timing-function:var(--bp-curve-large-on);
|
|
1627
|
+
}
|
|
1628
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=top]{
|
|
1629
|
+
animation-name:bp_tooltip_module_bpTooltipTopSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
1630
|
+
}
|
|
1631
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=right]{
|
|
1632
|
+
animation-name:bp_tooltip_module_bpTooltipRightSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
1633
|
+
}
|
|
1634
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=bottom]{
|
|
1635
|
+
animation-name:bp_tooltip_module_bpTooltipBottomSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
1636
|
+
}
|
|
1637
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=left]{
|
|
1638
|
+
animation-name:bp_tooltip_module_bpTooltipLeftSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
1639
|
+
}
|
|
1640
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed]{
|
|
1641
|
+
animation-duration:var(--bp-duration-short);
|
|
1642
|
+
animation-timing-function:var(--bp-curve-large-off);
|
|
1643
|
+
}
|
|
1644
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=top]{
|
|
1645
|
+
animation-name:bp_tooltip_module_bpTooltipTopSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
1646
|
+
}
|
|
1647
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=right]{
|
|
1648
|
+
animation-name:bp_tooltip_module_bpTooltipRightSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
1649
|
+
}
|
|
1650
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=bottom]{
|
|
1651
|
+
animation-name:bp_tooltip_module_bpTooltipBottomSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
1652
|
+
}
|
|
1653
|
+
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=left]{
|
|
1654
|
+
animation-name:bp_tooltip_module_bpTooltipLeftSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
1655
|
+
}
|
|
1656
|
+
|
|
1657
|
+
.bp_tooltip_module_content--b08a6{
|
|
1658
|
+
backdrop-filter:var(--tooltip-backdrop-filter);
|
|
1659
|
+
border-radius:var(--tooltip-radius);
|
|
1660
|
+
box-shadow:var(--tooltip-drop-shadow);
|
|
1661
|
+
box-sizing:border-box;
|
|
1662
|
+
max-width:var(--tooltip-max-width);
|
|
1663
|
+
overflow-wrap:break-word;
|
|
1664
|
+
padding:var(--tooltip-padding);
|
|
1665
|
+
position:relative;
|
|
1666
|
+
z-index:2147483647;
|
|
1667
|
+
}
|
|
1668
|
+
.bp_tooltip_module_content--b08a6.bp_tooltip_module_standard--b08a6{
|
|
1669
|
+
background-color:var(--tooltip-background);
|
|
1670
|
+
border:var(--tooltip-border);
|
|
1671
|
+
color:var(--tooltip-text-color);
|
|
1672
|
+
}
|
|
1673
|
+
.bp_tooltip_module_content--b08a6.bp_tooltip_module_error--b08a6{
|
|
1674
|
+
background-color:var(--tooltip-background-error);
|
|
1675
|
+
border:var(--tooltip-border-error);
|
|
1676
|
+
color:var(--tooltip-text-color-error);
|
|
1677
|
+
}
|
|
1678
|
+
|
|
1679
|
+
.bp_tooltip_module_arrow--b08a6{
|
|
1680
|
+
border-left:8.7px solid #0000;
|
|
1681
|
+
border-right:8.7px solid #0000;
|
|
1682
|
+
border-top:8.7px solid var(--surface-tooltip-surface);
|
|
1683
|
+
display:block;
|
|
1684
|
+
height:0;
|
|
1685
|
+
width:0;
|
|
1686
|
+
}
|
|
1687
|
+
.bp_tooltip_module_arrow--b08a6.bp_tooltip_module_error--b08a6{
|
|
1688
|
+
border-top-color:var(--border-tooltip-border-error);
|
|
1689
|
+
}
|
|
1690
|
+
.bp_tooltip_module_arrow--b08a6.bp_tooltip_module_error--b08a6::after{
|
|
1691
|
+
border-left:7.7px solid #0000;
|
|
1692
|
+
border-right:7.7px solid #0000;
|
|
1693
|
+
border-top:7.7px solid var(--surface-tooltip-surface-error);
|
|
1694
|
+
content:"";
|
|
1695
|
+
height:0;
|
|
1696
|
+
left:1px;
|
|
1697
|
+
position:absolute;
|
|
1698
|
+
top:-.7px;
|
|
1699
|
+
width:0;
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
@keyframes bp_tooltip_module_bpTooltipFadeIn--b08a6{
|
|
1703
|
+
from{
|
|
1704
|
+
opacity:var(--bp-opacity-hidden);
|
|
1705
|
+
}
|
|
1706
|
+
to{
|
|
1707
|
+
opacity:var(--bp-opacity-visible);
|
|
1708
|
+
}
|
|
1709
|
+
}
|
|
1710
|
+
@keyframes bp_tooltip_module_bpTooltipFadeOut--b08a6{
|
|
1711
|
+
from{
|
|
1712
|
+
opacity:var(--bp-opacity-visible);
|
|
1713
|
+
}
|
|
1714
|
+
to{
|
|
1715
|
+
opacity:var(--bp-opacity-hidden);
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
@keyframes bp_tooltip_module_bpTooltipTopSlideEnter--b08a6{
|
|
1719
|
+
from{
|
|
1720
|
+
transform:translateY(var(--bp-space-010));
|
|
1721
|
+
}
|
|
1722
|
+
to{
|
|
1723
|
+
transform:translateY(0);
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
1726
|
+
@keyframes bp_tooltip_module_bpTooltipTopSlideExit--b08a6{
|
|
1727
|
+
from{
|
|
1728
|
+
transform:translateY(0);
|
|
1729
|
+
}
|
|
1730
|
+
to{
|
|
1731
|
+
transform:translateY(var(--bp-space-010));
|
|
1732
|
+
}
|
|
1733
|
+
}
|
|
1734
|
+
@keyframes bp_tooltip_module_bpTooltipBottomSlideEnter--b08a6{
|
|
1735
|
+
from{
|
|
1736
|
+
transform:translateY(calc(var(--bp-space-010)*-1));
|
|
1737
|
+
}
|
|
1738
|
+
to{
|
|
1739
|
+
transform:translateY(0);
|
|
1740
|
+
}
|
|
1741
|
+
}
|
|
1742
|
+
@keyframes bp_tooltip_module_bpTooltipBottomSlideExit--b08a6{
|
|
1743
|
+
from{
|
|
1744
|
+
transform:translateY(0);
|
|
1745
|
+
}
|
|
1746
|
+
to{
|
|
1747
|
+
transform:translateY(calc(var(--bp-space-010)*-1));
|
|
1748
|
+
}
|
|
1749
|
+
}
|
|
1750
|
+
@keyframes bp_tooltip_module_bpTooltipRightSlideEnter--b08a6{
|
|
1751
|
+
from{
|
|
1752
|
+
transform:translateX(calc(var(--bp-space-010)*-1));
|
|
1753
|
+
}
|
|
1754
|
+
to{
|
|
1755
|
+
transform:translateX(0);
|
|
1756
|
+
}
|
|
1757
|
+
}
|
|
1758
|
+
@keyframes bp_tooltip_module_bpTooltipRightSlideExit--b08a6{
|
|
1759
|
+
from{
|
|
1760
|
+
transform:translateX(0);
|
|
1761
|
+
}
|
|
1762
|
+
to{
|
|
1763
|
+
transform:translateX(calc(var(--bp-space-010)*-1));
|
|
1764
|
+
}
|
|
1765
|
+
}
|
|
1766
|
+
@keyframes bp_tooltip_module_bpTooltipLeftSlideEnter--b08a6{
|
|
1767
|
+
from{
|
|
1768
|
+
transform:translateX(var(--bp-space-010));
|
|
1769
|
+
}
|
|
1770
|
+
to{
|
|
1771
|
+
transform:translateX(0);
|
|
1772
|
+
}
|
|
1773
|
+
}
|
|
1774
|
+
@keyframes bp_tooltip_module_bpTooltipLeftSlideExit--b08a6{
|
|
1775
|
+
from{
|
|
1776
|
+
transform:translateX(0);
|
|
1777
|
+
}
|
|
1778
|
+
to{
|
|
1779
|
+
transform:translateX(var(--bp-space-010));
|
|
1780
|
+
}
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=false]{
|
|
1585
1784
|
--accordion-min-width:320px;
|
|
1586
1785
|
--accordion-item-radius:none;
|
|
1587
1786
|
--accordion-item-radius-expanded:none;
|
|
@@ -1606,6 +1805,7 @@
|
|
|
1606
1805
|
--accordion-trigger-border:none;
|
|
1607
1806
|
--accordion-trigger-expanded-border:none;
|
|
1608
1807
|
--accordion-trigger-border-hover:none;
|
|
1808
|
+
--accordion-trigger-border-pressed:none;
|
|
1609
1809
|
--accordion-trigger-padding:var(--space-4) 0 var(--space-4) var(--space-4);
|
|
1610
1810
|
--accordion-trigger-background-active:var(--surface-surface);
|
|
1611
1811
|
--accordion-trigger-collapsed-background-hover:var(--surface-accordion-surface-hover);
|
|
@@ -1620,18 +1820,18 @@
|
|
|
1620
1820
|
--accordion-item-header-min-height:unset;
|
|
1621
1821
|
}
|
|
1622
1822
|
|
|
1623
|
-
.bp_accordion_module_accordionItem--
|
|
1823
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true]{
|
|
1624
1824
|
--accordion-min-width:320px;
|
|
1625
1825
|
--accordion-item-radius:var(--bp-radius-08);
|
|
1626
1826
|
--accordion-item-radius-expanded:var(--bp-radius-10);
|
|
1627
|
-
--accordion-item-background-collapsed:var(--bp-surface-
|
|
1827
|
+
--accordion-item-background-collapsed:var(--bp-surface-list-item-surface);
|
|
1628
1828
|
--accordion-item-background-expanded:var(--bp-surface-accordion-surface-expanded);
|
|
1629
1829
|
--accordion-item-border:none;
|
|
1630
1830
|
--accordion-item-border-expanded:var(--bp-border-01) solid var(--bp-black-opacity-08);
|
|
1631
1831
|
--accordion-item-border-bottom-expanded:var(--bp-border-01) solid var(--bp-black-opacity-08);
|
|
1632
|
-
--accordion-content-padding-block:var(--bp-space-
|
|
1832
|
+
--accordion-content-padding-block:var(--bp-space-020);
|
|
1633
1833
|
--accordion-content-padding-inline:var(--bp-space-040);
|
|
1634
|
-
--accordion-content-padding-block-end:var(--bp-space-
|
|
1834
|
+
--accordion-content-padding-block-end:var(--bp-space-040);
|
|
1635
1835
|
--accordion-content-gap:var(--bp-space-040);
|
|
1636
1836
|
--accordion-error-padding-block-start:var(--bp-space-040);
|
|
1637
1837
|
--accordion-error-padding-inline:var(--bp-space-040);
|
|
@@ -1642,14 +1842,15 @@
|
|
|
1642
1842
|
--accordion-icon-size:var(--bp-size-050);
|
|
1643
1843
|
--accordion-bg-only-status-size:var(--bp-size-040);
|
|
1644
1844
|
--accordion-icon-radius:var(--bp-radius-16);
|
|
1645
|
-
--accordion-trigger-border:
|
|
1845
|
+
--accordion-trigger-border:var(--bp-border-01) solid var(--bp-border-list-item-border);
|
|
1846
|
+
--accordion-trigger-border-hover:var(--bp-border-01) solid var(--bp-border-list-item-border);
|
|
1847
|
+
--accordion-trigger-border-pressed:var(--bp-border-01) solid var(--bp-black-opacity-04);
|
|
1646
1848
|
--accordion-trigger-expanded-border:var(--bp-border-01) solid var(--bp-surface-accordion-surface-expanded);
|
|
1647
|
-
--accordion-trigger-border-hover:none;
|
|
1648
1849
|
--accordion-trigger-padding:var(--bp-space-030) 0 var(--bp-space-030) var(--bp-space-040);
|
|
1649
|
-
--accordion-trigger-background-active:var(--bp-surface-
|
|
1650
|
-
--accordion-trigger-collapsed-background-hover:var(--bp-surface-
|
|
1850
|
+
--accordion-trigger-background-active:var(--bp-surface-list-item-surface);
|
|
1851
|
+
--accordion-trigger-collapsed-background-hover:var(--bp-surface-list-item-surface-hover);
|
|
1651
1852
|
--accordion-trigger-expanded-background-hover:var(--bp-surface-accordion-surface-expanded-hover);
|
|
1652
|
-
--accordion-trigger-collapsed-background-focus:var(--bp-surface-
|
|
1853
|
+
--accordion-trigger-collapsed-background-focus:var(--bp-surface-list-item-surface-hover);
|
|
1653
1854
|
--accordion-trigger-expanded-background-focus:var(--bp-surface-accordion-surface-expanded-hover);
|
|
1654
1855
|
--accordion-trigger-box-shadow:inset 0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
|
|
1655
1856
|
--accordion-trigger-icon-margin:var(--bp-space-030);
|
|
@@ -1663,15 +1864,15 @@
|
|
|
1663
1864
|
--accordion-item-highlight-border-color-expanded:var(--bp-box-blue-100);
|
|
1664
1865
|
}
|
|
1665
1866
|
|
|
1666
|
-
.bp_accordion_module_accordionContent--
|
|
1667
|
-
animation:bp_accordion_module_slideDown--
|
|
1867
|
+
.bp_accordion_module_accordionContent--c8f78[data-state=open]{
|
|
1868
|
+
animation:bp_accordion_module_slideDown--c8f78 .15s ease-out;
|
|
1668
1869
|
}
|
|
1669
1870
|
|
|
1670
|
-
.bp_accordion_module_accordionContent--
|
|
1671
|
-
animation:bp_accordion_module_slideUp--
|
|
1871
|
+
.bp_accordion_module_accordionContent--c8f78[data-state=closed]{
|
|
1872
|
+
animation:bp_accordion_module_slideUp--c8f78 .15s ease-out;
|
|
1672
1873
|
}
|
|
1673
1874
|
|
|
1674
|
-
.bp_accordion_module_accordionContentLayout--
|
|
1875
|
+
.bp_accordion_module_accordionContentLayout--c8f78{
|
|
1675
1876
|
display:flex;
|
|
1676
1877
|
flex:1 1 auto;
|
|
1677
1878
|
flex-direction:column;
|
|
@@ -1682,26 +1883,26 @@
|
|
|
1682
1883
|
padding-inline:var(--accordion-content-padding-inline);
|
|
1683
1884
|
}
|
|
1684
1885
|
|
|
1685
|
-
.bp_accordion_module_accordionContent--
|
|
1886
|
+
.bp_accordion_module_accordionContent--c8f78[data-state=closed] .bp_accordion_module_accordionContentLayout--c8f78{
|
|
1686
1887
|
overflow:hidden;
|
|
1687
1888
|
}
|
|
1688
1889
|
|
|
1689
|
-
.bp_accordion_module_accordionContent--
|
|
1690
|
-
animation:bp_accordion_module_enableAccordionScroll--
|
|
1890
|
+
.bp_accordion_module_accordionContent--c8f78[data-state=open] .bp_accordion_module_accordionContentLayout--c8f78{
|
|
1891
|
+
animation:bp_accordion_module_enableAccordionScroll--c8f78 .15s step-end forwards;
|
|
1691
1892
|
}
|
|
1692
1893
|
|
|
1693
|
-
.bp_accordion_module_accordionContent--
|
|
1894
|
+
.bp_accordion_module_accordionContent--c8f78{
|
|
1694
1895
|
display:flex;
|
|
1695
1896
|
flex:1 1 auto;
|
|
1696
1897
|
flex-direction:column;
|
|
1697
1898
|
min-height:0;
|
|
1698
1899
|
overflow:hidden;
|
|
1699
1900
|
}
|
|
1700
|
-
.bp_accordion_module_accordionContent--
|
|
1901
|
+
.bp_accordion_module_accordionContent--c8f78[hidden]{
|
|
1701
1902
|
display:none;
|
|
1702
1903
|
}
|
|
1703
1904
|
|
|
1704
|
-
@keyframes bp_accordion_module_slideDown--
|
|
1905
|
+
@keyframes bp_accordion_module_slideDown--c8f78{
|
|
1705
1906
|
from{
|
|
1706
1907
|
height:0;
|
|
1707
1908
|
}
|
|
@@ -1709,7 +1910,7 @@
|
|
|
1709
1910
|
height:var(--radix-accordion-content-height);
|
|
1710
1911
|
}
|
|
1711
1912
|
}
|
|
1712
|
-
@keyframes bp_accordion_module_slideUp--
|
|
1913
|
+
@keyframes bp_accordion_module_slideUp--c8f78{
|
|
1713
1914
|
from{
|
|
1714
1915
|
height:var(--radix-accordion-content-height);
|
|
1715
1916
|
}
|
|
@@ -1717,7 +1918,7 @@
|
|
|
1717
1918
|
height:0;
|
|
1718
1919
|
}
|
|
1719
1920
|
}
|
|
1720
|
-
@keyframes bp_accordion_module_enableAccordionScroll--
|
|
1921
|
+
@keyframes bp_accordion_module_enableAccordionScroll--c8f78{
|
|
1721
1922
|
0%{
|
|
1722
1923
|
overflow:hidden;
|
|
1723
1924
|
}
|
|
@@ -1725,26 +1926,26 @@
|
|
|
1725
1926
|
overflow:auto;
|
|
1726
1927
|
}
|
|
1727
1928
|
}
|
|
1728
|
-
.bp_accordion_module_accordion--
|
|
1929
|
+
.bp_accordion_module_accordion--c8f78{
|
|
1729
1930
|
display:flex;
|
|
1730
1931
|
flex-direction:column;
|
|
1731
1932
|
gap:var(--bp-space-030);
|
|
1732
1933
|
padding:var(--bp-space-030);
|
|
1733
1934
|
}
|
|
1734
1935
|
|
|
1735
|
-
.bp_accordion_module_accordionContentWrapper--
|
|
1936
|
+
.bp_accordion_module_accordionContentWrapper--c8f78{
|
|
1736
1937
|
display:flex;
|
|
1737
1938
|
flex:1 1 auto;
|
|
1738
1939
|
flex-direction:column;
|
|
1739
1940
|
min-height:0;
|
|
1740
1941
|
}
|
|
1741
1942
|
|
|
1742
|
-
.bp_accordion_module_accordionInlineErrorWrapper--
|
|
1943
|
+
.bp_accordion_module_accordionInlineErrorWrapper--c8f78{
|
|
1743
1944
|
padding-block-start:var(--accordion-error-padding-block-start);
|
|
1744
1945
|
padding-inline:var(--accordion-error-padding-inline);
|
|
1745
1946
|
}
|
|
1746
1947
|
|
|
1747
|
-
.bp_accordion_module_accordionItem--
|
|
1948
|
+
.bp_accordion_module_accordionItem--c8f78{
|
|
1748
1949
|
-webkit-tap-highlight-color:transparent;
|
|
1749
1950
|
background:none;
|
|
1750
1951
|
border-bottom:var(--accordion-item-border);
|
|
@@ -1754,23 +1955,23 @@
|
|
|
1754
1955
|
min-width:var(--accordion-min-width);
|
|
1755
1956
|
overflow:hidden;
|
|
1756
1957
|
}
|
|
1757
|
-
.bp_accordion_module_accordionItem--
|
|
1958
|
+
.bp_accordion_module_accordionItem--c8f78[data-state=open]{
|
|
1758
1959
|
background-color:var(--accordion-item-background-expanded);
|
|
1759
1960
|
border:var(--accordion-item-border-expanded);
|
|
1760
1961
|
border-bottom:var(--accordion-item-border-bottom-expanded);
|
|
1761
1962
|
border-radius:var(--accordion-item-radius-expanded);
|
|
1762
1963
|
}
|
|
1763
1964
|
|
|
1764
|
-
.bp_accordion_module_accordionItem--
|
|
1965
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true].bp_accordion_module_highlighted--c8f78{
|
|
1765
1966
|
border:var(--accordion-item-highlight-border-width) solid var(--accordion-item-highlight-border-color);
|
|
1766
1967
|
}
|
|
1767
1968
|
|
|
1768
|
-
.bp_accordion_module_accordionItem--
|
|
1969
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true].bp_accordion_module_highlighted--c8f78[data-state=open]{
|
|
1769
1970
|
background-color:var(--accordion-item-highlight-background-expanded);
|
|
1770
1971
|
border-color:var(--accordion-item-highlight-border-color-expanded);
|
|
1771
1972
|
}
|
|
1772
1973
|
|
|
1773
|
-
.bp_accordion_module_accordionFixedContent--
|
|
1974
|
+
.bp_accordion_module_accordionFixedContent--c8f78{
|
|
1774
1975
|
background-color:var(--accordion-item-background-collapsed);
|
|
1775
1976
|
border:var(--accordion-trigger-border);
|
|
1776
1977
|
border-radius:var(--accordion-item-radius);
|
|
@@ -1781,7 +1982,7 @@
|
|
|
1781
1982
|
padding-inline:var(--accordion-fixed-content-padding-inline);
|
|
1782
1983
|
}
|
|
1783
1984
|
|
|
1784
|
-
.bp_accordion_module_accordionHeader--
|
|
1985
|
+
.bp_accordion_module_accordionHeader--c8f78{
|
|
1785
1986
|
align-items:center;
|
|
1786
1987
|
display:flex;
|
|
1787
1988
|
justify-content:space-between;
|
|
@@ -1791,26 +1992,130 @@
|
|
|
1791
1992
|
width:100%;
|
|
1792
1993
|
}
|
|
1793
1994
|
|
|
1794
|
-
.bp_accordion_module_accordionTitleGroup--
|
|
1995
|
+
.bp_accordion_module_accordionTitleGroup--c8f78{
|
|
1795
1996
|
align-items:center;
|
|
1796
1997
|
display:flex;
|
|
1797
1998
|
gap:var(--bp-space-020, .5rem);
|
|
1798
1999
|
min-width:0;
|
|
1799
2000
|
}
|
|
1800
2001
|
|
|
1801
|
-
.
|
|
2002
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionTitleGroup--c8f78{
|
|
2003
|
+
gap:var(--bp-space-030);
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
.bp_accordion_module_accordionStartElement--c8f78{
|
|
2007
|
+
align-items:center;
|
|
2008
|
+
display:flex;
|
|
2009
|
+
flex-shrink:0;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramed--c8f78{
|
|
2013
|
+
align-items:center;
|
|
2014
|
+
border-radius:var(--bp-radius-10, 1.25rem);
|
|
2015
|
+
display:inline-flex;
|
|
2016
|
+
height:var(--bp-size-080, 2rem);
|
|
2017
|
+
justify-content:center;
|
|
2018
|
+
width:var(--bp-size-080, 2rem);
|
|
2019
|
+
}
|
|
2020
|
+
|
|
2021
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramed--c8f78 svg :is(path, rect, circle, polygon, polyline, ellipse){
|
|
2022
|
+
fill:currentcolor;
|
|
2023
|
+
}
|
|
2024
|
+
|
|
2025
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramedDefault--c8f78{
|
|
2026
|
+
background-color:var(--bp-surface-surface-tertiary);
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramedBox--c8f78{
|
|
2030
|
+
background-color:var(--bp-box-blue-10);
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramedForms--c8f78{
|
|
2034
|
+
background-color:var(--bp-green-light-10);
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2037
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramedDocgen--c8f78{
|
|
2038
|
+
background-color:var(--bp-grimace-10);
|
|
2039
|
+
}
|
|
2040
|
+
|
|
2041
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionStartElementFramedSign--c8f78{
|
|
2042
|
+
background-color:var(--bp-dark-blue-10);
|
|
2043
|
+
color:var(--bp-dark-blue-100);
|
|
2044
|
+
}
|
|
2045
|
+
|
|
2046
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionTitleContent--c8f78{
|
|
2047
|
+
display:flex;
|
|
2048
|
+
flex:1 1 auto;
|
|
2049
|
+
flex-direction:column;
|
|
2050
|
+
gap:var(--bp-space-005, .125rem);
|
|
2051
|
+
justify-content:center;
|
|
2052
|
+
min-width:0;
|
|
2053
|
+
}
|
|
2054
|
+
|
|
2055
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionTitleText--c8f78{
|
|
2056
|
+
display:block;
|
|
2057
|
+
min-width:0;
|
|
2058
|
+
}
|
|
2059
|
+
|
|
2060
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true]:not([data-state=open]) .bp_accordion_module_accordionTitleText--c8f78{
|
|
2061
|
+
overflow:hidden;
|
|
2062
|
+
text-overflow:ellipsis;
|
|
2063
|
+
white-space:nowrap;
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.bp_accordion_module_accordionSubtitle--c8f78{
|
|
1802
2067
|
align-items:center;
|
|
1803
2068
|
display:flex;
|
|
2069
|
+
gap:var(--bp-space-010, .25rem);
|
|
2070
|
+
min-width:0;
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
.bp_accordion_module_accordionSubtitleIcon--c8f78{
|
|
2074
|
+
align-items:center;
|
|
2075
|
+
display:inline-flex;
|
|
1804
2076
|
flex-shrink:0;
|
|
2077
|
+
height:var(--bp-size-030, .75rem);
|
|
2078
|
+
justify-content:center;
|
|
2079
|
+
width:var(--bp-size-030, .75rem);
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionSubtitleText--c8f78{
|
|
2083
|
+
display:block;
|
|
2084
|
+
font-size:var(--bp-font-size-03);
|
|
2085
|
+
line-height:var(--bp-font-line-height-02);
|
|
2086
|
+
min-width:0;
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionEndText--c8f78,.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionSubtitleText--c8f78{
|
|
2090
|
+
color:var(--bp-text-text-on-light-secondary);
|
|
2091
|
+
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
2092
|
+
font-style:normal;
|
|
2093
|
+
font-weight:var(--bp-font-weight-regular);
|
|
2094
|
+
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
2095
|
+
overflow:hidden;
|
|
2096
|
+
text-overflow:ellipsis;
|
|
2097
|
+
white-space:nowrap;
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2100
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionEndText--c8f78{
|
|
2101
|
+
display:inline-block;
|
|
2102
|
+
font-size:var(--bp-font-size-04);
|
|
2103
|
+
line-height:var(--bp-font-line-height-04);
|
|
2104
|
+
max-width:var(--bp-size-300, 7.5rem);
|
|
2105
|
+
text-align:end;
|
|
1805
2106
|
}
|
|
1806
2107
|
|
|
1807
|
-
.bp_accordion_module_accordionHeaderInfoSlot--
|
|
2108
|
+
.bp_accordion_module_accordionHeaderInfoSlot--c8f78{
|
|
1808
2109
|
align-items:center;
|
|
1809
2110
|
display:flex;
|
|
1810
2111
|
margin-inline-start:var(--accordion-chevron-margin-inline-start);
|
|
1811
2112
|
}
|
|
1812
2113
|
|
|
1813
|
-
.bp_accordion_module_accordionItem--
|
|
2114
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionHeaderInfoSlot--c8f78{
|
|
2115
|
+
margin-inline-start:var(--bp-space-030);
|
|
2116
|
+
}
|
|
2117
|
+
|
|
2118
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=false] .bp_accordion_module_accordionHeader--c8f78{
|
|
1814
2119
|
color:var(--accordion-header-text-color);
|
|
1815
2120
|
font-family:var(--title-small-font-family);
|
|
1816
2121
|
font-size:var(--title-small-font-size);
|
|
@@ -1821,7 +2126,7 @@
|
|
|
1821
2126
|
text-transform:var(--title-small-text-case);
|
|
1822
2127
|
}
|
|
1823
2128
|
|
|
1824
|
-
.bp_accordion_module_accordionItem--
|
|
2129
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionHeader--c8f78{
|
|
1825
2130
|
color:var(--accordion-header-text-color);
|
|
1826
2131
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1827
2132
|
font-size:var(--bp-font-size-06);
|
|
@@ -1831,31 +2136,31 @@
|
|
|
1831
2136
|
line-height:var(--bp-font-line-height-04);
|
|
1832
2137
|
}
|
|
1833
2138
|
|
|
1834
|
-
.bp_accordion_module_accordionSlot--
|
|
2139
|
+
.bp_accordion_module_accordionSlot--c8f78{
|
|
1835
2140
|
align-items:center;
|
|
1836
2141
|
display:flex;
|
|
1837
2142
|
}
|
|
1838
2143
|
|
|
1839
|
-
.bp_accordion_module_accordionChevronWrapper--
|
|
2144
|
+
.bp_accordion_module_accordionChevronWrapper--c8f78{
|
|
1840
2145
|
align-items:center;
|
|
1841
2146
|
cursor:pointer;
|
|
1842
2147
|
display:flex;
|
|
1843
2148
|
padding-inline-end:var(--space-6);
|
|
1844
2149
|
}
|
|
1845
|
-
.bp_accordion_module_accordionChevronWrapper--
|
|
2150
|
+
.bp_accordion_module_accordionChevronWrapper--c8f78 .bp_accordion_module_accordionTriggerIcon--c8f78{
|
|
1846
2151
|
flex-shrink:0;
|
|
1847
2152
|
transform:var(--accordion-trigger-icon-transform-collapsed);
|
|
1848
2153
|
}
|
|
1849
2154
|
|
|
1850
|
-
.bp_accordion_module_accordionItem--
|
|
2155
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true] .bp_accordion_module_accordionChevronWrapper--c8f78{
|
|
1851
2156
|
padding-inline-end:var(--bp-space-040);
|
|
1852
2157
|
}
|
|
1853
2158
|
|
|
1854
|
-
.bp_accordion_module_accordionItem--
|
|
2159
|
+
.bp_accordion_module_accordionItem--c8f78[data-state=open] .bp_accordion_module_accordionChevronWrapper--c8f78 .bp_accordion_module_accordionTriggerIcon--c8f78{
|
|
1855
2160
|
transform:var(--accordion-trigger-icon-transform-expanded);
|
|
1856
2161
|
}
|
|
1857
2162
|
|
|
1858
|
-
.bp_accordion_module_accordionIconWrapper--
|
|
2163
|
+
.bp_accordion_module_accordionIconWrapper--c8f78{
|
|
1859
2164
|
align-items:center;
|
|
1860
2165
|
border-radius:var(--accordion-icon-radius);
|
|
1861
2166
|
display:flex;
|
|
@@ -1863,16 +2168,16 @@
|
|
|
1863
2168
|
justify-content:center;
|
|
1864
2169
|
width:var(--accordion-icon-size);
|
|
1865
2170
|
}
|
|
1866
|
-
.bp_accordion_module_accordionIconWrapper--
|
|
2171
|
+
.bp_accordion_module_accordionIconWrapper--c8f78.bp_accordion_module_bgOnly--c8f78{
|
|
1867
2172
|
height:var(--accordion-bg-only-status-size);
|
|
1868
2173
|
width:var(--accordion-bg-only-status-size);
|
|
1869
2174
|
}
|
|
1870
|
-
.bp_accordion_module_accordionIconWrapper--
|
|
2175
|
+
.bp_accordion_module_accordionIconWrapper--c8f78.bp_accordion_module_withIcon--c8f78{
|
|
1871
2176
|
height:var(--accordion-icon-size);
|
|
1872
2177
|
width:var(--accordion-icon-size);
|
|
1873
2178
|
}
|
|
1874
2179
|
|
|
1875
|
-
.bp_accordion_module_accordionTrigger--
|
|
2180
|
+
.bp_accordion_module_accordionTrigger--c8f78{
|
|
1876
2181
|
align-items:center;
|
|
1877
2182
|
background:#0000;
|
|
1878
2183
|
border:none;
|
|
@@ -1880,22 +2185,23 @@
|
|
|
1880
2185
|
display:flex;
|
|
1881
2186
|
flex:1;
|
|
1882
2187
|
height:100%;
|
|
2188
|
+
min-width:0;
|
|
1883
2189
|
padding:var(--accordion-trigger-padding);
|
|
1884
2190
|
width:100%;
|
|
1885
2191
|
}
|
|
1886
|
-
.bp_accordion_module_accordionTrigger--
|
|
2192
|
+
.bp_accordion_module_accordionTrigger--c8f78.bp_accordion_module_disabled--c8f78,.bp_accordion_module_accordionTrigger--c8f78:disabled{
|
|
1887
2193
|
cursor:default;
|
|
1888
2194
|
opacity:.3;
|
|
1889
2195
|
pointer-events:none;
|
|
1890
2196
|
}
|
|
1891
|
-
.bp_accordion_module_accordionTrigger--
|
|
2197
|
+
.bp_accordion_module_accordionTrigger--c8f78:focus-visible{
|
|
1892
2198
|
outline:none;
|
|
1893
2199
|
}
|
|
1894
|
-
.bp_accordion_module_accordionTrigger--
|
|
2200
|
+
.bp_accordion_module_accordionTrigger--c8f78:hover:not(:disabled, .bp_accordion_module_disabled--c8f78){
|
|
1895
2201
|
cursor:pointer;
|
|
1896
2202
|
}
|
|
1897
2203
|
|
|
1898
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2204
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78{
|
|
1899
2205
|
align-items:stretch;
|
|
1900
2206
|
background-color:var(--accordion-item-background-collapsed);
|
|
1901
2207
|
border:var(--accordion-trigger-border);
|
|
@@ -1904,45 +2210,52 @@
|
|
|
1904
2210
|
gap:var(--accordion-chevron-margin-inline-start);
|
|
1905
2211
|
}
|
|
1906
2212
|
|
|
1907
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2213
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78.bp_accordion_module_disabled--c8f78),.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78:disabled){
|
|
1908
2214
|
cursor:default;
|
|
1909
2215
|
}
|
|
1910
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2216
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78.bp_accordion_module_disabled--c8f78) > .bp_accordion_module_accordionChevronWrapper--c8f78,.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78:disabled) > .bp_accordion_module_accordionChevronWrapper--c8f78{
|
|
1911
2217
|
opacity:.3;
|
|
1912
2218
|
pointer-events:none;
|
|
1913
2219
|
}
|
|
1914
2220
|
|
|
1915
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2221
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78[data-state=open]){
|
|
1916
2222
|
background-color:initial;
|
|
1917
2223
|
border:none;
|
|
1918
2224
|
border-radius:var(--accordion-item-radius-expanded) var(--accordion-item-radius-expanded) 0 0;
|
|
1919
2225
|
}
|
|
1920
2226
|
|
|
1921
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2227
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78:focus-visible){
|
|
1922
2228
|
background-color:var(--accordion-trigger-collapsed-background-focus);
|
|
1923
2229
|
border:var(--accordion-trigger-border-hover);
|
|
2230
|
+
border-color:#0000;
|
|
1924
2231
|
box-shadow:var(--accordion-trigger-box-shadow);
|
|
1925
2232
|
outline:none;
|
|
1926
2233
|
}
|
|
1927
2234
|
|
|
1928
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2235
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:hover:not(:has(.bp_accordion_module_accordionTrigger--c8f78:disabled), :has(.bp_accordion_module_accordionTrigger--c8f78.bp_accordion_module_disabled--c8f78)){
|
|
1929
2236
|
background-color:var(--accordion-trigger-collapsed-background-hover);
|
|
1930
2237
|
border:var(--accordion-trigger-border-hover);
|
|
1931
2238
|
cursor:pointer;
|
|
1932
2239
|
}
|
|
1933
2240
|
|
|
1934
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
2241
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78:active, .bp_accordion_module_accordionChevronWrapper--c8f78:active):not(:has(.bp_accordion_module_accordionTrigger--c8f78:disabled),
|
|
2242
|
+
:has(.bp_accordion_module_accordionTrigger--c8f78.bp_accordion_module_disabled--c8f78),
|
|
2243
|
+
:has(.bp_accordion_module_accordionTrigger--c8f78[data-state=open])){
|
|
2244
|
+
border:var(--accordion-trigger-border-pressed);
|
|
2245
|
+
}
|
|
2246
|
+
|
|
2247
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78[data-state=open]):has(.bp_accordion_module_accordionTrigger--c8f78:focus-visible){
|
|
1935
2248
|
background-color:var(--accordion-trigger-expanded-background-focus);
|
|
1936
2249
|
border:none;
|
|
1937
2250
|
}
|
|
1938
2251
|
|
|
1939
|
-
.bp_accordion_module_accordionHeaderContainer--
|
|
1940
|
-
:has(.bp_accordion_module_accordionTrigger--
|
|
2252
|
+
.bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--c8f78:disabled),
|
|
2253
|
+
:has(.bp_accordion_module_accordionTrigger--c8f78.bp_accordion_module_disabled--c8f78)){
|
|
1941
2254
|
background-color:initial;
|
|
1942
2255
|
border:none;
|
|
1943
2256
|
}
|
|
1944
2257
|
|
|
1945
|
-
.bp_accordion_module_accordionItem--
|
|
2258
|
+
.bp_accordion_module_accordionItem--c8f78[data-modern=true].bp_accordion_module_highlighted--c8f78[data-state=open] .bp_accordion_module_accordionHeaderContainer--c8f78:has(.bp_accordion_module_accordionTrigger--c8f78[data-state=open]){
|
|
1946
2259
|
border-radius:calc(var(--accordion-item-radius-expanded) - var(--accordion-item-highlight-border-width)) calc(var(--accordion-item-radius-expanded) - var(--accordion-item-highlight-border-width)) 0 0;
|
|
1947
2260
|
}
|
|
1948
2261
|
.bp_avatar_module_avatar--7018b[data-modern=false]{
|
|
@@ -2180,205 +2493,6 @@
|
|
|
2180
2493
|
[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--7018b[data-modern=true]{
|
|
2181
2494
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
|
|
2182
2495
|
}
|
|
2183
|
-
.bp_tooltip_module_content--b08a6[data-modern=false]{
|
|
2184
|
-
--tooltip-max-width:200px;
|
|
2185
|
-
--tooltip-padding:var(--space-2) var(--space-3);
|
|
2186
|
-
--tooltip-radius:var(--radius-1);
|
|
2187
|
-
--tooltip-background:var(--surface-tooltip-surface);
|
|
2188
|
-
--tooltip-background-error:var(--surface-tooltip-surface-error);
|
|
2189
|
-
--tooltip-border:var(--border-1) solid var(--surface-tooltip-surface);
|
|
2190
|
-
--tooltip-text-color:var(--text-text-on-dark);
|
|
2191
|
-
--tooltip-text-color-error:var(--text-text-on-light);
|
|
2192
|
-
--tooltip-border-error:var(--border-1) solid var(--border-tooltip-border-error);
|
|
2193
|
-
--tooltip-drop-shadow:none;
|
|
2194
|
-
--tooltip-backdrop-filter:none;
|
|
2195
|
-
font-family:var(--body-default-font-family);
|
|
2196
|
-
font-size:var(--body-default-font-size);
|
|
2197
|
-
font-weight:var(--body-default-font-weight);
|
|
2198
|
-
letter-spacing:var(--body-default-letter-spacing);
|
|
2199
|
-
line-height:var(--body-default-line-height);
|
|
2200
|
-
text-decoration:var(--body-default-text-decoration);
|
|
2201
|
-
text-transform:var(--body-default-text-case);
|
|
2202
|
-
}
|
|
2203
|
-
|
|
2204
|
-
.bp_tooltip_module_content--b08a6[data-modern=true]{
|
|
2205
|
-
--tooltip-max-width:200px;
|
|
2206
|
-
--tooltip-padding:var(--bp-space-020) var(--bp-space-030);
|
|
2207
|
-
--tooltip-radius:var(--bp-radius-04);
|
|
2208
|
-
--tooltip-background:var(--bp-surface-tooltip-surface);
|
|
2209
|
-
--tooltip-background-error:var(--bp-surface-tooltip-surface-error);
|
|
2210
|
-
--tooltip-border:var(--bp-border-01) solid var(--bp-border-tooltip-border);
|
|
2211
|
-
--tooltip-text-color:var(--bp-text-text-on-dark);
|
|
2212
|
-
--tooltip-text-color-error:var(--bp-text-text-on-light);
|
|
2213
|
-
--tooltip-border-error:var(--bp-border-01) solid var(--bp-border-tooltip-border-error);
|
|
2214
|
-
--tooltip-drop-shadow:var(--dropshadow-3);
|
|
2215
|
-
--tooltip-backdrop-filter:blur(16px);
|
|
2216
|
-
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
2217
|
-
font-size:var(--bp-font-size-05);
|
|
2218
|
-
font-style:normal;
|
|
2219
|
-
font-weight:var(--bp-font-weight-regular);
|
|
2220
|
-
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
2221
|
-
line-height:var(--bp-font-line-height-04);
|
|
2222
|
-
}
|
|
2223
|
-
|
|
2224
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open]{
|
|
2225
|
-
animation-duration:var(--bp-duration-short);
|
|
2226
|
-
animation-timing-function:var(--bp-curve-large-on);
|
|
2227
|
-
}
|
|
2228
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=top]{
|
|
2229
|
-
animation-name:bp_tooltip_module_bpTooltipTopSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
2230
|
-
}
|
|
2231
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=right]{
|
|
2232
|
-
animation-name:bp_tooltip_module_bpTooltipRightSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
2233
|
-
}
|
|
2234
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=bottom]{
|
|
2235
|
-
animation-name:bp_tooltip_module_bpTooltipBottomSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
2236
|
-
}
|
|
2237
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=delayed-open][data-side=left]{
|
|
2238
|
-
animation-name:bp_tooltip_module_bpTooltipLeftSlideEnter--b08a6, bp_tooltip_module_bpTooltipFadeIn--b08a6;
|
|
2239
|
-
}
|
|
2240
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed]{
|
|
2241
|
-
animation-duration:var(--bp-duration-short);
|
|
2242
|
-
animation-timing-function:var(--bp-curve-large-off);
|
|
2243
|
-
}
|
|
2244
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=top]{
|
|
2245
|
-
animation-name:bp_tooltip_module_bpTooltipTopSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
2246
|
-
}
|
|
2247
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=right]{
|
|
2248
|
-
animation-name:bp_tooltip_module_bpTooltipRightSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
2249
|
-
}
|
|
2250
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=bottom]{
|
|
2251
|
-
animation-name:bp_tooltip_module_bpTooltipBottomSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
2252
|
-
}
|
|
2253
|
-
.bp_tooltip_module_content--b08a6[data-bp-animated=true][data-state=closed][data-side=left]{
|
|
2254
|
-
animation-name:bp_tooltip_module_bpTooltipLeftSlideExit--b08a6, bp_tooltip_module_bpTooltipFadeOut--b08a6;
|
|
2255
|
-
}
|
|
2256
|
-
|
|
2257
|
-
.bp_tooltip_module_content--b08a6{
|
|
2258
|
-
backdrop-filter:var(--tooltip-backdrop-filter);
|
|
2259
|
-
border-radius:var(--tooltip-radius);
|
|
2260
|
-
box-shadow:var(--tooltip-drop-shadow);
|
|
2261
|
-
box-sizing:border-box;
|
|
2262
|
-
max-width:var(--tooltip-max-width);
|
|
2263
|
-
overflow-wrap:break-word;
|
|
2264
|
-
padding:var(--tooltip-padding);
|
|
2265
|
-
position:relative;
|
|
2266
|
-
z-index:2147483647;
|
|
2267
|
-
}
|
|
2268
|
-
.bp_tooltip_module_content--b08a6.bp_tooltip_module_standard--b08a6{
|
|
2269
|
-
background-color:var(--tooltip-background);
|
|
2270
|
-
border:var(--tooltip-border);
|
|
2271
|
-
color:var(--tooltip-text-color);
|
|
2272
|
-
}
|
|
2273
|
-
.bp_tooltip_module_content--b08a6.bp_tooltip_module_error--b08a6{
|
|
2274
|
-
background-color:var(--tooltip-background-error);
|
|
2275
|
-
border:var(--tooltip-border-error);
|
|
2276
|
-
color:var(--tooltip-text-color-error);
|
|
2277
|
-
}
|
|
2278
|
-
|
|
2279
|
-
.bp_tooltip_module_arrow--b08a6{
|
|
2280
|
-
border-left:8.7px solid #0000;
|
|
2281
|
-
border-right:8.7px solid #0000;
|
|
2282
|
-
border-top:8.7px solid var(--surface-tooltip-surface);
|
|
2283
|
-
display:block;
|
|
2284
|
-
height:0;
|
|
2285
|
-
width:0;
|
|
2286
|
-
}
|
|
2287
|
-
.bp_tooltip_module_arrow--b08a6.bp_tooltip_module_error--b08a6{
|
|
2288
|
-
border-top-color:var(--border-tooltip-border-error);
|
|
2289
|
-
}
|
|
2290
|
-
.bp_tooltip_module_arrow--b08a6.bp_tooltip_module_error--b08a6::after{
|
|
2291
|
-
border-left:7.7px solid #0000;
|
|
2292
|
-
border-right:7.7px solid #0000;
|
|
2293
|
-
border-top:7.7px solid var(--surface-tooltip-surface-error);
|
|
2294
|
-
content:"";
|
|
2295
|
-
height:0;
|
|
2296
|
-
left:1px;
|
|
2297
|
-
position:absolute;
|
|
2298
|
-
top:-.7px;
|
|
2299
|
-
width:0;
|
|
2300
|
-
}
|
|
2301
|
-
|
|
2302
|
-
@keyframes bp_tooltip_module_bpTooltipFadeIn--b08a6{
|
|
2303
|
-
from{
|
|
2304
|
-
opacity:var(--bp-opacity-hidden);
|
|
2305
|
-
}
|
|
2306
|
-
to{
|
|
2307
|
-
opacity:var(--bp-opacity-visible);
|
|
2308
|
-
}
|
|
2309
|
-
}
|
|
2310
|
-
@keyframes bp_tooltip_module_bpTooltipFadeOut--b08a6{
|
|
2311
|
-
from{
|
|
2312
|
-
opacity:var(--bp-opacity-visible);
|
|
2313
|
-
}
|
|
2314
|
-
to{
|
|
2315
|
-
opacity:var(--bp-opacity-hidden);
|
|
2316
|
-
}
|
|
2317
|
-
}
|
|
2318
|
-
@keyframes bp_tooltip_module_bpTooltipTopSlideEnter--b08a6{
|
|
2319
|
-
from{
|
|
2320
|
-
transform:translateY(var(--bp-space-010));
|
|
2321
|
-
}
|
|
2322
|
-
to{
|
|
2323
|
-
transform:translateY(0);
|
|
2324
|
-
}
|
|
2325
|
-
}
|
|
2326
|
-
@keyframes bp_tooltip_module_bpTooltipTopSlideExit--b08a6{
|
|
2327
|
-
from{
|
|
2328
|
-
transform:translateY(0);
|
|
2329
|
-
}
|
|
2330
|
-
to{
|
|
2331
|
-
transform:translateY(var(--bp-space-010));
|
|
2332
|
-
}
|
|
2333
|
-
}
|
|
2334
|
-
@keyframes bp_tooltip_module_bpTooltipBottomSlideEnter--b08a6{
|
|
2335
|
-
from{
|
|
2336
|
-
transform:translateY(calc(var(--bp-space-010)*-1));
|
|
2337
|
-
}
|
|
2338
|
-
to{
|
|
2339
|
-
transform:translateY(0);
|
|
2340
|
-
}
|
|
2341
|
-
}
|
|
2342
|
-
@keyframes bp_tooltip_module_bpTooltipBottomSlideExit--b08a6{
|
|
2343
|
-
from{
|
|
2344
|
-
transform:translateY(0);
|
|
2345
|
-
}
|
|
2346
|
-
to{
|
|
2347
|
-
transform:translateY(calc(var(--bp-space-010)*-1));
|
|
2348
|
-
}
|
|
2349
|
-
}
|
|
2350
|
-
@keyframes bp_tooltip_module_bpTooltipRightSlideEnter--b08a6{
|
|
2351
|
-
from{
|
|
2352
|
-
transform:translateX(calc(var(--bp-space-010)*-1));
|
|
2353
|
-
}
|
|
2354
|
-
to{
|
|
2355
|
-
transform:translateX(0);
|
|
2356
|
-
}
|
|
2357
|
-
}
|
|
2358
|
-
@keyframes bp_tooltip_module_bpTooltipRightSlideExit--b08a6{
|
|
2359
|
-
from{
|
|
2360
|
-
transform:translateX(0);
|
|
2361
|
-
}
|
|
2362
|
-
to{
|
|
2363
|
-
transform:translateX(calc(var(--bp-space-010)*-1));
|
|
2364
|
-
}
|
|
2365
|
-
}
|
|
2366
|
-
@keyframes bp_tooltip_module_bpTooltipLeftSlideEnter--b08a6{
|
|
2367
|
-
from{
|
|
2368
|
-
transform:translateX(var(--bp-space-010));
|
|
2369
|
-
}
|
|
2370
|
-
to{
|
|
2371
|
-
transform:translateX(0);
|
|
2372
|
-
}
|
|
2373
|
-
}
|
|
2374
|
-
@keyframes bp_tooltip_module_bpTooltipLeftSlideExit--b08a6{
|
|
2375
|
-
from{
|
|
2376
|
-
transform:translateX(0);
|
|
2377
|
-
}
|
|
2378
|
-
to{
|
|
2379
|
-
transform:translateX(var(--bp-space-010));
|
|
2380
|
-
}
|
|
2381
|
-
}
|
|
2382
2496
|
.bp_base_badge_module_badgeContainer--15c80{
|
|
2383
2497
|
display:inline-flex;
|
|
2384
2498
|
position:relative;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.32.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.119.3",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.19.
|
|
80
|
+
"@box/storybook-utils": "^0.19.12",
|
|
81
81
|
"@figma/code-connect": "1.4.4",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|