@flytedan/flytebot-design-system 0.26.0 → 0.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -3164,24 +3164,28 @@
   display: flex;
   align-items: center;
 }
-/* Layout utility modifiers for .fd-stack/.fd-row (SMS-7 Q1): the gap/wrap/
+/* SMS-7: layout utility modifiers for .fd-stack/.fd-row — the gap/wrap/
  * align/min-width/flex values every consumer app was reaching for inline —
  * pulled out here once so no app hand-rolls `style={{ gap, flexWrap,
- * alignItems, ... }}` again. Gap sizes match the kit's existing spacing
- * scale's smaller steps (8/12/16/20px); min-width sizes are named, not
+ * alignItems, ... }}` again. Gap sizes are the spacing scale's own sm/md/lg/xl
+ * steps (styles/tokens.css) — each class name is that token's tier, so
+ * `fd-gap-md` is always `var(--s-md)`, never a value only that class knows
+ * about. There is no bare `fd-gap-xs`: the scale's xs step (4px) hasn't had a
+ * consumer yet, so it isn't exposed as an unused utility (add it, at
+ * `var(--s-xs)`, the day something needs it). min-width sizes are named, not
  * arbitrary, so a consumer picks "sm"/"md" rather than inventing a pixel
  * value. */
-.fd-gap-xs {
-  gap: 8px;
-}
 .fd-gap-sm {
-  gap: 12px;
+  gap: var(--s-sm);
 }
 .fd-gap-md {
-  gap: 16px;
+  gap: var(--s-md);
 }
 .fd-gap-lg {
-  gap: 20px;
+  gap: var(--s-lg);
+}
+.fd-gap-xl {
+  gap: var(--s-xl);
 }
 .fd-wrap {
   flex-wrap: wrap;
@@ -3211,13 +3215,6 @@
   place-items: center;
   height: 100vh;
 }
-/* An actions row above a page's main content, right-aligned — e.g. a single
- * secondary action sitting above an EmptyState. */
-.fd-toolbar-end {
-  display: flex;
-  justify-content: flex-end;
-  padding: 16px 16px 0;
-}
 .fd-grid-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));