labellife-design-tool 0.3.0 → 0.5.0

package/README.md

@@ -14,7 +14,6 @@ Professional canvas editor built with React, TypeScript, and Konva.js. A powerfu
 - 📥 **Template Import** - Import JSON templates with user input collection
 - 🌐 **i18n Support** - Internationalization support (English, Dutch)
 - ⚙️ **Configurable** - Customize features, panels, and behavior
-- 🧩 **Modular Architecture** - Exclude panels, add custom panels, control features
 
 ## Installation
 
@@ -74,6 +73,9 @@ import {
   CanvasDesign, 
   Config,
   exportToPNG,
+  exportToJPG,
+  exportToJSON,
+  canvasToBlob,
   importFromJSON 
 } from 'labellife-design-tool';
 import type { CanvasElement } from 'labellife-design-tool';
@@ -89,397 +91,6 @@ function MyEditor() {
 }
 ```
 
-### Modular Configuration (v0.2.0+)
-
-The library supports a modular architecture that allows you to customize panels, features, and tools.
-
-#### Exclude Panels
-
-Hide panels you don't need:
-
-```tsx
-import { CanvasEditor } from 'labellife-design-tool';
-
-<CanvasEditor
-  name="Editor"
-  config={{
-    panels: {
-      disable: ['variables', 'export', 'background'], // Hide these panels
-    },
-  }}
-/>
-```
-
-#### Enable Only Specific Panels
-
-Show only the panels you need:
-
-```tsx
-<CanvasEditor
-  name="Minimal Editor"
-  config={{
-    panels: {
-      enable: ['elements', 'text', 'image'], // Only show these three
-    },
-  }}
-/>
-```
-
-#### Reorder Panels
-
-Customize the panel order:
-
-```tsx
-<CanvasEditor
-  name="Custom Order"
-  config={{
-    panels: {
-      order: ['text', 'elements', 'image', 'design'], // Custom order
-    },
-  }}
-/>
-```
-
-#### Feature Flags
-
-Control which features are available:
-
-```tsx
-<CanvasEditor
-  name="No Unsplash"
-  config={{
-    features: {
-      unsplash: false,        // Disable Unsplash integration
-      imageUpload: true,      // Keep image upload enabled
-      textTools: true,        // Keep text tools enabled
-      shapeTools: false,      // Disable shape tools
-    },
-  }}
-/>
-```
-
-#### Tool Configuration
-
-Control which tools are available:
-
-```tsx
-<CanvasEditor
-  name="Limited Tools"
-  config={{
-    tools: {
-      disable: ['line'], // Disable line tool
-      // Or enable only specific tools:
-      // enable: ['select', 'text'],
-    },
-  }}
-/>
-```
-
-#### Template Input Configuration
-
-Control how template input dialogs behave when importing templates:
-
-```tsx
-<CanvasEditor
-  name="Optional Template Inputs"
-  config={{
-    templateInput: {
-      show: true,      // Whether to show the input dialog (default: true)
-      required: false, // Whether input fields are required (default: true)
-    }
-  }}
-/>
-```
-
-Options:
-- `show`: When set to `false`, no input dialog will appear when importing templates, and all template variables will remain as placeholders.
-- `required`: When set to `false`, all input fields in the dialog will be marked as optional, allowing users to skip them if desired.
-
-#### Theme Customization
-
-Customize the visual appearance with themes:
-
-```tsx
-<CanvasEditor
-  name="Custom Theme"
-  config={{
-    theme: {
-      colors: {
-        primary: '#10b981', // Green instead of blue
-        background: {
-          main: '#1e293b',    // Slate-800
-          sidebar: '#0f172a', // Slate-900
-        },
-        button: {
-          primary: {
-            background: '#10b981', // Green-600
-            hover: '#059669',     // Green-700
-          }
-        }
-      }
-    }
-  }}
-/>
-```
-
-#### Using Pre-built Themes
-
-Use one of the built-in themes:
-
-```tsx
-import { CanvasEditor, LIGHT_THEME, DARK_THEME } from 'labellife-design-tool';
-
-<CanvasEditor
-  name="Light Theme Editor"
-  config={{
-    theme: {
-      colors: LIGHT_THEME
-    }
-  }}
-/>
-```
-
-### Adding Custom Panels
-
-You can add your own custom panels to extend the editor's functionality.
-
-#### Step 1: Create Your Custom Panel Component
-
-```tsx
-import React from 'react';
-import { PanelProps } from 'labellife-design-tool';
-import { Settings } from 'lucide-react';
-
-// Your custom panel component receives PanelProps
-const MyCustomPanel: React.FC<PanelProps> = ({
-  design,           // Current design state
-  currentPage,      // Current page
-  selectedElement,  // Currently selected element (or null)
-  selectedIds,      // Array of selected element IDs
-  setDesign,        // Function to update the design
-  updateElement,    // Function to update an element
-  deleteElement,    // Optional: Function to delete an element
-}) => {
-  return (
-    <div className="p-4">
-      <h3 className="text-white font-semibold mb-4 flex items-center gap-2">
-        <Settings className="w-5 h-5" />
-        Custom Settings
-      </h3>
-      
-      <div className="space-y-4">
-        {/* Display current design info */}
-        <div className="bg-gray-700 p-3 rounded">
-          <p className="text-sm text-gray-300">
-            Design: {design.name}
-          </p>
-          <p className="text-sm text-gray-300">
-            Pages: {design.pages.length}
-          </p>
-          <p className="text-sm text-gray-300">
-            Selected: {selectedElement?.name || 'None'}
-          </p>
-        </div>
-
-        {/* Custom actions */}
-        <button
-          onClick={() => {
-            setDesign({
-              ...design,
-              name: `Updated at ${new Date().toLocaleTimeString()}`,
-            });
-          }}
-          className="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-        >
-          Update Design Name
-        </button>
-
-        {/* Update selected element */}
-        {selectedElement && (
-          <button
-            onClick={() => {
-              updateElement(selectedElement.id, {
-                opacity: selectedElement.opacity === 1 ? 0.5 : 1,
-              });
-            }}
-            className="w-full bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
-          >
-            Toggle Opacity
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-```
-
-#### Step 2: Configure and Add Your Custom Panel
-
-```tsx
-import { CanvasEditor, CustomPanelConfig } from 'labellife-design-tool';
-import { Settings } from 'lucide-react';
-import { MyCustomPanel } from './MyCustomPanel';
-
-// Define your custom panel configuration
-const customPanel: CustomPanelConfig = {
-  id: 'my-custom-panel',        // Unique ID (must not conflict with built-in panels)
-  title: 'Custom Settings',     // Title shown in the panel header
-  icon: Settings,               // Optional: Icon component (from lucide-react or custom)
-  component: MyCustomPanel,      // Your panel component
-  
-  // Positioning options (choose one):
-  position: 'after',            // 'before' | 'after' | number
-  afterPanel: 'text',           // Insert after 'text' panel
-  // Or use:
-  // beforePanel: 'design',     // Insert before 'design' panel
-  // position: 2,               // Insert at index 2
-};
-
-// Use it in your editor
-function App() {
-  return (
-    <CanvasEditor
-      name="My Editor"
-      config={{
-        panels: {
-          custom: [customPanel], // Add your custom panel
-        },
-      }}
-    />
-  );
-}
-```
-
-#### Panel Positioning Options
-
-You can control where your custom panel appears:
-
-```tsx
-// Position after a specific panel
-{
-  id: 'panel-after',
-  position: 'after',
-  afterPanel: 'text'  // Appears after 'text' panel
-}
-
-// Position before a specific panel
-{
-  id: 'panel-before',
-  position: 'before',
-  beforePanel: 'design'  // Appears before 'design' panel
-}
-
-// Position at a specific index
-{
-  id: 'panel-index',
-  position: 2  // Appears at index 2 (0-based)
-}
-
-// Default: Add to end (no position specified)
-{
-  id: 'panel-end'
-}
-```
-
-#### Complete Example: Custom Panel with Multiple Features
-
-```tsx
-import React from 'react';
-import { CanvasEditor, CustomPanelConfig, PanelProps } from 'labellife-design-tool';
-import { Palette, Layers } from 'lucide-react';
-
-// Custom panel that manages design colors
-const ColorPalettePanel: React.FC<PanelProps> = ({
-  design,
-  setDesign,
-}) => {
-  const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
-  
-  return (
-    <div className="p-4">
-      <h3 className="text-white font-semibold mb-4">Color Palette</h3>
-      <div className="grid grid-cols-5 gap-2">
-        {colors.map((color) => (
-          <button
-            key={color}
-            onClick={() => {
-              setDesign({
-                ...design,
-                colors: [...(design.colors || []), color],
-              });
-            }}
-            className="w-10 h-10 rounded"
-            style={{ backgroundColor: color }}
-            title={color}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-// Custom panel configuration
-const colorPalettePanel: CustomPanelConfig = {
-  id: 'color-palette',
-  title: 'Colors',
-  icon: Palette,
-  component: ColorPalettePanel,
-  position: 'after',
-  afterPanel: 'design',
-};
-
-// Use multiple custom panels
-function App() {
-  return (
-    <CanvasEditor
-      name="Custom Editor"
-      config={{
-        panels: {
-          custom: [colorPalettePanel], // Add custom panel
-          disable: ['variables'],       // Hide variables panel
-          order: ['elements', 'text', 'color-palette', 'image'], // Custom order
-        },
-      }}
-    />
-  );
-}
-```
-
-#### Available Panel Props
-
-Your custom panel component receives these props:
-
-```tsx
-interface PanelProps {
-  // Core editor state
-  design: CanvasDesign;              // Current design
-  currentPage: Page;                 // Current page
-  selectedElement: CanvasElement | null;  // Selected element
-  selectedIds: string[];             // Array of selected IDs
-  
-  // Core editor actions
-  setDesign: (design: CanvasDesign) => void;
-  updateElement: (id: string, attrs: Partial<CanvasElement>) => void;
-  deleteElement?: (id: string) => void;
-  
-  // Additional props (panel-specific)
-  [key: string]: any;
-}
-```
-
-#### Built-in Panel IDs
-
-Available built-in panel IDs you can reference:
-- `'elements'` - Elements/Shapes panel
-- `'text'` - Text panel
-- `'image'` - Images panel
-- `'design'` - Design panel
-- `'background'` - Background panel
-- `'variables'` - Variables panel (if enabled)
-- `'export'` - Export panel (if enabled)
-
-For more advanced examples and API documentation, see [MODULAR_USAGE_GUIDE.md](./MODULAR_USAGE_GUIDE.md).
-
 ## Development
 
 To run the development server:
@@ -501,6 +112,53 @@ To build the app:
 bun run build:app
 ```
 
+### Canvas to Blob Export
+
+The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:
+
+```tsx
+import { canvasToBlob } from 'labellife-design-tool';
+
+// Example usage in a custom component
+const handleExport = async () => {
+  if (stageRef.current) {
+    try {
+      // Get canvas as PNG blob
+      const blob = await canvasToBlob(stageRef.current, 'png', { pixelRatio: 2 });
+      
+      // Example: Convert to base64
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = reader.result;
+        console.log('Base64:', base64data);
+        
+        // Use base64 data with APIs, embed in other applications, etc.
+      };
+      
+      // Example: Create File object for upload
+      const file = new File([blob], 'canvas-export.png', { type: 'image/png' });
+      
+      // Example: Create object URL for display
+      const blobUrl = URL.createObjectURL(blob);
+      // Remember to revoke URL when done
+      // URL.revokeObjectURL(blobUrl);
+      
+    } catch (error) {
+      console.error('Error exporting canvas:', error);
+    }
+  }
+};
+```
+
+The `canvasToBlob` function parameters:
+
+- `stage`: The Konva.Stage object to convert
+- `format`: Output format ('png' or 'jpg')
+- `options`: Additional options object
+  - `quality`: Quality for JPG format (0-1)
+  - `pixelRatio`: Resolution multiplier (default: 2)
+
 ## Project Structure
 
 - `src/lib/index.ts` - Library entry point (npm package)

package/dist/lib/CanvasEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAqFjF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAikC7D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAmFxE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA68B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/components/LeftMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ToolType, ActivePanelId, PanelConfig } from "../types";
+import { ToolType, ActivePanelId } from "../types";
 import { Config } from "../types/Config";
 export interface LeftMenuProps {
     tool: ToolType;
@@ -7,7 +7,6 @@ export interface LeftMenuProps {
     onSetTool: (tool: ToolType) => void;
     onSetActivePanel: (panel: ActivePanelId) => void;
     config?: Config;
-    panels?: PanelConfig[];
 }
 export declare const LeftMenu: React.FC<LeftMenuProps>;
 export default LeftMenu;

package/dist/lib/components/LeftMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAsBzC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkL5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAWzC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqH5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/lib/components/header/AppName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppName.d.ts","sourceRoot":"","sources":["../../../../src/components/header/AppName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAGpB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"AppName.d.ts","sourceRoot":"","sources":["../../../../src/components/header/AppName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAGpB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/lib/components/header/ExportButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExportButton.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ExportButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAW7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ExportButton.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ExportButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAW7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/components/header/HistoryControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/HistoryControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2BnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"HistoryControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/HistoryControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2BnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/lib/components/header/ZoomControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ZoomControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ZoomControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ZoomControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/index.css

@@ -11,8 +11,6 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
-    --color-green-600: oklch(62.7% 0.194 149.214);
-    --color-green-700: oklch(52.7% 0.154 150.069);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -217,12 +215,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .-top-1\.5 {
-    top: calc(var(--spacing) * -1.5);
-  }
-  .-right-1\.5 {
-    right: calc(var(--spacing) * -1.5);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -322,9 +314,6 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -358,9 +347,6 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
-  .w-10 {
-    width: calc(var(--spacing) * 10);
-  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -581,12 +567,6 @@
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
-  .bg-green-600 {
-    background-color: var(--color-green-600);
-  }
-  .bg-red-500 {
-    background-color: var(--color-red-500);
-  }
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -673,10 +653,6 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .leading-none {
-    --tw-leading: 1;
-    line-height: 1;
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -729,10 +705,6 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-sm {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -853,13 +825,6 @@
       }
     }
   }
-  .hover\:bg-green-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-700);
-      }
-    }
-  }
   .hover\:bg-red-500 {
     &:hover {
       @media (hover: hover) {
@@ -881,14 +846,6 @@
       }
     }
   }
-  .hover\:shadow {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
@@ -952,10 +909,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -1113,7 +1066,6 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
-      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;