@occmundial/occ-atomic 2.0.0-beta.9 → 2.0.1

package/CHANGELOG.md

@@ -1,3 +1,126 @@
+## [2.0.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v2.0.1) (2024-06-12)
+
+
+### Bug Fixes
+
+* Remove fixed size for right-side icon in button ([1228467](https://github.com/occmundial/occ-atomic/commit/1228467ba0d107bba0e70603c28a3ccffaec306b))
+
+# [2.0.0](https://github.com/occmundial/occ-atomic/compare/v1.39.1...v2.0.0) (2024-05-27)
+
+
+### Bug Fixes
+
+* Add exception for the provider in the babel plugin ([4383e87](https://github.com/occmundial/occ-atomic/commit/4383e876ef28bb773dca3ff9149dfe1ad7cc53a1))
+* Add missed icons ([a5527c5](https://github.com/occmundial/occ-atomic/commit/a5527c5eff5afb23c142c0b412756ee8f6a11b02))
+* Adjust icon in prev and next button ([8d78c19](https://github.com/occmundial/occ-atomic/commit/8d78c196ce2a27990084683fbeb95b0b9e49be02))
+* Adjust styles for ghostPink theme and button icons ([942a2c9](https://github.com/occmundial/occ-atomic/commit/942a2c967cea88479154a65a98f2961bfbd406ce))
+* Adjust styles for ghostPink theme and button icons ([9e2576e](https://github.com/occmundial/occ-atomic/commit/9e2576efb42856f1a91ab271ea4b823fbbfbf45d))
+* Change font tokens in Button ([7b0b47a](https://github.com/occmundial/occ-atomic/commit/7b0b47ab608530cf4fa6ea31afb2592ad70958c9))
+* Change logic to fallback legacy icons ([60f37f4](https://github.com/occmundial/occ-atomic/commit/60f37f48391713faba97f6d4f93e60519d79b348))
+* Change name of the import for AtomicProvider in babel ([d0157de](https://github.com/occmundial/occ-atomic/commit/d0157de2321bce412dc0662a98f89a6196dbc917))
+* Change tabs to spaces ([ba606c3](https://github.com/occmundial/occ-atomic/commit/ba606c3951a779fd05937fed49f785cc529cd611))
+* Change the import declaration for the provider ([4fae96e](https://github.com/occmundial/occ-atomic/commit/4fae96e40028fc5d93438f7df3fd7342c0f6392a))
+* Changed font variable to the old one ([75dc28b](https://github.com/occmundial/occ-atomic/commit/75dc28bc0bd174057449c45d4ebe79366ffc8433))
+* Fix loading icon size ([2cf2248](https://github.com/occmundial/occ-atomic/commit/2cf22486a65eb78ce9e7fb18da00a7e237fbcb55))
+* Force padding of 0 in ghostPink button ([778ef27](https://github.com/occmundial/occ-atomic/commit/778ef27301183f43ace721b625582c14c353009b))
+* Include the tokens into the build ([d3d0e1e](https://github.com/occmundial/occ-atomic/commit/d3d0e1eea096847bfcaf99d6c8f56b17d45faa5f))
+* Update design tokens ([6c96339](https://github.com/occmundial/occ-atomic/commit/6c963392e0b3af43978a5189bdbe0304e046f47c))
+* Update tip and toast icons ([07f3474](https://github.com/occmundial/occ-atomic/commit/07f347420e2f3d278274018cd9039508cbd7e504))
+
+
+### Features
+
+* Add hover shadow ([207b7a2](https://github.com/occmundial/occ-atomic/commit/207b7a2819771ff7384c7c53448f37d5dfb7e146))
+* Add logic to use atomic icons and static icons ([6fe277e](https://github.com/occmundial/occ-atomic/commit/6fe277ed83927d29af3cf06573cb6d08a0f399ab))
+* Add logic to use atomic icons and static icons ([0b9a9e4](https://github.com/occmundial/occ-atomic/commit/0b9a9e41c37a4fcff6c14c8e79da4885662ccba1))
+* Add new design tokens files ([6b8fbcf](https://github.com/occmundial/occ-atomic/commit/6b8fbcf03f272603020686e229cf3ad1bd3e3a3e))
+* Add new fab component ([2164eea](https://github.com/occmundial/occ-atomic/commit/2164eea04ed268165609db2bcd80be4dd02df6a2))
+* Add to mapped icons stars solid icon ([5c96982](https://github.com/occmundial/occ-atomic/commit/5c9698235dc690bb8e1c913cc140854fc64c530b))
+* Adds testing icon to legacy icons ([a0bca6c](https://github.com/occmundial/occ-atomic/commit/a0bca6c33f54e731b645a953499dbc5b96d03d90))
+* Change Button themes and styles ([114375d](https://github.com/occmundial/occ-atomic/commit/114375d8a7a3b56622c00416a007e52a333ed8d4))
+* Change occ logo blue color to blue token ([4b7d63d](https://github.com/occmundial/occ-atomic/commit/4b7d63d0743a8caecc019f8326733c4cf2017b2f))
+* Changed some examples with tables ([3efe252](https://github.com/occmundial/occ-atomic/commit/3efe252c3d8651976f28e951081c717861c0ad56))
+* Map arrow down to chevron down ([9bd47fa](https://github.com/occmundial/occ-atomic/commit/9bd47fab659f3f7743d6f0b6a48dc9ecf599022d))
+* 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 atomic icons ([cdaa9bd](https://github.com/occmundial/occ-atomic/commit/cdaa9bda879f0d8aabe44a79cd16a0eedd3a7e8d))
+* 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))
+* Updated radio styles and documentation ([2c39496](https://github.com/occmundial/occ-atomic/commit/2c39496186092fe20434ce4a030c28e42cebff91))
+* Updated Text component documentation ([73e4b21](https://github.com/occmundial/occ-atomic/commit/73e4b21d488ba012df82d2e4fb85c18689c5d586))
+* Updated text component with new tokens ([b5f75ee](https://github.com/occmundial/occ-atomic/commit/b5f75eec430126b36c06dcd60bb320ccdf7eee0f))
+* Upgrade font tokens ([069bf92](https://github.com/occmundial/occ-atomic/commit/069bf9237f5b52492961f96f0a6f4a79469f4448))
+* Validate render icon in button logic ([c445f00](https://github.com/occmundial/occ-atomic/commit/c445f00b7f89b94c102b0e113b503d0e1a5193d4))
+* Validate render icon in button logic ([91dbc46](https://github.com/occmundial/occ-atomic/commit/91dbc464acceec6b1c7c9d2dde28976d04a5bf30))
+
+
+### BREAKING CHANGES
+
+* The themes of the Button component have changed to match the styles of the button in the new design system. The current themes have slightly different names to the new ones but they all have a corresponding new theme that matches, except for the ghostPink theme.
+
+# [2.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-05-14)
+
+
+### Bug Fixes
+
+* Adjust icon in prev and next button ([8d78c19](https://github.com/occmundial/occ-atomic/commit/8d78c196ce2a27990084683fbeb95b0b9e49be02))
+* Change tabs to spaces ([ba606c3](https://github.com/occmundial/occ-atomic/commit/ba606c3951a779fd05937fed49f785cc529cd611))
+
+# [2.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-05-10)
+
+
+### Features
+
+* Updated radio styles and documentation ([2c39496](https://github.com/occmundial/occ-atomic/commit/2c39496186092fe20434ce4a030c28e42cebff91))
+
+# [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)
+
+
+### Features
+
+* Map arrow down to chevron down ([9bd47fa](https://github.com/occmundial/occ-atomic/commit/9bd47fab659f3f7743d6f0b6a48dc9ecf599022d))
+
+# [2.0.0-beta.12](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2024-04-26)
+
+
+### Bug Fixes
+
+* Change name of the import for AtomicProvider in babel ([d0157de](https://github.com/occmundial/occ-atomic/commit/d0157de2321bce412dc0662a98f89a6196dbc917))
+
+# [2.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.10...v2.0.0-beta.11) (2024-04-25)
+
+
+### Bug Fixes
+
+* Update tip and toast icons ([07f3474](https://github.com/occmundial/occ-atomic/commit/07f347420e2f3d278274018cd9039508cbd7e504))
+
+# [2.0.0-beta.10](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.9...v2.0.0-beta.10) (2024-04-25)
+
+
+### Bug Fixes
+
+* Change the import declaration for the provider ([4fae96e](https://github.com/occmundial/occ-atomic/commit/4fae96e40028fc5d93438f7df3fd7342c0f6392a))
+
 # [2.0.0-beta.9](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2024-04-25)
 
 

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],
@@ -145,10 +145,8 @@ Object {
   },
   "iconRight": Object {
     "display": "inline-block",
-    "height": 16,
     "marginLeft": "8px",
     "transition": "0.3s all",
-    "width": 16,
   },
   "lg": Object {
     "&$iconOnly": Object {
@@ -232,7 +230,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 +256,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: {
@@ -346,8 +346,6 @@ var _default = {
     transition: '0.3s all'
   },
   iconRight: {
-    width: 16,
-    height: 16,
     marginLeft: _spacing["default"]['size-2'],
     display: 'inline-block',
     transition: '0.3s all'

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/Pager/Pager.js

@@ -218,20 +218,28 @@ var Pager = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("ul", {
         className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
       }, /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.prev).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
+        className: "".concat(classes.btn, " ").concat(classes.listItemPrevious).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handlePrevPage
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.prev
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
+        iconName: "chevron-left",
+        width: 14,
+        height: 14,
         colors: ['#adb4bb']
-      }), " ", previousLabel), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.next).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
+      }), previousLabel)), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
+        className: "".concat(classes.btn, " ").concat(classes.listItemNext).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handleNextPage
-      }, nextLabel, " ", /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.next
+      }, nextLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "chevron-right",
+        width: 14,
+        height: 14,
         colors: ['#adb4bb']
-      })));
+      }))));
     }
   }]);
 

package/build/Pager/Pager.test.js

@@ -30,10 +30,10 @@ describe("Pager", function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       classes: classes
     }));
-    expect(wrapper.find('.prev').length).toBe(1);
-    expect(wrapper.find('.prev').text()).toEqual('<Jss(Icon) /> Previous');
-    expect(wrapper.find('.next').length).toBe(1);
-    expect(wrapper.find('.next').text()).toEqual('Next <Jss(Icon) />');
+    expect(wrapper.find('.listItemPrevious').length).toBe(1);
+    expect(wrapper.find('.listItemPrevious').text()).toEqual('<Jss(Icon) />Previous');
+    expect(wrapper.find('.listItemNext').length).toBe(1);
+    expect(wrapper.find('.listItemNext').text()).toEqual('Next<Jss(Icon) />');
   });
   it('changes to previous page', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
@@ -41,7 +41,7 @@ describe("Pager", function () {
       classes: classes
     }));
     expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.prev').simulate('click', {
+    wrapper.find('.listItemPrevious').simulate('click', {
       target: {}
     });
     expect(wrapper.state('selected')).toEqual(2);
@@ -52,7 +52,7 @@ describe("Pager", function () {
       classes: classes
     }));
     expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.next').simulate('click', {
+    wrapper.find('.listItemNext').simulate('click', {
       target: {}
     });
     expect(wrapper.state('selected')).toEqual(4);
@@ -84,11 +84,11 @@ describe("Pager", function () {
       initialPage: 1,
       classes: classes
     }));
-    expect(wrapper.find('.prev').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(true);
     wrapper.setProps({
       forcePage: 5
     });
-    expect(wrapper.find('.prev').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(false);
   });
   it('disables the next page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
@@ -96,11 +96,11 @@ describe("Pager", function () {
       initialPage: 5,
       classes: classes
     }));
-    expect(wrapper.find('.next').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(true);
     wrapper.setProps({
       forcePage: 1
     });
-    expect(wrapper.find('.next').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(false);
   });
   it('calls the onPageChange function', function () {
     var onPageChange = jest.fn();
@@ -108,7 +108,7 @@ describe("Pager", function () {
       onPageChange: onPageChange,
       classes: classes
     }));
-    wrapper.find('.next').simulate('click', {
+    wrapper.find('.listItemNext').simulate('click', {
       target: {}
     });
     expect(onPageChange.mock.calls.length).toBe(1);

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

@@ -15,7 +15,6 @@ Object {
     "border": "1px solid #bfbfbf",
     "borderRadius": "5px",
     "cursor": "pointer",
-    "display": "inline-block",
     "fontFamily": "'OccText', sans-serif",
     "outline": "0",
     "padding": "3px 13px",
@@ -25,24 +24,28 @@ Object {
     "opacity": "0.4",
     "pointerEvents": "none",
   },
-  "next": Object {
-    "& span": Object {
-      "transform": "rotate(-90deg)",
-    },
+  "listItemNext": Object {
     "marginLeft": "15px",
   },
+  "listItemPrevious": Object {
+    "marginRight": "15px",
+  },
+  "next": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "pager": Object {
+    "alignItems": "center",
     "color": "#727272",
+    "display": "flex",
     "fontFamily": "'OccText', sans-serif",
     "fontSize": "14px",
     "listStyle": "none",
     "paddingLeft": "0",
   },
   "prev": Object {
-    "& span": Object {
-      "transform": "rotate(90deg)",
-    },
-    "marginRight": "15px",
+    "alignItems": "center",
+    "display": "flex",
   },
 }
 `;

package/build/Pager/styles.js

@@ -15,12 +15,13 @@ var _default = {
   pager: {
     listStyle: 'none',
     paddingLeft: '0',
+    display: 'flex',
+    alignItems: 'center',
     fontFamily: _fonts["default"].body,
     color: _colors["default"].grey7,
     fontSize: '14px'
   },
   btn: {
-    display: 'inline-block',
     fontFamily: _fonts["default"].body,
     border: "1px solid ".concat(_colors["default"].grey1),
     borderRadius: '5px',
@@ -37,16 +38,18 @@ var _default = {
     }
   },
   prev: {
-    marginRight: '15px',
-    '& span': {
-      transform: 'rotate(90deg)'
-    }
+    display: 'flex',
+    alignItems: 'center'
+  },
+  listItemPrevious: {
+    marginRight: '15px'
   },
   next: {
-    marginLeft: '15px',
-    '& span': {
-      transform: 'rotate(-90deg)'
-    }
+    display: 'flex',
+    alignItems: 'center'
+  },
+  listItemNext: {
+    marginLeft: '15px'
   },
   disabled: {
     pointerEvents: 'none',

package/build/Radio/Radio.js

@@ -94,6 +94,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
+          tabIndex: -1,
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -111,7 +112,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
-          mid: true,
+          corpSecondary: true,
           className: classes.right
         }, option.right));
       }));
@@ -147,8 +148,14 @@ Radio.propTypes = {
 
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
+
+  /** Id of the component */
   id: _propTypes["default"].string,
+
+  /** Adds class(es) to each option container */
   className: _propTypes["default"].string,
+
+  /** Adds style(s) to each option container */
   style: _propTypes["default"].object
 };
 var _default = Radio;

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

@@ -5,39 +5,92 @@ exports[`Radio matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Radio styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "& $radio:after": Object {
-      "background": Array [
-        "#083cae",
-        "!important",
-      ],
+    "& $radio": Object {
+      "&:after": Object {
+        "background": "#0059CD",
+      },
+      "&:before": Object {
+        "borderColor": "#0059CD",
+        "borderWidth": 2,
+      },
     },
   },
   "cont": Object {
-    "&:after": Object {
-      "clear": "both",
-      "content": "\\"\\"",
-      "display": "table",
+    "&$active": Object {
+      "&:active": Object {
+        "& $radio:after": Object {
+          "background": "#0047A5",
+        },
+        "& $radio:before": Object {
+          "borderColor": "#0047A5",
+          "borderWidth": "3px",
+          "boxShadow": "initial",
+        },
+      },
+      "&:focus $radio:before": Object {
+        "borderColor": "#0059CD",
+        "boxShadow": undefined,
+      },
+      "&:hover": Object {
+        "& $radio:after": Object {
+          "background": "#0047A5",
+        },
+        "& $radio:before": Object {
+          "borderColor": "#0047A5",
+          "boxShadow": "initial",
+        },
+      },
     },
-    "&:hover $radio:after": Object {
-      "background": "#dddddd",
+    "&:not($active)": Object {
+      "&:active $radio:before": Object {
+        "borderColor": "#6C6F89",
+        "borderWidth": "2px",
+        "boxShadow": "initial",
+      },
+      "&:focus $radio:before": Object {
+        "borderColor": "#D3D4DC",
+        "boxShadow": undefined,
+      },
+      "&:hover $radio:before": Object {
+        "borderColor": "#6C6F89",
+        "boxShadow": "initial",
+      },
     },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& :not($radio)": Object {
+      "opacity": 0.4,
+    },
+    "&$active": Object {
+      "& $radio:after": Object {
+        "background": "#8DA5DA",
+      },
+      "& $radio:before": Object {
+        "borderColor": "#8DA5DA",
+      },
+    },
+    "&:not($active)": Object {
+      "& $radio:after": Object {
+        "background": "#EDEDF1",
+      },
+      "& $radio:before": Object {
+        "background": "#EDEDF1",
+      },
+    },
     "pointerEvents": "none",
   },
   "label": Object {
     "cursor": "pointer",
     "flex": "1",
     "float": "left",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -46,36 +99,38 @@ Object {
   },
   "radio": Object {
     "&:after": Object {
-      "background": "transparent",
+      "background": "#fff",
       "borderRadius": "50%",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 6,
+      "height": 10,
       "left": "50%",
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
       "transition": "0.3s all",
-      "width": 6,
+      "width": 10,
     },
     "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
+      "background": "#fff",
+      "border": "1px solid #D3D4DC",
       "borderRadius": "50%",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 16,
+      "height": 20,
       "left": "50%",
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
-      "width": 16,
+      "width": 20,
     },
-    "height": 24,
+    "height": "24px",
     "position": "relative",
-    "width": 24,
+    "width": "24px",
   },
   "right": Object {
     "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
 }
 `;

package/build/Radio/styles.js

@@ -5,76 +5,135 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var radio = _colors["default"].radio;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
+    paddingTop: _spacing["default"]['size-2'],
+    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'start',
     cursor: 'pointer',
     outline: '0',
-    '&:after': {
-      content: '""',
-      display: 'table',
-      clear: 'both'
+    '&$active': {
+      '&:focus $radio:before': {
+        borderColor: radio['selected']['border']['default'],
+        boxShadow: _colors["default"]['focus-bright-blue']
+      },
+      '&:hover': {
+        '& $radio:before': {
+          borderColor: radio['selected']['border']['hover'],
+          boxShadow: 'initial'
+        },
+        '& $radio:after': {
+          background: radio['selected']['bg']['hover']
+        }
+      },
+      '&:active': {
+        '& $radio:before': {
+          borderColor: radio['selected']['border']['hover'],
+          borderWidth: '3px',
+          boxShadow: 'initial'
+        },
+        '& $radio:after': {
+          background: radio['selected']['bg']['hover']
+        }
+      }
     },
-    '&:hover $radio:after': {
-      background: _colors["default"].grey200
+    '&:not($active)': {
+      '&:focus $radio:before': {
+        borderColor: radio['unselected']['border']['default'],
+        boxShadow: _colors["default"]['focus-bright-blue']
+      },
+      '&:hover $radio:before': {
+        borderColor: radio['unselected']['border']['hover'],
+        boxShadow: 'initial'
+      },
+      '&:active $radio:before': {
+        borderColor: radio['unselected']['border']['hover'],
+        borderWidth: '2px',
+        boxShadow: 'initial'
+      }
     }
   },
   radio: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
     position: 'relative',
     '&:before': {
       content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
+      boxSizing: 'border-box',
+      width: 20,
+      height: 20,
       borderRadius: '50%',
       position: 'absolute',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
+      border: "1px solid ".concat(radio['unselected']['border']['default']),
+      background: radio['bg']['default']
     },
     '&:after': {
       content: '""',
-      width: 6,
-      height: 6,
+      boxSizing: 'border-box',
+      width: 10,
+      height: 10,
       borderRadius: '50%',
       position: 'absolute',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: '0.3s all',
-      background: 'transparent'
+      background: radio['bg']['default']
     }
   },
   active: {
-    '& $radio:after': {
-      background: [_colors["default"].prim, '!important']
+    '& $radio': {
+      '&:before': {
+        borderWidth: 2,
+        borderColor: radio['selected']['border']['default']
+      },
+      '&:after': {
+        background: radio['selected']['bg']['default']
+      }
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '& :not($radio)': {
+      opacity: 0.4
+    },
+    '&$active': {
+      '& $radio:before': {
+        borderColor: radio['selected']['border']['disabled']
+      },
+      '& $radio:after': {
+        background: radio['selected']['bg']['disabled']
+      }
+    },
+    '&:not($active)': {
+      '& $radio:before': {
+        background: radio['bg']['disabled']
+      },
+      '& $radio:after': {
+        background: radio['bg']['disabled']
+      }
+    }
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     cursor: 'pointer',
     "float": 'left',
     flex: '1'
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     "float": 'right'
   },
   overflow: {

package/build/Tip/Tip.js

@@ -35,10 +35,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var boldRegex = /\*(.*?)\*/g;
 var icons = {
-  info: 'infoSolid',
-  warning: 'warningSolid',
-  success: 'checkSolid',
-  error: 'crossSolid',
+  info: 'info-circle',
+  warning: 'alert',
+  success: 'check-circle',
+  error: 'x-circle',
   promote: null
 };
 var PROMOTE = 'promote';

package/build/Toaster/Toast/Toast.js

@@ -37,25 +37,25 @@ var Toast = function Toast(_ref) {
     switch (theme) {
       case 'success':
         return {
-          icon: 'checkSolid',
+          icon: 'check-circle',
           color: _colors["default"].bgWhite
         };
 
       case 'error':
         return {
-          icon: 'warningSolid',
+          icon: 'x-circle',
           color: _colors["default"].bgWhite
         };
 
       case 'info':
         return {
-          icon: 'infoSolid',
+          icon: 'info-circle',
           color: _colors["default"].bgWhite
         };
 
       case 'warning':
         return {
-          icon: 'warningSolid',
+          icon: 'alert',
           color: _colors["default"].grey900
         };
     }

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/plugin/babel.js

@@ -38,7 +38,7 @@ function importModule(path) {
     } else if (importName === 'Nav' || importName === 'Menu') {
       return importDeclaration(specifier, "@occmundial/occ-atomic/build/Header/".concat(importName));
     } else if (importName === 'AtomicProvider') {
-      return importDeclaration(specifier, '@occmundial/occ-atomic/build/Provider');
+      return importDeclaration(types.importDefaultSpecifier(types.identifier('AtomicProvider')), '@occmundial/occ-atomic/build/Provider');
     } else if (subatomic.includes(importName)) {
       return importDeclaration(types.importDefaultSpecifier(types.identifier(importName)), "@occmundial/occ-atomic/build/subatomic/".concat(importName));
     }

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/build/subatomic/mappedIcons.js

@@ -22,7 +22,6 @@ var oldToNewIcon = {
   cart: 'cart',
   cartSolid: 'cart',
   cash: 'cash-coin',
-  check: 'check-circle',
   checkSolid: 'check-circle',
   company: 'building',
   companySolid: 'building',
@@ -115,8 +114,8 @@ var oldToNewIcon = {
   moreOptions: 'three-dots-vertical',
   money: 'coin',
   go: 'arrow-right-circle',
-  arrowDown: 'arrow-down-o',
-  arrowDownFilled: 'arrow-down-o',
+  arrowDown: 'chevron-down',
+  arrowDownFilled: 'chevron-down',
   label: 'tag',
   unlock: 'unlock',
   bill: 'cash',

package/catalog-info.yaml

@@ -0,0 +1,13 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: occ-atomic
+  annotations:
+    github.com/project-slug: occmundial/occ-atomic
+    design-tokens.occdeep.io/platform: tailwind
+    design-tokens.occdeep.io/path: lib/tokens
+    design-tokens.occdeep.io/branch: beta
+spec:
+  type: service
+  lifecycle: production
+  owner: ui-team

package/package.json

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