@nulogy/components 16.1.0 → 17.0.0

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

@@ -1,4 +1,4 @@
-import { DialogContentProps, DialogOverlayProps } from "@reach/dialog";
+import { DialogOverlayProps } from "@reach/dialog";
 import { AnimatePresenceProps } from "framer-motion";
 import React from "react";
 import { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
@@ -12,11 +12,11 @@ interface OverlayPartProps extends DialogOverlayProps {
     closeOnClick?: boolean;
 }
 declare function OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps): import("react/jsx-runtime").JSX.Element;
-interface SheetPartProps extends DialogContentProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
+interface SheetPartProps extends WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
     children: React.ReactNode;
     "aria-label": string;
 }
-declare function SheetPart({ children, ...props }: SheetPartProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetPart({ children, "aria-label": ariaLabel, ...props }: SheetPartProps): import("react/jsx-runtime").JSX.Element;
 export declare const BottomSheetParts: {
     Root: typeof Root;
     Overlay: typeof OverlayPart;

package/dist/src/BottomSheet/BottomSheet.parts.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatePresence } from "framer-motion";
 import React from "react";
-import { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText } from "./BottomSheet.styled";
+import { OverlayDialog, Overlay, SheetDialog, Sheet, ContentContainer, Footer, Header, Title, HelpText, } from "./BottomSheet.styled";
 import { BottomSheetProvider, useBottomSheet } from "./BottomSheetProvider";
 const overlayVariants = {
     hidden: { opacity: 0 },
@@ -16,28 +16,28 @@ const transition = {
     ease: [0.32, 0.72, 0, 1],
 };
 function Root({ isOpen, onClose, children, ...props }) {
-    return (_jsx(AnimatePresence, { ...props, children: isOpen && (_jsx(BottomSheetProvider, { isOpen: isOpen, onClose: onClose, children: children })) }));
+    return (_jsx(AnimatePresence, { ...props, children: isOpen && (_jsx(BottomSheetProvider, { isOpen: isOpen, onClose: onClose, children: children }, "bottom-sheet")) }));
 }
 function OverlayPart({ closeOnClick, children, ...props }) {
     const { onClose, isOpen } = useBottomSheet();
     const [isAnimationComplete, setAnimationComplete] = React.useState(false);
-    return (_jsx(Overlay, { "data-testid": "bottom-sheet-overlay", "data-visible": isAnimationComplete ? true : undefined, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
-            if (isOpen) {
-                setAnimationComplete(true);
-            }
-        }, onClick: closeOnClick ? onClose : undefined, isOpen: isOpen, ...props, children: children }));
+    return (_jsx(OverlayDialog, { isOpen: isOpen, ...props, children: _jsx(Overlay, { "data-testid": "bottom-sheet-overlay", "data-visible": isAnimationComplete ? true : undefined, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
+                if (isOpen) {
+                    setAnimationComplete(true);
+                }
+            }, onClick: closeOnClick ? onClose : undefined, children: children }) }));
 }
-function SheetPart({ children, ...props }) {
+function SheetPart({ children, "aria-label": ariaLabel, ...props }) {
     const { isOpen } = useBottomSheet();
     const [isAnimationComplete, setAnimationComplete] = React.useState(false);
     function handleSheetClick(e) {
         e.stopPropagation();
     }
-    return (_jsx(Sheet, { "data-testid": "bottom-sheet-body", "aria-label": props["aria-label"], "data-visible": isAnimationComplete ? true : undefined, variants: sheetVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
-            if (isOpen) {
-                setAnimationComplete(true);
-            }
-        }, onClick: handleSheetClick, ...props, children: children }));
+    return (_jsx(SheetDialog, { "aria-label": ariaLabel, children: _jsx(Sheet, { "data-testid": "bottom-sheet-body", "data-visible": isAnimationComplete ? true : undefined, variants: sheetVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: transition, onAnimationComplete: () => {
+                if (isOpen) {
+                    setAnimationComplete(true);
+                }
+            }, onClick: handleSheetClick, ...props, children: children }) }));
 }
 export const BottomSheetParts = {
     Root,

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

@@ -1,34 +1,21 @@
-import { DialogContentProps } from "@reach/dialog";
-import type { AnimationProps } from "framer-motion";
+import { DialogContentProps, DialogOverlayProps } from "@reach/dialog";
+import React from "react";
+import type { MotionProps } from "framer-motion";
 import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
-declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog").DialogInnerProps> & import("@reach/dialog").DialogInnerProps & {
-    as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLElement | SVGElement>;
-}, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog").DialogInnerProps> & import("@reach/dialog").DialogInnerProps & {
-    as?: "div";
-}>, keyof import("react").Component<any, {}, any>>;
-interface SheetProps extends DialogContentProps, AnimationProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
+declare const OverlayDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<DialogOverlayProps | (DialogOverlayProps & React.RefAttributes<React.Component<DialogOverlayProps, any, any>>), import("styled-components/dist/types").BaseObject>> & (string & (Omit<React.ComponentClass<DialogOverlayProps, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<DialogOverlayProps>, keyof React.Component<any, {}, any>>));
+declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
+declare const SheetDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<DialogContentProps | (DialogContentProps & React.RefAttributes<React.Component<DialogContentProps, any, any>>), import("styled-components/dist/types").BaseObject>> & (string & (Omit<React.ComponentClass<DialogContentProps, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<DialogContentProps>, keyof React.Component<any, {}, any>>));
+interface SheetProps extends MotionProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
 }
