@jobber/components 4.58.2-hackathon.5 → 4.58.2

package/dist/Button-114b5e41.js

@@ -1,337 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var reactRouterDom = require('react-router-dom');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
-var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-83915c54.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_248z$3 = ":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: var(--timing-loading--extended);\n}\n\n.U9VsquOtk2I- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: calc(16px / 16) solid rgb(125, 176, 14);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  letter-spacing: calc(16px / 40);\n  letter-spacing: var(--typography--letterSpacing-loose);\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n          appearance: none;\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.U9VsquOtk2I- * {\n  fill: inherit !important;\n}\n\n.U9VsquOtk2I- * {\n  color: inherit;\n  /* required to over-ride very specific fill from <Icon> */\n}\n\n.U9VsquOtk2I-:hover,\na.U9VsquOtk2I-:hover,\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  border-color: rgb(81, 114, 9);\n  border-color: var(--button--color-variation--hover);\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n.qkFQwI0PKfw- {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n.jsKQEOBdJ0k- {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._4W8X0dxZDK4- {\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.vDKO-cmh8vY- {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-),\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  color: rgba(255, 255, 255, 1);\n  color: var(--button--color-primaryLabel);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--button--color-variation);\n  fill: rgba(255, 255, 255, 1);\n  fill: var(--button--color-primaryLabel);\n}\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  background-color: rgb(81, 114, 9);\n  background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  border-color: rgb(125, 176, 14);\n  border-color: var(--button--color-variation);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus {\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk- {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\n.vDKO-cmh8vY-.m7DbwRZWcNk-:focus,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus {\n  border-color: transparent;\n  color: rgb(66, 78, 86);\n  color: var(--color-interactive--subtle--hover);\n  fill: rgb(66, 78, 86);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.U9VsquOtk2I-.bg-l22drjd0-,\na.U9VsquOtk2I-.bg-l22drjd0-,\n.U9VsquOtk2I-.bg-l22drjd0-:hover,\na.U9VsquOtk2I-.bg-l22drjd0-:hover {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  fill: rgb(181, 181, 181);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n  min-height: calc(16px * 1.5);\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  letter-spacing: 0;\n}\n\n.amIh7vPETfo- {\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc((16px * 1) - 4px);\n  padding: 0 calc(calc(16px * 1) - 4px);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n.ON6ezOojFVo- {\n  min-height: calc(16px * 3);\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 calc(16px * 1);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.Qq-idRLJTCk- {\n  width: calc(16px * 2.25);\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n  width: calc((16px / 2) * 3);\n  width: calc(calc(16px / 2) * 3);\n  width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n  width: calc((16px * 1) * 2.25);\n  width: calc(calc(16px * 1) * 2.25);\n  width: calc(var(--space-base) * 2.25);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n  width: calc((16px * 1.5) * 2);\n  width: calc(calc(16px * 1.5) * 2);\n  width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n  width: auto;\n}\n\n.EWh1gvgPJQg- > * {\n  text-align: left;\n}\n\n.EWh1gvgPJQg- > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.pfzTUMgNb3o- > *:first-child {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.ZCHqCEyLBw0- {\n  width: 100%;\n}\n\n.VVFKEv1ksMA- {\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: calc(16px * 2) calc(16px * 2);\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2000ms;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2000ms;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: a8Q-0lnKH5M-;\n          animation-name: a8Q-0lnKH5M-;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n.FXqN12jWtPo-.VVFKEv1ksMA-:not(.vDKO-cmh8vY-) {\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 a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
-var styles$3 = {"button":"U9VsquOtk2I-","work":"qkFQwI0PKfw-","learning":"jsKQEOBdJ0k-","destructive":"_4W8X0dxZDK4-","subtle":"vDKO-cmh8vY-","primary":"FXqN12jWtPo-","disabled":"bg-l22drjd0-","secondary":"pf6G840lKdA-","tertiary":"m7DbwRZWcNk-","small":"STSDgSRREx4-","base":"amIh7vPETfo-","large":"ON6ezOojFVo-","onlyIcon":"Qq-idRLJTCk-","hasIconAndLabel":"EWh1gvgPJQg-","iconOnRight":"pfzTUMgNb3o-","fullWidth":"ZCHqCEyLBw0-","loading":"VVFKEv1ksMA-","animateStripes":"a8Q-0lnKH5M-"};
-styleInject_es.styleInject(css_248z$3);
-
-var css_248z$2 = "._0Ny8u1tbZxI- {\n  margin-right: 3.5px;\n\n  -webkit-transform: translateY(0px);\n\n          transform: translateY(0px);\n  transition: -webkit-transform ease-in-out 0.2s;\n  transition: transform ease-in-out 0.2s;\n  transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\n}\n.XmAxSewWeOY- {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 800;\n  line-height: 1.25;\n  line-height: var(--typography--lineHeight-base);\n  -webkit-transform: translateY(0px);\n          transform: translateY(0px);\n  transition: -webkit-transform ease-in-out 0.2s;\n  transition: transform ease-in-out 0.2s;\n  transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\n}\n.Gl1xZCG4GqA- {\n  -webkit-transform: translateY(28px);\n          transform: translateY(28px);\n  transition: -webkit-transform ease-in 0.2s;\n  transition: transform ease-in 0.2s;\n  transition: transform ease-in 0.2s, -webkit-transform ease-in 0.2s;\n}\n.uvTy02yJMII- {\n  -webkit-transform: translateY(-28px);\n          transform: translateY(-28px);\n  transition: -webkit-transform ease-in-out 0.1s;\n  transition: transform ease-in-out 0.1s;\n  transition: transform ease-in-out 0.1s, -webkit-transform ease-in-out 0.1s;\n}\n";
-var styles$2 = {"space":"_0Ny8u1tbZxI-","span":"XmAxSewWeOY-","drop":"Gl1xZCG4GqA-","explode":"uvTy02yJMII-"};
-styleInject_es.styleInject(css_248z$2);
-
-var css_248z$1 = ".wA6kerwVqc0- {\n  position: absolute;\n  z-index: 0;\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n}\n";
-var styles$1 = {"particle":"wA6kerwVqc0-"};
-styleInject_es.styleInject(css_248z$1);
-
-const schemes$1 = {
-    all: [
-        `var(--color-brand)`,
-        `var(--color-indigo)`,
-        `var(--color-blue)`,
-        `var(--color-yellow)`,
-        `var(--color-red)`,
-        `var(--color-lightBlue)`,
-        `var(--color-pink)`,
-        `var(--color-teal)`,
-        `var(--color-orange)`,
-    ],
-    strongBrand: [
-        `var(--color-brand)`,
-        `var(--color-indigo)`,
-        `var(--color-blue)`,
-    ],
-    redIsh: [`var(--color-orange)`, `var(--color-yellow)`, `var(--color-red)`],
-};
-const Particle = ({ enabled, scheme, }) => {
-    const fireworkProps = () => {
-        const xDirection = Math.random() * 350;
-        const yDirection = Math.random() * 150 + 75;
-        const xFlip = Math.random() > 0.5 ? -1 : 1;
-        return { xDirection, yDirection, xFlip };
-    };
-    const particleProps = React.useMemo(() => {
-        const colors = schemes$1[scheme];
-        const colorPick = Math.floor(Math.random() * (colors === null || colors === void 0 ? void 0 : colors.length));
-        const particleID = "id" + Math.floor(Math.random() * 100000);
-        const { xDirection, yDirection, xFlip } = fireworkProps();
-        return {
-            x: xDirection * xFlip,
-            y: yDirection * -1,
-            color: colors[colorPick],
-            id: particleID,
-        };
-    }, []);
-    const classes = classnames__default["default"](styles$1.particle, {
-        [`cl-${particleProps.id}`]: enabled,
-        "hi!": enabled,
-    });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("style", null, `
-            .cl-${particleProps.id} {
-                animation: ${particleProps.id};
-            }
-            @keyframes ${particleProps.id} {
-                 0% {
-                      transform: translateX(0px) translateY(-5px);
-                      opacity:0;
-                      background-color:${particleProps.color};
-                    }
-                        1% {
-                            opacity:1;
-                        }
-                        50% {
-                            transform: translateX(${particleProps.x}px) translateY(${particleProps.y}px);
-                        }
-                        61% {
-                            opacity:0;
-                        }
-                       100% {
-                            opacity:0;
-                            transform: translate(0,-25px);
-                        }
-                    }
-                `),
-        React__default["default"].createElement("div", { className: classes, style: {
-                animationDuration: "1.2s",
-                opacity: 0,
-                backgroundColor: particleProps.color,
-            } })));
-};
-
-const schemes = {
-    all: [
-        `var(--color-brand)`,
-        `var(--color-indigo)`,
-        `var(--color-blue)`,
-        `var(--color-yellow)`,
-        `var(--color-red)`,
-        `var(--color-lightBlue)`,
-        `var(--color-pink)`,
-        `var(--color-teal)`,
-        `var(--color-orange)`,
-    ],
-    strongBrand: [
-        `var(--color-brand)`,
-        `var(--color-indigo)`,
-        `var(--color-blue)`,
-    ],
-    redIsh: [`var(--color-orange)`, `var(--color-yellow)`, `var(--color-red)`],
-};
-const OutParticle = ({ enabled, scheme, }) => {
-    const confettiProps = () => {
-        const xDirection = Math.random() * 200;
-        const yDirection = Math.random() * 150;
-        const xFlip = Math.random() > 0.5 ? -1 : 1;
-        const yFlip = Math.random() > 0.5 ? -1 : 1;
-        const scale = Math.random() * 20;
-        return { xDirection, yDirection, xFlip, yFlip, scale };
-    };
-    const particleProps = React.useMemo(() => {
-        const colors = schemes[scheme];
-        const colorPick = Math.floor(Math.random() * (colors === null || colors === void 0 ? void 0 : colors.length));
-        const particleID = "id" + Math.floor(Math.random() * 100000);
-        const { xDirection, yDirection, xFlip, yFlip, scale } = confettiProps();
-        return {
-            x: xDirection * xFlip,
-            y: yDirection * yFlip,
-            color: colors[colorPick],
-            scale,
-            id: particleID,
-        };
-    }, []);
-    const classes = classnames__default["default"](styles$1.particle, {
-        [`cl-${particleProps.id}`]: enabled,
-    });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("style", null, `
-            .cl-${particleProps.id} {
-                animation: ${particleProps.id};
-            }
-            @keyframes ${particleProps.id} {
-                 0% {
-                            transform: translateX(0px) translateY(0px) scale(0);
-                      opacity:0;
-                      background-color:${particleProps.color};
-                    }
-                        1% {
-                            opacity:1;
-                        }
-                        20% {
-                            transform: translateX(${particleProps.x / 1.05}px) translateY(${particleProps.y / 1.05}px) scale(${particleProps.scale - 0.1});
-                        }
-                        60% {
-                            transform: translateX(${particleProps.x}px) translateY(${particleProps.y}px) scale(${particleProps.scale});
-                        }
-                        61% {
-                          opacity:0;
-                        }
-                       100% {
-                            opacity:0;
-                        }
-                    }
-                `),
-        React__default["default"].createElement("div", { className: classes, style: {
-                animationDuration: "2.2s",
-                animationTimingFunction: "ease-in-out",
-                backgroundColor: particleProps.color,
-            } })));
-};
-
-const Boom = ({ enabled, particles = 50, boomType = "firework", scheme = "all", }) => {
-    const [particleAmount] = React.useState(particles);
-    const [particlesEnabled, setParticlesEnabled] = React.useState(false);
-    const [loopArray] = React.useState(Array.from({ length: particleAmount }));
-    React.useEffect(() => {
-        if (enabled) {
-            requestAnimationFrame(() => {
-                setParticlesEnabled(true);
-            });
-        }
-        else {
-            setParticlesEnabled(false);
-        }
-    }, [enabled]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, enabled &&
-        loopArray.map((_, index) => {
-            return boomType === "firework" ? (React__default["default"].createElement(Particle, { key: index, enabled: particlesEnabled, scheme: scheme })) : (React__default["default"].createElement(OutParticle, { key: index, enabled: particlesEnabled, scheme: scheme }));
-        })));
-};
-
-const ButtonDelight = (props) => {
-    const [delightOn, setDelightOn] = React.useState(false);
-    const [explodeOn, setExplodeOn] = React.useState(false);
-    const [boomEnabled, setBoomEnabled] = React.useState(false);
-    const [splitWord, setSplitWord] = React.useState([]);
-    const delightfulButton = React.useRef(null);
-    const goGoDelight = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        const elem = delightfulButton.current;
-        if (elem && splitWord.length === 0) {
-            const words = elem.innerText;
-            const letters = words.split("");
-            setSplitWord(letters);
-            requestAnimationFrame(() => {
-                setDelightOn(true);
-            });
-            const delay = letters.length * 30;
-            setTimeout(() => {
-                setDelightOn(false);
-                setExplodeOn(true);
-                setTimeout(() => {
-                    setBoomEnabled(true);
-                    setTimeout(() => {
-                        setBoomEnabled(false);
-                    }, 1300);
-                }, 20);
-                setTimeout(() => {
-                    setExplodeOn(false);
-                    setTimeout(() => {
-                        setSplitWord([]);
-                    }, 200);
-                }, delay);
-            }, delay);
-        }
-    });
-    const delightfulClick = (e) => {
-        goGoDelight();
-        setTimeout(() => {
-            if (props.onClick && !props.href) {
-                props.onClick(e);
-            }
-            else if (props.onClick && props.href) {
-                window.location.href = props.href;
-            }
-        }, 1500);
-    };
-    return (React__default["default"].createElement("button", Object.assign({}, props, { onClick: delightfulClick, type: "button", ref: delightfulButton }),
-        React__default["default"].createElement(Boom, { enabled: boomEnabled, particles: 150, boomType: "firework" }),
-        splitWord.length === 0
-            ? props.children
-            : splitWord.map((letter, index) => {
-                const spanClassNames = classnames__default["default"](styles$2.span, {
-                    [styles$2.space]: letter === " ",
-                    [styles$2.drop]: delightOn,
-                    [styles$2.explode]: explodeOn,
-                });
-                return (React__default["default"].createElement("span", { key: index, className: spanClassNames, style: {
-                        transitionDelay: delightOn ? String(index / 100) + "s" : "0s",
-                    } }, letter));
-            })));
-};
-
-var css_248z = ".kUL5UIN4awA- {\n  -webkit-transform: scale(0.9);\n          transform: scale(0.9);\n  transition: -webkit-transform ease-in-out 0.2s;\n  transition: transform ease-in-out 0.2s;\n  transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\n}\n";
-var styles = {"shrink":"kUL5UIN4awA-"};
-styleInject_es.styleInject(css_248z);
-
-const ButtonConfettiDelight = (props) => {
-    const delightfulButton = React.useRef(null);
-    const [shrink, setShrink] = React.useState(false);
-    const [confetti, setConfetti] = React.useState(false);
-    const delightfulClick = () => {
-        setConfetti(false);
-        setShrink(true);
-        setTimeout(() => {
-            setShrink(false);
-            setConfetti(true);
-            setTimeout(() => {
-                setConfetti(false);
-            }, 2300);
-        }, 150);
-    };
-    const classes = classnames__default["default"](props.className, {
-        [styles.shrink]: shrink,
-    });
-    return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement("button", Object.assign({}, props, { onClick: delightfulClick, type: "button", ref: delightfulButton, className: classes }),
-            React__default["default"].createElement(Boom, { enabled: confetti, particles: 30, boomType: "confetti", scheme: "strongBrand" }),
-            props.children)));
-};
-
-function Button(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, delight, delightType = "firework", disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, role, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
-    const buttonClassNames = classnames__default["default"](styles$3.button, styles$3[size], {
-        [styles$3.onlyIcon]: icon && !label,
-        [styles$3.hasIconAndLabel]: icon && label,
-        [styles$3.iconOnRight]: iconOnRight,
-        [styles$3[variation]]: variation,
-        [styles$3[type]]: type,
-        [styles$3.disabled]: disabled,
-        [styles$3.fullWidth]: fullWidth,
-        [styles$3.loading]: loading,
-    });
-    const buttonType = submit ? "submit" : "button";
-    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
-        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, role: role });
-    const buttonInternals = React__default["default"].createElement(ButtonInternals, Object.assign({}, props));
-    if (to) {
-        return (React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
-    }
-    let Tag = url
-        ? "a"
-        : "button";
-    if (delight && delightType === "firework") {
-        Tag = ButtonDelight;
-    }
-    else if (delight && delightType === "confetti") {
-        Tag = ButtonConfettiDelight;
-    }
-    return React__default["default"].createElement(Tag, Object.assign({}, tagProps), buttonInternals);
-}
-function ButtonInternals({ label, icon, size = "base" }) {
-    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", fontWeight: "extraBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
-}
-function getTypeSizes(size) {
-    switch (size) {
-        case "small":
-            return "small";
-        case "large":
-            return "large";
-        default:
-            return "base";
-    }
-}
-
-exports.Button = Button;

