react-asc 21.2.0 → 21.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  export interface ILoadingIndicatorContainerProps {
3
3
  children: React.ReactNode;
4
+ isFixed?: boolean;
4
5
  }
5
- export declare const LoadingIndicatorContainer: ({ children }: ILoadingIndicatorContainerProps) => JSX.Element;
6
+ export declare const LoadingIndicatorContainer: ({ children, isFixed }: ILoadingIndicatorContainerProps) => JSX.Element;
package/index.es.js CHANGED
@@ -501,8 +501,8 @@ const Badge = (props) => {
501
501
  React.createElement("span", { className: getCssClassesBadge() }, content)));
502
502
  };
503
503
 
504
- var css_248z$O = ".Button-module_button__qeIer {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius); }\n .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n .Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%; }\n .Button-module_button__qeIer:hover {\n cursor: pointer; }\n .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
505
- var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
504
+ var css_248z$O = ".Button-module_button__qeIer {\n text-transform: uppercase;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius); }\n .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n .Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%; }\n .Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer; }\n .Button-module_button__qeIer:focus:not(:disabled) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12); }\n .Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary); }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight); }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary); }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight); }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent); }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight); }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text); }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight); }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark); }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight); }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary); }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary); }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent); }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light); }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark); }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight); }\n .Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12); }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
505
+ var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
506
506
  styleInject(css_248z$O);
507
507
 
508
508
  const Button = (props) => {
@@ -542,7 +542,7 @@ const Button = (props) => {
542
542
  React.createElement(Icon, { className: styles$O.endIcon }, endIcon))));
543
543
  };
544
544
 
545
- var css_248z$N = ".ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n";
545
+ var css_248z$N = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px black, 0px 2px 2px 0px black, 0px 1px 5px 0px black; }\n .ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n .ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd; }\n";
546
546
  var styles$N = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
547
547
  styleInject(css_248z$N);
548
548
 
@@ -1645,8 +1645,8 @@ const Link = (props) => {
1645
1645
  return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
1646
1646
  };
1647
1647
 
1648
- var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
1649
- var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
1648
+ var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\n .LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n position: fixed;\n top: 0;\n left: 0; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
1649
+ var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
1650
1650
  styleInject(css_248z$k);
1651
1651
 
1652
1652
  const LoadingIndicator = (_a) => {
@@ -1660,10 +1660,11 @@ const LoadingIndicator = (_a) => {
1660
1660
  React.createElement(SpinnerSolidIcon, null)));
1661
1661
  };
1662
1662
 
