@flipdish/ui-library 0.2.1

package/dist/components/molecules/Select/components/select-shared.d.ts

@@ -0,0 +1,59 @@
+import type { ComponentType, ReactNode, SVGProps } from 'react';
+export type SelectItemType = {
+    /** Unique identifier for the item. */
+    id: string | number;
+    /** The primary display text. */
+    label?: string;
+    /** Avatar image URL. */
+    avatarUrl?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /** Secondary text displayed alongside the label. */
+    supportingText?: string;
+    /** Leading icon component or element. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>> | ReactNode;
+};
+export interface CommonProps {
+    /** Helper text displayed below the input. */
+    hint?: string;
+    /** Field label displayed above the input. */
+    label?: string;
+    /** Tooltip text for the help icon next to the label. */
+    tooltip?: string;
+    /**
+     * The size of the component.
+     * @default "md"
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Placeholder text when no value is selected. */
+    placeholder?: string;
+    /** Whether to hide the required indicator from the label. */
+    hideRequiredIndicator?: boolean;
+}
+export declare const sizes: {
+    sm: {
+        root: string;
+        withIcon: string;
+        text: string;
+        textContainer: string;
+        shortcut: string;
+    };
+    md: {
+        root: string;
+        withIcon: string;
+        text: string;
+        textContainer: string;
+        shortcut: string;
+    };
+    lg: {
+        root: string;
+        withIcon: string;
+        text: string;
+        textContainer: string;
+        shortcut: string;
+    };
+};
+export declare const SelectContext: import("react").Context<{
+    size: "sm" | "md" | "lg";
+}>;
+//# sourceMappingURL=select-shared.d.ts.map

package/dist/components/molecules/Select/components/select-shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-shared.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/select-shared.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,MAAM,cAAc,GAAG;IAC3B,sCAAsC;IACtC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,SAAS,CAAC;CAC3D,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,aAAa;UAAyB,IAAI,GAAG,IAAI,GAAG,IAAI;EAAmB,CAAC"}

package/dist/components/molecules/Select/components/select-shared.js

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+const sizes = {
+    sm: {
+        root: 'py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]',
+        withIcon: '',
+        text: 'text-sm',
+        textContainer: 'gap-x-1.5',
+        shortcut: 'pr-2.5',
+    },
+    md: { root: 'py-2 px-3 gap-2 *:data-icon:size-5', withIcon: '', text: 'text-md', textContainer: 'gap-x-1.5', shortcut: 'pr-2.5' },
+    lg: { root: 'py-2.5 px-3.5 gap-2 *:data-icon:size-5', withIcon: '', text: 'text-md', textContainer: 'gap-x-1.5', shortcut: 'pr-3' },
+};
+const SelectContext = createContext({ size: 'md' });
+
+export { SelectContext, sizes };
+//# sourceMappingURL=select-shared.js.map

