@swan-io/lake 1.4.3 → 1.5.0

package/src/components/LakeSelect.d.ts

@@ -22,9 +22,9 @@ export type SelectProps<V> = {
     value?: V;
     onValueChange: (value: V) => void;
     hideErrors?: boolean;
-    nativeID?: string;
+    id?: string;
     error?: string;
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, nativeID, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): JSX.Element;
+export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): JSX.Element;

package/src/components/LakeSelect.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
 import { FlatList, StyleSheet, View, } from "react-native";
-import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -104,7 +103,7 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[500],
     },
 });
-export function LakeSelect({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, nativeID, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }) {
+export function LakeSelect({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }) {
     const inputRef = useRef(null);
     const listRef = useRef(null);
     const typingTimeoutRef = useRef(undefined);
@@ -140,7 +139,7 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
         }, 300);
     }, [items, onValueChange, visible]);
     const name = itemValue?.name ?? value;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { nativeID: nativeID, ref: inputRef, accessibilityHasPopup: "listbox", accessibilityRole: "button", accessibilityExpanded: visible, disabled: readOnly || disabled, style: ({ focused }) => [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused }) => [
                     mode === "normal" ? styles.normal : styles.borderless,
                     size === "small" && styles.small,
                     (disabled || readOnly) && styles.inputDisabled,
@@ -149,36 +148,28 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
                     mode !== "borderless" && error != null && styles.errorContainer,
                     (disabled || readOnly) && mode === "borderless" && styles.inputBorderlessDisabled,
                     style,
-                ], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: name })] })) : (_jsx(LakeText, { style: [
+                ], onPress: toggle, onKeyDown: onKeyDown, "aria-errormessage": error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: name })] })) : (_jsx(LakeText, { style: [
                                                 styles.itemText,
                                                 styles.selectPlaceholder,
                                                 isSmall && styles.selectSmallPlaceholder,
-                                            ], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
-                            match(e.nativeEvent.key)
-                                .with("ArrowDown", () => {
-                                e.preventDefault();
-                                if (isNotNullish(e.currentTarget)) {
-                                    const focusableElements = getFocusableElements(e.currentTarget);
-                                    const current = focusableElements.indexOf(e.target);
-                                    focusableElements[current + 1]?.focus();
+                                            ], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
+                            const { key } = event.nativeEvent;
+                            if (key === "ArrowDown" || key === "ArrowUp") {
+                                event.preventDefault();
+                                if (isNotNullish(event.currentTarget)) {
+                                    const focusableElements = getFocusableElements(event.currentTarget);
+                                    const current = focusableElements.indexOf(event.target);
+                                    const nextIndex = key === "ArrowDown" ? current + 1 : current - 1;
+                                    focusableElements[nextIndex]?.focus();
                                 }
-                            })
-                                .with("ArrowUp", () => {
-                                e.preventDefault();
-                                if (isNotNullish(e.currentTarget)) {
-                                    const focusableElements = getFocusableElements(e.currentTarget);
-                                    const current = focusableElements.indexOf(e.target);
-                                    focusableElements[current - 1]?.focus();
-                                }
-                            })
-                                .otherwise(() => { });
+                            }
                         }, keyExtractor: (_, index) => `select-item-${index}`, renderItem: ({ item, index }) => {
                             const isSelected = value === item.value;
                             return (_jsxs(Pressable, { ref: element => (listItemRefs.current[index] = element), onKeyDown: onKeyDown, style: ({ hovered, focused }) => [
                                     styles.item,
                                     (hovered || isSelected) && styles.itemHighlighted,
                                     focused && styles.itemFocused,
-                                ], accessibilityRole: "option", accessibilitySelected: true, onPress: () => {
+                                ], role: "option", "aria-selected": true, onPress: () => {
                                     onValueChange(item.value);
                                     close();
                                 }, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name }), _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));

package/src/components/LakeSlider.js

@@ -27,5 +27,5 @@ export const LakeSlider = ({ label, value, min, max, step, unit, onChange }) =>
         setDirtyValue(String(cleanValue));
         onChange(cleanValue);
     }, [min, max, dirtyValue, onChange]);
-    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, keyboardType: "decimal-pad" }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: event => onChange(Number(event.target.value)), style: { backgroundSize: `${((value - min) / (max - min)) * 100}% 100%` } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, keyboardType: "decimal-pad" })) })) })) }));
+    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal" }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: event => onChange(Number(event.target.value)), style: { backgroundSize: `${((value - min) / (max - min)) * 100}% 100%` } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal" })) })) })) }));
 };

