Feat: Add tag documentation

docs/components/callout.mdx

@@ -45,7 +45,7 @@ import { CheckCircleIcon } from '@heroicons/react/solid'
 
 ##### <span name="floating-nav">Variant</span>
 
-With the prop <Tag text='variant' /> you can customize the color of the callout
+With the prop <TagDocs text='variant' /> you can customize the color of the callout
 
 <Playground className="gap-y-2">
     <Flex className="flex-col" gap="4">
@@ -75,7 +75,7 @@ export default function App() {
 
 ##### <span name="floating-nav">Icon</span>
 
-With the prop <Tag text='icon' /> you can render a custom icon in the callout before the title, is a optional
+With the prop <TagDocs text='icon' /> you can render a custom icon in the callout before the title, is a optional
 prop
 
 <Playground className="gap-y-2">
@@ -102,7 +102,7 @@ export default function App() {
 
 ##### <span name="floating-nav">Title</span>
 
-With the props <Tag text='title' /> you can provide a title of the callout and this prop is the only required
+With the props <TagDocs text='title' /> you can provide a title of the callout and this prop is the only required
 of the component
 
 <Playground className="gap-y-2">

docs/components/confirm-dialog.mdx

@@ -130,7 +130,7 @@ we can avoid any issues with the ConfirmDialog component not being fully initial
 
 ##### <span name="floating-nav">Title</span>
 
-The prop <Tag text='title' /> is used to display a descriptive title in the confirmation dialog
+The prop <TagDocs text='title' /> is used to display a descriptive title in the confirmation dialog
 
 <Playground>
  <ConfirmDialogCustom title='Example title' />
@@ -155,7 +155,7 @@ The prop <Tag text='title' /> is used to display a descriptive title in the conf
 
 ##### <span name="floating-nav">Text Confirm Btn</span>
 
-The prop <Tag text='textConfirmBtn' /> is used to define the text of the confirmation button in the dialog box
+The prop <TagDocs text='textConfirmBtn' /> is used to define the text of the confirmation button in the dialog box
 
 <Playground>
  <ConfirmDialogCustom textConfirmBtn='Example Confirm' />
@@ -180,7 +180,7 @@ The prop <Tag text='textConfirmBtn' /> is used to define the text of the confirm
 
 ##### <span name="floating-nav">On Cancel and Text Cancel Btn</span>
 
-The props <Tag text='onCancel and textCancelBtn' /> they are used to cancel the confirmDialog, onCancel should carry the function that closes it and textCancelBtn the text that you want it to carry
+The props <TagDocs text='onCancel and textCancelBtn' /> they are used to cancel the confirmDialog, onCancel should carry the function that closes it and textCancelBtn the text that you want it to carry
 
 Note that it is recommended that the textCancelBtn and handleCancel props be defined together, as defining only textCancelBtn would not make much sense
 
@@ -208,7 +208,7 @@ Note that it is recommended that the textCancelBtn and handleCancel props be def
 
 ##### <span name="floating-nav">Width</span>
 
-The prop <Tag text='width' /> is used to set the custom width of the confirmation dialog to
+The prop <TagDocs text='width' /> is used to set the custom width of the confirmation dialog to
 
 
 <Playground>

docs/components/date-picker.mdx

@@ -39,7 +39,7 @@ The code snippet below shows how to use the DatePicker component:
 
 ##### <span name="floating-nav">Language</span>
 
-With the prop <Tag text='language' />, its variants <Tag text='es' /> and <Tag text='en' /> you can control the language
+With the prop <TagDocs text='language' />, its variants <TagDocs text='es' /> and <TagDocs text='en' /> you can control the language
 
 <Playground>
 
@@ -61,7 +61,7 @@ With the prop <Tag text='language' />, its variants <Tag text='es' /> and <Tag t
 
 ##### <span name="floating-nav">Format</span>
 
-With the prop <Tag text='format' />, and its <Tag text='short' /> and <Tag text='long' /> variants, you can customize the display format of the date, either in its full or abbreviated form.
+With the prop <TagDocs text='format' />, and its <TagDocs text='short' /> and <TagDocs text='long' /> variants, you can customize the display format of the date, either in its full or abbreviated form.
 
 <Playground>
 <Flex justifyContent='around'>
@@ -82,7 +82,7 @@ With the prop <Tag text='format' />, and its <Tag text='short' /> and <Tag text=
 
 ##### <span name="floating-nav">OnlyOf</span>
 
-With the prop <Tag text='onlyOf' />, its variants <Tag text='year' />, <Tag text='month' />, <Tag text='day' /> and <Tag text='month' /> you can control the format
+With the prop <TagDocs text='onlyOf' />, its variants <TagDocs text='year' />, <TagDocs text='month' />, <TagDocs text='day' /> and <TagDocs text='month' /> you can control the format
 
 <Playground>
 
@@ -108,7 +108,7 @@ With the prop <Tag text='onlyOf' />, its variants <Tag text='year' />, <Tag text
 
 ##### <span name="floating-nav">MinDate</span>
 
-With the prop <Tag text='minDate' />, you can define the selectable minimum date
+With the prop <TagDocs text='minDate' />, you can define the selectable minimum date
 
 <Playground>
 
@@ -125,7 +125,7 @@ With the prop <Tag text='minDate' />, you can define the selectable minimum date
 
 ##### <span name="floating-nav">MaxDate</span>
 
-With the prop <Tag text='maxDate' />, you can define the maximum selectable date
+With the prop <TagDocs text='maxDate' />, you can define the maximum selectable date
 
 <Playground>
 

docs/components/dynamic-hero-icon.mdx

@@ -38,7 +38,7 @@ The code snippet below shows how to use the DynamicHeroIcon component:
 
 ##### <span name="floating-nav">Icon</span>
 
-With the prop <Tag text='Icon' />, you can choose the required icon in a fast and simple way
+With the prop <TagDocs text='Icon' />, you can choose the required icon in a fast and simple way
 
 <Playground className="gap-y-2">
        <DynamicHeroIcon icon="BellIcon" width={30} className="text-blue-700" />
@@ -53,7 +53,7 @@ With the prop <Tag text='Icon' />, you can choose the required icon in a fast an
 
 ##### <span name="floating-nav">Width</span>
 
-With the prop <Tag text='width' />, you can choose the size of the chosen icon
+With the prop <TagDocs text='width' />, you can choose the size of the chosen icon
 
 <Playground className="gap-y-2">
        <DynamicHeroIcon icon="BellIcon" width={50} className="text-blue-700" />
@@ -68,7 +68,7 @@ With the prop <Tag text='width' />, you can choose the size of the chosen icon
 
 ##### <span name="floating-nav">ClassName</span>
 
-With the prop <Tag text='className' />, you can choose the color of the chosen icon, among many other things
+With the prop <TagDocs text='className' />, you can choose the color of the chosen icon, among many other things
 
 <Playground className="gap-y-2">
        <DynamicHeroIcon icon="CheckCircleIcon" width={30} className="text-green-400" />
@@ -97,7 +97,7 @@ With the prop <Tag text='className' />, you can choose the color of the chosen i
 
 />
 
-You can import IconName like this <Tag text='import {IconName} from "dd360-ds/DynamicHeroIcon"' />
+You can import IconName like this <TagDocs text='import {IconName} from "dd360-ds/DynamicHeroIcon"' />
 
 
 <AlertReactKnowledge />

docs/components/filter-range-slider.mdx

@@ -137,29 +137,29 @@ we can avoid any issues with the FilterRangeSlider component not being fully ini
 
 ##### <span name="floating-nav">Min & max</span>
 
-<Tag text='min' />
+<TagDocs text='min' />
 Represents the minimum value that can be selected in the 
 range slider. It defaults to 0.
 
-<Tag text='max' />
+<TagDocs text='max' />
 Represents the maximum value that can be selected in the 
 range slider. It defaults to 999999999.
 
-<Tag text='initMinValue' />
+<TagDocs text='initMinValue' />
 Represents the initial minimum value that will be set 
 in the range slider. If it's not provided, then it will default to the min prop.
 
-<Tag text='initMaxValue' />
+<TagDocs text='initMaxValue' />
 Represents the initial maximum value that will be set 
 in the range slider. If it's not provided, then it will default to the max prop.
 
-<Tag text='minValDisabled' />
+<TagDocs text='minValDisabled' />
 Is a boolean value that determines whether the minimum 
 value input field will be disabled or not. If it's set to true, the minimum 
 input field will be disabled and the user will not be able to change its value. 
 It defaults to false.
 
-<Tag text='maxValDisabled' />
+<TagDocs text='maxValDisabled' />
 Is a boolean value that determines whether the maximum 
 value input field will be disabled or not. If it's set to true, the maximum input 
 field will be disabled and the user will not be able to change its value. It 

docs/components/filter-select-multi.mdx

@@ -57,7 +57,7 @@ The code snippet below shows how to use the FilterSelectMulti component:
 
 ##### <span name="floating-nav">Initial Item List</span>
 
-The prop <Tag text='initialItemList' /> it is used to show the available options, there is also the possibility of disabling one of them
+The prop <TagDocs text='initialItemList' /> it is used to show the available options, there is also the possibility of disabling one of them
 <Playground className="gap-y-2">
  <FilterSelectCustom disabled isMulti />
 </Playground>
@@ -165,7 +165,7 @@ Note: The "domLoaded" state variable in the FilterSelectMultiCustom is used to e
 
 ##### <span name="floating-nav">Title</span>
 
-The prop <Tag text='title' /> serves to provide a descriptive title or label
+The prop <TagDocs text='title' /> serves to provide a descriptive title or label
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti title="Title Example" />
@@ -201,7 +201,7 @@ The prop <Tag text='title' /> serves to provide a descriptive title or label
 
 ##### <span name="floating-nav">Text Apply Btn</span>
 
-The prop <Tag text='textApplyBtn' /> it is used to customize the text of the apply button
+The prop <TagDocs text='textApplyBtn' /> it is used to customize the text of the apply button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti textApplyBtn="Apply Example"/>
@@ -235,7 +235,7 @@ The prop <Tag text='textApplyBtn' /> it is used to customize the text of the app
 
 ##### <span name="floating-nav">Text Reset Btn</span>
 
-The prop <Tag text='textResetBtn' /> it is used to customize the text of the reset button
+The prop <TagDocs text='textResetBtn' /> it is used to customize the text of the reset button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti textResetBtn="Reset Example"/>
@@ -269,7 +269,7 @@ The prop <Tag text='textResetBtn' /> it is used to customize the text of the res
 
 ##### <span name="floating-nav">Width</span>
 
-The prop <Tag text='width' /> used to customize the size
+The prop <TagDocs text='width' /> used to customize the size
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti width={250}/>

docs/components/filter-select.mdx

@@ -57,7 +57,7 @@ The code snippet below shows how to use the FilterSelect component:
 
 ##### <span name="floating-nav">List Items</span>
 
-The prop <Tag text='listItems' /> it is used to show the available options, there is also the possibility of disabling one of them
+The prop <TagDocs text='listItems' /> it is used to show the available options, there is also the possibility of disabling one of them
 <Playground className="gap-y-2">
  <FilterSelectCustom disabled />
 </Playground>
@@ -165,7 +165,7 @@ Note: The "domLoaded" state variable in the FilterSelectCustom is used to ensure
 
 ##### <span name="floating-nav">Title</span>
 
-The prop <Tag text='title' /> serves to provide a descriptive title or label
+The prop <TagDocs text='title' /> serves to provide a descriptive title or label
 
 <Playground className="gap-y-2">
  <FilterSelectCustom title="Title Example" />
@@ -199,7 +199,7 @@ The prop <Tag text='title' /> serves to provide a descriptive title or label
 
 ##### <span name="floating-nav">Selected Value</span>
 
-The prop <Tag text='selectedValue' /> is used to provide a default value
+The prop <TagDocs text='selectedValue' /> is used to provide a default value
 
 <Playground className="gap-y-2">
  <FilterSelectCustom selectedValue="A"/>
@@ -233,7 +233,7 @@ The prop <Tag text='selectedValue' /> is used to provide a default value
 
 ##### <span name="floating-nav">Text Apply Btn</span>
 
-The prop <Tag text='textApplyBtn' /> it is used to customize the text of the apply button
+The prop <TagDocs text='textApplyBtn' /> it is used to customize the text of the apply button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom textApplyBtn="Apply Example"/>
@@ -267,7 +267,7 @@ The prop <Tag text='textApplyBtn' /> it is used to customize the text of the app
 
 ##### <span name="floating-nav">Text Reset Btn</span>
 
-The prop <Tag text='textResetBtn' /> it is used to customize the text of the reset button
+The prop <TagDocs text='textResetBtn' /> it is used to customize the text of the reset button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom textResetBtn="Reset Example"/>
@@ -301,7 +301,7 @@ The prop <Tag text='textResetBtn' /> it is used to customize the text of the res
 
 ##### <span name="floating-nav">Width</span>
 
-The prop <Tag text='width' /> used to customize the size
+The prop <TagDocs text='width' /> used to customize the size
 
 <Playground className="gap-y-2">
  <FilterSelectCustom width={250}/>

docs/components/skeleton.mdx

@@ -42,7 +42,7 @@ The code snippet below shows how to use the Skeleton component:
 
 ##### <span name="floating-nav">Animation</span>
 
-With the prop <Tag text='animation' /> you can control the animation of Skeleton
+With the prop <TagDocs text='animation' /> you can control the animation of Skeleton
 
 <Playground>
   <Flex gap="4">
@@ -64,7 +64,7 @@ With the prop <Tag text='animation' /> you can control the animation of Skeleton
 
 ##### <span name="floating-nav">Rounded</span>
 
-With the prop <Tag text='rounded' /> you can customize the rounded edge of the skeleton
+With the prop <TagDocs text='rounded' /> you can customize the rounded edge of the skeleton
 
 <Playground>
   <Flex gap="4">
@@ -98,7 +98,7 @@ With the prop <Tag text='rounded' /> you can customize the rounded edge of the s
 
 ##### <span name="floating-nav">Color</span>
 
-With the prop <Tag text='color' /> you can customize the color of the skeleton
+With the prop <TagDocs text='color' /> you can customize the color of the skeleton
 
 <Playground>
   <Skeleton color="#74a9e6" width={200} height={30} rounded="2xl" />
@@ -112,7 +112,7 @@ With the prop <Tag text='color' /> you can customize the color of the skeleton
 
 ##### <span name="floating-nav">Table Content Skeleton</span>
 
-With the component <Tag text=' TableContentSkeleton' /> you can display a skeleton table content with mock rows and columns to represent data in a
+With the component <TagDocs text=' TableContentSkeleton' /> you can display a skeleton table content with mock rows and columns to represent data in a
 tabular structure.
 
 <Playground>

docs/components/table.mdx

@@ -92,7 +92,7 @@ The code snippet below shows how to use the Table component:
 
 ##### <span name="floating-nav">StickyTop</span>
 
-With the prop <Tag text='stickyTop' /> you can fix the header with a sticky position at the top
+With the prop <TagDocs text='stickyTop' /> you can fix the header with a sticky position at the top
 
 <Playground className="gap-y-2">
    <Table className="h-24 w-96">
@@ -161,7 +161,7 @@ With the prop <Tag text='stickyTop' /> you can fix the header with a sticky posi
 
 ##### <span name="floating-nav">StickyLeft</span>
 
-With the prop <Tag text='stickyLeft' /> you can fix the header with a sticky position at the left
+With the prop <TagDocs text='stickyLeft' /> you can fix the header with a sticky position at the left
 
 <Playground className="gap-y-2">
    <Table className="w-52">
@@ -230,7 +230,7 @@ With the prop <Tag text='stickyLeft' /> you can fix the header with a sticky pos
 
 ##### <span name="floating-nav">ColSpan</span>
 
-With the prop <Tag text='colSpan' /> you can set the number of columns that the cell will occupy
+With the prop <TagDocs text='colSpan' /> you can set the number of columns that the cell will occupy
 
 <Playground className="gap-y-2">
    <Table className="w-52">
@@ -295,7 +295,7 @@ With the prop <Tag text='colSpan' /> you can set the number of columns that the
 
 ##### <span name="floating-nav">RowSpan</span>
 
-With the prop <Tag text='rowSpan' /> you can set the number of rows that the cell will occupy
+With the prop <TagDocs text='rowSpan' /> you can set the number of rows that the cell will occupy
 
 <Playground className="gap-y-2">
    <Table className="w-96">
@@ -351,7 +351,7 @@ With the prop <Tag text='rowSpan' /> you can set the number of rows that the cel
 <br />
 ##### <span name="floating-nav">Accordion</span>
 
-You can use <Tag text='Table.Accordion' /> for dropdown rows
+You can use <TagDocs text='Table.Accordion' /> for dropdown rows
 
 <Playground className="gap-y-2">
     <Table className="w-96">