@govuk-react/lib - npm Package Compare versions

Comparing version 0.10.5 to 0.10.6

dist/declarations/src/index.d.ts

@@ -1,7 +0,7 @@
-import visuallyHidden from './visually-hidden';
-import * as spacing from './spacing';
-import * as link from './link';
-import * as shape from './shape';
-import * as typography from './typography';
-export type { WithWhiteSpaceProps, WithWidthProps } from './spacing';
+import visuallyHidden from "./visually-hidden/index.js";
+import * as spacing from "./spacing/index.js";
+import * as link from "./link/index.js";
+import * as shape from "./shape/index.js";
+import * as typography from "./typography/index.js";
+export type { WithWhiteSpaceProps, WithWidthProps, ComponentSizeVariant } from "./spacing/index.js";
 export { visuallyHidden, spacing, link, shape, typography };

dist/declarations/src/spacing/index.d.ts

@@ -21,3 +21,3 @@ import type { CSSObject } from 'styled-components';
 }): CSSObject;
-declare type Margin = number | {
+type Margin = number | {
     direction?: string | string[];
@@ -27,3 +27,3 @@ size: number;
 };
-declare type Padding = number | {
+type Padding = number | {
     size: number;
@@ -50,3 +50,3 @@ direction?: string | string[];
 };
-export declare type WithWhiteSpaceProps = {
+export type WithWhiteSpaceProps = {
     margin?: Margin | Margin[];
@@ -56,5 +56,11 @@ padding?: Padding | Padding[];
 };
-export declare type WithWidthProps = {
+export type WithWidthProps = {
     setWidth?: string | number;
 };
+export declare enum ComponentSizeVariant {
+    XLARGE = "XLARGE",
+    LARGE = "LARGE",
+    MEDIUM = "MEDIUM",
+    SMALL = "SMALL"
+}
 export {};

dist/declarations/src/visually-hidden/index.d.ts

@@ -10,3 +10,3 @@ declare function visuallyHidden({ important: isImportant, focusable: isFocusable }?: {
 declare namespace visuallyHidden {
-    var focusable: typeof import(".").focusable;
+    var focusable: typeof import("./index.js").focusable;
 }
@@ -13,0 +13,0 @@ declare function focusable({ important }?: {

dist/govuk-react-lib.cjs.d.ts

 export * from "./declarations/src/index";
+//# sourceMappingURL=govuk-react-lib.cjs.d.ts.map

dist/govuk-react-lib.cjs.dev.js

@@ -8,199 +8,89 @@ 'use strict';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(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 _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 // This lib is effectively a port of govuk-frontend's visually-hidden sass helpers
 // Tracking:
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_visually-hidden.scss
+
 function visuallyHidden() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$important = _ref.important,
-      isImportant = _ref$important === void 0 ? true : _ref$important,
-      _ref$focusable = _ref.focusable,
-      isFocusable = _ref$focusable === void 0 ? false : _ref$focusable;
-
-  var important = isImportant ? ' !important' : '';
-  return _objectSpread2({
-    position: "absolute".concat(important),
-    width: "1px".concat(important),
-    height: "1px".concat(important),
-    margin: "0".concat(important),
-    overflow: "hidden".concat(important),
-    clip: "rect(0 0 0 0)".concat(important),
-    clipPath: "inset(50%)".concat(important),
-    border: "0".concat(important),
-    whiteSpace: "nowrap".concat(important)
-  }, isFocusable ? {
-    '&:active,&:focus': {
-      position: "static".concat(important),
-      width: "auto".concat(important),
-      height: "auto".concat(important),
-      margin: "inherit".concat(important),
-      overflow: "visible".concat(important),
-      clip: "auto".concat(important),
-      clipPath: "none".concat(important),
-      whiteSpace: "inherit".concat(important)
-    }
-  } : {
-    padding: "0".concat(important)
-  });
+  let {
+    important: isImportant = true,
+    focusable: isFocusable = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const important = isImportant ? ' !important' : '';
+  return {
+    position: `absolute${important}`,
+    width: `1px${important}`,
+    height: `1px${important}`,
+    margin: `0${important}`,
+    overflow: `hidden${important}`,
+    clip: `rect(0 0 0 0)${important}`,
+    clipPath: `inset(50%)${important}`,
+    border: `0${important}`,
+    whiteSpace: `nowrap${important}`,
+    ...(isFocusable ? {
+      '&:active,&:focus': {
+        position: `static${important}`,
+        width: `auto${important}`,
+        height: `auto${important}`,
+        margin: `inherit${important}`,
+        overflow: `visible${important}`,
+        clip: `auto${important}`,
+        clipPath: `none${important}`,
+        whiteSpace: `inherit${important}`
+      }
+    } : {
+      padding: `0${important}`
+    })
+  };
 }
-
 function focusable() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$important = _ref2.important,
-      important = _ref2$important === void 0 ? true : _ref2$important;
-
+  let {
+    important = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return visuallyHidden({
-    important: important,
+    important,
     focusable: true
   });
 }
-
 visuallyHidden.focusable = focusable;
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
+// This lib is effectively a port of govuk-frontend's spacing sass helpers
 function simple(size) {
-  var scale = constants.SPACING_POINTS[Math.abs(size)];
-  var polarity = size < 0 ? -1 : 1;
-
+  const scale = constants.SPACING_POINTS[Math.abs(size)];
+  const polarity = size < 0 ? -1 : 1;
   if (scale === undefined) {
-    throw Error("Unknown spacing size ".concat(size, " - expected a point from the spacing scale."));
+    throw Error(`Unknown spacing size ${size} - expected a point from the spacing scale.`);
   }
-
   return scale * polarity;
 }
-
 function styleForDirection(size, property) {
-  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   // NB styled-components automatically sets style to include `px` if needed
-  return _defineProperty({}, direction && direction !== 'all' ? "".concat(property, "-").concat(direction) : property, size);
+  return {
+    [direction && direction !== 'all' ? `${property}-${direction}` : property]: size
+  };
 }
-
-function responsive$1(_ref2) {
-  var size = _ref2.size,
-      property = _ref2.property,
-      _ref2$direction = _ref2.direction,
-      direction = _ref2$direction === void 0 ? null : _ref2$direction,
-      _ref2$adjustment = _ref2.adjustment,
-      adjustment = _ref2$adjustment === void 0 ? 0 : _ref2$adjustment;
-  var scale = constants.SPACING_MAP[Math.abs(Number(size))];
-  var polarity = size < 0 ? -1 : 1;
-
+function responsive$1(_ref) {
+  let {
+    size,
+    property,
+    direction = null,
+    adjustment = 0
+  } = _ref;
+  const scale = constants.SPACING_MAP[Math.abs(Number(size))];
+  const polarity = Number(size) < 0 ? -1 : 1;
   if (scale === undefined) {
-    throw Error("Unknown responsive spacing size ".concat(size, " - expected a point from the responsive spacing scale."));
+    throw Error(`Unknown responsive spacing size ${size} - expected a point from the responsive spacing scale.`);
   }
-
   if (!property) {
     throw Error('No property passed to responsiveSpacing');
   }
-
   if (Array.isArray(direction)) {
-    return Object.assign.apply(Object, [{}].concat(_toConsumableArray(direction.map(function (dir) {
-      return styleForDirection(scale.mobile * polarity + adjustment, property, dir);
-    })), [_defineProperty({}, constants.MEDIA_QUERIES.TABLET, Object.assign.apply(Object, [{}].concat(_toConsumableArray(direction.map(function (dir) {
-      return styleForDirection(scale.tablet * polarity + adjustment, property, dir);
-    })))))]));
+    return Object.assign({}, ...direction.map(dir => styleForDirection(scale.mobile * polarity + adjustment, property, dir)), {
+      [constants.MEDIA_QUERIES.TABLET]: Object.assign({}, ...direction.map(dir => styleForDirection(scale.tablet * polarity + adjustment, property, dir)))
+    });
   }
-
-  var f = _objectSpread2(_objectSpread2({}, styleForDirection(scale.mobile * polarity + adjustment, property, direction)), {}, _defineProperty({}, constants.MEDIA_QUERIES.TABLET, styleForDirection(scale.tablet * polarity + adjustment, property, direction)));
-
+  const f = {
+    ...styleForDirection(scale.mobile * polarity + adjustment, property, direction),
+    [constants.MEDIA_QUERIES.TABLET]: styleForDirection(scale.tablet * polarity + adjustment, property, direction)
+  };
   return f;
@@ -215,15 +105,15 @@ }
   }
-
-  if (_typeof(value) !== 'object') {
+  if (typeof value !== 'object') {
     throw Error('Expected padding value to be an object or integer');
   }
-
-  var size = value.size,
-      direction = value.direction,
-      adjustment = value.adjustment;
+  const {
+    size,
+    direction,
+    adjustment
+  } = value;
   return responsive$1({
-    size: size,
+    size,
     property: 'margin',
-    direction: direction,
-    adjustment: adjustment
+    direction,
+    adjustment
   });
@@ -238,20 +128,24 @@ }
   }
-
-  if (_typeof(value) !== 'object') {
+  if (typeof value !== 'object') {
     throw Error('Expected padding value to be an object or integer');
   }
-
-  var size = value.size,
-      direction = value.direction,
-      adjustment = value.adjustment;
+  const {
+    size,
+    direction,
+    adjustment
+  } = value;
   return responsive$1({
-    size: size,
+    size,
     property: 'padding',
-    direction: direction,
-    adjustment: adjustment
+    direction,
+    adjustment
   });
-} // withWhiteSpace lib styling function
+}
+
+// withWhiteSpace lib styling function
 // does not form part of govuk-frontend
+
 // `withWhiteSpace(config)`
 // generates a styling function, based on config, which can be used when styling a component
+
 // `margin` and `padding` are supported as props and config values
@@ -262,21 +156,14 @@ // can be a single number, to indicate scale size to use in all directions
 // can be an array of numbers/objects
-
 function withWhiteSpace() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function () {
-    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref4$margin = _ref4.margin,
-        margin = _ref4$margin === void 0 ? config.margin : _ref4$margin,
-        _ref4$padding = _ref4.padding,
-        padding = _ref4$padding === void 0 ? config.padding : _ref4$padding,
-        _ref4$mb = _ref4.mb,
-        marginBottom = _ref4$mb === void 0 ? config.marginBottom : _ref4$mb;
-
-    var styles = [];
-
+    let {
+      margin = config.margin,
+      padding = config.padding,
+      mb: marginBottom = config.marginBottom
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const styles = [];
     if (margin !== undefined) {
       if (Array.isArray(margin)) {
-        styles.push.apply(styles, _toConsumableArray(margin.map(function (val) {
-          return responsiveMargin(val);
-        })));
+        styles.push(...margin.map(val => responsiveMargin(val)));
       } else {
@@ -286,8 +173,5 @@ styles.push(responsiveMargin(margin));
     }
-
     if (padding !== undefined) {
       if (Array.isArray(padding)) {
-        styles.push.apply(styles, _toConsumableArray(padding.map(function (val) {
-          return responsivePadding(val);
-        })));
+        styles.push(...padding.map(val => responsivePadding(val)));
       } else {
@@ -297,3 +181,2 @@ styles.push(responsivePadding(padding));
     }
-
     if (marginBottom !== undefined) {
@@ -305,3 +188,2 @@ styles.push(responsiveMargin({
     }
-
     return styles;
@@ -311,23 +193,30 @@ };
 function withWidth() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function () {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref5$setWidth = _ref5.setWidth,
-        setWidth = _ref5$setWidth === void 0 ? config.width : _ref5$setWidth;
-
+    let {
+      setWidth = config.width
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (setWidth) {
-      var width = constants.WIDTHS[setWidth] || setWidth;
-      var _config$mediaQuery = config.mediaQuery,
-          mediaQuery = _config$mediaQuery === void 0 ? constants.MEDIA_QUERIES.TABLET : _config$mediaQuery,
-          noDefault = config.noDefault;
-      return _defineProperty({
-        width: noDefault ? undefined : '100%'
-      }, mediaQuery, {
-        width: width
-      });
+      const width = constants.WIDTHS[setWidth] || setWidth;
+      const {
+        mediaQuery = constants.MEDIA_QUERIES.TABLET,
+        noDefault
+      } = config;
+      return {
+        width: noDefault ? undefined : '100%',
+        [mediaQuery]: {
+          width
+        }
+      };
     }
-
     return undefined;
   };
 }
+let ComponentSizeVariant = /*#__PURE__*/function (ComponentSizeVariant) {
+  ComponentSizeVariant["XLARGE"] = "XLARGE";
+  ComponentSizeVariant["LARGE"] = "LARGE";
+  ComponentSizeVariant["MEDIUM"] = "MEDIUM";
+  ComponentSizeVariant["SMALL"] = "SMALL";
+  return ComponentSizeVariant;
+}({});
 
@@ -341,53 +230,57 @@ var index$3 = /*#__PURE__*/Object.freeze({
   withWhiteSpace: withWhiteSpace,
-  withWidth: withWidth
+  withWidth: withWidth,
+  ComponentSizeVariant: ComponentSizeVariant
 });
 
-var textColour = _defineProperty({
-  color: govukColours.BLACK
-}, constants.MEDIA_QUERIES.PRINT, {
-  color: '#000'
-});
-var textColor = textColour;
+// This lib is effectively a port of govuk-frontend's typography sass helpers
+const textColour = {
+  color: govukColours.BLACK,
+  [constants.MEDIA_QUERIES.PRINT]: {
+    color: '#000'
+  }
+};
+const textColor = textColour;
 function common$1() {
-  var fontFamily = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : constants.FONT_STACK;
-  return _defineProperty({
-    fontFamily: fontFamily,
+  let fontFamily = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : constants.FONT_STACK;
+  return {
+    fontFamily,
     WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale'
-  }, constants.MEDIA_QUERY_PRINT, {
-    fontFamily: constants.FONT_STACK_PRINT
-  });
+    MozOsxFontSmoothing: 'grayscale',
+    [constants.MEDIA_QUERY_PRINT]: {
+      fontFamily: constants.FONT_STACK_PRINT
+    }
+  };
 }
-
 function getSizeStyle(scale) {
-  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scale.lineHeight;
+  let lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scale.lineHeight;
   return {
-    fontSize: "".concat(scale.fontSize, "px"),
-    lineHeight: lineHeight
+    fontSize: `${scale.fontSize}px`,
+    lineHeight
   };
 }
-
 function responsive(size, overrideLineHeight) {
-  var _objectSpread2$1;
-
-  var scale = constants.TYPOGRAPHY_SCALE[size];
-
+  const scale = constants.TYPOGRAPHY_SCALE[size];
   if (!scale) {
-    throw Error("Unknown font size ".concat(size, " - expected a point from the typography scale."));
+    throw Error(`Unknown font size ${size} - expected a point from the typography scale.`);
   }
-
-  return _objectSpread2(_objectSpread2({}, getSizeStyle(scale.mobile, overrideLineHeight)), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, constants.MEDIA_QUERIES.TABLET, getSizeStyle(scale.tablet, overrideLineHeight)), _defineProperty(_objectSpread2$1, constants.MEDIA_QUERIES.PRINT, getSizeStyle(scale.print, overrideLineHeight)), _objectSpread2$1));
+  return {
+    ...getSizeStyle(scale.mobile, overrideLineHeight),
+    [constants.MEDIA_QUERIES.TABLET]: getSizeStyle(scale.tablet, overrideLineHeight),
+    [constants.MEDIA_QUERIES.PRINT]: getSizeStyle(scale.print, overrideLineHeight)
+  };
 }
 function font() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      size = _ref2.size,
-      _ref2$weight = _ref2.weight,
-      weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
-      _ref2$tabular = _ref2.tabular,
-      tabular = _ref2$tabular === void 0 ? false : _ref2$tabular,
-      lineHeight = _ref2.lineHeight;
-
-  return _objectSpread2(_objectSpread2(_objectSpread2({}, common$1(tabular ? constants.FONT_STACK_TABULAR : undefined)), constants.FONT_WEIGHTS[weight] ? {
-    fontWeight: constants.FONT_WEIGHTS[weight]
-  } : undefined), size ? responsive(size, lineHeight) : undefined);
+  let {
+    size,
+    weight = 'regular',
+    tabular = false,
+    lineHeight
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    ...common$1(tabular ? constants.FONT_STACK_TABULAR : undefined),
+    ...(constants.FONT_WEIGHTS[weight] ? {
+      fontWeight: constants.FONT_WEIGHTS[weight]
+    } : undefined),
+    ...(size ? responsive(size, lineHeight) : undefined)
+  };
 }
@@ -404,7 +297,8 @@
 
-var FOCUS_TEXT_COLOUR = govukColours.BLACK;
+// Tracking:
+const FOCUS_TEXT_COLOUR = govukColours.BLACK;
 function common(fontFamily) {
   return [common$1(fontFamily), constants.FOCUSABLE_FILL];
 }
-var styleDefault = {
+const styleDefault = {
   ':link': {
@@ -426,3 +320,3 @@ color: govukColours.LINK_COLOUR
 };
-var styleMuted = {
+const styleMuted = {
   '&:link, &:visited, &:hover, &:active': {
@@ -435,6 +329,6 @@ color: govukColours.SECONDARY_TEXT_COLOUR
 };
-var styleText = {
+const styleText = {
   '&:link, &:visited, &:hover, &:active, &:focus': textColour
 };
-var styleNoVisitedState = {
+const styleNoVisitedState = {
   ':link': {
@@ -456,11 +350,13 @@ color: govukColours.LINK_COLOUR
 };
-var printFriendly = _defineProperty({}, constants.MEDIA_QUERY_PRINT, {
-  '&[href^="/"], &[href^="http://"], &[href^="https://"]': {
-    '&::after': {
-      content: '" (" attr(href) ")"',
-      fontSize: '90%',
-      wordWrap: 'break-word'
+const printFriendly = {
+  [constants.MEDIA_QUERY_PRINT]: {
+    '&[href^="/"], &[href^="http://"], &[href^="https://"]': {
+      '&::after': {
+        content: '" (" attr(href) ")"',
+        fontSize: '90%',
+        wordWrap: 'break-word'
+      }
     }
   }
-});
+};
 
@@ -479,3 +375,3 @@ var index$1 = /*#__PURE__*/Object.freeze({
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_shape-arrow.scss
-var root3 = 1.732; // Math.sqrt(3);
+const root3 = 1.732; // Math.sqrt(3);
 
@@ -485,6 +381,4 @@ function equilateralHeight(base) {
 }
-
 function makeShape(direction, base, height) {
-  var perpendicular = base / 2;
-
+  const perpendicular = base / 2;
   switch (direction) {
@@ -494,48 +388,44 @@ case 'up':
         clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
-        borderWidth: "0 ".concat(perpendicular, "px ").concat(height, "px ").concat(perpendicular, "px"),
+        borderWidth: `0 ${perpendicular}px ${height}px ${perpendicular}px`,
         borderBottomColor: 'inherit'
       };
-
     case 'right':
       return {
         clipPath: 'polygon(0% 0%, 100% 50%, 0% 100%)',
-        borderWidth: "".concat(perpendicular, "px 0 ").concat(perpendicular, "px ").concat(height, "px"),
+        borderWidth: `${perpendicular}px 0 ${perpendicular}px ${height}px`,
         borderLeftColor: 'inherit'
       };
-
     case 'down':
       return {
         clipPath: 'polygon(0% 0%, 50% 100%, 100% 0%)',
-        borderWidth: "".concat(height, "px ").concat(perpendicular, "px 0 ").concat(perpendicular, "px"),
+        borderWidth: `${height}px ${perpendicular}px 0 ${perpendicular}px`,
         borderTopColor: 'inherit'
       };
-
     case 'left':
       return {
         clipPath: 'polygon(0% 50%, 100% 100%, 100% 0%)',
-        borderWidth: "".concat(perpendicular, "px ").concat(height, "px ").concat(perpendicular, "px 0"),
+        borderWidth: `${perpendicular}px ${height}px ${perpendicular}px 0`,
         borderRightColor: 'inherit'
       };
-
     default:
-      throw Error("Invalid arrow direction: expected 'up', 'right', 'down' or 'left', got ".concat(direction));
+      throw Error(`Invalid arrow direction: expected 'up', 'right', 'down' or 'left', got ${direction}`);
   }
-} // eslint-disable-next-line import/prefer-default-export
+}
 
-
+// eslint-disable-next-line import/prefer-default-export
 function arrow(_ref) {
-  var direction = _ref.direction,
-      _ref$base = _ref.base,
-      base = _ref$base === void 0 ? 0 : _ref$base,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? equilateralHeight(base) : _ref$height,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'block' : _ref$display;
-  return _objectSpread2({
-    display: display,
+  let {
+    direction,
+    base = 0,
+    height = equilateralHeight(base),
+    display = 'block'
+  } = _ref;
+  return {
+    display,
     width: 0,
     height: 0,
     borderStyle: 'solid',
-    borderColor: 'transparent'
-  }, makeShape(direction, base, height));
+    borderColor: 'transparent',
+    ...makeShape(direction, base, height)
+  };
 }
@@ -542,0 +432,0 @@

dist/govuk-react-lib.cjs.prod.js

@@ -8,199 +8,89 @@ 'use strict';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(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 _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 // This lib is effectively a port of govuk-frontend's visually-hidden sass helpers
 // Tracking:
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_visually-hidden.scss
+
 function visuallyHidden() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$important = _ref.important,
-      isImportant = _ref$important === void 0 ? true : _ref$important,
-      _ref$focusable = _ref.focusable,
-      isFocusable = _ref$focusable === void 0 ? false : _ref$focusable;
-
-  var important = isImportant ? ' !important' : '';
-  return _objectSpread2({
-    position: "absolute".concat(important),
-    width: "1px".concat(important),
-    height: "1px".concat(important),
-    margin: "0".concat(important),
-    overflow: "hidden".concat(important),
-    clip: "rect(0 0 0 0)".concat(important),
-    clipPath: "inset(50%)".concat(important),
-    border: "0".concat(important),
-    whiteSpace: "nowrap".concat(important)
-  }, isFocusable ? {
-    '&:active,&:focus': {
-      position: "static".concat(important),
-      width: "auto".concat(important),
-      height: "auto".concat(important),
-      margin: "inherit".concat(important),
-      overflow: "visible".concat(important),
-      clip: "auto".concat(important),
-      clipPath: "none".concat(important),
-      whiteSpace: "inherit".concat(important)
-    }
-  } : {
-    padding: "0".concat(important)
-  });
+  let {
+    important: isImportant = true,
+    focusable: isFocusable = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const important = isImportant ? ' !important' : '';
+  return {
+    position: `absolute${important}`,
+    width: `1px${important}`,
+    height: `1px${important}`,
+    margin: `0${important}`,
+    overflow: `hidden${important}`,
+    clip: `rect(0 0 0 0)${important}`,
+    clipPath: `inset(50%)${important}`,
+    border: `0${important}`,
+    whiteSpace: `nowrap${important}`,
+    ...(isFocusable ? {
+      '&:active,&:focus': {
+        position: `static${important}`,
+        width: `auto${important}`,
+        height: `auto${important}`,
+        margin: `inherit${important}`,
+        overflow: `visible${important}`,
+        clip: `auto${important}`,
+        clipPath: `none${important}`,
+        whiteSpace: `inherit${important}`
+      }
+    } : {
+      padding: `0${important}`
+    })
+  };
 }
-
 function focusable() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$important = _ref2.important,
-      important = _ref2$important === void 0 ? true : _ref2$important;
-
+  let {
+    important = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return visuallyHidden({
-    important: important,
+    important,
     focusable: true
   });
 }
-
 visuallyHidden.focusable = focusable;
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
+// This lib is effectively a port of govuk-frontend's spacing sass helpers
 function simple(size) {
-  var scale = constants.SPACING_POINTS[Math.abs(size)];
-  var polarity = size < 0 ? -1 : 1;
-
+  const scale = constants.SPACING_POINTS[Math.abs(size)];
+  const polarity = size < 0 ? -1 : 1;
   if (scale === undefined) {
-    throw Error("Unknown spacing size ".concat(size, " - expected a point from the spacing scale."));
+    throw Error(`Unknown spacing size ${size} - expected a point from the spacing scale.`);
   }
-
   return scale * polarity;
 }
-
 function styleForDirection(size, property) {
-  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   // NB styled-components automatically sets style to include `px` if needed
-  return _defineProperty({}, direction && direction !== 'all' ? "".concat(property, "-").concat(direction) : property, size);
+  return {
+    [direction && direction !== 'all' ? `${property}-${direction}` : property]: size
+  };
 }
-
-function responsive$1(_ref2) {
-  var size = _ref2.size,
-      property = _ref2.property,
-      _ref2$direction = _ref2.direction,
-      direction = _ref2$direction === void 0 ? null : _ref2$direction,
-      _ref2$adjustment = _ref2.adjustment,
-      adjustment = _ref2$adjustment === void 0 ? 0 : _ref2$adjustment;
-  var scale = constants.SPACING_MAP[Math.abs(Number(size))];
-  var polarity = size < 0 ? -1 : 1;
-
+function responsive$1(_ref) {
+  let {
+    size,
+    property,
+    direction = null,
+    adjustment = 0
+  } = _ref;
+  const scale = constants.SPACING_MAP[Math.abs(Number(size))];
+  const polarity = Number(size) < 0 ? -1 : 1;
   if (scale === undefined) {
-    throw Error("Unknown responsive spacing size ".concat(size, " - expected a point from the responsive spacing scale."));
+    throw Error(`Unknown responsive spacing size ${size} - expected a point from the responsive spacing scale.`);
   }
-
   if (!property) {
     throw Error('No property passed to responsiveSpacing');
   }
-
   if (Array.isArray(direction)) {
-    return Object.assign.apply(Object, [{}].concat(_toConsumableArray(direction.map(function (dir) {
-      return styleForDirection(scale.mobile * polarity + adjustment, property, dir);
-    })), [_defineProperty({}, constants.MEDIA_QUERIES.TABLET, Object.assign.apply(Object, [{}].concat(_toConsumableArray(direction.map(function (dir) {
-      return styleForDirection(scale.tablet * polarity + adjustment, property, dir);
-    })))))]));
+    return Object.assign({}, ...direction.map(dir => styleForDirection(scale.mobile * polarity + adjustment, property, dir)), {
+      [constants.MEDIA_QUERIES.TABLET]: Object.assign({}, ...direction.map(dir => styleForDirection(scale.tablet * polarity + adjustment, property, dir)))
+    });
   }
-
-  var f = _objectSpread2(_objectSpread2({}, styleForDirection(scale.mobile * polarity + adjustment, property, direction)), {}, _defineProperty({}, constants.MEDIA_QUERIES.TABLET, styleForDirection(scale.tablet * polarity + adjustment, property, direction)));
-
+  const f = {
+    ...styleForDirection(scale.mobile * polarity + adjustment, property, direction),
+    [constants.MEDIA_QUERIES.TABLET]: styleForDirection(scale.tablet * polarity + adjustment, property, direction)
+  };
   return f;
@@ -215,15 +105,15 @@ }
   }
-
-  if (_typeof(value) !== 'object') {
+  if (typeof value !== 'object') {
     throw Error('Expected padding value to be an object or integer');
   }
-
-  var size = value.size,
-      direction = value.direction,
-      adjustment = value.adjustment;
+  const {
+    size,
+    direction,
+    adjustment
+  } = value;
   return responsive$1({
-    size: size,
+    size,
     property: 'margin',
-    direction: direction,
-    adjustment: adjustment
+    direction,
+    adjustment
   });
@@ -238,20 +128,24 @@ }
   }
-
-  if (_typeof(value) !== 'object') {
+  if (typeof value !== 'object') {
     throw Error('Expected padding value to be an object or integer');
   }
-
-  var size = value.size,
-      direction = value.direction,
-      adjustment = value.adjustment;
+  const {
+    size,
+    direction,
+    adjustment
+  } = value;
   return responsive$1({
-    size: size,
+    size,
     property: 'padding',
-    direction: direction,
-    adjustment: adjustment
+    direction,
+    adjustment
   });
-} // withWhiteSpace lib styling function
+}
+
+// withWhiteSpace lib styling function
 // does not form part of govuk-frontend
+
 // `withWhiteSpace(config)`
 // generates a styling function, based on config, which can be used when styling a component
+
 // `margin` and `padding` are supported as props and config values
@@ -262,21 +156,14 @@ // can be a single number, to indicate scale size to use in all directions
 // can be an array of numbers/objects
-
 function withWhiteSpace() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function () {
-    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref4$margin = _ref4.margin,
-        margin = _ref4$margin === void 0 ? config.margin : _ref4$margin,
-        _ref4$padding = _ref4.padding,
-        padding = _ref4$padding === void 0 ? config.padding : _ref4$padding,
-        _ref4$mb = _ref4.mb,
-        marginBottom = _ref4$mb === void 0 ? config.marginBottom : _ref4$mb;
-
-    var styles = [];
-
+    let {
+      margin = config.margin,
+      padding = config.padding,
+      mb: marginBottom = config.marginBottom
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const styles = [];
     if (margin !== undefined) {
       if (Array.isArray(margin)) {
-        styles.push.apply(styles, _toConsumableArray(margin.map(function (val) {
-          return responsiveMargin(val);
-        })));
+        styles.push(...margin.map(val => responsiveMargin(val)));
       } else {
@@ -286,8 +173,5 @@ styles.push(responsiveMargin(margin));
     }
-
     if (padding !== undefined) {
       if (Array.isArray(padding)) {
-        styles.push.apply(styles, _toConsumableArray(padding.map(function (val) {
-          return responsivePadding(val);
-        })));
+        styles.push(...padding.map(val => responsivePadding(val)));
       } else {
@@ -297,3 +181,2 @@ styles.push(responsivePadding(padding));
     }
-
     if (marginBottom !== undefined) {
@@ -305,3 +188,2 @@ styles.push(responsiveMargin({
     }
-
     return styles;
@@ -311,23 +193,30 @@ };
 function withWidth() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function () {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref5$setWidth = _ref5.setWidth,
-        setWidth = _ref5$setWidth === void 0 ? config.width : _ref5$setWidth;
-
+    let {
+      setWidth = config.width
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (setWidth) {
-      var width = constants.WIDTHS[setWidth] || setWidth;
-      var _config$mediaQuery = config.mediaQuery,
-          mediaQuery = _config$mediaQuery === void 0 ? constants.MEDIA_QUERIES.TABLET : _config$mediaQuery,
-          noDefault = config.noDefault;
-      return _defineProperty({
-        width: noDefault ? undefined : '100%'
-      }, mediaQuery, {
-        width: width
-      });
+      const width = constants.WIDTHS[setWidth] || setWidth;
+      const {
+        mediaQuery = constants.MEDIA_QUERIES.TABLET,
+        noDefault
+      } = config;
+      return {
+        width: noDefault ? undefined : '100%',
+        [mediaQuery]: {
+          width
+        }
+      };
     }
-
     return undefined;
   };
 }
+let ComponentSizeVariant = /*#__PURE__*/function (ComponentSizeVariant) {
+  ComponentSizeVariant["XLARGE"] = "XLARGE";
+  ComponentSizeVariant["LARGE"] = "LARGE";
+  ComponentSizeVariant["MEDIUM"] = "MEDIUM";
+  ComponentSizeVariant["SMALL"] = "SMALL";
+  return ComponentSizeVariant;
+}({});
 
@@ -341,53 +230,57 @@ var index$3 = /*#__PURE__*/Object.freeze({
   withWhiteSpace: withWhiteSpace,
-  withWidth: withWidth
+  withWidth: withWidth,
+  ComponentSizeVariant: ComponentSizeVariant
 });
 
-var textColour = _defineProperty({
-  color: govukColours.BLACK
-}, constants.MEDIA_QUERIES.PRINT, {
-  color: '#000'
-});
-var textColor = textColour;
+// This lib is effectively a port of govuk-frontend's typography sass helpers
+const textColour = {
+  color: govukColours.BLACK,
+  [constants.MEDIA_QUERIES.PRINT]: {
+    color: '#000'
+  }
+};
+const textColor = textColour;
 function common$1() {
-  var fontFamily = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : constants.FONT_STACK;
-  return _defineProperty({
-    fontFamily: fontFamily,
+  let fontFamily = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : constants.FONT_STACK;
+  return {
+    fontFamily,
     WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale'
-  }, constants.MEDIA_QUERY_PRINT, {
-    fontFamily: constants.FONT_STACK_PRINT
-  });
+    MozOsxFontSmoothing: 'grayscale',
+    [constants.MEDIA_QUERY_PRINT]: {
+      fontFamily: constants.FONT_STACK_PRINT
+    }
+  };
 }
-
 function getSizeStyle(scale) {
-  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scale.lineHeight;
+  let lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scale.lineHeight;
   return {
-    fontSize: "".concat(scale.fontSize, "px"),
-    lineHeight: lineHeight
+    fontSize: `${scale.fontSize}px`,
+    lineHeight
   };
 }
-
 function responsive(size, overrideLineHeight) {
-  var _objectSpread2$1;
-
-  var scale = constants.TYPOGRAPHY_SCALE[size];
-
+  const scale = constants.TYPOGRAPHY_SCALE[size];
   if (!scale) {
-    throw Error("Unknown font size ".concat(size, " - expected a point from the typography scale."));
+    throw Error(`Unknown font size ${size} - expected a point from the typography scale.`);
   }
-
-  return _objectSpread2(_objectSpread2({}, getSizeStyle(scale.mobile, overrideLineHeight)), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, constants.MEDIA_QUERIES.TABLET, getSizeStyle(scale.tablet, overrideLineHeight)), _defineProperty(_objectSpread2$1, constants.MEDIA_QUERIES.PRINT, getSizeStyle(scale.print, overrideLineHeight)), _objectSpread2$1));
+  return {
+    ...getSizeStyle(scale.mobile, overrideLineHeight),
+    [constants.MEDIA_QUERIES.TABLET]: getSizeStyle(scale.tablet, overrideLineHeight),
+    [constants.MEDIA_QUERIES.PRINT]: getSizeStyle(scale.print, overrideLineHeight)
+  };
 }
 function font() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      size = _ref2.size,
-      _ref2$weight = _ref2.weight,
-      weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
-      _ref2$tabular = _ref2.tabular,
-      tabular = _ref2$tabular === void 0 ? false : _ref2$tabular,
-      lineHeight = _ref2.lineHeight;
-
-  return _objectSpread2(_objectSpread2(_objectSpread2({}, common$1(tabular ? constants.FONT_STACK_TABULAR : undefined)), constants.FONT_WEIGHTS[weight] ? {
-    fontWeight: constants.FONT_WEIGHTS[weight]
-  } : undefined), size ? responsive(size, lineHeight) : undefined);
+  let {
+    size,
+    weight = 'regular',
+    tabular = false,
+    lineHeight
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    ...common$1(tabular ? constants.FONT_STACK_TABULAR : undefined),
+    ...(constants.FONT_WEIGHTS[weight] ? {
+      fontWeight: constants.FONT_WEIGHTS[weight]
+    } : undefined),
+    ...(size ? responsive(size, lineHeight) : undefined)
+  };
 }
@@ -404,7 +297,8 @@
 
-var FOCUS_TEXT_COLOUR = govukColours.BLACK;
+// Tracking:
+const FOCUS_TEXT_COLOUR = govukColours.BLACK;
 function common(fontFamily) {
   return [common$1(fontFamily), constants.FOCUSABLE_FILL];
 }
-var styleDefault = {
+const styleDefault = {
   ':link': {
@@ -426,3 +320,3 @@ color: govukColours.LINK_COLOUR
 };
-var styleMuted = {
+const styleMuted = {
   '&:link, &:visited, &:hover, &:active': {
@@ -435,6 +329,6 @@ color: govukColours.SECONDARY_TEXT_COLOUR
 };
-var styleText = {
+const styleText = {
   '&:link, &:visited, &:hover, &:active, &:focus': textColour
 };
-var styleNoVisitedState = {
+const styleNoVisitedState = {
   ':link': {
@@ -456,11 +350,13 @@ color: govukColours.LINK_COLOUR
 };
-var printFriendly = _defineProperty({}, constants.MEDIA_QUERY_PRINT, {
-  '&[href^="/"], &[href^="http://"], &[href^="https://"]': {
-    '&::after': {
-      content: '" (" attr(href) ")"',
-      fontSize: '90%',
-      wordWrap: 'break-word'
+const printFriendly = {
+  [constants.MEDIA_QUERY_PRINT]: {
+    '&[href^="/"], &[href^="http://"], &[href^="https://"]': {
+      '&::after': {
+        content: '" (" attr(href) ")"',
+        fontSize: '90%',
+        wordWrap: 'break-word'
+      }
     }
   }
-});
+};
 
@@ -479,3 +375,3 @@ var index$1 = /*#__PURE__*/Object.freeze({
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_shape-arrow.scss
-var root3 = 1.732; // Math.sqrt(3);
+const root3 = 1.732; // Math.sqrt(3);
 
@@ -485,6 +381,4 @@ function equilateralHeight(base) {
 }
-
 function makeShape(direction, base, height) {
-  var perpendicular = base / 2;
-
+  const perpendicular = base / 2;
   switch (direction) {
@@ -494,48 +388,44 @@ case 'up':
         clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
-        borderWidth: "0 ".concat(perpendicular, "px ").concat(height, "px ").concat(perpendicular, "px"),
+        borderWidth: `0 ${perpendicular}px ${height}px ${perpendicular}px`,
         borderBottomColor: 'inherit'
       };
-
     case 'right':
       return {
         clipPath: 'polygon(0% 0%, 100% 50%, 0% 100%)',
-        borderWidth: "".concat(perpendicular, "px 0 ").concat(perpendicular, "px ").concat(height, "px"),
+        borderWidth: `${perpendicular}px 0 ${perpendicular}px ${height}px`,
         borderLeftColor: 'inherit'
       };
-
     case 'down':
       return {
         clipPath: 'polygon(0% 0%, 50% 100%, 100% 0%)',
-        borderWidth: "".concat(height, "px ").concat(perpendicular, "px 0 ").concat(perpendicular, "px"),
+        borderWidth: `${height}px ${perpendicular}px 0 ${perpendicular}px`,
         borderTopColor: 'inherit'
       };
-
     case 'left':
       return {
         clipPath: 'polygon(0% 50%, 100% 100%, 100% 0%)',
-        borderWidth: "".concat(perpendicular, "px ").concat(height, "px ").concat(perpendicular, "px 0"),
+        borderWidth: `${perpendicular}px ${height}px ${perpendicular}px 0`,
         borderRightColor: 'inherit'
       };
-
     default:
-      throw Error("Invalid arrow direction: expected 'up', 'right', 'down' or 'left', got ".concat(direction));
+      throw Error(`Invalid arrow direction: expected 'up', 'right', 'down' or 'left', got ${direction}`);
   }
-} // eslint-disable-next-line import/prefer-default-export
+}
 
-
+// eslint-disable-next-line import/prefer-default-export
 function arrow(_ref) {
-  var direction = _ref.direction,
-      _ref$base = _ref.base,
-      base = _ref$base === void 0 ? 0 : _ref$base,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? equilateralHeight(base) : _ref$height,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'block' : _ref$display;
-  return _objectSpread2({
-    display: display,
+  let {
+    direction,
+    base = 0,
+    height = equilateralHeight(base),
+    display = 'block'
+  } = _ref;
+  return {
+    display,
     width: 0,
     height: 0,
     borderStyle: 'solid',
-    borderColor: 'transparent'
-  }, makeShape(direction, base, height));
+    borderColor: 'transparent',
+    ...makeShape(direction, base, height)
+  };
 }
@@ -542,0 +432,0 @@

dist/govuk-react-lib.esm.js

@@ -1,201 +0,91 @@
-import { SPACING_POINTS, SPACING_MAP, MEDIA_QUERIES, WIDTHS, FONT_STACK_PRINT, MEDIA_QUERY_PRINT, TYPOGRAPHY_SCALE, FONT_WEIGHTS, FONT_STACK, FONT_STACK_TABULAR, FOCUSABLE_FILL } from '@govuk-react/constants';
+import { SPACING_POINTS, SPACING_MAP, MEDIA_QUERIES, WIDTHS, MEDIA_QUERY_PRINT, FONT_STACK_PRINT, TYPOGRAPHY_SCALE, FONT_WEIGHTS, FONT_STACK, FONT_STACK_TABULAR, FOCUSABLE_FILL } from '@govuk-react/constants';
 import { BLACK, LINK_COLOUR, LINK_VISITED_COLOUR, LINK_HOVER_COLOUR, LINK_ACTIVE_COLOUR, SECONDARY_TEXT_COLOUR } from 'govuk-colours';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(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 _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 // This lib is effectively a port of govuk-frontend's visually-hidden sass helpers
 // Tracking:
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_visually-hidden.scss
+
 function visuallyHidden() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$important = _ref.important,
-      isImportant = _ref$important === void 0 ? true : _ref$important,
-      _ref$focusable = _ref.focusable,
-      isFocusable = _ref$focusable === void 0 ? false : _ref$focusable;
-
-  var important = isImportant ? ' !important' : '';
-  return _objectSpread2({
-    position: "absolute".concat(important),
-    width: "1px".concat(important),
-    height: "1px".concat(important),
-    margin: "0".concat(important),
-    overflow: "hidden".concat(important),
-    clip: "rect(0 0 0 0)".concat(important),
-    clipPath: "inset(50%)".concat(important),
-    border: "0".concat(important),
-    whiteSpace: "nowrap".concat(important)
-  }, isFocusable ? {
-    '&:active,&:focus': {
-      position: "static".concat(important),
-      width: "auto".concat(important),
-      height: "auto".concat(important),
-      margin: "inherit".concat(important),
-      overflow: "visible".concat(important),
-      clip: "auto".concat(important),
-      clipPath: "none".concat(important),
-      whiteSpace: "inherit".concat(important)
-    }
-  } : {
-    padding: "0".concat(important)
-  });
+  let {
+    important: isImportant = true,
+    focusable: isFocusable = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const important = isImportant ? ' !important' : '';
+  return {
+    position: `absolute${important}`,
+    width: `1px${important}`,
+    height: `1px${important}`,
+    margin: `0${important}`,
+    overflow: `hidden${important}`,
+    clip: `rect(0 0 0 0)${important}`,
+    clipPath: `inset(50%)${important}`,
+    border: `0${important}`,
+    whiteSpace: `nowrap${important}`,
+    ...(isFocusable ? {
+      '&:active,&:focus': {
+        position: `static${important}`,
+        width: `auto${important}`,
+        height: `auto${important}`,
+        margin: `inherit${important}`,
+        overflow: `visible${important}`,
+        clip: `auto${important}`,
+        clipPath: `none${important}`,
+        whiteSpace: `inherit${important}`
+      }
+    } : {
+      padding: `0${important}`
+    })
+  };
 }
-
 function focusable() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$important = _ref2.important,
-      important = _ref2$important === void 0 ? true : _ref2$important;
-
+  let {
+    important = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return visuallyHidden({
-    important: important,
+    important,
     focusable: true
   });
 }
-
 visuallyHidden.focusable = focusable;
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
+// This lib is effectively a port of govuk-frontend's spacing sass helpers
 function simple(size) {
-  var scale = SPACING_POINTS[Math.abs(size)];
-  var polarity = size < 0 ? -1 : 1;
-
+  const scale = SPACING_POINTS[Math.abs(size)];
+  const polarity = size < 0 ? -1 : 1;
   if (scale === undefined) {
-    throw Error("Unknown spacing size ".concat(size, " - expected a point from the spacing scale."));
+    throw Error(`Unknown spacing size ${size} - expected a point from the spacing scale.`);
   }
-
   return scale * polarity;
 }
-
 function styleForDirection(size, property) {
-  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   // NB styled-components automatically sets style to include `px` if needed
-  return _defineProperty({}, direction && direction !== 'all' ? "".concat(property, "-").concat(direction) : property, size);
+  return {
+    [direction && direction !== 'all' ? `${property}-${direction}` : property]: size
+  };
 }
-
-function responsive$1(_ref2) {
-  var size = _ref2.size,
-      property = _ref2.property,
-      _ref2$direction = _ref2.direction,
-      direction = _ref2$direction === void 0 ? null : _ref2$direction,
-      _ref2$adjustment = _ref2.adjustment,
-      adjustment = _ref2$adjustment === void 0 ? 0 : _ref2$adjustment;
-  var scale = SPACING_MAP[Math.abs(Number(size))];
-  var polarity = size < 0 ? -1 : 1;
-
+function responsive$1(_ref) {
+  let {
+    size,
+    property,
+    direction = null,
+    adjustment = 0
+  } = _ref;
+  const scale = SPACING_MAP[Math.abs(Number(size))];
+  const polarity = Number(size) < 0 ? -1 : 1;
   if (scale === undefined) {
-    throw Error("Unknown responsive spacing size ".concat(size, " - expected a point from the responsive spacing scale."));
+    throw Error(`Unknown responsive spacing size ${size} - expected a point from the responsive spacing scale.`);
   }
-
   if (!property) {
     throw Error('No property passed to responsiveSpacing');
   }
-
   if (Array.isArray(direction)) {
-    return Object.assign.apply(Object, [{}].concat(_toConsumableArray(direction.map(function (dir) {
-      return styleForDirection(scale.mobile * polarity + adjustment, property, dir);
-    })), [_defineProperty({}, MEDIA_QUERIES.TABLET, Object.assign.apply(Object, [{}].concat(_toConsumableArray(direction.map(function (dir) {
-      return styleForDirection(scale.tablet * polarity + adjustment, property, dir);
-    })))))]));
+    return Object.assign({}, ...direction.map(dir => styleForDirection(scale.mobile * polarity + adjustment, property, dir)), {
+      [MEDIA_QUERIES.TABLET]: Object.assign({}, ...direction.map(dir => styleForDirection(scale.tablet * polarity + adjustment, property, dir)))
+    });
   }
-
-  var f = _objectSpread2(_objectSpread2({}, styleForDirection(scale.mobile * polarity + adjustment, property, direction)), {}, _defineProperty({}, MEDIA_QUERIES.TABLET, styleForDirection(scale.tablet * polarity + adjustment, property, direction)));
-
+  const f = {
+    ...styleForDirection(scale.mobile * polarity + adjustment, property, direction),
+    [MEDIA_QUERIES.TABLET]: styleForDirection(scale.tablet * polarity + adjustment, property, direction)
+  };
   return f;
@@ -210,15 +100,15 @@ }
   }
-
-  if (_typeof(value) !== 'object') {
+  if (typeof value !== 'object') {
     throw Error('Expected padding value to be an object or integer');
   }
-
-  var size = value.size,
-      direction = value.direction,
-      adjustment = value.adjustment;
+  const {
+    size,
+    direction,
+    adjustment
+  } = value;
   return responsive$1({
-    size: size,
+    size,
     property: 'margin',
-    direction: direction,
-    adjustment: adjustment
+    direction,
+    adjustment
   });
@@ -233,20 +123,24 @@ }
   }
-
-  if (_typeof(value) !== 'object') {
+  if (typeof value !== 'object') {
     throw Error('Expected padding value to be an object or integer');
   }
-
-  var size = value.size,
-      direction = value.direction,
-      adjustment = value.adjustment;
+  const {
+    size,
+    direction,
+    adjustment
+  } = value;
   return responsive$1({
-    size: size,
+    size,
     property: 'padding',
-    direction: direction,
-    adjustment: adjustment
+    direction,
+    adjustment
   });
-} // withWhiteSpace lib styling function
+}
+
+// withWhiteSpace lib styling function
 // does not form part of govuk-frontend
+
 // `withWhiteSpace(config)`
 // generates a styling function, based on config, which can be used when styling a component
+
 // `margin` and `padding` are supported as props and config values
@@ -257,21 +151,14 @@ // can be a single number, to indicate scale size to use in all directions
 // can be an array of numbers/objects
-
 function withWhiteSpace() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function () {
-    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref4$margin = _ref4.margin,
-        margin = _ref4$margin === void 0 ? config.margin : _ref4$margin,
-        _ref4$padding = _ref4.padding,
-        padding = _ref4$padding === void 0 ? config.padding : _ref4$padding,
-        _ref4$mb = _ref4.mb,
-        marginBottom = _ref4$mb === void 0 ? config.marginBottom : _ref4$mb;
-
-    var styles = [];
-
+    let {
+      margin = config.margin,
+      padding = config.padding,
+      mb: marginBottom = config.marginBottom
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const styles = [];
     if (margin !== undefined) {
       if (Array.isArray(margin)) {
-        styles.push.apply(styles, _toConsumableArray(margin.map(function (val) {
-          return responsiveMargin(val);
-        })));
+        styles.push(...margin.map(val => responsiveMargin(val)));
       } else {
@@ -281,8 +168,5 @@ styles.push(responsiveMargin(margin));
     }
-
     if (padding !== undefined) {
       if (Array.isArray(padding)) {
-        styles.push.apply(styles, _toConsumableArray(padding.map(function (val) {
-          return responsivePadding(val);
-        })));
+        styles.push(...padding.map(val => responsivePadding(val)));
       } else {
@@ -292,3 +176,2 @@ styles.push(responsivePadding(padding));
     }
-
     if (marginBottom !== undefined) {
@@ -300,3 +183,2 @@ styles.push(responsiveMargin({
     }
-
     return styles;
@@ -306,23 +188,30 @@ };
 function withWidth() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function () {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref5$setWidth = _ref5.setWidth,
-        setWidth = _ref5$setWidth === void 0 ? config.width : _ref5$setWidth;
-
+    let {
+      setWidth = config.width
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (setWidth) {
-      var width = WIDTHS[setWidth] || setWidth;
-      var _config$mediaQuery = config.mediaQuery,
-          mediaQuery = _config$mediaQuery === void 0 ? MEDIA_QUERIES.TABLET : _config$mediaQuery,
-          noDefault = config.noDefault;
-      return _defineProperty({
-        width: noDefault ? undefined : '100%'
-      }, mediaQuery, {
-        width: width
-      });
+      const width = WIDTHS[setWidth] || setWidth;
+      const {
+        mediaQuery = MEDIA_QUERIES.TABLET,
+        noDefault
+      } = config;
+      return {
+        width: noDefault ? undefined : '100%',
+        [mediaQuery]: {
+          width
+        }
+      };
     }
-
     return undefined;
   };
 }
+let ComponentSizeVariant = /*#__PURE__*/function (ComponentSizeVariant) {
+  ComponentSizeVariant["XLARGE"] = "XLARGE";
+  ComponentSizeVariant["LARGE"] = "LARGE";
+  ComponentSizeVariant["MEDIUM"] = "MEDIUM";
+  ComponentSizeVariant["SMALL"] = "SMALL";
+  return ComponentSizeVariant;
+}({});
 
@@ -336,53 +225,57 @@ var index$3 = /*#__PURE__*/Object.freeze({
   withWhiteSpace: withWhiteSpace,
-  withWidth: withWidth
+  withWidth: withWidth,
+  ComponentSizeVariant: ComponentSizeVariant
 });
 
-var textColour = _defineProperty({
-  color: BLACK
-}, MEDIA_QUERIES.PRINT, {
-  color: '#000'
-});
-var textColor = textColour;
+// This lib is effectively a port of govuk-frontend's typography sass helpers
+const textColour = {
+  color: BLACK,
+  [MEDIA_QUERIES.PRINT]: {
+    color: '#000'
+  }
+};
+const textColor = textColour;
 function common$1() {
-  var fontFamily = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : FONT_STACK;
-  return _defineProperty({
-    fontFamily: fontFamily,
+  let fontFamily = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : FONT_STACK;
+  return {
+    fontFamily,
     WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale'
-  }, MEDIA_QUERY_PRINT, {
-    fontFamily: FONT_STACK_PRINT
-  });
+    MozOsxFontSmoothing: 'grayscale',
+    [MEDIA_QUERY_PRINT]: {
+      fontFamily: FONT_STACK_PRINT
+    }
+  };
 }
-
 function getSizeStyle(scale) {
-  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scale.lineHeight;
+  let lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scale.lineHeight;
   return {
-    fontSize: "".concat(scale.fontSize, "px"),
-    lineHeight: lineHeight
+    fontSize: `${scale.fontSize}px`,
+    lineHeight
   };
 }
-
 function responsive(size, overrideLineHeight) {
-  var _objectSpread2$1;
-
-  var scale = TYPOGRAPHY_SCALE[size];
-
+  const scale = TYPOGRAPHY_SCALE[size];
   if (!scale) {
-    throw Error("Unknown font size ".concat(size, " - expected a point from the typography scale."));
+    throw Error(`Unknown font size ${size} - expected a point from the typography scale.`);
   }
-
-  return _objectSpread2(_objectSpread2({}, getSizeStyle(scale.mobile, overrideLineHeight)), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, MEDIA_QUERIES.TABLET, getSizeStyle(scale.tablet, overrideLineHeight)), _defineProperty(_objectSpread2$1, MEDIA_QUERIES.PRINT, getSizeStyle(scale.print, overrideLineHeight)), _objectSpread2$1));
+  return {
+    ...getSizeStyle(scale.mobile, overrideLineHeight),
+    [MEDIA_QUERIES.TABLET]: getSizeStyle(scale.tablet, overrideLineHeight),
+    [MEDIA_QUERIES.PRINT]: getSizeStyle(scale.print, overrideLineHeight)
+  };
 }
 function font() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      size = _ref2.size,
-      _ref2$weight = _ref2.weight,
-      weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
-      _ref2$tabular = _ref2.tabular,
-      tabular = _ref2$tabular === void 0 ? false : _ref2$tabular,
-      lineHeight = _ref2.lineHeight;
-
-  return _objectSpread2(_objectSpread2(_objectSpread2({}, common$1(tabular ? FONT_STACK_TABULAR : undefined)), FONT_WEIGHTS[weight] ? {
-    fontWeight: FONT_WEIGHTS[weight]
-  } : undefined), size ? responsive(size, lineHeight) : undefined);
+  let {
+    size,
+    weight = 'regular',
+    tabular = false,
+    lineHeight
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    ...common$1(tabular ? FONT_STACK_TABULAR : undefined),
+    ...(FONT_WEIGHTS[weight] ? {
+      fontWeight: FONT_WEIGHTS[weight]
+    } : undefined),
+    ...(size ? responsive(size, lineHeight) : undefined)
+  };
 }
@@ -399,7 +292,8 @@
 
-var FOCUS_TEXT_COLOUR = BLACK;
+// Tracking:
+const FOCUS_TEXT_COLOUR = BLACK;
 function common(fontFamily) {
   return [common$1(fontFamily), FOCUSABLE_FILL];
 }
-var styleDefault = {
+const styleDefault = {
   ':link': {
@@ -421,3 +315,3 @@ color: LINK_COLOUR
 };
-var styleMuted = {
+const styleMuted = {
   '&:link, &:visited, &:hover, &:active': {
@@ -430,6 +324,6 @@ color: SECONDARY_TEXT_COLOUR
 };
-var styleText = {
+const styleText = {
   '&:link, &:visited, &:hover, &:active, &:focus': textColour
 };
-var styleNoVisitedState = {
+const styleNoVisitedState = {
   ':link': {
@@ -451,11 +345,13 @@ color: LINK_COLOUR
 };
-var printFriendly = _defineProperty({}, MEDIA_QUERY_PRINT, {
-  '&[href^="/"], &[href^="http://"], &[href^="https://"]': {
-    '&::after': {
-      content: '" (" attr(href) ")"',
-      fontSize: '90%',
-      wordWrap: 'break-word'
+const printFriendly = {
+  [MEDIA_QUERY_PRINT]: {
+    '&[href^="/"], &[href^="http://"], &[href^="https://"]': {
+      '&::after': {
+        content: '" (" attr(href) ")"',
+        fontSize: '90%',
+        wordWrap: 'break-word'
+      }
     }
   }
-});
+};
 
@@ -474,3 +370,3 @@ var index$1 = /*#__PURE__*/Object.freeze({
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_shape-arrow.scss
-var root3 = 1.732; // Math.sqrt(3);
+const root3 = 1.732; // Math.sqrt(3);
 
@@ -480,6 +376,4 @@ function equilateralHeight(base) {
 }
-
 function makeShape(direction, base, height) {
-  var perpendicular = base / 2;
-
+  const perpendicular = base / 2;
   switch (direction) {
@@ -489,48 +383,44 @@ case 'up':
         clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
-        borderWidth: "0 ".concat(perpendicular, "px ").concat(height, "px ").concat(perpendicular, "px"),
+        borderWidth: `0 ${perpendicular}px ${height}px ${perpendicular}px`,
         borderBottomColor: 'inherit'
       };
-
     case 'right':
       return {
         clipPath: 'polygon(0% 0%, 100% 50%, 0% 100%)',
-        borderWidth: "".concat(perpendicular, "px 0 ").concat(perpendicular, "px ").concat(height, "px"),
+        borderWidth: `${perpendicular}px 0 ${perpendicular}px ${height}px`,
         borderLeftColor: 'inherit'
       };
-
     case 'down':
       return {
         clipPath: 'polygon(0% 0%, 50% 100%, 100% 0%)',
-        borderWidth: "".concat(height, "px ").concat(perpendicular, "px 0 ").concat(perpendicular, "px"),
+        borderWidth: `${height}px ${perpendicular}px 0 ${perpendicular}px`,
         borderTopColor: 'inherit'
       };
-
     case 'left':
       return {
         clipPath: 'polygon(0% 50%, 100% 100%, 100% 0%)',
-        borderWidth: "".concat(perpendicular, "px ").concat(height, "px ").concat(perpendicular, "px 0"),
+        borderWidth: `${perpendicular}px ${height}px ${perpendicular}px 0`,
         borderRightColor: 'inherit'
       };
-
     default:
-      throw Error("Invalid arrow direction: expected 'up', 'right', 'down' or 'left', got ".concat(direction));
+      throw Error(`Invalid arrow direction: expected 'up', 'right', 'down' or 'left', got ${direction}`);
   }
-} // eslint-disable-next-line import/prefer-default-export
+}
 
-
+// eslint-disable-next-line import/prefer-default-export
 function arrow(_ref) {
-  var direction = _ref.direction,
-      _ref$base = _ref.base,
-      base = _ref$base === void 0 ? 0 : _ref$base,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? equilateralHeight(base) : _ref$height,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'block' : _ref$display;
-  return _objectSpread2({
-    display: display,
+  let {
+    direction,
+    base = 0,
+    height = equilateralHeight(base),
+    display = 'block'
+  } = _ref;
+  return {
+    display,
     width: 0,
     height: 0,
     borderStyle: 'solid',
-    borderColor: 'transparent'
-  }, makeShape(direction, base, height));
+    borderColor: 'transparent',
+    ...makeShape(direction, base, height)
+  };
 }
@@ -537,0 +427,0 @@

package.json

 {
   "name": "@govuk-react/lib",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "dependencies": {
-    "@govuk-react/constants": "^0.10.5",
+    "@govuk-react/constants": "^0.10.6",
     "govuk-colours": "^1.1.0"
@@ -7,0 +7,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

25

increased by4.17%

Worsened metrics

Total package byte prevSize

75232

decreased by-15.08%

Lines of code

2380

decreased by-6.11%

Dependency changes

• Updated@govuk-react/constants@^0.10.6