@pingux/astro 1.3.0 → 1.3.2-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.3.0...@pingux/astro@1.3.1) (2022-03-01)
+
+
+### Bug Fixes
+
+* [UIP-5110] Remove ListLayout and SchemaLayout stories ([e0ac22b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e0ac22b4b0d9134edd4dd7c76e92926b33d62962))
+* [UIP-5152] Deprecate page header component ([a7cf8d6](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a7cf8d6a507805e54a5c3c6bcf047102d2b3813d))
+* [UIP-5178] NumberField - Spec Update ([0e6a2b7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/0e6a2b79799edf4e9b52bf580ca45043c1b810dc))
+* [UIP-5212] RadioField and CheckboxField Spacing Update ([b6e8cb4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b6e8cb47e783c52caff04eb61518e5db15b4479f))
+* [UIP-5226] MultivaluesField allow props to be spread into TextField ([8806276](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8806276c62bf4ea9cf5d4454fb57a61ec313e375))
+* [UIP-5241] Switch Label Text and Spacing Updates ([d79f7a4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d79f7a415b109b9d407677e15614464a34e6fdf8))
+* [UIP-5244] SelectField Storybook Updates ([a0391ea](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a0391ea2b17ed9c8d0fd7f21ab535d5305f6e233))
+
+
+
+
+
 # [1.3.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.2.1...@pingux/astro@1.3.0) (2022-02-23)
 
 

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -105,7 +105,10 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_Checkbox["default"], (0, _extends2["default"])({
     ref: checkboxRef
   }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
-    status: status
+    status: status,
+    sx: {
+      pt: 7
+    }
   }, helperText));
 });
 CheckboxField.propTypes = {

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -48,7 +48,6 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: ref,
-    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

package/lib/cjs/components/Input/Input.js

@@ -14,6 +14,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _isInteger = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-integer"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -22,8 +24,6 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _hooks = require("../../hooks");
-
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
 var _react2 = require("@emotion/react");
@@ -41,19 +41,11 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       placeholder = props.placeholder,
       maxLength = props.maxLength,
       others = (0, _objectWithoutProperties2["default"])(props, ["name", "placeholder", "maxLength"]);
-  var ariaLabel = props['aria-label'] || name;
-  (0, _hooks.useAriaLabelWarning)('Input', ariaLabel || placeholder);
-
-  if (!ariaLabel && !placeholder) {
-    ariaLabel = 'Input';
-  }
-
   return (0, _react2.jsx)(_themeUi.Input, (0, _extends2["default"])({
-    "aria-label": ariaLabel,
     ref: ref,
     name: name,
     placeholder: placeholder,
-    maxLength: maxLength === 0 ? 'null' : maxLength
+    maxLength: (0, _isInteger["default"])(maxLength) && maxLength > 0 ? maxLength : undefined
   }, others));
 });
 Input.displayName = 'Input';

package/lib/cjs/components/Input/Input.test.js

