@gympass/yoga 7.88.0 → 7.88.1

package/esm/Button/native/Button.js

@@ -0,0 +1,198 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import styled, { withTheme } from "styled-components";
+import { node, oneOfType, func, bool } from "prop-types";
+import withTouchable from "./withTouchable";
+import Text from "../../Text";
+const Label = styled(Text.Medium)`
+  text-align: center;
+  ${({
+  small,
+  color,
+  theme: {
+    yoga: {
+      components: { button }
+    }
+  }
+}) => `
+      font-size: ${small ? button.font.size.small : button.font.size.default}px;
+      color: ${color};
+    `}
+`;
+const ButtonContainer = styled.View`
+  ${({
+  pressed,
+  disabled,
+  full,
+  small,
+  inverted,
+  secondary,
+  theme: {
+    yoga: {
+      components: { button }
+    }
+  }
+}) => {
+  const state = secondary ? "secondary" : "primary";
+  return `
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+
+      background-color: ${button.types.contained.backgroundColor[state].default};
+      border-radius: ${button.border.radius}px;
+      height: ${small ? button.height.small : button.height.default};
+      justify-content: center;
+      padding-left: ${small ? button.padding.small.left : button.padding.default.left}px;
+      padding-right: ${small ? button.padding.small.right : button.padding.default.right}px;
+      ${full ? "width: 100%;" : ""}
+
+      ${!disabled && pressed ? `
+        background-color: ${button.types.contained.backgroundColor[state].pressed};
+      ` : ""}
+
+      ${disabled ? `
+        background-color: ${button.types.contained.backgroundColor.disabled};
+      ` : ""}
+
+      ${inverted && !disabled ? `
+          background-color: ${button.types.contained.font.default.color};
+        ` : ""}
+    `;
+}}
+`;
+const Button = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      full,
+      disabled,
+      small,
+      pressed,
+      inverted,
+      secondary,
+      icon: Icon,
+      theme: {
+        yoga: {
+          components: { button }
+        }
+      }
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "full",
+      "disabled",
+      "small",
+      "pressed",
+      "inverted",
+      "secondary",
+      "icon",
+      "theme"
+    ]);
+    const state = secondary ? "secondary" : "primary";
+    let textColor = button.types.contained.font.default.color;
+    if (disabled) {
+      textColor = button.types.contained.font.disabled.color;
+    } else if (inverted) {
+      textColor = button.types.contained.backgroundColor[state].default;
+      if (pressed) {
+        textColor = button.types.contained.backgroundColor[state].pressed;
+      }
+    } else if (pressed) {
+      textColor = button.types.contained.font.pressed.color;
+    }
+    return /* @__PURE__ */ jsxs(
+      ButtonContainer,
+      __spreadProps(__spreadValues({}, rest), {
+        full,
+        pressed,
+        disabled,
+        small,
+        inverted,
+        secondary,
+        ref,
+        children: [
+          Icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              width: small ? button.icon.size.small : button.icon.size.default,
+              height: small ? button.icon.size.small : button.icon.size.default,
+              fill: textColor,
+              style: {
+                marginRight: button.icon.margin.right
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              disabled,
+              pressed,
+              inverted,
+              small,
+              color: textColor,
+              children
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Button.propTypes = {
+  children: node,
+  full: bool,
+  disabled: bool,
+  small: bool,
+  pressed: bool,
+  inverted: bool,
+  secondary: bool,
+  /** an Icon from yoga-icons package */
+  icon: oneOfType([bool, func])
+};
+Button.defaultProps = {
+  children: "Button",
+  full: false,
+  disabled: false,
+  small: false,
+  pressed: false,
+  inverted: false,
+  secondary: false,
+  icon: void 0
+};
+const ButtonWithTouchable = withTouchable(withTheme(Button));
+export {
+  ButtonContainer,
+  Label,
+  ButtonWithTouchable as default
+};

package/esm/Button/native/Button.test.js

@@ -0,0 +1,342 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Booking } from "@gympass/yoga-icons";
+import ThemeProvider from "../../Theme";
+import Button from "..";
+describe("<Button />", () => {
+  describe("Snapshots", () => {
+    describe("primary buttons", () => {
+      describe("Without props", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, {}) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, {}) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with link Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Link, {}) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With inverted prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { inverted: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { inverted: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { inverted: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { inverted: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with icon Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { icon: Booking, inverted: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With small prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { small: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { small: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { small: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { small: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With full prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { full: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { full: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { full: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { full: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With large prop", () => {
+        it("should match snapshot icon Button with large prop", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { icon: Booking, large: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+    });
+    describe("secondary buttons", () => {
+      describe("Without props", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with link Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Link, { secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with icon Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With inverted prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { inverted: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { inverted: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { inverted: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { inverted: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with icon Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { inverted: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With small prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { small: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { small: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { small: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { small: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With full prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { full: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { full: true, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { full: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { full: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+      describe("With large prop", () => {
+        it("should match snapshot icon Button with large prop", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { large: true, icon: Booking, secondary: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+    });
+    describe("disabled buttons", () => {
+      describe("With disabled prop", () => {
+        it("should match snapshot with default Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { disabled: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { disabled: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with link Button", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Link, { disabled: true }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with default Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { disabled: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with text Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { disabled: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+        it("should match snapshot with icon Button with Icon", () => {
+          const { toJSON } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { disabled: true, icon: Booking }) })
+          );
+          expect(toJSON()).toMatchSnapshot();
+        });
+      });
+    });
+  });
+  describe("onPress prop", () => {
+    it("should call onPress function when click on Button", () => {
+      const onPressMock = jest.fn();
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { onPress: onPressMock, children: "Button" }) })
+      );
+      fireEvent.press(getByText("Button"));
+      expect(onPressMock).toHaveBeenCalled();
+    });
+    it("should call onPress function when press on Button.Text", () => {
+      const onPressMock = jest.fn();
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Text, { onPress: onPressMock, children: "Button.Text" }) })
+      );
+      fireEvent.press(getByText("Button.Text"));
+      expect(onPressMock).toHaveBeenCalled();
+    });
+    it("should call onPress function when press on Button.Icon", () => {
+      const onPressMock = jest.fn();
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button.Icon, { onPress: onPressMock, icon: Booking }) })
+      );
+      fireEvent.press(getByRole("button"));
+      expect(onPressMock).toHaveBeenCalled();
+    });
+    it("should not call onPress function when press on Button disabled", () => {
+      const onPressMock = jest.fn();
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Button, { disabled: true, onPress: onPressMock, children: "Button" }) })
+      );
+      fireEvent.press(getByText("Button"));
+      expect(onPressMock).not.toHaveBeenCalled();
+    });
+  });
+});

package/esm/Button/native/Icon.js

@@ -0,0 +1,156 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import styled, { withTheme } from "styled-components";
+import { node, oneOfType, func, bool } from "prop-types";
+import Icon from "../../Icon";
+import withTouchable from "./withTouchable";
+const ButtonContainer = styled.View`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({
+  small,
+  secondary,
+  theme: {
+    yoga: {
+      components: { button }
+    }
+  },
+  disabled,
+  inverted,
+  pressed
+}) => {
+  const state = secondary ? "secondary" : "primary";
+  return `
+      border-radius: ${button.border.radius}px;
+
+      background-color: ${button.types.contained.backgroundColor[state].default};
+
+      width: ${small ? button.height.small : button.height.default}px;
+      height: ${small ? button.height.small : button.height.default}px;
+
+      ${!disabled && pressed ? `
+        background-color: ${button.types.contained.backgroundColor[state].pressed};
+      ` : ""}
+
+      ${disabled ? `
+        background-color: ${button.types.contained.backgroundColor.disabled};
+      ` : ""}
+
+      ${inverted && !disabled ? `
+          background-color: ${button.types.contained.font.default.color};
+        ` : ""}
+    `;
+}}
+`;
+const ButtonIcon = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      icon,
+      theme: {
+        yoga: {
+          components: { button }
+        }
+      },
+      small,
+      pressed,
+      disabled,
+      inverted,
+      secondary
+    } = _b, props = __objRest(_b, [
+      "icon",
+      "theme",
+      "small",
+      "pressed",
+      "disabled",
+      "inverted",
+      "secondary"
+    ]);
+    const state = secondary ? "secondary" : "primary";
+    let textColor = button.types.contained.font.default.color;
+    if (disabled) {
+      textColor = button.types.contained.font.disabled.color;
+    } else if (inverted) {
+      textColor = button.types.contained.backgroundColor[state].default;
+      if (pressed) {
+        textColor = button.types.contained.backgroundColor[state].pressed;
+      }
+    } else if (pressed) {
+      textColor = button.types.contained.font.pressed.color;
+    }
+    return /* @__PURE__ */ jsx(
+      ButtonContainer,
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        small,
+        pressed,
+        disabled,
+        inverted,
+        secondary,
+        accessible: true,
+        accessibilityRole: "button",
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            as: icon,
+            fill: textColor,
+            size: small ? button.icon.size.small : button.icon.size.default
+          }
+        )
+      })
+    );
+  }
+);
+ButtonIcon.propTypes = {
+  small: bool,
+  disabled: bool,
+  pressed: bool,
+  inverted: bool,
+  secondary: bool,
+  icon: oneOfType([node, func])
+};
+ButtonIcon.defaultProps = {
+  small: false,
+  disabled: false,
+  pressed: false,
+  inverted: false,
+  secondary: false,
+  icon: void 0
+};
+ButtonIcon.displayName = "Button.Icon";
+var Icon_default = withTouchable(withTheme(ButtonIcon));
+export {
+  Icon_default as default
+};