@flipdish/ui-library 0.32.1 → 0.34.0

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

@@ -0,0 +1,42 @@
+import { isProductionBuild } 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 (isProductionBuild() || 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;IAC3D,IAAI,iBAAiB,EAAE,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE;AAClD,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/CodeSnippet/codeSnippet.utils.cjs

@@ -1,5 +1,74 @@
 'use strict';
 
+var core = require('shiki/core');
+var javascript = require('shiki/engine/javascript');
+var langs = require('shiki/langs');
+
+/** The two themes a snippet renders, with GitHub's token colours replaced by the design tokens. */
+const HIGHLIGHT_THEMES = {
+    defaultColor: 'light',
+    themes: { light: 'github-light', dark: 'github-dark' },
+    colorReplacements: {
+        'github-light': {
+            '#24292e': 'var(--color-text-primary)',
+            '#005cc5': 'var(--color-utility-blue-600)',
+            '#d73a49': 'var(--color-utility-pink-600)',
+            '#6f42c1': 'var(--color-utility-brand-600)',
+            '#032f62': 'var(--color-primary)',
+        },
+        'github-dark': {
+            '#e1e4e8': 'var(--color-text-primary)',
+            '#79b8ff': 'var(--color-utility-blue-600)',
+            '#f97583': 'var(--color-utility-pink-600)',
+            '#b392f0': 'var(--color-utility-brand-600)',
+            '#9ecbff': 'var(--color-primary)',
+        },
+    },
+};
+// One highlighter for every snippet, built on first use with no grammars: each language loads as its own chunk the first
+// time a snippet asks for it. The JavaScript regex engine means no WASM download before the first highlight.
+let highlighterPromise = null;
+/**
+ * The shared highlighter, created on the first call and reused by every snippet after that.
+ * @returns The core highlighter with both themes loaded and no grammars yet.
+ */
+const getHighlighter = () => {
+    highlighterPromise ?? (highlighterPromise = core.createHighlighterCore({
+        // Forgiving skips the few grammar patterns the engine cannot express instead of throwing, which costs a token's colour
+        // at most. The engine needs the RegExp `d` flag, so Chrome 90 and Safari 15 are the floor.
+        engine: javascript.createJavaScriptRegexEngine({ forgiving: true }),
+        langs: [],
+        themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
+    }).catch((error) => {
+        // A failed creation, such as a theme chunk that did not load, must not pin every later snippet to the same rejection.
+        highlighterPromise = null;
+        throw error;
+    }));
+    return highlighterPromise;
+};
+// Own keys only: `in` would also accept `toString` and the other prototype names.
+const languageIds = new Set(Object.keys(langs.bundledLanguages));
+/**
+ * Whether Shiki has a grammar for the language, as opposed to a special language such as `text` or a typo.
+ * @param language The `language` prop as given.
+ * @returns `true` when a grammar can be loaded for it.
+ */
+const isBundledLanguage = (language) => languageIds.has(language);
+/**
+ * Highlights source into a hast tree with the snippet's themes, loading the language's grammar on first use. A language
+ * with no grammar, including a typo, highlights as plain text rather than failing, so the snippet still shows the code.
+ * @param code The source to highlight.
+ * @param language The language id; anything Shiki does not know falls back to `text`.
+ * @returns The hast root for `toJsxRuntime`.
+ */
+const highlightToHast = async (code, language) => {
+    const highlighter = await getHighlighter();
+    // Shiki skips a grammar it already holds, and the module system caches the import, so a repeat is cheap.
+    if (isBundledLanguage(language))
+        await highlighter.loadLanguage(langs.bundledLanguages[language]);
+    const lang = isBundledLanguage(language) || language === 'ansi' ? language : 'text';
+    return highlighter.codeToHast(code, { lang, ...HIGHLIGHT_THEMES });
+};
 /**
  * Reads the visible tab panel's text so the header copy button copies the active snippet.
  *
@@ -13,5 +82,9 @@ const getActiveTabPanelText = (root) => {
     return activePanel?.textContent?.trim() ?? '';
 };
 
+exports.HIGHLIGHT_THEMES = HIGHLIGHT_THEMES;
 exports.getActiveTabPanelText = getActiveTabPanelText;
+exports.getHighlighter = getHighlighter;
+exports.highlightToHast = highlightToHast;
+exports.isBundledLanguage = isBundledLanguage;
 //# sourceMappingURL=codeSnippet.utils.cjs.map

package/dist/components/molecules/CodeSnippet/codeSnippet.utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"codeSnippet.utils.cjs","sources":["../../../../src/components/molecules/CodeSnippet/codeSnippet.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;;;;;AAKG;AACI,MAAM,qBAAqB,GAAG,CAAC,IAAuB,KAAY;AACvE,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC;IACzE,OAAO,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;AAC/C;;"}
+{"version":3,"file":"codeSnippet.utils.cjs","sources":["../../../../src/components/molecules/CodeSnippet/codeSnippet.utils.ts"],"sourcesContent":[null],"names":["createHighlighterCore","createJavaScriptRegexEngine","bundledLanguages"],"mappings":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAC9B,IAAA,YAAY,EAAE,OAAO;IACrB,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE;AACtD,IAAA,iBAAiB,EAAE;AACjB,QAAA,cAAc,EAAE;AACd,YAAA,SAAS,EAAE,2BAA2B;AACtC,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,SAAS,EAAE,2BAA2B;AACtC,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACF,KAAA;;AAGH;AACA;AACA,IAAI,kBAAkB,GAAoC,IAAI;AAE9D;;;AAGG;AACI,MAAM,cAAc,GAAG,MAA+B;AAC3D,IAAA,kBAAkB,KAAlB,kBAAkB,GAAKA,0BAAqB,CAAC;;;QAG3C,MAAM,EAAEC,sCAA2B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACxD,QAAA,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC,OAAO,+BAA+B,CAAC,EAAE,OAAO,8BAA8B,CAAC,CAAC;AAC1F,KAAA,CAAC,CAAC,KAAK,CAAC,CAAC,KAAc,KAAI;;QAE1B,kBAAkB,GAAG,IAAI;AACzB,QAAA,MAAM,KAAK;AACb,IAAA,CAAC,CAAC,CAAA;AACF,IAAA,OAAO,kBAAkB;AAC3B;AAEA;AACA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAS,MAAM,CAAC,IAAI,CAACC,sBAAgB,CAAC,CAAC;AAElE;;;;AAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,QAAgB,KAAkC,WAAW,CAAC,GAAG,CAAC,QAAQ;AAE5G;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,OAAO,IAAY,EAAE,QAAmB,KAAwD;AAC7H,IAAA,MAAM,WAAW,GAAG,MAAM,cAAc,EAAE;;IAE1C,IAAI,iBAAiB,CAAC,QAAQ,CAAC;QAAE,MAAM,WAAW,CAAC,YAAY,CAACA,sBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC3F,IAAA,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;AACnF,IAAA,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,GAAG,gBAAgB,EAAE,CAAC;AACpE;AAEA;;;;;AAKG;AACI,MAAM,qBAAqB,GAAG,CAAC,IAAuB,KAAY;AACvE,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC;IACzE,OAAO,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;AAC/C;;;;;;"}

package/dist/components/molecules/CodeSnippet/codeSnippet.utils.d.ts

@@ -1,3 +1,51 @@
+import { type HighlighterCore } from 'shiki/core';
+import { type BundledLanguage } from 'shiki/langs';
+import type { SpecialLanguage } from 'shiki/types';
+/** Any of Shiki's languages, or a special one such as `text` that needs no grammar. */
+export type Languages = BundledLanguage | SpecialLanguage;
+/** The two themes a snippet renders, with GitHub's token colours replaced by the design tokens. */
+export declare const HIGHLIGHT_THEMES: {
+    readonly defaultColor: "light";
+    readonly themes: {
+        readonly light: "github-light";
+        readonly dark: "github-dark";
+    };
+    readonly colorReplacements: {
+        readonly 'github-light': {
+            readonly '#24292e': "var(--color-text-primary)";
+            readonly '#005cc5': "var(--color-utility-blue-600)";
+            readonly '#d73a49': "var(--color-utility-pink-600)";
+            readonly '#6f42c1': "var(--color-utility-brand-600)";
+            readonly '#032f62': "var(--color-primary)";
+        };
+        readonly 'github-dark': {
+            readonly '#e1e4e8': "var(--color-text-primary)";
+            readonly '#79b8ff': "var(--color-utility-blue-600)";
+            readonly '#f97583': "var(--color-utility-pink-600)";
+            readonly '#b392f0': "var(--color-utility-brand-600)";
+            readonly '#9ecbff': "var(--color-primary)";
+        };
+    };
+};
+/**
+ * The shared highlighter, created on the first call and reused by every snippet after that.
+ * @returns The core highlighter with both themes loaded and no grammars yet.
+ */
+export declare const getHighlighter: () => Promise<HighlighterCore>;
+/**
+ * Whether Shiki has a grammar for the language, as opposed to a special language such as `text` or a typo.
+ * @param language The `language` prop as given.
+ * @returns `true` when a grammar can be loaded for it.
+ */
+export declare const isBundledLanguage: (language: string) => language is BundledLanguage;
+/**
+ * Highlights source into a hast tree with the snippet's themes, loading the language's grammar on first use. A language
+ * with no grammar, including a typo, highlights as plain text rather than failing, so the snippet still shows the code.
+ * @param code The source to highlight.
+ * @param language The language id; anything Shiki does not know falls back to `text`.
+ * @returns The hast root for `toJsxRuntime`.
+ */
+export declare const highlightToHast: (code: string, language: Languages) => Promise<ReturnType<HighlighterCore["codeToHast"]>>;
 /**
  * Reads the visible tab panel's text so the header copy button copies the active snippet.
  *

package/dist/components/molecules/CodeSnippet/codeSnippet.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeSnippet.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CodeSnippet/codeSnippet.utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,MAAM,UAAU,GAAG,IAAI,KAAG,MAI/D,CAAC"}
+{"version":3,"file":"codeSnippet.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CodeSnippet/codeSnippet.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,aAAa,CAAC;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,eAAe,CAAC;AAE1D,mGAAmG;AACnG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;CAmBnB,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,OAAO,CAAC,eAAe,CAaxD,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,QAAQ,IAAI,eAA4C,CAAC;AAE9G;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAU,MAAM,MAAM,EAAE,UAAU,SAAS,KAAG,OAAO,CAAC,UAAU,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAM1H,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,MAAM,UAAU,GAAG,IAAI,KAAG,MAI/D,CAAC"}

package/dist/components/molecules/CodeSnippet/codeSnippet.utils.js

@@ -1,3 +1,72 @@
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import { bundledLanguages } from 'shiki/langs';
+
+/** The two themes a snippet renders, with GitHub's token colours replaced by the design tokens. */
+const HIGHLIGHT_THEMES = {
+    defaultColor: 'light',
+    themes: { light: 'github-light', dark: 'github-dark' },
+    colorReplacements: {
+        'github-light': {
+            '#24292e': 'var(--color-text-primary)',
+            '#005cc5': 'var(--color-utility-blue-600)',
+            '#d73a49': 'var(--color-utility-pink-600)',
+            '#6f42c1': 'var(--color-utility-brand-600)',
+            '#032f62': 'var(--color-primary)',
+        },
+        'github-dark': {
+            '#e1e4e8': 'var(--color-text-primary)',
+            '#79b8ff': 'var(--color-utility-blue-600)',
+            '#f97583': 'var(--color-utility-pink-600)',
+            '#b392f0': 'var(--color-utility-brand-600)',
+            '#9ecbff': 'var(--color-primary)',
+        },
+    },
+};
+// One highlighter for every snippet, built on first use with no grammars: each language loads as its own chunk the first
+// time a snippet asks for it. The JavaScript regex engine means no WASM download before the first highlight.
+let highlighterPromise = null;
+/**
+ * The shared highlighter, created on the first call and reused by every snippet after that.
+ * @returns The core highlighter with both themes loaded and no grammars yet.
+ */
+const getHighlighter = () => {
+    highlighterPromise ?? (highlighterPromise = createHighlighterCore({
+        // Forgiving skips the few grammar patterns the engine cannot express instead of throwing, which costs a token's colour
+        // at most. The engine needs the RegExp `d` flag, so Chrome 90 and Safari 15 are the floor.
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+        langs: [],
+        themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
+    }).catch((error) => {
+        // A failed creation, such as a theme chunk that did not load, must not pin every later snippet to the same rejection.
+        highlighterPromise = null;
+        throw error;
+    }));
+    return highlighterPromise;
+};
+// Own keys only: `in` would also accept `toString` and the other prototype names.
+const languageIds = new Set(Object.keys(bundledLanguages));
+/**
+ * Whether Shiki has a grammar for the language, as opposed to a special language such as `text` or a typo.
+ * @param language The `language` prop as given.
+ * @returns `true` when a grammar can be loaded for it.
+ */
+const isBundledLanguage = (language) => languageIds.has(language);
+/**
+ * Highlights source into a hast tree with the snippet's themes, loading the language's grammar on first use. A language
+ * with no grammar, including a typo, highlights as plain text rather than failing, so the snippet still shows the code.
+ * @param code The source to highlight.
+ * @param language The language id; anything Shiki does not know falls back to `text`.
+ * @returns The hast root for `toJsxRuntime`.
+ */
+const highlightToHast = async (code, language) => {
+    const highlighter = await getHighlighter();
+    // Shiki skips a grammar it already holds, and the module system caches the import, so a repeat is cheap.
+    if (isBundledLanguage(language))
+        await highlighter.loadLanguage(bundledLanguages[language]);
+    const lang = isBundledLanguage(language) || language === 'ansi' ? language : 'text';
+    return highlighter.codeToHast(code, { lang, ...HIGHLIGHT_THEMES });
+};
 /**
  * Reads the visible tab panel's text so the header copy button copies the active snippet.
  *
@@ -11,5 +80,5 @@ const getActiveTabPanelText = (root) => {
     return activePanel?.textContent?.trim() ?? '';
 };
 
-export { getActiveTabPanelText };
+export { HIGHLIGHT_THEMES, getActiveTabPanelText, getHighlighter, highlightToHast, isBundledLanguage };
 //# sourceMappingURL=codeSnippet.utils.js.map

package/dist/components/molecules/CodeSnippet/codeSnippet.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeSnippet.utils.js","sources":["../../../../src/components/molecules/CodeSnippet/codeSnippet.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;AAKG;AACI,MAAM,qBAAqB,GAAG,CAAC,IAAuB,KAAY;AACvE,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC;IACzE,OAAO,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;AAC/C;;"}
+{"version":3,"file":"codeSnippet.utils.js","sources":["../../../../src/components/molecules/CodeSnippet/codeSnippet.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAC9B,IAAA,YAAY,EAAE,OAAO;IACrB,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE;AACtD,IAAA,iBAAiB,EAAE;AACjB,QAAA,cAAc,EAAE;AACd,YAAA,SAAS,EAAE,2BAA2B;AACtC,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,SAAS,EAAE,2BAA2B;AACtC,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACF,KAAA;;AAGH;AACA;AACA,IAAI,kBAAkB,GAAoC,IAAI;AAE9D;;;AAGG;AACI,MAAM,cAAc,GAAG,MAA+B;AAC3D,IAAA,kBAAkB,KAAlB,kBAAkB,GAAK,qBAAqB,CAAC;;;QAG3C,MAAM,EAAE,2BAA2B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACxD,QAAA,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC,OAAO,+BAA+B,CAAC,EAAE,OAAO,8BAA8B,CAAC,CAAC;AAC1F,KAAA,CAAC,CAAC,KAAK,CAAC,CAAC,KAAc,KAAI;;QAE1B,kBAAkB,GAAG,IAAI;AACzB,QAAA,MAAM,KAAK;AACb,IAAA,CAAC,CAAC,CAAA;AACF,IAAA,OAAO,kBAAkB;AAC3B;AAEA;AACA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAS,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAElE;;;;AAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,QAAgB,KAAkC,WAAW,CAAC,GAAG,CAAC,QAAQ;AAE5G;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,OAAO,IAAY,EAAE,QAAmB,KAAwD;AAC7H,IAAA,MAAM,WAAW,GAAG,MAAM,cAAc,EAAE;;IAE1C,IAAI,iBAAiB,CAAC,QAAQ,CAAC;QAAE,MAAM,WAAW,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC3F,IAAA,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;AACnF,IAAA,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,GAAG,gBAAgB,EAAE,CAAC;AACpE;AAEA;;;;;AAKG;AACI,MAAM,qBAAqB,GAAG,CAAC,IAAuB,KAAY;AACvE,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC;IACzE,OAAO,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;AAC/C;;"}

package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.cjs

@@ -1,20 +1,42 @@
 'use strict';
 
+var renderUtils = require('@flipdish/ui-library/utilities/renderUtils');
 var React = require('react');
 
 /**
  * Replaces the fallback nodes with syntax-highlighted nodes once `code` has been highlighted.
- * The first paint keeps the fallback so the snippet is not blank while highlighting runs.
+ * The first paint keeps the fallback so the snippet is not blank while highlighting runs, and a
+ * highlight that fails or is superseded by a newer `code` or `language` never replaces it.
  *
  * @param options The snippet source, its language, the nodes shown before highlighting finishes, and the highlighter.
  * @returns The nodes to render inside the code block.
  */
 const useCodeSnippetHighlight = ({ code, language, fallback, highlightCode, }) => {
     const [nodes, setNodes] = React.useState(fallback);
+    // Synced after commit, so a rejection never shows a fallback from a render React threw away.
+    const fallbackRef = React.useRef(fallback);
+    React.useLayoutEffect(() => {
+        fallbackRef.current = fallback;
+    }, [fallback]);
     React.useLayoutEffect(() => {
         if (!code)
             return;
-        void highlightCode(code, language).then(setNodes);
+        // Grammars load on first use, so an earlier highlight can finish after a later one; only the latest request may render.
+        let stale = false;
+        highlightCode(code, language).then((highlighted) => {
+            if (!stale)
+                setNodes(highlighted);
+        }, (error) => {
+            // A failed highlight, such as a theme chunk that did not load, shows the plain code rather than an older highlight.
+            if (stale)
+                return;
+            setNodes(fallbackRef.current);
+            if (!renderUtils.isProductionBuild())
+                console.warn('CodeSnippet: highlighting failed, showing plain code.', error);
+        });
+        return () => {
+            stale = true;
+        };
     }, [code, language, highlightCode]);
     return nodes;
 };

package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeSnippetHighlight.cjs","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"sourcesContent":[null],"names":["useState","useLayoutEffect"],"mappings":";;;;AAeA;;;;;;AAMG;AACI,MAAM,uBAAuB,GAAG,CAA0B,EAC/D,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,aAAa,GAC4B,KAAe;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,QAAQ,CAAC;IAE5CC,qBAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,KAAK,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,OAAO,KAAK;AACd;;"}
+{"version":3,"file":"useCodeSnippetHighlight.cjs","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"sourcesContent":[null],"names":["useState","useRef","useLayoutEffect","isProductionBuild"],"mappings":";;;;;AAgBA;;;;;;;AAOG;AACI,MAAM,uBAAuB,GAAG,CAA0B,EAC/D,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,aAAa,GAC4B,KAAe;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,QAAQ,CAAC;;AAE5C,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAC,QAAQ,CAAC;IACpCC,qBAAe,CAAC,MAAK;AACnB,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAChC,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,qBAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;;QAEX,IAAI,KAAK,GAAG,KAAK;QACjB,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAChC,CAAC,WAAW,KAAI;AACd,YAAA,IAAI,CAAC,KAAK;gBAAE,QAAQ,CAAC,WAAW,CAAC;AACnC,QAAA,CAAC,EACD,CAAC,KAAc,KAAI;;AAEjB,YAAA,IAAI,KAAK;gBAAE;AACX,YAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;YAC7B,IAAI,CAACC,6BAAiB,EAAE;AAAE,gBAAA,OAAO,CAAC,IAAI,CAAC,uDAAuD,EAAE,KAAK,CAAC;AACxG,QAAA,CAAC,CACF;AACD,QAAA,OAAO,MAAK;YACV,KAAK,GAAG,IAAI;AACd,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,OAAO,KAAK;AACd;;"}