@techv/design-system 0.1.4 → 0.1.6

package/README.md

@@ -6,8 +6,8 @@ A React component library and design token system. Single package — install on
 
 | Peer dependency | Version |
 |---|---|
-| react | ^18.0.0 |
-| react-dom | ^18.0.0 |
+| react | ^17.0.0 \| ^18.0.0 \| ^19.0.0 |
+| react-dom | ^17.0.0 \| ^18.0.0 \| ^19.0.0 |
 | styled-components | ^6.1.0 |
 
 ## Installation
@@ -30,6 +30,12 @@ Import the global CSS in your app entry point. This loads the CSS custom propert
 import '@techv/design-system/styles.css';
 ```
 
+To use utility classes (className-based styling), also import:
+
+```tsx
+import '@techv/design-system/utility.css';
+```
+
 ---
 
 ## Components
@@ -127,109 +133,66 @@ import { IconButton } from '@techv/design-system';
 
 ---
 
-## Design Tokens
-
-### Setup
-
-```tsx
-import '@techv/design-system/styles.css';
-```
-
-### Available exports
-
-| Export | Purpose | Example |
-|---|---|---|
-| `colors` | Full color palette | `colors.red[500]` → `'#EF4444'` |
-| `bg` | Background colors (alias of colors) | `bg.indigo[50]` → `'#EEF2FF'` |
-| `tx` | Text colors (alias of colors) | `tx.gray[700]` → `'#374151'` |
-| `bd` | Border colors (alias of colors) | `bd.gray[200]` → `'#E5E7EB'` |
-| `fl` | SVG fill colors (alias of colors) | `fl.green[400]` → `'#4ADE80'` |
-| `spacing` | 4px-base numeric scale | `spacing[4]` → `'16px'` |
-| `fs` | Font sizes | `fs.sm` → `'14px'` |
-| `fw` | Font weights | `fw[7]` → `'700'` |
-| `lh` | Line heights | `lh.base` → `1.5` |
-| `ta` | Text alignment | `ta.c` → `'center'` |
-| `br` | Border radius | `br.full` → `'9999px'` |
-| `bw` | Border widths | `bw[1]` → `'1px'` |
-| `sh` | Shadows | `sh[3]` → md elevation |
-| `op` | Opacity | `op[50]` → `'0.5'` |
-| `duration` | Animation durations | `duration.normal` → `'200ms'` |
-| `ease` | Easing curves | `ease.standard` |
-
-### CSS Custom Properties
-
-All tokens are also available as CSS variables:
+## Utility Classes
 
-```css
-/* Colors */
-background-color: var(--indigo-500);
-color: var(--gray-700);
-border-color: var(--red-200);
+Import `@techv/design-system/utility.css` to style elements with classNames — no inline styles needed.
 
-/* Spacing */
-padding: var(--spacing-4);           /* 16px */
-gap: var(--spacing-2);               /* 8px  */
+### Background colors
 
-/* Typography */
-font-size: var(--fs-lg);             /* 18px */
-font-weight: var(--fw-6);            /* 600  */
-
-/* Border radius / shadow */
-border-radius: var(--br-lg);         /* 8px  */
-box-shadow: var(--sh-3);
+```tsx
+<div>
+  {/* Solid colors */}
+  <div className="bg-indigo-500 p-4">Indigo 500</div>
+  <div className="bg-red-500 p-4">Red 500</div>
+  <div className="bg-green-500 p-4">Green 500</div>
+
+  {/* Light tints — cards, badges, alerts */}
+  <div className="bg-indigo-50 tx-indigo-700 p-4 br-lg">Indigo tint</div>
+  <div className="bg-green-50 tx-green-700 p-4 br-lg">Success tint</div>
+  <div className="bg-red-50 tx-red-700 p-4 br-lg">Danger tint</div>
+  <div className="bg-amber-50 tx-amber-700 p-4 br-lg">Warning tint</div>
+
+  {/* Neutral */}
+  <div className="bg-gray-100 p-4">Light gray</div>
+  <div className="bg-gray-800 tx-white p-4">Dark gray</div>
+  <div className="bg-white p-4">White</div>
+  <div className="bg-black tx-white p-4">Black</div>
+</div>
 ```
 
-### JavaScript Tokens
+**Color weight guide**
 
-#### Inline styles
+| Weight | Use case |
+|---|---|
+| `50` | Very light tint — backgrounds, alerts |
+| `100–200` | Soft highlight |
+| `300–400` | Muted fill |
+| `500` | Primary color |
+| `600–700` | Hover / pressed state |
+| `800–900` | Dark / high contrast |
 
-Use tokens directly in React `style` props:
+### Badge
 
 ```tsx
-import { bg, tx, spacing, br, fs, fw } from '@techv/design-system';
-
-function Badge({ children }: { children: React.ReactNode }) {
-  return (
-    <span
-      style={{
-        backgroundColor: bg.indigo[50],
-        color:           tx.indigo[700],
-        padding:         `${spacing[1]} ${spacing[2]}`,
-        borderRadius:    br.full,
-        fontSize:        fs.xs,
-        fontWeight:      fw[5],
-      }}
-    >
-      {children}
-    </span>
-  );
-}
+<span className="bg-indigo-50 tx-indigo-700 px-2 py-1 br-full fs-xs fw-5">
+  New
+</span>
 ```
 
-#### Alert / status banner
+### Alert / status banner
 
 ```tsx
-import { bg, tx, bd, spacing, br, fs, bw } from '@techv/design-system';
-
 type AlertType = 'success' | 'danger' | 'warning';
 
-const alertMap: Record<AlertType, React.CSSProperties> = {
-  success: { backgroundColor: bg.green[50],  color: tx.green[700],  border: `${bw[1]} solid ${bd.green[300]}`  },
-  danger:  { backgroundColor: bg.red[50],    color: tx.red[700],    border: `${bw[1]} solid ${bd.red[300]}`    },
-  warning: { backgroundColor: bg.amber[50],  color: tx.amber[700],  border: `${bw[1]} solid ${bd.amber[300]}`  },
+const alertStyles: Record<AlertType, string> = {
+  success: 'bg-green-50 tx-green-700 bd-green-300 border bw-1',
+  danger:  'bg-red-50 tx-red-700 bd-red-300 border bw-1',
+  warning: 'bg-amber-50 tx-amber-700 bd-amber-300 border bw-1',
 };
 
 function Alert({ type, message }: { type: AlertType; message: string }) {
   return (
-    <div
-      role="alert"
-      style={{
-        ...alertMap[type],
-        padding:      `${spacing[2]} ${spacing[4]}`,
-        borderRadius: br.md,
-        fontSize:     fs.sm,
-      }}
-    >
+    <div role="alert" className={`${alertStyles[type]} px-4 py-2 br-md fs-sm`}>
       {message}
     </div>
   );
@@ -240,196 +203,183 @@ function Alert({ type, message }: { type: AlertType; message: string }) {
 <Alert type="warning" message="Your session expires soon." />
 ```
 
