@gympass/yoga 7.87.1 → 7.88.0

package/cjs/Button/web/Icon.js

@@ -1,82 +1,148 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _StyledButton = _interopRequireDefault(require("./StyledButton"));
-
-var _Icon = _interopRequireDefault(require("../../Icon"));
-
-var _Spinner = _interopRequireDefault(require("../../Spinner"));
-
-var _excluded = ["icon", "theme", "small", "disabled", "isLoading"];
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var IconStyled = (0, _styledComponents["default"])(_StyledButton["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  padding: 0;\n\n  svg {\n    width: unset;\n    height: unset;\n    margin-right: unset;\n\n    transition: fill 0.2s;\n  }\n\n  ", "\n"])), function (_ref) {
-  var small = _ref.small,
-      button = _ref.theme.yoga.components.button;
-  return "\n    width: " + (small ? button.height.small : button.height["default"]) + "px;\n  ";
-});
-var ButtonIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var icon = _ref2.icon,
-      button = _ref2.theme.yoga.components.button,
-      small = _ref2.small,
-      disabled = _ref2.disabled,
-      isLoading = _ref2.isLoading,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(IconStyled, _extends({}, props, {
-    ref: ref,
-    small: small,
-    disabled: disabled || isLoading,
-    "aria-disabled": disabled,
-    isLoading: isLoading
-  }), isLoading ? /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
-    color: "deep",
-    size: small ? 'small' : 'medium'
-  }) : /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    as: icon,
-    size: small ? button.icon.size.small : button.icon.size["default"],
-    role: "img"
-  }));
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Icon_exports = {};
+__export(Icon_exports, {
+  default: () => Icon_default
 });
+module.exports = __toCommonJS(Icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_StyledButton = __toESM(require("./StyledButton"));
+var import_Icon = __toESM(require("../../Icon"));
+var import_Spinner = __toESM(require("../../Spinner"));
+const IconStyled = (0, import_styled_components.default)(import_StyledButton.default)`
+  padding: 0;
+
+  svg {
+    width: unset;
+    height: unset;
+    margin-right: unset;
+
+    transition: fill 0.2s;
+  }
+
+  ${({
+  small,
+  theme: {
+    yoga: {
+      components: { button }
+    }
+  }
+}) => `
+    width: ${small ? button.height.small : button.height.default}px;
+  `}
+`;
+const ButtonIcon = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      icon,
+      theme: {
+        yoga: {
+          components: { button }
+        }
+      },
+      small,
+      disabled,
+      isLoading
+    } = _b, props = __objRest(_b, [
+      "icon",
+      "theme",
+      "small",
+      "disabled",
+      "isLoading"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      IconStyled,
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        small,
+        disabled: disabled || isLoading,
+        "aria-disabled": disabled,
+        isLoading,
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Spinner.default, { color: "deep", size: small ? "small" : "medium" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Icon.default,
+          {
+            as: icon,
+            size: small ? button.icon.size.small : button.icon.size.default,
+            role: "img"
+          }
+        )
+      })
+    );
+  }
+);
 ButtonIcon.propTypes = {
-  small: _propTypes.bool,
-  disabled: _propTypes.bool,
-  secondary: _propTypes.bool,
-  inverted: _propTypes.bool,
-  icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func]),
-  isLoading: _propTypes.bool
+  small: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  secondary: import_prop_types.bool,
+  inverted: import_prop_types.bool,
+  icon: (0, import_prop_types.oneOfType)([import_prop_types.node, import_prop_types.func]),
+  isLoading: import_prop_types.bool
 };
 ButtonIcon.defaultProps = {
   small: false,
-  disabled: undefined,
+  disabled: void 0,
   secondary: false,
   inverted: false,
-  icon: undefined,
+  icon: void 0,
   isLoading: false
 };
-ButtonIcon.displayName = 'Button.Icon';
-
-var _default = (0, _styledComponents.withTheme)(ButtonIcon);
-
-exports["default"] = _default;
+ButtonIcon.displayName = "Button.Icon";
+var Icon_default = (0, import_styled_components.withTheme)(ButtonIcon);

package/cjs/Button/web/Link.js

