@pingux/astro 2.52.0-alpha.0 → 2.52.0-alpha.2

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

@@ -21,7 +21,7 @@ var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _constants = require("../../components/Label/constants");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _ = require("..");
@@ -34,8 +34,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * @returns {{}} Prop objects to be spread into field components.
  */
 
-// TODO: replace with LabelProps instead of ThemeUILabelProps
-// once Label component is rewritten to ts
 var useField = function useField(props) {
   var autocomplete = props.autocomplete,
     autoComplete = props.autoComplete,
@@ -152,8 +150,8 @@ var useField = function useField(props) {
       onFocusWithinChange: setFocusWithin
     }),
     focusWithinProps = _useFocusWithin.focusWithinProps;
-  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 isFloatLabel = labelMode === _labelModes.modes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _labelModes.modes.FLOAT;
+  var isLeftLabel = labelMode === _labelModes.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _labelModes.modes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
   var _useStatusClasses4 = (0, _.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
       'field-container': true,

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _reactHooks = require("@testing-library/react-hooks");
-var _constants = require("../../components/Label/constants");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _useField = _interopRequireDefault(require("./useField"));
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -166,7 +166,7 @@ test('should return isFloatLabelActive class for container', function () {
 
   // Has the class if the value is valid and label mode is float
   rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
-    labelMode: _constants.modes.FLOAT
+    labelMode: _labelModes.modes.FLOAT
   }));
   expect(result.current.fieldContainerProps.className).toContain('is-float-label-active');
 
@@ -198,7 +198,7 @@ test('should return isFloatLabelActive class for container', function () {
 
   // Has the class if the mode is float and the isFloatLabelActive containerProp is passed in
   rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
-    labelMode: _constants.modes.FLOAT,
+    labelMode: _labelModes.modes.FLOAT,
     containerProps: {
       isFloatLabelActive: true
     }
@@ -218,7 +218,7 @@ test('should return isLeftLabel class for container', function () {
 
   // Has the class if the value is valid and label mode is left
   rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
-    labelMode: _constants.modes.LEFT
+    labelMode: _labelModes.modes.LEFT
   }));
   expect(result.current.fieldContainerProps.className).toContain('is-left-label');
 });

package/lib/cjs/hooks/useSelectField/useSelectField.d.ts

@@ -3,8 +3,7 @@ import { AriaButtonProps } from 'react-aria';
 import { SelectState } from 'react-stately';
 import { CollectionChildren } from '@react-types/shared';
 import { LabelProps as ThemeUILabelProps } from 'theme-ui';
-import { Axis, BoxProps, FocusableElement, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
-import { LabelMode } from '../useColumnStyles/useColumnStyles';
+import { Axis, BoxProps, FocusableElement, LabelModeProps, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
 import { FieldControlInputProps } from '../useField/useField';
 interface UseSelectFieldProps<T> {
     children: CollectionChildren<T>;
@@ -35,7 +34,7 @@ interface UseSelectFieldProps<T> {
     listBoxProps?: ListBoxProps;
     labelProps?: ThemeUILabelProps;
     containerProps?: BoxProps;
-    labelMode: LabelMode;
+    labelMode: LabelModeProps;
 }
 interface UseSelectFieldReturnProps {
     columnStyleProps: StyleProps;

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -23,10 +23,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _utils = require("@react-aria/utils");
-var _constants = require("../../components/Label/constants");
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox"));
 var _PopoverContainer = _interopRequireDefault(require("../../components/PopoverContainer"));
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _ = require("..");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -117,7 +117,7 @@ var useSelectField = function useSelectField(props, ref) {
   delete menuProps.shouldFocusOnHover;
   delete menuProps.disallowEmptySelection;
   var _useField = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
-      placeholder: props.labelMode === _constants.modes.FLOAT ? '' : placeholder,
+      placeholder: props.labelMode === _labelModes.modes.FLOAT ? '' : placeholder,
       labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
       containerProps: _objectSpread({
         isFloatLabelActive: !!state.selectedItem

package/lib/cjs/types/index.d.ts

@@ -12,6 +12,7 @@ export * from './iconBadge';
 export * from './iconButton';
 export * from './input';
 export * from './item';
+export * from './label';
 export * from './link';
 export * from './listBox';
 export * from './listItem';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -161,8 +161,19 @@ _forEachInstanceProperty(_context14 = _Object$keys(_item)).call(_context14, func
     }
   });
 });
+var _label = require("./label");
+_forEachInstanceProperty(_context15 = _Object$keys(_label)).call(_context15, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _label[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _label[key];
+    }
+  });
+});
 var _link = require("./link");
