@empathyco/x-components 6.0.0-alpha.70 → 6.0.0-alpha.71

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/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.0-alpha.71](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.70...@empathyco/x-components@6.0.0-alpha.71) (2025-04-30)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **related-prompt:** decouple component from x-tailwindcss dep (#1765) ([5f5ac64](https://github.com/empathyco/x/commit/5f5ac6433736e403d04980b79416c9ac3e5e7125))
12
+
13
+
14
+
6
15
  ## [6.0.0-alpha.70](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.69...@empathyco/x-components@6.0.0-alpha.70) (2025-04-30)
7
16
 
8
17
 
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  .x-uppercase {
4
3
  text-transform: uppercase;
5
4
  }
@@ -956,6 +955,29 @@
956
955
  [dir="rtl"] .x-margin--left-20 {
957
956
  margin-right: var(--x-size-base-20) !important;
958
957
  }
958
+ .x-line-height--none {
959
+ line-height: 1 !important;
960
+ }
961
+
962
+ .x-line-height--tight {
963
+ line-height: 1.25 !important;
964
+ }
965
+
966
+ .x-line-height--snug {
967
+ line-height: 1.375 !important;
968
+ }
969
+
970
+ .x-line-height--normal {
971
+ line-height: 1.5 !important;
972
+ }
973
+
974
+ .x-line-height--relaxed {
975
+ line-height: 1.625 !important;
976
+ }
977
+
978
+ .x-line-height--loose {
979
+ line-height: 2 !important;
980
+ }
959
981
  .x-line-clamp--2 {
960
982
  overflow: hidden !important;
961
983
  display: -webkit-box !important;
@@ -3917,24 +3939,6 @@
3917
3939
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3918
3940
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3919
3941
  }
3920
- :root {
3921
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3922
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3923
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3924
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3925
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3926
- }
3927
-
3928
- .x-tag--card.x-tag,
3929
- .x-tag--card .x-tag {
3930
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3931
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3932
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3933
- --x-size-border-radius-bottom-right-tag-default: var(
3934
- --x-size-border-radius-bottom-right-tag-card
3935
- );
3936
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3937
- }
3938
3942
  :root {
3939
3943
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3940
3944
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -4092,6 +4096,24 @@
4092
4096
  --x-size-padding-left-button-default: 0;
4093
4097
  border: none;
4094
4098
  }
4099
+ :root {
4100
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
4101
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
4102
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
4103
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
4104
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
4105
+ }
4106
+
4107
+ .x-tag--card.x-tag,
4108
+ .x-tag--card .x-tag {
4109
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
4110
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
4111
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
4112
+ --x-size-border-radius-bottom-right-tag-default: var(
4113
+ --x-size-border-radius-bottom-right-tag-card
4114
+ );
4115
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
4116
+ }
4095
4117
  :root {
4096
4118
  --x-string-align-items-suggestion-default: center;
4097
4119
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4182,6 +4204,73 @@
4182
4204
  --x-number-font-weight-suggestion-default-matching
4183
4205
  );
4184
4206
  }
4207
+ :root {
4208
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4209
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4210
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4211
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4212
+ }
4213
+ .x-sliding-panel {
4214
+ z-index: 0;
4215
+ background-color: var(--x-color-background-sliding-panel);
4216
+ }
4217
+ .x-sliding-panel__button.x-button {
4218
+ --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4219
+ pointer-events: none;
4220
+ }
4221
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4222
+ pointer-events: all;
4223
+ }
4224
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4225
+ transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4226
+ }
4227
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4228
+ transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4229
+ }
4230
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4231
+ opacity: 0;
4232
+ }
4233
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4234
+ opacity: 1;
4235
+ pointer-events: all;
4236
+ }
4237
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4238
+ opacity: 1;
4239
+ pointer-events: all;
4240
+ }
4241
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4242
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4243
+ }
4244
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4245
+ mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4246
+ }
4247
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4248
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4249
+ }
4250
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4251
+ mask: none;
4252
+ }
4253
+ .x-sliding-panel__scroll > * {
4254
+ flex: 0 0 auto;
4255
+ }
4256
+ .x-sliding-panel__scroll > .x-list {
4257
+ --x-string-flow-list: row nowrap;
4258
+ }
4259
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4260
+ opacity: 1;
4261
+ pointer-events: all;
4262
+ }
4263
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4264
+ opacity: 1;
4265
+ pointer-events: all;
4266
+ }
4267
+ :root {
4268
+ --x-string-overflow-scroll: auto;
4269
+ --x-color-background-scroll-bar: transparent;
4270
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4271
+ --x-color-background-scroll-bar-hover: transparent;
4272
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4273
+ }
4185
4274
  :root {
4186
4275
  --x-string-align-items-suggestion-default: center;
4187
4276
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4404,73 +4493,6 @@
4404
4493
  --x-color-text-suggestion-default-matching-curated
4405
4494
  );