-declare const Sheet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, "children" | "as"> & {
-    as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLElement | SVGElement>;
-}, SheetProps>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, "children" | "as"> & {
-    as?: "div";
-}>, keyof import("react").Component<any, {}, any>>;
-declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const Sheet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, SheetProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
+declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
@@ -36,11 +23,11 @@ declare const Title: import("styled-components/dist/types").IStyledComponentBase
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
 } & import("..").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLHeadingElement>;
+    ref?: React.Ref<HTMLParagraphElement>;
+}, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: React.Ref<HTMLHeadingElement>;
 }>, never>, never>, never>> & string;
-declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
@@ -48,6 +35,6 @@ declare const HelpText: import("styled-components/dist/types").IStyledComponentB
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
 } & import("..").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
+    ref?: React.Ref<HTMLParagraphElement>;
 }, never>> & string;
-export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };
+export { OverlayDialog, Overlay, SheetDialog, Sheet, ContentContainer, Footer, Header, Title, HelpText };

package/dist/src/BottomSheet/BottomSheet.styled.js

@@ -5,7 +5,10 @@ import { styled } from "styled-components";
 import { compose, height, layout, maxHeight, maxWidth, space, width } from "styled-system";
 import { Heading2, Text } from "../Type";
 import { excludeStyledProps } from "../StyledProps";
