@flipdish/ui-library 0.32.1 → 0.33.0

package/dist/components/atoms/Flag/flag.utils.js

@@ -0,0 +1,42 @@
+import { getEnvironmentVariable } from '@flipdish/ui-library/utilities/renderUtils';
+
+const resolvers = new Map();
+const warnedCodes = new Set();
+/**
+ * Resolves a country's name from its ISO 3166-1 alpha-2 code, for the flag's default accessible name.
+ * @param code The country code, as `Flag` receives it.
+ * @param locale BCP 47 tag the name is written in; the app's locale, so server and client agree.
+ * @returns The region name in that locale, or the code itself where `Intl.DisplayNames` is missing or rejects the code or locale.
+ */
+const getCountryName = (code, locale = 'en') => {
+    // Built once per locale; `Intl.DisplayNames` is missing from some older runtimes, where the code stands in.
+    let resolver = resolvers.get(locale);
+    if (resolver === undefined) {
+        try {
+            resolver = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale], { type: 'region' }) : null;
+        }
+        catch {
+            resolver = null;
+        }
+        resolvers.set(locale, resolver);
+    }
+    try {
+        return resolver?.of(code) ?? code;
+    }
+    catch {
+        return code;
+    }
+};
+/**
+ * Warns once per unknown country code outside production, so a bad code is visible in development without flooding the console.
+ * @param code The code no flag exists for.
+ */
+const warnUnknownCountryOnce = (code) => {
+    if (getEnvironmentVariable('NODE_ENV') === 'production' || warnedCodes.has(code))
+        return;
+    warnedCodes.add(code);
+    console.warn(`Flag: no flag for country code "${code}".`);
+};
+
+export { getCountryName, warnUnknownCountryOnce };
+//# sourceMappingURL=flag.utils.js.map

package/dist/components/atoms/Flag/flag.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.utils.js","sources":["../../../../src/components/atoms/Flag/flag.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoC;AAC7D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAU;AAErC;;;;;AAKG;AACI,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,MAAM,GAAG,IAAI,KAAY;;IAEpE,IAAI,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC;AACpC,IAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,QAAA,IAAI;AACF,YAAA,QAAQ,GAAG,OAAO,IAAI,CAAC,YAAY,KAAK,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI;QACjH;AAAE,QAAA,MAAM;YACN,QAAQ,GAAG,IAAI;QACjB;AACA,QAAA,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC;IACjC;AACA,IAAA,IAAI;QACF,OAAO,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI;IACnC;AAAE,IAAA,MAAM;AACN,QAAA,OAAO,IAAI;IACb;AACF;AAEA;;;AAGG;AACI,MAAM,sBAAsB,GAAG,CAAC,IAAY,KAAU;AAC3D,IAAA,IAAI,sBAAsB,CAAC,UAAU,CAAC,KAAK,YAAY,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE;AAClF,IAAA,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,IAAA,OAAO,CAAC,IAAI,CAAC,mCAAmC,IAAI,CAAA,EAAA,CAAI,CAAC;AAC3D;;"}

package/dist/components/atoms/Flag/index.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
+var flag_utils = require('./flag.utils.cjs');
+
+const toFlagSvg = (set) => {
+    const FlagSvg = ({ code, ...props }) => {
+        const Svg = set[code];
+        if (!Svg) {
+            flag_utils.warnUnknownCountryOnce(code);
+            return null;
+        }
+        return jsxRuntime.jsx(Svg, { ...props });
+    };
+    return { default: FlagSvg };
+};
+// Each set is every country in one ~53 KB gzip module, so it loads on the first flag of that shape rather than with every importer of `Flag`.
+const FLAG_SVGS = {
+    round: React.lazy(() => import('country-flag-icons/react/1x1').then((flags) => toFlagSvg(flags))),
+    rectangle: React.lazy(() => import('country-flag-icons/react/3x2').then((flags) => toFlagSvg(flags))),
+};
+// A rectangle keeps the art's 3:2 ratio at the same height as the round flag.
+const SIZES = {
+    round: { xs: 'size-4', sm: 'size-5', md: 'size-6', lg: 'size-8' },
+    rectangle: { xs: 'h-4 w-6', sm: 'h-5 w-7.5', md: 'h-6 w-9', lg: 'h-8 w-12' },
+};
+/**
+ * A country's flag from its ISO code, round for inline use beside a label or rectangular where
+ * the full flag matters. Each shape is one bundled set from `country-flag-icons` that loads on
+ * its first use, so a page costs nothing until it shows a flag and the same after that however
+ * many countries it shows.
+ *
+ * @summary country flag from an ISO country code
+ */
+const Flag = ({ code, size = 'sm', shape = 'round', label, locale, className, 'data-testid': dataTestId, ...props }) => {
+    const flagTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'flag', rootName: 'flag' });
+    const name = label ?? flag_utils.getCountryName(code, locale);
+    const isDecorative = name === '';
+    const FlagSvg = FLAG_SVGS[shape];
+    return (jsxRuntime.jsx(React.Suspense, { fallback: null, children: jsxRuntime.jsx(FlagSvg, { ...props, code: code, "data-testid": flagTestId, role: isDecorative ? undefined : 'img', "aria-label": isDecorative ? undefined : name, "aria-hidden": isDecorative || undefined, title: isDecorative ? undefined : name, className: cx.cx('shrink-0 overflow-hidden', shape === 'round' && 'rounded-full', SIZES[shape][size], className) }) }));
+};
+
+exports.Flag = Flag;
+//# sourceMappingURL=index.cjs.map