package/dist/components/molecules/Select/components/select-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-shared.js","sources":["../../../../../src/components/molecules/Select/components/select-shared.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAsCO,MAAM,KAAK,GAAG;AACnB,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,uEAAuE;AAC7E,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;IACD,EAAE,EAAE,EAAE,IAAI,EAAE,oCAAoC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE;IACjI,EAAE,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE;;AAG9H,MAAM,aAAa,GAAG,aAAa,CAA+B,EAAE,IAAI,EAAE,IAAI,EAAE;;;;"}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+var Input = require('@flipdish/ui-library/components/atoms/Input');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var isReactComponent = require('@flipdish/ui-library/utilities/isReactComponent');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var combobox = require('./components/combobox.cjs');
+var popover = require('./components/popover.cjs');
+var selectItem = require('./components/select-item.cjs');
+var selectShared = require('./components/select-shared.cjs');
+
+const SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, icon, ref }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.Button, { ref: ref, className: cx.cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (isFocused || isOpen) && 'ring-2 ring-brand', isDisabled && 'cursor-not-allowed opacity-50'), children: jsxRuntime.jsx(reactAriaComponents.SelectValue, { className: (state) => cx.cx('flex h-max w-full items-center justify-start truncate text-left align-middle', selectShared.sizes[size].root, 
+            // With icon
+            (state.selectedItems[0]?.icon || icon) && selectShared.sizes[size].withIcon, 
+            // Icon styles
+            '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: (state) => {
+                const selectedItem = state.selectedItems[0];
+                const Icon = selectedItem?.icon || icon;
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedItem?.avatarUrl ? (jsxRuntime.jsx(Avatar.Avatar, { size: "xs", src: selectedItem.avatarUrl, alt: selectedItem.label, className: cx.cx(size === 'sm' && 'size-5') })) : isReactComponent.isReactComponent(Icon) ? (jsxRuntime.jsx(Icon, { "data-icon": true, "aria-hidden": "true" })) : React.isValidElement(Icon) ? (Icon) : null, selectedItem ? (jsxRuntime.jsxs("span", { className: cx.cx('flex w-full truncate', selectShared.sizes[size].textContainer), children: [jsxRuntime.jsx("p", { className: cx.cx('truncate font-medium text-primary', selectShared.sizes[size].text), children: selectedItem?.label }), selectedItem?.supportingText && jsxRuntime.jsx("p", { className: cx.cx('text-tertiary', selectShared.sizes[size].text), children: selectedItem?.supportingText })] })) : (jsxRuntime.jsx("p", { className: cx.cx('text-placeholder', selectShared.sizes[size].text), children: placeholder })), jsxRuntime.jsx(uiIcons.ChevronDown, { "aria-hidden": "true", className: cx.cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }));
+            } }) }));
+};
+const Select = ({ placeholder = 'Select', icon, size = 'md', children, items, popoverClassName, label, hint, tooltip, hideRequiredIndicator, className, ...rest }) => {
+    return (jsxRuntime.jsx(selectShared.SelectContext.Provider, { value: { size }, children: jsxRuntime.jsx(reactAriaComponents.Select, { ...rest, className: (state) => cx.cx('flex flex-col gap-1.5', typeof className === 'function' ? className(state) : className), children: (state) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(Input.Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: tooltip, children: label })), jsxRuntime.jsx(SelectValue, { ...state, size, placeholder, icon: icon }), jsxRuntime.jsx(popover.Popover, { size: size, className: popoverClassName, children: jsxRuntime.jsx(reactAriaComponents.ListBox, { items: items, className: "size-full outline-hidden", children: children }) }), hint && (jsxRuntime.jsx(Input.HintText, { isInvalid: state.isInvalid, className: cx.cx(size === 'sm' && 'text-xs'), children: hint }))] })) }) }));
+};
+const _Select = Select;
+_Select.ComboBox = combobox.ComboBox;
+_Select.Item = selectItem.SelectItem;
+
+exports.SelectContext = selectShared.SelectContext;
+exports.sizes = selectShared.sizes;
+exports.Select = _Select;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Select/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","cx","AriaSelectValue","sizes","_jsxs","Avatar","isReactComponent","isValidElement","ChevronDown","SelectContext","AriaSelect","_Fragment","Label","Popover","AriaListBox","HintText","ComboBox","SelectItem"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import type { FC, ReactNode, RefAttributes } from 'react';
+import type { SelectProps as AriaSelectProps } from 'react-aria-components';
+import { ComboBox } from './components/combobox';
+import { SelectItem } from './components/select-item';
+import { type CommonProps, type SelectItemType } from './components/select-shared';
+export { type CommonProps, SelectContext, type SelectItemType, sizes } from './components/select-shared';
+export interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, 'children' | 'items'>, RefAttributes<HTMLDivElement>, CommonProps {
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    icon?: FC | ReactNode;
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+declare const Select: ({ placeholder, icon, size, children, items, popoverClassName, label, hint, tooltip, hideRequiredIndicator, className, ...rest }: SelectProps) => import("react").JSX.Element;
+declare const _Select: typeof Select & {
+    ComboBox: typeof ComboBox;
+    Item: typeof SelectItem;
+};
+export { _Select as Select };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Select/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,KAAK,WAAW,EAAiB,KAAK,cAAc,EAAS,MAAM,4BAA4B,CAAC;AAEzG,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEzG,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,WAAW;IAC1I,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACtB,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC,CAAC;CAC7D;AAwED,QAAA,MAAM,MAAM,GAAI,iIAab,WAAW,gCA8Bb,CAAC;AAEF,QAAA,MAAM,OAAO,EAAa,OAAO,MAAM,GAAG;IACxC,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;CACzB,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronDown } from '@flipdish/ui-icons';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+import { Label, HintText } from '@flipdish/ui-library/components/atoms/Input';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { isReactComponent } from '@flipdish/ui-library/utilities/isReactComponent';
+import { isValidElement } from 'react';
+import { Select as Select$1, ListBox, Button, SelectValue as SelectValue$1 } from 'react-aria-components';
+import { ComboBox } from './components/combobox.js';
+import { Popover } from './components/popover.js';
+import { SelectItem } from './components/select-item.js';
+import { SelectContext, sizes } from './components/select-shared.js';
+
+const SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, icon, ref }) => {
+    return (jsx(Button, { ref: ref, className: cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (isFocused || isOpen) && 'ring-2 ring-brand', isDisabled && 'cursor-not-allowed opacity-50'), children: jsx(SelectValue$1, { className: (state) => cx('flex h-max w-full items-center justify-start truncate text-left align-middle', sizes[size].root, 
+            // With icon
+            (state.selectedItems[0]?.icon || icon) && sizes[size].withIcon, 
+            // Icon styles
+            '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: (state) => {
+                const selectedItem = state.selectedItems[0];
+                const Icon = selectedItem?.icon || icon;
+                return (jsxs(Fragment, { children: [selectedItem?.avatarUrl ? (jsx(Avatar, { size: "xs", src: selectedItem.avatarUrl, alt: selectedItem.label, className: cx(size === 'sm' && 'size-5') })) : isReactComponent(Icon) ? (jsx(Icon, { "data-icon": true, "aria-hidden": "true" })) : isValidElement(Icon) ? (Icon) : null, selectedItem ? (jsxs("span", { className: cx('flex w-full truncate', sizes[size].textContainer), children: [jsx("p", { className: cx('truncate font-medium text-primary', sizes[size].text), children: selectedItem?.label }), selectedItem?.supportingText && jsx("p", { className: cx('text-tertiary', sizes[size].text), children: selectedItem?.supportingText })] })) : (jsx("p", { className: cx('text-placeholder', sizes[size].text), children: placeholder })), jsx(ChevronDown, { "aria-hidden": "true", className: cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }));
+            } }) }));
+};
+const Select = ({ placeholder = 'Select', icon, size = 'md', children, items, popoverClassName, label, hint, tooltip, hideRequiredIndicator, className, ...rest }) => {
+    return (jsx(SelectContext.Provider, { value: { size }, children: jsx(Select$1, { ...rest, className: (state) => cx('flex flex-col gap-1.5', typeof className === 'function' ? className(state) : className), children: (state) => (jsxs(Fragment, { children: [label && (jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: tooltip, children: label })), jsx(SelectValue, { ...state, size, placeholder, icon: icon }), jsx(Popover, { size: size, className: popoverClassName, children: jsx(ListBox, { items: items, className: "size-full outline-hidden", children: children }) }), hint && (jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === 'sm' && 'text-xs'), children: hint }))] })) }) }));
+};
+const _Select = Select;
+_Select.ComboBox = ComboBox;
+_Select.Item = SelectItem;
+
+export { _Select as Select, SelectContext, sizes };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Select/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","AriaSelectValue","_jsxs","AriaSelect","_Fragment","AriaListBox"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+'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');
+
+const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, }) => {
+    return (jsxRuntime.jsxs("div", { className: cx.cx('relative flex flex-col gap-4 bg-primary', 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 }), 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 })] }))] })] }));
+};
+
+exports.PageHeaderSimple = PageHeaderSimple;
+//# sourceMappingURL=page-header-simple.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-simple.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","Button","ArrowLeft","Input","SearchLg"],"mappings":";;;;;;;;AA4BO,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,GACa,KAAI;AAC1B,IAAA,QACEA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACrE,WAAW,IAAIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,wBAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,eAACC,aAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,QAAA,EACvE,SAAS,GACH,EAAA,CACL,CACP,EAEDJ,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,aACpGD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAIE,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAE,OAAO,GAAO,EAElE,UAAU,KACTF,kDAEEE,cAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,EAAA,YAAA,EAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAEC,gBAAQ,EAAA,CAAI,EAGzGJ,cAAA,CAACG,WAAK,IAAC,QAAQ,EAAA,IAAA,EAAC,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,IAAI,gBAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAEC,gBAAQ,GAAI,CAAA,EAAA,CAC9H,CACJ,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}

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

