@jobber/components 4.67.2-JOB-84126.13 → 4.67.2-pre.25

package/dist/RadioGroup/index.js

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../RadioGroup-ebaa4f87.js');
+var RadioGroup = require('../RadioGroup-9dded55d.js');
 require('react');
-require('uuid');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Text-4a2bc89f.js');
-require('../Typography-973b122e.js');
+require('../Text-9f261dde.js');
+require('../Typography-75f58b60.js');
 require('classnames');
 
 

package/dist/RadioGroup-9dded55d.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var Text = require('./Text-9f261dde.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
+
+/**
+ * For rendering props only. To make updates to
+ * the real RadioOption, look at InternalRadioOption
+ */
+function RadioOption({ children }) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
+function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
+    const id = React.useId();
+    const inputId = `${value.toString()}_${id}`;
+    const shouldRenderIndependentChildren = label && children;
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
+        React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
+        description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
+            React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description))),
+        shouldRenderIndependentChildren && (React__default["default"].createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
+    function handleChange() {
+        onChange(value);
+    }
+}
+
+function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId(), }) {
+    return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
+    function handleChange(newValue) {
+        if (newValue !== value) {
+            onChange(newValue);
+        }
+    }
+}
+
+exports.RadioGroup = RadioGroup;
+exports.RadioOption = RadioOption;

package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { DayOfMonth } from "../types";
 interface DayOfMonthSelectProps {
-    selectedDays: Set<DayOfMonth>;
-    disabled: boolean;
+    readonly selectedDays: Set<DayOfMonth>;
+    readonly disabled: boolean;
     onChange(selectedDays: Set<DayOfMonth>): void;
 }
 export declare function DayOfMonthSelect({ selectedDays, disabled, onChange, }: DayOfMonthSelectProps): JSX.Element;

package/dist/RecurringSelect/components/WeeklySelect.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { WeekDay } from "../types";
 interface WeeklySelectProps {
-    disabled: boolean;
-    selectedDays: Set<WeekDay>;
+    readonly disabled: boolean;
+    readonly selectedDays: Set<WeekDay>;
     onChange(selectedDays: Set<WeekDay>): void;
 }
 export declare function WeeklySelect({ onChange, selectedDays, disabled, }: WeeklySelectProps): JSX.Element;

package/dist/Spinner/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Spinner = require('../Spinner-9d8fc7ff.js');
+var Spinner = require('../Spinner-cac356ee.js');
 require('react');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/Spinner-cac356ee.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+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 styles = {"spinner":"uoU-LfjFDv0-","animationSpin":"_1aCKd5q9u34-","small":"cLRQwkSqnhA-","inline":"h6O4vDPCWOQ-"};