package/src/components/LakeStepper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Option } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { StyleSheet, View } from "react-native";
-import { match, P } from "ts-pattern";
+import { P, match } from "ts-pattern";
 import { colors } from "../constants/design";
 import { Box } from "./Box";
 import { Grid } from "./Grid";
@@ -23,23 +23,23 @@ const styles = StyleSheet.create({
         backgroundColor: colors.gray[100],
         overflow: "hidden",
         transformOrigin: "bottom",
-        transform: [{ scaleY: 0.5 }],
+        transform: "scaleY(0.5)",
         transitionDuration: "300ms",
         transitionProperty: "transform",
     },
     barActive: {
-        transform: [{ scaleY: 1 }],
+        transform: "scaleY(1)",
     },
     progressBar: {
         width: "100%",
         height: "100%",
         backgroundColor: colors.current[500],
         transformOrigin: "left",
-        transform: [{ scaleX: 0 }],
+        transform: "scaleX(0)",
         transitionDuration: "300ms",
     },
     progressBarDone: {
-        transform: [{ scaleX: 1 }],
+        transform: "scaleX(1)",
     },
     progressBarError: {
         backgroundColor: colors.negative[500],

package/src/components/LakeText.d.ts

@@ -1,19 +1,20 @@
 import { ReactNode } from "react";
-import { Text, TextProps } from "react-native";
+import { Text, TextProps, TextStyle } from "react-native";
 declare const variants: {
-    semibold: import("react-native").TextStyle;
-    medium: import("react-native").TextStyle;
-    regular: import("react-native").TextStyle;
-    light: import("react-native").TextStyle;
-    smallSemibold: import("react-native").TextStyle;
-    smallMedium: import("react-native").TextStyle;
-    smallRegular: import("react-native").TextStyle;
+    semibold: TextStyle;
+    medium: TextStyle;
+    regular: TextStyle;
+    light: TextStyle;
+    smallSemibold: TextStyle;
+    smallMedium: TextStyle;
+    smallRegular: TextStyle;
 };
 export type TextVariant = keyof typeof variants;
 export declare const LakeText: import("react").ForwardRefExoticComponent<TextProps & {
     align?: "left" | "right" | "center" | undefined;
     children: ReactNode;
     color?: string | undefined;
+    userSelect?: TextStyle["userSelect"];
     variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 } & import("react").RefAttributes<Text>>;
 export {};

package/src/components/LakeText.js

@@ -17,4 +17,10 @@ const variants = StyleSheet.create({
     smallMedium: texts.smallMedium,
     smallRegular: texts.smallRegular,
 });
-export const LakeText = forwardRef(({ align = "left", children, color, style, variant = "regular", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [variants[variant], alignments[align], isNotNullish(color) && { color }, style], ...props, children: children })));
+export const LakeText = forwardRef(({ align = "left", children, color, style, userSelect, variant = "regular", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [
+        variants[variant],
+        alignments[align],
+        isNotNullish(color) && { color },
+        isNotNullish(userSelect) && { userSelect },
+        style,
+    ], ...props, children: children })));

package/src/components/LakeTextInput.d.ts

@@ -1,8 +1,11 @@
 import { ChangeEventHandler, ReactNode } from "react";
 import { TextInput, TextInputProps } from "react-native";
+import { Except } from "type-fest";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
-export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> & {
+export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardType" | "onChange"> & {
+    ariaExpanded?: boolean;
+    ariaControls?: string;
     error?: string;
     readOnly?: boolean;
     validating?: boolean;
@@ -12,7 +15,7 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
     multiline?: boolean;
     icon?: IconName;
     unit?: string;
-    keyboardType?: TextInputProps["keyboardType"];
+    inputMode?: TextInputProps["inputMode"];
     pattern?: string;
     children?: ReactNode;
     hideErrors?: boolean;
@@ -20,17 +23,19 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
     onChange?: ChangeEventHandler<HTMLInputElement>;
     maxCharCount?: number;
 };
