@digigov/ui 2.0.0-13876dba → 2.0.0-16fbe090

package/src/form/RadioContainer/doc.mdx

@@ -7,44 +7,44 @@ title: RadioContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/Default.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/Inline.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/Inline.tsx" />
 
-### Checkbox items with hints
+### Radio items with hints
 
-You can add hints to checkbox items to provide additional information about the options.
+You can add hints to radio items to provide additional information about the options.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/WithHints.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/WithHints.tsx" />
 
-### RadioContainer items with a text divider
+### Radio items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/NoneAnswer.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/NoneAnswer.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/WithErrorMessage.tsx" />
 
 ## Accessibility
 

package/src/form/SearchContainer/doc.mdx

@@ -7,7 +7,7 @@ title: SearchContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/SearchContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/SearchContainer/__stories__/Default.tsx" />
 
 ## API
 

package/src/form/SelectContainer/doc.mdx

@@ -7,19 +7,19 @@ title: SelectContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/SelectContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/SelectContainer/__stories__/Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<code src="@digigov/ui/form/SelectContainer/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/SelectContainer/__stories__/WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/SelectContainer/__stories__/DisabledInput.tsx" />
+<code src="@digigov/ui/src/form/SelectContainer/__stories__/DisabledInput.tsx" />
 
 ## Accessibility
 

package/src/form/SingleCharacterInputs/doc.mdx

@@ -7,13 +7,13 @@ title: SingleCharacterInputs
 
 ## How to use
 
-<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/SingleCharacterInputs/__stories__/Default.tsx" />
 
 ### Error message
 
 If you’re highlighting all the digits of the password, style the fields like this:
 
-<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
+<code src="@digigov/ui/src/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
 
 ## API
 

package/src/form/TextArea/doc.mdx

@@ -7,39 +7,39 @@ title: TextArea
 
 ## How to use
 
-<code src="@digigov/ui/form/TextArea/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/Default.tsx" />
 
 ### Use appropriately-sized textarea inputs
 
-<code src="@digigov/ui/form/TextArea/__stories__/WithDeclaredRows.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/WithDeclaredRows.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
 
-<code src="@digigov/ui/form/TextArea/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<code src="@digigov/ui/form/TextArea/__stories__/LimitedCharacters.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<code src="@digigov/ui/form/TextArea/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/TextArea/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<code src="@digigov/ui/form/TextArea/__stories__/DisabledInput.tsx" />
+<code src="@digigov/ui/src/form/TextArea/__stories__/DisabledInput.tsx" />
 
 ## API
 

package/src/form/TextInput/doc.mdx

@@ -7,13 +7,13 @@ title: TextInput
 
 ## How to use
 
-<code src="@digigov/ui/form/TextInput/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/Default.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
 
-<code src="@digigov/ui/form/TextInput/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -23,33 +23,33 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<code src="@digigov/ui/form/TextInput/__stories__/FixedWidths.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<code src="@digigov/ui/form/TextInput/__stories__/FluidWidths.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<code src="@digigov/ui/form/TextInput/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/WithHint.tsx" />
 
 ### Asking for numbers
 
-<code src="@digigov/ui/form/TextInput/__stories__/AskingForNumbers.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/TextInput/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<code src="@digigov/ui/form/TextInput/__stories__/DisabledInput.tsx" />
+<code src="@digigov/ui/src/form/TextInput/__stories__/DisabledInput.tsx" />
 
 ## API
 

package/src/i18n/locales/el.ts

