@nulogy/components 15.3.0 → 15.4.1

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";

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/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.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";

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/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";

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/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";

package/dist/src/Modal/ModalCloseButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { CloseButton } from "../Button";
 const ModalCloseButton = styled(CloseButton)(({ theme }) => ({
     position: "absolute",

package/dist/src/Modal/ModalContent.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const ModalContent = styled.div(({ hasFooter, theme }) => ({
     marginTop: "-64px",
     marginBottom: hasFooter ? "-72px" : 0,

package/dist/src/Modal/ModalFooter.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { transparentize } from "polished";
 const ModalFooter = styled.div(({ theme }) => ({
     position: "relative",

package/dist/src/Modal/ModalHeader.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { transparentize } from "polished";
 const getHeaderPaddingRight = (closeButtonIncluded, theme) => closeButtonIncluded ? theme.space.x8 : theme.space.x3;
 const ModalHeader = styled.div(({ hasCloseButton, theme }) => ({

package/dist/src/NDSProvider/GlobalStyles.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const GlobalStyles = styled.div(({ theme, locale }) => {
     const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
     return {

package/dist/src/NavBarSearch/NavBarSearch.js

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

package/dist/src/Navigation/components/AppSwitcher/parts/index.js

@@ -1,5 +1,5 @@
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Heading4, Text } from "../../../../Type";
 import Content from "../../shared/NavigationMenuContent";
 import Link from "./Link";

package/dist/src/Navigation/components/DesktopNav/parts/MoreMenuItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { NavigationMenuItem } from "../../shared/NavigationMenuItem";
 export default function MoreMenuItem({ moreMenu }) {
     const { t } = useTranslation();

package/dist/src/Navigation/components/MenuSubItem/parts/styled.js

@@ -1,5 +1,5 @@
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../../../../StyledProps";
 import { NAVIGATION_SUB_MENU_MIN_WIDTH_PX } from "../../shared/constants";
 import { disableHoverEvents } from "../../shared/disableHoverEvents";

package/dist/src/Navigation/components/MobileNav/parts/styled.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
 import { Box } from "../../../../Box";
 import { Text } from "../../../../Type";

package/dist/src/Navigation/components/UserMenu/UserMenu.js

@@ -1,5 +1,5 @@
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../../../StyledProps";
 import { Header } from "./parts/Header";
 import Item from "./parts/Item";

package/dist/src/Navigation/components/UserMenu/parts/Header.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Text } from "../../../../Type";
 import { Flex } from "../../../../Flex";
 import BackgroundTriangles from "../../../../Decorations";

package/dist/src/Navigation/components/UserMenu/parts/styled.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
 import { addStyledProps } from "../../../../StyledProps";
 const baseUserMenuItemStyles = (theme, isMobile) => ({

package/dist/src/Navigation/components/shared/NavigationLogo.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 const LogoContainer = styled.div(({ $maxWidth, $maxHeight }) => ({
     display: "flex",
     alignItems: "center",

package/dist/src/Navigation/components/shared/NavigationLogoLink.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { NavigationMenuLink as BaseNavigationMenuLink } from "./components";
 const NavigationMenuLink = styled(BaseNavigationMenuLink)(({ theme }) => ({
     display: "flex",

package/dist/src/Navigation/components/shared/NavigationMenuContent.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
 import { addStyledProps } from "../../../StyledProps";
 import { NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX, NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "./constants";

package/dist/src/Navigation/components/shared/NavigationMenuItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Text } from "../../../Type";
 import { Icon } from "../../../Icon";
 import { VerticalDivider } from "../../../VerticalDivider";

package/dist/src/Navigation/components/shared/components.js

@@ -1,5 +1,5 @@
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Icon } from "../../../Icon";
 import { addStyledProps } from "../../../StyledProps";
 import { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "./constants";