From 227e85816cb33b4cef0894ed651524058ead5767 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Sat, 26 Oct 2024 17:36:31 -0300
Subject: [PATCH] add nucleus-box

---
 demo/src/App.vue | 19 ++++++++++---------
 yarn.lock        |  8 ++++----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 053eebf..755edc8 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -1,17 +1,16 @@
 <script setup>
-import Nucleus, { NucleusCode } from 'nucleus-vue';
+import Nucleus, { NucleusCode, NucleusBox } from 'nucleus-vue';
 import { configApp } from './App.config';
 </script>
 
 <template>
   <Nucleus :config="configApp">
     <VLibras />
-    <div class="content example">
-      <h2>Usage Example</h2>
-
+    <NucleusBox class="example" title="Usage Example">
       <h3>Widget Position</h3>
       <p>You can set the widget's position using the <code>position</code> prop. For example:</p>
-      <NucleusCode language="tsx">{{ `<VLibras position="left" />` }}</NucleusCode>
+      <NucleusCode language="tsx">{{ `<VLibras position="left" />` }}
+      </NucleusCode>
 
       <h3>Available Position Types</h3>
       <p>The position options that can be used are:</p>
@@ -28,7 +27,8 @@ import { configApp } from './App.config';
 
       <h3>Avatar</h3>
       <p>You can select the widget's avatar using the <code>avatar</code> prop. Example:</p>
-      <NucleusCode language="tsx">{{ `<VLibras avatar="hosana" />` }}</NucleusCode>
+      <NucleusCode language="tsx">{{ `<VLibras avatar="hosana" />` }}
+      </NucleusCode>
 
       <h3>Available Avatar Options</h3>
       <ul>
@@ -40,8 +40,9 @@ import { configApp } from './App.config';
 
       <h3>Opacity</h3>
       <p>To adjust the widget's opacity, use the <code>opacity</code> prop:</p>
-      <NucleusCode language="tsx">{{ `<VLibras opacity="0.8" />` }}</NucleusCode>
-    </div>
+      <NucleusCode language="tsx">{{ `<VLibras opacity="0.8" />` }}
+      </NucleusCode>
+    </NucleusBox>
 
   </Nucleus>
 </template>
@@ -71,7 +72,7 @@ import { configApp } from './App.config';
     color: var(--primary);
     font-weight: bold;
   }
-  
+
   code {
     margin-bottom: 1rem;
   }
diff --git a/yarn.lock b/yarn.lock
index e19ff20..35aa3c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1140,10 +1140,10 @@ normalize-package-data@^3.0.0:
     semver "^7.3.4"
     validate-npm-package-license "^3.0.1"
 
-nucleus-vue@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.npmjs.org/nucleus-vue/-/nucleus-vue-0.0.7.tgz"
-  integrity sha512-SJB1zwo+1VWUxT0O4cx3EopF/jZE+ARaDZESRpCUdNMzxePfruBxaOBpMPTd6YyYAuThsT/wDE/1y+iIfdtPeA==
+nucleus-vue@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.npmjs.org/nucleus-vue/-/nucleus-vue-0.0.14.tgz"
+  integrity sha512-5BKa7eEx5mbm8dOS7m6h/fULvdqKClQn1FHWc0aqQHP1+vn6OgUtPS1raihZiJuusvN8b5rzBRto9KKVvx6uig==
 
 p-limit@^1.1.0:
   version "1.3.0"