-const Overlay = styled(motion(ReachDialogOverlay))(({ theme }) => ({
+// Portal + focus-lock + scroll-lock wrapper (no visual styles)
+const OverlayDialog = styled(ReachDialogOverlay)({});
+// Animated backdrop
+const Overlay = styled(motion.div)(({ theme }) => ({
     position: "fixed",
     inset: 0,
     display: "flex",
@@ -14,8 +17,16 @@ const Overlay = styled(motion(ReachDialogOverlay))(({ theme }) => ({
     backgroundColor: transparentize(0.5, theme.colors.blackBlue),
     zIndex: theme.zIndices.overlay,
 }));
+// Transparent a11y wrapper (role="dialog", aria-modal, focus containment)
+const SheetDialog = styled(ReachDialogContent)({
+    width: "100%",
+    display: "flex",
+    justifyContent: "center",
+    padding: 0,
+    background: "none",
+});
 const styleFns = [width, maxWidth, height, maxHeight, space, layout];
-const Sheet = styled(motion(ReachDialogContent)).withConfig({
+const Sheet = styled(motion.div).withConfig({
     shouldForwardProp: excludeStyledProps(...styleFns),
 })(({ theme }) => ({
     "&:focus": {
@@ -83,4 +94,4 @@ const HelpText = styled(Text)(({ theme }) => ({
         fontSize: theme.fontSizes.small,
     },
 }));
-export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };
+export { OverlayDialog, Overlay, SheetDialog, Sheet, ContentContainer, Footer, Header, Title, HelpText };

package/dist/src/BottomSheet/stories/BottomSheet.actions.story.js

@@ -13,13 +13,14 @@ export default {
 };
 export const WithAHiddenCloseButton = {
     render: () => {
-        const [isOpen, setIsOpen] = React.useState(true);
+        const [isOpen, setIsOpen] = React.useState(false);
         return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "User Feedback", helpText: "Please provide your feedback to help us improve our services", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: ({ onClose }) => _jsx(PrimaryButton, { onClick: onClose, children: "Submit" }), hideCloseButton: true, children: _jsx(Placeholder, {}) })] }));
     },
     name: "With a hidden close button",
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
-        await step("is open initially without a close button", async () => {
+        await step("opens when trigger button is clicked without a close button", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
             await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
             await expect(screen.queryByText("Close")).not.toBeInTheDocument();
         });
@@ -27,7 +28,7 @@ export const WithAHiddenCloseButton = {
             await userEvent.click(screen.getByText("Submit"));
             await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
         });
-        await step("opens when trigger button is clicked", async () => {
+        await step("can be reopened", async () => {
             await userEvent.click(canvas.getByText("Open Sheet"));
             await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
         });

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

@@ -18,7 +18,7 @@ export declare const WithAnApplicationFrame: {
 export declare const DisableCloseOnOverlayClick: {
     render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
-    play: ({ canvasElement: _canvasElement, step }: {
+    play: ({ canvasElement, step }: {
         canvasElement: any;
         step: any;
     }) => Promise<void>;

package/dist/src/BottomSheet/stories/BottomSheet.features.story.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { expect, screen, userEvent, waitFor } from "storybook/test";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Box } from "../../Box";
 import { Button, IconicButton } from "../../Button";
 import { Flex } from "../../Flex";
@@ -37,20 +37,26 @@ export const WithAnApplicationFrame = {
 };
 export const DisableCloseOnOverlayClick = {
     render: () => {
-        const [isOpen, setIsOpen] = React.useState(true);
+        const [isOpen, setIsOpen] = React.useState(false);
         return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { disableCloseOnOverlayClick: true, "aria-label": "Example BottomSheet", title: "Disabled overlay", helpText: "This BottomSheet can not be dismissed by clicking on the overlay", isOpen: isOpen, onClose: () => {
                         setIsOpen(false);
                     }, children: _jsx(Placeholder, {}) })] }));
     },
     name: "Disable close on overlay click",
-    play: async ({ canvasElement: _canvasElement, step }) => {
-        await step("is open initially", async () => {
-            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible(), { timeout: 3000 });
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens when trigger button is clicked", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
         });
         await step("closes when close button is clicked", async () => {
             await userEvent.click(screen.getByText("Close"));
             await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
         });
+        await step("can be reopened", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+        });
     },
 };
 export const AdvancedUsage = () => {

package/dist/src/BottomSheet/stories/BottomSheet.story.js

@@ -13,19 +13,20 @@ export default {
 };
 export const BasicUsage = {
     render: () => {
-        const [isOpen, setIsOpen] = React.useState(true);
+        const [isOpen, setIsOpen] = React.useState(false);
         return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
-        await step("is open initially", async () => {
+        await step("opens when trigger button is clicked", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
             await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
         });
         await step("closes when Close button is clicked", async () => {
             await userEvent.click(screen.getByText("Close"));
             await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
         });
-        await step("opens when trigger button is clicked", async () => {
+        await step("can be reopened", async () => {
             await userEvent.click(canvas.getByText("Open Sheet"));
             await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
         });

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

@@ -5,271 +5,9 @@ export interface BoxProps extends StyledProps, ComponentPropsWithRef<"div"> {
     as?: React.ElementType;
 }
 declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>> & string;
-export interface AnimatedBoxProps extends MotionProps, Omit<BoxProps, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd" | "style" | "transition"> {
+export interface AnimatedBoxProps extends MotionProps, Omit<BoxProps, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd" | "style" | "transition" | "children"> {
 }
-export declare const AnimatedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
-    children?: import("react").ReactNode;
-    property?: string;
-    color?: string;
-    content?: string;
-    translate?: "yes" | "no";
-    hidden?: boolean;
-    slot?: string;
-    title?: string;
-    defaultChecked?: boolean;
-    defaultValue?: string | number | readonly string[];
-    suppressContentEditableWarning?: boolean;
-    suppressHydrationWarning?: boolean;
-    accessKey?: string;
-    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
-    autoFocus?: boolean;
-    className?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only";
-    contextMenu?: string;
-    dir?: string;
-    draggable?: boolean | "true" | "false";
-    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send";
-    id?: string;
-    lang?: string;
-    nonce?: string;
-    spellCheck?: boolean | "true" | "false";
-    tabIndex?: number;
-    radioGroup?: string;
-    role?: import("react").AriaRole;
-    about?: string;
-    datatype?: string;
-    inlist?: any;
-    prefix?: string;
-    rel?: string;
-    resource?: string;
-    rev?: string;
-    typeof?: string;
-    vocab?: string;
-    autoCorrect?: string;
-    autoSave?: string;
-    itemProp?: string;
-    itemScope?: boolean;
-    itemType?: string;
-    itemID?: string;
-    itemRef?: string;
-    results?: number;
-    security?: string;
-    unselectable?: "off" | "on";
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
-    is?: string;
-    exportparts?: string;
-    part?: string;
-    "aria-activedescendant"?: string;
-    "aria-atomic"?: boolean | "true" | "false";
-    "aria-autocomplete"?: "none" | "list" | "inline" | "both";
-    "aria-braillelabel"?: string;
-    "aria-brailleroledescription"?: string;
-    "aria-busy"?: boolean | "true" | "false";
-    "aria-checked"?: boolean | "true" | "false" | "mixed";
-    "aria-colcount"?: number;
-    "aria-colindex"?: number;
-    "aria-colindextext"?: string;
-    "aria-colspan"?: number;
-    "aria-controls"?: string;
-    "aria-current"?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date";
-    "aria-describedby"?: string;
-    "aria-description"?: string;
-    "aria-details"?: string;
-    "aria-disabled"?: boolean | "true" | "false";
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup";
-    "aria-errormessage"?: string;
-    "aria-expanded"?: boolean | "true" | "false";
-    "aria-flowto"?: string;
-    "aria-grabbed"?: boolean | "true" | "false";
-    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
-    "aria-hidden"?: boolean | "true" | "false";
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
-    "aria-keyshortcuts"?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-level"?: number;
-    "aria-live"?: "off" | "assertive" | "polite";
-    "aria-modal"?: boolean | "true" | "false";
-    "aria-multiline"?: boolean | "true" | "false";
-    "aria-multiselectable"?: boolean | "true" | "false";
-    "aria-orientation"?: "horizontal" | "vertical";
-    "aria-owns"?: string;
-    "aria-placeholder"?: string;
-    "aria-posinset"?: number;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed";
-    "aria-readonly"?: boolean | "true" | "false";
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required"?: boolean | "true" | "false";
-    "aria-roledescription"?: string;
-    "aria-rowcount"?: number;
-    "aria-rowindex"?: number;
-    "aria-rowindextext"?: string;
-    "aria-rowspan"?: number;
-    "aria-selected"?: boolean | "true" | "false";
-    "aria-setsize"?: number;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other";
-    "aria-valuemax"?: number;
-    "aria-valuemin"?: number;
-    "aria-valuenow"?: number;
-    "aria-valuetext"?: string;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    };
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement>;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement>;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement>;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement>;
-    onChange?: import("react").FormEventHandler<HTMLDivElement>;
-    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement>;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onInput?: import("react").FormEventHandler<HTMLDivElement>;
-    onInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onReset?: import("react").FormEventHandler<HTMLDivElement>;
-    onResetCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmit?: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalid?: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onError?: import("react").ReactEventHandler<HTMLDivElement>;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement>;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement>;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement>;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement>;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement>;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement>;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement>;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement>;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement>;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement>;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement>;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement>;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement>;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement>;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement>;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement>;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement>;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement>;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement>;
-} & MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const AnimatedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, AnimatedBoxProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export default Box;

package/dist/src/NDSProvider/NDSProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { I18nextProvider } from "react-i18next";
-import i18n from "../i18n";
+import i18n, { initI18n } from "../i18n";
 import NDSThemeProvider from "../theme/NDSThemeProvider";
 import ComponentVariantContextProvider from "./ComponentVariantContext";
 import FeatureFlagsContextProvider from "./FeatureFlagsContext";
@@ -10,6 +10,7 @@ import { LocaleContext } from "./LocaleContext";
 function NDSProvider({ theme: customTheme, children, disableGlobalStyles = false, locale = "en_US", variant = "desktop", featureFlags = {
     experimentalDesktopTypographyScale: false,
 }, }) {
+    initI18n();
     useEffect(() => {
         i18n.changeLanguage(locale);
     }, [locale]);

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

@@ -277,7 +277,6 @@ declare const _default: {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement>;
         onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement>;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement>;
-        list?: string | undefined;
         name?: string | undefined;
         type?: React.HTMLInputTypeAttribute | undefined;
         max?: number | string | undefined;
@@ -294,6 +293,7 @@ declare const _default: {
         accept?: string | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
+        list?: string | undefined;
         maxLength?: number | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;