@cakejp/design-system 0.16.0 → 0.17.1

package/dist/components/primitives/section-header.js

@@ -0,0 +1,148 @@
+import { jsxs as a, jsx as e, Fragment as z } from "react/jsx-runtime";
+import "react";
+import B from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import L from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as i } from "../../lib/utils.js";
+import { Button as b } from "../foundations/button.js";
+const M = {
+  "3xl": "h1",
+  "2xl": "h2",
+  xl: "h3",
+  lg: "h4",
+  md: "h5",
+  sm: "h6"
+}, S = {
+  "3xl": "typo-heading-3xl",
+  "2xl": "typo-heading-2xl",
+  xl: "typo-heading-xl",
+  lg: "typo-heading-lg",
+  md: "typo-heading-md",
+  sm: "typo-heading-sm"
+}, F = {
+  "5xl": "@md:typo-heading-5xl",
+  "4xl": "@md:typo-heading-4xl"
+};
+function D({
+  className: d,
+  title: N,
+  subtitle: c,
+  moreHref: t,
+  moreLabel: o = "もっと見る",
+  onMoreClick: h,
+  action: m,
+  onPrev: x,
+  onNext: p,
+  prevDisabled: w = !1,
+  nextDisabled: C = !1,
+  size: s = "lg",
+  desktopSize: g,
+  as: T,
+  align: k = "start",
+  eyebrow: f,
+  ...y
+}) {
+  const j = T ?? M[s], A = ["3xl", "2xl", "xl", "lg"].includes(s), u = x || p, v = t || h, l = k === "center", E = !!t && !l, n = (v || m || u) && /* @__PURE__ */ a("div", { className: i("flex shrink-0 items-center gap-2", l && "justify-center"), children: [
+    v && (t ? /* @__PURE__ */ e(
+      "a",
+      {
+        href: t,
+        className: "typo-label-lg text-[var(--Text-Accent-Primary)] whitespace-nowrap",
+        tabIndex: l ? void 0 : -1,
+        "aria-hidden": l ? void 0 : "true",
+        children: o
+      }
+    ) : /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: h,
+        className: "typo-label-lg text-[var(--Text-Accent-Primary)] whitespace-nowrap",
+        children: o
+      }
+    )),
+    m,
+    u && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(
+        b,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "前へ",
+          onClick: x,
+          disabled: w,
+          className: "rounded-full border border-[var(--Border-Medium-Emphasis)]",
+          children: /* @__PURE__ */ e(B, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ e(
+        b,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "次へ",
+          onClick: p,
+          disabled: C,
+          className: "rounded-full border border-[var(--Border-Medium-Emphasis)]",
+          children: /* @__PURE__ */ e(L, { size: 16 })
+        }
+      )
+    ] })
+  ] }), r = /* @__PURE__ */ a(z, { children: [
+    /* @__PURE__ */ e(
+      j,
+      {
+        className: i(
+          "text-[var(--Text-High-Emphasis)]",
+          S[s],
+          g && F[g]
+        ),
+        children: N
+      }
+    ),
+    c && /* @__PURE__ */ e(
+      "p",
+      {
+        className: i(
+          "text-[var(--Text-High-Emphasis)]",
+          A ? "typo-body-lg" : "typo-body-md"
+        ),
+        children: c
+      }
+    )
+  ] });
+  return l ? /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "section-header",
+      "data-align": "center",
+      className: i(
+        "flex flex-col items-center gap-2 text-center [&>p]:mx-auto [&>p]:max-w-2xl",
+        d
+      ),
+      ...y,
+      children: [
+        f,
+        r,
+        n && /* @__PURE__ */ e("div", { className: "pt-1", children: n })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "section-header",
+      "data-align": "start",
+      className: i("flex flex-col gap-2", d),
+      ...y,
+      children: [
+        f,
+        /* @__PURE__ */ a("div", { className: "flex items-baseline justify-between gap-2 min-w-0", children: [
+          E ? /* @__PURE__ */ e("a", { href: t, className: "flex min-w-0 flex-1 flex-col gap-1", children: r }) : /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: r }),
+          n
+        ] })
+      ]
+    }
+  );
+}
+export {
+  D as SectionHeader
+};

package/dist/components/primitives/section-nav.js

