@youcan/celeste 0.6.15 → 0.6.16

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 (88) hide show
  1. package/dist/celeste.css +597 -198
  2. package/dist/cjs/chunks/combobox-anchor.js +31 -0
  3. package/dist/cjs/chunks/combobox-root.js +38 -0
  4. package/dist/cjs/chunks/index.js +17 -0
  5. package/dist/cjs/combobox-anchor.js +3 -0
  6. package/dist/cjs/combobox-empty.js +32 -0
  7. package/dist/cjs/combobox-group.js +42 -0
  8. package/dist/cjs/combobox-input.js +67 -0
  9. package/dist/cjs/combobox-item.js +109 -0
  10. package/dist/cjs/combobox-list.js +62 -0
  11. package/dist/cjs/combobox-root.js +3 -0
  12. package/dist/cjs/combobox-separator.js +32 -0
  13. package/dist/cjs/combobox-trigger.js +46 -0
  14. package/dist/cjs/combobox.js +208 -0
  15. package/dist/cjs/dropdown.js +10 -3
  16. package/dist/cjs/index.js +30 -0
  17. package/dist/cjs/text-input-icon.js +2 -2
  18. package/dist/components/combobox/combobox-anchor.d.ts +22 -0
  19. package/dist/components/combobox/combobox-empty.d.ts +22 -0
  20. package/dist/components/combobox/combobox-group.d.ts +23 -0
  21. package/dist/components/combobox/combobox-input.d.ts +17 -0
  22. package/dist/components/combobox/combobox-item.d.ts +31 -0
  23. package/dist/components/combobox/combobox-list.d.ts +36 -0
  24. package/dist/components/combobox/combobox-root.d.ts +29 -0
  25. package/dist/components/combobox/combobox-separator.d.ts +22 -0
  26. package/dist/components/combobox/combobox-trigger.d.ts +20 -0
  27. package/dist/components/combobox/combobox.d.ts +53 -0
  28. package/dist/components/combobox/index.d.ts +20 -0
  29. package/dist/components/dropdown/dropdown.d.ts +5 -1
  30. package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts +4 -4
  31. package/dist/components/index.d.ts +1 -0
  32. package/dist/components/modal/modal-content.d.ts +2 -2
  33. package/dist/components/popover/popover-content.d.ts +2 -2
  34. package/dist/es/chunks/combobox-anchor.js +32 -0
  35. package/dist/es/chunks/combobox-root.js +39 -0
  36. package/dist/es/chunks/index.js +59 -42
  37. package/dist/es/combobox-anchor.js +4 -0
  38. package/dist/es/combobox-empty.js +33 -0
  39. package/dist/es/combobox-group.js +43 -0
  40. package/dist/es/combobox-input.js +68 -0
  41. package/dist/es/combobox-item.js +110 -0
  42. package/dist/es/combobox-list.js +63 -0
  43. package/dist/es/combobox-root.js +4 -0
  44. package/dist/es/combobox-separator.js +33 -0
  45. package/dist/es/combobox-trigger.js +47 -0
  46. package/dist/es/combobox.js +209 -0
  47. package/dist/es/command-group.js +1 -1
  48. package/dist/es/command-input.js +1 -1
  49. package/dist/es/command-separator.js +1 -1
  50. package/dist/es/dropdown-menu-group.js +1 -1
  51. package/dist/es/dropdown-menu-item.js +1 -1
  52. package/dist/es/dropdown-menu-label.js +1 -1
  53. package/dist/es/dropdown-menu-separator.js +1 -1
  54. package/dist/es/dropdown-menu-trigger.js +1 -1
  55. package/dist/es/dropdown-menu.js +1 -1
  56. package/dist/es/dropdown.js +11 -4
  57. package/dist/es/index.js +75 -45
  58. package/dist/es/label.js +1 -1
  59. package/dist/es/modal-content.js +1 -1
  60. package/dist/es/modal-header.js +1 -1
  61. package/dist/es/popover-content.js +1 -1
  62. package/dist/es/popover-trigger.js +1 -1
  63. package/dist/es/segmented-control-item.js +1 -1
  64. package/dist/es/segmented-control.js +1 -1
  65. package/dist/es/select-content.js +1 -1
  66. package/dist/es/select-item.js +1 -1
  67. package/dist/es/select-trigger.js +1 -1
  68. package/dist/es/select-value.js +1 -1
  69. package/dist/es/tab-menu-content.js +1 -1
  70. package/dist/es/tab-menu-item.js +1 -1
  71. package/dist/es/tab-menu-list.js +1 -1
  72. package/dist/es/text-input-icon.js +2 -2
  73. package/dist/es/tooltip.js +1 -1
  74. package/package.json +3 -3
  75. package/src/components/combobox/combobox-anchor.vue +25 -0
  76. package/src/components/combobox/combobox-empty.vue +30 -0
  77. package/src/components/combobox/combobox-group.vue +42 -0
  78. package/src/components/combobox/combobox-input.vue +64 -0
  79. package/src/components/combobox/combobox-item.vue +196 -0
  80. package/src/components/combobox/combobox-list.vue +100 -0
  81. package/src/components/combobox/combobox-root.vue +14 -0
  82. package/src/components/combobox/combobox-separator.vue +31 -0
  83. package/src/components/combobox/combobox-trigger.vue +249 -0
  84. package/src/components/combobox/combobox.vue +257 -0
  85. package/src/components/combobox/index.ts +29 -0
  86. package/src/components/combobox/stories/combobox.stories.ts +99 -0
  87. package/src/components/dropdown/dropdown.vue +33 -2
  88. package/src/components/index.ts +1 -0
package/dist/celeste.css CHANGED
@@ -1604,6 +1604,535 @@ to {
1604
1604
  }
