@innovaccer/design-system 2.16.1 → 2.17.0

package/css/src/components/avatarGroup.css

@@ -1,5 +1,13 @@
 .AvatarGroup-item {
-  margin-right: calc((var(--spacing-s) + var(--spacing-m)) * -1);
+  border-radius: 50%;
+}
+
+.AvatarGroup-item--regular {
+  margin-right: calc(var(--spacing-m) * -1);
+}
+
+.AvatarGroup-item--tiny {
+  margin-right: calc(var(--spacing-s) * -1);
 }
 
 .AvatarGroup-Popper {
@@ -17,3 +25,7 @@
   align-items: flex-end;
   overflow-y: auto;
 }
+
+.AvatarCount-wrapper {
+  border-radius: 50%;
+}

package/css/src/components/checkbox.css

@@ -32,6 +32,10 @@
   cursor: pointer;
 }
 
+.Checkbox-label--tiny {
+  font-weight: var(--font-weight-bold);
+}
+
 .Checkbox-outerWrapper {
   position: relative;
   margin-top: var(--spacing-s);

package/css/src/components/radio.css

@@ -98,22 +98,24 @@
   border-color: var(--alert-darker);
 }
 
-.Radio-input ~ .Radio-wrapper:focus {
+.Radio:focus-within .Radio-wrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  border-radius: 50%;
 }
 
-.Radio-input ~ .Radio-errorWrapper:focus {
+.Radio:focus-within .Radio-errorWrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-radius: 50%;
 }
 
-.Radio-input:checked ~ .Radio-wrapper:focus {
+.Radio:focus-within .Radio-input:checked ~ .Radio-wrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
-.Radio-input:checked ~ .Radio-errorWrapper:focus {
+.Radio:focus-within .Radio-input:checked ~ .Radio-errorWrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }

package/dist/.lib/tsconfig.type.tsbuildinfo

@@ -232,8 +232,8 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatar/Avatar.tsx": {
-        "version": "a81786e94a0f5a1671389c438bce3f8a9597a0b97f335249629f3328ed088acd",
-        "signature": "dcfab8db3cdc3cf7b613d885c2aeae215f91df9b567f8c577857a728dfbe3afe",
+        "version": "b047a2d2d3524645a492a130d43b8ebac4e44a0e566fce7ac0cdae0676aec70c",
+        "signature": "5b8cab30364e8daa0afadd8c184c45e1e44757bb1d7fa53df4d64be299a03b51",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatar/index.tsx": {
@@ -242,12 +242,12 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/AvatarCount.tsx": {
-        "version": "f6dcd89ea0cf4959d0fc38f450b1262333e56bf43769802f35da5610e5c85385",
+        "version": "9988e292990f14ff0f0dca6ecaa213a5186e646630aec7a668f0c15b1c62beb4",
         "signature": "28638b5b5c48afd430b5756033eefbe33a8098c1c0f56ee71b8c98c127808d1c",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/Avatars.tsx": {
-        "version": "7ab794681a82aa756a339b9a9d7a277bff257aac94e58c0aedf80121ad2cc719",
+        "version": "c3e28979e684787b885964e7daec3674d63ac42fecc66dc6aa86c0e22080e1a1",
         "signature": "695e51eeb303f29c0263fa5c6b977153066291197a52797f11988ab8e4e7e43b",
         "affectsGlobalScope": false
       },
@@ -257,8 +257,8 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/AvatarGroup.tsx": {
-        "version": "1543b03be82da1c78e7a31d1a2466de90bdacb9793abfcb0452ada586748372f",
-        "signature": "8d5c3d0db6a82897c1d9458ca2a6df1ef2ef57a4c846e4a89020f9bfc7289cb7",
+        "version": "98ffacedf310585b5dcb23d9ac1d9d0100bd4fd6e55966a34735537599f46023",
+        "signature": "f1ce022850aac94e4b631f7169a974fae72bec47b9db5df00244abd1822835e9",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/avatarGroup/index.tsx": {
@@ -482,7 +482,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/checkbox/Checkbox.tsx": {
-        "version": "bd546f1363ba4ef2e162841df5edee539c058bbd42def1d43df9a31400ee531b",
+        "version": "9fa063ab463ab2648127e84eaafd611af611915cf59aea935c0d2f6c812402ff",
         "signature": "a8465361acdffabca8badb5be1a772388fd94f09774d0765da4117696bd99c6e",
         "affectsGlobalScope": false
       },
