@sableui/react 0.14.0 → 0.15.0

package/dist/components/like-button/like-button.meta.js

@@ -0,0 +1,132 @@
+// src/components/like-button/like-button.meta.ts
+var likeButtonMeta = {
+  name: "LikeButton",
+  summary: "A pressed-or-not toggle for a like, a star or a save, with its count. Pressing it on fills the glyph, which blooms while a ring and a spray of dots burst from it and the count rolls up; pressing it off is quiet.",
+  status: "stable",
+  keywords: [
+    "like",
+    "heart",
+    "favorite",
+    "favourite",
+    "love",
+    "star",
+    "bookmark",
+    "save",
+    "upvote",
+    "reaction",
+    "count",
+    "toggle"
+  ],
+  usage: {
+    description: "Use LikeButton for a personal, reversible endorsement that other people can see the tally of: liking a post, starring a repository, saving a recipe. It is the one place in Sable that celebrates, because the person chose it and it costs nothing to undo.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Pass the server's total as `count` and update it when the save lands. The button shows the viewer's own like at once, before the save, and goes back to `count` exactly whenever it changes, so a failed save that leaves `count` alone can also turn `pressed` back off."
+      },
+      {
+        guidance: "do",
+        description: 'Match the glyph, family and label to the meaning: `icon="star" tone="yellow" label="Star"` for a star. The label is the accessible name, so it must say what pressing does.'
+      },
+      {
+        guidance: "do",
+        description: 'Use `format={{ notation: "compact" }}` once counts pass a few thousand, so a feed of buttons keeps one width.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a setting or a view switch (bold, mute, grid or list). Those are tools, not endorsements, and a burst on every press of a formatting control is noise; use Toggle.",
+        instead: ["Toggle"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a rating or a verdict on an answer (helpful, not helpful). That is a question with two sides; use Feedback.",
+        instead: ["Feedback"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not press it for the user. A burst is a reply to a person's choice \u2014 liking something on their behalf, or on load, turns delight into a notification."
+      }
+    ]
+  },
+  related: {
+    components: ["Toggle", "Feedback", "NumberTicker", "Button"]
+  },
+  props: [
+    {
+      name: "count",
+      type: "number",
+      description: "The total, rolled when it changes. Pressing adds or removes the viewer's like at once; the button shows `count` exactly again whenever `count` changes. Omit it for a bare glyph (an icon-size button)."
+    },
+    { name: "pressed", type: "boolean", description: "Controlled pressed state." },
+    { name: "defaultPressed", type: "boolean", default: "false", description: "Initial pressed state when uncontrolled." },
+    {
+      name: "onPressedChange",
+      type: "(pressed: boolean, event) => void",
+      description: "Called when the user presses it, with the new state."
+    },
+    { name: "icon", type: "string", default: '"heart"', description: "The glyph, by icon name. Its `solid` variant is shown while pressed." },
+    {
+      name: "tone",
+      type: "PaletteColor",
+      default: '"red"',
+      description: "The palette family the glyph fills with while pressed, and the burst blooms from. A family, so it follows the theme."
+    },
+    { name: "label", type: "string", default: '"Like"', description: "The accessible name, read before the count." },
+    { name: "format", type: "Intl.NumberFormatOptions", description: 'How to write the count, e.g. `{ notation: "compact" }`.' },
+    { name: "variant", type: '"ghost" | "outline" | "secondary"', default: '"ghost"', description: "The Button surface." },
+    { name: "size", type: '"xs" | "sm" | "md"', default: '"sm"', description: "A Button size; without a count, the matching icon size." },
+    { name: "disabled", type: "boolean", default: "false", description: "Disables it." },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. The bloom and the burst are the flourish; the fill and the count changing stay."
+    }
+  ],
+  variants: {
+    variant: ["ghost", "outline", "secondary"],
+    size: ["xs", "sm", "md"],
+    tone: ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"]
+  },
+  tokensUsed: ["palette-dot", "accent", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the post or row it belongs to. A page that loads with likes already given must be still: nothing blooms on mount."
+    },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Glyph",
+      why: "Pressing it on is the moment. The glyph is 16px, so it needs real amplitude to read as an event: it grows from nothing past its size and settles, after a 90ms beat in which the ring leads. Inherits Button's motion-press for the press itself. Pressing off has no bloom \u2014 taking a like back is not a celebration."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Burst",
+      why: "The follow-through: <Burst> draws a disc that hollows into a ring and shifts colour, then dots thrown outward in the theme's palette families. Expressive only \u2014 under `subtle` or reduced motion it renders nothing and the fill alone answers the press. The count rolls with NumberTicker."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "There is no in-between state to show: the like is shown at once, before it is saved."
+    }
+  ],
+  a11y: [
+    "A native <button> through Button, with `aria-pressed`. Enter and Space press it.",
+    `The accessible name is the label then the count ("Like 1,301"); the burst is aria-hidden and the rolling digits are hidden behind the count's real text.`,
+    "The pressed state is carried by the filled glyph and `aria-pressed`, never by colour alone.",
+    "Under reduced motion the glyph fills and the count changes at once; the bloom and the burst are dropped."
+  ],
+  examples: [
+    { label: "A post's likes", code: "<LikeButton count={post.likes} defaultPressed={post.liked} onPressedChange={(on) => api.like(post.id, on)} />" },
+    { label: "Star a repository", code: '<LikeButton icon="star" tone="yellow" label="Star" variant="outline" count={repo.stars} format={{ notation: "compact" }} />' },
+    { label: "Bare glyph", code: '<LikeButton label="Save recipe" />' }
+  ]
+};
+export {
+  likeButtonMeta
+};

