@nulogy/components 15.4.0 → 16.0.0

package/dist/src/Alert/Alert.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { Box } from "../Box";
 import { Icon } from "../Icon";

package/dist/src/AppTag/AppTag.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { Text } from "../Type";
 import { APP_ABBREVIATIONS, APP_DISPLAY_NAMES } from "../types/NulogyApp";
 import { MiniTooltip } from "../MiniTooltip";

package/dist/src/AppTag/components/LogoWrapper.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { appTagColors } from "../constants";
 export const LogoWrapper = styled.span(({ theme, $type }) => {
     const color = theme.colors[appTagColors[$type].primary];

package/dist/src/BottomSheet/BottomSheet.styled.js

@@ -1,7 +1,7 @@
 import { DialogContent as ReachDialogContent, DialogOverlay as ReachDialogOverlay, } from "@reach/dialog";
 import { motion } from "framer-motion";
 import { transparentize } from "polished";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { compose, height, layout, maxHeight, maxWidth, space, width } from "styled-system";
 import { Heading2, Text } from "../Type";
 import { excludeStyledProps } from "../StyledProps";
@@ -44,7 +44,7 @@ const Sheet = styled(motion(ReachDialogContent)).withConfig({
     background: "white",
     boxShadow: theme.shadows.large,
 }), compose(...styleFns));
-const ContentContainer = styled.div((_) => ({
+const ContentContainer = styled.div(() => ({
     overflowY: "auto",
     flex: 1,
     WebkitOverflowScrolling: "touch",

package/dist/src/Box/Box.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { motion } from "framer-motion";
 import { addStyledProps } from "../StyledProps";
 const Box = styled.div(addStyledProps);

package/dist/src/Box/Box.story.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Button } from "../Button";
 import { Box, Flex } from "../index";
 import { AnimatedBox } from "./Box";

package/dist/src/BrandedNavBar/DesktopMenu.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon } from "../Icon";
 import MenuTrigger from "./MenuTrigger";
 const getSharedStyles = (color, theme) => {

package/dist/src/BrandedNavBar/MenuTrigger.js

@@ -17,9 +17,7 @@ const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria
         name,
         "aria-label": ariaLabel,
     };
-    return (
-    // @ts-ignore
-    React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
+    return (React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
             flip: { behavior: ["bottom"] },
             setPopperWidth: {
                 enabled: true,

package/dist/src/BrandedNavBar/MenuTriggerButton.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { Icon } from "../Icon";
 const StyledButton = styled.button(({ color = "white", hoverColor = "lightBlue", hoverBackground = "black", theme }) => ({

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

@@ -11,7 +11,7 @@ type MenuData = {
 type BaseMobileMenuProps = {
     menuData: MenuData;
     subtext?: string;
-    closeMenu?: Function;
+    closeMenu?: React.MouseEventHandler<HTMLElement>;
     themeColorObject?: ThemeColorObject;
     showNulogyLogo?: boolean;
 };

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { display } from "styled-system";
 import { Text } from "../Type";
 import { Flex } from "../Flex";
@@ -16,7 +16,6 @@ const BrandingWrap = styled.div(({ theme }) => ({
     color: theme.colors.white,
     marginBottom: theme.space.x1,
 }));
-// eslint-disable-next-line no-mixed-operators
 const getPaddingLeft = (layer) => `${24 * layer + 24}px`;
 const getSharedStyles = (theme) => ({
     display: "flex",
@@ -67,7 +66,6 @@ const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
         href: menuItem.href,
         as: menuItem.as,
         to: menuItem.to,
-        // eslint-disable-next-line no-mixed-operators
         pl: layer === 0 ? getPaddingLeft(layer) : `${24 * layer + 20}px`,
         mb: "x1",
         target: menuItem.openInNew ? "_blank" : undefined,

package/dist/src/BrandedNavBar/NavBar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import ReactResizeDetector from "react-resize-detector";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";

package/dist/src/BrandedNavBar/NavBar.story.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Heading1 } from "../Type";
 import { Icon } from "../Icon";

package/dist/src/BrandedNavBar/NavBarBackground.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Flex } from "../Flex";
 import { addStyledProps } from "../StyledProps";
 const NavBarBackground = styled(Flex)(({ theme }) => ({

package/dist/src/BrandedNavBar/NavBarDropdownMenu.js

@@ -4,7 +4,6 @@ import { DetectOutsideClick, withMenuState, PopperArrow } from "../utils";
 import DropdownMenuContainer from "../DropdownMenu/DropdownMenuContainer";
 class StatelessNavBarDropdownMenuClass extends React.Component {
 }
-/* eslint-disable react/destructuring-assignment */
 class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
     constructor(props) {
         super(props);
@@ -60,29 +59,33 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
                     this.setTriggerRef(node);
                 },
             })),
-            isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => (React.createElement(React.Fragment, null,
-                React.createElement(DropdownMenuContainer, { ...popperProps, placement: placement, showArrow: showArrow, ...this.menuEventHandlers(), ref: (node) => {
-                        if (typeof popperProps.ref === "function") {
-                            popperProps.ref(node);
-                        }
-                        this.setMenuRef(node);
-                    }, onMouseDown: (e) => {
-                        e.preventDefault();
-                        e.target.focus();
-                    }, ...dropdownMenuContainerEventHandlers({
-                        openMenu,
-                        closeMenu,
-                    }) },
-                    React.createElement(PopperArrow, { ...popperProps.arrowProps, placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" }),
-                    React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
-                    childrenFnc({
-                        closeMenu,
-                        openMenu,
-                    }))))))));
+            isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => {
+                const { ref: popperRef, style, placement: popperPlacement } = popperProps;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(DropdownMenuContainer, { dataPlacement: popperPlacement, style: style, placement: placement, showArrow: showArrow, ...this.menuEventHandlers(), ...{
+                            ref: (node) => {
+                                if (typeof popperRef === "function") {
+                                    popperRef(node);
+                                }
+                                this.setMenuRef(node);
+                            },
+                        }, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.target.focus();
+                        }, ...dropdownMenuContainerEventHandlers({
+                            openMenu,
+                            closeMenu,
+                        }) },
+                        React.createElement(PopperArrow, { ...popperProps.arrowProps, placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" }),
+                        React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
+                        childrenFnc({
+                            closeMenu,
+                            openMenu,
+                        }))));
+            }))));
     }
 }
-/* eslint-enable react/destructuring-assignment */
-// @ts-ignore
+// @ts-expect-error - defaultProps is not recognized on functional components in newer React types
 StatelessNavBarDropdownMenu.defaultProps = {
     showArrow: true,
     placement: "bottom-start",
@@ -91,7 +94,7 @@ StatelessNavBarDropdownMenu.defaultProps = {
     dropdownMenuContainerEventHandlers: () => { },
 };
 const NavBarDropdownMenu = withMenuState(StatelessNavBarDropdownMenu);
-// @ts-ignore
+// @ts-expect-error - defaultProps is not recognized on functional components in newer React types
 NavBarDropdownMenu.defaultProps = {
     showDelay: "0",
     hideDelay: "100",

package/dist/src/BrandedNavBar/SmallNavBar.js

@@ -1,4 +1,4 @@
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 import React, { useEffect } from "react";
 import { Icon } from "../Icon";
@@ -47,7 +47,6 @@ const MenuIcon = ({ isOpen }) => {
     const title = isOpen ? t("close menu") : t("open menu");
     return React.createElement(Icon, { icon: icon, title: title });
 };
-/* eslint-disable react/destructuring-assignment */
 const SmallNavBarNoState = ({ menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton, ...props }) => {
     const navRef = React.useRef(null);
     useEffect(() => {
@@ -74,7 +73,6 @@ const SmallNavBarNoState = ({ menuData, menuState: { isOpen, toggleMenu, closeMe
                         React.createElement(MenuIcon, { isOpen: isOpen })))))),
         isOpen && (React.createElement(MobileMenu, { themeColorObject: themeColorObject, subtext: subtext, menuData: menuData, closeMenu: closeMenu, showNulogyLogo: showNulogyLogo }))));
 };
-/* eslint-enable react/destructuring-assignment */
 const SmallNavBar = withMenuState(SmallNavBarNoState);
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default SmallNavBar;

package/dist/src/BrandedNavBar/SmallNavBar.story.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Branding } from "../Branding";
 import { Button } from "../index";
 import { Link } from "../Link";

package/dist/src/BrandedNavBar/SubMenuTrigger.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 import NavBarDropdownMenu from "./NavBarDropdownMenu";
 import renderSubMenuItems from "./renderSubMenuItems";

package/dist/src/BrandedNavBar/SubMenuTriggerButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import React from "react";
 import { DropdownButton } from "../DropdownMenu";
 import { Icon } from "../Icon";

package/dist/src/BrandedNavBar/renderSubMenuItems.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { DropdownText, DropdownLink } from "../DropdownMenu";
 import { Icon } from "../Icon";
 const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },

package/dist/src/Branding/Branding.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { Flex } from "../Flex";
 import BrandingText from "./BrandingText";
 import LettermarkLogo from "./LettermarkLogo";

package/dist/src/Branding/BrandingText.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const logoColors = {
     white: "#FFFFFF",
     blue: "#0E77D2",

package/dist/src/Breadcrumbs/BreadcrumbsList.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const BreadcrumbsList = styled.ol(() => ({
     margin: 0,
     padding: 0,

package/dist/src/Breadcrumbs/BreadcrumbsListItem.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space, color, flexbox, layout } from "styled-system";
 export const BreadcrumbsListSeparator = styled.li(({ theme }) => ({
     margin: 0,

package/dist/src/Button/Button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { space, variant } from "styled-system";
 import { Icon } from "../Icon";
 import { useComponentVariant, } from "../NDSProvider/ComponentVariantContext";

package/dist/src/Button/CloseButton.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../Icon";
 const WrapperButton = styled.button(({ disabled, theme }) => ({

package/dist/src/Button/ControlIcon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { layout, space } from "styled-system";
 import { Icon } from "../Icon";
 const getIconColorByState = ({ toggled, disabled, theme }) => {

package/dist/src/Button/DangerButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { darken } from "polished";
 import Button from "./Button";
 const DangerButton = styled(Button)(({ disabled, theme }) => ({

package/dist/src/Button/IconicButton.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space, variant } from "styled-system";
 import { Manager, Reference, Popper } from "react-popper-2";
 import { transparentize } from "polished";

package/dist/src/Button/PrimaryButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { darken } from "polished";
 import Button from "./Button";
 const PrimaryButton = styled(Button)(({ disabled, theme }) => ({

package/dist/src/Button/QuietButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import Button from "./Button";
 const QuietButton = styled(Button)(({ theme }) => ({
     color: theme.colors.blue,

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Flex } from "../Flex";
 const alignments = {
     left: "flex-start",

package/dist/src/Card/CardSet.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 import { Flex } from "../Flex";
 const CardSet = styled(Flex)(({ theme }) => ({

package/dist/src/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import propTypes from "@styled-system/prop-types";
 import { Box } from "../Box";
 import { Text } from "../Type";

package/dist/src/Checkbox/CheckboxGroup.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";

package/dist/src/DateRange/EndTime.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { TimePicker } from "../TimePicker";
 const EndTime = styled(TimePicker)(({ theme }) => ({
     marginRight: theme.space.x1,

package/dist/src/DateRange/StartTime.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { TimePicker } from "../TimePicker";
 const StartTime = styled(TimePicker)(({ theme }) => ({
     marginLeft: theme.space.x1,

package/dist/src/Decorations/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTheme } from "styled-components";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 const RightAngleTriangle = styled(Box) `
   position: absolute;

package/dist/src/DescriptionList/DescriptionList.parts.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { useDescriptionListContext } from "./DescriptionListContext";
 const gapConfig = {
     compact: "x0_75",

package/dist/src/DescriptionList/stories/fixtures.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { transparentize } from "polished";
 import { Box } from "../../Box";
 import { Flex } from "../../Flex";

package/dist/src/Divider/Divider.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 const Divider = styled.hr(({ theme, color, secondary }) => ({
     border: "none",

package/dist/src/DropdownMenu/DropdownButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { variant } from "styled-system";
 import { addStyledProps } from "../StyledProps";
 const DropdownButton = styled.button(({ disabled = false, hoverColor = "darkBlue", bgHoverColor = "lightBlue", theme }) => ({

package/dist/src/DropdownMenu/DropdownItem.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { variant } from "../StyledProps";
 const DropdownItem = styled.div(({ theme, color = "darkGrey", hoverColor = "darkBlue", bgHoverColor = "lightBlue" }) => ({
     "*": {

package/dist/src/DropdownMenu/DropdownLink.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { variant } from "styled-system";
 import { addStyledProps } from "../StyledProps";
 const DropdownLink = styled.a.withConfig({

package/dist/src/DropdownMenu/DropdownMenu.story.js

@@ -69,10 +69,14 @@ export const SetToDisabled = () => (React.createElement(DropdownMenu, { disabled
 SetToDisabled.story = {
     name: "Set to disabled",
 };
-export const WithConditionallyRenderedMenuItems = () => (React.createElement(DropdownMenu, null,
-    React.createElement(DropdownButton, { onClick: () => { } }, "Item A"),
-    false && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item B"),
-    true && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item C")));
+export const WithConditionallyRenderedMenuItems = () => {
+    const showItemB = false;
+    const showItemC = true;
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(DropdownButton, { onClick: () => { } }, "Item A"),
+        showItemB && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item B"),
+        showItemC && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item C")));
+};
 export const WithRenderProps = () => (React.createElement(DropdownMenu, null, ({ closeMenu, openMenu }) => (React.createElement(React.Fragment, null,
     React.createElement(DropdownButton, { onClick: (e) => closeMenu(e) }, "Close menu"),
     React.createElement(DropdownButton, { onClick: (e) => openMenu(e) }, "Open menu")))));

package/dist/src/DropdownMenu/DropdownMenuContainer.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { color } from "styled-system";
 import { Box } from "../Box";
 const getMenuMargin = (placement, showArrow) => {

package/dist/src/DropdownMenu/DropdownText.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Text } from "../Type";
 import { addStyledProps } from "../StyledProps";
 const DropdownText = styled(Text)(({ theme }) => ({

package/dist/src/FieldLabel/HelpText.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Text } from "../Type";
 import { Link } from "../Link";
 const HelpText = styled(Text)(({ theme }) => ({

package/dist/src/FieldLabel/Label.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space, color, display } from "styled-system";
 const Label = styled.label(({ color = "black", disabled }) => ({
     color: color,

package/dist/src/FieldLabel/LabelText.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 export const LabelContent = styled.span(({ theme }) => ({
     display: "flex",
     flexWrap: "wrap",

package/dist/src/Flex/Flex.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 import { gap } from "../StyledProps";
 const Flex = styled(Box)({

package/dist/src/Flex/Flex.story.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Flex as NDSFlex } from "../index";
-import styled from "styled-components";
+import { styled } from "styled-components";
 const Flex = ({ children, ...props }) => (React.createElement(NDSFlex, { padding: "x3", bg: "whiteGrey", minHeight: "400px", style: {
         boxSizing: "content-box",
     }, ...props }, children));

package/dist/src/Form/Field.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 import { addStyledProps } from "../StyledProps";
 const Field = styled(Box)({

package/dist/src/Form/Fieldset.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space } from "styled-system";
 const Fieldset = styled.fieldset({
     padding: 0,

package/dist/src/Form/Form.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space } from "styled-system";
 import { Heading2 } from "../Type";
 import { Alert } from "../Alert";

package/dist/src/Form/FormSection.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Heading3 } from "../Type";
 import Field from "./Field";
 import Fieldset from "./Fieldset";

package/dist/src/Icon/Icon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { position, space } from "styled-system";
 import icons from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";

package/dist/src/Input/InputField.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { space, variant } from "styled-system";
 import { Box } from "../Box";
 import { MaybeFieldLabel } from "../FieldLabel";

package/dist/src/Link/Link.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { darken } from "polished";
 import { themeGet } from "@styled-system/theme-get";
 import React from "react";

package/dist/src/List/List.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 import ListItem from "./ListItem";
 const List = styled.ul(({ compact = false, leftAlign = false, color = "currentColor", theme, listStyle }) => ({

package/dist/src/List/ListItem.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space, color, typography } from "styled-system";
 const ListItem = styled.li(({ theme }) => ({
     color: "currentcolor",

package/dist/src/MiniTooltip/index.js

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import styled, { keyframes } from "styled-components";
+import { styled, keyframes } from "styled-components";
 import { transparentize } from "polished";
 import React from "react";
 export function MiniTooltip({ children, content, sideOffset = 4, hideTooltip = false, delayDuration = 700, }) {

package/dist/src/Modal/Modal.js

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import styled, { ThemeContext, useTheme } from "styled-components";
+import { styled, ThemeContext, useTheme } from "styled-components";
 import ReactModal from "react-modal";
 import { transparentize } from "polished";
 import { Heading2 } from "../Type";