@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/Spinner/index.scss

@@ -1,2 +1,57 @@
-@import "variables";
-@import "~bootstrap/scss/spinners";
+@keyframes spinner-border {
+  to { transform: rotate(360deg); }
+}
+
+.spinner-border {
+  display: inline-block;
+  width: var(--pgn-size-spinner-base-width);
+  height: var(--pgn-size-spinner-base-height);
+  vertical-align: calc(var(--pgn-spacing-vertical-align) * -1);
+  border: var(--pgn-size-spinner-base-border-width) solid currentcolor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: .75s linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+  width: var(--pgn-size-spinner-sm-width);
+  height: var(--pgn-size-spinner-sm-height);
+  border-width: var(--pgn-size-spinner-sm-border-width);
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.spinner-grow {
+  display: inline-block;
+  width: var(--pgn-size-spinner-base-width);
+  height: var(--pgn-size-spinner-base-height);
+  vertical-align: calc(var(--pgn-spacing-vertical-align) * -1);
+  background-color: currentcolor;
+  border-radius: 50%;
+  opacity: 0;
+  animation: .75s linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+  width: var(--pgn-size-spinner-sm-width);
+  height: var(--pgn-size-spinner-sm-height);
+}
+
+@if $enable-prefers-reduced-motion-media-query {
+  @media (prefers-reduced-motion: reduce) {
+    .spinner-border,
+    .spinner-grow {
+      animation-duration: 1.5s;
+    }
+  }
+}
+

package/dist/Stack/index.scss

@@ -1,10 +1,8 @@
-@import "variables";
-
 .pgn__vstack,
 .pgn__hstack {
   display: flex;
   align-self: stretch;
-  gap: $stack-gap;
+  gap: var(--pgn-size-stack-gap);
 
   @each $level, $space in $spacers {
     &.pgn__stack-gap--#{$level} {

package/dist/Stepper/index.scss

@@ -1,43 +1,43 @@
-@import "variables";
-
 .pgn__stepper-header {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $stepper-header-bg;
-  padding: $stepper-header-padding-y $stepper-header-padding-x;
-  min-height: $stepper-header-min-height;
+  background: var(--pgn-color-stepper-header-bg-base);
+  padding: var(--pgn-spacing-stepper-header-padding-y) var(--pgn-spacing-stepper-header-padding-x);
+  min-height: var(--pgn-size-stepper-header-height-min);
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x;
+    padding:
+      var(--pgn-spacing-stepper-header-step-list-padding-y)
+      var(--pgn-spacing-stepper-header-step-list-padding-x);
     display: flex;
     align-items: center;
-    margin: $stepper-header-step-list-margin;
+    margin: var(--pgn-spacing-stepper-header-step-list-margin);
     flex-grow: 1;
     justify-content: center;
 
     .pgn__stepper-header-line {
       display: block;
-      height: $stepper-header-line-height;
-      background: $stepper-header-line-bg;
+      height: var(--pgn-typography-spacer-line-height);
+      background: var(--pgn-color-stepper-header-bg-line);
       flex-basis: 80px;
       margin: 0 .5rem;
     }
 
     button.pgn__stepper-header-step {
-      border: $stepper-header-step-border;
-      background-color: $stepper-header-step-bg;
+      border: var(--pgn-color-stepper-header-step-border);
+      background-color: var(--pgn-color-stepper-header-bg-base);
     }
   }
 
   .pgn__stepper-header-step {
     display: flex;
     align-items: center;
-    color: $stepper-header-step-color;
+    color: var(--pgn-color-stepper-header-step-base);
     flex-shrink: 1;
-    min-width: $stepper-header-step-min-width;
-    padding: $stepper-header-step-padding;
+    min-width: var(--pgn-size-stepper-step-width-min);
+    padding: var(--pgn-spacing-stepper-header-step-padding);
 
     .pgn__bubble {
       margin-inline-end: .5rem;
@@ -56,11 +56,11 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: $x-small-font-size;
+      font-size: var(--pgn-typography-font-size-small-x);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
-      color: $stepper-header-active-step-bg;
+      color: var(--pgn-color-stepper-header-step-bg-active);
     }
 
     &.pgn__stepper-header-step-has-error {
@@ -68,16 +68,16 @@
         background: transparent;
         box-shadow:
           inset 0 0 0
-          $stepper-header-step-error-bubble-shadow-width
-          $stepper-header-step-error-bubble-color;
+          var(--pgn-size-stepper-step-bubble-error-shadow-width)
+          var(--pgn-color-stepper-header-step-bubble-error);
 
         * {
-          color: $stepper-header-step-error-bubble-color;
+          color: var(--pgn-color-stepper-header-step-bubble-error);
         }
       }
 
       .pgn__stepper-header-step-description {
-        color: $stepper-header-step-error-description-color;
+        color: var(--pgn-color-stepper-header-step-description-error);
       }
     }
   }

package/dist/Sticky/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__sticky {
   display: flex;
   width: 100%;
@@ -7,7 +5,7 @@
 
   &.pgn__sticky-top {
     align-self: self-start;
-    top: $sticky-offset;
+    top: var(--pgn-spacing-sticky-offset);
 
     @each $level, $offset in $spacers {
       &.pgn__sticky-offset--#{$level} {
@@ -16,13 +14,13 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow: $sticky-shadow-bottom;
+      box-shadow: var(--pgn-elevation-sticky-shadow-bottom);
     }
   }
 
   &.pgn__sticky-bottom {
     align-self: self-end;
-    bottom: $sticky-offset;
+    bottom: var(--pgn-spacing-sticky-offset);
 
     @each $level, $offset in $spacers {
       &.pgn__sticky-offset--#{$level} {
@@ -31,7 +29,7 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow: $sticky-shadow-top;
+      box-shadow: var(--pgn-elevation-sticky-shadow-top);
     }
   }
 }

package/dist/Tabs/index.js

@@ -19,7 +19,6 @@ import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseTabs from 'react-bootstrap/Tabs';
-import TabsDeprecated from './deprecated';
 import Bubble from '../Bubble';
 import Dropdown from '../Dropdown';
 import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';
@@ -198,7 +197,6 @@ Tabs.defaultProps = {
   defaultActiveKey: undefined,
   activeKey: undefined
 };
-Tabs.Deprecated = TabsDeprecated;
 export default Tabs;
 export { Tab };
 export { default as TabContainer } from 'react-bootstrap/TabContainer';

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useRef","useState","useCallback","classNames","PropTypes","BaseTabs","TabsDeprecated","Bubble","Dropdown","useIndexOfLastVisibleChild","Tab","MORE_TAB_TEXT","Tabs","_ref","_overflowElementRef$c","_overflowElementRef$c3","children","className","_ref$moreTabText","moreTabText","defaultActiveKey","activeKey","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","containerElementRef","setContainerElementRef","overflowElementRef","indexOfLastVisibleChild","firstChild","current","parentNode","observer","MutationObserver","mutations","forEach","mutation","eventKey","target","getAttribute","isActive","element","querySelector","concat","moreTab","classList","add","remove","observe","attributes","subtree","attributeFilter","disconnect","undefined","_overflowElementRef$c2","tabIndex","handleDropdownTabClick","hiddenTab","click","tabsChildren","indexOfOverflowStart","handleDropdownKeyPress","e","key","childrenList","Children","map","child","index","_child$type","type","name","process","env","NODE_ENV","console","error","isValidElement","_child$props","title","notification","tabClassName","rest","_excluded2","newTitle","createElement","Fragment","variant","role","expandable","tabClass","modifiedTab","cloneElement","_objectSpread","moreTabHasNotification","overflowChildren","slice","overflowChild","Item","as","onClick","onKeyPress","disabled","datakey","active","splice","length","ref","Toggle","id","Menu","_extends","propTypes","oneOf","node","isRequired","string","defaultProps","Deprecated","default","TabContainer","TabContent","TabPane"],"sources":["../../src/Tabs/index.jsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseTabs from 'react-bootstrap/Tabs';\nimport TabsDeprecated from './deprecated';\nimport Bubble from '../Bubble';\nimport Dropdown from '../Dropdown';\nimport useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';\nimport Tab from './Tab';\n\nexport const MORE_TAB_TEXT = 'More...';\n\nfunction Tabs({\n  children,\n  className,\n  moreTabText = MORE_TAB_TEXT,\n  defaultActiveKey,\n  activeKey,\n  ...props\n}) {\n  const [containerElementRef, setContainerElementRef] = useState(null);\n  const overflowElementRef = useRef(null);\n  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(\n    containerElementRef?.firstChild,\n    overflowElementRef.current?.parentNode,\n  );\n\n  useEffect(() => {\n    if (containerElementRef) {\n      const observer = new MutationObserver((mutations => {\n        mutations.forEach(mutation => {\n          // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification\n          const eventKey = mutation.target.getAttribute('data-rb-event-key');\n          // React-Bootstrap attribute 'aria-selected' is responsible for selected/unselected state\n          const isActive = mutation.target.getAttribute('aria-selected') === 'true';\n          // datakey attribute is added manually to the dropdown\n          // elements so that they correspond to the native tabs' eventKey\n          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);\n          const moreTab = containerElementRef.querySelector('.pgn__tab_more');\n          if (isActive) {\n            element?.classList.add('active');\n            // Here we add active class to the 'More Tab' if element exists in the dropdown\n            if (element) {\n              moreTab.classList.add('active');\n            } else {\n              moreTab.classList.remove('active');\n            }\n          } else {\n            element?.classList.remove('active');\n          }\n        });\n      }));\n      observer.observe(containerElementRef, {\n        attributes: true, subtree: true, attributeFilter: ['aria-selected'],\n      });\n      return () => observer.disconnect();\n    }\n    return undefined;\n  }, [containerElementRef]);\n\n  useEffect(() => {\n    if (overflowElementRef.current?.parentNode) {\n      overflowElementRef.current.parentNode.tabIndex = -1;\n    }\n  }, [overflowElementRef.current?.parentNode]);\n\n  const handleDropdownTabClick = useCallback((eventKey) => {\n    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);\n    hiddenTab.click();\n  }, [containerElementRef]);\n\n  const tabsChildren = useMemo(() => {\n    const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n    const handleDropdownKeyPress = (e, eventKey) => {\n      if (e.key === 'Enter') {\n        handleDropdownTabClick(eventKey);\n      }\n    };\n    const childrenList = React.Children.map(children, (child, index) => {\n      if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,\n        );\n      }\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n      const {\n        title, notification, tabClassName, ...rest\n      } = child.props;\n      let newTitle;\n      if (notification) {\n        newTitle = (\n          <>\n            {title}\n            <Bubble\n              variant=\"error\"\n              role=\"status\"\n              className=\"pgn__tab-notification\"\n              aria-live=\"polite\"\n              expandable\n            >\n              {notification}\n            </Bubble>\n          </>\n        );\n      } else {\n        newTitle = title;\n      }\n      const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';\n      const modifiedTab = React.cloneElement(child, {\n        ...rest,\n        title: newTitle,\n        tabClassName: classNames(tabClass, tabClassName),\n      });\n      return modifiedTab;\n    });\n    let moreTabHasNotification = false;\n    const overflowChildren = childrenList.slice(indexOfOverflowStart)\n      .map(overflowChild => {\n        if (!moreTabHasNotification && overflowChild.props.notification) {\n          moreTabHasNotification = true;\n        }\n        return (\n          <Dropdown.Item\n            as=\"li\"\n            tabIndex=\"0\"\n            key={`${overflowChild.props.eventKey}overflow`}\n            onClick={() => handleDropdownTabClick(overflowChild.props.eventKey)}\n            onKeyPress={(e) => handleDropdownKeyPress(e, overflowChild.props.eventKey)}\n            disabled={overflowChild.props.disabled}\n            datakey={overflowChild.props.eventKey}\n            className={classNames({\n              active: overflowChild.props.eventKey === defaultActiveKey || overflowChild.props.eventKey === activeKey,\n            }, 'pgn__tabs__dropdown-item')}\n          >\n            {overflowChild.props.title}\n          </Dropdown.Item>\n        );\n      });\n\n    childrenList.splice(indexOfOverflowStart, 0, (<Tab\n      key=\"moreTabKey\"\n      tabClassName={classNames(!overflowChildren.length && 'pgn__tab_invisible', 'pgn__tab_more')}\n      title={(\n        <Dropdown ref={overflowElementRef}>\n          <Dropdown.Toggle\n            variant=\"link\"\n            className=\"nav-link\"\n            id=\"pgn__tab-toggle\"\n          >\n            {moreTabText}\n            {moreTabHasNotification && (\n              <Bubble\n                variant=\"error\"\n                role=\"status\"\n                className=\"pgn__tab-notification\"\n              />\n            )}\n          </Dropdown.Toggle>\n          <Dropdown.Menu as=\"ul\" className=\"dropdown-menu-right\">{overflowChildren}</Dropdown.Menu>\n        </Dropdown>\n      )}\n    />\n    ));\n    return childrenList;\n  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);\n\n  return (\n    <div ref={setContainerElementRef}>\n      <BaseTabs\n        defaultActiveKey={defaultActiveKey}\n        activeKey={activeKey}\n        {...props}\n        className={classNames(className, 'pgn__tabs')}\n      >\n        {tabsChildren}\n      </BaseTabs>\n    </div>\n  );\n}\n\nTabs.propTypes = {\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['tabs', 'pills', 'inverse-tabs', 'inverse-pills', 'button-group']),\n  /** Specifies elements that is processed to create tabs. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies text for the 'More' tab. */\n  moreTabText: PropTypes.string,\n  /** Specifies default active tab (uncontrolled usage). */\n  defaultActiveKey: PropTypes.string,\n  /** Specifies active tab (controlled usage). */\n  activeKey: PropTypes.string,\n};\n\nTabs.defaultProps = {\n  variant: 'tabs',\n  className: undefined,\n  moreTabText: MORE_TAB_TEXT,\n  defaultActiveKey: undefined,\n  activeKey: undefined,\n};\n\nTabs.Deprecated = TabsDeprecated;\n\nexport default Tabs;\nexport { Tab };\nexport { default as TabContainer } from 'react-bootstrap/TabContainer';\nexport { default as TabContent } from 'react-bootstrap/TabContent';\nexport { default as TabPane } from 'react-bootstrap/TabPane';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useRef","useState","useCallback","classNames","PropTypes","BaseTabs","Bubble","Dropdown","useIndexOfLastVisibleChild","Tab","MORE_TAB_TEXT","Tabs","_ref","_overflowElementRef$c","_overflowElementRef$c3","children","className","_ref$moreTabText","moreTabText","defaultActiveKey","activeKey","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","containerElementRef","setContainerElementRef","overflowElementRef","indexOfLastVisibleChild","firstChild","current","parentNode","observer","MutationObserver","mutations","forEach","mutation","eventKey","target","getAttribute","isActive","element","querySelector","concat","moreTab","classList","add","remove","observe","attributes","subtree","attributeFilter","disconnect","undefined","_overflowElementRef$c2","tabIndex","handleDropdownTabClick","hiddenTab","click","tabsChildren","indexOfOverflowStart","handleDropdownKeyPress","e","key","childrenList","Children","map","child","index","_child$type","type","name","process","env","NODE_ENV","console","error","isValidElement","_child$props","title","notification","tabClassName","rest","_excluded2","newTitle","createElement","Fragment","variant","role","expandable","tabClass","modifiedTab","cloneElement","_objectSpread","moreTabHasNotification","overflowChildren","slice","overflowChild","Item","as","onClick","onKeyPress","disabled","datakey","active","splice","length","ref","Toggle","id","Menu","_extends","propTypes","oneOf","node","isRequired","string","defaultProps","default","TabContainer","TabContent","TabPane"],"sources":["../../src/Tabs/index.jsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseTabs from 'react-bootstrap/Tabs';\nimport Bubble from '../Bubble';\nimport Dropdown from '../Dropdown';\nimport useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';\nimport Tab from './Tab';\n\nexport const MORE_TAB_TEXT = 'More...';\n\nfunction Tabs({\n  children,\n  className,\n  moreTabText = MORE_TAB_TEXT,\n  defaultActiveKey,\n  activeKey,\n  ...props\n}) {\n  const [containerElementRef, setContainerElementRef] = useState(null);\n  const overflowElementRef = useRef(null);\n  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(\n    containerElementRef?.firstChild,\n    overflowElementRef.current?.parentNode,\n  );\n\n  useEffect(() => {\n    if (containerElementRef) {\n      const observer = new MutationObserver((mutations => {\n        mutations.forEach(mutation => {\n          // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification\n          const eventKey = mutation.target.getAttribute('data-rb-event-key');\n          // React-Bootstrap attribute 'aria-selected' is responsible for selected/unselected state\n          const isActive = mutation.target.getAttribute('aria-selected') === 'true';\n          // datakey attribute is added manually to the dropdown\n          // elements so that they correspond to the native tabs' eventKey\n          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);\n          const moreTab = containerElementRef.querySelector('.pgn__tab_more');\n          if (isActive) {\n            element?.classList.add('active');\n            // Here we add active class to the 'More Tab' if element exists in the dropdown\n            if (element) {\n              moreTab.classList.add('active');\n            } else {\n              moreTab.classList.remove('active');\n            }\n          } else {\n            element?.classList.remove('active');\n          }\n        });\n      }));\n      observer.observe(containerElementRef, {\n        attributes: true, subtree: true, attributeFilter: ['aria-selected'],\n      });\n      return () => observer.disconnect();\n    }\n    return undefined;\n  }, [containerElementRef]);\n\n  useEffect(() => {\n    if (overflowElementRef.current?.parentNode) {\n      overflowElementRef.current.parentNode.tabIndex = -1;\n    }\n  }, [overflowElementRef.current?.parentNode]);\n\n  const handleDropdownTabClick = useCallback((eventKey) => {\n    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);\n    hiddenTab.click();\n  }, [containerElementRef]);\n\n  const tabsChildren = useMemo(() => {\n    const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n    const handleDropdownKeyPress = (e, eventKey) => {\n      if (e.key === 'Enter') {\n        handleDropdownTabClick(eventKey);\n      }\n    };\n    const childrenList = React.Children.map(children, (child, index) => {\n      if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,\n        );\n      }\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n      const {\n        title, notification, tabClassName, ...rest\n      } = child.props;\n      let newTitle;\n      if (notification) {\n        newTitle = (\n          <>\n            {title}\n            <Bubble\n              variant=\"error\"\n              role=\"status\"\n              className=\"pgn__tab-notification\"\n              aria-live=\"polite\"\n              expandable\n            >\n              {notification}\n            </Bubble>\n          </>\n        );\n      } else {\n        newTitle = title;\n      }\n      const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';\n      const modifiedTab = React.cloneElement(child, {\n        ...rest,\n        title: newTitle,\n        tabClassName: classNames(tabClass, tabClassName),\n      });\n      return modifiedTab;\n    });\n    let moreTabHasNotification = false;\n    const overflowChildren = childrenList.slice(indexOfOverflowStart)\n      .map(overflowChild => {\n        if (!moreTabHasNotification && overflowChild.props.notification) {\n          moreTabHasNotification = true;\n        }\n        return (\n          <Dropdown.Item\n            as=\"li\"\n            tabIndex=\"0\"\n            key={`${overflowChild.props.eventKey}overflow`}\n            onClick={() => handleDropdownTabClick(overflowChild.props.eventKey)}\n            onKeyPress={(e) => handleDropdownKeyPress(e, overflowChild.props.eventKey)}\n            disabled={overflowChild.props.disabled}\n            datakey={overflowChild.props.eventKey}\n            className={classNames({\n              active: overflowChild.props.eventKey === defaultActiveKey || overflowChild.props.eventKey === activeKey,\n            }, 'pgn__tabs__dropdown-item')}\n          >\n            {overflowChild.props.title}\n          </Dropdown.Item>\n        );\n      });\n\n    childrenList.splice(indexOfOverflowStart, 0, (<Tab\n      key=\"moreTabKey\"\n      tabClassName={classNames(!overflowChildren.length && 'pgn__tab_invisible', 'pgn__tab_more')}\n      title={(\n        <Dropdown ref={overflowElementRef}>\n          <Dropdown.Toggle\n            variant=\"link\"\n            className=\"nav-link\"\n            id=\"pgn__tab-toggle\"\n          >\n            {moreTabText}\n            {moreTabHasNotification && (\n              <Bubble\n                variant=\"error\"\n                role=\"status\"\n                className=\"pgn__tab-notification\"\n              />\n            )}\n          </Dropdown.Toggle>\n          <Dropdown.Menu as=\"ul\" className=\"dropdown-menu-right\">{overflowChildren}</Dropdown.Menu>\n        </Dropdown>\n      )}\n    />\n    ));\n    return childrenList;\n  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);\n\n  return (\n    <div ref={setContainerElementRef}>\n      <BaseTabs\n        defaultActiveKey={defaultActiveKey}\n        activeKey={activeKey}\n        {...props}\n        className={classNames(className, 'pgn__tabs')}\n      >\n        {tabsChildren}\n      </BaseTabs>\n    </div>\n  );\n}\n\nTabs.propTypes = {\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['tabs', 'pills', 'inverse-tabs', 'inverse-pills', 'button-group']),\n  /** Specifies elements that is processed to create tabs. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies text for the 'More' tab. */\n  moreTabText: PropTypes.string,\n  /** Specifies default active tab (uncontrolled usage). */\n  defaultActiveKey: PropTypes.string,\n  /** Specifies active tab (controlled usage). */\n  activeKey: PropTypes.string,\n};\n\nTabs.defaultProps = {\n  variant: 'tabs',\n  className: undefined,\n  moreTabText: MORE_TAB_TEXT,\n  defaultActiveKey: undefined,\n  activeKey: undefined,\n};\n\nexport default Tabs;\nexport { Tab };\nexport { default as TabContainer } from 'react-bootstrap/TabContainer';\nexport { default as TabContent } from 'react-bootstrap/TabContent';\nexport { default as TabPane } from 'react-bootstrap/TabPane';\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__tabs {
   flex-wrap: nowrap;
 
@@ -11,9 +9,9 @@
     position: absolute;
     top: 0;
     right: 0;
-    min-height: $tab-notification-height;
-    min-width: $tab-notification-width;
-    font-size: $tab-notification-font-size;
+    min-height: var(--pgn-size-tabs-notification-height);
+    min-width: var(--pgn-size-tabs-notification-width);
+    font-size: var(--pgn-typography-tabs-notification-font-size);
   }
 
   .pgn__tab_more.nav-link {
@@ -32,28 +30,30 @@
       margin: 0;
 
       .dropdown .dropdown-toggle {
-        padding: $tab-more-link-dropdown-toggle-padding-x $tab-more-link-dropdown-toggle-padding-y;
+        padding:
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x)
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
 
         &:focus {
-          background-color: $tab-more-link-dropdown-toggle-focus-bg;
-          border-color: $tab-more-link-dropdown-toggle-focus-border-color;
-          color: $tab-more-link-dropdown-toggle-focus-color;
+          background-color: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+          border-color: var(--pgn-color-tab-more-link-dropdown-toggle-border-focus);
+          color: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
 
           &.btn.btn-link {
-            color: $tab-more-link-dropdown-toggle-btn-focus-color;
-            border-color: $tab-more-link-dropdown-toggle-btn-focus-border-color;
+            color: var(--pgn-color-tab-more-link-dropdown-toggle-btn-text-focus);
+            border-color: var(--pgn-color-tab-more-link-dropdown-toggle-btn-border-focus);
           }
         }
       }
 
       &.active {
         .dropdown .dropdown-toggle {
-          color: $tab-more-link-dropdown-toggle-active-color;
+          color: var(--pgn-color-tab-more-link-dropdown-toggle-text-active);
         }
 
         &:hover {
           .dropdown .dropdown-toggle {
-            background-color: $tab-more-link-dropdown-toggle-hover-color;
+            background-color: var(--pgn-color-tab-more-link-dropdown-toggle-text-hover);
           }
         }
       }
@@ -63,28 +63,30 @@
   // Nav inverse pills
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
-      padding: $tab-inverse-pills-link-dropdown-toggle-padding-x $tab-inverse-pills-link-dropdown-toggle-padding-y;
+      padding:
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x)
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
       border: none;
 
       &:focus {
-        background-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg;
-        color: $tab-inverse-pills-link-dropdown-toggle-focus-color;
+        background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
+        color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus);
       }
     }
 
     &.active .dropdown .dropdown-toggle {
-      color: $tab-inverse-pills-link-dropdown-toggle-active-color;
+      color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active);
 
       &:hover {
-        color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color;
-        background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg;
+        color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
+        background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
       }
 
       &:focus {
         @include nav-tabs-link-focus(
-          $tab-inverse-pills-link-dropdown-toggle-focus-border-color,
-          $nav-tabs-border-radius,
-          $tab-inverse-pills-link-dropdown-distance
+          var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
+          var(--pgn-size-nav-tabs-border-radius),
+          var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
         );
       }
     }
