@nulogy/components 9.0.3 → 10.0.1

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 {
@@ -17581,11 +17571,11 @@ var customStyles = function customStyles(_ref6) {
         }
       });
     },
-    dropdownIndicator: function dropdownIndicator(provided, state) {
+    dropdownIndicator: function dropdownIndicator(provided) {
       return Object.assign(Object.assign(Object.assign({}, provided), !hasDefaultOptions && {
         display: "none"
       }), {
-        color: state.isHovered ? theme.colors.blackBlue : theme.colors.grey
+        color: theme.colors.grey
       });
     },
     indicatorsContainer: function indicatorsContainer(provided) {
@@ -17602,9 +17592,6 @@ var customStyles = function customStyles(_ref6) {
         transform: "translateY(-50%)"
       });
     },
-    input: function input() {
-      return {};
-    },
     valueContainer: function valueContainer(provided, state) {
       return Object.assign(Object.assign(Object.assign({}, provided), {
         display: "flex",
@@ -17630,14 +17617,13 @@ var customStyles = function customStyles(_ref6) {
         marginBottom: 0,
         position: "absolute",
         overflowX: "auto",
-        zIndex: "100",
+        zIndex: 100,
         width: "100%",
         background: theme.colors.white,
         borderWidth: "1px",
         borderColor: getBorderColor({
           errored: error,
           isOpen: true,
-          disabled: state.isDisabled,
           isFocused: false,
           theme: theme
         }),
@@ -18662,7 +18648,7 @@ var StyledOption = styled.div.withConfig({
   };
 }, function (_ref2) {
   var theme = _ref2.theme,
-      selectProps = _ref2.selectProps;
+      size = _ref2.size;
   return stylesForSize({
     large: {
       div: {
@@ -18674,14 +18660,16 @@ var StyledOption = styled.div.withConfig({
         padding: subPx(theme.space.x1)
       }
     }
-  }, selectProps.size);
+  }, size);
 });
-var SelectOption = function SelectOption(props) {
-  return /*#__PURE__*/React__default.createElement(StyledOption, Object.assign({}, props, {
-    cx: null,
+function SelectOption(props) {
+  return /*#__PURE__*/React__default.createElement(StyledOption, {
+    isSelected: props.isSelected,
+    isFocused: props.isFocused,
+    size: props.size,
     "data-testid": "select-option"
-  }), /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
-};
+  }, /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
+}
 
 var getSubset = function getSubset(o, propObj) {
   var fields = Object.keys(propObj);
@@ -18788,7 +18776,8 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       defaultOptions = _a.defaultOptions,
       loadOptions = _a.loadOptions,
       isClearable = _a.isClearable,
-      props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable"]);
+      size = _a.size,
+      props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "size"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -18796,6 +18785,7 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var theme = useTheme();
   var spaceProps = getSubset(props, propTypes.space);
   var error = !!(errorMessage || errorList);
+  var componentSize = useComponentSize(size);
   return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
@@ -18833,7 +18823,11 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     onInputChange: onInputChange,
     theme: theme,
     components: Object.assign({
-      Option: SelectOption,
+      Option: function Option(props) {
+        return /*#__PURE__*/React__default.createElement(SelectOption, Object.assign({
+          size: componentSize
+        }, props));
+      },
       Control: SelectControl$1,
       MultiValue: SelectMultiValue$1,
       ClearIndicator: SelectClearIndicator$1,
@@ -49092,7 +49086,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       initialIsOpen = _a.initialIsOpen,
       maxHeight = _a.maxHeight,
       multiselect = _a.multiselect,
-      onChange = _a.onChange,
+      _onChange = _a.onChange,
       placeholder = _a.placeholder,
       value = _a.value,
       defaultValue = _a.defaultValue,
@@ -49114,9 +49108,6 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     checkOptionsAreValid(options);
     optionsRef.current = options;
   }, [options]);
-  var handleChange = React__default.useCallback(function (option) {
-    onChange && onChange(extractValue(option, multiselect));
-  }, [multiselect, onChange]);
   React__default.useEffect(function () {
     if (ref) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -49129,7 +49120,6 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     requirementText: requirementText,
     helpText: helpText
   }, /*#__PURE__*/React__default.createElement(WindowedSelect, Object.assign({
-    size: componentSize,
     ref: reactSelectRef,
     placeholder: placeholder || t("select"),
     windowThreshold: windowThreshold,
@@ -49146,13 +49136,21 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     "aria-invalid": error,
     defaultMenuIsOpen: initialIsOpen,
     inputId: id,
-    onChange: handleChange,
+    onChange: function onChange(option) {
+      if (!_onChange) return;
+      var value = extractValue(option, multiselect);
+
+      _onChange(value);
+    },
     defaultValue: getReactSelectValue(options, defaultValue),
     value: getReactSelectValue(options, value),
     isMulti: multiselect,
-    theme: themeContext,
     components: Object.assign({
-      Option: SelectOption,
+      Option: function Option(props) {
+        return /*#__PURE__*/React__default.createElement(SelectOption, Object.assign({
+          size: componentSize
+        }, props));
+      },
       Control: SelectControl,
       MultiValue: SelectMultiValue,
       ClearIndicator: SelectClearIndicator,
@@ -49162,8 +49160,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       Input: SelectInput
     }, components),
     "aria-label": ariaLabel,
-    options: options,
-    labelText: labelText
+    options: options
   }, props)), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
     errorMessage: errorMessage,
@@ -49210,19 +49207,23 @@ var getReactSelectValue = function getReactSelectValue(options, input) {
   return getOption(options, input);
 };
 
-var extractValue = function extractValue(options, isMulti) {
-  if (isMulti) {
-    return options && options.length ? options.map(function (o) {
-      return o.value;
-    }) : [];
+function extractValue(options, isMulti) {
+  if (Array.isArray(options)) {
+    if (isMulti) {
+      return options && options.length ? options.map(function (o) {
+        return o.value;
+      }) : [];
+    } else {
+      throw new Error("UNEXPECTED ERROR: don't forget to enable isMulti");
+    }
   }
 
-  if (options == null) {
+  if (options === null) {
     return options;
   } else {
     return options.value;
   }
-};
+}
 
 ReactSelect.defaultProps = Object.assign(Object.assign({}, SelectDefaultProps), {
   windowThreshold: 300,
@@ -52295,4 +52296,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/AsyncSelect/AsyncSelect.d.ts

@@ -2,9 +2,11 @@ import React, { ReactNode } from "react";
 import Select from "react-select/base";
 import { AsyncProps } from "react-select/async";
 import { GroupBase } from "react-select";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
     autocomplete?: AsyncProps<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
+    size?: ComponentSize;
     requirementText?: string;
     helpText?: ReactNode;
     disabled?: AsyncProps<Option, IsMulti, Group>["isDisabled"];
@@ -15,5 +17,6 @@ type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<O
     maxHeight?: string;
     defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
 };
+export type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncProps<Option, IsMulti, Group>, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue"> & AsyncCustomProps<Option, IsMulti, Group>;
 declare const AsyncSelect: React.ForwardRefExoticComponent<Omit<AsyncProps<unknown, boolean, GroupBase<unknown>>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | "defaultInputValue"> & AsyncCustomProps<unknown, boolean, GroupBase<unknown>> & React.RefAttributes<Select<unknown, boolean, GroupBase<unknown>>>>;
 export default AsyncSelect;

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