@@ -0,0 +1,24 @@
+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;
+}
+export declare const PageHeaderSimple: ({ title, description, breadcrumbs, backLabel, backHref, actions, showSearch, withDivider, className, }: PageHeaderSimpleProps) => import("react").JSX.Element;
+//# sourceMappingURL=page-header-simple.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-simple.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"names":[],"mappings":"AAIA,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;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,wGAU9B,qBAAqB,gCAiCvB,CAAC"}

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx, 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';
+
+const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, }) => {
+    return (jsxs("div", { className: cx('relative flex flex-col gap-4 bg-primary', 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 }), jsx(Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: SearchLg })] }))] })] }));
+};
+
+export { PageHeaderSimple };
+//# sourceMappingURL=page-header-simple.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-simple.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AA4BO,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,GACa,KAAI;AAC1B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACrE,WAAW,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,aAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,IAAC,MAAM,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,SAAS,EAAA,QAAA,EACvE,SAAS,GACH,EAAA,CACL,CACP,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,aACpGA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAIC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAClE,EAEL,OAAO,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAE,OAAO,GAAO,EAElE,UAAU,KACTD,4BAEEC,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,EAAA,YAAA,EAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAE,QAAQ,EAAA,CAAI,EAGzGA,GAAA,CAAC,KAAK,IAAC,QAAQ,EAAA,IAAA,EAAC,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,IAAI,gBAAY,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAE,QAAQ,GAAI,CAAA,EAAA,CAC9H,CACJ,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/organisms/PageHeader/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var pageHeaderSimple = require('./components/page-header-simple.cjs');
+
+
+
+exports.Simple = pageHeaderSimple.PageHeaderSimple;
+//# sourceMappingURL=index.cjs.map

