How to use the hybrids.define function in hybrids

border: 0;
        outline: none;
        color: inherit;
        padding: 6px;
        border: 1px solid #CCC;
        box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
    }

<form id="new-todo-form">
    <input placeholder="What needs to be done?" type="text" id="new-todo">
</form>
      `,
};

define('todo-input', TodoInput);

#list-container {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #e6e6e6;
    }
    
    <h1>Todos Hybrids</h1>
    
    <ul id="list-container">
        ${list.map((element, index) =&gt; html``)}
    </ul>
    `,
};

define('my-todo', MyTodo);

html`
                            <div>
                                ${
                                    line.map(item =&gt;
                                        html``.key(item)
                                    )
                                }
                            </div>
                        `
                )
            }
        
    `
};

define('pascal-triangle', PascalTriangle);

margin-bottom: 11px;
        transition: color 0.2s ease-out;
    }

    li.item .destroy:hover {
        color: #af5b5e;
    }

<li class="item">
    <input type="checkbox">
    <label>${text}</label>
    <button class="destroy">x</button>
</li>`,
};

define('todo-item', TodoItem);