@khanacademy/perseus 6.5.0 → 6.5.1

package/dist/index.css

@@ -3181,54 +3181,57 @@ body.mobile .perseus-matrix .math-output {
 .orderer.layout-vertical .draggable-box .placeholder {
   box-sizing: border-box;
 }
-.perseus-widget-passage-container .perseus-widget-passage {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] {
   line-height: 20px;
   margin: 22px;
   position: relative;
 }
-.perseus-widget-passage-container .perseus-widget-passage div.paragraph {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] div.paragraph {
   font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman", serif;
 }
-.perseus-widget-passage-container .katex {
-  line-height: 18px;
-}
-.perseus-widget-passage-container .passage-title div.paragraph {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-title div.paragraph {
   font-family: "Noto Serif", serif;
   font-weight: 700;
   font-size: 20px;
   line-height: 22px;
   margin: 0 0 10px;
 }
-.perseus-widget-passage-container .passage-text div.paragraph {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph {
   font-weight: 400;
   font-size: 16px;
   line-height: 20px;
   text-indent: 20px;
   margin: 0;
 }
-.perseus-widget-passage-container .passage-text div.paragraph span {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph span {
   text-indent: 0;
 }
-.perseus-widget-passage-container .footnotes {
+[id^="perseus-widget-passage-container"] [id^="perseus-widget-passage"] .passage-text div.paragraph em {
+  line-height: 0;
+}
+[id^="perseus-widget-passage-container"] .katex {
+  line-height: 18px;
+}
+[id^="perseus-widget-passage-container"] .footnotes {
   margin-top: 22px;
 }
-.perseus-widget-passage-container .footnotes div.paragraph {
+[id^="perseus-widget-passage-container"] .footnotes div.paragraph {
   font-size: 14px;
   margin: 0;
 }
-.perseus-widget-passage-container .perseus-highlight {
-  background-color: #FFFABE;
+[id^="perseus-widget-passage-container"] .perseus-highlight {
+  background-color: #fffabe;
 }
-.perseus-widget-passage-container .perseus-review-highlight {
-  background-color: #EEE7B2;
+[id^="perseus-widget-passage-container"] .perseus-review-highlight {
+  background-color: #eee7b2;
 }
-.perseus-widget-passage-container .perseus-passage-square-label,
-.perseus-widget-passage-container .perseus-passage-circle-label,
-.perseus-widget-passage-container .perseus-passage-bracket-label {
+[id^="perseus-widget-passage-container"] .perseus-passage-square-label,
+[id^="perseus-widget-passage-container"] .perseus-passage-circle-label,
+[id^="perseus-widget-passage-container"] .perseus-passage-bracket-label {
   font-family: Times, "Times New Roman", serif;
   font-size: 16px;
 }
-.perseus-widget-passage-container .line-numbers {
+[id^="perseus-widget-passage-container"] .line-numbers {
   font-size: 12px;
   font-style: italic;
   font-weight: 600;
@@ -3240,15 +3243,15 @@ body.mobile .perseus-matrix .math-output {
   left: -52px;
   width: 37px;
 }
-.perseus-widget-passage-container .line-numbers span {
+[id^="perseus-widget-passage-container"] .line-numbers span {
   display: block;
   line-height: 20px;
   position: relative;
   top: 2px;
   visibility: hidden;
 }
-.perseus-widget-passage-container .line-numbers span:nth-of-type(5n),
-.perseus-widget-passage-container .line-numbers .line-marker {
+[id^="perseus-widget-passage-container"] .line-numbers span:nth-of-type(5n),
+[id^="perseus-widget-passage-container"] .line-numbers .line-marker {
   visibility: visible;
 }
 .perseus-widget-passage-editor .perseus-single-editor {

package/dist/index.js

@@ -17764,9 +17764,7 @@ class InteractionTracker {
 
   // @ts-expect-error [FEI-5003] - TS2564 - Property 'widgetType' has no initializer and is not definitely assigned in the constructor.
 
-  constructor(trackApi,
-  // original apiOptions.trackInteraction
-  widgetType, widgetID, setting // "" means track once
+  constructor(trackApi, widgetType, widgetID, setting // "" means track once
   ) {
     _defineProperty(this, "_tracked", void 0);
     _defineProperty(this, "setting", void 0);
@@ -17782,7 +17780,6 @@ class InteractionTracker {
       this.trackApi({
         type: this.widgetType,
         id: this.widgetID,
-        // @ts-expect-error [FEI-5003] - TS2698 - Spread types may only be created from object types.
         ...extraData
       });
     });
@@ -38175,10 +38172,11 @@ class Passage extends React__namespace.Component {
     const parsedContent = PassageMarkdown.parse(doubleQuoteParsedContent, parseState);
     // Check if the title has any non-empty text in it.
     const hasTitle = /\S/.test(this.props.passageTitle);
+    const joinedTitle = joinString(this.props.passageTitle);
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-passage-container"
+      id: "perseus-widget-passage-container" + joinedTitle
     }, this._renderInstructions(parseState), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-passage"
+      id: "perseus-widget-passage" + joinedTitle
     }, hasTitle && /*#__PURE__*/React__namespace.createElement("h3", {
       className: "passage-title"
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
@@ -38209,6 +38207,8 @@ class Passage extends React__namespace.Component {
     }, i18n__namespace._("End of reading passage.")))));
   }
 }
+
+// That's All, Folks! => -thats-all-folks
 _defineProperty(Passage, "defaultProps", {
   passageTitle: "",
   passageText: "",
@@ -38217,6 +38217,7 @@ _defineProperty(Passage, "defaultProps", {
   highlights: {},
   linterContext: PerseusLinter.linterContextDefault
 });
+const joinString = title => "-" + title.toLowerCase().replace(/[^\w\s]/gi, "").trim().split(/\s+/).join("-");
 var Passage$1 = {
   name: "passage",
   displayName: "Passage (SAT only)",