@envive-ai/react-toolkit 0.1.10 → 0.1.12

package/dist/Text/index.d.cts

@@ -1,5 +1,5 @@
 import { HeadlineVariantMap, TextStyleVariantMap, TextVariantMap, getVariantPlaceholderClassNames } from "../textVariantClasses-B0gNjzl4.cjs";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/Text/types.d.ts
 declare enum ExpandableTextOverrides {
@@ -37,6 +37,6 @@ declare const Text: ({
   testId,
   type,
   variant
-}: TextProps) => react_jsx_runtime14.JSX.Element;
+}: TextProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ExpandableTextOverrides, HeadlineProps, HeadlineVariant, HeadlineVariantMap, Text, TextStyleVariantMap, TextType, TextVariant, TextVariantMap, getVariantPlaceholderClassNames };

package/dist/Text/index.d.ts

@@ -1,5 +1,5 @@
-import { HeadlineVariantMap, TextStyleVariantMap, TextVariantMap, getVariantPlaceholderClassNames } from "../textVariantClasses-ypYGLq0h.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { HeadlineVariantMap, TextStyleVariantMap, TextVariantMap, getVariantPlaceholderClassNames } from "../textVariantClasses-kyZtL8F5.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Text/types.d.ts
 declare enum ExpandableTextOverrides {
@@ -37,6 +37,6 @@ declare const Text: ({
   testId,
   type,
   variant
-}: TextProps) => react_jsx_runtime11.JSX.Element;
+}: TextProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ExpandableTextOverrides, HeadlineProps, HeadlineVariant, HeadlineVariantMap, Text, TextStyleVariantMap, TextType, TextVariant, TextVariantMap, getVariantPlaceholderClassNames };

package/dist/TextInput/index.cjs

@@ -1,4 +1,4 @@
 require('../textVariantClasses-Dgz7Zaql.cjs');
-const require_TextInput = require('../TextInput-BJrdkZsM.cjs');
+const require_TextInput = require('../TextInput-B3dTeD3q.cjs');
 
 exports.TextInput = require_TextInput.TextInput;

package/dist/TextInput/index.d.ts

@@ -1,4 +1,4 @@
-import { TextStyleVariantMap } from "../textVariantClasses-ypYGLq0h.js";
+import { TextStyleVariantMap } from "../textVariantClasses-kyZtL8F5.js";
 import React from "react";
 
 //#region src/components/TextInput/TextInput.d.ts

package/dist/TextInput/index.js

@@ -1,4 +1,4 @@
 import "../textVariantClasses-D77TGEy1.js";
-import { TextInput } from "../TextInput-DIjjsSMg.js";
+import { TextInput } from "../TextInput-DoM41M53.js";
 
 export { TextInput };

package/dist/ToggleButton/index.cjs

@@ -0,0 +1,6 @@
+require('../textVariantClasses-Dgz7Zaql.cjs');
+require('../Text-MQjxqgZZ.cjs');
+require('../Text-C8t_iEj6.cjs');
+const require_ToggleButton = require('../ToggleButton-CK_vkMvt.cjs');
+
+exports.ToggleButton = require_ToggleButton.ToggleButton;