@@ -837,7 +837,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/radio/Radio.tsx": {
-        "version": "67b408db9f5e0e472396169a9c756b7a2bc807cedf06e21ed49b1868f6df4fe1",
+        "version": "b51e6761bdbe91e2d303c26cef3797f61f9eee4e8ee6feaaeb5d9e70a1486d71",
         "signature": "b5e6689f6b40f07a2bc0a948469389520da6061ad313f9eec96b6035f5a4962a",
         "affectsGlobalScope": false
       },
@@ -1587,8 +1587,8 @@
         "affectsGlobalScope": false
       },
       "../../core/common.type.tsx": {
-        "version": "91f671b71447c4c38481be65ca323dc5757f0ea9c5a17b1274ef1c096c4846cf",
-        "signature": "bc93baa344bbf081b3d1ec3753cfe99a9ea90557f285a684f7d89d918c22b543",
+        "version": "19a1cad1e4b5585b5414e1cf95d819d4faf715017c6404e7b996322adf9e7002",
+        "signature": "209f276faa4987f4e04260886f92238156e1720a211c4c25d59c56d56f3ba42b",
         "affectsGlobalScope": false
       },
       "../../core/global.d.ts": {
@@ -4673,6 +4673,7 @@
         "../../node_modules/classnames/index.d.ts"
       ],
       "../../core/components/atoms/avatarGroup/AvatarGroup.tsx": [
+        "../../core/common.type.tsx",
         "../../core/components/atoms/avatarGroup/AvatarCount.tsx",
         "../../core/components/atoms/avatarGroup/AvatarPopperBody.tsx",
         "../../core/components/atoms/avatarGroup/Avatars.tsx",
@@ -4692,7 +4693,8 @@
       "../../core/components/atoms/avatarGroup/Avatars.tsx": [
         "../../core/index.tsx",
         "../../node_modules/@types/node/util.d.ts",
-        "../../node_modules/@types/react/index.d.ts"
+        "../../node_modules/@types/react/index.d.ts",
+        "../../node_modules/classnames/index.d.ts"
       ],
       "../../core/components/atoms/avatarGroup/index.tsx": [
         "../../core/components/atoms/avatarGroup/AvatarGroup.tsx",

package/dist/core/common.type.d.ts

@@ -11,3 +11,4 @@ export declare type AutoComplete = 'on' | 'off';
 export declare type NumberRange = [number, number];
 export declare type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export declare type TextColor = 'white' | 'primary' | 'secondary' | 'success' | 'alert' | 'warning' | 'accent1' | 'accent2' | 'accent3' | 'accent4' | 'inverse' | 'primary-dark' | 'secondary-dark' | 'success-dark' | 'alert-dark' | 'warning-dark' | 'accent1-dark' | 'accent2-dark' | 'accent3-dark' | 'accent4-dark' | 'primary-darker' | 'success-darker' | 'alert-darker' | 'warning-darker' | 'accent1-darker' | 'accent2-darker' | 'accent3-darker' | 'accent4-darker' | 'primary-light' | 'secondary-light' | 'success-light' | 'alert-light' | 'warning-light' | 'accent1-light' | 'accent2-light' | 'accent3-light' | 'accent4-light' | 'inverse-light' | 'primary-lighter' | 'secondary-lighter' | 'success-lighter' | 'alert-lighter' | 'warning-lighter' | 'accent1-lighter' | 'accent2-lighter' | 'accent3-lighter' | 'accent4-lighter' | 'inverse-lighter' | 'primary-lightest' | 'secondary-lightest' | 'success-lightest' | 'alert-lightest' | 'warning-lightest' | 'accent1-lightest' | 'accent2-lightest' | 'accent3-lightest' | 'accent4-lightest' | 'inverse-lightest' | 'primary-shadow' | 'secondary-shadow' | 'success-shadow' | 'alert-shadow' | 'warning-shadow' | 'accent1-shadow' | 'accent2-shadow' | 'accent3-shadow' | 'accent4-shadow' | 'inverse-shadow';
+export declare type AvatarSize = 'regular' | 'tiny';

package/dist/core/components/atoms/avatar/Avatar.d.ts

@@ -1,7 +1,6 @@
 import { BaseProps } from "../../../utils/types";
 import { TooltipProps } from "../../../index.type";
-import { AccentAppearance } from "../../../common.type";
-export declare type AvatarSize = 'regular' | 'tiny';
+import { AccentAppearance, AvatarSize } from "../../../common.type";
 export interface AvatarProps extends BaseProps {
     appearance?: AccentAppearance;
     children?: string;

package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts

@@ -1,5 +1,6 @@
 import { BaseProps } from "../../../utils/types";
 import { AvatarProps, PopoverProps } from "../../../index.type";
+import { AvatarSize } from "../../../common.type";
 interface AvatarData extends Record<string, any> {
     firstName?: string;
     lastName?: string;
@@ -18,6 +19,7 @@ export interface AvatarGroupProps extends BaseProps {
     list: AvatarData[];
     max: number;
     borderColor: string;
+    size: AvatarSize;
     popoverOptions: AvatarPopoverProps;
     tooltipPosition: PopoverProps['position'];
 }
@@ -26,9 +28,10 @@ export declare const AvatarGroup: {
     displayName: string;
     defaultProps: {
         max: number;
-        borderColor: string;
         tooltipPosition: string;
+        borderColor: string;
         popoverOptions: {};
+        size: string;
     };
 };
 export default AvatarGroup;

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1689164169141 
+   * Generated on: 1690223582934 
    *      Package: @innovaccer/design-system
-   *      Version: v2.16.1
+   *      Version: v2.17.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -861,16 +861,18 @@ Avatar.defaultProps = {
 };
 
 var AvatarCount = function AvatarCount(props) {
-  var _classNames2;
+  var _classNames, _classNames2;
 
   var hiddenAvatarCount = props.hiddenAvatarCount,
-      avatarStyle = props.avatarStyle;
-  var ContentClass = classnames(_defineProperty$1({}, "Avatar-content--secondary", true));
+      avatarStyle = props.avatarStyle,
+      size = props.size;
+  var ContentClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "Avatar-content--secondary", true), _defineProperty$1(_classNames, "Avatar-content--tiny", size === 'tiny'), _classNames));
   var AvatarVariantsClass = classnames((_classNames2 = {
     Avatar: true
-  }, _defineProperty$1(_classNames2, "Avatar--regular", true), _defineProperty$1(_classNames2, "Avatar--secondary", true), _defineProperty$1(_classNames2, 'Avatar--disabled', true), _classNames2));
+  }, _defineProperty$1(_classNames2, "Avatar--regular", size === 'regular'), _defineProperty$1(_classNames2, "Avatar--tiny", size === 'tiny'), _defineProperty$1(_classNames2, "Avatar--secondary", true), _defineProperty$1(_classNames2, 'Avatar--disabled', true), _classNames2));
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
+    className: "AvatarCount-wrapper",
     style: avatarStyle
   }, /*#__PURE__*/React.createElement("span", {
     className: AvatarVariantsClass
@@ -881,19 +883,24 @@ var AvatarCount = function AvatarCount(props) {
 };
 
 var Avatars = function Avatars(props) {
+  var _classNames;
+
   var avatarList = props.avatarList,
       avatarStyle = props.avatarStyle,
-      tooltipPosition = props.tooltipPosition;
+      tooltipPosition = props.tooltipPosition,
+      size = props.size;
+  var GroupClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "AvatarGroup-item", true), _defineProperty$1(_classNames, "AvatarGroup-item--tiny", size === 'tiny'), _defineProperty$1(_classNames, "AvatarGroup-item--regular", size === 'regular'), _classNames));
   var avatars = avatarList.map(function (item, index) {
     var appearance = item.appearance,
         firstName = item.firstName,
         lastName = item.lastName;
     return /*#__PURE__*/React.createElement("div", {
       "data-test": "DesignSystem-AvatarGroup--Avatar",
-      className: "AvatarGroup-item",
+      className: GroupClass,
       style: avatarStyle,
       key: index
     }, /*#__PURE__*/React.createElement(Avatar, {
+      size: size,
       appearance: appearance,
       firstName: firstName,
       lastName: lastName,
@@ -943,7 +950,8 @@ var AvatarGroup = function AvatarGroup(props) {
       popoverOptions = props.popoverOptions,
       tooltipPosition = props.tooltipPosition,
       list = props.list,
-      className = props.className;
+      className = props.className,
+      size = props.size;
   var popperRenderer = popoverOptions.popperRenderer,
       _popoverOptions$maxHe = popoverOptions.maxHeight,
       maxHeight = _popoverOptions$maxHe === void 0 ? 150 : _popoverOptions$maxHe,
@@ -960,11 +968,13 @@ var AvatarGroup = function AvatarGroup(props) {
   var baseProps = extractBaseProps(props);
   var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
   var style = {
-    borderRadius: '50%',
     backgroundColor: "".concat(borderColor),
-    border: "var(--spacing-xs) solid ".concat(borderColor),
-    boxShadow: "0 0 0 var(--spacing-xs) ".concat(borderColor)
+    boxShadow: "0 0 0  calc(var(--spacing-xs) + var(--spacing-s)) ".concat(borderColor)
+  };
+  var tinyAvatarStyle = {
+    boxShadow: "0 0 0  var(--spacing-s) ".concat(borderColor)
   };
+  var avatarStyle = size === 'tiny' ? _objectSpread2(_objectSpread2({}, style), tinyAvatarStyle) : style;
   var AvatarGroupClass = classnames(_defineProperty$1({}, 'AvatarGroup', true), className);
   var popperClass = classnames(_defineProperty$1({}, 'AvatarGroup-Popper', true), popperClassName);
   return /*#__PURE__*/React.createElement("div", _extends$2({
@@ -972,15 +982,17 @@ var AvatarGroup = function AvatarGroup(props) {
   }, baseProps, {
     className: "".concat(AvatarGroupClass, " d-inline-flex")
   }), /*#__PURE__*/React.createElement(Avatars, {
+    size: size,
     avatarList: list.slice(0, max),
-    avatarStyle: style,
+    avatarStyle: avatarStyle,
     tooltipPosition: tooltipPosition
   }), list.length - max > 0 && /*#__PURE__*/React.createElement(Popover, {
     on: on,
     dark: dark,
     trigger: /*#__PURE__*/React.createElement(AvatarCount, {
+      size: size,
       hiddenAvatarCount: hiddenAvatarCount,
-      avatarStyle: style
+      avatarStyle: avatarStyle
     }),
     position: position,
     appendToBody: appendToBody,
@@ -996,9 +1008,10 @@ var AvatarGroup = function AvatarGroup(props) {
 AvatarGroup.displayName = 'AvatarGroup';
 AvatarGroup.defaultProps = {
   max: 2,
-  borderColor: 'var(--white)',
   tooltipPosition: 'bottom',
-  popoverOptions: {}
+  borderColor: 'white',
+  popoverOptions: {},
+  size: 'regular'
 };
 
 var useEffect$1 = React.useEffect,
@@ -3009,7 +3022,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
 
 var _excluded$v = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames6;
+  var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6;
 
   var _props$size = props.size,
       size = _props$size === void 0 ? 'regular' : _props$size,
@@ -3052,7 +3065,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var CheckboxOuterWrapper = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Checkbox-outerWrapper', true), _defineProperty$1(_classNames2, "Checkbox-outerWrapper--".concat(size), size), _classNames2));
   var CheckboxInputWrapper = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'Checkbox-input', true), _defineProperty$1(_classNames3, 'Checkbox-input--checked', checked), _defineProperty$1(_classNames3, 'Checkbox-input--indeterminate', props.indeterminate), _classNames3));
   var CheckboxWrapper = classnames((_classNames4 = {}, _defineProperty$1(_classNames4, 'Checkbox-wrapper', true), _defineProperty$1(_classNames4, 'Checkbox-wrapper--default', !error), _defineProperty$1(_classNames4, 'Checkbox-wrapper--error', error), _classNames4));
-  var CheckboxLabelClass = classnames(_defineProperty$1({}, 'Checkbox-label', true));
+  var CheckboxLabelClass = classnames((_classNames5 = {}, _defineProperty$1(_classNames5, 'Checkbox-label', true), _defineProperty$1(_classNames5, 'Checkbox-label--tiny', size === 'tiny'), _classNames5));
 
   var setIndeterminate = function setIndeterminate(indeterminateValue) {
     ref.current.indeterminate = indeterminateValue;
@@ -8195,7 +8208,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     className: RadioOuterWrapper,
     "data-test": "DesignSystem-Radio-OuterWrapper"
   }, /*#__PURE__*/React.createElement("input", _extends$2({
-    tabIndex: -1
+    tabIndex: 0
   }, rest, {
     type: "radio",
     disabled: disabled,
@@ -8208,11 +8221,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     className: "Radio-input",
     id: id,
     "data-test": "DesignSystem-Radio-Input"
-  })),
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-  React.createElement("span", {
-    tabIndex: 0,
+  })), /*#__PURE__*/React.createElement("span", {
     "data-test": "DesignSystem-Radio-wrapper",
     className: RadioWrapper
   })), /*#__PURE__*/React.createElement("div", {
@@ -21808,6 +21817,6 @@ LinkButton.defaultProps = {
   iconAlign: 'left'
 };
 
-var version = "2.16.1";
+var version = "2.17.0";
 
 export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1689164169426 
+   * Generated on: 1690223583277 
    *      Package: @innovaccer/design-system
-   *      Version: v2.16.1
+   *      Version: v2.17.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -507,13 +507,15 @@
       var _a, _b;
 
       var hiddenAvatarCount = props.hiddenAvatarCount,
-          avatarStyle = props.avatarStyle;
-      var ContentClass = classNames__default["default"]((_a = {}, _a["Avatar-content--secondary"] = true, _a));
+          avatarStyle = props.avatarStyle,
+          size = props.size;
+      var ContentClass = classNames__default["default"]((_a = {}, _a["Avatar-content--secondary"] = true, _a["Avatar-content--tiny"] = size === 'tiny', _a));
       var AvatarVariantsClass = classNames__default["default"]((_b = {
         Avatar: true
-      }, _b["Avatar--regular"] = true, _b["Avatar--secondary"] = true, _b['Avatar--disabled'] = true, _b));
+      }, _b["Avatar--regular"] = size === 'regular', _b["Avatar--tiny"] = size === 'tiny', _b["Avatar--secondary"] = true, _b['Avatar--disabled'] = true, _b));
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
+        className: "AvatarCount-wrapper",
         style: avatarStyle
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: AvatarVariantsClass
@@ -524,19 +526,24 @@
     };
 
     var Avatars = function Avatars(props) {
+      var _a;
+
       var avatarList = props.avatarList,
           avatarStyle = props.avatarStyle,
-          tooltipPosition = props.tooltipPosition;
+          tooltipPosition = props.tooltipPosition,
+          size = props.size;
+      var GroupClass = classNames__default["default"]((_a = {}, _a["AvatarGroup-item"] = true, _a["AvatarGroup-item--tiny"] = size === 'tiny', _a["AvatarGroup-item--regular"] = size === 'regular', _a));
       var avatars = avatarList.map(function (item, index) {
         var appearance = item.appearance,
             firstName = item.firstName,
             lastName = item.lastName;
         return /*#__PURE__*/React__namespace.createElement("div", {
           "data-test": "DesignSystem-AvatarGroup--Avatar",
-          className: "AvatarGroup-item",
+          className: GroupClass,
           style: avatarStyle,
           key: index
         }, /*#__PURE__*/React__namespace.createElement(Avatar, {
+          size: size,
           appearance: appearance,
           firstName: firstName,
           lastName: lastName,
@@ -590,7 +597,8 @@
           popoverOptions = props.popoverOptions,
           tooltipPosition = props.tooltipPosition,
           list = props.list,
-          className = props.className;
+          className = props.className,
+          size = props.size;
       var popperRenderer = popoverOptions.popperRenderer,
           _c = popoverOptions.maxHeight,
           maxHeight = _c === void 0 ? 150 : _c,
@@ -607,11 +615,13 @@
       var baseProps = extractBaseProps(props);
       var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
       var style = {
-        borderRadius: '50%',
         backgroundColor: "" + borderColor,
-        border: "var(--spacing-xs) solid " + borderColor,
-        boxShadow: "0 0 0 var(--spacing-xs) " + borderColor
+        boxShadow: "0 0 0  calc(var(--spacing-xs) + var(--spacing-s)) " + borderColor
       };
+      var tinyAvatarStyle = {
+        boxShadow: "0 0 0  var(--spacing-s) " + borderColor
+      };
+      var avatarStyle = size === 'tiny' ? __assign(__assign({}, style), tinyAvatarStyle) : style;
       var AvatarGroupClass = classNames__default["default"]((_a = {}, _a['AvatarGroup'] = true, _a), className);
       var popperClass = classNames__default["default"]((_b = {}, _b['AvatarGroup-Popper'] = true, _b), popperClassName);
       return /*#__PURE__*/React__namespace.createElement("div", __assign({
@@ -619,15 +629,17 @@
       }, baseProps, {
         className: AvatarGroupClass + " d-inline-flex"
       }), /*#__PURE__*/React__namespace.createElement(Avatars, {
+        size: size,
         avatarList: list.slice(0, max),
-        avatarStyle: style,
+        avatarStyle: avatarStyle,
         tooltipPosition: tooltipPosition
       }), list.length - max > 0 && /*#__PURE__*/React__namespace.createElement(Popover, {
         on: on,
         dark: dark,
         trigger: /*#__PURE__*/React__namespace.createElement(AvatarCount, {
+          size: size,
           hiddenAvatarCount: hiddenAvatarCount,
-          avatarStyle: style
+          avatarStyle: avatarStyle
         }),
         position: position,
         appendToBody: appendToBody,
@@ -643,9 +655,10 @@
     AvatarGroup.displayName = 'AvatarGroup';
     AvatarGroup.defaultProps = {
       max: 2,
-      borderColor: 'var(--white)',
       tooltipPosition: 'bottom',
-      popoverOptions: {}
+      borderColor: 'white',
+      popoverOptions: {},
+      size: 'regular'
     };
 
     var useEffect$1 = React__namespace.useEffect,
@@ -2667,7 +2680,7 @@
       var CheckboxOuterWrapper = classNames__default["default"]((_b = {}, _b['Checkbox-outerWrapper'] = true, _b["Checkbox-outerWrapper--" + size] = size, _b));
       var CheckboxInputWrapper = classNames__default["default"]((_c = {}, _c['Checkbox-input'] = true, _c['Checkbox-input--checked'] = checked, _c['Checkbox-input--indeterminate'] = props.indeterminate, _c));
       var CheckboxWrapper = classNames__default["default"]((_d = {}, _d['Checkbox-wrapper'] = true, _d['Checkbox-wrapper--default'] = !error, _d['Checkbox-wrapper--error'] = error, _d));
-      var CheckboxLabelClass = classNames__default["default"]((_e = {}, _e['Checkbox-label'] = true, _e));
+      var CheckboxLabelClass = classNames__default["default"]((_e = {}, _e['Checkbox-label'] = true, _e['Checkbox-label--tiny'] = size === 'tiny', _e));
 
       var setIndeterminate = function setIndeterminate(indeterminateValue) {
         ref.current.indeterminate = indeterminateValue;
@@ -7549,7 +7562,7 @@
         className: RadioOuterWrapper,
         "data-test": "DesignSystem-Radio-OuterWrapper"
       }, /*#__PURE__*/React__namespace.createElement("input", __assign({
-        tabIndex: -1
+        tabIndex: 0
       }, rest, {
         type: "radio",
         disabled: disabled,
@@ -7563,7 +7576,6 @@
         id: id,
         "data-test": "DesignSystem-Radio-Input"
       })), /*#__PURE__*/React__namespace.createElement("span", {
-        tabIndex: 0,
         "data-test": "DesignSystem-Radio-wrapper",
         className: RadioWrapper
       })), /*#__PURE__*/React__namespace.createElement("div", {
@@ -16120,7 +16132,7 @@
       iconAlign: 'left'
     };
 
-    var version = "2.16.1";
+    var version = "2.17.0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;