@surflane/ui 0.9.0 → 0.10.1

package/dist/css/all.css

@@ -1,8 +1,10 @@
-/* Every Surflane stylesheet in one import, in the recommended order: tokens, controls,
- * composition, document typography and components. Each file keeps its cascade layer. */
+/* Every Surflane stylesheet in one import, in the recommended order: tokens, theme
+ * transition, controls, composition, document typography and components. Each file
+ * keeps its cascade layer. */
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components, surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/controls.css';
-@import '@surflane/design-tokens/foundations.css';
-@import '@surflane/design-tokens/typography.css';
+@import '@surflane/design-tokens/motion.css';
+@import '@surflane/css/controls.css';
+@import '@surflane/css/foundations.css';
+@import '@surflane/css/typography.css';
 @import './styles.css';

package/dist/css/app-shell.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/popup.css';

package/dist/css/autocomplete.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/avatar.css

@@ -2,9 +2,9 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/presentation/avatar.css';
+@import '@surflane/css/presentation/avatar.css';
 @import './rules/avatar.css';

package/dist/css/badge.css

@@ -2,9 +2,9 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/presentation/badge.css';
+@import '@surflane/css/presentation/badge.css';
 @import './rules/badge.css';

package/dist/css/bottom-navigation.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/bottom-navigation.css';

package/dist/css/breadcrumbs.css

@@ -2,11 +2,11 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/presentation/link.css';
+@import '@surflane/css/presentation/link.css';
 @import './rules/link.css';
-@import '@surflane/design-tokens/presentation/breadcrumbs.css';
+@import '@surflane/css/presentation/breadcrumbs.css';
 @import './rules/breadcrumbs.css';

package/dist/css/button.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/button.css';

package/dist/css/card.css

@@ -2,10 +2,10 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/foundations/layout.css';
+@import '@surflane/css/foundations/layout.css';
 @import './rules/layout.css';
-@import '@surflane/design-tokens/presentation/card.css';
+@import '@surflane/css/presentation/card.css';
 @import './rules/card.css';

package/dist/css/chart.css

@@ -2,12 +2,12 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
 @import './rules/button.css';
 @import './rules/scroll-area.css';
-@import '@surflane/design-tokens/presentation/table.css';
+@import '@surflane/css/presentation/table.css';
 @import './rules/table.css';
 @import './rules/chart.css';

package/dist/css/checkbox-group.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/choice.css';

package/dist/css/checkbox.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/choice.css';

package/dist/css/choice-label.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/choice.css';

package/dist/css/code.css

@@ -2,12 +2,12 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
 @import './rules/button.css';
 @import './rules/scroll-area.css';
 @import './rules/syntax-highlighter.css';
-@import '@surflane/design-tokens/presentation/code.css';
+@import '@surflane/css/presentation/code.css';
 @import './rules/code.css';

package/dist/css/collapsible.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';

package/dist/css/combobox.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/context-menu.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/date-picker.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/dialog.css

@@ -2,9 +2,9 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/controls.css';
+@import '@surflane/css/controls.css';
 @import './rules/dialog.css';

package/dist/css/drawer.css

@@ -2,10 +2,10 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/controls.css';
+@import '@surflane/css/controls.css';
 @import './rules/panel.css';
 @import './rules/drawer.css';

package/dist/css/empty-state.css

@@ -2,8 +2,8 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/presentation/empty-state.css';
+@import '@surflane/css/presentation/empty-state.css';
 @import './rules/empty-state.css';

package/dist/css/field.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/fieldset.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/fieldset.css';

package/dist/css/file-upload.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';
@@ -12,6 +12,6 @@
 @import './rules/field.css';
 @import './rules/gauge.css';
 @import './rules/progress.css';
-@import '@surflane/design-tokens/presentation/badge.css';
+@import '@surflane/css/presentation/badge.css';
 @import './rules/badge.css';
 @import './rules/file-upload.css';

package/dist/css/filter-bar.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/filter-bar.css';

package/dist/css/form.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/form.css';

package/dist/css/icon.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';

package/dist/css/inline-message.css

@@ -2,9 +2,9 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
-@import '@surflane/design-tokens/presentation/inline-message.css';
+@import '@surflane/css/presentation/inline-message.css';
 @import './rules/inline-message.css';

