customer-module-frontend 1.0.1-beta.1

package/.cursor/rules/context.md

@@ -0,0 +1,306 @@
+# 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

@@ -0,0 +1,35 @@
+# 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

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

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,58 @@
+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/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/eslint.config.js

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,13 @@
+<!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/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "customer-module-frontend",
+  "version": "1.0.1-beta.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "hiver-ui-kit-extended": "1.0.0-beta.6",
+    "primeicons": "7.0.0",
+    "primereact": "10.9.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^7.10.1",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "resolutions": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

package/postcss-unwrap-layers.js

@@ -0,0 +1,31 @@
+/**
+ * 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

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

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>