@openedx/paragon 22.0.0-alpha.21 → 22.0.0-alpha.23

package/icons/jsx/LocalSee.jsx

@@ -8,7 +8,7 @@ const SvgLocalSee = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={12} cy={12} r={3.2} />
+    <circle cx={12} cy={12} r={3.2} fill="currentColor" />
     <path
       d="M22 4h-5.17L15 2H9L7.17 4H2v16h20V4zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
       fill="currentColor"

package/icons/jsx/Man.jsx

@@ -9,7 +9,7 @@ const SvgMan = (props) => (
     {...props}
   >
     <path d="M16 7H8v8h2v7h4v-7h2z" fill="currentColor" />
-    <circle cx={12} cy={4} r={2} />
+    <circle cx={12} cy={4} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgMan;

package/icons/jsx/Man2.jsx

@@ -9,7 +9,7 @@ const SvgMan2 = (props) => (
     {...props}
   >
     <path d="M16 7H8v8h2.5v7h3v-7H16z" fill="currentColor" />
-    <circle cx={12} cy={4} r={2} />
+    <circle cx={12} cy={4} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgMan2;

package/icons/jsx/Man4.jsx

@@ -9,7 +9,7 @@ const SvgMan4 = (props) => (
     {...props}
   >
     <path d="M7.96 7 10 22h4l2.04-15z" fill="currentColor" />
-    <circle cx={12} cy={4} r={2} />
+    <circle cx={12} cy={4} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgMan4;

package/icons/jsx/ManageAccounts.jsx

@@ -12,7 +12,7 @@ const SvgManageAccounts = (props) => (
       d="M10.67 13.02c-.22-.01-.44-.02-.67-.02-2.42 0-4.68.67-6.61 1.82-.88.52-1.39 1.5-1.39 2.53V20h9.26a6.963 6.963 0 0 1-.59-6.98z"
       fill="currentColor"
     />
-    <circle cx={10} cy={8} r={4} />
+    <circle cx={10} cy={8} r={4} fill="currentColor" />
     <path
       d="M20.75 16c0-.22-.03-.42-.06-.63l1.14-1.01-1-1.73-1.45.49c-.32-.27-.68-.48-1.08-.63L18 11h-2l-.3 1.49c-.4.15-.76.36-1.08.63l-1.45-.49-1 1.73 1.14 1.01c-.03.21-.06.41-.06.63s.03.42.06.63l-1.14 1.01 1 1.73 1.45-.49c.32.27.68.48 1.08.63L16 21h2l.3-1.49c.4-.15.76-.36 1.08-.63l1.45.49 1-1.73-1.14-1.01c.03-.21.06-.41.06-.63zM17 18c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
       fill="currentColor"

package/icons/jsx/MarkUnreadChatAlt.jsx

@@ -8,7 +8,7 @@ const SvgMarkUnreadChatAlt = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={19} cy={3} r={3} />
+    <circle cx={19} cy={3} r={3} fill="currentColor" />
     <path
       d="M6 8V6h9.03a4.906 4.906 0 0 1-.92-4H2.01L2 22l4-4h16V6.97C21.16 7.61 20.13 8 19 8H6zm8 6H6v-2h8v2zm4-3H6V9h12v2z"
       fill="currentColor"

package/icons/jsx/NoiseAware.jsx

@@ -12,7 +12,7 @@ const SvgNoiseAware = (props) => (
       d="M4.07 13H2.05c.2 2.01 1 3.84 2.21 5.33l1.43-1.43A7.941 7.941 0 0 1 4.07 13zm1.62-5.9L4.26 5.67A10.013 10.013 0 0 0 2.05 11h2.02c.18-1.46.76-2.79 1.62-3.9zM11 4.07V2.05c-2.01.2-3.84 1-5.33 2.21L7.1 5.69A7.941 7.941 0 0 1 11 4.07zm7.33.19A10.013 10.013 0 0 0 13 2.05v2.02c1.46.18 2.79.76 3.9 1.62l1.43-1.43zm-.02 12.64 1.43 1.43A9.98 9.98 0 0 0 21.95 13h-2.02a7.941 7.941 0 0 1-1.62 3.9zm1.62-5.9h2.02c-.2-2.01-1-3.84-2.21-5.33L18.31 7.1a7.941 7.941 0 0 1 1.62 3.9zM13 19.93v2.02c2.01-.2 3.84-1 5.33-2.21l-1.43-1.43a7.941 7.941 0 0 1-3.9 1.62zm-7.33-.19A9.98 9.98 0 0 0 11 21.95v-2.02a7.941 7.941 0 0 1-3.9-1.62l-1.43 1.43z"
       fill="currentColor"
     />
-    <circle cx={12} cy={12} r={5} />
+    <circle cx={12} cy={12} r={5} fill="currentColor" />
   </svg>
 );
 export default SvgNoiseAware;

package/icons/jsx/NoiseControlOff.jsx

@@ -8,7 +8,7 @@ const SvgNoiseControlOff = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={12} cy={12} r={5} />
+    <circle cx={12} cy={12} r={5} fill="currentColor" />
   </svg>
 );
 export default SvgNoiseControlOff;

package/icons/jsx/PeopleAlt.jsx

@@ -13,7 +13,7 @@ const SvgPeopleAlt = (props) => (
       fillRule="evenodd"
       fill="currentColor"
     />
-    <circle cx={9} cy={8} fillRule="evenodd" r={4} />
+    <circle cx={9} cy={8} fillRule="evenodd" r={4} fill="currentColor" />
     <path
       d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zm-6 1c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
       fillRule="evenodd"

package/icons/jsx/PersonSearch.jsx

@@ -8,7 +8,7 @@ const SvgPersonSearch = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={10} cy={8} r={4} />
+    <circle cx={10} cy={8} r={4} fill="currentColor" />
     <path
       d="M10.35 14.01C7.62 13.91 2 15.27 2 18v2h9.54c-2.47-2.76-1.23-5.89-1.19-5.99zm9.08 4.01c.36-.59.57-1.28.57-2.02 0-2.21-1.79-4-4-4s-4 1.79-4 4 1.79 4 4 4c.74 0 1.43-.22 2.02-.57L20.59 22 22 20.59l-2.57-2.57zM16 18c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
       fill="currentColor"

package/icons/jsx/Pets.jsx

@@ -8,10 +8,10 @@ const SvgPets = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={4.5} cy={9.5} r={2.5} />
-    <circle cx={9} cy={5.5} r={2.5} />
-    <circle cx={15} cy={5.5} r={2.5} />
-    <circle cx={19.5} cy={9.5} r={2.5} />
+    <circle cx={4.5} cy={9.5} r={2.5} fill="currentColor" />
+    <circle cx={9} cy={5.5} r={2.5} fill="currentColor" />
+    <circle cx={15} cy={5.5} r={2.5} fill="currentColor" />
+    <circle cx={19.5} cy={9.5} r={2.5} fill="currentColor" />
     <path
       d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"
       fill="currentColor"

package/icons/jsx/Plagiarism.jsx

@@ -8,7 +8,7 @@ const SvgPlagiarism = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={11.5} cy={14.5} r={1.5} />
+    <circle cx={11.5} cy={14.5} r={1.5} fill="currentColor" />
     <path
       d="M14 2H4v20h16V8l-6-6zm1.04 17.45-1.88-1.88c-1.33.71-3.01.53-4.13-.59a3.495 3.495 0 0 1 0-4.95 3.495 3.495 0 0 1 4.95 0 3.48 3.48 0 0 1 .59 4.13l1.88 1.88-1.41 1.41zM13 9V3.5L18.5 9H13z"
       fill="currentColor"

package/icons/jsx/Policy.jsx

@@ -12,7 +12,7 @@ const SvgPolicy = (props) => (
       d="m21 5-9-4-9 4v6c0 5.55 3.84 10.74 9 12 2.3-.56 4.33-1.9 5.88-3.71l-3.12-3.12a4.994 4.994 0 0 1-6.29-.64 5.003 5.003 0 0 1 0-7.07 5.003 5.003 0 0 1 7.07 0 5.006 5.006 0 0 1 .64 6.29l2.9 2.9C20.29 15.69 21 13.38 21 11V5z"
       fill="currentColor"
     />
-    <circle cx={12} cy={12} r={3} />
+    <circle cx={12} cy={12} r={3} fill="currentColor" />
   </svg>
 );
 export default SvgPolicy;

package/icons/jsx/Pool.jsx

@@ -12,7 +12,7 @@ const SvgPool = (props) => (
       d="m10 8-3.25 3.25c.31.12.56.27.77.39.37.23.59.36 1.15.36s.78-.13 1.15-.36c.46-.27 1.08-.64 2.19-.64s1.73.37 2.18.64c.37.22.6.36 1.15.36.55 0 .78-.13 1.15-.36.12-.07.26-.15.41-.23L10.48 5 5 3v2.5L9 7l1 1zm12 8.5h-.02.02zm-16.65-1c.55 0 .78.14 1.15.36.45.27 1.07.64 2.18.64s1.73-.37 2.18-.64c.37-.23.59-.36 1.15-.36.55 0 .78.14 1.15.36.45.27 1.07.64 2.18.64s1.73-.37 2.18-.64c.37-.23.59-.36 1.15-.36.55 0 .78.14 1.15.36.45.27 1.06.63 2.16.64v-2c-.55 0-.78-.14-1.15-.36-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.18.64c-.37.23-.6.36-1.15.36s-.78-.14-1.15-.36c-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.18.64c-.37.23-.59.36-1.15.36-.55 0-.78-.14-1.15-.36-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.18.64c-.37.23-.59.36-1.15.36v2c1.11 0 1.73-.37 2.2-.64.37-.23.6-.36 1.15-.36zM18.67 18c-1.11 0-1.73.37-2.18.64-.37.23-.6.36-1.15.36-.55 0-.78-.14-1.15-.36-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.19.64c-.37.23-.59.36-1.15.36s-.78-.13-1.15-.36c-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.19.64c-.37.23-.59.36-1.15.36v2c1.11 0 1.73-.37 2.19-.64.37-.23.6-.36 1.15-.36.55 0 .78.13 1.15.36.45.27 1.07.64 2.18.64s1.73-.37 2.19-.64c.37-.23.59-.36 1.15-.36.55 0 .78.14 1.15.36.45.27 1.07.64 2.18.64s1.72-.37 2.18-.64c.37-.23.59-.36 1.15-.36.55 0 .78.14 1.15.36.45.27 1.07.64 2.18.64v-2c-.56 0-.78-.13-1.15-.36-.45-.27-1.07-.64-2.18-.64z"
       fill="currentColor"
     />
-    <circle cx={16.5} cy={5.5} r={2.5} />
+    <circle cx={16.5} cy={5.5} r={2.5} fill="currentColor" />
   </svg>
 );
 export default SvgPool;

package/icons/jsx/PriorityHigh.jsx

@@ -8,7 +8,7 @@ const SvgPriorityHigh = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={12} cy={19} r={2} />
+    <circle cx={12} cy={19} r={2} fill="currentColor" />
     <path d="M10 3h4v12h-4z" fill="currentColor" />
   </svg>
 );

package/icons/jsx/RecordVoiceOver.jsx

@@ -8,7 +8,7 @@ const SvgRecordVoiceOver = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={9} cy={9} r={4} />
+    <circle cx={9} cy={9} r={4} fill="currentColor" />
     <path
       d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm6.08-7.95c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27l-1.68 1.69zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"
       fill="currentColor"

package/icons/jsx/RememberMe.jsx

@@ -12,7 +12,7 @@ const SvgRememberMe = (props) => (
       d="M19 1H5v22h14V1zm-2 14.21c-1.5-.77-3.2-1.21-5-1.21s-3.5.44-5 1.21V6h10v9.21z"
       fill="currentColor"
     />
-    <circle cx={12} cy={10} r={3} />
+    <circle cx={12} cy={10} r={3} fill="currentColor" />
   </svg>
 );
 export default SvgRememberMe;

package/icons/jsx/ReportGmailerrorred.jsx

@@ -12,7 +12,7 @@ const SvgReportGmailerrorred = (props) => (
       d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9 14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8z"
       fill="currentColor"
     />
-    <circle cx={12} cy={16} r={1} />
+    <circle cx={12} cy={16} r={1} fill="currentColor" />
     <path d="M11 7h2v7h-2z" fill="currentColor" />
   </svg>
 );

package/icons/jsx/RssFeed.jsx

@@ -8,7 +8,7 @@ const SvgRssFeed = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={6.18} cy={17.82} r={2.18} />
+    <circle cx={6.18} cy={17.82} r={2.18} fill="currentColor" />
     <path
       d="M4 10.1v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9zm0-5.66v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56z"
       fill="currentColor"

package/icons/jsx/ScatterPlot.jsx

@@ -8,9 +8,9 @@ const SvgScatterPlot = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={7} cy={14} r={3} />
-    <circle cx={11} cy={6} r={3} />
-    <circle cx={16.6} cy={17.6} r={3} />
+    <circle cx={7} cy={14} r={3} fill="currentColor" />
+    <circle cx={11} cy={6} r={3} fill="currentColor" />
+    <circle cx={16.6} cy={17.6} r={3} fill="currentColor" />
   </svg>
 );
 export default SvgScatterPlot;

package/icons/jsx/ScreenSearchDesktop.jsx

@@ -12,7 +12,7 @@ const SvgScreenSearchDesktop = (props) => (
       d="M1 19h22v2H1zM22 3H2v15h19.99L22 3zm-6.53 12.03-2.09-2.09c-1.35.87-3.17.71-4.36-.47-1.37-1.37-1.37-3.58 0-4.95s3.58-1.37 4.95 0c1.18 1.18 1.34 3 .47 4.36l2.09 2.09-1.06 1.06z"
       fill="currentColor"
     />
-    <circle cx={11.5} cy={10} r={2} />
+    <circle cx={11.5} cy={10} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgScreenSearchDesktop;

package/icons/jsx/SelfImprovement.jsx

@@ -8,7 +8,7 @@ const SvgSelfImprovement = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={12} cy={6} r={2} />
+    <circle cx={12} cy={6} r={2} fill="currentColor" />
     <path
       d="M21 16v-2c-2.24 0-4.16-.96-5.6-2.68l-1.34-1.6A1.98 1.98 0 0 0 12.53 9h-1.05c-.59 0-1.15.26-1.53.72l-1.34 1.6C7.16 13.04 5.24 14 3 14v2c2.77 0 5.19-1.17 7-3.25V15l-3.88 1.55c-.67.27-1.12.93-1.12 1.66C5 19.2 5.8 20 6.79 20H9v-.5a2.5 2.5 0 0 1 2.5-2.5h3c.28 0 .5.22.5.5s-.22.5-.5.5h-3c-.83 0-1.5.67-1.5 1.5v.5h7.21c.99 0 1.79-.8 1.79-1.79 0-.73-.45-1.39-1.12-1.66L14 15v-2.25c1.81 2.08 4.23 3.25 7 3.25z"
       fill="currentColor"

package/icons/jsx/SentimentDissatisfied.jsx

@@ -8,8 +8,8 @@ const SvgSentimentDissatisfied = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={15.5} cy={9.5} r={1.5} />
-    <circle cx={8.5} cy={9.5} r={1.5} />
+    <circle cx={15.5} cy={9.5} r={1.5} fill="currentColor" />
+    <circle cx={8.5} cy={9.5} r={1.5} fill="currentColor" />
     <path
       d="M12 14c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5zm-.01-12C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
       fill="currentColor"

package/icons/jsx/SentimentSatisfied.jsx

@@ -8,8 +8,8 @@ const SvgSentimentSatisfied = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={15.5} cy={9.5} r={1.5} />
-    <circle cx={8.5} cy={9.5} r={1.5} />
+    <circle cx={15.5} cy={9.5} r={1.5} fill="currentColor" />
+    <circle cx={8.5} cy={9.5} r={1.5} fill="currentColor" />
     <path
       d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-4c-1.48 0-2.75-.81-3.45-2H6.88a5.495 5.495 0 0 0 10.24 0h-1.67c-.7 1.19-1.97 2-3.45 2z"
       fill="currentColor"

package/icons/jsx/SentimentSatisfiedAlt.jsx

@@ -8,8 +8,8 @@ const SvgSentimentSatisfiedAlt = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={15.5} cy={9.5} r={1.5} />
-    <circle cx={8.5} cy={9.5} r={1.5} />
+    <circle cx={15.5} cy={9.5} r={1.5} fill="currentColor" />
+    <circle cx={8.5} cy={9.5} r={1.5} fill="currentColor" />
     <path
       d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-4c-1.48 0-2.75-.81-3.45-2H6.88a5.495 5.495 0 0 0 10.24 0h-1.67c-.69 1.19-1.97 2-3.45 2z"
       fill="currentColor"

package/icons/jsx/SentimentSlightlyDissatisfied.jsx

@@ -8,8 +8,8 @@ const SvgSentimentSlightlyDissatisfied = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={15.5} cy={9.5} r={1.5} />
-    <circle cx={8.5} cy={9.5} r={1.5} />
+    <circle cx={15.5} cy={9.5} r={1.5} fill="currentColor" />
+    <circle cx={8.5} cy={9.5} r={1.5} fill="currentColor" />
     <path
       d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-3.5c.73 0 1.39.19 1.97.53.12-.14.86-.98 1.01-1.14A5.39 5.39 0 0 0 12 15c-1.11 0-2.13.33-2.99.88.97 1.09.01.02 1.01 1.14.59-.33 1.25-.52 1.98-.52z"
       fill="currentColor"

package/icons/jsx/SettingsApplications.jsx

@@ -12,7 +12,7 @@ const SvgSettingsApplications = (props) => (
       d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-1.75 9c0 .24-.02.47-.05.71l.01-.02 1.47 1.16c.14.1.23.18.23.18l-1.7 2.94-2.02-.8.02-.03c-.37.29-.77.53-1.21.71h.01l-.27 1.85c-.02.17-.04.3-.04.3h-3.4l-.31-2.15H10a5.06 5.06 0 0 1-1.21-.71l.02.03-2.02.8-1.7-2.94s.1-.08.23-.18l1.47-1.16.01.02c-.03-.24-.05-.47-.05-.71s.02-.47.05-.69l-.01.01-1.7-1.34 1.7-2.95 2.01.81v.01c.37-.28.77-.52 1.2-.7h-.01L10.3 5h3.41l.3 2.15H14c.43.18.83.42 1.2.7v-.01l2.01-.81 1.7 2.95-1.71 1.34-.01-.01c.04.22.06.45.06.69z"
       fill="currentColor"
     />
-    <circle cx={12} cy={12} r={2.45} />
+    <circle cx={12} cy={12} r={2.45} fill="currentColor" />
   </svg>
 );
 export default SvgSettingsApplications;

package/icons/jsx/Shower.jsx

@@ -8,16 +8,16 @@ const SvgShower = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={8} cy={17} r={1} />
-    <circle cx={12} cy={17} r={1} />
-    <circle cx={16} cy={17} r={1} />
+    <circle cx={8} cy={17} r={1} fill="currentColor" />
+    <circle cx={12} cy={17} r={1} fill="currentColor" />
+    <circle cx={16} cy={17} r={1} fill="currentColor" />
     <path
       d="M13 5.08V3h-2v2.08C7.61 5.57 5 8.47 5 12v2h14v-2c0-3.53-2.61-6.43-6-6.92z"
       fill="currentColor"
     />
-    <circle cx={8} cy={20} r={1} />
-    <circle cx={12} cy={20} r={1} />
-    <circle cx={16} cy={20} r={1} />
+    <circle cx={8} cy={20} r={1} fill="currentColor" />
+    <circle cx={12} cy={20} r={1} fill="currentColor" />
+    <circle cx={16} cy={20} r={1} fill="currentColor" />
   </svg>
 );
 export default SvgShower;

package/icons/jsx/SpatialAudio.jsx

@@ -8,7 +8,7 @@ const SvgSpatialAudio = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={10} cy={9} r={4} />
+    <circle cx={10} cy={9} r={4} fill="currentColor" />
     <path
       d="M16.39 15.56C14.71 14.7 12.53 14 10 14s-4.71.7-6.39 1.56A2.97 2.97 0 0 0 2 18.22V21h16v-2.78c0-1.12-.61-2.15-1.61-2.66zM16 1h-2a9 9 0 0 0 9 9V8c-3.86 0-7-3.14-7-7z"
       fill="currentColor"

package/icons/jsx/SpatialAudioOff.jsx

@@ -8,7 +8,7 @@ const SvgSpatialAudioOff = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={10} cy={9} r={4} />
+    <circle cx={10} cy={9} r={4} fill="currentColor" />
     <path
       d="M16.39 15.56C14.71 14.7 12.53 14 10 14s-4.71.7-6.39 1.56A2.97 2.97 0 0 0 2 18.22V21h16v-2.78c0-1.12-.61-2.15-1.61-2.66zM20.36 1l-1.41 1.41a7.007 7.007 0 0 1 0 9.9l1.41 1.41a8.98 8.98 0 0 0 0-12.72z"
       fill="currentColor"

package/icons/jsx/SpatialTracking.jsx

@@ -8,7 +8,7 @@ const SvgSpatialTracking = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={10} cy={9} r={4} />
+    <circle cx={10} cy={9} r={4} fill="currentColor" />
     <path
       d="M16.39 15.56C14.71 14.7 12.53 14 10 14s-4.71.7-6.39 1.56A2.97 2.97 0 0 0 2 18.22V21h16v-2.78c0-1.12-.61-2.15-1.61-2.66zm3.66-13.15L18.64 1c-3.51 3.51-3.51 9.21 0 12.73l1.41-1.41c-2.73-2.74-2.73-7.18 0-9.91z"
       fill="currentColor"

package/icons/jsx/SpeakerGroup.jsx

@@ -12,7 +12,7 @@ const SvgSpeakerGroup = (props) => (
       d="M20 1H8v17.99h12V1zm-6 2c1.1 0 2 .89 2 2s-.9 2-2 2-2-.89-2-2 .9-2 2-2zm0 13.5c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
       fill="currentColor"
     />
-    <circle cx={14} cy={12.5} r={2.5} />
+    <circle cx={14} cy={12.5} r={2.5} fill="currentColor" />
     <path d="M6 5H4v18h12v-2H6z" fill="currentColor" />
   </svg>
 );

package/icons/jsx/Sports.jsx

@@ -12,7 +12,7 @@ const SvgSports = (props) => (
       d="M11.23 6c-1.66 0-3.22.66-4.36 1.73C6.54 6.73 5.61 6 4.5 6a2.5 2.5 0 0 0 0 5c.21 0 .41-.03.61-.08-.05.25-.09.51-.1.78a6.006 6.006 0 0 0 6.68 6.27c2.55-.28 4.68-2.26 5.19-4.77.15-.71.15-1.4.06-2.06-.09-.6.38-1.13.99-1.13H22V6H11.23zM4.5 9c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zm6.5 6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
       fill="currentColor"
     />
-    <circle cx={11} cy={12} r={2} />
+    <circle cx={11} cy={12} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgSports;

package/icons/jsx/SportsCricket.jsx

@@ -12,7 +12,7 @@ const SvgSportsCricket = (props) => (
       d="M15.05 12.81 6.56 4.32a.996.996 0 0 0-1.41 0L2.32 7.15a.996.996 0 0 0 0 1.41l8.49 8.49c.39.39 1.02.39 1.41 0l2.83-2.83a.996.996 0 0 0 0-1.41zm-.709 4.946 1.414-1.414 4.243 4.243-1.414 1.414z"
       fill="currentColor"
     />
-    <circle cx={18.5} cy={5.5} r={3.5} />
+    <circle cx={18.5} cy={5.5} r={3.5} fill="currentColor" />
   </svg>
 );
 export default SvgSportsCricket;

package/icons/jsx/SportsGolf.jsx

@@ -12,9 +12,9 @@ const SvgSportsGolf = (props) => (
       d="M12 16c3.87 0 7-3.13 7-7s-3.13-7-7-7-7 3.13-7 7 3.13 7 7 7zm0-12c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5z"
       fill="currentColor"
     />
-    <circle cx={10} cy={8} r={1} />
-    <circle cx={14} cy={8} r={1} />
-    <circle cx={12} cy={6} r={1} />
+    <circle cx={10} cy={8} r={1} fill="currentColor" />
+    <circle cx={14} cy={8} r={1} fill="currentColor" />
+    <circle cx={12} cy={6} r={1} fill="currentColor" />
     <path
       d="M7 19h2c1.1 0 2 .9 2 2v1h2v-1c0-1.1.9-2 2-2h2v-2H7v2z"
       fill="currentColor"

package/icons/jsx/SportsKabaddi.jsx

@@ -8,7 +8,7 @@ const SvgSportsKabaddi = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={16.5} cy={2.38} r={2} />
+    <circle cx={16.5} cy={2.38} r={2} fill="currentColor" />
     <path
       d="M24 11.88v-4.7l-5.05-2.14c-.97-.41-2.09-.06-2.65.84l-1 1.6c-.67 1.18-1.91 2.06-3.41 2.32l.06.06c.69.69 1.52 1.07 2.46 1.17.8-.42 1.52-.98 2.09-1.64l.6 3-1.16 1.1-.94.89v7.5h2v-6l2.1-2 1.8 8H23l-2.18-11-.62-3.1 1.8.7v3.4h2zM10.29 8.09c.22.15.47.24.72.29.13.02.25.04.38.04s.26-.01.38-.04c.13-.02.25-.06.37-.11.24-.1.47-.24.66-.44.49-.49.67-1.17.55-1.8-.07-.37-.25-.74-.55-1.03-.19-.19-.42-.34-.66-.44-.12-.05-.24-.09-.37-.11s-.25-.04-.38-.04c-.12 0-.23.01-.35.03-.14.02-.28.06-.41.11-.23.11-.46.26-.65.45-.3.29-.48.66-.55 1.03-.12.63.06 1.31.55 1.8.09.1.2.18.31.26z"
       fill="currentColor"

package/icons/jsx/SportsMartialArts.jsx

@@ -12,7 +12,7 @@ const SvgSportsMartialArts = (props) => (
       d="m19.8 2-8.2 6.7-1.21-1.04 3.6-2.08L9.41 1 8 2.41l2.74 2.74L5 8.46l-1.19 4.29L6.27 17 8 16l-2.03-3.52.35-1.3L9.5 13l.5 9h2l.5-10L21 3.4z"
       fill="currentColor"
     />
-    <circle cx={5} cy={5} r={2} />
+    <circle cx={5} cy={5} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgSportsMartialArts;

package/icons/jsx/Stream.jsx

@@ -8,14 +8,14 @@ const SvgStream = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={20} cy={12} r={2} />
-    <circle cx={4} cy={12} r={2} />
-    <circle cx={12} cy={20} r={2} />
+    <circle cx={20} cy={12} r={2} fill="currentColor" />
+    <circle cx={4} cy={12} r={2} fill="currentColor" />
+    <circle cx={12} cy={20} r={2} fill="currentColor" />
     <path
       d="m13.943 8.619 4.404-4.392 1.413 1.416-4.405 4.392zM8.32 9.68l.31.32 1.42-1.41-4.02-4.04h-.01l-.31-.32-1.42 1.41 4.02 4.05zm7.09 4.26L14 15.35l3.99 4.01.35.35 1.42-1.41-3.99-4.01zm-6.82.01-4.03 4.01-.32.33 1.41 1.41 4.03-4.02.33-.32z"
       fill="currentColor"
     />
-    <circle cx={12} cy={4} r={2} />
+    <circle cx={12} cy={4} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgStream;

package/icons/jsx/Streetview.jsx

@@ -12,7 +12,7 @@ const SvgStreetview = (props) => (
       d="M12.56 14.33c-.34.27-.56.7-.56 1.17V21h7c1.1 0 2-.9 2-2v-5.98c-.94-.33-1.95-.52-3-.52-2.03 0-3.93.7-5.44 1.83z"
       fill="currentColor"
     />
-    <circle cx={18} cy={6} r={5} />
+    <circle cx={18} cy={6} r={5} fill="currentColor" />
     <path
       d="M11.5 6c0-1.08.27-2.1.74-3H5c-1.1 0-2 .9-2 2v14c0 .55.23 1.05.59 1.41l9.82-9.82A6.435 6.435 0 0 1 11.5 6z"
       fill="currentColor"

package/icons/jsx/Subway.jsx

@@ -8,8 +8,8 @@ const SvgSubway = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={8.5} cy={16} r={1} />
-    <circle cx={15.5} cy={16} r={1} />
+    <circle cx={8.5} cy={16} r={1} fill="currentColor" />
+    <circle cx={15.5} cy={16} r={1} fill="currentColor" />
     <path
       d="M7.01 9h10v5h-10zM17.8 2.8C16 2.09 13.86 2 12 2s-4 .09-5.8.8C3.53 3.84 2 6.05 2 8.86V22h20V8.86c0-2.81-1.53-5.02-4.2-6.06zm.2 12.7c0 1.54-1.16 2.79-2.65 2.96l1.15 1.16V20h-1.67l-1.5-1.5h-2.66L9.17 20H7.5v-.38l1.15-1.16A2.979 2.979 0 0 1 6 15.5V9c0-2.63 3-3 6-3s6 .37 6 3v6.5z"
       fill="currentColor"

package/icons/jsx/SupportAgent.jsx

@@ -8,8 +8,8 @@ const SvgSupportAgent = (props) => (
     fill="none"
     {...props}
   >
-    <circle cx={9} cy={13} r={1} />
-    <circle cx={15} cy={13} r={1} />
+    <circle cx={9} cy={13} r={1} fill="currentColor" />
+    <circle cx={15} cy={13} r={1} fill="currentColor" />
     <path
       d="M18 11.03A6.04 6.04 0 0 0 12.05 6c-3.03 0-6.29 2.51-6.03 6.45a8.075 8.075 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47z"
       fill="currentColor"

package/icons/jsx/WindPower.jsx

@@ -12,7 +12,7 @@ const SvgWindPower = (props) => (
       d="M4 3h6v2H4zM1 7h5v2H1zm2 12h5v2H3zm12.32-6.91 5.42-9.04L17.32 1 12 5.97v4.74a2.485 2.485 0 0 1 3.32 1.38zM10.5 13c0-.82.4-1.54 1.01-2H1v4l7 2 3.44-2.06A2.48 2.48 0 0 1 10.5 13zm9.67 10L23 20.17l-3.54-6.36-3.98-1c0 .06.02.12.02.19a2.5 2.5 0 0 1-2.5 2.5c-.36 0-.69-.08-1-.21V21c-1.1 0-2 .9-2 2h6c0-1.1-.9-2-2-2v-4.17L20.17 23z"
       fill="currentColor"
     />
-    <circle cx={13} cy={13} r={1.5} />
+    <circle cx={13} cy={13} r={1.5} fill="currentColor" />
   </svg>
 );
 export default SvgWindPower;

package/icons/jsx/Woman.jsx

@@ -9,7 +9,7 @@ const SvgWoman = (props) => (
     {...props}
   >
     <path d="M13.41 7h-2.82L7 16h3v6h4v-6h3z" fill="currentColor" />
-    <circle cx={12} cy={4} r={2} />
+    <circle cx={12} cy={4} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgWoman;

package/icons/jsx/Woman2.jsx

@@ -9,7 +9,7 @@ const SvgWoman2 = (props) => (
     {...props}
   >
     <path d="M13.41 7h-2.82L7 16h3.5v6h3v-6H17z" fill="currentColor" />
-    <circle cx={12} cy={4} r={2} />
+    <circle cx={12} cy={4} r={2} fill="currentColor" />
   </svg>
 );
 export default SvgWoman2;

package/icons/jsx/Yard.jsx

@@ -12,7 +12,7 @@ const SvgYard = (props) => (
       d="M22 2H2v20h20V2zM8 8.22a1.562 1.562 0 0 1 2.45-1.28l-.01-.12c0-.86.7-1.56 1.56-1.56s1.56.7 1.56 1.56l-.01.12A1.562 1.562 0 0 1 16 8.22c0 .62-.37 1.16-.89 1.4.52.25.89.79.89 1.41 0 .86-.7 1.56-1.56 1.56-.33 0-.64-.11-.89-.28l.01.12c0 .86-.7 1.56-1.56 1.56s-1.56-.7-1.56-1.56l.01-.12A1.562 1.562 0 0 1 8 11.03c0-.62.37-1.16.89-1.4C8.37 9.38 8 8.84 8 8.22zM12 19c-3.31 0-6-2.69-6-6 3.31 0 6 2.69 6 6 0-3.31 2.69-6 6-6 0 3.31-2.69 6-6 6z"
       fill="currentColor"
     />
-    <circle cx={12} cy={9.62} r={1.56} />
+    <circle cx={12} cy={9.62} r={1.56} fill="currentColor" />
   </svg>
 );
 export default SvgYard;

package/icons/svg/check_circle_light_outline.svg

@@ -0,0 +1,13 @@
+<svg
+   width="57"
+   height="57"
+   viewBox="0 0 57 57"
+   fill="none"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     d="m 28.5,0.5 c -15.446191,0 -28,12.553809 -28,28 0,15.446191 12.553809,28 28,28 15.446191,0 28,-12.553809 28,-28 0,-15.446191 -12.553809,-28 -28,-28 z m 0,3 c 13.824872,0 25,11.175128 25,25 0,13.824872 -11.175128,25 -25,25 -13.824872,0 -25,-11.175128 -25,-25 0,-13.824872 11.175128,-25 25,-25 z"
+    />
+  <path
+     d="M 43.28125,16.386719 22.236328,37.431641 13.71875,28.912109 11.597656,31.035156 22.236328,41.673828 45.402344,18.507812 Z"
+     />
+</svg>

package/lib/version.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-console */
+const chalk = require('chalk');
+const { version } = require('../package.json');
+
+function versionCommand() {
+  console.log(`Paragon CLI version: ${chalk.bold(version)}`);
+}
+
+module.exports = versionCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.21",
+  "version": "22.0.0-alpha.23",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Button/README.md

@@ -198,27 +198,8 @@ For link to be `disabled`, it must have href defined with some value.
 )}
 ```
 
-### With a Spinner
-
-```jsx live
-<>
-  <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-</>
-```
+## Stateful buttons
+To implement loading state using a `Button` component, the [StatefulButton](https://paragon-openedx.netlify.app/components/statefulbutton/) component
+is available for use. <br/>
+This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and 
+user-friendly experience.

package/src/DataTable/README.md

@@ -436,7 +436,7 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
       }}
       isSortable
       defaultColumnValues={{ Filter: TextFilter }}
-      itemCount={7}
+      itemCount={3}
       data={[
         {
           name: 'Lil Bub',