@abyss-project/commons-front-core 11.1.2 → 12.0.0

package/dist/{Tabs-CZQ1JYlW.js → Tabs-CwVEV4SO.js}

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as v, Fragment as ne } from "react/jsx-runtime";
-import { useId as E, useRef as j, useState as I, cloneElement as Ct, useMemo as ye, useCallback as X, useEffect as G, forwardRef as St, createContext as Be, useContext as Ne, useLayoutEffect as _e } from "react";
+import { useId as E, useRef as j, useState as I, cloneElement as Ct, useMemo as ye, useCallback as Q, useEffect as G, forwardRef as St, createContext as Be, useContext as Ne, useLayoutEffect as _e } from "react";
 import { alpha as It, styled as a, useTheme as Ve, getContrastRatio as $e } from "@mui/material/styles";
 import ce from "@mui/material/FormControl";
 import de from "@mui/material/FormHelperText";
@@ -33,8 +33,8 @@ import Ut from "@mui/icons-material/ErrorOutline";
 import qt from "@mui/icons-material/InfoOutlined";
 import Kt from "@mui/icons-material/WarningAmber";
 import Yt from "@mui/material/Checkbox";
-import Qt from "@mui/icons-material/DescriptionOutlined";
-import Xt from "@mui/icons-material/FolderOutlined";
+import Xt from "@mui/icons-material/DescriptionOutlined";
+import Qt from "@mui/icons-material/FolderOutlined";
 import Zt from "@mui/icons-material/ChevronRightRounded";
 import Jt from "@mui/material/Popover";
 import en from "@mui/material/Alert";
@@ -44,11 +44,11 @@ import Ee from "@mui/material/useMediaQuery";
 import on from "@mui/material/Modal";
 import rn from "@mui/material/Slide";
 import { Link as sn } from "react-router-dom";
