@shipengine/elements 2.19.0 → 2.20.0

package/esm/workflows/account-settings/account-settings.js

@@ -0,0 +1,107 @@
+import { createElement } from '@emotion/react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { getIsVatRequired } from '../../utilities/vat.js';
+import { useGetFundingSourceMetadata } from '@shipengine/react-api';
+import { useGetPanelProps } from './use-get-panel-props.js';
+import { ManageWarehouses } from '../../features/manage-warehouses/manage-warehouses.js';
+import { UnitSettings } from '../../features/unit-settings/unit-settings.js';
+import { VatSettings } from '../../features/vat-settings/vat-settings.js';
+import { ModalContainer } from '../../components/modal/modal-container.js';
+import en from '../../locales/en/index.js';
+import { useElements } from '../../elements-provider/elements-context-provider.js';
+import { Component as Component$1 } from '../carrier-services/carrier-services.js';
+import { ExternalCarriers } from '../../features/manage-external-carriers/manage-external-carriers.js';
+import { Settings } from '../../features/select-label-layout/select-label-layout.js';
+import { Spacer } from '../../components/spacer/spacer.js';
+import { CollapsiblePanel } from '../../components/collapsible-panel/collapsible-panel.js';
+import { PoweredByShipEngine } from '../../components/powered-by-shipengine/powered-by-shipengine.js';
+import { createElement as createElement$1 } from '../../create-element/create-element.js';
+import { ErrorFallback } from '../../components/error-fallback/error-fallback.js';
+
+const Component = ({
+  features,
+  onRedirectToOnboarding
+}) => {
+  var _a;
+  const {
+    globalFeatures,
+    getFeatures
+  } = useElements();
+  const fundingSourceMetadata = useGetFundingSourceMetadata();
+  const fundingSourceRegion = (_a = fundingSourceMetadata.data) === null || _a === void 0 ? void 0 : _a.defaultRegionProfile.countryCode;
+  const isVatRequiredCountry = getIsVatRequired(fundingSourceRegion);
+  const defaultFeatures = getFeatures("accountSettingsFeatures");
+  features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
+  const {
+    getSettingPanelProps
+  } = useGetPanelProps(features);
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  const commonSettings = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, features.showCarrierServices ? {
+    CarrierServices: Component$1
+  } : {}), features.showExternalCarriers ? {
+    ExternalCarriers
+  } : {}), features.showManageWarehouses ? {
+    ManageWarehouses
+  } : {}), features.showLabelLayout ? {
+    SelectLabelLayout: Settings
+  } : {}), features.showUnitSettings ? {
+    UnitSettings
+  } : {});
+  // ENGINE-7366: TODO Remove feature flag once this is fully in production
+  const settings = globalFeatures.showVatSettings && features.showVatSettings && isVatRequiredCountry ? Object.assign(Object.assign({}, commonSettings), {
+    VatSettings
+  }) : commonSettings;
+  return jsx("main", {
+    children: jsxs(ModalContainer, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), Object.keys(settings).map((setting, index) => {
+        const [panelProps, settingProps] = getSettingPanelProps(setting);
+        const Setting = settings[setting];
+        if (setting === "CarrierServices") {
+          return createElement(CollapsiblePanel, Object.assign({}, panelProps, {
+            key: index
+          }), jsx(Setting, Object.assign({}, settingProps, {
+            onRedirectToOnboarding: onRedirectToOnboarding
+          })));
+        }
+        return createElement(CollapsiblePanel, Object.assign({}, panelProps, {
+          key: index
+        }), jsx(Setting, Object.assign({}, settingProps)));
+      }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
+        children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]
+      })]
+    })
+  });
+};
+/**
+ * # Registered Account Settings Element
+ *
+ * - This is the registered `<AccountSettings />` element that will be used to render the
+ * `<AccountSettings.Element />` component.
+ *
+ * @param ElementProps The props, callbacks, and resources necessary to render
+ * the `<AccountSettings.Element />` component.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `AccountSettings`
+ * Element directly. Here is a brief example of how you would use it within your application.
+ * ```tsx
+ * <AccountSettings.Element/>
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link AccountSettings.ComponentProps | The **props** that can be passed into the `<AccountSettings.Element />` component}
+ * @see {@link CarrierServices.Element | The `<CarrierServices />` component used to view connected carriers and manage funding}
+ * @see {@link ManageWarehouses.Component | The `<ManageWarehouses />` component used to add, update, or remove warehouses}
+ * @see {@link PaymentMethodSettings | The `<PaymentMethodSettings />` component used to manage payment methods}
+ * @see {@link ManageFunding | The `<ManageFunding />` component used to manage funding rules and add funds to a carrier account}
+ */
+const Element = createElement$1(Component, ErrorFallback, {
+  resources: {
+    en
+  }
+});
+
+export { Component, Element };