-#### Card component
+### Card
 
 ```tsx
-import { bg, tx, bd, spacing, br, sh, fs, fw, bw } from '@techv/design-system';
-
 function Card({ title, body }: { title: string; body: string }) {
   return (
-    <div
-      style={{
-        backgroundColor: bg.white,
-        border:          `${bw[1]} solid ${bd.gray[200]}`,
-        borderRadius:    br['2xl'],
-        padding:         spacing[8],
-        boxShadow:       sh[3],
-        maxWidth:        '400px',
-      }}
-    >
-      <h2
-        style={{
-          margin:       0,
-          fontSize:     fs.lg,
-          fontWeight:   fw[6],
-          color:        tx.gray[900],
-          marginBottom: spacing[2],
-        }}
-      >
-        {title}
-      </h2>
-      <p
-        style={{
-          margin:     0,
-          fontSize:   fs.sm,
-          color:      tx.gray[500],
-          lineHeight: 1.6,
-        }}
-      >
-        {body}
-      </p>
+    <div className="bg-white bd-gray-200 border bw-1 br-2xl p-8 sh-3">
+      <h2 className="fs-lg fw-6 tx-gray-900 mb-2">{title}</h2>
+      <p className="fs-sm tx-gray-500 lh-relaxed">{body}</p>
     </div>
   );
 }
 ```
 
-#### Tag
+### Tag
 
 ```tsx
-import { bg, tx, bd, spacing, br, fs, fw, bw } from '@techv/design-system';
-
 function Tag({ label }: { label: string }) {
   return (
-    <span
-      style={{
-        backgroundColor: bg.gray[100],
-        color:           tx.gray[700],
-        padding:         `${spacing[1]} ${spacing[2]}`,
-        borderRadius:    br.md,
-        border:          `${bw[1]} solid ${bd.gray[200]}`,
-        fontSize:        fs.xs,
-        fontWeight:      fw[5],
-      }}
-    >
+    <span className="bg-gray-100 tx-gray-700 px-2 py-1 br-md bd-gray-200 border bw-1 fs-xs fw-5">
       {label}
     </span>
   );
 }
 ```
 
-#### Animated element
+### Animated element
 
 ```tsx
-import { bg, br, spacing, duration, ease } from '@techv/design-system';
-
 function FadeInBox({ children }: { children: React.ReactNode }) {
   return (
-    <div
-      style={{
-        padding:         spacing[6],
-        backgroundColor: bg.indigo[50],
-        borderRadius:    br.xl,
-        transition:      `opacity ${duration.normal} ${ease.standard}`,
-      }}
-    >
+    <div className="bg-indigo-50 br-xl p-6" style={{ transition: 'opacity var(--duration-normal) var(--ease-standard)' }}>
       {children}
     </div>
   );
 }
 ```
 
-#### Quick reference
+### Flex layout
 
 ```tsx
-import { bg, tx, bd, fl, spacing, fs, fw, lh, ta, br, bw, sh, op, duration, ease } from '@techv/design-system';
-
-bg.indigo[50]
-tx.gray[700]
-bd.gray[200]
-fl.green[400]
-bg.red[500]
-bg.white
-bg.black
-
-spacing[1]
-spacing[2]
-spacing[4]
-spacing[6]
-spacing[8]
-spacing.full
-
-fs.xs
-fs.lg
-fw[4]
-lh.tight
-ta.c
-
-br.sm
-bw[1]
-sh[1]
-op[50]
-
-duration.fast
-ease.standard
+<div className="flex items-center gap-4 px-4 py-2">
+  <span className="fw-6 tx-gray-900">Title</span>
+  <span className="tx-gray-500 fs-sm">Subtitle</span>
+</div>
 ```
 
-### Token Reference
+---
 
-#### Colors
+## Class Reference
 
-| Token | Value |
-|---|---|
-| `brand 50–900` | Indigo scale |
-| `success 50, 500` | Green |
-| `danger 50, 500` | Red |
-| `warning 50, 500` | Amber |
-| `info 50, 500` | Blue |
-| `gray 50–900` | Neutral gray scale |
+### Colors
 
-#### Spacing
+| Pattern | Example | Property |
+|---|---|---|
+| `bg-{color}-{weight}` | `bg-indigo-500` | `background-color` |
+| `tx-{color}-{weight}` | `tx-gray-700` | `color` |
+| `bd-{color}-{weight}` | `bd-gray-200` | `border-color` |
+| `bg-white` / `bg-black` | — | `background-color` |
+| `tx-white` / `tx-black` | — | `color` |
 
-| Token | Value |
-|---|---|
-| `2xs` | 2px |
-| `xs` | 4px |
-| `sm` | 8px |
-| `md` | 16px |
-| `lg` | 24px |
-| `xl` | 32px |
-| `2xl` | 48px |
-| `3xl` | 64px |
-
-#### Border radius
-
-| Token | Value |
-|---|---|
-| `none` | 0 |
-| `xs` | 2px |
-| `sm` | 4px |
-| `md` | 6px |
-| `lg` | 8px |
-| `xl` | 12px |
-| `2xl` | 16px |
-| `full` | 9999px |
+Available colors: `red` `orange` `amber` `yellow` `lime` `green` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `pink` `rose` `slate` `gray` `zinc`
 
----
+Weights: `50` `100` `200` `300` `400` `500` `600` `700` `800` `900`
 
-## Dark mode
+### Spacing
 
-The library ships with a built-in dark mode. Toggle it by setting `data-theme="dark"` on any ancestor element (typically `<html>` or `<body>`).
+| Pattern | Example | Values |
+|---|---|---|
+| `p-{n}` | `p-4` → 16px | 0–32 |
+| `px-{n}` | `px-2` → 8px | 0–32 |
+| `py-{n}` | `py-1` → 4px | 0–32 |
+| `pt/pb/pl/pr-{n}` | `pt-2` | 0–32 |
+| `m-{n}` | `m-4` | 0–32 |
+| `mx-{n}` / `my-{n}` | `mx-auto` | 0–32 + auto |
+| `mt/mb/ml/mr-{n}` | `mb-2` | 0–32 |
+| `gap-{n}` / `gap-x-{n}` / `gap-y-{n}` | `gap-4` | 0–32 |
 
-```tsx
-document.documentElement.setAttribute('data-theme', 'dark');
+Spacing values: 0=0px · 0.5=2px · 1=4px · 1.5=6px · 2=8px · 2.5=10px · 3=12px · 4=16px · 5=20px · 6=24px · 8=32px · 10=40px · 12=48px · 16=64px
 
-document.documentElement.removeAttribute('data-theme');
-```
+### Typography
 
