@byline/ui 1.10.2 → 1.10.3
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/components/accordion/accordion.js +5 -5
- package/dist/components/accordion/accordion_module.css +6 -6
- package/dist/components/avatar/avatar.js +4 -4
- package/dist/components/avatar/avatar_module.css +4 -4
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/badge/badge_module.css +8 -8
- package/dist/components/button/button-group_module.css +2 -2
- package/dist/components/button/button.js +1 -1
- package/dist/components/button/button_module.css +46 -42
- package/dist/components/button/combo-button_module.css +6 -6
- package/dist/components/button/control-buttons.js +1 -1
- package/dist/components/button/control-buttons_module.css +1 -1
- package/dist/components/button/copy-button.js +2 -2
- package/dist/components/button/copy-button_module.css +7 -7
- package/dist/components/card/card.js +6 -6
- package/dist/components/card/card_module.css +9 -9
- package/dist/components/chips/chip.js +5 -5
- package/dist/components/chips/chip_module.css +41 -38
- package/dist/components/container/container.js +1 -1
- package/dist/components/container/container_module.css +4 -4
- package/dist/components/dropdown/dropdown.js +8 -8
- package/dist/components/dropdown/dropdown_module.css +8 -8
- package/dist/components/hamburger/hamburger.js +3 -3
- package/dist/components/hamburger/hamburger_module.css +16 -16
- package/dist/components/inputs/autocomplete.js +9 -9
- package/dist/components/inputs/autocomplete_module.css +36 -36
- package/dist/components/inputs/checkbox-group.js +1 -1
- package/dist/components/inputs/checkbox-group_module.css +1 -1
- package/dist/components/inputs/checkbox.js +5 -5
- package/dist/components/inputs/checkbox_module.css +31 -31
- package/dist/components/inputs/error-text_module.css +4 -4
- package/dist/components/inputs/help-text.js +1 -1
- package/dist/components/inputs/help-text_module.css +4 -4
- package/dist/components/inputs/input-adornment.js +1 -1
- package/dist/components/inputs/input-adornment_module.css +3 -3
- package/dist/components/inputs/input.js +5 -5
- package/dist/components/inputs/input_module.css +38 -38
- package/dist/components/inputs/label_module.css +2 -2
- package/dist/components/inputs/radio-group.js +1 -1
- package/dist/components/inputs/radio-group_module.css +18 -18
- package/dist/components/inputs/select.js +3 -3
- package/dist/components/inputs/select_module.css +8 -8
- package/dist/components/inputs/text-area.js +1 -1
- package/dist/components/inputs/text-area_module.css +3 -3
- package/dist/components/notifications/alert.js +10 -10
- package/dist/components/notifications/alert_module.css +16 -16
- package/dist/components/notifications/toast.js +7 -7
- package/dist/components/notifications/toast_module.css +25 -24
- package/dist/components/pager/pagination.js +2 -2
- package/dist/components/pager/pagination_module.css +6 -6
- package/dist/components/scroll-area/scroll-area.js +7 -7
- package/dist/components/scroll-area/scroll-area_module.css +9 -9
- package/dist/components/scroll-to-top/scroll-to-top.js +2 -2
- package/dist/components/scroll-to-top/scroll-to-top_module.css +9 -9
- package/dist/components/section/section.js +1 -1
- package/dist/components/section/section_module.css +1 -1
- package/dist/components/shimmer/shimmer_module.css +6 -6
- package/dist/components/table/table.js +8 -8
- package/dist/components/table/table_module.css +15 -15
- package/dist/components/tabs/tabs.js +4 -4
- package/dist/components/tabs/tabs_module.css +9 -9
- package/dist/components/tooltip/tooltip.js +2 -2
- package/dist/components/tooltip/tooltip_module.css +6 -6
- package/dist/fields/checkbox/checkbox-field.js +2 -1
- package/dist/fields/checkbox/checkbox-field.module.js +6 -0
- package/dist/fields/checkbox/checkbox-field_module.css +4 -0
- package/dist/forms/form-context.d.ts +1 -0
- package/dist/forms/form-context.js +3 -2
- package/dist/loaders/ellipses.js +2 -2
- package/dist/loaders/ellipses_module.css +2 -2
- package/dist/loaders/ring.js +2 -2
- package/dist/loaders/ring_module.css +2 -2
- package/dist/loaders/spinner.js +3 -3
- package/dist/loaders/spinner_module.css +3 -3
- package/dist/styles/styles.css +12 -0
- package/dist/widgets/datepicker/datepicker.js +11 -11
- package/dist/widgets/datepicker/datepicker_module.css +21 -21
- package/dist/widgets/drawer/drawer-container.js +1 -1
- package/dist/widgets/drawer/drawer-content.js +1 -1
- package/dist/widgets/drawer/drawer-header.js +1 -1
- package/dist/widgets/drawer/drawer-top-actions.js +1 -1
- package/dist/widgets/drawer/drawer.js +2 -2
- package/dist/widgets/drawer/drawer_module.css +11 -11
- package/dist/widgets/modal/modal-actions.js +1 -1
- package/dist/widgets/modal/modal-container.js +1 -1
- package/dist/widgets/modal/modal-content.js +1 -1
- package/dist/widgets/modal/modal-header.js +1 -1
- package/dist/widgets/modal/modal.js +2 -2
- package/dist/widgets/modal/modal_module.css +12 -12
- package/dist/widgets/search/search.js +6 -0
- package/dist/widgets/timeline/timeline_module.css +10 -10
- package/package.json +4 -4
- package/src/components/accordion/accordion.module.css +4 -4
- package/src/components/accordion/accordion.tsx +5 -5
- package/src/components/avatar/avatar.module.css +4 -4
- package/src/components/avatar/avatar.tsx +4 -4
- package/src/components/badge/badge.module.css +8 -8
- package/src/components/badge/badge.tsx +2 -2
- package/src/components/button/button-group.module.css +2 -2
- package/src/components/button/button.module.css +162 -86
- package/src/components/button/button.tsx +4 -4
- package/src/components/button/combo-button.module.css +7 -7
- package/src/components/button/control-buttons.module.css +5 -5
- package/src/components/button/control-buttons.tsx +1 -1
- package/src/components/button/copy-button.module.css +7 -7
- package/src/components/button/copy-button.tsx +5 -5
- package/src/components/card/card.module.css +9 -9
- package/src/components/card/card.tsx +6 -6
- package/src/components/chips/chip.module.css +126 -71
- package/src/components/chips/chip.tsx +8 -12
- package/src/components/container/container.module.css +4 -4
- package/src/components/container/container.tsx +1 -1
- package/src/components/dropdown/dropdown.module.css +7 -7
- package/src/components/dropdown/dropdown.tsx +8 -8
- package/src/components/hamburger/hamburger.module.css +16 -16
- package/src/components/hamburger/hamburger.tsx +3 -3
- package/src/components/inputs/autocomplete.module.css +42 -42
- package/src/components/inputs/autocomplete.tsx +12 -14
- package/src/components/inputs/checkbox-group.module.css +1 -1
- package/src/components/inputs/checkbox-group.tsx +1 -1
- package/src/components/inputs/checkbox.module.css +38 -34
- package/src/components/inputs/checkbox.tsx +8 -11
- package/src/components/inputs/error-text.module.css +4 -4
- package/src/components/inputs/help-text.module.css +4 -4
- package/src/components/inputs/help-text.tsx +1 -3
- package/src/components/inputs/input-adornment.module.css +3 -3
- package/src/components/inputs/input-adornment.tsx +2 -2
- package/src/components/inputs/input.module.css +45 -45
- package/src/components/inputs/input.tsx +8 -12
- package/src/components/inputs/label.module.css +2 -2
- package/src/components/inputs/radio-group.module.css +17 -17
- package/src/components/inputs/radio-group.tsx +1 -1
- package/src/components/inputs/select.module.css +8 -8
- package/src/components/inputs/select.tsx +3 -3
- package/src/components/inputs/text-area.module.css +4 -4
- package/src/components/inputs/text-area.tsx +3 -3
- package/src/components/notifications/alert.module.css +16 -16
- package/src/components/notifications/alert.tsx +11 -11
- package/src/components/notifications/toast.module.css +41 -28
- package/src/components/notifications/toast.tsx +7 -9
- package/src/components/pager/pagination.module.css +6 -6
- package/src/components/pager/pagination.tsx +2 -2
- package/src/components/scroll-area/scroll-area.module.css +5 -5
- package/src/components/scroll-area/scroll-area.tsx +7 -7
- package/src/components/scroll-to-top/scroll-to-top.module.css +9 -9
- package/src/components/scroll-to-top/scroll-to-top.tsx +2 -2
- package/src/components/section/section.module.css +1 -1
- package/src/components/section/section.tsx +1 -1
- package/src/components/shimmer/shimmer.module.css +18 -8
- package/src/components/table/table.module.css +15 -15
- package/src/components/table/table.tsx +8 -8
- package/src/components/tabs/tabs.module.css +4 -4
- package/src/components/tabs/tabs.tsx +4 -4
- package/src/components/tooltip/tooltip.module.css +2 -2
- package/src/components/tooltip/tooltip.tsx +2 -2
- package/src/fields/checkbox/checkbox-field.module.css +4 -0
- package/src/fields/checkbox/checkbox-field.tsx +2 -1
- package/src/forms/form-context.tsx +10 -2
- package/src/icons/source/icon-infonomic.svg +2 -2
- package/src/loaders/ellipses.module.css +2 -2
- package/src/loaders/ellipses.tsx +2 -2
- package/src/loaders/ring.module.css +2 -2
- package/src/loaders/ring.tsx +2 -2
- package/src/loaders/spinner.module.css +3 -3
- package/src/loaders/spinner.tsx +3 -6
- package/src/styles/styles.css +12 -0
- package/src/widgets/datepicker/datepicker.module.css +15 -15
- package/src/widgets/datepicker/datepicker.tsx +11 -21
- package/src/widgets/drawer/drawer-container.tsx +1 -1
- package/src/widgets/drawer/drawer-content.tsx +1 -1
- package/src/widgets/drawer/drawer-header.tsx +1 -1
- package/src/widgets/drawer/drawer-top-actions.tsx +1 -1
- package/src/widgets/drawer/drawer.module.css +11 -11
- package/src/widgets/drawer/drawer.tsx +2 -2
- package/src/widgets/modal/modal-actions.tsx +1 -1
- package/src/widgets/modal/modal-container.tsx +1 -1
- package/src/widgets/modal/modal-content.tsx +1 -1
- package/src/widgets/modal/modal-header.tsx +1 -1
- package/src/widgets/modal/modal.module.css +12 -12
- package/src/widgets/modal/modal.tsx +2 -2
- package/src/widgets/search/search.tsx +2 -0
- package/src/widgets/timeline/timeline.module.css +10 -10
|
@@ -4,7 +4,7 @@ import classnames from "classnames";
|
|
|
4
4
|
import card_module from "./card.module.js";
|
|
5
5
|
const Card = ({ className, hover, children, render, ref, ...rest })=>{
|
|
6
6
|
const hoverClasses = null != hover && true === hover ? card_module["card-hover"] : void 0;
|
|
7
|
-
const classes = classnames('
|
|
7
|
+
const classes = classnames('byline-card', card_module.card, hoverClasses, className);
|
|
8
8
|
const element = useRender({
|
|
9
9
|
defaultTagName: 'div',
|
|
10
10
|
render,
|
|
@@ -20,31 +20,31 @@ const Card = ({ className, hover, children, render, ref, ...rest })=>{
|
|
|
20
20
|
Card.displayName = 'Card';
|
|
21
21
|
const Header = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
22
22
|
ref: ref,
|
|
23
|
-
className: classnames('
|
|
23
|
+
className: classnames('byline-card-header', card_module["card-header"], className),
|
|
24
24
|
...props
|
|
25
25
|
});
|
|
26
26
|
Header.displayName = 'CardHeader';
|
|
27
27
|
const Title = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
28
28
|
ref: ref,
|
|
29
|
-
className: classnames('
|
|
29
|
+
className: classnames('byline-card-title', card_module["card-title"], className),
|
|
30
30
|
...props
|
|
31
31
|
});
|
|
32
32
|
Title.displayName = 'CardTitle';
|
|
33
33
|
const Description = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
34
34
|
ref: ref,
|
|
35
|
-
className: classnames("
|
|
35
|
+
className: classnames("byline-card-description", card_module["card-description"], className),
|
|
36
36
|
...props
|
|
37
37
|
});
|
|
38
38
|
Description.displayName = "CardDescription";
|
|
39
39
|
const Content = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
40
40
|
ref: ref,
|
|
41
|
-
className: classnames('
|
|
41
|
+
className: classnames('byline-card-content', card_module["card-content"], className),
|
|
42
42
|
...props
|
|
43
43
|
});
|
|
44
44
|
Content.displayName = 'CardContent';
|
|
45
45
|
const Footer = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
|
|
46
46
|
ref: ref,
|
|
47
|
-
className: classnames('
|
|
47
|
+
className: classnames('byline-card-footer', card_module["card-footer"], className),
|
|
48
48
|
...props
|
|
49
49
|
});
|
|
50
50
|
Footer.displayName = 'CardFooter';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.card-mqJaiW, .
|
|
4
|
+
:is(.card-mqJaiW, .byline-card) {
|
|
5
5
|
width: 100%;
|
|
6
6
|
max-width: 100%;
|
|
7
7
|
color: var(--foreground);
|
|
@@ -16,26 +16,26 @@
|
|
|
16
16
|
display: flex;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
:is(.card-hover-hvT4d6, .
|
|
19
|
+
:is(.card-hover-hvT4d6, .byline-card-hover) {
|
|
20
20
|
transition: background .2s ease-in-out;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
:is(.card-hover-hvT4d6:hover, .
|
|
23
|
+
:is(.card-hover-hvT4d6:hover, .byline-card-hover:hover) {
|
|
24
24
|
background: oklch(from var(--theme-50) 1 .03 h);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
:is(:is(.dark, [data-theme="dark"]) .card-hover-hvT4d6:hover, :is(.dark, [data-theme="dark"]) .
|
|
27
|
+
:is(:is(.dark, [data-theme="dark"]) .card-hover-hvT4d6:hover, :is(.dark, [data-theme="dark"]) .byline-card-hover:hover) {
|
|
28
28
|
background: oklch(from var(--canvas-800) .2 c h);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
:is(.card-header-XnoBkP, .
|
|
31
|
+
:is(.card-header-XnoBkP, .byline-card-header) {
|
|
32
32
|
flex-direction: column;
|
|
33
33
|
gap: .5rem;
|
|
34
34
|
padding: 1rem;
|
|
35
35
|
display: flex;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
:is(.card-title-JI7Lu3, .
|
|
38
|
+
:is(.card-title-JI7Lu3, .byline-card-title) {
|
|
39
39
|
color: var(--headings);
|
|
40
40
|
letter-spacing: -.015em;
|
|
41
41
|
font-size: 1.8rem;
|
|
@@ -43,17 +43,17 @@
|
|
|
43
43
|
line-height: 1;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
:is(.card-description-fwu7HE, .
|
|
46
|
+
:is(.card-description-fwu7HE, .byline-card-description) {
|
|
47
47
|
color: var(--muted);
|
|
48
48
|
font-size: .875rem;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
:is(.card-content-uhoZYJ, .
|
|
51
|
+
:is(.card-content-uhoZYJ, .byline-card-content) {
|
|
52
52
|
flex: 1;
|
|
53
53
|
padding: 0 1rem 1rem;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
:is(.card-footer-BxTa4b, .
|
|
56
|
+
:is(.card-footer-BxTa4b, .byline-card-footer) {
|
|
57
57
|
align-items: center;
|
|
58
58
|
padding: 0 1rem 1rem;
|
|
59
59
|
display: flex;
|
|
@@ -54,7 +54,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
|
|
|
54
54
|
onClick: handleRemoveClick,
|
|
55
55
|
onKeyDown: handleRemoveKeyDown,
|
|
56
56
|
children: /*#__PURE__*/ jsx(CloseIcon, {
|
|
57
|
-
className: classnames('
|
|
57
|
+
className: classnames('byline-chip-close-icon', chip_module.icon, chip_module["close-icon"])
|
|
58
58
|
})
|
|
59
59
|
}) : endIcon;
|
|
60
60
|
const appliedVariant = isSelected ? 'filled' : 'outlined';
|
|
@@ -65,7 +65,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
|
|
|
65
65
|
'aria-disabled': disabled || void 0,
|
|
66
66
|
'aria-pressed': isSelectable ? isSelected : void 0,
|
|
67
67
|
'aria-selected': isSelectable ? isSelected : void 0,
|
|
68
|
-
className: classnames('
|
|
68
|
+
className: classnames('byline-chip', `byline-chip-${variant}`, `byline-chip-${intent}`, `byline-chip-${size}`, {
|
|
69
69
|
selected: isSelected,
|
|
70
70
|
disabled,
|
|
71
71
|
removable: isRemovable
|
|
@@ -76,15 +76,15 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
|
|
|
76
76
|
children: /*#__PURE__*/ jsxs(Fragment, {
|
|
77
77
|
children: [
|
|
78
78
|
null != leadingIcon && /*#__PURE__*/ jsx("span", {
|
|
79
|
-
className: classnames('
|
|
79
|
+
className: classnames('byline-chip-icon-wrapper', chip_module.iconWrapper),
|
|
80
80
|
children: leadingIcon
|
|
81
81
|
}),
|
|
82
82
|
/*#__PURE__*/ jsx("span", {
|
|
83
|
-
className: classnames('
|
|
83
|
+
className: classnames('byline-chip-label', chip_module.label),
|
|
84
84
|
children: children
|
|
85
85
|
}),
|
|
86
86
|
null != trailingIcon && /*#__PURE__*/ jsx("span", {
|
|
87
|
-
className: classnames('
|
|
87
|
+
className: classnames('byline-chip-icon-wrapper', chip_module.iconWrapper),
|
|
88
88
|
children: trailingIcon
|
|
89
89
|
})
|
|
90
90
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.chip-AhhT7N, .
|
|
4
|
+
:is(.chip-AhhT7N, .byline-chip) {
|
|
5
5
|
--chip-font-size: .9rem;
|
|
6
6
|
--chip-height: 34px;
|
|
7
7
|
--chip-padding-y: .35rem;
|
|
@@ -26,38 +26,38 @@
|
|
|
26
26
|
display: inline-flex;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
:is(.chip-AhhT7N:disabled, .chip-AhhT7N[disabled], .
|
|
29
|
+
:is(.chip-AhhT7N:disabled, .chip-AhhT7N[disabled], .byline-chip:disabled, .byline-chip[disabled]) {
|
|
30
30
|
pointer-events: none;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
:is(.chip-AhhT7N:focus, .chip-AhhT7N:active, .
|
|
33
|
+
:is(.chip-AhhT7N:focus, .chip-AhhT7N:active, .byline-chip:focus, .byline-chip:active) {
|
|
34
34
|
outline-color: var(--ring-color);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
:is(.label-gboVZj, .
|
|
37
|
+
:is(.label-gboVZj, .byline-chip-label) {
|
|
38
38
|
white-space: nowrap;
|
|
39
39
|
align-items: center;
|
|
40
40
|
display: inline-flex;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
:is(.icon-Kyxxoz, .
|
|
43
|
+
:is(.icon-Kyxxoz, .byline-chip-icon) {
|
|
44
44
|
width: var(--chip-icon-size);
|
|
45
45
|
height: var(--chip-icon-size);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
:is(.iconWrapper-vJCUgN, .
|
|
48
|
+
:is(.iconWrapper-vJCUgN, .byline-chip-icon-wrapper) {
|
|
49
49
|
justify-content: center;
|
|
50
50
|
align-items: center;
|
|
51
51
|
line-height: 0;
|
|
52
52
|
display: inline-flex;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
:is(.close-icon-dsclyW, .
|
|
55
|
+
:is(.close-icon-dsclyW, .byline-chip-close-icon) {
|
|
56
56
|
width: calc(var(--chip-icon-size) * .9);
|
|
57
57
|
height: calc(var(--chip-icon-size) * .9);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
:is(.xs-APyCes, .
|
|
60
|
+
:is(.xs-APyCes, .byline-chip-xs) {
|
|
61
61
|
--chip-height: 24px;
|
|
62
62
|
--chip-padding-y: .15rem;
|
|
63
63
|
--chip-padding-x: .3rem;
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
gap: var(--gap-1);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
:is(.sm-J7CErO, .
|
|
69
|
+
:is(.sm-J7CErO, .byline-chip-sm) {
|
|
70
70
|
--chip-height: 28px;
|
|
71
71
|
--chip-padding-y: .2rem;
|
|
72
72
|
--chip-padding-x: .3rem;
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
--chip-icon-size: 1.2rem;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
:is(.md-Dqq6Vk, .
|
|
77
|
+
:is(.md-Dqq6Vk, .byline-chip-md) {
|
|
78
78
|
--chip-height: 32px;
|
|
79
79
|
--chip-padding-y: .25rem;
|
|
80
80
|
--chip-padding-x: .3rem;
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
--chip-icon-size: 1.3rem;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
:is(.lg-V_RSlk, .
|
|
85
|
+
:is(.lg-V_RSlk, .byline-chip-lg) {
|
|
86
86
|
--chip-gap: var(--gap-2);
|
|
87
87
|
--chip-height: 36px;
|
|
88
88
|
--chip-padding-y: .3rem;
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
--chip-icon-size: 1.35rem;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
:is(.xl-XTZIz8, .
|
|
94
|
+
:is(.xl-XTZIz8, .byline-chip-xl) {
|
|
95
95
|
--chip-gap: var(--gap-2);
|
|
96
96
|
--chip-height: 40px;
|
|
97
97
|
--chip-padding-y: .3rem;
|
|
@@ -100,79 +100,82 @@
|
|
|
100
100
|
--chip-icon-size: 1.4rem;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
:is(.filled-IPrtjU, .
|
|
103
|
+
:is(.filled-IPrtjU, .byline-chip-filled) {
|
|
104
104
|
color: var(--chip-variant-filled-foreground);
|
|
105
105
|
background-color: var(--chip-variant-filled);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
:is(.filled-IPrtjU:hover, .
|
|
108
|
+
:is(.filled-IPrtjU:hover, .byline-chip-filled:hover) {
|
|
109
109
|
background-color: var(--chip-variant-filled-hover);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
:is(.filled-IPrtjU:focus, .filled-IPrtjU:active, .
|
|
112
|
+
:is(.filled-IPrtjU:focus, .filled-IPrtjU:active, .byline-chip-filled:focus, .byline-chip-filled:active) {
|
|
113
113
|
--ring-color: var(--chip-ring-color);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
:is(.filled-IPrtjU:disabled, .filled-IPrtjU[disabled], .
|
|
116
|
+
:is(.filled-IPrtjU:disabled, .filled-IPrtjU[disabled], .byline-chip-filled:disabled, .byline-chip-filled[disabled]) {
|
|
117
117
|
background-color: var(--chip-variant-filled-disabled, oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * .85) h));
|
|
118
|
-
color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * .9) calc(c * .85)
|
|
118
|
+
color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * .9) calc(c * .85)
|
|
119
|
+
h));
|
|
119
120
|
}
|
|
120
121
|
|
|
121
|
-
:is(.filled-weak-R_EHbg, .
|
|
122
|
+
:is(.filled-weak-R_EHbg, .byline-chip-filled-weak) {
|
|
122
123
|
color: var(--chip-variant-filled-weak-foreground);
|
|
123
124
|
background-color: var(--chip-variant-filled-weak);
|
|
124
125
|
}
|
|
125
126
|
|
|
126
|
-
:is(.filled-weak-R_EHbg:hover, .
|
|
127
|
+
:is(.filled-weak-R_EHbg:hover, .byline-chip-filled-weak:hover) {
|
|
127
128
|
background-color: var(--chip-variant-filled-weak-hover);
|
|
128
129
|
}
|
|
129
130
|
|
|
130
|
-
:is(.filled-weak-R_EHbg:focus, .filled-weak-R_EHbg:active, .
|
|
131
|
+
:is(.filled-weak-R_EHbg:focus, .filled-weak-R_EHbg:active, .byline-chip-filled-weak:focus, .byline-chip-filled-weak:active) {
|
|
131
132
|
--ring-color: var(--chip-ring-color);
|
|
132
133
|
}
|
|
133
134
|
|
|
134
|
-
:is(.filled-weak-R_EHbg:disabled, .filled-weak-R_EHbg[disabled], .
|
|
135
|
+
:is(.filled-weak-R_EHbg:disabled, .filled-weak-R_EHbg[disabled], .byline-chip-filled-weak:disabled, .byline-chip-filled-weak[disabled]) {
|
|
135
136
|
background-color: var(--chip-variant-filled-weak-disabled, oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));
|
|
136
|
-
color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * .9)
|
|
137
|
+
color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * .9)
|
|
138
|
+
calc(c * .85) h));
|
|
137
139
|
}
|
|
138
140
|
|
|
139
|
-
:is(.outlined-ND2TjQ, .
|
|
141
|
+
:is(.outlined-ND2TjQ, .byline-chip-outlined) {
|
|
140
142
|
border: 1px solid var(--chip-variant-outlined-border);
|
|
141
143
|
color: var(--chip-variant-outlined-foreground);
|
|
142
144
|
background-color: var(--chip-variant-outlined);
|
|
143
145
|
}
|
|
144
146
|
|
|
145
|
-
:is(.outlined-ND2TjQ:disabled, .outlined-ND2TjQ[disabled], .
|
|
147
|
+
:is(.outlined-ND2TjQ:disabled, .outlined-ND2TjQ[disabled], .byline-chip-outlined:disabled, .byline-chip-outlined[disabled]) {
|
|
146
148
|
border-color: var(--chip-variant-outlined-border-disabled, oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
|
|
147
|
-
color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * .7)
|
|
149
|
+
color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * .7)
|
|
150
|
+
h));
|
|
148
151
|
}
|
|
149
152
|
|
|
150
|
-
:is(.outlined-ND2TjQ:hover, .
|
|
153
|
+
:is(.outlined-ND2TjQ:hover, .byline-chip-outlined:hover) {
|
|
151
154
|
background-color: var(--chip-variant-outlined-hover);
|
|
152
155
|
}
|
|
153
156
|
|
|
154
|
-
:is(.outlined-ND2TjQ:focus, .outlined-ND2TjQ:active, .
|
|
157
|
+
:is(.outlined-ND2TjQ:focus, .outlined-ND2TjQ:active, .byline-chip-outlined:focus, .byline-chip-outlined:active) {
|
|
155
158
|
--ring-color: var(--chip-ring-color);
|
|
156
159
|
}
|
|
157
160
|
|
|
158
|
-
:is(.text-mY_7iA, .
|
|
161
|
+
:is(.text-mY_7iA, .byline-chip-text) {
|
|
159
162
|
background-color: var(--chip-variant-text);
|
|
160
163
|
color: var(--chip-variant-text-foreground);
|
|
161
164
|
}
|
|
162
165
|
|
|
163
|
-
:is(.text-mY_7iA:disabled, .text-mY_7iA[disabled], .
|
|
166
|
+
:is(.text-mY_7iA:disabled, .text-mY_7iA[disabled], .byline-chip-text:disabled, .byline-chip-text[disabled]) {
|
|
164
167
|
color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * .5) h);
|
|
165
168
|
}
|
|
166
169
|
|
|
167
|
-
:is(.text-mY_7iA:hover, .
|
|
170
|
+
:is(.text-mY_7iA:hover, .byline-chip-text:hover) {
|
|
168
171
|
background-color: var(--chip-variant-text-hover);
|
|
169
172
|
}
|
|
170
173
|
|
|
171
|
-
:is(.text-mY_7iA:focus, .text-mY_7iA:active, .
|
|
174
|
+
:is(.text-mY_7iA:focus, .text-mY_7iA:active, .byline-chip-text:focus, .byline-chip-text:active) {
|
|
172
175
|
--ring-color: var(--chip-ring-color);
|
|
173
176
|
}
|
|
174
177
|
|
|
175
|
-
:is(.primary-Dknrel, .
|
|
178
|
+
:is(.primary-Dknrel, .byline-chip-primary) {
|
|
176
179
|
--chip-ring-color: var(--ring-primary);
|
|
177
180
|
--chip-variant-filled: var(--fill-primary-strong);
|
|
178
181
|
--chip-variant-filled-hover: var(--fill-primary-strong-hover);
|
|
@@ -192,7 +195,7 @@
|
|
|
192
195
|
--chip-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
|
|
193
196
|
}
|
|
194
197
|
|
|
195
|
-
:is(.secondary-Oeq6j4, .
|
|
198
|
+
:is(.secondary-Oeq6j4, .byline-chip-secondary) {
|
|
196
199
|
--chip-ring-color: var(--ring-secondary);
|
|
197
200
|
--chip-variant-filled: var(--fill-secondary-strong);
|
|
198
201
|
--chip-variant-filled-hover: var(--fill-secondary-strong-hover);
|
|
@@ -212,7 +215,7 @@
|
|
|
212
215
|
--chip-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
|
|
213
216
|
}
|
|
214
217
|
|
|
215
|
-
:is(.noeffect-DIkyR0, .
|
|
218
|
+
:is(.noeffect-DIkyR0, .byline-chip-noeffect) {
|
|
216
219
|
--chip-ring-color: var(--ring-noeffect);
|
|
217
220
|
--chip-variant-filled: var(--fill-noeffect-strong);
|
|
218
221
|
--chip-variant-filled-hover: var(--fill-noeffect-strong-hover);
|
|
@@ -232,7 +235,7 @@
|
|
|
232
235
|
--chip-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
|
|
233
236
|
}
|
|
234
237
|
|
|
235
|
-
:is(.success-Qciyio, .
|
|
238
|
+
:is(.success-Qciyio, .byline-chip-success) {
|
|
236
239
|
--chip-ring-color: var(--ring-success);
|
|
237
240
|
--chip-variant-filled: var(--fill-success-strong);
|
|
238
241
|
--chip-variant-filled-hover: var(--fill-success-strong-hover);
|
|
@@ -252,7 +255,7 @@
|
|
|
252
255
|
--chip-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
|
|
253
256
|
}
|
|
254
257
|
|
|
255
|
-
:is(.info-Ddpo4H, .
|
|
258
|
+
:is(.info-Ddpo4H, .byline-chip-info) {
|
|
256
259
|
--chip-ring-color: var(--ring-info);
|
|
257
260
|
--chip-variant-filled: var(--fill-info-strong);
|
|
258
261
|
--chip-variant-filled-hover: var(--fill-info-strong-hover);
|
|
@@ -272,7 +275,7 @@
|
|
|
272
275
|
--chip-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
|
|
273
276
|
}
|
|
274
277
|
|
|
275
|
-
:is(.warning-ua4NGH, .
|
|
278
|
+
:is(.warning-ua4NGH, .byline-chip-warning) {
|
|
276
279
|
--chip-ring-color: var(--ring-warning);
|
|
277
280
|
--chip-variant-filled: var(--fill-warning-strong);
|
|
278
281
|
--chip-variant-filled-hover: var(--fill-warning-strong-hover);
|
|
@@ -292,7 +295,7 @@
|
|
|
292
295
|
--chip-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
|
|
293
296
|
}
|
|
294
297
|
|
|
295
|
-
:is(.danger-ftQS7Y, .
|
|
298
|
+
:is(.danger-ftQS7Y, .byline-chip-danger) {
|
|
296
299
|
--chip-ring-color: var(--ring-danger);
|
|
297
300
|
--chip-variant-filled: var(--fill-danger-strong);
|
|
298
301
|
--chip-variant-filled-hover: var(--fill-danger-strong-hover);
|
|
@@ -5,7 +5,7 @@ const container_Container = function({ ref, className, children, ...rest }) {
|
|
|
5
5
|
return /*#__PURE__*/ jsx("div", {
|
|
6
6
|
ref: ref,
|
|
7
7
|
...rest,
|
|
8
|
-
className: classnames('
|
|
8
|
+
className: classnames('byline-container', container_module.container, className),
|
|
9
9
|
children: children
|
|
10
10
|
});
|
|
11
11
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.container-tSpizY, .
|
|
4
|
+
:is(.container-tSpizY, .byline-container) {
|
|
5
5
|
width: 100%;
|
|
6
6
|
max-width: 60rem;
|
|
7
7
|
margin: 0 auto;
|
|
@@ -9,19 +9,19 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@media (min-width: 66rem) {
|
|
12
|
-
:is(.container-tSpizY, .
|
|
12
|
+
:is(.container-tSpizY, .byline-container) {
|
|
13
13
|
max-width: 64rem;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
@media (min-width: 77rem) {
|
|
18
|
-
:is(.container-tSpizY, .
|
|
18
|
+
:is(.container-tSpizY, .byline-container) {
|
|
19
19
|
max-width: 74.375rem;
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
@media (min-width: 94rem) {
|
|
24
|
-
:is(.container-tSpizY, .
|
|
24
|
+
:is(.container-tSpizY, .byline-container) {
|
|
25
25
|
max-width: 87.5rem;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -10,7 +10,7 @@ function Root({ children, ...rest }) {
|
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
const Trigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Trigger, {
|
|
13
|
-
className: classnames('
|
|
13
|
+
className: classnames('byline-dropdown-trigger', className),
|
|
14
14
|
ref: ref,
|
|
15
15
|
...rest,
|
|
16
16
|
children: children
|
|
@@ -30,7 +30,7 @@ const Content = ({ ref, className, children, side, sideOffset, align, alignOffse
|
|
|
30
30
|
collisionPadding: collisionPadding,
|
|
31
31
|
children: /*#__PURE__*/ jsx(Menu.Popup, {
|
|
32
32
|
ref: ref,
|
|
33
|
-
className: classnames('
|
|
33
|
+
className: classnames('byline-dropdown-content', dropdown_module["dropdown-content"], className),
|
|
34
34
|
...rest,
|
|
35
35
|
children: children
|
|
36
36
|
})
|
|
@@ -38,28 +38,28 @@ const Content = ({ ref, className, children, side, sideOffset, align, alignOffse
|
|
|
38
38
|
Content.displayName = 'Content';
|
|
39
39
|
const Group = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Group, {
|
|
40
40
|
ref: ref,
|
|
41
|
-
className: classnames('
|
|
41
|
+
className: classnames('byline-dropdown-group', className),
|
|
42
42
|
...rest,
|
|
43
43
|
children: children
|
|
44
44
|
});
|
|
45
45
|
Group.displayName = 'Group';
|
|
46
46
|
const Item = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Item, {
|
|
47
47
|
ref: ref,
|
|
48
|
-
className: classnames('
|
|
48
|
+
className: classnames('byline-dropdown-item', dropdown_module["dropdown-item"], className),
|
|
49
49
|
...rest,
|
|
50
50
|
children: children
|
|
51
51
|
});
|
|
52
52
|
Item.displayName = 'Item';
|
|
53
53
|
const Label = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.GroupLabel, {
|
|
54
54
|
ref: ref,
|
|
55
|
-
className: classnames('
|
|
55
|
+
className: classnames('byline-dropdown-label', className),
|
|
56
56
|
...rest,
|
|
57
57
|
children: children
|
|
58
58
|
});
|
|
59
59
|
Label.displayName = 'Label';
|
|
60
60
|
const Separator = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(Menu.Separator, {
|
|
61
61
|
ref: ref,
|
|
62
|
-
className: classnames('
|
|
62
|
+
className: classnames('byline-dropdown-separator', dropdown_module["dropdown-separator"], className),
|
|
63
63
|
...props
|
|
64
64
|
});
|
|
65
65
|
Separator.displayName = 'Separator';
|
|
@@ -77,7 +77,7 @@ const SubContent = ({ ref, className, children, side, sideOffset, align, alignOf
|
|
|
77
77
|
collisionPadding: collisionPadding,
|
|
78
78
|
children: /*#__PURE__*/ jsx(Menu.Popup, {
|
|
79
79
|
ref: ref,
|
|
80
|
-
className: classnames('
|
|
80
|
+
className: classnames('byline-dropdown-subcontent', dropdown_module["dropdown-subcontent"], className),
|
|
81
81
|
...rest,
|
|
82
82
|
children: children
|
|
83
83
|
})
|
|
@@ -85,7 +85,7 @@ const SubContent = ({ ref, className, children, side, sideOffset, align, alignOf
|
|
|
85
85
|
SubContent.displayName = 'SubContent';
|
|
86
86
|
const SubTrigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.SubmenuTrigger, {
|
|
87
87
|
ref: ref,
|
|
88
|
-
className: classnames('
|
|
88
|
+
className: classnames('byline-dropdown-subtrigger', className),
|
|
89
89
|
...rest,
|
|
90
90
|
children: children
|
|
91
91
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .
|
|
4
|
+
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .byline-dropdown-content, .byline-dropdown-subcontent) {
|
|
5
5
|
z-index: 20;
|
|
6
6
|
background-color: var(--surface-panel-elevated);
|
|
7
7
|
will-change: transform, opacity;
|
|
@@ -15,23 +15,23 @@
|
|
|
15
15
|
animation-timing-function: cubic-bezier(.16, 1, .3, 1);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .
|
|
18
|
+
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .byline-dropdown-content, .byline-dropdown-subcontent)[data-side="top"] {
|
|
19
19
|
animation-name: slideDownAndFade-s05SMv;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .
|
|
22
|
+
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .byline-dropdown-content, .byline-dropdown-subcontent)[data-side="right"] {
|
|
23
23
|
animation-name: slideLeftAndFade-Zi7piX;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .
|
|
26
|
+
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .byline-dropdown-content, .byline-dropdown-subcontent)[data-side="bottom"] {
|
|
27
27
|
animation-name: slideUpAndFade-bRhQGn;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .
|
|
30
|
+
:is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .byline-dropdown-content, .byline-dropdown-subcontent)[data-side="left"] {
|
|
31
31
|
animation-name: slideRightAndFade-pN0UdB;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
:is(.dropdown-item-FFroRa, .
|
|
34
|
+
:is(.dropdown-item-FFroRa, .byline-dropdown-item) {
|
|
35
35
|
align-items: center;
|
|
36
36
|
gap: var(--gap-1);
|
|
37
37
|
width: 100%;
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
display: flex;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
:is(.dropdown-item-FFroRa:hover, .dropdown-item-FFroRa:focus, .dropdown-item-FFroRa[data-highlighted], .
|
|
49
|
+
:is(.dropdown-item-FFroRa:hover, .dropdown-item-FFroRa:focus, .dropdown-item-FFroRa[data-highlighted], .byline-dropdown-item:hover, .byline-dropdown-item:focus, .byline-dropdown-item[data-highlighted]) {
|
|
50
50
|
background-color: var(--surface-item-hover);
|
|
51
51
|
color: var(--surface-item-text-hover);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
:is(.dropdown-separator-scM_7b, .
|
|
54
|
+
:is(.dropdown-separator-scM_7b, .byline-dropdown-separator) {
|
|
55
55
|
background-color: var(--surface-panel-border);
|
|
56
56
|
width: 90%;
|
|
57
57
|
margin: var(--spacing-4) 0;
|
|
@@ -25,7 +25,7 @@ function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ar
|
|
|
25
25
|
return /*#__PURE__*/ jsx("button", {
|
|
26
26
|
type: "button",
|
|
27
27
|
onClick: handleClick,
|
|
28
|
-
className: classnames('
|
|
28
|
+
className: classnames('byline-hamburger', hamburger_module.hamburger, {
|
|
29
29
|
[hamburger_module.open]: open,
|
|
30
30
|
[hamburger_module.onDark]: 'onDark' === colorScheme,
|
|
31
31
|
[hamburger_module.onLight]: 'onLight' === colorScheme
|
|
@@ -35,10 +35,10 @@ function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ar
|
|
|
35
35
|
"aria-expanded": open,
|
|
36
36
|
...other,
|
|
37
37
|
children: /*#__PURE__*/ jsx("span", {
|
|
38
|
-
className: classnames('
|
|
38
|
+
className: classnames('byline-hamburger-box', hamburger_module.box),
|
|
39
39
|
"aria-hidden": "true",
|
|
40
40
|
children: /*#__PURE__*/ jsx("span", {
|
|
41
|
-
className: classnames('
|
|
41
|
+
className: classnames('byline-hamburger-inner', hamburger_module.inner)
|
|
42
42
|
})
|
|
43
43
|
})
|
|
44
44
|
});
|