@openedx/paragon 22.0.0-alpha.22 → 22.0.0-alpha.24

package/dist/hooks/useIndexOfLastVisibleChild.js

@@ -1,5 +1,4 @@
 import { useLayoutEffect, useState } from 'react';
-import useWindowSize from './useWindowSize';
 
 /**
  * This hook will find the index of the last child of a containing element
@@ -9,48 +8,44 @@ import useWindowSize from './useWindowSize';
  * @param {Element} containerElementRef - container element
  * @param {Element} overflowElementRef - overflow element
  *
- * The hook returns an array containing:
- * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]
- *
- * indexOfLastVisibleChild - the index of the last visible child
- * containerElementRef - a ref to be added to the containing html node
- * overflowElementRef - a ref to be added to an html node inside the container
- *    that is likely to be used to contain a "More" type dropdown or other
- *    mechanism to reveal hidden children. The width of this element is always
- *    included when determining which children will fit or not. Usage of this ref
- *    is optional.
+ * The hook returns the index of the last visible child.
  */
 const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {
   const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
-  const windowSize = useWindowSize();
   useLayoutEffect(() => {
-    if (!containerElementRef) {
-      return;
+    function updateLastVisibleChildIndex() {
+      // Get array of child nodes from NodeList form
+      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
+      const {
+        nextIndexOfLastVisibleChild
+      } = childNodesArr
+      // filter out the overflow element
+      .filter(childNode => childNode !== overflowElementRef)
+      // sum the widths to find the last visible element's index
+      .reduce((acc, childNode, index) => {
+        acc.sumWidth += childNode.getBoundingClientRect().width;
+        if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
+          acc.nextIndexOfLastVisibleChild = index;
+        }
+        return acc;
+      }, {
+        // Include the overflow element's width to begin with. Doing this means
+        // sometimes we'll show a dropdown with one item in it when it would fit,
+        // but allowing this case dramatically simplifies the calculations we need
+        // to do above.
+        sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+        nextIndexOfLastVisibleChild: -1
+      });
+      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+    }
+    if (containerElementRef) {
+      updateLastVisibleChildIndex();
+      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
+      resizeObserver.observe(containerElementRef);
+      return () => resizeObserver.disconnect();
     }
-    // Get array of child nodes from NodeList form
-    const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
-    const {
-      nextIndexOfLastVisibleChild
-    } = childNodesArr
-    // filter out the overflow element
-    .filter(childNode => childNode !== overflowElementRef)
-    // sum the widths to find the last visible element's index
-    .reduce((acc, childNode, index) => {
-      acc.sumWidth += childNode.getBoundingClientRect().width;
-      if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
-        acc.nextIndexOfLastVisibleChild = index;
-      }
-      return acc;
-    }, {
-      // Include the overflow element's width to begin with. Doing this means
-      // sometimes we'll show a dropdown with one item in it when it would fit,
-      // but allowing this case dramatically simplifies the calculations we need
-      // to do above.
-      sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
-      nextIndexOfLastVisibleChild: -1
-    });
-    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
-  }, [windowSize, containerElementRef, overflowElementRef]);
+    return undefined;
+  }, [containerElementRef, overflowElementRef]);
   return indexOfLastVisibleChild;
 };
 export default useIndexOfLastVisibleChild;