1605
1605
  .celeste-social-button-github[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
1606
1606
  --celeste-social-button-bg: rgba(255, 255, 255, 0.16);
1607
+ }.celeste-dropdown-empty-list[data-v-450bfb63] {
1608
+ display: flex;
1609
+ align-items: center;
1610
+ padding: var(--spacing-8);
1611
+ color: var(--color-text-sub-600);
1612
+ font: var(--paragraph-sm);
1613
+ }.celeste-dropdown-items-group[data-v-66b5c9e4] {
1614
+ display: flex;
1615
+ flex-direction: column;
1616
+ gap: var(--spacing-4);
1617
+ }
1618
+ .celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
1619
+ width: auto;
1620
+ height: auto;
1621
+ }.celeste-text-input-icon[data-v-3b859b72] {
1622
+ display: flex;
1623
+ align-items: center;
1624
+ color: var(--color-text-sub-600);
1625
+ }
1626
+ .celeste-text-input-icon[position=start][data-v-3b859b72] {
1627
+ order: -1;
1628
+ }
1629
+ .celeste-text-input-icon > i[data-v-3b859b72] {
1630
+ width: 20px;
1631
+ height: 20px;
1632
+ }.celeste-text-input-wrapper[data-v-105e81d6] {
1633
+ display: flex;
1634
+ box-sizing: border-box;
1635
+ align-items: center;
1636
+ height: var(--input-height);
1637
+ padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
1638
+ transition: all var(--animation-fast) ease-out;
1639
+ border: 1px solid var(--color-stroke-soft-200);
1640
+ border-radius: var(--input-radius);
1641
+ outline: 2px solid transparent;
1642
+ outline-offset: 2px;
1643
+ background-color: var(--color-bg-white-0);
1644
+ box-shadow: var(--shadow-regular-xs);
1645
+ color: var(--color-text-strong-950);
1646
+ font: var(--paragraph-sm);
1647
+ gap: var(--input-gap);
1648
+ }
1649
+ .celeste-text-input-wrapper[size=xs][data-v-105e81d6] {
1650
+ --input-gap: 8px;
1651
+ --input-height: 32px;
1652
+ --input-radius: var(--radius-8);
1653
+ --input-padding: calc(var(--spacing-8) - var(--spacing-2));
1654
+ }
1655
+ .celeste-text-input-wrapper[size=sm][data-v-105e81d6] {
1656
+ --input-gap: 6px;
1657
+ --input-height: 36px;
1658
+ --input-radius: var(--radius-8);
1659
+ --input-padding: var(--spacing-8);
1660
+ }
1661
+ .celeste-text-input-wrapper[size=md][data-v-105e81d6] {
1662
+ --input-gap: 6px;
1663
+ --input-height: 40px;
1664
+ --input-radius: var(--radius-10);
1665
+ --input-padding: var(--spacing-10);
1666
+ }
1667
+ .celeste-text-input-wrapper[has-error=true][data-v-105e81d6] {
1668
+ border-color: var(--color-state-error-base);
1669
+ }
1670
+ .celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6] {
1671
+ width: 100%;
1672
+ height: 100%;
1673
+ padding: 0;
1674
+ border: none;
1675
+ outline: none;
1676
+ background-color: transparent;
1677
+ color: inherit;
1678
+ font: inherit;
1679
+ }
1680
+ .celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
1681
+ -moz-transition: color var(--animation-fast) ease-out;
1682
+ transition: color var(--animation-fast) ease-out;
1683
+ color: var(--color-text-soft-400);
1684
+ }
1685
+ .celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::placeholder {
1686
+ transition: color var(--animation-fast) ease-out;
1687
+ color: var(--color-text-soft-400);
1688
+ }
1689
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:focus) {
1690
+ border-color: var(--color-stroke-strong-950);
1691
+ outline-color: var(--color-stroke-soft-200);
1692
+ }
1693
+ .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-105e81d6] {
1694
+ border-color: var(--color-state-error-base);
1695
+ outline-color: var(--color-state-error-lighter);
1696
+ }
1697
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) {
1698
+ border-color: transparent;
1699
+ background-color: var(--color-bg-weak-50);
1700
+ box-shadow: none;
1701
+ color: var(--color-text-disabled-300);
1702
+ pointer-events: none;
1703
+ }
1704
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
1705
+ color: currentcolor;
1706
+ }
1707
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::placeholder {
1708
+ color: currentcolor;
1709
+ }
1710
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
1711
+ color: var(--color-icon-disabled-300);
1712
+ }
1713
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-button {
1714
+ background-color: var(--color-bg-weak-50) !important;
1715
+ color: var(--color-text-disabled-300);
1716
+ }
1717
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
1718
+ gap: var(--spacing-0);
1719
+ padding-inline-end: var(--spacing-0);
1720
+ }
1721
+ .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-button[inline=false], .celeste-text-input-affix[variant=suffix]) .celeste-text-input[data-v-105e81d6] {
1722
+ padding-inline-end: var(--input-padding);
1723
+ border-inline-end: 1px solid var(--color-stroke-soft-200);
1724
+ }
1725
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) {
1726
+ padding-inline: var(--spacing-0) var(--input-padding);
1727
+ }
1728
+ .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) .celeste-text-input[data-v-105e81d6] {
1729
+ padding-inline-start: var(--input-padding);
1730
+ border-inline-start: 1px solid var(--color-stroke-soft-200);
1731
+ }
1732
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=start] {
1733
+ margin-inline-end: var(--input-gap);
1734
+ }
1735
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=end] {
1736
+ margin-inline-start: var(--input-gap);
1737
+ }
1738
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
1739
+ /* stylelint-disable-next-line no-descending-specificity */
1740
+ }
1741
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
1742
+ border-color: transparent;
1743
+ background-color: var(--color-bg-weak-50);
1744
+ }
1745
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
1746
+ background-color: var(--color-bg-weak-50);
1747
+ }
1748
+ .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
1749
+ color: var(--color-text-sub-600);
1750
+ }
1751
+ .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-105e81d6]::placeholder {
1752
+ color: var(--color-text-sub-600);
1753
+ }
1754
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
1755
+ /* stylelint-disable-next-line no-descending-specificity */
1756
+ }
1757
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
1758
+ /* stylelint-disable-next-line no-descending-specificity */
1759
+ }
1760
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
1761
+ color: var(--color-text-soft-400);
1762
+ }
1763
+ .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
1764
+ color: var(--color-text-soft-400);
1765
+ }.celeste-dropdown-input[data-v-6de83486] {
1766
+ display: flex;
1767
+ align-items: center;
1768
+ gap: var(--spacing-4);
1769
+ background-color: var(--color-bg-white-0);
1770
+ }
1771
+ .celeste-dropdown-input[data-v-6de83486] .celeste-text-input-wrapper {
1772
+ width: 100%;
1773
+ border: none;
1774
+ border-radius: var(--radius-8) var(--radius-8) 0 0;
1775
+ outline: none;
1776
+ box-shadow: none;
1777
+ }.celeste-dropdown-item[data-v-3c2bd0ae] {
1778
+ display: flex;
1779
+ align-items: center;
1780
+ padding: var(--spacing-8);
1781
+ transition-property: background-color;
1782
+ transition-duration: var(--animation-fast);
1783
+ transition-timing-function: ease-out;
1784
+ border-radius: var(--radius-8);
1785
+ background: var(--color-bg-white-0);
1786
+ cursor: pointer;
1787
+ gap: var(--spacing-8);
1788
+ }
1789
+ .celeste-dropdown-item i[data-v-3c2bd0ae] {
1790
+ color: var(--color-icon-sub-600);
1791
+ }
1792
+ .celeste-dropdown-item[data-highlighted][data-v-3c2bd0ae], .celeste-dropdown-item[data-v-3c2bd0ae]:hover, .celeste-dropdown-item-focused[data-v-3c2bd0ae], .celeste-dropdown-item[data-v-3c2bd0ae]:focus, .celeste-dropdown-item[data-v-3c2bd0ae]:focus-visible {
1793
+ outline: none;
1794
+ background: var(--color-bg-weak-50);
1795
+ }
1796
+ .celeste-dropdown-item[data-v-3c2bd0ae] .celeste-input-wrapper {
1797
+ gap: 0;
1798
+ }
1799
+ .celeste-dropdown-item-header[data-v-3c2bd0ae] {
1800
+ display: flex;
1801
+ align-items: center;
1802
+ gap: var(--spacing-4);
1803
+ }
1804
+ .celeste-dropdown-item-label[data-v-3c2bd0ae] {
1805
+ color: var(--color-text-strong-950);
1806
+ font: var(--paragraph-sm);
1807
+ }
1808
+ .celeste-dropdown-item-sublabel[data-v-3c2bd0ae] {
1809
+ color: var(--color-text-soft-400);
1810
+ font: var(--paragraph-xs);
1811
+ }
1812
+ .celeste-dropdown-item-description[data-v-3c2bd0ae] {
1813
+ margin: var(--spacing-0);
1814
+ color: var(--color-text-sub-600);
1815
+ font: var(--paragraph-xs);
1816
+ }
1817
+ .celeste-dropdown-item .celeste-dropdown-item-prefix[data-v-3c2bd0ae] {
1818
+ display: flex;
1819
+ align-items: center;
1820
+ justify-content: center;
1821
+ color: var(--color-icon-sub-600);
1822
+ }
1823
+ .celeste-dropdown-item .celeste-dropdown-item-prefix-lg[data-v-3c2bd0ae] {
1824
+ padding: var(--spacing-10);
1825
+ border: 1px solid var(--color-stroke-soft-200);
1826
+ border-radius: var(--radius-full);
1827
+ box-shadow: var(--shadow-regular-xs);
1828
+ gap: var(--spacing-10);
1829
+ }
1830
+ .celeste-dropdown-item .celeste-dropdown-item-suffix[data-v-3c2bd0ae] {
1831
+ color: var(--color-icon-sub-600);
1832
+ }
1833
+ .celeste-dropdown-item-disabled[data-v-3c2bd0ae] {
1834
+ color: var(--color-text-disabled-300);
1835
+ cursor: not-allowed;
1836
+ }
1837
+ .celeste-dropdown-item-disabled[data-v-3c2bd0ae] i {
1838
+ color: var(--color-text-disabled-300);
1839
+ }
1840
+ .celeste-dropdown-item-disabled .celeste-dropdown-item-label[data-v-3c2bd0ae],
1841
+ .celeste-dropdown-item-disabled .celeste-dropdown-item-sublabel[data-v-3c2bd0ae],
1842
+ .celeste-dropdown-item-disabled .celeste-dropdown-item-description[data-v-3c2bd0ae] {
1843
+ color: var(--color-text-disabled-300);
1844
+ }
1845
+ .celeste-dropdown-item-selected[data-v-3c2bd0ae] {
1846
+ background: var(--color-bg-weak-50);
1847
+ }
1848
+ .celeste-dropdown-item .celeste-dropdown-item-info[data-v-3c2bd0ae] {
1849
+ display: flex;
1850
+ flex: 1 0 0;
1851
+ flex-direction: column;
1852
+ justify-content: center;
1853
+ gap: var(--spacing-4);
1854
+ }
1855
+ .celeste-dropdown-item .celeste-dropdown-item-header-lg .celeste-dropdown-item-label[data-v-3c2bd0ae] {
1856
+ font-weight: var(--font-weights-display-0);
1857
+ }.celeste-dropdown-content[data-v-dc6bae8b],
1858
+ div[data-v-dc6bae8b] .celeste-dropdown-content {
1859
+ --dropdown-width: fit-content;
1860
+ --dropdown-height: 300px;
1861
+ --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
1862
+ display: flex;
1863
+ z-index: 50;
1864
+ box-sizing: border-box;
1865
+ flex-direction: column;
1866
+ width: var(--dropdown-width);
1867
+ min-width: var(--dropdown-min-width);
1868
+ max-height: var(--dropdown-height);
1869
+ margin-top: var(--spacing-10);
1870
+ padding: var(--spacing-8);
1871
+ overflow: visible;
1872
+ transform-origin: var(--radix-combobox-content-transform-origin);
1873
+ animation-duration: var(--animation-fast);
1874
+ animation-timing-function: ease-out;
1875
+ border: 1px solid var(--color-stroke-soft-200);
1876
+ border-radius: var(--radius-16);
1877
+ background-color: var(--color-bg-white-0);
1878
+ box-shadow: var(--shadow-regular-md);
1879
+ gap: var(--spacing-4);
1880
+ }
1881
+ .celeste-dropdown-content[data-state=open][data-v-dc6bae8b],
1882
+ div[data-v-dc6bae8b] .celeste-dropdown-content[data-state=open] {
1883
+ animation-name: slide-up-and-fade-dc6bae8b;
1884
+ }
1885
+ .celeste-dropdown-content[data-state=closed][data-v-dc6bae8b],
1886
+ div[data-v-dc6bae8b] .celeste-dropdown-content[data-state=closed] {
1887
+ animation-name: slide-down-and-fade-dc6bae8b;
1888
+ }
1889
+ div[data-v-dc6bae8b] .celeste-dropdown-items-viewport {
1890
+ display: flex;
1891
+ flex-direction: column;
1892
+ gap: var(--spacing-4);
1893
+ }
1894
+ @keyframes slide-up-and-fade-dc6bae8b {
1895
+ from {
1896
+ transform: translateY(10px);
1897
+ opacity: 0;
1898
+ }
1899
+ to {
1900
+ transform: translateY(0);
1901
+ opacity: 1;
1902
+ }
1903
+ }
1904
+ @keyframes slide-down-and-fade-dc6bae8b {
1905
+ from {
1906
+ transform: translateY(0);
1907
+ opacity: 1;
1908
+ }
1909
+ to {
1910
+ transform: translateY(10px);
1911
+ opacity: 0;
1912
+ }
1913
+ }.celeste-dropdown-separator[data-v-987226c9] {
1914
+ width: 100%;
1915
+ height: 1px;
1916
+ background-color: var(--color-stroke-soft-200);
1917
+ }.celeste-dropdown-anchor-trigger[data-v-1d007d84] {
1918
+ transition-property: background-color, transform, opacity;
1919
+ transition-duration: var(--animation-fast);
1920
+ transition-timing-function: ease-out;
1921
+ display: flex;
1922
+ align-items: center;
1923
+ border: 1px solid var(--color-stroke-soft-200);
1924
+ background-color: var(--color-bg-white-0);
1925
+ box-shadow: var(--shadow-regular-xs);
1926
+ gap: var(--spacing-8);
1927
+ cursor: pointer;
1928
+ }
1929
+ .celeste-dropdown-anchor-trigger[data-v-1d007d84] i {
1930
+ width: 20px;
1931
+ height: 20px;
1932
+ color: var(--color-icon-soft-400);
1933
+ }
1934
+ .celeste-dropdown-anchor-trigger[data-v-1d007d84]:hover {
1935
+ background: var(--color-bg-weak-50);
1936
+ }
1937
+ .celeste-dropdown-anchor-trigger[data-v-1d007d84]:focus, .celeste-dropdown-anchor-trigger[data-v-1d007d84]:focus-visible, .celeste-dropdown-anchor-trigger[data-v-1d007d84]:focus-within {
1938
+ outline: none;
1939
+ box-shadow: var(--shadow-buttons-important-focus);
1940
+ }
1941
+ .celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix[data-v-1d007d84] {
1942
+ display: flex;
1943
+ align-items: center;
1944
+ justify-content: center;
1945
+ }
1946
+ .celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix-selected[data-v-1d007d84] {
1947
+ display: flex;
1948
+ align-items: center;
1949
+ justify-content: center;
1950
+ }
1951
+ .celeste-dropdown-anchor-trigger .celeste-dropdown-input[data-v-1d007d84] {
1952
+ display: flex;
1953
+ flex: 1 0 0;
1954
+ align-items: center;
1955
+ justify-content: space-between;
1956
+ background: inherit;
1957
+ color: var(--color-text-sub-600);
1958
+ font: var(--paragraph-sm);
1959
+ cursor: pointer;
1960
+ gap: var(--spacing-8);
1961
+ }
1962
+ .celeste-dropdown-anchor-trigger .celeste-dropdown-trigger[data-v-1d007d84] {
1963
+ transition-property: background-color, transform, opacity;
1964
+ transition-duration: var(--animation-fast);
1965
+ transition-timing-function: ease-out;
1966
+ display: flex;
1967
+ place-items: center center;
1968
+ border: none;
1969
+ background: none;
1970
+ color: var(--color-icon-soft-400);
1971
+ cursor: pointer;
1972
+ }
1973
+ .celeste-dropdown-anchor-trigger[data-state=open][data-v-1d007d84]:not([data-disabled]) .celeste-dropdown-trigger {
1974
+ transform: rotate(180deg);
1975
+ }
1976
+ .celeste-dropdown-anchor-trigger-error[data-v-1d007d84]:not(.celeste-dropdown-anchor-trigger-type-compact) {
1977
+ border: 1px solid var(--color-state-error-base);
1978
+ }
1979
+ .celeste-dropdown-anchor-trigger[data-disabled][data-v-1d007d84] {
1980
+ background: var(--color-bg-weak-50);
1981
+ color: var(--color-text-disabled-300);
1982
+ cursor: not-allowed;
1983
+ }
1984
+ .celeste-dropdown-anchor-trigger[data-disabled] .celeste-dropdown-input[data-v-1d007d84] {
1985
+ color: var(--color-text-disabled-300);
1986
+ cursor: not-allowed;
1987
+ }
1988
+ .celeste-dropdown-anchor-trigger[data-disabled][data-v-1d007d84] i,
1989
+ .celeste-dropdown-anchor-trigger[data-disabled] .celeste-dropdown-trigger[data-v-1d007d84] {
1990
+ color: var(--color-icon-disabled-300);
1991
+ cursor: not-allowed;
1992
+ }
1993
+ .celeste-dropdown-anchor-trigger[data-state=open][data-v-1d007d84]:not([data-disabled],
1994
+ .celeste-dropdown-anchor-trigger-type-compact,
1995
+ .celeste-dropdown-anchor-trigger-type-compact-input) {
1996
+ border: 1px solid var(--color-stroke-strong-950);
1997
+ box-shadow: var(--shadow-buttons-important-focus);
1998
+ color: var(--color-text-strong-950);
1999
+ }
2000
+ .celeste-dropdown-anchor-trigger[data-state=open]:not([data-disabled],
2001
+ .celeste-dropdown-anchor-trigger-type-compact,
2002
+ .celeste-dropdown-anchor-trigger-type-compact-input) .celeste-dropdown-input[data-v-1d007d84] {
2003
+ color: var(--color-text-strong-950);
2004
+ }
2005
+ .celeste-dropdown-anchor-trigger[data-state=open]:not([data-disabled],
2006
+ .celeste-dropdown-anchor-trigger-type-compact,
2007
+ .celeste-dropdown-anchor-trigger-type-compact-input) i[data-v-1d007d84] {
2008
+ color: var(--color-icon-strong-950);
2009
+ }
2010
+ .celeste-dropdown-anchor-trigger-filled[data-v-1d007d84] {
2011
+ color: var(--color-text-strong-950);
2012
+ }
2013
+ .celeste-dropdown-anchor-trigger-filled[data-v-1d007d84] .celeste-dropdown-input {
2014
+ color: var(--color-text-strong-950);
2015
+ }
2016
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-1d007d84] {
2017
+ width: -moz-fit-content;
2018
+ width: fit-content;
2019
+ border: none;
2020
+ background: transparent;
2021
+ box-shadow: none;
2022
+ }
2023
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-1d007d84] .celeste-dropdown-input {
2024
+ flex: inherit;
2025
+ }
2026
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact:hover:not([data-disabled]) .celeste-dropdown-input[data-v-1d007d84], .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-state=open]:not([data-disabled]) .celeste-dropdown-input[data-v-1d007d84] {
2027
+ color: var(--color-text-strong-950);
2028
+ }
2029
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-1d007d84]:hover:not([data-disabled]) i, .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-state=open][data-v-1d007d84]:not([data-disabled]) i {
2030
+ color: var(--color-icon-strong-950);
2031
+ }
2032
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-1d007d84] {
2033
+ width: -moz-fit-content;
2034
+ width: fit-content;
2035
+ border: none;
2036
+ border-radius: var(--radius-0);
2037
+ box-shadow: none;
2038
+ }
2039
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-1d007d84] .celeste-dropdown-input {
2040
+ flex: inherit;
2041
+ }
2042
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-state=open][data-v-1d007d84] {
2043
+ box-shadow: none;
2044
+ }
2045
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-1d007d84] {
2046
+ width: -moz-fit-content;
2047
+ width: fit-content;
2048
+ gap: var(--spacing-4);
2049
+ }
2050
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-1d007d84] .celeste-dropdown-input {
2051
+ flex: inherit;
2052
+ }
2053
+ .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-normal[data-v-1d007d84] {
2054
+ width: 100%;
2055
+ min-width: 300px;
2056
+ }
2057
+ .celeste-dropdown-anchor-trigger-size-xs[data-v-1d007d84] {
2058
+ height: 32px;
2059
+ padding: var(--spacing-6);
2060
+ border-radius: var(--radius-8);
2061
+ }
2062
+ .celeste-dropdown-anchor-trigger-size-sm[data-v-1d007d84] {
2063
+ height: 36px;
2064
+ padding: var(--spacing-8);
2065
+ border-radius: var(--radius-8);
2066
+ }
2067
+ .celeste-dropdown-anchor-trigger-size-md[data-v-1d007d84] {
2068
+ height: 40px;
2069
+ padding: var(--spacing-10);
2070
+ border-radius: var(--radius-10);
2071
+ }[data-v-424c9dad] {
2072
+ box-sizing: border-box;
2073
+ }
2074
+ .celeste-dropdown-anchor-trigger-prefix[data-v-424c9dad] {
2075
+ display: flex;
2076
+ align-items: center;
2077
+ justify-content: center;
2078
+ }
2079
+ .celeste-dropdown-anchor-trigger-prefix-selected[data-v-424c9dad] {
2080
+ display: flex;
2081
+ align-items: center;
2082
+ justify-content: center;
2083
+ }
2084
+ .celeste-dropdown-item-image[data-v-424c9dad],
2085
+ .selected-dropdown-image[data-v-424c9dad] {
2086
+ display: flex;
2087
+ align-items: center;
2088
+ justify-content: center;
2089
+ width: 20px;
2090
+ height: 20px;
2091
+ -o-object-fit: cover;
2092
+ object-fit: cover;
2093
+ border-radius: var(--radius-full);
2094
+ }
2095
+ .celeste-dropdown-input[data-v-424c9dad] {
2096
+ display: flex;
2097
+ flex: 1 0 0;
2098
+ align-items: center;
2099
+ justify-content: space-between;
2100
+ background: inherit;
2101
+ color: var(--color-text-sub-600);
2102
+ font: var(--paragraph-sm);
2103
+ cursor: pointer;
2104
+ gap: var(--spacing-8);
2105
+ }
2106
+ .celeste-dropdown-trigger[data-v-424c9dad] {
2107
+ display: flex;
2108
+ place-items: center center;
2109
+ transition-property: transform;
2110
+ transition-duration: var(--animation-fast);
2111
+ transition-timing-function: ease-out;
2112
+ border: none;
2113
+ background: none;
2114
+ color: var(--color-icon-soft-400);
2115
+ cursor: pointer;
2116
+ }
2117
+ .celeste-dropdown-inner-input[data-v-424c9dad] {
2118
+ display: flex;
2119
+ position: sticky;
2120
+ z-index: 50;
2121
+ top: 0;
2122
+ flex-direction: column;
2123
+ gap: var(--spacing-4);
2124
+ background-color: var(--color-bg-white-0);
2125
+ }
2126
+ .celeste-dropdown-inner-input.sr-only[data-v-424c9dad] {
2127
+ position: absolute;
2128
+ width: 1px;
2129
+ height: 1px;
2130
+ margin: -1px;
2131
+ padding: 0;
2132
+ overflow: hidden;
2133
+ clip: rect(0, 0, 0, 0);
2134
+ border: 0;
2135
+ white-space: nowrap;
1607
2136
  }.celeste-context-menu-item[data-v-3d94f388] {
1608
2137
  display: flex;
1609
2138
  box-sizing: border-box;
@@ -1843,152 +2372,19 @@ to {
1843
2372
  }
1844
2373
  .celeste-dropdown-item .celeste-dropdown-item-header-lg .celeste-dropdown-item-label[data-v-a0a634ce] {
1845
2374
  font-weight: var(--font-weights-display-0);
1846
- }.celeste-text-input-wrapper[data-v-105e81d6] {
1847
- display: flex;
1848
- box-sizing: border-box;
1849
- align-items: center;
1850
- height: var(--input-height);
1851
- padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
1852
- transition: all var(--animation-fast) ease-out;
1853
- border: 1px solid var(--color-stroke-soft-200);
1854
- border-radius: var(--input-radius);
1855
- outline: 2px solid transparent;
1856
- outline-offset: 2px;
1857
- background-color: var(--color-bg-white-0);
1858
- box-shadow: var(--shadow-regular-xs);
1859
- color: var(--color-text-strong-950);
1860
- font: var(--paragraph-sm);
1861
- gap: var(--input-gap);
1862
- }
1863
- .celeste-text-input-wrapper[size=xs][data-v-105e81d6] {
1864
- --input-gap: 8px;
1865
- --input-height: 32px;
1866
- --input-radius: var(--radius-8);
1867
- --input-padding: calc(var(--spacing-8) - var(--spacing-2));
1868
- }
1869
- .celeste-text-input-wrapper[size=sm][data-v-105e81d6] {
1870
- --input-gap: 6px;
1871
- --input-height: 36px;
1872
- --input-radius: var(--radius-8);
1873
- --input-padding: var(--spacing-8);
1874
- }
1875
- .celeste-text-input-wrapper[size=md][data-v-105e81d6] {
1876
- --input-gap: 6px;
1877
- --input-height: 40px;
1878
- --input-radius: var(--radius-10);
1879
- --input-padding: var(--spacing-10);
1880
- }
1881
- .celeste-text-input-wrapper[has-error=true][data-v-105e81d6] {
1882
- border-color: var(--color-state-error-base);
1883
- }
1884
- .celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6] {
1885
- width: 100%;
1886
- height: 100%;
1887
- padding: 0;
1888
- border: none;
1889
- outline: none;
1890
- background-color: transparent;
1891
- color: inherit;
1892
- font: inherit;
1893
- }
1894
- .celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
1895
- -moz-transition: color var(--animation-fast) ease-out;
1896
- transition: color var(--animation-fast) ease-out;
1897
- color: var(--color-text-soft-400);
1898
- }
1899
- .celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::placeholder {
1900
- transition: color var(--animation-fast) ease-out;
1901
- color: var(--color-text-soft-400);
1902
- }
1903
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:focus) {
1904
- border-color: var(--color-stroke-strong-950);
1905
- outline-color: var(--color-stroke-soft-200);
1906
- }
1907
- .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-105e81d6] {
1908
- border-color: var(--color-state-error-base);
1909
- outline-color: var(--color-state-error-lighter);
1910
- }
1911
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) {
1912
- border-color: transparent;
1913
- background-color: var(--color-bg-weak-50);
1914
- box-shadow: none;
1915
- color: var(--color-text-disabled-300);
1916
- pointer-events: none;
1917
- }
1918
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
1919
- color: currentcolor;
1920
- }
1921
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::placeholder {
1922
- color: currentcolor;
1923
- }
1924
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
1925
- color: var(--color-icon-disabled-300);
1926
- }
1927
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-button {
1928
- background-color: var(--color-bg-weak-50) !important;
1929
- color: var(--color-text-disabled-300);
1930
- }
1931
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
1932
- gap: var(--spacing-0);
1933
- padding-inline-end: var(--spacing-0);
1934
- }
1935
- .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-button[inline=false], .celeste-text-input-affix[variant=suffix]) .celeste-text-input[data-v-105e81d6] {
1936
- padding-inline-end: var(--input-padding);
1937
- border-inline-end: 1px solid var(--color-stroke-soft-200);
1938
- }
1939
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) {
1940
- padding-inline: var(--spacing-0) var(--input-padding);
1941
- }
1942
- .celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) .celeste-text-input[data-v-105e81d6] {
1943
- padding-inline-start: var(--input-padding);
1944
- border-inline-start: 1px solid var(--color-stroke-soft-200);
1945
- }
1946
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=start] {
1947
- margin-inline-end: var(--input-gap);
1948
- }
1949
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=end] {
1950
- margin-inline-start: var(--input-gap);
1951
- }
1952
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
1953
- /* stylelint-disable-next-line no-descending-specificity */
1954
- }
1955
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
1956
- border-color: transparent;
1957
- background-color: var(--color-bg-weak-50);
1958
- }
1959
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
1960
- background-color: var(--color-bg-weak-50);
1961
- }
1962
- .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
1963
- color: var(--color-text-sub-600);
1964
- }
1965
- .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-105e81d6]::placeholder {
1966
- color: var(--color-text-sub-600);
1967
- }
1968
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
1969
- /* stylelint-disable-next-line no-descending-specificity */
1970
- }
1971
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
1972
- /* stylelint-disable-next-line no-descending-specificity */
1973
- }
1974
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
1975
- color: var(--color-text-soft-400);
1976
- }
1977
- .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
1978
- color: var(--color-text-soft-400);
1979
- }[data-v-2cc18da8] {
2375
+ }[data-v-dd43a899] {
1980
2376
  box-sizing: border-box;
1981
2377
  }