package/esm/workflows/account-settings/account-settings.styles.js

@@ -0,0 +1,11 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  modalHeadingStyles: theme => ({
+    color: scopeTheme(theme).palette.gray.main,
+    fontWeight: scopeTheme(theme).typography.fontWeight.bold,
+    paddingLeft: scopeTheme(theme).spacing(4)
+  })
+});
+
+export { styles };

package/esm/workflows/account-settings/index.js

@@ -0,0 +1,2 @@
+import * as accountSettings from './account-settings.js';
+export { accountSettings as AccountSettings };

package/esm/workflows/account-settings/use-get-panel-props.js

@@ -0,0 +1,111 @@
+import { __rest } from 'tslib';
+import { useTranslation } from 'react-i18next';
+import { useManageWarehouses } from '../../features/manage-warehouses/use-manage-warehouses.js';
+import { useLabelLayout } from '../../features/select-label-layout/use-label-layout.js';
+import { useUnitSettings } from '../../features/unit-settings/use-unit-settings.js';
+import { useManageCarriers } from '../../features/manage-carriers/use-manage-carriers.js';
+import { useManageExternalCarriers } from '../../features/manage-external-carriers/use-manage-external-carriers.js';
+
+const useGetPanelProps = features => {
+  const {
+    t
+  } = useTranslation();
+  const _a = useManageExternalCarriers(),
+    {
+      isDeletingCarrier,
+      deleteCarrierErrors
+    } = _a,
+    manageExternalCarriersProps = __rest(_a, ["isDeletingCarrier", "deleteCarrierErrors"]);
+  const _b = useManageWarehouses(),
+    {
+      updateWarehouseErrors,
+      createWarehouseErrors,
+      deleteWarehouseErrors,
+      isCreatingWarehouse,
+      isDeletingWarehouse,
+      isUpdatingWarehouse
+    } = _b,
+    manageWarehousesProps = __rest(_b, ["updateWarehouseErrors", "createWarehouseErrors", "deleteWarehouseErrors", "isCreatingWarehouse", "isDeletingWarehouse", "isUpdatingWarehouse"]);
+  const _c = useLabelLayout(),
+    {
+      updateLabelLayoutErrors,
+      isUpdatingLabelLayout
+    } = _c,
+    selectlabelLayoutProps = __rest(_c, ["updateLabelLayoutErrors", "isUpdatingLabelLayout"]);
+  const _d = useUnitSettings(),
+    {
+      isUpdatingUnitSettings,
+      updateUnitSettingsErrors
+    } = _d,
+    unitSettingsProps = __rest(_d, ["isUpdatingUnitSettings", "updateUnitSettingsErrors"]);
+  const _e = useManageCarriers(),
+    {
+      isAddingFunds,
+      isAddingFundsError,
+      addFundsError
+    } = _e,
+    manageCarriersProps = __rest(_e, ["isAddingFunds", "isAddingFundsError", "addFundsError"]);
+  const warehouseErrors = [...(updateWarehouseErrors !== null && updateWarehouseErrors !== void 0 ? updateWarehouseErrors : []), ...(createWarehouseErrors !== null && createWarehouseErrors !== void 0 ? createWarehouseErrors : []), ...(deleteWarehouseErrors !== null && deleteWarehouseErrors !== void 0 ? deleteWarehouseErrors : [])];
+  const getSettingPanelProps = setting => {
+    switch (setting) {
+      case "CarrierServices":
+        return [{
+          errors: addFundsError,
+          isSaving: isAddingFunds,
+          statusSettings: {
+            fail: {
+              disabled: true
+            },
+            loading: {
+              disabled: true
+            },
+            success: {
+              message: t("account-settings:sections.carriers.customStatusMessages.success")
+            }
+          },
+          title: t("account-settings:sections.carriers.title")
+        }, Object.assign({
+          addFundsError: addFundsError,
+          enableFunding: features === null || features === void 0 ? void 0 : features.enableFunding
+        }, manageCarriersProps)];
+      case "ExternalCarriers":
+        return [{
+          errors: deleteCarrierErrors,
+          isSaving: isDeletingCarrier,
+          title: t("account-settings:sections.externalCarriers")
+        }, Object.assign({
+          deleteCarrierErrors,
+          isDeletingCarrier
+        }, manageExternalCarriersProps)];
+      case "ManageWarehouses":
+        return [{
+          errors: warehouseErrors,
+          isSaving: isCreatingWarehouse || isDeletingWarehouse || isUpdatingWarehouse,
+          title: t("account-settings:sections.warehouses")
+        }, Object.assign({}, manageWarehousesProps)];
+      case "SelectLabelLayout":
+        return [{
+          errors: updateLabelLayoutErrors,
+          isSaving: isUpdatingLabelLayout,
+          title: t("account-settings:sections.labelLayout")
+        }, Object.assign({}, selectlabelLayoutProps)];
+      case "UnitSettings":
+        return [{
+          errors: updateUnitSettingsErrors,
+          isSaving: isUpdatingUnitSettings,
+          title: t("account-settings:sections.unitSettings")
+        }, Object.assign({}, unitSettingsProps)];
+      case "VatSettings":
+        return [{
+          title: t("account-settings:sections.vatSettings")
+        }];
+      default:
+        return [];
+    }
+  };
+  return {
+    getSettingPanelProps
+  };
+};
+
+export { useGetPanelProps };

