@ebay/skin 19.34.0 → 19.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/accordion/accordion.css +0 -2
  2. package/dist/alert-dialog/alert-dialog.css +16 -6
  3. package/dist/avatar/avatar.css +23 -5
  4. package/dist/breadcrumbs/breadcrumbs.css +13 -0
  5. package/dist/button/button.css +65 -11
  6. package/dist/calendar/calendar.css +30 -3
  7. package/dist/carousel/carousel.css +24 -12
  8. package/dist/ccd/ccd.css +4 -0
  9. package/dist/checkbox/checkbox.css +16 -2
  10. package/dist/chip/chip.css +7 -3
  11. package/dist/chips-combobox/chips-combobox.css +18 -1
  12. package/dist/combobox/combobox.css +37 -15
  13. package/dist/confirm-dialog/confirm-dialog.css +16 -6
  14. package/dist/cta-button/cta-button.css +20 -10
  15. package/dist/date-textbox/date-textbox.css +6 -1
  16. package/dist/details/details.css +4 -0
  17. package/dist/dialog/dialog.css +19 -0
  18. package/dist/donut-chart/donut-chart.css +8 -0
  19. package/dist/drawer-dialog/drawer-dialog.css +16 -6
  20. package/dist/education-notice/education-notice.css +12 -0
  21. package/dist/eek/eek.css +28 -0
  22. package/dist/field/field.css +23 -0
  23. package/dist/file-input/file-input.css +12 -1
  24. package/dist/file-preview-card/file-preview-card.css +3 -9
  25. package/dist/file-preview-card-group/file-preview-card-group.css +3 -0
  26. package/dist/filter-button/filter-button.css +8 -1
  27. package/dist/filter-chip/filter-chip.css +13 -28
  28. package/dist/filter-menu/filter-menu.css +24 -4
  29. package/dist/filter-menu-button/filter-menu-button.css +26 -4
  30. package/dist/flag/flag.css +252 -0
  31. package/dist/floating-label/floating-label.css +20 -2
  32. package/dist/fullscreen-dialog/fullscreen-dialog.css +12 -2
  33. package/dist/global/global.css +4 -0
  34. package/dist/icon-button/icon-button.css +24 -0
  35. package/dist/infotip/infotip.css +35 -11
  36. package/dist/inline-notice/inline-notice.css +5 -0
  37. package/dist/item-tile/item-tile.css +0 -1
  38. package/dist/layout-grid/layout-grid.css +7 -0
  39. package/dist/lightbox-dialog/lightbox-dialog.css +29 -7
  40. package/dist/link/link.css +6 -4
  41. package/dist/list/list.css +15 -3
  42. package/dist/listbox/listbox.css +22 -10
  43. package/dist/listbox-button/listbox-button.css +34 -8
  44. package/dist/menu/menu.css +5 -21
  45. package/dist/menu-button/menu-button.css +35 -10
  46. package/dist/number-input/number-input.css +17 -1
  47. package/dist/page-grid/page-grid.css +4 -3
  48. package/dist/page-notice/page-notice.css +21 -1
  49. package/dist/pagination/pagination.css +22 -6
  50. package/dist/panel-dialog/panel-dialog.css +20 -6
  51. package/dist/phone-input/phone-input.css +20 -0
  52. package/dist/progress-bar/progress-bar.css +6 -1
  53. package/dist/progress-bar-expressive/progress-bar-expressive.css +85 -61
  54. package/dist/progress-spinner/progress-spinner.css +2 -0
  55. package/dist/progress-stepper/progress-stepper.css +24 -0
  56. package/dist/radio/radio.css +16 -2
  57. package/dist/section-notice/section-notice.css +16 -0
  58. package/dist/section-title/section-title.css +14 -2
  59. package/dist/segmented-buttons/segmented-buttons.css +13 -3
  60. package/dist/select/select.css +17 -5
  61. package/dist/selection-chip/selection-chip.css +9 -20
  62. package/dist/skeleton/skeleton.css +23 -0
  63. package/dist/snackbar-dialog/snackbar-dialog.css +15 -4
  64. package/dist/star-rating/star-rating.css +2 -0
  65. package/dist/star-rating-select/star-rating-select.css +8 -1
  66. package/dist/svg/icon/icon-live-bag-16.svg +1 -1
  67. package/dist/svg/icon/icon-live-bag-20.svg +1 -1
  68. package/dist/svg/icon/icon-live-bag-24.svg +1 -1
  69. package/dist/svg/icon/icon-live-bag-filled-24.svg +1 -1
  70. package/dist/svg/icon/icon-live-bag-thin-16.svg +1 -1
  71. package/dist/svg/icons.svg +5 -5
  72. package/dist/switch/switch.css +8 -21
  73. package/dist/table/table.css +47 -0
  74. package/dist/tabs/tabs.css +0 -5
  75. package/dist/textbox/textbox.css +9 -20
  76. package/dist/toast-dialog/toast-dialog.css +9 -1
  77. package/dist/toggle-button/toggle-button.css +32 -0
  78. package/dist/toggle-button-group/toggle-button-group.css +16 -0
  79. package/dist/tooltip/tooltip.css +37 -14
  80. package/dist/tourtip/tourtip.css +43 -16
  81. package/dist/typography/typography.css +20 -0
  82. package/dist/utility/utility.css +7 -0
  83. package/dist/video/video.css +23 -1
  84. package/eslint.config.mjs +7 -5
  85. package/package.json +1 -1
package/dist/skeleton/skeleton.css CHANGED
@@ -18,16 +18,19 @@
18
18
  animation: skeleton-fade-in var(--motion-duration-medium-2)
19
19
  var(--motion-easing-continuous);
20
20
  }
21
+
21
22
  ::view-transition-old(skeleton-transition-*) {
22
23
  animation: skeleton-fade-out var(--motion-duration-short-3)
23
24
  var(--motion-easing-continuous);
24
25
  }