package/dist/components/organisms/PageHeader/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/organisms/PageHeader/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Page-level header bar containing a title, optional breadcrumb, and action slots.
+ *
+ * @summary page header with title and optional actions
+ */
+export { PageHeaderSimple as Simple } from './components/page-header-simple';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/PageHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/components/organisms/PageHeader/index.js

@@ -0,0 +1,2 @@
+export { PageHeaderSimple as Simple } from './components/page-header-simple.js';
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/PageHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Generic 404 page template used by consuming apps as the fallback route.
+ *
+ * Lives under `components/templates/` per the atomic-design folder structure: it composes plain HTML
+ * elements + Tailwind utilities into a complete page-shaped layout. Consumers (e.g. `App.routes.tsx`)
+ * wrap this in a `<Route path="*">` and provide localised copy via props.
+ *
+ * Doubles as the Tailwind v4 + Option A CSS-isolation smoke test for the property-service MFE —
+ * if these utility classes render correctly inside `#flipdish-micro-frontend` without polluting
+ * Portal chrome, the scoping pipeline works end-to-end.
+ */
+const NotFoundPage = ({ title = '404', description = 'The page you were looking for could not be found.', }) => (jsxRuntime.jsxs("main", { className: "flex min-h-[50vh] flex-col items-center justify-center gap-3 p-8 text-center", children: [jsxRuntime.jsx("h1", { className: "text-4xl font-semibold text-gray-900", children: title }), jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: description })] }));
+
+exports.NotFoundPage = NotFoundPage;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAcA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,mDAAmD,GAC/C,MAClBA,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8EAA8E,aAC5FC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACjEA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CACnD;;;;"}

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

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+/**
+ * Props for the NotFoundPage component.
+ * @param title - The title of the page. Defaults to "404".
+ * @param description - The description of the page. Defaults to "The page you were looking for could not be found."
+ */
+export interface NotFoundPageProps {
+    /** Heading shown above the description. Defaults to "404". */
+    readonly title?: string;
+    /** Body copy explaining the error. Defaults to "The page you were looking for could not be found." */
+    readonly description?: string;
+}
+/**
+ * Generic 404 page template used by consuming apps as the fallback route.
+ *
+ * Lives under `components/templates/` per the atomic-design folder structure: it composes plain HTML
+ * elements + Tailwind utilities into a complete page-shaped layout. Consumers (e.g. `App.routes.tsx`)
+ * wrap this in a `<Route path="*">` and provide localised copy via props.
+ *
+ * Doubles as the Tailwind v4 + Option A CSS-isolation smoke test for the property-service MFE —
+ * if these utility classes render correctly inside `#flipdish-micro-frontend` without polluting
+ * Portal chrome, the scoping pipeline works end-to-end.
+ */
+export declare const NotFoundPage: ({ title, description, }: NotFoundPageProps) => ReactElement;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,sGAAsG;IACtG,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GAAI,yBAG1B,iBAAiB,KAAG,YAKtB,CAAC"}

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

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Generic 404 page template used by consuming apps as the fallback route.
+ *
+ * Lives under `components/templates/` per the atomic-design folder structure: it composes plain HTML
+ * elements + Tailwind utilities into a complete page-shaped layout. Consumers (e.g. `App.routes.tsx`)
+ * wrap this in a `<Route path="*">` and provide localised copy via props.
+ *
+ * Doubles as the Tailwind v4 + Option A CSS-isolation smoke test for the property-service MFE —
+ * if these utility classes render correctly inside `#flipdish-micro-frontend` without polluting
+ * Portal chrome, the scoping pipeline works end-to-end.
+ */
+const NotFoundPage = ({ title = '404', description = 'The page you were looking for could not be found.', }) => (jsxs("main", { className: "flex min-h-[50vh] flex-col items-center justify-center gap-3 p-8 text-center", children: [jsx("h1", { className: "text-4xl font-semibold text-gray-900", children: title }), jsx("p", { className: "text-base text-gray-600", children: description })] }));
+
+export { NotFoundPage };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/NotFoundPage/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;AAcA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,mDAAmD,GAC/C,MAClBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8EAA8E,aAC5FC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACjEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,CAAA,EAAA,CACnD;;;;"}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+/**
+ * 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 = () => (jsxRuntime.jsxs("div", { role: "alert", 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.
+ *
+ * The boundary wraps `children` only, not the header: content (data-fetching, forms,
+ * dynamic logic) is where throws realistically happen, and keeping the header outside
+ * means breadcrumbs/back link stay usable so the user can navigate away when content
+ * fails — strictly better than blanking the whole page. A header throw (rare, since
+ * it's static chrome) isn't caught here, but the app-level ErrorBoundary higher up the
+ * tree still catches it; nothing goes unhandled.
+ */
+const PageLayout = ({ pageName, header, children, renderError, onError, className }) => {
+    return (jsxRuntime.jsxs("main", { 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, {}), children: children })] }));
+};
+
+exports.PageLayout = PageLayout;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","cx","ErrorBoundary"],"mappings":";;;;;;AAgCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,OACvBA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CACtHC,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;;;;;;;;;;;AAWG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB,KAAe;IACxH,QACED,0BAAM,SAAS,EAAEE,KAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACnG,MAAM,EAEPD,cAAA,CAACE,2BAAa,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIF,cAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,YACzI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}

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

