@envive-ai/react-widgets-v3 0.3.9 → 0.3.11

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
-const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
+const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_SocialProofWidget = require('../SocialProofWidget/SocialProofWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime10.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.js

@@ -1,7 +1,7 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
 import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
+import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
 import { SocialProofWidgetWithBaseWidget } from "../SocialProofWidget/SocialProofWidget.js";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";

package/dist/widgets/SocialProofWidget/SocialProofWidget.cjs

@@ -68,14 +68,16 @@ const SocialProofWidgetHandler = (props) => {
 	const handlePrimaryButtonClick = (0, react.useCallback)((text) => {
 		onTypedMessageSubmitted({
 			query: text,
-			userTyped: false
+			userTyped: false,
+			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
 	}, [onTypedMessageSubmitted, openChat]);
 	const handleSecondaryButtonClick = (0, react.useCallback)((text) => {
 		onTypedMessageSubmitted({
 			query: text,
-			userTyped: false
+			userTyped: false,
+			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON
 		});
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
 	}, [onTypedMessageSubmitted, openChat]);

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime8.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime8.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofWidget/SocialProofWidget.js

@@ -67,14 +67,16 @@ const SocialProofWidgetHandler = (props) => {
 	const handlePrimaryButtonClick = useCallback((text) => {
 		onTypedMessageSubmitted({
 			query: text,
-			userTyped: false
+			userTyped: false,
+			displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON
 		});
 		openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
 	}, [onTypedMessageSubmitted, openChat]);
 	const handleSecondaryButtonClick = useCallback((text) => {
 		onTypedMessageSubmitted({
 			query: text,
-			userTyped: false
+			userTyped: false,
+			displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON
 		});
 		openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
 	}, [onTypedMessageSubmitted, openChat]);

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.cjs

@@ -58,7 +58,8 @@ const TitledPromptCarouselWidgetHandler = (props) => {
 		handleButtonClick: (0, react.useCallback)((text) => {
 			onTypedMessageSubmitted({
 				query: text,
-				userTyped: false
+				userTyped: false,
+				displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL
 			});
 			openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
 		}, [onTypedMessageSubmitted, openChat]),

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime8.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.js

@@ -57,7 +57,8 @@ const TitledPromptCarouselWidgetHandler = (props) => {
 		handleButtonClick: useCallback((text) => {
 			onTypedMessageSubmitted({
 				query: text,
-				userTyped: false
+				userTyped: false,
+				displayLocation: ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL
 			});
 			openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
 		}, [onTypedMessageSubmitted, openChat]),

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
-const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
+const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
 const require_TypingAnimationWidget = require('../TypingAnimationWidget/TypingAnimationWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime6.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -1,7 +1,7 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
 import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
+import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
 import { TypingAnimationWithBaseWidget } from "../TypingAnimationWidget/TypingAnimationWidget.js";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.cjs

@@ -56,7 +56,8 @@ const TypingAnimationWidgetHandler = (props) => {
 	const handleButtonClick = (0, react.useCallback)((text) => {
 		onTypedMessageSubmitted({
 			query: text,
-			userTyped: false
+			userTyped: false,
+			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
 	}, [onTypedMessageSubmitted, onToggle]);

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime3.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime3.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -55,7 +55,8 @@ const TypingAnimationWidgetHandler = (props) => {
 	const handleButtonClick = useCallback((text) => {
 		onTypedMessageSubmitted({
 			query: text,
-			userTyped: false
+			userTyped: false,
+			displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
 		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
 	}, [onTypedMessageSubmitted, onToggle]);

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets-v2/SearchResults/index.d.ts

@@ -1,4 +1,4 @@
-import { SearchResultsWidget } from "../../widgets/dist/SearchResults/SearchResultsWidget.js";
-import { SearchResults } from "../../widgets/dist/SearchResults/SearchResults.js";
-import "../../widgets/dist/SearchResults/index.js";
+import { SearchResultsWidget } from "../../packages/widgets/dist/SearchResults/SearchResultsWidget.js";
+import { SearchResults } from "../../packages/widgets/dist/SearchResults/SearchResults.js";
+import "../../packages/widgets/dist/SearchResults/index.js";
 export { SearchResults, SearchResultsWidget };

package/dist/widgets-v2/SearchZeroState/index.d.ts

@@ -1,5 +1,5 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.js";
-import { SearchZeroState } from "../../widgets/dist/SearchZeroState/SearchZeroState.js";
-import { SearchZeroStateWidget } from "../../widgets/dist/SearchZeroState/SearchZeroStateWidget.js";
-import "../../widgets/dist/SearchZeroState/index.js";
+import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
+import { SearchZeroState } from "../../packages/widgets/dist/SearchZeroState/SearchZeroState.js";
+import { SearchZeroStateWidget } from "../../packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.js";
+import "../../packages/widgets/dist/SearchZeroState/index.js";
 export { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };

package/dist/widgets-v2/SuggestionBar/index.d.ts

@@ -1,4 +1,4 @@
-import { SuggestionBarLocationForMetrics } from "../../widgets/dist/SuggestionBar/types.js";
-import { SuggestionBar } from "../../widgets/dist/SuggestionBar/SuggestionBar.js";
-import "../../widgets/dist/SuggestionBar/index.js";
+import { SuggestionBarLocationForMetrics } from "../../packages/widgets/dist/SuggestionBar/types.js";
+import { SuggestionBar } from "../../packages/widgets/dist/SuggestionBar/SuggestionBar.js";
+import "../../packages/widgets/dist/SuggestionBar/index.js";
 export { SuggestionBar, SuggestionBarLocationForMetrics };

package/dist/widgets-v2/SuggestionButtonContainer/index.d.ts

@@ -1,3 +1,3 @@
-import { SuggestionButtonContainerProps } from "../../widgets/dist/SuggestionButtonContainer/types.js";
-import { SuggestionButtonContainer } from "../../widgets/dist/SuggestionButtonContainer/SuggestionButtonContainer.js";
+import { SuggestionButtonContainerProps } from "../../packages/widgets/dist/SuggestionButtonContainer/types.js";
+import { SuggestionButtonContainer } from "../../packages/widgets/dist/SuggestionButtonContainer/SuggestionButtonContainer.js";
 export { SuggestionButtonContainer, SuggestionButtonContainerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",
@@ -120,6 +120,10 @@
       "import": "./dist/widgets/FloatingChatWidget/index.js",
       "require": "./dist/widgets/FloatingChatWidget/index.cjs"
     },
+    "./widgets/FullPageSalesAgentWidget": {
+      "import": "./dist/widgets/FullPageSalesAgentWidget/index.js",
+      "require": "./dist/widgets/FullPageSalesAgentWidget/index.cjs"
+    },
     "./widgets/ProductCardWidget": {
       "import": "./dist/widgets/ProductCardWidget/index.js",
       "require": "./dist/widgets/ProductCardWidget/index.cjs"

package/src/debug/GenericSelect.tsx

@@ -0,0 +1,236 @@
+import React, { CSSProperties, useRef, useState } from 'react';
+
+type SelectType = 'priority';
+
+interface CategorySkillItem {
+  icon: string;
+  label: string;
+}
+
+interface ChipItem {
+  label: string;
+}
+
+type DictionaryItem = CategorySkillItem | ChipItem;
+type Dictionary = Record<string, DictionaryItem>;
+
+const dictionaries: Record<SelectType, Dictionary> = {
+  priority: {
+    p0: { label: 'Urgent' },
+    p1: { label: 'High' },
+    p2: { label: 'Medium' },
+    p3: { label: 'Low' },
+    'no priority': { label: 'No Priority' },
+  },
+};
+
+// Inline styles for Shadow DOM compatibility
+const styles: Record<string, CSSProperties> = {
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    fontSize: '0.75rem',
+    backgroundColor: 'transparent',
+    padding: '0.375rem 0.75rem',
+    borderRadius: '0.375rem',
+    cursor: 'pointer',
+    outline: 'none',
+    border: 'none',
+  },
+  buttonHover: {
+    backgroundColor: '#f9fafb',
+  },
+  dropdown: {
+    position: 'absolute',
+    left: '0',
+    zIndex: 10,
+    marginTop: '4px',
+    borderRadius: '8px',
+    width: '125px',
+    backgroundColor: 'white',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    border: '1px solid rgba(0, 0, 0, 0.05)',
+  },
+  dropdownItem: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    padding: '4px 8px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+  },
+  dropdownItemHover: {
+    backgroundColor: '#EBEEF6',
+  },
+  container: {
+    marginLeft: '-1rem',
+    position: 'relative',
+  },
+};
+
+// Badge style generator function
+const getBadgeStyles = (variant?: string): CSSProperties => {
+  let backgroundColor;
+  let textColor;
+
+  switch (variant) {
+    case 'p0':
+      backgroundColor = '#940F24';
+      textColor = '#F9E8EA';
+      break;
+    case 'p1':
+      backgroundColor = '#F9E8EA';
+      textColor = '#940F24';
+      break;
+    case 'p2':
+      backgroundColor = '#FEEBCB';
+      textColor = '#C05621';
+      break;
+    case 'p3':
+      backgroundColor = '#E6F6F4';
+      textColor = '#007F6D';
+      break;
+    default:
+      backgroundColor = '#EBEEF6';
+      textColor = '#3C57AA';
+  }
+
+  // Using fixed medium size values
+  return {
+    display: 'inline-flex',
+    borderRadius: '4px',
+    backgroundColor,
+    color: textColor,
+    fontSize: '0.875rem',
+    paddingLeft: '0.625rem',
+    paddingRight: '0.625rem',
+    paddingTop: '0.25rem',
+    paddingBottom: '0.25rem',
+  };
+};
+
+interface SelectProps {
+  type: SelectType;
+  selectedKey: string;
+  onSelect?: (key: string) => void;
+  buttonStyle?: CSSProperties;
+  menuStyle?: CSSProperties;
+}
+
+export function GenericSelect({
+  type,
+  selectedKey,
+  onSelect,
+  buttonStyle = {},
+  menuStyle = {},
+}: Readonly<SelectProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState<string | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const dictionary = dictionaries[type];
+
+  const renderItem = (key: string, item: DictionaryItem) => {
+    const chipItem = item as ChipItem;
+    const badgeStyles = getBadgeStyles(key);
+
+    return <span style={badgeStyles}>{chipItem.label}</span>;
+  };
+
+  // Close menu when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // Check if the click target is within our menu ref
+      const isOutside = menuRef.current && !menuRef.current.contains(event.target as Node);
+
+      // Also check the event path (for Shadow DOM compatibility)
+      const path = event.composedPath ? event.composedPath() : [];
+      const isInPath = menuRef.current && path.includes(menuRef.current);
+
+      // Only close if truly outside (not in the path)
+      if (isOutside && !isInPath) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mouseup', handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside, true);
+    };
+  }, [isOpen]);
+
+  if (!dictionary) {
+    console.error(`Invalid type "${type}".`);
+    return null;
+  }
+
+  return (
+    <div
+      style={styles.container}
+      ref={menuRef}
+    >
+      <button
+        type="button"
+        style={{
+          ...styles.button,
+          ...(isHovering === 'button' ? styles.buttonHover : {}),
+          ...buttonStyle,
+        }}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+        onMouseEnter={() => setIsHovering('button')}
+        onMouseLeave={() => setIsHovering(null)}
+      >
+        {dictionary[selectedKey] ? (
+          renderItem(selectedKey, dictionary[selectedKey])
+        ) : (
+          <span
+            style={{ color: '#6b7280' }}
+          >{`Select ${type.charAt(0).toUpperCase() + type.slice(1)}`}</span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div
+          style={{
+            ...styles.dropdown,
+            ...menuStyle,
+          }}
+        >
+          <div style={{ padding: '0.25rem 0' }}>
+            {Object.entries(dictionary)
+              .filter(([key]) => key !== selectedKey)
+              .map(([key, item]) => (
+                <button
+                  type="button"
+                  key={key}
+                  style={{
+                    ...styles.dropdownItem,
+                    ...(isHovering === key ? styles.dropdownItemHover : {}),
+                  }}
+                  onMouseEnter={() => setIsHovering(key)}
+                  onMouseLeave={() => setIsHovering(null)}
+                  onClick={e => {
+                    // Stop event propagation to prevent handleClickOutside from firing
+                    e.stopPropagation();
+
+                    if (onSelect) {
+                      onSelect(key);
+                    }
+                    setIsOpen(false);
+                  }}
+                >
+                  {renderItem(key, item)}
+                </button>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}