@@ -0,0 +1,85 @@
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import "react";
+import { cn as t } from "../../lib/utils.js";
+function m({
+  items: n,
+  activeKey: i,
+  orientation: p = "vertical",
+  ariaLabel: o = "ページ内セクション",
+  onItemClick: s,
+  className: c,
+  ...l
+}) {
+  return p === "horizontal" ? /* @__PURE__ */ a(
+    "nav",
+    {
+      "data-slot": "section-nav",
+      "data-orientation": "horizontal",
+      className: t("w-full overflow-x-auto", c),
+      "aria-label": o,
+      ...l,
+      children: /* @__PURE__ */ a("ul", { className: "flex items-stretch gap-1 px-4", children: n.map((r) => {
+        const e = r.key === i;
+        return /* @__PURE__ */ a("li", { className: "shrink-0", children: /* @__PURE__ */ h(
+          "a",
+          {
+            href: r.href,
+            onClick: () => s?.(r.key),
+            className: t(
+              "flex items-center gap-2 border-b-2 px-3 py-3 typo-label-md whitespace-nowrap transition-colors cursor-pointer",
+              e ? "border-[var(--Brand-Cake-Orange)] text-[var(--Text-High-Emphasis)]" : "border-transparent text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
+            ),
+            "aria-current": e ? "location" : void 0,
+            children: [
+              r.icon && /* @__PURE__ */ a(
+                "span",
+                {
+                  className: e ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Object-High-Emphasis)]",
+                  children: r.icon
+                }
+              ),
+              /* @__PURE__ */ a("span", { children: r.label })
+            ]
+          }
+        ) }, r.key);
+      }) })
+    }
+  ) : /* @__PURE__ */ a(
+    "nav",
+    {
+      "data-slot": "section-nav",
+      "data-orientation": "vertical",
+      className: t("w-full", c),
+      "aria-label": o,
+      ...l,
+      children: /* @__PURE__ */ a("ul", { className: "py-2", children: n.map((r) => {
+        const e = r.key === i;
+        return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ h(
+          "a",
+          {
+            href: r.href,
+            onClick: () => s?.(r.key),
+            className: t(
+              "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors cursor-pointer",
+              e ? "border-l-2 border-[var(--Brand-Cake-Orange)] text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)] pl-3.5" : "border-l-2 border-transparent text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Secondary)] hover:text-[var(--Text-High-Emphasis)]"
+            ),
+            "aria-current": e ? "location" : void 0,
+            children: [
+              r.icon && /* @__PURE__ */ a(
+                "span",
+                {
+                  className: e ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Object-High-Emphasis)]",
+                  children: r.icon
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: "flex-1", children: r.label })
+            ]
+          }
+        ) }, r.key);
+      }) })
+    }
+  );
+}
+export {
+  m as SectionNav
+};

package/dist/components/primitives/section.js