package/esm/workflows/carrier-services/carrier-services.js

@@ -0,0 +1,97 @@
+import { __awaiter } from 'tslib';
+import { createElement } from '@emotion/react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useListFundingSources, useFundingSourcesAddFunds } from '@shipengine/react-api';
+import { useGetWalletPanelProps } from './use-get-wallet-panel-props.js';
+import { CollapsiblePanel } from '../../components/collapsible-panel/collapsible-panel.js';
+import en from '../../locales/en/index.js';
+import { PaymentMethodSettings } from '../../features/payment-method-settings/payment-method-settings.js';
+import { TransactionHistory } from '../../features/transaction-history/transaction-history.js';
+import { ZeroState } from '../../components/zero-state/zero-state.js';
+import { Loader } from '../../components/loader/loader.js';
+import { ShipEngineCarriers } from '../../features/manage-carriers/manage-carriers.js';
+import { Spacer } from '../../components/spacer/spacer.js';
+import { createElement as createElement$1 } from '../../create-element/create-element.js';
+import { ErrorFallback } from '../../components/error-fallback/error-fallback.js';
+
+const Component = ({
+  onRedirectToOnboarding,
+  enableFunding
+}) => {
+  const settings = {
+    PaymentMethodSettings,
+    TransactionHistory
+  };
+  const {
+    t
+  } = useTranslation("account-settings");
+  const {
+    getWalletPanelProps
+  } = useGetWalletPanelProps();
+  const {
+    data: fundingSource,
+    isLoading: fundingSourceLoading
+  } = useListFundingSources();
+  const {
+    mutateAsync: addFunds,
+    error: addFundsErrors
+  } = useFundingSourcesAddFunds();
+  const handleAddFunds = useCallback(payload => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield addFunds(payload);
+    } catch (error) {
+      console.log(error);
+    }
+  }), [addFunds]);
+  if ((fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource.length) === 0) return onRedirectToOnboarding ? jsx(ZeroState, {
+    description: t("messages.noFundingSourceDescription", {
+      section: "carrier services"
+    }),
+    showLinkAction: {
+      icon: "add",
+      onClick: () => onRedirectToOnboarding(),
+      title: t("messages.noFundingSourceAction")
+    }
+  }) : jsx(ZeroState, {
+    description: t("messages.noFundingSourceDescription", {
+      section: "carrier services"
+    })
+  });
+  if (fundingSourceLoading) return jsx(Loader, {
+    message: t("loading.carrierServices")
+  });
+  return jsxs(Fragment, {
+    children: [jsx(ShipEngineCarriers, {
+      addFunds: handleAddFunds,
+      addFundsError: addFundsErrors,
+      onRedirectToOnboarding: onRedirectToOnboarding,
+      showFunds: enableFunding
+    }), jsx(Spacer, {
+      multiplier: 1
+    }), Object.keys(settings).map((setting, index) => {
+      const panelProps = getWalletPanelProps(setting);
+      const Setting = settings[setting];
+      if (setting === "PaymentMethodSettings") {
+        return createElement(CollapsiblePanel, Object.assign({}, panelProps, {
+          key: index,
+          nested: true
+        }), jsx(Setting, {
+          onRedirectToOnboarding: onRedirectToOnboarding
+        }));
+      }
+      return createElement(CollapsiblePanel, Object.assign({}, panelProps, {
+        key: index,
+        nested: true
+      }), jsx(Setting, {}));
+    })]
+  });
+};
+const Element = createElement$1(Component, ErrorFallback, {
+  resources: {
+    en
+  }
+});
+
+export { Component, Element };