package/dist/css/input.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/layout.css

@@ -2,8 +2,8 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/foundations/layout.css';
+@import '@surflane/css/foundations/layout.css';
 @import './rules/layout.css';

package/dist/css/link.css

@@ -2,8 +2,8 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/presentation/link.css';
+@import '@surflane/css/presentation/link.css';
 @import './rules/link.css';

package/dist/css/list.css

@@ -2,8 +2,8 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/presentation/list.css';
+@import '@surflane/css/presentation/list.css';
 @import './rules/list.css';

package/dist/css/markdown.css

@@ -2,17 +2,17 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
 @import './rules/button.css';
 @import './rules/scroll-area.css';
-@import '@surflane/design-tokens/presentation/table.css';
+@import '@surflane/css/presentation/table.css';
 @import './rules/table.css';
 @import './rules/syntax-highlighter.css';
-@import '@surflane/design-tokens/presentation/code.css';
+@import '@surflane/css/presentation/code.css';
 @import './rules/code.css';
-@import '@surflane/design-tokens/foundations/typography.css';
+@import '@surflane/css/foundations/typography.css';
 @import './rules/typography.css';
 @import './rules/markdown.css';

package/dist/css/menu.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/menubar.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/bar.css';

package/dist/css/meter.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/gauge.css';

package/dist/css/native-select.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/navigation-menu.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/popup.css';

package/dist/css/number-field.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/otp-field.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/field-control.css';
 @import './rules/sizing.css';

package/dist/css/page-header.css

@@ -2,10 +2,10 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
-@import '@surflane/design-tokens/foundations/typography.css';
+@import '@surflane/css/foundations/typography.css';
 @import './rules/typography.css';
-@import '@surflane/design-tokens/foundations/page-header.css';
+@import '@surflane/css/foundations/page-header.css';
 @import './rules/page-header.css';

package/dist/css/pagination.css

@@ -2,10 +2,10 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/icon.css';
 @import './rules/button.css';
-@import '@surflane/design-tokens/presentation/pagination.css';
+@import '@surflane/css/presentation/pagination.css';
 @import './rules/pagination.css';

package/dist/css/popover.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/popup.css';

package/dist/css/preview-card.css

@@ -2,10 +2,10 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/popup.css';
-@import '@surflane/design-tokens/presentation/link.css';
+@import '@surflane/css/presentation/link.css';
 @import './rules/link.css';
 @import './rules/preview-card.css';

package/dist/css/progress.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/gauge.css';

package/dist/css/radio-group.css

@@ -2,7 +2,7 @@
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/presentation/base.css';
+@import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
 @import './rules/choice.css';

package/dist/css/rules/accordion.css

@@ -3,19 +3,19 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-accordion {
+  .surf-accordion {
     display: grid;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     min-width: 0;
   }
-  .pui-accordion-header {
+  .surf-accordion-header {
     margin: 0;
     font: inherit;
   }
-  .pui-accordion-panel {
+  .surf-accordion-panel {
     height: var(--accordion-panel-height);
   }
-  .pui-accordion-panel[data-ending-style] {
+  .surf-accordion-panel[data-ending-style] {
     pointer-events: none;
   }
 }

package/dist/css/rules/alert-dialog.css

@@ -3,21 +3,21 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-confirm-content {
-    --dialog-width: var(--size-dialog-small);
+  .surf-confirm-content {
+    --surf-dialog-width: var(--surf-size-dialog-small);
   }
-  .pui-confirm-content .pui-dialog-footer {
+  .surf-confirm-content .surf-dialog-footer {
     border-top: 0;
-    padding-top: var(--space-2);
+    padding-top: var(--surf-space-2);
   }
 }
 @layer surflane.sizes {
-  .pui-confirm-content .pui-dialog-header {
-    padding-inline-end: var(--space-6);
+  .surf-confirm-content .surf-dialog-header {
+    padding-inline-end: var(--surf-space-6);
     border-bottom: 0;
   }
-  :where([data-ui-size], [data-ui-size] *).pui-confirm-content
-    .pui-dialog-header {
-    padding-inline-end: var(--ui-card-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-confirm-content
+    .surf-dialog-header {
+    padding-inline-end: var(--surf-ui-card-padding);
   }
 }