@@ -0,0 +1,43 @@
+import type { ErrorInfo, ReactNode } from 'react';
+export interface PageLayoutProps {
+    /**
+     * Stable, human-readable name of the page (e.g. "CollectionSettings"). Tags the
+     * page-level error boundary so a thrown error can be attributed to a specific page
+     * in logs/RUM, and is forwarded to `renderError` and `onError`.
+     */
+    pageName: string;
+    /**
+     * Header region. Compose `<PageHeader.Simple>` (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;
+    /** Page content, rendered INSIDE the error boundary. */
+    children: ReactNode;
+    /**
+     * Replaces the default fallback shown when a child throws. Receives the thrown
+     * error and `pageName` so consumers can render localised copy.
+     */
+    renderError?: (props: {
+        error: Error;
+        pageName: string;
+    }) => ReactNode;
+    /** Called when a child throws — wire app-level reporting (e.g. Datadog RUM) here. */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Extra classes merged onto the root `<main>`. */
+    className?: 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.
+ *
+ * The boundary wraps `children` only, not the header: content (data-fetching, forms,
+ * dynamic logic) is where throws realistically happen, and keeping the header outside
+ * means breadcrumbs/back link stay usable so the user can navigate away when content
+ * fails — strictly better than blanking the whole page. A header throw (rare, since
+ * it's static chrome) isn't caught here, but the app-level ErrorBoundary higher up the
+ * tree still catches it; nothing goes unhandled.
+ */
+export declare const PageLayout: ({ pageName, header, children, renderError, onError, className }: PageLayoutProps) => ReactNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAIA,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;CACpB;AAcD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,GAAI,iEAAiE,eAAe,KAAG,SAU7G,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+/**
+ * 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 = () => (jsxs("div", { role: "alert", 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.
+ *
+ * The boundary wraps `children` only, not the header: content (data-fetching, forms,
+ * dynamic logic) is where throws realistically happen, and keeping the header outside
+ * means breadcrumbs/back link stay usable so the user can navigate away when content
+ * fails — strictly better than blanking the whole page. A header throw (rare, since
+ * it's static chrome) isn't caught here, but the app-level ErrorBoundary higher up the
+ * tree still catches it; nothing goes unhandled.
+ */
+const PageLayout = ({ pageName, header, children, renderError, onError, className }) => {
+    return (jsxs("main", { 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, {}), children: children })] }));
+};
+
+export { PageLayout };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAgCA;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,OACvBA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CACtHC,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;;;;;;;;;;;AAWG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB,KAAe;IACxH,QACED,eAAM,SAAS,EAAE,EAAE,CAAC,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACnG,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,YACzI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}