@@ -1,65 +1,151 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Link_exports = {};
+__export(Link_exports, {
+  default: () => Link_default
+});
+module.exports = __toCommonJS(Link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_common = require("@gympass/yoga-common");
+var import_Button = __toESM(require("./Button"));
+const Link = (0, import_styled_components.default)(import_Button.default)`
+  ${({
+  full,
+  secondary,
+  theme: {
+    yoga: {
+      components: { button }
+    }
+  }
+}) => {
+  const state = secondary ? "secondary" : "primary";
+  return `
+      height: unset;
+      padding: 0;
+      background-color: unset;
+      border: none;
+      border-radius: 0;
+      color: ${button.types.link.font[state].color};
 
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _yogaCommon = require("@gympass/yoga-common");
-
-var _Button = _interopRequireDefault(require("./Button"));
+      svg {
+        margin-right: ${button.types.link.icon.margin.right}px;
+        fill: ${button.types.link.font[state].color};
+      }
 
-var _templateObject;
+      &:disabled,
+      &:not([disabled]):hover,
+      &:not([disabled]):focus,
+      &:not([disabled]):active {
+        box-shadow: unset;
+        background-color: unset;
+      }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+      &:not([disabled]):hover  {
+        color: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.5)};
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+        svg {
+          fill: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.5)};
+        }
+      }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+      &:not([disabled]):focus, &:not([disabled]):active {
+        color: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.75)};
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+        svg {
+          fill: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.75)};
+        }
+      }
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+      &:disabled {
+        color: ${button.types.link.font.disabled.color};
 
-var Link = (0, _styledComponents["default"])(_Button["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var full = _ref.full,
-      secondary = _ref.secondary,
-      button = _ref.theme.yoga.components.button;
-  var state = secondary ? 'secondary' : 'primary';
-  return "\n      height: unset;\n      padding: 0;\n      background-color: unset;\n      border: none;\n      border-radius: 0;\n      color: " + button.types.link.font[state].color + ";\n\n      svg {\n        margin-right: " + button.types.link.icon.margin.right + "px;\n        fill: " + button.types.link.font[state].color + ";\n      }\n\n      &:disabled,\n      &:not([disabled]):hover,\n      &:not([disabled]):focus,\n      &:not([disabled]):active {\n        box-shadow: unset;\n        background-color: unset;\n      }\n\n      &:not([disabled]):hover  {\n        color: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.5) + ";\n\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.75) + ";\n\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.75) + ";\n        }\n      }\n\n      &:disabled {\n        color: " + button.types.link.font.disabled.color + ";\n\n        svg {\n          fill: " + button.types.link.font.disabled.color + ";\n        }\n      }\n\n      " + (full ? 'width: 100%' : '') + "\n    ";
-});
-var ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var rest = _extends({}, _ref2);
+        svg {
+          fill: ${button.types.link.font.disabled.color};
+        }
+      }
 
-  var props = Object.fromEntries(Object.entries(rest).filter(function (_ref3) {
-    var key = _ref3[0];
-    return key !== 'isLoading';
-  }));
-  var disabled = props.disabled;
-  return /*#__PURE__*/_react["default"].createElement(Link, _extends({}, props, {
-    disabled: disabled,
-    "aria-disabled": disabled,
-    ref: ref
-  }));
+      ${full ? "width: 100%" : ""}
+    `;
+}}
+`;
+const ButtonLink = (0, import_react.forwardRef)((_a, ref) => {
+  var rest = __objRest(_a, []);
+  const props = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key !== "isLoading")
+  );
+  const { disabled } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, __spreadProps(__spreadValues({}, props), { disabled, "aria-disabled": disabled, ref }));
 });
 ButtonLink.propTypes = {
-  disabled: _propTypes.bool,
-  secondary: _propTypes.bool,
-  href: _propTypes.string,
-
+  disabled: import_prop_types.bool,
+  secondary: import_prop_types.bool,
+  href: import_prop_types.string,
   /** an Icon from yoga-icons package */
-  icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func])
+  icon: (0, import_prop_types.oneOfType)([import_prop_types.node, import_prop_types.func])
 };
 ButtonLink.defaultProps = {
-  disabled: undefined,
+  disabled: void 0,
   secondary: false,
-  href: undefined,
-  icon: undefined
+  href: void 0,
+  icon: void 0
 };
-ButtonLink.displayName = 'Button.Link';
-var _default = ButtonLink;
-exports["default"] = _default;
+ButtonLink.displayName = "Button.Link";
+var Link_default = ButtonLink;

package/cjs/Button/web/Outline.js

@@ -1,30 +1,143 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Outline_exports = {};
+__export(Outline_exports, {
+  default: () => Outline_default
+});
+module.exports = __toCommonJS(Outline_exports);
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_common = require("@gympass/yoga-common");
+var import_Button = __toESM(require("./Button"));
+const ButtonOutline = (0, import_styled_components.default)(import_Button.default)`
+  ${({
+  inverted,
+  secondary,
+  isLoading,
+  theme: {
+    yoga: {
+      colors: { white },
+      components: {
+        button: {
+          types: { outline }
+        }
+      }
+    }
+  }
+}) => {
+  const state = secondary ? "secondary" : "primary";
+  return `
+      background-color: ${outline.backgroundColor.default};
+      border: ${outline.border.width}px solid;
+      border-color: ${outline.font.default[state].color};
+      color: ${outline.font.default[state].color};
 
-exports.__esModule = true;
-exports["default"] = void 0;
+      svg {
+        fill: ${outline.font.default[state].color};
+      }
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+      &:not([disabled]):hover, &:not([disabled]):focus {
+        background-color: ${outline.backgroundColor[state].hover};
+        color: ${outline.font.hover.color};
 
-var _yogaCommon = require("@gympass/yoga-common");
+        svg {
+          fill: ${outline.font.hover.color};
+        }
+      }
 
