@nulogy/components 11.0.0-beta.5 → 11.1.0

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

@@ -6,7 +6,7 @@ export declare const NotificationTypes: {
     readonly success: "success";
     readonly warning: "warning";
 };
-export type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
+export type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
 export type AlertProps = FlexProps & {
     isCloseable?: boolean;
     closeAriaLabel?: string;

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

@@ -3,10 +3,7 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Danger: () => React.JSX.Element;
-export declare const Informative: () => React.JSX.Element;
-export declare const Success: () => React.JSX.Element;
-export declare const Warning: () => React.JSX.Element;
+export declare const AlertTypes: () => React.JSX.Element;
 export declare const WithACloseButton: {
     (): React.JSX.Element;
     story: {

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

@@ -1,6 +1,6 @@
 import React from "react";
 type CloseButtonProps = {
-    onClick: any;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     "aria-label": string;
 };
 declare const CloseButton: ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => React.JSX.Element;

package/dist/src/AsyncSelect/AsyncSelect.d.ts

@@ -2,11 +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";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
     autocomplete?: AsyncProps<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     requirementText?: string;
     helpText?: ReactNode;
     disabled?: AsyncProps<Option, IsMulti, Group>["isDisabled"];

package/dist/src/AsyncSelect/AsyncSelectComponents.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps } from "react-select";
 import { GroupBase } from "react-select";
-import { OptionProps } from "react-select";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import type { OptionProps } from "react-windowed-select";
+import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectMultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;
@@ -11,5 +11,5 @@ export declare const SelectContainer: <Option, IsMulti extends boolean, Group ex
 export declare const SelectInput: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group> & {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
 }): React.JSX.Element;

package/dist/src/AsyncSelect/fixtures.d.ts

@@ -0,0 +1,5 @@
+export declare const loadMatchingProvinces: (inputValue: string) => Promise<any>;
+export declare const provinces: {
+    label: string;
+    value: string;
+}[];

package/dist/src/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { WidthProps } from "styled-system";
+interface Props {
+    isOpen?: boolean;
+    "aria-label"?: string;
+    onClose?: () => void;
+    title?: string;
+    helpText?: React.ReactNode;
+    closeButtonLabel?: string;
+    hideCloseButton?: boolean;
+    secondaryAction?: (props: {
+        onClose: () => void;
+    }) => React.ReactElement;
+    primaryAction?: (props: {
+        onClose: () => void;
+    }) => React.ReactElement;
+    disableCloseOnOverlayClick?: boolean;
+    sheetWidth?: WidthProps["width"];
+    contentWidth?: WidthProps["width"];
+    children?: React.ReactNode;
+}
+export default function BottomSheet({ title, helpText, closeButtonLabel, secondaryAction, primaryAction, isOpen, onClose, sheetWidth, contentWidth, disableCloseOnOverlayClick, hideCloseButton, children, ...props }: Props): React.JSX.Element;
+export {};

package/dist/src/BottomSheet/BottomSheet.parts.d.ts

@@ -0,0 +1,44 @@
+import { DialogContentProps, DialogOverlayProps } from "@reach/dialog";
+import { AnimatePresenceProps } from "framer-motion";
+import React from "react";
+import { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
+interface RootProps extends AnimatePresenceProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+declare function Root({ isOpen, onClose, children, ...props }: RootProps): React.JSX.Element;
+interface OverlayPartProps extends DialogOverlayProps {
+    closeOnClick?: boolean;
+}
+declare function OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps): React.JSX.Element;
+interface SheetPartProps extends DialogContentProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
+    children: React.ReactNode;
+    "aria-label": string;
+}
+declare function SheetPart({ children, ...props }: SheetPartProps): React.JSX.Element;
+export declare const BottomSheetParts: {
+    Root: typeof Root;
+    Overlay: typeof OverlayPart;
+    Sheet: typeof SheetPart;
+    ContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    Title: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, React.HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("..").StyledProps & {
+        as: string;
+    }, "as">;
+    HelpText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, React.HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("..").StyledProps, never>;
+    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+};
+export {};

