diff --git a/.changeset/config.json b/.changeset/config.json
index 808355c8bb..192a230931 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -3,6 +3,17 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "linked": [],
+  "fixed": [
+    [
+      "@heathmont/moon-base-tw",
+      "@heathmont/moon-cmdk-tw",
+      "@heathmont/moon-core-tw",
+      "@heathmont/moon-table-tw",
+      "@heathmont/moon-themes-tw",
+      "next-docs",
+      "docs"
+    ]
+  ],
   "access": "restricted",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index d4a2a70056..94db6b99e5 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,14 @@
 # docs
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+- Updated dependencies
+  - @heathmont/moon-core-tw@10.7.3
+  - @heathmont/moon-base-tw@10.7.3
+
 ## 0.5.2
 
 ### Patch Changes
diff --git a/docs/package.json b/docs/package.json
index 0e50b9ac6f..21bd44148e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.5.2",
+  "version": "10.7.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@heathmont/moon-base-tw": "workspace:^10.7.2",
-    "@heathmont/moon-core-tw": "workspace:^10.7.2",
+    "@heathmont/moon-base-tw": "workspace:^10.7.3",
+    "@heathmont/moon-core-tw": "workspace:^10.7.3",
     "@heathmont/moon-icons-tw": "9.28.4",
     "@types/node": "20.4.9",
     "@types/react": "18.2.19",
diff --git a/next-docs/CHANGELOG.md b/next-docs/CHANGELOG.md
index 4353131e2f..4e9f04bf67 100644
--- a/next-docs/CHANGELOG.md
+++ b/next-docs/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Change Log
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+- Updated dependencies
+  - @heathmont/moon-core-tw@10.7.3
+  - @heathmont/moon-cmdk-tw@10.7.3
+  - @heathmont/moon-table-tw@10.7.3
+  - @heathmont/moon-themes-tw@10.7.3
+
 ## 10.7.2
 
 ### Patch Changes
diff --git a/next-docs/components/brandSwitcher/BrandSwitcher.tsx b/next-docs/components/brandSwitcher/BrandSwitcher.tsx
index efca37fde2..046ccb8c96 100644
--- a/next-docs/components/brandSwitcher/BrandSwitcher.tsx
+++ b/next-docs/components/brandSwitcher/BrandSwitcher.tsx
@@ -13,17 +13,19 @@ const BrandSwitcher = () => {
   };
   return (
     <>
-      {THEMES.map((item, index) => (
-        <MenuItem
-          key={index}
-          role="radio"
-          isSelected={theme === item}
-          onClick={useCallback(() => handleClick(item), [item])}
-        >
-          <MenuItem.Title>{item}</MenuItem.Title>
-          <MenuItem.Radio />
-        </MenuItem>
-      ))}
+      <div className="max-h-72 over overflow-auto">
+        {THEMES.map((item, index) => (
+          <MenuItem
+            key={index}
+            role="radio"
+            isSelected={theme === item}
+            onClick={useCallback(() => handleClick(item), [item])}
+          >
+            <MenuItem.Title>{item}</MenuItem.Title>
+            <MenuItem.Radio />
+          </MenuItem>
+        ))}
+      </div>
       <div className="h-px bg-beerus -mx-3" />
     </>
   );