1663
- const LoadingIndicatorContainer = ({ children }) => {
1663
+ const LoadingIndicatorContainer = ({ children, isFixed }) => {
1664
1664
  const getCssClasses = () => {
1665
1665
  const cssClasses = [];
1666
1666
  cssClasses.push(styles$k.loadingIndicatorContainer);
1667
+ isFixed && cssClasses.push(styles$k.isFixed);
1667
1668
  return cssClasses.filter(css => css).join(' ');
1668
1669
  };
1669
1670
  return (React.createElement("div", { className: getCssClasses() }, children));
@@ -1677,7 +1678,7 @@ class LoadingIndicatorService {
1677
1678
  this.container = document.createElement('div');
1678
1679
  this.container.classList.add('snackbar-container');
1679
1680
  document.body.appendChild(this.container);
1680
- render(React.createElement(LoadingIndicatorContainer, null,
1681
+ render(React.createElement(LoadingIndicatorContainer, { isFixed: true },
1681
1682
  React.createElement(LoadingIndicator, null)), this.container);
1682
1683
  }
1683
1684
  hide() {
package/index.js CHANGED
@@ -509,8 +509,8 @@ const Badge = (props) => {
509
509
  React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
510
510
  };
511
511
 
512
- var css_248z$O = ".Button-module_button__qeIer {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius); }\n .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n .Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%; }\n .Button-module_button__qeIer:hover {\n cursor: pointer; }\n .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
513
- var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
512
+ var css_248z$O = ".Button-module_button__qeIer {\n text-transform: uppercase;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius); }\n .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n .Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%; }\n .Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer; }\n .Button-module_button__qeIer:focus:not(:disabled) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12); }\n .Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary); }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight); }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary); }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight); }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent); }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight); }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text); }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight); }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark); }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight); }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary); }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary); }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent); }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light); }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight); }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark); }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight); }\n .Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12); }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
513
+ var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
514
514
  styleInject(css_248z$O);
515
515
 
516
516
  const Button = (props) => {
@@ -550,7 +550,7 @@ const Button = (props) => {
550
550
  React__default["default"].createElement(Icon, { className: styles$O.endIcon }, endIcon))));
551
551
  };
552
552
 
553
- var css_248z$N = ".ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n";
553
+ var css_248z$N = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px black, 0px 2px 2px 0px black, 0px 1px 5px 0px black; }\n .ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n .ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd; }\n";
554
554
  var styles$N = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
555
555
  styleInject(css_248z$N);
556
556
 
@@ -1653,8 +1653,8 @@ const Link = (props) => {
1653
1653
  return (React__default["default"].createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
1654
1654
  };
1655
1655
 
1656
- var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
1657
- var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
1656
+ var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\n .LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n position: fixed;\n top: 0;\n left: 0; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
1657
+ var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
1658
1658
  styleInject(css_248z$k);
1659
1659
 
1660
1660
  const LoadingIndicator = (_a) => {
@@ -1668,10 +1668,11 @@ const LoadingIndicator = (_a) => {
1668
1668
  React__default["default"].createElement(SpinnerSolidIcon, null)));
1669
1669
  };
1670
1670
 
1671
- const LoadingIndicatorContainer = ({ children }) => {
1671
+ const LoadingIndicatorContainer = ({ children, isFixed }) => {
1672
1672
  const getCssClasses = () => {
1673
1673
  const cssClasses = [];
1674
1674
  cssClasses.push(styles$k.loadingIndicatorContainer);
1675
+ isFixed && cssClasses.push(styles$k.isFixed);
1675
1676
  return cssClasses.filter(css => css).join(' ');
1676
1677
  };
1677
1678
  return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
@@ -1685,7 +1686,7 @@ class LoadingIndicatorService {
1685
1686
  this.container = document.createElement('div');
1686
1687
  this.container.classList.add('snackbar-container');
1687
1688
  document.body.appendChild(this.container);
1688
- reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, null,
1689
+ reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, { isFixed: true },
1689
1690
  React__default["default"].createElement(LoadingIndicator, null)), this.container);
1690
1691
  }
1691
1692
  hide() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-asc",
3
- "version": "21.2.0",
3
+ "version": "21.3.0",
4
4
  "description": "handcrafted react components",
5
5
  "main": "index.js",
6
6
  "module": "index.es.js",
package/react-asc.scss CHANGED
@@ -64,6 +64,16 @@
64
64
  --fontWeight: 400;
65
65
 
66
66
  --fontLineHeight: 1.5;
67
+
68
+ --textBody1FontSize: 13px;
69
+ --textBody1LineHeight: 18px;
70
+
71
+ --textBody2FontSize: 13px;
72
+ --textBody2LineHeight: 18px;
73
+
74
+ --textOverlineFontSize: 13px;
75
+ --textOverlineLineHeight: 18px;
76
+ --textOverlineTransform: uppercase;
67
77
  }
68
78
 
69
79
  :root {
@@ -304,3 +314,24 @@ label.required {
304
314
  vertical-align: text-top;
305
315
  }
306
316
  }
317
+
318
+ .overline {
319
+ font-size: var(--textOverlineFontSize) !important;
320
+ line-height: var(--textOverlineLineHeight) !important;
321
+ text-transform: var(--textOverlineTransform) !important;
322
+ font-weight: bold;
323
+ }
324
+
325
+ .body1 {
326
+ font-size: var(--textBody1FontSize) !important;
327
+ line-height: var(--textBody1LineHeight) !important;
328
+ }
329
+
330
+ .body2 {
331
+ font-size: var(--textBody2FontSize) !important;
332
+ line-height: var(--textBody2LineHeight) !important;
333
+ }
334
+
335
+ .uppercase {
336
+ text-transform: uppercase !important;
337
+ }