@jobber/components 6.16.0 → 6.17.1

package/dist/Banner-cjs.js

@@ -23,11 +23,11 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
+            type: "primary",
+            variation: "subtle",
         }, primaryAction);
     }
-    const bannerClassNames = classnames(BannerIcon.styles.banner, {
+    const bannerClassNames = classnames(BannerIcon.styles.banner, [BannerIcon.styles[type]], {
         [BannerIcon.styles.medium]: bannerWidth >= bannerWidths.medium,
     });
     if (!visible)

package/dist/Banner-es.js

@@ -21,11 +21,11 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
+            type: "primary",
+            variation: "subtle",
         }, primaryAction);
     }
-    const bannerClassNames = classnames(styles.banner, {
+    const bannerClassNames = classnames(styles.banner, [styles[type]], {
         [styles.medium]: bannerWidth >= bannerWidths.medium,
     });
     if (!visible)

package/dist/BannerIcon-cjs.js

@@ -4,7 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var Icon = require('./Icon-cjs.js');
 
-var styles = {"banner":"ucGelS5nNm0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
+var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
 
 var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
 

package/dist/BannerIcon-es.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { I as Icon } from './Icon-es.js';
 
-var styles = {"banner":"ucGelS5nNm0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
+var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
 
 var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
 

package/dist/Popover/index.cjs

@@ -5,6 +5,7 @@ require('react');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('classnames');
+require('react-dom');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/Popover/index.mjs

@@ -3,6 +3,7 @@ import 'react';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import 'classnames';
+import 'react-dom';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/Popover-cjs.js

@@ -4,6 +4,7 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var classnames = require('classnames');
+var ReactDOM = require('react-dom');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -20,11 +21,12 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
+    return React.createElement(React.Fragment, null, open && ReactDOM.createPortal(popoverContent, document.body));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/Popover-es.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import classnames from 'classnames';
+import ReactDOM from 'react-dom';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -18,11 +19,12 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
+    return React.createElement(React.Fragment, null, open && ReactDOM.createPortal(popoverContent, document.body));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/styles.css

@@ -1656,35 +1656,58 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .ucGelS5nNm0- {
+  --banner-surface: var(--color-surface);
+  --banner-textColor: var(--color-text);
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--shadow-base);
   padding: calc(16px - 4px) 16px;
   padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);
-  border: 1px solid hsl(200, 13%, 87%);
-  border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
   color: hsl(198, 35%, 21%);
-  color: var(--color-text);
+  color: var(--banner-textColor);
   background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
+  background-color: var(--banner-surface);
   gap: 8px;
   gap: var(--space-small);
   -ms-flex-align: center;
       align-items: center;
 }
 
+._5VzH3Cz9ps8- {
+  --banner-surface: var(--color-informative--surface);
+  --banner-textColor: var(--color-informative--onSurface);
+}
+
+._16jyB9OYJIs- {
+  --banner-surface: var(--color-critical--surface);
+  --banner-textColor: var(--color-critical--onSurface);
+}
+
+._4h-6cc8lZo8- {
+  --banner-surface: var(--color-warning--surface);
+  --banner-textColor: var(--color-warning--onSurface);
+}
+
+.k7T2IV0R8Q0- {
+  --banner-surface: var(--color-success--surface);
+  --banner-textColor: var(--color-success--onSurface);
+}
+
+.dG2vHE6g8f0- > a,
+.dG2vHE6g8f0- > p {
+  color: inherit;
+}
+
 .dG2vHE6g8f0- > a {
-  color: hsl(198, 35%, 21%);
-  color: var(--color-text);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .dG2vHE6g8f0- > a:hover {
   color: hsl(197, 90%, 12%);
-  color: var(--color-blue);
+  color: var(--color-heading);
 }
 
 .j9IeihCCYxI- {
@@ -1745,8 +1768,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .W0pSTO-oRmk- {
     width: 100%;
-    margin-top: 8px;
-    margin-top: var(--space-small);
+    padding-left: 32px;
+    padding-left: var(--space-larger);
 }
   }
 
@@ -1754,8 +1777,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .W0pSTO-oRmk- {
     width: 100%;
-    margin-top: 8px;
-    margin-top: var(--space-small);
+    padding-left: 32px;
+    padding-left: var(--space-larger);
 }
   }
 
@@ -1764,6 +1787,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   margin: calc(var(--space-smallest) * -1) 0;
   -ms-flex-item-align: start;
       align-self: flex-start;
+  mix-blend-mode: multiply;
 }
 
 @media (max-width: 489px) {
@@ -1782,6 +1806,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
   }
 
+[data-theme="dark"] .-IYYDBmq2Q0- {
+  mix-blend-mode: screen;
+}
+
 .BQhacg0OlMs- {
   display: -ms-inline-flexbox;
   display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.16.0",
+  "version": "6.17.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2e308bcccf914e471f8d82a72573e90d15e59bf8"
+  "gitHead": "5b1a9659f86dab9c8dfbb3cfdb616a7f3f09cf6a"
 }