customer-module-frontend 1.0.1-beta.1 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customer-module-frontend",
-  "version": "1.0.1-beta.1",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -8,13 +8,32 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
+  "main": "./dist/customer-module.js",
+  "module": "./dist/customer-module.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/customer-module.js"
+    },
+    "./RightPanel": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/customer-module.js"
+    },
+    "./styles": "./dist/customer-module.css"
+  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "hiver-ui-kit-extended": "1.0.0-beta.6",
+    "axios": "^1.13.2",
+    "hiver-ui-kit-extended": "1.0.0",
     "primeicons": "7.0.0",
     "primereact": "10.9.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^7.10.1",
+    "universal-cookie": "^7.0.1",
     "zustand": "^5.0.9"
   },
   "devDependencies": {

package/.cursor/rules/context.md

@@ -1,306 +0,0 @@
-# Cursor Rules for Customer Module Frontend
-
-## Tech Stack & Architecture
-
-- **Framework**: React 19.2+ with TypeScript
-- **Build Tool**: Vite 7+
-- **State Management**: 
-  - Client state: Zustand
-  - Component state: React built-in hooks (useState, useReducer) for local component state
-- **API Client**: Bifrost JS (@hiver/bifrost-js)
-- **Routing**: React Router DOM (supports MemoryRouter for testing/embedded scenarios)
-- **Styling**: 
-  - Tailwind CSS v4 with `@tailwindcss/postcss` plugin
-  - PostCSS with autoprefixer
-  - Custom prefix support (e.g., `cm:` prefix for customer module)
-  - Use `tailwind-merge` for merging Tailwind classes
-- **Code Quality**: ESLint with TypeScript support
-
-## Code Style & Conventions
-
-### TypeScript
-- Use strict TypeScript typing - avoid `any` types
-- Define types in `src/types/` directory
-- Use type imports: `import type { ... }` for type-only imports
-- Prefer interfaces for component props and object shapes
-- Use type aliases for unions, primitives, and utility types
-- Export types alongside their implementations
-
-### React Components
-- Use functional components with TypeScript
-- Use PascalCase for component names and file names
-- Define component props as interfaces extending React HTML attributes when needed
-- Use default exports for components
-- Prefer named exports for utilities, hooks, and types
-- Use React.FC or explicit return types for components
-- Always destructure props in function signature
-
-### File Organization
-```
-src/
-├── components/          # React components organized by feature (to be created)
-│   ├── core/           # Reusable UI components (if needed)
-│   └── [Feature]/      # Feature-specific components
-├── hooks/              # Custom React hooks (prefixed with "use") (to be created)
-├── services/           # API service functions (to be created)
-├── stores/             # Zustand stores
-├── types/              # TypeScript type definitions (to be created)
-├── utils/              # Utility functions (to be created)
-├── constants/          # Application constants (to be created)
-├── assets/             # Static assets (images, icons, etc.)
-├── App.tsx             # Main application component
-├── main.tsx            # Application entry point
-└── index.css           # Global styles
-```
-
-### Naming Conventions
-- **Components**: PascalCase (e.g., `PaymentFailedBanner.tsx`, `SCButton.tsx`)
-- **Hooks**: camelCase starting with "use" (e.g., `usePlans.ts`, `useSubscription.ts`)
-- **Services**: camelCase (e.g., `subscriptionApi.ts`, `fetchData.ts`)
-- **Types/Interfaces**: PascalCase (e.g., `SubscriptionData`, `PlansApiResponse`)
-- **Utils**: camelCase (e.g., `error.ts`, `planMapper.ts`)
-- **Stores**: camelCase ending with "Store" (e.g., `subscriptionStore.ts`)
-- **Constants**: UPPER_SNAKE_CASE for exported constants, camelCase for files
-
-## Component Patterns
-
-### UI Components
-- Create reusable UI components in `src/components/core/` directory
-- Use standard HTML elements with Tailwind CSS for styling
-- Build custom components as needed for the application
-- Components should be composable and reusable
-
-### Tailwind CSS Usage
-- Use Tailwind CSS v4 with `@tailwindcss/postcss` plugin
-- Tailwind classes can use custom prefixes (e.g., `cm:` for customer module)
-- Use Tailwind utility classes instead of inline styles
-- Use `twMerge` from `tailwind-merge` when merging classes manually
-- For component-specific styles, use CSS modules or regular CSS files
-- Configure Tailwind in `tailwind.config.js`
-
-### Styling Guidelines
-- Prefer Tailwind utilities over custom CSS
-- Use CSS modules or regular CSS files for complex component-specific styles
-- Never use inline styles (`style={{ ... }}`)
-- Use CSS variables when needed
-- Maintain consistent spacing using Tailwind spacing scale
-- PostCSS configuration is in `postcss.config.js` with `@tailwindcss/postcss` and `autoprefixer`
-
-## State Management Patterns
-
-### Client State (Zustand)
-- Use Zustand stores for global client state
-- Store files in `src/stores/` directory
-- Use devtools middleware for development
-- Follow the pattern:
-  ```typescript
-  interface State {
-    data: DataType | null;
-    isLoading: boolean;
-    error: string | null;
-    setData: (data: DataType | null) => void;
-    fetchData: () => Promise<void>;
-  }
-  
-  export const useStore = create<State>((set) => ({
-    data: null,
-    isLoading: false,
-    error: null,
-    setData: (data) => set({ data }),
-    fetchData: async () => {
-      set({ isLoading: true, error: null });
-      // Fetch logic here
-    },
-  }));
-  ```
-
-### Component State
-- Use React built-in hooks for local component state:
-  - `useState` for simple component state
-  - `useReducer` for complex component state
-  - `useContext` for shared state within a component tree (prefer Zustand for global state)
-
-## API & Service Layer
-
-### Service Functions
-- All API calls go through Bifrost JS (@hiver/bifrost-js)
-- Create service files in `src/services/` directory
-- Use Bifrost JS client for HTTP requests
-- Service functions should be pure and not contain business logic
-- Wrap API calls with error handling utilities
-
-### Bifrost JS Usage
-- Initialize Bifrost client in `src/services/bifrost.ts` or similar
-- Use Bifrost for all API communication
-- Follow Bifrost JS patterns and conventions
-- Handle authentication and request/response interceptors through Bifrost
-
-### Error Handling
-- Always check for errors before using data
-- Handle errors at the hook/component level, not in service functions
-- Use try-catch blocks for error handling
-- Display user-friendly error messages
-- Leverage Bifrost JS error handling capabilities
-
-### API Response Types
-- Define all API response types in `src/types/api.ts`
-- Follow consistent patterns for API responses
-- Align types with Bifrost JS response structures
-
-## Routing Patterns
-
-### React Router
-- Use React Router DOM for routing
-- Support both BrowserRouter (production) and MemoryRouter (testing/embedded scenarios)
-- **BrowserRouter**: Use for standalone applications with browser history
-- **MemoryRouter**: Use for embedded scenarios, testing, or when you need to control history programmatically
-- Define routes in `src/App.tsx` or a dedicated routes file
-- Use `useNavigate`, `useParams`, `useLocation` hooks for navigation
-
-## Hooks Patterns
-
-### Custom Hooks
-- Create hooks in `src/hooks/` directory
-- Name hooks starting with "use" (e.g., `useCustomer`, `useData`)
-- Hooks should encapsulate reusable logic
-- Export hooks from `src/hooks/index.ts`
-- Hooks can encapsulate:
-  - API calls using Bifrost JS
-  - Zustand store interactions
-  - React Router navigation
-  - Side effects and state logic
-
-### Hook Structure
-```typescript
-export const useResource = () => {
-  const { data, isLoading, error, fetchData } = useStore();
-  
-  useEffect(() => {
-    fetchData();
-  }, []);
-  
-  return { data, isLoading, error };
-};
-```
-
-## Type Safety
-
-### Type Definitions
-- Define types in `src/types/` directory
-- Use descriptive type names ending with appropriate suffixes:
-  - `*ApiResponse` for API response types
-  - `*Request` for API request types
-  - `*Data` for data structures
-  - `*Props` for component props
-- Export types alongside implementations
-- Use discriminated unions for variant types
-
-### Type Guards
-- Create type guards for runtime type checking when needed
-- Use TypeScript's type narrowing features
-
-## Code Quality & Best Practices
-
-### General Rules
-- **NEVER** use `console.log` in production code (remove before committing)
-- **NEVER** commit commented-out code unless it's clearly marked as temporary
-- **NEVER** use `any` type - use `unknown` if type is truly unknown
-- **NEVER** mutate state directly - always use immutable updates
-- **NEVER** bypass error handling - always handle errors appropriately
-- **ALWAYS** use TypeScript strict mode features
-- **ALWAYS** handle loading and error states in components
-- **ALWAYS** use proper TypeScript types
-- **ALWAYS** use Zustand for global client state
-- **ALWAYS** use Bifrost JS for API calls
-
-### Performance
-- Use `useMemo` for expensive computations
-- Use `useCallback` for functions passed as props to memoized components
-- Avoid unnecessary re-renders by properly managing dependencies
-- Use Zustand selectors to prevent unnecessary re-renders
-- Leverage Bifrost JS caching if available
-
-### Accessibility
-- Use semantic HTML elements
-- Include proper ARIA labels when needed
-- Ensure keyboard navigation works
-- Maintain proper focus management in modals
-
-### Testing Considerations
-- Code should be testable - avoid side effects in pure functions
-- Consider using MSW (Mock Service Worker) for API mocking in tests if needed
-- Mock data should be in `src/mock/` or `src/mocks/` (to be created)
-
-## Import Organization
-
-### Import Order
-1. React and React-related imports
-2. Third-party library imports
-3. Internal imports (components, hooks, services, utils, types, constants)
-4. Type-only imports (use `import type`)
-
-### Import Paths
-- Use relative imports for files in the same directory or nearby
-- Use absolute imports with path aliases if configured in `tsconfig.json` or `vite.config.ts`
-- Prefer named imports over default imports for utilities
-- Use default imports for components
-
-## Best Practices
-
-### ✅ DO
-- Use Tailwind CSS utility classes for styling
-- Use Zustand for global client state
-- Use Bifrost JS for all API calls
-- Use React Router for routing (BrowserRouter or MemoryRouter as needed)
-- Handle loading and error states appropriately
-- Use TypeScript strictly
-- Follow the existing file structure
-- Export types alongside implementations
-- Use descriptive names for functions and variables
-- Keep components small and focused
-- Extract reusable logic into hooks or utils
-- Use Zustand selectors to optimize re-renders
-
-## Configuration Files
-
-### Important Configs
-- `tailwind.config.js` - Tailwind CSS v4 configuration
-- `postcss.config.js` - PostCSS configuration with `@tailwindcss/postcss` and `autoprefixer`
-- `vite.config.ts` - Vite build configuration
-- `tsconfig.json` - TypeScript configuration (project references)
-- `tsconfig.app.json` - TypeScript configuration for app code
-- `tsconfig.node.json` - TypeScript configuration for Node.js files (vite.config.ts)
-- `package.json` - Project dependencies and scripts
-- `src/services/bifrost.ts` - Bifrost JS client configuration
-
-## Environment & Build
-
-- Use environment variables through Vite's `import.meta.env`
-- Build outputs go to `dist/` directory
-- Use Vite for development (`yarn dev`) and production builds (`yarn build`)
-- PostCSS processes CSS with Tailwind and Autoprefixer
-- Configure Bifrost JS with appropriate base URLs from environment variables
-
-## Documentation
-
-- Add JSDoc comments for complex functions and utilities
-- Document component props with TypeScript interfaces
-- Include usage examples in complex component files
-- Keep README files updated
-
-## Git & Version Control
-
-- Follow conventional commit messages
-- Use meaningful branch names
-- Don't commit large files or build artifacts
-- Don't commit `node_modules/` or `dist/` directories
-- Consider using lint-staged for pre-commit checks if needed
-
-## Package Management
-
-- Uses `yarn` as the package manager
-- Key dependencies:
-  - `zustand` - State management
-  - `@hiver/bifrost-js` - API client
-  - `react-router-dom` - Routing
-  - `tailwindcss` v4 - Styling

package/.cursor/rules/guardrails.md

@@ -1,35 +0,0 @@
-# Guardrails - Strict Rules & Constraints
-
-These are **MANDATORY** rules that must be followed. Violations of these rules should be caught during code review.
-
-## ❌ DO NOT
-
-### Styling
-- **Don't use inline styles** - use Tailwind or CSS
-- **Don't forget the Tailwind prefix** - use custom prefixes (e.g., `cm:`) when configured
-
-### API & Service Layer
-- **Don't bypass the service layer** - always use service functions with Bifrost JS
-- **Don't use `fetch` directly** - always use Bifrost JS for API calls
-- **Don't hardcode API URLs** - use config from environment variables or config files
-
-### State Management
-- **Don't mutate Zustand state directly** - use setter functions
-- **Don't create global state with Context API** - use Zustand instead
-
-### TypeScript & Code Quality
-- **Don't create components without proper TypeScript types**
-- **Don't ignore TypeScript errors** - fix them properly
-- **Don't use `any` type** - use `unknown` if type is truly unknown
-- **Don't use `console.log` in production code** - remove before committing
-
-### Code Organization
-- **Don't create duplicate types** - reuse existing types
-- **Don't commit debug code or commented-out code** - unless clearly marked as temporary
-
-### Routing
-- **Don't mix routing solutions** - use React Router consistently
-
-### General
-- **Don't mutate state directly** - always use immutable updates
-- **Don't bypass error handling** - always handle errors appropriately

package/.env

@@ -1 +0,0 @@
-UI_FRAMEWORK=primereact

package/.github/workflows/publish-to-npm-beta.yml

@@ -1,51 +0,0 @@
-name: "Beta Release Process"
-
-on:
-  # Allows manual triggering on ANY branch — including your feature branch
-  workflow_dispatch:
-    inputs:
-      version:
-        description: "Beta version number (e.g. 1.0.0-beta.1)"
-        required: true
-        type: string
-
-env:
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-jobs:
-  publish_beta:
-    name: Publish Beta to NPM Registry
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Use Node.js 20
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-          always-auth: true
-
-      - name: Configure Git
-        run: |
-          git config --global user.name "engg-hiver"
-          git config --global user.email "engineering-dev@grexit.com"
-
-      - name: Configure NPM
-        run: |
-          npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
-          npm config set git-tag-version=false
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Build package
-        run: npm run build
-
-      - name: Update version
-        run: npm version ${{ inputs.version }} --no-git-tag-version
-
-      - name: Publish beta to NPM
-        run: npm publish --tag beta
-        

package/.github/workflows/publish-to-npm.yml

@@ -1,58 +0,0 @@
-name: "Release process initiated"
-on:
-  release:
-    types: [published]
-env:
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-jobs:
-  changelog_prerelease:
-    name: Publish to NPM registry
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-        with:
-          ref: main
-          token: ${{ secrets.CI_SYSTEM_GITHUB_WORKFLOW }}
-
-      - name: Use Node.js 20
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-          always-auth: true
-
-      - run: git config --global user.name "engg-hiver"
-      - run: git config --global user.email "engineering-dev@grexit.com"
-      - run: npm config set '//registry.npmjs.org/:_authToken'="${NPM_TOKEN}"
-      - run: npm config set git-tag-version=false
-      - run: yarn install
-      - run: npm run build
-      - run: npm version ${{ github.event.release.tag_name }}
-
-      - name: Publish to NPM
-        run: npm publish
-
-      - run: git pull
-      - run: git push
-        env:
-          github-token: ${{ secrets.CI_SYSTEM_GITHUB_WORKFLOW }}
-
-      - name: Update Changelog
-        uses: heinrichreimer/github-changelog-generator-action@v2.1.1
-        with:
-          token: ${{ secrets.CI_SYSTEM_GITHUB_WORKFLOW }}
-          issues: true
-          issuesWoLabels: true
-          pullRequests: true
-          prWoLabels: true
-          unreleased: true
-          addSections: '{"documentation":{"prefix":"**Documentation:**","labels":["documentation"]}}'
-
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: Update Changelog for PR
-          file_pattern: CHANGELOG.md package.json
-        env:
-          github-token: ${{ secrets.CI_SYSTEM_GITHUB_WORKFLOW }}

package/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>customer-module-frontend</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/postcss-unwrap-layers.js

@@ -1,31 +0,0 @@
-/**
- * PostCSS plugin to unwrap @layer directives and extract their contents
- * This is needed because host applications may not support CSS cascade layers
- */
-export default function unwrapLayersPlugin() {
-  return {
-    postcssPlugin: 'unwrap-layers',
-    AtRule: {
-      layer(atRule) {
-        // If the layer has no nodes (empty layer), remove it entirely
-        if (!atRule.nodes || atRule.nodes.length === 0) {
-          atRule.remove();
-          return;
-        }
-
-        // Extract all child nodes from the @layer
-        const nodes = atRule.nodes;
-
-        // Insert all child nodes before the @layer rule
-        nodes.forEach(node => {
-          atRule.parent.insertBefore(atRule, node);
-        });
-
-        // Remove the now-empty @layer wrapper
-        atRule.remove();
-      }
-    }
-  };
-}
-
-unwrapLayersPlugin.postcss = true;

package/postcss.config.js

@@ -1,11 +0,0 @@
-import unwrapLayersPlugin from './postcss-unwrap-layers.js';
-import tailwindcss from '@tailwindcss/postcss';
-import autoprefixer from 'autoprefixer';
-
-export default {
-  plugins: [
-    tailwindcss(),
-    unwrapLayersPlugin(),
-    autoprefixer(),
-  ],
-};

package/src/App.css

@@ -1,40 +0,0 @@
-#root {
-  margin: 0 auto;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/src/App.tsx

@@ -1,58 +0,0 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
-import CustomersLayout from './components/CustomersLayout';
-import Accounts from './pages/Accounts';
-import Contacts from './pages/Contacts';
-import AccountDetail from './pages/AccountDetail';
-import ContactDetail from './pages/ContactDetail';
-import Conversation from './components/ContactConversation/Converation';
-import './App.css';
-
-// import { useCountStore } from './stores/count'
-// import ConversationBox from './components/ConversationBox'
-// import AccountTable from './components/Listing/AccountTable'
-// import ContactTable from './components/Listing/ContactTable'
-// import PrimaryContactsDilaog from './components/Contacts'
-
-function App() {
-  return (
-    <>
-     <Routes>
-       <Route path="/conversation" element={<Conversation />} />
-       <Route element={<CustomersLayout />}>
-         <Route path="/" element={<Navigate to="/accounts" />} />
-         <Route path="/accounts" element={<Accounts />} />
-         <Route path="/contacts" element={<Contacts />} />
-      {/* <PrimaryContactsDilaog /> */}
-      {/* <AccountTable /> */}
-      {/* <ContactTable /> */}
-        {/* <ConversationBox 
-          type="email" 
-          heading="Issue with the app" 
-          status="pending" 
-          senderName="Ryan Reynolds" 
-          timestamp="Feb 4, 02:45 PM" 
-          messagePreview="I am having trouble with the app. It keeps crashing and I am losing data. Can you please help?"
-          mailboxName="Finance"
-          assignedAgent={{name: 'Andy Rue', avatarColor: '#5398CF', avatarInitial: 'A'}}
-        />
-        <ConversationBox 
-          type="chat" 
-          status="open" 
-          senderName="Blake Lively" 
-          timestamp="Feb 4, 02:45 PM" 
-          messagePreview="I am unable to access key features. The loading times are excessive, hindering my workflow. Can you please investigate?"
-          mailboxName="Sales"
-          assignedAgent={{name: 'Alice Adams', avatarColor: '#D04B4F', avatarInitial: 'A'}}
-        /> */}
-
-        {/* Details Pages */}
-        <Route path="/accounts/:accountId" element={<AccountDetail />} />
-        <Route path="/accounts/:accountId/contacts/:contactId" element={<ContactDetail />} />
-        <Route path="/contacts/:contactId" element={<ContactDetail />} />
-      </Route>
-    </Routes>
-    </>
-  );
-}
-
-export default App;

package/src/assets/accounts.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.33325 14V4.66667C5.33325 4.04669 5.33325 3.73669 5.4014 3.48236C5.58633 2.79218 6.12543 2.25308 6.81559 2.06815C7.06992 2 7.37992 2 7.99992 2C8.61992 2 8.92992 2 9.18425 2.06815C9.87439 2.25308 10.4135 2.79218 10.5985 3.48236C10.6666 3.73669 10.6666 4.04669 10.6666 4.66667V14M3.46659 14H12.5333C13.28 14 13.6534 14 13.9386 13.8547C14.1895 13.7269 14.3935 13.5229 14.5213 13.272C14.6666 12.9868 14.6666 12.6134 14.6666 11.8667V6.8C14.6666 6.05326 14.6666 5.67989 14.5213 5.39468C14.3935 5.14379 14.1895 4.93982 13.9386 4.81199C13.6534 4.66667 13.28 4.66667 12.5333 4.66667H3.46659C2.71985 4.66667 2.34648 4.66667 2.06127 4.81199C1.81038 4.93982 1.60641 5.14379 1.47858 5.39468C1.33325 5.67989 1.33325 6.05326 1.33325 6.8V11.8667C1.33325 12.6134 1.33325 12.9868 1.47858 13.272C1.60641 13.5229 1.81038 13.7269 2.06127 13.8547C2.34648 14 2.71985 14 3.46659 14Z" stroke="#334155" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>