@flipdish/ui-library 0.23.0 → 0.25.0

package/dist/components/templates/PageLayout/index.cjs

@@ -5,16 +5,14 @@ var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 
+/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
+const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-2xl text-center", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
 /**
- * English defaults, overridable via `renderError` (the consumer owns localisation).
- * TODO(i18n): once ui-library has its own translation layer, source these strings
- * from it instead of hardcoding English (keep `renderError` as a consumer override).
- */
-const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full max-w-container flex-col items-center gap-2 px-md py-2xl text-center lg:px-2xl", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
-/**
- * Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
- * scroll container, an optional header region, and a page-scoped error boundary keyed
- * by `pageName`. Consumers drop their page content in as children.
+ * Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
+ * that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
+ * header and content, an optional header region, and a page-scoped error boundary keyed
+ * by `pageName`. Consumers drop their page content in as children — it stretches to the
+ * full content width, so children should not add their own horizontal padding.
  *
  * The boundary wraps `children` only, not the header: content (data-fetching, forms,
  * dynamic logic) is where throws realistically happen, and keeping the header outside
@@ -27,7 +25,7 @@ const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert"
  */
 const PageLayout = ({ pageName, header, children, renderError, onError, className, 'data-testid': dataTestId, }) => {
     const pageLayoutTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-layout', rootName: 'page-layout' });
-    return (jsxRuntime.jsxs("main", { "data-testid": pageLayoutTestId, className: cx.cx('flex w-full flex-col items-center gap-xl py-2xl lg:gap-2xl lg:pb-3xl', className), children: [header, jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsxRuntime.jsx(DefaultPageError, { testId: testIdUtils.joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
+    return (jsxRuntime.jsxs("main", { "data-testid": pageLayoutTestId, className: cx.cx('flex w-full flex-col gap-md p-md lg:p-xl', className), children: [header, jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsxRuntime.jsx(DefaultPageError, { testId: testIdUtils.joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
 };
 
 exports.PageLayout = PageLayout;

package/dist/components/templates/PageLayout/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","cx","ErrorBoundary","joinTestId"],"mappings":";;;;;;;AAmCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CAC3IC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;AAaG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACEF,eAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAEG,KAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAClI,MAAM,EAEPF,cAAA,CAACG,2BAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIH,cAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAEI,sBAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","cx","ErrorBoundary","joinTestId"],"mappings":";;;;;;;AAmCA;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CAC3GC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACEF,eAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAEG,KAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtG,MAAM,EAEPF,cAAA,CAACG,2BAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIH,cAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAEI,sBAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}

package/dist/components/templates/PageLayout/index.d.ts

@@ -7,8 +7,8 @@ export interface PageLayoutProps {
      */
     pageName: string;
     /**
-     * Header region. Compose `<PageHeaderSimple>` (or a feature wrapper around it)
-     * here. Rendered OUTSIDE the error boundary so page chrome (breadcrumbs, back link)
+     * Header region. Compose `<PageHeader>` (or a feature wrapper around it) here.
+     * Rendered OUTSIDE the error boundary so page chrome (breadcrumbs, back link)
      * stays usable when the content below throws.
      */
     header?: ReactNode;
@@ -30,9 +30,11 @@ export interface PageLayoutProps {
     'data-testid'?: string;
 }
 /**
- * Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
- * scroll container, an optional header region, and a page-scoped error boundary keyed
- * by `pageName`. Consumers drop their page content in as children.
+ * Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
+ * that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
+ * header and content, an optional header region, and a page-scoped error boundary keyed
+ * by `pageName`. Consumers drop their page content in as children — it stretches to the
+ * full content width, so children should not add their own horizontal padding.
  *
  * The boundary wraps `children` only, not the header: content (data-fetching, forms,
  * dynamic logic) is where throws realistically happen, and keeping the header outside

package/dist/components/templates/PageLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,6FAQxB,eAAe,KAAG,SAgBpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAUD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,6FAQxB,eAAe,KAAG,SAgBpB,CAAC"}

package/dist/components/templates/PageLayout/index.js

@@ -3,16 +3,14 @@ import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 
+/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
+const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-2xl text-center", children: [jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
 /**
- * English defaults, overridable via `renderError` (the consumer owns localisation).
- * TODO(i18n): once ui-library has its own translation layer, source these strings
- * from it instead of hardcoding English (keep `renderError` as a consumer override).
- */
-const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full max-w-container flex-col items-center gap-2 px-md py-2xl text-center lg:px-2xl", children: [jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
-/**
- * Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
- * scroll container, an optional header region, and a page-scoped error boundary keyed
- * by `pageName`. Consumers drop their page content in as children.
+ * Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
+ * that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
+ * header and content, an optional header region, and a page-scoped error boundary keyed
+ * by `pageName`. Consumers drop their page content in as children — it stretches to the
+ * full content width, so children should not add their own horizontal padding.
  *
  * The boundary wraps `children` only, not the header: content (data-fetching, forms,
  * dynamic logic) is where throws realistically happen, and keeping the header outside
@@ -25,7 +23,7 @@ const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-tes
  */
 const PageLayout = ({ pageName, header, children, renderError, onError, className, 'data-testid': dataTestId, }) => {
     const pageLayoutTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-layout', rootName: 'page-layout' });
-    return (jsxs("main", { "data-testid": pageLayoutTestId, className: cx('flex w-full flex-col items-center gap-xl py-2xl lg:gap-2xl lg:pb-3xl', className), children: [header, jsx(ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsx(DefaultPageError, { testId: joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
+    return (jsxs("main", { "data-testid": pageLayoutTestId, className: cx('flex w-full flex-col gap-md p-md lg:p-xl', className), children: [header, jsx(ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsx(DefaultPageError, { testId: joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
 };
 
 export { PageLayout };

package/dist/components/templates/PageLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CAC3IC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;AAaG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACED,IAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAClI,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAE,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmCA;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CAC3GC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACED,IAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtG,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAE,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}

package/dist/utilities/__internal__/childrenUtils/children.utils.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
+ * and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
+ * Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
+ *
+ * Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
+ * siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
+ * child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
+ */
+const flattenChildren = (children, keyPath = []) => React.Children.toArray(children).flatMap((child) => {
+    if (React.isValidElement(child) && child.type === React.Fragment) {
+        return flattenChildren(child.props.children, [...keyPath, String(child.key ?? '')]);
+    }
+    return keyPath.length && React.isValidElement(child) ? React.cloneElement(child, { key: JSON.stringify([...keyPath, String(child.key ?? '')]) }) : child;
+});
+
+exports.flattenChildren = flattenChildren;
+//# sourceMappingURL=children.utils.cjs.map

package/dist/utilities/__internal__/childrenUtils/children.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"children.utils.cjs","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"sourcesContent":[null],"names":["Children","isValidElement","Fragment","cloneElement"],"mappings":";;;;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAE,OAAA,GAA6B,EAAE,KAClFA,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IAC3C,IAAIC,oBAAc,CAA2B,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKC,cAAQ,EAAE;QAC9E,OAAO,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF;AACA,IAAA,OAAO,OAAO,CAAC,MAAM,IAAID,oBAAc,CAAC,KAAK,CAAC,GAAGE,kBAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK;AAC9I,CAAC;;;;"}

package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+/**
+ * `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
+ * and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
+ * Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
+ *
+ * Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
+ * siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
+ * child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
+ */
+export declare const flattenChildren: (children: ReactNode, keyPath?: readonly string[]) => ReactNode[];
+//# sourceMappingURL=children.utils.d.ts.map

package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"children.utils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,UAAU,SAAS,EAAE,UAAS,SAAS,MAAM,EAAO,KAAG,SAAS,EAM5F,CAAC"}

package/dist/utilities/__internal__/childrenUtils/children.utils.js

@@ -0,0 +1,20 @@
+import { Children, isValidElement, Fragment, cloneElement } from 'react';
+
+/**
+ * `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
+ * and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
+ * Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
+ *
+ * Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
+ * siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
+ * child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
+ */
+const flattenChildren = (children, keyPath = []) => Children.toArray(children).flatMap((child) => {
+    if (isValidElement(child) && child.type === Fragment) {
+        return flattenChildren(child.props.children, [...keyPath, String(child.key ?? '')]);
+    }
+    return keyPath.length && isValidElement(child) ? cloneElement(child, { key: JSON.stringify([...keyPath, String(child.key ?? '')]) }) : child;
+});
+
+export { flattenChildren };
+//# sourceMappingURL=children.utils.js.map

package/dist/utilities/__internal__/childrenUtils/children.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"children.utils.js","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAE,OAAA,GAA6B,EAAE,KAClF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IAC3C,IAAI,cAAc,CAA2B,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC9E,OAAO,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF;AACA,IAAA,OAAO,OAAO,CAAC,MAAM,IAAI,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK;AAC9I,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {

package/dist/components/organisms/PageHeader/components/page-header-simple.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var uiIcons = require('@flipdish/ui-icons');
-var Button = require('@flipdish/ui-library/components/atoms/Button');
-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');
-
-const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, 'data-testid': dataTestId, }) => {
-    const pageHeaderTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-header-simple', rootName: 'page-header-simple' });
-    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: pageHeaderTestId, children: jsxRuntime.jsxs("div", { "data-testid": pageHeaderTestId, className: cx.cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsxRuntime.jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: uiIcons.ArrowLeft, children: backLabel }) })), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input.Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'search-mobile') }), jsxRuntime.jsx(Input.Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'search-desktop') })] }))] })] }) }));
-};
-
-exports.PageHeaderSimple = PageHeaderSimple;
-//# sourceMappingURL=page-header-simple.cjs.map

package/dist/components/organisms/PageHeader/components/page-header-simple.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-header-simple.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","_jsxs","cx","Button","ArrowLeft","_Fragment","Input","SearchLg","joinTestId"],"mappings":";;;;;;;;;AA+BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH,KAAI;AAC1B,IAAA,MAAM,gBAAgB,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;AAEjI,IAAA,QACEC,cAAA,CAACC,0BAAc,IAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAEC,KAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3I,WAAW,IAAIH,wBAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC7BA,cAAA,CAACI,aAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,QAAA,EACvE,SAAS,EAAA,CACH,EAAA,CACL,CACP,EAEDH,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,EAAA,QAAA,EAAA,CACpGD,yBAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,IAAIF,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,sBAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,GAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,EAAA,CAAO,EAElE,UAAU,KACTE,eAAA,CAAAI,mBAAA,EAAA,EAAA,QAAA,EAAA,CAEEN,eAACO,WAAK,EAAA,EACJ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAEC,gBAAQ,EAAA,aAAA,EACDC,sBAAU,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAA,CAC1D,EAGFT,eAACO,WAAK,EAAA,EACJ,QAAQ,EAAA,IAAA,EACR,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,gBACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAEC,gBAAQ,EAAA,aAAA,EACDC,sBAAU,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC3D,CAAA,EAAA,CACD,CACJ,IACG,CAAA,EAAA,CACF,EAAA,CACS;AAErB;;;;"}

package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-export interface PageHeaderSimpleProps {
-    /** Page title (rendered as the `h1`). */
-    title?: string;
-    /** Supporting text shown beneath the title. */
-    description?: string;
-    /**
-     * Breadcrumb trail shown on desktop — pass a complete `<Breadcrumbs>` element so the
-     * caller owns the items, divider and `type`. Hidden below the `lg` breakpoint.
-     */
-    breadcrumbs?: ReactNode;
-    /** Mobile "back" link label. When set, a back link replaces the breadcrumbs below `lg`. */
-    backLabel?: string;
-    backHref?: string;
-    /** Action buttons rendered to the right of the title on desktop. */
-    actions?: ReactNode;
-    /** Render the search inputs (mobile + desktop). */
-    showSearch?: boolean;
-    /** Render the divider beneath the title row. */
-    withDivider?: boolean;
-    className?: string;
-    /** Overrides the `data-testid` (defaults to `fd-page-header-simple`). */
-    'data-testid'?: string;
-}
-export declare const PageHeaderSimple: ({ title, description, breadcrumbs, backLabel, backHref, actions, showSearch, withDivider, className, "data-testid": dataTestId, }: PageHeaderSimpleProps) => import("react").JSX.Element;
-//# sourceMappingURL=page-header-simple.d.ts.map

package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-header-simple.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,GAAI,mIAW9B,qBAAqB,gCAoDvB,CAAC"}

package/dist/components/organisms/PageHeader/components/page-header-simple.js

@@ -1,14 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ArrowLeft, SearchLg } from '@flipdish/ui-icons';
-import { Button } from '@flipdish/ui-library/components/atoms/Button';
-import { Input } from '@flipdish/ui-library/components/atoms/Input';
-import { cx } from '@flipdish/ui-library/utilities/cx';
-import { useResolvedTestId, TestIdProvider, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
-
-const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, 'data-testid': dataTestId, }) => {
-    const pageHeaderTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-header-simple', rootName: 'page-header-simple' });
-    return (jsx(TestIdProvider, { value: pageHeaderTestId, children: jsxs("div", { "data-testid": pageHeaderTestId, className: cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: ArrowLeft, children: backLabel }) })), jsxs("div", { className: cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxs(Fragment, { children: [jsx(Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: SearchLg, "data-testid": joinTestId(pageHeaderTestId, 'search-mobile') }), jsx(Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: SearchLg, "data-testid": joinTestId(pageHeaderTestId, 'search-desktop') })] }))] })] }) }));
-};
-
-export { PageHeaderSimple };
-//# sourceMappingURL=page-header-simple.js.map

package/dist/components/organisms/PageHeader/components/page-header-simple.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-header-simple.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AA+BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH,KAAI;AAC1B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;AAEjI,IAAA,QACEA,GAAA,CAAC,cAAc,IAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3I,WAAW,IAAID,aAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC7BA,GAAA,CAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,SAAS,EAAA,QAAA,EACvE,SAAS,EAAA,CACH,EAAA,CACL,CACP,EAEDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,EAAA,QAAA,EAAA,CACpGA,cAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,IAAID,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,WAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,GAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,EAAA,CAAO,EAElE,UAAU,KACTC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEEF,IAAC,KAAK,EAAA,EACJ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,QAAQ,EAAA,aAAA,EACD,UAAU,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAA,CAC1D,EAGFA,IAAC,KAAK,EAAA,EACJ,QAAQ,EAAA,IAAA,EACR,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,gBACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,QAAQ,EAAA,aAAA,EACD,UAAU,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC3D,CAAA,EAAA,CACD,CACJ,IACG,CAAA,EAAA,CACF,EAAA,CACS;AAErB;;;;"}