-_forEachInstanceProperty(_context15 = _Object$keys(_link)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_link)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_link)).call(_context15, func
   });
 });
 var _listBox = require("./listBox");
-_forEachInstanceProperty(_context16 = _Object$keys(_listBox)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_listBox)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_listBox)).call(_context16, f
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context17 = _Object$keys(_listItem)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_listItem)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_listItem)).call(_context17,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context18 = _Object$keys(_loader)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_loader)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_loader)).call(_context18, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context19 = _Object$keys(_menu)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_menu)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_menu)).call(_context19, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context20 = _Object$keys(_menuItem)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_menuItem)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_menuItem)).call(_context20,
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context21 = _Object$keys(_overlayPanel)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_overlayPanel)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context22 = _Object$keys(_popoverContainer)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_popoverContainer)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context23 = _Object$keys(_popoverMenu)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_popoverMenu)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context24 = _Object$keys(_requirementsList)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_requirementsList)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context25 = _Object$keys(_rockerButtonGroup)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_rockerButtonGroup)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context26 = _Object$keys(_scrollBox)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_scrollBox)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_scrollBox)).call(_context26,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context27 = _Object$keys(_separator)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_separator)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_separator)).call(_context27,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context28 = _Object$keys(_shared)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_shared)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_shared)).call(_context28, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context29 = _Object$keys(_table)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_table)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_table)).call(_context29, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context30 = _Object$keys(_text)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_text)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_text)).call(_context30, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context31 = _Object$keys(_tooltipTrigger)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_tooltipTrigger)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/label.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { LabelProps as ThemeUILabelProps } from 'theme-ui';
+import { TestingAttributes } from './shared/test';
+import { HelpHintProps } from './helpHint';
+export type LabelModeProps = 'default' | 'float' | 'left';
+export interface LabelProps extends ThemeUILabelProps, TestingAttributes {
+    children?: React.ReactNode;
+    className?: string;
+    /** Whether the label has disabled styling applied. */
+    isDisabled?: boolean;
+    /** Whether the label has required indicator styling applied. */
+    isRequired?: boolean;
+    /** Determines the behavior pattern for the label. */
+    mode?: LabelModeProps;
+    labelMode?: LabelModeProps;
+    /** The visual component used to mark an input as required within the label. */
+    requiredIndicator?: React.ReactNode;
+    /** If present this prop will cause a help hint to render in the label. */
+    hintText?: string;
+    /** Props object that is spread directly into the helphint element. */
+    helpHintProps?: HelpHintProps;
+    statusClasses?: {
+        [className: string]: boolean;
+    };
+}

package/lib/cjs/types/label.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/style.d.ts

@@ -20,4 +20,7 @@ export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
 type IconTShirtSize = 'xs' | 'sm' | 'md';
 type pixelSize = 'em' | 'px' | 'rem';
 export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
+export type overflowWrap = 'normal' | 'break-word' | 'anywhere' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+export type wordBreak = 'normal' | 'break-all' | 'keep-all' | 'break-word' | 'initial' | 'inherit';
+export type wordWrap = 'normal' | 'break-word' | 'initial' | 'inherit';
 export {};

package/lib/cjs/utils/devUtils/constants/labelModes.d.ts

@@ -0,0 +1,5 @@
+export declare const modes: {
+    DEFAULT: string;
+    FLOAT: string;
+    LEFT: string;
+};

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -13,8 +13,10 @@ import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect, useState } from 'react';
+import MenuDown from '@pingux/mdi-react/MenuDownIcon';
+import MenuRight from '@pingux/mdi-react/MenuRightIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, CheckboxField, Link, Text } from '../../index';
+import { Badge, Box, CheckboxField, IconButtonToggle, Link, SwitchField, Text } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
@@ -104,19 +106,138 @@ export var HelperText = function HelperText() {
     label: "Click me"
   });
 };
