@comicrelief/component-library 8.26.0 → 8.28.0

package/dist/components/Atoms/Button/Button.test.js

@@ -9,5 +9,66 @@ it("renders a standard styled link correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     type: "submit"
   }, "A standard link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      position: relative;
+      padding: 0.5rem 1.25rem;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 2rem;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      height: 3.125rem;
+      width: 100%;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      border: none;
+      cursor: pointer;
+      background-color: #E52630;
+      color: #FFFFFF;
+    }
+
+    .c0 > a {
+      -webkit-text-decoration: none;
+      text-decoration: none;
+    }
+
+    .c0:hover {
+      background-color: #890B11;
+      color: #FFFFFF;
+    }
+
+    @media (min-width:740px) {
+      .c0 {
+        width: auto;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 {
+        width: auto;
+        padding: 1rem 2rem;
+        margin: 0 auto 2rem;
+      }
+    }
+
+    <button
+      className="c0"
+      type="submit"
+    >
+      A standard link
+    </button>
+  `);
 });

package/dist/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -22,7 +22,10 @@ const LoaderContainer = _styledComponents.default.div.withConfig({
   let {
     withMargin
   } = _ref;
-  return withMargin ? "\n  margin-top: ".concat((0, _spacing.default)('xsm'), ";\n  margin-left: ").concat((0, _spacing.default)('md'), ";\n") : '';
+  return withMargin ? `
+  margin-top: ${(0, _spacing.default)('xsm')};
+  margin-left: ${(0, _spacing.default)('md')};
+` : '';
 });
 
 // A button with loading and disabled states.

package/dist/components/Atoms/Checkbox/Checkbox.js

@@ -24,7 +24,7 @@ const Label = _styledComponents.default.label.withConfig({
     theme,
     labelColour
   } = _ref2;
-  return labelColour && "color: ".concat(theme.color(labelColour));
+  return labelColour && `color: ${theme.color(labelColour)}`;
 });
 const StyledCheckboxInput = _styledComponents.default.input.attrs({
   type: 'checkbox'

package/dist/components/Atoms/Checkbox/Checkbox.test.js

@@ -15,5 +15,164 @@ it('renders correctly', () => {
     value: "Handball",
     label: "Handball"
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    Array [\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .c1 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: contain;\n      background-color: #E52630;\n      border: 1px solid #E52630;\n    }\n\n    .c1:focus + span {\n      border: 1px solid #E52630;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"sport1\"\n      >\n        <input\n          className=\"c1\"\n          id=\"sport1\"\n          name=\"sport1\"\n          type=\"checkbox\"\n          value=\"Tennis\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Tennis\n        </span>\n      </label>,\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .c1 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: contain;\n      background-color: #E52630;\n      border: 1px solid #E52630;\n    }\n\n    .c1:focus + span {\n      border: 1px solid #E52630;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"sport2\"\n      >\n        <input\n          className=\"c1\"\n          id=\"sport2\"\n          name=\"sport2\"\n          type=\"checkbox\"\n          value=\"Handball\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Handball\n        </span>\n      </label>,\n    ]\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    Array [
+      .c2 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .c1 {
+      border: 0;
+      -webkit-clip: rect(0 0 0 0);
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+
+    .c1 + span {
+      margin-right: 12px;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      background-color: #FFFFFF;
+      border: 1px solid #969598;
+      float: left;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+    }
+
+    .c1:checked + span {
+      background: url(mock.asset) no-repeat center;
+      background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
+    }
+
+    .c1:focus + span {
+      border: 1px solid #E52630;
+    }
+
+    <label
+        className="c0"
+        htmlFor="sport1"
+      >
+        <input
+          className="c1"
+          id="sport1"
+          name="sport1"
+          type="checkbox"
+          value="Tennis"
+        />
+        <span />
+        <span
+          className="c2"
+          color="inherit"
+          size="s"
+        >
+          Tennis
+        </span>
+      </label>,
+      .c2 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .c1 {
+      border: 0;
+      -webkit-clip: rect(0 0 0 0);
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+
+    .c1 + span {
+      margin-right: 12px;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      background-color: #FFFFFF;
+      border: 1px solid #969598;
+      float: left;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+    }
+
+    .c1:checked + span {
+      background: url(mock.asset) no-repeat center;
+      background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
+    }
+
+    .c1:focus + span {
+      border: 1px solid #E52630;
+    }
+
+    <label
+        className="c0"
+        htmlFor="sport2"
+      >
+        <input
+          className="c1"
+          id="sport2"
+          name="sport2"
+          type="checkbox"
+          value="Handball"
+        />
+        <span />
+        <span
+          className="c2"
+          color="inherit"
+          size="s"
+        >
+          Handball
+        </span>
+      </label>,
+    ]
+  `);
 });

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

