@moduix/react 2.0.0 → 2.1.0

package/dist/components/command-palette/CommandPalette.css

@@ -4,9 +4,9 @@
     justify-content: center;
     align-items: center;
     gap: var(--command-palette-trigger-gap, var(--spacing-2));
-    min-height: var(--command-palette-trigger-height, var(--size-lg));
-    padding: var(--command-palette-trigger-padding-y, .5rem)
-      var(--command-palette-trigger-padding-x, .875rem);
+    min-height: var(--command-palette-trigger-height, var(--size-md));
+    padding: var(--command-palette-trigger-padding-y, var(--spacing-1))
+      var(--command-palette-trigger-padding-x, var(--spacing-3-5));
     border: var(--command-palette-trigger-border-width, var(--border-width-sm)) solid
       var(--command-palette-trigger-border-color, var(--color-border));
     border-radius: var(--command-palette-trigger-radius, var(--radius-md));
@@ -30,9 +30,10 @@
     }
 
     &:focus-visible {
-      outline: var(--command-palette-focus-ring-width, var(--border-width-sm)) solid
-        var(--command-palette-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--command-palette-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--command-palette-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--command-palette-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--command-palette-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+          -1);
     }
   }
 
@@ -126,7 +127,7 @@
   ._4OfG0a_clearTrigger {
     --close-button-size: var(--command-palette-clear-size, var(--size-sm));
     --close-button-radius: var(--command-palette-clear-radius, var(--radius-md));
-    --close-button-icon-size: var(--command-palette-icon-size, 1rem);
+    --close-button-icon-size: var(--command-palette-icon-size, var(--spacing-4));
     --close-button-bg: transparent;
     --close-button-bg-hover: var(--command-palette-clear-bg-hover, var(--color-accent));
     --close-button-color: var(--command-palette-muted-color, var(--color-muted-foreground));
@@ -144,8 +145,8 @@
   }
 
   ._4OfG0a_iconSvg {
-    width: var(--command-palette-icon-size, 1rem);
-    height: var(--command-palette-icon-size, 1rem);
+    width: var(--command-palette-icon-size, var(--spacing-4));
+    height: var(--command-palette-icon-size, var(--spacing-4));
   }
 
   ._4OfG0a_combobox {
@@ -186,7 +187,7 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--command-palette-input-control-height, var(--size-sm));
+    height: var(--command-palette-input-control-height, auto);
     color: inherit;
     font: inherit;
     font-size: var(--command-palette-input-font-size, var(--text-sm));