+export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isReadOnly = _useState2[0],
+    setIsReadOnly = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  // Whether the parent checkbox is indeterminate (default is true for our example)
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isIndeterminate = _useState6[0],
+    setIsIndeterminate = _useState6[1];
+  // Whether the parent checkbox should be checked, this is set independently from indeterminism
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isCompleted = _useState8[0],
+    setIsCompleted = _useState8[1];
+  // The state of the sub-checkboxes
+  var _useState9 = useState([{
+      label: 'Apple Chunks',
+      isSelected: true
+    }, {
+      label: 'Blueberries',
+      isSelected: false
+    }, {
+      label: 'Grapes',
+      isSelected: false
+    }, {
+      label: 'Strawberry Slices',
+      isSelected: true
+    }]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    subCheckboxes = _useState10[0],
+    setSubCheckboxes = _useState10[1];
+
+  // Determine which checkbox needs its state updated
+  var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {
+    var changeAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var newSubCheckboxes = _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+      if (changeAll || index === changedIndex) return _objectSpread(_objectSpread({}, checkbox), {}, {
+        isSelected: isSelected
+      });
+      return checkbox;
+    });
+    setSubCheckboxes(newSubCheckboxes);
+  };
+
+  // Update all sub-checkbox states when the parent checkbox is pressed
+  var handleParentCheckboxChange = function handleParentCheckboxChange(isSelected) {
+    handleSubCheckboxChange(isSelected, null, true);
+  };
+  useEffect(function () {
+    // Determine if all sub-checkboxes are selected / unselected or if there is a mix
+    // and update the parent checkbox
+    if (_everyInstanceProperty(subCheckboxes).call(subCheckboxes, function (item) {
+      return item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(true);
+    } else if (_everyInstanceProperty(subCheckboxes).call(subCheckboxes, function (item) {
+      return !item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(false);
+    } else {
+      setIsIndeterminate(true);
+      setIsCompleted(false);
+    }
+  }, [isIndeterminate, subCheckboxes]);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SwitchField, {
+    isSelected: isReadOnly,
+    label: "Is Read Only",
+    onChange: setIsReadOnly,
+    value: "my-switch"
+  }), ___EmotionJSX("br", null), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: MenuDown,
+    defaultIcon: MenuRight,
+    onToggle: setIsExpanded,
+    isToggled: isExpanded,
+    buttonProps: {
+      'aria-label': isExpanded ? 'menu down' : 'menu up',
+      'aria-controls': 'expanded-checkboxes',
+      'aria-expanded': isExpanded
+    },
+    iconProps: {
+      size: 'sm'
+    }
+  }), isReadOnly ? ___EmotionJSX(Text, null, "Fruit Salad Recipe") : ___EmotionJSX(CheckboxField, {
+    label: "Fruit Salad Recipe",
+    isIndeterminate: isIndeterminate,
+    isSelected: isCompleted,
+    onChange: handleParentCheckboxChange
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Badge, {
+    ml: "sm",
+    label: subCheckboxes.length,
+    variant: "countNeutral"
+  }))), ___EmotionJSX(Box, {
+    ml: "50px",
+    id: "expanded-checkboxes"
+  }, isExpanded && _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      height: "24px"
+    }, isReadOnly ? ___EmotionJSX(Text, null, checkbox.label) : ___EmotionJSX(CheckboxField, {
+      key: checkbox.label,
+      label: checkbox.label,
+      isSelected: checkbox.isSelected,
+      onChange: function onChange(isSelected) {
+        return handleSubCheckboxChange(isSelected, index);
+      }
+    }));
+  })));
+};
 export var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isIndeterminate = _useState2[0],
