@pingux/astro 1.37.1-alpha.0 → 1.37.2-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.37.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.37.0...@pingux/astro@1.37.1) (2022-12-06)
+
+
+### Bug Fixes
+
+* [UIP-5903] Multivaluesfield improvements epic ([f82a7da](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f82a7da926a9c9a9d9f61fd51b6ccbef75502826))
+
+
+
+
+
 # [1.37.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.36.2...@pingux/astro@1.37.0) (2022-12-01)
 
 

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

@@ -41,7 +41,7 @@ var tableCell = _objectSpread(_objectSpread({}, _text.text.tableData), {}, {
   '&.is-key-focused': {
     outline: '1px',
     outlineStyle: 'solid',
-    outlineColor: 'accent.50',
+    outlineColor: 'focus',
     outlineOffset: '-1px',
     backgroundColor: 'white'
   },
@@ -73,14 +73,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'
   }
 };
@@ -116,7 +119,7 @@ var tableHeadCell = _objectSpread(_objectSpread({}, _text.text.label), {}, {
   '&.is-key-focused': {
     outline: '1px',
     outlineStyle: 'solid',
-    outlineColor: 'accent.50 !important',
+    outlineColor: '#D033FF !important',
     outlineOffset: '-1px',
     backgroundColor: 'accent.99 !important'
   },

package/lib/cjs/components/SearchField/SearchField.js

@@ -119,7 +119,9 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: searchRef,
     pl: 40,
     pr: 40
-  }, fieldControlProps)), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+  }, fieldControlProps, {
+    variant: "forms.input.search"
+  })), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: icon,
     variant: "forms.search.icon",
     size: 22

package/lib/cjs/recipes/Slider.stories.js

@@ -46,6 +46,8 @@ var _i18n = require("@react-aria/i18n");
 
 var _index = require("../index");
 
+var _buttons = require("../styles/variants/buttons");
+
 var _react2 = require("@emotion/react");
 
 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; }
@@ -233,9 +235,7 @@ var Thumb = function Thumb(props) {
       left: "".concat(state.getThumbPercent(index) * 100, "%")
     })
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, thumbProps, {
-    sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
-      outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
-    })
+    sx: _objectSpread(_objectSpread({}, sx.thumb), isFocusVisible && _buttons.defaultFocus)
   }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
     ref: inputRef
   }, (0, _utils.mergeProps)(inputProps, focusProps))))));

package/lib/cjs/styles/colors.js

@@ -116,9 +116,10 @@ var decorativeDark = (0, _map["default"])(decorative).call(decorative, function
 exports.decorativeDark = decorativeDark;
 var decorativeLight = (0, _map["default"])(decorative).call(decorative, function (color) {
   return (0, _chromaJs["default"])(color).brighten(2).hex();
-});
+}); // export const focus = chroma(accent[50]).alpha(0.75).hex();
+
 exports.decorativeLight = decorativeLight;
-var focus = (0, _chromaJs["default"])(accent[50]).alpha(0.75).hex(); // COMPONENT COLORS
+var focus = (0, _chromaJs["default"])('#D033FF').hex(); // COMPONENT COLORS
 
 exports.focus = focus;
 var button = {
@@ -127,7 +128,8 @@ var button = {
   label: active,
   hoverBorder: accent,
   hoverLabel: accent,
-  hoverBackground: accent[95]
+  hoverBackground: accent[95],
+  focus: focus
 };
 exports.button = button;
 var line = {

package/lib/cjs/styles/forms/checkbox.js

@@ -15,8 +15,10 @@ var checkbox = {
     bg: 'transparent'
   },
   'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
+    boxShadow: 'none',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
   }
 };
 exports.checkbox = checkbox;

package/lib/cjs/styles/forms/input.js

@@ -30,6 +30,8 @@ var _text = require("../variants/text");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
+var _buttons = require("../variants/buttons");
+
 var _input$container;
 
 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; }