package/dist/components/reaction-picker/index.js

@@ -0,0 +1,13 @@
+// src/components/reaction-picker/index.ts
+import {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker
+} from "./reaction-picker.js";
+import { reactionPickerMeta } from "./reaction-picker.meta.js";
+export {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker,
+  reactionPickerMeta
+};

package/dist/components/reaction-picker/reaction-picker.js

@@ -0,0 +1,104 @@
+"use client";
+
+// src/components/reaction-picker/reaction-picker.tsx
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { Toolbar, ToolbarButton } from "../toolbar/toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_REACTIONS = [
+  { emoji: "\u{1F44D}", label: "Thumbs up" },
+  { emoji: "\u2764\uFE0F", label: "Heart" },
+  { emoji: "\u{1F602}", label: "Laughing" },
+  { emoji: "\u{1F389}", label: "Party" },
+  { emoji: "\u{1F62E}", label: "Surprised" },
+  { emoji: "\u{1F622}", label: "Sad" },
+  { emoji: "\u{1F64F}", label: "Thank you" }
+];
+var PRESSED = "aria-pressed:bg-primary/10 data-[checked]:bg-primary/10";
+var MENU_CELL = `group/reaction grid size-(--control-md) shrink-0 cursor-pointer select-none place-items-center rounded-full outline-none sable-surface-interactive motion-interactive motion-press ${PRESSED}`;
+function Glyph({ emoji, index }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "motion-bloom",
+      style: { "--motion-bloom-delay": `${index * 24}ms` },
+      children: /* @__PURE__ */ jsx("span", { className: "block text-[calc(var(--control-md)*0.6)] leading-none transition-[scale] duration-(--motion-duration-fast) ease-standard group-hover/reaction:scale-125 group-focus-visible/reaction:scale-125 group-data-[highlighted]/reaction:scale-125", children: emoji })
+    }
+  );
+}
+function ReactionPicker({
+  reactions = DEFAULT_REACTIONS,
+  selected = [],
+  onSelect,
+  motion,
+  className,
+  children,
+  "aria-label": ariaLabel = "Reactions",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      "aria-label": ariaLabel,
+      "data-motion": motionAttribute(motion),
+      className: cn("gap-0.5", className),
+      ...props,
+      children: [
+        reactions.map((reaction, index) => /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            size: "icon",
+            "aria-label": reaction.label,
+            "aria-pressed": selected.includes(reaction.emoji),
+            onClick: () => onSelect?.(reaction.emoji),
+            className: cn("group/reaction rounded-full", PRESSED),
+            children: /* @__PURE__ */ jsx(Glyph, { emoji: reaction.emoji, index })
+          },
+          reaction.emoji
+        )),
+        children
+      ]
+    }
+  );
+}
+ReactionPicker.displayName = "ReactionPicker";
+function MenuReactions({
+  reactions = DEFAULT_REACTIONS,
+  selected = [],
+  onSelect,
+  motion,
+  className,
+  "aria-label": ariaLabel = "Reactions",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseMenu.Group,
+    {
+      "aria-label": ariaLabel,
+      "data-motion": motionAttribute(motion),
+      className: cn("flex items-center gap-0.5", className),
+      ...props,
+      children: reactions.map((reaction, index) => /* @__PURE__ */ jsx(
+        BaseMenu.CheckboxItem,
+        {
+          label: reaction.label,
+          "aria-label": reaction.label,
+          checked: selected.includes(reaction.emoji),
+          onCheckedChange: () => onSelect?.(reaction.emoji),
+          closeOnClick: true,
+          className: MENU_CELL,
+          children: /* @__PURE__ */ jsx(Glyph, { emoji: reaction.emoji, index })
+        },
+        reaction.emoji
+      ))
+    }
+  );
+}
+MenuReactions.displayName = "MenuReactions";
+export {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker
+};

