@kolkrabbi/kol-component 0.317.1 → 0.317.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.1",
+  "version": "0.317.3",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.53.1"
+    "@kolkrabbi/kol-icons": "^0.53.3"
   },
   "files": [
     "src",

package/src/index.js

@@ -150,7 +150,7 @@ export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as DocumentEditor } from './organisms/DocumentEditor.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow, TABBAR_H, TABBAR_PILL_INSET, TABBAR_PILL_TAB, tabbarPillWidth } from './molecules/TabsRow.jsx'
-/** @deprecated 2026-10-17 — alias of `TabsRow look="chip"` */
+/** @deprecated 2026-10-17 — alias of `TabsRow variant="chip"` */
 export { default as TabChips } from './molecules/TabChips.jsx'
 
 // organisms
@@ -180,7 +180,7 @@ export { default as Carousel } from './molecules/Carousel.jsx'
  * stage reaches for it instead of re-typing the button markup, which is how the
  * three in-package copies (and kol-website's CarouselNavigation) happened. */
 export { default as EmblaNav } from './molecules/EmblaNav.jsx'
-/** @deprecated 2026-10-17 — alias of `TabsRow look="stacked" placement="phone"` */
+/** @deprecated 2026-10-17 — alias of `TabsRow variant="stacked" placement="phone"` */
 export { default as MobileTabBar } from './molecules/MobileTabBar.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as PageHeader, PAGE_HEADER_ROLES } from './molecules/PageHeader.jsx'

package/src/molecules/MobileTabBar.jsx

@@ -1,10 +1,10 @@
 import TabsRow, { TABBAR_H } from './TabsRow.jsx'
 
 /**
- * @deprecated 2026-10-17 — alias of `TabsRow look="stacked" placement="phone"` (TabsStackedLayout). Drops when nobody imports it (04-retirements.md).
+ * @deprecated 2026-10-17 — alias of `TabsRow variant="stacked" placement="phone"` (TabsStackedLayout). Drops when nobody imports it (04-retirements.md).
  * MobileTabBar — Old name for the stacked phone bar. Same props: `tabs` (`{ value, label, icon }`) · `value` · `onChange` · `className`.
  */
 export { TABBAR_H }
 export default function MobileTabBar(props) {
-  return <TabsRow look="stacked" placement="phone" {...props} />
+  return <TabsRow variant="stacked" placement="phone" {...props} />
 }

package/src/molecules/PageControls.jsx

@@ -13,7 +13,7 @@ import TabsRow from './TabsRow.jsx'
  *
  * The slots, in the order they are drawn — an empty slot is not there:
  *   row 1   toggles · views · count     the series chips (Tag), the view switches (SegmentedToggle), the readout
- *   row 2   jump                        the section tabs (TabsRow look="chip"), scrolling sideways when long
+ *   row 2   jump                        the section tabs (TabsRow variant="chip"), scrolling sideways when long
  *   row 3   legend                      a dot and a name per series, as many columns as series
  *
  * STICKY by default: `sticky top-0` on the page's z-sticky rung, a hairline under it, the surface painted so the
@@ -51,7 +51,7 @@ export default function PageControls({ toggles, views = [], count, jump, legend,
       )}
       {jump && (
         <div className="overflow-x-auto">
-          <TabsRow look="chip" size="sm" ariaLabel={jump.label} value={jump.value} onChange={jump.onChange} tabs={jump.tabs} />
+          <TabsRow variant="chip" size="sm" ariaLabel={jump.label} value={jump.value} onChange={jump.onChange} tabs={jump.tabs} />
         </div>
       )}
       {legend && legend.length > 0 && (

package/src/molecules/TabChips.jsx

@@ -1,9 +1,9 @@
 import TabsRow from './TabsRow.jsx'
 
 /**
- * @deprecated 2026-10-17 — alias of `TabsRow look="chip"` (TabsStackedLayout: one tab component). Drops when nobody imports it (04-retirements.md).
- * TabChips — Old name for TabsRow's chip look. Same props: `tabs` · `value` · `onChange` · `size` · `ariaLabel` · `className`.
+ * @deprecated 2026-10-17 — alias of `TabsRow variant="chip"` (TabsStackedLayout: one tab component). Drops when nobody imports it (04-retirements.md).
+ * TabChips — Old name for TabsRow's chip variant. Same props: `tabs` · `value` · `onChange` · `size` · `ariaLabel` · `className`.
  */
 export default function TabChips(props) {
-  return <TabsRow look="chip" {...props} />
+  return <TabsRow variant="chip" {...props} />
 }

package/src/molecules/TabsRow.jsx

@@ -24,16 +24,21 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  * @param {Function} onClose    () => void — show + wire the leading close button
  * @param {Function} onMinimise () => void — show + wire the trailing minimise chevron
  *
- * ONE TAB COMPONENT, FOUR LOOKS (TabsStackedLayout, kol-monitor 2026-10-17 — four components drew one control):
+ * ONE TAB COMPONENT, FOUR VARIANTS (TabsStackedLayout, kol-monitor 2026-10-17 — four components drew one control). The prop
+ * is `variant`, the one word the DS uses for a look (control-chrome: "variant is the look"); `look` was an agent's coinage
+ * on the merge and is read as a silent alias until no published consumer passes it (the user, 2026-10-30: *"USE VARIANT"*).
  * @param {'scroll'|'wrap'} [overflow='scroll']  A ROW WIDER THAN ITS COLUMN (TabsRowOverflow, kol-website 2026-10-29 — six
  *   underline tabs are 394px, so at 390 the page scrolled sideways and record wrapped the row in its own div): `scroll`
  *   keeps one line that scrolls sideways with no scrollbar, `.kol-scroll-fade--x` fading the clipped edge(s), and the
  *   active tab scrolled into view when it changes — arrow keys included; `wrap` breaks the tabs onto a second line.
- *   Every look but `stacked`, which has its phone bar
- * @param {'underline'|'chip'|'text'|'stacked'} [look='underline']
+ *   Every variant but `stacked`, which has its phone bar
+ * @param {'underline'|'chip'|'text'|'stacked'} [variant='underline']
+ * @param {string} [look]  @deprecated 2026-10-30 — the old spelling of `variant`; `variant` wins when both are passed
+ * @param {'mono'|'sans'} [type='mono']  `underline` only: the tab's type
  * @param {boolean} [filled=false] - `chip` only: every chip shows at rest (Button `tab-filled`), so the row reads as choices
- *        underline — this row, as it always was; a tab's `icon` sits before its label. `size="md"` is the sans body
- *        face with a 20px glyph in a 48px row (the user's ref, Adobe's tab strip, 2026-10-29)
+ *        underline — this row, as it always was; a tab's `icon` sits before its label. `type` picks its type: `mono`
+ *                    (default, the mono-12 row) or `sans` (the neutral sans at 300, a 20px glyph in a 40px row — the
+ *                    user's ref, Adobe's tab strip, 2026-10-29; named `type` by him, 2026-10-30)
  *        chip      — the active tab a filled chip, the rest quiet (was `TabChips`); `size` is the control rung
  *        text      — flat helper-type tabs, the active one bright (was kol-shell's `TabStrip`); `size` is the
  *                    helper size (default 14), `tracked` adds 1px tracking
@@ -71,13 +76,14 @@ export const tabbarPillWidth = (count) => count * TABBAR_PILL_TAB + 14
 /* the collapse's motion — one duration for the width and the glyph swap (300, user 2026-10-23: 180 read as abrupt) */
 const COLLAPSE_MS = 300
 
-export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMinimise, look = 'underline', filled = false, placement = 'inline', shape = 'bar', collapsed = false, onExpand, edge, border, shadow, dock, active, foldable, folded, onFoldChange, foldSide, size, tracked = false, overflow = 'scroll', ariaLabel, className, style }) {
+export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMinimise, variant, look: lookLegacy, type = 'mono', filled = false, placement = 'inline', shape = 'bar', collapsed = false, onExpand, edge, border, shadow, dock, active, foldable, folded, onFoldChange, foldSide, size, tracked = false, overflow = 'scroll', ariaLabel, className, style }) {
   const tabs = raw.map((t) => ({ ...t, id: t.id ?? t.value }))
+  const look = variant ?? lookLegacy ?? 'underline'
   const wrap = overflow === 'wrap'
   if (look === 'chip') return <Overflow mode={overflow} value={value}><ChipTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 'sm'} filled={filled} ariaLabel={ariaLabel} className={`${wrap ? 'flex-wrap ' : ''}${className ?? ''}`} /></Overflow>
   if (look === 'text') return <Overflow mode={overflow} value={value}><TextTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 14} tracked={tracked} className={`${wrap ? 'flex-wrap gap-y-2 ' : ''}${className ?? 'gap-6'}`} style={style} /></Overflow>
   if (look === 'stacked') return <StackedTabs tabs={tabs} value={value} onChange={onChange} placement={placement} shape={shape} collapsed={collapsed} onExpand={onExpand} edge={edge} border={border} shadow={shadow} dock={dock} active={active} foldable={foldable} folded={folded} onFoldChange={onFoldChange} foldSide={foldSide} ariaLabel={ariaLabel} className={className ?? ''} />
