@flipdish/ui-library 0.37.0 → 0.39.0

package/dist/native/components/__internal__/selectionControl/SelectionControlText.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-type SelectionControlSize = 'sm' | 'md';
+import { type SelectionControlSize } from './selectionControl.styles';
 interface SelectionControlTextProps {
     size: SelectionControlSize;
     label?: ReactNode;

package/dist/native/components/__internal__/selectionControl/SelectionControlText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAaxC,UAAU,yBAAyB;IACjC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,yHAAyH;AACzH,eAAO,MAAM,oBAAoB,GAAI,uBAAuB,yBAAyB,uCASpF,CAAC"}
+{"version":3,"file":"SelectionControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,oBAAoB,EAAyB,MAAM,2BAA2B,CAAC;AAa7F,UAAU,yBAAyB;IACjC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,yHAAyH;AACzH,eAAO,MAAM,oBAAoB,GAAI,uBAAuB,yBAAyB,uCASpF,CAAC"}

package/dist/native/components/__internal__/selectionControl/SelectionControlText.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '../../../utilities/cx/index.js';
 import { View, Text } from 'react-native';
+import { selectionControlSizes } from './selectionControl.styles.js';
 
 // `Text` className is ignored by the current `react-native-css` preview (see Avatar), so label
 // typography goes through `style`. Mirrors `text-sm`/`text-md` + `font-medium`.
@@ -15,7 +16,7 @@ const HINT_COLOR = '#525252';
 const SelectionControlText = ({ size, label, hint }) => {
     if (!label && !hint)
         return null;
-    return (jsxs(View, { className: cx('shrink flex-col', size === 'md' && 'gap-0.5'), children: [label ? jsx(Text, { style: { ...TEXT_SIZE[size], fontWeight: '500', color: LABEL_COLOR }, children: label }) : null, hint ? jsx(Text, { style: { ...TEXT_SIZE[size], color: HINT_COLOR }, children: hint }) : null] }));
+    return (jsxs(View, { className: cx('shrink flex-col', selectionControlSizes[size].textWrapper), children: [label ? jsx(Text, { style: { ...TEXT_SIZE[size], fontWeight: '500', color: LABEL_COLOR }, children: label }) : null, hint ? jsx(Text, { style: { ...TEXT_SIZE[size], color: HINT_COLOR }, children: hint }) : null] }));
 };
 
 export { SelectionControlText };

package/dist/native/components/__internal__/selectionControl/SelectionControlText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionControlText.js","sources":["../../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAMA;AACA;AACA,MAAM,SAAS,GAA2E;IACxF,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CACrC;AAED;AACA,MAAM,WAAW,GAAG,SAAS;AAC7B,MAAM,UAAU,GAAG,SAAS;AAQ5B;AACO,MAAM,oBAAoB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA6B,KAAI;AACvF,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEhC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,IAAI,KAAK,IAAI,IAAI,SAAS,CAAC,EAAA,QAAA,EAAA,CAC/D,KAAK,GAAGC,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,YAAG,KAAK,EAAA,CAAQ,GAAG,IAAI,EACzG,IAAI,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAA,QAAA,EAAG,IAAI,GAAQ,GAAG,IAAI,CAAA,EAAA,CAC/E;AAEX;;"}
+{"version":3,"file":"SelectionControlText.js","sources":["../../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA;AACA;AACA,MAAM,SAAS,GAA2E;IACxF,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CACrC;AAED;AACA,MAAM,WAAW,GAAG,SAAS;AAC7B,MAAM,UAAU,GAAG,SAAS;AAQ5B;AACO,MAAM,oBAAoB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA6B,KAAI;AACvF,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEhC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,CAC5E,KAAK,GAAGC,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAAG,IAAI,EACzG,IAAI,GAAGA,IAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAA,QAAA,EAAG,IAAI,GAAQ,GAAG,IAAI,CAAA,EAAA,CAC/E;AAEX;;"}

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.d.ts

@@ -0,0 +1,17 @@
+export type SelectionControlSize = 'sm' | 'md';
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+export declare const selectionControlSizes: {
+    sm: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+    md: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+};
+//# sourceMappingURL=selectionControl.styles.d.ts.map

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,mHAAmH;AACnH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAakE,CAAC"}

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.js

@@ -0,0 +1,20 @@
+import { sortCx } from '../../../utilities/cx/index.js';
+
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+const selectionControlSizes = sortCx({
+    sm: {
+        root: 'gap-2',
+        textWrapper: '',
+        label: 'text-sm font-medium',
+        hint: 'text-sm',
+    },
+    md: {
+        root: 'gap-3',
+        textWrapper: 'gap-0.5',
+        label: 'text-md font-medium',
+        hint: 'text-md',
+    },
+});
+
+export { selectionControlSizes };
+//# sourceMappingURL=selectionControl.styles.js.map

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.js","sources":["../../../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;AACO,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+/**
+ * Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
+ *
+ * @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
+ * @param label The visible label, used only when it is plain text.
+ * @returns The name to announce, or `undefined` when neither gives a string.
+ */
+export declare const getAccessibleName: (ariaLabel: string | undefined, label: ReactNode) => string | undefined;
+/**
+ * Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
+ *
+ * @param hint The visible hint, announced after the name only when it is plain text.
+ * @returns The hint to announce, or `undefined` for a non-string or missing hint.
+ */
+export declare const getAccessibleHint: (hint: ReactNode) => string | undefined;
+export declare const SELECTION_CONTROL_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+//# sourceMappingURL=selectionControl.utils.d.ts.map

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,OAAO,SAAS,KAAG,MAAM,GAAG,SAC/B,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,SAA0D,CAAC;AAGxH,eAAO,MAAM,0BAA0B;;;;;CAA6C,CAAC"}

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.js

@@ -0,0 +1,20 @@
+/**
+ * Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
+ *
+ * @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
+ * @param label The visible label, used only when it is plain text.
+ * @returns The name to announce, or `undefined` when neither gives a string.
+ */
+const getAccessibleName = (ariaLabel, label) => ariaLabel ?? (typeof label === 'string' ? label : undefined);
+/**
+ * Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
+ *
+ * @param hint The visible hint, announced after the name only when it is plain text.
+ * @returns The hint to announce, or `undefined` for a non-string or missing hint.
+ */
+const getAccessibleHint = (hint) => (typeof hint === 'string' ? hint : undefined);
+// Widens the 16–24px controls toward the 44pt minimum; vertical stops at 8 so options in a `gap-4` stack never overlap.
+const SELECTION_CONTROL_HIT_SLOP = { top: 8, bottom: 8, left: 12, right: 12 };
+
+export { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName };
+//# sourceMappingURL=selectionControl.utils.js.map

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.utils.js","sources":["../../../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;;;;AAMG;AACI,MAAM,iBAAiB,GAAG,CAAC,SAA6B,EAAE,KAAgB,KAC/E,SAAS,KAAK,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,SAAS;AAE7D;;;;;AAKG;MACU,iBAAiB,GAAG,CAAC,IAAe,MAA0B,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,SAAS;AAEtH;MACa,0BAA0B,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;;"}

package/dist/native/components/atoms/Checkbox/index.d.ts

@@ -1,12 +1,34 @@
+import { type ReactNode } from 'react';
+export interface CheckboxProps {
+    /** Sets the box size and the label and hint text size. */
+    size?: 'sm' | 'md';
+    /** Text shown beside the box; pressing it toggles the checkbox. */
+    label?: ReactNode;
+    /** Supporting text shown below the label. */
+    hint?: ReactNode;
+    /** Controlled checked state — the checkbox is checked when true. */
+    isSelected?: boolean;
+    /** Initial checked state for uncontrolled usage. */
+    defaultSelected?: boolean;
+    /** Shows a dash instead of a check, for a parent whose children are partly checked. */
+    isIndeterminate?: boolean;
+    /** Disables interaction and shows a reduced-opacity state. */
+    isDisabled?: boolean;
+    /** Called with the new checked state whenever the user toggles it. */
+    onChange?: (isSelected: boolean) => void;
+    /** Extra classes merged onto the root `Pressable`. */
+    className?: string;
+    /** Web-style accessible name, used as `accessibilityLabel` so shared call sites work on both platforms. */
+    'aria-label'?: string;
+    /** Overrides the generated `testID` (defaults to `fd-checkbox`). */
+    'data-testid'?: string;
+}
 /**
- * `Checkbox` has no React Native implementation.
+ * React Native `Checkbox` — the same box, check, dash, label and hint as web, built from
+ * `Pressable` and `View` instead of a react-aria `Checkbox`. The web `ring-inset` becomes a
+ * 1px border, which takes no extra space inside the fixed-size box.
  *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/atoms/Checkbox` from React Native fails at
- * compile time rather than resolving to the web build's types. There is no
- * matching `index.js`, so Metro cannot bundle this module either.
- *
- * To make `Checkbox` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary checkbox for selecting one or more options (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const Checkbox: ({ label, hint, size, className, isSelected: isSelectedProp, defaultSelected, isIndeterminate, isDisabled, onChange, "aria-label": ariaLabel, "data-testid": dataTestId, }: CheckboxProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/native/components/atoms/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Checkbox/index.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,2KAYtB,aAAa,gCA4Cf,CAAC"}

package/dist/native/components/atoms/Checkbox/index.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Minus, Check } from '@flipdish/ui-icons';
+import { cx } from '../../../utilities/cx/index.js';
+import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
+import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName } from '../../__internal__/selectionControl/selectionControl.utils.js';
+
+// Web draws both glyphs in a 14px viewBox with a 2px stroke; the ported 24px icons need 24/7 for the same weight.
+const GLYPH_STROKE = 24 / 7;
+const CHECK_SIZE = { sm: 12, md: 14 };
+const DASH_SIZE = { sm: 10, md: 14 };
+// `text-fg-white` — icons take a colour value, not a class.
+const GLYPH_COLOR = '#ffffff';
+/**
+ * React Native `Checkbox` — the same box, check, dash, label and hint as web, built from
+ * `Pressable` and `View` instead of a react-aria `Checkbox`. The web `ring-inset` becomes a
+ * 1px border, which takes no extra space inside the fixed-size box.
+ *
+ * @summary checkbox for selecting one or more options (React Native)
+ */
+const Checkbox = ({ label, hint, size = 'sm', className, isSelected: isSelectedProp, defaultSelected = false, isIndeterminate, isDisabled, onChange, 'aria-label': ariaLabel, 'data-testid': dataTestId, }) => {
+    const checkboxTestId = useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
+    const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+    const isSelected = isSelectedProp ?? uncontrolledSelected;
+    const isFilled = isSelected || isIndeterminate;
+    const handlePress = () => {
+        const next = !isSelected;
+        if (isSelectedProp === undefined)
+            setUncontrolledSelected(next);
+        onChange?.(next);
+    };
+    return (jsxs(Pressable, { testID: checkboxTestId, disabled: isDisabled, onPress: handlePress, accessibilityRole: "checkbox", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: getAccessibleName(ariaLabel, label), accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isIndeterminate ? 'mixed' : isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsx(View, { className: cx('size-4 shrink-0 items-center justify-center rounded border border-primary bg-primary', size === 'md' && 'size-5 rounded-md', isFilled && 'border-brand-solid bg-brand-solid', isDisabled && 'opacity-50', isDisabled && !isFilled && 'bg-tertiary', (label || hint) && 'mt-0.5'), children: isIndeterminate ? (jsx(Minus, { size: DASH_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })) : isSelected ? (jsx(Check, { size: CHECK_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })) : null }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
+};
+
+export { Checkbox };
+//# sourceMappingURL=index.js.map

package/dist/native/components/atoms/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Checkbox/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAkCA;AACA,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC;AAC3B,MAAM,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC9C,MAAM,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC7C;AACA,MAAM,WAAW,GAAG,SAAS;AAE7B;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,eAAe,GAAG,KAAK,EACvB,eAAe,EACf,UAAU,EACV,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,GACX,KAAI;AAClB,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IAC3G,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AACjF,IAAA,MAAM,UAAU,GAAG,cAAc,IAAI,oBAAoB;AACzD,IAAA,MAAM,QAAQ,GAAG,UAAU,IAAI,eAAe;IAE9C,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,IAAI,GAAG,CAAC,UAAU;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,uBAAuB,CAAC,IAAI,CAAC;AAC/D,QAAA,QAAQ,GAAG,IAAI,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,KAAC,SAAS,EAAA,EACR,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAC,UAAU,EAC5B,OAAO,EAAE,0BAA0B,EACnC,kBAAkB,EAAE,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACvD,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,EACtG,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAE3GC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,IAAI,KAAK,IAAI,IAAI,mBAAmB,EACpC,QAAQ,IAAI,mCAAmC,EAC/C,UAAU,IAAI,YAAY,EAC1B,UAAU,IAAI,CAAC,QAAQ,IAAI,aAAa,EACxC,CAAC,KAAK,IAAI,IAAI,KAAK,QAAQ,CAC5B,YAEA,eAAe,IACdA,IAAC,KAAK,EAAA,EAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC7E,UAAU,IACZA,GAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC9E,IAAI,EAAA,CACH,EAEPA,IAAC,oBAAoB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,CAAA,EAAA,CACpD;AAEhB;;"}

package/dist/native/components/atoms/Toggle/Toggle.styles.d.ts

@@ -17,19 +17,5 @@ export declare const styles: {
         sm: string;
         md: string;
     };
-    sizes: {
-        sm: {
-            root: string;
-            textWrapper: string;
-            label: string;
-            hint: string;
-        };
-        md: {
-            root: string;
-            textWrapper: string;
-            label: string;
-            hint: string;
-        };
-    };
 };
 //# sourceMappingURL=Toggle.styles.d.ts.map

package/dist/native/components/atoms/Toggle/Toggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCjB,CAAC"}
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}

package/dist/native/components/atoms/Toggle/Toggle.styles.js

@@ -19,20 +19,6 @@ const styles = sortCx({
         sm: 'translate-x-4',
         md: 'translate-x-5',
     },
-    sizes: {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    },
 });
 
 export { styles };

package/dist/native/components/atoms/Toggle/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.js","sources":["../../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACtC,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,KAAK,EAAE,qBAAqB;AAC5B,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,WAAW,EAAE,SAAS;AACtB,YAAA,KAAK,EAAE,qBAAqB;AAC5B,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACsF,KAAA;AAC1F,CAAA;;"}
+{"version":3,"file":"Toggle.styles.js","sources":["../../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}

package/dist/native/components/atoms/Toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,gKAYpB,WAAW,gCAyEb,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,gKAYpB,WAAW,gCA2Eb,CAAC"}

package/dist/native/components/atoms/Toggle/index.js

@@ -4,6 +4,8 @@ import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
 import { useState, useRef, useEffect } from 'react';
 import { Animated, Easing, Pressable, View } from 'react-native';
 import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
+import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint } from '../../__internal__/selectionControl/selectionControl.utils.js';
 import { styles } from './Toggle.styles.js';
 
 // Matches the web knob's 150ms ease-in-out slide.
@@ -42,7 +44,7 @@ const Toggle = ({ label, hint, className, size = 'sm', slim, isSelected: isSelec
             setUncontrolledSelected(next);
         onChange?.(next);
     };
-    return (jsxs(Pressable, { testID: toggleTestId, disabled: isDisabled, onPress: handlePress, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), accessibilityRole: "switch", accessibilityLabel: ariaLabel ?? label, accessibilityState: { checked: isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', styles.sizes[size].root, className), children: [jsxs(View, { className: cx('flex-row rounded-full bg-tertiary', isDisabled && 'opacity-50', slim && 'mt-0.5', styles.track[slim ? 'slim' : 'default'][size]), children: [jsx(Animated.View, { pointerEvents: "none", style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, opacity: progress }, children: jsx(View, { className: cx('flex-1 rounded-full bg-brand-solid', pressed && 'bg-brand-solid_hover') }) }), jsx(View, { pointerEvents: "none", className: cx('absolute inset-0 rounded-full border-secondary', slim && isSelected && 'border-transparent'), style: { borderWidth: slim ? 1 : 0.5 } }), jsx(View, { className: "flex-1 flex-row", onLayout: handleKnobAreaLayout, children: jsx(Animated.View, { style: { transform: [{ translateX }] }, children: jsx(View, { className: cx('rounded-full bg-fg-white shadow-sm', slim && 'border border-toggle-border shadow-xs', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && pressed && 'border-toggle-slim-border_pressed-hover', styles.knob[size]) }) }) })] }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
+    return (jsxs(Pressable, { testID: toggleTestId, disabled: isDisabled, onPress: handlePress, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), accessibilityRole: "switch", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: ariaLabel ?? label, accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsxs(View, { className: cx('flex-row rounded-full bg-tertiary', isDisabled && 'opacity-50', slim && 'mt-0.5', styles.track[slim ? 'slim' : 'default'][size]), children: [jsx(Animated.View, { pointerEvents: "none", style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, opacity: progress }, children: jsx(View, { className: cx('flex-1 rounded-full bg-brand-solid', pressed && 'bg-brand-solid_hover') }) }), jsx(View, { pointerEvents: "none", className: cx('absolute inset-0 rounded-full border-secondary', slim && isSelected && 'border-transparent'), style: { borderWidth: slim ? 1 : 0.5 } }), jsx(View, { className: "flex-1 flex-row", onLayout: handleKnobAreaLayout, children: jsx(Animated.View, { style: { transform: [{ translateX }] }, children: jsx(View, { className: cx('rounded-full bg-fg-white shadow-sm', slim && 'border border-toggle-border shadow-xs', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && pressed && 'border-toggle-slim-border_pressed-hover', styles.knob[size]) }) }) })] }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
 };
 
 export { Toggle };

package/dist/native/components/atoms/Toggle/index.js.map

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

package/dist/native/components/templates/WidgetLayout/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `WidgetLayout` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/components/templates/WidgetLayout` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `WidgetLayout` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/providers/PortalContainer/index.d.ts

@@ -19,7 +19,7 @@ export interface PortalContainerProps {
      * and is out of scope.
      *
      * @example
-     * <PortalContainer getContainer={() => document.getElementById('flipdish-micro-frontend')}>
+     * <PortalContainer getContainer={() => document.getElementById('my-overlay-host')}>
      *   <App />
      * </PortalContainer>
      */

package/dist/providers/ThemeProvider/index.cjs

@@ -17,6 +17,9 @@ const useTheme = () => {
     }
     return context;
 };
+// Providers currently mirroring onto <html>, so a page with several (a Storybook docs page mounts one per
+// story) only loses the attribute when the last one unmounts.
+let documentThemeWriters = 0;
 const resolveSystemPreference = () => {
     if (typeof window === 'undefined')
         return 'light';
@@ -24,15 +27,20 @@ const resolveSystemPreference = () => {
 };
 /**
  * Provides light/dark/system theme context, persisted to `localStorage` and following the OS
- * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` so tokens
- * and the Tailwind `dark:` variant cascade, including inside CSS-scoped micro-frontends.
+ * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` (and
+ * `data-mfe-scope` when `scopeId` is set) so tokens and the Tailwind `dark:` variant cascade,
+ * including inside CSS-scoped micro-frontends.
  *
  * @summary light/dark/system theme provider carrying data-theme
  */
-const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
+const ThemeProvider = ({ children, defaultTheme = 'system', storageKey, themeModeOverride, scopeId: scopeIdProp, syncDocumentTheme: syncDocumentThemeProp, }) => {
+    // An empty scopeId is unset: it would stamp `data-mfe-scope=""` and switch the <html> mirror off for nothing.
+    const scopeId = scopeIdProp || undefined;
+    const syncDocumentTheme = syncDocumentThemeProp ?? (themeModeOverride === undefined && scopeId === undefined);
+    const resolvedStorageKey = storageKey ?? (scopeId ? `ui-theme:${scopeId}` : 'ui-theme');
     const [theme, setTheme] = React.useState(() => {
         if (typeof window !== 'undefined') {
-            const savedTheme = localStorage.getItem(storageKey);
+            const savedTheme = localStorage.getItem(resolvedStorageKey);
             return savedTheme || defaultTheme;
         }
         return defaultTheme;
@@ -41,24 +49,38 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
     const [themeRoot, setThemeRoot] = React.useState(null);
     const activeTheme = themeModeOverride ?? theme;
     const resolvedMode = activeTheme === 'system' ? systemPreference : activeTheme;
+    // The cleanup removes the attribute, so a host document is left as it was found when the mirror
+    // turns off or the provider unmounts.
     React.useEffect(() => {
+        if (!syncDocumentTheme)
+            return;
+        documentThemeWriters += 1;
         document.documentElement.setAttribute('data-theme', resolvedMode);
-        // Only persist the theme if it's not overridden
-        if (!themeModeOverride) {
-            if (activeTheme === 'system') {
-                localStorage.removeItem(storageKey);
-            }
-            else {
-                localStorage.setItem(storageKey, activeTheme);
-            }
+        return () => {
+            documentThemeWriters -= 1;
+            if (documentThemeWriters === 0)
+                document.documentElement.removeAttribute('data-theme');
+        };
+    }, [syncDocumentTheme, resolvedMode]);
+    // Only persist the theme if it's not overridden
+    React.useEffect(() => {
+        if (themeModeOverride)
+            return;
+        if (activeTheme === 'system') {
+            localStorage.removeItem(resolvedStorageKey);
+        }
+        else {
+            localStorage.setItem(resolvedStorageKey, activeTheme);
         }
+    }, [activeTheme, themeModeOverride, resolvedStorageKey]);
+    React.useEffect(() => {
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => setSystemPreference(mediaQuery.matches ? 'dark' : 'light');
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [resolvedMode, activeTheme, themeModeOverride, storageKey]);
+    }, []);
     const contextValue = React.useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, style: { display: 'contents' }, children: children }) }));
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
 };
 
 exports.ThemeProvider = ThemeProvider;

package/dist/providers/ThemeProvider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useState","useEffect","useMemo","_jsx"],"mappings":";;;;;AAcA,MAAM,YAAY,GAAGA,mBAAa,CAA+B,SAAS,CAAC;AAE3E;;;;;AAKG;AACI,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAqBD;;;;;;AAMG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,iBAAiB,EAAsB,KAAI;IACrI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;IAEhGC,eAAS,CAAC,MAAK;QACb,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;;QAGjE,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;AACL,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC;YAC/C;QACF;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE9D,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEC,cAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EAC7E,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useState","useEffect","useMemo","_jsx"],"mappings":";;;;;AAcA,MAAM,YAAY,GAAGA,mBAAa,CAA+B,SAAS,CAAC;AAE3E;;;;;AAKG;AACI,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA;AACA;AACA,IAAI,oBAAoB,GAAG,CAAC;AAE5B,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAkCD;;;;;;;AAOG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,UAAU,EACV,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAE,qBAAqB,GACrB,KAAI;;AAEvB,IAAA,MAAM,OAAO,GAAG,WAAW,IAAI,SAAS;AACxC,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,KAAK,iBAAiB,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC;AAC7G,IAAA,MAAM,kBAAkB,GAAG,UAAU,KAAK,OAAO,GAAG,CAAA,SAAA,EAAY,OAAO,CAAA,CAAE,GAAG,UAAU,CAAC;IAEvF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAiB;YAC3E,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;;;IAIhGC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,iBAAiB;YAAE;QACxB,oBAAoB,IAAI,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AACjE,QAAA,OAAO,MAAK;YACV,oBAAoB,IAAI,CAAC;YACzB,IAAI,oBAAoB,KAAK,CAAC;AAAE,gBAAA,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC;AACxF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;;IAGrCA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,iBAAiB;YAAE;AACvB,QAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,YAAA,YAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC;QAC7C;aAAO;AACL,YAAA,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,WAAW,CAAC;QACvD;IACF,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;IAExDA,eAAS,CAAC,MAAK;QACb,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEC,cAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAA,gBAAA,EAAkB,OAAO,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EACtG,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;;"}

package/dist/providers/ThemeProvider/index.d.ts

@@ -21,8 +21,9 @@ interface ThemeProviderProps {
      */
     defaultTheme?: Theme;
     /**
-     * The key to use to store the theme in localStorage
-     * @default "ui-theme"
+     * The key to use to store the theme in localStorage. With `scopeId` the default is namespaced so
+     * sibling MFEs on one host do not share a key; an explicit key is used as given.
+     * @default "ui-theme", or "ui-theme:<scopeId>" when `scopeId` is set
      */
     storageKey?: string;
     /**
@@ -30,14 +31,27 @@ interface ThemeProviderProps {
      * internal state and skips localStorage persistence — useful for controlled MFE's or tests.
      */
     themeModeOverride?: 'light' | 'dark';
+    /**
+     * Stamps `data-mfe-scope={scopeId}` on the themed root so a scoped CSS build
+     * (`[data-mfe-scope="sale-service"]`) matches this tree and nothing else on the page.
+     */
+    scopeId?: string;
+    /**
+     * Mirrors `data-theme` onto `<html>` as well as the themed root, and removes it again on unmount or
+     * when turned off. An embedded app must not mutate the host document, so this is off whenever
+     * `themeModeOverride` or `scopeId` is set.
+     * @default true when neither `themeModeOverride` nor `scopeId` is set
+     */
+    syncDocumentTheme?: boolean;
 }
 /**
  * Provides light/dark/system theme context, persisted to `localStorage` and following the OS
- * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` so tokens
- * and the Tailwind `dark:` variant cascade, including inside CSS-scoped micro-frontends.
+ * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` (and
+ * `data-mfe-scope` when `scopeId` is set) so tokens and the Tailwind `dark:` variant cascade,
+ * including inside CSS-scoped micro-frontends.
  *
  * @summary light/dark/system theme provider carrying data-theme
  */
-export declare const ThemeProvider: ({ children, defaultTheme, storageKey, themeModeOverride }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ children, defaultTheme, storageKey, themeModeOverride, scopeId: scopeIdProp, syncDocumentTheme: syncDocumentThemeProp, }: ThemeProviderProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/providers/ThemeProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAID;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAC;AAOF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACtC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,2DAAmF,kBAAkB,gCA0ClI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAID;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAC;AAWF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,4HAO3B,kBAAkB,gCA0DpB,CAAC"}

package/dist/providers/ThemeProvider/index.js

@@ -15,6 +15,9 @@ const useTheme = () => {
     }
     return context;
 };
+// Providers currently mirroring onto <html>, so a page with several (a Storybook docs page mounts one per
+// story) only loses the attribute when the last one unmounts.
+let documentThemeWriters = 0;
 const resolveSystemPreference = () => {
     if (typeof window === 'undefined')
         return 'light';
@@ -22,15 +25,20 @@ const resolveSystemPreference = () => {
 };
 /**
  * Provides light/dark/system theme context, persisted to `localStorage` and following the OS
- * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` so tokens
- * and the Tailwind `dark:` variant cascade, including inside CSS-scoped micro-frontends.
+ * when set to `system`. Renders a `display: contents` wrapper carrying `data-theme` (and
+ * `data-mfe-scope` when `scopeId` is set) so tokens and the Tailwind `dark:` variant cascade,
+ * including inside CSS-scoped micro-frontends.
  *
  * @summary light/dark/system theme provider carrying data-theme
  */
-const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
+const ThemeProvider = ({ children, defaultTheme = 'system', storageKey, themeModeOverride, scopeId: scopeIdProp, syncDocumentTheme: syncDocumentThemeProp, }) => {
+    // An empty scopeId is unset: it would stamp `data-mfe-scope=""` and switch the <html> mirror off for nothing.
+    const scopeId = scopeIdProp || undefined;
+    const syncDocumentTheme = syncDocumentThemeProp ?? (themeModeOverride === undefined && scopeId === undefined);
+    const resolvedStorageKey = storageKey ?? (scopeId ? `ui-theme:${scopeId}` : 'ui-theme');
     const [theme, setTheme] = useState(() => {
         if (typeof window !== 'undefined') {
-            const savedTheme = localStorage.getItem(storageKey);
+            const savedTheme = localStorage.getItem(resolvedStorageKey);
             return savedTheme || defaultTheme;
         }
         return defaultTheme;
@@ -39,24 +47,38 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
     const [themeRoot, setThemeRoot] = useState(null);
     const activeTheme = themeModeOverride ?? theme;
     const resolvedMode = activeTheme === 'system' ? systemPreference : activeTheme;
+    // The cleanup removes the attribute, so a host document is left as it was found when the mirror
+    // turns off or the provider unmounts.
     useEffect(() => {
+        if (!syncDocumentTheme)
+            return;
+        documentThemeWriters += 1;
         document.documentElement.setAttribute('data-theme', resolvedMode);
-        // Only persist the theme if it's not overridden
-        if (!themeModeOverride) {
-            if (activeTheme === 'system') {
-                localStorage.removeItem(storageKey);
-            }
-            else {
-                localStorage.setItem(storageKey, activeTheme);
-            }
+        return () => {
+            documentThemeWriters -= 1;
+            if (documentThemeWriters === 0)
+                document.documentElement.removeAttribute('data-theme');
+        };
+    }, [syncDocumentTheme, resolvedMode]);
+    // Only persist the theme if it's not overridden
+    useEffect(() => {
+        if (themeModeOverride)
+            return;
+        if (activeTheme === 'system') {
+            localStorage.removeItem(resolvedStorageKey);
+        }
+        else {
+            localStorage.setItem(resolvedStorageKey, activeTheme);
         }
+    }, [activeTheme, themeModeOverride, resolvedStorageKey]);
+    useEffect(() => {
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => setSystemPreference(mediaQuery.matches ? 'dark' : 'light');
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [resolvedMode, activeTheme, themeModeOverride, storageKey]);
+    }, []);
     const contextValue = useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
-    return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, style: { display: 'contents' }, children: children }) }));
+    return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
 };
 
 export { ThemeProvider, useTheme };