package/esm/workflows/carrier-services/index.js

@@ -0,0 +1,2 @@
+import * as carrierServices from './carrier-services.js';
+export { carrierServices as CarrierServices };

package/esm/workflows/carrier-services/use-get-wallet-panel-props.js

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+import { useUpdateFundingSource } from '@shipengine/react-api';
+
+const useGetWalletPanelProps = () => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    error: updateBillingErrors,
+    isLoading: updatingBilling
+  } = useUpdateFundingSource();
+  const getWalletPanelProps = setting => {
+    switch (setting) {
+      case "ManageFunding":
+        return {
+          title: t("account-settings:sections.accountBalance")
+        };
+      case "PaymentMethodSettings":
+        return {
+          errors: updateBillingErrors,
+          isSaving: updatingBilling,
+          title: t("account-settings:sections.paymentMethod")
+        };
+      case "TransactionHistory":
+        return {
+          title: t("account-settings:sections.transactionHistory")
+        };
+      default:
+        return {};
+    }
+  };
+  return {
+    getWalletPanelProps
+  };
+};
+
+export { useGetWalletPanelProps };

package/esm/workflows/connect-external-carrier/components/available-carriers-list/available-carriers-list.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDebounce } from 'use-debounce';
+import { Input, Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './available-carriers-list.styles.js';
+import { CarrierConnectionCard } from '../../../../components/carrier-connection-card/carrier-connection-card.js';
+
+const AvailableCarriersList = ({
+  carriers,
+  onCarrierSelected
+}) => {
+  const {
+    t
+  } = useTranslation("connect-carrier");
+  const [filterInput, setFilterInput] = useState("");
+  const [filter] = useDebounce(filterInput, 300);
+  const filteredCarriers = useMemo(() => carriers.filter(carrier => !filter || carrier.name.toLowerCase().includes(filter.toLowerCase())), [filter, carriers]);
+  return jsx("div", Object.assign({
+    css: styles.gridContainer
+  }, {
+    children: jsxs("div", Object.assign({
+      css: styles.gridStyles
+    }, {
+      children: [jsx(Input, {
+        css: {
+          gridColumn: "1/-1"
+        },
+        label: t("search"),
+        leftContent: jsx(Icon, {
+          name: IconNames.SEARCH,
+          size: IconSize.SIZE_MEDIUM
+        }),
+        onChange: e => setFilterInput(e.target.value),
+        value: filterInput
+      }), filteredCarriers.map(carrier => jsx(CarrierConnectionCard, {
+        carrierName: carrier.carrierName,
+        description: carrier.description,
+        iconUrl: carrier.iconUrl,
+        name: carrier.name,
+        onClick: onCarrierSelected
+      }, carrier.carrierName))]
+    }))
+  }));
+};
+
+export { AvailableCarriersList };

package/esm/workflows/connect-external-carrier/components/available-carriers-list/available-carriers-list.styles.js

@@ -0,0 +1,17 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  gridContainer: {
+    containerType: "inline-size"
+  },
+  gridStyles: theme => ({
+    "@container (width < 400px)": {
+      gridTemplateColumns: "1fr"
+    },
+    display: "grid",
+    gap: scopeTheme(theme).spacing(2),
+    gridTemplateColumns: "1fr 1fr"
+  })
+});
+
+export { styles };

package/esm/workflows/connect-external-carrier/components/connect-external-carrier-form/connect-external-carrier-form.js

@@ -0,0 +1,173 @@
+import { __awaiter } from 'tslib';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Typography, InlineNotification, NotificationType, Button, ButtonVariant } from '@shipengine/giger';
+import { useConnectCarrierAccount } from '@shipengine/react-api';
+import { styles } from './connect-external-carrier-form.styles.js';
+import { Section } from '../../../../components/section/section.js';
+import { Spacer } from '../../../../components/spacer/spacer.js';
+import { Loader } from '../../../../components/loader/loader.js';
+import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+
+const ConnectExternalCarrierForm = ({
+  carrierName,
+  displayName,
+  iconUrl,
+  isBeta,
+  initialFormData,
+  jsonSchema,
+  uiSchema,
+  onCancel,
+  onCarrierConnected
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "connect-carrier"]);
+  const [formData, setFormData] = useState(initialFormData !== null && initialFormData !== void 0 ? initialFormData : {
+    nickname: ""
+  });
+  const [formHasErrors, setFormHasErrors] = useState(false);
+  const {
+    error: connectCarrierAccountErrors,
+    isLoading: connectingCarrier,
+    mutateAsync: connectCarrierAccount
+  } = useConnectCarrierAccount();
+  const onChange = useCallback(e => {
+    if (JSON.stringify(formData) === JSON.stringify(e.formData)) {
+      return;
+    }
+    setFormData(e.formData);
+    setFormHasErrors(e.errors.length > 0);
+  }, [setFormData, setFormHasErrors, formData]);
+  const handleRegisterCarrier = formData => __awaiter(void 0, void 0, void 0, function* () {
+    const connection = yield connectCarrierAccount({
+      carrierName,
+      formData
+    });
+    if (connection.carrierId) {
+      onCarrierConnected === null || onCarrierConnected === void 0 ? void 0 : onCarrierConnected(connection.carrierId);
+    } else if (connection.redirectUrl) {
+      openPopup(connection.redirectUrl);
+    }
+  });
+  // Some descriptions contain HTML
+  const DescriptionFieldTemplate = props => {
+    const {
+      description,
+      id
+    } = props;
+    if (!description) return null;
+    if (typeof description === "string") return jsx("p", {
+      dangerouslySetInnerHTML: {
+        __html: description
+      },
+      id: id
+    });
+    return jsx("p", Object.assign({
+      id: id
+    }, {
+      children: description
+    }));
+  };
+  const popupWindow = (url, windowName, win, w, h) => {
+    const y = win.top ? win.top.outerHeight / 2 + win.top.screenY - h / 2 : 0;
+    const x = win.top ? win.top.outerWidth / 2 + win.top.screenX - w / 2 : 0;
+    return win.open(url, windowName, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
+  };
+  const openPopup = connectionUrl => {
+    const popup = popupWindow(connectionUrl, "Connect Carrier Popup", window, 500, 500);
+    window.addEventListener("message", event => {
+      var _a;
+      const {
+        type,
+        carrier_id
+      } = (_a = event.data) !== null && _a !== void 0 ? _a : {};
+      if (type === "connect-carrier-success") {
+        onCarrierConnected === null || onCarrierConnected === void 0 ? void 0 : onCarrierConnected(carrier_id);
+        popup === null || popup === void 0 ? void 0 : popup.close();
+      }
+    });
+  };
+  return jsx(Section, Object.assign({
+    bold: false,
+    hideBackground: true,
+    title: jsxs(Fragment, {
+      children: [iconUrl && jsx("img", {
+        alt: "carrier logo",
+        css: styles.iconStyles,
+        src: iconUrl
+      }), jsx(Typography, Object.assign({
+        variant: "heading4"
+      }, {
+        children: displayName
+      }))]
+    })
+  }, {
+    children: jsx("div", Object.assign({
+      css: styles.formStyles
+    }, {
+      children: jsxs("div", Object.assign({
+        css: styles.bodyStyles
+      }, {
+        children: [isBeta && jsxs(Fragment, {
+          children: [jsx(InlineNotification, Object.assign({
+            type: NotificationType.INFO
+          }, {
+            children: t("connect-carrier:registrationForm.betaWarning", {
+              carrier: displayName
+            })
+          })), jsx(Spacer, {
+            multiplier: 2
+          })]
+        }), connectCarrierAccountErrors && jsxs(Fragment, {
+          children: [jsx(InlineNotification, Object.assign({
+            type: NotificationType.ERROR
+          }, {
+            children: t("connect-carrier:registrationForm.error")
+          })), jsx(Spacer, {
+            multiplier: 2
+          })]
+        }), connectingCarrier ? jsx(Loader, {
+          message: t("loading.connectingCarriers")
+        }) : jsx(Form, Object.assign({
+          formData: formData,
+          onChange: onChange,
+          onSubmit: () => {
+            void handleRegisterCarrier(formData);
+          },
+          schema: jsonSchema,
+          templates: {
+            DescriptionFieldTemplate
+          },
+          uiSchema: uiSchema || undefined,
+          validator: validator
+        }, {
+          children: jsxs(ButtonGroup, Object.assign({
+            justify: "end"
+          }, {
+            children: [onCancel && jsx(Button, Object.assign({
+              bold: false,
+              onClick: onCancel,
+              type: "button",
+              variant: ButtonVariant.OUTLINED
+            }, {
+              children: t("actions.cancel")
+            })), jsx(Button, Object.assign({
+              bold: false,
+              disabled: formHasErrors,
+              type: "submit",
+              variant: ButtonVariant.FILLED
+            }, {
+              children: t("actions.connect")
+            }))]
+          }))
+        }))]
+      }))
+    }))
+  }));
+};
+
+export { ConnectExternalCarrierForm };

