How to use the @paprika/stylers.visuallyHidden function in @paprika/stylers

}

    &.form-element--has-error {
      border-color: ${tokens.color.orange};
    }

    &:focus {
      background-color: ${tokens.color.white};
      border-color: ${tokens.highlight.active.noBorder.borderColor};
      box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
      outline: none;
    }
  }

  .form-textarea__aria-label {
    ${stylers.visuallyHidden}
  }

  // Sizes

  &.form-textarea--small .form-textarea__textarea {
    ${stylers.fontSize(-2)};
  }

  &.form-textarea--medium .form-textarea__textarea {
    ${stylers.fontSize(-1)};
  }

  &.form-textarea--large .form-textarea__textarea {
    ${stylers.fontSize()};
  }

export const headingStyles = props => `
  ${defaultHeadingStyles}
  ${heading[`HEADING_LEVEL_${props.safeDisplayLevel || props.safeLevel}`]}
  ${props.isHidden ? stylers.visuallyHidden : ""}
  ${props.hasUnderline ? underline(props.safeDisplayLevel || props.safeLevel) : ""}
  ${props.isLight ? "font-weight: 400;" : ""}
`;

  ${({ isVisuallyHidden }) => isVisuallyHidden && stylers.visuallyHidden}

import stylers from "@paprika/stylers";

export const containerStyles = css`
  display: inline-block;
  position: relative;

  label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 100%;
  }

  input[type="file"] {
    ${stylers.visuallyHidden};
    height: 100%;
    position: absolute;
    width: 100%;
    &:focus + label {
      box-shadow: ${tokens.highlight.active.withBorder.boxShadow};
    }
  }
`;

${stylers.fontSize(-3)};
  max-width: 210px;
}

&.spinner--medium .spinner__caption {
  ${stylers.fontSize(-1)};
  max-width: 240px;
}

&.spinner--large .spinner__caption {
  ${stylers.fontSize()};
  max-width: 270px;
}

.spinner__aria-alert {
  ${stylers.visuallyHidden}
}
`;

border-radius: ${tokens.border.radius};
  margin-bottom: ${stylers.spacer(2)};
  padding: ${stylers.spacer(2)};
  width: 280px;
`;

export const TruncatedBox = styled(Box)`
  ${stylers.truncateText};
`;

export const UntruncatedBox = styled(TruncatedBox)`
  ${stylers.noTruncateText};
`;

export const InvisibleBox = styled(Box)`
  ${stylers.visuallyHidden};
`;

export const InputWithPlaceholder = styled.input`
  ${stylers.placeholders};
`;

export const FontScale = styled.div``;

export const FontStep = styled.span`
  ${props => stylers.fontSize(props.scale)};

  display: inline-flex;
  flex-direction: column;
  line-height: 1;

  > span {