Completed template

stories/controls/Checkbox.stories.js

@@ -47,12 +47,14 @@ export default {
     mode: {
       control: "select",
       options: ["standard", "inverse", "Standard", "Inverse"],
-      description: "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
+      description:
+        "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
     },
     state: {
       control: "select",
       options: ["default", "hover", "focus", "Default", "Hover", "Focus"],
-      description: "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      description:
+        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
     },
     disabled: {
       control: "boolean",
@@ -215,9 +217,12 @@ export const FigmaPascalCase = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Figma PascalCase Props (Standard/Inverse)</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Figma PascalCase Props (Standard/Inverse)
+        </h3>
         <p className="text-sm text-gray-400 mb-4">
-          These components accept both PascalCase (from Figma) and lowercase (from codebase) prop values.
+          These components accept both PascalCase (from Figma) and lowercase
+          (from codebase) prop values.
         </p>
         <div className="space-y-4">
           <Checkbox
@@ -237,7 +242,9 @@ export const FigmaPascalCase = () => {
         </div>
       </div>
       <div>
-        <h3 className="text-lg font-semibold mb-4 text-white">Mixed Case (backward compatibility)</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">
+          Mixed Case (backward compatibility)
+        </h3>
         <div className="space-y-4">
           <Checkbox
             label="Standard mode (lowercase) - still works"