@studio-piot/native-ui 0.2.2 → 0.2.4

package/README.md

@@ -10,7 +10,7 @@ The package is the native counterpart of `@studio-piot/ui`. Apps own their palet
 npm install @studio-piot/native-ui
 ```
 
-`Select` peers `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler`, and `react-native-screens` (iOS `FullWindowOverlay` so the sheet appears above React Navigation modals). `Slider` peers `@react-native-community/slider`.
+`Select` peers `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler`, and `react-native-screens` (iOS `FullWindowOverlay` so the sheet appears above React Navigation modals). `SegmentedControl` uses that same `react-native-reanimated` peer to slide the selection fill. `Slider` peers `@react-native-community/slider`. `ErrorBanner` peers `react-native-svg` for the megaphone and row arrow.
 
 ## Docs
 
@@ -18,8 +18,10 @@ npm install @studio-piot/native-ui
 - [LinkBlocks usage](./docs/components/link-blocks.md)
 - [Field usage](./docs/components/field.md)
 - [Form usage](./docs/components/form.md)
+- [ErrorBanner usage](./docs/components/error-banner.md)
 - [RadioField usage](./docs/components/radio-field.md)
 - [Select usage](./docs/components/select.md)
+- [SegmentedControl usage](./docs/components/segmented-control.md)
 - [Slider usage](./docs/components/slider.md)
 - [Design: theme provider and Button](./docs/superpowers/specs/2026-09-24-theme-provider-button-design.md)
 - [Design: LinkBlocks](./docs/superpowers/specs/2026-09-24-link-blocks-design.md)

package/dist/components/ErrorBanner/ErrorBanner.d.ts

@@ -0,0 +1,8 @@
+import type { ErrorBannerProps } from "./types";
+/**
+ * Screen-wide field-error banner. Mount it once and drive `open` so the
+ * exit animation can play. It is not tied to a form shell: pass `errors`,
+ * `onJump`, and `onDismiss`. `Form` does that by default.
+ */
+export declare function ErrorBanner({ open, errors, onJump, onDismiss, onHeightChange, safeAreaTop, paddingHorizontal, backgroundColor: backgroundColorProp, textColor: textColorProp, secondaryColor: secondaryColorProp, dividerColor: dividerColorProp, accentColor: accentColorProp, }: ErrorBannerProps): import("react").JSX.Element;
+//# sourceMappingURL=ErrorBanner.d.ts.map

package/dist/components/ErrorBanner/ErrorBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBanner.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/ErrorBanner.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,WAAW,EACX,iBAA2C,EAC3C,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,GAC7B,EAAE,gBAAgB,+BAuIlB"}

package/dist/components/ErrorBanner/ErrorBanner.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBanner = ErrorBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const buttonRadius_1 = require("../Button/buttonRadius");
+const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
+const screenPadding_1 = require("../../layout/screenPadding");
+const errorBannerCopy_1 = require("./errorBannerCopy");
+const errorBannerThemeRoles_1 = require("./errorBannerThemeRoles");
+const icons_1 = require("./icons");
+const BOTTOM_RADIUS = (0, buttonRadius_1.buttonRadiusValue)("xl");
+/**
+ * Screen-wide field-error banner. Mount it once and drive `open` so the
+ * exit animation can play. It is not tied to a form shell: pass `errors`,
+ * `onJump`, and `onDismiss`. `Form` does that by default.
+ */
+function ErrorBanner({ open, errors, onJump, onDismiss, onHeightChange, safeAreaTop, paddingHorizontal = screenPadding_1.screenPaddingHorizontal, backgroundColor: backgroundColorProp, textColor: textColorProp, secondaryColor: secondaryColorProp, dividerColor: dividerColorProp, accentColor: accentColorProp, }) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const topInset = safeAreaTop ?? insets.top;
+    const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, errorBannerThemeRoles_1.ERROR_BANNER_THEME_ROLES.backgroundColor);
+    const textColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(textColorProp, errorBannerThemeRoles_1.ERROR_BANNER_THEME_ROLES.textColor);
+    const secondaryColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(secondaryColorProp, errorBannerThemeRoles_1.ERROR_BANNER_THEME_ROLES.secondaryColor);
+    const dividerColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(dividerColorProp, errorBannerThemeRoles_1.ERROR_BANNER_THEME_ROLES.dividerColor);
+    const accentColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(accentColorProp, errorBannerThemeRoles_1.ERROR_BANNER_THEME_ROLES.accentColor);
+    const [height, setHeight] = (0, react_1.useState)(400);
+    const [reduceMotion, setReduceMotion] = (0, react_1.useState)(false);
+    const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const count = errors.length;
+    const title = (0, errorBannerCopy_1.errorBannerTitle)(count);
+    const titleRef = (0, react_1.useRef)(title);
+    titleRef.current = title;
+    (0, react_1.useEffect)(() => {
+        react_native_1.AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(progress, {
+            toValue: open ? 1 : 0,
+            duration: reduceMotion ? 120 : open ? 260 : 200,
+            easing: react_native_1.Easing.bezier(0.16, 1, 0.3, 1),
+            useNativeDriver: true,
+        }).start();
+        if (open) {
+            react_native_1.AccessibilityInfo.announceForAccessibility(titleRef.current);
+        }
+    }, [open, progress, reduceMotion]);
+    const motion = reduceMotion
+        ? { opacity: progress }
+        : {
+            transform: [
+                {
+                    translateY: progress.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [-(height + 24), 0],
+                    }),
+                },
+            ],
+        };
+    const onLayout = (event) => {
+        const next = Math.round(event.nativeEvent.layout.height);
+        setHeight((current) => (current === next ? current : next));
+        onHeightChange?.(next);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [open ? (0, jsx_runtime_1.jsx)(react_native_1.StatusBar, { animated: true, barStyle: "light-content" }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { accessibilityRole: "alert", accessibilityElementsHidden: !open, importantForAccessibility: open ? "auto" : "no-hide-descendants", onLayout: onLayout, pointerEvents: open ? "auto" : "none", style: [
+                    styles.banner,
+                    {
+                        backgroundColor,
+                        paddingTop: topInset + 8,
+                        paddingHorizontal,
+                        borderBottomLeftRadius: BOTTOM_RADIUS,
+                        borderBottomRightRadius: BOTTOM_RADIUS,
+                    },
+                    motion,
+                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.iconDisc, { backgroundColor: accentColor }], children: (0, jsx_runtime_1.jsx)(icons_1.Megaphone, { color: backgroundColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: textColor }], children: title }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", hitSlop: 12, onPress: onDismiss, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.dismiss, { color: secondaryColor }], children: "\u2715" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.rows, children: errors.map((error) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityLabel: `${error.short}. Go to field.`, accessibilityRole: "button", hitSlop: { top: 4, bottom: 4 }, onPress: () => onJump(error.field), style: ({ pressed }) => [
+                                styles.row,
+                                { borderTopColor: dividerColor },
+                                pressed && styles.pressed,
+                            ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.rowLabel, { color: textColor }], children: error.short }), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowRight, { color: secondaryColor }) })] }, error.field))) })] })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    banner: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 100,
+        paddingBottom: 10,
+        shadowColor: "#22201D",
+        shadowOpacity: 0.25,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 12,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+    },
+    iconDisc: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    title: {
+        flex: 1,
+        fontSize: 15,
+        lineHeight: 20,
+        fontWeight: "600",
+    },
+    dismiss: {
+        fontSize: 15,
+    },
+    rows: {
+        marginTop: 6,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        minHeight: 36,
+        marginLeft: 38,
+        borderTopWidth: 1,
+    },
+    pressed: {
+        opacity: 0.6,
+    },
+    rowLabel: {
+        flex: 1,
+        fontSize: 15,
+        lineHeight: 20,
+    },
+});
+//# sourceMappingURL=ErrorBanner.js.map

package/dist/components/ErrorBanner/ErrorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBanner.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/ErrorBanner.tsx"],"names":[],"mappings":"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"}

package/dist/components/ErrorBanner/errorBannerContext.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode, type RefObject } from "react";
+import { View, type ScrollView } from "react-native";
+import type { FieldError } from "./types";
+export type ErrorBannerAnchor = {
+    view: View;
+    focus?: () => void;
+};
+type ErrorBannerContextValue = {
+    errors: readonly FieldError[];
+    register: (field: string, anchor: ErrorBannerAnchor | null) => void;
+    dismiss: () => void;
+    jump: (field: string) => void;
+};
+export declare function useErrorBannerContext(): ErrorBannerContextValue | null;
+export declare function useErrorBannerDismiss(): () => void;
+/**
+ * Registers a field so a banner row can scroll it into view.
+ * No-ops outside `ErrorBannerProvider` (and `Form`, which provides one).
+ */
+export declare function useErrorBannerField(name: string | undefined, focus?: () => void): {
+    viewRef: RefObject<View | null>;
+    listed: FieldError | undefined;
+};
+export declare function ErrorBannerProvider({ children, scrollRef, errors, onDismiss, bannerHeightRef, }: {
+    children: ReactNode;
+    scrollRef: RefObject<ScrollView | null>;
+    errors: readonly FieldError[];
+    onDismiss: () => void;
+    bannerHeightRef: RefObject<number>;
+}): import("react").JSX.Element;
+export declare function ErrorBannerField({ name, children, }: {
+    name: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=errorBannerContext.d.ts.map

package/dist/components/ErrorBanner/errorBannerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBannerContext.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/errorBannerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAA2B,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACpE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAIF,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE;AAED,wBAAgB,qBAAqB,IAAI,MAAM,IAAI,CAGlD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,CAAC,EAAE,MAAM,IAAI;;;EA2BnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,eAAe,GAChB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACpC,+BAwCA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAOA"}

package/dist/components/ErrorBanner/errorBannerContext.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useErrorBannerContext = useErrorBannerContext;
+exports.useErrorBannerDismiss = useErrorBannerDismiss;
+exports.useErrorBannerField = useErrorBannerField;
+exports.ErrorBannerProvider = ErrorBannerProvider;
+exports.ErrorBannerField = ErrorBannerField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const errorBannerCopy_1 = require("./errorBannerCopy");
+const ErrorBannerContext = (0, react_1.createContext)(null);
+function useErrorBannerContext() {
+    return (0, react_1.useContext)(ErrorBannerContext);
+}
+function useErrorBannerDismiss() {
+    const ctx = (0, react_1.useContext)(ErrorBannerContext);
+    return ctx?.dismiss ?? (() => undefined);
+}
+/**
+ * Registers a field so a banner row can scroll it into view.
+ * No-ops outside `ErrorBannerProvider` (and `Form`, which provides one).
+ */
+function useErrorBannerField(name, focus) {
+    const ctx = (0, react_1.useContext)(ErrorBannerContext);
+    const viewRef = (0, react_1.useRef)(null);
+    const focusRef = (0, react_1.useRef)(focus);
+    focusRef.current = focus;
+    (0, react_1.useEffect)(() => {
+        if (!name || !ctx) {
+            return;
+        }
+        const view = viewRef.current;
+        if (!view) {
+            return;
+        }
+        ctx.register(name, {
+            view,
+            focus: () => focusRef.current?.(),
+        });
+        return () => ctx.register(name, null);
+    }, [ctx, name]);
+    const listed = name
+        ? ctx?.errors.find((error) => error.field === name)
+        : undefined;
+    return { viewRef, listed };
+}
+function ErrorBannerProvider({ children, scrollRef, errors, onDismiss, bannerHeightRef, }) {
+    const anchors = (0, react_1.useRef)(new Map());
+    const register = (0, react_1.useCallback)((field, anchor) => {
+        if (!anchor) {
+            anchors.current.delete(field);
+            return;
+        }
+        anchors.current.set(field, anchor);
+    }, []);
+    const jump = (0, react_1.useCallback)((field) => {
+        const anchor = anchors.current.get(field);
+        const scroll = scrollRef.current;
+        if (!anchor || !scroll) {
+            return;
+        }
+        anchor.view.measureLayout(scroll, (_x, y) => {
+            scroll.scrollTo({
+                y: (0, errorBannerCopy_1.fieldScrollY)(y, bannerHeightRef.current ?? 0),
+                animated: true,
+            });
+            anchor.focus?.();
+        }, () => undefined);
+    }, [bannerHeightRef, scrollRef]);
+    const value = (0, react_1.useMemo)(() => ({ errors, register, dismiss: onDismiss, jump }), [errors, jump, onDismiss, register]);
+    return ((0, jsx_runtime_1.jsx)(ErrorBannerContext.Provider, { value: value, children: children }));
+}
+function ErrorBannerField({ name, children, }) {
+    const { viewRef } = useErrorBannerField(name);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: viewRef, collapsable: false, children: children }));
+}
+//# sourceMappingURL=errorBannerContext.js.map

package/dist/components/ErrorBanner/errorBannerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBannerContext.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/errorBannerContext.tsx"],"names":[],"mappings":"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"}

package/dist/components/ErrorBanner/errorBannerCopy.d.ts

@@ -0,0 +1,7 @@
+/** Gap kept between the banner and a field scrolled into view. */
+export declare const ERROR_BANNER_SCROLL_GAP = 16;
+export declare function errorBannerTitle(count: number): string;
+export declare function errorBannerOpen(errorCount: number, dismissed: boolean): boolean;
+/** Content y that places the field just below the banner. */
+export declare function fieldScrollY(fieldY: number, bannerHeight: number, gap?: number): number;
+//# sourceMappingURL=errorBannerCopy.d.ts.map

package/dist/components/ErrorBanner/errorBannerCopy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBannerCopy.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/errorBannerCopy.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAE1C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKtD;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,CAE/E;AAED,6DAA6D;AAC7D,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,GAAG,SAA0B,GAC5B,MAAM,CAER"}

package/dist/components/ErrorBanner/errorBannerCopy.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ERROR_BANNER_SCROLL_GAP = void 0;
+exports.errorBannerTitle = errorBannerTitle;
+exports.errorBannerOpen = errorBannerOpen;
+exports.fieldScrollY = fieldScrollY;
+/** Gap kept between the banner and a field scrolled into view. */
+exports.ERROR_BANNER_SCROLL_GAP = 16;
+function errorBannerTitle(count) {
+    if (count === 1) {
+        return "Nearly there. One thing to review";
+    }
+    return `Nearly there. ${count} things to review`;
+}
+function errorBannerOpen(errorCount, dismissed) {
+    return errorCount > 0 && !dismissed;
+}
+/** Content y that places the field just below the banner. */
+function fieldScrollY(fieldY, bannerHeight, gap = exports.ERROR_BANNER_SCROLL_GAP) {
+    return Math.max(0, fieldY - bannerHeight - gap);
+}
+//# sourceMappingURL=errorBannerCopy.js.map

package/dist/components/ErrorBanner/errorBannerCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBannerCopy.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/errorBannerCopy.ts"],"names":[],"mappings":";;;AAGA,4CAKC;AAED,0CAEC;AAGD,oCAMC;AArBD,kEAAkE;AACrD,QAAA,uBAAuB,GAAG,EAAE,CAAC;AAE1C,SAAgB,gBAAgB,CAAC,KAAa;IAC5C,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,OAAO,mCAAmC,CAAC;IAC7C,CAAC;IACD,OAAO,iBAAiB,KAAK,mBAAmB,CAAC;AACnD,CAAC;AAED,SAAgB,eAAe,CAAC,UAAkB,EAAE,SAAkB;IACpE,OAAO,UAAU,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;AACtC,CAAC;AAED,6DAA6D;AAC7D,SAAgB,YAAY,CAC1B,MAAc,EACd,YAAoB,EACpB,GAAG,GAAG,+BAAuB;IAE7B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,GAAG,CAAC,CAAC;AAClD,CAAC"}

package/dist/components/ErrorBanner/errorBannerThemeRoles.d.ts

@@ -0,0 +1,9 @@
+export declare const ERROR_BANNER_THEME_ROLES: {
+    readonly backgroundColor: "errorBannerBackground";
+    readonly textColor: "errorBannerText";
+    readonly secondaryColor: "errorBannerSecondary";
+    readonly dividerColor: "errorBannerDivider";
+    readonly accentColor: "errorBannerAccent";
+};
+export type ErrorBannerThemeColorProp = keyof typeof ERROR_BANNER_THEME_ROLES;
+//# sourceMappingURL=errorBannerThemeRoles.d.ts.map

package/dist/components/ErrorBanner/errorBannerThemeRoles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBannerThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/errorBannerThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,wBAAwB,CAAC"}

package/dist/components/ErrorBanner/errorBannerThemeRoles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ERROR_BANNER_THEME_ROLES = void 0;
+exports.ERROR_BANNER_THEME_ROLES = {
+    backgroundColor: "errorBannerBackground",
+    textColor: "errorBannerText",
+    secondaryColor: "errorBannerSecondary",
+    dividerColor: "errorBannerDivider",
+    accentColor: "errorBannerAccent",
+};
+//# sourceMappingURL=errorBannerThemeRoles.js.map

package/dist/components/ErrorBanner/errorBannerThemeRoles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBannerThemeRoles.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/errorBannerThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,wBAAwB,GAAG;IACtC,eAAe,EAAE,uBAAuB;IACxC,SAAS,EAAE,iBAAiB;IAC5B,cAAc,EAAE,sBAAsB;IACtC,YAAY,EAAE,oBAAoB;IAClC,WAAW,EAAE,mBAAmB;CACxB,CAAC"}

package/dist/components/ErrorBanner/icons.d.ts

@@ -0,0 +1,7 @@
+export declare function Megaphone({ color }: {
+    color: string;
+}): import("react").JSX.Element;
+export declare function ArrowRight({ color }: {
+    color: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/ErrorBanner/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/icons.tsx"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAiBrD;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAgBtD"}

package/dist/components/ErrorBanner/icons.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Megaphone = Megaphone;
+exports.ArrowRight = ArrowRight;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+function Megaphone({ color }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.8, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" }) }));
+}
+function ArrowRight({ color }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: 5, y1: 12, x2: 19, y2: 12 }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Polyline, { points: "13 6 19 12 13 18" })] }));
+}
+//# sourceMappingURL=icons.js.map

package/dist/components/ErrorBanner/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/icons.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,8BAiBC;AAED,gCAgBC;;AArCD,qEAA6D;AAE7D,SAAgB,SAAS,CAAC,EAAE,KAAK,EAAqB;IACpD,OAAO,CACL,uBAAC,0BAAG,IACF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,WAAW,EAAE,GAAG,YAEhB,uBAAC,uBAAI,IACH,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6mBAA6mB,GAC/mB,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAgB,UAAU,CAAC,EAAE,KAAK,EAAqB;IACrD,OAAO,CACL,wBAAC,0BAAG,IACF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,WAAW,EAAE,IAAI,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,uBAAC,uBAAI,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAI,EACvC,uBAAC,2BAAQ,IAAC,MAAM,EAAC,kBAAkB,GAAG,IAClC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/ErrorBanner/index.d.ts

@@ -0,0 +1,6 @@
+export { ErrorBanner } from "./ErrorBanner";
+export { ErrorBannerField, ErrorBannerProvider, useErrorBannerContext, useErrorBannerDismiss, useErrorBannerField, } from "./errorBannerContext";
+export { ERROR_BANNER_THEME_ROLES, type ErrorBannerThemeColorProp, } from "./errorBannerThemeRoles";
+export { useErrorBanner } from "./useErrorBanner";
+export type { ErrorBannerProps, FieldError } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ErrorBanner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,wBAAwB,EACxB,KAAK,yBAAyB,GAC/B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/ErrorBanner/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useErrorBanner = exports.ERROR_BANNER_THEME_ROLES = exports.useErrorBannerField = exports.useErrorBannerDismiss = exports.useErrorBannerContext = exports.ErrorBannerProvider = exports.ErrorBannerField = exports.ErrorBanner = void 0;
+var ErrorBanner_1 = require("./ErrorBanner");
+Object.defineProperty(exports, "ErrorBanner", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBanner; } });
+var errorBannerContext_1 = require("./errorBannerContext");
+Object.defineProperty(exports, "ErrorBannerField", { enumerable: true, get: function () { return errorBannerContext_1.ErrorBannerField; } });
+Object.defineProperty(exports, "ErrorBannerProvider", { enumerable: true, get: function () { return errorBannerContext_1.ErrorBannerProvider; } });
+Object.defineProperty(exports, "useErrorBannerContext", { enumerable: true, get: function () { return errorBannerContext_1.useErrorBannerContext; } });
+Object.defineProperty(exports, "useErrorBannerDismiss", { enumerable: true, get: function () { return errorBannerContext_1.useErrorBannerDismiss; } });
+Object.defineProperty(exports, "useErrorBannerField", { enumerable: true, get: function () { return errorBannerContext_1.useErrorBannerField; } });
+var errorBannerThemeRoles_1 = require("./errorBannerThemeRoles");
+Object.defineProperty(exports, "ERROR_BANNER_THEME_ROLES", { enumerable: true, get: function () { return errorBannerThemeRoles_1.ERROR_BANNER_THEME_ROLES; } });
+var useErrorBanner_1 = require("./useErrorBanner");
+Object.defineProperty(exports, "useErrorBanner", { enumerable: true, get: function () { return useErrorBanner_1.useErrorBanner; } });
+//# sourceMappingURL=index.js.map

package/dist/components/ErrorBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,2DAM8B;AAL5B,sHAAA,gBAAgB,OAAA;AAChB,yHAAA,mBAAmB,OAAA;AACnB,2HAAA,qBAAqB,OAAA;AACrB,2HAAA,qBAAqB,OAAA;AACrB,yHAAA,mBAAmB,OAAA;AAErB,iEAGiC;AAF/B,iIAAA,wBAAwB,OAAA;AAG1B,mDAAkD;AAAzC,gHAAA,cAAc,OAAA"}

package/dist/components/ErrorBanner/types.d.ts

@@ -0,0 +1,31 @@
+export type FieldError = {
+    /** Matches the field `name`. */
+    field: string;
+    /** Banner row, about 40 characters. */
+    short: string;
+    /** Fuller sentence for the field's accessibility hint. */
+    message: string;
+};
+export type ErrorBannerProps = {
+    open: boolean;
+    errors: readonly FieldError[];
+    /** Scroll the field into view. The banner stays open until dismiss or an edit. */
+    onJump: (field: string) => void;
+    onDismiss: () => void;
+    /** Reported so the host can scroll the field clear of the banner. */
+    onHeightChange?: (height: number) => void;
+    /** Override `useSafeAreaInsets().top`. */
+    safeAreaTop?: number;
+    paddingHorizontal?: number;
+    /** Defaults to theme role `errorBannerBackground`. */
+    backgroundColor?: string;
+    /** Defaults to theme role `errorBannerText`. */
+    textColor?: string;
+    /** Defaults to theme role `errorBannerSecondary`. Dismiss and arrows. */
+    secondaryColor?: string;
+    /** Defaults to theme role `errorBannerDivider`. */
+    dividerColor?: string;
+    /** Defaults to theme role `errorBannerAccent`. Megaphone disc. */
+    accentColor?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ErrorBanner/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,kFAAkF;IAClF,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/ErrorBanner/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/ErrorBanner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/types.ts"],"names":[],"mappings":""}

package/dist/components/ErrorBanner/useErrorBanner.d.ts

@@ -0,0 +1,13 @@
+import type { FieldError } from "./types";
+/**
+ * Open / dismiss state for a field-error banner.
+ * Call `present` when the runner submits. Call `dismiss` when they close it
+ * or edit the form. A cleared error list resets dismiss so the next failure
+ * can show the banner again.
+ */
+export declare function useErrorBanner(errors: readonly FieldError[]): {
+    open: boolean;
+    dismiss: () => void;
+    present: () => void;
+};
+//# sourceMappingURL=useErrorBanner.d.ts.map

package/dist/components/ErrorBanner/useErrorBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorBanner.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/useErrorBanner.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE;;;;EAsB3D"}

package/dist/components/ErrorBanner/useErrorBanner.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useErrorBanner = useErrorBanner;
+const react_1 = require("react");
+const errorBannerCopy_1 = require("./errorBannerCopy");
+/**
+ * Open / dismiss state for a field-error banner.
+ * Call `present` when the runner submits. Call `dismiss` when they close it
+ * or edit the form. A cleared error list resets dismiss so the next failure
+ * can show the banner again.
+ */
+function useErrorBanner(errors) {
+    const [dismissed, setDismissed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (errors.length === 0) {
+            setDismissed(false);
+        }
+    }, [errors.length]);
+    const dismiss = (0, react_1.useCallback)(() => {
+        setDismissed(true);
+    }, []);
+    const present = (0, react_1.useCallback)(() => {
+        setDismissed(false);
+    }, []);
+    return {
+        open: (0, errorBannerCopy_1.errorBannerOpen)(errors.length, dismissed),
+        dismiss,
+        present,
+    };
+}
+//# sourceMappingURL=useErrorBanner.js.map

package/dist/components/ErrorBanner/useErrorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorBanner.js","sourceRoot":"","sources":["../../../src/components/ErrorBanner/useErrorBanner.ts"],"names":[],"mappings":";;AAUA,wCAsBC;AAhCD,iCAAyD;AACzD,uDAAoD;AAGpD;;;;;GAKG;AACH,SAAgB,cAAc,CAAC,MAA6B;IAC1D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpB,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI,EAAE,IAAA,iCAAe,EAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;QAC/C,OAAO;QACP,OAAO;KACR,CAAC;AACJ,CAAC"}

package/dist/components/Field/fieldChrome.d.ts

@@ -6,5 +6,5 @@ export type FieldChromeProps = FieldSharedProps & {
     minHeight?: number;
     textAlignVertical?: TextInputProps["textAlignVertical"];
 };
-export declare function FieldChrome({ value, onChangeText, borderColor: borderColorProp, focusedBorderColor: focusedBorderColorProp, errorColor: errorColorProp, textColor: textColorProp, labelColor: labelColorProp, placeholderColor: placeholderColorProp, backgroundColor: backgroundColorProp, label, description, error, placeholder, radius, editable, clearIcon, onClear, style, inputStyle, multiline, numberOfLines, minHeight, textAlignVertical, secureTextEntry, keyboardType, autoCapitalize, autoComplete, textContentType, onFocus, onBlur, ref, }: FieldChromeProps): import("react").JSX.Element;
+export declare function FieldChrome({ name, value, onChangeText, borderColor: borderColorProp, focusedBorderColor: focusedBorderColorProp, errorColor: errorColorProp, textColor: textColorProp, labelColor: labelColorProp, placeholderColor: placeholderColorProp, backgroundColor: backgroundColorProp, label, description, error, placeholder, radius, editable, clearIcon, onClear, style, inputStyle, multiline, numberOfLines, minHeight, textAlignVertical, secureTextEntry, keyboardType, autoCapitalize, autoComplete, textContentType, onFocus, onBlur, ref, }: FieldChromeProps): import("react").JSX.Element;
 //# sourceMappingURL=fieldChrome.d.ts.map

package/dist/components/Field/fieldChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldChrome.d.ts","sourceRoot":"","sources":["../../../src/components/Field/fieldChrome.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAOtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;CACzD,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,kBAAkB,EAAE,sBAAsB,EAC1C,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,eAAe,EAAE,mBAAmB,EACpC,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,MAAa,EACb,QAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,SAAiB,EACjB,aAAa,EACb,SAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,eAAe,EACf,OAAO,EACP,MAAM,EACN,GAAG,GACJ,EAAE,gBAAgB,+BAyHlB"}
+{"version":3,"file":"fieldChrome.d.ts","sourceRoot":"","sources":["../../../src/components/Field/fieldChrome.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAWtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;CACzD,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,kBAAkB,EAAE,sBAAsB,EAC1C,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,eAAe,EAAE,mBAAmB,EACpC,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,MAAa,EACb,QAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,SAAiB,EACjB,aAAa,EACb,SAAc,EACd,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,eAAe,EACf,OAAO,EACP,MAAM,EACN,GAAG,GACJ,EAAE,gBAAgB,+BA8IlB"}