@twentyfirstmedia/ui-core 0.4.0 → 0.6.0

package/ICONS-LICENSE

@@ -51,3 +51,178 @@ SOFTWARE.
 Brand logos (names starting with "brand") are from Simple Icons (https://simpleicons.org),
 released under CC0 1.0 Universal. The logos themselves are trademarks of their respective
 owners; use them according to each brand's guidelines.
+
+---
+
+The brand logos brandLinkedin, brandMicrosoft, brandWindows, brandSlack, brandSkype, brandAmazon and
+brandOpenai are from Font Awesome Free (https://fontawesome.com), whose icons are licensed under
+CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/); attribution: "Font Awesome Free by
+Fonticons, Inc.". They were rescaled to the kit's 24px grid. The logos are trademarks of their owners.
+
+Font Awesome Free license:
+
+Fonticons, Inc. (https://fontawesome.com)
+
+--------------------------------------------------------------------------------
+
+Font Awesome Free License
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+--------------------------------------------------------------------------------
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+
+The Font Awesome Free download is licensed under a Creative Commons
+Attribution 4.0 International License and applies to all icons packaged
+as SVG and JS file types.
+
+--------------------------------------------------------------------------------
+
+# Fonts: SIL OFL 1.1 License
+
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+Copyright (c) 2026 Fonticons, Inc. (https://fontawesome.com)
+with Reserved Font Name: "Font Awesome".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+Copyright 2026 Fonticons, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Attribution
+
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

package/dist/components/admin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"admin.d.ts","sourceRoot":"","sources":["../../src/components/admin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EAEf,iBAAiB,EAEjB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EAEnB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,mBAAmB,EAEnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAGpB,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBA8F9C;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAgDtC;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,qBA0DhD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAmE5C;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,aAAa,qBAkHxC;AAOD,wBAAgB,SAAS,sBAqBxB;AAID,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAuGtC;AAKD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAwE9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAkCpD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAyC5C;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,oBAAoB,qBA8EtD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6C5C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,cAAc,qBAoE1C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAqH5C;AAYD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA+E5C;AAGD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAiG9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAuGpD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,sBAAsB,qBAwF1D;AAKD,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,4BA+JhD;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAgKpD;AAID,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6D5C"}
+{"version":3,"file":"admin.d.ts","sourceRoot":"","sources":["../../src/components/admin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EAEf,iBAAiB,EAEjB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EAEnB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,mBAAmB,EAEnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAGpB,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBA8F9C;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAgDtC;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,qBA4DhD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAsE5C;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,aAAa,qBAkHxC;AAOD,wBAAgB,SAAS,sBAqBxB;AAID,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAwGtC;AAKD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAwE9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAkCpD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAyC5C;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,oBAAoB,qBA8EtD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6C5C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,cAAc,qBAqE1C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAwH5C;AAYD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA+E5C;AAGD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAwG9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAyGpD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,sBAAsB,qBAgG1D;AAKD,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,4BA+JhD;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBA+KpD;AAID,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6D5C"}

package/dist/components/admin.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useControlled, useId } from "../hooks.js";
 import { useFormat, useStrings } from "../context.js";
@@ -9,6 +9,7 @@ import { Icon } from "../Icon.js";
 import { toast } from "../toast-store.js";
 import { Portal } from "../portal.js";
 import { DatePicker, FormField, OtpInput, Segmented } from "./forms.js";
+import { QrCode } from "./qr-code.js";
 import { Popover } from "./overlays.js";
 import { StatusIndicator, StatusShape } from "./status.js";
 import { Avatar, Button, Chip, IconButton, TintIcon } from "./foundation.js";
@@ -36,7 +37,7 @@ export function RangeSlider(p) {
             n = i ? [x, x] : [x, x];
         v[1](n);
     }
-    return (_jsx(FormField, { id: id, label: p.label, hint: p.hint, children: _jsxs("div", { className: "tf-range", children: [_jsxs("div", { className: "tf-range-track", children: [_jsx("span", { style: {
+    return (_jsx(FormField, { style: p.style, className: p.className, id: id, label: p.label, hint: p.hint, children: _jsxs("div", { className: "tf-range", children: [_jsxs("div", { className: "tf-range-track", children: [_jsx("span", { style: {
                                 left: pc(lo) + "%",
                                 width: pc(hi) - pc(lo) + "%",
                             } }), _jsx("input", { type: "range", min: min, max: max, step: step, value: lo, "aria-label": t.minimum, onChange: (e) => {
@@ -52,7 +53,7 @@ export function RangeSlider(p) {
 export function BarList(p) {
     const { formatNumber } = useFormat();
     const items = p.items || [], max = Math.max.apply(null, items.map((i) => i.value).concat([1])), f = p.format || formatNumber;
-    return (_jsx("div", { className: "tf-barlist", role: "list", "aria-label": p.label, children: items.map((it, i) => (_jsxs("div", { role: "listitem", className: cx("tf-barlist-row", p.onPick && "is-btn"), onClick: p.onPick &&
+    return (_jsx("div", { style: p.style, className: cx("tf-barlist", p.className), role: "list", "aria-label": p.label, children: items.map((it, i) => (_jsxs("div", { role: "listitem", className: cx("tf-barlist-row", p.onPick && "is-btn"), onClick: p.onPick &&
                 (() => {
                     p.onPick?.(it);
                 }), children: [_jsx("span", { className: cx("tf-barlist-bar", it.tint && "tf-t-" + it.tint), style: {
@@ -64,7 +65,7 @@ export function BarList(p) {
 }
 export function StatusSelect(p) {
     const opts = p.options || [], v = useControlled(p.value, p.defaultValue != null ? p.defaultValue : opts[0] && opts[0].value, p.onChange), cur = opts.find((o) => o.value === v[0]) || opts[0] || {};
-    return (_jsx(Popover, { width: p.width || 220, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-statussel", p.size === "sm" && "sm"), "aria-haspopup": "listbox", "aria-expanded": s.open, "aria-label": p.label ? `${p.label}: ${cur.label ?? ""}` : undefined, onClick: (e) => {
+    return (_jsx(Popover, { style: p.style, className: p.className, width: p.width || 220, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-statussel", p.size === "sm" && "sm"), "aria-haspopup": "listbox", "aria-expanded": s.open, "aria-label": p.label ? `${p.label}: ${cur.label ?? ""}` : undefined, onClick: (e) => {
                 e.stopPropagation();
                 s.toggle();
             }, children: [_jsx(StatusShape, { status: cur.status || "idle" }), _jsx("span", { children: cur.label }), _jsx(Icon, { name: "chevronDown", size: 13 })] })), children: (s) => (_jsx("div", { className: "tf-menu", role: "listbox", "aria-label": p.label, children: opts.map((o) => (_jsxs("button", { type: "button", role: "option", "aria-selected": o.value === v[0], className: cx("tf-menu-item", o.value === v[0] && "on"), onClick: () => {
@@ -85,8 +86,11 @@ export function TilePicker(p) {
             return v[1](x);
         v[1](on(x) ? list.filter((y) => y !== x) : list.concat([x]));
     }
-    return (_jsx("div", { className: "tf-tiles", role: multi ? "group" : "radiogroup", "aria-label": p.label, style: {
-            gridTemplateColumns: "repeat(auto-fill, minmax(" + (p.min || 120) + "px, 1fr))",
+    return (_jsx("div", { className: cx("tf-tiles", p.layout === "list" && "list", p.className), role: multi ? "group" : "radiogroup", "aria-label": p.label, style: {
+            ...(p.layout === "list"
+                ? null
+                : { gridTemplateColumns: "repeat(auto-fill, minmax(" + (p.min || 120) + "px, 1fr))" }),
+            ...p.style,
         }, children: (p.options || []).map((o) => (_jsxs("button", { type: "button", role: multi ? "checkbox" : "radio", "aria-checked": on(o.value), disabled: o.disabled, className: cx("tf-tile", on(o.value) && "on"), onClick: () => {
                 pick(o.value);
             }, children: [_jsx("span", { className: cx("tf-tile-art", o.tint && "tf-t-" + o.tint), style: o.color
@@ -105,7 +109,7 @@ export function LiveFeed(p) {
     const heldItems = held.current;
     const shown = (paused[0] ? heldItems : p.items || []).filter((it) => !filter[0] || it.type === filter[0]), waiting = paused[0] ? Math.max(0, (p.items || []).length - heldItems.length) : 0;
     const types = p.types || [];
-    return (_jsxs("div", { className: "tf-livefeed", children: [_jsxs("div", { className: "tf-livefeed-head", children: [_jsxs("span", { className: cx("tf-live", paused[0] && "off"), children: [_jsx("span", { className: "tf-live-dot", "aria-hidden": true }), paused[0] ? t.paused : t.live] }), types.length > 0 && (_jsxs("div", { className: "tf-row", style: {
+    return (_jsxs("div", { style: p.style, className: cx("tf-livefeed", p.className), children: [_jsxs("div", { className: "tf-livefeed-head", children: [_jsxs("span", { className: cx("tf-live", paused[0] && "off"), children: [_jsx("span", { className: "tf-live-dot", "aria-hidden": true }), paused[0] ? t.paused : t.live] }), types.length > 0 && (_jsxs("div", { className: "tf-row", style: {
                             gap: 4,
                         }, children: [_jsx(Chip, { selected: !filter[0], onClick: () => {
                                     filter[1](null);
@@ -163,6 +167,7 @@ export function MapView(p) {
     const cur = pts.find((x) => x.id === sel[0]);
     return (_jsxs("div", { className: cx("tf-map", p.className), style: {
             height: Hh,
+            ...p.style,
         }, role: "region", "aria-label": p.label || t.viewMap, children: [p.background || (!p.bounds ? _jsx(WorldDots, {}) : null) || (_jsx("svg", { className: "tf-map-grid", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": true, children: [10, 20, 30, 40, 50, 60, 70, 80, 90].map((g) => (_jsxs("g", { children: [_jsx("line", { x1: g, x2: g, y1: 0, y2: 100 }), _jsx("line", { y1: g, y2: g, x1: 0, x2: 100 })] }, g))) })), pts.map((pt) => {
                 const c = xy(pt), r = p.bubbles ? 10 + Math.sqrt((pt.value || 1) / maxV) * 26 : null;
                 return (_jsx("button", { type: "button", className: cx(p.bubbles ? "tf-map-bubble" : "tf-map-pin", "tf-t-" + (pt.tint || "sky"), sel[0] === pt.id && "on", pt.pulse && "pulse"), style: {
@@ -190,7 +195,7 @@ export function BalanceCard(p) {
     const t = useStrings(ADMIN_STRINGS);
     const { formatMoney } = useFormat();
     const days = p.perDay && p.perDay > 0 ? Math.floor(p.balance / p.perDay) : null, low = p.low != null && p.balance <= p.low, st = p.status || (p.balance <= 0 ? "danger" : low ? "warn" : "ok");
-    return (_jsxs("div", { className: cx("tf-balance", "is-" + st), children: [_jsxs("div", { className: "tf-balance-head", children: [p.logo || _jsx(TintIcon, { icon: p.icon || "wallet", tint: p.tint || "butter", size: 36 }), _jsxs("div", { className: "tf-option-text", children: [_jsx("b", { children: p.name }), p.sub && _jsx("small", { children: p.sub })] }), _jsx(StatusIndicator, { status: st, label: p.statusLabel || (st === "danger" ? t.balanceEmpty : low ? t.balanceLow : t.balanceOk), size: "sm" })] }), _jsxs("div", { className: "tf-balance-main", children: [_jsxs("div", { className: "tf-col", style: {
+    return (_jsxs("div", { style: p.style, className: cx("tf-balance", "is-" + st, p.className), children: [_jsxs("div", { className: "tf-balance-head", children: [p.logo || _jsx(TintIcon, { icon: p.icon || "wallet", tint: p.tint || "butter", size: 36 }), _jsxs("div", { className: "tf-option-text", children: [_jsx("b", { children: p.name }), p.sub && _jsx("small", { children: p.sub })] }), _jsx(StatusIndicator, { status: st, label: p.statusLabel || (st === "danger" ? t.balanceEmpty : low ? t.balanceLow : t.balanceOk), size: "sm" })] }), _jsxs("div", { className: "tf-balance-main", children: [_jsxs("div", { className: "tf-col", style: {
                             gap: 2,
                         }, children: [_jsx("span", { className: "tf-balance-amt", children: formatMoney(p.balance, p.currency, {
                                     maximumFractionDigits: 2,
@@ -205,7 +210,7 @@ export function BalanceCard(p) {
 }
 export function ServiceMonitor(p) {
     const { formatNumber } = useFormat();
-    return (_jsx("div", { className: "tf-svcmon", role: "list", "aria-label": p.label, children: (p.items || []).map((s) => (_jsxs("div", { role: "listitem", className: "tf-svcmon-row", children: [_jsx(StatusShape, { status: s.status }), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: s.name }), _jsx("small", { children: s.statusLabel || s.status })] }), s.history && (_jsx("span", { className: "tf-svcmon-hist", "aria-hidden": true, children: s.history.map((x, i) => (_jsx("i", { className: "tf-st-" + x }, i))) })), _jsx("span", { className: "tf-svcmon-num", children: s.latency != null ? formatNumber(s.latency) + " ms" : "—" }), _jsx("span", { className: cx("tf-svcmon-num", (s.errorRate ?? 0) > 1 && "bad"), children: s.errorRate != null
+    return (_jsx("div", { style: p.style, className: cx("tf-svcmon", p.className), role: "list", "aria-label": p.label, children: (p.items || []).map((s) => (_jsxs("div", { role: "listitem", className: "tf-svcmon-row", children: [_jsx(StatusShape, { status: s.status }), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: s.name }), _jsx("small", { children: s.statusLabel || s.status })] }), s.history && (_jsx("span", { className: "tf-svcmon-hist", "aria-hidden": true, children: s.history.map((x, i) => (_jsx("i", { className: "tf-st-" + x }, i))) })), _jsx("span", { className: "tf-svcmon-num", children: s.latency != null ? formatNumber(s.latency) + " ms" : "—" }), _jsx("span", { className: cx("tf-svcmon-num", (s.errorRate ?? 0) > 1 && "bad"), children: s.errorRate != null
                         ? formatNumber(s.errorRate / 100, {
                             style: "percent",
                             maximumFractionDigits: 1,
@@ -215,7 +220,7 @@ export function ServiceMonitor(p) {
 export function RunHistory(p) {
     const { formatNumber } = useFormat();
     const open = React.useState(null);
-    return (_jsx("div", { className: "tf-runs", role: "list", "aria-label": p.label, children: (p.items || []).map((r) => {
+    return (_jsx("div", { style: p.style, className: cx("tf-runs", p.className), role: "list", "aria-label": p.label, children: (p.items || []).map((r) => {
             const on = open[0] === r.id;
             return (_jsxs("div", { role: "listitem", className: cx("tf-runs-row", on && "open"), children: [_jsxs("button", { type: "button", className: "tf-runs-main", "aria-expanded": r.detail ? on : undefined, onClick: r.detail
                             ? () => {
@@ -228,7 +233,7 @@ export function WebhookEndpoint(p) {
     const t = useStrings(ADMIN_STRINGS);
     const { formatNumber } = useFormat();
     const open = React.useState(!!p.defaultOpen);
-    return (_jsxs("div", { className: "tf-hook", children: [_jsxs("div", { className: "tf-hook-head", children: [_jsx(TintIcon, { icon: "webhook", tint: "lilac", size: 36 }), _jsxs("div", { className: "tf-option-text", style: {
+    return (_jsxs("div", { style: p.style, className: cx("tf-hook", p.className), children: [_jsxs("div", { className: "tf-hook-head", children: [_jsx(TintIcon, { icon: "webhook", tint: "lilac", size: 36 }), _jsxs("div", { className: "tf-option-text", style: {
                             minWidth: 0,
                             flex: 1,
                         }, children: [_jsx("b", { className: "tf-mono tf-hook-url", children: p.url }), _jsx("small", { children: (p.events || []).join(", ") })] }), _jsx(StatusIndicator, { status: p.status || "ok", label: p.statusLabel, size: "sm" }), p.successRate != null && (_jsx("span", { className: "tf-hook-rate", children: formatNumber(p.successRate / 100, {
@@ -243,7 +248,7 @@ export function WebhookEndpoint(p) {
 }
 export function BackupList(p) {
     const t = useStrings(ADMIN_STRINGS);
-    return (_jsxs("div", { className: "tf-backups", role: "list", "aria-label": p.label, children: [(p.items || []).map((b) => (_jsxs("div", { role: "listitem", className: "tf-backups-row", children: [_jsx(StatusShape, { status: b.status || "ok" }), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: b.name || b.time }), _jsx("small", { children: [b.kind, b.where, b.retention].filter(Boolean).join(" · ") })] }), _jsx("span", { className: "tf-backups-size", children: b.size }), _jsxs("span", { className: "tf-row", style: {
+    return (_jsxs("div", { style: p.style, className: cx("tf-backups", p.className), role: "list", "aria-label": p.label, children: [(p.items || []).map((b) => (_jsxs("div", { role: "listitem", className: "tf-backups-row", children: [_jsx(StatusShape, { status: b.status || "ok" }), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: b.name || b.time }), _jsx("small", { children: [b.kind, b.where, b.retention].filter(Boolean).join(" · ") })] }), _jsx("span", { className: "tf-backups-size", children: b.size }), _jsxs("span", { className: "tf-row", style: {
                             gap: 4,
                         }, children: [p.onDownload && (_jsx(IconButton, { icon: "download", size: "sm", label: t.download, onClick: () => {
                                     p.onDownload?.(b);
@@ -255,8 +260,9 @@ export function BlockList(p) {
     const t = useStrings(ADMIN_STRINGS);
     const q = React.useState("");
     const list = (p.items || []).filter((b) => !q[0] || (b.value + " " + (b.reason || "")).toLowerCase().indexOf(q[0].toLowerCase()) > -1);
-    return (_jsxs("div", { className: "tf-col", style: {
+    return (_jsxs("div", { className: cx("tf-col", p.className), style: {
             gap: 12,
+            ...p.style,
         }, children: [_jsxs("div", { className: "tf-filterbar", children: [_jsx(SearchField, { placeholder: p.searchPlaceholder || t.searchBlocked, value: q[0], onChange: (e) => {
                             q[1](e.target.value);
                         }, style: {
@@ -279,7 +285,7 @@ export function ReviewCard(p) {
         hidden: ["idle", t.reviewState.hidden],
         flagged: ["warn", t.reviewState.flagged],
     }[p.state || "pending"];
-    return (_jsxs("article", { className: cx("tf-review", "is-" + (p.state || "pending")), children: [_jsxs("div", { className: "tf-review-head", children: [_jsx(Avatar, { name: p.author, size: 36 }), _jsxs("div", { className: "tf-option-text", style: {
+    return (_jsxs("article", { style: p.style, className: cx("tf-review", "is-" + (p.state || "pending"), p.className), children: [_jsxs("div", { className: "tf-review-head", children: [_jsx(Avatar, { name: p.author, size: 36 }), _jsxs("div", { className: "tf-option-text", style: {
                             flex: 1,
                         }, children: [_jsxs("b", { children: [p.author, p.verified && (_jsxs("span", { className: "tf-review-ver", children: [" · ", t.verifiedPurchase] }))] }), _jsx("small", { children: [p.product, p.date].filter(Boolean).join(" · ") })] }), _jsx(Rating, { value: p.rating }), _jsx(StatusIndicator, { status: st[0], label: p.stateLabel || st[1], size: "sm" })] }), p.title && _jsx("b", { className: "tf-review-title", children: p.title }), _jsx("p", { className: "tf-review-text", children: p.highlight ? markWords(p.text, p.highlight) : p.text }), p.reply && !reply[0] && (_jsxs("div", { className: "tf-review-reply", children: [_jsx("small", { children: p.replyLabel || t.yourReply }), p.reply] })), reply[0] && (_jsxs("div", { className: "tf-col", style: {
                     gap: 8,
@@ -306,7 +312,7 @@ export function CouponCard(p) {
     const t = useStrings(ADMIN_STRINGS);
     const { formatMoney, formatNumber } = useFormat();
     const used = p.used || 0, st = p.status || (p.limit && used >= p.limit ? "idle" : "ok");
-    return (_jsxs("div", { className: cx("tf-coupon", st !== "ok" && "off"), children: [_jsxs("div", { className: "tf-coupon-val", children: [_jsx("b", { children: p.kind === "fixed"
+    return (_jsxs("div", { style: p.style, className: cx("tf-coupon", st !== "ok" && "off", p.className), children: [_jsxs("div", { className: "tf-coupon-val", children: [_jsx("b", { children: p.kind === "fixed"
                             ? formatMoney(p.value, p.currency)
                             : formatNumber(p.value / 100, {
                                 style: "percent",
@@ -345,7 +351,7 @@ export function LocaleField(p) {
         v[1](n);
     }
     const done = locs.filter((l) => (v[0][l.code] || "").trim()).length;
-    return (_jsx(FormField, { id: id, label: p.label, hint: p.hint, error: p.error, children: _jsxs("div", { className: "tf-locfield", children: [_jsxs("div", { className: "tf-locfield-tabs", role: "tablist", "aria-label": t.languages, children: [locs.map((l) => {
+    return (_jsx(FormField, { style: p.style, className: p.className, id: id, label: p.label, hint: p.hint, error: p.error, children: _jsxs("div", { className: "tf-locfield", children: [_jsxs("div", { className: "tf-locfield-tabs", role: "tablist", "aria-label": t.languages, children: [locs.map((l) => {
                             const has = (v[0][l.code] || "").trim();
                             return (_jsxs("button", { type: "button", role: "tab", "aria-selected": cur[0] === l.code, className: cx("tf-locfield-tab", cur[0] === l.code && "on", !has && "missing"), onClick: () => {
                                     cur[1](l.code);
@@ -369,7 +375,7 @@ export function LocaleSwitcher(p) {
     const t = useStrings(ADMIN_STRINGS);
     const lang = useControlled(p.language, p.languages && p.languages[0] && p.languages[0].code, p.onLanguage), cur = useControlled(p.currency, p.currencies && p.currencies[0], p.onCurrency);
     const L0 = (p.languages || []).find((l) => l.code === lang[0]) || {};
-    return (_jsx(Popover, { width: 280, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-locsw", p.variant === "frame" && "on-frame"), "aria-haspopup": "dialog", "aria-expanded": s.open, onClick: s.toggle, title: t.languageAndCurrency, children: [L0.flag ? _jsx("span", { children: L0.flag }) : _jsx(Icon, { name: "globe", size: 15 }), _jsx("span", { children: (L0.short || lang[0] || "").toUpperCase() }), cur[0] && _jsx("span", { className: "tf-locsw-cur", children: cur[0] }), _jsx(Icon, { name: "chevronDown", size: 13 })] })), children: () => (_jsxs("div", { className: "tf-col", style: {
+    return (_jsx(Popover, { style: p.style, className: p.className, width: 280, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-locsw", p.variant === "frame" && "on-frame"), "aria-haspopup": "dialog", "aria-expanded": s.open, onClick: s.toggle, title: t.languageAndCurrency, children: [L0.flag ? _jsx("span", { children: L0.flag }) : _jsx(Icon, { name: "globe", size: 15 }), _jsx("span", { children: (L0.short || lang[0] || "").toUpperCase() }), cur[0] && _jsx("span", { className: "tf-locsw-cur", children: cur[0] }), _jsx(Icon, { name: "chevronDown", size: 13 })] })), children: () => (_jsxs("div", { className: "tf-col", style: {
                 gap: 12,
             }, children: [p.languages && (_jsxs("div", { className: "tf-col", style: {
                         gap: 4,
@@ -389,8 +395,9 @@ export function LocaleSwitcher(p) {
                             }, children: t.currency }), _jsx(Segmented, { size: "sm", block: true, value: cur[0], onChange: cur[1], options: p.currencies })] }))] })) }));
 }
 export function WorkspaceSwitcher(p) {
+    const t = useStrings(ADMIN_STRINGS);
     const items = p.items || [], v = useControlled(p.value, items[0] && items[0].id, p.onChange), cur = items.find((x) => x.id === v[0]) || {};
-    return (_jsx(Popover, { width: p.width || 300, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-wssw", p.variant === "frame" && "on-frame"), "aria-haspopup": "listbox", "aria-expanded": s.open, onClick: s.toggle, children: [cur.logo || (_jsx("span", { className: cx("tf-wssw-mark", "tf-t-" + (cur.tint || "sky")), children: (cur.name || "?").charAt(0) })), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: cur.name }), cur.sub && _jsx("small", { children: cur.sub })] }), _jsx(Icon, { name: "chevronDown", size: 14 })] })), children: (s) => (_jsxs("div", { className: "tf-col", style: {
+    return (_jsx(Popover, { style: p.style, className: p.className, width: p.width || 300, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-wssw", p.variant === "frame" && "on-frame", p.compact && "compact"), "aria-haspopup": "listbox", "aria-expanded": s.open, "aria-label": p.compact ? `${t.switchWorkspace}: ${cur.name || ""}` : undefined, onClick: s.toggle, children: [cur.logo || (_jsx("span", { className: cx("tf-wssw-mark", "tf-t-" + (cur.tint || "sky")), children: (cur.name || "?").charAt(0) })), !p.compact && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: cur.name }), cur.sub && _jsx("small", { children: cur.sub })] }), _jsx(Icon, { name: "chevronDown", size: 14 })] }))] })), children: (s) => (_jsxs("div", { className: "tf-col", style: {
                 gap: 8,
             }, children: [p.label && (_jsx("span", { className: "tf-menu-label", style: {
                         padding: "0 8px",
@@ -453,7 +460,8 @@ export function TwoFactorSetup(p) {
     const t = useStrings(ADMIN_STRINGS);
     const step = React.useState(p.step || 0), err = React.useState(null), saved = React.useState(false);
     const steps = t.twoFactorSteps;
-    return (_jsxs("div", { className: "tf-2fa", children: [_jsx("ol", { className: "tf-2fa-steps", children: steps.map((s, i) => (_jsxs("li", { className: cx(i === step[0] && "on", i < step[0] && "done"), children: [_jsx("span", { children: i < step[0] ? _jsx(Icon, { name: "check", size: 12 }) : i + 1 }), s] }, i))) }), step[0] === 0 && (_jsxs("div", { className: "tf-2fa-scan", children: [_jsx("div", { className: "tf-2fa-qr", role: "img", "aria-label": t.qrCode, children: p.qr || _jsx(Icon, { name: "grid", size: 48 }) }), _jsxs("div", { className: "tf-col", style: {
+    return (_jsxs("div", { style: p.style, className: cx("tf-2fa", p.className), children: [_jsx("ol", { className: "tf-2fa-steps", children: steps.map((s, i) => (_jsxs("li", { className: cx(i === step[0] && "on", i < step[0] && "done"), children: [_jsx("span", { children: i < step[0] ? _jsx(Icon, { name: "check", size: 12 }) : i + 1 }), s] }, i))) }), step[0] === 0 && (_jsxs("div", { className: "tf-2fa-scan", children: [_jsx("div", { className: "tf-2fa-qr", role: "img", "aria-label": t.qrCode, children: p.qr ||
+                            (p.qrValue ? (_jsx(QrCode, { value: p.qrValue, quiet: 2, label: t.qrCode })) : (_jsx(Icon, { name: "grid", size: 48 }))) }), _jsxs("div", { className: "tf-col", style: {
                             gap: 12,
                             minWidth: 0,
                         }, children: [_jsx("p", { className: "tf-card-desc", style: {
@@ -473,6 +481,8 @@ export function TwoFactorSetup(p) {
                 }, children: [_jsx("p", { className: "tf-card-desc", style: {
                             margin: 0,
                         }, children: t.enterCode }), _jsx(OtpInput, { error: !!err[0], onComplete: (c) => {
+                            // a second wrong code turns the error on again, which empties the cells
+                            err[1](null);
                             Promise.resolve(p.onVerify ? p.onVerify(c) : true).then((ok) => {
                                 if (ok) {
                                     err[1](null);
@@ -481,7 +491,7 @@ export function TwoFactorSetup(p) {
                                 else
                                     err[1](t.codeFailed);
                             });
-                        } }), err[0] && _jsx("span", { className: "tf-field-error", children: err[0] }), _jsx("div", { children: _jsx(Button, { variant: "ghost", onClick: () => {
+                        } }), err[0] && _jsx("span", { className: "tf-field-error", children: err[0] }), p.trustDevice && (_jsx(Checkbox, { defaultChecked: false, onChange: (e) => p.onTrustChange?.(e.currentTarget.checked), children: typeof p.trustDevice === "string" ? p.trustDevice : t.trustDevice })), _jsx("div", { children: _jsx(Button, { variant: "ghost", onClick: () => {
                                 step[1](0);
                             }, children: t.back }) })] })), step[0] === 2 && (_jsxs("div", { className: "tf-col", style: {
                     gap: 12,
@@ -515,7 +525,7 @@ export function ColorField(p) {
         return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
     }
     const a = lum(v[0]), b = lum(p.against || "#ffffff"), ratio = a != null && b != null ? (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05) : null;
-    return (_jsx(FormField, { id: id, label: p.label, hint: p.hint, children: _jsxs("div", { className: "tf-colorf", children: [_jsx("label", { className: "tf-colorf-sw", style: {
+    return (_jsx(FormField, { style: p.style, className: p.className, id: id, label: p.label, hint: p.hint, children: _jsxs("div", { className: "tf-colorf", children: [_jsx("label", { className: "tf-colorf-sw", style: {
                         background: v[0],
                     }, children: _jsx("input", { type: "color", value: /^#[0-9a-f]{6}$/i.test(v[0]) ? v[0] : "#000000", onChange: (e) => {
                             v[1](e.target.value);