@@ -18,7 +18,8 @@ var _react3 = require("@emotion/react");
 
 var testId = 'test-input';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'My Input'
 };
 
 var getComponent = function getComponent() {
@@ -56,7 +57,7 @@ test('maxlength field with a set maxlength', function () {
 
   expect(input.value.length).toBe(3);
 });
-test('maxlength field set as a negative number or zero', function () {
+test('maxlength field is not set as null', function () {
   getComponent({
     maxLength: null
   });
@@ -65,5 +66,16 @@ test('maxlength field set as a negative number or zero', function () {
 
   _userEvent["default"].type(input, 'banana');
 
+  expect(input.value.length).toBe(6);
+});
+test('maxlength field is not set as zero', function () {
+  getComponent({
+    maxLength: 0
+  });
+
+  var input = _react2.screen.getByTestId(testId);
+
+  _userEvent["default"].type(input, 'banana');
+
   expect(input.value.length).toBe(6);
 });

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -60,8 +60,6 @@ var _overlays = require("@react-aria/overlays");
 
 var _utils = require("@react-aria/utils");
 
-var _uuid = require("uuid");
-
 var _ = require("../..");
 
 var _ListBox = _interopRequireDefault(require("../ListBox"));
@@ -94,6 +92,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
       hasAutoFocus = props.hasAutoFocus,
       hasNoStatusIndicator = props.hasNoStatusIndicator,
+      customInputProps = props.inputProps,
       isDisabled = props.isDisabled,
       isNotFlippable = props.isNotFlippable,
       isReadOnly = props.isReadOnly,
@@ -261,13 +260,17 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           } else if (hasCustomValue) {
             var _context3;
 
-            var name = e.target.value;
-            var id = (0, _uuid.v4)();
-            selectionManager.toggleSelection(id);
+            var _key2 = e.target.value;
+
+            if (state.selectionManager.isSelected(_key2)) {
+              return;
+            }
+
+            selectionManager.toggleSelection(_key2);
             setCustomItems((0, _concat["default"])(_context3 = []).call(_context3, customItems, [{
-              id: id,
-              key: id,
-              name: name
+              id: _key2,
+              key: _key2,
+              name: _key2
             }]));
             setFilterString('');
           }
@@ -359,7 +362,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   })), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: close
   }));
-  var inputProps = {
+
+  var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-expanded': isOpen,
       role: 'combobox'
@@ -375,7 +379,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       ref: inputRef,
       variant: 'forms.input.multivaluesWrapper'
     }
-  };
+  });
+
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
       setIsOpen(false);
@@ -425,6 +430,11 @@ MultivaluesField.propTypes = {
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: _propTypes["default"].bool,
 
+  /**
+   * Props that get passed as-is to the underlying TextField element
+   */
+  inputProps: _propTypes["default"].shape({}),
+
   /** Whether the input is disabled. */
   isDisabled: _propTypes["default"].bool,
 

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -276,6 +276,80 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(1);
+  expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
+});
+test('in non-restrictive mode the same value cannot be applied twice', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(value);
+  expect(onSelectionChange).toBeCalledTimes(1);
+});
+test('in non-restrictive mode the value that was already selected using the list cannot be applied', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+
+  _userEvent["default"].type(input, items[0].name);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
 test('options can be focused via keyboard', function () {
   getComponent();
 

package/lib/cjs/components/NumberField/NumberField.js

@@ -38,9 +38,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _numberfield = require("@react-aria/numberfield");
 
@@ -111,17 +111,37 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "numberField.arrows"
   }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), (0, _react2.jsx)(_index.Icon, {
-    icon: _ArrowDropUpIcon["default"],
-    size: 12
+    icon: _MenuUpIcon["default"],
+    size: 18
   })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), (0, _react2.jsx)(_index.Icon, {
-    icon: _ArrowDropDownIcon["default"],
-    size: 12
-  })));
+    icon: _MenuDownIcon["default"],
+    size: 18
+  }))); // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
+
+  var onInputFocus = (0, _react.useCallback)(function (e) {
+    e.persist();
+    fieldControlProps.onFocus(e);
+    inputProps.onFocus(e);
+  }, [fieldControlProps, inputProps]);
+  var onInputBlur = (0, _react.useCallback)(function (e) {
+    e.persist();
+    fieldControlProps.onBlur(e);
+    inputProps.onBlur(e);
+  }, [fieldControlProps, inputProps]);
+  var updatedFieldControlProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
+    });
+  }, [fieldControlProps, onInputBlur, onInputFocus]);
   return (0, _react2.jsx)(_index.Box, fieldContainerProps, (0, _react2.jsx)(_index.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_index.Box, {
@@ -132,7 +152,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, (0, _omit["default"])(inputProps, 'name'))), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']))), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/cjs/components/NumberField/NumberField.test.js

@@ -176,4 +176,11 @@ test('number field input receiving name attribute', function () {
     name: testName
   });
   expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
+});
+test('number field can be focused', function () {
+  getComponent();
+
+  _userEvent["default"].tab();
+
+  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveClass('is-focused');
 });

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -24,12 +24,15 @@ var _Text = _interopRequireDefault(require("../Text/Text"));
 
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, ["title", "children"]);
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     justifyContent: "space-between",

