oneslash-design-system 1.6.0 → 1.7.1

package/dist/components/menu.jsx

@@ -2,8 +2,9 @@
 import React, { forwardRef } from 'react';
 var Menu = forwardRef(function (_a, ref) {
     var children = _a.children, width = _a.width, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (<div ref={ref} className={"\n          bg-light-background-accent300 dark:bg-dark-background-accent300\n          rounded-[8px]\n          shadow-lg\n          overflow-hidden\n          ".concat(className, "\n        ")} style={{ width: width || 'auto' }}>
-        <div className="p-[10px]">
+    return (<div ref={ref} className={"\n          bg-light-background-accent300 dark:bg-dark-background-accent300\n          rounded-[12px]\n          shadow-lg\n          dark:ring-1 dark:ring-dark-misc-divider\n          overflow-hidden\n          ".concat(className, "\n        ")} style={{ width: width || 'auto' }}>
+        {/* 4px padding keeps the 8px item corners concentric with the 12px menu corners */}
+        <div className="p-1">
           {children}
         </div>
       </div>);

package/dist/components/menuItem.d.ts

@@ -19,6 +19,13 @@ interface MenuItemProps {
     };
     iconRight?: string;
     rightAction?: React.ReactNode;
+    /** ARIA role; Select passes 'option'. Defaults to 'menuitem'. */
+    role?: string;
+    id?: string;
+    /** Keyboard highlight used by Select's listbox */
+    isActive?: boolean;
+    /** Select keeps focus on its trigger and passes -1 */
+    tabIndex?: number;
 }
-export default function MenuItem({ href, iconName, icon, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, rightAction, }: MenuItemProps): JSX.Element;
+export default function MenuItem({ href, iconName, icon, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, rightAction, role, id, isActive, tabIndex, }: MenuItemProps): JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -1,106 +1,33 @@
 'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
 import NextLink from 'next/link';
 import UserImage from './userImage';
 import Tag from './tag';
+import { focusRing, pressFeedbackAny, stateTransition } from './sharedStyles';
 export default function MenuItem(_a) {
-    var _this = this;
-    var href = _a.href, iconName = _a.iconName, icon = _a.icon, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight, rightAction = _a.rightAction;
-    var _d = useState(null), IconLeft = _d[0], setIconLeft = _d[1];
-    var _e = useState(null), IconRight = _e[0], setIconRight = _e[1];
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, IconComponent, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('lucide-react')];
-                case 2:
-                    module_1 = _a.sent();
-                    IconComponent = module_1[iconName];
-                    return [2 /*return*/, IconComponent || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    useEffect(function () {
-        var fetchIcon = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!iconName) return [3 /*break*/, 2];
-                        _a = setIconLeft;
-                        return [4 /*yield*/, loadIcon(iconName)];
-                    case 1:
-                        _a.apply(void 0, [_c.sent()]);
-                        _c.label = 2;
-                    case 2:
-                        if (!iconRight) return [3 /*break*/, 4];
-                        _b = setIconRight;
-                        return [4 /*yield*/, loadIcon(iconRight)];
-                    case 3:
-                        _b.apply(void 0, [_c.sent()]);
-                        _c.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcon();
-    }, [iconName, iconRight, loadIcon]);
+    var _b;
+    var href = _a.href, iconName = _a.iconName, icon = _a.icon, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, tag = _a.tag, iconRight = _a.iconRight, rightAction = _a.rightAction, _e = _a.role, role = _e === void 0 ? 'menuitem' : _e, id = _a.id, _f = _a.isActive, isActive = _f === void 0 ? false : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 0 : _g;
+    // Synchronous lookup so icons render on the first paint
+    var IconLeft = iconName ? LucideIcons[iconName] : null;
+    var IconRight = iconRight ? LucideIcons[iconRight] : null;
     // Size-based icon and text classes
     var iconSize = { tiny: 'w-4 h-4', small: 'w-5 h-5', medium: 'w-6 h-6' }[size];
     var labelClass = { tiny: 'text-caption', small: 'text-body2', medium: 'text-body1' }[size];
     var secondLabelClass = size === 'tiny' ? 'text-caption' : 'text-body2';
-    var tagSize = { tiny: 'tiny', small: 'small', medium: 'medium' }[size];
+    // One step smaller than the row so a tag never makes its row taller
+    var tagSize = { tiny: 'tiny', small: 'tiny', medium: 'small' }[size];
     var paddingClass = size === 'tiny' ? 'p-1' : 'p-2';
-    var content = (<div className={"\n        flex items-center ".concat(paddingClass, " rounded-[8px] cursor-pointer justify-between transition-colors duration-200 ease-in-out\n        ").concat(isSelected
+    var content = (<div id={id} role={href ? undefined : role} 
+    // A link wrapper is already focusable; otherwise the row itself takes focus
+    tabIndex={href ? undefined : tabIndex} aria-selected={role === 'option' ? !!isSelected : undefined} className={"\n        flex items-center ".concat(paddingClass, " rounded-[8px] cursor-pointer justify-between text-left ").concat(stateTransition, " ").concat(pressFeedbackAny, " ").concat(focusRing, "\n        ").concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
-            : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
+            : "hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200 ".concat(isActive ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : ''), "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick} onKeyDown={function (e) {
+            if (!href && e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }}>
       {/* Left group: icon/userImg + label with 8px gap */}
       <div className="flex items-center gap-2 min-w-0">
         {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : icon ? (<span className={"".concat(iconSize, " flex-shrink-0 flex items-center justify-center")}>{icon}</span>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
@@ -116,12 +43,14 @@ export default function MenuItem(_a) {
 
       {/* Right group: tag + icon aligned to the right */}
       <div className="flex items-center gap-2 flex-shrink-0">
-        {tag && (<Tag variant={tag.variant || 'contained'} size={tagSize} label={tag.label} iconName={tag.iconName} color={tag.color}/>)}
+        {tag && (<Tag variant={tag.variant || 'contained'} size={tagSize} label={tag.label} iconName={tag.iconName} 
+        // 'default' has a fill that stays visible on the menu background
+        color={(_b = tag.color) !== null && _b !== void 0 ? _b : 'default'}/>)}
         {IconRight && (<IconRight className={"".concat(iconSize, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary', " flex-shrink-0")} strokeWidth={2}/>)}
         {rightAction && (<div onClick={function (e) { return e.stopPropagation(); }}>
             {rightAction}
           </div>)}
       </div>
     </div>);
-    return href ? <NextLink href={href}>{content}</NextLink> : content;
+    return href ? <NextLink href={href} className={"block rounded-[8px] ".concat(focusRing)}>{content}</NextLink> : content;
 }

package/dist/components/modal.jsx

@@ -1,38 +1,77 @@
 'use client';
-import React, { useEffect } from 'react';
+import React, { useEffect, useId, useRef } from 'react';
+import { overlayHidden, overlayTransition, overlayVisible } from './sharedStyles';
+import { useOverlayTransition } from './useOverlayTransition';
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 export default function Modal(_a) {
     var isOpen = _a.isOpen, title = _a.title, secondTitle = _a.secondTitle, children = _a.children, onClose = _a.onClose, actions = _a.actions, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
-    // close modal by esc keypress
+    var panelRef = useRef(null);
+    var titleId = useId();
+    var _c = useOverlayTransition(isOpen), mounted = _c.mounted, visible = _c.visible;
+    // Keep onClose in a ref so a new function each render doesn't re-run the focus effect
+    var onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    // Move focus into the panel, trap Tab inside it, close on Escape,
+    // lock page scroll, and give focus back to the trigger on close
     useEffect(function () {
-        if (!isOpen)
+        var _a;
+        // Wait for the panel to mount before moving focus into it
+        if (!isOpen || !mounted)
             return;
+        var previouslyFocused = document.activeElement;
+        var panel = panelRef.current;
+        var firstFocusable = panel === null || panel === void 0 ? void 0 : panel.querySelector(FOCUSABLE);
+        (_a = (firstFocusable !== null && firstFocusable !== void 0 ? firstFocusable : panel)) === null || _a === void 0 ? void 0 : _a.focus();
+        var previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
         var handleKeyDown = function (e) {
             if (e.key === 'Escape') {
-                onClose();
+                onCloseRef.current();
+                return;
+            }
+            if (e.key !== 'Tab' || !panel)
+                return;
+            var focusable = Array.from(panel.querySelectorAll(FOCUSABLE));
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            var first = focusable[0];
+            var last = focusable[focusable.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
             }
         };
         window.addEventListener('keydown', handleKeyDown);
         return function () {
+            var _a;
             window.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = previousOverflow;
+            (_a = previouslyFocused === null || previouslyFocused === void 0 ? void 0 : previouslyFocused.focus) === null || _a === void 0 ? void 0 : _a.call(previouslyFocused);
         };
-    }, [isOpen, onClose]);
+    }, [isOpen, mounted]);
     // Determine width based on size prop
     var sizeConfig = {
         small: { width: 'w-[480px]', maxWidth: '480px' },
         medium: { width: 'w-[600px]', maxWidth: '600px' },
         large: { width: 'w-[1024px]', maxWidth: '1024px' },
     };
-    var _c = sizeConfig[size], modalWidth = _c.width, maxWidth = _c.maxWidth;
+    var _d = sizeConfig[size], modalWidth = _d.width, maxWidth = _d.maxWidth;
     // close modal by clicking elsewhere
     var handleOverlayClick = function (e) {
         if (e.target === e.currentTarget) {
             onClose();
         }
     };
-    if (!isOpen)
+    if (!mounted)
         return null;
-    return (<div className="fixed bg-light-misc-scrim/40 dark:bg-dark-misc-scrim/40 flex items-center justify-center z-50" style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
-      <div className={"bg-light-background-default dark:bg-dark-background-default rounded-[8px] ".concat(modalWidth, " flex flex-col")} style={{
+    return (<div className={"fixed bg-light-misc-scrim/40 dark:bg-dark-misc-scrim/40 flex items-center justify-center z-50\n        transition-opacity duration-150 ease-out motion-reduce:transition-none ".concat(visible ? 'opacity-100' : 'opacity-0')} style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick}>
+      <div ref={panelRef} role="dialog" aria-modal="true" aria-labelledby={title ? titleId : undefined} tabIndex={-1} className={"bg-light-background-default dark:bg-dark-background-accent100 dark:ring-1 dark:ring-dark-misc-divider rounded-[8px] ".concat(modalWidth, " flex flex-col outline-none\n          ").concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)} style={{
             maxWidth: maxWidth,
             width: 'calc(100vw - 64px)',
             maxHeight: '90vh',
@@ -40,7 +79,7 @@ export default function Modal(_a) {
         }}>
         {(title || actions) && (<div className="px-6 py-3 border-b border-light-misc-divider dark:border-dark-misc-divider flex justify-between items-start" style={{ flexShrink: 0 }}>
             {title && (<div className="flex flex-col">
-                <h2 id="modal-title" className="text-h5 text-light-text-primary dark:text-dark-text-primary">
+                <h2 id={titleId} className="text-h5 text-light-text-primary dark:text-dark-text-primary">
                   {title}
                 </h2>
                 {secondTitle && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">
@@ -56,8 +95,8 @@ export default function Modal(_a) {
             overflowY: 'auto',
             flexGrow: 1,
             minHeight: 0,
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
+            // A thin scrollbar is the only cue that long content scrolls
+            scrollbarWidth: 'thin',
         }}>
           {children}
         </div>

package/dist/components/navigation.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function Navigation(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (<nav className={"\n        bg-light-background-default dark:bg-dark-background-default\n        border-r border-light-misc-divider dark:border-dark-misc-divider\n        p-[10px]\n        ".concat(className, "\n      ")}>
+    return (<nav className={"\n        bg-light-background-default dark:bg-dark-background-default\n        border-r border-light-misc-divider dark:border-dark-misc-divider\n        p-2\n        ".concat(className, "\n      ")}>
       {children}
     </nav>);
 }

package/dist/components/popover.jsx

@@ -1,52 +1,55 @@
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
+import { overlayHidden, overlayTransition, overlayVisible } from './sharedStyles';
+import { useOverlayTransition } from './useOverlayTransition';
 export default function Popover(_a) {
     var id = _a.id, anchorEl = _a.anchorEl, open = _a.open, onClose = _a.onClose, children = _a.children;
     var _b = useState(null), popoverElement = _b[0], setPopoverElement = _b[1];
     var _c = useState(false), hasMounted = _c[0], setHasMounted = _c[1];
+    var _d = useOverlayTransition(open), mounted = _d.mounted, visible = _d.visible;
     // Initialize Popper.js
-    var _d = usePopper(anchorEl, popoverElement, {
+    var _e = usePopper(anchorEl, popoverElement, {
         placement: 'bottom-start', // Default placement, can be customized
         modifiers: [
-            { name: 'offset', options: { offset: [0, 8] } }, // Offset for spacing between anchor and popover
+            { name: 'offset', options: { offset: [0, 4] } }, // Same 4px gap as the Select menu and Tooltip
         ],
-    }), styles = _d.styles, attributes = _d.attributes;
-    // Handle outside clicks to close the popover
+    }), styles = _e.styles, attributes = _e.attributes;
+    // Close on outside clicks and Escape. Clicks on the anchor are left to the
+    // anchor's own toggle, otherwise the popover would close and reopen.
     useEffect(function () {
         var handleClickOutside = function (event) {
-            if (popoverElement && !popoverElement.contains(event.target) && anchorEl) {
+            var target = event.target;
+            if (popoverElement && !popoverElement.contains(target) && anchorEl && !anchorEl.contains(target)) {
                 onClose();
             }
         };
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape')
+                onClose();
+        };
         if (open) {
             document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener('keydown', handleKeyDown);
         }
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, anchorEl, popoverElement, onClose]);
     // Ensure popover is only rendered after the component mounts
     useEffect(function () {
         setHasMounted(true);
     }, []);
-    if (!open || !hasMounted || !anchorEl)
+    if (!mounted || !hasMounted || !anchorEl)
         return null;
     // Render popover in a portal to prevent layout shifts and positioning issues
-    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, styles.popper), { display: open ? 'block' : 'none' })} {...attributes.popper} className="bg-light-background-accent300 dark:bg-dark-background-accent300 rounded-[8px] shadow-lg p-2" role="dialog">
-      {children}
+    return createPortal(<div id={id} ref={setPopoverElement} style={styles.popper} {...attributes.popper} className="z-50" role="dialog">
+      {/* Popper owns the outer transform, so the fade and scale go on this inner panel */}
+      <div className={"bg-light-background-accent300 dark:bg-dark-background-accent300 dark:ring-1 dark:ring-dark-misc-divider rounded-[8px] shadow-lg p-2 origin-top-left\n          ".concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
+        {children}
+      </div>
     </div>, document.body // Mounting the popover in the document body for isolation
     );
 }

package/dist/components/radioGroup.jsx

@@ -1,20 +1,30 @@
 'use client';
-import React from 'react';
+import React, { useId } from 'react';
+import { popTransition, stateTransition } from './sharedStyles';
 export default function RadioGroup(_a) {
     var options = _a.options, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.direction, direction = _b === void 0 ? 'vertical' : _b;
-    return (<div className={"flex ".concat(direction === 'horizontal' ? 'space-x-4' : 'flex-col space-y-2')}>
-      {options.map(function (option) { return (<label key={option.value} className="flex items-center cursor-pointer" onClick={function () { return onChange(option.value); }}>
-          {/* outer circle */}
-          <div className={"relative flex justify-center items-center w-4 h-4 rounded-full border-2\n              ".concat(selectedValue === option.value
-                ? 'border-light-text-primary dark:border-dark-text-primary'
-                : 'border-light-text-secondary dark:border-dark-text-secondary', "\n            ")}>
-            {/* Inner circle */}
-            {selectedValue === option.value && (<div className='absolute w-2 h-2 rounded-full bg-light-text-primary dark:bg-dark-text-primary'/>)}
-          </div>
-          <div className="flex flex-col ml-2">
-            <span className="text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
-            {option.secondLabel && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">{option.secondLabel}</span>)}
-          </div>
-        </label>); })}
+    // One shared name gives native arrow-key movement between the options
+    var groupName = useId();
+    return (<div role="radiogroup" className={"flex ".concat(direction === 'horizontal' ? 'gap-4' : 'flex-col gap-2')}>
+      {options.map(function (option) {
+            var isSelected = selectedValue === option.value;
+            return (<label key={option.value} className="group flex items-start cursor-pointer">
+            <input type="radio" name={groupName} value={option.value} checked={isSelected} onChange={function () { return onChange(option.value); }} className="peer sr-only"/>
+            {/* Hover halo and hit area, same as Checkbox */}
+            <span className={"relative flex flex-shrink-0 items-center justify-center w-6 h-6 rounded-full ".concat(stateTransition, "\n                group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected\n                peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-0 peer-focus-visible:outline-light-accent-main dark:peer-focus-visible:outline-dark-accent-main")}>
+              {/* outer circle */}
+              <span className={"relative flex justify-center items-center w-4 h-4 rounded-full border-2 ".concat(stateTransition, "\n                  ").concat(isSelected
+                    ? 'border-light-text-primary dark:border-dark-text-primary'
+                    : 'border-light-text-secondary dark:border-dark-text-secondary', "\n                ")}>
+                {/* Inner circle; always rendered so it can scale in and out */}
+                <span className={"absolute w-2 h-2 rounded-full bg-light-text-primary dark:bg-dark-text-primary ".concat(popTransition, " ").concat(isSelected ? 'scale-100' : 'scale-0')}/>
+              </span>
+            </span>
+            <span className="flex flex-col ml-2">
+              <span className="text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
+              {option.secondLabel && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">{option.secondLabel}</span>)}
+            </span>
+          </label>);
+        })}
     </div>);
 }