1982
- .celeste-dropdown-wrapper[data-v-2cc18da8] {
2378
+ .celeste-dropdown-wrapper[data-v-dd43a899] {
1983
2379
  --dropdown-width: 100%;
1984
2380
  --dropdown-height: 300px;
1985
2381
  position: relative;
1986
2382
  }
1987
- .celeste-dropdown-wrapper[data-v-2cc18da8]:focus, .celeste-dropdown-wrapper[data-v-2cc18da8]:focus-visible, .celeste-dropdown-wrapper[data-v-2cc18da8]:focus-within {
2383
+ .celeste-dropdown-wrapper[data-v-dd43a899]:focus, .celeste-dropdown-wrapper[data-v-dd43a899]:focus-visible, .celeste-dropdown-wrapper[data-v-dd43a899]:focus-within {
1988
2384
  border: none;
1989
2385
  outline: none;
1990
2386
  }
1991
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-dropdown-root {
2387
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-dropdown-root {
1992
2388
  display: flex;
1993
2389
  position: relative;
1994
2390
  flex-direction: column;
@@ -1997,7 +2393,7 @@ to {
1997
2393
  padding-top: var(--spacing-4);
1998
2394
  gap: var(--spacing-10);
1999
2395
  }
2000
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-2cc18da8] {
2396
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-dd43a899] {
2001
2397
  transition-property: background-color, transform, opacity;
2002
2398
  transition-duration: var(--animation-fast);
2003
2399
  transition-timing-function: ease-out;
@@ -2009,25 +2405,25 @@ to {
2009
2405
  gap: var(--spacing-8);
2010
2406
  cursor: pointer;
2011
2407
  }
2012
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-2cc18da8] i {
2408
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-dd43a899] i {
2013
2409
  width: 20px;
2014
2410
  height: 20px;
2015
2411
  color: var(--color-icon-soft-400);
2016
2412
  }
2017
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-2cc18da8]:focus, .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-2cc18da8]:focus-visible, .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-2cc18da8]:focus-within {
2413
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-dd43a899]:focus, .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-dd43a899]:focus-visible, .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-dd43a899]:focus-within {
2018
2414
  outline: none;
2019
2415
  }