@@ -92,15 +94,17 @@
 
   // Nav tabs
   &.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    padding: .563rem $tab-more-link-dropdown-toggle-padding-y;
+    padding: .563rem var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
   }
 
   // Nav inverse tabs
   &.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    padding: $tab-inverse-tabs-link-dropdown-toggle-padding-x $tab-inverse-tabs-link-dropdown-toggle-padding-y;
+    padding:
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x)
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
 
     &:hover {
-      background-color: $tab-inverse-tabs-link-dropdown-toggle-hover-bg;
+      background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover);
     }
   }
 

package/dist/Toast/ToastContainer.scss

@@ -1,24 +1,22 @@
-@import "variables";
-
 .toast-container {
-  bottom: $toast-container-gutter-lg;
-  left: $toast-container-gutter-lg;
+  bottom: var(--pgn-spacing-toast-container-gutter-lg);
+  left: var(--pgn-spacing-toast-container-gutter-lg);
   position: fixed;
   z-index: 2;
 
   [dir="rtl"] & {
-    right: $toast-container-gutter-lg;
+    right: var(--pgn-spacing-toast-container-gutter-lg);
     left: 0;
   }
 
-  @media only screen and (max-width: 768px) {
-    bottom: $toast-container-gutter-sm;
-    right: $toast-container-gutter-sm;
-    left: $toast-container-gutter-sm;
+  @media (--pgn-size-breakpoint-max-width-sm) {
+    bottom: var(--pgn-spacing-toast-container-gutter-sm);
+    right: var(--pgn-spacing-toast-container-gutter-sm);
+    left: var(--pgn-spacing-toast-container-gutter-sm);
 
     [dir="rtl"] & {
-      left: $toast-container-gutter-sm;
-      right: $toast-container-gutter-sm;
+      left: var(--pgn-spacing-toast-container-gutter-sm);
+      right: var(--pgn-spacing-toast-container-gutter-sm);
     }
   }
 }

package/dist/Toast/bootstrap-toast.scss

@@ -0,0 +1,46 @@
+.toast {
+  flex-basis: var(--pgn-size-toast-max-width);
+  max-width: var(--pgn-size-toast-max-width);
+  color: var(--pgn-color-toast-base);
+  background-color: var(--pgn-color-toast-bg);
+  background-clip: padding-box;
+  border: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-border);
+  box-shadow: var(--pgn-elevation-toast-box-shadow);
+  opacity: 0;
+
+  @include font-size(var(--pgn-typography-toast-font-size));
+  @include border-radius(var(--pgn-size-toast-border-radius));
+
+  &:not(:last-child) {
+    margin-bottom: var(--pgn-spacing-toast-padding-x);
+  }
+
+  &.showing {
+    opacity: 1;
+  }
+
+  &.show {
+    display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: var(--pgn-spacing-toast-padding-y) var(--pgn-spacing-toast-padding-x);
+  color: var(--pgn-color-toast-header-text);
+  background-color: var(--pgn-color-toast-header-bg);
+  background-clip: padding-box;
+  border-bottom: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-header-border);
+
+  @include border-top-radius(subtract(var(--pgn-size-toast-border-radius), var(--pgn-size-toast-border-width)));
+}
+
+.toast-body {
+  padding: var(--pgn-spacing-toast-padding-x);
+}

