@box/blueprint-web 12.81.3 → 12.82.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib-esm/combobox-group/combobox-group-combobox.d.ts +3 -1
- package/dist/lib-esm/combobox-group/combobox-group-combobox.js +59 -53
- package/dist/lib-esm/combobox-group/combobox-group.d.ts +1 -0
- package/dist/lib-esm/combobox-group/combobox-group.js +2 -1
- package/dist/lib-esm/combobox-group/types.d.ts +7 -3
- package/dist/lib-esm/index.css +50 -64
- package/dist/lib-esm/primitives/page-header/page-header.module.js +1 -1
- package/dist/lib-esm/switch/switch.module.js +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import { type OptionValue } from '../combobox';
|
|
1
2
|
import { type ComboboxGroupComboboxProps } from './types';
|
|
2
|
-
export declare const ComboboxGroupCombobox: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<true, true,
|
|
3
|
+
export declare const ComboboxGroupCombobox: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<true, true, OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
|
|
4
|
+
export declare const ComboboxGroupComboboxSingleSelect: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<false, true, OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -8,58 +8,64 @@ import { Combobox } from '../combobox/combobox.js';
|
|
|
8
8
|
import { useComboboxGroupContext } from './combobox-group-context.js';
|
|
9
9
|
import styles from './combobox-group.module.js';
|
|
10
10
|
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
11
|
+
const createComboboxGroupComponent = () => {
|
|
12
|
+
return /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
13
|
+
const {
|
|
14
|
+
position = 'leading',
|
|
15
|
+
error = false,
|
|
16
|
+
portalElement,
|
|
17
|
+
disabled,
|
|
18
|
+
onValueChange,
|
|
19
|
+
...rest
|
|
20
|
+
} = props;
|
|
21
|
+
const {
|
|
22
|
+
errors,
|
|
23
|
+
setError,
|
|
24
|
+
inlineErrorId,
|
|
25
|
+
isDisabled,
|
|
26
|
+
isSelectFocused,
|
|
27
|
+
setComboboxFocus,
|
|
28
|
+
comboboxId,
|
|
29
|
+
setSubcomponentId
|
|
30
|
+
} = useComboboxGroupContext();
|
|
31
|
+
const borderStyles = position === 'trailing' ? styles.trailing : styles.leading;
|
|
32
|
+
const handleFocus = useCallback(() => setComboboxFocus(true), [setComboboxFocus]);
|
|
33
|
+
const handleBlur = useCallback(() => setComboboxFocus(false), [setComboboxFocus]);
|
|
34
|
+
const selectHasError = !!errors.select;
|
|
35
|
+
const comboboxHasError = !!errors.combobox;
|
|
36
|
+
const isLeading = position === 'leading';
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (isLeading) {
|
|
39
|
+
setSubcomponentId(comboboxId);
|
|
40
|
+
}
|
|
41
|
+
}, [isLeading, comboboxId, setSubcomponentId]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
setError('combobox', error);
|
|
44
|
+
}, [error, setError]);
|
|
45
|
+
return jsx(Combobox, {
|
|
46
|
+
as: "input",
|
|
47
|
+
...rest,
|
|
48
|
+
ref: forwardedRef,
|
|
49
|
+
"aria-describedby": comboboxHasError ? inlineErrorId : undefined,
|
|
50
|
+
"aria-invalid": comboboxHasError,
|
|
51
|
+
className: clsx(borderStyles, styles.comboboxContainer, {
|
|
52
|
+
[styles.errorSelect]: selectHasError
|
|
53
|
+
}, {
|
|
54
|
+
[styles.errorCombobox]: comboboxHasError
|
|
55
|
+
}, {
|
|
56
|
+
[styles.selectHasFocus]: isSelectFocused
|
|
57
|
+
}),
|
|
58
|
+
disabled: disabled ?? isDisabled,
|
|
59
|
+
error: null,
|
|
60
|
+
idForLabel: comboboxId,
|
|
61
|
+
onBlur: handleBlur,
|
|
62
|
+
onFocus: handleFocus,
|
|
63
|
+
onValueChange: onValueChange,
|
|
64
|
+
portalElement: portalElement
|
|
65
|
+
});
|
|
62
66
|
});
|
|
63
|
-
}
|
|
67
|
+
};
|
|
68
|
+
const ComboboxGroupCombobox = createComboboxGroupComponent();
|
|
69
|
+
const ComboboxGroupComboboxSingleSelect = createComboboxGroupComponent();
|
|
64
70
|
|
|
65
|
-
export { ComboboxGroupCombobox };
|
|
71
|
+
export { ComboboxGroupCombobox, ComboboxGroupComboboxSingleSelect };
|
|
@@ -2,5 +2,6 @@ import { type ComboboxGroupProps } from './types';
|
|
|
2
2
|
export declare const ComboboxGroup: {
|
|
3
3
|
({ children, disabled, ...props }: ComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Combobox: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
|
|
5
|
+
ComboboxSingleSelect: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupComboboxProps<false, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
|
|
5
6
|
Select: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
6
7
|
};
|
|
@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
|
|
|
4
4
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
5
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
6
6
|
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
7
|
-
import { ComboboxGroupCombobox } from './combobox-group-combobox.js';
|
|
7
|
+
import { ComboboxGroupCombobox, ComboboxGroupComboboxSingleSelect } from './combobox-group-combobox.js';
|
|
8
8
|
import { ComboboxGroupProvider, useComboboxGroupContext } from './combobox-group-context.js';
|
|
9
9
|
import { ComboboxGroupSelect } from './combobox-group-select.js';
|
|
10
10
|
import styles from './combobox-group.module.js';
|
|
@@ -61,6 +61,7 @@ const ComboboxGroup = ({
|
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
63
|
ComboboxGroup.Combobox = ComboboxGroupCombobox;
|
|
64
|
+
ComboboxGroup.ComboboxSingleSelect = ComboboxGroupComboboxSingleSelect;
|
|
64
65
|
ComboboxGroup.Select = ComboboxGroupSelect;
|
|
65
66
|
|
|
66
67
|
export { ComboboxGroup };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComboboxBaseProps, type OptionValue } from '../combobox/types';
|
|
1
|
+
import { type ComboboxBaseProps, type ComboboxValue, type OptionValue } from '../combobox/types';
|
|
2
2
|
import { type SelectProps } from '../select/types';
|
|
3
3
|
export interface ComboboxGroupProps {
|
|
4
4
|
children: React.ReactNode;
|
|
@@ -13,9 +13,13 @@ export interface ComboboxGroupSelectProps extends Omit<SelectProps, 'disabled'>
|
|
|
13
13
|
label: never;
|
|
14
14
|
position?: 'leading' | 'trailing';
|
|
15
15
|
}
|
|
16
|
-
export interface ComboboxGroupComboboxProps<Multiple extends boolean = true, FreeInput extends boolean = true, T extends OptionValue = OptionValue> extends ComboboxBaseProps<Multiple, FreeInput, T> {
|
|
17
|
-
disabled?:
|
|
16
|
+
export interface ComboboxGroupComboboxProps<Multiple extends boolean = true, FreeInput extends boolean = true, T extends OptionValue = OptionValue> extends Omit<ComboboxBaseProps<Multiple, FreeInput, T>, 'defaultValue' | 'value' | 'onValueChange'> {
|
|
17
|
+
disabled?: boolean;
|
|
18
18
|
error?: boolean;
|
|
19
19
|
label: never;
|
|
20
20
|
position?: 'leading' | 'trailing';
|
|
21
|
+
defaultValue?: ComboboxValue<Multiple, FreeInput, T>;
|
|
22
|
+
value?: ComboboxValue<Multiple, FreeInput, T>;
|
|
23
|
+
onValueChange?: (value: ComboboxValue<Multiple, FreeInput, T>) => void;
|
|
21
24
|
}
|
|
25
|
+
export type ComboboxGroupComboboxSingleSelectProps = ComboboxGroupComboboxProps<false, true, OptionValue>;
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -6787,7 +6787,7 @@ table.bp_inline_table_module_inlineTable--f6f94[data-modern=true] td:last-child,
|
|
|
6787
6787
|
.bp_page_module_portalEntry--96006{
|
|
6788
6788
|
display:contents;
|
|
6789
6789
|
}
|
|
6790
|
-
.bp_page_header_module_pageHeader--
|
|
6790
|
+
.bp_page_header_module_pageHeader--dd564[data-modern=false]{
|
|
6791
6791
|
--page-header-min-height:var(--size-10);
|
|
6792
6792
|
--page-header-max-height:var(--size-16);
|
|
6793
6793
|
--page-header-background:var(--surface-surface);
|
|
@@ -6796,7 +6796,7 @@ table.bp_inline_table_module_inlineTable--f6f94[data-modern=true] td:last-child,
|
|
|
6796
6796
|
--page-header-inline-height:var(--size-10);
|
|
6797
6797
|
}
|
|
6798
6798
|
|
|
6799
|
-
.bp_page_header_module_pageHeader--
|
|
6799
|
+
.bp_page_header_module_pageHeader--dd564[data-modern=true]{
|
|
6800
6800
|
--page-header-min-height:var(--bp-size-100);
|
|
6801
6801
|
--page-header-max-height:var(--bp-size-160);
|
|
6802
6802
|
--page-header-background:var(--bp-surface-surface);
|
|
@@ -6804,13 +6804,14 @@ table.bp_inline_table_module_inlineTable--f6f94[data-modern=true] td:last-child,
|
|
|
6804
6804
|
--page-header-default-padding-inline:var(--bp-space-020);
|
|
6805
6805
|
--page-header-inline-height:var(--bp-size-100);
|
|
6806
6806
|
}
|
|
6807
|
-
.bp_page_header_module_pageHeader--
|
|
6807
|
+
.bp_page_header_module_pageHeader--dd564[data-modern=true]:not(.bp_page_header_module_inline--dd564){
|
|
6808
6808
|
border-bottom:var(--bp-border-01) solid var(--bp-border-header-border);
|
|
6809
6809
|
}
|
|
6810
6810
|
|
|
6811
|
-
.bp_page_header_module_pageHeader--
|
|
6811
|
+
.bp_page_header_module_pageHeader--dd564{
|
|
6812
6812
|
align-items:center;
|
|
6813
6813
|
background:var(--page-header-background);
|
|
6814
|
+
box-sizing:border-box;
|
|
6814
6815
|
display:flex;
|
|
6815
6816
|
flex-direction:row;
|
|
6816
6817
|
justify-content:space-between;
|
|
@@ -6818,35 +6819,35 @@ table.bp_inline_table_module_inlineTable--f6f94[data-modern=true] td:last-child,
|
|
|
6818
6819
|
min-height:var(--page-header-min-height);
|
|
6819
6820
|
width:100%;
|
|
6820
6821
|
}
|
|
6821
|
-
.bp_page_header_module_pageHeader--
|
|
6822
|
+
.bp_page_header_module_pageHeader--dd564.bp_page_header_module_sticky--dd564{
|
|
6822
6823
|
bottom:var(--blueprint-page-header-bottom, 0);
|
|
6823
6824
|
left:var(--blueprint-page-header-left, 0);
|
|
6824
6825
|
position:sticky;
|
|
6825
6826
|
right:var(--blueprint-page-header-right, 0);
|
|
6826
6827
|
top:var(--blueprint-page-header-top, 0);
|
|
6827
6828
|
}
|
|
6828
|
-
.bp_page_header_module_pageHeader--
|
|
6829
|
+
.bp_page_header_module_pageHeader--dd564.bp_page_header_module_default--dd564{
|
|
6829
6830
|
height:var(--page-header-default-height);
|
|
6830
6831
|
padding-inline:var(--page-header-default-padding-inline);
|
|
6831
6832
|
}
|
|
6832
|
-
.bp_page_header_module_pageHeader--
|
|
6833
|
+
.bp_page_header_module_pageHeader--dd564.bp_page_header_module_inline--dd564{
|
|
6833
6834
|
height:var(--page-header-inline-height);
|
|
6834
6835
|
}
|
|
6835
|
-
.bp_page_header_module_pageHeader--
|
|
6836
|
+
.bp_page_header_module_pageHeader--dd564 .bp_page_header_module_corner--dd564{
|
|
6836
6837
|
align-items:center;
|
|
6837
6838
|
display:flex;
|
|
6838
6839
|
flex-basis:content;
|
|
6839
6840
|
flex-grow:0;
|
|
6840
6841
|
flex-shrink:0;
|
|
6841
6842
|
}
|
|
6842
|
-
.bp_page_header_module_pageHeader--
|
|
6843
|
+
.bp_page_header_module_pageHeader--dd564 .bp_page_header_module_startElements--dd564{
|
|
6843
6844
|
align-items:center;
|
|
6844
6845
|
display:flex;
|
|
6845
6846
|
flex-grow:1;
|
|
6846
6847
|
justify-content:flex-start;
|
|
6847
6848
|
overflow:hidden;
|
|
6848
6849
|
}
|
|
6849
|
-
.bp_page_header_module_pageHeader--
|
|
6850
|
+
.bp_page_header_module_pageHeader--dd564 .bp_page_header_module_endElements--dd564{
|
|
6850
6851
|
align-items:center;
|
|
6851
6852
|
display:flex;
|
|
6852
6853
|
flex-direction:row;
|
|
@@ -9361,55 +9362,52 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
9361
9362
|
min-width:var(--split-button-dropdown-min-width);
|
|
9362
9363
|
}
|
|
9363
9364
|
|
|
9364
|
-
.bp_switch_module_option--
|
|
9365
|
-
--switch-width:var(--size-10);
|
|
9365
|
+
.bp_switch_module_option--f8df5[data-modern=false]{
|
|
9366
9366
|
--switch-height:var(--size-5);
|
|
9367
9367
|
--switch-margin-left:var(--space-10);
|
|
9368
9368
|
--switch-margin-right:var(--space-3);
|
|
9369
|
-
--description-margin:calc(var(--switch-margin-right) + var(--switch-width));
|
|
9370
|
-
--thumb-width:var(--size-5);
|
|
9371
|
-
--thumb-height:var(--size-5);
|
|
9372
|
-
--thumb-bg:var(--surface-switch-surface);
|
|
9373
|
-
--thumb-border-off:var(--border-1) solid var(--border-switch-border);
|
|
9374
|
-
--thumb-border-off-hover:var(--border-1) solid var(--border-switch-border);
|
|
9375
|
-
--thumb-border-on:var(--border-1) solid var(--border-switch-border);
|
|
9376
|
-
--thumb-border-on-hover:var(--border-1) solid var(--border-switch-border);
|
|
9377
|
-
--thumb-radius:var(--size-10);
|
|
9378
|
-
--thumb-shadow:var(--dropshadow-3);
|
|
9379
9369
|
--switch-bg-off:var(--surface-switch-surface-off);
|
|
9380
9370
|
--switch-bg-off-hover:var(--surface-switch-surface-off);
|
|
9381
9371
|
--switch-bg-on:var(--surface-switch-surface-on);
|
|
9382
9372
|
--switch-bg-on-hover:var(--surface-switch-surface-on);
|
|
9383
9373
|
--switch-radius:var(--size-10);
|
|
9374
|
+
--switch-padding-inline:0;
|
|
9375
|
+
--switch-width:var(--size-10);
|
|
9384
9376
|
--switch-outline:var(--outline-focus-on-light);
|
|
9385
9377
|
--switch-disabled-opacity:.5;
|
|
9378
|
+
--description-margin:calc(var(--switch-margin-right) + var(--switch-width));
|
|
9379
|
+
--thumb-width:var(--size-5);
|
|
9380
|
+
--thumb-height:var(--size-5);
|
|
9381
|
+
--thumb-bg:var(--surface-switch-surface);
|
|
9382
|
+
--thumb-border:var(--border-1) solid var(--border-switch-border);
|
|
9383
|
+
--thumb-radius:var(--size-10);
|
|
9384
|
+
--thumb-shadow:var(--dropshadow-3);
|
|
9386
9385
|
}
|
|
9387
9386
|
|
|
9388
|
-
.bp_switch_module_option--
|
|
9389
|
-
--switch-width:var(--bp-size-110);
|
|
9387
|
+
.bp_switch_module_option--f8df5[data-modern=true]{
|
|
9390
9388
|
--switch-height:var(--bp-size-060);
|
|
9391
9389
|
--switch-margin-left:var(--bp-space-100);
|
|
9392
9390
|
--switch-margin-right:var(--bp-space-030);
|
|
9393
|
-
--description-margin:calc(var(--switch-margin-right) + var(--switch-width));
|
|
9394
|
-
--thumb-width:var(--bp-size-060);
|
|
9395
|
-
--thumb-height:var(--bp-size-060);
|
|
9396
|
-
--thumb-bg:var(--bp-surface-switch-surface);
|
|
9397
|
-
--thumb-border-off:var(--bp-border-02) solid var(--bp-surface-switch-surface-off);
|
|
9398
|
-
--thumb-border-off-hover:var(--bp-border-02) solid var(--bp-surface-switch-surface-off-hover);
|
|
9399
|
-
--thumb-border-on:var(--bp-border-02) solid var(--bp-surface-switch-surface-on);
|
|
9400
|
-
--thumb-border-on-hover:var(--bp-border-02) solid var(--bp-surface-switch-surface-on-hover);
|
|
9401
|
-
--thumb-radius:var(--bp-size-100);
|
|
9402
|
-
--thumb-shadow:var(--dropshadow-3);
|
|
9403
9391
|
--switch-bg-off:var(--bp-surface-switch-surface-off);
|
|
9404
9392
|
--switch-bg-off-hover:var(--bp-surface-switch-surface-off-hover);
|
|
9405
9393
|
--switch-bg-on:var(--bp-surface-switch-surface-on);
|
|
9406
9394
|
--switch-bg-on-hover:var(--bp-surface-switch-surface-on-hover);
|
|
9407
9395
|
--switch-radius:var(--bp-size-100);
|
|
9396
|
+
--switch-padding-inline:var(--bp-space-005);
|
|
9397
|
+
--switch-base-width:var(--bp-size-110);
|
|
9398
|
+
--switch-width:calc(var(--switch-base-width) - var(--switch-padding-inline)*2);
|
|
9408
9399
|
--switch-outline:var(--bp-outline-focus-on-light);
|
|
9409
9400
|
--switch-disabled-opacity:.6;
|
|
9401
|
+
--description-margin:calc(var(--switch-margin-right) + var(--switch-base-width));
|
|
9402
|
+
--thumb-width:var(--bp-size-050);
|
|
9403
|
+
--thumb-height:var(--bp-size-050);
|
|
9404
|
+
--thumb-bg:var(--bp-surface-switch-surface);
|
|
9405
|
+
--thumb-border:none;
|
|
9406
|
+
--thumb-radius:var(--bp-size-100);
|
|
9407
|
+
--thumb-shadow:var(--dropshadow-3);
|
|
9410
9408
|
}
|
|
9411
9409
|
|
|
9412
|
-
.bp_switch_module_option--
|
|
9410
|
+
.bp_switch_module_option--f8df5{
|
|
9413
9411
|
display:flex;
|
|
9414
9412
|
flex-direction:column;
|
|
9415
9413
|
font-family:var(--body-default-font-family);
|
|
@@ -9421,31 +9419,31 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
9421
9419
|
text-decoration:var(--body-default-text-decoration);
|
|
9422
9420
|
text-transform:var(--body-default-text-case);
|
|
9423
9421
|
}
|
|
9424
|
-
.bp_switch_module_option--
|
|
9422
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_label--f8df5{
|
|
9425
9423
|
cursor:pointer;
|
|
9426
9424
|
display:inline-flex;
|
|
9427
9425
|
flex-direction:row;
|
|
9428
9426
|
width:-moz-fit-content;
|
|
9429
9427
|
width:fit-content;
|
|
9430
9428
|
}
|
|
9431
|
-
.bp_switch_module_option--
|
|
9429
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_label--f8df5.bp_switch_module_rightAlign--f8df5{
|
|
9432
9430
|
flex-direction:row-reverse;
|
|
9433
9431
|
justify-content:space-between;
|
|
9434
9432
|
width:unset;
|
|
9435
9433
|
}
|
|
9436
|
-
.bp_switch_module_option--
|
|
9434
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_label--f8df5:has(.bp_switch_module_switch--f8df5:disabled){
|
|
9437
9435
|
cursor:default;
|
|
9438
9436
|
}
|
|
9439
|
-
.bp_switch_module_option--
|
|
9437
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_description--f8df5{
|
|
9440
9438
|
margin-left:var(--description-margin);
|
|
9441
9439
|
}
|
|
9442
|
-
.bp_switch_module_option--
|
|
9440
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_description--f8df5.bp_switch_module_rightAlign--f8df5{
|
|
9443
9441
|
margin-left:unset;
|
|
9444
9442
|
margin-right:var(--description-margin);
|
|
9445
9443
|
}
|
|
9446
|
-
.bp_switch_module_option--
|
|
9444
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_thumb--f8df5{
|
|
9447
9445
|
background-color:var(--thumb-bg);
|
|
9448
|
-
border:var(--thumb-border
|
|
9446
|
+
border:var(--thumb-border);
|
|
9449
9447
|
border-radius:var(--thumb-radius);
|
|
9450
9448
|
box-shadow:var(--thumb-shadow);
|
|
9451
9449
|
box-sizing:border-box;
|
|
@@ -9455,7 +9453,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
9455
9453
|
width:var(--thumb-width);
|
|
9456
9454
|
will-change:transform;
|
|
9457
9455
|
}
|
|
9458
|
-
.bp_switch_module_option--
|
|
9456
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5{
|
|
9459
9457
|
all:unset;
|
|
9460
9458
|
align-items:center;
|
|
9461
9459
|
background-color:var(--switch-bg-off);
|
|
@@ -9464,51 +9462,39 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
9464
9462
|
flex-shrink:0;
|
|
9465
9463
|
height:var(--switch-height);
|
|
9466
9464
|
margin-right:var(--switch-margin-right);
|
|
9465
|
+
padding-inline:var(--switch-padding-inline);
|
|
9467
9466
|
position:relative;
|
|
9468
9467
|
transition:background-color .4s;
|
|
9469
9468
|
width:var(--switch-width);
|
|
9470
9469
|
will-change:transition;
|
|
9471
9470
|
}
|
|
9472
|
-
.bp_switch_module_option--
|
|
9471
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5:disabled{
|
|
9473
9472
|
opacity:var(--switch-disabled-opacity);
|
|
9474
9473
|
}
|
|
9475
|
-
.bp_switch_module_option--
|
|
9474
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5.bp_switch_module_rightAlign--f8df5{
|
|
9476
9475
|
margin-left:var(--switch-margin-left);
|
|
9477
9476
|
margin-right:unset;
|
|
9478
9477
|
}
|
|
9479
|
-
.bp_switch_module_option--
|
|
9478
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5:focus-visible{
|
|
9480
9479
|
background-color:var(--switch-bg-off-hover);
|
|
9481
9480
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
|
|
9482
9481
|
}
|
|
9483
|
-
.bp_switch_module_option--
|
|
9484
|
-
border:var(--thumb-border-off-hover);
|
|
9485
|
-
}
|
|
9486
|
-
.bp_switch_module_option--747a4 .bp_switch_module_switch--747a4:hover:not(:disabled){
|
|
9482
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5:hover:not(:disabled){
|
|
9487
9483
|
background-color:var(--switch-bg-off-hover);
|
|
9488
9484
|
}
|
|
9489
|
-
.bp_switch_module_option--
|
|
9490
|
-
border:var(--thumb-border-off-hover);
|
|
9491
|
-
}
|
|
9492
|
-
.bp_switch_module_option--747a4 .bp_switch_module_switch--747a4[aria-checked=true]{
|
|
9485
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5[aria-checked=true]{
|
|
9493
9486
|
background-color:var(--switch-bg-on);
|
|
9494
9487
|
}
|
|
9495
|
-
.bp_switch_module_option--
|
|
9496
|
-
border:var(--thumb-border-on);
|
|
9488
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5[aria-checked=true] .bp_switch_module_thumb--f8df5{
|
|
9497
9489
|
transform:translateX(calc(var(--switch-width) - var(--thumb-width)));
|
|
9498
9490
|
}
|
|
9499
|
-
.bp_switch_module_option--
|
|
9491
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5[aria-checked=true]:focus-visible{
|
|
9500
9492
|
background-color:var(--switch-bg-on-hover);
|
|
9501
9493
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
|
|
9502
9494
|
}
|
|
9503
|
-
.bp_switch_module_option--
|
|
9504
|
-
border:var(--thumb-border-on-hover);
|
|
9505
|
-
}
|
|
9506
|
-
.bp_switch_module_option--747a4 .bp_switch_module_switch--747a4[aria-checked=true]:hover:not(:disabled){
|
|
9495
|
+
.bp_switch_module_option--f8df5 .bp_switch_module_switch--f8df5[aria-checked=true]:hover:not(:disabled){
|
|
9507
9496
|
background-color:var(--switch-bg-on-hover);
|
|
9508
9497
|
}
|
|
9509
|
-
.bp_switch_module_option--747a4 .bp_switch_module_switch--747a4[aria-checked=true]:hover:not(:disabled) .bp_switch_module_thumb--747a4{
|
|
9510
|
-
border:var(--thumb-border-on-hover);
|
|
9511
|
-
}
|
|
9512
9498
|
|
|
9513
9499
|
.bp_text_button_module_textButton--985ec[data-modern=false]{
|
|
9514
9500
|
--text-button-text-color:var(--text-cta-link);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"pageHeader":"bp_page_header_module_pageHeader--
|
|
2
|
+
var styles = {"pageHeader":"bp_page_header_module_pageHeader--dd564","inline":"bp_page_header_module_inline--dd564","sticky":"bp_page_header_module_sticky--dd564","default":"bp_page_header_module_default--dd564","corner":"bp_page_header_module_corner--dd564","startElements":"bp_page_header_module_startElements--dd564","endElements":"bp_page_header_module_endElements--dd564"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"option":"bp_switch_module_option--
|
|
2
|
+
var styles = {"option":"bp_switch_module_option--f8df5","label":"bp_switch_module_label--f8df5","rightAlign":"bp_switch_module_rightAlign--f8df5","switch":"bp_switch_module_switch--f8df5","description":"bp_switch_module_description--f8df5","thumb":"bp_switch_module_thumb--f8df5"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|