react-miui 0.28.2 → 0.29.0

package/esm/components/native/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/native/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAE9B,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/native/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,EAAE;IACtB,eAAe,EAAE,GAAG;CACvB,CAAC,CAAC;AAEH,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/esm/components/ui/action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKnC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiEtE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACtC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,SAAS,GAAG,IAAI,CAClB,UAA+C,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACP,CAAC;IAC7E,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpC,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;IAC5C,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,iCAAM,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEpD,MAAM,OAAO,GAAG,CACZ;QACI,oBAAC,YAAY;YAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAC,KAAK,QAAE,KAAK,CAAC,KAAK,CAAS,CAAC,CAAC,CAAC,IAAI;YAAE,QAAQ,CAAgB;QACzF,SAAS,CACX,CACN,CAAC;IAEF,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;QAChB,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC;YACrB,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,CACH,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,EAAE,KAAM,SAAS;YACrC,oBAAC,MAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,QAAQ,IAAG,OAAO,CAAU,CAC3D,CAChB,CAAC;IACN,CAAC;IAED,IAAI,MAAM,IAAI,KAAK,EAAE,CAAC;QAClB,OAAO,oBAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,SAAS,KAAM,QAAQ,IAAG,OAAO,CAAU,CAAC;IACjH,CAAC;IAED,OAAO,CACH,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,QAAQ,EAAE,IAAI,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,IACjG,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKnC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiEtE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACtC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,SAAS,GAAG,IAAI,CAClB,UAAqC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACG,CAAC;IAC7E,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpC,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;IAC5C,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,iCAAM,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEpD,MAAM,OAAO,GAAG,CACZ;QACI,oBAAC,YAAY;YAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAC,KAAK,QAAE,KAAK,CAAC,KAAK,CAAS,CAAC,CAAC,CAAC,IAAI;YAAE,QAAQ,CAAgB;QACzF,SAAS,CACX,CACN,CAAC;IAEF,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;QAChB,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC;YACrB,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,CACH,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,EAAE,KAAM,SAAS;YACrC,oBAAC,MAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,QAAQ,IAAG,OAAO,CAAU,CAC3D,CAChB,CAAC;IACN,CAAC;IAED,IAAI,MAAM,IAAI,KAAK,EAAE,CAAC;QAClB,OAAO,oBAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,SAAS,KAAM,QAAQ,IAAG,OAAO,CAAU,CAAC;IACjH,CAAC;IAED,OAAO,CACH,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAM,QAAQ,EAAE,IAAI,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,IACjG,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/ui/action/Action.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 import { Action } from "./Action";
 declare const meta: Meta;
 type Story = StoryObj<typeof Action>;

package/esm/components/ui/action/Action.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAcd,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAMb,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,KAMX,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAgBrB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,MAAM,EACN,IAAI,EACJ,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Action.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAcd,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAMb,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,KAMX,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAgBrB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,MAAM,EACN,IAAI,EACJ,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/ui/action/EqualActions.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-interface Props {
+type EqualActionsProps = {
     className?: string;
     mode?: "horizontal" | "vertical";
     children: React.ReactNode;
-}
-declare const EqualActions: React.FC<Props>;
+};
+declare const EqualActions: React.ForwardRefExoticComponent<EqualActionsProps & React.RefAttributes<HTMLDivElement>>;
 export { EqualActions };
+export type { EqualActionsProps };
 //# sourceMappingURL=EqualActions.d.ts.map

package/esm/components/ui/action/EqualActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,KAAK,iBAAiB,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,YAAY,0FAuBhB,CAAC;AAKH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/components/ui/action/EqualActions.js

@@ -1,8 +1,7 @@
-import React from "react";
-import classnames from "classnames";
+import React, { forwardRef } from "react";
 import { Action } from "./Action.js";