@@ -211,7 +212,7 @@
     padding: 0;
 
     &:not(:empty) {
-      padding: var(--command-palette-empty-padding-y, .75rem)
+      padding: var(--command-palette-empty-padding-y, var(--spacing-3))
         var(--command-palette-empty-padding-x, var(--spacing-4));
       color: var(--command-palette-muted-color, var(--color-muted-foreground));
       font-size: var(--command-palette-empty-font-size, var(--text-sm));
@@ -231,7 +232,7 @@
   ._4OfG0a_scrollArea {
     --scroll-area-radius: 0;
     --scroll-area-scrollbar-margin: var(--command-palette-scrollbar-margin, var(--spacing-1));
-    --scroll-area-scrollbar-size: var(--command-palette-scrollbar-size, .375rem);
+    --scroll-area-scrollbar-size: var(--command-palette-scrollbar-size, var(--spacing-1-5));
     --scroll-area-thumb-bg: var(--command-palette-scrollbar-thumb-bg, var(--color-border));
     --scroll-area-content-padding: var(--command-palette-list-padding-y, var(--spacing-2))
       calc(var(--command-palette-list-padding-x, var(--spacing-2)) +
@@ -272,13 +273,13 @@
 
   ._4OfG0a_itemGroupLabel {
     z-index: 1;
-    padding: var(--command-palette-group-label-padding-y, var(--spacing-1))
+    padding: var(--command-palette-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)))
       var(--command-palette-group-label-padding-x, var(--spacing-3));
     background-color: var(--command-palette-bg, var(--color-popover));
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-group-label-font-size, var(--text-xs));
-    font-weight: var(--command-palette-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--command-palette-group-label-line-height, var(--line-height-text-xs));
+    color: var(--command-palette-group-label-color, var(--popup-group-label-color, var(--command-palette-muted-color, var(--color-muted-foreground))));
+    font-size: var(--command-palette-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--command-palette-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--command-palette-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     margin: 0;
     display: block;
     position: sticky;
@@ -290,14 +291,14 @@
     z-index: 0;
     align-items: center;
     gap: var(--command-palette-item-gap, var(--spacing-3));
-    min-height: var(--command-palette-item-min-height, 3rem);
-    padding: var(--command-palette-item-padding-y, var(--spacing-2))
-      var(--command-palette-item-padding-x, var(--spacing-3));
+    min-height: var(--command-palette-item-min-height, var(--popup-item-min-height, var(--size-sm)));
+    padding: var(--command-palette-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)))
+      var(--command-palette-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     border-radius: var(--command-palette-item-radius, var(--radius-md));
     color: var(--command-palette-item-color, var(--command-palette-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--command-palette-item-font-size, var(--text-sm));
-    line-height: var(--command-palette-item-line-height, var(--line-height-text-sm));
+    font-size: var(--command-palette-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--command-palette-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     cursor: default;
     user-select: none;
     outline: 0;
@@ -329,8 +330,8 @@
   }
 
   ._4OfG0a_itemIcon, ._4OfG0a_itemIndicator {
-    width: var(--command-palette-item-icon-box-size, 2rem);
-    height: var(--command-palette-item-icon-box-size, 2rem);
+    width: var(--command-palette-item-icon-box-size, var(--spacing-8));
+    height: var(--command-palette-item-icon-box-size, var(--spacing-8));
     border: var(--command-palette-item-icon-border-width, var(--border-width-sm)) solid
       var(--command-palette-item-icon-border-color, var(--color-border));
     border-radius: var(--command-palette-item-icon-radius, var(--radius-md));
@@ -341,8 +342,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--command-palette-item-icon-size, 1rem);
-      height: var(--command-palette-item-icon-size, 1rem);
+      width: var(--command-palette-item-icon-size, var(--spacing-4));
+      height: var(--command-palette-item-icon-size, var(--spacing-4));
     }
   }
 
@@ -352,8 +353,8 @@
     justify-self: end;
 
     & > svg {
-      width: var(--command-palette-item-icon-size, 1rem);
-      height: var(--command-palette-item-icon-size, 1rem);
+      width: var(--command-palette-item-icon-size, var(--spacing-4));
+      height: var(--command-palette-item-icon-size, var(--spacing-4));
     }
   }
 

package/dist/components/date-input/DateInput.css