2020
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix[data-v-2cc18da8] {
2416
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix[data-v-dd43a899] {
2021
2417
  display: flex;
2022
2418
  align-items: center;
2023
2419
  justify-content: center;
2024
2420
  }
2025
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix-selected[data-v-2cc18da8] {
2421
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix-selected[data-v-dd43a899] {
2026
2422
  display: flex;
2027
2423
  align-items: center;
2028
2424
  justify-content: center;
2029
2425
  }
2030
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-input[data-v-2cc18da8] {
2426
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-input[data-v-dd43a899] {
2031
2427
  display: flex;
2032
2428
  flex: 1 0 0;
2033
2429
  align-items: center;
@@ -2038,7 +2434,7 @@ to {
2038
2434
  cursor: pointer;
2039
2435
  gap: var(--spacing-8);
2040
2436
  }
2041
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-trigger[data-v-2cc18da8] {
2437
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger .celeste-dropdown-trigger[data-v-dd43a899] {
2042
2438
  transition-property: background-color, transform, opacity;
2043
2439
  transition-duration: var(--animation-fast);
2044
2440
  transition-timing-function: ease-out;
@@ -2049,107 +2445,105 @@ to {
2049
2445
  color: var(--color-icon-soft-400);
2050
2446
  cursor: pointer;
2051
2447
  }
2052
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-state=open][data-v-2cc18da8]:not([data-disabled]) .celeste-dropdown-trigger {
2448
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-state=open][data-v-dd43a899]:not([data-disabled]) .celeste-dropdown-trigger {
2053
2449
  transform: rotate(180deg);
2054
2450
  }
2055
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-2cc18da8]:hover {
2451
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger[data-v-dd43a899]:hover {
2056
2452
  background: var(--color-bg-weak-50);
2057
2453
  }
2058
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-error[data-v-2cc18da8]:not(.celeste-dropdown-anchor-trigger-type-compact) {
2454
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-error[data-v-dd43a899]:not(.celeste-dropdown-anchor-trigger-type-compact) {
2059
2455
  border: 1px solid var(--color-state-error-base);
2060
2456
  }
2061
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled[data-v-2cc18da8] {
2457
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled[data-v-dd43a899] {
2062
2458
  background: var(--color-bg-weak-50);
2063
2459
  color: var(--color-text-disabled-300);
2064
2460
  cursor: not-allowed;
2065
2461
  }
2066
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled .celeste-dropdown-input[data-v-2cc18da8] {
2462
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled .celeste-dropdown-input[data-v-dd43a899] {
2067
2463
  color: var(--color-text-disabled-300);
2068
2464
  cursor: not-allowed;
2069
2465
  }
2070
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled[data-v-2cc18da8] i,
2071
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled .celeste-dropdown-trigger[data-v-2cc18da8] {
2466
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled[data-v-dd43a899] i,
2467
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-disabled .celeste-dropdown-trigger[data-v-dd43a899] {
2072
2468
  color: var(--color-icon-disabled-300);
2073
2469
  cursor: not-allowed;
2074
2470
  }
2075
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-focused[data-v-2cc18da8]:not(.celeste-dropdown-anchor-trigger-disabled, .celeste-dropdown-anchor-trigger-type-compact) {
2471
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-focused[data-v-dd43a899]:not(.celeste-dropdown-anchor-trigger-disabled, .celeste-dropdown-anchor-trigger-type-compact) {
2076
2472
  border: 1px solid var(--color-stroke-strong-950);
2077
2473
  box-shadow: var(--shadow-buttons-important-focus);
2078
2474
  color: var(--color-text-strong-950);
2079
2475
  }
2080
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-focused:not(.celeste-dropdown-anchor-trigger-disabled, .celeste-dropdown-anchor-trigger-type-compact) .celeste-dropdown-input[data-v-2cc18da8] {
2476
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-focused:not(.celeste-dropdown-anchor-trigger-disabled, .celeste-dropdown-anchor-trigger-type-compact) .celeste-dropdown-input[data-v-dd43a899] {
2081
2477
  color: var(--color-text-strong-950);
2082
2478
  }
2083
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-focused:not(.celeste-dropdown-anchor-trigger-disabled, .celeste-dropdown-anchor-trigger-type-compact) i[data-v-2cc18da8] {
2479
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-focused:not(.celeste-dropdown-anchor-trigger-disabled, .celeste-dropdown-anchor-trigger-type-compact) i[data-v-dd43a899] {
2084
2480
  color: var(--color-icon-strong-950);
2085
2481
  }
2086
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-filled[data-v-2cc18da8] {
2482
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-filled[data-v-dd43a899] {
2087
2483
  color: var(--color-text-strong-950);
2088
2484
  }
2089
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-2cc18da8] {
2485
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-dd43a899] {
2090
2486
  width: -moz-fit-content;
2091
2487
  width: fit-content;
2092
2488
  border: none;
2093
2489
  background: transparent;
2094
2490
  box-shadow: none;
2095
2491
  }
2096
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-2cc18da8] .celeste-dropdown-input {
2492
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-dd43a899] .celeste-dropdown-input {
2097
2493
  flex: inherit;
2098
2494
  }
2099
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact:hover:not(.celeste-dropdown-anchor-trigger-disabled) .celeste-dropdown-input[data-v-2cc18da8], .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact.celeste-dropdown-anchor-trigger-focused:not(.celeste-dropdown-anchor-trigger-disabled) .celeste-dropdown-input[data-v-2cc18da8] {
2495
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact:hover:not(.celeste-dropdown-anchor-trigger-disabled) .celeste-dropdown-input[data-v-dd43a899], .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact.celeste-dropdown-anchor-trigger-focused:not(.celeste-dropdown-anchor-trigger-disabled) .celeste-dropdown-input[data-v-dd43a899] {
2100
2496
  color: var(--color-text-strong-950);
2101
2497
  }
2102
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-2cc18da8]:hover:not(.celeste-dropdown-anchor-trigger-disabled) i, .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact.celeste-dropdown-anchor-trigger-focused[data-v-2cc18da8]:not(.celeste-dropdown-anchor-trigger-disabled) i {
2498
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-dd43a899]:hover:not(.celeste-dropdown-anchor-trigger-disabled) i, .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact.celeste-dropdown-anchor-trigger-focused[data-v-dd43a899]:not(.celeste-dropdown-anchor-trigger-disabled) i {
2103
2499
  color: var(--color-icon-strong-950);
2104
2500
  }
2105
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-2cc18da8] {
2501
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-dd43a899] {
2106
2502
  width: -moz-fit-content;
2107
2503
  width: fit-content;
2108
2504
  border: none;
2109
2505
  border-radius: var(--radius-0);
2110
2506
  box-shadow: none;
2111
2507
  }
2112
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-2cc18da8] .celeste-dropdown-input {
2508
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-dd43a899] .celeste-dropdown-input {
2113
2509
  flex: inherit;
2114
2510
  }
2115
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input.celeste-dropdown-anchor-trigger-focused[data-v-2cc18da8] {
2511
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input.celeste-dropdown-anchor-trigger-focused[data-v-dd43a899] {
2116
2512
  box-shadow: none;
2117
2513
  }
2118
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-2cc18da8] {
2514
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-dd43a899] {
2119
2515
  width: -moz-fit-content;
2120
2516
  width: fit-content;
2121
2517
  gap: var(--spacing-4);
2122
2518
  }
2123
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-2cc18da8] .celeste-dropdown-input {
2519
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-dd43a899] .celeste-dropdown-input {
2124
2520
  flex: inherit;
2125
2521
  }
2126
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-normal[data-v-2cc18da8] {
2522
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-normal[data-v-dd43a899] {
2127
2523
  min-width: 300px;
2128
2524
  }
2129
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-size-xs[data-v-2cc18da8] {
2525
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-size-xs[data-v-dd43a899] {
2130
2526
  height: 32px;
2131
2527
  padding: var(--spacing-6);
2132
2528
  border-radius: var(--radius-8);
2133
2529
  }
2134
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-size-sm[data-v-2cc18da8] {
2530
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-size-sm[data-v-dd43a899] {
2135
2531
  height: 36px;
2136
2532
  padding: var(--spacing-8);
2137
2533
  border-radius: var(--radius-8);
2138
2534
  }
2139
- .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-size-md[data-v-2cc18da8] {
2535
+ .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger-size-md[data-v-dd43a899] {
2140
2536
  height: 40px;
2141
2537
  padding: var(--spacing-10);
2142
2538
  border-radius: var(--radius-10);
2143
2539
  }
2144
- .celeste-dropdown-wrapper .celeste-dropdown-content[data-v-2cc18da8] {
2540
+ .celeste-dropdown-wrapper .celeste-dropdown-content[data-v-dd43a899] {
2145
2541
  transition-property: background-color, transform, opacity;
2146
2542
  transition-duration: var(--animation-fast);
2147
2543
  transition-timing-function: ease-out;
2148
2544
  display: flex;
2149
2545
  position: absolute;
2150
2546
  z-index: 9999;
2151
- top: calc(var(--dropdown-width) + var(--spacing-4));
2152
- left: 0;
2153
2547
  flex-direction: column;
2154
2548
  width: var(--dropdown-width);
2155
2549
  min-width: 300px;
@@ -2163,16 +2557,32 @@ to {
2163
2557
  box-shadow: var(--shadow-regular-md);
2164
2558
  gap: var(--spacing-4);
2165
2559
  }
2166
- .celeste-dropdown-wrapper .celeste-dropdown-content[data-state=closed][data-v-2cc18da8] {
2560
+ .celeste-dropdown-wrapper .celeste-dropdown-content[data-state=closed][data-v-dd43a899] {
2167
2561
  transform: translateY(10px);
2168
2562
  opacity: 0;
2169
2563
  pointer-events: none;
2170
2564
  }
2171
- .celeste-dropdown-wrapper .celeste-dropdown-content[data-state=open][data-v-2cc18da8] {
2565
+ .celeste-dropdown-wrapper .celeste-dropdown-content[data-state=open][data-v-dd43a899] {
2172
2566
  transform: translateY(0);
2173
2567
  opacity: 1;
2174
2568
  }
2175
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-input-wrapper .celeste-input-prefix {
2569
+ .celeste-dropdown-wrapper .celeste-dropdown-content-size-top[data-v-dd43a899] {
2570
+ bottom: calc(var(--dropdown-width) + var(--spacing-4));
2571
+ }
2572
+ .celeste-dropdown-wrapper .celeste-dropdown-content-size-bottom[data-v-dd43a899] {
2573
+ top: calc(var(--dropdown-width) + var(--spacing-4));
2574
+ }
2575
+ .celeste-dropdown-wrapper .celeste-dropdown-content-align-start[data-v-dd43a899] {
2576
+ left: 0;
2577
+ }
2578
+ .celeste-dropdown-wrapper .celeste-dropdown-content-align-end[data-v-dd43a899] {
2579
+ right: 0;
2580
+ }
2581
+ .celeste-dropdown-wrapper :not(:has(.celeste-dropdown-anchor-trigger-type-normal)) .celeste-dropdown-content-align-center[data-v-dd43a899] {
2582
+ left: 50%;
2583
+ transform: translateX(-50%);
2584
+ }
2585
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-input-wrapper .celeste-input-prefix {
2176
2586
  width: 20px;
2177
2587
  height: 20px;
2178
2588
  display: flex;
@@ -2182,64 +2592,64 @@ to {
2182
2592
  background: none;
2183
2593
  color: var(--color-icon-sub-600);
2184
2594
  }
2185
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-input-wrapper {
2595
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-input-wrapper {
2186
2596
  border: none;
2187
2597
  border-radius: 0;
2188
2598
  box-shadow: none;
2189
2599
  }
2190
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-input-wrapper:focus-within {
2600
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-input-wrapper:focus-within {
2191
2601
  border: none;
2192
2602
  box-shadow: none;
2193
2603
  }
2194
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-dropdown-items-viewport {
2604
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-dropdown-items-viewport {
2195
2605
  display: flex;
2196
2606
  position: relative;
2197
2607
  flex-direction: column;
2198
2608
  gap: var(--spacing-4);
2199
2609
  }
2200
- .celeste-dropdown-wrapper .celeste-dropdown-empty-list[data-v-2cc18da8] {
2610
+ .celeste-dropdown-wrapper .celeste-dropdown-empty-list[data-v-dd43a899] {
2201
2611
  display: flex;
2202
2612
  align-items: center;
2203
2613
  padding: var(--spacing-8);
2204
2614
  color: var(--color-text-sub-600);
2205
2615
  font: var(--paragraph-sm);
2206
2616
  }
2207
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-input-wrapper .celeste-input-suffix {
2617
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-input-wrapper .celeste-input-suffix {
2208
2618
  cursor: pointer;
2209
2619
  }
2210
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-input-wrapper .celeste-input-suffix div {
2620
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-input-wrapper .celeste-input-suffix div {
2211
2621
  display: flex;
2212
2622
  align-items: center;
2213
2623
  justify-content: center;
2214
2624
  }
2215
- .celeste-dropdown-wrapper[data-v-2cc18da8] .celeste-input-wrapper .celeste-input-suffix:deep(i) {
2625
+ .celeste-dropdown-wrapper[data-v-dd43a899] .celeste-input-wrapper .celeste-input-suffix:deep(i) {
2216
2626
  width: 20px;
2217
2627
  height: 20px;
2218
2628
  color: var(--color-icon-soft-400);
2219
2629
  }
2220
- .celeste-dropdown-wrapper .celeste-dropdown-search[data-v-2cc18da8] {
2630
+ .celeste-dropdown-wrapper .celeste-dropdown-search[data-v-dd43a899] {
2221
2631
  display: flex;
2222
2632
  position: sticky;
2223
2633
  top: 0;
2224
2634
  flex-direction: column;
2225
2635
  gap: var(--spacing-4);
2226
2636
  }
2227
- .celeste-dropdown-wrapper .celeste-dropdown-search[data-v-2cc18da8] .celeste-input-wrapper-type-search {
2637
+ .celeste-dropdown-wrapper .celeste-dropdown-search[data-v-dd43a899] .celeste-input-wrapper-type-search {
2228
2638
  border-top-left-radius: var(--radius-8);
2229
2639
  border-top-right-radius: var(--radius-8);
2230
2640
  }
2231
- .celeste-dropdown-wrapper .celeste-dropdown-separator[data-v-2cc18da8] {
2641
+ .celeste-dropdown-wrapper .celeste-dropdown-separator[data-v-dd43a899] {
2232
2642
  width: 100%;
2233
2643
  height: 1px;
2234
2644
  background-color: var(--color-stroke-soft-200);
2235
2645
  }
2236
- .celeste-dropdown-wrapper .celeste-dropdown-items-group[data-v-2cc18da8] {
2646
+ .celeste-dropdown-wrapper .celeste-dropdown-items-group[data-v-dd43a899] {
2237
2647
  display: flex;
2238
2648
  flex-direction: column;
2239
2649
  gap: var(--spacing-4);
2240
2650
  }
2241
- .celeste-dropdown-wrapper .celeste-dropdown-item-image[data-v-2cc18da8],
2242
- .celeste-dropdown-wrapper .selected-dropdown-image[data-v-2cc18da8] {
2651
+ .celeste-dropdown-wrapper .celeste-dropdown-item-image[data-v-dd43a899],
2652
+ .celeste-dropdown-wrapper .selected-dropdown-image[data-v-dd43a899] {
2243
2653
  width: 20px;
2244
2654
  height: 20px;
2245
2655
  display: flex;
@@ -3257,17 +3667,6 @@ to {
3257
3667
  }
3258
3668
  .celeste-text-input-button[inline=true][data-v-82489224]:hover {
3259
3669
  background-color: transparent !important;
3260
- }.celeste-text-input-icon[data-v-3b859b72] {
3261
- display: flex;
3262
- align-items: center;
3263
- color: var(--color-text-sub-600);
3264
- }
3265
- .celeste-text-input-icon[position=start][data-v-3b859b72] {
3266
- order: -1;
3267
- }
3268
- .celeste-text-input-icon > i[data-v-3b859b72] {
3269
- width: 20px;
3270
- height: 20px;
3271
3670
  }.celeste-textarea-wrapper[data-v-76864cee] {
3272
3671
  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
3273
3672
  transition-duration: var(--animation-fast);