4406
4495
  }
4407
- :root {
4408
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4409
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4410
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4411
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4412
- }
4413
- .x-sliding-panel {
4414
- z-index: 0;
4415
- background-color: var(--x-color-background-sliding-panel);
4416
- }
4417
- .x-sliding-panel__button.x-button {
4418
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4419
- pointer-events: none;
4420
- }
4421
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4422
- pointer-events: all;
4423
- }
4424
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4425
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4426
- }
4427
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4428
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4429
- }
4430
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4431
- opacity: 0;
4432
- }
4433
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4434
- opacity: 1;
4435
- pointer-events: all;
4436
- }
4437
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4438
- opacity: 1;
4439
- pointer-events: all;
4440
- }
4441
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4442
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4443
- }
4444
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4445
- mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4446
- }
4447
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4448
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4449
- }
4450
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4451
- mask: none;
4452
- }
4453
- .x-sliding-panel__scroll > * {
4454
- flex: 0 0 auto;
4455
- }
4456
- .x-sliding-panel__scroll > .x-list {
4457
- --x-string-flow-list: row nowrap;
4458
- }
4459
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4460
- opacity: 1;
4461
- pointer-events: all;
4462
- }
4463
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4464
- opacity: 1;
4465
- pointer-events: all;
4466
- }
4467
- :root {
4468
- --x-string-overflow-scroll: auto;
4469
- --x-color-background-scroll-bar: transparent;
4470
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4471
- --x-color-background-scroll-bar-hover: transparent;
4472
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4473
- }
4474
4496
  :root {
4475
4497
  --x-string-overflow-scroll: auto;
4476
4498
  --x-color-background-scroll-bar: transparent;
@@ -4678,14 +4700,6 @@
4678
4700
  --x-size-span-row-item: 1;
4679
4701
  --x-size-start-row-item: 0;
4680
4702
  }
4681
- :root {
4682
- --x-size-gap-row: 0;
4683
- --x-size-padding-row: 0;
4684
- --x-size-justify-row: stretch;
4685
- --x-size-align-row: center;
4686
- --x-size-span-row-item: 1;
4687
- --x-size-start-row-item: 0;
4688
- }
4689
4703
 
4690
4704
  .x-row {
4691
4705
  display: grid;
@@ -4823,6 +4837,14 @@
4823
4837
  --x-size-border-width-result-description-default: 0;
4824
4838
  --x-size-border-width-result-picture-default: 0;
4825
4839
  }
4840
+ :root {
4841
+ --x-size-gap-row: 0;
4842
+ --x-size-padding-row: 0;
4843
+ --x-size-justify-row: stretch;
4844
+ --x-size-align-row: center;
4845
+ --x-size-span-row-item: 1;
4846
+ --x-size-start-row-item: 0;
4847
+ }
4826
4848
  :root {
4827
4849
  --x-color-border-result-default: var(--x-color-base-lead);
4828
4850
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4982,6 +5004,10 @@
4982
5004
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4983
5005
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4984
5006
  }
5007
+ :root {
5008
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5009
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5010
+ }
4985
5011
  :root {
4986
5012
  --x-size-border-radius-picture-default: 0;
4987
5013
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5042,10 +5068,6 @@
5042
5068
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5043
5069
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5044
5070
  }
5045
- :root {
5046
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5047
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5048
- }
5049
5071
 
5050
5072
  .x-picture--cover.x-picture {
5051
5073
  position: relative;
@@ -7272,6 +7294,13 @@
7272
7294
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7273
7295
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7274
7296
  }
7297
+ :root {
7298
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7299
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7300
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7301
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7302
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7303
+ }
7275
7304
 
7276
7305
  .x-input--card.x-input,
7277
7306
  .x-input--card .x-input {
@@ -7285,13 +7314,6 @@
7285
7314
  --x-size-border-radius-bottom-left-input-card
7286
7315
  );
7287
7316
  }
7288
- :root {
7289
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7290
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7291
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7292
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7293
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7294
- }
7295
7317
  :root {
7296
7318
  --x-size-width-icon-xl: var(--x-size-base-07);
7297
7319
  --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7353,15 +7375,6 @@
7353
7375
  --x-string-stroke-linejoin-icon-default: mitter;
7354
7376
  --x-size-stroke-width-icon-default: 1px;
7355
7377
  }
7356
- :root {
7357
- --x-color-stroke-icon-default: currentColor;
7358
- --x-color-fill-icon-default: none;
7359
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7360
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7361
- --x-string-stroke-linecap-icon-default: butt;
7362
- --x-string-stroke-linejoin-icon-default: mitter;
7363
- --x-size-stroke-width-icon-default: 1px;
7364
- }
7365
7378
 
7366
7379
  .x-icon {
7367
7380
  stroke: var(--x-color-stroke-icon-default);
@@ -7388,6 +7401,15 @@
7388
7401
  --x-size-gap-grid: var(--x-size-base-03);
7389
7402
  --x-size-min-width-grid-item: 150px;
7390
7403
  }
7404
+ :root {
7405
+ --x-color-stroke-icon-default: currentColor;
7406
+ --x-color-fill-icon-default: none;
7407
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7408
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7409
+ --x-string-stroke-linecap-icon-default: butt;
7410
+ --x-string-stroke-linejoin-icon-default: mitter;
7411
+ --x-size-stroke-width-icon-default: 1px;
7412
+ }
7391
7413
  :root {
7392
7414
  --x-size-padding-grid: 0;
7393
7415
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7414,12 +7436,6 @@
7414
7436
  .x-grid-list--cols-auto .x-grid-list__item {
7415
7437
  min-width: var(--x-size-min-width-grid-item);
7416
7438
  }
7417
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7418
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7419
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7420
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7421
- margin-left: auto;
7422
- }
7423
7439
  :root {
7424
7440
  --x-size-margin-filter-children: 0;
7425
7441
  --x-size-padding-top-filter-children: 0;
@@ -7460,6 +7476,12 @@
7460
7476
  .x-hierarchical-filter-container .x-facet-filter {
7461
7477
  width: 100%;
7462
7478
  }
7479
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7480
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7481
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7482
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7483
+ margin-left: auto;
7484
+ }
7463
7485
  :root {
7464
7486
  --x-color-background-filter-default: transparent;
7465
7487
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7634,34 +7656,6 @@
7634
7656
  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7635
7657
  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7636
7658
  }
7637
- :root {
7638
- --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7639
- --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7640
- --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7641
- --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7642
- --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7643
- --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7644
- --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7645
- --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7646
- --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7647
- --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7648
- --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7649
- }
7650
-
7651
- .x-facet--outlined.x-facet,
7652
- .x-facet--outlined .x-facet {
7653
- --x-color-border-facet-default: var(--x-color-border-facet-outlined);
7654
- --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
7655
- --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
7656
- --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
7657
- --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
7658
- --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
7659
- --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
7660
- --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
7661
- --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
7662
- --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
7663
- --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
7664
- }
7665
7659
  :root {
7666
7660
  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7667
7661
  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
@@ -7694,6 +7688,34 @@
7694
7688
  --x-size-border-width-left-facet-header-line
7695
7689
  );
7696
7690
  }
7691
+ :root {
7692
+ --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7693
+ --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7694
+ --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7695
+ --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7696
+ --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7697
+ --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7698
+ --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7699
+ --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7700
+ --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7701
+ --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7702
+ --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7703
+ }
7704
+
7705
+ .x-facet--outlined.x-facet,
7706
+ .x-facet--outlined .x-facet {
7707
+ --x-color-border-facet-default: var(--x-color-border-facet-outlined);
7708
+ --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
7709
+ --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
7710
+ --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
7711
+ --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
7712
+ --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
7713
+ --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
7714
+ --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
7715
+ --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
7716
+ --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
7717
+ --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
7718
+ }
7697
7719
  :root {
7698
7720
  --x-color-background-facet-default: transparent;
7699
7721
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -8400,6 +8422,19 @@
8400
8422
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8401
8423
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8402
8424
  }
