@7shifts/sous-chef 3.5.0 → 3.7.0

package/dist/index.js

@@ -4502,7 +4502,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     "data-testid": testId && testId + "-row",
     role: "row",
     ref: ref
-  }), React__default.Children.map(children, function (child, index) {
+  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
     return renderColumn(child, index);
   }), showActionMenu && React__default.createElement(ActionsCell, {
     actions: actions
@@ -4517,6 +4517,7 @@ var WHITE = '#ffffff';
 var EGGPLANT200 = '#d3dbf4';
 var EGGPLANT300 = '#a7b7ea';
 var EGGPLANT400 = '#6d87dd';
+var EGGPLANT500 = '#6179c6';
 var EGGPLANT600 = '#415184';
 var RADISH400 = '#e76767';
 var GREY100 = '#F3F3F3';
@@ -4710,136 +4711,7 @@ var DefaultItemComponent = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6"};
-
-var DataTableCell = function DataTableCell(_ref) {
-  var _columns$columnIndex, _classnames;
-
-  var children = _ref.children,
-      columnIndex = _ref.columnIndex;
-
-  var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns;
-
-  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
-  var isRightAligned = column ? column.isRightAligned : false;
-  return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$c['data-table-cell'])
-  }, children);
-};
-
-var Context$1 = React.createContext({});
-var useFormContext = function useFormContext() {
-  var context = React.useContext(Context$1);
-  return context || {};
-};
-
-var useFieldId = function useFieldId(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id;
-  var id = React.useMemo(function () {
-    return inputId ? inputId : name + "-" + Math.random();
-  }, [inputId, name]);
-  return id;
-};
-
-var getFormikState = function getFormikState(name, formik) {
-  if (formik === undefined) {
-    return null;
-  }
-
-  var formikPath = getFormikArrayPath(name);
-
-  if (formikPath.length === 0) {
-    return null;
-  }
-
-  var formikLatestLevel = formikPath.reduce(function (acc, path) {
-    var _acc$touched, _acc$error, _acc$value;
-
-    return {
-      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
-      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
-      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
-    };
-  }, {
-    touched: formik.touched,
-    error: formik.errors,
-    value: formik.values
-  });
-  return {
-    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
-    value: formikLatestLevel.value
-  };
-};
-var getFormikArrayPath = function getFormikArrayPath(name) {
-  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
-};
-
-var useFieldControllers = function useFieldControllers(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      _onFocus = _ref.onFocus,
-      _onKeyDown = _ref.onKeyDown,
-      error = _ref.error,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
-
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
-
-  var id = useFieldId({
-    name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange && _onChange(e.target.value);
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
-    },
-    onFocus: function onFocus(e) {
-      return _onFocus && _onFocus(e.target.value);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown && _onKeyDown(e.key);
-    }
-  };
-  var formikState = getFormikState(name, formik);
-
-  if (formik && formikState) {
-    var currencyBlur = function currencyBlur() {
-      if (type === 'currency') {
-        formik.setFieldValue(name, Number(value).toFixed(2));
-      }
-    };
-
-    controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikState.error,
-      value: value !== undefined ? controllers.value : formikState.value,
-      onChange: _onChange ? controllers.onChange : function (e) {
-        return formik.setFieldValue(name, e.target.value);
-      },
-      onBlur: _onBlur ? function (e) {
-        _onBlur && _onBlur(e.target.value);
-        formik.setFieldTouched(name);
-        currencyBlur();
-      } : function () {
-        formik.setFieldTouched(name);
-        currencyBlur();
-      }
-    });
-  }
-
-  return controllers;
-};
+var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6","data-table-cell--invalid":"_D73Vx"};
 
 var styles$d = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