@@ -22,16 +22,17 @@
   .X3ODua_control {
     box-sizing: border-box;
     width: var(--date-input-control-width, 100%);
-    min-height: var(--date-input-control-height, var(--size-lg));
+    min-height: var(--date-input-control-height, var(--size-md));
     border: var(--date-input-border-width, var(--border-width-sm))
       var(--date-input-border-style, solid) var(--date-input-border-color, var(--color-border));
     border-radius: var(--date-input-radius, var(--radius-md));
-    padding: var(--date-input-padding-y, .5rem) var(--date-input-padding-x, .75rem);
+    padding: var(--date-input-padding-y, var(--spacing-1))
+      var(--date-input-padding-x, var(--spacing-3));
     background-color: var(--date-input-bg, var(--color-background));
     color: var(--date-input-color, var(--color-foreground));
-    outline: var(--date-input-focus-ring-width, var(--date-input-border-width, var(--border-width-sm)))
+    outline: var(--date-input-focus-ring-width, var(--date-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--date-input-focus-ring-offset, -1px);
+    outline-offset: var(--date-input-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--date-input-transition, var(--transition-default)),
       outline-color var(--date-input-transition, var(--transition-default)),
       opacity var(--date-input-transition, var(--transition-default));

package/dist/components/date-picker/DatePicker.css

@@ -65,20 +65,22 @@
     box-sizing: border-box;
     width: 100%;
     min-width: min(var(--date-picker-input-min-width, 7.5rem), 100%);
-    height: var(--date-picker-control-height, var(--size-lg));
+    height: var(--date-picker-control-height, var(--size-md));
     border: var(--date-picker-border-width, var(--border-width-sm)) solid
       var(--date-picker-border-color, var(--color-border));
     border-radius: var(--date-picker-radius, var(--radius-md));
-    padding-block: var(--date-picker-input-padding-y, .5rem);
-    padding-inline: var(--date-picker-input-padding-x-start, .875rem)
+    padding-block: var(--date-picker-input-padding-y, var(--spacing-1));
+    padding-inline: var(--date-picker-input-padding-x-start, var(--spacing-3-5))
       var(--date-picker-input-padding-x-end, 4.25rem);
     background-color: var(--date-picker-bg, var(--color-background));
     color: inherit;
     font: inherit;
     font-size: var(--date-picker-font-size, var(--text-md));
     line-height: var(--date-picker-line-height, var(--line-height-text-md));
-    outline: var(--date-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--date-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--date-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--date-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     transition: background-color var(--date-picker-transition, var(--transition-default)),
       border-color var(--date-picker-transition, var(--transition-default)),
       color var(--date-picker-transition, var(--transition-default)),
@@ -105,19 +107,11 @@
     &:is([disabled], [data-disabled], [readonly], [data-readonly]) {
       cursor: default;
     }
-
-    .a48aUa_control:not([data-disabled], [data-readonly]) & {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--date-picker-bg-hover, var(--color-accent));
-        }
-      }
-    }
   }
 
   .a48aUa_control:has(.a48aUa_input + .a48aUa_input) .a48aUa_input {
     min-width: min(var(--date-picker-range-input-min-width, 7.5rem), 100%);
-    padding-inline-end: var(--date-picker-input-padding-x-start, .875rem);
+    padding-inline-end: var(--date-picker-input-padding-x-start, var(--spacing-3-5));
   }
 
   .a48aUa_control:has(.a48aUa_input + .a48aUa_input) .a48aUa_input:last-of-type {
@@ -130,7 +124,8 @@
     background: var(--date-picker-action-bg, transparent);
     color: var(--date-picker-icon-color, var(--color-muted-foreground));
     font: inherit;
-    outline: var(--date-picker-action-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline: var(--date-picker-action-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
     outline-offset: var(--date-picker-action-focus-ring-offset, 0);
     cursor: pointer;
     transition: background-color var(--date-picker-transition, var(--transition-default)),
@@ -147,8 +142,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--date-picker-icon-size, 1rem);
-      height: var(--date-picker-icon-size, 1rem);
+      width: var(--date-picker-icon-size, var(--spacing-4));
+      height: var(--date-picker-icon-size, var(--spacing-4));
       display: block;
     }
 
@@ -176,17 +171,17 @@
   }
 
   .a48aUa_trigger {
-    width: var(--date-picker-action-size, 1.5rem);
-    height: var(--date-picker-action-size, 1.5rem);
+    width: var(--date-picker-action-size, var(--size-xs));
+    height: var(--date-picker-action-size, var(--size-xs));
     top: 50%;
-    right: var(--date-picker-trigger-offset-right, .5rem);
     position: absolute;
+    inset-inline-end: var(--date-picker-trigger-offset-right, var(--spacing-2));
     transform: translateY(-50%);
   }
 
   .a48aUa_clearTrigger {
-    --close-button-size: var(--date-picker-action-size, 1.5rem);
-    --close-button-icon-size: var(--date-picker-icon-size, 1rem);
+    --close-button-size: var(--date-picker-action-size, var(--size-xs));
+    --close-button-icon-size: var(--date-picker-icon-size, var(--spacing-4));
     --close-button-radius: var(--date-picker-action-radius, var(--radius-sm));
     --close-button-bg: var(--date-picker-action-bg, transparent);
     --close-button-bg-hover: var(--date-picker-action-bg-hover, var(--color-muted));
@@ -198,9 +193,10 @@
     --close-button-focus-ring-offset: var(--date-picker-action-focus-ring-offset, 0);
     --close-button-transition: var(--date-picker-transition, var(--transition-default));
     top: 50%;
-    right: calc(var(--date-picker-trigger-offset-right, .5rem) + var(--date-picker-action-size, 1.5rem) +
-        var(--date-picker-action-gap, .125rem));
     position: absolute;
+    inset-inline-end: calc(var(--date-picker-trigger-offset-right, var(--spacing-2)) +
+        var(--date-picker-action-size, var(--size-xs)) +
+        var(--date-picker-action-gap, var(--spacing-0-5)));
     transform: translateY(-50%);
 
     &[data-focus] {
@@ -272,13 +268,13 @@
   }
 
   .a48aUa_navTrigger {
-    width: var(--date-picker-nav-trigger-size, 2rem);
-    height: var(--date-picker-nav-trigger-size, 2rem);
+    width: var(--date-picker-nav-trigger-size, var(--size-sm));
+    height: var(--date-picker-nav-trigger-size, var(--size-sm));
   }
 
   .a48aUa_viewTrigger {
     min-width: 0;
-    min-height: var(--date-picker-view-trigger-height, 2rem);
+    min-height: var(--date-picker-view-trigger-height, var(--size-sm));
     gap: var(--date-picker-view-trigger-gap, var(--spacing-2));
     padding-inline: var(--date-picker-view-trigger-padding-x, var(--spacing-2));
     color: var(--date-picker-view-trigger-color, var(--color-foreground));
@@ -298,12 +294,12 @@
   .a48aUa_table {
     border-collapse: separate;
     width: 100%;
-    border-spacing: var(--date-picker-table-cell-gap, .125rem);
+    border-spacing: var(--date-picker-table-cell-gap, var(--spacing-0-5));
     table-layout: fixed;
   }
 
   .a48aUa_tableHeader, .a48aUa_weekNumberCell {
-    width: var(--date-picker-table-cell-size, 2.25rem);
+    width: var(--date-picker-table-cell-size, var(--size-sm));
     height: var(--date-picker-table-header-height, 1.75rem);
     color: var(--date-picker-table-header-color, var(--color-muted-foreground));
     font-size: var(--date-picker-table-header-font-size, var(--text-xs));
@@ -313,8 +309,8 @@
   }
 
   .a48aUa_tableCell {
-    width: var(--date-picker-table-cell-size, 2.25rem);
-    height: var(--date-picker-table-cell-size, 2.25rem);
+    width: var(--date-picker-table-cell-size, var(--size-sm));
+    height: var(--date-picker-table-cell-size, var(--size-sm));
     text-align: center;
     padding: 0;
   }
@@ -327,8 +323,8 @@
   .a48aUa_tableCellTrigger {
     box-sizing: border-box;
     width: 100%;
-    min-width: var(--date-picker-table-cell-size, 2.25rem);
-    height: var(--date-picker-table-cell-size, 2.25rem);
+    min-width: var(--date-picker-table-cell-size, var(--size-sm));
+    height: var(--date-picker-table-cell-size, var(--size-sm));
     border: var(--date-picker-table-cell-border-width, 0) solid
       var(--date-picker-table-cell-border-color, transparent);
     border-radius: var(--date-picker-table-cell-radius, var(--radius-sm));
@@ -337,9 +333,10 @@
     font: inherit;
     font-size: var(--date-picker-table-cell-font-size, var(--text-sm));
     line-height: var(--date-picker-table-cell-line-height, var(--line-height-text-sm));
-    outline: var(--date-picker-table-cell-focus-ring-width, var(--border-width-sm)) solid
-      transparent;
-    outline-offset: calc(var(--date-picker-table-cell-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--date-picker-table-cell-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--date-picker-table-cell-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: background-color var(--date-picker-transition, var(--transition-default)),
       border-color var(--date-picker-transition, var(--transition-default)),
@@ -393,19 +390,21 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--date-picker-select-height, 2rem);
+    min-height: var(--date-picker-select-height, var(--size-sm));
     border: var(--date-picker-select-border-width, var(--border-width-sm)) solid
       var(--date-picker-select-border-color, var(--color-border));
     border-radius: var(--date-picker-select-radius, var(--radius-sm));
-    padding-block: var(--date-picker-select-padding-y, .25rem);
+    padding-block: var(--date-picker-select-padding-y, var(--spacing-1));
     padding-inline: var(--date-picker-select-padding-x, var(--spacing-2));
     background-color: var(--date-picker-select-bg, var(--color-background));
     color: var(--date-picker-select-color, var(--color-foreground));
     font: inherit;
     font-size: var(--date-picker-select-font-size, var(--text-sm));
     line-height: var(--date-picker-select-line-height, var(--line-height-text-sm));
-    outline: var(--date-picker-select-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--date-picker-select-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--date-picker-select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--date-picker-select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: background-color var(--date-picker-transition, var(--transition-default)),
       border-color var(--date-picker-transition, var(--transition-default)),
@@ -416,16 +415,10 @@
       border-color: var(--date-picker-focus-ring-color, var(--color-ring));
       outline-color: var(--date-picker-focus-ring-color, var(--color-ring));
     }
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--date-picker-select-bg-hover, var(--color-accent));
-      }
-    }
   }
 
   .a48aUa_presetTrigger {
-    min-height: var(--date-picker-preset-trigger-height, 2rem);
+    min-height: var(--date-picker-preset-trigger-height, var(--size-sm));
     padding-inline: var(--date-picker-preset-trigger-padding-x, var(--spacing-2));
     background-color: var(--date-picker-preset-trigger-bg, var(--color-muted));
     color: var(--date-picker-preset-trigger-color, var(--color-foreground));

package/dist/components/dialog/Dialog.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   ._9AixhG_trigger, ._9AixhG_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--dialog-control-height, var(--size-lg));
-    padding: var(--dialog-control-padding-y, .5rem) var(--dialog-control-padding-x, .875rem);
+    min-height: var(--dialog-control-height, var(--size-md));
+    padding: var(--dialog-control-padding-y, var(--spacing-1))
+      var(--dialog-control-padding-x, var(--spacing-3-5));
     border: var(--dialog-control-border-width, var(--border-width-sm)) solid
       var(--dialog-control-border-color, var(--color-border));
     border-radius: var(--dialog-control-radius, var(--radius-md));
