cynx-lib 1.3.28

package/ui/components/BrandingCard.jsx

@@ -0,0 +1,146 @@
+import { useState, useEffect } from 'react';
+import { Pencil, Trash2, Upload } from 'lucide-react';
+import { Modal } from './Modal';
+import Input from './Input';
+import Button from './Button';
+
+export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, option, cardStyle }) {
+  const [editOpen, setEditOpen] = useState(false);
+  const [pendingFile, setPendingFile] = useState(null);
+  const [pendingUrl, setPendingUrl]     = useState('');
+  const [uploading, setUploading]       = useState(false);
+  const [previewOpen, setPreviewOpen]   = useState(false);
+
+  const fullview = option === 'fullview';
+
+  // Pre-fill URL when modal opens
+  useEffect(() => {
+    if (editOpen && value && !pendingFile) setPendingUrl(value);
+  }, [editOpen]);
+
+  const hasExisting = !!value;
+  const filename = pendingFile ? pendingFile.name : value?.split('/').pop() || null;
+  const previewUrl = pendingFile ? URL.createObjectURL(pendingFile) : value;
+
+  function handleFileDrop(file) {
+    setPendingFile(file);
+    setPendingUrl('');
+  }
+
+  async function handleSave() {
+    setUploading(true);
+    try {
+      if (pendingFile) {
+        await onUpload(pendingFile);
+      } else if (pendingUrl) {
+        await onUpload(pendingUrl);
+      }
+      setEditOpen(false);
+      setPendingFile(null);
+      setPendingUrl('');
+    } catch (e) {
+      // error handled by parent toast
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function handleRemove() {
+    setPendingFile(null);
+    setPendingUrl('');
+    onRemove();
+  }
+
+  return (
+    <div>
+      <div style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        gap: 10,
+        padding: '10px 12px', borderRadius: 'var(--rads, 8px)',
+        border: '1px solid var(--border-light, #ebebf0)', background: 'var(--surface, #ffffff)',
+        boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+        ...cardStyle,
+      }}>
+        {(hasExisting || previewUrl) ? (
+          <img src={previewUrl} alt={label} onClick={() => fullview && setPreviewOpen(true)}
+            style={{ height: fullview ? 24 : 32, width: fullview ? 'auto' : 32, objectFit: 'contain', borderRadius: 4, flexShrink: 0, cursor: fullview ? 'pointer' : 'default' }} />
+        ) : (
+          <div style={{ width: fullview ? 24 : 32, height: fullview ? 24 : 32, borderRadius: 4, background: 'var(--grey-2, #ebebee)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted, #797b8d)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+            </svg>
+          </div>
+        )}
+        {!fullview && (
+          <div style={{ flex: 1, minWidth: 0, fontSize: '.78rem', color: filename ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)', fontFamily: filename ? 'var(--mono, ui-monospace, monospace)' : 'inherit', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {filename || 'Not set'}
+          </div>
+        )}
+        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+          <Button variant="ghost" size="xs" type="button" icon={<Pencil size={11} />} onClick={() => setEditOpen(true)} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--t, #333)' } : undefined}>Edit</Button>
+          {hasExisting && (
+            <Button variant="ghost" size="xs" type="button" icon={<Trash2 size={11} />} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--danger, #f64747)' } : { color: 'var(--danger, #f64747)' }}
+              onClick={handleRemove} disabled={saving}>Remove</Button>
+          )}
+        </div>
+      </div>
+      <div style={{ fontSize: '.68rem', color: 'var(--muted, #797b8d)', marginTop: 4 }}>{hint}</div>
+
+      {previewOpen && (
+        <Modal title={label} open={previewOpen} onClose={() => setPreviewOpen(false)}
+          footer={<Button variant="ghost" size="sm" onClick={() => setPreviewOpen(false)}>Close</Button>}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
+            <img src={previewUrl} alt={label} style={{ maxWidth: '100%', maxHeight: 400, objectFit: 'contain', borderRadius: 6 }} />
+          </div>
+        </Modal>
+      )}
+
+      {editOpen && (
+        <Modal title={`Edit ${label}`} open={editOpen} onClose={() => { setEditOpen(false); setPendingFile(null); setPendingUrl(''); }}
+          footer={
+            <>
+              <Button variant="ghost" size="sm" onClick={() => { setEditOpen(false); setPendingFile(null); setPendingUrl(''); }}>Cancel</Button>
+              <Button variant="primary" size="sm" disabled={saving || uploading} onClick={handleSave}>
+                {uploading ? 'Uploading...' : saving ? 'Saving...' : 'Save'}
+              </Button>
+            </>
+          }>
+          <label
+            onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; }}
+            onDragLeave={e => { e.currentTarget.style.borderColor = pendingFile ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'; }}
+            onDrop={e => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) handleFileDrop(f); }}
+            style={{
+              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads, 8px)',
+              border: `1.5px dashed ${pendingFile ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
+              background: 'var(--grey-1, #f5f5f8)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
+            }}>
+            <input type="file" accept="image/*,.ico" style={{ display: 'none' }}
+              onChange={e => { const f = e.target.files[0]; if (f) handleFileDrop(f); }} />
+            {pendingFile ? (
+              <>
+                <img src={URL.createObjectURL(pendingFile)} alt="preview" style={{ height: 48, maxWidth: 160, objectFit: 'contain', borderRadius: 4 }} />
+                <div style={{ fontSize: '.76rem', fontWeight: 600, color: 'var(--accent, #f99e2c)' }}>{pendingFile.name}</div>
+                <div style={{ fontSize: '.68rem', color: 'var(--muted, #797b8d)' }}>{(pendingFile.size / 1024).toFixed(1)} KB — click to change</div>
+              </>
+            ) : (
+              <>
+                <Upload size={20} style={{ color: 'var(--muted, #797b8d)' }} />
+                <div style={{ fontSize: '.82rem', fontWeight: 600 }}>Click or drag to upload</div>
+                <div style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)' }}>PNG, JPG, SVG, ICO up to 2MB</div>
+              </>
+            )}
+          </label>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 4px' }}>
+            <div style={{ flex: 1, height: 1, background: 'var(--border, #e2e8f0)' }} />
+            <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)' }}>or enter URL directly</span>
+            <div style={{ flex: 1, height: 1, background: 'var(--border, #e2e8f0)' }} />
+          </div>
+          <Input type="url" placeholder="https://example.com/logo.png" value={pendingUrl}
+            onChange={e => { setPendingUrl(e.target.value); setPendingFile(null); }}
+            style={{ width: '100%', fontSize: '.82rem' }} />
+        </Modal>
+      )}
+    </div>
+  );
+}

package/ui/components/Button.jsx

@@ -0,0 +1,148 @@
+import { Spinner } from './Spinner';
+
+const VARIANTS = {
+  default: {
+    background: 'var(--surface,#fff)',
+    color: 'var(--def-btn-text,#0f111c)',
+    border: '1px solid var(--bd,#d7d8e0)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'var(--grey-2,#ebebee)',
+  },
+  primary: {
+    background: 'var(--accent,#f99e2c)',
+    color: 'var(--def-btn-text,#fff)',
+    border: '1px solid transparent',
+    hoverBg: 'var(--accent-hover,#e68d1f)',
+    hoverShadow: '0 2px 8px rgba(249,158,44,.35)',
+  },
+  secondary: {
+    background: 'var(--blue-bg,rgba(39,130,228,.1))',
+    color: 'var(--blue,#2782e4)',
+    border: '1px solid var(--infd, rgba(39,130,228,.2))',
+    hoverBg: 'var(--infd, rgba(39,130,228,.18))',
+    hoverShadow: '0 2px 8px rgba(39,130,228,.25)',
+  },
+  danger: {
+    background: 'var(--danger-bg,rgba(246,71,71,.1))',
+    color: 'var(--danger,#f64747)',
+    border: '1px solid var(--dd, rgba(246,71,71,.2))',
+    hoverBg: 'var(--dd, rgba(246,71,71,.18))',
+    hoverShadow: '0 2px 8px rgba(246,71,71,.25)',
+  },
+  success: {
+    background: 'var(--success-bg,rgba(39,174,96,.1))',
+    color: 'var(--success,#27ae60)',
+    border: '1px solid var(--sd, rgba(39,174,96,.2))',
+    hoverBg: 'var(--sd, rgba(39,174,96,.18))',
+    hoverShadow: '0 2px 8px rgba(39,174,96,.25)',
+  },
+  warning: {
+    background: 'var(--accent-bg,rgba(249,158,44,.1))',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid var(--accent-border,rgba(249,158,44,.25))',
+    hoverBg: 'var(--pd, rgba(249,158,44,.18))',
+    hoverShadow: '0 2px 8px rgba(249,158,44,.25)',
+  },
+  ghost: {
+    background: 'var(--surface, #ffffff)',
+    color: 'var(--t2,#797b8d)',
+    border: '1px solid var(--bd,#d7d8e0)',
+    hoverColor: 'var(--t1,#1a1a2e)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'var(--grey-2,#ebebee)',
+  },
+  outline: {
+    background: 'transparent',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid var(--accent,#f99e2c)',
+    hoverBg: 'var(--accent-bg,rgba(249,158,44,.1))',
+  },
+  link: {
+    background: 'transparent',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid transparent',
+    paddingLeft: 4,
+    paddingRight: 4,
+    boxShadow: 'none',
+    hoverTextDec: 'underline',
+  },
+  'no-line': {
+    background: 'none',
+    border: 'none',
+    boxShadow: 'none',
+    color: 'var(--t3,#8a96b0)',
+    paddingLeft: 14,
+    paddingRight: 14,
+    borderRadius: 'var(--rmd,8px)',
+    hoverColor: 'var(--p,var(--accent,#f99e2c))',
+    hoverBg: 'var(--pd,var(--accent-bg,rgba(249,158,44,.1)))',
+  },
+};
+
+const SIZES = {
+  xs: { padding: '0 6px', fontSize: 11, height: 24 },
+  sm: { padding: '0 8px', fontSize: 11.5, height: 28 },
+  md: { padding: '0 14px', fontSize: 13, height: 32 },
+  lg: { padding: '0 18px', fontSize: 14, height: 36 },
+};
+
+export default function Button({
+  children,
+  variant = 'default',
+  size = 'md',
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  loading = false,
+  onClick = null,
+  style = {},
+  className = '',
+  ...props
+}) {
+  const v = VARIANTS[variant] || VARIANTS.default;
+  const s = SIZES[size] || SIZES.md;
+
+  const isIconOnly = variant === 'icon';
+
+  return (
+    <button
+      className={`btn btn-${variant} ${className}`.trim()}
+      disabled={disabled || loading}
+      onClick={onClick}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        borderRadius: 'var(--rads,8px)',
+        fontFamily: 'var(--f,var(--sans,inherit))',
+        fontWeight: 500,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        whiteSpace: 'nowrap',
+        transition: 'all .14s',
+        letterSpacing: '-.01em',
+        outline: 'none',
+        boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+        opacity: disabled ? 0.45 : 1,
+        pointerEvents: disabled ? 'none' : undefined,
+        background: v.background,
+        color: v.color,
+        border: v.border,
+        padding: isIconOnly ? 0 : s.padding,
+        fontSize: s.fontSize,
+        height: s.height,
+        width: isIconOnly ? s.height : undefined,
+        ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
+        ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
+        ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
+        ...style,
+      }}
+      {...props}
+    >
+      {loading && <Spinner size={14} inline color="currentColor" />}
+      {!loading && icon && icon}
+      {!loading && children}
+      {!loading && iconRight && iconRight}
+    </button>
+  );
+}

package/ui/components/Card.jsx

@@ -0,0 +1,132 @@
+import { Pagination } from './Pagination';
+
+export function PageShell({ title, children, style = {} }) {
+  return (
+    <div style={{
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: 0,
+      height: '100%',
+      padding: '20px 24px',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCard({ children, style = {} }) {
+  return (
+    <div style={{
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: 0,
+      height: '100%',
+      overflow: 'hidden',
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCardFilters({ children, style = {} }) {
+  return (
+    <div style={{
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '8px 0',
+      borderBottom: '1px solid var(--border-light, #ebebf0)',
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCardBody({ children, style = {} }) {
+  return (
+    <div style={{
+      flex: 1,
+      overflowY: 'auto',
+      minHeight: 0,
+      scrollbarWidth: 'thin',
+      scrollbarColor: 'var(--grey-2, #d7d8e0) transparent',
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCardFooter({ total = 0, page = 1, limit = 100, pages = 1, onChange, style = {} }) {
+  const from = total === 0 ? 0 : (page - 1) * limit + 1;
+  const to   = Math.min(page * limit, total);
+  return (
+    <div style={{
+      flexShrink: 0,
+      marginTop: 'auto',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '12px 0 0 0',
+      borderTop: '1px solid var(--border-light, #ebebf0)',
+      fontSize: '.78rem',
+      color: 'var(--muted, #9b9daa)',
+      boxSizing: 'border-box',
+      ...style,
+    }}>
+      <span>
+        {total === 0 ? '0 записей' : `${from}–${to} из ${total}`}
+      </span>
+      <Pagination page={page} pages={pages} onChange={onChange} />
+    </div>
+  );
+}
+
+export function CardHdr({ title, icon: Icon, tabs, children, style = {} }) {
+  return (
+    <div style={{
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '0',
+      height: 48,
+      borderBottom: '1px solid var(--border-light, #ebebf0)',
+      ...style,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '.85rem', fontWeight: 600, color: 'var(--primary-text, #0f111c)' }}>
+        {Icon && <Icon size={14} />}
+        {title}
+        {tabs && <span style={{ marginLeft: 12 }}>{tabs}</span>}
+      </div>
+      {children && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>}
+    </div>
+  );
+}
+
+export function StatCard({ label, value, sub }) {
+  return (
+    <div style={{ background: 'var(--surface, #fff)', border: '1px solid var(--border-light, #ebebf0)', borderRadius: 'var(--rads, 8px)', padding: '14px 16px', boxShadow: 'var(--shadow, 0px 1px 3px rgba(20,22,41,.10))' }}>
+      <div style={{ fontSize: '.62rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--muted, #9b9daa)', marginBottom: 4 }}>{label}</div>
+      <div style={{ fontSize: '1.4rem', fontWeight: 700, color: 'var(--primary-text, #0f111c)', lineHeight: 1.2 }}>{value ?? '—'}</div>
+      {sub && <div style={{ fontSize: '.72rem', color: 'var(--muted, #9b9daa)', marginTop: 2 }}>{sub}</div>}
+    </div>
+  );
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div style={{ background: 'var(--surface, #fff)', border: '1px solid var(--border-light, #ebebf0)', borderRadius: 'var(--rads, 8px)', padding: '14px 16px' }}>
+      <div className="skeleton skeleton-text" style={{ marginBottom: 10, height: 12, width: '40%', background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
+      <div className="skeleton skeleton-text" style={{ height: 28, width: '60%', marginBottom: 6, background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
+    </div>
+  );
+}

package/ui/components/Checkbox.jsx

@@ -0,0 +1,59 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Checkbox — custom styled checkbox component
+ * Props:
+ *   checked:      bool
+ *   indeterminate: bool — shows dash instead of check
+ *   onChange:     fn(checked)
+ *   disabled:     bool
+ *   size:         'sm' | 'md' (default 'md')
+ *   label:        string — optional label text
+ *   style:        object — optional extra styles on wrapper
+ */
+export default function Checkbox({ checked, indeterminate, onChange, disabled = false, size = 'md', label, style }) {
+  const inputRef = useRef(null);
+  useEffect(() => { if (inputRef.current) inputRef.current.indeterminate = !!indeterminate; }, [indeterminate]);
+
+  const dims = size === 'sm' ? { w: 14, h: 14, icon: 8 } : { w: 16, h: 16, icon: 10 };
+
+  return (
+    <label style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      userSelect: 'none', margin: 0, padding: 0, lineHeight: 1,
+      opacity: disabled ? 0.45 : 1,
+      ...style,
+    }}>
+      <span style={{
+        position: 'relative', width: dims.w, height: dims.h, flexShrink: 0,
+        border: `1.5px solid ${checked || indeterminate ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
+        borderRadius: size === 'sm' ? 3 : 4,
+        background: checked || indeterminate ? 'var(--accent, #f99e2c)' : 'var(--input-bg, #ffffff)',
+        transition: 'all .14s',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      }}>
+        {indeterminate ? (
+          <svg style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+            width={dims.icon} height={dims.icon} viewBox="0 0 10 10" fill="none">
+            <line x1="2" y1="5" x2="8" y2="5" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
+          </svg>
+        ) : checked ? (
+          <svg style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+            width={dims.icon} height={dims.icon} viewBox="0 0 10 10" fill="none">
+            <polyline points="1.5,5 4,7.5 8.5,2.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        ) : null}
+      </span>
+      {label && <span style={{ fontSize: size === 'sm' ? '.72rem' : '.78rem' }}>{label}</span>}
+      <input
+        ref={inputRef}
+        type="checkbox"
+        checked={!!checked}
+        disabled={disabled}
+        onChange={e => onChange?.(e.target.checked)}
+        style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
+      />
+    </label>
+  );
+}

package/ui/components/ChipSelect.jsx

@@ -0,0 +1,54 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * ChipSelect — reusable multi-select chip/toggle group
+ * Props:
+ *   options:    [{ value, label }]
+ *   value:      string[] — selected values
+ *   onChange:   fn(string[]) — called with updated selection
+ *   size:       'sm' | 'md' (default 'md')
+ */
+export default function ChipSelect({ options, value = [], onChange, size = 'md' }) {
+  const dims = size === 'sm' ? { h: 14, icon: 8, px: 10, py: 5, gap: 6, font: '.72rem' } : { h: 16, icon: 10, px: 14, py: 7, gap: 7, font: '.78rem' };
+
+  function toggle(val) {
+    const next = value.includes(val) ? value.filter(v => v !== val) : [...value, val];
+    onChange?.(next);
+  }
+
+  return (
+    <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
+      {options.map(opt => {
+        const active = value.includes(opt.value);
+        return (
+          <div key={opt.value}
+            onClick={() => toggle(opt.value)}
+            style={{
+              display:'flex', alignItems:'center', gap: dims.gap,
+              padding:`${dims.py}px ${dims.px}px`, cursor:'pointer',
+              borderRadius: 8,
+              background: 'var(--grey-1, #f5f5f8)',
+              transition: 'all .14s',
+              userSelect: 'none',
+            }}>
+            <span style={{
+              position:'relative', width: dims.h, height: dims.h, flexShrink:0,
+              borderRadius: 4,
+              background: active ? 'var(--accent, #f99e2c)' : 'var(--input-bg, #ffffff)',
+              border: `1.5px solid ${active ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
+              transition: 'all .14s',
+              display:'flex', alignItems:'center', justifyContent:'center',
+            }}>
+              {active && (
+                <svg width={dims.icon} height={dims.icon} viewBox="0 0 10 10" fill="none">
+                  <polyline points="1.5,5 4,7.5 8.5,2.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              )}
+            </span>
+            <span style={{ fontSize: dims.font, fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', color: 'var(--muted, #797b8d)' }}>{opt.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}