@nulogy/components 15.4.0 → 16.0.0

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";
@@ -56,7 +56,11 @@ export const NavigationMenuSubList = styled(RadixNavigationMenu.List) `
     display: none;
   }
 `;
-const Button = React.forwardRef(({ onPointerEnter: _, onPointerLeave: __, onPointerMove: ___, ...props }, forwardedRef) => {
+const Button = React.forwardRef(({ onPointerEnter, onPointerLeave, onPointerMove, ...props }, forwardedRef) => {
+    // These props are intentionally ignored to prevent pointer events from interfering with keyboard navigation
+    void onPointerEnter;
+    void onPointerLeave;
+    void onPointerMove;
     return React.createElement("button", { ...props, ref: forwardedRef });
 });
 Button.displayName = "Button";

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

package/dist/src/Overlay/Overlay.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { transparentize } from "polished";
 import { Flex } from "../Flex";
 const Overlay = styled(Flex)(({ dark = false, theme }) => ({

package/dist/src/Pagination/PageNumber.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import PaginationButton from "./PaginationButton";
 const PageNumber = styled(PaginationButton)(({ theme, currentPage }) => ({
     background: currentPage ? theme.colors.darkBlue : "transparent",

package/dist/src/Pagination/PaginationButton.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const getHoverBackground = (currentPage, disabled, theme) => {
     if (currentPage) {
         return theme.colors.darkBlue;

package/dist/src/Popper/Popper.js

@@ -89,7 +89,6 @@ const Popper = React.forwardRef(({ id, trigger, children, backgroundColor, borde
             },
         });
         return React.cloneElement(transformedElement, {
-            // eslint-disable-next-line react/no-array-index-key
             key: i,
         });
     });

package/dist/src/Primitives/index.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 const Ul = styled.ul(addStyledProps);
 const Li = styled.li(addStyledProps);

package/dist/src/Radio/Radio.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/RangeContainer/RangeContainer.js

@@ -19,8 +19,6 @@ const RangeContainer = ({ startComponent, endComponent, errorMessages = [], labe
             React.createElement(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end" },
                 React.createElement(Text, { lineHeight: variant === "touch" ? "56px" : "38px" }, "-")),
             React.createElement(Flex, null, endComponent)),
-        errorMessages.map((errorMessage, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        React.createElement(InlineValidation, { key: i, errorMessage: errorMessage })))));
+        errorMessages.map((errorMessage, i) => (React.createElement(InlineValidation, { key: i, errorMessage: errorMessage })))));
 };
 export default RangeContainer;

package/dist/src/Select/Select.story.fixture.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { SelectOption } from "./SelectOption";
 export const errorList = ["Error message 1", "Error message 2"];
 export const options = [

package/dist/src/Select/SelectOption.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { components } from "react-select";
 import { typography } from "styled-system";
 import { subPx } from "../utils";

package/dist/src/StatusIndicator/StatusIndicator.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space, typography, flexbox } from "styled-system";
 export const StatusIndicatorValues = {
     neutral: "neutral",

package/dist/src/Summary/Summary.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import numberFromDimension from "../utils/numberFromDimension";
 import { Box } from "../Box";
 import { SummaryContextProvider } from "./SummaryContext";

package/dist/src/Summary/SummaryDivider.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 import numberFromDimension from "../utils/numberFromDimension";
 import { useSummaryContext } from "./SummaryContext";

package/dist/src/Summary/SummaryItem.js

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

package/dist/src/Switcher/Switch.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { variant } from "styled-system";
 import numberFromDimension from "../utils/numberFromDimension";
 const Switch = React.forwardRef(({ children, ...rest }, ref) => {

package/dist/src/Table/BaseTable.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { space } from "styled-system";
 import TableHead from "./TableHead";
 import TableBody from "./TableBody";

package/dist/src/Table/StyledTh.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const stickyStyles = (theme) => ({
     position: "sticky",
     top: 0,

package/dist/src/Table/TableBody.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 import TableCell from "./TableCell";
 const StyledMessageContainer = styled(Box)(({ theme }) => ({

package/dist/src/Table/TableCell.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 const StyledTableCell = styled.td(({ align, compact, verticalAlign, theme }) => {
     const padding = compact ? theme.space.x1 : theme.space.x2;
     return {

package/dist/src/Table/TableFoot.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import TableCell from "./TableCell";
 import StyledTh from "./StyledTh";
 const StyledFooterRow = styled.tr(({ theme }) => ({

package/dist/src/Table/TableHead.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import StyledTh from "./StyledTh";
 const StyledHeaderRow = styled.tr(({ theme }) => ({
     color: theme.colors.darkGrey,

package/dist/src/Tabs/Tab.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { variant } from "styled-system";
 const barStyles = (theme) => ({
     expanded: {

package/dist/src/Tabs/TabContainer.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 const TabContainer = styled(Box)(({ theme }) => ({
     display: "flex",

package/dist/src/Tabs/TabScrollIndicator.js

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

package/dist/src/Tabs/TabScrollIndicators.js

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import styled from "styled-components";
+import { styled } from "styled-components";
 import React from "react";
 import TabScrollIndicator from "./TabScrollIndicator";
 const TabScrollIndicatorContainer = styled.div(({ width, theme }) => ({

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

@@ -52,4 +52,3 @@ export declare const WithContentLoadedOnSelection: {
         name: string;
     };
 };
-export declare const WithConditionallyRenderedTabs: () => React.JSX.Element;

package/dist/src/Tabs/Tabs.story.js

@@ -102,8 +102,3 @@ export const WithContentLoadedOnSelection = () => (React.createElement(Tabs, { r
 WithContentLoadedOnSelection.story = {
     name: "with content loaded on selection",
 };
-export const WithConditionallyRenderedTabs = () => (React.createElement(Tabs, null,
-    false && React.createElement(Tab, { label: "Hidden 2" }, "Hidden tab 1"),
-    true && React.createElement(Tab, { label: "Shown 1" }, "Shown tab 1"),
-    false && React.createElement(Tab, { label: "Hidden 2" }, "Hidden tab 2"),
-    true && React.createElement(Tab, { label: "Shown 2" }, "Shown tab 2")));

package/dist/src/Textarea/StyledTextarea.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { transparentize } from "polished";
 import { variant } from "styled-system";
 import { space } from "styled-system";

package/dist/src/TimePicker/TimePickerDropdown.js

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import styled from "styled-components";
+import { styled } from "styled-components";
 const TimePickerDropdown = styled.ul(({ theme, isOpen }) => {
     return {
         position: "absolute",

package/dist/src/TimePicker/TimePickerInput.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { InputField } from "../Input/InputField";
 const TimePickerInput = styled(InputField)(({ dropdownIsOpen }) => ({
     ...(dropdownIsOpen && {

package/dist/src/TimePicker/TimePickerOption.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { variant } from "styled-system";
 const TimePickerOption = styled.li(({ theme, isSelected }) => ({
     marginBottom: "0px",

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

@@ -4,9 +4,13 @@ import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: ComponentVariant;
     timeFormat?: string;
-    onRangeChange?: Function;
-    onStartTimeChange?: Function;
-    onEndTimeChange?: Function;
+    onRangeChange?: (range: {
+        startTime?: string;
+        endTime?: string;
+        error?: string;
+    }) => void;
+    onStartTimeChange?: (label: string) => void;
+    onEndTimeChange?: (label: string) => void;
     ref?: React.MutableRefObject<unknown>;
     errorMessage?: string;
     defaultStartTime?: string;

package/dist/src/TimeRange/TimeRange.js

@@ -22,7 +22,7 @@ const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, on
             ...inputRef1,
             focus: () => {
                 if (inputRef1.current) {
-                    // @ts-ignore
+                    // @ts-expect-error - focus method exists on input elements but type may not be narrowed correctly
                     inputRef1.current.focus();
                 }
             },
@@ -31,7 +31,7 @@ const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, on
             ...inputRef2,
             focus: () => {
                 if (inputRef2.current) {
-                    // @ts-ignore
+                    // @ts-expect-error - focus method exists on input elements but type may not be narrowed correctly
                     inputRef2.current.focus();
                 }
             },

package/dist/src/Toast/Toast.js

@@ -73,9 +73,7 @@ export const Toast = ({ triggered = false, isCloseable = false, showDuration = T
     const handleCloseButtonClick = () => {
         hideToast(0);
     };
-    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, { onMouseEnter: onMouseIn, 
-        /* @ts-ignore */
-        onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig },
+    return (React.createElement(AnimatePresence, { initial: false }, visible && (React.createElement(AnimatedBox, { onMouseEnter: onMouseIn, onFocus: onMouseIn, onMouseLeave: onMouseOut, onBlur: onMouseOut, position: "fixed", bottom: "0", left: "0", right: "0", marginLeft: "auto", marginRight: "auto", width: "fit-content", zIndex: zIndex, boxShadow: "medium", layout: true, ...toastAnimationConfig },
         React.createElement(Alert, { minWidth: "200px", maxWidth: "600px", isCloseable: isCloseable, onClose: handleCloseButtonClick, controlled: true, ...props }, children)))));
 };
 export default Toast;

package/dist/src/Toast/Toast.story.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-// typescript turned off because of {toast.type} not being a string
 import React, { useState } from "react";
 import { Button, DangerButton, IconicButton, Modal, PrimaryButton, Flex, Toast } from "../index";
 export default {

package/dist/src/Toggle/Toggle.js

@@ -21,7 +21,6 @@ const Toggle = React.forwardRef(({ checked, variant, className, labelText, requi
         if (onClick) {
             console.warn("onClick is deprecated. Use onChange instead.");
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const _checked = checked ?? defaultToggled ?? toggled;
     const _onChange = useCallback((e) => {
@@ -36,7 +35,6 @@ const Toggle = React.forwardRef(({ checked, variant, className, labelText, requi
         if (_checked !== undefined && !(onChange || onClick)) {
             console.warn("onChange or onClick is required when checked is set.");
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement(Field, { className: className, alignItems: "flex-start", py: "half", ...spaceProps },
         React.createElement(FieldLabel, { htmlFor: id, labelText: labelText, requirementText: requirementText, helpText: helpText, hint: hint, disabled: disabled, variant: componentVariant, "data-testid": dataTestId },

package/dist/src/Toggle/ToggleButton.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { motion } from "framer-motion";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import { AnimatedBox } from "../Box";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 const getSwitchBackground = (checked) => (checked ? "darkBlue" : "darkGrey");

package/dist/src/Tooltip/TooltipContainer.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../Box";
 const tooltipStyles = (theme) => ({
     backgroundColor: theme.colors.white,

package/dist/src/Tooltip/components/TooltipComponents.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import styled, { keyframes, useTheme } from "styled-components";
+import { styled, keyframes, useTheme } from "styled-components";
 import { maxWidth } from "styled-system";
 // A helper hook to determine if the device supports hover
 function useHasHover() {

package/dist/src/TopBar/TopBar.styled.js

@@ -1,7 +1,7 @@
 import { DialogOverlay } from "@reach/dialog";
 import { motion } from "framer-motion";
 import { transparentize } from "polished";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 import { TOPBAR } from "./constants";
 const MenuItemList = styled.ul(({ theme }) => ({

package/dist/src/Type/Headings.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps, variant } from "../StyledProps";
 import Text from "./Text";
 export const Heading1 = styled(Text).attrs(() => ({

package/dist/src/Type/Text.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 const Text = styled.p(({ disabled = false, textTransform, inline = false, theme }) => ({
     textTransform,

package/dist/src/Validation/InlineValidation.js

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

package/dist/src/VerticalDivider/VerticalDivider.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../StyledProps";
 const VerticalDivider = styled.div(({ theme, color, secondary }) => ({
     display: "inline",

package/dist/src/i18n.js

@@ -1,5 +1,4 @@
 import i18n from "i18next";
-/* eslint-disable */
 import de_DE from "../locales/de_DE.json";
 import en_US from "../locales/en_US.json";
 import es_ES from "../locales/es_ES.json";
@@ -10,7 +9,6 @@ import pl_PL from "../locales/pl_PL.json";
 import pt_BR from "../locales/pt_BR.json";
 import ro_RO from "../locales/ro_RO.json";
 import zh_CN from "../locales/zh_CN.json";
-/* eslint-enable */
 const resources = {
     de_DE: {
         nds: de_DE,

package/dist/src/utils/ClickInputLabel.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const ClickInputLabel = styled.label(({ disabled, theme }) => ({
     cursor: disabled ? undefined : "pointer",
     display: "inline-flex",

package/dist/src/utils/PopperArrow.js

@@ -1,6 +1,6 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 const getThemeColor = (color, theme) => (theme.colors[color] ? theme.colors[color] : color);
-const positionArrow = (placement, theme) => {
+const positionArrow = (placement) => {
     const location = String(placement).split("-")[0];
     switch (location) {
         case "top":
@@ -130,7 +130,7 @@ const PopperArrow = styled.div(({ theme }) => ({
     },
 }), ({ placement = "bottom", borderColor = "grey", backgroundColor = "white", theme }) => ({
     ...drawArrow(placement, borderColor, backgroundColor, theme),
-}), ({ placement = "bottom", theme }) => ({
-    ...positionArrow(placement, theme),
+}), ({ placement = "bottom" }) => ({
+    ...positionArrow(placement),
 }));
 export default PopperArrow;

package/dist/src/utils/ScrollIndicators.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { position } from "styled-system";
 import { Icon } from "../Icon";
 const ScrollIndicatorWrapper = styled.div(({ theme }) => ({

package/dist/src/utils/noop.js

@@ -2,6 +2,4 @@
  * No operation function that does nothing and returns nothing.
  * Useful as a default callback or placeholder.
  */
-export function noop() {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-}
+export function noop() { }

package/dist/src/utils/story/code.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { transparentize } from "polished";
 /**
  * A styled component for displaying code in a storybook.

package/dist/src/utils/story/dashed.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 /**
  * A styled utility that adds a dashed border around a component
  * to highlight its boundaries. To be used in Storybook exclusively.