@@ -177,14 +178,14 @@
   }
 
   ._9AixhG_closeIcon {
-    --close-button-size: var(--dialog-close-icon-size, 1.75rem);
+    --close-button-size: var(--dialog-close-icon-size, var(--spacing-7));
     --close-button-radius: var(--dialog-close-icon-radius, var(--radius-md));
     --close-button-color: var(--dialog-close-icon-color, var(--dialog-muted-color, var(--color-muted-foreground)));
     --close-button-color-hover: var(--dialog-close-icon-color-hover, var(--dialog-close-icon-color, var(--dialog-color, var(--color-popover-foreground))));
     --close-button-bg: var(--dialog-close-icon-bg, transparent);
     --close-button-bg-hover: var(--dialog-close-icon-bg-hover, var(--color-accent));
     --close-button-focus-ring-color: var(--dialog-close-icon-focus-ring-color, var(--dialog-focus-ring-color, var(--color-ring)));
-    --close-button-icon-size: var(--dialog-close-icon-glyph-size, .75rem);
+    --close-button-icon-size: var(--dialog-close-icon-glyph-size, var(--spacing-3));
     z-index: 2;
     position: absolute;
     inset-block-start: var(--dialog-close-icon-inset-block-start, var(--spacing-4));

package/dist/components/drawer/Drawer.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   ._uVP9W_trigger, ._uVP9W_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--drawer-control-height, var(--size-lg));
-    padding: var(--drawer-control-padding-y, .5rem) var(--drawer-control-padding-x, .875rem);
+    min-height: var(--drawer-control-height, var(--size-md));
+    padding: var(--drawer-control-padding-y, var(--spacing-1))
+      var(--drawer-control-padding-x, var(--spacing-3-5));
     border: var(--drawer-control-border-width, var(--border-width-sm)) solid
       var(--drawer-control-border-color, var(--color-border));
     border-radius: var(--drawer-control-radius, var(--radius-md));