@@ -14,10 +14,11 @@ export default {
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
+      amka: 'Ο ΑΜΚΑ που συμπληρώσατε δεν είναι έγκυρος.',
       file_size:
-        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}}).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -34,36 +35,86 @@ export default {
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το ετος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το ετος.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
       },
       datetime: {
         invalid: 'Η ημερομηνία και ώρα πρέπει να είναι έγκυρη.',
+        invalid_month_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος, την ώρα και τα λεπτά.',
+        invalid_day_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, την ώρα και τα λεπτά.',
+        invalid_year_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος, την ώρα και τα λεπτά.',
+        invalid_month_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, την ώρα και τα λεπτά.',
+        invalid_day_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, την ώρα και τα λεπτά.',
+        invalid__hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
+        invalid_minutes: 'Η ημερομηνία πρέπει να περιλαμβάνει τα λεπτά.',
+        invalid_hours: 'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα.',
+        invalid_month_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και τα λεπτά.',
+        invalid_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και την ώρα.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
+        invalid_day_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και τα λεπτά.',
+        invalid_day_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, το έτος και την ώρα.',
+        invalid_day_month_year:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος.',
+        invalid_day_month_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα, το έτος και την ώρα.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
+        invalid_day_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και τα λεπτά.',
+        invalid_day_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και την ώρα.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τη μέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το έτος.',
-        invalid_hours: 'Συμπληρώστε έγκυρη ώρα.',
-        invalid_minutes: 'Συμπληρώστε έγκυρα λεπτά.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_year_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και τα λεπτά.',
+        invalid_year_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει το έτος και την ώρα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το έτος.',
+        invalid_month_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και τα λεπτά.',
+        invalid_month_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και την ώρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_day_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τα λεπτά.',
+        invalid_day_hours:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και την ώρα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
         invalid_hours_range: 'Η ώρα πρέπει να είναι μεταξύ 0 και 23.',
         invalid_minutes_range: 'Τα λεπτά πρέπει να είναι μεταξύ 0 και 59.',
+        invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
+        invalid_month_range: 'Ο μήνας πρέπει να είναι μεταξύ 1 και 12.',
+        invalid_day_month_year_minutes:
+          'Η ημερομηννία πρέπει να περιλαμβάνει την ημέρα, τον μήνα και το έτος κ  τα λεπτά.',
+        invalid_hours_minutes:
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
         earlier_than:
-          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}',
+          'Συμπληρώστε ημερομηνία και ώρα προγενέστερη της {{maxDateTime}}.',
         later_than:
