@bizapps/design-system-testing 0.4.0

package/README.md

@@ -0,0 +1,500 @@
+# TCCE Design System
+
+A React component library for the TCCE CRM applications. Provides reusable, consistent UI components built with React, TypeScript, Tailwind CSS, and styled-components.
+
+## Overview
+
+This is a **component library** designed to ensure visual and functional consistency across all TCCE CRM frontend applications. It includes:
+
+- **50+ reusable components** (Button, Card, Dialog, Table, Forms, etc.)
+- **Design tokens** (colors, typography, spacing, shadows)
+- **Storybook documentation** for all components
+- **TypeScript support** with full type definitions
+
+## Table of Contents
+
+- [Prerequisites](#prerequisites)
+- [Quick Start](#quick-start)
+- [Project Structure](#project-structure)
+- [Development](#development)
+- [Building Components](#building-components)
+- [Code Quality](#code-quality)
+- [Testing Components](#testing-components)
+- [Publishing](#publishing)
+- [Contributing](#contributing)
+- [Troubleshooting](#troubleshooting)
+
+---
+
+## Prerequisites
+
+| Tool | Version | Notes |
+|------|---------|-------|
+| **Node.js** | v18+ | LTS recommended |
+| **pnpm** | v8+ | Package manager |
+| **Docker** | v20+ | Required for containerized development |
+| **Git** | Any | Version control |
+
+### Docker Network Prerequisite
+
+If using Docker Compose, you must create the `tcce-network` network before starting the containers:
+
+```bash
+docker network create tcce-network
+```
+
+**Important:** Always use `docker-compose.dev.yml` when running with Docker Compose.
+
+### Installing pnpm
+
+```bash
+npm install -g pnpm
+```
+
+---
+
+## Quick Start
+
+### Local Development
+
+```bash
+# Clone the repository
+git clone <repository-url>
+cd tcce-design-system
+
+# Install dependencies
+pnpm install
+
+# Start Storybook (recommended for development)
+pnpm storybook
+
+# OR start Vite dev server
+pnpm dev
+```
+
+**Access:**
+- Storybook: http://localhost:6006
+- Vite Dev: http://localhost:5173
+
+### Using Docker (Recommended for Teams)
+
+```bash
+docker compose -f docker-compose.dev.yml up
+```
+
+---
+
+## Project Structure
+
+```
+tcce-design-system/
+├── src/
+│   ├── components/           # All UI components
+│   │   ├── Badge/
+│   │   ├── Button/
+│   │   ├── Can/             # Authorization component
+│   │   ├── Card/
+│   │   ├── Divider/
+│   │   ├── Icon/
+│   │   ├── InfoLabel/
+│   │   ├── Spinner/
+│   │   ├── Stepper/
+│   │   ├── Typography/
+│   │   ├── Token/           # Design tokens showcase
+│   │   ├── forms/           # Form components
+│   │   │   ├── Checkbox/
+│   │   │   ├── FormField/
+│   │   │   ├── PinInput/
+│   │   │   ├── RadioInput/
+│   │   │   └── inputs/      # Input components
+│   │   ├── layout/          # Layout components
+│   │   ├── navigations/     # Navigation components
+│   │   ├── notifications/    # Toast & notifications
+│   │   ├── overlays/        # Dialog, Tooltip, etc.
+│   │   └── Table/           # Data tables
+│   ├── shared/
+│   │   ├── hooks/           # Shared React hooks
+│   │   ├── types/           # Global TypeScript types
+│   │   └── utils/           # Utility functions
+│   ├── globals.css          # Global styles
+│   ├── tokens.css           # Design tokens CSS
+│   └── main.ts              # Library entry point
+├── .storybook/              # Storybook configuration
+├── public/                  # Static assets (fonts, images)
+├── dist/                    # Build output (generated)
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+└── eslint.config.js
+```
+
+### Component Structure
+
+Each component follows this pattern:
+
+```
+ComponentName/
+├── ComponentName.tsx        # Main component
+├── ComponentName.types.ts  # TypeScript interfaces
+├── ComponentName.styles.ts # Styled-components styles
+├── ComponentName.stories.tsx # Storybook stories
+├── index.ts                # Barrel export
+└── components/             # Sub-components (if needed)
+```
+
+---
+
+## Development
+
+### Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `pnpm dev` | Start Vite development server |
+| `pnpm storybook` | Start Storybook (recommended) |
+| `pnpm build` | Build library for production |
+| `pnpm build-storybook` | Build static Storybook |
+| `pnpm preview` | Preview production build |
+| `pnpm lint` | Run ESLint |
+| `pnpm lint:fix` | Fix ESLint issues |
+| `pnpm format` | Format with Prettier |
+
+### Environment Variables
+
+Create a `.env` file if needed (check `.env.example`):
+
+```bash
+# Not required for local development
+```
+
+---
+
+## Building Components
+
+### Creating a New Component
+
+1. **Create the component folder:**
+
+```bash
+src/components/controls/MyComponent/
+```
+
+2. **Create files following the pattern:**
+
+```typescript
+// MyComponent.types.ts
+export interface MyComponentProps {
+  variant?: 'primary' | 'secondary';
+  // ... other props
+}
+```
+
+```typescript
+// MyComponent.tsx
+import type { MyComponentProps } from './MyComponent.types';
+import { StyledMyComponent } from './MyComponent.styles';
+
+export const MyComponent = ({ variant = 'primary', ...props }: MyComponentProps) => {
+  return <StyledMyComponent $variant={variant} {...props} />;
+};
+```
+
+```typescript
+// MyComponent.styles.ts
+import styled from 'styled-components';
+
+export const StyledMyComponent = styled.div<{ $variant: string }>`
+  /* Styles using Tailwind and styled-components */
+`;
+```
+
+```typescript
+// MyComponent.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  title: 'Controls/MyComponent',
+  component: MyComponent,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
+```typescript
+// index.ts
+export * from './MyComponent';
+export * from './MyComponent.types';
+```
+
+3. **Export from main.ts:**
+
+```typescript
+// src/main.ts
+export * from './components/controls/MyComponent';
+```
+
+4. **Run Storybook to test:**
+
+```bash
+pnpm storybook
+```
+
+### Component Patterns
+
+- **Use styled-components** for component-specific styles
+- **Use Tailwind CSS** via `@apply` in styles
+- **Prefix styled-component props** with `$` (transient props)
+- **Always create TypeScript types** in `.types.ts` files
+- **Create Storybook stories** for documentation and testing
+
+---
+
+## Code Quality
+
+### Linting & Formatting
+
+This project uses:
+- **ESLint** - Code linting
+- **Prettier** - Code formatting
+- **TypeScript** - Type safety
+
+### Running Checks
+
+```bash
+# Lint
+pnpm lint
+
+# Fix lint issues
+pnpm lint:fix
+
+# Format code
+pnpm format
+
+# Type check
+pnpm build  # (includes tsc)
+```
+
+### Pre-commit Hooks
+
+Ensure you run these before committing:
+
+```bash
+pnpm lint:fix && pnpm format
+```
+
+### ESLint Rules
+
+Key rules enforced:
+- React hooks dependencies must be correct
+- No unused variables
+- Prettier formatting required
+
+---
+
+## Testing Components
+
+### Using Storybook
+
+Storybook is the primary way to test components:
+
+```bash
+pnpm storybook
+```
+
+- Browse components at http://localhost:6006
+- Use **Controls** panel to test props
+- Use **Actions** panel to see event handlers
+- Check **Accessibility** tab for a11y issues
+
+### Component Story Format
+
+Write stories following CSF (Component Story Format):
+
+```typescript
+// ComponentName.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentName } from './ComponentName';
+
+const meta = {
+  title: 'Category/ComponentName',
+  component: ComponentName,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary'] },
+  },
+} satisfies Meta<typeof ComponentName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    label: 'Click me',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    label: 'Cancel',
+  },
+};
+```
+
+---
+
+## Publishing
+
+### Building for npm
+
+```bash
+# Build the library
+pnpm build
+
+# Check dist folder
+ls dist/
+```
+
+### Publish to npm
+
+```bash
+# Login to npm
+npm login
+
+# Publish
+npm publish
+```
+
+The build outputs:
+- `dist/tcce-design-system-components.js` (ESM)
+- `dist/tcce-design-system-components.umd.cjs` (UMD)
+- `dist/tcce-design-system-components.css`
+- Type definitions via `vite-plugin-dts`
+
+### Consuming in Other Projects
+
+```bash
+# Install from npm (when published)
+pnpm add tcce-design-system
+
+# Or from local path
+pnpm add ../tcce-design-system
+```
+
+```typescript
+// Usage
+import { Button, Card } from 'tcce-design-system';
+import 'tcce-design-system/dist/tcce-design-system-components.css';
+```
+
+---
+
+## Contributing
+
+### Workflow
+
+1. **Create a branch:**
+   ```bash
+   git checkout -b feature/component-name
+   ```
+
+2. **Make changes:**
+   - Follow component patterns
+   - Add Storybook stories
+   - Update types
+
+3. **Run quality checks:**
+   ```bash
+   pnpm lint:fix
+   pnpm format
+   pnpm build
+   ```
+
+4. **Commit and push:**
+   ```bash
+   git add .
+   git commit -m "feat: add new component"
+   git push origin feature/component-name
+   ```
+
+5. **Create Pull Request**
+
+### Coding Standards
+
+- Use **TypeScript** for everything
+- Use **styled-components** for styling
+- Use **Tailwind CSS** utilities via `@apply`
+- Follow existing component patterns
+- Write **stories** for all components
+- Use **transient props** (`$prop`) in styled-components
+- **No comments** unless absolutely necessary
+
+### Versioning
+
+This project uses [Semantic Versioning](https://semver.org/):
+
+- **MAJOR**: Breaking changes
+- **MINOR**: New features (backward compatible)
+- **PATCH**: Bug fixes
+
+Update version in `package.json` before publishing.
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+**Port already in use:**
+```bash
+# Find and kill process on port 6006
+lsof -i :6006
+kill -9 <PID>
+```
+
+**Dependencies issues:**
+```bash
+rm -rf node_modules
+pnpm install
+```
+
+**Docker build fails:**
+```bash
+docker build --no-cache -t tcce-design-system .
+```
+
+**TypeScript errors:**
+```bash
+# Check for type errors
+npx tsc --noEmit
+```
+
+### Getting Help
+
+- Check Storybook docs: http://localhost:6006
+- Review existing component patterns
+- Contact: bizapps@tcce.biz
+
+---
+
+## License
+
+MIT License
+
+## Team
+
+- **Author:** BizAppsTotal <bizapps@tcce.biz>
+- **Version:** 0.3.24

package/dist/main.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var radixUi = require('radix-ui');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ui/Button/button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
+        cancel: "bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
+        outline: "border-2 border-white bg-transparent text-white hover:bg-white hover:text-[var(--color-main-orange-primary)] focus-visible:ring-white/30",
+        ghost: "bg-transparent text-foreground hover:bg-[var(--color-orange-100)] hover:text-[var(--color-main-orange-primary)] focus-visible:ring-ring/30"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-4 text-sm",
+        lg: "h-10 px-6 text-sm",
+        "icon-sm": "size-8 rounded-full p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "primary",
+  size = "md",
+  asChild = false,
+  isLoading = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props,
+      children
+    }
+  );
+}
+
+exports.Button = Button;
+exports.buttonVariants = buttonVariants;
+//# sourceMappingURL=main.cjs.map
+//# sourceMappingURL=main.cjs.map

package/dist/main.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/ui/Button/button.tsx"],"names":["twMerge","clsx","cva","Slot","jsx"],"mappings":";;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,cAAA,GAAiBC,0BAAA;AAAA,EACrB,4kBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACL,OAAA,EACI,sFAAA;AAAA,QACJ,SAAA,EACI,2GAAA;AAAA,QACJ,MAAA,EACI,4GAAA;AAAA,QACJ,OAAA,EACI,0IAAA;AAAA,QACJ,KAAA,EACI;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACF,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACf,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACZ,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACP,CAAA,EAIO;AACL,EAAA,MAAM,IAAA,GAAO,OAAA,GAAUC,YAAA,CAAK,IAAA,GAAO,QAAA;AAEnC,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"main.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n          primary:\n              'bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30',\n          secondary:\n              'bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30',\n          cancel:\n              'bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30',\n          outline:\n              'border-2 border-white bg-transparent text-white hover:bg-white hover:text-[var(--color-main-orange-primary)] focus-visible:ring-white/30',\n          ghost: \n              'bg-transparent text-foreground hover:bg-[var(--color-orange-100)] hover:text-[var(--color-main-orange-primary)] focus-visible:ring-ring/30',\n      },\n      size: {\n          sm: 'h-8 px-3 text-xs',\n          md: 'h-9 px-4 text-sm',\n          lg: 'h-10 px-6 text-sm',\n          'icon-sm': 'size-8 rounded-full p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n\nfunction Button({\n    className,\n    variant = 'primary',\n    size = 'md',\n    asChild = false,\n    isLoading = false,\n    children,\n    ...props\n}: React.ComponentProps<'button'> &\n    VariantProps<typeof buttonVariants> & {\n        asChild?: boolean\n        isLoading?: boolean\n    }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants }\n"]}

package/dist/main.css

@@ -0,0 +1,215 @@
+/* src/styles/globals.css */
+@font-face {
+  font-family: "Dax";
+  src: url(https://dibt9vplwriap.cloudfront.net/dax-regular/dax-regular.ttf) format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Dax";
+  src: url(https://dibt9vplwriap.cloudfront.net/Dax-Bold/Dax-Bold.otf) format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueUltraLight.otf) format("opentype");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueUltraLightItalic.otf) format("opentype");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueThin.otf) format("opentype");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueThinItalic.otf) format("opentype");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueLight.otf) format("opentype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueLightItalic.otf) format("opentype");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueRoman.otf) format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueItalic.ttf) format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueMedium.otf) format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueMediumItalic.otf) format("opentype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBold.otf) format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBoldItalic.otf) format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueHeavy.otf) format("opentype");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueHeavyItalic.otf) format("opentype");
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBlack.otf) format("opentype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url(https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBlackItalic.otf) format("opentype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "./tokens.css";
+@import "@fontsource-variable/inter";
+@custom-variant dark (&:is(.dark *));
+@theme inline { --color-main-blue-primary: var(--color-main-blue-primary); --color-main-orange-primary: var(--color-main-orange-primary); --color-main-grey: var(--color-main-grey); --color-main-alternative: var(--color-main-alternative); --color-main-alternative-secondary: var(--color-main-alternative-secondary); --color-main-positive-state: var(--color-main-positive-state); --color-main-warning-state: var(--color-main-warning-state); --color-main-yellow-primary: var(--color-main-yellow-primary); --color-main-white: var(--color-main-white); --color-main-black: var(--color-main-black); --color-main-light-borders: var(--color-main-light-borders); --color-main-input-borders: var(--color-main-input-borders); --color-dark-100: var(--color-dark-100); --color-dark-200: var(--color-dark-200); --color-dark-300: var(--color-dark-300); --color-dark-400: var(--color-dark-400); --color-dark-500: var(--color-dark-500); --color-dark-600: var(--color-dark-600); --color-dark-700: var(--color-dark-700); --color-dark-800: var(--color-dark-800); --color-dark-900: var(--color-dark-900); --color-light-100: var(--color-light-100); --color-light-200: var(--color-light-200); --color-light-300: var(--color-light-300); --color-light-400: var(--color-light-400); --color-light-500: var(--color-light-500); --color-light-600: var(--color-light-600); --color-light-700: var(--color-light-700); --color-light-800: var(--color-light-800); --color-light-900: var(--color-light-900); --color-light-1000: var(--color-light-1000); --color-blue-100: var(--color-blue-100); --color-blue-200: var(--color-blue-200); --color-blue-300: var(--color-blue-300); --color-blue-400: var(--color-blue-400); --color-blue-500: var(--color-blue-500); --color-blue-600: var(--color-blue-600); --color-blue-700: var(--color-blue-700); --color-blue-800: var(--color-blue-800); --color-blue-900: var(--color-blue-900); --color-blue-1000: var(--color-blue-1000); --color-red-100: var(--color-red-100); --color-red-200: var(--color-red-200); --color-red-300: var(--color-red-300); --color-red-400: var(--color-red-400); --color-red-500: var(--color-red-500); --color-red-600: var(--color-red-600); --color-red-700: var(--color-red-700); --color-red-800: var(--color-red-800); --color-red-900: var(--color-red-900); --color-red-1000: var(--color-red-1000); --color-orange-100: var(--color-orange-100); --color-orange-200: var(--color-orange-200); --color-orange-300: var(--color-orange-300); --color-orange-400: var(--color-orange-400); --color-orange-500: var(--color-orange-500); --color-orange-700: var(--color-orange-700); --color-orange-800: var(--color-orange-800); --color-orange-900: var(--color-orange-900); --color-orange-1000: var(--color-orange-1000); --color-yellow-100: var(--color-yellow-100); --color-yellow-200: var(--color-yellow-200); --color-yellow-300: var(--color-yellow-300); --color-yellow-400: var(--color-yellow-400); --color-yellow-500: var(--color-yellow-500); --color-yellow-600: var(--color-yellow-600); --color-yellow-700: var(--color-yellow-700); --color-yellow-800: var(--color-yellow-800); --color-yellow-900: var(--color-yellow-900); --color-yellow-1000: var(--color-yellow-1000); --color-green-100: var(--color-green-100); --color-green-200: var(--color-green-200); --color-green-300: var(--color-green-300); --color-green-400: var(--color-green-400); --color-green-500: var(--color-green-500); --color-green-600: var(--color-green-600); --color-green-700: var(--color-green-700); --color-green-800: var(--color-green-800); --color-green-900: var(--color-green-900); --color-green-1000: var(--color-green-1000); --color-purple-100: var(--color-purple-100); --color-purple-200: var(--color-purple-200); --color-purple-300: var(--color-purple-300); --color-purple-400: var(--color-purple-400); --color-purple-500: var(--color-purple-500); --color-purple-600: var(--color-purple-600); --color-purple-700: var(--color-purple-700); --color-purple-800: var(--color-purple-800); --color-purple-900: var(--color-purple-900); --color-purple-1000: var(--color-purple-1000); --border-radius-button: var(--border-radius-button); --border-radius-secondary-button: var(--border-radius-secondary-button); --border-radius-card: var(--border-radius-card); --border-radius-article: var(--border-radius-article); --border-radius-outline: var(--border-radius-outline); --shadow-black-card: var(--shadow-black-card); --shadow-hover-black-card: var(--shadow-hover-black-card); --shadow-black-button: var(--shadow-black-button); --shadow-hover-black-button: var(--shadow-hover-black-button); --shadow-hover-orange-button: var(--shadow-hover-orange-button); --font-heading: var(--font-sans); --font-sans: "Inter Variable", sans-serif; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); }
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-main-orange-primary) #f1f1f1;
+}
+*::-webkit-scrollbar {
+  width: 0.5rem;
+}
+*::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 0.625rem;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--color-main-orange-primary);
+  border-radius: 0.625rem;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-main-orange-primary);
+}
+.my-toast {
+  font-family:
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 176.782%;
+  border: none !important;
+  box-shadow: var(--shadow-black-card);
+  border-radius: var(--border-radius-article) !important;
+}
+[data-sonner-toast][data-type=success] {
+  background:
+    linear-gradient(
+      135deg,
+      var(--color-main-positive-state) 0%,
+      var(--color-green-200) 100%) !important;
+  color: var(--color-main-white) !important;
+}
+[data-sonner-toast][data-type=error] {
+  background:
+    linear-gradient(
+      135deg,
+      var(--color-main-warning-state) 0%,
+      var(--color-red-300) 100%) !important;
+  color: var(--color-main-white) !important;
+}
+[data-sonner-toaster] {
+  bottom: 6rem !important;
+}
+[data-sonner-toaster][data-position=bottom-center] {
+  transform: translateY(-3rem) !important;
+}
+:root {
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+/*# sourceMappingURL=main.css.map */

package/dist/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/globals.css"],"sourcesContent":["\n/* ====================================\n\n   GLOBALS — single entry point for both build and Storybook\n\n   ==================================== */\n\n/* === DAX FONT FAMILY === */\n\n@font-face {\n    font-family: 'Dax';\n    src: url('https://dibt9vplwriap.cloudfront.net/dax-regular/dax-regular.ttf') format('truetype');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Dax';\n    src: url('https://dibt9vplwriap.cloudfront.net/Dax-Bold/Dax-Bold.otf') format('opentype');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n}\n\n/* === HELVETICA NEUE FONT FAMILY === */\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueUltraLight.otf') format('opentype');\n    font-weight: 200;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueUltraLightItalic.otf') format('opentype');\n    font-weight: 200;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueThin.otf') format('opentype');\n    font-weight: 100;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueThinItalic.otf') format('opentype');\n    font-weight: 100;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueLight.otf') format('opentype');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueLightItalic.otf') format('opentype');\n    font-weight: 300;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueRoman.otf') format('opentype');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueItalic.ttf') format('truetype');\n    font-weight: 400;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueMedium.otf') format('opentype');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueMediumItalic.otf') format('opentype');\n    font-weight: 500;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBold.otf') format('opentype');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBoldItalic.otf') format('opentype');\n    font-weight: 700;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueHeavy.otf') format('opentype');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueHeavyItalic.otf') format('opentype');\n    font-weight: 800;\n    font-style: italic;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBlack.otf') format('opentype');\n    font-weight: 900;\n    font-style: normal;\n    font-display: swap;\n}\n\n@font-face {\n    font-family: 'Helvetica Neue';\n    src: url('https://dibt9vplwriap.cloudfront.net/Helvetica-Neue/HelveticaNeueBlackItalic.otf') format('opentype');\n    font-weight: 900;\n    font-style: italic;\n    font-display: swap;\n}\n\n/* Tailwind (Storybook picks this up; build skips @import 'tailwindcss' via vite) */\n\n@import 'tailwindcss';\n\n@import \"tw-animate-css\";\n\n@import \"shadcn/tailwind.css\";\n\n/* Design Tokens — imported last so TCCE values always win */\n\n@import './tokens.css';\n\n@import \"@fontsource-variable/inter\";\n\n@custom-variant dark (&:is(.dark *));\n\n/* Extend Tailwind with token references */\n\n@theme inline {\n\n    /* Main Colors */\n\n    --color-main-blue-primary: var(--color-main-blue-primary);\n\n    --color-main-orange-primary: var(--color-main-orange-primary);\n\n    --color-main-grey: var(--color-main-grey);\n\n    --color-main-alternative: var(--color-main-alternative);\n\n    --color-main-alternative-secondary: var(--color-main-alternative-secondary);\n\n    --color-main-positive-state: var(--color-main-positive-state);\n\n    --color-main-warning-state: var(--color-main-warning-state);\n\n    --color-main-yellow-primary: var(--color-main-yellow-primary);\n\n    --color-main-white: var(--color-main-white);\n\n    --color-main-black: var(--color-main-black);\n\n    --color-main-light-borders: var(--color-main-light-borders);\n\n    --color-main-input-borders: var(--color-main-input-borders);\n\n    /* Dark */\n\n    --color-dark-100: var(--color-dark-100);\n\n    --color-dark-200: var(--color-dark-200);\n\n    --color-dark-300: var(--color-dark-300);\n\n    --color-dark-400: var(--color-dark-400);\n\n    --color-dark-500: var(--color-dark-500);\n\n    --color-dark-600: var(--color-dark-600);\n\n    --color-dark-700: var(--color-dark-700);\n\n    --color-dark-800: var(--color-dark-800);\n\n    --color-dark-900: var(--color-dark-900);\n\n    /* Light */\n\n    --color-light-100: var(--color-light-100);\n\n    --color-light-200: var(--color-light-200);\n\n    --color-light-300: var(--color-light-300);\n\n    --color-light-400: var(--color-light-400);\n\n    --color-light-500: var(--color-light-500);\n\n    --color-light-600: var(--color-light-600);\n\n    --color-light-700: var(--color-light-700);\n\n    --color-light-800: var(--color-light-800);\n\n    --color-light-900: var(--color-light-900);\n\n    --color-light-1000: var(--color-light-1000);\n\n    /* Blue */\n\n    --color-blue-100: var(--color-blue-100);\n\n    --color-blue-200: var(--color-blue-200);\n\n    --color-blue-300: var(--color-blue-300);\n\n    --color-blue-400: var(--color-blue-400);\n\n    --color-blue-500: var(--color-blue-500);\n\n    --color-blue-600: var(--color-blue-600);\n\n    --color-blue-700: var(--color-blue-700);\n\n    --color-blue-800: var(--color-blue-800);\n\n    --color-blue-900: var(--color-blue-900);\n\n    --color-blue-1000: var(--color-blue-1000);\n\n    /* Red */\n\n    --color-red-100: var(--color-red-100);\n\n    --color-red-200: var(--color-red-200);\n\n    --color-red-300: var(--color-red-300);\n\n    --color-red-400: var(--color-red-400);\n\n    --color-red-500: var(--color-red-500);\n\n    --color-red-600: var(--color-red-600);\n\n    --color-red-700: var(--color-red-700);\n\n    --color-red-800: var(--color-red-800);\n\n    --color-red-900: var(--color-red-900);\n\n    --color-red-1000: var(--color-red-1000);\n\n    /* Orange */\n\n    --color-orange-100: var(--color-orange-100);\n\n    --color-orange-200: var(--color-orange-200);\n\n    --color-orange-300: var(--color-orange-300);\n\n    --color-orange-400: var(--color-orange-400);\n\n    --color-orange-500: var(--color-orange-500);\n\n    --color-orange-700: var(--color-orange-700);\n\n    --color-orange-800: var(--color-orange-800);\n\n    --color-orange-900: var(--color-orange-900);\n\n    --color-orange-1000: var(--color-orange-1000);\n\n    /* Yellow */\n\n    --color-yellow-100: var(--color-yellow-100);\n\n    --color-yellow-200: var(--color-yellow-200);\n\n    --color-yellow-300: var(--color-yellow-300);\n\n    --color-yellow-400: var(--color-yellow-400);\n\n    --color-yellow-500: var(--color-yellow-500);\n\n    --color-yellow-600: var(--color-yellow-600);\n\n    --color-yellow-700: var(--color-yellow-700);\n\n    --color-yellow-800: var(--color-yellow-800);\n\n    --color-yellow-900: var(--color-yellow-900);\n\n    --color-yellow-1000: var(--color-yellow-1000);\n\n    /* Green */\n\n    --color-green-100: var(--color-green-100);\n\n    --color-green-200: var(--color-green-200);\n\n    --color-green-300: var(--color-green-300);\n\n    --color-green-400: var(--color-green-400);\n\n    --color-green-500: var(--color-green-500);\n\n    --color-green-600: var(--color-green-600);\n\n    --color-green-700: var(--color-green-700);\n\n    --color-green-800: var(--color-green-800);\n\n    --color-green-900: var(--color-green-900);\n\n    --color-green-1000: var(--color-green-1000);\n\n    /* Purple */\n\n    --color-purple-100: var(--color-purple-100);\n\n    --color-purple-200: var(--color-purple-200);\n\n    --color-purple-300: var(--color-purple-300);\n\n    --color-purple-400: var(--color-purple-400);\n\n    --color-purple-500: var(--color-purple-500);\n\n    --color-purple-600: var(--color-purple-600);\n\n    --color-purple-700: var(--color-purple-700);\n\n    --color-purple-800: var(--color-purple-800);\n\n    --color-purple-900: var(--color-purple-900);\n\n    --color-purple-1000: var(--color-purple-1000);\n\n    /* Border Radius */\n\n    --border-radius-button: var(--border-radius-button);\n\n    --border-radius-secondary-button: var(--border-radius-secondary-button);\n\n    --border-radius-card: var(--border-radius-card);\n\n    --border-radius-article: var(--border-radius-article);\n\n    --border-radius-outline: var(--border-radius-outline);\n\n    /* Shadows */\n\n    --shadow-black-card: var(--shadow-black-card);\n\n    --shadow-hover-black-card: var(--shadow-hover-black-card);\n\n    --shadow-black-button: var(--shadow-black-button);\n\n    --shadow-hover-black-button: var(--shadow-hover-black-button);\n\n    --shadow-hover-orange-button: var(--shadow-hover-orange-button);\n\n    --font-heading: var(--font-sans);\n\n    --font-sans: 'Inter Variable', sans-serif;\n\n    --color-sidebar-ring: var(--sidebar-ring);\n\n    --color-sidebar-border: var(--sidebar-border);\n\n    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n\n    --color-sidebar-accent: var(--sidebar-accent);\n\n    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n\n    --color-sidebar-primary: var(--sidebar-primary);\n\n    --color-sidebar-foreground: var(--sidebar-foreground);\n\n    --color-sidebar: var(--sidebar);\n\n    --color-chart-5: var(--chart-5);\n\n    --color-chart-4: var(--chart-4);\n\n    --color-chart-3: var(--chart-3);\n\n    --color-chart-2: var(--chart-2);\n\n    --color-chart-1: var(--chart-1);\n\n    --color-ring: var(--ring);\n\n    --color-input: var(--input);\n\n    --color-border: var(--border);\n\n    --color-destructive: var(--destructive);\n\n    --color-accent-foreground: var(--accent-foreground);\n\n    --color-accent: var(--accent);\n\n    --color-muted-foreground: var(--muted-foreground);\n\n    --color-muted: var(--muted);\n\n    --color-secondary-foreground: var(--secondary-foreground);\n\n    --color-secondary: var(--secondary);\n\n    --color-primary-foreground: var(--primary-foreground);\n\n    --color-primary: var(--primary);\n\n    --color-popover-foreground: var(--popover-foreground);\n\n    --color-popover: var(--popover);\n\n    --color-card-foreground: var(--card-foreground);\n\n    --color-card: var(--card);\n\n    --color-foreground: var(--foreground);\n\n    --color-background: var(--background);\n\n    --radius-sm: calc(var(--radius) * 0.6);\n\n    --radius-md: calc(var(--radius) * 0.8);\n\n    --radius-lg: var(--radius);\n\n    --radius-xl: calc(var(--radius) * 1.4);\n\n    --radius-2xl: calc(var(--radius) * 1.8);\n\n    --radius-3xl: calc(var(--radius) * 2.2);\n\n    --radius-4xl: calc(var(--radius) * 2.6);\n\n}\n\n/* ====================================\n\n   CUSTOM STYLES\n\n   ==================================== */\n\n* {\n\n    scrollbar-width: thin;\n\n    scrollbar-color: var(--color-main-orange-primary) #f1f1f1;\n\n}\n\n*::-webkit-scrollbar { width: 0.5rem; }\n\n*::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0.625rem; }\n\n*::-webkit-scrollbar-thumb { background: var(--color-main-orange-primary); border-radius: 0.625rem; }\n\n*::-webkit-scrollbar-thumb:hover { background: var(--color-main-orange-primary); }\n\n.my-toast {\n\n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n    font-size: 1rem;\n\n    font-style: normal;\n\n    font-weight: 400;\n\n    line-height: 176.782%;\n\n    border: none !important;\n\n    box-shadow: var(--shadow-black-card);\n\n    border-radius: var(--border-radius-article) !important;\n\n}\n\n[data-sonner-toast][data-type='success'] {\n\n    background: linear-gradient(135deg, var(--color-main-positive-state) 0%, var(--color-green-200) 100%) !important;\n\n    color: var(--color-main-white) !important;\n\n}\n\n[data-sonner-toast][data-type='error'] {\n\n    background: linear-gradient(135deg, var(--color-main-warning-state) 0%, var(--color-red-300) 100%) !important;\n\n    color: var(--color-main-white) !important;\n\n}\n\n[data-sonner-toaster] { bottom: 6rem !important; }\n\n[data-sonner-toaster][data-position='bottom-center'] { transform: translateY(-3rem) !important; }\n\n/* shadcn defaults not covered by tokens.css — chart and sidebar only */\n\n:root {\n\n    --chart-1: oklch(0.87 0 0);\n\n    --chart-2: oklch(0.556 0 0);\n\n    --chart-3: oklch(0.439 0 0);\n\n    --chart-4: oklch(0.371 0 0);\n\n    --chart-5: oklch(0.269 0 0);\n\n    --sidebar: oklch(0.985 0 0);\n\n    --sidebar-foreground: oklch(0.145 0 0);\n\n    --sidebar-primary: oklch(0.205 0 0);\n\n    --sidebar-primary-foreground: oklch(0.985 0 0);\n\n    --sidebar-accent: oklch(0.97 0 0);\n\n    --sidebar-accent-foreground: oklch(0.205 0 0);\n\n    --sidebar-border: oklch(0.922 0 0);\n\n    --sidebar-ring: oklch(0.708 0 0);\n\n}\n\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n\n    }\n  body {\n    @apply bg-background text-foreground;\n\n    }\n  html {\n    @apply font-sans;\n\n    }\n\n}"],"mappings":"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","names":[]}

package/dist/main.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "cancel" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, isLoading, children, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    isLoading?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { Button, buttonVariants };

package/dist/main.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "cancel" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, isLoading, children, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    isLoading?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { Button, buttonVariants };

package/dist/main.js

@@ -0,0 +1,61 @@
+import 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ui/Button/button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
+        cancel: "bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
+        outline: "border-2 border-white bg-transparent text-white hover:bg-white hover:text-[var(--color-main-orange-primary)] focus-visible:ring-white/30",
+        ghost: "bg-transparent text-foreground hover:bg-[var(--color-orange-100)] hover:text-[var(--color-main-orange-primary)] focus-visible:ring-ring/30"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-4 text-sm",
+        lg: "h-10 px-6 text-sm",
+        "icon-sm": "size-8 rounded-full p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "primary",
+  size = "md",
+  asChild = false,
+  isLoading = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props,
+      children
+    }
+  );
+}
+
+export { Button, buttonVariants };
+//# sourceMappingURL=main.js.map
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/ui/Button/button.tsx"],"names":[],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,4kBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACL,OAAA,EACI,sFAAA;AAAA,QACJ,SAAA,EACI,2GAAA;AAAA,QACJ,MAAA,EACI,4GAAA;AAAA,QACJ,OAAA,EACI,0IAAA;AAAA,QACJ,KAAA,EACI;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACF,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACf,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACZ,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACP,CAAA,EAIO;AACL,EAAA,MAAM,IAAA,GAAO,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,QAAA;AAEnC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"main.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n          primary:\n              'bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30',\n          secondary:\n              'bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30',\n          cancel:\n              'bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30',\n          outline:\n              'border-2 border-white bg-transparent text-white hover:bg-white hover:text-[var(--color-main-orange-primary)] focus-visible:ring-white/30',\n          ghost: \n              'bg-transparent text-foreground hover:bg-[var(--color-orange-100)] hover:text-[var(--color-main-orange-primary)] focus-visible:ring-ring/30',\n      },\n      size: {\n          sm: 'h-8 px-3 text-xs',\n          md: 'h-9 px-4 text-sm',\n          lg: 'h-10 px-6 text-sm',\n          'icon-sm': 'size-8 rounded-full p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n\nfunction Button({\n    className,\n    variant = 'primary',\n    size = 'md',\n    asChild = false,\n    isLoading = false,\n    children,\n    ...props\n}: React.ComponentProps<'button'> &\n    VariantProps<typeof buttonVariants> & {\n        asChild?: boolean\n        isLoading?: boolean\n    }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants }\n"]}

package/package.json

@@ -0,0 +1,114 @@
+{
+    "name": "@bizapps/design-system-testing",
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org"
+    },
+    "version": "0.4.0",
+    "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
+    "author": "BizAppsTotal <bizapps@tcce.biz>",
+    "type": "module",
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/main.cjs",
+    "module": "./dist/main.js",
+    "types": "./dist/main.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/main.d.ts",
+            "import": "./dist/main.js",
+            "require": "./dist/main.cjs"
+        },
+        "./styles": "./dist/main.css"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "tsup",
+        "build:storybook": "storybook build",
+        "type-check": "tsc -p tsconfig.build.json --noEmit",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
+        "format": "prettier --write .",
+        "preview": "vite preview",
+        "storybook": "storybook dev -p 6006 --host 0.0.0.0 --no-open",
+        "build-storybook": "storybook build"
+    },
+    "peerDependencies": {
+        "@remixicon/react": "^4.6.0",
+        "@tailwindcss/vite": "^4.1.13",
+        "@tanstack/react-table": "^8.21.3",
+        "formik": "^2.4.6",
+        "motion": "^12.23.13",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
+        "sonner": "^2.0.7",
+        "styled-components": ">=6.1.19",
+        "tailwindcss": "^4.1.13",
+        "yup": "^1.7.1"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.4",
+        "@remixicon/react": "^4.9.0",
+        "@storybook/addon-a11y": "^10.2.17",
+        "@storybook/addon-docs": "^10.2.17",
+        "@storybook/react-vite": "^10.2.17",
+        "@tailwindcss/vite": "^4.2.1",
+        "@tanstack/react-table": "^8.21.3",
+        "@types/node": "^24.12.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.4",
+        "eslint": "^9.39.4",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.26",
+        "eslint-plugin-storybook": "^10.2.17",
+        "formik": "^2.4.9",
+        "globals": "^16.5.0",
+        "motion": "^12.40.0",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.6.14",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "shadcn": "^4.8.1",
+        "sonner": "^2.0.7",
+        "storybook": "^10.2.17",
+        "styled-components": "6.3.6",
+        "tailwindcss": "^4.2.1",
+        "tsup": "^8.5.1",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "8.53.0",
+        "vite": "^7.3.1",
+        "vite-plugin-dts": "^4.5.4",
+        "yup": "^1.7.1"
+    },
+    "packageManager": "pnpm@10.25.0+sha512.5e82639027af37cf832061bcc6d639c219634488e0f2baebe785028a793de7b525ffcd3f7ff574f5e9860654e098fe852ba8ac5dd5cefe1767d23a020a92f501",
+    "pnpm": {
+        "overrides": {
+            "fast-uri": ">=3.1.2",
+            "postcss": ">=8.5.10"
+        }
+    },
+    "dependencies": {
+        "@fontsource-variable/inter": "^5.2.8",
+        "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^1.16.0",
+        "radix-ui": "^1.4.3",
+        "tailwind-merge": "^3.6.0",
+        "tw-animate-css": "^1.4.0"
+    }
+}