-import styles from "./EqualActions.module.scss";
-const EqualActions = (props) => {
+import { StyledEqualActions } from "./EqualActions.styled.js";
+const EqualActions = forwardRef((props, ref) => {
     React.Children.forEach(props.children, (child) => {
         if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {
             throw new TypeError("Every child of EqualActions must be an Action component");
@@ -11,8 +10,10 @@ const EqualActions = (props) => {
     const style = {
         "--actions-count": React.Children.count(props.children),
     };
-    const cls = classnames(styles.actions, props.className, { [styles.vertical]: props.mode === "vertical" });
-    return (React.createElement("div", { className: cls, style: style }, props.children));
-};
+    const isVertical = props.mode === "vertical";
+    return (React.createElement(StyledEqualActions, { className: props.className, vertical: isVertical, css: style, ref: ref }, props.children));
+});
+EqualActions.displayName = "EqualActions";
+EqualActions.toString = () => StyledEqualActions.toString();
 export { EqualActions };
 //# sourceMappingURL=EqualActions.js.map

package/esm/components/ui/action/EqualActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAQhD,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACrF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;QACnF,CAAC;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC,CAAC;IAEpH,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,IAC5B,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQ3D,MAAM,YAAY,GAAG,UAAU,CAAoC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACrF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;QACnF,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAa;QACpB,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KAC1D,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC;IAE7C,OAAO,CACH,oBAAC,kBAAkB,IACf,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACE,CACxB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,YAAY,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/ui/action/EqualActions.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EqualActions } from "./EqualActions";
+declare const meta: Meta<typeof EqualActions>;
+type Story = StoryObj<typeof EqualActions>;
+declare const Default: Story;
+declare const VerticalMode: Story;
+declare const CustomStyled: Story;
+export { Default, VerticalMode, CustomStyled };
+export default meta;
+//# sourceMappingURL=EqualActions.stories.d.ts.map

package/esm/components/ui/action/EqualActions.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EqualActions.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAO3C,QAAA,MAAM,OAAO,EAAE,KAQd,CAAC;AAKF,QAAA,MAAM,YAAY,EAAE,KAQnB,CAAC;AAKF,QAAA,MAAM,YAAY,EAAE,KAmBnB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAC/C,eAAe,IAAI,CAAC"}

package/esm/components/ui/action/EqualActions.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { ICON } from "../../icons/Icon.js";
+import { EqualActions } from "./EqualActions.js";
+import { Action } from "./Action.js";
+const meta = {
+    title: "Components/UI/EqualActions",
+    component: EqualActions,
+    tags: ["autodocs", "ui"],
+};
+const Default = {
+    render: () => (React.createElement(EqualActions, null,
+        React.createElement(Action, { icon: ICON.checkmark, label: "Add" }),
+        React.createElement(Action, { icon: ICON.checkmark, label: "Delete" }),
+        React.createElement(Action, { icon: ICON.checkmark, label: "Share on Web" }))),
+};
+const VerticalMode = {
+    render: () => (React.createElement(EqualActions, { mode: "vertical" },
+        React.createElement(Action, { icon: ICON.checkmark, label: "Add" }),
+        React.createElement(Action, { icon: ICON.checkmark, label: "Delete" }),
+        React.createElement(Action, { icon: ICON.checkmark, label: "Share on Web" }))),
+};
+const CustomStyled = {
+    render: () => {
+        const customStyle = {
+            padding: "10px",
+            background: "#f5f5f5",
+            borderRadius: "8px",
+        };
+        return (React.createElement("div", { style: customStyle },
+            React.createElement(EqualActions, { className: "custom-equal-actions" },
+                React.createElement(Action, { icon: ICON.checkmark, label: "Add" }),
+                React.createElement(Action, { icon: ICON.checkmark, label: "Delete" }),
+                React.createElement(Action, { icon: ICON.checkmark, label: "Share on Web" }))));
+    },
+};
+export { Default, VerticalMode, CustomStyled };
+export default meta;
+//# sourceMappingURL=EqualActions.stories.js.map

package/esm/components/ui/action/EqualActions.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EqualActions.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAA8B;IACpC,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC;CAC3B,CAAC;AASF,MAAM,OAAO,GAAU;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,oBAAC,YAAY;QACT,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;QAC9C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAI;QACjD,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,cAAc,GAAI,CAC5C,CAClB;CACJ,CAAC;AAKF,MAAM,YAAY,GAAU;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,oBAAC,YAAY,IAAC,IAAI,EAAE,UAAU;QAC1B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;QAC9C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAI;QACjD,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,cAAc,GAAI,CAC5C,CAClB;CACJ,CAAC;AAKF,MAAM,YAAY,GAAU;IACxB,MAAM,EAAE,GAAG,EAAE;QAET,MAAM,WAAW,GAAG;YAChB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,SAAS;YACrB,YAAY,EAAE,KAAK;SACtB,CAAC;QAEF,OAAO,CACH,6BAAK,KAAK,EAAE,WAAW;YACnB,oBAAC,YAAY,IAAC,SAAS,EAAE,sBAAsB;gBAC3C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;gBAC9C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAI;gBACjD,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,cAAc,GAAI,CAC5C,CACb,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAC/C,eAAe,IAAI,CAAC"}

package/esm/components/ui/action/EqualActions.styled.d.ts

@@ -0,0 +1,87 @@
+declare const StyledEqualActions: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    vertical?: boolean | "true";
+}, {}, import("@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";
+        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("@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;
+    };
+}>>;
+export { StyledEqualActions, };
+//# sourceMappingURL=EqualActions.styled.d.ts.map

package/esm/components/ui/action/EqualActions.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EqualActions.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GActB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

package/esm/components/ui/action/EqualActions.styled.js

@@ -0,0 +1,17 @@
+import { dimensionsPxToRem, styled } from "../../../theme.js";
+const StyledEqualActions = styled("div", {
+    "--actions-count": "1",
+    "display": "inline-grid",
+    "gridTemplateColumns": "repeat(var(--actions-count), 1fr)",
+    "gap": dimensionsPxToRem(56),
+    "variants": {
+        vertical: {
+            true: {
+                gridTemplateColumns: "auto",
+                gridTemplateRows: "repeat(var(--actions-count), 1fr)",
+            },
+        },
+    },
+});
+export { StyledEqualActions, };
+//# sourceMappingURL=EqualActions.styled.js.map

package/esm/components/ui/action/EqualActions.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EqualActions.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,EAAE;IACrC,iBAAiB,EAAE,GAAG;IACtB,SAAS,EAAE,aAAa;IACxB,qBAAqB,EAAE,mCAAmC;IAC1D,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAE5B,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,mBAAmB,EAAE,MAAM;gBAC3B,gBAAgB,EAAE,mCAAmC;aACxD;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 import { Button } from "./Button";
 declare const meta: Meta;
 type Story = StoryObj<typeof Button>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAKd,CAAC;AASF,QAAA,MAAM,cAAc,EAAE,KAerB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAKd,CAAC;AASF,QAAA,MAAM,cAAc,EAAE,KAerB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,7 +1,9 @@
 import React from "react";
-interface Props {
+type PadButtonProps = {
     onClick?: (() => void) | undefined;
-}
-declare const PadButton: React.FC<Props>;
-export { PadButton };
+};
+declare const PadButton: React.ForwardRefExoticComponent<PadButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PadButtonDotSelector: string;
+export { PadButton, PadButtonDotSelector };
+export type { PadButtonProps };
 //# sourceMappingURL=Button.d.ts.map

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,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACtC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAI9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"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"}

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

@@ -1,8 +1,11 @@
-import React from "react";
-import styles from "./Pad.module.scss";
-const PadButton = (props) => {
-    return (React.createElement("button", { ...props, className: styles.pad__button },
-        React.createElement("span", { className: styles.pad__dot })));
-};
-export { PadButton };
+import React, { forwardRef } from "react";
+import { StyledButton, StyledDot } from "./Button.styled.js";
+const PadButton = forwardRef((props, ref) => {
+    return (React.createElement(StyledButton, { ...props, ref: ref },
+        React.createElement(StyledDot, null)));
+});
+PadButton.displayName = "PadButton";
+PadButton.toString = () => StyledButton.toString();
+const PadButtonDotSelector = StyledDot.toString();
+export { PadButton, PadButtonDotSelector };
 //# sourceMappingURL=Button.js.map

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,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW;QAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAS,CAClG,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,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,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"}

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

@@ -0,0 +1,168 @@
+declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {}, {}, import("@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";
+        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("@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;
+    };
+}>>;
+declare const StyledDot: import("@stitches/react/types/styled-component").StyledComponent<"span", {}, {}, import("@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";
+        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("@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;
+    };
+}>>;
+export { StyledButton, StyledDot, };
+//# sourceMappingURL=Button.styled.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+import { styled } from "../../../theme.js";
+const StyledButton = styled("button", {
+    height: "50px",
+    width: "50px",
+    margin: "0",
+    borderRadius: "666px",
+    border: "none",
+    display: "block",
+    background: "none",
+});
+const StyledDot = styled("span", {
+    display: "block",
+    width: "4px",
+    height: "4px",
+    borderRadius: "666px",
+    background: "black",
+    margin: "auto",
+});
+export { StyledButton, StyledDot, };
+//# sourceMappingURL=Button.styled.js.map

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

@@ -0,0 +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,OAAO;IACnB,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,SAAS,GACZ,CAAC"}

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

@@ -1,8 +1,9 @@
 import React from "react";
-interface Props {
+type PadMiddleProps = {
     label?: string | undefined;
     onClick?: (() => void) | undefined;
-}
-declare const PadMiddle: React.FC<Props>;
+};
+declare const PadMiddle: React.ForwardRefExoticComponent<PadMiddleProps & React.RefAttributes<HTMLButtonElement>>;
 export { PadMiddle };
+export type { PadMiddleProps };
 //# sourceMappingURL=Middle.d.ts.map

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,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACtC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAI9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"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"}

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

@@ -1,7 +1,9 @@
-import React from "react";
-import styles from "./Pad.module.scss";
-const PadMiddle = (props) => {
-    return (React.createElement("button", { onClick: props.onClick, className: styles.pad__middle }, props.label));
-};
+import React, { forwardRef } from "react";
+import { StyledMiddle } from "./Middle.styled.js";
+const PadMiddle = forwardRef((props, ref) => {
+    return (React.createElement(StyledMiddle, { onClick: props.onClick, ref: ref }, props.label));
+});
+PadMiddle.displayName = "PadMiddle";
+PadMiddle.toString = () => StyledMiddle.toString();
 export { PadMiddle };
 //# sourceMappingURL=Middle.js.map

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,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,KAAK,CAAU,CACxF,CAAC;AACN,CAAC,CAAC;AAEF,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,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"}