@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/country-select.cjs

@@ -0,0 +1,69 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountrySelect = CountrySelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CountrySelect — a searchable country chooser with flags and a "No country"
+ * first row: an address's country, a default country in settings.
+ *
+ * The trigger is a Select trigger in shape — the field box at its size, the
+ * flag, the name truncated, the chevron — and the list is the kit's searchable
+ * list, found by name or ISO code. Data-free: the caller passes the countries,
+ * named in the reader's language (`Intl.DisplayNames` with `type: 'region'`
+ * names any ISO code). A list that is empty disables the control.
+ *
+ * Props and anatomy after twenty-ui's CountrySelect (MIT, NOTICE): a 16px flag
+ * slot holding a crossed circle when there is no country, an optional visible
+ * label above in the small semibold caption.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const control_1 = require("./control.cjs");
+const density_1 = require("./density.cjs");
+const flag_1 = require("./flag.cjs");
+const gesture_1 = require("./gesture.cjs");
+const search_list_1 = require("./search-list.cjs");
+const slot_1 = require("./slot.cjs");
+/** The value the "No country" row carries: lowercase and four letters, so never an ISO code. */
+const NONE = 'none';
+/** A country's 16×16 flag slot; a crossed circle when there is none. */
+const Mark = ({ iso, override }) => {
+    const glyph = override ?? (0, flag_1.flag)(iso);
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: glyph == null ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.CircleOff, { size: 16, color: "$hint" })) : typeof glyph === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", lineHeight: 16, children: glyph })) : (glyph) }));
+};
+function CountrySelect({ countries, value, defaultValue = null, onValueChange, label, 'aria-label': ariaLabel, noCountryLabel = 'No country', searchLabel = 'Search', noResultsLabel = 'No results', size, open, defaultOpen, onOpenChange, disabled: off = false, }) {
+    const density = (0, density_1.useDensity)();
+    const box = control_1.BOX[(0, density_1.fieldSize)(size, density)];
+    const id = (0, react_1.useId)();
+    const [own, setOwn] = (0, react_1.useState)(defaultValue);
+    const iso = value !== undefined ? value : own;
+    const [shown, setShown] = (0, search_list_1.useOpen)(open, defaultOpen, onOpenChange);
+    const disabled = off || countries.length === 0;
+    const picked = countries.find((c) => c.value === iso);
+    const options = [
+        { value: NONE, label: noCountryLabel, start: (0, jsx_runtime_1.jsx)(Mark, {}) },
+        ...countries.map((c) => ({
+            value: c.value,
+            label: c.label,
+            keywords: [c.value],
+            disabled: c.disabled,
+            start: (0, jsx_runtime_1.jsx)(Mark, { iso: c.value, override: c.flag }),
+        })),
+    ];
+    const trigger = ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('country-select'), render: "button", ...{
+            type: 'button',
+            disabled,
+            'aria-expanded': shown,
+            ...(label ? { 'aria-labelledby': id } : ariaLabel ? { 'aria-label': ariaLabel } : null),
+        }, componentName: "Input", ...control_1.FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), minH: box.h, px: box.gutter, width: "100%", minW: 0, items: "center", gap: "$2", cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, borderColor: shown ? '$borderColorFocus' : '$borderColor', hoverStyle: disabled ? undefined : { borderColor: '$borderColorHover' }, ...(0, gesture_1.touch)(box.h, 44, 'y'), children: [(0, jsx_runtime_1.jsx)(Mark, { iso: picked?.value, override: picked?.flag }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: box.font, color: picked ? '$ink' : '$placeholderColor', flex: 1, minW: 0, numberOfLines: 1, text: "left", children: picked?.label ?? noCountryLabel }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16, opacity: 0.5, shrink: 0 })] }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('country-select-field'), width: "100%", minW: 0, gap: "$1", children: [label ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: id, size: "$1", fontWeight: "600", color: "$hint", children: label })) : null, (0, jsx_runtime_1.jsx)(search_list_1.SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: iso ?? NONE, searchLabel: searchLabel, emptyLabel: noResultsLabel, width: 280, onPick: (next) => {
+                    const picked = next === NONE ? null : next;
+                    if (value === undefined)
+                        setOwn(picked);
+                    if (picked !== iso)
+                        onValueChange?.(picked);
+                    setShown(false);
+                }, trigger: trigger })] }));
+}