package/dist/Spinner-0070bf23.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.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_248z = ".uoU-LfjFDv0- {\n  width: calc(16px * 2);\n  width: var(--space-larger);\n  height: calc(16px * 2);\n  height: var(--space-larger);\n  box-shadow: 0px 0px 4px 2px rgba(1, 41, 57, 0.4);\n  border: solid rgb(77, 105, 116);\n  border: solid var(--color-blue--light);\n  border-top-color: rgba(255, 255, 255, 1);\n  border-top-color: var(--color-white);\n  border-width: calc((16px / 2) * 0.75);\n  border-width: calc(calc(16px / 2) * 0.75);\n  border-width: calc(var(--space-small) * 0.75);\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n  -webkit-animation-duration: calc(500ms * 2);\n  -webkit-animation-duration: calc(var(--timing-slowest) * 2);\n          animation-duration: calc(500ms * 2);\n          animation-duration: calc(var(--timing-slowest) * 2);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _1aCKd5q9u34-;\n          animation-name: _1aCKd5q9u34-;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n  will-change: transform;\n}\n\n.azOEELEMb4U- {\n  width: 90px;\n  height: 90px;\n}\n\n@-webkit-keyframes _1aCKd5q9u34- {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(359deg);\n            transform: rotate(359deg);\n  }\n}\n\n@keyframes _1aCKd5q9u34- {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(359deg);\n            transform: rotate(359deg);\n  }\n}\n\n.cLRQwkSqnhA- {\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: calc(16px * 1);\n  height: var(--space-base);\n  border-width: calc(16px / 4);\n  border-width: var(--space-smaller);\n}\n\n.h6O4vDPCWOQ- {\n  display: inline-block;\n  margin-top: calc((16px / 4) * -1);\n  margin-top: calc(calc(16px / 4) * -1);\n  margin-top: calc(var(--space-smaller) * -1);\n  vertical-align: middle;\n}\n";
-var styles = {"spinner":"uoU-LfjFDv0-","animationSpin":"_1aCKd5q9u34-","industryGif":"azOEELEMb4U-","small":"cLRQwkSqnhA-","inline":"h6O4vDPCWOQ-"};
-styleInject_es.styleInject(css_248z);
-
-/* eslint-disable max-statements */
-function Spinner({ size = "base", inline, hasDelight }) {
-    const arboristGif = require("../Spinner/assets/Jobber_Arborist.gif");
-    const hvacGif = require("../Spinner/assets/Jobber_PressureGauge.gif");
-    const workVanGif = require("../Spinner/assets/Jobber_WorkVan.gif");
-    const landscapingGif = require("../Spinner/assets/Jobber_Bobcat.gif");
-    const chainsawGif = require("../Spinner/assets/Jobber_Chainsaw.gif");
-    const plumbingGif = require("../Spinner/assets/Jobber_PipeWrench.gif");
-    const powerdrillGif = require("../Spinner/assets/Jobber_PowerDrill.gif");
-    const windowCleaningGif = require("../Spinner/assets/Jobber_WaterLogo.gif");
-    let selectedGif;
-    switch (hasDelight) {
-        case "arborist":
-            selectedGif = arboristGif;
-            break;
-        case "pressureGauge":
-            selectedGif = hvacGif;
-            break;
-        case "workVan":
-            selectedGif = workVanGif;
-            break;
-        case "landscaping":
-            selectedGif = landscapingGif;
-            break;
-        case "chainsaw":
-            selectedGif = chainsawGif;
-            break;
-        case "plumbing":
-            selectedGif = plumbingGif;
-            break;
-        case "powerDrill":
-            selectedGif = powerdrillGif;
-            break;
-        case "windowCleaning":
-            selectedGif = windowCleaningGif;
-            break;
-    }
-    if (hasDelight) {
-        return (React__default["default"].createElement("img", { src: selectedGif, alt: "Loading", className: styles.industryGif, role: "alert", "aria-busy": true, "aria-label": "loading" }));
-    }
-    const spinnerStyles = classnames__default["default"](styles.spinner, {
-        [styles.small]: size === "small",
-        [styles.inline]: inline,
-    });
-    return (React__default["default"].createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
-}
-
-exports.Spinner = Spinner;