8425
+ :root {
8426
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8427
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8428
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8429
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8430
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8431
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8432
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8433
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8434
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8435
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8436
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8437
+ }
8403
8438
 
8404
8439
  .x-dropdown--card {
8405
8440
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8430,19 +8465,6 @@
8430
8465
  --x-size-border-width-left-dropdown-list-card
8431
8466
  );
8432
8467
  }
8433
- :root {
8434
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8435
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8436
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8437
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8438
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8439
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8440
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8441
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8442
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8443
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8444
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8445
- }
8446
8468
  :root {
8447
8469
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8448
8470
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8453,6 +8475,17 @@
8453
8475
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8454
8476
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8455
8477
  }
8478
+ :root {
8479
+ --x-color-background-button-secondary: transparent;
8480
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8481
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8482
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8483
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8484
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8485
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8486
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8487
+ }
8488
+
8456
8489
  :root {
8457
8490
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8458
8491
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8474,37 +8507,6 @@
8474
8507
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8475
8508
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8476
8509
  }
8477
- :root {
8478
- --x-color-background-button-secondary: transparent;
8479
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8480
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8481
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8482
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8483
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8484
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8485
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8486
- }
8487
- :root {
8488
- --x-color-background-button-secondary: transparent;
8489
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8490
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8491
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8492
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8493
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8494
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8495
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8496
- }
8497
-
8498
- .x-button--secondary.x-button,
8499
- .x-button--secondary .x-button {
8500
- --x-color-background-button-default: var(--x-color-background-button-secondary);
8501
- --x-color-border-button-default: var(--x-color-border-button-secondary);
8502
- --x-color-text-button-default: var(--x-color-text-button-secondary);
8503
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8504
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8505
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8506
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8507
- }
8508
8510
  :root {
8509
8511
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8510
8512
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8575,13 +8577,6 @@
8575
8577
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8576
8578
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8577
8579
  }
8578
- :root {
8579
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8580
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8581
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8582
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8583
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8584
- }
8585
8580
 
8586
8581
  .x-button--pill.x-button,
8587
8582
  .x-button--pill .x-button {
@@ -8602,6 +8597,13 @@
8602
8597
  --x-color-border-button-ghost: transparent;
8603
8598
  --x-color-text-button-ghost: var(--x-color-base-lead);
8604
8599
  }
8600
+ :root {
8601
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8602
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8603
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8604
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8605
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8606
+ }
8605
8607
  :root {
8606
8608
  --x-color-background-button-ghost: transparent;
8607
8609
  --x-color-border-button-ghost: transparent;
@@ -8862,26 +8864,24 @@
8862
8864
  --x-size-border-radius-base-pill: 99999px;
8863
8865
  --x-size-border-width-base: 1px;
8864
8866
  }
