+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])+  const size = props.size || sizes.medium+  return (+    <div {...styles.card()} {...htmlProps}>+      <div {...styles.overlays({ size })}>+        {props.image ? props.image : null}++        {props.fullOverlay ? (+          <div {...styles.fullOverlay(props)}>{props.fullOverlay}</div>+        ) : null}++        {Array.isArray(props.actionBar) && props.actionBar.length > 0 ? (+          <div {...styles.actionBar(props)}>{props.actionBar}</div>+        ) : null}++        {props.bonusBar ? (+          <div {...styles.bonusBar()}>{props.bonusBar}</div>+        ) : null}++        {props.tag}++        {props.progress ? (+          <div {...styles.progress()}>+            <div+              {...styles.progressBar(props)}+              aria-label={`${toPercentageString(props.progress)} complete`}+            />+          </div>+        ) : null}

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])+  const size = props.size || sizes.medium+  return (+    <div {...styles.card()} {...htmlProps}>+      <div {...styles.overlays({ size })}>+        {props.image ? props.image : null}++        {props.fullOverlay ? (+          <div {...styles.fullOverlay(props)}>{props.fullOverlay}</div>+        ) : null}++        {Array.isArray(props.actionBar) && props.actionBar.length > 0 ? (+          <div {...styles.actionBar(props)}>{props.actionBar}</div>+        ) : null}++        {props.bonusBar ? (+          <div {...styles.bonusBar()}>{props.bonusBar}</div>+        ) : null}

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])+  const size = props.size || sizes.medium+  return (+    <div {...styles.card()} {...htmlProps}>+      <div {...styles.overlays({ size })}>+        {props.image ? props.image : null}

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+  }) =>+    css(+      stylesheet['.psds-text-input__icon'],+      Boolean(icon) &&+        stylesheet[`.psds-text-input__icon--icon-align-${iconAlign}`],+      stylesheet[`.psds-text-input__icon--appearance-${appearance}`],+      stylesheet[`.psds-text-input__icon.psds-theme--${themeName}`]+    ),+  textInput: (disabled: boolean) =>+    css(+      stylesheet['.psds-text-input'],+      disabled && stylesheet['.psds-text-input--disabled']+    ),+  label: (themeName: ValueOf<typeof Theme.names>) =>+    css(+      stylesheet['.psds-text-input__label'],+      stylesheet[`.psds-text-input__label.psds-theme--${themeName}`]+    ),+  subLabel: (themeName: ValueOf<typeof Theme.names>) =>

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+  }) =>+    css(+      stylesheet['.psds-text-input__icon'],+      Boolean(icon) &&+        stylesheet[`.psds-text-input__icon--icon-align-${iconAlign}`],+      stylesheet[`.psds-text-input__icon--appearance-${appearance}`],+      stylesheet[`.psds-text-input__icon.psds-theme--${themeName}`]+    ),+  textInput: (disabled: boolean) =>+    css(+      stylesheet['.psds-text-input'],+      disabled && stylesheet['.psds-text-input--disabled']+    ),+  label: (themeName: ValueOf<typeof Theme.names>) =>+    css(+      stylesheet['.psds-text-input__label'],+      stylesheet[`.psds-text-input__label.psds-theme--${themeName}`]+    ),+  subLabel: (themeName: ValueOf<typeof Theme.names>) =>+    css(+      stylesheet['.psds-text-input__sub-label'],+      stylesheet[`.psds-text-input__sub-label.psds-theme--${themeName}`]+    )+}++export interface TextInputStatics {+  appearances: typeof vars.appearances+  iconAligns: typeof vars.iconAligns+  sizes: typeof vars.sizes+}++export interface TextInputProps extends HTMLAttributes<HTMLInputElement> {+  appearance?: ValueOf<typeof vars.appearances>+  disabled?: boolean+  error?: boolean+  fieldAfter?: React.ReactNode+  icon?: React.ReactNode+  iconAlign?: ValueOf<typeof vars.iconAligns>+  label?: React.ReactNode+  placeholder?: string+  type?: string+  name?: string+  size?: ValueOf<typeof vars.sizes>+  subLabel?: React.ReactNode+}++export interface TextInputComponent+  extends RefForwardingComponent<+    TextInputProps,+    HTMLInputElement,+    TextInputStatics+  > {}++export type MultipleRefs =

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+  }) =>+    css(+      stylesheet['.psds-text-input__icon'],+      Boolean(icon) &&+        stylesheet[`.psds-text-input__icon--icon-align-${iconAlign}`],+      stylesheet[`.psds-text-input__icon--appearance-${appearance}`],+      stylesheet[`.psds-text-input__icon.psds-theme--${themeName}`]+    ),+  textInput: (disabled: boolean) =>+    css(+      stylesheet['.psds-text-input'],+      disabled && stylesheet['.psds-text-input--disabled']+    ),+  label: (themeName: ValueOf<typeof Theme.names>) =>

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>

   "main": "dist/cjs/index.js",   "module": "dist/esm/index.js",   "scripts": {-    "build": "run-s build:js build:cjs build:css",-    "build:cjs": "babel --root-mode upward src --out-dir dist/cjs",+    "build": "run-s build:cjs build:esm build:css",+    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",     "build:css": "build-css --useGlamor -i dist/cjs/css/index.js",-    "build:js": "cross-env ESM=true babel --root-mode upward src --out-dir dist/esm",-    "build:watch": "yarn build:js -- --watch",+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",+    "build:watch": "yarn build:esm -- --watch",     "storybook": "start-storybook -p 6006",     "test": "jest",

 import { css } from 'glamor'-import React, { useRef, useState } from 'react'-import PropTypes from 'prop-types'+import React, { useRef, useState, HTMLAttributes } from 'react'  import Button from '@pluralsight/ps-design-system-button' import CircularProgress from '@pluralsight/ps-design-system-circularprogress' import { CloseIcon, SearchIcon } from '@pluralsight/ps-design-system-icon' import TextInput from '@pluralsight/ps-design-system-textinput' import { callAll } from '@pluralsight/ps-design-system-util' -import stylesheet from '../css/index.js'+import stylesheet from '../css'  const styles = {-  clear: clearVisible =>+  clear: (clearVisible: boolean) =>     css(       stylesheet['.psds-searchinput-clear'],       clearVisible && stylesheet['.psds-searchinput-clear__visible']     ),-  field: _ => css(stylesheet['.psds-searchinput-field'])+  field: () => css(stylesheet['.psds-searchinput-field']) } -const SearchInput = React.forwardRef(-  ({ loading, onClear, onChange, ...rest }, forwardedRef) => {+export interface SearchInputProps+  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {+  loading?: boolean+  onClear?: (evt?: React.MouseEvent) => void+  onChange?: (evt?: React.MouseEvent, val?: React.ReactText) => void

   "compilerOptions": {     "allowJs": true,     "rootDir": null,-    "jsx": "react"+    "jsx": "react",+    "strict": true

 import { css } from 'glamor'-import React, { useRef, useState } from 'react'-import PropTypes from 'prop-types'+import React, { useRef, useState, HTMLAttributes } from 'react'  import Button from '@pluralsight/ps-design-system-button' import CircularProgress from '@pluralsight/ps-design-system-circularprogress' import { CloseIcon, SearchIcon } from '@pluralsight/ps-design-system-icon' import TextInput from '@pluralsight/ps-design-system-textinput' import { callAll } from '@pluralsight/ps-design-system-util' -import stylesheet from '../css/index.js'+import stylesheet from '../css'  const styles = {-  clear: clearVisible =>+  clear: (clearVisible: boolean) =>     css(       stylesheet['.psds-searchinput-clear'],       clearVisible && stylesheet['.psds-searchinput-clear__visible']     ),-  field: _ => css(stylesheet['.psds-searchinput-field'])+  field: () => css(stylesheet['.psds-searchinput-field']) } -const SearchInput = React.forwardRef(-  ({ loading, onClear, onChange, ...rest }, forwardedRef) => {+export interface SearchInputProps+  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {+  loading?: boolean+  onClear?: (evt?: React.MouseEvent) => void

     "access": "public"   },   "scripts": {-    "build": "run-s build:js build:cjs build:css",-    "build:cjs": "babel --root-mode upward src --out-dir dist/cjs",+    "build": "run-s build:cjs build:esm build:css",+    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",     "build:css": "build-css --useGlamor -i dist/cjs/css/index.js",-    "build:js": "cross-env ESM=true babel --root-mode upward src --out-dir dist/esm",-    "build:watch": "yarn build:js -- --watch",+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",+    "build:watch": "yarn build:esm -- --watch",     "storybook": "start-storybook -p 6006",     "test": "jest",

     "test": "tsc --noEmit --project ./tsconfig.json && jest",     "test:watch": "yarn test -- --watchAll"   },+  "style": "dist/index.css",

     "test": "jest",     "test:watch": "yarn test -- --watchAll"   },+  "types": "dist/esm/index.d.ts",

+{+  "extends": "./tsconfig.json",+  "include": ["src"],+  "exclude": [+    ".storybook",+    "node_modules",+    "dist",+    "**/*.spec.*",+    "**/*.story.*"+  ],+  "compilerOptions": {+    "declaration": true,+    "outDir": "dist",+    "rootDir": "src"

 const { promises: fs } = require('fs') const fg = require('fast-glob') const path = require('path') const SVGO = require('svgo')+ const svgo = new SVGO({   plugins: [     { removeXMLNS: true },     { removeDimensions: true },     { removeAttrs: { attrs: '(stroke|fill)' } }   ] })-const regex = /aria-label=(?:"|')([\w ]+)(?:"|')/-const addAria = (svg, name) =>-  regex.test(svg) ? svg : svg.replace(/<svg/, `<svg aria-label="${name} icon"`)++const ariaLabelRegEx = /aria-label=(?:"|')([\w ]+)(?:"|')/

 const SVGO = require('svgo')  const svgo = new SVGO({ plugins: [{ removeXMLNS: true }] }) -const regex = />/-const componentTemplate = (svg, componentName, core) => `-import React from 'react'-import PropTypes from 'prop-types'-import Icon from ${-  core ? "'../index.js'" : "'@pluralsight/ps-design-system-icon'"-}-export const ${componentName} =  React.forwardRef(function ${componentName}({'aria-label': ariaLabel, ...props}, ref){ return (-  <Icon {...props} ref={ref}>-    ${svg.replace(-      regex,-      "role='img' {...(ariaLabel && { 'aria-label': ariaLabel })}>"-    )}-  </Icon>-)})-${componentName}.displayName = '${componentName}'-${componentName}.propTypes = {-  'aria-label': PropTypes.string,+exports.generateComponents = async ({

 default:  before_script:   - yarn config set ignore-engines true+  - yarn config set workspaces-experimental true

+import polyfillFocusWithin from 'focus-within'

 const createNodeMock = () => document.createElement('div') initStoryshots({   configPath: path.resolve(__dirname, '../../../.storybook'),   framework: 'react',+  // @ts-ignore

+import Button from '@pluralsight/ps-design-system-button'+import { CaretLeftIcon } from '@pluralsight/ps-design-system-icon'+import { RefForwardingComponent } from '@pluralsight/ps-design-system-util'+import { css } from 'glamor'+import React from 'react'++import stylesheet from '../css'++const styles = {+  breadcrumb: () => css(stylesheet['.psds-breadcrumb'])+}++interface BreadcrumbProps+  extends Omit<+    React.HTMLAttributes<HTMLDivElement>,+    'disabled' | 'href' | 'onClick'

+{+  "extends": "./tsconfig.json",+  "include": ["src"],+  "exclude": [+    ".storybook",+    "node_modules",+    "dist",+    "**/*.spec.*",+    "**/*.story.*"+  ],+  "compilerOptions": {+    "declaration": true,+    "outDir": "dist",+    "rootDir": "src"

 import { compose, css } from 'glamor'-import PropTypes from 'prop-types'-import React, { useState } from 'react'+import React, { HTMLAttributes, useState, useContext } from 'react' -import filterReactProps from '@pluralsight/ps-design-system-filter-react-props' import Halo from '@pluralsight/ps-design-system-halo'-import { useTheme } from '@pluralsight/ps-design-system-theme'-import { combineFns } from '@pluralsight/ps-design-system-util'-import { useRadioContext } from './context.js'-import stylesheet from '../css/index.js'+import { useTheme, names } from '@pluralsight/ps-design-system-theme'+import { combineFns, ValueOf } from '@pluralsight/ps-design-system-util'+import { RadioContext } from './context'+import stylesheet from '../css'  const styles = {-  button: ({ disabled }) =>+  button: (disabled: boolean) =>     compose(       css(stylesheet['.psds-radio-button']),       disabled && css(stylesheet['.psds-radio-button--disabled'])     ),-  circle: (themeName, checked) =>+  circle: (themeName: ValueOf<typeof names>, checked: boolean) =>

+{+  "extends": "./tsconfig.json",+  "include": ["src"],+  "exclude": [+    ".storybook",+    "node_modules",+    "dist",+    "**/*.spec.*",+    "**/*.story.*"+  ],+  "compilerOptions": {+    "declaration": true,+    "outDir": "dist",+    "rootDir": "src"

 const Button = React.forwardRef(({ value, label, ...props }, forwardedRef) => {       </div>        <input-        {...filterReactProps(props, { tagName: 'input' })}-        onClick={disabled ? null : handleClick}+        {...props}+        onClick={disabled ? () => {} : handleClick}

-import filterReactProps from '@pluralsight/ps-design-system-filter-react-props' import { useTheme } from '@pluralsight/ps-design-system-theme' import { css } from 'glamor'-import PropTypes from 'prop-types'-import React from 'react'-import { RadioContext } from './context.js'+import React, { HTMLAttributes } from 'react'+import { RadioContext } from './context' -import stylesheet from '../css/index.js'+import stylesheet from '../css'  const styles = {-  buttonContainer: _ => css(stylesheet['.psds-radio-group__button-container']),-  group: disabled =>+  buttonContainer: () => css(stylesheet['.psds-radio-group__button-container']),+  group: (disabled: boolean) =>     css(       stylesheet['.psds-radio-group'],       disabled && stylesheet['.psds-radio-group--disabled']     ),-  label: themeName =>+  label: (themeName: string) =>

 const styles = {   circleInner: () => css(stylesheet['.psds-radio-button__circle-inner']),   halo: () => css(stylesheet['.psds-radio-button__halo']),   input: () => css(stylesheet['.psds-radio-button__input']),-  label: themeName =>+  label: (themeName: ValueOf<typeof names>) =>     compose(       css(stylesheet['.psds-radio-button__label']),       css(stylesheet[`.psds-radio-button__label.psds-theme--${themeName}`])     ) } -const isChecked = (a, b) => a === b+const isChecked = (a: React.ReactText, b?: React.ReactText) => a === b -const Button = React.forwardRef(({ value, label, ...props }, forwardedRef) => {+export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onClick'> {+  label: React.ReactNode+  onBlur?: (e?: React.FocusEvent) => void+  onClick?: (e?: React.MouseEvent, v?: React.ReactText) => void

 import { compose, css } from 'glamor'-import PropTypes from 'prop-types'-import React, { useState } from 'react'+import React, { HTMLAttributes, useState, useContext } from 'react' -import filterReactProps from '@pluralsight/ps-design-system-filter-react-props' import Halo from '@pluralsight/ps-design-system-halo'-import { useTheme } from '@pluralsight/ps-design-system-theme'-import { combineFns } from '@pluralsight/ps-design-system-util'-import { useRadioContext } from './context.js'-import stylesheet from '../css/index.js'+import { useTheme, names } from '@pluralsight/ps-design-system-theme'+import { combineFns, ValueOf } from '@pluralsight/ps-design-system-util'+import { RadioContext } from './context'+import stylesheet from '../css'  const styles = {-  button: ({ disabled }) =>+  button: (disabled: boolean) =>     compose(       css(stylesheet['.psds-radio-button']),       disabled && css(stylesheet['.psds-radio-button--disabled'])     ),-  circle: (themeName, checked) =>+  circle: (themeName: ValueOf<typeof names>, checked: boolean) =>

 interface ActionMenuComponent  export const ActionMenu = React.forwardRef<HTMLUListElement, Props>(   ({ onClick, onClose, children, origin, ...props }, forwardedRef) => {-    const fallbackRef = React.useRef()-    const ref = forwardedRef || fallbackRef+    const ref = React.useRef<HTMLUListElement>()+    useImperativeHandle(forwardedRef, () => ref.current)