26
+
25
27
  .skeleton {
26
28
  container-name: skeleton-container;
27
29
  container-type: inline-size;
28
30
  cursor: progress;
29
31
  width: 100%;
30
32
  }
33
+
31
34
  .skeleton__avatar,
32
35
  .skeleton__button,
33
36
  .skeleton__image,
@@ -41,52 +44,64 @@
41
44
  height: 48px;
42
45
  width: 48px;
43
46
  }
47
+
44
48
  .skeleton__button {
45
49
  border-radius: var(--btn-border-radius, 20px);
46
50
  height: 40px;
47
51
  }
52
+
48
53
  .skeleton__button--small {
49
54
  border-radius: var(--btn-border-radius, 16px);
50
55
  height: 32px;
51
56
  }
57
+
52
58
  .skeleton__button--large {
53
59
  border-radius: var(--btn-border-radius, 24px);
54
60
  height: 48px;
55
61
  }
62
+
56
63
  .skeleton__text {
57
64
  border-radius: var(--text-border-radius, 3px);
58
65
  height: 16px;
59
66
  width: calc(100% - var(--spacing-300));
60
67
  }
68
+
61
69
  .skeleton__text:after {
62
70
  height: 16px;
63
71
  margin-top: calc(16px + var(--spacing-100));
64
72
  }
73
+
65
74
  .skeleton__text--large {
66
75
  height: 24px;
67
76
  }
77
+
68
78
  .skeleton__text--large:after {
69
79
  height: 24px;
70
80
  margin-top: calc(24px + var(--spacing-100));
71
81
  }
82
+
72
83
  .skeleton__text--multiline {
73
84
  margin-bottom: var(--spacing-300);
74
85
  position: relative;
75
86
  width: calc(100% - var(--spacing-300));
76
87
  }
88
+
77
89
  .skeleton__text--multiline:after {
78
90
  background: inherit;
79
91
  content: "";
80
92
  position: absolute;
81
93
  width: calc(100% - var(--spacing-700));
82
94
  }
95
+
83
96
  .skeleton__text--large.skeleton__text--multiline {
84
97
  margin-bottom: var(--spacing-400);
85
98
  }
99
+
86
100
  .skeleton__textbox {
87
101
  border-radius: var(--textbox-border-radius, var(--border-radius-50));
88
102
  height: 48px;
89
103
  }
104
+
90
105
  .skeleton__image {
91
106
  border-radius: var(--image-border-radius, var(--border-radius-50));
92
107
  height: 100%;
@@ -101,6 +116,7 @@
101
116
  top: 0;
102
117
  width: 100%;
103
118
  }
119
+
104
120
  span.skeleton__avatar,
105
121
  span.skeleton__button,
106
122
  span.skeleton__image,
@@ -108,6 +124,7 @@ span.skeleton__text,
108
124
  span.skeleton__textbox {
109
125
  display: inline-block;
110
126
  }
127
+
111
128
  span.skeleton__avatar:not(:last-child),
112
129
  span.skeleton__button:not(:last-child),
113
130
  span.skeleton__image:not(:last-child),
@@ -115,6 +132,7 @@ span.skeleton__text:not(:last-child),
115
132
  span.skeleton__textbox:not(:last-child) {
116
133
  margin-inline-end: var(--spacing-100);
117
134
  }
135
+
118
136
  div.skeleton__avatar:not(:last-child),
119
137
  div.skeleton__button:not(:last-child),
120
138
  div.skeleton__image:not(:last-child),
@@ -122,18 +140,23 @@ div.skeleton__text:not(:last-child),
122
140
  div.skeleton__textbox:not(:last-child) {
123
141
  margin-block-end: var(--spacing-150);
124
142
  }
143
+
125
144
  .skeleton--on-secondary {
126
145
  --skeleton-background: var(--color-loading-fill-on-secondary);
127
146
  }
147
+
128
148
  .skeleton--purple {
129
149
  --skeleton-background: var(--color-gradient-ai-purple-subtle);
130
150
  }
151
+
131
152
  .skeleton--green {
132
153
  --skeleton-background: var(--color-gradient-ai-green-subtle);
133
154
  }
155
+
134
156
  .skeleton--blue {
135
157
  --skeleton-background: var(--color-gradient-ai-blue-subtle);
136
158
  }
