<NME> Helpers.tsx
<BEF> import { css } from "styled-components"
import theme from "../Assets/Theme"

/**
 * Helper function to display an element as a block that inherits its parents width
 * @param margin value in pixels to remove from width 100%
 */
export const block = (margin: number = 0) => {
  return (props: any = {}) => {
    if (props.block) {
      return css`
        width: calc(100% - ${margin}px);
        margin: 10px auto;
      `
    }
  }
}

const sizes = theme.flexboxgrid.breakpoints

type Media = { [S in keyof typeof sizes]: typeof css }

/**
 * @deprecated import { media } from `Styleguide/Elements/Grid` instead
 */
export const media: Media = Object.keys(sizes).reduce((accumulator, label) => {
  // using px in breakpoints to maintain uniform units with flexbox-grid
  // https://zellwk.com/blog/media-query-units/
  const pxSize = sizes[label]
  accumulator[label] = (strings, ...args) => css`
    @media (max-width: ${pxSize}px) {
      ${css(strings, ...args)};
    }
  `
  return accumulator

type PublishingMedia = { [S in keyof typeof psizes]: typeof css }

export const pMedia: PublishingMedia = Object.keys(
  psizes
).reduce((accumulator, label) => {
  const pxSize = psizes[label]
  accumulator[label] = (strings, ...args) => css`
    @media (max-width: ${pxSize}px) {
      ${css(strings, ...args)};
    }
  `
  return accumulator
}, {}) as PublishingMedia
  },
  {}
) as PublishingMedia

<MSG> Merge pull request #1072 from yuki24/remove-margin-x-from-input-component

Remove unneeded margin-left/right from the <Input> component
<DFF> @@ -9,7 +9,7 @@ export const block = (margin: number = 0) => {
   return (props: any = {}) => {
     if (props.block) {
       return css`
-        width: calc(100% - ${margin}px);
+        width: 100%;
         margin: 10px auto;
       `
     }
@@ -36,14 +36,15 @@ const psizes = theme.publishing.breakpoints
 
 type PublishingMedia = { [S in keyof typeof psizes]: typeof css }
 
-export const pMedia: PublishingMedia = Object.keys(
-  psizes
-).reduce((accumulator, label) => {
-  const pxSize = psizes[label]
-  accumulator[label] = (strings, ...args) => css`
-    @media (max-width: ${pxSize}px) {
-      ${css(strings, ...args)};
-    }
-  `
-  return accumulator
-}, {}) as PublishingMedia
+export const pMedia: PublishingMedia = Object.keys(psizes).reduce(
+  (accumulator, label) => {
+    const pxSize = psizes[label]
+    accumulator[label] = (strings, ...args) => css`
+      @media (max-width: ${pxSize}px) {
+        ${css(strings, ...args)};
+      }
+    `
+    return accumulator
+  },
+  {}
+) as PublishingMedia

{'addition_count': 13, 'commit_subject': 'Merge pull request #1072 from yuki24/remove-margin-x-from-input-component', 'deletion_count': 12, 'file_extension': '.tsx', 'lang': 'tsx', 'license': 'mit', 'repo_name': 'artsy/reaction'}