package/dist/Toast/index.scss

@@ -1,13 +1,12 @@
-@import "variables";
-@import "~bootstrap/scss/toasts";
+@import "bootstrap-toast";
 
 .toast {
-  background-color: $toast-background-color;
-  box-shadow: $toast-box-shadow;
+  background-color: var(--pgn-color-toast-bg);
+  box-shadow: var(--pgn-elevation-toast-box-shadow);
   margin: 0;
   padding: 1rem;
   position: relative;
-  border-radius: $toast-border-radius;
+  border-radius: var(--pgn-size-toast-border-radius);
   z-index: 2;
 
   &.show {
@@ -32,7 +31,7 @@
     padding: 0;
 
     p {
-      font-size: $small-font-size;
+      font-size: var(--pgn-typography-font-size-small-base);
       margin: 0;
       padding-right: .75rem;
     }
@@ -42,12 +41,12 @@
     }
   }
 
-  @media only screen and (max-width: 768px) {
+  @media (--pgn-size-breakpoint-max-width-sm) {
     max-width: 100%;
   }
 
-  @media only screen and (min-width: 768px) {
-    min-width: $toast-max-width;
-    max-width: $toast-max-width;
+  @media (--pgn-size-breakpoint-min-width-md) {
+    min-width: var(--pgn-size-toast-max-width);
+    max-width: var(--pgn-size-toast-max-width);
   }
 }