159
+
137
160
  @media (prefers-reduced-motion: no-preference) {
138
161
  @keyframes on-primary {
139
162
  0% {
package/dist/snackbar-dialog/snackbar-dialog.css CHANGED
@@ -14,10 +14,6 @@
14
14
  );
15
15
  bottom: 40px;
16
16
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
17
- color: var(
18
- --snackbar-dialog-foreground-color,
19
- var(--color-foreground-on-inverse)
20
- );
21
17
  left: var(--spacing-100);
22
18
  margin: auto;
23
19
  max-height: 40vh;
@@ -27,43 +23,57 @@
27
23
  transform: translateY(0);
28
24
  will-change: opacity, transform;
29
25
  z-index: 2;
26
+ color: var(
27
+ --snackbar-dialog-foreground-color,
28
+ var(--color-foreground-on-inverse)
29
+ );
30
30
  }
31
+
31
32
  .snackbar-dialog--transition {
32
33
  transition:
33
34
  opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
34
35
  transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
35
36
  }
37
+
36
38
  .snackbar-dialog--hide-init,
37
39
  .snackbar-dialog--show {
38
40
  display: block;
39
41
  opacity: 1;
40
42
  transform: translateY(0);
41
43
  }
44
+
42
45
  .snackbar-dialog--hide,
43
46
  .snackbar-dialog--show-init {
44
47
  display: block;
45
48
  opacity: 0;
46
49
  transform: translateY(110%);
47
50
  }
51
+
48
52
  .snackbar-dialog__window {
49
53
  display: flex;
50
54
  margin: var(--spacing-200) var(--spacing-300);
51
55
  }
56
+
52
57
  .snackbar-dialog__window--column {
53
58
  flex-direction: column;
54
59
  }
60
+
55
61
  .snackbar-dialog__main {
56
62
  margin-inline-end: var(--spacing-400);
57
63
  }
64
+
58
65
  .snackbar-dialog__main p {
59
66
  margin: 0;
60
67
  }
68
+
61
69
  .snackbar-dialog__actions {
62
70
  margin-inline-start: auto;
63
71
  }
72
+
64
73
  .snackbar-dialog__window--column .snackbar-dialog__actions {
65
74
  margin-top: var(--spacing-200);
66
75
  }
76
+
67
77
  .snackbar-dialog__actions .fake-link {
68
78
  color: var(
69
79
  --snackbar-dialog-foreground-color,
@@ -81,6 +91,7 @@
81
91
  );
82
92
  text-decoration: underline;
83
93
  }
94
+
84
95
  @media (min-width: 512px) {
85
96
  .snackbar-dialog {
86
97
  bottom: 20px;
package/dist/star-rating/star-rating.css CHANGED
@@ -8,10 +8,12 @@ svg.star-rating {
8
8
  vertical-align: middle;
9
9
  width: 84px;
10
10
  }
11
+
11
12
  svg.star-rating__icon {
12
13
  height: 16px;
13
14
  width: 16px;
14
15
  }
16
+
15
17
  div.star-rating[data-stars^="1"] svg:nth-child(-n + 1),
16
18
  div.star-rating[data-stars^="2"] svg:nth-child(-n + 2),
17
19
  div.star-rating[data-stars^="3"] svg:nth-child(-n + 3),
package/dist/star-rating-select/star-rating-select.css CHANGED
@@ -2,11 +2,13 @@ div.star-rating-select {
2
2
  cursor: pointer;
3
3
  display: inline-block;
4
4
  }
5
+
5
6
  span.star-rating-select__radio {
6
7
  display: inline-flex;
7
8
  position: relative;
8
9
  vertical-align: text-top;
9
10
  }
11
+
10
12
  span.star-rating-select__radio svg {
11
13
  display: inline-block;
12
14
  fill: currentColor;
@@ -15,14 +17,17 @@ span.star-rating-select__radio svg {
15
17
  stroke-width: 0;
16
18
  vertical-align: middle;
17
19
  }
20
+
18
21
  span.star-rating-select__radio-icon {
19
22
  display: inline-flex;
20
23
  outline-offset: 1px;
21
24
  }
25
+
22
26
  span.star-rating-select__radio-icon svg {
23
27
  height: 16px;
24
28
  width: 16px;
25
29
  }
30
+
26
31
  span.star-rating-select__radio input.star-rating-select__control[type="radio"] {
27
32
  cursor: pointer;
28
33
  font-size: 100%;
@@ -39,17 +44,19 @@ span.star-rating-select__radio
39
44
  input.star-rating-select__control[type="radio"]:focus
40
45
  + span.star-rating-select__radio-icon {
41
46
  outline: 1px auto;
42
- outline-color: var(--radio-outline, var(--color-foreground-secondary));
43
47
  outline-offset: 2px;
48
+ outline-color: var(--radio-outline, var(--color-foreground-secondary));
44
49
  }
45
50
  span.star-rating-select__radio
46
51
  input.star-rating-select__control[type="radio"]:focus:not(:focus-visible)
47
52
  + span.star-rating-select__radio-icon {
48
53
  outline: none;
49
54
  }
55
+
50
56
  div.star-rating-select span.star-rating-select__radio-icon svg {
51
57
  --color-star-rating-full: var(--color-star-rating-unfilled, transparent);
52
58
  }
59
+
53
60
  div.star-rating-select
54
61
  input.star-rating-select__control--filled
55
62
  + span.star-rating-select__radio-icon
package/dist/svg/icon/icon-live-bag-16.svg CHANGED
@@ -1,5 +1,5 @@
1
1
  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
- d="M8 0c1.243 0 2.326.849 2.623 2.056L11.103 4h2.83C14.524 4 15 4.478 15 5.066v5.601A4.333 4.333 0 0 1 10.667 15H5.333A4.333 4.333 0 0 1 1 10.667v-5.6C1 4.476 1.478 4 2.066 4h2.831l.479-1.944.065-.222A2.702 2.702 0 0 1 8 0ZM3 10.667A2.333 2.333 0 0 0 5.333 13h5.334A2.333 2.333 0 0 0 13 10.667V6h-1.405l.126.51.02.101a1 1 0 0 1-1.932.476l-.03-.098L9.535 6h-3.07l-.244.99a1 1 0 1 1-1.942-.48L4.405 6H3v4.667ZM6.7 8.11c0-.413.423-.679.787-.522l.072.037 2.303 1.39.065.045c.28.224.28.656 0 .88l-.065.045-2.303 1.39a.567.567 0 0 1-.86-.485V8.11ZM8 2a.702.702 0 0 0-.644.42l-.038.114L6.957 4h2.085l-.361-1.466A.702.702 0 0 0 8 2Z"
3
+ d="M3.437 1.428A1 1 0 0 1 4.579 3.07 5.993 5.993 0 0 0 2 8a5.992 5.992 0 0 0 2.58 4.93 1 1 0 0 1-1.143 1.641A7.992 7.992 0 0 1 0 8a7.994 7.994 0 0 1 3.437-6.572Zm7.735.25a1 1 0 0 1 1.391-.25A7.994 7.994 0 0 1 16 8a7.992 7.992 0 0 1-3.438 6.571 1 1 0 1 1-1.141-1.641A5.993 5.993 0 0 0 14 8a5.993 5.993 0 0 0-2.58-4.93 1 1 0 0 1-.248-1.392Zm-6.353 2.9a1.001 1.001 0 0 1 1.363 1.464 2.661 2.661 0 0 0-.853 1.956c0 .772.327 1.466.852 1.955a1 1 0 1 1-1.363 1.464A4.66 4.66 0 0 1 3.33 7.998c0-1.35.575-2.57 1.49-3.42Zm4.947.05a1.001 1.001 0 0 1 1.414-.05 4.661 4.661 0 0 1 1.49 3.42 4.66 4.66 0 0 1-1.49 3.419 1 1 0 0 1-1.362-1.464 2.66 2.66 0 0 0 .852-1.955 2.66 2.66 0 0 0-.853-1.956 1 1 0 0 1-.051-1.413ZM7.999 6.666a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666Z"
4
4
  />
5
5
  </svg>
package/dist/svg/icon/icon-live-bag-20.svg CHANGED
@@ -1,5 +1,5 @@
1
1
  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
- d="M10 0a3.11 3.11 0 0 1 3.025 2.39L13.648 5h3.769c.598 0 1.083.485 1.083 1.083v7.25a5.167 5.167 0 0 1-5.167 5.167H6.667A5.167 5.167 0 0 1 1.5 13.333v-7.25C1.5 5.485 1.985 5 2.583 5h3.77l.622-2.61A3.11 3.11 0 0 1 10 0ZM3.5 13.333A3.167 3.167 0 0 0 6.667 16.5h6.666a3.167 3.167 0 0 0 3.167-3.167V7h-2.376l.183.769.018.1a1 1 0 0 1-1.935.461l-.029-.099L12.068 7H7.933L7.64 8.231a1 1 0 1 1-1.946-.462L5.877 7H3.5v6.333Zm4.715-3.447a.76.76 0 0 1 1.056-.7l.096.05 3.09 1.864.085.06a.76.76 0 0 1 0 1.18l-.086.06-3.089 1.865a.76.76 0 0 1-1.152-.652V9.886ZM10 2c-.514 0-.96.353-1.08.853L8.41 5h3.182l-.512-2.147A1.11 1.11 0 0 0 10 2Z"
3
+ d="M4.158 1.883a1 1 0 0 1 1.17 1.623l-.037.026A7.988 7.988 0 0 0 2 10a7.99 7.99 0 0 0 3.327 6.495 1 1 0 1 1-1.169 1.622A9.99 9.99 0 0 1 0 10a9.988 9.988 0 0 1 4.112-8.083l.046-.034Zm10.288.226a1 1 0 0 1 1.396-.226l.046.034A9.988 9.988 0 0 1 20 10a9.99 9.99 0 0 1-4.158 8.117 1 1 0 0 1-1.17-1.622A7.99 7.99 0 0 0 18 10a7.989 7.989 0 0 0-3.291-6.468l-.037-.026a1 1 0 0 1-.226-1.397ZM6.098 5.442a1 1 0 0 1 1.301 1.52A3.99 3.99 0 0 0 6 10a3.99 3.99 0 0 0 1.396 3.036 1 1 0 0 1-1.303 1.518A5.99 5.99 0 0 1 4 10a5.99 5.99 0 0 1 2.098-4.559Zm6.394.11a1 1 0 0 1 1.41-.11A5.991 5.991 0 0 1 16 10.001a5.99 5.99 0 0 1-2.093 4.554 1 1 0 0 1-1.303-1.518A3.99 3.99 0 0 0 14 10.001a3.99 3.99 0 0 0-1.4-3.04 1 1 0 0 1-.108-1.41ZM10 8.335a1.667 1.667 0 1 1-.001 3.333A1.667 1.667 0 0 1 10 8.335Z"
4
4
  />
5
5
  </svg>
package/dist/svg/icon/icon-live-bag-24.svg CHANGED
@@ -1,5 +1,5 @@
1
1
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
- d="M12 0a3.517 3.517 0 0 1 3.426 2.723L16.186 6H20.9A1.1 1.1 0 0 1 22 7.1V16a6 6 0 0 1-6 6H8a6 6 0 0 1-6-6V7.1A1.1 1.1 0 0 1 3.1 6h4.713l.761-3.277.081-.294A3.517 3.517 0 0 1 12 0ZM4 16a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V8h-3.35l.325 1.4.017.1a1 1 0 0 1-1.938.45l-.029-.1L14.597 8H9.403l-.428 1.85a1.001 1.001 0 0 1-1.95-.45L7.35 8H4v8Zm5.858-4.237a.912.912 0 0 1 1.267-.84l.116.06 3.706 2.236.104.072a.913.913 0 0 1 0 1.417l-.104.072-3.706 2.238a.912.912 0 0 1-1.383-.782v-4.473ZM12 2c-.706 0-1.318.487-1.477 1.174L9.867 6h4.266l-.655-2.826A1.517 1.517 0 0 0 12 2Z"
3
+ d="M4.854 2.359a1 1 0 0 1 1.193 1.605A9.986 9.986 0 0 0 2 12.001a9.985 9.985 0 0 0 4.046 8.035 1 1 0 1 1-1.192 1.605A11.984 11.984 0 0 1 0 12.001c0-3.952 1.91-7.457 4.854-9.642Zm12.893.207a1 1 0 0 1 1.398-.207A11.985 11.985 0 0 1 24 12c0 3.95-1.911 7.455-4.855 9.64a1 1 0 0 1-1.19-1.605A9.985 9.985 0 0 0 22 12a9.987 9.987 0 0 0-4.047-8.036 1 1 0 0 1-.206-1.398ZM7.4 6.726a1 1 0 0 1 1.315 1.508A4.986 4.986 0 0 0 7 12.002c0 1.504.663 2.852 1.715 3.77A1 1 0 0 1 7.4 17.279 6.987 6.987 0 0 1 5 12.002c0-2.105.93-3.994 2.4-5.276Zm7.791.097a1 1 0 0 1 1.41-.097 6.989 6.989 0 0 1 2.4 5.276 6.987 6.987 0 0 1-2.4 5.277 1 1 0 0 1-1.315-1.507A4.988 4.988 0 0 0 17 12.002c0-1.503-.662-2.85-1.714-3.768a1 1 0 0 1-.096-1.411ZM12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"
4
4
  />
5
5
  </svg>
package/dist/svg/icon/icon-live-bag-filled-24.svg CHANGED
@@ -1,5 +1,5 @@
1
1
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
- d="M12 0a3.517 3.517 0 0 1 3.426 2.723L16.186 6H20.9A1.1 1.1 0 0 1 22 7.1V16a6 6 0 0 1-6 6H8a6 6 0 0 1-6-6V7.1A1.1 1.1 0 0 1 3.1 6h4.713l.761-3.277A3.517 3.517 0 0 1 12 0Zm-.875 10.923a.912.912 0 0 0-1.267.84v4.473a.912.912 0 0 0 1.383.782l3.706-2.238a.912.912 0 0 0 0-1.561l-3.706-2.237-.116-.06ZM12 2c-.706 0-1.318.487-1.477 1.174L9.867 6h4.266l-.655-2.826A1.517 1.517 0 0 0 12 2Z"
3
+ d="M5.147 2.145A1.375 1.375 0 0 1 6.72 4.4a9.243 9.243 0 0 0-3.97 7.598 9.242 9.242 0 0 0 3.97 7.6 1.376 1.376 0 0 1-1.572 2.256A11.993 11.993 0 0 1 0 11.999c0-4.082 2.039-7.687 5.147-9.854Zm11.792.342a1.375 1.375 0 0 1 1.913-.342A11.993 11.993 0 0 1 24 11.999c0 4.083-2.04 7.69-5.148 9.856a1.375 1.375 0 0 1-1.573-2.257A9.243 9.243 0 0 0 21.25 12a9.243 9.243 0 0 0-3.97-7.598 1.375 1.375 0 0 1-.341-1.914ZM7.316 6.71a1.375 1.375 0 1 1 1.825 2.057 4.303 4.303 0 0 0-1.454 3.23c0 1.285.56 2.437 1.453 3.23a1.376 1.376 0 0 1-1.826 2.057 7.053 7.053 0 0 1-2.377-5.287 7.05 7.05 0 0 1 2.38-5.287Zm7.427.117a1.374 1.374 0 0 1 1.94-.117 7.053 7.053 0 0 1 2.38 5.287 7.053 7.053 0 0 1-2.377 5.287 1.375 1.375 0 1 1-1.826-2.057 4.303 4.303 0 0 0 1.453-3.23c0-1.284-.56-2.437-1.454-3.23a1.374 1.374 0 0 1-.116-1.94Zm-2.74 3.046a2.125 2.125 0 1 1 0 4.25 2.125 2.125 0 0 1 0-4.25Z"
4
4
  />
5
5
  </svg>
package/dist/svg/icon/icon-live-bag-thin-16.svg CHANGED
@@ -1,5 +1,5 @@
1
1
  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
- d="M8.001 0a2.46 2.46 0 0 1 2.385 1.861L10.922 4h3.262c.45 0 .816.366.816.816v6.101A4.083 4.083 0 0 1 10.917 15H5.083A4.083 4.083 0 0 1 1 10.917v-6.1C1 4.365 1.366 4 1.816 4H5.08l.536-2.14A2.46 2.46 0 0 1 8.001 0ZM2.5 10.917A2.583 2.583 0 0 0 5.083 13.5h5.834a2.583 2.583 0 0 0 2.583-2.583V5.5h-2.202l.18.718.014.075a.75.75 0 0 1-1.447.363l-.022-.074L9.75 5.5H6.249l-.271 1.082-.023.074a.75.75 0 0 1-1.433-.438l.18-.718H2.5v5.417Zm4.072-2.908c0-.444.454-.728.845-.56l.077.04 2.47 1.49.07.048c.3.241.3.705 0 .946l-.07.047-2.47 1.492a.608.608 0 0 1-.922-.52V8.008ZM8.001 1.5a.96.96 0 0 0-.93.726L6.624 4h2.75L8.93 2.226A.96.96 0 0 0 8 1.5Z"
3
+ d="M3.281 1.54a.75.75 0 0 1 .886 1.21A6.49 6.49 0 0 0 1.5 8a6.49 6.49 0 0 0 2.666 5.25.75.75 0 0 1-.886 1.21A7.99 7.99 0 0 1 0 8a7.99 7.99 0 0 1 3.281-6.46Zm8.39.163a.75.75 0 0 1 1.048-.163A7.99 7.99 0 0 1 16 8a7.99 7.99 0 0 1-3.28 6.46.75.75 0 1 1-.886-1.21A6.49 6.49 0 0 0 14.5 8a6.49 6.49 0 0 0-2.667-5.25.75.75 0 0 1-.162-1.047ZM4.895 4.52a.751.751 0 0 1 1 1.12A3.154 3.154 0 0 0 4.837 8c0 .939.408 1.782 1.06 2.363a.75.75 0 0 1-.999 1.119A4.654 4.654 0 0 1 3.337 8c0-1.383.603-2.626 1.558-3.479Zm5.15.06a.751.751 0 0 1 1.06-.06A4.655 4.655 0 0 1 12.663 8a4.654 4.654 0 0 1-1.561 3.482.75.75 0 0 1-.998-1.12A3.156 3.156 0 0 0 11.164 8a3.157 3.157 0 0 0-1.059-2.36.751.751 0 0 1-.06-1.06ZM8.002 6.666a1.333 1.333 0 1 1 0 2.667 1.333 1.333 0 0 1 0-2.667Z"
4
4
  />
5
5
  </svg>
package/dist/svg/icons.svg CHANGED
@@ -7701,22 +7701,22 @@
7701
7701
  </symbol>
7702
7702
  <symbol viewBox="0 0 16 16" id="icon-live-bag-16">
7703
7703
  <path
7704
- d="M8 0c1.243 0 2.326.849 2.623 2.056L11.103 4h2.83C14.524 4 15 4.478 15 5.066v5.601A4.333 4.333 0 0 1 10.667 15H5.333A4.333 4.333 0 0 1 1 10.667v-5.6C1 4.476 1.478 4 2.066 4h2.831l.479-1.944.065-.222A2.702 2.702 0 0 1 8 0ZM3 10.667A2.333 2.333 0 0 0 5.333 13h5.334A2.333 2.333 0 0 0 13 10.667V6h-1.405l.126.51.02.101a1 1 0 0 1-1.932.476l-.03-.098L9.535 6h-3.07l-.244.99a1 1 0 1 1-1.942-.48L4.405 6H3v4.667ZM6.7 8.11c0-.413.423-.679.787-.522l.072.037 2.303 1.39.065.045c.28.224.28.656 0 .88l-.065.045-2.303 1.39a.567.567 0 0 1-.86-.485V8.11ZM8 2a.702.702 0 0 0-.644.42l-.038.114L6.957 4h2.085l-.361-1.466A.702.702 0 0 0 8 2Z"
7704
+ d="M3.437 1.428A1 1 0 0 1 4.579 3.07 5.993 5.993 0 0 0 2 8a5.992 5.992 0 0 0 2.58 4.93 1 1 0 0 1-1.143 1.641A7.992 7.992 0 0 1 0 8a7.994 7.994 0 0 1 3.437-6.572Zm7.735.25a1 1 0 0 1 1.391-.25A7.994 7.994 0 0 1 16 8a7.992 7.992 0 0 1-3.438 6.571 1 1 0 1 1-1.141-1.641A5.993 5.993 0 0 0 14 8a5.993 5.993 0 0 0-2.58-4.93 1 1 0 0 1-.248-1.392Zm-6.353 2.9a1.001 1.001 0 0 1 1.363 1.464 2.661 2.661 0 0 0-.853 1.956c0 .772.327 1.466.852 1.955a1 1 0 1 1-1.363 1.464A4.66 4.66 0 0 1 3.33 7.998c0-1.35.575-2.57 1.49-3.42Zm4.947.05a1.001 1.001 0 0 1 1.414-.05 4.661 4.661 0 0 1 1.49 3.42 4.66 4.66 0 0 1-1.49 3.419 1 1 0 0 1-1.362-1.464 2.66 2.66 0 0 0 .852-1.955 2.66 2.66 0 0 0-.853-1.956 1 1 0 0 1-.051-1.413ZM7.999 6.666a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666Z"
7705
7705
  />
7706
7706
  </symbol>
7707
7707
  <symbol viewBox="0 0 20 20" id="icon-live-bag-20">
7708
7708
  <path
7709
- d="M10 0a3.11 3.11 0 0 1 3.025 2.39L13.648 5h3.769c.598 0 1.083.485 1.083 1.083v7.25a5.167 5.167 0 0 1-5.167 5.167H6.667A5.167 5.167 0 0 1 1.5 13.333v-7.25C1.5 5.485 1.985 5 2.583 5h3.77l.622-2.61A3.11 3.11 0 0 1 10 0ZM3.5 13.333A3.167 3.167 0 0 0 6.667 16.5h6.666a3.167 3.167 0 0 0 3.167-3.167V7h-2.376l.183.769.018.1a1 1 0 0 1-1.935.461l-.029-.099L12.068 7H7.933L7.64 8.231a1 1 0 1 1-1.946-.462L5.877 7H3.5v6.333Zm4.715-3.447a.76.76 0 0 1 1.056-.7l.096.05 3.09 1.864.085.06a.76.76 0 0 1 0 1.18l-.086.06-3.089 1.865a.76.76 0 0 1-1.152-.652V9.886ZM10 2c-.514 0-.96.353-1.08.853L8.41 5h3.182l-.512-2.147A1.11 1.11 0 0 0 10 2Z"
7709
+ d="M4.158 1.883a1 1 0 0 1 1.17 1.623l-.037.026A7.988 7.988 0 0 0 2 10a7.99 7.99 0 0 0 3.327 6.495 1 1 0 1 1-1.169 1.622A9.99 9.99 0 0 1 0 10a9.988 9.988 0 0 1 4.112-8.083l.046-.034Zm10.288.226a1 1 0 0 1 1.396-.226l.046.034A9.988 9.988 0 0 1 20 10a9.99 9.99 0 0 1-4.158 8.117 1 1 0 0 1-1.17-1.622A7.99 7.99 0 0 0 18 10a7.989 7.989 0 0 0-3.291-6.468l-.037-.026a1 1 0 0 1-.226-1.397ZM6.098 5.442a1 1 0 0 1 1.301 1.52A3.99 3.99 0 0 0 6 10a3.99 3.99 0 0 0 1.396 3.036 1 1 0 0 1-1.303 1.518A5.99 5.99 0 0 1 4 10a5.99 5.99 0 0 1 2.098-4.559Zm6.394.11a1 1 0 0 1 1.41-.11A5.991 5.991 0 0 1 16 10.001a5.99 5.99 0 0 1-2.093 4.554 1 1 0 0 1-1.303-1.518A3.99 3.99 0 0 0 14 10.001a3.99 3.99 0 0 0-1.4-3.04 1 1 0 0 1-.108-1.41ZM10 8.335a1.667 1.667 0 1 1-.001 3.333A1.667 1.667 0 0 1 10 8.335Z"
7710
7710
  />
7711
7711
  </symbol>
7712
7712
  <symbol viewBox="0 0 24 24" id="icon-live-bag-24">
7713
7713
  <path
7714
- d="M12 0a3.517 3.517 0 0 1 3.426 2.723L16.186 6H20.9A1.1 1.1 0 0 1 22 7.1V16a6 6 0 0 1-6 6H8a6 6 0 0 1-6-6V7.1A1.1 1.1 0 0 1 3.1 6h4.713l.761-3.277.081-.294A3.517 3.517 0 0 1 12 0ZM4 16a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V8h-3.35l.325 1.4.017.1a1 1 0 0 1-1.938.45l-.029-.1L14.597 8H9.403l-.428 1.85a1.001 1.001 0 0 1-1.95-.45L7.35 8H4v8Zm5.858-4.237a.912.912 0 0 1 1.267-.84l.116.06 3.706 2.236.104.072a.913.913 0 0 1 0 1.417l-.104.072-3.706 2.238a.912.912 0 0 1-1.383-.782v-4.473ZM12 2c-.706 0-1.318.487-1.477 1.174L9.867 6h4.266l-.655-2.826A1.517 1.517 0 0 0 12 2Z"
7714
+ d="M4.854 2.359a1 1 0 0 1 1.193 1.605A9.986 9.986 0 0 0 2 12.001a9.985 9.985 0 0 0 4.046 8.035 1 1 0 1 1-1.192 1.605A11.984 11.984 0 0 1 0 12.001c0-3.952 1.91-7.457 4.854-9.642Zm12.893.207a1 1 0 0 1 1.398-.207A11.985 11.985 0 0 1 24 12c0 3.95-1.911 7.455-4.855 9.64a1 1 0 0 1-1.19-1.605A9.985 9.985 0 0 0 22 12a9.987 9.987 0 0 0-4.047-8.036 1 1 0 0 1-.206-1.398ZM7.4 6.726a1 1 0 0 1 1.315 1.508A4.986 4.986 0 0 0 7 12.002c0 1.504.663 2.852 1.715 3.77A1 1 0 0 1 7.4 17.279 6.987 6.987 0 0 1 5 12.002c0-2.105.93-3.994 2.4-5.276Zm7.791.097a1 1 0 0 1 1.41-.097 6.989 6.989 0 0 1 2.4 5.276 6.987 6.987 0 0 1-2.4 5.277 1 1 0 0 1-1.315-1.507A4.988 4.988 0 0 0 17 12.002c0-1.503-.662-2.85-1.714-3.768a1 1 0 0 1-.096-1.411ZM12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"
7715
7715
  />
7716
7716
  </symbol>
7717
7717
  <symbol viewBox="0 0 24 24" id="icon-live-bag-filled-24">
7718
7718
  <path
7719
- d="M12 0a3.517 3.517 0 0 1 3.426 2.723L16.186 6H20.9A1.1 1.1 0 0 1 22 7.1V16a6 6 0 0 1-6 6H8a6 6 0 0 1-6-6V7.1A1.1 1.1 0 0 1 3.1 6h4.713l.761-3.277A3.517 3.517 0 0 1 12 0Zm-.875 10.923a.912.912 0 0 0-1.267.84v4.473a.912.912 0 0 0 1.383.782l3.706-2.238a.912.912 0 0 0 0-1.561l-3.706-2.237-.116-.06ZM12 2c-.706 0-1.318.487-1.477 1.174L9.867 6h4.266l-.655-2.826A1.517 1.517 0 0 0 12 2Z"
7719
+ d="M5.147 2.145A1.375 1.375 0 0 1 6.72 4.4a9.243 9.243 0 0 0-3.97 7.598 9.242 9.242 0 0 0 3.97 7.6 1.376 1.376 0 0 1-1.572 2.256A11.993 11.993 0 0 1 0 11.999c0-4.082 2.039-7.687 5.147-9.854Zm11.792.342a1.375 1.375 0 0 1 1.913-.342A11.993 11.993 0 0 1 24 11.999c0 4.083-2.04 7.69-5.148 9.856a1.375 1.375 0 0 1-1.573-2.257A9.243 9.243 0 0 0 21.25 12a9.243 9.243 0 0 0-3.97-7.598 1.375 1.375 0 0 1-.341-1.914ZM7.316 6.71a1.375 1.375 0 1 1 1.825 2.057 4.303 4.303 0 0 0-1.454 3.23c0 1.285.56 2.437 1.453 3.23a1.376 1.376 0 0 1-1.826 2.057 7.053 7.053 0 0 1-2.377-5.287 7.05 7.05 0 0 1 2.38-5.287Zm7.427.117a1.374 1.374 0 0 1 1.94-.117 7.053 7.053 0 0 1 2.38 5.287 7.053 7.053 0 0 1-2.377 5.287 1.375 1.375 0 1 1-1.826-2.057 4.303 4.303 0 0 0 1.453-3.23c0-1.284-.56-2.437-1.454-3.23a1.374 1.374 0 0 1-.116-1.94Zm-2.74 3.046a2.125 2.125 0 1 1 0 4.25 2.125 2.125 0 0 1 0-4.25Z"
7720
7720
  />
7721
7721
  </symbol>
7722
7722
  <symbol viewBox="0 0 16 16" id="icon-live-bag-play-filled-16-colored">
@@ -7742,7 +7742,7 @@
7742
7742
  </symbol>
7743
7743
  <symbol viewBox="0 0 16 16" id="icon-live-bag-thin-16">
7744
7744
  <path
7745
- d="M8.001 0a2.46 2.46 0 0 1 2.385 1.861L10.922 4h3.262c.45 0 .816.366.816.816v6.101A4.083 4.083 0 0 1 10.917 15H5.083A4.083 4.083 0 0 1 1 10.917v-6.1C1 4.365 1.366 4 1.816 4H5.08l.536-2.14A2.46 2.46 0 0 1 8.001 0ZM2.5 10.917A2.583 2.583 0 0 0 5.083 13.5h5.834a2.583 2.583 0 0 0 2.583-2.583V5.5h-2.202l.18.718.014.075a.75.75 0 0 1-1.447.363l-.022-.074L9.75 5.5H6.249l-.271 1.082-.023.074a.75.75 0 0 1-1.433-.438l.18-.718H2.5v5.417Zm4.072-2.908c0-.444.454-.728.845-.56l.077.04 2.47 1.49.07.048c.3.241.3.705 0 .946l-.07.047-2.47 1.492a.608.608 0 0 1-.922-.52V8.008ZM8.001 1.5a.96.96 0 0 0-.93.726L6.624 4h2.75L8.93 2.226A.96.96 0 0 0 8 1.5Z"
7745
+ d="M3.281 1.54a.75.75 0 0 1 .886 1.21A6.49 6.49 0 0 0 1.5 8a6.49 6.49 0 0 0 2.666 5.25.75.75 0 0 1-.886 1.21A7.99 7.99 0 0 1 0 8a7.99 7.99 0 0 1 3.281-6.46Zm8.39.163a.75.75 0 0 1 1.048-.163A7.99 7.99 0 0 1 16 8a7.99 7.99 0 0 1-3.28 6.46.75.75 0 1 1-.886-1.21A6.49 6.49 0 0 0 14.5 8a6.49 6.49 0 0 0-2.667-5.25.75.75 0 0 1-.162-1.047ZM4.895 4.52a.751.751 0 0 1 1 1.12A3.154 3.154 0 0 0 4.837 8c0 .939.408 1.782 1.06 2.363a.75.75 0 0 1-.999 1.119A4.654 4.654 0 0 1 3.337 8c0-1.383.603-2.626 1.558-3.479Zm5.15.06a.751.751 0 0 1 1.06-.06A4.655 4.655 0 0 1 12.663 8a4.654 4.654 0 0 1-1.561 3.482.75.75 0 0 1-.998-1.12A3.156 3.156 0 0 0 11.164 8a3.157 3.157 0 0 0-1.059-2.36.751.751 0 0 1-.06-1.06ZM8.002 6.666a1.333 1.333 0 1 1 0 2.667 1.333 1.333 0 0 1 0-2.667Z"
7746
7746
  />
7747
7747
  </symbol>
7748
7748
  <symbol viewBox="0 0 16 16" id="icon-live-broadcast-16">
package/dist/switch/switch.css CHANGED
@@ -20,27 +20,25 @@ span.switch {
20
20
 
21
21
  span.switch__button {
22
22
  align-self: center;
23
- background-color: var(
24
- --switch-unchecked-background-color,
25
- var(--color-background-secondary)
26
- );
27
- border-color: var(--switch-border-color, var(--color-border-strong));
28
23
  border-radius: 400px;
29
- border-style: solid;
30
- border-width: 1px;
31
24
  color: transparent;
32
25
  display: inline-block;
33
26
  position: relative;
34
27
  text-indent: 100%;
35
28
  width: 40px;
29
+ background-color: var(
30
+ --switch-unchecked-background-color,
31
+ var(--color-background-secondary)
32
+ );
33
+ border-color: var(--switch-border-color, var(--color-border-strong));
36
34
  }
37
-
38
35
  span.switch__button,
39
36
  span.switch__button:after {
37
+ border-style: solid;
38
+ border-width: 1px;
40
39
  height: 24px;
41
40
  transition: left 0.15s ease-out 0s;
42
41
  }
43
-
44
42
  span.switch__button:after {
45
43
  background-color: var(
46
44
  --switch-foreground-color,
@@ -51,8 +49,6 @@ span.switch__button:after {
51
49
  var(--color-border-strong)
52
50
  );
53
51
  border-radius: 50%;
54
- border-style: solid;
55
- border-width: 1px;
56
52
  content: "";
57
53
  display: block;
58
54
  left: -1px;
@@ -74,7 +70,6 @@ span.switch__control {
74
70
  width: 40px;
75
71
  z-index: 1;
76
72
  }
77
-
78
73
  input.switch__control[disabled] + span.switch__button,
79
74
  span.switch__control[aria-disabled="true"] + span.switch__button {
80
75
  border-color: var(--switch-border-color, var(--color-border-disabled));
@@ -83,16 +78,13 @@ span.switch__control[aria-disabled="true"] + span.switch__button {
83
78
  input.switch__control {
84
79
  opacity: 0;
85
80
  }
86
-
87
81
  input.switch__control:focus + span.switch__button {
88
82
  outline: 1px auto
89
83
  var(--switch-custom-outline-color, var(--color-foreground-secondary));
90
84
  }
91
-
92
85
  input.switch__control:focus:not(:focus-visible) + span.switch__button {
93
86
  outline: none;
94
87
  }
95
-
96
88
  input.switch__control[disabled] + span.switch__button:after,
97
89
  span.switch__control[aria-disabled="true"] + span.switch__button:after {
98
90
  border-color: var(--switch-border-color, var(--color-background-disabled));
@@ -105,7 +97,6 @@ span.switch__control:not([aria-disabled="true"]):hover + span.switch__button {
105
97
  overflow: hidden;
106
98
  position: relative;
107
99
  }
108
-
109
100
  input.switch__control:not([disabled]):focus + span.switch__button:before,
110
101
  input.switch__control:not([disabled]):hover + span.switch__button:before,
111
102
  span.switch__control:not([aria-disabled="true"]):focus
@@ -113,13 +104,12 @@ span.switch__control:not([aria-disabled="true"]):focus
113
104
  span.switch__control:not([aria-disabled="true"]):hover
114
105
  + span.switch__button:before {
115
106
  background-color: var(--color-state-layer-neutral);
116
- background-color: var(--color-state-layer-hover);
117
107
  content: "";
118
108
  inset: 0;
119
109
  pointer-events: none;
120
110
  position: absolute;
111
+ background-color: var(--color-state-layer-hover);
121
112
  }
122
-
123
113
  input.switch__control:not([disabled]):checked + span.switch__button,
124
114
  span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
125
115
  + span.switch__button {
@@ -128,7 +118,6 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
128
118
  var(--color-background-accent)
129
119
  );
130
120
  }
131
-
132
121
  input.switch__control[disabled]:checked + span.switch__button,
133
122
  span.switch__control[aria-disabled="true"][aria-checked="true"]
134
123
  + span.switch__button {
@@ -146,12 +135,10 @@ span.switch__control:not([aria-disabled="true"]):focus-visible
146
135
  0 0 0 2px var(--color-background-primary),
147
136
  0 0 0 4px var(--color-background-accent);
148
137
  }
149
-
150
138
  input.switch__control:checked + span.switch__button:after,
151
139
  span.switch__control[aria-checked="true"] + span.switch__button:after {
152
140
  left: 15px;
153
141
  }
154
-
155
142
  span.switch__control:focus:not(:focus-visible) {
156
143
  outline: 0;
157
144
  }