@occmundial/occ-atomic 2.0.0-beta.13 → 2.0.0-beta.14

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [2.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-05-07)
+
+
+### Features
+
+* Add hover shadow ([207b7a2](https://github.com/occmundial/occ-atomic/commit/207b7a2819771ff7384c7c53448f37d5dfb7e146))
+* Add new fab component ([2164eea](https://github.com/occmundial/occ-atomic/commit/2164eea04ed268165609db2bcd80be4dd02df6a2))
+* Remove fab border transition ([485e64c](https://github.com/occmundial/occ-atomic/commit/485e64ca574f3300a159b8c4a5bedf11ee49b32d))
+* Remove fab border transition ([9561c59](https://github.com/occmundial/occ-atomic/commit/9561c599981f8ccfc76ccdb00b35576d01f53578))
+* Update fab snapshot test ([d75b525](https://github.com/occmundial/occ-atomic/commit/d75b525dd32c4f4b38cebf4f5cd8e0dd1034752e))
+* Update ghost pink loading icon ([9292276](https://github.com/occmundial/occ-atomic/commit/92922766abe7c0010b9f4f4b8265c2105c019f3c))
+* Update snapshots ([438e896](https://github.com/occmundial/occ-atomic/commit/438e8968d5d228d1b9bad3883be676fa1bc8f2b1))
+* Update snapshots ([0395996](https://github.com/occmundial/occ-atomic/commit/0395996ad4f21e6db5b917005c9ccf1c8a9dd0df))
+* Update tokens path and add outline offset ([a7e6807](https://github.com/occmundial/occ-atomic/commit/a7e6807e1936d98c8f72e483b1b131dcfa714877))
+* Update tokens path and add outline offset ([89eeb16](https://github.com/occmundial/occ-atomic/commit/89eeb16a797cb4996069f369bce34b9efb025a3d))
+
 # [2.0.0-beta.13](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-04-29)
 
 

package/build/Button/__snapshots__/Button.test.js.snap

@@ -49,7 +49,7 @@ Object {
   },
   "ghostGrey": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiM1QTVEN0I7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzVBNUQ3QjtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiM1QTVEN0I7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojNUE1RDdCO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzVBNUQ3QiIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojNUE1RDdCIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#5A5D7B",
     },
     "& span span": Object {
       "background": [Function],
@@ -75,7 +75,7 @@ Object {
   },
   "ghostPink": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiNmMTM0NjU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6I2YxMzQ2NTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiNmMTM0NjU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojZjEzNDY1O3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6I2YxMzQ2NSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojZjEzNDY1Ii8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#f13465",
     },
     "& span span": Object {
       "background": [Function],
@@ -232,7 +232,7 @@ Object {
   },
   "secondary": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#083CAE",
     },
     "& span span": Object {
       "background": [Function],
@@ -258,7 +258,7 @@ Object {
   },
   "tertiary": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#083CAE",
     },
     "& span span": Object {
       "background": [Function],

package/build/Button/styles.js

@@ -148,7 +148,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
+      fill: _colors2["default"].icon.brand["default"]
     }
   },
   tertiary: {
@@ -184,7 +184,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
+      fill: _colors2["default"].icon.brand["default"]
     }
   },
   tertiaryWhite: {
@@ -249,7 +249,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([sec]))
+      fill: sec
     }
   },
   ghostGrey: {
@@ -279,7 +279,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon["default"]["default"]]))
+      fill: _colors2["default"].icon["default"]["default"]
     }
   },
   ghostWhite: {

package/build/Fab/Fab.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ *
+ * A floating action button appears in front of all screen content as a circular shape with an icon in its center.
+ */
+var Fab = function Fab(props) {
+  var size = props.size,
+      classes = props.classes,
+      className = props.className,
+      testId = props.testId,
+      icon = props.icon,
+      onClick = props.onClick,
+      href = props.href,
+      target = props.target,
+      rel = props.rel,
+      disabled = props.disabled,
+      id = props.id;
+  var classNames = classes.fab;
+  if (className) classNames += " ".concat(className);
+  if (disabled) classNames += " ".concat(classes.disabled);
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    size: size,
+    icon: icon,
+    onClick: onClick,
+    href: href,
+    target: target,
+    rel: rel,
+    disabled: disabled,
+    round: true,
+    testId: testId,
+    className: classNames,
+    id: id,
+    theme: "tertiary"
+  });
+};
+
+Fab.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+
+  /** Use the name of any of the icons available in the library. */
+  icon: _propTypes["default"].string.isRequired,
+
+  /** The fab has three different sizes: sm, md, lg. */
+  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
+
+  /** It disables the button. */
+  disabled: _propTypes["default"].bool,
+
+  /** The function to call when the button is clicked. */
+  onClick: _propTypes["default"].func,
+
+  /** Optionally, you can set the href property and use it like a link. */
+  href: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the target. */
+  target: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the rel attribute. */
+  rel: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
+};
+var _default = Fab;
+exports["default"] = _default;

package/build/Fab/Fab.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
+var _Fab = _interopRequireDefault(require("./Fab"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('FAB', function () {
+  it('matches the snapshot', function () {
+    var wrapper = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      icon: "testing",
+      theme: "primary",
+      classes: classes
+    })).toJSON();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('returns a Button with an icon', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      classes: classes,
+      icon: "testing"
+    }));
+    expect(wrapper.find('button').length).toBe(1);
+    expect(wrapper.find('button span Jss(Icon)').length).toBe(1);
+    expect(wrapper.find('a').length).toBe(0);
+  });
+  it('returns an anchor', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      classes: classes,
+      href: "http://occ.com.mx",
+      icon: "testing"
+    }));
+    expect(wrapper.find('button').length).toBe(0);
+    expect(wrapper.find('a').length).toBe(1);
+  });
+  it('has the right size', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      classes: classes,
+      icon: "testing",
+      size: "md"
+    }));
+    expect(wrapper.find('button').prop('className').indexOf('md')).not.toBe(-1);
+    expect(wrapper.find('button').prop('className').indexOf('lg')).toBe(-1);
+    wrapper.setProps({
+      size: 'lg'
+    });
+    expect(wrapper.find('button').prop('className').indexOf('md')).toBe(-1);
+    expect(wrapper.find('button').prop('className').indexOf('lg')).not.toBe(-1);
+  });
+});