package/dist/ToggleButton/index.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime27 from "react/jsx-runtime";
+
+//#region src/components/ToggleButton/ToggleButton.d.ts
+type ToggleButtonProps = {
+  isSelected: boolean;
+  variant: ToggleButtonVariant;
+  onClick: () => void;
+  label: string;
+  buttonClassName?: string;
+  labelClassName?: string;
+  secondaryLabel?: string;
+  secondaryLabelClassName?: string;
+  icon?: React.ReactNode;
+  iconClassName?: string;
+};
+type ToggleButtonVariant = 'default';
+declare const ToggleButton: ({
+  isSelected,
+  onClick,
+  label,
+  buttonClassName,
+  labelClassName,
+  secondaryLabel,
+  secondaryLabelClassName,
+  icon,
+  iconClassName,
+  variant
+}: ToggleButtonProps) => react_jsx_runtime27.JSX.Element;
+//#endregion
+export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ToggleButton/ToggleButton.d.ts
+type ToggleButtonProps = {
+  isSelected: boolean;
+  variant: ToggleButtonVariant;
+  onClick: () => void;
+  label: string;
+  buttonClassName?: string;
+  labelClassName?: string;
+  secondaryLabel?: string;
+  secondaryLabelClassName?: string;
+  icon?: React.ReactNode;
+  iconClassName?: string;
+};
+type ToggleButtonVariant = 'default';
+declare const ToggleButton: ({
+  isSelected,
+  onClick,
+  label,
+  buttonClassName,
+  labelClassName,
+  secondaryLabel,
+  secondaryLabelClassName,
+  icon,
+  iconClassName,
+  variant
+}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.js

@@ -0,0 +1,6 @@
+import "../textVariantClasses-D77TGEy1.js";
+import "../Text-Bod4OMPk.js";
+import "../Text-BMsncrpY.js";
+import { ToggleButton } from "../ToggleButton-GIVd2-Z4.js";
+
+export { ToggleButton };

package/dist/ToggleButton-CK_vkMvt.cjs

@@ -0,0 +1,68 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-MQjxqgZZ.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/ToggleButton/ToggleButton.tsx
+const toggleButtonVariants = { default: {
+	button: ({ isSelected }) => (0, classnames.default)({
+		"spiffy-tw-bg-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-border-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-light]": isSelected,
+		"hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]": true,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-primary]": isSelected,
+		"spiffy-tw-bg-[--spiffy-colors-background-light]": !isSelected,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": !isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": !isSelected
+	}),
+	label: () => "",
+	secondaryLabel: ({ isSelected }) => (0, classnames.default)({
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected
+	})
+} };
+const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassName, secondaryLabel, secondaryLabelClassName, icon, iconClassName, variant }) => {
+	const buttonClassNames = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-[4px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-py-[8px]": true,
+		"spiffy-tw-px-[12px]": true,
+		"spiffy-tw-rounded-[200px]": true,
+		"spiffy-tw-border": true
+	}, toggleButtonVariants?.[variant]?.button({ isSelected }), buttonClassName);
+	const labelClassNames = (0, classnames.default)({}, toggleButtonVariants?.[variant]?.label({ isSelected }), labelClassName);
+	const secondaryLabelClassNames = (0, classnames.default)({}, toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }), secondaryLabelClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		className: buttonClassNames,
+		onClick,
+		type: "button",
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				variant: "body3",
+				className: labelClassNames,
+				children: label
+			}),
+			secondaryLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				variant: "body4",
+				className: secondaryLabelClassNames,
+				children: secondaryLabel
+			})
+		]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'ToggleButton', {
+  enumerable: true,
+  get: function () {
+    return ToggleButton;
+  }
+});

package/dist/ToggleButton-GIVd2-Z4.js

@@ -0,0 +1,60 @@
+import { Text } from "./Text-Bod4OMPk.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ToggleButton/ToggleButton.tsx
+const toggleButtonVariants = { default: {
+	button: ({ isSelected }) => classNames({
+		"spiffy-tw-bg-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-border-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-light]": isSelected,
+		"hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]": true,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-primary]": isSelected,
+		"spiffy-tw-bg-[--spiffy-colors-background-light]": !isSelected,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": !isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": !isSelected
+	}),
+	label: () => "",
+	secondaryLabel: ({ isSelected }) => classNames({
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected
+	})
+} };
+const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassName, secondaryLabel, secondaryLabelClassName, icon, iconClassName, variant }) => {
+	const buttonClassNames = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-[4px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-py-[8px]": true,
+		"spiffy-tw-px-[12px]": true,
+		"spiffy-tw-rounded-[200px]": true,
+		"spiffy-tw-border": true
+	}, toggleButtonVariants?.[variant]?.button({ isSelected }), buttonClassName);
+	const labelClassNames = classNames({}, toggleButtonVariants?.[variant]?.label({ isSelected }), labelClassName);
+	const secondaryLabelClassNames = classNames({}, toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }), secondaryLabelClassName);
+	return /* @__PURE__ */ jsxs("button", {
+		className: buttonClassNames,
+		onClick,
+		type: "button",
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "body3",
+				className: labelClassNames,
+				children: label
+			}),
+			secondaryLabel && /* @__PURE__ */ jsx(Text, {
+				variant: "body4",
+				className: secondaryLabelClassNames,
+				children: secondaryLabel
+			})
+		]
+	});
+};
+
+//#endregion
+export { ToggleButton };

