@envive-ai/react-toolkit 0.1.9 → 0.1.11

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-BKRR_-69.js";
+
+export { ToggleButton };

package/dist/ToggleButton-BKRR_-69.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/ToggleButton-D90UO4qv.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/{index-vrOLXtJO.d.ts → index-1x_hMlEf.d.cts}

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime5 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";
 
 //#region src/util/trim.d.ts
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime19.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime5.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime19.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime5.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -312,7 +312,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime19.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-ozZ5JSZp.d.cts → index-CgjZdKpL.d.cts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime20 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_runtime11.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-CC5ru80z.d.ts → index-Cl4d_pDw.d.ts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime25 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_runtime1.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 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_runtime16.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{index-C5sr5-A0.d.cts → index-QMTPxKA9.d.ts}

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

package/dist/{index-BkxuyRJ6.d.cts → index-gfYBM7Ul.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime5.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{searchFilterSidebarVariants-B8nMp970.js → searchFilterSidebarVariants-CDFCHVeZ.js}

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

package/dist/{searchFilterSidebarVariants-BMZs5kyL.cjs → searchFilterSidebarVariants-CtmuwSBQ.cjs}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -17,15 +17,18 @@
   "files": [
     "dist",
     "src",
-    "!**/*.tsbuildinfo"
+    "!**/*.tsbuildinfo",
+    "tailwind-preset.js"
   ],
   "scripts": {
     "build": "tsdown",
-    "prepublish": "npm run build"
+    "build:watch": "tsdown --watch",
+    "prepublish": "npm run build",
+    "typecheck": "tsc"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.4",
     "@envive-ai/react-icons": "0.1.1",
+    "@envive-ai/react-hooks": "^0.1.6",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
@@ -37,7 +40,10 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
     "typescript": "~5.8.3"
   },
@@ -70,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"
@@ -78,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"
@@ -114,6 +132,10 @@
       "import": "./dist/Spinner/index.js",
       "require": "./dist/Spinner/index.cjs"
     },
+    "./Styles": {
+      "import": "./dist/Styles/index.js",
+      "require": "./dist/Styles/index.cjs"
+    },
     "./SuggestionButton": {
       "import": "./dist/SuggestionButton/index.js",
       "require": "./dist/SuggestionButton/index.cjs"
@@ -126,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';
+
+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/common/enviveWatermark.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
+import { WatermarkLogo } from 'src/assets';
+import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
+
+export const EnviveWatermark = () => {
+  const { floatingChatConfig } = useAtomValue(orgUIConfigAtom);
+  if (!floatingChatConfig.enableWatermark) {
+    return null;
+  }
+  const wrapperClasses = classNames({
+    'spiffy-watermark-wrapper': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-align-middle': true,
+    'spiffy-tw-pt-[4px]': true,
+    'spiffy-tw-justify-center': true,
+  });
+  const watermarkClasses = classNames({
+    'spiffy-watermark-logo': true,
+    'spiffy-tw-py-[4px]': true,
+    'spiffy-tw-px-[8px]': true,
+  });
+  return (
+    <a className={wrapperClasses} target="_blank" rel="noreferrer" href="https://www.envive.ai/">
+      <div title="Powered by Envive" className={watermarkClasses}>
+        <WatermarkLogo />
+      </div>
+    </a>
+  );
+};

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>;
+};