@nulogy/components 6.7.1 → 6.7.4

package/dist/main.js

@@ -22891,7 +22891,7 @@
       style: {
         whiteSpace: "nowrap"
       },
-      key: subMenuItem.name
+      key: subMenuItem.key ?? subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
@@ -22904,7 +22904,7 @@
       style: {
         whiteSpace: "nowrap"
       },
-      key: subMenuItem.name
+      key: subMenuItem.key ?? subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink$1, {
       fontSize: "small",
       lineHeight: "smallTextBase",
@@ -22918,14 +22918,14 @@
 
   var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
     return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles$1, {
-      key: subMenuItem.name,
+      key: subMenuItem.key ?? subMenuItem.name,
       onClick: onItemClick
     }, subMenuItem.render());
   };
 
   var renderText$5 = function renderText(subMenuItem) {
     return /*#__PURE__*/React__default['default'].createElement(SubMenuText$1, {
-      key: subMenuItem.name
+      key: subMenuItem.key ?? subMenuItem.name
     }, subMenuItem.name);
   };
 
@@ -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",
@@ -44618,11 +44620,13 @@
   });
 
   var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("li", {
       style: {
         whiteSpace: "nowrap"
       },
-      key: subMenuItem.name
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
@@ -44631,11 +44635,13 @@
   };
 
   var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("li", {
       style: {
         whiteSpace: "nowrap"
       },
-      key: subMenuItem.name
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink, {
       fontSize: "small",
       lineHeight: "smallTextBase",
@@ -44648,15 +44654,19 @@
   };
 
   var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles, {
-      key: subMenuItem.name,
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
       onClick: onItemClick
     }, subMenuItem.render());
   };
 
   var renderText$2 = function renderText(subMenuItem) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(SubMenuText, {
-      key: subMenuItem.name
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, subMenuItem.name);
   };
 
@@ -44994,8 +45004,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,
@@ -45004,8 +45016,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,
@@ -45014,14 +45028,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);
   };
 
@@ -45055,7 +45073,7 @@
     displayName: "DesktopMenu",
     componentId: "sc-8mrjkc-4"
   })({
-    div: {
+    "> div": {
       ":not(:last-of-type)": {
         marginRight: "8px"
       }
@@ -45257,8 +45275,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, {
@@ -45270,8 +45290,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
@@ -45279,8 +45301,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"
       }
@@ -45293,8 +45317,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

@@ -22865,7 +22865,7 @@ var renderSubMenuTrigger$1 = function renderSubMenuTrigger(subMenuItem, onItemCl
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: subMenuItem.key ?? subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
     name: subMenuItem.name,
@@ -22878,7 +22878,7 @@ var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: subMenuItem.key ?? subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuLink$1, {
     fontSize: "small",
     lineHeight: "smallTextBase",
@@ -22892,14 +22892,14 @@ var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
 
 var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
   return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles$1, {
-    key: subMenuItem.name,
+    key: subMenuItem.key ?? subMenuItem.name,
     onClick: onItemClick
   }, subMenuItem.render());
 };
 
 var renderText$5 = function renderText(subMenuItem) {
   return /*#__PURE__*/React__default.createElement(SubMenuText$1, {
-    key: subMenuItem.name
+    key: subMenuItem.key ?? subMenuItem.name
   }, subMenuItem.name);
 };
 
@@ -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",
@@ -44592,11 +44594,13 @@ var SubMenuText = styled.li.withConfig({
 });
 
 var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
     name: subMenuItem.name,
@@ -44605,11 +44609,13 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
 };
 
 var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuLink, {
     fontSize: "small",
     lineHeight: "smallTextBase",
@@ -44622,15 +44628,19 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
 };
 
 var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles, {
-    key: subMenuItem.name,
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
     onClick: onItemClick
   }, subMenuItem.render());
 };
 
 var renderText$2 = function renderText(subMenuItem) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(SubMenuText, {
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, subMenuItem.name);
 };
 
@@ -44968,8 +44978,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,
@@ -44978,8 +44990,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,
@@ -44988,14 +45002,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);
 };
 
@@ -45029,7 +45047,7 @@ var DesktopMenu = styled(BaseDesktopMenu).withConfig({
   displayName: "DesktopMenu",
   componentId: "sc-8mrjkc-4"
 })({
-  div: {
+  "> div": {
     ":not(:last-of-type)": {
       marginRight: "8px"
     }
@@ -45231,8 +45249,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, {
@@ -45244,8 +45264,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
@@ -45253,8 +45275,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"
     }
@@ -45267,8 +45291,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/IconicButton.story.d.ts

@@ -51,7 +51,14 @@ export declare const WithATooltipAndLabel: {
         name: string;
     };
 };
-export declare const rightAligned: () => JSX.Element;
+export declare const rightAligned: {
+    (): JSX.Element;
+    parameters: {
+        chromatic: {
+            diffThreshold: number;
+        };
+    };
+};
 export declare const WithACustomFontSize: {
     (): JSX.Element;
     story: {

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/package.json

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