@nulogy/components 9.0.3 → 10.0.0

package/dist/main.js

@@ -8246,97 +8246,87 @@
       prop: 'colors'
     });
 
-    layout.width;
-        layout.height;
-        layout.minWidth;
-        layout.minHeight;
-        layout.maxWidth;
-        layout.maxHeight;
-        layout.size;
-        layout.verticalAlign;
-        var display = layout.display,
+    var width = layout.width,
+        height = layout.height,
+        minWidth = layout.minWidth,
+        minHeight = layout.minHeight,
+        maxWidth = layout.maxWidth,
+        maxHeight = layout.maxHeight,
+        size = layout.size,
+        verticalAlign = layout.verticalAlign,
+        display = layout.display,
         overflow = layout.overflow;
         layout.overflowX;
         layout.overflowY;
-    color.opacity;
-    var fontSize = typography.fontSize;
-        typography.fontFamily;
-        typography.fontWeight;
-        var lineHeight = typography.lineHeight,
-        textAlign = typography.textAlign;
-        typography.fontStyle;
-        typography.letterSpacing;
-    flexbox.alignItems;
-        flexbox.alignContent;
-        flexbox.justifyItems;
-        flexbox.justifyContent;
-        flexbox.flexWrap;
-        flexbox.flexDirection;
-        flexbox.flex;
-        var flexGrow = flexbox.flexGrow;
+    var opacity = color.opacity;
+    var fontSize = typography.fontSize,
+        fontFamily = typography.fontFamily,
+        fontWeight = typography.fontWeight,
+        lineHeight = typography.lineHeight,
+        textAlign = typography.textAlign,
+        fontStyle = typography.fontStyle,
+        letterSpacing = typography.letterSpacing;
+    var alignItems = flexbox.alignItems,
+        alignContent = flexbox.alignContent,
+        justifyItems = flexbox.justifyItems,
+        justifyContent = flexbox.justifyContent,
+        flexWrap = flexbox.flexWrap,
+        flexDirection = flexbox.flexDirection,
+        flex = flexbox.flex,
+        flexGrow = flexbox.flexGrow;
         flexbox.flexShrink;
-        flexbox.flexBasis;
-        flexbox.justifySelf;
-        flexbox.alignSelf;
-        var order$1 = flexbox.order;
-    grid.gridGap;
-        grid.gridColumnGap;
-        grid.gridRowGap;
-        grid.gridColumn;
-        grid.gridRow;
-        grid.gridAutoFlow;
-        grid.gridAutoColumns;
-        grid.gridAutoRows;
-        grid.gridTemplateColumns;
-        grid.gridTemplateRows;
-        grid.gridTemplateAreas;
-        grid.gridArea;
+        var flexBasis = flexbox.flexBasis,
+        justifySelf = flexbox.justifySelf,
+        alignSelf = flexbox.alignSelf,
+        order$1 = flexbox.order;
+    var gridGap = grid.gridGap,
+        gridColumnGap = grid.gridColumnGap,
+        gridRowGap = grid.gridRowGap,
+        gridColumn = grid.gridColumn,
+        gridRow = grid.gridRow,
+        gridAutoFlow = grid.gridAutoFlow,
+        gridAutoColumns = grid.gridAutoColumns,
+        gridAutoRows = grid.gridAutoRows,
+        gridTemplateColumns = grid.gridTemplateColumns,
+        gridTemplateRows = grid.gridTemplateRows,
+        gridTemplateAreas = grid.gridTemplateAreas,
+        gridArea = grid.gridArea;
     border.borderWidth;
         border.borderStyle;