diff --git a/next-docs/components/codePreview/PreviewSwitch.tsx b/next-docs/components/codePreview/PreviewSwitch.tsx
index 31b040ab9c..51e6be1262 100644
--- a/next-docs/components/codePreview/PreviewSwitch.tsx
+++ b/next-docs/components/codePreview/PreviewSwitch.tsx
@@ -21,7 +21,7 @@ const PreviewSwitch = ({
       {!isPreviewActive && (
         <IconButton
           icon={<FilesCopy className="text-moon-24" />}
-          variant="secondary"
+          variant="outline"
           onClick={copyCode}
           size="lg"
           aria-label="Copy code"
diff --git a/next-docs/components/facing/ForDesigners.tsx b/next-docs/components/facing/ForDesigners.tsx
index 8a27543418..115471b7ad 100644
--- a/next-docs/components/facing/ForDesigners.tsx
+++ b/next-docs/components/facing/ForDesigners.tsx
@@ -36,22 +36,22 @@ const ForDesigners = () => (
         href="https://www.figma.com/community/file/1002945721703152933"
         target="_blank"
         rel="noreferrer"
-        variant="secondary"
+        variant="outline"
       >
         Figma
       </Button>
       <Link href="/gettingStarted" passHref legacyBehavior>
-        <Button as="a" variant="secondary">
+        <Button as="a" variant="outline">
           Getting Started
         </Button>
       </Link>
       <Link href="/typography" passHref legacyBehavior>
-        <Button as="a" variant="secondary">
+        <Button as="a" variant="outline">
           Typography
         </Button>
       </Link>
       <Link href="/colours" passHref legacyBehavior>
-        <Button as="a" variant="secondary">
+        <Button as="a" variant="outline">
           Colour Convention
         </Button>
       </Link>
diff --git a/next-docs/components/facing/ForDevelopers.tsx b/next-docs/components/facing/ForDevelopers.tsx
index 0a56dcd27a..9684634e06 100644
--- a/next-docs/components/facing/ForDevelopers.tsx
+++ b/next-docs/components/facing/ForDevelopers.tsx
@@ -39,17 +39,17 @@ const ForDevelopers = () => {
           href="https://github.com/coingaming/moon-design"
           target="_blank"
           rel="noreferrer"
-          variant="secondary"
+          variant="outline"
         >
           Github
         </Button>
         <Link href="/gettingStarted" passHref legacyBehavior>
-          <Button as="a" variant="secondary">
+          <Button as="a" variant="outline">
             Getting Started
           </Button>
         </Link>
         <Link href="/tokens" passHref legacyBehavior>
-          <Button as="a" variant="secondary">
+          <Button as="a" variant="outline">
             Design Tokens
           </Button>
         </Link>
@@ -58,7 +58,7 @@ const ForDevelopers = () => {
           href="https://github.com/coingaming/moon-design/blob/develop/packages/themes/src/moonDesignDark/moonDesignDark.ts"
           target="_blank"
           rel="noreferrer"
-          variant="secondary"
+          variant="outline"
         >
           Creating Themes
         </Button>
@@ -67,12 +67,12 @@ const ForDevelopers = () => {
           href="https://github.com/coingaming/moon-design/blob/develop/CONTRIBUTING.md"
           target="_blank"
           rel="noreferrer"
-          variant="secondary"
+          variant="outline"
         >
           Contribution
         </Button>
         <Link href="/components/accordion" passHref legacyBehavior>
-          <Button as="a" variant="secondary">
+          <Button as="a" variant="outline">
             Components
           </Button>
         </Link>
diff --git a/next-docs/package.json b/next-docs/package.json
index c42f508e61..69b2886f28 100644
--- a/next-docs/package.json
+++ b/next-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-docs",
-  "version": "10.7.2",
+  "version": "10.7.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,9 +19,9 @@
     "@heathmont/moon-assets": "workspace:^10.7.1",
     "@heathmont/moon-charts": "workspace:^10.7.1",
     "@heathmont/moon-components": "workspace:^10.7.1",
-    "@heathmont/moon-cmdk-tw": "workspace:^10.7.2",
+    "@heathmont/moon-cmdk-tw": "workspace:^10.7.3",
     "@heathmont/moon-core": "workspace:^10.7.1",
-    "@heathmont/moon-core-tw": "workspace:^10.7.2",
+    "@heathmont/moon-core-tw": "workspace:^10.7.3",
     "@heathmont/moon-datepicker": "workspace:^10.7.1",
     "@heathmont/moon-draggabletable": "workspace:^10.7.1",
     "@heathmont/moon-icons": "workspace:^10.7.1",
@@ -30,9 +30,9 @@
     "@heathmont/moon-select": "workspace:^10.7.1",
     "@heathmont/moon-sidebar": "workspace:^10.7.1",
     "@heathmont/moon-table": "workspace:^10.7.1",
-    "@heathmont/moon-table-tw": "workspace:^10.7.2",
+    "@heathmont/moon-table-tw": "workspace:^10.7.3",
     "@heathmont/moon-themes": "workspace:^10.7.1",
-    "@heathmont/moon-themes-tw": "workspace:^10.7.2",
+    "@heathmont/moon-themes-tw": "workspace:^10.7.3",
     "@heathmont/moon-utils": "workspace:^10.7.1",
     "@heathmont/moon-icons-tw": "9.28.5",
     "@hookform/resolvers": "3.2.0",
diff --git a/next-docs/pages/components/button.tsx b/next-docs/pages/components/button.tsx
index 866459d8c3..7fc87551af 100644
--- a/next-docs/pages/components/button.tsx
+++ b/next-docs/pages/components/button.tsx
@@ -24,7 +24,6 @@ const PageButton = () => {
       <ComponentPageDescription
         title={name}
         image={image}
-        isInProgress
         isRtlSupport
         isAriaSupport
       >
diff --git a/next-docs/public/examples/accordion/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/accordion/__tests__/__snapshots__/index.test.tsx.snap
index 19bbedd895..d6f3c3fa0e 100644
--- a/next-docs/public/examples/accordion/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/accordion/__tests__/__snapshots__/index.test.tsx.snap
@@ -1312,7 +1312,7 @@ Object {
           class="flex flex-col gap-4 w-full"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-32"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-32"
             type="button"
           >
             Toggle All
@@ -1441,7 +1441,7 @@ Object {
         class="flex flex-col gap-4 w-full"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-32"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-32"
           type="button"
         >
           Toggle All
@@ -4359,7 +4359,7 @@ Object {
         class="flex flex-col gap-4 w-full"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-32"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-32"
           type="button"
         >
           Toggle All
@@ -4484,7 +4484,7 @@ Object {
       class="flex flex-col gap-4 w-full"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-32"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-32"
         type="button"
       >
         Toggle All
diff --git a/next-docs/public/examples/alert/HandleClose.tsx b/next-docs/public/examples/alert/HandleClose.tsx
index c089034846..6344958006 100644
--- a/next-docs/public/examples/alert/HandleClose.tsx
+++ b/next-docs/public/examples/alert/HandleClose.tsx
@@ -12,7 +12,7 @@ const Example = () => {
       </Alert>
     );
   return (
-    <Button variant="secondary" onClick={handleClick}>
+    <Button variant="outline" onClick={handleClick}>
       Show Alert
     </Button>
   );
diff --git a/next-docs/public/examples/authCode/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/authCode/__tests__/__snapshots__/index.test.tsx.snap
index 8c6c33b079..6bc3d5df28 100644
--- a/next-docs/public/examples/authCode/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/authCode/__tests__/__snapshots__/index.test.tsx.snap
@@ -1734,7 +1734,7 @@ Object {
             />
           </div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
             disabled=""
             type="submit"
           >
@@ -1814,7 +1814,7 @@ Object {
           />
         </div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
           disabled=""
           type="submit"
         >
@@ -3743,7 +3743,7 @@ Object {
           />
         </div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
           disabled=""
           type="submit"
         >
@@ -3819,7 +3819,7 @@ Object {
         />
       </div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
         disabled=""
         type="submit"
       >
diff --git a/next-docs/public/examples/bottomSheet/Customization.tsx b/next-docs/public/examples/bottomSheet/Customization.tsx
index cdf54213a2..5810356f81 100644
--- a/next-docs/public/examples/bottomSheet/Customization.tsx
+++ b/next-docs/public/examples/bottomSheet/Customization.tsx
@@ -11,7 +11,7 @@ const Example = () => {
   };
   return (
     <>
-      <Button variant="secondary" onClick={openBottomSheet}>
+      <Button variant="outline" onClick={openBottomSheet}>
         Customized BottomSheet
       </Button>
       <BottomSheet open={isOpen} onClose={closeBottomSheet}>
diff --git a/next-docs/public/examples/bottomSheet/Default.tsx b/next-docs/public/examples/bottomSheet/Default.tsx
index 9735f3b990..274bf47abe 100644
--- a/next-docs/public/examples/bottomSheet/Default.tsx
+++ b/next-docs/public/examples/bottomSheet/Default.tsx
@@ -11,7 +11,7 @@ const Example = () => {
   };
   return (
     <>
-      <Button variant="secondary" onClick={openBottomSheet}>
+      <Button variant="outline" onClick={openBottomSheet}>
         Default BottomSheet
       </Button>
       <BottomSheet open={isOpen} onClose={closeBottomSheet}>
diff --git a/next-docs/public/examples/bottomSheet/Sizes.tsx b/next-docs/public/examples/bottomSheet/Sizes.tsx
index 51aff7e9d6..ed25198403 100644
--- a/next-docs/public/examples/bottomSheet/Sizes.tsx
+++ b/next-docs/public/examples/bottomSheet/Sizes.tsx
@@ -26,7 +26,7 @@ const Example = () => {
   return (
     <>
       <div>
-        <Button variant="secondary" onClick={openSmallBottomSheet}>
+        <Button variant="outline" onClick={openSmallBottomSheet}>
           Default small BottomSheet
         </Button>
         <BottomSheet open={isSmallOpen} onClose={closeSmallBottomSheet}>
@@ -40,7 +40,7 @@ const Example = () => {
         </BottomSheet>
       </div>
       <div>
-        <Button variant="secondary" onClick={openMediumBottomSheet}>
+        <Button variant="outline" onClick={openMediumBottomSheet}>
           Medium BottomSheet
         </Button>
         <BottomSheet open={isMediumOpen} onClose={closeMediumBottomSheet}>
@@ -54,7 +54,7 @@ const Example = () => {
         </BottomSheet>
       </div>
       <div>
-        <Button variant="secondary" onClick={openFullBottomSheet}>
+        <Button variant="outline" onClick={openFullBottomSheet}>
           Fullscreen BottomSheet
         </Button>
         <BottomSheet open={isFullOpen} onClose={closeFullBottomSheet}>
diff --git a/next-docs/public/examples/bottomSheet/WithDraghandle.tsx b/next-docs/public/examples/bottomSheet/WithDraghandle.tsx
index 88a8e6ab69..36ba59cd6a 100644
--- a/next-docs/public/examples/bottomSheet/WithDraghandle.tsx
+++ b/next-docs/public/examples/bottomSheet/WithDraghandle.tsx
@@ -11,7 +11,7 @@ const Example = () => {
   };
   return (
     <>
-      <Button variant="secondary" onClick={openBottomSheet}>
+      <Button variant="outline" onClick={openBottomSheet}>
         BottomSheet with Draghandle
       </Button>
       <BottomSheet open={isOpen} onClose={closeBottomSheet}>
diff --git a/next-docs/public/examples/bottomSheet/WithTitle.tsx b/next-docs/public/examples/bottomSheet/WithTitle.tsx
index 666eccc03e..a183395090 100644
--- a/next-docs/public/examples/bottomSheet/WithTitle.tsx
+++ b/next-docs/public/examples/bottomSheet/WithTitle.tsx
@@ -19,7 +19,7 @@ const Example = () => {
   return (
     <>
       <div>
-        <Button variant="secondary" onClick={openTitleBottomSheet}>
+        <Button variant="outline" onClick={openTitleBottomSheet}>
           BottomSheet with Title
         </Button>
         <BottomSheet open={isTitleOpen} onClose={closeTitleBottomSheet}>
@@ -33,7 +33,7 @@ const Example = () => {
         </BottomSheet>
       </div>
       <div>
-        <Button variant="secondary" onClick={openMediumBottomSheet}>
+        <Button variant="outline" onClick={openMediumBottomSheet}>
           BottomSheet with Title and Draghandle
         </Button>
         <BottomSheet open={isMediumOpen} onClose={closeMediumBottomSheet}>
diff --git a/next-docs/public/examples/bottomSheet/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/bottomSheet/__tests__/__snapshots__/index.test.tsx.snap
index e80c24ed05..612729248d 100644
--- a/next-docs/public/examples/bottomSheet/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/bottomSheet/__tests__/__snapshots__/index.test.tsx.snap
@@ -95,7 +95,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Customized BottomSheet
@@ -117,7 +117,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Customized BottomSheet
@@ -256,7 +256,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Default BottomSheet
@@ -278,7 +278,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Default BottomSheet
@@ -399,7 +399,7 @@ Object {
                 BottomSheet content
               </div>
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Optional close
@@ -431,7 +431,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Default small BottomSheet
@@ -446,7 +446,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Medium BottomSheet
@@ -458,7 +458,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Fullscreen BottomSheet
@@ -479,7 +479,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Default small BottomSheet
@@ -494,7 +494,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Medium BottomSheet
@@ -506,7 +506,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Fullscreen BottomSheet
@@ -652,7 +652,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           BottomSheet with Draghandle
@@ -674,7 +674,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         BottomSheet with Draghandle
@@ -831,7 +831,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             BottomSheet with Title
@@ -846,7 +846,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             BottomSheet with Title and Draghandle
@@ -867,7 +867,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           BottomSheet with Title
@@ -882,7 +882,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           BottomSheet with Title and Draghandle
@@ -1025,7 +1025,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Customized BottomSheet
@@ -1043,7 +1043,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Customized BottomSheet
@@ -1118,7 +1118,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Default BottomSheet
@@ -1181,7 +1181,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Default BottomSheet
@@ -1286,7 +1286,7 @@ Object {
                 BottomSheet content
               </div>
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Optional close
@@ -1315,7 +1315,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Default small BottomSheet
@@ -1330,7 +1330,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Medium BottomSheet
@@ -1342,7 +1342,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Fullscreen BottomSheet
@@ -1359,7 +1359,7 @@ Object {
   >
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Default small BottomSheet
@@ -1374,7 +1374,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Medium BottomSheet
@@ -1386,7 +1386,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Fullscreen BottomSheet
@@ -1513,7 +1513,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         BottomSheet with Draghandle
@@ -1531,7 +1531,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       BottomSheet with Draghandle
@@ -1669,7 +1669,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           BottomSheet with Title
@@ -1684,7 +1684,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           BottomSheet with Title and Draghandle
@@ -1701,7 +1701,7 @@ Object {
   >
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         BottomSheet with Title
@@ -1716,7 +1716,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         BottomSheet with Title and Draghandle
diff --git a/next-docs/public/examples/button/Variants.tsx b/next-docs/public/examples/button/Variants.tsx
index 82679d3a15..2374bccbe2 100644
--- a/next-docs/public/examples/button/Variants.tsx
+++ b/next-docs/public/examples/button/Variants.tsx
@@ -2,9 +2,8 @@ import { Button } from '@heathmont/moon-core-tw';
 
 const Example = () => (
   <>
-    <Button>Primary is default</Button>
-    <Button variant="secondary">Secondary</Button>
-    <Button variant="tertiary">Tertiary</Button>
+    <Button>Fill is default</Button>
+    <Button variant="outline">Outline</Button>
     <Button variant="ghost">Ghost</Button>
   </>
 );
diff --git a/next-docs/public/examples/button/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/button/__tests__/__snapshots__/index.test.tsx.snap
index cca5d255e0..0f24f7bae9 100644
--- a/next-docs/public/examples/button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/button/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -57,7 +57,7 @@ Object {
           />
         </button>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -95,7 +95,7 @@ Object {
           />
         </button>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
           type="button"
         >
           Error
@@ -105,7 +105,7 @@ Object {
           />
         </button>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite]"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite]"
           type="button"
         >
           Pulse
@@ -122,7 +122,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -170,7 +170,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -208,7 +208,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
         type="button"
       >
         Error
@@ -218,7 +218,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite]"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite]"
         type="button"
       >
         Pulse
@@ -292,7 +292,7 @@ Object {
         dir="rtl"
       >
         <a
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           href="/components/button"
         >
           Link HTML element
@@ -309,7 +309,7 @@ Object {
       dir="rtl"
     >
       <a
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         href="/components/button"
       >
         Link HTML element
@@ -383,7 +383,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Default
@@ -400,7 +400,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Default
@@ -474,7 +474,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
           disabled=""
           type="button"
         >
@@ -492,7 +492,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
         disabled=""
         type="button"
       >
@@ -567,7 +567,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-full"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-full"
           type="button"
         >
           Full width
@@ -602,7 +602,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-full"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-full"
         type="button"
       >
         Full width
@@ -694,7 +694,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -722,7 +722,7 @@ Object {
           />
         </button>
         <button
-          class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           IconRight
@@ -757,7 +757,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -785,7 +785,7 @@ Object {
         />
       </button>
       <button
-        class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         IconRight
@@ -877,7 +877,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary py-3"
+          class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo py-3"
           type="button"
         >
           <span
@@ -907,7 +907,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary py-3"
+        class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo py-3"
         type="button"
       >
         <span
@@ -994,7 +994,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -1022,7 +1022,7 @@ Object {
           />
         </button>
         <button
-          class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -1050,7 +1050,7 @@ Object {
           />
         </button>
         <button
-          class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -1078,7 +1078,7 @@ Object {
           />
         </button>
         <button
-          class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -1106,7 +1106,7 @@ Object {
           />
         </button>
         <button
-          class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           <span
@@ -1141,7 +1141,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1169,7 +1169,7 @@ Object {
         />
       </button>
       <button
-        class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1197,7 +1197,7 @@ Object {
         />
       </button>
       <button
-        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1225,7 +1225,7 @@ Object {
         />
       </button>
       <button
-        class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1253,7 +1253,7 @@ Object {
         />
       </button>
       <button
-        class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1345,30 +1345,20 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
-          Primary is default
+          Fill is default
           <span
             aria-hidden="true"
             class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
           />
         </button>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
-          Secondary
-          <span
-            aria-hidden="true"
-            class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-          />
-        </button>
-        <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary"
-          type="button"
-        >
-          Tertiary
+          Outline
           <span
             aria-hidden="true"
             class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
@@ -1392,30 +1382,20 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
-        type="button"
-      >
-        Primary is default
-        <span
-          aria-hidden="true"
-          class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-        />
-      </button>
-      <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
-        Secondary
+        Fill is default
         <span
           aria-hidden="true"
           class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
-        Tertiary
+        Outline
         <span
           aria-hidden="true"
           class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
@@ -1493,7 +1473,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1541,7 +1521,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -1579,7 +1559,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
         type="button"
       >
         Error
@@ -1589,7 +1569,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite]"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite]"
         type="button"
       >
         Pulse
@@ -1602,7 +1582,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -1650,7 +1630,7 @@ Object {
       />
     </button>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -1688,7 +1668,7 @@ Object {
       />
     </button>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error"
       type="button"
     >
       Error
@@ -1698,7 +1678,7 @@ Object {
       />
     </button>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite]"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite]"
       type="button"
     >
       Pulse
@@ -1768,7 +1748,7 @@ Object {
   "baseElement": <body>
     <div>
       <a
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         href="/components/button"
       >
         Link HTML element
@@ -1781,7 +1761,7 @@ Object {
   </body>,
   "container": <div>
     <a
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       href="/components/button"
     >
       Link HTML element
@@ -1851,7 +1831,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Default
@@ -1864,7 +1844,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       Default
@@ -1934,7 +1914,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
         disabled=""
         type="button"
       >
@@ -1948,7 +1928,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo"
       disabled=""
       type="button"
     >
@@ -2019,7 +1999,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-full"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-full"
         type="button"
       >
         Full width
@@ -2050,7 +2030,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary w-full"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo w-full"
       type="button"
     >
       Full width
@@ -2138,7 +2118,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -2166,7 +2146,7 @@ Object {
         />
       </button>
       <button
-        class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         IconRight
@@ -2197,7 +2177,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -2225,7 +2205,7 @@ Object {
       />
     </button>
     <button
-      class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-4 pe-2 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       IconRight
@@ -2313,7 +2293,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary py-3"
+        class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo py-3"
         type="button"
       >
         <span
@@ -2339,7 +2319,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary py-3"
+      class="px-6 h-14 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo py-3"
       type="button"
     >
       <span
@@ -2422,7 +2402,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -2450,7 +2430,7 @@ Object {
         />
       </button>
       <button
-        class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -2478,7 +2458,7 @@ Object {
         />
       </button>
       <button
-        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -2506,7 +2486,7 @@ Object {
         />
       </button>
       <button
-        class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -2534,7 +2514,7 @@ Object {
         />
       </button>
       <button
-        class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         <span
@@ -2565,7 +2545,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-1 pe-2 h-6 py-1 gap-1 text-moon-12 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -2593,7 +2573,7 @@ Object {
       />
     </button>
     <button
-      class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-1 pe-3 h-8 py-1 gap-1 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -2621,7 +2601,7 @@ Object {
       />
     </button>
     <button
-      class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-2 pe-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -2649,7 +2629,7 @@ Object {
       />
     </button>
     <button
-      class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-3 pe-4 h-12 py-3 gap-2 text-moon-16 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -2677,7 +2657,7 @@ Object {
       />
     </button>
     <button
-      class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="ps-4 pe-6 h-14 py-4 gap-2 text-moon-16 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       <span
@@ -2765,30 +2745,20 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
-        Primary is default
+        Fill is default
         <span
           aria-hidden="true"
           class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
-        Secondary
-        <span
-          aria-hidden="true"
-          class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-        />
-      </button>
-      <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary"
-        type="button"
-      >
-        Tertiary
+        Outline
         <span
           aria-hidden="true"
           class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
@@ -2808,30 +2778,20 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
-      type="button"
-    >
-      Primary is default
-      <span
-        aria-hidden="true"
-        class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-      />
-    </button>
-    <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
-      Secondary
+      Fill is default
       <span
         aria-hidden="true"
         class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
       />
     </button>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
-      Tertiary
+      Outline
       <span
         aria-hidden="true"
         class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
diff --git a/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap
index ac06e803ae..1f0c8b1854 100644
--- a/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap
@@ -707,7 +707,7 @@ Object {
         >
           <button
             aria-label="Scroll left"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
             disabled=""
             type="button"
           >
@@ -861,7 +861,7 @@ Object {
           </ul>
           <button
             aria-label="Scroll right"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
             disabled=""
             type="button"
           >
@@ -897,7 +897,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -1051,7 +1051,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -1144,7 +1144,7 @@ Object {
         >
           <button
             aria-label="Scroll left"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
             disabled=""
             type="button"
           >
@@ -1198,7 +1198,7 @@ Object {
           </ul>
           <button
             aria-label="Scroll right"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
             disabled=""
             type="button"
           >
@@ -1253,7 +1253,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -1307,7 +1307,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -1632,7 +1632,7 @@ Object {
         >
           <button
             aria-label="Scroll left"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
             disabled=""
             type="button"
           >
@@ -1686,7 +1686,7 @@ Object {
           </ul>
           <button
             aria-label="Scroll right"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
             disabled=""
             type="button"
           >
@@ -1722,7 +1722,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -1776,7 +1776,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -1869,7 +1869,7 @@ Object {
         >
           <button
             aria-label="Scroll left"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
             disabled=""
             type="button"
           >
@@ -2023,7 +2023,7 @@ Object {
           </ul>
           <button
             aria-label="Scroll right"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
             disabled=""
             type="button"
           >
@@ -2059,7 +2059,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -2213,7 +2213,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -2981,7 +2981,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -3135,7 +3135,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -3167,7 +3167,7 @@ Object {
     >
       <button
         aria-label="Scroll left"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
         disabled=""
         type="button"
       >
@@ -3321,7 +3321,7 @@ Object {
       </ul>
       <button
         aria-label="Scroll right"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
         disabled=""
         type="button"
       >
@@ -3410,7 +3410,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -3464,7 +3464,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -3515,7 +3515,7 @@ Object {
     >
       <button
         aria-label="Scroll left"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
         disabled=""
         type="button"
       >
@@ -3569,7 +3569,7 @@ Object {
       </ul>
       <button
         aria-label="Scroll right"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
         disabled=""
         type="button"
       >
@@ -3882,7 +3882,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -3936,7 +3936,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -3968,7 +3968,7 @@ Object {
     >
       <button
         aria-label="Scroll left"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
         disabled=""
         type="button"
       >
@@ -4022,7 +4022,7 @@ Object {
       </ul>
       <button
         aria-label="Scroll right"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
         disabled=""
         type="button"
       >
@@ -4111,7 +4111,7 @@ Object {
       >
         <button
           aria-label="Scroll left"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
           disabled=""
           type="button"
         >
@@ -4265,7 +4265,7 @@ Object {
         </ul>
         <button
           aria-label="Scroll right"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
           disabled=""
           type="button"
         >
@@ -4297,7 +4297,7 @@ Object {
     >
       <button
         aria-label="Scroll left"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -start-4"
         disabled=""
         type="button"
       >
@@ -4451,7 +4451,7 @@ Object {
       </ul>
       <button
         aria-label="Scroll right"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-moon-24 max-sm:hidden shadow-moon-sm bg-gohan text-bulma absolute top-1/2 -translate-y-1/2 origin-[top_center] z-5 -end-4"
         disabled=""
         type="button"
       >
diff --git a/next-docs/public/examples/drawer/Backdrop.tsx b/next-docs/public/examples/drawer/Backdrop.tsx
index b6d63c9d43..a04179e593 100644
--- a/next-docs/public/examples/drawer/Backdrop.tsx
+++ b/next-docs/public/examples/drawer/Backdrop.tsx
@@ -6,7 +6,7 @@ const Example = () => {
   const handleClick = () => setIsOpen(true);
   return (
     <>
-      <Button variant="secondary" onClick={handleClick}>
+      <Button variant="outline" onClick={handleClick}>
         Show Drawer with Backdrop
       </Button>
       <Drawer open={isOpen} setOpen={setIsOpen}>
diff --git a/next-docs/public/examples/drawer/Close.tsx b/next-docs/public/examples/drawer/Close.tsx
index 8e90616d66..a4dcaeb00c 100644
--- a/next-docs/public/examples/drawer/Close.tsx
+++ b/next-docs/public/examples/drawer/Close.tsx
@@ -8,7 +8,7 @@ const Example = () => {
   const handleClose = () => setIsOpen(false);
   return (
     <>
-      <Button variant="secondary" onClick={handleClick}>
+      <Button variant="outline" onClick={handleClick}>
         Show Drawer with Close button
       </Button>
       <Drawer open={isOpen} setOpen={setIsOpen}>
diff --git a/next-docs/public/examples/drawer/Default.tsx b/next-docs/public/examples/drawer/Default.tsx
index a96aeb33dd..385e090c54 100644
--- a/next-docs/public/examples/drawer/Default.tsx
+++ b/next-docs/public/examples/drawer/Default.tsx
@@ -6,7 +6,7 @@ const Example = () => {
   const handleClick = () => setIsOpen(true);
   return (
     <>
-      <Button variant="secondary" onClick={handleClick}>
+      <Button variant="outline" onClick={handleClick}>
         Show default Drawer
       </Button>
       <Drawer open={isOpen} setOpen={setIsOpen}>
diff --git a/next-docs/public/examples/drawer/Positions.tsx b/next-docs/public/examples/drawer/Positions.tsx
index df59bf567a..3b4d1df13c 100644
--- a/next-docs/public/examples/drawer/Positions.tsx
+++ b/next-docs/public/examples/drawer/Positions.tsx
@@ -10,13 +10,13 @@ const Example = () => {
   const handleBottomClick = () => setIsBottomOpen(true);
   return (
     <>
-      <Button variant="secondary" onClick={handleStartClick}>
+      <Button variant="outline" onClick={handleStartClick}>
         Show Drawer at start of screen
       </Button>
-      <Button variant="secondary" onClick={handleTopClick}>
+      <Button variant="outline" onClick={handleTopClick}>
         Show Drawer at top of screen
       </Button>
-      <Button variant="secondary" onClick={handleBottomClick}>
+      <Button variant="outline" onClick={handleBottomClick}>
         Show Drawer at bottom of screen
       </Button>
       <Drawer open={isStartOpen} setOpen={setIsStartOpen}>
diff --git a/next-docs/public/examples/drawer/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/drawer/__tests__/__snapshots__/index.test.tsx.snap
index 4a210d1054..6bbbc3cd67 100644
--- a/next-docs/public/examples/drawer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/drawer/__tests__/__snapshots__/index.test.tsx.snap
@@ -81,7 +81,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Show Drawer with Backdrop
@@ -103,7 +103,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer with Backdrop
@@ -275,7 +275,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Show Drawer with Close button
@@ -297,7 +297,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer with Close button
@@ -425,7 +425,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Show default Drawer
@@ -447,7 +447,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show default Drawer
@@ -589,7 +589,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Show Drawer at start of screen
@@ -599,7 +599,7 @@ Object {
           />
         </button>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Show Drawer at top of screen
@@ -609,7 +609,7 @@ Object {
           />
         </button>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Show Drawer at bottom of screen
@@ -631,7 +631,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer at start of screen
@@ -641,7 +641,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer at top of screen
@@ -651,7 +651,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer at bottom of screen
@@ -785,7 +785,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer with Backdrop
@@ -803,7 +803,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Show Drawer with Backdrop
@@ -959,7 +959,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer with Close button
@@ -977,7 +977,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Show Drawer with Close button
@@ -1052,7 +1052,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show default Drawer
@@ -1107,7 +1107,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Show default Drawer
@@ -1233,7 +1233,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer at start of screen
@@ -1243,7 +1243,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer at top of screen
@@ -1253,7 +1253,7 @@ Object {
         />
       </button>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Show Drawer at bottom of screen
@@ -1271,7 +1271,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Show Drawer at start of screen
@@ -1281,7 +1281,7 @@ Object {
       />
     </button>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Show Drawer at top of screen
@@ -1291,7 +1291,7 @@ Object {
       />
     </button>
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
       type="button"
     >
       Show Drawer at bottom of screen
diff --git a/next-docs/public/examples/dropdown/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/dropdown/__tests__/__snapshots__/index.test.tsx.snap
index 45c76fbadf..d8d0266d2c 100644
--- a/next-docs/public/examples/dropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/dropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -6163,7 +6163,7 @@ Object {
                 type="button"
               >
                 <button
-                  class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                  class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                   type="button"
                 >
                   Select name
@@ -6368,7 +6368,7 @@ Object {
               type="button"
             >
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Select name
@@ -12562,7 +12562,7 @@ Object {
               type="button"
             >
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Select name
@@ -12763,7 +12763,7 @@ Object {
             type="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Select name
diff --git a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
index e40a77105c..fd05fc80e8 100644
--- a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -234,7 +234,7 @@ Object {
             />
           </div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             form="login"
             type="submit"
             value="Submit"
@@ -479,7 +479,7 @@ Object {
           />
         </div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           form="login"
           type="submit"
           value="Submit"
@@ -643,7 +643,7 @@ Object {
             />
           </div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             form="login"
             type="submit"
             value="Submit"
@@ -750,7 +750,7 @@ Object {
           />
         </div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           form="login"
           type="submit"
           value="Submit"
@@ -1049,7 +1049,7 @@ Object {
           />
         </div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           form="login"
           type="submit"
           value="Submit"
@@ -1290,7 +1290,7 @@ Object {
         />
       </div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         form="login"
         type="submit"
         value="Submit"
@@ -1450,7 +1450,7 @@ Object {
           />
         </div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           form="login"
           type="submit"
           value="Submit"
@@ -1553,7 +1553,7 @@ Object {
         />
       </div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         form="login"
         type="submit"
         value="Submit"
diff --git a/next-docs/public/examples/iconButton/Variants.tsx b/next-docs/public/examples/iconButton/Variants.tsx
index 00bff06088..7c9aef445f 100644
--- a/next-docs/public/examples/iconButton/Variants.tsx
+++ b/next-docs/public/examples/iconButton/Variants.tsx
@@ -4,8 +4,7 @@ import { OtherFrame } from '@heathmont/moon-icons-tw';
 const Example = () => (
   <>
     <IconButton icon={<OtherFrame />} />
-    <IconButton variant="secondary" icon={<OtherFrame />} />
-    <IconButton variant="tertiary" icon={<OtherFrame />} />
+    <IconButton variant="outline" icon={<OtherFrame />} />
     <IconButton variant="ghost" icon={<OtherFrame />} />
   </>
 );
diff --git a/next-docs/public/examples/iconButton/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/iconButton/__tests__/__snapshots__/index.test.tsx.snap
index a7eba24a8a..b308112cc7 100644
--- a/next-docs/public/examples/iconButton/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/iconButton/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <span
@@ -69,7 +69,7 @@ Object {
           />
         </button>
         <button
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <span
@@ -120,7 +120,7 @@ Object {
         </button>
         <button
           aria-label="Error"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
           type="button"
         >
           <svg
@@ -143,7 +143,7 @@ Object {
         </button>
         <button
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
           type="button"
         >
           <svg
@@ -172,7 +172,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <span
@@ -232,7 +232,7 @@ Object {
         />
       </button>
       <button
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <span
@@ -283,7 +283,7 @@ Object {
       </button>
       <button
         aria-label="Error"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
         type="button"
       >
         <svg
@@ -306,7 +306,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
         type="button"
       >
         <svg
@@ -393,7 +393,7 @@ Object {
       >
         <a
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           href="/components/button"
         >
           <svg
@@ -423,7 +423,7 @@ Object {
     >
       <a
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         href="/components/button"
       >
         <svg
@@ -510,7 +510,7 @@ Object {
       >
         <button
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <svg
@@ -540,7 +540,7 @@ Object {
     >
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -627,7 +627,7 @@ Object {
       >
         <button
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo text-moon-24"
           disabled=""
           type="button"
         >
@@ -658,7 +658,7 @@ Object {
     >
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo text-moon-24"
         disabled=""
         type="button"
       >
@@ -746,7 +746,7 @@ Object {
       >
         <button
           aria-label="IconButton"
-          class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-16"
+          class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-16"
           type="button"
         >
           <svg
@@ -769,7 +769,7 @@ Object {
         </button>
         <button
           aria-label="IconButton"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <svg
@@ -792,7 +792,7 @@ Object {
         </button>
         <button
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <svg
@@ -815,7 +815,7 @@ Object {
         </button>
         <button
           aria-label="IconButton"
-          class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <svg
@@ -838,7 +838,7 @@ Object {
         </button>
         <button
           aria-label="IconButton"
-          class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <svg
@@ -868,7 +868,7 @@ Object {
     >
       <button
         aria-label="IconButton"
-        class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-16"
+        class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-16"
         type="button"
       >
         <svg
@@ -891,7 +891,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -914,7 +914,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -937,7 +937,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -960,7 +960,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -1047,7 +1047,7 @@ Object {
       >
         <button
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
           type="button"
         >
           <svg
@@ -1070,30 +1070,7 @@ Object {
         </button>
         <button
           aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
-          type="button"
-        >
-          <svg
-            fill="none"
-            height="1em"
-            viewBox="0 0 32 32"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-              stroke="currentColor"
-              stroke-linecap="round"
-            />
-          </svg>
-          <span
-            aria-hidden="true"
-            class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-          />
-        </button>
-        <button
-          aria-label="IconButton"
-          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary text-moon-24"
+          class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
           type="button"
         >
           <svg
@@ -1146,30 +1123,7 @@ Object {
     >
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
-        type="button"
-      >
-        <svg
-          fill="none"
-          height="1em"
-          viewBox="0 0 32 32"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-            stroke="currentColor"
-            stroke-linecap="round"
-          />
-        </svg>
-        <span
-          aria-hidden="true"
-          class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-        />
-      </button>
-      <button
-        aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -1192,7 +1146,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
         type="button"
       >
         <svg
@@ -1298,7 +1252,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <span
@@ -1358,7 +1312,7 @@ Object {
         />
       </button>
       <button
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <span
@@ -1409,7 +1363,7 @@ Object {
       </button>
       <button
         aria-label="Error"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
         type="button"
       >
         <svg
@@ -1432,7 +1386,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
         type="button"
       >
         <svg
@@ -1457,7 +1411,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <span
@@ -1517,7 +1471,7 @@ Object {
       />
     </button>
     <button
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <span
@@ -1568,7 +1522,7 @@ Object {
     </button>
     <button
       aria-label="Error"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error text-moon-24"
       type="button"
     >
       <svg
@@ -1591,7 +1545,7 @@ Object {
     </button>
     <button
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo anim-pulse animate-[pulse2_1.5s_infinite] text-moon-24"
       type="button"
     >
       <svg
@@ -1674,7 +1628,7 @@ Object {
     <div>
       <a
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         href="/components/button"
       >
         <svg
@@ -1700,7 +1654,7 @@ Object {
   "container": <div>
     <a
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       href="/components/button"
     >
       <svg
@@ -1783,7 +1737,7 @@ Object {
     <div>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -1809,7 +1763,7 @@ Object {
   "container": <div>
     <button
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <svg
@@ -1892,7 +1846,7 @@ Object {
     <div>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo text-moon-24"
         disabled=""
         type="button"
       >
@@ -1919,7 +1873,7 @@ Object {
   "container": <div>
     <button
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-primary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-goten bg-piccolo text-moon-24"
       disabled=""
       type="button"
     >
@@ -2003,7 +1957,7 @@ Object {
     <div>
       <button
         aria-label="IconButton"
-        class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-16"
+        class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-16"
         type="button"
       >
         <svg
@@ -2026,7 +1980,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -2049,7 +2003,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -2072,7 +2026,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -2095,7 +2049,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -2121,7 +2075,7 @@ Object {
   "container": <div>
     <button
       aria-label="IconButton"
-      class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-16"
+      class="h-6 p-1 gap-1 rounded-moon-i-xs relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-16"
       type="button"
     >
       <svg
@@ -2144,7 +2098,7 @@ Object {
     </button>
     <button
       aria-label="IconButton"
-      class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <svg
@@ -2167,7 +2121,7 @@ Object {
     </button>
     <button
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <svg
@@ -2190,7 +2144,7 @@ Object {
     </button>
     <button
       aria-label="IconButton"
-      class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-12 p-3 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <svg
@@ -2213,7 +2167,7 @@ Object {
     </button>
     <button
       aria-label="IconButton"
-      class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+      class="h-14 p-4 gap-2 rounded-moon-i-md relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <svg
@@ -2296,7 +2250,7 @@ Object {
     <div>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
         type="button"
       >
         <svg
@@ -2319,30 +2273,7 @@ Object {
       </button>
       <button
         aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
-        type="button"
-      >
-        <svg
-          fill="none"
-          height="1em"
-          viewBox="0 0 32 32"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-            stroke="currentColor"
-            stroke-linecap="round"
-          />
-        </svg>
-        <span
-          aria-hidden="true"
-          class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-        />
-      </button>
-      <button
-        aria-label="IconButton"
-        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary text-moon-24"
+        class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
         type="button"
       >
         <svg
@@ -2391,30 +2322,7 @@ Object {
   "container": <div>
     <button
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary text-moon-24"
-      type="button"
-    >
-      <svg
-        fill="none"
-        height="1em"
-        viewBox="0 0 32 32"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-          stroke="currentColor"
-          stroke-linecap="round"
-        />
-      </svg>
-      <span
-        aria-hidden="true"
-        class="z-[-1] block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out]"
-      />
-    </button>
-    <button
-      aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo text-moon-24"
       type="button"
     >
       <svg
@@ -2437,7 +2345,7 @@ Object {
     </button>
     <button
       aria-label="IconButton"
-      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-tertiary text-moon-24"
+      class="h-10 p-2 gap-2 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
       type="button"
     >
       <svg
diff --git a/next-docs/public/examples/modal/StyledContent.tsx b/next-docs/public/examples/modal/StyledContent.tsx
index 1caa9ac1dc..6c99f96006 100644
--- a/next-docs/public/examples/modal/StyledContent.tsx
+++ b/next-docs/public/examples/modal/StyledContent.tsx
@@ -28,7 +28,7 @@ const Example = () => {
             </div>
           </div>
           <div className="p-4 flex items-center justify-center">
-            <Button variant="secondary" onClick={closeModal}>
+            <Button variant="outline" onClick={closeModal}>
               Got it, thanks!
             </Button>
           </div>
diff --git a/next-docs/public/examples/modal/WithSelect.tsx b/next-docs/public/examples/modal/WithSelect.tsx
index ab27b2b438..07a0dfa283 100644
--- a/next-docs/public/examples/modal/WithSelect.tsx
+++ b/next-docs/public/examples/modal/WithSelect.tsx
@@ -138,7 +138,7 @@ const Example = () => {
             </Dropdown>
           </div>
           <div className="flex gap-2 p-4 justify-end pt-2">
-            <Button variant="secondary" onClick={closeModal}>
+            <Button variant="outline" onClick={closeModal}>
               Cancel
             </Button>
             <Button onClick={closeModal}>Create</Button>
diff --git a/next-docs/public/examples/modal/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/modal/__tests__/__snapshots__/index.test.tsx.snap
index 9df1ef72ff..22447769a1 100644
--- a/next-docs/public/examples/modal/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/modal/__tests__/__snapshots__/index.test.tsx.snap
@@ -76,7 +76,7 @@ Object {
                     class="p-4 border-t-2 border-beerus"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                       type="button"
                     >
                       Got it, thanks!
@@ -106,7 +106,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Open dialog
@@ -128,7 +128,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -269,7 +269,7 @@ Object {
                     class="p-4 border-t-2 border-beerus"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                       type="button"
                     >
                       Got it, thanks!
@@ -299,7 +299,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Open dialog
@@ -321,7 +321,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -488,7 +488,7 @@ Object {
                     class="p-4 flex items-center justify-center"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
                       type="button"
                     >
                       Got it, thanks!
@@ -518,7 +518,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Open dialog
@@ -540,7 +540,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -869,7 +869,7 @@ Object {
                     class="flex gap-2 p-4 justify-end pt-2"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
                       type="button"
                     >
                       Cancel
@@ -879,7 +879,7 @@ Object {
                       />
                     </button>
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                       type="button"
                     >
                       Create
@@ -909,7 +909,7 @@ Object {
         dir="rtl"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Open dialog
@@ -931,7 +931,7 @@ Object {
       dir="rtl"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -1063,7 +1063,7 @@ Object {
                     class="p-4 border-t-2 border-beerus"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                       type="button"
                     >
                       Got it, thanks!
@@ -1090,7 +1090,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -1108,7 +1108,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       Open dialog
@@ -1183,7 +1183,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -1253,7 +1253,7 @@ Object {
                     class="p-4 border-t-2 border-beerus"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                       type="button"
                     >
                       Got it, thanks!
@@ -1281,7 +1281,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       Open dialog
@@ -1435,7 +1435,7 @@ Object {
                     class="p-4 flex items-center justify-center"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
                       type="button"
                     >
                       Got it, thanks!
@@ -1462,7 +1462,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -1480,7 +1480,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       Open dialog
@@ -1796,7 +1796,7 @@ Object {
                     class="flex gap-2 p-4 justify-end pt-2"
                   >
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
                       type="button"
                     >
                       Cancel
@@ -1806,7 +1806,7 @@ Object {
                       />
                     </button>
                     <button
-                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                       type="button"
                     >
                       Create
@@ -1833,7 +1833,7 @@ Object {
       aria-hidden="true"
     >
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
         type="button"
       >
         Open dialog
@@ -1851,7 +1851,7 @@ Object {
     aria-hidden="true"
   >
     <button
-      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+      class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
       type="button"
     >
       Open dialog
diff --git a/next-docs/public/examples/pagination/WithButtons.tsx b/next-docs/public/examples/pagination/WithButtons.tsx
index 7df8658330..647740fe9f 100644
--- a/next-docs/public/examples/pagination/WithButtons.tsx
+++ b/next-docs/public/examples/pagination/WithButtons.tsx
@@ -21,7 +21,7 @@ const Example = () => {
           {({ disabled }) => (
             <IconButton
               icon={<ControlsChevronLeftSmall className="rtl:rotate-180" />}
-              variant="secondary"
+              variant="outline"
               size="sm"
               disabled={disabled}
               aria-label="Previous"
@@ -33,7 +33,7 @@ const Example = () => {
           {({ disabled }) => (
             <IconButton
               icon={<ControlsChevronRightSmall className="rtl:rotate-180" />}
-              variant="secondary"
+              variant="outline"
               size="sm"
               disabled={disabled}
               aria-label="Next"
diff --git a/next-docs/public/examples/pagination/WithHref.tsx b/next-docs/public/examples/pagination/WithHref.tsx
index 29c2f71407..c0d93e6301 100644
--- a/next-docs/public/examples/pagination/WithHref.tsx
+++ b/next-docs/public/examples/pagination/WithHref.tsx
@@ -35,7 +35,7 @@ const Example = () => {
           {({ disabled }) => (
             <IconButton
               icon={<ControlsChevronLeftSmall className="rtl:rotate-180" />}
-              variant="secondary"
+              variant="outline"
               size="sm"
               disabled={disabled}
               aria-label="Previous"
@@ -47,7 +47,7 @@ const Example = () => {
           {({ disabled }) => (
             <IconButton
               icon={<ControlsChevronRightSmall className="rtl:rotate-180" />}
-              variant="secondary"
+              variant="outline"
               size="sm"
               disabled={disabled}
               aria-label="Next"
diff --git a/next-docs/public/examples/pagination/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/pagination/__tests__/__snapshots__/index.test.tsx.snap
index 214c71a81e..e45609859e 100644
--- a/next-docs/public/examples/pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -203,7 +203,7 @@ Object {
           >
             <button
               aria-label="Previous"
-              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
               disabled=""
               type="button"
             >
@@ -276,7 +276,7 @@ Object {
           >
             <button
               aria-label="Next"
-              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
               type="button"
             >
               <svg
@@ -318,7 +318,7 @@ Object {
         >
           <button
             aria-label="Previous"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             disabled=""
             type="button"
           >
@@ -391,7 +391,7 @@ Object {
         >
           <button
             aria-label="Next"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             type="button"
           >
             <svg
@@ -490,7 +490,7 @@ Object {
           >
             <button
               aria-label="Previous"
-              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
               disabled=""
               type="button"
             >
@@ -564,7 +564,7 @@ Object {
           >
             <button
               aria-label="Next"
-              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+              class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
               type="button"
             >
               <svg
@@ -606,7 +606,7 @@ Object {
         >
           <button
             aria-label="Previous"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             disabled=""
             type="button"
           >
@@ -680,7 +680,7 @@ Object {
         >
           <button
             aria-label="Next"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             type="button"
           >
             <svg
@@ -953,7 +953,7 @@ Object {
         >
           <button
             aria-label="Previous"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             disabled=""
             type="button"
           >
@@ -1026,7 +1026,7 @@ Object {
         >
           <button
             aria-label="Next"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             type="button"
           >
             <svg
@@ -1064,7 +1064,7 @@ Object {
       >
         <button
           aria-label="Previous"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
           disabled=""
           type="button"
         >
@@ -1137,7 +1137,7 @@ Object {
       >
         <button
           aria-label="Next"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
           type="button"
         >
           <svg
@@ -1232,7 +1232,7 @@ Object {
         >
           <button
             aria-label="Previous"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             disabled=""
             type="button"
           >
@@ -1306,7 +1306,7 @@ Object {
         >
           <button
             aria-label="Next"
-            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+            class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
             type="button"
           >
             <svg
@@ -1344,7 +1344,7 @@ Object {
       >
         <button
           aria-label="Previous"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed btn-secondary text-moon-24"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 opacity-60 cursor-not-allowed text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
           disabled=""
           type="button"
         >
@@ -1418,7 +1418,7 @@ Object {
       >
         <button
           aria-label="Next"
-          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary text-moon-24"
+          class="h-8 p-1 gap-1 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma text-moon-24"
           type="button"
         >
           <svg
diff --git a/next-docs/public/examples/popover/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/popover/__tests__/__snapshots__/index.test.tsx.snap
index e24b8c5d2a..892260b22c 100644
--- a/next-docs/public/examples/popover/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/popover/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Toggle Popover
@@ -197,7 +197,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Toggle Popover
@@ -434,7 +434,7 @@ Object {
               role="button"
             >
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Top
@@ -496,7 +496,7 @@ Object {
               role="button"
             >
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Right
@@ -521,7 +521,7 @@ Object {
               role="button"
             >
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Left
@@ -558,7 +558,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Top
@@ -620,7 +620,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Right
@@ -645,7 +645,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Left
@@ -739,7 +739,7 @@ Object {
               role="button"
             >
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Button
@@ -863,7 +863,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Button
@@ -1041,7 +1041,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Toggle Popover
@@ -1194,7 +1194,7 @@ Object {
                 </span>
               </button>
               <button
-                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+                class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
                 type="button"
               >
                 Close
@@ -1228,7 +1228,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Toggle Popover
@@ -1381,7 +1381,7 @@ Object {
               </span>
             </button>
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Close
@@ -1469,7 +1469,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Toggle Popover
@@ -1642,7 +1642,7 @@ Object {
         role="button"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Toggle Popover
@@ -1875,7 +1875,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Top
@@ -1937,7 +1937,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Right
@@ -1962,7 +1962,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Left
@@ -1995,7 +1995,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Top
@@ -2057,7 +2057,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Right
@@ -2082,7 +2082,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Left
@@ -2172,7 +2172,7 @@ Object {
             role="button"
           >
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Button
@@ -2292,7 +2292,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Button
@@ -2466,7 +2466,7 @@ Object {
           role="button"
         >
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Toggle Popover
@@ -2619,7 +2619,7 @@ Object {
               </span>
             </button>
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
               type="button"
             >
               Close
@@ -2649,7 +2649,7 @@ Object {
         role="button"
       >
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
           type="button"
         >
           Toggle Popover
@@ -2802,7 +2802,7 @@ Object {
             </span>
           </button>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo"
             type="button"
           >
             Close
diff --git a/next-docs/public/examples/snackbar/AutoClose.tsx b/next-docs/public/examples/snackbar/AutoClose.tsx
index 687f20603e..d812c2c110 100644
--- a/next-docs/public/examples/snackbar/AutoClose.tsx
+++ b/next-docs/public/examples/snackbar/AutoClose.tsx
@@ -22,7 +22,7 @@ const Example = () => {
     <>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('one-sec')}
         >
           Close after 1 sec
@@ -37,7 +37,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('three-sec')}
         >
           Close after 3 sec
diff --git a/next-docs/public/examples/snackbar/Customization.tsx b/next-docs/public/examples/snackbar/Customization.tsx
index 2be3d463fa..fba4c07507 100644
--- a/next-docs/public/examples/snackbar/Customization.tsx
+++ b/next-docs/public/examples/snackbar/Customization.tsx
@@ -22,7 +22,7 @@ const Example = () => {
     <>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('border-radius')}
         >
           Border radius
@@ -37,7 +37,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('background')}
         >
           Background
@@ -51,10 +51,7 @@ const Example = () => {
         </Snackbar>
       </div>
       <div>
-        <Button
-          variant="secondary"
-          onClick={() => openSnackbarHandler('width')}
-        >
+        <Button variant="outline" onClick={() => openSnackbarHandler('width')}>
           Width
         </Button>
         <Snackbar
@@ -67,7 +64,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('always-light')}
         >
           Always light
@@ -82,7 +79,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('always-dark')}
         >
           Always dark
@@ -96,10 +93,7 @@ const Example = () => {
         </Snackbar>
       </div>
       <div>
-        <Button
-          variant="secondary"
-          onClick={() => openSnackbarHandler('fonts')}
-        >
+        <Button variant="outline" onClick={() => openSnackbarHandler('fonts')}>
           Fonts
         </Button>
         <Snackbar isOpen={snackbar === 'fonts'} onOpenChange={setSnackbar}>
diff --git a/next-docs/public/examples/snackbar/Default.tsx b/next-docs/public/examples/snackbar/Default.tsx
index 0f95e57f1f..e3d8280d75 100644
--- a/next-docs/public/examples/snackbar/Default.tsx
+++ b/next-docs/public/examples/snackbar/Default.tsx
@@ -20,10 +20,7 @@ const Example = () => {
 
   return (
     <div>
-      <Button
-        variant="secondary"
-        onClick={() => openSnackbarHandler('default')}
-      >
+      <Button variant="outline" onClick={() => openSnackbarHandler('default')}>
         Default
       </Button>
       <Snackbar isOpen={snackbar === 'default'} onOpenChange={setSnackbar}>
diff --git a/next-docs/public/examples/snackbar/Options.tsx b/next-docs/public/examples/snackbar/Options.tsx
index e51d9d0315..c636f22961 100644
--- a/next-docs/public/examples/snackbar/Options.tsx
+++ b/next-docs/public/examples/snackbar/Options.tsx
@@ -23,7 +23,7 @@ const Example = () => {
     <>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('mutliline')}
         >
           Multi Line
@@ -39,7 +39,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('with-header')}
         >
           With Header
@@ -56,7 +56,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('with-close')}
         >
           With Close
@@ -68,7 +68,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('with-icon')}
         >
           With Icon
@@ -82,7 +82,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('multiline-with-icon')}
         >
           Multi Line with Icon
@@ -104,7 +104,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('with-close-and-icon')}
         >
           With Close and Icon
diff --git a/next-docs/public/examples/snackbar/Positions.tsx b/next-docs/public/examples/snackbar/Positions.tsx
index 148a42c4ea..19ffa47a7b 100644
--- a/next-docs/public/examples/snackbar/Positions.tsx
+++ b/next-docs/public/examples/snackbar/Positions.tsx
@@ -22,7 +22,7 @@ const Example = () => {
     <>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('top-left')}
         >
           Top left
@@ -39,7 +39,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('top-center')}
         >
           Top center
@@ -56,7 +56,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('top-right')}
         >
           Top right
@@ -69,7 +69,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('bottom-left')}
         >
           Bottom left
@@ -86,7 +86,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('bottom-center')}
         >
           Bottom center
@@ -103,7 +103,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('bottom-right')}
         >
           Bottom right
diff --git a/next-docs/public/examples/snackbar/Queue.tsx b/next-docs/public/examples/snackbar/Queue.tsx
index 3a82ff686e..9afbbf11a8 100644
--- a/next-docs/public/examples/snackbar/Queue.tsx
+++ b/next-docs/public/examples/snackbar/Queue.tsx
@@ -79,7 +79,7 @@ const Example = () => {
   return (
     <div>
       <Button
-        variant="secondary"
+        variant="outline"
         onClick={() =>
           openSnackbarHandler({
             message: `Number ${options.length + 1} Snackbar`,
diff --git a/next-docs/public/examples/snackbar/Semantics.tsx b/next-docs/public/examples/snackbar/Semantics.tsx
index a7b18bd06c..11b81684e6 100644
--- a/next-docs/public/examples/snackbar/Semantics.tsx
+++ b/next-docs/public/examples/snackbar/Semantics.tsx
@@ -23,7 +23,7 @@ const Example = () => {
     <>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('success')}
         >
           Success
@@ -41,7 +41,7 @@ const Example = () => {
       </div>
       <div>
         <Button
-          variant="secondary"
+          variant="outline"
           onClick={() => openSnackbarHandler('warning')}
         >
           Warning
@@ -58,10 +58,7 @@ const Example = () => {
         </Snackbar>
       </div>
       <div>
-        <Button
-          variant="secondary"
-          onClick={() => openSnackbarHandler('error')}
-        >
+        <Button variant="outline" onClick={() => openSnackbarHandler('error')}>
           Error
         </Button>
         <Snackbar isOpen={snackbar === 'error'} onOpenChange={setSnackbar}>
diff --git a/next-docs/public/examples/snackbar/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/snackbar/__tests__/__snapshots__/index.test.tsx.snap
index d9ec8aaa20..6f43bdd507 100644
--- a/next-docs/public/examples/snackbar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/snackbar/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Close after 1 sec
@@ -64,7 +64,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Close after 3 sec
@@ -99,7 +99,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Close after 1 sec
@@ -153,7 +153,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Close after 3 sec
@@ -239,7 +239,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Border radius
@@ -293,7 +293,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Background
@@ -315,7 +315,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Width
@@ -337,7 +337,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Always light
@@ -359,7 +359,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Always dark
@@ -381,7 +381,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Fonts
@@ -416,7 +416,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Border radius
@@ -470,7 +470,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Background
@@ -492,7 +492,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Width
@@ -514,7 +514,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Always light
@@ -536,7 +536,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Always dark
@@ -558,7 +558,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Fonts
@@ -644,7 +644,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Default
@@ -711,7 +711,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Default
@@ -829,7 +829,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Multi Line
@@ -892,7 +892,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             With Header
@@ -914,7 +914,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             With Close
@@ -936,7 +936,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             With Icon
@@ -958,7 +958,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Multi Line with Icon
@@ -980,7 +980,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             With Close and Icon
@@ -1015,7 +1015,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Multi Line
@@ -1078,7 +1078,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Header
@@ -1100,7 +1100,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Close
@@ -1122,7 +1122,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Icon
@@ -1144,7 +1144,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Multi Line with Icon
@@ -1166,7 +1166,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Close and Icon
@@ -1252,7 +1252,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Top left
@@ -1306,7 +1306,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Top center
@@ -1328,7 +1328,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Top right
@@ -1350,7 +1350,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Bottom left
@@ -1372,7 +1372,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Bottom center
@@ -1394,7 +1394,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Bottom right
@@ -1429,7 +1429,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Top left
@@ -1483,7 +1483,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Top center
@@ -1505,7 +1505,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Top right
@@ -1527,7 +1527,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Bottom left
@@ -1549,7 +1549,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Bottom center
@@ -1571,7 +1571,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Bottom right
@@ -1657,7 +1657,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Queue Snackbar
@@ -1745,7 +1745,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Queue Snackbar
@@ -1884,7 +1884,7 @@ Object {
       >
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Success
@@ -1986,7 +1986,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Warning
@@ -2008,7 +2008,7 @@ Object {
         </div>
         <div>
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
             type="button"
           >
             Error
@@ -2043,7 +2043,7 @@ Object {
     >
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Success
@@ -2145,7 +2145,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Warning
@@ -2167,7 +2167,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Error
@@ -2250,7 +2250,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Close after 1 sec
@@ -2304,7 +2304,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Close after 3 sec
@@ -2335,7 +2335,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Close after 1 sec
@@ -2389,7 +2389,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Close after 3 sec
@@ -2471,7 +2471,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Border radius
@@ -2525,7 +2525,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Background
@@ -2547,7 +2547,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Width
@@ -2569,7 +2569,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Always light
@@ -2591,7 +2591,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Always dark
@@ -2613,7 +2613,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Fonts
@@ -2644,7 +2644,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Border radius
@@ -2698,7 +2698,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Background
@@ -2720,7 +2720,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Width
@@ -2742,7 +2742,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Always light
@@ -2764,7 +2764,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Always dark
@@ -2786,7 +2786,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Fonts
@@ -2868,7 +2868,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Default
@@ -2931,7 +2931,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Default
@@ -3045,7 +3045,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Multi Line
@@ -3108,7 +3108,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Header
@@ -3130,7 +3130,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Close
@@ -3152,7 +3152,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Icon
@@ -3174,7 +3174,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Multi Line with Icon
@@ -3196,7 +3196,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           With Close and Icon
@@ -3227,7 +3227,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Multi Line
@@ -3290,7 +3290,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         With Header
@@ -3312,7 +3312,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         With Close
@@ -3334,7 +3334,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         With Icon
@@ -3356,7 +3356,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Multi Line with Icon
@@ -3378,7 +3378,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         With Close and Icon
@@ -3460,7 +3460,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Top left
@@ -3514,7 +3514,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Top center
@@ -3536,7 +3536,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Top right
@@ -3558,7 +3558,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Bottom left
@@ -3580,7 +3580,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Bottom center
@@ -3602,7 +3602,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Bottom right
@@ -3633,7 +3633,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Top left
@@ -3687,7 +3687,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Top center
@@ -3709,7 +3709,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Top right
@@ -3731,7 +3731,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Bottom left
@@ -3753,7 +3753,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Bottom center
@@ -3775,7 +3775,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Bottom right
@@ -3857,7 +3857,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Queue Snackbar
@@ -3941,7 +3941,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Queue Snackbar
@@ -4076,7 +4076,7 @@ Object {
     <div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Success
@@ -4178,7 +4178,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Warning
@@ -4200,7 +4200,7 @@ Object {
       </div>
       <div>
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
           type="button"
         >
           Error
@@ -4231,7 +4231,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Success
@@ -4333,7 +4333,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Warning
@@ -4355,7 +4355,7 @@ Object {
     </div>
     <div>
       <button
-        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-secondary"
+        class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma"
         type="button"
       >
         Error
diff --git a/next-docs/public/examples/textarea/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/textarea/__tests__/__snapshots__/index.test.tsx.snap
index 1ace669815..f264b5bb4d 100644
--- a/next-docs/public/examples/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -327,7 +327,7 @@ Object {
               rows="3"
             />
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
               type="button"
             >
               Default
@@ -346,7 +346,7 @@ Object {
               rows="3"
             />
             <button
-              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+              class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
               type="button"
             >
               Default
@@ -376,7 +376,7 @@ Object {
             rows="3"
           />
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
             type="button"
           >
             Default
@@ -395,7 +395,7 @@ Object {
             rows="3"
           />
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
             type="button"
           >
             Default
@@ -762,7 +762,7 @@ Object {
             rows="3"
           />
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
             type="button"
           >
             Default
@@ -781,7 +781,7 @@ Object {
             rows="3"
           />
           <button
-            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+            class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
             type="button"
           >
             Default
@@ -807,7 +807,7 @@ Object {
           rows="3"
         />
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
           type="button"
         >
           Default
@@ -826,7 +826,7 @@ Object {
           rows="3"
         />
         <button
-          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 btn-primary absolute start-4 bottom-4"
+          class="px-4 h-10 py-2 gap-2 text-moon-14 rounded-moon-i-sm z-0 flex justify-center items-center font-medium no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 active:scale-90 text-goten bg-piccolo absolute start-4 bottom-4"
           type="button"
         >
           Default
diff --git a/next-docs/public/transformIcon/TransformIcon.tsx b/next-docs/public/transformIcon/TransformIcon.tsx
index 6ac007982f..c09c753792 100644
--- a/next-docs/public/transformIcon/TransformIcon.tsx
+++ b/next-docs/public/transformIcon/TransformIcon.tsx
@@ -63,7 +63,7 @@ const TransformIcon: React.FC = () => {
         <p className="text-moon-20">Drop files to upload</p>
         <p className="text-moon-16">or</p>
         <div className="relative">
-          <Button variant="secondary">Select files</Button>
+          <Button variant="outline">Select files</Button>
           <label className="absolute inset-0 cursor-pointer">
             <input
               ref={inputRef}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a73ba88661..886bcf2eaa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -163,10 +163,10 @@ importers:
   docs:
     dependencies:
       '@heathmont/moon-base-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../workspaces/base
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../workspaces/core
       '@heathmont/moon-icons-tw':
         specifier: 9.28.4
@@ -223,7 +223,7 @@ importers:
         specifier: workspace:^10.7.1
         version: link:../packages/charts
       '@heathmont/moon-cmdk-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../workspaces/cmdk
       '@heathmont/moon-components':
         specifier: workspace:^10.7.1
@@ -232,7 +232,7 @@ importers:
         specifier: workspace:^10.7.1
         version: link:../packages/core
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../workspaces/core
       '@heathmont/moon-datepicker':
         specifier: workspace:^10.7.1
@@ -262,13 +262,13 @@ importers:
         specifier: workspace:^10.7.1
         version: link:../packages/table
       '@heathmont/moon-table-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../workspaces/tables
       '@heathmont/moon-themes':
         specifier: workspace:^10.7.1
         version: link:../packages/themes
       '@heathmont/moon-themes-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../workspaces/themes
       '@heathmont/moon-utils':
         specifier: workspace:^10.7.1
@@ -990,7 +990,7 @@ importers:
         specifier: 1.7.16
         version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../core
       cmdk:
         specifier: 0.2.0
@@ -1050,7 +1050,7 @@ importers:
   workspaces/tables:
     dependencies:
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.7.2
+        specifier: workspace:^10.7.3
         version: link:../core
       react:
         specifier: 18.2.0
diff --git a/workspaces/base/CHANGELOG.md b/workspaces/base/CHANGELOG.md
index 9fc75014ad..b74bcc73e4 100644
--- a/workspaces/base/CHANGELOG.md
+++ b/workspaces/base/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heathmont/moon-base-tw
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+
 ## 10.7.2
 
 ### Patch Changes
diff --git a/workspaces/base/package.json b/workspaces/base/package.json
index 0e2d77f4ba..e04abc9136 100644
--- a/workspaces/base/package.json
+++ b/workspaces/base/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-base-tw",
   "sideEffects": false,
-  "version": "10.7.2",
+  "version": "10.7.3",
   "files": [
     "lib"
   ],
diff --git a/workspaces/cmdk/CHANGELOG.md b/workspaces/cmdk/CHANGELOG.md
index 8c93c39d94..be1db0db59 100644
--- a/workspaces/cmdk/CHANGELOG.md
+++ b/workspaces/cmdk/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @heathmont/moon-cmdk-tw
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+- Updated dependencies
+  - @heathmont/moon-core-tw@10.7.3
+
 ## 10.7.2
 
 ### Patch Changes
diff --git a/workspaces/cmdk/package.json b/workspaces/cmdk/package.json
index a6064f9886..b53aa9a4a5 100644
--- a/workspaces/cmdk/package.json
+++ b/workspaces/cmdk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-cmdk-tw",
   "sideEffects": false,
-  "version": "10.7.2",
+  "version": "10.7.3",
   "files": [
     "lib"
   ],
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.16",
-    "@heathmont/moon-core-tw": "workspace:^10.7.2",
+    "@heathmont/moon-core-tw": "workspace:^10.7.3",
     "cmdk": "0.2.0",
     "tailwind-merge": "1.14.0",
     "tailwindcss-radix": "2.8.0"
diff --git a/workspaces/core/CHANGELOG.md b/workspaces/core/CHANGELOG.md
index 1985f16408..1bb34590fc 100644
--- a/workspaces/core/CHANGELOG.md
+++ b/workspaces/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heathmont/moon-core-tw
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+
 ## 10.7.2
 
 ### Patch Changes
diff --git a/workspaces/core/package.json b/workspaces/core/package.json
index 1a8e8bc13b..7b7b1ad157 100644
--- a/workspaces/core/package.json
+++ b/workspaces/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-core-tw",
   "sideEffects": false,
-  "version": "10.7.2",
+  "version": "10.7.3",
   "files": [
     "lib"
   ],
diff --git a/workspaces/core/src/button/Button.tsx b/workspaces/core/src/button/Button.tsx
index 148f7a6b80..7b8738c805 100644
--- a/workspaces/core/src/button/Button.tsx
+++ b/workspaces/core/src/button/Button.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
+import type ButtonProps from './private/types/ButtonProps';
+import type ButtonVariants from './private/types/ButtonVariants';
 import AnimationContent from './private/utils/buttonAnimations/AnimationContent';
 import ButtonComponent from './styles/ButtonComponent';
 import Hover from './styles/Hover';
 import IconLeft from './styles/IconLeft';
 import IconRight from './styles/IconRight';
-import type ButtonProps from './private/types/ButtonProps';
-import type ButtonVariants from './private/types/ButtonVariants';
 
 export type Props<C extends React.ElementType> = React.PropsWithChildren<
   ButtonProps<C>
@@ -14,7 +14,7 @@ export type Props<C extends React.ElementType> = React.PropsWithChildren<
 
 const Button = <C extends React.ElementType = 'button'>({
   children,
-  variant = 'primary',
+  variant = 'fill',
   size = 'md',
   icon, // deprecated
   iconLeft, // not boolean anymore
@@ -33,7 +33,7 @@ const Button = <C extends React.ElementType = 'button'>({
   return (
     <ButtonComponent
       size={size}
-      variant={variant as ButtonVariants}
+      variant={variant}
       icon={icon}
       iconLeft={iconLeft}
       iconRight={iconRight}
diff --git a/workspaces/core/src/button/private/types/ButtonVariants.ts b/workspaces/core/src/button/private/types/ButtonVariants.ts
index 1ad1e2d6d5..9df4c5a98c 100644
--- a/workspaces/core/src/button/private/types/ButtonVariants.ts
+++ b/workspaces/core/src/button/private/types/ButtonVariants.ts
@@ -1,3 +1,9 @@
-type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonVariants =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'fill'
+  | 'outline'
+  | 'ghost';
 
 export default ButtonVariants;
diff --git a/workspaces/core/src/button/private/utils/buttonSizes/getButtonSize.ts b/workspaces/core/src/button/private/utils/buttonSizes/getButtonSize.ts
index 8b679a4bda..d579185f5c 100644
--- a/workspaces/core/src/button/private/utils/buttonSizes/getButtonSize.ts
+++ b/workspaces/core/src/button/private/utils/buttonSizes/getButtonSize.ts
@@ -1,9 +1,9 @@
-import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import getLgPadding from './getLgPadding';
 import getMdPadding from './getMdPadding';
 import getSmPadding from './getSmPadding';
 import getXlPadding from './getXlPadding';
 import getXsPadding from './getXsPadding';
+import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 
 const getButtonSize = ({
diff --git a/workspaces/core/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts b/workspaces/core/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
index 117e1304c1..b0ef89f21f 100644
--- a/workspaces/core/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
+++ b/workspaces/core/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
@@ -2,7 +2,7 @@ import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 
 const getButtonCommonStyles = (
-  disabled: ButtonSettingsProps['disabled']
+  disabled?: ButtonSettingsProps['disabled']
 ): string =>
   mergeClassnames(
     'relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden',
diff --git a/workspaces/core/src/button/private/utils/buttonStyles/getButtonVariants.ts b/workspaces/core/src/button/private/utils/buttonStyles/getButtonVariants.ts
index a8b249ee82..f59c29ffe7 100644
--- a/workspaces/core/src/button/private/utils/buttonStyles/getButtonVariants.ts
+++ b/workspaces/core/src/button/private/utils/buttonStyles/getButtonVariants.ts
@@ -4,12 +4,12 @@ import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 const getButtonVariants = ({
   variant,
   disabled,
-}: ButtonSettingsProps): string => {
-  if (variant === 'secondary') {
-    return 'btn-secondary';
+}: Pick<ButtonSettingsProps, 'variant' | 'disabled'>): string => {
+  if (variant === 'secondary' || variant === 'outline') {
+    return 'text-bulma bg-transparent ring-inset ring-1 ring-trunks hover:ring-bulma';
   }
   if (variant === 'tertiary') {
-    return 'btn-tertiary';
+    return 'text-goten bg-hit';
   }
   if (variant === 'ghost') {
     return mergeClassnames(
@@ -17,7 +17,10 @@ const getButtonVariants = ({
       !disabled && 'hover:text-bulma'
     );
   }
-  return 'btn-primary';
+  if (variant === 'primary' || variant === 'fill') {
+    return 'text-goten bg-piccolo';
+  }
+  return '';
 };
 
 export default getButtonVariants;
diff --git a/workspaces/core/src/button/styles/ButtonComponent.tsx b/workspaces/core/src/button/styles/ButtonComponent.tsx
index eda3600a56..76c6aebf5f 100644
--- a/workspaces/core/src/button/styles/ButtonComponent.tsx
+++ b/workspaces/core/src/button/styles/ButtonComponent.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonProps from '../private/types/ButtonProps';
 import getAnimation from '../private/utils/buttonAnimations/getAnimation';
 import getButtonSize from '../private/utils/buttonSizes/getButtonSize';
 import getButtonCommonStyles from '../private/utils/buttonStyles/getButtonCommonStyles';
 import getButtonVariants from '../private/utils/buttonStyles/getButtonVariants';
-import type ButtonProps from '../private/types/ButtonProps';
 
 const ButtonComponent = <C extends React.ElementType>({
   variant,
diff --git a/workspaces/core/src/button/styles/Hover.tsx b/workspaces/core/src/button/styles/Hover.tsx
index 79f89fe749..c7e36abe2b 100644
--- a/workspaces/core/src/button/styles/Hover.tsx
+++ b/workspaces/core/src/button/styles/Hover.tsx
@@ -7,7 +7,7 @@ const Hover = ({ isHover }: { isHover: boolean }) => (
     className={mergeClassnames(
       'z-[-1] block absolute inset-0 pointer-events-none',
       'transition-[background-color_0.2s_ease-in-out]',
-      isHover && 'bg-bulma/[.07]'
+      isHover && 'bg-heles'
     )}
   />
 );
diff --git a/workspaces/core/src/button/styles/IconLeft.tsx b/workspaces/core/src/button/styles/IconLeft.tsx
index dd01596403..a4bba78590 100644
--- a/workspaces/core/src/button/styles/IconLeft.tsx
+++ b/workspaces/core/src/button/styles/IconLeft.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 import getIconSize from '../private/utils/buttonSizes/getIconSize';
 import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition';
-import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 
 const IconLeft = ({ fullWidth, iconLeft, size }: ButtonSettingsProps) => (
   <span
diff --git a/workspaces/core/src/button/styles/IconRight.tsx b/workspaces/core/src/button/styles/IconRight.tsx
index 3153f9d4ac..73112926b1 100644
--- a/workspaces/core/src/button/styles/IconRight.tsx
+++ b/workspaces/core/src/button/styles/IconRight.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 import getIconSize from '../private/utils/buttonSizes/getIconSize';
 import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition';
-import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 
 const IconRight = ({ fullWidth, iconRight, size }: ButtonSettingsProps) => (
   <span
diff --git a/workspaces/core/src/iconButton/IconButton.tsx b/workspaces/core/src/iconButton/IconButton.tsx
index 43292df85b..6040fd8679 100644
--- a/workspaces/core/src/iconButton/IconButton.tsx
+++ b/workspaces/core/src/iconButton/IconButton.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import Hover from '../button/styles/Hover';
+import type IconButtonProps from './private/types/IconButtonProps';
 import AnimationContent from './private/utils/AnimationContent';
 import getAriaLabel from './private/utils/getAriaLabel';
 import IconButtonComponent from './styles/IconButtonComponent';
 import type ButtonVariants from '../button/private/types/ButtonVariants';
-import type IconButtonProps from './private/types/IconButtonProps';
+import Hover from '../button/styles/Hover';
 
 type Props<C extends React.ElementType> = React.PropsWithChildren<
   IconButtonProps<C>
@@ -13,7 +13,7 @@ type Props<C extends React.ElementType> = React.PropsWithChildren<
 
 const IconButton = <C extends React.ElementType = 'button'>({
   children,
-  variant = 'primary',
+  variant = 'fill',
   size = 'md',
   icon,
   disabled,
diff --git a/workspaces/core/src/iconButton/private/types/IconButtonProps.ts b/workspaces/core/src/iconButton/private/types/IconButtonProps.ts
index 0cedca1b2d..09936d4ba2 100644
--- a/workspaces/core/src/iconButton/private/types/IconButtonProps.ts
+++ b/workspaces/core/src/iconButton/private/types/IconButtonProps.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import ButtonSizes from '../../../button/private/types/ButtonSizes';
 import type ButtonAnimations from '../../../button/private/types/ButtonAnimations';
+import ButtonSizes from '../../../button/private/types/ButtonSizes';
 import type ButtonVariants from '../../../button/private/types/ButtonVariants';
 
 export type IconButtonSettingsProps = {
diff --git a/workspaces/core/src/iconButton/styles/IconButtonComponent.tsx b/workspaces/core/src/iconButton/styles/IconButtonComponent.tsx
index 7d1b7000f2..97997faa88 100644
--- a/workspaces/core/src/iconButton/styles/IconButtonComponent.tsx
+++ b/workspaces/core/src/iconButton/styles/IconButtonComponent.tsx
@@ -4,8 +4,8 @@ import getIconSize from '../../button/private/utils/buttonSizes/getIconSize';
 import getButtonCommonStyles from '../../button/private/utils/buttonStyles/getButtonCommonStyles';
 import getButtonVariants from '../../button/private/utils/buttonStyles/getButtonVariants';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
-import getButtonSize from '../private/utils/getButtonSize';
 import type IconButtonProps from '../private/types/IconButtonProps';
+import getButtonSize from '../private/utils/getButtonSize';
 
 const IconButtonComponent = <C extends React.ElementType>({
   variant,
diff --git a/workspaces/core/src/private/presets/ds-moon-preset.js b/workspaces/core/src/private/presets/ds-moon-preset.js
index eeafcf7ebf..14afe86829 100644
--- a/workspaces/core/src/private/presets/ds-moon-preset.js
+++ b/workspaces/core/src/private/presets/ds-moon-preset.js
@@ -319,22 +319,6 @@ module.exports = {
     require('tailwindcss-radix')(),
     plugin(function ({ addComponents }) {
       addComponents({
-        '.btn-primary': {
-          color: 'rgb(var(--goten))',
-          backgroundColor: `rgb(var(--piccolo))`,
-        },
-        '.btn-secondary': {
-          color: 'rgb(var(--bulma))',
-          background: 'none',
-          boxShadow: `inset 0 0 0 1px rgb(var(--trunks)/1)`,
-          '&:hover': {
-            boxShadow: `inset 0 0 0 1px rgb(var(--bulma))`,
-          },
-        },
-        '.btn-tertiary': {
-          color: 'rgb(var(--goten))',
-          backgroundColor: 'rgb(var(--hit))',
-        },
         '.anim-error': {
           transform: 'translate3d(0, 0, 0)',
           backfaceVisibility: 'hidden',
diff --git a/workspaces/core/src/search/private/components/Input.tsx b/workspaces/core/src/search/private/components/Input.tsx
index 03255ec62f..28d2898476 100644
--- a/workspaces/core/src/search/private/components/Input.tsx
+++ b/workspaces/core/src/search/private/components/Input.tsx
@@ -55,6 +55,9 @@ const InnerInput = forwardRef(
           'focus:ring-0 bg-transparent placeholder-bulma text-bulma',
           className
         )}
+        onClick={() => {
+          onChangeOpen(true);
+        }}
         onChange={(e) => {
           onChangeSearch(e.currentTarget.value);
         }}
diff --git a/workspaces/core/src/search/private/components/Search.tsx b/workspaces/core/src/search/private/components/Search.tsx
index 42f33c1d04..625ed625af 100644
--- a/workspaces/core/src/search/private/components/Search.tsx
+++ b/workspaces/core/src/search/private/components/Search.tsx
@@ -8,13 +8,13 @@ import React, {
   useState,
 } from 'react';
 import { Transition as HeadlessTransition } from '@headlessui/react';
-import mergeClassnames from '../../../mergeClassnames/mergeClassnames';
-import useClickOutside from '../../../private/hooks/useClickOutside';
-import { SearchContext, SelectContext } from '../utils/context';
 import { Input } from './Input';
 import NoResults from './NoResults';
 import ResultItem from './ResultItem';
+import mergeClassnames from '../../../mergeClassnames/mergeClassnames';
+import useClickOutside from '../../../private/hooks/useClickOutside';
 import type SearchProps from '../types/SearchProps';
+import { SearchContext, SelectContext } from '../utils/context';
 
 const SearchRoot = ({
   selected: selectedParent,
@@ -135,8 +135,10 @@ const SearchRoot = ({
     }
   });
 
+  const openSearch = useCallback(() => onChangeOpen(true), []);
+
   return (
-    <div ref={ref} onKeyDown={onKeyDown}>
+    <div ref={ref} onKeyDown={onKeyDown} onClick={openSearch}>
       <div
         className={mergeClassnames(
           'relative w-full h-full bg-gohan flex flex-col border border-beerus',
diff --git a/workspaces/tables/CHANGELOG.md b/workspaces/tables/CHANGELOG.md
index 0d9b972842..7d0bda91ef 100644
--- a/workspaces/tables/CHANGELOG.md
+++ b/workspaces/tables/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @heathmont/moon-table-tw
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+- Updated dependencies
+  - @heathmont/moon-core-tw@10.7.3
+
 ## 10.7.2
 
 ### Patch Changes
diff --git a/workspaces/tables/package.json b/workspaces/tables/package.json
index 23ad01e895..2578d0454d 100644
--- a/workspaces/tables/package.json
+++ b/workspaces/tables/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-table-tw",
   "sideEffects": false,
-  "version": "10.7.2",
+  "version": "10.7.3",
   "files": [
     "lib"
   ],
@@ -20,7 +20,7 @@
     "chokidar": "chokidar \"**/*.tsx\" \"**/*.ts\" -i \"lib/**/*.d.ts\" -c \"pnpm run build:code\" "
   },
   "dependencies": {
-    "@heathmont/moon-core-tw": "workspace:^10.7.2",
+    "@heathmont/moon-core-tw": "workspace:^10.7.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-table": "7.8.0",
diff --git a/workspaces/themes/CHANGELOG.md b/workspaces/themes/CHANGELOG.md
index 7ccfb51ef9..6dc1a59a92 100644
--- a/workspaces/themes/CHANGELOG.md
+++ b/workspaces/themes/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heathmont/moon-themes-tw
 
+## 10.7.3
+
+### Patch Changes
+
+- Deploy 10.7.3
+
 ## 10.7.2
 
 ### Patch Changes
diff --git a/workspaces/themes/package.json b/workspaces/themes/package.json
index d20c6b7c2d..45f97c6662 100644
--- a/workspaces/themes/package.json
+++ b/workspaces/themes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-themes-tw",
   "sideEffects": false,
-  "version": "10.7.2",
+  "version": "10.7.3",
   "files": [
     "lib"
   ],