8865
- .x-line-height--none {
8866
- line-height: 1 !important;
8867
- }
8868
-
8869
- .x-line-height--tight {
8870
- line-height: 1.25 !important;
8871
- }
8872
-
8873
- .x-line-height--snug {
8874
- line-height: 1.375 !important;
8875
- }
8876
-
8877
- .x-line-height--normal {
8878
- line-height: 1.5 !important;
8879
- }
8880
-
8881
- .x-line-height--relaxed {
8882
- line-height: 1.625 !important;
8867
+ :root {
8868
+ --x-color-background-button-secondary: transparent;
8869
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8870
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8871
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8872
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8873
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8874
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8875
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8883
8876
  }
8884
8877
 
8885
- .x-line-height--loose {
8886
- line-height: 2 !important;
8878
+ .x-button--secondary.x-button,
8879
+ .x-button--secondary .x-button {
8880
+ --x-color-background-button-default: var(--x-color-background-button-secondary);
8881
+ --x-color-border-button-default: var(--x-color-border-button-secondary);
8882
+ --x-color-text-button-default: var(--x-color-text-button-secondary);
8883
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
8884
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
8885
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
8886
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8887
8887
  }
@@ -1,24 +1,25 @@
1
1
  import _sfc_main from './related-prompt.vue2.js';
2
- import { resolveDirective, openBlock, createElementBlock, renderSlot, withDirectives, createElementVNode, createBlock, resolveDynamicComponent } from 'vue';
2
+ import { resolveDirective, openBlock, createElementBlock, renderSlot, withDirectives, createElementVNode, normalizeClass, createBlock, resolveDynamicComponent } from 'vue';
3
3
  import './related-prompt.vue3.js';
4
4
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
5
 
6
- const _hoisted_1 = { class: "x-related-prompt x-gap-8" };
7
- const _hoisted_2 = { class: "x-text-left x-grow" };
6
+ const _hoisted_1 = { class: "x-related-prompt" };
8
7
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
9
8
  const _directive_typing = resolveDirective("typing");
10
9
  return openBlock(), createElementBlock("button", _hoisted_1, [
11
10
  renderSlot(_ctx.$slots, "related-prompt-extra-content", { relatedPrompt: _ctx.relatedPrompt }),
12
11
  withDirectives(createElementVNode(
13
12
  "span",
14
- _hoisted_2,
13
+ {
14
+ class: normalizeClass(["x-related-prompt-text", { "x-related-prompt-text--selected": _ctx.selected }])
15
+ },
15
16
  null,
16
- 512
17
- /* NEED_PATCH */
17
+ 2
18
+ /* CLASS */
18
19
  ), [
19
20
  [_directive_typing, { text: _ctx.relatedPrompt.suggestionText, speed: 50 }]
20
21
  ]),
21
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.selected ? "CrossTinyIcon" : "PlusIcon"), { class: "x-icon-lg x-related-prompt-icon x-shrink-0" }))
22
+ (openBlock(), createBlock(resolveDynamicComponent(_ctx.selected ? "CrossTinyIcon" : "PlusIcon"), { class: "x-related-prompt-icon" }))
22
23
  ]);
23
24
  }
24
25
  var RelatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt x-gap-8\">\n <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" class=\"x-text-left x-grow\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon x-shrink-0\"\n />\n </button>\n</template>\n<script lang=\"ts\">\nimport type { RelatedPrompt } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport CrossTinyIcon from '../../../components/icons/cross-tiny.vue'\nimport PlusIcon from '../../../components/icons/plus.vue'\nimport { typing } from '../../../directives/typing'\n\n/**\n * This component shows a suggested related prompt.\n */\nexport default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing,\n },\n components: {\n CrossTinyIcon,\n PlusIcon,\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true,\n },\n selected: {\n type: Boolean,\n default: false,\n },\n },\n})\n</script>\n<style lang=\"css\">\n.x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n}\n\n.x-related-prompt-icon {\n align-self: start;\n}\n</style>\n"],"names":["_resolveDirective","_openBlock","_createElementBlock","_renderSlot","_withDirectives","_createElementVNode","selected"],"mappings":";;;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAOS,QAPT,CAAA,CAAA;AAEE,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAgG,UAAhG,UAAgG,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,8BAAA,EAA1D,EAAc,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,IAAAC,cAAA,CAAAC,kBAAA;;;;;;;AACpD,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EAJJ,mCAKWC,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}