+
+function Spinner({ size = "base", inline }) {
+    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;

package/dist/StatusLabel/index.js

@@ -4,18 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-4a2bc89f.js');
-require('../Typography-973b122e.js');
+var Text = require('../Text-9f261dde.js');
+require('../Typography-75f58b60.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 = ":root {\n  --statusLabel-icon-diameter: calc(var(--space-base) - var(--space-smaller));\n}\n\n.MB0ycTR4PHg- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.fNl6zDhsox0- {\n  width: calc((16px * 1) - (16px / 4));\n  width: calc(calc(16px * 1) - calc(16px / 4));\n  width: var(--statusLabel-icon-diameter);\n  height: calc((16px * 1) - (16px / 4));\n  height: calc(calc(16px * 1) - calc(16px / 4));\n  height: var(--statusLabel-icon-diameter);\n  margin-top: calc(16px / 16);\n  margin-top: var(--space-minuscule);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-success);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._0kNfkSPBETw- {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n";
 var styles = {"statusLabelRow":"MB0ycTR4PHg-","statusIndicator":"fNl6zDhsox0-","labelTextEndAligned":"_0kNfkSPBETw-"};
-styleInject_es.styleInject(css_248z);
 
 function StatusLabel({ label, alignment = "start", status = "inactive", }) {
     const containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);

package/dist/SupportsTimePolyfill-466a30f9.js

@@ -0,0 +1,21 @@
+'use strict';
+
+// https://stackoverflow.com/a/10199306/1611058
+function get_time_support() {
+  var input = document.createElement('input');
+  input.setAttribute('type', 'time');
+  var notValid = 'not-a-time';
+  input.setAttribute('value', notValid);
+  return input.value !== notValid;
+}
+
+var timeSupport = get_time_support();
+if (window) window.supportsTime = timeSupport;
+
+var supportsTime = timeSupport;
+
+
+
+var supportsTime$1 = supportsTime;
+
+exports.supportsTime = supportsTime$1;

package/dist/Switch/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Switch = require('../Switch-b85272bf.js');
+var Switch = require('../Switch-588c5e70.js');
 require('react');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-973b122e.js');
+require('../Typography-75f58b60.js');
 
 
 

package/dist/Switch-588c5e70.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Typography = require('./Typography-75f58b60.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 styles = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
+
+function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
+    const [statefulValue, setValue] = React.useState(false);
+    const value = providedValue != undefined ? providedValue : statefulValue;
+    const toggleSwitch = () => {
+        if (disabled) {
+            return;
+        }
+        const newValue = !value;
+        onChange && onChange(newValue);
+        if (providedValue == undefined) {
+            setValue(newValue);
+        }
+    };
+    const className = classnames__default["default"](styles.track, {
+        [styles.isChecked]: value,
+        [styles.disabled]: disabled,
+    });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
+            React__default["default"].createElement("span", { className: styles.toggle },
+                React__default["default"].createElement(Label, { as: "On", disabled: disabled }),
+                React__default["default"].createElement("span", { className: styles.pip }),
+                React__default["default"].createElement(Label, { as: "Off", disabled: disabled }))),
+        React__default["default"].createElement("input", { name: name, type: "hidden", value: String(value) })));
+}
+function Label({ as, disabled }) {
+    const getTextColor = () => {
+        if (disabled) {
+            return "grey";
+        }
+        else if (as === "On") {
+            return "white";
+        }
+        return "greyBlue";
+    };
+    return (React__default["default"].createElement("span", { className: styles.label },
+        React__default["default"].createElement(Typography.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+}
+
+exports.Switch = Switch;

package/dist/Table/index.js

@@ -3,18 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var require$$3 = require('@jobber/formatters');
+var formatters = require('@jobber/formatters');
 
 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$1 = ".gFY9BLPF808- {\n  --border-color: var(--color-border);\n  --header-border-color: var(--color-border--section);\n  --horizontal-inset: var(--space-base);\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.gFY9BLPF808-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: solid calc(16px / 16) var(--border-color);\n  border: solid var(--border-base) var(--border-color);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  pointer-events: none;\n}\n\n.NZbmlKVakYo-:not(:last-child) {\n  border-bottom: solid calc(16px / 16) var(--border-color);\n  border-bottom: solid var(--border-base) var(--border-color);\n}\n\n._72-uJqZ5jGE- .NZbmlKVakYo- {\n  border-bottom: solid calc(16px / 16) var(--header-border-color);\n  border-bottom: solid var(--border-base) var(--header-border-color);\n  font-weight: bold;\n  text-transform: uppercase;\n}\n\n.fEVdTCw9eOU- .NZbmlKVakYo- {\n  border-top: solid calc(16px / 4) var(--border-color);\n  border-top: solid var(--border-thicker) var(--border-color);\n}\n";
 var styles$1 = {"table":"gFY9BLPF808-","row":"NZbmlKVakYo-","header":"_72-uJqZ5jGE-","footer":"fEVdTCw9eOU-"};
-styleInject_es.styleInject(css_248z$1);
 
 function Table({ children }) {
     return React__default["default"].createElement("table", { className: styles$1.table }, children);
@@ -24,9 +21,7 @@ function Row({ children }) {
     return React__default["default"].createElement("tr", { className: styles$1.row }, children);
 }
 
-var css_248z = ".xibCW9zSMXU- {\n  padding: var(--horizontal-inset) calc(var(--horizontal-inset) / 2);\n  text-align: left;\n}\n\n.SD8FBgvYMQg- {\n  text-align: left;\n}\n\n._5VZpkU0Gu40- {\n  text-align: center;\n}\n\n.DNPkTtpA-8g- {\n  text-align: right;\n}\n\n._5EfJs7A9kEg- {\n  -webkit-font-feature-settings: \"tnum\";\n          font-feature-settings: \"tnum\";\n}\n\n.xibCW9zSMXU-:first-child {\n  padding-left: var(--horizontal-inset);\n}\n\n.xibCW9zSMXU-:last-child {\n  padding-right: var(--horizontal-inset);\n}\n";
 var styles = {"cell":"xibCW9zSMXU-","left":"SD8FBgvYMQg-","center":"_5VZpkU0Gu40-","right":"DNPkTtpA-8g-","numeric":"_5EfJs7A9kEg-"};
-styleInject_es.styleInject(css_248z);
 
 function Cell({ children, align = "left" }) {
     const className = classnames__default["default"](styles.cell, styles[align]);
@@ -39,7 +34,7 @@ function CellNumeric({ value }) {
 }
 
 function CellCurrency({ value, currency = undefined, }) {
-    return React__default["default"].createElement(CellNumeric, { value: require$$3.formatCurrency(value, currency) });
+    return React__default["default"].createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
 }
 
 function Header({ children }) {

package/dist/Tabs/index.js

@@ -4,17 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-973b122e.js');
+var Typography = require('../Typography-75f58b60.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 = ":root {\n  --tab--height: calc(var(--space-larger) + var(--space-small));\n  --tab--inset: var(--space-base);\n  --public-tab--inset: var(--tab--inset);\n}\n\n.-kxlqXO5UN0- {\n  display: block;\n  width: 100%;\n}\n\n.qI4lWMSNH40- {\n  position: relative;\n  border-bottom: solid calc(16px / 16) rgb(217, 223, 225);\n  border-bottom: solid var(--border-base) var(--color-border);\n}\n\n.xohIah5wcoE-:after,\n.qnY4S9sz-8g-:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 24px;\n}\n\n.xohIah5wcoE-:after {\n  right: 0;\n  box-shadow: inset -16px 0 16px -16px rgba(0, 0, 0, 0.25);\n  box-shadow: inset -16px 0 16px -16px rgba(var(--color-black--rgb), 0.25);\n}\n\n.qnY4S9sz-8g-:before {\n  left: 0;\n  box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, 0.25);\n  box-shadow: inset 16px 0 16px -16px rgba(var(--color-black--rgb), 0.25);\n}\n\n.wdW31G8Trag- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: 0;\n  margin-bottom: calc(-1 * (16px / 16));\n  margin-bottom: calc(-1 * calc(16px / 16));\n  margin-bottom: calc(-1 * var(--border-base));\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\nul.wdW31G8Trag- {\n  -webkit-padding-start: 0;\n          padding-left: 0;\n}\n\n.wdW31G8Trag- li {\n  display: -ms-flexbox;\n  display: flex;\n  list-style: none;\n}\n\n.MO7CXQ8xJXo- {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  height: calc((16px * 2) + (16px / 2));\n  height: calc(calc(16px * 2) + calc(16px / 2));\n  height: var(--tab--height);\n  margin: 0;\n  padding-left: calc(16px * 1);\n  padding-left: var(--public-tab--inset);\n  padding-right: calc(16px * 1);\n  padding-right: var(--public-tab--inset);\n  border: solid calc(16px / 16) rgb(217, 223, 225);\n  border: solid var(--border-base) var(--color-border);\n  border-left-width: 0;\n  outline: none;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.MO7CXQ8xJXo-:hover,\n.MO7CXQ8xJXo-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.MO7CXQ8xJXo-:focus span {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.kqof65gyv7g- {\n  border-top-color: rgb(125, 176, 14);\n  border-top-color: var(--color-interactive);\n  border-bottom-color: rgba(255, 255, 255, 1);\n  border-bottom-color: var(--color-surface);\n}\n\n.kqof65gyv7g-:focus {\n  background-color: transparent;\n}\n\n.AimQioztR1U- {\n  padding-top: calc(16px * 1);\n  padding-top: var(--tab--inset);\n  padding-bottom: calc(16px * 1);\n  padding-bottom: var(--tab--inset);\n  padding-left: calc(16px * 1);\n  padding-left: var(--public-tab--inset);\n  padding-right: calc(16px * 1);\n  padding-right: var(--public-tab--inset);\n}\n";
 var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
-styleInject_es.styleInject(css_248z);
 
 function Tabs({ children, defaultTab = 0, onTabChange }) {
     const activeTabInitialValue = defaultTab < React__default["default"].Children.count(children) ? defaultTab : 0;

package/dist/Text/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Text = require('../Text-4a2bc89f.js');
+var Text = require('../Text-9f261dde.js');
 require('react');
-require('../Typography-973b122e.js');
+require('../Typography-75f58b60.js');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/{Text-4a2bc89f.js → Text-9f261dde.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-973b122e.js');
+var Typography = require('./Typography-75f58b60.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }