@pingux/astro 1.37.1 → 1.37.2-alpha.1

package/lib/cjs/styles/variants/buttons.js

@@ -22,7 +22,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.defaultFocus = exports["default"] = void 0;
+exports.focusWithCroppedOutline = exports.defaultFocus = exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
@@ -70,10 +70,17 @@ var defaultHover = {
 };
 var defaultFocus = {
   outline: '1px solid',
-  outlineColor: 'active',
-  outlineOffset: '4px'
+  outlineColor: 'focus',
+  outlineOffset: '2px'
 };
 exports.defaultFocus = defaultFocus;
+var focusWithCroppedOutline = {
+  boxShadow: 'none',
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '1px'
+};
+exports.focusWithCroppedOutline = focusWithCroppedOutline;
 var navItemButton = {
   textDecoration: 'none',
   outline: 'none',
@@ -97,7 +104,7 @@ var navItemButton = {
   wordBreak: 'break-word',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     bg: 'accent.10'
@@ -277,7 +284,8 @@ var success = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'success.bright',
   border: '1px solid',
   borderColor: 'success.bright',
-  color: 'white'
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
 var critical = _objectSpread(_objectSpread({}, base), {}, {
@@ -285,7 +293,8 @@ var critical = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'critical.bright',
   border: '1px solid',
   borderColor: 'critical.bright',
-  color: 'white'
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
 var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
@@ -419,7 +428,7 @@ var text = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 var quiet = {
@@ -433,12 +442,9 @@ var chipDeleteButton = {
   mx: '3px !important',
   p: 0,
   width: 14,
-  '&.is-focused, &.is-hovered': {
-    bg: 'accent.40',
-    borderColor: 'accent.40',
-    boxShadow: 'standard',
-    outline: 'none'
-  },
+  '&.is-focused, &.is-hovered': _objectSpread({
+    bg: 'accent.40'
+  }, focusWithCroppedOutline),
   '&.is-pressed': {
     bg: 'accent.20',
     borderColor: 'accent.20'
@@ -490,16 +496,21 @@ var danger = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var copy = {
-  ml: 'xs',
+  ml: 'sm',
+  mr: 'sm',
   outline: 'none',
   height: 'auto',
+  width: 'auto',
   cursor: 'pointer',
   path: {
     fill: 'neutral.10'
   },
-  '&.is-focused': _objectSpread({
-    boxShadow: 'none'
-  }, defaultFocus)
+  '&.is-focused': {
+    boxShadow: 'none',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '1px'
+  }
 };
 var colorField = {
   border: "1px solid ".concat(_colors.neutral['80']),
@@ -516,7 +527,10 @@ var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
   padding: 0,
   backgroundColor: 'accent.99',
   border: '2px solid',
-  borderColor: 'neutral.95'
+  borderColor: 'neutral.40',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderColor: 'neutral.40'
+  })
 });
 
 var link = _objectSpread(_objectSpread({}, text), {}, {
@@ -528,7 +542,8 @@ var link = _objectSpread(_objectSpread({}, text), {}, {
   '&.is-current': {
     cursor: 'default',
     color: 'text.primary'
-  }
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 var neutralText = _objectSpread(_objectSpread({}, link), {}, {
@@ -562,8 +577,9 @@ var environmentBreadcrumb = {
       boxShadow: 'none'
     },
     '&.is-focused': {
-      borderRadius: '2px',
-      boxShadow: '0 0 0 1px #4462ED'
+      outline: '1px solid',
+      outlineColor: 'focus',
+      outlineOffset: '1px'
     },
     '&:focus-visible': {
       outline: 'none'
@@ -595,9 +611,7 @@ var fileInputField = {
       textDecoration: 'underline'
     }
   },
-  '&.is-focused': {
-    boxShadow: 'focus'
-  }
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 };
 
 var tooltipChip = _objectSpread(_objectSpread({}, _boxes.chip), {}, {
@@ -714,7 +728,7 @@ var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
   width: '100%',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/cjs/styles/variants/collapsiblePanel.js

@@ -1,12 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("../variants/buttons");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var collapsiblePanelContainer = {
   pr: 'sm',
   minHeight: '80vh',
@@ -25,11 +50,9 @@ var collapsiblePanelContent = {
   fontSize: 'sm',
   height: '100%',
   width: '300px',
-  '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus',
-    outline: 'none'
-  },
+  '&.is-focused': _objectSpread({
+    borderColor: 'accent.80'
+  }, _buttons.focusWithCroppedOutline),
   '& div': {
     alignItems: 'center',
     display: 'flex',

package/lib/cjs/styles/variants/links.js

@@ -26,6 +26,8 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
+var _buttons = require("./buttons");
+
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -39,9 +41,7 @@ var app = {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
+  '&.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline),
   '&.is-pressed': {
     color: 'accent.40',
     textDecoration: 'underline'
@@ -55,7 +55,8 @@ var web = _objectSpread(_objectSpread({}, app), {}, {
   textDecoration: 'underline',
   '&:visited': {
     color: 'decorative.7'
-  }
+  },
+  '&.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
 });
 
 var _default = {

package/lib/cjs/styles/variants/navBar.js

@@ -84,7 +84,7 @@ var navItem = {
   fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/cjs/styles/variants/stepper.js

@@ -26,11 +26,12 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
+var _buttons = require("./buttons");
+
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/** Tabs styles */
 var wrapper = {
   width: '100%'
 };
@@ -44,10 +45,9 @@ var tab = {
   mb: 0,
   mr: 0,
   outline: 'none',
-  '&.is-focused': {
-    boxShadow: 'focus',
+  '&.is-focused': _objectSpread({
     borderRadius: '50%'
-  },
+  }, _buttons.defaultFocus),
   '&:not(:first-of-type)': {
     flex: 1,
     maxWidth: 122

package/lib/cjs/styles/variants/tabs.js

@@ -1,12 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports.tabs = exports.tabPanel = exports.tabLine = exports.tab = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("./buttons");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var tab = {
   pt: 10,
   cursor: 'pointer',
@@ -16,7 +41,7 @@ var tab = {
   transform: 'translateY(1px)',
   width: '100%',
   '&.is-focused': {
-    boxShadow: 'focus'
+    '& > span': _objectSpread({}, _buttons.focusWithCroppedOutline)
   },
   '&.is-disabled': {
     cursor: 'default'

package/lib/components/DataTable/DataTable.styles.js

@@ -23,7 +23,7 @@ var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
   '&.is-key-focused': {
     outline: '1px',
     outlineStyle: 'solid',
-    outlineColor: 'accent.50',
+    outlineColor: 'focus',
     outlineOffset: '-1px',
     backgroundColor: 'white'
   },
@@ -55,14 +55,17 @@ var tableRow = {
   borderBottomStyle: 'solid !important',
   backgroundColor: 'accent.99',
   borderBottomColor: 'neutral.80',
+  borderTop: '1px solid transparent',
+  borderLeft: '1px solid transparent',
+  borderRight: '1px solid transparent',
   '&:hover': {
     backgroundColor: 'white'
   },
   '&.is-row-focus-visible': {
     border: '1px solid',
-    borderColor: 'accent.50',
+    borderColor: 'focus',
     borderBottom: '1px',
-    borderBottomColor: 'accent.50',
+    borderBottomColor: 'focus',
     backgroundColor: 'white'
   }
 };
@@ -98,7 +101,7 @@ var tableHeadCell = _objectSpread(_objectSpread({}, text.label), {}, {
   '&.is-key-focused': {
     outline: '1px',
     outlineStyle: 'solid',
-    outlineColor: 'accent.50 !important',
+    outlineColor: '#D033FF !important',
     outlineOffset: '-1px',
     backgroundColor: 'accent.99 !important'
   },

package/lib/components/NavBar/NavBar.js

@@ -1,9 +1,8 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as uuid } from 'uuid';
 import { FocusScope, useFocusManager } from '@react-aria/focus';
 import { NavBarContext } from '../../context/NavBarContext';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -38,17 +37,15 @@ var NavBar = function NavBar(props) {
       selectedKey = _useProgressiveState2[0],
       setSelectedKey = _useProgressiveState2[1];
 
-  var items = useMemo(function () {
-    return _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
-      return {
-        item: child,
-        key: uuid()
-      };
-    }) : [{
-      item: children,
-      key: uuid()
-    }];
-  }, []);
+  var items = _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
+    return {
+      item: child,
+      key: child.key
+    };
+  }) : [{
+    item: children,
+    key: children.key
+  }];
   var contextValue = {
     selectedKey: selectedKey,
     setSelectedKey: setSelectedKeyProp || setSelectedKey,

package/lib/components/NavBar/NavBar.stories.js

@@ -393,7 +393,8 @@ export var Controlled = function Controlled() {
     setSelectedKey: setSelectedKey,
     selectedKey: selectedKey
   }, ___EmotionJSX(Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, ___EmotionJSX(Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -401,10 +402,12 @@ export var Controlled = function Controlled() {
   }, logo)), ___EmotionJSX(Separator, {
     marginTop: "lg",
     marginBottom: "0px",
-    backgroundColor: "neutral.60"
+    backgroundColor: "neutral.60",
+    key: "top-separator"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,

package/lib/components/NavBar/NavBar.test.js

@@ -1,4 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
@@ -80,15 +81,18 @@ var getComponent = function getComponent() {
       height: '100%',
       maxHeight: '100%',
       overflowY: 'overlay !important'
-    }
+    },
+    key: "top-logo-parent"
   }, ___EmotionJSX(NavBarSection, {
     items: data,
     hasSeparator: true,
     "data-testid": DATA_ID,
-    "data-id": DATA_ID
+    "data-id": DATA_ID,
+    key: "first-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
-    title: "test_title"
+    title: "test_title",
+    key: "second-section"
   }), ___EmotionJSX(NavBarItem, {
     id: "Overview",
     key: "Overview",
@@ -99,15 +103,13 @@ var getComponent = function getComponent() {
 };
 
 var ControlledComponent = function ControlledComponent() {
+  var _context;
+
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       selectedKey = _useState2[0],
       setSelectedKey = _useState2[1];
 
-  var setKeys = function setKeys(e) {
-    setSelectedKey(e);
-  };
-
   var customData = [{
     icon: GlobeIcon,
     key: 'Environment',
@@ -120,16 +122,41 @@ var ControlledComponent = function ControlledComponent() {
       }
     }, "Click me for MFA Users"), ___EmotionJSX(NavBarItemButton, {
       key: "Earth Button Group",
-      id: "Earth Button Group"
+      id: "Earth Button Group",
+      "data-testid": "group-item"
     }, "Group")]
   }];
+
+  var _useState3 = useState(_concatInstanceProperty(_context = []).call(_context, customData)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      thisData = _useState4[0],
+      setData = _useState4[1];
+
+  var testFunction = function testFunction() {
+    var _context2, _context3;
+
+    var newArray = _concatInstanceProperty(_context2 = []).call(_context2, customData);
+
+    newArray.pop();
+    setData(_concatInstanceProperty(_context3 = []).call(_context3, newArray));
+  };
+
+  var setKeys = function setKeys(e) {
+    setSelectedKey(e);
+  };
+
   return ___EmotionJSX(NavBar, {
     setSelectedKey: setKeys,
     selectedKey: selectedKey
   }, ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
-  }, ___EmotionJSX(NavBarItem, {
+    paddingBottom: "xl",
+    key: "top-logo-parent"
+  }, ___EmotionJSX("button", {
+    key: "test-button",
+    "data-testid": "test-button",
+    onClick: testFunction
+  }, "click me!"), ___EmotionJSX(NavBarItem, {
     id: "Overview",
     key: "Overview",
     text: "Overview",
@@ -145,20 +172,23 @@ var ControlledComponent = function ControlledComponent() {
     title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
-    items: customData,
+    items: thisData,
     "data-id": "third-nav-bar-section"
   })));
 };
 
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
+  return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, {
+    key: "top-logo-parent"
+  }, ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "home link",
     "data-testid": "navLink"
   }, "home")), ___EmotionJSX(Button, {
-    "data-testid": "navButton"
+    "data-testid": "navButton",
+    key: "nav-button"
   }, "test button")));
 };
 
@@ -428,4 +458,12 @@ test('when a child is selected, and the parent is collapsed, the parent has the
   userEvent.click(parent);
   var parentDiv = screen.queryByTestId('Overview');
   expect(parentDiv).toHaveClass('is-selected');
+});
+test('controlled version: items can be updated.', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var button = screen.getByTestId('test-button');
+  var thisitem = screen.getByTestId('Environment title that is so long, it wraps');
+  expect(thisitem).toBeInTheDocument();
+  userEvent.click(button);
+  expect(screen.queryByTestId('Environment title that is so long, it wraps')).not.toBeInTheDocument();
 });

package/lib/components/SearchField/SearchField.js

@@ -83,7 +83,9 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: searchRef,
     pl: 40,
     pr: 40
-  }, fieldControlProps)), icon && ___EmotionJSX(Icon, _extends({
+  }, fieldControlProps, {
+    variant: "forms.input.search"
+  })), icon && ___EmotionJSX(Icon, _extends({
     icon: icon,
     variant: "forms.search.icon",
     size: 22

package/lib/recipes/Slider.stories.js

@@ -23,6 +23,7 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { mergeProps } from '@react-aria/utils';
 import { useNumberFormatter } from '@react-aria/i18n';
 import { Box } from '../index';
+import { defaultFocus } from '../styles/variants/buttons';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Slider'
@@ -199,9 +200,7 @@ var Thumb = function Thumb(props) {
       left: "".concat(state.getThumbPercent(index) * 100, "%")
     })
   }, ___EmotionJSX(Box, _extends({}, thumbProps, {
-    sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
-      outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
-    })
+    sx: _objectSpread(_objectSpread({}, sx.thumb), isFocusVisible && defaultFocus)
   }), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("input", _extends({
     ref: inputRef
   }, mergeProps(inputProps, focusProps))))));

package/lib/styles/colors.js

@@ -83,8 +83,9 @@ export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, fu
 });
 export var decorativeLight = _mapInstanceProperty(decorative).call(decorative, function (color) {
   return chroma(color).brighten(2).hex();
-});
-export var focus = chroma(accent[50]).alpha(0.75).hex(); // COMPONENT COLORS
+}); // export const focus = chroma(accent[50]).alpha(0.75).hex();
+
+export var focus = chroma('#D033FF').hex(); // COMPONENT COLORS
 
 export var button = {
   primary: active,
@@ -92,7 +93,8 @@ export var button = {
   label: active,
   hoverBorder: accent,
   hoverLabel: accent,
-  hoverBackground: accent[95]
+  hoverBackground: accent[95],
+  focus: focus
 };
 export var line = {
   regular: neutral[50],

package/lib/styles/forms/checkbox.js

@@ -6,7 +6,9 @@ export var checkbox = {
     bg: 'transparent'
   },
   'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
+    boxShadow: 'none',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
   }
 };