@nulogy/components 14.8.2 → 15.0.1

package/dist/src/BottomSheet/BottomSheet.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
+import { Box } from "../Box";
+import { QuietButton } from "../Button";
+import { Flex } from "../Flex";
+import { noop } from "../utils/noop";
+import { BottomSheetParts } from "./BottomSheet.parts";
+export default function BottomSheet(_a) {
+    var _b;
+    var { title, helpText, closeButtonLabel, secondaryAction, primaryAction, isOpen = false, onClose = noop, sheetWidth = "100%", contentWidth = { small: "100%", medium: 704 }, disableCloseOnOverlayClick = false, hideCloseButton = false, children } = _a, props = __rest(_a, ["title", "helpText", "closeButtonLabel", "secondaryAction", "primaryAction", "isOpen", "onClose", "sheetWidth", "contentWidth", "disableCloseOnOverlayClick", "hideCloseButton", "children"]);
+    const { t } = useTranslation();
+    const theme = useTheme();
+    closeButtonLabel || (closeButtonLabel = t("close"));
+    const closeOnClick = !disableCloseOnOverlayClick;
+    /*
+      x5: The footer buttons are x5 in height
+      x2: The footer has a padding top and bottom of x2
+      x4: To match the top padding of the content
+    */
+    const footerHeight = `calc(${theme.space.x5} + (${theme.space.x2} * 2) + ${theme.space.x4})`;
+    return (React.createElement(BottomSheetParts.Root, { isOpen: isOpen, onClose: onClose },
+        React.createElement(BottomSheetParts.Overlay, { closeOnClick: closeOnClick },
+            React.createElement(BottomSheetParts.Sheet, { width: sheetWidth, maxWidth: { small: `calc(100% - ${theme.space.x8})` }, maxHeight: { small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" }, "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : title },
+                React.createElement(BottomSheetParts.ContentContainer, null,
+                    React.createElement(Box, { width: contentWidth, margin: "0 auto" },
+                        React.createElement(BottomSheetParts.Header, null,
+                            title && React.createElement(BottomSheetParts.Title, null, title),
+                            helpText &&
+                                (typeof helpText === "string" ? (React.createElement(BottomSheetParts.HelpText, null, helpText)) : (helpText))),
+                        React.createElement(Box, { px: "x3", pt: "x4", pb: footerHeight }, children)),
+                    React.createElement(BottomSheetParts.Footer, null,
+                        React.createElement(Flex, { alignItems: "center", justifyContent: "space-between", gap: "x2" },
+                            !hideCloseButton && React.createElement(QuietButton, { onClick: onClose }, closeButtonLabel),
+                            React.createElement(Flex, { gap: "x2", alignItems: "center", ml: "auto" },
+                                secondaryAction && secondaryAction({ onClose }),
+                                primaryAction && primaryAction({ onClose })))))))));
+}

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

@@ -1,50 +1,50 @@
-import { DialogContentProps, DialogOverlayProps } from "@reach/dialog";
-import { AnimatePresenceProps } from "framer-motion";
-import React from "react";
-import { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
-interface RootProps extends AnimatePresenceProps {
-    isOpen: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-}
-declare function Root({ isOpen, onClose, children, ...props }: RootProps): React.JSX.Element;
-interface OverlayPartProps extends DialogOverlayProps {
-    closeOnClick?: boolean;
-}
-declare function OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps): React.JSX.Element;
-interface SheetPartProps extends DialogContentProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
-    children: React.ReactNode;
-    "aria-label": string;
-}
-declare function SheetPart({ children, ...props }: SheetPartProps): React.JSX.Element;
-export declare const BottomSheetParts: {
-    Root: typeof Root;
-    Overlay: typeof OverlayPart;
-    Sheet: typeof SheetPart;
-    ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    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>, "inline" | "compact" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
-        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-        inline?: boolean;
-        compact?: boolean;
-        disabled?: boolean;
-        textTransform?: "initial" | "-moz-initial" | "inherit" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-        fontSize?: string;
-    } & import("..").StyledProps, "ref"> & {
-        ref?: React.Ref<HTMLParagraphElement>;
-    }, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        ref?: React.Ref<HTMLHeadingElement>;
-    }>, never>, never>, never>> & string;
-    HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
-        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-        inline?: boolean;
-        compact?: boolean;
-        disabled?: boolean;
-        textTransform?: "initial" | "-moz-initial" | "inherit" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-        fontSize?: string;
-    } & import("..").StyledProps, "ref"> & {
-        ref?: React.Ref<HTMLParagraphElement>;
-    }, never>> & string;
-    Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-};
-export {};
+import { DialogContentProps, DialogOverlayProps } from "@reach/dialog";
+import { AnimatePresenceProps } from "framer-motion";
+import React from "react";
+import { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
+interface RootProps extends AnimatePresenceProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+declare function Root({ isOpen, onClose, children, ...props }: RootProps): React.JSX.Element;
+interface OverlayPartProps extends DialogOverlayProps {
+    closeOnClick?: boolean;
+}
+declare function OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps): React.JSX.Element;
+interface SheetPartProps extends DialogContentProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {
+    children: React.ReactNode;
+    "aria-label": string;
+}
+declare function SheetPart({ children, ...props }: SheetPartProps): React.JSX.Element;
+export declare const BottomSheetParts: {
+    Root: typeof Root;
+    Overlay: typeof OverlayPart;
+    Sheet: typeof SheetPart;
+    ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    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" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        compact?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("..").StyledProps, "ref"> & {
+        ref?: React.Ref<HTMLParagraphElement>;
+    }, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        ref?: React.Ref<HTMLHeadingElement>;
+    }>, never>, never>, never>> & string;
+    HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        compact?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("..").StyledProps, "ref"> & {
+        ref?: React.Ref<HTMLParagraphElement>;
+    }, never>> & string;
+    Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+};
+export {};

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

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { AnimatePresence } from "framer-motion";
+import React from "react";
+import { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText } from "./BottomSheet.styled";
+import { BottomSheetProvider, useBottomSheet } from "./BottomSheetProvider";
+const overlayVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+};
+const sheetVariants = {
+    hidden: { y: "100%" },
+    visible: { y: 0 },
+};
+const transition = {
+    duration: 0.5,
+    ease: [0.32, 0.72, 0, 1],
+};
+function Root(_a) {
+    var { isOpen, onClose, children } = _a, props = __rest(_a, ["isOpen", "onClose", "children"]);
+    return (React.createElement(AnimatePresence, Object.assign({}, props), isOpen && (React.createElement(BottomSheetProvider, { isOpen: isOpen, onClose: onClose }, children))));
+}
+function OverlayPart(_a) {
+    var { closeOnClick, children } = _a, props = __rest(_a, ["closeOnClick", "children"]);
+    const { onClose, isOpen } = useBottomSheet();
+    const [isAnimationComplete, setAnimationComplete] = React.useState(false);
+    return (React.createElement(Overlay, Object.assign({ "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));
+}
+function SheetPart(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { isOpen } = useBottomSheet();
+    const [isAnimationComplete, setAnimationComplete] = React.useState(false);
+    function handleSheetClick(e) {
+        e.stopPropagation();
+    }
+    return (React.createElement(Sheet, Object.assign({ "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));
+}
+export const BottomSheetParts = {
+    Root,
+    Overlay: OverlayPart,
+    Sheet: SheetPart,
+    ContentContainer,
+    Header,
+    Title,
+    HelpText,
+    Footer,
+};

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

@@ -1,50 +1,50 @@
-/// <reference types="react" />
-import { DialogContentProps } from "@reach/dialog";
-import type { AnimationProps } from "framer-motion";
-import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
-declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
-    as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<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/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
-    as?: "div";
-}>, keyof import("react").Component<any, {}, any>>;
-interface SheetProps extends DialogContentProps, AnimationProps, 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<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | "children"> & {
-    as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<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>;
-}, "as" | "children"> & {
-    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" | "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "initial" | "inherit" | "-moz-initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-    fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: import("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" | "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "initial" | "inherit" | "-moz-initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-    fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, never>> & string;
-export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };
+/// <reference types="react" />
+import { DialogContentProps } from "@reach/dialog";
+import type { AnimationProps } from "framer-motion";
+import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
+declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+    as?: "div";
+} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<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/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+    as?: "div";
+}>, keyof import("react").Component<any, {}, any>>;
+interface SheetProps extends DialogContentProps, AnimationProps, 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<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>, 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" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("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" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, never>> & string;
+export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };

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

@@ -0,0 +1,86 @@
+import { DialogContent as ReachDialogContent, DialogOverlay as ReachDialogOverlay, } from "@reach/dialog";
+import { motion } from "framer-motion";
+import { transparentize } from "polished";
+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 }) => ({
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "center",
+    backgroundColor: transparentize(0.5, theme.colors.blackBlue),
+    zIndex: theme.zIndices.overlay,
+}));
+const styleFns = [width, maxWidth, height, maxHeight, space, layout];
+const Sheet = styled(motion(ReachDialogContent)).withConfig({
+    shouldForwardProp: excludeStyledProps(...styleFns),
+})(({ theme }) => ({
+    "&:focus": {
+        outline: "none",
+    },
+    inset: 0,
+    backgroundColor: theme.colors.white,
+    borderTopLeftRadius: theme.radii.large,
+    borderTopRightRadius: theme.radii.large,
+    height: "auto",
+    padding: 0,
+    "*": {
+        boxSizing: "border-box",
+        WebkitTapHighlightColor: "transparent",
+    },
+    color: theme.colors.black,
+    fontSize: theme.fontSizes.medium,
+    lineHeight: theme.lineHeights.base,
+    WebkitFontSmoothing: "antialiased",
+    WebkitTapHighlightColor: "transparent",
+    MozOsxFontSmoothing: "grayscale",
+    position: "relative",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    background: "white",
+    boxShadow: theme.shadows.large,
+}), compose(...styleFns));
+const ContentContainer = styled.div((_) => ({
+    overflowY: "auto",
+    flex: 1,
+    WebkitOverflowScrolling: "touch",
+    scrollbarWidth: "none",
+    "&::-webkit-scrollbar": {
+        display: "none",
+    },
+}));
+const Footer = styled.div(({ theme }) => ({
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    marginLeft: theme.space.x1,
+    marginRight: theme.space.x1,
+    padding: theme.space.x2,
+    background: transparentize(0.4, theme.colors.white),
+    backdropFilter: "blur(8px)",
+    borderTop: "1px solid",
+    borderTopColor: theme.colors.lightGrey,
+    marginTop: "auto",
+}));
+const Header = styled.div(({ theme }) => ({
+    textAlign: "left",
+    paddingTop: theme.space.x3,
+    paddingLeft: theme.space.x3,
+    paddingRight: theme.space.x3,
+    paddingBottom: theme.space.none,
+}));
+const Title = styled(Heading2)(({ theme }) => ({
+    marginBottom: theme.space.x1,
+}));
+const HelpText = styled(Text)(({ theme }) => ({
+    color: theme.colors.midGrey,
+    "&, *": {
+        fontSize: theme.fontSizes.small,
+    },
+}));
+export { Overlay, Sheet, ContentContainer, Footer, Header, Title, HelpText };

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

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

package/dist/src/BottomSheet/BottomSheetProvider.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { createContext, useContext } from "react";
+import { noop } from "../utils/noop";
+const BottomSheetContext = createContext(undefined);
+function useBottomSheet() {
+    const context = useContext(BottomSheetContext);
+    if (!context) {
+        throw new Error("useBottomSheet must be used within a BottomSheetProvider");
+    }
+    return context;
+}
+function BottomSheetProvider({ isOpen = false, onClose = noop, children, }) {
+    return React.createElement(BottomSheetContext.Provider, { value: { isOpen, onClose } }, children);
+}
+export { BottomSheetProvider, useBottomSheet };

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

@@ -1,3 +1,3 @@
-export { default as BottomSheet } from "./BottomSheet";
-export { BottomSheetParts } from "./BottomSheet.parts";
-export type { Props as BottomSheetProps } from "./BottomSheet";
+export { default as BottomSheet } from "./BottomSheet";
+export { BottomSheetParts } from "./BottomSheet.parts";
+export type { Props as BottomSheetProps } from "./BottomSheet";

package/dist/src/BottomSheet/index.js

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from "./BottomSheet";
+export { BottomSheetParts } from "./BottomSheet.parts";

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

@@ -1,13 +1,13 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    decorators: ((storyFn: any) => React.JSX.Element)[];
-    parameters: {
-        chromatic: {
-            delay: number;
-        };
-    };
-};
-export default _default;
-export declare const WithAHiddenCloseButton: () => React.JSX.Element;
-export declare const WithButtons: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => React.JSX.Element)[];
+    parameters: {
+        chromatic: {
+            delay: number;
+        };
+    };
+};
+export default _default;
+export declare const WithAHiddenCloseButton: () => React.JSX.Element;
+export declare const WithButtons: () => React.JSX.Element;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Button, PrimaryButton, QuietButton } from "../../Button";
+import { Placeholder } from "../../utils/story/placeholder";
+import BottomSheet from "../BottomSheet";
+export default {
+    title: "Components/BottomSheet/Actions",
+    decorators: [(storyFn) => React.createElement("div", { style: { width: "800px", height: "800px" } }, storyFn())],
+    parameters: {
+        chromatic: { delay: 3000 },
+    },
+};
+export const WithAHiddenCloseButton = () => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
+        React.createElement(BottomSheet, { title: "User Feedback", helpText: "Please provide your feedback to help us improve our services", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: ({ onClose }) => React.createElement(PrimaryButton, { onClick: onClose }, "Submit"), hideCloseButton: true },
+            React.createElement(Placeholder, null))));
+};
+export const WithButtons = () => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
+        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: () => React.createElement(QuietButton, null, "Next"), secondaryAction: () => React.createElement(QuietButton, null, "Previous") },
+            React.createElement(Placeholder, null))));
+};

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