@@ -4967,6 +4839,18 @@ var ModalBody = function ModalBody(_ref) {
 
 var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
+var updateButtonProps = function updateButtonProps(button, newProps) {
+  if (!button) {
+    return null;
+  }
+
+  if (button.type !== Button$1) {
+    return button;
+  }
+
+  return React__default.cloneElement(button, _extends({}, newProps));
+};
+
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
       actions = _ref.actions,
@@ -4976,13 +4860,16 @@ var ModalFooter = function ModalFooter(_ref) {
     var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
 
     var primaryButton = updateButtonProps(actions.primary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     var secondaryButton = updateButtonProps(actions.secondary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     var tertiaryButton = updateButtonProps(actions.tertiary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     return React__default.createElement(FooterContainer, {
       testId: testId
@@ -4998,20 +4885,6 @@ var ModalFooter = function ModalFooter(_ref) {
   return React__default.createElement(FooterContainer, null, children);
 };
 
-var updateButtonProps = function updateButtonProps(button, newProps) {
-  if (!button) {
-    return null;
-  }
-
-  if (button.type !== Button$1) {
-    return button;
-  }
-
-  return React__default.cloneElement(button, _extends({
-    size: BUTTON_SIZES.MIN_WIDTH_100
-  }, newProps));
-};
-
 var FooterContainer = function FooterContainer(_ref2) {
   var children = _ref2.children,
       testId = _ref2.testId;
@@ -5227,6 +5100,157 @@ var Calendar = function Calendar(_ref) {
   }))));
 };
 
+var DataTableCellElement = function DataTableCellElement(_ref) {
+  var _columns$columnIndex, _classnames;
+
+  var children = _ref.children,
+      columnIndex = _ref.columnIndex,
+      error = _ref.error,
+      _ref$delayOnCloseErro = _ref.delayOnCloseError,
+      delayOnCloseError = _ref$delayOnCloseErro === void 0 ? false : _ref$delayOnCloseErro;
+
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns;
+
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  var hasError = !!error;
+  var errorMessage = error;
+  var icon = hasError && React__default.createElement(IconTimesOctagon, {
+    size: "medium",
+    color: RADISH400
+  });
+  var TableCell = React__default.createElement("div", {
+    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames[styles$c['data-table-cell--invalid']] = hasError, _classnames), styles$c['data-table-cell'])
+  }, isRightAligned && icon, children, !isRightAligned && icon);
+
+  if (hasError) {
+    return React__default.createElement(Tooltip$1, {
+      overlay: errorMessage,
+      delayOnClose: delayOnCloseError,
+      placement: "top",
+      theme: "white"
+    }, TableCell);
+  }
+
+  return TableCell;
+};
+
+var DataTableCell = React.forwardRef(DataTableCellElement);
+
+var Context$1 = React.createContext({});
+var useFormContext = function useFormContext() {
+  var context = React.useContext(Context$1);
+  return context || {};
+};
+
+var useFieldId = function useFieldId(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id;
+  var id = React.useMemo(function () {
+    return inputId ? inputId : name + "-" + Math.random();
+  }, [inputId, name]);
+  return id;
+};
+
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
+  }
+
+  var formikPath = getFormikArrayPath(name);
+
+  if (formikPath.length === 0) {
+    return null;
+  }
+
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
+
+    return {
+      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
+      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
+      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
+    };
+  }, {
+    touched: formik.touched,
+    error: formik.errors,
+    value: formik.values
+  });
+  return {
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
+  };
+};
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
+};
+
+var useFieldControllers = function useFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      _onFocus = _ref.onFocus,
+      _onKeyDown = _ref.onKeyDown,
+      error = _ref.error,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type;
+
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
+
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange && _onChange(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e.target.value);
+    },
+    onFocus: function onFocus(e) {
+      return _onFocus && _onFocus(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown && _onKeyDown(e.key);
+    }
+  };
+  var formikState = getFormikState(name, formik);
+
+  if (formik && formikState) {
+    var currencyBlur = function currencyBlur() {
+      if (type === 'currency') {
+        formik.setFieldValue(name, Number(value).toFixed(2));
+      }
+    };
+
+    controllers = _extends({}, controllers, {
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
+      onChange: _onChange ? controllers.onChange : function (e) {
+        return formik.setFieldValue(name, e.target.value);
+      },
+      onBlur: _onBlur ? function (e) {
+        _onBlur && _onBlur(e.target.value);
+        formik.setFieldTouched(name);
+        currencyBlur();
+      } : function () {
+        formik.setFieldTouched(name);
+        currencyBlur();
+      }
+    });
+  }
+
+  return controllers;
+};
+
 var styles$j = {"label":"_h724f","label--truncate":"_1VUoF"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
@@ -8428,11 +8452,13 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var _excluded$2p = ["currencySymbol"];
+var _excluded$2p = ["currencySymbol", "step"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
-      currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
+      currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 0.01 : _ref$step,
       allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
@@ -8441,15 +8467,18 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
       inputProps = _useTextField.inputProps,
       fieldProps = _useTextField.fieldProps;
 
+  var isWholeNumber = Number.isInteger(step);
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: currencySymbol
   }, React__default.createElement("input", Object.assign({}, inputProps, {
-    type: 'number',
-    inputMode: 'decimal',
-    step: '0.01',
+    type: "number",
+    inputMode: "decimal",
+    step: step,
     min: 0,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'e' || e.key === '-') {
+      var isAddingDecimalsOnWholeNumber = isWholeNumber && (e.key === '.' || e.key === ',');
+
+      if (e.key === 'e' || e.key === '-' || isAddingDecimalsOnWholeNumber) {
         e.preventDefault();
         return;
       }
@@ -8457,7 +8486,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
       inputProps.onKeyDown(e);
     },
     onBlur: function onBlur(e) {
-      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2);
+      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(isWholeNumber ? 0 : 2);
       inputProps.onChange(e);
       inputProps.onBlur(e);
     }
@@ -9104,6 +9133,183 @@ var Italic = function Italic(_ref) {
   }, children);
 };
 
