@jobber/components 2.86.0 → 2.86.2

package/dist/Button/index.js

@@ -2,60 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
+var Button = require('../Button-5b2f1636.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('classnames');
+require('react-router-dom');
+require('../style-inject.es-dcee06b6.js');
+require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-var reactRouterDom = require('react-router-dom');
+require('../Typography-7e542a72.js');
 
-var css = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: 2s;\n}\n\n.mvrsWRM8T3kCECXcDS2gd {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: var(--radius-base);\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.mvrsWRM8T3kCECXcDS2gd * {\n  color: inherit;\n  fill: inherit !important; /* required to over-ride very specific fill from <Icon> */\n}\n\n.mvrsWRM8T3kCECXcDS2gd:hover,\na.mvrsWRM8T3kCECXcDS2gd:hover,\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  border-color: var(--color-interactive--hover);\n  border-color: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n._32HTPrDFyNRObzZRUxmhK6 {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n._2skm9hoZI_lSBKFKHaBFHp {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._1XNe0NyiiX5gO7kNceanXE {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n._15tUs2IB4Sic31aZYG7h3E {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z),\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  color: var(--color-white);\n  color: var(--color-white);\n  color: var(--button--color-primaryLabel);\n  background-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n  background-color: var(--button--color-variation);\n  fill: var(--color-white);\n  fill: var(--color-white);\n  fill: var(--button--color-primaryLabel);\n}\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  background-color: var(--color-interactive--hover);\n  background-color: var(--color-interactive--hover);\n  background-color: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._3QATgEdYmR2g9Hx6X6wCF-,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  border-color: var(--color-interactive);\n  border-color: var(--color-interactive);\n  border-color: var(--button--color-variation);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:hover,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:focus {\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._1IACxHVlJ8fUbaQh9Wo5wR:focus,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus {\n  border-color: transparent;\n  color: var(--color-interactive--subtle--hover);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: var(--color-disabled--secondary);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n._2bWEvNhV0hrUXGMEL-47ZW {\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 var(--space-small);\n}\n\n._1RWacHIaSoZ24Qq5QuiwLl {\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n._2lIWqvRcZzkk5iJxGXwXOZ {\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.s4L5ovtQ1xiOYCxjZtZzA {\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2bWEvNhV0hrUXGMEL-47ZW {\n  width: calc(var(--space-small) * 3);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._1RWacHIaSoZ24Qq5QuiwLl {\n  width: calc(var(--space-base) * 2.25);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2lIWqvRcZzkk5iJxGXwXOZ {\n  width: calc(var(--space-large) * 2);\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR {\n  width: auto;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(rtl) {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(rtl) {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: start;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: var(--space-small);\n}\n\n.ynAOdrWxU2gjfmktgPvCV > *:first-child {\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.azjQzmR6DJOHc9VhR8P_8 {\n  width: 100%;\n}\n\n._3tkzLKKpGYFY0HgS8OkM_e {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.1) 50%,\n    rgba(0, 0, 0, 0.1) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2s;\n          animation-duration: 2s;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n          animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n._3ReFsKtTKUcgG7PduYChd3._3tkzLKKpGYFY0HgS8OkM_e:not(._15tUs2IB4Sic31aZYG7h3E) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.25) 0%,\n    rgba(255, 255, 255, 0.25) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.25) 50%,\n    rgba(255, 255, 255, 0.25) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
-var styles = {"button":"mvrsWRM8T3kCECXcDS2gd","work":"_32HTPrDFyNRObzZRUxmhK6","learning":"_2skm9hoZI_lSBKFKHaBFHp","destructive":"_1XNe0NyiiX5gO7kNceanXE","subtle":"_15tUs2IB4Sic31aZYG7h3E","primary":"_3ReFsKtTKUcgG7PduYChd3","disabled":"_2A9nPQukZwPTOhSExvR0-Z","secondary":"_3QATgEdYmR2g9Hx6X6wCF-","tertiary":"_1IACxHVlJ8fUbaQh9Wo5wR","small":"_2bWEvNhV0hrUXGMEL-47ZW","base":"_1RWacHIaSoZ24Qq5QuiwLl","large":"_2lIWqvRcZzkk5iJxGXwXOZ","onlyIcon":"s4L5ovtQ1xiOYCxjZtZzA","hasIconAndLabel":"_2QzHdqV8dZvAzrDhFuq9VR","iconOnRight":"ynAOdrWxU2gjfmktgPvCV","fullWidth":"azjQzmR6DJOHc9VhR8P_8","loading":"_3tkzLKKpGYFY0HgS8OkM_e","animateStripes":"_1g5cSkv2FhbaOp_SpZQve_"};
-__chunk_2.styleInject(css);
 
-function Button(props) {
-    var _a;
-    var ariaControls = props.ariaControls, ariaHaspopup = props.ariaHaspopup, ariaExpanded = props.ariaExpanded, ariaLabel = props.ariaLabel, _b = props.disabled, disabled = _b === void 0 ? false : _b, external = props.external, fullWidth = props.fullWidth, icon = props.icon, label = props.label, iconOnRight = props.iconOnRight, id = props.id, loading = props.loading, onClick = props.onClick, onMouseDown = props.onMouseDown, _c = props.size, size = _c === void 0 ? "base" : _c, _d = props.type, type = _d === void 0 ? "primary" : _d, url = props.url, to = props.to, _e = props.variation, variation = _e === void 0 ? "work" : _e, submit = props.submit;
-    var buttonClassNames = classnames(styles.button, styles[size], (_a = {},
-        _a[styles.onlyIcon] = icon && !label,
-        _a[styles.hasIconAndLabel] = icon && label,
-        _a[styles.iconOnRight] = iconOnRight,
-        _a[styles[variation]] = variation,
-        _a[styles[type]] = type,
-        _a[styles.disabled] = disabled,
-        _a[styles.fullWidth] = fullWidth,
-        _a[styles.loading] = loading,
-        _a));
-    var buttonType = submit ? "submit" : "button";
-    var tagProps = __chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign(__chunk_1.__assign({ className: buttonClassNames, disabled: disabled,
-        id: id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel });
-    var buttonInternals = React__default.createElement(ButtonInternals, __chunk_1.__assign({}, props));
-    if (to) {
-        return (React__default.createElement(reactRouterDom.Link, __chunk_1.__assign({}, tagProps, { to: to }), buttonInternals));
-    }
-    var Tag = url ? "a" : "button";
-    return React__default.createElement(Tag, __chunk_1.__assign({}, tagProps), buttonInternals);
-}
-function ButtonInternals(_a) {
-    var label = _a.label, icon = _a.icon, _b = _a.size, size = _b === void 0 ? "base" : _b;
-    return (React__default.createElement(React__default.Fragment, null,
-        icon && React__default.createElement(index$2.Icon, { name: icon, size: size }),
-        React__default.createElement(index.Typography, { element: "span", textCase: "uppercase", fontWeight: "extraBold", size: getTypeSizes(size) }, label)));
-}
-function getTypeSizes(size) {
-    switch (size) {
-        case "small":
-            return "smaller";
-        case "large":
-            return "base";
-        default:
-            return "small";
-    }
-}
 
-exports.Button = Button;
+exports.Button = Button.Button;

package/dist/Button-5b2f1636.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var classnames = require('classnames');
+var reactRouterDom = require('react-router-dom');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var Icon = require('./Icon-d5ad1a6d.js');
+var Typography = require('./Typography-7e542a72.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: 2s;\n}\n\n.mvrsWRM8T3kCECXcDS2gd {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: var(--radius-base);\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.mvrsWRM8T3kCECXcDS2gd * {\n  color: inherit;\n  fill: inherit !important; /* required to over-ride very specific fill from <Icon> */\n}\n\n.mvrsWRM8T3kCECXcDS2gd:hover,\na.mvrsWRM8T3kCECXcDS2gd:hover,\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  border-color: var(--color-interactive--hover);\n  border-color: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n._32HTPrDFyNRObzZRUxmhK6 {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n._2skm9hoZI_lSBKFKHaBFHp {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._1XNe0NyiiX5gO7kNceanXE {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n._15tUs2IB4Sic31aZYG7h3E {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z),\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  color: var(--color-white);\n  color: var(--color-white);\n  color: var(--button--color-primaryLabel);\n  background-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n  background-color: var(--button--color-variation);\n  fill: var(--color-white);\n  fill: var(--color-white);\n  fill: var(--button--color-primaryLabel);\n}\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  background-color: var(--color-interactive--hover);\n  background-color: var(--color-interactive--hover);\n  background-color: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._3QATgEdYmR2g9Hx6X6wCF-,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  border-color: var(--color-interactive);\n  border-color: var(--color-interactive);\n  border-color: var(--button--color-variation);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:hover,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:focus {\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._1IACxHVlJ8fUbaQh9Wo5wR:focus,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus {\n  border-color: transparent;\n  color: var(--color-interactive--subtle--hover);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: var(--color-disabled--secondary);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n._2bWEvNhV0hrUXGMEL-47ZW {\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 var(--space-small);\n}\n\n._1RWacHIaSoZ24Qq5QuiwLl {\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n._2lIWqvRcZzkk5iJxGXwXOZ {\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.s4L5ovtQ1xiOYCxjZtZzA {\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2bWEvNhV0hrUXGMEL-47ZW {\n  width: calc(var(--space-small) * 3);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._1RWacHIaSoZ24Qq5QuiwLl {\n  width: calc(var(--space-base) * 2.25);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2lIWqvRcZzkk5iJxGXwXOZ {\n  width: calc(var(--space-large) * 2);\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR {\n  width: auto;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(rtl) {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(rtl) {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: start;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: var(--space-small);\n}\n\n.ynAOdrWxU2gjfmktgPvCV > *:first-child {\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.azjQzmR6DJOHc9VhR8P_8 {\n  width: 100%;\n}\n\n._3tkzLKKpGYFY0HgS8OkM_e {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.1) 50%,\n    rgba(0, 0, 0, 0.1) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2s;\n          animation-duration: 2s;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n          animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n._3ReFsKtTKUcgG7PduYChd3._3tkzLKKpGYFY0HgS8OkM_e:not(._15tUs2IB4Sic31aZYG7h3E) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.25) 0%,\n    rgba(255, 255, 255, 0.25) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.25) 50%,\n    rgba(255, 255, 255, 0.25) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
+var styles = {"button":"mvrsWRM8T3kCECXcDS2gd","work":"_32HTPrDFyNRObzZRUxmhK6","learning":"_2skm9hoZI_lSBKFKHaBFHp","destructive":"_1XNe0NyiiX5gO7kNceanXE","subtle":"_15tUs2IB4Sic31aZYG7h3E","primary":"_3ReFsKtTKUcgG7PduYChd3","disabled":"_2A9nPQukZwPTOhSExvR0-Z","secondary":"_3QATgEdYmR2g9Hx6X6wCF-","tertiary":"_1IACxHVlJ8fUbaQh9Wo5wR","small":"_2bWEvNhV0hrUXGMEL-47ZW","base":"_1RWacHIaSoZ24Qq5QuiwLl","large":"_2lIWqvRcZzkk5iJxGXwXOZ","onlyIcon":"s4L5ovtQ1xiOYCxjZtZzA","hasIconAndLabel":"_2QzHdqV8dZvAzrDhFuq9VR","iconOnRight":"ynAOdrWxU2gjfmktgPvCV","fullWidth":"azjQzmR6DJOHc9VhR8P_8","loading":"_3tkzLKKpGYFY0HgS8OkM_e","animateStripes":"_1g5cSkv2FhbaOp_SpZQve_"};
+styleInject_es.styleInject(css);
+
+function Button(props) {
+    var _a;
+    var ariaControls = props.ariaControls, ariaHaspopup = props.ariaHaspopup, ariaExpanded = props.ariaExpanded, ariaLabel = props.ariaLabel, _b = props.disabled, disabled = _b === void 0 ? false : _b, external = props.external, fullWidth = props.fullWidth, icon = props.icon, label = props.label, iconOnRight = props.iconOnRight, id = props.id, loading = props.loading, onClick = props.onClick, onMouseDown = props.onMouseDown, _c = props.size, size = _c === void 0 ? "base" : _c, _d = props.type, type = _d === void 0 ? "primary" : _d, url = props.url, to = props.to, _e = props.variation, variation = _e === void 0 ? "work" : _e, submit = props.submit;
+    var buttonClassNames = classnames__default["default"](styles.button, styles[size], (_a = {},
+        _a[styles.onlyIcon] = icon && !label,
+        _a[styles.hasIconAndLabel] = icon && label,
+        _a[styles.iconOnRight] = iconOnRight,
+        _a[styles[variation]] = variation,
+        _a[styles[type]] = type,
+        _a[styles.disabled] = disabled,
+        _a[styles.fullWidth] = fullWidth,
+        _a[styles.loading] = loading,
+        _a));
+    var buttonType = submit ? "submit" : "button";
+    var tagProps = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({ className: buttonClassNames, disabled: disabled,
+        id: id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel });
+    var buttonInternals = React__default["default"].createElement(ButtonInternals, tslib_es6.__assign({}, props));
+    if (to) {
+        return (React__default["default"].createElement(reactRouterDom.Link, tslib_es6.__assign({}, tagProps, { to: to }), buttonInternals));
+    }
+    var Tag = url ? "a" : "button";
+    return React__default["default"].createElement(Tag, tslib_es6.__assign({}, tagProps), buttonInternals);
+}
+function ButtonInternals(_a) {
+    var label = _a.label, icon = _a.icon, _b = _a.size, size = _b === void 0 ? "base" : _b;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        icon && React__default["default"].createElement(Icon.Icon, { name: icon, size: size }),
+        React__default["default"].createElement(Typography.Typography, { element: "span", textCase: "uppercase", fontWeight: "extraBold", size: getTypeSizes(size) }, label)));
+}
+function getTypeSizes(size) {
+    switch (size) {
+        case "small":
+            return "smaller";
+        case "large":
+            return "base";
+        default:
+            return "small";
+    }
+}
+
+exports.Button = Button;

package/dist/ButtonDismiss/ButtonDismiss.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-interface ButtonDismissProps {
-    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
-    ariaLabel: string;
-}
-export declare function ButtonDismiss({ onClick, ariaLabel }: ButtonDismissProps): JSX.Element;
-export {};
+import React from "react";
+interface ButtonDismissProps {
+    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+    ariaLabel: string;
+}
+export declare function ButtonDismiss({ onClick, ariaLabel }: ButtonDismissProps): JSX.Element;
+export {};

package/dist/ButtonDismiss/index.d.ts

@@ -1 +1 @@
-export { ButtonDismiss } from "./ButtonDismiss";
+export { ButtonDismiss } from "./ButtonDismiss";

package/dist/ButtonDismiss/index.js

@@ -2,22 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-require('../chunk-17e02351.js');
+var ButtonDismiss = require('../ButtonDismiss-4cde8f7c.js');
+require('react');
+require('../Button-5b2f1636.js');
+require('../tslib.es6-5b50eb8e.js');
 require('classnames');
-require('../Typography/index.js');
-require('@jobber/design');
-require('../Icon/index.js');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
+require('../style-inject.es-dcee06b6.js');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-7e542a72.js');
+
 
-function ButtonDismiss(_a) {
-    var onClick = _a.onClick, ariaLabel = _a.ariaLabel;
-    return (React__default.createElement(index$5.Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
-}
 
-exports.ButtonDismiss = ButtonDismiss;
+exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;

package/dist/ButtonDismiss-4cde8f7c.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-5b2f1636.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ButtonDismiss(_a) {
+    var onClick = _a.onClick, ariaLabel = _a.ariaLabel;
+    return (React__default["default"].createElement(Button.Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
+}
+
+exports.ButtonDismiss = ButtonDismiss;

package/dist/Card/Card.d.ts

@@ -1,31 +1,31 @@
-import React, { ReactNode } from "react";
-import { XOR } from "ts-xor";
-import colors from "./colors.css";
-interface CardProps {
-    /**
-     * The `accent`, if provided, will effect the color accent at the top of
-     * the card.
-     */
-    readonly accent?: keyof typeof colors;
-    readonly children: ReactNode | ReactNode[];
-    /**
-     * The title of the card.
-     */
-    readonly title?: string;
-}
-interface LinkCardProps extends CardProps {
-    /**
-     * URL that the card would navigate to once clicked.
-     */
-    url: string;
-    /**
-     * Makes the URL open in new tab on click.
-     */
-    external?: boolean;
-}
-interface ClickableCardProps extends CardProps {
-    onClick(event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
-}
-declare type CardPropOptions = XOR<CardProps, XOR<LinkCardProps, ClickableCardProps>>;
-export declare function Card({ accent, children, onClick, title, url, external, }: CardPropOptions): JSX.Element;
-export {};
+import React, { ReactNode } from "react";
+import { XOR } from "ts-xor";
+import colors from "./colors.css";
+interface CardProps {
+    /**
+     * The `accent`, if provided, will effect the color accent at the top of
+     * the card.
+     */
+    readonly accent?: keyof typeof colors;
+    readonly children: ReactNode | ReactNode[];
+    /**
+     * The title of the card.
+     */
+    readonly title?: string;
+}
+interface LinkCardProps extends CardProps {
+    /**
+     * URL that the card would navigate to once clicked.
+     */
+    url: string;
+    /**
+     * Makes the URL open in new tab on click.
+     */
+    external?: boolean;
+}
+interface ClickableCardProps extends CardProps {
+    onClick(event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
+}
+declare type CardPropOptions = XOR<CardProps, XOR<LinkCardProps, ClickableCardProps>>;
+export declare function Card({ accent, children, onClick, title, url, external, }: CardPropOptions): JSX.Element;
+export {};

package/dist/Card/CardClickable.d.ts

@@ -1,12 +1,12 @@
-import React, { ReactNode } from "react";
-interface ClickableCardProps {
-    onClick(event: React.MouseEvent<HTMLElement>): void;
-    className: string;
-    readonly children: ReactNode | ReactNode[];
-}
-/**
- * This is only intended to be used in the Card component.
- * Please use `<Card onClick={onClick} />` component instead.
- */
-export declare function CardClickable({ className, onClick, children, }: ClickableCardProps): JSX.Element;
-export {};
+import React, { ReactNode } from "react";
+interface ClickableCardProps {
+    onClick(event: React.MouseEvent<HTMLElement>): void;
+    className: string;
+    readonly children: ReactNode | ReactNode[];
+}
+/**
+ * This is only intended to be used in the Card component.
+ * Please use `<Card onClick={onClick} />` component instead.
+ */
+export declare function CardClickable({ className, onClick, children, }: ClickableCardProps): JSX.Element;
+export {};

package/dist/Card/index.d.ts

@@ -1 +1 @@
-export { Card } from "./Card";
+export { Card } from "./Card";

package/dist/Card/index.js

@@ -2,67 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var Card = require('../Card-368e01a3.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('classnames');
+require('../style-inject.es-dcee06b6.js');
+require('../Typography-7e542a72.js');
 
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
 
-var css = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U {\n  --card--border-color: var(--color-border);\n  display: block;\n  width: 100%;\n  border: var(--border-base) solid var(--card--border-color);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\n  background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * > * {\n  --public-content--padding: 0;\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U:active {\n  outline: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE {\n  border-top-width: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--card--accent-color);\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl {\n  --card--border-color: transparent;\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all var(--timing-quick) linear;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl:hover,\n._3rK5LR5T1LRokq5vsb0JUl:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1XhV_cQQhlcMC9ag5E9jhU {\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--card--base-padding);\n  background-color: var(--color-surface--background);\n}\n";
-var styles = {"card":"_2w-ENhwzKCQRe6WuvVd7_U","accent":"_1UYHkzg1Vo2DMU6bWTiDvE","clickable":"_3rK5LR5T1LRokq5vsb0JUl","header":"_1XhV_cQQhlcMC9ag5E9jhU"};
-__chunk_2.styleInject(css);
 
-var css$1 = ".r_dgHOkz2GHdC3Q2cV3Pc {\n  --card--accent-color: var(--color-request);\n}\n\n._3EeVP9ZlHkM67T9ehsWtiS {\n  --card--accent-color: var(--color-quote);\n}\n\n._2N_2zZDN_y6W1dNQQyiDD1 {\n  --card--accent-color: var(--color-job);\n}\n\n._3GJ2q1Nl3cRv1lTW0P_zy8 {\n  --card--accent-color: var(--color-invoice);\n}\n\n._161VC3xKoHBYl3xsD4Yk5Q {\n  --card--accent-color: var(--color-blue);\n}\n\n._1gsqssX3dl2yWj0j_amhkj {\n  --card--accent-color: var(--color-blue--light);\n}\n\n._1TpnTg56KtSblI8fq1MjCi {\n  --card--accent-color: var(--color-blue--lighter);\n}\n\n.UlRszMir3mXZDknqy0Abk {\n  --card--accent-color: var(--color-blue--lightest);\n}\n\n.P9izp-A51mdMpabQwRuqt {\n  --card--accent-color: var(--color-blue--dark);\n}\n\n._2l99yDkMjR7XcXHq_XVyH8 {\n  --card--accent-color: var(--color-green);\n}\n\n._2SkrMY6RSTz7fWg5CPRxzT {\n  --card--accent-color: var(--color-green--light);\n}\n\n._1vdTWAHTYlQQCxChtVS-yw {\n  --card--accent-color: var(--color-green--lighter);\n}\n\n._2sOy4nX4pbbxdxewOs9OZn {\n  --card--accent-color: var(--color-green--lightest);\n}\n\n._2gZKvEz3FhcYTKXCsVztS7 {\n  --card--accent-color: var(--color-green--dark);\n}\n\n._2vLmguA8ZEA1n7uxgA4tkk {\n  --card--accent-color: var(--color-lime);\n}\n\n._1Wblb5ohYF0-ivujrv9NEY {\n  --card--accent-color: var(--color-lime--light);\n}\n\n._2ZGzAB0rCWXLEOVn1CBQYO {\n  --card--accent-color: var(--color-lime--lighter);\n}\n\n._2TxRbAiT-8Dyt-tgiAevrI {\n  --card--accent-color: var(--color-lime--lightest);\n}\n\n._24D5a26PapvhrGT6_R7Plt {\n  --card--accent-color: var(--color-lime--lightest);\n}\n\n._1_KXzLi7tMLmSuO7tkz8rC {\n  --card--accent-color: var(--color-yellowGreen);\n}\n\n._2CAB-pkfwqd_XiChtfCSYy {\n  --card--accent-color: var(--color-yellowGreen--light);\n}\n\n._2B5XH-o7QyIoaDu49L4bX_ {\n  --card--accent-color: var(--color-yellowGreen--lighter);\n}\n\n._1aJejWyKFnG95oBw7IAcs8 {\n  --card--accent-color: var(--color-yellowGreen--lightest);\n}\n\n._2XXk2rw-Y1JcqRsT8mFp5v {\n  --card--accent-color: var(--color-yellowGreen--dark);\n}\n\n._8dx0L8-SrE4ImcX9Rl3as {\n  --card--accent-color: var(--color-yellow);\n}\n\n._2QfJFx3-339F1Q215RSshy {\n  --card--accent-color: var(--color-yellow--light);\n}\n\n._3gCDjm-vKX3twHglK9LwT- {\n  --card--accent-color: var(--color-yellow--lighter);\n}\n\n._2KhIbUKkv8u4sx_SuyDleK {\n  --card--accent-color: var(--color-yellow--lightest);\n}\n\n._1u9HBnFELEqNBHeuXTy9ps {\n  --card--accent-color: var(--color-yellow--dark);\n}\n\n._AEU5GBtZH_3TIgszszMe {\n  --card--accent-color: var(--color-red);\n}\n\n._2NYhsmxitOEfvezfJaXqGA {\n  --card--accent-color: var(--color-red--light);\n}\n\n._3QV7PNjGUVjSwFTVcuDf_0 {\n  --card--accent-color: var(--color-red--light);\n}\n\n._3wrq2b1m7NsWb_TzS_eiIt {\n  --card--accent-color: var(--color-red--lightest);\n}\n\n._3U59jf708Pwcs_aSJtTipT {\n  --card--accent-color: var(--color-red--dark);\n}\n\n._2NCZHNUXIs3ppH2qrDPeM8 {\n  --card--accent-color: var(--color-grey);\n}\n\n.N5o92y178VubSjAwkwUyS {\n  --card--accent-color: var(--color-grey--light);\n}\n\n.YltRUpnoZ7S4eHx-Q2UV6 {\n  --card--accent-color: var(--color-grey--lighter);\n}\n\n._1vM7z0o722ej-f_ltMTzR8 {\n  --card--accent-color: var(--color-grey--lightest);\n}\n\n._8v46HTaoXgGLohT6NTy0v {\n  --card--accent-color: var(--color-grey--dark);\n}\n\n._2pb3mcOJHCejnLR3kNbD22 {\n  --card--accent-color: var(--color-greyBlue);\n}\n\n._3pJ57Il3DK1Xzx_RlIqpuf {\n  --card--accent-color: var(--color-greyBlue--light);\n}\n\n._2DUbdjJZfKbjf3ZpctAKXj {\n  --card--accent-color: var(--color-greyBlue--lighter);\n}\n\n.Kdh-imIb5TC66KYwq8tG9 {\n  --card--accent-color: var(--color-greyBlue--lightest);\n}\n\n._14FKklm5UMKTMK4Z8I9TAk {\n  --card--accent-color: var(--color-greyBlue--dark);\n}\n\n._1vyUMGRr9oAcHC7Tu8ZHT9 {\n  --card--accent-color: var(--color-lightBlue);\n}\n\n._2Usil3CLjYNeb2kl6QilfC {\n  --card--accent-color: var(--color-lightBlue--light);\n}\n\n._3cVEdvqmhh6PBHxfp6kUL0 {\n  --card--accent-color: var(--color-lightBlue--lighter);\n}\n\n.i1K9zoRkq5ZplwJTBx_vo {\n  --card--accent-color: var(--color-lightBlue--lightest);\n}\n\n._1wKCLUuUyDw1_4NoR1ekHO {\n  --card--accent-color: var(--color-lightBlue--dark);\n}\n\n._3WAaIt0-6hFQT1bMoX0mwi {\n  --card--accent-color: var(--color-purple);\n}\n\n.QpZZHQHrB4hnoKRZ2wNjz {\n  --card--accent-color: var(--color-purple--light);\n}\n\n._1Ub7hGuytNUccuEJ2X5Acv {\n  --card--accent-color: var(--color-purple--lighter);\n}\n\n.hymIYxPgCV3PIvD_Ondjp {\n  --card--accent-color: var(--color-purple--lightest);\n}\n\n._2crCrqXonteGFE2Hf-Tfvx {\n  --card--accent-color: var(--color-purple--dark);\n}\n\n.-g6rTwLn4m1FAUO49mioY {\n  --card--accent-color: var(--color-pink);\n}\n\n._4yv6DxuiEoLd8nrrwjCC {\n  --card--accent-color: var(--color-pink--light);\n}\n\n._100RQJoFttmRFhMCw38gUu {\n  --card--accent-color: var(--color-pink--lighter);\n}\n\n.Wc1i3XbBInziMOx93wDBB {\n  --card--accent-color: var(--color-pink--lightest);\n}\n\n._3yuKq7UN1aDxJYhTCR6J99 {\n  --card--accent-color: var(--color-pink--dark);\n}\n\n._3oRBowls0KnxqJowoZihtu {\n  --card--accent-color: var(--color-teal);\n}\n\n._3Z4AwddDWq_3Mcz2xPyosa {\n  --card--accent-color: var(--color-teal--light);\n}\n\n._28vjG1mUREHC1KVx-kMxuf {\n  --card--accent-color: var(--color-teal--lighter);\n}\n\n.dnkjVr7UsdJ5hN28dPV6b {\n  --card--accent-color: var(--color-teal--lightest);\n}\n\n._30XdXLAoG-gNb0qxVVZSD8 {\n  --card--accent-color: var(--color-teal--dark);\n}\n\n._2VAMx2aztJA5S1sv9Q-fVh {\n  --card--accent-color: var(--color-orange);\n}\n\n.rDMNMB30Ii4p_xhq2kz25 {\n  --card--accent-color: var(--color-orange--light);\n}\n\n._1LDult_2uUn_3VDWc-ue3y {\n  --card--accent-color: var(--color-orange--lighter);\n}\n\n._10wO5N-KbpiKsV5xOUcXVg {\n  --card--accent-color: var(--color-orange--lightest);\n}\n\n.I9P_EqDAopiuDL3-UP6je {\n  --card--accent-color: var(--color-orange--dark);\n}\n\n._3ggADng6sL844VFW5hPyrP {\n  --card--accent-color: var(--color-brown);\n}\n\n.lXjXpfqMTFoI9-Gs9ww-S {\n  --card--accent-color: var(--color-brown--light);\n}\n\n._3DSQwF6htRD_F8ALRW5J9W {\n  --card--accent-color: var(--color-brown--lighter);\n}\n\n._3FOJHytPm177LLRa_11Nhe {\n  --card--accent-color: var(--color-brown--lightest);\n}\n\n._3RDALwNqcDw8xsbuYnxgc0 {\n  --card--accent-color: var(--color-brown--dark);\n}\n\n.V5W6gnsrCZBBIcEzRoRK6 {\n  --card--accent-color: var(--color-navy);\n}\n\n.mpmbrEG0b5jIRXmBVm_u0 {\n  --card--accent-color: var(--color-navy--light);\n}\n\n._1dSMOcSX8Ct9uU_oFmBzU- {\n  --card--accent-color: var(--color-navy--lighter);\n}\n\n.iau6usSaWR1lOseSaQ6Mb {\n  --card--accent-color: var(--color-navy--lightest);\n}\n\n.xuzABp_idOntfLMcHC1iM {\n  --card--accent-color: var(--color-navy--dark);\n}\n\n._3LNoVS7soGOL7tbu-sWQkK {\n  --card--accent-color: var(--color-indigo);\n}\n\n._1J36IYwKKnRW7ZlJMDeTQF {\n  --card--accent-color: var(--color-indigo--light);\n}\n\n._3No5SJRwTROVhcyty0_IjV {\n  --card--accent-color: var(--color-indigo--lighter);\n}\n\n.BzH2uvC_IAWwyLR7NeB13 {\n  --card--accent-color: var(--color-indigo--lightest);\n}\n\n._2yhIWlInAlDfBkAAFAomOL {\n  --card--accent-color: var(--color-indigo--dark);\n}\n\n._3YEF2Q5g_Y_k8cpuZhTtTk {\n  --card--accent-color: var(--color-white);\n}\n";
-var colors = {"requestColor":"r_dgHOkz2GHdC3Q2cV3Pc","quoteColor":"_3EeVP9ZlHkM67T9ehsWtiS","jobColor":"_2N_2zZDN_y6W1dNQQyiDD1","invoiceColor":"_3GJ2q1Nl3cRv1lTW0P_zy8","blue":"_161VC3xKoHBYl3xsD4Yk5Q","blueLight":"_1gsqssX3dl2yWj0j_amhkj","blueLighter":"_1TpnTg56KtSblI8fq1MjCi","blueLightest":"UlRszMir3mXZDknqy0Abk","blueDark":"P9izp-A51mdMpabQwRuqt","green":"_2l99yDkMjR7XcXHq_XVyH8","greenLight":"_2SkrMY6RSTz7fWg5CPRxzT","greenLighter":"_1vdTWAHTYlQQCxChtVS-yw","greenLightest":"_2sOy4nX4pbbxdxewOs9OZn","greenDark":"_2gZKvEz3FhcYTKXCsVztS7","lime":"_2vLmguA8ZEA1n7uxgA4tkk","limeLight":"_1Wblb5ohYF0-ivujrv9NEY","limeLighter":"_2ZGzAB0rCWXLEOVn1CBQYO","limeLightest":"_2TxRbAiT-8Dyt-tgiAevrI","limeDark":"_24D5a26PapvhrGT6_R7Plt","yellowGreen":"_1_KXzLi7tMLmSuO7tkz8rC","yellowGreenLight":"_2CAB-pkfwqd_XiChtfCSYy","yellowGreenLighter":"_2B5XH-o7QyIoaDu49L4bX_","yellowGreenLightest":"_1aJejWyKFnG95oBw7IAcs8","yellowGreenDark":"_2XXk2rw-Y1JcqRsT8mFp5v","yellow":"_8dx0L8-SrE4ImcX9Rl3as","yellowLight":"_2QfJFx3-339F1Q215RSshy","yellowLighter":"_3gCDjm-vKX3twHglK9LwT-","yellowLightest":"_2KhIbUKkv8u4sx_SuyDleK","yellowDark":"_1u9HBnFELEqNBHeuXTy9ps","red":"_AEU5GBtZH_3TIgszszMe","redLight":"_2NYhsmxitOEfvezfJaXqGA","redLighter":"_3QV7PNjGUVjSwFTVcuDf_0","redLightest":"_3wrq2b1m7NsWb_TzS_eiIt","redDark":"_3U59jf708Pwcs_aSJtTipT","grey":"_2NCZHNUXIs3ppH2qrDPeM8","greyLight":"N5o92y178VubSjAwkwUyS","greyLighter":"YltRUpnoZ7S4eHx-Q2UV6","greyLightest":"_1vM7z0o722ej-f_ltMTzR8","greyDark":"_8v46HTaoXgGLohT6NTy0v","greyBlue":"_2pb3mcOJHCejnLR3kNbD22","greyBlueLight":"_3pJ57Il3DK1Xzx_RlIqpuf","greyBlueLighter":"_2DUbdjJZfKbjf3ZpctAKXj","greyBlueLightest":"Kdh-imIb5TC66KYwq8tG9","greyBlueDark":"_14FKklm5UMKTMK4Z8I9TAk","lightBlue":"_1vyUMGRr9oAcHC7Tu8ZHT9","lightBlueLight":"_2Usil3CLjYNeb2kl6QilfC","lightBlueLighter":"_3cVEdvqmhh6PBHxfp6kUL0","lightBlueLightest":"i1K9zoRkq5ZplwJTBx_vo","lightBlueDark":"_1wKCLUuUyDw1_4NoR1ekHO","purple":"_3WAaIt0-6hFQT1bMoX0mwi","purpleLight":"QpZZHQHrB4hnoKRZ2wNjz","purpleLighter":"_1Ub7hGuytNUccuEJ2X5Acv","purpleLightest":"hymIYxPgCV3PIvD_Ondjp","purpleDark":"_2crCrqXonteGFE2Hf-Tfvx","pink":"-g6rTwLn4m1FAUO49mioY","pinkLight":"_4yv6DxuiEoLd8nrrwjCC","pinkLighter":"_100RQJoFttmRFhMCw38gUu","pinkLightest":"Wc1i3XbBInziMOx93wDBB","pinkDark":"_3yuKq7UN1aDxJYhTCR6J99","teal":"_3oRBowls0KnxqJowoZihtu","tealLight":"_3Z4AwddDWq_3Mcz2xPyosa","tealLighter":"_28vjG1mUREHC1KVx-kMxuf","tealLightest":"dnkjVr7UsdJ5hN28dPV6b","tealDark":"_30XdXLAoG-gNb0qxVVZSD8","orange":"_2VAMx2aztJA5S1sv9Q-fVh","orangeLight":"rDMNMB30Ii4p_xhq2kz25","orangeLighter":"_1LDult_2uUn_3VDWc-ue3y","orangeLightest":"_10wO5N-KbpiKsV5xOUcXVg","orangeDark":"I9P_EqDAopiuDL3-UP6je","brown":"_3ggADng6sL844VFW5hPyrP","brownLight":"lXjXpfqMTFoI9-Gs9ww-S","brownLighter":"_3DSQwF6htRD_F8ALRW5J9W","brownLightest":"_3FOJHytPm177LLRa_11Nhe","brownDark":"_3RDALwNqcDw8xsbuYnxgc0","navy":"V5W6gnsrCZBBIcEzRoRK6","navyLight":"mpmbrEG0b5jIRXmBVm_u0","navyLighter":"_1dSMOcSX8Ct9uU_oFmBzU-","navyLightest":"iau6usSaWR1lOseSaQ6Mb","navyDark":"xuzABp_idOntfLMcHC1iM","indigo":"_3LNoVS7soGOL7tbu-sWQkK","indigoLight":"_1J36IYwKKnRW7ZlJMDeTQF","indigoLighter":"_3No5SJRwTROVhcyty0_IjV","indigoLightest":"BzH2uvC_IAWwyLR7NeB13","indigoDark":"_2yhIWlInAlDfBkAAFAomOL","white":"_3YEF2Q5g_Y_k8cpuZhTtTk"};
-__chunk_2.styleInject(css$1);
-
-var ENTER_KEY = "Enter";
-var SPACEBAR_KEY = " ";
-/**
- * This is only intended to be used in the Card component.
- * Please use `<Card onClick={onClick} />` component instead.
- */
-function CardClickable(_a) {
-    var className = _a.className, onClick = _a.onClick, children = _a.children;
-    var cardRef = React.useRef();
-    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
-    function isCardFocused() {
-        return document.activeElement === cardRef.current;
-    }
-    function handleKeyup(event) {
-        var _a;
-        var shouldClick = event.key === ENTER_KEY || event.key === SPACEBAR_KEY;
-        if (shouldClick && isCardFocused()) {
-            (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    }
-    function handleKeyDown(event) {
-        // Prevent page scroll when hitting spacebar while focused on a card
-        if (event.key === SPACEBAR_KEY && isCardFocused()) {
-            event.preventDefault();
-        }
-    }
-}
-
-function Card(_a) {
-    var accent = _a.accent, children = _a.children, onClick = _a.onClick, title = _a.title, url = _a.url, _b = _a.external, external = _b === void 0 ? false : _b;
-    var className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent]);
-    var cardContent = (React__default.createElement(React__default.Fragment, null,
-        title && (React__default.createElement("div", { className: styles.header },
-            React__default.createElement(index.Typography, { element: "h3", size: "large", textCase: "uppercase", fontWeight: "extraBold", textColor: "heading" }, title))),
-        children));
-    if (onClick) {
-        return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, cardContent));
-    }
-    else if (url) {
-        return (React__default.createElement("a", __chunk_1.__assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), cardContent));
-    }
-    else {
-        return React__default.createElement("div", { className: className }, cardContent);
-    }
-}
-
-exports.Card = Card;
+exports.Card = Card.Card;

package/dist/Card-368e01a3.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var Typography = require('./Typography-7e542a72.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U {\n  --card--border-color: var(--color-border);\n  display: block;\n  width: 100%;\n  border: var(--border-base) solid var(--card--border-color);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\n  background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * > * {\n  --public-content--padding: 0;\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U:active {\n  outline: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE {\n  border-top-width: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--card--accent-color);\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl {\n  --card--border-color: transparent;\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all var(--timing-quick) linear;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl:hover,\n._3rK5LR5T1LRokq5vsb0JUl:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1XhV_cQQhlcMC9ag5E9jhU {\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--card--base-padding);\n  background-color: var(--color-surface--background);\n}\n";
+var styles = {"card":"_2w-ENhwzKCQRe6WuvVd7_U","accent":"_1UYHkzg1Vo2DMU6bWTiDvE","clickable":"_3rK5LR5T1LRokq5vsb0JUl","header":"_1XhV_cQQhlcMC9ag5E9jhU"};
+styleInject_es.styleInject(css$1);
+
+var css = ".r_dgHOkz2GHdC3Q2cV3Pc {\n  --card--accent-color: var(--color-request);\n}\n\n._3EeVP9ZlHkM67T9ehsWtiS {\n  --card--accent-color: var(--color-quote);\n}\n\n._2N_2zZDN_y6W1dNQQyiDD1 {\n  --card--accent-color: var(--color-job);\n}\n\n._3GJ2q1Nl3cRv1lTW0P_zy8 {\n  --card--accent-color: var(--color-invoice);\n}\n\n._161VC3xKoHBYl3xsD4Yk5Q {\n  --card--accent-color: var(--color-blue);\n}\n\n._1gsqssX3dl2yWj0j_amhkj {\n  --card--accent-color: var(--color-blue--light);\n}\n\n._1TpnTg56KtSblI8fq1MjCi {\n  --card--accent-color: var(--color-blue--lighter);\n}\n\n.UlRszMir3mXZDknqy0Abk {\n  --card--accent-color: var(--color-blue--lightest);\n}\n\n.P9izp-A51mdMpabQwRuqt {\n  --card--accent-color: var(--color-blue--dark);\n}\n\n._2l99yDkMjR7XcXHq_XVyH8 {\n  --card--accent-color: var(--color-green);\n}\n\n._2SkrMY6RSTz7fWg5CPRxzT {\n  --card--accent-color: var(--color-green--light);\n}\n\n._1vdTWAHTYlQQCxChtVS-yw {\n  --card--accent-color: var(--color-green--lighter);\n}\n\n._2sOy4nX4pbbxdxewOs9OZn {\n  --card--accent-color: var(--color-green--lightest);\n}\n\n._2gZKvEz3FhcYTKXCsVztS7 {\n  --card--accent-color: var(--color-green--dark);\n}\n\n._2vLmguA8ZEA1n7uxgA4tkk {\n  --card--accent-color: var(--color-lime);\n}\n\n._1Wblb5ohYF0-ivujrv9NEY {\n  --card--accent-color: var(--color-lime--light);\n}\n\n._2ZGzAB0rCWXLEOVn1CBQYO {\n  --card--accent-color: var(--color-lime--lighter);\n}\n\n._2TxRbAiT-8Dyt-tgiAevrI {\n  --card--accent-color: var(--color-lime--lightest);\n}\n\n._24D5a26PapvhrGT6_R7Plt {\n  --card--accent-color: var(--color-lime--lightest);\n}\n\n._1_KXzLi7tMLmSuO7tkz8rC {\n  --card--accent-color: var(--color-yellowGreen);\n}\n\n._2CAB-pkfwqd_XiChtfCSYy {\n  --card--accent-color: var(--color-yellowGreen--light);\n}\n\n._2B5XH-o7QyIoaDu49L4bX_ {\n  --card--accent-color: var(--color-yellowGreen--lighter);\n}\n\n._1aJejWyKFnG95oBw7IAcs8 {\n  --card--accent-color: var(--color-yellowGreen--lightest);\n}\n\n._2XXk2rw-Y1JcqRsT8mFp5v {\n  --card--accent-color: var(--color-yellowGreen--dark);\n}\n\n._8dx0L8-SrE4ImcX9Rl3as {\n  --card--accent-color: var(--color-yellow);\n}\n\n._2QfJFx3-339F1Q215RSshy {\n  --card--accent-color: var(--color-yellow--light);\n}\n\n._3gCDjm-vKX3twHglK9LwT- {\n  --card--accent-color: var(--color-yellow--lighter);\n}\n\n._2KhIbUKkv8u4sx_SuyDleK {\n  --card--accent-color: var(--color-yellow--lightest);\n}\n\n._1u9HBnFELEqNBHeuXTy9ps {\n  --card--accent-color: var(--color-yellow--dark);\n}\n\n._AEU5GBtZH_3TIgszszMe {\n  --card--accent-color: var(--color-red);\n}\n\n._2NYhsmxitOEfvezfJaXqGA {\n  --card--accent-color: var(--color-red--light);\n}\n\n._3QV7PNjGUVjSwFTVcuDf_0 {\n  --card--accent-color: var(--color-red--light);\n}\n\n._3wrq2b1m7NsWb_TzS_eiIt {\n  --card--accent-color: var(--color-red--lightest);\n}\n\n._3U59jf708Pwcs_aSJtTipT {\n  --card--accent-color: var(--color-red--dark);\n}\n\n._2NCZHNUXIs3ppH2qrDPeM8 {\n  --card--accent-color: var(--color-grey);\n}\n\n.N5o92y178VubSjAwkwUyS {\n  --card--accent-color: var(--color-grey--light);\n}\n\n.YltRUpnoZ7S4eHx-Q2UV6 {\n  --card--accent-color: var(--color-grey--lighter);\n}\n\n._1vM7z0o722ej-f_ltMTzR8 {\n  --card--accent-color: var(--color-grey--lightest);\n}\n\n._8v46HTaoXgGLohT6NTy0v {\n  --card--accent-color: var(--color-grey--dark);\n}\n\n._2pb3mcOJHCejnLR3kNbD22 {\n  --card--accent-color: var(--color-greyBlue);\n}\n\n._3pJ57Il3DK1Xzx_RlIqpuf {\n  --card--accent-color: var(--color-greyBlue--light);\n}\n\n._2DUbdjJZfKbjf3ZpctAKXj {\n  --card--accent-color: var(--color-greyBlue--lighter);\n}\n\n.Kdh-imIb5TC66KYwq8tG9 {\n  --card--accent-color: var(--color-greyBlue--lightest);\n}\n\n._14FKklm5UMKTMK4Z8I9TAk {\n  --card--accent-color: var(--color-greyBlue--dark);\n}\n\n._1vyUMGRr9oAcHC7Tu8ZHT9 {\n  --card--accent-color: var(--color-lightBlue);\n}\n\n._2Usil3CLjYNeb2kl6QilfC {\n  --card--accent-color: var(--color-lightBlue--light);\n}\n\n._3cVEdvqmhh6PBHxfp6kUL0 {\n  --card--accent-color: var(--color-lightBlue--lighter);\n}\n\n.i1K9zoRkq5ZplwJTBx_vo {\n  --card--accent-color: var(--color-lightBlue--lightest);\n}\n\n._1wKCLUuUyDw1_4NoR1ekHO {\n  --card--accent-color: var(--color-lightBlue--dark);\n}\n\n._3WAaIt0-6hFQT1bMoX0mwi {\n  --card--accent-color: var(--color-purple);\n}\n\n.QpZZHQHrB4hnoKRZ2wNjz {\n  --card--accent-color: var(--color-purple--light);\n}\n\n._1Ub7hGuytNUccuEJ2X5Acv {\n  --card--accent-color: var(--color-purple--lighter);\n}\n\n.hymIYxPgCV3PIvD_Ondjp {\n  --card--accent-color: var(--color-purple--lightest);\n}\n\n._2crCrqXonteGFE2Hf-Tfvx {\n  --card--accent-color: var(--color-purple--dark);\n}\n\n.-g6rTwLn4m1FAUO49mioY {\n  --card--accent-color: var(--color-pink);\n}\n\n._4yv6DxuiEoLd8nrrwjCC {\n  --card--accent-color: var(--color-pink--light);\n}\n\n._100RQJoFttmRFhMCw38gUu {\n  --card--accent-color: var(--color-pink--lighter);\n}\n\n.Wc1i3XbBInziMOx93wDBB {\n  --card--accent-color: var(--color-pink--lightest);\n}\n\n._3yuKq7UN1aDxJYhTCR6J99 {\n  --card--accent-color: var(--color-pink--dark);\n}\n\n._3oRBowls0KnxqJowoZihtu {\n  --card--accent-color: var(--color-teal);\n}\n\n._3Z4AwddDWq_3Mcz2xPyosa {\n  --card--accent-color: var(--color-teal--light);\n}\n\n._28vjG1mUREHC1KVx-kMxuf {\n  --card--accent-color: var(--color-teal--lighter);\n}\n\n.dnkjVr7UsdJ5hN28dPV6b {\n  --card--accent-color: var(--color-teal--lightest);\n}\n\n._30XdXLAoG-gNb0qxVVZSD8 {\n  --card--accent-color: var(--color-teal--dark);\n}\n\n._2VAMx2aztJA5S1sv9Q-fVh {\n  --card--accent-color: var(--color-orange);\n}\n\n.rDMNMB30Ii4p_xhq2kz25 {\n  --card--accent-color: var(--color-orange--light);\n}\n\n._1LDult_2uUn_3VDWc-ue3y {\n  --card--accent-color: var(--color-orange--lighter);\n}\n\n._10wO5N-KbpiKsV5xOUcXVg {\n  --card--accent-color: var(--color-orange--lightest);\n}\n\n.I9P_EqDAopiuDL3-UP6je {\n  --card--accent-color: var(--color-orange--dark);\n}\n\n._3ggADng6sL844VFW5hPyrP {\n  --card--accent-color: var(--color-brown);\n}\n\n.lXjXpfqMTFoI9-Gs9ww-S {\n  --card--accent-color: var(--color-brown--light);\n}\n\n._3DSQwF6htRD_F8ALRW5J9W {\n  --card--accent-color: var(--color-brown--lighter);\n}\n\n._3FOJHytPm177LLRa_11Nhe {\n  --card--accent-color: var(--color-brown--lightest);\n}\n\n._3RDALwNqcDw8xsbuYnxgc0 {\n  --card--accent-color: var(--color-brown--dark);\n}\n\n.V5W6gnsrCZBBIcEzRoRK6 {\n  --card--accent-color: var(--color-navy);\n}\n\n.mpmbrEG0b5jIRXmBVm_u0 {\n  --card--accent-color: var(--color-navy--light);\n}\n\n._1dSMOcSX8Ct9uU_oFmBzU- {\n  --card--accent-color: var(--color-navy--lighter);\n}\n\n.iau6usSaWR1lOseSaQ6Mb {\n  --card--accent-color: var(--color-navy--lightest);\n}\n\n.xuzABp_idOntfLMcHC1iM {\n  --card--accent-color: var(--color-navy--dark);\n}\n\n._3LNoVS7soGOL7tbu-sWQkK {\n  --card--accent-color: var(--color-indigo);\n}\n\n._1J36IYwKKnRW7ZlJMDeTQF {\n  --card--accent-color: var(--color-indigo--light);\n}\n\n._3No5SJRwTROVhcyty0_IjV {\n  --card--accent-color: var(--color-indigo--lighter);\n}\n\n.BzH2uvC_IAWwyLR7NeB13 {\n  --card--accent-color: var(--color-indigo--lightest);\n}\n\n._2yhIWlInAlDfBkAAFAomOL {\n  --card--accent-color: var(--color-indigo--dark);\n}\n\n._3YEF2Q5g_Y_k8cpuZhTtTk {\n  --card--accent-color: var(--color-white);\n}\n";
+var colors = {"requestColor":"r_dgHOkz2GHdC3Q2cV3Pc","quoteColor":"_3EeVP9ZlHkM67T9ehsWtiS","jobColor":"_2N_2zZDN_y6W1dNQQyiDD1","invoiceColor":"_3GJ2q1Nl3cRv1lTW0P_zy8","blue":"_161VC3xKoHBYl3xsD4Yk5Q","blueLight":"_1gsqssX3dl2yWj0j_amhkj","blueLighter":"_1TpnTg56KtSblI8fq1MjCi","blueLightest":"UlRszMir3mXZDknqy0Abk","blueDark":"P9izp-A51mdMpabQwRuqt","green":"_2l99yDkMjR7XcXHq_XVyH8","greenLight":"_2SkrMY6RSTz7fWg5CPRxzT","greenLighter":"_1vdTWAHTYlQQCxChtVS-yw","greenLightest":"_2sOy4nX4pbbxdxewOs9OZn","greenDark":"_2gZKvEz3FhcYTKXCsVztS7","lime":"_2vLmguA8ZEA1n7uxgA4tkk","limeLight":"_1Wblb5ohYF0-ivujrv9NEY","limeLighter":"_2ZGzAB0rCWXLEOVn1CBQYO","limeLightest":"_2TxRbAiT-8Dyt-tgiAevrI","limeDark":"_24D5a26PapvhrGT6_R7Plt","yellowGreen":"_1_KXzLi7tMLmSuO7tkz8rC","yellowGreenLight":"_2CAB-pkfwqd_XiChtfCSYy","yellowGreenLighter":"_2B5XH-o7QyIoaDu49L4bX_","yellowGreenLightest":"_1aJejWyKFnG95oBw7IAcs8","yellowGreenDark":"_2XXk2rw-Y1JcqRsT8mFp5v","yellow":"_8dx0L8-SrE4ImcX9Rl3as","yellowLight":"_2QfJFx3-339F1Q215RSshy","yellowLighter":"_3gCDjm-vKX3twHglK9LwT-","yellowLightest":"_2KhIbUKkv8u4sx_SuyDleK","yellowDark":"_1u9HBnFELEqNBHeuXTy9ps","red":"_AEU5GBtZH_3TIgszszMe","redLight":"_2NYhsmxitOEfvezfJaXqGA","redLighter":"_3QV7PNjGUVjSwFTVcuDf_0","redLightest":"_3wrq2b1m7NsWb_TzS_eiIt","redDark":"_3U59jf708Pwcs_aSJtTipT","grey":"_2NCZHNUXIs3ppH2qrDPeM8","greyLight":"N5o92y178VubSjAwkwUyS","greyLighter":"YltRUpnoZ7S4eHx-Q2UV6","greyLightest":"_1vM7z0o722ej-f_ltMTzR8","greyDark":"_8v46HTaoXgGLohT6NTy0v","greyBlue":"_2pb3mcOJHCejnLR3kNbD22","greyBlueLight":"_3pJ57Il3DK1Xzx_RlIqpuf","greyBlueLighter":"_2DUbdjJZfKbjf3ZpctAKXj","greyBlueLightest":"Kdh-imIb5TC66KYwq8tG9","greyBlueDark":"_14FKklm5UMKTMK4Z8I9TAk","lightBlue":"_1vyUMGRr9oAcHC7Tu8ZHT9","lightBlueLight":"_2Usil3CLjYNeb2kl6QilfC","lightBlueLighter":"_3cVEdvqmhh6PBHxfp6kUL0","lightBlueLightest":"i1K9zoRkq5ZplwJTBx_vo","lightBlueDark":"_1wKCLUuUyDw1_4NoR1ekHO","purple":"_3WAaIt0-6hFQT1bMoX0mwi","purpleLight":"QpZZHQHrB4hnoKRZ2wNjz","purpleLighter":"_1Ub7hGuytNUccuEJ2X5Acv","purpleLightest":"hymIYxPgCV3PIvD_Ondjp","purpleDark":"_2crCrqXonteGFE2Hf-Tfvx","pink":"-g6rTwLn4m1FAUO49mioY","pinkLight":"_4yv6DxuiEoLd8nrrwjCC","pinkLighter":"_100RQJoFttmRFhMCw38gUu","pinkLightest":"Wc1i3XbBInziMOx93wDBB","pinkDark":"_3yuKq7UN1aDxJYhTCR6J99","teal":"_3oRBowls0KnxqJowoZihtu","tealLight":"_3Z4AwddDWq_3Mcz2xPyosa","tealLighter":"_28vjG1mUREHC1KVx-kMxuf","tealLightest":"dnkjVr7UsdJ5hN28dPV6b","tealDark":"_30XdXLAoG-gNb0qxVVZSD8","orange":"_2VAMx2aztJA5S1sv9Q-fVh","orangeLight":"rDMNMB30Ii4p_xhq2kz25","orangeLighter":"_1LDult_2uUn_3VDWc-ue3y","orangeLightest":"_10wO5N-KbpiKsV5xOUcXVg","orangeDark":"I9P_EqDAopiuDL3-UP6je","brown":"_3ggADng6sL844VFW5hPyrP","brownLight":"lXjXpfqMTFoI9-Gs9ww-S","brownLighter":"_3DSQwF6htRD_F8ALRW5J9W","brownLightest":"_3FOJHytPm177LLRa_11Nhe","brownDark":"_3RDALwNqcDw8xsbuYnxgc0","navy":"V5W6gnsrCZBBIcEzRoRK6","navyLight":"mpmbrEG0b5jIRXmBVm_u0","navyLighter":"_1dSMOcSX8Ct9uU_oFmBzU-","navyLightest":"iau6usSaWR1lOseSaQ6Mb","navyDark":"xuzABp_idOntfLMcHC1iM","indigo":"_3LNoVS7soGOL7tbu-sWQkK","indigoLight":"_1J36IYwKKnRW7ZlJMDeTQF","indigoLighter":"_3No5SJRwTROVhcyty0_IjV","indigoLightest":"BzH2uvC_IAWwyLR7NeB13","indigoDark":"_2yhIWlInAlDfBkAAFAomOL","white":"_3YEF2Q5g_Y_k8cpuZhTtTk"};
+styleInject_es.styleInject(css);
+
+var ENTER_KEY = "Enter";
+var SPACEBAR_KEY = " ";
+/**
+ * This is only intended to be used in the Card component.
+ * Please use `<Card onClick={onClick} />` component instead.
+ */
+function CardClickable(_a) {
+    var className = _a.className, onClick = _a.onClick, children = _a.children;
+    var cardRef = React.useRef();
+    return (React__default["default"].createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    function isCardFocused() {
+        return document.activeElement === cardRef.current;
+    }
+    function handleKeyup(event) {
+        var _a;
+        var shouldClick = event.key === ENTER_KEY || event.key === SPACEBAR_KEY;
+        if (shouldClick && isCardFocused()) {
+            (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }
+    function handleKeyDown(event) {
+        // Prevent page scroll when hitting spacebar while focused on a card
+        if (event.key === SPACEBAR_KEY && isCardFocused()) {
+            event.preventDefault();
+        }
+    }
+}
+
+function Card(_a) {
+    var accent = _a.accent, children = _a.children, onClick = _a.onClick, title = _a.title, url = _a.url, _b = _a.external, external = _b === void 0 ? false : _b;
+    var className = classnames__default["default"](styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent]);
+    var cardContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
+        title && (React__default["default"].createElement("div", { className: styles.header },
+            React__default["default"].createElement(Typography.Typography, { element: "h3", size: "large", textCase: "uppercase", fontWeight: "extraBold", textColor: "heading" }, title))),
+        children));
+    if (onClick) {
+        return (React__default["default"].createElement(CardClickable, { className: className, onClick: onClick }, cardContent));
+    }
+    else if (url) {
+        return (React__default["default"].createElement("a", tslib_es6.__assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), cardContent));
+    }
+    else {
+        return React__default["default"].createElement("div", { className: className }, cardContent);
+    }
+}
+
+exports.Card = Card;