@instructure/ui-form-field 11.6.0 → 11.6.1-snapshot-129

package/lib/FormFieldLayout/v2/styles.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const generateGridLayout = (isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages) => {
+  if (isInlineLayout) {
+    if (hasErrorMsgAndIsGroup) {
+      if (hasMessages) {
+        return `${hasVisibleLabel ? ' "label messages"' : '. messages'}
+                                      ". controls"`;
+      } else {
+        return `${hasVisibleLabel ? ' "label controls"' : '. controls'}`;
+      }
+    } else {
+      return `${hasVisibleLabel ? ' "label controls"' : '. controls'}
+              ${hasMessages ? ' ". messages"' : ''}`;
+    }
+  }
+  // stacked layout -- in this case we could use a simple `Flex`
+  if (hasErrorMsgAndIsGroup) {
+    return `${hasVisibleLabel ? ' "label"' : ''}
+            ${hasMessages ? ' "messages"' : ''}
+            "controls"`;
+  } else {
+    return `${hasVisibleLabel ? ' "label"' : ''}
+            "controls"
+            ${hasMessages ? ' "messages"' : ''}`;
+  }
+};
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const inline = params.inline,
+    layout = params.layout,
+    vAlign = params.vAlign,
+    labelAlign = params.labelAlign,
+    margin = params.margin,
+    messages = params.messages;
+  const hasMessages = params.hasMessages,
+    hasVisibleLabel = params.hasVisibleLabel,
+    hasErrorMsgAndIsGroup = params.hasErrorMsgAndIsGroup;
+  const cssMargin = (0, _emotion.calcSpacingFromShorthand)(margin, {
+    ...sharedTokens.spacing,
+    ...sharedTokens.legacy.spacing
+  });
+  const isInlineLayout = layout === 'inline';
+  const hasNonEmptyMessages = messages === null || messages === void 0 ? void 0 : messages.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);
+
+  // This is quite ugly, we should simplify it
+  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages);
+  let gridTemplateColumns = '100%'; // stacked layout
+  if (isInlineLayout) {
+    gridTemplateColumns = '1fr 3fr';
+    if (inline) {
+      gridTemplateColumns = 'auto 3fr';
+    }
+  }
+  const labelStyles = {
+    all: 'initial',
+    display: 'block',
+    gridArea: 'label',
+    color: componentTheme.textColor,
+    fontFamily: componentTheme.fontFamily,
+    fontWeight: componentTheme.fontWeight,
+    fontSize: componentTheme.fontSize,
+    lineHeight: componentTheme.lineHeight,
+    ...(isInlineLayout && {
+      margin: '0',
+      // when inline add a small padding between the label and the control
+      paddingRight: componentTheme.gapPrimitives,
+      // and use the horizontal alignment prop
+      [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        textAlign: labelAlign
+      }
+    })
+  };
+  let alignItems = 'start';
+  if (vAlign == 'top') {
+    alignItems = 'start';
+  } else if (vAlign == 'middle') {
+    alignItems = 'center';
+  } else if (vAlign == 'bottom') {
+    alignItems = 'end';
+  }
+  return {
+    formFieldLayout: {
+      label: 'formFieldLayout',
+      all: 'initial',
+      border: '0',
+      padding: '0',
+      margin: cssMargin,
+      minWidth: '0',
+      direction: 'inherit',
+      textAlign: 'start',
+      opacity: 'inherit',
+      display: 'grid',
+      alignItems: alignItems,
+      verticalAlign: 'middle',
+      // removes margin in inline layouts
+      gridTemplateColumns: gridTemplateColumns,
+      gridTemplateAreas: gridTemplateAreas,
+      [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        // for small screens use the stacked layout
+        gridTemplateColumns: '100%',
+        gridTemplateAreas: generateGridLayout(false, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
+      },
+      columnGap: '0.375rem',
+      rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
+      width: '100%',
+      ...(inline && {
+        display: 'inline-grid',
+        width: 'auto'
+      })
+    },
+    formFieldLabel: {
+      label: 'formFieldLayout__label',
+      ...labelStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(label)': labelStyles,
+      '&:-webkit-any(label)': labelStyles,
+      paddingBottom: hasNonEmptyMessages ? '0' : componentTheme.gapPrimitives
+    },
+    formFieldChildren: {
+      label: 'formFieldLayout__children',
+      gridArea: 'controls',
+      // add a small margin between the message and the controls
+      ...(hasMessages && hasErrorMsgAndIsGroup && {
+        marginTop: '0.375rem'
+      }),
+      ...(isInlineLayout && inline && {
+        [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
+          justifySelf: 'start'
+        }
+      })
+    },
+    requiredAsterisk: {
+      label: 'formFieldLayout__requiredAsterisk',
+      color: componentTheme.asteriskColor
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/FormFieldMessage/{index.js → v1/index.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.FormFieldMessage = void 0;
 var _react = require("react");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-var _IconWarningSolid2 = require("@instructure/ui-icons/lib/IconWarningSolid.js");
+var _IconWarningSolid2 = require("@instructure/ui-icons/lib/generated/IconWarningSolid.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -52,7 +52,7 @@ type: example
 <FormFieldMessage variant="error">Invalid value</FormFieldMessage>
 ```
 **/
-let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_FormFieldMessage = class FormFieldMessage extends _react.Component {
+let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_FormFieldMessage = class FormFieldMessage extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;

package/lib/FormFieldMessage/v2/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormFieldMessage = void 0;
+var _react = require("react");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _uiIcons = require("@instructure/ui-icons");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _AlertCircleInstUIIco, _CheckCircle2InstUIIc;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: FormField
+---
+
+This is a helper component that is used by most of the custom form
+components. In most cases it shouldn't be used directly.
+
+```js
+---
+type: example
+---
+<FormFieldMessage variant="error">Invalid value</FormFieldMessage>
+```
+**/
+const FormFieldMessage = exports.FormFieldMessage = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant = 'hint',
+  children,
+  themeOverride
+}, ref) => {
+  const styles = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    themeOverride,
+    params: {
+      variant
+    },
+    componentId: 'FormFieldMessage',
+    displayName: 'FormFieldMessage'
+  });
+  const handleRef = el => {
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (ref) {
+      const refObject = ref;
+      refObject.current = el;
+    }
+  };
+  const isErrorVariant = variant === 'error' || variant === 'newError';
+  const shouldShowIcon = (isErrorVariant || variant === 'success') && children;
+  return variant !== 'screenreader-only' ? (0, _jsxRuntime.jsxs)("span", {
+    css: {
+      display: 'flex'
+    },
+    children: [shouldShowIcon && (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.icon,
+      children: isErrorVariant ? _AlertCircleInstUIIco || (_AlertCircleInstUIIco = (0, _jsxRuntime.jsx)(_uiIcons.AlertCircleInstUIIcon, {
+        size: "sm",
+        color: "errorColor"
+      })) : _CheckCircle2InstUIIc || (_CheckCircle2InstUIIc = (0, _jsxRuntime.jsx)(_uiIcons.CheckCircle2InstUIIcon, {
+        size: "sm",
+        color: "successColor"
+      }))
+    }), (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
+      ref: handleRef,
+      children: children
+    })]
+  }) : (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+    elementRef: handleRef,
+    children: children
+  });
+});
+FormFieldMessage.displayName = 'FormFieldMessage';
+var _default = exports.default = FormFieldMessage;

package/lib/FormFieldMessage/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['variant', 'children'];

package/lib/FormFieldMessage/v2/styles.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const variant = params.variant;
+  const variants = {
+    hint: {
+      color: componentTheme.hintTextColor
+    },
+    error: {
+      color: componentTheme.errorTextColor
+    },
+    newError: {
+      color: componentTheme.errorTextColor
+    },
+    success: {
+      color: componentTheme.successTextColor
+    },
+    'screenreader-only': {}
+  };
+  return {
+    icon: {
+      fontSize: componentTheme.fontSize,
+      marginRight: sharedTokens.spacing.general.spaceXs,
+      lineHeight: 1.25
+    },
+    formFieldMessage: {
+      label: 'formFieldMessage',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      display: 'block',
+      ...variants[variant]
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/FormFieldMessages/{index.js → v1/index.js}

@@ -8,7 +8,7 @@ exports.default = exports.FormFieldMessages = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _emotion = require("@instructure/emotion");
-var _FormFieldMessage = require("../FormFieldMessage");
+var _v = require("../../FormFieldMessage/v1");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
@@ -55,7 +55,7 @@ type: example
 ]} />
 ```
 **/
-let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_FormFieldMessages = class FormFieldMessages extends _react.Component {
+let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_FormFieldMessages = class FormFieldMessages extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -82,7 +82,7 @@ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withSty
       children: messages.map((msg, i) => {
         return (0, _jsxRuntime.jsx)("span", {
           css: styles === null || styles === void 0 ? void 0 : styles.message,
-          children: (0, _jsxRuntime.jsx)(_FormFieldMessage.FormFieldMessage, {
+          children: (0, _jsxRuntime.jsx)(_v.FormFieldMessage, {
             variant: msg.type,
             children: msg.text
           })

package/lib/FormFieldMessages/v2/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormFieldMessages = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _emotion = require("@instructure/emotion");
+var _v = require("../../FormFieldMessage/v2");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _FormFieldMessages;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: FormField
+---
+
+A FormFieldMessages component
+
+```js
+---
+type: example
+---
+<FormFieldMessages messages={[
+  { text: 'Invalid name', type: 'error' },
+  { text: 'Good job!', type: 'success' },
+  { text: 'Full name, first and last', type: 'hint' },
+]} />
+```
+**/
+let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_FormFieldMessages = class FormFieldMessages extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      messages = _this$props3.messages,
+      styles = _this$props3.styles;
+    return messages && messages.length > 0 ? (0, _jsxRuntime.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages,
+      ...(0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps),
+      ref: this.handleRef,
+      children: messages.map((msg, i) => {
+        return (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.message,
+          children: (0, _jsxRuntime.jsx)(_v.FormFieldMessage, {
+            variant: msg.type,
+            children: msg.text
+          })
+        }, `error${i}`);
+      })
+    }) : null;
+  }
+}, _FormFieldMessages.displayName = "FormFieldMessages", _FormFieldMessages.componentId = 'FormFieldMessages', _FormFieldMessages.allowedProps = _props.allowedProps, _FormFieldMessages.defaultProps = {}, _FormFieldMessages)) || _class);
+var _default = exports.default = FormFieldMessages;

package/lib/FormFieldMessages/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['messages', 'gridArea'];

package/lib/FormFieldMessages/v2/styles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (_componentTheme, props) => {
+  return {
+    formFieldMessages: {
+      label: 'formFieldMessages',
+      padding: 0,
+      display: 'block',
+      ...(props.gridArea && {
+        gridArea: props.gridArea
+      })
+    },
+    message: {
+      label: 'formFieldMessages__message',
+      display: 'block'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,42 +6,42 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "FormField", {
   enumerable: true,
   get: function () {
-    return _FormField.FormField;
+    return _v.FormField;
   }
 });
 Object.defineProperty(exports, "FormFieldGroup", {
   enumerable: true,
   get: function () {
-    return _FormFieldGroup.FormFieldGroup;
+    return _v6.FormFieldGroup;
   }
 });
 Object.defineProperty(exports, "FormFieldLabel", {
   enumerable: true,
   get: function () {
-    return _FormFieldLabel.FormFieldLabel;
+    return _v2.FormFieldLabel;
   }
 });
 Object.defineProperty(exports, "FormFieldLayout", {
   enumerable: true,
   get: function () {
-    return _FormFieldLayout.FormFieldLayout;
+    return _v5.FormFieldLayout;
   }
 });
 Object.defineProperty(exports, "FormFieldMessage", {
   enumerable: true,
   get: function () {
-    return _FormFieldMessage.FormFieldMessage;
+    return _v3.FormFieldMessage;
   }
 });
 Object.defineProperty(exports, "FormFieldMessages", {
   enumerable: true,
   get: function () {
-    return _FormFieldMessages.FormFieldMessages;
+    return _v4.FormFieldMessages;
   }
 });
-var _FormField = require("./FormField");
-var _FormFieldLabel = require("./FormFieldLabel");
-var _FormFieldMessage = require("./FormFieldMessage");
-var _FormFieldMessages = require("./FormFieldMessages");
-var _FormFieldLayout = require("./FormFieldLayout");
-var _FormFieldGroup = require("./FormFieldGroup");
+var _v = require("../FormField/v1");
+var _v2 = require("../FormFieldLabel/v1");
+var _v3 = require("../FormFieldMessage/v1");
+var _v4 = require("../FormFieldMessages/v1");
+var _v5 = require("../FormFieldLayout/v1");
+var _v6 = require("../FormFieldGroup/v1");