package/lib/cjs/components/PageHeader/PageHeader.stories.js

@@ -18,11 +18,16 @@ var _PageHeader = _interopRequireDefault(require("../PageHeader/PageHeader"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
+var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'PageHeader',
+  title: 'Deprecated/PageHeader',
   component: _PageHeader["default"],
+  decorators: [function (Story, context) {
+    return (0, _withDeprecationWarning["default"])(Story, context, 'The `PageHeader` component will be deprecated in Astro-UI 2.0.0.');
+  }],
   argTypes: {
     title: {
       control: {

package/lib/cjs/components/RadioGroupField/RadioGroupField.js

@@ -98,17 +98,21 @@ var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, radioGroupProps), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
     isDisabled: isDisabled,
     hintText: hintText,
-    isRequired: isRequired
-  }, labelProps), label), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
-    status: status
-  }, helperText), (0, _react2.jsx)(_Box["default"], {
+    isRequired: isRequired,
+    variant: "forms.label.radioGroup"
+  }, labelProps), label), (0, _react2.jsx)(_Box["default"], {
     variant: "forms.radioGroupWrapper",
     isRow: orientation === _orientation["default"].HORIZONTAL
   }, (0, _react2.jsx)(_RadioField.RadioContext.Provider, {
     value: _objectSpread({
       isDisabled: isDisabled
     }, state)
-  }, children)));
+  }, children)), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status,
+    sx: {
+      pt: 'xs'
+    }
+  }, helperText));
 });
 RadioGroupField.propTypes = {
   /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.WithoutStatusIndicator = exports.AsyncLoading = exports.DynamicItems = exports.HelperText = exports.NoOptionsAvailable = exports.DisabledOptions = exports.DisabledField = exports.WithNoneOption = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.WithCustomHeight = exports.WithSections = exports.Default = exports["default"] = void 0;
+exports.WithoutStatusIndicator = exports.AsyncLoading = exports.DynamicItems = exports.HelperText = exports.NoOptionsAvailable = exports.DisabledOptions = exports.DisabledField = exports.WithNoneOption = exports.Controlled = exports.FloatLabel = exports.WithCustomHeight = exports.WithSections = exports.Default = exports["default"] = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
@@ -42,8 +42,6 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _constants = require("../Label/constants");
 
-var _Box = _interopRequireDefault(require("../Box"));
-
 var _react2 = require("@emotion/react");
 
 var _context, _context2;
@@ -239,55 +237,6 @@ var FloatLabel = function FloatLabel() {
 
 exports.FloatLabel = FloatLabel;
 
-var LeftLabel = function LeftLabel() {
-  return (0, _react2.jsx)(_Box["default"], {
-    gap: "xl",
-    width: "100%"
-  }, (0, _react2.jsx)(_index.SelectField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    labelMode: "left"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Example Label that is much longer than the previous one",
-    labelMode: "left"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")));
-};
-
-exports.LeftLabel = LeftLabel;
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
-
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('yellow'),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -355,7 +304,7 @@ var DisabledOptions = function DisabledOptions() {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
-  }, "Blue (disabled)"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -365,8 +314,7 @@ exports.DisabledOptions = DisabledOptions;
 var NoOptionsAvailable = function NoOptionsAvailable() {
   return (0, _react2.jsx)(_index.SelectField, {
     label: "Select an option...",
-    isDisabled: true,
-    defaultText: "No options available"
+    placeholder: "No options available"
   });
 };
 

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.ContentSlots = exports.TabPanelProps = exports.Orientation = exports.CustomTabLine = exports.DisabledAllTabs = exports.DisabledSingleTab = exports.Centered = exports.WithTooltips = exports.WithIcon = exports.Controlled = exports.Uncontrolled = exports["default"] = void 0;
+exports.ContentSlots = exports.TabPanelProps = exports.CustomTabLine = exports.DisabledAllTabs = exports.DisabledSingleTab = exports.Centered = exports.WithTooltips = exports.WithIcon = exports.Controlled = exports.Uncontrolled = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -212,20 +212,6 @@ var CustomTabLine = function CustomTabLine() {
 
 exports.CustomTabLine = CustomTabLine;
 
-var Orientation = function Orientation() {
-  return (0, _react2.jsx)(_Tabs["default"], {
-    orientation: "vertical",
-    items: tabs
-  }, function (item) {
-    return (0, _react2.jsx)(_Tab["default"], {
-      key: item.name,
-      title: item.name
-    }, item.children);
-  });
-};
-
-exports.Orientation = Orientation;
-
 var TabPanelProps = function TabPanelProps() {
   return (0, _react2.jsx)(_Tabs["default"], {
     tabPanelProps: {

package/lib/cjs/hooks/useField/useField.js

@@ -186,8 +186,8 @@ var useField = function useField() {
   }),
       focusWithinProps = _useFocusWithin.focusWithinProps;
 
-  var isFloatLabel = labelMode === _constants.modes.FLOAT;
-  var isLeftLabel = labelMode === _constants.modes.LEFT;
+  var isFloatLabel = labelMode === _constants.modes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.FLOAT;
+  var isLeftLabel = labelMode === _constants.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {

package/lib/cjs/styles/forms/checkbox.js

@@ -11,7 +11,6 @@ exports.checkbox = void 0;
 // Default checkbox
 var checkbox = {
   color: 'active',
-  mr: 'sm',
   'input:focus ~ &': {
     bg: 'transparent'
   },

package/lib/cjs/styles/forms/input.js

@@ -210,5 +210,5 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
-  pr: '27px'
+  pr: '28px'
 });

package/lib/cjs/styles/forms/label.js

@@ -91,4 +91,7 @@ label.checkbox = _objectSpread(_objectSpread({}, _text.text.base), {}, {
   width: 'auto',
   alignItems: 'center',
   cursor: 'pointer'
+});
+label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
+  fontWeight: 1
 });

package/lib/cjs/styles/forms/radio.js

@@ -13,7 +13,7 @@ var radio = {
   width: 20,
   height: 20,
   color: 'active',
-  mr: 'sm',
+  mr: 'xs',
   // override the default focus styling
   'input:focus ~ &': {
     bg: 'transparent'

package/lib/cjs/styles/forms/switch.js

@@ -8,7 +8,9 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.thumb = exports.thumbContainer = exports.container = exports.label = void 0;
 var label = {
-  alignItems: 'center'
+  alignItems: 'center',
+  fontSize: 'md',
+  color: 'text.primary'
 };
 exports.label = label;
 var container = {

package/lib/cjs/styles/variants/boxes.js

@@ -55,7 +55,10 @@ var radioContainer = {
 }; // Used to add spacing for content shown when a radio is checked
 
 var radioCheckedContent = {
-  py: 'md'
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
 };
 
 var listItem = _objectSpread(_objectSpread({}, base), {}, {

package/lib/cjs/styles/variants/text.js

@@ -63,7 +63,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
 
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
-  pb: 'sm',
   '&.is-default': {
     color: 'text.secondary'
   },

package/lib/components/CheckboxField/CheckboxField.js

@@ -71,7 +71,10 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef
   }, fieldControlProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
+    status: status,
+    sx: {
+      pt: 7
+    }
   }, helperText));
 });
 CheckboxField.propTypes = {

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -25,7 +25,6 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Text, _extends({
     ref: ref,
-    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {