@nulogy/components 6.7.0 → 6.7.3

package/dist/main.js

@@ -23374,7 +23374,7 @@
     displayName: "DesktopMenu",
     componentId: "e4dzdq-4"
   })({
-    div: {
+    "> div": {
       ":not(:last-of-type)": {
         marginRight: Theme.space.x1
       }
@@ -24386,6 +24386,7 @@
     var spaceProps = getSubset(props, propTypes.space);
     var restProps = omitSubset(props, propTypes.space);
     return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
+      position: "relative",
       className: className,
       py: "half",
       px: "0"
@@ -24515,6 +24516,7 @@
         toggled = _ref.toggled,
         onClick = _ref.onClick;
     return /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
+      position: "relative",
       display: "flex",
       alignItems: "center",
       justifyContent: toggled ? "flex-end" : "flex-start",
@@ -27514,9 +27516,10 @@
   var FocusManager = function FocusManager(_ref) {
     var children = _ref.children,
         _ref$refs = _ref.refs,
-        refs = _ref$refs === void 0 ? undefined : _ref$refs;
+        refs = _ref$refs === void 0 ? undefined : _ref$refs,
+        defaultFocusedIndex = _ref.defaultFocusedIndex;
 
-    var _useState = React.useState(0),
+    var _useState = React.useState(defaultFocusedIndex !== null && defaultFocusedIndex !== void 0 ? defaultFocusedIndex : 0),
         focusedIndex = _useState[0],
         setFocusedIndex = _useState[1];
 
@@ -27987,7 +27990,8 @@
       return /*#__PURE__*/React__default['default'].createElement(Box, {
         position: "relative"
       }, /*#__PURE__*/React__default['default'].createElement(FocusManager, {
-        refs: this.tabRefs
+        refs: this.tabRefs,
+        defaultFocusedIndex: this.getSelectedIndex()
       }, function (_ref2) {
         var focusedIndex = _ref2.focusedIndex,
             setFocusedIndex = _ref2.setFocusedIndex,
@@ -28036,6 +28040,14 @@
       return value === selected;
     };
 
+    var getSelectedIndex = function getSelectedIndex() {
+      return React__default['default'].Children.toArray(rest.children).findIndex(function (child) {
+        var _a, _b;
+
+        return ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.value) === selected;
+      });
+    };
+
     var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
       return React__default['default'].Children.map(rest.children, function (child, index) {
         return /*#__PURE__*/React__default['default'].cloneElement(child, {
@@ -28063,7 +28075,8 @@
       bg: "whiteGrey",
       borderRadius: "20px"
     }, rest), /*#__PURE__*/React__default['default'].createElement(FocusManager, {
-      refs: optionRefs
+      refs: optionRefs,
+      defaultFocusedIndex: getSelectedIndex()
     }, function (_ref2) {
       var focusedIndex = _ref2.focusedIndex,
           setFocusedIndex = _ref2.setFocusedIndex,
@@ -44983,8 +44996,10 @@
   });
 
   var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: menuItem.key || menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger, Object.assign({
       name: menuItem.name,
       "aria-label": menuItem.ariaLabel,
@@ -44993,8 +45008,10 @@
   };
 
   var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuLink$1, Object.assign({
       href: menuItem.href,
       to: menuItem.to,
@@ -45003,14 +45020,18 @@
   };
 
   var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }), menuItem.render());
   };
 
   var renderText$1 = function renderText(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(MenuText$1, Object.assign({
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, themeColorObject), menuItem.name);
   };
 
@@ -45044,7 +45065,7 @@
     displayName: "DesktopMenu",
     componentId: "sc-8mrjkc-4"
   })({
-    div: {
+    "> div": {
       ":not(:last-of-type)": {
         marginRight: "8px"
       }
@@ -45246,8 +45267,10 @@
   });
 
   var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(StyledLi, {
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
       layer: layer
     }, themeColorObject, {
@@ -45259,8 +45282,10 @@
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, themeColorObject, {
       layer: layer,
       onClick: linkOnClick
@@ -45268,8 +45293,10 @@
   };
 
   var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("li", {
-      key: menuItem.name,
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
       style: {
         display: "block"
       }
@@ -45282,8 +45309,10 @@
   };
 
   var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(MenuText, Object.assign({
-      key: menuItem.name,
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
       layer: layer
     }, themeColorObject), menuItem.name);
   };

package/dist/main.module.js

@@ -23348,7 +23348,7 @@ var DesktopMenu$1 = styled(BaseDesktopMenu$1).withConfig({
   displayName: "DesktopMenu",
   componentId: "e4dzdq-4"
 })({
-  div: {
+  "> div": {
     ":not(:last-of-type)": {
       marginRight: Theme.space.x1
     }
@@ -24360,6 +24360,7 @@ var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
   var spaceProps = getSubset(props, propTypes.space);
   var restProps = omitSubset(props, propTypes.space);
   return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    position: "relative",
     className: className,
     py: "half",
     px: "0"
@@ -24489,6 +24490,7 @@ var Switch$1 = function Switch(_ref) {
       toggled = _ref.toggled,
       onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
+    position: "relative",
     display: "flex",
     alignItems: "center",
     justifyContent: toggled ? "flex-end" : "flex-start",
@@ -27488,9 +27490,10 @@ Tab.defaultProps = {
 var FocusManager = function FocusManager(_ref) {
   var children = _ref.children,
       _ref$refs = _ref.refs,
-      refs = _ref$refs === void 0 ? undefined : _ref$refs;
+      refs = _ref$refs === void 0 ? undefined : _ref$refs,
+      defaultFocusedIndex = _ref.defaultFocusedIndex;
 
-  var _useState = useState(0),
+  var _useState = useState(defaultFocusedIndex !== null && defaultFocusedIndex !== void 0 ? defaultFocusedIndex : 0),
       focusedIndex = _useState[0],
       setFocusedIndex = _useState[1];
 
@@ -27961,7 +27964,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React__default.createElement(Box, {
       position: "relative"
     }, /*#__PURE__*/React__default.createElement(FocusManager, {
-      refs: this.tabRefs
+      refs: this.tabRefs,
+      defaultFocusedIndex: this.getSelectedIndex()
     }, function (_ref2) {
       var focusedIndex = _ref2.focusedIndex,
           setFocusedIndex = _ref2.setFocusedIndex,
@@ -28010,6 +28014,14 @@ var Switcher = function Switcher(_a) {
     return value === selected;
   };
 
+  var getSelectedIndex = function getSelectedIndex() {
+    return React__default.Children.toArray(rest.children).findIndex(function (child) {
+      var _a, _b;
+
+      return ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.value) === selected;
+    });
+  };
+
   var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
     return React__default.Children.map(rest.children, function (child, index) {
       return /*#__PURE__*/React__default.cloneElement(child, {
@@ -28037,7 +28049,8 @@ var Switcher = function Switcher(_a) {
     bg: "whiteGrey",
     borderRadius: "20px"
   }, rest), /*#__PURE__*/React__default.createElement(FocusManager, {
-    refs: optionRefs
+    refs: optionRefs,
+    defaultFocusedIndex: getSelectedIndex()
   }, function (_ref2) {
     var focusedIndex = _ref2.focusedIndex,
         setFocusedIndex = _ref2.setFocusedIndex,
@@ -44957,8 +44970,10 @@ var Nav$1 = styled.nav.withConfig({
 });
 
 var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("div", {
-    key: menuItem.key || menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuTrigger, Object.assign({
     name: menuItem.name,
     "aria-label": menuItem.ariaLabel,
@@ -44967,8 +44982,10 @@ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
 };
 
 var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("div", {
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuLink$1, Object.assign({
     href: menuItem.href,
     to: menuItem.to,
@@ -44977,14 +44994,18 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
 };
 
 var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }), menuItem.render());
 };
 
 var renderText$1 = function renderText(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(MenuText$1, Object.assign({
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, themeColorObject), menuItem.name);
 };
 
@@ -45018,7 +45039,7 @@ var DesktopMenu = styled(BaseDesktopMenu).withConfig({
   displayName: "DesktopMenu",
   componentId: "sc-8mrjkc-4"
 })({
-  div: {
+  "> div": {
     ":not(:last-of-type)": {
       marginRight: "8px"
     }
@@ -45220,8 +45241,10 @@ var StyledLi = styled.li.withConfig({
 });
 
 var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(StyledLi, {
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
     layer: layer
   }, themeColorObject, {
@@ -45233,8 +45256,10 @@ var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorOb
 };
 
 var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles, Object.assign({
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, themeColorObject, {
     layer: layer,
     onClick: linkOnClick
@@ -45242,8 +45267,10 @@ var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject
 };
 
 var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
-    key: menuItem.name,
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
     style: {
       display: "block"
     }
@@ -45256,8 +45283,10 @@ var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObje
 };
 
 var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(MenuText, Object.assign({
-    key: menuItem.name,
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
     layer: layer
   }, themeColorObject), menuItem.name);
 };

package/dist/src/Branding/BrandingText.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const BrandingText: React.SFC<any>;
+declare const BrandingText: React.FC<any>;
 export default BrandingText;

package/dist/src/Branding/LettermarkLogo.d.ts

@@ -3,5 +3,5 @@ declare type LettermarkLogoProps = {
     letterFill?: string;
     size?: string;
 };
-declare const LettermarkLogo: React.SFC<LettermarkLogoProps>;
+declare const LettermarkLogo: React.FC<LettermarkLogoProps>;
 export default LettermarkLogo;

package/dist/src/Branding/WordmarkLogo.d.ts

@@ -4,5 +4,5 @@ declare type WordmarkLogoProps = {
     letterFill?: string;
     size?: string;
 };
-declare const WordmarkLogo: React.SFC<WordmarkLogoProps>;
+declare const WordmarkLogo: React.FC<WordmarkLogoProps>;
 export default WordmarkLogo;

package/dist/src/Breadcrumbs/BreadcrumbsListItem.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const BreadcrumbsListItem: React.SFC<any>;
+declare const BreadcrumbsListItem: React.FC<any>;
 export default BreadcrumbsListItem;

package/dist/src/Button/Button.d.ts

@@ -13,5 +13,5 @@ export declare type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"butt
     theme?: DefaultNDSThemeType;
     href?: string;
 };
-declare const Button: React.SFC<ButtonProps>;
+declare const Button: React.FC<ButtonProps>;
 export default Button;

package/dist/src/Button/DangerButton.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ButtonProps } from "./Button";
-declare const DangerButton: import("styled-components").StyledComponent<import("react").SFC<ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const DangerButton: import("styled-components").StyledComponent<import("react").FC<ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export default DangerButton;

package/dist/src/Button/PrimaryButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const PrimaryButton: React.SFC<any>;
+declare const PrimaryButton: React.FC<any>;
 export default PrimaryButton;

package/dist/src/Button/QuietButton.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ButtonProps } from "./Button";
-declare const QuietButton: import("styled-components").StyledComponent<import("react").SFC<ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const QuietButton: import("styled-components").StyledComponent<import("react").FC<ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export default QuietButton;

package/dist/src/ButtonGroup/ButtonGroup.d.ts

@@ -4,5 +4,5 @@ declare type ButtonGroupProps = FlexProps & {
     alignment?: "left" | "spaced" | "right";
     className?: string;
 };
-declare const ButtonGroup: React.SFC<ButtonGroupProps>;
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default ButtonGroup;

package/dist/src/Card/Card.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { BoxProps } from "../Box/Box";
-declare const Card: React.SFC<BoxProps>;
+declare const Card: React.FC<BoxProps>;
 export default Card;

package/dist/src/Card/CardSet.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { BoxProps } from "../Box/Box";
-declare const CardSet: import("styled-components").StyledComponent<React.SFC<BoxProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const CardSet: import("styled-components").StyledComponent<React.FC<BoxProps>, import("styled-components").DefaultTheme, {}, never>;
 export default CardSet;

package/dist/src/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const Checkbox: React.SFC<any>;
+declare const Checkbox: React.FC<any>;
 export default Checkbox;

package/dist/src/Checkbox/CheckboxGroup.d.ts

@@ -14,5 +14,5 @@ interface CheckboxGroupProps {
     required?: boolean;
     disabled?: boolean;
 }
-declare const CheckboxGroup: React.SFC<CheckboxGroupProps>;
+declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export default CheckboxGroup;

package/dist/src/DatePicker/DatePicker.d.ts

@@ -14,5 +14,5 @@ declare type DatePickerProps = FieldProps & {
     disableFlipping?: boolean;
     className?: string;
 };
-declare const DatePicker: React.SFC<DatePickerProps>;
+declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/dist/src/DatePicker/DatePickerHeader.d.ts

@@ -7,5 +7,5 @@ declare type DatePickerHeaderProps = {
     nextMonthButtonDisabled: boolean;
     locale?: string;
 };
-declare const DatePickerHeader: React.SFC<DatePickerHeaderProps>;
+declare const DatePickerHeader: React.FC<DatePickerHeaderProps>;
 export default DatePickerHeader;

package/dist/src/DatePicker/DatePickerInput.d.ts

@@ -12,5 +12,5 @@ declare type DatePickerInputProps = {
     inputProps?: any;
     "aria-label"?: string;
 };
-declare const DatePickerInput: React.SFC<DatePickerInputProps>;
+declare const DatePickerInput: React.FC<DatePickerInputProps>;
 export default DatePickerInput;

package/dist/src/DateRange/DateRange.d.ts

@@ -30,5 +30,5 @@ declare type DateRangeProps = FieldProps & {
     endTimeProps?: any;
     startTimeProps?: any;
 };
-declare const DateRange: React.SFC<DateRangeProps>;
+declare const DateRange: React.FC<DateRangeProps>;
 export default DateRange;

package/dist/src/DateRange/EndTime.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const EndTime: import("styled-components").StyledComponent<import("react").SFC<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("react").ReactText>>, string | number | symbol> & {
+declare const EndTime: import("styled-components").StyledComponent<import("react").FC<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("react").ReactText>>, string | number | symbol> & {
     disabled?: boolean;
     value?: string;
     timeFormat?: string;

package/dist/src/DateRange/StartTime.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const StartTime: import("styled-components").StyledComponent<import("react").SFC<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("react").ReactText>>, string | number | symbol> & {
+declare const StartTime: import("styled-components").StyledComponent<import("react").FC<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("react").ReactText>>, string | number | symbol> & {
     disabled?: boolean;
     value?: string;
     timeFormat?: string;

package/dist/src/DropdownMenu/DropdownButton.d.ts

@@ -7,5 +7,5 @@ declare type DropdownButtonProps = React.ComponentPropsWithRef<"button"> & {
     hoverColor?: string;
     bgHoverColor?: string;
 };
-declare const DropdownButton: React.SFC<DropdownButtonProps>;
+declare const DropdownButton: React.FC<DropdownButtonProps>;
 export default DropdownButton;

package/dist/src/DropdownMenu/DropdownItem.d.ts

@@ -6,5 +6,5 @@ declare type DropdownItemProps = {
     hoverColor?: string;
     bgHoverColor?: string;
 };
-declare const DropdownItem: React.SFC<DropdownItemProps>;
+declare const DropdownItem: React.FC<DropdownItemProps>;
 export default DropdownItem;

package/dist/src/DropdownMenu/DropdownLink.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const DropdownLink: React.SFC<any>;
+declare const DropdownLink: React.FC<any>;
 export default DropdownLink;

package/dist/src/DropdownMenu/DropdownMenu.d.ts

@@ -14,5 +14,5 @@ declare type DropdownMenuProps = {
     openAriaLabel?: string;
     closeAriaLabel?: string;
 };
-declare const DropdownMenu: React.SFC<DropdownMenuProps>;
+declare const DropdownMenu: React.FC<DropdownMenuProps>;
 export default DropdownMenu;

package/dist/src/DropdownMenu/DropdownMenuContainer.d.ts

@@ -7,5 +7,5 @@ declare type DropdownMenuContainerProps = {
     dataPlacement?: any;
     theme?: DefaultNDSThemeType;
 };
-declare const DropdownMenuContainer: React.SFC<DropdownMenuContainerProps>;
+declare const DropdownMenuContainer: React.FC<DropdownMenuContainerProps>;
 export default DropdownMenuContainer;

package/dist/src/Form/Fieldset.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Fieldset: React.SFC<any>;
+declare const Fieldset: React.FC<any>;
 export default Fieldset;

package/dist/src/Form/FormSection.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 declare type BaseFormSectionProps = React.ComponentPropsWithRef<"fieldset"> & {
     title?: string;
 };
-declare const FormSection: import("styled-components").StyledComponent<React.SFC<BaseFormSectionProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const FormSection: import("styled-components").StyledComponent<React.FC<BaseFormSectionProps>, import("styled-components").DefaultTheme, {}, never>;
 export default FormSection;

package/dist/src/Icon/LoadingIcon.d.ts

@@ -5,5 +5,5 @@ declare type LoadingIconProps = {
     title?: string;
     className?: string;
 };
-declare const LoadingIcon: React.SFC<LoadingIconProps>;
+declare const LoadingIcon: React.FC<LoadingIconProps>;
 export default LoadingIcon;

package/dist/src/Input/Input.d.ts

@@ -7,5 +7,5 @@ declare type InputProps = InputFieldProps & SpaceProps & {
     errorList?: string[];
     className?: string;
 };
-declare const Input: React.SFC<InputProps>;
+declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/src/Input/InputField.d.ts

@@ -17,4 +17,4 @@ export declare type InputFieldProps = React.ComponentPropsWithRef<"input"> & {
     iconSize?: string;
     inputWidth?: string;
 };
-export declare const InputField: React.SFC<InputFieldProps>;
+export declare const InputField: React.FC<InputFieldProps>;

package/dist/src/List/List.d.ts

@@ -8,5 +8,5 @@ declare type ListProps = React.ComponentPropsWithRef<"ul"> & SpaceProps & Border
     leftAlign?: boolean;
     listStyle?: string;
 };
-declare const List: React.SFC<ListProps>;
+declare const List: React.FC<ListProps>;
 export default List;

package/dist/src/List/ListItem.d.ts

@@ -3,5 +3,5 @@ import { SpaceProps, ColorProps, TypographyProps } from "styled-system";
 declare type ListItemProps = React.ComponentPropsWithRef<"li"> & SpaceProps & ColorProps & TypographyProps & {
     className?: string;
 };
-declare const ListItem: React.SFC<ListItemProps>;
+declare const ListItem: React.FC<ListItemProps>;
 export default ListItem;

package/dist/src/LoadingAnimation/LoadingAnimation.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 declare type LoadingAnimationProps = React.ComponentPropsWithRef<"svg"> & {
     inactive?: boolean;
 };
-declare const LoadingAnimation: React.SFC<LoadingAnimationProps>;
+declare const LoadingAnimation: React.FC<LoadingAnimationProps>;
 export default LoadingAnimation;

package/dist/src/Modal/ModalContent.d.ts

@@ -4,5 +4,5 @@ declare type ModalContentProps = React.ComponentPropsWithRef<"div"> & {
     hasFooter?: any;
     theme?: DefaultNDSThemeType;
 };
-declare const ModalContent: React.SFC<ModalContentProps>;
+declare const ModalContent: React.FC<ModalContentProps>;
 export default ModalContent;

package/dist/src/Overlay/Overlay.d.ts

@@ -5,5 +5,5 @@ declare type OverlayProps = FlexProps & {
     dark?: boolean;
     theme?: DefaultNDSThemeType;
 };
-declare const Overlay: React.SFC<OverlayProps>;
+declare const Overlay: React.FC<OverlayProps>;
 export default Overlay;

package/dist/src/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 export declare const getPageItemstoDisplay: (totalPages: any, currentPage: any) => any[];
-declare const Pagination: React.SFC<any>;
+declare const Pagination: React.FC<any>;
 export default Pagination;

package/dist/src/Popper/Popper.d.ts

@@ -16,5 +16,5 @@ declare type PopperProps = {
     openAriaLabel?: string;
     closeAriaLabel?: string;
 };
-declare const Popper: React.SFC<PopperProps>;
+declare const Popper: React.FC<PopperProps>;
 export default Popper;

package/dist/src/RangeContainer/RangeContainer.d.ts

@@ -5,5 +5,5 @@ declare type RangeContainerProps = {
     endComponent?: React.ReactNode;
     errorMessages?: (string | undefined)[];
 };
-declare const RangeContainer: React.SFC<RangeContainerProps>;
+declare const RangeContainer: React.FC<RangeContainerProps>;
 export default RangeContainer;

package/dist/src/StatusIndicator/StatusIndicator.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const StatusIndicator: React.SFC<any>;
+declare const StatusIndicator: React.FC<any>;
 export default StatusIndicator;

package/dist/src/Table/BaseTable.d.ts

@@ -17,5 +17,5 @@ export declare type BaseTableProps = {
     onMouseEnter?: any;
     onMouseLeave?: any;
 };
-declare const BaseTable: React.SFC<BaseTableProps>;
+declare const BaseTable: React.FC<BaseTableProps>;
 export default BaseTable;

package/dist/src/Table/TableCell.d.ts

@@ -6,5 +6,5 @@ declare type TableCellProps = {
     cellData?: object | React.ReactNode | boolean;
     compact?: boolean;
 };
-declare const TableCell: React.SFC<TableCellProps>;
+declare const TableCell: React.FC<TableCellProps>;
 export default TableCell;

package/dist/src/Table/TableHead.d.ts

@@ -5,5 +5,5 @@ declare type TableHeadProps = {
     compact?: boolean;
     sticky?: boolean;
 };
-declare const TableHead: React.SFC<TableHeadProps>;
+declare const TableHead: React.FC<TableHeadProps>;
 export default TableHead;

package/dist/src/Tabs/Tab.d.ts

@@ -9,5 +9,5 @@ declare type TabButtonProps = React.ComponentPropsWithRef<"button"> & {
 declare type TabProps = TabButtonProps & {
     label?: React.ReactNode;
 };
-declare const Tab: React.SFC<TabProps>;
+declare const Tab: React.FC<TabProps>;
 export default Tab;

package/dist/src/Tabs/TabScrollIndicator.d.ts

@@ -6,5 +6,5 @@ declare type TabScrollIndicatorProps = {
     ariaLabelLeft?: string;
     ariaLabelRight?: string;
 };
-declare const TabScrollIndicator: React.SFC<TabScrollIndicatorProps>;
+declare const TabScrollIndicator: React.FC<TabScrollIndicatorProps>;
 export default TabScrollIndicator;

package/dist/src/Textarea/StyledTextarea.d.ts

@@ -9,5 +9,5 @@ export declare type StyledTextareaProps = React.ComponentPropsWithRef<"textarea"
     rows?: number;
     isResizeable?: boolean;
 };
-declare const StyledTextarea: React.SFC<StyledTextareaProps>;
+declare const StyledTextarea: React.FC<StyledTextareaProps>;
 export default StyledTextarea;

package/dist/src/Textarea/Textarea.d.ts

@@ -14,5 +14,5 @@ declare type TextareaProps = StyledTextareaProps & {
     rows?: number;
     isResizeable?: boolean;
 };
-declare const Textarea: React.SFC<TextareaProps>;
+declare const Textarea: React.FC<TextareaProps>;
 export default Textarea;

package/dist/src/TimePicker/TimePicker.d.ts

@@ -36,5 +36,5 @@ export declare const getTimeOptions: (interval: any, timeFormat: any, minTime: a
     value: string;
     label: string;
 }[];
-declare const TimePicker: React.SFC<TimePickerProps>;
+declare const TimePicker: React.FC<TimePickerProps>;
 export default TimePicker;

package/dist/src/TimePicker/TimePickerInput.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const TimePickerInput: import("styled-components").StyledComponent<import("react").SFC<import("../Input/InputField").InputFieldProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const TimePickerInput: import("styled-components").StyledComponent<import("react").FC<import("../Input/InputField").InputFieldProps>, import("styled-components").DefaultTheme, {}, never>;
 export default TimePickerInput;

package/dist/src/TimeRange/TimeRange.d.ts

@@ -19,5 +19,5 @@ declare type TimeRangeProps = SpaceProps & {
     endTimeProps?: any;
     startTimeProps?: any;
 };
-declare const TimeRange: React.SFC<TimeRangeProps>;
+declare const TimeRange: React.FC<TimeRangeProps>;
 export default TimeRange;

package/dist/src/Tooltip/Tooltip.d.ts

@@ -9,5 +9,5 @@ export declare type TooltipProps = {
     maxWidth?: string;
     children?: React.ReactNode;
 };
-declare const Tooltip: React.SFC<TooltipProps>;
+declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;

package/dist/src/Validation/InlineValidation.d.ts

@@ -6,5 +6,5 @@ declare type InlineValidationProps = SpaceProps & {
     errorList?: string[];
     children?: React.ReactNode;
 };
-declare const InlineValidation: React.SFC<InlineValidationProps>;
+declare const InlineValidation: React.FC<InlineValidationProps>;
 export default InlineValidation;

package/dist/src/utils/ClickInputLabel.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const ClickInputLabel: React.SFC<any>;
+declare const ClickInputLabel: React.FC<any>;
 export default ClickInputLabel;

package/dist/src/utils/ts/FocusManager.d.ts

@@ -10,6 +10,7 @@ declare type ChildrenHandlers = {
 };
 declare type FocusManagerProps = {
     refs?: Array<Reference>;
+    defaultFocusedIndex: number | null;
     children: (handlers: ChildrenHandlers) => ReactNode;
 };
 declare const FocusManager: React.FC<FocusManagerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.7.0",
+  "version": "6.7.3",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {