@kushagradhawan/kookie-ui 0.1.52 → 0.1.53
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/components.css +72 -72
- package/package.json +1 -1
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/chatbar.css +15 -12
- package/styles.css +72 -72
package/components.css
CHANGED
|
@@ -19494,68 +19494,68 @@
|
|
|
19494
19494
|
--backdrop-filter-components: none;
|
|
19495
19495
|
}
|
|
19496
19496
|
.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
|
|
19497
|
-
border-radius: min(var(--radius-
|
|
19498
|
-
padding: var(--space-
|
|
19497
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
19498
|
+
padding: var(--space-3);
|
|
19499
19499
|
}
|
|
19500
19500
|
.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
|
|
19501
|
-
--text-area-padding-y: calc(var(--space-
|
|
19502
|
-
--text-area-padding-x: calc(var(--space-
|
|
19501
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
19502
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
19503
19503
|
font-size: var(--font-size-1);
|
|
19504
19504
|
line-height: var(--line-height-1);
|
|
19505
19505
|
letter-spacing: var(--letter-spacing-1);
|
|
19506
19506
|
}
|
|
19507
19507
|
.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
|
|
19508
|
-
border-radius: min(var(--radius-
|
|
19509
|
-
padding: var(--space-
|
|
19508
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
19509
|
+
padding: var(--space-4);
|
|
19510
19510
|
}
|
|
19511
19511
|
.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
|
|
19512
|
-
--text-area-padding-y: calc(var(--space-
|
|
19513
|
-
--text-area-padding-x: calc(var(--space-
|
|
19512
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
19513
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
19514
19514
|
font-size: var(--font-size-2);
|
|
19515
19515
|
line-height: var(--line-height-2);
|
|
19516
19516
|
letter-spacing: var(--letter-spacing-2);
|
|
19517
19517
|
}
|
|
19518
19518
|
.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
|
|
19519
|
-
border-radius: min(var(--radius-
|
|
19520
|
-
padding: var(--space-
|
|
19519
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
19520
|
+
padding: var(--space-5);
|
|
19521
19521
|
}
|
|
19522
19522
|
.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
|
|
19523
|
-
--text-area-padding-y: calc(var(--space-
|
|
19524
|
-
--text-area-padding-x: calc(var(--space-
|
|
19523
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
19524
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
19525
19525
|
font-size: var(--font-size-3);
|
|
19526
19526
|
line-height: var(--line-height-3);
|
|
19527
19527
|
letter-spacing: var(--letter-spacing-3);
|
|
19528
19528
|
}
|
|
19529
19529
|
@media (min-width: 520px) {
|
|
19530
19530
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarBox {
|
|
19531
|
-
border-radius: min(var(--radius-
|
|
19532
|
-
padding: var(--space-
|
|
19531
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
19532
|
+
padding: var(--space-3);
|
|
19533
19533
|
}
|
|
19534
19534
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarInput {
|
|
19535
|
-
--text-area-padding-y: calc(var(--space-
|
|
19536
|
-
--text-area-padding-x: calc(var(--space-
|
|
19535
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
19536
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
19537
19537
|
font-size: var(--font-size-1);
|
|
19538
19538
|
line-height: var(--line-height-1);
|
|
19539
19539
|
letter-spacing: var(--letter-spacing-1);
|
|
19540
19540
|
}
|
|
19541
19541
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarBox {
|
|
19542
|
-
border-radius: min(var(--radius-
|
|
19543
|
-
padding: var(--space-
|
|
19542
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
19543
|
+
padding: var(--space-4);
|
|
19544
19544
|
}
|
|
19545
19545
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarInput {
|
|
19546
|
-
--text-area-padding-y: calc(var(--space-
|
|
19547
|
-
--text-area-padding-x: calc(var(--space-
|
|
19546
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
19547
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
19548
19548
|
font-size: var(--font-size-2);
|
|
19549
19549
|
line-height: var(--line-height-2);
|
|
19550
19550
|
letter-spacing: var(--letter-spacing-2);
|
|
19551
19551
|
}
|
|
19552
19552
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarBox {
|
|
19553
|
-
border-radius: min(var(--radius-
|
|
19554
|
-
padding: var(--space-
|
|
19553
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
19554
|
+
padding: var(--space-5);
|
|
19555
19555
|
}
|
|
19556
19556
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarInput {
|
|
19557
|
-
--text-area-padding-y: calc(var(--space-
|
|
19558
|
-
--text-area-padding-x: calc(var(--space-
|
|
19557
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
19558
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
19559
19559
|
font-size: var(--font-size-3);
|
|
19560
19560
|
line-height: var(--line-height-3);
|
|
19561
19561
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -19563,34 +19563,34 @@
|
|
|
19563
19563
|
}
|
|
19564
19564
|
@media (min-width: 768px) {
|
|
19565
19565
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarBox {
|
|
19566
|
-
border-radius: min(var(--radius-
|
|
19567
|
-
padding: var(--space-
|
|
19566
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
19567
|
+
padding: var(--space-3);
|
|
19568
19568
|
}
|
|
19569
19569
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarInput {
|
|
19570
|
-
--text-area-padding-y: calc(var(--space-
|
|
19571
|
-
--text-area-padding-x: calc(var(--space-
|
|
19570
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
19571
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
19572
19572
|
font-size: var(--font-size-1);
|
|
19573
19573
|
line-height: var(--line-height-1);
|
|
19574
19574
|
letter-spacing: var(--letter-spacing-1);
|
|
19575
19575
|
}
|
|
19576
19576
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarBox {
|
|
19577
|
-
border-radius: min(var(--radius-
|
|
19578
|
-
padding: var(--space-
|
|
19577
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
19578
|
+
padding: var(--space-4);
|
|
19579
19579
|
}
|
|
19580
19580
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarInput {
|
|
19581
|
-
--text-area-padding-y: calc(var(--space-
|
|
19582
|
-
--text-area-padding-x: calc(var(--space-
|
|
19581
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
19582
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
19583
19583
|
font-size: var(--font-size-2);
|
|
19584
19584
|
line-height: var(--line-height-2);
|
|
19585
19585
|
letter-spacing: var(--letter-spacing-2);
|
|
19586
19586
|
}
|
|
19587
19587
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarBox {
|
|
19588
|
-
border-radius: min(var(--radius-
|
|
19589
|
-
padding: var(--space-
|
|
19588
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
19589
|
+
padding: var(--space-5);
|
|
19590
19590
|
}
|
|
19591
19591
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarInput {
|
|
19592
|
-
--text-area-padding-y: calc(var(--space-
|
|
19593
|
-
--text-area-padding-x: calc(var(--space-
|
|
19592
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
19593
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
19594
19594
|
font-size: var(--font-size-3);
|
|
19595
19595
|
line-height: var(--line-height-3);
|
|
19596
19596
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -19598,34 +19598,34 @@
|
|
|
19598
19598
|
}
|
|
19599
19599
|
@media (min-width: 1024px) {
|
|
19600
19600
|
.rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarBox {
|
|
19601
|
-
border-radius: min(var(--radius-
|
|
19602
|
-
padding: var(--space-
|
|
19601
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
19602
|
+
padding: var(--space-3);
|
|
19603
19603
|
}
|
|
19604
19604
|
.rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarInput {
|
|
19605
|
-
--text-area-padding-y: calc(var(--space-
|
|
19606
|
-
--text-area-padding-x: calc(var(--space-
|
|
19605
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
19606
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
19607
19607
|
font-size: var(--font-size-1);
|
|
19608
19608
|
line-height: var(--line-height-1);
|
|
19609
19609
|
letter-spacing: var(--letter-spacing-1);
|
|
19610
19610
|
}
|
|
19611
19611
|
.rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarBox {
|
|
19612
|
-
border-radius: min(var(--radius-
|
|
19613
|
-
padding: var(--space-
|
|
19612
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
19613
|
+
padding: var(--space-4);
|
|
19614
19614
|
}
|
|
19615
19615
|
.rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarInput {
|
|
19616
|
-
--text-area-padding-y: calc(var(--space-
|
|
19617
|
-
--text-area-padding-x: calc(var(--space-
|
|
19616
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
19617
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
19618
19618
|
font-size: var(--font-size-2);
|
|
19619
19619
|
line-height: var(--line-height-2);
|
|
19620
19620
|
letter-spacing: var(--letter-spacing-2);
|
|
19621
19621
|
}
|
|
19622
19622
|
.rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarBox {
|
|
19623
|
-
border-radius: min(var(--radius-
|
|
19624
|
-
padding: var(--space-
|
|
19623
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
19624
|
+
padding: var(--space-5);
|
|
19625
19625
|
}
|
|
19626
19626
|
.rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarInput {
|
|
19627
|
-
--text-area-padding-y: calc(var(--space-
|
|
19628
|
-
--text-area-padding-x: calc(var(--space-
|
|
19627
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
19628
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
19629
19629
|
font-size: var(--font-size-3);
|
|
19630
19630
|
line-height: var(--line-height-3);
|
|
19631
19631
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -19633,34 +19633,34 @@
|
|
|
19633
19633
|
}
|
|
19634
19634
|
@media (min-width: 1280px) {
|
|
19635
19635
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarBox {
|
|
19636
|
-
border-radius: min(var(--radius-
|
|
19637
|
-
padding: var(--space-
|
|
19636
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
19637
|
+
padding: var(--space-3);
|
|
19638
19638
|
}
|
|
19639
19639
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarInput {
|
|
19640
|
-
--text-area-padding-y: calc(var(--space-
|
|
19641
|
-
--text-area-padding-x: calc(var(--space-
|
|
19640
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
19641
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
19642
19642
|
font-size: var(--font-size-1);
|
|
19643
19643
|
line-height: var(--line-height-1);
|
|
19644
19644
|
letter-spacing: var(--letter-spacing-1);
|
|
19645
19645
|
}
|
|
19646
19646
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarBox {
|
|
19647
|
-
border-radius: min(var(--radius-
|
|
19648
|
-
padding: var(--space-
|
|
19647
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
19648
|
+
padding: var(--space-4);
|
|
19649
19649
|
}
|
|
19650
19650
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarInput {
|
|
19651
|
-
--text-area-padding-y: calc(var(--space-
|
|
19652
|
-
--text-area-padding-x: calc(var(--space-
|
|
19651
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
19652
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
19653
19653
|
font-size: var(--font-size-2);
|
|
19654
19654
|
line-height: var(--line-height-2);
|
|
19655
19655
|
letter-spacing: var(--letter-spacing-2);
|
|
19656
19656
|
}
|
|
19657
19657
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarBox {
|
|
19658
|
-
border-radius: min(var(--radius-
|
|
19659
|
-
padding: var(--space-
|
|
19658
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
19659
|
+
padding: var(--space-5);
|
|
19660
19660
|
}
|
|
19661
19661
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarInput {
|
|
19662
|
-
--text-area-padding-y: calc(var(--space-
|
|
19663
|
-
--text-area-padding-x: calc(var(--space-
|
|
19662
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
19663
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
19664
19664
|
font-size: var(--font-size-3);
|
|
19665
19665
|
line-height: var(--line-height-3);
|
|
19666
19666
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -19668,34 +19668,34 @@
|
|
|
19668
19668
|
}
|
|
19669
19669
|
@media (min-width: 1640px) {
|
|
19670
19670
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarBox {
|
|
19671
|
-
border-radius: min(var(--radius-
|
|
19672
|
-
padding: var(--space-
|
|
19671
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
19672
|
+
padding: var(--space-3);
|
|
19673
19673
|
}
|
|
19674
19674
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarInput {
|
|
19675
|
-
--text-area-padding-y: calc(var(--space-
|
|
19676
|
-
--text-area-padding-x: calc(var(--space-
|
|
19675
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
19676
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
19677
19677
|
font-size: var(--font-size-1);
|
|
19678
19678
|
line-height: var(--line-height-1);
|
|
19679
19679
|
letter-spacing: var(--letter-spacing-1);
|
|
19680
19680
|
}
|
|
19681
19681
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarBox {
|
|
19682
|
-
border-radius: min(var(--radius-
|
|
19683
|
-
padding: var(--space-
|
|
19682
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
19683
|
+
padding: var(--space-4);
|
|
19684
19684
|
}
|
|
19685
19685
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarInput {
|
|
19686
|
-
--text-area-padding-y: calc(var(--space-
|
|
19687
|
-
--text-area-padding-x: calc(var(--space-
|
|
19686
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
19687
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
19688
19688
|
font-size: var(--font-size-2);
|
|
19689
19689
|
line-height: var(--line-height-2);
|
|
19690
19690
|
letter-spacing: var(--letter-spacing-2);
|
|
19691
19691
|
}
|
|
19692
19692
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarBox {
|
|
19693
|
-
border-radius: min(var(--radius-
|
|
19694
|
-
padding: var(--space-
|
|
19693
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
19694
|
+
padding: var(--space-5);
|
|
19695
19695
|
}
|
|
19696
19696
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarInput {
|
|
19697
|
-
--text-area-padding-y: calc(var(--space-
|
|
19698
|
-
--text-area-padding-x: calc(var(--space-
|
|
19697
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
19698
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
19699
19699
|
font-size: var(--font-size-3);
|
|
19700
19700
|
line-height: var(--line-height-3);
|
|
19701
19701
|
letter-spacing: var(--letter-spacing-3);
|
package/package.json
CHANGED
package/schemas/base-button.json
CHANGED
|
@@ -279,6 +279,6 @@
|
|
|
279
279
|
"title": "Base-button Component Props",
|
|
280
280
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
281
281
|
"version": "1.0.0",
|
|
282
|
-
"generatedAt": "2025-09-
|
|
282
|
+
"generatedAt": "2025-09-18T08:00:01.331Z",
|
|
283
283
|
"source": "Zod schema"
|
|
284
284
|
}
|
package/schemas/button.json
CHANGED
|
@@ -530,6 +530,6 @@
|
|
|
530
530
|
"title": "Button Component Props",
|
|
531
531
|
"description": "Props schema for the button component in Kookie UI",
|
|
532
532
|
"version": "1.0.0",
|
|
533
|
-
"generatedAt": "2025-09-
|
|
533
|
+
"generatedAt": "2025-09-18T08:00:01.336Z",
|
|
534
534
|
"source": "Zod schema"
|
|
535
535
|
}
|
package/schemas/icon-button.json
CHANGED
|
@@ -313,6 +313,6 @@
|
|
|
313
313
|
"title": "Icon-button Component Props",
|
|
314
314
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
315
315
|
"version": "1.0.0",
|
|
316
|
-
"generatedAt": "2025-09-
|
|
316
|
+
"generatedAt": "2025-09-18T08:00:01.338Z",
|
|
317
317
|
"source": "Zod schema"
|
|
318
318
|
}
|
package/schemas/index.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"title": "Kookie UI Button Components",
|
|
4
4
|
"description": "Complete JSON Schema collection for all button components in Kookie UI",
|
|
5
5
|
"version": "1.0.0",
|
|
6
|
-
"generatedAt": "2025-09-
|
|
6
|
+
"generatedAt": "2025-09-18T08:00:01.340Z",
|
|
7
7
|
"source": "Zod schemas",
|
|
8
8
|
"components": {
|
|
9
9
|
"base-button": {
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
"title": "Base-button Component Props",
|
|
288
288
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
289
289
|
"version": "1.0.0",
|
|
290
|
-
"generatedAt": "2025-09-
|
|
290
|
+
"generatedAt": "2025-09-18T08:00:01.331Z",
|
|
291
291
|
"source": "Zod schema"
|
|
292
292
|
},
|
|
293
293
|
"button": {
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
"title": "Button Component Props",
|
|
823
823
|
"description": "Props schema for the button component in Kookie UI",
|
|
824
824
|
"version": "1.0.0",
|
|
825
|
-
"generatedAt": "2025-09-
|
|
825
|
+
"generatedAt": "2025-09-18T08:00:01.336Z",
|
|
826
826
|
"source": "Zod schema"
|
|
827
827
|
},
|
|
828
828
|
"icon-button": {
|
|
@@ -1140,7 +1140,7 @@
|
|
|
1140
1140
|
"title": "Icon-button Component Props",
|
|
1141
1141
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
1142
1142
|
"version": "1.0.0",
|
|
1143
|
-
"generatedAt": "2025-09-
|
|
1143
|
+
"generatedAt": "2025-09-18T08:00:01.338Z",
|
|
1144
1144
|
"source": "Zod schema"
|
|
1145
1145
|
},
|
|
1146
1146
|
"toggle-button": {
|
|
@@ -1683,7 +1683,7 @@
|
|
|
1683
1683
|
"title": "Toggle-button Component Props",
|
|
1684
1684
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
1685
1685
|
"version": "1.0.0",
|
|
1686
|
-
"generatedAt": "2025-09-
|
|
1686
|
+
"generatedAt": "2025-09-18T08:00:01.339Z",
|
|
1687
1687
|
"source": "Zod schema"
|
|
1688
1688
|
},
|
|
1689
1689
|
"toggle-icon-button": {
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
"title": "Toggle-icon-button Component Props",
|
|
2010
2010
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
2011
2011
|
"version": "1.0.0",
|
|
2012
|
-
"generatedAt": "2025-09-
|
|
2012
|
+
"generatedAt": "2025-09-18T08:00:01.340Z",
|
|
2013
2013
|
"source": "Zod schema"
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
@@ -538,6 +538,6 @@
|
|
|
538
538
|
"title": "Toggle-button Component Props",
|
|
539
539
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
540
540
|
"version": "1.0.0",
|
|
541
|
-
"generatedAt": "2025-09-
|
|
541
|
+
"generatedAt": "2025-09-18T08:00:01.339Z",
|
|
542
542
|
"source": "Zod schema"
|
|
543
543
|
}
|
|
@@ -321,6 +321,6 @@
|
|
|
321
321
|
"title": "Toggle-icon-button Component Props",
|
|
322
322
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
323
323
|
"version": "1.0.0",
|
|
324
|
-
"generatedAt": "2025-09-
|
|
324
|
+
"generatedAt": "2025-09-18T08:00:01.340Z",
|
|
325
325
|
"source": "Zod schema"
|
|
326
326
|
}
|
|
@@ -165,34 +165,37 @@
|
|
|
165
165
|
/* Sizes (padding and radius via tokens) */
|
|
166
166
|
@breakpoints {
|
|
167
167
|
.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
|
|
168
|
-
|
|
169
|
-
|
|
168
|
+
/* Map Chatbar size 1 to Card size 2 */
|
|
169
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
170
|
+
padding: var(--space-3);
|
|
170
171
|
}
|
|
171
172
|
.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
|
|
172
|
-
--text-area-padding-y: calc(var(--space-
|
|
173
|
-
--text-area-padding-x: calc(var(--space-
|
|
173
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
174
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
174
175
|
font-size: var(--font-size-1);
|
|
175
176
|
line-height: var(--line-height-1);
|
|
176
177
|
letter-spacing: var(--letter-spacing-1);
|
|
177
178
|
}
|
|
178
179
|
.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
|
|
179
|
-
|
|
180
|
-
|
|
180
|
+
/* Map Chatbar size 2 to Card size 3 */
|
|
181
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
182
|
+
padding: var(--space-4);
|
|
181
183
|
}
|
|
182
184
|
.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
|
|
183
|
-
--text-area-padding-y: calc(var(--space-
|
|
184
|
-
--text-area-padding-x: calc(var(--space-
|
|
185
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
186
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
185
187
|
font-size: var(--font-size-2);
|
|
186
188
|
line-height: var(--line-height-2);
|
|
187
189
|
letter-spacing: var(--letter-spacing-2);
|
|
188
190
|
}
|
|
189
191
|
.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
+
/* Map Chatbar size 3 to Card size 4 */
|
|
193
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
194
|
+
padding: var(--space-5);
|
|
192
195
|
}
|
|
193
196
|
.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
|
|
194
|
-
--text-area-padding-y: calc(var(--space-
|
|
195
|
-
--text-area-padding-x: calc(var(--space-
|
|
197
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
198
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
196
199
|
font-size: var(--font-size-3);
|
|
197
200
|
line-height: var(--line-height-3);
|
|
198
201
|
letter-spacing: var(--letter-spacing-3);
|
package/styles.css
CHANGED
|
@@ -24489,68 +24489,68 @@
|
|
|
24489
24489
|
--backdrop-filter-components: none;
|
|
24490
24490
|
}
|
|
24491
24491
|
.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox{
|
|
24492
|
-
border-radius: min(var(--radius-
|
|
24493
|
-
padding: var(--space-
|
|
24492
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
24493
|
+
padding: var(--space-3);
|
|
24494
24494
|
}
|
|
24495
24495
|
.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput{
|
|
24496
|
-
--text-area-padding-y: calc(var(--space-
|
|
24497
|
-
--text-area-padding-x: calc(var(--space-
|
|
24496
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
24497
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
24498
24498
|
font-size: var(--font-size-1);
|
|
24499
24499
|
line-height: var(--line-height-1);
|
|
24500
24500
|
letter-spacing: var(--letter-spacing-1);
|
|
24501
24501
|
}
|
|
24502
24502
|
.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox{
|
|
24503
|
-
border-radius: min(var(--radius-
|
|
24504
|
-
padding: var(--space-
|
|
24503
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
24504
|
+
padding: var(--space-4);
|
|
24505
24505
|
}
|
|
24506
24506
|
.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput{
|
|
24507
|
-
--text-area-padding-y: calc(var(--space-
|
|
24508
|
-
--text-area-padding-x: calc(var(--space-
|
|
24507
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
24508
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
24509
24509
|
font-size: var(--font-size-2);
|
|
24510
24510
|
line-height: var(--line-height-2);
|
|
24511
24511
|
letter-spacing: var(--letter-spacing-2);
|
|
24512
24512
|
}
|
|
24513
24513
|
.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox{
|
|
24514
|
-
border-radius: min(var(--radius-
|
|
24515
|
-
padding: var(--space-
|
|
24514
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
24515
|
+
padding: var(--space-5);
|
|
24516
24516
|
}
|
|
24517
24517
|
.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput{
|
|
24518
|
-
--text-area-padding-y: calc(var(--space-
|
|
24519
|
-
--text-area-padding-x: calc(var(--space-
|
|
24518
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
24519
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
24520
24520
|
font-size: var(--font-size-3);
|
|
24521
24521
|
line-height: var(--line-height-3);
|
|
24522
24522
|
letter-spacing: var(--letter-spacing-3);
|
|
24523
24523
|
}
|
|
24524
24524
|
@media (min-width: 520px){
|
|
24525
24525
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarBox{
|
|
24526
|
-
border-radius: min(var(--radius-
|
|
24527
|
-
padding: var(--space-
|
|
24526
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
24527
|
+
padding: var(--space-3);
|
|
24528
24528
|
}
|
|
24529
24529
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarInput{
|
|
24530
|
-
--text-area-padding-y: calc(var(--space-
|
|
24531
|
-
--text-area-padding-x: calc(var(--space-
|
|
24530
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
24531
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
24532
24532
|
font-size: var(--font-size-1);
|
|
24533
24533
|
line-height: var(--line-height-1);
|
|
24534
24534
|
letter-spacing: var(--letter-spacing-1);
|
|
24535
24535
|
}
|
|
24536
24536
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarBox{
|
|
24537
|
-
border-radius: min(var(--radius-
|
|
24538
|
-
padding: var(--space-
|
|
24537
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
24538
|
+
padding: var(--space-4);
|
|
24539
24539
|
}
|
|
24540
24540
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarInput{
|
|
24541
|
-
--text-area-padding-y: calc(var(--space-
|
|
24542
|
-
--text-area-padding-x: calc(var(--space-
|
|
24541
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
24542
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
24543
24543
|
font-size: var(--font-size-2);
|
|
24544
24544
|
line-height: var(--line-height-2);
|
|
24545
24545
|
letter-spacing: var(--letter-spacing-2);
|
|
24546
24546
|
}
|
|
24547
24547
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarBox{
|
|
24548
|
-
border-radius: min(var(--radius-
|
|
24549
|
-
padding: var(--space-
|
|
24548
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
24549
|
+
padding: var(--space-5);
|
|
24550
24550
|
}
|
|
24551
24551
|
.rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarInput{
|
|
24552
|
-
--text-area-padding-y: calc(var(--space-
|
|
24553
|
-
--text-area-padding-x: calc(var(--space-
|
|
24552
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
24553
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
24554
24554
|
font-size: var(--font-size-3);
|
|
24555
24555
|
line-height: var(--line-height-3);
|
|
24556
24556
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -24558,34 +24558,34 @@
|
|
|
24558
24558
|
}
|
|
24559
24559
|
@media (min-width: 768px){
|
|
24560
24560
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarBox{
|
|
24561
|
-
border-radius: min(var(--radius-
|
|
24562
|
-
padding: var(--space-
|
|
24561
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
24562
|
+
padding: var(--space-3);
|
|
24563
24563
|
}
|
|
24564
24564
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarInput{
|
|
24565
|
-
--text-area-padding-y: calc(var(--space-
|
|
24566
|
-
--text-area-padding-x: calc(var(--space-
|
|
24565
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
24566
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
24567
24567
|
font-size: var(--font-size-1);
|
|
24568
24568
|
line-height: var(--line-height-1);
|
|
24569
24569
|
letter-spacing: var(--letter-spacing-1);
|
|
24570
24570
|
}
|
|
24571
24571
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarBox{
|
|
24572
|
-
border-radius: min(var(--radius-
|
|
24573
|
-
padding: var(--space-
|
|
24572
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
24573
|
+
padding: var(--space-4);
|
|
24574
24574
|
}
|
|
24575
24575
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarInput{
|
|
24576
|
-
--text-area-padding-y: calc(var(--space-
|
|
24577
|
-
--text-area-padding-x: calc(var(--space-
|
|
24576
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
24577
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
24578
24578
|
font-size: var(--font-size-2);
|
|
24579
24579
|
line-height: var(--line-height-2);
|
|
24580
24580
|
letter-spacing: var(--letter-spacing-2);
|
|
24581
24581
|
}
|
|
24582
24582
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarBox{
|
|
24583
|
-
border-radius: min(var(--radius-
|
|
24584
|
-
padding: var(--space-
|
|
24583
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
24584
|
+
padding: var(--space-5);
|
|
24585
24585
|
}
|
|
24586
24586
|
.rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarInput{
|
|
24587
|
-
--text-area-padding-y: calc(var(--space-
|
|
24588
|
-
--text-area-padding-x: calc(var(--space-
|
|
24587
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
24588
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
24589
24589
|
font-size: var(--font-size-3);
|
|
24590
24590
|
line-height: var(--line-height-3);
|
|
24591
24591
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -24593,34 +24593,34 @@
|
|
|
24593
24593
|
}
|
|
24594
24594
|
@media (min-width: 1024px){
|
|
24595
24595
|
.rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarBox{
|
|
24596
|
-
border-radius: min(var(--radius-
|
|
24597
|
-
padding: var(--space-
|
|
24596
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
24597
|
+
padding: var(--space-3);
|
|
24598
24598
|
}
|
|
24599
24599
|
.rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarInput{
|
|
24600
|
-
--text-area-padding-y: calc(var(--space-
|
|
24601
|
-
--text-area-padding-x: calc(var(--space-
|
|
24600
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
24601
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
24602
24602
|
font-size: var(--font-size-1);
|
|
24603
24603
|
line-height: var(--line-height-1);
|
|
24604
24604
|
letter-spacing: var(--letter-spacing-1);
|
|
24605
24605
|
}
|
|
24606
24606
|
.rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarBox{
|
|
24607
|
-
border-radius: min(var(--radius-
|
|
24608
|
-
padding: var(--space-
|
|
24607
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
24608
|
+
padding: var(--space-4);
|
|
24609
24609
|
}
|
|
24610
24610
|
.rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarInput{
|
|
24611
|
-
--text-area-padding-y: calc(var(--space-
|
|
24612
|
-
--text-area-padding-x: calc(var(--space-
|
|
24611
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
24612
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
24613
24613
|
font-size: var(--font-size-2);
|
|
24614
24614
|
line-height: var(--line-height-2);
|
|
24615
24615
|
letter-spacing: var(--letter-spacing-2);
|
|
24616
24616
|
}
|
|
24617
24617
|
.rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarBox{
|
|
24618
|
-
border-radius: min(var(--radius-
|
|
24619
|
-
padding: var(--space-
|
|
24618
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
24619
|
+
padding: var(--space-5);
|
|
24620
24620
|
}
|
|
24621
24621
|
.rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarInput{
|
|
24622
|
-
--text-area-padding-y: calc(var(--space-
|
|
24623
|
-
--text-area-padding-x: calc(var(--space-
|
|
24622
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
24623
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
24624
24624
|
font-size: var(--font-size-3);
|
|
24625
24625
|
line-height: var(--line-height-3);
|
|
24626
24626
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -24628,34 +24628,34 @@
|
|
|
24628
24628
|
}
|
|
24629
24629
|
@media (min-width: 1280px){
|
|
24630
24630
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarBox{
|
|
24631
|
-
border-radius: min(var(--radius-
|
|
24632
|
-
padding: var(--space-
|
|
24631
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
24632
|
+
padding: var(--space-3);
|
|
24633
24633
|
}
|
|
24634
24634
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarInput{
|
|
24635
|
-
--text-area-padding-y: calc(var(--space-
|
|
24636
|
-
--text-area-padding-x: calc(var(--space-
|
|
24635
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
24636
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
24637
24637
|
font-size: var(--font-size-1);
|
|
24638
24638
|
line-height: var(--line-height-1);
|
|
24639
24639
|
letter-spacing: var(--letter-spacing-1);
|
|
24640
24640
|
}
|
|
24641
24641
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarBox{
|
|
24642
|
-
border-radius: min(var(--radius-
|
|
24643
|
-
padding: var(--space-
|
|
24642
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
24643
|
+
padding: var(--space-4);
|
|
24644
24644
|
}
|
|
24645
24645
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarInput{
|
|
24646
|
-
--text-area-padding-y: calc(var(--space-
|
|
24647
|
-
--text-area-padding-x: calc(var(--space-
|
|
24646
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
24647
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
24648
24648
|
font-size: var(--font-size-2);
|
|
24649
24649
|
line-height: var(--line-height-2);
|
|
24650
24650
|
letter-spacing: var(--letter-spacing-2);
|
|
24651
24651
|
}
|
|
24652
24652
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarBox{
|
|
24653
|
-
border-radius: min(var(--radius-
|
|
24654
|
-
padding: var(--space-
|
|
24653
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
24654
|
+
padding: var(--space-5);
|
|
24655
24655
|
}
|
|
24656
24656
|
.rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarInput{
|
|
24657
|
-
--text-area-padding-y: calc(var(--space-
|
|
24658
|
-
--text-area-padding-x: calc(var(--space-
|
|
24657
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
24658
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
24659
24659
|
font-size: var(--font-size-3);
|
|
24660
24660
|
line-height: var(--line-height-3);
|
|
24661
24661
|
letter-spacing: var(--letter-spacing-3);
|
|
@@ -24663,34 +24663,34 @@
|
|
|
24663
24663
|
}
|
|
24664
24664
|
@media (min-width: 1640px){
|
|
24665
24665
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarBox{
|
|
24666
|
-
border-radius: min(var(--radius-
|
|
24667
|
-
padding: var(--space-
|
|
24666
|
+
border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
|
|
24667
|
+
padding: var(--space-3);
|
|
24668
24668
|
}
|
|
24669
24669
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarInput{
|
|
24670
|
-
--text-area-padding-y: calc(var(--space-
|
|
24671
|
-
--text-area-padding-x: calc(var(--space-
|
|
24670
|
+
--text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
|
|
24671
|
+
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
|
|
24672
24672
|
font-size: var(--font-size-1);
|
|
24673
24673
|
line-height: var(--line-height-1);
|
|
24674
24674
|
letter-spacing: var(--letter-spacing-1);
|
|
24675
24675
|
}
|
|
24676
24676
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarBox{
|
|
24677
|
-
border-radius: min(var(--radius-
|
|
24678
|
-
padding: var(--space-
|
|
24677
|
+
border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
|
|
24678
|
+
padding: var(--space-4);
|
|
24679
24679
|
}
|
|
24680
24680
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarInput{
|
|
24681
|
-
--text-area-padding-y: calc(var(--space-
|
|
24682
|
-
--text-area-padding-x: calc(var(--space-
|
|
24681
|
+
--text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
|
|
24682
|
+
--text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
|
|
24683
24683
|
font-size: var(--font-size-2);
|
|
24684
24684
|
line-height: var(--line-height-2);
|
|
24685
24685
|
letter-spacing: var(--letter-spacing-2);
|
|
24686
24686
|
}
|
|
24687
24687
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarBox{
|
|
24688
|
-
border-radius: min(var(--radius-
|
|
24689
|
-
padding: var(--space-
|
|
24688
|
+
border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
|
|
24689
|
+
padding: var(--space-5);
|
|
24690
24690
|
}
|
|
24691
24691
|
.rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarInput{
|
|
24692
|
-
--text-area-padding-y: calc(var(--space-
|
|
24693
|
-
--text-area-padding-x: calc(var(--space-
|
|
24692
|
+
--text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
|
|
24693
|
+
--text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
|
|
24694
24694
|
font-size: var(--font-size-3);
|
|
24695
24695
|
line-height: var(--line-height-3);
|
|
24696
24696
|
letter-spacing: var(--letter-spacing-3);
|