@@ -1,13 +1,13 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    decorators: ((storyFn: any) => React.JSX.Element)[];
-    parameters: {
-        chromatic: {
-            delay: number;
-        };
-    };
-};
-export default _default;
-export declare const WithHelpText: () => React.JSX.Element;
-export declare const WithHelpContent: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => React.JSX.Element)[];
+    parameters: {
+        chromatic: {
+            delay: number;
+        };
+    };
+};
+export default _default;
+export declare const WithHelpText: () => React.JSX.Element;
+export declare const WithHelpContent: () => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { Button } from "../../Button";
+import { Link } from "../../Link";
+import { Text } from "../../Type";
+import { Placeholder } from "../../utils/story/placeholder";
+import BottomSheet from "../BottomSheet";
+export default {
+    title: "Components/BottomSheet/Content",
+    decorators: [(storyFn) => React.createElement("div", { style: { width: "800px", height: "800px" } }, storyFn())],
+    parameters: {
+        chromatic: { delay: 3000 },
+    },
+};
+export const WithHelpText = () => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
+        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false) },
+            React.createElement(Placeholder, null))));
+};
+export const WithHelpContent = () => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
+        React.createElement(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: React.createElement(Text, null,
+                "Update your profile information to access exclusive features. ",
+                React.createElement(Link, { href: "#learn-more" }, "Learn more")), isOpen: isOpen, onClose: () => setIsOpen(false) },
+            React.createElement(Placeholder, null))));
+};

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

@@ -1,20 +1,20 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    decorators: ((storyFn: any) => React.JSX.Element)[];
-    parameters: {
-        chromatic: {
-            delay: number;
-        };
-    };
-};
-export default _default;
-export declare const WithCustomWidths: () => React.JSX.Element;
-export declare const WithAnApplicationFrame: {
-    (): React.JSX.Element;
-    parameters: {
-        layout: string;
-    };
-};
-export declare const DisableCloseOnOverlayClick: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => React.JSX.Element)[];
+    parameters: {
+        chromatic: {
+            delay: number;
+        };
+    };
+};
+export default _default;
+export declare const WithCustomWidths: () => React.JSX.Element;
+export declare const WithAnApplicationFrame: {
+    (): React.JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export declare const DisableCloseOnOverlayClick: () => React.JSX.Element;
+export declare const AdvancedUsage: () => React.JSX.Element;