-export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
+export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Except<TextInputProps, "editable" | "keyboardType" | "onChange"> & {
+    ariaExpanded?: boolean | undefined;
+    ariaControls?: string | undefined;
     error?: string | undefined;
     readOnly?: boolean | undefined;
     validating?: boolean | undefined;
     valid?: boolean | undefined;
     disabled?: boolean | undefined;
-    color?: "warning" | "current" | "gray" | "live" | "sandbox" | "positive" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
+    color?: "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
     multiline?: boolean | undefined;
-    icon?: "lake-calendar-arrow-swap" | "lake-card" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
+    icon?: "lake-calendar-arrow-swap" | "lake-card" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "arrow-upload-filled" | "arrow-upload-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
     unit?: string | undefined;
-    keyboardType?: TextInputProps["keyboardType"];
+    inputMode?: TextInputProps["inputMode"];
     pattern?: string | undefined;
     children?: ReactNode;
     hideErrors?: boolean | undefined;

package/src/components/LakeTextInput.js

@@ -84,13 +84,13 @@ const styles = StyleSheet.create({
         position: "absolute",
         right: spacings[16],
         top: "50%",
-        transform: [{ translateY: "-50%" }],
+        transform: "translateY(-50%)",
     },
     icon: {
         position: "absolute",
         left: spacings[16],
         top: "50%",
-        transform: [{ translateY: "-50%" }],
+        transform: "translateY(-50%)",
     },
     readOnlyEndIcon: {
         right: 0,
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
         paddingTop: spacings[4],
     },
 });
-export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, 
+export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, 
 //maxCharCount is different from maxLength(props inherited of TextInput), maxLength truncates the text in the limitation asked,
 //maxCharCount doesn't have limitation but displays a counter of characters
 maxCharCount, ...props }, forwardRef) => {
@@ -145,7 +145,7 @@ maxCharCount, ...props }, forwardRef) => {
     const isInteractive = !disabled && !readOnly;
     const hasError = isNotNullishOrEmpty(error);
     const charCount = isNullish(value) ? 0 : value.length;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, accessibilityErrorMessage: error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { keyboardType: keyboardType, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, editable: isInteractive, onChange: onChange, multiline: multiline, style: [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
                                             hasError && styles.error,
@@ -159,5 +159,5 @@ maxCharCount, ...props }, forwardRef) => {
                                             isFocused && styles.focused,
                                             isFocused && { borderColor: colors[color][500] },
                                             stylesFromProps,
-                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: styles.errorContainer, children: [_jsx(LakeText, { color: colors.negative[400], children: error ?? " " }), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
+                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: styles.errorContainer, children: [_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " }), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
 });

package/src/components/LakeTooltip.js

@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
         backgroundColor: colors.gray[900],
         borderWidth: 1,
         borderColor: colors.gray[900],
-        transform: [{ rotate: "45deg" }],
+        transform: "rotate(45deg)",
     },
     info: {
         flexGrow: 0,
@@ -163,7 +163,7 @@ export const LakeTooltip = memo(forwardRef(({ children, content, describedBy, ma
                             state?.placement === "bottom" && styles.baseBottom,
                             state?.placement === "right" && styles.baseRight,
                             state?.placement === "left" && styles.baseLeft,
-                        ], children: [_jsx(View, { style: [styles.content, { width, maxWidth: MAX_WIDTH }], children: isReactText(content) ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), !hideArrow && (_jsx(View, { accessibilityRole: "none", style: [
+                        ], children: [_jsx(View, { style: [styles.content, { width, maxWidth: MAX_WIDTH }], children: isReactText(content) ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), !hideArrow && (_jsx(View, { role: "none", style: [
                                     state?.placement === "right" || state?.placement === "left"
                                         ? styles.arrowContainerHorizontal
                                         : styles.arrowContainer,
@@ -172,16 +172,11 @@ export const LakeTooltip = memo(forwardRef(({ children, content, describedBy, ma
                                     state?.placement === "right" && styles.arrowContainerRight,
                                     state?.placement === "left" && styles.arrowContainerLeft,
                                     {
-                                        transform: [
-                                            { translateX: -overflowOffset },
-                                            {
-                                                rotate: match(state?.placement)
-                                                    .with("bottom", () => "180deg")
-                                                    .with("left", () => "-90deg")
-                                                    .with("right", () => "90deg")
-                                                    .otherwise(() => "0deg"),
-                                            },
-                                        ],
+                                        transform: `translateX(${-overflowOffset}px) rotate(${match(state?.placement)
+                                            .with("bottom", () => "180deg")
+                                            .with("left", () => "-90deg")
+                                            .with("right", () => "90deg")
+                                            .otherwise(() => "0deg")})`,
                                     },
                                 ], children: _jsx(View, { style: styles.arrow }) }))] }) }) }))] }));
 }));

package/src/components/Link.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { PressableTextProps } from "./Pressable";
 import { HrefAttrs, PressableStateCallbackType, Text, TextProps } from "react-native";
 import { Except } from "type-fest";
+import { PressableTextProps } from "./Pressable";
 export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPress" | "children"> & {
     to: string;
     replace?: boolean;
@@ -19,78 +19,81 @@ export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPr
 };
 export declare const Link: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<{
     testID?: string | undefined;
+    id?: string | undefined;
+    role?: import("react-native").WebRole | undefined;
     style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
+    tabIndex?: 0 | -1 | undefined;
     children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => import("react").ReactNode) | null | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
     nativeID?: string | undefined;