-    setIsIndeterminate = _useState2[1];
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isIndeterminate = _useState12[0],
+    setIsIndeterminate = _useState12[1];
   // Whether the parent checkbox should be checked, this is set independently from indeterminism
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isCompleted = _useState4[0],
-    setIsCompleted = _useState4[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isCompleted = _useState14[0],
+    setIsCompleted = _useState14[1];
   // The state of the sub-checkboxes
-  var _useState5 = useState([{
+  var _useState15 = useState([{
       label: 'Apple Chunks',
       isSelected: true
     }, {
@@ -129,9 +250,9 @@ export var Indeterminate = function Indeterminate() {
       label: 'Strawberry Slices',
       isSelected: true
     }]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    subCheckboxes = _useState6[0],
-    setSubCheckboxes = _useState6[1];
+    _useState16 = _slicedToArray(_useState15, 2),
+    subCheckboxes = _useState16[0],
+    setSubCheckboxes = _useState16[1];
 
   // Determine which checkbox needs its state updated
   var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {

package/lib/components/Label/Label.js

@@ -2,22 +2,20 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _styled from "@emotion/styled/base";
 var _excluded = ["children", "className", "isDisabled", "isRequired", "mode", "requiredIndicator", "hintText", "helpHintProps"];
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import { flexbox, layout } from 'styled-system';
 import { Label as ThemeUILabel } from 'theme-ui';
 import { usePropWarning, useStatusClasses } from '../../hooks';
+import { modes } from '../../utils/devUtils/constants/labelModes';
 import Box from '../Box';
 import HelpHint from '../HelpHint';
-import { modes } from './constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ExtendedLabel = /*#__PURE__*/_styled(ThemeUILabel, process.env.NODE_ENV === "production" ? {
-  target: "e172msu10"
+  target: "e19mxf30"
 } : {
-  target: "e172msu10",
+  target: "e19mxf30",
   label: "ExtendedLabel"
-})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlzQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MYWJlbC9MYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGZsZXhib3gsIGxheW91dCB9IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IHsgTGFiZWwgYXMgVGhlbWVVSUxhYmVsIH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgeyB1c2VQcm9wV2FybmluZywgdXNlU3RhdHVzQ2xhc3NlcyB9IGZyb20gJy4uLy4uL2hvb2tzJztcbmltcG9ydCBCb3ggZnJvbSAnLi4vQm94JztcbmltcG9ydCBIZWxwSGludCBmcm9tICcuLi9IZWxwSGludCc7XG5cbmltcG9ydCB7IG1vZGVzIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG5jb25zdCBFeHRlbmRlZExhYmVsID0gc3R5bGVkKFRoZW1lVUlMYWJlbCkobGF5b3V0LCBmbGV4Ym94KTtcblxuY29uc3QgZGVmYXVsdEluZGljYXRvciA9IChcbiAgPEJveCB2YXJpYW50PVwiZm9ybXMubGFiZWwuaW5kaWNhdG9yXCI+XG4gICAgKlxuICA8L0JveD5cbik7XG5cbi8qKlxuICogQmFzZSBsYWJlbCBmb3IgYW4gaW5wdXQuXG4gKlxuICogQWNjZXB0cyBtb3N0IG9mIHRoZSBzdHlsaW5nIHByb3BzIGZyb20gW3N0eWxlZC1zeXN0ZW1dKGh0dHBzOi8vc3R5bGVkLXN5c3RlbS5jb20vdGFibGUpLlxuICogQnVpbHQgb24gdG9wIG9mIHRoZSBbTGFiZWwgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9sYWJlbCkuXG4gKlxuICogKipOT1RFKio6IFNwZWNpYWxpemVkIGZpZWxkIGNvbXBvbmVudHMgY29udGFpbiBidWlsdC1pbiBzdXBwb3J0IGZvciBsYWJlbHMuIEl0J3NcbiAqIHJlY29tbWVuZGVkIHRvIHVzZSB0aG9zZSBpbnN0ZWFkIG9mIGEgc3RhbmRhbG9uZSBgTGFiZWxgLlxuICovXG5cbmNvbnN0IExhYmVsID0gZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgY2hpbGRyZW4sXG4gICAgY2xhc3NOYW1lLFxuICAgIGlzRGlzYWJsZWQsXG4gICAgaXNSZXF1aXJlZCxcbiAgICBtb2RlLFxuICAgIHJlcXVpcmVkSW5kaWNhdG9yLFxuICAgIGhpbnRUZXh0LFxuICAgIGhlbHBIaW50UHJvcHMsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcblxuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBjb25zdCB7IGNsYXNzTmFtZXMgfSA9IHVzZVN0YXR1c0NsYXNzZXMoY2xhc3NOYW1lLCB7XG4gICAgaXNEaXNhYmxlZCxcbiAgICBpc1JlcXVpcmVkLFxuICAgIGlzRmxvYXRMYWJlbDogbW9kZSA9PT0gbW9kZXMuRkxPQVQsXG4gICAgaXNMZWZ0TGFiZWw6IG1vZGUgPT09IG1vZGVzLkxFRlQsXG4gIH0pO1xuXG4gIHJldHVybiAoXG4gICAgPEV4dGVuZGVkTGFiZWxcbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgey4uLm90aGVyc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7XG4gICAgICAgIGlzUmVxdWlyZWRcbiAgICAgICAgJiYgKHJlcXVpcmVkSW5kaWNhdG9yIHx8IGRlZmF1bHRJbmRpY2F0b3IpXG4gICAgICB9XG4gICAgICB7XG4gICAgICAgIGhpbnRUZXh0XG4gICAgICAgICYmIDxIZWxwSGludCB7Li4uaGVscEhpbnRQcm9wc30+e2hpbnRUZXh0fTwvSGVscEhpbnQ+XG4gICAgICB9XG4gICAgPC9FeHRlbmRlZExhYmVsPlxuICApO1xufSk7XG5cbkxhYmVsLnByb3BUeXBlcyA9IHtcbiAgLyoqIFdoZXRoZXIgdGhlIGxhYmVsIGhhcyBkaXNhYmxlZCBzdHlsaW5nIGFwcGxpZWQuICovXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICAvKiogV2hldGhlciB0aGUgbGFiZWwgaGFzIHJlcXVpcmVkIGluZGljYXRvciBzdHlsaW5nIGFwcGxpZWQuICovXG4gIGlzUmVxdWlyZWQ6IFByb3BUeXBlcy5ib29sLFxuICAvKiogRGV0ZXJtaW5lcyB0aGUgYmVoYXZpb3IgcGF0dGVybiBmb3IgdGhlIGxhYmVsLiAqL1xuICBtb2RlOiBQcm9wVHlwZXMub25lT2YoT2JqZWN0LnZhbHVlcyhtb2RlcykpLFxuICAvKiogVGhlIHZpc3VhbCBjb21wb25lbnQgdXNlZCB0byBtYXJrIGFuIGlucHV0IGFzIHJlcXVpcmVkIHdpdGhpbiB0aGUgbGFiZWwuICovXG4gIHJlcXVpcmVkSW5kaWNhdG9yOiBQcm9wVHlwZXMubm9kZSxcbiAgLyoqIElmIHByZXNlbnQgdGhpcyBwcm9wIHdpbGwgY2F1c2UgYSBoZWxwIGhpbnQgdG8gcmVuZGVyIGluIHRoZSBsYWJlbC4gKi9cbiAgaGludFRleHQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKiBQcm9wcyBvYmplY3QgdGhhdCBpcyBzcHJlYWQgZGlyZWN0bHkgaW50byB0aGUgaGVscGhpbnQgZWxlbWVudC4gKi9cbiAgaGVscEhpbnRQcm9wczogUHJvcFR5cGVzLnNoYXBlKHt9KSxcbn07XG5cbkxhYmVsLmRlZmF1bHRQcm9wcyA9IHtcbiAgbW9kZTogbW9kZXMuREVGQVVMVCxcbn07XG5cbkxhYmVsLmRpc3BsYXlOYW1lID0gJ0xhYmVsJztcbmV4cG9ydCBkZWZhdWx0IExhYmVsO1xuIl19 */");
+})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXc0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGFiZWwvTGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IExhYmVsIGFzIFRoZW1lVUlMYWJlbCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbE1vZGVQcm9wcywgTGFiZWxQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcbmltcG9ydCB7IG1vZGVzIH0gZnJvbSAnLi4vLi4vdXRpbHMvZGV2VXRpbHMvY29uc3RhbnRzL2xhYmVsTW9kZXMnO1xuaW1wb3J0IEJveCBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IEhlbHBIaW50IGZyb20gJy4uL0hlbHBIaW50JztcblxuY29uc3QgRXh0ZW5kZWRMYWJlbCA9IHN0eWxlZChUaGVtZVVJTGFiZWwpKGxheW91dCwgZmxleGJveCk7XG5cbmNvbnN0IGRlZmF1bHRJbmRpY2F0b3IgPSAoXG4gIDxCb3ggdmFyaWFudD1cImZvcm1zLmxhYmVsLmluZGljYXRvclwiPlxuICAgICpcbiAgPC9Cb3g+XG4pO1xuXG4vKipcbiAqIEJhc2UgbGFiZWwgZm9yIGFuIGlucHV0LlxuICpcbiAqIEFjY2VwdHMgbW9zdCBvZiB0aGUgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiB0aGUgW0xhYmVsIGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvbGFiZWwpLlxuICpcbiAqICoqTk9URSoqOiBTcGVjaWFsaXplZCBmaWVsZCBjb21wb25lbnRzIGNvbnRhaW4gYnVpbHQtaW4gc3VwcG9ydCBmb3IgbGFiZWxzLiBJdCdzXG4gKiByZWNvbW1lbmRlZCB0byB1c2UgdGhvc2UgaW5zdGVhZCBvZiBhIHN0YW5kYWxvbmUgYExhYmVsYC5cbiAqL1xuXG5jb25zdCBMYWJlbCA9IGZvcndhcmRSZWY8SFRNTExhYmVsRWxlbWVudCwgTGFiZWxQcm9wcz4oKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGNoaWxkcmVuLFxuICAgIGNsYXNzTmFtZSxcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgbW9kZSA9IG1vZGVzLkRFRkFVTFQgYXMgTGFiZWxNb2RlUHJvcHMsXG4gICAgcmVxdWlyZWRJbmRpY2F0b3IsXG4gICAgaGludFRleHQsXG4gICAgaGVscEhpbnRQcm9wcyxcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuXG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHtcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgaXNGbG9hdExhYmVsOiBtb2RlID09PSBtb2Rlcy5GTE9BVCxcbiAgICBpc0xlZnRMYWJlbDogbW9kZSA9PT0gbW9kZXMuTEVGVCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRMYWJlbFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtcbiAgICAgICAgaXNSZXF1aXJlZFxuICAgICAgICAmJiAocmVxdWlyZWRJbmRpY2F0b3IgfHwgZGVmYXVsdEluZGljYXRvcilcbiAgICAgIH1cbiAgICAgIHtcbiAgICAgICAgaGludFRleHRcbiAgICAgICAgJiYgPEhlbHBIaW50IHsuLi5oZWxwSGludFByb3BzfT57aGludFRleHR9PC9IZWxwSGludD5cbiAgICAgIH1cbiAgICA8L0V4dGVuZGVkTGFiZWw+XG4gICk7XG59KTtcblxuTGFiZWwuZGlzcGxheU5hbWUgPSAnTGFiZWwnO1xuZXhwb3J0IGRlZmF1bHQgTGFiZWw7XG4iXX0= */");
 var defaultIndicator = ___EmotionJSX(Box, {
   variant: "forms.label.indicator"
 }, "*");
@@ -37,7 +35,8 @@ var Label = /*#__PURE__*/forwardRef(function (props, ref) {
     className = props.className,
     isDisabled = props.isDisabled,
     isRequired = props.isRequired,
-    mode = props.mode,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? modes.DEFAULT : _props$mode,
     requiredIndicator = props.requiredIndicator,
     hintText = props.hintText,
     helpHintProps = props.helpHintProps,
@@ -56,22 +55,5 @@ var Label = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames
   }, others), children, isRequired && (requiredIndicator || defaultIndicator), hintText && ___EmotionJSX(HelpHint, helpHintProps, hintText));
 });
