component.html.erb in lookbook-1.0.0.beta.1

- old
+ new

@@ -1,9 +1,15 @@
 <%= render_component_tag :button,
   id: @id,
-  x_ref: @ref,
-  class: "whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer",
+  x_ref: @name,
+  class: [
+    "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
+    {
+      "px-1": @theme == :toolbar,
+      "px-2 text-lg relative -bottom-px": @theme == :page,
+    }
+  ],
   ":class": "{
     'border-lookbook-tabs-highlight': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     '!text-lookbook-tabs-text-disabled': isDisabled($el),
     'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
@@ -12,7 +18,7 @@
   "@keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
   data: {
     disabled: @disabled
   },
   cloak: true do %>
-  <%= label %>
+  <%== label %>
 <% end %>