package/dist/components/atoms/Flag/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Flag/index.tsx"],"sourcesContent":[null],"names":["warnUnknownCountryOnce","_jsx","lazy","useResolvedTestId","getCountryName","Suspense","cx"],"mappings":";;;;;;;;AAeA,MAAM,SAAS,GAAG,CAAC,GAAY,KAAI;IACjC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAmC,KAAI;AACtE,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,GAAG,EAAE;YACRA,iCAAsB,CAAC,IAAI,CAAC;AAC5B,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAOC,cAAA,CAAC,GAAG,EAAA,EAAA,GAAK,KAAK,GAAI;AAC3B,IAAA,CAAC;AACD,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AAC7B,CAAC;AAED;AACA,MAAM,SAAS,GAAG;IAChB,KAAK,EAAEC,UAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;IACtG,SAAS,EAAEA,UAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;CAC3G;AAED;AACA,MAAM,KAAK,GAAgD;AACzD,IAAA,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACjE,IAAA,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE;CAC7E;AAiBD;;;;;;;AAOG;AACI,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAa,KAAI;AACvI,IAAA,MAAM,UAAU,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAC/F,MAAM,IAAI,GAAG,KAAK,IAAIC,yBAAc,CAAC,IAAI,EAAE,MAAM,CAAC;AAClD,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,EAAE;AAChC,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;AAEhC,IAAA,QACEH,cAAA,CAACI,cAAQ,EAAA,EAAC,QAAQ,EAAE,IAAI,EAAA,QAAA,EACtBJ,cAAA,CAAC,OAAO,OACF,KAAK,EACT,IAAI,EAAE,IAAI,iBACG,UAAU,EACvB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,KAAK,EAAA,YAAA,EAC1B,YAAY,GAAG,SAAS,GAAG,IAAI,EAAA,aAAA,EAC9B,YAAY,IAAI,SAAS,EACtC,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACtC,SAAS,EAAEK,KAAE,CAAC,0BAA0B,EAAE,KAAK,KAAK,OAAO,IAAI,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAA,CAC7G,EAAA,CACO;AAEf;;"}

