react-miui 0.35.0 → 0.36.0

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/ModalButtons.d.ts

@@ -1,2 +1,180 @@
-export { ModalButtons } from "./ModalButtons.styled";
+import React from "react";
+declare const ModalButtons: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, 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;
+    };
+}>> & {
+    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;
+    }, "css" | "variant"> & import("../../../../node_modules/@stitches/react/types/styled-component").TransformProps<{
+        variant?: "main";
+    }, {}> & {
+        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 { ModalButtons, };
 //# sourceMappingURL=ModalButtons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AA+B1C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEhB,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

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

@@ -1,2 +1,20 @@
-export { ModalButtons } from "./ModalButtons.styled.js";
+import React, { forwardRef } from "react";
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+import { fnWithProps } from "../../../types/fnWithProps.js";
+import { useRipple } from "../../../utils/useRipple.js";
+import { Container, StyledButton } from "./ModalButtons.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 = "ModalButtons.Button";
+Button.toString = () => StyledButton.toString();
+const ModalButtons = fnWithProps(Container, {
+    Button,
+});
+export { ModalButtons, };
 //# sourceMappingURL=ModalButtons.js.map

package/esm/components/ui/modal/ModalButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"ModalButtons.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrE,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,qBAAqB,CAAC;AAC3C,MAAM,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAEhD,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,EAAE;IACxC,MAAM;CACT,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}