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

package/lib/cjs/components/AccordionGroup/Accordion.styles.d.ts

@@ -51,10 +51,10 @@ declare const _default: {
         };
         fontSize: string;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;

package/lib/cjs/components/Breadcrumbs/Breadcrumb.styles.d.ts

@@ -44,10 +44,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         outline: string;
         alignItems: string;

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -4,10 +4,10 @@ export declare const base: {
     color: string;
     fontFamily: string;
     display: string;
-    overflowWrap: string;
+    overflowWrap: import("../..").overflowWrap;
     maxWidth: string;
-    wordWrap: string;
-    wordBreak: string;
+    wordWrap: import("../..").wordWrap;
+    wordBreak: import("../..").wordBreak;
     cursor: string;
     height: string;
     lineHeight: string;
@@ -52,10 +52,10 @@ export declare const text: {
     fontSize: string;
     fontWeight: number;
     fontFamily: string;
-    overflowWrap: string;
+    overflowWrap: import("../..").overflowWrap;
     maxWidth: string;
-    wordWrap: string;
-    wordBreak: string;
+    wordWrap: import("../..").wordWrap;
+    wordBreak: import("../..").wordBreak;
     cursor: string;
     minWidth: string;
     outline: string;
@@ -97,10 +97,10 @@ export declare const link: {
     fontSize: string;
     fontWeight: number;
     fontFamily: string;
-    overflowWrap: string;
+    overflowWrap: import("../..").overflowWrap;
     maxWidth: string;
-    wordWrap: string;
-    wordBreak: string;
+    wordWrap: import("../..").wordWrap;
+    wordBreak: import("../..").wordBreak;
     cursor: string;
     minWidth: string;
     outline: string;
@@ -270,10 +270,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -317,10 +317,10 @@ declare const _default: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -348,10 +348,10 @@ declare const _default: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -397,10 +397,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         lineHeight: string;
         minWidth: string;
@@ -444,10 +444,10 @@ declare const _default: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -497,10 +497,10 @@ declare const _default: {
         fontWeight: number;
         color: string;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         minWidth: string;
         padding: string;
@@ -553,10 +553,10 @@ declare const _default: {
         };
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         minWidth: string;
         padding: string;
@@ -610,10 +610,10 @@ declare const _default: {
         };
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         minWidth: string;
         outline: string;
@@ -660,10 +660,10 @@ declare const _default: {
         fontWeight: number;
         color: string;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         minWidth: string;
         outline: string;
@@ -700,10 +700,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         minWidth: string;
         outline: string;
@@ -740,10 +740,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -785,10 +785,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -818,10 +818,10 @@ declare const _default: {
         fontSize: string;
         fontWeight: number;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;
@@ -866,10 +866,10 @@ declare const _default: {
         fontWeight: number;
         color: string;
         fontFamily: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         cursor: string;
         height: string;
         lineHeight: string;

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

@@ -14,12 +14,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.ExpandableAndToggleableIndeterminate = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
+var _MenuRightIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuRightIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -121,19 +123,139 @@ var HelperText = function HelperText() {
   });
 };
 exports.HelperText = HelperText;
+var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isReadOnly = _useState2[0],
+    setIsReadOnly = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  // Whether the parent checkbox is indeterminate (default is true for our example)
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isIndeterminate = _useState6[0],
+    setIsIndeterminate = _useState6[1];
+  // Whether the parent checkbox should be checked, this is set independently from indeterminism
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isCompleted = _useState8[0],
+    setIsCompleted = _useState8[1];
+  // The state of the sub-checkboxes
+  var _useState9 = (0, _react.useState)([{
+      label: 'Apple Chunks',
+      isSelected: true
+    }, {
+      label: 'Blueberries',
+      isSelected: false
+    }, {
+      label: 'Grapes',
+      isSelected: false
+    }, {
+      label: 'Strawberry Slices',
+      isSelected: true
+    }]),
+    _useState10 = (0, _slicedToArray2["default"])(_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 = (0, _map["default"])(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);
+  };
+  (0, _react.useEffect)(function () {
+    // Determine if all sub-checkboxes are selected / unselected or if there is a mix
+    // and update the parent checkbox
+    if ((0, _every["default"])(subCheckboxes).call(subCheckboxes, function (item) {
+      return item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(true);
+    } else if ((0, _every["default"])(subCheckboxes).call(subCheckboxes, function (item) {
+      return !item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(false);
+    } else {
+      setIsIndeterminate(true);
+      setIsCompleted(false);
+    }
+  }, [isIndeterminate, subCheckboxes]);
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.SwitchField, {
+    isSelected: isReadOnly,
+    label: "Is Read Only",
+    onChange: setIsReadOnly,
+    value: "my-switch"
+  }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.IconButtonToggle, {
+    toggledIcon: _MenuDownIcon["default"],
+    defaultIcon: _MenuRightIcon["default"],
+    onToggle: setIsExpanded,
+    isToggled: isExpanded,
+    buttonProps: {
+      'aria-label': isExpanded ? 'menu down' : 'menu up',
+      'aria-controls': 'expanded-checkboxes',
+      'aria-expanded': isExpanded
+    },
+    iconProps: {
+      size: 'sm'
+    }
+  }), isReadOnly ? (0, _react2.jsx)(_index.Text, null, "Fruit Salad Recipe") : (0, _react2.jsx)(_index.CheckboxField, {
+    label: "Fruit Salad Recipe",
+    isIndeterminate: isIndeterminate,
+    isSelected: isCompleted,
+    onChange: handleParentCheckboxChange
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
+    ml: "sm",
+    label: subCheckboxes.length,
+    variant: "countNeutral"
+  }))), (0, _react2.jsx)(_index.Box, {
+    ml: "50px",
+    id: "expanded-checkboxes"
+  }, isExpanded && (0, _map["default"])(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center",
+      height: "24px"
+    }, isReadOnly ? (0, _react2.jsx)(_index.Text, null, checkbox.label) : (0, _react2.jsx)(_index.CheckboxField, {
+      key: checkbox.label,
+      label: checkbox.label,
+      isSelected: checkbox.isSelected,
+      onChange: function onChange(isSelected) {
+        return handleSubCheckboxChange(isSelected, index);
+      }
+    }));
+  })));
+};
+exports.ExpandableAndToggleableIndeterminate = ExpandableAndToggleableIndeterminate;
 var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isIndeterminate = _useState2[0],
-    setIsIndeterminate = _useState2[1];
+  var _useState11 = (0, _react.useState)(true),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    isIndeterminate = _useState12[0],
+    setIsIndeterminate = _useState12[1];
   // Whether the parent checkbox should be checked, this is set independently from indeterminism
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isCompleted = _useState4[0],
-    setIsCompleted = _useState4[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    isCompleted = _useState14[0],
+    setIsCompleted = _useState14[1];
   // The state of the sub-checkboxes
-  var _useState5 = (0, _react.useState)([{
+  var _useState15 = (0, _react.useState)([{
       label: 'Apple Chunks',
       isSelected: true
     }, {
@@ -146,9 +268,9 @@ var Indeterminate = function Indeterminate() {
       label: 'Strawberry Slices',
       isSelected: true
     }]),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    subCheckboxes = _useState6[0],
-    setSubCheckboxes = _useState6[1];
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    subCheckboxes = _useState16[0],
+    setSubCheckboxes = _useState16[1];
 
   // Determine which checkbox needs its state updated
   var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {

package/lib/cjs/components/FieldHelperText/FieldHelperText.styles.d.ts

@@ -18,10 +18,10 @@ declare const _default: {
             gridColumnEnd: number;
         };
         display: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
         accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
         alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;

package/lib/cjs/components/Label/Label.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LabelProps } from '../../types';
+/**
+ * Base label for an input.
+ *
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+ * Built on top of the [Label from Theme-UI](https://theme-ui.com/components/label).
+ *
+ * **NOTE**: Specialized field components contain built-in support for labels. It's
+ * recommended to use those instead of a standalone `Label`.
+ */
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export default Label;

package/lib/cjs/components/Label/Label.js

@@ -9,28 +9,26 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledSystem = require("styled-system");
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _Box = _interopRequireDefault(require("../Box"));
 var _HelpHint = _interopRequireDefault(require("../HelpHint"));
-var _constants = require("./constants");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "isDisabled", "isRequired", "mode", "requiredIndicator", "hintText", "helpHintProps"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ExtendedLabel = /*#__PURE__*/(0, _base["default"])(_themeUi.Label, process.env.NODE_ENV === "production" ? {
-  target: "e172msu10"
+  target: "e19mxf30"
 } : {
-  target: "e172msu10",
+  target: "e19mxf30",
   label: "ExtendedLabel"
-})(_styledSystem.layout, _styledSystem.flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlzQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MYWJlbC9MYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGZsZXhib3gsIGxheW91dCB9IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IHsgTGFiZWwgYXMgVGhlbWVVSUxhYmVsIH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgeyB1c2VQcm9wV2FybmluZywgdXNlU3RhdHVzQ2xhc3NlcyB9IGZyb20gJy4uLy4uL2hvb2tzJztcbmltcG9ydCBCb3ggZnJvbSAnLi4vQm94JztcbmltcG9ydCBIZWxwSGludCBmcm9tICcuLi9IZWxwSGludCc7XG5cbmltcG9ydCB7IG1vZGVzIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG5jb25zdCBFeHRlbmRlZExhYmVsID0gc3R5bGVkKFRoZW1lVUlMYWJlbCkobGF5b3V0LCBmbGV4Ym94KTtcblxuY29uc3QgZGVmYXVsdEluZGljYXRvciA9IChcbiAgPEJveCB2YXJpYW50PVwiZm9ybXMubGFiZWwuaW5kaWNhdG9yXCI+XG4gICAgKlxuICA8L0JveD5cbik7XG5cbi8qKlxuICogQmFzZSBsYWJlbCBmb3IgYW4gaW5wdXQuXG4gKlxuICogQWNjZXB0cyBtb3N0IG9mIHRoZSBzdHlsaW5nIHByb3BzIGZyb20gW3N0eWxlZC1zeXN0ZW1dKGh0dHBzOi8vc3R5bGVkLXN5c3RlbS5jb20vdGFibGUpLlxuICogQnVpbHQgb24gdG9wIG9mIHRoZSBbTGFiZWwgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9sYWJlbCkuXG4gKlxuICogKipOT1RFKio6IFNwZWNpYWxpemVkIGZpZWxkIGNvbXBvbmVudHMgY29udGFpbiBidWlsdC1pbiBzdXBwb3J0IGZvciBsYWJlbHMuIEl0J3NcbiAqIHJlY29tbWVuZGVkIHRvIHVzZSB0aG9zZSBpbnN0ZWFkIG9mIGEgc3RhbmRhbG9uZSBgTGFiZWxgLlxuICovXG5cbmNvbnN0IExhYmVsID0gZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgY2hpbGRyZW4sXG4gICAgY2xhc3NOYW1lLFxuICAgIGlzRGlzYWJsZWQsXG4gICAgaXNSZXF1aXJlZCxcbiAgICBtb2RlLFxuICAgIHJlcXVpcmVkSW5kaWNhdG9yLFxuICAgIGhpbnRUZXh0LFxuICAgIGhlbHBIaW50UHJvcHMsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcblxuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBjb25zdCB7IGNsYXNzTmFtZXMgfSA9IHVzZVN0YXR1c0NsYXNzZXMoY2xhc3NOYW1lLCB7XG4gICAgaXNEaXNhYmxlZCxcbiAgICBpc1JlcXVpcmVkLFxuICAgIGlzRmxvYXRMYWJlbDogbW9kZSA9PT0gbW9kZXMuRkxPQVQsXG4gICAgaXNMZWZ0TGFiZWw6IG1vZGUgPT09IG1vZGVzLkxFRlQsXG4gIH0pO1xuXG4gIHJldHVybiAoXG4gICAgPEV4dGVuZGVkTGFiZWxcbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgey4uLm90aGVyc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7XG4gICAgICAgIGlzUmVxdWlyZWRcbiAgICAgICAgJiYgKHJlcXVpcmVkSW5kaWNhdG9yIHx8IGRlZmF1bHRJbmRpY2F0b3IpXG4gICAgICB9XG4gICAgICB7XG4gICAgICAgIGhpbnRUZXh0XG4gICAgICAgICYmIDxIZWxwSGludCB7Li4uaGVscEhpbnRQcm9wc30+e2hpbnRUZXh0fTwvSGVscEhpbnQ+XG4gICAgICB9XG4gICAgPC9FeHRlbmRlZExhYmVsPlxuICApO1xufSk7XG5cbkxhYmVsLnByb3BUeXBlcyA9IHtcbiAgLyoqIFdoZXRoZXIgdGhlIGxhYmVsIGhhcyBkaXNhYmxlZCBzdHlsaW5nIGFwcGxpZWQuICovXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICAvKiogV2hldGhlciB0aGUgbGFiZWwgaGFzIHJlcXVpcmVkIGluZGljYXRvciBzdHlsaW5nIGFwcGxpZWQuICovXG4gIGlzUmVxdWlyZWQ6IFByb3BUeXBlcy5ib29sLFxuICAvKiogRGV0ZXJtaW5lcyB0aGUgYmVoYXZpb3IgcGF0dGVybiBmb3IgdGhlIGxhYmVsLiAqL1xuICBtb2RlOiBQcm9wVHlwZXMub25lT2YoT2JqZWN0LnZhbHVlcyhtb2RlcykpLFxuICAvKiogVGhlIHZpc3VhbCBjb21wb25lbnQgdXNlZCB0byBtYXJrIGFuIGlucHV0IGFzIHJlcXVpcmVkIHdpdGhpbiB0aGUgbGFiZWwuICovXG4gIHJlcXVpcmVkSW5kaWNhdG9yOiBQcm9wVHlwZXMubm9kZSxcbiAgLyoqIElmIHByZXNlbnQgdGhpcyBwcm9wIHdpbGwgY2F1c2UgYSBoZWxwIGhpbnQgdG8gcmVuZGVyIGluIHRoZSBsYWJlbC4gKi9cbiAgaGludFRleHQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKiBQcm9wcyBvYmplY3QgdGhhdCBpcyBzcHJlYWQgZGlyZWN0bHkgaW50byB0aGUgaGVscGhpbnQgZWxlbWVudC4gKi9cbiAgaGVscEhpbnRQcm9wczogUHJvcFR5cGVzLnNoYXBlKHt9KSxcbn07XG5cbkxhYmVsLmRlZmF1bHRQcm9wcyA9IHtcbiAgbW9kZTogbW9kZXMuREVGQVVMVCxcbn07XG5cbkxhYmVsLmRpc3BsYXlOYW1lID0gJ0xhYmVsJztcbmV4cG9ydCBkZWZhdWx0IExhYmVsO1xuIl19 */");
+})(_styledSystem.layout, _styledSystem.flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXc0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGFiZWwvTGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IExhYmVsIGFzIFRoZW1lVUlMYWJlbCB9IGZyb20gJ3RoZW1lLXVpJztcblxuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbE1vZGVQcm9wcywgTGFiZWxQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJztcbmltcG9ydCB7IG1vZGVzIH0gZnJvbSAnLi4vLi4vdXRpbHMvZGV2VXRpbHMvY29uc3RhbnRzL2xhYmVsTW9kZXMnO1xuaW1wb3J0IEJveCBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IEhlbHBIaW50IGZyb20gJy4uL0hlbHBIaW50JztcblxuY29uc3QgRXh0ZW5kZWRMYWJlbCA9IHN0eWxlZChUaGVtZVVJTGFiZWwpKGxheW91dCwgZmxleGJveCk7XG5cbmNvbnN0IGRlZmF1bHRJbmRpY2F0b3IgPSAoXG4gIDxCb3ggdmFyaWFudD1cImZvcm1zLmxhYmVsLmluZGljYXRvclwiPlxuICAgICpcbiAgPC9Cb3g+XG4pO1xuXG4vKipcbiAqIEJhc2UgbGFiZWwgZm9yIGFuIGlucHV0LlxuICpcbiAqIEFjY2VwdHMgbW9zdCBvZiB0aGUgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiB0aGUgW0xhYmVsIGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvbGFiZWwpLlxuICpcbiAqICoqTk9URSoqOiBTcGVjaWFsaXplZCBmaWVsZCBjb21wb25lbnRzIGNvbnRhaW4gYnVpbHQtaW4gc3VwcG9ydCBmb3IgbGFiZWxzLiBJdCdzXG4gKiByZWNvbW1lbmRlZCB0byB1c2UgdGhvc2UgaW5zdGVhZCBvZiBhIHN0YW5kYWxvbmUgYExhYmVsYC5cbiAqL1xuXG5jb25zdCBMYWJlbCA9IGZvcndhcmRSZWY8SFRNTExhYmVsRWxlbWVudCwgTGFiZWxQcm9wcz4oKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGNoaWxkcmVuLFxuICAgIGNsYXNzTmFtZSxcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgbW9kZSA9IG1vZGVzLkRFRkFVTFQgYXMgTGFiZWxNb2RlUHJvcHMsXG4gICAgcmVxdWlyZWRJbmRpY2F0b3IsXG4gICAgaGludFRleHQsXG4gICAgaGVscEhpbnRQcm9wcyxcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuXG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHtcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgaXNGbG9hdExhYmVsOiBtb2RlID09PSBtb2Rlcy5GTE9BVCxcbiAgICBpc0xlZnRMYWJlbDogbW9kZSA9PT0gbW9kZXMuTEVGVCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRMYWJlbFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtcbiAgICAgICAgaXNSZXF1aXJlZFxuICAgICAgICAmJiAocmVxdWlyZWRJbmRpY2F0b3IgfHwgZGVmYXVsdEluZGljYXRvcilcbiAgICAgIH1cbiAgICAgIHtcbiAgICAgICAgaGludFRleHRcbiAgICAgICAgJiYgPEhlbHBIaW50IHsuLi5oZWxwSGludFByb3BzfT57aGludFRleHR9PC9IZWxwSGludD5cbiAgICAgIH1cbiAgICA8L0V4dGVuZGVkTGFiZWw+XG4gICk7XG59KTtcblxuTGFiZWwuZGlzcGxheU5hbWUgPSAnTGFiZWwnO1xuZXhwb3J0IGRlZmF1bHQgTGFiZWw7XG4iXX0= */");
 var defaultIndicator = (0, _react2.jsx)(_Box["default"], {
   variant: "forms.label.indicator"
 }, "*");
@@ -50,7 +48,8 @@ var Label = /*#__PURE__*/(0, _react.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 ? _labelModes.modes.DEFAULT : _props$mode,
     requiredIndicator = props.requiredIndicator,
     hintText = props.hintText,
     helpHintProps = props.helpHintProps,
@@ -59,8 +58,8 @@ var Label = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isDisabled: isDisabled,
       isRequired: isRequired,
-      isFloatLabel: mode === _constants.modes.FLOAT,
-      isLeftLabel: mode === _constants.modes.LEFT
+      isFloatLabel: mode === _labelModes.modes.FLOAT,
+      isLeftLabel: mode === _labelModes.modes.LEFT
     }),
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(ExtendedLabel, (0, _extends2["default"])({
@@ -69,23 +68,6 @@ var Label = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames
   }, others), children, isRequired && (requiredIndicator || defaultIndicator), hintText && (0, _react2.jsx)(_HelpHint["default"], helpHintProps, hintText));
 });
-Label.propTypes = {
-  /** Whether the label has disabled styling applied. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the label has required indicator styling applied. */
-  isRequired: _propTypes["default"].bool,
-  /** Determines the behavior pattern for the label. */
-  mode: _propTypes["default"].oneOf((0, _values["default"])(_constants.modes)),
-  /** The visual component used to mark an input as required within the label. */
-  requiredIndicator: _propTypes["default"].node,
-  /** If present this prop will cause a help hint to render in the label. */
-  hintText: _propTypes["default"].string,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: _propTypes["default"].shape({})
-};
-Label.defaultProps = {
-  mode: _constants.modes.DEFAULT
-};
 Label.displayName = 'Label';
 var _default = Label;
 exports["default"] = _default;

package/lib/cjs/components/Label/Label.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryFn } from '@storybook/react';
+import { LabelProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<LabelProps>;
+export declare const Float: StoryFn;
+export declare const WithHelpHint: StoryFn<LabelProps>;

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

@@ -9,7 +9,7 @@ exports["default"] = exports.WithHelpHint = exports.Float = exports.Default = vo
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../../index");
-var _constants = require("./constants");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Form/Base Components/Label',
@@ -18,7 +18,7 @@ var _default = {
     mode: {
       control: {
         type: 'select',
-        options: _constants.modes
+        options: _labelModes.modes
       }
     },
     isDisabled: {},
@@ -28,7 +28,7 @@ var _default = {
     }
   },
   args: {
-    mode: _constants.modes.DEFAULT
+    mode: _labelModes.modes.DEFAULT
   }
 };
 exports["default"] = _default;

package/lib/cjs/components/Label/Label.styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const label: ThemeUICSSObject;

package/lib/cjs/components/Label/Label.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Label/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Label';

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

@@ -36,10 +36,10 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
-var _constants = require("../Label/constants");
 var _SelectField = _interopRequireDefault(require("./SelectField.mdx"));
 var _react2 = require("@emotion/react");
 var _context, _context2;
@@ -159,7 +159,7 @@ var _default = {
     labelMode: {
       control: {
         type: 'select',
-        options: (0, _values["default"])(_constants.modes)
+        options: (0, _values["default"])(_labelModes.modes)
       }
     },
     defaultSelectedKey: {},
@@ -180,7 +180,7 @@ var _default = {
   }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   args: {
     label: 'Example Label',
-    labelMode: (0, _values["default"])(_constants.modes)[0]
+    labelMode: (0, _values["default"])(_labelModes.modes)[0]
   }
 };
 exports["default"] = _default;