-All components and CSS custom properties respond automatically.
+| Class | Value |
+|---|---|
+| `fs-xs` | 12px |
+| `fs-sm` | 14px |
+| `fs-md` | 16px |
+| `fs-lg` | 18px |
+| `fs-xl` | 20px |
+| `fs-2xl` | 24px |
+| `fs-3xl` | 30px |
+| `fs-4xl` | 36px |
+| `fs-5xl` | 48px |
+| `fw-3` | 300 |
+| `fw-4` | 400 |
+| `fw-5` | 500 |
+| `fw-6` | 600 |
+| `fw-7` | 700 |
+| `fw-8` | 800 |
+| `fw-9` | 900 |
+| `lh-tight` | 1.25 |
+| `lh-base` | 1.5 |
+| `lh-relaxed` | 1.625 |
+| `ta-l` / `ta-c` / `ta-r` | text-align |
+
+### Border
+
+| Class | Value |
+|---|---|
+| `border` | `border-style: solid` |
+| `border-t/b/l/r` | per-side solid border |
+| `bw-1` | 1px |
+| `bw-2` | 2px |
+| `bw-4` | 4px |
+| `br-none` | 0px |
+| `br-sm` | 2px |
+| `br-md` | 4px |
+| `br-lg` | 8px |
+| `br-xl` | 12px |
+| `br-2xl` | 16px |
+| `br-full` | 9999px |
+
+### Shadow & Opacity
+
+| Class | Description |
+|---|---|
+| `sh-1` – `sh-5` | Elevation levels |
+| `sh-none` | No shadow |
+| `op-0` – `op-100` | Opacity (0–1) |
+
+### Layout
+
+| Class | Value |
+|---|---|
+| `flex` | `display: flex` |
+| `inline-flex` | `display: inline-flex` |
+| `block` | `display: block` |
+| `hidden` | `display: none` |
+| `flex-row` | `flex-direction: row` |
+| `flex-col` | `flex-direction: column` |
+| `flex-wrap` | `flex-wrap: wrap` |
+| `items-center` | `align-items: center` |
+| `items-start` | `align-items: flex-start` |
+| `justify-center` | `justify-content: center` |
+| `justify-between` | `justify-content: space-between` |
+| `justify-end` | `justify-content: flex-end` |
+| `relative` | `position: relative` |
+| `absolute` | `position: absolute` |
+| `w-full` | `width: 100%` |
+| `h-full` | `height: 100%` |
 
 ---
 
-## TypeScript
+## CSS Custom Properties
 
-Full TypeScript support is included. All component props and token types are exported.
+All tokens are also available as CSS variables:
 
-```tsx
-import type { ButtonProps, IconButtonProps } from '@techv/design-system';
+```css
+background-color: var(--indigo-500);
+color: var(--gray-700);
+border-color: var(--red-200);
+
+padding: var(--spacing-4);           /* 16px */
+gap: var(--spacing-2);               /* 8px  */
+
+font-size: var(--fs-lg);             /* 18px */
+font-weight: var(--fw-6);            /* 600  */
+
+border-radius: var(--br-lg);         /* 8px  */
+box-shadow: var(--sh-3);
 ```
 
 ---
 
 ## Using tokens in styled-components
 
+Import token values for use in styled-components:
+
 ```tsx
 import styled from 'styled-components';
 import { bg, bd, tx, spacing, br, sh, fs, fw, bw } from '@techv/design-system';
