@snacky/ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -4,6 +4,83 @@ How `@snacky/ui` got to its current state. The README documents what the
 package *is*; this documents how it got there, including the mistakes, so the
 verification claims in the README can be taken at face value.
 
+## Brand ramp renamed to amber, components re-checked against Figma (0.10.0)
+
+**Breaking: the brand primitive ramp is now `amber`.** It was the only
+primitive named by role (`primary`) while its neighbours were named by hue
+(`neutral`, `red`), which made `--bg-action-primary: var(--color-primary-500)`
+read like a tautology. `--color-primary-50` through `--color-primary-900` are
+now `--color-amber-50` through `--color-amber-900`, with no alias left behind.
+Semantic tokens keep their role names (`--bg-action-primary`,
+`--border-input-active`, ...) and resolve to byte-identical values: all 175
+custom properties were compared before and after, 63 of them still through a
+reference. Only code that referenced a `--color-primary-*` variable directly
+needs to change, and a find-and-replace of `--color-primary-` to
+`--color-amber-` is the whole migration.
+
+**Components now use the semantic token Figma binds.** The earlier checks
+compared rendered colours, so a component painting the right hex from the
+wrong token passed. This pass read each node's bound variables instead, and
+found 17 places across both packages reaching past the semantic layer to a
+primitive. Most resolve to the same colour, so only the token changed
+(Checkbox, Toggle, Callout, Navbar's active icon, Tab's underline, Chips'
+selected border). Three were real colour bugs, all rendering `#f8b732` where
+Figma binds `border-highlight` (`#fcdea1`): InfoBadge's border when it has no
+icon, and PointBalanceBanner's border and divider. InfoBadge with an icon
+keeps `border-input-active`, selected by the same icon slot Figma uses to tell
+the two variants apart.
+
+**BottomSheet's drag handle** follows Figma's `Driver Slider`: 40x4 (was
+36x4), `border-main` rather than the `neutral-200` primitive (same colour),
+`radius-full`, and no bottom margin of its own. The space below the handle is
+now just the sheet's 16px gap, so a sheet with `showHandle` is 8px shorter.
+
+**IconButton `size="small"`** is Figma's 24px circle with the icon at the full
+24x24 and no padding. It used to pad by 4 and inset the icon to 16px, about
+60% of Figma's size. The chevron it carries in Figma, `fi-sr-angle-small-right`,
+was not in the icon set at all; it now ships as `SnackyIcons.solid.angleSmallRight`,
+making the solid set 12 icons.
+
+**Section's "see more" action** is that shared small IconButton. It used to be
+its own button with a hand-drawn 16px stroked chevron, so the
+`.snacky-section__action` class no longer exists; style the IconButton instead
+if you were targeting it. The header is also 30px tall now, not the title's
+36px line box, because Figma crops the h3 title node to 30 from the top. Every
+Section is 6px shorter as a result.
+
+**UploadButton** matches Figma's `Property 1=upload`: `bg-action-secondary`
+fill (was `bg-surface`) and a dashed `border-action-secondary` outline (was
+`border-main`) drawn 1px outside the 72px circle, as Figma draws it. A real
+border sat inside the box and squeezed the icon to 22px. The `icon` prop is
+now optional and defaults to the camera glyph Figma uses.
+
+**ProductCard (list)** pins the name box and the rating/cart row at 41px each,
+as Figma does, so the card is 294 tall (it was 292). The docs site's spec
+already said 294; the package was the one that was wrong.
+
+compose-ui ships the same changes as `compose-v2.0.0`. The major bump is for
+the ramp rename, which there is `SnackyColorPrimitive.Primary` becoming
+`SnackyColorPrimitive.Amber`; `SnackyColor.*` semantic names are unchanged.
+It also adds `SnackyUploadButton`, which react-ui had and compose-ui did not,
+and `SnackyIcons.Solid.AngleSmallRight`.
+
+## SoldOut overlay uses its own token (0.9.1)
+
+Auditing the rest of the package after the semantic-token fix turned up two
+places still painting `rgba(51, 51, 51, 0.8)` by hand: `.snacky-soldout-badge`
+and `.snacky-product-image-sold-label`. `--bg-overlay-dim` is defined for
+exactly that value, and its description in `tokens.json` names this exact use
+("Dark translucent overlay - e.g. Sold Out badge over product images"), so
+both now reference the token. Renders identically (verified in the badge
+playground: still `rgba(51, 51, 51, 0.8)`), but the overlay is now overridable
+like every other colour.
+
+compose-ui already had this right, using `SnackyColor.bgOverlayDim` in all
+three places it paints the overlay, so nothing changed there. Everything else
+in the component CSS was already on tokens; the remaining raw values are
+alpha-only tints with no token behind them (the tertiary icon-button press
+state, ProductCard's white scrim).
+
 ## Semantic tokens reference their primitive again, instead of copying it (0.9.0)
 
 `tokens.css` shipped every semantic token as a frozen literal:

package/dist/index.cjs

@@ -153,141 +153,6 @@ var IconButton = (0, import_react2.forwardRef)(function IconButton2({ variant =
 
 // src/components/IconButton/UploadButton.tsx
 var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var UploadButton = (0, import_react3.forwardRef)(function UploadButton2({ icon: icon3, ariaLabel = "Upload image", className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
-});
-
-// src/components/Input/TextField.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TextField = (0, import_react4.forwardRef)(function TextField2({
-  value,
-  onChange,
-  label,
-  leadingIcon,
-  trailingIcon,
-  trailingIconRotated = false,
-  error,
-  disabled,
-  className,
-  id,
-  ...rest
-}, ref) {
-  const autoId = (0, import_react4.useId)();
-  const fieldId = id ?? autoId;
-  const errorMessage = typeof error === "string" ? error : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "div",
-      {
-        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
-        children: [
-          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "snacky-field__icon", children: leadingIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              ref,
-              id: fieldId,
-              className: "snacky-field__input",
-              value,
-              onChange: (e) => onChange(e.target.value),
-              disabled,
-              ...rest
-            }
-          ),
-          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "span",
-            {
-              className: "snacky-field__icon",
-              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
-              children: trailingIcon
-            }
-          )
-        ]
-      }
-    ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "snacky-field-error", children: errorMessage })
-  ] });
-});
-
-// src/components/Input/SearchField.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SearchField = (0, import_react5.forwardRef)(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx("snacky-search", className), children: [
-    searchIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "snacky-search__icon", children: searchIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "input",
-      {
-        ref,
-        className: "snacky-search__input",
-        value,
-        placeholder,
-        onChange: (e) => onChange(e.target.value),
-        ...rest
-      }
-    ),
-    value && onClear && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
-  ] });
-});
-
-// src/components/Input/OtpField.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function OtpField({ value, onChange, length = 6, disabled }) {
-  const cellRefs = (0, import_react6.useRef)([]);
-  const digits = Array.from({ length }, (_, i) => value[i] ?? "");
-  function setDigit(index, digit) {
-    const next = digits.slice();
-    next[index] = digit;
-    onChange(next.join(""));
-    if (digit && index < length - 1) cellRefs.current[index + 1]?.focus();
-  }
-  function handleKeyDown(index, e) {
-    if (e.key === "Backspace" && !digits[index] && index > 0) {
-      cellRefs.current[index - 1]?.focus();
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "input",
-    {
-      ref: (el) => {
-        cellRefs.current[i] = el;
-      },
-      className: "snacky-otp__cell",
-      inputMode: "numeric",
-      maxLength: 1,
-      value: digit,
-      disabled,
-      onChange: (e) => setDigit(i, e.target.value.replace(/\D/g, "").slice(-1)),
-      onKeyDown: (e) => handleKeyDown(i, e),
-      "aria-label": `Digit ${i + 1}`
-    },
-    i
-  )) });
-}
-
-// src/components/Input/CopyField.tsx
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function CopyField({ value, onCopy, className }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-    }
-    onCopy?.(value);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("snacky-copy", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "snacky-copy__value", children: value }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: cx("snacky-copy__action", copied && "snacky-copy__action--copied"), onClick: handleCopy, children: copied ? "Copied" : "Copy" })
-  ] });
-}
 
 // src/icons/outline.tsx
 var outline_exports = {};
