@envive-ai/react-toolkit 0.2.13 → 0.3.0

package/src/components/ButtonBase/types.ts

@@ -1,4 +1,3 @@
-import { TestProps } from '@envive-ai/react-hooks/types';
 import { ButtonHTMLAttributes, CSSProperties } from 'react';
 
 export interface ButtonHoverStyles extends CSSProperties {
@@ -6,17 +5,18 @@ export interface ButtonHoverStyles extends CSSProperties {
   color?: string;
 }
 
-export interface ButtonBaseProps extends TestProps {
+export interface ButtonBaseProps {
   type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   isDisabled?: boolean;
   dataAttributes?: Record<string, string>;
   buttonClass?: string;
   text: string;
   textClass?: string;
-  icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  icon?: React.ReactNode;
   iconClass?: string;
   onClick?: () => void;
   disablePadding?: boolean;
+  dataTestId?: string;
 }
 
 export enum ButtonBaseOverrides {

package/src/components/ModalSheet/common/closeIcon.tsx

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
 import classNames from 'classnames';
-import { GrFormClose } from 'react-icons/gr';
-import { IconContext } from 'react-icons/lib';
+import IconCloseVariant from '@envive-ai/react-icons/IconCloseVariant';
 import { ModalSheetCloseIconProps } from '../types';
 
 const closeIconVariantMapping = {
@@ -21,7 +19,7 @@ const closeIconVariantMapping = {
 
 export const ModalSheetCloseIcon = ({
   closeIconVariant = 'tertiary',
-  closeIcon = <GrFormClose />,
+  closeIcon = <IconCloseVariant />,
   iconSize = '20px',
   closeModal,
 }: ModalSheetCloseIconProps) => {
@@ -31,14 +29,13 @@ export const ModalSheetCloseIcon = ({
     ...closeIconVariantMapping[closeIconVariant],
   });
 
-  const closeIconContextValue = useMemo(() => ({ size: iconSize }), [iconSize]);
   return (
     <button
       type="button"
       className={closeIconClassNames}
       onClick={closeModal}
     >
-      <IconContext.Provider value={closeIconContextValue}>{closeIcon}</IconContext.Provider>
+      {closeIcon || <IconCloseVariant style={{ width: iconSize, height: iconSize }} />}
     </button>
   );
 };

package/src/components/ProductCard/ProductCard.tsx

@@ -3,7 +3,6 @@ import { MdStar } from 'react-icons/md';
 import Logger from 'src/logging/logger';
 import { Typography } from 'src/components/Typography';
 import { formatPrice } from 'src/util/formatPrice';
-import { TestProps } from '@envive-ai/react-hooks/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
@@ -97,7 +96,7 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
   );
 };
 
-interface ProductCardProps extends TestProps {
+interface ProductCardProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
@@ -114,6 +113,7 @@ interface ProductCardProps extends TestProps {
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
   onClick?: () => void;
+  dataTestId?: string;
 }
 
 export const ProductCard = ({

package/src/components/SearchFilter/types.ts

@@ -8,6 +8,8 @@ import {
 export interface SearchFilterItem extends SearchFilterItemDatum {
   filterId: string;
   filterItemId: string;
+  displayName: string;
+  isSelected: boolean;
 }
 
 export interface SearchFilterItemProps {

package/src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx

@@ -19,7 +19,7 @@ export const SearchResultsFilterButton = ({
   return (
     <ButtonBase
       onClick={openFilter}
-      icon={SettingsVariant}
+      icon={<SettingsVariant />}
       iconClass="spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center"
       text={filterButtonText}
       textClass="spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block"

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
-import SettingsVariant from '@envive-ai/react-icons/src/SettingsVariant.js';
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
 import { ButtonBase } from '../ButtonBase';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
@@ -69,7 +69,7 @@ export const SearchResultsFilter = ({
       />
       <ButtonBase
         onClick={openFilter}
-        icon={SettingsVariant}
+        icon={<SettingsVariant />}
         iconClass="spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center"
         text={filterButtonText}
         textClass="spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block"

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
-import { TestProps } from '@envive-ai/react-hooks/types';
 import type { SuggestionButtonVariant } from './types';
 import { ButtonBase } from '../ButtonBase/ButtonBase';
 
@@ -163,7 +162,16 @@ const variantClassMap = new Map<SuggestionButtonVariant, string[]>([
   ],
 ]);
 
-interface SuggestionButtonProps extends TestProps {
+// Choose icon based on variant to match legacy exactly
+const Icon = ({ isAnswer, variant }: { isAnswer: boolean; variant: SuggestionButtonVariant }) => {
+  if (isAnswer) return undefined;
+  if (variant === 'transparentDark') {
+    return <OutlinedStar />;
+  }
+  return <FourPointStar />;
+};
+
+interface SuggestionButtonProps {
   variant: SuggestionButtonVariant;
   hoverVariant: SuggestionButtonVariant;
   isDisabled: boolean;
@@ -173,6 +181,7 @@ interface SuggestionButtonProps extends TestProps {
   isAnswer?: boolean;
   dataAttributes?: Record<string, string>;
   onClick: () => void;
+  dataTestId?: string;
 }
 
 const borderedVariants = [
@@ -247,15 +256,6 @@ export const SuggestionButton = ({
 
   const buttonClass = `${buttonClassName} ${variantClasses.join(' ')}`;
 
-  // Choose icon based on variant to match legacy exactly
-  const getIcon = () => {
-    if (isAnswer) return undefined;
-    if (variant === 'transparentDark') {
-      return OutlinedStar;
-    }
-    return FourPointStar;
-  };
-
   return (
     <ButtonBase
       text={content}
@@ -263,7 +263,12 @@ export const SuggestionButton = ({
       dataTestId={dataTestId}
       isDisabled={isDisabled}
       // we may want to support custom icons in the future
-      icon={getIcon()}
+      icon={
+        <Icon
+          isAnswer={isAnswer}
+          variant={variant}
+        />
+      }
       iconClass={isAnswer ? undefined : iconClass}
       textClass={`${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`}
       buttonClass={buttonClass}

package/src/stories/ButtonBase.stories.tsx

@@ -42,7 +42,7 @@ export const Primary: Story = {
 export const WithIcon: Story = {
   args: {
     text: 'Settings',
-    icon: SettingsVariant,
+    icon: <SettingsVariant />,
   },
 };
 

package/src/stories/ProductCardSkeleton.stories.tsx

@@ -1,11 +1,10 @@
-import { ProductCardSkeleton } from '@envive-ai/react-toolkit/ProductCard';
-import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProductCardSkeleton } from '../components/ProductCard/ProductCardSkeleton';
+import { ProductCardSkeletonProps } from '../components/ProductCard/types';
 
-const meta: Meta<typeof ProductCardSkeleton> = {
-  title: 'Common/ProductCardSkeleton',
-  component: ProductCardSkeleton,
+const meta = {
+  title: 'Components/ProductCard/ProductCardSkeleton',
+  component: ProductCardSkeleton as any as any,
   parameters: {
     layout: 'centered',
   },
@@ -13,36 +12,67 @@ const meta: Meta<typeof ProductCardSkeleton> = {
   argTypes: {
     layoutVariant: {
       control: 'select',
-      options: Object.values(productGridVariantClasses),
+      options: ['normal', 'tall', 'square'],
+      description: 'The layout variant of the product card.',
     },
     aspectRatio: {
       control: 'select',
-      options: Object.values(productGridVariantClasses),
+      options: ['3:4', 'square', 'none'],
+      description: 'The aspect ratio of the product image.',
+    },
+    growWithContainer: {
+      control: 'boolean',
+      description: 'Whether the skeleton should grow to fit its container.',
     },
   },
-};
+} satisfies Meta<ProductCardSkeletonProps>;
 
 export default meta;
-type Story = StoryObj<typeof ProductCardSkeleton>;
+type Story = StoryObj<Meta<ProductCardSkeletonProps>>;
 
 export const Default: Story = {
   args: {
     layoutVariant: 'normal',
-    aspectRatio: 'none',
-    growWithContainer: true,
+    aspectRatio: '3:4',
+    growWithContainer: false,
+  },
+};
+
+export const TallLayout: Story = {
+  args: {
+    layoutVariant: 'tall',
+    aspectRatio: '3:4',
+    growWithContainer: false,
+  },
+};
+
+export const SquareLayout: Story = {
+  args: {
+    layoutVariant: 'square',
+    aspectRatio: 'square',
+    growWithContainer: false,
   },
 };
 
-export const MinimalLayout: Story = {
+export const SquareAspectRatio: Story = {
   args: {
-    ...Default.args,
     layoutVariant: 'normal',
+    aspectRatio: 'square',
+    growWithContainer: false,
   },
 };
 
-export const AspectRatio3x4: Story = {
+export const GrowWithContainer: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '300px', height: '450px', border: '1px dashed #ccc', padding: '10px' }}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
-    ...Default.args,
+    layoutVariant: 'normal',
     aspectRatio: '3:4',
+    growWithContainer: true,
   },
 };

package/src/stories/SearchResultsFilter.stories.tsx

@@ -1,9 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
 import {
   SearchResultsFilter,
   searchFilterSidebarVariantClasses,
-} from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+} from 'src/components/SearchResultsFilterSidebar';
 
 const mockSearchFilters: SearchFilterDatum[] = [
   {

package/dist/ButtonBase-C9fn-c5h.js

@@ -1 +0,0 @@
-export {  };

package/dist/ModalSheet-BuCtRDnQ.cjs

@@ -1,308 +0,0 @@
-const require_chunk = require('./chunk-CbDLau6x.cjs');
-const require_AnimatedChevron = require('./AnimatedChevron-BKQrUKb5.cjs');
-let react = require("react");
-let framer_motion = require("framer-motion");
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_hooks_IsSmallScreen = require("@envive-ai/react-hooks/hooks/IsSmallScreen");
-
-//#region src/components/ModalSheet/mobile/mobileHeader.tsx
-const modalSheetVariants$1 = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
-	const animationKey = (0, framer_motion.useMotionValue)(-1);
-	const headerClassName = (0, classnames.default)({
-		"spiffy-modal-sheet-header": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-items-center": true,
-		"spiffy-tw-justify-between": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-pt-[16px]": true,
-		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
-		...modalSheetVariants$1[headerVariant]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
-		className: headerClassName,
-		onTouchStart: handleHeaderClick,
-		onMouseDown: handleHeaderClick,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedChevron.AnimatedChevron, {
-			animationKey,
-			chevronColor
-		}), headerContent]
-	});
-};
-
-//#endregion
-//#region src/components/ModalSheet/mobile/index.tsx
-const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
-	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
-	const [bottom, setBottom] = (0, react.useState)(isOpen ? 0 : 0 - mobileFullHeight);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(isOpen ? 1 : 0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [mobileFullHeight, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-bg-black/30": true,
-		"spiffy-tw-z-[100]": true
-	});
-	const modalClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true,
-		"spiffy-tw-rounded-t-[16px]": true,
-		"spiffy-tw-h-[89%]": true,
-		"spiffy-tw-max-h-[89%]": true
-	});
-	const contentClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true
-	});
-	const headerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-[0px]": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-[0px]": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				bottom,
-				display: isHidden
-			},
-			animate: {
-				bottom,
-				display: isHidden
-			},
-			exit: {
-				bottom,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobileHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							handleHeaderClick: closeModal,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-//#region src/components/ModalSheet/desktop/desktopHeader.tsx
-const modalSheetVariants = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, classnames.default)({
-			"spiffy-modal-sheet-header": true,
-			"spiffy-tw-flex": true,
-			"spiffy-tw-items-center": true,
-			"spiffy-tw-justify-between": true,
-			"spiffy-tw-w-full": true,
-			...modalSheetVariants[headerVariant]
-		}),
-		children: headerContent
-	});
-};
-
-//#endregion
-//#region src/components/ModalSheet/desktop/index.tsx
-const ModalSheetDesktop = ({ children, isOpen, closeModal, desktopWidth = 512, animationDuration, headerProps, footerProps, showOverlay = false }) => {
-	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
-	const [right, setRight] = (0, react.useState)(isOpen ? 0 : 0 - desktopWidth);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setRight(isOpen ? 0 : 0 - desktopWidth);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [desktopWidth, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-z-[2147483647]": true,
-		"spiffy-tw-bg-black/30": showOverlay
-	});
-	const modalClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-max-h-full": true,
-		"spiffy-tw-h-screen": true,
-		"spiffy-tw-w-[512px]": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true
-	});
-	const contentClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-overflow-x-hidden": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-h-full": true,
-		"spiffy-tw-w-full": true
-	});
-	const headerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-0": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-0": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		initial: {
-			opacity: 0,
-			display: "none"
-		},
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				right,
-				display: isHidden
-			},
-			animate: {
-				right,
-				display: isHidden
-			},
-			exit: {
-				right,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			style: { width: desktopWidth },
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktopHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-//#region src/components/ModalSheet/ModalSheet.tsx
-const ANIMATION_DURATION = .3;
-const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATION_DURATION, desktopWidth = 512, headerProps, footerProps }) => {
-	return (0, __envive_ai_react_hooks_hooks_IsSmallScreen.useIsSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobile, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktop, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	});
-};
-
-//#endregion
-Object.defineProperty(exports, 'ModalSheet', {
-  enumerable: true,
-  get: function () {
-    return ModalSheet;
-  }
-});