-Label.propTypes = {
-  /** Whether the label has disabled styling applied. */
-  isDisabled: PropTypes.bool,
-  /** Whether the label has required indicator styling applied. */
-  isRequired: PropTypes.bool,
-  /** Determines the behavior pattern for the label. */
-  mode: PropTypes.oneOf(_Object$values(modes)),
-  /** The visual component used to mark an input as required within the label. */
-  requiredIndicator: PropTypes.node,
-  /** If present this prop will cause a help hint to render in the label. */
-  hintText: PropTypes.string,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: PropTypes.shape({})
-};
-Label.defaultProps = {
-  mode: modes.DEFAULT
-};
 Label.displayName = 'Label';
 export default Label;

package/lib/components/Label/Label.stories.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Label } from '../../index';
-import { modes } from './constants';
+import { modes } from '../../utils/devUtils/constants/labelModes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/Base Components/Label',

package/lib/components/Label/Label.styles.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Styles for default label and variants go here.
+
 import { text } from '../Text/Text.styles';
 var activeFloatLabel = {
   fontWeight: 0,

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

@@ -31,10 +31,10 @@ import { OverlayProvider } from 'react-aria';
 import { useAsyncList } from 'react-stately';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Item, Section, SelectField, Separator } from '../../index';
+import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
-import { modes as labelModes } from '../Label/constants';
 import SelectFieldReadme from './SelectField.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var animals = [{

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -18,6 +18,7 @@ import { HiddenSelect } from 'react-aria';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
+import { modes } from '../../utils/devUtils/constants/labelModes';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
@@ -25,7 +26,6 @@ import Button from '../Button';
 import FieldHelperText from '../FieldHelperText';
 import Icon from '../Icon';
 import Label from '../Label';
-import { modes } from '../Label/constants';
 import Loader from '../Loader';
 import Text from '../Text';