@box/blueprint-web 12.101.0 → 12.103.0
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/actionable-inline-notice/types.d.ts +1 -1
- package/dist/lib-esm/breadcrumb/breadcrumb.js +70 -71
- package/dist/lib-esm/breadcrumb/types.d.ts +5 -0
- package/dist/lib-esm/index.css +55 -27
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ export type ActionableInlineNoticeProps = {
|
|
|
5
5
|
/** Governs background color for inline notice
|
|
6
6
|
* @default backgroundBlue
|
|
7
7
|
*/
|
|
8
|
-
backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple'>;
|
|
8
|
+
backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple' | 'backgroundRed'>;
|
|
9
9
|
/** Text for the body of the inline notice */
|
|
10
10
|
text: string;
|
|
11
11
|
/** Optional children buttons for the inline notice CTA. Specify either PrimaryAction OR both TertiaryAction and PrimaryAction. */
|
|
@@ -13,6 +13,7 @@ import { getSeparatorSize } from './utils.js';
|
|
|
13
13
|
|
|
14
14
|
const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
15
15
|
const {
|
|
16
|
+
breadcrumbAriaLabel,
|
|
16
17
|
crumbs,
|
|
17
18
|
truncatedLinksIconAriaLabel,
|
|
18
19
|
rootIconAriaLabel,
|
|
@@ -29,84 +30,82 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
29
30
|
// If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
|
|
30
31
|
const shouldTruncateCrumbs = crumbs?.length > 7;
|
|
31
32
|
const shouldUseEllipsisTruncation = truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
|
|
32
|
-
return (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
return jsx("nav", {
|
|
34
|
+
ref: forwardedRef,
|
|
35
|
+
"aria-label": breadcrumbAriaLabel,
|
|
36
|
+
className: styles.container,
|
|
37
|
+
...rest,
|
|
38
|
+
children: jsxs("ol", {
|
|
39
|
+
className: styles.breadcrumb,
|
|
40
|
+
children: [rootIconVariant && jsxs("li", {
|
|
41
|
+
className: styles.pageLink,
|
|
42
|
+
children: [rootIconVariant === 'home' ? jsx(Home, {
|
|
43
|
+
"aria-label": rootIconAriaLabel
|
|
44
|
+
}) : jsx(FolderTree, {
|
|
45
|
+
"aria-label": rootIconAriaLabel
|
|
46
|
+
}), rootIconVariant && jsx(PointerRight, {
|
|
47
|
+
height: getSeparatorSize(size),
|
|
48
|
+
role: "presentation",
|
|
49
|
+
width: getSeparatorSize(size)
|
|
50
|
+
})]
|
|
51
|
+
}), shouldUseEllipsisTruncation && jsxs(Fragment, {
|
|
52
|
+
children: [jsx(PageLink, {
|
|
53
|
+
crumb: crumbs[0],
|
|
54
|
+
isInteractive: isInteractive,
|
|
55
|
+
isLast: false,
|
|
56
|
+
onPageLinkClick: onPageLinkClick,
|
|
57
|
+
size: size
|
|
58
|
+
}), jsxs("li", {
|
|
41
59
|
className: styles.pageLink,
|
|
42
|
-
children: [
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
60
|
+
children: [jsxs(DropdownMenu.Root, {
|
|
61
|
+
children: [jsx(DropdownMenu.Trigger, {
|
|
62
|
+
children: jsx(IconButton, {
|
|
63
|
+
"aria-label": truncatedLinksIconAriaLabel,
|
|
64
|
+
className: styles.iconButtonInline,
|
|
65
|
+
icon: Ellipsis,
|
|
66
|
+
size: "small"
|
|
67
|
+
})
|
|
68
|
+
}), jsx(DropdownMenu.Content, {
|
|
69
|
+
align: "start",
|
|
70
|
+
children: crumbs.slice(1, crumbs.length - 2).map(crumb => {
|
|
71
|
+
return jsx(DropdownMenu.Item, {
|
|
72
|
+
onSelect: handlePageLinkClick(crumb.id),
|
|
73
|
+
children: jsx(Text, {
|
|
74
|
+
as: "span",
|
|
75
|
+
children: crumb.name
|
|
76
|
+
})
|
|
77
|
+
}, crumb.id);
|
|
78
|
+
})
|
|
79
|
+
})]
|
|
80
|
+
}), jsx(PointerRight, {
|
|
47
81
|
height: getSeparatorSize(size),
|
|
48
82
|
role: "presentation",
|
|
49
83
|
width: getSeparatorSize(size)
|
|
50
84
|
})]
|
|
51
|
-
}),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"aria-label": truncatedLinksIconAriaLabel,
|
|
64
|
-
className: styles.iconButtonInline,
|
|
65
|
-
icon: Ellipsis,
|
|
66
|
-
size: "small"
|
|
67
|
-
})
|
|
68
|
-
}), jsx(DropdownMenu.Content, {
|
|
69
|
-
align: "start",
|
|
70
|
-
children: crumbs.slice(1, crumbs.length - 2).map(crumb => {
|
|
71
|
-
return jsx(DropdownMenu.Item, {
|
|
72
|
-
onSelect: handlePageLinkClick(crumb.id),
|
|
73
|
-
children: jsx(Text, {
|
|
74
|
-
as: "span",
|
|
75
|
-
children: crumb.name
|
|
76
|
-
})
|
|
77
|
-
}, crumb.id);
|
|
78
|
-
})
|
|
79
|
-
})]
|
|
80
|
-
}), jsx(PointerRight, {
|
|
81
|
-
height: getSeparatorSize(size),
|
|
82
|
-
role: "presentation",
|
|
83
|
-
width: getSeparatorSize(size)
|
|
84
|
-
})]
|
|
85
|
-
}), jsx(PageLink, {
|
|
86
|
-
crumb: crumbs[crumbs.length - 2],
|
|
87
|
-
isInteractive: isInteractive,
|
|
88
|
-
isLast: false,
|
|
89
|
-
onPageLinkClick: onPageLinkClick,
|
|
90
|
-
size: size
|
|
91
|
-
}), jsx(PageLink, {
|
|
92
|
-
crumb: crumbs[crumbs.length - 1],
|
|
93
|
-
isInteractive: isInteractive,
|
|
94
|
-
isLast: true,
|
|
95
|
-
onPageLinkClick: onPageLinkClick,
|
|
96
|
-
size: size
|
|
97
|
-
})]
|
|
98
|
-
}), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
|
|
99
|
-
return jsx(PageLink, {
|
|
100
|
-
crumb: crumb,
|
|
101
|
-
isInteractive: isInteractive,
|
|
102
|
-
isLast: index === crumbs.length - 1,
|
|
103
|
-
onPageLinkClick: onPageLinkClick,
|
|
104
|
-
size: size
|
|
105
|
-
}, crumb.id);
|
|
85
|
+
}), jsx(PageLink, {
|
|
86
|
+
crumb: crumbs[crumbs.length - 2],
|
|
87
|
+
isInteractive: isInteractive,
|
|
88
|
+
isLast: false,
|
|
89
|
+
onPageLinkClick: onPageLinkClick,
|
|
90
|
+
size: size
|
|
91
|
+
}), jsx(PageLink, {
|
|
92
|
+
crumb: crumbs[crumbs.length - 1],
|
|
93
|
+
isInteractive: isInteractive,
|
|
94
|
+
isLast: true,
|
|
95
|
+
onPageLinkClick: onPageLinkClick,
|
|
96
|
+
size: size
|
|
106
97
|
})]
|
|
107
|
-
})
|
|
98
|
+
}), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
|
|
99
|
+
return jsx(PageLink, {
|
|
100
|
+
crumb: crumb,
|
|
101
|
+
isInteractive: isInteractive,
|
|
102
|
+
isLast: index === crumbs.length - 1,
|
|
103
|
+
onPageLinkClick: onPageLinkClick,
|
|
104
|
+
size: size
|
|
105
|
+
}, crumb.id);
|
|
106
|
+
})]
|
|
108
107
|
})
|
|
109
|
-
);
|
|
108
|
+
});
|
|
110
109
|
});
|
|
111
110
|
Breadcrumb.displayName = 'Breadcrumb';
|
|
112
111
|
|
|
@@ -6,6 +6,11 @@ export type Crumb = {
|
|
|
6
6
|
name: string;
|
|
7
7
|
};
|
|
8
8
|
export type BreadcrumbProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Aria label for the breadcrumb navigation element.
|
|
11
|
+
* Suggested value: "Breadcrumb". Consumers can localize or modify this value as needed for their use case.
|
|
12
|
+
*/
|
|
13
|
+
breadcrumbAriaLabel: string;
|
|
9
14
|
/** Array of breadcrumb items to display. */
|
|
10
15
|
crumbs: Crumb[];
|
|
11
16
|
/** Controls whether individual crumbs (items) and icons are interactive, or clickable. */
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
background-color:var(--ghost-background-color);
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
52
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=false]{
|
|
53
53
|
--notice-radius:var(--radius-2);
|
|
54
54
|
--notice-gap:var(--space-3);
|
|
55
55
|
--notice-padding-block:var(--space-3);
|
|
@@ -66,11 +66,15 @@
|
|
|
66
66
|
--notice-btn-surface-promo-focus:var(--surface-cta-surface-promo-focus);
|
|
67
67
|
--notice-btn-surface-promo-hover:var(--surface-cta-surface-promo-hover);
|
|
68
68
|
--notice-btn-surface-promo-focus-pressed:var(--surface-cta-surface-promo-focus-pressed);
|
|
69
|
+
--notice-btn-text-error:var(--text-text-error-on-light);
|
|
70
|
+
--notice-btn-surface-error:var(--watermelon-red-110);
|
|
71
|
+
--notice-btn-surface-error-hover:var(--watermelon-red-100);
|
|
72
|
+
--notice-btn-surface-error-pressed:var(--watermelon-red-120);
|
|
69
73
|
--notice-content-text-color:var(--text-text-on-light);
|
|
70
74
|
--notice-content-align:center;
|
|
71
75
|
--notice-icon-padding-top:0;
|
|
72
76
|
}
|
|
73
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
77
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=false] .bp_base_inline_notice_module_content--ee8cc{
|
|
74
78
|
font-family:var(--body-default-font-family);
|
|
75
79
|
font-size:var(--body-default-font-size);
|
|
76
80
|
font-weight:var(--body-default-font-weight);
|
|
@@ -80,7 +84,7 @@
|
|
|
80
84
|
text-decoration:var(--body-default-text-decoration);
|
|
81
85
|
text-transform:var(--body-default-text-case);
|
|
82
86
|
}
|
|
83
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
87
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=false] .bp_base_inline_notice_module_title--ee8cc{
|
|
84
88
|
font-family:var(--body-default-bold-font-family);
|
|
85
89
|
font-size:var(--body-default-bold-font-size);
|
|
86
90
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -91,7 +95,7 @@
|
|
|
91
95
|
text-transform:var(--body-default-bold-text-case);
|
|
92
96
|
}
|
|
93
97
|
|
|
94
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
98
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true]{
|
|
95
99
|
--notice-radius:var(--bp-radius-10);
|
|
96
100
|
--notice-gap:var(--bp-space-030);
|
|
97
101
|
--notice-padding-block:var(--bp-space-030);
|
|
@@ -108,95 +112,119 @@
|
|
|
108
112
|
--notice-btn-surface-promo-focus:var(--bp-surface-cta-surface-promo-focus);
|
|
109
113
|
--notice-btn-surface-promo-hover:var(--bp-surface-cta-surface-promo-hover);
|
|
110
114
|
--notice-btn-surface-promo-focus-pressed:var(--bp-surface-cta-surface-promo-focus-pressed);
|
|
115
|
+
--notice-btn-text-error:var(--bp-text-text-error-on-light);
|
|
116
|
+
--notice-btn-surface-error:var(--bp-watermelon-red-110);
|
|
117
|
+
--notice-btn-surface-error-hover:var(--bp-watermelon-red-100);
|
|
118
|
+
--notice-btn-surface-error-pressed:var(--bp-watermelon-red-120);
|
|
111
119
|
--notice-content-text-color:var(--bp-text-text-on-light);
|
|
112
120
|
--notice-content-align:top;
|
|
113
121
|
--notice-icon-padding-top:var(--bp-space-005);
|
|
114
122
|
}
|
|
115
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
123
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_content--ee8cc{
|
|
116
124
|
font-weight:var(--bp-font-weight-regular);
|
|
117
125
|
}
|
|
118
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
126
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_content--ee8cc,.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_title--ee8cc{
|
|
119
127
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
120
128
|
font-size:var(--bp-font-size-05);
|
|
121
129
|
font-style:normal;
|
|
122
130
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
123
131
|
line-height:var(--bp-font-line-height-04);
|
|
124
132
|
}
|
|
125
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
133
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_title--ee8cc{
|
|
126
134
|
font-weight:var(--bp-font-weight-bold);
|
|
127
135
|
}
|
|
128
136
|
|
|
129
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
137
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc{
|
|
130
138
|
border-radius:var(--notice-radius);
|
|
131
139
|
display:flex;
|
|
132
140
|
gap:var(--notice-gap);
|
|
133
141
|
justify-content:space-between;
|
|
134
142
|
padding:var(--notice-padding-block) var(--notice-padding-inline);
|
|
135
143
|
}
|
|
136
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
144
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_actions--ee8cc{
|
|
137
145
|
align-self:center;
|
|
138
146
|
display:flex;
|
|
139
147
|
gap:var(--notice-gap);
|
|
140
148
|
justify-content:flex-end;
|
|
141
149
|
}
|
|
142
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
150
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundYellow--ee8cc{
|
|
143
151
|
background:var(--notice-surface-warning);
|
|
144
152
|
}
|
|
145
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
153
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundBlue--ee8cc{
|
|
146
154
|
background:var(--notice-surface-info);
|
|
147
155
|
}
|
|
148
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
156
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc{
|
|
149
157
|
background:var(--notice-surface-error);
|
|
150
158
|
}
|
|
151
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
159
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonTertiary--ee8cc{
|
|
160
|
+
color:var(--notice-btn-text-error);
|
|
161
|
+
}
|
|
162
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc{
|
|
163
|
+
background:var(--notice-btn-surface-error);
|
|
164
|
+
border-color:var(--notice-btn-surface-error);
|
|
165
|
+
}
|
|
166
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:active{
|
|
167
|
+
background:var(--notice-btn-surface-error-pressed);
|
|
168
|
+
}
|
|
169
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc[data-focus-visible]{
|
|
170
|
+
background:var(--notice-btn-surface-error-hover);
|
|
171
|
+
}
|
|
172
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover{
|
|
173
|
+
background:var(--notice-btn-surface-error-hover);
|
|
174
|
+
border-color:var(--notice-btn-surface-error-hover);
|
|
175
|
+
}
|
|
176
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:focus:active,.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover:active{
|
|
177
|
+
background:var(--notice-btn-surface-error-pressed);
|
|
178
|
+
}
|
|
179
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundGreen--ee8cc{
|
|
152
180
|
background:var(--notice-surface-success);
|
|
153
181
|
}
|
|
154
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
182
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc{
|
|
155
183
|
background:var(--notice-surface-promo);
|
|
156
184
|
}
|
|
157
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
185
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonTertiary--ee8cc{
|
|
158
186
|
color:var(--notice-btn-text-promo);
|
|
159
187
|
}
|
|
160
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
188
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc{
|
|
161
189
|
background:var(--notice-btn-surface-promo);
|
|
162
190
|
border-color:var(--notice-btn-surface-promo);
|
|
163
191
|
}
|
|
164
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
192
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:active{
|
|
165
193
|
background:var(--notice-btn-surface-promo-pressed);
|
|
166
194
|
}
|
|
167
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
195
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc[data-focus-visible]{
|
|
168
196
|
background:var(--notice-btn-surface-promo-focus);
|
|
169
197
|
}
|
|
170
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
198
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover{
|
|
171
199
|
background:var(--notice-btn-surface-promo-hover);
|
|
172
200
|
border-color:var(--notice-btn-surface-promo-hover);
|
|
173
201
|
}
|
|
174
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
202
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:focus:active{
|
|
175
203
|
background:var(--notice-btn-surface-promo-focus-pressed);
|
|
176
204
|
}
|
|
177
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
205
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover:active{
|
|
178
206
|
background:var(--notice-btn-surface-promo-pressed);
|
|
179
207
|
}
|
|
180
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
208
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_contentContainer--ee8cc{
|
|
181
209
|
align-items:var(--notice-content-align);
|
|
182
210
|
display:flex;
|
|
183
211
|
gap:var(--notice-gap);
|
|
184
212
|
}
|
|
185
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
213
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_content--ee8cc{
|
|
186
214
|
color:var(--notice-content-text-color);
|
|
187
215
|
}
|
|
188
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
216
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_icon--ee8cc{
|
|
189
217
|
padding-top:var(--notice-icon-padding-top);
|
|
190
218
|
}
|
|
191
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
219
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc svg{
|
|
192
220
|
display:block;
|
|
193
221
|
}
|
|
194
222
|
|
|
195
223
|
@media (max-width: 1023px){
|
|
196
|
-
.bp_base_inline_notice_module_actions--
|
|
224
|
+
.bp_base_inline_notice_module_actions--ee8cc{
|
|
197
225
|
margin-top:var(--notice-space-3);
|
|
198
226
|
}
|
|
199
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
227
|
+
.bp_base_inline_notice_module_noticeWrapper--ee8cc{
|
|
200
228
|
display:block;
|
|
201
229
|
}
|
|
202
230
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--
|
|
2
|
+
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--ee8cc","content":"bp_base_inline_notice_module_content--ee8cc","title":"bp_base_inline_notice_module_title--ee8cc","actions":"bp_base_inline_notice_module_actions--ee8cc","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--ee8cc","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--ee8cc","backgroundRed":"bp_base_inline_notice_module_backgroundRed--ee8cc","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--ee8cc","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--ee8cc","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--ee8cc","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--ee8cc","contentContainer":"bp_base_inline_notice_module_contentContainer--ee8cc","icon":"bp_base_inline_notice_module_icon--ee8cc"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|