@box/blueprint-web 12.78.6 → 12.79.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.
Files changed (8) hide show
  1. package/dist/lib-esm/collapsible/collapsible-section.js +10 -4
  2. package/dist/lib-esm/collapsible/collapsible-section.module.js +1 -1
  3. package/dist/lib-esm/index.css +243 -139
  4. package/dist/lib-esm/list-item/index.js +1 -0
  5. package/dist/lib-esm/list-item/main.module.js +1 -1
  6. package/dist/lib-esm/list-item/table-column.js +19 -6
  7. package/dist/lib-esm/list-item/table.js +5 -0
  8. package/package.json +1 -1
package/dist/lib-esm/collapsible/collapsible-section.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { PointerChevronUp, PointerChevronDown } from '@box/blueprint-web-assets/icons/Fill';
3
+ import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
3
4
  import * as Collapsible from '@radix-ui/react-collapsible';
4
5
  import clsx from 'clsx';
5
- import { forwardRef, useState, useEffect, useCallback } from 'react';
6
+ import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
7
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
8
  import { IconButton } from '../primitives/icon-button/icon-button.js';
7
9
  import { Slot } from '../primitives/slot.js';
8
10
  import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
9
11
  import styles from './collapsible-section.module.js';
10
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
11
12
 
12
13
  const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
13
14
  const {
@@ -31,6 +32,11 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
31
32
  setCollapsibleSectionOpen(isOpen);
32
33
  onOpenChange?.(isOpen);
33
34
  }, [onOpenChange]);
35
+ const icon = useMemo(() => ({
36
+ up: enableModernizedComponents ? ChevronUp : PointerChevronUp,
37
+ down: enableModernizedComponents ? ChevronDown : PointerChevronDown,
38
+ size: enableModernizedComponents ? 'large' : 'x-small'
39
+ }), [enableModernizedComponents]);
34
40
  return jsxs(Collapsible.Root, {
35
41
  ...rest,
36
42
  ref: forwardedRef,
@@ -46,8 +52,8 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
46
52
  children: [headerSlot?.props.children, jsx(IconButton, {
47
53
  "aria-label": collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel,
48
54
  className: styles.collapsibleSectionHeaderArrow,
49
- icon: collapsibleSectionOpen ? PointerChevronUp : PointerChevronDown,
50
- size: "x-small",
55
+ icon: collapsibleSectionOpen ? icon.up : icon.down,
56
+ size: icon.size,
51
57
  type: "button"
52
58
  })]
53
59
  })
package/dist/lib-esm/collapsible/collapsible-section.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--d6e7f","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--d6e7f","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--d6e7f","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--d6e7f","slideDown":"bp_collapsible_section_module_slideDown--d6e7f","slideUp":"bp_collapsible_section_module_slideUp--d6e7f","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--d6e7f"};
2
+ var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--35a18","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--35a18","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--35a18","slideDown":"bp_collapsible_section_module_slideDown--35a18","slideUp":"bp_collapsible_section_module_slideUp--35a18","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--35a18"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -2051,36 +2051,40 @@
2051
2051
  height:var(--icon-button-size-x-small);
2052
2052
  width:var(--icon-button-size-x-small);
2053
2053
  }