@@ -453,3 +403,37 @@ const Body = styled.p`
   color:     ${tx.gray[500]};
 `;
 ```
+
+**Available token exports**
+
+| Export | Example |
+|---|---|
+| `bg`, `tx`, `bd`, `fl`, `colors` | `bg.indigo[50]`, `tx.gray[700]` |
+| `spacing` | `spacing[4]` → `'16px'` |
+| `fs`, `fw`, `lh`, `ta` | `fs.sm`, `fw[6]` |
+| `br`, `bw`, `sh`, `op` | `br.full`, `sh[3]` |
+| `duration`, `ease` | `duration.normal`, `ease.standard` |
+
+---
+
+## Dark mode
+
+The library ships with a built-in dark mode. Toggle it by setting `data-theme="dark"` on any ancestor element (typically `<html>` or `<body>`).
+
+```tsx
+document.documentElement.setAttribute('data-theme', 'dark');
+
+document.documentElement.removeAttribute('data-theme');
+```
+
+All components and CSS custom properties respond automatically.
+
+---
+
+## TypeScript
+
+Full TypeScript support is included. All component props and token types are exported.
+
+```tsx
+import type { ButtonProps, IconButtonProps } from '@techv/design-system';
+```

package/dist/utility.css

@@ -0,0 +1,100 @@
+.bg-red-50{background-color:var(--red-50)}.bg-red-100{background-color:var(--red-100)}.bg-red-200{background-color:var(--red-200)}.bg-red-300{background-color:var(--red-300)}.bg-red-400{background-color:var(--red-400)}.bg-red-500{background-color:var(--red-500)}.bg-red-600{background-color:var(--red-600)}.bg-red-700{background-color:var(--red-700)}.bg-red-800{background-color:var(--red-800)}.bg-red-900{background-color:var(--red-900)}
+.bg-orange-50{background-color:var(--orange-50)}.bg-orange-100{background-color:var(--orange-100)}.bg-orange-200{background-color:var(--orange-200)}.bg-orange-300{background-color:var(--orange-300)}.bg-orange-400{background-color:var(--orange-400)}.bg-orange-500{background-color:var(--orange-500)}.bg-orange-600{background-color:var(--orange-600)}.bg-orange-700{background-color:var(--orange-700)}.bg-orange-800{background-color:var(--orange-800)}.bg-orange-900{background-color:var(--orange-900)}
+.bg-amber-50{background-color:var(--amber-50)}.bg-amber-100{background-color:var(--amber-100)}.bg-amber-200{background-color:var(--amber-200)}.bg-amber-300{background-color:var(--amber-300)}.bg-amber-400{background-color:var(--amber-400)}.bg-amber-500{background-color:var(--amber-500)}.bg-amber-600{background-color:var(--amber-600)}.bg-amber-700{background-color:var(--amber-700)}.bg-amber-800{background-color:var(--amber-800)}.bg-amber-900{background-color:var(--amber-900)}
+.bg-yellow-50{background-color:var(--yellow-50)}.bg-yellow-100{background-color:var(--yellow-100)}.bg-yellow-200{background-color:var(--yellow-200)}.bg-yellow-300{background-color:var(--yellow-300)}.bg-yellow-400{background-color:var(--yellow-400)}.bg-yellow-500{background-color:var(--yellow-500)}.bg-yellow-600{background-color:var(--yellow-600)}.bg-yellow-700{background-color:var(--yellow-700)}.bg-yellow-800{background-color:var(--yellow-800)}.bg-yellow-900{background-color:var(--yellow-900)}
+.bg-lime-50{background-color:var(--lime-50)}.bg-lime-100{background-color:var(--lime-100)}.bg-lime-200{background-color:var(--lime-200)}.bg-lime-300{background-color:var(--lime-300)}.bg-lime-400{background-color:var(--lime-400)}.bg-lime-500{background-color:var(--lime-500)}.bg-lime-600{background-color:var(--lime-600)}.bg-lime-700{background-color:var(--lime-700)}.bg-lime-800{background-color:var(--lime-800)}.bg-lime-900{background-color:var(--lime-900)}
+.bg-green-50{background-color:var(--green-50)}.bg-green-100{background-color:var(--green-100)}.bg-green-200{background-color:var(--green-200)}.bg-green-300{background-color:var(--green-300)}.bg-green-400{background-color:var(--green-400)}.bg-green-500{background-color:var(--green-500)}.bg-green-600{background-color:var(--green-600)}.bg-green-700{background-color:var(--green-700)}.bg-green-800{background-color:var(--green-800)}.bg-green-900{background-color:var(--green-900)}
+.bg-teal-50{background-color:var(--teal-50)}.bg-teal-100{background-color:var(--teal-100)}.bg-teal-200{background-color:var(--teal-200)}.bg-teal-300{background-color:var(--teal-300)}.bg-teal-400{background-color:var(--teal-400)}.bg-teal-500{background-color:var(--teal-500)}.bg-teal-600{background-color:var(--teal-600)}.bg-teal-700{background-color:var(--teal-700)}.bg-teal-800{background-color:var(--teal-800)}.bg-teal-900{background-color:var(--teal-900)}
+.bg-cyan-50{background-color:var(--cyan-50)}.bg-cyan-100{background-color:var(--cyan-100)}.bg-cyan-200{background-color:var(--cyan-200)}.bg-cyan-300{background-color:var(--cyan-300)}.bg-cyan-400{background-color:var(--cyan-400)}.bg-cyan-500{background-color:var(--cyan-500)}.bg-cyan-600{background-color:var(--cyan-600)}.bg-cyan-700{background-color:var(--cyan-700)}.bg-cyan-800{background-color:var(--cyan-800)}.bg-cyan-900{background-color:var(--cyan-900)}
+.bg-sky-50{background-color:var(--sky-50)}.bg-sky-100{background-color:var(--sky-100)}.bg-sky-200{background-color:var(--sky-200)}.bg-sky-300{background-color:var(--sky-300)}.bg-sky-400{background-color:var(--sky-400)}.bg-sky-500{background-color:var(--sky-500)}.bg-sky-600{background-color:var(--sky-600)}.bg-sky-700{background-color:var(--sky-700)}.bg-sky-800{background-color:var(--sky-800)}.bg-sky-900{background-color:var(--sky-900)}
+.bg-blue-50{background-color:var(--blue-50)}.bg-blue-100{background-color:var(--blue-100)}.bg-blue-200{background-color:var(--blue-200)}.bg-blue-300{background-color:var(--blue-300)}.bg-blue-400{background-color:var(--blue-400)}.bg-blue-500{background-color:var(--blue-500)}.bg-blue-600{background-color:var(--blue-600)}.bg-blue-700{background-color:var(--blue-700)}.bg-blue-800{background-color:var(--blue-800)}.bg-blue-900{background-color:var(--blue-900)}
+.bg-indigo-50{background-color:var(--indigo-50)}.bg-indigo-100{background-color:var(--indigo-100)}.bg-indigo-200{background-color:var(--indigo-200)}.bg-indigo-300{background-color:var(--indigo-300)}.bg-indigo-400{background-color:var(--indigo-400)}.bg-indigo-500{background-color:var(--indigo-500)}.bg-indigo-600{background-color:var(--indigo-600)}.bg-indigo-700{background-color:var(--indigo-700)}.bg-indigo-800{background-color:var(--indigo-800)}.bg-indigo-900{background-color:var(--indigo-900)}
+.bg-violet-50{background-color:var(--violet-50)}.bg-violet-100{background-color:var(--violet-100)}.bg-violet-200{background-color:var(--violet-200)}.bg-violet-300{background-color:var(--violet-300)}.bg-violet-400{background-color:var(--violet-400)}.bg-violet-500{background-color:var(--violet-500)}.bg-violet-600{background-color:var(--violet-600)}.bg-violet-700{background-color:var(--violet-700)}.bg-violet-800{background-color:var(--violet-800)}.bg-violet-900{background-color:var(--violet-900)}
+.bg-purple-50{background-color:var(--purple-50)}.bg-purple-100{background-color:var(--purple-100)}.bg-purple-200{background-color:var(--purple-200)}.bg-purple-300{background-color:var(--purple-300)}.bg-purple-400{background-color:var(--purple-400)}.bg-purple-500{background-color:var(--purple-500)}.bg-purple-600{background-color:var(--purple-600)}.bg-purple-700{background-color:var(--purple-700)}.bg-purple-800{background-color:var(--purple-800)}.bg-purple-900{background-color:var(--purple-900)}
+.bg-pink-50{background-color:var(--pink-50)}.bg-pink-100{background-color:var(--pink-100)}.bg-pink-200{background-color:var(--pink-200)}.bg-pink-300{background-color:var(--pink-300)}.bg-pink-400{background-color:var(--pink-400)}.bg-pink-500{background-color:var(--pink-500)}.bg-pink-600{background-color:var(--pink-600)}.bg-pink-700{background-color:var(--pink-700)}.bg-pink-800{background-color:var(--pink-800)}.bg-pink-900{background-color:var(--pink-900)}
+.bg-rose-50{background-color:var(--rose-50)}.bg-rose-100{background-color:var(--rose-100)}.bg-rose-200{background-color:var(--rose-200)}.bg-rose-300{background-color:var(--rose-300)}.bg-rose-400{background-color:var(--rose-400)}.bg-rose-500{background-color:var(--rose-500)}.bg-rose-600{background-color:var(--rose-600)}.bg-rose-700{background-color:var(--rose-700)}.bg-rose-800{background-color:var(--rose-800)}.bg-rose-900{background-color:var(--rose-900)}
+.bg-slate-50{background-color:var(--slate-50)}.bg-slate-100{background-color:var(--slate-100)}.bg-slate-200{background-color:var(--slate-200)}.bg-slate-300{background-color:var(--slate-300)}.bg-slate-400{background-color:var(--slate-400)}.bg-slate-500{background-color:var(--slate-500)}.bg-slate-600{background-color:var(--slate-600)}.bg-slate-700{background-color:var(--slate-700)}.bg-slate-800{background-color:var(--slate-800)}.bg-slate-900{background-color:var(--slate-900)}
+.bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.bg-gray-200{background-color:var(--gray-200)}.bg-gray-300{background-color:var(--gray-300)}.bg-gray-400{background-color:var(--gray-400)}.bg-gray-500{background-color:var(--gray-500)}.bg-gray-600{background-color:var(--gray-600)}.bg-gray-700{background-color:var(--gray-700)}.bg-gray-800{background-color:var(--gray-800)}.bg-gray-900{background-color:var(--gray-900)}
+.bg-zinc-50{background-color:var(--zinc-50)}.bg-zinc-100{background-color:var(--zinc-100)}.bg-zinc-200{background-color:var(--zinc-200)}.bg-zinc-300{background-color:var(--zinc-300)}.bg-zinc-400{background-color:var(--zinc-400)}.bg-zinc-500{background-color:var(--zinc-500)}.bg-zinc-600{background-color:var(--zinc-600)}.bg-zinc-700{background-color:var(--zinc-700)}.bg-zinc-800{background-color:var(--zinc-800)}.bg-zinc-900{background-color:var(--zinc-900)}
+.bg-white{background-color:#ffffff}.bg-black{background-color:#000000}
+
+.tx-red-50{color:var(--red-50)}.tx-red-100{color:var(--red-100)}.tx-red-200{color:var(--red-200)}.tx-red-300{color:var(--red-300)}.tx-red-400{color:var(--red-400)}.tx-red-500{color:var(--red-500)}.tx-red-600{color:var(--red-600)}.tx-red-700{color:var(--red-700)}.tx-red-800{color:var(--red-800)}.tx-red-900{color:var(--red-900)}
+.tx-orange-50{color:var(--orange-50)}.tx-orange-100{color:var(--orange-100)}.tx-orange-200{color:var(--orange-200)}.tx-orange-300{color:var(--orange-300)}.tx-orange-400{color:var(--orange-400)}.tx-orange-500{color:var(--orange-500)}.tx-orange-600{color:var(--orange-600)}.tx-orange-700{color:var(--orange-700)}.tx-orange-800{color:var(--orange-800)}.tx-orange-900{color:var(--orange-900)}
+.tx-amber-50{color:var(--amber-50)}.tx-amber-100{color:var(--amber-100)}.tx-amber-200{color:var(--amber-200)}.tx-amber-300{color:var(--amber-300)}.tx-amber-400{color:var(--amber-400)}.tx-amber-500{color:var(--amber-500)}.tx-amber-600{color:var(--amber-600)}.tx-amber-700{color:var(--amber-700)}.tx-amber-800{color:var(--amber-800)}.tx-amber-900{color:var(--amber-900)}
+.tx-yellow-50{color:var(--yellow-50)}.tx-yellow-100{color:var(--yellow-100)}.tx-yellow-200{color:var(--yellow-200)}.tx-yellow-300{color:var(--yellow-300)}.tx-yellow-400{color:var(--yellow-400)}.tx-yellow-500{color:var(--yellow-500)}.tx-yellow-600{color:var(--yellow-600)}.tx-yellow-700{color:var(--yellow-700)}.tx-yellow-800{color:var(--yellow-800)}.tx-yellow-900{color:var(--yellow-900)}
+.tx-lime-50{color:var(--lime-50)}.tx-lime-100{color:var(--lime-100)}.tx-lime-200{color:var(--lime-200)}.tx-lime-300{color:var(--lime-300)}.tx-lime-400{color:var(--lime-400)}.tx-lime-500{color:var(--lime-500)}.tx-lime-600{color:var(--lime-600)}.tx-lime-700{color:var(--lime-700)}.tx-lime-800{color:var(--lime-800)}.tx-lime-900{color:var(--lime-900)}
+.tx-green-50{color:var(--green-50)}.tx-green-100{color:var(--green-100)}.tx-green-200{color:var(--green-200)}.tx-green-300{color:var(--green-300)}.tx-green-400{color:var(--green-400)}.tx-green-500{color:var(--green-500)}.tx-green-600{color:var(--green-600)}.tx-green-700{color:var(--green-700)}.tx-green-800{color:var(--green-800)}.tx-green-900{color:var(--green-900)}
+.tx-teal-50{color:var(--teal-50)}.tx-teal-100{color:var(--teal-100)}.tx-teal-200{color:var(--teal-200)}.tx-teal-300{color:var(--teal-300)}.tx-teal-400{color:var(--teal-400)}.tx-teal-500{color:var(--teal-500)}.tx-teal-600{color:var(--teal-600)}.tx-teal-700{color:var(--teal-700)}.tx-teal-800{color:var(--teal-800)}.tx-teal-900{color:var(--teal-900)}
+.tx-cyan-50{color:var(--cyan-50)}.tx-cyan-100{color:var(--cyan-100)}.tx-cyan-200{color:var(--cyan-200)}.tx-cyan-300{color:var(--cyan-300)}.tx-cyan-400{color:var(--cyan-400)}.tx-cyan-500{color:var(--cyan-500)}.tx-cyan-600{color:var(--cyan-600)}.tx-cyan-700{color:var(--cyan-700)}.tx-cyan-800{color:var(--cyan-800)}.tx-cyan-900{color:var(--cyan-900)}
+.tx-sky-50{color:var(--sky-50)}.tx-sky-100{color:var(--sky-100)}.tx-sky-200{color:var(--sky-200)}.tx-sky-300{color:var(--sky-300)}.tx-sky-400{color:var(--sky-400)}.tx-sky-500{color:var(--sky-500)}.tx-sky-600{color:var(--sky-600)}.tx-sky-700{color:var(--sky-700)}.tx-sky-800{color:var(--sky-800)}.tx-sky-900{color:var(--sky-900)}
+.tx-blue-50{color:var(--blue-50)}.tx-blue-100{color:var(--blue-100)}.tx-blue-200{color:var(--blue-200)}.tx-blue-300{color:var(--blue-300)}.tx-blue-400{color:var(--blue-400)}.tx-blue-500{color:var(--blue-500)}.tx-blue-600{color:var(--blue-600)}.tx-blue-700{color:var(--blue-700)}.tx-blue-800{color:var(--blue-800)}.tx-blue-900{color:var(--blue-900)}
+.tx-indigo-50{color:var(--indigo-50)}.tx-indigo-100{color:var(--indigo-100)}.tx-indigo-200{color:var(--indigo-200)}.tx-indigo-300{color:var(--indigo-300)}.tx-indigo-400{color:var(--indigo-400)}.tx-indigo-500{color:var(--indigo-500)}.tx-indigo-600{color:var(--indigo-600)}.tx-indigo-700{color:var(--indigo-700)}.tx-indigo-800{color:var(--indigo-800)}.tx-indigo-900{color:var(--indigo-900)}
+.tx-violet-50{color:var(--violet-50)}.tx-violet-100{color:var(--violet-100)}.tx-violet-200{color:var(--violet-200)}.tx-violet-300{color:var(--violet-300)}.tx-violet-400{color:var(--violet-400)}.tx-violet-500{color:var(--violet-500)}.tx-violet-600{color:var(--violet-600)}.tx-violet-700{color:var(--violet-700)}.tx-violet-800{color:var(--violet-800)}.tx-violet-900{color:var(--violet-900)}
+.tx-purple-50{color:var(--purple-50)}.tx-purple-100{color:var(--purple-100)}.tx-purple-200{color:var(--purple-200)}.tx-purple-300{color:var(--purple-300)}.tx-purple-400{color:var(--purple-400)}.tx-purple-500{color:var(--purple-500)}.tx-purple-600{color:var(--purple-600)}.tx-purple-700{color:var(--purple-700)}.tx-purple-800{color:var(--purple-800)}.tx-purple-900{color:var(--purple-900)}
+.tx-pink-50{color:var(--pink-50)}.tx-pink-100{color:var(--pink-100)}.tx-pink-200{color:var(--pink-200)}.tx-pink-300{color:var(--pink-300)}.tx-pink-400{color:var(--pink-400)}.tx-pink-500{color:var(--pink-500)}.tx-pink-600{color:var(--pink-600)}.tx-pink-700{color:var(--pink-700)}.tx-pink-800{color:var(--pink-800)}.tx-pink-900{color:var(--pink-900)}
+.tx-rose-50{color:var(--rose-50)}.tx-rose-100{color:var(--rose-100)}.tx-rose-200{color:var(--rose-200)}.tx-rose-300{color:var(--rose-300)}.tx-rose-400{color:var(--rose-400)}.tx-rose-500{color:var(--rose-500)}.tx-rose-600{color:var(--rose-600)}.tx-rose-700{color:var(--rose-700)}.tx-rose-800{color:var(--rose-800)}.tx-rose-900{color:var(--rose-900)}
+.tx-slate-50{color:var(--slate-50)}.tx-slate-100{color:var(--slate-100)}.tx-slate-200{color:var(--slate-200)}.tx-slate-300{color:var(--slate-300)}.tx-slate-400{color:var(--slate-400)}.tx-slate-500{color:var(--slate-500)}.tx-slate-600{color:var(--slate-600)}.tx-slate-700{color:var(--slate-700)}.tx-slate-800{color:var(--slate-800)}.tx-slate-900{color:var(--slate-900)}
+.tx-gray-50{color:var(--gray-50)}.tx-gray-100{color:var(--gray-100)}.tx-gray-200{color:var(--gray-200)}.tx-gray-300{color:var(--gray-300)}.tx-gray-400{color:var(--gray-400)}.tx-gray-500{color:var(--gray-500)}.tx-gray-600{color:var(--gray-600)}.tx-gray-700{color:var(--gray-700)}.tx-gray-800{color:var(--gray-800)}.tx-gray-900{color:var(--gray-900)}
+.tx-zinc-50{color:var(--zinc-50)}.tx-zinc-100{color:var(--zinc-100)}.tx-zinc-200{color:var(--zinc-200)}.tx-zinc-300{color:var(--zinc-300)}.tx-zinc-400{color:var(--zinc-400)}.tx-zinc-500{color:var(--zinc-500)}.tx-zinc-600{color:var(--zinc-600)}.tx-zinc-700{color:var(--zinc-700)}.tx-zinc-800{color:var(--zinc-800)}.tx-zinc-900{color:var(--zinc-900)}
+.tx-white{color:#ffffff}.tx-black{color:#000000}
+
+.bd-red-50{border-color:var(--red-50)}.bd-red-100{border-color:var(--red-100)}.bd-red-200{border-color:var(--red-200)}.bd-red-300{border-color:var(--red-300)}.bd-red-400{border-color:var(--red-400)}.bd-red-500{border-color:var(--red-500)}.bd-red-600{border-color:var(--red-600)}.bd-red-700{border-color:var(--red-700)}.bd-red-800{border-color:var(--red-800)}.bd-red-900{border-color:var(--red-900)}
+.bd-orange-50{border-color:var(--orange-50)}.bd-orange-100{border-color:var(--orange-100)}.bd-orange-200{border-color:var(--orange-200)}.bd-orange-300{border-color:var(--orange-300)}.bd-orange-400{border-color:var(--orange-400)}.bd-orange-500{border-color:var(--orange-500)}.bd-orange-600{border-color:var(--orange-600)}.bd-orange-700{border-color:var(--orange-700)}.bd-orange-800{border-color:var(--orange-800)}.bd-orange-900{border-color:var(--orange-900)}
+.bd-amber-50{border-color:var(--amber-50)}.bd-amber-100{border-color:var(--amber-100)}.bd-amber-200{border-color:var(--amber-200)}.bd-amber-300{border-color:var(--amber-300)}.bd-amber-400{border-color:var(--amber-400)}.bd-amber-500{border-color:var(--amber-500)}.bd-amber-600{border-color:var(--amber-600)}.bd-amber-700{border-color:var(--amber-700)}.bd-amber-800{border-color:var(--amber-800)}.bd-amber-900{border-color:var(--amber-900)}
+.bd-green-50{border-color:var(--green-50)}.bd-green-100{border-color:var(--green-100)}.bd-green-200{border-color:var(--green-200)}.bd-green-300{border-color:var(--green-300)}.bd-green-400{border-color:var(--green-400)}.bd-green-500{border-color:var(--green-500)}.bd-green-600{border-color:var(--green-600)}.bd-green-700{border-color:var(--green-700)}.bd-green-800{border-color:var(--green-800)}.bd-green-900{border-color:var(--green-900)}
+.bd-blue-50{border-color:var(--blue-50)}.bd-blue-100{border-color:var(--blue-100)}.bd-blue-200{border-color:var(--blue-200)}.bd-blue-300{border-color:var(--blue-300)}.bd-blue-400{border-color:var(--blue-400)}.bd-blue-500{border-color:var(--blue-500)}.bd-blue-600{border-color:var(--blue-600)}.bd-blue-700{border-color:var(--blue-700)}.bd-blue-800{border-color:var(--blue-800)}.bd-blue-900{border-color:var(--blue-900)}
+.bd-indigo-50{border-color:var(--indigo-50)}.bd-indigo-100{border-color:var(--indigo-100)}.bd-indigo-200{border-color:var(--indigo-200)}.bd-indigo-300{border-color:var(--indigo-300)}.bd-indigo-400{border-color:var(--indigo-400)}.bd-indigo-500{border-color:var(--indigo-500)}.bd-indigo-600{border-color:var(--indigo-600)}.bd-indigo-700{border-color:var(--indigo-700)}.bd-indigo-800{border-color:var(--indigo-800)}.bd-indigo-900{border-color:var(--indigo-900)}
+.bd-gray-50{border-color:var(--gray-50)}.bd-gray-100{border-color:var(--gray-100)}.bd-gray-200{border-color:var(--gray-200)}.bd-gray-300{border-color:var(--gray-300)}.bd-gray-400{border-color:var(--gray-400)}.bd-gray-500{border-color:var(--gray-500)}.bd-gray-600{border-color:var(--gray-600)}.bd-gray-700{border-color:var(--gray-700)}.bd-gray-800{border-color:var(--gray-800)}.bd-gray-900{border-color:var(--gray-900)}
+.bd-slate-50{border-color:var(--slate-50)}.bd-slate-100{border-color:var(--slate-100)}.bd-slate-200{border-color:var(--slate-200)}.bd-slate-300{border-color:var(--slate-300)}.bd-slate-400{border-color:var(--slate-400)}.bd-slate-500{border-color:var(--slate-500)}.bd-slate-600{border-color:var(--slate-600)}.bd-slate-700{border-color:var(--slate-700)}.bd-slate-800{border-color:var(--slate-800)}.bd-slate-900{border-color:var(--slate-900)}
+.bd-white{border-color:#ffffff}.bd-black{border-color:#000000}
+
+.fl-red-500{fill:var(--red-500)}.fl-green-500{fill:var(--green-500)}.fl-blue-500{fill:var(--blue-500)}.fl-indigo-500{fill:var(--indigo-500)}.fl-gray-400{fill:var(--gray-400)}.fl-gray-500{fill:var(--gray-500)}.fl-gray-600{fill:var(--gray-600)}.fl-white{fill:#ffffff}.fl-black{fill:#000000}
+.fl-red-400{fill:var(--red-400)}.fl-green-400{fill:var(--green-400)}.fl-blue-400{fill:var(--blue-400)}.fl-amber-400{fill:var(--amber-400)}.fl-orange-500{fill:var(--orange-500)}.fl-pink-500{fill:var(--pink-500)}
+
+.p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-5{padding:var(--spacing-5)}.p-6{padding:var(--spacing-6)}.p-7{padding:var(--spacing-7)}.p-8{padding:var(--spacing-8)}.p-9{padding:var(--spacing-9)}.p-10{padding:var(--spacing-10)}.p-12{padding:var(--spacing-12)}.p-14{padding:var(--spacing-14)}.p-16{padding:var(--spacing-16)}.p-20{padding:var(--spacing-20)}.p-24{padding:var(--spacing-24)}.p-32{padding:var(--spacing-32)}
+.px-0{padding-left:var(--spacing-0);padding-right:var(--spacing-0)}.px-1{padding-left:var(--spacing-1);padding-right:var(--spacing-1)}.px-2{padding-left:var(--spacing-2);padding-right:var(--spacing-2)}.px-3{padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.px-4{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.px-5{padding-left:var(--spacing-5);padding-right:var(--spacing-5)}.px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}.px-8{padding-left:var(--spacing-8);padding-right:var(--spacing-8)}.px-10{padding-left:var(--spacing-10);padding-right:var(--spacing-10)}.px-12{padding-left:var(--spacing-12);padding-right:var(--spacing-12)}.px-16{padding-left:var(--spacing-16);padding-right:var(--spacing-16)}
+.py-0{padding-top:var(--spacing-0);padding-bottom:var(--spacing-0)}.py-1{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}.py-2{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.py-3{padding-top:var(--spacing-3);padding-bottom:var(--spacing-3)}.py-4{padding-top:var(--spacing-4);padding-bottom:var(--spacing-4)}.py-5{padding-top:var(--spacing-5);padding-bottom:var(--spacing-5)}.py-6{padding-top:var(--spacing-6);padding-bottom:var(--spacing-6)}.py-8{padding-top:var(--spacing-8);padding-bottom:var(--spacing-8)}.py-10{padding-top:var(--spacing-10);padding-bottom:var(--spacing-10)}.py-12{padding-top:var(--spacing-12);padding-bottom:var(--spacing-12)}
+.pt-0{padding-top:var(--spacing-0)}.pt-1{padding-top:var(--spacing-1)}.pt-2{padding-top:var(--spacing-2)}.pt-3{padding-top:var(--spacing-3)}.pt-4{padding-top:var(--spacing-4)}.pt-5{padding-top:var(--spacing-5)}.pt-6{padding-top:var(--spacing-6)}.pt-8{padding-top:var(--spacing-8)}.pt-10{padding-top:var(--spacing-10)}.pt-12{padding-top:var(--spacing-12)}
+.pb-0{padding-bottom:var(--spacing-0)}.pb-1{padding-bottom:var(--spacing-1)}.pb-2{padding-bottom:var(--spacing-2)}.pb-3{padding-bottom:var(--spacing-3)}.pb-4{padding-bottom:var(--spacing-4)}.pb-5{padding-bottom:var(--spacing-5)}.pb-6{padding-bottom:var(--spacing-6)}.pb-8{padding-bottom:var(--spacing-8)}.pb-10{padding-bottom:var(--spacing-10)}.pb-12{padding-bottom:var(--spacing-12)}
+.pl-0{padding-left:var(--spacing-0)}.pl-1{padding-left:var(--spacing-1)}.pl-2{padding-left:var(--spacing-2)}.pl-3{padding-left:var(--spacing-3)}.pl-4{padding-left:var(--spacing-4)}.pl-5{padding-left:var(--spacing-5)}.pl-6{padding-left:var(--spacing-6)}.pl-8{padding-left:var(--spacing-8)}.pl-10{padding-left:var(--spacing-10)}.pl-12{padding-left:var(--spacing-12)}
+.pr-0{padding-right:var(--spacing-0)}.pr-1{padding-right:var(--spacing-1)}.pr-2{padding-right:var(--spacing-2)}.pr-3{padding-right:var(--spacing-3)}.pr-4{padding-right:var(--spacing-4)}.pr-5{padding-right:var(--spacing-5)}.pr-6{padding-right:var(--spacing-6)}.pr-8{padding-right:var(--spacing-8)}.pr-10{padding-right:var(--spacing-10)}.pr-12{padding-right:var(--spacing-12)}
+
+.m-0{margin:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.m-9{margin:var(--spacing-9)}.m-10{margin:var(--spacing-10)}.m-12{margin:var(--spacing-12)}.m-16{margin:var(--spacing-16)}.m-auto{margin:auto}
+.mx-0{margin-left:var(--spacing-0);margin-right:var(--spacing-0)}.mx-1{margin-left:var(--spacing-1);margin-right:var(--spacing-1)}.mx-2{margin-left:var(--spacing-2);margin-right:var(--spacing-2)}.mx-3{margin-left:var(--spacing-3);margin-right:var(--spacing-3)}.mx-4{margin-left:var(--spacing-4);margin-right:var(--spacing-4)}.mx-6{margin-left:var(--spacing-6);margin-right:var(--spacing-6)}.mx-8{margin-left:var(--spacing-8);margin-right:var(--spacing-8)}.mx-auto{margin-left:auto;margin-right:auto}
+.my-0{margin-top:var(--spacing-0);margin-bottom:var(--spacing-0)}.my-1{margin-top:var(--spacing-1);margin-bottom:var(--spacing-1)}.my-2{margin-top:var(--spacing-2);margin-bottom:var(--spacing-2)}.my-3{margin-top:var(--spacing-3);margin-bottom:var(--spacing-3)}.my-4{margin-top:var(--spacing-4);margin-bottom:var(--spacing-4)}.my-6{margin-top:var(--spacing-6);margin-bottom:var(--spacing-6)}.my-8{margin-top:var(--spacing-8);margin-bottom:var(--spacing-8)}.my-auto{margin-top:auto;margin-bottom:auto}
+.mt-0{margin-top:var(--spacing-0)}.mt-1{margin-top:var(--spacing-1)}.mt-2{margin-top:var(--spacing-2)}.mt-3{margin-top:var(--spacing-3)}.mt-4{margin-top:var(--spacing-4)}.mt-5{margin-top:var(--spacing-5)}.mt-6{margin-top:var(--spacing-6)}.mt-8{margin-top:var(--spacing-8)}.mt-10{margin-top:var(--spacing-10)}.mt-12{margin-top:var(--spacing-12)}.mt-auto{margin-top:auto}
+.mb-0{margin-bottom:var(--spacing-0)}.mb-1{margin-bottom:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-3{margin-bottom:var(--spacing-3)}.mb-4{margin-bottom:var(--spacing-4)}.mb-5{margin-bottom:var(--spacing-5)}.mb-6{margin-bottom:var(--spacing-6)}.mb-8{margin-bottom:var(--spacing-8)}.mb-10{margin-bottom:var(--spacing-10)}.mb-12{margin-bottom:var(--spacing-12)}.mb-auto{margin-bottom:auto}
+.ml-0{margin-left:var(--spacing-0)}.ml-1{margin-left:var(--spacing-1)}.ml-2{margin-left:var(--spacing-2)}.ml-3{margin-left:var(--spacing-3)}.ml-4{margin-left:var(--spacing-4)}.ml-6{margin-left:var(--spacing-6)}.ml-8{margin-left:var(--spacing-8)}.ml-auto{margin-left:auto}
+.mr-0{margin-right:var(--spacing-0)}.mr-1{margin-right:var(--spacing-1)}.mr-2{margin-right:var(--spacing-2)}.mr-3{margin-right:var(--spacing-3)}.mr-4{margin-right:var(--spacing-4)}.mr-6{margin-right:var(--spacing-6)}.mr-8{margin-right:var(--spacing-8)}.mr-auto{margin-right:auto}
+
+.g-0{gap:var(--spacing-0)}.g-1{gap:var(--spacing-1)}.g-2{gap:var(--spacing-2)}.g-3{gap:var(--spacing-3)}.g-4{gap:var(--spacing-4)}.g-5{gap:var(--spacing-5)}.g-6{gap:var(--spacing-6)}.g-7{gap:var(--spacing-7)}.g-8{gap:var(--spacing-8)}.g-10{gap:var(--spacing-10)}.g-12{gap:var(--spacing-12)}
+.gx-1{column-gap:var(--spacing-1)}.gx-2{column-gap:var(--spacing-2)}.gx-3{column-gap:var(--spacing-3)}.gx-4{column-gap:var(--spacing-4)}.gx-6{column-gap:var(--spacing-6)}.gx-8{column-gap:var(--spacing-8)}
+.gy-1{row-gap:var(--spacing-1)}.gy-2{row-gap:var(--spacing-2)}.gy-3{row-gap:var(--spacing-3)}.gy-4{row-gap:var(--spacing-4)}.gy-6{row-gap:var(--spacing-6)}.gy-8{row-gap:var(--spacing-8)}
+
+.w-1{width:var(--spacing-1)}.w-2{width:var(--spacing-2)}.w-3{width:var(--spacing-3)}.w-4{width:var(--spacing-4)}.w-5{width:var(--spacing-5)}.w-6{width:var(--spacing-6)}.w-7{width:var(--spacing-7)}.w-8{width:var(--spacing-8)}.w-10{width:var(--spacing-10)}.w-12{width:var(--spacing-12)}.w-16{width:var(--spacing-16)}.w-20{width:var(--spacing-20)}.w-24{width:var(--spacing-24)}.w-32{width:var(--spacing-32)}.w-full{width:100%}.w-auto{width:auto}
+.h-1{height:var(--spacing-1)}.h-2{height:var(--spacing-2)}.h-3{height:var(--spacing-3)}.h-4{height:var(--spacing-4)}.h-5{height:var(--spacing-5)}.h-6{height:var(--spacing-6)}.h-7{height:var(--spacing-7)}.h-8{height:var(--spacing-8)}.h-10{height:var(--spacing-10)}.h-12{height:var(--spacing-12)}.h-16{height:var(--spacing-16)}.h-20{height:var(--spacing-20)}.h-24{height:var(--spacing-24)}.h-32{height:var(--spacing-32)}.h-full{height:100%}.h-auto{height:auto}
+
+.fs-xs{font-size:var(--fs-xs)}.fs-sm{font-size:var(--fs-sm)}.fs-md{font-size:var(--fs-md)}.fs-lg{font-size:var(--fs-lg)}.fs-xl{font-size:var(--fs-xl)}.fs-2xl{font-size:var(--fs-2xl)}.fs-3xl{font-size:var(--fs-3xl)}.fs-4xl{font-size:var(--fs-4xl)}.fs-5xl{font-size:var(--fs-5xl)}
+.fw-3{font-weight:var(--fw-3)}.fw-4{font-weight:var(--fw-4)}.fw-5{font-weight:var(--fw-5)}.fw-6{font-weight:var(--fw-6)}.fw-7{font-weight:var(--fw-7)}.fw-8{font-weight:var(--fw-8)}.fw-9{font-weight:var(--fw-9)}
+.lh-none{line-height:1}.lh-tight{line-height:1.25}.lh-snug{line-height:1.375}.lh-base{line-height:1.5}.lh-relaxed{line-height:1.625}.lh-loose{line-height:2}
+.ta-l{text-align:left}.ta-r{text-align:right}.ta-c{text-align:center}.ta-j{text-align:justify}
+
+.br-none{border-radius:var(--br-none)}.br-sm{border-radius:var(--br-sm)}.br-md{border-radius:var(--br-md)}.br-lg{border-radius:var(--br-lg)}.br-xl{border-radius:var(--br-xl)}.br-2xl{border-radius:var(--br-2xl)}.br-3xl{border-radius:var(--br-3xl)}.br-full{border-radius:var(--br-full)}
+.bw-0{border-width:0;border-style:solid}.bw-1{border-width:var(--bw-1);border-style:solid}.bw-2{border-width:var(--bw-2);border-style:solid}.bw-4{border-width:var(--bw-4);border-style:solid}
+.sh-none{box-shadow:none}.sh-1{box-shadow:var(--sh-1)}.sh-2{box-shadow:var(--sh-2)}.sh-3{box-shadow:var(--sh-3)}.sh-4{box-shadow:var(--sh-4)}.sh-5{box-shadow:var(--sh-5)}
+.op-0{opacity:0}.op-5{opacity:0.05}.op-10{opacity:0.1}.op-20{opacity:0.2}.op-25{opacity:0.25}.op-30{opacity:0.3}.op-40{opacity:0.4}.op-50{opacity:0.5}.op-60{opacity:0.6}.op-70{opacity:0.7}.op-75{opacity:0.75}.op-80{opacity:0.8}.op-90{opacity:0.9}.op-95{opacity:0.95}.op-100{opacity:1}
+
+.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}
+.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
+.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}
+.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}
+.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}
+.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}
+
+.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
+.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}
+.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}
+.select-none{user-select:none}.whitespace-nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.italic{font-style:italic}.not-italic{font-style:normal}.underline{text-decoration:underline}.no-underline{text-decoration:none}.line-through{text-decoration:line-through}
+.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}
+.border{border-width:1px;border-style:solid}.border-t{border-top-width:1px;border-top-style:solid}.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-l{border-left-width:1px;border-left-style:solid}.border-r{border-right-width:1px;border-right-style:solid}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techv/design-system",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "author": "Pranav V K <pranavvk@techversantinfotech.com>",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -17,18 +17,20 @@
         "default": "./dist/cjs/index.js"
       }
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./utility.css": "./dist/utility.css"
   },
   "files": [
     "dist",
     "README.md"
   ],
   "sideEffects": [
-    "./dist/styles.css"
+    "./dist/styles.css",
+    "./dist/utility.css"
   ],
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^6.1.0"
   },
   "devDependencies": {
@@ -47,7 +49,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.ts --configPlugin typescript && tsc -p tsconfig.build.json && cp node_modules/@techv/tokens/dist/global.css dist/styles.css",
+    "build": "rollup -c rollup.config.ts --configPlugin typescript && tsc -p tsconfig.build.json && cp node_modules/@techv/tokens/dist/global.css dist/styles.css && cp node_modules/@techv/tokens/dist/utility.css dist/utility.css",
     "lint": "tsc --noEmit",
     "clean": "rm -rf dist"
   }