package/dist/backends/gui/country-select.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { type FieldSize } from './control.js';
+export type CountryOption = {
+    /** ISO 3166-1 alpha-2, e.g. "DE". */
+    value: string;
+    label: string;
+    /** Overrides the regional-indicator flag. */
+    flag?: ReactNode;
+    disabled?: boolean;
+};
+export type CountrySelectProps = {
+    countries: CountryOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (iso: string | null) => void;
+    /** A visible label above the trigger. */
+    label?: string;
+    /** The trigger's name to assistive technology when there is no visible label. */
+    'aria-label'?: string;
+    noCountryLabel?: string;
+    searchLabel?: string;
+    noResultsLabel?: string;
+    size?: FieldSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+};
+export declare function CountrySelect({ countries, value, defaultValue, onValueChange, label, 'aria-label': ariaLabel, noCountryLabel, searchLabel, noResultsLabel, size, open, defaultOpen, onOpenChange, disabled: off, }: CountrySelectProps): import("react").JSX.Element;
+//# sourceMappingURL=country-select.d.ts.map

package/dist/backends/gui/country-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-select.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/country-select.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAOtD,MAAM,MAAM,aAAa,GAAG;IAC1B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,aAAa,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,cAA6B,EAC7B,WAAsB,EACtB,cAA6B,EAC7B,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EAAE,GAAW,GACtB,EAAE,kBAAkB,+BA+EpB"}

package/dist/backends/gui/country-select.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CountrySelect — a searchable country chooser with flags and a "No country"
+ * first row: an address's country, a default country in settings.
+ *
+ * The trigger is a Select trigger in shape — the field box at its size, the
+ * flag, the name truncated, the chevron — and the list is the kit's searchable
+ * list, found by name or ISO code. Data-free: the caller passes the countries,
+ * named in the reader's language (`Intl.DisplayNames` with `type: 'region'`
+ * names any ISO code). A list that is empty disables the control.
+ *
+ * Props and anatomy after twenty-ui's CountrySelect (MIT, NOTICE): a 16px flag
+ * slot holding a crossed circle when there is no country, an optional visible
+ * label above in the small semibold caption.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown, CircleOff } from '@hanzogui/lucide-icons-2';
+import { useId, useState } from 'react';
+import { BOX, FIELD } from './control.js';
+import { fieldSize, useDensity } from './density.js';
+import { flag } from './flag.js';
+import { touch } from './gesture.js';
+import { SearchList, useOpen } from './search-list.js';
+import { slot } from './slot.js';
+/** The value the "No country" row carries: lowercase and four letters, so never an ISO code. */
+const NONE = 'none';
+/** A country's 16×16 flag slot; a crossed circle when there is none. */
+const Mark = ({ iso, override }) => {
+    const glyph = override ?? flag(iso);
+    return (_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: glyph == null ? (_jsx(CircleOff, { size: 16, color: "$hint" })) : typeof glyph === 'string' ? (_jsx(SizableText, { size: "$3", lineHeight: 16, children: glyph })) : (glyph) }));
+};
+export function CountrySelect({ countries, value, defaultValue = null, onValueChange, label, 'aria-label': ariaLabel, noCountryLabel = 'No country', searchLabel = 'Search', noResultsLabel = 'No results', size, open, defaultOpen, onOpenChange, disabled: off = false, }) {
+    const density = useDensity();
+    const box = BOX[fieldSize(size, density)];
+    const id = useId();
+    const [own, setOwn] = useState(defaultValue);
+    const iso = value !== undefined ? value : own;
+    const [shown, setShown] = useOpen(open, defaultOpen, onOpenChange);
+    const disabled = off || countries.length === 0;
+    const picked = countries.find((c) => c.value === iso);
+    const options = [
+        { value: NONE, label: noCountryLabel, start: _jsx(Mark, {}) },
+        ...countries.map((c) => ({
+            value: c.value,
+            label: c.label,
+            keywords: [c.value],
+            disabled: c.disabled,
+            start: _jsx(Mark, { iso: c.value, override: c.flag }),
+        })),
+    ];
+    const trigger = (_jsxs(XStack, { ...slot('country-select'), render: "button", ...{
+            type: 'button',
+            disabled,
+            'aria-expanded': shown,
+            ...(label ? { 'aria-labelledby': id } : ariaLabel ? { 'aria-label': ariaLabel } : null),
+        }, componentName: "Input", ...FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), minH: box.h, px: box.gutter, width: "100%", minW: 0, items: "center", gap: "$2", cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, borderColor: shown ? '$borderColorFocus' : '$borderColor', hoverStyle: disabled ? undefined : { borderColor: '$borderColorHover' }, ...touch(box.h, 44, 'y'), children: [_jsx(Mark, { iso: picked?.value, override: picked?.flag }), _jsx(SizableText, { size: box.font, color: picked ? '$ink' : '$placeholderColor', flex: 1, minW: 0, numberOfLines: 1, text: "left", children: picked?.label ?? noCountryLabel }), _jsx(ChevronDown, { size: 16, opacity: 0.5, shrink: 0 })] }));
+    return (_jsxs(YStack, { ...slot('country-select-field'), width: "100%", minW: 0, gap: "$1", children: [label ? (_jsx(SizableText, { id: id, size: "$1", fontWeight: "600", color: "$hint", children: label })) : null, _jsx(SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: iso ?? NONE, searchLabel: searchLabel, emptyLabel: noResultsLabel, width: 280, onPick: (next) => {
+                    const picked = next === NONE ? null : next;
+                    if (value === undefined)
+                        setOwn(picked);
+                    if (picked !== iso)
+                        onValueChange?.(picked);
+                    setShown(false);
+                }, trigger: trigger })] }));
+}
+//# sourceMappingURL=country-select.js.map

