@astryxdesign/cli 0.1.1 → 0.1.2-canary.2149fa3

package/templates/blocks/components/LinkProvider/LinkProviderCustomLink.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import type {AnchorHTMLAttributes} from 'react';
+import {Link, LinkProvider} from '@astryxdesign/core/Link';
+
+/**
+ * A stand-in for a framework router link (e.g. Next.js `Link` or React
+ * Router `Link`). Instead of letting the browser do a full-page navigation,
+ * it intercepts the click and hands the destination to a custom handler —
+ * the same hook real routers use for client-side navigation. Here it just
+ * announces the target so the behavior swap is observable in the preview.
+ */
+function RouterLink({
+  href,
+  onClick,
+  children,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      href={href}
+      onClick={e => {
+        e.preventDefault();
+        onClick?.(e);
+        alert(`RouterLink intercepted navigation to: ${href}`);
+      }}
+      {...props}>
+      {children}
+    </a>
+  );
+}
+
+export default function LinkProviderCustomLink() {
+  return (
+    <LinkProvider component={RouterLink}>
+      <Link href="/dashboard" isStandalone>
+        Go to dashboard
+      </Link>
+    </LinkProvider>
+  );
+}

package/templates/blocks/components/MultiSelector/MultiSelectorShowcase.tsx

