@occmundial/occ-atomic 3.0.0-beta.2 → 3.0.0-beta.21

package/CHANGELOG.md

@@ -1,3 +1,188 @@
+# [3.0.0-beta.21](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.20...v3.0.0-beta.21) (2024-06-25)
+
+
+### Bug Fixes
+
+* Add outline border and merge with beta ([a212aa3](https://github.com/occmundial/occ-atomic/commit/a212aa3f87471092a246925e79a9d787535b13ba))
+* Resolve conflicts ([99b08cb](https://github.com/occmundial/occ-atomic/commit/99b08cb290979fa7f1aad3dd2c04f65b1b494559))
+* Resolve conflicts ([81776b7](https://github.com/occmundial/occ-atomic/commit/81776b701b168e66a1f1dfa7b785227b40a76dc9))
+* Set md size for tip close icon ([759e6d1](https://github.com/occmundial/occ-atomic/commit/759e6d10842e2c55cf81d2aff57f60479e3a3395))
+* Set min width for desktop and conditionated on mouse events ([98857fd](https://github.com/occmundial/occ-atomic/commit/98857fd313d247e618c64dbbaacea93c6ab084ae))
+
+
+### Features
+
+* Add close icon prop and conditionated onclose func ([e456d38](https://github.com/occmundial/occ-atomic/commit/e456d384a82d4b6105e27bb36d693b43d5608c1c))
+* Update toaster with new design tokens ([88edaa8](https://github.com/occmundial/occ-atomic/commit/88edaa8fe5c3c04bc9f634f6a287c1614c893d15))
+
+# [3.0.0-beta.20](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.19...v3.0.0-beta.20) (2024-06-25)
+
+
+### Bug Fixes
+
+* Add condition to set test id prop ([4e90cea](https://github.com/occmundial/occ-atomic/commit/4e90cea0a6f5c627c8b2a398a9aef449fa3e1b7c))
+* Adjust tip styles and add banner prop ([04d17ff](https://github.com/occmundial/occ-atomic/commit/04d17ff0fe74186da32d15f91001406344867bb4))
+* Merge beta changes ([218b68a](https://github.com/occmundial/occ-atomic/commit/218b68a7347b025dc2cdd8171f7d4c22bbd383f1))
+* Resolve component data conflicts ([c390f1f](https://github.com/occmundial/occ-atomic/commit/c390f1f485415dc15251386527c0caaa70e9814f))
+
+
+### Features
+
+* Add test id prop and add new tests ([aba7d32](https://github.com/occmundial/occ-atomic/commit/aba7d3215e0b19e635b53546f66accd327ebed42))
+
+# [3.0.0-beta.19](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2024-06-21)
+
+
+### Bug Fixes
+
+* Prevent default to avoid scroll on key down ([9ee17d2](https://github.com/occmundial/occ-atomic/commit/9ee17d2a247a02a7be7e1c743669c8833d3f5748))
+
+# [3.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2024-06-21)
+
+
+### Bug Fixes
+
+* Replace onKeyDown for onKeyUp ([e574e9c](https://github.com/occmundial/occ-atomic/commit/e574e9c42f7a55723794269ede7a4f58dd899e58))
+
+# [3.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2024-06-19)
+
+
+### Bug Fixes
+
+* Change icon size and adjust margin ([0411455](https://github.com/occmundial/occ-atomic/commit/041145590cd765e5b81937f07ef676d2fc5e8826))
+* Remove selector not active for focus visible ([dbec333](https://github.com/occmundial/occ-atomic/commit/dbec33316a94826d2007a044b634f944ffe01715))
+
+# [3.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2024-06-19)
+
+
+### Bug Fixes
+
+* Change focus behavior in form components ([a3b6c9b](https://github.com/occmundial/occ-atomic/commit/a3b6c9b5194b1d8302a6f73bb5522df9e6a756fc))
+* Changes to structure and styles of Checkbox ([6ed54c0](https://github.com/occmundial/occ-atomic/commit/6ed54c0a5ebae0542431b8305d0da8a052c2d3fb))
+* Changes to structure and styles of Radio ([694c995](https://github.com/occmundial/occ-atomic/commit/694c9950a4c6c43a5bd7987536a293835860421e))
+* Changes to structure and styles of SlideToggle ([5ec340f](https://github.com/occmundial/occ-atomic/commit/5ec340f0cc09b04d032ebb888034a92cf71f2f8a))
+* Fix focus styles in form components ([e69d45b](https://github.com/occmundial/occ-atomic/commit/e69d45b84c3e35a433f37feb7c9b0012137bc2bb))
+* Fix spacing and sizing of radio, checkbox and toggle ([b3a71c2](https://github.com/occmundial/occ-atomic/commit/b3a71c2e30e2b810036104a4ee57b6b805d2780c))
+* Fix styles and icon color on Checkbox ([1c4e360](https://github.com/occmundial/occ-atomic/commit/1c4e360ec0d3291048d14f4ccd3859d0bdbc2817))
+* Fix transition value in SlideToggle ([8423fc6](https://github.com/occmundial/occ-atomic/commit/8423fc6b9eea3219ed052add95f27ef4d181f5b5))
+* Update componentData ([ff7c0bd](https://github.com/occmundial/occ-atomic/commit/ff7c0bd47ed55d652b01ace7526867d751a6e1c7))
+
+# [3.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2024-06-18)
+
+
+### Bug Fixes
+
+* Centered select icon and set cursor pointer for select box ([05fa3f1](https://github.com/occmundial/occ-atomic/commit/05fa3f1ca0efdf7e2b75c468eb23279aafbc58ce))
+* Remove class condition ([59ef135](https://github.com/occmundial/occ-atomic/commit/59ef1353213a9df3737d59c13385254767c41372))
+
+# [3.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2024-06-13)
+
+
+### Bug Fixes
+
+* Fix toggle background on focus when hovered ([8c35f96](https://github.com/occmundial/occ-atomic/commit/8c35f96b77fdb3d1692d864159561842a3213bba))
+
+# [3.0.0-beta.13](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2024-06-13)
+
+
+### Bug Fixes
+
+* Add form nav behavior to SwitchToggle ([e1e74ed](https://github.com/occmundial/occ-atomic/commit/e1e74edf8306250d0ae7a723b758c9426593c295))
+
+# [3.0.0-beta.12](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2024-06-07)
+
+
+### Bug Fixes
+
+* Add form nav behavior to checkbox ([6b2c664](https://github.com/occmundial/occ-atomic/commit/6b2c664e165bb4617dc53874be69bb9d8c8e6bc3))
+
+# [3.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2024-06-07)
+
+
+### Bug Fixes
+
+* Call hoc window size and improve tip text use memo ([840e108](https://github.com/occmundial/occ-atomic/commit/840e1089cb3e80c6b2d2686c56b577166f6bc66f))
+* Resolve conflicts ([23e9ba8](https://github.com/occmundial/occ-atomic/commit/23e9ba8008ffe55e8af6910394580123032aee0e))
+
+# [3.0.0-beta.10](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2024-06-06)
+
+
+### Features
+
+* Checkbox redesigned and documentation created ([48fbc8d](https://github.com/occmundial/occ-atomic/commit/48fbc8d0a912c300324fe244e9692a49f3a152b5))
+* Remove updates to component ([ab71716](https://github.com/occmundial/occ-atomic/commit/ab71716991a7700134dbafe0d8eda63e18ff8eab))
+
+# [3.0.0-beta.9](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2024-06-06)
+
+
+### Bug Fixes
+
+* Move use memo before early return ([3d290c9](https://github.com/occmundial/occ-atomic/commit/3d290c9675fb24e20d131fdbaeef023920f3e439))
+
+# [3.0.0-beta.8](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2024-06-06)
+
+
+### Bug Fixes
+
+* Add border for promote alert ([5050f18](https://github.com/occmundial/occ-atomic/commit/5050f187b60f98118654ecbbe3e2cba7b29790ab))
+* Add min height to tip container ([579d263](https://github.com/occmundial/occ-atomic/commit/579d26306d59ce73b5084f9cd632dd12ed162fc5))
+* Resolve conflicts ([0a15dfa](https://github.com/occmundial/occ-atomic/commit/0a15dfa8d8da38a724d71622809f0e02c5bed0e9))
+
+
+### Features
+
+* Render tip in banner component ([239e2c8](https://github.com/occmundial/occ-atomic/commit/239e2c82c23d79698bd912931b314ceddf252fb4))
+* Update tip component with new design tokens ([b2367fc](https://github.com/occmundial/occ-atomic/commit/b2367fcaade288609df4c841c91fb308841ae4b0))
+
+
+### Performance Improvements
+
+* Memoize text replace in tip text component ([69180ce](https://github.com/occmundial/occ-atomic/commit/69180ce9cb1e812769e31a837257d8c8e6f24199))
+
+# [3.0.0-beta.7](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2024-06-06)
+
+
+### Bug Fixes
+
+* Fix radio styles and add a form nav behavior ([59f0320](https://github.com/occmundial/occ-atomic/commit/59f03207a45b1ec27e02970668cffe2cfd5931a9))
+* Ignore tab index if radio element is disabled ([e479098](https://github.com/occmundial/occ-atomic/commit/e4790982a127408a474f688a4647612ef8fbb446))
+
+# [3.0.0-beta.6](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2024-06-05)
+
+
+### Bug Fixes
+
+* Text new emphasis props ([bc3e934](https://github.com/occmundial/occ-atomic/commit/bc3e934299230cb0b3a0fddeb4c8fcd2b72a052f))
+
+# [3.0.0-beta.5](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2024-06-04)
+
+
+### Bug Fixes
+
+* Remove fixed size for right-side icon in button ([1228467](https://github.com/occmundial/occ-atomic/commit/1228467ba0d107bba0e70603c28a3ccffaec306b))
+
+# [3.0.0-beta.4](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2024-06-04)
+
+
+### Bug Fixes
+
+* Make toggle unshrinkable inside a flex box ([6067fba](https://github.com/occmundial/occ-atomic/commit/6067fbad2276824bcec0c35748beea0006b73300))
+
+# [3.0.0-beta.3](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2024-05-30)
+
+
+### Bug Fixes
+
+* Remove bg from group pill on focus ([6cdb2f1](https://github.com/occmundial/occ-atomic/commit/6cdb2f1573b6a297810d4e075c462ccc2b9140b1))
+* Remove repeated selectors and change usecallback dependencies ([4d23be0](https://github.com/occmundial/occ-atomic/commit/4d23be0f88672df2e3c39578e3a4638385c23594))
+* Resolve conflicts with beta ([0e51771](https://github.com/occmundial/occ-atomic/commit/0e5177122818b55d51a28d013c10164f18abaf97))
+
+
+### Features
+
+* Disabled all group items when pill disabled prop is true ([922cb8a](https://github.com/occmundial/occ-atomic/commit/922cb8a0146f21a0ad3a49da87321a3ebc6c6feb))
+* Update pill styles with design tokens ([a6caadc](https://github.com/occmundial/occ-atomic/commit/a6caadc0170b290865332278fa4b3850ee452faa))
+
 # [3.0.0-beta.2](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2024-05-28)
 
 

package/build/Banner/Banner.js

@@ -9,17 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,38 +17,29 @@ var Banner = function Banner(_ref) {
   var id = _ref.id,
       style = _ref.style,
       className = _ref.className,
-      classes = _ref.classes,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth;
-  var isMobile = winWidth < _grid["default"].xs;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      cta = _ref.cta,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
+    style: style,
     className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    className: classes.container
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1",
-    className: classes.textFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    white: true,
-    small: isMobile,
-    tag: "div",
-    className: classes.textBanner
-  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    className: classes.iconFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "close",
-    colors: [_colors["default"].bgWhite],
-    onClick: onClose,
-    className: classes.icon
-  }))));
+    onClose: onClose,
+    banner: true,
+    cta: cta,
+    theme: theme,
+    icon: true,
+    size: size,
+    testId: testId
+  }, children);
 };
 
 Banner.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   winWidth: _propTypes["default"].number,
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
@@ -68,9 +49,18 @@ Banner.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote']),
+  size: _propTypes["default"].oneOf(['large', 'small']),
+
+  /** 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 = (0, _WindowSize["default"])(Banner);
-
+var _default = Banner;
 exports["default"] = _default;

package/build/Banner/Banner.test.js

@@ -6,35 +6,82 @@ var _enzyme = require("enzyme");
 
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 var _index = _interopRequireDefault(require("./index"));
 
 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("Banner", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
-      classes: classes
-    }));
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
+  it('Has content centered', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.prop('banner')).toEqual(true);
+  });
+  it('has a close icon button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__close-icon'
+    }).length).toBe(1);
+  });
+  it('has a link', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__link'
+    }).length).toBe(1);
+  });
 });
 describe("BannerJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
-});
-describe("Banner styles", function () {
-  it('matches the snapshot', function () {
-    expect(_styles["default"]).toMatchSnapshot();
-  });
 });

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

@@ -2,32 +2,4 @@
 
 exports[`Banner matches the snapshot 1`] = `ShallowWrapper {}`;
 
-exports[`Banner styles matches the snapshot 1`] = `
-Object {
-  "container": Object {
-    "backgroundColor": "#222222",
-    "padding": 16,
-  },
-  "icon": Object {
-    "cursor": "pointer",
-  },
-  "iconFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "padding": 0,
-    },
-    "paddingLeft": 16,
-    "paddingTop": 16,
-  },
-  "textBanner": Object {
-    "display": "inline-block",
-  },
-  "textFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "textAlign": "center",
-    },
-    "textAlign": "start",
-  },
-}
-`;
-
 exports[`BannerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Banner/index.js

@@ -5,14 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_Banner["default"]);
-
+var _default = _Banner["default"];
 exports["default"] = _default;

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

@@ -64,12 +64,12 @@ Object {
     "&:active": Object {
       "background": "hsl(234 75.4% 12.7% / 0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
       "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
-    },
     "background": "transparent",
     "color": "#5A5D7B",
   },
@@ -120,12 +120,12 @@ Object {
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
   },
@@ -145,10 +145,8 @@ Object {
   },
   "iconRight": Object {
     "display": "inline-block",
-    "height": 16,
     "marginLeft": "8px",
     "transition": "0.3s all",
-    "width": 16,
   },
   "lg": Object {
     "&$iconOnly": Object {
@@ -216,12 +214,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+    },
     "&:hover": Object {
       "background": "#A32444",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-    },
     "background": "#D32E58",
     "color": "#fff",
     "outline": "2px solid rgba(255,255,255,0.2)",
@@ -247,12 +245,12 @@ Object {
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "hsl(221 91.2% 35.7% / 0.05)",
     "color": "#083CAE",
   },
@@ -277,12 +275,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "transparent",
     "color": "#083CAE",
     "outline": "2px solid #083CAE",
@@ -305,12 +303,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #fff",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
     "outline": "2px solid #fff",

package/build/Button/styles.js

@@ -102,7 +102,7 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-pink']
     },
     '&$disabled': {
@@ -130,7 +130,7 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.secondary.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
     '&$disabled': {
@@ -165,7 +165,7 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
     '& span span': {
@@ -201,7 +201,7 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
     '& span span': {
@@ -261,7 +261,7 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-corp']
     },
     '& span span': {
@@ -291,7 +291,7 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.inverse.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
     '& span span': {
@@ -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'