package/dist/backends/gui/country-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-select.js","sourceRoot":"","sources":["../../../src/backends/gui/country-select.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/currency-picker.cjs

@@ -0,0 +1,48 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyPicker = CurrencyPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CurrencyPicker — the currency at the start of an amount field.
+ *
+ *   <InputGroup>
+ *     <CurrencyPicker currencies={list} value={code} onValueChange={setCode} />
+ *     <NumberField value={amount} onValueChange={setAmount} />
+ *   </InputGroup>
+ *
+ * A segment of the field, not a box beside it (`Segment`): the code in the
+ * quiet ink and a small chevron, opening a searchable list in which the name,
+ * the code and the symbol all match. Data-free: the caller passes the
+ * currencies, from `Intl.supportedValuesOf('currency')` or its own list.
+ *
+ * Props and anatomy after twenty-ui's CurrencyPicker (MIT, NOTICE).
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const search_list_1 = require("./search-list.cjs");
+const label = (c) => `${c.name} (${c.code})`;
+const search = (c) => [c.name, c.code, c.symbol].filter(Boolean).join(' ');
+function CurrencyPicker({ currencies, value, defaultValue = null, onValueChange, placeholder = '—', renderValue, getOptionLabel = label, getSearchText = search, selectedFirst = false, closeOnSelect = true, open, defaultOpen, onOpenChange, disabled = false, label: name = 'Currency', searchLabel = 'Search currencies', emptyLabel = 'No currency found', }) {
+    const [own, setOwn] = (0, react_1.useState)(defaultValue);
+    const code = value !== undefined ? value : own;
+    const [shown, setShown] = (0, search_list_1.useOpen)(open, defaultOpen, onOpenChange);
+    const picked = currencies.find((c) => c.code === code);
+    const ordered = selectedFirst && picked ? [picked, ...currencies.filter((c) => c !== picked)] : currencies;
+    const options = ordered.map((c) => ({
+        value: c.code,
+        label: getOptionLabel(c),
+        keywords: [getSearchText(c)],
+        disabled: c.disabled,
+        end: c.symbol,
+    }));
+    return ((0, jsx_runtime_1.jsx)(search_list_1.SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: code, searchLabel: searchLabel, emptyLabel: emptyLabel, onPick: (next) => {
+            if (value === undefined)
+                setOwn(next);
+            if (next !== code)
+                onValueChange?.(next);
+            if (closeOnSelect)
+                setShown(false);
+        }, trigger: (0, jsx_runtime_1.jsxs)(search_list_1.Segment, { ...{ 'data-slot': 'currency-picker' }, disabled: disabled, open: shown, label: picked ? `${name}: ${picked.name}` : name, children: [renderValue ? (renderValue(picked)) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontWeight: "500", color: "$hint", children: picked?.code ?? placeholder })), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: "$hint" })] }) }));
+}