-var F = /* @__PURE__ */ ((e) => (e.Mobile = "mobile", e.Tablet = "tablet", e.Desktop = "desktop", e))(F || {});
+var $ = /* @__PURE__ */ ((e) => (e.Mobile = "mobile", e.Tablet = "tablet", e.Desktop = "desktop", e))($ || {});
 const qe = {
   tablet: Me.md,
   desktop: Me.lg
-}, an = 0.05, fe = (e) => `(min-width:${qe[e]}px)`, me = (e) => `(max-width:${qe[e] - an}px)`, N = {
+}, an = 0.05, fe = (e) => `(min-width:${qe[e]}px)`, me = (e) => `(max-width:${qe[e] - an}px)`, B = {
   /** From the start of `tier` up. */
   up: (e) => `@media ${fe(e)}`,
   /** Below the start of `tier`. */
@@ -76,27 +76,27 @@ const qe = {
         )}`;
     }
   }
-}, o = (e) => `${e}px`, O = (e) => `1px solid ${e}`, ge = (e) => It(e, Ft), te = (e) => ({
+}, o = (e) => `${e}px`, R = (e) => `1px solid ${e}`, ge = (e) => It(e, Ft), te = (e) => ({
   outline: `2px solid ${e.design.tokens["focus.ring"]}`,
   outlineOffset: "2px"
-}), Xr = (e, t) => t === "small" ? e.design.densityValues.compact.control : e.design.densityValues[e.design.density].control, Zr = (e) => e.design.densityValues[e.design.density].row, Ke = (e) => ({
-  [N.down(F.Tablet)]: {
+}), Qr = (e, t) => t === "small" ? e.design.densityValues.compact.control : e.design.densityValues[e.design.density].control, Zr = (e) => e.design.densityValues[e.design.density].row, Ke = (e) => ({
+  [B.down($.Tablet)]: {
     minHeight: o(e.design.densityValues.touchTarget)
   }
 }), ln = (e) => ({
-  [N.down(F.Tablet)]: {
+  [B.down($.Tablet)]: {
     minWidth: o(e.design.densityValues.touchTarget),
     minHeight: o(e.design.densityValues.touchTarget)
   }
 }), oe = (e, t, n = "fast") => t.map(
   (r) => `${r} ${e.design.durations[n]}ms ${e.design.easings.standard}`
 ).join(", "), Ye = () => {
-  const e = Ee(N.up(F.Desktop), {
+  const e = Ee(B.up($.Desktop), {
     noSsr: !0
-  }), t = Ee(N.down(F.Tablet), {
+  }), t = Ee(B.down($.Tablet), {
     noSsr: !0
   });
-  return e ? F.Desktop : t ? F.Mobile : F.Tablet;
+  return e ? $.Desktop : t ? $.Mobile : $.Tablet;
 };
 var J = /* @__PURE__ */ ((e) => (e.Top = "top", e.Bottom = "bottom", e.Left = "left", e.Right = "right", e))(J || {});
 const se = (e, t) => `calc(${o(t)} + env(safe-area-inset-${e}))`, dn = 0.3, cn = a("div")({
@@ -123,7 +123,7 @@ const se = (e, t) => `calc(${o(t)} + env(safe-area-inset-${e}))`, dn = 0.3, cn =
     backgroundColor: t["bg.surface"],
     color: t["text.primary"],
     fontFamily: c.sans,
-    borderTop: O(t["border.strong"]),
+    borderTop: R(t["border.strong"]),
     borderTopLeftRadius: o(n.lg),
     borderTopRightRadius: o(n.lg),
     boxShadow: s.modal,
@@ -174,7 +174,7 @@ const se = (e, t) => `calc(${o(t)} + env(safe-area-inset-${e}))`, dn = 0.3, cn =
   overflowY: "auto",
   overscrollBehavior: "contain"
 });
-function Qe({
+function Xe({
   open: e,
   onClose: t,
   title: n,
@@ -189,8 +189,8 @@ function Qe({
     var D;
     if (m.current === null)
       return;
-    const P = Math.max(0, C.clientY - m.current), $ = ((D = g.current) == null ? void 0 : D.getBoundingClientRect().height) ?? 0;
-    m.current = null, b(!1), h(0), $ > 0 && P >= $ * dn && t();
+    const P = Math.max(0, C.clientY - m.current), F = ((D = g.current) == null ? void 0 : D.getBoundingClientRect().height) ?? 0;
+    m.current = null, b(!1), h(0), F > 0 && P >= F * dn && t();
   }, k = () => {
     m.current = null, b(!1), h(0);
   };
@@ -262,7 +262,7 @@ const bn = a(nn)(({ theme: e }) => {
     alignItems: "flex-start",
     gap: o(n[4]),
     padding: `${o(n[4])} ${o(n[5])}`,
-    borderBottom: O(t["border.subtle"])
+    borderBottom: R(t["border.subtle"])
   };
 }), vn = a("div")({ minWidth: 0 }), xn = a("h2")(({ theme: e }) => ({
   margin: 0,
@@ -293,7 +293,7 @@ const bn = a(nn)(({ theme: e }) => {
     alignItems: "center",
     gap: o(n[3]),
     padding: `${o(n[3])} ${o(n[5])}`,
-    borderTop: O(t["border.subtle"])
+    borderTop: R(t["border.subtle"])
   };
 }), Sn = a("p")(({ theme: e }) => ({
   margin: `0 0 ${o(e.design.space[3])}`,
@@ -307,7 +307,7 @@ const bn = a(nn)(({ theme: e }) => {
   marginTop: o(e.design.space[4]),
   "& > *": { flex: "1 1 0" }
 }));
-function Xe({
+function Qe({
   open: e,
   onClose: t,
   title: n,
@@ -316,9 +316,9 @@ function Xe({
   actions: c,
   children: l
 }) {
-  const d = z(), g = Ye() === F.Mobile, m = E(), p = E();
+  const d = z(), g = Ye() === $.Mobile, m = E(), p = E();
   return g ? /* @__PURE__ */ v(
-    Qe,
+    Xe,
     {
       open: e,
       onClose: t,
@@ -423,7 +423,7 @@ const et = {
     boxSizing: "border-box",
     padding: `${o(r[3])} ${o(r[3])} ${o(r[3])} ${o(r[4])}`,
     backgroundColor: n[g],
-    border: O(n[d]),
+    border: R(n[d]),
     borderRadius: o(s.md),
     color: n["text.primary"],
     fontFamily: c.sans,
@@ -452,7 +452,7 @@ const et = {
   columnGap: o(e.design.space[4]),
   rowGap: o(e.design.space[2]),
   minWidth: 0,
-  [N.down(F.Tablet)]: {
+  [B.down($.Tablet)]: {
     flexDirection: "column",
     alignItems: "flex-start"
   }
@@ -511,7 +511,7 @@ function En({
     }
   );
 }
-const Q = (e) => e.id ?? e.name, tt = (e, t, n) => (t === void 0 || e.sizeOctet <= t) && Mt(e, n), nt = (e, t, n) => [
+const X = (e) => e.id ?? e.name, tt = (e, t, n) => (t === void 0 || e.sizeOctet <= t) && Mt(e, n), nt = (e, t, n) => [
   ...(e.childFile ?? []).filter(
     (r) => tt(r, t, n)
   ),
@@ -590,7 +590,7 @@ const Q = (e) => e.id ?? e.name, tt = (e, t, n) => (t === void 0 || e.sizeOctet
   transform: t ? "rotate(90deg)" : "none",
   transition: oe(e, ["transform"])
 })), at = a(Yt)(({ theme: e }) => ({
-  [N.down(F.Tablet)]: {
+  [B.down($.Tablet)]: {
     padding: o(
       (e.design.densityValues.touchTarget - e.design.space[5]) / 2
     )
@@ -599,7 +599,7 @@ const Q = (e) => e.id ?? e.name, tt = (e, t, n) => (t === void 0 || e.sizeOctet
   margin: 0,
   padding: 0,
   listStyle: "none",
-  borderLeft: O(e.design.tokens["border.subtle"]),
+  borderLeft: R(e.design.tokens["border.subtle"]),
   marginLeft: o(e.design.space[3])
 })), ze = a("li")({ listStyle: "none" });
 function lt({
@@ -609,7 +609,7 @@ function lt({
 }) {
   return /* @__PURE__ */ v(ne, { children: [
     e.map((r) => /* @__PURE__ */ i(ze, { children: /* @__PURE__ */ i(Bn, { folder: r, context: n }) }, r.id ?? r.name)),
-    t.filter((r) => tt(r, n.maxSize, n.accept)).map((r) => /* @__PURE__ */ i(ze, { children: /* @__PURE__ */ i(Hn, { file: r, context: n }) }, Q(r)))
+    t.filter((r) => tt(r, n.maxSize, n.accept)).map((r) => /* @__PURE__ */ i(ze, { children: /* @__PURE__ */ i(Hn, { file: r, context: n }) }, X(r)))
   ] });
 }
 function Pn({
@@ -625,13 +625,13 @@ function Pn({
       draggable: !1,
       onError: () => r(!0)
     }
-  ) : /* @__PURE__ */ i(Qt, {}) });
+  ) : /* @__PURE__ */ i(Xt, {}) });
 }
 function Hn({
   file: e,
   context: t
 }) {
-  const n = E(), r = t.selectedIds.has(Q(e)), s = () => r ? t.unselect([e]) : t.select([e]), c = /* @__PURE__ */ v(ne, { children: [
+  const n = E(), r = t.selectedIds.has(X(e)), s = () => r ? t.unselect([e]) : t.select([e]), c = /* @__PURE__ */ v(ne, { children: [
     /* @__PURE__ */ i(
       Pn,
       {
@@ -659,7 +659,7 @@ function Bn({
   context: t
 }) {
   const n = z(), r = E(), [s, c] = I(!1), l = nt(e, t.maxSize, t.accept), d = l.filter(
-    (m) => t.selectedIds.has(Q(m))
+    (m) => t.selectedIds.has(X(m))
   ).length, g = l.length > 0 && d === l.length;
   return /* @__PURE__ */ v(ne, { children: [
     /* @__PURE__ */ v(he, { selected: g, children: [
@@ -688,7 +688,7 @@ function Bn({
           onClick: () => c(!s),
           children: [
             /* @__PURE__ */ i(Dn, { open: s, "aria-hidden": !0 }),
-            /* @__PURE__ */ i(st, { "aria-hidden": !0, children: s ? /* @__PURE__ */ i(Ue, {}) : /* @__PURE__ */ i(Xt, {}) }),
+            /* @__PURE__ */ i(st, { "aria-hidden": !0, children: s ? /* @__PURE__ */ i(Ue, {}) : /* @__PURE__ */ i(Qt, {}) }),
             /* @__PURE__ */ i(it, { strong: g, title: e.name, children: e.name })
           ]
         }
@@ -733,7 +733,7 @@ const De = "shared", Le = {
     padding: o(n[1]),
     listStyle: "none",
     minHeight: o(n[10] * 3),
-    border: O(t["border.subtle"]),
+    border: R(t["border.subtle"]),
     borderRadius: o(r.md)
   };
 }), ie = a("div")(({ theme: e }) => {
@@ -781,12 +781,12 @@ const De = "shared", Le = {
 })), Yn = a("span")(({ theme: e }) => ({
   fontSize: o(e.design.typeScale.body),
   color: e.design.tokens["text.secondary"]
-})), Qn = a("li")(({ theme: e }) => ({
+})), Xn = a("li")(({ theme: e }) => ({
   display: "flex",
   alignItems: "center",
   gap: o(e.design.space[2]),
   ...Ke(e)
-})), Xn = a("span")({
+})), Qn = a("span")({
   display: "flex",
   flexDirection: "column",
   minWidth: 0
@@ -843,35 +843,35 @@ function ro({
     refresh: y,
     onCreateCloud: b,
     fetchCloudRepository: f
-  } = e, u = z(), [x, k] = I(null), [C, P] = I(null), [$, D] = I(
+  } = e, u = z(), [x, k] = I(null), [C, P] = I(null), [F, D] = I(
     "loading"
     /* Loading */
-  ), [U, A] = I([]), [R, re] = I(!1), [ae, _] = I(!1), q = ye(() => {
+  ), [U, A] = I([]), [W, re] = I(!1), [ae, _] = I(!1), q = ye(() => {
     const w = [], T = /* @__PURE__ */ new Map(), S = u.formatMessage({
       id: "ds.business.cloud-import.section-organization"
     });
-    for (const W of g ?? []) {
-      if (!W.organizationId) {
-        w.push(W);
+    for (const O of g ?? []) {
+      if (!O.organizationId) {
+        w.push(O);
         continue;
       }
-      const H = d == null ? void 0 : d(W), V = T.get(W.organizationId) ?? {
+      const H = d == null ? void 0 : d(O), V = T.get(O.organizationId) ?? {
         name: (H == null ? void 0 : H.organizationName) ?? S,
         items: []
       };
-      V.items.push(W), T.set(W.organizationId, V);
+      V.items.push(O), T.set(O.organizationId, V);
     }
     if (d)
-      for (const W of T.values())
-        W.items.sort((H, V) => {
+      for (const O of T.values())
+        O.items.sort((H, V) => {
           const L = Le[d(H).scope ?? "personal"], Te = Le[d(V).scope ?? "personal"];
           return L !== Te ? L - Te : d(H).label.localeCompare(d(V).label);
         });
-    const B = (W, H) => (V) => {
+    const N = (O, H) => (V) => {
       const L = d == null ? void 0 : d(V);
       return {
         space: V,
-        sectionKey: W,
+        sectionKey: O,
         sectionLabel: H,
         label: (L == null ? void 0 : L.label) ?? Wt(V, u),
         subtitle: L == null ? void 0 : L.subtitle,
@@ -880,7 +880,7 @@ function ro({
     };
     return [
       ...w.map(
-        B(
+        N(
           "personal",
           u.formatMessage({
             id: "ds.business.cloud-import.section-personal"
@@ -888,10 +888,10 @@ function ro({
         )
       ),
       ...[...T].flatMap(
-        ([W, H]) => H.items.map(B(`org:${W}`, H.name))
+        ([O, H]) => H.items.map(N(`org:${O}`, H.name))
       ),
       ...(m ?? []).map(
-        B(
+        N(
           De,
           u.formatMessage({ id: "ds.business.cloud-import.section-shared" })
         )
@@ -899,7 +899,7 @@ function ro({
     ];
   }, [g, m, d, u]), K = q.find((w) => w.space.id === (x == null ? void 0 : x.id)) ?? null, pe = j(0), we = j(f);
   we.current = f;
-  const le = X(async (w) => {
+  const le = Q(async (w) => {
     const T = ++pe.current;
     D(
       "loading"
@@ -949,21 +949,21 @@ function ro({
     multiple: n,
     maxSize: r,
     accept: s,
-    selectedIds: new Set(U.map(Q)),
+    selectedIds: new Set(U.map(X)),
     getFileThumbnailUrl: l,
     select: (w) => A((T) => {
       if (!n)
         return w.slice(0, 1);
-      const S = new Set(T.map(Q));
+      const S = new Set(T.map(X));
       return [
         ...T,
-        ...w.filter((B) => !S.has(Q(B)))
+        ...w.filter((N) => !S.has(X(N)))
       ];
     }),
     unselect: (w) => {
-      const T = new Set(w.map(Q));
+      const T = new Set(w.map(X));
       A(
-        (S) => S.filter((B) => !T.has(Q(B)))
+        (S) => S.filter((N) => !T.has(X(N)))
       );
     }
   }, wt = g !== null && m !== null, ke = /* @__PURE__ */ i(ie, { children: /* @__PURE__ */ i(
@@ -991,7 +991,7 @@ function ro({
         {
           variant: "contained",
           startIcon: /* @__PURE__ */ i(Ae, { "aria-hidden": !0 }),
-          loading: R || p,
+          loading: W || p,
           onClick: () => void vt(),
           children: u.formatMessage({
             id: "ds.business.cloud-import.create-error.create-button"
@@ -1034,8 +1034,8 @@ function ro({
           filterOptions: (w, { inputValue: T }) => {
             const S = T.trim().toLowerCase();
             return S === "" || S === K.label.toLowerCase() ? w : w.filter(
-              (B) => [B.label, B.subtitle ?? ""].some(
-                (W) => W.toLowerCase().includes(S)
+              (N) => [N.label, N.subtitle ?? ""].some(
+                (O) => O.toLowerCase().includes(S)
               )
             );
           },
@@ -1043,9 +1043,9 @@ function ro({
             /* @__PURE__ */ i(no, { children: w.group }),
             /* @__PURE__ */ i(oo, { children: w.children })
           ] }, w.key),
-          renderOption: ({ key: w, ...T }, S) => /* @__PURE__ */ v(Qn, { ...T, children: [
+          renderOption: ({ key: w, ...T }, S) => /* @__PURE__ */ v(Xn, { ...T, children: [
             /* @__PURE__ */ i(dt, { "aria-hidden": !0, children: Ie(S) }),
-            /* @__PURE__ */ v(Xn, { children: [
+            /* @__PURE__ */ v(Qn, { children: [
               /* @__PURE__ */ i(Zn, { children: S.label }),
               S.subtitle !== void 0 && /* @__PURE__ */ i(Jn, { children: S.subtitle })
             ] })
@@ -1074,7 +1074,7 @@ function ro({
         ee,
         {
           "aria-label": Ce,
-          disabled: $ === "loading" || p,
+          disabled: F === "loading" || p,
           onClick: () => void yt(),
           children: /* @__PURE__ */ i(_t, { "aria-hidden": !0 })
         }
@@ -1092,7 +1092,7 @@ function ro({
       ) })
     ] }),
     /* @__PURE__ */ i(Vn, { children: u.formatMessage({ id: "ds.business.cloud-import.filtered-hint" }) }),
-    $ === "loading" && /* @__PURE__ */ i(ie, { children: /* @__PURE__ */ i(
+    F === "loading" && /* @__PURE__ */ i(ie, { children: /* @__PURE__ */ i(
       We,
       {
         size: 24,
@@ -1101,7 +1101,7 @@ function ro({
         })
       }
     ) }),
-    $ === "failed" && /* @__PURE__ */ v(ie, { role: "alert", children: [
+    F === "failed" && /* @__PURE__ */ v(ie, { role: "alert", children: [
       u.formatMessage({ id: "ds.business.cloud-import.tree-error" }),
       /* @__PURE__ */ i(
         Z,
@@ -1112,7 +1112,7 @@ function ro({
         }
       )
     ] }),
-    $ === "ready" && C !== null && (C.folders.length === 0 && C.files.length === 0 ? /* @__PURE__ */ v(ie, { children: [
+    F === "ready" && C !== null && (C.folders.length === 0 && C.files.length === 0 ? /* @__PURE__ */ v(ie, { children: [
       /* @__PURE__ */ i(Ue, { "aria-hidden": !0 }),
       u.formatMessage({ id: "ds.business.cloud-import.empty-space" })
     ] }) : /* @__PURE__ */ i(
@@ -1160,7 +1160,7 @@ function io({
 }) {
   const d = z();
   return /* @__PURE__ */ i(
-    Xe,
+    Qe,
     {
       open: e,
       onClose: t,
@@ -1191,7 +1191,7 @@ const so = /* @__PURE__ */ new Set(["a", "button"]), ao = a("div", {
     minWidth: 0,
     boxSizing: "border-box",
     backgroundColor: n["bg.surface"],
-    border: O(n["border.subtle"]),
+    border: R(n["border.subtle"]),
     borderRadius: o(r.md),
     padding: o(s[t.padding]),
     color: n["text.primary"],
@@ -1215,7 +1215,7 @@ const so = /* @__PURE__ */ new Set(["a", "button"]), ao = a("div", {
   tabIndex: d,
   ...g
 }, m) {
-  const p = t && typeof r == "string" && !so.has(r), h = X(
+  const p = t && typeof r == "string" && !so.has(r), h = Q(
     (b) => {
       typeof m == "function" ? m(b) : m !== null && (m.current = b);
     },
@@ -1317,8 +1317,8 @@ function ei({
         renderValue: (k) => {
           const C = Array.isArray(k) ? k : [k];
           return p && C.length === 0 ? /* @__PURE__ */ i(ho, { "aria-hidden": !0, children: e }) : /* @__PURE__ */ i(be, { children: C.map((P) => {
-            var $;
-            return (($ = u.get(P)) == null ? void 0 : $.label) ?? P;
+            var F;
+            return ((F = u.get(P)) == null ? void 0 : F.label) ?? P;
           }).join(", ") });
         },
         "aria-describedby": l ? f : void 0,
@@ -1377,7 +1377,7 @@ const ti = { l: 0.72, c: 0.12 }, ni = [
   width: o(e.design.densityValues[e.design.density].control),
   height: o(e.design.densityValues[e.design.density].control),
   borderRadius: o(e.design.radii.md),
-  border: O(e.design.tokens["border.control"])
+  border: R(e.design.tokens["border.control"])
 })), xo = a("div")(({ theme: e }) => ({
   display: "flex",
   flexWrap: "wrap",
@@ -1389,11 +1389,11 @@ const ti = { l: 0.72, c: 0.12 }, ni = [
     width: o(s),
     height: o(s),
     borderRadius: o(e.design.radii.sm),
-    border: O(e.design.tokens["border.control"]),
+    border: R(e.design.tokens["border.control"]),
     // The chosen swatch carries the ring of the design system (`focus.ring` is the accent).
     '&[aria-pressed="true"]': te(e),
     "&.Mui-focusVisible": te(e),
-    [N.down(F.Tablet)]: {
+    [B.down($.Tablet)]: {
       width: o(e.design.densityValues.touchTarget),
       height: o(e.design.densityValues.touchTarget)
     }
@@ -1471,14 +1471,27 @@ const ko = 6, Co = a("div", {
     display: "inline-flex",
     maxWidth: "100%",
     minWidth: 0,
-    border: O(n["border.subtle"]),
+    border: R(n["border.subtle"]),
     borderRadius: o(r.md),
     overflowX: "auto",
     overflowY: "hidden",
-    backgroundColor: n["bg.surface"]
+    backgroundColor: n["bg.surface"],
+    // Below 768 px each segment keeps a 44 px target: the band wraps onto more rows rather than
+    // hiding segments behind a sideways scroll. A rule between neighbours would then start the
+    // second row with a stray line and leave the rows unsplit: the band loses its border and each
+    // segment draws its own, apart by a gap in both directions.
+    [B.down($.Tablet)]: {
+      flexWrap: "wrap",
+      rowGap: o(s[1]),
+      columnGap: o(s[1]),
+      overflowX: "visible",
+      maskImage: "none",
+      border: "none",
+      backgroundColor: "transparent"
+    }
   };
 }), So = a(Ge)(({ theme: e }) => {
-  const { tokens: t, space: n, typeScale: r, fonts: s, densityValues: c } = e.design;
+  const { tokens: t, space: n, typeScale: r, fonts: s, densityValues: c, radii: l } = e.design;
   return {
     flex: "none",
     gap: o(n[2]),
@@ -1490,7 +1503,7 @@ const ko = 6, Co = a("div", {
     whiteSpace: "nowrap",
     color: t["text.secondary"],
     transition: oe(e, ["background-color", "color"]),
-    "& + &": { borderLeft: O(t["border.subtle"]) },
+    "& + &": { borderLeft: R(t["border.subtle"]) },
     '&[aria-checked="true"]': {
       backgroundColor: t["bg.raised"],
       color: t["text.primary"],
@@ -1498,8 +1511,15 @@ const ko = 6, Co = a("div", {
     },
     "&:hover": { backgroundColor: t["bg.hover"] },
     "&.Mui-focusVisible": { ...te(e), outlineOffset: "-2px" },
-    [N.down(F.Tablet)]: {
-      minHeight: o(c.touchTarget)
+    // A short label (« 1 h », « 7 j ») would leave a segment narrower than a finger. Each segment
+    // is its own bordered tile once the band wraps.
+    [B.down($.Tablet)]: {
+      minWidth: o(c.touchTarget),
+      minHeight: o(c.touchTarget),
+      border: R(t["border.subtle"]),
+      borderRadius: o(l.md),
+      backgroundColor: t["bg.surface"],
+      '&[aria-checked="true"]': { backgroundColor: t["bg.raised"] }
     }
   };
 }), Io = a("span")(({ theme: e }) => ({
@@ -1513,7 +1533,7 @@ function li({
   onChange: n,
   ariaLabel: r
 }) {
-  const s = j(null), [c, l] = I({ start: !1, end: !1 }), d = X(() => {
+  const s = j(null), [c, l] = I({ start: !1, end: !1 }), d = Q(() => {
     const p = s.current;
     if (!p)
       return;
@@ -1610,7 +1630,7 @@ function di({
   const d = z(), g = ye(
     () => $o(d.locale),
     [d.locale]
-  ), m = X(
+  ), m = Q(
     (u) => u === null ? "" : d.formatNumber(u, {
       minimumFractionDigits: r,
       maximumFractionDigits: r
@@ -1688,7 +1708,7 @@ const Fo = a("div")(({ theme: e }) => ({
   };
 }), Oo = a("span")(({ theme: e }) => ({
   fontSize: o(e.design.typeScale.body),
-  [N.down(F.Tablet)]: { display: "none" }
+  [B.down($.Tablet)]: { display: "none" }
 })), Ao = a("div")(({ theme: e }) => ({
   display: "flex",
   flexWrap: "wrap",
@@ -1722,21 +1742,21 @@ function ci({
   const g = z(), m = E(), p = E(), [h, y] = I(null), [b, f] = I(!1), u = r === void 0 ? null : Lo(r), x = s ?? (u === null ? null : g.formatMessage(
     { id: "ds.inputs.drop-zone.max-size" },
     { size: u, multiple: String(t) }
-  )), k = (A, R) => {
+  )), k = (A, W) => {
     const re = r === void 0 ? [] : A.filter((_) => _.size > r), ae = A.filter((_) => !re.includes(_));
-    R.some(
+    W.some(
       (_) => _.errors.some((q) => q.code === Et.TooManyFiles)
     ) ? y(
       "too-many"
       /* TooMany */
-    ) : R.length > 0 ? y(
+    ) : W.length > 0 ? y(
       "rejected-type"
       /* Rejected */
     ) : re.length > 0 ? y(
       A.length === 1 ? "too-big" : "some-too-big"
       /* SomeTooBig */
     ) : y(null), ae.length > 0 && e(ae);
-  }, { getRootProps: C, getInputProps: P, isDragActive: $, open: D } = Ot({
+  }, { getRootProps: C, getInputProps: P, isDragActive: F, open: D } = Ot({
     onDrop: k,
     multiple: t,
     accept: n,
@@ -1755,13 +1775,13 @@ function ci({
       "aria-describedby": x !== null ? p : void 0,
       children: [
         c !== void 0 && /* @__PURE__ */ i(Mo, { id: m, children: c }),
-        /* @__PURE__ */ v(Ro, { ...C({ onClick: D }), active: $, children: [
+        /* @__PURE__ */ v(Ro, { ...C({ onClick: D }), active: F, children: [
           /* @__PURE__ */ i("input", { ...P({ "aria-hidden": !0 }) }),
           d ?? /* @__PURE__ */ v(ne, { children: [
             /* @__PURE__ */ i(Wo, { "aria-hidden": !0, children: /* @__PURE__ */ i(Lt, {}) }),
             /* @__PURE__ */ i(Oo, { children: g.formatMessage(
               {
-                id: $ ? "ds.inputs.drop-zone.release" : "ds.inputs.drop-zone.prompt"
+                id: F ? "ds.inputs.drop-zone.release" : "ds.inputs.drop-zone.prompt"
               },
               { multiple: String(t) }
             ) })
@@ -1802,9 +1822,9 @@ function ci({
             cloudPicker: l,
             multiple: t,
             maxSize: r,
-            accept: n === void 0 ? void 0 : Object.entries(n).flatMap(([A, R]) => [
+            accept: n === void 0 ? void 0 : Object.entries(n).flatMap(([A, W]) => [
               A,
-              ...R
+              ...W
             ])
           }
         )
@@ -1839,30 +1859,30 @@ function _o({
 }) {
   const g = z(), m = Ve(), p = E(), [h, y] = I(""), [b, f] = I(!1), [u, x] = I(!1), [k, C] = I(e);
   e !== k && (C(e), e && (y(""), x(!1)));
-  const P = !b && (c === void 0 || h === c), $ = s !== "default", D = () => {
+  const P = !b && (c === void 0 || h === c), F = s !== "default", D = () => {
     b || d();
   }, U = () => {
     if (!P)
       return;
     x(!1);
-    let R;
+    let W;
     try {
-      R = l();
+      W = l();
     } catch {
       x(!0);
       return;
     }
-    R instanceof Promise && (f(!0), R.then(
+    W instanceof Promise && (f(!0), W.then(
       () => f(!1),
       () => {
         f(!1), x(!0);
       }
     ));
-  }, A = (R) => {
-    R.preventDefault(), U();
+  }, A = (W) => {
+    W.preventDefault(), U();
   };
   return /* @__PURE__ */ i(
-    Xe,
+    Qe,
     {
       open: e,
       onClose: D,
@@ -1874,7 +1894,7 @@ function _o({
           {
             variant: "outlined",
             disabled: b,
-            autoFocus: c === void 0 && $,
+            autoFocus: c === void 0 && F,
             onClick: D,
             children: g.formatMessage({ id: "ds.layers.confirm-dialog.cancel" })
           }
@@ -1888,7 +1908,7 @@ function _o({
             color: No[s],
             disabled: !P,
             loading: b,
-            autoFocus: c === void 0 && !$,
+            autoFocus: c === void 0 && !F,
             sx: s === "warning" ? {
               "&:not(.Mui-disabled)": {
                 color: Bo(
@@ -1911,7 +1931,7 @@ function _o({
               { text: c }
             ),
             value: h,
-            onChange: (R) => y(R.target.value),
+            onChange: (W) => y(W.target.value),
             disabled: b,
             autoFocus: !0,
             autoComplete: "off",
@@ -1933,7 +1953,7 @@ const jo = 320, Go = a("div")(({ theme: e }) => {
     justifyContent: "space-between",
     gap: o(n[3]),
     padding: `${o(n[2])} ${o(n[2])} ${o(n[2])} ${o(n[4])}`,
-    borderBottom: O(t["border.subtle"])
+    borderBottom: R(t["border.subtle"])
   };
 }), Uo = a("h2")(({ theme: e }) => ({
   margin: 0,
@@ -1959,12 +1979,12 @@ function ui({
   width: c = jo,
   children: l
 }) {
-  const d = z(), g = E(), m = Ye() === F.Mobile, p = d.formatMessage({
+  const d = z(), g = E(), m = Ye() === $.Mobile, p = d.formatMessage({
     id: "ds.layers.anchored-panel.close"
   }), h = t && e !== null;
   if (m)
     return /* @__PURE__ */ i(
-      Qe,
+      Xe,
       {
         open: h,
         onClose: n,
@@ -2017,7 +2037,7 @@ function gi({ children: e }) {
     },
     []
   );
-  const g = X(
+  const g = Q(
     (h) => new Promise((y) => {
       c.current += 1;
       const b = { id: c.current, options: h, resolve: y };
@@ -2050,8 +2070,8 @@ function pi() {
     );
   return e;
 }
-const Ko = 1, Yo = (e, t) => t === "vertical" ? e.scrollHeight - e.clientHeight - e.scrollTop : e.scrollWidth - e.clientWidth - e.scrollLeft, Qo = (e, t, n) => {
-  const [r, s] = I(!1), c = X(() => {
+const Ko = 1, Yo = (e, t) => t === "vertical" ? e.scrollHeight - e.clientHeight - e.scrollTop : e.scrollWidth - e.clientWidth - e.scrollLeft, Xo = (e, t, n) => {
+  const [r, s] = I(!1), c = Q(() => {
     const l = e.current;
     l !== null && s(Yo(l, t) > Ko);
   }, [e, t]);
@@ -2066,13 +2086,13 @@ const Ko = 1, Yo = (e, t) => t === "vertical" ? e.scrollHeight - e.clientHeight
     };
   }, [e, c, n]), r;
 };
-var Xo = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e))(Xo || {});
+var Qo = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e))(Qo || {});
 const Zo = 2, Jo = /* @__PURE__ */ new Set(["Enter", " "]), er = a("div", {
   shouldForwardProp: (e) => e !== "variant"
 })(({ theme: e, variant: t }) => ({
   minWidth: 0,
   ...t === "primary" && {
-    borderBottom: O(e.design.tokens["border.subtle"])
+    borderBottom: R(e.design.tokens["border.subtle"])
   }
 })), ft = 32, tr = a("div", {
   shouldForwardProp: (e) => e !== "variant" && e !== "fade"
@@ -2115,7 +2135,7 @@ const Zo = 2, Jo = /* @__PURE__ */ new Set(["Enter", " "]), er = a("div", {
     // Inside the scrolling row, an outer ring would be clipped: it is drawn inside the tab.
     "&:focus-visible": { ...te(e), outlineOffset: "-2px" }
   }, p = {
-    [N.down(F.Tablet)]: {
+    [B.down($.Tablet)]: {
       minHeight: o(d.touchTarget)
     }
   };
@@ -2158,7 +2178,7 @@ const Zo = 2, Jo = /* @__PURE__ */ new Set(["Enter", " "]), er = a("div", {
     alignItems: "center",
     padding: `0 ${o(n[1])}`,
     borderRadius: o(r.sm),
-    border: O(t["border.subtle"]),
+    border: R(t["border.subtle"]),
     fontFamily: s.mono,
     fontSize: o(c.caption),
     fontWeight: M.regular,
@@ -2176,7 +2196,7 @@ function fi({
   variant: r,
   "aria-label": s
 }) {
-  const c = z(), l = j(null), d = e.filter((f) => f.hidden !== !0), g = Qo(l, "horizontal", d.length), m = X(
+  const c = z(), l = j(null), d = e.filter((f) => f.hidden !== !0), g = Xo(l, "horizontal", d.length), m = Q(
     () => {
       var f;
       return Array.from(
@@ -2184,7 +2204,7 @@ function fi({
       );
     },
     []
-  ), p = X(() => {
+  ), p = Q(() => {
     const f = l.current, u = f == null ? void 0 : f.querySelector('[aria-selected="true"]');
     f && u && He(f, u);
   }, []);
@@ -2264,52 +2284,52 @@ function fi({
   ) });
 }
 export {
-  ui as A,
-  Qe as B,
+  Vo as A,
+  Xe as B,
   En as C,
-  F as D,
-  ro as E,
+  $ as D,
+  ui as E,
   Ze as F,
-  Y as G,
-  _o as H,
+  gi as G,
+  pi as H,
   io as I,
-  Vo as J,
+  fi as J,
   ti as K,
   ni as L,
-  Xe as M,
+  Qe as M,
   di as N,
   ut as O,
   oi as P,
   ri as Q,
-  ei as R,
-  li as S,
-  fi as T,
+  lo as R,
+  J as S,
+  Qo as T,
   ii as U,
   si as V,
   xe as a,
-  Je as b,
-  ai as c,
-  N as d,
-  Jr as e,
-  ci as f,
-  Xo as g,
-  O as h,
-  te as i,
-  oe as j,
-  Xr as k,
-  ln as l,
-  Po as m,
-  gi as n,
-  Ye as o,
+  dn as b,
+  oe as c,
+  B as d,
+  Je as e,
+  te as f,
+  Jr as g,
+  R as h,
+  Qr as i,
+  ln as j,
+  Xo as k,
+  ct as l,
+  ro as m,
+  ei as n,
+  Y as o,
   o as p,
-  J as q,
-  dn as r,
+  ai as q,
+  Zr as r,
   ge as s,
   Ke as t,
-  pi as u,
-  Zr as v,
+  Ye as u,
+  li as v,
   se as w,
-  Qo as x,
-  lo as y,
-  ct as z
+  ci as x,
+  Po as y,
+  _o as z
 };