@byline/ui 1.10.1 → 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/forms/form-renderer.js +19 -20
- 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 +14 -14
- 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/forms/form-renderer.tsx +44 -30
- 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
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.container-oQwpyX, .
|
|
4
|
+
:is(.container-oQwpyX, .byline-checkbox-container) {
|
|
5
5
|
width: 100%;
|
|
6
6
|
padding: 0;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
:is(.component-UIVxUt, .
|
|
9
|
+
:is(.component-UIVxUt, .byline-checkbox-component) {
|
|
10
10
|
align-items: center;
|
|
11
11
|
gap: var(--gap-2);
|
|
12
12
|
width: 100%;
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
display: flex;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
:is(.reverse-zym7zb, .
|
|
17
|
+
:is(.reverse-zym7zb, .byline-checkbox-reverse) {
|
|
18
18
|
flex-direction: row-reverse;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
:is(.checkbox-p0iZ1T, .
|
|
21
|
+
:is(.checkbox-p0iZ1T, .byline-checkbox) {
|
|
22
22
|
outline-offset: 2px;
|
|
23
23
|
border-radius: var(--border-radius-sm);
|
|
24
24
|
transition: all var(--transition-normal);
|
|
@@ -28,21 +28,21 @@
|
|
|
28
28
|
display: inline-flex;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
:is(.checkbox-p0iZ1T[data-checked], .
|
|
31
|
+
:is(.checkbox-p0iZ1T[data-checked], .byline-checkbox[data-checked]) {
|
|
32
32
|
outline-color: var(--ring-color);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
:is(.checkbox-p0iZ1T[data-disabled], .
|
|
35
|
+
:is(.checkbox-p0iZ1T[data-disabled], .byline-checkbox[data-disabled]) {
|
|
36
36
|
pointer-events: none;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
:is(.indicator-VoSV4Y, .
|
|
39
|
+
:is(.indicator-VoSV4Y, .byline-checkbox-indicator) {
|
|
40
40
|
justify-content: center;
|
|
41
41
|
align-items: center;
|
|
42
42
|
display: flex;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
:is(.icon-ETAzcD, .
|
|
45
|
+
:is(.icon-ETAzcD, .byline-checkbox-icon) {
|
|
46
46
|
width: 20px;
|
|
47
47
|
height: 20px;
|
|
48
48
|
color: var(--checkbox-icon-color);
|
|
@@ -51,86 +51,86 @@
|
|
|
51
51
|
transform: scale(.8);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
:is(.indicator-VoSV4Y[data-checked] .icon-ETAzcD, .
|
|
54
|
+
:is(.indicator-VoSV4Y[data-checked] .icon-ETAzcD, .byline-checkbox-indicator[data-checked] .byline-checkbox-icon) {
|
|
55
55
|
opacity: 1;
|
|
56
56
|
animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards checkBoxIn-q5l2Hl;
|
|
57
57
|
transform: scale(1);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
:is(.indicator-VoSV4Y[data-unchecked] .icon-ETAzcD, .
|
|
60
|
+
:is(.indicator-VoSV4Y[data-unchecked] .icon-ETAzcD, .byline-checkbox-indicator[data-unchecked] .byline-checkbox-icon) {
|
|
61
61
|
opacity: 0;
|
|
62
62
|
transform: scale(.8);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
:is(.label-XrpVKR, .
|
|
65
|
+
:is(.label-XrpVKR, .byline-checkbox-label) {
|
|
66
66
|
cursor: pointer;
|
|
67
67
|
color: var(--label-color);
|
|
68
68
|
margin-left: .25rem;
|
|
69
69
|
font-weight: 500;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
:is(.checkbox-p0iZ1T[data-disabled] ~ .label-XrpVKR, .
|
|
72
|
+
:is(.checkbox-p0iZ1T[data-disabled] ~ .label-XrpVKR, .byline-checkbox[data-disabled] ~ .byline-checkbox-label) {
|
|
73
73
|
pointer-events: none;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
:is(.errorText-B98PO8, .
|
|
76
|
+
:is(.errorText-B98PO8, .byline-dropdown-error-text) {
|
|
77
77
|
color: red;
|
|
78
78
|
margin-top: .25rem;
|
|
79
79
|
font-size: .875rem;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
:is(.sm-qprV45, .
|
|
82
|
+
:is(.sm-qprV45, .byline-checkbox-sm), :is(.sm-qprV45 .icon-ETAzcD, .byline-checkbox-sm .byline-checkbox-icon) {
|
|
83
83
|
width: 16px;
|
|
84
84
|
height: 16px;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
:is(.sm-qprV45 ~ .label-XrpVKR, .
|
|
87
|
+
:is(.sm-qprV45 ~ .label-XrpVKR, .byline-checkbox-sm ~ .byline-checkbox-label) {
|
|
88
88
|
font-size: .85rem;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
:is(.md-JptERm, .
|
|
91
|
+
:is(.md-JptERm, .byline-checkbox-md), :is(.md-JptERm .icon-ETAzcD, .byline-checkbox-md .byline-checkbox-icon) {
|
|
92
92
|
width: 18px;
|
|
93
93
|
height: 18px;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
:is(.md-JptERm ~ .label-XrpVKR, .
|
|
96
|
+
:is(.md-JptERm ~ .label-XrpVKR, .byline-checkbox-md ~ .byline-checkbox-label) {
|
|
97
97
|
font-size: .875rem;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
:is(.lg-oF4sRl, .
|
|
100
|
+
:is(.lg-oF4sRl, .byline-checkbox-lg) {
|
|
101
101
|
width: 20px;
|
|
102
102
|
height: 20px;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
:is(.lg-oF4sRl .icon-ETAzcD, .
|
|
105
|
+
:is(.lg-oF4sRl .icon-ETAzcD, .byline-checkbox-lg .byline-checkbox-icon) {
|
|
106
106
|
width: 22px;
|
|
107
107
|
height: 22px;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
:is(.lg-oF4sRl ~ .label-XrpVKR, .
|
|
110
|
+
:is(.lg-oF4sRl ~ .label-XrpVKR, .byline-checkbox-lg ~ .byline-checkbox-label) {
|
|
111
111
|
font-size: 1rem;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
:is(.outlined-JZPcbA, .
|
|
114
|
+
:is(.outlined-JZPcbA, .byline-checkbox-outlined) {
|
|
115
115
|
border: 2px solid var(--checkbox-variant-outlined-border);
|
|
116
116
|
--checkbox-icon-color: white;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
:is(.outlined-JZPcbA[data-checked], .
|
|
119
|
+
:is(.outlined-JZPcbA[data-checked], .byline-checkbox-outlined[data-checked]) {
|
|
120
120
|
--ring-color: var(--checkbox-variant-outline-ring-color);
|
|
121
121
|
background-color: var(--checkbox-variant-outlined);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
:is(.filled-kMP3C2, .
|
|
124
|
+
:is(.filled-kMP3C2, .byline-checkbox-filled) {
|
|
125
125
|
background-color: var(--checkbox-variant-filled);
|
|
126
126
|
--checkbox-icon-color: white;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
:is(.filled-kMP3C2[data-checked], .
|
|
129
|
+
:is(.filled-kMP3C2[data-checked], .byline-checkbox-filled[data-checked]) {
|
|
130
130
|
--ring-color: var(--checkbox-variant-outline-ring-color);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
:is(.primary-VUeFFC, .
|
|
133
|
+
:is(.primary-VUeFFC, .byline-checkbox-primary) {
|
|
134
134
|
--checkbox-variant-outlined-border: var(--fill-primary-strong);
|
|
135
135
|
--checkbox-variant-outlined: var(--fill-primary-strong);
|
|
136
136
|
--checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
--checkbox-icon-color: white;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
:is(.secondary-ZRma2z, .
|
|
142
|
+
:is(.secondary-ZRma2z, .byline-checkbox-secondary) {
|
|
143
143
|
--checkbox-variant-outlined-border: var(--fill-secondary-strong);
|
|
144
144
|
--checkbox-variant-outlined: var(--fill-secondary-strong);
|
|
145
145
|
--checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
--checkbox-icon-color: black;
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
-
:is(.noeffect-rdjjte, .
|
|
151
|
+
:is(.noeffect-rdjjte, .byline-checkbox-noeffect) {
|
|
152
152
|
--checkbox-variant-outlined-border: var(--fill-noeffect-strong);
|
|
153
153
|
--checkbox-variant-outlined: var(--fill-noeffect-strong);
|
|
154
154
|
--checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
--checkbox-icon-color: var(--text-on-noeffect-strong);
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
:is(.success-ocrgme, .
|
|
160
|
+
:is(.success-ocrgme, .byline-checkbox-success) {
|
|
161
161
|
--checkbox-variant-outlined-border: var(--fill-success-strong);
|
|
162
162
|
--checkbox-variant-outlined: var(--fill-success-strong);
|
|
163
163
|
--checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
--checkbox-icon-color: white;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
:is(.info-vm53Ck, .
|
|
169
|
+
:is(.info-vm53Ck, .byline-checkbox-info) {
|
|
170
170
|
--checkbox-variant-outlined-border: var(--fill-info-strong);
|
|
171
171
|
--checkbox-variant-outlined: var(--fill-info-strong);
|
|
172
172
|
--checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
--checkbox-icon-color: white;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
:is(.warning-Xc4GbK, .
|
|
178
|
+
:is(.warning-Xc4GbK, .byline-checkbox-warning) {
|
|
179
179
|
--checkbox-variant-outlined-border: var(--fill-warning-strong);
|
|
180
180
|
--checkbox-variant-outlined: var(--fill-warning-strong);
|
|
181
181
|
--checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
--checkbox-icon-color: var(--text-on-warning-strong);
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
:is(.danger-A2Iomw, .
|
|
187
|
+
:is(.danger-A2Iomw, .byline-checkbox-danger) {
|
|
188
188
|
--checkbox-variant-outlined-border: var(--fill-danger-strong);
|
|
189
189
|
--checkbox-variant-outlined: var(--fill-danger-strong);
|
|
190
190
|
--checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.text-DoybHX, .
|
|
4
|
+
:is(.text-DoybHX, .byline-error-text) {
|
|
5
5
|
color: var(--text-danger);
|
|
6
6
|
font-size: .875rem;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
:is(.sm-qLUSGk, .
|
|
9
|
+
:is(.sm-qLUSGk, .byline-error-text-sm) {
|
|
10
10
|
font-size: .85rem;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
:is(.md-Ov9z3C, .
|
|
13
|
+
:is(.md-Ov9z3C, .byline-error-text-md) {
|
|
14
14
|
font-size: .875rem;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
:is(.lg-JCKzCI, .
|
|
17
|
+
:is(.lg-JCKzCI, .byline-error-text-lg) {
|
|
18
18
|
font-size: .9rem;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
@@ -3,7 +3,7 @@ import classnames from "classnames";
|
|
|
3
3
|
import help_text_module from "./help-text.module.js";
|
|
4
4
|
function HelpText({ className, size, text }) {
|
|
5
5
|
return /*#__PURE__*/ jsx("p", {
|
|
6
|
-
className: classnames('
|
|
6
|
+
className: classnames('byline-help-text', help_text_module.text, size && help_text_module[size], className),
|
|
7
7
|
children: text
|
|
8
8
|
});
|
|
9
9
|
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.text-tefb0a, .
|
|
4
|
+
:is(.text-tefb0a, .byline-help-text) {
|
|
5
5
|
color: var(--muted);
|
|
6
6
|
font-size: .875rem;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
:is(.sm-nWkN9c, .
|
|
9
|
+
:is(.sm-nWkN9c, .byline-help-text-sm) {
|
|
10
10
|
font-size: .85rem;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
:is(.md-hbw9In, .
|
|
13
|
+
:is(.md-hbw9In, .byline-help-text-md) {
|
|
14
14
|
font-size: .875rem;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
:is(.lg-awNcfh, .
|
|
17
|
+
:is(.lg-awNcfh, .byline-help-text-lg) {
|
|
18
18
|
font-size: .9rem;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
@@ -3,7 +3,7 @@ import classnames from "classnames";
|
|
|
3
3
|
import input_adornment_module from "./input-adornment.module.js";
|
|
4
4
|
function InputAdornment({ position = 'start', margins = true, className, children, ...rest }) {
|
|
5
5
|
return /*#__PURE__*/ jsx("div", {
|
|
6
|
-
className: classnames('
|
|
6
|
+
className: classnames('byline-input-adornment', `byline-input-adornment-${position}`, input_adornment_module.adornment, {
|
|
7
7
|
[input_adornment_module.start]: 'start' === position
|
|
8
8
|
}, {
|
|
9
9
|
[input_adornment_module.end]: 'end' === position
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.adornment-JKPOkF, .
|
|
4
|
+
:is(.adornment-JKPOkF, .byline-input-adornment) {
|
|
5
5
|
white-space: nowrap;
|
|
6
6
|
align-items: center;
|
|
7
7
|
line-height: 0;
|
|
8
8
|
display: flex;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
:is(.start-dXXMnl, .
|
|
11
|
+
:is(.start-dXXMnl, .byline-input-adornment-start) {
|
|
12
12
|
justify-content: flex-start;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
:is(.end-dUE8qM, .
|
|
15
|
+
:is(.end-dUE8qM, .byline-input-adornment-end) {
|
|
16
16
|
justify-content: flex-end;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -6,7 +6,7 @@ import { HelpText } from "./help-text.js";
|
|
|
6
6
|
import input_module from "./input.module.js";
|
|
7
7
|
import { Label } from "./label.js";
|
|
8
8
|
const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize = 'md', intent = 'primary', required, label, startAdornment, endAdornment, placeHolder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', inputWrapperClassName, className, ...rest })=>/*#__PURE__*/ jsxs("div", {
|
|
9
|
-
className: classnames('
|
|
9
|
+
className: classnames('byline-input-wrapper', input_module["input-wrapper"], inputWrapperClassName),
|
|
10
10
|
children: [
|
|
11
11
|
null != label && /*#__PURE__*/ jsx(Label, {
|
|
12
12
|
id: id,
|
|
@@ -15,10 +15,10 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
|
|
|
15
15
|
label: label
|
|
16
16
|
}),
|
|
17
17
|
/*#__PURE__*/ jsxs("div", {
|
|
18
|
-
className: classnames('
|
|
18
|
+
className: classnames('byline-input-container', input_module["input-container"]),
|
|
19
19
|
children: [
|
|
20
20
|
null != startAdornment && /*#__PURE__*/ jsx("div", {
|
|
21
|
-
className: classnames('
|
|
21
|
+
className: classnames('byline-input-start-adornment', input_module["start-adornment"], input_module[variant]),
|
|
22
22
|
children: startAdornment
|
|
23
23
|
}),
|
|
24
24
|
/*#__PURE__*/ jsx("input", {
|
|
@@ -34,7 +34,7 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
|
|
|
34
34
|
"aria-required": required,
|
|
35
35
|
"aria-errormessage": errorText,
|
|
36
36
|
"aria-describedby": error ? `error-for-${id}` : void 0,
|
|
37
|
-
className: classnames('
|
|
37
|
+
className: classnames('byline-input', `byline-input-${variant}`, `byline-input-${inputSize}`, `byline-input-${intent}`, input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
|
|
38
38
|
[input_module["start-adornment-padding"]]: null != startAdornment
|
|
39
39
|
}, {
|
|
40
40
|
[input_module["end-adornment-padding"]]: null != endAdornment
|
|
@@ -44,7 +44,7 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
|
|
|
44
44
|
...rest
|
|
45
45
|
}),
|
|
46
46
|
null != endAdornment && /*#__PURE__*/ jsx("div", {
|
|
47
|
-
className: classnames('
|
|
47
|
+
className: classnames('byline-input-end-adornment', input_module["end-adornment"], input_module[variant]),
|
|
48
48
|
children: endAdornment
|
|
49
49
|
})
|
|
50
50
|
]
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.input-wrapper-OJAKML, .
|
|
4
|
+
:is(.input-wrapper-OJAKML, .byline-input-wrapper) {
|
|
5
5
|
gap: var(--gap-1);
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
display: flex;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
:is(.input-container-bU4yD2, .
|
|
10
|
+
:is(.input-container-bU4yD2, .byline-input-container) {
|
|
11
11
|
align-items: center;
|
|
12
12
|
gap: var(--gap-2);
|
|
13
13
|
width: 100%;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
position: relative;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
:is(.input-IWjcip, .
|
|
19
|
+
:is(.input-IWjcip, .byline-input) {
|
|
20
20
|
outline-offset: 2px;
|
|
21
21
|
gap: var(--gap-2);
|
|
22
22
|
width: 100%;
|
|
@@ -29,74 +29,74 @@
|
|
|
29
29
|
display: inline-flex;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
:is(.input-IWjcip:focus, .input-IWjcip:active, .
|
|
32
|
+
:is(.input-IWjcip:focus, .input-IWjcip:active, .byline-input:focus, .byline-input:active) {
|
|
33
33
|
outline-color: var(--ring-color);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
:is(.input-IWjcip:disabled, .input-IWjcip[disabled], .
|
|
36
|
+
:is(.input-IWjcip:disabled, .input-IWjcip[disabled], .byline-input:disabled, .byline-input[disabled]) {
|
|
37
37
|
pointer-events: none;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
:is(.label-zIFfZp, .
|
|
40
|
+
:is(.label-zIFfZp, .byline-input-label) {
|
|
41
41
|
color: var(--label-color);
|
|
42
42
|
font-size: .875rem;
|
|
43
43
|
font-weight: 500;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
:is(.sm-ZFjgnI, .
|
|
46
|
+
:is(.sm-ZFjgnI, .byline-input-sm) {
|
|
47
47
|
min-height: 32px;
|
|
48
48
|
padding: .25rem .5rem;
|
|
49
49
|
font-size: .875rem;
|
|
50
50
|
line-height: 0;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
:is(.md-unbc45, .
|
|
53
|
+
:is(.md-unbc45, .byline-input-md) {
|
|
54
54
|
min-height: 36px;
|
|
55
55
|
padding: .3rem .5rem;
|
|
56
56
|
font-size: 1rem;
|
|
57
57
|
line-height: 0;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
:is(.lg-gpW386, .
|
|
60
|
+
:is(.lg-gpW386, .byline-input-lg) {
|
|
61
61
|
min-height: 40px;
|
|
62
62
|
padding: .4rem .5rem;
|
|
63
63
|
font-size: 1.175rem;
|
|
64
64
|
line-height: 0;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
:is(.start-adornment-PjWsd5, .end-adornment-xFqztV, .
|
|
67
|
+
:is(.start-adornment-PjWsd5, .end-adornment-xFqztV, .byline-input-start-adornment, .byline-input-end-adornment) {
|
|
68
68
|
align-items: center;
|
|
69
69
|
display: flex;
|
|
70
70
|
position: absolute;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
:is(.start-adornment-PjWsd5, .
|
|
73
|
+
:is(.start-adornment-PjWsd5, .byline-input-start-adornment) {
|
|
74
74
|
left: 5px;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
:is(.end-adornment-xFqztV, .
|
|
77
|
+
:is(.end-adornment-xFqztV, .byline-input-end-adornment) {
|
|
78
78
|
right: 5px;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
:is(.help-text-aFXa9e, .
|
|
81
|
+
:is(.help-text-aFXa9e, .byline-input-help-text) {
|
|
82
82
|
color: var(--help-text-color);
|
|
83
83
|
font-size: .75rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
:is(.outlined-jwv7LI, .
|
|
86
|
+
:is(.outlined-jwv7LI, .byline-input-outlined) {
|
|
87
87
|
border: 1px solid var(--input-variant-outlined-border);
|
|
88
88
|
background-color: #0000;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
:is(.outlined-jwv7LI:hover, .
|
|
91
|
+
:is(.outlined-jwv7LI:hover, .byline-input-outlined:hover) {
|
|
92
92
|
border: 1px solid var(--input-variant-outlined-hover-border);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
:is(.outlined-jwv7LI:focus, .outlined-jwv7LI:active, .
|
|
95
|
+
:is(.outlined-jwv7LI:focus, .outlined-jwv7LI:active, .byline-input-outlined:focus, .byline-input-outlined:active) {
|
|
96
96
|
--ring-color: var(--input-variant-outline-ring-color);
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
:is(.underlined-CSLRKX, .
|
|
99
|
+
:is(.underlined-CSLRKX, .byline-input-underlined) {
|
|
100
100
|
border-bottom: 1px solid var(--input-variant-underlined-border);
|
|
101
101
|
gap: var(--gap-1);
|
|
102
102
|
background-color: var(--input-variant-underlined);
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
padding: .25rem .1rem;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
.
|
|
111
|
+
.byline-input-underlined.input-sm {
|
|
112
112
|
min-height: 26px;
|
|
113
113
|
padding: .25rem .1rem;
|
|
114
114
|
}
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
padding: .25rem .1rem;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
.
|
|
121
|
+
.byline-input-underlined.input-md {
|
|
122
122
|
min-height: 30px;
|
|
123
123
|
padding: .25rem .1rem;
|
|
124
124
|
}
|
|
@@ -128,28 +128,28 @@
|
|
|
128
128
|
padding: 0 .1rem;
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
.
|
|
131
|
+
.byline-input-underlined.input-lg {
|
|
132
132
|
min-height: 34px;
|
|
133
133
|
padding: 0 .1rem;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
:is(.underlined-CSLRKX:hover, .
|
|
136
|
+
:is(.underlined-CSLRKX:hover, .byline-input-underlined:hover) {
|
|
137
137
|
border-bottom: 1px solid var(--input-variant-underlined-hover-border);
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
:is(.underlined-CSLRKX:focus, .underlined-CSLRKX:active, .
|
|
140
|
+
:is(.underlined-CSLRKX:focus, .underlined-CSLRKX:active, .byline-input-underlined:focus, .byline-input-underlined:active) {
|
|
141
141
|
outline: none;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
:is(.filled-zNQ9B3, .
|
|
144
|
+
:is(.filled-zNQ9B3, .byline-input-filled) {
|
|
145
145
|
background-color: var(--input-variant-filled);
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
:is(.error-FQ2_hh, .
|
|
148
|
+
:is(.error-FQ2_hh, .byline-input-error), :is(.error-FQ2_hh:hover, .byline-input-error:hover) {
|
|
149
149
|
border: 1px solid var(--field-border-invalid);
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
-
:is(.error-FQ2_hh:focus, .error-FQ2_hh:active, .
|
|
152
|
+
:is(.error-FQ2_hh:focus, .error-FQ2_hh:active, .byline-input-error:focus, .byline-input-error:active) {
|
|
153
153
|
--ring-color: var(--field-ring-invalid);
|
|
154
154
|
}
|
|
155
155
|
|
|
@@ -157,11 +157,11 @@
|
|
|
157
157
|
padding-left: 2rem;
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
.
|
|
160
|
+
.byline-input-underlined.input-start-adornment-padding {
|
|
161
161
|
padding-left: 2rem;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
.
|
|
164
|
+
.byline-input-start-adornment-padding {
|
|
165
165
|
padding-left: 2rem;
|
|
166
166
|
}
|
|
167
167
|
|
|
@@ -169,11 +169,11 @@
|
|
|
169
169
|
padding-right: 2rem;
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
.
|
|
172
|
+
.byline-input-underlined.input-end-adornment-padding {
|
|
173
173
|
padding-right: 2rem;
|
|
174
174
|
}
|
|
175
175
|
|
|
176
|
-
.
|
|
176
|
+
.byline-input-end-adornment-padding {
|
|
177
177
|
padding-right: 2rem;
|
|
178
178
|
}
|
|
179
179
|
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
left: 0;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
|
-
.
|
|
184
|
+
.byline-input-underlined.input-start-adornment {
|
|
185
185
|
left: 0;
|
|
186
186
|
}
|
|
187
187
|
|
|
@@ -189,11 +189,11 @@
|
|
|
189
189
|
right: 0;
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
.
|
|
192
|
+
.byline-input-underlined.input-end-adornment {
|
|
193
193
|
right: 0;
|
|
194
194
|
}
|
|
195
195
|
|
|
196
|
-
:is(.primary-SHCX1n, .
|
|
196
|
+
:is(.primary-SHCX1n, .byline-input-primary) {
|
|
197
197
|
--input-variant-outlined-border: var(--stroke-primary);
|
|
198
198
|
--input-variant-outlined-hover-border: var(--stroke-primary-hover);
|
|
199
199
|
--input-variant-outline-ring-color: var(--ring-primary);
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
--input-variant-filled: var(--fill-primary-weak);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
:is(.secondary-ykH7ET, .
|
|
205
|
+
:is(.secondary-ykH7ET, .byline-input-secondary) {
|
|
206
206
|
--input-variant-outlined-border: var(--stroke-secondary);
|
|
207
207
|
--input-variant-outlined-hover-border: var(--stroke-secondary-hover);
|
|
208
208
|
--input-variant-outline-ring-color: var(--ring-secondary);
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
--input-variant-filled: var(--fill-secondary-weak);
|
|
212
212
|
}
|
|
213
213
|
|
|
214
|
-
:is(.noeffect-aujnaG, .
|
|
214
|
+
:is(.noeffect-aujnaG, .byline-input-noeffect) {
|
|
215
215
|
--input-variant-outlined-border: var(--stroke-noeffect);
|
|
216
216
|
--input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
|
|
217
217
|
--input-variant-outline-ring-color: var(--ring-noeffect);
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
--input-variant-filled: var(--fill-noeffect-weak);
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
:is(.success-VsDfv9, .
|
|
223
|
+
:is(.success-VsDfv9, .byline-input-success) {
|
|
224
224
|
--input-variant-outlined-border: var(--stroke-success);
|
|
225
225
|
--input-variant-outlined-hover-border: var(--stroke-success-hover);
|
|
226
226
|
--input-variant-outline-ring-color: var(--ring-success);
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
--input-variant-filled: var(--fill-success-weak);
|
|
230
230
|
}
|
|
231
231
|
|
|
232
|
-
:is(.info-ogHmno, .
|
|
232
|
+
:is(.info-ogHmno, .byline-input-info) {
|
|
233
233
|
--input-variant-outlined-border: var(--stroke-info);
|
|
234
234
|
--input-variant-outlined-hover-border: var(--stroke-info-hover);
|
|
235
235
|
--input-variant-outline-ring-color: var(--ring-info);
|
|
@@ -238,7 +238,7 @@
|
|
|
238
238
|
--input-variant-filled: var(--fill-info-weak);
|
|
239
239
|
}
|
|
240
240
|
|
|
241
|
-
:is(.warning-FQYlHl, .
|
|
241
|
+
:is(.warning-FQYlHl, .byline-input-warning) {
|
|
242
242
|
--input-variant-outlined-border: var(--stroke-warning);
|
|
243
243
|
--input-variant-outlined-hover-border: var(--stroke-warning-hover);
|
|
244
244
|
--input-variant-outline-ring-color: var(--ring-warning);
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
--input-variant-filled: var(--fill-warning-weak);
|
|
248
248
|
}
|
|
249
249
|
|
|
250
|
-
:is(.danger-patit2, .
|
|
250
|
+
:is(.danger-patit2, .byline-input-danger) {
|
|
251
251
|
--input-variant-outlined-border: var(--stroke-danger);
|
|
252
252
|
--input-variant-outlined-hover-border: var(--stroke-danger-hover);
|
|
253
253
|
--input-variant-outline-ring-color: var(--ring-danger);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
|
|
2
2
|
|
|
3
3
|
@layer byline-components {
|
|
4
|
-
:is(.label-pYbboO, .
|
|
4
|
+
:is(.label-pYbboO, .byline-label) {
|
|
5
5
|
color: var(--text);
|
|
6
6
|
font-weight: 500;
|
|
7
7
|
display: block;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
:is(.required-UDJyfk, .
|
|
10
|
+
:is(.required-UDJyfk, .byline-label-required) {
|
|
11
11
|
color: var(--text-danger);
|
|
12
12
|
}
|
|
13
13
|
}
|
|
@@ -30,7 +30,7 @@ const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref:
|
|
|
30
30
|
});
|
|
31
31
|
const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup, {
|
|
32
32
|
ref: forwardedRef,
|
|
33
|
-
className: classnames('
|
|
33
|
+
className: classnames('byline-radio-group', radio_group_module[direction], className),
|
|
34
34
|
...props,
|
|
35
35
|
children: children
|
|
36
36
|
});
|