<commit_before>import React from "react"
import styled from "styled-components"

import { unica } from "Assets/Fonts"
import { pMedia } from "Components/Helpers"
import { IconImageSet } from "Components/Publishing/Icon/IconImageSet"
import { Media } from "Utils/Responsive"
import { ImageSetPreviewProps } from "./ImageSetPreview"

export const ImageSetLabel = (props: ImageSetPreviewProps) => {
  const {
    section: { images, title },
  } = props
  const label = images.length === 1 ? "Image" : "Images"
  const imageCount = `${images.length} ${label}`
  const primaryTitle = title ? title : imageCount

  return (
    <LabelWrapper>
      <TitleWrapper>
        <Title>{primaryTitle}</Title>

        <SubTitle>
          <SubTitlePrompt>View Slideshow</SubTitlePrompt>
          {title && <SubTitleCount>{imageCount}</SubTitleCount>}
        </SubTitle>
      </TitleWrapper>

      <Media greaterThanOrEqual="sm">
        <IconContainer>
          <IconImageSet />
        </IconContainer>
      </Media>
    </LabelWrapper>
  )
}

export const IconContainer = styled.div`
  height: 45px;
  position: relative;
  margin-left: 40px;
  text-align: right;
  > svg {
    height: 98%;
  }
`

export const LabelWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  width: 100%;
`

export const TitleWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`

const Title = styled.div`
  ${unica("s19", "medium")};
  margin-bottom: 8px;
  line-height: 1.1em;

  ${pMedia.xs`
    ${unica("s16", "medium")}
  `};
`
const SubTitle = styled.div`
  display: flex;
`
const SubTitlePrompt = styled.div`
  ${unica("s14", "medium")};

  ${pMedia.xs`
    ${unica("s12", "medium")}
  `};
`
const SubTitleCount = styled.div`
  ${unica("s14")};
  margin-left: 20px;

  ${pMedia.xs`
    ${unica("s12")}
  `};
`<commit_msg>use palette elements<commit_after>import { Flex, Sans, space } from "@artsy/palette"
import React from "react"
import styled from "styled-components"

import { IconImageSet } from "Components/Publishing/Icon/IconImageSet"
import { Media } from "Utils/Responsive"
import { ImageSetPreviewProps } from "./ImageSetPreview"

export const ImageSetLabel = (props: ImageSetPreviewProps) => {
  const {
    section: { images, title },
  } = props
  const label = images.length === 1 ? "Image" : "Images"
  const imageCount = `${images.length} ${label}`
  const primaryTitle = title ? title : imageCount

  return (
    <LabelWrapper alignItems="center" justifyContent="space-between">
      <Flex flexDirection="column" justifyContent="space-between">
        <Sans size={["4", "5"]} weight="medium" pb={2}>
          {primaryTitle}
        </Sans>

        <Flex>
          <Sans size={["2", "3"]} weight="medium">
            View Slideshow
          </Sans>
          {title && (
            <Sans size={["2", "3"]} pl={20}>
              {imageCount}
            </Sans>
          )}
        </Flex>
      </Flex>

      <Media greaterThanOrEqual="sm">
        <IconContainer>
          <IconImageSet />
        </IconContainer>
      </Media>
    </LabelWrapper>
  )
}

export const IconContainer = styled.div`
  height: 45px;
  position: relative;
  margin-left: ${space(4)}px;
  text-align: right;

  > svg {
    height: 98%;
  }
`

export const LabelWrapper = styled(Flex)`
  padding: ${space(2)}px;
  width: 100%;
`
{'fraction_non_alphanumeric': 0.15090484530064216, 'fraction_numerical': 0.014010507880910683, 'mean_word_length': 3.0365135453474674, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '16954', 'n_tokens_mistral': 1157, 'n_tokens_neox': 1112, 'n_words': 257}