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

package/src/ProductTour/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  topPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.top-position-text',
+    defaultMessage: 'Top of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+  bottomPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.bottom-position-text',
+    defaultMessage: 'Bottom of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+});
+
+export default messages;

package/src/SearchField/SearchFieldAdvanced.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, {
   useRef, createContext, useState, useEffect,
 } from 'react';
@@ -138,27 +137,32 @@ SearchFieldAdvanced.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   /** specifies a custom class name. */
   className: PropTypes.string,
-  /** specifies a callback function for when the user loses focus in the `SearchField` component. The default is an empty function. For example:
+  /** specifies a callback function for when the user loses focus in the `SearchField` component.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onBlur={event => console.log(event)} />
   ``` */
   onBlur: PropTypes.func,
-  /** specifies a callback function for when the value in `SearchField` is changed by the user. The default is an empty function. For example:
+  /** specifies a callback function for when the value in `SearchField` is changed by the user.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onChange={value => console.log(value)} />
   ``` */
   onChange: PropTypes.func,
-  /** specifies a callback function for when the value in `SearchField` is cleared by the user. The default is an empty function. For example:
+  /** specifies a callback function for when the value in `SearchField` is cleared by the user.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onClear={() => console.log('search cleared')} />
   ``` */
   onClear: PropTypes.func,
-  /** specifies a callback function for when the user focuses in the `SearchField` component. The default is an empty function. For example:
+  /** specifies a callback function for when the user focuses in the `SearchField` component.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onFocus={event => console.log(event)} />
   ``` */
   onFocus: PropTypes.func,
-  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations). The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
+  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations).
+   * The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
   screenReaderText: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
     submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
@@ -171,7 +175,8 @@ SearchFieldAdvanced.propTypes = {
     submit: PropTypes.element.isRequired,
     clear: PropTypes.element,
   }),
-  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component more than once on a page. */
+  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component
+   * more than once on a page. */
   formAriaLabel: PropTypes.string,
   /** Specifies whether the `SearchField` is disabled. */
   disabled: PropTypes.bool,