package/dist/backends/gui/currency-picker.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+export type CurrencyOption = {
+    /** ISO 4217, e.g. "USD". */
+    code: string;
+    /** e.g. "US Dollar". */
+    name: string;
+    symbol?: string;
+    disabled?: boolean;
+};
+export type CurrencyPickerProps = {
+    currencies: CurrencyOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (code: string | null) => void;
+    /** Shown in the segment when nothing is picked. */
+    placeholder?: string;
+    /** What the segment shows for the picked currency; its code by default. */
+    renderValue?: (currency: CurrencyOption | undefined) => ReactNode;
+    /** A row's label; "Name (CODE)" by default. */
+    getOptionLabel?: (currency: CurrencyOption) => string;
+    /** What a row is found by beyond its label; the name, the code and the symbol by default. */
+    getSearchText?: (currency: CurrencyOption) => string;
+    /** The picked currency first in the list. */
+    selectedFirst?: boolean;
+    /** Close the list on a pick (default true). */
+    closeOnSelect?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** The segment's name to assistive technology, before the picked currency. */
+    label?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+};
+export declare function CurrencyPicker({ currencies, value, defaultValue, onValueChange, placeholder, renderValue, getOptionLabel, getSearchText, selectedFirst, closeOnSelect, open, defaultOpen, onOpenChange, disabled, label: name, searchLabel, emptyLabel, }: CurrencyPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=currency-picker.d.ts.map

package/dist/backends/gui/currency-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-picker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/currency-picker.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,SAAS,CAAA;IACjE,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,MAAM,CAAA;IACrD,6FAA6F;IAC7F,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,MAAM,CAAA;IACpD,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAKD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,WAAiB,EACjB,WAAW,EACX,cAAsB,EACtB,aAAsB,EACtB,aAAqB,EACrB,aAAoB,EACpB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAgB,EAChB,KAAK,EAAE,IAAiB,EACxB,WAAiC,EACjC,UAAgC,GACjC,EAAE,mBAAmB,+BA+CrB"}

package/dist/backends/gui/currency-picker.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CurrencyPicker — the currency at the start of an amount field.
+ *
+ *   <InputGroup>
+ *     <CurrencyPicker currencies={list} value={code} onValueChange={setCode} />
+ *     <NumberField value={amount} onValueChange={setAmount} />
+ *   </InputGroup>
+ *
+ * A segment of the field, not a box beside it (`Segment`): the code in the
+ * quiet ink and a small chevron, opening a searchable list in which the name,
+ * the code and the symbol all match. Data-free: the caller passes the
+ * currencies, from `Intl.supportedValuesOf('currency')` or its own list.
+ *
+ * Props and anatomy after twenty-ui's CurrencyPicker (MIT, NOTICE).
+ */
+import { SizableText } from '@hanzo/gui';
+import { ChevronDown } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
+import { SearchList, Segment, useOpen } from './search-list.js';
+const label = (c) => `${c.name} (${c.code})`;
+const search = (c) => [c.name, c.code, c.symbol].filter(Boolean).join(' ');
+export function CurrencyPicker({ currencies, value, defaultValue = null, onValueChange, placeholder = '—', renderValue, getOptionLabel = label, getSearchText = search, selectedFirst = false, closeOnSelect = true, open, defaultOpen, onOpenChange, disabled = false, label: name = 'Currency', searchLabel = 'Search currencies', emptyLabel = 'No currency found', }) {
+    const [own, setOwn] = useState(defaultValue);
+    const code = value !== undefined ? value : own;
+    const [shown, setShown] = useOpen(open, defaultOpen, onOpenChange);
+    const picked = currencies.find((c) => c.code === code);
+    const ordered = selectedFirst && picked ? [picked, ...currencies.filter((c) => c !== picked)] : currencies;
+    const options = ordered.map((c) => ({
+        value: c.code,
+        label: getOptionLabel(c),
+        keywords: [getSearchText(c)],
+        disabled: c.disabled,
+        end: c.symbol,
+    }));
+    return (_jsx(SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: code, searchLabel: searchLabel, emptyLabel: emptyLabel, onPick: (next) => {
+            if (value === undefined)
+                setOwn(next);
+            if (next !== code)
+                onValueChange?.(next);
+            if (closeOnSelect)
+                setShown(false);
+        }, trigger: _jsxs(Segment, { ...{ 'data-slot': 'currency-picker' }, disabled: disabled, open: shown, label: picked ? `${name}: ${picked.name}` : name, children: [renderValue ? (renderValue(picked)) : (_jsx(SizableText, { size: "$2", fontWeight: "500", color: "$hint", children: picked?.code ?? placeholder })), _jsx(ChevronDown, { size: 14, color: "$hint" })] }) }));
+}
+//# sourceMappingURL=currency-picker.js.map