package/build/Fab/__snapshots__/Fab.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAB matches the snapshot 1`] = `
+<button
+  className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+>
+  <span
+    className="Button-cont-0-1-29 Button-cont-0-1-2"
+  >
+    <span
+      className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"
+    />
+    
+  </span>
+</button>
+`;

package/build/Fab/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Fab = _interopRequireDefault(require("./Fab"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Fab["default"]);
+
+exports["default"] = _default;

package/build/Fab/styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  fab: {
+    background: "".concat(_colors["default"].bg.surface["default"], " !important"),
+    outline: "1px solid ".concat(_colors["default"].border["default"]["default"]),
+    outlineOffset: '-1px',
+    boxShadow: _shadows["default"]["elevation-elevation-4"],
+    transition: '0.3s all, 0s outline, 0s outline-offset',
+    '&:hover': {
+      outlineColor: _colors["default"].border["default"].bold,
+      background: "".concat(_colors["default"].bg["default"], " !important")
+    },
+    '&:active, &:focus': {
+      outline: "2px solid ".concat(_colors["default"].border["default"].bold),
+      outlineOffset: '-2px',
+      background: "".concat(_colors["default"].bg["default"], " !important")
+    },
+    '&$disabled': {
+      color: _colors["default"].text.indigo.secondary,
+      cursor: 'not-allowed',
+      outlineColor: _colors["default"].border["default"].subtle
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-corp'],
+      outlineColor: _colors["default"].border["default"]["default"]
+    }
+  },
+  disabled: {
+    cursor: 'default',
+    pointerEvents: 'none'
+  }
+};
+exports["default"] = _default;

package/build/index.js

@@ -82,6 +82,8 @@ var _Toaster = _interopRequireDefault(require("./Toaster"));
 
 var _functions = require("./Toaster/functions");
 
+var _Fab = _interopRequireDefault(require("./Fab"));
+
 var _NavTab = _interopRequireDefault(require("./NavTab"));
 
 var _NavItem = _interopRequireDefault(require("./NavItem"));
@@ -192,5 +194,6 @@ module.exports = {
   spacing: _spacing["default"],
   WindowSize: _WindowSize["default"],
   tokens: tokens,
-  AtomicProvider: _Provider["default"]
+  AtomicProvider: _Provider["default"],
+  Fab: _Fab["default"]
 };

package/build/subatomic/icons/occDart.js

@@ -7,7 +7,7 @@ exports.occDartBlue = exports.occDartWhite = exports.occDartGrey = exports.occDa
 
 var _colors = _interopRequireDefault(require("../colors"));
 
-var _tokens = require("../../tokens");
+var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
 
 var _iconSizes = _interopRequireDefault(require("../iconSizes"));
 
@@ -19,7 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var brand = _tokens.colors.icon.brand;
+var brand = _colors2["default"].icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
     white = _colors["default"].white;

package/build/subatomic/icons/occHorizontal.js

@@ -7,7 +7,7 @@ exports.occHorizontalBlue = exports.occHorizontalWhite = exports.occHorizontalGr
 
 var _colors = _interopRequireDefault(require("../colors"));
 
-var _tokens = require("../../tokens");
+var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var brand = _tokens.colors.icon.brand;
+var brand = _colors2["default"].icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
     white = _colors["default"].white;

package/build/subatomic/icons/occLogo.js

@@ -7,7 +7,7 @@ exports.occLogoBlue = exports.occLogoWhite = exports.occLogoGrey = exports.occLo
 
 var _colors = _interopRequireDefault(require("../colors"));
 
-var _tokens = require("../../tokens");
+var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var brand = _tokens.colors.icon.brand;
+var brand = _colors2["default"].icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
     white = _colors["default"].white;

package/build/subatomic/icons/occVertical.js

@@ -7,7 +7,7 @@ exports.occVerticalBlue = exports.occVerticalWhite = exports.occVerticalGrey = e
 
 var _colors = _interopRequireDefault(require("../colors"));
 
-var _tokens = require("../../tokens");
+var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var brand = _tokens.colors.icon.brand;
+var brand = _colors2["default"].icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
     white = _colors["default"].white;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",