react-miui 0.34.0 → 0.36.0

package/dist/components/ui/modal/ModalButtons.styled.d.ts

@@ -1,4 +1,4 @@
-declare const ModalButtons: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
+declare const Container: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: "white";
         mainColor: "#008ad2";
@@ -82,94 +82,93 @@ declare const ModalButtons: import("../../../../node_modules/@stitches/react/typ
         width: string | number;
         height: string | number;
     };
-}>> & {
-    Button: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"button", {
-        variant?: "main";
-    }, {}, 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;
-        };
-    }>>;
-};
-export { ModalButtons, };
+}>>;
+declare const StyledButton: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"button", {
+    variant?: "main";
+}, {}, 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;
+    };
+}>>;
+export { Container, StyledButton, };
 //# sourceMappingURL=ModalButtons.styled.d.ts.map

package/dist/components/ui/modal/ModalButtons.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.styled.ts"],"names":[],"mappings":"AA2CA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEhB,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}
+{"version":3,"file":"ModalButtons.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKb,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BhB,CAAC;AAEH,OAAO,EACH,SAAS,EACT,YAAY,GACf,CAAC"}

package/dist/components/ui/modal/ModalButtons.styled.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButtons = void 0;
+exports.StyledButton = exports.Container = void 0;
 const theme_1 = require("../../../theme");