package/dist/hooks/useResizeObserver/index.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Checks if the ResizeObserver API is supported.
+ * @returns True if the ResizeObserver API is supported, false otherwise.
+ */
+function hasResizeObserver() {
+    return typeof window.ResizeObserver !== 'undefined';
+}
+/**
+ * A hook that observes the size of an element and calls a callback function when the size changes.
+ * @param options - The options for the hook.
+ */
+function useResizeObserver(options) {
+    const { ref, box, onResize } = options;
+    React.useEffect(() => {
+        const element = ref?.current;
+        if (!element) {
+            return;
+        }
+        if (!hasResizeObserver()) {
+            window.addEventListener('resize', onResize, false);
+            return () => {
+                window.removeEventListener('resize', onResize, false);
+            };
+        }
+        else {
+            const resizeObserverInstance = new window.ResizeObserver((entries) => {
+                if (!entries.length) {
+                    return;
+                }
+                onResize();
+            });
+            resizeObserverInstance.observe(element, { box });
+            return () => {
+                if (element) {
+                    resizeObserverInstance.unobserve(element);
+                }
+            };
+        }
+    }, [onResize, ref, box]);
+}
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=index.cjs.map

package/dist/hooks/useResizeObserver/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useResizeObserver/index.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAEA;;;AAGG;AACH,SAAS,iBAAiB,GAAA;AACxB,IAAA,OAAO,OAAO,MAAM,CAAC,cAAc,KAAK,WAAW;AACrD;AAoBA;;;AAGG;AACG,SAAU,iBAAiB,CAAoB,OAAwC,EAAA;IAC3F,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAAO;IAEtCA,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,GAAG,EAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,EAAE;YACZ;QACF;AAEA,QAAA,IAAI,CAAC,iBAAiB,EAAE,EAAE;YACxB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;AAElD,YAAA,OAAO,MAAK;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;AACvD,YAAA,CAAC;QACH;aAAO;YACL,MAAM,sBAAsB,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,KAAI;AACnE,gBAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;oBACnB;gBACF;AAEA,gBAAA,QAAQ,EAAE;AACZ,YAAA,CAAC,CAAC;YAEF,sBAAsB,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC;AAEhD,YAAA,OAAO,MAAK;gBACV,IAAI,OAAO,EAAE;AACX,oBAAA,sBAAsB,CAAC,SAAS,CAAC,OAAO,CAAC;gBAC3C;AACF,YAAA,CAAC;QACH;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1B;;;;"}

package/dist/hooks/useResizeObserver/index.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+/**
+ * The options for the useResizeObserver hook.
+ */
+type useResizeObserverOptionsType<T> = {
+    /**
+     * The ref to the element to observe.
+     */
+    ref: RefObject<T | undefined | null> | undefined;
+    /**
+     * The box to observe.
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * The callback function to call when the size changes.
+     */
+    onResize: () => void;
+};
+/**
+ * A hook that observes the size of an element and calls a callback function when the size changes.
+ * @param options - The options for the hook.
+ */
+export declare function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>): void;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useResizeObserver/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAUlD;;GAEG;AACH,KAAK,4BAA4B,CAAC,CAAC,IAAI;IACrC;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,GAAG,CAAC,EAAE,wBAAwB,CAAC;IAC/B;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,4BAA4B,CAAC,CAAC,CAAC,QAiC5F"}