@@ -103,7 +104,7 @@
   }
 
   ._uVP9W_content {
-    --drawer-bleed: var(--drawer-bleed-size, 3rem);
+    --drawer-bleed: var(--drawer-bleed-size, var(--size-xl));
     box-sizing: border-box;
     width: min(var(--drawer-width, 100%), 100vw);
     height: var(--drawer-size, 100%);
@@ -340,14 +341,14 @@
   }
 
   ._uVP9W_closeIcon {
-    --close-button-size: var(--drawer-close-icon-size, 1.75rem);
+    --close-button-size: var(--drawer-close-icon-size, var(--spacing-7));
     --close-button-radius: var(--drawer-close-icon-radius, var(--radius-md));
     --close-button-color: var(--drawer-close-icon-color, var(--drawer-description-color, var(--color-muted-foreground)));
     --close-button-color-hover: var(--drawer-close-icon-color-hover, var(--drawer-color, var(--color-popover-foreground)));
     --close-button-bg: var(--drawer-close-icon-bg, transparent);
     --close-button-bg-hover: var(--drawer-close-icon-bg-hover, var(--color-accent));
     --close-button-focus-ring-color: var(--drawer-close-icon-focus-ring-color, var(--drawer-focus-ring-color, var(--color-ring)));
-    --close-button-icon-size: var(--drawer-close-icon-glyph-size, .75rem);
+    --close-button-icon-size: var(--drawer-close-icon-glyph-size, var(--spacing-3));
   }
 
   ._uVP9W_swipeArea {

package/dist/components/editable/Editable.css

@@ -31,15 +31,16 @@
   }
 
   ._4ZG42W_area {
-    --_editable-focus-ring-width: var(--editable-focus-ring-width, var(--editable-border-width, var(--border-width-sm)));
+    --_editable-focus-ring-width: var(--editable-focus-ring-width, var(--editable-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     box-sizing: border-box;
     width: var(--editable-area-width, 100%);
     min-width: 0;
-    min-height: var(--editable-area-height, var(--size-lg));
+    min-height: var(--editable-area-height, var(--size-md));
     border: var(--editable-border-width, var(--border-width-sm)) var(--editable-border-style, solid)
       var(--editable-border-color, var(--color-border));
     border-radius: var(--editable-radius, var(--radius-md));
-    padding: var(--editable-padding-y, .5rem) var(--editable-padding-x, .875rem);
+    padding: var(--editable-padding-y, var(--spacing-1))
+      var(--editable-padding-x, var(--spacing-3-5));
     background-color: var(--editable-bg, var(--color-background));
     color: var(--editable-color, var(--color-foreground));
     outline: var(--_editable-focus-ring-width) solid transparent;
@@ -120,17 +121,18 @@
 
   ._4ZG42W_trigger {
     box-sizing: border-box;
-    width: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
-    min-width: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
-    height: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
+    width: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
+    min-width: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
+    height: var(--editable-trigger-size, var(--editable-area-height, var(--size-md)));
     border: var(--editable-trigger-border-width, var(--border-width-sm))
       var(--editable-trigger-border-style, solid)
       var(--editable-trigger-border-color, var(--color-border));
     border-radius: var(--editable-trigger-radius, var(--radius-sm));
     background-color: var(--editable-trigger-bg, var(--color-background));
     color: var(--editable-trigger-color, var(--color-foreground));
-    outline: var(--editable-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(0px - var(--editable-focus-ring-width, var(--border-width-sm)));
+    outline: var(--editable-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(0px - var(--editable-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     cursor: pointer;
     transition: background-color var(--editable-transition, var(--transition-default)),
       border-color var(--editable-transition, var(--transition-default)),
@@ -163,8 +165,8 @@
     }
 
     & > svg {
-      width: var(--editable-trigger-icon-size, .875rem);
-      height: var(--editable-trigger-icon-size, .875rem);
+      width: var(--editable-trigger-icon-size, var(--spacing-3-5));
+      height: var(--editable-trigger-icon-size, var(--spacing-3-5));
       flex-shrink: 0;
     }
   }

package/dist/components/empty/Empty.css

@@ -27,8 +27,8 @@
     display: inline-flex;
 
     &:where(svg), & :where(svg) {
-      width: var(--empty-icon-size, 1.5rem);
-      height: var(--empty-icon-size, 1.5rem);
+      width: var(--empty-icon-size, var(--spacing-6));
+      height: var(--empty-icon-size, var(--spacing-6));
       pointer-events: none;
       flex-shrink: 0;
     }

package/dist/components/field/Field.css

@@ -47,19 +47,21 @@
   .SVzJ0G_control {
     box-sizing: border-box;
     width: var(--field-control-width, 100%);
-    min-height: var(--field-control-height, var(--size-lg));
+    min-height: var(--field-control-height, var(--size-md));
     border: var(--field-control-border-width, var(--border-width-sm))
       var(--field-control-border-style, solid)
       var(--field-control-border-color, var(--color-border));
     border-radius: var(--field-control-radius, var(--radius-md));
-    padding: var(--field-control-padding-y, .5rem) var(--field-control-padding-x, .875rem);
+    padding: var(--field-control-padding-y, var(--spacing-1))
+      var(--field-control-padding-x, var(--spacing-3-5));
     background-color: var(--field-control-bg, var(--color-background));
     color: var(--field-control-color, var(--color-foreground));
     font: inherit;
     font-size: var(--field-control-font-size, var(--text-md));
     line-height: var(--field-control-line-height, var(--line-height-text-md));
-    outline: var(--field-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: var(--field-focus-ring-offset, -1px);
+    outline: var(--field-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--field-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--field-control-transition, var(--transition-default)),
       outline-color var(--field-control-transition, var(--transition-default)),
       opacity var(--field-control-transition, var(--transition-default));