@nulogy/components 8.13.1 → 8.14.0

package/dist/main.module.js

@@ -8685,6 +8685,317 @@ var InlineIcon = function InlineIcon(props) {
   }, props)));
 };
 
+var Flex = styled(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.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.createContext();
+function getDefaults() {
+  return defaultOptions;
+}
+var ReportNamespaces = function () {
+  function ReportNamespaces() {
+    _classCallCheck$1(this, ReportNamespaces);
+
+    this.usedNamespaces = {};
+  }
+
+  _createClass$1(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$1(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 = 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 = useState(getT),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      t = _useState2[0],
+      setT = _useState2[1];
+
+  var isMounted = useRef(true);
+  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 = useRef(true);
+  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 = useMemo(function () {
+    return {
+      i18n: i18n,
+      defaultNS: defaultNS
+    };
+  }, [i18n, defaultNS]);
+  return createElement(I18nContext.Provider, {
+    value: value
+  }, children);
+}
+
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -9717,12 +10028,26 @@ var themeGet = function themeGet(path, fallback) {
   };
 };
 
-var textOverflow = system({
-  whiteSpace: true,
-  textOverflow: true
-});
+var ComponentSizeContext = /*#__PURE__*/createContext(undefined);
+function useComponentSize(selectedSize) {
+  var context = 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.createElement(ComponentSizeContext.Provider, {
+    value: {
+      size: size
+    }
+  }, children);
+};
 
 var resetButtonStyles = {
   background: "none",
@@ -9741,11 +10066,11 @@ var getHoverColor = function getHoverColor(props) {
   return props.hover ? getColor(props) : curriedDarken("0.1", getColor(props));
 };
 
-var Link = styled.a.withConfig({
+var StyledLink = styled.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,
@@ -9762,314 +10087,29 @@ var Link = styled.a.withConfig({
       color: getHoverColor(props)
     }
   });
-}, addStyledProps);
-Link.defaultProps = {
-  underline: true
-};
-
-var Flex = styled(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.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.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.createElement(StyledLink, Object.assign({
+    size: componentSize,
+    ref: ref
+  }, props));
+});
+Link.defaultProps = {
+  underline: true
 };
-var i18nInstance;
-var I18nContext = React__default.createContext();
-function getDefaults() {
-  return defaultOptions;
-}
-var ReportNamespaces = function () {
-  function ReportNamespaces() {
-    _classCallCheck$1(this, ReportNamespaces);
-
-    this.usedNamespaces = {};
-  }
-
-  _createClass$1(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$1(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 = 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 = useState(getT),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      t = _useState2[0],
-      setT = _useState2[1];
-
-  var isMounted = useRef(true);
-  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 = useRef(true);
-  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 = useMemo(function () {
-    return {
-      i18n: i18n,
-      defaultNS: defaultNS
-    };
-  }, [i18n, defaultNS]);
-  return createElement(I18nContext.Provider, {
-    value: value
-  }, children);
-}
 
 var CloseButton$1 = function CloseButton(_ref) {
   var onClick = _ref.onClick,
@@ -10096,12 +10136,12 @@ var CloseButton$1 = function CloseButton(_ref) {
 };
 
 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 = {
@@ -17272,6 +17312,9 @@ function getMenuBorderRadius(_ref4) {
     style: "none"
   };
 }
+function stylesForSize(config, size) {
+  return config[size];
+}
 var showIndicatorSeparator = function showIndicatorSeparator(_ref5) {
   var isMulti = _ref5.isMulti,
       hasValue = _ref5.hasValue,
@@ -17284,6 +17327,7 @@ var customStyles = function customStyles(_ref6) {
       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 {
@@ -17372,16 +17416,23 @@ var customStyles = function customStyles(_ref6) {
     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), {
@@ -17457,21 +17508,32 @@ var customStyles = function customStyles(_ref6) {
       });
     },
     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,
@@ -17482,7 +17544,13 @@ var customStyles = function customStyles(_ref6) {
             fill: theme.colors.white
           }
         }
-      });
+      }), stylesForSize({
+        large: {
+          padding: theme.space.x1
+        },
+        medium: {// Nothing
+        }
+      }, size));
     },
     noOptionsMessage: function noOptionsMessage(provided) {
       return Object.assign(Object.assign({}, provided), {
@@ -17521,9 +17589,24 @@ var ClickInputLabel = styled.label.withConfig({
     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;
@@ -18360,6 +18443,7 @@ var StyledOption = styled.div.withConfig({
       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,
@@ -18372,6 +18456,21 @@ var StyledOption = styled.div.withConfig({
       }
     }
   };
+}, 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.createElement(StyledOption, Object.assign({}, props, {
@@ -18480,7 +18579,8 @@ var SelectDefaultProps = {
   closeMenuOnSelect: true
 };
 var ReactSelect = /*#__PURE__*/React__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,
@@ -18503,7 +18603,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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;
@@ -18512,6 +18612,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var spaceProps = getSubset(props, propTypes.space);
   var reactSelectRef = React__default.useRef(null);
   var optionsRef = React__default.useRef(options);
+  var componentSize = useComponentSize(size);
   React__default.useEffect(function () {
     checkOptionsAreValid(options);
     optionsRef.current = options;
@@ -18531,6 +18632,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     requirementText: requirementText,
     helpText: helpText
   }, /*#__PURE__*/React__default.createElement(WindowedSelect, Object.assign({
+    size: componentSize,
     ref: reactSelectRef,
     placeholder: placeholder || t("select ..."),
     windowThreshold: windowThreshold,
@@ -18538,6 +18640,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       theme: themeContext,
       error: error,
       maxHeight: maxHeight,
+      size: componentSize,
       windowed: options.length > windowThreshold
     }),
     isDisabled: disabled,
@@ -19098,7 +19201,7 @@ function getBordersSize(styles, axis) {
   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);
 }
 
@@ -19108,8 +19211,8 @@ function getWindowSizes(document) {
   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)
   };
 }
 
@@ -21940,36 +22043,6 @@ NavBarDropdownMenu$1.defaultProps = {
   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.button.withConfig({
   displayName: "Button__WrapperButton",
   componentId: "sc-hxfi59-0"
@@ -22013,12 +22086,30 @@ var WrapperButton$2 = styled.button.withConfig({
     },
     "&: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.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -22027,18 +22118,18 @@ var Button = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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 = useTheme(),
       smallTextCompressed = _useTheme.lineHeights.smallTextCompressed;
 
+  var componentSize = useComponentSize(size);
   return /*#__PURE__*/React__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.createElement(Icon, {
     size: smallTextCompressed + "em",
     mr: "half",
@@ -24306,7 +24397,6 @@ var WrapperButton$1 = styled.button.withConfig({
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
-    padding: theme.space.half + " " + theme.space.none,
     cursor: disabled ? "default" : "pointer"
   }, _ref4["" + Text] = {
     display: "block",
@@ -24333,8 +24423,20 @@ var WrapperButton$1 = styled.button.withConfig({
     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.forwardRef(function (_a, forwardedRef) {
   var children = _a.children,
       _a$color = _a.color,
@@ -24344,24 +24446,27 @@ var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwarde
       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.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.createElement(Manager$1, null, /*#__PURE__*/React__default.createElement(Reference$1, null, function (_ref5) {
     var ref = _ref5.ref;
     return /*#__PURE__*/React__default.createElement(IconWrapper, {
       ref: ref,
-      size: iconSize || "x3"
+      size: iconSize
     }, /*#__PURE__*/React__default.createElement(Icon, {
-      size: size,
+      size: iconSize,
       icon: icon,
       color: color
     }));
@@ -24744,6 +24849,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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,
@@ -24762,7 +24868,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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);
@@ -24771,6 +24877,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       boundariesElement: boundariesElement
     });
   }, [boundariesElement]);
+  var componentSize = useComponentSize(size);
   return /*#__PURE__*/React__default.createElement(Popper$1, {
     trigger: /*#__PURE__*/React__default.cloneElement(trigger(), Object.assign({
       type: "button",
@@ -24795,7 +24902,11 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     id: id,
     backgroundColor: backgroundColor,
     showArrow: showArrow
-  }, restProps), children));
+  }, restProps), React__default.Children.map(children, function (child) {
+    return /*#__PURE__*/React__default.cloneElement(child, Object.assign({
+      size: componentSize
+    }, child.props), child.props.children);
+  })));
 });
 
 var DropdownButton = styled.button.withConfig({
@@ -24818,8 +24929,11 @@ var DropdownButton = styled.button.withConfig({
     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]
@@ -24834,7 +24948,23 @@ var DropdownButton = styled.button.withConfig({
       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",
@@ -24864,7 +24994,6 @@ var DropdownLink = styled.a.withConfig({
     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]
@@ -24881,9 +25010,29 @@ var DropdownLink = styled.a.withConfig({
     },
     "&: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",
@@ -25850,89 +25999,6 @@ Suffix.defaultProps = {
   suffixWidth: null
 };
 
-var StyledInputIcon = styled(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.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__*/forwardRef(function (_a, ref) {
   var icon = _a.icon,
       error = _a.error,
@@ -25948,8 +26014,11 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
       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.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
@@ -25971,16 +26040,116 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
     required: required,
     error: error,
     ref: ref,
+    size: htmlSize,
+    scale: componentSize,
     inputWidth: inputWidth
   }, props)), icon && /*#__PURE__*/React__default.createElement(StyledInputIcon, {
     icon: icon,
-    size: iconSize || "x2"
+    size: iconSize || "x2",
+    scale: componentSize
   })), /*#__PURE__*/React__default.createElement(Suffix, {
     suffix: suffix,
     suffixWidth: suffixWidth,
     textAlign: suffixAlignment
   })));
 });
+var StyledInput = styled.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(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__*/forwardRef(function (_a, ref) {
   var errorMessage = _a.errorMessage,
@@ -26183,10 +26352,12 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
     target: menuItem.openInNew ? "_blank" : undefined
   };
   var topLevel = layer === 0;
-  var MenuLink = topLevel ? TopLevelLink : DropdownLink;
   return /*#__PURE__*/React__default.createElement("li", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+  }, topLevel ? /*#__PURE__*/React__default.createElement(TopLevelLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: topLevel ? "x3" : "x2",
+    icon: "openInNew"
+  })) : /*#__PURE__*/React__default.createElement(DropdownLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
     size: topLevel ? "x3" : "x2",
     icon: "openInNew"
   })));
@@ -26614,33 +26785,73 @@ var BreadcrumbsList = styled.ol.withConfig({
   };
 });
 
-var BreadcrumbsListItem = styled.li.withConfig({
-  displayName: "BreadcrumbsListItem",
+var BreadcrumbsListSeparator = styled.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.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.createElement(BreadcrumbsListItem, {
+    return acc.concat(current, /*#__PURE__*/React__default.createElement(BreadcrumbsListSeparator, {
       "aria-hidden": true,
       key: "separator-" + index,
-      className: className
+      className: "separator"
     }, /*#__PURE__*/React__default.createElement(Icon, {
       icon: "rightArrow"
     })));
@@ -26648,22 +26859,19 @@ var insertSeparators = function insertSeparators(items, className) {
 };
 
 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.Children.map(children, function (child, index) {
     if (! /*#__PURE__*/isValidElement(child)) return null;
     return /*#__PURE__*/React__default.createElement(BreadcrumbsListItem, {
+      size: componentSize,
       key: "child-" + index
-    }, /*#__PURE__*/React__default.cloneElement(child, {
-      // @ts-ignore
-      color: "darkBlue"
-    }));
+    }, child);
   }).filter(Boolean);
-  return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
-    as: as
-  }, props), /*#__PURE__*/React__default.createElement(BreadcrumbsList, null, insertSeparators(allItems, "seperator")));
+  return /*#__PURE__*/React__default.createElement(Flex, Object.assign({}, props), /*#__PURE__*/React__default.createElement(BreadcrumbsList, null, insertSeparators(allItems)));
 };
 
 Breadcrumbs.defaultProps = {
@@ -26862,20 +27070,22 @@ var CheckboxInput = styled.input.withConfig({
   }), _ref2["&:not(:checked) + " + VisualCheckbox] = Object.assign({}, getCheckboxStyle(props, "unchecked")), _ref2;
 });
 var Checkbox = /*#__PURE__*/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.createElement(Box, Object.assign({
     className: className,
-    py: "half",
     px: "0"
   }, spaceProps), /*#__PURE__*/React__default.createElement(ClickInputLabel, {
+    size: componentSize,
     disabled: disabled
   }, /*#__PURE__*/React__default.createElement(CheckboxInput, Object.assign({
     type: "checkbox",
@@ -40389,6 +40599,7 @@ var DatePickerInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onUpKeyPress = _ref.onUpKeyPress,
       onDownKeyPress = _ref.onDownKeyPress,
       onEnterKeyPress = _ref.onEnterKeyPress,
+      size = _ref.size,
       ariaLabel = _ref["aria-label"];
 
   var handleChange = function handleChange(e) {
@@ -40416,6 +40627,7 @@ var DatePickerInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     ref: ref,
+    size: size,
     "aria-label": ariaLabel || t("select a date"),
     autoComplete: "off"
   }, inputProps, {
@@ -40538,6 +40750,7 @@ var DEFAULT_PLACEHOLDER$1 = "YYYY-Mon-DD";
 var DatePicker = /*#__PURE__*/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,
@@ -40551,7 +40764,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_a, datePickerRef) {
       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 = useState(selected),
       selectedDate = _useState[0],
@@ -40561,6 +40774,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_a, datePickerRef) {
       ref = _useState2[0],
       setRef = _useState2[1];
 
+  var componentSize = useComponentSize(size);
   useEffect(function () {
     registerDatePickerLocales();
   });
@@ -40624,12 +40838,13 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_a, datePickerRef) {
   };
 
   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.createElement(DatePickerInput, {
+    size: componentSize,
     inputProps: customInputProps,
     dateFormat: dateFormat,
     onInputChange: handleInputChange,
@@ -40686,7 +40901,8 @@ var RangeContainer = function RangeContainer(_a) {
       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);
@@ -40699,10 +40915,9 @@ var RangeContainer = function RangeContainer(_a) {
   }, /*#__PURE__*/React__default.createElement(Flex, null, startComponent), /*#__PURE__*/React__default.createElement(Flex, {
     px: "half",
     alignItems: "flex-end",
-    alignSelf: "flex-end",
-    height: "100%"
+    alignSelf: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Text, {
-    lineHeight: "38px"
+    lineHeight: size === "large" ? "56px" : "38px"
   }, "-")), /*#__PURE__*/React__default.createElement(Flex, null, endComponent)), errorMessages.map(function (errorMessage, i) {
     return (
       /*#__PURE__*/
@@ -40859,27 +41074,44 @@ debounce.debounce = debounce;
 var debounce_1 = debounce;
 debounce_1.debounce;
 
-// @ts-nocheck
 var TimePickerOption = styled.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
@@ -40909,7 +41141,6 @@ var TimePickerDropdown = styled.ul.withConfig({
   };
 });
 
-// @ts-nocheck
 var TimePickerInput = styled(InputField).withConfig({
   displayName: "TimePickerInput",
   componentId: "sc-a6tg1z-0"
@@ -41049,7 +41280,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       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 = useState(defaultValue ? defaultValue : ""),
       input = _useState[0],
@@ -41075,6 +41307,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, inputRef) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var componentSize = useComponentSize(size);
   var scrollToSelection = useCallback(debounce_1(function (currentOption, dropdown) {
     var currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);
 
@@ -41186,7 +41419,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, inputRef) {
     className: "nds-time-picker " + (className || ""),
     position: "relative",
     ref: onRefChange,
-    width: "130px",
+    width: componentSize === "large" ? "208px" : "130px",
     "data-testid": "select-container"
   }, props), /*#__PURE__*/React__default.createElement(TimePickerInput, {
     labelText: labelText,
@@ -41202,13 +41435,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       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.createElement(TimePickerDropdown, {
     isOpen: dropdownIsOpen,
     "aria-expanded": dropdownIsOpen,
@@ -41231,7 +41465,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, inputRef) {
         handleOptionSelection(option);
       },
       role: "option",
-      "data-testid": "select-option " + closestTestId + " " + selectedTestId
+      "data-testid": "select-option " + closestTestId + " " + selectedTestId,
+      size: componentSize
     }, option.label);
   })), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
@@ -41317,7 +41552,8 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
       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 = useRef();
   var dateRef2 = useRef();
@@ -41344,6 +41580,10 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
       rangeError = _useState5[0],
       setRangeError = _useState5[1];
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var componentSize = useComponentSize(size);
   useImperativeHandle(ref, function () {
     return {
       dateRef1: Object.assign(Object.assign({}, dateRef1), {
@@ -41368,9 +41608,9 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
       })
     };
   });
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
+  useEffect(function () {
+    validateDateRange();
+  }, [startDate, endDate, startTime, endTime]);
 
   var changeStartTimeHandler = function changeStartTimeHandler(label, value) {
     setStartTime(value);
@@ -41439,6 +41679,7 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     error: rangeError
   }, startDateInputProps);
   var startDateInput = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatePicker, {
+    size: componentSize,
     dateFormat: dateFormat,
     selected: startDate,
     onChange: changeStartDateHandler,
@@ -41451,6 +41692,7 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     disableFlipping: disableFlipping,
     ref: dateRef1
   }), showTimes && /*#__PURE__*/React__default.createElement(StartTime, Object.assign({
+    size: componentSize,
     selected: startTime,
     defaultValue: defaultStartTime,
     "aria-label": t("select a start time"),
@@ -41465,6 +41707,7 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     error: !!rangeError
   }, startTimeProps)));
   var endDateInput = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showTimes && /*#__PURE__*/React__default.createElement(EndTime, Object.assign({
+    size: componentSize,
     selected: endTime,
     defaultValue: defaultEndTime,
     minTime: minTime,
@@ -41478,6 +41721,7 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: timeRef2,
     error: !!rangeError
   }, endTimeProps)), /*#__PURE__*/React__default.createElement(DatePicker, {
+    size: componentSize,
     dateFormat: dateFormat,
     selected: endDate,
     onChange: changeEndDateHandler,
@@ -41493,10 +41737,8 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     disableFlipping: disableFlipping,
     ref: dateRef2
   }));
-  useEffect(function () {
-    validateDateRange();
-  }, [startDate, endDate, startTime, endTime]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DateRangeStyles, null), /*#__PURE__*/React__default.createElement(RangeContainer, Object.assign({
+    size: componentSize,
     labelProps: Object.assign(Object.assign({}, labelProps), {
       labelText: labelProps.labelText === DEFAULT_LABEL$1 ? t("date range") : labelProps.labelText
     }),
@@ -48169,6 +48411,17 @@ var Reset = createGlobalStyle(function () {
   };
 });
 
+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,
@@ -48189,24 +48442,31 @@ var NDSProvider = function NDSProvider(_ref2) {
       _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;
   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.createElement(LocaleContext.Provider, {
     value: {
       locale: locale
     }
+  }, /*#__PURE__*/React__default.createElement(ComponentSizeContextProvider, {
+    size: size
   }, /*#__PURE__*/React__default.createElement(AllNDSGlobalStyles, {
-    theme: mergedTheme,
+    theme: themeWithBreakpoints,
     locale: locale,
     disableGlobalStyles: disableGlobalStyles
   }, /*#__PURE__*/React__default.createElement(I18nextProvider, {
     i18n: i18next
   }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: mergedTheme
-  }, children))));
+    theme: themeWithBreakpoints
+  }, children)))));
 };
 
 var Overlay = styled(Flex).withConfig({
@@ -48550,16 +48810,18 @@ var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
       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.createElement(Box, Object.assign({
     position: "relative",
     className: className,
-    py: "half",
     px: "0"
   }, spaceProps), /*#__PURE__*/React__default.createElement(ClickInputLabel, {
+    size: componentSize,
     disabled: disabled
   }, /*#__PURE__*/React__default.createElement(RadioInput, Object.assign({
     type: "radio",
@@ -49988,10 +50250,12 @@ var FocusManager = function FocusManager(_ref) {
 };
 
 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) {
@@ -50010,7 +50274,7 @@ var Switcher = function Switcher(_a) {
   var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
     return React__default.Children.map(rest.children, function (child, index) {
       return /*#__PURE__*/React__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),
@@ -50021,9 +50285,9 @@ var Switcher = function Switcher(_a) {
         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);
         }
       });
     });
@@ -50032,7 +50296,7 @@ var Switcher = function Switcher(_a) {
   return /*#__PURE__*/React__default.createElement(Box, Object.assign({
     display: "inline-flex",
     bg: "whiteGrey",
-    borderRadius: "20px"
+    borderRadius: "9999px"
   }, rest), /*#__PURE__*/React__default.createElement(FocusManager, {
     refs: optionRefs,
     defaultFocusedIndex: getSelectedIndex()
@@ -50045,11 +50309,19 @@ var Switcher = function Switcher(_a) {
 };
 
 Switcher.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.arrayOf(PropTypes.element),
   selected: PropTypes.string,
   onChange: PropTypes.func
 };
 
+var Switch$1 = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(SwitchButton, Object.assign({}, rest, {
+    ref: ref
+  }), children);
+});
 var SwitchButton = styled.button.withConfig({
   displayName: "Switch__SwitchButton",
   componentId: "sc-wsu5uq-0"
@@ -50057,18 +50329,18 @@ var SwitchButton = styled.button.withConfig({
   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
   }), {
@@ -50081,21 +50353,24 @@ var SwitchButton = styled.button.withConfig({
       backgroundColor: theme.colors.lightGrey
     }
   });
-});
-/* eslint-disable-next-line react/display-name */
-
-var Switch$1 = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
-  var children = _a.children,
-      rest = __rest(_a, ["children"]);
-
-  return /*#__PURE__*/React__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.node,
   selected: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array])
+  value: PropTypes.string
 };
 
 var barStyles = function barStyles(theme) {
@@ -50132,11 +50407,11 @@ var getBarStyles = function getBarStyles(selected, theme) {
 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.button.withConfig({
@@ -50158,8 +50433,11 @@ var TabButton = styled.button.withConfig({
     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,
@@ -50174,7 +50452,19 @@ var TabButton = styled.button.withConfig({
       "&: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.forwardRef(function (_a, ref) {
   var label = _a.label,
       props = __rest(_a, ["label"]);
@@ -50542,7 +50832,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     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.Children.toArray(children);
     return tabs.filter(function (tab) {
@@ -50569,6 +50861,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         },
         onKeyDown: handleArrowNavigation,
         index: index,
+        size: componentSize,
         tabIndex: index === focusedIndex ? 0 : -1,
         selected: index === selectedIndex,
         "aria-selected": index === selectedIndex,
@@ -50649,6 +50942,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   return Tabs;
 }(React__default.Component);
 
+Tabs.contextType = ComponentSizeContext;
 Tabs.defaultProps = {
   children: null,
   className: undefined,
@@ -50697,12 +50991,12 @@ var StyledTextarea = styled.textarea.withConfig({
 })(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,
@@ -50716,8 +51010,22 @@ var StyledTextarea = styled.textarea.withConfig({
     },
     "::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);
 });
@@ -50736,8 +51044,10 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
       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.createElement(Field, Object.assign({
@@ -50756,7 +51066,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
     errorList: errorList,
     error: error,
     rows: rows,
-    isResizeable: isResizeable
+    isResizeable: isResizeable,
+    size: componentSize
   }, restProps))), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
     errorMessage: errorMessage,
@@ -50794,7 +51105,8 @@ var TimeRange = /*#__PURE__*/forwardRef(function (_a, ref) {
       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 = useState(),
       startTime = _useState[0],
@@ -50810,23 +51122,34 @@ var TimeRange = /*#__PURE__*/forwardRef(function (_a, ref) {
 
   var inputRef1 = useRef();
   var inputRef2 = useRef();
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var componentSize = useComponentSize(size);
   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;
+  useEffect(function () {
+    validateTimeRange();
+  }, [startTime, endTime]);
 
   var changeStartTimeHandler = function changeStartTimeHandler(label, value) {
     setStartTime(value);
@@ -50879,7 +51202,8 @@ var TimeRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     "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.createElement(TimePicker, Object.assign({
     timeFormat: timeFormat,
@@ -50892,19 +51216,17 @@ var TimeRange = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-label": endAriaLabel || t("select an end time"),
     "data-testid": "timerange-end-time",
     ref: inputRef2,
-    error: rangeError
+    error: rangeError,
+    size: componentSize
   }, endTimeProps));
-  useEffect(function () {
-    validateTimeRange();
-  }, [startTime, endTime]);
   return /*#__PURE__*/React__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 = {
@@ -51351,13 +51673,15 @@ var BaseToggle = function BaseToggle(_a) {
       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.createElement(Field, Object.assign({
@@ -51370,6 +51694,7 @@ var BaseToggle = function BaseToggle(_a) {
     requirementText: requirementText,
     helpText: helpText
   }, /*#__PURE__*/React__default.createElement(ClickInputLabel, {
+    size: componentSize,
     as: "div",
     onClick: onClick,
     disabled: disabled,