react-miui 0.35.0 → 0.36.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [EZEZ Changelog](https://ezez.dev/guidelines/changelog/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.36.0] - 2026-05-24
+### Added
+- ripple effect on click on most clickable elements (fallback to color on reduced motion preference)
+
 ## [0.35.0] - 2026-05-23
 ### Added
 - `clock` icon

package/dist/components/layout/header/HeaderIconAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IAIX,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAIzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAIrB,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,EAAE,CAAC,EAAE,MAAM,CAAC;IAIZ,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAI7D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAMD,QAAA,MAAM,gBAAgB,qGAkCpB,CAAC;AAKH,QAAA,MAAM,4BAA4B,QAAwB,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,CAAC"}
+{"version":3,"file":"HeaderIconAction.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAK7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IAIX,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAIzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAIrB,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,EAAE,CAAC,EAAE,MAAM,CAAC;IAIZ,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAI7D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAMD,QAAA,MAAM,gBAAgB,qGA0DpB,CAAC;AAKH,QAAA,MAAM,4BAA4B,QAAwB,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,CAAC"}

package/dist/components/layout/header/HeaderIconAction.js

@@ -46,9 +46,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderIconActionIconSelector = exports.HeaderIconAction = void 0;
 const react_1 = __importStar(require("react"));
+const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
+const useRipple_1 = require("../../../utils/useRipple");
 const HeaderIconAction_styled_1 = require("./HeaderIconAction.styled");
 const HeaderIconAction = (0, react_1.forwardRef)((props, ref) => {
     const { icon, href, to, Link, className } = props, restProps = __rest(props, ["icon", "href", "to", "Link", "className"]);
+    const innerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
+    const ripple = (0, useRipple_1.useRipple)({ ref: innerRef });
     let content = icon;
     if (typeof icon === "string") {
         content = react_1.default.createElement(HeaderIconAction_styled_1.StyledIcon, { name: icon });
@@ -58,12 +62,18 @@ const HeaderIconAction = (0, react_1.forwardRef)((props, ref) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
         return (react_1.default.createElement(Link, Object.assign({ href: to }, restProps),
-            react_1.default.createElement(HeaderIconAction_styled_1.A, { ref: ref, className: props.className }, content)));
+            react_1.default.createElement(HeaderIconAction_styled_1.A, { ref: innerRef, className: props.className, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
+                content,
+                ripple.ripples)));
     }
     if (href) {
-        return (react_1.default.createElement(HeaderIconAction_styled_1.A, Object.assign({ ref: ref, href: href, className: props.className }, restProps), content));
+        return (react_1.default.createElement(HeaderIconAction_styled_1.A, Object.assign({ ref: innerRef, href: href, className: props.className, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }, restProps),
+            content,
+            ripple.ripples));
     }
-    return (react_1.default.createElement(HeaderIconAction_styled_1.Btn, { ref: ref, className: props.className, onClick: props.onClick }, content));
+    return (react_1.default.createElement(HeaderIconAction_styled_1.Btn, { ref: innerRef, className: props.className, onClick: props.onClick, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
+        content,
+        ripple.ripples));
 });
 exports.HeaderIconAction = HeaderIconAction;
 HeaderIconAction.displayName = "HeaderIconAction";

package/dist/components/layout/header/HeaderIconAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAK1C,uEAA6E;AAsC7E,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAA+C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAzD,2CAAiD,CAAQ,CAAC;IAEhE,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,GAAG,8BAAC,oCAAU,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;IACjD,CAAC;IAED,IAAI,EAAE,EAAE,CAAC;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,CACH,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YACzB,8BAAC,2BAAC,IAAC,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAG,OAAO,CAAK,CACnF,CACV,CAAC;IACN,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,OAAO,CACH,8BAAC,2BAAC,kBAAC,GAAG,EAAE,GAAmC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAM,SAAS,GAC7F,OAAO,CACR,CACP,CAAC;IACN,CAAC;IAED,OAAO,CAEH,8BAAC,6BAAG,IAAC,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAC5F,OAAO,CACN,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAOM,4CAAgB;AALzB,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAClD,gBAAgB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,sCAAY,CAAC,QAAQ,CAAC;AAExD,MAAM,4BAA4B,GAAG,oCAAU,CAAC,QAAQ,EAAE,CAAC;AAEhC,oEAA4B"}
+{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,yEAAoE;AAKpE,wDAAqD;AACrD,uEAA6E;AAsC7E,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAA+C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAzD,2CAAiD,CAAQ,CAAC;IAChE,MAAM,QAAQ,GAAG,IAAA,mCAAe,EAA+C,GAAG,CAAC,CAAC;IACpF,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IAE5C,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,GAAG,8BAAC,oCAAU,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;IACjD,CAAC;IAED,IAAI,EAAE,EAAE,CAAC;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,CACH,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YACzB,8BAAC,2BAAC,IACE,GAAG,EAAE,QAAwC,EAC7C,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;gBAE1B,OAAO;gBACP,MAAM,CAAC,OAAO,CACf,CACD,CACV,CAAC;IACN,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,OAAO,CACH,8BAAC,2BAAC,kBACE,GAAG,EAAE,QAAwC,EAC7C,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS,IACvB,SAAS;YAEZ,OAAO;YACP,MAAM,CAAC,OAAO,CACf,CACP,CAAC;IACN,CAAC;IAED,OAAO,CACH,8BAAC,6BAAG,IACA,GAAG,EAAE,QAAwC,EAC7C,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;QAE1B,OAAO;QACP,MAAM,CAAC,OAAO,CACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAOM,4CAAgB;AALzB,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAClD,gBAAgB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,sCAAY,CAAC,QAAQ,CAAC;AAExD,MAAM,4BAA4B,GAAG,oCAAU,CAAC,QAAQ,EAAE,CAAC;AAEhC,oEAA4B"}

package/dist/components/layout/header/HeaderIconAction.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBhB,CAAC;AAEH,QAAA,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAiC,CAAC;AAC3C,QAAA,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA4B,CAAC;AAEpC,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKd,CAAC;AAEH,OAAO,EACH,GAAG,EACH,CAAC,EACD,UAAU,EACV,YAAY,GACf,CAAC"}
+{"version":3,"file":"HeaderIconAction.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAiC,CAAC;AAC3C,QAAA,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA4B,CAAC;AAEpC,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKd,CAAC;AAEH,OAAO,EACH,GAAG,EACH,CAAC,EACD,UAAU,EACV,YAAY,GACf,CAAC"}

package/dist/components/layout/header/HeaderIconAction.styled.js

@@ -2,24 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sharedStyles = exports.StyledIcon = exports.A = exports.Btn = void 0;
 const theme_1 = require("../../../theme");
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
 const Icon_1 = require("../../icons/Icon");
-const sharedStyles = (0, theme_1.css)({
-    "width": (0, theme_1.pxToRem)(30),
-    "height": (0, theme_1.pxToRem)(30),
-    "background": "none",
-    "borderRadius": "666px",
-    "display": "inline-flex",
-    "alignItems": "center",
-    "justifyContent": "center",
-    "border": (0, theme_1.borderPxToRem)(2),
-    "color": "currentColor",
-    "&:hover": {
-        background: "#00000022",
-    },
-    "&:active": {
-        background: "#00000011",
-        color: "currentColor",
-    },
+const sharedStyles = (0, theme_1.css)(useRipple_styled_1.rippleHostStyles, {
+    width: (0, theme_1.pxToRem)(30),
+    height: (0, theme_1.pxToRem)(30),
+    background: "none",
+    borderRadius: "666px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: (0, theme_1.borderPxToRem)(2),
+    color: "currentColor",
 });
 exports.sharedStyles = sharedStyles;
 const Btn = (0, theme_1.styled)("button", sharedStyles);

package/dist/components/layout/header/HeaderIconAction.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconAction.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAqE;AACrE,2CAAwC;AAExC,MAAM,YAAY,GAAG,IAAA,WAAG,EAAC;IACrB,OAAO,EAAE,IAAA,eAAO,EAAC,EAAE,CAAC;IACpB,QAAQ,EAAE,IAAA,eAAO,EAAC,EAAE,CAAC;IACrB,YAAY,EAAE,MAAM;IACpB,cAAc,EAAE,OAAO;IACvB,SAAS,EAAE,aAAa;IACxB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,QAAQ,EAAE,IAAA,qBAAa,EAAC,CAAC,CAAC;IAC1B,OAAO,EAAE,cAAc;IAEvB,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;IACD,UAAU,EAAE;QACR,UAAU,EAAE,WAAW;QACvB,KAAK,EAAE,cAAc;KACxB;CACJ,CAAC,CAAC;AAgBC,oCAAY;AAdhB,MAAM,GAAG,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAWvC,kBAAG;AAVP,MAAM,CAAC,GAAG,IAAA,cAAM,EAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AAWhC,cAAC;AATL,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,WAAI,EAAE;IAC5B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,cAAc;CACvB,CAAC,CAAC;AAKC,gCAAU"}
+{"version":3,"file":"HeaderIconAction.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAqE;AACrE,sEAAmE;AACnE,2CAAwC;AAExC,MAAM,YAAY,GAAG,IAAA,WAAG,EAAC,mCAAgB,EAAE;IACvC,KAAK,EAAE,IAAA,eAAO,EAAC,EAAE,CAAC;IAClB,MAAM,EAAE,IAAA,eAAO,EAAC,EAAE,CAAC;IACnB,UAAU,EAAE,MAAM;IAClB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,IAAA,qBAAa,EAAC,CAAC,CAAC;IACxB,KAAK,EAAE,cAAc;CACxB,CAAC,CAAC;AAgBC,oCAAY;AAdhB,MAAM,GAAG,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAWvC,kBAAG;AAVP,MAAM,CAAC,GAAG,IAAA,cAAM,EAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AAWhC,cAAC;AATL,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,WAAI,EAAE;IAC5B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,cAAc;CACvB,CAAC,CAAC;AAKC,gCAAU"}

package/dist/components/layout/list/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,GAAG,MAAM,EAAE,GAAG,EAAE,CAAC;AAE9B,KAAK,qBAAqB,GAClB,KAAK,GACH,GAAG,KAAK,IAAI,KAAK,EAAE,GACnB,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC5B,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACrC,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC9C,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACvD,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAChE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACzE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAClF,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;AAEtG,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAKD,QAAA,MAAM,uCAAuC,QAAkC,CAAC;AAoFhF,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,uCAAuC,EAAE,CAAC;AAEzD,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,GAAG,MAAM,EAAE,GAAG,EAAE,CAAC;AAE9B,KAAK,qBAAqB,GAClB,KAAK,GACH,GAAG,KAAK,IAAI,KAAK,EAAE,GACnB,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC5B,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACrC,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC9C,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACvD,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAChE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACzE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAClF,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;AAEtG,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAKD,QAAA,MAAM,uCAAuC,QAAkC,CAAC;AAoHhF,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,uCAAuC,EAAE,CAAC;AAEzD,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}

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

@@ -47,6 +47,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItemInnerContainerClassNameSelector = exports.Item = void 0;
 const react_1 = __importStar(require("react"));
 const fnWithProps_1 = require("../../../types/fnWithProps");
+const useRipple_1 = require("../../../utils/useRipple");
 const Icon_1 = require("../../icons/Icon");
 const Item_styled_1 = require("./Item.styled");
 const Label_1 = require("./Label");
@@ -56,8 +57,10 @@ const noIcon = react_1.default.createElement(Item_styled_1.StyledNoIcon, null);
 const ListItemInnerContainerClassNameSelector = Item_styled_1.StyledInnerContainer.toString();
 exports.ListItemInnerContainerClassNameSelector = ListItemInnerContainerClassNameSelector;
 const ItemBase = (0, react_1.forwardRef)((_a, ref) => {
-    var _b;
+    var _b, _c;
     var { href, to, onClick, Link, ratio } = _a, props = __rest(_a, ["href", "to", "onClick", "Link", "ratio"]);
+    const innerRef = (0, react_1.useRef)(null);
+    const ripple = (0, useRipple_1.useRipple)({ ref: innerRef });
     const r = ratio ? ratio.split("/") : [];
     const pre = typeof props.selected === "boolean"
         ? react_1.default.createElement(Label_1.Label, null, props.selected ? icon : noIcon)
@@ -78,27 +81,34 @@ const ItemBase = (0, react_1.forwardRef)((_a, ref) => {
                 css: { flex },
             });
         })) !== null && _b !== void 0 ? _b : [];
+    const interactive = Boolean((_c = onClick !== null && onClick !== void 0 ? onClick : href) !== null && _c !== void 0 ? _c : 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_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props, { ref: ref }),
             react_1.default.createElement(Link, { href: to },
-                react_1.default.createElement(Item_styled_1.StyledInnerContainer, { as: "a", href: to },
+                react_1.default.createElement(Item_styled_1.StyledInnerContainer, Object.assign({ as: "a", href: to, ref: innerRef }, rippleProps),
                     pre,
-                    ren))));
+                    ren,
+                    ripple.ripples))));
     }
     if (href) {
         return (react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props, { ref: ref }),
-            react_1.default.createElement(Item_styled_1.StyledInnerContainer, { as: "a", href: href, onClick: onClick },
+            react_1.default.createElement(Item_styled_1.StyledInnerContainer, Object.assign({ as: "a", href: href, onClick: onClick, ref: innerRef }, rippleProps),
                 pre,
-                ren)));
+                ren,
+                ripple.ripples)));
     }
     if (onClick) {
         return (react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props, { ref: ref }),
-            react_1.default.createElement(Item_styled_1.StyledInnerContainer, { as: "button", onClick: onClick },
+            react_1.default.createElement(Item_styled_1.StyledInnerContainer, Object.assign({ as: "button", onClick: onClick, ref: innerRef }, rippleProps),
                 pre,
-                ren)));
+                ren,
+                ripple.ripples)));
     }
     return react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props, { ref: ref }),
         react_1.default.createElement(Item_styled_1.StyledInnerContainer, null,

package/dist/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/dist/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/dist/components/layout/list/Item.styled.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledNoIcon = exports.StyledIcon = exports.StyledInnerContainer = exports.StyledItem = void 0;
 const theme_1 = require("../../../theme");
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
 const Icon_1 = require("../../icons/Icon");
-const StyledInnerContainer = (0, theme_1.styled)("div", {
+const StyledInnerContainer = (0, theme_1.styled)("div", useRipple_styled_1.rippleHostStyles, {
     display: "flex",
     minHeight: (0, theme_1.dimensionsPxToRem)(174),
     alignItems: "center",

package/dist/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,0CAAsF;AACtF,2CAAwC;AAExC,MAAM,oBAAoB,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IACvC,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,IAAA,yBAAiB,EAAC,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;AA2CC,oDAAoB;AAzCxB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IAC5B,eAAe,EAAE,MAAM;IACvB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,IAAA,mBAAW,EAAC,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,IAAA,yBAAiB,EAAC,EAAE,CAAC;gBAClC,YAAY,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;aACtC;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAWC,gCAAU;AATd,MAAM,UAAU,GAAG,IAAA,WAAG,EAAC;IACnB,KAAK,EAAE,IAAA,eAAO,EAAC,CAAC,CAAC;IACjB,OAAO,EAAE,cAAc;CAC1B,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,WAAI,EAAE,UAAU,CAAC,CAAC;AAMxC,gCAAU;AALd,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAM5C,oCAAY"}
+{"version":3,"file":"Item.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAsF;AACtF,sEAAmE;AACnE,2CAAwC;AAExC,MAAM,oBAAoB,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE,mCAAgB,EAAE;IACzD,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,IAAA,yBAAiB,EAAC,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;AA2CC,oDAAoB;AAzCxB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IAC5B,eAAe,EAAE,MAAM;IACvB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,IAAA,mBAAW,EAAC,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,IAAA,yBAAiB,EAAC,EAAE,CAAC;gBAClC,YAAY,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;aACtC;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAWC,gCAAU;AATd,MAAM,UAAU,GAAG,IAAA,WAAG,EAAC;IACnB,KAAK,EAAE,IAAA,eAAO,EAAC,CAAC,CAAC;IACjB,OAAO,EAAE,cAAc;CAC1B,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,WAAI,EAAE,UAAU,CAAC,CAAC;AAMxC,gCAAU;AALd,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAM5C,oCAAY"}

package/dist/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/dist/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/dist/components/ui/button/Button.js

@@ -1,6 +1,63 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-var Button_styled_1 = require("./Button.styled");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_styled_1.Button; } });
+const react_1 = __importStar(require("react"));
+const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
+const useRipple_1 = require("../../../utils/useRipple");
+const Button_styled_1 = require("./Button.styled");
+const Button = (0, react_1.forwardRef)((props, ref) => {
+    const { children, onPointerDown, onKeyDown } = props, rest = __rest(props, ["children", "onPointerDown", "onKeyDown"]);
+    const innerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
+    const ripple = (0, useRipple_1.useRipple)({ ref: innerRef, onPointerDown, onKeyDown });
+    return (react_1.default.createElement(Button_styled_1.StyledButton, Object.assign({ ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }, rest),
+        children,
+        ripple.ripples));
+});
+exports.Button = Button;
+Button.displayName = "Button";
+Button.toString = () => Button_styled_1.StyledButton.toString();
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":";;;AAAA,iDAAyC;AAAhC,uGAAA,MAAM,OAAA"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,yEAAoE;AAEpE,wDAAqD;AACrD,mDAA+C;AAI/C,MAAM,MAAM,GAAG,IAAA,kBAAU,EAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvD,0CAA+C,CAAQ,CAAC;IAC9D,MAAM,QAAQ,GAAG,IAAA,mCAAe,EAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;IAEtE,OAAO,CACH,8BAAC,4BAAY,kBACT,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS,IACvB,IAAI;QAEP,QAAQ;QACR,MAAM,CAAC,OAAO,CACJ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAMC,wBAAM;AAJV,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC9B,MAAM,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,4BAAY,CAAC,QAAQ,EAAE,CAAC"}

package/dist/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/dist/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/dist/components/ui/button/Button.styled.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.StyledButton = void 0;
 const theme_1 = require("../../../theme");
-const Button = (0, theme_1.styled)("button", {
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
+const StyledButton = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
     "height": (0, theme_1.dimensionsPxToRem)(118),
     "background": "$green1",
     "border": `${(0, theme_1.borderPxToRem)(1)} solid $green1Darker`,
@@ -34,5 +35,5 @@ const Button = (0, theme_1.styled)("button", {
         },
     },
 });
-exports.Button = Button;
+exports.StyledButton = StyledButton;
 //# sourceMappingURL=Button.styled.js.map

package/dist/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,0CAAgG;AAKhG,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,IAAA,qBAAa,EAAC,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,IAAA,mBAAW,EAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,IAAA,eAAO,EAAC,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;AAGC,wBAAM"}
+{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAgG;AAChG,sEAAmE;AAKnE,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,mCAAgB,EAAE;IACpD,QAAQ,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,IAAA,qBAAa,EAAC,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,IAAA,mBAAW,EAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,IAAA,eAAO,EAAC,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;AAGC,oCAAY"}

package/dist/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/dist/components/ui/directionPad/Button.js

@@ -35,10 +35,15 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PadButtonDotSelector = exports.PadButton = void 0;
 const react_1 = __importStar(require("react"));
+const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
+const useRipple_1 = require("../../../utils/useRipple");
 const Button_styled_1 = require("./Button.styled");
 const PadButton = (0, react_1.forwardRef)((props, ref) => {
-    return (react_1.default.createElement(Button_styled_1.StyledButton, Object.assign({}, props, { ref: ref }),
-        react_1.default.createElement(Button_styled_1.StyledDot, null)));
+    const innerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
+    const ripple = (0, useRipple_1.useRipple)({ ref: innerRef, fromCenter: true });
+    return (react_1.default.createElement(Button_styled_1.StyledButton, Object.assign({}, props, { ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }),
+        react_1.default.createElement(Button_styled_1.StyledDot, null),
+        ripple.ripples));
 });
 exports.PadButton = PadButton;
 PadButton.displayName = "PadButton";

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,mDAA0D;AAM1D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,OAAO,CACH,8BAAC,4BAAY,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAC7B,8BAAC,yBAAS,OAAG,CACF,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAOM,8BAAS;AALlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,4BAAY,CAAC,QAAQ,EAAE,CAAC;AAEnD,MAAM,oBAAoB,GAAG,yBAAS,CAAC,QAAQ,EAAE,CAAC;AAE9B,oDAAoB"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,yEAAoE;AAEpE,wDAAqD;AACrD,mDAA0D;AAM1D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,QAAQ,GAAG,IAAA,mCAAe,EAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,OAAO,CACH,8BAAC,4BAAY,oBACL,KAAK,IACT,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;QAE3B,8BAAC,yBAAS,OAAG;QACZ,MAAM,CAAC,OAAO,CACJ,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAOM,8BAAS;AALlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,4BAAY,CAAC,QAAQ,EAAE,CAAC;AAEnD,MAAM,oBAAoB,GAAG,yBAAS,CAAC,QAAQ,EAAE,CAAC;AAE9B,oDAAoB"}

package/dist/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/dist/components/ui/directionPad/Button.styled.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledDot = exports.StyledButton = void 0;
 const theme_1 = require("../../../theme");
-const StyledButton = (0, theme_1.styled)("button", {
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
+const StyledButton = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
     height: "50px",
     width: "50px",
     margin: "0",

package/dist/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,0CAAwC;AAExC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,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;AAYC,oCAAY;AAVhB,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,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;AAIC,8BAAS"}
+{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwC;AACxC,sEAAmE;AAEnE,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,mCAAgB,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;AAYC,oCAAY;AAVhB,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,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;AAIC,8BAAS"}

package/dist/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/dist/components/ui/directionPad/Middle.js

@@ -35,9 +35,15 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PadMiddle = void 0;
 const react_1 = __importStar(require("react"));
+const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
+const useRipple_1 = require("../../../utils/useRipple");
 const Middle_styled_1 = require("./Middle.styled");
 const PadMiddle = (0, react_1.forwardRef)((props, ref) => {
-    return (react_1.default.createElement(Middle_styled_1.StyledMiddle, { onClick: props.onClick, ref: ref }, props.label));
+    const innerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
+    const ripple = (0, useRipple_1.useRipple)({ ref: innerRef, fromCenter: true });
+    return (react_1.default.createElement(Middle_styled_1.StyledMiddle, { onClick: props.onClick, ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
+        props.label,
+        ripple.ripples));
 });
 exports.PadMiddle = PadMiddle;
 PadMiddle.displayName = "PadMiddle";

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

@@ -1 +1 @@
-{"version":3,"file":"Middle.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,mDAA+C;AAO/C,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,OAAO,CACH,8BAAC,4BAAY,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,IACzC,KAAK,CAAC,KAAK,CACD,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAKM,8BAAS;AAHlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,4BAAY,CAAC,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Middle.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,yEAAoE;AAEpE,wDAAqD;AACrD,mDAA+C;AAO/C,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,QAAQ,GAAG,IAAA,mCAAe,EAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,OAAO,CACH,8BAAC,4BAAY,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;AAKM,8BAAS;AAHlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,4BAAY,CAAC,QAAQ,EAAE,CAAC"}

package/dist/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/dist/components/ui/directionPad/Middle.styled.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledMiddle = void 0;
 const theme_1 = require("../../../theme");
-const StyledMiddle = (0, theme_1.styled)("button", {
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
+const StyledMiddle = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

package/dist/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,0CAAwC;AAExC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,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;AAGC,oCAAY"}
+{"version":3,"file":"Middle.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwC;AACxC,sEAAmE;AAEnE,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,mCAAgB,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;AAGC,oCAAY"}