-    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
     onKeyDown?: ((event: import("react-native").NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
-    focusable?: boolean | undefined;
     accessible?: boolean | undefined;
     accessibilityActions?: readonly Readonly<{
         name: string;
         label?: string | undefined;
     }>[] | undefined;
     accessibilityLabel?: string | undefined;
+    "aria-label"?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
     accessibilityState?: import("react-native").AccessibilityState | undefined;
+    "aria-busy"?: boolean | undefined;
+    "aria-checked"?: boolean | "mixed" | undefined;
+    "aria-disabled"?: boolean | undefined;
+    "aria-expanded"?: boolean | undefined;
+    "aria-selected"?: boolean | undefined;
+    "aria-labelledby"?: string | undefined;
     accessibilityHint?: string | undefined;
     accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
     importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    "aria-hidden"?: boolean | undefined;
+    "aria-live"?: "polite" | "assertive" | "off" | undefined;
+    "aria-modal"?: boolean | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
     accessibilityElementsHidden?: boolean | undefined;
-    accessibilityLanguage?: string | undefined;
     accessibilityViewIsModal?: boolean | undefined;
     onAccessibilityEscape?: (() => void) | undefined;
     onAccessibilityTap?: (() => void) | undefined;
     onMagicTap?: (() => void) | undefined;
     accessibilityIgnoresInvertColors?: boolean | undefined;
-    accessibilityActiveDescendant?: string | undefined;
-    accessibilityAtomic?: boolean | undefined;
-    accessibilityAutoComplete?: string | undefined;
-    accessibilityBusy?: boolean | undefined;
-    accessibilityChecked?: boolean | "mixed" | undefined;
-    accessibilityColumnCount?: number | undefined;
-    accessibilityColumnIndex?: number | undefined;
-    accessibilityColumnSpan?: number | undefined;
-    accessibilityControls?: string | undefined;
-    accessibilityCurrent?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    accessibilityDescribedBy?: string | undefined;
-    accessibilityDetails?: string | undefined;
-    accessibilityDisabled?: boolean | undefined;
-    accessibilityErrorMessage?: string | undefined;
-    accessibilityExpanded?: boolean | undefined;
-    accessibilityFlowTo?: string | undefined;
-    accessibilityHasPopup?: string | undefined;
-    accessibilityHidden?: boolean | undefined;
-    accessibilityInvalid?: boolean | undefined;
-    accessibilityKeyShortcuts?: string[] | undefined;
-    accessibilityLevel?: number | undefined;
-    accessibilityModal?: boolean | undefined;
-    accessibilityMultiSelectable?: boolean | undefined;
-    accessibilityMultiline?: boolean | undefined;
-    accessibilityOrientation?: "horizontal" | "vertical" | undefined;
-    accessibilityOwns?: string | undefined;
-    accessibilityPlaceholder?: string | undefined;
-    accessibilityPosInSet?: number | undefined;
-    accessibilityPressed?: boolean | undefined;
-    accessibilityReadOnly?: boolean | undefined;
-    accessibilityRequired?: boolean | undefined;
-    accessibilityRoleDescription?: string | undefined;
-    accessibilityRowCount?: number | undefined;
-    accessibilityRowIndex?: number | undefined;
-    accessibilityRowSpan?: number | undefined;
-    accessibilitySelected?: boolean | undefined;
-    accessibilitySetSize?: number | undefined;
-    accessibilitySort?: "none" | "ascending" | "descending" | "other" | undefined;
-    accessibilityValueMax?: number | undefined;
-    accessibilityValueMin?: number | undefined;
-    accessibilityValueNow?: number | undefined;
-    accessibilityValueText?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: boolean | undefined;
+    "aria-autocomplete"?: string | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-haspopup"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-multiline"?: boolean | undefined;
+    "aria-multiselectable"?: boolean | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | undefined;
+    "aria-readonly"?: boolean | undefined;
+    "aria-required"?: boolean | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     allowFontScaling?: boolean | undefined;
-    ellipsizeMode?: "clip" | "head" | "middle" | "tail" | undefined;
-    lineBreakMode?: "clip" | "head" | "middle" | "tail" | undefined;
+    ellipsizeMode?: "clip" | "middle" | "head" | "tail" | undefined;
+    lineBreakMode?: "clip" | "middle" | "head" | "tail" | undefined;
     numberOfLines?: number | undefined;
     onTextLayout?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void) | undefined;
     onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

package/src/components/Link.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLinkProps } from "@swan-io/chicane";
-import { PressableText } from "./Pressable";
-import { isNotNullish } from "../utils/nullish";
 import { forwardRef, memo } from "react";