package/src/SearchField/SearchFieldLabel.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -21,8 +20,9 @@ function SearchFieldLabel({ children, ...props }) {
 
 SearchFieldLabel.propTypes = {
   /**
-   * specifies the label to use for the input field (e.g., for i18n translations). Note: if `children` is not provided,
-   * a screenreader-only label will be used in its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
+   * specifies the label to use for the input field (e.g., for i18n translations).
+   * Note: if `children` is not provided, a screenreader-only label will be used in
+   * its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
    */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };

package/src/SearchField/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 

package/src/SelectableBox/tests/SelectableBoxSet.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import SelectableBox from '..';
 

package/src/Tabs/index.jsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseTabs from 'react-bootstrap/Tabs';
@@ -17,15 +23,15 @@ function Tabs({
   activeKey,
   ...props
 }) {
-  const containerElementRef = useRef(null);
+  const [containerElementRef, setContainerElementRef] = useState(null);
   const overflowElementRef = useRef(null);
   const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
-    containerElementRef.current?.children[0],
+    containerElementRef?.firstChild,
     overflowElementRef.current?.parentNode,
   );
 
   useEffect(() => {
-    if (containerElementRef.current) {
+    if (containerElementRef) {
       const observer = new MutationObserver((mutations => {
         mutations.forEach(mutation => {
           // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification
@@ -34,8 +40,8 @@ function Tabs({
           const isActive = mutation.target.getAttribute('aria-selected') === 'true';
           // datakey attribute is added manually to the dropdown
           // elements so that they correspond to the native tabs' eventKey
-          const element = containerElementRef.current.querySelector(`[datakey='${eventKey}']`);
-          const moreTab = containerElementRef.current.querySelector('.pgn__tab_more');
+          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);
+          const moreTab = containerElementRef.querySelector('.pgn__tab_more');
           if (isActive) {
             element?.classList.add('active');
             // Here we add active class to the 'More Tab' if element exists in the dropdown
@@ -49,13 +55,13 @@ function Tabs({
           }
         });
       }));
-      observer.observe(containerElementRef.current, {
+      observer.observe(containerElementRef, {
         attributes: true, subtree: true, attributeFilter: ['aria-selected'],
       });
       return () => observer.disconnect();
     }
     return undefined;
-  }, []);
+  }, [containerElementRef]);
 
   useEffect(() => {
     if (overflowElementRef.current?.parentNode) {
@@ -63,10 +69,10 @@ function Tabs({
     }
   }, [overflowElementRef.current?.parentNode]);
 
-  const handleDropdownTabClick = (eventKey) => {
-    const hiddenTab = containerElementRef.current.querySelector(`[data-rb-event-key='${eventKey}']`);
+  const handleDropdownTabClick = useCallback((eventKey) => {
+    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);
     hiddenTab.click();
-  };
+  }, [containerElementRef]);
 
   const tabsChildren = useMemo(() => {
     const indexOfOverflowStart = indexOfLastVisibleChild + 1;
@@ -164,10 +170,10 @@ function Tabs({
     />
     ));
     return childrenList;
-  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText]);
+  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);
 
   return (
-    <div ref={containerElementRef}>
+    <div ref={setContainerElementRef}>
       <BaseTabs
         defaultActiveKey={defaultActiveKey}
         activeKey={activeKey}

package/src/hooks/tests/useIndexOfLastVisibleChild.test.jsx

@@ -12,12 +12,12 @@ window.ResizeObserver = window.ResizeObserver
   }));
 
 function TestComponent() {
-  const containerElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState(null);
   const overflowElementRef = React.useRef(null);
-  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef.current, overflowElementRef.current);
+  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef, overflowElementRef.current);
 
   return (
-    <div ref={containerElementRef} style={{ display: 'flex' }}>
+    <div ref={setContainerElementRef} style={{ display: 'flex' }}>
       <div style={{ width: '250px' }} className="element">Element 1</div>
       <div style={{ width: '250px' }} className="element">Element 2</div>
       <div style={{ width: '250px' }} className="element">Element 3</div>

package/src/hooks/useIndexOfLastVisibleChild.jsx

@@ -1,7 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
 
-import useWindowSize from './useWindowSize';
-
 /**
  * This hook will find the index of the last child of a containing element
  * that fits within its bounding rectangle. This is done by summing the widths
@@ -10,48 +8,48 @@ 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;
 };

package/src/hooks/useIndexOfLastVisibleChild.mdx

@@ -25,10 +25,10 @@ of the children until they exceed the width of the container.
     pointerEvents: 'none',
     visibility: 'hidden',
   };
-  const containerElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState(null);
   const overflowElementRef = React.useRef(null);
   const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
-    containerElementRef.current,
+    containerElementRef,
     overflowElementRef.current,
   );
   const elements = ['Element 1', 'Element 2', 'Element 3', 'Element 4', 'Element 5', 'Element 6', 'Element 7'];
@@ -71,7 +71,7 @@ of the children until they exceed the width of the container.
   }, [indexOfLastVisibleChild]);
 
   return (
-    <div className="d-flex" ref={containerElementRef}>
+    <div className="d-flex" ref={setContainerElementRef}>
       {children}
     </div>
   )

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/styles/css/core/variables.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 {
@@ -236,7 +236,6 @@
   --pgn-spacing-card-margin-group: 12px;
   --pgn-spacing-card-spacer-y: .75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-focus-gap: 1px;
   --pgn-spacing-btn-block-spacing-y: .5rem;
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
   --pgn-spacing-bubble-expandable-padding-y: 0;
@@ -493,6 +492,7 @@
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -584,7 +584,8 @@
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
   --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
   --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -600,5 +601,6 @@
   --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
   --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
   --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
   --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
 }

package/styles/css/themes/light/variables.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);

package/tokens/src/core/components/Button/core.json

@@ -27,7 +27,7 @@
         "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
       },
       "focus": {
-        "gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" },
+        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
         "border-gap": {
           "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
           "type": "dimension",
@@ -88,9 +88,13 @@
       "focus": {
         "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
         "border-radius": {
-          "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-          "type": "dimension",
-          "source": "$btn-focus-border-radius"
+          "base": {
+            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "type": "dimension",
+            "source": "$btn-focus-border-radius"
+          },
+          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
+          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
         }
       }
     }