@jobber/components 4.24.1 → 4.24.2-JOB-69677.5

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,9 +1,15 @@
-/// <reference types="react" />
+import React from "react";
 import { XOR } from "ts-xor";
 import { GroupOption, Option } from "./Option";
+import { InputTextRef } from "../InputText";
 import { FormFieldProps } from "../FormField";
 type OptionCollection = XOR<Option[], GroupOption[]>;
-interface AutocompleteProps extends Pick<FormFieldProps, "inputRef" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
+interface AutocompleteProps extends Pick<FormFieldProps, "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    readonly inputRef?: FormFieldProps["inputRef"];
     /**
      * Initial options to show when user first focuses the Autocomplete
      */
@@ -40,5 +46,5 @@ interface AutocompleteProps extends Pick<FormFieldProps, "inputRef" | "invalid"
      */
     readonly placeholder: string;
 }
-export declare function Autocomplete({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, ...inputProps }: AutocompleteProps): JSX.Element;
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<InputTextRef>>;
 export {};

package/dist/Autocomplete/index.js

@@ -13,10 +13,10 @@ var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-e9b345ff.js');
+var InputText = require('../InputText-bb03f6d1.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-090113ec.js');
+require('../FormField-0f880b07.js');
 require('uuid');
 require('react-hook-form');
 require('../Button-7698424c.js');
