@nulogy/components 14.8.2 → 15.0.1

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

@@ -1,66 +1,66 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Modal: () => React.JSX.Element;
-export declare const WithCloseButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingContentWithoutFooterContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoTitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoFooterContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomMaxWidth: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSelect: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSelectAndScrollingContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithParentSelector: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ExampleControlledModal: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Modal: () => React.JSX.Element;
+export declare const WithCloseButton: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithScrollingContent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithScrollingContentWithoutFooterContent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithNoTitle: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithNoFooterContent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomMaxWidth: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithSelect: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithSelectAndScrollingContent: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithParentSelector: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ExampleControlledModal: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Modal/Modal.story.js

@@ -0,0 +1,120 @@
+import React from "react";
+import { Modal as NDSModal, Button, QuietButton, PrimaryButton, ButtonGroup, Form, Input, Select, Text, DatePicker, } from "../index";
+const env = process.env.NODE_ENV;
+if (env !== "test")
+    NDSModal.setAppElement("#root");
+const envProps = {
+    ariaHideApp: env === "test" ? false : undefined,
+};
+const Modal = (props) => React.createElement(NDSModal, Object.assign({}, envProps, props));
+const options = [
+    { value: "accepted", label: "Accepted" },
+    { value: "assigned", label: "Assigned to a line" },
+    { value: "hold", label: "On hold" },
+    { value: "rejected", label: "Rejected" },
+    { value: "open", label: "Open" },
+    { value: "progress", label: "In progress" },
+    { value: "quarantine", label: "In quarantine" },
+];
+class ModalExample extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isOpen: false,
+        };
+        this.openModal = this.openModal.bind(this);
+        this.closeModal = this.closeModal.bind(this);
+    }
+    openModal() {
+        this.setState({ isOpen: true });
+    }
+    closeModal() {
+        this.setState({ isOpen: false });
+    }
+    render() {
+        const { isOpen } = this.state;
+        const controlledModalButtons = (React.createElement(ButtonGroup, null,
+            React.createElement(PrimaryButton, { type: "submit", form: "myForm" }, "Add job to line"),
+            React.createElement(QuietButton, { onClick: this.closeModal }, "Cancel")));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: this.openModal }, "Open Modal"),
+            React.createElement(Modal, { title: "Edit Profile", footerContent: controlledModalButtons, onRequestClose: this.closeModal, isOpen: isOpen, maxWidth: "456px" },
+                React.createElement(Form, { id: "myForm", mb: "x2" },
+                    React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+                    React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+                    React.createElement(DatePicker, { selected: new Date("Fri, 01 Jan 2019"), dateFormat: "MMMM d, yyyy", onChange: (val) => val, onInputChange: (val) => val })))));
+    }
+}
+const modalButtons = (React.createElement(ButtonGroup, null,
+    React.createElement(PrimaryButton, null, "Add job to line"),
+    React.createElement(QuietButton, null, "Cancel")));
+export default {
+    title: "Components/Modal",
+};
+export const _Modal = () => (React.createElement(Modal, { footerContent: modalButtons, title: "Modal Title" }, "Content Content Content"));
+export const WithCloseButton = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, onRequestClose: () => { } }, "Content Content Content"));
+WithCloseButton.story = {
+    name: "with close button",
+};
+export const WithScrollingContent = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons },
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content")));
+WithScrollingContent.story = {
+    name: "with scrolling content",
+};
+export const WithScrollingContentWithoutFooterContent = () => (React.createElement(Modal, { title: "Modal Title" },
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content"),
+    React.createElement(Text, null, "Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content")));
+WithScrollingContentWithoutFooterContent.story = {
+    name: "with scrolling content without footer content",
+};
+export const WithNoTitle = () => React.createElement(Modal, { footerContent: modalButtons }, "Content Content Content");
+WithNoTitle.story = {
+    name: "with no title",
+};
+export const WithNoFooterContent = () => (React.createElement(Modal, { title: "Without footerContent", onRequestClose: () => { } }, "Content Content Content"));
+WithNoFooterContent.story = {
+    name: "with no footerContent",
+};
+export const WithCustomMaxWidth = () => (React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, maxWidth: "1000px" }, "Content Content Content"));
+WithCustomMaxWidth.story = {
+    name: "with custom maxWidth",
+};
+export const WithSelect = () => (React.createElement(Modal, { title: "Edit Profile", footerContent: modalButtons, onRequestClose: () => { }, maxWidth: "456px" },
+    React.createElement(Form, { id: "myForm", mb: "x2" },
+        React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))));
+WithSelect.story = {
+    name: "with select",
+};
+export const WithSelectAndScrollingContent = () => (React.createElement(Modal, { title: "Edit Profile", footerContent: modalButtons, onRequestClose: () => { }, maxWidth: "456px" },
+    React.createElement(Form, { id: "myForm", mb: "x2" },
+        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+        React.createElement(Input, { name: "name", id: "name", labelText: "Name" }),
+        React.createElement(Input, { type: "number", name: "age", id: "age", labelText: "Age" }),
+        React.createElement(Select, { maxHeight: "96px", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }))));
+WithSelectAndScrollingContent.story = {
+    name: "with select and scrolling content",
+};
+export const WithParentSelector = () => {
+    const id = "wrapper";
+    return (React.createElement("div", { id: id },
+        React.createElement(Modal, { title: "Modal Title", footerContent: modalButtons, parentSelector: () => document.getElementById(id) }, "Content")));
+};
+WithParentSelector.story = {
+    name: "with a parent selector",
+};
+export const ExampleControlledModal = () => React.createElement(ModalExample, null);
+ExampleControlledModal.story = {
+    name: "example controlled modal",
+};

package/dist/src/Modal/ModalCloseButton.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-declare const ModalCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLButtonElement>;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLButtonElement>;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export default ModalCloseButton;
+/// <reference types="react" />
+declare const ModalCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export default ModalCloseButton;

package/dist/src/Modal/ModalCloseButton.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { CloseButton } from "../Button";
+const ModalCloseButton = styled(CloseButton)(({ theme }) => ({
+    position: "absolute",
+    top: "12px",
+    right: theme.space.x2,
+}));
+export default ModalCloseButton;

package/dist/src/Modal/ModalContent.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { DefaultNDSThemeType } from "../theme";
-type ModalContentProps = React.ComponentPropsWithRef<"div"> & {
-    hasFooter?: any;
-    theme?: DefaultNDSThemeType;
-};
-declare const ModalContent: React.FC<React.PropsWithChildren<ModalContentProps>>;
-export default ModalContent;
+import React from "react";
+import { DefaultNDSThemeType } from "../theme";
+type ModalContentProps = React.ComponentPropsWithRef<"div"> & {
+    hasFooter?: any;
+    theme?: DefaultNDSThemeType;
+};
+declare const ModalContent: React.FC<React.PropsWithChildren<ModalContentProps>>;
+export default ModalContent;

package/dist/src/Modal/ModalContent.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+const ModalContent = styled.div(({ hasFooter, theme }) => ({
+    marginTop: "-64px",
+    marginBottom: hasFooter ? "-72px" : 0,
+    overflow: "auto",
+    paddingTop: "88px",
+    paddingBottom: hasFooter ? "96px" : theme.space.x2,
+    paddingLeft: theme.space.x3,
+    paddingRight: theme.space.x3,
+}));
+export default ModalContent;

package/dist/src/Modal/ModalFooter.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export default ModalFooter;
+/// <reference types="react" />
+declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export default ModalFooter;

package/dist/src/Modal/ModalFooter.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { transparentize } from "polished";
+const ModalFooter = styled.div(({ theme }) => ({
+    position: "relative",
+    padding: `${theme.space.x2} ${theme.space.x3}`,
+    backgroundColor: transparentize(0.1, theme.colors.white),
+    zIndex: theme.zIndices.modalHeaderAndFooter,
+    borderRadius: `0 0 ${theme.radii.medium} ${theme.radii.medium}`,
+    "&:after": {
+        content: "''",
+        position: "absolute",
+        top: 0,
+        left: theme.space.x1,
+        right: theme.space.x1,
+        display: "block",
+        margin: "0 auto",
+        borderBottom: `solid 1px ${theme.colors.lightGrey}`,
+    },
+}));
+export default ModalFooter;

package/dist/src/Modal/ModalHeader.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare const ModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    hasCloseButton?: boolean;
-}>> & string;
-export default ModalHeader;
+/// <reference types="react" />
+declare const ModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    hasCloseButton?: boolean;
+}>> & string;
+export default ModalHeader;