package/dist/hooks/useIndexOfLastVisibleChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIndexOfLastVisibleChild.js","names":["useLayoutEffect","useState","useWindowSize","useIndexOfLastVisibleChild","containerElementRef","overflowElementRef","indexOfLastVisibleChild","setIndexOfLastVisibleChild","windowSize","childNodesArr","Array","prototype","slice","call","children","nextIndexOfLastVisibleChild","filter","childNode","reduce","acc","index","sumWidth","getBoundingClientRect","width"],"sources":["../../src/hooks/useIndexOfLastVisibleChild.jsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport useWindowSize from './useWindowSize';\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * @param {Element} containerElementRef - container element\n * @param {Element} overflowElementRef - overflow element\n *\n * The hook returns an array containing:\n * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]\n *\n * indexOfLastVisibleChild - the index of the last visible child\n * containerElementRef - a ref to be added to the containing html node\n * overflowElementRef - a ref to be added to an html node inside the container\n *    that is likely to be used to contain a \"More\" type dropdown or other\n *    mechanism to reveal hidden children. The width of this element is always\n *    included when determining which children will fit or not. Usage of this ref\n *    is optional.\n */\nconst useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {\n  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n  const windowSize = useWindowSize();\n\n  useLayoutEffect(() => {\n    if (!containerElementRef) {\n      return;\n    }\n    // Get array of child nodes from NodeList form\n    const childNodesArr = Array.prototype.slice.call(containerElementRef.children);\n    const { nextIndexOfLastVisibleChild } = childNodesArr\n      // filter out the overflow element\n      .filter(childNode => childNode !== overflowElementRef)\n      // sum the widths to find the last visible element's index\n      .reduce((acc, childNode, index) => {\n        acc.sumWidth += childNode.getBoundingClientRect().width;\n        if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {\n          acc.nextIndexOfLastVisibleChild = index;\n        }\n        return acc;\n      }, {\n        // Include the overflow element's width to begin with. Doing this means\n        // sometimes we'll show a dropdown with one item in it when it would fit,\n        // but allowing this case dramatically simplifies the calculations we need\n        // to do above.\n        sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,\n        nextIndexOfLastVisibleChild: -1,\n      });\n\n    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n  }, [windowSize, containerElementRef, overflowElementRef]);\n\n  return indexOfLastVisibleChild;\n};\n\nexport default useIndexOfLastVisibleChild;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAEjD,OAAOC,aAAa,MAAM,iBAAiB;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,0BAA0B,GAAGA,CAACC,mBAAmB,EAAEC,kBAAkB,KAAK;EAC9E,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGN,QAAQ,CAAC,CAAC,CAAC,CAAC;EAC1E,MAAMO,UAAU,GAAGN,aAAa,CAAC,CAAC;EAElCF,eAAe,CAAC,MAAM;IACpB,IAAI,CAACI,mBAAmB,EAAE;MACxB;IACF;IACA;IACA,MAAMK,aAAa,GAAGC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACT,mBAAmB,CAACU,QAAQ,CAAC;IAC9E,MAAM;MAAEC;IAA4B,CAAC,GAAGN;IACtC;IAAA,CACCO,MAAM,CAACC,SAAS,IAAIA,SAAS,KAAKZ,kBAAkB;IACrD;IAAA,CACCa,MAAM,CAAC,CAACC,GAAG,EAAEF,SAAS,EAAEG,KAAK,KAAK;MACjCD,GAAG,CAACE,QAAQ,IAAIJ,SAAS,CAACK,qBAAqB,CAAC,CAAC,CAACC,KAAK;MACvD,IAAIJ,GAAG,CAACE,QAAQ,IAAIjB,mBAAmB,CAACkB,qBAAqB,CAAC,CAAC,CAACC,KAAK,EAAE;QACrEJ,GAAG,CAACJ,2BAA2B,GAAGK,KAAK;MACzC;MACA,OAAOD,GAAG;IACZ,CAAC,EAAE;MACD;MACA;MACA;MACA;MACAE,QAAQ,EAAEhB,kBAAkB,GAAGA,kBAAkB,CAACiB,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,CAAC;MACnFR,2BAA2B,EAAE,CAAC;IAChC,CAAC,CAAC;IAEJR,0BAA0B,CAACQ,2BAA2B,CAAC;EACzD,CAAC,EAAE,CAACP,UAAU,EAAEJ,mBAAmB,EAAEC,kBAAkB,CAAC,CAAC;EAEzD,OAAOC,uBAAuB;AAChC,CAAC;AAED,eAAeH,0BAA0B"}
+{"version":3,"file":"useIndexOfLastVisibleChild.js","names":["useLayoutEffect","useState","useIndexOfLastVisibleChild","containerElementRef","overflowElementRef","indexOfLastVisibleChild","setIndexOfLastVisibleChild","updateLastVisibleChildIndex","childNodesArr","Array","prototype","slice","call","children","nextIndexOfLastVisibleChild","filter","childNode","reduce","acc","index","sumWidth","getBoundingClientRect","width","resizeObserver","ResizeObserver","observe","disconnect","undefined"],"sources":["../../src/hooks/useIndexOfLastVisibleChild.jsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * @param {Element} containerElementRef - container element\n * @param {Element} overflowElementRef - overflow element\n *\n * The hook returns the index of the last visible child.\n */\nconst useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {\n  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n\n  useLayoutEffect(() => {\n    function updateLastVisibleChildIndex() {\n      // Get array of child nodes from NodeList form\n      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);\n      const { nextIndexOfLastVisibleChild } = childNodesArr\n        // filter out the overflow element\n        .filter(childNode => childNode !== overflowElementRef)\n        // sum the widths to find the last visible element's index\n        .reduce((acc, childNode, index) => {\n          acc.sumWidth += childNode.getBoundingClientRect().width;\n          if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {\n            acc.nextIndexOfLastVisibleChild = index;\n          }\n          return acc;\n        }, {\n          // Include the overflow element's width to begin with. Doing this means\n          // sometimes we'll show a dropdown with one item in it when it would fit,\n          // but allowing this case dramatically simplifies the calculations we need\n          // to do above.\n          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,\n          nextIndexOfLastVisibleChild: -1,\n        });\n\n      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n    }\n\n    if (containerElementRef) {\n      updateLastVisibleChildIndex();\n\n      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());\n      resizeObserver.observe(containerElementRef);\n\n      return () => resizeObserver.disconnect();\n    }\n\n    return undefined;\n  }, [containerElementRef, overflowElementRef]);\n\n  return indexOfLastVisibleChild;\n};\n\nexport default useIndexOfLastVisibleChild;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,0BAA0B,GAAGA,CAACC,mBAAmB,EAAEC,kBAAkB,KAAK;EAC9E,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC,CAAC;EAE1ED,eAAe,CAAC,MAAM;IACpB,SAASO,2BAA2BA,CAAA,EAAG;MACrC;MACA,MAAMC,aAAa,GAAGC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACT,mBAAmB,CAACU,QAAQ,CAAC;MAC9E,MAAM;QAAEC;MAA4B,CAAC,GAAGN;MACtC;MAAA,CACCO,MAAM,CAACC,SAAS,IAAIA,SAAS,KAAKZ,kBAAkB;MACrD;MAAA,CACCa,MAAM,CAAC,CAACC,GAAG,EAAEF,SAAS,EAAEG,KAAK,KAAK;QACjCD,GAAG,CAACE,QAAQ,IAAIJ,SAAS,CAACK,qBAAqB,CAAC,CAAC,CAACC,KAAK;QACvD,IAAIJ,GAAG,CAACE,QAAQ,IAAIjB,mBAAmB,CAACkB,qBAAqB,CAAC,CAAC,CAACC,KAAK,EAAE;UACrEJ,GAAG,CAACJ,2BAA2B,GAAGK,KAAK;QACzC;QACA,OAAOD,GAAG;MACZ,CAAC,EAAE;QACD;QACA;QACA;QACA;QACAE,QAAQ,EAAEhB,kBAAkB,GAAGA,kBAAkB,CAACiB,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,CAAC;QACnFR,2BAA2B,EAAE,CAAC;MAChC,CAAC,CAAC;MAEJR,0BAA0B,CAACQ,2BAA2B,CAAC;IACzD;IAEA,IAAIX,mBAAmB,EAAE;MACvBI,2BAA2B,CAAC,CAAC;MAE7B,MAAMgB,cAAc,GAAG,IAAIC,cAAc,CAAC,MAAMjB,2BAA2B,CAAC,CAAC,CAAC;MAC9EgB,cAAc,CAACE,OAAO,CAACtB,mBAAmB,CAAC;MAE3C,OAAO,MAAMoB,cAAc,CAACG,UAAU,CAAC,CAAC;IAC1C;IAEA,OAAOC,SAAS;EAClB,CAAC,EAAE,CAACxB,mBAAmB,EAAEC,kBAAkB,CAAC,CAAC;EAE7C,OAAOC,uBAAuB;AAChC,CAAC;AAED,eAAeH,0BAA0B"}

package/dist/i18n/messages/ar.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
   "pgn.Toast.closeLabel": "إغلاق ",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/ca.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/es_419.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/es_AR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/es_ES.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/fr.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/he.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/id.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/it_IT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Chiudi",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/ko_KR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/pl.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Zamknij",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/pt_BR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/pt_PT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
   "pgn.Toast.closeLabel": "Fechar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/ru.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/th.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/tr_TR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
   "pgn.Toast.closeLabel": "Kapat",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/uk.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/zh_CN.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/light.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
  */
 
 :root {
@@ -580,7 +580,6 @@
   --pgn-color-alert-title: var(--pgn-color-black);
   --pgn-color-theme-active-gray: var(--pgn-color-gray-900);
   --pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
-  --pgn-color-theme-focus-gray: var(--pgn-color-gray-300);
   --pgn-color-theme-border-gray: var(--pgn-color-gray-200);
   --pgn-color-theme-bg-gray: var(--pgn-color-gray-100);
   --pgn-color-border: var(--pgn-color-gray-200);
@@ -1112,10 +1111,11 @@
   --pgn-color-theme-default-light: var(--pgn-color-light-500);
   --pgn-color-theme-default-brand: var(--pgn-color-brand-500);
   --pgn-color-theme-default-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-focus-dark: var(--pgn-color-dark-300);
-  --pgn-color-theme-focus-light: var(--pgn-color-light-300);
-  --pgn-color-theme-focus-brand: var(--pgn-color-brand-300);
-  --pgn-color-theme-focus-primary: var(--pgn-color-primary-300);
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500);
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500);
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500);
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500);
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500);
   --pgn-color-theme-border-dark: var(--pgn-color-dark-200);
   --pgn-color-theme-border-light: var(--pgn-color-light-200);
   --pgn-color-theme-border-brand: var(--pgn-color-brand-200);
@@ -1444,11 +1444,11 @@
   --pgn-color-theme-default-info: var(--pgn-color-info-500);
   --pgn-color-theme-default-success: var(--pgn-color-success-500);
   --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-focus-danger: var(--pgn-color-danger-300);
-  --pgn-color-theme-focus-warning: var(--pgn-color-warning-300);
-  --pgn-color-theme-focus-info: var(--pgn-color-info-300);
-  --pgn-color-theme-focus-success: var(--pgn-color-success-300);
-  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-300);
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500);
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500);
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500);
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500);
+  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500);
   --pgn-color-theme-border-danger: var(--pgn-color-danger-200);
   --pgn-color-theme-border-warning: var(--pgn-color-warning-200);
   --pgn-color-theme-border-info: var(--pgn-color-info-200);