1
+ {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n <span\n v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\"\n class=\"x-related-prompt-text\"\n :class=\"{ 'x-related-prompt-text--selected': selected }\"\n />\n <component :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\" class=\"x-related-prompt-icon\" />\n </button>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedPrompt } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport CrossTinyIcon from '../../../components/icons/cross-tiny.vue'\nimport PlusIcon from '../../../components/icons/plus.vue'\nimport { typing } from '../../../directives/typing'\n\n/**\n * This component shows a suggested related prompt.\n */\nexport default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing,\n },\n components: {\n CrossTinyIcon,\n PlusIcon,\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true,\n },\n selected: {\n type: Boolean,\n default: false,\n },\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n gap: 8px;\n height: 100%;\n width: 100%;\n}\n\n.x-related-prompt-text {\n text-align: left;\n flex-grow: 1;\n}\n\n.x-related-prompt-text.x-related-prompt-text--selected {\n text-align: center;\n}\n\n.x-related-prompt-icon {\n height: 24px;\n flex-shrink: 0;\n align-self: start;\n}\n</style>\n"],"names":["_resolveDirective","_createElementBlock","_renderSlot","selected"],"mappings":";;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAQS,QART,CAAA,CAAA;oBAMI,EAAAC,kBAAA,CAAA,QAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAPN,6CAKmC,EACgBC,aAAAA,EAAAA,IAAAA,CAAAA,aAAAA,EAAAA,CAAAA;AAAAA,IAAAA,cAAAA,CAAAA,kBAAAA;;;wDAFb,EAAc,iCAAA,EAAA,IAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAA,OAAA;;;;;AAIhD,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EARJ,mCAQoBA,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt x-gap-8\">\n <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" class=\"x-text-left x-grow\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon x-shrink-0\"\n />\n </button>\n</template>\n<script lang=\"ts\">\nimport type { RelatedPrompt } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport CrossTinyIcon from '../../../components/icons/cross-tiny.vue'\nimport PlusIcon from '../../../components/icons/plus.vue'\nimport { typing } from '../../../directives/typing'\n\n/**\n * This component shows a suggested related prompt.\n */\nexport default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing,\n },\n components: {\n CrossTinyIcon,\n PlusIcon,\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true,\n },\n selected: {\n type: Boolean,\n default: false,\n },\n },\n})\n</script>\n<style lang=\"css\">\n.x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n}\n\n.x-related-prompt-icon {\n align-self: start;\n}\n</style>\n"],"names":[],"mappings":";;;;;AAkBA;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAQ;AACT,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n <span\n v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\"\n class=\"x-related-prompt-text\"\n :class=\"{ 'x-related-prompt-text--selected': selected }\"\n />\n <component :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\" class=\"x-related-prompt-icon\" />\n </button>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedPrompt } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport CrossTinyIcon from '../../../components/icons/cross-tiny.vue'\nimport PlusIcon from '../../../components/icons/plus.vue'\nimport { typing } from '../../../directives/typing'\n\n/**\n * This component shows a suggested related prompt.\n */\nexport default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing,\n },\n components: {\n CrossTinyIcon,\n PlusIcon,\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true,\n },\n selected: {\n type: Boolean,\n default: false,\n },\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n gap: 8px;\n height: 100%;\n width: 100%;\n}\n\n.x-related-prompt-text {\n text-align: left;\n flex-grow: 1;\n}\n\n.x-related-prompt-text.x-related-prompt-text--selected {\n text-align: center;\n}\n\n.x-related-prompt-icon {\n height: 24px;\n flex-shrink: 0;\n align-self: start;\n}\n</style>\n"],"names":[],"mappings":";;;;;AAoBA;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAQ;AACT,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}
@@ -1,6 +1,6 @@
1
1
  import injectCss from '../../../../tools/inject-css.js';
2
2
 
3
- var css = "[dir=ltr] .x-related-prompt{text-align:left}[dir=rtl] .x-related-prompt{text-align:right}.x-related-prompt{align-items:center;display:flex;height:100%;justify-content:space-between;padding:8px;width:100%}.x-related-prompt-icon{align-self:start}";
3
+ var css = "[dir=ltr] .x-related-prompt{text-align:left}[dir=rtl] .x-related-prompt{text-align:right}.x-related-prompt{align-items:center;display:flex;gap:8px;height:100%;justify-content:space-between;padding:8px;width:100%}.x-related-prompt-text{flex-grow:1;text-align:left}.x-related-prompt-text.x-related-prompt-text--selected{text-align:center}.x-related-prompt-icon{align-self:start;flex-shrink:0;height:24px}";
4
4
  injectCss(css);
5
5
 
6
6
  export { css, css as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.70",
3
+ "version": "6.0.0-alpha.71",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -142,5 +142,5 @@
142
142
  "access": "public",
143
143
  "directory": "dist"
144
144
  },
145
- "gitHead": "60f58a334d18e91f8e0be0311c864d78cacb3714"
145
+ "gitHead": "6c83f2c471cea8d15dbc321e617845f92ea710d9"
146
146
  }