package/dist/backends/gui/currency-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-picker.js","sourceRoot":"","sources":["../../../src/backends/gui/currency-picker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAqB,MAAM,eAAe,CAAA;AAsC/E,MAAM,KAAK,GAAG,CAAC,CAAiB,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,GAAG,CAAA;AAC5D,MAAM,MAAM,GAAG,CAAC,CAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE1F,MAAM,UAAU,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,YAAY,GAAG,IAAI,EACnB,aAAa,EACb,WAAW,GAAG,GAAG,EACjB,WAAW,EACX,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,MAAM,EACtB,aAAa,GAAG,KAAK,EACrB,aAAa,GAAG,IAAI,EACpB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,IAAI,GAAG,UAAU,EACxB,WAAW,GAAG,mBAAmB,EACjC,UAAU,GAAG,mBAAmB,GACZ;IACpB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAgB,YAAY,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,YAAY,CAAC,CAAA;IAClE,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;IAEtD,MAAM,OAAO,GAAG,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAA;IAC1G,MAAM,OAAO,GAAmB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QAClD,KAAK,EAAE,CAAC,CAAC,IAAI;QACb,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;QACxB,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC5B,QAAQ,EAAE,CAAC,CAAC,QAAQ;QACpB,GAAG,EAAE,CAAC,CAAC,MAAM;KACd,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,IAAI,CAAC,QAAQ,EACxB,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EACzD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,KAAK,KAAK,SAAS;gBAAE,MAAM,CAAC,IAAI,CAAC,CAAA;YACrC,IAAI,IAAI,KAAK,IAAI;gBAAE,aAAa,EAAE,CAAC,IAAI,CAAC,CAAA;YACxC,IAAI,aAAa;gBAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC,EACD,OAAO,EACL,MAAC,OAAO,OACD,EAAE,WAAW,EAAE,iBAAiB,EAAa,EAClD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,aAE/C,WAAW,CAAC,CAAC,CAAC,CACb,WAAW,CAAC,MAAM,CAAC,CACpB,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,OAAO,YAClD,MAAM,EAAE,IAAI,IAAI,WAAW,GAChB,CACf,EACD,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG,IAC/B,GAEZ,CACH,CAAA;AACH,CAAC"}

package/dist/backends/gui/density.cjs

@@ -0,0 +1,32 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldSize = exports.useDensity = void 0;
+exports.Density = Density;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Density — how tight the controls under it sit.
+ *
+ * `regular` is every Hanzo surface as it is: 36px fields and buttons, 14px text.
+ * `compact` is the record density a CRM, a data table or a settings page wants —
+ * 32px controls with 13px text and an 8px gutter, the box a cell editor and a
+ * filter value are drawn in (twenty-ui's default rung, MIT). It changes what a
+ * control renders when it names no `size`; a control that names one keeps it.
+ *
+ * A context rather than a prop on each control, because the decision belongs to
+ * the shell: the CRM sets it once at its root and every Input, Select, Textarea
+ * and Button inside agrees, including the ones a library renders that the app
+ * never sees. A portalled panel (a menu, a select's list) re-provides the
+ * density it was opened from, as `PortalTheme` re-provides the theme.
+ */
+const react_1 = require("react");
+const DensityContext = /* @__PURE__ */ (0, react_1.createContext)('regular');
+function Density({ value, children }) {
+    return (0, jsx_runtime_1.jsx)(DensityContext.Provider, { value: value, children: children });
+}
+/** The density the nearest `Density` names; `regular` with none. */
+const useDensity = () => (0, react_1.useContext)(DensityContext);
+exports.useDensity = useDensity;
+/** The box a field draws: its own `size` when it names one, else the density's. */
+const fieldSize = (size, density) => size ?? (density === 'compact' ? 'sm' : 'default');
+exports.fieldSize = fieldSize;

package/dist/backends/gui/density.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Density — how tight the controls under it sit.
+ *
+ * `regular` is every Hanzo surface as it is: 36px fields and buttons, 14px text.
+ * `compact` is the record density a CRM, a data table or a settings page wants —
+ * 32px controls with 13px text and an 8px gutter, the box a cell editor and a
+ * filter value are drawn in (twenty-ui's default rung, MIT). It changes what a
+ * control renders when it names no `size`; a control that names one keeps it.
+ *
+ * A context rather than a prop on each control, because the decision belongs to
+ * the shell: the CRM sets it once at its root and every Input, Select, Textarea
+ * and Button inside agrees, including the ones a library renders that the app
+ * never sees. A portalled panel (a menu, a select's list) re-provides the
+ * density it was opened from, as `PortalTheme` re-provides the theme.
+ */
+import { type ReactNode } from 'react';
+import type { FieldSize } from './control.js';
+export type DensityName = 'regular' | 'compact';
+export declare function Density({ value, children }: {
+    value: DensityName;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** The density the nearest `Density` names; `regular` with none. */
+export declare const useDensity: () => DensityName;
+/** The box a field draws: its own `size` when it names one, else the density's. */
+export declare const fieldSize: (size: FieldSize | null | undefined, density: DensityName) => FieldSize;
+//# sourceMappingURL=density.d.ts.map

package/dist/backends/gui/density.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/density.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAE1C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAI/C,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAExF;AAED,oEAAoE;AACpE,eAAO,MAAM,UAAU,QAAO,WAAyC,CAAA;AAEvE,mFAAmF;AACnF,eAAO,MAAM,SAAS,SAAU,SAAS,GAAG,IAAI,GAAG,SAAS,WAAW,WAAW,KAAG,SACjC,CAAA"}

package/dist/backends/gui/density.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Density — how tight the controls under it sit.
+ *
+ * `regular` is every Hanzo surface as it is: 36px fields and buttons, 14px text.
+ * `compact` is the record density a CRM, a data table or a settings page wants —
+ * 32px controls with 13px text and an 8px gutter, the box a cell editor and a
+ * filter value are drawn in (twenty-ui's default rung, MIT). It changes what a
+ * control renders when it names no `size`; a control that names one keeps it.
+ *
+ * A context rather than a prop on each control, because the decision belongs to
+ * the shell: the CRM sets it once at its root and every Input, Select, Textarea
+ * and Button inside agrees, including the ones a library renders that the app
+ * never sees. A portalled panel (a menu, a select's list) re-provides the
+ * density it was opened from, as `PortalTheme` re-provides the theme.
+ */
+import { createContext, useContext } from 'react';
+const DensityContext = /* @__PURE__ */ createContext('regular');
+export function Density({ value, children }) {
+    return _jsx(DensityContext.Provider, { value: value, children: children });
+}
+/** The density the nearest `Density` names; `regular` with none. */
+export const useDensity = () => useContext(DensityContext);
+/** The box a field draws: its own `size` when it names one, else the density's. */
+export const fieldSize = (size, density) => size ?? (density === 'compact' ? 'sm' : 'default');
+//# sourceMappingURL=density.js.map

package/dist/backends/gui/density.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.js","sourceRoot":"","sources":["../../../src/backends/gui/density.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAKjE,MAAM,cAAc,GAAG,eAAe,CAAC,aAAa,CAAc,SAAS,CAAC,CAAA;AAE5E,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAgD;IACvF,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA2B,CAAA;AACpF,CAAC;AAED,oEAAoE;AACpE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAgB,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA;AAEvE,mFAAmF;AACnF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAkC,EAAE,OAAoB,EAAa,EAAE,CAC/F,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA"}

package/dist/backends/gui/dialog.cjs

@@ -1,7 +1,7 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = void 0;
+exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.DialogBody = exports.Dialog = exports.section = exports.Sized = exports.scrim = exports.frame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Dialog — modal surface, flattened from @hanzogui/dialog's compound parts.
@@ -9,13 +9,48 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `DialogContent` mounts its OWN portal + overlay (so callers never wrap it) and
  * re-applies the trigger's resolved theme inside the portal via `PortalTheme` —
  * gui portals re-root the subtree, so React theme context does not flow.
+ *
+ * `size` is the record dialog (twenty-ui's Dialog, MIT, NOTICE): sm 300, compact
+ * 360, md 400, lg the larger of 400 and 53% of the viewport, xl 1200 (at most
+ * 800 tall), fullscreen. A sized dialog is a frame of three sections — Header
+ * (24 all round, title and description centred), Body (24 at the sides and
+ * foot) and Footer (actions to the end, 8 apart, pinned to the bottom) — on an
+ * 8px corner with the floating shadow instead of an edge, over a 72% scrim. With
+ * no `size` the dialog is the 512-wide panel every surface has. AlertDialog wears
+ * the same frame (`frame`, `scrim`, `Sized`).
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const PAD = 24;
+const WIDTH = {
+    sm: 300,
+    compact: 360,
+    md: 400,
+    lg: 'max(400px, 53vw)',
+    xl: 1200,
+    fullscreen: '100vw',
+};
+/** The sized frame both dialogs wear: the width, the corner, the floating shadow, no edge, no inset of its own. */
+const frame = (size) => ({
+    width: WIDTH[size],
+    maxW: size === 'fullscreen' ? '100vw' : 'calc(100vw - 32px)',
+    maxH: size === 'fullscreen' ? '100vh' : size === 'xl' ? 'min(800px, calc(100vh - 32px))' : 'calc(100vh - 32px)',
+    ...(size === 'fullscreen' ? { height: '100vh' } : null),
+    rounded: size === 'fullscreen' ? 0 : '$3',
+    borderWidth: 0,
+    p: 0,
+    gap: 0,
+    style: size === 'fullscreen' ? undefined : { boxShadow: 'var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75))' },
+});
+exports.frame = frame;
+/** The scrim under a sized dialog: black at 72%, opaque layer. */
+exports.scrim = { bg: 'rgba(0,0,0,0.72)', opacity: 1 };
+/** The size a dialog's sections are drawn for; `null` for the unsized panel. */
+exports.Sized = (0, react_1.createContext)(null);
 const Dialog = (p) => (0, jsx_runtime_1.jsx)(gui_1.Dialog, { modal: true, ...p });
 exports.Dialog = Dialog;
 const DialogTrigger = gui_1.Dialog.Trigger;
@@ -26,16 +61,39 @@ const DialogClose = gui_1.Dialog.Close;
 exports.DialogClose = DialogClose;
 const DialogOverlay = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Overlay, { ...(0, slot_1.slot)('dialog-overlay'), bg: "rgba(0,0,0,0.5)", opacity: 0.5, ...props }));
 exports.DialogOverlay = DialogOverlay;
-const DialogContent = ({ showCloseButton = true, overlay, children, ...props }) => {
+const DialogContent = ({ showCloseButton = true, overlay, size, children, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
-    return ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Portal, { children: (0, jsx_runtime_1.jsxs)(portal_theme_1.PortalTheme, { name: themeName, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, { ...overlay }), (0, jsx_runtime_1.jsxs)(gui_1.Dialog.Content, { ...(0, slot_1.slot)('dialog-content'), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...props, children: [children, showCloseButton ? ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('dialog-close'), ...(0, gesture_1.touch)(16), position: "absolute", t: 16, r: 16, cursor: "pointer", opacity: 0.7, hoverStyle: { opacity: 1 }, "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) }) })) : null] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Portal, { children: (0, jsx_runtime_1.jsxs)(portal_theme_1.PortalTheme, { name: themeName, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, { ...(size ? exports.scrim : null), ...overlay }), (0, jsx_runtime_1.jsxs)(gui_1.Dialog.Content, { ...(0, slot_1.slot)('dialog-content'), ...(size ? { 'data-size': size } : null), bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: "$5", p: PAD, gap: "$4", width: "100%", maxW: 512, ...(size ? (0, exports.frame)(size) : null), ...props, children: [(0, jsx_runtime_1.jsx)(exports.Sized.Provider, { value: size ?? null, children: children }), showCloseButton ? ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('dialog-close'), ...(0, gesture_1.touch)(16), position: "absolute", t: 16, r: 16, cursor: "pointer", opacity: 0.7, hoverStyle: { opacity: 1 }, "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) }) })) : null] })] }) }));
 };
 exports.DialogContent = DialogContent;