-        border.borderColor;
-        border.borderTop;
-        border.borderRight;
-        border.borderBottom;
-        border.borderLeft;
-        border.borderRadius;
-    background.backgroundImage;
-        background.backgroundSize;
-        background.backgroundPosition;
-        background.backgroundRepeat;
-    position.zIndex;
-        position.top;
-        position.right;
-        position.bottom;
-        position.left;
-
-    var transition = system({
+        var borderColor = border.borderColor,
+        borderTop = border.borderTop,
+        borderRight = border.borderRight,
+        borderBottom = border.borderBottom,
+        borderLeft = border.borderLeft,
+        borderRadius$1 = border.borderRadius;
+    var backgroundImage = background.backgroundImage,
+        backgroundSize = background.backgroundSize,
+        backgroundPosition = background.backgroundPosition,
+        backgroundRepeat = background.backgroundRepeat;
+    var zIndex = position.zIndex,
+        top$1 = position.top,
+        right$1 = position.right,
+        bottom$1 = position.bottom,
+        left$1 = position.left;
+
+    var addStyledProps = compose( // After
+    space, margin, padding, width, fontSize, color, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, size, verticalAlign, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexDirection, flex, flexbox, justifySelf, alignSelf, order$1, grid, gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea, border, borderTop, borderRight, borderBottom, borderLeft, border, borderColor, borderRadius$1, shadow, opacity, overflow, position, zIndex, top$1, right$1, bottom$1, left$1, textStyle, colorStyle, buttonStyle, background, backgroundSize, backgroundRepeat, backgroundPosition, backgroundImage, layout, flexGrow, typography, system({
+      visibility: true,
       transition: true,
-      transitionProperty: true,
-      transitionDuration: true,
-      transitionTimingFunction: true,
-      transitionDelay: true
-    });
-
-    var transform = system({
-      transform: true
-    });
-
-    var cursor$1 = system({
+      transform: true,
+      whiteSpace: true,
+      textOverflow: true,
       cursor: true
-    });
-
-    var visibility = system({
-      visibility: true
-    });
+    }));
 
     var Box = styled__default["default"].div.withConfig({
       displayName: "Box",
       componentId: "sc-xda4ls-0"
-    })(color, space, layout, border, shadow, textAlign, order$1, flexbox, flexGrow, position, background, transform, cursor$1, overflow, transition, visibility, typography);
+    })(addStyledProps);
     var AnimatedBox = styled__default["default"](motion.div).withConfig({
       displayName: "Box__AnimatedBox",
       componentId: "sc-xda4ls-1"
-    })(color, space, layout, border, shadow, textAlign, order$1, flexbox, flexGrow, position, background, transform, cursor$1, overflow, visibility, typography);
+    })(addStyledProps);
 
     /**
      * Do not edit directly
@@ -8732,14 +8722,7 @@
         property: "columnGap",
         scale: "space"
       }
-    }), flexbox);
-
-    var textOverflow = system({
-      whiteSpace: true,
-      textOverflow: true
-    });
-
-    var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility, flexbox);
+    }));
 
     var getAttrs = function getAttrs(inline) {
       return inline ? {
@@ -10197,6 +10180,13 @@
       })));
     };
 
+    var NotificationTypes = {
+      danger: "danger",
+      informative: "informative",
+      success: "success",
+      warning: "warning"
+    };
+
     var styles = function styles(_ref) {
       var theme = _ref.theme;
       return {
@@ -52367,6 +52357,7 @@
     exports.NDSProvider = NDSProvider;
     exports.NavBar = NavBar;
     exports.NavBarBackground = NavBarBackground$1;
+    exports.NotificationTypes = NotificationTypes;
     exports.Overlay = Overlay;
     exports.Page = Page;
     exports.Pagination = Pagination;

package/dist/main.module.js

@@ -8229,97 +8229,87 @@ var colorStyle = variant({
   prop: 'colors'
 });
 
-layout.width;
-    layout.height;
-    layout.minWidth;
-    layout.minHeight;
-    layout.maxWidth;
-    layout.maxHeight;
-    layout.size;
-    layout.verticalAlign;
-    var display = layout.display,
+var width = layout.width,
+    height = layout.height,
+    minWidth = layout.minWidth,
+    minHeight = layout.minHeight,
+    maxWidth = layout.maxWidth,
+    maxHeight = layout.maxHeight,
+    size = layout.size,
+    verticalAlign = layout.verticalAlign,
+    display = layout.display,
     overflow = layout.overflow;
     layout.overflowX;
     layout.overflowY;
-color.opacity;
-var fontSize = typography.fontSize;
-    typography.fontFamily;
-    typography.fontWeight;
-    var lineHeight = typography.lineHeight,
-    textAlign = typography.textAlign;
-    typography.fontStyle;
-    typography.letterSpacing;
-flexbox.alignItems;
-    flexbox.alignContent;
-    flexbox.justifyItems;
-    flexbox.justifyContent;
-    flexbox.flexWrap;
-    flexbox.flexDirection;
-    flexbox.flex;
-    var flexGrow = flexbox.flexGrow;
+var opacity = color.opacity;
+var fontSize = typography.fontSize,
+    fontFamily = typography.fontFamily,
+    fontWeight = typography.fontWeight,
+    lineHeight = typography.lineHeight,
+    textAlign = typography.textAlign,
+    fontStyle = typography.fontStyle,
+    letterSpacing = typography.letterSpacing;
+var alignItems = flexbox.alignItems,
+    alignContent = flexbox.alignContent,
+    justifyItems = flexbox.justifyItems,
+    justifyContent = flexbox.justifyContent,
+    flexWrap = flexbox.flexWrap,
+    flexDirection = flexbox.flexDirection,
+    flex = flexbox.flex,
+    flexGrow = flexbox.flexGrow;
     flexbox.flexShrink;
-    flexbox.flexBasis;
-    flexbox.justifySelf;
-    flexbox.alignSelf;
-    var order$1 = flexbox.order;
-grid.gridGap;
-    grid.gridColumnGap;
-    grid.gridRowGap;
-    grid.gridColumn;
-    grid.gridRow;
-    grid.gridAutoFlow;
-    grid.gridAutoColumns;
-    grid.gridAutoRows;
-    grid.gridTemplateColumns;
-    grid.gridTemplateRows;
-    grid.gridTemplateAreas;
-    grid.gridArea;
+    var flexBasis = flexbox.flexBasis,
+    justifySelf = flexbox.justifySelf,
+    alignSelf = flexbox.alignSelf,
+    order$1 = flexbox.order;
+var gridGap = grid.gridGap,
+    gridColumnGap = grid.gridColumnGap,
+    gridRowGap = grid.gridRowGap,
+    gridColumn = grid.gridColumn,
+    gridRow = grid.gridRow,
+    gridAutoFlow = grid.gridAutoFlow,
+    gridAutoColumns = grid.gridAutoColumns,
+    gridAutoRows = grid.gridAutoRows,
+    gridTemplateColumns = grid.gridTemplateColumns,
+    gridTemplateRows = grid.gridTemplateRows,
+    gridTemplateAreas = grid.gridTemplateAreas,
+    gridArea = grid.gridArea;
 border.borderWidth;
     border.borderStyle;
-    border.borderColor;
-    border.borderTop;
-    border.borderRight;
-    border.borderBottom;
-    border.borderLeft;
-    border.borderRadius;
-background.backgroundImage;
-    background.backgroundSize;
-    background.backgroundPosition;
-    background.backgroundRepeat;
-position.zIndex;
-    position.top;
-    position.right;
-    position.bottom;
-    position.left;
-
-var transition = system({
+    var borderColor = border.borderColor,
+    borderTop = border.borderTop,
+    borderRight = border.borderRight,
+    borderBottom = border.borderBottom,
+    borderLeft = border.borderLeft,
+    borderRadius$1 = border.borderRadius;
+var backgroundImage = background.backgroundImage,
+    backgroundSize = background.backgroundSize,
+    backgroundPosition = background.backgroundPosition,
+    backgroundRepeat = background.backgroundRepeat;
+var zIndex = position.zIndex,
+    top$1 = position.top,
+    right$1 = position.right,
+    bottom$1 = position.bottom,
+    left$1 = position.left;
+
+var addStyledProps = compose( // After
+space, margin, padding, width, fontSize, color, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, size, verticalAlign, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexDirection, flex, flexbox, justifySelf, alignSelf, order$1, grid, gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea, border, borderTop, borderRight, borderBottom, borderLeft, border, borderColor, borderRadius$1, shadow, opacity, overflow, position, zIndex, top$1, right$1, bottom$1, left$1, textStyle, colorStyle, buttonStyle, background, backgroundSize, backgroundRepeat, backgroundPosition, backgroundImage, layout, flexGrow, typography, system({
+  visibility: true,
   transition: true,
-  transitionProperty: true,
-  transitionDuration: true,
-  transitionTimingFunction: true,
-  transitionDelay: true
-});
-
-var transform = system({
-  transform: true
-});
-
-var cursor$1 = system({
+  transform: true,
+  whiteSpace: true,
+  textOverflow: true,
   cursor: true
-});
-
-var visibility = system({
-  visibility: true
-});
+}));
 
 var Box = styled.div.withConfig({
   displayName: "Box",
   componentId: "sc-xda4ls-0"
-})(color, space, layout, border, shadow, textAlign, order$1, flexbox, flexGrow, position, background, transform, cursor$1, overflow, transition, visibility, typography);
+})(addStyledProps);
 var AnimatedBox = styled(motion.div).withConfig({
   displayName: "Box__AnimatedBox",
   componentId: "sc-xda4ls-1"
-})(color, space, layout, border, shadow, textAlign, order$1, flexbox, flexGrow, position, background, transform, cursor$1, overflow, visibility, typography);
+})(addStyledProps);
 
 /**
  * Do not edit directly
@@ -8715,14 +8705,7 @@ var Flex = styled(Box).withConfig({
     property: "columnGap",
     scale: "space"
   }
-}), flexbox);
-
-var textOverflow = system({
-  whiteSpace: true,
-  textOverflow: true
-});
-
-var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility, flexbox);
+}));
 
 var getAttrs = function getAttrs(inline) {
   return inline ? {
@@ -10180,6 +10163,13 @@ var CloseButton$1 = function CloseButton(_ref) {
   })));
 };
 
+var NotificationTypes = {
+  danger: "danger",
+  informative: "informative",
+  success: "success",
+  warning: "warning"
+};
+
 var styles = function styles(_ref) {
   var theme = _ref.theme;
   return {
@@ -52295,4 +52285,4 @@ TruncatedText.defaultProps = {
   tooltipProps: undefined
 };
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, Box, BrandLogoContainer, NavBar$1 as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu$1 as DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger$1 as MenuTrigger, Modal, NDSProvider, NavBar, NavBarBackground$1 as NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar$1 as SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, toast, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, Box, BrandLogoContainer, NavBar$1 as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu$1 as DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger$1 as MenuTrigger, Modal, NDSProvider, NavBar, NavBarBackground$1 as NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar$1 as SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, toast, useWindowDimensions };

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

@@ -1,6 +1,12 @@
 import React from "react";
 import { FlexProps } from "../Flex/Flex";
-type NotificationType = "danger" | "informative" | "success" | "warning";
+export declare const NotificationTypes: {
+    readonly danger: "danger";
+    readonly informative: "informative";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+export type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
 export type AlertProps = FlexProps & {
     isCloseable?: boolean;
     closeAriaLabel?: string;

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

@@ -1 +1,2 @@
-export { default as Alert } from "./Alert";
+export { default as Alert, NotificationTypes } from "./Alert";
+export type { NotificationType } from "./Alert";

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

@@ -1,30 +1,11 @@
-/// <reference types="react" />
+import { ComponentPropsWithRef } from "react";
 import { MotionProps } from "framer-motion";
-import { ColorProps, SpaceProps, LayoutProps, BoxShadowProps, TextAlignProps, OrderProps, FlexGrowProps, PositionProps, BorderProps, FlexboxProps, BackgroundProps, OverflowProps } from "styled-system";
-import { TypographyProps } from "styled-system";
-import { TransitionProps } from "../StyledProps/transition";
-import { TransformProps } from "../StyledProps/transform";
-import { CursorProps } from "../StyledProps/cursor";
-import { VisibilityProps } from "../StyledProps/visibility";
-import { ThemeType } from "../theme.type";
-type SharedBoxProps = ColorProps & SpaceProps & LayoutProps & BoxShadowProps & TextAlignProps & OrderProps & FlexGrowProps & PositionProps & BorderProps & FlexboxProps & BackgroundProps & TransformProps & CursorProps & VisibilityProps & OverflowProps & TypographyProps & {
-    boxSizing?: string;
-};
-type CssArg = {
-    theme: ThemeType;
-};
-export type BoxProps = SharedBoxProps & TransitionProps & React.ComponentPropsWithRef<"div"> & {
-    as?: string;
-    css?: (props: CssArg) => any;
-};
-declare const Box: React.FC<BoxProps>;
-export type AnimatedBoxProps = SharedBoxProps & MotionProps & {
-    role?: string;
-    ref?: any;
-    onClick?: (event: React.MouseEvent<any>) => void;
-    onMouseEnter?: (event: React.MouseEvent<any>) => void;
-    onMouseOut?: (event: React.MouseEvent<any>) => void;
-    onMouseDown?: (event: React.MouseEvent<any>) => void;
-};
-export declare const AnimatedBox: React.FC<AnimatedBoxProps>;
+import { StyledProps } from "../StyledProps";
+export interface BoxProps extends StyledProps, ComponentPropsWithRef<"div"> {
+    as?: React.ElementType;
+}
+declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps, never>;
+export interface AnimatedBoxProps extends MotionProps, Omit<BoxProps, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd" | "style" | "transition"> {
+}
+export declare const AnimatedBox: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, AnimatedBoxProps, never>;
 export default Box;

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

@@ -1,8 +1,11 @@
-/// <reference types="react" />
 import { DefaultNDSThemeType } from "../theme.type";
 import { StyledProps } from "../StyledProps";
 export type NavBarBackgroundProps = {
     theme?: DefaultNDSThemeType;
 } & StyledProps;
-declare const NavBarBackground: import("styled-components").StyledComponent<import("react").FC<import("../Flex/Flex").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const NavBarBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & {
+    gap?: import("csstype").Property.Gap<string | number>;
+    rowGap?: import("csstype").Property.RowGap<string | number>;
+    columnGap?: import("csstype").Property.ColumnGap<string | number>;
+}, never>;
 export default NavBarBackground;

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

@@ -4,5 +4,10 @@ import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type BreadcrumbsProps = Omit<FlexProps, "size"> & {
     size?: ComponentSize;
 };
-declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+declare const Breadcrumbs: {
+    ({ size, children, ...props }: BreadcrumbsProps): React.JSX.Element;
+    defaultProps: {
+        as: string;
+    };
+};
 export default Breadcrumbs;

package/dist/src/Card/CardSet.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { BoxProps } from "../Box/Box";
-declare const CardSet: import("styled-components").StyledComponent<React.FC<BoxProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const CardSet: import("styled-components").StyledComponent<({ children, ...props }: BoxProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export default CardSet;

package/dist/src/Divider/Divider.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
 import { BoxProps } from "../Box/Box";
-type DividerProps = BoxProps;
-declare const Divider: ({ borderColor, ...props }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ borderColor, ...props }: BoxProps) => React.JSX.Element;
 export default Divider;

package/dist/src/DropdownMenu/DropdownButton.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { DefaultNDSThemeType } from "../theme.type";
+import { StyledProps } from "../StyledProps";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 declare const DropdownButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: React.Ref<HTMLButtonElement>;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+} & StyledProps & {
     size?: ComponentSize;
     color?: string;
     theme?: DefaultNDSThemeType;

package/dist/src/FieldLabel/HelpText.d.ts

@@ -4,7 +4,7 @@ declare const HelpText: import("styled-components").StyledComponent<"p", import(
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    theme?: import("../theme.type").DefaultNDSThemeType;
+} & import("..").StyledProps & {
+    theme?: import("..").DefaultNDSThemeType;
 }, never>;
 export default HelpText;

package/dist/src/Flex/Flex.d.ts

@@ -1,9 +1,13 @@
-import React, { CSSProperties } from "react";
+import { CSSProperties } from "react";
 import { BoxProps } from "../Box/Box";
 export type FlexProps = BoxProps & {
     gap?: CSSProperties["gap"];
     rowGap?: CSSProperties["rowGap"];
     columnGap?: CSSProperties["columnGap"];
 };
-declare const Flex: React.FC<FlexProps>;
+declare const Flex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps & {
+    gap?: CSSProperties["gap"];
+    rowGap?: CSSProperties["rowGap"];
+    columnGap?: CSSProperties["columnGap"];
+}, never>;
 export default Flex;

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

@@ -106,15 +106,3 @@ export declare const WithCustomOrder: {
         name: string;
     };
 };
-export declare const Ie11MinHeightSolution1: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Ie11MinHeightSolution2: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/dist/src/Form/Field.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { BoxProps } from "../Box/Box";
 export type FieldProps = BoxProps;
-declare const Field: import("styled-components").StyledComponent<import("react").FC<BoxProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const Field: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps, never>;
 export default Field;

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

@@ -2,7 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { DefaultNDSThemeType } from "../theme.type";
 export declare const getThemeColor: (themeColor: any) => any;
-export declare const NavBarBackground: import("styled-components").StyledComponent<React.FC<import("../Flex/Flex").FlexProps>, import("styled-components").DefaultTheme, {
+export declare const NavBarBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & {
+    gap?: import("csstype").Property.Gap<string | number>;
+    rowGap?: import("csstype").Property.RowGap<string | number>;
+    columnGap?: import("csstype").Property.ColumnGap<string | number>;
+} & {
     backgroundColor: string;
     theme?: DefaultNDSThemeType;
 }, never>;

package/dist/src/StyledProps/index.d.ts

@@ -1,8 +1,29 @@
-import { SpaceProps, ColorProps, TypographyProps, LayoutProps, BoxShadowProps, BorderProps, OverflowProps, FlexboxProps } from "styled-system";
-import { TextOverflowProps } from "./textOverflow";
-import { CursorProps } from "./cursor";
-import { TransformProps } from "./transform";
-import { TransitionProps } from "./transition";
-import { VisibilityProps } from "./visibility";
+import type { SpaceProps, PaddingProps, MarginProps, WidthProps, FontSizeProps, FontFamilyProps, TextAlignProps, LineHeightProps, FontWeightProps, FontStyleProps, LetterSpacingProps, DisplayProps, MaxWidthProps, MinWidthProps, HeightProps, MaxHeightProps, MinHeightProps, SizeProps, VerticalAlignProps, AlignItemsProps, AlignContentProps, JustifyItemsProps, JustifyContentProps, FlexWrapProps, FlexBasisProps, FlexDirectionProps, FlexProps, JustifySelfProps, AlignSelfProps, OrderProps, GridGapProps, GridColumnGapProps, GridRowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps, BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BordersProps, BorderColorProps, BorderRadiusProps, BoxShadowProps, OpacityProps, OverflowProps, BackgroundProps, BackgroundImageProps, BackgroundPositionProps, BackgroundRepeatProps, BackgroundSizeProps, PositionProps, ZIndexProps, TopProps, RightProps, BottomProps, LeftProps, TextStyleProps, ColorStyleProps, ButtonStyleProps, FlexboxProps, GridProps, BackgroundColorProps, FlexGrowProps, TypographyProps, LayoutProps } from "styled-system";
+import { CSSProperties } from "react";
 export declare const addStyledProps: import("styled-system").styleFn;
-export type StyledProps = BorderProps & BoxShadowProps & ColorProps & CursorProps & LayoutProps & OverflowProps & SpaceProps & TextOverflowProps & TransformProps & TransitionProps & TypographyProps & VisibilityProps & FlexboxProps;
+interface TransitionProps {
+    transition?: CSSProperties["transition"];
+    transitionDelay?: CSSProperties["transitionDelay"];
+    transitionProperty?: CSSProperties["transition"];
+    transitionDuration?: CSSProperties["transitionDuration"];
+    transitionTimingFunction?: CSSProperties["transitionTimingFunction"];
+}
+interface TransformProps {
+    transform?: CSSProperties["transform"];
+    transformOrigin?: CSSProperties["transformOrigin"];
+    transformStyle?: CSSProperties["transformStyle"];
+    transformBox?: CSSProperties["transformBox"];
+}
+export type TextOverflowProps = {
+    whiteSpace?: CSSProperties["whiteSpace"];
+    textOverflow?: CSSProperties["textOverflow"];
+};
+export type VisibilityProps = {
+    visibility?: CSSProperties["visibility"];
+};
+export type CursorProps = {
+    cursor?: CSSProperties["cursor"];
+};
+export interface StyledProps extends SpaceProps, BackgroundColorProps, LayoutProps, FlexGrowProps, TypographyProps, MarginProps, PaddingProps, WidthProps, FontSizeProps, FontFamilyProps, TextAlignProps, LineHeightProps, FontWeightProps, FontStyleProps, LetterSpacingProps, DisplayProps, MaxWidthProps, MinWidthProps, HeightProps, MaxHeightProps, MinHeightProps, SizeProps, VerticalAlignProps, AlignItemsProps, AlignContentProps, JustifyItemsProps, JustifyContentProps, FlexWrapProps, FlexBasisProps, FlexDirectionProps, FlexProps, FlexboxProps, JustifySelfProps, AlignSelfProps, OrderProps, GridProps, GridGapProps, GridColumnGapProps, GridRowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps, BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BordersProps, BorderRadiusProps, BoxShadowProps, OpacityProps, OverflowProps, BorderColorProps, BackgroundProps, PositionProps, ZIndexProps, TopProps, RightProps, BottomProps, LeftProps, TextStyleProps, ColorStyleProps, ButtonStyleProps, TransitionProps, TransformProps, BackgroundImageProps, BackgroundPositionProps, BackgroundRepeatProps, BackgroundSizeProps, TextOverflowProps, VisibilityProps, CursorProps {
+}
+export {};

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const TabContainer: import("styled-components").StyledComponent<import("react").FC<import("../Box/Box").BoxProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const TabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps, never>;
 export default TabContainer;

package/dist/src/Tooltip/TooltipContainer.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { PositionProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-declare const TooltipContainer: import("styled-components").StyledComponent<import("react").FC<import("../Box/Box").BoxProps>, import("styled-components").DefaultTheme, {
+declare const TooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     theme?: DefaultNDSThemeType;
     dataPlacement?: "top" | "bottom" | "left" | "right";
     open?: boolean;

package/dist/src/Type/Headings.d.ts

@@ -4,8 +4,8 @@ export declare const Heading1: import("styled-components").StyledComponent<"p",
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    theme?: import("../theme.type").DefaultNDSThemeType;
+} & import("../StyledProps").StyledProps & {
+    theme?: import("..").DefaultNDSThemeType;
 } & {
     slot?: string;
     style?: import("react").CSSProperties;
@@ -278,8 +278,8 @@ export declare const Heading2: import("styled-components").StyledComponent<"p",
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    theme?: import("../theme.type").DefaultNDSThemeType;
+} & import("../StyledProps").StyledProps & {
+    theme?: import("..").DefaultNDSThemeType;
 } & {
     slot?: string;
     style?: import("react").CSSProperties;
@@ -552,8 +552,8 @@ export declare const Heading3: import("styled-components").StyledComponent<"p",
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    theme?: import("../theme.type").DefaultNDSThemeType;
+} & import("../StyledProps").StyledProps & {
+    theme?: import("..").DefaultNDSThemeType;
 } & {
     slot?: string;
     style?: import("react").CSSProperties;
@@ -826,8 +826,8 @@ export declare const Heading4: import("styled-components").StyledComponent<"p",
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    theme?: import("../theme.type").DefaultNDSThemeType;
+} & import("../StyledProps").StyledProps & {
+    theme?: import("..").DefaultNDSThemeType;
 } & {
     slot?: string;
     style?: import("react").CSSProperties;

package/dist/src/Type/Text.d.ts

@@ -14,7 +14,7 @@ declare const Text: import("styled-components").StyledComponent<"p", import("sty
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BoxShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/cursor").CursorProps & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../StyledProps/textOverflow").TextOverflowProps & import("../StyledProps/transform").TransformProps & import("../StyledProps/transition").TransitionProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("../StyledProps/visibility").VisibilityProps & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+} & StyledProps & {
     theme?: DefaultNDSThemeType;
 }, never>;
 export default Text;

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
-export { Alert } from "./Alert";
+export { Alert, NotificationTypes } from "./Alert";
+export type { NotificationType } from "./Alert";
 export { AsyncSelect } from "./AsyncSelect";
 export { Banner } from "./Banner";
 export { AnimatedBox, Box } from "./Box";
@@ -44,7 +45,7 @@ export type { TableCellInfoType, TableColumnType, TableProps, TableRowType } fro
 export { Tab, Tabs } from "./Tabs";
 export { Textarea } from "./Textarea";
 export { default as theme } from "./theme";
-export type { ThemeType } from "./theme.type";
+export type { ThemeType, DefaultNDSThemeType } from "./theme.type";
 export { TimePicker } from "./TimePicker";
 export { TimeRange } from "./TimeRange";
 export { Toast } from "./Toast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "9.0.3",
+  "version": "10.0.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -121,7 +121,6 @@
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-select": "^5.8.0",
     "react-test-renderer": "^16.10",
     "rollup": "^2.7.3",
     "rollup-plugin-babel": "^4.4.0",
@@ -163,6 +162,7 @@
     "react-resize-detector": "^9.1.0",
     "react-windowed-select": "2.0.5",
     "smoothscroll-polyfill": "^0.4.4",
+    "react-select": "^5.8.0",
     "styled-system": "^5.1.4",
     "@types/styled-system": "5.1.22"
   },

package/dist/src/StyledProps/cursor.d.ts

@@ -1,4 +0,0 @@
-export type CursorProps = {
-    cursor?: "string";
-};
-export declare const cursor: import("styled-system").styleFn;

package/dist/src/StyledProps/textOverflow.d.ts

@@ -1,5 +0,0 @@
-export type TextOverflowProps = {
-    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "initial" | "inherit";
-    textOverflow?: "clip" | "ellipsis" | "string" | "initial" | "inherit";
-};
-export declare const textOverflow: import("styled-system").styleFn;

package/dist/src/StyledProps/transform.d.ts

@@ -1,4 +0,0 @@
-export type TransformProps = {
-    transform?: string;
-};
-export declare const transform: import("styled-system").styleFn;

package/dist/src/StyledProps/transition.d.ts

@@ -1,8 +0,0 @@
-export type TransitionProps = {
-    transition?: string;
-    transitionProperty?: string;
-    transitonDuration?: string;
-    transitionTimingFunction?: string;
-    transitionDelay?: string;
-};
-export declare const transition: import("styled-system").styleFn;

package/dist/src/StyledProps/visibility.d.ts

@@ -1,4 +0,0 @@
-export type VisibilityProps = {
-    visibility?: "hidden" | "visible";
-};
-export declare const visibility: import("styled-system").styleFn;