pixelize-design-library 2.3.21 → 2.4.1-beta.1

package/CLAUDE.md

@@ -40,10 +40,19 @@ No backend API in this repo. Demo pages may call dev APIs for playground only.
 Micro-Components/
 ├── package.json, tsconfig.json, vite.config.ts
 ├── src/
-│   ├── index.ts              public exports (~80)
-│   ├── withTheme.tsx         HOC wrapper
+│   ├── index.ts              public exports (~110)
+│   ├── withTheme.tsx         legacy HOC wrapper (light-only, unchanged)
 │   ├── Components/           73 component families
-│   ├── Theme/                8 brand presets + useCustomTheme
+│   ├── Theme/
+│   │   ├── tokens/           PURE, platform-agnostic — shared with the mobile lib
+│   │   │   ├── types.ts      PaletteProps, ThemeName, ColorMode
+│   │   │   ├── primitives/   space, sizes, radii, shadows, typography, …
+│   │   │   ├── builders/     buildDarkPalette, buildBrandTokens, color math
+│   │   │   └── brands/<brand>/palette.light.ts + palette.dark.ts   (7 brands)
+│   │   ├── chakra/           WEB-ONLY binding (createBrandTheme, componentStyles, fonts)
+│   │   ├── provider/         PixelizeThemeProvider, useThemeMode, ThemeSwitcher
+│   │   ├── useCustomTheme.ts hook used by ~127 components
+│   │   └── index.ts          ThemesList (light) + brandThemes (light+dark)
 │   ├── Pages/                49 Vite demo/playground pages
 │   ├── Utils/, Hooks/, services/, types/
 │   └── App.tsx, Layout.tsx   playground shell
