@box/blueprint-web 14.31.1 → 14.32.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.
@@ -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: [startElement && jsx("span", {
48
- className: styles.accordionStartElement,
49
- children: startElement
50
- }), jsx("span", {
51
- children: title
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
- title: title,
121
- startElement: startElement
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--4551e","accordionContent":"bp_accordion_module_accordionContent--4551e","accordionContentLayout":"bp_accordion_module_accordionContentLayout--4551e","accordion":"bp_accordion_module_accordion--4551e","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--4551e","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--4551e","highlighted":"bp_accordion_module_highlighted--4551e","accordionFixedContent":"bp_accordion_module_accordionFixedContent--4551e","accordionHeader":"bp_accordion_module_accordionHeader--4551e","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--4551e","accordionStartElement":"bp_accordion_module_accordionStartElement--4551e","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--4551e","accordionSlot":"bp_accordion_module_accordionSlot--4551e","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--4551e","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--4551e","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--4551e","bgOnly":"bp_accordion_module_bgOnly--4551e","withIcon":"bp_accordion_module_withIcon--4551e","accordionTrigger":"bp_accordion_module_accordionTrigger--4551e","disabled":"bp_accordion_module_disabled--4551e","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--4551e"};
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 `action`.
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
- * Element displayed to the left of the title.
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
- startElement?: React.ReactNode;
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 {};
@@ -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
- .bp_accordion_module_accordionItem--4551e[data-modern=false]{
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--4551e[data-modern=true]{
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-accordion-surface-collapsed);
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-040);
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-060);
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:none;
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-accordion-surface-collapsed);
1650
- --accordion-trigger-collapsed-background-hover:var(--bp-surface-accordion-surface-collapsed-hover);
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-accordion-surface-collapsed-hover);
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--4551e[data-state=open]{
1667
- animation:bp_accordion_module_slideDown--4551e .15s ease-out;
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--4551e[data-state=closed]{
1671
- animation:bp_accordion_module_slideUp--4551e .15s ease-out;
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--4551e{
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--4551e[data-state=closed] .bp_accordion_module_accordionContentLayout--4551e{
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--4551e[data-state=open] .bp_accordion_module_accordionContentLayout--4551e{
1690
- animation:bp_accordion_module_enableAccordionScroll--4551e .15s step-end forwards;
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--4551e{
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--4551e[hidden]{
1901
+ .bp_accordion_module_accordionContent--c8f78[hidden]{
1701
1902
  display:none;
1702
1903
  }
1703
1904
 
1704
- @keyframes bp_accordion_module_slideDown--4551e{
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--4551e{
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--4551e{
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--4551e{
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--4551e{
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--4551e{
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--4551e{
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--4551e[data-state=open]{
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--4551e[data-modern=true].bp_accordion_module_highlighted--4551e{
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--4551e[data-modern=true].bp_accordion_module_highlighted--4551e[data-state=open]{
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--4551e{
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--4551e{
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--4551e{
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
- .bp_accordion_module_accordionStartElement--4551e{
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--4551e{
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--4551e[data-modern=false] .bp_accordion_module_accordionHeader--4551e{
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--4551e[data-modern=true] .bp_accordion_module_accordionHeader--4551e{
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--4551e{
2139
+ .bp_accordion_module_accordionSlot--c8f78{
1835
2140
  align-items:center;
1836
2141
  display:flex;
1837
2142
  }
1838
2143
 
1839
- .bp_accordion_module_accordionChevronWrapper--4551e{
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--4551e .bp_accordion_module_accordionTriggerIcon--4551e{
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--4551e[data-modern=true] .bp_accordion_module_accordionChevronWrapper--4551e{
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--4551e[data-state=open] .bp_accordion_module_accordionChevronWrapper--4551e .bp_accordion_module_accordionTriggerIcon--4551e{
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--4551e{
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--4551e.bp_accordion_module_bgOnly--4551e{
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--4551e.bp_accordion_module_withIcon--4551e{
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--4551e{
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--4551e.bp_accordion_module_disabled--4551e,.bp_accordion_module_accordionTrigger--4551e:disabled{
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--4551e:focus-visible{
2197
+ .bp_accordion_module_accordionTrigger--c8f78:focus-visible{
1892
2198
  outline:none;
1893
2199
  }
1894
- .bp_accordion_module_accordionTrigger--4551e:hover:not(:disabled, .bp_accordion_module_disabled--4551e){
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--4551e{
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--4551e:has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e),.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e:disabled){
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--4551e:has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e) > .bp_accordion_module_accordionChevronWrapper--4551e,.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e:disabled) > .bp_accordion_module_accordionChevronWrapper--4551e{
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--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]){
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--4551e:has(.bp_accordion_module_accordionTrigger--4551e:focus-visible){
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--4551e:hover:not(:has(.bp_accordion_module_accordionTrigger--4551e:disabled), :has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e)){
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--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]):has(.bp_accordion_module_accordionTrigger--4551e:focus-visible){
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--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--4551e:disabled),
1940
- :has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e)){
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--4551e[data-modern=true].bp_accordion_module_highlighted--4551e[data-state=open] .bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]){
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "14.31.1",
3
+ "version": "14.32.1",
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.118.4",
50
+ "@box/blueprint-web-assets": "^4.119.2",
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.8",
80
+ "@box/storybook-utils": "^0.19.11",
81
81
  "@figma/code-connect": "1.4.4",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",