@comicrelief/component-library 7.35.10 → 7.37.0

package/dist/components/Atoms/Icons/Arrow.js

@@ -17,25 +17,45 @@ const angle = {
 const Icon = _styledComponents.default.svg.withConfig({
   displayName: "Arrow__Icon",
   componentId: "sc-1iegggu-0"
-})(["transform:", ";"], _ref => {
+})(["transform:", ";fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
     direction
   } = _ref;
   return "rotate(".concat(angle[direction], ")");
+}, _ref2 => {
+  let {
+    mobileColour,
+    colour,
+    theme
+  } = _ref2;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoint('medium');
+}, _ref4 => {
+  let {
+    colour,
+    theme
+  } = _ref4;
+  return colour ? theme.color(colour) : theme.color('white');
 });
-const Arrow = _ref2 => {
+const Arrow = _ref5 => {
   let {
     colour,
+    mobileColour,
     theme,
     size,
     direction,
     ...rest
-  } = _ref2;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
     direction: direction,
     width: size,
     height: size,
-    fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
@@ -46,6 +66,7 @@ const Arrow = _ref2 => {
 };
 Arrow.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24,
   direction: 'up'
 };

package/dist/components/Atoms/Icons/AtSign.js

@@ -1,24 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const PATH_DATA = 'M40.811,9.307C36.607,4.664,30.48,2,24,2C11.458,2,2,11.458,2,24s9.458,22,22,22c10.221,0,14.032-3.779,15.29-5.031 c0.197-0.115,0.379-0.265,0.533-0.451c0.707-0.849,0.592-2.11-0.257-2.817c-0.438-0.362-1.61-1.049-3.093,0.427 C35.512,39.086,32.585,42,24,42C13.738,42,6,34.262,6,24S13.738,6,24,6c5.353,0,10.398,2.184,13.845,5.991 c3.162,3.495,4.642,8.044,4.165,12.81c-0.364,3.641-1.958,6.013-4.487,6.677c-1.853,0.487-3.658-0.145-4.269-1.011 c-1.001-1.422-0.753-4.747,0.009-8.237c1.035-3.375,2.104-6.939,2.177-7.179c0.308-1.027-0.249-2.114-1.263-2.465 c-1.012-0.349-2.122,0.161-2.515,1.159c-0.097,0.247-0.191,0.491-0.282,0.732c-1.427-1.455-3.424-2.421-5.724-2.66 c-3.983-0.41-9.547,1.602-12.107,8.643c-1.334,3.667-1.19,7.467,0.384,10.163c1.241,2.126,3.291,3.482,5.929,3.921 c4.299,0.714,7.438-0.837,9.464-3.098c0.254,0.695,0.516,1.122,0.659,1.325c1.66,2.358,5.257,3.443,8.555,2.576 c1.987-0.522,6.691-2.557,7.451-10.147C46.581,19.295,44.741,13.651,40.811,9.307z M37.871,41.195 c-0.149-0.03-0.3-0.081-0.448-0.152C37.567,41.112,37.718,41.163,37.871,41.195z M29.195,21.849 c-0.554,1.799-1.07,3.451-1.379,4.375c-0.413,1.243-2.174,5.229-7.297,4.374c-1.468-0.245-2.493-0.896-3.133-1.993 c-0.967-1.657-0.997-4.254-0.078-6.779c1.633-4.492,4.727-6.064,7.296-6.064c0.217,0,0.431,0.011,0.639,0.033 c1.952,0.203,4.068,1.433,4.396,3.726c0.01,0.074,0.024,0.146,0.043,0.217C29.49,20.479,29.329,21.181,29.195,21.849z';
-const AtSign = _ref => {
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "AtSign__StyledSVG",
+  componentId: "sc-1328gc9-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
+  let {
+    mobileColour,
+    colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('medium');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const AtSign = _ref4 => {
   let {
     theme,
     size,
     colour,
+    mobileColour,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({
     width: size,
     height: size,
-    fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     viewBox: "0 0 48 48"
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
     d: PATH_DATA
@@ -26,6 +51,7 @@ const AtSign = _ref => {
 };
 AtSign.defaultProps = {
   size: 24,
-  colour: 'white'
+  colour: 'white',
+  mobileColour: null
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(AtSign);

package/dist/components/Atoms/Icons/Chevron.js

@@ -17,25 +17,46 @@ const angle = {
 const Icon = _styledComponents.default.svg.withConfig({
   displayName: "Chevron__Icon",
   componentId: "sc-1p4fsgl-0"
-})(["transform:", ";"], _ref => {
+})(["transform:", ";fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
     direction
   } = _ref;
   return "rotate(".concat(angle[direction], ")");
+}, _ref2 => {
+  let {
+    mobileColour,
+    colour,
+    theme
+  } = _ref2;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoint('medium');
+}, _ref4 => {
+  let {
+    colour,
+    theme
+  } = _ref4;
+  return colour ? theme.color(colour) : theme.color('white');
 });
-const Chevron = _ref2 => {
+const Chevron = _ref5 => {
   let {
     colour,
+    mobileColour,
     theme,
     size,
     direction,
     ...rest
-  } = _ref2;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
     direction: direction,
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 48 48"
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
@@ -44,6 +65,7 @@ const Chevron = _ref2 => {
 };
 Chevron.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24,
   direction: 'up'
 };

package/dist/components/Atoms/Icons/Download.js

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const Download = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "Download__StyledSVG",
+  componentId: "sc-eoa7se-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('medium');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const Download = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const Download = _ref => {
 };
 Download.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Download);

package/dist/components/Atoms/Icons/External.js

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const External = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "External__StyledSVG",
+  componentId: "sc-oha23y-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('medium');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const External = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const External = _ref => {
 };
 External.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(External);

package/dist/components/Atoms/Icons/Favourite.js

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const Favourite = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "Favourite__StyledSVG",
+  componentId: "sc-16rqg62-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('medium');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const Favourite = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const Favourite = _ref => {
 };
 Favourite.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Favourite);

package/dist/components/Atoms/Icons/Internal.js

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const Internal = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "Internal__StyledSVG",
+  componentId: "sc-166yk4t-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('medium');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const Internal = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const Internal = _ref => {
 };
 Internal.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Internal);

package/dist/components/Atoms/Link/Link.js

@@ -15,6 +15,7 @@ const Link = _ref => {
   let {
     children,
     color,
+    mobileColour,
     href,
     target,
     type,
@@ -54,6 +55,7 @@ const Link = _ref => {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_Link.default, Object.assign({}, rest, {
     color: color,
+    mobileColour: mobileColour,
     href: href,
     target: window,
     type: type,
@@ -66,6 +68,7 @@ const Link = _ref => {
 Link.defaultProps = {
   type: 'standard',
   color: 'red',
+  mobileColour: null,
   target: null,
   home: false,
   underline: true,

package/dist/components/Atoms/Link/Link.md

@@ -40,24 +40,26 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
   <div style={{ display: 'block', marginBottom: '10px' }}>
     <Link
       color="red"
+      mobileColour="blue"
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Internal colour="white" />}
+      icon={<Internal colour="white" mobileColour="red"/>}
     >
-      Internal link
+      Internal link, 'blue' with red icon on tablet and mobile
     </Link>
   </div>
 
   <div style={{ display: 'block', marginBottom: '10px' }}>
     <Link
-      color="red"
+      color="blue"
+      mobileColour="black"
       href="#anchor"
       target="blank"
       type="button"
-      icon={<External colour="white" />}
+      icon={<External colour="white" mobileColour="blue" />}
     >
-      External link
+      External link (black on mobile, blue on desktop)
     </Link>
   </div>
 
@@ -67,9 +69,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Download colour="white" />}
+      icon={<Download colour="white" mobileColour="blue" />}
     >
-      Download link
+      Download link (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -79,9 +81,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Favourite colour="white" />}
+      icon={<Favourite colour="white" mobileColour="blue" />}
     >
-      Favourite link
+      Favourite link (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -91,9 +93,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="up" colour="white" />}
+      icon={<Chevron direction="up" colour="white" mobileColour="blue" />}
     >
-      Chevron Up
+      Chevron Up (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -103,9 +105,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="down" colour="white" />}
+      icon={<Chevron direction="down" colour="white" mobileColour="blue" />}
     >
-      Chevron Down
+      Chevron Down (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -115,9 +117,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="left" colour="white" />}
+      icon={<Chevron direction="left" colour="white" mobileColour="blue" />}
     >
-      Chevron Left
+      Chevron Left (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -127,9 +129,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="right" colour="white" />}
+      icon={<Chevron direction="right" colour="white" mobileColour="blue" />}
     >
-      Chevron Right
+      Chevron Right (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -140,9 +142,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       target="blank"
       type="button"
       iconFirst
-      icon={<Arrow direction="left" colour="white" />}
+      icon={<Arrow direction="left" colour="white" mobileColour="blue" />}
     >
-      Arrow Left
+      Arrow Left (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -152,9 +154,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<AtSign />}
+      icon={<AtSign colour="white" mobileColour="blue" />}
     >
-      At Sign
+      At Sign (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 </div>;

package/dist/components/Atoms/Link/Link.style.js

@@ -9,7 +9,7 @@ exports.default = exports.IconWrapper = exports.HelperText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";@media ", "{width:auto;}"], _ref => {
+const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";", ";@media ", "{width:auto;}@media ", "{", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -22,49 +22,66 @@ const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;posit
   return color ? theme.buttonColors(color) : theme.buttonColors('red');
 }, _ref3 => {
   let {
+    mobileColour,
     theme
   } = _ref3;
+  return mobileColour ? theme.buttonColors(mobileColour) : null;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoint('medium');
+}, _ref6 => {
+  let {
+    color,
+    theme
+  } = _ref6;
+  return color ? theme.buttonColors(color) : theme.buttonColors('red');
 });
-const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref4 => {
+const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref7 => {
   let {
     theme
-  } = _ref4;
+  } = _ref7;
   return theme.fontSize('l');
-}, _ref5 => {
+}, _ref8 => {
   let {
     type,
     theme,
     underline
-  } = _ref5;
+  } = _ref8;
   return type ? theme.linkStyles(type, underline) : theme.linkStyles('standard', underline);
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__IconWrapper",
   componentId: "sc-t360tr-0"
-})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref6 => {
+})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref9 => {
   let {
     type
-  } = _ref6;
+  } = _ref9;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
-}, _ref7 => {
+}, _ref10 => {
   let {
     theme
-  } = _ref7;
+  } = _ref10;
   return theme.breakpoint('small');
-}, _ref8 => {
+}, _ref11 => {
   let {
     type
-  } = _ref8;
+  } = _ref11;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
 });
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "sc-t360tr-1"
-})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref9 => {
+})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref12 => {
   let {
     iconFirst
-  } = _ref9;
+  } = _ref12;
   return iconFirst && (0, _styledComponents.css)(["flex-direction:row-reverse;span[type=\"button\"]{margin-left:0;margin-right:1rem;}"]);
 });
 const HelperText = exports.HelperText = _styledComponents.default.span.withConfig({