-  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} size={size} /></Overflow>
+  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} type={type} /></Overflow>
 }
 
 /* `overflow="scroll"`: the row in a sideways scroller that fades its clipped edges and keeps the active tab (`data-active`)
@@ -265,9 +271,10 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
   )
 }
 
-function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size }) {
-  /* `size="md"` (2026-10-29, the user's ref — Adobe's tab strip): the sans body face, a 20px glyph, a 48px row, 24 between tabs */
-  const md = size === 'md'
+function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, type }) {
+  /* `type="sans"` (2026-10-29, the user's ref — Adobe's tab strip): the neutral sans at 300 (his word, 2026-10-30), a 20px glyph at the
+   * set's 1.5 stroke and a 1px underline (his word, 2026-10-30), a 40px row (his word, 2026-10-30), 24 between tabs — review 8: *"the problem … was thickness and stroke"* */
+  const md = type === 'sans'
   const listRef = useRef(null)
   const activeIdx = tabs.findIndex((t) => t.id === value)
 
@@ -281,7 +288,7 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size
   }
 
   return (
-    <div className={`flex items-stretch gap-4 ${wrap ? (md ? 'min-h-12' : 'min-h-10') : md ? 'h-12' : 'h-10'}`}>
+    <div className={`flex items-stretch gap-4 ${wrap ? 'min-h-10' : 'h-10'}`}>
       {onClose && (
         /* the one close, at the rung whose glyph is the 12 this hand-rolled
          * (2026-09-03) — xs SOLO is 12, so the drawing does not move */
@@ -301,7 +308,7 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size
               tabIndex={isActive || (activeIdx === -1 && i === 0) ? 0 : -1}
               onClick={() => onChange?.(t.id)}
               className={[
-                `group ${md ? 'kol-sans-body-02 gap-2.5' : 'kol-mono-12 gap-2'} flex items-center cursor-pointer border-b-2`,
+                `group ${md ? 'kol-tab-sans kol-sans-body-02 font-light gap-2.5 border-b' : 'kol-mono-12 gap-2 border-b-2'} flex items-center cursor-pointer`,
                 isActive
                   ? 'text-emphasis border-fg'
                   : 'text-meta hover:text-emphasis border-transparent',

package/src/organisms/ColorPickerPopover.jsx

@@ -74,9 +74,9 @@ function ChannelStrip({ ch, hex, hsva, onHsva }) {
         onKeyDown={(e) => { const d = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 }[e.key]; if (d) { e.preventDefault(); set(value + d * (e.shiftKey ? 10 : 1)) } }}>
         <span className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ left: `${pct}%`, boxShadow: '0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.35)', background: hex.slice(0, 7) }} />
       </div>
-      <div className="w-14 shrink-0">
-        <Input size="sm" type="number" value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
-      </div>
+      {/* the box is 56 wide by the Input's own `width` — a utility width was not honoured in a consumer (ref 81), and `chars`
+        * alone did not hold against the row's flex (0.317.2, seen in the review-8 pass) */}
+      <Input size="sm" type="number" chars={3} width="56px" value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
     </div>
   )
 }
@@ -212,8 +212,8 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
     return hsva && (
       <div className={`flex w-full flex-col gap-3 ${className}`.trim()}>
         <div className="flex items-center justify-between gap-3">
-          <span className="kol-sans-body-02 text-emphasis">{title ?? label}</span>
-          {modes && <Dropdown variant="nav" size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
+          <span className="kol-eyebrow text-fg-80">{title ?? label}</span>
+          {modes && <Dropdown size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
         </div>
         {hexField}
         <div className="w-full overflow-hidden rounded-[var(--kol-radius-xs)]" style={{ height: 200 }}>

package/src/organisms/MediaLibraryPages.jsx

@@ -262,23 +262,47 @@ function useBucketLibrary({ client, bucket, defaults, settings: controlled, onSe
 
 /* ── shared pieces, kol-r2b2's ─────────────────────────────────────────────── */
 
-/* The frame is square until the file reports its size, then snaps to its nearest preset. A photo
- * near a preset fills it (`cover`, a few percent cropped); a vector or anything past the ladder's
- * ends — a 2.8:1 wordmark, an 11:1 nav logo — shows whole (`contain`, kol-client-olina 2026-09-25). */
-function ImageFrame({ src, vector }) {
+/* The frame is square until the file reports its size. `mode="native"` (the default since
+ * MediaPreviewNativeRatio, kol-website 2026-10-30 — a certificate lost its top and bottom) then takes
+ * the file's own ratio and shows it whole, a very tall one capped at the media box's height (the pane
+ * shrinks that box to what is left under the facts) so it never runs off. `mode="preset"` is the older look: snap to
+ * the nearest preset; a photo near one fills it (`cover`, a few percent cropped); a vector or anything
+ * past the ladder's ends — a 2.8:1 wordmark, an 11:1 nav logo — shows whole (`contain`,
+ * kol-client-olina 2026-09-25). */
+function ImageFrame({ src, vector, mode = 'native' }) {
   const [frame, setFrame] = useState({ ratio: '1 / 1', contain: !!vector })
+  const native = mode !== 'preset'
   const onLoad = (e) => {
     const { naturalWidth: w, naturalHeight: h } = e.target
     const r = w && h ? w / h : 1
-    setFrame({ ratio: nearestRatio(w, h), contain: vector || r > 16 / 9 || r < 9 / 16 })
+    if (native) setFrame({ ratio: w && h ? `${w} / ${h}` : '1 / 1', contain: true })
+    else setFrame({ ratio: nearestRatio(w, h), contain: vector || r > 16 / 9 || r < 9 / 16 })
   }
   return (
-    <div className="w-full rounded overflow-hidden flex items-center justify-center" style={{ aspectRatio: frame.ratio }}>
+    <div className={`w-full rounded overflow-hidden flex items-center justify-center${native ? ' max-h-full' : ''}`} style={{ aspectRatio: frame.ratio }}>
       <img src={src} alt="" className={`w-full h-full ${frame.contain ? 'object-contain' : 'object-cover'}`} loading="lazy" onLoad={onLoad} />
     </div>
   )
 }
 
+/* `,` TOGGLES THE SETTINGS DRAWER (MediaPreviewNativeRatio, kol-website 2026-10-30: the media app is
+ * not on AppHub, which binds its own). AppHub's guard — no modifiers, no repeat, not while typing.
+ * `on` is false when the gear hands over (`onOpenSettings`): the host's key owns it then. */
+function useSettingsKey(key, on, toggle) {
+  useEffect(() => {
+    if (!key || !on) return undefined
+    const onKey = (e) => {
+      if (!(e.key === key || (key === ',' && e.code === 'Comma')) || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return
+      const el = e.target
+      if (el?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el?.tagName ?? '')) return
+      e.preventDefault()
+      toggle()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [key, on, toggle])
+}
+
 
 /* TAGS IN THE PREVIEW PANE (the media D1 pass, 2026-09-25). The file's tags as removable chips and
  * one field that adds on Enter — comma-separated adds several. Tags are the CLIENT's (`setTags`);
@@ -1127,6 +1151,15 @@ export function MediaLibraryBrowse({
   searchPlaceholder = 'Search this bucket',
   /* `o.displayName` on a listed object is its LABEL in every view, Quick Look and search (kol-fxr
    * 2026-10-08: names not unique, so the key is an id). Absent, the label is the key, as before. */
+  /* `previewFrame` — how the preview pane and the column / Quick Look frame an image
+   * (MediaPreviewNativeRatio, kol-website 2026-10-30): `'native'` the file's own ratio, shown whole;
+   * `'preset'` snapped to the nearest preset and filled. Grid tiles are not part of it. */
+  previewFrame = 'native',
+  /* `settingsKey` — the key that toggles the settings drawer (`','`, AppHub's; `null` for none).
+   * `settingsOpen` / `onSettingsOpenChange` — the drawer, controlled, so a host can drive it. */
+  settingsKey = ',',
+  settingsOpen: settingsOpenProp,
+  onSettingsOpenChange,
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -1141,7 +1174,10 @@ export function MediaLibraryBrowse({
    * say it is writable. */
   const writable = lib.writable || (!!fileActions && !!bucketMeta.writable)
   const switchBucket = (id, pfx = '') => { if (bucket == null) setOwnBucket(id); onBucketChange?.(id); setPrefix(pfx) }
-  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [ownSettingsOpen, setOwnSettingsOpen] = useState(false)
+  const settingsOpen = settingsOpenProp ?? ownSettingsOpen
+  const setSettingsOpen = (v) => { if (settingsOpenProp == null) setOwnSettingsOpen(v); onSettingsOpenChange?.(v) }
+  useSettingsKey(settingsKey, !onOpenSettings, () => setSettingsOpen(!settingsOpen))
   const [trashOpen, setTrashOpen] = useState(false)
   const [pickedFile, setPickedFile] = useState(null)
   useEffect(() => { onPickFile?.(pickedFile) }, [pickedFile]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -1886,7 +1922,7 @@ export function MediaLibraryBrowse({
         formatSize={formatSize} formatDate={formatDate} width={previewWidth}
         renderDetails={detailsFor}
         renderPreview={(o) => {
-          if (isImage(o.contentType)) return <ImageFrame src={mediaUrl(o.key)} vector={o.contentType === 'image/svg+xml'} />
+          if (isImage(o.contentType)) return <ImageFrame src={mediaUrl(o.key)} vector={o.contentType === 'image/svg+xml'} mode={previewFrame} />
           const poster = posterFor(o.key, keySet)
           return <KindPreview o={o} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
         }} />
@@ -2102,7 +2138,7 @@ export function MediaLibraryBrowse({
                 renderDetails={(o) => detailsFor({ ...o, key: o.key.slice(VROOT.length) })}
                 renderPreview={(o) => {
                   const real = { ...o, key: o.key.slice(VROOT.length) }
-                  if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} vector={real.contentType === 'image/svg+xml'} />
+                  if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} vector={real.contentType === 'image/svg+xml'} mode={previewFrame} />
                   const poster = posterFor(real.key, keySet)
                   return <KindPreview o={real} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
                 }}
@@ -2808,7 +2844,7 @@ export function MediaLibraryBrowse({
         {tabs?.length > 0 && (
           <>
             <div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
-            <TabsRow look="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
+            <TabsRow variant="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
           </>
         )}
       </div>
@@ -3014,6 +3050,11 @@ export function MediaLibraryLibrary({
    * concept only one page has stay put — `thumbnailFor`, `folderMeta` and
    * `stackView` are folder and stack concepts and are correctly absent here. */
   formatDate = defaultFormatDate,
+  /* the settings drawer's key and its controlled state — the same seam as the browse page (the
+   * drawer is on both; MediaPreviewNativeRatio, kol-website 2026-10-30) */
+  settingsKey = ',',
+  settingsOpen: settingsOpenProp,
+  onSettingsOpenChange,
 }) {
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket
@@ -3021,7 +3062,10 @@ export function MediaLibraryLibrary({
   const { buckets, bucketMeta, settings, setSettings, objects, setObjects, error, mediaUrl, downloadUrl, writable } = lib
   /* the same one dialog idiom as the browse page — see its note on `useModal()` */
   const modal = useModal()
-  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [ownSettingsOpen, setOwnSettingsOpen] = useState(false)
+  const settingsOpen = settingsOpenProp ?? ownSettingsOpen
+  const setSettingsOpen = (v) => { if (settingsOpenProp == null) setOwnSettingsOpen(v); onSettingsOpenChange?.(v) }
+  useSettingsKey(settingsKey, header, () => setSettingsOpen(!settingsOpen))
   const [editingKey, setEditingKey] = useState(null)
   const [editingValue, setEditingValue] = useState('')
   const [renaming, setRenaming] = useState(false)
@@ -3238,7 +3282,7 @@ export function MediaLibraryLibrary({
       {tabs?.length > 0 && (
         <>
           <div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
-          <TabsRow look="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
+          <TabsRow variant="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
         </>
       )}
     </div>