+var EMPTY_STATE_SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+
+var styles$X = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
+
+var styles$Y = {"empty-state-container-cta":"_1Cx9N"};
+
+var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
+  var _actions$primary, _actions$secondary;
+
+  var isPaywall = _ref.isPaywall,
+      actions = _ref.actions;
+  var primaryButton = updateButtonProps(actions.primary, {
+    theme: actions !== null && actions !== void 0 && (_actions$primary = actions.primary) !== null && _actions$primary !== void 0 && _actions$primary.props.theme || isPaywall ? 'upsell' : 'primary',
+    size: BUTTON_SIZES.MIN_WIDTH_100
+  });
+  var secondaryButton = updateButtonProps(actions.secondary, {
+    theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+    size: BUTTON_SIZES.MIN_WIDTH_100
+  });
+  return React__default.createElement("div", {
+    className: styles$Y['empty-state-container-cta']
+  }, primaryButton, secondaryButton);
+};
+
+var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$X['empty-state-container-stack'],
+    "data-testid": testId
+  }, React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title),
+    width: "200px"
+  }), React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
+  }, header && React__default.createElement(Text, {
+    as: "h4",
+    color: isPaywall && EGGPLANT500
+  }, header), React__default.createElement(Text, {
+    emphasis: "bold",
+    as: "body"
+  }, title), React__default.createElement("div", {
+    className: styles$X['empty-state-container-stack__body']
+  }, children)), React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
+  }, actions && React__default.createElement(EmptyStateContainerCTA, {
+    actions: actions,
+    isPaywall: isPaywall
+  }), caption && React__default.createElement(Text, {
+    as: "caption"
+  }, caption)));
+};
+
+var styles$Z = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn"};
+
+var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
+  var _classnames;
+
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? EMPTY_STATE_SIZE.LARGE : _ref$size,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$Z['empty-state-container-inline'],
+    "data-testid": testId
+  }, React__default.createElement("div", {
+    className: classnames(styles$Z['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$Z['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$Z['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+  }, React__default.createElement(Stack, {
+    space: 8
+  }, header && React__default.createElement(Text, {
+    as: "h4",
+    color: isPaywall && EGGPLANT500
+  }, header), React__default.createElement(Text, {
+    as: "h1"
+  }, title)), React__default.createElement("div", {
+    className: styles$Z['empty-state-container-inline__body']
+  }, children), React__default.createElement(Stack, {
+    space: 8
+  }, actions && React__default.createElement(EmptyStateContainerCTA, {
+    actions: actions,
+    isPaywall: isPaywall
+  }), caption && React__default.createElement(Text, {
+    as: "caption"
+  }, caption))), React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title),
+    width: size === EMPTY_STATE_SIZE.LARGE ? '500px' : '333px'
+  }));
+};
+
+var EmptyStateContainer = function EmptyStateContainer(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? EMPTY_STATE_SIZE.LARGE : _ref$size,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  var isSmallSpot = size === EMPTY_STATE_SIZE.SMALL;
+  var EmptyStateComponent = isSmallSpot ? EmptyStateContainerStack : EmptyStateContainerInline;
+  return React__default.createElement(EmptyStateComponent, {
+    header: header,
+    title: title,
+    children: children,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    size: size,
+    caption: caption,
+    isPaywall: isPaywall,
+    testId: testId
+  });
+};
+
+var Paywall = function Paywall(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      size = _ref.size,
+      caption = _ref.caption,
+      testId = _ref.testId;
+  return React__default.createElement(EmptyStateContainer, {
+    header: header,
+    title: title,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    size: size,
+    caption: caption,
+    isPaywall: true,
+    testId: testId
+  }, children);
+};
+
+var EmptyState = function EmptyState(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      caption = _ref.caption,
+      size = _ref.size,
+      testId = _ref.testId;
+  return React__default.createElement(EmptyStateContainer, {
+    title: title,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    caption: caption,
+    size: size,
+    testId: testId
+  }, children);
+};
+
 exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
@@ -9124,6 +9330,7 @@ exports.DataTableRow = DataTableRow;
 exports.DateField = DateField;
 exports.DateFilter = DateFilter;
 exports.DateRangeField = DateRangeField;
+exports.EmptyState = EmptyState;
 exports.Form = Form;
 exports.FormFeedback = FormFeedback;
 exports.FormFooter = FormFooter;
@@ -9280,6 +9487,7 @@ exports.MultiSelectField = MultiSelectField;
 exports.Page = Page;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
+exports.Paywall = Paywall;
 exports.PercentageField = PercentageField;
 exports.PersistentBanner = PersistentBanner;
 exports.Pill = Pill;