2054
- .bp_collapsible_section_module_collapsibleSection--d6e7f[data-modern=false]{
2054
+ .bp_collapsible_section_module_collapsibleSection--35a18[data-modern=false]{
2055
+ --collapsible-section-header-padding:var(--space-5);
2056
+ --collapsible-section-body-padding:var(--space-5);
2055
2057
  --collapsible-section-padding:var(--space-5);
2056
2058
  --collapsible-section-border-radius:var(--radius-3);
2057
2059
  --collapsible-section-outline-border-radius:var(--radius-2);
2058
- --collapsible-section-background-color:var(--surface-surface);
2059
2060
  --collapsible-section-border:var(--border-1) solid var(--border-collapsible-border);
2060
2061
  --collapsible-section-outline-width:var(--border-2);
2061
2062
  --collapsible-section-outline-offset:var(--space-05);
2062
2063
  --collapsible-section-header-focus-color:var(--outline-focus-on-light);
2063
2064
  --collapsible-section-header-background-color:var(--surface-surface);
2064
2065
  --collapsible-section-content-background-color:var(--surface-surface);
2066
+ --collapsible-section-header-expanded-border-bottom:var(--border-1) solid var(--border-collapsible-border);
2065
2067
  }
2066
2068
 
2067
- .bp_collapsible_section_module_collapsibleSection--d6e7f[data-modern=true]{
2069
+ .bp_collapsible_section_module_collapsibleSection--35a18[data-modern=true]{
2070
+ --collapsible-section-header-padding:var(--bp-space-050) var(--bp-space-020);
2071
+ --collapsible-section-body-padding:var(--bp-space-040) var(--bp-space-050);
2068
2072
  --collapsible-section-padding:var(--bp-space-050);
2069
2073
  --collapsible-section-border-radius:var(--bp-radius-10);
2070
2074
  --collapsible-section-outline-border-radius:var(--bp-radius-03);
2071
- --collapsible-section-background-color:var(--bp-surface-surface);
2072
2075
  --collapsible-section-border:var(--bp-border-01) solid var(--bp-border-collapsible-section-border);
2073
2076
  --collapsible-section-outline-width:var(--bp-border-02);
2074
2077
  --collapsible-section-outline-offset:var(--bp-space-005);
2075
2078
  --collapsible-section-header-focus-color:var(--bp-outline-focus-on-light);
2076
- --collapsible-section-header-background-color:var(--bp-surface-surface);
2077
- --collapsible-section-content-background-color:var(--bp-surface-surface);
2079
+ --collapsible-section-header-background-color:var(--bp-surface-collapsible-section-surface);
2080
+ --collapsible-section-content-background-color:var(--bp-surface-collapsible-section-surface);
2081
+ --collapsible-section-header-expanded-border-bottom:none;
2078
2082
  }
2079
2083
 
2080
- .bp_collapsible_section_module_collapsibleSection--d6e7f{
2084
+ .bp_collapsible_section_module_collapsibleSection--35a18{
2081
2085
  width:100%;
2082
2086
  }
2083
- .bp_collapsible_section_module_collapsibleSectionHeader--d6e7f{
2087
+ .bp_collapsible_section_module_collapsibleSectionHeader--35a18{
2084
2088
  align-items:center;
2085
2089
  background:var(--collapsible-section-header-background-color);
2086
2090
  border:var(--collapsible-section-border);
@@ -2097,7 +2101,7 @@
2097
2101
  user-select:none;
2098
2102
  width:100%;
2099
2103
  }
2100
- .bp_collapsible_section_module_collapsibleSectionHeader--d6e7f:focus::before{
2104
+ .bp_collapsible_section_module_collapsibleSectionHeader--35a18:focus::before{
2101
2105
  border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
2102
2106
  border-radius:var(--collapsible-section-outline-border-radius);
2103
2107
  bottom:var(--collapsible-section-outline-offset);
@@ -2107,27 +2111,29 @@
2107
2111
  right:var(--collapsible-section-outline-offset);
2108
2112
  top:var(--collapsible-section-outline-offset);
2109
2113
  }
2110
- .bp_collapsible_section_module_collapsibleSectionHeader--d6e7f[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--d6e7f[aria-expanded=true]::before{
2114
+ .bp_collapsible_section_module_collapsibleSectionHeader--35a18[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--35a18[aria-expanded=true]::before{
2115
+ border-bottom:var(--collapsible-section-header-expanded-border-bottom);
2111
2116
  border-end-end-radius:0;
2112
2117
  border-end-start-radius:0;
2118
+ padding-block:var(--collapsible-section-header-padding);
2113
2119
  }
2114
- .bp_collapsible_section_module_collapsibleSectionHeaderArrow--d6e7f{
2120
+ .bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18{
2115
2121
  display:block;
2116
2122
  margin-inline-start:var(--collapsible-section-padding);
2117
2123
  }
2118
- .bp_collapsible_section_module_collapsibleSectionHeaderArrow--d6e7f > svg{
2124
+ .bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18 > svg{
2119
2125
  vertical-align:middle;
2120
2126
  }
2121
- .bp_collapsible_section_module_collapsibleSectionContent--d6e7f{
2127
+ .bp_collapsible_section_module_collapsibleSectionContent--35a18{
2122
2128
  overflow:hidden;
2123
2129
  }
2124
- .bp_collapsible_section_module_collapsibleSectionContent--d6e7f[data-state=open]{
2125
- animation:bp_collapsible_section_module_slideDown--d6e7f .25s ease-out;
2130
+ .bp_collapsible_section_module_collapsibleSectionContent--35a18[data-state=open]{
2131
+ animation:bp_collapsible_section_module_slideDown--35a18 .25s ease-out;
2126
2132
  }
2127
- .bp_collapsible_section_module_collapsibleSectionContent--d6e7f[data-state=closed]{
2128
- animation:bp_collapsible_section_module_slideUp--d6e7f .25s ease-out;
2133
+ .bp_collapsible_section_module_collapsibleSectionContent--35a18[data-state=closed]{
2134
+ animation:bp_collapsible_section_module_slideUp--35a18 .25s ease-out;
2129
2135
  }
2130
- .bp_collapsible_section_module_collapsibleSectionBody--d6e7f{
2136
+ .bp_collapsible_section_module_collapsibleSectionBody--35a18{
2131
2137
  align-items:center;
2132
2138
  background:var(--collapsible-section-content-background-color);
2133
2139
  border:var(--collapsible-section-border);
@@ -2136,11 +2142,11 @@
2136
2142
  border-top:none;
2137
2143
  display:flex;
2138
2144
  justify-content:space-between;
2139
- padding-block:var(--collapsible-section-padding);
2145
+ padding-block:var(--collapsible-section-body-padding);
2140
2146
  padding-inline:var(--collapsible-section-padding);
2141
2147
  }
2142
2148
 
2143
- @keyframes bp_collapsible_section_module_slideDown--d6e7f{
2149
+ @keyframes bp_collapsible_section_module_slideDown--35a18{
2144
2150
  from{
2145
2151
  height:0;
2146
2152
  }
@@ -2148,7 +2154,7 @@
2148
2154
  height:var(--radix-collapsible-content-height);
2149
2155
  }
2150
2156
  }
2151
- @keyframes bp_collapsible_section_module_slideUp--d6e7f{
2157
+ @keyframes bp_collapsible_section_module_slideUp--35a18{
2152
2158
  from{
2153
2159
  height:var(--radix-collapsible-content-height);
2154
2160
  }
@@ -3773,34 +3779,127 @@
3773
3779
  .bp_list_checkbox_module_checkbox--98dc1[data-disabled]{
3774
3780
  opacity:var(--checkbox-disabled-opacity);
3775
3781
  }
3776
- .bp_main_module_tableSortingContainer--cc705{
3782
+ .bp_main_module_tableSortingContainer--ceed4{
3777
3783
  display:flex;
3778
3784
  flex-direction:column;
3779
3785
  min-width:100%;
3780
3786
  }
3781
3787
 
3782
- .bp_main_module_resizableTableContainer--cc705{
3788
+ .bp_main_module_resizableTableContainer--ceed4{
3783
3789
  min-width:100%;
3784
3790
  }
3785
- .bp_main_module_resizableTableContainer--cc705 table{
3786
- --item-background:var(--background-background);
3787
- --outline-offset-focus-row:-.25rem;
3788
- --outline-offset-focus-cell:-.1875rem;
3789
- --outline-offset-focus-header:var(--space-1);
3791
+ .bp_main_module_resizableTableContainer--ceed4 table{
3792
+ --item-background:var(--list-item-header-background);
3793
+ --outline-offset-focus-row:var(--list-item-row-focus-outline-offset);
3794
+ --outline-offset-focus-cell:var(--list-item-cell-focus-outline-offset);
3795
+ --outline-offset-focus-header:var(--list-item-header-column-focus-outline-offset);
3790
3796
  --outline-offset-focus-resizer:1px;
3791
- --border-radius:var(--border-radius-datatable, var(--radius-4));
3792
- --outline-offset-focus-and-selected-row:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
3793
- --outline-select-color:var(--outline-select-color-datatable, var(--box-blue-100));
3794
- --outline-focus-color:var(--outline-focus-on-light);
3797
+ --outline-offset-focus-and-selected-row:var(--list-item-row-outline-offset-focus-and-selected);
3795
3798
  border-collapse:initial;
3796
3799
  border-spacing:0;
3797
3800
  width:100% !important;
3798
3801
  }
3799
- .bp_main_module_resizableTableContainer--cc705 .bp_main_module_resizableTable--cc705{
3802
+ .bp_main_module_resizableTableContainer--ceed4 .bp_main_module_resizableTable--ceed4{
3803
+ table-layout:auto !important;
3804
+ }
3805
+
3806
+ .bp_main_module_resizableTableContainer--ceed4[data-modern=false]{
3807
+ --list-item-header-background:var(--background-background);
3808
+ --list-item-header-column-padding:var(--space-2) var(--space-3);
3809
+ --list-item-border-radius:var(--border-radius-datatable, var(--radius-4));
3810
+ --list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
3811
+ --list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
3812
+ --list-item-header-text-color-unsorted:var(--text-text-on-light-secondary);
3813
+ --list-item-header-text-color-sorted:var(--text-text-on-light);
3814
+ --list-item-header-gap:var(--space-2);
3815
+ --list-item-header-column-focus-outline-radius:none;
3816
+ --list-item-header-column-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3817
+ --list-item-header-column-focus-outline-offset:var(--space-1);
3818
+ --list-item-header-column-resizer-width:var(--border-2);
3819
+ --list-item-header-column-resizer-height:var(--size-6);
3820
+ --list-item-header-column-resizer-background-color:var(--border-tab-border-hover);
3821
+ --list-item-header-column-resizer-background-color-active:var(--border-tab-border-hover);
3822
+ --list-item-header-column-resizer-outline:var(--border-2) solid var(--outline-focus-on-light);
3823
+ --list-item-header-column-resizer-outline-offset:var(--border-1);
3824
+ --list-item-dropdown-header-margin-bottom:var(--space-4);
3825
+ --list-item-row-border-radius:var(--border-radius-datatable, var(--radius-4));
3826
+ --list-item-row-background:var(--background-background);
3827
+ --list-item-row-text-color:var(--text-text-on-light);
3828
+ --list-item-row-divider:var(--border-1) solid var(--gray-10);
3829
+ --list-item-row-background-hover:var(--background-background);
3830
+ --list-item-row-background-selected:var(--box-blue-05);
3831
+ --list-item-row-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3832
+ --list-item-row-focus-outline-offset:-.25rem;
3833
+ --list-item-row-border-hover:var(--border-1) solid var(--gray-10);
3834
+ --outline-select-color:var(--outline-select-color-datatable, var(--box-blue-100));
3835
+ --outline-focus-color:var(--outline-focus-on-light);
3836
+ --list-item-row-background-selected-border:var(--border-2) solid var(--outline-select-color);
3837
+ --list-item-row-height:var(--size-14);
3838
+ --list-item-cell-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
3839
+ --list-item-cell-focus-outline-offset:-.1875rem;
3840
+ --list-item-cell-padding:var(--space-2) var(--space-3);
3841
+ --list-item-cell-border-radius:0;
3842
+ --list-item-cell-actions-width:var(--size-6);
3843
+ --list-item-cell-actions-gap:var(--space-2);
3844
+ --list-item-cell-actions-right-offset:var(--space-4);
3845
+ --list-item-cell-actions-padding:0 var(--space-2);
3846
+ --list-item-cell-actions-margin-block:var(--space-2);
3847
+ --list-item-row-outline-offset-focus-and-selected:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
3848
+ --list-item-row-hover-after-element-border:var(--border-1) solid #0000;
3849
+ }
3850
+ .bp_main_module_resizableTableContainer--ceed4[data-modern=false] .bp_main_module_resizableTable--ceed4{
3800
3851
  table-layout:auto !important;
3801
3852
  }
3802
3853
 
3803
- .bp_main_module_tableHeader--cc705 tr > th{
3854
+ .bp_main_module_resizableTableContainer--ceed4[data-modern=true]{
3855
+ --list-item-header-background:var(--bp-surface-surface);
3856
+ --list-item-header-column-padding:var(--bp-space-020) var(--bp-space-030);
3857
+ --list-item-border-radius:var(--border-radius-datatable, var(--bp-radius-08));
3858
+ --list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
3859
+ --list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
3860
+ --list-item-header-text-color-unsorted:var(--bp-text-text-on-light-secondary);
3861
+ --list-item-header-text-color-sorted:var(--bp-text-text-on-light);
3862
+ --list-item-header-gap:var(--bp-space-020);
3863
+ --list-item-header-column-focus-outline-radius:var(--bp-radius-01);
3864
+ --list-item-header-column-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3865
+ --list-item-header-column-focus-outline-offset:var(--bp-space-010);
3866
+ --list-item-header-column-resizer-width:var(--bp-size-005);
3867
+ --list-item-header-column-resizer-height:var(--bp-size-060);
3868
+ --list-item-header-column-resizer-background-color:var(--bp-border-resize-border-hover);
3869
+ --list-item-header-column-resizer-background-color-active:var(--bp-border-resize-border-focus);
3870
+ --list-item-header-column-resizer-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3871
+ --list-item-header-column-resizer-outline-offset:var(--bp-border-01);
3872
+ --list-item-dropdown-header-margin-bottom:var(--bp-space-040);
3873
+ --list-item-row-border-radius:var(--border-radius-datatable, var(--bp-radius-08));
3874
+ --list-item-row-background:var(--bp-surface-list-item-surface);
3875
+ --list-item-row-text-color:var(--bp-text-text-on-light);
3876
+ --list-item-row-divider:var(--bp-border-01) solid var(--bp-border-divider-border);
3877
+ --list-item-row-background-hover:var(--bp-surface-list-item-surface-hover);
3878
+ --list-item-row-background-selected:var(--bp-surface-list-item-surface-selected);
3879
+ --list-item-row-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3880
+ --list-item-row-focus-outline-offset:-.25rem;
3881
+ --list-item-row-border-hover:var(--bp-border-01) solid var(--bp-border-list-item-border);
3882
+ --outline-select-color:var(--outline-select-color-datatable, var(--bp-border-list-item-border-selected));
3883
+ --outline-focus-color:var(--bp-outline-focus-on-light);
3884
+ --list-item-row-background-selected-border:var(--bp-border-02) solid var(--outline-select-color);
3885
+ --list-item-row-height:var(--bp-size-140);
3886
+ --list-item-cell-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
3887
+ --list-item-cell-focus-outline-offset:-.1875rem;
3888
+ --list-item-cell-padding:var(--bp-space-020) var(--bp-space-030);
3889
+ --list-item-cell-border-radius:var(--bp-radius-08);
3890
+ --list-item-cell-actions-width:var(--bp-size-060);
3891
+ --list-item-cell-actions-gap:var(--bp-space-020);
3892
+ --list-item-cell-actions-right-offset:var(--bp-space-040);
3893
+ --list-item-cell-actions-padding:0 var(--bp-space-020);
3894
+ --list-item-cell-actions-margin-block:var(--bp-space-020);
3895
+ --list-item-row-outline-offset-focus-and-selected:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
3896
+ --list-item-row-hover-after-element-border:var(--bp-border-01) solid #0000;
3897
+ }
3898
+ .bp_main_module_resizableTableContainer--ceed4[data-modern=true] .bp_main_module_resizableTable--ceed4{
3899
+ table-layout:fixed !important;
3900
+ }
3901
+
3902
+ .bp_main_module_tableHeader--ceed4 tr > th{
3804
3903
  font-family:var(--caption-default-font-family);
3805
3904
  font-size:var(--caption-default-font-size);
3806
3905
  font-weight:var(--caption-default-font-weight);
@@ -3814,128 +3913,133 @@
3814
3913
  text-transform:var(--caption-default-text-case);
3815
3914
  white-space:nowrap;
3816
3915
  }
3817
- .bp_main_module_tableHeader--cc705 tr > th:first-child{
3818
- border-radius:var(--border-radius) 0 0 var(--border-radius);
3916
+ .bp_main_module_tableHeader--ceed4 tr > th:first-child{
3917
+ border-radius:var(--list-item-first-column-item-radius);
3819
3918
  }
3820
- .bp_main_module_tableHeader--cc705 tr > th:last-child{
3821
- border-radius:0 var(--border-radius) var(--border-radius) 0;
3919
+ .bp_main_module_tableHeader--ceed4 tr > th:last-child{
3920
+ border-radius:var(--list-item-last-column-item-radius);
3822
3921
  }
3823
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705{
3824
- color:var(--text-text-on-light-secondary);
3922
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4{
3923
+ color:var(--list-item-header-text-color-unsorted);
3825
3924
  outline:none;
3826
3925
  overflow:visible;
3827
3926
  text-align:left;
3828
3927
  }
3829
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnNameWrapper--cc705{
3928
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4{
3830
3929
  align-items:center;
3831
3930
  display:flex;
3832
3931
  flex:1 0 0;
3833
- gap:var(--space-2);
3932
+ gap:var(--list-item-header-gap);
3834
3933
  overflow:hidden;
3835
3934
  }
3836
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnNameWrapper--cc705 .bp_main_module_columnName--cc705{
3935
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4 .bp_main_module_columnName--ceed4{
3837
3936
  min-width:0;
3838
3937
  overflow:hidden;
3839
3938
  text-overflow:ellipsis;
3840
3939
  white-space:nowrap;
3841
3940
  }
3842
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnNameWrapper--cc705:focus-visible{
3941
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4:focus-visible{
3843
3942
  outline:none;
3844
3943
  }
3845
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnNameWrapper--cc705.bp_main_module_focusVisible--cc705{
3846
- outline:var(--border-2) solid var(--outline-focus-color);
3847
- outline-offset:var(--outline-offset-focus-header);
3944
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnNameWrapper--ceed4.bp_main_module_focusVisible--ceed4{
3945
+ border-radius:var(--list-item-header-column-focus-outline-radius);
3946
+ outline:var(--list-item-header-column-focus-outline);
3947
+ outline-offset:var(--list-item-header-column-focus-outline-offset);
3848
3948
  }
3849
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705[colspan]{
3949
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4[colspan]{
3850
3950
  text-align:center;
3851
3951
  }
3852
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_rotateArrow--cc705{
3952
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_rotateArrow--ceed4{
3853
3953
  transform:rotateX(180deg);
3854
3954
  }
3855
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_sorted--cc705{
3856
- color:var(--text-text-on-light);
3955
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_sorted--ceed4{
3956
+ color:var(--list-item-header-text-color-sorted);
3857
3957
  font-weight:bold;
3858
3958
  }
3859
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_sortingFlexWrapper--cc705{
3959
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_sortingFlexWrapper--ceed4{
3860
3960
  align-items:center;
3861
3961
  display:flex;
3862
- gap:var(--space-2);
3863
- padding:var(--space-2) var(--space-3);
3962
+ gap:var(--list-item-header-gap);
3963
+ padding:var(--list-item-header-column-padding);
3864
3964
  position:relative;
3865
3965
  }
3866
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_sortingFlexWrapper--cc705 svg{
3966
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_sortingFlexWrapper--ceed4 svg{
3867
3967
  flex-shrink:0;
3868
3968
  }
3869
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnResizer--cc705{
3870
- background-color:var(--border-tab-border-hover);
3969
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4{
3970
+ background-color:var(--list-item-header-column-resizer-background-color);
3871
3971
  flex:0 0 auto;
3872
- height:var(--size-6);
3972
+ height:var(--list-item-header-column-resizer-height);
3873
3973
  position:absolute;
3874
3974
  right:0;
3875
3975
  touch-action:none;
3876
- width:var(--border-2);
3976
+ width:var(--list-item-header-column-resizer-width);
3877
3977
  }
3878
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnResizer--cc705[data-resizable-direction=both]{
3978
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizable-direction=both]{
3879
3979
  cursor:ew-resize;
3880
3980
  }
3881
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnResizer--cc705[data-resizable-direction=left]{
3981
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizable-direction=left]{
3882
3982
  cursor:e-resize;
3883
3983
  }
3884
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnResizer--cc705[data-resizable-direction=right]{
3984
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizable-direction=right]{
3885
3985
  cursor:w-resize;
3886
3986
  }
3887
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705 .bp_main_module_columnResizer--cc705[data-focus-visible]{
3888
- outline:var(--border-2) solid var(--outline-focus-color);
3889
- outline-offset:var(--outline-offset-focus-resizer);
3987
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-focus-visible]{
3988
+ border-radius:var(--list-item-header-column-focus-outline-radius);
3989
+ outline:var(--list-item-header-column-resizer-outline);
3990
+ outline-offset:var(--list-item-header-column-resizer-outline-offset);
3991
+ }
3992
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4 .bp_main_module_columnResizer--ceed4[data-resizing]{
3993
+ background-color:var(--list-item-header-column-resizer-background-color-active);
3890
3994
  }
3891
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705:last-of-type .bp_main_module_columnResizer--cc705{
3995
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4:last-of-type .bp_main_module_columnResizer--ceed4{
3892
3996
  display:none;
3893
3997
  }
3894
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705:hover:not([data-sort-direction])[data-allows-sorting],.bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705[data-focus-visible]:not([data-sort-direction])[data-allows-sorting]{
3895
- color:var(--text-text-on-light);
3998
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4:hover:not([data-sort-direction])[data-allows-sorting],.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4[data-focus-visible]:not([data-sort-direction])[data-allows-sorting]{
3999
+ color:var(--list-item-header-text-color-sorted);
3896
4000
  font-weight:bold;
3897
4001
  }
3898
- .bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705:hover:not([data-sort-direction]) svg,.bp_main_module_tableHeader--cc705 .bp_main_module_column--cc705[data-focus-visible]:not([data-sort-direction]) svg{
4002
+ .bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4:hover:not([data-sort-direction]) svg,.bp_main_module_tableHeader--ceed4 .bp_main_module_column--ceed4[data-focus-visible]:not([data-sort-direction]) svg{
3899
4003
  transform:rotateX(180deg);
3900
4004
  visibility:visible;
3901
4005
  }
3902
4006
 
3903
- .bp_main_module_dropdownHeaderContainer--cc705{
3904
- margin-bottom:var(--space-4);
4007
+ .bp_main_module_dropdownHeaderContainer--ceed4{
4008
+ margin-bottom:var(--list-item-dropdown-header-margin-bottom);
3905
4009
  }
3906
4010
 
3907
- .bp_main_module_column--cc705.bp_main_module_droppableColumn--cc705{
4011
+ .bp_main_module_column--ceed4.bp_main_module_droppableColumn--ceed4{
3908
4012
  min-width:160px;
3909
4013
  }
3910
4014
 
3911
- .bp_main_module_column--cc705.bp_main_module_actionColumn--cc705{
4015
+ .bp_main_module_column--ceed4.bp_main_module_actionColumn--ceed4{
3912
4016
  min-width:1px;
3913
4017
  }
3914
4018
 
3915
- .bp_main_module_column--cc705.bp_main_module_hiddenColumn--cc705{
4019
+ .bp_main_module_column--ceed4.bp_main_module_hiddenColumn--ceed4{
3916
4020
  display:none;
3917
4021
  }
3918
4022
 
3919
- .bp_main_module_tableBody--cc705[data-empty]{
4023
+ .bp_main_module_tableBody--ceed4[data-empty]{
3920
4024
  text-align:center;
3921
4025
  }
3922
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705{
3923
- background:var(--item-background);
3924
- border-radius:var(--border-radius);
3925
- color:var(--text-text-on-light);
4026
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4{
4027
+ background:var(--list-item-row-background);
4028
+ border-radius:var(--list-item-row-border-radius);
4029
+ color:var(--list-item-row-text-color);
3926
4030
  cursor:default;
3927
- height:var(--size-14);
4031
+ height:var(--list-item-row-height);
3928
4032
  outline:none;
3929
4033
  overflow:hidden;
3930
4034
  position:relative;
3931
4035
  transform:translateZ(0);
3932
4036
  }
3933
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705::after{
4037
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4::after{
3934
4038
  background:#0000;
3935
- border-top:var(--border-1) solid var(--gray-10);
4039
+ border-top:var(--list-item-row-divider);
3936
4040
  box-sizing:border-box;
3937
4041
  content:"";
3938
- height:var(--size-14);
4042
+ height:var(--list-item-row-height);
3939
4043
  left:0;
3940
4044
  pointer-events:none;
3941
4045
  position:absolute;
@@ -3943,63 +4047,63 @@
3943
4047
  width:100%;
3944
4048
  z-index:999;
3945
4049
  }
3946
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[aria-selected=true]{
3947
- --item-background:var(--box-blue-05);
4050
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true]{
4051
+ --list-item-row-background:var(--list-item-row-background-selected);
3948
4052
  }
3949
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[aria-selected=true]::after{
3950
- border:var(--border-2) solid var(--outline-select-color);
3951
- border-radius:var(--border-radius);
4053
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true]::after{
4054
+ border:var(--list-item-row-background-selected-border);
4055
+ border-radius:var(--list-item-row-border-radius);
3952
4056
  }
3953
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[aria-selected=true] .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705{
4057
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4{
3954
4058
  opacity:1;
3955
4059
  }
3956
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[aria-selected=true] .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705 .bp_main_module_actionChildren--cc705{
4060
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[aria-selected=true] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4{
3957
4061
  display:none;
3958
4062
  }
3959
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705{
4063
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4{
3960
4064
  max-width:0;
3961
4065
  outline:none;
3962
4066
  overflow:hidden;
3963
- padding:var(--space-2) var(--space-3);
4067
+ padding:var(--list-item-cell-padding);
3964
4068
  text-align:start;
3965
4069
  text-overflow:ellipsis;
3966
4070
  transform:translateZ(0);
3967
4071
  white-space:nowrap;
3968
4072
  }
3969
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705[data-focus-visible]{
3970
- outline:var(--border-2) solid var(--outline-focus-color);
3971
- outline-offset:var(--outline-offset-focus-cell);
4073
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4[data-focus-visible]{
4074
+ outline:var(--list-item-cell-focus-outline);
4075
+ outline-offset:var(--list-item-cell-focus-outline-offset);
3972
4076
  position:relative;
3973
4077
  }
3974
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705:first-child{
3975
- border-radius:var(--border-radius) 0 0 var(--border-radius);
4078
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4:first-child{
4079
+ border-radius:var(--list-item-first-column-item-radius);
3976
4080
  }
3977
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705:last-child{
3978
- border-radius:0 var(--border-radius) var(--border-radius) 0;
4081
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4:last-child{
4082
+ border-radius:var(--list-item-last-column-item-radius);
3979
4083
  }
3980
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705.bp_main_module_actions--cc705{
4084
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4.bp_main_module_actions--ceed4{
3981
4085
  overflow:unset;
3982
4086
  padding:0;
3983
4087
  position:sticky;
3984
4088
  right:0;
3985
- width:var(--size-6);
4089
+ width:var(--list-item-cell-actions-width);
3986
4090
  }
3987
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705{
4091
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4{
3988
4092
  align-items:center;
3989
- background:var(--item-background);
4093
+ background:var(--list-item-row-background);
3990
4094
  bottom:0;
3991
4095
  display:flex;
3992
- gap:var(--space-2);
4096
+ gap:var(--list-item-cell-actions-gap);
3993
4097
  justify-content:center;
3994
- margin-block:var(--space-2);
4098
+ margin-block:var(--list-item-cell-actions-margin-block);
3995
4099
  opacity:0;
3996
- padding:0 var(--space-2);
4100
+ padding:var(--list-item-cell-actions-padding);
3997
4101
  position:absolute;
3998
- right:var(--size-4);
4102
+ right:var(--list-item-cell-actions-right-offset);
3999
4103
  top:0;
4000
4104
  }
4001
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705::before{
4002
- box-shadow:-.25rem 0 .625rem .625rem var(--item-background);
4105
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4::before{
4106
+ box-shadow:-.25rem 0 .625rem .625rem var(--list-item-row-background);
4003
4107
  content:"";
4004
4108
  display:block;
4005
4109
  height:50%;
@@ -4008,68 +4112,68 @@
4008
4112
  width:0;
4009
4113
  z-index:0;
4010
4114
  }
4011
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705[data-state=open]{
4115
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4[data-state=open]{
4012
4116
  opacity:1;
4013
4117
  }
4014
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705[data-state=open] .bp_main_module_actionChildren--cc705{
4118
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4[data-state=open] .bp_main_module_actionChildren--ceed4{
4015
4119
  display:block;
4016
4120
  }
4017
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705 .bp_main_module_cell--cc705.bp_main_module_isCellHidden--cc705{
4121
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4 .bp_main_module_cell--ceed4.bp_main_module_isCellHidden--ceed4{
4018
4122
  display:none;
4019
4123
  }
4020
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-dragging]{
4124
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-dragging]{
4021
4125
  opacity:.5;
4022
4126
  transform:translateZ(0);
4023
4127
  }
4024
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible]{
4025
- outline:var(--border-2) solid var(--outline-focus-color);
4026
- outline-offset:var(--outline-offset-focus-row);
4128
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]{
4129
+ outline:var(--list-item-row-focus-outline);
4130
+ outline-offset:var(--list-item-row-focus-outline-offset);
4027
4131
  }
4028
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible][aria-selected=true]{
4029
- background:var(--item-background);
4030
- outline-offset:var(--outline-offset-focus-and-selected-row);
4132
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible][aria-selected=true]{
4133
+ background:var(--list-item-row-background);
4134
+ outline-offset:var(--list-item-row-outline-offset-focus-and-selected);
4031
4135
  }
4032
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:last-child::after{
4136
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:last-child::after{
4033
4137
  border-bottom:var(--border-1) solid var(--gray-10);
4034
4138
  }
4035
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:last-child[aria-selected=true]::after{
4036
- border-bottom:var(--border-2) solid var(--outline-select-color);
4139
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:last-child[aria-selected=true]::after{
4140
+ border-bottom:var(--list-item-row-background-selected-border);
4037
4141
  }
4038
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible],.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered]{
4142
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible],.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]{
4039
4143
  z-index:1;
4040
4144
  }
4041
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within:not([aria-selected=true])::after,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible]:not([aria-selected=true])::after,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered]:not([aria-selected=true])::after{
4042
- border-bottom:var(--border-1) solid #0000;
4043
- border-radius:var(--border-radius);
4044
- border-top:var(--border-1) solid #0000;
4145
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]:not([aria-selected=true])::after{
4146
+ border-bottom:var(--list-item-row-hover-after-element-border);
4147
+ border-radius:var(--list-item-border-radius);
4148
+ border-top:var(--list-item-row-hover-after-element-border);
4045
4149
  box-shadow:var(--dropshadow-2);
4046
4150
  }
4047
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible]:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered]:last-child:not([aria-selected=true])::after{
4048
- border-bottom:var(--border-1) solid #0000;
4151
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]:last-child:not([aria-selected=true])::after{
4152
+ border-bottom:var(--list-item-row-hover-after-element-border);
4049
4153
  }
4050
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after{
4051
- border-top:var(--border-1) solid #0000;
4154
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after{
4155
+ border-top:var(--list-item-row-hover-after-element-border);
4052
4156
  }
4053
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within[data-dragging] .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within[data-pressed] .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible][data-dragging] .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible][data-pressed] .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered][data-dragging] .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered][data-pressed] .bp_main_module_actionsWrapper--cc705{
4157
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within[data-dragging] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within[data-pressed] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible][data-dragging] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible][data-pressed] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered][data-dragging] .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered][data-pressed] .bp_main_module_actionsWrapper--ceed4{
4054
4158
  opacity:1;
4055
4159
  }
4056
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible]:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered]:not(:is([data-focus-visible], [aria-selected=true]))::after{
4057
- border:var(--border-1) solid var(--gray-10);
4058
- border-radius:var(--border-radius);
4160
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible]:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered]:not(:is([data-focus-visible], [aria-selected=true]))::after{
4161
+ border:var(--list-item-row-border-hover);
4162
+ border-radius:var(--list-item-border-radius);
4059
4163
  }
4060
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible] .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered] .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705{
4164
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4{
4061
4165
  opacity:1;
4062
4166
  }
4063
- .bp_main_module_tableBody--cc705 .bp_main_module_row--cc705:focus-within .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705 .bp_main_module_actionChildren--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-focus-visible] .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705 .bp_main_module_actionChildren--cc705,.bp_main_module_tableBody--cc705 .bp_main_module_row--cc705[data-hovered] .bp_main_module_cell--cc705 .bp_main_module_actionsWrapper--cc705 .bp_main_module_actionChildren--cc705{
4167
+ .bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4:focus-within .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-focus-visible] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4,.bp_main_module_tableBody--ceed4 .bp_main_module_row--ceed4[data-hovered] .bp_main_module_cell--ceed4 .bp_main_module_actionsWrapper--ceed4 .bp_main_module_actionChildren--ceed4{
4064
4168
  display:block;
4065
4169
  }
4066
4170
  @supports selector(:has(*)){
4067
- .bp_main_module_row--cc705[aria-selected=true] + .bp_main_module_dropIndicator--cc705 + [aria-selected=true]::after,.bp_main_module_row--cc705[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--cc705:first-child,.bp_main_module_row--cc705[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--cc705:last-child,.bp_main_module_row--cc705[aria-selected=true] + [aria-selected=true]::after{
4171
+ .bp_main_module_row--ceed4[aria-selected=true] + .bp_main_module_dropIndicator--ceed4 + [aria-selected=true]::after,.bp_main_module_row--ceed4[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--ceed4:first-child,.bp_main_module_row--ceed4[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--ceed4:last-child,.bp_main_module_row--ceed4[aria-selected=true] + [aria-selected=true]::after{
4068
4172
  border-start-end-radius:0;
4069
4173
  border-start-start-radius:0;
4070
4174
  border-top-width:var(--border-1);
4071
4175
  }
4072
- .bp_main_module_row--cc705[aria-selected=true]:has(+ .bp_main_module_dropIndicator--cc705 + [aria-selected=true]) .bp_main_module_cell--cc705:last-child,.bp_main_module_row--cc705[aria-selected=true]:has(+ .bp_main_module_dropIndicator--cc705 + [aria-selected=true])::after,.bp_main_module_row--cc705[aria-selected=true]:has(+ [aria-selected=true]) .bp_main_module_cell--cc705:first-child,.bp_main_module_row--cc705[aria-selected=true]:has(+ [aria-selected=true])::after{
4176
+ .bp_main_module_row--ceed4[aria-selected=true]:has(+ .bp_main_module_dropIndicator--ceed4 + [aria-selected=true]) .bp_main_module_cell--ceed4:last-child,.bp_main_module_row--ceed4[aria-selected=true]:has(+ .bp_main_module_dropIndicator--ceed4 + [aria-selected=true])::after,.bp_main_module_row--ceed4[aria-selected=true]:has(+ [aria-selected=true]) .bp_main_module_cell--ceed4:first-child,.bp_main_module_row--ceed4[aria-selected=true]:has(+ [aria-selected=true])::after{
4073
4177
  border-bottom-width:var(--border-1);
4074
4178
  border-end-end-radius:0;
4075
4179
  border-end-start-radius:0;
package/dist/lib-esm/list-item/index.js CHANGED
@@ -7,6 +7,7 @@ import 'clsx';
7
7
  import { Cell as Cell$1 } from './cell/cell.js';
8
8
  import 'lodash/noop';
9
9
  import '../utils/useBreakpoint.js';
10
+ import '@box/blueprint-web-assets/icons/Medium';
10
11
  import 'react-aria';
11
12
  import '@ariakit/react';
12
13
  import 'react-dom';
package/dist/lib-esm/list-item/main.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--cc705","resizableTableContainer":"bp_main_module_resizableTableContainer--cc705","resizableTable":"bp_main_module_resizableTable--cc705","tableHeader":"bp_main_module_tableHeader--cc705","column":"bp_main_module_column--cc705","columnNameWrapper":"bp_main_module_columnNameWrapper--cc705","columnName":"bp_main_module_columnName--cc705","focusVisible":"bp_main_module_focusVisible--cc705","rotateArrow":"bp_main_module_rotateArrow--cc705","sorted":"bp_main_module_sorted--cc705","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--cc705","columnResizer":"bp_main_module_columnResizer--cc705","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--cc705","droppableColumn":"bp_main_module_droppableColumn--cc705","actionColumn":"bp_main_module_actionColumn--cc705","hiddenColumn":"bp_main_module_hiddenColumn--cc705","tableBody":"bp_main_module_tableBody--cc705","row":"bp_main_module_row--cc705","cell":"bp_main_module_cell--cc705","actionsWrapper":"bp_main_module_actionsWrapper--cc705","actionChildren":"bp_main_module_actionChildren--cc705","actions":"bp_main_module_actions--cc705","isCellHidden":"bp_main_module_isCellHidden--cc705","dropIndicator":"bp_main_module_dropIndicator--cc705"};
2
+ var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--ceed4","resizableTableContainer":"bp_main_module_resizableTableContainer--ceed4","resizableTable":"bp_main_module_resizableTable--ceed4","tableHeader":"bp_main_module_tableHeader--ceed4","column":"bp_main_module_column--ceed4","columnNameWrapper":"bp_main_module_columnNameWrapper--ceed4","columnName":"bp_main_module_columnName--ceed4","focusVisible":"bp_main_module_focusVisible--ceed4","rotateArrow":"bp_main_module_rotateArrow--ceed4","sorted":"bp_main_module_sorted--ceed4","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--ceed4","columnResizer":"bp_main_module_columnResizer--ceed4","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--ceed4","droppableColumn":"bp_main_module_droppableColumn--ceed4","actionColumn":"bp_main_module_actionColumn--ceed4","hiddenColumn":"bp_main_module_hiddenColumn--ceed4","tableBody":"bp_main_module_tableBody--ceed4","row":"bp_main_module_row--ceed4","cell":"bp_main_module_cell--ceed4","actionsWrapper":"bp_main_module_actionsWrapper--ceed4","actionChildren":"bp_main_module_actionChildren--ceed4","actions":"bp_main_module_actions--ceed4","isCellHidden":"bp_main_module_isCellHidden--ceed4","dropIndicator":"bp_main_module_dropIndicator--ceed4"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/list-item/table-column.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Fill';
2
+ import { ArrowUp as ArrowUp$1, ArrowDown as ArrowDown$1 } from '@box/blueprint-web-assets/icons/Fill';
3
+ import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Medium';
4
+ import { bpTextTextOnLight, TextTextOnLight, bpSize040, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
3
5
  import clsx from 'clsx';
4
6
  import { forwardRef } from 'react';
5
7
  import { useFocusRing } from 'react-aria';
6
8
  import { Column as Column$1, ColumnResizer } from 'react-aria-components';
9
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
10
  import { Focusable } from '../focusable/focusable.js';
8
11
  import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
9
12
  import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
@@ -14,16 +17,26 @@ function SortingArrowIcon({
14
17
  visibility = 'visible',
15
18
  direction
16
19
  }) {
20
+ const {
21
+ enableModernizedComponents
22
+ } = useBlueprintModernization();
17
23
  const props = {
18
- color: 'var(--icon-icon-on-light)',
19
- height: '1rem',
24
+ color: enableModernizedComponents ? bpTextTextOnLight : TextTextOnLight,
25
+ height: enableModernizedComponents ? bpSize040 : Size4,
20
26
  role: 'presentation',
21
27
  visibility,
22
- width: '1rem'
28
+ width: enableModernizedComponents ? bpSize040 : Size4
23
29
  };
24
- return direction === 'up' ? jsx(ArrowUp, {
30
+ if (enableModernizedComponents) {
31
+ return direction === 'up' ? jsx(ArrowUp, {
32
+ ...props
33
+ }) : jsx(ArrowDown, {
34
+ ...props
35
+ });
36
+ }
37
+ return direction === 'up' ? jsx(ArrowUp$1, {
25
38
  ...props
26
- }) : jsx(ArrowDown, {
39
+ }) : jsx(ArrowDown$1, {
27
40
  ...props
28
41
  });
29
42
  }
package/dist/lib-esm/list-item/table.js CHANGED
@@ -3,6 +3,7 @@ import noop from 'lodash/noop';
3
3
  import { forwardRef, useRef } from 'react';
4
4
  import { ResizableTableContainer, Table as Table$1 } from 'react-aria-components';
5
5
  import clsx from 'clsx';
6
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
7
  import styles from './main.module.js';
7
8
  import { ColumnVisibilityProvider, useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
8
9
  import { TableSortingProvider, useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
@@ -27,6 +28,9 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
27
28
  } = props;
28
29
  const resizableContainerRef = useRef(null);
29
30
  const dropdownHeaderContainerRef = useRef(null);
31
+ const {
32
+ enableModernizedComponents
33
+ } = useBlueprintModernization();
30
34
  return jsx(TableSortingProvider, {
31
35
  defaultSortDescriptor: defaultSortDescriptor,
32
36
  dropdownHeaderContainerRef: dropdownHeaderContainerRef,
@@ -44,6 +48,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
44
48
  children: jsx(ResizableTableContainer, {
45
49
  ref: resizableContainerRef,
46
50
  className: styles.resizableTableContainer,
51
+ "data-modern": enableModernizedComponents,
47
52
  ...resizableTableContainerProps,
48
53
  children: jsx(TableInner, {
49
54
  ref: ref,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.78.6",
3
+ "version": "12.79.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {