@nulogy/components 8.13.0 → 8.14.0

package/dist/main.js

@@ -8708,6 +8708,317 @@
       }, props)));
     };
 
+    var Flex = styled__default["default"](Box).withConfig({
+      displayName: "Flex",
+      componentId: "sc-1whlq91-0"
+    })({
+      display: "flex"
+    }, system({
+      gap: {
+        property: "gap",
+        scale: "space"
+      },
+      rowGap: {
+        property: "rowGap",
+        scale: "space"
+      },
+      columnGap: {
+        property: "columnGap",
+        scale: "space"
+      }
+    }), flexbox);
+
+    var textOverflow = system({
+      whiteSpace: true,
+      textOverflow: true
+    });
+
+    var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility, flexbox);
+
+    var getAttrs = function getAttrs(inline) {
+      return inline ? {
+        as: "span"
+      } : null;
+    };
+
+    var Text = styled__default["default"].p.attrs(function (props) {
+      return getAttrs(props.inline);
+    }).withConfig({
+      displayName: "Text",
+      componentId: "sc-15glbbx-0"
+    })(function (_ref) {
+      var disabled = _ref.disabled,
+          textTransform = _ref.textTransform,
+          theme = _ref.theme;
+      return {
+        textTransform: textTransform,
+        color: "currentColor",
+        marginTop: 0,
+        marginBottom: 0,
+        fontSize: theme.fontSizes.medium,
+        lineHeight: theme.lineHeights.base,
+        opacity: disabled ? "0.7" : undefined
+      };
+    }, addStyledProps);
+    Text.defaultProps = {
+      inline: false,
+      disabled: false
+    };
+
+    var Heading1 = Text.withComponent("h1");
+    Heading1.defaultProps = {
+      fontSize: "heading1",
+      lineHeight: "heading1",
+      fontWeight: "light",
+      mt: 0,
+      mb: "x6"
+    };
+    var Heading2 = Text.withComponent("h2");
+    Heading2.defaultProps = {
+      fontSize: "heading2",
+      lineHeight: "heading2",
+      fontWeight: "normal",
+      mt: 0,
+      mb: "x2"
+    };
+    var Heading3 = Text.withComponent("h3");
+    Heading3.defaultProps = {
+      fontSize: "heading3",
+      lineHeight: "heading3",
+      fontWeight: "medium",
+      mt: 0,
+      mb: "x1"
+    };
+    var Heading4 = Text.withComponent("h4");
+    Heading4.defaultProps = {
+      fontSize: "heading4",
+      lineHeight: "heading4",
+      fontWeight: "bold",
+      mt: 0,
+      mb: "x1"
+    };
+
+    var defaultOptions = {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transWrapTextNodes: '',
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
+      useSuspense: true
+    };
+    var i18nInstance;
+    var I18nContext = React__default["default"].createContext();
+    function getDefaults() {
+      return defaultOptions;
+    }
+    var ReportNamespaces = function () {
+      function ReportNamespaces() {
+        _classCallCheck__default["default"](this, ReportNamespaces);
+
+        this.usedNamespaces = {};
+      }
+
+      _createClass__default["default"](ReportNamespaces, [{
+        key: "addUsedNamespaces",
+        value: function addUsedNamespaces(namespaces) {
+          var _this = this;
+
+          namespaces.forEach(function (ns) {
+            if (!_this.usedNamespaces[ns]) _this.usedNamespaces[ns] = true;
+          });
+        }
+      }, {
+        key: "getUsedNamespaces",
+        value: function getUsedNamespaces() {
+          return Object.keys(this.usedNamespaces);
+        }
+      }]);
+
+      return ReportNamespaces;
+    }();
+    function getI18n() {
+      return i18nInstance;
+    }
+
+    function warn() {
+      if (console && console.warn) {
+        var _console;
+
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        if (typeof args[0] === 'string') args[0] = "react-i18next:: ".concat(args[0]);
+
+        (_console = console).warn.apply(_console, args);
+      }
+    }
+    var alreadyWarned = {};
+    function warnOnce() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+
+      if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
+      if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
+      warn.apply(void 0, args);
+    }
+    function loadNamespaces(i18n, ns, cb) {
+      i18n.loadNamespaces(ns, function () {
+        if (i18n.isInitialized) {
+          cb();
+        } else {
+          var initialized = function initialized() {
+            setTimeout(function () {
+              i18n.off('initialized', initialized);
+            }, 0);
+            cb();
+          };
+
+          i18n.on('initialized', initialized);
+        }
+      });
+    }
+    function hasLoadedNamespace(ns, i18n) {
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+      if (!i18n.languages || !i18n.languages.length) {
+        warnOnce('i18n.languages were undefined or empty', i18n.languages);
+        return true;
+      }
+
+      var lng = i18n.languages[0];
+      var fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+      var lastLng = i18n.languages[i18n.languages.length - 1];
+      if (lng.toLowerCase() === 'cimode') return true;
+
+      var loadNotPending = function loadNotPending(l, n) {
+        var loadState = i18n.services.backendConnector.state["".concat(l, "|").concat(n)];
+        return loadState === -1 || loadState === 2;
+      };
+
+      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
+      if (i18n.hasResourceBundle(lng, ns)) return true;
+      if (!i18n.services.backendConnector.backend) return true;
+      if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+      return false;
+    }
+
+    function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+    function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+    function useTranslation(ns) {
+      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var i18nFromProps = props.i18n;
+
+      var _ref = React.useContext(I18nContext) || {},
+          i18nFromContext = _ref.i18n,
+          defaultNSFromContext = _ref.defaultNS;
+
+      var i18n = i18nFromProps || i18nFromContext || getI18n();
+      if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
+
+      if (!i18n) {
+        warnOnce('You will need to pass in an i18next instance by using initReactI18next');
+
+        var notReadyT = function notReadyT(k) {
+          return Array.isArray(k) ? k[k.length - 1] : k;
+        };
+
+        var retNotReady = [notReadyT, {}, false];
+        retNotReady.t = notReadyT;
+        retNotReady.i18n = {};
+        retNotReady.ready = false;
+        return retNotReady;
+      }
+
+      if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
+
+      var i18nOptions = _objectSpread$5(_objectSpread$5(_objectSpread$5({}, getDefaults()), i18n.options.react), props);
+
+      var useSuspense = i18nOptions.useSuspense,
+          keyPrefix = i18nOptions.keyPrefix;
+      var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+      namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+      if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
+      var ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(function (n) {
+        return hasLoadedNamespace(n, i18n, i18nOptions);
+      });
+
+      function getT() {
+        return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+      }
+
+      var _useState = React.useState(getT),
+          _useState2 = _slicedToArray__default["default"](_useState, 2),
+          t = _useState2[0],
+          setT = _useState2[1];
+
+      var isMounted = React.useRef(true);
+      React.useEffect(function () {
+        var bindI18n = i18nOptions.bindI18n,
+            bindI18nStore = i18nOptions.bindI18nStore;
+        isMounted.current = true;
+
+        if (!ready && !useSuspense) {
+          loadNamespaces(i18n, namespaces, function () {
+            if (isMounted.current) setT(getT);
+          });
+        }
+
+        function boundReset() {
+          if (isMounted.current) setT(getT);
+        }
+
+        if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
+        if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
+        return function () {
+          isMounted.current = false;
+          if (bindI18n && i18n) bindI18n.split(' ').forEach(function (e) {
+            return i18n.off(e, boundReset);
+          });
+          if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(function (e) {
+            return i18n.store.off(e, boundReset);
+          });
+        };
+      }, [i18n, namespaces.join()]);
+      var isInitial = React.useRef(true);
+      React.useEffect(function () {
+        if (isMounted.current && !isInitial.current) {
+          setT(getT);
+        }
+
+        isInitial.current = false;
+      }, [i18n]);
+      var ret = [t, i18n, ready];
+      ret.t = t;
+      ret.i18n = i18n;
+      ret.ready = ready;
+      if (ready) return ret;
+      if (!ready && !useSuspense) return ret;
+      throw new Promise(function (resolve) {
+        loadNamespaces(i18n, namespaces, function () {
+          resolve();
+        });
+      });
+    }
+
+    function I18nextProvider(_ref) {
+      var i18n = _ref.i18n,
+          defaultNS = _ref.defaultNS,
+          children = _ref.children;
+      var value = React.useMemo(function () {
+        return {
+          i18n: i18n,
+          defaultNS: defaultNS
+        };
+      }, [i18n, defaultNS]);
+      return React.createElement(I18nContext.Provider, {
+        value: value
+      }, children);
+    }
+
     function _extends$2() {
       _extends$2 = Object.assign || function (target) {
         for (var i = 1; i < arguments.length; i++) {
@@ -9740,12 +10051,26 @@
       };
     };
 
-    var textOverflow = system({
-      whiteSpace: true,
-      textOverflow: true
-    });
+    var ComponentSizeContext = /*#__PURE__*/React.createContext(undefined);
+    function useComponentSize(selectedSize) {
+      var context = React.useContext(ComponentSizeContext);
 
-    var addStyledProps = compose(border, shadow, color, cursor$1, layout, overflow, space, textOverflow, transform, transition, typography, visibility, flexbox);
+      if (!context) {
+        throw new Error("useComponentSize must be used within the NDSProvider");
+      }
+
+      return selectedSize !== null && selectedSize !== void 0 ? selectedSize : context.size;
+    }
+
+    var ComponentSizeContextProvider = function ComponentSizeContextProvider(_ref) {
+      var size = _ref.size,
+          children = _ref.children;
+      return /*#__PURE__*/React__default["default"].createElement(ComponentSizeContext.Provider, {
+        value: {
+          size: size
+        }
+      }, children);
+    };
 
     var resetButtonStyles = {
       background: "none",
@@ -9764,11 +10089,11 @@
       return props.hover ? getColor(props) : curriedDarken("0.1", getColor(props));
     };
 
-    var Link = styled__default["default"].a.withConfig({
+    var StyledLink = styled__default["default"].a.withConfig({
       shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
         return !["underline", "hover"].includes(prop) && defaultValidatorFn(prop);
       },
-      displayName: "Link",
+      displayName: "Link__StyledLink",
       componentId: "sc-1fcpbo4-0"
     })(function (_a) {
       var underline = _a.underline,
@@ -9785,314 +10110,29 @@
           color: getHoverColor(props)
         }
       });
-    }, addStyledProps);
-    Link.defaultProps = {
-      underline: true
-    };
-
-    var Flex = styled__default["default"](Box).withConfig({
-      displayName: "Flex",
-      componentId: "sc-1whlq91-0"
-    })({
-      display: "flex"
-    }, system({
-      gap: {
-        property: "gap",
-        scale: "space"
-      },
-      rowGap: {
-        property: "rowGap",
-        scale: "space"
-      },
-      columnGap: {
-        property: "columnGap",
-        scale: "space"
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          py: "x2",
+          px: "0"
+        },
+        medium: {}
       }
-    }), flexbox);
-
-    var getAttrs = function getAttrs(inline) {
-      return inline ? {
-        as: "span"
-      } : null;
-    };
-
-    var Text = styled__default["default"].p.attrs(function (props) {
-      return getAttrs(props.inline);
-    }).withConfig({
-      displayName: "Text",
-      componentId: "sc-15glbbx-0"
-    })(function (_ref) {
-      var disabled = _ref.disabled,
-          textTransform = _ref.textTransform,
-          theme = _ref.theme;
-      return {
-        textTransform: textTransform,
-        color: "currentColor",
-        marginTop: 0,
-        marginBottom: 0,
-        fontSize: theme.fontSizes.medium,
-        lineHeight: theme.lineHeights.base,
-        opacity: disabled ? "0.7" : undefined
-      };
-    }, addStyledProps);
-    Text.defaultProps = {
-      inline: false,
-      disabled: false
-    };
-
-    var Heading1 = Text.withComponent("h1");
-    Heading1.defaultProps = {
-      fontSize: "heading1",
-      lineHeight: "heading1",
-      fontWeight: "light",
-      mt: 0,
-      mb: "x6"
-    };
-    var Heading2 = Text.withComponent("h2");
-    Heading2.defaultProps = {
-      fontSize: "heading2",
-      lineHeight: "heading2",
-      fontWeight: "normal",
-      mt: 0,
-      mb: "x2"
-    };
-    var Heading3 = Text.withComponent("h3");
-    Heading3.defaultProps = {
-      fontSize: "heading3",
-      lineHeight: "heading3",
-      fontWeight: "medium",
-      mt: 0,
-      mb: "x1"
-    };
-    var Heading4 = Text.withComponent("h4");
-    Heading4.defaultProps = {
-      fontSize: "heading4",
-      lineHeight: "heading4",
-      fontWeight: "bold",
-      mt: 0,
-      mb: "x1"
-    };
+    }), addStyledProps);
+    var Link = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+      var size = _a.size,
+          props = __rest(_a, ["size"]);
 
-    var defaultOptions = {
-      bindI18n: 'languageChanged',
-      bindI18nStore: '',
-      transEmptyNodeValue: '',
-      transSupportBasicHtmlNodes: true,
-      transWrapTextNodes: '',
-      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
-      useSuspense: true
+      var componentSize = useComponentSize(size);
+      return /*#__PURE__*/React__default["default"].createElement(StyledLink, Object.assign({
+        size: componentSize,
+        ref: ref
+      }, props));
+    });
+    Link.defaultProps = {
+      underline: true
     };
-    var i18nInstance;
-    var I18nContext = React__default["default"].createContext();
-    function getDefaults() {
-      return defaultOptions;
-    }
-    var ReportNamespaces = function () {
-      function ReportNamespaces() {
-        _classCallCheck__default["default"](this, ReportNamespaces);
-
-        this.usedNamespaces = {};
-      }
-
-      _createClass__default["default"](ReportNamespaces, [{
-        key: "addUsedNamespaces",
-        value: function addUsedNamespaces(namespaces) {
-          var _this = this;
-
-          namespaces.forEach(function (ns) {
-            if (!_this.usedNamespaces[ns]) _this.usedNamespaces[ns] = true;
-          });
-        }
-      }, {
-        key: "getUsedNamespaces",
-        value: function getUsedNamespaces() {
-          return Object.keys(this.usedNamespaces);
-        }
-      }]);
-
-      return ReportNamespaces;
-    }();
-    function getI18n() {
-      return i18nInstance;
-    }
-
-    function warn() {
-      if (console && console.warn) {
-        var _console;
-
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        if (typeof args[0] === 'string') args[0] = "react-i18next:: ".concat(args[0]);
-
-        (_console = console).warn.apply(_console, args);
-      }
-    }
-    var alreadyWarned = {};
-    function warnOnce() {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-
-      if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
-      if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
-      warn.apply(void 0, args);
-    }
-    function loadNamespaces(i18n, ns, cb) {
-      i18n.loadNamespaces(ns, function () {
-        if (i18n.isInitialized) {
-          cb();
-        } else {
-          var initialized = function initialized() {
-            setTimeout(function () {
-              i18n.off('initialized', initialized);
-            }, 0);
-            cb();
-          };
-
-          i18n.on('initialized', initialized);
-        }
-      });
-    }
-    function hasLoadedNamespace(ns, i18n) {
-      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-      if (!i18n.languages || !i18n.languages.length) {
-        warnOnce('i18n.languages were undefined or empty', i18n.languages);
-        return true;
-      }
-
-      var lng = i18n.languages[0];
-      var fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
-      var lastLng = i18n.languages[i18n.languages.length - 1];
-      if (lng.toLowerCase() === 'cimode') return true;
-
-      var loadNotPending = function loadNotPending(l, n) {
-        var loadState = i18n.services.backendConnector.state["".concat(l, "|").concat(n)];
-        return loadState === -1 || loadState === 2;
-      };
-
-      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
-      if (i18n.hasResourceBundle(lng, ns)) return true;
-      if (!i18n.services.backendConnector.backend) return true;
-      if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
-      return false;
-    }
-
-    function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-    function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-    function useTranslation(ns) {
-      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var i18nFromProps = props.i18n;
-
-      var _ref = React.useContext(I18nContext) || {},
-          i18nFromContext = _ref.i18n,
-          defaultNSFromContext = _ref.defaultNS;
-
-      var i18n = i18nFromProps || i18nFromContext || getI18n();
-      if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
-
-      if (!i18n) {
-        warnOnce('You will need to pass in an i18next instance by using initReactI18next');
-
-        var notReadyT = function notReadyT(k) {
-          return Array.isArray(k) ? k[k.length - 1] : k;
-        };
-
-        var retNotReady = [notReadyT, {}, false];
-        retNotReady.t = notReadyT;
-        retNotReady.i18n = {};
-        retNotReady.ready = false;
-        return retNotReady;
-      }
-
-      if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
-
-      var i18nOptions = _objectSpread$5(_objectSpread$5(_objectSpread$5({}, getDefaults()), i18n.options.react), props);
-
-      var useSuspense = i18nOptions.useSuspense,
-          keyPrefix = i18nOptions.keyPrefix;
-      var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
-      namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
-      if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
-      var ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(function (n) {
-        return hasLoadedNamespace(n, i18n, i18nOptions);
-      });
-
-      function getT() {
-        return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
-      }
-
-      var _useState = React.useState(getT),
-          _useState2 = _slicedToArray__default["default"](_useState, 2),
-          t = _useState2[0],
-          setT = _useState2[1];
-
-      var isMounted = React.useRef(true);
-      React.useEffect(function () {
-        var bindI18n = i18nOptions.bindI18n,
-            bindI18nStore = i18nOptions.bindI18nStore;
-        isMounted.current = true;
-
-        if (!ready && !useSuspense) {
-          loadNamespaces(i18n, namespaces, function () {
-            if (isMounted.current) setT(getT);
-          });
-        }
-
-        function boundReset() {
-          if (isMounted.current) setT(getT);
-        }
-
-        if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
-        if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
-        return function () {
-          isMounted.current = false;
-          if (bindI18n && i18n) bindI18n.split(' ').forEach(function (e) {
-            return i18n.off(e, boundReset);
-          });
-          if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(function (e) {
-            return i18n.store.off(e, boundReset);
-          });
-        };
-      }, [i18n, namespaces.join()]);
-      var isInitial = React.useRef(true);
-      React.useEffect(function () {
-        if (isMounted.current && !isInitial.current) {
-          setT(getT);
-        }
-
-        isInitial.current = false;
-      }, [i18n]);
-      var ret = [t, i18n, ready];
-      ret.t = t;
-      ret.i18n = i18n;
-      ret.ready = ready;
-      if (ready) return ret;
-      if (!ready && !useSuspense) return ret;
-      throw new Promise(function (resolve) {
-        loadNamespaces(i18n, namespaces, function () {
-          resolve();
-        });
-      });
-    }
-
-    function I18nextProvider(_ref) {
-      var i18n = _ref.i18n,
-          defaultNS = _ref.defaultNS,
-          children = _ref.children;
-      var value = React.useMemo(function () {
-        return {
-          i18n: i18n,
-          defaultNS: defaultNS
-        };
-      }, [i18n, defaultNS]);
-      return React.createElement(I18nContext.Provider, {
-        value: value
-      }, children);
-    }
 
     var CloseButton$1 = function CloseButton(_ref) {
       var onClick = _ref.onClick,
@@ -10119,12 +10159,12 @@
     };
 
     var styles = function styles(_ref) {
-      var _ref2;
-
       var theme = _ref.theme;
-      return _ref2 = {}, _ref2["" + Link] = {
-        color: theme.colors.black
-      }, _ref2;
+      return {
+        a: {
+          color: theme.colors.black
+        }
+      };
     };
 
     var alertColours = {
@@ -17295,6 +17335,9 @@
         style: "none"
       };
     }
+    function stylesForSize(config, size) {
+      return config[size];
+    }
     var showIndicatorSeparator = function showIndicatorSeparator(_ref5) {
       var isMulti = _ref5.isMulti,
           hasValue = _ref5.hasValue,
@@ -17307,6 +17350,7 @@
           error = _ref6.error,
           maxHeight = _ref6.maxHeight,
           windowed = _ref6.windowed,
+          size = _ref6.size,
           _ref6$hasDefaultOptio = _ref6.hasDefaultOptions,
           hasDefaultOptions = _ref6$hasDefaultOptio === void 0 ? true : _ref6$hasDefaultOptio;
       return {
@@ -17395,16 +17439,23 @@
         input: function input() {
           return {};
         },
-        valueContainer: function valueContainer(provided) {
-          return Object.assign(Object.assign({}, provided), {
+        valueContainer: function valueContainer(provided, state) {
+          return Object.assign(Object.assign(Object.assign({}, provided), {
             padding: 0,
             overflow: "auto",
             maxHeight: "150px",
-            rowGap: theme.space.half,
-            columnGap: theme.space.half,
-            paddingTop: theme.space.half,
-            paddingBottom: theme.space.half
-          });
+            gap: theme.space.half
+          }), stylesForSize({
+            large: {
+              paddingTop: state.isMulti && state.hasValue ? theme.space.x1 : theme.space.x2,
+              paddingBottom: state.isMulti && state.hasValue ? theme.space.x1 : theme.space.x2,
+              gap: theme.space.x1
+            },
+            medium: {
+              paddingTop: theme.space.half,
+              paddingBottom: theme.space.half
+            }
+          }, size));
         },
         menu: function menu(provided, state) {
           return Object.assign(Object.assign({}, provided), {
@@ -17480,21 +17531,32 @@
           });
         },
         multiValueLabel: function multiValueLabel() {
-          return {
+          return Object.assign({
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
             overflow: "hidden",
             color: theme.colors.black,
             borderRadius: theme.radii.small,
-            fontSize: theme.fontSizes.small,
-            padding: theme.space.half,
-            paddingLeft: theme.space.x1
-          };
+            fontSize: theme.fontSizes.small
+          }, stylesForSize({
+            large: {
+              fontSize: theme.fontSizes.medium,
+              lineHeight: theme.lineHeights.base,
+              padding: theme.space.x1,
+              paddingRight: theme.space.half
+            },
+            medium: {
+              padding: theme.space.half,
+              paddingLeft: theme.space.x1
+            }
+          }, size));
         },
         multiValueRemove: function multiValueRemove(provided) {
-          return Object.assign(Object.assign({}, provided), {
+          return Object.assign(Object.assign(Object.assign({}, provided), {
             svg: {
-              fill: theme.colors.black
+              fill: theme.colors.black,
+              height: theme.sizes.x2,
+              width: theme.sizes.x2
             },
             borderBottomLeftRadius: 0,
             borderTopLeftRadius: 0,
@@ -17505,7 +17567,13 @@
                 fill: theme.colors.white
               }
             }
-          });
+          }), stylesForSize({
+            large: {
+              padding: theme.space.x1
+            },
+            medium: {// Nothing
+            }
+          }, size));
         },
         noOptionsMessage: function noOptionsMessage(provided) {
           return Object.assign(Object.assign({}, provided), {
@@ -17544,9 +17612,24 @@
         verticalAlign: "top",
         alignItems: "flex-start",
         userSelect: "none",
-        padding: Theme.space.half + " 0"
-      };
-    });
+        paddingTop: Theme.space.x1,
+        paddingBottom: Theme.space.x1,
+        paddingLeft: 0,
+        paddingRight: 0
+      };
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          py: "x2",
+          px: "0"
+        },
+        medium: {
+          py: "x1",
+          px: "0"
+        }
+      }
+    }));
 
     var subPx = function subPx(val1, val2) {
       var val2Str = !val2 ? "1px" : "" + val2;
@@ -18383,6 +18466,7 @@
           borderBottomRightRadius: theme.radii.medium
         },
         div: {
+          height: "auto",
           padding: subPx(theme.space.x1),
           fontWeight: isSelected ? theme.fontWeights.medium : theme.fontWeights.normal,
           background: isFocused ? theme.colors.lightBlue : null,
@@ -18395,6 +18479,21 @@
           }
         }
       };
+    }, function (_ref2) {
+      var theme = _ref2.theme,
+          selectProps = _ref2.selectProps;
+      return stylesForSize({
+        large: {
+          div: {
+            padding: subPx(theme.space.x2)
+          }
+        },
+        medium: {
+          div: {
+            padding: subPx(theme.space.x1)
+          }
+        }
+      }, selectProps.size);
     });
     var SelectOption = function SelectOption(props) {
       return /*#__PURE__*/React__default["default"].createElement(StyledOption, Object.assign({}, props, {
@@ -18503,7 +18602,8 @@
       closeMenuOnSelect: true
     };
     var ReactSelect = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
-      var autocomplete = _a.autocomplete,
+      var size = _a.size,
+          autocomplete = _a.autocomplete,
           options = _a.options,
           labelText = _a.labelText,
           required = _a.required,
@@ -18526,7 +18626,7 @@
           ariaLabel = _a["aria-label"],
           _a$windowThreshold = _a.windowThreshold,
           windowThreshold = _a$windowThreshold === void 0 ? 300 : _a$windowThreshold,
-          props = __rest(_a, ["autocomplete", "options", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "error", "id", "initialIsOpen", "maxHeight", "multiselect", "onChange", "placeholder", "value", "defaultValue", "components", "aria-label", "windowThreshold"]);
+          props = __rest(_a, ["size", "autocomplete", "options", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "error", "id", "initialIsOpen", "maxHeight", "multiselect", "onChange", "placeholder", "value", "defaultValue", "components", "aria-label", "windowThreshold"]);
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
@@ -18535,6 +18635,7 @@
       var spaceProps = getSubset(props, propTypes.space);
       var reactSelectRef = React__default["default"].useRef(null);
       var optionsRef = React__default["default"].useRef(options);
+      var componentSize = useComponentSize(size);
       React__default["default"].useEffect(function () {
         checkOptionsAreValid(options);
         optionsRef.current = options;
@@ -18554,6 +18655,7 @@
         requirementText: requirementText,
         helpText: helpText
       }, /*#__PURE__*/React__default["default"].createElement(WindowedSelect__default["default"], Object.assign({
+        size: componentSize,
         ref: reactSelectRef,
         placeholder: placeholder || t("select ..."),
         windowThreshold: windowThreshold,
@@ -18561,6 +18663,7 @@
           theme: themeContext,
           error: error,
           maxHeight: maxHeight,
+          size: componentSize,
           windowed: options.length > windowThreshold
         }),
         isDisabled: disabled,
@@ -19121,7 +19224,7 @@
       return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
     }
 
-    function getSize$3(axis, body, html, computedStyle) {
+    function getSize$2(axis, body, html, computedStyle) {
       return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
     }
 
@@ -19131,8 +19234,8 @@
       var computedStyle = isIE(10) && getComputedStyle(html);
 
       return {
-        height: getSize$3('Height', body, html, computedStyle),
-        width: getSize$3('Width', body, html, computedStyle)
+        height: getSize$2('Height', body, html, computedStyle),
+        width: getSize$2('Width', body, html, computedStyle)
       };
     }
 
@@ -21963,36 +22066,6 @@
       hideDelay: "100"
     };
 
-    var getSize$2 = function getSize(size, theme) {
-      switch (size) {
-        case "small":
-          return {
-            fontSize: "" + theme.fontSizes.small,
-            lineHeight: "" + theme.lineHeights.smallTextCompressed,
-            padding: subPx(theme.space.half) + " " + theme.space.x1
-          };
-
-        case "medium":
-          return {
-            fontSize: "" + theme.fontSizes.medium,
-            padding: subPx(theme.space.x1) + " " + theme.space.x2
-          };
-
-        case "large":
-          return {
-            fontSize: "" + theme.fontSizes.large,
-            lineHeight: "" + theme.lineHeights.subsectionTitle,
-            padding: subPx(theme.space.x2) + " " + theme.space.x3
-          };
-
-        default:
-          return {
-            fontSize: "" + theme.fontSizes.medium,
-            padding: subPx(theme.space.x1) + " " + theme.space.x2
-          };
-      }
-    };
-
     var WrapperButton$2 = styled__default["default"].button.withConfig({
       displayName: "Button__WrapperButton",
       componentId: "sc-hxfi59-0"
@@ -22036,12 +22109,30 @@
         },
         "&:disabled": {
           opacity: ".5"
-        }
+        },
+        fontSize: "medium",
+        padding: subPx(theme.space.x1) + " " + theme.space.x2
       };
     }, function (_ref3) {
-      var size = _ref3.size,
-          theme = _ref3.theme;
-      return Object.assign({}, getSize$2(size, theme));
+      var theme = _ref3.theme;
+      return variant({
+        prop: "size",
+        variants: {
+          small: {
+            fontSize: "small",
+            lineHeight: "smallTextCompressed",
+            padding: subPx(theme.space.half) + " " + theme.space.x1
+          },
+          large: {
+            fontSize: "medium",
+            padding: subPx(theme.space.x2) + " " + theme.space.x3
+          },
+          medium: {
+            fontSize: "medium",
+            padding: subPx(theme.space.x1) + " " + theme.space.x2
+          }
+        }
+      });
     }, space);
     var Button = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
       var children = _a.children,
@@ -22050,18 +22141,18 @@
           icon = _a.icon,
           className = _a.className,
           asLink = _a.asLink,
-          _a$size = _a.size,
-          size = _a$size === void 0 ? "medium" : _a$size,
+          size = _a.size,
           props = __rest(_a, ["children", "iconSide", "icon", "className", "asLink", "size"]);
 
       var _useTheme = styled.useTheme(),
           smallTextCompressed = _useTheme.lineHeights.smallTextCompressed;
 
+      var componentSize = useComponentSize(size);
       return /*#__PURE__*/React__default["default"].createElement(WrapperButton$2, Object.assign({
-        as: asLink ? "a" : undefined,
+        as: asLink ? "a" : "button",
         ref: ref,
         className: className,
-        size: size
+        size: componentSize
       }, props), icon && iconSide === "left" && /*#__PURE__*/React__default["default"].createElement(Icon, {
         size: smallTextCompressed + "em",
         mr: "half",
@@ -24329,7 +24420,6 @@
         position: "relative",
         display: "inline-flex",
         alignItems: "center",
-        padding: theme.space.half + " " + theme.space.none,
         cursor: disabled ? "default" : "pointer"
       }, _ref4["" + Text] = {
         display: "block",
@@ -24356,8 +24446,20 @@
         boxShadow: theme.shadows.focus
       }, _focus["" + HoverText] = {
         opacity: "1"
-      }, _focus), _ref4;
-    }, space);
+      }, _focus), _ref4.paddingTop = theme.space.half, _ref4.paddingBottom = theme.space.half, _ref4.paddingLeft = theme.space.none, _ref4.paddingRight = theme.space.none, _ref4;
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          py: "x1",
+          px: "none"
+        },
+        medium: {
+          py: "half",
+          px: "none"
+        }
+      }
+    }), space);
     var IconicButton = /*#__PURE__*/React__default["default"].forwardRef(function (_a, forwardedRef) {
       var children = _a.children,
           _a$color = _a.color,
@@ -24367,24 +24469,27 @@
           icon = _a.icon,
           labelHidden = _a.labelHidden,
           className = _a.className,
-          iconSize = _a.iconSize,
+          _a$iconSize = _a.iconSize,
+          iconSize = _a$iconSize === void 0 ? "x3" : _a$iconSize,
           fontSize = _a.fontSize,
           tooltip = _a.tooltip,
-          props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
+          size = _a.size,
+          props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip", "size"]);
 
-      var size = iconSize || "x3";
+      var componentSize = useComponentSize(size);
       return /*#__PURE__*/React__default["default"].createElement(WrapperButton$1, Object.assign({
         ref: forwardedRef,
         "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
         className: className,
-        hoverBackgroundColor: hoverBackgroundColor
+        hoverBackgroundColor: hoverBackgroundColor,
+        size: componentSize
       }, props), /*#__PURE__*/React__default["default"].createElement(Manager$1, null, /*#__PURE__*/React__default["default"].createElement(Reference$1, null, function (_ref5) {
         var ref = _ref5.ref;
         return /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
           ref: ref,
-          size: iconSize || "x3"
+          size: iconSize
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-          size: size,
+          size: iconSize,
           icon: icon,
           color: color
         }));
@@ -24407,12 +24512,12 @@
           style: style,
           placement: placement
         }, tooltip ? tooltip : children) : null;
-      })), children && !labelHidden && /*#__PURE__*/React__default["default"].createElement(Text, {
+      })), children && !labelHidden && (typeof children === "string" || typeof children === "number" ? /*#__PURE__*/React__default["default"].createElement(Text, {
         fontSize: fontSize,
         mr: "half",
         ml: "half",
         color: color
-      }, children));
+      }, children) : children));
     });
     IconicButton.propTypes = {
       className: PropTypes__default["default"].string,
@@ -24767,6 +24872,7 @@
           children = _a.children,
           _a$showArrow = _a.showArrow,
           showArrow = _a$showArrow === void 0 ? true : _a$showArrow,
+          size = _a.size,
           disabled = _a.disabled,
           defaultOpen = _a.defaultOpen,
           _a$backgroundColor = _a.backgroundColor,
@@ -24785,7 +24891,7 @@
           closeAriaLabel = _a.closeAriaLabel,
           _a$openOnHover = _a.openOnHover,
           openOnHover = _a$openOnHover === void 0 ? false : _a$openOnHover,
-          props = __rest(_a, ["trigger", "children", "showArrow", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel", "openOnHover"]);
+          props = __rest(_a, ["trigger", "children", "showArrow", "size", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel", "openOnHover"]);
 
       var spaceProps = getSubset(props, propTypes.space);
       var restProps = omitSubset(props, propTypes.space);
@@ -24794,6 +24900,7 @@
           boundariesElement: boundariesElement
         });
       }, [boundariesElement]);
+      var componentSize = useComponentSize(size);
       return /*#__PURE__*/React__default["default"].createElement(Popper$1, {
         trigger: /*#__PURE__*/React__default["default"].cloneElement(trigger(), Object.assign({
           type: "button",
@@ -24818,7 +24925,11 @@
         id: id,
         backgroundColor: backgroundColor,
         showArrow: showArrow
-      }, restProps), children));
+      }, restProps), React__default["default"].Children.map(children, function (child) {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, Object.assign({
+          size: componentSize
+        }, child.props), child.props.children);
+      })));
     });
 
     var DropdownButton = styled__default["default"].button.withConfig({
@@ -24841,8 +24952,11 @@
         lineHeight: theme.lineHeights.base,
         fontSize: theme.fontSizes.medium,
         transition: ".2s",
-        padding: theme.space.x1 + " " + theme.space.x2 + " " + theme.space.x1 + " 12px",
         borderLeft: theme.space.half + " solid transparent",
+        paddingTop: theme.space.x1,
+        paddingRight: theme.space.x2,
+        paddingBottom: theme.space.x1,
+        paddingLeft: "12px",
         "&:hover": {
           color: theme.colors[hoverColor],
           backgroundColor: disabled ? "transparent" : theme.colors[bgHoverColor]
@@ -24857,7 +24971,23 @@
           opacity: ".5"
         }
       };
-    }, addStyledProps);
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          pt: "x2",
+          pr: "x2",
+          pb: "x2",
+          pl: "12px"
+        },
+        medium: {
+          pt: "x1",
+          pr: "x2",
+          pb: "x1",
+          pl: "12px"
+        }
+      }
+    }), addStyledProps);
     DropdownButton.defaultProps = {
       disabled: false,
       hoverColor: "darkBlue",
@@ -24887,7 +25017,6 @@
         lineHeight: theme.lineHeights.base,
         fontSize: theme.fontSizes.medium,
         transition: ".2s",
-        padding: theme.space.x1 + " " + theme.space.x2 + " " + theme.space.x1 + " 12px",
         borderLeft: theme.space.half + " solid transparent",
         "&:visited": {
           color: theme.colors[color]
@@ -24904,9 +25033,29 @@
         },
         "&:disabled": {
           opacity: ".5"
-        }
+        },
+        paddingTop: theme.space.x1,
+        paddingRight: theme.space.x2,
+        paddingBottom: theme.space.x1,
+        paddingLeft: "12px"
       };
-    }, addStyledProps);
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          pt: "x2",
+          pr: "x2",
+          pb: "x2",
+          pl: "12px"
+        },
+        medium: {
+          pt: "x1",
+          pr: "x2",
+          pb: "x1",
+          pl: "12px"
+        }
+      }
+    }), addStyledProps);
     DropdownLink.defaultProps = {
       disabled: false,
       color: "darkGrey",
@@ -25064,7 +25213,7 @@
       var isOpen = _ref.isOpen,
           theme = _ref.theme;
       return {
-        position: "relative",
+        padding: theme.space.x1 + " " + theme.space.x1 + " " + theme.space.x1 + " 12px",
         backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
         color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey
       };
@@ -25077,15 +25226,14 @@
       return /*#__PURE__*/React__default["default"].createElement(StyledButton$3, Object.assign({
         isOpen: isOpen,
         ref: ref
-      }, props), name, /*#__PURE__*/React__default["default"].createElement(Icon, {
-        style: {
-          position: "absolute",
-          top: "10px"
-        },
+      }, props), /*#__PURE__*/React__default["default"].createElement(Flex, {
+        gap: "half",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, name, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "rightArrow",
-        size: "20px",
-        p: "2px"
-      }));
+        size: "20px"
+      })));
     });
     SubMenuTriggerButton$1.displayName = "SubMenuTriggerButton";
 
@@ -25874,89 +26022,6 @@
       suffixWidth: null
     };
 
-    var StyledInputIcon = styled__default["default"](Icon).withConfig({
-      displayName: "InputField__StyledInputIcon",
-      componentId: "sc-a97ghf-0"
-    })(function (_ref) {
-      var theme = _ref.theme;
-      return {
-        position: "absolute",
-        right: theme.space.x1,
-        color: theme.colors.darkGrey,
-        bottom: "50%",
-        transform: "translateY(50%)",
-        pointerEvents: "none"
-      };
-    });
-
-    var inputStyles = function inputStyles(theme) {
-      return {
-        disabled: {
-          color: curriedTransparentize(0.33, theme.colors.black),
-          borderColor: theme.colors.lightGrey,
-          backgroundColor: theme.colors.whiteGrey
-        },
-        error: {
-          color: theme.colors.red,
-          borderColor: theme.colors.red
-        },
-        default: {
-          color: theme.colors.black,
-          borderColor: theme.colors.grey
-        }
-      };
-    };
-
-    var getInputStyle = function getInputStyle(_ref2) {
-      var disabled = _ref2.disabled,
-          error = _ref2.error,
-          theme = _ref2.theme;
-
-      if (disabled) {
-        return inputStyles(theme).disabled;
-      }
-
-      if (error) {
-        return inputStyles(theme).error;
-      }
-
-      return inputStyles(theme).default;
-    };
-
-    var StyledInput = styled__default["default"].input.withConfig({
-      displayName: "InputField__StyledInput",
-      componentId: "sc-a97ghf-1"
-    })(function (_ref3) {
-      var theme = _ref3.theme,
-          inputWidth = _ref3.inputWidth;
-      return {
-        display: "block",
-        flexGrow: 1,
-        border: "1px solid",
-        borderRadius: theme.radii.medium,
-        padding: subPx(theme.space.x1),
-        fontSize: theme.fontSizes.medium,
-        lineHeight: theme.lineHeights.base,
-        margin: theme.space.none,
-        minHeight: theme.space.x5,
-        maxWidth: inputWidth,
-        width: inputWidth,
-        "&:focus": {
-          outline: "none",
-          color: theme.colors.black,
-          borderColor: theme.colors.blue,
-          boxShadow: theme.shadows.focus,
-          " ~ svg": {
-            fill: theme.colors.darkBlue
-          }
-        },
-        "::placeholder": {
-          color: curriedTransparentize(0.4, theme.colors.black)
-        }
-      };
-    }, space, function (props) {
-      return getInputStyle(props);
-    });
     var InputField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var icon = _a.icon,
           error = _a.error,
@@ -25972,8 +26037,11 @@
           suffixWidth = _a.suffixWidth,
           inputWidth = _a.inputWidth,
           iconSize = _a.iconSize,
-          props = __rest(_a, ["icon", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "iconSize"]);
+          size = _a.size,
+          htmlSize = _a.htmlSize,
+          props = __rest(_a, ["icon", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "iconSize", "size", "htmlSize"]);
 
+      var componentSize = useComponentSize(size);
       return /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
         labelText: labelText,
         requirementText: requirementText,
@@ -25995,16 +26063,116 @@
         required: required,
         error: error,
         ref: ref,
+        size: htmlSize,
+        scale: componentSize,
         inputWidth: inputWidth
       }, props)), icon && /*#__PURE__*/React__default["default"].createElement(StyledInputIcon, {
         icon: icon,
-        size: iconSize || "x2"
+        size: iconSize || "x2",
+        scale: componentSize
       })), /*#__PURE__*/React__default["default"].createElement(Suffix, {
         suffix: suffix,
         suffixWidth: suffixWidth,
         textAlign: suffixAlignment
       })));
     });
+    var StyledInput = styled__default["default"].input.withConfig({
+      displayName: "InputField__StyledInput",
+      componentId: "sc-a97ghf-0"
+    })(function (_ref) {
+      var theme = _ref.theme,
+          inputWidth = _ref.inputWidth;
+      return {
+        display: "block",
+        flexGrow: 1,
+        border: "1px solid",
+        borderRadius: theme.radii.medium,
+        fontSize: theme.fontSizes.medium,
+        lineHeight: theme.lineHeights.base,
+        margin: theme.space.none,
+        minHeight: theme.space.x5,
+        maxWidth: inputWidth,
+        width: inputWidth,
+        "&:focus": {
+          outline: "none",
+          color: theme.colors.black,
+          borderColor: theme.colors.blue,
+          boxShadow: theme.shadows.focus,
+          " ~ svg": {
+            fill: theme.colors.darkBlue
+          }
+        },
+        "::placeholder": {
+          color: curriedTransparentize(0.4, theme.colors.black)
+        },
+        padding: "" + subPx(theme.space.x1)
+      };
+    }, function (_ref2) {
+      var theme = _ref2.theme;
+      return variant({
+        prop: "scale",
+        variants: {
+          large: {
+            padding: "" + subPx(theme.space.x2)
+          },
+          medium: {
+            padding: "" + subPx(theme.space.x1)
+          }
+        }
+      });
+    }, function (_ref3) {
+      var disabled = _ref3.disabled,
+          error = _ref3.error,
+          theme = _ref3.theme;
+      return cssForState({
+        disabled: disabled,
+        error: error,
+        theme: theme
+      });
+    }, space);
+    var StyledInputIcon = styled__default["default"](Icon).withConfig({
+      displayName: "InputField__StyledInputIcon",
+      componentId: "sc-a97ghf-1"
+    })(function (_ref4) {
+      var theme = _ref4.theme;
+      return {
+        position: "absolute",
+        right: theme.space.x1,
+        color: theme.colors.darkGrey,
+        bottom: "50%",
+        transform: "translateY(50%)",
+        pointerEvents: "none"
+      };
+    }, variant({
+      prop: "scale",
+      variants: {
+        large: {
+          right: "x2"
+        },
+        medium: {
+          right: "x1"
+        }
+      }
+    }));
+
+    var cssForState = function cssForState(_ref5) {
+      var disabled = _ref5.disabled,
+          error = _ref5.error,
+          theme = _ref5.theme;
+      if (disabled) return {
+        color: curriedTransparentize(0.33, theme.colors.black),
+        borderColor: theme.colors.lightGrey,
+        backgroundColor: theme.colors.whiteGrey
+      };
+      if (error) return {
+        color: theme.colors.red,
+        borderColor: theme.colors.red
+      };
+      return {
+        color: theme.colors.black,
+        borderColor: theme.colors.grey
+      };
+    };
 
     var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var errorMessage = _a.errorMessage,
@@ -26207,10 +26375,12 @@
         target: menuItem.openInNew ? "_blank" : undefined
       };
       var topLevel = layer === 0;
-      var MenuLink = topLevel ? TopLevelLink : DropdownLink;
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-      }, /*#__PURE__*/React__default["default"].createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      }, topLevel ? /*#__PURE__*/React__default["default"].createElement(TopLevelLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        size: topLevel ? "x3" : "x2",
+        icon: "openInNew"
+      })) : /*#__PURE__*/React__default["default"].createElement(DropdownLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default["default"].createElement(Icon, {
         size: topLevel ? "x3" : "x2",
         icon: "openInNew"
       })));
@@ -26638,33 +26808,73 @@
       };
     });
 
-    var BreadcrumbsListItem = styled__default["default"].li.withConfig({
-      displayName: "BreadcrumbsListItem",
+    var BreadcrumbsListSeparator = styled__default["default"].li.withConfig({
+      displayName: "BreadcrumbsListItem__BreadcrumbsListSeparator",
       componentId: "sc-1ax5rc4-0"
     })(function (_ref) {
       var theme = _ref.theme;
       return {
         margin: 0,
-        padding: 0,
         listStyle: "none",
         display: "inline-flex",
         alignSelf: "center",
         color: theme.colors.midGrey,
         "a, p": {
-          fontSize: theme.fontSizes.small
+          fontSize: theme.fontSizes.medium
         },
         "a:visited": {
           color: theme.colors.darkBlue
         }
       };
     }, space, layout, color, flexbox);
+    var BreadcrumbsListItem = styled__default["default"].li.withConfig({
+      displayName: "BreadcrumbsListItem",
+      componentId: "sc-1ax5rc4-1"
+    })(function (_ref2) {
+      var theme = _ref2.theme;
+      return {
+        margin: 0,
+        listStyle: "none",
+        display: "inline-flex",
+        alignSelf: "center",
+        color: theme.colors.darkBlue,
+        a: {
+          color: theme.colors.darkBlue
+        },
+        "a:visited": {
+          color: theme.colors.darkBlue
+        },
+        "a, p": {
+          padding: theme.space.none,
+          fontSize: theme.fontSizes.small
+        }
+      };
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          "a, p": {
+            py: "x2",
+            px: "x1",
+            fontSize: "medium"
+          }
+        },
+        medium: {
+          "a, p": {
+            py: "0",
+            px: "0",
+            fontSize: "small"
+          }
+        }
+      }
+    }), space, layout, color, flexbox);
 
-    var insertSeparators = function insertSeparators(items, className) {
+    var insertSeparators = function insertSeparators(items) {
       return items.reduce(function (acc, current, index) {
-        return acc.concat(current, /*#__PURE__*/React__default["default"].createElement(BreadcrumbsListItem, {
+        return acc.concat(current, /*#__PURE__*/React__default["default"].createElement(BreadcrumbsListSeparator, {
           "aria-hidden": true,
           key: "separator-" + index,
-          className: className
+          className: "separator"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: "rightArrow"
         })));
@@ -26672,22 +26882,19 @@
     };
 
     var Breadcrumbs = function Breadcrumbs(_a) {
-      var children = _a.children,
-          as = _a.as,
-          props = __rest(_a, ["children", "as"]);
+      var size = _a.size,
+          children = _a.children,
+          props = __rest(_a, ["size", "children"]);
 
+      var componentSize = useComponentSize(size);
       var allItems = React__default["default"].Children.map(children, function (child, index) {
         if (! /*#__PURE__*/React.isValidElement(child)) return null;
         return /*#__PURE__*/React__default["default"].createElement(BreadcrumbsListItem, {
+          size: componentSize,
           key: "child-" + index
-        }, /*#__PURE__*/React__default["default"].cloneElement(child, {
-          // @ts-ignore
-          color: "darkBlue"
-        }));
+        }, child);
       }).filter(Boolean);
-      return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
-        as: as
-      }, props), /*#__PURE__*/React__default["default"].createElement(BreadcrumbsList, null, insertSeparators(allItems, "seperator")));
+      return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({}, props), /*#__PURE__*/React__default["default"].createElement(BreadcrumbsList, null, insertSeparators(allItems)));
     };
 
     Breadcrumbs.defaultProps = {
@@ -26886,20 +27093,22 @@
       }), _ref2["&:not(:checked) + " + VisualCheckbox] = Object.assign({}, getCheckboxStyle(props, "unchecked")), _ref2;
     });
     var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
-      var className = props.className,
+      var size = props.size,
+          className = props.className,
           labelText = props.labelText,
           disabled = props.disabled,
           checked = props.checked,
           required = props.required,
           error = props.error,
           indeterminate = props.indeterminate;
+      var componentSize = useComponentSize(size);
       var spaceProps = getSubset(props, propTypes.space);
       var restProps = omitSubset(props, propTypes.space);
       return /*#__PURE__*/React__default["default"].createElement(Box, Object.assign({
         className: className,
-        py: "half",
         px: "0"
       }, spaceProps), /*#__PURE__*/React__default["default"].createElement(ClickInputLabel, {
+        size: componentSize,
         disabled: disabled
       }, /*#__PURE__*/React__default["default"].createElement(CheckboxInput, Object.assign({
         type: "checkbox",
@@ -40413,6 +40622,7 @@
           onUpKeyPress = _ref.onUpKeyPress,
           onDownKeyPress = _ref.onDownKeyPress,
           onEnterKeyPress = _ref.onEnterKeyPress,
+          size = _ref.size,
           ariaLabel = _ref["aria-label"];
 
       var handleChange = function handleChange(e) {
@@ -40440,6 +40650,7 @@
         onBlur: onBlur,
         onFocus: onFocus,
         ref: ref,
+        size: size,
         "aria-label": ariaLabel || t("select a date"),
         autoComplete: "off"
       }, inputProps, {
@@ -40562,6 +40773,7 @@
     var DatePicker = /*#__PURE__*/React.forwardRef(function (_a, datePickerRef) {
       var _a$dateFormat = _a.dateFormat,
           dateFormat = _a$dateFormat === void 0 ? DEFAULT_DATE_FORMAT : _a$dateFormat,
+          size = _a.size,
           errorMessage = _a.errorMessage,
           errorList = _a.errorList,
           inputProps = _a.inputProps,
@@ -40575,7 +40787,7 @@
           onBlur = _a.onBlur,
           onFocus = _a.onFocus,
           selected = _a.selected,
-          props = __rest(_a, ["dateFormat", "errorMessage", "errorList", "inputProps", "minDate", "maxDate", "highlightDates", "disableFlipping", "className", "onInputChange", "onChange", "onBlur", "onFocus", "selected"]);
+          props = __rest(_a, ["dateFormat", "size", "errorMessage", "errorList", "inputProps", "minDate", "maxDate", "highlightDates", "disableFlipping", "className", "onInputChange", "onChange", "onBlur", "onFocus", "selected"]);
 
       var _useState = React.useState(selected),
           selectedDate = _useState[0],
@@ -40585,6 +40797,7 @@
           ref = _useState2[0],
           setRef = _useState2[1];
 
+      var componentSize = useComponentSize(size);
       React.useEffect(function () {
         registerDatePickerLocales();
       });
@@ -40648,12 +40861,13 @@
       };
 
       var customInputProps = Object.assign(Object.assign(Object.assign(Object.assign({}, InputFieldDefaultProps), {
-        inputWidth: "184px",
+        inputWidth: componentSize === "large" ? "240px" : "184px",
         error: !!(errorMessage || errorList)
       }), inputProps), {
         placeholder: inputProps && inputProps.placeholder || (dateFormat === DEFAULT_DATE_FORMAT ? DEFAULT_PLACEHOLDER$1 : dateFormat)
       });
       var customInput = /*#__PURE__*/React__default["default"].createElement(DatePickerInput, {
+        size: componentSize,
         inputProps: customInputProps,
         dateFormat: dateFormat,
         onInputChange: handleInputChange,
@@ -40710,7 +40924,8 @@
           endComponent = _a.endComponent,
           _a$errorMessages = _a.errorMessages,
           errorMessages = _a$errorMessages === void 0 ? [] : _a$errorMessages,
-          props = __rest(_a, ["labelProps", "startComponent", "endComponent", "errorMessages"]);
+          size = _a.size,
+          props = __rest(_a, ["labelProps", "startComponent", "endComponent", "errorMessages", "size"]);
 
       var spaceProps = getSubset(props, propTypes.space);
       var restProps = omitSubset(props, propTypes.space);
@@ -40723,10 +40938,9 @@
       }, /*#__PURE__*/React__default["default"].createElement(Flex, null, startComponent), /*#__PURE__*/React__default["default"].createElement(Flex, {
         px: "half",
         alignItems: "flex-end",
-        alignSelf: "flex-end",
-        height: "100%"
+        alignSelf: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(Text, {
-        lineHeight: "38px"
+        lineHeight: size === "large" ? "56px" : "38px"
       }, "-")), /*#__PURE__*/React__default["default"].createElement(Flex, null, endComponent)), errorMessages.map(function (errorMessage, i) {
         return (
           /*#__PURE__*/
@@ -40883,27 +41097,44 @@
     var debounce_1 = debounce;
     debounce_1.debounce;
 
-    // @ts-nocheck
     var TimePickerOption = styled__default["default"].li.withConfig({
       displayName: "TimePickerOption",
       componentId: "sc-a59kp-0"
     })(function (_ref) {
       var theme = _ref.theme,
-          isSelected = _ref.isSelected,
-          isFocused = _ref.isFocused,
-          isClosest = _ref.isClosest;
-      return Object.assign({
-        padding: theme.space.x1,
+          isSelected = _ref.isSelected;
+      return {
         marginBottom: "0px",
         backgroundColor: isSelected ? theme.colors.darkBlue : theme.colors.white,
         color: isSelected ? theme.colors.white : theme.colors.black,
         "&:hover": {
           background: !isSelected && theme.colors.lightBlue
+        },
+        padding: theme.space.x1
+      };
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          px: "x1",
+          py: "x2"
+        },
+        medium: {
+          p: "x1"
         }
-      }, isFocused || isClosest && {
-        background: !isSelected && theme.colors.lightBlue,
-        outline: "none"
-      });
+      }
+    }), function (_ref2) {
+      var isSelected = _ref2.isSelected,
+          theme = _ref2.theme,
+          isFocused = _ref2.isFocused,
+          isClosest = _ref2.isClosest;
+
+      if (isFocused || isClosest) {
+        return {
+          background: !isSelected && theme.colors.lightBlue,
+          outline: "none"
+        };
+      }
     });
 
     // @ts-nocheck
@@ -40933,7 +41164,6 @@
       };
     });
 
-    // @ts-nocheck
     var TimePickerInput = styled__default["default"](InputField).withConfig({
       displayName: "TimePickerInput",
       componentId: "sc-a6tg1z-0"
@@ -41073,7 +41303,8 @@
           value = _a.value,
           error = _a.error,
           disabled = _a.disabled,
-          props = __rest(_a, ["timeFormat", "interval", "className", "minTime", "maxTime", "defaultValue", "onInputChange", "onBlur", "onFocus", "errorMessage", "errorList", "labelText", "placeholder", "onClick", "onChange", "aria-label", "value", "error", "disabled"]);
+          size = _a.size,
+          props = __rest(_a, ["timeFormat", "interval", "className", "minTime", "maxTime", "defaultValue", "onInputChange", "onBlur", "onFocus", "errorMessage", "errorList", "labelText", "placeholder", "onClick", "onChange", "aria-label", "value", "error", "disabled", "size"]);
 
       var _useState = React.useState(defaultValue ? defaultValue : ""),
           input = _useState[0],
@@ -41099,6 +41330,7 @@
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
 
+      var componentSize = useComponentSize(size);
       var scrollToSelection = React.useCallback(debounce_1(function (currentOption, dropdown) {
         var currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);
 
@@ -41210,7 +41442,7 @@
         className: "nds-time-picker " + (className || ""),
         position: "relative",
         ref: onRefChange,
-        width: "130px",
+        width: componentSize === "large" ? "208px" : "130px",
         "data-testid": "select-container"
       }, props), /*#__PURE__*/React__default["default"].createElement(TimePickerInput, {
         labelText: labelText,
@@ -41226,13 +41458,14 @@
           return handleKeyDown(e);
         },
         "aria-label": ariaLabel || t("Select a time"),
-        inputWidth: "130px",
+        inputWidth: componentSize === "large" ? "208px" : "130px",
         iconSize: "20px",
         "data-testid": "select-input",
         type: "text",
         ref: inputRef,
         disabled: disabled,
-        autoComplete: "off"
+        autoComplete: "off",
+        size: componentSize
       }), /*#__PURE__*/React__default["default"].createElement(TimePickerDropdown, {
         isOpen: dropdownIsOpen,
         "aria-expanded": dropdownIsOpen,
@@ -41255,7 +41488,8 @@
             handleOptionSelection(option);
           },
           role: "option",
-          "data-testid": "select-option " + closestTestId + " " + selectedTestId
+          "data-testid": "select-option " + closestTestId + " " + selectedTestId,
+          size: componentSize
         }, option.label);
       })), /*#__PURE__*/React__default["default"].createElement(InlineValidation, {
         mt: "x1",
@@ -41341,7 +41575,8 @@
           locale = _a.locale,
           endTimeProps = _a.endTimeProps,
           startTimeProps = _a.startTimeProps,
-          props = __rest(_a, ["dateFormat", "onRangeChange", "onStartDateChange", "onEndDateChange", "errorMessage", "startDateErrorMessage", "endDateErrorMessage", "defaultStartDate", "defaultEndDate", "endDateInputProps", "startDateInputProps", "disableRangeValidation", "labelProps", "minDate", "maxDate", "showTimes", "minTime", "maxTime", "defaultStartTime", "defaultEndTime", "onStartTimeChange", "onEndTimeChange", "timeFormat", "interval", "disableFlipping", "locale", "endTimeProps", "startTimeProps"]);
+          size = _a.size,
+          props = __rest(_a, ["dateFormat", "onRangeChange", "onStartDateChange", "onEndDateChange", "errorMessage", "startDateErrorMessage", "endDateErrorMessage", "defaultStartDate", "defaultEndDate", "endDateInputProps", "startDateInputProps", "disableRangeValidation", "labelProps", "minDate", "maxDate", "showTimes", "minTime", "maxTime", "defaultStartTime", "defaultEndTime", "onStartTimeChange", "onEndTimeChange", "timeFormat", "interval", "disableFlipping", "locale", "endTimeProps", "startTimeProps", "size"]);
 
       var dateRef1 = React.useRef();
       var dateRef2 = React.useRef();
@@ -41368,6 +41603,10 @@
           rangeError = _useState5[0],
           setRangeError = _useState5[1];
 
+      var _useTranslation = useTranslation(),
+          t = _useTranslation.t;
+
+      var componentSize = useComponentSize(size);
       React.useImperativeHandle(ref, function () {
         return {
           dateRef1: Object.assign(Object.assign({}, dateRef1), {
@@ -41392,9 +41631,9 @@
           })
         };
       });
-
-      var _useTranslation = useTranslation(),
-          t = _useTranslation.t;
+      React.useEffect(function () {
+        validateDateRange();
+      }, [startDate, endDate, startTime, endTime]);
 
       var changeStartTimeHandler = function changeStartTimeHandler(label, value) {
         setStartTime(value);
@@ -41463,6 +41702,7 @@
         error: rangeError
       }, startDateInputProps);
       var startDateInput = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DatePicker, {
+        size: componentSize,
         dateFormat: dateFormat,
         selected: startDate,
         onChange: changeStartDateHandler,
@@ -41475,6 +41715,7 @@
         disableFlipping: disableFlipping,
         ref: dateRef1
       }), showTimes && /*#__PURE__*/React__default["default"].createElement(StartTime, Object.assign({
+        size: componentSize,
         selected: startTime,
         defaultValue: defaultStartTime,
         "aria-label": t("select a start time"),
@@ -41489,6 +41730,7 @@
         error: !!rangeError
       }, startTimeProps)));
       var endDateInput = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showTimes && /*#__PURE__*/React__default["default"].createElement(EndTime, Object.assign({
+        size: componentSize,
         selected: endTime,
         defaultValue: defaultEndTime,
         minTime: minTime,
@@ -41502,6 +41744,7 @@
         ref: timeRef2,
         error: !!rangeError
       }, endTimeProps)), /*#__PURE__*/React__default["default"].createElement(DatePicker, {
+        size: componentSize,
         dateFormat: dateFormat,
         selected: endDate,
         onChange: changeEndDateHandler,
@@ -41517,10 +41760,8 @@
         disableFlipping: disableFlipping,
         ref: dateRef2
       }));
-      React.useEffect(function () {
-        validateDateRange();
-      }, [startDate, endDate, startTime, endTime]);
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DateRangeStyles, null), /*#__PURE__*/React__default["default"].createElement(RangeContainer, Object.assign({
+        size: componentSize,
         labelProps: Object.assign(Object.assign({}, labelProps), {
           labelText: labelProps.labelText === DEFAULT_LABEL$1 ? t("date range") : labelProps.labelText
         }),
@@ -48193,6 +48434,17 @@
       };
     });
 
+    var buildBreakPoints = function buildBreakPoints(breakpointsConfig) {
+      return Object.assign(Object.assign({}, breakpointsConfig), {
+        // We need the map function as a polyfill because the `variant` function
+        // from `styled-system` expects the breakpoints
+        // to be an array and not an object
+        map: function map(fn) {
+          return Object.values(breakpointsConfig).map(fn);
+        }
+      });
+    };
+
     var AllNDSGlobalStyles = function AllNDSGlobalStyles(_ref) {
       var theme = _ref.theme,
           locale = _ref.locale,
@@ -48213,24 +48465,31 @@
           _ref2$disableGlobalSt = _ref2.disableGlobalStyles,
           disableGlobalStyles = _ref2$disableGlobalSt === void 0 ? false : _ref2$disableGlobalSt,
           _ref2$locale = _ref2.locale,
-          locale = _ref2$locale === void 0 ? "en_US" : _ref2$locale;
+          locale = _ref2$locale === void 0 ? "en_US" : _ref2$locale,
+          _ref2$size = _ref2.size,
+          size = _ref2$size === void 0 ? "medium" : _ref2$size;
       React.useEffect(function () {
         i18next.changeLanguage(locale);
       }, [locale]);
       var mergedTheme = mergeThemes(Theme, theme);
+      var themeWithBreakpoints = Object.assign(Object.assign({}, mergedTheme), {
+        breakpoints: buildBreakPoints(mergedTheme.breakpoints)
+      });
       return /*#__PURE__*/React__default["default"].createElement(LocaleContext.Provider, {
         value: {
           locale: locale
         }
+      }, /*#__PURE__*/React__default["default"].createElement(ComponentSizeContextProvider, {
+        size: size
       }, /*#__PURE__*/React__default["default"].createElement(AllNDSGlobalStyles, {
-        theme: mergedTheme,
+        theme: themeWithBreakpoints,
         locale: locale,
         disableGlobalStyles: disableGlobalStyles
       }, /*#__PURE__*/React__default["default"].createElement(I18nextProvider, {
         i18n: i18next
       }, /*#__PURE__*/React__default["default"].createElement(styled.ThemeProvider, {
-        theme: mergedTheme
-      }, children))));
+        theme: themeWithBreakpoints
+      }, children)))));
     };
 
     var Overlay = styled__default["default"](Flex).withConfig({
@@ -48574,16 +48833,18 @@
           checked = _a.checked,
           required = _a.required,
           error = _a.error,
-          props = __rest(_a, ["className", "labelText", "disabled", "checked", "required", "error"]);
+          size = _a.size,
+          props = __rest(_a, ["className", "labelText", "disabled", "checked", "required", "error", "size"]);
 
+      var componentSize = useComponentSize(size);
       var spaceProps = getSubset(props, propTypes.space);
       var restProps = omitSubset(props, propTypes.space);
       return /*#__PURE__*/React__default["default"].createElement(Box, Object.assign({
         position: "relative",
         className: className,
-        py: "half",
         px: "0"
       }, spaceProps), /*#__PURE__*/React__default["default"].createElement(ClickInputLabel, {
+        size: componentSize,
         disabled: disabled
       }, /*#__PURE__*/React__default["default"].createElement(RadioInput, Object.assign({
         type: "radio",
@@ -50012,10 +50273,12 @@
     };
 
     var Switcher = function Switcher(_a) {
-      var selected = _a.selected,
+      var size = _a.size,
+          selected = _a.selected,
           onChange = _a.onChange,
-          rest = __rest(_a, ["selected", "onChange"]);
+          rest = __rest(_a, ["size", "selected", "onChange"]);
 
+      var componentSize = useComponentSize(size);
       var optionRefs = [];
 
       var isSelected = function isSelected(value, index) {
@@ -50034,7 +50297,7 @@
       var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
         return React__default["default"].Children.map(rest.children, function (child, index) {
           return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            index: index,
+            size: componentSize,
             tabIndex: index === focusedIndex ? 0 : -1,
             selected: isSelected(child.props.value, index),
             "aria-selected": isSelected(child.props.value, index),
@@ -50045,9 +50308,9 @@
             onFocus: function onFocus(e) {
               e.stopPropagation();
             },
-            onClick: function onClick() {
+            onClick: function onClick(e) {
               setFocusedIndex(index);
-              if (onChange) onChange(child.props.value);
+              if (onChange) onChange(e.target.value);
             }
           });
         });
@@ -50056,7 +50319,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Box, Object.assign({
         display: "inline-flex",
         bg: "whiteGrey",
-        borderRadius: "20px"
+        borderRadius: "9999px"
       }, rest), /*#__PURE__*/React__default["default"].createElement(FocusManager, {
         refs: optionRefs,
         defaultFocusedIndex: getSelectedIndex()
@@ -50069,11 +50332,19 @@
     };
 
     Switcher.propTypes = {
-      children: PropTypes__default["default"].node,
+      children: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
       selected: PropTypes__default["default"].string,
       onChange: PropTypes__default["default"].func
     };
 
+    var Switch$1 = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+      var children = _a.children,
+          rest = __rest(_a, ["children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(SwitchButton, Object.assign({}, rest, {
+        ref: ref
+      }), children);
+    });
     var SwitchButton = styled__default["default"].button.withConfig({
       displayName: "Switch__SwitchButton",
       componentId: "sc-wsu5uq-0"
@@ -50081,18 +50352,18 @@
       var selected = _ref.selected,
           theme = _ref.theme;
       return Object.assign(Object.assign(Object.assign({
-        height: theme.space.x4,
-        padding: theme.space.half + " " + theme.space.x2,
+        margin: 1,
         background: selected ? theme.colors.white : "none",
         color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
         cursor: "pointer",
         border: "none",
-        borderRadius: 20,
+        borderRadius: 9999,
         fontSize: theme.fontSizes.medium,
         fontWeight: theme.fontWeights.medium,
         lineHeight: theme.lineHeights.base,
         textDecoration: "none",
-        whiteSpace: "nowrap"
+        whiteSpace: "nowrap",
+        padding: numberFromDimension(theme.space.x1) - 1 + "px " + theme.space.x2
       }, selected && {
         boxShadow: theme.shadows.small
       }), {
@@ -50105,21 +50376,24 @@
           backgroundColor: theme.colors.lightGrey
         }
       });
-    });
-    /* eslint-disable-next-line react/display-name */
-
-    var Switch$1 = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
-      var children = _a.children,
-          rest = __rest(_a, ["children"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(SwitchButton, Object.assign({}, rest, {
-        ref: ref
-      }), children);
+    }, function (_ref2) {
+      var theme = _ref2.theme;
+      return variant({
+        prop: "size",
+        variants: {
+          large: {
+            padding: numberFromDimension(theme.space.x2) - 1 + "px " + theme.space.x3
+          },
+          medium: {
+            padding: numberFromDimension(theme.space.x1) - 1 + "px " + theme.space.x2
+          }
+        }
+      });
     });
     Switch$1.propTypes = {
       children: PropTypes__default["default"].node,
       selected: PropTypes__default["default"].bool,
-      value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].array])
+      value: PropTypes__default["default"].string
     };
 
     var barStyles = function barStyles(theme) {
@@ -50156,11 +50430,11 @@
     var getBarHoverStyles = function getBarHoverStyles(selected, disabled, theme) {
       if (disabled || selected) {
         return null;
-      } else {
-        return Object.assign(Object.assign({}, barStyles(theme).expanded), {
-          backgroundColor: theme.colors.lightBlue
-        });
       }
+
+      return Object.assign(Object.assign({}, barStyles(theme).expanded), {
+        backgroundColor: theme.colors.lightBlue
+      });
     };
 
     var TabButton = styled__default["default"].button.withConfig({
@@ -50182,8 +50456,11 @@
         backgroundColor: "transparent",
         border: "none",
         margin: theme.space.none,
-        padding: theme.space.x1 + " " + theme.space.x3,
         position: "relative",
+        paddingTop: theme.space.x1,
+        paddingBottom: theme.space.x1,
+        paddingLeft: theme.space.x3,
+        paddingRight: theme.space.x3,
         "&:focus": {
           outline: "none",
           backgroundColor: theme.colors.lightBlue,
@@ -50198,7 +50475,19 @@
           "&:before": Object.assign({}, getBarHoverStyles(selected, disabled, theme))
         }
       };
-    });
+    }, variant({
+      prop: "size",
+      variants: {
+        large: {
+          py: "x2",
+          px: "x4"
+        },
+        medium: {
+          py: "x1",
+          px: "x3"
+        }
+      }
+    }));
     var Tab = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
       var label = _a.label,
           props = __rest(_a, ["label"]);
@@ -50566,7 +50855,9 @@
         var _this$props = this.props,
             fitted = _this$props.fitted,
             children = _this$props.children,
-            onTabClick = _this$props.onTabClick;
+            onTabClick = _this$props.onTabClick,
+            size = _this$props.size;
+        var componentSize = size !== null && size !== void 0 ? size : this.context.size;
         var selectedIndex = this.getSelectedIndex();
         var tabs = React__default["default"].Children.toArray(children);
         return tabs.filter(function (tab) {
@@ -50593,6 +50884,7 @@
             },
             onKeyDown: handleArrowNavigation,
             index: index,
+            size: componentSize,
             tabIndex: index === focusedIndex ? 0 : -1,
             selected: index === selectedIndex,
             "aria-selected": index === selectedIndex,
@@ -50673,6 +50965,7 @@
       return Tabs;
     }(React__default["default"].Component);
 
+    Tabs.contextType = ComponentSizeContext;
     Tabs.defaultProps = {
       children: null,
       className: undefined,
@@ -50721,12 +51014,12 @@
     })(space, function (_ref) {
       var theme = _ref.theme,
           isResizeable = _ref.isResizeable;
+          _ref.size;
       return {
         display: "block",
         width: "100%",
         border: "1px solid",
         borderRadius: theme.radii.medium,
-        padding: subPx(theme.space.x1),
         fontSize: theme.fontSizes.medium,
         lineHeight: theme.lineHeights.base,
         minHeight: theme.space.x5,
@@ -50740,8 +51033,22 @@
         },
         "::placeholder": {
           color: curriedTransparentize(0.4, theme.colors.black)
-        }
+        },
+        padding: "" + subPx(theme.space.x1)
       };
+    }, function (_ref2) {
+      var theme = _ref2.theme;
+      return variant({
+        prop: "size",
+        variants: {
+          large: {
+            padding: "" + subPx(theme.space.x2)
+          },
+          medium: {
+            padding: "" + subPx(theme.space.x1)
+          }
+        }
+      });
     }, function (props) {
       return getTextareaStyle(props);
     });
@@ -50760,8 +51067,10 @@
           rows = _a.rows,
           _a$isResizeable = _a.isResizeable,
           isResizeable = _a$isResizeable === void 0 ? true : _a$isResizeable,
-          props = __rest(_a, ["errorMessage", "errorList", "error", "required", "labelText", "requirementText", "helpText", "id", "className", "rows", "isResizeable"]);
+          size = _a.size,
+          props = __rest(_a, ["errorMessage", "errorList", "error", "required", "labelText", "requirementText", "helpText", "id", "className", "rows", "isResizeable", "size"]);
 
+      var componentSize = useComponentSize(size);
       var spaceProps = getSubset(props, propTypes.space);
       var restProps = omitSubset(props, propTypes.space);
       return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({
@@ -50780,7 +51089,8 @@
         errorList: errorList,
         error: error,
         rows: rows,
-        isResizeable: isResizeable
+        isResizeable: isResizeable,
+        size: componentSize
       }, restProps))), /*#__PURE__*/React__default["default"].createElement(InlineValidation, {
         mt: "x1",
         errorMessage: errorMessage,
@@ -50818,7 +51128,8 @@
           endAriaLabel = _a.endAriaLabel,
           endTimeProps = _a.endTimeProps,
           startTimeProps = _a.startTimeProps,
-          props = __rest(_a, ["timeFormat", "onRangeChange", "onStartTimeChange", "onEndTimeChange", "errorMessage", "defaultStartTime", "defaultEndTime", "disableRangeValidation", "labelProps", "minTime", "maxTime", "interval", "startAriaLabel", "endAriaLabel", "endTimeProps", "startTimeProps"]);
+          size = _a.size,
+          props = __rest(_a, ["timeFormat", "onRangeChange", "onStartTimeChange", "onEndTimeChange", "errorMessage", "defaultStartTime", "defaultEndTime", "disableRangeValidation", "labelProps", "minTime", "maxTime", "interval", "startAriaLabel", "endAriaLabel", "endTimeProps", "startTimeProps", "size"]);
 
       var _useState = React.useState(),
           startTime = _useState[0],
@@ -50834,23 +51145,34 @@
 
       var inputRef1 = React.useRef();
       var inputRef2 = React.useRef();
+
+      var _useTranslation = useTranslation(),
+          t = _useTranslation.t;
+
+      var componentSize = useComponentSize(size);
       React.useImperativeHandle(ref, function () {
         return {
           inputRef1: Object.assign(Object.assign({}, inputRef1), {
             focus: function focus() {
-              return inputRef1.current.focus();
+              if (inputRef1.current) {
+                // @ts-ignore
+                inputRef1.current.focus();
+              }
             }
           }),
           inputRef2: Object.assign(Object.assign({}, inputRef2), {
             focus: function focus() {
-              return inputRef2.current.focus();
+              if (inputRef2.current) {
+                // @ts-ignore
+                inputRef2.current.focus();
+              }
             }
           })
         };
       });
-
-      var _useTranslation = useTranslation(),
-          t = _useTranslation.t;
+      React.useEffect(function () {
+        validateTimeRange();
+      }, [startTime, endTime]);
 
       var changeStartTimeHandler = function changeStartTimeHandler(label, value) {
         setStartTime(value);
@@ -50903,7 +51225,8 @@
         "aria-label": startAriaLabel || t("select a start time"),
         "data-testid": "timerange-start-time",
         ref: inputRef1,
-        error: rangeError
+        error: rangeError,
+        size: componentSize
       }, startTimeProps));
       var endInput = /*#__PURE__*/React__default["default"].createElement(TimePicker, Object.assign({
         timeFormat: timeFormat,
@@ -50916,19 +51239,17 @@
         "aria-label": endAriaLabel || t("select an end time"),
         "data-testid": "timerange-end-time",
         ref: inputRef2,
-        error: rangeError
+        error: rangeError,
+        size: componentSize
       }, endTimeProps));
-      React.useEffect(function () {
-        validateTimeRange();
-      }, [startTime, endTime]);
       return /*#__PURE__*/React__default["default"].createElement(RangeContainer, Object.assign({
         labelProps: Object.assign(Object.assign({}, labelProps), {
           labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText
         }),
         startComponent: startInput,
-        selected: endTime,
         endComponent: endInput,
-        errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage]
+        errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage],
+        size: componentSize
       }, props));
     });
     TimeRange.defaultProps = {
@@ -51375,13 +51696,15 @@
           helpText = _a.helpText,
           toggled = _a.toggled,
           onClick = _a.onClick,
+          size = _a.size,
           dataTestId = _a["data-testid"],
-          props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "toggled", "onClick", "data-testid"]);
+          props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "toggled", "onClick", "size", "data-testid"]);
 
       var handleClick = function handleClick(e) {
         if (onClick) onClick(e);
       };
 
+      var componentSize = useComponentSize(size);
       var spaceProps = getSubset(props, propTypes.space);
       var restProps = omitSubset(props, propTypes.space);
       return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({
@@ -51394,6 +51717,7 @@
         requirementText: requirementText,
         helpText: helpText
       }, /*#__PURE__*/React__default["default"].createElement(ClickInputLabel, {
+        size: componentSize,
         as: "div",
         onClick: onClick,
         disabled: disabled,