@@ -335,10 +200,10 @@ __export(outline_exports, {
   truck: () => truck,
   unsent: () => unsent
 });
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function icon(viewBox, paths) {
   return function SnackyIcon({ width = viewBox, height = viewBox, color = "currentColor", ...rest }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width, height, viewBox: `0 0 ${viewBox} ${viewBox}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: paths.map(([d, fillRule], i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width, height, viewBox: `0 0 ${viewBox} ${viewBox}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: paths.map(([d, fillRule], i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "path",
       {
         d,
@@ -512,6 +377,143 @@ var unsent = icon(24, [
   ["M11.9999 7C11.7788 7 11.5669 7.0878 11.4106 7.24408C11.2543 7.40036 11.1665 7.61232 11.1665 7.83333V11.4375L8.35735 13.1975C8.16949 13.3148 8.03594 13.502 7.98609 13.7179C7.93624 13.9337 7.97416 14.1605 8.09152 14.3483C8.20888 14.5362 8.39606 14.6697 8.61188 14.7196C8.8277 14.7694 9.05449 14.7315 9.24235 14.6142L12.4424 12.6142C12.5633 12.5384 12.6627 12.4329 12.7311 12.3077C12.7996 12.1825 12.8347 12.0418 12.8332 11.8992V7.83333C12.8332 7.61232 12.7454 7.40036 12.5891 7.24408C12.4328 7.0878 12.2209 7 11.9999 7Z", "nonzero"]
 ]);
 
+// src/components/IconButton/UploadButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var UploadButton = (0, import_react3.forwardRef)(function UploadButton2({ icon: icon3 = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(camera, {}), ariaLabel = "Upload image", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
+});
+
+// src/components/Input/TextField.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TextField = (0, import_react4.forwardRef)(function TextField2({
+  value,
+  onChange,
+  label,
+  leadingIcon,
+  trailingIcon,
+  trailingIconRotated = false,
+  error,
+  disabled,
+  className,
+  id,
+  ...rest
+}, ref) {
+  const autoId = (0, import_react4.useId)();
+  const fieldId = id ?? autoId;
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
+        children: [
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "snacky-field__icon", children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ref,
+              id: fieldId,
+              className: "snacky-field__input",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              disabled,
+              ...rest
+            }
+          ),
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              className: "snacky-field__icon",
+              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
+              children: trailingIcon
+            }
+          )
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "snacky-field-error", children: errorMessage })
+  ] });
+});
+
+// src/components/Input/SearchField.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SearchField = (0, import_react5.forwardRef)(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cx("snacky-search", className), children: [
+    searchIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "snacky-search__icon", children: searchIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        ref,
+        className: "snacky-search__input",
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        ...rest
+      }
+    ),
+    value && onClear && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
+  ] });
+});
+
+// src/components/Input/OtpField.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function OtpField({ value, onChange, length = 6, disabled }) {
+  const cellRefs = (0, import_react6.useRef)([]);
+  const digits = Array.from({ length }, (_, i) => value[i] ?? "");
+  function setDigit(index, digit) {
+    const next = digits.slice();
+    next[index] = digit;
+    onChange(next.join(""));
+    if (digit && index < length - 1) cellRefs.current[index + 1]?.focus();
+  }
+  function handleKeyDown(index, e) {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      cellRefs.current[index - 1]?.focus();
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      ref: (el) => {
+        cellRefs.current[i] = el;
+      },
+      className: "snacky-otp__cell",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: digit,
+      disabled,
+      onChange: (e) => setDigit(i, e.target.value.replace(/\D/g, "").slice(-1)),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      "aria-label": `Digit ${i + 1}`
+    },
+    i
+  )) });
+}
+
+// src/components/Input/CopyField.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CopyField({ value, onCopy, className }) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+    }
+    onCopy?.(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("snacky-copy", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "snacky-copy__value", children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: cx("snacky-copy__action", copied && "snacky-copy__action--copied"), onClick: handleCopy, children: copied ? "Copied" : "Copy" })
+  ] });
+}
+
 // src/components/Input/ChatInput.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