package/dist/components/atoms/Flag/index.d.ts

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react';
+import type { CountryCode, FlagShape, FlagSize } from './flag.types';
+export type { CountryCode, FlagShape, FlagSize } from './flag.types';
+export interface FlagProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    /** ISO 3166-1 alpha-2 code of the country to show. */
+    code: CountryCode;
+    /** Height: `xs` 16px, `sm` 20px, `md` 24px, `lg` 32px. A rectangle is 3:2, so wider than tall. */
+    size?: FlagSize;
+    /** `round` clips the square art to a circle; `rectangle` shows the 3:2 flag. */
+    shape?: FlagShape;
+    /** Accessible name. Defaults to the country's name in `locale`; pass `''` to hide the flag from assistive technology when visible text beside it already names the country. */
+    label?: string;
+    /** BCP 47 tag the default name is written in. Pass the app's locale rather than reading the browser's, so server and client render the same name. */
+    locale?: string;
+    /** Overrides the `data-testid` (defaults to `fd-flag`). */
+    'data-testid'?: string;
+}
+/**
+ * A country's flag from its ISO code, round for inline use beside a label or rectangular where
+ * the full flag matters. Each shape is one bundled set from `country-flag-icons` that loads on
+ * its first use, so a page costs nothing until it shows a flag and the same after that however
+ * many countries it shows.
+ *
+ * @summary country flag from an ISO country code
+ */
+export declare const Flag: ({ code, size, shape, label, locale, className, "data-testid": dataTestId, ...props }: FlagProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/Flag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Flag/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGrE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA8BrE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC1E,sDAAsD;IACtD,IAAI,EAAE,WAAW,CAAC;IAClB,kGAAkG;IAClG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+KAA+K;IAC/K,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qJAAqJ;IACrJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,GAAI,sFAAuG,SAAS,gCAoBpI,CAAC"}

package/dist/components/atoms/Flag/index.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { lazy, Suspense } from 'react';
+import { warnUnknownCountryOnce, getCountryName } from './flag.utils.js';
+
+const toFlagSvg = (set) => {
+    const FlagSvg = ({ code, ...props }) => {
+        const Svg = set[code];
+        if (!Svg) {
+            warnUnknownCountryOnce(code);
+            return null;
+        }
+        return jsx(Svg, { ...props });
+    };
+    return { default: FlagSvg };
+};
+// Each set is every country in one ~53 KB gzip module, so it loads on the first flag of that shape rather than with every importer of `Flag`.
+const FLAG_SVGS = {
+    round: lazy(() => import('country-flag-icons/react/1x1').then((flags) => toFlagSvg(flags))),
+    rectangle: lazy(() => import('country-flag-icons/react/3x2').then((flags) => toFlagSvg(flags))),
+};
+// A rectangle keeps the art's 3:2 ratio at the same height as the round flag.
+const SIZES = {
+    round: { xs: 'size-4', sm: 'size-5', md: 'size-6', lg: 'size-8' },
+    rectangle: { xs: 'h-4 w-6', sm: 'h-5 w-7.5', md: 'h-6 w-9', lg: 'h-8 w-12' },
+};
+/**
+ * A country's flag from its ISO code, round for inline use beside a label or rectangular where
+ * the full flag matters. Each shape is one bundled set from `country-flag-icons` that loads on
+ * its first use, so a page costs nothing until it shows a flag and the same after that however
+ * many countries it shows.
+ *
+ * @summary country flag from an ISO country code
+ */
+const Flag = ({ code, size = 'sm', shape = 'round', label, locale, className, 'data-testid': dataTestId, ...props }) => {
+    const flagTestId = useResolvedTestId({ testId: dataTestId, segment: 'flag', rootName: 'flag' });
+    const name = label ?? getCountryName(code, locale);
+    const isDecorative = name === '';
+    const FlagSvg = FLAG_SVGS[shape];
+    return (jsx(Suspense, { fallback: null, children: jsx(FlagSvg, { ...props, code: code, "data-testid": flagTestId, role: isDecorative ? undefined : 'img', "aria-label": isDecorative ? undefined : name, "aria-hidden": isDecorative || undefined, title: isDecorative ? undefined : name, className: cx('shrink-0 overflow-hidden', shape === 'round' && 'rounded-full', SIZES[shape][size], className) }) }));
+};
+
+export { Flag };
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Flag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Flag/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,CAAC,GAAY,KAAI;IACjC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAmC,KAAI;AACtE,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,GAAG,EAAE;YACR,sBAAsB,CAAC,IAAI,CAAC;AAC5B,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAOA,GAAA,CAAC,GAAG,EAAA,EAAA,GAAK,KAAK,GAAI;AAC3B,IAAA,CAAC;AACD,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AAC7B,CAAC;AAED;AACA,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,IAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;IACtG,SAAS,EAAE,IAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;CAC3G;AAED;AACA,MAAM,KAAK,GAAgD;AACzD,IAAA,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACjE,IAAA,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE;CAC7E;AAiBD;;;;;;;AAOG;AACI,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAa,KAAI;AACvI,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAC/F,MAAM,IAAI,GAAG,KAAK,IAAI,cAAc,CAAC,IAAI,EAAE,MAAM,CAAC;AAClD,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,EAAE;AAChC,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;AAEhC,IAAA,QACEA,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,IAAI,EAAA,QAAA,EACtBA,GAAA,CAAC,OAAO,OACF,KAAK,EACT,IAAI,EAAE,IAAI,iBACG,UAAU,EACvB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,KAAK,EAAA,YAAA,EAC1B,YAAY,GAAG,SAAS,GAAG,IAAI,EAAA,aAAA,EAC9B,YAAY,IAAI,SAAS,EACtC,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACtC,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,KAAK,KAAK,OAAO,IAAI,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAA,CAC7G,EAAA,CACO;AAEf;;"}

package/dist/components/atoms/SearchInput/index.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Input = require('@flipdish/ui-library/components/atoms/Input');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var reactAriaComponents = require('react-aria-components');
+var useHotkeyHint = require('../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
+
+const sizes = cx.sortCx({
+    sm: { input: 'py-2 pr-9 pl-9 text-sm', icon: 'left-3 size-4 stroke-[2.25px]', clear: 'right-2', shortcut: 'pr-1.5' },
+    md: { input: 'py-2 pr-9 pl-10 text-md', icon: 'left-3 size-5', clear: 'right-2', shortcut: 'pr-2' },
+    lg: { input: 'py-2.5 pr-9.5 pl-10.5 text-md', icon: 'left-3.5 size-5', clear: 'right-2.5', shortcut: 'pr-2.5' },
+});
+/**
+ * A search box with a magnifier, a clear button once it holds text, and Escape to clear. Use it
+ * wherever typing filters a list or table; for a field that collects a value, use `Input`.
+ *
+ * @summary search box that filters as you type and clears in one press
+ */
+const SearchInput = ({ label, hint, placeholder, size = 'md', clearLabel = 'Clear search', shortcut, className, wrapperClassName, inputClassName, ref, 'data-testid': dataTestId, ...props }) => {
+    const inputTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'search-input', rootName: 'search-input' });
+    const shortcutLabel = useHotkeyHint.useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
+    return (jsxRuntime.jsx(reactAriaComponents.SearchField, { "aria-label": label ? undefined : placeholder, ...props, className: cx.cx('group/search flex h-max w-full flex-col items-start gap-1.5', className), children: ({ isInvalid, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && jsxRuntime.jsx(Input.Label, { isInvalid: isInvalid, children: label }), jsxRuntime.jsxs(reactAriaComponents.Group, { isDisabled: isDisabled, isInvalid: isInvalid, className: ({ isFocusWithin }) => cx.cx('relative flex w-full items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset', isFocusWithin && !isDisabled && 'ring-2 ring-brand', isDisabled && 'cursor-not-allowed opacity-50', isInvalid && 'ring-error_subtle', isInvalid && isFocusWithin && 'ring-2 ring-error', wrapperClassName), children: [jsxRuntime.jsx(uiIcons.SearchLg, { "aria-hidden": "true", className: cx.cx('pointer-events-none absolute text-fg-quaternary', sizes[size].icon) }), jsxRuntime.jsx(reactAriaComponents.Input, { ref: ref, "data-testid": inputTestId, placeholder: placeholder, className: cx.cx(
+                            // The browser draws its own cancel control on a search input; the clear button below replaces it.
+                            'm-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden', sizes[size].input, inputClassName) }), jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": clearLabel, "data-testid": testIdUtils.joinTestId(inputTestId, 'clear'), className: cx.cx('absolute flex cursor-pointer items-center justify-center rounded-md p-1 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear group-data-empty/search:hidden group-data-disabled/search:hidden group-data-readonly/search:hidden hover:text-fg-quaternary_hover focus-visible:outline-2', sizes[size].clear), children: jsxRuntime.jsx(uiIcons.XClose, { "aria-hidden": "true", className: "size-4 stroke-[2.25px]" }) }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 group-data-empty/search:md:flex', sizes[size].shortcut), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: "rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }), hint && jsxRuntime.jsx(Input.HintText, { isInvalid: isInvalid, children: hint })] })) }));
+};
+SearchInput.displayName = 'SearchInput';
+
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=index.cjs.map