@@ -0,0 +1,78 @@
+import { jsx as s } from "react/jsx-runtime";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { cn as f } from "../../lib/utils.js";
+const v = t("w-full", {
+  variants: {
+    // 縦 padding（上下）。値は SP / PC（md 以上）のペア。
+    spacing: {
+      sm: "py-[var(--Space-Section-xs)] md:py-[var(--Space-Section-sm)]",
+      // 32 / 40
+      md: "py-[var(--Space-Section-sm)] md:py-[var(--Space-Section-lg)]",
+      // 40 / 56
+      lg: "py-[var(--Space-Section-md)] md:py-[var(--Space-Section-xl)]",
+      // 48 / 64
+      xl: "py-[var(--Space-Section-xl)] md:py-[var(--Space-Section-2xl)]"
+      // 64 / 80
+    },
+    // 色地は配下 Card の既定サーフェスを白（Surface-Primary）に切り替える文脈も宣言する。
+    // dark では Surface-Secondary が「地の上に重ねる半透明白」なので、色地の上でも
+    // 一段明るく浮く（＝沈まない）。ここで Surface-Primary（ほぼ不透明の黒）を強制すると
+    // 逆に地より暗い「穴」になり elevation が反転するため、dark は既定のまま据え置く。
+    // none は文脈を宣言しない（外側の色地 Section から継いだ文脈をリセットしない）。
+    background: {
+      none: "",
+      subtle: "bg-[var(--Surface-Tertiary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+      "accent-subtle": "bg-[var(--Surface-Accent-Primary-Light)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    background: "none"
+  }
+}), b = t("", {
+  variants: {
+    scrim: {
+      none: "",
+      dark: "relative isolate overflow-hidden bg-cover bg-center before:pointer-events-none before:absolute before:inset-0 before:z-0 before:bg-[var(--Surface-Overlay-Dark)] [&>*]:relative [&>*]:z-10",
+      light: "relative isolate overflow-hidden bg-cover bg-center before:pointer-events-none before:absolute before:inset-0 before:z-0 before:bg-[var(--Surface-Overlay-Light)] [&>*]:relative [&>*]:z-10",
+      "bottom-dark": "relative isolate overflow-hidden bg-cover bg-center before:pointer-events-none before:absolute before:inset-0 before:z-0 before:bg-[linear-gradient(to_top,var(--Surface-Overlay-Dark),transparent_75%)] [&>*]:relative [&>*]:z-10"
+    }
+  },
+  defaultVariants: {
+    scrim: "none"
+  }
+});
+function u({
+  className: n,
+  spacing: c,
+  background: e,
+  backgroundImage: r,
+  scrim: a,
+  style: o,
+  ...i
+}) {
+  return /* @__PURE__ */ s(
+    "section",
+    {
+      "data-slot": "section",
+      "data-background": e ?? "none",
+      "data-scrim": a ?? "none",
+      className: f(
+        v({ spacing: c, background: e }),
+        b({ scrim: a }),
+        n
+      ),
+      style: {
+        ...o,
+        backgroundImage: r ? `url(${JSON.stringify(r)})` : o?.backgroundImage
+      },
+      ...i
+    }
+  );
+}
+export {
+  u as Section,
+  b as sectionScrimVariants,
+  v as sectionVariants
+};

package/dist/components/primitives/share-buttons.js

@@ -0,0 +1,102 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as n from "react";
+import g from "iconsax-reactjs/dist/esm/Link2.js";
+import { cn as N } from "../../lib/utils.js";
+import { Button as i } from "../foundations/button.js";
+import { SocialIcon as c } from "../foundations/social-icon.js";
+function L({
+  className: m,
+  url: r = "",
+  text: p = "",
+  copyLabel: d = "URLをコピー",
+  copiedLabel: u = "コピーしました",
+  copyErrorLabel: f = "コピーできませんでした",
+  onCopy: h,
+  ...y
+}) {
+  const [s, l] = n.useState(
+    "idle"
+  ), t = n.useRef(null);
+  n.useEffect(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []);
+  const b = async () => {
+    let a = "error";
+    try {
+      r && navigator.clipboard && (await navigator.clipboard.writeText(r), a = "success");
+    } catch {
+      a = "error";
+    }
+    l(a), h?.(a), t.current && clearTimeout(t.current), t.current = setTimeout(() => l("idle"), 2e3);
+  }, x = s === "success" ? u : s === "error" ? f : d;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "share-buttons",
+      className: N("flex items-center gap-2", m),
+      ...y,
+      children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "tertiary",
+            size: "sm",
+            className: "flex-1 gap-1.5",
+            asChild: !0,
+            children: /* @__PURE__ */ o(
+              "a",
+              {
+                href: `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(r)}`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "LINEでシェア",
+                children: [
+                  /* @__PURE__ */ e(c, { platform: "line", size: 16 }),
+                  /* @__PURE__ */ e("span", { className: "typo-body-sm", children: "LINE" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "tertiary",
+            size: "sm",
+            className: "flex-1 gap-1.5",
+            asChild: !0,
+            children: /* @__PURE__ */ o(
+              "a",
+              {
+                href: `https://twitter.com/intent/tweet?url=${encodeURIComponent(r)}&text=${encodeURIComponent(p)}`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Xでシェア",
+                children: [
+                  /* @__PURE__ */ e(c, { platform: "x", size: 14, tone: "mono" }),
+                  /* @__PURE__ */ e("span", { className: "typo-body-sm", children: "X" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          i,
+          {
+            variant: "tertiary",
+            size: "sm",
+            className: "flex-1 gap-1.5",
+            onClick: b,
+            children: [
+              /* @__PURE__ */ e(g, { size: 14, "aria-hidden": "true" }),
+              /* @__PURE__ */ e("span", { className: "typo-body-sm", "aria-live": "polite", children: x })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  L as ShareButtons
+};

package/dist/components/primitives/side-nav.js

@@ -0,0 +1,98 @@
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import "react";
+import x from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as u } from "../../lib/utils.js";
+import { Separator as b } from "../foundations/separator.js";
+function g(r) {
+  const s = `/iframe.html?id=${encodeURIComponent(r)}&viewMode=story`;
+  window.location.href = s;
+}
+function f(r) {
+  return r.length > 1 ? r.replace(/\/+$/, "") : r;
+}
+function S(r, s) {
+  const { activeMenu: m, currentPath: h, activeMatch: o, isActive: p } = s, c = r.flatMap((t) => t.items);
+  if (p)
+    return new Set(c.filter(p).map((t) => t.key));
+  if (h != null) {
+    const t = f(h);
+    if (o === "prefix") {
+      let a, i = -1;
+      for (const l of c) {
+        const e = f(l.href);
+        (t === e || t.startsWith(e + "/")) && e.length > i && (a = l.key, i = e.length);
+      }
+      return new Set(a ? [a] : []);
+    }
+    return new Set(
+      c.filter((a) => f(a.href) === t).map((a) => a.key)
+    );
+  }
+  return new Set(m != null ? [m] : []);
+}
+function E({
+  activeMenu: r,
+  currentPath: s,
+  activeMatch: m = "exact",
+  isActive: h,
+  groups: o,
+  ariaLabel: p = "サイドメニュー",
+  className: c,
+  ...t
+}) {
+  const a = S(o, {
+    activeMenu: r,
+    currentPath: s,
+    activeMatch: m,
+    isActive: h
+  });
+  return /* @__PURE__ */ n(
+    "nav",
+    {
+      "data-slot": "side-nav",
+      className: u(
+        "w-64 shrink-0 bg-[var(--Surface-Primary)] border-r border-[var(--Border-Low-Emphasis)]",
+        c
+      ),
+      "aria-label": p,
+      ...t,
+      children: /* @__PURE__ */ n("div", { className: "py-4", children: o.map((i, l) => /* @__PURE__ */ v("div", { className: "mb-1", children: [
+        i.groupLabel && /* @__PURE__ */ n("p", { className: "px-4 py-2 typo-label-xs text-[var(--Text-Low-Emphasis)] uppercase", children: i.groupLabel }),
+        /* @__PURE__ */ n("ul", { children: i.items.map((e) => {
+          const d = a.has(e.key);
+          return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ v(
+            "a",
+            {
+              href: e.href,
+              onClick: (y) => {
+                e.storyId && (y.preventDefault(), g(e.storyId));
+              },
+              className: u(
+                // hover はモーショントークン参照（prefers-reduced-motion で自動停止する）。
+                // 素の transition-colors は Tailwind 既定値でトークン制御が効かない（#201）
+                "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] cursor-pointer",
+                d ? "border-l-2 border-[var(--Brand-Cake-Orange)] text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)] pl-3.5" : "text-[var(--Text-High-Emphasis)] border-l-2 border-transparent"
+              ),
+              "aria-current": d ? "page" : void 0,
+              children: [
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: d ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Object-High-Emphasis)]",
+                    children: e.icon
+                  }
+                ),
+                /* @__PURE__ */ n("span", { className: "flex-1", children: e.label }),
+                /* @__PURE__ */ n(x, { size: 14, className: "text-[var(--Object-Low-Emphasis)]" })
+              ]
+            }
+          ) }, e.key);
+        }) }),
+        l < o.length - 1 && /* @__PURE__ */ n(b, { className: "my-2 mx-4" })
+      ] }, l)) })
+    }
+  );
+}
+export {
+  E as SideNav
+};

package/dist/components/primitives/social-login-button.js

@@ -0,0 +1,53 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as p } from "../../lib/utils.js";
+import { Button as h } from "../foundations/button.js";
+import { SocialIcon as v } from "../foundations/social-icon.js";
+const o = {
+  line: "LINEでログイン",
+  amazon: "Amazonでログイン",
+  google: "Googleでログイン",
+  apple: "Appleでログイン"
+}, s = {
+  line: "border-[var(--Third-Party-LINE)] bg-[var(--Third-Party-LINE)] text-[var(--Primitive-White-alpha-1000)]",
+  amazon: "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] dark:border-[var(--Primitive-White-alpha-200)] dark:bg-[var(--Primitive-White-alpha-100)]",
+  google: "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] dark:border-[var(--Primitive-White-alpha-200)] dark:bg-[var(--Primitive-White-alpha-100)]",
+  apple: "border-[var(--Primitive-Gray-alpha-900)] bg-[var(--Primitive-Gray-alpha-900)] text-[var(--Primitive-White-alpha-1000)] dark:border-[var(--Primitive-White-alpha-200)] dark:bg-[var(--Primitive-White-alpha-200)]"
+}, d = {
+  line: "mono",
+  apple: "mono",
+  amazon: "brand",
+  google: "brand"
+};
+function u({
+  provider: a,
+  size: t = "default",
+  label: i,
+  className: l,
+  ...m
+}) {
+  const r = t === "icon";
+  return /* @__PURE__ */ n(
+    h,
+    {
+      type: "button",
+      variant: "tertiary",
+      size: r ? "default" : "lg",
+      "aria-label": r ? i ?? o[a] : void 0,
+      className: p(
+        "border border-[var(--Border-Medium-Emphasis)] hover:opacity-90",
+        r ? "size-12 p-0" : "w-full gap-3",
+        s[a],
+        l
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ e(v, { platform: a, size: 24, tone: d[a] }),
+        !r && /* @__PURE__ */ e("span", { children: i ?? o[a] })
+      ]
+    }
+  );
+}
+export {
+  u as SocialLoginButton
+};

package/dist/components/primitives/standard-page-shell.js

@@ -0,0 +1,34 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as n } from "../../lib/utils.js";
+import { SkipLink as c } from "../foundations/skip-link.js";
+function x({
+  header: i,
+  bottomTab: r,
+  footer: l,
+  children: t,
+  className: m,
+  mainId: a = "main-content",
+  skipLink: o
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "standard-page-shell",
+      className: n(
+        "@container flex min-h-dvh flex-col bg-[var(--Surface-Primary)]",
+        m
+      ),
+      children: [
+        o !== !1 && /* @__PURE__ */ e(c, { href: `#${a}` }),
+        i,
+        /* @__PURE__ */ e("main", { id: a, className: n("@container flex-1", r && "pb-20 @md:pb-0"), children: t }),
+        l,
+        r
+      ]
+    }
+  );
+}
+export {
+  x as StandardPageShell
+};

package/dist/components/primitives/status-count-tabs.js

@@ -0,0 +1,42 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as f } from "../../lib/utils.js";
+import { Chip as m } from "./chip.js";
+function h({
+  items: c,
+  activeIndex: o = 0,
+  onSelect: n,
+  className: u
+}) {
+  const [e, s] = r.useState(o);
+  r.useEffect(() => {
+    s(o);
+  }, [o]);
+  const i = (t) => {
+    s(t), n?.(t);
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "status-count-tabs",
+      className: f("flex gap-2 overflow-x-auto scrollbar-hide", u),
+      role: "tablist",
+      children: c.map((t, a) => /* @__PURE__ */ l(
+        m,
+        {
+          selected: e === a,
+          count: t.count,
+          size: "sm",
+          onClick: () => i(a),
+          role: "tab",
+          "aria-selected": e === a,
+          children: t.label
+        },
+        t.label
+      ))
+    }
+  );
+}
+export {
+  h as StatusCountTabs
+};

package/dist/components/primitives/sticky-action-bar.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as i } from "../../lib/utils.js";
+function n({
+  className: r,
+  bordered: t = !0,
+  children: a,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "sticky-action-bar",
+      className: i(
+        "sticky bottom-0 z-[var(--Z-Nav)] bg-[var(--Surface-Primary)] px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+        t && "border-t border-[var(--Border-Low-Emphasis)]",
+        r
+      ),
+      ...o,
+      children: a
+    }
+  );
+}
+export {
+  n as StickyActionBar
+};