-const fnWithProps_1 = require("../../../types/fnWithProps");
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
 const Modal_styled_1 = require("./Modal.styled");
 const Container = (0, theme_1.styled)("div", {
     display: "flex",
@@ -10,7 +10,8 @@ const Container = (0, theme_1.styled)("div", {
     mx: Modal_styled_1.NEGATIVE_PADDING,
     marginBottom: Modal_styled_1.NEGATIVE_PADDING,
 });
-const Button = (0, theme_1.styled)("button", {
+exports.Container = Container;
+const StyledButton = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
     "border": "none",
     "borderTop": "1px solid $modalButtonBorder",
     "background": "$modalButtonBg",
@@ -37,8 +38,5 @@ const Button = (0, theme_1.styled)("button", {
         },
     },
 });
-const ModalButtons = (0, fnWithProps_1.fnWithProps)(Container, {
-    Button,
-});
-exports.ModalButtons = ModalButtons;
+exports.StyledButton = StyledButton;
 //# sourceMappingURL=ModalButtons.styled.js.map

package/dist/components/ui/modal/ModalButtons.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.styled.ts"],"names":[],"mappings":";;;AAAA,0CAA2D;AAC3D,4DAAyD;AACzD,iDAAkD;AAElD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IACjC,EAAE,EAAE,+BAAgB;IACpB,YAAY,EAAE,+BAAgB;CACjC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,8BAA8B;IAC3C,YAAY,EAAE,gBAAgB;IAC9B,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAChC,YAAY,EAAE,GAAG;IACjB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAE1B,qBAAqB,EAAE;QACnB,UAAU,EAAE,8BAA8B;KAC7C;IAED,eAAe,EAAE;QACb,sBAAsB,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;KAChD;IAED,cAAc,EAAE;QACZ,uBAAuB,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;KACjD;IAED,UAAU,EAAE;QACR,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAA,yBAAW,EAAC,SAAS,EAAE;IACxC,MAAM;CACT,CAAC,CAAC;AAGC,oCAAY"}
+{"version":3,"file":"ModalButtons.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.styled.ts"],"names":[],"mappings":";;;AAAA,0CAA2D;AAC3D,sEAAmE;AACnE,iDAAkD;AAElD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IACjC,EAAE,EAAE,+BAAgB;IACpB,YAAY,EAAE,+BAAgB;CACjC,CAAC,CAAC;AAmCC,8BAAS;AAjCb,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,mCAAgB,EAAE;IACpD,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,8BAA8B;IAC3C,YAAY,EAAE,gBAAgB;IAC9B,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAChC,YAAY,EAAE,GAAG;IACjB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAE1B,qBAAqB,EAAE;QACnB,UAAU,EAAE,8BAA8B;KAC7C;IAED,eAAe,EAAE;QACb,sBAAsB,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;KAChD;IAED,cAAc,EAAE;QACZ,uBAAuB,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;KACjD;IAED,UAAU,EAAE;QACR,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAIC,oCAAY"}

package/dist/components/ui/pop/Pop.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pop.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKX,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOR,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQZ,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkBV,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGR,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKZ,CAAC;AAEH,OAAO,EACH,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,CAAC"}
+{"version":3,"file":"Pop.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKX,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOR,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQZ,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAcV,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGR,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKZ,CAAC;AAEH,OAAO,EACH,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,CAAC"}

package/dist/components/ui/pop/Pop.styled.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FakeIcon = exports.Icon = exports.Button = exports.ListItem = exports.List = exports.Overlay = void 0;
 const theme_1 = require("../../../theme");
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
 const Overlay = (0, theme_1.styled)("div", {
     position: "fixed",
     background: "#0000004c",
@@ -27,23 +28,20 @@ const ListItem = (0, theme_1.styled)("li", {
     },
 });
 exports.ListItem = ListItem;
-const Button = (0, theme_1.styled)("button", {
-    "border": "none",
-    "background": "$background",
-    "height": (0, theme_1.dimensionsPxToRem)(116),
-    "padding": `0 ${(0, theme_1.dimensionsPxToRem)(42)}`,
-    "boxSizing": "border-box",
-    "width": "100%",
-    "minWidth": (0, theme_1.dimensionsPxToRem)(460),
-    "textAlign": "left",
-    "color": "$popText",
-    "fontSize": (0, theme_1.fontPxToRem)(26),
-    "fontWeight": "revert",
-    "display": "flex",
-    "alignItems": "center",
-    "&:hover": {
-        background: "$activeBg",
-    },
+const Button = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
+    border: "none",
+    background: "$background",
+    height: (0, theme_1.dimensionsPxToRem)(116),
+    padding: `0 ${(0, theme_1.dimensionsPxToRem)(42)}`,
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: (0, theme_1.dimensionsPxToRem)(460),
+    textAlign: "left",
+    color: "$popText",
+    fontSize: (0, theme_1.fontPxToRem)(26),
+    fontWeight: "revert",
+    display: "flex",
+    alignItems: "center",
 });
 exports.Button = Button;
 const Icon = (0, theme_1.styled)("div", {

package/dist/components/ui/pop/Pop.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pop.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwE;AAExE,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC1B,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,WAAW;IACvB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAsDC,0BAAO;AApDX,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IACtB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,aAAa,EAAE,MAAM;CACxB,CAAC,CAAC;AA8CC,oBAAI;AA5CR,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IAC1B,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,eAAe,EAAE,MAAM;IAEvB,OAAO,EAAE;QACL,SAAS,EAAE,mBAAmB;KACjC;CACJ,CAAC,CAAC;AAqCC,4BAAQ;AAnCZ,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,aAAa;IAC3B,QAAQ,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAChC,SAAS,EAAE,KAAK,IAAA,yBAAiB,EAAC,EAAE,CAAC,EAAE;IACvC,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAClC,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;IAC3B,YAAY,EAAE,QAAQ;IACtB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IAEtB,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;CACJ,CAAC,CAAC;AAkBC,wBAAM;AAhBV,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IACvB,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAcC,oBAAI;AAZR,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,MAAM,EAAE;IAC5B,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAQC,4BAAQ"}
+{"version":3,"file":"Pop.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwE;AACxE,sEAAmE;AAEnE,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC1B,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,WAAW;IACvB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAkDC,0BAAO;AAhDX,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IACtB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,aAAa,EAAE,MAAM;CACxB,CAAC,CAAC;AA0CC,oBAAI;AAxCR,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IAC1B,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,eAAe,EAAE,MAAM;IAEvB,OAAO,EAAE;QACL,SAAS,EAAE,mBAAmB;KACjC;CACJ,CAAC,CAAC;AAiCC,4BAAQ;AA/BZ,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,mCAAgB,EAAE;IAC9C,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAC9B,OAAO,EAAE,KAAK,IAAA,yBAAiB,EAAC,EAAE,CAAC,EAAE;IACrC,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IAChC,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;IACzB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACvB,CAAC,CAAC;AAkBC,wBAAM;AAhBV,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IACvB,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAcC,oBAAI;AAZR,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,MAAM,EAAE;IAC5B,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAQC,4BAAQ"}

package/dist/components/ui/pop/PopOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,6EAUb,CAAC;AAKH,QAAA,MAAM,uBAAuB,QAAoB,CAAC;AAClD,QAAA,MAAM,qBAAqB,QAAkB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,6EAqBb,CAAC;AAKH,QAAA,MAAM,uBAAuB,QAAoB,CAAC;AAClD,QAAA,MAAM,qBAAqB,QAAkB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/ui/pop/PopOption.js

@@ -35,16 +35,21 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopOptionIconSelector = exports.PopOptionButtonSelector = exports.PopOption = 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 Pop_styled_1 = require("./Pop.styled");
 const PopOption = (0, react_1.forwardRef)((props, ref) => {
     var _a;
+    const buttonRef = (0, use_forwarded_ref_1.useForwardedRef)(null);
+    const ripple = (0, useRipple_1.useRipple)({ ref: buttonRef });
     const ic = props.icon
         ? react_1.default.createElement(Pop_styled_1.Icon, null, props.icon)
         : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? react_1.default.createElement(Pop_styled_1.FakeIcon, null) : null);
     return (react_1.default.createElement(Pop_styled_1.ListItem, { ref: ref, className: props.className },
-        react_1.default.createElement(Pop_styled_1.Button, { onClick: props.onClick },
+        react_1.default.createElement(Pop_styled_1.Button, { ref: buttonRef, onClick: props.onClick, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
             ic,
-            props.children)));
+            props.children,
+            ripple.ripples)));
 });
 exports.PopOption = PopOption;
 PopOption.displayName = "PopOption";

package/dist/components/ui/pop/PopOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6CAAgE;AAUhE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAuB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;;IAC9D,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,8BAAC,iBAAI,QAAE,KAAK,CAAC,IAAI,CAAQ;QAC3B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAC,qBAAQ,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACH,8BAAC,qBAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1C,8BAAC,mBAAM,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtD,CACd,CAAC;AACN,CAAC,CAAC,CAAC;AAQM,8BAAS;AANlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,qBAAQ,CAAC,QAAQ,EAAE,CAAC;AAE/C,MAAM,uBAAuB,GAAG,mBAAM,CAAC,QAAQ,EAAE,CAAC;AAG9B,0DAAuB;AAF3C,MAAM,qBAAqB,GAAG,iBAAI,CAAC,QAAQ,EAAE,CAAC;AAED,sDAAqB"}
+{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,yEAAoE;AAEpE,wDAAqD;AACrD,6CAAgE;AAUhE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAuB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;;IAC9D,MAAM,SAAS,GAAG,IAAA,mCAAe,EAA2B,IAAI,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;IAE7C,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,8BAAC,iBAAI,QAAE,KAAK,CAAC,IAAI,CAAQ;QAC3B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAC,qBAAQ,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACH,8BAAC,qBAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1C,8BAAC,mBAAM,IACH,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;YAE1B,EAAE;YAAE,KAAK,CAAC,QAAQ;YAClB,MAAM,CAAC,OAAO,CACV,CACF,CACd,CAAC;AACN,CAAC,CAAC,CAAC;AAQM,8BAAS;AANlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,qBAAQ,CAAC,QAAQ,EAAE,CAAC;AAE/C,MAAM,uBAAuB,GAAG,mBAAM,CAAC,QAAQ,EAAE,CAAC;AAG9B,0DAAuB;AAF3C,MAAM,qBAAqB,GAAG,iBAAI,CAAC,QAAQ,EAAE,CAAC;AAED,sDAAqB"}

package/dist/components/ui/toolButton/ToolButton.d.ts

@@ -1,2 +1,95 @@
-export { ToolButton } from "./ToolButton.styled";
+import React from "react";
+declare const ToolButton: 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" | "inline" | "variant"> & import("../../../../node_modules/@stitches/react/types/styled-component").TransformProps<{
+    inline?: boolean | "true";
+    variant?: "secondary" | "secondaryOnLight";
+}, {}> & {
+    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 { ToolButton, };
 //# sourceMappingURL=ToolButton.d.ts.map

package/dist/components/ui/toolButton/ToolButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAgBd,CAAC;AAKH,OAAO,EACH,UAAU,GACb,CAAC"}

package/dist/components/ui/toolButton/ToolButton.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.ToolButton = void 0;
-var ToolButton_styled_1 = require("./ToolButton.styled");
-Object.defineProperty(exports, "ToolButton", { enumerable: true, get: function () { return ToolButton_styled_1.ToolButton; } });
+const react_1 = __importStar(require("react"));
+const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
+const useRipple_1 = require("../../../utils/useRipple");
+const ToolButton_styled_1 = require("./ToolButton.styled");
+const ToolButton = (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(ToolButton_styled_1.StyledToolButton, Object.assign({ ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }, rest),
+        children,
+        ripple.ripples));
+});
+exports.ToolButton = ToolButton;
+ToolButton.displayName = "ToolButton";
+ToolButton.toString = () => ToolButton_styled_1.StyledToolButton.toString();
 //# sourceMappingURL=ToolButton.js.map

package/dist/components/ui/toolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.ts"],"names":[],"mappings":";;;AAAA,yDAAiD;AAAxC,+GAAA,UAAU,OAAA"}
+{"version":3,"file":"ToolButton.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,yEAAoE;AAEpE,wDAAqD;AACrD,2DAAuD;AAIvD,MAAM,UAAU,GAAG,IAAA,kBAAU,EAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnE,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,oCAAgB,kBACb,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS,IACvB,IAAI;QAEP,QAAQ;QACR,MAAM,CAAC,OAAO,CACA,CACtB,CAAC;AACN,CAAC,CAAC,CAAC;AAMC,gCAAU;AAJd,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,UAAU,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,oCAAgB,CAAC,QAAQ,EAAE,CAAC"}

package/dist/components/ui/toolButton/ToolButton.styled.d.ts

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

package/dist/components/ui/toolButton/ToolButton.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8Cd,CAAC;AAEH,OAAO,EACH,UAAU,GACb,CAAC"}
+{"version":3,"file":"ToolButton.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCpB,CAAC;AAEH,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/dist/components/ui/toolButton/ToolButton.styled.js

@@ -1,24 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolButton = void 0;
+exports.StyledToolButton = void 0;
 const theme_1 = require("../../../theme");
-const ToolButton = (0, theme_1.styled)("button", {
-    "height": (0, theme_1.dimensionsPxToRem)(79),
-    "borderRadius": (0, theme_1.dimensionsPxToRem)(10),
-    "fontWeight": "bold",
-    "fontSize": (0, theme_1.fontPxToRem)(23),
-    "display": "flex",
-    "alignItems": "center",
-    "justifyContent": "center",
-    "paddingInline": (0, theme_1.dimensionsPxToRem)(16),
-    "background": "white",
-    "boxSizing": "border-box",
-    "border": `${(0, theme_1.dimensionsPxToRem)(6)} solid transparent`,
-    "color": "$toolButtonText",
-    "&:hover": {
-        background: "#ffffffcc",
-    },
-    "variants": {
+const useRipple_styled_1 = require("../../../utils/useRipple.styled");
+const StyledToolButton = (0, theme_1.styled)("button", useRipple_styled_1.rippleHostStyles, {
+    height: (0, theme_1.dimensionsPxToRem)(79),
+    borderRadius: (0, theme_1.dimensionsPxToRem)(10),
+    fontWeight: "bold",
+    fontSize: (0, theme_1.fontPxToRem)(23),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingInline: (0, theme_1.dimensionsPxToRem)(16),
+    background: "white",
+    boxSizing: "border-box",
+    border: `${(0, theme_1.dimensionsPxToRem)(6)} solid transparent`,
+    color: "$toolButtonText",
+    variants: {
         inline: {
             true: {
                 width: "auto",
@@ -27,12 +25,9 @@ const ToolButton = (0, theme_1.styled)("button", {
         },
         variant: {
             secondary: {
-                "border": `${(0, theme_1.dimensionsPxToRem)(6)} solid #ffffff42`,
-                "background": "none",
-                "&:hover": {
-                    background: "#ffffff22",
-                },
-                "color": "white",
+                border: `${(0, theme_1.dimensionsPxToRem)(6)} solid #ffffff42`,
+                background: "none",
+                color: "white",
             },
             secondaryOnLight: {
                 "border": `${(0, theme_1.dimensionsPxToRem)(6)} solid $border`,
@@ -45,5 +40,5 @@ const ToolButton = (0, theme_1.styled)("button", {
         },
     },
 });
-exports.ToolButton = ToolButton;
+exports.StyledToolButton = StyledToolButton;
 //# sourceMappingURL=ToolButton.styled.js.map

package/dist/components/ui/toolButton/ToolButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwE;AAKxE,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE;IAChC,QAAQ,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IAC/B,cAAc,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,UAAU,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,eAAe,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IACtC,YAAY,EAAE,OAAO;IACrB,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,GAAG,IAAA,yBAAiB,EAAC,CAAC,CAAC,oBAAoB;IAErD,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,SAAS,EAAE;gBACP,QAAQ,EAAE,GAAG,IAAA,yBAAiB,EAAC,CAAC,CAAC,kBAAkB;gBACnD,YAAY,EAAE,MAAM;gBAEpB,SAAS,EAAE;oBACP,UAAU,EAAE,WAAW;iBAC1B;gBACD,OAAO,EAAE,OAAO;aACnB;YACD,gBAAgB,EAAE;gBACd,QAAQ,EAAE,GAAG,IAAA,yBAAiB,EAAC,CAAC,CAAC,gBAAgB;gBACjD,YAAY,EAAE,MAAM;gBACpB,OAAO,EAAE,OAAO;gBAEhB,SAAS,EAAE;oBACP,WAAW,EAAE,eAAe;iBAC/B;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAGC,gCAAU"}
+{"version":3,"file":"ToolButton.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwE;AACxE,sEAAmE;AAKnE,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAC,QAAQ,EAAE,mCAAgB,EAAE;IACxD,MAAM,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IAC7B,YAAY,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;IACzB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,aAAa,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IACpC,UAAU,EAAE,OAAO;IACnB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,GAAG,IAAA,yBAAiB,EAAC,CAAC,CAAC,oBAAoB;IACnD,KAAK,EAAE,iBAAiB;IAExB,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,SAAS,EAAE;gBACP,MAAM,EAAE,GAAG,IAAA,yBAAiB,EAAC,CAAC,CAAC,kBAAkB;gBACjD,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,OAAO;aACjB;YACD,gBAAgB,EAAE;gBACd,QAAQ,EAAE,GAAG,IAAA,yBAAiB,EAAC,CAAC,CAAC,gBAAgB;gBACjD,YAAY,EAAE,MAAM;gBACpB,OAAO,EAAE,OAAO;gBAGhB,SAAS,EAAE;oBACP,WAAW,EAAE,eAAe;iBAC/B;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAGC,4CAAgB"}

package/dist/theme.css-global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css-global.d.ts","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB,cAYtB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}
+{"version":3,"file":"theme.css-global.d.ts","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB,cAWtB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

package/dist/theme.css-global.js

@@ -9,7 +9,6 @@ const injectGlobalStyles = (0, theme_1.globalCss)({
     "*:focus-visible:focus-visible": {
         outline: "none !important",
         borderColor: "$focusColor",
-        backgroundColor: "var(--focus-bg-set)",
     },
     "body": {
         color: "$text",