@typlog/ui 0.12.2 → 0.13.0

package/index.css

@@ -0,0 +1,2 @@
+@import "./base.css";
+@import "./components.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typlog/ui",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "license": "MIT",
   "type": "module",
   "description": "Themed components for Reka UI with Radix colors.",
@@ -14,21 +14,22 @@
   "exports": {
     ".": {
       "types": "./components.d.ts",
+      "style": "./index.css",
       "import": "./components.js"
     },
     "./components": {
       "types": "./components.d.ts",
+      "style": "./components.css",
       "import": "./components.js"
     },
     "./addons": {
       "types": "./addons.d.ts",
+      "style": "./addons.css",
       "import": "./addons.js"
     },
     "./base.css": "./base.css",
     "./components.css": "./components.css",
-    "./addons.css": "./addons.css",
-    "./tailwind.css": "./tailwind.css",
-    "./components/": "./components/"
+    "./tailwind.css": "./tailwind.css"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",

package/components/badge.css

@@ -1,86 +0,0 @@
-
-.ui-Badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  font-weight: var(--font-weight-medium);
-  font-style: normal;
-  flex-shrink: 0;
-  line-height: 1;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.ui-Badge:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
-  gap: calc(var(--space-1) * 1.5);
-  border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-Badge:where(.r-size-1):where([data-radius="full"]) {
-  padding: calc(var(--space-1) * 0.5) var(--space-2);
-}
-.ui-Badge:where(.r-size-2) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  padding: var(--space-1) var(--space-2);
-  gap: calc(var(--space-1) * 1.5);
-  border-radius: max(var(--radius-2), var(--radius-full));
-}
-.ui-Badge:where(.r-size-2):where([data-radius="full"]) {
-  padding: var(--space-1) calc(var(--space-2) * 1.25);
-}
-.ui-Badge:where(.r-size-3) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  padding: var(--space-1) calc(var(--space-2) * 1.25);
-  gap: var(--space-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
-}
-.ui-Badge:where(.r-size-3):where([data-radius="full"]) {
-  padding: var(--space-1) calc(var(--space-2) * 1.5);
-}
-.ui-Badge:where(.r-variant-solid) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-.ui-Badge:where(.r-variant-solid):where(.r-high-contrast) {
-  background-color: var(--accent-12);
-  color: var(--gray-1);
-}
-.ui-Badge:where(.r-variant-solid)::-moz-selection {
-  background-color: var(--accent-7);
-  color: var(--accent-12);
-}
-.ui-Badge:where(.r-variant-solid)::selection {
-  background-color: var(--accent-7);
-  color: var(--accent-12);
-}
-.ui-Badge:where(.r-variant-soft) {
-  background-color: var(--accent-a3);
-  color: var(--accent-a11);
-}
-.ui-Badge:where(.r-variant-soft):where(.r-high-contrast) {
-  color: var(--accent-12);
-}
-.ui-Badge:where(.r-variant-surface) {
-  background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-  color: var(--accent-a11);
-}
-.ui-Badge:where(.r-variant-surface):where(.r-high-contrast) {
-  color: var(--accent-12);
-}
-.ui-Badge:where(.r-variant-outline) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-  color: var(--accent-a11);
-}
-.ui-Badge:where(.r-variant-outline):where(.r-high-contrast) {
-  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
-  color: var(--accent-12);
-}

package/components/card.css

@@ -1,31 +0,0 @@
-
-.ui-Card:where(.r-size-1) {
-  --card-padding: var(--space-3);
-  --card-border-radius: max(var(--radius-4), var(--radius-full));
-}
-.ui-Card:where(.r-size-2) {
-  --card-padding: var(--space-4);
-  --card-border-radius: max(var(--radius-4), var(--radius-full));
-}
-.ui-Card:where(.r-size-3) {
-  --card-padding: var(--space-5);
-  --card-border-radius: max(var(--radius-5), var(--radius-full));
-}
-.ui-Card:where(.r-size-4) {
-  --card-padding: var(--space-6);
-  --card-border-radius: max(var(--radius-5), var(--radius-full));
-}
-.ui-Card:where(.r-size-5) {
-  --card-padding: var(--space-8);
-  --card-border-radius: max(var(--radius-6), var(--radius-full));
-}
-.ui-Card:where(.r-variant-soft) {
-  border-color: var(--gray-2);
-  background-color: var(--gray-2);
-}
-.ui-Card:where(.r-variant-soft):where(:-moz-any-link, button, label):where(:hover) {
-  border-color: var(--gray-a5);
-}
-.ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
-  border-color: var(--gray-a5);
-}

package/components/checkbox.css

