@snacky/ui 0.9.1 → 0.10.0

package/dist/index.d.ts

@@ -25,7 +25,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
 type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: IconButtonVariant;
-    /** 24px (default) or 16px (small) circle - only meaningful on the primary variant. */
+    /** 32px circle with a 16px icon (default) or 24px circle with a full-size 24px icon (small), primary only. */
     size?: 'default' | 'small';
     icon: ReactNode;
     /** Toggled/favorited state on the Secondary variant - tints the icon with icon-active, fill unchanged. */
@@ -40,7 +40,8 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface UploadButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    icon: ReactNode;
+    /** Defaults to the camera glyph Figma draws in this button (its `picture` icon). */
+    icon?: ReactNode;
     ariaLabel?: string;
 }
 /** Snacky Upload Button - circular dashed-border image drop zone. */
@@ -339,9 +340,11 @@ interface BottomSheetProps {
     open: boolean;
     onDismiss: () => void;
     children: ReactNode;
-    /** Show the drag-handle bar. Confirmed against Figma: none of the 9
-     *  documented Modal variants show one, so this defaults to false - opt
-     *  in only if a future variant actually needs it. */
+    /** Show the drag-handle bar. Defaults to false because 8 of Figma's 9
+     *  Modal variants have no handle. The `driver` variant does: it draws a
+     *  visible 40x4 `Driver Slider` (node 8693:6233). An earlier pass read
+     *  that as "no variant shows one", which was wrong, so a Driver Tracking
+     *  composition should pass showHandle. */
     showHandle?: boolean;
     className?: string;
 }
