@jobber/components 4.87.11-JOB-91526-.8 → 4.89.0

package/dist/DataList/index.js

@@ -15,7 +15,7 @@ var Tooltip = require('../Tooltip-b9de6e57.js');
 var Button = require('../Button-6b922fc1.js');
 var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-4d463bd6.js');
+var InlineLabel = require('../InlineLabel-c8fc28f0.js');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');

package/dist/InlineLabel/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InlineLabel = require('../InlineLabel-4d463bd6.js');
+var InlineLabel = require('../InlineLabel-c8fc28f0.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/InlineLabel-c8fc28f0.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Typography = require('./Typography-e2a23b7e.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 = ".S72WkdRbhc0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.bMWuAXJHkbw- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- span {\n  line-height: 0.75rem;\n}\n\n.ui07veHjPII- {\n  padding: calc((16px / 2) * 1.25) calc((16px / 2) * 1.5);\n  padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 2) * 1.5);\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-small) * 1.5);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n}\n\n.ui07veHjPII- span {\n  line-height: 1rem;\n}\n\n.WIXhLSQ7z8A- {\n  padding: calc((16px / 2) * 1.5) calc((16px * 1));\n  padding: calc(calc(16px / 2) * 1.5) calc(calc(16px * 1));\n  padding: calc(var(--space-small) * 1.5) calc(var(--space-base));\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n}\n\n.WIXhLSQ7z8A- span {\n  line-height: 1rem;\n}\n\n._8RuKvOhj-Ro- {\n  color: rgb(66, 78, 86);\n  color: var(--color-greyBlue--dark);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n  color: rgb(128, 25, 0);\n  color: var(--color-red--dark);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n  color: rgb(158, 98, 23);\n  color: var(--color-orange--dark);\n  background-color: rgb(253, 239, 222);\n  background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n  color: rgb(81, 114, 9);\n  color: var(--color-green--dark);\n  background-color: rgb(236, 243, 219);\n  background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n  color: rgb(1, 27, 37);\n  color: var(--color-blue--dark);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n  color: rgb(49, 69, 98);\n  color: var(--color-navy--dark);\n  background-color: rgb(228, 233, 239);\n  background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n  color: rgb(144, 127, 10);\n  color: var(--color-yellow--dark);\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n  color: rgb(99, 125, 46);\n  color: var(--color-lime--dark);\n  background-color: rgb(240, 246, 227);\n  background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n  color: rgb(88, 73, 127);\n  color: var(--color-purple--dark);\n  background-color: rgb(237, 234, 246);\n  background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n  color: rgb(116, 62, 98);\n  color: var(--color-pink--dark);\n  background-color: rgb(244, 231, 239);\n  background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n  color: rgb(40, 112, 95);\n  color: var(--color-teal--dark);\n  background-color: rgb(226, 243, 239);\n  background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n  color: rgb(122, 128, 21);\n  color: var(--color-yellowGreen--dark);\n  background-color: rgb(245, 246, 222);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n  color: rgb(39, 105, 146);\n  color: var(--color-lightBlue--dark);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n  color: rgb(55, 69, 132);\n  color: var(--color-indigo--dark);\n  background-color: rgb(230, 233, 247);\n  background-color: var(--color-indigo--lightest);\n}\n";
+var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
+styleInject_es.styleInject(css_248z);
+
+function InlineLabel({ size = "base", color = "greyBlue", children, }) {
+    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
+    const sizeMapper = {
+        base: "small",
+        large: "large",
+        larger: "large",
+    };
+    return (React__default["default"].createElement("span", { className: className },
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
+}
+
+exports.InlineLabel = InlineLabel;

package/dist/InputDate/InputDate.d.ts

@@ -23,7 +23,7 @@ interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<F
     /**
      * Text to display instead of a date value
      */
-    readonly emptyValuePlaceholder?: string;
+    readonly emptyValueLabel?: string;
 }
 export declare function InputDate(inputProps: InputDateProps): JSX.Element;
 export {};

package/dist/InputDate/index.js

@@ -49,7 +49,7 @@ function InputDate(inputProps) {
             return (
             // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
             React__default["default"].createElement("div", { onClick: onClick },
-                React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyPlaceholder ? inputProps.emptyValuePlaceholder : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
+                React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyPlaceholder ? inputProps.emptyValueLabel : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                         setShowEmptyPlaceholder(false);
                     }, onBlur: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.87.11-JOB-91526-.8+54fc6d88",
+  "version": "4.89.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.56.0",
-    "@jobber/formatters": "^0.2.2",
+    "@jobber/formatters": "*",
     "@jobber/hooks": "^2.9.4",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -82,5 +82,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "54fc6d8847a17e457114e3388edebc8d11c7e847"
+  "gitHead": "e4e34e98398b726ec5c349d6287bdc00eac5f209"
 }

package/dist/InlineLabel-4d463bd6.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Typography = require('./Typography-e2a23b7e.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 = ".S72WkdRbhc0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n  padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n  padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n  color: rgb(66, 78, 86);\n  color: var(--color-greyBlue--dark);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n  color: rgb(128, 25, 0);\n  color: var(--color-red--dark);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n  color: rgb(158, 98, 23);\n  color: var(--color-orange--dark);\n  background-color: rgb(253, 239, 222);\n  background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n  color: rgb(81, 114, 9);\n  color: var(--color-green--dark);\n  background-color: rgb(236, 243, 219);\n  background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n  color: rgb(1, 27, 37);\n  color: var(--color-blue--dark);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n  color: rgb(49, 69, 98);\n  color: var(--color-navy--dark);\n  background-color: rgb(228, 233, 239);\n  background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n  color: rgb(144, 127, 10);\n  color: var(--color-yellow--dark);\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n  color: rgb(99, 125, 46);\n  color: var(--color-lime--dark);\n  background-color: rgb(240, 246, 227);\n  background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n  color: rgb(88, 73, 127);\n  color: var(--color-purple--dark);\n  background-color: rgb(237, 234, 246);\n  background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n  color: rgb(116, 62, 98);\n  color: var(--color-pink--dark);\n  background-color: rgb(244, 231, 239);\n  background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n  color: rgb(40, 112, 95);\n  color: var(--color-teal--dark);\n  background-color: rgb(226, 243, 239);\n  background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n  color: rgb(122, 128, 21);\n  color: var(--color-yellowGreen--dark);\n  background-color: rgb(245, 246, 222);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n  color: rgb(39, 105, 146);\n  color: var(--color-lightBlue--dark);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n  color: rgb(55, 69, 132);\n  color: var(--color-indigo--dark);\n  background-color: rgb(230, 233, 247);\n  background-color: var(--color-indigo--lightest);\n}\n";
-var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
-styleInject_es.styleInject(css_248z);
-
-function InlineLabel({ size = "base", color = "greyBlue", children, }) {
-    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
-    const sizeMapper = {
-        base: "small",
-        large: "large",
-        larger: "large",
-    };
-    return (React__default["default"].createElement("span", { className: className },
-        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
-}
-
-exports.InlineLabel = InlineLabel;