-export const Link = memo(forwardRef(({ accessibilityRole = "link", children, disabled = false, onPress, replace = false, download = false, style, target, to, ariaCurrentValue = "page", focusable, ...props }, forwardedRef) => {
+import { isNotNullish } from "../utils/nullish";
+import { PressableText } from "./Pressable";
+export const Link = memo(forwardRef(({ role = "link", children, disabled = false, onPress, replace = false, download = false, style, target, to, ariaCurrentValue = "page", tabIndex, ...props }, forwardedRef) => {
     const { active, onClick } = useLinkProps({ href: to, replace, target });
-    return (_jsx(PressableText, { ...props, accessibilityRole: accessibilityRole, accessibilityDisabled: disabled, focusable: isNotNullish(focusable) ? focusable : !disabled, accessibilityCurrent: active ? ariaCurrentValue : undefined, href: to, onPress: (event) => {
+    return (_jsx(PressableText, { ...props, role: role, "aria-disabled": disabled, tabIndex: isNotNullish(tabIndex) ? tabIndex : disabled ? -1 : 0, "aria-current": active ? ariaCurrentValue : undefined, href: to, onPress: (event) => {
             const e = event;
             if (disabled) {
                 e.preventDefault();

package/src/components/ListRightPanel.js

@@ -53,14 +53,14 @@ const ListRightPanel_ = forwardRef(({ items, keyExtractor, activeId, onActiveIdC
             .when(({ activeItemIndex, previousIndex }) => activeItemIndex > previousIndex, () => animations.fadeAndSlideInFromTop)
             .otherwise(() => null)
         : null;
-    return (_jsx(RightPanel, { ref: ref, visible: activeItem != null, onPressClose: onClose, children: ({ large }) => (_jsxs(View, { style: styles.details, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: large ? styles.contentLarge : styles.content, children: [_jsx(LakeButton, { mode: "tertiary", icon: "lake-close", accessibilityLabel: closeLabel, onPress: onClose }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", accessibilityLabel: previousLabel, icon: "arrow-left-regular", disabled: activeItemIndex === 0, onPress: () => {
+    return (_jsx(RightPanel, { ref: ref, visible: activeItem != null, onPressClose: onClose, children: ({ large }) => (_jsxs(View, { style: styles.details, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: large ? styles.contentLarge : styles.content, children: [_jsx(LakeButton, { mode: "tertiary", icon: "lake-close", ariaLabel: closeLabel, onPress: onClose }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", ariaLabel: previousLabel, icon: "arrow-left-regular", disabled: activeItemIndex === 0, onPress: () => {
                                         if (typeof activeItemIndex === "number") {
                                             Option.fromNullable(items[activeItemIndex - 1]).match({
                                                 Some: item => onActiveIdChange(keyExtractor(item)),
                                                 None: noop,
                                             });
                                         }
-                                    } }), _jsx(LakeButton, { mode: "tertiary", accessibilityLabel: nextLabel, icon: "arrow-right-regular", disabled: activeItemIndex === items.length - 1, onPress: () => {
+                                    } }), _jsx(LakeButton, { mode: "tertiary", ariaLabel: nextLabel, icon: "arrow-right-regular", disabled: activeItemIndex === items.length - 1, onPress: () => {
                                         if (typeof activeItemIndex === "number") {
                                             Option.fromNullable(items[activeItemIndex + 1]).match({
                                                 Some: item => onActiveIdChange(keyExtractor(item)),

package/src/components/Modal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, memo } from "react";
-import { Modal as BaseModal, Pressable, ScrollView, StyleSheet, TouchableOpacity, View, } from "react-native";
+import { Modal as BaseModal, Pressable, ScrollView, StyleSheet, View, } from "react-native";
 import { backgroundColor, colors, radii } from "../constants/design";
 import { useResponsive } from "../hooks/useResponsive";
 import { Box } from "./Box";
@@ -19,6 +19,7 @@ const styles = StyleSheet.create({
     },
     outbox: {
         margin: 16,
+        pointerEvents: "box-none",
         flexGrow: 1,
         flexShrink: 1,
     },
@@ -59,22 +60,31 @@ const styles = StyleSheet.create({
         paddingLeft: 40,
         paddingVertical: 32,
     },
-    dismissIcon: {
+    dismissButton: {
         padding: 20,
         right: 0,
+        transitionProperty: "opacity",
+        transitionDuration: "150ms",
     },
-    dismissIconDesktop: {
+    dismissButtonPressed: {
+        opacity: 0.5,
+    },
+    dismissButtonDesktop: {
         marginVertical: 12,
         marginRight: 20,
     },
 });
 export const Modal = memo(forwardRef(({ children, onDismiss, title = "", style, visible = false, wrapContent = false }, forwardedRef) => {
     const { desktop, media } = useResponsive();
-    return (_jsxs(BaseModal, { ref: forwardedRef, animationType: "fade", visible: visible, transparent: true, onDismiss: onDismiss, onRequestClose: onDismiss, children: [_jsx(Pressable, { accessibilityRole: "none", focusable: false, onPress: onDismiss, style: styles.blanket }), _jsx(View, { pointerEvents: "box-none", style: [styles.outbox, desktop && styles.desktopOutbox], children: _jsxs(View, { style: [
+    return (_jsxs(BaseModal, { ref: forwardedRef, animationType: "fade", visible: visible, transparent: true, onDismiss: onDismiss, onRequestClose: onDismiss, children: [_jsx(Pressable, { role: "none", tabIndex: -1, onPress: onDismiss, style: styles.blanket }), _jsx(View, { style: [styles.outbox, desktop && styles.desktopOutbox], children: _jsxs(View, { style: [
                         styles.modal,
                         desktop && styles.desktopModal,
                         wrapContent && styles.wrapped,
                         style,
-                    ], children: [_jsxs(Box, { direction: "row", accessibilityRole: "banner", alignItems: "center", children: [title !== "" ? (_jsx(Heading, { size: media({ mobile: 20, desktop: 24 }), level: 2, style: [styles.title, desktop && styles.titleHeader], children: title })) : (_jsx(Fill, {})), onDismiss && (_jsx(TouchableOpacity, { accessibilityRole: "button", activeOpacity: 0.5, style: [styles.dismissIcon, desktop && styles.dismissIconDesktop], onPress: onDismiss, children: _jsx(Icon, { name: "dismiss-filled", size: 18, color: colors.gray[500] }) }))] }), title !== "" && _jsx(Separator, {}), _jsx(ScrollView, { contentContainerStyle: desktop ? styles.contentDesktop : styles.content, children: children })] }) })] }));
+                    ], children: [_jsxs(Box, { direction: "row", role: "banner", alignItems: "center", children: [title !== "" ? (_jsx(Heading, { size: media({ mobile: 20, desktop: 24 }), level: 2, style: [styles.title, desktop && styles.titleHeader], children: title })) : (_jsx(Fill, {})), onDismiss && (_jsx(Pressable, { role: "button", onPress: onDismiss, style: ({ pressed }) => [
+                                        styles.dismissButton,
+                                        desktop && styles.dismissButtonDesktop,
+                                        pressed && styles.dismissButtonPressed,
+                                    ], children: _jsx(Icon, { name: "dismiss-filled", size: 18, color: colors.gray[500] }) }))] }), title !== "" && _jsx(Separator, {}), _jsx(ScrollView, { contentContainerStyle: desktop ? styles.contentDesktop : styles.content, children: children })] }) })] }));
 }));
 Modal.displayName = "Modal";

package/src/components/MultiSelect.d.ts

@@ -20,7 +20,7 @@ export type MultiSelectProps<I> = {
     renderTagGroup?: (items: readonly MultiSelectItem[]) => string;
     style?: StyleProp<ViewStyle>;
     values: string[];
-    nativeID?: string;
+    id?: string;
 };
 export declare const MultiSelect: (<I extends MultiSelectItem>(props: MultiSelectProps<I>) => JSX.Element | null) & {
     displayName?: string | undefined;