@@ -1,15 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {MultiSelector} from '@astryxdesign/core/MultiSelector';
 
 export default function MultiSelectorShowcase() {
+  const [value, setValue] = useState<string[]>([]);
   return (
     <div style={{width: 300}}>
       <MultiSelector
         label="Columns"
         options={['Name', 'Email', 'Role', 'Status', 'Created']}
-        value={[]}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Select columns..."
       />
     </div>

package/templates/blocks/components/NumberInput/NumberInputShowcase.tsx

@@ -1,15 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {NumberInput} from '@astryxdesign/core/NumberInput';
 
 export default function NumberInputShowcase() {
+  const [value, setValue] = useState<number | null>(0);
   return (
     <div style={{width: 300}}>
       <NumberInput
         label="Quantity"
         placeholder="Enter quantity"
-        value={0}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
       />
     </div>
   );

package/templates/blocks/components/Outline/OutlineShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Outline',
+  name: 'Outline',
+  displayName: 'Outline',
+  description:
+    'A document outline with the active section highlighted by the sliding indicator track.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['Outline'],
+};

package/templates/blocks/components/Outline/OutlineShowcase.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Outline} from '@astryxdesign/core/Outline';
+import type {OutlineItem} from '@astryxdesign/core/Outline';
+
+const items: OutlineItem[] = [
+  {id: 'showcase-overview', label: 'Overview', level: 2},
+  {id: 'showcase-installation', label: 'Installation', level: 2},
+  {id: 'showcase-theming', label: 'Theming', level: 2},
+  {id: 'showcase-tokens', label: 'Tokens', level: 3},
+  {id: 'showcase-accessibility', label: 'Accessibility', level: 2},
+];
+
+export default function OutlineShowcase() {
+  return (
+    <div style={{width: 240}}>
+      <Outline items={items} activeId="showcase-theming" />
+    </div>
+  );
+}

package/templates/blocks/components/RadioList/RadioListShowcase.tsx

@@ -1,10 +1,17 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
 
 export default function RadioListShowcase() {
+  const [value, setValue] = useState('');
   return (
-    <RadioList label="Notification preference" value="" onChange={() => {}}>
+    <RadioList
+      label="Notification preference"
+      value={value}
+      onChange={setValue}>
       <RadioListItem label="Email" value="email" />
       <RadioListItem label="SMS" value="sms" />
       <RadioListItem label="Push notification" value="push" />

package/templates/blocks/components/SegmentedControl/SegmentedControlShowcase.tsx

@@ -2,14 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {
   SegmentedControl,
   SegmentedControlItem,
 } from '@astryxdesign/core/SegmentedControl';
 
 export default function SegmentedControlShowcase() {
+  const [value, setValue] = useState('grid');
   return (
-    <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+    <SegmentedControl value={value} onChange={setValue} label="View mode">
       <SegmentedControlItem value="grid" label="Grid" />
       <SegmentedControlItem value="list" label="List" />
       <SegmentedControlItem value="table" label="Table" />

package/templates/blocks/components/Selector/SelectorShowcase.tsx

@@ -2,16 +2,19 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Selector} from '@astryxdesign/core/Selector';
 
 export default function SelectorShowcase() {
+  const [value, setValue] = useState<string | undefined>();
   return (
     <Selector
       style={{width: 300}}
       label="Fruit"
       options={['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']}
       placeholder="Select a fruit..."
-      onChange={() => {}}
+      value={value}
+      onChange={setValue}
     />
   );
 }

package/templates/blocks/components/Slider/SliderShowcase.tsx

@@ -2,8 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Slider} from '@astryxdesign/core/Slider';
 
 export default function SliderShowcase() {
-  return <Slider label="Volume" value={50} style={{width: 300}} />;
+  const [value, setValue] = useState(50);
+  return (
+    <Slider
+      label="Volume"
+      value={value}
+      onChange={setValue}
+      style={{width: 300}}
+    />
+  );
 }

package/templates/blocks/components/Tab/TabShowcase.tsx

@@ -2,12 +2,14 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Badge} from '@astryxdesign/core/Badge';
 
 export default function TabShowcase() {
+  const [value, setValue] = useState('inbox');
   return (
-    <TabList value="inbox" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab
         value="inbox"
         label="Inbox"

package/templates/blocks/components/TabList/TabListShowcase.tsx

@@ -2,11 +2,13 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 
 export default function TabListShowcase() {
+  const [value, setValue] = useState('home');
   return (
-    <TabList value="home" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab value="home" label="Home" />
       <Tab value="projects" label="Projects" />
       <Tab value="settings" label="Settings" />

package/templates/blocks/components/TabMenu/TabMenuShowcase.tsx

@@ -2,11 +2,13 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab, TabMenu} from '@astryxdesign/core/TabList';
 
 export default function TabMenuShowcase() {
+  const [value, setValue] = useState('settings');
   return (
-    <TabList value="settings" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab value="overview" label="Overview" />
       <Tab value="activity" label="Activity" />
       <TabMenu

package/templates/blocks/components/Table/ColumnResizeHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableColumnResize',
+  name: 'useTableColumnResize — Draggable Columns',
+  displayName: 'useTableColumnResize — Draggable Columns',
+  description:
+    'A Table using useTableColumnResize. Drag the right edge of any column header to resize; widths are committed on release. The last proportional column flexes to fill remaining space.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/ColumnResizeHookUsage.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  Table,
+  useTableColumnResize,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const users: User[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Engineer',
+  },
+  {id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'Designer'},
+  {id: '3', name: 'Charlie Brown', email: 'charlie@example.com', role: 'PM'},
+  {id: '4', name: 'Diana Prince', email: 'diana@example.com', role: 'Engineer'},
+  {id: '5', name: 'Eve Davis', email: 'eve@example.com', role: 'Analyst'},
+];
+
+const columns = [
+  {key: 'name', header: 'Name'},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role', width: pixel(120)},
+];
+
+export default function ColumnResizeHookUsage() {
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+
+  const columnResize = useTableColumnResize({
+    columnWidths,
+    columns,
+    onColumnResizeEnd: updates => {
+      setColumnWidths(prev => ({...prev, ...updates}));
+    },
+  });
+
+  return (
+    <Table
+      data={users}
+      columns={columns}
+      idKey="id"
+      hasHover
+      plugins={{columnResize}}
+    />
+  );
+}

package/templates/blocks/components/Table/StickyColumnsHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableStickyColumns',
+  name: 'useTableStickyColumns — Pinned Columns',
+  displayName: 'useTableStickyColumns — Pinned Columns',
+  description:
+    'A Table using useTableStickyColumns to pin the Name column to the start edge and Status to the end edge. Scroll horizontally; pinned columns stay in view with a soft shadow over the scrolling content.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/StickyColumnsHookUsage.tsx

@@ -0,0 +1,104 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Table, useTableStickyColumns, pixel} from '@astryxdesign/core/Table';
+
+interface Employee extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  team: string;
+  role: string;
+  location: string;
+  startDate: string;
+  status: string;
+}
+
+const employees: Employee[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    team: 'Design Systems',
+    role: 'Staff Engineer',
+    location: 'San Francisco',
+    startDate: '2019-03-12',
+    status: 'Active',
+  },
+  {
+    id: '2',
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    team: 'Design Systems',
+    role: 'Senior Designer',
+    location: 'New York',
+    startDate: '2020-07-01',
+    status: 'Active',
+  },
+  {
+    id: '3',
+    name: 'Charlie Brown',
+    email: 'charlie@example.com',
+    team: 'Platform',
+    role: 'Engineering Manager',
+    location: 'London',
+    startDate: '2017-11-20',
+    status: 'On leave',
+  },
+  {
+    id: '4',
+    name: 'Diana Prince',
+    email: 'diana@example.com',
+    team: 'Platform',
+    role: 'Staff Engineer',
+    location: 'Remote',
+    startDate: '2021-01-15',
+    status: 'Active',
+  },
+  {
+    id: '5',
+    name: 'Eve Davis',
+    email: 'eve@example.com',
+    team: 'Growth',
+    role: 'Product Engineer',
+    location: 'Berlin',
+    startDate: '2022-05-30',
+    status: 'Active',
+  },
+];
+
+// Wide fixed-width columns so the table overflows and scrolls horizontally,
+// keeping the pinned Name (start) and Status (end) columns in view.
+const columns = [
+  {key: 'name', header: 'Name', width: pixel(180)},
+  {key: 'email', header: 'Email', width: pixel(220)},
+  {key: 'team', header: 'Team', width: pixel(180)},
+  {key: 'role', header: 'Role', width: pixel(200)},
+  {key: 'location', header: 'Location', width: pixel(160)},
+  {key: 'startDate', header: 'Start date', width: pixel(140)},
+  {key: 'status', header: 'Status', width: pixel(140)},
+];
+
+export default function StickyColumnsHookUsage() {
+  const stickyColumns = useTableStickyColumns<Employee>({
+    startKeys: ['name'],
+    endKeys: ['status'],
+  });
+
+  return (
+    // Constrain the width so the Table's own horizontal scroll container is
+    // narrower than its columns — that scroll container is what sticky columns
+    // pin against. Without a width cap the table renders full-width and never
+    // scrolls internally, so nothing sticks.
+    <div style={{width: 560, maxWidth: '100%'}}>
+      <Table
+        data={employees}
+        columns={columns}
+        idKey="id"
+        hasHover
+        plugins={{stickyColumns}}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/Text/TextColors.tsx

@@ -6,11 +6,26 @@ import {Text} from '@astryxdesign/core/Text';
 import {Stack} from '@astryxdesign/core/Stack';
 
 const COLORS = [
-  {color: 'primary' as const, description: 'Primary — Default for headings and body text'},
-  {color: 'secondary' as const, description: 'Secondary — Supporting details and metadata'},
-  {color: 'active' as const, description: 'Active — Links, success states, and emphasis'},
-  {color: 'disabled' as const, description: 'Disabled — Unavailable or inactive content'},
-  {color: 'placeholder' as const, description: 'Placeholder — Empty field hints'},
+  {
+    color: 'primary' as const,
+    description: 'Primary — Default for headings and body text',
+  },
+  {
+    color: 'secondary' as const,
+    description: 'Secondary — Supporting details and metadata',
+  },
+  {
+    color: 'accent' as const,
+    description: 'Accent — Links, emphasis, and accent-colored text',
+  },
+  {
+    color: 'disabled' as const,
+    description: 'Disabled — Unavailable or inactive content',
+  },
+  {
+    color: 'placeholder' as const,
+    description: 'Placeholder — Empty field hints',
+  },
 ];
 
 export default function TextColors() {

package/templates/blocks/components/TextArea/TextAreaShowcase.tsx

@@ -2,15 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TextArea} from '@astryxdesign/core/TextArea';
 
 export default function TextAreaShowcase() {
+  const [value, setValue] = useState('');
   return (
     <div style={{width: 400}}>
       <TextArea
         label="Description"
-        value=""
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Enter a description..."
       />
     </div>

package/templates/blocks/components/TextInput/TextInputShowcase.tsx

@@ -2,15 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TextInput} from '@astryxdesign/core/TextInput';
 
 export default function TextInputShowcase() {
+  const [value, setValue] = useState('');
   return (
     <div style={{width: 300}}>
       <TextInput
         label="Name"
-        value=""
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Enter your name"
       />
     </div>

package/templates/blocks/components/Thumbnail/ThumbnailDisabled.tsx

@@ -6,6 +6,11 @@ import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
+// Inline same-origin data URI so the example is self-contained — see
+// ThumbnailRemovable for why image-backed Thumbnails avoid cross-origin URLs.
+const GOLDEN_SUNSET =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAkFBMVEX/+uv/7sj6tFr3sVn1r1nzrVjxq1jvqVftp1frpVbpo1bnoVXln1XjnVThm1TfmVPdl1PblVLZk1LXkVLVj1HTjVHRi1DPiVDNh0/LhU/Jg07HgU7Ff03DfU3Be0y/eUy9d0u7dUu5c0u2cEq0bkqybEmwakmuaEisZkiqZEeoYkemYEakXkaiXEVgLjQ8HCjaJlMkAAABI0lEQVR42u3Mx3qDMBSE0Z/03nsvdhxjcnn/twsYjISR5MUkO5+V9N2ZYUPEpogtEdsidkTsitgTsS/iQMShiCMRxyJORJyKOBNxLuJCxKWIKxHXIm5E3Iq4E3Ev4kHEo4gnEc8iXkS8inhLymrJBO8J2UIiw0dc5sRDfEbVRWr1o/pbMMWox9yz6zcLIzMbBTD2VaHu7fr1gjXGA3w5baj5+H0w6x09TDpdaP7rDZhn0sd3y89Y9fcHbPnoYdroZ2w6dQNmg6OHfG4QyrsBC8gdZpVQxtqF4M1mjepFURThTLNgMYsePxaX2WqY6D8GSm2grK2slbGBciHZ9hOE2smNpTuxenhieCdeH06E7qTqvYnImWTbbUSPlKL1wHrgTwZ+AWq+3H5MpRkwAAAAAElFTkSuQmCC';
+
 export default function ThumbnailDisabled() {
   return (
     <Stack direction="vertical" gap={4}>
@@ -15,9 +20,9 @@ export default function ThumbnailDisabled() {
         </Text>
         <Stack direction="horizontal" gap={3} vAlign="center">
           <Thumbnail
-            src="https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png"
-            alt="Bright landscape"
-            label="landscape.jpg"
+            src={GOLDEN_SUNSET}
+            alt="Golden sunset over mountains"
+            label="golden-sunset.jpg"
             onRemove={() => {}}
           />
           <Thumbnail label="document.pdf" onRemove={() => {}} />
@@ -29,9 +34,9 @@ export default function ThumbnailDisabled() {
         </Text>
         <Stack direction="horizontal" gap={3} vAlign="center">
           <Thumbnail
-            src="https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png"
-            alt="Bright landscape"
-            label="landscape.jpg"
+            src={GOLDEN_SUNSET}
+            alt="Golden sunset over mountains"
+            label="golden-sunset.jpg"
             onRemove={() => {}}
             isDisabled
           />

package/templates/blocks/components/Thumbnail/ThumbnailGallery.tsx

@@ -7,11 +7,47 @@ import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
+// Demo imagery is inlined as same-origin data URIs so the example is
+// self-contained. Thumbnail's remove-button overlay uses useImageMode, which
+// FETCHES the image to sample pixels (APCA) for contrast — a cross-origin CDN
+// URL without CORS headers cannot be fetched/sampled, so contrast detection
+// fails silently in hosted previews. These scenes are shared verbatim across
+// the Thumbnail examples and span a luminance ramp (night → snow) so the
+// overlay's contrast adaptation is visible.
+const NIGHT_FOREST =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX18+H08uDy8d/y8N/v7t/m5NXl49Tk4tPc3NDX1cnW1cnW1cjW1MjV1MjV1MfR0cXIyLzEw7m8vLC3t68wM0QvM0MvM0IvMkIuMkEtMEErLz8iJjkhJTggJTcgJDcfJDYfIzYeIjUcITMbHzIWHiwYGzIXGjEWGjAWGTAVGS8VGC8UGC4UGC0UFy4TFy0TFywTFi0SFiwRFSsQFSkNFR4QFCoPFCkPFCgPEykOEygOEigNEicNEScMESYIDw8ECgr+gzZIAAABqElEQVR42uWQ61aCQBRGD5GylNBMKS9FZgNdNE0cyUvB+79VM8MoF9Fgplau2j/8nO8c9hqAD0ngDwjeJYH1lrfBWoCtYDboNu/Zv7qQYNap1bpCN1gxFh1dNe5WAsCScWqoWttbChAKvHZZ0W6XQoIFpW8ooFmLCG2Rl1BgaZAU5Ac8yg0RlC9nngCRQDFuhQRzinWmkCuYk3lxQoFrlskVqlcTMcEFvYIKoFbNfmEFuIypWaGGkt66tqZuEbjAHZl6SQVF1WqNvpDAHVktXTvR9JbgDZii1+tZI7cYMJXkCASvksB4L5VxHmAsibzgRRIYbjgfCgFDSeBZkh8W1HMIniSBR0mOQPCQA3RgBk4M5DhNZwdEcbKgLXy5iDiZg5gApRYbqTql2FZgMxAKeEWSNUFYx3s2SfU28HPWItrpySSwE2cEdqrYtxgmxgHGScFmHrAGk8SxczIxZnNC1McFOGshShyb4yxB9sI3CXDGnH0MLsD7F5LvvptEgH12Zg1Pn2WuHsjvrwt8308t+nwxT38sgiAE8/RTeagH+vx/F8SeF0Ja8Ak14ia/LgmpZQAAAABJRU5ErkJggg==';
+const MISTY_VALLEY =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEWPnaqJmKSIlaKHlaGGlaKGk6CEkp6Ckp+Cj5uAj51/jZp6i5h8ipd7iZZ4hpR1g5FzhpdzhJN0g5FuhZdsgpVqgZRpgJNpf5JmfpFufYxufYtlfJBpe4tke49neo1ieo5kd4tndoZidopheY1geIxfd4tmdYVddYpcdIlbc4hgcoNebn5ZcodYcYZXb4VVboRUbYNTbIJaantWaXxRa4FQaYBPaH9NZ35UZXZQY3dMZn1LZXxKZHxMYHRKXnIoOEh3WzsBAAABeElEQVR42u3T11oCQQyG4R9FEREFqVJEgh17xbZ7/3cl29gpmQGeeOh7OF+Ss8G3EL6E8CmEdyG8CeFVCC9CeBTCgxDuhXAnhFsh3AjhSgiXQrgQwtlayHrB6TqIyHzCREMTH4rpbxip5nnkRintEUNF0oc8yqnP6Oey3ueQSnlHN6P0ro0Mi4BOSu8dA1mygnbC7G0NMdKEVszuLQXx4oZmhO3NDLlEEY05R280PDGbgD0RaBeI/Bdg7weBMkDLwF4PtBOcwH0gCJZf0DPYdd8Jo8K177hgZbjW+RN2hWffusBVnMR+XE5yfMRx5MPtOOOI0Xd+9ot/rTOiVrtepuabwcDwNFgP6przSH0dqKiOUhUfvaKcO8yVncyM0sK+psSyK4qpPUvRwlUUYrusgoaviG27YMFXNz38I0nc8PNPAFtC2BFClRFWV4cDU5g4WEE0hJ4q1PU8sgmMF0LOmKN2TBOh21RjRsxms3C5WYwrCIX+D/zBgV8HCFv4gVKf1AAAAABJRU5ErkJggg==';
+const GOLDEN_SUNSET =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAkFBMVEX/+uv/7sj6tFr3sVn1r1nzrVjxq1jvqVftp1frpVbpo1bnoVXln1XjnVThm1TfmVPdl1PblVLZk1LXkVLVj1HTjVHRi1DPiVDNh0/LhU/Jg07HgU7Ff03DfU3Be0y/eUy9d0u7dUu5c0u2cEq0bkqybEmwakmuaEisZkiqZEeoYkemYEakXkaiXEVgLjQ8HCjaJlMkAAABI0lEQVR42u3Mx3qDMBSE0Z/03nsvdhxjcnn/twsYjISR5MUkO5+V9N2ZYUPEpogtEdsidkTsitgTsS/iQMShiCMRxyJORJyKOBNxLuJCxKWIKxHXIm5E3Iq4E3Ev4kHEo4gnEc8iXkS8inhLymrJBO8J2UIiw0dc5sRDfEbVRWr1o/pbMMWox9yz6zcLIzMbBTD2VaHu7fr1gjXGA3w5baj5+H0w6x09TDpdaP7rDZhn0sd3y89Y9fcHbPnoYdroZ2w6dQNmg6OHfG4QyrsBC8gdZpVQxtqF4M1mjepFURThTLNgMYsePxaX2WqY6D8GSm2grK2slbGBciHZ9hOE2smNpTuxenhieCdeH06E7qTqvYnImWTbbUSPlKL1wHrgTwZ+AWq+3H5MpRkwAAAAAElFTkSuQmCC';
+const SNOWY_PEAKS =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX////6/P/4+//g7vjf7fbf7fTe7fje7fTe7PTd7Pjc7Pfd7PTc6/Xc6/Pb6/fb6/Xb6vTa6/fa6/Xa6vfZ6vfZ6vba6vTZ6fXY6vfY6vbY6ffY6fXX6fbX6fTW6fbX6PXW6PbW6PTV6PbV6PXU6PbV5/XU5/bU5/TU5vXT5/bS5/XT5vTS5vXS5vTR5vXR5fXQ5fXP5fXP5PXO5PXO5PTN5PTN4/TM4/TL4/TM4vTL4vTK4vTO3OqqvtKbrsFcfGgMVnjaAAAC7klEQVR42u2Ta3eaQBCGp0kbTbBBMWDMoiCWEOsFtV4SdcP//1edYQUWwSye9kNOT58POVlm3mdmUWG/3+9et5vVYj6bjoMgGE9n88Vqs33d7SsBcX67WmI+EKBhudpWNcBu94bzlyGO9weEj0uES9zhbVcFSPMYdxzmOKi4xACbNa0/DgY91rGIDusNgjFdY72tAKzXq0U4pTyGm80m/iXDNFys1psqApwf4nwc32x+J9DRYbhDuMRrqIF5vD+zKK0R5LBYfIvFcqUEBZPRsNex9IaW0NCtTm84mqDglxIIQ3z/uEBDqydoDVrBH4d4CyUwowUsA+fXa4I67mBYtAJeQglM4jeg0wLfBLSCLt5COFcC4xffYVZ8gVSABos5/sskVAOjYNjvWrqWxGOFplvd/jD4OZkpgSAYiA1yAtpgGIzGEyW0wYCZeqOeGer1hm6yQUXBD8+1uySofU2okaBre97zSA34nuswk74GqYC+CCZzXM9/VgO+77o2M+LPUcTpUzSYXS3/DB7m4ztomrhEjb7LeAPbdb0KgOe5fTIY6Y8B51O+Xynvgeu6js2Yaep6Q6DrpsmY7biVABthXdPEFfRj3sBTl9nl8JNzLMANSGEahm5QGuNn8/zEAE8xD0g7hrfbdHgqhxO5J/B4BEMtBOv43+M5YkHuCTxk0HwuDGfgvNAAbZljQ/sMnEOhAVoSPKFVCuYBThvgXiKdcF8GlwRZB+Tz8IEhLhca4C6F8yusH0TDXYFjPjEkj+E2gecm8NsT+IkgaQBVQ6F80gA3Ai4uANkl+I0ElYlDjNwAhXyp4Zg/Cg4FAS+dwAsLiPq7PAGuEc5LJ3B+LUjLSf2Q1aGk4V1uyJVTQdYAqgZ5v7T+nu0IuXwmkAwf1yE3IJuQjZDLkiBpAK5o4BUEV6UNh5J8SR1y9VzDoZgvqasFV2frByFQNCgFX/6Q/4J/SxDJTy84/DVBFEmlSw6fRhBFUumiw2cRRJFUuuzwG+qew9oBo+n5AAAAAElFTkSuQmCC';
+
 const ATTACHMENTS = [
-  {id: 1, src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png', alt: 'River through a valley', label: 'valley.jpg'},
-  {id: 2, src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-2.png', alt: 'Foggy mountain peak', label: 'mountain.jpg'},
-  {id: 3, src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-3.png', alt: 'Golden retriever puppy', label: 'puppy.jpg'},
-  {id: 4, src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-4.png', alt: 'Bridge at sunset', label: 'bridge.jpg'},
+  {
+    id: 1,
+    src: NIGHT_FOREST,
+    alt: 'Forest at night under a crescent moon',
+    label: 'forest-night.jpg',
+  },
+  {
+    id: 2,
+    src: MISTY_VALLEY,
+    alt: 'Misty mountain valley',
+    label: 'misty-valley.jpg',
+  },
+  {
+    id: 3,
+    src: GOLDEN_SUNSET,
+    alt: 'Golden sunset over mountains',
+    label: 'golden-sunset.jpg',
+  },
+  {
+    id: 4,
+    src: SNOWY_PEAKS,
+    alt: 'Snowy mountain peaks',
+    label: 'snowy-peaks.jpg',
+  },
 ];
 
 export default function ThumbnailGallery() {
@@ -37,9 +73,9 @@ export default function ThumbnailGallery() {
           />
         ))}
       </Stack>
-      {selected != null && (
-        <Text type="supporting" color="active">
-          Previewing: {selected}
+      {selected && (
+        <Text type="supporting" color="secondary">
+          Selected: {selected}
         </Text>
       )}
     </Stack>