package/dist/{index-DV2K-9lE.d.cts → index-B8l3muO3.d.ts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
 type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
-type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+type CloseIconVariant$1 = 'light' | 'tertiary' | 'dark';
 //#endregion
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts
 interface SearchFilterSidebarVariantClasses {
@@ -17,7 +17,7 @@ interface SearchFilterSidebarVariantClasses {
   appliedFilterBackgroundClasses: string;
   applyFiltersUnchangedClasses: string;
   applyFiltersChangedClasses: string;
-  filterCloseIconVariant: CloseIconVariant;
+  filterCloseIconVariant: CloseIconVariant$1;
 }
 declare const searchFilterSidebarVariantClasses: Record<SearchFilterSidebarVariant, SearchFilterSidebarVariantClasses>;
 //#endregion
@@ -42,6 +42,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime23.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-agU5rfIs.d.ts → index-BMt66uqr.d.cts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
 type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
-type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+type CloseIconVariant$1 = 'light' | 'tertiary' | 'dark';
 //#endregion
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts
 interface SearchFilterSidebarVariantClasses {
@@ -17,7 +17,7 @@ interface SearchFilterSidebarVariantClasses {
   appliedFilterBackgroundClasses: string;
   applyFiltersUnchangedClasses: string;
   applyFiltersChangedClasses: string;
-  filterCloseIconVariant: CloseIconVariant;
+  filterCloseIconVariant: CloseIconVariant$1;
 }
 declare const searchFilterSidebarVariantClasses: Record<SearchFilterSidebarVariant, SearchFilterSidebarVariantClasses>;
 //#endregion
@@ -42,6 +42,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime14.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime10.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-b4yAASuy.d.cts → index-CFH3KUVw.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime18.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime6.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime18.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime6.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -312,7 +312,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime18.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-uU3sIiRx.d.ts → index-H_9LhS_1.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/types.d.ts
 type SearchInputVariant = 'standard';
@@ -31,6 +31,6 @@ declare const SearchInputForm: ({
   onSearchInputChange,
   onSearchSubmit,
   searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime15.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{index-DggZTKvc.d.ts → index-Vck3pox6.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime21.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime16.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime21.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime16.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -312,7 +312,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime21.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime16.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-Bpjv4lP2.d.cts → index-h-QwQNnu.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/types.d.ts
 type SearchInputVariant = 'standard';
@@ -31,6 +31,6 @@ declare const SearchInputForm: ({
   onSearchInputChange,
   onSearchSubmit,
   searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime2.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{searchFilterSidebarVariants-BnIcOVWR.js → searchFilterSidebarVariants-CI782ylo.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-CYZ8f_gj.js";
+import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-DVZ7wRlb.cjs → searchFilterSidebarVariants-DFfOTqjc.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-CJTKbJsm.cjs');
+const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -23,11 +23,12 @@
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "typecheck": "tsc"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.5",
     "@envive-ai/react-icons": "0.1.1",
+    "@envive-ai/react-hooks": "^0.1.8",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
@@ -75,6 +76,10 @@
       "import": "./dist/ImageWithFallback/index.js",
       "require": "./dist/ImageWithFallback/index.cjs"
     },
+    "./ModalSheet": {
+      "import": "./dist/ModalSheet/index.js",
+      "require": "./dist/ModalSheet/index.cjs"
+    },
     "./ProductCard": {
       "import": "./dist/ProductCard/index.js",
       "require": "./dist/ProductCard/index.cjs"
@@ -83,6 +88,14 @@
       "import": "./dist/ProductGrid/index.js",
       "require": "./dist/ProductGrid/index.cjs"
     },
+    "./RadioButton": {
+      "import": "./dist/RadioButton/index.js",
+      "require": "./dist/RadioButton/index.cjs"
+    },
+    "./RadioButtonGroup": {
+      "import": "./dist/RadioButtonGroup/index.js",
+      "require": "./dist/RadioButtonGroup/index.cjs"
+    },
     "./SearchAutocomplete": {
       "import": "./dist/SearchAutocomplete/index.js",
       "require": "./dist/SearchAutocomplete/index.cjs"
@@ -135,6 +148,10 @@
       "import": "./dist/TextInput/index.js",
       "require": "./dist/TextInput/index.cjs"
     },
+    "./ToggleButton": {
+      "import": "./dist/ToggleButton/index.js",
+      "require": "./dist/ToggleButton/index.cjs"
+    },
     "./package.json": "./package.json"
   }
 }

package/src/components/AnimatedChevron/AnimatedChevron.tsx

@@ -0,0 +1,37 @@
+import { MotionValue, motion, useTransform } from 'framer-motion';
+import { FC } from 'react';
+
+interface AnimatedChevronProps {
+  animationKey: MotionValue;
+  chevronColor: string;
+}
+
+export const AnimatedChevron: FC<AnimatedChevronProps> = ({ animationKey, chevronColor }) => {
+  const leftRotation = useTransform(animationKey, [300, 0], [-12, 0]);
+  const rightRotation = useTransform(animationKey, [300, 0], [12, 0]);
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <motion.div
+        style={{
+          x: 1,
+          width: '25px',
+          height: '4px',
+          background: chevronColor,
+          borderRadius: '8px',
+          rotate: leftRotation,
+        }}
+      />
+      <motion.div
+        style={{
+          x: -1,
+          width: '25px',
+          height: '4px',
+          background: chevronColor,
+          borderRadius: '8px',
+          rotate: rightRotation,
+        }}
+      />
+    </div>
+  );
+};

package/src/components/ModalSheet/ModalSheet.tsx

@@ -0,0 +1,42 @@
+import { ModalSheetMobile } from './mobile';
+import { ModalSheetDesktop } from './desktop';
+import { ModalSheetProps } from './types';
+import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks/IsSmallScreen';
+
+const ANIMATION_DURATION = 0.3;
+
+export const ModalSheet = ({
+  children,
+  isOpen,
+  closeModal,
+  animationDuration = ANIMATION_DURATION,
+  desktopWidth = 512,
+  headerProps,
+  footerProps,
+}: ModalSheetProps) => {
+  const isSmallScreen = useIsSmallScreen();
+
+  return isSmallScreen ? (
+    <ModalSheetMobile
+      isOpen={isOpen}
+      closeModal={closeModal}
+      desktopWidth={desktopWidth}
+      animationDuration={animationDuration}
+      headerProps={headerProps}
+      footerProps={footerProps}
+    >
+      {children}
+    </ModalSheetMobile>
+  ) : (
+    <ModalSheetDesktop
+      isOpen={isOpen}
+      closeModal={closeModal}
+      desktopWidth={desktopWidth}
+      animationDuration={animationDuration}
+      headerProps={headerProps}
+      footerProps={footerProps}
+    >
+      {children}
+    </ModalSheetDesktop>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import { GrFormClose } from 'react-icons/gr';
+import { IconContext } from 'react-icons/lib';
+import { ModalSheetCloseIconProps } from '../types';
+
+const closeIconVariantMapping = {
+  light: {
+    'spiffy-tw-bg-[--spiffy-colors-background-light]': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': true,
+  },
+  dark: {
+    'spiffy-tw-bg-[--spiffy-colors-background-dark]': true,
+    'spiffy-tw-text-[--spiffy-colors-background-primary]': true,
+  },
+  tertiary: {
+    'spiffy-tw-text-[--spiffy-colors-background-primary]': true,
+    'spiffy-tw-bg-[--spiffy-colors-background-tertiary]': true,
+  },
+};
+
+export const ModalSheetCloseIcon = ({
+  closeIconVariant = 'tertiary',
+  closeIcon = <GrFormClose />,
+  iconSize = '20px',
+  closeModal,
+}: ModalSheetCloseIconProps) => {
+  const closeIconClassNames = classNames({
+    'spiffy-modal-sheet-close-icon': true,
+    'spiffy-tw-rounded-[99px]': true,
+    ...closeIconVariantMapping[closeIconVariant],
+  });
+
+  const closeIconContextValue = useMemo(() => ({ size: iconSize }), [iconSize]);
+  return (
+    <div className={closeIconClassNames} onClick={closeModal}>
+      <IconContext.Provider value={closeIconContextValue}>{closeIcon}</IconContext.Provider>
+    </div>
+  );
+};

package/src/components/ModalSheet/desktop/desktopHeader.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import { ModalSheetHeaderProps } from '../types';
+
+const modalSheetVariants = {
+  primary: {
+    'spiffy-tw-bg-[--spiffy-colors-background-primary]': true,
+    'spiffy-tw-text-[--spiffy-colors-text-light]': true,
+  },
+};
+
+export const ModalSheetDesktopHeader = ({
+  headerVariant = 'primary',
+  headerContent,
+}: ModalSheetHeaderProps) => {
+  const headerStyles = classNames({
+    '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],
+  });
+  return <div className={headerStyles}>{headerContent}</div>;
+};