@@ -147,7 +147,7 @@ function useRepositionMenu(attachTo, visible = false) {
 
 // Max statements increased to make room for the debounce functions
 /* eslint max-statements: ["error", 14] */
-function Autocomplete(_a) {
+function AutocompleteInternal(_a, ref) {
     var _b;
     var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
     const [options, setOptions] = React.useState(initialOptions);
@@ -164,7 +164,7 @@ function Autocomplete(_a) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React__default["default"].createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
-        React__default["default"].createElement(InputText.InputText, Object.assign({ autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React__default["default"].createElement(InputText.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
         menuVisible && (React__default["default"].createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
     function updateInput(newText) {
         setInputText(newText);
@@ -214,5 +214,6 @@ function mapToOptions(items) {
         return result;
     }, []);
 }
+const Autocomplete = React.forwardRef(AutocompleteInternal);
 
 exports.Autocomplete = Autocomplete;

package/dist/DataTable/index.js

@@ -8,10 +8,10 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-8277f540.js');
+var Option = require('../Option-63267b27.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-090113ec.js');
+require('../FormField-0f880b07.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');

package/dist/FormField/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

package/dist/{FormField-090113ec.js → FormField-0f880b07.js}

@@ -17,8 +17,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = ":root {\n  /**\n   * These `--public-field` properties are used in other components such\n   * as InputGroup, therefore they must stay on :root\n   **/\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/**\n * Wrapper\n **/\n\n.nPGhTEEzsoU- {\n  --field--placeholder-color: var(--color-greyBlue--light);\n  --field--placeholder-offset: 50%;\n  --field--placeholder-transform: -50%;\n\n  --field--textAlign: left;\n\n  --field--height: var(--space-largest);\n\n  --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-left: var(--space-base);\n  --field--padding-right: var(--space-base);\n\n  --field--value-color: var(--color-heading);\n  --field--value-lineHeight: calc(var(--base-unit) * 1.25);\n\n  --field--border-color: var(--color-border);\n  --field--background-color: var(--color-surface);\n\n  --field--base-elevation: var(--elevation-base);\n  --field--label-elevation: calc(var(--field--base-elevation) + 1);\n  --field--postfix-elevation: calc(var(--field--base-elevation) - 1);\n  --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  width: 100%;\n  height: calc(16px * 3);\n  height: var(--field--height);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--field--border-color);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  border-top-right-radius: calc(16px / 8);\n  border-top-right-radius: var(--public-field--top-right-radius);\n  border-bottom-right-radius: calc(16px / 8);\n  border-bottom-right-radius: var(--public-field--bottom-right-radius);\n  border-bottom-left-radius: calc(16px / 8);\n  border-bottom-left-radius: var(--public-field--bottom-left-radius);\n  border-top-left-radius: calc(16px / 8);\n  border-top-left-radius: var(--public-field--top-left-radius);\n  color: rgb(1, 41, 57);\n  color: var(--field--value-color);\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  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--field--background-color);\n}\n\n.nPGhTEEzsoU- * {\n  box-sizing: border-box;\n}\n\n.nPGhTEEzsoU-:focus-within {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.UIZq8hTmJVU- {\n  --field--placeholder-color: var(--color-text--secondary);\n  --field--placeholder-offset: var(--space-smallest);\n  --field--placeholder-transform: 0;\n  --field--padding-top: calc(var(--space-base) + var(--space-smaller));\n  --field--padding-bottom: var(--space-small);\n}\n\n.UIZq8hTmJVU-.Ku8sWS0mLew- {\n  --field--padding-top: calc(var(--space-large) + var(--space-smaller));\n}\n\n.nPGhTEEzsoU-.mgPacJ6Z71Y- {\n  --field--placeholder-offset: 0;\n  --field--placeholder-transform: 0;\n  height: auto;\n  min-height: auto;\n}\n\n.gJ-15M615eY-,\n.gJ-15M615eY-:focus-within {\n  --field--border-color: var(--color-critical);\n}\n\n._1rsTLm5GwcM- {\n  --field--placeholder-color: var(--color-disabled);\n  --field--value-color: var(--color-disabled);\n  --field--background-color: var(--color-surface--background);\n  --field--border-color: var(--color-disabled--secondary);\n}\n\n/* override iOS default styling for disabled input */\n\n._1rsTLm5GwcM- :disabled {\n  -webkit-text-fill-color: var(--field--value-color);\n  opacity: 1;\n}\n\n.o8D-H-lKfDk- {\n  --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-top: var(--space-small);\n  --field--padding-bottom: var(--space-small);\n  --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.Ku8sWS0mLew- {\n  --field--padding-left: var(--space-large);\n  --field--padding-right: var(--space-large);\n  --field--height: calc(var(--space-extravagant));\n}\n\n._5Hu2F3cBvng- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: auto;\n}\n\n.s1WLQs6ffD8- {\n  --field--textAlign: center;\n}\n\n.a2r4QheWYIA- {\n  --field--textAlign: right;\n}\n\n/**\n * The custom property --formField-maxLength is getting defined inside the\n * component.\n */\n\n.KdAnXK1gClo- {\n  width: calc(\n    (16px * var(--formField-maxLength)) + var(--field--padding-left) +\n      var(--field--padding-right)\n  );\n  width: calc(\n    (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +\n      var(--field--padding-right)\n  );\n}\n\n/**\n * Input Wrapper\n **/\n\n.iQFhpFYnz-8- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1;\n      flex: 1;\n  position: relative;\n  /* Ensure input stays with the rest of the element stack */\n  z-index: 0;\n  z-index: var(--elevation-default);\n}\n\n.Yo2Wi9dpa-Y- {\n  position: relative;\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/**\n * Input\n **/\n\n.LSHPV7PwOTg- {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  width: 100%;\n  height: 100%;\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--field--value-lineHeight);\n  text-align: var(--field--textAlign);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.LSHPV7PwOTg-:focus {\n  outline: none;\n}\n\n.mgPacJ6Z71Y- .LSHPV7PwOTg- {\n  resize: vertical;\n}\n\n.i31GQXcMz54- .LSHPV7PwOTg- {\n  z-index: var(--field--label-elevation);\n}\n\n.LSHPV7PwOTg-:-webkit-autofill,\n.LSHPV7PwOTg-:-webkit-autofill:hover,\n.LSHPV7PwOTg-:-webkit-autofill:focus,\n.LSHPV7PwOTg-:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 1) inset !important;\n  -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;\n}\n\n/**\n * Label\n **/\n\n._3xREbTN5pPg- {\n  position: absolute;\n  top: var(--field--placeholder-offset);\n  z-index: var(--field--label-elevation);\n  width: 100%;\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  overflow: hidden;\n  color: var(--field--placeholder-color);\n  line-height: var(--field--value-lineHeight);\n  text-align: var(--field--textAlign);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  -webkit-transform: translateY(var(--field--placeholder-transform));\n          transform: translateY(var(--field--placeholder-transform));\n  transition: all 100ms;\n  transition: all var(--timing-quick);\n}\n\n.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  font-size: calc((16px * 1) * 0.75);\n  font-size: calc(calc(16px * 1) * 0.75);\n  font-size: var(--typography--fontSize-small);\n}\n\n.mgPacJ6Z71Y- ._3xREbTN5pPg- {\n  /* Changes the width so that the scrollbar on the textarea doesn't get cut off */\n  width: calc(100% - var(--field--padding-right));\n  padding-top: var(--field--padding-top);\n  /* Remove padding on right to make use of the entire width */\n  padding-right: 0;\n  -webkit-transform: translateY(--field--placeholder-transform);\n          transform: translateY(--field--placeholder-transform);\n}\n\n.mgPacJ6Z71Y-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  padding-top: calc(16px / 8);\n  padding-top: var(--space-smallest);\n  background-color: var(--field--background-color);\n}\n\n.o8D-H-lKfDk-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  display: none;\n}\n\n.Ku8sWS0mLew-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n/**\n * Postfix\n **/\n\n.VtnAk1HYMMk- {\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: var(--field--postfix-elevation);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n/**\n * Affix\n **/\n\n.uPLklxvtfJw- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  margin: 0 calc(var(--field--padding-left) * -1) 0 0;\n  padding: 0 var(--field--padding-right) 0 var(--field--padding-left);\n}\n\n@supports (aspect-ratio: 1/1) {\n  .uPLklxvtfJw- {\n    /*\n     * disabling property-no-unknown here as this is a real property\n     * that stylelint just doesn't know about. We may be able to remove\n     * this when we update our stylelint to not care about IE11.\n     */\n    /* stylelint-disable-next-line property-no-unknown */\n    aspect-ratio: 1/1;\n    padding: 0;\n  }\n}\n\n.uPLklxvtfJw-.pYqqDvv57JE- {\n  margin: 0 0 0 calc(var(--field--padding-right) * -1);\n}\n\n.uPLklxvtfJw-.eI44oQpuVlk- {\n  position: relative;\n  z-index: var(--field--postfix-action-elevation);\n}\n\n.jO8P2iSHilM- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: 0 calc((var(--field--padding-left) - calc(16px / 8)) * -1) 0 0;\n  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n  padding: 0 0 0 var(--field--padding-left);\n  line-height: var(--field--value-lineHeight);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.jO8P2iSHilM-.pYqqDvv57JE- {\n  margin: 0 0 0 calc((var(--field--padding-left) - calc(16px / 8)) * -1);\n  margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);\n  padding: 0 var(--field--padding-left) 0 0;\n}\n\n.UIZq8hTmJVU-:not(.o8D-H-lKfDk-) .jO8P2iSHilM- {\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n}\n\n._2GfgzNnLOSI- {\n  margin-top: calc(16px / 4);\n  margin-top: var(--space-smaller);\n}\n";
-var styles = {"wrapper":"nPGhTEEzsoU-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","textarea":"mgPacJ6Z71Y-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-"};
+var css_248z = ":root {\n  /**\n   * These `--public-field` properties are used in other components such\n   * as InputGroup, therefore they must stay on :root\n   **/\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n.geR7qBhrMfk- {\n  width: 100%;\n}\n\n/**\n * Wrapper\n **/\n\n.nPGhTEEzsoU- {\n  --field--placeholder-color: var(--color-greyBlue--light);\n  --field--placeholder-offset: 50%;\n  --field--placeholder-transform: -50%;\n\n  --field--textAlign: left;\n\n  --field--height: var(--space-largest);\n\n  --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-left: var(--space-base);\n  --field--padding-right: var(--space-base);\n\n  --field--value-color: var(--color-heading);\n  --field--value-lineHeight: calc(var(--base-unit) * 1.25);\n\n  --field--border-color: var(--color-border);\n  --field--background-color: var(--color-surface);\n\n  --field--base-elevation: var(--elevation-base);\n  --field--label-elevation: calc(var(--field--base-elevation) + 1);\n  --field--postfix-elevation: calc(var(--field--base-elevation) - 1);\n  --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  width: 100%;\n  height: calc(16px * 3);\n  height: var(--field--height);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--field--border-color);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  border-top-right-radius: calc(16px / 8);\n  border-top-right-radius: var(--public-field--top-right-radius);\n  border-bottom-right-radius: calc(16px / 8);\n  border-bottom-right-radius: var(--public-field--bottom-right-radius);\n  border-bottom-left-radius: calc(16px / 8);\n  border-bottom-left-radius: var(--public-field--bottom-left-radius);\n  border-top-left-radius: calc(16px / 8);\n  border-top-left-radius: var(--public-field--top-left-radius);\n  color: rgb(1, 41, 57);\n  color: var(--field--value-color);\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  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--field--background-color);\n}\n\n.nPGhTEEzsoU- * {\n  box-sizing: border-box;\n}\n\n.nPGhTEEzsoU-:focus-within {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.UIZq8hTmJVU- {\n  --field--placeholder-color: var(--color-text--secondary);\n  --field--placeholder-offset: var(--space-smallest);\n  --field--placeholder-transform: 0;\n  --field--padding-top: calc(var(--space-base) + var(--space-smaller));\n  --field--padding-bottom: var(--space-small);\n}\n\n.UIZq8hTmJVU-.Ku8sWS0mLew- {\n  --field--padding-top: calc(var(--space-large) + var(--space-smaller));\n}\n\n.nPGhTEEzsoU-.mgPacJ6Z71Y- {\n  --field--placeholder-offset: 0;\n  --field--placeholder-transform: 0;\n  height: auto;\n  min-height: auto;\n}\n\n.gJ-15M615eY-,\n.gJ-15M615eY-:focus-within {\n  --field--border-color: var(--color-critical);\n  position: relative;\n}\n\n._1rsTLm5GwcM- {\n  --field--placeholder-color: var(--color-disabled);\n  --field--value-color: var(--color-disabled);\n  --field--background-color: var(--color-surface--background);\n  --field--border-color: var(--color-disabled--secondary);\n}\n\n/* override iOS default styling for disabled input */\n\n._1rsTLm5GwcM- :disabled {\n  -webkit-text-fill-color: var(--field--value-color);\n  opacity: 1;\n}\n\n.o8D-H-lKfDk- {\n  --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-top: var(--space-small);\n  --field--padding-bottom: var(--space-small);\n  --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.Ku8sWS0mLew- {\n  --field--padding-left: var(--space-large);\n  --field--padding-right: var(--space-large);\n  --field--height: calc(var(--space-extravagant));\n}\n\n._5Hu2F3cBvng- {\n  display: inline-block;\n  width: auto;\n}\n\n.s1WLQs6ffD8- {\n  --field--textAlign: center;\n}\n\n.a2r4QheWYIA- {\n  --field--textAlign: right;\n}\n\n/**\n * The custom property --formField-maxLength is getting defined inside the\n * component.\n */\n\n.KdAnXK1gClo- {\n  width: calc(\n    (16px * var(--formField-maxLength)) + var(--field--padding-left) +\n      var(--field--padding-right)\n  );\n  width: calc(\n    (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +\n      var(--field--padding-right)\n  );\n}\n\n/**\n * Input Wrapper\n **/\n\n.iQFhpFYnz-8- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1;\n      flex: 1;\n  position: relative;\n  /* Ensure input stays with the rest of the element stack */\n  z-index: 0;\n  z-index: var(--elevation-default);\n}\n\n.Yo2Wi9dpa-Y- {\n  position: relative;\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/**\n * Input\n **/\n\n.LSHPV7PwOTg- {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  width: 100%;\n  height: 100%;\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--field--value-lineHeight);\n  text-align: var(--field--textAlign);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.LSHPV7PwOTg-:focus {\n  outline: none;\n}\n\n.mgPacJ6Z71Y- .LSHPV7PwOTg- {\n  resize: vertical;\n}\n\n.i31GQXcMz54- .LSHPV7PwOTg- {\n  z-index: var(--field--label-elevation);\n}\n\n.LSHPV7PwOTg-:-webkit-autofill,\n.LSHPV7PwOTg-:-webkit-autofill:hover,\n.LSHPV7PwOTg-:-webkit-autofill:focus,\n.LSHPV7PwOTg-:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 1) inset !important;\n  -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;\n}\n\n/**\n * Label\n **/\n\n._3xREbTN5pPg- {\n  position: absolute;\n  top: var(--field--placeholder-offset);\n  z-index: var(--field--label-elevation);\n  width: 100%;\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  overflow: hidden;\n  color: var(--field--placeholder-color);\n  line-height: var(--field--value-lineHeight);\n  text-align: var(--field--textAlign);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  -webkit-transform: translateY(var(--field--placeholder-transform));\n          transform: translateY(var(--field--placeholder-transform));\n  transition: all 100ms;\n  transition: all var(--timing-quick);\n}\n\n.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  font-size: calc((16px * 1) * 0.75);\n  font-size: calc(calc(16px * 1) * 0.75);\n  font-size: var(--typography--fontSize-small);\n}\n\n.mgPacJ6Z71Y- ._3xREbTN5pPg- {\n  /* Changes the width so that the scrollbar on the textarea doesn't get cut off */\n  width: calc(100% - var(--field--padding-right));\n  padding-top: var(--field--padding-top);\n  /* Remove padding on right to make use of the entire width */\n  padding-right: 0;\n  -webkit-transform: translateY(--field--placeholder-transform);\n          transform: translateY(--field--placeholder-transform);\n}\n\n.mgPacJ6Z71Y-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  padding-top: calc(16px / 8);\n  padding-top: var(--space-smallest);\n  background-color: var(--field--background-color);\n}\n\n.o8D-H-lKfDk-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  display: none;\n}\n\n.Ku8sWS0mLew-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n/**\n * Postfix\n **/\n\n.VtnAk1HYMMk- {\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: var(--field--postfix-elevation);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n/**\n * Affix\n **/\n\n.uPLklxvtfJw- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  margin: 0 calc(var(--field--padding-left) * -1) 0 0;\n  padding: 0 var(--field--padding-right) 0 var(--field--padding-left);\n}\n\n@supports (aspect-ratio: 1/1) {\n  .uPLklxvtfJw- {\n    /*\n     * disabling property-no-unknown here as this is a real property\n     * that stylelint just doesn't know about. We may be able to remove\n     * this when we update our stylelint to not care about IE11.\n     */\n    /* stylelint-disable-next-line property-no-unknown */\n    aspect-ratio: 1/1;\n    padding: 0;\n  }\n}\n\n.uPLklxvtfJw-.pYqqDvv57JE- {\n  margin: 0 0 0 calc(var(--field--padding-right) * -1);\n}\n\n.uPLklxvtfJw-.eI44oQpuVlk- {\n  position: relative;\n  z-index: var(--field--postfix-action-elevation);\n}\n\n.jO8P2iSHilM- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: 0 calc((var(--field--padding-left) - calc(16px / 8)) * -1) 0 0;\n  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n  padding: 0 0 0 var(--field--padding-left);\n  line-height: var(--field--value-lineHeight);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n.jO8P2iSHilM-.pYqqDvv57JE- {\n  margin: 0 0 0 calc((var(--field--padding-left) - calc(16px / 8)) * -1);\n  margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);\n  padding: 0 var(--field--padding-left) 0 0;\n}\n\n.UIZq8hTmJVU-:not(.o8D-H-lKfDk-) .jO8P2iSHilM- {\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n}\n\n._2GfgzNnLOSI- {\n  margin-top: calc(16px / 4);\n  margin-top: var(--space-smaller);\n}\n";
+var styles = {"container":"geR7qBhrMfk-","wrapper":"nPGhTEEzsoU-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","textarea":"mgPacJ6Z71Y-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-"};
 styleInject_es.styleInject(css_248z);
 
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
@@ -64,9 +64,11 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
         [styles.select]: type === "select",
         [styles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [styles.disabled]: disabled,
-        [styles.inline]: inline,
         [styles.maxLength]: maxLength,
     });
+    const containerClasses = classnames__default["default"](styles.container, {
+        [styles.inline]: inline,
+    });
     const wrapperInlineStyle = {
         ["--formField-maxLength"]: maxLength || max,
     };
@@ -79,11 +81,13 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     React.useEffect(() => {
         setLabelStyle(getAffixPaddding);
     }, [value]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement("div", { className: containerClasses },
         React__default["default"].createElement("div", { className: wrapperClasses, style: wrapperInlineStyle },
             (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React__default["default"].createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
             React__default["default"].createElement("div", { className: styles.inputWrapper },
-                React__default["default"].createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) ? labelStyle : undefined }, placeholder),
+                placeholder && (React__default["default"].createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                        ? labelStyle
+                        : undefined }, placeholder)),
                 (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React__default["default"].createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
                 React__default["default"].createElement("div", { className: styles.childrenWrapper }, children),
                 (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default["default"].createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-0f880b07.js');
 var DatePicker = require('../DatePicker-38b0c40b.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputGroup/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputGroup = require('../InputGroup-34e64048.js');
+var InputGroup = require('../InputGroup-3fdde16b.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{InputGroup-34e64048.js → InputGroup-3fdde16b.js}

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = "._4bvHwa3-qBA- > *:not(:last-child) {\n  margin-bottom: -1px !important;\n}\n\n.bHm4WuX8ToY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: end;\n      align-items: flex-end;\n}\n\n.bHm4WuX8ToY- > *:not(:last-child) {\n  margin-bottom: auto;\n  margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group  */\n\n.nmDPgrXofeE- {\n  --public-field--top-left-radius: 0;\n  --public-field--top-right-radius: 0;\n  --public-field--bottom-left-radius: 0;\n  --public-field--bottom-right-radius: 0;\n}\n\n._4bvHwa3-qBA- > :first-child:not(.bHm4WuX8ToY-) {\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n._4bvHwa3-qBA- > :last-child:not(.bHm4WuX8ToY-) {\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.bHm4WuX8ToY-:first-child > :first-child {\n  --public-field--top-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:first-child > :last-child {\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.bHm4WuX8ToY-:last-child > :first-child {\n  --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:last-child > :last-child {\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n";
+var css_248z = "._4bvHwa3-qBA- > *:not(:last-child) {\n  margin-bottom: -1px !important;\n}\n\n.bHm4WuX8ToY- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.bHm4WuX8ToY- > *:not(:last-child) {\n  margin-bottom: auto;\n  margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group  */\n\n.nmDPgrXofeE- {\n  --public-field--top-left-radius: 0;\n  --public-field--top-right-radius: 0;\n  --public-field--bottom-left-radius: 0;\n  --public-field--bottom-right-radius: 0;\n}\n\n._4bvHwa3-qBA- > :first-child:not(.bHm4WuX8ToY-) {\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n._4bvHwa3-qBA- > :last-child:not(.bHm4WuX8ToY-) {\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.bHm4WuX8ToY-:first-child > :first-child {\n  --public-field--top-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:first-child > :last-child {\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.bHm4WuX8ToY-:last-child > :first-child {\n  --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:last-child > :last-child {\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n";
 var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
 styleInject_es.styleInject(css_248z);
 

package/dist/InputNumber/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-80a381e9.js');
+var InputNumber = require('../InputNumber-49873d31.js');
 require('react');
-require('../FormField-090113ec.js');
+require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputNumber-80a381e9.js → InputNumber-49873d31.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-090113ec.js');
+var FormField = require('./FormField-0f880b07.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPhoneNumber/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-0f880b07.js');
 require('uuid');
 require('classnames');
 require('../Button-7698424c.js');

package/dist/InputText/InputText.d.ts

@@ -7,6 +7,7 @@ export interface InputTextRef {
     insert(text: string): void;
     blur(): void;
     focus(): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
 }
 export declare const InputText: React.ForwardRefExoticComponent<({
     readonly multiline: true;

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-e9b345ff.js');
+var InputText = require('../InputText-bb03f6d1.js');
 require('react');
-require('../FormField-090113ec.js');
+require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-e9b345ff.js → InputText-bb03f6d1.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-090113ec.js');
+var FormField = require('./FormField-0f880b07.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputTextInternal(props, ref) {
-    const inputRef = React.createRef();
-    const actionsRef = React.createRef();
+    const inputRef = React.useRef(null);
+    const actionsRef = React.useRef(null);
     const rowRange = getRowRange();
     React.useImperativeHandle(ref, () => ({
         insert: (text) => {
@@ -27,6 +27,12 @@ function InputTextInternal(props, ref) {
                 input.focus();
             }
         },
+        scrollIntoView: arg => {
+            const input = inputRef.current;
+            if (input) {
+                input.scrollIntoView(arg);
+            }
+        },
     }));
     React.useLayoutEffect(() => {
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {

package/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-090113ec.js');
+var FormField = require('../FormField-0f880b07.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Option-8277f540.js → Option-63267b27.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-090113ec.js');
+var FormField = require('./FormField-0f880b07.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/RadioGroup/RadioOption.d.ts

@@ -1,34 +1,47 @@
-import { PropsWithChildren } from "react";
+import { ReactNode } from "react";
 import { XOR } from "ts-xor";
-interface BaseRadioOptions {
+interface BaseRadioOptionProps {
+    /**
+     * The value of the radio button.
+     */
     readonly value: string | number;
+    /**
+     * Disables the radio button.
+     */
     readonly disabled?: boolean;
-}
-interface RadioOptionsWithDescription extends BaseRadioOptions {
+    /**
+     * Further description of the label.
+     */
+    readonly description?: string;
     /**
      * The label to appear beside the radio button.
      */
-    label: string;
+    readonly label?: string;
     /**
-     * Further description of the label.
+     * Render a custom label or additional content below the `label`
+     * and `description`.
+     *
+     * Prefer using `label` and `description` over adding child elements if the
+     * content of either would be a string.
      */
-    description?: string;
+    readonly children?: ReactNode;
 }
-type RadioOptionProps = XOR<RadioOptionsWithDescription, PropsWithChildren<BaseRadioOptions>>;
+interface WithRequiredChildren extends BaseRadioOptionProps {
+    readonly children: ReactNode;
+}
+interface WithRequiredLabel extends BaseRadioOptionProps {
+    readonly label: string;
+}
+type RadioOptionProps = XOR<WithRequiredChildren, WithRequiredLabel>;
 /**
  * For rendering props only. To make updates to
  * the real RadioOption, look at InternalRadioOption
  */
-export declare function RadioOption({ children }: PropsWithChildren<RadioOptionProps>): JSX.Element;
-interface BaseInternalRadioOptions extends BaseRadioOptions {
+export declare function RadioOption({ children }: RadioOptionProps): JSX.Element;
+interface InternalRadioOptionProps extends BaseRadioOptionProps {
     readonly name: string;
     readonly checked: boolean;
     onChange(newValue: string | number): void;
 }
-interface InternalRadioOptionsWithDescription extends BaseInternalRadioOptions {
-    label: string;
-    description?: string;
-}
-type InternalRadioOptionProps = XOR<InternalRadioOptionsWithDescription, PropsWithChildren<BaseInternalRadioOptions>>;
-export declare function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }: PropsWithChildren<InternalRadioOptionProps>): JSX.Element;
+export declare function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }: InternalRadioOptionProps): JSX.Element;
 export {};

package/dist/RadioGroup/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RadioGroup = require('../RadioGroup-67a5f560.js');
+var RadioGroup = require('../RadioGroup-8e76d20b.js');
 require('react');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{RadioGroup-67a5f560.js → RadioGroup-8e76d20b.js}

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = "._5P8wEHDUdKY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n._08ZPdlE98Ko- {\n  /* Hide checkbox on UI but not screen readers and still allow focus state */\n  position: absolute;\n  left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\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  cursor: pointer;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n  content: \"\";\n  display: block;\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: calc(16px * 1);\n  height: var(--space-base);\n  box-sizing: border-box;\n  margin: calc(16px / 8) calc(16px / 2) 0 0;\n  margin: var(--space-smallest) var(--space-small) 0 0;\n  border: calc(16px / 8) solid rgb(125, 176, 14);\n  border: var(--border-thick) solid var(--color-interactive);\n  border-radius: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._08ZPdlE98Ko-:focus + .-PUoLXltVlQ-:before {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n  box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9),\n    0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover),\n    var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n  box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9);\n  box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover);\n  border-color: rgb(81, 114, 9);\n  border-color: var(--color-interactive--hover);\n  border-width: calc(16px / 4);\n  border-width: var(--border-thicker);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n  box-shadow: 0px 0px 0px calc(16px / 16) rgb(181, 181, 181);\n  box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-disabled);\n  border-color: rgb(181, 181, 181);\n  border-color: var(--color-grey);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n._8r6qT-6S9EI- {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  padding-left: calc(16px * 1.5);\n  padding-left: var(--space-large);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n}\n";
-var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-"};
+var css_248z = "._5P8wEHDUdKY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n._08ZPdlE98Ko- {\n  /* Hide checkbox on UI but not screen readers and still allow focus state */\n  position: absolute;\n  left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\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  cursor: pointer;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n  content: \"\";\n  display: block;\n  width: calc(16px * 1);\n  width: var(--space-base);\n  height: calc(16px * 1);\n  height: var(--space-base);\n  box-sizing: border-box;\n  margin: calc(16px / 8) calc(16px / 2) 0 0;\n  margin: var(--space-smallest) var(--space-small) 0 0;\n  border: calc(16px / 8) solid rgb(125, 176, 14);\n  border: var(--border-thick) solid var(--color-interactive);\n  border-radius: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._08ZPdlE98Ko-:focus + .-PUoLXltVlQ-:before {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n  box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9),\n    0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover),\n    var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n  box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9);\n  box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover);\n  border-color: rgb(81, 114, 9);\n  border-color: var(--color-interactive--hover);\n  border-width: calc(16px / 4);\n  border-width: var(--border-thicker);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n  box-shadow: 0px 0px 0px calc(16px / 16) rgb(181, 181, 181);\n  box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-disabled);\n  border-color: rgb(181, 181, 181);\n  border-color: var(--color-grey);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  padding-left: calc(16px * 1.5);\n  padding-left: var(--space-large);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n}\n";
+var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
 styleInject_es.styleInject(css_248z);
 
 /**
@@ -22,11 +22,13 @@ function RadioOption({ children }) {
 }
 function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
     const inputId = `${value.toString()}_${uuid.v1()}`;
+    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)))));
+            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);
     }

package/dist/RecurringSelect/index.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var uuid = require('uuid');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var RadioGroup = require('../RadioGroup-67a5f560.js');
+var RadioGroup = require('../RadioGroup-8e76d20b.js');
 var Text = require('../Text-e7ed0974.js');
 require('classnames');
 require('../Typography-fd6f932a.js');
-var Option = require('../Option-8277f540.js');
-var InputNumber = require('../InputNumber-80a381e9.js');
-var InputGroup = require('../InputGroup-34e64048.js');
+var Option = require('../Option-63267b27.js');
+var InputNumber = require('../InputNumber-49873d31.js');
+var InputGroup = require('../InputGroup-3fdde16b.js');
 var Content = require('../Content-a6590328.js');
-require('../FormField-090113ec.js');
+require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');
 require('../Button-7698424c.js');

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-8277f540.js');
+var Option = require('../Option-63267b27.js');
 require('react');
-require('../FormField-090113ec.js');
+require('../FormField-0f880b07.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.24.1",
+  "version": "4.24.2-JOB-69677.5+458783b0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.44.4",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.5",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b464a5ae9d3305c1dc1b92d99dc93bd042fefb7f"
+  "gitHead": "458783b0d37ec33792bbda6c681a0c76635eeb6b"
 }