@nulogy/components 15.4.0 → 15.4.1

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/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/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/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/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/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,4 +1,4 @@
-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 location = String(placement).split("-")[0];

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

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

@@ -1,6 +1,6 @@
 import { transparentize } from "polished";
 import React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { addStyledProps } from "../../StyledProps";
 const Contianer = styled.div(({ theme }) => ({
     overflow: "hidden",

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Resizable as ReResizable } from "re-resizable";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { Box } from "../../Box";
 import { DashedBox } from "../../DescriptionList/stories/fixtures";
 import { Text } from "../../Type";

package/dist/vite.config.js

@@ -20,6 +20,16 @@ const GLOBALS = {
     "react-dom": "reactDom",
 };
 const externals = Object.keys(GLOBALS);
+// External function - all peer dependencies are externalized
+// Also externalize react/jsx-runtime in case any dependencies use automatic JSX
+const external = (id) => {
+    // Externalize react/jsx-runtime and react/jsx-dev-runtime
+    // This ensures that if any dependencies use automatic JSX, they'll use the consumer's React
+    if (id === "react/jsx-runtime" || id === "react/jsx-dev-runtime") {
+        return true;
+    }
+    return externals.includes(id);
+};
 export default defineConfig({
     plugins: [react()],
     define: {
@@ -42,7 +52,7 @@ export default defineConfig({
             },
         },
         rollupOptions: {
-            external: externals,
+            external,
             output: {
                 globals: GLOBALS,
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "15.4.0",
+  "version": "15.4.1",
   "type": "module",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
@@ -14,7 +14,7 @@
     "start:cypress": "start-server-and-test start 9999 'cypress open'",
     "start:storybook": "storybook dev -p 9999",
     "clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
-    "build": "tsc -p tsconfig.build.json && vite build",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
     "build:verify": "node scripts/verify-build.js",
     "build:watch": "vite build --watch",
     "build:storybook": "storybook build --stats-json",
@@ -51,6 +51,13 @@
   "main": "dist/main.js",
   "module": "dist/main.module.js",
   "typings": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/main.module.js",
+      "require": "./dist/main.js"
+    }
+  },
   "files": [
     "/dist"
   ],