react-miui 0.34.0 → 0.36.0

package/esm/components/layout/list/Item.js

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import { fnWithProps } from "../../../types/fnWithProps.js";
+import { useRipple } from "../../../utils/useRipple.js";
 import { ICON } from "../../icons/Icon.js";
 import { StyledIcon, StyledInnerContainer, StyledItem, StyledNoIcon } from "./Item.styled.js";
 import { Label } from "./Label.js";
@@ -8,7 +9,9 @@ const icon = React.createElement(StyledIcon, { name: ICON.forward });
 const noIcon = React.createElement(StyledNoIcon, null);
 const ListItemInnerContainerClassNameSelector = StyledInnerContainer.toString();
 const ItemBase = forwardRef(({ href, to, onClick, Link, ratio, ...props }, ref) => {
-    var _a;
+    var _a, _b;
+    const innerRef = useRef(null);
+    const ripple = useRipple({ ref: innerRef });
     const r = ratio ? ratio.split("/") : [];
     const pre = typeof props.selected === "boolean"
         ? React.createElement(Label, null, props.selected ? icon : noIcon)
@@ -29,27 +32,34 @@ const ItemBase = forwardRef(({ href, to, onClick, Link, ratio, ...props }, ref)
                 css: { flex },
             });
         })) !== null && _a !== void 0 ? _a : [];