@@ -21,7 +21,7 @@ const Icon = _styledComponents.default.svg.withConfig({
   let {
     direction
   } = _ref;
-  return "rotate(".concat(angle[direction], ")");
+  return `rotate(${angle[direction]})`;
 }, _ref2 => {
   let {
     mobileColour,

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

@@ -21,7 +21,7 @@ const Icon = _styledComponents.default.svg.withConfig({
   let {
     direction
   } = _ref;
-  return "rotate(".concat(angle[direction], ")");
+  return `rotate(${angle[direction]})`;
 }, _ref2 => {
   let {
     mobileColour,

package/dist/components/Atoms/Input/Input.js

@@ -15,7 +15,7 @@ var _ErrorText = _interopRequireDefault(require("../ErrorText/ErrorText"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 // This seems to get a decent approximation of the necessary width (without resorting to measuring
 //  the element with JS)
-const getPrefixWidth = prefixLength => "calc(1.5rem + (".concat(prefixLength, " * 0.5rem))");
+const getPrefixWidth = prefixLength => `calc(1.5rem + (${prefixLength} * 0.5rem))`;
 const InputWrapper = _styledComponents.default.div.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-bcqy1o-0"
@@ -39,7 +39,7 @@ const InputFieldContainer = _styledComponents.default.div.withConfig({
     maxPxWidthLargeBreakpoint,
     theme
   } = _ref3;
-  return (0, _styledComponents.css)(["@media ", "{", "}@media ", "{", "}"], theme.allBreakpoints('M'), maxPxWidthMediumBreakpoint && "max-width: ".concat(maxPxWidthMediumBreakpoint, "px;"), theme.allBreakpoints('L'), maxPxWidthLargeBreakpoint && "max-width: ".concat(maxPxWidthLargeBreakpoint, "px;"));
+  return (0, _styledComponents.css)(["@media ", "{", "}@media ", "{", "}"], theme.allBreakpoints('M'), maxPxWidthMediumBreakpoint && `max-width: ${maxPxWidthMediumBreakpoint}px;`, theme.allBreakpoints('L'), maxPxWidthLargeBreakpoint && `max-width: ${maxPxWidthLargeBreakpoint}px;`);
 });
 const InputField = _styledComponents.default.input.withConfig({
   displayName: "Input__InputField",
@@ -50,7 +50,7 @@ const InputField = _styledComponents.default.input.withConfig({
     error,
     prefixLength
   } = _ref4;
-  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
+  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? `padding-left: ${getPrefixWidth(prefixLength)};` : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
 });
 const ErrorIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Input__ErrorIconWrapper",

package/dist/components/Atoms/Input/input.test.js

@@ -14,7 +14,123 @@ it('renders correctly', () => {
     errorMsg: "",
     id: "Accessibility info go here"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c3 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c4 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c5 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c5:focus {\n      border: 1px solid #666;\n    }\n\n    @media (min-width:740px) {\n\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"Accessibility info go here\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Label\",\n          }\n        }\n        size=\"s\"\n      />\n      <div\n        className=\"c3\"\n      >\n        \n        <div\n          className=\"c4\"\n        >\n          <input\n            aria-describedby=\"Accessibility info go here\"\n            className=\"c5\"\n            id=\"Accessibility info go here\"\n            name=\"fullname\"\n            placeholder=\"This is the hint text\"\n            required={false}\n            type=\"text\"\n          />\n          \n        </div>\n      </div>\n      \n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      width: 100%;
+      position: relative;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      color: #5C5C5E;
+    }
+
+    .c2 {
+      margin-bottom: 0.5rem;
+      font-weight: normal;
+    }
+
+    .c3 {
+      position: relative;
+      font-size: 1.25rem;
+    }
+
+    .c4 {
+      position: relative;
+      width: 100%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: end;
+      -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+      justify-content: flex-end;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .c5 {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 48px;
+      padding: 1rem 2.4rem 1rem 1.5rem;
+      background-color: #F4F3F5;
+      border: 1px solid;
+      border-color: #E1E2E3;
+      box-shadow: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: #000000;
+      border-radius: 0.5rem;
+      font-size: inherit;
+      z-index: 2;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c5:focus {
+      border: 1px solid #666;
+    }
+
+    @media (min-width:740px) {
+
+    }
+
+    @media (min-width:1024px) {
+
+    }
+
+    <label
+      className="c0"
+      htmlFor="Accessibility info go here"
+    >
+      <span
+        className="c1 c2"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Label",
+          }
+        }
+        size="s"
+      />
+      <div
+        className="c3"
+      >
+        
+        <div
+          className="c4"
+        >
+          <input
+            aria-describedby="Accessibility info go here"
+            className="c5"
+            id="Accessibility info go here"
+            name="fullname"
+            placeholder="This is the hint text"
+            required={false}
+            type="text"
+          />
+          
+        </div>
+      </div>
+      
+    </label>
+  `);
 });
 it('renders with responsive max widths correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -26,5 +142,125 @@ it('renders with responsive max widths correctly', () => {
     maxPxWidthMediumBreakpoint: 150,
     maxPxWidthLargeBreakpoint: 250
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c3 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c4 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c5 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c5:focus {\n      border: 1px solid #666;\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        max-width: 150px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        max-width: 250px;\n      }\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"input-example-7\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Responsive Width Input\",\n          }\n        }\n        size=\"s\"\n      />\n      <div\n        className=\"c3\"\n      >\n        \n        <div\n          className=\"c4\"\n        >\n          <input\n            aria-describedby=\"input-example-7\"\n            className=\"c5\"\n            id=\"input-example-7\"\n            name=\"responsive-width\"\n            placeholder=\"This input has responsive max widths\"\n            required={false}\n            type=\"text\"\n          />\n          \n        </div>\n      </div>\n      \n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      width: 100%;
+      position: relative;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      color: #5C5C5E;
+    }
+
+    .c2 {
+      margin-bottom: 0.5rem;
+      font-weight: normal;
+    }
+
+    .c3 {
+      position: relative;
+      font-size: 1.25rem;
+    }
+
+    .c4 {
+      position: relative;
+      width: 100%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: end;
+      -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+      justify-content: flex-end;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .c5 {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 48px;
+      padding: 1rem 2.4rem 1rem 1.5rem;
+      background-color: #F4F3F5;
+      border: 1px solid;
+      border-color: #E1E2E3;
+      box-shadow: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: #000000;
+      border-radius: 0.5rem;
+      font-size: inherit;
+      z-index: 2;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c5:focus {
+      border: 1px solid #666;
+    }
+
+    @media (min-width:740px) {
+      .c4 {
+        max-width: 150px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c4 {
+        max-width: 250px;
+      }
+    }
+
+    <label
+      className="c0"
+      htmlFor="input-example-7"
+    >
+      <span
+        className="c1 c2"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Responsive Width Input",
+          }
+        }
+        size="s"
+      />
+      <div
+        className="c3"
+      >
+        
+        <div
+          className="c4"
+        >
+          <input
+            aria-describedby="input-example-7"
+            className="c5"
+            id="input-example-7"
+            name="responsive-width"
+            placeholder="This input has responsive max widths"
+            required={false}
+            type="text"
+          />
+          
+        </div>
+      </div>
+      
+    </label>
+  `);
 });

package/dist/components/Atoms/Label/Label.js

@@ -25,7 +25,15 @@ const LabelElement = _styledComponents.default.label.withConfig({
     optional,
     theme
   } = _ref2;
-  return optional === true && "\n  :after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    content: 'Optional';\n    font-family: ".concat(theme.fontFamilies(theme.font.regular), ";\n    font-size: ").concat(theme.fontSize('s'), ";\n  }");
+  return optional === true && `
+  :after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: 'Optional';
+    font-family: ${theme.fontFamilies(theme.font.regular)};
+    font-size: ${theme.fontSize('s')};
+  }`;
 });
 const VisibleText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Label__VisibleText",