package/dist/src/Modal/ModalHeader.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { transparentize } from "polished";
+const getHeaderPaddingRight = (closeButtonIncluded, theme) => closeButtonIncluded ? theme.space.x8 : theme.space.x3;
+const ModalHeader = styled.div(({ hasCloseButton, theme }) => ({
+    position: "relative",
+    padding: `${theme.space.x2} ${getHeaderPaddingRight(hasCloseButton, theme)} ${theme.space.x2} ${theme.space.x3}`,
+    backgroundColor: transparentize(0.1, theme.colors.white),
+    zIndex: theme.zIndices.modalHeaderAndFooter,
+    borderRadius: `${theme.radii.medium} ${theme.radii.medium} 0 0`,
+    "&:after": {
+        content: "''",
+        position: "absolute",
+        bottom: 0,
+        left: theme.space.x1,
+        right: theme.space.x1,
+        display: "block",
+        margin: "0 auto",
+        borderBottom: `solid 1px ${theme.colors.lightGrey}`,
+    },
+}));
+export default ModalHeader;

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

@@ -1 +1 @@
-export { default as Modal } from "./Modal";
+export { default as Modal } from "./Modal";

package/dist/src/Modal/index.js

@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";

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

@@ -1,10 +1,10 @@
-import React from "react";
-export type ComponentVariant = "touch" | "desktop";
-type ComponentVariantContextValue = {
-    variant: ComponentVariant;
-    children?: React.ReactNode;
-};
-export declare const ComponentVariantContext: React.Context<ComponentVariantContextValue>;
-export default function ComponentVariantContextProvider({ variant, children }: ComponentVariantContextValue): React.JSX.Element;
-export declare function useComponentVariant(selectedVariant?: ComponentVariant): ComponentVariant;
-export {};
+import React from "react";
+export type ComponentVariant = "touch" | "desktop";
+type ComponentVariantContextValue = {
+    variant: ComponentVariant;
+    children?: React.ReactNode;
+};
+export declare const ComponentVariantContext: React.Context<ComponentVariantContextValue>;
+export default function ComponentVariantContextProvider({ variant, children }: ComponentVariantContextValue): React.JSX.Element;
+export declare function useComponentVariant(selectedVariant?: ComponentVariant): ComponentVariant;
+export {};

package/dist/src/NDSProvider/ComponentVariantContext.js

@@ -0,0 +1,12 @@
+import React, { createContext, useContext } from "react";
+export const ComponentVariantContext = createContext(undefined);
+export default function ComponentVariantContextProvider({ variant, children }) {
+    return React.createElement(ComponentVariantContext.Provider, { value: { variant: variant } }, children);
+}
+export function useComponentVariant(selectedVariant) {
+    const context = useContext(ComponentVariantContext);
+    if (!context) {
+        throw new Error(`useComponentVariant must be used within the NDSProvider`);
+    }
+    return selectedVariant !== null && selectedVariant !== void 0 ? selectedVariant : context.variant;
+}

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

@@ -1,12 +1,12 @@
-import React from "react";
-export interface FeatureFlags {
-    experimentalDesktopTypographyScale?: boolean;
-    navigationV3?: boolean;
-}
-export interface FeatureFlagsContextValue {
-    featureFlags: FeatureFlags;
-    children?: React.ReactNode;
-}
-export declare const FeatureFlagsContext: React.Context<FeatureFlagsContextValue>;
-export default function FeatureFlagsProvider({ featureFlags, children }: FeatureFlagsContextValue): React.JSX.Element;
-export declare function useFeatureFlags(): FeatureFlags;
+import React from "react";
+export interface FeatureFlags {
+    experimentalDesktopTypographyScale?: boolean;
+    navigationV3?: boolean;
+}
+export interface FeatureFlagsContextValue {
+    featureFlags: FeatureFlags;
+    children?: React.ReactNode;
+}
+export declare const FeatureFlagsContext: React.Context<FeatureFlagsContextValue>;
+export default function FeatureFlagsProvider({ featureFlags, children }: FeatureFlagsContextValue): React.JSX.Element;
+export declare function useFeatureFlags(): FeatureFlags;

package/dist/src/NDSProvider/FeatureFlagsContext.js

@@ -0,0 +1,12 @@
+import React, { createContext, useContext } from "react";
+export const FeatureFlagsContext = createContext(undefined);
+export default function FeatureFlagsProvider({ featureFlags, children }) {
+    return React.createElement(FeatureFlagsContext.Provider, { value: { featureFlags } }, children);
+}
+export function useFeatureFlags() {
+    const context = useContext(FeatureFlagsContext);
+    if (!context) {
+        throw new Error(`useFeatureFlags must be used within the NDSProvider`);
+    }
+    return context.featureFlags;
+}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare const GlobalStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    locale?: string;
-}>> & string;
-export default GlobalStyles;
+/// <reference types="react" />
+declare const GlobalStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    locale?: string;
+}>> & string;
+export default GlobalStyles;