-          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}',
+          'Συμπληρώστε ημερομηνία και ώρα μεταγενέστερη της {{minDateTime}}.',
       },
       otp: {
         invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
@@ -77,6 +128,10 @@ export default {
         more_than: 'Έχετε υπερβεί το όριο των {{max}} χαρακτήρων.',
         less_than: 'Χρειάζονται τουλάχιστον {{min}} χαρακτήρες.',
       },
+      rate: {
+        rate_percent:
+          'Συμπληρώστε ένα έγκυρο ακέραιο ποσοστό από το {{min}} έως το {{max}}',
+      },
     },
     info: {
       text: {
@@ -134,14 +189,14 @@ export default {
   },
   upload: {
     file: 'Αρχείο',
+    image: 'Εικόνα',
     choose_file: 'Επιλογή αρχείου',
     change_file: 'Αντικατάσταση αρχείου',
     no_file: 'Δεν έχετε επιλέξει αρχείο',
     reset_file: 'Αφαίρεση',
-    image: 'Φωτογραφία',
-    no_image: 'Δεν έχετε επιλέξει φωτογραφία',
-    change_image: 'Αντικατάσταση φωτογραφίας',
-    choose_image: 'Επιλογή φωτογραφίας',
+    no_image: 'Δεν έχετε επιλέξει εικόνα',
+    change_image: 'Αντικατάσταση εικόνας',
+    choose_image: 'Επιλογή εικόνας',
   },
   'copy-to-clipboard': {
     message: 'Το κείμενο αντιγράφηκε επιτυχώς!',

package/src/i18n/locales/en.ts

@@ -14,8 +14,9 @@ export default {
       string: 'This field must be a string',
       email: 'Please enter a valid email address (e-mail).',
       afm: 'The VAT number you entered is incorrect.',
-      file_size: 'File size is larger than allowed ({{maxSizeToMb}}Mb).',
-      image_size: 'Image size is larger than allowed ({{maxSizeToMb}}Mb).',
+      amka: 'The SSN you entered is incorrect.',
+      file_size: 'File size is larger than allowed ({{maxSize}}).',
+      image_size: 'Image size is larger than allowed ({{maxSize}}).',
       mobile_phone: 'Fill in a valid mobile phone number.',
       landline: 'Fill in a valid landline phone number.',
       phone_number: 'Fill in a valid phone number.',
@@ -37,21 +38,56 @@ export default {
         invalid_day: 'Date must include day.',
         invalid_month: 'Date must include month.',
         invalid_year: 'Date must include year.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
       },
       datetime: {
         invalid: 'Date and time must be valid.',
+        invalid_month_year_hours_minutes:
+          'Date must include month, year, hours, and minutes.',
+        invalid_day_year_hours_minutes:
+          'Date must include day, year, hours, and minutes.',
+        invalid_day_month_hours_minutes:
+          'Date must include day, month, hours, and minutes.',
+        invalid_year_hours_minutes:
+          'Date must include year, hours, and minutes.',
+        invalid_month_hours_minutes:
+          'Date must include month, hours, and minutes.',
+        invalid_day_hours_minutes: 'Date must include day, hours, and minutes.',
+        invalid__hours_minutes: 'Time must include hours and minutes.',
+        invalid_minutes: 'Please enter valid minutes.',
+        invalid_hours: 'Please enter valid hours.',
+        invalid_month_year_minutes:
+          'Date must include month, year, and minutes.',
+        invalid_month_year_hours: 'Date must include month, year, and hours.',
         invalid_month_year: 'Date must include month and year.',
+        invalid_day_year_minutes: 'Date must include day, year, and minutes.',
+        invalid_day_year_hours: 'Date must include day, year, and hours.',
+        invalid_day_month_year: 'Date must include day, month, and year.',
+        invalid_day_month_year_hours:
+          'Date must include day, month, year, and hours.',
         invalid_day_year: 'Date must include day and year.',
+        invalid_day_month_minutes: 'Date must include day, month, and minutes.',
+        invalid_day_month_hours: 'Date must include day, month, and hours.',
         invalid_day_month: 'Date must include day and month.',
-        invalid_day: 'Date must include day.',
-        invalid_month: 'Date must include month.',
+        invalid_year_minutes: 'Date must include year and minutes.',
+        invalid_year_hours: 'Date must include year and hours.',
         invalid_year: 'Date must include year.',
-        invalid_hours: 'Please enter valid hours.',
-        invalid_minutes: 'Please enter valid minutes.',
+        invalid_month_minutes: 'Date must include month and minutes.',
+        invalid_month_hours: 'Date must include month and hours.',
+        invalid_month: 'Date must include month.',
+        invalid_day_minutes: 'Date must include day and minutes.',
+        invalid_day_hours: 'Date must include day and hours.',
+        invalid_day: 'Date must include day.',
+        invalid_day_month_year_minutes:
+          'Date must include day, month,year and minutes.',
+        invalid_hours_minutes: 'Date must include hours and minutes.',
         invalid_hours_range: 'Hours must be between 0 and 23.',
         invalid_minutes_range: 'Minutes must be between 0 and 59.',
+        invalid_day_range: 'Day must be between 1 and {{maxDay}}.',
+        invalid_month_range: 'Month must be between 1 and 12.',
         earlier_than: 'The date and time must be earlier than {{maxDateTime}}.',
-        later_than: 'The date and time must be later than {{minDateTime}}',
+        later_than: 'The date and time must be later than {{minDateTime}}.',
       },
       text: {
         more_than: 'You have surpass the {{max}} characters limit.',
@@ -61,6 +97,10 @@ export default {
         image_dimension_size:
           'The dimensions you entered exceed the expected limits. Minimum size ({{minWidth}}x{{minHeight}})px, Maximum Size: ({{maxWidth}}x{{maxHeight}})px',
       },
+      rate: {
+        rate_percent:
+          'Please enter a valid integer percentage between {{min}} and {{max}}',
+      },
     },
     info: {
       text: {

package/src/layouts/Basic/Bottom/doc.mdx

@@ -9,7 +9,7 @@ Use the Bottom component in order to wrap the Footer's components.
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Basic/Bottom/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Bottom/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Container/doc.mdx

@@ -9,10 +9,10 @@ Container compoment wraps around other elements, grouping them together. Contain
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Basic/Container/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Container/__stories__/Default.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["Container"]} /> 
+<ComponentProps componentName={["Container"]} /> 

package/src/layouts/Basic/Main/doc.mdx

@@ -10,7 +10,7 @@ title: Main
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
-<code src="@digigov/ui/layouts/Basic/Main/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Main/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Top/doc.mdx

@@ -10,7 +10,7 @@ The Top component is used to group the Header components.
 
 ## How to use
 
-<code src="@digigov/ui/layouts/Basic/Top/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/Top/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/doc.mdx

@@ -10,17 +10,15 @@ Content and Bottom components.
 
 ## How to use
 
-### Default layout
-
-<code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout
 
-<code src="@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
 
 ### Multiple rows layout
 
-<code src="@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
+<code src="@digigov/ui/src/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
 
 ## API