@@ -51,6 +60,23 @@ Micro-Components/
 └── .cursor/modules/          MODULE.md per component domain (22 domains)
 ```
 
+### Theme rules (read before touching color)
+
+- **`Theme/tokens/**` must never import Chakra, React, or CSS.** It is copy-paste portable to the
+  mobile design library; one CSS/Chakra import breaks that. Web-only concerns (the Inter font-face
+  import, Chakra's `cssVarPrefix`) live in `Theme/chakra/`.
+- **Dark mode works by swapping which palette the theme carries** — not via `_dark`/`semanticTokens`.
+  `componentStyles` variants are functions of `({ theme })` and `useCustomTheme()` reads
+  `theme.colors`, so both follow the active palette automatically.
+- **Never hardcode a hex in a component.** Read tokens from `useCustomTheme()`, or the component
+  will be stuck in light mode.
+- **`colors.white` is a foreground token** (the label on a filled button) and stays white in dark.
+  For a white *surface* use `colors.background[50]` — identical `#ffffff` in light, dark-aware.
+- Dark palettes are **derived** (`buildDarkPalette`) from each brand's own light palette, so brand
+  hue carries through. Override per brand in that brand's `palette.dark.ts` if ever needed.
+- `withTheme` stays **light-only** so existing apps are visually unchanged; dark is opt-in via
+  `PixelizeThemeProvider` (defaults to `system`).
+
 ## 5. Dev commands
 
 ```bash

package/README.md

@@ -191,17 +191,84 @@ function DataTable() {
 
 ## Theming
 
-The library supports custom theming through CSS variables:
-
-```css
-:root {
-  --primary-color: #007bff;
-  --secondary-color: #6c757d;
-  --success-color: #28a745;
-  --danger-color: #dc3545;
-  --warning-color: #ffc107;
-  --info-color: #17a2b8;
+The library ships **7 brand themes** (`lavender`, `meadow`, `radiant`, `skyline`, `slate`,
+`emerald`, `rosewood`), each with a **light and a dark palette**.
+
+### Existing apps (unchanged)
+
+`withTheme` is the original default export and still renders **light only**. Upgrading the package
+changes nothing visually:
+
+```tsx
+import withTheme, { ThemesList } from 'pixelize-design-library';
+
+export default withTheme(App, ThemesList.lavender);
+```
+
+### Opting into light / dark / system
+
+Wrap the app in `PixelizeThemeProvider` instead. It defaults to **`system`** (follows the OS) and
+persists the user's choice to `localStorage`.
+
+```tsx
+import { PixelizeThemeProvider, ThemeSwitcher } from 'pixelize-design-library';
+
+function Root() {
+  return (
+    <PixelizeThemeProvider brand="lavender" defaultMode="system">
+      <App />
+    </PixelizeThemeProvider>
+  );
 }
+
+// Drop the switcher anywhere inside the provider:
+<ThemeSwitcher />                                    // icon toggle
+<ThemeSwitcher variant="segmented" />                // Light / System / Dark
+<ThemeSwitcher variant="menu" showBrandPicker />     // + brand picker
+```
+
+| `PixelizeThemeProvider` prop | Default | Meaning |
+| ---------------------------- | ------- | ------- |
+| `brand` | `"lavender"` | Which brand theme to use |
+| `defaultMode` | `"system"` | `"light"` \| `"dark"` \| `"system"` |
+| `storageKey` | `"pixelize-theme"` | localStorage key |
+| `disablePersistence` | `false` | Don't read/write localStorage |
+
+### Reading or changing the theme in code
+
+```tsx
+import { useThemeMode, useCustomTheme } from 'pixelize-design-library';
+
+const { mode, resolvedMode, setMode, toggle, brand, setBrand } = useThemeMode();
+const theme = useCustomTheme(); // returns the palette for the ACTIVE color mode
+```
+
+`useCustomTheme()` returns the dark palette automatically in dark mode, so components that read
+their colors from it are dark-aware with no extra work.
+
+### Building components
+
+Read colors from the theme — never hardcode a hex, or the component will be stuck in light mode:
+
+```tsx
+const theme = useCustomTheme();
+<Box bg={theme.colors.background[50]} color={theme.colors.text[900]} />  // ✅ adapts
+<Box bg="#ffffff" color="#26213c" />                                     // ❌ breaks in dark
+```
+
+`colors.white` is a **foreground** token (the label on a filled button) and stays white in dark
+mode. For a white **surface**, use `colors.background[50]`.
+
+### Design tokens (shared with the mobile library)
+
+`lightPalettes`, `darkPalettes`, `palettes`, `themeNames`, and `buildDarkPalette` are exported for
+apps that build custom themes. The token source (`src/Theme/tokens/`) is pure TypeScript with no
+Chakra, React, or CSS imports, so it is portable to React Native.
+
+```ts
+import { lightPalettes, buildDarkPalette } from 'pixelize-design-library';
+
+const myDark = buildDarkPalette(lightPalettes.emerald);
 ```
 
 ## TypeScript Support

package/__mocks__/styleMock.js

@@ -0,0 +1,8 @@
+/**
+ * Stub for CSS/SCSS imports under Jest (see `moduleNameMapper` in package.json).
+ *
+ * jest.moduleNameMapper has always referenced this file, but it did not exist — no test
+ * imported a stylesheet (even transitively) until the public-API guard began importing
+ * `src/index.ts`, which pulls in the Inter font-face CSS via the theme.
+ */
+module.exports = {};

package/coverage/clover.xml