package/dist/components/reaction-picker/reaction-picker.meta.js

@@ -0,0 +1,156 @@
+// src/components/reaction-picker/reaction-picker.meta.ts
+var reactionPickerMeta = {
+  name: "ReactionPicker",
+  summary: "The quick row of emoji you react to a message with: a toolbar of large emoji toggles that bloom in one after another as it opens and magnify under the pointer, with MenuReactions as the same row inside a right-click menu.",
+  status: "stable",
+  keywords: [
+    "reaction",
+    "reactions",
+    "emoji",
+    "emoji picker",
+    "react",
+    "tapback",
+    "quick reactions",
+    "message actions",
+    "chat"
+  ],
+  usage: {
+    description: "Use ReactionPicker wherever a reader chooses a reaction for something: in a Popover from an add-reaction control (BubbleReactionAdd is that, ready-made), or as a hover bar over a message. Use MenuReactions for the same row as the first group of the menu a message opens on right-click or long-press, above Reply and Copy. Both report which emoji the reader has already used, so choosing one again removes it.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Keep the quick set short \u2014 six to eight. It is the reactions people actually use; a full emoji catalogue belongs behind a trailing "more" control passed as children.'
+      },
+      {
+        guidance: "do",
+        description: "Give every reaction a `label`. It is the accessible name and the menu's typeahead, and an emoji's own spoken name differs between platforms."
+      },
+      {
+        guidance: "do",
+        description: "Pass `selected` so the reader's own reactions show pressed, and toggle in `onSelect`: choosing a reaction you already gave takes it back."
+      },
+      {
+        guidance: "do",
+        description: "Offer the right-click menu and a visible add-reaction control together. A context menu is invisible until you know it is there; the pill is how a first-time reader finds reactions."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a ReactionPicker inside a Menu or ContextMenu. A toolbar is not a menu item, so the menu's arrow keys would skip it; use MenuReactions there.",
+        instead: ["MenuReactions"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it to rate an answer or collect a verdict. Reactions are social and many-valued; a helpful / not-helpful question is Feedback.",
+        instead: ["Feedback"]
+      }
+    ],
+    anatomy: [
+      {
+        name: "ReactionPicker",
+        required: true,
+        description: "The toolbar: one tab stop, arrow keys move between emoji, each a toggle with `aria-pressed`."
+      },
+      {
+        name: "MenuReactions",
+        required: false,
+        description: "The same row as a group of checkbox menu items, for MenuContent and ContextMenuContent. Choosing one closes the menu."
+      }
+    ]
+  },
+  related: {
+    components: ["Bubble", "ContextMenu", "Popover", "Toolbar", "Feedback"]
+  },
+  props: [
+    {
+      name: "reactions",
+      type: "readonly { emoji: string; label: string }[]",
+      default: "DEFAULT_REACTIONS",
+      description: "The choices, in order. The default is \u{1F44D} \u2764\uFE0F \u{1F602} \u{1F389} \u{1F62E} \u{1F622} \u{1F64F}."
+    },
+    {
+      name: "selected",
+      type: "readonly string[]",
+      default: "[]",
+      description: "The emoji the reader has already reacted with: shown pressed, and choosing one again removes it."
+    },
+    {
+      name: "onSelect",
+      type: "(emoji: string) => void",
+      description: "Called with the emoji the reader chose. Toggle it in or out of `selected`."
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "ReactionPicker only: trailing controls after the emoji, such as a button that opens a full emoji picker."
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      default: '"Reactions"',
+      description: "The name of the toolbar or menu group."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps the press and drops the wave of emoji blooming in and the magnify, `off` stills it. It can only turn motion down."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "MenuReactions",
+      type: "{ reactions?; selected?; onSelect?; motion? } & ComponentProps<typeof Menu.Group>",
+      description: "The quick row as checkbox menu items, for the first group of a MenuContent or ContextMenuContent. Same props as ReactionPicker, without children."
+    }
+  ],
+  tokensUsed: ["accent", "primary", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-bloom",
+      part: "Glyph",
+      why: "Opening the picker is the reader's own action, so the emoji answer it: each blooms in 24ms after the one before, a short wave from first to last. The surface it sits in (a Popover or a menu) arrives with its own motion-pop. Expressive only \u2014 under `subtle` the emoji are simply there."
+    },
+    {
+      slot: "response",
+      recipe: "custom",
+      part: "Glyph",
+      why: "The emoji under the pointer or the keyboard highlight magnifies to 1.25 on a fast standard ease, so you can see which one a release will choose; each cell also carries motion-interactive and motion-press. The magnify rides an inner layer so it never fights the bloom over `scale`."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Cell",
+      why: "Pressed and not pressed differ by a tint, eased by motion-interactive. The celebration belongs to the reaction that lands under the message (BubbleReaction), not to the picker that chose it."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Choosing is instant; there is no in-between state to show."
+    }
+  ],
+  a11y: [
+    "ReactionPicker is a Base UI toolbar: one tab stop, Left/Right move between emoji, Home/End jump to the ends.",
+    "Each emoji is a button named by its `label` and reporting `aria-pressed`, so a screen-reader user hears whether choosing it adds or removes their reaction. The glyph itself is aria-hidden.",
+    "MenuReactions renders checkbox menu items (`menuitemcheckbox` with `aria-checked`), reached by the menu's arrow keys and typeahead like every other row.",
+    "Under reduced motion the emoji appear at once and do not magnify; pressed state is carried by `aria-pressed` and a tint, never motion."
+  ],
+  examples: [
+    {
+      label: "In a popover",
+      code: '<Popover>\n	<PopoverTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Add reaction" />}>\n		<Icon name="emoji" />\n	</PopoverTrigger>\n	<PopoverContent side="top" className="w-auto rounded-full p-1">\n		<ReactionPicker selected={mine} onSelect={toggle} />\n	</PopoverContent>\n</Popover>'
+    },
+    {
+      label: "In a right-click menu",
+      code: "<ContextMenu>\n	<ContextMenuTrigger render={<Bubble />}>See you at 6.</ContextMenuTrigger>\n	<ContextMenuContent>\n		<MenuReactions selected={mine} onSelect={toggle} />\n		<ContextMenuSeparator />\n		<ContextMenuItem>Reply</ContextMenuItem>\n		<ContextMenuItem>Copy text</ContextMenuItem>\n	</ContextMenuContent>\n</ContextMenu>"
+    },
+    {
+      label: "A custom set",
+      code: '<ReactionPicker\n	reactions={[\n		{ emoji: "\u2705", label: "Done" },\n		{ emoji: "\u{1F440}", label: "Looking" },\n		{ emoji: "\u{1F680}", label: "Shipped" },\n	]}\n	selected={mine}\n	onSelect={toggle}\n/>'
+    }
+  ]
+};
+export {
+  reactionPickerMeta
+};