@@ -702,6 +704,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
   cart: () => cart2,
@@ -732,6 +735,9 @@ var account2 = icon2(20, [
   ["M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z", "nonzero"],
   ["M10 11.6659C5.85977 11.6705 2.50461 15.0257 2.5 19.1659C2.5 19.6261 2.87309 19.9992 3.33332 19.9992H16.6666C17.1269 19.9992 17.5 19.6261 17.5 19.1659C17.4954 15.0257 14.1402 11.6705 10 11.6659Z", "nonzero"]
 ]);
+var angleSmallRight = icon2(24, [
+  ["M15.75 9.525L11.164 4.939C10.8827 4.65774 10.5011 4.49978 10.1032 4.49988C9.70534 4.49997 9.32381 4.65811 9.04255 4.9395C8.76129 5.2209 8.60333 5.6025 8.60342 6.00036C8.60352 6.39822 8.76166 6.77974 9.04305 7.061L13.629 11.646C13.6756 11.6925 13.7125 11.7476 13.7378 11.8084C13.763 11.8691 13.7759 11.9342 13.7759 12C13.7759 12.0658 13.763 12.1309 13.7378 12.1916C13.7125 12.2524 13.6756 12.3076 13.629 12.354L9.04305 16.939C8.76166 17.2203 8.60352 17.6018 8.60342 17.9997C8.60333 18.3975 8.76129 18.7791 9.04255 19.0605C9.32381 19.3419 9.70534 19.5 10.1032 19.5001C10.5011 19.5002 10.8827 19.3423 11.164 19.061L15.75 14.475C16.4053 13.818 16.7732 12.9279 16.7732 12C16.7732 11.0721 16.4053 10.182 15.75 9.525Z", "nonzero"]
+]);
 var balance2 = icon2(24, [
   ["M19 4.00031H5C3.67441 4.00189 2.40356 4.52919 1.46622 5.46653C0.528882 6.40386 0.00158786 7.67471 0 9.00031L0 15.0003C0.00158786 16.3259 0.528882 17.5967 1.46622 18.5341C2.40356 19.4714 3.67441 19.9987 5 20.0003H19C20.3256 19.9987 21.5964 19.4714 22.5338 18.5341C23.4711 17.5967 23.9984 16.3259 24 15.0003V9.00031C23.9984 7.67471 23.4711 6.40386 22.5338 5.46653C21.5964 4.52919 20.3256 4.00189 19 4.00031ZM4 17.0003C3.80222 17.0003 3.60888 16.9417 3.44443 16.8318C3.27998 16.7219 3.15181 16.5657 3.07612 16.383C3.00043 16.2003 2.98063 15.9992 3.01921 15.8052C3.0578 15.6112 3.15304 15.4331 3.29289 15.2932C3.43275 15.1533 3.61093 15.0581 3.80491 15.0195C3.99889 14.9809 4.19996 15.0007 4.38268 15.0764C4.56541 15.1521 4.72159 15.2803 4.83147 15.4447C4.94135 15.6092 5 15.8025 5 16.0003C5 16.2655 4.89464 16.5199 4.70711 16.7074C4.51957 16.8949 4.26522 17.0003 4 17.0003ZM4 9.00031C3.80222 9.00031 3.60888 8.94166 3.44443 8.83177C3.27998 8.72189 3.15181 8.56571 3.07612 8.38299C3.00043 8.20026 2.98063 7.9992 3.01921 7.80521C3.0578 7.61123 3.15304 7.43305 3.29289 7.2932C3.43275 7.15335 3.61093 7.0581 3.80491 7.01952C3.99889 6.98093 4.19996 7.00074 4.38268 7.07643C4.56541 7.15211 4.72159 7.28029 4.83147 7.44474C4.94135 7.60918 5 7.80252 5 8.00031C5 8.26552 4.89464 8.51988 4.70711 8.70741C4.51957 8.89495 4.26522 9.00031 4 9.00031ZM12 16.0003C11.2089 16.0003 10.4355 15.7657 9.77772 15.3262C9.11992 14.8867 8.60723 14.2619 8.30448 13.531C8.00173 12.8001 7.92252 11.9959 8.07686 11.2199C8.2312 10.444 8.61216 9.73129 9.17157 9.17188C9.73098 8.61247 10.4437 8.2315 11.2196 8.07716C11.9956 7.92282 12.7998 8.00204 13.5307 8.30479C14.2616 8.60754 14.8864 9.12023 15.3259 9.77802C15.7654 10.4358 16 11.2092 16 12.0003C16 13.0612 15.5786 14.0786 14.8284 14.8287C14.0783 15.5789 13.0609 16.0003 12 16.0003ZM20 17.0003C19.8022 17.0003 19.6089 16.9417 19.4444 16.8318C19.28 16.7219 19.1518 16.5657 19.0761 16.383C19.0004 16.2003 18.9806 15.9992 19.0192 15.8052C19.0578 15.6112 19.153 15.4331 19.2929 15.2932C19.4327 15.1533 19.6109 15.0581 19.8049 15.0195C19.9989 14.9809 20.2 15.0007 20.3827 15.0764C20.5654 15.1521 20.7216 15.2803 20.8315 15.4447C20.9414 15.6092 21 15.8025 21 16.0003C21 16.2655 20.8946 16.5199 20.7071 16.7074C20.5196 16.8949 20.2652 17.0003 20 17.0003ZM20 9.00031C19.8022 9.00031 19.6089 8.94166 19.4444 8.83177C19.28 8.72189 19.1518 8.56571 19.0761 8.38299C19.0004 8.20026 18.9806 7.9992 19.0192 7.80521C19.0578 7.61123 19.153 7.43305 19.2929 7.2932C19.4327 7.15335 19.6109 7.0581 19.8049 7.01952C19.9989 6.98093 20.2 7.00074 20.3827 7.07643C20.5654 7.15211 20.7216 7.28029 20.8315 7.44474C20.9414 7.60918 21 7.80252 21 8.00031C21 8.26552 20.8946 8.51988 20.7071 8.70741C20.5196 8.89495 20.2652 9.00031 20 9.00031ZM14 12.0003C14 12.3959 13.8827 12.7825 13.6629 13.1114C13.4432 13.4403 13.1308 13.6967 12.7654 13.8481C12.3999 13.9994 11.9978 14.039 11.6098 13.9619C11.2219 13.8847 10.8655 13.6942 10.5858 13.4145C10.3061 13.1348 10.1156 12.7784 10.0384 12.3905C9.96126 12.0025 10.0009 11.6004 10.1522 11.2349C10.3036 10.8695 10.56 10.5571 10.8889 10.3374C11.2178 10.1176 11.6044 10.0003 12 10.0003C12.5304 10.0003 13.0391 10.211 13.4142 10.5861C13.7893 10.9612 14 11.4699 14 12.0003Z", "nonzero"]
 ]);
@@ -1029,7 +1035,7 @@ function Section({ title, onAction, children, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: cx("snacky-section", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "snacky-section__header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "snacky-section__title", children: title }),
-      onAction && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: "snacky-section__action", onClick: onAction, "aria-label": `See more: ${title}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M6 3.5L10.5 8L6 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+      onAction && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
     ] }),
     children
   ] });