@@ -60,8 +62,9 @@ var input = _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
   width: '100%',
   outline: 'none',
   '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus'
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
   },
   '.is-float-label &': {
     height: '45px'
@@ -93,6 +96,12 @@ input.large = _objectSpread(_objectSpread({}, input), {}, {
   lineHeight: '2em',
   height: '4em'
 });
+input.search = _objectSpread(_objectSpread({}, input), {}, {
+  '&.is-focused': {
+    outline: 'none',
+    borderColor: 'focus'
+  }
+});
 input.small = _objectSpread(_objectSpread({}, input), {}, {
   height: '28px',
   pb: '2px',
@@ -211,9 +220,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {
-      boxShadow: 'none'
+      boxShadow: 'none',
+      outline: 'none'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, _buttons.defaultFocus)
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'

package/lib/cjs/styles/forms/radio.js

@@ -1,13 +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.radioField = exports.radio = void 0;
-// Styles for default radio and variants go here.
+
+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; }
+
 // Default radio
 var radio = {
   width: 20,
@@ -18,10 +42,7 @@ var radio = {
   'input:focus ~ &': {
     bg: 'transparent'
   },
-  'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
-  }
+  'input ~ &.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
 };
 exports.radio = radio;
 var radioField = {

package/lib/cjs/styles/forms/select.js

@@ -30,6 +30,8 @@ var _input = require("./input");
 
 var _variants = require("../variants");
 
+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; }
@@ -42,9 +44,7 @@ var activeFloatLabel = {
 var select = _objectSpread(_objectSpread({}, _input.input), {}, {
   display: 'flex',
   alignItems: 'center',
-  '&.is-focused': {
-    boxShadow: 'focus'
-  },
+  '&.is-focused': _objectSpread({}, _buttons.defaultFocus),
   '.is-float-label &': _objectSpread({
     height: '45px'
   }, activeFloatLabel)

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

@@ -1,37 +1,12 @@
 "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 accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -73,9 +48,12 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': _objectSpread(_objectSpread({}, _buttons.defaultFocus), {}, {
+  border: '1px solid transparent',
+  '&.is-focused': {
+    border: '1px solid',
+    borderColor: 'focus',
     zIndex: '10'
-  }),
+  },
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

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

@@ -77,7 +77,8 @@ var listItem = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     bg: 'white'
   }
-});
+}); // the transparent border is included so that the content does not shift on hover.
+
 
 var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   padding: '0px 15px 0px 25px',
@@ -93,17 +94,18 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
     bg: 'white',
     cursor: 'pointer'
   },
-  '&.is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
-  },
   '&.has-separator': {
     borderBottom: '1px solid',
     borderBottomColor: 'line.hairline'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
   }
 });
 
 var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
   minHeight: '75px',
+  height: '76px',
   '&.has-inset-separator': {
     '&:after': {
       content: '""',
@@ -113,6 +115,17 @@ var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
       bottom: 0,
       borderBottom: '1px solid',
       borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
     }
   }
 });

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/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'
   }
 };

package/lib/styles/forms/input.js

@@ -15,7 +15,8 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { _defineProperty(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; }
 
 import { text } from '../variants/text';
-import statuses from '../../utils/devUtils/constants/statuses'; // Styles for default input and variants go here.
+import statuses from '../../utils/devUtils/constants/statuses';
+import { defaultFocus } from '../variants/buttons'; // Styles for default input and variants go here.
 
 var activeFloatLabel = {
   pt: 'md',
@@ -40,8 +41,9 @@ export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   width: '100%',
   outline: 'none',
   '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus'
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
   },
   '.is-float-label &': {
     height: '45px'
@@ -71,6 +73,12 @@ input.large = _objectSpread(_objectSpread({}, input), {}, {
   lineHeight: '2em',
   height: '4em'
 });
+input.search = _objectSpread(_objectSpread({}, input), {}, {
+  '&.is-focused': {
+    outline: 'none',
+    borderColor: 'focus'
+  }
+});
 input.small = _objectSpread(_objectSpread({}, input), {}, {
   height: '28px',
   pb: '2px',
@@ -189,9 +197,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {
-      boxShadow: 'none'
+      boxShadow: 'none',
+      outline: 'none'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, defaultFocus)
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'

package/lib/styles/forms/radio.js

@@ -1,5 +1,20 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
 // Styles for default radio and variants go here.
-// Default radio
+import { focusWithCroppedOutline } from '../variants/buttons'; // Default radio
+
 export var radio = {
   width: 20,
   height: 20,
@@ -9,10 +24,7 @@ export var radio = {
   'input:focus ~ &': {
     bg: 'transparent'
   },
-  'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
-  }
+  'input ~ &.is-focused': _objectSpread({}, focusWithCroppedOutline)
 };
 export var radioField = {
   '.is-horizontal &': {

package/lib/styles/forms/select.js

@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // Styles for default select and variants go here.
 import { input } from './input';
 import { text } from '../variants';
+import { defaultFocus } from '../variants/buttons';
 var activeFloatLabel = {
   pt: 'md',
   pb: 'xs'
@@ -23,9 +24,7 @@ var activeFloatLabel = {
 export var select = _objectSpread(_objectSpread({}, input), {}, {
   display: 'flex',
   alignItems: 'center',
-  '&.is-focused': {
-    boxShadow: 'focus'
-  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
   '.is-float-label &': _objectSpread({
     height: '45px'
   }, activeFloatLabel)

package/lib/styles/variants/accordion.js

@@ -1,18 +1,3 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
-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) { _defineProperty(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; }
-
-import { defaultFocus } from '../variants/buttons';
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -54,9 +39,12 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+  border: '1px solid transparent',
+  '&.is-focused': {
+    border: '1px solid',
+    borderColor: 'focus',
     zIndex: '10'
-  }),
+  },
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

package/lib/styles/variants/boxes.js

@@ -58,7 +58,8 @@ var listItem = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     bg: 'white'
   }
-});
+}); // the transparent border is included so that the content does not shift on hover.
+
 
 var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   padding: '0px 15px 0px 25px',
@@ -74,17 +75,18 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
     bg: 'white',
     cursor: 'pointer'
   },
-  '&.is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
-  },
   '&.has-separator': {
     borderBottom: '1px solid',
     borderBottomColor: 'line.hairline'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
   }
 });
 
 var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
   minHeight: '75px',