package/dist/src/BottomSheet/BottomSheet.styled.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { DialogContentProps } from "@reach/dialog";
+import type { AnimationProps } from "framer-motion";
+import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
+declare const Overlay: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("@reach/utils/dist/declarations/src/polymorphic").Merge<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+    as?: "div";
+}>>, import("styled-components").DefaultTheme, {}, never>;
+interface SheetProps extends DialogContentProps, AnimationProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
+}
+declare const Sheet: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("@reach/utils/dist/declarations/src/polymorphic").Merge<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, DialogContentProps & {
+    as?: "div";
+}>>, import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & SheetProps, never>;
+declare const ContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Title: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps & {
+    as: string;
+}, "as">;
+declare const HelpText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, never>;
+export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };

package/dist/src/BottomSheet/BottomSheetProvider.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface BottomSheetContextType {
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare function useBottomSheet(): BottomSheetContextType;
+declare function BottomSheetProvider({ isOpen, onClose, children, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export { BottomSheetProvider, useBottomSheet };

package/dist/src/BottomSheet/stories/BottomSheet.actions.story.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithAHiddenCloseButton: () => React.JSX.Element;
+export declare const WithButtons: () => React.JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.content.story.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithHelpText: () => React.JSX.Element;
+export declare const WithHelpContent: () => React.JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.features.story.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithCustomWidths: () => React.JSX.Element;
+export declare const DisableCloseOnOverlayClick: () => React.JSX.Element;
+export declare const AdvancedUsage: () => React.JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.parts.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const RenderedUsingCompositionalAPI: () => React.JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.story.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const BasicUsage: () => React.JSX.Element;

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

@@ -1 +1,2 @@
 export { default as Box, AnimatedBox } from "./Box";
+export type { BoxProps } from "./Box";

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

@@ -2,7 +2,7 @@ import React from "react";
 type ThemeColorObject = {
     textColor?: string;
     background?: string;
-    logoColor?: string;
+    logoColor?: "white" | "blue";
 };
 type MenuData = {
     primaryMenu?: any[];
@@ -15,5 +15,5 @@ type BaseMobileMenuProps = {
     themeColorObject?: ThemeColorObject;
     showNulogyLogo?: boolean;
 };
-declare const MobileMenu: import("styled-components").StyledComponent<React.FC<BaseMobileMenuProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const MobileMenu: import("styled-components").StyledComponent<({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }: BaseMobileMenuProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export default MobileMenu;

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

@@ -3,7 +3,7 @@ import { StyledProps } from "../StyledProps";
 export type NavBarBackgroundProps = {
     theme?: DefaultNDSThemeType;
 } & StyledProps;
-declare const NavBarBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & {
+declare const NavBarBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box").BoxProps & {
     gap?: import("csstype").Property.Gap<string | number>;
     rowGap?: import("csstype").Property.RowGap<string | number>;
     columnGap?: import("csstype").Property.ColumnGap<string | number>;

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

@@ -1,2 +1 @@
-declare const isValidMenuItem: (arr: any, idx: any, componentName: any, location: any, propFullName: any) => Error;
-export default isValidMenuItem;
+export default function isValidMenuItem(arr: any, idx: any, componentName: any, location: any, propFullName: any): Error;

package/dist/src/Branding/BrandingText.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="react" />
-declare const BrandingText: React.FC<any>;
+type BrandingTextProps = {
+    logoColor?: "blue" | "white";
+    size?: "small" | "medium" | "large";
+};
+declare const BrandingText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BrandingTextProps, never>;
 export default BrandingText;

package/dist/src/Branding/LettermarkLogo.d.ts

@@ -3,5 +3,5 @@ type LettermarkLogoProps = {
     letterFill?: string;
     size?: string;
 };
-declare const LettermarkLogo: React.FC<LettermarkLogoProps>;
-export default LettermarkLogo;
+export default function LettermarkLogo({ size, letterFill, ...props }: LettermarkLogoProps): React.JSX.Element;
+export {};

package/dist/src/Branding/WordmarkLogo.d.ts

@@ -3,6 +3,7 @@ type WordmarkLogoProps = {
     logoFill?: string;
     letterFill?: string;
     size?: string;
+    children?: React.ReactNode;
 };
-declare const WordmarkLogo: React.FC<WordmarkLogoProps>;
-export default WordmarkLogo;
+export default function WordmarkLogo({ size, logoFill, letterFill, ...props }: WordmarkLogoProps): React.JSX.Element;
+export {};

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

@@ -1,13 +1,8 @@
 import React from "react";
 import { FlexProps } from "../Flex/Flex";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
-type BreadcrumbsProps = Omit<FlexProps, "size"> & {
-    size?: ComponentSize;
-};
-declare const Breadcrumbs: {
-    ({ size, children, ...props }: BreadcrumbsProps): React.JSX.Element;
-    defaultProps: {
-        as: string;
-    };
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type BreadcrumbsProps = FlexProps & {
+    variant?: ComponentVariant;
 };
+declare const Breadcrumbs: ({ variant, as, children, ...props }: BreadcrumbsProps) => React.JSX.Element;
 export default Breadcrumbs;

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

@@ -4,7 +4,6 @@ declare const _default: {
 };
 export default _default;
 export declare const _Breadcrumbs: () => React.JSX.Element;
-export declare const WithDifferentSizes: () => React.JSX.Element;
 export declare const WithoutLink: {
     (): React.JSX.Element;
     story: {

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

@@ -1,5 +1,5 @@
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export declare const BreadcrumbsListSeparator: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const BreadcrumbsListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    size: ComponentSize;
+    variant: ComponentVariant;
 }, never>;

package/dist/src/Button/Button.d.ts

@@ -1,17 +1,18 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-type ComponentSize = "small" | "medium" | "large";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & {
     className?: string;
     icon?: any;
     iconSide?: "left" | "right";
-    size?: ComponentSize;
+    size?: "small" | "medium";
+    variant?: ComponentVariant;
     fullWidth?: boolean;
     asLink?: boolean;
     children?: React.ReactNode;
     theme?: DefaultNDSThemeType;
     href?: string;
 };
-declare const Button: React.FC<ButtonProps>;
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/src/Button/CloseButton.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-declare const CloseButton: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+declare const CloseButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default CloseButton;

package/dist/src/Button/ControlIcon.d.ts

@@ -1,14 +1,13 @@
 import React from "react";
-import { SpaceProps } from "styled-system";
-declare const ControlIcon: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: React.Ref<HTMLButtonElement>;
-} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    onClick?: (...args: any[]) => any;
+import { LayoutProps, SpaceProps } from "styled-system";
+type ControlIconProps = React.ComponentPropsWithRef<"button"> & SpaceProps & LayoutProps & {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     icon: string;
     toggled?: boolean;
     disabled?: boolean;
     size?: string;
     type?: string;
     label?: string;
-}, "ref"> & React.RefAttributes<unknown>>;
+};
+declare const ControlIcon: React.ForwardRefExoticComponent<Omit<ControlIconProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default ControlIcon;

package/dist/src/Button/DangerButton.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ButtonProps } from "./Button";
-declare const DangerButton: import("styled-components").StyledComponent<import("react").FC<ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const DangerButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
 export default DangerButton;

package/dist/src/Button/IconicButton.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 interface BaseProps {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     color?: string;
     labelHidden?: boolean;
     icon?: string;

package/dist/src/Button/IconicButton.story.d.ts

@@ -71,7 +71,6 @@ export declare const WithACustomFontSize: {
         name: string;
     };
 };
-export declare const WithDifferentSizes: () => React.JSX.Element;
 export declare const WithNonTextChildren: {
     (): React.JSX.Element;
     story: {

package/dist/src/Button/PrimaryButton.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-declare const PrimaryButton: React.FC<any>;
+import { ButtonProps } from "./Button";
+declare const PrimaryButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
 export default PrimaryButton;

package/dist/src/Button/QuietButton.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ButtonProps } from "./Button";
-declare const QuietButton: import("styled-components").StyledComponent<import("react").FC<ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const QuietButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
 export default QuietButton;

package/dist/src/ButtonGroup/ButtonGroup.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex/Flex";
-type ButtonGroupProps = FlexProps & {
+declare const ButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box").BoxProps & {
+    gap?: import("csstype").Property.Gap<string | number>;
+    rowGap?: import("csstype").Property.RowGap<string | number>;
+    columnGap?: import("csstype").Property.ColumnGap<string | number>;
+} & {
+    children?: React.ReactNode;
     alignment?: "left" | "spaced" | "right";
     className?: string;
-};
-declare const ButtonGroup: React.FC<ButtonGroupProps>;
+}, never>;
 export default ButtonGroup;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
+import React from "react";
 import { BoxProps } from "../Box/Box";
-declare const Card: React.FC<BoxProps>;
-export default Card;
+export default function Card({ borderRadius, boxShadow, py, px, position, children, ...props }: BoxProps): React.JSX.Element;

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

@@ -1,4 +1,6 @@
-import React from "react";
-import { BoxProps } from "../Box/Box";
-declare const CardSet: import("styled-components").StyledComponent<({ children, ...props }: BoxProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare const CardSet: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../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 CardSet;

package/dist/src/Checkbox/Checkbox.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
 type CheckboxProps = NativeInputProps & SpaceProps & {
+    children?: React.ReactNode;
     htmlSize?: number;
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     labelText?: string;
     checked?: boolean;
     defaultChecked?: boolean;
@@ -13,5 +14,5 @@ type CheckboxProps = NativeInputProps & SpaceProps & {
     indeterminate?: boolean;
     theme?: DefaultNDSThemeType;
 };
-declare const Checkbox: React.FC<CheckboxProps>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -38,7 +38,6 @@ export declare const SetToRequired: {
         name: string;
     };
 };
-export declare const WithDifferentSizes: () => React.JSX.Element;
 export declare const Indeterminate: {
     (): React.JSX.Element;
     story: {

package/dist/src/Checkbox/CheckboxGroup.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface CheckboxGroupProps {
+    children?: React.ReactNode;
     errorMessage?: string;
     errorList?: string[];
     labelText: string;
@@ -14,5 +15,5 @@ interface CheckboxGroupProps {
     required?: boolean;
     disabled?: boolean;
 }
-declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
-export default CheckboxGroup;
+export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }: CheckboxGroupProps): React.JSX.Element;
+export {};

package/dist/src/DatePicker/DatePicker.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import type { ReactDatePickerProps } from "react-datepicker";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { InputFieldProps } from "../Input/InputField";
 import { FieldProps } from "../Form/Field";
-type OmittedFieldProps = "size" | "onChange" | "onBlur" | "onFocus";
+type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
 interface DatePickerProps extends Omit<FieldProps, OmittedFieldProps> {
-    size?: ComponentSize;
+    variant?: ComponentVariant;
     onChange?: (date: Date) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;

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

@@ -15,7 +15,6 @@ export declare const WithCustomDateFormat: {
         name: string;
     };
 };
-export declare const WithDifferentSizes: () => React.JSX.Element;
 export declare const WithCustomPlaceholder: {
     (): React.JSX.Element;
     story: {

package/dist/src/DatePicker/DatePickerHeader.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-type DatePickerHeaderProps = {
-    date: any;
-    decreaseMonth: (...args: any[]) => any;
-    increaseMonth: (...args: any[]) => any;
+type Props = {
+    date: number;
+    decreaseMonth: React.MouseEventHandler<HTMLButtonElement>;
+    increaseMonth: React.MouseEventHandler<HTMLButtonElement>;
     prevMonthButtonDisabled: boolean;
     nextMonthButtonDisabled: boolean;
     locale?: string;
 };
-declare const DatePickerHeader: React.FC<DatePickerHeaderProps>;
-export default DatePickerHeader;
+export default function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): React.JSX.Element;
+export {};

package/dist/src/DatePicker/DatePickerInput.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { InputFieldProps } from "../Input/InputField";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 interface InputProps extends InputFieldProps {
     placeholder?: string;
 }
-type DatePickerInputProps = Omit<React.ComponentPropsWithRef<"input">, "size"> & {
-    size?: ComponentSize;
+type DatePickerInputProps = React.ComponentPropsWithRef<"input"> & {
+    variant?: ComponentVariant;
     dateFormat?: string;
     inputProps?: InputProps;
     onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/src/DatePicker/DatePickerStyles.d.ts

@@ -1 +1,4 @@
-export declare const DatePickerStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+import { DefaultNDSThemeType } from "../theme.type";
+export declare const DatePickerStyles: import("styled-components").GlobalStyleComponent<{
+    theme: DefaultNDSThemeType;
+}, import("styled-components").DefaultTheme>;

package/dist/src/DateRange/DateRange.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FieldProps } from "../Form/Field";
-import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 type DateRangeProps = FieldProps & {
     dateFormat?: string;
     onRangeChange?: (...args: any[]) => any;
@@ -30,7 +30,7 @@ type DateRangeProps = FieldProps & {
     disableFlipping?: boolean;
     endTimeProps?: any;
     startTimeProps?: any;
-    size?: ComponentSize;
+    variant?: ComponentVariant;
 };
-declare const DateRange: React.FC<DateRangeProps>;
+declare const DateRange: React.ForwardRefExoticComponent<Omit<DateRangeProps, "ref"> & React.RefAttributes<unknown>>;
 export default DateRange;