+    const interactive = Boolean((_b = onClick !== null && onClick !== void 0 ? onClick : href) !== null && _b !== void 0 ? _b : to);
+    const rippleProps = interactive
+        ? { onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }
+        : {};
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
         return (React.createElement(StyledItem, { ...props, ref: ref },
             React.createElement(Link, { href: to },
-                React.createElement(StyledInnerContainer, { as: "a", href: to },
+                React.createElement(StyledInnerContainer, { as: "a", href: to, ref: innerRef, ...rippleProps },
                     pre,
-                    ren))));
+                    ren,
+                    ripple.ripples))));
     }
     if (href) {
         return (React.createElement(StyledItem, { ...props, ref: ref },
-            React.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick },
+            React.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick, ref: innerRef, ...rippleProps },
                 pre,
-                ren)));
+                ren,
+                ripple.ripples)));
     }
     if (onClick) {
         return (React.createElement(StyledItem, { ...props, ref: ref },
-            React.createElement(StyledInnerContainer, { as: "button", onClick: onClick },
+            React.createElement(StyledInnerContainer, { as: "button", onClick: onClick, ref: innerRef, ...rippleProps },
                 pre,
-                ren)));
+                ren,
+                ripple.ripples)));
     }
     return React.createElement(StyledItem, { ...props, ref: ref },
         React.createElement(StyledInnerContainer, null,

package/esm/components/layout/list/Item.js.map

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

package/esm/components/layout/list/Item.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWxB,CAAC;AAEH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6Bd,CAAC;AAOH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA2B,CAAC;AAC5C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA6B,CAAC;AAEhD,OAAO,EACH,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,YAAY,GACf,CAAC"}
+{"version":3,"file":"Item.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWxB,CAAC;AAEH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6Bd,CAAC;AAOH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA2B,CAAC;AAC5C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA6B,CAAC;AAEhD,OAAO,EACH,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,YAAY,GACf,CAAC"}

package/esm/components/layout/list/Item.styled.js

@@ -1,6 +1,7 @@
 import { css, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
+import { rippleHostStyles } from "../../../utils/useRipple.styled.js";
 import { Icon } from "../../icons/Icon.js";
-const StyledInnerContainer = styled("div", {
+const StyledInnerContainer = styled("div", rippleHostStyles, {
     display: "flex",
     minHeight: dimensionsPxToRem(174),
     alignItems: "center",

package/esm/components/layout/list/Item.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,EAAE;IACvC,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC;IACjC,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE;IAC5B,eAAe,EAAE,MAAM;IACvB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAE3B,qBAAqB,EAAE;QACnB,SAAS,EAAE,4BAA4B;KAC1C;IAED,KAAK,EAAE;QACH,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,CAAC;QACV,cAAc,EAAE,MAAM;KACzB;IAED,UAAU,EAAE;QACR,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;gBAClC,YAAY,EAAE,iBAAiB,CAAC,EAAE,CAAC;aACtC;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,GAAG,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACjB,OAAO,EAAE,cAAc;CAC1B,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAC5C,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAEhD,OAAO,EACH,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,YAAY,GACf,CAAC"}
+{"version":3,"file":"Item.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAAE;IACzD,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC;IACjC,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE;IAC5B,eAAe,EAAE,MAAM;IACvB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAE3B,qBAAqB,EAAE;QACnB,SAAS,EAAE,4BAA4B;KAC1C;IAED,KAAK,EAAE;QACH,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,CAAC;QACV,cAAc,EAAE,MAAM;KACzB;IAED,UAAU,EAAE;QACR,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;gBAClC,YAAY,EAAE,iBAAiB,CAAC,EAAE,CAAC;aACtC;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,GAAG,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACjB,OAAO,EAAE,cAAc;CAC1B,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAC5C,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAEhD,OAAO,EACH,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,YAAY,GACf,CAAC"}

package/esm/components/ui/button/Button.d.ts

@@ -1,2 +1,95 @@
-export { Button } from "./Button.styled";
+import React from "react";
+declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "outline" | "css" | "inline"> & import("../../../../node_modules/@stitches/react/types/styled-component").TransformProps<{
+    inline?: boolean | "true";
+    outline?: boolean | "true";
+}, {}> & {
+    css?: import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
+        colors: {
+            background: "white";
+            mainColor: "#008ad2";
+            mainColorAlt: "#006AA9";
+            activeBg: "#e7e7e7";
+            inactiveBg: "#d3d3de";
+            inactiveDarkBg: "#999";
+            toggleHandleBg: "#e0e0e0";
+            toggleHandleBorder: "#cdcdcd";
+            toggleBgDisabled: "#f0f0f0";
+            toggleHandleBorderDisabled: "#c29f7d";
+            toggleHandleBgDisabled: "#deae84";
+            icon: "#636363";
+            border: "#d5d5d5";
+            buttonBorder: "#bababa";
+            headerBorder: "#c8c8c9";
+            headerBg: "#efeff0";
+            headerText: "#484848";
+            text: "#323232";
+            text2: "#181818";
+            text3: "#000000";
+            sub: "#959595";
+            popText: "#666";
+            toolbarBorder: "#ababab";
+            toolbarBg: "#f8f8f8";
+            modalBg: "#f7f7f7";
+            modalButtonBg: "#f8f8f8";
+            modalButtonBorder: "#c2c2c2";
+            inputDisabledBg: "#f3f3f3";
+            inputDisabledText: "#959595";
+            choiceBg: "#ffffff";
+            choiceText: "#999999";
+            choiceActiveBg: "#f3f3f3";
+            choiceActiveText: "#313131";
+            choiceBorder: "#cfcfcf";
+            selectorText: "#606060";
+            selectorActive: "#008ad2";
+            blue1: "#038bf4";
+            blue2: "#b7d6f5";
+            blue3: "#dbe6ff";
+            blue4: "#33b4ff";
+            blue5: "#30a2e6";
+            orange1: "#ff7200";
+            orange1Darker: "#cc5b00";
+            purple1: "#7357e8";
+            green1: "#3ec234";
+            green1Darker: "#38af2f";
+            pink1: "#ff388f";
+            red1: "#ea2700";
+            yellow1: "#ffde9d";
+            yellow2: "#e4a429";
+            yellow3: "#fff5db";
+            pinky1: "#f5c0b7";
+            pinky2: "#e07b67";
+            pinky3: "#ffe1db";
+            grey1: "#737373";
+            focusColor: "#dcaf00";
+            scrollbarsThumb: "#737373";
+            scrollbarsBg: "transparent";
+            tableStripedBg: "#fafafa";
+            toolButtonText: "#666e80";
+        };
+    }, import("../../../../node_modules/@stitches/react/types/config").DefaultThemeMap, {
+        mx: (value: string | number) => {
+            marginLeft: string | number;
+            marginRight: string | number;
+        };
+        my: (value: string | number) => {
+            marginTop: string | number;
+            marginBottom: string | number;
+        };
+        px: (value: string | number) => {
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        py: (value: string | number) => {
+            paddingTop: string | number;
+            paddingBottom: string | number;
+        };
+        size: (value: string | number) => {
+            width: string | number;
+            height: string | number;
+        };
+    }>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Button, };
 //# sourceMappingURL=Button.d.ts.map

package/esm/components/ui/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAgBV,CAAC;AAKH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/button/Button.js

@@ -1,2 +1,16 @@
-export { Button } from "./Button.styled.js";
+import React, { forwardRef } from "react";
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+import { useRipple } from "../../../utils/useRipple.js";
+import { StyledButton } from "./Button.styled.js";
+const Button = forwardRef((props, ref) => {
+    const { children, onPointerDown, onKeyDown, ...rest } = props;
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });
+    return (React.createElement(StyledButton, { ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown, ...rest },
+        children,
+        ripple.ripples));
+});
+Button.displayName = "Button";
+Button.toString = () => StyledButton.toString();
+export { Button, };
 //# sourceMappingURL=Button.js.map

package/esm/components/ui/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,MAAM,MAAM,GAAG,UAAU,CAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;IAEtE,OAAO,CACH,oBAAC,YAAY,IACT,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS,KACvB,IAAI;QAEP,QAAQ;QACR,MAAM,CAAC,OAAO,CACJ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC9B,MAAM,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEhD,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/button/Button.styled.d.ts

@@ -1,4 +1,4 @@
-declare const Button: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"button", {
+declare const StyledButton: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"button", {
     inline?: boolean | "true";
     outline?: boolean | "true";
 }, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
@@ -86,5 +86,5 @@ declare const Button: import("../../../../node_modules/@stitches/react/types/sty
         height: string | number;
     };
 }>>;
-export { Button, };
+export { StyledButton, };
 //# sourceMappingURL=Button.styled.d.ts.map

package/esm/components/ui/button/Button.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCV,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}
+{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiChB,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/ui/button/Button.styled.js

@@ -1,5 +1,6 @@
 import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
-const Button = styled("button", {
+import { rippleHostStyles } from "../../../utils/useRipple.styled.js";
+const StyledButton = styled("button", rippleHostStyles, {
     "height": dimensionsPxToRem(118),
     "background": "$green1",
     "border": `${borderPxToRem(1)} solid $green1Darker`,
@@ -31,5 +32,5 @@ const Button = styled("button", {
         },
     },
 });
-export { Button, };
+export { StyledButton, };
 //# sourceMappingURL=Button.styled.js.map

package/esm/components/ui/button/Button.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKhG,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,sBAAsB;IACnD,OAAO,EAAE,aAAa;IACtB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAElB,YAAY,EAAE;QACV,OAAO,EAAE,GAAG;KACf;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,UAAU,EAAE,aAAa;gBACzB,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,QAAQ;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}
+{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,gBAAgB,EAAE;IACpD,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,sBAAsB;IACnD,OAAO,EAAE,aAAa;IACtB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAElB,YAAY,EAAE;QACV,OAAO,EAAE,GAAG;KACf;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,UAAU,EAAE,aAAa;gBACzB,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,QAAQ;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/ui/directionPad/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,KAAK,cAAc,GAAG;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,SAAS,0FAMb,CAAC;AAKH,QAAA,MAAM,oBAAoB,QAAuB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,KAAK,cAAc,GAAG;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,SAAS,0FAeb,CAAC;AAKH,QAAA,MAAM,oBAAoB,QAAuB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/esm/components/ui/directionPad/Button.js

@@ -1,8 +1,13 @@
 import React, { forwardRef } from "react";
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+import { useRipple } from "../../../utils/useRipple.js";
 import { StyledButton, StyledDot } from "./Button.styled.js";
 const PadButton = forwardRef((props, ref) => {
-    return (React.createElement(StyledButton, { ...props, ref: ref },
-        React.createElement(StyledDot, null)));
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, fromCenter: true });
+    return (React.createElement(StyledButton, { ...props, ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
+        React.createElement(StyledDot, null),
+        ripple.ripples));
 });
 PadButton.displayName = "PadButton";
 PadButton.toString = () => StyledButton.toString();

package/esm/components/ui/directionPad/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM1D,MAAM,SAAS,GAAG,UAAU,CAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,OAAO,CACH,oBAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG;QAC7B,oBAAC,SAAS,OAAG,CACF,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEnD,MAAM,oBAAoB,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM1D,MAAM,SAAS,GAAG,UAAU,CAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,OAAO,CACH,oBAAC,YAAY,OACL,KAAK,EACT,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;QAE3B,oBAAC,SAAS,OAAG;QACZ,MAAM,CAAC,OAAO,CACJ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEnD,MAAM,oBAAoB,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}

package/esm/components/ui/directionPad/Button.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQhB,CAAC;AAEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOb,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,SAAS,GACZ,CAAC"}
+{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQhB,CAAC;AAEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOb,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,SAAS,GACZ,CAAC"}

package/esm/components/ui/directionPad/Button.styled.js

@@ -1,5 +1,6 @@
 import { styled } from "../../../theme.js";
-const StyledButton = styled("button", {
+import { rippleHostStyles } from "../../../utils/useRipple.styled.js";
+const StyledButton = styled("button", rippleHostStyles, {
     height: "50px",
     width: "50px",
     margin: "0",

package/esm/components/ui/directionPad/Button.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE;IAClC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG;IACX,YAAY,EAAE,OAAO;IACrB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;CACrB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC7B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,SAAS,GACZ,CAAC"}
+{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,gBAAgB,EAAE;IACpD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG;IACX,YAAY,EAAE,OAAO;IACrB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;CACrB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE;IAC7B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,SAAS,GACZ,CAAC"}

package/esm/components/ui/directionPad/Middle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Middle.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,KAAK,cAAc,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,SAAS,0FAMb,CAAC;AAKH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Middle.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,KAAK,cAAc,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,SAAS,0FAeb,CAAC;AAKH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/esm/components/ui/directionPad/Middle.js

@@ -1,7 +1,13 @@
 import React, { forwardRef } from "react";
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+import { useRipple } from "../../../utils/useRipple.js";
 import { StyledMiddle } from "./Middle.styled.js";
 const PadMiddle = forwardRef((props, ref) => {
-    return (React.createElement(StyledMiddle, { onClick: props.onClick, ref: ref }, props.label));
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, fromCenter: true });
+    return (React.createElement(StyledMiddle, { onClick: props.onClick, ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
+        props.label,
+        ripple.ripples));
 });
 PadMiddle.displayName = "PadMiddle";
 PadMiddle.toString = () => StyledMiddle.toString();

package/esm/components/ui/directionPad/Middle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Middle.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C,MAAM,SAAS,GAAG,UAAU,CAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,OAAO,CACH,oBAAC,YAAY,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,IACzC,KAAK,CAAC,KAAK,CACD,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Middle.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C,MAAM,SAAS,GAAG,UAAU,CAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,OAAO,CACH,oBAAC,YAAY,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;QAE1B,KAAK,CAAC,KAAK;QACX,MAAM,CAAC,OAAO,CACJ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/ui/directionPad/Middle.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Middle.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYhB,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}
+{"version":3,"file":"Middle.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYhB,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/ui/directionPad/Middle.styled.js

@@ -1,5 +1,6 @@
 import { styled } from "../../../theme.js";
-const StyledMiddle = styled("button", {
+import { rippleHostStyles } from "../../../utils/useRipple.styled.js";
+const StyledMiddle = styled("button", rippleHostStyles, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

package/esm/components/ui/directionPad/Middle.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Middle.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE;IAClC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,gBAAgB;IACxB,SAAS,EAAE,YAAY;IACvB,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE,QAAQ;CACtB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}
+{"version":3,"file":"Middle.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,gBAAgB,EAAE;IACpD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,gBAAgB;IACxB,SAAS,EAAE,YAAY;IACvB,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE,QAAQ;CACtB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/ui/modal/Modal.d.ts

@@ -2,13 +2,12 @@ import React from "react";
 import { ContainerStyled, OverlayStyled } from "./Modal.styled";
 type OverlayProps = React.ComponentProps<typeof OverlayStyled>;
 type ContainerProps = React.ComponentProps<typeof ContainerStyled>;
-interface Props {
+interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     onOverlayClick?: (() => void) | "close" | null;
     closeOnEsc?: boolean;
     onClose: () => void;
     isOpen: boolean;
     title?: React.ReactNode;
-    className?: string;
     portal?: boolean | HTMLElement;
     children: React.ReactNode;
     position?: OverlayProps["position"];

package/esm/components/ui/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAQpF,OAAO,EAAE,eAAe,EAAoB,aAAa,EAA8B,MAAM,gBAAgB,CAAC;AAE9G,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAC/D,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAEnE,UAAU,KAAK;IACX,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CACjC;AAiJD,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAET,CAAC;AAGH,QAAA,MAAM,sBAAsB,QAA6B,CAAC;AAC1D,QAAA,MAAM,kBAAkB,QAAyB,CAAC;AAClD,QAAA,MAAM,0BAA0B,QAA2B,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAS3F,OAAO,EAAE,eAAe,EAAoB,aAAa,EAA8B,MAAM,gBAAgB,CAAC;AAE9G,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAC/D,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAkBnE,UAAU,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvE,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CACjC;AAoND,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAET,CAAC;AAGH,QAAA,MAAM,sBAAsB,QAA6B,CAAC;AAC1D,QAAA,MAAM,kBAAkB,QAAyB,CAAC;AAClD,QAAA,MAAM,0BAA0B,QAA2B,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,CAAC"}

package/esm/components/ui/modal/Modal.js

@@ -1,49 +1,100 @@
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
 import { fnWithProps } from "../../../types/fnWithProps.js";
+import { HandleEsc } from "../../utils/HandleEsc.js";
 import { ContainerStyled, NEGATIVE_PADDING, OverlayStyled, RemovePadding, TitleStyled } from "./Modal.styled.js";
-const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full, }, ref) => {
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex=\"-1\"])",
+].join(",");
+const prefersReducedMotion = () => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full, ...rest }, ref) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef(null);
     const containerRef = useForwardedRef(ref);
+    const previouslyFocusedRef = useRef(null);
+    const titleId = useId();
     useEffect(() => {
-        if (!isOpen || !closeOnEsc) {
+        if (isOpen) {
+            setIsRendered(true);
+            setIsClosing(false);
             return;
         }
-        const onKeyDown = (e) => {
-            if (e.key === "Escape") {
-                onClose();
-            }
-        };
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [isOpen, closeOnEsc, onClose]);
-    useEffect(() => {
-        if (!isOpen) {
-            setIsClosing(true);
+        if (prefersReducedMotion()) {
+            setIsRendered(false);
+            setIsClosing(false);
             return;
         }
-        setIsRendered(true);
-        setIsClosing(false);
+        setIsClosing(true);
     }, [isOpen]);
     useEffect(() => {
         if (!isClosing) {
             return;
         }
-        if (!overlayRef.current || !containerRef.current) {
+        const overlay = overlayRef.current;
+        const container = containerRef.current;
+        if (!overlay || !container) {
             return;
         }
-        overlayRef.current.style.animation = "none";
-        containerRef.current.style.animation = "none";
-        overlayRef.current.offsetHeight;
-        overlayRef.current.style.removeProperty("animation");
-        containerRef.current.style.removeProperty("animation");
+        overlay.style.animation = "none";
+        container.style.animation = "none";
+        overlay.offsetHeight;
+        overlay.style.removeProperty("animation");
+        container.style.removeProperty("animation");
     }, [isClosing, containerRef]);
-    const titleElem = title ? React.createElement(TitleStyled, null, title) : null;
+    useEffect(() => {
+        var _a;
+        if (!isOpen || !isRendered) {
+            return;
+        }
+        const container = containerRef.current;
+        const overlay = overlayRef.current;
+        if (!container || !overlay) {
+            return;
+        }
+        previouslyFocusedRef.current = document.activeElement instanceof HTMLElement
+            ? document.activeElement
+            : null;
+        const focusables = container.querySelectorAll(FOCUSABLE_SELECTOR);
+        ((_a = focusables[0]) !== null && _a !== void 0 ? _a : container).focus();
+        const inerted = [];
+        let cursor = overlay;
+        while (cursor !== document.body) {
+            const parentEl = cursor.parentElement;
+            if (!parentEl) {
+                break;
+            }
+            for (const child of Array.from(parentEl.children)) {
+                if (child === cursor || !(child instanceof HTMLElement)) {
+                    continue;
+                }
+                if (!child.hasAttribute("inert")) {
+                    child.setAttribute("inert", "");
+                    inerted.push(child);
+                }
+            }
+            cursor = parentEl;
+        }
+        return () => {
+            var _a;
+            inerted.forEach((el) => {
+                el.removeAttribute("inert");
+            });
+            (_a = previouslyFocusedRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }, [isOpen, isRendered, containerRef]);
+    const titleElem = title ? React.createElement(TitleStyled, { id: titleId }, title) : null;
     const handleOverlayClick = useCallback((e) => {
         if (e.target !== e.currentTarget) {
             return;
@@ -51,11 +102,14 @@ const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onO
         if (onOverlayClick === "close") {
             onClose();
         }
-        if (typeof onOverlayClick === "function") {
+        else if (typeof onOverlayClick === "function") {
             onOverlayClick();
         }
     }, [onOverlayClick, onClose]);
-    const handleAnimationEnd = useCallback(() => {
+    const handleAnimationEnd = useCallback((e) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
         if (isOpen) {
             return;
         }
@@ -65,31 +119,37 @@ const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onO
         return null;
     }
     const overlayVariants = {};
-    isClosing && (overlayVariants.isClosing = true);
-    position != null && (overlayVariants.position = position);
+    if (isClosing) {
+        overlayVariants.isClosing = true;
+    }
+    if (position != null) {
+        overlayVariants.position = position;
+    }
     const containerVariants = {};
-    isClosing && (containerVariants.isClosing = true);
-    full != null && (containerVariants.full = full);
+    if (isClosing) {
+        containerVariants.isClosing = true;
+    }
+    if (full != null) {
+        containerVariants.full = full;
+    }
     const childrenCount = React.Children.count(children);
     const chld = React.Children.map(children, (child, index) => {
         var _a;
-        if (React.isValidElement(child)) {
-            if (child.type === RemovePadding) {
-                const css = (_a = child.props.css) !== null && _a !== void 0 ? _a : {};
-                if (index === 0 && titleElem == null) {
-                    css.marginTop = NEGATIVE_PADDING;
-                }
-                if (index === childrenCount - 1) {
-                    css.marginBottom = NEGATIVE_PADDING;
-                }
-                return React.cloneElement(child, { css });
+        if (React.isValidElement(child) && child.type === RemovePadding) {
+            const css = { ...((_a = child.props.css) !== null && _a !== void 0 ? _a : {}) };
+            if (index === 0 && titleElem == null) {
+                css.marginTop = NEGATIVE_PADDING;
+            }
+            if (index === childrenCount - 1) {
+                css.marginBottom = NEGATIVE_PADDING;
             }
-            return child;
+            return React.cloneElement(child, { css });
         }
         return child;
     });
     const tree = (React.createElement(OverlayStyled, { ...overlayVariants, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
-        React.createElement(ContainerStyled, { className: className, ...containerVariants, ref: containerRef },
+        closeOnEsc ? React.createElement(HandleEsc, { onPress: onClose }) : null,
+        React.createElement(ContainerStyled, { role: "dialog", "aria-modal": true, "aria-labelledby": titleElem ? titleId : undefined, tabIndex: -1, className: className, ...containerVariants, ref: containerRef, ...rest },
             titleElem,
             chld)));
     if (portal) {