@@ -1,90 +0,0 @@
-
-.ui-Checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  cursor: default;
-  height: var(--checkbox-size);
-  border-radius: var(--checkbox-border-radius);
-}
-.ui-Checkbox::before {
-  content: '';
-  display: block;
-  height: var(--checkbox-size);
-  width: var(--checkbox-size);
-  border-radius: var(--checkbox-border-radius);
-}
-.ui-Checkbox:where(:focus-visible)::before {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Checkbox:where(:disabled) {
-  cursor: not-allowed;
-}
-.ui-Checkbox:where(:disabled)::before {
-  background-color: var(--gray-a3);
-}
-.ui-CheckboxIndicator {
-  position: absolute;
-  width: var(--checkbox-indicator-size);
-  height: var(--checkbox-indicator-size);
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-}
-.ui-Checkbox:where(.r-size-1) {
-  --checkbox-size: calc(var(--space-4) * 0.875);
-  --checkbox-indicator-size: calc(9px * var(--scaling));
-  --checkbox-border-radius: calc(var(--radius-1) * 0.875);
-}
-.ui-Checkbox:where(.r-size-2) {
-  --checkbox-size: var(--space-4);
-  --checkbox-indicator-size: calc(10px * var(--scaling));
-  --checkbox-border-radius: var(--radius-1);
-}
-.ui-Checkbox:where(.r-size-3) {
-  --checkbox-size: calc(var(--space-4) * 1.25);
-  --checkbox-indicator-size: calc(12px * var(--scaling));
-  --checkbox-border-radius: calc(var(--radius-1) * 1.25);
-}
-.ui-Checkbox:where(.r-variant-surface):where([data-state='unchecked'])::before {
-  background-color: var(--color-surface);
-  box-shadow: inset 0 0 0 1px var(--gray-a7);
-}
-.ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate'])::before {
-  background-color: var(--accent-indicator);
-}
-.ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
-  color: var(--accent-contrast);
-}
-.ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate'])::before {
-  background-color: var(--accent-12);
-}
-.ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
-  color: var(--accent-1);
-}
-.ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate'])::before {
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-  background-color: transparent;
-}
-.ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
-  color: var(--gray-a8);
-}
-.ui-Checkbox:where(.r-variant-soft)::before {
-  background-color: var(--accent-a5);
-}
-.ui-Checkbox:where(.r-variant-soft):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
-  color: var(--accent-a11);
-}
-.ui-Checkbox:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
-  color: var(--accent-12);
-}
-.ui-Checkbox:where(.r-variant-soft):disabled::before {
-  background-color: var(--gray-a3);
-}
-.ui-Checkbox:where(.r-variant-soft):disabled .ui-CheckboxIndicator {
-  color: var(--gray-a8);
-}

package/components/dialog.css