@@ -357,7 +360,7 @@ declare function BottomSheet({ open, onDismiss, children, showHandle, className
 
 interface SectionProps {
     title: string;
-    /** Small circular chevron button in the header, shown when provided (e.g. "see more"). */
+    /** "See more" action, shown when provided: Figma's small Icon-Button (24px circle, full-size angle chevron). */
     onAction?: () => void;
     children: ReactNode;
     className?: string;
@@ -639,6 +642,7 @@ declare namespace outline {
 }
 
 declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const angleSmallRight: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const cart: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -651,6 +655,7 @@ declare const star: ({ width, height, color, ...rest }: IconProps) => react.JSX.
 declare const truck: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
 declare const solid_account: typeof account;
+declare const solid_angleSmallRight: typeof angleSmallRight;
 declare const solid_balance: typeof balance;
 declare const solid_bell: typeof bell;
 declare const solid_cart: typeof cart;
@@ -662,7 +667,7 @@ declare const solid_points: typeof points;
 declare const solid_star: typeof star;
 declare const solid_truck: typeof truck;
 declare namespace solid {
-  export { solid_account as account, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
+  export { solid_account as account, solid_angleSmallRight as angleSmallRight, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
 }
 
 /** Matches the `<SnackyIcons.outline.home />` / `<SnackyIcons.solid.home />` namespace used throughout the design system's documented code samples. */

package/dist/index.js

@@ -92,141 +92,6 @@ var IconButton = forwardRef2(function IconButton2({ variant = "primary", size =
 
 // src/components/IconButton/UploadButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var UploadButton = forwardRef3(function UploadButton2({ icon: icon3, ariaLabel = "Upload image", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx3("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
-});
-
-// src/components/Input/TextField.tsx
-import { forwardRef as forwardRef4, useId } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var TextField = forwardRef4(function TextField2({
-  value,
-  onChange,
-  label,
-  leadingIcon,
-  trailingIcon,
-  trailingIconRotated = false,
-  error,
-  disabled,
-  className,
-  id,
-  ...rest
-}, ref) {
-  const autoId = useId();
-  const fieldId = id ?? autoId;
-  const errorMessage = typeof error === "string" ? error : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className, children: [
-    label && /* @__PURE__ */ jsx4("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
-        children: [
-          leadingIcon && /* @__PURE__ */ jsx4("span", { className: "snacky-field__icon", children: leadingIcon }),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              ref,
-              id: fieldId,
-              className: "snacky-field__input",
-              value,
-              onChange: (e) => onChange(e.target.value),
-              disabled,
-              ...rest
-            }
-          ),
-          trailingIcon && /* @__PURE__ */ jsx4(
-            "span",
-            {
-              className: "snacky-field__icon",
-              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
-              children: trailingIcon
-            }
-          )
-        ]
-      }
-    ),
-    errorMessage && /* @__PURE__ */ jsx4("span", { className: "snacky-field-error", children: errorMessage })
-  ] });
-});
-
-// src/components/Input/SearchField.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var SearchField = forwardRef5(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
-  return /* @__PURE__ */ jsxs3("div", { className: cx("snacky-search", className), children: [
-    searchIcon && /* @__PURE__ */ jsx5("span", { className: "snacky-search__icon", children: searchIcon }),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        ref,
-        className: "snacky-search__input",
-        value,
-        placeholder,
-        onChange: (e) => onChange(e.target.value),
-        ...rest
-      }
-    ),
-    value && onClear && /* @__PURE__ */ jsx5("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
-  ] });
-});
-
-// src/components/Input/OtpField.tsx
-import { useRef } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function OtpField({ value, onChange, length = 6, disabled }) {
-  const cellRefs = 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__ */ jsx6("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ jsx6(
-    "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
-import { useState } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function CopyField({ value, onCopy, className }) {
-  const [copied, setCopied] = useState(false);
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-    }
-    onCopy?.(value);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  }
-  return /* @__PURE__ */ jsxs4("div", { className: cx("snacky-copy", className), children: [
-    /* @__PURE__ */ jsx7("span", { className: "snacky-copy__value", children: value }),
-    /* @__PURE__ */ jsx7("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 = {};
@@ -274,10 +139,10 @@ __export(outline_exports, {
   truck: () => truck,
   unsent: () => unsent
 });
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function icon(viewBox, paths) {
   return function SnackyIcon({ width = viewBox, height = viewBox, color = "currentColor", ...rest }) {
-    return /* @__PURE__ */ jsx8("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__ */ jsx8(
+    return /* @__PURE__ */ jsx3("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__ */ jsx3(
       "path",
       {
         d,
@@ -451,6 +316,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
+import { jsx as jsx4 } from "react/jsx-runtime";
+var UploadButton = forwardRef3(function UploadButton2({ icon: icon3 = /* @__PURE__ */ jsx4(camera, {}), ariaLabel = "Upload image", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx4("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
+});
+
+// src/components/Input/TextField.tsx
+import { forwardRef as forwardRef4, useId } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var TextField = forwardRef4(function TextField2({
+  value,
+  onChange,
+  label,
+  leadingIcon,
+  trailingIcon,
+  trailingIconRotated = false,
+  error,
+  disabled,
+  className,
+  id,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    label && /* @__PURE__ */ jsx5("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx5("span", { className: "snacky-field__icon", children: leadingIcon }),
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              ref,
+              id: fieldId,
+              className: "snacky-field__input",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              disabled,
+              ...rest
+            }
+          ),
+          trailingIcon && /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "snacky-field__icon",
+              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
+              children: trailingIcon
+            }
+          )
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx5("span", { className: "snacky-field-error", children: errorMessage })
+  ] });
+});
+
+// src/components/Input/SearchField.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var SearchField = forwardRef5(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
+  return /* @__PURE__ */ jsxs3("div", { className: cx("snacky-search", className), children: [
+    searchIcon && /* @__PURE__ */ jsx6("span", { className: "snacky-search__icon", children: searchIcon }),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref,
+        className: "snacky-search__input",
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        ...rest
+      }
+    ),
+    value && onClear && /* @__PURE__ */ jsx6("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
+  ] });
+});
+
+// src/components/Input/OtpField.tsx
+import { useRef } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function OtpField({ value, onChange, length = 6, disabled }) {
+  const cellRefs = 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__ */ jsx7("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ jsx7(
+    "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
+import { useState } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function CopyField({ value, onCopy, className }) {
+  const [copied, setCopied] = useState(false);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+    }
+    onCopy?.(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: cx("snacky-copy", className), children: [
+    /* @__PURE__ */ jsx8("span", { className: "snacky-copy__value", children: value }),
+    /* @__PURE__ */ jsx8("button", { type: "button", className: cx("snacky-copy__action", copied && "snacky-copy__action--copied"), onClick: handleCopy, children: copied ? "Copied" : "Copy" })
+  ] });
+}
+
 // src/components/Input/ChatInput.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
@@ -641,6 +643,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
   cart: () => cart2,
@@ -671,6 +674,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"]
 ]);
@@ -968,7 +974,7 @@ function Section({ title, onAction, children, className }) {
   return /* @__PURE__ */ jsxs19("section", { className: cx("snacky-section", className), children: [
     /* @__PURE__ */ jsxs19("div", { className: "snacky-section__header", children: [
       /* @__PURE__ */ jsx26("h3", { className: "snacky-section__title", children: title }),
-      onAction && /* @__PURE__ */ jsx26("button", { type: "button", className: "snacky-section__action", onClick: onAction, "aria-label": `See more: ${title}`, children: /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ jsx26("path", { d: "M6 3.5L10.5 8L6 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+      onAction && /* @__PURE__ */ jsx26(IconButton, { size: "small", icon: /* @__PURE__ */ jsx26(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
     ] }),
     children
   ] });