@nulogy/components 8.12.0 → 8.13.1

package/dist/main.module.js

@@ -8309,11 +8309,11 @@ var visibility = system({
 
 var Box = styled.div.withConfig({
   displayName: "Box",
-  componentId: "xda4ls-0"
+  componentId: "sc-xda4ls-0"
 })(color, space, layout, border, shadow, textAlign, order$1, flexbox, flexGrow, position, background, transform, cursor$1, overflow, transition, visibility, typography);
 var AnimatedBox = styled(motion.div).withConfig({
   displayName: "Box__AnimatedBox",
-  componentId: "xda4ls-1"
+  componentId: "sc-xda4ls-1"
 })(color, space, layout, border, shadow, textAlign, order$1, flexbox, flexGrow, position, background, transform, cursor$1, overflow, visibility, typography);
 
 /**
@@ -9744,7 +9744,9 @@ var getHoverColor = function getHoverColor(props) {
 var Link = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !["underline", "hover"].includes(prop) && defaultValidatorFn(prop);
-  }
+  },
+  displayName: "Link",
+  componentId: "sc-1fcpbo4-0"
 })(function (_a) {
   var underline = _a.underline,
       as = _a.as,
@@ -10176,7 +10178,7 @@ var Alert = function Alert(_a) {
 
 var Alert$1 = styled(Alert).withConfig({
   displayName: "Alert",
-  componentId: "quomwu-0"
+  componentId: "sc-quomwu-0"
 })(styles);
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -16956,7 +16958,7 @@ var FormSectionTitle = styled(Heading3).attrs({
   as: "legend"
 }).withConfig({
   displayName: "FormSection__FormSectionTitle",
-  componentId: "v5comv-0"
+  componentId: "sc-v5comv-0"
 })({});
 
 var BaseFormSection = function BaseFormSection(_a) {
@@ -16969,7 +16971,7 @@ var BaseFormSection = function BaseFormSection(_a) {
 
 var FormSection = styled(BaseFormSection).withConfig({
   displayName: "FormSection",
-  componentId: "v5comv-1"
+  componentId: "sc-v5comv-1"
 })(function (_ref) {
   var _ref2;
 
@@ -17056,7 +17058,7 @@ var RequirementText = function RequirementText(props) {
 
 var Label = styled.label.withConfig({
   displayName: "Label",
-  componentId: "lf392x-0"
+  componentId: "sc-lf392x-0"
 })(space, color, function () {
   return {
     display: "inline-block"
@@ -17508,7 +17510,7 @@ var customStyles = function customStyles(_ref6) {
 
 var ClickInputLabel = styled.label.withConfig({
   displayName: "ClickInputLabel",
-  componentId: "zdnqd7-0"
+  componentId: "sc-zdnqd7-0"
 })(function (_ref) {
   var disabled = _ref.disabled;
   return {
@@ -17764,7 +17766,7 @@ var drawArrow = function drawArrow(placement, borderColor, backgroundColor) {
 
 var PopperArrow = styled.div.withConfig({
   displayName: "PopperArrow",
-  componentId: "g04hwy-0"
+  componentId: "sc-g04hwy-0"
 })({
   position: "absolute",
   height: Theme.space.x1,
@@ -18347,7 +18349,7 @@ var useWindowDimensions = function useWindowDimensions() {
 
 var StyledOption = styled.div.withConfig({
   displayName: "SelectOption__StyledOption",
-  componentId: "i7ae6z-0"
+  componentId: "sc-i7ae6z-0"
 })(typography, function (_ref) {
   var isSelected = _ref.isSelected,
       isFocused = _ref.isFocused,
@@ -21970,7 +21972,7 @@ var getSize$2 = function getSize(size, theme) {
 
 var WrapperButton$2 = styled.button.withConfig({
   displayName: "Button__WrapperButton",
-  componentId: "hxfi59-0"
+  componentId: "sc-hxfi59-0"
 })(function (_ref) {
   var fullWidth = _ref.fullWidth;
   return {
@@ -22076,7 +22078,7 @@ var PrimaryButton = styled(Button).withConfig({
 
 var DangerButton = styled(Button).withConfig({
   displayName: "DangerButton",
-  componentId: "wmt3mt-0"
+  componentId: "sc-wmt3mt-0"
 })(function (_ref) {
   var disabled = _ref.disabled,
       theme = _ref.theme;
@@ -24251,7 +24253,7 @@ function Reference$1(_ref) {
 
 var IconWrapper = styled.span.withConfig({
   displayName: "IconicButton__IconWrapper",
-  componentId: "cimfyu-0"
+  componentId: "sc-cimfyu-0"
 })(function (_ref) {
   var theme = _ref.theme,
       size = _ref.size;
@@ -24271,7 +24273,7 @@ var IconWrapper = styled.span.withConfig({
 });
 var HoverText = styled.div.withConfig({
   displayName: "IconicButton__HoverText",
-  componentId: "cimfyu-1"
+  componentId: "sc-cimfyu-1"
 })(function (_ref2) {
   var theme = _ref2.theme;
   return {
@@ -24288,7 +24290,7 @@ var HoverText = styled.div.withConfig({
 });
 var WrapperButton$1 = styled.button.withConfig({
   displayName: "IconicButton__WrapperButton",
-  componentId: "cimfyu-2"
+  componentId: "sc-cimfyu-2"
 })(function (_ref3) {
   var _hover, _active, _hoverActive, _focus, _ref4;
 
@@ -24382,12 +24384,12 @@ var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwarde
       style: style,
       placement: placement
     }, tooltip ? tooltip : children) : null;
-  })), children && !labelHidden && /*#__PURE__*/React__default.createElement(Text, {
+  })), children && !labelHidden && (typeof children === "string" || typeof children === "number" ? /*#__PURE__*/React__default.createElement(Text, {
     fontSize: fontSize,
     mr: "half",
     ml: "half",
     color: color
-  }, children));
+  }, children) : children));
 });
 IconicButton.propTypes = {
   className: PropTypes.string,
@@ -24842,7 +24844,9 @@ DropdownButton.defaultProps = {
 var DropdownLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !["hoverColor", "bgHoverColor"].includes(prop) && defaultValidatorFn(prop);
-  }
+  },
+  displayName: "DropdownLink",
+  componentId: "sc-73jvsg-0"
 })(function (_ref) {
   var theme = _ref.theme,
       color = _ref.color,
@@ -24889,7 +24893,7 @@ DropdownLink.defaultProps = {
 
 var DropdownItem = styled.div.withConfig({
   displayName: "DropdownItem",
-  componentId: "xev49s-0"
+  componentId: "sc-xev49s-0"
 })(function (_ref) {
   var theme = _ref.theme,
       color = _ref.color,
@@ -25023,7 +25027,7 @@ var renderSubMenuItems$1 = function renderSubMenuItems(subMenuItems, onItemClick
 
 var NoWrapLi = styled.li.withConfig({
   displayName: "renderSubMenuItems__NoWrapLi",
-  componentId: "vyx9p-0"
+  componentId: "sc-vyx9p-0"
 })(function () {
   return {
     whiteSpace: "nowrap"
@@ -25032,12 +25036,12 @@ var NoWrapLi = styled.li.withConfig({
 
 var StyledButton$3 = styled(DropdownButton).withConfig({
   displayName: "SubMenuTriggerButton__StyledButton",
-  componentId: "bvw24f-0"
+  componentId: "sc-bvw24f-0"
 })(function (_ref) {
   var isOpen = _ref.isOpen,
       theme = _ref.theme;
   return {
-    position: "relative",
+    padding: theme.space.x1 + " " + theme.space.x1 + " " + theme.space.x1 + " 12px",
     backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
     color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey
   };
@@ -25050,15 +25054,14 @@ var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_a
   return /*#__PURE__*/React__default.createElement(StyledButton$3, Object.assign({
     isOpen: isOpen,
     ref: ref
-  }, props), name, /*#__PURE__*/React__default.createElement(Icon, {
-    style: {
-      position: "absolute",
-      top: "10px"
-    },
+  }, props), /*#__PURE__*/React__default.createElement(Flex, {
+    gap: "half",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, name, /*#__PURE__*/React__default.createElement(Icon, {
     icon: "rightArrow",
-    size: "20px",
-    p: "2px"
-  }));
+    size: "20px"
+  })));
 });
 SubMenuTriggerButton$1.displayName = "SubMenuTriggerButton";
 
@@ -25698,7 +25701,7 @@ var getAlignment$1 = function getAlignment(alignment) {
 
 var BrandingWrap$2 = styled.div.withConfig({
   displayName: "Branding__BrandingWrap",
-  componentId: "lm6b8m-0"
+  componentId: "sc-lm6b8m-0"
 })(function (_ref) {
   var alignment = _ref.alignment,
       size = _ref.size;
@@ -25713,7 +25716,7 @@ var BrandingWrap$2 = styled.div.withConfig({
 });
 var Line = styled.div.withConfig({
   displayName: "Branding__Line",
-  componentId: "lm6b8m-1"
+  componentId: "sc-lm6b8m-1"
 })(function (_ref2) {
   var logoColor = _ref2.logoColor;
   return {
@@ -25849,7 +25852,7 @@ Suffix.defaultProps = {
 
 var StyledInputIcon = styled(Icon).withConfig({
   displayName: "InputField__StyledInputIcon",
-  componentId: "a97ghf-0"
+  componentId: "sc-a97ghf-0"
 })(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -25898,7 +25901,7 @@ var getInputStyle = function getInputStyle(_ref2) {
 
 var StyledInput = styled.input.withConfig({
   displayName: "InputField__StyledInput",
-  componentId: "a97ghf-1"
+  componentId: "sc-a97ghf-1"
 })(function (_ref3) {
   var theme = _ref3.theme,
       inputWidth = _ref3.inputWidth;
@@ -26358,7 +26361,7 @@ var NavBarBackground$1 = styled(Flex).withConfig({
 
 var MobileMenuTrigger$1 = styled.button.withConfig({
   displayName: "SmallNavBar__MobileMenuTrigger",
-  componentId: "ykabay-0"
+  componentId: "sc-ykabay-0"
 })(function (_ref) {
   var color = _ref.color,
       hoverColor = _ref.hoverColor,
@@ -26386,7 +26389,7 @@ var MobileMenuTrigger$1 = styled.button.withConfig({
 });
 var SmallHeader$1 = styled.header.withConfig({
   displayName: "SmallNavBar__SmallHeader",
-  componentId: "ykabay-1"
+  componentId: "sc-ykabay-1"
 })(function (_ref2) {
   var isOpen = _ref2.isOpen,
       theme = _ref2.theme;
@@ -26597,12 +26600,12 @@ var BaseNavBar = function BaseNavBar(_a) {
 
 var NavBar$1 = styled(BaseNavBar).withConfig({
   displayName: "NavBar",
-  componentId: "cszq6w-0"
+  componentId: "sc-cszq6w-0"
 })({});
 
 var BreadcrumbsList = styled.ol.withConfig({
   displayName: "BreadcrumbsList",
-  componentId: "obiz1v-0"
+  componentId: "sc-obiz1v-0"
 })(function () {
   return {
     margin: 0,
@@ -26929,7 +26932,7 @@ var getCheckboxButtons = function getCheckboxButtons(props) {
 
 var LabelText = styled.span.withConfig({
   displayName: "CheckboxGroup__LabelText",
-  componentId: "ubmlt9-0"
+  componentId: "sc-ubmlt9-0"
 })(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -26940,7 +26943,7 @@ var LabelText = styled.span.withConfig({
 });
 var Legend = styled.legend.withConfig({
   displayName: "CheckboxGroup__Legend",
-  componentId: "ubmlt9-1"
+  componentId: "sc-ubmlt9-1"
 })(function (_ref2) {
   var theme = _ref2.theme;
   return {
@@ -40377,6 +40380,8 @@ DatePickerHeader.defaultProps = {
 var DatePickerInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
       onClick = _ref.onClick,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
       onInputChange = _ref.onInputChange,
       value = _ref.value,
       _ref$inputProps = _ref.inputProps,
@@ -40408,6 +40413,8 @@ var DatePickerInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       t = _useTranslation.t;
 
   return /*#__PURE__*/React__default.createElement(InputField, Object.assign({
+    onBlur: onBlur,
+    onFocus: onFocus,
     ref: ref,
     "aria-label": ariaLabel || t("select a date"),
     autoComplete: "off"
@@ -40541,8 +40548,10 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_a, datePickerRef) {
       className = _a.className,
       onInputChange = _a.onInputChange,
       onChange = _a.onChange,
+      onBlur = _a.onBlur,
+      onFocus = _a.onFocus,
       selected = _a.selected,
-      props = __rest(_a, ["dateFormat", "errorMessage", "errorList", "inputProps", "minDate", "maxDate", "highlightDates", "disableFlipping", "className", "onInputChange", "onChange", "selected"]);
+      props = __rest(_a, ["dateFormat", "errorMessage", "errorList", "inputProps", "minDate", "maxDate", "highlightDates", "disableFlipping", "className", "onInputChange", "onChange", "onBlur", "onFocus", "selected"]);
 
   var _useState = useState(selected),
       selectedDate = _useState[0],
@@ -40655,7 +40664,10 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_a, datePickerRef) {
 
         onRefChange(r);
       },
+      onFocus: onFocus,
+      onBlur: onBlur,
       popperModifiers: {
+        // @ts-ignore
         flip: {
           enabled: !disableFlipping
         }
@@ -40850,7 +40862,7 @@ debounce_1.debounce;
 // @ts-nocheck
 var TimePickerOption = styled.li.withConfig({
   displayName: "TimePickerOption",
-  componentId: "a59kp-0"
+  componentId: "sc-a59kp-0"
 })(function (_ref) {
   var theme = _ref.theme,
       isSelected = _ref.isSelected,
@@ -40873,7 +40885,7 @@ var TimePickerOption = styled.li.withConfig({
 // @ts-nocheck
 var TimePickerDropdown = styled.ul.withConfig({
   displayName: "TimePickerDropdown",
-  componentId: "i1v2dv-0"
+  componentId: "sc-i1v2dv-0"
 })(function (_ref) {
   var theme = _ref.theme,
       isOpen = _ref.isOpen;
@@ -40900,7 +40912,7 @@ var TimePickerDropdown = styled.ul.withConfig({
 // @ts-nocheck
 var TimePickerInput = styled(InputField).withConfig({
   displayName: "TimePickerInput",
-  componentId: "a6tg1z-0"
+  componentId: "sc-a6tg1z-0"
 })(function (_ref) {
   var dropdownIsOpen = _ref.dropdownIsOpen;
   return Object.assign({}, dropdownIsOpen && {
@@ -41255,21 +41267,17 @@ var EndTime = styled(TimePicker).withConfig({
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    marginRight: theme.space.x1,
-    display: "flex",
-    alignItems: "flex-end"
+    marginRight: theme.space.x1
   };
 });
 
 var StartTime = styled(TimePicker).withConfig({
   displayName: "StartTime",
-  componentId: "ay3es1-0"
+  componentId: "sc-ay3es1-0"
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    marginLeft: theme.space.x1,
-    display: "flex",
-    alignItems: "flex-end"
+    marginLeft: theme.space.x1
   };
 });
 
@@ -43814,7 +43822,7 @@ var getHeaderPaddingRight = function getHeaderPaddingRight(closeButtonIncluded,
 
 var ModalHeader = styled.div.withConfig({
   displayName: "ModalHeader",
-  componentId: "tbowww-0"
+  componentId: "sc-tbowww-0"
 })(function (_ref) {
   var hasCloseButton = _ref.hasCloseButton,
       theme = _ref.theme;
@@ -44390,7 +44398,7 @@ SubMenuTrigger.defaultProps = {
 
 var StyledButton = styled.button.withConfig({
   displayName: "MenuTrigger__StyledButton",
-  componentId: "ooz0w0-0"
+  componentId: "sc-ooz0w0-0"
 })(function (_ref) {
   var color = _ref.color,
       hoverColor = _ref.hoverColor,
@@ -44741,7 +44749,7 @@ var isValidMenuItem = function validArrayItem(arr, idx, componentName, location,
 
 var BrandingWrap = styled.div.withConfig({
   displayName: "MobileMenu__BrandingWrap",
-  componentId: "vqy2lk-0"
+  componentId: "sc-vqy2lk-0"
 })({
   marginTop: "-" + Theme.space.x1,
   marginBottom: Theme.space.x3,
@@ -44775,7 +44783,7 @@ var getSharedStyles = function getSharedStyles(_ref) {
 
 var ApplyMenuLinkStyles = styled.li.withConfig({
   displayName: "MobileMenu__ApplyMenuLinkStyles",
-  componentId: "vqy2lk-1"
+  componentId: "sc-vqy2lk-1"
 })(function (_ref2) {
   var color = _ref2.color,
       hoverColor = _ref2.hoverColor,
@@ -44816,7 +44824,7 @@ ApplyMenuLinkStyles.defaultProps = {
 };
 var MenuLink = styled.a.withConfig({
   displayName: "MobileMenu__MenuLink",
-  componentId: "vqy2lk-2"
+  componentId: "sc-vqy2lk-2"
 })(function (_ref3) {
   var color = _ref3.color,
       hoverColor = _ref3.hoverColor,
@@ -44845,7 +44853,7 @@ var MenuLink = styled.a.withConfig({
 });
 var MenuText = styled.li.withConfig({
   displayName: "MobileMenu__MenuText",
-  componentId: "vqy2lk-3"
+  componentId: "sc-vqy2lk-3"
 })(function (_ref4) {
   var textColor = _ref4.textColor,
       layer = _ref4.layer;
@@ -44856,7 +44864,7 @@ var MenuText = styled.li.withConfig({
 });
 var SubMenuItemsList = styled.ul.withConfig({
   displayName: "MobileMenu__SubMenuItemsList",
-  componentId: "vqy2lk-4"
+  componentId: "sc-vqy2lk-4"
 })({
   listStyle: "none",
   paddingLeft: "0",
@@ -44975,7 +44983,7 @@ SubMenu.defaultProps = {
 };
 var Menu = styled.ul.withConfig({
   displayName: "MobileMenu__Menu",
-  componentId: "vqy2lk-5"
+  componentId: "sc-vqy2lk-5"
 })(function () {
   var _ref6;
 
@@ -44991,7 +44999,7 @@ var Menu = styled.ul.withConfig({
 });
 var Nav = styled.nav.withConfig({
   displayName: "MobileMenu__Nav",
-  componentId: "vqy2lk-6"
+  componentId: "sc-vqy2lk-6"
 })(function (_ref7) {
   var backgroundColor = _ref7.backgroundColor;
   return {
@@ -45035,7 +45043,7 @@ BaseMobileMenu.defaultProps = {
 };
 var MobileMenu = styled(BaseMobileMenu).withConfig({
   displayName: "MobileMenu",
-  componentId: "vqy2lk-7"
+  componentId: "sc-vqy2lk-7"
 })(display);
 
 var SmallNavBarNoState = /*#__PURE__*/function (_React$Component) {
@@ -45167,7 +45175,7 @@ var getThemeColor = function getThemeColor(themeColor) {
 };
 var NavBarBackground = styled(Flex).withConfig({
   displayName: "NavBar__NavBarBackground",
-  componentId: "uw8kj5-0"
+  componentId: "sc-uw8kj5-0"
 })(function (_ref) {
   var backgroundColor = _ref.backgroundColor,
       theme = _ref.theme;
@@ -45265,7 +45273,7 @@ MediumNavBar.defaultProps = {
 };
 var MobileMenuTrigger = styled.button.withConfig({
   displayName: "NavBar__MobileMenuTrigger",
-  componentId: "uw8kj5-1"
+  componentId: "sc-uw8kj5-1"
 })(function (_ref2) {
   var color = _ref2.color,
       hoverColor = _ref2.hoverColor,
@@ -45292,7 +45300,7 @@ var MobileMenuTrigger = styled.button.withConfig({
 });
 var SmallHeader = styled.header.withConfig({
   displayName: "NavBar__SmallHeader",
-  componentId: "uw8kj5-2"
+  componentId: "sc-uw8kj5-2"
 })(function (_ref3) {
   var isOpen = _ref3.isOpen;
   return isOpen ? {
@@ -48102,7 +48110,7 @@ var mergeThemes = function mergeThemes(theme, customTheme) {
 
 var GlobalStyles = styled.div.withConfig({
   displayName: "GlobalStyles",
-  componentId: "s7lol5-0"
+  componentId: "sc-s7lol5-0"
 })(function (_ref) {
   var theme = _ref.theme,
       locale = _ref.locale;
@@ -48203,7 +48211,7 @@ var NDSProvider = function NDSProvider(_ref2) {
 
 var Overlay = styled(Flex).withConfig({
   displayName: "Overlay",
-  componentId: "mcd6gm-0"
+  componentId: "sc-mcd6gm-0"
 })(function (_ref) {
   var dark = _ref.dark,
       theme = _ref.theme;
@@ -48237,7 +48245,7 @@ var getHoverBackground = function getHoverBackground(currentPage, disabled, them
 
 var PaginationButton = styled.button.withConfig({
   displayName: "PaginationButton",
-  componentId: "fr0av7-0"
+  componentId: "sc-fr0av7-0"
 })(function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled,
@@ -48489,7 +48497,7 @@ var getRadioStyle = function getRadioStyle(props, checked) {
 
 var VisualRadio = styled.div.withConfig({
   displayName: "Radio__VisualRadio",
-  componentId: "rhd32j-0"
+  componentId: "sc-rhd32j-0"
 })(function (_ref) {
   var disabled = _ref.disabled,
       theme = _ref.theme;
@@ -48518,7 +48526,7 @@ var VisualRadio = styled.div.withConfig({
 });
 var RadioInput = styled.input.withConfig({
   displayName: "Radio__RadioInput",
-  componentId: "rhd32j-1"
+  componentId: "sc-rhd32j-1"
 })(function (props) {
   var _ref2;
 
@@ -48754,7 +48762,7 @@ var rowsPropType = PropTypes.arrayOf(rowPropType);
 
 var StyledTableCell = styled.td.withConfig({
   displayName: "TableCell__StyledTableCell",
-  componentId: "q0c72j-0"
+  componentId: "sc-q0c72j-0"
 })(function (_ref) {
   var align = _ref.align,
       compact = _ref.compact,
@@ -48812,7 +48820,7 @@ TableCell.defaultProps = {
 
 var StyledMessageContainer = styled(Box).withConfig({
   displayName: "TableBody__StyledMessageContainer",
-  componentId: "b5sejq-0"
+  componentId: "sc-b5sejq-0"
 })(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -48823,7 +48831,7 @@ var StyledMessageContainer = styled(Box).withConfig({
 });
 var StyledTr = styled.tr.withConfig({
   displayName: "TableBody__StyledTr",
-  componentId: "b5sejq-1"
+  componentId: "sc-b5sejq-1"
 })(function (_ref2) {
   var rowHovers = _ref2.rowHovers,
       theme = _ref2.theme;
@@ -49863,7 +49871,7 @@ var Summary = function Summary(_a) {
 
 var SummaryItemWrapper = styled(Flex).withConfig({
   displayName: "SummaryItem__SummaryItemWrapper",
-  componentId: "kqzify-0"
+  componentId: "sc-kqzify-0"
 })(function (_ref) {
   var _ref2;
 
@@ -50044,7 +50052,7 @@ Switcher.propTypes = {
 
 var SwitchButton = styled.button.withConfig({
   displayName: "Switch__SwitchButton",
-  componentId: "wsu5uq-0"
+  componentId: "sc-wsu5uq-0"
 })(function (_ref) {
   var selected = _ref.selected,
       theme = _ref.theme;
@@ -51254,7 +51262,7 @@ var Slider = function Slider(_ref2) {
 
 var ToggleInput = styled.input.withConfig({
   displayName: "ToggleButton__ToggleInput",
-  componentId: "t7wo9n-0"
+  componentId: "sc-t7wo9n-0"
 })(function (_ref3) {
   var _ref4;
 

package/dist/src/Alert/Alert.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FlexProps } from "../Flex/Flex";
 type NotificationType = "danger" | "informative" | "success" | "warning";
 export type AlertProps = FlexProps & {

package/dist/src/Alert/Alert.story.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

package/dist/src/Alert/CloseButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type CloseButtonProps = {
     onClick: any;
     "aria-label": string;

package/dist/src/AsyncSelect/AsyncSelect.story.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

package/dist/src/Banner/Banner.story.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const WithCallToAction: () => JSX.Element;
 export declare const Dismissible: () => JSX.Element;
 export declare const AboveTheNavbar: () => JSX.Element;

package/dist/src/Box/Box.story.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

package/dist/src/BrandedNavBar/NavBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const NAVBAR_HEIGHT = "56px";
 type BaseNavBarProps = {
     menuData?: any;

package/dist/src/BrandedNavBar/NavBar.story.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

package/dist/src/BrandedNavBar/NulogyLogo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const NulogyLogo: () => JSX.Element;
 export default NulogyLogo;

package/dist/src/BrandedNavBar/NulogyLogoContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type NulogyLogoContainerProps = {
     subText?: string;
     height?: string;

package/dist/src/BrandedNavBar/SmallNavBar.story.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     parameters: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type BrandingProps = {
     logoType?: "wordmark" | "lettermark";
     logoColor?: "blue" | "white";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
 };