-const DialogHeader = (props) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('dialog-header'), gap: "$2", ...props }));
+/** The three sections of a sized frame, as twenty-ui pads them. */
+exports.section = {
+    header: { p: PAD, gap: '$2', items: 'center' },
+    body: { px: PAD, pb: PAD },
+    footer: { px: PAD, pb: PAD, mt: 'auto', flexWrap: 'wrap', gap: '$2' },
+    title: { size: '$4', fontWeight: '600', textAlign: 'center' },
+    description: { size: '$2', lineHeight: 20, textAlign: 'center', color: '$aside' },
+};
+const DialogHeader = (props) => {
+    const sized = (0, react_1.useContext)(exports.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('dialog-header'), gap: "$2", ...(sized ? exports.section.header : null), ...props });
+};
 exports.DialogHeader = DialogHeader;
-const DialogFooter = (props) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...props }));
+/** A sized dialog's middle: what the dialog is for, inset at the sides and foot. */
+const DialogBody = (props) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('dialog-body'), ...exports.section.body, ...props }));
+exports.DialogBody = DialogBody;
+const DialogFooter = (props) => {
+    const sized = (0, react_1.useContext)(exports.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('dialog-footer'), gap: "$2", justify: "flex-end", items: "center", ...(sized ? exports.section.footer : null), ...props });
+};
 exports.DialogFooter = DialogFooter;
-const DialogTitle = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Title, { ...(0, slot_1.slot)('dialog-title'), size: "$5", fontWeight: "600", ...props }));
+const DialogTitle = (props) => {
+    const sized = (0, react_1.useContext)(exports.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.Dialog.Title, { ...(0, slot_1.slot)('dialog-title'), size: "$5", fontWeight: "600", ...(sized ? exports.section.title : null), ...props });
+};
 exports.DialogTitle = DialogTitle;
-const DialogDescription = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Dialog.Description, { ...(0, slot_1.slot)('dialog-description'), size: "$2", color: "$quiet", ...props }));
+const DialogDescription = (props) => {
+    const sized = (0, react_1.useContext)(exports.Sized);
+    return (0, jsx_runtime_1.jsx)(gui_1.Dialog.Description, { ...(0, slot_1.slot)('dialog-description'), size: "$2", color: "$quiet", ...(sized ? exports.section.description : null), ...props });
+};
 exports.DialogDescription = DialogDescription;