@zohodesk/components 1.2.34 → 1.2.35

package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap

@@ -448,11 +448,11 @@ exports[`Tag component Should be render with the basic set of default props 1`]
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - danger 1`] = `
+exports[`Tag component Should render active - palette danger, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected activedanger activesmallEffect  small lgRadius danger   "
+    class="container effect selected activedanger activemediumEffect  medium lgRadius danger   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -460,7 +460,7 @@ exports[`Tag component Should render active - danger 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -493,11 +493,11 @@ exports[`Tag component Should render active - danger 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - danger 2`] = `
+exports[`Tag component Should render active - palette danger, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activedanger activesmallEffect  small lgRadius danger   "
+    aria-labelledby="1"
+    class="container effect selected activedanger activemediumEffect  medium lgRadius danger   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -505,8 +505,8 @@ exports[`Tag component Should render active - danger 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -538,11 +538,11 @@ exports[`Tag component Should render active - danger 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - danger 3`] = `
+exports[`Tag component Should render active - palette danger, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected activedanger activemediumEffect  medium lgRadius danger   "
+    aria-labelledby="1"
+    class="container effect selected activedanger activesmallEffect  small lgRadius danger   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -550,8 +550,8 @@ exports[`Tag component Should render active - danger 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -583,11 +583,11 @@ exports[`Tag component Should render active - danger 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - danger 4`] = `
+exports[`Tag component Should render active - palette danger, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected activedanger activemediumEffect  medium lgRadius danger   "
+    aria-labelledby="1"
+    class="container effect selected activedanger activesmallEffect  small lgRadius danger   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -595,8 +595,8 @@ exports[`Tag component Should render active - danger 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -628,11 +628,11 @@ exports[`Tag component Should render active - danger 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - dark 1`] = `
+exports[`Tag component Should render active - palette dark, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected undefined activesmallEffect  small lgRadius dark   "
+    class="container effect selected undefined activemediumEffect  medium lgRadius dark   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -640,7 +640,7 @@ exports[`Tag component Should render active - dark 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -673,11 +673,11 @@ exports[`Tag component Should render active - dark 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - dark 2`] = `
+exports[`Tag component Should render active - palette dark, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected undefined activesmallEffect  small lgRadius dark   "
+    aria-labelledby="1"
+    class="container effect selected undefined activemediumEffect  medium lgRadius dark   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -685,8 +685,8 @@ exports[`Tag component Should render active - dark 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -718,11 +718,11 @@ exports[`Tag component Should render active - dark 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - dark 3`] = `
+exports[`Tag component Should render active - palette dark, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected undefined activemediumEffect  medium lgRadius dark   "
+    aria-labelledby="1"
+    class="container effect selected undefined activesmallEffect  small lgRadius dark   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -730,8 +730,8 @@ exports[`Tag component Should render active - dark 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -763,11 +763,11 @@ exports[`Tag component Should render active - dark 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - dark 4`] = `
+exports[`Tag component Should render active - palette dark, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected undefined activemediumEffect  medium lgRadius dark   "
+    aria-labelledby="1"
+    class="container effect selected undefined activesmallEffect  small lgRadius dark   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -775,8 +775,8 @@ exports[`Tag component Should render active - dark 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -808,11 +808,11 @@ exports[`Tag component Should render active - dark 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - darkPrimaryDotted 1`] = `
+exports[`Tag component Should render active - palette darkPrimaryDotted, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected undefined activesmallEffect  small lgRadius darkPrimaryDotted   "
+    class="container effect selected undefined activemediumEffect  medium lgRadius darkPrimaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -820,7 +820,7 @@ exports[`Tag component Should render active - darkPrimaryDotted 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -853,11 +853,11 @@ exports[`Tag component Should render active - darkPrimaryDotted 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - darkPrimaryDotted 2`] = `
+exports[`Tag component Should render active - palette darkPrimaryDotted, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected undefined activesmallEffect  small lgRadius darkPrimaryDotted   "
+    aria-labelledby="1"
+    class="container effect selected undefined activemediumEffect  medium lgRadius darkPrimaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -865,8 +865,8 @@ exports[`Tag component Should render active - darkPrimaryDotted 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -898,11 +898,11 @@ exports[`Tag component Should render active - darkPrimaryDotted 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - darkPrimaryDotted 3`] = `
+exports[`Tag component Should render active - palette darkPrimaryDotted, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected undefined activemediumEffect  medium lgRadius darkPrimaryDotted   "
+    aria-labelledby="1"
+    class="container effect selected undefined activesmallEffect  small lgRadius darkPrimaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -910,8 +910,8 @@ exports[`Tag component Should render active - darkPrimaryDotted 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -943,11 +943,11 @@ exports[`Tag component Should render active - darkPrimaryDotted 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - darkPrimaryDotted 4`] = `
+exports[`Tag component Should render active - palette darkPrimaryDotted, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected undefined activemediumEffect  medium lgRadius darkPrimaryDotted   "
+    aria-labelledby="1"
+    class="container effect selected undefined activesmallEffect  small lgRadius darkPrimaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -955,8 +955,8 @@ exports[`Tag component Should render active - darkPrimaryDotted 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -988,11 +988,11 @@ exports[`Tag component Should render active - darkPrimaryDotted 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - default 1`] = `
+exports[`Tag component Should render active - palette default, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected activedefault activesmallEffect  small lgRadius default   "
+    class="container effect selected activedefault activemediumEffect  medium lgRadius default   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1000,7 +1000,7 @@ exports[`Tag component Should render active - default 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -1033,11 +1033,11 @@ exports[`Tag component Should render active - default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - default 2`] = `
+exports[`Tag component Should render active - palette default, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activedefault activesmallEffect  small lgRadius default   "
+    aria-labelledby="1"
+    class="container effect selected activedefault activemediumEffect  medium lgRadius default   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1045,8 +1045,8 @@ exports[`Tag component Should render active - default 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1078,11 +1078,11 @@ exports[`Tag component Should render active - default 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - default 3`] = `
+exports[`Tag component Should render active - palette default, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected activedefault activemediumEffect  medium lgRadius default   "
+    aria-labelledby="1"
+    class="container effect selected activedefault activesmallEffect  small lgRadius default   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1090,8 +1090,8 @@ exports[`Tag component Should render active - default 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1123,11 +1123,11 @@ exports[`Tag component Should render active - default 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - default 4`] = `
+exports[`Tag component Should render active - palette default, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected activedefault activemediumEffect  medium lgRadius default   "
+    aria-labelledby="1"
+    class="container effect selected activedefault activesmallEffect  small lgRadius default   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1135,8 +1135,8 @@ exports[`Tag component Should render active - default 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1168,11 +1168,11 @@ exports[`Tag component Should render active - default 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - defaultLink 1`] = `
+exports[`Tag component Should render active - palette defaultLink, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected activedefaultLink activesmallEffect  small lgRadius defaultLink   "
+    class="container effect selected activedefaultLink activemediumEffect  medium lgRadius defaultLink   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1180,7 +1180,7 @@ exports[`Tag component Should render active - defaultLink 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -1213,11 +1213,11 @@ exports[`Tag component Should render active - defaultLink 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - defaultLink 2`] = `
+exports[`Tag component Should render active - palette defaultLink, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activedefaultLink activesmallEffect  small lgRadius defaultLink   "
+    aria-labelledby="1"
+    class="container effect selected activedefaultLink activemediumEffect  medium lgRadius defaultLink   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1225,8 +1225,8 @@ exports[`Tag component Should render active - defaultLink 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1258,11 +1258,11 @@ exports[`Tag component Should render active - defaultLink 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - defaultLink 3`] = `
+exports[`Tag component Should render active - palette defaultLink, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected activedefaultLink activemediumEffect  medium lgRadius defaultLink   "
+    aria-labelledby="1"
+    class="container effect selected activedefaultLink activesmallEffect  small lgRadius defaultLink   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1270,8 +1270,8 @@ exports[`Tag component Should render active - defaultLink 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1303,11 +1303,11 @@ exports[`Tag component Should render active - defaultLink 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - defaultLink 4`] = `
+exports[`Tag component Should render active - palette defaultLink, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected activedefaultLink activemediumEffect  medium lgRadius defaultLink   "
+    aria-labelledby="1"
+    class="container effect selected activedefaultLink activesmallEffect  small lgRadius defaultLink   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1315,8 +1315,8 @@ exports[`Tag component Should render active - defaultLink 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1348,11 +1348,11 @@ exports[`Tag component Should render active - defaultLink 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - primaryDotted 1`] = `
+exports[`Tag component Should render active - palette primaryDotted, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected activeprimaryDotted activesmallEffect  small lgRadius primaryDotted   "
+    class="container effect selected activeprimaryDotted activemediumEffect  medium lgRadius primaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1360,7 +1360,7 @@ exports[`Tag component Should render active - primaryDotted 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -1393,11 +1393,11 @@ exports[`Tag component Should render active - primaryDotted 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - primaryDotted 2`] = `
+exports[`Tag component Should render active - palette primaryDotted, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activeprimaryDotted activesmallEffect  small lgRadius primaryDotted   "
+    aria-labelledby="1"
+    class="container effect selected activeprimaryDotted activemediumEffect  medium lgRadius primaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1405,8 +1405,8 @@ exports[`Tag component Should render active - primaryDotted 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1438,11 +1438,11 @@ exports[`Tag component Should render active - primaryDotted 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - primaryDotted 3`] = `
+exports[`Tag component Should render active - palette primaryDotted, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected activeprimaryDotted activemediumEffect  medium lgRadius primaryDotted   "
+    aria-labelledby="1"
+    class="container effect selected activeprimaryDotted activesmallEffect  small lgRadius primaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1450,8 +1450,8 @@ exports[`Tag component Should render active - primaryDotted 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1483,11 +1483,11 @@ exports[`Tag component Should render active - primaryDotted 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - primaryDotted 4`] = `
+exports[`Tag component Should render active - palette primaryDotted, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected activeprimaryDotted activemediumEffect  medium lgRadius primaryDotted   "
+    aria-labelledby="1"
+    class="container effect selected activeprimaryDotted activesmallEffect  small lgRadius primaryDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1495,8 +1495,8 @@ exports[`Tag component Should render active - primaryDotted 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1528,11 +1528,11 @@ exports[`Tag component Should render active - primaryDotted 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDarkDotted 1`] = `
+exports[`Tag component Should render active - palette pureDarkDotted, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected undefined activesmallEffect  small lgRadius pureDarkDotted   "
+    class="container effect selected undefined activemediumEffect  medium lgRadius pureDarkDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1540,7 +1540,7 @@ exports[`Tag component Should render active - pureDarkDotted 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -1573,11 +1573,11 @@ exports[`Tag component Should render active - pureDarkDotted 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDarkDotted 2`] = `
+exports[`Tag component Should render active - palette pureDarkDotted, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected undefined activesmallEffect  small lgRadius pureDarkDotted   "
+    aria-labelledby="1"
+    class="container effect selected undefined activemediumEffect  medium lgRadius pureDarkDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1585,8 +1585,8 @@ exports[`Tag component Should render active - pureDarkDotted 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1618,11 +1618,11 @@ exports[`Tag component Should render active - pureDarkDotted 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDarkDotted 3`] = `
+exports[`Tag component Should render active - palette pureDarkDotted, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected undefined activemediumEffect  medium lgRadius pureDarkDotted   "
+    aria-labelledby="1"
+    class="container effect selected undefined activesmallEffect  small lgRadius pureDarkDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1630,8 +1630,8 @@ exports[`Tag component Should render active - pureDarkDotted 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1663,11 +1663,11 @@ exports[`Tag component Should render active - pureDarkDotted 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDarkDotted 4`] = `
+exports[`Tag component Should render active - palette pureDarkDotted, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected undefined activemediumEffect  medium lgRadius pureDarkDotted   "
+    aria-labelledby="1"
+    class="container effect selected undefined activesmallEffect  small lgRadius pureDarkDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1675,8 +1675,8 @@ exports[`Tag component Should render active - pureDarkDotted 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1708,11 +1708,11 @@ exports[`Tag component Should render active - pureDarkDotted 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDotted 1`] = `
+exports[`Tag component Should render active - palette pureDotted, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected activepureDotted activesmallEffect  small lgRadius pureDotted   "
+    class="container effect selected activepureDotted activemediumEffect  medium lgRadius pureDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1720,7 +1720,7 @@ exports[`Tag component Should render active - pureDotted 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -1753,11 +1753,11 @@ exports[`Tag component Should render active - pureDotted 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDotted 2`] = `
+exports[`Tag component Should render active - palette pureDotted, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activepureDotted activesmallEffect  small lgRadius pureDotted   "
+    aria-labelledby="1"
+    class="container effect selected activepureDotted activemediumEffect  medium lgRadius pureDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1765,8 +1765,8 @@ exports[`Tag component Should render active - pureDotted 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1798,11 +1798,11 @@ exports[`Tag component Should render active - pureDotted 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDotted 3`] = `
+exports[`Tag component Should render active - palette pureDotted, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected activepureDotted activemediumEffect  medium lgRadius pureDotted   "
+    aria-labelledby="1"
+    class="container effect selected activepureDotted activesmallEffect  small lgRadius pureDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1810,8 +1810,8 @@ exports[`Tag component Should render active - pureDotted 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1843,11 +1843,11 @@ exports[`Tag component Should render active - pureDotted 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - pureDotted 4`] = `
+exports[`Tag component Should render active - palette pureDotted, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected activepureDotted activemediumEffect  medium lgRadius pureDotted   "
+    aria-labelledby="1"
+    class="container effect selected activepureDotted activesmallEffect  small lgRadius pureDotted   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1855,8 +1855,8 @@ exports[`Tag component Should render active - pureDotted 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1888,11 +1888,11 @@ exports[`Tag component Should render active - pureDotted 4`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - secondary 1`] = `
+exports[`Tag component Should render active - palette secondary, size medium , closePalette danger 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect selected activesecondary activesmallEffect  small lgRadius secondary   "
+    class="container effect selected activesecondary activemediumEffect  medium lgRadius secondary   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1900,7 +1900,7 @@ exports[`Tag component Should render active - secondary 1`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
+      class="text mediumtext"
       id="1"
     />
     <button
@@ -1933,11 +1933,11 @@ exports[`Tag component Should render active - secondary 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - secondary 2`] = `
+exports[`Tag component Should render active - palette secondary, size medium , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="2"
-    class="container effect selected activesecondary activesmallEffect  small lgRadius secondary   "
+    aria-labelledby="1"
+    class="container effect selected activesecondary activemediumEffect  medium lgRadius secondary   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1945,8 +1945,8 @@ exports[`Tag component Should render active - secondary 2`] = `
   >
     <div
       aria-hidden="true"
-      class="text smalltext"
-      id="2"
+      class="text mediumtext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -1978,11 +1978,11 @@ exports[`Tag component Should render active - secondary 2`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - secondary 3`] = `
+exports[`Tag component Should render active - palette secondary, size small , closePalette danger 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="3"
-    class="container effect selected activesecondary activemediumEffect  medium lgRadius secondary   "
+    aria-labelledby="1"
+    class="container effect selected activesecondary activesmallEffect  small lgRadius secondary   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -1990,8 +1990,8 @@ exports[`Tag component Should render active - secondary 3`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="3"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"
@@ -2023,11 +2023,11 @@ exports[`Tag component Should render active - secondary 3`] = `
 </DocumentFragment>
 `;
 
-exports[`Tag component Should render active - secondary 4`] = `
+exports[`Tag component Should render active - palette secondary, size small , closePalette primary 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="4"
-    class="container effect selected activesecondary activemediumEffect  medium lgRadius secondary   "
+    aria-labelledby="1"
+    class="container effect selected activesecondary activesmallEffect  small lgRadius secondary   "
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -2035,8 +2035,8 @@ exports[`Tag component Should render active - secondary 4`] = `
   >
     <div
       aria-hidden="true"
-      class="text mediumtext"
-      id="4"
+      class="text smalltext"
+      id="1"
     />
     <button
       aria-label="Delete"