package/dist/src/NDSProvider/GlobalStyles.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+const GlobalStyles = styled.div(({ theme, locale }) => {
+    const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
+    return {
+        color: theme.colors.black,
+        fontFamily,
+        fontSize: theme.fontSizes.base,
+        lineHeight: theme.lineHeights.base,
+        "-webkit-font-smoothing": "antialiased",
+        "-moz-osx-font-smoothing": "grayscale",
+        "*": {
+            boxSizing: "border-box",
+        },
+        img: {
+            maxWidth: "100%",
+            height: "auto",
+        },
+        button: {
+            fontFamily,
+        },
+        input: {
+            fontFamily,
+        },
+        textarea: {
+            fontFamily,
+        },
+    };
+});
+export default GlobalStyles;

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { DefaultNDSThemeType } from "../theme";
-type GlobalStylesComposerProps = {
-    theme?: DefaultNDSThemeType;
-    locale?: string;
-    disableGlobalStyles?: boolean;
-    children?: React.ReactNode;
-};
-export default function GlobalStylesComposer({ theme, locale, disableGlobalStyles, children, }: GlobalStylesComposerProps): React.JSX.Element;
-export {};
+import React from "react";
+import { DefaultNDSThemeType } from "../theme";
+type GlobalStylesComposerProps = {
+    theme?: DefaultNDSThemeType;
+    locale?: string;
+    disableGlobalStyles?: boolean;
+    children?: React.ReactNode;
+};
+export default function GlobalStylesComposer({ theme, locale, disableGlobalStyles, children, }: GlobalStylesComposerProps): React.JSX.Element;
+export {};

package/dist/src/NDSProvider/GlobalStylesComposer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Reset from "./Reset";
+import ModalStyleOverride from "./ModalStyleOverride";
+import GlobalStyles from "./GlobalStyles";
+export default function GlobalStylesComposer({ theme, locale, disableGlobalStyles, children, }) {
+    if (disableGlobalStyles) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Reset, null),
+        React.createElement(ModalStyleOverride, { theme: theme, locale: locale }),
+        React.createElement(GlobalStyles, { theme: theme, locale: locale }, children)));
+}

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

@@ -1,11 +1,11 @@
-import React from "react";
-export declare const LocaleContext: React.Context<{
-    locale: string;
-}>;
-export declare const useLocale: (locale?: string) => {
-    locale: string;
-};
-export declare const LocaleContextProvider: ({ locale, children }: {
-    locale: string;
-    children: React.ReactNode;
-}) => React.JSX.Element;
+import React from "react";
+export declare const LocaleContext: React.Context<{
+    locale: string;
+}>;
+export declare const useLocale: (locale?: string) => {
+    locale: string;
+};
+export declare const LocaleContextProvider: ({ locale, children }: {
+    locale: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/src/NDSProvider/LocaleContext.js

@@ -0,0 +1,12 @@
+import React from "react";
+export const LocaleContext = React.createContext({ locale: "en" });
+export const useLocale = (locale) => {
+    const context = React.useContext(LocaleContext);
+    if (!context) {
+        throw new Error("useLocale must be used within a LocaleContext.Provider");
+    }
+    return locale ? { locale } : context;
+};
+export const LocaleContextProvider = ({ locale, children }) => {
+    return React.createElement(LocaleContext.Provider, { value: { locale } }, children);
+};

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare const ModalStyleOverride: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
-    locale?: string;
-}>;
-export default ModalStyleOverride;
+/// <reference types="react" />
+declare const ModalStyleOverride: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    locale?: string;
+}>;
+export default ModalStyleOverride;

package/dist/src/NDSProvider/ModalStyleOverride.js

@@ -0,0 +1,32 @@
+import { createGlobalStyle } from "styled-components";
+const ModalStyleOverride = createGlobalStyle(({ theme, locale }) => {
+    const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
+    return {
+        ":root": {
+            "--reach-dialog": 1,
+        },
+        ".ReactModal__Content, [data-reach-dialog-content]": {
+            "-webkit-font-smoothing": "antialiased",
+            "-moz-osx-font-smoothing": "grayscale",
+            "*": { boxSizing: "border-box" },
+            color: theme.colors.black,
+            fontFamily,
+            fontSize: theme.fontSizes.base,
+            lineHeight: theme.lineHeights.base,
+            img: {
+                maxWidth: "100%",
+                height: "auto",
+            },
+            button: {
+                fontFamily,
+            },
+            input: {
+                fontFamily,
+            },
+            textarea: {
+                fontFamily,
+            },
+        },
+    };
+});
+export default ModalStyleOverride;