package/dist/components/toast/toast.js

@@ -5,6 +5,7 @@ import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../button/button.js";
 import { hitTargetMin } from "../../lib/hit-target.js";
+import { STATUS_TONE_ICON } from "../../lib/status-tone.js";
 import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
 import { Spinner } from "../spinner/spinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -51,7 +52,11 @@ var STACKED_ROOT = [
   // steps down to shadow-md and the cards behind to shadow-sm; fanned out,
   // each is a toast again and takes the full step back.
   "not-data-expanded:shadow-md not-data-expanded:has-[>[data-behind]]:shadow-sm",
-  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-emphasized"
+  // The deck springs: cards stepping back and fanning out overshoot a touch
+  // and settle, which is what makes them read as cards rather than rows. A
+  // leaving toast takes the standard curve (nothing overshoots on its way
+  // out), and under "subtle" the spring is a plain decelerate.
+  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-spring data-ending-style:ease-standard"
 ].join(" ");
 var STACKED_EDGE = {
   top: "top-0 origin-top [--toast-dir:1] after:top-full",
@@ -204,11 +209,11 @@ function ToastProvider({
     )
   ] });
 }
-var TYPE_ACCENT = {
-  success: "bg-success",
-  error: "bg-destructive",
-  warning: "bg-tone-warning",
-  info: "bg-tone-info"
+var TYPE_TONE = {
+  success: "success",
+  error: "destructive",
+  warning: "warning",
+  info: "info"
 };
 function ToastList({
   closeIcon,
@@ -218,7 +223,8 @@ function ToastList({
 }) {
   const { toasts } = useToast();
   return /* @__PURE__ */ jsx(ToastViewport, { position, stacked, className: viewportClassName, children: toasts.map((item) => {
-    const accent = item.type ? TYPE_ACCENT[item.type] : void 0;
+    const tone = item.type ? TYPE_TONE[item.type] : void 0;
+    const status = tone ? STATUS_TONE_ICON[tone] : void 0;
     return /* @__PURE__ */ jsx(ToastRoot, { toast: item, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
       item.type === "loading" ? /* @__PURE__ */ jsx(
         Spinner,
@@ -226,12 +232,18 @@ function ToastList({
           "aria-hidden": true,
           className: "mt-0.5 size-4 shrink-0 text-muted-foreground"
         }
-      ) : accent ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn("w-1 shrink-0 self-stretch rounded-full", accent)
-        }
+      ) : status ? (
+        // Blooms in once the card has landed, and again when a
+        // loading toast settles into success or failure: the
+        // glyph mounts in the spinner's place.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "mt-0.5 flex shrink-0 motion-bloom [--motion-bloom-delay:120ms]",
+            children: /* @__PURE__ */ jsx(Icon, { name: status.name, className: cn("text-base", status.className) })
+          }
+        )
       ) : null,
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
         item.title ? /* @__PURE__ */ jsx(ToastTitle, { children: item.title }) : null,

package/dist/components/toast/toast.meta.js

@@ -136,7 +136,7 @@ var toastMeta = {
       name: "type (toast option)",
       type: '"success" | "error" | "warning" | "info" | "loading"',
       default: "\u2014",
-      description: "Set by the toast.* helpers. Drives a semantic left accent (success\u2192success, error\u2192destructive, warning\u2192tone-warning, info\u2192tone-info); loading shows a spinner. Both loading and error persist until updated or dismissed unless the call supplies a timeout."
+      description: "Set by the toast.* helpers. Drives a leading status glyph from the shared tone list, the same one Note and InlineStatus use (success\u2192success, error\u2192destructive, warning\u2192warning, info\u2192info), which blooms in as the toast lands; loading shows a spinner, and the glyph blooms in its place when the toast settles. Both loading and error persist until updated or dismissed unless the call supplies a timeout."
     }
   ],
   subcomponents: [
@@ -211,6 +211,12 @@ var toastMeta = {
       part: "ToastRoot (stacked)",
       why: "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
     },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Status glyph",
+      why: "The glyph is what says how it went, so it lands as its own beat: it blooms in 120ms after the card, and blooms again in the spinner's place when a loading toast settles. A 16px glyph needs that amplitude to read as an answer; the card itself only slides."
+    },
     {
       slot: "activity",
       recipe: "none",

package/dist/file-hashes.json

@@ -26,8 +26,8 @@
 	"dist/blocks/goal-progress-block.meta.js": "3e5b376bf58bdb4b",
 	"dist/blocks/hero-block.js": "ac74e80d4d7d2ad9",
 	"dist/blocks/hero-block.meta.js": "2dd2e5be2472a563",
-	"dist/blocks/index.d.ts": "fda75038fa2d1c93",
-	"dist/blocks/index.js": "43a8a19794e270e9",
+	"dist/blocks/index.d.ts": "940238f0164f6d03",
+	"dist/blocks/index.js": "690417c222dc4d2a",
 	"dist/blocks/invite-team-block.js": "be4df15518252535",
 	"dist/blocks/invite-team-block.meta.js": "fd57b632f0f32276",
 	"dist/blocks/invoice-history-block.js": "2befa5b9c6721d71",
@@ -36,6 +36,8 @@
 	"dist/blocks/kpi-sparkline-block.meta.js": "e72d7bd8f2b8c375",
 	"dist/blocks/media-player-block.js": "ac5091114576e539",
 	"dist/blocks/media-player-block.meta.js": "dd217cd0e93d9f5e",
+	"dist/blocks/message-reactions-block.js": "3ca1f91d9f53556e",
+	"dist/blocks/message-reactions-block.meta.js": "152314a67b45ade2",
 	"dist/blocks/newsletter-block.js": "047e5f22fcd3e5e3",
 	"dist/blocks/newsletter-block.meta.js": "2d9b133a96882482",
 	"dist/blocks/not-found-block.js": "bcc1f6b3c908777e",
@@ -126,10 +128,10 @@
 	"dist/components/browser/browser.js": "5d81502731837d2a",
 	"dist/components/browser/browser.meta.js": "c9307e7dbe925bf8",
 	"dist/components/browser/index.js": "b15737bb72715f84",
-	"dist/components/bubble/bubble.js": "ce376f493aba5386",
-	"dist/components/bubble/bubble.meta.js": "2202d4226cf79eb6",
-	"dist/components/bubble/bubble.variants.js": "b1eefabd9f0bb425",
-	"dist/components/bubble/index.js": "dfdc5326d5050d12",
+	"dist/components/bubble/bubble.js": "59ca0e8ad01a481e",
+	"dist/components/bubble/bubble.meta.js": "69844a1e162679d0",
+	"dist/components/bubble/bubble.variants.js": "b5a50a9aee4ff17a",
+	"dist/components/bubble/index.js": "a45688c4023078b9",
 	"dist/components/button/button.js": "323b7f7e0cc3c6ab",
 	"dist/components/button/button.meta.js": "36d463ef6c205894",
 	"dist/components/button/button.variants.js": "137c201e0c01b56f",
@@ -216,8 +218,8 @@
 	"dist/components/entity/entity.meta.js": "2164fb36ab4d3962",
 	"dist/components/entity/entity.variants.js": "8838fb5cf6f304f1",
 	"dist/components/entity/index.js": "1397602aa7068da8",
-	"dist/components/feedback/feedback.js": "2687951f7ce437b0",
-	"dist/components/feedback/feedback.meta.js": "b11ec4b23da2a76a",
+	"dist/components/feedback/feedback.js": "6fe0ae8a638da70b",
+	"dist/components/feedback/feedback.meta.js": "6fd9f9b2c942bf09",
 	"dist/components/feedback/index.js": "fd1ab40c9d879286",
 	"dist/components/fieldset/fieldset.js": "08d02302b6866f8e",
 	"dist/components/fieldset/fieldset.meta.js": "64be6d633de27e04",
@@ -255,6 +257,9 @@
 	"dist/components/label/index.js": "413f64adef955fe5",
 	"dist/components/label/label.js": "51214a76795f6a51",
 	"dist/components/label/label.meta.js": "82a347c3c9dd2165",
+	"dist/components/like-button/index.js": "40539483ab512af5",
+	"dist/components/like-button/like-button.js": "d0fde69ec74a8b65",
+	"dist/components/like-button/like-button.meta.js": "0b4bd1cae3f7acf7",
 	"dist/components/line-chart/index.js": "6d7a54c8e9433fb1",
 	"dist/components/line-chart/line-chart.js": "217cf598be16698c",
 	"dist/components/line-chart/line-chart.meta.js": "debad75d571435f7",
@@ -361,6 +366,9 @@
 	"dist/components/radio-card/radio-card.js": "29c459d88339f035",
 	"dist/components/radio-card/radio-card.meta.js": "4b5ff5a38c6b8915",
 	"dist/components/radio-card/radio-card.variants.js": "e67661edc33062fb",
+	"dist/components/reaction-picker/index.js": "417147b602d14e9d",
+	"dist/components/reaction-picker/reaction-picker.js": "9eb295fdaf434742",
+	"dist/components/reaction-picker/reaction-picker.meta.js": "629b54a65d184975",
 	"dist/components/relative-time/index.js": "02e9b7b91ccad470",
 	"dist/components/relative-time/relative-time.js": "db5cd286b36dee74",
 	"dist/components/relative-time/relative-time.meta.js": "472cb014dc9b39fb",
@@ -453,8 +461,8 @@
 	"dist/components/thinking-orb/thinking-orb.meta.js": "d614e8ebfded8710",
 	"dist/components/thinking-orb/thinking-orb.render.js": "1d561ac1ffcd1e97",
 	"dist/components/toast/index.js": "d13be0a6c335931d",
-	"dist/components/toast/toast.js": "f58c5e39eb3158a3",
-	"dist/components/toast/toast.meta.js": "324b2b0897dd08dc",
+	"dist/components/toast/toast.js": "6cc9beed93790af0",
+	"dist/components/toast/toast.meta.js": "1d444a25b34a7078",
 	"dist/components/toggle/index.js": "84a0a4bf596a1b7d",
 	"dist/components/toggle/toggle.js": "bf9d610b6d07ec88",
 	"dist/components/toggle/toggle.meta.js": "096b129f56b46e05",
@@ -481,7 +489,7 @@
 	"dist/foundations/accessibility.js": "e09d6f4063e58fd1",
 	"dist/foundations/index.d.ts": "34f9553827230412",
 	"dist/foundations/index.js": "37e83ca8063a4282",
-	"dist/foundations/motion.js": "ac0d9fe8bbe79332",
+	"dist/foundations/motion.js": "618ddec729326caf",
 	"dist/foundations/scrolling.js": "a5a537256ff04379",
 	"dist/foundations/shape.js": "d2cb3117f28d5063",
 	"dist/foundations/spacing.js": "49fd401256835447",
@@ -498,9 +506,9 @@
 	"dist/icon-sets/brands.generated.js": "901e198df0563b0b",
 	"dist/icon-sets/brands.js": "9a37d8739f14f2a9",
 	"dist/icon-sets/reicon.d.ts": "52f6e41dc8137b4e",
-	"dist/icon-sets/reicon.js": "9ec7d3b714c57172",
-	"dist/index.d.ts": "4443252f0e702af7",
-	"dist/index.js": "278fa3a3494c294a",
+	"dist/icon-sets/reicon.js": "0f73074baac9b866",
+	"dist/index.d.ts": "bab442001128fe64",
+	"dist/index.js": "5d23113769c924de",
 	"dist/ios/chrome.css": "a7ca9e3735d8658e",
 	"dist/ios/chrome.js": "37091fef7b68bd28",
 	"dist/ios/frame.css": "dd2703c944ce575a",
@@ -565,7 +573,7 @@
 	"dist/lib/segmented.js": "43c21955f7f3ae33",
 	"dist/lib/selection-card.js": "43c49c8c51dde54c",
 	"dist/lib/status-tone.js": "61f0a8bb4fb9c7d6",
-	"dist/lib/taxonomy.js": "3ccd56ce7c8a5b5c",
+	"dist/lib/taxonomy.js": "4ecb616f502009c0",
 	"dist/lib/trim-label.js": "9998d45e03c95515",
 	"dist/lib/use-caret-trigger.js": "85839ca42e5540de",
 	"dist/lib/use-copy.js": "5cf22621e4d5e83b",
@@ -575,11 +583,12 @@
 	"dist/lib/use-scroll-activity.js": "793394a8c952e697",
 	"dist/lib/use-smooth-wheel.js": "9fd10f864eb40325",
 	"dist/meta-DX5r5wQL.d.ts": "b15f63123088709a",
+	"dist/motion/Burst.js": "cede90200e958908",
 	"dist/motion/MotionProvider.js": "624f5502828e7fd0",
 	"dist/motion/Presence.js": "21fc6f1c68207718",
 	"dist/motion/Reveal.js": "b42ceeee28320405",
 	"dist/motion/TextReveal.js": "ca61c6ae64917246",
-	"dist/motion/index.js": "298aa8bb325b3a08",
+	"dist/motion/index.js": "a638b7e0517ec687",
 	"dist/motion/useAutoSize.js": "b4b06290e1263c95",
 	"dist/motion/useInView.js": "6136ad61107db838",
 	"dist/motion/useReducedMotion.js": "ae7c093aac26e254",
@@ -607,7 +616,7 @@
 	"dist/presets/index.d.ts": "605f8edf5746ab3e",
 	"dist/presets/index.js": "a911222560939d60",
 	"dist/registry-CyL28OzJ.d.ts": "b068fc89571517d8",
-	"dist/styles.css": "85cae868f62ae3b4",
+	"dist/styles.css": "32bbb6860ff85c46",
 	"dist/theme-provider-CdSicAad.d.ts": "a37d38f7e3c64d31",
 	"dist/themes/_contract.js": "bc864a86d4cdbe1c",
 	"dist/themes/atelier/atelier.css": "cf7630ead6409242",