-var _Button = _interopRequireDefault(require("./Button"));
+      &:not([disabled]):active {
+        background-color: ${outline.backgroundColor.default};
+        border-color: ${outline.font.pressed[state].color};
+        color: ${outline.font.pressed[state].color};
+        box-shadow: none;
 
-var _templateObject;
+        svg {
+          fill: ${outline.font.pressed[state].color};
+        }
+      }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+      &:disabled {
+        background-color: ${outline.backgroundColor.default};
+        border-color: ${outline.font.disabled.color};
+        color: ${outline.font.disabled.color};
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+         svg {
+          fill: ${outline.font.disabled.color};
+        }
+      }
 
-var ButtonOutline = (0, _styledComponents["default"])(_Button["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var inverted = _ref.inverted,
-      secondary = _ref.secondary,
-      isLoading = _ref.isLoading,
-      _ref$theme$yoga = _ref.theme.yoga,
-      white = _ref$theme$yoga.colors.white,
-      outline = _ref$theme$yoga.components.button.types.outline;
-  var state = secondary ? 'secondary' : 'primary';
-  return "\n      background-color: " + outline.backgroundColor["default"] + ";\n      border: " + outline.border.width + "px solid;\n      border-color: " + outline.font["default"][state].color + ";\n      color: " + outline.font["default"][state].color + ";\n\n      svg {\n        fill: " + outline.font["default"][state].color + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus {\n        background-color: " + outline.backgroundColor[state].hover + ";\n        color: " + outline.font.hover.color + ";\n\n        svg {\n          fill: " + outline.font.hover.color + ";\n        }\n      }\n\n      &:not([disabled]):active {\n        background-color: " + outline.backgroundColor["default"] + ";\n        border-color: " + outline.font.pressed[state].color + ";\n        color: " + outline.font.pressed[state].color + ";\n        box-shadow: none;\n\n        svg {\n          fill: " + outline.font.pressed[state].color + ";\n        }\n      }\n\n      &:disabled {\n        background-color: " + outline.backgroundColor["default"] + ";\n        border-color: " + outline.font.disabled.color + ";\n        color: " + outline.font.disabled.color + ";\n\n         svg {\n          fill: " + outline.font.disabled.color + ";\n        }\n      }\n\n      " + (inverted ? "\n            border-color: " + white + ";\n            color: " + white + ";\n\n            svg {\n              fill: " + white + ";\n            }\n\n            &:not([disabled]):hover, &:not([disabled]):focus {\n              background-color: " + white + ";\n              color: " + outline.font["default"][state].color + ";\n\n              svg {\n                fill: " + outline.font["default"][state].color + ";\n              }\n            }\n\n            &:not([disabled]):active {\n              background-color: " + outline.backgroundColor["default"] + ";\n              border-color: " + (0, _yogaCommon.hexToRgb)(white, 0.75) + ";\n              color: " + (0, _yogaCommon.hexToRgb)(white, 0.75) + ";\n\n              svg {\n                fill: " + (0, _yogaCommon.hexToRgb)(white, 0.75) + ";\n              }\n            }\n\n            &:disabled {\n              border-color: " + outline.font.disabled.color + ";\n              color: " + outline.font.disabled.color + ";\n              svg {\n                fill: " + outline.font.disabled.color + ";\n              }\n            }\n          " : '') + "\n\n      " + (isLoading ? "\n            &:disabled {\n              color: transparent;\n\n              svg {\n                fill: transparent;\n              }\n            }\n            " : '') + "\n    ";
-});
-ButtonOutline.displayName = 'Button.Outline';
-var _default = ButtonOutline;
-exports["default"] = _default;
+      ${inverted ? `
+            border-color: ${white};
+            color: ${white};
+
+            svg {
+              fill: ${white};
+            }
+
+            &:not([disabled]):hover, &:not([disabled]):focus {
+              background-color: ${white};
+              color: ${outline.font.default[state].color};
+
+              svg {
+                fill: ${outline.font.default[state].color};
+              }
+            }
+
+            &:not([disabled]):active {
+              background-color: ${outline.backgroundColor.default};
+              border-color: ${(0, import_yoga_common.hexToRgb)(white, 0.75)};
+              color: ${(0, import_yoga_common.hexToRgb)(white, 0.75)};
+
+              svg {
+                fill: ${(0, import_yoga_common.hexToRgb)(white, 0.75)};
+              }
+            }
+
+            &:disabled {
+              border-color: ${outline.font.disabled.color};
+              color: ${outline.font.disabled.color};
+              svg {
+                fill: ${outline.font.disabled.color};
+              }
+            }
+          ` : ""}
+
+      ${isLoading ? `
+            &:disabled {
+              color: transparent;
+
+              svg {
+                fill: transparent;
+              }
+            }
+            ` : ""}
+    `;
+}}
+`;
+ButtonOutline.displayName = "Button.Outline";
+var Outline_default = ButtonOutline;