@@ -0,0 +1,405 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1781346355410" clover="3.2.0">
+  <project timestamp="1781346355410" name="All files">
+    <metrics statements="324" coveredstatements="262" conditionals="336" coveredconditionals="233" methods="93" coveredmethods="73" elements="753" coveredelements="568" complexity="0" loc="324" ncloc="324" packages="10" files="15" classes="15"/>
+    <package name="Components.Button">
+      <metrics statements="1" coveredstatements="1" conditionals="8" coveredconditionals="7" methods="1" coveredmethods="1"/>
+      <file name="Button.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Button/Button.tsx">
+        <metrics statements="1" coveredstatements="1" conditionals="8" coveredconditionals="7" methods="1" coveredmethods="1"/>
+        <line num="27" count="2" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.Common">
+      <metrics statements="10" coveredstatements="3" conditionals="25" coveredconditionals="0" methods="3" coveredmethods="0"/>
+      <file name="ErrorMessage.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Common/ErrorMessage.tsx">
+        <metrics statements="3" coveredstatements="1" conditionals="2" coveredconditionals="0" methods="1" coveredmethods="0"/>
+        <line num="5" count="1" type="stmt"/>
+        <line num="7" count="0" type="stmt"/>
+        <line num="8" count="0" type="stmt"/>
+      </file>
+      <file name="FormLabel.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Common/FormLabel.tsx">
+        <metrics statements="4" coveredstatements="1" conditionals="23" coveredconditionals="0" methods="1" coveredmethods="0"/>
+        <line num="6" count="1" type="stmt"/>
+        <line num="31" count="0" type="stmt"/>
+        <line num="32" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="41" count="0" type="stmt"/>
+      </file>
+      <file name="HelperText.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Common/HelperText.tsx">
+        <metrics statements="3" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
+        <line num="4" count="1" type="stmt"/>
+        <line num="5" count="0" type="stmt"/>
+        <line num="6" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.Divider">
+      <metrics statements="3" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
+      <file name="Divider.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Divider/Divider.tsx">
+        <metrics statements="3" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
+        <line num="4" count="1" type="stmt"/>
+        <line num="5" count="0" type="stmt"/>
+        <line num="6" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.Header">
+      <metrics statements="14" coveredstatements="11" conditionals="16" coveredconditionals="12" methods="5" coveredmethods="2"/>
+      <file name="HeaderActions.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Header/HeaderActions.tsx">
+        <metrics statements="14" coveredstatements="11" conditionals="16" coveredconditionals="12" methods="5" coveredmethods="2"/>
+        <line num="9" count="1" type="stmt"/>
+        <line num="33" count="77" type="stmt"/>
+        <line num="35" count="77" type="stmt"/>
+        <line num="37" count="77" type="cond" truecount="2" falsecount="0"/>
+        <line num="38" count="2" type="stmt"/>
+        <line num="44" count="0" type="stmt"/>
+        <line num="51" count="77" type="cond" truecount="2" falsecount="0"/>
+        <line num="52" count="2" type="stmt"/>
+        <line num="60" count="0" type="stmt"/>
+        <line num="68" count="77" type="cond" truecount="2" falsecount="0"/>
+        <line num="69" count="2" type="stmt"/>
+        <line num="77" count="0" type="stmt"/>
+        <line num="85" count="77" type="stmt"/>
+        <line num="88" count="6" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.Input">
+      <metrics statements="5" coveredstatements="3" conditionals="4" coveredconditionals="2" methods="2" coveredmethods="1"/>
+      <file name="textInputIconSize.ts" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Input/textInputIconSize.ts">
+        <metrics statements="5" coveredstatements="3" conditionals="4" coveredconditionals="2" methods="2" coveredmethods="1"/>
+        <line num="4" count="1" type="stmt"/>
+        <line num="16" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="17" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="27" count="0" type="stmt"/>
+        <line num="28" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.KanbanBoard">
+      <metrics statements="256" coveredstatements="213" conditionals="236" coveredconditionals="185" methods="69" coveredmethods="59"/>
+      <file name="AccountCard.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/KanbanBoard/AccountCard.tsx">
+        <metrics statements="14" coveredstatements="14" conditionals="22" coveredconditionals="21" methods="8" coveredmethods="8"/>
+        <line num="17" count="1" type="stmt"/>
+        <line num="19" count="1" type="stmt"/>
+        <line num="35" count="109" type="stmt"/>
+        <line num="37" count="109" type="stmt"/>
+        <line num="38" count="54" type="stmt"/>
+        <line num="39" count="165" type="cond" truecount="2" falsecount="0"/>
+        <line num="43" count="109" type="cond" truecount="2" falsecount="0"/>
+        <line num="45" count="109" type="stmt"/>
+        <line num="46" count="2" type="stmt"/>
+        <line num="49" count="109" type="stmt"/>
+        <line num="74" count="225" type="stmt"/>
+        <line num="76" count="225" type="stmt"/>
+        <line num="124" count="1" type="stmt"/>
+        <line num="141" count="1" type="stmt"/>
+      </file>
+      <file name="AccountRow.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/KanbanBoard/AccountRow.tsx">
+        <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+        <line num="9" count="1" type="stmt"/>
+        <line num="10" count="225" type="stmt"/>
+        <line num="11" count="225" type="stmt"/>
+      </file>
+      <file name="KanbanBoard.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/KanbanBoard/KanbanBoard.tsx">
+        <metrics statements="209" coveredstatements="171" conditionals="196" coveredconditionals="153" methods="54" coveredmethods="45"/>
+        <line num="52" count="1" type="stmt"/>
+        <line num="66" count="1" type="stmt"/>
+        <line num="69" count="1" type="stmt"/>
+        <line num="71" count="1" type="stmt"/>
+        <line num="72" count="4" type="stmt"/>
+        <line num="73" count="4" type="stmt"/>
+        <line num="75" count="4" type="cond" truecount="1" falsecount="1"/>
+        <line num="76" count="0" type="stmt"/>
+        <line num="79" count="4" type="stmt"/>
+        <line num="82" count="0" type="stmt"/>
+        <line num="90" count="4" type="stmt"/>
+        <line num="105" count="0" type="stmt"/>
+        <line num="119" count="1" type="stmt"/>
+        <line num="124" count="4" type="stmt"/>
+        <line num="140" count="1" type="stmt"/>
+        <line num="153" count="1" type="stmt"/>
+        <line num="154" count="1" type="stmt"/>
+        <line num="155" count="1" type="stmt"/>
+        <line num="156" count="1" type="stmt"/>
+        <line num="159" count="1" type="stmt"/>
+        <line num="188" count="81" type="stmt"/>
+        <line num="190" count="81" type="stmt"/>
+        <line num="191" count="81" type="stmt"/>
+        <line num="192" count="81" type="stmt"/>
+        <line num="193" count="81" type="stmt"/>
+        <line num="195" count="81" type="stmt"/>
+        <line num="196" count="35" type="cond" truecount="2" falsecount="0"/>
+        <line num="201" count="81" type="stmt"/>
+        <line num="210" count="81" type="stmt"/>
+        <line num="219" count="81" type="stmt"/>
+        <line num="220" count="51" type="cond" truecount="2" falsecount="0"/>
+        <line num="221" count="3" type="stmt"/>
+        <line num="223" count="48" type="stmt"/>
+        <line num="226" count="81" type="stmt"/>
+        <line num="227" count="81" type="stmt"/>
+        <line num="230" count="81" type="cond" truecount="3" falsecount="0"/>
+        <line num="233" count="81" type="stmt"/>
+        <line num="234" count="81" type="stmt"/>
+        <line num="235" count="81" type="stmt"/>
+        <line num="237" count="81" type="stmt"/>
+        <line num="238" count="35" type="stmt"/>
+        <line num="242" count="81" type="stmt"/>
+        <line num="249" count="81" type="stmt"/>
+        <line num="251" count="81" type="stmt"/>
+        <line num="253" count="34" type="stmt"/>
+        <line num="254" count="81" type="stmt"/>
+        <line num="256" count="81" type="stmt"/>
+        <line num="257" count="34" type="stmt"/>
+        <line num="265" count="81" type="stmt"/>
+        <line num="266" count="52" type="cond" truecount="5" falsecount="0"/>
+        <line num="267" count="48" type="stmt"/>
+        <line num="269" count="4" type="cond" truecount="2" falsecount="0"/>
+        <line num="270" count="1" type="stmt"/>
+        <line num="272" count="3" type="stmt"/>
+        <line num="273" count="3" type="cond" truecount="1" falsecount="1"/>
+        <line num="274" count="0" type="stmt"/>
+        <line num="276" count="3" type="cond" truecount="1" falsecount="1"/>
+        <line num="277" count="0" type="stmt"/>
+        <line num="278" count="0" type="stmt"/>
+        <line num="280" count="3" type="stmt"/>
+        <line num="281" count="3" type="cond" truecount="1" falsecount="1"/>
+        <line num="286" count="0" type="stmt"/>
+        <line num="287" count="0" type="stmt"/>
+        <line num="289" count="3" type="stmt"/>
+        <line num="290" count="3" type="stmt"/>
+        <line num="291" count="2" type="cond" truecount="3" falsecount="1"/>
+        <line num="292" count="2" type="stmt"/>
+        <line num="295" count="3" type="stmt"/>
+        <line num="299" count="3" type="stmt"/>
+        <line num="309" count="81" type="stmt"/>
+        <line num="310" count="35" type="cond" truecount="2" falsecount="0"/>
+        <line num="311" count="26" type="stmt"/>
+        <line num="313" count="9" type="stmt"/>
+        <line num="314" count="9" type="stmt"/>
+        <line num="315" count="9" type="stmt"/>
+        <line num="316" count="9" type="cond" truecount="1" falsecount="1"/>
+        <line num="317" count="9" type="stmt"/>
+        <line num="319" count="0" type="stmt"/>
+        <line num="320" count="0" type="stmt"/>
+        <line num="321" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="322" count="0" type="stmt"/>
+        <line num="325" count="0" type="stmt"/>
+        <line num="329" count="81" type="stmt"/>
+        <line num="331" count="6" type="stmt"/>
+        <line num="332" count="6" type="stmt"/>
+        <line num="333" count="6" type="stmt"/>
+        <line num="334" count="6" type="stmt"/>
+        <line num="339" count="6" type="cond" truecount="4" falsecount="0"/>
+        <line num="340" count="2" type="stmt"/>
+        <line num="345" count="6" type="stmt"/>
+        <line num="357" count="81" type="stmt"/>
+        <line num="360" count="81" type="stmt"/>
+        <line num="361" count="81" type="stmt"/>
+        <line num="364" count="81" type="stmt"/>
+        <line num="365" count="81" type="stmt"/>
+        <line num="368" count="81" type="stmt"/>
+        <line num="369" count="35" type="cond" truecount="2" falsecount="0"/>
+        <line num="370" count="34" type="stmt"/>
+        <line num="371" count="34" type="stmt"/>
+        <line num="373" count="1" type="stmt"/>
+        <line num="374" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="375" count="0" type="stmt"/>
+        <line num="376" count="0" type="stmt"/>
+        <line num="377" count="0" type="stmt"/>
+        <line num="378" count="0" type="stmt"/>
+        <line num="381" count="0" type="stmt"/>
+        <line num="382" count="0" type="stmt"/>
+        <line num="383" count="0" type="stmt"/>
+        <line num="384" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="385" count="0" type="stmt"/>
+        <line num="387" count="0" type="stmt"/>
+        <line num="390" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="395" count="81" type="stmt"/>
+        <line num="398" count="81" type="stmt"/>
+        <line num="399" count="0" type="stmt"/>
+        <line num="400" count="0" type="stmt"/>
+        <line num="401" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="402" count="0" type="stmt"/>
+        <line num="405" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="406" count="0" type="stmt"/>
+        <line num="410" count="81" type="stmt"/>
+        <line num="411" count="0" type="stmt"/>
+        <line num="412" count="0" type="cond" truecount="0" falsecount="4"/>
+        <line num="416" count="81" type="stmt"/>
+        <line num="417" count="34" type="stmt"/>
+        <line num="418" count="34" type="cond" truecount="2" falsecount="0"/>
+        <line num="419" count="33" type="stmt"/>
+        <line num="420" count="33" type="stmt"/>
+        <line num="424" count="34" type="stmt"/>
+        <line num="425" count="34" type="stmt"/>
+        <line num="427" count="34" type="stmt"/>
+        <line num="428" count="34" type="stmt"/>
+        <line num="434" count="81" type="stmt"/>
+        <line num="435" count="2" type="stmt"/>
+        <line num="436" count="2" type="stmt"/>
+        <line num="437" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="438" count="0" type="stmt"/>
+        <line num="440" count="2" type="stmt"/>
+        <line num="445" count="81" type="stmt"/>
+        <line num="446" count="4" type="stmt"/>
+        <line num="447" count="4" type="cond" truecount="2" falsecount="0"/>
+        <line num="449" count="3" type="cond" truecount="2" falsecount="0"/>
+        <line num="450" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="451" count="1" type="stmt"/>
+        <line num="452" count="1" type="stmt"/>
+        <line num="457" count="1" type="stmt"/>
+        <line num="461" count="1" type="stmt"/>
+        <line num="462" count="1" type="stmt"/>
+        <line num="463" count="1" type="stmt"/>
+        <line num="466" count="2" type="stmt"/>
+        <line num="467" count="2" type="stmt"/>
+        <line num="468" count="2" type="stmt"/>
+        <line num="469" count="2" type="cond" truecount="4" falsecount="1"/>
+        <line num="471" count="2" type="cond" truecount="2" falsecount="0"/>
+        <line num="472" count="1" type="stmt"/>
+        <line num="473" count="1" type="stmt"/>
+        <line num="474" count="1" type="stmt"/>
+        <line num="476" count="1" type="stmt"/>
+        <line num="481" count="1" type="stmt"/>
+        <line num="482" count="1" type="stmt"/>
+        <line num="491" count="1" type="stmt"/>
+        <line num="492" count="1" type="stmt"/>
+        <line num="493" count="1" type="stmt"/>
+        <line num="494" count="1" type="stmt"/>
+        <line num="496" count="1" type="stmt"/>
+        <line num="502" count="1" type="stmt"/>
+        <line num="503" count="1" type="stmt"/>
+        <line num="514" count="81" type="stmt"/>
+        <line num="515" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="516" count="1" type="stmt"/>
+        <line num="519" count="81" type="stmt"/>
+        <line num="531" count="81" type="stmt"/>
+        <line num="532" count="37" type="stmt"/>
+        <line num="533" count="37" type="stmt"/>
+        <line num="534" count="40" type="stmt"/>
+        <line num="536" count="37" type="stmt"/>
+        <line num="539" count="81" type="stmt"/>
+        <line num="545" count="87" type="stmt"/>
+        <line num="550" count="0" type="stmt"/>
+        <line num="551" count="0" type="stmt"/>
+        <line num="571" count="0" type="stmt"/>
+        <line num="581" count="80" type="stmt"/>
+        <line num="602" count="6" type="stmt"/>
+        <line num="603" count="0" type="stmt"/>
+        <line num="664" count="2" type="stmt"/>
+        <line num="839" count="4" type="stmt"/>
+        <line num="851" count="1" type="stmt"/>
+        <line num="908" count="4" type="cond" truecount="2" falsecount="0"/>
+        <line num="916" count="0" type="stmt"/>
+        <line num="926" count="107" type="cond" truecount="2" falsecount="0"/>
+        <line num="934" count="107" type="stmt"/>
+        <line num="948" count="2" type="stmt"/>
+        <line num="969" count="81" type="cond" truecount="2" falsecount="0"/>
+        <line num="971" count="79" type="stmt"/>
+        <line num="972" count="79" type="stmt"/>
+        <line num="974" count="79" type="stmt"/>
+        <line num="995" count="79" type="cond" truecount="4" falsecount="0"/>
+        <line num="1008" count="1" type="stmt"/>
+        <line num="1019" count="79" type="stmt"/>
+        <line num="1022" count="87" type="cond" truecount="2" falsecount="0"/>
+        <line num="1023" count="87" type="cond" truecount="2" falsecount="0"/>
+        <line num="1024" count="4" type="stmt"/>
+        <line num="1027" count="4" type="stmt"/>
+        <line num="1049" count="83" type="stmt"/>
+        <line num="1053" count="79" type="stmt"/>
+        <line num="1054" count="395" type="stmt"/>
+        <line num="1068" count="79" type="stmt"/>
+        <line num="1106" count="1" type="stmt"/>
+        <line num="1134" count="2" type="stmt"/>
+      </file>
+      <file name="MeasuredItem.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/KanbanBoard/MeasuredItem.tsx">
+        <metrics statements="30" coveredstatements="25" conditionals="18" coveredconditionals="11" methods="6" coveredmethods="5"/>
+        <line num="9" count="1" type="stmt"/>
+        <line num="14" count="4" type="stmt"/>
+        <line num="15" count="4" type="stmt"/>
+        <line num="17" count="4" type="stmt"/>
+        <line num="18" count="4" type="stmt"/>
+        <line num="19" count="4" type="stmt"/>
+        <line num="20" count="4" type="stmt"/>
+        <line num="22" count="4" type="stmt"/>
+        <line num="23" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="25" count="2" type="stmt"/>
+        <line num="26" count="2" type="cond" truecount="2" falsecount="2"/>
+        <line num="27" count="0" type="stmt"/>
+        <line num="28" count="0" type="stmt"/>
+        <line num="33" count="4" type="stmt"/>
+        <line num="34" count="2" type="stmt"/>
+        <line num="35" count="2" type="stmt"/>
+        <line num="37" count="2" type="stmt"/>
+        <line num="40" count="2" type="cond" truecount="3" falsecount="1"/>
+        <line num="41" count="2" type="stmt"/>
+        <line num="42" count="0" type="stmt"/>
+        <line num="44" count="2" type="stmt"/>
+        <line num="46" count="0" type="stmt"/>
+        <line num="49" count="2" type="stmt"/>
+        <line num="50" count="2" type="stmt"/>
+        <line num="51" count="2" type="cond" truecount="3" falsecount="1"/>
+        <line num="52" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="57" count="4" type="stmt"/>
+        <line num="58" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="59" count="0" type="stmt"/>
+        <line num="63" count="4" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.Select">
+      <metrics statements="13" coveredstatements="8" conditionals="26" coveredconditionals="12" methods="5" coveredmethods="3"/>
+      <file name="Select.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/Select/Select.tsx">
+        <metrics statements="13" coveredstatements="8" conditionals="26" coveredconditionals="12" methods="5" coveredmethods="3"/>
+        <line num="34" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="35" count="2" type="stmt"/>
+        <line num="37" count="2" type="stmt"/>
+        <line num="38" count="2" type="cond" truecount="1" falsecount="1"/>
+        <line num="39" count="2" type="stmt"/>
+        <line num="40" count="2" type="stmt"/>
+        <line num="46" count="2" type="stmt"/>
+        <line num="47" count="0" type="stmt"/>
+        <line num="48" count="0" type="stmt"/>
+        <line num="49" count="0" type="stmt"/>
+        <line num="51" count="0" type="cond" truecount="0" falsecount="4"/>
+        <line num="52" count="0" type="stmt"/>
+        <line num="56" count="2" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.SideBar.components">
+      <metrics statements="19" coveredstatements="19" conditionals="11" coveredconditionals="7" methods="4" coveredmethods="4"/>
+      <file name="OverflowTooltipText.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/SideBar/components/OverflowTooltipText.tsx">
+        <metrics statements="19" coveredstatements="19" conditionals="11" coveredconditionals="7" methods="4" coveredmethods="4"/>
+        <line num="12" count="1" type="stmt"/>
+        <line num="19" count="72" type="stmt"/>
+        <line num="20" count="72" type="stmt"/>
+        <line num="21" count="72" type="stmt"/>
+        <line num="23" count="72" type="stmt"/>
+        <line num="24" count="34" type="stmt"/>
+        <line num="25" count="34" type="stmt"/>
+        <line num="26" count="34" type="stmt"/>
+        <line num="28" count="34" type="cond" truecount="3" falsecount="1"/>
+        <line num="29" count="34" type="stmt"/>
+        <line num="30" count="34" type="stmt"/>
+        <line num="32" count="34" type="stmt"/>
+        <line num="36" count="34" type="stmt"/>
+        <line num="38" count="34" type="stmt"/>
+        <line num="39" count="34" type="cond" truecount="1" falsecount="1"/>
+        <line num="40" count="34" type="stmt"/>
+        <line num="43" count="34" type="stmt"/>
+        <line num="46" count="72" type="cond" truecount="1" falsecount="1"/>
+        <line num="48" count="72" type="stmt"/>
+      </file>
+    </package>
+    <package name="Components.ToolTip">
+      <metrics statements="1" coveredstatements="1" conditionals="10" coveredconditionals="8" methods="1" coveredmethods="1"/>
+      <file name="ToolTip.tsx" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Components/ToolTip/ToolTip.tsx">
+        <metrics statements="1" coveredstatements="1" conditionals="10" coveredconditionals="8" methods="1" coveredmethods="1"/>
+        <line num="31" count="72" type="stmt"/>
+      </file>
+    </package>
+    <package name="Utils">
+      <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="2"/>
+      <file name="functions.ts" path="/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/src/Utils/functions.ts">
+        <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="2"/>
+        <line num="2" count="225" type="stmt"/>
+        <line num="5" count="225" type="stmt"/>
+      </file>
+    </package>
+  </project>
+</coverage>