package/dist/components/atoms/SearchInput/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/SearchInput/index.tsx"],"sourcesContent":[null],"names":["sortCx","useResolvedTestId","useHotkeyHint","_jsx","AriaSearchField","cx","_jsxs","_Fragment","Label","AriaGroup","SearchLg","AriaInput","AriaButton","joinTestId","XClose","HintText"],"mappings":"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"}

package/dist/components/atoms/SearchInput/index.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, Ref } from 'react';
+import type { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
+export interface SearchInputProps extends Omit<AriaSearchFieldProps, 'children' | 'className' | 'style'> {
+    /** Visible label above the field. Without one, pass `aria-label`; the placeholder alone does not name the field once it holds a value. */
+    label?: string;
+    /** Helper text under the field. */
+    hint?: ReactNode;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    /** Height, padding and text size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /**
+     * Keyboard shortcut hint shown while the field is empty. `true` shows the search shortcut (⌘K on
+     * macOS, Ctrl K elsewhere); a shortcut such as `mod+j` is drawn for the user's platform.
+     */
+    shortcut?: string | boolean;
+    /** Extra classes merged onto the outer field. */
+    className?: string;
+    /** Extra classes merged onto the bordered group around the input. */
+    wrapperClassName?: string;
+    /** Extra classes merged onto the `<input>`. */
+    inputClassName?: string;
+    /** Ref forwarded to the `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+    /** Overrides the `<input>`'s `data-testid` (defaults to `fd-search-input`). The clear button derives `<root>--clear`. */
+    'data-testid'?: string;
+}
+/**
+ * A search box with a magnifier, a clear button once it holds text, and Escape to clear. Use it
+ * wherever typing filters a list or table; for a field that collects a value, use `Input`.
+ *
+ * @summary search box that filters as you type and clears in one press
+ */
+export declare const SearchInput: {
+    ({ label, hint, placeholder, size, clearLabel, shortcut, className, wrapperClassName, inputClassName, ref, "data-testid": dataTestId, ...props }: SearchInputProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/SearchInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/SearchInput/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAUtF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IACtG,0IAA0I;IAC1I,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,yHAAyH;IACzH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW;sJAarB,gBAAgB;;CAuElB,CAAC"}

package/dist/components/atoms/SearchInput/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SearchLg, XClose } from '@flipdish/ui-icons';
+import { Label, HintText } from '@flipdish/ui-library/components/atoms/Input';
+import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { SearchField, Group, Input, Button } from 'react-aria-components';
+import { useHotkeyHint } from '../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
+
+const sizes = sortCx({
+    sm: { input: 'py-2 pr-9 pl-9 text-sm', icon: 'left-3 size-4 stroke-[2.25px]', clear: 'right-2', shortcut: 'pr-1.5' },
+    md: { input: 'py-2 pr-9 pl-10 text-md', icon: 'left-3 size-5', clear: 'right-2', shortcut: 'pr-2' },
+    lg: { input: 'py-2.5 pr-9.5 pl-10.5 text-md', icon: 'left-3.5 size-5', clear: 'right-2.5', shortcut: 'pr-2.5' },
+});
+/**
+ * A search box with a magnifier, a clear button once it holds text, and Escape to clear. Use it
+ * wherever typing filters a list or table; for a field that collects a value, use `Input`.
+ *
+ * @summary search box that filters as you type and clears in one press
+ */
+const SearchInput = ({ label, hint, placeholder, size = 'md', clearLabel = 'Clear search', shortcut, className, wrapperClassName, inputClassName, ref, 'data-testid': dataTestId, ...props }) => {
+    const inputTestId = useResolvedTestId({ testId: dataTestId, segment: 'search-input', rootName: 'search-input' });
+    const shortcutLabel = useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
+    return (jsx(SearchField, { "aria-label": label ? undefined : placeholder, ...props, className: cx('group/search flex h-max w-full flex-col items-start gap-1.5', className), children: ({ isInvalid, isDisabled }) => (jsxs(Fragment, { children: [label && jsx(Label, { isInvalid: isInvalid, children: label }), jsxs(Group, { isDisabled: isDisabled, isInvalid: isInvalid, className: ({ isFocusWithin }) => cx('relative flex w-full items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset', isFocusWithin && !isDisabled && 'ring-2 ring-brand', isDisabled && 'cursor-not-allowed opacity-50', isInvalid && 'ring-error_subtle', isInvalid && isFocusWithin && 'ring-2 ring-error', wrapperClassName), children: [jsx(SearchLg, { "aria-hidden": "true", className: cx('pointer-events-none absolute text-fg-quaternary', sizes[size].icon) }), jsx(Input, { ref: ref, "data-testid": inputTestId, placeholder: placeholder, className: cx(
+                            // The browser draws its own cancel control on a search input; the clear button below replaces it.
+                            'm-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden', sizes[size].input, inputClassName) }), jsx(Button, { "aria-label": clearLabel, "data-testid": joinTestId(inputTestId, 'clear'), className: cx('absolute flex cursor-pointer items-center justify-center rounded-md p-1 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear group-data-empty/search:hidden group-data-disabled/search:hidden group-data-readonly/search:hidden hover:text-fg-quaternary_hover focus-visible:outline-2', sizes[size].clear), children: jsx(XClose, { "aria-hidden": "true", className: "size-4 stroke-[2.25px]" }) }), shortcut && (jsx("div", { className: cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 group-data-empty/search:md:flex', sizes[size].shortcut), children: jsx("span", { "aria-hidden": "true", className: "rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }), hint && jsx(HintText, { isInvalid: isInvalid, children: hint })] })) }));
+};
+SearchInput.displayName = 'SearchInput';
+
+export { SearchInput };
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/SearchInput/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSearchField","_jsxs","_Fragment","AriaGroup","AriaInput","AriaButton"],"mappings":"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"}

package/dist/components/molecules/DetailList/detailList.types.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactElement, ReactNode } from 'react';
+/** One row of a `DetailList`: an icon, the label and the value it describes. */
+export type DetailListItemType = {
+    /** Stable key and test-id segment; the slugified `label` is used when absent. */
+    id?: string;
+    /** Icon component, or a ready element such as a `Flag`, centred in the row's `FeaturedIcon`. */
+    icon: FC<{
+        className?: string;
+    }> | ReactElement;
+    /** What the value is, rendered as the term. */
+    label: string;
+    /** The value itself: text, or an element such as a `Badge`. */
+    value: ReactNode;
+};
+//# sourceMappingURL=detailList.types.d.ts.map

package/dist/components/molecules/DetailList/detailList.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detailList.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DetailList/detailList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iFAAiF;IACjF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gGAAgG;IAChG,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,YAAY,CAAC;IAChD,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC"}

package/dist/components/molecules/DetailList/index.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+
+// Row padding equals the icon width plus the gap, so the term and value sit beside the centred icon.
+const sizes = {
+    sm: { list: 'gap-4', row: 'pl-11', icon: 'sm', text: 'text-sm' },
+    md: { list: 'gap-5', row: 'pl-14', icon: 'md', text: 'text-md' },
+};
+/**
+ * Read-only facts about one record, each row an icon, a label and its value, such as an
+ * organisation's type, contact email and country. Use it on summary panels and detail pages
+ * where the values are shown, not edited.
+ *
+ * @summary icon-led label and value rows for one record
+ */
+const DetailList = ({ items, size = 'sm', iconColor = 'brand', iconTheme = 'light', className, 'data-testid': dataTestId, }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'detail-list', rootName: 'detail-list' });
+    const styles = sizes[size];
+    const renderItem = (item) => {
+        const key = item.id ?? testIdUtils.slugifyTestId(item.label);
+        // The icon lives inside the term and is positioned against the group, so the group holds only `dt` and `dd` as the `dl` content model requires.
+        return (jsxRuntime.jsxs("div", { "data-testid": testIdUtils.joinTestId(rootTestId, `item-${key}`), className: cx.cx('relative flex flex-col gap-1', styles.row), children: [jsxRuntime.jsxs("dt", { className: cx.cx('truncate text-primary', styles.text), children: [jsxRuntime.jsx("span", { "aria-hidden": "true", className: "contents", children: jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: item.icon, size: styles.icon, color: iconColor, theme: iconTheme, className: "absolute top-1/2 left-0 -translate-y-1/2" }) }), item.label] }), jsxRuntime.jsx("dd", { className: cx.cx('truncate font-semibold text-primary', styles.text), children: item.value })] }, key));
+    };
+    return (jsxRuntime.jsx("dl", { "data-testid": rootTestId, className: cx.cx('flex flex-col', styles.list, className), children: items.map(renderItem) }));
+};
+
+exports.DetailList = DetailList;
+//# sourceMappingURL=index.cjs.map

package/dist/components/molecules/DetailList/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","slugifyTestId","_jsxs","joinTestId","cx","_jsx","FeaturedIcon"],"mappings":";;;;;;;AASA;AACA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;AAChE,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;CACxD;AAiBV;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAG,CAAC,IAAwB,KAAI;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAIC,yBAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAGhD,QACEC,wCAA4BC,sBAAU,CAAC,UAAU,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,EAAE,SAAS,EAAEC,KAAE,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAC1HF,wBAAI,SAAS,EAAEE,KAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAErDC,wCAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3CA,cAAA,CAACC,yBAAY,EAAA,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,0CAA0C,EAAA,CACpD,EAAA,CACG,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,CACR,EACLD,uBAAI,SAAS,EAAED,KAAE,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,GAAM,CAAA,EAAA,EAdhF,GAAG,CAeP;AAEV,IAAA,CAAC;IAED,QACEC,cAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EAAiB,UAAU,EAAE,SAAS,EAAED,KAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAA,CACnB;AAET;;"}

package/dist/components/molecules/DetailList/index.d.ts

@@ -0,0 +1,26 @@
+import { type FeaturedIconProps } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import type { DetailListItemType } from './detailList.types';
+export type { DetailListItemType } from './detailList.types';
+export interface DetailListProps {
+    /** Rows to show, in order; each `id` (or slugified `label`) must be unique. */
+    items: DetailListItemType[];
+    /** Icon size and text scale of every row. */
+    size?: 'sm' | 'md';
+    /** Semantic colour of every row's `FeaturedIcon`. */
+    iconColor?: FeaturedIconProps['color'];
+    /** Container style of every row's `FeaturedIcon`. */
+    iconTheme?: FeaturedIconProps['theme'];
+    /** Extra classes merged onto the `<dl>`. */
+    className?: string;
+    /** Overrides the root `data-testid` (defaults to `fd-detail-list`). Rows derive `<root>--item-<id>` from it. */
+    'data-testid'?: string;
+}
+/**
+ * Read-only facts about one record, each row an icon, a label and its value, such as an
+ * organisation's type, contact email and country. Use it on summary panels and detail pages
+ * where the values are shown, not edited.
+ *
+ * @summary icon-led label and value rows for one record
+ */
+export declare const DetailList: ({ items, size, iconColor, iconTheme, className, "data-testid": dataTestId, }: DetailListProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/DetailList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAG1G,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAQ7D,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,qDAAqD;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,8EAOxB,eAAe,gCAiCjB,CAAC"}

package/dist/components/molecules/DetailList/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, slugifyTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+
+// Row padding equals the icon width plus the gap, so the term and value sit beside the centred icon.
+const sizes = {
+    sm: { list: 'gap-4', row: 'pl-11', icon: 'sm', text: 'text-sm' },
+    md: { list: 'gap-5', row: 'pl-14', icon: 'md', text: 'text-md' },
+};
+/**
+ * Read-only facts about one record, each row an icon, a label and its value, such as an
+ * organisation's type, contact email and country. Use it on summary panels and detail pages
+ * where the values are shown, not edited.
+ *
+ * @summary icon-led label and value rows for one record
+ */
+const DetailList = ({ items, size = 'sm', iconColor = 'brand', iconTheme = 'light', className, 'data-testid': dataTestId, }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'detail-list', rootName: 'detail-list' });
+    const styles = sizes[size];
+    const renderItem = (item) => {
+        const key = item.id ?? slugifyTestId(item.label);
+        // The icon lives inside the term and is positioned against the group, so the group holds only `dt` and `dd` as the `dl` content model requires.
+        return (jsxs("div", { "data-testid": joinTestId(rootTestId, `item-${key}`), className: cx('relative flex flex-col gap-1', styles.row), children: [jsxs("dt", { className: cx('truncate text-primary', styles.text), children: [jsx("span", { "aria-hidden": "true", className: "contents", children: jsx(FeaturedIcon, { icon: item.icon, size: styles.icon, color: iconColor, theme: iconTheme, className: "absolute top-1/2 left-0 -translate-y-1/2" }) }), item.label] }), jsx("dd", { className: cx('truncate font-semibold text-primary', styles.text), children: item.value })] }, key));
+    };
+    return (jsx("dl", { "data-testid": rootTestId, className: cx('flex flex-col', styles.list, className), children: items.map(renderItem) }));
+};
+
+export { DetailList };
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/DetailList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AASA;AACA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;AAChE,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;CACxD;AAiBV;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAG,CAAC,IAAwB,KAAI;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAGhD,QACEA,6BAA4B,UAAU,CAAC,UAAU,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAC1HA,aAAI,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAErDC,6BAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3CA,GAAA,CAAC,YAAY,EAAA,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,0CAA0C,EAAA,CACpD,EAAA,CACG,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,CACR,EACLA,YAAI,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,GAAM,CAAA,EAAA,EAdhF,GAAG,CAeP;AAEV,IAAA,CAAC;IAED,QACEA,GAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EAAiB,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAA,CACnB;AAET;;"}

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+var Checkbox = require('@flipdish/ui-library/components/atoms/Checkbox');
+var RadioButton = require('@flipdish/ui-library/components/atoms/RadioButton');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+
+/**
+ * Radio group where each option is a card with a square logo, title, ID-style subtitle and
+ * an optional footer for a link or action. Use to pick a brand, store or other entity by its
+ * logo; the footer sits outside the radio, so a link in it never nests inside the control.
+ *
+ * @summary pick one entity from logo-led cards
+ */
+const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', onOptionPress, className, 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
+    const Indicator = indicator === 'checkbox' ? Checkbox.CheckboxBase : RadioButton.RadioButtonBase;
+    // Ids, not test ids: two groups with the same values on one page must not describe each other's options.
+    const groupId = React.useId();
+    return (jsxRuntime.jsx(reactAriaComponents.RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx.cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: ({ state, isDisabled: isGroupDisabled }) => items.map((item) => {
+            const isSelected = state.selectedValue === item.value;
+            const isDisabled = isGroupDisabled || Boolean(item.disabled);
+            const optionTestId = testIdUtils.joinTestId(rootTestId, `option-${item.value}`);
+            // Slugged: a value with spaces would split `aria-describedby` into several ids.
+            const subtitleId = item.subtitle ? `${groupId}-${testIdUtils.slugifyTestId(item.value)}-subtitle` : undefined;
+            // The radio is the card's `<label>`; a press in the footer is the footer's own and not an option press. Capture phase,
+            // because react-aria stops the radio's click from bubbling. Space on the focused radio fires a native click, so keyboard is covered.
+            const handleClickCapture = (event) => {
+                if (!isDisabled && event.target instanceof Element && event.target.closest('label'))
+                    onOptionPress?.(item.value);
+            };
+            return (
+            // The card, not the radio, carries the selected ring so the footer sits inside the same outline.
+            jsxRuntime.jsxs("div", { onClickCapture: handleClickCapture, className: cx.cx('flex flex-col rounded-xl bg-primary ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled, isFocusVisible }) => cx.cx('flex cursor-pointer items-center outline-focus-ring', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', item.footer ? 'rounded-t-xl' : 'rounded-xl', isDisabled && 'cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar.Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx("span", { className: cx.cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsxRuntime.jsx("span", { id: subtitleId, className: cx.cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsxRuntime.jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsxRuntime.jsx("div", { className: "flex justify-end border-t border-secondary px-4 py-3", children: item.footer })] }, item.value));
+        }) }));
+};
+
+exports.RadioGroupAvatarCard = RadioGroupAvatarCard;
+//# sourceMappingURL=RadioGroupAvatarCard.cjs.map

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupAvatarCard.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","CheckboxBase","RadioButtonBase","useId","_jsx","AriaRadioGroup","cx","joinTestId","slugifyTestId","_jsxs","AriaRadio","_Fragment","Avatar"],"mappings":"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"}

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts

@@ -0,0 +1,24 @@
+import type { RadioGroupProps } from 'react-aria-components';
+import type { AvatarCardItemType } from '../radioGroup.types';
+interface RadioGroupAvatarCardProps extends RadioGroupProps {
+    /** Avatar, text and indicator size of every option. */
+    size?: 'sm' | 'md';
+    /** Entities to choose from; each `value` is the option value. */
+    items: AvatarCardItemType[];
+    /** The selection mark: a radio dot, or the check tile the other flavours use. */
+    indicator?: 'radio' | 'checkbox';
+    /** Called with the option's value on every press of it, selected or not; `onChange` stays silent for the one already selected. */
+    onOptionPress?: (value: string) => void;
+    /** Overrides the root `data-testid`. Options derive from it (e.g. `<root>--option-<value>`). */
+    'data-testid'?: string;
+}
+/**
+ * Radio group where each option is a card with a square logo, title, ID-style subtitle and
+ * an optional footer for a link or action. Use to pick a brand, store or other entity by its
+ * logo; the footer sits outside the radio, so a link in it never nests inside the control.
+ *
+ * @summary pick one entity from logo-led cards
+ */
+export declare const RadioGroupAvatarCard: ({ items, size, indicator, onOptionPress, className, "data-testid": dataTestId, ...props }: RadioGroupAvatarCardProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RadioGroupAvatarCard.d.ts.map

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupAvatarCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,UAAU,yBAA0B,SAAQ,eAAe;IACzD,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,kIAAkI;IAClI,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,2FAQlC,yBAAyB,gCAoF3B,CAAC"}

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
+import { RadioButtonBase } from '@flipdish/ui-library/components/atoms/RadioButton';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { useId } from 'react';
+import { RadioGroup, Radio } from 'react-aria-components';
+
+/**
+ * Radio group where each option is a card with a square logo, title, ID-style subtitle and
+ * an optional footer for a link or action. Use to pick a brand, store or other entity by its
+ * logo; the footer sits outside the radio, so a link in it never nests inside the control.
+ *
+ * @summary pick one entity from logo-led cards
+ */
+const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', onOptionPress, className, 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
+    const Indicator = indicator === 'checkbox' ? CheckboxBase : RadioButtonBase;
+    // Ids, not test ids: two groups with the same values on one page must not describe each other's options.
+    const groupId = useId();
+    return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: ({ state, isDisabled: isGroupDisabled }) => items.map((item) => {
+            const isSelected = state.selectedValue === item.value;
+            const isDisabled = isGroupDisabled || Boolean(item.disabled);
+            const optionTestId = joinTestId(rootTestId, `option-${item.value}`);
+            // Slugged: a value with spaces would split `aria-describedby` into several ids.
+            const subtitleId = item.subtitle ? `${groupId}-${slugifyTestId(item.value)}-subtitle` : undefined;
+            // The radio is the card's `<label>`; a press in the footer is the footer's own and not an option press. Capture phase,
+            // because react-aria stops the radio's click from bubbling. Space on the focused radio fires a native click, so keyboard is covered.
+            const handleClickCapture = (event) => {
+                if (!isDisabled && event.target instanceof Element && event.target.closest('label'))
+                    onOptionPress?.(item.value);
+            };
+            return (
+            // The card, not the radio, carries the selected ring so the footer sits inside the same outline.
+            jsxs("div", { onClickCapture: handleClickCapture, className: cx('flex flex-col rounded-xl bg-primary ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsx(Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled, isFocusVisible }) => cx('flex cursor-pointer items-center outline-focus-ring', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', item.footer ? 'rounded-t-xl' : 'rounded-xl', isDisabled && 'cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsx("span", { className: cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsx("span", { id: subtitleId, className: cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsx("div", { className: "flex justify-end border-t border-secondary px-4 py-3", children: item.footer })] }, item.value));
+        }) }));
+};
+
+export { RadioGroupAvatarCard };
+//# sourceMappingURL=RadioGroupAvatarCard.js.map

package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupAvatarCard.js","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","_jsxs","AriaRadio","_Fragment"],"mappings":"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"}