@nulogy/components 8.13.0 → 8.14.0

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

@@ -1,4 +1,8 @@
 import React from "react";
 import { FlexProps } from "../Flex/Flex";
-declare const Breadcrumbs: React.FC<FlexProps>;
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+type BreadcrumbsProps = Omit<FlexProps, "size"> & {
+    size?: ComponentSize;
+};
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
 export default Breadcrumbs;

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

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

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

@@ -1,3 +1,5 @@
-import React from "react";
-declare const BreadcrumbsListItem: React.FC<any>;
-export default BreadcrumbsListItem;
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+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;
+}, never>;

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

@@ -1,12 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
-type SizeType = "small" | "medium" | "large" | undefined;
+type ComponentSize = "small" | "medium" | "large";
 export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & {
     className?: string;
     icon?: any;
     iconSide?: "left" | "right";
-    size?: SizeType;
+    size?: ComponentSize;
     fullWidth?: boolean;
     asLink?: boolean;
     children?: React.ReactNode;

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

@@ -21,12 +21,7 @@ export declare const _QuietButton: {
         name: string;
     };
 };
-export declare const WithASelectedSize: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const WithDifferentSizes: () => JSX.Element;
 export declare const WithASelectedIcon: {
     (): JSX.Element;
     story: {

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type BaseProps = {
+    size?: ComponentSize;
     color?: string;
     labelHidden?: boolean;
     icon?: any;

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

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

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

@@ -1,3 +1,17 @@
 import React from "react";
-declare const Checkbox: React.FC<any>;
+import { SpaceProps } from "styled-system";
+import { DefaultNDSThemeType } from "../theme.type";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
+type CheckboxProps = NativeInputProps & SpaceProps & {
+    htmlSize?: number;
+    size?: ComponentSize;
+    labelText?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    error?: boolean;
+    indeterminate?: boolean;
+    theme?: DefaultNDSThemeType;
+};
+declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

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

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

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

@@ -1,7 +1,9 @@
 import React from "react";
 import type { ReactDatePickerProps } from "react-datepicker";
 import { FieldProps } from "../Form/Field";
-type DatePickerProps = FieldProps & {
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+type DatePickerProps = Omit<FieldProps, "size"> & {
+    size?: ComponentSize;
     selected?: any;
     dateFormat?: string;
     onChange?: ReactDatePickerProps["onChange"];

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

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

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type DatePickerInputProps = {
+    size?: ComponentSize;
     onBlur?: React.ComponentPropsWithRef<"input">["onBlur"];
     onFocus?: React.ComponentPropsWithRef<"input">["onFocus"];
     onClick?: (...args: any[]) => any;

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

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

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

@@ -2,75 +2,16 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const DefaultStartAndEndDate: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const DisabledRangeValidation: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomError: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const CustomizingInputProps: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Disabled: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const IndividualInputError: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithTimes: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const CustomizingInputPropsWithTimes: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithDefaultStartAndEndTimes: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithTimeError: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const UsingRefToControlFocus: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const Default: () => JSX.Element;
+export declare const WithDifferentSizes: () => JSX.Element;
+export declare const DefaultStartAndEndDate: () => JSX.Element;
+export declare const DisabledRangeValidation: () => JSX.Element;
+export declare const WithCustomError: () => JSX.Element;
+export declare const CustomizingInputProps: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
+export declare const IndividualInputError: () => JSX.Element;
+export declare const WithTimes: () => JSX.Element;
+export declare const CustomizingInputPropsWithTimes: () => JSX.Element;
+export declare const WithDefaultStartAndEndTimes: () => JSX.Element;
+export declare const WithTimeError: () => JSX.Element;
+export declare const UsingRefToControlFocus: () => JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 declare const EndTime: import("styled-components").StyledComponent<import("react").FC<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    size?: import("../NDSProvider/ComponentSizeContext").ComponentSize;
     disabled?: boolean;
     value?: string;
     timeFormat?: string;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 declare const StartTime: import("styled-components").StyledComponent<import("react").FC<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    size?: import("../NDSProvider/ComponentSizeContext").ComponentSize;
     disabled?: boolean;
     value?: string;
     timeFormat?: string;

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

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import { DefaultNDSThemeType } from "../theme.type";
-import { StyledProps } from "../StyledProps";
-type DropdownButtonProps = React.ComponentPropsWithRef<"button"> & StyledProps & {
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+declare const DropdownButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    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>>> & {
+    size?: ComponentSize;
     color?: string;
-    disabled?: boolean;
     theme?: DefaultNDSThemeType;
     hoverColor?: string;
     bgHoverColor?: string;
-};
-declare const DropdownButton: React.FC<DropdownButtonProps>;
+}, never>;
 export default DropdownButton;

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

@@ -1,3 +1,14 @@
-/// <reference types="react" />
-declare const DropdownLink: React.FC<any>;
+import React from "react";
+import { StyledProps } from "../StyledProps";
+import { DefaultNDSThemeType } from "../theme.type";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+type DropdownLinkProps = React.ComponentPropsWithRef<"a"> & StyledProps & {
+    disabled?: boolean;
+    size?: ComponentSize;
+    color?: string;
+    theme?: DefaultNDSThemeType;
+    hoverColor?: string;
+    bgHoverColor?: string;
+};
+declare const DropdownLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, DropdownLinkProps, never>;
 export default DropdownLink;

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

@@ -1,7 +1,9 @@
 import React from "react";
 import { StyledProps } from "../StyledProps";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type DropdownMenuProps = {
     className?: string;
+    size?: ComponentSize;
     id?: string;
     disabled?: boolean;
     trigger?: React.ReactNode | ((...args: any[]) => any);

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

@@ -20,6 +20,7 @@ export declare const WithCustomColors: {
         name: string;
     };
 };
+export declare const WithDifferentSizes: () => JSX.Element;
 export declare const WithButtonClosingMenu: {
     (): JSX.Element;
     story: {

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

@@ -9,6 +9,7 @@ export declare const WithAllProps: {
         name: string;
     };
 };
+export declare const WithDifferentSizes: () => JSX.Element;
 export declare const SetToDisabled: {
     (): JSX.Element;
     story: {

package/dist/src/Input/InputField.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import { TextAlignProps } from "styled-system";
-export type InputFieldProps = React.ComponentPropsWithRef<"input"> & {
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
+export type InputFieldProps = NativeInputProps & {
+    htmlSize?: number;
+    size?: ComponentSize;
     icon?: string;
-    disabled?: boolean;
     error?: boolean;
-    required?: boolean;
     labelText?: string;
     requirementText?: string;
     helpText?: React.ReactNode;
@@ -18,3 +20,4 @@ export type InputFieldProps = React.ComponentPropsWithRef<"input"> & {
     inputWidth?: string;
 };
 export declare const InputField: React.FC<InputFieldProps>;
+export {};

package/dist/src/Link/Link.d.ts

@@ -1,11 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import { DefaultNDSThemeType } from "../theme.type";
 import { StyledProps } from "../StyledProps";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 export type LinkProps = React.ComponentPropsWithRef<"a"> & StyledProps & {
     className?: string;
     underline?: boolean;
     hover?: string;
     as?: React.ElementType | string;
+    size?: ComponentSize;
     to?: string;
     color?: string;
     fontSize?: string;
@@ -13,18 +15,19 @@ export type LinkProps = React.ComponentPropsWithRef<"a"> & StyledProps & {
     children: JSX.Element | JSX.Element[] | React.ReactNode;
     "aria-label"?: string;
 };
-declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
-    ref?: import("react").Ref<HTMLAnchorElement>;
+declare const Link: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: React.Ref<HTMLAnchorElement>;
 } & 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>>> & {
     className?: string;
     underline?: boolean;
     hover?: string;
     as?: React.ElementType | string;
+    size?: ComponentSize;
     to?: string;
     color?: string;
     fontSize?: string;
     theme?: DefaultNDSThemeType;
     children: JSX.Element | JSX.Element[] | React.ReactNode;
     "aria-label"?: string;
-}, never>;
+}, "p" | "slot" | "style" | "title" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "boxShadow" | "bg" | "backgroundColor" | "opacity" | "cursor" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "whiteSpace" | "textOverflow" | "transform" | "transition" | "transitionProperty" | "transitonDuration" | "transitionTimingFunction" | "transitionDelay" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "visibility" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "underline" | "hover" | "as" | "to"> & React.RefAttributes<unknown>>;
 export default Link;

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

@@ -26,12 +26,8 @@ export declare const WithADifferentColor: {
         name: string;
     };
 };
-export declare const WithADifferentSize: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const WithADifferentFontSize: () => JSX.Element;
+export declare const WithDifferentSizes: () => JSX.Element;
 export declare const AsAButton: {
     (): JSX.Element;
     story: {

package/dist/src/NDSProvider/ComponentSizeContext.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type ComponentSize = "medium" | "large";
+type ComponentSizeContextValue = {
+    size: ComponentSize;
+};
+export declare const ComponentSizeContext: React.Context<ComponentSizeContextValue>;
+export declare function useComponentSize(selectedSize?: ComponentSize): ComponentSize;
+declare const ComponentSizeContextProvider: React.FC<ComponentSizeContextValue>;
+export default ComponentSizeContextProvider;

package/dist/src/NDSProvider/NDSProvider.d.ts

@@ -1,9 +1,20 @@
-import { ThemeType } from "../theme.type";
+import React from "react";
+import { ThemeType, Breakpoints } from "../theme.type";
+import { ComponentSize } from "./ComponentSizeContext";
+export declare const buildBreakPoints: (breakpointsConfig: Readonly<Breakpoints>) => {
+    map: (fn: any) => unknown[];
+    extraSmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    extraLarge: string;
+};
 type NDSProviderProps = {
     theme?: ThemeType;
     locale?: string;
     disableGlobalStyles?: boolean;
     children?: any;
+    size?: ComponentSize;
 };
-declare const NDSProvider: ({ theme, children, disableGlobalStyles, locale }: NDSProviderProps) => JSX.Element;
+declare const NDSProvider: React.FC<NDSProviderProps>;
 export default NDSProvider;

package/dist/src/Radio/Radio.d.ts

@@ -1,20 +1,14 @@
 import React, { ReactNode } from "react";
 import { SpaceProps } from "styled-system";
-import { DefaultNDSThemeType } from "../theme.type";
-type VisualRadioProps = {
-    disabled?: boolean;
-    theme?: DefaultNDSThemeType;
-};
-type RadioProps = VisualRadioProps & SpaceProps & React.ComponentPropsWithRef<"input"> & {
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
+type RadioProps = NativeInputProps & SpaceProps & {
+    htmlSize?: number;
+    size?: ComponentSize;
     labelText?: ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
-    disabled?: boolean;
     error?: boolean;
-    id?: string;
-    className?: string;
-    required?: boolean;
-    value?: any;
 };
 declare const Radio: React.FC<RadioProps>;
 export default Radio;

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

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

package/dist/src/RangeContainer/RangeContainer.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type RangeContainerProps = {
     labelProps?: any;
     startComponent?: React.ReactNode;
     endComponent?: React.ReactNode;
+    size?: ComponentSize;
     errorMessages?: (string | undefined)[];
 };
 declare const RangeContainer: React.FC<RangeContainerProps>;

package/dist/src/Select/Select.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 export type SelectProps = {
     options?: any[];
     windowThreshold?: number;
@@ -34,6 +35,7 @@ export type SelectProps = {
     components?: any;
     closeMenuOnSelect?: boolean;
     "aria-label"?: string;
+    size?: ComponentSize;
     [key: string]: any;
 };
 export declare const SelectDefaultProps: {

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

@@ -3,6 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const _Select: () => JSX.Element;
+export declare const WithDifferentSizes: () => JSX.Element;
 export declare const WithABlankValue: {
     (): JSX.Element;
     story: {