labellife-design-tool 0.1.0 → 0.2.0

package/README.md

@@ -14,6 +14,7 @@ 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
 
@@ -88,6 +89,333 @@ 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'],
+    },
+  }}
+/>
+```
+
+### 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:

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAkFxE,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"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA+ExE,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,CAk8B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ToolType, ActivePanelId } from "../types";
+import { ToolType, ActivePanelId, PanelConfig } from "../types";
 import { Config } from "../types/Config";
 export interface LeftMenuProps {
     tool: ToolType;
@@ -7,6 +7,7 @@ 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,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"}
+{"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,CAwJ5C,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;AAG1B,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;AAI1B,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;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"}
+{"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"}

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;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"}
+{"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"}

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;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"}
+{"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"}

package/dist/lib/i18n.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Scoped i18n instance for LabelLife Design Tool
+ * Uses namespace 'labellife-editor' to avoid conflicts with consumer's i18n
+ */
+declare const EDITOR_NAMESPACE = "labellife-editor";
+declare const editorI18n: import("node_modules/i18next").i18n;
+export default editorI18n;
+export { EDITOR_NAMESPACE };
+//# sourceMappingURL=i18n.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/i18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,gBAAgB,qBAAqB,CAAC;AAG5C,QAAA,MAAM,UAAU,qCAAwB,CAAC;AA+BzC,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/lib/index.css

@@ -14,6 +14,8 @@
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
+    --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);
@@ -183,9 +185,6 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
-  ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -218,6 +217,12 @@
   .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);
   }
@@ -317,6 +322,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -350,6 +358,9 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -582,6 +593,12 @@
       background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
     }
   }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -668,6 +685,10 @@
     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);
@@ -723,6 +744,10 @@
     --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;
@@ -822,6 +847,13 @@
       }
     }
   }
+  .hover\:bg-green-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-700);
+      }
+    }
+  }
   .hover\:bg-red-600 {
     &:hover {
       @media (hover: hover) {
@@ -850,6 +882,14 @@
       }
     }
   }
+  .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);
@@ -913,6 +953,10 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -1070,6 +1114,7 @@
       --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;