+  height: '76px',
   '&.has-inset-separator': {
     '&:after': {
       content: '""',
@@ -94,6 +96,17 @@ var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
       bottom: 0,
       borderBottom: '1px solid',
       borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
     }
   }
 });

package/lib/styles/variants/buttons.js

@@ -50,8 +50,14 @@ var defaultHover = {
 };
 export var defaultFocus = {
   outline: '1px solid',
-  outlineColor: 'active',
-  outlineOffset: '4px'
+  outlineColor: 'focus',
+  outlineOffset: '2px'
+};
+export var focusWithCroppedOutline = {
+  boxShadow: 'none',
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '1px'
 };
 var navItemButton = {
   textDecoration: 'none',
@@ -76,7 +82,7 @@ var navItemButton = {
   wordBreak: 'break-word',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     bg: 'accent.10'
@@ -256,7 +262,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), {}, {
@@ -264,7 +271,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), {}, {
@@ -398,7 +406,7 @@ var text = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 var quiet = {
@@ -412,12 +420,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'
@@ -469,16 +474,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(neutral['80']),
@@ -495,7 +505,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), {}, {
@@ -507,7 +520,8 @@ var link = _objectSpread(_objectSpread({}, text), {}, {
   '&.is-current': {
     cursor: 'default',
     color: 'text.primary'
-  }
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 var neutralText = _objectSpread(_objectSpread({}, link), {}, {
@@ -541,8 +555,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'
@@ -574,9 +589,7 @@ var fileInputField = {
       textDecoration: 'underline'
     }
   },
-  '&.is-focused': {
-    boxShadow: 'focus'
-  }
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 };
 
 var tooltipChip = _objectSpread(_objectSpread({}, chip), {}, {
@@ -693,7 +706,7 @@ var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
   width: '100%',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/styles/variants/collapsiblePanel.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { focusWithCroppedOutline } from '../variants/buttons';
 var collapsiblePanelContainer = {
   pr: 'sm',
   minHeight: '80vh',
@@ -16,11 +31,9 @@ var collapsiblePanelContent = {
   fontSize: 'sm',
   height: '100%',
   width: '300px',
-  '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus',
-    outline: 'none'
-  },
+  '&.is-focused': _objectSpread({
+    borderColor: 'accent.80'
+  }, focusWithCroppedOutline),
   '& div': {
     alignItems: 'center',
     display: 'flex',

package/lib/styles/variants/links.js

@@ -12,6 +12,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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) { _defineProperty(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; }
 
+import { focusWithCroppedOutline } from './buttons';
 var app = {
   color: 'active',
   fontFamily: 'standard',
@@ -21,9 +22,7 @@ var app = {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline),
   '&.is-pressed': {
     color: 'accent.40',
     textDecoration: 'underline'
@@ -37,7 +36,8 @@ var web = _objectSpread(_objectSpread({}, app), {}, {
   textDecoration: 'underline',
   '&:visited': {
     color: 'decorative.7'
-  }
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 export default {

package/lib/styles/variants/navBar.js

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

package/lib/styles/variants/stepper.js

@@ -13,6 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { _defineProperty(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 */
+import { defaultFocus } from './buttons';
 var wrapper = {
   width: '100%'
 };
@@ -26,10 +27,9 @@ var tab = {
   mb: 0,
   mr: 0,
   outline: 'none',
-  '&.is-focused': {
-    boxShadow: 'focus',
+  '&.is-focused': _objectSpread({
     borderRadius: '50%'
-  },
+  }, defaultFocus),
   '&:not(:first-of-type)': {
     flex: 1,
     maxWidth: 122

package/lib/styles/variants/tabs.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { focusWithCroppedOutline } from './buttons';
 export var tab = {
   pt: 10,
   cursor: 'pointer',
@@ -7,7 +22,7 @@ export var tab = {
   transform: 'translateY(1px)',
   width: '100%',
   '&.is-focused': {
-    boxShadow: 'focus'
+    '& > span': _objectSpread({}, focusWithCroppedOutline)
   },
   '&.is-disabled': {
     cursor: 'default'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.37.1-alpha.0",
+  "version": "1.37.2-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",