package/esm/workflows/connect-external-carrier/components/connect-external-carrier-form/connect-external-carrier-form.styles.js

@@ -0,0 +1,67 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  bodyStyles: () => theme => ({
+    flexGrow: 1,
+    fontSize: scopeTheme(theme).typography.fontSize.M,
+    height: "100%",
+    maxHeight: "calc(100% - 60px)",
+    overflow: "auto"
+  }),
+  formStyles: theme => ({
+    ".checkbox": {
+      "> input": {
+        marginRight: scopeTheme(theme).spacing(1.25)
+      },
+      "> label": {
+        alignItems: "center",
+        display: "flex",
+        marginBottom: scopeTheme(theme).spacing(1)
+      }
+    },
+    ".control-label": {
+      fontSize: scopeTheme(theme).typography.fontSize.S,
+      fontWeight: scopeTheme(theme).typography.fontWeight.bold,
+      marginRight: scopeTheme(theme).spacing(1.25)
+    },
+    ".custom-description-field": {
+      marginBottom: scopeTheme(theme).spacing(1.25)
+    },
+    ".form-group": {
+      display: "flex",
+      flexDirection: "column",
+      marginBottom: scopeTheme(theme).spacing(2)
+    },
+    ".help-block": {
+      color: scopeTheme(theme).palette.gray.main
+    },
+    ".required": {
+      color: scopeTheme(theme).palette.error.main
+    },
+    display: "flex",
+    fieldset: {
+      border: 0,
+      padding: 0
+    },
+    flexDirection: "column",
+    height: "100%",
+    legend: {
+      display: "block",
+      fontSize: scopeTheme(theme).typography.fontSize.L,
+      fontWeight: scopeTheme(theme).typography.fontWeight.bold,
+      marginBottom: scopeTheme(theme).spacing(2),
+      width: "100%"
+    }
+  }),
+  iconStyles: theme => ({
+    height: scopeTheme(theme).iconSize.extra_large,
+    marginRight: scopeTheme(theme).spacing(2)
+  }),
+  termsStyles: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(1)
+  })
+});
+
+export { styles };