@@ -1,159 +0,0 @@
-
-.ui-DialogTitle {
-  font-size: var(--font-size-4);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-4);
-}
-
-.ui-DialogDescription {
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-2);
-  color: var(--gray-11);
-}
-.ui-DialogTitle + .ui-DialogDescription {
-  margin-top: var(--space-2);
-}
-.ui-DialogOverlay {
-  position: fixed;
-  inset: 0;
-}
-.ui-DialogOverlay::before {
-  position: fixed;
-  content: '';
-  inset: 0;
-  background-color: var(--color-overlay);
-}
-.ui-DialogWrapper {
-  display: flex;
-  overflow: hidden;
-  position: absolute;
-  inset: 0;
-}
-.ui-DialogContainer {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  box-sizing: border-box;
-  padding-top: var(--space-6);
-}
-@layer components {
-.ui-DialogPopup {
-    width: 100%;
-    max-height: calc(100vh - var(--space-6) * 2);
-    position: relative;
-    box-sizing: border-box;
-    overflow: auto;
-    text-align: left;
-    box-sizing: border-box;
-    background-color: var(--color-panel-solid);
-    outline: none;
-    border-top-left-radius: var(--dialog-popup-radius);
-    border-top-right-radius: var(--dialog-popup-radius);
-    max-width: var(--dialog-popup-max-width);
-    max-height: var(--dialog-popup-max-height);
-    padding: var(--dialog-popup-padding);
-}
-:where(.ui-DialogPopup) .ui-CloseButton {
-    position: absolute;
-    top: calc(var(--dialog-popup-padding) / 2);
-    right: calc(var(--dialog-popup-padding) / 2);
-}
-}
-.ui-DialogPopup:where(.r-size-1) {
-  --dialog-popup-padding: var(--space-4);
-  --dialog-popup-radius: var(--radius-4);
-  --dialog-popup-max-width: 450px;
-  --dialog-popup-max-height: calc(100vh - 100px);
-}
-.ui-DialogPopup:where(.r-size-2) {
-  --dialog-popup-padding: var(--space-4);
-  --dialog-popup-radius: var(--radius-4);
-  --dialog-popup-max-width: 600px;
-  --dialog-popup-max-height: calc(100vh - 100px);
-}
-.ui-DialogPopup:where(.r-size-3) {
-  --dialog-popup-padding: var(--space-5);
-  --dialog-popup-radius: var(--radius-5);
-  --dialog-popup-max-width: 860px;
-  --dialog-popup-max-height: calc(100vh - 100px);
-}
-.ui-DialogPopup:where(.r-size-4) {
-  --dialog-popup-padding: var(--space-5);
-  --dialog-popup-radius: var(--radius-5);
-  --dialog-popup-max-width: 1200px;
-  --dialog-popup-max-height: calc(100vh - 100px);
-}
-.ui-DialogPopup:where(.r-size-5) {
-  --dialog-popup-padding: var(--space-6);
-  --dialog-popup-radius: var(--radius-5);
-  --dialog-popup-max-width: none;
-  --dialog-popup-max-height: calc(100vh - 64px);
-}
-@media (min-width: 450px) {
-.ui-DialogContainer {
-    justify-content: center;
-    padding-bottom: max(var(--space-6), 6vh);
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-}
-@layer components {
-.ui-DialogPopup {
-      box-shadow: var(--shadow-6);
-      border-bottom-left-radius: var(--dialog-popup-radius);
-      border-bottom-right-radius: var(--dialog-popup-radius);
-}
-}
-}
-@media (prefers-reduced-motion: no-preference) {
-@keyframes ui-dialog-overlay-no-op {
-from {
-      opacity: 1;
-}
-to {
-      opacity: 1;
-}
-}
-@keyframes ui-dialog-content-show {
-from {
-      opacity: 0.1;
-      transform: translate3d(0, var(--space-6), 0);
-}
-to {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-}
-}
-@keyframes ui-dialog-content-hide {
-from {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-}
-to {
-      opacity: 1;
-      transform: translate3d(0, var(--space-5), 0);
-}
-}
-.ui-DialogOverlay[data-state='closed'] {
-    animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-DialogOverlay[data-state='open']::before {
-    animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-DialogOverlay[data-state='closed']::before {
-    animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-DialogPopup:where([data-state="open"]) {
-    animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-DialogPopup:where([data-state="closed"]) {
-    animation: ui-dialog-content-hide 100ms linear;
-}
-}
-
-.ui-AlertPopup {
-  --dialog-popup-radius: var(--radius-4);
-  --dialog-popup-max-width: 450px;
-}

package/components/dropdown.css

@@ -1,255 +0,0 @@
-
-.ui-root {
-  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
-}
-.ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-.ui-ScrollAreaViewport {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  outline: 2px solid var(--focus-8);
-  outline-offset: -2px;
-}
-.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
-  overscroll-behavior-x: contain;
-}
-.ui-ScrollAreaScrollbar {
-  display: flex;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  touch-action: none;
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
-  flex-direction: column;
-  width: var(--scrollarea-scrollbar-size);
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
-  flex-direction: row;
-  height: var(--scrollarea-scrollbar-size);
-}
-.ui-ScrollAreaThumb {
-  position: relative;
-}
-.ui-ScrollAreaThumb::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  min-width: var(--space-4);
-  min-height: var(--space-4);
-}
-.ui-ScrollAreaScrollbar:where([data-size="1"]) {
-  --scrollarea-scrollbar-size: var(--space-1);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar:where([data-size="2"]) {
-  --scrollarea-scrollbar-size: var(--space-2);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar:where([data-size="3"]) {
-  --scrollarea-scrollbar-size: var(--space-3);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar {
-  background-color: var(--gray-a3);
-  border-radius: var(--scrollarea-scrollbar-border-radius);
-  animation-duration: 120ms;
-  animation-timing-function: ease-out;
-}
-.ui-ScrollAreaScrollbar:where([data-state='visible']) {
-  animation-name: ui-fade-in;
-}
-.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
-  animation-name: ui-fade-out;
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
-  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
-  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
-  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
-  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
-  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
-  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
-  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
-  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
-}
-.ui-ScrollAreaThumb {
-  background-color: var(--gray-a8);
-  border-radius: inherit;
-  transition: background-color 100ms;
-}
-.ui-ScrollAreaThumb:hover {
-  background-color: var(--gray-a9);
-}
-@media (prefers-reduced-motion: no-preference) {
-.ui-PopperContent {
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-PopperContent:where([data-state='open']) {
-    animation-duration: 160ms;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='closed']) {
-    animation-duration: 100ms;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-out;
-}
-}
-
-.ui-MenuContent {
-  --scrollarea-scrollbar-vertical-margin-top: var(--menu-content-padding);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--menu-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--menu-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--menu-content-padding);
-
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow: hidden;
-  border-radius: var(--menu-content-border-radius);
-  box-shadow: var(--shadow-5);
-  background-color: var(--color-panel-solid);
-}
-.ui-MenuViewport {
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: var(--menu-content-padding);
-  box-sizing: border-box;
-}
-:where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
-  padding-right: var(--space-3);
-}
-.ui-MenuContent:where(.r-size-1) {
-  --menu-content-padding: var(--space-1);
-  --menu-content-border-radius: var(--radius-3);
-
-  --menu-item-padding-left: calc(var(--space-5) / 1.2);
-  --menu-item-padding-right: var(--space-2);
-  --menu-item-height: var(--space-5);
-  --menu-item-font-size: var(--font-size-1);
-  --menu-item-line-height: var(--line-height-1);
-  --menu-item-letter-spacing: var(--letter-spacing-1);
-  --menu-item-border-radius: var(--radius-1);
-}
-.ui-MenuContent:where(.r-size-2) {
-  --menu-content-padding: var(--space-2);
-  --menu-content-border-radius: var(--radius-4);
-
-  --menu-item-padding-left: var(--space-3);
-  --menu-item-padding-right: var(--space-3);
-  --menu-item-height: var(--space-6);
-  --menu-item-font-size: var(--font-size-2);
-  --menu-item-line-height: var(--line-height-2);
-  --menu-item-letter-spacing: var(--letter-spacing-2);
-  --menu-item-border-radius: var(--radius-2);
-}
-.ui-MenuContent:where(.r-variant-solid) {
-  --menu-item-highlighted-background-color: var(--accent-9);
-  --menu-item-highlighted-text-color: var(--accent-contrast);
-}
-.ui-MenuContent:where(.r-variant-solid.r-high-contrast) {
-  --menu-item-highlighted-background-color: var(--accent-12);
-  --menu-item-highlighted-text-color: var(--accent-1);
-}
-.ui-MenuContent:where(.r-variant-soft) {
-  --menu-item-highlighted-background-color: var(--accent-a4);
-  --menu-item-highlighted-text-color: var(--accent-a11);
-}
-
-.ui-MenuItem {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  height: var(--menu-item-height);
-  padding-left: var(--menu-item-padding-left);
-  padding-right: var(--menu-item-padding-right);
-  box-sizing: border-box;
-  position: relative;
-  outline: none;
-  scroll-margin: var(--menu-content-padding) 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
-  color: var(--gray-12);
-  font-size: var(--menu-item-font-size);
-  line-height: var(--menu-item-line-height);
-  letter-spacing: var(--menu-item-letter-spacing);
-  border-radius: var(--menu-item-border-radius);
-}
-.ui-MenuShortcut {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  padding-left: var(--space-4);
-  color: var(--gray-a11);
-}
-.ui-MenuItem:where([data-accent-color]) {
-  color: var(--accent-a11);
-}
-.ui-MenuItem:where([data-disabled]) {
-  color: var(--gray-a8);
-}
-.ui-MenuItem:where([data-highlighted]) {
-  background-color: var(--menu-item-highlighted-background-color);
-  color: var(--menu-item-highlighted-text-color);
-}
-.ui-MenuItem:where([data-disabled], [data-highlighted]) :where(.ui-MenuShortcut) {
-  color: inherit;
-}
-
-.ui-DropdownMenuSeparator {
-  height: 1px;
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
-  margin-left: var(--menu-item-padding-left);
-  margin-right: var(--menu-item-padding-right);
-  background-color: var(--gray-a6);
-}

package/components/editable.css

@@ -1,34 +0,0 @@
-
-.ui-Editable:where(.r-size-1) {
-  --editable-padding-x: var(--space-1);
-  --editable-border-radius: max(var(--radius-2), var(--radius-full));
-}
-.ui-Editable:where(.r-size-2) {
-  --editable-padding-x: var(--space-2);
-  --editable-border-radius: max(var(--radius-2), var(--radius-full));
-}
-.ui-Editable:where(.r-size-3) {
-  --editable-padding-x: var(--space-3);
-  --editable-border-radius: max(var(--radius-3), var(--radius-full));
-}
-.ui-EditableArea {
-  padding-left: var(--editable-padding-x);
-  padding-right: var(--editable-padding-x);
-  border-radius: var(--editable-border-radius);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ui-EditableArea:where([data-focused]),
-.ui-EditableArea:where(:hover) {
-  background-color: var(--accent-a3);
-}
-.ui-EditablePreview {
-  white-space: pre;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-.ui-EditableInput {
-  outline: none;
-  max-width: 100%;
-}